diff --git a/docs/cloud-teaser.md b/docs/cloud-teaser.md new file mode 100644 index 00000000..3bb67c2f --- /dev/null +++ b/docs/cloud-teaser.md @@ -0,0 +1,61 @@ +# Pilot horizontal teaser + +Standalone route: `/cloud-teaser`. This is a `noindex,nofollow` design preview, excluded from the sitemap. It does not replace `/cloud` or `/cloud-landing`. + +## The story + +1. **The last chore you’ll ever do.** The friend-group qualifier and an unresolved dinner conversation establish the coordination problem. +2. **First, you need an agent.** Muse, Dots, Grok Bot, Hermes, and OpenClaw lead; MCP-compatible chat apps remain a smaller, explicit alternative. Background operation requires enabled check-ins. +3. **Run your friend group on autopilot.** A two-agent exchange ends in a useful result. The visitor can try plans, updates, introductions, and files. The dinner example asks for approval; the introduction asks permission before connecting people. +4. **Your agent. Meet their agents.** People using different AI apps connect through Pilot, by invitation. +5. **New AI. Same handle.** Switching the sample AI changes the connected app, while the handle, link, and people remain. The profile is clearly an example, not a link to a real user. +6. **Claim your handle. Invite your friends.** `Start now` opens `https://cloud.pilotprotocol.network`; `Learn more` opens `/cloud-landing`. Both people connect an AI. The service is hosted, free to start, and requests require acceptance. + +The short story deliberately leaves earnings, business-agent coverage, and ecosystem expansion out. Their conditions and roadmap status need more room than a teaser affords. Product qualifications follow `docs/cloud-messaging.md`. + +## Visual and interaction choices + +One typeface (Inter Tight), cream, clay/coral, soft green, large type, and existing Pilot illustrations. The film contributes full-screen color changes, the dinner exchange, and the portable handle. It contributes no soundtrack, autoplay, or timed reading pressure. Human photography closes on the reason to coordinate: seeing each other. + +The page uses the existing licensed café photo and crops for illustrative avatars. Its source and credit are in `public/cloud/warm/CREDITS.md`. Agent marks come from the existing landing-page assets. `public/cloud/teaser/social.jpg` is a separate social card branded Pilot. + +Normal vertical document scrolling translates the story horizontally to the next panel on the right. Native mandatory scroll snapping settles on a complete chapter after the gesture; `scroll-snap-stop: always` marks each chapter as a stop for snap-based scrolling. Because the visual panels share a sticky viewport, one non-interactive document-position target per chapter supplies the vertical snap positions. They are disabled in the automatic vertical fallback. The last chapter reserves a complete viewport of scroll room even when mobile browser chrome changes its height. + +A passive listener schedules one animation frame per scroll update. There is no wheel/touch interception, synthetic momentum, or automatic advance. The track and small illustration offsets share the same scroll position. Previous/next controls and Left/Right keys offer deliberate chapter navigation; browser-native scrolling keys still work. Resizing settles on the nearest complete chapter. + +Native snapping references: [MDN scroll-snap-type](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/scroll-snap-type) and [MDN scroll-snap-stop](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/scroll-snap-stop). + +Inactive chapters are inert in horizontal mode, so keyboard focus and screen readers do not visit invisible controls. Chapter status changes only at chapter boundaries. The header contains only Pilot and Start now. Reduced motion, small landscape windows, oversized text, or content that cannot fit automatically use the ordinary vertical page; there is no reading-view toggle or stored mode preference. Compact phone layouts reduce illustration size and simplify the example card while retaining its disclosure and approval control. Without JavaScript, the entire story and both destination links remain available vertically; the sample interaction controls are hidden. + +References: [MDN sticky positioning](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/position), [WAI carousel interaction guidance](https://www.w3.org/WAI/ARIA/apg/patterns/carousel/), [MDN inert](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/inert), and [MDN reduced motion](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-motion). + +## Files + +- `src/pages/cloud-teaser.astro`: story, metadata, and static accessible content. +- `src/styles/cloud-teaser.css`: scoped responsive design. +- `src/scripts/cloud-teaser.ts`: scroll snapping, automatic vertical fallback, and local illustrative demos. +- `src/pages/sitemap.xml.ts`: preview exclusion. + +## Verification — 25 October 2026 + +- `npm run build`: passed (334 Astro pages plus generated error documents). +- `npm run check:plain`: passed, 100 required pairs. +- `npm run check:site`: passed, 338 HTML files and 24,437 internal references; includes the new image, metadata, preview exclusion, and both CTA destinations. +- Targeted TypeScript check for `cloud-teaser.ts`: passed. Repository-wide `npx tsc --noEmit` still fails in untouched Cloudflare function/worker types, analytics, and the untracked film directory. No errors point to the teaser. +- Chrome at 1280 × 667: all six chapters fit horizontally; plan approval, switching to the updates example, handle switching from Muse to Dots, and chapter controls verified. The example handle and people stayed fixed. +- Chrome at 390 × 844: horizontal story, agent marks, longest introduction example, and final CTA/photo composition visually checked. Native keyboard scrolling reached the final chapter. +- Chrome at 820 × 1180: stacked portrait composition and horizontal enhancement verified. All chapters pass the content-fit check before that enhancement enables. +- Chrome at 320 × 568: ordinary vertical fallback, wrapping, final CTA destinations, and the photo/footer checked. +- Emulated `prefers-reduced-motion: reduce` switches to the full vertical page and removes horizontal controls. Restoring the preference re-enables the story. +- Left/Right chapter navigation and native scrolling verified. Offscreen chapters are absent from Chrome’s accessibility tree while horizontal mode is active. Console showed only Vite development messages during the final pass. +- Contrast pass: cream text on coral measures 4.67:1; small coral-scene text uses that pair. Large peach display text is reserved for headlines. No timed animation, audio, or video runs on this route. + +These are Chrome checks, including device emulation; they are not a claim of physical-device Safari testing. Build output contains the complete static story for the no-JavaScript reading path. + +### Snap and mobile follow-up + +- Removed the reading-mode button and its localStorage behavior as requested. The header is brand plus Start now. +- Desktop partial and larger native scroll gestures settle on complete chapters. Reverse scrolling at 375 × 667 also settles cleanly; no custom wheel handler is used. +- 375 × 667 now fits the horizontal story. The phone-specific layout simplifies the handle card, keeps sample buttons at least 40px tall, and fits the longest introduction example with its disclosure above the chapter controls. The fit check covers every chapter before horizontal mode enables. +- Rechecked 390 × 844 after the follow-up: full chapter snapping remains enabled, including after a resize. A more compact result card keeps the longest introduction example above the controls. Mobile chapter arrows have 44px touch targets. +- Type check of the teaser script, production build, and full site-integrity checks pass after these changes. diff --git a/public/cloud/teaser/social.jpg b/public/cloud/teaser/social.jpg new file mode 100644 index 00000000..e056f5f3 Binary files /dev/null and b/public/cloud/teaser/social.jpg differ diff --git a/src/pages/cloud-teaser.astro b/src/pages/cloud-teaser.astro new file mode 100644 index 00000000..1a0375a1 --- /dev/null +++ b/src/pages/cloud-teaser.astro @@ -0,0 +1,196 @@ +--- +import BaseHead from '../components/BaseHead.astro'; +import '../styles/cloud-teaser.css'; + +const app = 'https://cloud.pilotprotocol.network'; +const agents = [ + ['Muse', 'muse.png'], ['Dots', 'dots.webp'], ['Grok Bot', 'grok.png'], + ['Hermes', 'hermes.png'], ['OpenClaw', 'openclaw.png'], +]; +const chats = [ + ['Claude', 'claude.svg'], ['ChatGPT', 'chatgpt.svg'], ['Gemini', 'gemini.svg'], + ['Le Chat', 'lechat.png'], ['Perplexity', 'perplexity.svg'], +]; +--- + + + + + + + + + + Skip to the story +
+ Pilot +
+ Start now +
+
+ +
+
+
+
+
+
+

