/* Fonts served from this site (no request to Google): latin subset, Inter is variable (400–600). */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 500; font-display: swap; src: url("../assets/fonts/archivo-500-latin.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../assets/fonts/inter-latin-var.woff2") format("woff2"); }

/* MADRE landing — "il quaderno che si sveglia" (site/_brief/art-direction.md).
   Ivory paper for the method, OLED black only where there is a screen. */

:root {
  color-scheme: light;
  --paper: #F3EEE5;
  --paper-hi: #FBF8F2;
  --paper-lo: #E9E1D5;
  --rule: #DCD4C8;
  --ink: #171914;
  --ink-2: #66665D;
  --ink-3: #8C887E;
  --green: #244533;
  --green-press: #1B3828;
  --green-soft: #DCE4D8;
  --on-green: #FFFFFF;
  --danger: #A64235;
  --terracotta: #B76545;
  --ochre: #C69A4A;

  --oled: #000000;
  --oled-ink: #F3EEE5;
  --oled-ink-2: rgba(243, 238, 229, 0.64);
  --oled-rule: rgba(243, 238, 229, 0.14);
  --oled-dot: rgba(243, 238, 229, 0.06);

  --f-title: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-text: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --track-title: -0.01em;
  --track-eyebrow: 0.16em;
  --track-logo: 0.32em;
  --fs-mega: clamp(64px, 23.4vw, 400px);
  --fs-d1: clamp(40px, 7.4vw, 116px);
  --fs-d2: clamp(30px, 4.6vw, 68px);
  --fs-d3: clamp(22px, 2.4vw, 34px);
  --fs-num: clamp(52px, 9vw, 152px);
  --fs-num-s: clamp(18px, 1.5vw, 22px);
  --fs-lead: clamp(18px, 1.55vw, 22px);
  --fs-body: clamp(16px, 1.1vw, 17px);
  --fs-small: 14px;
  --fs-eyebrow: 11px;

  --sp-section: clamp(112px, 14vw, 208px);
  --sp-act: clamp(140px, 18vw, 260px);
  --sp-head: clamp(40px, 5vw, 80px);
  --sp-block: clamp(24px, 3vw, 40px);

  --r-xs: 4px; --r-sm: 8px; --r-control: 14px; --r-card: 20px; --r-lg: 24px; --r-pill: 999px;
  --shadow-soft: 0 6px 18px rgba(23, 25, 20, 0.06);
  --shadow-object: 0 48px 80px -36px rgba(23, 25, 20, 0.30), 0 14px 28px -14px rgba(23, 25, 20, 0.16);

  --phone-w: clamp(248px, 24vw, 340px);
  --header-h: 64px;

  --cols: 4; --gutter: 16px; --margin: max(16px, env(safe-area-inset-left)); --container: 1344px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-quint: cubic-bezier(0.23, 1, 0.32, 1);
  --dur-1: 160ms; --dur-2: 240ms; --dur-3: 480ms; --dur-4: 720ms; --dur-5: 1200ms;
}
@media (min-width: 600px) { :root { --cols: 8; --gutter: 20px; --margin: 32px; } }
@media (min-width: 1024px) { :root { --cols: 12; --gutter: 24px; --margin: 48px; --fs-eyebrow: 12px; } }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); overflow-x: clip; scroll-padding-top: calc(var(--header-h) + 8px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 var(--fs-body)/1.55 var(--f-text);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
/* Paper grain: one static noise, never animated, never on black. */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1000;
  opacity: 0.035;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 500; }

.wrap { width: min(100% - 2 * var(--margin), var(--container)); margin-inline: auto; }
.bleed { width: 100%; margin: 0; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -100px; z-index: 2000; background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: var(--r-pill); text-decoration: none; }
.skip:focus { top: 12px; }

