/**
 * VYNE+ v2 — the site chrome (topbar, mega menus, drawer, footer) plus the
 * front page's own sections.
 *
 * Two kinds of rule live here, and the difference matters: the chrome is
 * deliberately global, because every page wears it; the front page's sections
 * are not, and their class names are ordinary words — .hero, .steps-grid,
 * .proof-block — that other pages use for their own things. Those are written
 * as `body.home .hero`, so the homepage keeps them and nobody else inherits
 * them by accident. Add new front-page rules the same way.
 *
 * tools/find-stray-rules.js compares each class's borders and pseudo-elements
 * against the design and will point at anything that leaks.
 */

/* ============================================================
   Base tokens. Nine of these are still referenced across the
   theme (--ink, --body, --muted, --hairline, --link, …); the
   rest came with the original build and are kept only so the
   palette stays internally consistent.
   ============================================================ */

:root {
  /* --- Brand --- */
  --primary: #ffffff;            /* the single brand color: white type + CTA outlines */

  /* --- Canvas / surface (all nearly-black) --- */
  --canvas: #000000;             /* default page floor, pure black */
  --surface-soft: #0d0d0d;       /* spec rows, dense data sections */
  --surface-card: #141414;       /* career callout, newsroom container */
  --surface-elevated: #1f1f1f;   /* nested cards on rare dense pages */

  /* --- Hairlines / dividers --- */
  --hairline: #262626;           /* 1px divider, quiet */
  --hairline-strong: #3a3a3a;    /* input underline, heavier rule */

  /* --- Text --- */
  --ink: #ffffff;                /* headlines + primary text */
  --on-dark: #ffffff;
  --on-photo: #ffffff;
  --body: #cccccc;               /* running text, slightly cool */
  --body-strong: #e6e6e6;        /* emphasized / lead paragraph */
  --muted: #999999;              /* dates, captions, footer links */
  --muted-soft: #666666;         /* legal, copyright, very-secondary */
  --on-primary: #000000;         /* text on a white fill (rare) */

  /* --- The only chromatic token --- */
  --link: #c3d9f3;               /* inline anchor links + focus, ice-blue */

  /* --- Semantic (almost never on marketing surfaces) --- */
  --warning: #d4a017;            /* technical warnings, recall notices */
  --success: #5fa657;            /* order confirmation states */

  /* --- Semantic aliases --- */
  --text-heading: var(--ink);
  --text-body: var(--body);
  --text-lead: var(--body-strong);
  --text-muted: var(--muted);
  --text-legal: var(--muted-soft);
  --text-link: var(--link);
  --border-divider: var(--hairline);
  --border-input: var(--hairline-strong);
  --border-cta: var(--primary);
  --surface-page: var(--canvas);
}

/* ============================================================
   Bugatti — Typography tokens
   The unbreakable trinity:
     --font-display -> Bugatti Display (Saira Condensed sub) : UPPERCASE headlines + wordmark
     --font-text    -> Bugatti Text Regular (EB Garamond sub): serif running body, sentence case
     --font-mono    -> Bugatti Monospace (JetBrains Mono sub) : buttons, nav, captions, UPPERCASE
   Weight is ALWAYS 400. Emphasis comes from size, tracking, case, family — never bold.
   ============================================================ */

:root {
  /* --- Families (with documented fallback stacks) --- */
  --font-display: 'Saira Condensed', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-text: 'EB Garamond', Garamond, 'Times New Roman', serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', monospace;

  /* --- The one weight --- */
  --weight-regular: 400;

  /* --- Font sizes --- */
  --display-xl-size: 64px;   /* @kind font */
  --display-lg-size: 48px;   /* @kind font */
  --display-md-size: 32px;   /* @kind font */
  --display-sm-size: 24px;   /* @kind font */
  --wordmark-size: 14px;     /* @kind font */
  --title-md-size: 20px;     /* @kind font */
  --title-sm-size: 16px;     /* @kind font */
  --caption-size: 11px;      /* @kind font */
  --body-md-size: 16px;      /* @kind font */
  --body-sm-size: 14px;      /* @kind font */
  --button-size: 14px;       /* @kind font */
  --nav-size: 12px;          /* @kind font */

  /* --- Line heights (unitless) --- */
  --display-xl-lh: 1.1;   /* @kind other */
  --display-lg-lh: 1.15;  /* @kind other */
  --display-md-lh: 1.2;   /* @kind other */
  --display-sm-lh: 1.3;   /* @kind other */
  --wordmark-lh: 1;       /* @kind other */
  --title-md-lh: 1.3;     /* @kind other */
  --title-sm-lh: 1.3;     /* @kind other */
  --caption-lh: 1.4;      /* @kind other */
  --body-md-lh: 1.5;      /* @kind other */
  --body-sm-lh: 1.5;      /* @kind other */
  --button-lh: 1;         /* @kind other */
  --nav-lh: 1.4;          /* @kind other */

  /* --- Letter spacing (tracking) --- */
  --display-xl-ls: 4px;   /* @kind other */
  --display-lg-ls: 3px;   /* @kind other */
  --display-md-ls: 2px;   /* @kind other */
  --display-sm-ls: 1.5px; /* @kind other */
  --wordmark-ls: 6px;     /* @kind other */
  --title-md-ls: 1px;     /* @kind other */
  --title-sm-ls: 1.5px;   /* @kind other */
  --caption-ls: 2px;      /* @kind other */
  --body-md-ls: 0;        /* @kind other */
  --body-sm-ls: 0;        /* @kind other */
  --button-ls: 2.5px;     /* @kind other */
  --nav-ls: 2px;          /* @kind other */
}

/* ============================================================
   Bugatti — Spacing, radius & layout tokens
   Base unit 4px. Section rhythm is generous (120px) — the
   whitespace frames the cars. Radius is binary: 0 for
   everything, pill only for buttons.
   ============================================================ */

:root {
  /* --- Spacing scale (base 4px) --- */
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-xxl: 64px;
  --space-section: 120px;   /* between major editorial bands */

  /* --- Gutters / layout --- */
  --gutter-grid: 40px;      /* between cards in 2-up grids */
  --container-max: 1280px;  /* centered max content width */

  /* --- Radius — binary --- */
  --radius-none: 0px;       /* cards, photos, inputs, spec cells (dominant) */
  --radius-pill: 9999px;    /* buttons only */
  --radius-full: 9999px;    /* circular icon buttons, avatars */

  /* --- Borders --- */
  --border-width: 1px;

  /* --- Control sizing --- */
  --control-height: 44px;   /* button-primary, text-input */
  --icon-button-size: 40px; /* button-icon */

  /* --- Semantic aliases --- */
  --pad-card: var(--space-lg);        /* newsroom / content cards */
  --pad-card-tight: var(--space-md);  /* career callout card */
  --pad-hero: var(--space-xxl);       /* inside hero photo bands */
  --pad-section: var(--space-section);
}

/* ============================================================
   Bugatti — Base & type utilities
   Reusable classes that bind the typography trinity to tokens.
   The page floor is pure black; the system has no light mode.
   ============================================================ */

:root {
  color-scheme: dark;
}

/* --- Display (Bugatti Display, UPPERCASE, wide-tracked, weight 400) --- */
.bg-display-xl,
.bg-display-lg,
.bg-display-md,
.bg-display-sm,
.bg-title-md,
.bg-title-sm,
.bg-wordmark {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}
/* --- Caption / nav / button (Bugatti Monospace, UPPERCASE) --- */
.bg-caption,
.bg-nav,
.bg-button {
  font-family: var(--font-mono);
  font-weight: var(--weight-regular);
  text-transform: uppercase;
  margin: 0;
}
/* --- Body (Bugatti Text Regular, serif, sentence case, no tracking) --- */
.bg-body-md,
.bg-body-sm {
  font-family: var(--font-text);
  font-weight: var(--weight-regular);
  letter-spacing: var(--body-md-ls);
  color: var(--body);
  margin: 0;
}
/* --- Inline link — the only chromatic element --- */
.bg-link {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ===== style block ===== */
/* ============================================================
   VYNE+ — brand layer (warm cinematic edition)
   Built on the design system (../styles.css). Black canvas warmed
   toward candle-lit gold; the equalizer retires to a quiet motif
   while photography + champagne gold + an elegant high-contrast
   serif carry the page. Modelled on the VYNE+ art direction.
   ============================================================ */

/* cyrillic-ext */

/* cyrillic */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic */

/* latin-ext */

/* latin */

/* cyrillic */

/* latin-ext */

/* latin */

/* cyrillic */

/* latin-ext */

/* latin */

:root {
  --vyne-bg: #080605;
  --vyne-bg-soft: #15110a;
  --vyne-panel: #15110c;
  --vyne-panel-2: #1d1712;
  --vyne-line: rgba(231,210,176,0.14);
  --vyne-line-soft: rgba(231,210,176,0.07);

  --vyne-gold: #c9a44c;
  --vyne-gold-soft: #e6cf9e;
  --vyne-gold-deep: #9b7833;
  --vyne-ember: #b5542b;          /* rare warm accent (used very sparingly) */

  --vyne-ink: #f5ede0;
  --vyne-body: #c7bba8;
  --vyne-muted: #8e8474;
  --vyne-faint: #685f52;

  --font-serif: 'Cormorant Garamond', Garamond, 'Times New Roman', serif;
  --font-word: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-read: var(--font-text, 'EB Garamond', Garamond, serif);
  --font-code: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);

  --shell: 1680px;
  --pad: clamp(24px, 5vw, 120px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--vyne-bg); color: var(--vyne-body);
  font-family: var(--font-read); font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
::selection { background: var(--vyne-gold); color: #16100a; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* ---------- Warm cinematic photo placeholder ---------- */
.photo,
.mega-feature .feat-img,
.tile:not(.proof),
.ant-photo,
.collage .hero-photo {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 95% at 22% 12%, rgba(201,164,76,0.20), transparent 46%),
    radial-gradient(80% 70% at 86% 86%, rgba(150,86,38,0.16), transparent 56%),
    radial-gradient(3px 3px at 78% 30%, rgba(230,207,158,0.5), transparent 60%),
    radial-gradient(2px 2px at 88% 44%, rgba(230,207,158,0.4), transparent 60%),
    radial-gradient(2px 2px at 70% 22%, rgba(230,207,158,0.35), transparent 60%),
    linear-gradient(158deg, #1c150d 0%, #0b0807 58%, #120c08 100%);
}
.photo > .ph {
  position: absolute; left: 16px; bottom: 13px; z-index: 2;
  font-family: var(--font-code); font-size: 9.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--vyne-faint);
}

/* ---------- Type primitives ---------- */
.word, .brand-logo, .footer-brand { font-family: var(--font-serif); font-weight: 500; }
.kicker {
  font-family: var(--font-code); font-size: 11px; font-weight: 400;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--vyne-gold);
}
.tagline { font-family: var(--font-code); font-size: 11px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--vyne-gold-soft); }

