/* ==========================================================================
   Design tokens — the landing page's system (public/index.html), applied to
   every other surface: the auth screens, the wizard, the member area and the
   legal pages. index.html still carries its own copy of these values inline
   and deliberately does not load this file, so the two must be changed
   together; this block is the mirror, not the source.

   Green-black ink, a warm bronze, two paper tones and a sage. Lora for
   headings — the same face the PDF uses, so the site and the deliverable
   still read as one product — and Inter Tight for body copy.
   ========================================================================== */
:root {
  --ink:        #132321;
  --ink-soft:   #1d332f;
  /* The reference bronze. Backgrounds and rules only — it is too light to
     carry text on paper. */
  --gold:       #c59050;
  /* The text bronze, 4.6:1 on --cream. Same value the landing page calls
     --gold; #a8702b, what both files used to say, measures 4.1:1 and misses
     AA at the 0.7rem sizes the eyebrows use. */
  --gold-deep:  #9c6926;
  --gold-pale:  #dcb384;
  /* --cream is the page ground and the card face; --paper the band behind
     it; --sage the third, cooler band. Same three roles, and the same three
     values, as the landing page (where they are named paper/cream/sage). */
  --cream:      #fffdf8;
  --paper:      #f6f2e9;
  --sage:       #e4ebe5;
  --white:      #ffffff;

  --text:       #132321;
  --text-muted: #4f5d59;
  /* 4.5:1 on --cream — the floor, and the landing page's own small-print
     grey. Anything lighter fails AA at the sizes it is used at. */
  --text-faint: #6d7975;
  --rule:       rgba(19, 35, 33, 0.14);
  --rule-gold:  rgba(197, 144, 80, 0.38);

  --ok:    #1c7a52;
  --warn:  #8f5a05;
  --err:   #b3372e;

  /* Rounder than the old 3/5/10: the landing page draws cards at 14-22px and
     buttons as full pills, and a 5px button next to one of its 18px cards is
     what made the wizard read as a different site. */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-pill: 999px;

  --shadow-page: 0 1px 2px rgba(26,39,35,.05), 0 14px 34px -10px rgba(26,39,35,.16);
  --shadow-lift: 0 22px 70px rgba(26,39,35,.12);

  --measure: 66ch;
  --gutter: clamp(1.15rem, 4vw, 3.5rem);
  --max: 1200px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* The `hidden` attribute is only `display: none` in the UA stylesheet, so ANY
   class here that sets a display beats it and the element stays on screen.
   That is not hypothetical: `.mb-tab` sets `display: inline-flex`, which is
   why the admin tab -- rendered `hidden` and revealed only once
   /api/admin/check answers -- was visible to every signed-in member instead.
   `!important` because the whole point is to outrank whatever a component
   sets; hide by any other means if you need an element that ignores this. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; scroll-padding-top: 76px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

body {
  font-family: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(0.94rem, 0.9rem + 0.2vw, 1rem);
  line-height: 1.65;
  color: var(--text);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, .display { font-family: 'Lora', Georgia, serif; font-weight: 600; color: var(--ink); }
h1 { font-size: clamp(2.2rem, 1.45rem + 3.1vw, 3.6rem); line-height: 1.06; letter-spacing: -0.021em; }
h2 { font-size: clamp(1.75rem, 1.25rem + 2.2vw, 2.85rem); line-height: 1.12; letter-spacing: -0.016em; }
h3 { font-size: clamp(1.12rem, 1rem + 0.5vw, 1.4rem); line-height: 1.25; letter-spacing: -0.008em; }

a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }

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

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.eyebrow {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.19em; text-transform: uppercase;
  color: var(--gold-deep);
}
.eyebrow.on-dark { color: var(--gold); }
.lede { font-size: clamp(1.02rem, 0.96rem + 0.45vw, 1.2rem); line-height: 1.62; color: var(--text-muted); max-width: 52ch; }
.rule-gold { height: 1px; background: var(--rule-gold); border: 0; }

.skip-link {
  position: absolute; left: 0.5rem; top: -3rem; z-index: 200;
  background: var(--ink); color: var(--cream); padding: 0.6rem 1rem;
  border-radius: var(--r-md); font-size: 0.85rem; transition: top .15s;
}
.skip-link:focus { top: 0.5rem; }

/* --- Header --------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: var(--cream);
  border-bottom: 1px solid var(--rule);
}
.header-inner {
  display: flex; align-items: center; gap: 1.5rem;
  height: 68px;
}
.brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; flex-shrink: 0; }
.roundel {
  width: 34px; height: 34px; flex-shrink: 0;
  border: 0; border-radius: 50%;
  display: grid; place-items: center; background: var(--ink);
  font-family: 'Lora', serif; font-size: 0.85rem; font-weight: 600; color: var(--cream);
  letter-spacing: 0.02em;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-family: 'Lora', serif; font-weight: 600; font-size: 0.97rem; color: var(--ink); }
.brand-sub { font-size: 0.63rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--text-faint); }

.site-nav { margin-left: auto; display: flex; align-items: center; gap: 1.7rem; }
.site-nav a {
  text-decoration: none; font-size: 0.85rem; font-weight: 400; color: var(--text-muted);
  padding: 0.25rem 0; border-bottom: 1px solid transparent; transition: color .15s, border-color .15s;
}
.site-nav a:hover { color: var(--ink); border-bottom-color: var(--gold); }

.header-actions { display: flex; align-items: center; gap: 0.85rem; margin-left: 1.4rem; }

.lang-switch { display: flex; border: 1px solid var(--rule); border-radius: 999px; overflow: hidden; background: var(--white); }
.lang-switch button {
  border: 0; background: transparent; cursor: pointer;
  padding: 0.3rem 0.62rem; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.06em;
  color: var(--text-faint); transition: background .15s, color .15s;
}
.lang-switch button[aria-pressed="true"] { background: var(--ink); color: var(--cream); }

/* Pills, as on the landing page, and the same lift on hover. The lift is
   suppressed for reduced motion by the global transition kill at the top of
   this file, so it needs no query of its own. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 48px; padding: 0.6rem 1.5rem; border-radius: var(--r-pill);
  border: 1px solid transparent;
  font-size: 0.9rem; font-weight: 700; text-decoration: none; cursor: pointer;
  transition: background .16s, color .16s, border-color .16s, transform .2s ease, box-shadow .2s ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--ink); color: var(--cream); border-color: var(--ink);
  box-shadow: 0 10px 24px rgba(19,35,33,.15);
}
.btn-primary:hover:not(:disabled) { background: var(--ink-soft); transform: translateY(-2px); box-shadow: 0 15px 30px rgba(19,35,33,.2); }
/* The one place a filled gold button survives: the paywall panel on
   /generate/result, which is ink, so the ink button would vanish into it.
   Everywhere else the primary action is .btn-primary, as on the landing
   page, which has exactly one filled button style. */
.btn-gold { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.btn-gold:hover:not(:disabled) { background: var(--gold-pale); border-color: var(--gold-pale); transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-ghost-light { background: transparent; color: var(--cream); border-color: rgba(246,242,233,.34); }
.btn-ghost-light:hover { border-color: var(--gold); color: var(--gold); }
.btn-sm { min-height: 44px; padding: 0.45rem 1.05rem; font-size: 0.83rem; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }

.nav-toggle {
  display: none; background: none; border: 1px solid var(--rule); border-radius: var(--r-md);
  width: 40px; height: 38px; cursor: pointer; align-items: center; justify-content: center;
}
.nav-toggle span { display: block; width: 17px; height: 1.5px; background: var(--ink); position: relative; }
.nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 0; width: 17px; height: 1.5px; background: var(--ink);
}
.nav-toggle span::before { top: -5px; } .nav-toggle span::after { top: 5px; }

/* --- Hero ----------------------------------------------------------------- */
.hero { padding: clamp(3rem, 6vw, 6rem) 0 clamp(3rem, 5vw, 5.5rem); position: relative; overflow: hidden; }
.hero::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 1px; background: var(--rule);
}
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.hero-copy > * + * { margin-top: 1.4rem; }
.hero h1 .accent { font-style: italic; font-weight: 500; color: var(--gold-deep); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.hero-price {
  display: flex; align-items: baseline; gap: 0.45rem;
  font-size: 0.85rem; color: var(--text-muted);
}
.hero-price strong { font-family: 'Lora', serif; font-size: 1.28rem; color: var(--ink); font-weight: 600; }
.hero-trust {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem 1.3rem;
  padding-top: 1.5rem; border-top: 1px solid var(--rule);
  font-size: 0.79rem; color: var(--text-faint);
}
.hero-trust span { display: inline-flex; align-items: center; gap: 0.42rem; }
.hero-trust span::before {
  content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--gold); flex-shrink: 0;
}

/* Report pages presented as physical paper — the one signature device,
   reused in the sample viewer. */
.hero-stack { position: relative; padding: 1rem 0; }
.paper {
  background: var(--cream); border: 1px solid rgba(19,35,33,.09);
  box-shadow: var(--shadow-page);
  /* Phone-shaped screens of the real report, not A4 sheets: the product is a
     page you open on a device. The rounded corner reads as a screen; the old
     2px radius read as paper. */
  border-radius: 14px;
  overflow: hidden;
}
.hero-stack .paper { position: absolute; width: 62%; }
.hero-stack .p-back  { top: 2%;  right: 4%;  transform: rotate(5deg);    opacity: .9; }
.hero-stack .p-mid   { top: 9%;  left: 0;    transform: rotate(-4.5deg); }
.hero-stack .p-front { position: relative; width: 70%; margin-inline: auto; transform: rotate(-0.6deg); z-index: 2; }
.hero-stack:hover .p-back  { transform: rotate(7deg) translateY(-6px); }
.hero-stack:hover .p-mid   { transform: rotate(-6.5deg) translateY(-4px); }
.paper, .hero-stack .paper { transition: transform .5s cubic-bezier(.2,.7,.3,1); }

/* --- Premise strip (full-bleed navy) -------------------------------------- */
.premise { background: var(--ink); color: var(--cream); padding: clamp(3.2rem, 6vw, 5.5rem) 0; }
.premise-inner { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: end; }
.premise blockquote {
  font-family: 'Lora', serif; font-size: clamp(1.4rem, 1rem + 1.9vw, 2.35rem);
  line-height: 1.28; color: var(--cream); font-weight: 500; letter-spacing: -0.012em;
}
.premise blockquote em { color: var(--gold); font-style: italic; }
.premise p { color: rgba(255,253,248,.7); font-size: 0.95rem; line-height: 1.7; max-width: 46ch; }

/* --- Why this matters / the framework -------------------------------------- */
.why-prose { max-width: 62ch; margin-top: 1.75rem; display: flex; flex-direction: column; gap: 1.1rem; }
.why-prose p { font-size: 1rem; line-height: 1.72; color: var(--text); }
.why-prose + .why-prose { margin-top: 0; }
.why-pullquote {
  margin: clamp(2.25rem, 5vw, 3.25rem) 0; padding: 0 0 0 1.5rem; border-left: 3px solid var(--gold);
  max-width: 56ch; font-family: 'Lora', serif; font-size: clamp(1.15rem, 1.02rem + 0.6vw, 1.5rem);
  line-height: 1.44; color: var(--ink); font-weight: 500; letter-spacing: -0.01em;
}
.why-emphasis {
  margin-top: clamp(2rem, 4.5vw, 3rem); max-width: 58ch; font-family: 'Lora', serif;
  font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.6rem); line-height: 1.4; color: var(--ink); font-weight: 500;
}

