/* ═══════════════════════════════════════════════════════════════════════
   pricing.css — /pricing only (2026-08-27)

   Loaded AFTER marketing-site.css and home-signup.css, and adds only what
   those two genuinely do not have: the two product cards, the tier list, the
   AI band, the subscriber ladder, the vision panel and the FAQ.

   ⚠️ IT DECLARES NO COLOURS OF ITS OWN. Every value below is a token from
   marketing-site.css (--paper / --ink / --ink2 / --ink3 / --line / --line-soft
   / --accent / --cta / --good). The one derived value is --pband, a warm
   ground mixed from the cream line colour: a cold grey here is exactly what
   makes a "light" page read as clinical beside the home page.

   ⚠️ AND IT DOES NOT RESTYLE `.go`. The pink pill is shared across seven
   marketing pages; the trial buttons on this page are `.go .pgo`, where .pgo
   adds only the width and the button-element reset (this is a <button>, not
   an <a>, because it opens a modal rather than navigating).

   ⚠️ `.rhome` CENTRES EVERYTHING. The cards, the ladder and the FAQ are
   left-aligned back explicitly — a price list read from the middle is a poster,
   not something a coach can scan down.
   ═════════════════════════════════════════════════════════════════════ */

.rhome.pricing{
  --pband:#fbfaf6;
  --pband-2:#f6f4ec;
}

/* The page is wider than the home page's 800px column: two cards side by side
   need the room, and .say.wide is NARROWER (760px), not wider. */
.rhome.pricing .say{max-width:1040px;}
.rhome.pricing .say.wide{max-width:1040px;}

.rhome.pricing h1{margin-bottom:20px;}
.rhome.pricing .who{margin-bottom:30px;}

/* ── The two products ─────────────────────────────────────────────── */
.pcards{
  display:grid; grid-template-columns:1fr 1fr; gap:20px;
  margin:44px 0 0; text-align:left;
}
/* Flex column so the two trial buttons sit on the same line as each other
   however uneven the feature lists are — the grid stretches the cards to equal
   height, and without this the shorter card's call to action floats halfway up
   beside the taller one's. */
.pcard{
  border:1px solid var(--line); border-radius:16px; padding:26px;
  background:var(--paper); position:relative;
  display:flex; flex-direction:column;
}
.pcard.lead{border-color:var(--accent);}
.pflag{
  position:absolute; top:-11px; left:26px;
  background:var(--accent); color:#fff;
  font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;
  font-size:10px; letter-spacing:.1em; text-transform:uppercase; font-weight:600;
  padding:4px 10px; border-radius:999px;
}
.pcard h2{
  font-family:Fraunces,Georgia,serif; font-weight:600; letter-spacing:-.02em;
  font-size:23px; line-height:1.15; margin:0 0 4px;
}
.pfor{color:var(--ink3); font-size:13.5px; margin:0 0 18px; line-height:1.45;}

.pprice{display:flex; align-items:baseline; gap:7px; margin:0 0 4px;}
.pprice b{
  font-family:Fraunces,Georgia,serif; font-weight:600;
  font-size:40px; letter-spacing:-.02em; line-height:1;
}
.pprice span{color:var(--ink3); font-size:14px;}
.pnote{font-size:13px; color:var(--ink3); margin:0 0 20px;}
.pnote em{font-style:normal; color:var(--good); font-weight:600;}

.pgrp{margin:0 0 16px;}
.pgh{
  font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;
  font-size:10px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink3); font-weight:600; margin:0 0 7px;
}
.pgrp ul{list-style:none; margin:0; padding:0;}
.pgrp li{
  font-size:14.5px; color:var(--ink2); line-height:1.45;
  padding:4px 0 4px 22px; position:relative;
}
.pgrp li::before{
  content:""; position:absolute; left:2px; top:11px;
  width:9px; height:9px; border-radius:50%; background:var(--good); opacity:.5;
}
.pgrp li b{color:var(--ink); font-weight:600;}

.ptag{
  display:inline-block;
  font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;
  font-size:9.5px; letter-spacing:.09em; text-transform:uppercase; font-weight:600;
  border:1px solid var(--line); border-radius:999px; padding:2px 7px;
  margin-left:6px; color:var(--ink3); white-space:nowrap; vertical-align:1px;
}
/* Beta is a door that is open, so it reads in the accent rather than greyed
   out. "Coming" is not yet a door at all, so it stays quiet. */
