/* Food For You website. Launch-page restraint with the app's warm brand.
   Spec: see docs/superpowers/specs/ */

@font-face {
  font-family: "Instrument Sans";
  src: url("/assets/fonts/instrument-sans-var.woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("/assets/fonts/instrument-serif-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --paper: #FBF7F2;
  --band: #F3ECE3;
  --ink: #221510;
  --ink-soft: #6E5C50;
  --line: #E7DACB;
  --dark: #140D0A;
  --dark-raised: #1F1612;
  --on-dark: #FBF7F2;
  --on-dark-soft: rgba(251, 247, 242, .7);
  --cta: #C8461F;
  --cta-hover: #A93A18;
  --accent: #E0532C;       /* bright ember: 24px+ text on paper, or anywhere on dark */
  --accent-dark: #F26B41;  /* ember on dark */
  --serif-warm: #FFD9C7;   /* the serif-italic word on dark */
  --basil: #3F7A54;
  --btn: #C8461F;          /* filled buttons: white = 4.8:1; never overridden by a theme */
  --btn-hover: #A93A18;
  --gutter: 6.25vw;
  --content: min(87.5%, 1180px);
  --pad: 160px;
  --radius-tile: 28px;
  --ease: cubic-bezier(.4, 0, .6, 1);
  --sans: "Instrument Sans", "Segoe UI", Roboto, system-ui, sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
}
@media (max-width: 1068px) { :root { --pad: 128px; } }
@media (max-width: 734px)  { :root { --pad: 96px; } }

/* Dark theme: paper sections turn warm charcoal; .dark sections are dark in both themes. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #1C1512; --band: #241B17; --ink: #F5EDE6; --ink-soft: #A79A8C; --line: #3D322A;
    --cta: #E0532C; --cta-hover: #F26B41;
  }
}
:root[data-theme="dark"] {
  --paper: #1C1512; --band: #241B17; --ink: #F5EDE6; --ink-soft: #A79A8C; --line: #3D322A;
  --cta: #E0532C; --cta-hover: #F26B41;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 52px; scroll-padding-top: var(--nav-h, 52px); } /* the sticky nav's height (main.js keeps --nav-h current, e.g. under text-only zoom): focus and anchors land below it */
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 17px/1.47 var(--sans); letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, video, svg { display: block; max-width: 100%; }
a { color: var(--cta); }
a:hover { color: var(--cta-hover); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { margin: 0; font-weight: 700; font-stretch: 86%; letter-spacing: -0.035em; line-height: 1; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
[id] { scroll-margin-top: 12px; } /* footnotes and other targets land fully visible, a little below the nav */
/* A section anchor lands with the section's top at y=0, under the nav (nav-height padding - nav-height margin), so the nav's theme line falls inside the new section and the nav matches it at once. */
[data-nav-theme][id] { scroll-margin-top: -52px; scroll-margin-top: calc(-1 * var(--nav-h, 52px)); }
[tabindex="-1"]:focus { outline: none; } /* skip-link targets: focus moves there, but no ring around a whole region */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: 12px; z-index: 100; background: var(--btn); color: #fff; padding: 10px 16px; border-radius: 980px; transform: translateY(-200%); }
.skip:focus { transform: none; }

.wrap { width: var(--content); margin-inline: auto; }
.text-col { max-width: 690px; }
.center { text-align: center; margin-inline: auto; }
section { padding-block: var(--pad); }

.paper { background: var(--paper); color: var(--ink); }
.band  { background: var(--band); color: var(--ink); }
.dark  { background: var(--dark); color: var(--on-dark); color-scheme: dark; }
.dark a:not(.btn) { color: var(--accent-dark); }
.band a:not(.btn) { color: var(--cta-hover); }
.band .eyebrow { color: var(--cta-hover); }

/* Type scale: desktop / <=1068 / <=734 */
.h-hero    { font-size: 104px; }
.h-chapter { font-size: 80px; }
.h-section { font-size: 48px; line-height: 1.05; }
@media (max-width: 1068px) { .h-hero { font-size: 80px; } .h-chapter { font-size: 64px; } .h-section { font-size: 40px; } }
@media (max-width: 734px)  { .h-hero { font-size: 52px; } .h-chapter { font-size: 44px; } .h-section { font-size: 32px; } }
.serif { font-family: var(--serif); font-style: italic; font-weight: 400; font-stretch: 100%; letter-spacing: -0.01em; }
.dark .serif { color: var(--serif-warm); }
.paper .serif, .band .serif { color: var(--cta); }
.eyebrow { display: block; font-size: 21px; font-weight: 600; letter-spacing: 0; color: var(--cta); margin-bottom: 14px; }
.dark .eyebrow { color: var(--accent-dark); }
.lead { font-size: 21px; line-height: 1.38; color: var(--ink-soft); margin-top: 22px; }
.dark .lead { color: var(--on-dark-soft); }
@media (max-width: 734px) { .eyebrow, .lead { font-size: 19px; } }
.caption { font-size: 12px; line-height: 1.33; color: var(--ink-soft); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; cursor: pointer;
  font: 600 17px/1 var(--sans); padding: 15px 28px; border-radius: 980px; text-decoration: none;
  }
@media (prefers-reduced-motion: no-preference) {
  .btn { transition: background-color .2s var(--ease); }
  .localnav { transition: background-color .4s var(--ease), color .4s var(--ease); }
  .hl-dots span { transition: width .3s var(--ease), background-color .3s var(--ease); }
  .story-step p { transition: color .4s var(--ease); }
  .faq-list summary::after { transition: transform .3s var(--ease); }
}
.btn-cta { background: var(--btn); color: #fff; }
.btn-cta:hover { background: var(--btn-hover); color: #fff; }
.link-more { font-size: 17px; text-decoration: none; display: inline-flex; align-items: center; gap: .25em; }
.link-more::after { content: ""; width: .5em; height: .5em; border: solid currentColor; border-width: 2px 2px 0 0; transform: rotate(45deg) translateY(1px); }
.link-more:hover { text-decoration: underline; }
/* The official badge, unmodified. The PNG carries its own clear space, so its box can be tight. */
.badge-link { display: inline-block; line-height: 0; }
.badge-link img { height: 64px; width: auto; }

/* ---------- local nav ---------- */
/* The nav is 88% opaque: over a light phone screen the wordmark "You" still reaches 3:1 (72% gave 2.7:1). min-height, not height: with larger text the nav wraps and grows instead of clipping. The hero sits under it (see .hero), so at the top of the page the dark nav is always over the dark hero. */
.localnav { position: sticky; top: 0; z-index: 50; min-height: 52px; color: var(--on-dark);
  background: rgba(20, 13, 10, .88); border-bottom: 1px solid rgba(251, 247, 242, .08);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  }
/* Plain colours first: a declaration with var() inside color-mix() is not dropped by an older browser, it just computes to nothing, so the translucent paper nav lives in @supports below. */
.localnav[data-theme="paper"] { color: var(--ink); background: var(--paper); border-bottom-color: var(--line); }
@supports (background: color-mix(in srgb, red 50%, transparent)) {
  .localnav[data-theme="paper"] { background: color-mix(in srgb, var(--paper) 88%, transparent); border-bottom-color: color-mix(in srgb, var(--ink) 8%, transparent); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .localnav { background: var(--dark); } .localnav[data-theme="paper"] { background: var(--paper); } }
.localnav-inner { min-height: 51px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 16px; }
.wordmark { font-weight: 700; font-stretch: 90%; font-size: 21px; letter-spacing: -0.03em; color: inherit; text-decoration: none; }
.wordmark em { font-style: normal; color: var(--accent-dark); }
.localnav[data-theme="paper"] .wordmark em { color: var(--accent); } /* 21px bold = large text */
.paper .wordmark em { color: var(--cta); }
/* The footer's 17px wordmark sits on the band: --cta is 4.12:1 there in light and 4.37:1 in dark, so it uses --cta-hover (as the footer links do) in both. */
.site-foot .wordmark em { color: var(--cta-hover); }
.phone-screen .wordmark em { color: #C8461F; } /* the demo screen is always light */
.wordmark-sm { font-size: 15px; }
.localnav-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 24px; font-size: 12px; }
.localnav-links a { color: inherit; opacity: .8; text-decoration: none; padding: 16px 0; }
.localnav-links a:hover { opacity: 1; }
.localnav-cta { opacity: 1 !important; background: var(--btn); color: #fff !important; padding: 5px 12px !important; border-radius: 980px; font-weight: 600; }
@media (max-width: 734px) { .localnav-links a:not(.localnav-cta) { display: none; } }

/* ---------- phone frame: generic Android, no brand ---------- */
.phone { position: relative; width: 300px; max-width: 100%; border-radius: 46px; padding: 10px; flex: none;
  background: linear-gradient(145deg, #3a3330, #141110 40%, #2a2420); box-shadow: inset 0 0 0 1.5px #4a413c; }
.phone::after { content: ""; position: absolute; top: 21px; left: 50%; width: 11px; height: 11px; margin-left: -5.5px; border-radius: 50%; background: #0b0b0b; box-shadow: 0 0 0 2px #1c1c1c; z-index: 3; }
.phone-screen { position: relative; width: 100%; aspect-ratio: 1080 / 2160; /* the SCREEN is exactly 1:2, the recordings' ratio, so clips are never cropped */ border-radius: 37px; overflow: hidden; background: #FBF7F2; color: #221510; }
.dark .phone-screen:not(.nav-screen) { background: #1F1612; } /* dark chapters: no cream flash before a poster or still loads */
.phone-screen video, .phone-screen img { width: 100%; height: 100%; object-fit: cover; }
.phone-screen picture { display: block; width: 100%; height: 100%; }
/* A clip's poster sits behind its video as a real image, so the phone isn't blank before the video starts, or without JS. */
.clip-poster { position: absolute; inset: 0; }
.phone-screen video { position: relative; }
.dark .phone { box-shadow: inset 0 0 0 1.5px #4a413c, 0 60px 120px -30px rgba(242, 107, 65, .4); }
.phone-sm { width: 240px; }
/* Pause button for the looping clips (hero, Show me 3), over the top-right of the screen (beside the camera, clear of the status icons; the hero phone is only partly above the fold). Needs JS, and appears only once the clip has really started (or been paused): hidden before that, without JS, and under reduced motion (native controls are on there). */
.clip-toggle { display: none; position: absolute; top: 12px; right: 60px; z-index: 4; width: 36px; height: 36px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; place-items: center; background: rgba(20, 13, 10, .62); color: #FBF7F2; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.js .clip-toggle.is-live { display: grid; }
.clip-toggle:focus-visible { border-radius: 50%; outline-offset: 2px; }
.clip-toggle svg { width: 16px; height: 16px; fill: currentColor; }
.clip-toggle .i-play { display: none; }
.clip-toggle[aria-pressed="true"] .i-play { display: block; }
.clip-toggle[aria-pressed="true"] .i-pause { display: none; }

/* ---------- hero ---------- */
/* The hero only clips sideways: the phone overhangs into the highlights section below instead of being sliced off at the hero's edge. The glow clips itself. */
/* It also sits under the sticky nav (margin-top -52px, and the 52px added back to the top padding), so at the top of the page the dark nav is over the dark hero. */
.hero { position: relative; overflow-x: clip; margin-top: -52px; padding-block: calc(120px + 52px) 0; text-align: center; }
.hero-glow { position: absolute; inset: 0; overflow: hidden; }
.hero-glow img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); }
.hero-shade { position: absolute; inset: 0; background: radial-gradient(70% 60% at 50% 30%, rgba(20, 13, 10, .5), rgba(20, 13, 10, .92) 72%), linear-gradient(transparent 55%, var(--dark) 92%); }
.hero-copy { position: relative; z-index: 2; }
.hero .lead { max-width: 30ch; margin-inline: auto; }
.hero-ctas { margin-top: 30px; display: flex; gap: 24px; justify-content: center; align-items: center; flex-wrap: wrap; }
.hero-fine { margin-top: 14px; font-size: 14px; color: var(--on-dark-soft); }
.phone-hero { position: relative; z-index: 2; width: 330px; margin: 56px auto -140px; }
@media (max-width: 734px) { .hero { padding-top: calc(88px + 52px); } .phone-hero { width: 260px; margin-bottom: -110px; } .badge-link img { height: 56px; } }
/* 404 page: the hero's dark look with no phone below it, so it carries its own bottom padding and centres its copy in a screen-high block. */
.hero.notfound { padding-bottom: 96px; min-height: 72vh; display: flex; flex-direction: column; justify-content: center; }
.notfound .hero-copy { width: var(--content); }

/* ---------- highlights ---------- */
.highlights { padding-top: calc(var(--pad) + 80px); }
.hl-track { list-style: none; margin: 48px 0 0; padding: 0 calc((100% - var(--content)) / 2); display: flex; gap: 28px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; }
.hl-track::-webkit-scrollbar { display: none; }
.hl-slide { flex: 0 0 min(80vw, 520px); scroll-snap-align: center; background: var(--dark-raised); border-radius: var(--radius-tile); padding: 48px 24px 32px; display: grid; justify-items: center; gap: 28px; }
.hl-caption { font-size: 21px; font-weight: 600; text-align: center; }
.hl-controls { margin-top: 28px; display: flex; justify-content: center; align-items: center; gap: 20px; }
.hl-dots { display: flex; gap: 10px; }
.hl-dots span { width: 8px; height: 8px; border-radius: 50%; background: rgba(251, 247, 242, .35); }
.hl-dots span.is-on { width: 28px; border-radius: 4px; background: var(--on-dark); }
.hl-toggle { width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; background: rgba(251, 247, 242, .14); color: var(--on-dark); }
.hl-toggle svg { width: 16px; height: 16px; fill: currentColor; }
.hl-toggle .i-play { display: none; }
.hl-toggle[aria-pressed="true"] .i-play { display: block; }
.hl-toggle[aria-pressed="true"] .i-pause { display: none; }

/* ---------- try it (live demo) ---------- */
.try-grid, .cravings-grid, .together-grid, .directions-grid, .data-grid { display: grid; grid-template-columns: 1fr auto; gap: 72px; align-items: center; }
.together-grid { grid-template-columns: auto 1fr; }
@media (max-width: 1068px) { .try-grid, .cravings-grid, .together-grid, .directions-grid, .data-grid { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 48px; } .together-grid .phone { order: 2; } }
.phone-demo { width: 340px; }
/* The demo screen is 1:2 at normal size but grows when its content needs more room (larger text), instead of clipping: overflow is visible so the aspect-ratio box's automatic minimum height applies. */
.demo { display: flex; flex-direction: column; overflow: visible; }
.demo-bar { display: flex; justify-content: space-between; align-items: center; padding: 40px 18px 8px; }
.demo-tag { font-size: 11px; font-weight: 600; color: #97331A; background: #FBE6DC; padding: 4px 9px; border-radius: 999px; }
.demo-stage { flex: 1; display: grid; align-content: center; padding: 8px 18px; }
.demo-idle { text-align: center; }
.demo-idle h3 { font-size: 22px; letter-spacing: -0.02em; }
.demo-idle p { margin-top: 8px; font-size: 14px; color: #6E5C50; }
.demo-card { border-radius: 22px; overflow: hidden; background: #fff; box-shadow: 0 10px 30px -14px rgba(34, 21, 16, .35); }
.demo-card img { width: 100%; height: 150px; object-fit: cover; }
/* Places with no photo get a header of the same height, so every result card is the same size. */
.demo-card-ph { height: 150px; display: grid; place-content: center; justify-items: center; gap: 8px; background: linear-gradient(135deg, #F8E4D4, #EFC7AA); color: #97331A; font-size: 13px; font-weight: 600; }
.demo-card-ph svg { width: 64px; height: 64px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.demo-card-body { padding: 14px 16px 16px; }
.demo-kicker { font-size: 12px; font-weight: 600; color: #C8461F; }
.demo-name { display: block; margin-top: 4px; font-size: 22px; font-weight: 700; font-stretch: 90%; letter-spacing: -0.02em; }
.demo-meta { margin-top: 8px; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px 12px; font-size: 13px; color: #6E5C50; min-height: calc(2.94em + 6px); } /* two lines tall: the result's "Open now" can wrap, and the card must not jump when the reel settles */
.demo-open::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: var(--basil); vertical-align: 1px; }
.demo-card.is-spinning { opacity: .75; }
.demo-controls { display: grid; gap: 10px; padding: 0 18px 22px; }
.demo-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 1px solid #E7DACB; background: #fff; color: #221510; font: 500 13px/1 var(--sans); padding: 8px 12px; border-radius: 999px; cursor: pointer; }
.chip[aria-pressed="true"] { background: #221510; color: #FBF7F2; border-color: #221510; }
.demo-btn { border: 0; cursor: pointer; border-radius: 16px; padding: 14px; font: 600 15px/1 var(--sans); background: #C8461F; color: #fff; }
.demo-btn[aria-disabled="true"] { opacity: .7; cursor: default; } /* aria-disabled, not disabled: keeps keyboard focus on the button during a pick */
.demo-btn-ghost { background: transparent; color: #221510; border: 1px solid #E7DACB; font-size: 13px; }
.demo-counter { text-align: center; color: #6E5C50; }
/* Without script the demo can't run: say so instead of showing dead buttons. */
.demo-nojs { display: none; text-align: center; font-size: 15px; font-weight: 600; color: #6E5C50; }
html:not(.js) .demo-nojs { display: block; }
html:not(.js) .demo-js-only, html:not(.js) .demo-controls, html:not(.js) .tabs, html:not(.js) .hl-toggle { display: none; }

/* ---------- one tap (pinned story) ---------- */
.story-head { margin-bottom: 40px; }
.story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.story-stage { position: sticky; top: 52px; height: calc(100vh - 52px); height: calc(100svh - 52px); display: grid; place-items: center; }
/* The phone grows with the screen's height (up to 440px wide), still fitting below the nav. */
.story-stage .phone { width: min(440px, 100%, calc((100vh - 160px) * .5 + 20px)); width: min(440px, 100%, calc((100svh - 160px) * .5 + 20px)); }
.story-screen { position: absolute; inset: 0; opacity: 0; }
.story-screen.is-on { opacity: 1; }
.story-steps { list-style: none; margin: 0; padding: 0; }
.story-step { min-height: 80vh; min-height: 80svh; display: grid; align-content: center; gap: 16px; }
.story-step p { font-size: 32px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; max-width: 16ch; color: var(--ink-soft); }
.story-step.is-on p { color: var(--ink); }
.story-num { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--band); font-weight: 700; color: var(--cta-hover); }
/* Phones: the stage is a solid band pinned under the nav with a smaller phone; the steps scroll UNDER it (the band is above them) and are read in the space below, so text never slides over the phone. */
@media (max-width: 734px) {
  .story-grid { grid-template-columns: 1fr; gap: 0; }
  .story-stage { height: clamp(200px, 42vh, 340px); height: clamp(200px, 42svh, 340px); z-index: 3; background: var(--paper); }
  .story-stage::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 20px; background: linear-gradient(var(--paper), rgba(0, 0, 0, 0)); pointer-events: none; }
  /* A smaller frame (6px bezel, tighter corners) so a ~120px-wide phone doesn't turn into a capsule; its height is the band's minus 12px above and below. */
  .story-stage .phone { width: calc(clamp(200px, 42vh, 340px) / 2 - 6px); width: calc(clamp(200px, 42svh, 340px) / 2 - 6px); padding: 6px; border-radius: 30px; }
  .story-stage .phone-screen { border-radius: 24px; }
  .story-stage .phone::after { top: 13px; width: 8px; height: 8px; margin-left: -4px; box-shadow: 0 0 0 1.5px #1c1c1c; }
  .story-steps { position: relative; z-index: 1; }
  .story-step { min-height: 44vh; min-height: 44svh; }
  .story-step p { font-size: 24px; }
}

/* ---------- cravings tabs ---------- */
.cravings-grid > .text-col { min-width: 0; }
.tabs { margin-top: 32px; display: inline-flex; flex-wrap: wrap; max-width: 100%; gap: 4px; padding: 4px; border-radius: 999px; background: var(--line); }
.tabs [role="tab"] { border: 0; background: transparent; cursor: pointer; font: 600 15px/1 var(--sans); padding: 10px 16px; border-radius: 999px; color: var(--ink-soft); }
/* The selected tab says so with a 2px ink ring, not only a lighter fill (that fill alone is below 3:1 against the pill). */
.tabs [role="tab"][aria-selected="true"] { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
@media (max-width: 400px) { .tabs { gap: 2px; border-radius: 24px; } .tabs [role="tab"] { font-size: 14px; padding: 10px 9px; } }
.tab-caption { margin-top: 14px; font-size: 15px; }
.tab-screen { position: absolute; inset: 0; opacity: 0; }
.tab-screen.is-on { opacity: 1; }

/* ---------- directions ---------- */
.directions { padding-block: 0; }
/* 100svh pinned, plus scroll travel of 160svh, capped at 1600px so a very tall screen isn't a wall of empty pin. */
.directions-track { height: 260vh; height: calc(100vh + min(160vh, 1600px)); height: calc(100svh + min(160svh, 1600px)); }
.directions-stage { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; align-items: center; }
.phone-nav { width: min(440px, calc((100vh - 160px) * .5 + 20px)); width: min(440px, calc((100svh - 160px) * .5 + 20px)); }
.nav-screen { background: #EFE7DD; container-type: inline-size; } /* mock UI scales with the phone (cqw; px fallbacks for a phone ~300px wide come first) */
.route-map { position: absolute; inset: 0; width: 100%; height: 100%; }
.streets path { fill: none; stroke: #fff; stroke-width: 18; }
.streets .minor { stroke-width: 9; opacity: .8; }
.route-base { fill: none; stroke: rgba(200, 70, 31, .22); stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; }
.route-line { fill: none; stroke: #C8461F; stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.route-dest { fill: #221510; stroke: #fff; stroke-width: 4; }
.route-dot { fill: #2F6FEB; stroke: #fff; stroke-width: 4; }
.turn-banner { position: absolute; z-index: 2; top: 42px; left: 12px; right: 12px; top: 14cqw; left: 4cqw; right: 4cqw; display: flex; gap: 12px; gap: 4cqw; align-items: center; background: #221510; color: #FBF7F2; border-radius: 18px; padding: 14px; padding: 4.6cqw; font-size: 14px; font-size: 4.6cqw; line-height: 1.3; }
.turn-arrow { width: 27px; height: 27px; width: 9cqw; height: 9cqw; flex: none; }
.turn-dist { margin-left: auto; font-weight: 700; white-space: nowrap; }
.eta-bar { position: absolute; z-index: 2; bottom: 15px; left: 12px; right: 12px; bottom: 5cqw; left: 4cqw; right: 4cqw; background: #fff; border-radius: 18px; padding: 14px 15px; padding: 4.6cqw 5cqw; display: flex; gap: 12px; gap: 4cqw; align-items: baseline; font-size: 13px; font-size: 4.3cqw; white-space: nowrap; color: #6E5C50; }
.eta-bar b { font-size: 20px; font-size: 6.6cqw; color: #221510; }
/* Unpinned: below 1069px, under reduced motion and without script the section is one static screen, not a long pin of empty scroll. */
@media (max-width: 1068px) { .directions-track { height: auto; } .directions-stage { position: static; height: auto; padding-block: var(--pad); } }
@media (prefers-reduced-motion: reduce) { .directions-track { height: auto; } .directions-stage { position: static; height: auto; padding-block: var(--pad); } }
html:not(.js) .directions-track { height: auto; }
html:not(.js) .directions-stage { position: static; height: auto; padding-block: var(--pad); }

/* ---------- more to love ---------- */
.more-track { list-style: none; margin: 40px 0 0; padding: 0 calc((100% - var(--content)) / 2) 8px; scroll-padding-inline: calc((100% - var(--content)) / 2); display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; }
.tile { background: var(--paper); border-radius: var(--radius-tile); padding: 32px; }
.more-track .tile { flex: 0 0 300px; min-height: 220px; scroll-snap-align: start; }
.tile h3 { font-size: 28px; letter-spacing: -0.025em; }
.tile p { margin-top: 12px; color: var(--ink-soft); }

/* ---------- plans ---------- */
.plans-grid { margin-top: 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 900px; margin-inline: auto; }
.plan { background: var(--band); min-height: 240px; }
.plan h3 { font-size: 40px; }
.plan-plus h3 { color: var(--cta); }
.plans-cta { margin-top: 40px; }
@media (max-width: 734px) { .plans-grid { grid-template-columns: 1fr; } }

/* ---------- your data ---------- */
.data .lead { font-size: 17px; line-height: 1.5; }
.data-links { margin-top: 28px; display: flex; gap: 28px; flex-wrap: wrap; }
.ledger { background: var(--dark-raised); border-radius: var(--radius-tile); padding: 28px; max-width: 520px; }
.ledger-head { font-weight: 700; font-size: 19px; margin-bottom: 14px; }
.ledger-row { display: grid; grid-template-columns: 12px 1fr; gap: 14px; padding: 14px 0; border-top: 1px solid rgba(251, 247, 242, .08); font-size: 15px; }
.ledger-row b { display: block; }
.ledger-row span span { color: var(--on-dark-soft); }
.swatch { width: 10px; height: 10px; border-radius: 50%; margin-top: 6px; }
.swatch.ok { background: #6FB683; } .swatch.ad { background: #E0AE55; } .swatch.no { background: var(--accent-dark); }
.ledger-foot { margin-top: 10px; font-size: 13px; color: var(--on-dark-soft); }

/* ---------- faq ---------- */
.faq-list { margin-top: 40px; border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { cursor: pointer; list-style: none; padding: 22px 36px 22px 0; font-size: 21px; font-weight: 600; letter-spacing: -0.01em; position: relative; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; content: "+" / ""; position: absolute; right: 4px; top: 18px; font-size: 26px; font-weight: 400; color: var(--cta); }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details p { padding: 0 0 22px; color: var(--ink-soft); max-width: 60ch; }

/* ---------- closing + footer ---------- */
.closing-cta { margin-top: 32px; }
.site-foot { background: var(--band); color: var(--ink-soft); font-size: 12px; line-height: 1.5; padding-block: 48px 32px; }
.footnotes { margin: 0 0 28px; padding-left: 18px; border-bottom: 1px solid var(--line); padding-bottom: 24px; display: grid; gap: 8px; }
.footnotes a { text-decoration: underline; } /* a link inside text must not rely on colour alone */
/* The back arrow is 24px+ to hit: padding grows the box, the negative margin gives the room back, so the line height is unchanged. */
.footnotes li > a:last-child { display: inline-block; padding: 4px 8px; margin: -4px -4px; }
.site-foot a:not(.wordmark) { color: var(--cta-hover); } /* 12px text on band needs the darker ember for AA */
.foot-cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; }
.foot-col { display: grid; gap: 8px; align-content: start; }
.foot-col p { max-width: 42ch; }
.foot-head { font-weight: 600; color: var(--ink); }
.foot-note { margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.site-foot .wordmark { font-size: 17px; color: var(--ink); }
@media (max-width: 734px) { .foot-cols { grid-template-columns: 1fr; } }
/* Reference links: underlined (not colour alone), --cta-hover so they pass on the tinted bands too (dark sections set their own colour), and a 24px+ target from padding that the negative margin hands back. */
sup a { display: inline-block; color: var(--cta-hover); text-decoration: underline; font-size: .7em; padding: 6px 10px; margin: -6px -10px; }
.h-section sup { font-size: .4em; }
/* A heading with a footnote link: the link sits after the <h2>, not inside it, so it isn't part of the heading's name. The h2 is inline, so the number still follows the last word. */
.h-line { font-weight: 700; font-stretch: 86%; letter-spacing: -0.035em; text-wrap: balance; }
.h-line > h2 { display: inline; font: inherit; letter-spacing: inherit; text-wrap: inherit; }
.hero-fine sup a { font-size: 1em; }

/* ---------- motion: everything here moves only without reduced motion ---------- */
@keyframes fade-up { from { opacity: 0; transform: translateY(32px); } }
@keyframes rise { from { opacity: 0; transform: translateY(120px); } }
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * { animation: fade-up 1.2s var(--ease) both; }
  .hero-copy > :nth-child(2) { animation-delay: .08s; }
  .hero-copy > :nth-child(3) { animation-delay: .16s; }
  .hero-copy > :nth-child(4), .hero-copy > :nth-child(5) { animation-delay: .24s; }
  .phone-hero { animation: rise 1.4s .2s var(--ease) both; }

  @supports (animation-timeline: view()) {
    .reveal { animation: fade-up linear both; animation-timeline: view(); animation-range: entry 0% cover 28%; }
  }
  .io .reveal { opacity: 0; transform: translateY(32px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
  .io .reveal.in { opacity: 1; transform: none; }

  .story-screen, .tab-screen { transition: opacity .45s var(--ease); }
  .turn-banner { transition: transform .5s var(--ease), opacity .5s var(--ease); }
}

/* Without motion the pinned story reads as three stacked steps under one static phone showing the result. */
@media (prefers-reduced-motion: reduce) {
  .js .clip-toggle.is-live { display: none; }
  .story-grid { grid-template-columns: 1fr; }
  .story-stage { position: static; height: auto; }
  .story-stage::after { display: none; }
  .story-step { min-height: 0; padding-block: 24px; }
  .story-step p { color: var(--ink); }
}
/* Unpinned on a phone: the full-size frame again (the small bezel is only for the pinned band). */
@media (prefers-reduced-motion: reduce) and (max-width: 734px) { .story-stage .phone { width: min(260px, 100%); padding: 10px; border-radius: 46px; } .story-stage .phone-screen { border-radius: 37px; } .story-stage .phone::after { top: 21px; width: 11px; height: 11px; margin-left: -5.5px; box-shadow: 0 0 0 2px #1c1c1c; } }
/* The same stacked story without script: nothing flips as you scroll, so show the result and every step. */
html:not(.js) .story-grid { grid-template-columns: 1fr; }
html:not(.js) .story-stage { position: static; height: auto; }
html:not(.js) .story-stage::after { display: none; }
@media (max-width: 734px) { html:not(.js) .story-stage .phone { width: min(260px, 100%); padding: 10px; border-radius: 46px; } html:not(.js) .story-stage .phone-screen { border-radius: 37px; } html:not(.js) .story-stage .phone::after { top: 21px; width: 11px; height: 11px; margin-left: -5.5px; box-shadow: 0 0 0 2px #1c1c1c; } }
html:not(.js) .story-step { min-height: 0; padding-block: 24px; }
html:not(.js) .story-step p { color: var(--ink); }
html:not(.js) .story-screen[data-step="0"] { opacity: 0; }
html:not(.js) .story-screen[data-step="2"] { opacity: 1; }

/* ---------- print: plain black on white, nothing pinned, nothing waiting to fade in ---------- */
@media print {
  :root:root:root { --paper: #fff; --band: #fff; --ink: #000; --ink-soft: #333; --line: #999; --cta: #8A2C0E; --cta-hover: #8A2C0E; --accent: #8A2C0E; --accent-dark: #8A2C0E; --serif-warm: #000; --on-dark: #000; --on-dark-soft: #333; --dark: #fff; --dark-raised: #fff; color-scheme: light; }
  body, .paper, .band, .dark { background: #fff; color: #000; }
  .localnav, .skip, .hero-glow, .hero-shade, .clip-toggle, .hl-controls, .demo-controls { display: none; }
  .js .clip-toggle, .js .clip-toggle.is-live { display: none !important; } /* beats the live-clip rule's specificity */
  .reveal, .hero-copy > *, .phone-hero { animation: none; }
  .io .reveal { opacity: 1; transform: none; }
  .hero { margin-top: 0; padding-top: 48px; }
  section { padding-block: 40px; }
  .story-stage, .directions-stage { position: static; height: auto; }
  .story-step { min-height: 0; }
  .directions-track { height: auto; }
  .hl-track, .more-track { flex-wrap: wrap; overflow: visible; }
  .hl-slide, .ledger, .tile { border: 1px solid #999; }
  .dark a:not(.btn), .band a:not(.btn), a { color: #000; }
  .serif, .dark .serif, .paper .serif, .band .serif { color: #000; }
  .phone-hero { margin-bottom: 0; }
  details > :not(summary) { display: block; }
}

/* Where color-mix() exists: the tab pill is a tint of the ink (the plain --line above is its fallback). */
@supports (background: color-mix(in srgb, red 50%, transparent)) {
  .tabs { background: color-mix(in srgb, var(--ink) 7%, transparent); }
}