For your friend group

+

The last
chore you’ll
ever do.

+

Connect your AI once.
Let it handle the back-and-forth.

+
+
+ + + +
Dinner soon?Priya · just now
+
Yes! When works?
+
Let me check…
+ Pilot, a puppy carrying a letter + Good friends. So much admin. +
+
+
+ +
+
+
+

01 / Bring your AI

+

First, you
need an
agent.

+

The one you already use.
Pilot gives it a way to reach your people.

+
+
+

Made for your background agent

+
+ {agents.map(([name, logo], index) =>
+ + {name} +
)} +
+

With background check-ins enabled,
they can pick up replies while you’re away.

+
+
{chats.map(([name, logo]) => {name})}
+

Or a chat app. Any AI with MCP.
Chat apps work while you chat.

+
+
+
+
+ +
+
+
+

02 / Hand off the back-and-forth

+

Run your
friend group
on autopilot.

+

Let the agents do the back-and-forth.
You get the part worth showing up for.

+ +
+
+
+
Your Musevia Pilot

Dinner with Priya on Thursday?

+ +
Priya’s Dotsvia Pilot

After 7 works for Priya. How’s 7:30?

+
+ +
A plan, ready for your OK

Thursday, 7:30.

Dinner with Priya. Finally.

+ +
+
+

Illustrative example · Both AIs connected.
Your agent uses the context and permissions you give it.

+
+
+
+ +
+
+
+

03 / Different AIs. Your people.

+

Your agent.
Meet their
agents.

+

Pilot connects your AI to theirs.
Make a plan. Ask for an intro.
Get an update. Send a file.

+

By invitation. You decide who’s in.

+
+
+ +
YouMuse
+
Pilot
+
PriyaDots
+
SamHermes
+
Dinner? Sorted.
+
Deck? Delivered.
+
+
+
+ +
+
+
+

04 / One link to reach you

+

New AI.
Same
handle.

+

Share your handle link with your friends.
Switch your AI whenever you like.
Your people come with you.

+
+
+
+
Yours to keep
+

@maya

+

cloud.pilotprotocol.network/@maya

+
Connected toMuse
+
Same friends. Same connections.
+
+ +

Example handle · Connect a new AI to the same Pilot account.

+
+
+
+ +
+
+
+

Less planning. More see you soon.

+

Claim your
handle.
Invite your
friends.

+
Start now Learn more
+

Free to start. Hosted for you.
You both connect an AI. No Pilot software to install.
Accept requests, then choose each person’s circle.