/* elegant serif display — the signature voice */
.ed-serif, .ed-caps {
  font-family: var(--font-serif); font-weight: 500; color: var(--vyne-ink);
  line-height: 1.0; margin: 0; letter-spacing: 0.005em;
}
body.home .ed-serif em, .ed-caps em{ font-style: italic; font-weight: 500; color: var(--vyne-gold-soft); }
.lede { font-family: var(--font-read); font-size: clamp(16px, 1.6vw, 19px); color: var(--vyne-body); max-width: 58ch; margin: 0; }

/* ---------- Layout ---------- */
.shell { max-width: var(--shell); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.section { position: relative; padding: clamp(32px, 4.5vw, 60px) 0; border-top: 1px solid var(--vyne-line-soft); }
.section-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: clamp(36px, 5vw, 64px); }
.section-head .h { margin-top: 4px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-word); font-size: 12px; font-weight: 400;
  letter-spacing: 0.22em; text-transform: uppercase; white-space: nowrap;
  padding: 14px 30px; border-radius: 0; cursor: pointer;
  background: transparent; color: var(--vyne-ink);
  border: 1px solid var(--vyne-line); transition: all 220ms ease;
}
.btn:hover { border-color: var(--vyne-gold-soft); color: #fff; }
.btn.lg { padding: 17px 38px; font-size: 12.5px; }
.btn.primary {
  border: 1px solid var(--vyne-gold);
  background: linear-gradient(180deg, #d9b765, #b98f3c);
  color: #1a1206; font-weight: 500;
}
.btn.primary:hover { background: linear-gradient(180deg, #e7c87a, #c89a44); color: #140d04; border-color: var(--vyne-gold-soft); }
.btn.on-media { border-color: rgba(245,237,224,0.5); color: #fff; }
.btn.on-media:hover { border-color: #fff; background: rgba(255,255,255,0.06); }

/* The homepage's old subscription card (.sub) is gone — the band renders as
   .subs-band/.sb-* now — but these rules stayed behind and, being global, kept
   landing on every other page's `.sub`, which is a line of text there: a 1px
   frame, a 380px min-height and a 2px gold hairline as ::after. Removed at the
   source rather than undone page by page. */
/* ---------- Top bar ---------- */
.notif {
  background: #1b130b; border-bottom: 1px solid rgba(201,164,76,0.12);
  text-align: center; padding: 11px 16px;
  font-family: var(--font-read); font-style: italic; font-size: 14px; letter-spacing: 0.01em; color: var(--vyne-gold-soft);
}
.notif b { font-style: normal; font-family: var(--font-code); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--vyne-gold); }
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(8,6,5,0.72); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--vyne-line-soft);
}
.menubar {
  max-width: var(--shell); margin: 0 auto; padding: 0 var(--pad);
  height: 84px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  transition: height 240ms ease;
}
.topbar.shrink .menubar { height: 64px; }
.nav { display: flex; gap: 34px; align-items: center; list-style: none; margin: 0; padding: 0; }
.nav.right { justify-content: flex-end; }
.nav a, .nav button.linkish {
  font-family: var(--font-word); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; white-space: nowrap;
  color: var(--vyne-body); background: none; border: none; cursor: pointer; padding: 6px 0;
}
.nav a:hover, .nav button.linkish:hover { color: var(--vyne-ink); }
.brand-logo { justify-self: center; font-size: 30px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--vyne-ink); padding-left: 0.22em; text-decoration: none; }
.topbar.shrink .brand-logo { font-size: 25px; }
.brand-logo .vyne-word { display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom; animation: vyne-word-loop 5.5s ease-in-out infinite; }
.brand-logo .plus { display: inline-block; animation: vyne-plus-loop 5.5s ease-in-out infinite; }
@keyframes vyne-word-loop { 0%, 58% { max-width: 6em; opacity: 1; transform: none; } 70% { max-width: 0; opacity: 0; transform: translateX(8px); } 84% { max-width: 0; opacity: 0; transform: translateX(8px); } 96%, 100% { max-width: 6em; opacity: 1; transform: none; } }
@keyframes vyne-plus-loop { 0%, 58% { transform: rotate(0) scale(1); } 70% { transform: rotate(180deg) scale(1.18); } 84% { transform: rotate(180deg) scale(1.18); } 96%, 100% { transform: rotate(360deg) scale(1); } }
@media (prefers-reduced-motion: reduce) { .brand-logo .vyne-word, .brand-logo .plus { animation: none; } }
.brand-logo .plus, .footer-brand .plus, .word .plus { color: var(--vyne-gold); }
.right-cluster { display: flex; gap: 22px; align-items: center; justify-self: end; }
.icon-btn {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--vyne-line);
  background: transparent; color: var(--vyne-ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: border-color 200ms ease;
}
.icon-btn:hover { border-color: var(--vyne-gold-soft); }
.lang { font-family: var(--font-code); font-size: 10.5px; letter-spacing: 0.18em; color: var(--vyne-muted); background: none; border: none; cursor: pointer; text-transform: uppercase; white-space: nowrap; }

/* ---------- Mega menu ---------- */
.mega { position: absolute; left: 0; right: 0; top: 100%; background: #f4ede0; backdrop-filter: blur(18px); border-bottom: 1px solid rgba(36,28,20,0.14); box-shadow: 0 24px 48px rgba(0,0,0,0.18); padding: 40px var(--pad) 48px; z-index: 49; }
  .mega .mega-tag { color: #9b7833; }
  .mega .feat-title { color: #241c14; }
  .mega .feat-cta { color: #9b7833; }
  .mega .mega-feature .feat-img { border-color: rgba(36,28,20,0.16); }
  .mega .mega-sub { border-color: rgba(36,28,20,0.16); background: rgba(184,146,60,0.1); }
  .mega .mega-sub-k { color: #9b7833; }
  .mega .mega-sub-t { color: #241c14; }
  .mega .mega-sub-d { color: #574a38; }
  .mega .mega-feature:hover .feat-title, .mega .mega-sub:hover .mega-sub-t { color: #b8923c; }
.mega[hidden] { display: none; }
.mega-inner { max-width: var(--shell); margin: 0 auto; }
.mega-tag { font-family: var(--font-code); font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--vyne-gold); }
.mega-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 24px; }
.mega-feature { cursor: pointer; }
.mega-feature .feat-img { aspect-ratio: 4/3; border: 1px solid var(--vyne-line-soft); display: flex; align-items: flex-end; padding: 12px; }
.mega-feature .feat-img span { position: relative; font-family: var(--font-code); font-size: 10px; letter-spacing: 0.12em; color: var(--vyne-faint); text-transform: uppercase; }
.feat-title { font-family: var(--font-serif); font-size: 23px; color: var(--vyne-ink); margin-top: 14px; }
.feat-cta { font-family: var(--font-code); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--vyne-gold-soft); margin-top: 6px; }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 94svh; display: flex; align-items: center; overflow: hidden; }
body.home .hero-photo-bg{ position: absolute; inset: 0; z-index: 0; background: #080605 url("blob:http://localhost:8899/34f01300-6603-4a7e-a391-0c228a20214d") center right / cover no-repeat; }
body.home .hero-photo-bg::after{ content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,6,5,0.94) 0%, rgba(8,6,5,0.78) 32%, rgba(8,6,5,0.22) 56%, rgba(8,6,5,0.12) 78%, rgba(8,6,5,0.4) 100%); }
body.home .hero-inner{ position: relative; z-index: 2; max-width: var(--shell); margin: 0 auto; width: 100%; padding: 0 var(--pad); }
body.home .hero-eyebrow{ font-family: var(--font-code); font-size: 12px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--vyne-gold-soft); display: block; }
body.home .hero-title{ margin: 14px 0 0; }
body.home .hero-title .thin{ display: block; font-family: var(--font-serif); font-weight: 400; font-size: clamp(38px, 6vw, 76px); line-height: 1; color: var(--vyne-ink); letter-spacing: 0.01em; }
body.home .hero-title .big{ display: block; font-family: var(--font-serif); font-weight: 600; font-size: clamp(78px, 14vw, 190px); line-height: 0.86; color: var(--vyne-ink); margin-top: 2px; letter-spacing: 0.005em; }
body.home .hero-lede{ max-width: 58ch; margin: 30px 0 0; color: var(--vyne-body); font-size: clamp(16px, 1.6vw, 19px); }
body.home .hero-glyph{ height: 22px; margin: 26px 0 0; opacity: 0.92; }
.hero-cta { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }
body.home .scroll-hint{ position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 2; font-family: var(--font-code); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--vyne-muted); display: flex; flex-direction: column; align-items: center; gap: 8px; }
body.home .scroll-hint .line{ width: 1px; height: 34px; background: linear-gradient(var(--vyne-gold), transparent); }

/* ---------- Steps (photo cards) ---------- */
.steps-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.step-card { display: flex; flex-direction: column; }
.step-photo { position: relative; aspect-ratio: 3/4.4; cursor: pointer; background: #0d0a07 center / cover no-repeat; overflow: hidden; }
.step-photo .scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,6,5,0.1) 0%, rgba(8,6,5,0) 35%, rgba(8,6,5,0.85) 100%); z-index: 1; }
.step-photo .ph { position: absolute; left: 14px; top: 12px; z-index: 2; font-family: var(--font-code); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--vyne-faint); }
.step-meta { position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 2; }
.step-n { font-family: var(--font-code); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--vyne-gold); }
.step-meta h3 { font-family: var(--font-serif); font-weight: 500; font-size: clamp(18px, 1.5vw, 23px); color: var(--vyne-ink); margin: 6px 0 0; line-height: 1.05; padding-right: 30px; }
.step-plus { position: absolute; right: 14px; bottom: 14px; z-index: 3; width: 30px; height: 30px; border: 1px solid rgba(245,237,224,0.4); background: rgba(8,6,5,0.35); color: var(--vyne-ink); font-size: 17px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 240ms ease; animation: vyne-pulse 2.4s ease-in-out infinite; }
.step-card:hover .step-plus, .step-card.open .step-plus { animation: none; }
.step-card.open .step-plus { transform: rotate(45deg); border-color: var(--vyne-gold); color: var(--vyne-gold); }
.step-desc { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 360ms ease; }
.step-card.open .step-desc { grid-template-rows: 1fr; }
.step-desc-inner { overflow: hidden; }
.step-desc p { font-family: var(--font-read); font-size: 14px; color: var(--vyne-body); margin: 14px 2px 0; line-height: 1.45; }
/* Steps sit on a cream background — the revealed description needs dark ink, not the light body colour. */
.steps-cream .step-desc p { color: #4a3f2a; }
body.home .steps-legend{ font-family: var(--font-code); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vyne-muted); margin-top: 26px; }