.flow-steps {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.9rem;
  margin-top: clamp(2rem, 4vw, 3rem); padding: 1.5rem 1.75rem; border-radius: 4px;
  background: var(--sage); border: 1px solid var(--rule-gold);
}
.flow-step {
  font-family: 'Lora', serif; font-weight: 600; font-size: clamp(0.95rem, 0.88rem + 0.3vw, 1.12rem);
  color: var(--ink);
}
.flow-arrow { color: var(--gold-deep); font-size: 1rem; flex-shrink: 0; }

.contrast-card {
  margin-top: clamp(2rem, 4.5vw, 3rem); padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--rule); border-left: 3px solid var(--ink); max-width: 56ch;
}
.contrast-lead { font-size: 0.85rem; color: var(--text-muted); margin: 0 0 0.75rem; }
.contrast-line {
  font-family: 'Lora', serif; font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.28rem);
  line-height: 1.42; color: var(--text-faint); margin: 0;
}
.contrast-line.accent { color: var(--ink); font-weight: 600; margin-top: 0.3rem; }

.understand-list {
  list-style: none; margin: 1.75rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.85rem;
  max-width: 62ch;
}
.understand-list li {
  display: flex; gap: 0.7rem; font-size: 1rem; line-height: 1.6; color: var(--text);
  padding-bottom: 0.85rem; border-bottom: 1px solid var(--rule);
}
.understand-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.understand-list li::before { content: "—"; color: var(--gold-deep); flex-shrink: 0; }

/* --- Generic section ------------------------------------------------------ */
.section { padding: clamp(3.5rem, 7vw, 6.5rem) 0; }
.section + .section { border-top: 1px solid var(--rule); }
.section-head { max-width: 62ch; }
.section-head > * + * { margin-top: 0.85rem; }
.section-head .eyebrow + h2 { margin-top: 1rem; }

/* --- What's inside: interactive section explorer --------------------------- */
.explorer { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(1.5rem, 4vw, 3.5rem); margin-top: clamp(2rem, 4vw, 3.25rem); }
.explorer-list { list-style: none; border-top: 1px solid var(--rule); }
.explorer-list li { border-bottom: 1px solid var(--rule); }
.explorer-btn {
  width: 100%; display: flex; align-items: baseline; gap: 0.85rem; text-align: left;
  background: none; border: 0; cursor: pointer; padding: 0.72rem 0.5rem 0.72rem 0;
  color: var(--text-muted); transition: color .15s, padding .18s, background .15s;
}
.explorer-btn .num { font-family: 'Lora', serif; font-size: 0.78rem; color: var(--gold-deep); flex-shrink: 0; width: 1.4rem; }
.explorer-btn .t { font-size: 0.92rem; font-weight: 400; }
.explorer-btn:hover { color: var(--ink); padding-left: 0.4rem; }
.explorer-btn[aria-selected="true"] { color: var(--ink); font-weight: 500; padding-left: 0.4rem; }
.explorer-btn[aria-selected="true"] .t { font-weight: 500; }
.explorer-list li:has(.explorer-btn[aria-selected="true"]) { box-shadow: inset 2px 0 0 var(--gold); }
.explorer-opt { font-size: 0.66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); margin-left: auto; flex-shrink: 0; }

/* Sticky and self-sized rather than stretched to the list's full height: with
   13 sections the list is far taller than any one panel, and matching it left
   a large empty well under the copy. */
.explorer-panel {
  background: var(--paper); border: 1px solid var(--rule-gold); border-radius: var(--r-md);
  padding: clamp(1.5rem, 3vw, 2.4rem); display: flex; flex-direction: column; gap: 1.1rem;
  align-self: start; position: sticky; top: 92px;
}
.explorer-panel .p-num { font-family: 'Lora', serif; font-size: 0.8rem; color: var(--gold-deep); letter-spacing: .1em; }
.explorer-panel .p-desc { color: var(--text-muted); line-height: 1.72; }
.explorer-panel .p-gets { list-style: none; display: flex; flex-direction: column; gap: 0.55rem; padding-top: 1.1rem; border-top: 1px solid var(--rule-gold); }
.explorer-panel .p-gets li { display: flex; gap: 0.6rem; font-size: 0.86rem; color: var(--text); line-height: 1.55; }
.explorer-panel .p-gets li::before { content: "—"; color: var(--gold-deep); flex-shrink: 0; }
.panel-jump {
  align-self: flex-start; background: none; border: 0; padding: 0; cursor: pointer;
  font-size: 0.82rem; font-weight: 500; color: var(--ink);
  border-bottom: 1px solid var(--gold); padding-bottom: 2px;
}
.panel-jump:hover { color: var(--gold-deep); }

/* --- Sample viewer -------------------------------------------------------- */
.sample { background: var(--paper); }
.sample-grid {
  display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center;
}
.sample-side { display: flex; flex-direction: column; gap: 1.5rem; }
.viewer-meta { display: flex; align-items: baseline; gap: 0.85rem; padding-top: 1.25rem; border-top: 1px solid var(--rule-gold); }
.sample-dl { align-self: flex-start; }
/* The two shapes the report ships in, offered together so the choice is
   visible before anyone buys. */
.sample-dl-group { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.sample-dl-note { flex-basis: 100%; margin: 0.15rem 0 0; font-size: 0.78rem; line-height: 1.5; color: var(--text-faint); max-width: 42ch; }
.viewer-stage {
  position: relative; background: var(--sage); border: 1px solid var(--rule-gold); border-radius: var(--r-md);
  padding: clamp(1rem, 2.5vw, 2rem); display: grid; place-items: center; min-height: 300px;
}
/* Constrained on both axes by the image's own max-width/max-height rather
   than by a fixed wrapper size: an A4 page at full width is ~650px tall and
   pushed the pager off-screen on a laptop, while pinning the wrapper's height
   and deriving width from the aspect ratio overflowed narrow viewports. */
.viewer-stage img {
  display: block; width: auto; height: auto;
  max-width: 100%; max-height: min(62vh, 620px);
  border-radius: 2px; box-shadow: var(--shadow-lift); background: var(--cream);
}
.viewer-zoom {
  border: 0; background: none; padding: 0; cursor: zoom-in;
  display: block; max-width: 100%; min-width: 0;
}
.viewer-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,253,248,.94); border: 1px solid var(--rule); cursor: pointer;
  display: grid; place-items: center; color: var(--ink); font-size: 1rem; line-height: 1;
  box-shadow: 0 2px 10px rgba(19,35,33,.12); transition: background .15s, border-color .15s;
}
.viewer-nav:hover { background: var(--white); border-color: var(--gold); }
.viewer-nav:disabled { opacity: .3; cursor: not-allowed; }
.viewer-prev { left: clamp(.4rem, 1.5vw, 1rem); }
.viewer-next { right: clamp(.4rem, 1.5vw, 1rem); }

.viewer-count { font-size: 0.82rem; color: var(--text-muted); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.viewer-count strong { color: var(--ink); font-weight: 600; }
.viewer-label { font-family: 'Lora', serif; font-size: 1.05rem; color: var(--ink); }

/* min-width:0 is load-bearing: as a grid item the strip's intrinsic width is
   the sum of all 14 thumbnails, which would stretch its track past the
   viewport instead of scrolling inside it. */
.thumbs { display: flex; gap: 0.5rem; overflow-x: auto; padding: 0 0 0.4rem; scrollbar-width: thin; min-width: 0; }
.thumbs button {
  flex: 0 0 auto; width: 46px; padding: 0; cursor: pointer; background: var(--cream);
  border: 1px solid var(--rule); border-radius: 2px; overflow: hidden; line-height: 0;
  transition: border-color .15s, transform .15s;
}
.thumbs button:hover { transform: translateY(-2px); }
.thumbs button[aria-current="true"] { border-color: var(--gold-deep); box-shadow: 0 0 0 2px rgba(197,144,80,.32); }

.lightbox {
  position: fixed; inset: 0; z-index: 120; background: rgba(19,35,33,.9);
  display: grid; place-items: center; padding: 1.5rem;
}
.lightbox img { max-height: 92vh; width: auto; border-radius: 2px; box-shadow: 0 30px 70px rgba(0,0,0,.5); }
.lightbox-close {
  position: absolute; top: 1rem; right: 1rem; width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,253,248,.14); border: 1px solid rgba(255,253,248,.3); color: var(--cream);
  font-size: 1.2rem; cursor: pointer;
}

