/* Prime Profits — brand system: BLACK + WHITE + ORANGE.
   Matched to the real brand assets (logo orange sampled #f9a326, deals-graphic
   orange #f66805) and to the HQ app tokens in
   ~/claude/primeprofits/app/app/globals.css, so the marketing site and the app
   a member lands in are visibly the same product.

   THE RULE: orange is IDENTITY (wordmark, primary buttons, focus, accents).
   GREEN MEANS MONEY — it survives only on real figures like the spread numbers,
   never as a brand accent. This site previously used green #22e08a AS the brand,
   which is what made it look like a different company from the app. */
:root {
  --ink: #0b0908;          /* near-black, warm cast (brand ground is black) */
  --ink-2: #151211;
  --card: #1d1918;
  --line: #2b2523;
  --text: #f6f2ef;
  --muted: #a89f99;

  --brand: #f97316;        /* identity orange */
  --brand-hot: #f66805;    /* deals-graphic orange, :active / emphasis */
  --brand-lift: #fb9d4b;   /* lighter, for orange TEXT on dark */
  --brand-deep: #4a2408;   /* deep orange ground, replaces --green-deep */

  --money: #3ecf8e;        /* GREEN = MONEY ONLY. Never chrome, never brand. */
  --gold: #e4d045;

  /* Back-compat: older markup still says class="green". Point it at the brand
     so no element keeps rendering the old off-brand green by accident. */
  --green: var(--brand-lift);
  --green-deep: var(--brand-deep);

  --radius: 14px;
  --max: 1080px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--ink);
  color: var(--text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
h1, h2, h3, .display { font-family: "Space Grotesk", "Inter", sans-serif; font-weight: 600; letter-spacing: -0.02em; line-height: 1.08; }
a { color: inherit; text-decoration: none; }
.muted { color: var(--muted); }
.green { color: var(--brand-lift); }
.money { color: var(--money); }

/* nav */
nav {
  position: sticky; top: 0; z-index: 20;
  background: rgba(11,14,12,0.82); backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--line);
}
nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; }
/* The pages actually use .wrap-wide inside <nav> (index.html, join.html, the
   legal pages). Without this rule the logo and links stacked as plain blocks. */
nav .wrap-wide {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 64px; flex-wrap: wrap; gap: 8px 20px; padding-top: 8px; padding-bottom: 8px;
}
.logo { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 19px; letter-spacing: -0.02em; }
.logo span { color: var(--green); }
.btn {
  display: inline-block; background: var(--brand); color: #1a0d02;
  font-weight: 600; padding: 11px 20px; border-radius: 10px; border: none; cursor: pointer;
  font-size: 15px; transition: transform .08s ease, filter .15s ease;
}
.btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--line); }

/* hero */
.hero { padding: 96px 0 72px; border-bottom: 1px solid var(--line); }
.kicker { display: inline-block; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--green); border: 1px solid var(--green-deep); background: rgba(249,115,22,0.07); padding: 6px 12px; border-radius: 999px; margin-bottom: 22px; }
.hero h1 { font-size: clamp(38px, 6vw, 66px); max-width: 14ch; }
.hero p.sub { font-size: clamp(17px, 2.2vw, 21px); color: var(--muted); max-width: 52ch; margin-top: 22px; }
.hero-cta { margin-top: 34px; display: flex; gap: 12px; flex-wrap: wrap; }

