/* ===========================================================================
   REVOCLE v2 — LEGACY COMPONENT LAYER
   ---------------------------------------------------------------------------
   Loaded by every PORTED page, last.

   tools/port-v2.py moves the 39 v1 pages onto the v2 shell by keeping their
   body markup exactly as it was — every paragraph, list, link, form field
   and TODO comment — and changing only the container around it. That is the
   safe direction: restyling by CSS cannot silently drop copy the way
   re-emitting markup can, and the content-integrity check proves it (no page
   lost a single word or link).

   The cost of that choice is this file. Those pages no longer load
   revocle-pages.css, so roughly seventy v1 class names arrive with no styling
   at all. This restyles them in the print language: hard rules, zero radius,
   solid offset shadows, no blur anywhere.

   Everything is scoped under .pgbody or .pgcta — the two wrappers the porter
   emits — so nothing here can reach the homepage or /distribution.

   CONTRAST: the body band is paper #FFF7EA. ink #141109 on it measures 17.73,
   muted ink-2 #4a4335 measures 9.20 and magenta #4C1FD6 measures 4.71. All pass
   AA for body text.
   =========================================================================== */

/* ── the body band ───────────────────────────────────────────────────────── */
.pgbody{font-family:var(--body);font-size:clamp(.95rem,1.1vw,1.05rem);line-height:1.66}
.pgbody>*+*{margin-top:clamp(20px,3vw,34px)}

.pgbody h2{
  font-family:var(--head);font-weight:800;letter-spacing:-.03em;
  font-size:clamp(1.3rem,2.4vw,2rem);line-height:1.08;
  margin-bottom:14px;
}
/* `.pgbody h2` is (0,1,1) and beats `.pgbody>*+*` at (0,1,0), so the shorthand
   above was zeroing the top margin and running section headings straight into
   the block above them. Mirrored at (0,1,1) so source order decides. */
.pgbody>*+h2,.pgbody>*+h3{margin-top:clamp(28px,4vw,46px)}
.pgbody h3{
  font-family:var(--head);font-weight:800;letter-spacing:-.025em;
  font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.15;margin-bottom:10px;
}
.pgbody p{margin-bottom:14px;max-width:74ch}
.pgbody p:last-child{margin-bottom:0}
.pgbody a{color:var(--accent,var(--vio));border-bottom:2px solid color-mix(in srgb, var(--accent,var(--vio)) 38%, transparent)}
.pgbody a:hover{border-bottom-color:var(--accent,var(--vio))}
.pgbody ul,.pgbody ol{margin-bottom:16px;padding-left:20px;display:grid;gap:8px;max-width:74ch}
.pgbody li{padding-left:2px}
.pgbody b,.pgbody strong{font-weight:700;color:var(--ink)}
.pgbody hr{border:0;border-top:3px solid var(--rule);margin:26px 0}

/* v1 prose block — 21 pages use it */
.pgbody .prose{max-width:74ch}
.pgbody .prose h2{margin-top:32px}
.pgbody .prose h2:first-child{margin-top:0}

/* small print */
.pgbody .hint,.pgbody .cap,.pgbody .sub{
  font-family:var(--display);font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);
}
/* SPAM HONEYPOT — must stay off-screen. `.hp` wraps the `_website` field that
   submit.php uses to reject bots, on all four form pages. It was hidden by
   revocle-pages.css, which ported pages no longer load, so it rendered as a
   visible "Do not fill this in" input — broken to look at and useless as a
   trap. Not a hint class; do not restyle. */
.pgbody .hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* ── panels and generic cards ────────────────────────────────────────────────
   A printed object, never a soft SaaS card.
   ────────────────────────────────────────────────────────────────────────── */
.pgbody .panel,.pgbody .card,.pgbody .ccard,.pgbody .pcard,
.pgbody .feat,.pgbody .lead{
  background:var(--paper);
  border:3px solid var(--rule);
  border-radius:0;
  box-shadow:var(--off) var(--off) 0 var(--rule);
  padding:clamp(18px,2.4vw,30px);
}
/* nested panels would stack shadow on shadow */
.pgbody .panel .panel,.pgbody .panel .card{
  box-shadow:none;border-width:2px;
}

