/* ═══════════════════════════════════════════════════════════════════════
   marketing-site.css — the public marketing pages (2026-08-23)

   Serves /, /manifesto, /our-products, /free-forever. Deliberately NOT the
   app shell: these pages are read by strangers on a phone before they have
   an account, so they carry their own small, self-contained system rather
   than pulling the in-app chrome.

   Palette is the app's own, so the site and the product do not look like
   two companies: --paper/--ink/--accent are app-styles-v2.css's
   --rk2-surface / --rk2-text / --rk2-accent, and the wordmark repeats
   .sb-brand-name's JetBrains Mono at 0.2em.
   ═════════════════════════════════════════════════════════════════════ */

:root{
  --paper:#ffffff; --ink:#15172b; --ink2:#4d5168; --ink3:#8a8fa6;
  --line:#e8e4d8; --line-soft:#efece2;
  --accent:#6a4cf1; --cta:#ec1075; --good:#4f7c54;
}

html,body{background:var(--paper);}
body{margin:0;}

.rhome{
  background:var(--paper); color:var(--ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  min-height:100vh; display:flex; flex-direction:column; align-items:center;
  padding:34px 22px 26px; box-sizing:border-box; text-align:center;
  -webkit-font-smoothing:antialiased;
}

/* ── Wordmark ─────────────────────────────────────────────────────────
   Matches .sb-brand-name in app-styles-v2.css. Do not restyle here
   without moving that one too. */
/* ⚠️ NOT scoped to .rhome — the manifesto's sticky bar is outside it and
   an unscoped-by-accident wordmark rendered as a full-size image and a
   blue underlined link. One wordmark, every marketing page. */
.brand{
  display:inline-flex; align-items:center; gap:9px;
  text-decoration:none; color:var(--ink);
}
.brand img{width:26px;height:26px;display:block;border-radius:7px;flex-shrink:0;}
.brand span{
  font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;
  font-size:12.5px; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
}

/* ── Top row: centred wordmark, Sign in out to the right ──────────────
   Alex, 2026-08-25: *"Can you put a sign-in button in the top right-hand
   corner that's visible both on mobile and desktop? There's one already in the
   footer but I think we don't make things confusing for our users who want to
   sign in."*

   ⚠️ THE BUTTON IS POSITIONED, NOT SPACED, so the wordmark stays exactly where
   it has always been. `justify-content:space-between` would have shunted the
   brand to the left edge — a change to the page's whole balance that nobody
   asked for.

   ⚠️ AND IT IS THE SAME AT EVERY WIDTH. He asked for it on mobile AND desktop,
   so there is no breakpoint that hides it. At 390px the centred wordmark ends
   around 250px and the button starts around 270px, so they do not meet; the
   type steps down a little below 520px to keep that true on the narrowest
   phones. */
.rtop{
  width:100%; max-width:1080px;
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.rtop-in{
  position:absolute; right:0; top:50%; transform:translateY(-50%);
  display:inline-flex; align-items:center;
  padding:7px 15px; border:1px solid var(--line); border-radius:999px;
  background:var(--paper); color:var(--ink2);
  font-size:13.5px; font-weight:600; text-decoration:none; white-space:nowrap;
  transition:border-color .15s ease, color .15s ease;
}
.rtop-in:hover{border-color:var(--accent); color:var(--accent);}
.rtop-in:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
@media (max-width:520px){
  .rtop-in{padding:6px 12px; font-size:12.5px;}
}

.rhome .say{margin:auto 0; max-width:800px; width:100%; padding:34px 0 40px;}
.rhome .say.wide{max-width:760px;}

.rhome h1{
  font-family:Fraunces,Georgia,"Times New Roman",serif;
  font-weight:600; letter-spacing:-.022em;
  font-size:clamp(30px,5.4vw,50px); line-height:1.12;
  margin:0 0 24px;
}
.rhome h1 span,.rhome h1 em{display:block; text-wrap:balance;}
.rhome h1 em{font-style:normal; color:var(--accent);}

.rhome h2{
  font-family:Fraunces,Georgia,serif; font-weight:600; letter-spacing:-.02em;
  font-size:clamp(27px,4.4vw,40px); line-height:1.14; margin:0 0 16px;
}

.rhome .who{
  font-size:clamp(16px,2.2vw,18.5px); line-height:1.5;
  color:var(--ink2); margin:0 auto 36px; max-width:560px; text-wrap:balance;
}

/* ── Actions — NOT scoped to .rhome: the landing page is .lp and its
   buttons rendered as bare blue links the first time. ── ─────────────────────────────────────────────────────────
   48px minimum touch target (design system rule 4). */
.acts{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:14px 22px;}
/* ⚠️ OPTICALLY CENTRED, NOT JUST MATHEMATICALLY. Alex, 2026-08-23: "why is
   it not perfectly centred?" Everything measured dead centre — the row is a
   centred flex box — but the row held the pink pill AND the secondary link
   side by side, so the PILL, which is the thing an eye actually anchors on,
   sat well left of the middle. Stacking puts the primary action on the page's
   centre line, where it reads as centred because it is.
   Scoped to .rhome: the .lp landing page wants its pair side by side. */
.rhome .acts{flex-direction:column; gap:16px;}
.go{
  display:inline-block; text-decoration:none;
  background:var(--cta); color:#fff; font-weight:600; font-size:16px;
  padding:14px 28px; min-height:48px; box-sizing:border-box;
  border-radius:999px; letter-spacing:-.01em;
  transition:transform .15s ease, box-shadow .15s ease;
  box-shadow:0 6px 18px rgba(236,16,117,.20);
}
.go:hover{transform:translateY(-1px); box-shadow:0 9px 24px rgba(236,16,117,.26);}
.alt{
  text-decoration:none; color:var(--accent); font-weight:500; font-size:16px;
  border-bottom:1px solid rgba(106,76,241,.28); padding-bottom:2px;
}
.alt:hover{border-bottom-color:var(--accent);}

/* ── Footer ───────────────────────────────────────────────────────── */
.rhome .ends{width:100%; border-top:1px solid var(--line); padding:18px 0 64px;}
.rhome .ends nav{display:flex; flex-wrap:wrap; justify-content:center; gap:10px 30px;}
.rhome .ends a{color:var(--ink3); text-decoration:none; font-size:14.5px;}
.rhome .ends a:hover{color:var(--accent); text-decoration:underline;}
.rhome .ends .legal{margin-top:14px; font-size:13.5px;}
.rhome .ends p{
  margin:18px 0 0; font-size:10.5px; color:#b3b6c4;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-weight:500; letter-spacing:.2em; text-transform:uppercase;
}

@media (max-width:600px){
  .rhome{padding:26px 20px 22px;}
  .rhome .say{padding:24px 0 28px;}
  .rhome .ends nav{gap:12px 22px;}
  .rhome .ends{padding-bottom:200px;}
}

/* ── Home: the personal message + the community line ──────────────── */
.rhome .mani{margin:46px auto 0; max-width:540px;}
.rhome .mani summary{
  list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:13px;
}
.rhome .mani summary::-webkit-details-marker{display:none;}
.rhome .mani summary::marker{content:"";}
.rhome .mani .face{
  width:42px; height:42px; border-radius:50%; overflow:hidden; display:block;
  flex-shrink:0; background:var(--ink); box-shadow:0 0 0 1px var(--line);
}
.rhome .mani .face img{width:92px; max-width:none; display:block; margin:0 0 0 -26px;}
/* Same reason: a ragged right edge under a centred box is the tell that
   makes a centred thing look off. */
.rhome .mani .txt{display:flex; flex-direction:column; align-items:center; gap:3px; text-align:center;}
.rhome .mani .ml{
  font-size:16px; font-weight:500; color:var(--ink2); letter-spacing:-.005em;
  border-bottom:1px dotted rgba(77,81,104,.38); padding-bottom:2px;
}
.rhome .mani .mb{
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10px;
  letter-spacing:.15em; text-transform:uppercase; color:var(--ink3);
}
.rhome .mani summary::after{
  content:"\25BE"; font-size:11px; color:var(--ink3);
  transition:transform .2s ease; transform-origin:center;
}
.rhome .mani summary:hover .ml{color:var(--ink); border-bottom-color:var(--accent);}
.rhome .mani[open] .ml{border-bottom-color:transparent;}
.rhome .mani[open] summary::after{transform:rotate(180deg);}
.rhome .mani p{
  margin:16px auto 0; max-width:470px; font-size:15px; line-height:1.6;
  color:var(--ink3); animation:maniIn .32s ease both;
}
.rhome .mani p a{
  color:var(--accent); text-decoration:none; white-space:nowrap;
  border-bottom:1px solid rgba(106,76,241,.28);
}
.rhome .mani p a:hover{border-bottom-color:var(--accent);}
@keyframes maniIn{from{opacity:0; transform:translateY(-5px);} to{opacity:1; transform:none;}}
@media (prefers-reduced-motion: reduce){.rhome .mani p{animation:none;}}

.rhome .comm{
  margin:46px auto 0; max-width:520px;
  font-size:14px; line-height:1.6; color:var(--ink3); text-wrap:balance;
}
.rhome .comm a{
  color:var(--accent); text-decoration:none; white-space:nowrap; opacity:.82;
  border-bottom:1px solid rgba(106,76,241,.22);
}
.rhome .comm a:hover{border-bottom-color:var(--accent);}

@media (max-width:600px){
  .rhome .mani{margin-top:40px;}
  .rhome .comm{margin-top:36px;}
}

/* ── Inner pages: the row list ────────────────────────────────────── */
.rhome .items{margin:30px 0 0; padding:0; list-style:none; text-align:left;}
.rhome .items li{border-top:1px solid var(--line-soft); padding:20px 2px;}
.rhome .items li:last-child{border-bottom:1px solid var(--line-soft);}
.rhome .items h3{
  margin:0 0 6px; font-size:17px; font-weight:600; letter-spacing:-.012em;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.rhome .items p{margin:0; font-size:15.5px; line-height:1.6; color:var(--ink2);}
.rhome .tag{
  font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:#fff; background:var(--good); padding:3px 8px; border-radius:999px;
}
.rhome .rule{
  margin:30px auto 0; max-width:620px; padding:18px 20px;
  border-left:3px solid var(--accent); background:rgba(106,76,241,.05);
  text-align:left; font-size:15.5px; line-height:1.6; border-radius:0 8px 8px 0;
}
.rhome .rule strong{font-weight:600;}
.rhome .note{margin:22px auto 0; max-width:600px; font-size:14px; color:var(--ink3); line-height:1.6;}
.rhome .stat{
  display:inline-block; margin:0 0 14px; font-family:"JetBrains Mono",monospace;
  font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent); background:rgba(106,76,241,.07); padding:6px 12px; border-radius:999px;
}

/* ═══ The manifesto — long-form reading ═══════════════════════════════
   The ring is LIFTED, not reinvented: `_cpRingSvg` + `.cp-ring-bg` /
   `.cp-ring-fg` in src/services/community-hosting/service.js (~line 5437)
   draw the same donut on a published course lesson, and the scroll
   measurement below is the same one its "words" part uses — bottom of the
   body against the bottom of the viewport, so a short document reads 100%
   rather than stranding at 0. Same class names on purpose: one ring, two
   places it is shown. If that one changes, change this with it.
   ═════════════════════════════════════════════════════════════════════ */

.doc{
  background:var(--paper); color:var(--ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; min-height:100vh;
}

.doc-bar{
  position:sticky; top:0; z-index:20;
  background:rgba(255,255,255,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.doc-bar-in{
  max-width:1080px; margin:0 auto; padding:12px 22px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.doc-ring{display:flex; align-items:center; gap:8px;}
.doc-ring .lbl{
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink3);
  font-variant-numeric:tabular-nums;
}
.cp-ring-bg{stroke:var(--line);}
.cp-ring-fg{stroke:var(--accent); transition:stroke-dashoffset .35s ease;}
@media (prefers-reduced-motion: reduce){.cp-ring-fg{transition:none;}}

.doc-body{max-width:660px; margin:0 auto; padding:56px 22px 20px;}

.doc-body h1{
  font-family:Fraunces,Georgia,"Times New Roman",serif;
  font-weight:600; letter-spacing:-.022em; text-wrap:balance;
  font-size:clamp(31px,5.2vw,46px); line-height:1.14; margin:0 0 26px;
}
.doc-standfirst{
  font-size:16px; line-height:1.7; color:var(--ink3);
  border-left:3px solid var(--line); padding-left:18px; margin:0 0 14px;
}
.doc-byline{
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10.5px;
  letter-spacing:.15em; text-transform:uppercase; color:var(--ink3);
  padding-bottom:28px; border-bottom:1px solid var(--line-soft); margin-bottom:34px;
}

/* Long-form gets more air than the 1.6 body minimum — this is ten
   minutes of reading, not a settings screen. */
.doc-body p{font-size:17.5px; line-height:1.75; color:var(--ink2); margin:0 0 24px;}
.doc-body p strong{color:var(--ink); font-weight:600;}
.doc-body h2{
  font-family:Fraunces,Georgia,serif; font-weight:600; letter-spacing:-.018em;
  font-size:clamp(23px,3.4vw,30px); line-height:1.2; color:var(--ink);
  margin:52px 0 18px; text-wrap:balance;
}
.doc-body a{color:var(--accent); text-decoration:none; border-bottom:1px solid rgba(106,76,241,.3);}
.doc-body a:hover{border-bottom-color:var(--accent);}

/* A line that carries the argument on its own gets to stand on its own. */
.doc-pull{
  font-family:Fraunces,Georgia,serif; font-weight:600;
  font-size:clamp(21px,3vw,27px); line-height:1.32; letter-spacing:-.015em;
  color:var(--ink); margin:38px 0; text-wrap:balance;
}
.doc-pull.accent{color:var(--accent);}

.doc-quote{margin:34px 0; padding:0 0 0 22px; border-left:3px solid var(--accent);}
.doc-quote p{font-size:18px; line-height:1.6; color:var(--ink); margin:0 0 10px;}
.doc-quote cite{
  font-style:normal; font-size:14px; color:var(--ink3);
}

.doc-sign{
  margin-top:56px; padding-top:26px; border-top:1px solid var(--line-soft);
  display:flex; align-items:center; gap:14px;
}
.doc-sign .face{
  width:52px; height:52px; border-radius:50%; overflow:hidden; display:block;
  flex-shrink:0; background:var(--ink); box-shadow:0 0 0 1px var(--line);
}
.doc-sign .face img{width:114px; max-width:none; display:block; margin:0 0 0 -32px;}
.doc-sign .who{font-size:16px; font-weight:600; color:var(--ink); margin:0;}
.doc-sign .when{
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink3); margin:3px 0 0;
}

/* A footnote, and it should read like one: it was set at 13.5px directly
   under the founder's signature, so it competed with the essay it is only
   citing. (Alex, 2026-08-23: "reduce the size of the reference... a space
   and a little bit smaller font.") */
.doc-body p.doc-sources,
.doc-sources{
  margin:56px 0 0; padding-top:22px; border-top:1px solid var(--line-soft);
  font-size:12px; line-height:1.7; color:var(--ink3);
  letter-spacing:.005em;
}

.doc-after{
  max-width:660px; margin:0 auto; padding:36px 22px 0; text-align:center;
}

@media (max-width:600px){
  .doc-body{padding:34px 20px 16px;}
  .doc-body p{font-size:17px; line-height:1.72;}
  .doc-bar-in{padding:10px 20px;}
}

/* ═══ Landing page: the free coaching community ══════════════════════
   Layout borrowed from Kajabi's Communities page — centred hero, a media
   band, a terms band, then alternating image/copy blocks with tick lists.
   Their proof is scale (3M members, $350M earned); ours cannot be and
   should not pretend to be, so the same slot carries the TERMS instead.
   ═══════════════════════════════════════════════════════════════════ */

.lp{
  background:var(--paper); color:var(--ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.lp .wrap{max-width:1060px; margin:0 auto; padding:0 22px;}
.lp .narrow{max-width:680px; margin:0 auto;}

.lp-top{padding:26px 0 0; text-align:center;}

/* Hero */
.lp-hero{text-align:center; padding:48px 0 40px;}
.pill{
  display:inline-block; margin:0 0 22px;
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11px;
  font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--good); border:1px solid rgba(79,124,84,.35);
  background:rgba(79,124,84,.06); padding:7px 14px; border-radius:999px;
}
.lp-hero h1{
  font-family:Fraunces,Georgia,serif; font-weight:600; letter-spacing:-.022em;
  font-size:clamp(31px,5.2vw,52px); line-height:1.12; margin:0 auto 22px;
  max-width:15ch; text-wrap:balance;
}
.lp-hero h1 em{font-style:normal; color:var(--accent); display:block;}
.lp-hero .sub{
  font-size:clamp(16.5px,2.2vw,19px); line-height:1.6; color:var(--ink2);
  margin:0 auto 30px; max-width:600px; text-wrap:balance;
}
.lp-hero .under{
  margin:16px auto 0; font-size:13.5px; color:var(--ink3); max-width:440px; line-height:1.55;
}

/* Media band */
.lp-media{margin:8px auto 0; max-width:940px;}
.lp-media img{
  width:100%; display:block; border-radius:16px;
  box-shadow:0 18px 50px -22px rgba(21,23,43,.45);
}
.lp-media figcaption{
  margin:12px 0 0; font-size:13px; color:var(--ink3); text-align:center;
}

/* Terms band — Kajabi's stats slot */
.lp-terms{background:#faf9f4; border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); margin:64px 0 0; padding:40px 0;}
.lp-terms .row{display:grid; grid-template-columns:repeat(3,1fr); gap:28px; text-align:center;}
.lp-terms .big{
  font-family:Fraunces,Georgia,serif; font-weight:600; font-size:clamp(24px,3.4vw,34px);
  letter-spacing:-.02em; color:var(--ink); display:block; line-height:1.15;
}
.lp-terms .cap{display:block; margin-top:8px; font-size:14px; color:var(--ink2); line-height:1.5;}

/* Centred section intro */
.lp-intro{text-align:center; padding:72px 0 8px;}
.lp-intro h2{
  font-family:Fraunces,Georgia,serif; font-weight:600; letter-spacing:-.02em;
  font-size:clamp(26px,4vw,38px); line-height:1.18; margin:0 auto 16px; max-width:20ch; text-wrap:balance;
}
.lp-intro p{font-size:16.5px; line-height:1.65; color:var(--ink2); margin:0 auto; max-width:600px;}

/* Alternating feature blocks */
.feat{
  display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;
  padding:64px 0;
}
.feat.flip .feat-copy{order:2;}
.feat.flip .feat-img{order:1;}
.feat-img img{width:100%; display:block; border-radius:14px;}
.feat-copy h3{
  font-family:Fraunces,Georgia,serif; font-weight:600; letter-spacing:-.02em;
  font-size:clamp(22px,3vw,30px); line-height:1.2; margin:0 0 14px; text-wrap:balance;
}
.feat-copy p{font-size:16px; line-height:1.68; color:var(--ink2); margin:0 0 20px;}
.feat-copy .lab{
  display:block; margin:0 0 10px;
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10.5px;
  font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--ink3);
}
.ticks{list-style:none; margin:0 0 22px; padding:0;}
.ticks li{
  position:relative; padding:0 0 9px 26px; font-size:15.5px; line-height:1.55; color:var(--ink2);
}
.ticks li::before{
  content:"✓"; position:absolute; left:0; top:0; color:var(--good); font-weight:700; font-size:14px;
}

/* Three cards */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding:16px 0 0;}
.card{
  border:1px solid var(--line-soft); border-radius:14px; padding:24px 22px; background:#fff;
}
.card h4{
  font-size:16.5px; font-weight:600; letter-spacing:-.012em; margin:0 0 10px; line-height:1.3;
}
.card p{margin:0; font-size:15px; line-height:1.6; color:var(--ink2);}

/* Dark band */
.lp-dark{background:var(--ink); color:#fff; margin:76px 0 0; padding:64px 0;}
.lp-dark h2{
  font-family:Fraunces,Georgia,serif; font-weight:600; letter-spacing:-.02em; color:#fff;
  font-size:clamp(25px,3.6vw,36px); line-height:1.2; margin:0 auto 14px; max-width:22ch;
  text-align:center; text-wrap:balance;
}
.lp-dark p{text-align:center; color:rgba(255,255,255,.72); font-size:16px; line-height:1.65; margin:0 auto 30px; max-width:620px;}
.lp-dark .cards{grid-template-columns:repeat(3,1fr);}
.lp-dark .card{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.14);}
.lp-dark .card h4{color:#fff;}
.lp-dark .card p{color:rgba(255,255,255,.66); text-align:left;}

/* FAQ */
.faq{padding:72px 0 0;}
.faq h2{
  font-family:Fraunces,Georgia,serif; font-weight:600; letter-spacing:-.02em;
  font-size:clamp(26px,4vw,38px); text-align:center; margin:0 0 34px;
}
.faq details{border-bottom:1px solid var(--line-soft);}
.faq details:first-of-type{border-top:1px solid var(--line-soft);}
.faq summary{
  list-style:none; cursor:pointer; padding:18px 34px 18px 2px; position:relative;
  font-size:16.5px; font-weight:600; letter-spacing:-.01em; color:var(--ink); line-height:1.4;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  content:"⌄"; position:absolute; right:8px; top:15px; color:var(--ink3); font-size:16px;
  transition:transform .2s ease;
}
.faq details[open] summary::after{transform:rotate(180deg); top:12px;}
.faq details p{margin:0 0 20px; padding-right:34px; font-size:15.5px; line-height:1.7; color:var(--ink2);}

/* Closing band */
.lp-close{text-align:center; padding:76px 0 8px;}
.lp-close h2{
  font-family:Fraunces,Georgia,serif; font-weight:600; letter-spacing:-.02em;
  font-size:clamp(26px,4vw,40px); line-height:1.16; margin:0 auto 16px; max-width:18ch; text-wrap:balance;
}
.lp-close p{font-size:16.5px; color:var(--ink2); margin:0 auto 28px; max-width:520px; line-height:1.6;}

@media (max-width:860px){
  .feat{grid-template-columns:1fr; gap:26px; padding:44px 0;}
  .feat.flip .feat-copy{order:1;} .feat.flip .feat-img{order:2;}
  .cards, .lp-dark .cards{grid-template-columns:1fr;}
  .lp-terms .row{grid-template-columns:1fr; gap:26px;}
  .lp-intro{padding-top:56px;}
  .lp-dark{margin-top:56px; padding:48px 0;}
}

/* A CTA inside a left-aligned feature block should not inherit the centred
   row's alignment — it has no .acts parent there. */
.feat-copy .go, .feat-copy .alt{display:inline-block;}
.lp .acts{margin-top:4px;}

/* ═══ Log-in modal ════════════════════════════════════════════════════
   ⚠️ THE RULES BELOW ARE COPIED VERBATIM out of sales-goldmine.html
   (lines 4051-4178). DO NOT "port" or "map" them onto this stylesheet's
   tokens — that is what happened first time and it produced a box that was
   the wrong size, the wrong type and missing its Google button. Alex,
   2026-08-23: "why can't you just use the same one instead of trying to
   create it again? ... You shouldn't be building this sort of stuff. You
   should just be rewiring what we already built."

   So instead of changing the rules, the VARIABLES they ask for are declared
   on .signup-overlay with the source page's own values. The modal therefore
   renders identically here, and nothing leaks into the rest of this
   stylesheet (which uses --ink2, not --ink-2, and a different --line).

   The source page also has a global `* { box-sizing: border-box }`; this one
   does not, so that reset is reproduced inside the overlay only.
   ═══════════════════════════════════════════════════════════════════════ */
/* ⚠️ .display goes in at SINGLE-CLASS specificity and BEFORE the verbatim
   block, because that is where it sits on the source page — .signup-title
   is declared later there and wins the weight (800) and the family. Scoped
   as `.signup-overlay .display` it outranked .signup-title and the title
   came out at 700 in Georgia. Measured against the source page: identical
   now. Nothing else on these pages uses .display. */
/* ── The environment the copied block lived in ─────────────────────────
   ⚠️ COPYING THE COMPONENT IS NOT ENOUGH, and doing it piecemeal is what
   made this take three passes. Alex, 2026-08-23: "why can't you match this
   exactly? ... What is causing you to have to create it differently?"

   Nothing should. The rules below the divider ARE the source page's, byte
   for byte. But CSS inherits, so they also depend on that page's base:
   its global border-box reset, its body typography (Inter 18px/1.6), its
   `button { font-family: inherit }`, and its :root variables — which are
   spelled differently here (--ink2 vs --ink-2) and hold different values
   (--line is #e8e4d8 here, #ebe1c9 there).

   So the whole environment is reproduced INSIDE .signup-overlay, in one
   piece, rather than a property at a time as each diff exposed one.
   .display sits here at single-class specificity and before the block,
   exactly where it sits on the source page, so .signup-title still wins the
   weight — scoped any tighter it does not, and the title comes out 700 in
   Georgia instead of 800 in Fraunces.
   ═══════════════════════════════════════════════════════════════════════ */
.display{font-family:"Fraunces","Georgia",serif; font-weight:700; letter-spacing:-.02em; line-height:1.04;}

.signup-overlay,
.signup-overlay *{box-sizing:border-box;}
.signup-overlay button{font-family:inherit; cursor:pointer;}
.signup-overlay{
  font-family:"Inter",system-ui,-apple-system,sans-serif;
  font-size:18px; line-height:1.6; color:var(--ink);

  --cream:#faf6ec; --cream-2:#f3ecdb; --cream-3:#ebe2cb;
  --surface:#ffffff;
  --line:#ebe1c9; --line-soft:#f1e9d4; --line-strong:#d8cdaf;
  --ink:#2a2030; --ink-2:#5a4d62; --ink-3:#8b7e92; --ink-4:#b8acbb;
  --accent:#6a4cf1; --accent-2:#8b6dff; --accent-soft:#ece6ff; --accent-deep:#4a32b8;
  --good:#4f7c54; --good-soft:#dee5d2;
  --radius:14px; --radius-lg:22px;
}

/* ─── everything below is sales-goldmine.html:4051-4178, byte for byte ─── */
.signup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 12, 30, 0.55);
    backdrop-filter: blur(6px);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.25s ease;
  }
  .signup-overlay[hidden] { display: none; }
  .signup-overlay.open { opacity: 1; }
  .signup-modal {
    background: var(--surface);
    border-radius: 22px;
    padding: 36px 38px 32px;
    max-width: 460px;
    width: 100%;
    position: relative;
    box-shadow: 0 40px 100px -30px rgba(42, 32, 48, 0.55);
    transform: translateY(20px) scale(0.96);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .signup-overlay.open .signup-modal {
    transform: translateY(0) scale(1);
  }
  .signup-close {
    position: absolute;
    top: 16px; right: 16px;
    width: 32px; height: 32px;
    border-radius: 50%;
    border: none;
    background: var(--cream-2);
    color: var(--ink-2);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
  }
  .signup-close:hover {
    background: var(--ink);
    color: var(--cream);
  }
  .signup-mark {
    width: 56px; height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--accent), var(--accent-deep));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 18px;
    box-shadow: 0 10px 24px -8px var(--accent);
  }
  .signup-mark-r {
    font-family: "Fraunces", serif;
    font-weight: 800; font-size: 28px;
  }
  .signup-title {
    font-family: "Fraunces", serif;
    font-weight: 800; font-size: 28px;
    color: var(--ink); letter-spacing: -0.02em;
    margin: 0 0 8px;
    line-height: 1.15;
  }
  .signup-sub {
    color: var(--ink-2);
    font-size: 14px;
    margin: 0 0 22px;
    line-height: 1.5;
  }
  .signup-form { display: flex; flex-direction: column; gap: 14px; }
  .signup-field { display: flex; flex-direction: column; gap: 6px; }
  .signup-field span {
    font-size: 12px; color: var(--ink-2);
    font-weight: 600;
  }
  .signup-field input {
    border: 1.5px solid var(--line);
    border-radius: 10px;
    padding: 12px 14px;
    font-family: inherit;
    font-size: 14.5px;
    color: var(--ink);
    background: var(--cream-2);
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    outline: none;
  }
  .signup-field input:focus {
    border-color: var(--accent);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(106, 76, 241, 0.12);
  }
  .signup-submit {
    background: var(--accent);
    color: #fff;
    border: none;
    padding: 14px 20px;
    border-radius: 999px;
    font-family: inherit;
    font-size: 15px; font-weight: 700;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px;
    margin-top: 4px;
    box-shadow: 0 12px 28px -10px var(--accent);
    transition: transform 0.15s, background 0.15s;
  }
  .signup-submit:hover {
    background: var(--accent-deep);
    transform: translateY(-1px);
  }
  .signup-submit .arrow { transition: transform 0.15s; }
  .signup-submit:hover .arrow { transform: translateX(3px); }
  .signup-trust {
    display: inline-flex; align-items: center;
    gap: 7px; margin: 14px 0 0;
    justify-content: center;
    color: var(--good);
    font-size: 12px;
    font-family: "JetBrains Mono", monospace;
    letter-spacing: 0.02em;
  }
  @media (max-width: 540px) {
    .signup-modal { padding: 28px 22px 24px; }
    .signup-title { font-size: 22px; }
  }