/* ---------- Divider glyph ---------- */
.divider { display: flex; align-items: center; justify-content: center; gap: 24px; max-width: var(--shell); margin: 0 auto; padding: clamp(12px, 2.5vw, 28px) var(--pad); }
.divider .rule { height: 1px; flex: 1; max-width: 280px; background: linear-gradient(to right, transparent, var(--vyne-line), transparent); }
.wave-glyph { display: block; height: 18px; width: auto; color: var(--vyne-gold); flex: none; }
.divider .wave-glyph { opacity: 0.9; }
.footer-tag { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.footer-tag .wave-glyph { height: 16px; }

/* ---------- Audiences ---------- */
.aud-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.aud { border: 1px solid var(--vyne-line); background: var(--vyne-panel); overflow: hidden; cursor: pointer; transition: border-color 240ms ease; position: relative; }
.aud:hover { border-color: rgba(201,164,76,0.5); }.aud.open .aud-expand { grid-template-rows: 1fr; }.aud ul { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-direction: column; gap: 8px; }
.aud ul li { font-family: var(--font-code); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--vyne-muted); padding-left: 18px; position: relative; }
.aud ul li::before { content: ''; position: absolute; left: 0; top: 5px; width: 6px; height: 6px; background: var(--vyne-gold); }@keyframes vyne-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(201,164,76,0); } 50% { box-shadow: 0 0 0 5px rgba(201,164,76,0.16); } }
.plus-toggle { position: absolute; bottom: 14px; right: 14px; z-index: 3; width: 32px; height: 32px; border-radius: 0; border: 1px solid rgba(245,237,224,0.45); color: var(--vyne-ink); display: flex; align-items: center; justify-content: center; font-size: 18px; background: rgba(8,6,5,0.5); transition: transform 300ms ease; cursor: pointer; animation: vyne-pulse 2.4s ease-in-out infinite; }
.aud:hover .plus-toggle, .aud.open .plus-toggle { animation: none; }
.aud.open .plus-toggle { transform: rotate(45deg); border-color: var(--vyne-gold); color: var(--vyne-gold); }

/* ---------- Audiences — bright (cream) variant ---------- */
.audiences-bright { background: linear-gradient(180deg, #e0d2b6 0%, #d4c4a6 55%, #cdbb99 100%); border-top-color: rgba(42,33,26,0.2); }
/* ---------- Proof tabs ---------- */
.tab-row { display: flex; border-bottom: 1px solid var(--vyne-line); margin-bottom: 40px; }
.tab { font-family: var(--font-word); font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--vyne-muted); background: none; border: none; padding: 14px 26px; cursor: pointer; position: relative; }
.tab.active { color: var(--vyne-ink); }
.tab.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--vyne-gold); }
.panel[hidden] { display: none; }
.panel-head { max-width: 64ch; margin-bottom: 36px; }
.panel-head h3 { font-family: var(--font-serif); font-weight: 500; font-size: clamp(28px, 4vw, 46px); color: var(--vyne-ink); margin: 0 0 14px; }
.collage { display: grid; grid-template-columns: 1.3fr 1fr 1fr; grid-auto-rows: 234px; gap: 18px; }
.collage > div { border: 1px solid var(--vyne-line); padding: 22px; background: var(--vyne-panel); position: relative; }
.collage .hero-photo { grid-row: span 2; display: flex; align-items: flex-end; color: var(--vyne-faint); font-family: var(--font-code); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; }
.collage .big-num { font-family: var(--font-serif); font-weight: 500; font-size: 48px; color: var(--vyne-gold-soft); line-height: 1; margin: 10px 0; }
.collage .chart-area, .collage .body { font-size: 13px; color: var(--vyne-body); }
.collage .quote-card { grid-column: span 2; background: #0a0706; border-color: var(--vyne-gold-deep); }
.collage .qmark { font-family: var(--font-serif); font-size: 50px; color: var(--vyne-gold); line-height: 0.5; }
.collage .qtext { font-family: var(--font-serif); font-style: italic; font-size: 23px; color: var(--vyne-ink); margin: 10px 0; }
.collage .qauthor, .collage .head { font-family: var(--font-code); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vyne-muted); }
.collage .head { color: var(--vyne-ink); margin-top: 8px; }
body.home .panel-more{ display: inline-block; margin-top: 28px; font-family: var(--font-code); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--vyne-gold-soft); border-bottom: 1px solid var(--vyne-line); padding-bottom: 4px; }

/* ---------- Gallery — social-proof masonry wall ---------- */
.g-wall { columns: 5; column-gap: 14px; }
.g-wall > * { break-inside: avoid; margin: 0 0 14px; width: 100%; display: block; }
.g-card { border: 1px solid var(--vyne-line); background: var(--vyne-panel); overflow: hidden; position: relative; }.g-cap-card { padding: 20px 22px; }
.g-cap-card .q { font-family: var(--font-serif); font-style: italic; font-size: 20px; line-height: 1.25; color: var(--vyne-ink); }
.g-cap-card .by { font-family: var(--font-code); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--vyne-muted); margin-top: 10px; }
.g-quote { padding: 28px 26px; }
.g-quote.dark { background: #000; border-color: #1c1813; }
.g-quote.light { background: var(--vyne-panel-2); border-color: var(--vyne-gold-deep); }
.g-quote .qm { font-family: var(--font-serif); font-size: 46px; line-height: 0.3; color: var(--vyne-gold); display: block; }
.g-quote .qt { font-family: var(--font-serif); font-style: italic; font-size: 23px; line-height: 1.2; color: var(--vyne-ink); margin: 18px 0 0; }
.g-quote .qb { font-family: var(--font-code); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--vyne-muted); margin-top: 16px; }
.g-rating { padding: 46px 20px; text-align: center; background: #0a0706; }
.g-rating .r { font-family: var(--font-serif); font-weight: 500; font-size: 56px; color: var(--vyne-gold-soft); line-height: 1; }
.g-rating .rl { font-family: var(--font-code); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--vyne-muted); margin-top: 14px; line-height: 1.7; }
.g-media { position: relative; background: #0d0a07 center / cover no-repeat; }
.g-media .ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; text-align: center; font-family: var(--font-read); font-style: italic; font-size: 13px; color: var(--vyne-faint); }
.g-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 2; }
.g-play span { width: 56px; height: 56px; border: 1px solid rgba(245,237,224,0.65); border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(8,6,5,0.32); color: var(--vyne-ink); padding-left: 3px; }
.g-dur { position: absolute; top: 12px; left: 12px; z-index: 2; font-family: var(--font-code); font-size: 10px; letter-spacing: 0.08em; color: #fff; background: rgba(8,6,5,0.7); padding: 5px 9px; display: inline-flex; gap: 6px; align-items: center; }
.g-foot { padding: 13px 16px; font-family: var(--font-read); font-style: italic; font-size: 13px; color: var(--vyne-body); border-top: 1px solid var(--vyne-line-soft); }
.g-audio { padding: 28px 22px 20px; text-align: center; }
.g-audio .wave { color: var(--vyne-gold); height: 56px; width: 100%; display: block; }
.g-audio .al { font-family: var(--font-code); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--vyne-muted); margin-top: 14px; }
@media (max-width: 1200px) { .g-wall { columns: 4; } }
@media (max-width: 980px) { .g-wall { columns: 3; } }
@media (max-width: 680px) { .g-wall { columns: 2; } }
@media (max-width: 460px) { .g-wall { columns: 1; } }

