/* Mula site stylesheet. Tokens match design/tokens.css; components match design/system.html. */
  :root {
    --paper: #FFFFFF; --paper-2: #FFFFFF; --paper-3: #F4F7F6;
    --band-mint: #EEF6F3; --band-peach: #FFF5EE;
    --ink: #0A0A0A; --ink-2: #666666; --line: #E6E9E8;
    --teal: #026E78; --teal-hover: #025C64; --teal-ink: #FFFFFF; --teal-soft: rgba(2,110,120,0.10);
    --mint: #2E9C80; --coral-text: #C9563A;
    --tint-mint: linear-gradient(160deg, #E4F3EE 0%, #F7FBF9 100%);
    --tint-peach: linear-gradient(160deg, #FBEBE0 0%, #FFF8F3 100%);
    --panel-teal: linear-gradient(150deg, #7FC2B7 0%, #CFE8E2 100%);
    --panel-peach: linear-gradient(150deg, #F2C4A8 0%, #FBE7DB 100%);
    --card-shadow: 0 8px 30px rgba(10,10,10,0.08);
    --card-shadow-hover: 0 14px 40px rgba(10,10,10,0.12);
    --glass-light: rgba(255,255,255,0.58); --glass-light-top: rgba(255,255,255,0.30);
    --glass-clear: rgba(255,255,255,0.12);
    --rim-light: linear-gradient(160deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.18) 30%, rgba(255,255,255,0.06) 62%, rgba(255,255,255,0.40) 100%);
    --rim-clear: linear-gradient(160deg, rgba(255,255,255,0.70) 0%, rgba(255,255,255,0.14) 30%, rgba(255,255,255,0.04) 62%, rgba(255,255,255,0.32) 100%);
    --sheen: linear-gradient(135deg, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0.08) 30%, rgba(255,255,255,0) 58%);
    --glass-shadow-light: 0 8px 28px rgba(10,10,10,0.08); --glass-shadow-dark: 0 12px 32px rgba(0,0,0,0.28);
    --ink-on-clear: #F5F7F6; --ink-on-clear-2: rgba(245,247,246,0.90);
    --ink-glass-2: #3E4A48;
    --brand-mint: #59BDA2; --mint-ink: #06181A;
    --brand-orange: #EC8867;
    --wash-mint: linear-gradient(110deg, #7AD2BA 0%, #59BDA2 45%, #3DAE99 100%);
    --wash-teal: linear-gradient(110deg, #026E78 0%, #1E8F86 55%, #59BDA2 100%);
    --wash-white: linear-gradient(110deg, #FFFFFF 0%, #E6F4EF 55%, #D3EDE3 100%);
    --focus: rgba(2,110,120,0.40);
    --font-display: "Archivo", "Inter", -apple-system, sans-serif;
    --font: "Inter", -apple-system, "Segoe UI", sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  }

  * { box-sizing: border-box; }
  body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
  h1, h2, h3 { margin: 0; font-family: var(--font-display); font-stretch: 105%; font-weight: 600; letter-spacing: -0.02em; text-wrap: balance; color: var(--ink); }
  h1 { font-stretch: 112%; font-weight: 700; font-size: clamp(2.5rem, 5vw, 3.75rem); line-height: 1.04; letter-spacing: -0.03em; }
  h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); line-height: 1.1; letter-spacing: -0.025em; }
  h3 { font-size: 1.375rem; line-height: 1.2; letter-spacing: -0.015em; }
  p { margin: 0; color: var(--ink-2); max-width: 60ch; }
  a { color: var(--teal); text-decoration: none; }
  a:focus-visible, button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
  .wrap { max-width: 1120px; margin: 0 auto; padding: 0 32px; }
  @media (max-width: 700px) { .wrap { padding: 0 20px; } }
  html { scroll-padding-top: 96px; }
  @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
  section { padding: 96px 0; }
  @media (max-width: 700px) { section { padding: 64px 0; } }
  .band-gray { background: var(--paper-3); }
  .band-mint { background: var(--band-mint); }
  .band-peach { background: var(--band-peach); }
  .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
  .accent { color: var(--teal); }
  .eyebrow { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 14px; }
  .eyebrow b { color: var(--coral-text); font-weight: 600; }
  .center { text-align: center; }
  .center p { margin-left: auto; margin-right: auto; }
  .sub { font-size: 1.125rem; }

  /* Buttons. Teal with white text is the primary (5.4:1). On hover a gradient slides
     across the face on the compositor (transform only); on the primary it runs teal
     into the brand mint, so the bright green is the click signal without being the
     resting color. */
  .btn { --r: 6px; position: relative; isolation: isolate; clip-path: inset(0 round var(--r)); display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 26px; border-radius: var(--r); font-family: var(--font); font-weight: 600; font-size: 0.9375rem; border: 1px solid transparent; cursor: pointer; transition: transform 120ms var(--ease-out), border-color 160ms ease, box-shadow 160ms ease; }
  .btn::before { content: ""; position: absolute; inset: -1px; z-index: -1; background: var(--wash); transform: translateX(-101%); transition: transform 320ms var(--ease-out); }
  .btn:active { transform: scale(0.97); }
  .btn-primary { background: var(--teal); color: var(--teal-ink); --wash: var(--wash-teal); }
  .btn-mint { background: var(--brand-mint); color: var(--mint-ink); --wash: var(--wash-mint); }
  .btn-secondary { background: var(--paper-2); color: var(--ink); border-color: var(--line); --wash: var(--wash-white); }
  .link { color: var(--teal); font-weight: 500; font-size: 0.9375rem; display: inline-flex; align-items: center; gap: 6px; }
  .link::after { content: "→"; transition: transform 160ms var(--ease-out); }
  @media (hover: hover) and (pointer: fine) {
    .btn:hover::before { transform: translateX(0); }
    .btn-primary:hover { box-shadow: 0 6px 18px rgba(2,110,120,0.28); }
    .btn-secondary:hover { border-color: transparent; }
    .link:hover::after { transform: translateX(3px); }
  }
  @media (prefers-reduced-motion: reduce) { .btn::before { transition: none; } }

  /* Glass header: a floating pill that content scrolls under. The frost lives on
     the same element as the radius and the clip (Safari drops a child's
     backdrop-filter inside a rounded clip; Chrome leaks it past the corners).
     The standard backdrop-filter is declared LAST so a minifier that dedupes the
     prefixed pair keeps the one every engine supports. */
  .topbar { position: sticky; top: 0; z-index: 50; padding: 12px 16px 0; }
  /* Glass, after Apple's Liquid Glass: a mostly clear fill, a rim that is a light
     falling on an edge (bright at the top-left, near nothing at the sides, a little
     at the bottom-right), a diagonal specular sheen, and a shadow that does the
     separating. No solid white border anywhere. */
  .glass { position: relative; isolation: isolate; border: 0; }
  .glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; background: var(--sheen); mix-blend-mode: screen; pointer-events: none; }
  .glass::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--rim); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
  .pill { max-width: 1120px; margin: 0 auto; border-radius: 32px; overflow: hidden; --rim: var(--rim-light); background: var(--glass-light); box-shadow: var(--glass-shadow-light); -webkit-backdrop-filter: blur(16px) saturate(180%) brightness(1.04); backdrop-filter: blur(16px) saturate(180%) brightness(1.04); transition: background-color 240ms ease, box-shadow 240ms ease; }
  .pill[data-at-top="true"] { background: var(--glass-light-top); box-shadow: none; }
  @media (prefers-reduced-transparency: reduce) { .pill { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 0 0 1px var(--line); } .glass::before, .glass::after { display: none; } }
  .pillrow { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 60px; padding: 0 10px 0 22px; }
  .logo { display: inline-flex; align-items: center; color: var(--ink); }
  .logo svg { height: 24px; width: auto; display: block; }
  .links { display: flex; gap: 28px; align-items: center; font-size: 0.9375rem; }
  .links a:not(.btn) { color: var(--ink-glass-2); font-weight: 500; }
  .links .btn { --r: 999px; min-height: 40px; padding: 0 20px; }
  @media (hover: hover) and (pointer: fine) { .links a:not(.btn):hover { color: var(--ink); } }
  .menubtn { display: none; width: 44px; height: 44px; border: 0; border-radius: 999px; background: transparent; color: var(--ink); cursor: pointer; align-items: center; justify-content: center; transition: background-color 150ms ease, transform 120ms var(--ease-out); }
  .menubtn:active { transform: scale(0.94); }
  .menubtn svg { width: 20px; height: 20px; }
  .menubtn .x { display: none; }
  .pill[data-open="true"] .menubtn .x { display: block; } .pill[data-open="true"] .menubtn .bars { display: none; }
  /* The pill expands into the menu on small screens: the height springs open with a
     little overshoot and closes critically damped. The height is measured and
     transitioned in JS, which every engine runs. */
  .menu { height: 0; overflow: hidden; }
  .menu > div { opacity: 0; transition: opacity 150ms ease; }
  .pill[data-open="true"] .menu > div { opacity: 1; transition-delay: 60ms; }
  .menu ul { list-style: none; margin: 0; padding: 4px 10px 12px; display: grid; gap: 2px; }
  .menu a { display: flex; align-items: center; min-height: 48px; padding: 0 14px; border-radius: 12px; font-size: 1.0625rem; color: var(--ink); }
  .menu a.btn { justify-content: center; margin-top: 8px; color: var(--teal-ink); }
  @media (hover: hover) and (pointer: fine) { .menu a:not(.btn):hover { background: var(--paper-3); } }
  .scrim { position: fixed; inset: 0; z-index: 40; border: 0; background: rgba(10,10,10,0.22); opacity: 0; pointer-events: none; transition: opacity 200ms ease; cursor: default; }
  .scrim[data-open="true"] { opacity: 1; pointer-events: auto; }
  @media (max-width: 760px) {
    .links a:not(.btn) { display: none; }
    .links .btn { display: none; }
    .menubtn { display: inline-flex; }
    .topbar { padding: 10px 12px 0; }
  }
  @media (min-width: 761px) { .menu { display: none; } .scrim { display: none; } }

  /* Hero */
  .hero { padding: 72px 0 56px; overflow-x: clip; }
  .hero .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
  @media (max-width: 900px) { .hero .wrap { grid-template-columns: 1fr; gap: 40px; } .hero { padding: 40px 0 32px; } }
  .hero .sub { margin-top: 20px; max-width: 42ch; }
  .hero .ctas { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 28px; }
  .visual { position: relative; min-height: 460px; }
  .photo { position: absolute; right: 0; top: 0; width: 84%; height: 88%; border-radius: 28px 28px 28px 120px; background: var(--paper-3); overflow: hidden; }
  .photo .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 45%; display: block; }
  .photo .lanes { position: absolute; left: 8%; bottom: -8%; width: 40%; height: 78%; opacity: 0.85; }
  .photo .cap { position: absolute; left: 20px; bottom: 16px; font-size: 0.75rem; color: #E6EFED; opacity: 0.8; }
  /* Floating product cards over the photo are glass. Type on glass: primary in ink,
     secondary in ink-glass-2 (about 5.5:1 over a frosted dark photo), 13px floor, weight 500. */
  /* Over the dark photo the glass is clear and the type flips light, the way Apple's
     material adapts to what is behind it. */
  .float { position: absolute; border-radius: 14px; --rim: var(--rim-clear); background: var(--glass-clear); box-shadow: var(--glass-shadow-dark); -webkit-backdrop-filter: blur(14px) saturate(180%) brightness(1.08); backdrop-filter: blur(14px) saturate(180%) brightness(1.08); padding: 12px 14px; font-size: 0.875rem; display: flex; gap: 10px; align-items: center; color: var(--ink-on-clear); }
  @media (prefers-reduced-transparency: reduce) { .float { background: rgba(20,28,27,0.92); -webkit-backdrop-filter: none; backdrop-filter: none; } }
  .float small { display: block; color: var(--ink-on-clear); font-size: 0.8125rem; font-weight: 500; margin-bottom: 2px; }
  .float b { font-weight: 600; }
  .dot { width: 32px; height: 32px; border-radius: 999px; flex: none; display: grid; place-items: center; background: rgba(255,255,255,0.16); box-shadow: inset 0 1px 0 rgba(255,255,255,0.25); }
  .dot svg { width: 16px; height: 16px; display: block; }
  .dot.mint { color: var(--brand-mint); }
  .dot.teal { color: #9ADDE0; }
  /* Two cards, not three: the photo needs room to be a photo. */
  .f2 { left: 20%; top: 40%; }
  /* One row, and it runs a little past the frame on purpose: both faces stay clear. */
  .f3 { right: -14px; bottom: 14%; white-space: nowrap; padding-right: 20px; }
  @media (max-width: 900px) { .visual { min-height: 380px; } .f2 { left: 18%; } }
  @media (max-width: 600px) { .f3 { right: 3%; bottom: 8%; max-width: 80%; white-space: normal; } }

  /* Feature grid */
  .grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 20px; margin-top: 48px; }
  @media (max-width: 800px) { .grid { grid-template-columns: 1fr; } }
  .card { border-radius: 16px; padding: 28px 28px 0; overflow: hidden; display: flex; flex-direction: column; gap: 10px; min-height: 280px; background: var(--tint-mint); }
  .card.peach { background: var(--tint-peach); }
  .card p { font-size: 0.9375rem; max-width: 44ch; }
  .card .link { margin-top: 2px; }
  .card .mock { margin-top: auto; align-self: flex-end; width: min(100%, 360px); margin-right: -28px; background: var(--paper-2); border-radius: 12px 0 0 0; box-shadow: var(--card-shadow); padding: 16px 18px 0; font-size: 0.8125rem; }
  .card.tall { grid-row: span 2; }
  .card.tall .mock { width: min(100%, 440px); }
  .stack { display: grid; gap: 20px; }
  .rows { list-style: none; margin: 0; padding: 0; }
  .rows li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); }
  .rows .v { white-space: nowrap; }
  .rows li:first-child { border-top: 0; }
  .rows .v { font-family: var(--mono); font-variant-numeric: tabular-nums; }
  .ok { color: var(--mint); font-weight: 500; } .no { color: var(--coral-text); font-weight: 500; }

  /* Two-column feature sections */
  .feature { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
  .feature.flip > :first-child { order: 2; }
  @media (max-width: 900px) { .feature { grid-template-columns: 1fr; gap: 36px; } .feature.flip > :first-child { order: 0; } }
  .feature h2 { font-size: clamp(1.625rem, 2.6vw, 2.125rem); }
  .feature .sub { margin-top: 14px; }
  .checks { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; font-size: 0.9375rem; color: var(--ink); }
  .checks li { display: flex; gap: 10px; align-items: flex-start; }
  .checks svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--teal); }
  .feature .btn { margin-top: 26px; }
  .panel { border-radius: 20px; padding: 40px 0 0 40px; background: var(--panel-teal); overflow: hidden; }
  .panel.peach { background: var(--panel-peach); }
  .panel .ui { background: var(--paper-2); border-radius: 14px 0 0 0; box-shadow: var(--card-shadow); padding: 22px 24px; font-size: 0.875rem; color: var(--ink); }
  .ui h4 { margin: 0 0 12px; font-size: 0.9375rem; font-weight: 600; }
  /* The destination control: one row per choice, a radio dot on each, the selected row
     a white pill that slides on transform (injected by the script; the aria-pressed
     background is the no-JS fallback). Hover changes paint only. */
  .pick { margin-top: 26px; }
  .pick h4 { margin: 0 0 10px; font-size: 0.9375rem; font-weight: 600; }
  /* Three equal rows over one mark. The M's three strokes sit at the same size and position
     behind every row, each row clipping its own slice, so the shape reads across the
     gaps without spilling into them. Every slice is grey until its row is chosen, then it takes that row's colour:
     teal for the client day, the logo's orange for the festival run, the deep green for
     the deal. Same geometry in every state; selection is paint, weight and shadow. */
  .seg { position: relative; isolation: isolate; display: grid; grid-template-columns: 1fr; gap: 10px; --mark-left: 58%; --mark-rest: rgba(10,10,10,0.16); }
  .seg .slice { position: absolute; top: 0; left: var(--mark-left); height: 100%; width: auto; fill: var(--mark-rest); pointer-events: none; }
  .seg button { position: relative; z-index: 1; overflow: hidden; min-height: 50px; border: 0; border-radius: 12px; padding: 12px 16px; color: var(--ink); font-family: var(--font); font-size: 0.9375rem; font-weight: 500; text-align: left; line-height: 1.25; cursor: pointer; display: flex; align-items: center; background: var(--paper); box-shadow: inset 0 0 0 1px rgba(10,10,10,0.08); transition: box-shadow 200ms ease, transform 120ms var(--ease-out); }
  .seg button .slice { z-index: 0; transition: fill 240ms var(--ease-out); }
  .seg button span { position: relative; z-index: 1; max-width: calc(var(--mark-left) + 4%); }
  .seg button[data-dest="permit"] { --pick: var(--teal); }
  .seg button[data-dest="production"] { --pick: var(--brand-orange); }
  .seg button[data-dest="distribution"] { --pick: var(--mint); }
  .seg button[aria-pressed="true"] { font-weight: 600; box-shadow: var(--card-shadow); }
  .seg button[aria-pressed="true"] .slice { fill: var(--pick); }
  .seg button:active { transform: scale(0.985); }
  @media (hover: hover) and (pointer: fine) { .seg button:not([aria-pressed="true"]):hover .slice { fill: rgba(10,10,10,0.28); } }
  /* Toggles left under the bullets, the list right, the button under the toggles; one column on phones. */
  .feature.covered { grid-template-rows: auto 1fr; row-gap: 0; align-items: start; }
  .covered .copy { grid-column: 1; grid-row: 1; }
  .covered .panel { grid-column: 2; grid-row: 1 / span 2; }
  .covered .cta { grid-column: 1; grid-row: 2; }
  .covered .cta .btn { margin-top: 26px; }
  @media (max-width: 900px) { .feature.covered { row-gap: 36px; } .covered .copy, .covered .panel, .covered .cta { grid-column: auto; grid-row: auto; } .covered .cta .btn { margin-top: 0; } }
  .lines li:first-child { border-top: 0; padding-top: 2px; }
  .doorlinks { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 16px; }
  .who .doorlinks .link { margin-top: 0; }
  .lines { list-style: none; margin: 6px 0 0; padding: 0; }
  .lines li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); line-height: 1.3; transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out); }
  .lines li.pending { opacity: 0; transform: translateY(6px); }
  .lines .k small { display: block; color: var(--ink-2); font-size: 0.72rem; margin-top: 1px; }
  .lines .v { color: var(--mint); font-weight: 500; white-space: nowrap; }
  .total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 6px; padding-top: 12px; border-top: 2px solid var(--ink); }
  .total .k { font-weight: 600; }
  .total .v { font-family: var(--font-display); font-stretch: 108%; font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; }
  .ui .note { font-size: 0.75rem; color: var(--ink-2); margin-top: 10px; }
  .excerpt { font-family: var(--mono); font-size: 0.78rem; line-height: 1.55; background: var(--paper-3); border-radius: 8px; padding: 12px 14px; color: var(--ink); margin-bottom: 12px; }
  .excerpt .label { font-family: var(--font); font-size: 0.72rem; color: var(--ink-2); margin-bottom: 6px; }
  .flag { margin-top: 12px; padding: 10px 12px; border-radius: 8px; background: rgba(217,112,74,0.12); font-size: 0.8125rem; }
  .flag b { color: var(--coral-text); }
  .file { list-style: none; margin: 0; padding: 0; }
  .file li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); }
  .file li:first-child { border-top: 0; }
  .file .d { font-family: var(--mono); font-size: 0.78rem; }

  /* Promises, questions, who */
  .four { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 44px; }
  @media (max-width: 900px) { .four { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 520px) { .four { grid-template-columns: 1fr; } }
  .four h3 { font-size: 1.125rem; margin-bottom: 8px; }
  .four p { font-size: 0.9375rem; }
  .qa { margin-top: 40px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
  @media (max-width: 900px) { .qa { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 600px) { .qa { grid-template-columns: 1fr; } }
  .qa > div { background: var(--paper-2); border: 1px solid var(--line); border-radius: 14px; padding: 24px; transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out), border-color 160ms ease; }
  @media (hover: hover) and (pointer: fine) {
    .qa > div:hover { transform: translateY(-3px); box-shadow: var(--card-shadow-hover); border-color: transparent; }
  }
  .qa h3 { font-size: 1.0625rem; margin-bottom: 8px; }
  .qa p { font-size: 0.9375rem; }
  .who { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 40px; }
  @media (max-width: 800px) { .who { grid-template-columns: 1fr; } }
  .who > div { border-radius: 16px; padding: 32px; background: var(--tint-mint); }
  .who > div.peach { background: var(--tint-peach); }
  .who h3 { margin-bottom: 10px; }
  .who p { font-size: 0.9375rem; }
  .who .link { margin-top: 16px; }
  .story { max-width: 680px; margin: 0 auto; }

  footer { border-top: 1px solid var(--line); padding: 64px 0 32px; }
  footer .cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px 32px; align-items: start; }
  footer .brand p { font-size: 0.875rem; max-width: 30ch; margin-top: 12px; }
  footer .logo svg { height: 24px; }
  footer .sign { font-family: var(--font-display); font-stretch: 108%; font-weight: 600; color: var(--ink); font-size: 1.25rem; margin: 14px 0 18px; letter-spacing: -0.01em; }
  footer .pillbtn { display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink); font-size: 0.8125rem; font-weight: 500; text-decoration: none; transition: border-color 150ms ease; }
  footer .pillbtn:hover { border-color: var(--ink-2); }
  footer h2 { font-family: var(--font-body); font-size: 0.8125rem; font-weight: 600; color: var(--ink); margin: 0 0 8px; letter-spacing: 0; }
  footer ul { list-style: none; margin: 0; padding: 0; }
  footer li a { display: inline-flex; min-height: 34px; align-items: center; font-size: 0.875rem; color: var(--ink-2); text-decoration: none; transition: color 150ms ease; }
  footer li a:hover { color: var(--ink); }
  footer .bar { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; font-size: 0.8125rem; color: var(--ink-2); }
  footer .bar p { font-size: 0.8125rem; max-width: 64ch; }
  @media (max-width: 760px) { footer .cols { grid-template-columns: 1fr 1fr; } footer .brand { grid-column: 1 / -1; } }

  /* The film. Nothing is fetched until the poster is tapped: the video has no src and
     preload="none", the still is a lazy image sized like the hero photo. */
  .film { padding-top: 24px; }
  @media (max-width: 700px) { .film { padding-top: 8px; } }
  .player { margin: 40px auto 0; max-width: 960px; border-radius: 16px; overflow: hidden; background: var(--paper); box-shadow: var(--card-shadow), 0 0 0 1px var(--line); }
  .player .frame { position: relative; aspect-ratio: 16 / 9; background: var(--paper-3); }
  @media (max-width: 700px) { .player { margin-top: 28px; border-radius: 12px; } .player .play { top: 60%; padding: 8px 14px 8px 8px; font-size: 0.875rem; } .player .play .dot { width: 28px; height: 28px; } .player .note { font-size: 0.6875rem; padding: 6px 12px; } }
  .player video { display: block; width: 100%; height: 100%; background: var(--paper); }
  .player video[hidden] { display: none; }
  .player .surface { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; font-family: var(--font); }
  .player .surface:focus-visible { outline-offset: -3px; }
  .player .surface img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .player .play { position: absolute; left: 7.3%; top: 62%; transform-origin: left center; display: flex; align-items: center; gap: 10px; padding: 10px 18px 10px 10px; border-radius: 999px; --rim: var(--rim-light); background: var(--glass-light); box-shadow: var(--glass-shadow-light); -webkit-backdrop-filter: blur(14px) saturate(180%); backdrop-filter: blur(14px) saturate(180%); color: var(--ink); font-size: 0.9375rem; white-space: nowrap; transition: transform 160ms var(--ease-out), box-shadow 160ms ease; }
  .player .play .dot { background: var(--teal); color: var(--teal-ink); box-shadow: none; }
  .player .play b { font-weight: 600; }
  .player .play small { color: var(--ink-2); font-size: 0.8125rem; }
  @media (hover: hover) and (pointer: fine) { .player .surface:hover .play { transform: scale(1.04); box-shadow: var(--card-shadow-hover); } }
  .player .surface:active .play { transform: scale(0.97); }
  .player[data-playing="true"] .surface { display: none; }
  .player .note { margin: 0; padding: 8px 14px; font-size: 0.75rem; color: var(--ink-2); background: var(--paper); border-top: 1px solid var(--line); }
  @media (prefers-reduced-transparency: reduce) { .player .play { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 0 0 1px var(--line); } }
  @media (prefers-reduced-motion: reduce) { .player .play { transition: none; } .player .surface:hover .play, .player .surface:active .play { transform: none; } }

  /* Hidden only when JS is running; without it (or before it) content is simply there. */
  .js .r { opacity: 0; transform: translateY(8px); transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out); }
  .r.in { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) {
    .r { transform: none; transition: opacity 150ms ease; }
    .lines li { transform: none !important; transition: opacity 150ms ease; }
    .btn:active, .seg button:active { transform: none; }
    .seg button .slice { transition: none; }
    .qa > div { transition: none; }
  }