/* sections */
section { padding: 76px 0; border-bottom: 1px solid var(--line); }
.eyebrow { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
section h2 { font-size: clamp(28px, 4vw, 40px); max-width: 22ch; }
section .lead { color: var(--muted); font-size: 18px; max-width: 56ch; margin-top: 16px; }

/* lanes grid */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-top: 40px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.card h3 { font-size: 18px; margin-bottom: 8px; }
.card .tag { display: inline-block; font-size: 12px; color: var(--green); border: 1px solid var(--green-deep); border-radius: 6px; padding: 2px 8px; margin-top: 12px; }
.card .tag.gold { color: var(--gold); border-color: #4a3a12; }
.card p { color: var(--muted); font-size: 14px; }

/* two-col */
.two { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; }
.two .stat { font-family: "Space Grotesk", sans-serif; font-size: 44px; color: var(--green); font-weight: 600; }
ul.checks { list-style: none; margin-top: 22px; display: grid; gap: 12px; }
ul.checks li { padding-left: 30px; position: relative; color: var(--text); }
ul.checks li::before { content: "→"; position: absolute; left: 0; color: var(--green); font-weight: 700; }

/* pricing */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 44px; }
.tier { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; display: flex; flex-direction: column; }
.tier.feature { border-color: var(--green); box-shadow: 0 0 0 1px var(--green), 0 20px 60px rgba(249,115,22,0.10); }
.tier .name { font-size: 15px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.tier .price { font-family: "Space Grotesk", sans-serif; font-size: 42px; margin: 10px 0 4px; }
.tier .price small { font-size: 16px; color: var(--muted); font-weight: 400; }
.tier ul { list-style: none; margin: 20px 0; display: grid; gap: 10px; flex: 1; }
.tier li { color: var(--muted); font-size: 14px; padding-left: 22px; position: relative; }
.tier li::before { content: "✓"; position: absolute; left: 0; color: var(--green); }
.tier .btn { margin-top: auto; text-align: center; }

/* capture */
.capture { background: linear-gradient(180deg, var(--ink-2), var(--ink)); }
.capture h2 { text-align: center; margin: 0 auto; }
.capture .lead { text-align: center; margin: 16px auto 0; }
form.join { max-width: 480px; margin: 34px auto 0; display: flex; gap: 10px; flex-wrap: wrap; }
form.join input { flex: 1; min-width: 220px; background: var(--card); border: 1px solid var(--line); color: var(--text); padding: 14px 16px; border-radius: 10px; font-size: 15px; font-family: inherit; }
form.join input:focus { outline: none; border-color: var(--green); }
.form-note { text-align: center; color: var(--muted); font-size: 13px; margin-top: 14px; }
#msg { text-align: center; margin-top: 16px; font-weight: 600; min-height: 22px; }

/* founder */
.founder { display: flex; gap: 20px; align-items: flex-start; margin-top: 30px; }
.founder .dot { width: 52px; height: 52px; border-radius: 50%; background: var(--green-deep); flex-shrink: 0; display: grid; place-items: center; color: var(--green); font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 20px; }

footer { padding: 48px 0; color: var(--muted); font-size: 14px; }
footer .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; }

@media (max-width: 760px) {
  .two { grid-template-columns: 1fr; gap: 28px; }
  .tiers { grid-template-columns: 1fr; }
  section { padding: 56px 0; }
  .hero { padding: 64px 0 52px; }
}

/* ==========================================================================
   HOLDING-COMPANY REFRAME — 2026-08-31
   Brief: "get Prime Profits a lot closer to acquisition.com."

   What actually makes that site read as a serious operating company rather
   than a guru funnel is NOT its colours — it is restraint and scale. Very few
   things per screen, enormous type, generous air, and flat declarative
   statements presented as fact rather than pitch.

   Two constraints shape this:
   1. NO NUMBERS. acquisition.com is built on portfolio revenue proof. Dyson's
      own compliance position (reference_course_seller_legal_risk_2026) makes
      earnings claims the red line, and the chosen direction is to persuade on
      STRUCTURE and MECHANISM only. So authority here comes from stating what
      the thing IS, plainly, with no adjectives doing the lifting.
   2. The brand palette stays. Black/white/orange is documented, matches the
      app, and was fixed deliberately after the site drifted green. Restraint
      is expressed in SPACE and SCALE, not by desaturating the brand.
   ========================================================================== */

/* Wider measure. The old 1080px max made every section feel like a card in a
   dashboard; a holding company reads as full-bleed with air around it. */
.wrap-wide { max-width: 1240px; margin: 0 auto; padding: 0 32px; }

/* Type scale: the single biggest lever. Headlines here are display objects,
   not labels. clamp() so the jump survives phones without a media query. */
.mega {
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-weight: 600;
  font-size: clamp(34px, 5.4vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.035em;
}
.lede {
  font-size: clamp(17px, 2.1vw, 22px);
  line-height: 1.55;
  color: var(--muted);
  max-width: 60ch;
}

/* Section rhythm. Big, consistent vertical intervals are most of the "expensive"
   feeling — the eye gets one idea at a time instead of a stack of panels. */
.band { padding: clamp(80px, 12vh, 160px) 0; border-bottom: 1px solid var(--line); }
.band-tight { padding: clamp(56px, 8vh, 104px) 0; border-bottom: 1px solid var(--line); }
.eyebrow {
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 22px; display: block;
}

/* A statement line: one flat sentence, large, doing the work of a paragraph. */
.statement {
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-weight: 500;
  font-size: clamp(24px, 3.6vw, 44px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  max-width: 24ch;
}

/* The operating pillars. Numbered rows rather than cards — a card grid reads as
   a features list; a numbered ledger reads as a company describing its parts. */
.ledger { border-top: 1px solid var(--line); margin-top: 56px; }
.ledger-row {
  display: grid; grid-template-columns: 72px 1fr; gap: 28px;
  padding: 36px 0; border-bottom: 1px solid var(--line);
  align-items: start;
}
.ledger-num {
  font-family: "Space Grotesk", sans-serif; font-weight: 600;
  font-size: 15px; color: var(--brand); padding-top: 5px;
  font-variant-numeric: tabular-nums;
}
.ledger-row h3 { font-size: clamp(19px, 2.2vw, 25px); margin-bottom: 10px; font-weight: 600; }
.ledger-row p { color: var(--muted); max-width: 62ch; }
@media (max-width: 640px) {
  .ledger-row { grid-template-columns: 1fr; gap: 10px; }
  .ledger-num { padding-top: 0; }
}

/* Lanes as a plain index. Deliberately NOT cards: nine cards is clutter, nine
   index entries is a table of contents, which is what a company with divisions
   would actually publish. */
.index-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 0; border-top: 1px solid var(--line); margin-top: 48px;
}
.index-item {
  padding: 26px 20px 26px 0; border-bottom: 1px solid var(--line);
  font-family: "Space Grotesk", sans-serif; font-weight: 500;
  font-size: clamp(16px, 1.9vw, 20px);
  display: flex; align-items: baseline; gap: 12px;
}
.index-item::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--brand); flex: none; transform: translateY(-4px);
}