/* grids the v1 pages used to lay cards out */
.pgbody .feat-grid,.pgbody .vals,.pgbody .leads,.pgbody .hcats,
.pgbody .fund-two,.pgbody .about-mv{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(16px,2.2vw,26px);
}
.pgbody .feat-grid>*,.pgbody .vals>*,.pgbody .leads>*,
.pgbody .fund-two>*,.pgbody .about-mv>*{
  background:var(--paper);border:3px solid var(--rule);border-radius:0;
  box-shadow:5px 5px 0 var(--rule);padding:clamp(16px,2vw,24px);
}

/* numbered flow steps */
.pgbody .pflow{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:clamp(16px,2.2vw,26px)}
.pgbody .pflow-step{border-top:3px solid var(--rule);padding-top:18px}
.pgbody .pflow-n{
  font-family:var(--num);font-weight:700;font-size:clamp(2rem,4vw,3rem);
  line-height:.85;color:var(--accent,var(--vio));display:block;margin-bottom:8px;
}

/* stat rows */
.pgbody .hero-stats{display:flex;flex-wrap:wrap;gap:clamp(10px,1.4vw,18px)}
.pgbody .hstat{
  border:3px solid var(--rule);padding:12px 18px;background:var(--paper);
  box-shadow:4px 4px 0 var(--rule);
}
.pgbody .hstat b{
  font-family:var(--num);font-weight:700;display:block;
  font-size:clamp(1.3rem,2.4vw,2rem);line-height:1;
}
.pgbody .hstat span{
  font-family:var(--display);font-size:10px;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;display:block;margin-top:6px;
  color:var(--ink-2);
}
/* the head band carries a stat row on some pages, on a dark field */
.phead .hero-stats{display:flex;flex-wrap:wrap;gap:14px;margin-top:22px}
.phead .hstat{border:2px solid currentColor;padding:10px 16px}
.phead .hstat b{font-family:var(--num);font-weight:700;display:block;
  font-size:clamp(1.2rem,2.2vw,1.8rem);line-height:1}
.phead .hstat span{font-family:var(--display);font-size:10px;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;display:block;margin-top:5px;opacity:.8}

/* ── accordions (legal pages, FAQs — 69 instances) ───────────────────────── */
.pgbody .acc{display:block}
.pgbody details{
  border-top:3px solid var(--rule);
  padding:16px 0;margin:0;
}
.pgbody details:last-of-type{border-bottom:3px solid var(--rule)}
.pgbody summary{
  cursor:pointer;list-style:none;display:flex;
  justify-content:space-between;align-items:center;gap:20px;
}
.pgbody summary::-webkit-details-marker{display:none}
.pgbody summary h2{margin:0;font-size:clamp(1.05rem,1.5vw,1.28rem)}
/* The marker rotates 45deg to become a close cross, and a rotated glyph's
   box is about 1.4x its width — so at the flex end it pushed ~7px past the
   accordion and made every legal and FAQ page report a 10px overflow at every
   width. A fixed square with the glyph centred keeps the rotation inside its
   own box. */
.pgbody .pm{
  font-family:var(--num);font-weight:700;font-size:1.5rem;line-height:1;
  flex:0 0 auto;width:1.2em;height:1.2em;
  display:grid;place-items:center;
  /* Rotating the box grows its bounding box by ~21% each side, which is what
     pushed past the accordion edge. Reserve that overhang rather than let it
     overflow. */
  margin-right:.26em;
  transition:transform .25s var(--ease);
}
.pgbody details[open] .pm{transform:rotate(45deg)}
.pgbody .a-body{margin-top:12px;max-width:74ch}
.pgbody .a-body>*:first-child{margin-top:0}

/* ── Help Center ─────────────────────────────────────────────────────────── */
/* margin-BOTTOM only. A `margin:0 0 14px` shorthand here is (0,2,0) and beats
   the `.pgbody>*+h2` spacing rule at (0,1,1), which re-zeroed the top margin
   and ran "Most read" straight into the card grid above it. Second time this
   shorthand caused exactly this bug. */