/* Persona portrait (Why we exist). A full photo in a 4:5 frame with the
   brand's soft corner; the name sits on light glass so it reads over anything. */
.portrait { position: relative; width: 100%; }
.portrait .frame { position: relative; aspect-ratio: 4 / 5; border-radius: 28px 28px 28px 120px; overflow: hidden; background: var(--paper-3); }
.portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.portrait .chip { position: absolute; left: -14px; bottom: 26px; display: inline-flex; align-items: center; padding: 10px 14px 11px; border-radius: 12px; --rim: var(--rim-light); background: var(--glass-light); color: var(--ink); box-shadow: var(--glass-shadow-light); -webkit-backdrop-filter: blur(16px) saturate(180%) brightness(1.04); backdrop-filter: blur(16px) saturate(180%) brightness(1.04); }
.portrait .chip small { display: block; font-size: 0.75rem; font-weight: 500; color: var(--ink); margin-bottom: 2px; }
.portrait .chip b { font-weight: 600; font-size: 0.9375rem; }
@media (prefers-reduced-transparency: reduce) { .portrait .chip { background: rgba(255,255,255,0.94); -webkit-backdrop-filter: none; backdrop-filter: none; } }
.persona { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: center; }
.persona.flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.persona.flip > :first-child { order: 2; }
@media (max-width: 900px) { .persona, .persona.flip { grid-template-columns: 1fr; gap: 28px; } .persona.flip > :first-child { order: 0; } .portrait { max-width: 420px; } }
.persona .role { color: var(--ink-2); font-size: 0.9375rem; margin: 6px 0 18px; }
.persona p + p { margin-top: 1em; }
.why-hero { padding: 88px 0 56px; }
.why-hero h1 { max-width: 16ch; }
.why-hero .sub { margin-top: 20px; max-width: 46ch; }
@media (max-width: 900px) { .why-hero { padding: 48px 0 32px; } }
.founder { max-width: 680px; margin: 0 auto; }
.founder p { font-size: 1.125rem; color: var(--ink); }
.founder .sig { margin-top: 18px; color: var(--ink-2); font-size: 0.9375rem; }