/* Closing CTA: one action, lots of air around it. */
.close { text-align: center; padding: clamp(96px, 15vh, 190px) 0; }
.close .mega { max-width: 18ch; margin: 0 auto 28px; }


/* --- Signature interaction, from the teardown -----------------------------
   acquisition.com's button is the one thing a visitor physically touches, and
   it is doing real work: a fully-rounded pill, a heavy 2.5px border, and an
   INVERTING hover (filled -> outlined). Copying the colour would be cargo-cult;
   copying the mechanic is what reads as considered. Ours inverts to the brand
   orange on black rather than purple on white. */
.btn-pill {
  display: inline-block;
  background: var(--brand);
  color: #170c02;
  border: 2.5px solid var(--brand);
  border-radius: 50px;
  padding: 15px 44px;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .01em;
  cursor: pointer;
  transition: background .2s ease-in-out, color .2s ease-in-out;
}
.btn-pill:hover { background: transparent; color: var(--brand); }
.btn-pill.inverse {
  background: transparent; color: var(--text); border-color: var(--line);
}
.btn-pill.inverse:hover { background: var(--text); color: var(--ink); border-color: var(--text); }

/* No scroll animation anywhere on this page, deliberately. The teardown found
   the ONLY @keyframes in acquisition.com's entire bundle is a loading spinner.
   Confident sites don't animate to hold attention, and reveal-on-scroll is one
   of the clearest tells of a funnel page. Transitions stay short and functional. */

/* Access page adjustments. form.join was written for a centered homepage
   section (margin: 34px auto); on the access page it sits in a left-aligned
   column, so the auto-centering has to be undone. .tier .btn-pill needs the
   same margin-top:auto that .tier .btn had, or buttons stop aligning across
   cards of different heights. */
