/* ═══════════════════════════════════════════
   PRICING PAGE

   Loaded after app.css, which supplies every colour, radius, font and
   breakpoint used here. Nothing in this file declares a new colour: the page
   themes light/dark for free because it only ever names tokens.

   It has no JavaScript, and it must not gain any — the CSP carries no
   'unsafe-inline' for script or style, and a static document is the right
   shape for the front of the funnel anyway.
═══════════════════════════════════════════ */

/* app.css pins html,body to height:100% and overflow:hidden for the fixed
   app shell. This page is a document that scrolls. */
html.pricing-html, html.pricing-html body.pricing-body{
  height:auto;overflow:visible;
}
body.pricing-body{
  background:var(--bg0);color:var(--t1);
  padding:0 0 calc(var(--safe-bottom) + 48px);
}

/* ── NAV ─────────────────────────────────── */
.pr-nav{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  width:min(1120px,100%);margin:0 auto;
  padding:calc(var(--safe-top) + 20px) calc(var(--safe-right) + 24px) 20px calc(var(--safe-left) + 24px);
}
.pr-brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.pr-logo{width:32px;height:32px}
.pr-brand-text{font-size:1.5rem;font-weight:800;color:var(--accent);letter-spacing:-0.02em;line-height:1}
.pr-nav-cta{
  padding:9px 18px;border:1px solid var(--border2);border-radius:var(--r);
  color:var(--t1);text-decoration:none;font-weight:700;font-size:.86rem;
  transition:all var(--anim);
}
.pr-nav-cta:hover{border-color:var(--accent);color:var(--accent)}

/* ── LAYOUT ──────────────────────────────── */
.pr-main{
  width:min(1120px,100%);margin:0 auto;
  padding:0 calc(var(--safe-right) + 24px) 0 calc(var(--safe-left) + 24px);
}
.pr-section{padding:56px 0;border-top:1px solid var(--border)}
.pr-hero{padding:48px 0 8px;max-width:70ch}

/* ── BIG TYPE ─────────────────────────────────
   Headings and prices are set in --mono, not --font. Syne is a display face
   with very tight, similar letterforms, and at heading sizes it is the thing
   on this page hardest to read; JetBrains Mono has open counters and
   unmistakable figures, which is what a price needs most.

   WEIGHT 500 IS A CEILING, NOT A CHOICE. css/fonts.css ships JetBrains Mono
   at 400 and 500 only. Asking for 700 or 800 does not get a bolder file, it
   gets the browser's synthetic bold — smeared strokes and filled counters,
   which would cost exactly the legibility this change is for.

   Sizes drop alongside, because a monospace glyph is far wider than a Syne
   one: 3.1rem of Syne and 3.1rem of mono are not the same line length. */
.pr-h1{
  font-family:var(--mono);font-size:2.5rem;font-weight:500;
  line-height:1.12;letter-spacing:-0.035em;margin:0 0 20px;
}
.pr-lede{font-size:1.08rem;line-height:1.65;color:var(--t2);margin:0}
.pr-h2{
  font-family:var(--mono);font-size:1.5rem;font-weight:500;
  line-height:1.2;letter-spacing:-0.03em;margin:0 0 10px;
}
.pr-sub{font-size:1rem;color:var(--t2);margin:0 0 28px;max-width:64ch;line-height:1.6}

.pr-trust{list-style:none;display:flex;flex-wrap:wrap;gap:10px 12px;margin:28px 0 0}
.pr-trust li{
  padding:7px 13px;border:1px solid var(--border2);border-radius:999px;
  background:var(--bg1);font-size:.82rem;color:var(--t2);
}
.pr-trust strong{color:var(--t1)}

/* ── SPLIT HERO ───────────────────────────────
   Two audiences, side by side, in opposite palettes: work on the light half,
   community on the dark half. Both halves hold their palette no matter which
   theme the visitor is in — that is the whole point of the panel, so it
   cannot follow --data-theme like the rest of the page.

   THE MECHANISM: each panel REDECLARES the design tokens on itself rather
   than hard-coding colours into its children. Everything inside goes on
   naming var(--t1), var(--accent) and so on and simply resolves against the
   nearer definition, so the panels inherit every later style for free and no
   rule below needs a light-specific twin. The values are copied from the
   :root and :root[data-theme="light"] blocks in app.css — if a palette
   changes there, change it here too. */
.pr-panel-light{
  --bg0:#ffffff; --bg1:#f7f7fa; --bg2:#f0f0f5; --bg3:#e7e7ee;
  --border:rgba(0,0,0,0.10); --border2:rgba(0,0,0,0.16);
  --accent:#0b8f5e; --adim:rgba(11,143,94,0.12); --aglow:rgba(11,143,94,0.22);
  --t1:#16161d; --t2:#55556b; --t3:#8b8ba3;
  --shadow:rgba(20,20,28,.18);
}
.pr-panel-dark{
  --bg0:#09090b; --bg1:#0f0f13; --bg2:#141418; --bg3:#1b1b22;
  --border:rgba(255,255,255,0.07); --border2:rgba(255,255,255,0.12);
  --accent:#4fffb0; --adim:rgba(79,255,176,0.14); --aglow:rgba(79,255,176,0.28);
  --t1:#ebebf5; --t2:#9898b4; --t3:#52526a;
  --shadow:rgba(0,0,0,.5);
}