.pgbody .hsec-title{
  font-family:var(--head);font-weight:800;letter-spacing:-.025em;
  font-size:clamp(1.1rem,1.7vw,1.4rem);margin-bottom:14px;
}
.pgbody>*+.hsec-title{margin-top:clamp(28px,4vw,46px)}
.pgbody .hcat,.pgbody .hart{
  display:block;background:var(--paper);
  border:3px solid var(--rule);border-radius:0;
  box-shadow:5px 5px 0 var(--rule);
  padding:clamp(16px,2vw,24px);
  border-bottom:3px solid var(--rule);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease);
}
.pgbody .hcat:hover,.pgbody .hart:hover{
  transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--accent,var(--vio));
}
.pgbody .harts{display:grid;gap:clamp(12px,1.6vw,18px)}
/* The card's children are inline spans in the v1 markup, so without this the
   title, description and count run together as one paragraph. */
.pgbody .hcat>*,.pgbody .hart>*{display:block}
.pgbody .hcat b,.pgbody .hart b{
  font-family:var(--head);font-weight:800;letter-spacing:-.025em;
  font-size:clamp(1rem,1.4vw,1.18rem);margin-bottom:6px;
}
.pgbody .hcat .hdesc,.pgbody .hcat .hcount{margin-top:6px}
.pgbody .hart-d{color:var(--ink-2);margin-top:6px}
.pgbody .hart-m,.pgbody .hcount{
  font-family:var(--display);font-size:10px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent,var(--vio));
}
.pgbody .hicon{color:var(--accent,var(--vio));margin-bottom:10px}
.pgbody .hicon svg{width:26px;height:26px}
.pgbody .hdesc{color:var(--ink-2)}

.pgbody .hchips{display:flex;flex-wrap:wrap;gap:10px}
.pgbody .hchip{
  display:inline-block;padding:8px 14px;
  border:2px solid var(--rule);background:var(--paper);
  box-shadow:3px 3px 0 var(--rule);
  font-family:var(--display);font-weight:700;font-size:12.5px;
  color:var(--ink);
}
.pgbody .hchip:hover{background:var(--accent,var(--vio));color:var(--paper)}

.pgbody .hlist{display:grid;gap:10px;padding-left:0;list-style:none}
.pgbody .hlist li{border-bottom:2px solid rgba(20,17,9,.18);padding-bottom:9px}

/* Search box. `.help-search` is a <label> wrapping an icon and the input, not
   the input itself — and on /help it sits in the HEAD band, not .pgbody, so
   it needs both scopes. */
.pgbody .hsearch-wrap,.phead .hsearch-wrap{position:relative;margin-top:22px;max-width:520px}
.pgbody .help-search,.phead .help-search{
  display:flex;align-items:center;gap:11px;
  padding:13px 16px;border:3px solid currentColor;border-radius:0;
  background:rgba(255,255,255,.08);
}
.pgbody .help-search{background:var(--paper);border-color:var(--rule)}
.pgbody .help-search input,.phead .help-search input{
  flex:1;width:100%;border:0;background:transparent;color:inherit;
  font-family:var(--body);font-size:1rem;padding:0;
}
.pgbody .help-search input:focus,.phead .help-search input:focus{outline:0}
.phead .help-search input::placeholder{color:currentColor;opacity:.72}
.phead .help-search:focus-within,.pgbody .help-search:focus-within{
  outline:3px solid var(--mis);outline-offset:2px;
}
.pgbody .hres{
  border:3px solid var(--rule);border-top:0;background:var(--paper);
  max-height:340px;overflow:auto;
}
.pgbody .hres a{display:block;padding:12px 16px;border-bottom:2px solid rgba(20,17,9,.14);
  border-bottom-color:rgba(20,17,9,.14);color:var(--ink)}
.pgbody .hres a:hover{background:var(--accent,var(--vio));color:var(--paper)}