/* --- How it works --------------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); margin-top: clamp(2rem, 4vw, 3rem); counter-reset: step; }
.step { padding-top: 1.4rem; border-top: 2px solid var(--ink); }
.step .s-num { font-family: 'Lora', serif; font-size: 0.78rem; color: var(--gold-deep); letter-spacing: .12em; }
.step h3 { margin: 0.5rem 0 0.6rem; }
.step p { color: var(--text-muted); font-size: 0.92rem; line-height: 1.68; }

/* --- Languages ------------------------------------------------------------ */
.lang-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.4rem; }
.lang-chip {
  border: 1px solid var(--rule-gold); background: var(--paper); border-radius: 999px;
  padding: 0.42rem 0.95rem; font-size: 0.83rem; color: var(--ink);
}

/* --- Pricing -------------------------------------------------------------- */
.pricing { background: var(--ink); color: var(--cream); }
.pricing h2, .pricing h3 { color: var(--cream); }
.pricing .lede { color: rgba(255,253,248,.72); }
.price-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(1.25rem, 3vw, 2rem); margin-top: clamp(2rem, 4vw, 3rem); }
.price-card {
  border: 1px solid rgba(197,144,80,.34); border-radius: var(--r-md); padding: clamp(1.5rem, 3vw, 2.25rem);
  display: flex; flex-direction: column; gap: 1.15rem; background: rgba(255,253,248,.035);
}
.price-card.feature { border-color: var(--gold); background: rgba(197,144,80,.07); }
.price-card .pc-tag { font-size: 0.68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.price-amount { display: flex; align-items: baseline; gap: 0.45rem; }
.price-amount .val { font-family: 'Lora', serif; font-size: clamp(2.4rem, 1.8rem + 2.4vw, 3.4rem); font-weight: 600; color: var(--cream); line-height: 1; }
.price-amount .per { font-size: 0.85rem; color: rgba(255,253,248,.62); }
.price-card ul { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
.price-card li { display: flex; gap: 0.6rem; font-size: 0.88rem; color: rgba(255,253,248,.85); line-height: 1.55; }
.price-card li::before { content: "—"; color: var(--gold); flex-shrink: 0; }
.price-card .btn { margin-top: auto; }

.calc { border-top: 1px solid rgba(197,144,80,.28); padding-top: 1.15rem; display: flex; flex-direction: column; gap: 0.8rem; }
.calc-label { font-size: 0.8rem; color: rgba(255,253,248,.62); }
.calc-row { display: flex; align-items: center; gap: 0.8rem; }
.stepper { display: flex; align-items: center; border: 1px solid rgba(197,144,80,.4); border-radius: var(--r-md); overflow: hidden; }
.stepper button {
  width: 34px; height: 34px; background: transparent; border: 0; color: var(--gold);
  font-size: 1.05rem; cursor: pointer; line-height: 1;
}
.stepper button:hover { background: rgba(197,144,80,.16); }
.stepper input {
  width: 54px; height: 34px; background: transparent; border: 0; text-align: center;
  color: var(--cream); font-size: 0.92rem; font-variant-numeric: tabular-nums;
  border-inline: 1px solid rgba(197,144,80,.24); -moz-appearance: textfield;
}
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.calc-total { margin-left: auto; font-family: 'Lora', serif; font-size: 1.5rem; color: var(--gold); font-weight: 600; font-variant-numeric: tabular-nums; }

/* --- FAQ ------------------------------------------------------------------ */
.faq-list { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); border-top: 1px solid var(--rule); max-width: 78ch; }
.faq-item { border-bottom: 1px solid var(--rule); }
.faq-q {
  width: 100%; display: flex; align-items: flex-start; gap: 1rem; text-align: left;
  background: none; border: 0; cursor: pointer; padding: 1.15rem 0;
  font-size: 1rem; font-weight: 500; color: var(--ink); font-family: 'Lora', serif;
}
.faq-q .chev { margin-left: auto; color: var(--gold-deep); transition: transform .2s; flex-shrink: 0; font-size: .8rem; }
.faq-q[aria-expanded="true"] .chev { transform: rotate(90deg); }
.faq-a { display: none; padding: 0 0 1.3rem; color: var(--text-muted); max-width: 62ch; line-height: 1.72; font-size: 0.93rem; }
.faq-a.open { display: block; }

/* --- Footer --------------------------------------------------------------- */
.site-footer { background: var(--ink); color: rgba(255,253,248,.66); padding: clamp(2.75rem, 5vw, 4rem) 0 2rem; font-size: 0.85rem; }
.footer-grid { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); gap: 2rem; align-items: start; }
.site-footer .brand-name { color: var(--cream); }
.site-footer .brand-sub { color: rgba(255,253,248,.45); }
.site-footer .roundel { background: transparent; color: var(--gold); border-color: var(--gold); }
.footer-disclaimer { font-size: 0.76rem; line-height: 1.65; color: rgba(255,253,248,.58); max-width: 56ch; }
.footer-sub-label { margin-top: 0; color: rgba(255,253,248,.58); }
.footer-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; }
.footer-links a { text-decoration: none; color: rgba(255,253,248,.7); border-bottom: 1px solid transparent; }
.footer-links a:hover { color: var(--gold); border-bottom-color: var(--gold); }
.footer-bottom { margin-top: 2.25rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,253,248,.13); display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; font-size: 0.76rem; color: rgba(255,253,248,.55); }
.footer-bottom a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.footer-bottom a:hover { color: var(--cream); }

/* --- Sticky mobile CTA ---------------------------------------------------- */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; display: none;
  padding: 0.7rem var(--gutter) calc(0.7rem + env(safe-area-inset-bottom));
  background: var(--cream); border-top: 1px solid var(--rule);
  align-items: center; gap: 1rem;
  transform: translateY(110%); transition: transform .25s ease;
}
.sticky-cta.show { transform: translateY(0); }
.sticky-cta .sc-price { font-size: 0.8rem; color: var(--text-muted); }
.sticky-cta .sc-price strong { font-family: 'Lora', serif; font-size: 1.05rem; color: var(--ink); display: block; }
.sticky-cta .btn { margin-left: auto; }

/* ==========================================================================
   The generator tool
   ========================================================================== */
.tool { background: var(--paper); }
.tool-shell {
  margin-top: clamp(2rem, 4vw, 3rem);
  background: var(--cream); border: 1px solid var(--rule-gold); border-radius: var(--r-lg);
  box-shadow: var(--shadow-page); overflow: hidden;
  max-width: 780px; margin-inline: auto;
}
.tool-step { padding: clamp(1.35rem, 3vw, 2rem); border-bottom: 1px solid var(--rule); }
.tool-step:last-child { border-bottom: 0; }
.step-label {
  display: flex; align-items: baseline; gap: 0.65rem; margin-bottom: 1.1rem;
}
.step-label .sl-num { font-family: 'Lora', serif; font-size: 0.72rem; color: var(--gold-deep); letter-spacing: .1em; }
.step-label .sl-text { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); }

.mode-toggle { display: flex; gap: 0.55rem; }
.mode-btn {
  flex: 1; padding: 0.78rem 0.9rem; border: 1px solid var(--rule); border-radius: var(--r-md);
  background: var(--white); color: var(--text-muted); font-size: 0.86rem; font-weight: 500; cursor: pointer;
  transition: all .15s; text-align: center;
}
.mode-btn:hover { border-color: var(--gold); color: var(--ink); }
.mode-btn.active { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.mode-hint { font-size: 0.78rem; color: var(--text-faint); margin-top: 0.7rem; }

.drop-zone {
  border: 1px dashed var(--rule-gold); border-radius: var(--r-md); background: var(--white);
  padding: clamp(1.75rem, 4vw, 2.5rem) 1.25rem; text-align: center; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.drop-zone:hover, .drop-zone.over { border-color: var(--gold-deep); background: var(--sage); }
.drop-zone .dz-label { font-weight: 500; color: var(--ink); margin-bottom: 0.25rem; font-size: 0.92rem; }
.drop-zone .dz-hint { font-size: 0.78rem; color: var(--text-faint); }

.file-pill {
  display: none; align-items: center; gap: 0.75rem; background: var(--white);
  border: 1px solid var(--rule); border-radius: var(--r-md); padding: 0.6rem 0.9rem; margin-top: 0.9rem;
}
.file-pill.show { display: flex; }
.fp-name { font-weight: 500; color: var(--ink); flex: 1; font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-clear { background: none; border: none; color: var(--text-faint); cursor: pointer; font-size: 1.15rem; line-height: 1; }
.fp-clear:hover { color: var(--err); }

.people-list { margin-top: 1rem; border: 1px solid var(--rule); border-radius: var(--r-md); overflow: hidden; background: var(--white); }
.person-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--rule); font-size: 0.86rem; }
.person-row:last-child { border-bottom: none; }
.person-row input[type="checkbox"] { width: 15px; height: 15px; flex-shrink: 0; accent-color: var(--ink); }
.person-main { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.person-status { margin-left: auto; font-size: 0.78rem; color: var(--text-faint); text-align: right; flex-shrink: 0; }
.person-status.writing, .person-status.chart, .person-status.rendering { color: var(--gold-deep); }
.person-status.done { color: var(--ok); font-weight: 600; }
.person-status.error { color: var(--err); font-weight: 600; }
.person-status.cancelled { color: var(--text-faint); font-weight: 600; }
.row-cancel-btn { display: none; background: none; border: none; color: var(--text-faint); font-size: 0.9rem; line-height: 1; cursor: pointer; padding-left: 0.35rem; }
.row-cancel-btn:hover { color: var(--err); }
.people-list.generating .row-cancel-btn.eligible { display: inline; }

.location-line { font-size: 0.76rem; color: var(--text-faint); display: flex; align-items: center; gap: 0.5rem; }
.location-line.ok { color: var(--text-muted); }
.location-line.fallback { color: var(--warn); }
.location-line.error { color: var(--err); flex-direction: column; align-items: flex-start; gap: 0.2rem; }
.field-error-row { display: flex; align-items: center; gap: 0.5rem; }
.location-fix-btn { background: none; border: none; color: var(--ink); font-size: 0.76rem; cursor: pointer; padding: 0; text-decoration: underline; text-decoration-color: var(--gold); }
.location-fix-input { font-size: 0.8rem; padding: 0.25rem 0.55rem; border: 1px solid var(--rule); border-radius: var(--r-sm); flex: 1; max-width: 260px; background: var(--white); }

.field-row { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 0.75rem; }
.field-row > label { width: 152px; flex-shrink: 0; font-size: 0.85rem; font-weight: 500; color: var(--ink); }
.field-row select, .field-row input {
  flex: 1; min-width: 0; border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--white);
  padding: 0.55rem 0.75rem; font-size: 0.86rem; color: var(--text);
}
.field-row select:hover, .field-row input:hover { border-color: var(--gold); }

/* The phone field's compound country-code + number pair (wizard step 4).
   A sibling of select/input inside .field-row rather than one of them, so it
   needs its own flex:1 -- the generic rule above only reaches direct
   select/input children. */
.wz-phone-field { display: flex; flex: 1; min-width: 0; gap: 0.5rem; }
.wz-phone-country {
  flex: 0 0 auto; width: auto; max-width: 9.5rem;
  border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--white);
  padding: 0.55rem 0.5rem; font-size: 0.86rem; color: var(--text);
}
.wz-phone-country:hover { border-color: var(--gold); }
.wz-phone-number { flex: 1; min-width: 0; }
.check-row { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-bottom: 0.9rem; font-size: 0.85rem; color: var(--ink); }
.check-row label { display: flex; align-items: center; gap: 0.45rem; }
.check-row input { accent-color: var(--ink); }