.pr-hero-split{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:2px;margin:36px 0 8px;
  border:1px solid var(--border2);border-radius:var(--rl);overflow:hidden;
  background:var(--border2);
}
.pr-half{
  display:flex;flex-direction:column;gap:14px;
  padding:34px 30px;background:var(--bg0);color:var(--t1);
}
.pr-half-eyebrow{
  font:500 .72rem var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin:0;
}
.pr-half-title{
  font-family:var(--mono);font-size:1.45rem;font-weight:500;
  line-height:1.2;letter-spacing:-0.03em;color:var(--t1);margin:0;
}
.pr-half-body{font-size:.95rem;line-height:1.62;color:var(--t2);margin:0}
.pr-half-body strong{color:var(--t1)}
.pr-half-points{list-style:none;display:flex;flex-direction:column;gap:9px;margin:2px 0 0}
.pr-half-points li{position:relative;padding-left:20px;font-size:.88rem;line-height:1.5;color:var(--t2)}
.pr-half-points li::before{
  content:"";position:absolute;left:2px;top:.52em;
  width:6px;height:6px;border-radius:2px;background:var(--accent);opacity:.85;
}
.pr-half-points strong{color:var(--t1)}

/* THE VIDEO SLOT. Drop a <video autoplay muted loop playsinline> (or an
   <img>) straight in and it fills the frame at 16:9, already clipped and
   already the right width for its half.

   Empty, it is display:none rather than a styled placeholder — a reserved
   grey rectangle with nothing in it is not "a space waiting for a video" to
   anybody looking at the page, it is a broken image. The carve-out costs
   nothing while it is unused and appears the moment it has something to
   show. Same-origin only: the CSP has no media-src for other hosts. */
.pr-half-media{
  margin-top:auto;aspect-ratio:16/9;width:100%;
  border-radius:var(--r);overflow:hidden;background:var(--bg2);
  border:1px solid var(--border);
}
.pr-half-media:empty{display:none}
.pr-half-media video,.pr-half-media img{
  width:100%;height:100%;object-fit:cover;display:block;
}

/* ── PLANS ───────────────────────────────── */
/* No align-items here, so the grid default of stretch applies and the three
   cards in a row are the height of the tallest. The price row is the thing
   people actually compare across columns, and ragged card bottoms make the
   set read as three unrelated boxes. */
.pr-plans{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;
}
.pr-plan{
  display:flex;flex-direction:column;gap:14px;
  padding:28px 24px;border:1px solid var(--border2);border-radius:var(--rl);
  background:var(--bg1);
  height:100%;
}
/* The recommended column, lifted by a border and a glow rather than by size —
   a taller card would misalign the three prices, which is the row people
   actually compare. */
.pr-plan-featured{
  border-color:var(--accent);
  box-shadow:0 0 0 1px var(--adim), 0 18px 48px var(--shadow);
}
.pr-badge{
  align-self:flex-start;padding:4px 10px;border-radius:999px;
  background:var(--adim);color:var(--accent);
  font:500 .66rem var(--mono);letter-spacing:.1em;text-transform:uppercase;margin:0;
}
.pr-plan-name{font-size:1.25rem;font-weight:800;margin:0}
.pr-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px;margin:0}
.pr-amount{font-family:var(--mono);font-size:2.1rem;font-weight:500;letter-spacing:-0.04em;line-height:1.1;color:var(--t1)}
.pr-per{font-size:.9rem;color:var(--t3);font-weight:600}
.pr-alt{width:100%;font-size:.82rem;color:var(--t3);margin-top:2px}
.pr-plan-blurb{font-size:.92rem;color:var(--t2);margin:0;line-height:1.55}
.pr-inherits{font:500 .74rem var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--t3);margin:0}

/* flex:1 makes the list absorb the difference in height between cards, which
   is what pins each card's button to its own bottom edge. margin-top:auto on
   the button is the belt-and-braces for the Free card, whose list is the
   longest and may not have slack to give. */
.pr-list{list-style:none;display:flex;flex-direction:column;gap:10px;margin:0;flex:1}
.pr-list li{position:relative;padding-left:22px;font-size:.9rem;line-height:1.55;color:var(--t2)}
.pr-list li::before{
  content:"";position:absolute;left:2px;top:.55em;
  width:7px;height:7px;border-radius:2px;background:var(--accent);opacity:.85;
}
.pr-list strong{color:var(--t1);font-weight:700}
.pr-list-2col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 28px}

.pr-footnote{font-size:.85rem;color:var(--t3);margin:24px 0 0;max-width:70ch;line-height:1.6}

