/* =============================================================
   PourBrief — styles.css
   Editorial bar-worksheet on parchment. Green Jar ink, chapter colours.
   1. Tokens · 2. Base · 3. Utilities · 4. Typography · 5. Components
   6. Sections · 7. Motion · 8. Responsive · 9. Reduced motion · 10. Print
   ============================================================= */

/* ========== 1. Tokens ========== */
:root {
  /* canvas & surfaces */
  --bg: #faf5e8;            /* parchment — the page never goes pure white */
  --card: #ffffff;
  --card-2: #fffdf6;        /* nested warm surface */
  --frost: #f6f7f4;
  --line: #e4dfd0;
  --line-soft: #efeade;

  /* ink */
  --ink: #101b16;           /* deepest heading, green-biased near-black */
  --body: #333a35;
  --muted: #626a63;
  --faint: #8e948c;

  /* brand + chapter hues */
  --accent: #17493b;        /* Green Jar forest — primary action */
  --accent-ink: #0e3229;
  --accent-soft: #e6efe9;
  --gold: #b98428;
  --gold-soft: #f8f1e1;
  --gold-ink: #7a5512;      /* text on gold-soft */
  --gold-deep: #a8761f;     /* gold button, hover */
  --on-accent: #fdfcf5;     /* text on forest / ink surfaces */
  --on-gold: #1c1405;       /* text on gold */
  --danger: #a33b2e;

  /* warm neutrals for the onyx band and the browser's own surfaces */
  --ink-text: #efeade;
  --ink-text-2: #ddddd2;
  --ink-text-3: #c8c8bd;
  --scroll-thumb: #d7d1c0;
  --scroll-thumb-hover: #c2bba7;
  --placeholder-line: #bdb7a5;

  /* Chapter scale — one hue per chapter, all on the same value band
     (oklch L 0.52 · C 0.13) so colour codes category, never priority.
     Every frame clears 4.5:1 against the label ink. */
  --ch-event: #606d62;       /* neutral: the recap of what you typed */
  --ch-team: #655aaf;
  --ch-ice: #007a97;
  --ch-overview: #a24467;
  --ch-drinks: #a64831;
  --ch-cocktails: #965900;
  --ch-ingredients: #337b31;
  --ch-mixers: #8c4c94;
  --ch-water: #226bb0;
  --ch-glassware: #00806a;
  --ch-order: var(--accent);  /* the payoff block sits darker on purpose */

  /* chapter defaults (overridden per [data-chapter]) */
  --chapter: var(--accent);
  --chapter-ink: var(--on-accent);

  /* type */
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* shape */
  --r-btn: 12px;
  --r-card: 16px;
  --r-feature: 24px;
  --r-tag: 999px;
  --radius: var(--r-card);      /* legacy aliases */
  --radius-sm: var(--r-btn);

  /* depth — offset + blur, warm-tinted */
  --shadow-sm: 0 1px 2px rgba(16, 27, 22, 0.05), 0 2px 6px -2px rgba(16, 27, 22, 0.07);
  --shadow: 0 2px 4px -2px rgba(16, 27, 22, 0.08), 0 14px 32px -18px rgba(16, 27, 22, 0.26);
  --shadow-cta: 0 1px 2px rgba(16, 27, 22, 0.24), 0 6px 16px -8px rgba(23, 73, 59, 0.55);
  --shadow-pop: 0 24px 60px -22px rgba(16, 27, 22, 0.42);

  /* rhythm — every gap, padding and margin comes from this scale.
     Nothing off-scale: if a value isn't here, it doesn't ship. */
  --sp-2: 0.125rem;
  --sp-4: 0.25rem;
  --sp-8: 0.5rem;
  --sp-12: 0.75rem;
  --sp-16: 1rem;
  --sp-20: 1.25rem;
  --sp-24: 1.5rem;
  --sp-32: 2rem;
  --sp-40: 2.5rem;
  --sp-48: 3rem;
  --sp-64: 4rem;

  --gutter: clamp(var(--sp-16), 4vw, var(--sp-32));
  --section-gap: clamp(var(--sp-40), 6vw, var(--sp-64));
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ========== 2. Base ========== */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
  scrollbar-color: var(--scroll-thumb) var(--bg);
}
body {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  overscroll-behavior-y: none;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }
strong, b { color: var(--ink); }

h1, h2, h3, h4 {
  font-family: var(--serif);
  color: var(--ink);
  text-wrap: balance;
  line-height: 1.06;
  letter-spacing: -0.025em;
  font-weight: 900;
  font-variation-settings: "SOFT" 0, "WONK" 0;
}
h3, h4 { font-weight: 700; letter-spacing: -0.015em; }

/* browser surfaces belong to the design too */
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
input, select { font: inherit; color: inherit; caret-color: var(--accent); }
:is(input, select)::placeholder { color: var(--faint); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border: 3px solid var(--bg); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); }
a:not([class]) { text-underline-offset: 0.22em; text-decoration-thickness: 1px; }

.skip-link {
  position: fixed; top: -100px; left: 1rem; z-index: 9999;
  padding: var(--sp-8) var(--sp-16); background: var(--ink); color: var(--bg);
  border-radius: var(--r-btn); font-weight: 600;
}
.skip-link:focus { top: 1rem; }