.sub-label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-faint); margin: 1.4rem 0 0.9rem; }

.disclosure { margin-top: 1rem; border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--white); }
.disclosure-toggle { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; padding: 0.7rem 0.9rem; cursor: pointer; font-size: 0.82rem; font-weight: 500; color: var(--ink); background: none; border: 0; text-align: left; }
.disclosure-toggle .chev { transition: transform .15s; color: var(--gold-deep); flex-shrink: 0; }
.disclosure.open .chev { transform: rotate(90deg); }
.disclosure-body { display: none; padding: 0 0.9rem 0.9rem; }
.disclosure.open .disclosure-body { display: block; }

.btn-block { width: 100%; }
.btn-cancel { display: none; width: 100%; margin-top: 0.55rem; }
.btn-cancel.show { display: flex; }

.status-bar { display: none; align-items: flex-start; gap: 0.6rem; padding: 0.7rem 0.9rem; border-radius: var(--r-md); border: 1px solid var(--rule); font-size: 0.83rem; margin-top: 1rem; background: var(--white); }
.status-bar.info { display: flex; color: var(--ink); }
.status-bar.error { display: flex; color: var(--err); border-color: rgba(179,55,46,.45); }
.status-bar.ok { display: flex; color: var(--ok); border-color: rgba(28,122,82,.45); }

.progress-wrap { display: none; margin-top: 1rem; }
.progress-wrap.show { display: block; }
.progress-label { display: flex; justify-content: space-between; font-size: 0.78rem; color: var(--text-muted); margin-bottom: 0.4rem; font-weight: 500; }
.progress-track { background: var(--rule); border-radius: 3px; height: 3px; overflow: hidden; }
.progress-fill { background: var(--gold-deep); height: 100%; width: 0%; transition: width .25s ease; }
.progress-fill.has-errors { background: var(--warn); }

.total-line { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--rule); }
.total-line .tl-label { font-size: 0.82rem; color: var(--text-muted); }
.total-line .tl-value { font-family: 'Lora', serif; font-size: 1.45rem; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.total-line .tl-sub { display: block; font-family: 'Inter Tight', sans-serif; font-size: 0.74rem; font-weight: 400; color: var(--text-faint); text-align: right; }

.summary-group { margin-bottom: 1.25rem; }
.summary-group:last-child { margin-bottom: 0; }
.summary-group-title { font-size: 0.78rem; font-weight: 600; color: var(--ok); margin-bottom: 0.5rem; }
.summary-group-title.na { color: var(--err); }
.summary-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.45rem 0; border-bottom: 1px solid var(--rule); font-size: 0.85rem; }
.summary-row:last-child { border-bottom: none; }
.summary-row .reason { color: var(--err); text-align: right; flex-shrink: 0; }
.summary-row a { color: var(--ink); font-weight: 500; }
/* The two published shapes of one report, side by side. Kept on one line with
   a separator rather than stacked, so a 50-person batch does not double in
   height just because each row now offers two files. */
.dl-pair { display: flex; gap: 0.6rem; flex-shrink: 0; align-items: baseline; }
.dl-pair a + a { padding-left: 0.6rem; border-left: 1px solid var(--rule); }
.summary-empty { font-size: 0.83rem; color: var(--text-faint); }

.spinner { width: 13px; height: 13px; flex-shrink: 0; border: 2px solid rgba(255,253,248,.35); border-top-color: var(--cream); border-radius: 50%; animation: spin .75s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.pay-note { font-size: 0.78rem; color: var(--text-faint); margin-top: 0.8rem; line-height: 1.6; }

/* --- Wizard --------------------------------------------------------------- */
.wizard { position: relative; }
.wz-head { margin-bottom: 1.6rem; }
.wz-count { font-size: 0.72rem; letter-spacing: .13em; text-transform: uppercase; color: var(--text-faint); margin: 0 0 0.55rem; display: flex; gap: 0.4em; }
.wz-track { height: 3px; background: var(--sage); border-radius: 2px; overflow: hidden; }
.wz-fill { height: 100%; width: 20%; background: var(--gold); border-radius: 2px; transition: width .35s cubic-bezier(.2,.7,.3,1); }
@media (prefers-reduced-motion: reduce) { .wz-fill { transition: none; } }

/* Only the active step is in the document flow; the rest are fully removed so
   they can't be tabbed into or read out by a screen reader. */
.wz-step { display: none; }
.wz-step.is-active { display: block; }
.wz-q { font-family: 'Lora', serif; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.95rem); line-height: 1.25; color: var(--ink); margin: 0 0 0.5rem; }
.wz-hint { font-size: 0.9rem; color: var(--text-muted); line-height: 1.6; margin: 0 0 1.3rem; max-width: 52ch; }

/* The single big answer field — the visual centre of each step. */
.wz-input {
  width: 100%; font-family: 'Lora', serif; font-size: 1.4rem; color: var(--ink);
  padding: 0.75rem 0.9rem; border: 1px solid var(--rule); border-radius: 10px;
  background: var(--white); transition: border-color .15s ease, box-shadow .15s ease;
}
.wz-input::placeholder { color: var(--text-faint); font-family: 'Inter Tight', sans-serif; font-size: 1rem; }
.wz-input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(197,144,80,.22); }

/* Consent boxes on the last wizard step. The whole row is the tap target,
   not just the 18px box, so a thumb lands on it. */
.wz-consent { margin-top: 1.3rem; display: flex; flex-direction: column; gap: 0.55rem; }
.wz-check { display: flex; align-items: flex-start; gap: 0.7rem; padding: 0.55rem 0.65rem; border: 1px solid var(--rule); border-radius: 10px; background: var(--white); cursor: pointer; font-size: 0.84rem; line-height: 1.55; color: var(--text); }
.wz-check:hover { border-color: var(--gold); }
.wz-check input[type="checkbox"] { width: 18px; height: 18px; margin-top: 0.15rem; flex-shrink: 0; accent-color: var(--ink); cursor: pointer; }
.wz-check input[type="checkbox"]:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
.wz-check a { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 2px; }
.wz-foot { margin-top: 1.4rem; font-size: 0.76rem; color: var(--text-faint); }
.wz-foot a { color: var(--text-faint); text-decoration: underline; text-underline-offset: 2px; }
.wz-foot a:hover { color: var(--ink); }

.wz-choice { margin-top: 1.3rem; }
.wz-choice-lbl { display: block; font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.5rem; }
.wz-opts { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.wz-opt {
  flex: 1 1 auto; min-width: 120px; min-height: 48px; padding: 0.7rem 1rem;
  border: 1px solid var(--rule); border-radius: 10px; background: var(--white);
  font-family: 'Inter Tight', sans-serif; font-size: 0.94rem; color: var(--text); cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.wz-opt:hover { border-color: var(--gold); }
.wz-opt.selected { border-color: var(--gold); background: var(--sage); color: var(--ink); font-weight: 500; }
.wz-opt:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
/* The real <select> stays in the DOM so existing form logic keeps reading it. */
.wz-hidden-select { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.wz-err { color: var(--warn); font-size: 0.83rem; margin: 0.6rem 0 0; min-height: 1.2em; }

/* Homepage "quick generate" form (#toolQuick in index.html) — the same
   field-row/wz-opt building blocks as the wizard, laid out as one page for
   signed-in visitors instead of six. */
.quick-form { max-width: 620px; margin: 2rem auto 0; text-align: left; background: var(--cream); border: 1px solid var(--rule); border-radius: 18px; padding: 2rem 1.9rem; box-shadow: var(--shadow-lift); }
@media (max-width: 560px) { .quick-form { padding: 1.5rem 1.25rem; } }
.quick-more { margin: 0.9rem 0; border-top: 1px solid var(--rule); padding-top: 0.9rem; }
.quick-more summary { cursor: pointer; font-size: 0.85rem; font-weight: 500; color: var(--gold-deep); list-style: none; }
.quick-more summary::-webkit-details-marker { display: none; }
.quick-more[open] summary { margin-bottom: 0.75rem; }
.btn-linklike { background: none; border: none; color: var(--text-muted); font-size: 0.82rem; text-decoration: underline; cursor: pointer; }
.btn-linklike:hover { color: var(--ink); }

.wz-nav { display: flex; align-items: center; gap: 0.6rem; margin-top: 1.7rem; }
.wz-nav .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.wz-nav #wzNext, .wz-nav #previewBtn { margin-left: auto; }

/* --- Processing ----------------------------------------------------------- */
.processing { text-align: center; padding-top: 2.4rem; padding-bottom: 2.4rem; }
.pr-mark { position: relative; width: 58px; height: 58px; margin: 0 auto 1.3rem; }
.pr-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--sage); border-top-color: var(--gold);
  animation: pr-spin 1.1s linear infinite;
}
.pr-dot { position: absolute; inset: 22px; border-radius: 50%; background: var(--gold); opacity: .25; animation: pr-pulse 1.8s ease-in-out infinite; }
@keyframes pr-spin { to { transform: rotate(360deg); } }
@keyframes pr-pulse { 0%,100% { transform: scale(.7); opacity: .18; } 50% { transform: scale(1); opacity: .4; } }
@media (prefers-reduced-motion: reduce) {
  .pr-ring { animation: none; border-top-color: var(--gold); }
  .pr-dot { animation: none; }
}
.pr-title { font-family: 'Lora', serif; font-size: 1.4rem; color: var(--ink); margin: 0 0 0.3rem; }
.pr-name { font-size: 0.92rem; color: var(--text-muted); margin: 0 0 1.5rem; }
.pr-track { height: 4px; background: var(--sage); border-radius: 2px; overflow: hidden; max-width: 420px; margin: 0 auto 1.5rem; }
.pr-fill { height: 100%; width: 0%; background: var(--gold); border-radius: 2px; transition: width .6s cubic-bezier(.2,.7,.3,1); }
@media (prefers-reduced-motion: reduce) { .pr-fill { transition: none; } }
.pr-stages { list-style: none; margin: 0 auto 1.4rem; padding: 0; max-width: 340px; text-align: left; display: grid; gap: 0.55rem; }
.pr-stages li { display: flex; align-items: center; gap: 0.65rem; font-size: 0.88rem; color: var(--text-faint); transition: color .3s ease; }
.pr-stages li .pr-tick {
  flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid var(--rule); position: relative;
}
.pr-stages li.active { color: var(--ink); }
.pr-stages li.active .pr-tick { border-color: var(--gold); }
.pr-stages li.done { color: var(--text-muted); }
.pr-stages li.done .pr-tick { border-color: var(--gold); background: var(--gold); }
.pr-stages li.done .pr-tick::after {
  content: ''; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px;
  border: solid #fff; border-width: 0 1.7px 1.7px 0; transform: rotate(45deg);
}
.pr-note { font-size: 0.82rem; color: var(--text-faint); margin: 0; }

/* --- Teaser (free first page) --------------------------------------------- */
.teaser-card { border-color: var(--gold); }
.teaser-name { font-family: 'Lora', serif; font-size: 1.2rem; color: var(--ink); margin: 0.35rem 0 1.1rem; }

/* Cover alongside the snapshot text. The cover is the smaller column: it is
   decorative, and the words are what actually sell. */
.teaser-read { display: grid; grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr); gap: 1.6rem; align-items: start; }
@media (max-width: 760px) { .teaser-read { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; } }
.teaser-read figure { margin: 0; min-width: 0; }
.teaser-cover { max-width: 100%; }