/* The list: the intake form and its confirmation. */
.list-hero { padding: 72px 0 24px; }
.list-hero h1 { max-width: 16ch; }
.list-hero .sub { margin-top: 18px; max-width: 46ch; }
.intake { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
@media (max-width: 900px) { .intake { grid-template-columns: 1fr; gap: 36px; } }
.form { display: grid; gap: 22px; }
.field label { display: block; font-size: 0.9375rem; font-weight: 500; color: var(--ink); margin-bottom: 8px; }
.field .hint { font-size: 0.8125rem; color: var(--ink-2); margin: -4px 0 8px; }
.field input, .field select, .field textarea { min-height: 46px; width: 100%; padding: 0 14px; border-radius: 8px; border: 1px solid var(--line); background: var(--paper-2); color: var(--ink); font-family: var(--font); font-size: 1rem; }
.field textarea { padding: 12px 14px; min-height: 92px; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--teal); }
.field .err { display: none; color: var(--coral-text); font-size: 0.875rem; margin-top: 6px; }
.field[data-invalid="true"] input { border-color: var(--coral-text); }
.field[data-invalid="true"] .err { display: block; }
.form .seg { background: none; }
.form .seg button { min-height: 46px; }
.form .fine { font-size: 0.8125rem; color: var(--ink-2); }
.form .btn { justify-self: start; min-width: 200px; }
.form .btn[data-busy="true"] { opacity: 0.7; pointer-events: none; }
.done { display: none; }
.done[data-show="true"] { display: block; }
.form[data-hide="true"] { display: none; }
.done h2 { margin-bottom: 14px; }
.done .row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 24px; }