+
+
+
Two friends laughing together over coffee at a caféActually
seeing you
soon. ♡
+
That’s the whole point.
+ +
+ +
+
+
+ +
+
+ + + diff --git a/src/pages/sitemap.xml.ts b/src/pages/sitemap.xml.ts index 000d9217..07175562 100644 --- a/src/pages/sitemap.xml.ts +++ b/src/pages/sitemap.xml.ts @@ -28,7 +28,7 @@ function routeFromKey(key: string): string { const REFERENCE = new Set(['error-codes', 'troubleshooting', 'diagnostics', 'configuration']); const LEGAL = new Set(['/privacy', '/cookies', '/terms', '/aup', '/publisher-agreement']); // Standalone design previews are intentionally noindex and shared by direct link. -const PREVIEWS = new Set(['/cloud-landing']); +const PREVIEWS = new Set(['/cloud-landing', '/cloud-teaser']); // The four offerings: the protocol (home), the service agents, the App Store // and Pilot Cloud. diff --git a/src/scripts/cloud-teaser.ts b/src/scripts/cloud-teaser.ts new file mode 100644 index 00000000..1e8b3b49 --- /dev/null +++ b/src/scripts/cloud-teaser.ts @@ -0,0 +1,209 @@ +// Native vertical scrolling and CSS snap points move a horizontal story. No +// wheel/touch interception or synthetic inertia. The unenhanced page is vertical. +const root = document.documentElement; +const story = document.querySelector('.teaser-story'); +const stage = document.querySelector('.teaser-stage'); +const track = document.querySelector('.teaser-track'); +const panels = Array.from(document.querySelectorAll('.teaser-panel')); +const controls = document.querySelector('.teaser-controls'); +const previous = document.querySelector('[data-previous]'); +const next = document.querySelector('[data-next]'); +const chapter = document.querySelector('[data-chapter]'); +const status = document.querySelector('[data-story-status]'); +const cue = document.querySelector('[data-scroll-cue]'); +const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)'); +let horizontal = false; +let active = 0; +let lastPainted = -1; +let stageHeight = 0; +let stageWidth = 0; +let startY = 0; +let pendingFrame = 0; + +function setActive(index: number) { + if (index === lastPainted) return; + const changed = index !== active; + active = index; + lastPainted = index; + root.dataset.tone = panels[index]?.dataset.tone || 'light'; + panels.forEach((panel, i) => { + const inactive = horizontal && i !== index; + if (inactive && panel.contains(document.activeElement)) stage?.focus({ preventScroll: true }); + panel.inert = inactive; + }); + if (chapter) chapter.textContent = String(index + 1).padStart(2, '0'); + if (previous) previous.disabled = index === 0; + if (next) next.disabled = index === panels.length - 1; + if (cue) cue.textContent = index === panels.length - 1 ? 'More see you soon' : index === 0 ? 'Scroll to see how' : 'Keep scrolling'; + if (changed && status) status.textContent = `Chapter ${index + 1} of ${panels.length}: ${panels[index].dataset.name}`; +} + +function paint() { + pendingFrame = 0; + if (!horizontal || !track || !stageHeight) return; + const progress = Math.max(0, Math.min(panels.length - 1, (window.scrollY - startY) / stageHeight)); + track.style.transform = `translate3d(${-progress * stageWidth}px, 0, 0)`; + stage?.style.setProperty('--progress', String(progress / (panels.length - 1))); + panels.forEach((panel, i) => panel.style.setProperty('--travel', String(Math.max(-1, Math.min(1, progress - i))))); + setActive(Math.round(progress)); +} + +function onScroll() { + if (horizontal && !pendingFrame) pendingFrame = requestAnimationFrame(paint); +} + +function goTo(index: number) { + if (!horizontal) return; + window.scrollTo({ top: startY + Math.max(0, Math.min(panels.length - 1, index)) * stageHeight, behavior: reducedMotion.matches ? 'instant' : 'smooth' }); +} + +function configure(keepPlace = false) { + if (!story || !stage || !track || !controls) return; + const wasHorizontal = horizontal; + const priorIndex = !wasHorizontal && keepPlace + ? panels.reduce((closest, panel, i) => Math.abs(panel.getBoundingClientRect().top) < Math.abs(panels[closest].getBoundingClientRect().top) ? i : closest, 0) + : active; + const priorProgress = wasHorizontal && stageHeight ? (window.scrollY - startY) / stageHeight : priorIndex; + // Don't let a transient measurement layout become a new native snap position. + root.classList.remove('teaser-snapping'); + // Small landscape windows and large text need a page that can grow naturally. + const eligible = !reducedMotion.matches && window.innerHeight >= 660; + horizontal = eligible; + root.classList.toggle('teaser-horizontal', eligible); + story.style.height = ''; + track.style.transform = ''; + controls.hidden = !eligible; + panels.forEach(panel => { panel.inert = false; panel.style.removeProperty('--travel'); }); + lastPainted = -1; + if (eligible) { + stageHeight = stage.clientHeight; + stageWidth = stage.clientWidth; + // A panel's real content must fit. Fall back instead of clipping at zoom or + // an unusually short viewport. Absolute decorative art isn't interactive. + const overflow = panels.some(panel => { + const inner = panel.querySelector('.panel-inner')!; + const bounds = inner.getBoundingClientRect(); + const style = getComputedStyle(inner); + const top = bounds.top + parseFloat(style.paddingTop); + const bottom = bounds.bottom - parseFloat(style.paddingBottom); + return inner.scrollHeight > inner.clientHeight + 2 || Array.from(inner.children).some(child => { + if (getComputedStyle(child).position === 'absolute') return false; + const box = child.getBoundingClientRect(); + // A little rotated decoration may extend past its grid cell. + return box.top < top - 16 || box.bottom > bottom + 16; + }); + }); + if (overflow) { + horizontal = false; + root.classList.remove('teaser-horizontal'); + controls.hidden = true; + } else { + story.style.setProperty('--teaser-step', `${stageHeight}px`); + // The last snap target needs a full viewport of scroll room, including + // when mobile browser chrome makes innerHeight differ from 100svh. + story.style.height = `${stageHeight * (panels.length - 1) + window.innerHeight}px`; + startY = story.getBoundingClientRect().top + window.scrollY; + } + } + if (keepPlace) { + if (horizontal) window.scrollTo({ top: startY + Math.round(wasHorizontal ? priorProgress : priorIndex) * stageHeight, behavior: 'instant' }); + else if (wasHorizontal) panels[priorIndex]?.scrollIntoView({ behavior: 'instant', block: 'start' }); + } + if (horizontal) paint(); + else { root.dataset.tone = 'light'; panels.forEach(panel => panel.inert = false); } + root.classList.toggle('teaser-snapping', horizontal); +} + +if (story && stage && track && panels.length && controls) { + // The visual panels share one sticky viewport, so they cannot be their own + // vertical snap targets. Give the browser one fixed document target per panel. + const snapPoints = document.createElement('div'); + snapPoints.className = 'teaser-snap-points'; + snapPoints.setAttribute('aria-hidden', 'true'); + panels.forEach((_, index) => { + const point = document.createElement('div'); + point.className = 'teaser-snap-point'; + point.style.setProperty('--chapter', String(index)); + snapPoints.append(point); + }); + story.prepend(snapPoints); + stage.tabIndex = -1; + stage.setAttribute('aria-label', 'Pilot story'); + previous?.addEventListener('click', () => goTo(active - 1)); + next?.addEventListener('click', () => goTo(active + 1)); + window.addEventListener('scroll', onScroll, { passive: true }); + document.addEventListener('keydown', event => { + if (!horizontal || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return; + if ((event.target as HTMLElement).closest('a, button, input, select, textarea, [contenteditable="true"]')) return; + if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') { + event.preventDefault(); + goTo(active + (event.key === 'ArrowRight' ? 1 : -1)); + } + }); + document.querySelector('.teaser-skip')?.addEventListener('click', event => { + event.preventDefault(); + stage.focus({ preventScroll: true }); + if (horizontal) goTo(0); else story.scrollIntoView(); + }); + let resizeFrame = 0; + window.addEventListener('resize', () => { + cancelAnimationFrame(resizeFrame); + resizeFrame = requestAnimationFrame(() => configure(true)); + }, { passive: true }); + reducedMotion.addEventListener('change', () => configure(true)); + configure(); + // Fonts can change wrapping; don't assume the initial fallback font fits. + document.fonts.ready.then(() => configure(true)); +} + +const examples = { + plans: { ask: 'Dinner with Priya on Thursday?', agent: 'Priya’s Dots', logo: 'dots.webp', reply: 'After 7 works for Priya. How’s 7:30?', eyebrow: 'A plan, ready for your OK', title: 'Thursday, 7:30.', detail: 'Dinner with Priya. Finally.', action: 'Looks good', done: 'That’s a plan. See you Thursday!', approved: 'Plan approved · Example' }, + updates: { ask: 'Sam, how’s the launch coming along?', agent: 'Sam’s Hermes', logo: 'hermes.png', reply: 'Sam’s latest update: on track for Friday.', eyebrow: 'The answer, without the follow-up', title: 'Friday. On track.', detail: 'One less person to chase.', action: 'Got it', done: 'Update noted. Back to your day.', approved: 'Update received · Example' }, + intros: { ask: 'Does Priya know a good designer?', agent: 'Priya’s Dots', logo: 'dots.webp', reply: 'She knows Alex. Shall I ask if he’s open to an intro?', eyebrow: 'An introduction starts with permission', title: 'A good connection.', detail: 'Ask first. Connect when everyone agrees.', action: 'Ask Alex', done: 'The request goes to Alex. He gets to decide.', approved: 'Intro request · Example' }, + files: { ask: 'Send Sam the latest deck from this chat.', agent: 'Sam’s Hermes', logo: 'hermes.png', reply: 'Got it. I have the latest version for Sam.', eyebrow: 'The right file, in the right hands', title: 'Deck. Delivered.', detail: 'No hunting through old messages.', action: 'All sorted', done: 'The latest version is with Sam’s agent.', approved: 'File received · Example' }, +}; +type Example = keyof typeof examples; +let currentExample: Example = 'plans'; +const exampleButtons = Array.from(document.querySelectorAll('[data-example]')); +const approve = document.querySelector('.result-approve'); +function showExample(key: Example) { + const example = examples[key]; + currentExample = key; + for (const field of ['ask', 'agent', 'reply', 'eyebrow', 'title', 'detail'] as const) { + const element = document.querySelector(`[data-example-${field}]`); + if (element) element.textContent = example[field]; + } + const logo = document.querySelector('[data-example-logo]'); + if (logo) logo.src = `/cloud/logos/${example.logo}`; + exampleButtons.forEach(button => button.setAttribute('aria-pressed', String(button.dataset.example === key))); + if (approve) { approve.textContent = `${example.action} ✓`; approve.dataset.approved = 'false'; } +} +exampleButtons.forEach(button => button.addEventListener('click', () => showExample(button.dataset.example as Example))); +if (approve) { + approve.hidden = false; + approve.addEventListener('click', () => { + if (approve.dataset.approved === 'true') { showExample(currentExample); return; } + const example = examples[currentExample]; + const detail = document.querySelector('[data-example-detail]'); + const eyebrow = document.querySelector('[data-example-eyebrow]'); + if (detail) detail.textContent = example.done; + if (eyebrow) eyebrow.textContent = example.approved; + approve.textContent = 'Replay example ↺'; + approve.dataset.approved = 'true'; + }); +} +const choices = document.querySelector('.example-choices'); +if (choices) choices.hidden = false; + +const identityButtons = Array.from(document.querySelectorAll('[data-identity]')); +identityButtons.forEach(button => button.addEventListener('click', () => { + const logo = document.querySelector('[data-identity-logo]'); + const name = document.querySelector('[data-identity-name]'); + if (logo) logo.src = `/cloud/logos/${button.dataset.logo}`; + if (name) name.textContent = button.dataset.identity || ''; + identityButtons.forEach(other => other.setAttribute('aria-pressed', String(other === button))); +})); +const identityPicker = document.querySelector('.identity-picker'); +if (identityPicker) identityPicker.hidden = false; + +export {}; diff --git a/src/styles/cloud-teaser.css b/src/styles/cloud-teaser.css new file mode 100644 index 00000000..158f1b93 --- /dev/null +++ b/src/styles/cloud-teaser.css @@ -0,0 +1,523 @@ +html.pilot-teaser { + --cream: #faf7f2; + --coral: #b94e36; + --ink: #392f29; + --peach: #efd8c7; + --muted: #75655c; + --sans: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; + --mono: var(--sans); + --serif: var(--sans); + --bg: var(--cream); + --bg-elevated: #fffdf9; + --text: var(--ink); + --text-muted: var(--muted); + --accent: var(--coral); + --accent-text: var(--coral); + --accent-ink: var(--cream); + --ink-dim: var(--muted); + --bg-2: #f1e2d5; + --line: #d9cabe; + --border: #d9cabe; + color-scheme: light; + background: var(--cream); + scroll-behavior: auto; + overflow-x: clip; +} +.pilot-teaser body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; transition: none; } +.pilot-teaser *, .pilot-teaser *::before, .pilot-teaser *::after { box-sizing: border-box; } +.pilot-teaser button, .pilot-teaser a { -webkit-tap-highlight-color: transparent; } +.pilot-teaser :where(button) { font: inherit; cursor: pointer; } +.pilot-teaser button:disabled { cursor: default; } +.pilot-teaser a { color: inherit; text-decoration: none; } +.pilot-teaser a:hover { color: inherit; } +.pilot-teaser button:focus-visible, .pilot-teaser a:focus-visible { outline: 3px solid currentColor; outline-offset: 5px; } +.pilot-teaser [hidden] { display: none !important; } +.pilot-teaser .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } +.teaser-skip { position: fixed; z-index: 110; left: 20px; top: -100px; padding: 12px 20px; background: var(--cream); border-radius: 20px; } +.teaser-skip:focus { top: 14px; } +.teaser-header { position: absolute; z-index: 20; inset: 0 0 auto; height: 104px; padding: 0 clamp(24px, 4.5vw, 84px); display: flex; align-items: center; justify-content: space-between; color: var(--ink); pointer-events: none; } +.teaser-header > * { pointer-events: auto; } +html:not(.teaser-horizontal) .teaser-header { position: fixed; background: var(--cream); } +.teaser-brand { display: inline-flex; gap: 10px; align-items: center; font-size: 31px; font-weight: 650; letter-spacing: -1.6px; } +.teaser-brand img { object-fit: contain; } +.teaser-header-actions { display: flex; align-items: center; gap: 25px; } +.teaser-start { padding: 13px 21px; background: var(--ink); color: var(--cream) !important; border-radius: 100px; display: inline-flex; align-items: center; gap: 24px; font-size: 15px; font-weight: 600; } +.teaser-start:hover { background: #574338; } +.teaser-start span { font-size: 20px; line-height: 1; } +.teaser-story { position: relative; } +.teaser-story:focus { outline: none; } +.teaser-snap-points { display: none; } +.teaser-panel { background: var(--cream); min-height: 100svh; position: relative; isolation: isolate; color: var(--ink); } +.panel-inner { width: min(100%, 1600px); min-height: 100svh; margin: 0 auto; padding: 125px clamp(28px, 6vw, 110px) 100px; display: grid; grid-template-columns: 1.04fr 1fr; gap: clamp(28px, 4vw, 78px); align-items: center; position: relative; } +.panel-copy { position: relative; z-index: 2; } +.teaser-kicker { font-size: 13px; line-height: 1.4; letter-spacing: .025em; font-weight: 550; margin: 0 0 25px; display: flex; align-items: center; gap: 9px; } +.teaser-kicker > span { font-size: 22px; line-height: 1; } +.pilot-teaser :where(h1, h2, h3, p, figure) { margin-top: 0; } +.pilot-teaser h1, .pilot-teaser h2 { font: 560 clamp(62px, 6.9vw, 112px)/.97 var(--sans); letter-spacing: -.065em; margin-bottom: 28px; text-wrap: balance; } +.pilot-teaser h1 { font-size: clamp(70px, 7.9vw, 128px); } +.pilot-teaser h3 { font-family: var(--sans); } +.coral-text { color: var(--coral); } +.soft-text { color: #f5d5bd; } +.teaser-description { font-size: clamp(17px, 1.5vw, 22px); line-height: 1.5; letter-spacing: -.015em; margin-bottom: 0; color: var(--muted); } +.panel-agents, .panel-handle { background: var(--coral); color: var(--cream); } +.panel-agents .teaser-description, .panel-handle .teaser-description { color: var(--cream); } +.panel-plans { background: #f1e2d5; } +.panel-people { background: #f0f0e6; } +.chore-scene { height: 510px; position: relative; width: 100%; } +.chore-orbit { position: absolute; inset: 65px -15px 20px; border-radius: 50%; background: #eed8c6; transform: rotate(-10deg); } +.chore-orbit::after { content: ''; position: absolute; inset: -16px 9px 16px -9px; border: 1px solid #d1b6a3; border-radius: 50%; transform: rotate(14deg); } +.chore-pup { position: absolute; width: 70%; height: auto; left: 10%; bottom: 44px; z-index: 2; transform: translateY(calc(var(--travel, 0) * -22px)) rotate(calc(var(--travel, 0) * -7deg)); } +.loose-message { position: absolute; z-index: 3; background: #fffdfa; border: 1px solid #f2e7df; box-shadow: 0 12px 28px #5f352a0c; padding: 16px 20px; border-radius: 22px; display: flex; align-items: center; gap: 15px; font-size: clamp(17px, 1.65vw, 24px); letter-spacing: -.02em; white-space: nowrap; } +.message-first { top: 25px; left: 4%; transform: rotate(-7deg) translateY(calc(var(--travel, 0) * -30px)); } +.message-first small { display: block; font-size: 11px; color: var(--muted); margin-top: 3px; letter-spacing: 0; } +.message-first > span:last-child { font-size: 31px; color: var(--coral); margin-left: 14px; } +.message-second { top: 145px; right: -2%; transform: rotate(7deg) translateY(calc(var(--travel, 0) * 40px)); background: #e0e7d5; } +.message-third { top: 270px; right: 0; transform: rotate(-4deg) translateX(calc(var(--travel, 0) * 28px)); z-index: 4; } +.person-avatar, .person-portrait, .friend-stack i { display: block; flex-shrink: 0; border-radius: 50%; background-image: url('/cloud/warm/friends-cafe-small.webp'); background-size: auto 235%; background-repeat: no-repeat; } +.person-avatar { width: 42px; height: 42px; } +.person-you { background-position: 37% 24%; } +.person-priya { background-position: 92% 12%; } +.typing-dots { display: flex; gap: 4px; margin-left: 5px; } +.typing-dots i { width: 5px; height: 5px; background: #bba89b; border-radius: 50%; } +.scene-star { position: absolute; color: var(--coral); line-height: 1; } +.star-one { right: 3%; top: 64px; font-size: 58px; transform: rotate(calc(var(--travel, 0) * 45deg)); } +.star-two { left: -4%; top: 190px; font-size: 34px; } +.scene-caption { position: absolute; bottom: 0; left: 0; right: 0; text-align: center; font-size: 13px; color: var(--muted); } +.agent-scene { text-align: center; max-width: 540px; } +.scene-label { font-size: 13px; margin: 0 0 24px; } +.agent-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; max-width: 470px; margin: auto; } +.agent-tile { grid-column: span 2; aspect-ratio: 1; background: var(--cream); color: var(--ink); border-radius: 26px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 13px; font-size: 15px; font-weight: 550; box-shadow: 0 6px 0 #92392344; } +.agent-tile img { width: 55%; height: 55%; max-width: 72px; max-height: 72px; object-fit: contain; } +.agent-tile-0 { transform: rotate(-7deg) translateY(calc(var(--travel, 0) * 25px)); } +.agent-tile-1 { transform: translateY(-7px); } +.agent-tile-2 { transform: rotate(7deg) translateY(calc(var(--travel, 0) * -25px)); } +.agent-tile-3 { grid-column: 2 / span 2; transform: rotate(4deg); } +.agent-tile-4 { transform: rotate(-5deg); } +.agent-note { font-size: 13px; line-height: 1.5; margin: 23px 0 22px; color: var(--cream); } +.chat-fallback { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 13px; padding-top: 21px; border-top: 1px solid #f3ddd33a; } +.chat-logos { display: flex; gap: 9px; padding: 10px 13px; background: var(--cream); border-radius: 99px; } +.chat-logos img { object-fit: contain; } +.chat-fallback p { margin: 0; font-size: 13px; line-height: 1.5; text-align: left; } +.chat-fallback p span { color: var(--cream); font-size: 12px; } +.panel-plans h2 { font-size: clamp(55px, 5.6vw, 90px); } +.example-choices { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 30px; } +.example-choices button { border: 1px solid #cbb7a6; background: transparent; padding: 10px 16px; border-radius: 99px; color: var(--ink); font-size: 13px; } +.example-choices button[aria-pressed='true'] { background: var(--ink); border-color: var(--ink); color: var(--cream); } +.example-choices button:hover { border-color: var(--ink); } +.plan-scene { max-width: 520px; width: 100%; } +.exchange-message { border-radius: 24px; background: #fffdf9; padding: 20px 23px; box-shadow: 0 8px 30px #6b463307; } +.your-agent { margin-right: 35px; transform: rotate(-2deg); } +.their-agent { margin-left: 35px; transform: rotate(2deg); background: #e4e8d8; } +.message-author { display: flex; align-items: center; gap: 9px; font-size: 13px; color: #60544a; } +.message-author img { object-fit: contain; } +.via-pilot { font-size: 11px; margin-left: auto; color: #776b60; } +.exchange-message p { font-size: clamp(17px, 1.65vw, 23px); line-height: 1.35; margin: 14px 0 0; letter-spacing: -.015em; } +.exchange-connector { display: flex; align-items: center; justify-content: center; height: 38px; gap: 10px; color: #aa7c60; font-size: 22px; } +.exchange-connector span { width: 25px; height: 1px; background: #c9ae98; } +.plan-result { position: relative; display: grid; grid-template-columns: 43px 1fr; gap: 15px; align-items: center; padding: 22px; background: var(--coral); color: var(--cream); border-radius: 24px; margin-top: 24px; box-shadow: 0 12px 20px #b94e3612; } +.result-icon { width: 43px; height: 43px; display: grid; place-items: center; background: #ffffff1a; border-radius: 50%; font-size: 25px; } +.result-eyebrow { font-size: 11px; color: var(--cream); } +.plan-result h3 { font-size: clamp(26px, 2.8vw, 40px); letter-spacing: -.04em; line-height: 1.1; font-weight: 550; margin: 5px 0; } +.plan-result p { margin: 0; font-size: 14px; color: var(--cream); } +.result-approve { grid-column: 2; justify-self: start; border: 0; border-radius: 100px; padding: 10px 17px; background: var(--cream); color: var(--ink); font-size: 13px; display: flex; gap: 25px; } +.example-disclosure { font-size: 11px; line-height: 1.6; text-align: center; color: var(--muted); margin: 18px 0 0; } +.permission-note { margin: 24px 0 0; font-size: 13px; color: #665f52; display: flex; align-items: center; gap: 9px; } +.permission-note span { font-size: 24px; color: var(--coral); } +.people-scene { position: relative; width: 100%; aspect-ratio: 560 / 460; } +.people-lines { width: 100%; height: 100%; position: absolute; inset: 0; fill: none; stroke: #bf9c80; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 6 7; } +.person-card { position: absolute; width: 29%; border-radius: 28px; background: #fffdf8; text-align: center; display: flex; flex-direction: column; align-items: center; padding: 20px 10px 16px; gap: 7px; box-shadow: 0 10px 30px #54452e08; } +.person-card strong { font-weight: 550; font-size: 19px; } +.person-portrait { width: 76px; height: 76px; } +.you-card { left: 0; top: 30%; transform: rotate(-5deg); } +.priya-card { right: 0; top: 0; transform: rotate(6deg); } +.sam-card { right: 0; bottom: 0; transform: rotate(-5deg); } +.person-agent { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); } +.person-agent img { object-fit: contain; } +.sam-avatar { background: #ebc6ad; color: #9c4c2e; font-size: 39px; font-weight: 550; display: grid; place-items: center; position: relative; } +.sam-avatar span { position: absolute; right: -7px; top: -7px; font-size: 26px; color: #9c4c2e; } +.pilot-hub { position: absolute; width: 25%; left: 36%; top: 36%; aspect-ratio: 1; background: #e9d0b7; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-direction: column; border: 8px solid #f0f0e6; } +.pilot-hub img { width: 76%; height: 70%; object-fit: contain; } +.pilot-hub span { font-size: 12px; font-weight: 600; margin-bottom: 5px; } +.connection-label { position: absolute; font-size: 12px; padding: 10px 14px; border-radius: 99px; background: #dce5ce; white-space: nowrap; } +.connection-label span { padding-left: 9px; color: #566544; } +.label-plan { top: 20%; left: 25%; transform: rotate(-6deg); } +.label-file { bottom: 14%; left: 24%; transform: rotate(6deg); } +.handle-scene { width: 100%; max-width: 520px; } +.handle-card { background: var(--cream); border-radius: 30px; color: var(--ink); padding: 30px; transform: rotate(-3deg); box-shadow: 0 18px 0 #92392355; } +.handle-card-top { display: flex; justify-content: space-between; align-items: center; } +.handle-card-top .person-portrait { width: 62px; height: 62px; } +.handle-tag { font-size: 12px; display: flex; gap: 14px; align-items: center; color: var(--muted); } +.handle-tag > span { color: var(--coral); font-size: 32px; } +.handle-name { display: flex; align-items: center; justify-content: space-between; font-size: clamp(60px, 6.5vw, 92px); letter-spacing: -.07em; font-weight: 550; line-height: 1.1; margin: 20px 0 4px; } +.handle-name > span { font-size: .65em; color: var(--coral); } +.handle-url { margin: 0 0 28px; font-size: clamp(12px, 1.2vw, 17px); color: var(--muted); letter-spacing: -.01em; overflow-wrap: anywhere; } +.handle-connected { border-top: 1px solid #ded2c7; border-bottom: 1px solid #ded2c7; padding: 17px 0; display: flex; align-items: center; justify-content: space-between; gap: 15px; font-size: 13px; } +.handle-connected > span { color: var(--muted); } +.handle-connected strong { display: flex; align-items: center; gap: 8px; font-weight: 550; } +.handle-connected img { object-fit: contain; } +.connection-dot { width: 6px; height: 6px; border-radius: 50%; background: #6d8355; margin-left: 9px; } +.handle-friends { display: flex; align-items: center; gap: 12px; padding-top: 20px; font-size: 12px; } +.handle-friends > span:last-child { margin-left: auto; color: var(--coral); font-size: 25px; } +.friend-stack { display: flex; padding-right: 7px; } +.friend-stack i { width: 29px; height: 29px; margin-right: -7px; border: 2px solid var(--cream); font-style: normal; } +.friend-stack .small-sam, .friend-stack i:last-child { background: #ebc6ad; display: grid; place-items: center; font-size: 11px; } +.friend-stack i:last-child { background: #dfe5d3; } +.identity-picker { margin-top: 39px; text-align: center; } +.identity-picker p { font-size: 12px; margin-bottom: 12px; } +.identity-picker p span { margin-left: 6px; } +.identity-picker > div { display: flex; justify-content: center; gap: 8px; } +.identity-picker button { background: transparent; border: 1px solid #f4d2c475; color: var(--cream); border-radius: 99px; display: flex; gap: 8px; align-items: center; padding: 10px 15px; font-size: 13px; } +.identity-picker button[aria-pressed='true'] { background: var(--cream); color: var(--ink); border-color: var(--cream); } +.identity-picker button:hover { border-color: var(--cream); } +.identity-picker img { object-fit: contain; } +.handle-note { text-align: center; font-size: 10px; color: var(--cream); margin: 20px 0 0; } +.panel-start h2 { font-size: clamp(58px, 5.9vw, 94px); } +.final-actions { display: flex; gap: 28px; align-items: center; margin-top: 30px; } +.primary-cta { display: inline-flex; align-items: center; gap: 36px; border-radius: 100px; background: var(--coral); color: var(--cream) !important; padding: 18px 26px; font-size: 18px; font-weight: 550; } +.primary-cta:hover { background: #a9412c; } +.primary-cta span { font-size: 24px; line-height: 1; } +.learn-more { font-size: 15px; display: flex; gap: 10px; align-items: center; text-underline-offset: 5px; } +.learn-more:hover { text-decoration: underline; } +.start-details { font-size: 12px; line-height: 1.7; color: var(--muted); margin: 20px 0 0; } +.start-details strong { color: var(--ink); font-weight: 550; } +.reunion-scene { position: relative; margin: 0; padding: 16px 16px 0; border-radius: 28px; background: #ead6c4; transform: rotate(3deg); } +.reunion-photo { position: relative; aspect-ratio: 1.06; border-radius: 17px; } +.reunion-photo > img { width: 100%; height: 100%; object-fit: cover; object-position: 52% center; border-radius: inherit; } +.photo-sticker { position: absolute; right: -29px; top: 8%; background: #e2e8d3; width: 146px; height: 146px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #415239; font-size: 22px; line-height: 1.03; letter-spacing: -.04em; transform: rotate(13deg); } +.photo-sticker > span { font-size: 28px; } +.reunion-scene figcaption { display: flex; justify-content: space-between; align-items: center; padding: 21px 7px 22px; font-size: 16px; letter-spacing: -.02em; } +.reunion-scene figcaption > span:last-child { font-size: 27px; } +.reunion-pup { position: absolute; width: 32%; height: auto; bottom: -6px; right: 10%; transform: rotate(-3deg); } +.teaser-legal { position: absolute; inset: auto clamp(28px, 6vw, 110px) 33px; display: flex; align-items: center; justify-content: space-between; font-size: 10px; color: var(--muted); } +.teaser-legal > span:last-child { display: flex; gap: 18px; } +.teaser-legal a:hover { text-decoration: underline; text-underline-offset: 3px; } +.teaser-controls { position: absolute; bottom: 0; left: 0; right: 0; height: 85px; display: flex; align-items: center; padding: 0 clamp(24px, 4.5vw, 84px); gap: 40px; color: var(--ink); } +.scroll-cue { display: flex; align-items: center; gap: 12px; font-size: 12px; min-width: 165px; margin: 0; } +.scroll-symbol { border: 1px solid #aa8a6c77; width: 29px; height: 38px; display: grid; place-items: center; border-radius: 99px; font-size: 18px; } +.story-progress { height: 2px; background: currentColor; opacity: .35; flex: 1; max-width: 420px; margin: 0 auto; position: relative; } +.story-progress > span { position: absolute; left: 0; top: -1px; height: 4px; width: 16.6667%; background: currentColor; border-radius: 2px; transform: translateX(calc(var(--progress, 0) * 500%)); } +.chapter-controls { display: flex; align-items: center; gap: 9px; } +.chapter-count { font-size: 12px; font-variant-numeric: tabular-nums; margin-right: 12px; display: flex; gap: 12px; } +.count-divider { opacity: .4; } +.chapter-controls button { width: 43px; height: 43px; border: 1px solid currentColor; border-radius: 50%; background: transparent; color: inherit; font-size: 21px; line-height: 1; } +.chapter-controls button:hover:not(:disabled) { background: #a17e5c20; } +.chapter-controls button:disabled { opacity: .25; } +.teaser-horizontal .teaser-header { position: fixed; } +html.teaser-horizontal.teaser-snapping { scroll-snap-type: y mandatory; } +.teaser-horizontal .teaser-snap-points { display: block; position: absolute; inset: 0; pointer-events: none; } +.teaser-horizontal .teaser-snap-point { position: absolute; top: calc(var(--chapter) * var(--teaser-step, 100svh)); left: 0; width: 100%; height: 1px; scroll-snap-align: start; scroll-snap-stop: always; } +.teaser-horizontal .teaser-stage { position: sticky; top: 0; width: 100%; height: 100svh; overflow: clip; } +.teaser-horizontal .teaser-track { display: flex; height: 100%; width: 100%; will-change: transform; } +.teaser-horizontal .teaser-panel { flex: 0 0 100%; min-width: 0; height: 100%; min-height: 0; } +.teaser-horizontal .panel-inner { height: 100%; min-height: 0; } +.teaser-horizontal .teaser-controls { position: absolute; } +.teaser-horizontal .teaser-legal { bottom: 90px; } +.teaser-horizontal[data-tone='coral'] .teaser-header, .teaser-horizontal[data-tone='coral'] .teaser-controls { color: var(--cream); } +.teaser-horizontal[data-tone='coral'] .teaser-start { background: var(--cream); color: var(--ink) !important; } +.teaser-horizontal[data-tone='coral'] .scroll-symbol { border-color: #f6d6c888; } +@media (min-width: 901px) and (max-height: 800px) { + .panel-inner { padding-top: 108px; padding-bottom: 95px; } + .teaser-header { height: 90px; } + .pilot-teaser h1 { font-size: min(7.5vw, 104px); } + .pilot-teaser h2 { font-size: min(6.7vw, 90px); } + .panel-plans h2, .panel-start h2 { font-size: min(5.6vw, 76px); } + .panel-start h2 { font-size: min(5vw, 65px); margin-bottom: 20px; } + .panel-start .final-actions { margin-top: 20px; } + .panel-start .start-details { font-size: 11px; line-height: 1.6; margin-top: 17px; } + .teaser-kicker { margin-bottom: 18px; } + .teaser-description { font-size: 18px; } + .chore-scene { height: 450px; } + .agent-grid { max-width: 390px; gap: 12px; } + .agent-tile { border-radius: 23px; } + .agent-note { margin: 18px 0; } + .scene-label { margin-bottom: 19px; } + .chat-fallback { padding-top: 16px; } + .people-scene { max-width: 480px; } + .reunion-scene { max-width: 390px; justify-self: end; } + .handle-card { padding: 22px; } + .handle-name { font-size: 68px; margin-top: 12px; } + .handle-url { margin-bottom: 20px; } + .handle-card-top .person-portrait { width: 44px; height: 44px; } + .handle-connected { padding-block: 12px; } + .handle-friends { padding-top: 16px; } + .identity-picker { margin-top: 24px; } + .handle-note { margin-top: 14px; } + .exchange-message { padding: 12px 18px; } + .message-author { font-size: 12px; } + .message-author img { width: 26px; height: 26px; } + .exchange-message p { font-size: 18px; line-height: 1.3; margin-top: 6px; } + .exchange-connector { height: 24px; } + .plan-result { grid-template-columns: 1fr auto; padding: 18px; gap: 12px; margin-top: 18px; } + .result-icon { display: none; } + .plan-result h3 { font-size: 31px; } + .plan-result p { font-size: 12px; } + .result-approve { grid-column: 2; grid-row: 1; gap: 9px; padding: 10px 13px; font-size: 12px; } + .example-disclosure { margin-top: 14px; } +} +@media (max-width: 1000px) and (min-width: 761px) { + .panel-inner { padding-inline: 5vw; gap: 30px; } + .pilot-teaser h1 { font-size: 8vw; } + .pilot-teaser h2 { font-size: 7.3vw; } + .panel-plans h2, .panel-start h2 { font-size: 6.4vw; } + .chore-scene { height: 400px; } + .loose-message { padding: 13px; gap: 8px; } + .message-first { left: -10px; } + .message-first > span:last-child { margin-left: 0; } + .message-second { top: 130px; } + .message-third { top: 230px; } + .chore-pup { width: 80%; left: 0; bottom: 30px; } + .agent-grid { gap: 10px; } + .agent-tile { border-radius: 20px; font-size: 13px; gap: 7px; } + .chat-fallback { gap: 10px; } + .chat-fallback p { text-align: center; } + .person-card { padding: 14px 7px; border-radius: 23px; } + .person-portrait { width: 60px; height: 60px; } + .person-card strong { font-size: 16px; } + .person-agent { font-size: 11px; } + .connection-label { font-size: 10px; padding: 8px 10px; } + .handle-card { padding: 23px; } + .handle-name { font-size: 65px; } + .handle-url { font-size: 11px; } + .handle-friends { font-size: 10px; gap: 8px; } + .identity-picker button { padding: 9px 12px; gap: 5px; } + .reunion-photo { aspect-ratio: .8; } + .photo-sticker { width: 115px; height: 115px; font-size: 18px; right: -15px; } + .photo-sticker > span { font-size: 23px; } + .primary-cta { padding: 16px 21px; gap: 20px; font-size: 16px; } + .final-actions { gap: 20px; } + .learn-more { font-size: 13px; } + .exchange-message { padding: 17px; } + .plan-result { padding: 18px; gap: 10px; } + .plan-result h3 { font-size: 30px; } +} +@media (max-width: 760px), (max-width: 1000px) and (orientation: portrait) { + .teaser-header { height: 78px; padding: 0 23px; } + .teaser-brand { font-size: 27px; gap: 6px; } + .teaser-brand img { width: 34px; height: 34px; } + .teaser-header-actions { gap: 14px; } + .teaser-start { padding: 11px 16px; gap: 15px; font-size: 13px; } + .panel-inner { grid-template-columns: 1fr; gap: 27px; padding: 103px 28px 90px; align-content: center; } + .panel-copy { width: 100%; } + .teaser-kicker { font-size: 11px; margin-bottom: 15px; } + .teaser-kicker > span { font-size: 17px; } + .pilot-teaser h1, .pilot-teaser h2 { font-size: clamp(52px, 12.7vw, 83px); line-height: .98; letter-spacing: -.06em; margin-bottom: 17px; } + .teaser-description { font-size: 15px; line-height: 1.5; } + .panel-chore .panel-inner { gap: 5px; } + .chore-scene { max-width: 370px; justify-self: center; height: 270px; } + .chore-orbit { inset: 18px 12px 25px; } + .chore-pup { width: 57%; left: 12%; bottom: 19px; } + .loose-message { padding: 10px 13px; gap: 9px; border-radius: 17px; font-size: 15px; } + .person-avatar { width: 29px; height: 29px; } + .message-first { top: 5px; left: 0; } + .message-first small { font-size: 9px; } + .message-first > span:last-child { font-size: 23px; margin-left: 3px; } + .message-second { top: 80px; right: -3px; } + .message-third { top: 159px; right: 0; } + .star-one { font-size: 35px; right: 8px; top: 13px; } + .star-two { top: 122px; left: 0; font-size: 23px; } + .scene-caption { font-size: 10px; bottom: 1px; } + .panel-agents h2 br:nth-child(2), .panel-handle h2 .soft-text br { display: none; } + .panel-agents h2 { font-size: clamp(49px, 12vw, 76px); } + .agent-scene { max-width: 420px; justify-self: center; width: 100%; } + .scene-label { font-size: 10px; margin-bottom: 15px; } + .agent-grid { max-width: 300px; gap: 10px 12px; } + .agent-tile { border-radius: 19px; gap: 5px; font-size: 11px; } + .agent-note { font-size: 10px; line-height: 1.4; margin: 14px 0; } + .chat-fallback { padding-top: 13px; flex-wrap: nowrap; gap: 12px; } + .chat-logos { padding: 8px 10px; gap: 6px; } + .chat-logos img { width: 19px; height: 19px; } + .chat-fallback p { font-size: 10px; } + .chat-fallback p span { font-size: 9px; } + .panel-plans .panel-inner { gap: 18px; } + .panel-plans h2 { font-size: clamp(45px, 11vw, 66px); } + .panel-plans h2 br:first-child { display: none; } + .panel-plans .teaser-description { font-size: 14px; } + .example-choices { margin-top: 17px; gap: 6px; } + .example-choices button { padding: 8px 13px; font-size: 12px; min-height: 40px; } + .plan-scene { max-width: 430px; justify-self: center; } + .exchange-message { padding: 13px 16px; border-radius: 19px; } + .your-agent { margin-right: 20px; } + .their-agent { margin-left: 20px; } + .message-author { font-size: 10px; gap: 6px; } + .message-author img { width: 23px; height: 23px; } + .via-pilot { font-size: 9px; } + .exchange-message p { font-size: 16px; margin-top: 8px; } + .exchange-connector { height: 20px; font-size: 18px; } + .plan-result { margin-top: 16px; padding: 15px 17px; grid-template-columns: 30px 1fr; gap: 7px 10px; border-radius: 20px; } + .result-icon { width: 30px; height: 30px; font-size: 21px; } + .result-eyebrow { font-size: 9px; } + .plan-result h3 { font-size: 29px; margin: 3px 0; } + .plan-result p { font-size: 12px; } + .result-approve { font-size: 12px; padding: 8px 13px; gap: 18px; min-height: 40px; white-space: nowrap; } + .example-disclosure { font-size: 9px; margin-top: 12px; line-height: 1.5; } + .panel-people h2 { font-size: clamp(50px, 12.4vw, 76px); } + .panel-people h2 .coral-text br { display: none; } + .panel-people .teaser-description br:nth-of-type(2) { display: none; } + .permission-note { margin-top: 16px; font-size: 11px; } + .permission-note span { font-size: 20px; } + .people-scene { width: 100%; max-width: 360px; justify-self: center; } + .person-card { padding: 14px 6px 12px; gap: 5px; border-radius: 21px; } + .person-portrait { width: 49px; height: 49px; } + .person-card strong { font-size: 14px; } + .person-agent { font-size: 10px; gap: 4px; } + .person-agent img { width: 16px; height: 16px; } + .sam-avatar { font-size: 28px; } + .sam-avatar span { font-size: 21px; } + .pilot-hub { border-width: 5px; } + .pilot-hub span { font-size: 9px; margin-bottom: 3px; } + .connection-label { padding: 7px 9px; font-size: 9px; } + .connection-label span { padding-left: 3px; } + .handle-scene { max-width: 420px; justify-self: center; padding: 0 6px; } + .handle-card { padding: 21px; border-radius: 25px; box-shadow: 0 11px 0 #92392355; } + .handle-card-top .person-portrait { width: 43px; height: 43px; } + .handle-tag { font-size: 10px; gap: 9px; } + .handle-tag > span { font-size: 26px; } + .handle-name { font-size: 61px; margin-top: 15px; } + .handle-url { font-size: 11px; margin-bottom: 16px; } + .handle-connected { font-size: 11px; padding: 12px 0; } + .handle-connected img { width: 23px; height: 23px; } + .handle-friends { font-size: 9px; gap: 9px; padding-top: 14px; } + .friend-stack i { width: 24px; height: 24px; } + .identity-picker { margin-top: 27px; } + .identity-picker p { font-size: 10px; margin-bottom: 9px; } + .identity-picker button { padding: 8px 12px; font-size: 12px; gap: 6px; min-height: 40px; } + .identity-picker img { width: 21px; height: 21px; } + .handle-note { font-size: 10px; margin-top: 13px; } + .panel-start .panel-inner { gap: 26px; } + .panel-start h2 { font-size: clamp(47px, 11.7vw, 72px); } + .panel-start h2 > br:first-of-type, .panel-start h2 .coral-text br { display: none; } + .final-actions { margin-top: 22px; gap: 25px; } + .primary-cta { font-size: 15px; padding: 14px 21px; gap: 25px; } + .primary-cta span { font-size: 21px; } + .learn-more { font-size: 13px; } + .start-details { font-size: 10px; margin-top: 16px; } + .reunion-scene { width: min(100%, 340px); justify-self: center; padding: 10px 10px 0; border-radius: 20px; } + .reunion-photo { aspect-ratio: 1.7; border-radius: 12px; } + .photo-sticker { width: 95px; height: 95px; right: -10px; top: 8px; font-size: 15px; } + .photo-sticker > span { font-size: 20px; } + .reunion-scene figcaption { padding: 11px 7px; font-size: 12px; } + .reunion-scene figcaption > span:last-child { font-size: 20px; } + .reunion-pup { width: 28%; right: 13%; } + .teaser-legal { inset: auto 28px 25px; font-size: 9px; } + .teaser-horizontal .teaser-legal { bottom: 77px; } + .teaser-controls { height: 65px; padding: 0 23px; gap: 15px; } + .scroll-cue { font-size: 10px; gap: 8px; min-width: 0; } + .scroll-symbol { width: 23px; height: 30px; font-size: 15px; } + .story-progress { max-width: 80px; } + .chapter-controls { gap: 7px; } + .chapter-controls button { width: 44px; height: 44px; font-size: 18px; } + .chapter-count { font-size: 10px; gap: 7px; margin-right: 4px; } +} +@media (min-width: 761px) and (max-width: 1000px) and (orientation: portrait) { + .teaser-header { height: 104px; padding-inline: 40px; } + .teaser-brand { font-size: 31px; gap: 10px; } + .teaser-brand img { width: 42px; height: 42px; } + .teaser-header-actions { gap: 25px; } + .teaser-start { padding: 13px 21px; font-size: 15px; } + .panel-inner { padding: 125px 70px 100px; gap: 36px; } + .panel-copy { max-width: 580px; justify-self: center; } + .pilot-teaser h1 { font-size: 90px; } + .pilot-teaser h2 { font-size: 76px; } + .teaser-kicker { font-size: 13px; margin-bottom: 20px; } + .teaser-description { font-size: 20px; } + .chore-scene { height: 340px; max-width: 430px; } + .chore-pup { width: 63%; bottom: 25px; } + .message-second { top: 110px; } + .message-third { top: 210px; } + .loose-message { font-size: 18px; } + .agent-grid { max-width: 390px; gap: 13px; } + .agent-tile { font-size: 14px; } + .scene-label, .agent-note, .chat-fallback p { font-size: 12px; } + .panel-plans h2 { font-size: 67px; } + .panel-plans .teaser-description { font-size: 18px; } + .panel-plans .panel-inner { gap: 28px; } + .people-scene { max-width: 430px; } + .handle-card { padding: 28px; } + .handle-name { font-size: 76px; } + .handle-url { font-size: 14px; } + .reunion-scene { width: 430px; } + .panel-start h2 { font-size: 72px; } + .start-details { font-size: 12px; } + .primary-cta { font-size: 18px; } + .learn-more { font-size: 15px; } + .teaser-controls { padding-inline: 40px; height: 80px; } + .story-progress { max-width: 240px; } + .teaser-horizontal .teaser-legal { bottom: 90px; } +} +@media (max-width: 480px) { + .story-progress { display: none; } + .chapter-controls { margin-left: auto; } +} +@media (max-width: 380px) { + .panel-inner { padding-inline: 22px; } + .teaser-header { padding-inline: 19px; } + .teaser-header-actions { gap: 11px; } + .teaser-start { padding: 10px 13px; } + .chat-fallback { gap: 8px; } + .chat-logos { gap: 5px; padding: 7px; } + .chat-logos img { width: 17px; height: 17px; } + .handle-card { padding: 18px; } + .handle-url { font-size: 10px; } + .handle-friends { gap: 6px; } + .teaser-controls { padding-inline: 20px; } + .teaser-legal { inset-inline: 22px; } +} +@media (prefers-reduced-motion: reduce) { + .pilot-teaser *, .pilot-teaser *::before, .pilot-teaser *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; } +} +@media (max-width: 760px) and (min-height: 741px) and (max-height: 900px) { + .panel-plans h2 { font-size: clamp(37px, 10.5vw, 44px); } + .panel-plans .panel-inner { padding-block: 96px 80px; } + .plan-result { grid-template-columns: 1fr auto; gap: 8px; } + .result-icon { display: none; } + .plan-result h3 { font-size: 25px; } + .result-approve { grid-column: 2; grid-row: 1; padding-inline: 11px; gap: 5px; font-size: 11px; } +} +@media (max-width: 760px) and (max-height: 740px) { + .panel-inner { padding: 90px 24px 74px; gap: 18px; } + .teaser-kicker { margin-bottom: 12px; font-size: 10px; } + .pilot-teaser h1 { font-size: clamp(44px, 12.5vw, 52px); } + .pilot-teaser h2 { font-size: 44px; margin-bottom: 14px; } + .teaser-description { font-size: 14px; } + .chore-scene { height: 230px; } + .chore-pup { bottom: 21px; width: 53%; } + .message-second { top: 72px; } + .message-third { top: 142px; } + .agent-grid { max-width: 250px; gap: 8px; } + .agent-tile { border-radius: 16px; } + .agent-note { margin-block: 12px; } + .chat-fallback { padding-top: 10px; } + .panel-plans h2 { font-size: clamp(30px, 8.9vw, 36px); } + .plans-payoff { display: none; } + .panel-plans .panel-inner { gap: 14px; } + .example-choices { margin-top: 12px; } + .example-choices button { padding: 7px 12px; } + .exchange-message { padding: 10px 14px; } + .exchange-message p { margin-top: 6px; font-size: 15px; } + .plan-result { grid-template-columns: 1fr auto; padding: 12px; gap: 8px; margin-top: 13px; } + .result-icon { display: none; } + .plan-result h3 { font-size: 24px; } + .plan-result p { font-size: 11px; } + .result-approve { grid-column: 2; grid-row: 1; padding: 9px 11px; gap: 5px; font-size: 11px; } + .example-disclosure { margin-top: 10px; } + .people-scene { max-width: 290px; } + .permission-note { margin-top: 12px; } + .handle-card { padding: 17px; } + .handle-card-top { display: none; } + .handle-name { font-size: 52px; margin-top: 0; } + .handle-url { margin-bottom: 12px; } + .handle-connected { padding-block: 10px; } + .handle-friends { padding-top: 12px; } + .identity-picker { margin-top: 18px; } + .identity-picker p { display: none; } + .handle-note { margin-top: 10px; } + .panel-start h2 { font-size: 40px; } + .panel-start .panel-inner { gap: 18px; } + .final-actions { margin-top: 17px; } + .start-details { margin-top: 12px; } + .reunion-scene { width: min(100%, 300px); } + .reunion-photo { aspect-ratio: 2.1; } + .reunion-scene figcaption { padding-block: 9px; } + .photo-sticker { width: 80px; height: 80px; font-size: 13px; } + .photo-sticker > span { font-size: 17px; } +}