/* The snapshot is real, selectable text rather than a page image, so it can
   actually be read — which is the entire point of giving it away. */
.te-eyebrow {
  font-size: 0.7rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--gold-deep); margin: 0 0 0.6rem;
}
.te-body { font-size: 0.97rem; line-height: 1.72; color: var(--text); }
.te-body p { margin: 0 0 0.85rem; }
.te-body p:last-child { margin-bottom: 0; }

/* The excerpt stops mid-sentence, and the last line fades out to make that
   read as interrupted rather than finished. This fades only the text the
   server actually sent — the rest of the report was never delivered to the
   browser, so there is nothing here to recover from the DOM. */
.te-body.is-cut {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 98%);
          mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 98%);
}
.te-cut { display: none; margin-top: 0.2rem; }
.te-cut.show { display: block; }
.te-cut-line { display: block; height: 1px; background: linear-gradient(90deg, var(--rule), transparent); }
.te-cut-note {
  font-size: 0.8rem; color: var(--text-faint); margin: 0.75rem 0 0; line-height: 1.6;
}
.tp-btn {
  display: block; width: 100%; max-width: 100%; min-width: 0; padding: 0; border: 0;
  background: none; cursor: zoom-in; position: relative; border-radius: 3px;
}
.tp-btn img {
  display: block; width: 100%; height: auto; border: 1px solid var(--rule);
  border-radius: 3px; box-shadow: 0 10px 26px rgba(19,35,33,.12);
}
.tp-zoom {
  position: absolute; left: 50%; bottom: 0.65rem; transform: translateX(-50%);
  background: rgba(19,35,33,.9); color: #fff; font-size: 0.72rem; letter-spacing: .04em;
  padding: 0.36rem 0.7rem; border-radius: 999px; white-space: nowrap;
  opacity: 0; transition: opacity .18s ease;
}
.tp-btn:hover .tp-zoom, .tp-btn:focus-visible .tp-zoom { opacity: 1; }
/* Touch devices get no hover, so the affordance has to be always-on there. */
@media (hover: none) { .tp-zoom { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tp-zoom { transition: none; } }
.teaser-read figcaption { font-size: 0.74rem; color: var(--text-faint); margin-top: 0.45rem; letter-spacing: .04em; }

/* What they don't get yet, named explicitly — the locked sections are listed
   rather than shown blurred, so nothing of the paid report is transmitted to
   a browser that hasn't paid for it. */
.teaser-locked { margin-top: 1.9rem; }
.locked-head { font-family: 'Lora', serif; font-size: 1.06rem; color: var(--ink); margin: 0 0 0.9rem; }

/* Locked sections as cards with a lock glyph, rather than a plain list —
   each one reads as a discrete thing being withheld. Named, never blurred:
   a blurred paragraph is still the paid text sitting in an unpaid browser. */
.locked-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 0.6rem; }
.locked-list li {
  display: flex; align-items: flex-start; gap: 0.7rem; min-width: 0;
  background: var(--cream); border: 1px solid var(--rule); border-radius: 14px;
  padding: 0.8rem 0.9rem; font-size: 0.87rem; color: var(--text); line-height: 1.45;
}
.locked-list li > span:last-child { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.locked-list .li-title { font-weight: 600; color: var(--ink); }
.locked-list .li-desc { font-size: 0.79rem; color: var(--text-faint); line-height: 1.5; }
.locked-list .li-ic {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 7px;
  background: var(--sage); position: relative; margin-top: -1px;
}
.locked-list .li-ic::before {
  content: ''; position: absolute; left: 50%; top: 12px; transform: translateX(-50%);
  width: 10px; height: 8px; border: 1.5px solid var(--gold-deep); border-radius: 1.5px;
}
.locked-list .li-ic::after {
  content: ''; position: absolute; left: 50%; top: 7px; transform: translateX(-50%);
  width: 6px; height: 5px; border: 1.5px solid var(--gold-deep); border-bottom: none;
  border-radius: 3px 3px 0 0;
}

/* The payment form opens as a popup (triggered by the teaser's own "unlock"
   buttons via postMessage — see generate-result.js), not as a section
   sitting permanently in the page — same fixed-overlay pattern as .lightbox
   above, reused here for consistency rather than a second one-off. */
.modal-overlay {
  position: fixed; inset: 0; z-index: 130; background: rgba(19,35,33,.6);
  display: grid; place-items: center; padding: 1.5rem;
}
.modal-panel { position: relative; width: 100%; max-width: 440px; max-height: 90vh; overflow-y: auto; }
.unlock-fallback { margin-top: 1.9rem; }
.modal-panel .unlock-box { margin-top: 0; }
/* Sits inside the panel bounds on purpose: .modal-panel scrolls, so anything
   positioned outside its box gets clipped by that overflow. */
.modal-close {
  position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,253,248,.12); border: 1px solid rgba(255,253,248,.3); color: var(--cream);
  font-size: 1.05rem; line-height: 1; cursor: pointer; z-index: 1;
}
.modal-close:hover { background: rgba(255,253,248,.2); }

/* Dark panel for the actual ask, so the paywall reads as a distinct moment
   rather than another form field. */
