/* ============================================================
   ART DIRECTION B — "The White Table"   (selected 2026-11-02)

   The live site's own ground at release scale. The product is
   shown at near-literal fidelity — a real form, a real table, a
   real document — laid on a clean warm surface.

   Delivery-agnostic on purpose: both scrubbed and standard link this
   file, so any difference between those two pages is a difference of
   delivery and never of art direction.
   ============================================================ */

body { background: #fff; color: var(--ink); }

/* ── Chrome ────────────────────────────────────────────────── */
.bar { background: rgba(255,255,255,.82); border-bottom: 1px solid rgba(0,0,0,.07); }
.bar a { color: var(--ink-muted); }
.bar a:hover { color: var(--ink); }
/* No filter. The wordmark is a two-color mark - ink letters and a lime
   plus - and inverting it would recolor the plus. The ink-on-transparent
   variant is a separate asset rather than a CSS trick. */

.eyebrow { color: var(--ink-muted); }

/* Alternating grounds carry the beat structure without rules.
   Written to match however the delivery mode wraps a scene. */
.scene { background: #fff; }
.scene[data-tone="warm"] { background: var(--bg-subtle); }

/* ── Intro ──────────────────────────────────────────────────
   The announcement itself, before the narrative starts. A reader
   arriving from the email is told plainly what happened; the thesis
   that follows is then story rather than news.
   ──────────────────────────────────────────────────────────── */
.intro {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 120px 40px;
  background: #fff;
}
.intro-inner { width: 100%; max-width: 1160px; margin: 0 auto; }
.intro .eyebrow, .intro-inner .eyebrow { color: var(--ink-muted); margin-bottom: 34px; }

.intro-head {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.02;
  font-size: clamp(2.4rem, 7.2vw, 5.4rem);
  margin: 0 0 28px;
  max-width: 15ch;
}
/* The shouted word, parentheses and all, in the brand lime. Same use of
   --primary as the live site makes of emphasis type on a light ground. */
.intro-head .big { color: var(--primary); }

.intro-sub {
  font-weight: 300;
  font-size: clamp(1.0625rem, 1.9vw, 1.35rem);
  line-height: 1.5;
  color: #3e3e46;
  max-width: 46ch;
  margin: 0 0 42px;
}

/* Not an ask — a way into the page. The ask is at the close, which keeps
   the page to one of them. The chevron is what says so. */
.intro-cta {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 15px 30px 15px 26px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  text-decoration: none;
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .005em;
  transition: background-color .2s ease;
}
.intro-cta svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: var(--primary-on-dark);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .22s ease;
}
.intro-cta:hover { background: #26262c; }
.intro-cta:hover svg { transform: translateY(2px); }

@media (prefers-reduced-motion: reduce) {
  .intro-cta svg { transition: none; }
  .intro-cta:hover svg { transform: none; }
}

/* The line the headline turns away from. Gray, light and small, so the
   sentence under it reads as the answer rather than as more of the same. */
.headline .was {
  display: block;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  font-family: var(--font);
  font-weight: 300;
  letter-spacing: 0;
  line-height: 1.5;
  color: var(--ink-muted);
  margin-bottom: 26px;
  max-width: 42ch;
}

/* ── Beat I · one name, one answer ────────────────────────── */
/* The thesis sits in a column rather than across the page now, so the
   headline is sized to that column and not to the viewport. */
.nameonly .headline { font-size: clamp(1.9rem, 4.2vw, 3.2rem); }

.noinput-label { color: var(--ink-muted); }
.arrow-line, .arrow-head { stroke: var(--primary); }
.noinput-box {
  background: #fff;
  border: 1px solid var(--primary);
  border-radius: 8px;
  box-shadow: 0 0 0 3px rgba(132,204,22,.14);
  color: var(--ink);
}

.nocard {
  background: #fff;
  border: 1px solid rgba(0,0,0,.09);
  border-radius: 12px;
  box-shadow: 0 20px 48px -26px rgba(0,0,0,.2);
}
.nocard-bar { background: var(--primary); }
.nocard-eyebrow { color: #9a9aa0; }
.nocard-name { color: var(--ink); }
.nocard-rule { background: rgba(0,0,0,.09); }
.nocard-label { color: var(--qual-label); }
.nocard-credit { color: var(--ink); }

[data-kicker] {
  text-align: center;
  margin: 36px 0 0;
  font-family: var(--display);
  font-size: clamp(1.05rem, 2.2vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink);
  opacity: 0;
}

/* ── Beat I · the pasted client list ──────────────── */
.intake-lines {
  background: #fff;
  border: 1px solid rgba(0,0,0,.11);
  border-radius: 10px;
  padding: 18px 20px;
  box-shadow: 0 14px 34px -22px rgba(0,0,0,.18);
  color: var(--ink);
}
.caret { background: var(--ink); }

[data-cta] {
  display: inline-block;
  margin-top: 24px;
  padding: 12px 24px;
  border-radius: 7px;
  background: var(--primary);
  color: var(--ink);
  font-size: .8125rem;
  font-weight: 600;
  opacity: 0;
}

/* ── Beat I · the whole book ────────────────────── */
/* A size below the thesis headline, so the page keeps one loudest line. */
.booklist .nameonly-copy .beat-title {
  margin-bottom: 14px;
  font-size: clamp(1.6rem, 3.4vw, 2.5rem);
}
.booklist .nameonly-copy .beat-body { color: var(--ink-muted); max-width: 52ch; }

/* The kicker is the one line asking the reader to draw a conclusion, so
   it keeps display type — but left-aligned with everything above it. */
.booklist [data-kicker] {
  text-align: left;
  font-size: clamp(1.05rem, 2vw, 1.375rem);
  /* Two even lines rather than a long one and an orphan. The max-width is
     the fallback where text-wrap: balance is unsupported. */
  text-wrap: balance;
  max-width: 30ch;
}

/* ── Beat I · the results, as the real table ───────────────── */
.rows {
  background: #fff;
  border: 1px solid rgba(0,0,0,.09);
  border-radius: 12px;
  box-shadow: 0 18px 44px -26px rgba(0,0,0,.16);
  overflow: hidden;
}
.rows-head {
  display: grid;
  grid-template-columns: 1fr 190px 170px;
  gap: 18px;
  padding: 11px 22px;
  background: var(--bg-subtle);
  border-bottom: 1px solid rgba(0,0,0,.07);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.rows-head span:last-child { text-align: right; }
.row { padding: 17px 22px; border-bottom: 1px solid rgba(0,0,0,.06); }
.row:last-child { border-bottom: 0; }
.row-sub { color: #9a9aa0; }
.row-credit.is-none { color: #b4b4ba; font-weight: 400; }

/* Lifted from the shipped indicator rather than from the marketing
   palette: --bs-success / --ip-neutral-200 / --ip-neutral-500 in
   FirmPortal's site.css. This direction shows the product at
   near-literal fidelity, so the product's values win here. */
.qual-sq { background: var(--qual-dim); }
.qual-sq.is-lit { background: var(--qual-lit); }
.qual-label { color: var(--qual-label); }

/* ── Beat III-ii · the share control ────────────────── */
/* Solid brand lime with ink on it, not the soft tint the chips use. The
   tint reads as metadata; this has to read as a condition on the whole
   screen. Same pairing as the lead form's button — lime is load-bearing
   on this page, never decorative. */
.eyebrow-who { background: var(--primary); color: var(--ink); }

/* Incentive Partner's own green throughout: this is the advisor's view
   inside our product, not a surface their client ever sees. */
.sharecard {
  background: #fff;
  border: 1px solid rgba(0,0,0,.09);
  box-shadow: 0 18px 44px -26px rgba(0,0,0,.16);
}
.sharecard-head { background: var(--bg-subtle); border-bottom: 1px solid rgba(0,0,0,.07); }
.sharecard-eyebrow { color: var(--ink-muted); }
.sharecard-who { color: var(--ink); }

.sharerow + .sharerow { border-top: 1px solid rgba(0,0,0,.055); }
.sharename { color: var(--ink); }

.sharebox { border: 1.5px solid rgba(0,0,0,.22); background: #fff; }
.sharebox.is-on { background: var(--qual-lit); border-color: var(--qual-lit); }
.sharebox svg { stroke: #fff; }

.sharecard-foot { border-top: 1px solid rgba(0,0,0,.07); }
/* Dimmed until something is actually selected, because a live-looking
   button over four empty boxes would be the one false note on a screen
   whose whole subject is what has and has not been chosen. */
.sharebtn { background: rgba(0,0,0,.055); color: var(--ink-muted); }
.sharebtn.is-ready { background: var(--primary); color: var(--ink); }

/* ── Beat II · the report on the table ─────────────────────── */
.report-stage {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(40px, 7vw, 88px);
  align-items: center;
  max-width: 1000px;
}
.report {
  border: 1px solid rgba(0,0,0,.07);
  box-shadow: 0 44px 80px -34px rgba(0,0,0,.34), 0 4px 12px -6px rgba(0,0,0,.1);
}
[data-copy] { opacity: 0; }
[data-copy] .beat-body { color: var(--ink-muted); }
[data-copy] .beat-body + .beat-body { margin-top: 15px; }

/* ── Beat III · the questionnaire ─────────────────────────── */
/* Same ceiling as the other beats set in a column, so the thesis screen
   keeps the page's loudest line. */
.side-copy .beat-title { font-size: clamp(1.6rem, 3.4vw, 2.5rem); }
.side-copy .beat-body { color: var(--ink-muted); }

.qcard {
  background: #fff;
  border: 1px solid rgba(0,0,0,.09);
  border-radius: 12px;
  box-shadow: 0 18px 44px -26px rgba(0,0,0,.16);
}
.qcard-head {
  background: var(--bg-subtle);
  border-bottom: 1px solid rgba(0,0,0,.07);
}
.qcard-title { color: var(--ink); }
.qcard-count { color: var(--ink-muted); }

.q-row { border-bottom: 1px solid rgba(0,0,0,.055); }
.q-label { color: #4a4a52; }
.q-blank { background: #f1f1ef; }
.q-value { color: var(--ink); font-weight: 500; }
.q-doc { background: rgba(132,204,22,.14); color: var(--link); font-weight: 600; }

/* Incentive Partner's own green, not the firm's blue: this card is the
   firm's view inside our product, not a surface their client sees. */
.q-auto { color: var(--link); }

/* ── Beat IV · the rail ───────────────────────────────────── */
.rail-line { background: rgba(0,0,0,.16); }
.rail-close { color: var(--ink-muted); }
.rail-dot { background: var(--primary); }
.rail-when { color: var(--ink-muted); }
.rail-what { color: var(--ink); font-weight: 500; }
.rail-out { color: var(--ink); }

/* ── Beat V · the published page ──────────────────────────────
   Both objects here belong to the firm, so both wear the firm's two
   sampled blues and neither wears IP lime. Same reasoning as the
   client report in Beat II: the whole claim is that what the firm
   publishes is theirs. */

.site {
  background: #fff;
  border: 1px solid rgba(0,0,0,.09);
  box-shadow: 0 20px 48px -28px rgba(0,0,0,.2);
}
.site-nav { border-bottom: 1px solid rgba(0,0,0,.07); }
.site-link { background: rgba(0,0,0,.13); }

.site-kicker { color: var(--mock-firm); }
.site-head { color: var(--ink); }
/* Abstracted copy sits well below the real copy's contrast so the eye
   skips it and lands on the form, which is the thing being claimed. */
.site-line { background: rgba(0,0,0,.075); }
.site-sub { background: rgba(0,0,0,.16); }

.leadform {
  background: rgba(27,129,252,.05);
  border: 1px solid rgba(27,129,252,.3);
}
.leadform-tag { color: var(--mock-firm); }
.leadform-head { color: var(--ink); }
/* The visitor's field is theirs to fill, so it carries a focus ring —
   in the firm's blue, since this form is on the firm's site. */
.leadform .noinput-box { background: #fff; border-color: var(--mock-firm); }
.leadform-btn { background: var(--mock-firm); color: #fff; }

/* The loading rule, then the card's rule, in the firm's gradient — the
   same construction as the client report's. */
.leadcard .nocard-bar {
  background: linear-gradient(90deg, var(--mock-firm), var(--mock-firm-2));
}
.leadcard .nocard-eyebrow { color: var(--mock-firm); }
/* The indicator takes the firm's color too. Strength is still the
   COUNT of lit squares, never the hue, so recoloring it per brand
   costs the indicator nothing. Open product question: whether the
   shipped lead form actually does this. */
.leadcard .qual-sq.is-lit { background: var(--mock-firm); }

/* The firm's button on the firm's estimate. */
.nocard-cta { background: var(--mock-firm); color: #fff; }
.nocard-cta-note { color: var(--ink-muted); }

/* ── Beat VI · the firm's brand on everything ─────────────────
   Every colored element on all three artifacts is the firm's, for the
   same reason as the client report and the lead page: these are the
   surfaces the firm's client touches, and the whole claim of the screen
   is that our name is not on them. */

.m-line { background: rgba(0,0,0,.085); }

/* The client report */
.mrep { background: #fff; border: 1px solid rgba(0,0,0,.09); box-shadow: 0 18px 40px -26px rgba(0,0,0,.2); }
.mrep-rule { background: linear-gradient(90deg, var(--mock-firm), var(--mock-firm-2)); }
.mrep-eyebrow { color: var(--mock-firm); }
.mrep-name { color: var(--ink); }
.mrep-figs { border-top: 1px solid rgba(0,0,0,.07); border-bottom: 1px solid rgba(0,0,0,.07); }
.mrep-lab { color: var(--ink-muted); }
.mrep-val { color: var(--ink); }
.mrep-band { background: var(--mock-firm); color: #fff; }

/* The study portal */
.mport { background: #fff; border: 1px solid rgba(0,0,0,.09); box-shadow: 0 18px 40px -26px rgba(0,0,0,.2); }
/* White, not the warm tint the rest of the page uses for a header strip:
   this screen's ground is warm, and a tinted bar on it reads as a hole
   in the card rather than as the top of an app. The rule alone carries
   the separation. */
.mport-bar { background: #fff; border-bottom: 1px solid rgba(0,0,0,.09); }
.mport-who { color: var(--ink-muted); }
.mport-step { color: var(--mock-firm); }
.mport-prog { background: rgba(0,0,0,.08); }
.mport-prog span { background: var(--mock-firm); }
.mport-field { background: #fff; border: 1px solid rgba(0,0,0,.14); }
.mport-btn { background: var(--mock-firm); color: #fff; }

/* The finished study */
.mstudy-back { background: #fff; border: 1px solid rgba(0,0,0,.08); }
.mstudy-face { background: #fff; border: 1px solid rgba(0,0,0,.13); box-shadow: 0 20px 44px -26px rgba(0,0,0,.22); }
.mstudy-eyebrow { color: var(--ink-muted); }
.mstudy-rule { background: var(--mock-firm-2); }
.mstudy-prep { color: var(--ink-muted); }
.mstudy-client { color: var(--ink); }
.mstudy-years { color: var(--ink-muted); }

/* ── The close and the ask ────────────────────────────────── */
.close-head { color: var(--ink); }
/* The promise half of the sentence in the brand green — the same use of
   --primary the intro makes of (BIG), and the page's only other one. */
.close-lit { color: var(--primary); }
.close-sub { color: #3e3e46; }

.ask-label { color: var(--ink-muted); }
.ask-note { color: var(--ink-muted); }

/* The ask for a reader who already pays us is the filled one. The other
   is still unmistakably a button — Trevor asked for both paths to be
   obvious — but outlined, so the hierarchy survives the split. */
.close-cta { background: var(--ink); color: #fff; }
.close-cta:hover { background: #26262c; }

.close-cta-quiet {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.26);
}
.close-cta-quiet:hover { background: rgba(0,0,0,.045); }

/* A hairline between the two, so they read as two doors rather than as
   one ask with a stray button beside it. */
.ask + .ask { border-left: 1px solid rgba(0,0,0,.1); }

@media (max-width: 860px) {
  .report-stage { grid-template-columns: 1fr; gap: 30px; justify-items: center; }
  .rows-head { display: none; }
}
@media (max-width: 760px) {
  .ask + .ask { border-left: 0; border-top: 1px solid rgba(0,0,0,.1); }
  .intro { padding: 96px 20px; }
  /* "Incentive Partner" is held together on one line, so the mobile
     ceiling is set by that phrase rather than by the column. */
  .intro-head { max-width: none; font-size: clamp(1.85rem, 8.4vw, 3rem); margin-bottom: 22px; }
  .intro-sub { max-width: none; font-size: 1.0625rem; margin-bottom: 34px; }
  .intro-cta { padding: 14px 28px; }
  .intro .eyebrow, .intro-inner .eyebrow { margin-bottom: 26px; }
}