.ptag.beta{border-color:var(--accent); color:var(--accent);}
.ptag.soon{opacity:.75;}

/* The Outreach ladder inside its card — rows, not bullets. */
.ptiers li{padding:9px 0 9px 0; border-top:1px solid var(--line-soft); color:var(--ink2);}
.ptiers li:first-child{border-top:0;}
.ptiers li::before{display:none;}
.ptiers li span{font-size:13px; color:var(--ink3);}
.ptiers li.ppop > b:first-child::after{
  content:"Most popular";
  font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;
  font-size:9px; letter-spacing:.09em; text-transform:uppercase; font-weight:600;
  color:var(--accent); border:1px solid var(--accent);
  border-radius:999px; padding:2px 7px; margin-left:8px; white-space:nowrap;
}
.pempty{color:var(--ink3); font-size:13.5px; margin:0; padding:4px 0;}
.pempty::before{display:none;}

/* ── The trial buttons ────────────────────────────────────────────────
   `.go` supplies the pill; these add the reset a <button> needs and the full
   width a card CTA wants. They carry `data-trial-start` and are wired by
   home-signup.js into the one email row at the top of the page. */
.pgo{
  display:block; width:100%; margin-top:20px;
  border:none; cursor:pointer; font-family:inherit; text-align:center;
}
/* Inside a card, the button is pushed to the bottom of the flex column (see
   .pcard). Outside one — the last-call block — there is no column to push
   against and `auto` would do nothing, so this is scoped. */
.pcard .pgo{margin-top:auto;}
.pcta-sub{text-align:center; font-size:12.5px; color:var(--ink3); margin:9px 0 0;}

/* ── The AI band ──────────────────────────────────────────────────── */
.pai{
  margin:22px 0 0; padding:24px 26px; text-align:left;
  border:1px solid var(--line); border-radius:16px; background:var(--pband-2);
  display:flex; gap:22px; align-items:flex-start; flex-wrap:wrap;
}
.pai-lead{flex:1 1 300px; min-width:260px;}
.pai h3{
  font-family:Fraunces,Georgia,serif; font-weight:600;
  font-size:19px; margin:0 0 6px; letter-spacing:-.01em;
}
.pai-lead p{margin:0; color:var(--ink2); font-size:14.5px; line-height:1.55;}
.pai-list{list-style:none; margin:0; padding:0; flex:1 1 260px; min-width:240px;}
.pai-list li{
  font-size:13.5px; color:var(--ink2); line-height:1.5;
  background:var(--paper); border:1px solid var(--line); border-radius:12px;
  padding:10px 14px; margin:0 0 8px;
}
.pai-list li:last-child{margin-bottom:0;}
.pai-list li b{color:var(--ink); font-weight:600;}

/* ── The subscriber ladder, as one slider in the card ──────────────────
   Replaces a seven-card band that ran the full width of the page under the
   heading "It only gets more expensive when you get bigger". Alex, 2026-08-27:
   *"It should be a slider if anything at all. It should be kind of more or
   less hidden. We shouldn't make such a big feature of this pricing thing."*

   ⚠️ QUIET ON PURPOSE. It sits on the card's own band colour with no border of
   its own, under the price it controls. It is a control, not a section. */
.pslider{
  background:var(--pband-2); border-radius:12px;
  padding:13px 15px 11px; margin:0 0 18px;
}
.pslabel{display:block; font-size:13.5px; color:var(--ink2); margin:0 0 9px;}
.pslabel b{
  color:var(--ink); font-weight:600;
  font-variant-numeric:tabular-nums;
}
.pshint{margin:9px 0 0; font-size:12px; color:var(--ink3); line-height:1.45;}

/* The range itself. Track and thumb have to be drawn per-engine; the colours
   are the page's own tokens so it cannot arrive as a blue system control on a
   pink-and-indigo page. */
.psrange{
  -webkit-appearance:none; appearance:none;
  width:100%; height:20px; margin:0; padding:0;
  background:transparent; cursor:pointer; display:block;
}
/* --pct is set by js/pricing.js on every move; the fallback keeps the track
   grey rather than blank if the script never runs. */