/* ========== 3. Utilities ========== */
.container { width: min(1200px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.narrow { width: min(760px, 100% - 2 * var(--gutter)); margin-inline: auto; }
/* .flush pulls the reading column onto the 1200px container's left edge. Only
   for pages that HAVE full-width content to line up with (index): on a page
   that is one centred column throughout, flush is what breaks the line. */
.narrow.flush { margin-inline: max(var(--gutter), (100% - 1200px) / 2) auto; }
/* vertical rhythm utilities — replace ad-hoc inline margins */
.flow { margin-top: var(--sp-24); }      /* sibling block gap */
.flow-lg { margin-top: var(--sp-40); }  /* mid-section heading gap */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
[hidden] { display: none !important; }

/* ========== 4. Typography ========== */
.eyebrow {
  font-family: var(--sans); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.section-title { font-size: clamp(1.85rem, 3.6vw, 2.6rem); margin-bottom: var(--sp-4); }
.section-sub { color: var(--muted); max-width: 62ch; font-size: 1.02rem; }
.small { font-size: 0.86rem; color: var(--muted); }
.note-tight { margin-top: var(--sp-8); }   /* caption under a control */
.note-loose { margin-top: var(--sp-16); }  /* caption after a block */
.text-link { text-decoration: underline; text-underline-offset: 0.22em; }
.legal-heading { font-size: 1.2rem; margin-top: var(--sp-24); }
.tabular { font-variant-numeric: tabular-nums; }

/* ========== 5. Components ========== */

/* --- header --- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(12px) saturate(1.1);
  border-bottom: 1px solid var(--line-soft);
}
.site-header .container {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 64px; gap: var(--sp-16);
}
.logo {
  display: flex; align-items: center; gap: var(--sp-8);
  font-family: var(--serif); font-weight: 900; font-size: 1.2rem;
  letter-spacing: -0.03em; color: var(--ink);
}
.logo svg { width: 26px; height: 26px; }
.site-nav { display: flex; gap: var(--sp-4); align-items: center; font-size: 0.92rem; font-weight: 500; }
.site-nav a:not(.nav-cta) {
  color: var(--muted); padding: var(--sp-8) var(--sp-12); border-radius: var(--r-btn);
  transition: color 0.2s var(--ease-out), background 0.2s var(--ease-out);
}
.site-nav a.nav-compact { display: none; }
.site-nav a:not(.nav-cta):hover { color: var(--ink); background: color-mix(in srgb, var(--accent-soft) 70%, transparent); }
.nav-cta {
  background: var(--accent); color: var(--on-accent) !important; padding: var(--sp-8) var(--sp-16);
  border-radius: var(--r-btn); font-weight: 600; box-shadow: var(--shadow-cta);
  transition: background 0.2s var(--ease-out);
}
.nav-cta:hover { background: var(--accent-ink); }

/* --- buttons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-8);
  padding: var(--sp-12) var(--sp-24); border-radius: var(--r-btn);
  font-weight: 600; font-size: 1rem; letter-spacing: 0.005em;
  transition: transform 0.18s var(--ease-out), background 0.18s var(--ease-out),
              box-shadow 0.18s var(--ease-out), border-color 0.18s var(--ease-out);
}
.btn:active { transform: translateY(1px) scale(0.98); }
.btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-cta); }
.btn-primary:hover { background: var(--accent-ink); }
.btn-gold { background: var(--gold); color: var(--on-gold); box-shadow: 0 1px 2px rgba(16,27,22,0.2), 0 6px 16px -8px rgba(185,132,40,0.7); }
.btn-gold:hover { background: var(--gold-deep); }
.btn-ghost { border: 1.5px solid var(--ink); color: var(--ink); background: var(--card); }
.btn-ghost:hover { background: var(--ink); color: var(--bg); }
.btn-big { padding: var(--sp-16) var(--sp-32); font-size: 1.05rem; width: 100%; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }

/* --- chips (multi/single choice) --- */
.chip-group { display: flex; flex-wrap: wrap; gap: var(--sp-8); }

/* --- hover tooltip (data-tip): ink card above the chip, desktop pointers only --- */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute; left: 50%; bottom: calc(100% + 10px);
  transform: translateX(-50%) translateY(3px);
  width: max-content; max-width: 250px; white-space: normal; text-align: left;
  background: var(--ink); color: var(--bg);
  font-size: 0.76rem; font-weight: 500; line-height: 1.45;
  padding: var(--sp-8) var(--sp-12); border-radius: 9px; box-shadow: var(--shadow-pop);
  opacity: 0; pointer-events: none; z-index: 40;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
[data-tip]::before {
  content: ""; position: absolute; left: 50%; bottom: calc(100% + 5px);
  transform: translateX(-50%) translateY(3px);
  border: 5px solid transparent; border-top-color: var(--ink);
  opacity: 0; pointer-events: none; z-index: 40;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
@media (hover: hover) {
  [data-tip]:hover::after, [data-tip]:hover::before {
    opacity: 1; transform: translateX(-50%) translateY(0); transition-delay: 0.12s;
  }
}
[data-tip]:focus-visible::after, [data-tip]:focus-visible::before {
  opacity: 1; transform: translateX(-50%) translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  [data-tip]::after, [data-tip]::before { transition: none; }
}
/* touch devices can't hover: the selected option's tip shows as a caption under the group */
.tip-caption {
  font-size: 0.8rem; color: var(--muted); line-height: 1.45;
  margin-top: var(--sp-8); max-width: 52ch;
  display: none;
}
@media (hover: none) {
  .tip-caption { display: block; }
}
.chip {
  padding: var(--sp-8) var(--sp-16); border-radius: var(--r-tag);
  border: 1.5px solid var(--line); background: var(--card);
  font-size: 0.9rem; font-weight: 500; color: var(--body);
  transition: border-color 0.16s var(--ease-out), background 0.16s var(--ease-out),
              color 0.16s var(--ease-out), box-shadow 0.16s var(--ease-out),
              transform 0.16s var(--ease-out);
  display: inline-flex; align-items: center; gap: var(--sp-8);
}
.chip:hover { border-color: var(--accent); color: var(--ink); }
.chip[aria-pressed="true"] {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent);
  box-shadow: 0 1px 2px rgba(16,27,22,0.18);
}
/* Drawn marks inside a chip: same stroke language as ICONS in main.js, and
   currentColor so the icon inverts with the chip instead of staying dark on green. */
.chip-ico {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
/* Event identity: each event mark keeps its own colour while idle; the
   selected chip flips back to currentColor so the drawing stays white on
   green. Palette = the category colours the mix chart already uses. */
.chip[data-value="wedding"] .chip-ico        { stroke: #8f5e00; }
.chip[data-value="private-party"] .chip-ico  { stroke: #9e4573; }
.chip[data-value="birthday"] .chip-ico       { stroke: #a64831; }
.chip[data-value="corporate"] .chip-ico      { stroke: #007a97; }
.chip[data-value="dinner"] .chip-ico         { stroke: #7b52a4; }
.chip[data-value="cocktail-party"] .chip-ico { stroke: #3967b3; }
.chip[data-value="festival"] .chip-ico       { stroke: #00805d; }
.chip[data-value="other"] .chip-ico          { stroke: #587502; }
/* Bar service wears the same system: the drink's own category colour. */
.chip[data-value="beer-wine"] .chip-ico      { stroke: #a64831; }
.chip[data-value="mixed"] .chip-ico          { stroke: #9e4573; }
.chip[data-value="cocktail"] .chip-ico       { stroke: #3967b3; }
.chip[data-value="cocktail-heavy"] .chip-ico { stroke: #7b52a4; }
.chip[data-value="open-bar"] .chip-ico       { stroke: #8f5e00; }
.chip[aria-pressed="true"] .chip-ico { stroke: currentColor; }
.chip-sm { padding: var(--sp-8) var(--sp-12); font-size: 0.84rem; }
/* "one hour more / less": dashed siblings of the hour chips. They act on the
   open-ended last chip and never carry a selected state of their own. */
.chip-step {
  border-style: dashed; color: var(--muted);
  font-size: 1.05rem; font-weight: 600; line-height: 1;
  padding-inline: var(--sp-16); justify-content: center;
}
.chip-step:hover { border-color: var(--accent); color: var(--accent); }
.chip-step[hidden] { display: none; }
/* multi-select groups (no data-single): softer "on" state than a radio choice */
.chip-group:not([data-single]) .chip[aria-pressed="true"] {
  background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink);
  box-shadow: none;
}
.chip-group:not([data-single]) .chip[aria-pressed="true"]::before {
  content: "✓"; font-weight: 700; color: var(--accent); margin-right: var(--sp-2);
}

/* press feedback: every pressable element answers the touch */
.chip:active, .seg button:active, .stepper button:active,
.cocktail-card:active, .paywall-close:active {
  transform: scale(0.97);
}

/* --- stepper --- */
.stepper {
  display: inline-flex; align-items: center; gap: var(--sp-4); justify-self: start;
  border: 1.5px solid var(--line); border-radius: var(--r-btn);
  background: var(--card); padding: var(--sp-4);
}
.stepper button {
  width: 42px; height: 42px; border-radius: 8px; font-size: 1.25rem; font-weight: 600;
  color: var(--muted); display: grid; place-items: center;
  background: var(--frost); transition: background 0.15s, color 0.15s, transform 0.15s var(--ease-out);
}
.stepper button:hover { background: var(--accent-soft); color: var(--accent); }
.stepper input {
  width: 5ch; text-align: center; border: 0; background: transparent;
  font-family: var(--serif); font-size: 1.5rem; font-weight: 900; color: var(--ink);
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield; appearance: textfield;
}
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; }

/* --- field --- */
.field { display: grid; gap: var(--sp-8); align-content: start; }
.field > .field-label {
  font-weight: 600; font-size: 0.9rem; color: var(--ink);
  display: flex; align-items: baseline; gap: var(--sp-8); flex-wrap: wrap;
}
.field > .field-label .small { font-weight: 400; }
.field > .seg, .field > .stepper, .field > .chip-group { justify-self: start; max-width: 100%; }

/* --- segmented control --- */
.seg {
  display: inline-flex; justify-self: start;
  border: 1.5px solid var(--line); border-radius: var(--r-btn);
  background: var(--frost); padding: var(--sp-4); gap: var(--sp-2);
}
.seg button {
  padding: var(--sp-8) var(--sp-16); border-radius: 8px; font-size: 0.9rem; font-weight: 500;
  color: var(--muted); white-space: nowrap;
  transition: background 0.18s var(--ease-out), color 0.18s var(--ease-out),
              transform 0.15s var(--ease-out);
}
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] {
  background: var(--accent); color: var(--on-accent); font-weight: 600;
  box-shadow: 0 1px 2px rgba(16,27,22,0.2);
}

/* --- tool card (the worksheet) --- */
.tool-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-feature);
  box-shadow: var(--shadow); padding: clamp(var(--sp-20), 3.2vw, var(--sp-32));
}
.tool-grid { display: grid; gap: var(--sp-24); }
/* short fields pair up so a 760px card stops leaving half of every row empty;
   chip rows and the submit button keep the full width */
@media (min-width: 640px) {
  .tool-grid { grid-template-columns: 1fr 1fr; }
  .tool-grid > .field:has(.chip-group), .tool-grid > .btn { grid-column: 1 / -1; }
}

/* --- step rail (sequence carries the flow) --- */
.step-rail {
  list-style: none; padding: 0;
  /* the three steps stay on one line at every width: wrapping broke the
     sequence in two and the last step read as a separate control */
  display: flex; align-items: center; gap: var(--sp-8); flex-wrap: nowrap;
  padding-bottom: var(--sp-16); margin-bottom: var(--sp-24); border-bottom: 1px solid var(--line-soft);
}
.step-rail .rail-item {
  display: inline-flex; align-items: baseline; gap: var(--sp-8);
  font-size: 0.82rem; font-weight: 500; color: var(--muted); /* AA: --faint sat at 2.85:1 */
  letter-spacing: 0.02em; flex: 0 1 auto; min-width: 0;
}
.step-rail .rail-item b { font-family: var(--serif); font-size: 0.95rem; font-weight: 900; color: inherit; }
.step-rail .rail-item[data-state="current"] { color: var(--ink); }
.step-rail .rail-item[data-state="done"] { color: var(--accent); }
/* the connectors give up their width first, so the labels never truncate */
.step-rail .rail-sep { flex: 0 1 18px; min-width: 6px; height: 1px; background: var(--line); }
/* the rail doubles as navigation: each step is a real button jumping to its section */
.rail-btn {
  display: inline-flex; align-items: baseline; gap: var(--sp-8);
  font: inherit; color: inherit; letter-spacing: inherit; padding: 0;
  transition: color 0.16s var(--ease-out);
}
.rail-btn:hover { color: var(--ink); }
.rail-btn { white-space: nowrap; }
/* below 540px the labels swap to their one-word form so the row still fits */
.rail-short { display: none; }

/* --- chapter block: colour-coded card wrapper --- */
.chapter {
  background: var(--chapter); border-radius: var(--r-feature); padding: var(--sp-8);
  box-shadow: var(--shadow); display: grid; grid-template-rows: auto 1fr;
}
.chapter > .chapter-label {
  display: flex; align-items: center; gap: var(--sp-8);
  padding: var(--sp-4) var(--sp-12) var(--sp-8); color: var(--chapter-ink);
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
}
.chapter > .result-card { box-shadow: none; border-color: transparent; }
.chapter.wide { grid-column: 1 / -1; }

[data-chapter="event"]       { --chapter: var(--ch-event); }
[data-chapter="staff"]       { --chapter: var(--ch-team); }
[data-chapter="ice"]         { --chapter: var(--ch-ice); }
[data-chapter="overview"]    { --chapter: var(--ch-overview); }
[data-chapter="drinks"]      { --chapter: var(--ch-drinks); }
[data-chapter="cocktails"]   { --chapter: var(--ch-cocktails); }
[data-chapter="ingredients"] { --chapter: var(--ch-ingredients); }
[data-chapter="soft"]        { --chapter: var(--ch-mixers); }
[data-chapter="water"]       { --chapter: var(--ch-water); }
[data-chapter="glassware"]   { --chapter: var(--ch-glassware); }
[data-chapter="shopping"]    { --chapter: var(--ch-order); }

/* --- result cards --- */
.result-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: var(--shadow); padding: clamp(var(--sp-20), 2.6vw, var(--sp-24));
  display: flex; flex-direction: column;
}
.result-card h3 { font-size: 1.22rem; display: flex; align-items: center; gap: var(--sp-8); }
.result-card h3 svg { width: 20px; height: 20px; color: var(--chapter); flex: none; }
.result-card > .small:first-of-type { margin-top: var(--sp-4); }
.result-note { margin-top: var(--sp-12); }
/* the SEO calculators hand off to the app right here, at the moment the number
   lands — not three screens down behind the FAQ */
.result-cta { align-self: flex-start; margin-top: var(--sp-16); }

.result-kpi {
  display: flex; align-items: baseline; gap: var(--sp-8); flex-wrap: wrap;
  font-family: var(--serif); font-weight: 900; line-height: 0.95;
  font-size: clamp(2.4rem, 5.5vw, 3.1rem); letter-spacing: -0.04em;
  color: var(--ink); font-variant-numeric: tabular-nums; margin-top: var(--sp-16);
}
.result-kpi .unit {
  font-family: var(--sans); font-size: 0.32em; font-weight: 500;
  letter-spacing: 0.01em; color: var(--muted);
}

.roles { display: grid; gap: var(--sp-4); margin-top: var(--sp-16); }
.role-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-16);
  border-bottom: 1px solid var(--line-soft); padding: var(--sp-8) 0;
}
.role-row:last-child { border-bottom: 0; }
.role-row strong { font-family: var(--serif); font-size: 1.1rem; font-weight: 900; font-variant-numeric: tabular-nums; }

/* the staffing-level switch is the same control as every other segmented
   group — one grammar for "pick one": filled forest = selected */
.seg-tier { align-self: flex-start; margin-top: var(--sp-16); }

.breakdown { display: grid; gap: var(--sp-8); margin-top: var(--sp-16); }
.break-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: var(--sp-8);
  align-items: baseline; font-size: 0.93rem;
}
.break-row b { font-variant-numeric: tabular-nums; }
.break-row .bar {
  grid-column: 1 / -1; height: 6px; border-radius: 99px; margin-top: var(--sp-2);
  background: color-mix(in srgb, var(--chapter) 16%, var(--frost)); overflow: hidden;
}
.break-row .bar i { display: block; height: 100%; background: var(--chapter); border-radius: 99px; }
.break-row.total { border-top: 1px solid var(--line); padding-top: var(--sp-8); font-weight: 700; color: var(--ink); }

.how-link { font-size: 0.85rem; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
details.how-details { margin-top: auto; padding-top: var(--sp-16); font-size: 0.87rem; color: var(--muted); }
details.how-details summary {
  cursor: pointer; color: var(--accent); font-weight: 600; list-style: none;
  width: max-content; border-radius: 6px;
}
details.how-details summary::-webkit-details-marker { display: none; }
details.how-details summary::before { content: "↳ "; }
details.how-details summary:hover { text-decoration: underline; text-underline-offset: 3px; }
details.how-details p { margin-top: var(--sp-8); line-height: 1.55; }

/* --- ad slot (placeholders) --- */
.ad-slot {
  display: grid; place-items: center; min-height: 110px;
  border: 1.5px dashed var(--line); border-radius: var(--r-card);
  color: var(--placeholder-line); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase;
  background: repeating-linear-gradient(-45deg, transparent 0 12px, rgba(16,27,22,0.012) 12px 24px);
}
.ad-slot::before { content: "Advertisement"; }
.ad-leaderboard { min-height: 100px; }

/* --- pro CTA banner (onyx frame) --- */
.pro-cta {
  background: var(--ink); color: var(--ink-text);
  border-radius: var(--r-feature); padding: clamp(var(--sp-24), 4vw, var(--sp-40));
  box-shadow: var(--shadow);
  background-image: radial-gradient(120% 140% at 100% 0%, rgba(185,132,40,0.18) 0%, transparent 55%);
}
.pro-cta .eyebrow { color: var(--gold); }
.pro-cta h2 { color: var(--on-accent); font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
.pro-cta p { color: var(--ink-text-3); max-width: 54ch; margin-top: var(--sp-8); }
.pro-cta ul {
  list-style: none; padding: 0; margin: var(--sp-20) 0 var(--sp-24);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: var(--sp-8) var(--sp-20);
  font-size: 0.92rem; color: var(--ink-text-2);
}
.pro-cta li::before { content: "✓"; color: var(--gold); font-weight: 700; margin-right: var(--sp-8); }
.pro-cta > .cta-action { margin-top: var(--sp-16); }

/* --- pro configurator --- */
.pro-step { margin-top: var(--sp-24); }
.pro-step:first-child { margin-top: 0; }
.pro-step-head { display: flex; align-items: center; gap: var(--sp-12); margin-bottom: var(--sp-16); }
.pro-step-num {
  width: 30px; height: 30px; border-radius: 9px; background: var(--accent); color: var(--on-accent);
  font-family: var(--serif); font-weight: 900; font-size: 0.95rem;
  display: grid; place-items: center; flex: none;
}
.pro-step-title { font-size: 1.5rem; font-weight: 900; }
.step-card .step-title { font-size: 1.2rem; margin-top: var(--sp-2); }
.paywall-title { font-size: clamp(1.6rem, 3.4vw, 2rem); font-weight: 900; }

/* fine-tune panels flow into two balanced columns on wide screens: a
   full-width panel holding a 120px input left a dead half-column behind it */
@media (min-width: 860px) {
  #detail-panels { columns: 2; column-gap: var(--sp-12); }
}
.panel {
  border: 1px solid var(--line-soft); border-radius: var(--r-card);
  padding: var(--sp-16) var(--sp-20); background: var(--card-2);
  break-inside: avoid; margin-bottom: var(--sp-12);
}
.panel h4 {
  font-family: var(--sans); font-size: 0.82rem; font-weight: 700; color: var(--ink);
  letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: var(--sp-12);
  display: flex; align-items: center; gap: var(--sp-8);
}
/* Panel headers carry the same drawn marks as the chapter cards, a size down
   and in accent: the panel sits outside a chapter, so there is no --chapter. */
.panel h4 svg { width: 16px; height: 16px; flex: none; color: var(--accent); }
/* A mark inside running text or a tag: inline, on the baseline, and in the
   colour of the text around it. */
.inline-ico, .custom-tag svg {
  display: inline-block; width: 14px; height: 14px; flex: none;
  vertical-align: -0.16em; fill: none; stroke: currentColor;
}

/* percent inputs */
.pct-row {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: var(--sp-8);
  padding: var(--sp-4) 0; border-bottom: 1px solid var(--line-soft); max-width: 34rem;
}
.pct-row:last-of-type { border-bottom: 0; }
.pct-row label { font-size: 0.92rem; }
.pct-input {
  width: 4rem; text-align: right; border: 1.5px solid var(--line); border-radius: 8px;
  padding: var(--sp-4) var(--sp-8); font-weight: 600; background: var(--card); font-variant-numeric: tabular-nums;
}
.pct-input:focus-visible { border-color: var(--accent); outline-offset: 1px; }
.pct-sum { font-size: 0.84rem; font-weight: 600; margin-top: var(--sp-8); }
.pct-sum.bad { color: var(--danger); }
.pct-sum.good { color: var(--accent); }

/* mix chart */
.mix-chart {
  display: flex; height: 14px; border-radius: 99px; overflow: hidden;
  margin: var(--sp-12) 0 var(--sp-8); box-shadow: inset 0 0 0 1px rgba(16,27,22,0.06);
}
/* width is layout, but these are sub-pixel-cheap flex strips — a contained exception */
.mix-chart i { display: block; height: 100%; transition: width 0.3s cubic-bezier(0.77, 0, 0.175, 1); }
.mix-legend { display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-16); font-size: 0.82rem; color: var(--muted); }
.mix-legend b { color: var(--ink); }
.mix-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: var(--sp-4); }

/* cocktail grid */
.cocktail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: var(--sp-8); }
.cocktail-card {
  border: 1.5px solid var(--line); border-radius: var(--r-btn); background: var(--card);
  padding: var(--sp-12) var(--sp-12); text-align: left; font-size: 0.9rem; font-weight: 600; color: var(--ink);
  transition: border-color 0.16s var(--ease-out), background 0.16s var(--ease-out),
              transform 0.15s var(--ease-out);
  display: grid; gap: var(--sp-2); align-content: start;
}
.cocktail-card .small { font-weight: 400; font-size: 0.75rem; }
.cocktail-card:hover { border-color: var(--accent); }
.cocktail-card[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); }
.cocktail-card[aria-pressed="true"]::after {
  content: "✓ selected"; color: var(--accent); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em;
}

/* custom cocktail builder */
.cc-ing-row { display: grid; grid-template-columns: 1fr 5.5rem 5.5rem 2.2rem; gap: var(--sp-8); margin-bottom: var(--sp-8); }
.cc-ing-row input, .cc-ing-row select, .cc-name {
  border: 1.5px solid var(--line); border-radius: 8px; padding: var(--sp-8) var(--sp-8);
  background: var(--card); font-size: 0.9rem; width: 100%;
}
.cc-remove { color: var(--danger); font-weight: 700; font-size: 1.1rem; }
.custom-list { display: flex; flex-wrap: wrap; gap: var(--sp-8); margin-top: var(--sp-8); }
.custom-tag {
  background: var(--gold-soft); color: var(--gold-ink); font-weight: 600; font-size: 0.82rem;
  border-radius: var(--r-tag); padding: var(--sp-4) var(--sp-12);
  display: inline-flex; gap: var(--sp-8); align-items: center;
}
.custom-tag button { color: var(--danger); font-weight: 700; }

/* Event phases editor — one row per phase, same grammar as .cc-ing-row */
.steps-row { display: grid; grid-template-columns: minmax(7rem, 1fr) 5.5rem 4.5rem 2rem; gap: var(--sp-8); align-items: center; margin-top: var(--sp-8); }
.steps-row select, .steps-row input {
  border: 1.5px solid var(--line); border-radius: 8px; padding: var(--sp-8) var(--sp-8);
  background: var(--card); font-size: 0.9rem; width: 100%;
}
.steps-total { margin-top: var(--sp-8); font-size: 0.85rem; color: var(--muted); }
@media (max-width: 560px) { .steps-row { grid-template-columns: 1fr 4.5rem 4rem 2rem; } }

/* --- locked results / paywall --- */
.lock-wrap { position: relative; margin-top: var(--sp-16); } /* same rhythm as the grid gap above it */
.lock-wrap:has(> .lock-blur) { overflow: hidden; border-radius: var(--r-feature); }
#plan-content-pro { transition: filter 0.8s var(--ease-out); } /* the unlock ceremony melts the blur */
.lock-blur {
  filter: blur(9px); pointer-events: none; user-select: none;
  max-height: 560px; overflow: hidden;
}
.lock-overlay {
  position: absolute; inset: 0; z-index: 5;
  display: grid; place-items: center; padding: var(--sp-16);
  background: linear-gradient(180deg, rgba(250,245,232,0.35) 0%, rgba(250,245,232,0.9) 70%);
  border-radius: var(--r-feature);
  transition: opacity 0.4s var(--ease-out);
}
.lock-overlay.fading { opacity: 0; pointer-events: none; }
.lock-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-feature);
  box-shadow: var(--shadow-pop); padding: clamp(var(--sp-24), 4vw, var(--sp-32));
  max-width: 460px; width: 100%; text-align: center;
  display: grid; gap: var(--sp-12); justify-items: center;
}
.lock-card h3 { font-size: 1.4rem; }
.lock-icon { width: 40px; height: 40px; color: var(--gold); }

/* The sample caption inside the locked zone: unreadable behind the blur,
   the first thing a forced unblur reveals. */
.sample-note { margin: 0 0 0.9rem; text-align: center; }

/* paywall dialog */
dialog.paywall {
  margin: auto; border: 0; padding: 0;
  border-radius: var(--r-feature); max-width: 840px; width: calc(100% - 2rem);
  background: var(--card); color: var(--body); box-shadow: var(--shadow-pop);
  /* modal entrance/exit: exit (0.15s) snappier than entrance (0.2s);
     origin stays center — modals are the exemption to origin-aware scaling */
  opacity: 0; transform: scale(0.96);
  transition: opacity 0.15s var(--ease-out), transform 0.15s var(--ease-out),
              display 0.15s allow-discrete, overlay 0.15s allow-discrete;
}
dialog.paywall[open] {
  opacity: 1; transform: scale(1);
  transition-duration: 0.2s;
}
@starting-style {
  dialog.paywall[open] { opacity: 0; transform: scale(0.96); }
}
dialog.paywall::backdrop {
  background: rgba(16, 27, 22, 0.55); backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.15s ease, display 0.15s allow-discrete, overlay 0.15s allow-discrete;
}
dialog.paywall[open]::backdrop { opacity: 1; transition-duration: 0.2s; }
@starting-style {
  dialog.paywall[open]::backdrop { opacity: 0; }
}
.paywall-inner { padding: clamp(var(--sp-24), 4vw, var(--sp-40)); }
.paywall-close {
  position: absolute; top: 0.7rem; right: 0.9rem; width: 36px; height: 36px;
  border-radius: 50%; font-size: 1.4rem; color: var(--muted); display: grid; place-items: center;
  transition: transform 0.15s var(--ease-out);
}
.paywall-close:hover { background: var(--frost); color: var(--ink); }
.price-grid { display: grid; gap: var(--sp-16); margin-top: var(--sp-24); }
.price-card {
  border: 1.5px solid var(--line); border-radius: var(--r-card); padding: var(--sp-20);
  display: grid; gap: var(--sp-8); justify-items: start; background: var(--card);
}
.price-card b { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.price-card.featured { border-color: var(--gold); background: var(--gold-soft); position: relative; }
/* --- payment confirmed --- */
dialog.welcome { max-width: 34rem; } /* narrower than the three-plan paywall */
.welcome .paywall-inner { text-align: center; }
.welcome-mark {
  width: 62px; height: 62px; margin: 0 auto var(--sp-16); border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: var(--on-accent);
  animation: pulse-in 0.55s var(--ease-out) both;
}
.welcome-mark svg { width: 30px; height: 30px; }
.welcome-lead { margin-top: var(--sp-8); font-size: 1.02rem; }
.welcome-list {
  list-style: none; margin: var(--sp-20) 0 var(--sp-16); padding: 0;
  display: grid; gap: var(--sp-8); text-align: left; font-size: 0.94rem;
}
.welcome-list li { position: relative; padding-left: 1.6rem; }
.welcome-list li::before {
  content: ""; position: absolute; left: 0.35rem; top: 0.52em;
  width: 0.42rem; height: 0.42rem; border-radius: 50%; background: var(--accent);
}
.welcome #welcome-go { margin-top: var(--sp-8); }
.welcome #welcome-note:empty { display: none; }

.price-card .badge {
  position: absolute; top: -0.65rem; right: 1rem; background: var(--gold); color: var(--on-gold);
  font-size: 0.68rem; font-weight: 700; padding: var(--sp-2) var(--sp-8); border-radius: var(--r-tag);
  letter-spacing: 0.06em;
}
.price-amount {
  font-family: var(--serif); font-size: 2.1rem; font-weight: 900; color: var(--ink);
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.price-amount .per { font-family: var(--sans); font-size: 0.85rem; font-weight: 400; color: var(--muted); letter-spacing: 0; }

/* Founder offer: a quiet gold line above the plans, and the future price
   struck through over the real one. Both die with the founder round. */
.founder-badge {
  display: inline-block; background: var(--gold-soft); color: var(--gold-ink);
  font-weight: 600; font-size: 0.84rem; border-radius: var(--r-tag);
  padding: var(--sp-4) var(--sp-12); margin-top: var(--sp-12);
}
/* The guarantee gets its own line between the plans and the fine print: it is
   part of the offer, not a footnote. */
.paywall-guarantee { margin-top: var(--sp-16); font-size: 0.92rem; font-weight: 600; color: var(--ink); }
.price-future { display: block; min-height: 1.1em; }
.price-future s { color: var(--muted); font-size: 0.92rem; text-decoration-thickness: 1.5px; }

/* --- summary / shopping list --- */
/* Stretch (default) keeps each row's two chapters the same height — no ragged gaps. */
.summary-grid { display: grid; gap: var(--sp-16); }
#plan-content > .summary-grid { margin-top: var(--sp-24); } /* plan matches the free-results offset */
.summary-grid > .wide { grid-column: 1 / -1; }
.summary-grid + .chapter { margin-top: var(--sp-16); }
/* Chapters are not the same length, and a grid row stays open until its tallest
   card ends: 03 Ice held a tall white void under it while 04 Overview ran on.
   packGrids() in main.js gives every card a row span equal to its own height, so
   the next card starts where the one above it finished. Rows are the 4px unit,
   the 16px gap is baked into each span, and the outer edges stay flush. */
.summary-grid.packed { row-gap: 0; grid-auto-rows: 4px; align-items: start; }
.plan-note {
  margin: 0; padding: var(--sp-4) var(--sp-8) 0;
  font-size: 0.84rem; line-height: 1.65; color: var(--muted);
}
.stat-line {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-16);
  padding: var(--sp-8) 0; border-bottom: 1px solid var(--line-soft); font-size: 0.94rem;
}
.stat-line:last-of-type { border-bottom: 0; }
.stat-line b { font-variant-numeric: tabular-nums; white-space: nowrap; }

.shopping-table { width: 100%; border-collapse: collapse; font-size: 0.93rem; }
.shopping-table th {
  text-align: left; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--muted); font-weight: 700; padding: var(--sp-8) var(--sp-8); border-bottom: 1.5px solid var(--line);
}
.shopping-table td { padding: var(--sp-8) var(--sp-8); border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.shopping-table td.qty { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink); }
.shopping-table tbody tr:hover td { background: var(--frost); }
.shopping-table tr.section-row td {
  font-family: var(--serif); font-weight: 900; font-size: 1rem; color: var(--accent);
  padding-top: var(--sp-16); border-bottom: 1.5px solid var(--accent-soft); background: transparent;
}
.table-scroll { overflow-x: auto; }

/* --- how it works / features --- */
.steps-grid { display: grid; gap: var(--sp-16); margin-top: var(--sp-24); }
.step-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: var(--sp-24); display: grid; gap: var(--sp-8); align-content: start;
}
.step-card .num {
  font-family: var(--serif); font-size: 1.1rem; font-weight: 900; color: var(--gold);
  letter-spacing: 0.02em;
}
/* Pills size to their own label and wrap like the tag list they are. A fixed
   column count only ever fits one page's item count: five columns tidied the
   ten on the index and left a lone straggler on every page with six or eight. */
.feature-grid { display: flex; flex-wrap: wrap; gap: var(--sp-8); margin-top: var(--sp-24); }
.feature-grid > .feature-pill { flex: 0 1 auto; }
.feature-pill {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-btn);
  padding: var(--sp-12) var(--sp-16); font-weight: 600; font-size: 0.9rem; color: var(--ink);
  display: flex; gap: var(--sp-8); align-items: center;
}
.feature-pill svg { width: 18px; height: 18px; color: var(--accent); flex: none; }

/* --- FAQ --- */
.faq { display: grid; gap: var(--sp-8); margin-top: var(--sp-24); }
.faq details {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: var(--sp-16) var(--sp-20); transition: border-color 0.18s var(--ease-out);
}
.faq details[open] { border-color: var(--line); box-shadow: var(--shadow-sm); }
.faq summary {
  font-weight: 600; color: var(--ink); cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; gap: var(--sp-16);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; color: var(--gold); font-size: 1.3rem; font-weight: 400; line-height: 1;
  transition: transform 0.2s var(--ease-out);
}
.faq details[open] summary::after { content: "+"; transform: rotate(45deg); }

/* details open with motion where the platform can interpolate height;
   browsers without ::details-content keep the instant toggle */
:root { interpolate-size: allow-keywords; }
.faq details::details-content, details.how-details::details-content {
  height: 0; opacity: 0; overflow: clip;
  transition: height 0.25s var(--ease-out), opacity 0.25s var(--ease-out),
              content-visibility 0.25s allow-discrete;
}
.faq details[open]::details-content, details.how-details[open]::details-content {
  height: auto; opacity: 1;
}
.faq details p { margin-top: var(--sp-8); color: var(--muted); font-size: 0.95rem; }

/* --- more tools --- */
.tools-grid { display: grid; gap: var(--sp-12); margin-top: var(--sp-24); }
.tool-link-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: var(--sp-20) var(--sp-20); display: grid; gap: var(--sp-4); align-content: start;
  transition: border-color 0.2s var(--ease-out), transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.tool-link-card:hover { border-color: var(--accent); box-shadow: var(--shadow); }
@media (hover: hover) and (pointer: fine) {
  .tool-link-card:hover { transform: translateY(-2px); } /* touch fires hover on tap — motion is pointer-gated */
}
.tool-link-card b { font-family: var(--serif); font-size: 1.08rem; font-weight: 900; letter-spacing: -0.02em; }
.tool-link-card .small { font-size: 0.84rem; }
.tool-link-card .tag {
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent);
}
.tool-link-card .tag.pro { color: var(--gold); }

/* --- footer --- */
.site-footer {
  border-top: 1px solid var(--line); margin-top: var(--sp-64); padding: var(--sp-40) 0 var(--sp-48);
  font-size: 0.87rem; color: var(--muted);
}
.site-footer .container { display: grid; gap: var(--sp-16); }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--sp-20); font-weight: 500; }
.footer-links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* post-checkout banner */
.checkout-banner {
  position: sticky; top: 0; z-index: 60; padding: var(--sp-12) var(--sp-16); text-align: center;
  font-weight: 600; font-size: 0.95rem;
  background: var(--accent); color: #fff;
  transform: translateY(-100%); opacity: 0;
  transition: transform 0.35s var(--ease-out), opacity 0.35s var(--ease-out);
}
.checkout-banner.warn { background: var(--gold); color: var(--on-gold); }
.checkout-banner.show { transform: none; opacity: 1; }