.band .join { margin-left: 0; margin-right: 0; }
.tier .btn-pill { margin-top: auto; text-align: center; }
.tier h3 { font-size: 15px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
@media (max-width: 820px) { .tiers { grid-template-columns: 1fr; } }

/* ==========================================================================
   ACQUISITION.COM STRUCTURE — 2026-08-31
   Brief: "same structure as acquisition.com, header pictures and copy
   structure, everything changed for Prime Profits."

   Their homepage order, verified from the live site:
     announcement bar -> nav -> hero (copy left / portrait right)
     -> free training cards (4) -> FAQs (4) -> founders block -> final CTA.

   Their mechanics, kept: two-column hero with a portrait, a 4-card free-value
   row with corner badges, accordion FAQs, a founders block with a photo, and a
   single-CTA closer. Their palette is NOT kept: they run light mode with
   electric purple; Prime Profits is documented black/white/orange and matches
   the app a member lands in.
   ========================================================================== */

/* Announcement bar. Theirs: "NEW / 2026 Scaling Workshop Dates Announced". */
.announce {
  background: var(--brand); color: #170c02;
  font-size: 14px; font-weight: 600; text-align: center;
  padding: 10px 16px;
}
.announce .tag {
  background: #170c02; color: var(--brand);
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  padding: 3px 8px; border-radius: 4px; margin-right: 10px;
}
.announce a { text-decoration: underline; }

/* Hero: copy left, portrait right. This is the single biggest structural
   difference from what I built first, which was a centered text-only hero. */
.hero-split {
  display: grid; grid-template-columns: 1.15fr 0.85fr;
  gap: 56px; align-items: center;
}
@media (max-width: 900px) {
  .hero-split { grid-template-columns: 1fr; gap: 36px; }
  .hero-split .portrait { order: -1; }
}
.portrait {
  border-radius: var(--radius); overflow: hidden;
  background: var(--card); border: 1px solid var(--line);
  aspect-ratio: 4 / 5; display: flex; align-items: center; justify-content: center;
}
.portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Placeholder state, shown until a real photo is dropped in. Deliberately
   states what belongs here rather than shipping a broken <img>. */
.portrait .slot {
  color: var(--muted); font-size: 13px; text-align: center;
  padding: 20px; line-height: 1.5;
}

/* The free-value card row. Theirs is 4 cards with "New Release" / "Live
   In-Person" corner badges and "It's Free" stickers. */
.cards {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 18px; margin-top: 48px;
}
@media (max-width: 980px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cards { grid-template-columns: 1fr; } }
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px;
  display: flex; flex-direction: column; position: relative;
}
.card .badge {
  position: absolute; top: 14px; right: 14px;
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; padding: 4px 9px; border-radius: 4px;
  background: var(--brand-deep); color: var(--brand-lift);
}
.card h3 { font-size: 19px; margin: 6px 0 10px; font-weight: 600; }
.card p { color: var(--muted); font-size: 14.5px; flex: 1; }
.card .free {
  margin-top: 18px; font-size: 12px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--brand-lift);
}
/* The free-value cards are whole-card links into the app. Same look as the
   plain card; the border warming on hover is the only tell, per the no-motion rule. */
a.card { transition: border-color .2s ease-in-out; }
a.card:hover { border-color: var(--brand); }

/* FAQs. Native <details> so it works with no JavaScript, which also keeps the
   no-motion rule: the only movement on the page is the browser's own toggle. */
.faq { border-top: 1px solid var(--line); margin-top: 44px; }
.faq details { border-bottom: 1px solid var(--line); padding: 22px 0; }
.faq summary {
  cursor: pointer; list-style: none;
  font-family: "Space Grotesk", sans-serif; font-weight: 500;
  font-size: clamp(17px, 2vw, 21px); display: flex; justify-content: space-between; gap: 20px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--brand); font-weight: 600; flex: none; }
.faq details[open] summary::after { content: "–"; }
.faq p { color: var(--muted); margin-top: 14px; max-width: 68ch; }

/* ==========================================================================
   THE HERO DROP CARD — 2026-08-31
   The hero slot was a "portrait goes here" placeholder shipping to production.
   Until a real photo exists, the strongest thing that can sit there is the
   product itself: one REAL archive drop, rendered the way a member sees it in
   the app. It proves the claim ("deals get posted with their numbers") on the
   first screen instead of asserting it. Numbers are product economics (buy vs
   sell on one ASIN), never earnings, and the archive framing is honest.
   When dyson.jpg lands, the card moves under the portrait or into #lanes —
   do not delete it, it is the page's proof object.
   ========================================================================== */
:root { --mono: "SF Mono", ui-monospace, "Cascadia Mono", Menlo, monospace; }