/* ── forms ───────────────────────────────────────────────────────────────── */
.pgbody .page-grid{
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:clamp(20px,3vw,42px);align-items:start;
}
.pgbody .side-stack{display:grid;gap:clamp(14px,2vw,22px)}
.pgbody .fsec{margin-bottom:clamp(20px,3vw,32px)}
.pgbody .field{display:block;margin-bottom:16px}
.pgbody .frow{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.pgbody label{
  display:block;font-family:var(--display);font-weight:700;font-size:12.5px;
  letter-spacing:.04em;margin-bottom:7px;
}
.pgbody .req{color:var(--coral)}
.pgbody input,.pgbody select,.pgbody textarea{
  width:100%;padding:12px 14px;
  border:2px solid var(--rule);border-radius:0;
  background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:1rem;
}
.pgbody input:focus,.pgbody select:focus,.pgbody textarea:focus{
  outline:3px solid var(--accent,var(--vio));outline-offset:2px;
}
.pgbody textarea{min-height:120px;resize:vertical}
/* Checkboxes: the v1 markup is <input> + <span class="box"> + text, with the
   span doing the drawing. The native input is taken out of the flow rather
   than display:none, so it stays reachable by keyboard and screen readers. */
.pgbody .chk{display:grid;gap:9px}
.pgbody .chkbox,.pgbody .consent{
  display:flex;gap:10px;align-items:flex-start;
  font-size:.94rem;margin-bottom:0;cursor:pointer;font-weight:450;
}
.pgbody .chkbox input,.pgbody .consent input{
  position:absolute;opacity:0;width:1px;height:1px;
}
.pgbody .chkbox .box,.pgbody .consent .box{
  flex:0 0 auto;width:20px;height:20px;margin-top:1px;
  border:2px solid var(--rule);background:var(--paper);
}
.pgbody .chkbox input:checked+.box,.pgbody .consent input:checked+.box{
  background:var(--accent,var(--vio));border-color:var(--accent,var(--vio));
  box-shadow:inset 0 0 0 3px var(--paper);
}
.pgbody .chkbox input:focus-visible+.box,.pgbody .consent input:focus-visible+.box{
  outline:3px solid var(--accent,var(--vio));outline-offset:2px;
}

/* radio plan picker */
.pgbody .rad{display:grid;gap:10px}
.pgbody .rad label,.pgbody label.radio{
  display:flex;align-items:center;gap:12px;
  border:2px solid var(--rule);background:var(--paper);
  padding:14px 16px;cursor:pointer;font-weight:450;
}
.pgbody .rad label:has(input:checked){box-shadow:4px 4px 0 var(--accent,var(--vio));border-color:var(--accent,var(--vio))}
.pgbody .rad input{width:auto;flex:0 0 auto}

/* the small Q/A blocks down the sidebar */
.pgbody .rx{border-top:2px solid rgba(20,17,9,.2);padding-top:12px}
.pgbody .rx b{display:block;font-family:var(--head);font-weight:800;
  font-size:1rem;letter-spacing:-.02em;margin-bottom:4px}
.pgbody .rx .sub{display:block;font-family:var(--display);font-size:10.5px;
  font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2)}

/* numbered timeline */
.pgbody .tline{display:grid;gap:16px}
.pgbody .tl{display:flex;gap:14px;align-items:flex-start}
.pgbody .tn{
  flex:0 0 auto;font-family:var(--num);font-weight:700;
  font-size:1.5rem;line-height:1;color:var(--accent,var(--vio));
}
.pgbody .tl b{display:block;font-family:var(--head);font-weight:800;
  letter-spacing:-.02em;margin-bottom:3px}
.pgbody .tl p{margin:0}

/* icon cards in the sidebar */
.pgbody .ccard{display:flex;gap:14px;align-items:flex-start}
.pgbody .di{flex:0 0 auto;font-size:1.5rem;line-height:1;color:var(--accent,var(--vio))}
.pgbody .ccard b{display:block;font-family:var(--head);font-weight:800;
  letter-spacing:-.02em;margin-bottom:3px}

/* form section label */
.pgbody .fsec{
  font-family:var(--display);font-weight:700;font-size:11.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);
  border-bottom:3px solid var(--rule);padding-bottom:8px;margin-bottom:18px;
}
.pgbody .form-foot{margin-top:20px;border-top:3px solid var(--rule);padding-top:18px}
.pgbody .tick-list{list-style:none;padding-left:0;display:grid;gap:8px}
.pgbody .ok-icon{color:var(--accent,var(--vio))}