/* disclaimer */
.disclaimer {
  font-size: 0.84rem; color: var(--muted); background: var(--frost);
  border: 1px solid var(--line-soft); border-radius: var(--r-card);
  padding: var(--sp-12) var(--sp-16); margin-top: var(--sp-24);
}

/* ========== 6. Sections ========== */
.hero { padding: clamp(var(--sp-40), 7vw, var(--sp-64)) 0 var(--sp-8); }
.hero-head { text-align: center; margin-bottom: clamp(var(--sp-24), 4vw, var(--sp-40)); }
.hero h1 {
  /* the min holds the headline at 2.6x the sub on a 390px screen; below 2.5x
     the two start reading as one block */
  font-size: clamp(2.6rem, 6.4vw, 4rem); max-width: 16ch; margin: 0 auto var(--sp-16);
  letter-spacing: -0.035em;
}
.hero .sub {
  color: var(--muted); max-width: 54ch; margin-inline: auto;
  font-size: clamp(1rem, 2.2vw, 1.15rem); line-height: 1.5;
}

.section { padding: var(--section-gap) 0 0; }
.results-stack { display: grid; gap: var(--sp-16); margin-top: var(--sp-24); }

/* wizard step 01 — four titled clusters in the engine's own hierarchy */
.wizard-groups { display: grid; }
.wiz-group { padding-bottom: var(--sp-24); }
.wiz-group + .wiz-group { border-top: 1px solid var(--line-soft); padding-top: var(--sp-24); }
.wiz-group-head {
  display: flex; align-items: baseline; gap: var(--sp-12); flex-wrap: wrap;
  margin-bottom: var(--sp-16);
}
.wiz-group-title { font-family: var(--serif); font-weight: 900; font-size: 1.06rem; color: var(--ink); }
.wiz-group-hint { font-size: 0.82rem; color: var(--muted); }
.wiz-fields { display: grid; gap: var(--sp-20); }
.wiz-cta { padding-top: var(--sp-4); }

