/* The landing page (#289, #322): one promise, start to finish. Tokens mirror @rec/ui theme.css; the phone and the
   story's cards copy the kit components' styles (Button, Input, feed card, receipts), since this site is static. */
.home {
  color-scheme: light;
  --color-ember-50: #FEF5EF; --color-ember-100: #FFE8DB; --color-ember-200: #FFD1BA; --color-ember-300: #FEB691; --color-ember-400: #FA9561;
  --color-ember-500: #E9773D; --color-ember-600: #C0541B; --color-ember-700: #A64617; --color-ember-800: #873612; --color-ember-900: #67280F;
  --color-honey-50: #FDF8EB; --color-honey-200: #F8E2B5; --color-honey-500: #E6A526; --color-honey-800: #915C00;
  --color-green-100: #DFF3E6; --color-green-600: #29854E;
  --color-blue-50: #F1F8FE; --color-blue-600: #3975BB; --color-blue-700: #3669A8;
  --color-red-600: #D23D54;
  --color-sand-50: #FCF9F3; --color-sand-100: #F7F2EA; --color-sand-200: #EBE5DD; --color-sand-300: #DAD3CB; --color-sand-500: #989189;
  --color-sand-600: #787069; --color-sand-700: #5B544E; --color-sand-800: #423C37; --color-sand-900: #2C2825; --color-sand-950: #1F1B19;
  --border: var(--color-sand-200);
  --border-strong: var(--color-sand-300);
  --fg: var(--color-sand-950);
  --muted: var(--color-sand-600);
  --card-shadow: var(--border) 0 0 0 1px, #1F1B190A 0 1px 2px, #1F1B190F 0 4px 12px -2px;
  --heading: "Nunito", system-ui, sans-serif;
  --sans: "Nunito Sans", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --gutter: clamp(16px, 5.5vw, 80px);
  background: var(--color-sand-50);
  color: var(--fg);
  font-family: var(--sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
.home main { padding: 0; }
/* No stranded words: headings balance their lines, paragraphs avoid a lone last word */
.home p, .home li { color: inherit; text-wrap: pretty; }
.home h1, .home h2, .home h3 { margin: 0; font-family: var(--heading); font-weight: 900; letter-spacing: -0.02em; color: var(--color-sand-950); text-wrap: balance; }
.home a { color: var(--color-ember-700); }
.home svg { display: block; flex-shrink: 0; fill: currentColor; }
.home img { display: block; }

.skip { position: absolute; left: 16px; top: -60px; z-index: 10; padding: 10px 14px; border-radius: 10px; background: var(--color-sand-950); color: #fff !important; font-weight: 700; }
.skip:focus { top: 12px; }

/* Kit: Button / Primary (lg 48, md 40, sm 32) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; cursor: pointer; white-space: nowrap;
  background: var(--color-ember-600); color: #fff !important; font: 700 14px/18px var(--sans); text-decoration: none;
  box-shadow: #FFFFFF29 0 1px 0 inset, #67280F4D 0 1px 2px, var(--color-ember-700) 0 0 0 1px; }
.btn:hover { background: var(--color-ember-700); }
.btn:focus-visible { outline: 3px solid var(--color-ember-400); outline-offset: 2px; }
.btn svg { width: 18px; height: 18px; }
.btn-lg { height: 48px; padding: 0 20px; border-radius: 12px; font-size: 15px; }
.btn-md { height: 40px; padding: 0 16px; border-radius: 10px; }
.btn-sm { height: 32px; padding: 0 12px; border-radius: 8px; font-size: 13px; }
.btn-sm-40 { height: 40px; padding: 0 16px; border-radius: 10px; }
.btn-outline, .btn-primary-outline { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 10px; background: #fff;
  font: 700 14px/18px var(--sans); color: var(--fg); box-shadow: var(--border-strong) 0 0 0 1px, #1F1B190F 0 1px 2px; white-space: nowrap; }
.btn-outline.sm { height: 32px; padding: 0 12px; border-radius: 8px; font-size: 13px; }
.btn-primary-outline { color: var(--color-ember-600); box-shadow: var(--color-ember-600) 0 0 0 1px, #67280F4D 0 1px 2px; }

/* Nav */
.nav { position: relative; z-index: 1; display: flex; align-items: center; gap: 32px; padding: 20px var(--gutter); }
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.mascot-nav { --reid-size: 44px; margin: -6px -2px -4px -6px; }
.wordmark { font: 900 22px/1 var(--heading); letter-spacing: -0.03em; color: var(--color-sand-950); }
.wordmark span { color: var(--color-ember-600); }
.nav nav { display: flex; gap: 28px; margin-left: auto; }
.nav nav a { font: 700 15px/1 var(--sans); color: var(--color-sand-800); text-decoration: none; }
.nav nav a:hover { color: var(--color-ember-700); }

/* Hero: centered copy under a warm sky with a few clouds. Below it, the product on the visitor's own kind of screen:
   the web app in a browser window on desktop, the phone on tablets and phones. Reid perches on its top edge, and the
   story band crops it. */
.hero { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; gap: 40px; padding: 40px var(--gutter) 0; max-width: 1440px; margin: 0 auto; }
.sky { position: absolute; z-index: -1; top: -120px; bottom: 0; left: calc(50% - 50vw); width: 100vw; overflow: hidden; pointer-events: none;
  background: linear-gradient(180deg, #FFE3D0 0%, #FFEFE3 34%, var(--color-sand-50) 78%); }
.sun { position: absolute; left: 50%; top: -260px; width: 900px; height: 620px; translate: -50% 0; border-radius: 50%; background: radial-gradient(closest-side, #FFF6E0, #FFF6E000); }
/* Three still, crisp clouds in the margins, never the text column and never behind the window, where its shadow would
   smear them (#516): two beside the headline, one low on the left, clear of the window's top edge. */
.cloud { position: absolute; left: var(--x); width: var(--w); aspect-ratio: 240 / 100; background: url(/sky/cloud.svg) center / contain no-repeat; }
.c1 { --x: 2%; --w: 210px; top: 190px; }
.c2 { --x: 86%; --w: 180px; top: 170px; }
.c3 { --x: 3%; --w: 240px; bottom: 820px; }
.hero-copy { display: flex; flex-direction: column; align-items: center; gap: 24px; max-width: 760px; text-align: center; }
/* "We remembered." never wraps: the line is about 7.8em wide. */
.hero h1 { font-size: clamp(36px, 10.4vw, 84px); line-height: 1.02; letter-spacing: -0.035em; white-space: nowrap; }
.hero h1 em { display: block; font-style: normal; color: var(--color-ember-500); }
.lede { margin: 0; max-width: 620px; font-size: clamp(18px, 1.45vw, 21px); line-height: 1.55; color: var(--color-sand-800) !important; text-wrap: balance; }
/* Cropped at the bottom only, so Reid and the window's shadow keep their room */
.hero-visual { position: relative; width: min(100%, 1200px); height: 780px; display: flex; flex-direction: column; align-items: center; clip-path: inset(-400px -400px 0 -400px); }
/* His feet sit 87.5% down the sprite; the negative margin lands them on the frame's top edge, never on the screen */
.mascot-hero { --reid-size: 190px; z-index: 2; flex-shrink: 0; align-self: flex-end; margin: 0 96px -24px 0; }
.mascot-hero::before { display: none; }
.phone, .browser { flex-shrink: 0; }
.phone { display: none; }

/* Kit: Input (lg) + label */
.capture { display: flex; flex-direction: column; gap: 6px; max-width: 560px; margin: 8px 0 0; }
.label { font: 700 13px/16px var(--sans); color: var(--color-sand-800); }
.capture-row { display: flex; gap: 10px; }
.input { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 14px; border-radius: 12px; background: #fff;
  box-shadow: var(--border-strong) 0 0 0 1px, #1F1B190D 0 1px 2px; color: var(--color-sand-600); }
.input:focus-within { box-shadow: var(--color-ember-400) 0 0 0 2px, #1F1B190D 0 1px 2px; }
.input svg { width: 18px; height: 18px; }
.input input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font: 400 16px/20px var(--sans); color: var(--fg); }
.input input::placeholder { color: var(--color-sand-500); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.home .form-msg { display: none; margin: 0 0 8px; scroll-margin-top: 30vh; text-align: left; padding: 10px 12px; border-radius: 10px; background: #FEF4F4; color: #B32F46; font: 700 14px/20px var(--sans); box-shadow: #FECFCE 0 0 0 1px; }
.home .form-msg:target { display: block; }
.phone { position: relative; width: 412px; height: 866px; padding: 11px; border-radius: 60px; background: var(--color-sand-950); box-shadow: #49190773 0 40px 80px -30px; }
.screen { display: flex; flex-direction: column; width: 390px; height: 844px; border-radius: 49px; overflow: hidden; background: var(--color-sand-50); color: var(--fg); }
.status { display: flex; align-items: center; justify-content: space-around; padding: 21px 24px 19px; font: 600 17px/22px system-ui, sans-serif; color: #000; }
.status svg { width: 82px; height: 22px; }
.today-head { display: flex; align-items: center; gap: 12px; padding: 4px 20px 0; }
.today-title { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.today-title small { font: 600 13px/16px var(--sans); color: var(--muted); }
.today-title b { font: 800 28px/34px var(--heading); letter-spacing: -0.02em; }
.icon-btn, .avatar { width: 40px; height: 40px; border-radius: 999px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.icon-btn { background: #fff; box-shadow: var(--border) 0 0 0 1px; color: var(--color-sand-800); }
.icon-btn svg { width: 20px; height: 20px; }
.avatar { background: var(--color-honey-200); color: var(--color-honey-800); font: 800 14px/18px var(--heading); }
.avatar.info { width: 36px; height: 36px; background: var(--color-blue-50); color: var(--color-blue-700); font-size: 13px; }
.today-sub { margin: 14px 20px 0; font: 400 15px/22px var(--sans); color: var(--muted) !important; }
.chips { display: flex; gap: 6px; padding: 14px 20px 12px; overflow: hidden; }
.chip { flex-shrink: 0; padding: 8px 12px; border-radius: 999px; background: #fff; box-shadow: var(--border) 0 0 0 1px; font: 700 13px/16px var(--sans); color: var(--color-sand-800); }
.chip.on { background: var(--color-ember-50); box-shadow: var(--color-ember-300) 0 0 0 1px inset; color: var(--color-ember-800); }
.feed { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; padding: 4px 16px 16px; overflow: hidden; }
.feed-card { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 20px; background: #fff; box-shadow: var(--card-shadow); }
.feed-card > b { font: 800 17px/24px var(--heading); letter-spacing: -0.02em; }
.feed-card > p { margin: 0; font: 400 14px/18px var(--sans); color: var(--muted) !important; }
.status-line { display: flex; align-items: center; gap: 8px; font: 700 13px/16px var(--sans); }
.status-line i { width: 8px; height: 8px; border-radius: 999px; flex-shrink: 0; }
.status-line span { flex: 1; }
.status-line em { font: 600 13px/16px var(--sans); font-style: normal; font-variant-numeric: tabular-nums; }
.status-line.warn { color: var(--color-honey-800); } .status-line.warn i { background: var(--color-honey-500); box-shadow: var(--color-honey-50) 0 0 0 3px; }
.status-line.ember { color: var(--color-ember-700); } .status-line.ember i { background: var(--color-ember-500); box-shadow: var(--color-ember-100) 0 0 0 3px; }
.status-line.info { color: var(--color-blue-600); } .status-line.info i { background: var(--color-blue-600); box-shadow: var(--color-blue-50) 0 0 0 3px; }
.actions { display: flex; gap: 8px; }
.tabbar { display: flex; padding: 8px 8px 28px; border-top: 1px solid var(--border); background: #FFFFFFF0; }
.tabbar span { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 6px; font: 600 11px/14px var(--sans); color: var(--muted); }
.tabbar i { display: flex; align-items: center; justify-content: center; width: 56px; height: 30px; border-radius: 999px; }
.tabbar svg { width: 22px; height: 22px; }
.tabbar .on { color: var(--color-ember-700); font-weight: 800; }
.tabbar .on i { background: var(--color-ember-100); }
.hero .capture { width: 100%; text-align: left; }

/* Desktop mockup: the web app in a browser window. Drawn at 1120×780 and zoomed on narrower desktops, so the
   pointer's coordinates hold at every size. */
.browser { position: relative; width: 1120px; height: 780px; border-radius: 16px; overflow: hidden; background: #fff;
  box-shadow: var(--color-sand-300) 0 0 0 1px, #49190733 0 40px 80px -30px, #1F1B190F 0 8px 24px -8px; --ax: 560px; --ay: 640px; --rx: 311px; --ry: 360px; --sx: 805px; --sy: 449px; --ex: 1040px; --ey: 610px; }
.browser-bar { display: flex; align-items: center; height: 44px; padding: 0 16px; background: var(--color-sand-100); border-bottom: 1px solid var(--border); }
.dots { display: flex; gap: 8px; }
.dots i { width: 12px; height: 12px; border-radius: 999px; background: var(--color-sand-300); }
.url { display: flex; align-items: center; gap: 6px; height: 28px; margin: 0 auto; padding: 0 14px; translate: -26px 0; border-radius: 8px; background: #fff; box-shadow: var(--border) 0 0 0 1px; font: 600 13px/16px var(--sans); color: var(--color-sand-700); }
.url svg { width: 13px; height: 13px; color: var(--color-sand-500); }
.app { display: grid; grid-template-columns: 216px minmax(0, 1fr) 392px; height: calc(100% - 44px); background: var(--color-sand-50); }
.side { display: flex; flex-direction: column; gap: 4px; padding: 20px 12px; border-right: 1px solid var(--border); background: var(--color-sand-100); }
.side .wordmark { padding: 4px 10px 18px; font-size: 20px; }
.side-item { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 10px; border-radius: 10px; font: 700 14px/18px var(--sans); color: var(--color-sand-700); }
.side-item svg { width: 20px; height: 20px; }
.side-item.on { background: var(--color-ember-100); color: var(--color-ember-800); }
.side-item em { margin-left: auto; padding: 2px 8px; border-radius: 999px; background: #fff; font: 800 12px/16px var(--sans); color: var(--color-ember-700); }
.side-team { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 10px; }
.side-team .avatar { width: 32px; height: 32px; font-size: 12px; }
.side-team > span:last-child { display: flex; flex-direction: column; font: 700 13px/18px var(--sans); }
.side-team small { font-weight: 400; color: var(--muted); }
.app-main { min-width: 0; display: flex; flex-direction: column; padding-top: 24px; }
.app-main .today-head { padding-top: 0; }
.app-main .feed { padding: 4px 20px 20px; }
.pane { position: relative; border-left: 1px solid var(--border); background: #fff; }
.pane-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 0 56px 200px; text-align: center; color: var(--color-sand-500); opacity: 0; }
.pane-empty svg { width: 32px; height: 32px; margin-bottom: 6px; }
.pane-empty b { font: 800 17px/22px var(--heading); color: var(--color-sand-800); }
.pane-empty small { font: 400 14px/20px var(--sans); color: var(--muted); }
.pane-draft { display: flex; flex-direction: column; gap: 14px; padding: 24px; }
.pane-head { display: flex; align-items: center; gap: 10px; }
.pane-head b { flex: 1; font: 800 20px/26px var(--heading); letter-spacing: -0.02em; }
.pane .email-meta, .view-draft .email-meta { margin: 0; padding-bottom: 12px; font-size: 13px; }
.home .draft-text { margin: 0; font-size: 14px; line-height: 21px; color: var(--color-sand-900) !important; }
.mini-comps { margin: 0; padding: 0; list-style: none; }
.mini-comps li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--border); font-size: 13px; line-height: 18px; font-variant-numeric: tabular-nums; }
.mini-comps li:last-child { border-bottom: 1px solid var(--border); }
.mini-comps img { width: 40px; height: 30px; border-radius: 6px; object-fit: cover; background: var(--color-sand-100); }
.mini-comps b { flex: 1; }
.mini-comps span { font-weight: 700; }
.toasts { position: relative; height: 60px; }
.toast { position: absolute; inset: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; opacity: 0; }
.undo-toast { overflow: hidden; background: var(--color-sand-950); font: 700 14px/18px var(--sans); color: #fff; }
.undo-toast svg { width: 18px; height: 18px; color: var(--color-ember-300); }
.undo-toast span { flex: 1; }
.undo-toast b { color: var(--color-ember-300); }
.undo-toast i { position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: var(--color-ember-400); transform-origin: left; }
.sent-toast { background: #fff; box-shadow: var(--card-shadow); }
.sent-toast > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.sent-toast b { font: 700 14px/18px var(--sans); overflow-wrap: anywhere; }
.sent-toast small { font: 400 13px/18px var(--sans); color: var(--muted); }
.sent-toast .check { width: 28px; height: 28px; }
/* The promise card's status turns to kept once the email goes */
.swap { display: grid; }
.swap > * { grid-area: 1 / 1; }
.status-line.kept { color: var(--color-green-600); opacity: 0; }
.status-line.kept i { background: var(--color-green-600); box-shadow: var(--color-green-100) 0 0 0 3px; }
/* The pointer: a cursor on desktop (its tip is the hot spot) and a fingertip on the phone */
.cursor { position: absolute; left: -6px; top: -3px; z-index: 3; width: 28px; height: 28px; opacity: 0; filter: drop-shadow(0 2px 3px #1F1B1940); }
.cursor svg { width: 28px; height: 28px; }
.cursor::after { content: ""; position: absolute; left: 6px; top: 3px; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 999px; border: 2px solid var(--color-ember-500); opacity: 0; }
.touch { position: absolute; left: 0; top: 0; z-index: 3; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 999px; background: #1F1B1933; box-shadow: #FFFFFFCC 0 0 0 2px inset, #1F1B1926 0 4px 10px; opacity: 0; }

/* Phone mockup: Today, then the draft slides in over it */
.screen { position: relative; }
.views { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.view { position: absolute; inset: 0; display: flex; flex-direction: column; }
.view-draft { gap: 14px; padding: 4px 20px; background: var(--color-sand-50); translate: 100% 0; }
.draft-bar { display: flex; align-items: center; gap: 4px; height: 44px; margin-left: -8px; color: var(--color-sand-800); }
.draft-bar svg { width: 28px; height: 28px; }
.draft-bar b { font: 800 20px/26px var(--heading); letter-spacing: -0.02em; color: var(--fg); }
.view-draft .send { width: 100%; }
.phone .toasts { position: absolute; left: 12px; right: 12px; top: 54px; z-index: 2; }
.phone { --rx: 76px; --ry: 350px; --sx: 206px; --sy: 470px; }

/* Story: one promise from a Tuesday call to a sent email. Reid watches from a sticky rail; where the browser supports
   scroll-driven animation his pose follows the story (listening, thinking, presenting, delighted). */
.story { background: var(--color-sand-100); border-top: 1px solid var(--border); padding: 120px var(--gutter); }
.story-inner { max-width: 1280px; margin: 0 auto; }
.story-head { max-width: 680px; }
.story h2 { font-size: clamp(38px, 4.6vw, 64px); line-height: 1.03; letter-spacing: -0.03em; text-wrap: balance; }
.story-head p { margin: 18px 0 0; font-size: 20px; line-height: 30px; color: var(--color-sand-700) !important; text-wrap: balance; }
.story-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 640px); gap: 64px; margin-top: 80px; }
.story-rail { display: flex; justify-content: center; align-items: flex-start; }
/* Reid rides a sticky perch; above him, a thought bubble says what he's doing on each beat. It trails two dots down
   to his head, and only shows where a scroll timeline can keep it in step with the story. */
.perch { position: sticky; top: calc(50vh - 250px); display: flex; flex-direction: column; align-items: center; }
.mascot-story { --reid-size: 320px; }
.thought { display: none; position: relative; z-index: 1; min-width: 250px; max-width: 300px; margin: 0 0 -10px 120px; padding: 16px 22px; border-radius: 28px; background: #fff;
  box-shadow: var(--card-shadow); font: 800 19px/25px var(--heading); letter-spacing: -0.01em; color: var(--fg); text-align: center; }
.thought > span { grid-area: 1 / 1; align-self: center; opacity: 0; text-wrap: balance; }
.thought::before, .thought::after { content: ""; position: absolute; border-radius: 999px; background: #fff; box-shadow: var(--border) 0 0 0 1px, #1F1B190F 0 2px 6px; }
.thought::before { left: 72px; bottom: -20px; width: 18px; height: 18px; }
.thought::after { left: 58px; bottom: -36px; width: 10px; height: 10px; }
.beats { margin: 0; padding: 0 0 0 40px; list-style: none; border-left: 2px solid var(--color-ember-200); }
.beat { position: relative; margin: 0; padding-bottom: 104px; }
.beat:last-child { padding-bottom: 0; }
.beat::before { content: ""; position: absolute; left: -50px; top: 9px; width: 16px; height: 16px; border-radius: 999px; background: var(--color-ember-600); box-shadow: var(--color-sand-100) 0 0 0 5px; }
.beat h3 { font-size: 30px; line-height: 36px; letter-spacing: -0.025em; text-wrap: balance; }
.beat > p { margin: 12px 0 28px; max-width: 560px; font-size: 18px; line-height: 28px; color: var(--color-sand-700) !important; text-wrap: pretty; }
.artifact { padding: 20px; border-radius: 20px; background: #fff; box-shadow: var(--card-shadow); font-variant-numeric: tabular-nums; }
.artifact-head { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; margin-bottom: 6px; border-bottom: 1px solid var(--border); color: var(--color-ember-600); }
.artifact-head svg { width: 18px; height: 18px; }
.artifact-head b { flex: 1; font: 800 16px/22px var(--heading); color: var(--fg); }
.artifact-head span { font: 600 13px/16px var(--sans); color: var(--muted); }
.line { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; padding: 10px 0; align-items: baseline; }
.line .who { font: 700 13px/20px var(--sans); color: var(--color-sand-600); }
.line p { margin: 0; font-size: 16px; line-height: 24px; color: var(--color-sand-800) !important; }
.line.you .who { color: var(--color-ember-700); }
.line time { font: 600 12px/20px var(--sans); color: var(--color-sand-500); }
.line mark { padding: 1px 3px; border-radius: 4px; background: var(--color-ember-100); box-shadow: inset 0 -2px 0 var(--color-ember-400); color: var(--color-ember-900); }
.heard { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--color-ember-50); box-shadow: inset 0 0 0 1px var(--color-ember-200); font: 700 14px/18px var(--sans); color: var(--color-ember-800); }
.heard svg { width: 18px; height: 18px; color: var(--color-ember-600); }
/* Photos follow the kit Photo frame: sand while loading or missing, cover-cropped */
.commitment .listing { display: block; width: calc(100% + 40px); max-width: none; height: auto; aspect-ratio: 16 / 9; object-fit: cover; margin: -20px -20px 18px; border-radius: 20px 20px 0 0; background: var(--color-sand-100); }
.commit-row { display: flex; align-items: center; gap: 12px; }
.commit-row > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.commit-row b { font: 800 18px/24px var(--heading); letter-spacing: -0.015em; }
.commit-row small { font: 400 14px/20px var(--sans); color: var(--muted); }
.due { padding: 4px 10px; border-radius: 999px; background: var(--color-honey-50); box-shadow: inset 0 0 0 1px var(--color-honey-200); font: 700 12px/16px var(--sans); color: var(--color-honey-800); }
.source { display: flex; align-items: center; gap: 8px; margin: 16px 0 6px; padding: 10px 12px; border-radius: 12px; background: var(--color-sand-100); font: 600 14px/18px var(--sans); color: var(--color-sand-700); }
.source svg { width: 18px; height: 18px; color: var(--color-ember-600); }
.facts { margin: 0; padding: 0; list-style: none; }
.facts li { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 12px; margin: 0; padding: 11px 0 0; font-size: 15px; line-height: 22px; }
.facts li + li { margin-top: 11px; border-top: 1px solid var(--border); }
.facts b { font: 700 13px/22px var(--sans); color: var(--color-sand-600); }
.email-meta { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 6px 12px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--border); font-size: 14px; line-height: 20px; }
.email-meta span { color: var(--muted); }
.email > p { margin: 0; font-size: 16px; line-height: 25px; color: var(--color-sand-900) !important; }
.comps { width: 100%; margin: 14px 0 0; border-collapse: collapse; font-size: 14px; line-height: 20px; }
.comps td { padding: 9px 12px 9px 0; border-top: 1px solid var(--border); color: var(--color-sand-700); white-space: nowrap; }
.comps td.thumb { width: 60px; padding-right: 12px; }
.comps .thumb img { display: block; width: 48px; height: 36px; border-radius: 6px; object-fit: cover; background: var(--color-sand-100); }
.comps td:nth-child(2) { font-weight: 700; color: var(--fg); }
.comps td:last-child { padding-right: 0; text-align: right; font-weight: 700; color: var(--fg); }
.email .sig { margin: 14px 0 18px; }
.sent-stack { display: flex; flex-direction: column; gap: 12px; padding: 0; background: none; box-shadow: none; }
.undo { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px dashed var(--color-ember-400); border-radius: 12px; background: var(--color-ember-50); }
.undo-row { display: flex; align-items: center; gap: 10px; color: var(--color-ember-600); }
.undo-row svg { width: 18px; height: 18px; }
.undo-row span { flex: 1; font: 700 14px/18px var(--sans); color: var(--color-ember-800); }
.undo-row b { padding: 6px 12px; border-radius: 8px; background: #fff; box-shadow: var(--color-ember-200) 0 0 0 1px; font: 800 13px/16px var(--sans); color: var(--color-ember-800); }
.undo-bar { height: 4px; border-radius: 999px; background: var(--color-ember-200); }
.undo-bar i { display: block; width: 80%; height: 4px; border-radius: 999px; background: var(--color-ember-600); }
.receipt { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px; background: #fff; box-shadow: var(--card-shadow); }
.receipt div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.receipt b { font: 700 15px/20px var(--sans); color: var(--fg); overflow-wrap: anywhere; }
.receipt small { font: 400 14px/18px var(--sans); color: var(--muted); }
.receipt em.time { font: 600 13px/16px var(--sans); font-style: normal; color: var(--muted); }
.check { width: 32px; height: 32px; border-radius: 999px; background: var(--color-green-600); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.check svg { width: 18px; height: 18px; }

/* Poses by scroll position: 0 listening, 1/4 thinking, 1/2 presenting, 3/4 delighted. The range runs while the
   viewport's middle line crosses the beats, so each pose lines up with its beat. */
@keyframes story-poses {
  0% { background-position: calc(var(--reid-size) * -0) calc(var(--reid-size) * -1); }
  25% { background-position: calc(var(--reid-size) * -2) calc(var(--reid-size) * -1); }
  50% { background-position: calc(var(--reid-size) * -4) calc(var(--reid-size) * -2); }
  75% { background-position: calc(var(--reid-size) * -1) calc(var(--reid-size) * -1); }
  100% { background-position: calc(var(--reid-size) * -1) calc(var(--reid-size) * -1); }
}
@supports (animation-timeline: view()) {
  .beats { view-timeline-name: --story; }
  .story-grid { timeline-scope: --story; }
  .story .mascot-story[data-clip] .reid__bird {
    animation: story-poses steps(1, end) both, reid-motion-breathe 5200ms cubic-bezier(.45,0,.55,1) infinite;
    animation-timeline: --story, auto;
    animation-range: cover 50vh cover calc(100% - 50vh), normal;
  }
  /* One thought per quarter of the same range the poses step through */
  .thought { display: grid; }
  .thought > span { animation: thought-line linear both; animation-timeline: --story; }
  .thought > span:nth-child(1) { animation-name: thought-first; animation-range: cover 50vh cover calc(25% + 25vh); }
  .thought > span:nth-child(2) { animation-range: cover calc(25% + 25vh) cover 50%; }
  .thought > span:nth-child(3) { animation-range: cover 50% cover calc(75% - 25vh); }
  .thought > span:nth-child(4) { animation-name: thought-last; animation-range: cover calc(75% - 25vh) cover calc(100% - 50vh); }
}
@keyframes thought-line { 0%, 100% { opacity: 0; } 14%, 86% { opacity: 1; } }
@keyframes thought-first { 0%, 86% { opacity: 1; } 100% { opacity: 0; } }
@keyframes thought-last { 0% { opacity: 0; } 14%, 100% { opacity: 1; } }

/* Meet Reid: the assistant you text. Copy on the left; the thread on the right, with Reid perched on its top edge. */
.assistant { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: 80px; align-items: center; max-width: 1280px; margin: 0 auto; padding: 136px var(--gutter) 40px; box-sizing: content-box; }
.nowrap { white-space: nowrap; }
.assistant h2 { font-size: clamp(36px, 4.4vw, 60px); line-height: 1.04; letter-spacing: -0.03em; }
.home .assistant-lede { max-width: 560px; margin: 20px 0 0; font-size: 20px; line-height: 30px; color: var(--color-sand-700); }
/* Pickers: radio labels, so choosing a scenario needs no JavaScript and works from the keyboard. Without a pick, the
   first one is shown; with motion welcome they take turns (see the motion block). */
.pickers { display: flex; flex-direction: column; gap: 6px; max-width: 580px; margin: 28px 0 0; }
.pick { position: relative; display: block; padding: 16px 20px 18px; border-radius: 18px; cursor: pointer; font-size: 17px; line-height: 26px; color: var(--color-sand-700); }
.pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick span { position: relative; z-index: 1; display: block; text-wrap: pretty; }
.pick b { color: var(--fg); }
.pick::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #fff; box-shadow: var(--card-shadow); opacity: 0; transition: opacity 200ms ease; }
.pick::after { content: ""; position: absolute; left: 20px; right: 20px; bottom: 7px; height: 3px; border-radius: 3px; background: var(--color-ember-500); transform-origin: 0 50%; scale: 0 1; opacity: 0; }
.pick:hover::before { opacity: 0.55; }
.pickers:not(:has(input:checked)) .pick:first-child::before, .pick:has(input:checked)::before { opacity: 1; }
.pick:has(input:focus-visible) { outline: 2px solid var(--color-ember-500); outline-offset: 2px; }
.assistant-visual { display: flex; flex-direction: column; align-items: flex-end; min-width: 0; }
/* Reid peeks over the card's top edge, wing tips hooked over it, clear of the header text on the left.
   The art (480x383) ends in a straight cut line 85% down, which lands on the card's edge. */
.reid-peek { --peek-w: 200px; --peek-h: calc(var(--peek-w) * 383 / 480); position: relative; z-index: 1; display: block; width: var(--peek-w); height: var(--peek-h); margin: 0 36px calc(var(--peek-h) * -0.15) 0; background: url(/brand/reid-peek.webp) center / contain no-repeat; pointer-events: none; }
.thread { align-self: stretch; overflow: hidden; border-radius: 28px; background: #fff; box-shadow: var(--card-shadow), #49190726 0 30px 60px -30px; }
.thread-head { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-bottom: 1px solid var(--border); background: var(--color-sand-50); }
.thread-avatar { --reid-size: 44px; margin: -4px -2px -4px -6px; }
.thread-avatar::before { display: none; }
.thread-head div { display: flex; flex-direction: column; }
.thread-head b { font: 800 16px/20px var(--heading); }
.thread-head small { font: 400 12px/16px var(--sans); color: var(--muted); }
.chats { display: grid; }
.chats .sms { grid-area: 1 / 1; }
.sms { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 20px; list-style: none; }
.home .sms li { position: relative; max-width: 84%; padding: 10px 14px; border-radius: 20px; font-size: 15px; line-height: 21px; }
.sms time { display: block; margin-top: 4px; font: 600 11px/14px var(--sans); opacity: 0.7; }
.home .sms .from-reid { align-self: flex-start; border-bottom-left-radius: 6px; background: var(--color-sand-100); color: var(--color-sand-900); }
.home .sms .from-me { align-self: flex-end; border-bottom-right-radius: 6px; background: var(--color-ember-600); color: #fff; }
.from-me time { text-align: right; }
.sms .from-reid::before { content: none; }
/* One scenario at a time: the first until something is picked, then the pick. */
.chats .sms + .sms, .assistant:has(.pick input:checked) .chats .sms { visibility: hidden; }
.assistant:has(#pick-digest:checked) .sms[data-scenario="digest"], .assistant:has(#pick-ask:checked) .sms[data-scenario="ask"],
.assistant:has(#pick-approve:checked) .sms[data-scenario="approve"], .assistant:has(#pick-media:checked) .sms[data-scenario="media"] { visibility: visible; }
/* The media scenario's post: a real listing photo with the listing laid over it */
.home .sms li:has(.post) { width: 64%; }
.post { position: relative; display: block; margin: 8px 0 2px; overflow: hidden; border-radius: 14px; }
.post img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.post-tag { position: absolute; left: 8px; right: 8px; bottom: 8px; display: flex; flex-direction: column; padding: 8px 10px; border-radius: 10px; background: #FFFFFFF2; }
.post-tag b { font: 900 17px/20px var(--heading); letter-spacing: -0.02em; color: var(--color-ember-600); }
.post-tag small { font: 700 12px/16px var(--sans); color: var(--color-sand-800); }

/* Section heads shared by What you can do and the FAQ */
.section-head h2 { font-size: clamp(36px, 4.4vw, 60px); line-height: 1.04; letter-spacing: -0.03em; }
.home .section-head p { max-width: 560px; margin: 18px 0 0; font-size: 19px; line-height: 29px; color: var(--color-sand-700); text-wrap: balance; }

/* What you can do: six capabilities, each a Remix icon, a title and one sentence */
.features { max-width: 1280px; margin: 0 auto; padding: 136px var(--gutter) 0; box-sizing: content-box; }
/* Its head sits centered over the grid (#516) */
.features .section-head { text-align: center; }
.home .features .section-head p { margin-inline: auto; }
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 48px 0 0; padding: 0; list-style: none; }
.feature-grid li { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 28px; border-radius: 24px; background: #fff; box-shadow: var(--card-shadow); }
.feature-grid li > svg { box-sizing: content-box; width: 24px; height: 24px; margin-bottom: 8px; padding: 12px; border-radius: 14px; background: var(--color-ember-50); box-shadow: inset 0 0 0 1px var(--color-ember-100); color: var(--color-ember-600); }
.feature-grid h3 { font-size: 21px; line-height: 27px; letter-spacing: -0.02em; }
.home .feature-grid p { margin: 0; font-size: 16px; line-height: 25px; color: var(--color-sand-700); }

/* The whole card opens its detail: the button's ::after stretches over the card, so a tap anywhere lands on it. */
.feature-more { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding: 8px 0 0; border: 0; background: none; font: inherit; font-size: 15px; font-weight: 700; color: var(--color-ember-600); cursor: pointer; }
.feature-more svg { width: 18px; height: 18px; fill: currentColor; }
.feature-more::after { content: ""; position: absolute; inset: 0; border-radius: 24px; }
.feature-more:focus-visible { outline: none; }
.feature-more:focus-visible::after { outline: 3px solid var(--color-ember-400); outline-offset: 3px; }
.feature-grid li:has(.feature-more:hover) { box-shadow: var(--border) 0 0 0 1px, #1F1B190F 0 2px 4px, #1F1B191A 0 12px 28px -6px; }

/* Detail: a native popover, so it opens, light-dismisses and closes on Esc without script. A centered modal on wide
   screens; a bottom sheet on phones. Hidden popovers keep the UA's display: none. */
.sheet { box-sizing: border-box; width: min(600px, calc(100% - 32px)); max-height: calc(100dvh - 48px); margin: auto; padding: 0; border: 0; border-radius: 28px; overflow: hidden; background: #fff; color: var(--fg); box-shadow: 0 32px 80px -12px #1F1B1947, 0 0 0 1px var(--border); }
.sheet:popover-open { display: flex; flex-direction: column; }
.sheet::backdrop { background: #1F1B1966; }
html:has(.sheet:popover-open) { overflow: hidden; }
.sheet-scroll { overflow-y: auto; overscroll-behavior: contain; padding: 0 0 32px; }
.sheet img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; background: var(--color-sand-100); }
.sheet h3 { margin: 24px 32px 0; font-size: 28px; line-height: 34px; letter-spacing: -0.025em; }
.home .sheet p { margin: 10px 32px 0; font-size: 17px; line-height: 27px; color: var(--color-sand-700); }
.sheet ul { display: grid; gap: 12px; margin: 22px 32px 0; padding: 20px 0 0; border-top: 1px solid var(--border); list-style: none; }
.home .sheet li { position: relative; padding-left: 30px; font-size: 16px; line-height: 25px; color: var(--fg); }
.sheet li::before { content: ""; position: absolute; left: 0; top: 3px; width: 19px; height: 19px; border-radius: 50%; background: var(--color-ember-50) url(/brand/check.svg) center / 13px no-repeat; box-shadow: inset 0 0 0 1px var(--color-ember-100); }
.sheet-close { position: absolute; z-index: 1; top: 14px; right: 14px; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: #FFFFFFE6; box-shadow: 0 0 0 1px var(--border), 0 2px 8px #1F1B1914; color: var(--fg); cursor: pointer; }
.sheet-close svg { width: 20px; height: 20px; fill: currentColor; }
.sheet-close:focus-visible { outline: 3px solid var(--color-ember-400); outline-offset: 2px; }

/* Rounded bands (#589): the trust band and the waitlist band are full-bleed sheets with rounded top corners. */
.trust, .cta { --round: 48px; position: relative; border-radius: var(--round) var(--round) 0 0; }
/* Trust: a dark full-bleed band */
.trust { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 64px; margin-top: 48px; padding: 104px max(var(--gutter), calc((100% - 1280px) / 2)) 120px; background: var(--color-sand-950) radial-gradient(#FFFFFF1A 1px, transparent 1.5px) 0 0 / 22px 22px; }
.home .trust h2 { font-size: clamp(36px, 4vw, 56px); line-height: 1.05; letter-spacing: -0.03em; text-wrap: balance; color: #fff; }
.trust-points p { margin: 0; padding: 22px 0; border-top: 1px solid #FFFFFF26; font-size: 18px; line-height: 28px; color: var(--color-sand-300) !important; text-wrap: pretty; }
.trust-points p:last-child { border-bottom: 1px solid #FFFFFF26; }
.trust-points b { color: #fff; }
.home .trust-points a { color: var(--color-ember-300); }
.trust-head { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
/* Reid reads the fine print (#589), standing at the foot of the heading's column. */
.reid-reading { display: block; width: 260px; aspect-ratio: 260 / 253; background: image-set(url(/brand/reid-reading.webp) 1x, url(/brand/reid-reading-2x.webp) 2x) center / contain no-repeat; }

/* FAQ: native disclosure rows, no JavaScript; the bottom padding leaves room for Reid on the waitlist band */
.faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 64px; max-width: 1280px; margin: 0 auto; padding: 96px var(--gutter) 224px; box-sizing: content-box; }
.faq-list details { border-top: 1px solid var(--border-strong); }
.faq-list details:last-child { border-bottom: 1px solid var(--border-strong); }
.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; font: 800 19px/26px var(--heading); letter-spacing: -0.01em; color: var(--fg); cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: ""; flex-shrink: 0; width: 20px; height: 20px; background: var(--color-ember-600); mask: url(/brand/plus.svg) center / contain no-repeat; transition: rotate 200ms ease; }
.faq-list details[open] summary::after { rotate: 45deg; }
.faq-list summary:focus-visible { outline: 2px solid var(--color-ember-500); outline-offset: 4px; border-radius: 6px; }
.home .faq-list p { margin: -4px 0 0; padding: 0 36px 22px 0; font-size: 17px; line-height: 27px; color: var(--color-sand-700); }

/* Waitlist: a full-bleed ember band with the form inline, Reid standing on its top edge */
.cta { margin-top: 48px; padding: 96px var(--gutter) 112px; background: var(--color-ember-600); color: #fff; }
.cta-inner { max-width: 1280px; margin: 0 auto; }
.cta h2 { max-width: 780px; color: #fff; font-size: clamp(40px, 5.2vw, 76px); line-height: 1.0; letter-spacing: -0.035em; text-wrap: balance; }
.cta-inner > p { max-width: 600px; margin: 20px 0 0; font-size: 19px; line-height: 29px; color: #fff !important; text-wrap: balance; }
.cta .capture { max-width: 620px; margin-top: 36px; }
.cta .label { color: #fff; }
.cta .input { box-shadow: #67280F40 0 1px 2px; }
.btn-ink { background: var(--color-sand-950); box-shadow: #FFFFFF1F 0 1px 0 inset, #1F1B1966 0 1px 2px, var(--color-sand-950) 0 0 0 1px; }
.btn-ink:hover { background: var(--color-sand-800); }
.cta .fine { margin: 10px 0 0; font-size: 14px; line-height: 21px; color: #fff !important; }
.cta .fine a { color: #fff; }
.mascot-cta { --reid-size: 210px; position: absolute; left: calc(75% - var(--reid-size) / 2); bottom: calc(100% - 0.125 * var(--reid-size)); }

/* The hero and story Reids: reid.js draws the live rig over the sprite, then hides the sprite (#516, ADR-0032) */
/* The rig's artboard has more headroom than a sprite frame: scaled about his feet, he matches the sprite's size and
   stands on the same 87.5% line. */
.reid > canvas { position: absolute; inset: 0; width: 100%; height: 100%; transform-origin: 50% 100%; scale: 0.886; translate: 0 -6.8%; opacity: 0; transition: opacity 0.3s ease; cursor: pointer; }
.reid.is-live > .reid__bird { opacity: 0; transition: opacity 0.3s ease; }
.reid.is-live > canvas { opacity: 1; }

/* Footer */
.foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 32px; padding: 32px var(--gutter) 48px; border-top: 1px solid var(--border); font-size: 14px; color: var(--muted); }
/* Reid sits beside the wordmark; reid.js draws the live rig over his sprite (a tap spins him). The negative margin
   keeps the footer's height. */
.foot-reid { position: relative; flex: none; width: 88px; height: 88px; margin: -20px -4px -20px -12px; }
.foot-reid .reid { --reid-size: 88px; position: absolute; inset: 0; }
.foot-brand { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.foot-brand .wordmark { font-size: 20px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.foot nav a { font-weight: 700; color: var(--color-sand-700); text-decoration: none; }
.foot nav a:hover { color: var(--color-ember-700); text-decoration: underline; }

/* Narrow desktops: the same window, zoomed */
@media (min-width: 1081px) and (max-width: 1279px) {
  .browser { zoom: 0.84; }
  .hero-visual { height: 680px; }
  .c3 { bottom: 700px; }
}

/* Tablet: the phone replaces the window, and the story stacks */
@media (max-width: 1080px) {
  .hero { gap: 40px; padding-top: 40px; }
  .browser { display: none; }
  .phone { display: block; }
  .hero-visual { width: 520px; height: 720px; }
  .mascot-hero { --reid-size: 230px; margin: 0 18px -34px 0; }
  .c1, .c2 { display: none; }
  .c3 { --x: -4%; bottom: 540px; }
  .story-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 40px; }
  .story-rail { justify-content: flex-start; }
  .perch { position: relative; top: 0; align-items: flex-start; }
  .thought { display: none; }
  .mascot-story { --reid-size: 180px; margin: 0 0 -24px -12px; }
  .trust, .faq { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .trust-head { flex-direction: row; align-items: flex-end; }
  .reid-reading { flex: none; width: 190px; }
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .assistant { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .assistant-visual { width: 100%; max-width: 520px; margin: 0 auto; }
}

/* Phone */
@media (max-width: 720px) {
  .sheet { width: 100%; max-width: none; max-height: 90dvh; margin: auto 0 0; border-radius: 28px 28px 0 0; }
  .sheet::before { content: ""; position: absolute; z-index: 1; top: 8px; left: 50%; width: 40px; height: 5px; margin-left: -20px; border-radius: 3px; background: #FFFFFFB3; }
  .sheet-scroll { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
  .sheet h3 { margin: 20px 22px 0; font-size: 24px; line-height: 30px; }
  .home .sheet p { margin-inline: 22px; }
  .sheet ul { margin-inline: 22px; }
  .nav { gap: 12px; padding-block: 14px; }
  .nav nav { display: none; }
  .nav .btn { margin-left: auto; }
  .hero { padding-top: 28px; }
  .hero-copy { gap: 22px; }
  .capture-row { flex-direction: column; }
  .capture-row .input { flex: none; }
  .capture-row .btn { width: 100%; }
  .hero-visual { zoom: 0.72; }
  .cloud { width: calc(var(--w) * 0.55); }
  .c3 { --x: -8%; bottom: 365px; }
  .story { padding: 80px var(--gutter); }
  .story-head p { font-size: 18px; line-height: 28px; }
  .mascot-story { --reid-size: 150px; }
  .beats { padding-left: 24px; }
  .beat { padding-bottom: 72px; }
  .beat::before { left: -33px; width: 14px; height: 14px; }
  .beat h3 { font-size: 24px; line-height: 29px; }
  .artifact { padding: 16px; }
  .line { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; }
  .line p { grid-column: 1 / -1; }
  .line .who { grid-row: 1; }
  .line time { grid-row: 1; text-align: right; }
  .facts li { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .comps td:nth-child(4) { display: none; }
  .commitment .listing { width: calc(100% + 32px); margin: -16px -16px 16px; }
  .trust { --round: 28px; padding: 64px var(--gutter) 80px; }
  .trust-head { flex-direction: column; align-items: flex-start; gap: 24px; }
  .reid-reading { width: 150px; }
  .features { padding-top: 88px; }
  .feature-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 32px; }
  .feature-grid li { padding: 22px; }
  .home .section-head p { font-size: 18px; line-height: 28px; }
  .faq { padding: 72px var(--gutter) 128px; }
  .faq-list summary { font-size: 18px; line-height: 24px; }
  .assistant { padding-top: 88px; }
  .assistant h2 { font-size: clamp(28px, 8.6vw, 36px); }
  .home .assistant-lede { font-size: 18px; line-height: 28px; }
  .reid-peek { --peek-w: 150px; margin-right: 20px; }
  .sms { padding: 16px; }
  .cta { --round: 28px; padding: 64px var(--gutter) 80px; }
  .mascot-cta { --reid-size: 150px; }
}
@media (max-width: 380px) {
  .nav .btn { padding: 0 12px; font-size: 13px; }
  .hero-visual { zoom: 0.64; }
}

/* /thanks */
.thanks { max-width: 620px; margin: 0 auto; padding: 48px 16px 120px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.mascot-thanks { --reid-size: min(260px, 60vw); }
.thanks h1 { font-size: clamp(40px, 7vw, 64px); line-height: 1.05; letter-spacing: -0.03em; }
.thanks > p { margin: 0 0 12px; font-size: 18px; line-height: 28px; color: var(--color-sand-700) !important; }

/* Motion, only for visitors who haven't asked for less. Without it the hero holds a still frame: the draft open on
   desktop, Today on the phone, no pointer. */
@media (prefers-reduced-motion: no-preference) {
  /* Sheets rise in and fall away; display and overlay stay discrete so the exit can play. */
  .sheet, .sheet::backdrop { transition: opacity 0.22s ease, translate 0.32s cubic-bezier(0.2, 0.8, 0.2, 1), scale 0.32s cubic-bezier(0.2, 0.8, 0.2, 1), display 0.32s allow-discrete, overlay 0.32s allow-discrete; }
  .sheet { opacity: 0; translate: 0 16px; scale: 0.97; }
  .sheet:popover-open { opacity: 1; translate: 0 0; scale: 1; }
  .sheet::backdrop { opacity: 0; }
  .sheet:popover-open::backdrop { opacity: 1; }
  @starting-style {
    .sheet:popover-open { opacity: 0; translate: 0 16px; scale: 0.97; }
    .sheet:popover-open::backdrop { opacity: 0; }
  }
  @media (max-width: 720px) {
    .sheet { opacity: 1; translate: 0 100%; scale: 1; }
    .sheet:popover-open { translate: 0 0; }
    @starting-style { .sheet:popover-open { opacity: 1; translate: 0 100%; scale: 1; } }
  }
  .feature-grid li { transition: box-shadow 0.2s ease, translate 0.2s ease; }
  .feature-grid li:has(.feature-more:hover) { translate: 0 -2px; }

  .undo-bar i { animation: tick 24s linear infinite; }
  @keyframes tick { from { width: 100%; } to { width: 0; } }

  /* One 14s loop: review the email (15%), send it (40%), the undo window runs, then sent and kept (58%), reset. */
  .hero-visual { --loop: 14s; }
  .cursor { animation: demo-cursor var(--loop) infinite; }
  .cursor::after { animation: demo-click var(--loop) infinite; }
  .touch { animation: demo-touch var(--loop) infinite; }
  .hero .promise { animation: demo-select var(--loop) infinite; }
  .hero .review { animation: demo-press-review var(--loop) infinite; }
  .hero .send { animation: demo-press-send var(--loop) infinite; }
  .hero .promise .status-line.ember { animation: demo-due var(--loop) infinite; }
  .hero .status-line.kept { animation: demo-kept var(--loop) infinite; }
  .pane-empty { animation: demo-empty var(--loop) infinite; }
  .pane-draft { animation: demo-draft var(--loop) infinite; }
  .undo-toast { animation: demo-undo var(--loop) infinite; }
  .undo-toast i { animation: demo-undo-bar var(--loop) linear infinite; }
  .sent-toast { animation: demo-sent var(--loop) infinite; }
  .view-today { animation: demo-view-today var(--loop) infinite; }
  .view-draft { animation: demo-view-draft var(--loop) infinite; }

  @keyframes demo-cursor {
    0% { translate: var(--ax) var(--ay); scale: 1; opacity: 0; }
    4% { translate: var(--ax) var(--ay); opacity: 1; }
    13% { translate: var(--rx) var(--ry); scale: 1; }
    15% { scale: 0.85; }
    17% { scale: 1; }
    24% { translate: var(--rx) var(--ry); }
    37% { translate: var(--sx) var(--sy); scale: 1; }
    40% { scale: 0.85; }
    42% { translate: var(--sx) var(--sy); scale: 1; }
    52%, 88% { translate: var(--ex) var(--ey); opacity: 1; }
    94%, 100% { translate: var(--ex) var(--ey); opacity: 0; }
  }
  @keyframes demo-click {
    0%, 14.9% { opacity: 0; scale: 0.4; }
    15% { opacity: 0.8; scale: 0.4; }
    21% { opacity: 0; scale: 1.4; }
    21.1%, 39.9% { opacity: 0; scale: 0.4; }
    40% { opacity: 0.8; scale: 0.4; }
    46%, 100% { opacity: 0; scale: 1.4; }
  }
  @keyframes demo-touch {
    0%, 7% { translate: var(--rx) var(--ry); opacity: 0; scale: 1.5; }
    11% { opacity: 1; scale: 1; }
    15% { scale: 0.75; }
    17% { translate: var(--rx) var(--ry); opacity: 1; scale: 1; }
    20% { translate: var(--rx) var(--ry); opacity: 0; }
    21%, 33% { translate: var(--sx) var(--sy); opacity: 0; scale: 1.5; }
    37% { opacity: 1; scale: 1; }
    40% { scale: 0.75; }
    42% { opacity: 1; scale: 1; }
    45%, 100% { translate: var(--sx) var(--sy); opacity: 0; }
  }
  @keyframes demo-select {
    0%, 15%, 96%, 100% { box-shadow: var(--card-shadow); }
    18%, 90% { box-shadow: var(--color-ember-400) 0 0 0 2px, #1F1B190F 0 4px 12px -2px; }
  }
  @keyframes demo-press-review { 0%, 14%, 17%, 100% { scale: 1; } 15.5% { scale: 0.95; } }
  @keyframes demo-press-send { 0%, 39%, 42%, 100% { scale: 1; } 40.5% { scale: 0.95; } }
  @keyframes demo-due { 0%, 57%, 97%, 100% { opacity: 1; } 59%, 94% { opacity: 0; } }
  @keyframes demo-kept { 0%, 57%, 97%, 100% { opacity: 0; } 59%, 94% { opacity: 1; } }
  @keyframes demo-empty { 0%, 15%, 98%, 100% { opacity: 1; } 18%, 94% { opacity: 0; } }
  @keyframes demo-draft {
    0%, 16% { opacity: 0; translate: 0 10px; }
    20%, 92% { opacity: 1; translate: 0 0; }
    96%, 100% { opacity: 0; translate: 0 0; }
  }
  @keyframes demo-undo {
    0%, 41% { opacity: 0; translate: 0 8px; }
    43%, 56% { opacity: 1; translate: 0 0; }
    58%, 100% { opacity: 0; translate: 0 0; }
  }
  @keyframes demo-undo-bar { 0%, 42% { scale: 1 1; } 57%, 100% { scale: 0 1; } }
  @keyframes demo-sent {
    0%, 57% { opacity: 0; translate: 0 8px; }
    59%, 90% { opacity: 1; translate: 0 0; }
    94%, 100% { opacity: 0; translate: 0 0; }
  }
  @keyframes demo-view-today { 0%, 16%, 78%, 100% { translate: 0 0; } 20%, 74% { translate: -30% 0; } }
  @keyframes demo-view-draft { 0%, 16%, 78%, 100% { translate: 100% 0; } 20%, 74% { translate: 0 0; } }

  /* Meet Reid: the pickers take turns on a 40s loop, 10s each, and the thread plays the matching chat: Reid types,
     then each message lands in its reserved spot, so the card never changes height. Picking one stops the turns
     and plays that chat once, then holds it. */
  .sms[data-scenario="digest"], .pick:nth-child(1) { --at: 0s; }
  .sms[data-scenario="ask"], .pick:nth-child(2) { --at: -30s; }
  .sms[data-scenario="approve"], .pick:nth-child(3) { --at: -20s; }
  .sms[data-scenario="media"], .pick:nth-child(4) { --at: -10s; }
  .sms li:nth-child(1) { --msg: sms-1; --type: sms-1-type; --msg-once: sms-1-once; --type-once: sms-1-type-once; }
  .sms li:nth-child(2) { --msg: sms-2; --type: sms-2-type; --msg-once: sms-2-once; --type-once: sms-2-type-once; }
  .sms li:nth-child(3) { --msg: sms-3; --type: sms-3-type; --msg-once: sms-3-once; --type-once: sms-3-type-once; }
  .sms li:nth-child(4) { --msg: sms-4; --type: sms-4-type; --msg-once: sms-4-once; --type-once: sms-4-type-once; }
  .chats .sms li { animation: var(--msg) 40s ease-out var(--at) infinite both; transform-origin: 0 100%; }
  .chats .sms .from-me { transform-origin: 100% 100%; }
  .sms .from-reid::before { content: "•••"; position: absolute; top: 0; left: 0; visibility: visible; padding: 8px 14px; border-radius: 20px 20px 20px 6px; background: var(--color-sand-100); font: 900 16px/20px var(--sans); letter-spacing: 3px; color: var(--color-sand-500); scale: 0; transform-origin: 0 100%; animation: var(--type) 40s linear var(--at) infinite both, sms-typing 1s ease-in-out infinite; }
  .assistant:has(.pick input:checked) .sms li { animation: none; }
  .assistant:has(.pick input:checked) .sms .from-reid::before { animation: none; }
  .assistant:has(#pick-digest:checked) .sms[data-scenario="digest"] li, .assistant:has(#pick-ask:checked) .sms[data-scenario="ask"] li,
  .assistant:has(#pick-approve:checked) .sms[data-scenario="approve"] li, .assistant:has(#pick-media:checked) .sms[data-scenario="media"] li { animation: var(--msg-once) 40s ease-out 0s 0.24 both; }
  .assistant:has(#pick-digest:checked) .sms[data-scenario="digest"] .from-reid::before, .assistant:has(#pick-ask:checked) .sms[data-scenario="ask"] .from-reid::before,
  .assistant:has(#pick-approve:checked) .sms[data-scenario="approve"] .from-reid::before, .assistant:has(#pick-media:checked) .sms[data-scenario="media"] .from-reid::before { animation: var(--type-once) 40s linear 0s 0.24 both, sms-typing 1s ease-in-out infinite; }
  .pickers:not(:has(input:checked)) .pick::before { animation: pick-on 40s var(--at) infinite both; }
  .pickers:not(:has(input:checked)) .pick::after { animation: pick-progress 40s linear var(--at) infinite both; }
  @keyframes pick-on { 0%, 24% { opacity: 1; } 25.5%, 100% { opacity: 0; } }
  @keyframes pick-progress { 0% { scale: 0 1; opacity: 1; } 24.5% { scale: 1 1; opacity: 1; } 25.5%, 100% { scale: 1 1; opacity: 0; } }
  @keyframes sms-typing { 50% { color: var(--color-sand-300); } }
  @keyframes sms-1 { 0%, 2.2% { visibility: hidden; scale: 0.94; opacity: 1; } 3.25%, 24% { visibility: visible; scale: 1; opacity: 1; } 25%, 100% { visibility: hidden; scale: 1; opacity: 0; } }
  @keyframes sms-1-type { 0% { scale: 0; } 0.6%, 2.2% { scale: 1; } 2.25%, 100% { scale: 0; } }
  @keyframes sms-1-once { 0%, 2.2% { visibility: hidden; scale: 0.94; opacity: 1; } 3.25%, 24% { visibility: visible; scale: 1; opacity: 1; } 25%, 100% { visibility: hidden; scale: 1; opacity: 0; } }
  @keyframes sms-1-type-once { 0% { scale: 0; } 0.6%, 2.2% { scale: 1; } 2.25%, 100% { scale: 0; } }
  @keyframes sms-2 { 0%, 7.2% { visibility: hidden; scale: 0.94; opacity: 1; } 8.25%, 24% { visibility: visible; scale: 1; opacity: 1; } 25%, 100% { visibility: hidden; scale: 1; opacity: 0; } }
  @keyframes sms-2-type { 0%, 5.0% { scale: 0; } 5.6%, 7.2% { scale: 1; } 7.25%, 100% { scale: 0; } }
  @keyframes sms-2-once { 0%, 7.2% { visibility: hidden; scale: 0.94; opacity: 1; } 8.25%, 24% { visibility: visible; scale: 1; opacity: 1; } 25%, 100% { visibility: hidden; scale: 1; opacity: 0; } }
  @keyframes sms-2-type-once { 0%, 5.0% { scale: 0; } 5.6%, 7.2% { scale: 1; } 7.25%, 100% { scale: 0; } }
  @keyframes sms-3 { 0%, 12.2% { visibility: hidden; scale: 0.94; opacity: 1; } 13.25%, 24% { visibility: visible; scale: 1; opacity: 1; } 25%, 100% { visibility: hidden; scale: 1; opacity: 0; } }
  @keyframes sms-3-type { 0%, 10.0% { scale: 0; } 10.6%, 12.2% { scale: 1; } 12.25%, 100% { scale: 0; } }
  @keyframes sms-3-once { 0%, 12.2% { visibility: hidden; scale: 0.94; opacity: 1; } 13.25%, 24% { visibility: visible; scale: 1; opacity: 1; } 25%, 100% { visibility: hidden; scale: 1; opacity: 0; } }
  @keyframes sms-3-type-once { 0%, 10.0% { scale: 0; } 10.6%, 12.2% { scale: 1; } 12.25%, 100% { scale: 0; } }
  @keyframes sms-4 { 0%, 17.2% { visibility: hidden; scale: 0.94; opacity: 1; } 18.25%, 24% { visibility: visible; scale: 1; opacity: 1; } 25%, 100% { visibility: hidden; scale: 1; opacity: 0; } }
  @keyframes sms-4-type { 0%, 15.0% { scale: 0; } 15.6%, 17.2% { scale: 1; } 17.25%, 100% { scale: 0; } }
  @keyframes sms-4-once { 0%, 17.2% { visibility: hidden; scale: 0.94; opacity: 1; } 18.25%, 24% { visibility: visible; scale: 1; opacity: 1; } 25%, 100% { visibility: hidden; scale: 1; opacity: 0; } }
  @keyframes sms-4-type-once { 0%, 15.0% { scale: 0; } 15.6%, 17.2% { scale: 1; } 17.25%, 100% { scale: 0; } }

  /* Entrances on load: the hero rises in line by line, then Reid lands on the frame */
  .hero h1, .lede, .hero .capture, .hero-visual { animation: rise-in 800ms cubic-bezier(.2, .8, .2, 1) both; }
  .lede { animation-delay: 110ms; }
  .hero .capture { animation-delay: 220ms; }
  .hero-visual { animation-duration: 1100ms; animation-delay: 340ms; }
  .hero .mascot-hero { animation: perch-land 700ms cubic-bezier(.3, 1.5, .5, 1) 1000ms both; }
  @keyframes rise-in { from { opacity: 0; translate: 0 28px; } }
  @keyframes peek-up { from { translate: 0 60%; clip-path: inset(0 0 75% 0); } to { translate: 0 0; clip-path: inset(0 0 0 0); } }
  @keyframes perch-land { from { opacity: 0; translate: 0 -24px; scale: 0.92; } }

  /* Entrances and exits on scroll. Only here, so a browser without scroll timelines never runs these as 0s
     animations that end hidden. */
  @supports (animation-timeline: view()) {
    .beat h3, .beat > p, .artifact { animation: reveal-in linear both, reveal-out linear forwards; animation-timeline: view(), view(); animation-range: entry 0% entry 75%, exit 10% exit 100%; }
    .artifact { animation-range: entry 10% cover 40%, exit 10% exit 100%; }
    .beat::before { animation: reveal-dot linear both; animation-timeline: view(); animation-range: entry 30% entry 90%; }
    .story-head, .assistant h2, .assistant-lede, .pick, .section-head, .feature-grid li, .faq-list details, .trust h2, .trust-points p, .cta h2, .cta-inner > p, .cta .capture { animation: reveal-in linear both; animation-timeline: view(); animation-range: entry 0% entry 80%; }
    .perch { animation: perch-in linear both, perch-out linear forwards; animation-timeline: --story, --story; animation-range: entry 0% entry 40%, exit 45% exit 90%; }
    .cta .mascot-cta { animation: perch-land linear both; animation-timeline: view(); animation-range: entry 20% entry 100%; }
    /* Rises out of the card's edge: sliding down and clipping at the cut line keep it from ever showing below. */
    .reid-peek { animation: peek-up linear both; animation-timeline: view(); animation-range: entry 40% cover 40%; }
    /* Story cards play their contents in order on their own view timeline: the call's lines arrive and the promise is
       highlighted, the record fills in, the draft writes itself, and the undo window drains into the receipt. */
    .artifact { view-timeline: --art block; }
    .line mark { background: linear-gradient(var(--color-ember-100), var(--color-ember-100)) 0 0 / 100% 100% no-repeat; }
    .transcript .line:nth-child(2) { animation: line-in linear both; animation-timeline: --art; animation-range: cover 10% cover 16%; }
    .transcript .line:nth-child(3) { animation: line-in linear both; animation-timeline: --art; animation-range: cover 16% cover 22%; }
    .transcript .line:nth-child(4) { animation: line-in linear both; animation-timeline: --art; animation-range: cover 30% cover 36%; }
    .line mark { animation: mark-sweep linear both; animation-timeline: --art; animation-range: cover 22% cover 30%; }
    .transcript .heard { animation: card-pop linear both; animation-timeline: --art; animation-range: cover 34% cover 40%; }
    .commitment .listing { animation: photo-in linear both; animation-timeline: --art; animation-range: cover 6% cover 16%; }
    .commitment .commit-row { animation: card-in linear both; animation-timeline: --art; animation-range: cover 14% cover 20%; }
    .commitment .due { animation: card-pop linear both; animation-timeline: --art; animation-range: cover 20% cover 25%; }
    .commitment .source { animation: card-in linear both; animation-timeline: --art; animation-range: cover 22% cover 28%; }
    .facts li:nth-child(1) { animation: line-in linear both; animation-timeline: --art; animation-range: cover 28% cover 33%; }
    .facts li:nth-child(2) { animation: line-in linear both; animation-timeline: --art; animation-range: cover 32% cover 37%; }
    .facts li:nth-child(3) { animation: line-in linear both; animation-timeline: --art; animation-range: cover 36% cover 41%; }
    .email .email-meta { animation: card-in linear both; animation-timeline: --art; animation-range: cover 8% cover 14%; }
    .email > p:not(.sig) { animation: write-in linear both; animation-timeline: --art; animation-range: cover 12% cover 26%; }
    .comps tr:nth-child(1) { animation: line-in linear both; animation-timeline: --art; animation-range: cover 24% cover 29%; }
    .comps tr:nth-child(2) { animation: line-in linear both; animation-timeline: --art; animation-range: cover 28% cover 33%; }
    .comps tr:nth-child(3) { animation: line-in linear both; animation-timeline: --art; animation-range: cover 32% cover 37%; }
    .email .sig { animation: card-in linear both; animation-timeline: --art; animation-range: cover 36% cover 40%; }
    .email .actions { animation: card-pop linear both; animation-timeline: --art; animation-range: cover 38% cover 44%; }
    .sent-stack .undo { animation: card-in linear both; animation-timeline: --art; animation-range: cover 8% cover 14%; }
    .sent-stack .undo-bar i { animation: undo-drain linear both; animation-timeline: --art; animation-range: cover 14% cover 36%; }
    .sent-stack .receipt { animation: card-pop linear both; animation-timeline: --art; animation-range: cover 36% cover 42%; }
    @keyframes line-in { from { opacity: 0; translate: -12px 0; } }
    @keyframes card-in { from { opacity: 0; translate: 0 12px; } }
    @keyframes card-pop { from { opacity: 0; scale: 0.9; } }
    @keyframes photo-in { from { opacity: 0; filter: saturate(0.2) blur(4px); } }
    @keyframes write-in { from { clip-path: inset(0 0 100% 0); } }
    @keyframes mark-sweep { from { background-size: 0% 100%; box-shadow: inset 0 -2px 0 transparent; color: var(--color-sand-800); } }
    @keyframes undo-drain { from { width: 100%; } to { width: 0%; } }
    @keyframes reveal-in { from { opacity: 0; translate: 0 48px; scale: 0.97; } }
    @keyframes reveal-out { to { opacity: 0; translate: 0 -32px; scale: 0.98; } }
    @keyframes reveal-dot { from { scale: 0; } }
    @keyframes perch-in { from { opacity: 0; translate: 0 60px; scale: 0.8; } }
    @keyframes perch-out { to { opacity: 0; translate: 0 -40px; scale: 0.85; } }
  }
}