/* POST-SUBMIT STATES. `.ok-panel` is the success message and is hidden until
   the page's own AJAX handler adds `.show`; the form itself gets `.hide` at
   the same moment. Both were `display:none` in revocle-pages.css, so without
   these the "Request sent" panel rendered on page load, above a form that
   had not been filled in. `.form-err`/`.login-err` follow the same pattern. */
.pgbody .ok-panel{display:none;text-align:center;padding:28px 10px}
.pgbody .ok-panel.show{display:block}
.pgbody .ok-panel h3{font-family:var(--head);font-weight:800;
  font-size:1.4rem;margin:14px 0 10px}
.pgbody form.hide{display:none}
.pgbody .login-err,.pgbody .form-err{display:none}
.pgbody .login-err.show,.pgbody .form-err.show{
  display:block;border:2px solid var(--coral);padding:12px 14px;
  margin-bottom:14px;font-size:.92rem;
}

/* ── buttons ─────────────────────────────────────────────────────────────────
   The ported pages carry v1 button classes. Rather than rewrite 46 button
   tags across 39 files and risk mangling one, the v1 names are mapped onto
   the v2 shapes here.
   ────────────────────────────────────────────────────────────────────────── */
.pgbody .btn,.pgcta .btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--display);font-weight:700;
  font-size:clamp(13px,1vw,15px);
  padding:13px 24px;border:2px solid transparent;border-radius:var(--r-pill);
  cursor:pointer;border-bottom:2px solid transparent;
  transition:box-shadow .3s var(--ease),background .25s,color .25s,border-color .25s;
}
.pgbody .btn-gold,.pgcta .btn-gold{background:var(--accent,var(--vio));color:var(--paper);border-color:var(--accent,var(--vio))}
.pgbody .btn-gold:hover,.pgcta .btn-gold:hover{box-shadow:0 14px 34px -12px color-mix(in srgb, var(--accent,var(--vio)) 60%, transparent)}
.pgbody .btn-ghost{border-color:rgba(20,17,9,.3);color:var(--ink)}
.pgbody .btn-ghost:hover{border-color:var(--accent,var(--vio));color:var(--accent,var(--vio))}
.pgbody .btn-lg,.pgcta .btn-lg{padding:15px 28px}
.pgbody .arrow,.pgcta .arrow{transition:transform .3s var(--ease)}
.pgbody .btn:hover .arrow,.pgcta .btn:hover .arrow{transform:translateX(5px)}
/* the CTA band is dark, so its buttons invert */
.pgcta .btn-gold{background:var(--lime);color:#14110D;border-color:var(--lime)}
.pgcta .btn-ghost{border-color:currentColor;color:inherit;background:transparent}
.pgcta .btn-ghost:hover{border-color:var(--lime);color:var(--lime)}

/* ── the closing CTA band ────────────────────────────────────────────────── */
.pgcta{display:flex;flex-wrap:wrap;gap:clamp(18px,3vw,40px);
  align-items:center;justify-content:space-between}
.pgcta>div:first-child{flex:1 1 320px}
.pgcta b{font-family:var(--head);font-weight:800;letter-spacing:-.03em;
  font-size:clamp(1.4rem,2.8vw,2.2rem);line-height:1.08;display:block}
.pgcta p{font-family:var(--body);margin-top:8px;max-width:56ch;opacity:.9}
.pgcta .hint{font-family:var(--display);font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.pgcta a:not(.btn){border-bottom:2px solid currentColor}

/* ── the long tail ───────────────────────────────────────────────────────────
   Everything else the v1 pages use. Found by diffing every class inside
   <main> across the 39 ported pages against the selectors defined in the v2
   stylesheets, so this list is measured rather than guessed at. `.mag` is a
   JS hook for the magnetic-button effect and deliberately has no styling.
   ────────────────────────────────────────────────────────────────────────── */

/* stat strips — head band and body */
.pgbody .stat-strip,.phead .stat-strip{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:clamp(10px,1.4vw,16px);margin-top:22px;
}
.phead .stat-strip>div{border:2px solid currentColor;padding:12px 14px}
.pgbody .stat-strip>div{border:3px solid var(--rule);padding:14px 16px;
  background:var(--paper);box-shadow:4px 4px 0 var(--rule)}
.pgbody .stat-strip b,.phead .stat-strip b{
  font-family:var(--num);font-weight:700;display:block;
  font-size:clamp(1.3rem,2.4vw,2rem);line-height:1;
}
.pgbody .stat-strip span,.phead .stat-strip span{
  display:block;margin-top:6px;
  font-family:var(--display);font-size:10px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;opacity:.82;
}

/* card grids */
.pgbody .what-grid,.pgbody .contact-cards,.pgbody .plan-pick{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:clamp(14px,2vw,24px);
}

/* the plan radio picker — a row, not a big padded card */
.pgbody .plan-pick .pcard{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:14px 16px;box-shadow:none;border-width:2px;cursor:pointer;
}
.pgbody .plan-pick .pcard b{font-family:var(--head);font-weight:800;letter-spacing:-.02em}
.pgbody .plan-pick .pcard .sub{
  font-family:var(--display);font-size:10.5px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2);
}
.pgbody .plan-pick .pcard input{width:auto;flex:0 0 auto}
.pgbody .plan-pick .pcard:has(input:checked){
  border-color:var(--accent,var(--vio));box-shadow:4px 4px 0 var(--accent,var(--vio));
}

/* numbered "how it works" list */
.pgbody .paylist{list-style:none;padding-left:0;counter-reset:pay;display:grid;gap:14px}
.pgbody .paylist li{
  counter-increment:pay;padding-left:52px;position:relative;
  border-top:2px solid rgba(20,17,9,.2);padding-top:14px;
}
.pgbody .paylist li::before{
  content:counter(pay,decimal-leading-zero);
  position:absolute;left:0;top:12px;
  font-family:var(--num);font-weight:700;font-size:1.6rem;
  line-height:1;color:var(--accent,var(--vio));
}

/* route tags on the funding application */
.pgbody .pstep,.pgbody .ptag{
  display:inline-block;
  font-family:var(--display);font-weight:800;font-size:10px;
  letter-spacing:.15em;text-transform:uppercase;
  padding:5px 10px;border:2px solid var(--rule);background:var(--paper);
}
.pgbody .pstep{background:var(--accent,var(--vio));color:var(--paper);border-color:var(--accent,var(--vio));
  margin-bottom:10px}
.pgbody .ptag{margin-top:12px}

/* founder initials */
.pgbody .lava{
  width:52px;height:52px;display:grid;place-items:center;
  border:3px solid var(--rule);background:var(--lime);
  font-family:var(--num);font-weight:700;font-size:1.1rem;
  margin-bottom:12px;
}
.pgbody .lead b{display:block;font-family:var(--head);font-weight:800;
  letter-spacing:-.02em;font-size:1.05rem}
.pgbody .lead .sub{display:block;margin-top:3px;
  font-family:var(--display);font-size:10px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}

/* highlighted callouts */
.pgbody .hope,.pgbody .fund-note,.pgbody .side-panel{
  border:3px solid var(--rule);background:var(--paper);
  box-shadow:var(--off) var(--off) 0 var(--accent,var(--vio));
  padding:clamp(18px,2.4vw,28px);
}
.pgbody .hope b{display:block;font-family:var(--head);font-weight:800;
  letter-spacing:-.03em;font-size:clamp(1.15rem,1.9vw,1.5rem);margin-bottom:8px}

/* headings and small print that carried over */
.pgbody .lead-head,.pgbody .s-eyebrow{
  font-family:var(--display);font-weight:700;font-size:11.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);
}
.pgbody .about-story,.pgbody .mv-txt{max-width:74ch}
.pgbody .login-foot{margin-top:18px;font-size:.9rem;text-align:center}
.pgbody .card-link{display:inline-block;font-weight:700;color:var(--accent,var(--vio))}
.pgbody .ld-label{display:none}

