/* 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 drifting 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); }
/* Clouds keep to the margins and the band around the mockup, never the text column: two beside the headline, three
   anchored to the hero's bottom so they tuck behind the window's edges. Each sways a little, on its own clock. */
.cloud { position: absolute; left: var(--x); width: var(--w); aspect-ratio: 240 / 100; background: url(/sky/cloud.svg) center / contain no-repeat; opacity: 0.92; }
.c1 { --x: 2%; --w: 210px; --t: 38s; --d: -9s; top: 190px; }
.c2 { --x: 86%; --w: 180px; --t: 46s; --d: -30s; top: 170px; }
.c3 { --x: 5%; --w: 260px; --t: 52s; --d: -20s; bottom: 600px; }
.c4 { --x: 84%; --w: 300px; --t: 44s; --d: -4s; bottom: 520px; }
.c5 { --x: 30%; --w: 140px; --t: 34s; --d: -17s; bottom: 690px; }
.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; }
.hero-note { margin: 6px 0 0; font: 600 14px/20px var(--sans); color: var(--color-sand-600) !important; text-align: center; 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); }
.assistant-points { max-width: 560px; margin: 32px 0 0; padding: 0; list-style: none; }
.home .assistant-points li { padding: 18px 0; border-top: 1px solid var(--border-strong); font-size: 17px; line-height: 26px; color: var(--color-sand-700); }
.assistant-points li:last-child { border-bottom: 1px solid var(--border-strong); }
.assistant-points b { color: var(--fg); }
.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); }
.sms { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 20px; list-style: none; }
.home .sms li { 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; }

/* Trust: plain editorial text, no icon cards */
.trust { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 64px; max-width: 1280px; margin: 0 auto; padding: 120px var(--gutter) 224px; box-sizing: content-box; }
.trust h2 { font-size: clamp(36px, 4vw, 56px); line-height: 1.05; letter-spacing: -0.03em; text-wrap: balance; }
.trust-points p { margin: 0; padding: 22px 0; border-top: 1px solid var(--border-strong); font-size: 18px; line-height: 28px; color: var(--color-sand-700) !important; text-wrap: pretty; }
.trust-points p:last-child { border-bottom: 1px solid var(--border-strong); }
.trust-points b { color: var(--fg); }

/* Pilot: a full-bleed ember band with the form inline, Reid standing on its top edge */
.cta { position: relative; padding: 104px 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; right: max(var(--gutter), calc((100% - 1280px) / 2)); bottom: calc(100% - 0.125 * var(--reid-size)); }

/* 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); }
.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; }
  .c5 { bottom: 590px; }
}

/* 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: 2%; bottom: 470px; }
  .c4 { --x: 76%; --w: 220px; bottom: 420px; }
  .c5 { --x: 14%; bottom: 610px; }
  .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 { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .assistant { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .assistant-visual { width: 100%; max-width: 520px; margin: 0 auto; }
}

/* Phone */
@media (max-width: 720px) {
  .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: 330px; }
  .c4 { --x: 72%; bottom: 290px; }
  .c5 { --x: 6%; bottom: 430px; }
  .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 { padding: 80px var(--gutter) 128px; }
  .assistant { padding-top: 88px; }
  .home .assistant-lede { font-size: 18px; line-height: 28px; }
  .reid-peek { --peek-w: 150px; margin-right: 20px; }
  .sms { padding: 16px; }
  .cta { padding: 72px 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) {
  .undo-bar i { animation: tick 24s linear infinite; }
  @keyframes tick { from { width: 100%; } to { width: 0; } }

  .cloud { animation: drift-cloud var(--t) ease-in-out var(--d) infinite alternate; }
  @keyframes drift-cloud { from { translate: -3vw 0; } to { translate: 3vw 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; } }

  /* 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, .assistant-points li, .sms li, .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%; }
    @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; } }
  }
}