.t-title { font-family: var(--f-title); font-weight: 500; text-transform: uppercase; letter-spacing: var(--track-title); }
.num { font-variant-numeric: tabular-nums; }
.eyebrow { display: block; font: 500 var(--fs-eyebrow)/1.3 var(--f-text); text-transform: uppercase; letter-spacing: var(--track-eyebrow); color: var(--ink-2); }
.lead { font-size: var(--fs-lead); line-height: 1.45; color: var(--ink-2); max-width: 46ch; }
.note { font-size: var(--fs-small); line-height: 1.45; color: var(--ink-2); max-width: 62ch; }
/* No lone last words in running text. */
p, .lead, .note, dd { text-wrap: pretty; }
.d3 { text-wrap: balance; }
/* Last resort on very narrow screens: a word too long for the line breaks with a hyphen instead of overflowing. */
.d1, .d2, .d3, .hero-title { overflow-wrap: break-word; hyphens: auto; }
/* With JavaScript, titles shrink to fit their longest word instead (fitTitles in main.js). */
.fit-titles :is(.d1, .d2, .d3, .hero-title, .act-title, .manifesto-text, .index-links a, .footer-tag) { overflow-wrap: normal; hyphens: manual; }
.measure { max-width: 52ch; }
.d1 { font-size: var(--fs-d1); line-height: 0.94; max-width: 16ch; text-wrap: balance; }
.d2 { font-size: var(--fs-d2); line-height: 1; max-width: 18ch; text-wrap: balance; }
.d3 { font-size: var(--fs-d3); line-height: 1.04; text-wrap: balance; }
.big-num { font-size: var(--fs-num); line-height: 0.9; display: block; }
.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.theme-oled :focus-visible { outline-color: var(--oled-ink); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; padding: 0 28px; border: 0; border-radius: var(--r-pill);
  background: var(--green); color: var(--on-green); text-decoration: none;
  font: 500 16px/1 var(--f-text); cursor: pointer; white-space: nowrap;
  transition: background var(--dur-1) var(--ease-out);
}
.btn .ic { width: 18px; height: 18px; transition: transform var(--dur-1) var(--ease-out); }
.btn:hover { background: var(--green-press); }
.btn:hover .ic { transform: translateX(3px); }
.btn-lg { height: 56px; }
.btn-sm { height: 40px; padding: 0 18px; font-size: 14px; }
.btn[disabled] { opacity: 0.6; cursor: progress; }
.btn-oled { background: var(--oled-ink); color: var(--oled); align-self: flex-start; }
.btn-oled:hover { background: #fff; }
.btn-oled:hover .ic { transform: translateY(2px); }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
.link { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.link .ic { width: 18px; height: 18px; }
.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; background: transparent; border-radius: var(--r-pill); cursor: pointer; }
.icon-btn.round { width: 48px; height: 48px; border: 1px solid var(--rule); background: var(--paper-hi); transition: background var(--dur-1); }
.icon-btn.round:hover { background: var(--paper-lo); }

/* Segments and chips */
.seg { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.seg button, .chips button {
  height: 44px; padding: 0 16px; border-radius: var(--r-pill); border: 1px solid var(--rule);
  background: transparent; font: 500 14px/1 var(--f-text); cursor: pointer;
  transition: background var(--dur-2) var(--ease-inout), color var(--dur-2) var(--ease-inout), border-color var(--dur-2);
}
.seg button[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: var(--on-green); }

/* Running head */
.running-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  border-bottom: 1px solid var(--rule); padding-bottom: 10px; margin-bottom: var(--sp-head);
  font: 500 var(--fs-eyebrow)/1.3 var(--f-text); text-transform: uppercase; letter-spacing: var(--track-eyebrow); color: var(--ink-2);
}
.theme-oled .running-head { border-color: var(--oled-rule); color: var(--oled-ink-2); }

/* Data rows */
.rows { margin: 0; }
.rows > div { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.rows dt { font: 500 var(--fs-eyebrow)/1.3 var(--f-text); text-transform: uppercase; letter-spacing: var(--track-eyebrow); color: var(--ink-2); flex: none; max-width: 50%; }
.rows dd { margin: 0; font-weight: 500; text-align: right; }
.rows-dark > div { border-color: var(--oled-rule); }
.rows-dark dt { color: var(--oled-ink-2); }

/* Phone frame sizing: screens.css draws the frame, the site sets the width. */
.ph { --ph-w: var(--phone-w); box-shadow: var(--shadow-object); }

/* ─── Header ─────────────────────────────────────────────────────────────── */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 100; height: var(--header-h);
  background: var(--paper); color: var(--ink);
  transition: background var(--dur-2) var(--ease-inout), color var(--dur-2) var(--ease-inout), box-shadow var(--dur-2);
}
.site-header.is-scrolled { box-shadow: 0 1px 0 var(--rule); }
.site-header.is-dark { background: var(--oled); color: var(--oled-ink); box-shadow: 0 1px 0 var(--oled-rule); }
.header-row { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.hg-logo { display: block; fill: currentColor; }
.logotype { display: inline-flex; align-items: center; min-height: 44px; color: var(--green); text-decoration: none; }
.logotype .hg-logo { height: 24px; width: calc(24px * 1099 / 379); }
.site-header.is-dark .logotype { color: var(--oled-ink); }
.acts { display: none; gap: 10px; align-items: center; font: 500 var(--fs-eyebrow)/1 var(--f-text); text-transform: uppercase; letter-spacing: var(--track-eyebrow); }
.acts a { text-decoration: none; color: var(--ink-2); padding: 16px 2px; border-bottom: 1px solid transparent; transition: color var(--dur-2), border-color var(--dur-2); }
.acts span { color: var(--ink-3); }
.acts a.is-active { color: var(--ink); border-color: var(--green); }
.site-header.is-dark .acts a { color: var(--oled-ink-2); }
.site-header.is-dark .acts a.is-active { color: var(--oled-ink); border-color: var(--oled-ink); }
.site-header.is-dark .acts span { color: var(--oled-rule); }
.site-header.is-dark .btn { background: var(--oled-ink); color: var(--oled); }
.site-header.is-dark :focus-visible { outline-color: var(--oled-ink); }
.header-actions { display: flex; align-items: center; gap: 4px; }
.lang-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; font-size: 14px; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 1024px) { .acts { display: flex; } .menu-btn { display: none; } }
@media (max-width: 380px) { .header-actions .btn-sm { padding: 0 14px; font-size: 13px; } }

.index-sheet { position: fixed; inset: 0; z-index: 200; background: var(--paper); overflow-y: auto; }
.index-sheet[hidden] { display: none; }
.index-head { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; }
.index-links { display: flex; flex-direction: column; padding: 24px 0 48px; }
.index-links a { text-decoration: none; padding: 18px 0; border-bottom: 1px solid var(--rule); font: 500 var(--fs-d2)/1 var(--f-title); text-transform: uppercase; letter-spacing: var(--track-title); }
.index-links .eyebrow { margin-bottom: 8px; }
.index-cta { color: var(--green); }

/* ─── Hero ───────────────────────────────────────────────────────────────── */
/* One headline, one stage, one action. The stage: the phone with the live
   Home, and in front of it the watch whose eyes (real SVG) follow the pointer. */
.hero { position: relative; z-index: 3; padding-top: calc(var(--header-h) + clamp(24px, 4vw, 40px)); overflow-x: clip; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 40px; align-items: start; }
.hero-copy { display: flex; flex-direction: column; gap: 22px; position: relative; z-index: 2; }
.hero-title { font-size: clamp(44px, 4.7vw, 84px); line-height: 0.94; margin: 0; }
.hero-title .line { display: block; overflow: hidden; padding-bottom: 0.04em; margin-bottom: -0.04em; }
.hero-title .line > span { display: inline-block; }
.hero-title .line-brand { color: var(--green); }
.hero-lead { max-width: 40ch; }
.hero-cta { margin-top: 6px; }

.hero-stage { position: relative; width: 100%; margin-inline: auto; height: min(118vw, 640px); }
.stage-plate { position: absolute; left: 50%; top: 10%; width: min(110vw, 760px); aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: var(--paper-lo); }
.hero-phone { position: absolute; left: 4%; top: 0; bottom: 0; width: min(58vw, 420px); overflow: hidden; }
.hero-phone .ph { --ph-w: 300px; } /* set to the real width by main.js */
.hero-watch {
  position: absolute; right: 2%; top: 30%; width: min(38vw, 250px); padding: 0; border: 0; background: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent; z-index: 20;
}
.hero-watch-fly { display: block; position: relative; transform-origin: 50% 60%; will-change: transform; }
.hero-watch img, .hero-frame-canvas { display: block; width: 100%; height: auto; }
.hero-screen { transition: opacity 120ms linear; }
.hero-screen.is-away { opacity: 0; }
.hero-screen { position: absolute; left: 0; top: 0; width: 331px; height: 405px; transform-origin: 0 0; display: grid; place-items: center; pointer-events: none; }
.hero-eyes { width: 96%; display: block; }
.hero-eyes .eyes-svg { width: 100%; height: auto; overflow: visible; }

.callout { position: absolute; z-index: 4; display: flex; flex-direction: column; gap: 4px; padding: 10px 14px; background: var(--paper-hi); border-radius: 14px; box-shadow: var(--shadow-soft); font-size: 14px; line-height: 1.3; font-weight: 500; white-space: nowrap; }
.callout b { font-weight: 600; }
.callout .eyebrow { font-size: 10px; }
.callout-phone { left: 0; top: 40%; }
/* Rides with the watch, just under it, in front of everything. */
.callout-watch { --cx: 50%; top: calc(100% + 6px); right: 50%; transform: translateX(var(--cx)); text-align: left; transition: opacity 200ms linear; }
@media (max-width: 599px) { .callout-watch { --cx: 0; right: 0; } }
.callout-watch span:last-child::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #2EE6B0; margin-right: 8px; box-shadow: 0 0 0 3px rgba(46, 230, 176, 0.18); }

.hero-strip { position: relative; z-index: 6; background: var(--paper); margin: clamp(32px, 5vw, 64px) 0 0; display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--rule); }
.hero-strip > div { padding: 16px 0 18px; display: flex; flex-direction: column; gap: 6px; border-bottom: 1px solid var(--rule); }
.hero-strip > div:nth-child(odd) { padding-right: 12px; }
.hero-strip dt { font: 500 var(--fs-eyebrow)/1.3 var(--f-text); text-transform: uppercase; letter-spacing: var(--track-eyebrow); color: var(--ink-2); }
.hero-strip dd { margin: 0; font-size: clamp(24px, 2.6vw, 40px); line-height: 1; text-transform: none; }