.drop-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px;
  box-shadow: 0 24px 70px rgba(0,0,0,.45), 0 0 0 1px rgba(249,115,22,.12);
}
.drop-card .toprow {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.drop-card .lane-badge {
  font-size: 12px; font-weight: 600; letter-spacing: .04em;
  color: var(--text); background: var(--ink-2);
  border: 1px solid var(--line); border-radius: 6px; padding: 4px 10px;
}
.drop-card .stamp {
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}
.drop-card .title {
  font-family: "Space Grotesk", sans-serif; font-weight: 600;
  font-size: 17px; line-height: 1.3;
}
.drop-card .nums {
  display: flex; gap: 28px; flex-wrap: wrap;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
}
.drop-card .num .lbl {
  display: block; font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 3px;
}
.drop-card .num .val { font-family: var(--mono); font-size: 21px; font-weight: 600; }
.drop-card .num .val.money { color: var(--money); }
.drop-card .note {
  margin-top: 16px; font-size: 13px; line-height: 1.5; color: var(--muted);
  border-left: 2px solid var(--brand-deep); padding-left: 12px;
}
.drop-card .foot {
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-size: 12px; color: var(--muted);
}
.drop-card .foot .ok { color: var(--brand-lift); font-weight: 600; }
.drop-caption {
  margin-top: 14px; font-size: 13px; color: var(--muted); text-align: center;
}
/* Phone nav: five items wrap awkwardly at 15px (inline-styled in the markup,
   hence the !important). Tighter type keeps the row to one or two clean lines
   and stops the Get-in pill ballooning into a circle. */
@media (max-width: 560px) {
  nav .wrap-wide a { font-size: 13px !important; }
  nav .wrap-wide .btn-pill { padding: 9px 18px !important; }
  nav .wrap-wide > div { gap: 12px !important; }
}

/* The founder timeline. Same job as the second photo slot until dyson-2.jpg
   exists: the documented arc, stated as fact. Ages, not adjectives. */
.timeline { border-top: 1px solid var(--line); }
.timeline-row {
  display: grid; grid-template-columns: 64px 1fr; gap: 20px;
  padding: 18px 0; border-bottom: 1px solid var(--line); align-items: baseline;
}
.timeline-row .age {
  font-family: "Space Grotesk", sans-serif; font-weight: 600;
  font-size: 15px; color: var(--brand); font-variant-numeric: tabular-nums;
}
.timeline-row p { color: var(--text); font-size: 15px; line-height: 1.5; }
.timeline-row p .muted { display: block; font-size: 13.5px; margin-top: 2px; }

/* Founders block: photo left, narrative right. Theirs uses founders.webp. */
.founder-split {
  display: grid; grid-template-columns: 0.8fr 1.2fr;
  gap: 48px; align-items: center; margin-top: 44px;
}
@media (max-width: 900px) { .founder-split { grid-template-columns: 1fr; } }

/* ==========================================================================
   THE SHOWCASE PASS — 2026-09-02
   Dyson's verdict on the restrained acquisition.com treatment: "our website
   is bland to that" — meaning it no longer showed what the product had grown
   into (17 categories, 129 written breakdowns, 96 playbook steps, the AI, the
   leaderboard, the AMP extension). The fix is NOT louder decoration; it is
   letting the actual operation carry the page. Every number rendered by these
   components is counted from the production database on the day it ships,
   never remembered or rounded. Product-scale facts only; the no-earnings-claim
   line still holds absolutely.
   ========================================================================== */

/* The receipts strip: counted facts in mono, brand tick, no icons. */
.receipts {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  margin-top: 64px;
}
.receipts .r {
  padding: 26px 26px 26px 0; border-right: 1px solid var(--line);
}
.receipts .r:last-child { border-right: none; }
.receipts .r .big {
  font-family: "Space Grotesk", sans-serif; font-weight: 700;
  font-size: clamp(30px, 3.6vw, 46px); letter-spacing: -0.02em;
  color: var(--text); font-variant-numeric: tabular-nums;
}
.receipts .r .big em { font-style: normal; color: var(--brand); }
.receipts .r .what { color: var(--muted); font-size: 14px; margin-top: 6px; line-height: 1.45; }
@media (max-width: 900px) {
  .receipts { grid-template-columns: repeat(2, 1fr); }
  .receipts .r:nth-child(2n) { border-right: none; }
  .receipts .r:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

/* The category board. 17 rows that read like a trading desk, not a feature
   grid. Name set in display type, tagline in muted body, tier flag on the
   right. Founding rows carry a lock tone so the free/paid split is visible
   at a glance, which is itself the upsell. */
.board { border-top: 1px solid var(--line); margin-top: 52px; }
.board-row {
  display: grid; grid-template-columns: minmax(150px, 240px) 1fr auto;
  gap: 10px 28px; align-items: baseline;
  padding: 17px 0; border-bottom: 1px solid var(--line);
}
.board-row .cat {
  font-family: "Space Grotesk", sans-serif; font-weight: 600;
  font-size: clamp(17px, 2vw, 21px); letter-spacing: -0.01em;
}
.board-row .about { color: var(--muted); font-size: 15px; }
.board-row .flag {
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; white-space: nowrap;
  color: var(--brand-lift);
}
.board-row .flag.gated { color: var(--muted); }
@media (max-width: 700px) {
  .board-row { grid-template-columns: 1fr auto; }
  .board-row .about { grid-column: 1 / -1; padding-bottom: 2px; }
}

/* The hero card stack: the live drop peeking out behind the archive card
   with recorded numbers. Two real rows from pp.opportunity, nothing staged.
   The stack is the one deliberate visual flourish on the site. */
.stack { position: relative; }
.stack { margin-top: 34px; }
.stack .drop-card.back {
  position: absolute; inset: 0; z-index: 0;
  transform: rotate(1.6deg) translate(18px, -46px);
  opacity: .95;
}
.stack .drop-card.front { position: relative; z-index: 1; }
.drop-card .lane-badge.live {
  color: #170c02; background: var(--brand); border-color: var(--brand);
  font-weight: 700;
}
@media (max-width: 900px) {
  .stack .drop-card.back { display: none; }
}

/* The ladder: the three ways in, shown as one climb rather than a pricing
   table. join.html keeps the full tier detail; this is the map. */
.ladder { border-top: 1px solid var(--line); margin-top: 56px; }
.ladder-row {
  display: grid; grid-template-columns: minmax(110px, 150px) 1fr auto;
  gap: 10px 32px; padding: 30px 0; border-bottom: 1px solid var(--line);
  align-items: start;
}
.ladder-row .cost {
  font-family: "Space Grotesk", sans-serif; font-weight: 700;
  font-size: clamp(20px, 2.6vw, 30px); letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.ladder-row .cost small { display: block; font-size: 13px; color: var(--muted); font-weight: 500; margin-top: 2px; }
.ladder-row h3 { font-size: clamp(18px, 2.1vw, 23px); margin-bottom: 8px; }
.ladder-row p { color: var(--muted); max-width: 60ch; font-size: 15.5px; }
.ladder-row .go { align-self: center; }
@media (max-width: 760px) {
  .ladder-row { grid-template-columns: 1fr; gap: 8px; }
  .ladder-row .go { align-self: start; margin-top: 6px; }
}

/* Flow panels: the upsell / downsell states join.html and engine.html swap in
   after checkout returns. Hidden by default; JS reveals exactly one. */
.flow-panel {
  border: 1px solid var(--brand-deep); border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(249,115,22,.07), rgba(249,115,22,.02));
  padding: 30px 32px; margin-top: 40px;
}
.flow-panel[hidden] { display: none; }
.flow-panel h3 {
  font-size: clamp(19px, 2.3vw, 25px); margin-bottom: 10px;
}
.flow-panel p { color: var(--muted); max-width: 64ch; }
.flow-panel .row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 22px; align-items: center; }
.flow-panel.quiet {
  border-color: var(--line); background: var(--card);
}

/* The proof row: the drop-card stack beside its caption, inside #deals.
   Moved from the hero when the founder portrait landed (2026-09-02). */
.proof-row {
  display: grid; grid-template-columns: minmax(0, 560px) 1fr;
  gap: 56px; align-items: center; margin-top: 72px;
}
@media (max-width: 900px) {
  .proof-row { grid-template-columns: 1fr; gap: 40px; }
}