/* sticky mobile CTA */
.sticky-cta {
  position: fixed; bottom: 0.9rem; left: 50%; transform: translateX(-50%) translateY(140%);
  z-index: 60; transition: transform 0.4s var(--ease-out);
  width: min(420px, calc(100% - 2rem));
}
.sticky-cta.visible { transform: translateX(-50%) translateY(0); }
.sticky-cta .btn { width: 100%; box-shadow: 0 14px 34px -10px rgba(16,27,22,0.55); }

/* ========== 7. Motion — one authored entrance ========== */
.reveal {
  opacity: 0; transform: translateY(16px); filter: blur(6px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out), filter 0.7s var(--ease-out);
}
.reveal.in { opacity: 1; transform: none; filter: none; }
/* Faster reveal for in-app results (same motion language, app tempo) */
.reveal-app { transition-duration: 0.45s; }
.no-js .reveal { opacity: 1; transform: none; filter: none; }

@keyframes pulse-in { from { opacity: 0; transform: scale(0.97) translateY(10px); } to { opacity: 1; transform: none; } }
.pop-in { animation: pulse-in 0.5s var(--ease-out) both; }

/* ========== 8. Responsive ========== */
@media (min-width: 720px) {
  .price-grid { grid-template-columns: repeat(3, 1fr); }
  .summary-grid { grid-template-columns: 1fr 1fr; align-items: start; }
  .steps-grid { grid-template-columns: repeat(3, 1fr); }
  .tools-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  /* start, not stretch: a short chapter next to a long one used to grow a
     white void rather than end where its content ends */
  .results-stack.two { grid-template-columns: 1fr 1fr; align-items: start; }
  .wiz-fields.cols { grid-template-columns: 1fr 1fr; column-gap: var(--sp-40); row-gap: var(--sp-24); }
  .ad-leaderboard { min-height: 110px; }
  .sticky-cta { display: none; }
}
@media (min-width: 1280px) {
  .tools-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 719px) {
  /* equal columns instead of wrapping: a three-up group used to drop its last
     option onto a row of its own and stop reading as one control */
  .seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: 100%; }
  .seg button {
    padding-inline: var(--sp-4); font-size: 0.84rem;
    white-space: normal; text-wrap: balance; line-height: 1.25;
  }
  .stepper { width: 100%; }
  .stepper input { flex: 1; width: auto; }
  .chip { padding: var(--sp-8) var(--sp-12); font-size: 0.87rem; }
  /* duration is the one group whose count leaves a chip stranded on its own row;
     five even columns put the ten fixed hours in two rows and leave the last
     one to the open-ended chip with its − and + */
  .chip-group[data-single="hours"] { display: grid; grid-template-columns: repeat(5, 1fr); }
  /* the rail keeps its single row by trading type size, not by wrapping */
  .step-rail { gap: var(--sp-4); }
  .step-rail .rail-item { font-size: 0.72rem; letter-spacing: 0; gap: var(--sp-4); }
  .step-rail .rail-item b { font-size: 0.82rem; }
  .step-rail .rail-sep { flex: 0 1 10px; min-width: 4px; }
  .chip-group[data-single="hours"] .chip { padding-inline: var(--sp-4); text-align: center; }
  .cc-ing-row input, .cc-ing-row select, .cc-name { font-size: 1rem; } /* <16px triggers iOS focus-zoom */
}

