/* ==========================================================================
   FlagFile - landing page
   Type:   Newsreader (display, serif) + Archivo (UI, sans). Self-hosted.
   Colour: warm archive. One accent (flag red) drives every interactive
           element. Green is semantic only: it means "green flag", nothing else.
   Shape:  surfaces 16px, nested surfaces 10px, anything interactive is a pill.
   Theme:  one light page + one dark theme via prefers-color-scheme.
           Exactly one dark block on the light page (the closing CTA/footer).
   ========================================================================== */

/* ---------- fonts ---------- */
@font-face {
  font-family: 'Newsreader';
  src: url('assets/fonts/newsreader-latin-var.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('assets/fonts/newsreader-italic-latin-var.woff2') format('woff2');
  font-weight: 300 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('assets/fonts/archivo-latin-var.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- tokens ---------- */
:root {
  --paper:    #F3EFE6;
  --paper-2:  #E9E3D5;
  --card:     #FBF9F4;
  --manila:   #DFC694;
  --manila-2: #EBD9B2;
  --ink:      #23201B;
  --ink-2:    #5A544A;
  --rule:     #D6CDBA;
  --rule-2:   #C4B99F;
  --red:      #B93F2B;
  --red-deep: #93301F;
  --red-soft: #F3DED6;
  --green:    #4E6B3B;
  --green-soft:#E1E7D5;
  --olive:    #2C3126;
  --bone:     #F0EADC;
  --shadow:   28 32 24;

  /* text that sits ON a solid accent fill, and accent-coloured small text.
     Both flip in dark mode, where the accents themselves get lighter. */
  --on-red:      #FFF3EF;
  --on-green:    #F4F7EE;
  --accent-text: #93301F;

  /* the three flag fills, tuned for the graphic sections */
  --flag-red:   #C4402F;
  --flag-green: #5E7C4A;
  --flag-beige: #E2D3B4;

  /* beige: the app's third flag colour, alongside red and green */
  --beige:      #69562F;
  --beige-soft: #EDE3CE;
  --on-beige:   #FFFBF3;

  /* the in-app pill palette, sampled from the shipping product. Fixed across
     both site themes: this is what the screenshot looks like, not site chrome. */
  --pill-red:    #DD7A67;
  --pill-red-hi: #F1BEB2;
  --pill-beige:    #B99D76;
  --pill-beige-hi: #DACBAC;
  --pill-green:    #8CA277;
  --pill-green-hi: #B7C8A3;
  --pill-gold:   #D6A744;
  --pill-gold-deep: #B98B32;
  --pill-ink:    #3B3226;
  --pill-card-r: #F8EEE6;
  --pill-card-b: #F8F2E5;
  --pill-card-g: #F2F4E9;
  --pill-paper:  #EEE4D2;
  --on-pill-red:   #3A1E17;
  --on-pill-green: #1E2617;
  --on-pill-beige: #2E2517;
  --accent-on-manila: #93301F;

  --r-surface: 16px;
  --r-inner: 10px;
  --r-pill: 999px;

  --sans: 'Archivo', ui-sans-serif, system-ui, 'Segoe UI', sans-serif;
  --serif: 'Newsreader', ui-serif, Georgia, 'Times New Roman', serif;

  --wrap: 1240px;
  --gut: clamp(20px, 5vw, 56px);
  --sec: clamp(52px, 6vw, 88px);

  --t-h1: clamp(2.9rem, 7.1vw, 5.4rem);
  --t-h2: clamp(1.85rem, 3.5vw, 2.8rem);
  --t-lead: clamp(1.03rem, 0.95rem + 0.35vw, 1.2rem);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --z-nav: 40;
  --z-dock: 45;
  --z-grain: 60;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:    #1A1815;
    --paper-2:  #131210;
    --card:     #232019;
    --manila:   #423A29;
    --manila-2: #544A35;
    --ink:      #EFE9DB;
    --ink-2:    #A79E8A;
    --rule:     #38321F;
    --rule-2:   #4B432D;
    --red:      #E0664C;
    --red-deep: #C9543C;
    --red-soft: #3A241D;
    --green:    #8DAE6E;
    --green-soft:#25301C;
    --olive:    #0F110C;
    --bone:     #EFE9DB;
    --shadow:   0 0 0;

    --on-red:      #2A1410;
    --on-green:    #1B2413;
    --accent-text: #E0664C;

    --beige:      #C2A876;
    --beige-soft: #33291A;
    --on-beige:   #241D12;

    --flag-red:   #CE4B37;
    --flag-green: #6C8B55;
    --flag-beige: #BFAE8B;
    --accent-on-manila: #F5B9AB;
  }
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol, dl, dd { list-style: none; padding: 0; }

:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 4px;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip {
  position: fixed; top: -100px; left: 16px; z-index: 100;
  background: var(--red); color: #fff; padding: 10px 18px;
  border-radius: var(--r-pill); font-size: .9rem; font-weight: 600;
  transition: top .18s var(--ease);
}
.skip:focus { top: 16px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }

/* paper grain, fixed so it never repaints on scroll */
.grain {
  position: fixed; inset: 0; z-index: var(--z-grain); pointer-events: none;
  opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.14'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) { .grain { mix-blend-mode: screen; opacity: .22; } }

/* ---------- shared type ---------- */
.h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--t-h2);
  line-height: 1.06;
  letter-spacing: -.018em;
  font-variation-settings: 'opsz' 42;
}
.h2 em { font-style: italic; color: var(--red); padding-bottom: .06em; display: inline-block; }

.lead {
  font-size: var(--t-lead);
  color: var(--ink-2);
  max-width: 54ch;
  line-height: 1.62;
}

.eyebrow {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 18px;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; white-space: nowrap;
  padding: 12px 24px;
  border-radius: var(--r-pill);
  font-size: .94rem; font-weight: 600; letter-spacing: -.005em;
  transition: background-color .2s var(--ease), color .2s var(--ease),
              transform .12s var(--ease), border-color .2s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--solid { background: var(--red); color: var(--on-red); }
.btn--solid:hover { background: var(--red-deep); }
.btn--ghost { border: 1px solid var(--rule-2); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); background: color-mix(in srgb, var(--ink) 5%, transparent); }

/* store badges: official Apple / Google artwork, not recoloured */
.stores { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.store {
  display: inline-flex; border-radius: 8px;
  transition: transform .16s var(--ease), filter .2s var(--ease);
}
.store:hover { transform: translateY(-2px); }
.store:active { transform: translateY(0); }
.store img { height: 46px; width: auto; border-radius: 9px; }
@media (prefers-color-scheme: dark) {
  .store { filter: drop-shadow(0 1px 0 color-mix(in srgb, var(--bone) 12%, transparent)); }
}

/* ---------- chips / tiers ---------- */
.chip {
  display: inline-flex; align-items: center;
  padding: 7px 16px;
  border-radius: var(--r-pill);
  font-size: .875rem; font-weight: 500; white-space: nowrap;
}
.chip--sm { padding: 5px 13px; font-size: .8rem; }
.chip--red { background: var(--red-soft); color: var(--red-deep); }
.chip--beige { background: var(--beige-soft); color: var(--beige); }
.chip--green { background: var(--green-soft); color: var(--green); }
@media (prefers-color-scheme: dark) {
  .chip--red { color: #F0A492; }
  .chip--green { color: #A9C68B; }
}

/* ==========================================================================
   NAV
   ========================================================================== */
.nav {
  position: sticky; top: 0; z-index: var(--z-nav);
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.nav.is-stuck { border-bottom-color: var(--rule); }
@supports not (backdrop-filter: blur(4px)) { .nav { background: var(--paper); } }

.nav__in {
  max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut);
  height: 70px; display: flex; align-items: center; gap: 28px;
}

.brand { display: inline-flex; align-items: center; gap: 9px; margin-right: auto; }
.brand__mark { width: 36px; height: 36px; flex: none; object-fit: contain; }
.brand__word {
  font-family: var(--serif); font-size: 1.42rem; font-weight: 500;
  letter-spacing: -.02em; font-variation-settings: 'opsz' 20;
}

.nav__links { display: flex; gap: 30px; font-size: .93rem; font-weight: 500; }
.nav__links a { color: var(--ink-2); transition: color .18s var(--ease); }
.nav__links a:hover { color: var(--ink); }

.nav__cta { padding: 10px 22px; font-size: .9rem; }
.nav__toggle { display: none; width: 42px; height: 42px; place-items: center; margin-left: auto; }
.nav__toggle svg { width: 24px; height: 24px; fill: var(--ink); }

.mobilemenu { display: none; }

@media (max-width: 860px) {
  .nav__links { display: none; }
  .nav__cta { display: none; }
  .nav__toggle { display: grid; }
  .mobilemenu {
    display: block; border-top: 1px solid var(--rule);
    background: var(--paper); padding: 8px var(--gut) 20px;
  }
  .mobilemenu[hidden] { display: none; }
  .mobilemenu a {
    display: block; padding: 13px 0; font-size: 1.05rem; font-weight: 500;
    border-bottom: 1px solid var(--rule);
  }
  .mobilemenu a:last-child { border-bottom: 0; color: var(--red); }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero { padding-top: clamp(20px, 2.4vw, 36px); padding-bottom: clamp(40px, 4.6vw, 68px); }
.hero__in {
  max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut);
  display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px); align-items: center;
}

.hero__h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: var(--t-h1); line-height: 1.02; letter-spacing: -.028em;
  font-variation-settings: 'opsz' 60;
}
.hero__h1 em {
  font-style: italic; color: var(--red);
  display: inline-block; line-height: 1.1; padding-bottom: .08em;
}

.hero__sub {
  margin-top: clamp(20px, 2.4vw, 30px);
  font-size: clamp(1.06rem, 0.96rem + 0.45vw, 1.28rem);
  line-height: 1.55; color: var(--ink-2); max-width: 27ch;
}

.hero .stores { margin-top: clamp(26px, 3vw, 40px); }

.hero__copy { position: relative; }
.hero__doodle {
  position: absolute; right: -13%; bottom: 26%;
  width: clamp(56px, 6vw, 86px); height: auto; aspect-ratio: 90 / 60;
  color: var(--red); opacity: .85;
  transform: rotate(8deg);
}
@media (max-width: 900px) { .hero__doodle { display: none; } }

/* --- hero stage: manila folder + clipped note + live app preview --- */
.hero__stage { position: relative; padding: 5% 0 2% 4%; }

/* the folder the phone sits on. The product metaphor, built as material. */
.folderbg {
  position: absolute; z-index: 1;
  right: -3%; bottom: 1%; width: 74%; height: 68%;
  background: var(--manila);
  border-radius: 3px 3px 8px 8px;
  transform: rotate(4.5deg);
  box-shadow: 0 26px 54px -30px rgb(var(--shadow) / .55),
              inset 0 1px 0 color-mix(in srgb, #fff 26%, transparent);
}
.folderbg::before {
  content: ''; position: absolute; top: -20px; right: 34px;
  width: 42%; height: 22px; background: var(--manila);
  border-radius: 6px 8px 0 0;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 26%, transparent);
}
.folderbg::after {
  content: ''; position: absolute; inset: auto 0 26% 0; height: 1px;
  background: color-mix(in srgb, var(--ink) 12%, transparent);
}
.folderbg span {
  position: absolute; right: 24px; bottom: 8%;
  font-family: var(--serif); font-size: 1.5rem; letter-spacing: -.01em;
  color: color-mix(in srgb, var(--ink) 62%, transparent);
}

.clipnote {
  position: absolute; top: -2%; right: -4%; z-index: 4;
  width: min(196px, 40%);
  background: var(--card);
  border-radius: 4px;
  padding: 26px 20px 22px;
  transform: rotate(3.2deg);
  box-shadow: 0 14px 34px -18px rgb(var(--shadow) / .55);
}
.clipnote__clip {
  position: absolute; top: -16px; left: 22px;
  width: 15px; height: 40px;
  border: 2.5px solid var(--rule-2);
  border-radius: 8px 8px 3px 3px;
  background: transparent;
}
.clipnote p {
  font-family: var(--serif); font-style: italic; font-size: 1.02rem;
  line-height: 1.32; color: var(--ink-2);
}

/* ---------- the live app preview ---------- */
.phone { position: relative; z-index: 3; width: min(296px, 76%); margin-inline: auto; }
.phone__frame {
  background: #16150F;
  border-radius: 44px;
  padding: 9px;
  aspect-ratio: 71 / 146;              /* iPhone body proportions */
  display: flex; flex-direction: column;
  box-shadow:
    0 0 0 1.5px rgb(var(--shadow) / .28),
    0 40px 80px -34px rgb(var(--shadow) / .62);
}
.phone__bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 18px 8px; color: #EFE9DB; font-size: .66rem; font-weight: 600;
}
.phone__batt { width: 20px; height: 10px; border: 1.2px solid #EFE9DB; border-radius: 3px; opacity: .8; }

/* The whole screen is a fixed light "photo" of the shipping app: it does not
   swap with the site theme, the same way a screenshot embedded on a dark
   page never does. Every app__* colour below is a literal hex, not a token. */
.phone__screen {
  background: var(--pill-paper);
  border-radius: 36px;
  padding: 12px 14px 16px;
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
}
/* let the flexible bits absorb the leftover height */
.app__group { margin-top: auto; }
.app__cta { flex: none; }

.app__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 2px 0 12px;
}
.app__icobtn {
  width: 26px; height: 26px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: color-mix(in srgb, #fff 55%, transparent);
}
.app__icobtn svg { width: 13px; height: 13px; fill: #4A4131; }
.app__wordmark {
  font-size: .58rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: #6B6046; display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.app__wordmark i {
  font-style: normal; font-weight: 500; letter-spacing: .09em; opacity: .74;
}

.app__photo {
  position: relative;
  width: 44%; margin: 0 auto 2px;
  background: #FBF8F2; padding: 7px 7px 20px;
  border-radius: 2px;
  transform: rotate(-1.1deg);
  box-shadow: 0 14px 26px -14px rgb(0 0 0 / .38);
}
.app__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 1px; }
.app__photo { padding-bottom: 16px; }
.app__tape {
  position: absolute; top: -11px; left: 14%; z-index: 2;
  width: 46%; height: 20px;
  background: repeating-linear-gradient(-45deg, #D8C7A0 0 6px, #C7B183 6px 12px);
  opacity: .8; transform: rotate(-3deg);
  box-shadow: 0 2px 4px -2px rgb(0 0 0 / .25);
}
.app__pcaption {
  position: absolute; right: 15px; bottom: 8px;
  font-size: .56rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 3px rgb(0 0 0 / .65), 0 0 1px rgb(0 0 0 / .5);
}
.app__arrow {
  position: absolute; top: 50%; z-index: 3;
  width: 26px; height: 26px; margin-top: -13px; border-radius: 50%;
  display: grid; place-items: center;
  background: color-mix(in srgb, #fff 74%, transparent);
  box-shadow: 0 4px 10px -6px rgb(0 0 0 / .4);
}
.app__arrow svg { width: 11px; height: 11px; fill: #4A4131; }
.app__arrow--l { left: -4px; }
.app__arrow--r { right: -4px; }

.app__dots { display: flex; justify-content: center; gap: 5px; margin: 6px 0 8px; }
.app__dots span { width: 5px; height: 5px; border-radius: 50%; background: #D2C2A0; }
.app__dots .is-on { background: #4A4131; }

.app__name {
  font-family: var(--serif); font-style: italic; font-size: 1.38rem; font-weight: 600;
  color: #221D14;
  text-align: center; letter-spacing: -.01em; margin-bottom: 2px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.app__pen {
  width: 20px; height: 20px; padding: 4px; box-sizing: content-box;
  border-radius: 50%; background: color-mix(in srgb, #fff 55%, transparent);
  fill: #6B6046;
}
.app__source {
  text-align: center; font-size: .7rem; color: #655A40; margin-bottom: 8px;
}
.app__status {
  display: block; width: fit-content; margin: 0 auto 10px;
  font-size: .68rem; color: #6B6046;
  background: #FBF8F2; border: 1px solid #E2D6BC; border-radius: var(--r-pill);
  padding: 5px 14px;
}
.app__status b { color: #221D14; font-weight: 700; margin-left: 3px; }

.app__group { border-radius: 14px; padding: 11px 11px 12px; border: 1.5px dashed; }
.app__group + .app__group { margin-top: 10px; }
.app__group--red   { background: var(--pill-card-r); border-color: color-mix(in srgb, var(--pill-red) 55%, transparent); }
.app__group--beige { background: var(--pill-card-b); border-color: color-mix(in srgb, var(--pill-beige) 55%, transparent); }
.app__group--green { background: var(--pill-card-g); border-color: color-mix(in srgb, var(--pill-green) 55%, transparent); }

.app__gh {
  font-family: var(--serif); font-style: italic; font-weight: 600;
  font-size: .96rem; color: #221D14; margin-bottom: 8px;
}

.app__wrap { display: flex; flex-wrap: wrap; gap: 7px; }
.app__pill {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: var(--r-pill);
  font-size: .65rem; font-weight: 700; color: var(--on-pill-red);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), 0 3px 6px -3px rgb(0 0 0 / .3);
}
.app__pill::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: color-mix(in srgb, currentColor 55%, transparent);
}
.app__group--red .app__pill   { background: linear-gradient(160deg, #F0B3A5, #E39683); }
.app__group--beige .app__pill { background: linear-gradient(160deg, #DCCBAB, #C4AE86); color: var(--on-pill-beige); }

.app__group--green .app__pill { background: linear-gradient(160deg, #B9C9A6, #9DB187); color: var(--on-pill-green); }

.app__note {
  position: absolute; top: -7px; right: -7px;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--pill-gold); display: grid; place-items: center;
  box-shadow: 0 2px 4px -1px rgb(0 0 0 / .35);
}
.app__note svg { width: 8px; height: 8px; fill: #FFF6E4; }

.app__cta {
  width: 100%; margin-top: 10px;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--pill-gold); color: #2E2109;
  font-size: .82rem; font-weight: 700;
  padding: 11px; border-radius: var(--r-pill);
  box-shadow: 0 8px 16px -8px rgb(0 0 0 / .35);
}
.app__cta svg {
  width: 18px; height: 18px; padding: 3px; box-sizing: content-box;
  border-radius: 50%; background: color-mix(in srgb, #fff 55%, transparent);
  fill: #2E2109;
}

.app__tagline {
  margin-top: 8px; text-align: center;
  font-family: var(--serif); font-style: italic; font-size: .72rem;
  color: #655A40;
}

@media (max-width: 900px) {
  .hero__in { grid-template-columns: 1fr; }
  .hero__sub { max-width: 34ch; }
  .hero__stage { padding: 46px 0 0; max-width: 500px; margin-inline: auto; }
  .folderbg { right: 0; bottom: 3%; width: 78%; height: 58%; }
  .clipnote { top: 2%; right: 0; width: min(178px, 42%); }
}
@media (max-width: 560px) {
  .clipnote { display: none; }
  .folderbg { width: 86%; right: -6%; }
  .phone { width: min(272px, 80%); }
}

/* ==========================================================================
   VOCABULARY / MECHANISM
   ========================================================================== */
.vocab {
  padding: clamp(44px, 4.6vw, 64px) 0 clamp(38px, 4vw, 56px);
  background: var(--paper-2);
  border-block: 1px solid var(--rule);
  overflow: hidden;
}

/* ---- "One flag is a detail": headline left, flag cluster right ---- */
.scatter {
  position: relative;
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(24px, 4vw, 64px); align-items: center;
}
.scatter__copy { position: relative; }
.scatter__line {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2rem, 3.6vw, 3.15rem);
  line-height: 1.08; letter-spacing: -.022em;
}
.scatter__line em { font-style: italic; color: var(--red); display: inline-block; padding-bottom: .06em; }
.scatter__uline {
  display: block; margin-top: 12px;
  width: clamp(170px, 20vw, 250px); height: 16px;
  color: color-mix(in srgb, var(--red) 88%, var(--paper-2));
}
.legend { display: flex; gap: 18px; margin-top: 26px; }
.legend li {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .82rem; font-weight: 600; color: var(--ink-2);
}
.legend__dot { width: 15px; height: 15px; border-radius: 50%; }
.legend__dot--red { background: var(--flag-red); }
.legend__dot--beige { background: var(--flag-beige); }
.legend__dot--green { background: var(--flag-green); }

/* the cluster */
.scatter__stage { position: relative; }
.scatter__field { position: relative; height: clamp(330px, 30vw, 400px); }

.halftone {
  position: absolute; left: 34%; top: 22%; width: 190px; height: 190px;
  background-image: radial-gradient(color-mix(in srgb, var(--ink) 22%, transparent) 1.6px, transparent 1.7px);
  background-size: 11px 11px;
  opacity: .5; pointer-events: none;
  mask-image: radial-gradient(circle, #000 40%, transparent 72%);
  -webkit-mask-image: radial-gradient(circle, #000 40%, transparent 72%);
}

.fpill {
  position: absolute; left: var(--x); top: var(--y);
  display: inline-flex; align-items: center; gap: 12px;
  padding: 9px 22px 9px 9px;
  border-radius: var(--r-pill);
  font-size: clamp(.9rem, 1vw, 1rem); font-weight: 700; line-height: 1.2;
  box-shadow: 0 16px 26px -16px rgb(var(--shadow) / .5),
              inset 0 1px 0 color-mix(in srgb, #fff 26%, transparent);
  transform: rotate(var(--r)) scale(.9);
  opacity: 0;
}
/* white coin badge, coloured glyph. Straight off the reference. */
.fpill__i {
  width: 40px; height: 40px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: #FCFAF5;
  box-shadow: 0 2px 5px -2px rgb(var(--shadow) / .45);
}
.fpill__i svg { width: 21px; height: 21px; }

.fpill--red   { background: var(--flag-red);   color: #FFF4F1; }
.fpill--red .fpill__i svg   { fill: var(--flag-red); }
.fpill--green { background: var(--flag-green); color: #F5F8EF; }
.fpill--green .fpill__i svg { fill: var(--flag-green); }
.fpill--beige { background: var(--flag-beige); color: #33291A; }
.fpill--beige .fpill__i svg { fill: #6B5327; }

/* scattered confetti dots + doodles */
.cdot { position: absolute; border-radius: 50%; }
.cdot--1 { width: 10px; height: 10px; background: var(--flag-green); left: 46%; top: 3%; }
.cdot--2 { width: 8px;  height: 8px;  background: var(--flag-red);   left: 40%; top: 62%; }
.cdot--3 { width: 9px;  height: 9px;  background: var(--flag-beige); left: 92%; top: 40%; }
.cdot--4 { width: 7px;  height: 7px;  background: var(--flag-green); left: 34%; top: 92%; }

.doodle { position: absolute; pointer-events: none; }
.doodle--spark-r { top: 4%;   right: 20%; width: 28px; height: 28px; color: var(--red);   transform: rotate(22deg); }
.doodle--heart   { left: 6%;   bottom: -14%; width: 32px; height: 28px; color: var(--rule-2); transform: rotate(-8deg); }
.doodle--curl    { right: 1%;  top: -6%;   width: 52px; height: 34px; color: var(--rule-2); transform: rotate(-6deg); }
.doodle--curl2   { right: -1%; top: 16%; width: 58px; height: 38px; color: var(--rule-2); transform: rotate(18deg); }
.doodle--star    { right: 2%;  top: 47%; width: 26px; height: 26px; color: var(--rule-2); }
.doodle--star2   { left: 40%;  bottom: 1%; width: 20px; height: 20px; color: var(--rule-2); transform: rotate(12deg); }

@media (prefers-reduced-motion: no-preference) {
  .fpill {
    transition: opacity .5s var(--ease), transform .45s var(--ease);
    transition-delay: calc(var(--i) * 55ms);
  }
  .scatter__field.is-in .fpill { opacity: 1; transform: rotate(var(--r)) scale(1); }
  .fpill:hover { transform: rotate(0deg) scale(1.05) !important; transition-delay: 0s; }
}
@media (prefers-reduced-motion: reduce) { .fpill { opacity: 1; transform: rotate(var(--r)); } }

@media (max-width: 900px) {
  .scatter { grid-template-columns: 1fr; gap: 26px; }
  .scatter__line { text-align: center; }
  .scatter__uline { margin-inline: auto; }
  .legend { justify-content: center; }
  .scatter__field {
    height: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  }
  .fpill { position: static; left: auto; top: auto; }
  .fpill br { display: none; }
  .halftone, .doodle--curl, .doodle--curl2, .doodle--star2, .cdot { display: none; }
}

/* ==========================================================================
   FEATURES (bento)
   ========================================================================== */
.feat { padding: clamp(30px, 3.4vw, 46px) 0; }
.feat .h2 { margin-bottom: clamp(18px, 1.9vw, 24px); }

.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }

.cell {
  border-radius: var(--r-surface);
  padding: clamp(17px, 1.7vw, 22px);
  display: flex; flex-direction: column;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--rule);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
@media (prefers-reduced-motion: no-preference) {
  .cell:hover {
    transform: translateY(-5px) rotate(-.4deg);
    box-shadow: inset 0 0 0 1px var(--rule), 0 20px 40px -26px rgb(var(--shadow) / .5);
  }
  .cell--a:hover, .cell--e:hover { box-shadow: 0 20px 40px -26px rgb(var(--shadow) / .5); }
}
.cell--a { grid-column: span 3; background: var(--manila); box-shadow: none; }
.cell--b { grid-column: span 3; }
.cell--d { grid-column: span 3; }
.cell--e { grid-column: span 3; background: var(--manila-2); box-shadow: none; }



.cell h3 {
  font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 1.42rem;
  letter-spacing: -.015em; margin-bottom: 6px;
}
.cell p { font-size: .93rem; color: var(--ink-2); line-height: 1.55; max-width: 40ch; }
.cell--a p, .cell--e p { color: color-mix(in srgb, var(--ink) 74%, transparent); }

.cell__chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }

/* mini profile stack */
.stack { margin-top: 18px; padding-top: 0; display: grid; gap: 6px; }
.stack__row {
  display: flex; align-items: center; gap: 10px;
  background: color-mix(in srgb, var(--card) 76%, transparent);
  border-radius: var(--r-inner); padding: 9px 12px;
}
.stack__av {
  width: 26px; height: 26px; flex: none; border-radius: 50%;
  background: var(--red); color: var(--on-red);
  display: grid; place-items: center; font-size: .72rem; font-weight: 700;
}
.stack__row:nth-child(2) .stack__av { background: var(--ink); color: var(--card); }
.stack__row:nth-child(3) .stack__av { background: var(--green); color: var(--on-green); }
.stack__row:nth-child(4) { opacity: .58; }
.stack__row:nth-child(4) .stack__av { background: var(--rule-2); color: var(--ink); }
.stack__nm { font-weight: 600; font-size: .88rem; margin-right: auto; }
.stack__st { font-size: .72rem; color: var(--ink-2); }

/* note on ruled paper. The rules land on each baseline, so it reads as paper
   rather than as a striped box. */
.ruled {
  margin-top: 18px; margin-bottom: 0;
  font-family: var(--serif); font-style: italic; font-size: 1.02rem !important;
  line-height: 28px; color: var(--ink) !important; max-width: none !important;
  background-image: repeating-linear-gradient(transparent 0 27px, var(--rule) 27px 28px);
  padding-top: 0;
}

/* mini insight bars */
.mini { margin-top: 18px; padding-top: 0; display: grid; gap: 18px; max-width: none; }
.mini__row { display: grid; grid-template-columns: 52px 1fr 28px; align-items: center; gap: 12px; font-size: .84rem; font-weight: 600; }
.mini__row span { color: color-mix(in srgb, var(--ink) 74%, transparent); }
.mini__row i {
  height: 12px; border-radius: var(--r-pill);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .35);
  background: var(--red);
  width: var(--w);
  transform-origin: left;
}
.mini__row--r i { background: var(--red); }
.mini__row--b i { background: var(--beige); }
.mini__row--g i { background: var(--green); }
.mini__row b { font-weight: 700; text-align: right; font-size: 1.05rem; font-family: var(--serif); }




/* ==========================================================================
   IN-APP UI PIECES  (library grid, flag pills, note modal)
   These reproduce the shipping app's own components, so the page shows the
   real thing instead of describing it.
   ========================================================================== */

.goldbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(170deg, #E0B657, var(--pill-gold));
  color: #2E2109; font-size: .8rem; font-weight: 700;
  padding: 9px 18px; border-radius: var(--r-pill);
  box-shadow: 0 8px 16px -8px rgb(var(--shadow) / .5), inset 0 1px 0 rgb(255 255 255 / .45);
}
.goldbtn svg {
  width: 15px; height: 15px; padding: 3px; box-sizing: content-box;
  border-radius: 50%; background: color-mix(in srgb, #fff 55%, transparent); fill: #2E2109;
}
.goldbtn--sm { padding: 9px 16px; font-size: .76rem; }
.darkbtn {
  display: inline-flex; align-items: center; justify-content: center;
  background: #2B2620; color: #F3EEE2;
  font-size: .76rem; font-weight: 700;
  padding: 9px 16px; border-radius: var(--r-pill);
}

/* --- Track people: the library of saved profiles --- */
.lib { margin-top: 13px; display: flex; flex-direction: column; flex: 1; }
.lib__bar {
  display: flex; align-items: center; gap: 8px;
  background: color-mix(in srgb, var(--card) 82%, transparent);
  border-radius: var(--r-pill); padding: 7px 12px; margin-bottom: 11px;
  font-size: .74rem; color: var(--ink-2);
}
.lib__bar svg { width: 14px; height: 14px; fill: var(--ink-2); flex: none; }

.lib__grid { display: flex; gap: 11px; }
.lcard {
  position: relative; flex: 1 1 0; min-width: 0;
  background: #FBF8F2; padding: 5px 5px 7px;
  border-radius: 3px;
  box-shadow: 0 10px 20px -12px rgb(var(--shadow) / .5);
}
.lcard--r { transform: rotate(-2.2deg); }
.lcard--g { transform: rotate(1.8deg); }
.lcard--b { transform: rotate(-1.4deg); }
.lcard:nth-child(3) { transform: rotate(1.4deg); }
.lcard img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 1px; }
.lcard__tape {
  position: absolute; top: -6px; left: 20%; z-index: 2;
  width: 52%; height: 12px; transform: rotate(-4deg);
  background: repeating-linear-gradient(-45deg, #DFCEA6 0 5px, #CDB98A 5px 10px);
  box-shadow: 0 2px 4px -2px rgb(var(--shadow) / .4);
}
.lcard figcaption { padding: 6px 2px 0; }
.lcard b {
  display: block; font-family: var(--serif); font-style: italic;
  font-size: .9rem; font-weight: 600; color: #221D14; line-height: 1.1;
}
.lcard i { display: block; font-style: normal; font-size: .58rem; color: #6B6046; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lcard__dots { display: flex; gap: 6px; margin-top: 6px; }
.lcard__dots em {
  display: inline-flex; align-items: center; gap: 2px;
  font-style: normal; font-size: .55rem; font-weight: 700; color: #5C523B;
}
.lcard__dots em::before { content: ''; width: 5px; height: 5px; border-radius: 50%; flex: none; }
.lcard__dots .dr::before { background: var(--flag-red); }
.lcard__dots .db::before { background: var(--flag-beige); }
.lcard__dots .dg::before { background: var(--flag-green); }
.lib__add { margin-top: 12px; width: 100%; }

/* --- Flag system: the real gradient pills --- */
.fdemo { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 9px; align-items: flex-start; }
.gpill {
  position: relative;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px; border-radius: var(--r-pill);
  font-size: .78rem; font-weight: 700; color: var(--on-pill-red);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .38), 0 5px 10px -5px rgb(var(--shadow) / .45);
}
.gpill::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: color-mix(in srgb, currentColor 55%, transparent);
}
.gpill--sm { padding: 6px 13px; font-size: .68rem; }
.gpill--red   { background: linear-gradient(160deg, #F0B3A5, #E39683); }
.gpill--green { background: linear-gradient(160deg, #B9C9A6, #9DB187); color: var(--on-pill-green); }
.gpill--beige { background: linear-gradient(160deg, #DCCBAB, #C4AE86); color: var(--on-pill-beige); }
.gpill--custom {
  background: transparent; color: var(--ink-2);
  border: 1.5px dashed var(--rule-2); box-shadow: none;
}
.gpill--custom::before { background: var(--rule-2); }

.verdict {
  margin-top: auto; padding-top: 20px;
  font-family: var(--serif); font-style: italic; font-size: 1.16rem !important;
  color: color-mix(in srgb, var(--ink) 80%, transparent) !important;
  max-width: none !important;
}
.verdict em { color: var(--accent-on-manila); font-style: italic; }

.gpill__note {
  position: absolute; top: -7px; right: -7px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--pill-gold); display: grid; place-items: center;
  box-shadow: 0 2px 4px -1px rgb(var(--shadow) / .45);
}
.gpill__note svg { width: 9px; height: 9px; fill: #FFF6E4; }
.fdemo__add { margin-top: auto; align-self: flex-start; }

/* --- Private notes: the app's "Add a note" sheet --- */
.nmodal {
  margin-top: 14px;
  background: #FBF8F2; border-radius: 16px; padding: 13px;
  box-shadow: 0 14px 28px -16px rgb(var(--shadow) / .5),
              inset 0 0 0 1.5px color-mix(in srgb, var(--rule-2) 60%, transparent);
}
.nmodal__top { display: flex; align-items: center; justify-content: space-between; }
.nmodal__top b {
  font-family: var(--serif); font-style: italic; font-weight: 600;
  font-size: 1.06rem; color: #221D14;
}
.nmodal__x {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: #EFE7D8;
}
.nmodal__x svg { width: 10px; height: 10px; fill: #6B6046; }
.nmodal .gpill { margin-top: 11px; }
.nmodal__field {
  margin-top: 10px;
  background: #FBEFC9; border: 1.5px solid #E8D08C; border-radius: 11px;
  padding: 10px 11px;
  font-size: .76rem !important; line-height: 1.5; color: #7E683A !important;
  max-width: none !important;
}
.nmodal__btns { display: flex; gap: 9px; margin-top: 12px; }
.nmodal__btns > * { flex: 1; }

@media (max-width: 980px) {
  .cell--a, .cell--e { grid-column: span 6; }
  .cell--b, .cell--d { grid-column: span 3; }
}
@media (max-width: 620px) {
  .cell--a, .cell--b, .cell--d, .cell--e { grid-column: span 6; }
  .lib__grid { flex-wrap: wrap; }
  .lcard { flex: 1 1 40%; }
}

/* ==========================================================================
   COMPATIBILITY
   ========================================================================== */
.compat {
  padding: var(--sec) 0;
  background: var(--manila);
  color: var(--ink);
}
.compat__in {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  gap: clamp(36px, 5vw, 76px); align-items: start;
}
.compat .lead { color: color-mix(in srgb, var(--ink) 76%, transparent); margin-top: 14px; }

.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(20px, 2.4vw, 30px); }
.tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: var(--r-pill);
  font-size: .89rem; font-weight: 600;
  border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  color: color-mix(in srgb, var(--ink) 78%, transparent);
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .12s var(--ease);
}
.tab svg { width: 16px; height: 16px; fill: currentColor; }
.tab:hover { border-color: var(--ink); color: var(--ink); }
.tab:active { transform: translateY(1px); }
.tab.is-on { background: var(--ink); border-color: var(--ink); color: var(--manila); }

.notes { margin-top: clamp(20px, 2.4vw, 30px); display: grid; gap: 12px; max-width: 52ch; }
.notes li { display: flex; gap: 12px; align-items: start; }
.notes p {
  font-size: .93rem; line-height: 1.5;
  color: color-mix(in srgb, var(--ink) 74%, transparent);
}
.notes svg { width: 17px; height: 17px; flex: none; fill: var(--red); margin-top: 3px; }
.notes b { color: var(--ink); font-weight: 600; }

/* readout panel, floating over a slowly turning zodiac wheel */
.compat__panels {
  position: relative;
  display: grid;
  min-height: clamp(430px, 36vw, 530px);
}
.wheel {
  position: absolute; top: -4%; right: -8%;
  width: min(480px, 100%); aspect-ratio: 1;
}
.wheel circle[fill="none"] { stroke: color-mix(in srgb, var(--ink) 38%, transparent); }
.panel { place-self: end start; margin-left: max(0px, 2%); }
@media (prefers-reduced-motion: no-preference) {
  .wheel__spin { transform-origin: 260px 260px; animation: wheelspin 240s linear infinite; }
  @keyframes wheelspin { to { transform: rotate(360deg); } }
}
.panel {
  position: relative; z-index: 1;
  width: min(384px, 100%);
  background: var(--card);
  border-radius: 18px;
  padding: clamp(24px, 2.4vw, 30px);
  transform: rotate(-1.6deg);
  box-shadow: 0 30px 64px -30px rgb(var(--shadow) / .6),
              inset 0 0 0 1.5px color-mix(in srgb, var(--rule-2) 70%, transparent);
}
.panel::before {
  /* dashed file-card inset, straight from the app's flag cards */
  content: ''; position: absolute; inset: 9px;
  border: 1.5px dashed color-mix(in srgb, var(--red) 34%, transparent);
  border-radius: 12px;
  pointer-events: none;
}

/* washi tape holding the card down */
.panel__tape {
  position: absolute; top: -13px; left: 50%; z-index: 2;
  width: 108px; height: 26px;
  transform: translateX(-50%) rotate(-2.5deg);
  background: repeating-linear-gradient(-45deg,
    color-mix(in srgb, var(--manila) 88%, transparent) 0 7px,
    color-mix(in srgb, var(--manila-2) 88%, transparent) 7px 14px);
  box-shadow: 0 2px 5px -2px rgb(var(--shadow) / .35);
}

/* red hand-drawn stroke under the score */
.panel__uline {
  display: block; margin: 2px auto 0;
  width: 150px; height: 13px;
  color: color-mix(in srgb, var(--red) 85%, var(--card));
}
.panel[hidden] { display: none; }
.panel.is-in { animation: panelIn .42s var(--ease) both; }
@keyframes panelIn { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .panel.is-in { animation: none; } }

.panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.who { display: grid; justify-items: center; gap: 2px; text-align: center; flex: 1; }
.who .glyph {
  width: 48px; height: 48px; margin-bottom: 6px;
  display: grid; place-items: center;
  background: var(--manila-2); border-radius: 50%;
  font-family: var(--serif); font-size: 1.32rem; line-height: 1;
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--rule-2) 60%, transparent);
  font-variant-emoji: text;
  transform: rotate(-4deg);
}
.who:last-child .glyph { transform: rotate(4deg); }
.who .glyph--animal { font-size: 1.5rem; font-variant-emoji: emoji; }
.who b { font-size: .95rem; font-weight: 600; }
.who i { font-style: normal; font-size: .8rem; color: var(--ink-2); }
.panel__vs { flex: none; align-self: flex-start; margin-top: 14px; }
.panel__vs svg { width: 20px; height: 20px; fill: var(--red); opacity: .85; }

.score {
  display: flex; align-items: baseline; justify-content: center; gap: 2px;
  margin: 16px 0 0;
}
.score strong {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: clamp(3.2rem, 6vw, 4.2rem);
  line-height: 1; letter-spacing: -.03em; font-variation-settings: 'opsz' 60;
  padding-bottom: .05em;
}
.score span { font-family: var(--serif); font-size: 1.5rem; color: var(--ink-2); }
.score em {
  font-style: italic; font-family: var(--serif); font-size: 1.05rem;
  color: var(--red); margin-left: 12px; align-self: center;
}

.bars { margin-top: 18px; display: grid; gap: 11px; }
.bar {
  display: grid; grid-template-columns: minmax(0, 1fr) 96px 26px;
  align-items: center; gap: 14px; font-size: .85rem;
}
.bar span { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar i {
  position: relative; width: 96px;
  height: 9px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--beige-soft) 70%, var(--card));
  overflow: hidden;
}
.bar i::after {
  content: ''; position: absolute; inset: 0; width: var(--v);
  border-radius: var(--r-pill);
  background: linear-gradient(160deg, #F0B3A5, #DD7A67);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .4);
  transform: scaleX(0); transform-origin: left;
  transition: transform .7s var(--ease);
}
.panel.is-in .bar i::after { transform: scaleX(1); }
.bar:nth-child(1) i::after { transition-delay: .06s; }
.bar:nth-child(2) i::after { transition-delay: .13s; }
.bar:nth-child(3) i::after { transition-delay: .2s; }
.bar:nth-child(4) i::after { transition-delay: .27s; }
.bar:nth-child(5) i::after { transition-delay: .34s; }
.bar b { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .bar i::after { transform: scaleX(1); transition: none; } }

.panel__note {
  margin-top: 18px; padding: 12px 2px 2px;
  border-top: 1.5px dashed color-mix(in srgb, var(--rule-2) 80%, transparent);
  font-family: var(--serif); font-style: italic;
  font-size: 1.02rem; line-height: 27px; color: var(--ink-2);
  background-image: repeating-linear-gradient(transparent 0 26px, var(--rule) 26px 27px);
  background-position: 0 12px;
}

@media (max-width: 900px) {
  .compat__in { grid-template-columns: 1fr; }
  .bar { grid-template-columns: minmax(0, 1fr) 72px 26px; }
}

/* ==========================================================================
   PRIVACY
   ========================================================================== */
.priv { padding-block: var(--sec); }

.priv__seal {
  width: 64px; height: 64px; margin: 0 auto 22px;
  display: grid; place-items: center;
  background: var(--manila); border-radius: 50%;
  transform: rotate(-6deg);
  box-shadow: 0 14px 28px -16px rgb(var(--shadow) / .5);
}
.priv__seal svg { width: 30px; height: 30px; fill: var(--ink); opacity: .8; }

.priv__copy { text-align: center; }
.priv__copy .lead { margin: 22px auto 0; max-width: 58ch; }

/* ==========================================================================
   CTA + FOOTER  (the single dark block)
   ========================================================================== */
.end {
  position: relative; overflow: hidden;
  background: var(--olive); color: var(--bone);
  padding: clamp(64px, 8vw, 108px) 0 clamp(30px, 3vw, 44px);
}
.end__bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .17; filter: saturate(.4);
  pointer-events: none;
}
.end__in { position: relative; text-align: center; }

.end__h {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.1rem, 4.6vw, 3.5rem); line-height: 1.06; letter-spacing: -.02em;
}
.end__s { margin-top: 16px; color: color-mix(in srgb, var(--bone) 68%, transparent); font-size: var(--t-lead); }
.end .stores { justify-content: center; margin-top: clamp(28px, 3.4vw, 40px); }

.end__foot {
  margin-top: clamp(56px, 7vw, 92px);
  padding-top: 26px;
  border-top: 1px solid color-mix(in srgb, var(--bone) 16%, transparent);
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; text-align: left;
}
.end__brand { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.end__brand .brand__mark { width: 32px; height: 32px; }
.end__tag {
  font-size: .68rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: #E0866E;
}
.end__links { display: flex; gap: 24px; font-size: .88rem; }
.end__links a { color: color-mix(in srgb, var(--bone) 66%, transparent); transition: color .18s var(--ease); }
.end__links a:hover { color: var(--bone); }

@media (max-width: 560px) {
  .end__foot { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   MOBILE STICKY DOCK
   ========================================================================== */
.dock {
  position: fixed; z-index: var(--z-dock);
  left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom));
  display: none; align-items: center; justify-content: space-between; gap: 12px;
  background: color-mix(in srgb, var(--card) 94%, transparent);
  backdrop-filter: blur(12px);
  border-radius: var(--r-pill);
  box-shadow: 0 14px 34px -16px rgb(var(--shadow) / .5), inset 0 0 0 1px var(--rule);
  padding: 9px 9px 9px 20px;
  transform: translateY(140%);
  transition: transform .35s var(--ease);
}
.dock.is-up { transform: translateY(0); }
.dock__t { font-size: .82rem; font-weight: 500; color: var(--ink-2); }
.dock .btn { padding: 10px 20px; font-size: .88rem; }

@media (max-width: 860px) { .dock { display: flex; } }
@media (prefers-reduced-motion: reduce) { .dock { transition: none; } }

/* ==========================================================================
   SCROLL REVEAL
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(18px); }
  .reveal.is-in {
    opacity: 1; transform: none;
    transition: opacity .62s var(--ease), transform .62s var(--ease);
    transition-delay: calc(var(--d, 0) * 90ms);
  }
}
.reveal[data-d="1"] { --d: 1; }
.reveal[data-d="2"] { --d: 2; }
.reveal[data-d="3"] { --d: 3; }

/* ==========================================================================
   PRINT
   ========================================================================== */
@media print {
  .nav, .dock, .grain { display: none; }
  .reveal, .fpill { opacity: 1; transform: none; }
}