/* ── BUTTONS ─────────────────────────────── */
.pr-btn{
  display:flex;align-items:center;justify-content:center;
  padding:12px;border:none;border-radius:var(--r);
  background:var(--accent);color:var(--bg0);
  font-family:var(--font);font-weight:700;font-size:.92rem;text-decoration:none;
  transition:all var(--anim);
}
.pr-btn:hover{box-shadow:0 0 22px var(--aglow)}
.pr-plan .pr-btn{margin-top:auto}
.pr-btn-quiet{
  background:transparent;border:1px solid var(--border2);color:var(--t1);
}
.pr-btn-quiet:hover{border-color:var(--accent);color:var(--accent);box-shadow:none}
.pr-btn-inline{display:inline-flex;align-self:flex-start;padding:12px 26px}
.pr-btn-big{padding:14px 34px;font-size:1rem}

/* ── CARD GRIDS ──────────────────────────── */
/* Stretch, same reasoning as .pr-plans: aligned bottom edges across a row. */
.pr-cards{display:grid;gap:18px}
.pr-cards-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.pr-cards-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.pr-card{
  padding:22px;border:1px solid var(--border);border-radius:var(--rl);
  background:var(--bg1);
}
.pr-card-title{font-size:1.02rem;font-weight:700;margin:0 0 8px;color:var(--t1)}
.pr-card-price{font-family:var(--mono);font-size:1.4rem;font-weight:500;letter-spacing:-0.03em;margin:0 0 8px;color:var(--accent)}
.pr-card-blurb{font-size:.9rem;color:var(--t1);font-weight:600;margin:0 0 8px}
.pr-card p{font-size:.9rem;line-height:1.6;color:var(--t2);margin:0 0 8px}
.pr-card p:last-child{margin-bottom:0}
.pr-card strong{color:var(--t1)}

/* ── SUPPORTER ───────────────────────────── */
.pr-supporter{
  display:flex;flex-direction:column;gap:18px;
  padding:32px;border:1px solid var(--border2);border-radius:var(--rl);
  background:var(--bg1);
}
.pr-supporter-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 24px}
.pr-supporter-head .pr-h2{margin:0}
.pr-supporter .pr-sub{margin:0}
.pr-supporter .pr-amount{font-size:1.9rem}

/* ── FAQ ─────────────────────────────────── */
.pr-faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 40px}
.pr-qa{max-width:60ch}
.pr-q{font-size:1rem;font-weight:700;margin:0 0 7px;color:var(--t1)}
.pr-qa p{font-size:.92rem;line-height:1.62;color:var(--t2);margin:0}
.pr-code{font-family:var(--mono);font-size:.85em;color:var(--accent);letter-spacing:.04em}

/* ── CLOSE + FOOTER ──────────────────────── */
.pr-close{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;
  padding:72px 0;border-top:1px solid var(--border);
}
.pr-close .pr-h2{font-size:1.85rem}
.pr-close .pr-sub{margin:0 0 20px}
.pr-close .pr-btn-inline{align-self:center}
.pr-footer{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:28px 24px 0;font-size:.82rem;color:var(--t3);
}
.pr-footer a{color:var(--t2);text-decoration:none;font-weight:700}
.pr-footer a:hover{color:var(--accent)}
.pr-footer-sep{opacity:.6}

.promoVideo{width:100%;height:100%;left:0;object-fit:contain;}
/* ── RESPONSIVE ──────────────────────────────
   Same breakpoints app.css already uses, so the two files stay in step. */
@media(max-width:860px){
  .pr-plans{grid-template-columns:1fr;max-width:520px;margin:0 auto}
  .pr-cards-3,.pr-cards-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pr-faq{grid-template-columns:1fr}
  .pr-list-2col{grid-template-columns:1fr}
  .pr-h1{font-size:2rem}
  .pr-section{padding:44px 0}
  /* The halves stack. Each keeps its own palette, so the page reads as a
     light block above a dark one rather than as a theming bug. */
  .pr-hero-split{grid-template-columns:1fr}
}
@media(max-width:580px){
  .pr-cards-3,.pr-cards-2{grid-template-columns:1fr}
  .pr-h1{font-size:1.6rem;letter-spacing:-0.03em}
  .pr-h2{font-size:1.3rem}
  .pr-close .pr-h2{font-size:1.45rem}
  .pr-half{padding:26px 20px}
  .pr-supporter{padding:22px}
  .pr-main,.pr-nav{padding-left:calc(var(--safe-left) + 16px);padding-right:calc(var(--safe-right) + 16px)}
}

/* Colour-coded purchase illustrations; full-size PNGs are kept separately. */
.pr-product-art{display:block;width:144px;height:144px;object-fit:contain;flex-shrink:0}
.pr-plan-featured{position:relative}
.pr-plan-featured>.pr-badge{position:absolute;top:-10px;left:24px}
.pr-plan-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:112px}
.pr-plan-heading .pr-product-art{width:112px;height:112px}
.pr-card>.pr-product-art{margin:0 auto 18px}
.pr-supporter-head{align-items:center}
@media(max-width:560px){
  .pr-plan-heading{min-height:96px}
  .pr-plan-heading .pr-product-art{width:96px;height:96px}
  .pr-card>.pr-product-art,.pr-supporter-head>.pr-product-art{width:112px;height:112px}
}