/* Sales page: the signed-out home. Sits under the sign-in overlay (9500). */
#salesPage { background:var(--bg); font-size:18px; line-height:1.65; }
#salesPage h1, #salesPage h2, #salesPage h3 { font-family:'Playfair Display',serif; font-weight:600; color:var(--text); }
#salesPage p { color:var(--muted); margin-bottom:16px; }
#salesPage strong { color:var(--text); }
.sp-wrap { max-width:1040px; margin:0 auto; padding:0 24px; }
.sp-narrow { max-width:720px; }
.sp-center { text-align:center; }
/* The demo: nothing loads until it is played, so the page stays fast. */
.sp-demo { position:relative; max-width:900px; margin:0 auto; border-radius:16px; overflow:hidden; border:1px solid var(--gold-border); background:#06060d; box-shadow:0 20px 60px rgba(0,0,0,.45); }
.sp-demo video { width:100%; height:auto; display:block; aspect-ratio:16/9; background:#06060d; }
/* Browsers do not put a play button on a poster, so we do. */
.sp-demo-play { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:14px; border:0; padding:0; cursor:pointer; background:linear-gradient(180deg, rgba(6,6,14,.18), rgba(6,6,14,.55)); transition:background .2s; }
.sp-demo-play:hover { background:linear-gradient(180deg, rgba(6,6,14,.10), rgba(6,6,14,.45)); }
.sp-demo-play .ring { width:96px; height:96px; border-radius:50%; background:var(--gold); display:flex; align-items:center; justify-content:center; box-shadow:0 10px 40px rgba(201,168,76,.45); transition:transform .18s; }
.sp-demo-play:hover .ring { transform:scale(1.06); }
.sp-demo-play .ring::before { content:''; width:0; height:0; margin-left:8px; border-left:30px solid #0a0a12; border-top:19px solid transparent; border-bottom:19px solid transparent; }
.sp-demo-play .label { font-family:'DM Sans',sans-serif; font-size:17px; font-weight:600; color:#f3efe6; text-shadow:0 2px 10px rgba(0,0,0,.6); }
@media (max-width:600px){ .sp-demo-play .ring { width:74px; height:74px; } .sp-demo-play .ring::before { border-left-width:23px; border-top-width:15px; border-bottom-width:15px; } .sp-demo-play .label { font-size:15px; } }
.sp-demo-cap { font-size:14px; color:var(--muted); text-align:center; margin-top:12px; }
/* Diane, in her own words. */
.sp-quote { display:grid; grid-template-columns:200px 1fr; gap:26px; align-items:center; max-width:940px; margin:0 auto; }
.sp-quote img { width:200px; height:200px; object-fit:cover; object-position:center 18%; border-radius:50%; border:2px solid var(--gold-border); }
.sp-bubble { position:relative; background:var(--s2); border:1px solid var(--gold-border); border-radius:18px; padding:26px 30px; }
.sp-bubble::before { content:''; position:absolute; left:-11px; top:64px; width:20px; height:20px; background:var(--s2); border-left:1px solid var(--gold-border); border-bottom:1px solid var(--gold-border); transform:rotate(45deg); }
.sp-bubble p { font-size:19px; line-height:1.65; color:var(--text); margin:0 0 14px; }
.sp-bubble p:last-of-type { margin-bottom:0; }
.sp-bubble .who { font-size:15px; color:var(--gold); margin-top:16px; font-weight:600; }
@media (max-width:760px){ .sp-quote { grid-template-columns:1fr; text-align:center; gap:18px; } .sp-quote img { margin:0 auto; width:160px; height:160px; } .sp-bubble::before { left:calc(50% - 10px); top:-11px; border-left:1px solid var(--gold-border); border-bottom:none; border-top:1px solid var(--gold-border); border-right:none; } .sp-bubble p { font-size:17px; } }
.sp-sticky { position:sticky; top:0; z-index:60; }
/* The founding offer is the reason to act today, so it stays on screen.
   The background is solid: a see-through bar let the page scroll through it. */
.sp-urgent { display:none; background-color:#1a1710; background-image:linear-gradient(90deg, rgba(201,168,76,0.22), rgba(201,168,76,0.08)); backdrop-filter:blur(12px); border-bottom:1px solid var(--gold-border); color:var(--text); }
.sp-urgent-in { max-width:1120px; margin:0 auto; padding:9px 24px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; font-size:15px; }
.sp-urgent b { color:var(--gold); }
.sp-urgent .sp-btn-sm { margin-left:auto; }
.sp-urgent .sp-short { display:none; }
@media (max-width:700px){
  .sp-urgent-in { font-size:12.5px; gap:6px; padding:7px 12px; }
  .sp-urgent .sp-full, .sp-urgent .sp-dot, .sp-urgent .sp-days { display:none; }
  .sp-urgent .sp-short { display:inline; }
  .sp-urgent .sp-btn-sm { margin-left:auto; padding:6px 12px; font-size:13px; border-radius:7px; }
}
/* Seat meter: how many of the founding seats are gone. */
.sp-meter { max-width:520px; margin:22px auto 0; }
.sp-meter-top { display:flex; justify-content:space-between; align-items:baseline; font-size:14px; color:var(--muted); margin-bottom:8px; }
.sp-meter-top strong { color:var(--gold); font-size:17px; }
.sp-meter-bar { height:12px; border-radius:7px; background:var(--s3); border:1px solid var(--gold-border); overflow:hidden; }
.sp-meter-fill { height:100%; width:0%; background:linear-gradient(90deg,var(--gold),#e6cf8a); transition:width .6s; }
.sp-meter-note { font-size:13px; color:var(--muted); text-align:center; margin-top:8px; }
/* The founding offer, said once, in full, where nobody can miss it. */
.sp-found-card { max-width:680px; margin:34px auto 0; background:var(--gold-bg); border:2px solid var(--gold-border); border-radius:18px; padding:26px 28px; text-align:center; }
.sp-found-kicker { font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); font-weight:700; margin-bottom:10px; }
.sp-found-line { font-family:'Playfair Display',serif; font-size:clamp(26px,4.2vw,38px); color:var(--text); line-height:1.2; margin-bottom:6px; }
.sp-found-line b { color:var(--gold); }
.sp-found-sub { font-size:18px; color:var(--text); line-height:1.5; margin:10px 0 0; }
.sp-found-fine { font-size:15px; color:var(--muted); line-height:1.5; margin-top:10px; }
@media (max-width:700px){ .sp-found-card { padding:20px 18px; margin-top:26px; } .sp-found-sub { font-size:16px; } .sp-found-fine { font-size:14px; } }
.sp-seats-big { font-family:'Playfair Display',serif; font-size:56px; color:var(--gold); line-height:1; }
.sp-nav { position:static; z-index:2; display:flex; justify-content:space-between; align-items:center; padding:14px 24px; background:rgba(10,10,18,0.92); backdrop-filter:blur(12px); border-bottom:1px solid var(--b2); }
.sp-logo { display:inline-flex; align-items:center; gap:10px; font-family:'Playfair Display',serif; font-size:22px; color:var(--gold); font-weight:600; letter-spacing:.02em; }
.sp-navlinks { display:flex; gap:18px; align-items:center; }
.sp-link { color:var(--muted); text-decoration:none; font-size:15px; }
.sp-link:hover { color:var(--text); }
.sp-btn { background:var(--gold); color:#0a0a12; border:none; border-radius:10px; padding:16px 30px; font-size:18px; font-weight:600; font-family:'DM Sans',sans-serif; cursor:pointer; transition:transform .15s, box-shadow .15s; }
.sp-btn:hover { transform:translateY(-1px); box-shadow:0 8px 28px rgba(201,168,76,0.25); }
.sp-btn-sm { padding:9px 18px; font-size:15px; border-radius:8px; }
.sp-wide { width:100%; margin-top:8px; }
.sp-ghost { color:var(--text); text-decoration:none; font-size:17px; border-bottom:1px solid var(--b3); padding-bottom:2px; }
.sp-hero { padding:90px 0 70px; text-align:center; background:radial-gradient(ellipse at top, rgba(201,168,76,0.10), transparent 60%); }
.sp-kicker { font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin-bottom:18px; }
.sp-hero h1 { font-size:clamp(36px,6vw,64px); line-height:1.08; max-width:860px; margin:0 auto 22px; }
.sp-lede { font-size:clamp(18px,2.2vw,21px); max-width:680px; margin:0 auto 30px !important; color:var(--muted); }
.sp-cta-row { display:flex; gap:26px; justify-content:center; align-items:center; flex-wrap:wrap; margin-bottom:14px; }
.sp-fine { font-size:14px !important; color:var(--muted); }
.sp-founding-strip { display:inline-flex; flex-wrap:wrap; justify-content:center; gap:8px 12px; margin-top:22px; padding:12px 20px; border:1px solid var(--gold-border); background:var(--gold-bg); border-radius:999px; font-size:14px; color:var(--muted); }
.sp-dot { color:var(--gold); }
.sp-section { padding:84px 0; position:relative; }
/* Sections used to read as separate rooms by tone: three fills alternating
   down the page. Measured, neighbouring sections came out between 1.04 and
   1.15 to 1 against each other, which is no boundary at all, so seventeen
   sections ran together as one dark wall.
   
   One page color now, and the content sits on a card with a --b2 edge. That
   is how the app draws every block, and an edge at full strength beats a fill
   four percent away from its neighbour. The warm band and the glow stay:
   they are accents that genuinely read, not near misses. */
#salesPage .sp-alt, #salesPage .sp-deep { background:transparent; border-top:none; border-bottom:none; }
/* The card and the page measured 1.06 to 1 against each other, so a block
   was not a block, it was an outline. Darkening the page does not help: even
   pure black only reaches 1.12, because both colors are too dark for the
   ratio to move. So the edge does the work (2.14 to 1 against the card) and
   the gap between blocks does the rest. */
#salesPage .sp-section > .sp-wrap { background:var(--s2); border:1px solid rgba(255,255,255,.24); border-radius:18px; padding:44px 40px; }
#salesPage .sp-section > .sp-wrap.sp-narrow { max-width:780px; }
#salesPage .sp-section { padding:34px 0; }
#salesPage .sp-nocard > .sp-wrap { background:transparent; border:none; padding:0 24px; }
@media (max-width:700px){
  #salesPage .sp-section > .sp-wrap { padding:28px 20px; border-radius:14px; }
  #salesPage .sp-section { padding:20px 0; }
}
#salesPage .sp-warm { background:linear-gradient(180deg, rgba(201,168,76,0.12), rgba(201,168,76,0.03)), #0d0d18; border-top:1px solid var(--gold-border); border-bottom:1px solid var(--gold-border); }
#salesPage .sp-glow { background:radial-gradient(ellipse at top, rgba(201,168,76,0.12), transparent 62%), #0a0a12; border-top:1px solid var(--b1); }
#salesPage h2 { font-size:clamp(28px,4vw,42px); line-height:1.15; margin-bottom:20px; }
.sp-sub { margin-top:-8px; margin-bottom:40px !important; }
.sp-eyebrow { font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin-bottom:12px; }
.sp-src { display:block; font-size:13px; line-height:1.45; color:var(--muted); margin-top:4px; font-weight:400; }
.sp-src a { color:var(--gold); }
.sp-src:empty { display:none; }
.sp-kicker-line { font-family:'Playfair Display',serif; font-size:24px; line-height:1.4; color:var(--text) !important; border-left:3px solid var(--gold); padding-left:18px; margin-top:28px; }
.sp-math { background:var(--card); border:1px solid var(--card-b); border-radius:14px; padding:8px 22px; margin:22px 0 26px; }
.sp-math div { display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--b1); font-size:16px; }
.sp-math div span { color:var(--muted); }
.sp-math div b { color:var(--text); font-weight:500; white-space:nowrap; font-family:'DM Mono',monospace; font-size:15px; }
.sp-math .sp-math-total { border-bottom:none; }
.sp-math .sp-math-total span, .sp-math .sp-math-total b { color:var(--gold); font-weight:600; }
.sp-two { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.sp-report { background:var(--panel); border:1px solid var(--gold-border); border-radius:16px; padding:26px; box-shadow:0 24px 60px rgba(0,0,0,0.35); position:relative; }
.sp-report-tag { position:absolute; top:-11px; right:18px; background:var(--s3); border:1px solid var(--b3); color:var(--muted); font-size:11px; letter-spacing:.08em; text-transform:uppercase; padding:3px 10px; border-radius:999px; }
.sp-report-title { font-family:'Playfair Display',serif; font-size:22px; color:var(--gold); }
.sp-report-sub { font-size:13px; color:var(--muted); margin-bottom:16px; }
.sp-report-block { background:var(--s2); border:1px solid var(--b2); border-radius:10px; padding:12px 14px; margin-top:10px; font-size:15px; color:var(--text); line-height:1.5; }
.sp-report-h { font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:4px; }
.sp-gap { border-color:var(--green-border); background:var(--green-bg); }
.sp-gap .sp-report-h { color:var(--green); }
/* A timeline of wide rows: each step gets room to breathe on any screen. */
.sp-steps { display:flex; flex-direction:column; gap:14px; max-width:920px; margin:0 auto; position:relative; }
.sp-step { display:grid; grid-template-columns:64px 1fr; column-gap:24px; align-items:start; background:var(--card); border:1px solid var(--card-b); border-radius:16px; padding:24px 30px; box-shadow:0 10px 28px rgba(0,0,0,0.30); }
.sp-step .sp-num { grid-row:span 2; width:52px; height:52px; font-size:22px; margin:2px 0 0; }
.sp-step h3 { grid-column:2; }
.sp-num { width:34px; height:34px; border-radius:50%; background:var(--gold-bg); border:1px solid var(--gold-border); color:var(--gold); display:flex; align-items:center; justify-content:center; font-weight:600; font-size:15px; margin-bottom:14px; }
.sp-step h3 { font-size:26px; margin-bottom:6px; }
.sp-step p { grid-column:2; font-size:17px; margin:0; line-height:1.65; max-width:720px; }
.sp-note, .sp-step, .sp-price-card, .sp-fit, .sp-math {
  --text:#15152e; --muted:#4b4b68; --gold:#846411;
  --b1:#e6ddc9; --b2:#e0d7c2; --b3:#d4cab1;
  --green:#2c7a4f; --red:#ad3838;
  --gold-bg:rgba(201,168,76,0.16); --gold-border:rgba(132,100,17,0.32);
  color:#4b4b68;
}
/* The call to action keeps the bright gold: a dark gold fill under near
   black text would be unreadable. */
.sp-note .sp-btn, .sp-step .sp-btn, .sp-price-card .sp-btn, .sp-fit .sp-btn { background:#c9a84c; color:#0a0a12; }
.sp-note { background:var(--card); border:1px solid var(--card-b); border-radius:14px; padding:22px 24px; margin-bottom:14px; box-shadow:0 10px 28px rgba(0,0,0,0.30); }
.sp-note-h { color:var(--gold); font-weight:600; margin-bottom:6px; }
.sp-note p { font-size:16px; margin:0; }
.sp-table-wrap { overflow-x:auto; border:1px solid var(--b2); border-radius:14px; }
.sp-table { width:100%; border-collapse:collapse; min-width:640px; font-size:15px; }
/* Separation comes from the border, not from another background. The app
   draws every block with one dark fill and a visible --b2 edge (98 uses of
   --b2 against 4 of --b1), and this table was using the faint one, so eleven
   rows ran together and no column had an edge at all. */
/* The lines here are literal values, not tokens. --b1 measured 1.15 to 1
   against the cell behind it and --b2 measured 1.26, which is not a line you
   can see, it is a line you can find if you already know it is there. The app
   uses those tokens on small blocks where an edge has a shape to follow; a
   grid this size needs a line that reads on its own.

   The alphas are chosen against the composited color, not the raw one: a 13%
   white line over this cell renders as rgb(48,48,61) and scores 1.44, which
   is why a first attempt at 13% still looked like nothing had changed. These
   render at 2.66 (rows), 1.98 (columns) and 4.09 (the header rule). */
.sp-table th, .sp-table td { padding:14px 16px; text-align:left; border-bottom:1px solid rgba(255,255,255,.30); color:var(--muted); vertical-align:top; }
.sp-table th + th, .sp-table td + td { border-left:1px solid rgba(255,255,255,.22); }
.sp-table thead th { border-bottom:2px solid rgba(255,255,255,.42); }
/* Five columns inside a padded card left each one about 130px wide, so
   "Shows they have relationships with" came out over four lines and a row of
   five words stood 249px tall. The comparison needs the width back. */
#salesPage #sp-compare > .sp-wrap { max-width:1240px; padding-left:22px; padding-right:22px; }
.sp-table td, .sp-table th { hyphens:none; }
/* Between a phone and a wide window the table keeps its shape and scrolls.
   The first column is pinned, so scrolling sideways never loses the question. */
@media (min-width:701px) and (max-width:1080px){
  .sp-table { min-width:1000px; }
  .sp-table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .sp-table td:first-child, .sp-table th:first-child { position:sticky; left:0; z-index:2;
    background:var(--s2); border-right:1px solid rgba(255,255,255,.22); }
}
.sp-fold > summary { white-space:nowrap; }
.sp-table th { font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:500; background:var(--s2); }
.sp-table td:first-child { color:var(--text); font-weight:500; }
/* Cards only on a phone. Turning them on at 1080px fixed the cramping by
   taking the comparison away: stacked cards cannot be read across, and
   reading across is the entire job of this table. Between 700 and 1080 the
   table stays a table and scrolls sideways instead, with the question column
   pinned so you always know which row you are on. */
@media (max-width:700px){
  .sp-table-wrap { overflow:visible; border:none; }
  .sp-table { min-width:0; font-size:15px; }
  .sp-table thead { display:none; }
  .sp-table, .sp-table tbody, .sp-table tr, .sp-table td { display:block; width:100%; }
  .sp-table tr { display:flex; flex-direction:column; border:1px solid var(--panel-b); border-radius:14px; margin-bottom:14px; overflow:hidden; background:var(--panel); }
  .sp-table td { border-bottom:none; padding:6px 16px; }
  .sp-table td:first-child { order:0; font-family:'Playfair Display',serif; font-size:20px; color:var(--text); padding:16px 16px 8px; }
  .sp-table td.sp-us { order:1; margin:0 10px 8px; width:auto; border-radius:10px; padding:12px 14px; }
  .sp-table td.sp-us::before { content:'Pitch Parler'; display:block; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--gold); font-weight:700; margin-bottom:4px; }
  .sp-table td:not(:first-child):not(.sp-us) { order:2; font-size:14px; }
  .sp-table td:not(:first-child):not(.sp-us)::before { content:attr(data-label) ': '; color:var(--text); font-weight:600; }
  .sp-table td:last-child:not(.sp-us), .sp-table tr td:nth-child(4) { padding-bottom:14px; }
}
.sp-why { display:block; margin-top:8px; padding-top:8px; border-top:1px solid var(--gold-border); font-size:14px; line-height:1.5; color:var(--muted); font-weight:400; }
.sp-why::before { content:'Why it matters: '; color:var(--gold); font-weight:600; }
.sp-table tr.sp-row-gold td { background:rgba(201,168,76,.06); }
.sp-table tr.sp-row-gold td:first-child { color:var(--gold); }
.sp-table tr:last-child td { border-bottom:none; }
.sp-table .sp-us { background:var(--gold-bg); color:var(--text); }
.sp-table th.sp-us { color:var(--gold); font-weight:600; }
.sp-fit { background:var(--card); border:1px solid var(--green-border); border-radius:14px; padding:26px; align-self:stretch; box-shadow:0 10px 28px rgba(0,0,0,0.30); }
.sp-notfit { border-color:var(--red-border); }
.sp-fit h3 { font-size:22px; margin-bottom:14px; }
.sp-fit ul { list-style:none; }
.sp-fit li { position:relative; padding-left:28px; margin-bottom:12px; color:var(--muted); font-size:16px; }
.sp-fit li::before { content:'\2713'; position:absolute; left:0; color:var(--green); font-weight:700; }
.sp-notfit li::before { content:'\2715'; color:var(--red); }
.sp-price-card { background:var(--card); border:1px solid var(--gold-border); border-radius:18px; padding:34px; margin-top:10px; box-shadow:0 14px 36px rgba(0,0,0,0.34); }
/* Which pricing the page shows. #salesPage ships as pc-founding-closed so a
   slow or failed /api/founding-status can never advertise a price that ended.
   pcLoadSalesPricing swaps the class only if the server says founding is open. */
.pc-founding-closed .sp-founding-only { display:none !important; }
.pc-founding-open .sp-plans-only, .pc-founding-open .sp-plans-inline { display:none !important; }
.sp-plans-only { display:block; }
.sp-plans-inline { display:inline; }
.sp-plans { display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:stretch; }
.sp-plans .sp-price-card { display:flex; flex-direction:column; margin-top:0; }
.sp-plans .sp-price-card .sp-btn { margin-top:auto; }
.sp-planbtn { display:flex; flex-direction:column; width:100%; text-align:left; font:inherit; color:inherit; cursor:pointer; transition:border-color .15s, background .15s, transform .15s, box-shadow .15s; }
.sp-planbtn:hover, .sp-planbtn:focus-visible { border-color:#846411; background:#fffdf6; transform:translateY(-2px); box-shadow:0 16px 34px rgba(0,0,0,0.45); outline:none; }
.sp-planbtn .sp-go { margin-top:auto; padding-top:14px; color:var(--gold); font-weight:600; font-size:16px; display:flex; align-items:center; gap:8px; transition:gap .15s; }
.sp-planbtn:hover .sp-go, .sp-planbtn:focus-visible .sp-go { gap:13px; }
.sp-plan-name { text-align:center; font-family:'Playfair Display',serif; font-size:26px; color:var(--text); margin-bottom:4px; }
.sp-plan-starter { border-color:var(--b2); }
.sp-future-plans { text-align:center; font-size:15px; color:var(--muted); line-height:1.6; margin:18px auto 0; max-width:600px; }
@media (max-width:760px){ .sp-plans { grid-template-columns:1fr; } .sp-plans-only .sp-includes { columns:1 !important; } }
.pp-plan-pick { display:flex; gap:10px; margin-bottom:16px; }
.pp-plan-pick label { flex:1; border:1px solid var(--b2); border-radius:10px; padding:10px 12px; cursor:pointer; font-size:14px; line-height:1.45; color:var(--muted); display:flex; gap:8px; align-items:flex-start; }
.pp-plan-pick label.on { border-color:var(--gold); background:var(--gold-bg); color:var(--text); }
.pp-plan-pick input { accent-color:var(--gold); margin-top:3px; }
.pp-plan-pick strong { color:var(--text); font-size:15px; }
.sp-price-badge { text-align:center; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); margin-bottom:6px; }
.sp-price-row { display:flex; justify-content:center; align-items:baseline; gap:10px; }
.sp-price { font-family:'Playfair Display',serif; font-size:64px; color:var(--text); line-height:1.1; }
.sp-per { color:var(--muted); font-size:18px; }
.sp-lock { text-align:center; color:var(--text); margin-top:4px; }
.sp-standard { text-align:center; font-size:14px; color:var(--muted); margin-top:4px; }
.sp-counters { display:flex; justify-content:center; gap:40px; margin:22px 0 4px; padding:14px; background:var(--gold-bg); border:1px solid var(--gold-border); border-radius:12px; text-align:center; }
.sp-counter { font-family:'Playfair Display',serif; font-size:28px; color:var(--text); }
.sp-counter-l { font-size:12px; color:var(--muted); }
.sp-includes { list-style:none; margin:24px 0; }
.sp-includes li { position:relative; padding-left:28px; margin-bottom:10px; font-size:16px; color:var(--muted); }
.sp-includes li::before { content:'\2713'; position:absolute; left:0; color:var(--gold); font-weight:700; }
.sp-faq { border-bottom:1px solid var(--b2); padding:18px 0; }
.sp-faq summary { cursor:pointer; font-size:18px; color:var(--text); font-weight:500; list-style:none; display:flex; justify-content:space-between; gap:16px; }
.sp-faq summary::-webkit-details-marker { display:none; }
.sp-faq summary::after { content:'+'; color:var(--gold); font-size:22px; line-height:1; }
.sp-faq[open] summary::after { content:'\2212'; }
.sp-faq p { margin:12px 0 0; font-size:16px; }
.sp-founders-photo { max-width:860px; margin:0 auto 28px; border-radius:18px; overflow:hidden; border:1px solid var(--gold-border); aspect-ratio:1.9; background:var(--s2); }
.sp-founders-photo img { width:100%; height:100%; object-fit:cover; object-position:center 48%; display:block; }
.sp-feat { display:grid; grid-template-columns:1fr 1fr; gap:18px; max-width:1000px; margin:0 auto; }
.sp-feat .sp-note { margin:0; }
.sp-feat h3 { font-size:22px; margin-bottom:12px; }
.sp-drop { border-top:1px solid var(--b3); }
.sp-drops > .sp-drop:first-child { border-top:none; }
.sp-drop summary { cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:flex-start; gap:14px; padding:13px 0; font-size:17px; font-weight:600; color:var(--text); line-height:1.45; }
.sp-drop summary::-webkit-details-marker { display:none; }
.sp-drop summary::after { content:'+'; color:var(--gold); font-size:20px; line-height:1.2; flex:0 0 auto; }
.sp-drop[open] summary::after { content:'\2212'; }
.sp-drop summary:hover { color:var(--gold); }
.sp-drop p { font-size:17px; color:var(--muted); line-height:1.62; margin:0 0 14px; }
.sp-feat strong { color:var(--text); }
@media (max-width:860px){ .sp-feat { grid-template-columns:1fr; } }
.sp-founding-benefits { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; max-width:1000px; margin:0 auto; }
.sp-founding-benefits .sp-note { margin:0; }
.sp-founding-benefits p { color:var(--muted); font-size:16px; line-height:1.6; }
@media (max-width:860px){ .sp-founding-benefits { grid-template-columns:1fr; } }
.sp-founder-cards { max-width:860px; margin:0 auto; align-items:stretch; gap:16px; }
/* Both photos are square files. Fitting them into a 300px tall box threw
   away 72px of height at a wide window, 13px of it off the top, which is
   exactly where the heads are. A square box shows the whole file and crops
   nothing. Mike's photo is already tight at the crown in the file itself,
   so this gives back every pixel there is. */
.sp-founder-photo { width:100%; aspect-ratio:1; height:auto; object-fit:cover; object-position:center top;
  border-radius:12px; border:1px solid var(--gold-border); margin-bottom:14px; display:block; }
.sp-founder-cards .sp-note { margin:0; }
.sp-founder-cards p { margin-bottom:12px !important; }
.sp-founder-link { color:var(--gold); text-decoration:none; font-size:14px; }
.sp-founder-link:hover { text-decoration:underline; }
.sp-final { background:radial-gradient(ellipse at bottom, rgba(201,168,76,0.10), transparent 60%); }
.sp-final .sp-btn { margin:6px 0 14px; }
.sp-footer { display:flex; justify-content:space-between; padding:26px 24px; border-top:1px solid var(--b2); font-size:14px; color:var(--muted); }
/* The workspace behind the page has wide fixed layouts that widen the mobile
   viewport. Take it out of layout while the sales page is up. */
@media (max-width:640px){
  .sp-step { grid-template-columns:44px 1fr; column-gap:14px; padding:20px 18px; }
  .sp-step .sp-num { width:40px; height:40px; font-size:18px; }
  .sp-step h3 { font-size:22px; }
  .sp-step p { font-size:16px; }
}
@media (max-width:760px){
  .sp-two { grid-template-columns:1fr; gap:34px; }
  .sp-section { padding:60px 0; }
  .sp-hero { padding:60px 0 50px; }
  .sp-founding-strip { border-radius:14px; }
  .sp-founding-strip .sp-dot { display:none; }
  .sp-price-card { padding:24px 20px; }
  .sp-navlinks { gap:12px; }
}

.sp-mark { display:block; height:38px; width:auto; flex:none; }

/* ── Section rail ─────────────────────────────────────────────────────────
   The sales page is twenty-three screens tall. Before this there was one
   jump link on the whole page, so the only way to reach the price was to
   scroll past everything in front of it, and nothing told you how much was
   left. The rail is the same pills the app uses for its own sections
   (.pe-rail-link in app.css), laid out as a bar because a sales page is one
   column, not a page with a margin to put a rail in. */
.sp-rail { border-bottom:1px solid var(--b2); background:var(--s1,#0f0f1a); }
.sp-rail-in { max-width:1100px; margin:0 auto; padding:0 20px; display:flex; gap:8px; align-items:center;
  overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; }
.sp-rail-in::-webkit-scrollbar { display:none; }
.sp-rail-link { flex:0 0 auto; font-size:14px; line-height:1.2; color:var(--muted); text-decoration:none;
  padding:11px 2px; border-bottom:2px solid transparent; white-space:nowrap; transition:color .15s, border-color .15s; }
.sp-rail-link + .sp-rail-link { margin-left:14px; }
.sp-rail-link:hover { color:var(--text); }
.sp-rail-link.on { color:var(--gold); border-bottom-color:var(--gold); font-weight:600; }

/* An anchor must not land under the sticky header, or the heading you asked
   for is the one thing you cannot see. */
[id^="sp-"] { scroll-margin-top:132px; }

@media (max-width:760px){
  .sp-rail-in { padding:0 16px; }
  .sp-rail-link { font-size:13px; padding:10px 2px; }
  .sp-rail-link + .sp-rail-link { margin-left:12px; }
  [id^="sp-"] { scroll-margin-top:150px; }
}

/* ── Line length ──────────────────────────────────────────────────────────
   Four places ran long on a wide screen: the fine print under each call to
   action and the video captions reached 142 characters a line, the section
   subheadings 110, and the paragraphs in the agency note 111. Comfortable is
   somewhere around 70, and past that the eye loses the start of the next line
   coming back from the right. 72ch is the measure the app already uses
   (.ad-text in app.css).

   Only these four. Every other paragraph on the page already sits near 50
   characters because its card or column constrains it, and capping those as
   well would have narrowed them for nothing. Centered text keeps its center;
   it just stops getting wider. The note keeps its left edge. */
.sp-fine, .sp-demo-cap, .sp-center.sp-sub { max-width:72ch; margin-left:auto; margin-right:auto; }
.sp-note p { max-width:72ch; }

/* ── The interactive demo ─────────────────────────────────────────────────
   It was a grey text link in the hero while a film held the demo section,
   so the thing you can actually use was the quietest offer on the page.
   Built from the app's own parts: one dark fill, a --b2 edge, gold for the
   one action. */
.sp-btn-alt { background:transparent; color:var(--gold); border:1px solid var(--gold-border); }
.sp-btn-alt:hover { background:var(--gold-bg); box-shadow:none; }
.sp-try { max-width:560px; margin:0 auto; background:var(--s2); border:1px solid var(--b2); border-radius:16px; padding:28px 24px; text-align:center; }
.sp-try .sp-btn { font-size:19px; }
.sp-try-fine { margin:14px 0 0; font-size:14px; color:var(--muted); }
.sp-or { display:flex; align-items:center; gap:16px; max-width:900px; margin:30px auto 18px; color:var(--muted); font-size:14px; letter-spacing:.04em; }
.sp-or::before, .sp-or::after { content:''; flex:1; height:1px; background:var(--b2); }

/* ── The gap pitch ────────────────────────────────────────────────────────
   Hairlines between items come from the --b2 fill showing through 1px gaps,
   which is how the app separates things: an edge, not another fill. */
.sp-lead-para { font-size:21px; line-height:1.5; color:var(--text); margin-bottom:18px; }
.sp-three { list-style:none; margin:0 0 18px; padding:0; display:flex; flex-direction:column; gap:1px;
  background:var(--b2); border:1px solid var(--b2); border-radius:12px; overflow:hidden; }
.sp-three li { background:var(--s2); padding:13px 18px; font-size:17px; line-height:1.4; color:var(--text); }
.sp-three li::before { content:''; display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--gold); margin-right:12px; vertical-align:middle; }

/* ── Things that open ─────────────────────────────────────────────────────
   The page had forty seven toggles already and none of them looked like one:
   a bare line of text with a small plus at the far right, no hover, and the
   content appearing with a jump. These give a toggle an edge you can aim at,
   a hover, and a quarter second of movement so you can see what opened.

   The collapse animates max-height. The tidier grid 0fr to 1fr trick needs the
   grid row to resolve against a definite height, and these sit inside table
   cells where it does not: measured, the row stayed at 19px open or shut. A
   max-height cap is less elegant and it works here. */
@keyframes spReveal { from { opacity:0; transform:translateY(-5px); } to { opacity:1; transform:none; } }
.sp-fold { margin-top:12px; }
.sp-fold > summary { display:inline-flex; align-items:center; gap:8px; width:auto; cursor:pointer; list-style:none;
  background:transparent; border:1px solid var(--gold-border); color:var(--gold); font-size:13px; font-weight:600;
  padding:6px 13px; border-radius:999px; transition:background .15s, border-color .15s; }
.sp-fold > summary::-webkit-details-marker { display:none; }
.sp-fold > summary::after { content:'+'; font-size:15px; line-height:1; }
.sp-fold[open] > summary::after { content:'\2212'; }
.sp-fold > summary:hover { background:var(--gold-bg); border-color:var(--gold); }
.sp-fold[open] > *:not(summary) { animation:spReveal .24s ease-out; }

.sp-toggle { display:inline-flex; align-items:center; gap:8px; margin-top:10px; background:transparent;
  border:1px solid var(--gold-border); color:var(--gold); font-family:'DM Sans',sans-serif; font-size:13px;
  font-weight:600; padding:6px 13px; border-radius:999px; cursor:pointer; transition:background .15s, border-color .15s; }
.sp-toggle:hover { background:var(--gold-bg); border-color:var(--gold); }
.sp-toggle-ico { font-size:15px; line-height:1; width:9px; text-align:center; }
.sp-why--toggled::before { content:none; }
.sp-why--toggled { margin-top:10px; }

/* The toggles that were already here, made to look like toggles. */
.sp-drop summary, .sp-faq summary { padding-left:14px; padding-right:14px; border-radius:10px;
  transition:background .15s, color .15s; }
.sp-drop summary:hover, .sp-faq summary:hover { background:var(--s3); color:var(--gold); }
.sp-drop summary::after, .sp-faq summary::after { display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; border:1px solid var(--gold-border); border-radius:50%; font-size:16px; flex:0 0 auto; }
.sp-drop[open] > *:not(summary), .sp-faq[open] > *:not(summary) { animation:spReveal .22s ease-out; }
.sp-drop p, .sp-faq p { padding-left:14px; padding-right:14px; }

/* ── No grey text, and rows you can follow ────────────────────────────────
   The page used #b0b0c8 for 109 of its 306 text elements, better than a
   third of everything written on it. It scores 8.79 to 1 on the card behind
   it where white scores 15.32, and on a dark page that difference is the
   difference between reading and squinting. Secondary text is now the same
   white as everything else, and where something genuinely needs to step
   back it steps back in size, not in color. Gold still marks what matters.

   The stripe is measured against the composited color. At 5.5 percent white
   it renders rgb(30,30,44) and scores 1.14 against the plain row, which is
   not a stripe, and that was the first value used here. 18 percent renders
   rgb(60,60,72) and scores 1.72, which you can see at a glance, while white
   text still sits at 8.92 on it. */
#salesPage { --muted: #e8e8f0; }
#salesPage .sp-table tbody tr:nth-child(odd) td { background:rgba(255,255,255,.18); }
#salesPage .sp-table tbody tr:nth-child(odd) td.sp-us { background:rgba(201,168,76,.13); }
#salesPage .sp-table tbody tr:nth-child(even) td.sp-us { background:rgba(201,168,76,.08); }

/* ── Two ways to see it ───────────────────────────────────────────────────
   The two choices sat on the same dark fill with a divider between them, so
   they read as one block cut in half rather than as a choice. One is light
   now and one is dark, which is the pairing the app's own notes call the most
   readable there is: "dark text on a light block ... makes a block
   unmistakably a block". The cream token has been defined all along. */
#salesPage .sp-try-light { background:var(--card); border:1px solid var(--card-b); max-width:640px; padding:30px 28px; }
#salesPage .sp-try-light .sp-way, #salesPage .sp-try-light .sp-way-sub,
#salesPage .sp-try-light .sp-try-fine { color:#1a1a26; }
#salesPage .sp-try-light .sp-try-fine { opacity:.75; }
.sp-btn-dark { background:#12122a; color:var(--gold); border:1px solid #12122a; }
.sp-btn-dark:hover { background:#1c1c3c; box-shadow:0 8px 28px rgba(0,0,0,.35); }

#salesPage .sp-watch { max-width:900px; margin:0 auto; background:#06060d; border:1px solid var(--b2);
  border-radius:16px; padding:26px 24px 24px; }
#salesPage .sp-watch .sp-demo { margin-top:16px; box-shadow:none; }

.sp-way { display:flex; align-items:center; justify-content:center; gap:11px; font-size:21px; font-weight:600;
  color:var(--text); margin-bottom:6px; }
.sp-way-n { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; flex:none;
  border-radius:50%; background:var(--gold); color:#0a0a12; font-size:15px; font-weight:700; }
.sp-way-sub { text-align:center; font-size:15px; color:var(--text); margin:0 auto 18px; max-width:52ch; }

/* "or" between the two, not a label on the second one. */
.sp-or { max-width:640px; }

/* ── Questions ────────────────────────────────────────────────────────────
   A long list of questions on the darkest card on the page was the hardest
   block here to read. It is a light block now, which is the pairing the rest
   of the page already uses for the demo card and the founder cards. */
#salesPage #sp-faq > .sp-wrap { background:var(--card); border-color:var(--card-b); }
#salesPage #sp-faq h2, #salesPage #sp-faq .sp-center { color:#1a1a26; }
#salesPage #sp-faq .sp-faq summary { color:#1a1a26; }
#salesPage #sp-faq .sp-faq summary:hover { background:rgba(0,0,0,.05); color:#000; }
#salesPage #sp-faq .sp-faq p { color:#2a2a38; }
#salesPage #sp-faq .sp-faq { border-bottom-color:rgba(0,0,0,.14); }
#salesPage #sp-faq .sp-faq summary::after { border-color:rgba(0,0,0,.25); color:#8a6d1f; }
/* This box carries its colors inline in the markup, so the rule has to win
   on weight rather than order. */
#salesPage #sp-faq .sp-contact { background:#fff !important; border-color:var(--card-b) !important; }
#salesPage #sp-faq .sp-contact h3, #salesPage #sp-faq .sp-contact p { color:#1a1a26 !important; }
#salesPage #sp-faq strong { color:#1a1a26; }