.unlock-box {
  margin-top: 1.9rem; padding: 1.6rem 1.5rem 1.5rem;
  background: var(--ink); border-radius: 18px; color: var(--cream);
}
@media (max-width: 560px) { .unlock-box { padding: 1.25rem 1.05rem 1.15rem; } }
.unlock-head { font-family: 'Lora', serif; font-size: 1.32rem; margin: 0 0 0.4rem; color: #fff; }
.unlock-sub { font-size: 0.88rem; color: rgba(255,253,248,.82); margin: 0 0 1.25rem; line-height: 1.6; }
.unlock-box .field-row label { color: rgba(255,253,248,.9); }
.unlock-box .field-row input {
  background: rgba(255,255,255,.07); border-color: rgba(255,253,248,.28); color: #fff;
}
.unlock-box .field-row input::placeholder { color: rgba(255,253,248,.5); }
.unlock-box .field-row input:focus { border-color: var(--gold); background: rgba(255,255,255,.12); }
.unlock-box .total-line { border-top-color: rgba(255,253,248,.22); }
.unlock-box .total-line .tl-label { color: rgba(255,253,248,.8); }
.unlock-box .total-line .tl-value { color: #fff; }
.unlock-box .total-line .tl-sub { color: rgba(255,253,248,.6); }
.unlock-box .pay-note { color: rgba(255,253,248,.62); }

/* Offered only after the free page — the tool opens as a one-person flow, and
   the team route appears once they've seen what a report actually looks like. */
.team-offer {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap; margin-top: 1.5rem; padding-top: 1.3rem; border-top: 1px solid var(--rule);
}
.to-head { font-family: 'Lora', serif; font-size: 1.02rem; color: var(--ink); margin: 0 0 0.15rem; }
.to-sub { font-size: 0.83rem; color: var(--text-muted); margin: 0; line-height: 1.55; max-width: 46ch; }
.team-offer .btn { flex: 0 0 auto; min-height: 44px; display: inline-flex; align-items: center; }

/* Follows the visitor once they have a teaser to act on. Mirrors the price
   already shown in the panel — it never introduces a price on its own. */
.gate-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: none;
  background: var(--cream); border-top: 1px solid var(--rule);
  box-shadow: 0 -8px 30px rgba(19,35,33,.14); padding: 0.7rem 1rem;
  padding-bottom: calc(0.7rem + env(safe-area-inset-bottom, 0px));
}
.gate-bar.show { display: block; }
.gate-bar-inner {
  max-width: 820px; margin: 0 auto; display: flex; align-items: center;
  justify-content: space-between; gap: 1rem;
}
.gate-txt { font-size: 0.82rem; color: var(--text-muted); min-width: 0; }
.gate-txt strong { display: block; font-family: 'Lora', serif; font-size: 1.05rem; color: var(--ink); }
/* This is the primary action on mobile, so it keeps a 44px touch target
   rather than inheriting btn-sm's smaller height. */
.gate-bar .btn { flex: 0 0 auto; min-height: 44px; display: inline-flex; align-items: center; }
@media (max-width: 420px) { .gate-txt { font-size: 0.74rem; } }

/* --- Scroll reveal -------------------------------------------------------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .hero-stack { max-width: 460px; margin-inline: auto; width: 100%; }
  .explorer { grid-template-columns: minmax(0, 1fr); }
  .explorer-panel { position: static; }
  .sample-grid { grid-template-columns: minmax(0, 1fr); }
  /* Stacked, the page itself should sit directly under the copy and above the
     pager/thumbnails, so the reader sees the artefact before the controls. */
  .sample-side { display: contents; }
  .sample-side .section-head { order: 1; }
  .viewer-stage { order: 2; }
  .viewer-meta { order: 3; margin-top: 1.25rem; }
  .thumbs { order: 4; }
  .sample-dl { order: 5; }
  .premise-inner { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 1.5rem; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
  html { scroll-padding-top: 68px; }
  .site-nav {
    position: fixed; inset: 68px 0 auto 0; background: var(--cream);
    border-bottom: 1px solid var(--rule); flex-direction: column; align-items: stretch;
    gap: 0; padding: 0.5rem var(--gutter) 1.25rem; margin-left: 0;
    display: none; box-shadow: 0 12px 28px -14px rgba(19,35,33,.3);
  }
  .site-nav.open { display: flex; }
  .site-nav a { padding: 0.8rem 0; border-bottom: 1px solid var(--rule); font-size: 0.95rem; }
  .site-nav a:last-child { border-bottom: 0; }
  .nav-toggle { display: flex; }
  .header-actions { margin-left: auto; }
  .header-actions .btn-primary { display: none; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .price-grid { grid-template-columns: minmax(0, 1fr); }
  .sticky-cta { display: flex; }
  body { padding-bottom: 0; }
  /* Five words plus four arrows wrap awkwardly mid-arrow at this width;
     stacked vertically the sequence still reads top-to-bottom without one. */
  .flow-steps { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .flow-arrow { display: none; }
}

@media (max-width: 620px) {
  /* The full brand lockup plus the language switch plus the menu button no
     longer fit on one line at phone widths — drop the second brand line and
     tighten the gaps rather than letting the menu button clip off-screen. */
  .header-inner { gap: 0.6rem; }
  .brand-sub { display: none; }
  .brand-name { font-size: 0.88rem; }
  .roundel { width: 30px; height: 30px; font-size: 0.74rem; }
  .header-actions { gap: 0.5rem; margin-left: auto; }
  .lang-switch button { padding: 0.28rem 0.5rem; font-size: 0.68rem; }

  .field-row { flex-direction: column; align-items: stretch; gap: 0.35rem; }
  .field-row > label { width: auto; }
  .field-row select, .field-row input { width: 100%; }
  .wz-phone-field { width: 100%; }
  .wz-phone-country { max-width: 7.25rem; }
  .person-row { flex-wrap: wrap; }
  .person-status { margin-left: 0; width: 100%; text-align: left; padding-left: 1.9rem; }
  .viewer-nav { width: 38px; height: 38px; }
  .hero-actions .btn { flex: 1 1 auto; }
  .mode-toggle { flex-direction: column; }
  .total-line { flex-direction: column; align-items: flex-start; gap: 0.3rem; }
  .total-line .tl-sub { text-align: left; }
}

/* ===================== Auth widget (sign up/in + report history) ========= */
.auth-widget { position: relative; display: inline-block; }
.aw-toggle { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aw-popover {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 40;
  width: 280px; background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lift); padding: 1.1rem;
}
.aw-form { display: flex; flex-direction: column; gap: 0.7rem; }
.aw-label { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.8rem; font-weight: 500; color: var(--ink); }
.aw-input {
  border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--white);
  padding: 0.55rem 0.7rem; font-size: 0.86rem; color: var(--text);
}
.aw-input:hover, .aw-input:focus { border-color: var(--gold); outline: none; }
.aw-submit { width: 100%; }
.aw-switch {
  background: none; border: 0; padding: 0; font-size: 0.78rem; color: var(--text-muted);
  text-decoration: underline; cursor: pointer; text-align: left;
}
.aw-switch:hover { color: var(--ink); }
.aw-form .status-bar { margin-top: 0; }

.aw-history-head { font-family: 'Lora', serif; font-size: 0.9rem; color: var(--ink); font-weight: 600; margin: 0 0 0.75rem; word-break: break-all; }
.aw-history-list { display: flex; flex-direction: column; gap: 0.6rem; max-height: 260px; overflow-y: auto; }
.aw-empty { font-size: 0.82rem; color: var(--text-faint); margin: 0; }
.aw-report-row {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  padding: 0.55rem 0; border-top: 1px solid var(--rule);
}
.aw-history-list .aw-report-row:first-child { border-top: 0; padding-top: 0; }
.aw-report-info { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.aw-report-name { font-size: 0.85rem; font-weight: 500; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aw-report-meta { font-size: 0.72rem; color: var(--text-faint); }
.aw-report-dl { flex-shrink: 0; font-size: 0.78rem; font-weight: 600; color: var(--gold-deep); text-decoration: none; }
.aw-report-dl:hover { text-decoration: underline; }
.aw-logout { width: 100%; margin-top: 0.9rem; }
/* Full-page member views reuse the popover's row styling, just unbounded. */
.aw-history-list.full { max-height: none; overflow: visible; }

/* ==========================================================================
   Member area (src/member-pages.js) — the signed-in side of the product.
   Intentionally quieter than the marketing page: no reveals, no gradients,
   no hero. A persistent nav and plain cards, because this is a tool being
   used rather than a page being sold.
   ========================================================================== */
.mb-body { background: var(--paper); }

.mb-header { background: var(--cream); border-bottom: 1px solid var(--rule); position: sticky; top: 0; z-index: 40; }
.mb-header-inner {
  max-width: 1080px; margin: 0 auto; padding: 0.85rem 1.5rem;
  display: flex; align-items: center; gap: 1.5rem;
}
.mb-brand { display: flex; align-items: center; gap: 0.55rem; text-decoration: none; flex-shrink: 0; }
.mb-brand .roundel {
  width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Lora', serif; font-weight: 600; color: var(--cream); font-size: 0.82rem;
}
.mb-brand-name { font-family: 'Lora', serif; font-weight: 600; color: var(--ink); font-size: 1rem; }

.mb-nav { display: flex; align-items: center; gap: 0.35rem; margin-right: auto; }
.mb-tab {
  padding: 0.5rem 0.95rem; border-radius: var(--r-pill); text-decoration: none;
  font-size: 0.86rem; font-weight: 500; color: var(--text-muted);
  min-height: 44px; display: inline-flex; align-items: center;
}
.mb-tab:hover { color: var(--ink); background: var(--sage); }
.mb-tab.is-active { color: var(--ink); background: var(--sage); }
.mb-tab:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }

.mb-header .auth-widget { position: static; flex-shrink: 0; }

.mb-main { max-width: 1080px; margin: 0 auto; padding: 2.75rem 1.5rem 4rem; }
.mb-main.mb-narrow { max-width: 680px; }

.mb-eyebrow {
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold-deep); margin: 0 0 0.5rem; font-weight: 500;
}
.mb-h1 { font-family: 'Lora', serif; font-size: 2rem; line-height: 1.2; color: var(--ink); margin: 0 0 0.6rem; }
.mb-h2 { font-family: 'Lora', serif; font-size: 1.12rem; color: var(--ink); margin: 0; }
.mb-lede { font-size: 0.95rem; color: var(--text-muted); line-height: 1.6; margin: 0 0 2rem; max-width: 56ch; }
.mb-rate { font-size: 0.85rem; color: var(--gold-deep); margin: -1.4rem 0 2rem; }
.mb-note { font-size: 0.88rem; color: var(--text-muted); line-height: 1.6; margin: 0.9rem 0 0; }
.mb-subject { font-family: 'Lora', serif; font-size: 1.3rem; color: var(--ink); margin: 0 0 0.4rem; }
.mb-center { text-align: center; margin-top: 0.9rem; }
.mb-link { font-size: 0.82rem; color: var(--gold-deep); text-decoration: none; font-weight: 500; }
.mb-link:hover { text-decoration: underline; }

/* Two large targets rather than one button — the two things a member ever
   comes here to do, weighted so the common one reads first. */
.mb-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 1rem; margin-bottom: 3rem; }
.mb-action {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.4rem 1.5rem; border-radius: 18px; text-decoration: none;
  background: var(--cream); border: 1px solid var(--rule);
  transition: border-color .18s ease, transform .18s ease;
}
.mb-action-text { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.mb-action-icon { flex: 0 0 auto; width: 26px; height: 26px; color: var(--gold-deep); margin-top: 0.1rem; }
.mb-action-go { margin-left: auto; align-self: center; color: var(--gold-deep); font-size: 1.05rem; transition: transform .18s ease; }
.mb-action:hover { border-color: var(--gold); transform: translateY(-2px); }
.mb-action:hover .mb-action-go { transform: translateX(3px); }
.mb-action:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
.mb-action-primary { background: var(--ink); border-color: var(--ink); }
.mb-action-title { font-family: 'Lora', serif; font-size: 1.1rem; color: var(--ink); }
.mb-action-sub { font-size: 0.82rem; color: var(--text-faint); line-height: 1.5; }
.mb-action-primary .mb-action-title { color: #fff; }
.mb-action-primary .mb-action-sub { color: rgba(255,253,248,.72); }
.mb-action-primary .mb-action-icon,
.mb-action-primary .mb-action-go { color: var(--gold); }
.mb-action-primary:hover { border-color: var(--gold); }

/* Masthead: name on the left, the member's own library facts on the right, so
   the top of the page carries something specific to them instead of a heading
   floating over whitespace. */
.mb-masthead {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem 2.5rem; flex-wrap: wrap;
  padding-bottom: 1.6rem; margin-bottom: 2.25rem;
  border-bottom: 1px solid var(--rule);
}
.mb-lede-tight { margin-bottom: 0; }
.mb-stats { display: flex; flex-direction: column; gap: 0.3rem; text-align: right; }
.mb-stat { font-size: 0.8rem; color: var(--text-faint); letter-spacing: 0.01em; }
.mb-stat:first-child { color: var(--ink); font-weight: 500; }

/* --- The report shelf -----------------------------------------------------
   A saved report is a printed A4 document. Each tile is drawn as one, at paper
   proportions and in the report's own navy-and-gold, so the history reads as a
   shelf the member owns rather than a list of filenames. */
.mb-shelf { margin-bottom: 2rem; }
/* Tracks are capped, not fluid: let free 1fr tracks stretch and a shelf of
   three A4 tiles grows tall enough to swamp the page it is summarising. */
.mb-doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 196px)); justify-content: start; gap: 1.5rem 1.35rem; }
.mb-doc { display: flex; flex-direction: column; min-width: 0; }
.mb-doc-cover {
  position: relative; aspect-ratio: 1 / 1.414;
  background: var(--ink); border-radius: 4px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: 0 1px 2px rgba(19,35,33,.14);
  transition: transform .2s ease, box-shadow .2s ease;
}
/* The gold hairline frame is the one detail lifted straight off the real PDF
   cover, which is what makes the tile read as that document. */