@media (max-width: 599px) {
  .cta-row .btn { width: 100%; }
  .callout { font-size: 12px; padding: 8px 10px; }
  .callout-phone { top: 52%; }
}
@media (min-width: 1024px) {
  .hero { min-height: max(100svh, 760px); display: flex; flex-direction: column; }
  .hero-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); flex: 1; }
  .hero-copy { grid-column: 1 / 7; align-self: center; }
  .hero-stage { grid-column: 7 / 13; height: calc(max(100svh, 760px) - var(--header-h) - 190px); align-self: start; margin-top: 8px; }
  .hero-phone { left: 6%; width: min(30vw, 435px); }
  .hero-watch { right: 6%; top: 30%; width: min(17vw, 250px); }
  .callout-phone { left: -6%; top: 46%; }
  .stage-plate { left: 46%; top: 6%; width: min(46vw, 700px); }
  .hero-strip { grid-template-columns: repeat(4, 1fr); margin-top: 24px; }
  .hero-strip > div { border-bottom: 0; padding-right: 0; }
  .hero-strip > div + div { border-left: 1px solid var(--rule); padding-left: 24px; }
}

/* Entrance: lines rise from their mask, the phone rises, the watch drops in and wakes. */
.js .hero-title .line > span, .js .hero-eyebrow, .js .hero-lead, .js .hero-cta { opacity: 0; transform: translateY(105%); }
.js .hero-eyebrow, .js .hero-lead, .js .hero-cta { transform: translateY(16px); }
.js .hero-phone, .js .stage-plate, .js .callout { opacity: 0; }
.js .hero-phone { transform: translateY(40px); }
.js .stage-plate { transform: scale(0.92); }
.js .hero-watch { opacity: 0; transform: translateY(-40px) rotate(-6deg); }
.js .callout { transform: translateY(8px); }
.hero.is-in .hero-title .line > span { opacity: 1; transform: none; transition: transform var(--dur-4) var(--ease-out), opacity var(--dur-3) var(--ease-out); }
.hero.is-in .hero-title .line:nth-child(2) > span { transition-delay: 70ms; }
.hero.is-in .hero-title .line:nth-child(3) > span { transition-delay: 140ms; }
.hero.is-in .hero-eyebrow { opacity: 1; transform: none; transition: all var(--dur-3) var(--ease-out); }
.hero.is-in .hero-lead { opacity: 1; transform: none; transition: all var(--dur-4) var(--ease-out) 280ms; }
.hero.is-in .hero-cta { opacity: 1; transform: none; transition: all var(--dur-4) var(--ease-out) 360ms; }
.hero.is-in .stage-plate { opacity: 1; transform: none; transition: all var(--dur-5) var(--ease-out) 120ms; }
.hero.is-in .hero-phone { opacity: 1; transform: none; transition: all var(--dur-4) var(--ease-out) 240ms; }
.hero.is-in .hero-watch { opacity: 1; transform: none; transition: opacity var(--dur-3) var(--ease-out) 520ms, transform 900ms cubic-bezier(0.34, 1.56, 0.64, 1) 520ms; }
.hero.is-in .callout { opacity: 1; transform: none; transition: all var(--dur-3) var(--ease-out) 1300ms; }
.hero.is-in .callout-watch { transform: translateX(var(--cx)); transition-delay: 1500ms; }
.js .callout-watch { transform: translateX(var(--cx)) translateY(8px); }

/* ─── Sections ───────────────────────────────────────────────────────────── */
.section { padding-block: var(--sp-section) 0; }
.section:last-of-type { padding-bottom: var(--sp-section); }
.act-open { padding-top: var(--sp-act); display: flex; flex-direction: column; gap: 16px; }
.act-title { font-size: var(--fs-d1); line-height: 0.94; display: block; }
.framed { margin: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--paper-lo); }
.framed img { width: 100%; height: 100%; object-fit: cover; }

/* Manifesto */
.manifesto-text { font-size: var(--fs-d2); line-height: 1.04; max-width: 24ch; margin: 0 auto var(--sp-head); text-wrap: balance; }
.manifesto-text .w { transition: color var(--dur-2) linear; }
.js .manifesto-text .w { color: var(--ink-3); }
.js .manifesto-text .w.on { color: var(--ink); }
.manifesto-photo { background: var(--paper-lo); }
.manifesto-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 45%; }
@media (min-width: 1024px) { .manifesto-photo img { aspect-ratio: 21 / 9; } }
.trio { list-style: none; margin: var(--sp-block) 0 0; padding: 0; display: grid; gap: 0; }
.trio li { padding: 20px 0; border-bottom: 1px solid var(--rule); display: flex; flex-direction: column; gap: 8px; }
.trio p { max-width: 40ch; }
@media (min-width: 1024px) {
  .trio { grid-template-columns: repeat(3, 1fr); }
  .trio li { border-bottom: 0; border-left: 1px solid var(--rule); padding: 8px 24px 0; }
  .trio li:first-child { border-left: 0; padding-left: 0; }
}

