/* ============================================================================
   css/plans.css  (batch PLANS-TABLE, 23 Oct 2026; the owner's Option A)

   The Plans page (/plans) and the public Free vs Pro page (/free-vs-pro): the headline, one line under it, and ONE
   table. The two plans are the table's own column heads (name, price, one line, the button); the Monthly / Annual
   choice sits in the head's first cell; every feature row is under them. One file for both pages, so the two cannot
   drift apart. Every colour is a token of css/tokens.css, so the dark theme is the same file.

   The owner's words (23 Oct 2026): "I wanted this to be first and be the only thing. So it'll be free versus pro...
   two columns with free, division, second column, JagSim Pro... it's literally just the price and the name of the
   subscription in the free versus pro area." And: the promo code box (and the plan box, until batch CHECKOUT2) must be SEEN (bordered, dark
   ink); Get Pro pops up in the middle of the screen; "You're on this plan" for Free, "Currently Pro" and Manage plan
   for Pro; no duplicate words or buttons.
   The rules that stand: a light page; the Pro column tinted light blue with a light-blue Get Pro (not orange, not
   black); "Included" / "Unlimited" in green in the Pro column; every control with a 3:1 edge; a chosen option outlined,
   not filled; no long dashes; phone CSS inside @media (max-width:767px); 44px taps; light and dark.
   ============================================================================ */