.mb-doc-cover::before {
  content: ''; position: absolute; inset: 9px;
  border: 1px solid rgba(197,144,80,.45); border-radius: 2px;
}
.mb-doc:hover .mb-doc-cover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(19,35,33,.18); }
.mb-doc-mono {
  font-family: 'Lora', serif; font-size: 1.75rem; letter-spacing: 0.04em;
  color: var(--gold); line-height: 1;
}
.mb-doc-label {
  position: absolute; bottom: 1.35rem; left: 0; right: 0;
  font-size: 0.56rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255,253,248,.6); text-align: center; padding: 0 1rem;
}
.mb-doc-lang {
  position: absolute; top: 1.15rem; right: 1.2rem;
  font-size: 0.58rem; letter-spacing: 0.1em; font-weight: 500;
  color: rgba(255,253,248,.55);
}
.mb-doc-body { padding: 0.85rem 0.1rem 0; display: flex; flex-direction: column; align-items: flex-start; }
.mb-doc-name {
  font-family: 'Lora', serif; font-size: 0.94rem; font-weight: 600; line-height: 1.35;
  color: var(--ink); margin: 0 0 0.2rem;
}
.mb-doc-meta { font-size: 0.72rem; color: var(--text-faint); margin: 0 0 0.5rem; }
.mb-doc-dl { font-size: 0.78rem; font-weight: 600; color: var(--gold-deep); text-decoration: none; }
.mb-doc-dl:hover { text-decoration: underline; }
.mb-doc-dl:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
/* Secondary of the two file links on a saved-report tile: same control, one
   step quieter, so the A4 file stays the obvious default. */
.mb-doc-dl-alt { color: var(--text-faint); font-weight: 500; margin-top: 0.15rem; }

/* Empty state occupies the same tile slot, so a first-time member sees the
   shape of what they are about to own instead of the word "none". */
.mb-doc-empty {
  aspect-ratio: 1 / 1.414;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.45rem; padding: 1.2rem; text-align: center; text-decoration: none;
  border: 1px dashed rgba(19,35,33,.22); border-radius: 4px; background: var(--cream);
}
.mb-doc-empty:hover { border-color: var(--gold); }
.mb-doc-empty:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
.mb-doc-plus { font-size: 1.5rem; color: var(--gold-deep); line-height: 1; }
.mb-doc-empty-title { font-family: 'Lora', serif; font-size: 0.9rem; color: var(--ink); }
.mb-doc-empty-cta { font-size: 0.74rem; color: var(--gold-deep); font-weight: 600; }

/* Profile: settings carry the weight, the shortcuts sit beside them. */
.mb-split { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; margin-bottom: 2.5rem; }
.mb-split .mb-card { margin-bottom: 0; }
.mb-aside {
  display: flex; flex-direction: column; gap: 0.75rem;
  padding: 1.5rem; border-radius: 18px;
  background: var(--sage); border: 1px solid var(--rule);
}
.mb-aside-rate { font-size: 0.85rem; color: var(--ink); line-height: 1.55; margin: 0 0 0.25rem; }
.mb-aside-link { font-size: 0.84rem; font-weight: 500; color: var(--gold-deep); text-decoration: none; }
.mb-aside-link:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .mb-action, .mb-action-go, .mb-doc-cover { transition: none; }
  .mb-action:hover, .mb-doc:hover .mb-doc-cover { transform: none; }
  .mb-action:hover .mb-action-go { transform: none; }
}

.mb-card {
  background: var(--cream); border: 1px solid var(--rule); border-radius: 18px;
  padding: 1.6rem 1.6rem; margin-bottom: 1.5rem;
}
.mb-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
.mb-form-actions { display: flex; align-items: center; gap: 0.6rem; margin-top: 1.1rem; }
/* Explains what a form will actually do — that an email change is pending
   until a link is clicked, why the old password is asked for. Full card width:
   these are sentences, and indenting them to the input column turned them
   into a thin ragged strip. */
.mb-note {
  font-size: 0.78rem; color: var(--text-faint); line-height: 1.55;
  margin: 0.7rem 0 0; max-width: 52ch;
}
.mb-note-oauth { margin: 0; }

/* Account-settings cards. The label-beside-input row the wizard uses assumes a
   full-page-width form; inside a card in the left half of .mb-split it leaves
   an email field too narrow to read an email in. Stacked instead, so every
   input gets the card's width. */
.mb-settings > .mb-h2 { margin-bottom: 1.15rem; }
.mb-settings .field-row { flex-direction: column; align-items: stretch; gap: 0.35rem; margin-bottom: 0.9rem; }
.mb-settings .field-row > label { width: auto; }
.mb-settings .field-row input { width: 100%; min-height: 44px; }
/* These are the controls a member taps on a phone to change their own
   credentials, so they get the full 44px target rather than the compact
   btn-sm height the wizard's inline actions use. */
.mb-settings .btn-sm { min-height: 44px; }
/* A secondary action inside a settings card, ruled off from the form above so
   "email me a link" does not read as part of the form's own submit. */
.mb-subform { margin-top: 1.4rem; padding-top: 1.3rem; border-top: 1px solid var(--rule); }
.mb-h3 { font-family: 'Lora', serif; font-size: 0.98rem; color: var(--ink); margin: 0; }
.mb-subform .mb-note { margin-top: 0.45rem; }
/* Left-aligned: a lone save button shunted to the right edge reads as "next",
   not as "apply what I just typed above". */
.mb-settings .mb-form-actions .btn:last-child { margin-left: 0; }
/* Cards stack inside the left column of .mb-split, so they need their own
   gap — .mb-split's rule zeroes the single-card case. */
.mb-split > div > .mb-card + .mb-card { margin-top: 1.5rem; }
.mb-form-actions .btn:last-child { margin-left: auto; }
.wz-err.is-ok { color: var(--gold-deep); }

/* Brand + four tabs + an email address + a log-out button stop fitting on one
   line around 940px, well above any phone breakpoint, so the nav wraps to its
   own row there rather than pushing the widget off-screen. */