/* Recipes */
.recipes .d1 { margin-bottom: 24px; }
.recipes-grid { display: grid; gap: 56px; margin-top: var(--sp-head); }
.recipes-visual { position: relative; display: flex; justify-content: center; order: 2; }
.recipes-photo { display: none; }
.dose-demo { order: 1; display: flex; flex-direction: column; gap: 20px; }
.stepper { display: flex; align-items: center; gap: 16px; }
.stepper-value { font-size: var(--fs-d3); min-width: 7ch; text-align: center; }
.dose-table { width: 100%; border-collapse: collapse; }
.dose-table th, .dose-table td { white-space: nowrap; padding: 14px 0; border-bottom: 1px solid var(--rule); text-align: left; font-weight: 400; }
.dose-table thead th { font: 500 var(--fs-eyebrow)/1.3 var(--f-text); text-transform: uppercase; letter-spacing: var(--track-eyebrow); color: var(--ink-2); padding-top: 0; }
.dose-table td:nth-child(2) { color: var(--ink-2); text-align: right; padding-right: 24px; width: 6ch; }
.dose-table td:last-child, .dose-table thead th:last-child { text-align: right; }
.dose-table thead th:nth-child(2) { text-align: right; padding-right: 24px; }
.dose-table tbody th { font-weight: 500; }
.grams { font: 500 var(--fs-num-s)/1.1 var(--f-title); }
.dose-total { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; }
@media (min-width: 1024px) {
  .recipes-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
  .recipes-visual { grid-column: 1 / 6; order: 0; justify-content: flex-start; padding: 64px 0 0 64px; }
  .recipes-photo { display: block; position: absolute; left: 0; top: 0; width: 62%; aspect-ratio: 4 / 5; }
  .recipes-photo img { object-position: 60% 50%; }
  .recipes-visual .ph { position: relative; margin-left: auto; margin-right: 8%; }
  .dose-demo { grid-column: 7 / 13; order: 0; }
}
.parts { margin-top: var(--sp-section); display: grid; gap: 32px; }
.parts-head { display: flex; flex-direction: column; gap: 14px; }
.parts-table { display: grid; gap: 32px; }
.part .eyebrow { padding-bottom: 10px; border-bottom: 1px solid var(--ink); color: var(--ink); }
.part dd span { color: var(--ink-2); font-weight: 400; margin-right: 18px; display: inline-block; min-width: 4ch; text-align: right; }
.part .rows dt { text-transform: none; letter-spacing: 0; font: 400 var(--fs-body)/1.4 var(--f-text); color: var(--ink); max-width: 60%; }
@media (min-width: 1024px) {
  .parts { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .parts-head { grid-column: 1 / 6; }
  .parts-table { grid-column: 7 / 13; grid-template-columns: 1fr 1fr; gap: var(--gutter); }
}

/* Digit roll */
.roll { display: inline-flex; align-items: flex-start; overflow: hidden; height: 1.1em; line-height: 1.1em; vertical-align: bottom; }
.roll-col { display: inline-flex; flex: none; flex-direction: column; transition: transform var(--dur-2) var(--ease-out); }
.roll-col > span { height: 1.1em; }
.big-num .roll, .big-num .roll-col > span { height: 0.92em; line-height: 0.92em; }

/* Pans */
.pans-grid { display: grid; gap: 40px; }
.pans-photo { aspect-ratio: 4 / 3; order: 2; }
.pans-copy { display: flex; flex-direction: column; gap: 20px; }
.pans-copy .running-head { margin-bottom: 16px; }
.pan-demo { display: flex; flex-direction: column; gap: 20px; margin-top: 12px; }
.pan-wire { width: 100%; max-width: 480px; height: auto; overflow: visible; }
.pw-floor { fill: none; stroke: var(--ink); stroke-opacity: 0.35; stroke-width: 1.1; stroke-linejoin: round; }
.pw-walls { fill: none; stroke: var(--ink); stroke-width: 1.35; stroke-linecap: round; }
.pw-rim { fill: none; stroke: var(--ink); stroke-width: 1.55; stroke-linejoin: round; }
.pw-label { font: 500 13px var(--f-text); fill: var(--ink); fill-opacity: 0.85; font-variant-numeric: tabular-nums; }
.pan-fields { display: flex; gap: 12px; flex-wrap: wrap; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field[hidden] { display: none; }
.field-box { display: flex; align-items: center; gap: 6px; height: 52px; padding: 0 14px; background: var(--paper-hi); border: 1px solid var(--rule); border-radius: var(--r-control); }
.field-box:focus-within { border-color: var(--ink); }
.field-box input { width: 5ch; border: 0; background: transparent; font: 500 18px var(--f-text); font-variant-numeric: tabular-nums; color: var(--ink); outline: none; -moz-appearance: textfield; }
.field-box input::-webkit-inner-spin-button { -webkit-appearance: none; }
.field-box span { color: var(--ink-2); font-size: 14px; }
.pan-result { display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 1024px) {
  .pans-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; }
  .pans-photo { grid-column: 1 / 7; aspect-ratio: 1; order: 0; }
  .pans-copy { grid-column: 8 / 13; }
}

/* Import */
.import .d2 { margin-bottom: 20px; }
.import-grid { display: grid; gap: 32px; margin-top: var(--sp-head); justify-items: center; }
.message { width: 100%; max-width: 440px; background: var(--paper-hi); border-radius: var(--r-card); padding: 20px 22px; box-shadow: var(--shadow-soft); }
.message-meta { margin-bottom: 12px; }
.message-body { margin: 0; font: 400 15px/1.5 var(--f-text); white-space: normal; color: var(--ink); }
.message-body span { display: block; min-height: 1.5em; white-space: pre-wrap; border-radius: 4px; padding: 0 6px; margin: 0 -6px; transition: background var(--dur-2) var(--ease-out); }
.message-body span.hit { background: var(--green-soft); }
.import-arrow { color: var(--ink-2); transform: rotate(90deg); }
.import-arrow .ic { width: 28px; height: 28px; }
.facts-inline { list-style: none; padding: 0; margin: var(--sp-head) 0 0; display: grid; gap: 0; }
.facts-inline li { padding: 16px 0; border-top: 1px solid var(--rule); color: var(--ink-2); }
.facts-inline strong { color: var(--ink); font-weight: 500; }
@media (min-width: 1024px) {
  .import-grid { grid-template-columns: 5fr 2fr 5fr; align-items: center; }
  .message { justify-self: end; }
  .import-arrow { transform: none; }
  .import-phone { justify-self: start; }
  .facts-inline { grid-template-columns: repeat(3, 1fr); column-gap: var(--gutter); }
}

/* Act band (II) */
.act-band { position: relative; margin-top: var(--sp-act); background: var(--paper-lo); }
.act-band img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.act-band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.6) 100%); }
.act-band-copy { position: absolute; left: 0; right: 0; bottom: clamp(32px, 6vw, 80px); z-index: 1; display: flex; flex-direction: column; gap: 14px; color: var(--oled-ink); }
.act-band-copy .eyebrow, .act-band-copy .lead { color: var(--oled-ink-2); }
@media (min-width: 1024px) { .act-band img { aspect-ratio: 16 / 9; max-height: 92vh; } }