/* touch ergonomics: grow hit areas only where the pointer is coarse */
@media (pointer: coarse) {
  .faq summary,
  details.how-details summary { padding-block: var(--sp-8); }
  .paywall-close { width: 44px; height: 44px; }
  .how-link, [data-todo="login"] { display: inline-block; padding-block: var(--sp-8); }
  .footer-links a { display: inline-block; padding-block: var(--sp-4); }
  .rail-btn { padding-block: var(--sp-4); }
}
@media (max-width: 539px) {
  .rail-long { display: none; }
  .rail-short { display: inline; }
  .step-rail .rail-item { font-size: 0.76rem; }
  .step-rail .rail-item b { font-size: 0.86rem; }
  .step-rail .rail-sep { flex: 1 1 auto; min-width: 8px; }
  .cc-ing-row { grid-template-columns: 1fr 4.4rem 4.6rem 2rem; }
  .shopping-table { font-size: 0.86rem; }
  .site-nav a:not(.nav-cta), #btn-signout { display: none; }
  .nav-cta { padding: var(--sp-8) var(--sp-12); font-size: 0.9rem; }
  .site-nav a.nav-compact { display: inline-flex; }
}

/* ========== 9. Reduced motion ========== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; filter: none; transition: none; }
  .pop-in { animation: none; }
  /* keep colour/opacity feedback, drop movement */
  .btn, .chip, .seg button, .stepper button, .cocktail-card, .tool-link-card {
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  }
  .btn:active, .chip:active, .seg button:active, .stepper button:active,
  .cocktail-card:active, .paywall-close:active { transform: none; }
  .tool-link-card:hover { transform: none; }
  .sticky-cta { transition: none; }
  dialog.paywall, dialog.paywall[open] { transform: none; }
  #plan-content-pro, .lock-overlay { transition: none; }
  .mix-chart i { transition: none; }
  .faq details::details-content, details.how-details::details-content { transition: none; }
  .checkout-banner { transition: none; }
}