@media (max-width: 940px) {
  .mb-header-inner { flex-wrap: wrap; gap: 0.75rem 1rem; padding: 0.75rem 1.1rem; }
  .mb-nav { order: 3; width: 100%; margin-right: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .mb-tab { flex-shrink: 0; }
  .mb-brand { margin-right: auto; }
  .mb-header .aw-who { max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (max-width: 860px) {
  .mb-split { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .mb-masthead { align-items: flex-start; padding-bottom: 1.25rem; margin-bottom: 1.75rem; }
  .mb-stats { text-align: left; flex-direction: row; flex-wrap: wrap; gap: 0.3rem 1rem; }
  .mb-doc-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 1.15rem 1rem; }
  /* Heading and "see all" fight for the same line on a phone and both wrap
     mid-phrase; stacking them keeps each on one line. */
  .mb-card-head { flex-direction: column; align-items: flex-start; gap: 0.3rem; }
  .mb-doc-mono { font-size: 1.4rem; }
  .mb-main { padding: 2rem 1.1rem 3rem; }
  .mb-h1 { font-size: 1.6rem; }
  .mb-card { padding: 1.25rem 1.15rem; }
  .mb-form-actions { flex-wrap: wrap; }
}

.aw-oauth { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.9rem; }
.aw-oauth-btn { width: 100%; justify-content: center; }
.aw-divider { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.9rem; font-size: 0.72rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.06em; }
.aw-divider::before, .aw-divider::after { content: ''; flex: 1; height: 1px; background: var(--rule); }

@media (max-width: 480px) {
  .aw-popover { position: fixed; top: auto; bottom: 0; left: 0; right: 0; width: auto; border-radius: var(--r-lg) var(--r-lg) 0 0; }
}


/* ==========================================================================
   Auth pages (/login, /signup, /auth/callback) — src/auth-pages.js
   A single centred card. Deliberately plain: this screen has one job and
   should never be the interesting part of the product.
   ========================================================================== */
.auth-body { background: var(--paper); }
.auth-page { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1.25rem; }
.auth-brand { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 1.75rem; text-decoration: none; }
.auth-brand .roundel {
  width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Lora', serif; font-weight: 600; color: var(--cream); font-size: 0.85rem;
}
.auth-brand-name { font-family: 'Lora', serif; font-weight: 600; color: var(--ink); font-size: 1.05rem; }
.auth-card {
  width: 100%; max-width: 420px; background: var(--cream);
  border: 1px solid var(--rule); border-radius: 18px; padding: 2.1rem 2rem;
  box-shadow: var(--shadow-lift);
}
@media (max-width: 480px) { .auth-card { padding: 1.6rem 1.25rem; } }
.auth-h1 { font-family: 'Lora', serif; font-size: 1.55rem; color: var(--ink); margin: 0 0 0.5rem; }
.auth-lede { font-size: 0.88rem; color: var(--text-muted); line-height: 1.6; margin: 0 0 1.5rem; }
.auth-label { display: block; font-size: 0.82rem; font-weight: 500; color: var(--ink); margin-bottom: 0.35rem; }
.auth-input {
  width: 100%; padding: 0.7rem 0.85rem; margin-bottom: 1rem;
  border: 1px solid var(--rule); border-radius: 10px; background: var(--white);
  font-family: inherit; font-size: 0.92rem; color: var(--text); min-height: 44px;
}
.auth-input:hover { border-color: var(--gold); }
.auth-input:focus { outline: none; border-color: var(--gold-deep); box-shadow: 0 0 0 3px rgba(197,144,80,.18); }
.auth-hint { font-size: 0.76rem; color: var(--text-faint); margin: -0.7rem 0 1rem; }
.auth-error { font-size: 0.82rem; color: var(--err); margin: 0; min-height: 0; display: none; line-height: 1.5; }
.auth-error.show { display: block; margin: 0 0 0.9rem; }

/* Show/hide password. The button sits inside the field's own box, so the
   input keeps padding-right clear of the icon rather than the text running
   underneath it. */
.auth-pw { position: relative; }
.auth-pw .auth-input { padding-right: 2.9rem; }
.auth-pw-toggle {
  position: absolute; top: 0; right: 0; height: 44px; width: 2.75rem;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--text-faint); border-radius: 0 10px 10px 0;
}
.auth-pw-toggle:hover { color: var(--ink); }
.auth-pw-toggle:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: -2px; }
/* Shown state gets the gold, so the toggle reads as "on" and not just hovered. */
.auth-pw-toggle.is-shown { color: var(--gold-deep); }

.auth-forgot { margin: -0.4rem 0 1.1rem; font-size: 0.8rem; text-align: right; }
.auth-forgot a { color: var(--gold-deep); text-decoration: none; }
.auth-forgot a:hover { text-decoration: underline; }

/* The sign-up consent box, above the Google button because it gates that too.
   Reuses .wz-check from the wizard so the two screens ask in the same shape. */
/* Sits at the foot of the sign-up form, always shown. */
.auth-consent-slot { margin: 1.2rem 0 0; }
.auth-consent { margin: 0; font-size: 0.8rem; }
.auth-consent-note a { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 2px; }

.auth-oauth { display: flex; flex-direction: column; gap: 0.5rem; }
.auth-oauth-btn { width: 100%; justify-content: center; align-items: center; gap: 0.6rem; min-height: 44px; }
.auth-oauth-btn .oauth-mark { flex: 0 0 auto; display: block; }
.auth-divider { display: flex; align-items: center; gap: 0.75rem; margin: 1.15rem 0; color: var(--text-faint); font-size: 0.76rem; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--rule); }
.auth-switch { font-size: 0.84rem; color: var(--text-muted); text-align: center; margin: 1.25rem 0 0; }
.auth-switch a { color: var(--gold-deep); font-weight: 500; }
.auth-foot { margin-top: 1.5rem; font-size: 0.82rem; }
.auth-foot a { color: var(--text-faint); text-decoration: none; }
.auth-foot a:hover { color: var(--ink); text-decoration: underline; }
.auth-waiting { text-align: center; padding: 1rem 0; }
.auth-wait-text { font-size: 0.9rem; color: var(--text-muted); margin: 1rem 0 0; }

/* The top-right account control — two links, no panel. */
.auth-widget { display: flex; align-items: center; gap: 0.5rem; }
.aw-who {
  font-size: 0.8rem; color: var(--text-muted); text-decoration: none;
  max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aw-who:hover { color: var(--ink); text-decoration: underline; }
.aw-link, .aw-logout-btn { min-height: 40px; display: inline-flex; align-items: center; }
@media (max-width: 560px) { .aw-who { display: none; } }

/* The free-preview frame on /generate/result. This is meant to read as the
   actual full report page, not a small scrolling window onto it, so it
   breaks out of the wizard card to the full viewport width (the "full-bleed"
   trick below — position relative to the viewport rather than the padded
   parent) and its height is set in JS from the "tlb-teaser-height"
   postMessage the document sends itself (see report-web.js / generate-
   result.js), rather than a fixed guess. The fixed height here is only the
   fallback shown for the instant before that message arrives. */
.teaser-frame-wrap {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  background: var(--cream);
}
/* When the teaser is the card's first thing shown, drop the card's own
   top padding so the teaser's own hero starts flush at the top instead of
   leaving a blank strip of card above it. */
.wz-card:has(> .teaser-frame-wrap:first-child) {
  padding-top: 0;
}
.teaser-frame {
  display: block;
  width: 100%;
  height: 100vh;
  border: 0;
}

/* --- Live sample on the landing page --------------------------------------
   The sample is now the real report in a frame rather than a page-image
   viewer, so it needs a fixed height: the frame is sandboxed onto an opaque
   origin, which means this page cannot measure its content to size it, and a
   percentage height collapses to zero inside a grid cell.
   Tall enough to show the hero plus the start of section 01, so a visitor can
   see it is a real document and scroll on if they want to. */
.sample-live-wrap {
  border: 1px solid var(--rule-gold, rgba(197,144,80,.38));
  border-radius: 16px;
  overflow: hidden;
  background: var(--cream);
  box-shadow: var(--shadow-page);
  overscroll-behavior-y: contain;
}
/* Without this, scrolling past the frame on a trackpad can get caught in the
   iframe's own rubber-band bounce at its top/bottom edge instead of handing
   the gesture on to the page, which reads as the page refusing to scroll. */
.sample-live { display: block; width: 100%; height: 640px; border: 0; overscroll-behavior-y: contain; }

@media (max-width: 900px) {
  /* .sample-side uses `display: contents` in the stacked layout so the page
     image could be ordered between the copy blocks. There is no separate
     image any more, so the side column goes back to being a normal block and
     the frame simply follows it. */
  .sample-grid-live { grid-template-columns: minmax(0, 1fr); }
  .sample-grid-live .sample-side { display: flex; }
  .sample-live { height: 520px; }
}

/* ==========================================================================
   Collection links — the participant's join screen (wizard shell) and the
   buyer's roster (member area). See supabase/migrations/0010_batches.sql.
   ========================================================================== */

/* The disclosure box on /join/:token. Given its own panel, in the sage rather
   than as another paragraph, because it is the one thing on that page a
   participant must not skim: they are about to hand over their birth details
   and be told things about themselves that the person who paid will read. */
.jn-share {
  margin: 1.5rem 0; padding: 1.1rem 1.2rem;
  background: var(--sage); border-radius: var(--r-lg);
}
.jn-share-head {
  font-family: 'Lora', serif; font-size: 1rem; color: var(--ink); margin-bottom: 0.35rem;
}
.jn-share p { font-size: 0.88rem; color: var(--text-muted); line-height: 1.6; margin: 0; }

.bt-why { margin: 0 0 1.4rem; font-size: 0.88rem; color: var(--text-muted); }
.bt-why p { font-weight: 600; color: var(--ink); margin-bottom: 0.45rem; }
.bt-why ul { margin: 0; padding-left: 1.1rem; }
.bt-why li { margin-bottom: 0.28rem; line-height: 1.55; }

.bt-batch { padding-bottom: 1.4rem; margin-bottom: 1.4rem; border-bottom: 1px solid var(--rule); }
.bt-batch:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
.bt-batch-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.7rem;
}
.bt-batch-name { font-family: 'Lora', serif; font-size: 1.05rem; color: var(--ink); }
.bt-batch-count { font-size: 0.8rem; color: var(--text-faint); }

.bt-link-row { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.9rem; min-width: 0; }
/* Monospace, because this is a string someone is about to check character by
   character against what they pasted into WhatsApp.

   width: 0 alongside min-width: 0 is deliberate, not redundant: Safari sizes
   a flexed text <input> from its intrinsic ~20-character width and ignores
   min-width: 0 on its own, so the box refuses to shrink below that and pushes
   the row wider than its card -- readable on a desktop Chrome window wide
   enough to hide it, and visibly broken on an iPhone, which is exactly the
   "works locally, breaks on the real site" gap this was reported as. width: 0
   forces Safari to size it from flex-basis like every other engine already
   does. overflow/white-space/text-overflow complete the truncation the old
   text-overflow: ellipsis never actually performed, since ellipsis is a
   no-op without both of those set alongside it. */
.bt-link {
  flex: 1 1 0%; min-width: 0; width: 0; padding: 0.55rem 0.75rem;
  border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--white);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.78rem;
  color: var(--text); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.bt-seats { margin-bottom: 0.7rem; }
.bt-seats .summary-row:last-child { border-bottom: none; }

@media (max-width: 560px) {
  .bt-link-row { flex-wrap: wrap; }
  .bt-link { flex-basis: 100%; width: auto; }
}
/* A seat that is still being filled in. Deliberately not .reason, which is
   red: "not finished yet" is the normal state of most of a fresh roster. */
.bt-seat-state { font-size: 0.82rem; color: var(--text-faint); text-align: right; flex-shrink: 0; }

/* The "what should my CSV contain" panel on /report/team (member-pages.js).
   Same treatment as .jn-share on the join page -- a sage panel for the one
   thing on the page someone must read before acting, not another paragraph
   they can skim past. Sits above the drop zone, so it answers the question
   before a mismatched file gets dragged in. */
.csv-guide {
  margin: 0 0 1.2rem; padding: 1.1rem 1.2rem;
  background: var(--sage); border-radius: var(--r-lg);
}
.csv-guide-head { font-family: 'Lora', serif; font-size: 1rem; color: var(--ink); margin-bottom: 0.35rem; }
.csv-guide-note { font-size: 0.85rem; color: var(--text-muted); line-height: 1.55; margin: 0 0 0.85rem; }
.csv-guide-cols { display: flex; flex-direction: column; gap: 0.55rem; }
.csv-guide-cols dt {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--gold-deep); margin: 0 0 0.15rem;
}
.csv-guide-cols dt.optional { color: var(--text-faint); }
.csv-guide-cols dd { font-size: 0.88rem; color: var(--text); margin: 0; line-height: 1.5; }