/* ─── Day (pinned on desktop) ────────────────────────────────────────────── */
.day { position: relative; padding-top: var(--sp-section); }
.day-grid { display: grid; gap: 0; }
.day-step { display: flex; flex-direction: column; gap: 20px; padding-bottom: var(--sp-section); }
.day-step .running-head { margin-bottom: 8px; }
.day-step .rows { max-width: 440px; }
.day-phone-m { align-self: center; margin-top: 24px; }
.day-stage, .day-dots { display: none; }
.plan-ctl { display: flex; flex-direction: column; gap: 12px; }
.plan-ctl .stepper-value { font-size: clamp(44px, 5.4vw, 88px); line-height: 1; min-width: 5ch; }
.ruler { grid-row: 2; padding-bottom: var(--sp-section); }
.ruler-title { margin-bottom: 16px; }
.ruler-track { list-style: none; margin: 0; padding: 0; position: relative; }
.ruler-track li { display: grid; grid-template-columns: 8px 1fr auto; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 15px; }
.ruler-track li::before { content: ""; width: 8px; height: 28px; border-radius: 2px; background: var(--rule); }
.ruler-track li.done::before { background: var(--ink); }
.ruler-track li.now::before { background: var(--green); }
.ruler-track .t { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.ruler-track .folds { grid-column: 2 / 4; display: flex; gap: 6px; flex-wrap: wrap; margin-top: -2px; }
.ruler-track .folds span { font-size: 12px; padding: 2px 8px; border-radius: var(--r-pill); border: 1px solid var(--rule); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.ruler-track .folds span.on { border-color: var(--green); background: var(--green); color: var(--on-green); }
.notif, .bubble { display: none; }

@media (min-width: 1024px) {
  .day.is-pinned { height: 420vh; padding-top: 0; }
  .day.is-pinned .day-scene { position: sticky; top: var(--header-h); height: calc(100svh - var(--header-h)); display: flex; flex-direction: column; justify-content: center; }
  .day.is-pinned .day-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; }
  .day.is-pinned .day-texts { grid-column: 1 / 5; position: relative; min-height: 70vh; }
  .day.is-pinned .day-step { position: absolute; inset: 0; justify-content: center; padding: 0; opacity: 0; transform: translateY(16px); transition: opacity var(--dur-3) var(--ease-inout), transform var(--dur-3) var(--ease-inout); pointer-events: none; }
  .day.is-pinned .day-step.is-active { opacity: 1; transform: none; pointer-events: auto; transition-delay: 160ms; }
  .day.is-pinned .day-step:not(.is-active) { transition-duration: 140ms; }
  .day-phone > .ph.is-active { transition-delay: 160ms; }
  .day-phone > .ph:not(.is-active) { transition-duration: 140ms; }
  .day.is-pinned .day-phone-m { display: none; }
  .day.is-pinned .day-stage { display: flex; grid-column: 5 / 10; justify-content: center; }
  /* The phone fits the height left under the header too, so the scene is never cut on a short window. */
  .day-phone { --day-ph: min(var(--phone-w), calc((100svh - var(--header-h) - 96px) * 9 / 19.5)); position: relative; width: var(--day-ph); aspect-ratio: 9 / 19.5; }
  .day-phone > .ph { --ph-w: var(--day-ph); }
  .day.is-pinned .day-step .d2 { font-size: min(var(--fs-d2), 9.5svh); }
  .day.is-pinned .day-step .lead { font-size: min(var(--fs-lead), 2.6svh); }
  .day.is-pinned .plan-ctl .stepper-value { font-size: min(clamp(44px, 5.4vw, 88px), 9svh); }
  .day.is-pinned .day-step { gap: min(20px, 2svh); }
  .day-phone > .ph { position: absolute; inset: 0; opacity: 0; transition: opacity var(--dur-3) var(--ease-inout); }
  .day-phone > .ph.is-active { opacity: 1; }
  .day.is-pinned .ruler { grid-column: 10 / 13; grid-row: auto; padding-bottom: 0; }
  .day.is-pinned .day-dots { display: flex; gap: 8px; position: absolute; left: 0; right: 0; bottom: 28px; }
  .day-dots button { width: 24px; height: 2px; padding: 0; border: 0; background: var(--rule); cursor: pointer; }
  .day-dots button.on { background: var(--green); }
  .notif { display: flex; position: absolute; left: 6%; right: 6%; top: 5%; z-index: 3; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 16px; background: #fff; box-shadow: 0 10px 30px rgba(23,25,20,.18); font-size: 13px; line-height: 1.35; opacity: 0; transform: translateY(-16px); transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); }
  .notif.notif-2 { top: calc(5% + 76px); }
  .notif strong { display: block; font-weight: 600; }
  .notif span { color: var(--ink-2); }
  .notif .ic { color: var(--green); margin-top: 2px; width: 18px; height: 18px; }
  .notif.on { opacity: 1; transform: none; }
  .bubble { display: flex; position: absolute; z-index: 3; gap: 10px; align-items: center; padding: 12px 18px; border-radius: 20px; opacity: 0; transform: translateY(12px); transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); }
  .bubble.on { opacity: 1; transform: none; }
  .bubble-said { left: -24%; top: -7%; background: var(--ink); color: var(--paper); font-size: clamp(18px, 1.6vw, 24px); box-shadow: var(--shadow-soft); }
  .bubble-said .ic { width: 22px; height: 22px; }
  .bubble-answer { right: -30%; bottom: 12%; max-width: 240px; background: var(--paper-hi); color: var(--ink-2); box-shadow: var(--shadow-soft); font-size: 15px; line-height: 1.4; }
}

/* Journal */
.journal .d1 { margin-bottom: var(--sp-head); }
.journal-grid { display: grid; gap: 40px; }
.journal-photo { aspect-ratio: 4 / 5; }
.page { display: flex; flex-direction: column; gap: 18px; }
.page-intro { color: var(--ink-2); }
.page-block { display: flex; flex-direction: column; gap: 6px; }
.page-next { display: flex; gap: 14px; padding: 18px 20px; background: var(--paper-hi); border-radius: var(--r-card); }
.page-next .ic { width: 22px; height: 22px; color: var(--green); margin-top: 2px; }
.page-next .eyebrow { color: var(--green); margin-bottom: 4px; }
.journal-phone { display: flex; justify-content: center; }
.journal-phone .ph { --ph-w: calc(var(--phone-w) * 0.86); }
@media (min-width: 1024px) {
  .journal-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
  .journal-photo { grid-column: 1 / 5; position: sticky; top: calc(var(--header-h) + 24px); }
  .page { grid-column: 6 / 10; }
  .journal-phone { grid-column: 10 / 13; justify-content: flex-end; margin-top: 64px; }
  .journal-phone .ph { --ph-w: min(100%, 280px); }
}
.js .stagger > div { opacity: 0; transform: translateY(12px); }
.stagger.is-in > div { opacity: 1; transform: none; transition: opacity var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-out); }
.stagger.is-in > div:nth-child(2) { transition-delay: 60ms; }
.stagger.is-in > div:nth-child(3) { transition-delay: 120ms; }
.stagger.is-in > div:nth-child(4) { transition-delay: 180ms; }
.stagger.is-in > div:nth-child(5) { transition-delay: 240ms; }