/* Motion, page level. Children of a revealed group arrive 60ms apart; the hero's
   glass cards arrive in sequence on load. Both are opacity and 8px only. */
.js .stagger > * { opacity: 0; transform: translateY(8px); transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out); }
.stagger.in > * { opacity: 1; transform: none; }
.stagger.in > :nth-child(2) { transition-delay: 60ms; }
.stagger.in > :nth-child(3) { transition-delay: 120ms; }
.stagger.in > :nth-child(4) { transition-delay: 180ms; }
.stagger.in > :nth-child(5) { transition-delay: 240ms; }
.stagger.in > :nth-child(6) { transition-delay: 300ms; }
.arrive { animation: arrive 420ms var(--ease-out) both; }
.f2.arrive { animation-delay: 240ms; } .f3.arrive { animation-delay: 420ms; }
@keyframes arrive { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .stagger > * { transform: none; transition: opacity 150ms ease; }
  .stagger.in > * { transition-delay: 0ms; }
  .arrive { animation: none; }
}

/* Narrow screens: the destination picker and the totals row stack. Kept last so it outranks the form's own picker rule. */
@media (max-width: 520px) {
  }
  /* Phones get the line and its status, not the explainer: too many words in a narrow card. */
  @media (max-width: 520px) {
    .lines .k small { display: none; }
    .lines li { padding: 11px 0; }
    .ui .note { margin-top: 12px; }
    .total { flex-direction: column; align-items: flex-start; gap: 2px; }
  }
  @media (max-width: 360px) {
    .lines .v { white-space: normal; text-align: right; max-width: 46%; }
    .lines .k { flex: 1 1 54%; }
  }