/* ── tables (the pricing matrix) ─────────────────────────────────────────────
   `.win` marks the winning cell in the comparison table. It is only ever a
   <td>, so it must NOT pick up the generic card styling above — that put a
   3px rule and an offset shadow around 13 table cells.
   ────────────────────────────────────────────────────────────────────────── */
.pgbody td.win{background:var(--lime);font-weight:700;color:var(--ink)}
.pgbody .cmp-wrap{overflow-x:auto;border:3px solid var(--rule);background:var(--paper)}
.pgbody table{border-collapse:collapse;width:100%;min-width:640px}
.pgbody th,.pgbody td{
  border:2px solid rgba(20,17,9,.22);
  padding:11px 14px;text-align:left;font-size:.92rem;
}
.pgbody thead th{
  background:var(--ink);color:var(--paper);
  font-family:var(--display);font-size:11px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;
}

/* On a phone the plan matrix is wider than the screen, so its container
   scrolls (the page itself never pans). Two problems follow: you cannot tell
   it scrolls, and once you do scroll the row labels are gone and the numbers
   mean nothing. The label column sticks, and the container announces itself. */
@media (max-width:820px){
  .pgbody .cmp-wrap{position:relative}
  .pgbody .cmp-wrap::before{
    content:"Swipe to compare plans \2192";
    display:block;padding:8px 12px;
    border-bottom:3px solid var(--rule);background:var(--vio-l);color:var(--ink);
    font-family:var(--display);font-weight:700;font-size:10.5px;
    letter-spacing:.14em;text-transform:uppercase;
    position:sticky;left:0;
  }
  .pgbody table th[scope="row"]{
    position:sticky;left:0;z-index:1;
    background:var(--paper);
    box-shadow:2px 0 0 var(--rule);
  }
}