/* 0. The few variables the two pages share (all from the site's tokens, plus Pro's light blue for this page) */
.plans-page, .fvp-page {
  --pl-page: var(--jag-page, #F6F7F8);
  --pl-card: var(--jag-card, #FFFFFF);
  --pl-card-2: var(--jag-card-2, #F7F9FB);
  --pl-ink: var(--jag-ink, #1A1F29);
  --pl-ink-2: var(--jag-ink-2, #31404F);
  --pl-muted: var(--jag-ink-muted, #5A626B);
  --pl-line: var(--jag-line, #75828F);
  --pl-hair: var(--jag-hairline, #DDE4EC);
  --pl-accent: var(--jag-accent, #0F6E76);
  --pl-accent-text: var(--jag-accent-text, #0F6E76);
  --pl-accent-on: var(--jag-accent-on, #FFFFFF);
  --pl-tint: var(--jag-accent-tint-soft, #E3F3F4);
  --pl-tint-line: var(--jag-tint-line, #4F949C);
  --pl-focus: var(--jag-focus, #0F6E76);
  --pl-r: var(--jag-radius, 9px);
  --pl-r-card: var(--jag-radius-panel, 4px);   /* SHARP1: follows css/tokens.css */
  /* Pro's light blue on this page (the owner, 23 Oct 2026): 6.6:1 as text on the card, 6.3:1 on its tint, 3.4:1 as an edge. */
  --pl-blue: #1F5FA8;
  --pl-blue-hover: #174A85;
  --pl-blue-line: #4F86D6;
  --pl-blue-tint: #EAF2FD;
  --pl-blue-on: #FFFFFF;
  /* "Included" and "Unlimited" in the Pro column, as the owner's draft has them: 4.9:1 on the tint. */
  --pl-green: #087443;
  /* a refusal under the promo code box: 5.9:1 on the card, 5.4:1 on the tint */
  --pl-no: #B42318;
  font-variant-numeric: tabular-nums;
}
html[data-chart-theme="dark"] .plans-page, html[data-intel-theme="dark"] .plans-page,
html[data-chart-theme="dark"] .fvp-page, html[data-intel-theme="dark"] .fvp-page {
  --pl-blue: #8FBCF7;
  --pl-blue-hover: #B3D2FA;
  --pl-blue-line: #6FA6EE;
  --pl-blue-tint: #152638;
  --pl-blue-on: #06171A;
  --pl-green: #27C96F;
  --pl-no: #F0796B;
}
/* THE CORNER SAYS SIGN IN ONLY (the owner, 23 Oct 2026): the page's own Free head has Create free account, so the
   header's (and the phone's Sign up) is not drawn here. */
body.plans-page .pt-auth-slot .sim-signup-btn-pill, body.fvp-page .jag-head-nav a.jag-head-cta { display: none !important; }
.plans-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 1. The headline and its one line sit in the table's first cell (batch PLANS-HEAD, the owner: "move the free versus
      pro in one of the boxes so you don't take up so much space at the top") */
.plans-h1 { margin: 0; font-size: 30px; line-height: 1.12; font-weight: 800; letter-spacing: -.02em; color: var(--pl-ink); }
.plans-sub { margin: 10px 0 0; max-width: 34ch; font-size: 14.5px; line-height: 1.5; font-weight: 500; color: var(--pl-ink-2); }

/* 2. THE ONE TABLE. The plan heads are the column heads; the feature rows follow. */
.fvp { max-width: 1000px; margin: 14px auto 0; border: 1px solid var(--pl-hair); border-radius: var(--pl-r-card); background: var(--pl-card); overflow: hidden; scroll-margin-top: 98px; }
.fvp[hidden] { display: none; }
.fvp-ledger { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 13.5px; line-height: 1.4; }
.fvp-ledger col.c-feature { width: 44%; }
.fvp-ledger col.c-plan { width: 28%; }
.fvp-ledger thead th { position: static; vertical-align: top; padding: 22px 18px 20px; background: var(--pl-card); border-bottom: 2px solid var(--pl-hair); text-align: center; font-size: 13.5px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--pl-ink); }
.fvp-ledger thead td.fvp-lbl { vertical-align: middle; padding: 22px 26px; background: var(--pl-card); border-bottom: 2px solid var(--pl-hair); text-align: left; font-weight: 400; color: var(--pl-ink); }
.fvp-ledger thead th.is-pro { background: var(--pl-blue-tint); }

/* 2a. EQUAL HEADS (the owner, 23 Oct 2026: "make them equal"). Each row of a plan head has the same height in both
       heads, so the prices, the lines, the two buttons and the last row sit level: the name; the Monthly / Annual
       choice on Pro and an empty slot on Free; the price; one line; the button; the renewal line on Pro (batch
       CHECKOUT2; it was the promo code) and "No card needed." on Free. What only Pro draws later (the free try, the
       promo code, a promo message, the Terms line) comes after. */
.plan-head > .plan-name { height: 30px; }
.plan-head > .ph-bill { display: flex; align-items: center; justify-content: center; height: 40px; margin: 10px 0 0; }
.plan-head .plan-prices { justify-content: center; height: 46px; margin: 8px 0 0; }
/* a block, not a flex box: Coach Jag wraps a glossary term inside the line for a member, and a flex box set that word
   on a line of its own */
.plan-head .plan-blurb { display: block; height: 36px; margin: 4px 0 12px; overflow: hidden; }
.plan-head .ph-cta { display: flex; align-items: center; justify-content: center; height: 44px; }
.plan-head .btn { height: 44px; }
.plan-head .ph-extra { height: 44px; margin: 10px 0 0; }
.plan-nocard { display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 600; line-height: 1.4; color: var(--pl-muted); }
/* THE AUTO-RENEWAL LINE UNDER GET PRO (batch CHECKOUT2): Get Pro goes straight to Stripe, so the renewal terms sit
   directly under it, level with "No card needed." on Free, in the page's own ink (not the muted grey of small print):
   the law wants them clear and close to the button. The half for the plan not chosen is hidden. A block, not a flex box:
   the price is a span inside the sentence, and a flex box set each piece of the sentence in a column of its own. */
.ph-renew { display: block; margin: 10px 0 0; font-size: 12px; font-weight: 600; line-height: 1.4; color: var(--pl-ink-2); text-align: center; }
.ph-renew [hidden], .sticky-renew [hidden] { display: none; }
.sticky-renew { margin: 5px 0 0; font-size: 11.5px; font-weight: 600; line-height: 1.35; color: var(--pl-ink-2); text-align: center; }
/* A member who has Pro is not choosing a billing period: the slot goes in both heads, so they stay level. */
body.is-on-pro .plan-head > .ph-bill { display: none !important; }
/* The Monthly / Annual choice, under "JagSim Pro": two outlined options, the chosen one in the accent */
.bill-toggle { display: inline-flex; align-items: stretch; gap: 6px; margin: 0; padding: 0; }
.bill-toggle[hidden] { display: none; }
.bt-opt { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 12px; border: 1.5px solid var(--pl-line); border-radius: var(--pl-r); background: var(--pl-card); color: var(--pl-ink-2); font: inherit; font-size: 13px; font-weight: 800; line-height: 1.2; cursor: pointer; white-space: nowrap; }
.bt-opt span { font-weight: 700; color: var(--pl-muted); }
.bt-opt:hover { color: var(--pl-ink); border-color: var(--pl-ink); }
.bt-opt.on { border: 2px solid var(--pl-accent); color: var(--pl-accent-text); background: var(--pl-card); }
.bt-opt.on span { color: var(--pl-accent-text); }
.bt-opt:focus-visible { outline: 2px solid var(--pl-focus); outline-offset: 2px; }
.bill-note [hidden] { display: none; }
/* A member who has Pro reads the renewal in the Pro head's line, not the other price. */
body.is-on-pro #planCardPro .bill-note > [data-plain], body.is-on-pro #planCardPro .bill-note > [data-annual] { display: none !important; }
body.is-on-pro .bill-top { display: none !important; }

/* 2b. A plan head: the name, the price, one line, the button, and what belongs under the button */
.plan-head .plan-name { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.01em; line-height: 1.25; color: var(--pl-ink); }
.plan-head.is-pro .plan-name { color: var(--pl-blue); }
.plan-prices { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 6px 0 2px; }
.price { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 0; }
.price[hidden] { display: none; }
.price .n { font-size: 38px; line-height: 1.05; font-weight: 800; letter-spacing: -.02em; color: var(--pl-ink); }
.price .per { font-size: 13px; font-weight: 600; color: var(--pl-muted); }
.price .per-mo { display: block; flex: 1 1 100%; margin-top: 2px; font-size: 12.5px; font-weight: 600; color: var(--pl-muted); }
.plan-blurb { margin: 2px 0 14px; min-height: 18px; font-size: 12.5px; font-weight: 500; line-height: 1.4; color: var(--pl-muted); }
.plan-act { margin: 0; }
.plan-act[hidden], .plan-mine[hidden] { display: none; }
.btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; margin: 0; padding: 0 10px; border: 1.5px solid var(--pl-line); border-radius: var(--pl-r); background: var(--pl-card); color: var(--pl-ink); font: inherit; font-size: 15px; font-weight: 800; line-height: 1.2; text-decoration: none; cursor: pointer; }
.btn:hover { border-color: var(--pl-ink); }
.btn:focus-visible { outline: 2px solid var(--pl-focus); outline-offset: 2px; }
.btn[hidden] { display: none; }
/* Create free account and Manage plan: outlined in the page's ink, 2px, so the edge is seen on the tint too */
.btn-free, .btn-manage { border: 2px solid var(--pl-ink); background: var(--pl-card); color: var(--pl-ink); }
.btn-free:hover, .btn-manage:hover { border-color: var(--pl-ink); background: var(--pl-card-2); }
/* Get Pro: filled, Pro's light blue */
.btn-pro { border-color: var(--pl-blue); background: var(--pl-blue); color: var(--pl-blue-on); }
.btn-pro:hover { border-color: var(--pl-blue-hover); background: var(--pl-blue-hover); color: var(--pl-blue-on); }
/* The promo code box, SEEN (the owner, 23 Oct 2026: "I couldn't see the promo field box"): a bordered input with
   the page's ink, and Apply beside it, under Get Pro. */
.promo-form { display: flex; gap: 6px; }
.promo-form[hidden] { display: none; }
.promo-form input { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0 10px; border: 1.5px solid var(--pl-line); border-radius: var(--pl-r); background: var(--pl-card); color: var(--pl-ink); font: inherit; font-size: 13px; font-weight: 600; letter-spacing: .02em; }
.promo-form input::placeholder { color: var(--pl-muted); opacity: 1; }
.promo-form input:focus { outline: 2px solid var(--pl-focus); outline-offset: 1px; border-color: var(--pl-accent); }
.promo-form button { flex: 0 0 auto; min-height: 44px; padding: 0 12px; border: 1.5px solid var(--pl-ink); border-radius: var(--pl-r); background: var(--pl-card); color: var(--pl-ink); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.promo-form button:hover { background: var(--pl-card-2); }
.promo-form button:focus-visible { outline: 2px solid var(--pl-focus); outline-offset: 2px; }
.promo-form button[disabled] { cursor: progress; }
.promo-msg { margin: 6px 0 0; font-size: 12px; line-height: 1.4; font-weight: 600; color: var(--pl-muted); }
.promo-msg:empty { display: none; }
.promo-msg.is-err { color: var(--pl-no); }
/* THE ONE SMALL LINE in the Pro head, under the promo code (the owner, 23 Oct 2026): how Pro renews, the cancel
   promise, and the Terms (the refund rules and the EU and UK withdrawal right live there). A member who has Pro does
   not see it (the buy parts go). The free try's note, when its switch is on, is a renew-note in .plan-notes. */
.ph-fine { margin: 10px 0 0; font-size: 11.5px; line-height: 1.45; font-weight: 500; color: var(--pl-muted); text-align: center; }
.ph-fine [hidden] { display: none; }
.renew-note { margin: 8px 0 0; font-size: 11.5px; line-height: 1.45; font-weight: 500; color: var(--pl-muted); text-align: center; }
.renew-note[hidden] { display: none; }
.ph-fine a, .renew-note a { color: var(--pl-accent-text); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
/* "You're on this plan" (Free) and "Currently Pro": an outlined pill, never filled; one mark of the member's plan. */
.plan-you { display: inline-block; margin: 0; padding: 6px 12px; border: 1.5px solid var(--pl-accent); border-radius: var(--pl-r); background: var(--pl-card); color: var(--pl-accent-text); font-size: 12px; font-weight: 800; line-height: 1.2; letter-spacing: 0; text-transform: none; white-space: nowrap; }
.plan-you::before { content: "\2713\00a0"; }
.plan-you[hidden] { display: none !important; }
.plan-you.is-pro { border-color: var(--pl-blue); color: var(--pl-blue); }
.plan-incl { display: block; margin: 0; font-size: 12.5px; font-weight: 600; line-height: 1.4; color: var(--pl-muted); }
.plan-incl[hidden] { display: none; }
/* A member who has Pro: Manage plan level with "Included in Pro"; the renewal or the gift is the line above it */
.plan-mine { margin: 0; }
.renew-line { display: block; margin: 0; font-size: 12px; line-height: 1.4; font-weight: 500; color: var(--pl-muted); }
.renew-line:empty { display: none; }
/* The store steps aside for a member who has Pro: the price stays, Get Pro, the promo code and the small print go. */
body.is-on-pro .plan-head .plan-act { display: none !important; }
body.is-on-pro #goFree, body.is-on-pro #freeCurrentBadge { display: none !important; }

/* 3. THE ROWS (batch PLANSA; the owner, 30 Oct 2026, of the rows on his phone: "format this a tad bit better, and make
      the words a bit darker for descriptions"; he chose Option A of the three mock-ups): a ledger of three columns at
      every width, the feature | Free | Pro. The feature's name is bold with its line under it in the page's second ink
      (9.7:1 on the card; it was the muted grey); the two plan columns are narrow and centred, the Pro one tinted. Where
      Free gets none of a thing the cell KEEPS the owner's two words "Not included." (for scripts/check-plans-page.mjs
      and for a screen reader) and the eye gets a short dash; where a plan has a thing with nothing to count, the cell
      is a check mark that reads "Included" (aria-label). Words stay where there is a figure or a part to name
      (Unlimited, All 11, 2 and 5, the three statements ...). */
.fvp-ledger tr.fvp-grp th { padding: 9px 24px; background: var(--pl-card-2); text-align: left; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--pl-muted); border-bottom: 1px solid var(--pl-hair); }
.fvp-ledger tbody th, .fvp-ledger td { padding: 12px 18px; border-bottom: 1px solid var(--pl-hair); vertical-align: middle; background: var(--pl-card); }
.fvp-ledger tbody th { text-align: left; font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--pl-ink); }
.fvp-ledger tbody th small, .fvp-ledger td small { display: block; margin-top: 3px; font-size: 13px; font-weight: 500; line-height: 1.45; color: var(--pl-ink-2); }
.fvp-ledger td { text-align: center; font-weight: 600; line-height: 1.35; color: var(--pl-ink-2); }
.fvp-ledger td.is-pro { background: var(--pl-blue-tint); color: var(--pl-ink); }
.fvp-ledger td small { margin-top: 2px; font-size: 12px; }
/* owner-ok: the owner's draft of 23 Oct 2026 asks for "Unlimited" (and "All") in green in the Pro column; these are words in a cell, not a control and not a figure that rises */
.fvp-ledger td .yes { color: var(--pl-green); font-weight: 700; }
/* "Not included." stays in the cell (the check holds it to those two words; a screen reader reads them); the eye gets a
   short dash in the control-line grey. The words are drawn at no size, not hidden, so nothing reads as empty. */
.fvp-ledger td.fvp-none { font-size: 0; line-height: 0; color: transparent; }
.fvp-ledger td.fvp-none::before { content: ""; display: inline-block; width: 12px; height: 2px; border-radius: 1px; background: var(--pl-line); vertical-align: middle; }
/* The check mark: the site's soft green disc with the check in the column's green; its aria-label says Included. */
.fvp-ledger td .ck { position: relative; display: inline-block; width: 22px; height: 22px; border-radius: 50%; background: var(--jag-green-soft, #E8F7EF); vertical-align: middle; }
.fvp-ledger td .ck::after { content: ""; position: absolute; left: 7.5px; top: 4px; width: 5px; height: 9px; border: solid var(--pl-green); border-width: 0 2.2px 2.2px 0; transform: rotate(45deg); }
/* The column strip under the heads: the three columns named once, where the two narrower ones begin. */
.fvp-ledger tr.fvp-cols td { padding: 8px 14px; border-bottom: 1px solid var(--pl-hair); font-size: var(--jag-colhead, 11px); font-weight: 800; line-height: 1.3; letter-spacing: .07em; text-transform: uppercase; color: var(--pl-muted); }
.fvp-ledger tr.fvp-cols td.fvp-col-f { padding-left: 24px; text-align: left; }
.fvp-ledger tr.fvp-cols td.is-pro { color: var(--pl-blue); }
.fvp-ledger tbody tr:last-child th, .fvp-ledger tbody tr:last-child td { border-bottom: 0; }
.fvp-ledger tbody tr:not(.fvp-grp):not(.fvp-manage):not(.fvp-cols):hover th, .fvp-ledger tbody tr:not(.fvp-grp):not(.fvp-manage):not(.fvp-cols):hover td:not(.is-pro) { background: var(--pl-card-2); }
/* The row a member arrived from (a lock elsewhere on the site): outlined, never filled. */
.fvp-ledger tr.is-arrived th, .fvp-ledger tr.is-arrived td { box-shadow: inset 0 2px 0 var(--pl-accent), inset 0 -2px 0 var(--pl-accent); }
.fvp-ledger tr.is-arrived th { box-shadow: inset 2px 2px 0 var(--pl-accent), inset 0 -2px 0 var(--pl-accent); }
.fvp-ledger tr.is-arrived td.is-pro { box-shadow: inset -2px 2px 0 var(--pl-accent), inset 0 -2px 0 var(--pl-accent); }
.fvp-you { display: block; margin-top: 3px; font-size: 12px; font-weight: 800; color: var(--pl-accent-text); }
/* 3a. THE MEMBER'S OWN PLAN (Plans only): a full-width row directly under the heads, opened by Manage plan. */
.fvp-ledger tr.fvp-manage td { padding: 0 18px 18px; text-align: left; background: var(--pl-card); }
.fvp-ledger tr.fvp-manage[hidden] { display: none; }
/* tokens.css paints every dark-mode th as a muted header cell with !important; here a th is a plan head or a feature's name */
html[data-chart-theme="dark"] .fvp-ledger thead th, html[data-intel-theme="dark"] .fvp-ledger thead th { background: var(--pl-card) !important; color: var(--pl-ink) !important; border-bottom-color: var(--pl-hair) !important; }
html[data-chart-theme="dark"] .fvp-ledger thead th.is-pro, html[data-intel-theme="dark"] .fvp-ledger thead th.is-pro { background: var(--pl-blue-tint) !important; }
html[data-chart-theme="dark"] .fvp-ledger tbody th, html[data-intel-theme="dark"] .fvp-ledger tbody th { background: var(--pl-card) !important; color: var(--pl-ink) !important; border-bottom-color: var(--pl-hair) !important; }
html[data-chart-theme="dark"] .fvp-ledger tr.fvp-grp th, html[data-intel-theme="dark"] .fvp-ledger tr.fvp-grp th { background: var(--pl-card-2) !important; color: var(--pl-muted) !important; border-bottom-color: var(--pl-hair) !important; }
html[data-chart-theme="dark"] .fvp-ledger tbody tr:not(.fvp-grp):not(.fvp-manage):hover th, html[data-intel-theme="dark"] .fvp-ledger tbody tr:not(.fvp-grp):not(.fvp-manage):hover th { background: var(--pl-card-2) !important; }
html[data-chart-theme="dark"] .fvp-ledger td, html[data-intel-theme="dark"] .fvp-ledger td { border-bottom-color: var(--pl-hair) !important; }

/* 3b. ONE LAYOUT AT EVERY WIDTH (the owner, 23 Oct 2026: Free and Pro equal in size; 30 Oct 2026: Option A). The
       title across the top of the block; Free and Pro side by side in equal halves; then the column strip and every
       feature row as three columns: the feature wide on the left, the Free and Pro values in two narrow columns on the
       right, the Pro column tinted, every value centred in its cell. The phone rules (end of this file) only make it
       smaller. The section bands span. */
.fvp { max-width: 940px; }
.fvp-ledger, .fvp-ledger thead, .fvp-ledger tbody { display: block; }
.fvp-ledger colgroup { display: none; }
.fvp-ledger tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.fvp-ledger tr[hidden] { display: none; }
.fvp-ledger thead td.fvp-lbl { display: block; grid-column: 1 / -1; padding: 20px 24px 16px; border-bottom: 1px solid var(--pl-hair); text-align: center; }
.fvp-ledger thead td.fvp-lbl .plans-sub { margin-left: auto; margin-right: auto; max-width: 60ch; }
/* each head's own column is at most 360px wide inside its half, centred */
.fvp-ledger thead th { display: block; min-width: 0; padding: 18px max(24px, calc((100% - 360px) / 2)) 20px; }
/* the feature rows and the column strip: three columns, the two plan columns 23% each; a cell is a column box so its
   value sits in the middle of the row whatever the other cells' height */
.fvp-ledger tbody tr:not(.fvp-grp):not(.fvp-manage) { grid-template-columns: minmax(0, 1fr) 23% 23%; }
.fvp-ledger tbody th[scope="row"] { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 12px 18px 12px 24px; }
.fvp-ledger tbody td { display: flex; flex-direction: column; justify-content: center; align-items: center; min-width: 0; padding: 12px 14px; }
/* align-items: centre, not the default stretch (the owner, 30 Oct 2026: the dashes sat left of the words in the same
   column). A stretched column box left the fixed-width dash and check at the cell's left edge while the words were
   centred by text-align; every value now shares the column's centre line (scripts/check-plans-page.mjs measures it). */
.fvp-ledger tr.fvp-grp th { grid-column: 1 / -1; }
.fvp-ledger tr.fvp-manage td { display: block; grid-column: 1 / -1; padding: 0 24px 16px; }

/* 4. The questions on the public Free vs Pro page */
.fvp-q { max-width: 940px; margin: 28px auto 0; }
.fvp-q h2 { margin: 0 0 6px; font-size: 18px; font-weight: 800; color: var(--pl-ink); }
.fvp-q details { border-top: 1px solid var(--pl-hair); }
.fvp-q summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 10px 12px; border: 1.5px solid var(--pl-line); border-radius: var(--pl-r); margin: 8px 0; list-style: none; cursor: pointer; font-size: 14px; font-weight: 700; color: var(--pl-ink); background: var(--pl-card); }
.fvp-q summary::-webkit-details-marker { display: none; }
.fvp-q summary::after { content: ""; flex: 0 0 auto; width: 8px; height: 8px; margin-left: 12px; border-right: 2px solid var(--pl-muted); border-bottom: 2px solid var(--pl-muted); transform: rotate(45deg); }
.fvp-q details[open] summary::after { transform: rotate(-135deg); }
.fvp-q summary:focus-visible { outline: 2px solid var(--pl-focus); outline-offset: 2px; }
.fvp-q p { margin: 0 12px 14px; font-size: 13.5px; line-height: 1.55; color: var(--pl-ink-2); }

/* 5. The public page's own chrome under this stylesheet */
body.fvp-page { background: var(--pl-page); color: var(--pl-ink); }
body.fvp-page .container { max-width: 1040px; padding: 0 16px !important; margin-top: 0; }
body.fvp-page .crumb { margin: 0 0 10px !important; }
html[data-chart-theme="dark"] body.fvp-page .jag-head { background: var(--pl-card); border-bottom-color: var(--pl-hair); }
html[data-chart-theme="dark"] body.fvp-page .jag-head-nav a { background: var(--pl-card); color: var(--pl-ink-2); border-color: var(--pl-line); }
html[data-chart-theme="dark"] body.fvp-page .jag-head-nav a.jag-head-cta { background: var(--pl-accent); border-color: var(--pl-accent); color: var(--pl-accent-on); }
html[data-chart-theme="dark"] body.fvp-page .jag-foot { border-top-color: var(--pl-hair); }
html[data-chart-theme="dark"] body.fvp-page .jag-foot-links a, html[data-chart-theme="dark"] body.fvp-page .jag-foot-legal,
html[data-chart-theme="dark"] body.fvp-page .crumb, html[data-chart-theme="dark"] body.fvp-page .crumb a, html[data-chart-theme="dark"] body.fvp-page #jagBack { color: var(--pl-ink-2) !important; }
html[data-chart-theme="dark"] body.fvp-page .jag-foot-legal a { color: var(--pl-accent-text); }

/* 6. PHONES (390 and 320 wide): the two plan heads side by side across the full width; each feature's name on its
      own line with the Free and Pro values under it; 44px taps; nothing sideways. */
@media (max-width: 767px) {
  .plans-h1 { font-size: 26px; }
  .plans-sub { margin: 6px auto 0; font-size: 13.5px; }
  .fvp { margin-top: 10px; scroll-margin-top: 10px; border-radius: var(--pl-r-card); }
  .fvp-ledger, .fvp-ledger thead, .fvp-ledger tbody { display: block; }
  .fvp-ledger colgroup { display: none; }
  .fvp-ledger tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .fvp-ledger tr[hidden] { display: none; }
  /* the title over the two heads, full width */
  .fvp-ledger thead td.fvp-lbl { display: block; grid-column: 1 / -1; padding: 16px 12px 14px; border-bottom: 1px solid var(--pl-hair); text-align: center; }
  /* The Monthly / Annual choice fits the Pro head: two options side by side, "save 18%" under "Annual" */
  .bill-toggle { display: flex; width: 100%; gap: 4px; }
  .bt-opt { flex: 1 1 0; flex-direction: column; gap: 0; min-height: 44px; padding: 0 4px; font-size: 12.5px; line-height: 1.15; }
  .bt-opt span { font-size: 10.5px; }
  .fvp-ledger thead th { display: block; min-width: 0; padding: 16px 10px; }
  .plan-head > .ph-bill { height: 44px; }
  .plan-head .plan-prices { height: 54px; }
  .plan-head .plan-blurb { height: 50px; margin-bottom: 10px; }
  /* "Currently Pro" goes under the name on a phone; both names take the same two lines */
  body.is-on-pro .plan-head > .plan-name { height: 60px; align-content: flex-start; gap: 6px; }
  .plan-head .plan-name { font-size: 15px; }
  .price { flex-direction: column; align-items: center; gap: 0; }
  .price .n { font-size: 28px; }
  .price .per { font-size: 12px; }
  .plan-blurb { font-size: 11.5px; }
  .btn { font-size: 14px; padding: 0 4px; }
  /* The promo code box on a phone: the field over its Apply, each the head's full width. A phone's inputs are 16px
     (no zoom on focus, css/paper-trading-shell), and beside Apply the half-width head cut "Promo code" to "Promo cod". */
  .plan-head .promo-form.ph-extra { height: auto; flex-wrap: wrap; }
  .promo-form input, .promo-form button { min-height: 44px; flex: 1 1 100%; }
  .promo-form input { padding: 0 10px; letter-spacing: 0; }
  .promo-form button { padding: 0 9px; font-size: 13px; }
  .ph-fine, .renew-note { font-size: 11px; }
  /* The renewal line wraps to three lines in a half-width head: "No card needed." keeps the same row height on Free. */
  .plan-head .ph-renew, .plan-head .plan-nocard { height: 68px; }
  .ph-renew { font-size: 11.5px; }
  .plan-you { font-size: 11.5px; padding: 6px 10px; white-space: normal; }
  /* A box opened in the Pro head (the free try's confirm step, Pro for life) needs the whole width:
     the Pro head then takes both columns and the Free head keeps its own. */
  .fvp-ledger thead th.is-pro:has(.jtry-box, .jtry-done, .lt-offer) { grid-column: 1 / -1; }
  .fvp-ledger tbody th[scope="row"] { grid-column: 1 / -1; padding: 12px 12px 4px; border-bottom: 0; font-size: 13.5px; }
  .fvp-ledger tbody td { display: block; min-width: 0; padding: 4px 10px 12px; font-size: 13px; }
  .fvp-ledger tr.fvp-grp th { grid-column: 1 / -1; padding: 10px 12px; font-size: 11px; }
  .fvp-ledger tr.fvp-manage td { grid-column: 1 / -1; padding: 0 12px 14px; }
  .fvp-ledger tbody th small, .fvp-ledger td small { font-size: 11.5px; }
  .fvp-ledger tbody th small { display: block; margin: 2px 0 0; }
}
@media (max-width: 359px) {
  .plans-h1 { font-size: 24px; }
  .plan-head .ph-renew, .plan-head .plan-nocard { height: 84px; }
  .bt-opt { padding: 0 6px; font-size: 12px; }
  .fvp-ledger { font-size: 12px; }
  .price .n { font-size: 24px; }
  .plan-head .plan-name { font-size: 14px; }
  .btn { font-size: 13px; }
}

/* SHARP1 (23 Oct 2026): Monthly | Annual is ONE joined control with a 1px divider and nearly square ends (css/tokens.css
   --jag-radius through --pl-r); the chosen option is outlined in the accent and drawn above its neighbour. */
.bill-toggle { gap: 0; }
.bt-opt { position: relative; border-radius: 0; }
.bt-opt + .bt-opt { margin-left: -1.5px; }
.bt-opt:first-child { border-radius: var(--pl-r) 0 0 var(--pl-r); }
.bt-opt:last-child { border-radius: 0 var(--pl-r) var(--pl-r) 0; }
.bt-opt:is(.on, :hover, :focus-visible) { z-index: 1; }

/* 6b. THE ROWS ON A PHONE (batch PLANSA, the owner's Option A, 30 Oct 2026). These stand here, after section 6, because
       batch CHECKOUT2 edits the lines just above section 6's row rules at the same time (the lead merges both); being
       later in the file, they take over from section 6's row lines, which can be folded in here once both are in.
       390 wide: the feature keeps about 190px, each plan column 84px; 320 wide: 72px each. Nothing scrolls sideways. */
@media (max-width: 767px) {
  .fvp-ledger tbody tr:not(.fvp-grp):not(.fvp-manage) { grid-template-columns: minmax(0, 1fr) 84px 84px; }
  .fvp-ledger tbody th[scope="row"] { grid-column: 1; display: flex; padding: 11px 8px 11px 12px; border-bottom: 1px solid var(--pl-hair); font-size: 13.5px; }
  .fvp-ledger tbody td { display: flex; padding: 10px 6px; font-size: 12px; }
  .fvp-ledger tr.fvp-grp th { padding: 9px 12px; font-size: 11px; }
  .fvp-ledger tr.fvp-cols td { padding: 8px 6px; }
  .fvp-ledger tr.fvp-cols td.fvp-col-f { padding-left: 12px; }
  .fvp-ledger tr.fvp-manage td { display: block; padding: 0 12px 14px; }
  .fvp-ledger tbody th small { font-size: 12.5px; }
  .fvp-ledger td small { font-size: 11px; }
}
@media (max-width: 359px) {
  .fvp-ledger tbody tr:not(.fvp-grp):not(.fvp-manage) { grid-template-columns: minmax(0, 1fr) 72px 72px; }
  .fvp-ledger tbody td { padding: 10px 4px; font-size: 11.5px; }
}