/* ---------- Gallery — bright (cream) variant ---------- */
.gallery-bright { background: linear-gradient(180deg, #e0d2b6 0%, #d4c4a6 55%, #cdbb99 100%); border-top-color: rgba(42,33,26,0.2); }
.gallery-bright .kicker { color: #9b7833; }
.gallery-bright .ed-serif, .gallery-bright .section-head h2 { color: #241c14; }
.gallery-bright .ed-serif em { color: #9b7833; }
/* photo / video cards: warm card frame */
.gallery-bright .g-card { border-color: rgba(42,33,26,0.16); background: #f7f1e6; }
.gallery-bright .g-foot { color: #4f4234; border-top-color: rgba(42,33,26,0.12); }
.gallery-bright .g-media, .gallery-bright .g-photo { background-color: #e3d8c4; }
/* text quote cards */
.gallery-bright .g-cap-card { background: #f7f1e6; }
.gallery-bright .g-cap-card .q { color: #241c14; }
.gallery-bright .g-cap-card .by { color: #8a7a60; }
.gallery-bright .g-quote.dark { background: #221a12; border-color: #9b7833; }
.gallery-bright .g-quote.dark .qt { color: #f5ede0; }
.gallery-bright .g-quote.dark .qb { color: #c9a44c; }
.gallery-bright .g-quote.light { background: #efe3cc; border-color: #c9a44c; }
.gallery-bright .g-quote.light .qm { color: #b8923c; }
.gallery-bright .g-quote.light .qt { color: #2a2014; }
.gallery-bright .g-quote.light .qb { color: #8a7a60; }
/* rating tile */
.gallery-bright .g-rating { background: #221a12; }
.gallery-bright .g-rating .r { color: #e6cf9e; }
.gallery-bright .g-rating .rl { color: #b8a886; }
/* audio waveform card */
.gallery-bright .g-audio .wave { color: #b8923c; }
.gallery-bright .g-audio .al { color: #8a7a60; }

/* ---------- Subscriptions ---------- */
.subs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

/* ---------- Heartbeat ---------- */
/* ---------- Heartbeat (full-bleed band — image sets height, text right) ---------- */
.heartbeat-band { position: relative; width: 100%; background: #efe6d8; border-top: 1px solid var(--vyne-line-soft); overflow: hidden; }
.hb-bg { display: block; width: 100%; height: auto; }
.heartbeat-band::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(244,236,224,0) 44%, rgba(245,237,225,0.42) 72%, rgba(247,239,228,0.6) 100%); }
.hb-band-inner { position: absolute; inset: 0; z-index: 2; max-width: var(--shell); margin: 0 auto; width: 100%; padding: 0 var(--pad); display: flex; align-items: center; justify-content: flex-end; }
.hb-band-inner .hb-copy { max-width: 460px; text-align: left; }
@media (max-width: 820px) {
  .heartbeat-band::after { display: none; }
  .hb-band-inner { position: static; background: #efe6d8; padding: 28px var(--pad) 44px; justify-content: flex-start; }
}
/* readable, soft baby palette on the light backdrop */
.heartbeat-band .hb-copy .kicker { color: #c2778d; }
.heartbeat-band .hb-copy h3 { color: #38282b; }
.heartbeat-band .hb-copy p { color: #574643; }
.heartbeat-band .hb-copy .hb-shapes .ic { border-color: rgba(56,40,43,0.34); color: #b06a7c; }
.heartbeat-band .hb-copy .hb-shapes span.note { color: #7d6a64; }
.heartbeat-band .hb-copy .btn.primary { background: #c2778d; border-color: #c2778d; color: #fff7f9; }
.heartbeat-band .hb-copy .btn.primary:hover { background: #a85d74; border-color: #a85d74; color: #fff; }
.hb { display: grid; grid-template-columns: 0.85fr 1fr; gap: 56px; align-items: center; }.hb-pulse { position: absolute; top: 26px; left: 0; right: 0; height: 60px; }
.hb-pulse canvas { width: 100%; height: 100%; }
.bottle { position: relative; width: 150px; height: 420px; }
.bottle .glass { position: absolute; inset: 0; background: linear-gradient(100deg, #0c0c0d 0%, #20201c 40%, #060605 60%, #1a1813 100%); border: 1px solid rgba(231,210,176,0.1); clip-path: polygon(38% 0, 62% 0, 62% 12%, 70% 22%, 74% 40%, 74% 100%, 26% 100%, 26% 40%, 30% 22%, 38% 12%); box-shadow: inset 0 0 40px rgba(0,0,0,0.7); }
.bottle .eq-label { position: absolute; left: 26%; right: 26%; top: 30%; bottom: 0; overflow: hidden; }
.bottle .eq-label canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.bottle .plate { position: absolute; left: 26%; right: 26%; top: 52%; height: 40%; background: rgba(8,7,5,0.82); border: 1px solid var(--vyne-gold); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 8px; }
.bottle .plate .pw { font-family: var(--font-serif); font-size: 13px; letter-spacing: 0.2em; color: var(--vyne-gold); }
.bottle .plate .ps { font-family: var(--font-serif); font-style: italic; font-size: 14px; color: var(--vyne-ink); line-height: 1.1; }
.hb-copy .kicker { color: var(--vyne-gold); }
.hb-copy h3 { font-family: var(--font-serif); font-weight: 500; font-size: clamp(34px, 5vw, 56px); color: var(--vyne-ink); margin: 14px 0 16px; }
/* ---------- Poll ---------- */
.poll-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }.poll-card.voted { border-color: var(--vyne-gold); }.poll-card.voted .vote-btn { border-color: var(--vyne-gold); color: var(--vyne-gold); cursor: default; }
.capture { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 32px; border-top: 1px solid var(--vyne-line); padding-top: 28px; flex-wrap: wrap; }
.capture .lead { font-family: var(--font-code); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--vyne-muted); }
/* The front page's own capture row. Scoped, like every other front-page
   section here: unscoped, `.field` reached the configurator's label step and
   the artist portal, where .field means something else entirely. */
body.home .capture .field { display: flex; gap: 12px; flex: 1; min-width: 280px; max-width: 520px; }
body.home .capture .field input { flex: 1; background: transparent; border: none; border-bottom: 1px solid var(--vyne-line); color: var(--vyne-ink); font-family: var(--font-read); font-size: 16px; padding: 10px 2px; outline: none; }
body.home .capture .field input:focus { border-color: var(--vyne-gold); }
body.home .capture .field input::placeholder { color: var(--vyne-faint); }

/* ---------- Antarctica ---------- */
.antarctica { background: var(--vyne-bg-soft); }
/* ---------- FAQ ---------- */
.faq-list { border-top: 1px solid var(--vyne-line); max-width: 920px; }
.faq-item { border-bottom: 1px solid var(--vyne-line); }
.faq-item summary { list-style: none; cursor: pointer; padding: 24px 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; font-family: var(--font-serif); font-weight: 500; font-size: clamp(20px, 2.2vw, 26px); color: var(--vyne-ink); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-family: var(--font-word); font-size: 24px; color: var(--vyne-gold); transition: transform 300ms ease; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-body { padding: 0 0 26px; max-width: 72ch; }
.faq-body p { margin: 0; color: var(--vyne-body); }

/* ---------- Footer ---------- */
.site-footer { background: #050403; border-top: 1px solid var(--vyne-line); padding: clamp(56px, 8vw, 96px) 0 40px; position: relative; overflow: hidden; }
.footer-top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 40px; border-bottom: 1px solid var(--vyne-line-soft); flex-wrap: wrap; gap: 20px; }
.footer-brand { font-size: 44px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--vyne-ink); padding-left: 0.2em; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 36px; padding: 48px 0; }
.footer-grid h4 { font-family: var(--font-code); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--vyne-gold-soft); margin: 0 0 18px; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.footer-grid ul a { font-family: var(--font-read); font-size: 15px; color: var(--vyne-muted); }
.footer-grid ul a:hover { color: var(--vyne-ink); }.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 28px; border-top: 1px solid var(--vyne-line-soft); flex-wrap: wrap; }
.footer-legal { display: flex; gap: 22px; flex-wrap: wrap; }
.footer-legal a { font-family: var(--font-code); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--vyne-muted); }
.footer-legal a:hover { color: var(--vyne-ink); }
.footer-meta { font-family: var(--font-code); font-size: 10.5px; letter-spacing: 0.1em; color: var(--vyne-faint); padding-top: 20px; }

/* ---------- Scroll-reveal entrance animations ---------- */
/* Base state stays fully visible; the hidden start-state only applies
   once JS adds .anim-ready, so no-JS / print / throttled = always visible. */
.reveal { }
html.anim-ready .reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.9s cubic-bezier(.2,.7,.2,1), transform 0.9s cubic-bezier(.2,.7,.2,1); will-change: opacity, transform; }
html.anim-ready .reveal.in { opacity: 1; transform: none; }

/* Stagger: container stays put, its direct children rise in sequence. */
html.anim-ready .stagger > * { opacity: 0; transform: translateY(28px); transition: opacity 0.8s cubic-bezier(.2,.7,.2,1), transform 0.8s cubic-bezier(.2,.7,.2,1); }
html.anim-ready .stagger.in > * { opacity: 1; transform: none; }
html.anim-ready .stagger.in > *:nth-child(1) { transition-delay: 0.04s; }
html.anim-ready .stagger.in > *:nth-child(2) { transition-delay: 0.12s; }
html.anim-ready .stagger.in > *:nth-child(3) { transition-delay: 0.20s; }
html.anim-ready .stagger.in > *:nth-child(4) { transition-delay: 0.28s; }
html.anim-ready .stagger.in > *:nth-child(5) { transition-delay: 0.36s; }
html.anim-ready .stagger.in > *:nth-child(6) { transition-delay: 0.44s; }
html.anim-ready .stagger.in > *:nth-child(7) { transition-delay: 0.52s; }

@media (prefers-reduced-motion: reduce) {
  html.anim-ready .reveal, html.anim-ready .reveal.in,
  html.anim-ready .stagger > *, html.anim-ready .stagger.in > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .plus-toggle, .step-plus { animation: none; }
}
@media print {
  html.anim-ready .reveal, html.anim-ready .stagger > * { opacity: 1 !important; transform: none !important; }
}

/* ---------- Running-text marquee ---------- */
.marquee { overflow: hidden; border-top: 1px solid var(--vyne-line-soft); border-bottom: 1px solid var(--vyne-line-soft); padding: clamp(18px, 2.6vw, 30px) 0; background: var(--vyne-bg-soft); }
.marquee-track { display: inline-flex; align-items: center; white-space: nowrap; animation: vyne-marquee 48s linear infinite; will-change: transform; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span { font-family: var(--font-serif); font-weight: 500; font-size: clamp(18px, 2.1vw, 30px); line-height: 1; color: var(--vyne-body); padding: 0 0.55em; letter-spacing: 0.02em; }
.marquee-track em { font-style: italic; color: var(--vyne-gold-soft); }
.marquee-track .sep { color: var(--vyne-gold); font-size: 9px; padding: 0 0.1em; transform: translateY(-2px); opacity: 0.85; }
@keyframes vyne-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .collage { grid-template-columns: 1fr 1fr; }
  .collage .hero-photo { grid-row: auto; grid-column: span 2; min-height: 220px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .hb { grid-template-columns: 1fr; gap: 36px; }
  body.home .steps-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
  .nav.left, .nav.right { display: none; }
  .menubar { grid-template-columns: auto 1fr auto; }
  .aud-row, .subs-grid, .poll-grid, .mega-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }  .capture { flex-direction: column; align-items: stretch; }
  body.home .steps-grid{ grid-template-columns: repeat(2, 1fr); }
}
/* ---------- Mobile chrome (from the mobile design's own ≤860px layer) ----------
   Site-wide, because the footer and the header icon buttons are shared chrome.
   Stacking all five footer columns made the footer 600px taller than the design. */
@media (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .footer-news { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 16px; }
  .icon-btn { width: 44px; height: 44px; }
}
@media (max-width: 560px) {
  .collage { grid-template-columns: 1fr; }
  .collage .hero-photo, .collage .quote-card { grid-column: auto; }
  .gallery-grid { grid-template-columns: 1fr; }
  body.home .steps-grid{ grid-template-columns: 1fr; }
  body.home .hero-title .big{ font-size: clamp(64px, 22vw, 96px); }
}

/* ===== style block ===== */
.section-head .kicker,.hb-copy .kicker{display:inline-flex;align-items:center}.section-head .kicker::before,.hb-copy .kicker::before{content:'';display:inline-block;width:26px;height:1px;background:currentColor;vertical-align:middle;margin-right:14px;opacity:.9}
/* ===== style block ===== */

  @keyframes megaIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
  @keyframes megaItemIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  @keyframes megaTagIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
  @keyframes megaMediaIn { from { transform: scale(1.06); } to { transform: scale(1); } }
  @media (prefers-reduced-motion: no-preference) {
    .mega:not([hidden]) { animation: megaIn .28s cubic-bezier(.22,.61,.36,1) both; }
    .mega:not([hidden]) .mega-tag { animation: megaTagIn .3s cubic-bezier(.22,.61,.36,1) both; }
    .mega:not([hidden]) .mega-feature,
    .mega:not([hidden]) .mega-sub,
    .mega:not([hidden]) .drop-item { animation: megaItemIn .4s cubic-bezier(.22,.61,.36,1) both; }
    .mega:not([hidden]) .mega-grid > *:nth-child(1),
    .mega:not([hidden]) .drop-list > *:nth-child(1) { animation-delay: .04s; }
    .mega:not([hidden]) .mega-grid > *:nth-child(2),
    .mega:not([hidden]) .drop-list > *:nth-child(2) { animation-delay: .09s; }
    .mega:not([hidden]) .mega-grid > *:nth-child(3),
    .mega:not([hidden]) .drop-list > *:nth-child(3) { animation-delay: .14s; }
    .mega:not([hidden]) .mega-grid > *:nth-child(4),
    .mega:not([hidden]) .drop-list > *:nth-child(4) { animation-delay: .19s; }
    /* Shop's photos settle out of a gentle push-in. The dropdown thumbs carry
       their own border, so scaling them would scale the border too — they ride
       the item's rise instead. */
    .mega:not([hidden]) .feat-zoom { animation: megaMediaIn .7s cubic-bezier(.22,.61,.36,1) both; }
  }
  .mega-feature { text-decoration: none; display: block; }
  .mega-feature .feat-img { background-size: cover; background-position: center; background-color: #14100b; }
  .mega-grid-shop { grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 20px; }
  .mega .mega-grid-shop .feat-title { font-weight: 600; font-size: 21px; line-height: 1.18; margin-top: 11px; }
  .mega .mega-grid-shop .feat-cta { font-size: 10px; margin-top: 5px; }
  .mega .mega-grid-shop .mega-sub { padding: 18px; }
  .mega .mega-grid-shop .mega-sub-t { font-weight: 600; font-size: 23px; }
  .mega .mega-grid-shop .mega-sub-d { font-size: 12px; }
  .mega-sub { text-decoration: none; display: flex; flex-direction: column; justify-content: center; gap: 8px; border: 1px solid var(--vyne-line-soft); padding: 22px; background: rgba(201,164,76,0.06); }
  .mega-sub-k { font-family: var(--font-code); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--vyne-gold); }
  .mega-sub-t { font-family: var(--font-serif); font-size: 26px; color: var(--vyne-ink); }
  .mega-sub-d { font-family: var(--font-read); font-size: 13px; line-height: 1.5; color: var(--vyne-body); }
  .mega-feature:hover .feat-title, .mega-sub:hover .mega-sub-t { color: var(--vyne-gold-soft); }
  @media (max-width: 1000px) { .mega-grid-shop { grid-template-columns: 1fr 1fr; } }

  /* ---------- Compact dropdown (How it works · Journal) ------------------
     The second dropdown shape in the desktop header design: a row of small
     4:3 thumbs with a title and one line of description, rather than the
     Shop panel's big feature cards. */
  .mega.mega-drop .drop-panel { max-width: none; }
  .drop-list { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; margin-top: 18px; }
  .drop-item { display: block; text-decoration: none; transition: transform .4s cubic-bezier(.22,.61,.36,1); }
  .drop-item:hover { transform: translateY(-4px); }
  .drop-item:focus-visible { outline: 2px solid #b8923c; outline-offset: 4px; }
  .drop-thumb { display: block; width: 100%; aspect-ratio: 4/3; border-radius: 6px; overflow: hidden; position: relative; background: #14100b center/cover no-repeat; border: 1px solid rgba(36,28,20,0.16); }
  .drop-thumb.ph { background: linear-gradient(150deg, #efe6d5, #e2d6bf); display: grid; place-items: center; }
  .drop-thumb.ph span { font-family: var(--font-code); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: #9b8a6f; }
  .drop-t, .drop-d { display: block; }
  .drop-t { font-family: var(--font-serif); font-weight: 600; font-size: 19px; line-height: 1.18; color: #241c14; margin-top: 9px; transition: color .25s ease; }
  .drop-item:hover .drop-t { color: #b8923c; }
  .drop-d { font-family: var(--font-read); font-size: 11.5px; line-height: 1.45; color: #574a38; margin-top: 4px; }
  @media (max-width: 1000px) { .drop-list { grid-template-columns: repeat(4, 1fr); } }
  @media (max-width: 700px) { .drop-list { grid-template-columns: 1fr; } }

/* ===== style block ===== */

  .mega .mega-feature .feat-img { position: relative; overflow: hidden; border-radius: 6px; isolation: isolate; }
  .mega .feat-zoom { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.001); transition: transform .7s cubic-bezier(.22,.61,.36,1); z-index: 0; }
  .mega .feat-img::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(20,16,11,0) 45%, rgba(20,16,11,0.42) 100%); opacity: 0; transition: opacity .45s ease; }
  .mega .mega-feature:hover .feat-zoom { transform: scale(1.07); }
  .mega .mega-feature:hover .feat-img::after { opacity: 1; }
  /* The desktop header design drops the round arrow badge on the photo — the
     card's own "Aged with …→" line is the affordance. */
  .mega .feat-img .feat-arrow { display: none; }
  .mega .mega-feature { transition: transform .4s cubic-bezier(.22,.61,.36,1); }
  .mega .mega-feature:hover { transform: translateY(-4px); }
  .mega .feat-title { transition: color .25s ease; }
  .mega .feat-cta { display: inline-flex; align-items: center; gap: 6px; transition: color .25s ease, gap .3s ease; }
  .mega .mega-feature:hover .feat-cta { gap: 12px; }
  .mega .mega-sub { border-radius: 6px; transition: transform .4s cubic-bezier(.22,.61,.36,1), background .3s ease, border-color .3s ease; }
  .mega .mega-sub:hover { transform: translateY(-4px); background: rgba(184,146,60,0.16); border-color: rgba(184,146,60,0.5); }
  .mega .mega-feature:focus-visible, .mega .mega-sub:focus-visible { outline: 2px solid #b8923c; outline-offset: 4px; }

/* ===== style block ===== */

  .mega .feat-img-ph { aspect-ratio: 4/3; display: flex; align-items: flex-end; padding: 12px; background: linear-gradient(150deg, #efe6d5, #e2d6bf); }
  .mega .feat-img-ph .ph-label { position: relative; z-index: 2; font-family: var(--font-code); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: #9b8a6f; }
  .mega .feat-img-ph::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(20,16,11,0) 55%, rgba(20,16,11,0.12) 100%); opacity: 0; transition: opacity .45s ease; }
  .mega .mega-feature:hover .feat-img-ph::after { opacity: 1; }

/* ===== style block ===== */

  .mega-scrim { position: fixed; inset: 0; z-index: 40; background: rgba(8,6,5,0.36); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); opacity: 0; visibility: hidden; transition: opacity .38s ease, visibility .38s ease; pointer-events: none; }
  body.mega-open .mega-scrim { opacity: 1; visibility: visible; }
  .topbar { z-index: 50; }

/* ===== style block ===== */

/* latin-ext */

/* latin */

  .hero-title.jersey .thin { font-family: 'Jersey 20', monospace; font-weight: 400; font-size: clamp(42px, 6.5vw, 104px); line-height: 1.0; letter-spacing: 0.01em; text-transform: none; }
  .hero-title.jersey .big { font-family: 'Jersey 20', monospace; font-weight: 400; font-size: clamp(64px, 12vw, 168px); line-height: 0.92; letter-spacing: 0.01em; margin-top: -2px; }

/* ===== style block ===== */

  .editions-band .ed3 { cursor: pointer; }
  .editions-band .ed3:focus-visible { outline: 2px solid var(--vyne-gold, #c9a44c); outline-offset: 3px; }

/* ===== style block ===== */

  .editions-band .ed3-note { font-family: var(--font-read); font-size: 15px; line-height: 1.55; color: var(--vyne-body, #cbb89a); margin: 0 0 22px; }
  .editions-band[style*="f4ede0"] .ed3-note { color: #574a38; }

/* ===== style block ===== */

  .editions-band .ed3-aged { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 2px 0 20px; font-family: var(--font-mono); }
  .editions-band .ed3-aged-k { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--vyne-gold, #c9a44c); }
  .editions-band .ed3-aged-k::after { content: " →"; color: #9b8a6f; }
  .editions-band .ed3-aged-v { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: #fbf6ec; }
  .editions-band[style*="f4ede0"] .ed3-aged-k { color: #9b7833; }
  .editions-band[style*="f4ede0"] .ed3-aged-k::after { color: #8a7a60; }
  .editions-band[style*="f4ede0"] .ed3-aged-v { color: #241c14; }

/* ===== style block ===== */

  .editions-band .ed3-stars { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
  .editions-band .ed3-stars svg { color: var(--vyne-gold, #c9a44c); }
  .editions-band .ed3-rev { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: #9b8a6f; margin-left: 4px; }
  .editions-band[style*="f4ede0"] .ed3-stars svg { color: #b8923c; }
  .editions-band[style*="f4ede0"] .ed3-rev { color: #8a7a60; }

/* ===== style block ===== */

  .editions-band .ed3-price .from { font-family: var(--font-mono); font-style: normal; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #9b7833; margin-right: 4px; vertical-align: middle; }

/* ===== style block ===== */

  .editions-band[style*="f4ede0"] .kicker { color: #8a6d2f; }
  .editions-band[style*="f4ede0"] h2, .editions-band[style*="f4ede0"] .ed-caps { color: #241c14; }
  .editions-band[style*="f4ede0"] .lede { color: #574a38; }
  .editions-band[style*="f4ede0"] .ed3 { background: #fbf6ec; border-color: rgba(36,28,20,0.14); }
  .editions-band[style*="f4ede0"] .ed3:hover { border-color: rgba(36,28,20,0.32); }
  .editions-band[style*="f4ede0"] .ed3-body { border-top-color: rgba(36,28,20,0.12); }
  .editions-band[style*="f4ede0"] .ed3-body h3 { color: #241c14; }
  .editions-band[style*="f4ede0"] .ed3-price { color: #9b7833; }
  .editions-band[style*="f4ede0"] .ed3-price .per { color: #8a7a60; }
  .editions-band[style*="f4ede0"] .ed3-desc { color: #574a38; }
  .editions-band[style*="f4ede0"] .ed3-btn { color: #241c14; border-color: rgba(36,28,20,0.34); }
  .editions-band[style*="f4ede0"] .ed3-btn:hover { background: #241c14; color: #f4ede0; }

/* ===== style block ===== */

  .editions-band .ed3-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: clamp(32px, 4vw, 52px); }
  .editions-band .ed3 { display: flex; flex-direction: column; border: 1px solid var(--hairline); background: var(--surface-card); overflow: hidden; transition: border-color .25s, transform .25s; }
  .editions-band .ed3:hover { border-color: var(--hairline-strong); transform: translateY(-3px); }
  .editions-band .ed3-photo { position: relative; aspect-ratio: 4/5; background: linear-gradient(160deg, #1c1c1c, #101010); display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px; }
  .editions-band .ed3-photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .editions-band .ed3-photo span.ph { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-soft); }
  .editions-band .ed3-badge { position: absolute; top: 16px; left: 16px; display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: #16100a; border: none; background: linear-gradient(180deg, #e6cf9e, #c9a44c); padding: 8px 15px; border-radius: 999px; box-shadow: 0 4px 14px rgba(0,0,0,.28); }
  .editions-band .ed3-badge::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: #16100a; }
  .editions-band .ed3-body { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; border-top: 1px solid var(--hairline); }
  .editions-band .ed3-body h3 { font-family: var(--font-serif); font-weight: 500; font-size: 30px; line-height: 1.05; color: var(--ink); margin: 0 0 8px; }
  .editions-band .ed3-price { font-family: var(--font-serif); font-style: italic; font-size: 22px; color: var(--vyne-gold, #c9a44c); margin-bottom: 12px; }
  .editions-band .ed3-price .per { font-family: var(--font-mono); font-style: normal; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-left: 8px; }
  .editions-band .ed3-desc { font-family: var(--font-serif); font-size: 17px; line-height: 1.5; color: var(--body); margin: 0 0 20px; }
  .editions-band .ed3-btn { align-self: flex-start; margin-top: auto; font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink); border: 1px solid var(--hairline-strong); padding: 13px 22px; transition: background .2s, color .2s; }
  .editions-band .ed3-btn:hover { background: var(--ink); color: var(--on-primary); }
  @media (max-width: 860px) { .editions-band .ed3-grid { grid-template-columns: 1fr; } }

/* ===== style block ===== */

  @media (prefers-reduced-motion: no-preference) {
    .steps-cream .steps-grid .step-card { opacity: 0; transform: translateY(48px); transition: opacity 1.3s cubic-bezier(.22,.61,.36,1), transform 1.3s cubic-bezier(.22,.61,.36,1); will-change: opacity, transform; }
    body.home .steps-cream .steps-grid .step-card.in-view{ opacity: 1; transform: none; }
  }

/* ===== style block ===== */

  .steps-cream .kicker { color: #8a6d2f; }
  body.home .steps-cream .section-head h2{ color: #241c14; }
  body.home .steps-cream .section-head h2 em{ color: #9b7833; }
  body.home .steps-cream .steps-legend{ color: #6a5a3f; }

/* ===== style block ===== */

  .proof-block .proof-findings { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(24px, 3vw, 56px); margin: clamp(40px, 5vw, 68px) 0 clamp(8px, 1vw, 16px); }
  body.home .proof-block .pf-find{ position: relative; padding-top: 22px; border-top: 1px solid var(--vyne-line, rgba(231,210,176,0.16)); text-align: left; }
  body.home .proof-block .pf-find + .pf-find::before{ content: ""; position: absolute; left: calc(clamp(24px, 3vw, 56px) / -2); top: 0; bottom: 8px; width: 1px; background: var(--vyne-line, rgba(231,210,176,0.16)); }
  body.home .proof-block .pf-num{ font-family: var(--font-serif); font-weight: 500; font-size: clamp(40px, 4.4vw, 68px); line-height: 1; color: var(--vyne-gold, #c9a44c); letter-spacing: -0.01em; }
  body.home .proof-block .pf-num .pf-unit{ font-size: 0.42em; color: #fbf6ec; margin-left: 4px; letter-spacing: 0; }
  body.home .proof-block .pf-desc{ font-family: var(--font-read); font-size: 15px; line-height: 1.5; color: var(--vyne-body, #cbb89a); margin-top: 16px; max-width: 30ch; }
  @media (max-width: 900px) { body.home .proof-block .proof-findings{ grid-template-columns: 1fr 1fr; } }
  @media (max-width: 520px) { .proof-block .proof-findings { grid-template-columns: 1fr; } }

/* ===== style block ===== */

  .proof-block .pf-shell { max-width: var(--shell, 1680px); margin: 0 auto; padding: 0 var(--pad, clamp(24px,5vw,120px)); }
  body.home .proof-block .tab-row{ display: flex; border-bottom: 1px solid var(--vyne-line, rgba(231,210,176,0.14)); margin: clamp(32px,4vw,52px) 0 40px; }
  body.home .proof-block .tab{ font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--vyne-muted, #9b8a6f); background: none; border: none; padding: 14px 26px; cursor: pointer; position: relative; }
  body.home .proof-block .tab.active{ color: #fbf6ec; }
  body.home .proof-block .tab.active::after{ content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--vyne-gold, #c9a44c); }
  body.home .proof-block .pf-panel[hidden]{ display: none; }
  body.home .proof-block .panel-head{ max-width: none; margin-bottom: 36px; }
  body.home .proof-block .panel-head h3{ font-family: var(--font-serif); font-weight: 500; font-size: clamp(26px, 3.2vw, 42px); color: #fbf6ec; margin: 0 0 14px; white-space: nowrap; }
  body.home .proof-block .panel-head p{ font-family: var(--font-read); font-size: clamp(16px, 1.5vw, 20px); line-height: 1.55; color: var(--vyne-body, #cbb89a); margin: 0; }
  body.home .proof-block .collage{ display: grid; grid-template-columns: 1.3fr 1fr 1fr; grid-auto-rows: 234px; gap: 18px; }
  body.home .proof-block .collage > div{ border: 1px solid var(--vyne-line, rgba(231,210,176,0.14)); padding: 22px; background: rgba(20,16,11,0.5); position: relative; border-radius: 4px; }
  body.home .proof-block .collage .hero-photo{ grid-row: span 2; background: #14100b center / cover no-repeat; padding: 0; }
  body.home .proof-block .collage .kicker{ font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vyne-muted, #9b8a6f); }
  body.home .proof-block .collage .big-num{ font-family: var(--font-serif); font-weight: 500; font-size: 48px; color: var(--vyne-gold, #c9a44c); line-height: 1; margin: 10px 0; }
  body.home .proof-block .collage .chart-area, body.home .proof-block .collage .body{ font-size: 13px; color: var(--vyne-body, #cbb89a); font-family: var(--font-read); line-height: 1.5; }
  body.home .proof-block .collage .quote-card{ grid-column: span 2; background: rgba(201,164,76,0.08); border-color: var(--vyne-gold, #c9a44c); }
  body.home .proof-block .collage .qmark{ font-family: var(--font-serif); font-size: 50px; color: var(--vyne-gold, #c9a44c); line-height: 0.5; }
  body.home .proof-block .collage .qtext{ font-family: var(--font-serif); font-style: italic; font-size: 23px; color: #fbf6ec; margin: 10px 0; }
  body.home .proof-block .collage .qauthor, body.home .proof-block .collage .head{ font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vyne-muted, #9b8a6f); }
  body.home .proof-block .collage .head{ color: #fbf6ec; margin-top: 8px; }
  body.home .proof-block .panel-more{ display: inline-block; margin-top: 28px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--vyne-gold, #c9a44c); border-bottom: 1px solid var(--vyne-gold, #c9a44c); padding-bottom: 4px; text-decoration: none; }
  body.home .proof-block .panel-more:hover{ color: #e6cf9e; }
  @media (max-width: 1024px) {
    body.home .proof-block .collage{ grid-template-columns: 1fr 1fr; }
    body.home .proof-block .collage .hero-photo{ grid-row: auto; grid-column: span 2; min-height: 220px; }
  }
  @media (max-width: 560px) {
    .proof-block .collage { grid-template-columns: 1fr; }
    body.home .proof-block .collage .hero-photo, body.home .proof-block .collage .quote-card{ grid-column: auto; }
  }

/* ===== style block ===== */

  .subs-band { position: relative; width: 100%; background: #0a0806; border-top: 1px solid var(--vyne-line-soft); overflow: hidden; }
  body.home .subs-band .sb-bg{ display: block; width: 100%; height: auto; }
  body.home .subs-band::after{ content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(8,6,4,0) 34%, rgba(8,6,4,0.62) 62%, rgba(8,6,4,0.92) 100%); }
  body.home .subs-band .sb-inner{ position: absolute; inset: 0; z-index: 2; max-width: var(--shell); margin: 0 auto; width: 100%; padding: 0 var(--pad); display: flex; align-items: center; justify-content: flex-end; }
  body.home .subs-band .sb-copy{ max-width: 460px; text-align: left; }
  body.home .subs-band .sb-copy .kicker{ color: var(--vyne-gold, #c9a44c); }
  body.home .subs-band .sb-copy h3{ font-family: var(--font-serif); font-weight: 500; font-size: clamp(38px, 4.4vw, 62px); line-height: 1.02; color: #f5ede0; margin: 14px 0 0; }
  body.home .subs-band .sb-copy h3 em{ font-style: italic; color: #e6cf9e; }
  body.home .subs-band .sb-copy p{ font-family: var(--font-serif); font-size: 18px; line-height: 1.55; color: #d8cbb6; margin: 20px 0 0; }
  body.home .subs-band .sb-copy .sb-cta{ display: inline-block; margin-top: 28px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #16100a; background: var(--vyne-gold, #c9a44c); padding: 15px 26px; transition: background .2s; }
  body.home .subs-band .sb-copy .sb-cta:hover{ background: #e6cf9e; }
  @media (max-width: 820px) {
    body.home .subs-band::after{ display: none; }
    body.home .subs-band .sb-inner{ position: static; background: #0a0806; padding: 30px var(--pad) 46px; justify-content: flex-start; }
  }

/* ===== style block ===== */

  #faqSection .section-head { align-items: center; }
  #faqSection .section-head .lede { max-width: 58ch; margin-left: auto; margin-right: auto; text-align: center; }

/* ===== style block ===== */

  .site-footer .footer-cta { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; margin: 8px 0 clamp(36px,4vw,56px); padding: clamp(32px,3.5vw,48px) 0 clamp(36px,4vw,52px); border-top: 1px solid rgba(231,210,176,0.16); border-bottom: 1px solid rgba(231,210,176,0.16); }
  .site-footer .fcta-copy { flex: 1 1 380px; }
  .site-footer .fcta-kicker { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--vyne-gold, #c9a44c); margin-bottom: 14px; }
  .site-footer .fcta-copy h3 { font-family: var(--font-serif); font-weight: 500; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.03; color: #fbf6ec; margin: 0 0 12px; }
  .site-footer .fcta-copy p { font-family: var(--font-read); font-size: 16px; line-height: 1.55; color: var(--vyne-body, #cbb89a); margin: 0; max-width: 46ch; }
  .site-footer .fcta-form { flex: 1 1 380px; display: flex; gap: 12px; max-width: 520px; }
  .site-footer .fcta-form input { flex: 1; min-width: 0; background: transparent; border: 1px solid rgba(231,210,176,0.32); border-radius: 999px; padding: 17px 24px; color: #fbf6ec; font-family: var(--font-read); font-size: 15px; }
  .site-footer .fcta-form input::placeholder { color: #9b8a6f; }
  .site-footer .fcta-form input:focus { outline: none; border-color: var(--vyne-gold, #c9a44c); }
  .site-footer .fcta-form button { flex: none; background: var(--vyne-gold, #c9a44c); color: #16100a; border: none; border-radius: 999px; padding: 17px 30px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; transition: background .2s; }
  .site-footer .fcta-form button:hover { background: #e6cf9e; }
  @media (max-width: 720px) { .site-footer .fcta-form { flex-direction: column; } .site-footer .fcta-form button { width: 100%; } }

/* ===== style block ===== */

  .site-footer .footer-social { display: flex; gap: 12px; align-items: center; }
  .site-footer .footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--vyne-line); color: var(--vyne-body); transition: color .2s, border-color .2s, background .2s; }
  .site-footer .footer-social a:hover { color: #16100a; background: var(--vyne-gold); border-color: var(--vyne-gold); }
  @media (max-width: 620px) { .site-footer .footer-social { order: -1; } }

/* ===== style block ===== */

  .site-footer .footer-news .foot-news-p { font-family: var(--font-read); font-size: 13px; line-height: 1.55; color: var(--vyne-body); margin: 10px 0 14px; max-width: 30ch; }
  .site-footer .foot-news-form { display: flex; gap: 8px; max-width: 300px; }
  .site-footer .foot-news-form input { flex: 1; min-width: 0; background: transparent; border: 1px solid var(--vyne-line-strong, rgba(231,210,176,0.28)); border-radius: 999px; padding: 11px 16px; color: var(--vyne-ink); font-family: var(--font-read); font-size: 13px; }
  .site-footer .foot-news-form input::placeholder { color: var(--vyne-muted, #9b8a6f); }
  .site-footer .foot-news-form input:focus { outline: none; border-color: var(--vyne-gold); }
  .site-footer .foot-news-form button { flex: none; width: 40px; border-radius: 999px; border: none; background: var(--vyne-gold); color: #16100a; font-size: 15px; cursor: pointer; transition: background .2s; }
  .site-footer .foot-news-form button:hover { background: var(--vyne-gold-soft, #e6cf9e); }

/* ============================================================
   Mobile header — hamburger + slide-in drawer (exact, from index mobile)
   ============================================================ */
.hamburger { display: none; }
.m-drawer, .m-drawer-scrim { display: none; }

@media (max-width: 860px) {
  .menubar { position: relative; grid-template-columns: 1fr auto 1fr; height: 64px; }
  .hamburger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0 10px; background: none; border: none; cursor: pointer; justify-self: start; }
  .hamburger span { display: block; height: 2px; width: 22px; background: var(--vyne-ink, #f4ede0); transition: transform .3s ease, opacity .2s ease; }
  .brand-logo { justify-self: center; font-size: 20px; }
  .right-cluster { justify-self: end; gap: 6px; }
  .right-cluster .lang { display: none; }
  .topbar .notif { font-size: 11px; padding: 8px 12px; text-align: center; }

  .mega, .mega-scrim { display: none !important; }
  body.mega-open { overflow: auto; }

  .m-drawer-scrim { display: block; position: fixed; inset: 0; z-index: 90; background: rgba(8,6,5,0.5); opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s ease; }
  body.drawer-open .m-drawer-scrim { opacity: 1; visibility: visible; }
  .m-drawer { display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; width: min(86vw, 380px); z-index: 91; background: #14100b; border-right: 1px solid rgba(231,210,176,0.14); transform: translateX(-100%); transition: transform .38s cubic-bezier(.4,0,.2,1); overflow-y: auto; }
  body.drawer-open .m-drawer { transform: none; }
  body.drawer-open { overflow: hidden; }
  .m-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; border-bottom: 1px solid rgba(231,210,176,0.12); }
  .m-drawer-head .brand-logo { font-size: 22px; color: #f4ede0; }
  .m-drawer-head .brand-logo .plus { color: var(--vyne-gold, #c9a44c); }
  .m-drawer-close { background: none; border: none; color: #cbb89a; font-size: 30px; line-height: 1; cursor: pointer; width: 44px; height: 44px; }
  .m-drawer-nav { padding: 8px 0; flex: 1; }
  .m-drawer-link { display: block; padding: 17px 24px; font-family: var(--font-serif, serif); font-size: 21px; color: #f4ede0; text-decoration: none; border-bottom: 1px solid rgba(231,210,176,0.08); }
  .m-acc { border-bottom: 1px solid rgba(231,210,176,0.08); }
  /* The row holds two separate targets: the label is a link to the page, the
     + is the accordion toggle. The padding lives on each of them so both have
     a full-height tap area. */
  .m-acc-h { width: 100%; display: flex; align-items: stretch; justify-content: space-between; }
  .m-acc-link { flex: 1; display: flex; align-items: center; padding: 17px 24px; font-family: var(--font-serif, serif); font-size: 21px; color: #f4ede0; text-decoration: none; }
  .m-acc-t { display: flex; align-items: center; background: none; border: none; padding: 17px 24px 17px 16px; cursor: pointer; }
  .m-acc-i { font-family: var(--font-code, monospace); font-size: 20px; color: var(--vyne-gold, #c9a44c); transition: transform .3s ease; }
  .m-acc.open .m-acc-i { transform: rotate(45deg); }
  .m-acc-body { max-height: 0; overflow: hidden; transition: max-height .38s ease; }
  .m-acc.open .m-acc-body { max-height: 320px; }
  .m-acc-body a { display: block; padding: 12px 24px 12px 38px; font-family: var(--font-read, sans-serif); font-size: 15px; color: #cbb89a; text-decoration: none; }
  .m-acc-body a:last-child { padding-bottom: 18px; }
  .m-drawer-foot { padding: 22px 24px calc(22px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(231,210,176,0.12); }
  .m-drawer-cta { display: block; text-align: center; background: var(--vyne-gold, #c9a44c); color: #16100a; padding: 15px; border-radius: 999px; font-family: var(--font-code, monospace); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; }
  /* It is a <button> here (it opens the language chooser) while the design's is
     a <div>, so the browser's default button chrome — grey fill, outset border —
     has to be cleared for it to look like the design's plain line of text. */
  .m-drawer-lang { margin-top: 16px; text-align: center; font-family: var(--font-code, monospace); font-size: 12px; letter-spacing: 0.1em; color: #9b8a6f;
    display: block; width: 100%; background: none; border: 0; padding: 0; cursor: pointer; }

  body.drawer-open .m-drawer-nav > * { animation: mDrawerItem .5s cubic-bezier(.22,.61,.36,1) both; }
  body.drawer-open .m-drawer-nav > *:nth-child(1){animation-delay:.06s}
  body.drawer-open .m-drawer-nav > *:nth-child(2){animation-delay:.12s}
  body.drawer-open .m-drawer-nav > *:nth-child(3){animation-delay:.18s}
  body.drawer-open .m-drawer-nav > *:nth-child(4){animation-delay:.24s}
  @keyframes mDrawerItem { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }

  body.drawer-open .hamburger span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  body.drawer-open .hamburger span:nth-child(2){ opacity: 0; }
  body.drawer-open .hamburger span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
}

/* ============================================================
   Mobile swipe carousels — editions + steps (exact, from index mobile)
   ============================================================ */
@media (max-width: 860px) {
  .steps-cream .steps-grid { display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: 14px; padding: 4px 0 18px; margin-right: calc(-1 * var(--pad)); scrollbar-width: none; scroll-behavior: smooth; scroll-padding-left: var(--pad); }
  body.home .steps-cream .steps-grid::-webkit-scrollbar{ display: none; }
  body.home .steps-cream .steps-grid .step-card{ flex: 0 0 78%; scroll-snap-align: center; opacity: 1 !important; transform: none !important; }
  body.home .steps-cream .steps-grid .step-card:last-child{ margin-right: var(--pad); }

  .editions-band .ed3-grid { display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: 16px; padding: 4px 0 18px; margin-right: calc(-1 * var(--pad)); scrollbar-width: none; scroll-behavior: smooth; scroll-padding-left: var(--pad); }
  .editions-band .ed3-grid::-webkit-scrollbar { display: none; }
  .editions-band .ed3 { flex: 0 0 82%; scroll-snap-align: center; }
  .editions-band .ed3:last-child { margin-right: var(--pad); }
}

/* ============================================================
   Cart icon badge + WooCommerce cart/checkout shell (v2 chrome)
   ============================================================ */
a.icon-btn { text-decoration: none; }
.icon-cart { position: relative; }
.icon-cart .cart-count { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--vyne-gold); color: #16100a; font-family: var(--font-code, monospace); font-size: 10px; font-weight: 600; line-height: 17px; text-align: center; }

.wc-page { background: #f6efe0; color: #241c14; padding: clamp(40px, 6vw, 84px) 0 clamp(64px, 9vw, 130px); min-height: 60vh; }
.wc-page-inner { max-width: 1240px; margin: 0 auto; padding: 0 var(--pad); }
.wc-page-title { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: clamp(34px, 5vw, 60px); line-height: 1.02; color: #241c14; margin: 0 0 clamp(24px, 3vw, 42px); }

/* ===== Gallery video lightbox ===== */
.gallery-bright .g-media.has-video { cursor: pointer; }
.vyne-vlightbox { position: fixed; inset: 0; z-index: 9999; background: rgba(6,4,3,0.9); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; padding: 4vmin; }
.vyne-vlightbox .vl-frame { position: relative; width: min(1100px, 94vw); aspect-ratio: 16 / 9; background: #000; border-radius: 12px; overflow: hidden; box-shadow: 0 30px 90px rgba(0,0,0,0.6); }
.vyne-vlightbox .vl-frame iframe, .vyne-vlightbox .vl-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vyne-vlightbox .vl-close { position: absolute; top: 18px; right: 22px; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(231,210,176,0.4); background: rgba(8,6,5,0.6); color: #f4ecd9; font-size: 24px; line-height: 1; cursor: pointer; z-index: 2; }
.vyne-vlightbox .vl-close:hover { background: var(--vyne-gold, #c9a44c); color: #16100a; border-color: var(--vyne-gold, #c9a44c); }

/* The newsletter signup's reply, where the form was. */
.foot-news-msg { margin-top: 10px; font-family: var(--font-read, inherit); font-size: 13px; line-height: 1.5; color: var(--body, #cbb89a); }
.foot-news-msg.is-error { color: #e0a99a; }
.foot-news-form.is-busy { opacity: .6; pointer-events: none; }

/* ---- form controls are square -------------------------------------------
   Every design draws inputs, selects and textareas with hard corners; the
   rounding came from WooCommerce's own stylesheets (8px on the classic
   checkout fields, more on the block ones) and from leftovers of the old
   theme CSS. One rule, so a new form can't inherit a stray radius again.
   The footer's newsletter pill is the design's one deliberate exception. */
input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="password"], input[type="search"], input[type="number"],
input[type="date"], select, textarea,
.select2-container .select2-selection--single,
.woocommerce-input-wrapper .select2-selection {
  border-radius: 0 !important;
}
.site-footer .foot-news-form input { border-radius: 999px !important; }

/* ---------------------------------------------------------------------------
 * Home — Real bottles, real results (LOLA/v2 "VYNE+ Real Bottles").
 *
 * The design's own rules, which it already scopes under .rbr, so they can sit
 * here without touching anything else. The carousel behaviour is in
 * assets/js/home-v2.js.
 * ------------------------------------------------------------------------- */
.rbr{--rb-serif:'Cormorant Garamond',serif;--rb-mono:'JetBrains Mono',ui-monospace,monospace;--rb-ink:#241c14;--rb-body:#574a38;--rb-muted:#8a7a60;--rb-gold:#9b7833;--rb-line:rgba(36,28,20,0.14);background:#f4ede0;padding:clamp(56px,8vw,104px) 0;border-top:1px solid rgba(36,28,20,0.08)}
.rbr .rb-shell{max-width:1680px;margin:0 auto;padding:0 clamp(24px,5vw,120px)}
.rbr .rb-head{max-width:64ch;margin-bottom:clamp(32px,4vw,52px)}
.rbr .rb-kicker{font-family:var(--rb-mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--rb-gold)}
.rbr .rb-h{font-family:var(--rb-serif);font-weight:500;font-size:clamp(34px,5vw,60px);line-height:1.03;color:var(--rb-ink);margin:14px 0 0}
.rbr .rb-h em{font-style:italic;color:var(--rb-gold)}
.rbr .rb-lede{font-family:var(--rb-serif);font-size:clamp(18px,1.8vw,23px);line-height:1.5;color:var(--rb-body);margin-top:18px}
.rbr .rb-stage{position:relative}
.rbr .rb-viewport{overflow:hidden}
.rbr .rb-track{display:flex;gap:clamp(20px,2.4vw,34px);transition:transform .55s cubic-bezier(.4,0,.2,1);will-change:transform}
.rbr .rb-card{flex:0 0 calc((100% - 2*clamp(20px,2.4vw,34px))/3);background:#fbf6ec;border:1px solid var(--rb-line);border-radius:6px;overflow:hidden;display:flex;flex-direction:column}
.rbr .rb-photo{aspect-ratio:4/5;background:#eadfca center/cover no-repeat;position:relative}
.rbr .rb-aged{position:absolute;left:14px;top:14px;font-family:var(--rb-mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--rb-ink);background:rgba(251,246,236,.86);backdrop-filter:blur(3px);padding:6px 11px;border-radius:999px}
.rbr .rb-body{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1}
.rbr .rb-name{font-family:var(--rb-serif);font-weight:500;font-size:26px;line-height:1.1;color:var(--rb-ink);margin:0}
.rbr .rb-dur{font-family:var(--rb-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--rb-gold);margin-top:8px}
.rbr .rb-metrics{list-style:none;margin:20px 0 0;padding:16px 0 0;border-top:1px solid var(--rb-line);display:flex;flex-direction:column;gap:13px}
.rbr .rb-metrics li{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.rbr .rb-mlabel{font-family:var(--rb-serif);font-size:17px;color:var(--rb-body)}
.rbr .rb-mval{font-family:var(--rb-serif);font-weight:500;font-size:21px;color:var(--rb-gold);white-space:nowrap}
.rbr .rb-slider{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:clamp(28px,3.5vw,44px)}
.rbr .rb-arrow{width:52px;height:52px;border-radius:999px;border:1px solid var(--rb-line);background:#fbf6ec;color:var(--rb-ink);font-family:var(--rb-serif);font-size:24px;line-height:1;cursor:pointer;transition:all .2s;display:grid;place-items:center}
.rbr .rb-arrow:hover:not(:disabled){border-color:var(--rb-gold);color:var(--rb-gold);transform:scale(1.06)}
.rbr .rb-arrow:disabled{opacity:.32;cursor:default}
.rbr .rb-dots{display:flex;align-items:center;gap:9px}
.rbr .rb-dot{width:8px;height:8px;border-radius:999px;background:rgba(36,28,20,.24);border:none;padding:0;cursor:pointer;transition:width .3s,background .3s}
.rbr .rb-dot.active{width:26px;background:var(--rb-gold)}
@media (max-width: 900px){.rbr .rb-card{flex:0 0 calc((100% - clamp(20px,2.4vw,34px))/2)}.rbr .rb-card{flex:0 0 100%}}