/* ── login, which has no .wrap and is its own shape ──────────────────────── */
.pgbody .login-card{max-width:460px;margin-inline:auto}
.pgbody .login-title{font-family:var(--head);font-weight:800;letter-spacing:-.03em;
  font-size:clamp(1.5rem,3vw,2.2rem);text-align:center;margin-bottom:6px}
.pgbody .login-disc{display:none}


/* ── responsive ──────────────────────────────────────────────────────────── */
@media (max-width:900px){
  .pgbody .page-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:820px){
  .pgcta{flex-direction:column;align-items:flex-start}
}
@media (max-width:560px){
  .pgbody .panel,.pgbody .card,.pgbody .ccard,.pgbody .pcard,
  .pgbody .feat,.pgbody .lead{padding:16px}
  .pgbody .hero-stats{gap:8px}
  .pgbody .hstat{padding:10px 12px}
}

/* ---- 2026-08-18 audit fixes ---------------------------------------------
   b labels were inline against their spans ("ApplySend your channel...") —
   block them, margin-bottom only (shorthand would zero the top margin and
   collapse sections, see CLAUDE.md trap #2). Mirrors .hcat b, the existing
   precedent for label-over-description cards. */
.pgbody .pflow-step b,.pgbody .feat b{display:block;margin-bottom:6px}

/* 6 cards in an auto-fit grid made 5+1 with an orphan at desktop widths.
   Cap these two six-card grids at 3 columns so they read 3x2. */
@media (min-width:900px){
  .pgbody .feat-grid,.pgbody .hcats{grid-template-columns:repeat(3,1fr)}
}

/* the caps microcopy sat flush against the submit button */
.pgbody .form-foot .hint{margin-left:14px}

/* phase-5 sweep: at tablet widths the auto-fit grids made ragged last rows
   (stat chips 3+1, steps 3+1, leads 2+1, for-labels 2+2+1). Two columns
   divide the 2/4/6-item grids evenly; exactly-3-item grids get three;
   the five-card what-grid gets three (3+2). Desktop and phone unchanged. */
@media (min-width:561px) and (max-width:1023px){
  .pgbody .feat-grid,.pgbody .vals,.pgbody .leads,.pgbody .fund-two,
  .pgbody .about-mv,.pgbody .pflow,
  .pgbody .stat-strip,.phead .stat-strip{
    grid-template-columns:repeat(2,1fr)}
  .pgbody .feat-grid:has(>:last-child:nth-child(3)),
  .pgbody .vals:has(>:last-child:nth-child(3)),
  .pgbody .leads:has(>:last-child:nth-child(3)),
  .pgbody .pflow:has(>:last-child:nth-child(3)){
    grid-template-columns:repeat(3,1fr)}
  .pgbody .what-grid{grid-template-columns:repeat(3,1fr)}
}