.psrange{--pct:0%;}
.psrange::-webkit-slider-runnable-track{
  height:5px; border-radius:999px;
  background:linear-gradient(to right,
    var(--accent) 0 var(--pct), var(--line) var(--pct) 100%);
}
.psrange::-moz-range-track{
  height:5px; border-radius:999px;
  background:linear-gradient(to right,
    var(--accent) 0 var(--pct), var(--line) var(--pct) 100%);
}
.psrange::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:19px; height:19px; margin-top:-7px;
  border-radius:50%; background:var(--accent);
  border:3px solid var(--paper); box-shadow:0 1px 4px rgba(21,23,43,.28);
}
.psrange::-moz-range-thumb{
  width:19px; height:19px; border-radius:50%;
  background:var(--accent); border:3px solid var(--paper);
  box-shadow:0 1px 4px rgba(21,23,43,.28);
}
.psrange:focus-visible{outline:none;}
.psrange:focus-visible::-webkit-slider-thumb{outline:2px solid var(--accent); outline-offset:2px;}
.psrange:focus-visible::-moz-range-thumb{outline:2px solid var(--accent); outline-offset:2px;}

/* ── Where this is going ──────────────────────────────────────────── */
.pvision{
  margin:44px 0 0; padding:44px 30px; border-radius:18px;
  background:var(--ink); color:#fff; text-align:left;
}
.peyebrow{
  font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;
  font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.55); margin:0 0 14px;
}
.pvision h3{
  font-family:Fraunces,Georgia,serif; font-weight:600; color:#fff;
  font-size:clamp(22px,3.2vw,31px); line-height:1.16; letter-spacing:-.015em;
  margin:0; max-width:640px; text-wrap:balance;
}
.pvision > p{color:rgba(255,255,255,.72); max-width:600px; margin:16px 0 0; font-size:15.5px;}
.pthree{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:32px;}
.pthree h4{
  font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:15.5px; font-weight:600; color:#fff; margin:0 0 6px;
}
.pthree p{color:rgba(255,255,255,.6); font-size:14px; margin:0; line-height:1.5;}
.phonest{
  margin:32px 0 0; padding-top:20px; font-size:13.5px; max-width:640px;
  border-top:1px solid rgba(255,255,255,.15); color:rgba(255,255,255,.55);
}

/* ── FAQ ──────────────────────────────────────────────────────────── */
.pfaq{margin:44px 0 0; text-align:left; max-width:720px;}
.pfaq h3{
  font-family:Fraunces,Georgia,serif; font-weight:600;
  font-size:22px; margin:0 0 18px; letter-spacing:-.01em;
}
.pfaq details{border-bottom:1px solid var(--line-soft); padding:14px 0;}
.pfaq summary{
  cursor:pointer; font-weight:600; font-size:15.5px; list-style:none;
  color:var(--ink);
}
.pfaq summary::-webkit-details-marker{display:none;}
.pfaq summary::before{content:"+ "; color:var(--accent); font-weight:700;}
/* ⚠️ `\A0`, NOT A LITERAL SPACE. In `content:"\2013 "` the space after a
   unicode escape is consumed as the escape's terminator, so the dash rendered
   flush against the question while the closed state's plain "+ " kept its
   gap. A non-breaking space is a character, not a terminator. */
.pfaq details[open] summary::before{content:"\2013\A0";}
.pfaq summary:focus-visible{outline:2px solid var(--accent); outline-offset:3px;}
.pfaq p{margin:9px 0 0; color:var(--ink2); font-size:14.5px; line-height:1.6;}

/* ── Last call ────────────────────────────────────────────────────── */
.pend{margin:44px auto 0; max-width:340px;}

@media (max-width:860px){
  .pcards{grid-template-columns:1fr;}
  .pthree{grid-template-columns:1fr; gap:18px;}
}
@media (max-width:600px){
  .pcard{padding:22px 18px;}
  .pvision{padding:32px 20px; border-radius:14px;}
  .pai{padding:20px 18px;}
  .pcards{margin-top:34px;}
  .pfaq,.pvision,.pend{margin-top:34px;}
}