/* Pantry */
.pantry .d1 { margin-bottom: 24px; }
.pantry-steps { list-style: none; margin: var(--sp-head) 0 0; padding: 0; display: grid; }
.pantry-steps li { display: flex; flex-direction: column; gap: 14px; padding: 28px 0; border-top: 1px solid var(--rule); }
.barcode { position: relative; width: 190px; padding: 10px; background: var(--paper-hi); border-radius: var(--r-xs); overflow: hidden; }
.barcode-svg { display: block; width: 100%; height: 70px; }
.barcode-svg rect { fill: var(--ink); }
.scanline { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--green); box-shadow: 0 0 0 1px rgba(36,69,51,.15); opacity: 0; }
.pantry-steps.is-in .scanline { animation: scan var(--dur-5) var(--ease-inout) 1 forwards; }
@keyframes scan { 0% { opacity: 1; transform: translateY(6px); } 90% { opacity: 1; } 100% { opacity: 0; transform: translateY(86px); } }
.barcode-digits { font-size: 13px; letter-spacing: 0.12em; color: var(--ink-2); margin-top: -6px; }
.pantry-label { font-weight: 500; }
.pantry-steps .big-num { font-size: clamp(44px, 5.2vw, 88px); white-space: nowrap; }
.tag { display: inline-block; padding: 2px 8px; border-radius: var(--r-xs); background: var(--paper-lo); font-size: 12px; font-weight: 500; color: var(--ink); }
.stock { position: relative; height: 4px; border-radius: var(--r-pill); background: var(--paper-lo); max-width: 280px; }
.stock-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; border-radius: inherit; background: var(--green); transform-origin: left; transition: transform var(--dur-5) var(--ease-inout) 300ms; }
.stock-mark { position: absolute; top: -5px; width: 1px; height: 14px; background: var(--ink); left: 25%; }
.pantry-steps.is-in .stock-fill { transform: scaleX(0.4928); }
.pantry-grid { display: grid; gap: 40px; margin-top: var(--sp-head); justify-items: center; }
.pantry-photo { aspect-ratio: 4 / 5; width: 100%; }
@media (min-width: 1024px) {
  .pantry-steps { grid-template-columns: repeat(3, 1fr); }
  .pantry-steps li { border-top: 0; border-left: 1px solid var(--rule); padding: 0 24px; }
  .pantry-steps li:first-child { border-left: 0; padding-left: 0; }
  .pantry-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; }
  .pantry-grid .ph { grid-column: 1 / -1; justify-self: center; }
}
.bridge { position: relative; margin-top: var(--sp-section); background: #000; }
.bridge img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.bridge::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60%; background: linear-gradient(180deg, rgba(0,0,0,0), #000); }
@media (min-width: 1024px) { .bridge img { aspect-ratio: 16 / 9; } }

/* ─── OLED: starter ──────────────────────────────────────────────────────── */
.theme-oled {
  color-scheme: dark; background-color: var(--oled); color: var(--oled-ink);
  background-image: radial-gradient(var(--oled-dot) 1px, transparent 1.2px);
  background-size: 12px 12px;
}
.theme-oled .eyebrow, .theme-oled .lead, .theme-oled .note { color: var(--oled-ink-2); }
.starter { padding: clamp(40px, 6vw, 96px) 0 var(--sp-section); }
.act-open-dark { padding-top: 0; margin-bottom: var(--sp-section); }
.starter .d2 { margin-bottom: 20px; }
.big-eyes { display: flex; flex-direction: column; align-items: center; gap: 20px; margin: var(--sp-head) auto 0; width: min(92vw, 820px); }
.eyes-host { display: block; width: 100%; aspect-ratio: 240 / 180; padding: 0; border: 0; background: transparent; cursor: pointer; border-radius: 24px; -webkit-tap-highlight-color: transparent; }
.eyes-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.pet-line { font: 500 var(--fs-lead)/1.4 var(--f-text); color: var(--oled-ink); min-height: 1.4em; text-align: center; }
.hours { display: grid; gap: 20px; margin-top: var(--sp-head); padding: 28px 0; border-top: 1px solid var(--oled-rule); border-bottom: 1px solid var(--oled-rule); }
.hours-head { display: flex; justify-content: space-between; align-items: baseline; }
.hours-val { font-size: var(--fs-d3); }
.hours-range-wrap { position: relative; padding-bottom: 26px; }
.hours input[type=range] { width: 100%; height: 44px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.hours input[type=range]::-webkit-slider-runnable-track { height: 2px; background: var(--oled-rule); }
.hours input[type=range]::-moz-range-track { height: 2px; background: var(--oled-rule); }
.hours input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -13px; border-radius: 50%; background: var(--eye, #2EE6B0); border: 3px solid #000; box-shadow: 0 0 0 1px var(--oled-ink-2); transition: background var(--dur-2); }
.hours input[type=range]::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--eye, #2EE6B0); border: 3px solid #000; }
.ticks { position: absolute; left: 14px; right: 14px; bottom: 0; height: 20px; }
.ticks span { position: absolute; left: calc(var(--at) / 240 * 100%); transform: translateX(-50%); font-size: 11px; color: var(--oled-ink-2); font-variant-numeric: tabular-nums; }
.ticks span::before { content: ""; position: absolute; left: 50%; top: -16px; width: 1px; height: 8px; background: var(--oled-rule); }
@media (max-width: 599px) { .ticks span:nth-child(3) { display: none; } }
.hours-state { display: grid; gap: 8px; }
.state-name { font-size: var(--fs-d2); line-height: 1; color: var(--eye, #2EE6B0); transition: color var(--dur-2); }
.state-status { color: var(--oled-ink-2); }
.satiety { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.blocks { display: inline-flex; gap: 4px; }
.blocks i { width: 22px; height: 10px; border-radius: 2px; background: var(--oled-rule); transition: background var(--dur-2); }
.blocks i.on { background: var(--oled-ink); }
@media (min-width: 1024px) {
  .hours { grid-template-columns: 1fr 1fr; column-gap: 64px; align-items: center; }
  .hours-head, .hours-range-wrap { grid-column: 1; }
  .hours-state { grid-column: 2; grid-row: 1 / 3; }
}
.starter-facts { display: grid; gap: 0; margin-top: var(--sp-head); }
.starter-facts > div { padding: 24px 0; border-bottom: 1px solid var(--oled-rule); display: flex; flex-direction: column; gap: 10px; }
.starter-facts p { color: var(--oled-ink-2); max-width: 36ch; }
.starter-facts strong { color: var(--oled-ink); font-weight: 500; }
.starter-facts .big-num { font-size: clamp(44px, 6vw, 96px); }
.starter-phone { display: flex; flex-direction: column; align-items: center; gap: 20px; margin-top: var(--sp-section); text-align: center; }
.starter-phone .note { max-width: 40ch; }
.ph-dark { box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 40px 80px -30px rgba(0,0,0,.8); }
@media (min-width: 1024px) {
  .starter-facts { grid-template-columns: repeat(3, 1fr); column-gap: var(--gutter); }
  .starter-facts > div { border-bottom: 0; border-left: 1px solid var(--oled-rule); padding: 0 24px; }
  .starter-facts > div:first-child { border-left: 0; padding-left: 0; }
}

/* ─── OLED: watch ────────────────────────────────────────────────────────── */
.watch { position: relative; background-image: none; }
.watch-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; z-index: 0; }
.watch-canvas { position: absolute; inset: 0 0 40% 0; }
.watch-canvas canvas { display: block; width: 100% !important; height: 100% !important; touch-action: pan-y; }
.watch-poster { position: absolute; inset: 0; display: grid; place-items: center; transition: opacity var(--dur-3) var(--ease-out); }
.watch-poster.is-hidden { opacity: 0; pointer-events: none; }
.poster-case { width: min(46vw, 260px); aspect-ratio: 46.3 / 55.1; border-radius: 26% / 22%; background: var(--tpu, #C8372D); display: grid; place-items: center; box-shadow: 0 40px 80px -30px rgba(200,55,45,.25); transition: background var(--dur-2); }
.poster-screen { width: 80%; aspect-ratio: 42 / 50.8; border-radius: 22% / 18%; background: #000; display: grid; place-items: center; padding: 8%; }
.poster-screen .eyes-svg { width: 100%; height: auto; }
.drag-hint { position: absolute; left: 50%; bottom: 36%; transform: translateX(-50%); display: none; align-items: center; gap: 8px; color: var(--oled-ink-2); opacity: 0; transition: opacity var(--dur-3); }
.drag-hint .ic { width: 16px; height: 16px; }
.watch.is-config .drag-hint { opacity: 1; }
@media (min-width: 1024px) { .watch.has-3d .drag-hint { display: inline-flex; } }
.watch-panels { position: relative; z-index: 1; margin-top: -100svh; pointer-events: none; }
.watch-panel { min-height: 100svh; display: flex; align-items: flex-end; padding-bottom: 6svh; }
.watch-panel .wrap { width: min(100% - 2 * var(--margin), var(--container)); }
.panel-box { pointer-events: auto; max-width: 520px; display: flex; flex-direction: column; gap: 18px; background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.92) 24px); padding-top: 24px; }
.panel-box .running-head { margin-bottom: 8px; }
.panel-box p { color: var(--oled-ink-2); }
.panel-intro .d1 { max-width: 18ch; font-size: clamp(40px, 5.4vw, 88px); }
.panel-intro .panel-box { max-width: min(100%, 760px); }
.panel-config { min-height: 120svh; }
.config-line { color: var(--oled-ink); min-height: 3em; }
.config-label { margin-top: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button { display: inline-flex; align-items: center; gap: 8px; border-color: var(--oled-rule); color: var(--oled-ink); }
.chips button i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px rgba(255,255,255,.2); }
.chips button[aria-pressed="true"] { background: var(--oled-ink); color: var(--oled); border-color: var(--oled-ink); }
@media (max-width: 599px) {
  .chips-mascot, .chips-expr { flex-wrap: nowrap; overflow-x: auto; margin-right: calc(-1 * var(--margin)); padding-right: var(--margin); scrollbar-width: none; }
  .chips-mascot button, .chips-expr button { flex: none; }
}
@media (min-width: 1024px) {
  .watch-canvas { inset: 0 0 0 30%; }
  .watch-panel { align-items: center; padding-bottom: 0; }
  .panel-box { max-width: 420px; background: none; padding-top: 0; }
  .drag-hint { left: 65%; bottom: 8%; }
  .watch-poster .poster-case { width: min(24vw, 320px); }
}

/* Pinned scene (main.js adds .is-pinned): the watch and the text stand still
   while the page scrolls; the text panels take turns in place. */
.watch.is-pinned { height: 320svh; }
.watch.is-pinned .watch-panels { position: sticky; top: 0; height: 100svh; }
.watch.is-pinned .watch-panel { position: absolute; inset: 0; min-height: 0; opacity: 0; transform: translateY(16px); transition: opacity var(--dur-3) var(--ease-inout), transform var(--dur-3) var(--ease-inout); }
.watch.is-pinned .watch-panel.is-active { opacity: 1; transform: none; transition-delay: 160ms; }
.watch.is-pinned .watch-panel:not(.is-active) { transition-duration: 140ms; }
.watch.is-pinned .watch-panel:not(.is-active) .panel-box { pointer-events: none; }
@media (max-width: 1023px) { .watch.is-pinned .watch-canvas { inset: 0 0 44% 0; } }
.watch-steps { display: none; }
.watch.is-pinned .watch-steps { display: flex; gap: 8px; position: absolute; right: var(--margin); top: calc(var(--header-h) + 20px); z-index: 2; }
.watch-steps span { width: 24px; height: 2px; background: var(--oled-rule); transition: background var(--dur-2) var(--ease-out); }
.watch-steps span.on { background: var(--oled-ink); }

/* ─── iPhone / iPad: add the web version to the home screen ─────────────── */
.pwa-bar {
  position: fixed; z-index: 150; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px;
  max-width: 560px; margin: 0 auto; padding: 8px 4px 8px 10px; border-radius: 20px;
  background: var(--paper-hi); box-shadow: 0 12px 36px rgba(23, 25, 20, .22), 0 0 0 1px var(--rule);
  transform: translateY(calc(100% + 24px)); opacity: 0; transition: transform var(--dur-3) var(--ease-out), opacity var(--dur-2) var(--ease-out);
}
.pwa-bar[hidden] { display: none; }
.pwa-bar.is-on { transform: none; opacity: 1; }
.pwa-bar-icon { width: 40px; height: 40px; border-radius: 10px; display: block; }
.pwa-bar-text { margin: 0; display: flex; flex-direction: column; gap: 1px; font-size: 13px; line-height: 1.25; color: var(--ink-2); min-width: 0; }
.pwa-bar-text strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pwa-bar-text strong { color: var(--ink); font-weight: 600; font-size: 14px; }
.pwa-bar .btn-sm { padding: 0 14px; }
.pwa-bar-close { width: 44px; height: 44px; }
body.has-pwa-bar .site-footer { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
@media (max-width: 359px) { .pwa-bar { grid-template-columns: minmax(0, 1fr) auto auto; padding-left: 14px; } .pwa-bar-icon { display: none; } }
@media (prefers-reduced-motion: reduce) { .pwa-bar { transition: none; } }

/* ─── Cookie notice (cookie-notice.js): informs, asks nothing ───────────── */
.cookie-bar {
  position: fixed; z-index: 160; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px 16px;
  max-width: 560px; margin: 0 auto; padding: 12px 12px 12px 18px; border-radius: 20px;
  background: var(--paper-hi); box-shadow: 0 12px 36px rgba(23, 25, 20, .22), 0 0 0 1px var(--rule);
  transform: translateY(calc(100% + 24px)); opacity: 0; transition: transform var(--dur-3) var(--ease-out), opacity var(--dur-2) var(--ease-out);
}
.cookie-bar.is-on { transform: none; opacity: 1; }
.cookie-bar-text { margin: 0; flex: 1 1 240px; font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.cookie-bar-text a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
body.has-cookie-bar .site-footer { padding-bottom: calc(120px + env(safe-area-inset-bottom)); }
@media (prefers-reduced-motion: reduce) { .cookie-bar { transition: none; } }

/* ─── Closing: the way into the web version ─────────────────────────────── */
.closing { padding-bottom: 0; }
.closing-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.closing-copy, .closing-display, .closing-eyes { min-width: 0; }
.closing-copy { display: flex; flex-direction: column; gap: 20px; }
.closing .d1 { max-width: 22ch; }
.closing .cta-row { margin-top: 12px; }
.closing-display { background: #000; border-radius: 24px; aspect-ratio: 4 / 3; display: grid; place-items: center; padding: 10%; max-width: 420px; width: 100%; justify-self: center; }
.closing-eyes { width: 100%; }
@media (min-width: 1024px) {
  .closing-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; }
  .closing-copy { grid-column: 1 / 8; }
  .closing-display { grid-column: 9 / 13; justify-self: stretch; }
}

/* FAQ */
.faq-grid { display: grid; gap: 32px; }
.faq-head .running-head { margin-bottom: 24px; }
.faq-list { border-top: 1px solid var(--rule); }
.faq-list details { border-bottom: 1px solid var(--rule); }
.faq-list summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 64px; padding: 16px 0; cursor: pointer; font: 500 clamp(17px, 1.4vw, 20px)/1.35 var(--f-text); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary .ic { transition: transform var(--dur-2) var(--ease-inout); }
.faq-list details[open] summary .ic { transform: rotate(45deg); }
.faq-list details p { padding: 0 0 22px; color: var(--ink-2); max-width: 62ch; }
@media (min-width: 1024px) {
  .faq-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .faq-head { grid-column: 1 / 5; position: sticky; top: calc(var(--header-h) + 32px); align-self: start; }
  .faq-list { grid-column: 6 / 13; }
}

/* Footer */
.site-footer { border-top: 1px solid var(--rule); padding: clamp(48px, 6vw, 88px) 0 32px; }
.footer-top { display: grid; gap: 40px; }
.footer-brand-col { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.footer-logo { display: block; color: var(--green); }
.footer-logo .hg-logo { height: clamp(56px, 7vw, 88px); width: auto; aspect-ratio: 1099 / 379; }
.footer-tag { font: 500 var(--fs-d3)/1.1 var(--f-title); text-transform: uppercase; letter-spacing: var(--track-title); max-width: 22ch; }
.footer-nav { display: flex; flex-direction: column; }
.footer-nav .eyebrow { margin-bottom: 8px; }
.footer-nav a { text-decoration: none; min-height: 40px; display: flex; align-items: center; font-weight: 500; border-bottom: 1px solid var(--rule); }
.footer-nav a:hover { color: var(--green); }
.credits { margin-top: 48px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.credits summary { list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 52px; cursor: pointer; }
.credits summary::-webkit-details-marker { display: none; }
.credits summary .ic { transition: transform var(--dur-2) var(--ease-inout); }
.credits[open] summary .ic { transform: rotate(45deg); }
.credits ul { list-style: none; padding: 0 0 20px; margin: 0; display: grid; gap: 4px 24px; font-size: var(--fs-small); color: var(--ink-2); }
.credits a { text-decoration: none; }
.credits a:hover { text-decoration: underline; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 24px; font-size: var(--fs-small); color: var(--ink-2); }
@media (min-width: 600px) { .credits ul { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
  .footer-top { grid-template-columns: 6fr 3fr 3fr; column-gap: var(--gutter); align-items: start; }
  .credits ul { grid-template-columns: repeat(4, 1fr); }
}

/* Reveal */
.js .reveal { opacity: 0; transform: translateY(24px); }
.reveal.is-in { opacity: 1; transform: none; transition: opacity var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; animation-iteration-count: 1 !important; }
  .js .hero-title .line > span, .js .hero-eyebrow, .js .hero-lead, .js .hero-cta, .js .hero-phone, .js .stage-plate, .js .hero-watch, .js .callout, .js .reveal, .js .stagger > div { opacity: 1; transform: none; }
  .js .callout-watch { transform: translateX(var(--cx)); }
  .js .manifesto-text .w { color: var(--ink); }
  .pantry-steps .stock-fill { transform: scaleX(0.4928); }
}

/* Units stay lowercase in big numbers (504 g, 0,5 kg, 6 h). */
.big-num, .hours-val, .stepper-value { text-transform: none; }

@media (max-width: 599px) {
  :root { --phone-w: min(78vw, 340px); }
  .journal-phone .ph { --ph-w: min(78vw, 340px); }
}
@media (prefers-reduced-motion: reduce) {
  .watch-stage { position: relative; height: 70svh; }
  .watch-panels { margin-top: 0; }
  .watch-panel { min-height: auto; padding-block: 32px; }
  .panel-config { min-height: auto; }
}

/* Starter: the eyes and the hours slider share one screen, so every change is seen. */
.starter-stage { display: grid; gap: 20px; align-items: center; padding-block: 16px; margin-top: var(--sp-head); }
.starter-stage .big-eyes { margin: 0 auto; width: min(100%, 640px, calc((100svh - var(--header-h) - 380px) * 4 / 3)); gap: 12px; }
.starter-stage .hours { margin-top: 0; }
@media (min-width: 1024px) {
  .starter-stage { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 64px; }
  .starter-stage .big-eyes { width: min(100%, calc((100svh - var(--header-h) - 140px) * 4 / 3)); }
  .starter-stage .hours { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .starter-stage .hours-head, .starter-stage .hours-range-wrap, .starter-stage .hours-state { grid-column: 1; grid-row: auto; }
}

/* The watch label leaves as soon as the spin starts (no entrance delay). */
.hero .callout-watch.is-hidden { opacity: 0 !important; transition: opacity 160ms linear !important; }

/* Legal pages (privacy.html): plain reading layout. */
.legal-page .site-header { position: sticky; }
.legal-logo { display: block; height: 30px; width: auto; }
.legal { max-width: 760px; padding-block: calc(var(--header-h) + 32px) 72px; display: flex; flex-direction: column; gap: 24px; }
.legal section { display: flex; flex-direction: column; gap: 10px; }
.legal p, .legal li { line-height: 1.6; color: var(--ink-2); }
.legal strong { color: var(--ink); font-weight: 600; }
.legal ul { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 6px; }
.legal code { font-size: 0.92em; background: var(--paper-hi); padding: 1px 6px; border-radius: 6px; }
.legal a { text-decoration: underline; text-underline-offset: 3px; }
.legal .btn { text-decoration: none; align-self: flex-start; }