/* ========== 10. Print ========== */
@media print {
  .site-header, .ad-slot, .pro-cta, .sticky-cta, .site-footer, .faq, .tools-grid, .step-rail { display: none !important; }
  body { background: #fff; }
  .chapter { background: none; padding: 0; box-shadow: none; }
  .chapter > .chapter-label { color: var(--ink); }
  .result-card, .tool-card { box-shadow: none; border-color: #ddd; }
}

/* ========== 11. Sign in / sign out ========== */
/* Sign-in dialog: the paywall's shell, a form instead of prices. */
.signin .paywall-inner { max-width: 380px; }
.signin label { display: block; margin: 14px 0 6px; color: var(--muted); }
.signin input {
  width: 100%; padding: 10px 12px; font: inherit;
  border: 1px solid var(--line); border-radius: var(--r-btn); background: var(--card);
}
.signin input:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
#signin-code { letter-spacing: 0.35em; font-size: 20px; text-align: center; }
.signin .btn { width: 100%; margin-top: 14px; }
.signin #signin-back { margin-top: 10px; background: none; border: 0; cursor: pointer; }
.btn-signout { background: none; border: 0; cursor: pointer; font-size: 12px; text-decoration: underline; color: inherit; }

/* ========== 12. Saved events ========== */
.plan-actions { display: flex; justify-content: flex-end; margin: var(--sp-8) 0 var(--sp-16); }
.save-dialog .paywall-inner { max-width: 420px; }
.save-dialog label { display: block; margin: var(--sp-16) 0 var(--sp-8); color: var(--muted); }
.save-dialog input[type="text"] {
  width: 100%; padding: var(--sp-8) var(--sp-12); font: inherit;
  border: 1px solid var(--line); border-radius: var(--r-btn); background: var(--card);
}
.save-dialog input[type="text"]:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.save-dialog .btn { width: 100%; margin-top: var(--sp-16); }

.my-events { margin: 0 0 var(--sp-20); padding: var(--sp-16) var(--sp-20); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--card); }
.my-events-title { font-size: 0.95rem; margin: 0 0 var(--sp-8); }
.my-events ul { list-style: none; margin: 0; padding: 0; }
.my-events li { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-16); padding: var(--sp-8) 0; }
.my-events li + li { border-top: 1px solid var(--line-soft); }
.my-events .ev-text { display: flex; flex-direction: column; min-width: 0; }
.my-events .ev-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.my-events .ev-actions { display: flex; gap: var(--sp-8); flex-shrink: 0; }
.my-events .ev-actions .btn { padding: var(--sp-4) var(--sp-12); font-size: 0.86rem; }