/* every section's .wrap is its own z-index:1 stacking context, so a later
   band paints OVER the search dropdown hanging out of the hero (Rahul's
   clipped-stub screenshot, article pages). The plate that holds the search
   must outrank its sibling sections. */
.plate:has(.hsearch-wrap){z-index:5}

/* the Help search results dropdown — the ported markup was never styled in
   v2 (its .hres class is only dressed under .pgbody; the search lives in
   .phead), so results rendered as bare wrapped text on the hero. A paper
   panel under the field; each result: category eyebrow, bold title, dim
   clamped description; hover/keyboard row inverts to the accent. */
.hsearch-wrap .hres{position:absolute;top:calc(100% + 10px);left:0;right:0;z-index:60;
  background:var(--paper);color:var(--ink);border:3px solid var(--ink);
  box-shadow:7px 7px 0 rgba(0,0,0,.35);max-height:min(56vh,520px);overflow:auto}
.hsearch-wrap .hres:empty{display:none}
.hres-item{display:block;padding:14px 16px;border-bottom:2px solid rgba(20,17,9,.14)}
.hres-item:last-child{border-bottom:0}
.hres-item .hres-cat{display:block;font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent,var(--vio));margin-bottom:3px}
.hres-item .hres-t{display:block;font-family:var(--head);font-weight:800;letter-spacing:-.01em}
.hres-item .hres-d{margin-top:3px;font-size:13px;color:rgba(20,17,9,.62);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hres-item:hover,.hres-item:focus-visible,.hres-item[aria-selected="true"]{
  background:var(--accent,var(--vio))}
.hres-item:hover .hres-cat,.hres-item:hover .hres-t,.hres-item:hover .hres-d,
.hres-item:focus-visible .hres-cat,.hres-item:focus-visible .hres-t,
.hres-item:focus-visible .hres-d,
.hres-item[aria-selected="true"] .hres-cat,.hres-item[aria-selected="true"] .hres-t,
.hres-item[aria-selected="true"] .hres-d{color:var(--paper)}
.hres-empty{padding:14px 16px;font-size:14px}
.hres-empty a{color:var(--accent,var(--vio));font-weight:700;text-decoration:underline;
  text-underline-offset:3px}

/* a .pgcta holding ONLY buttons (register, funding) let space-between fling
   them to opposite edges of the band — group them instead. Bands with a text
   block keep the text-left / buttons-right composition. */
.pgcta:not(:has(>div)){justify-content:flex-start}

/* phase-3: thumb-sized targets on phones — rows fatten, the look holds.
   card-links/.more grow hit area without moving the layout (negative
   margin swallows the added padding). */
@media (max-width:820px){
  .pgbody summary{padding-block:8px}
  .pgbody .hchip{padding-block:11px}
  .pgbody .hlist a{display:inline-block;padding-block:9px;margin-block:-2px}
  .pgbody .card-link,.pgbody a.more{padding-block:10px;margin-block:-10px}
}

/* pressed state on subpage buttons and card-links (translate, not
   transform, so .mag cannot override); cards with offset shadows sink and
   their shadow shortens — their existing .18s transition animates it */
.pgbody .btn:active,.pgcta .btn:active,.pgbody .hchip:active{translate:2px 2px}
.pgbody .hcat:active,.pgbody .hart:active{
  transform:translate(2px,2px);box-shadow:3px 3px 0 var(--rule)}

/* drawn icons replacing the dingbat glyphs in .di / .tn / .ok-icon —
   same stroke idiom as the .rc card icons */
.pgbody .di svg{width:26px;height:26px;stroke:currentColor;fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pgbody .tn svg{width:18px;height:18px;stroke:currentColor;fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px}
.pgbody .ok-icon svg{width:30px;height:30px;stroke:currentColor;fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}