/* Plan cards and the feature comparison — shared by the homepage pricing
   section and pricing.html.

   Extracted from css/home-overrides.css so the two pages cannot drift. The
   plan CONTENT already has one source in build/plan-data.js; this is the same
   discipline for its presentation. Selectors carry both body scopes so each
   page keeps the specificity it had.

   Do not add plan rules to a page-specific stylesheet. */

/* ── pricing ──────────────────────────────────────────────────────────────
   Structure is price → value → CTA → proof. The old section ran 1741px with
   the £50 sitting 881px above its own button; the reader had scrolled a full
   screen past the decision before reaching anything to click.

   One set of cards serves both breakpoints. The page previously carried a
   desktop grid AND a separate JS accordion for mobile, each with its own copy
   of both plan lists — four lists to keep in step, which is why they drifted
   out of date in the first place. */
/* Natural heights, tops aligned. Stretching to equal height left Essentials
   with 153px of empty card below its last bullet against Pro's 31px, which
   read as unfinished rather than tidy. */
body.hp .pricing .plans,body.pp .pricing .plans{display:grid;grid-template-columns:380px 380px;gap:28px;
  justify-content:center;align-items:start;max-width:none}

body.hp .pricing .plan,body.pp .pricing .plan{background:#fff;border:1px solid var(--line);border-radius:22px;
  padding:34px 32px 30px;box-shadow:none;display:flex;flex-direction:column}
/* Pro is recommended by its border, its label and its CTA. No lift, no glow,
   no size difference — one soft shadow is the whole of the extra emphasis. */
body.hp .pricing .plan-pro,body.pp .pricing .plan-pro{border-color:#c9bdec;box-shadow:0 20px 48px rgba(102,126,234,.10)}

body.hp .plan-head,body.pp .plan-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
body.hp .pricing .plan-name,body.pp .pricing .plan-name{font-size:11.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--pu)}
/* Part of the card's own header row rather than stuck to the outside of it. */
body.hp .pricing .plan-flag,body.pp .pricing .plan-flag{position:static;background:#E9E2FB;color:#5B4FD6;
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:6px 11px;border-radius:999px;box-shadow:none}
body.hp .pricing .plan-blurb,body.pp .pricing .plan-blurb{margin:10px 0 0;font-size:15px;color:var(--mute)}

body.hp .pricing .plan-price,body.pp .pricing .plan-price{display:flex;align-items:baseline;gap:6px;margin:22px 0 0}
/* Ink, not gradient-filled: a gradient numeral is the most template-looking
   thing in a pricing card and reads as less confident, not more. */
body.hp .pricing .amt,body.pp .pricing .amt{font-size:46px;font-weight:800;letter-spacing:-.03em;color:var(--ink);
  background:none;-webkit-text-fill-color:currentColor}
body.hp .pricing .per,body.pp .pricing .per{font-size:15px;font-weight:600;color:var(--mute)}

body.hp .plan-line,body.pp .plan-line{margin:14px 0 0;font-size:15px;line-height:1.6;color:var(--body)}
/* The five-second answer to "why is Pro £25 more". */
body.hp .plan-line-strong,body.pp .plan-line-strong{font-size:15.5px;font-weight:600;color:var(--ink)}
/* Names where the extra £25 goes. The line above frames it memorably; this one
   makes it checkable. */
body.hp .plan-cats,body.pp .plan-cats{margin:8px 0 0;font-size:13.5px;font-weight:600;color:var(--pu);letter-spacing:.01em}
body.hp .plan-anchor,body.pp .plan-anchor{margin:8px 0 0;font-size:14px;color:var(--mute)}

body.hp .pricing .plan a.btn-grad,body.pp .pricing .plan a.btn-grad,
body.hp .pricing .plan a.btn-quiet,body.pp .pricing .plan a.btn-quiet{display:block;width:100%;margin-top:24px;padding:15px 20px;
  border-radius:13px;font-size:15.5px;font-weight:700;text-align:center;transition:transform .2s ease}
body.hp .pricing .plan a.btn-quiet,body.pp .pricing .plan a.btn-quiet{background:#fff;border:1px solid var(--line);color:var(--ink)}
body.hp .pricing .plan a.btn-quiet:hover,body.pp .pricing .plan a.btn-quiet:hover{border-color:var(--pu);color:var(--pu);transform:translateY(-1px)}
body.hp .pricing .plan a.btn-grad,body.pp .pricing .plan a.btn-grad{background:var(--grad);color:#fff;
  box-shadow:0 6px 18px rgba(102,126,234,.32)}
body.hp .pricing .plan a.btn-grad:hover,body.pp .pricing .plan a.btn-grad:hover{transform:translateY(-1px);color:#fff}

body.hp .pricing .plan-feats,body.pp .pricing .plan-feats{display:flex;flex-direction:column;gap:12px;
  margin:26px 0 0;padding-top:24px;border-top:1px solid var(--line)}
body.hp .pricing .plan-feats li,body.pp .pricing .plan-feats li{display:flex;align-items:flex-start;gap:11px;
  font-size:15px;line-height:1.55;color:var(--body)}
body.hp .pricing .plan-feats svg,body.pp .pricing .plan-feats svg{flex:none;margin-top:4px}
body.hp .pricing .plan-feats .txt,body.pp .pricing .plan-feats .txt{flex:1 1 0;min-width:0}

/* Stated once, beneath both cards, instead of four times inside them. */
body.hp .plan-trust,body.pp .plan-trust{display:flex;justify-content:center;flex-wrap:wrap;gap:26px;
  margin:32px 0 0;font-size:13.5px;font-weight:600;color:var(--mute)}
body.hp .plan-trust svg,body.pp .plan-trust svg{vertical-align:-2px;margin-right:7px}
body.hp .plan-trust-note,body.pp .plan-trust-note{margin:10px 0 0;text-align:center;font-size:13px;color:var(--mute)}

/* ── full comparison, collapsed ───────────────────────────────────────────
   Same disclosure language as the FAQ, and the same grid-row height animation
   so a long table can never be clipped by a fixed cap. */
body.hp .cmp,body.pp .cmp{max-width:760px;margin:56px auto 0;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}
body.hp .cmp-toggle,body.pp .cmp-toggle{display:flex;align-items:center;justify-content:space-between;gap:24px;
  width:100%;padding:22px 0;background:none;border:0;cursor:pointer;font-family:inherit;
  font-size:17px;font-weight:600;letter-spacing:-.015em;color:var(--ink);transition:color .2s ease}
body.hp .cmp-toggle:hover,body.pp .cmp-toggle:hover{color:var(--pu)}
body.hp .cmp-panel,body.pp .cmp-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s ease}
body.hp .cmp.open .cmp-panel,body.pp .cmp.open .cmp-panel{grid-template-rows:1fr}
body.hp .cmp-panel-in,body.pp .cmp-panel-in{overflow:hidden;min-height:0}
body.hp .cmp-table,body.pp .cmp-table{width:100%;border-collapse:collapse;margin-bottom:28px;
  font-size:14.5px;color:var(--body)}
body.hp .cmp-table thead th,body.pp .cmp-table thead th{padding:0 0 12px;font-size:11.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--pu);text-align:center}
body.hp .cmp-table thead th:first-child,body.pp .cmp-table thead th:first-child{text-align:left}
body.hp .cmp-group th,body.pp .cmp-group th{padding:26px 0 10px;font-size:11.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute);text-align:left}
body.hp .cmp-table tbody th,body.pp .cmp-table tbody th{padding:11px 16px 11px 0;font-weight:400;text-align:left;
  border-top:1px solid var(--line)}
body.hp .cmp-table tbody td,body.pp .cmp-table tbody td{padding:11px 0;text-align:center;border-top:1px solid var(--line);
  width:150px}
body.hp .cmp-group th,body.pp .cmp-group th{border-top:0}
body.hp .cmp-no,body.pp .cmp-no{color:#C9C4D8}
body.hp .cmp-val,body.pp .cmp-val{font-size:13.5px;color:var(--ink);font-weight:600}

@media (max-width:860px){
  body.hp .pricing .plans,body.pp .pricing .plans{grid-template-columns:minmax(0,420px);gap:16px}
  body.hp .pricing .plan,body.pp .pricing .plan{padding:28px 24px 26px}
  body.hp .pricing .amt,body.pp .pricing .amt{font-size:40px}
  body.hp .plan-trust,body.pp .plan-trust{gap:14px;font-size:13px}
  body.hp .cmp,body.pp .cmp{margin-top:40px}
  body.hp .cmp-toggle,body.pp .cmp-toggle{font-size:16px;padding:18px 0}
  body.hp .cmp-table,body.pp .cmp-table{font-size:13.5px}
  body.hp .cmp-table tbody td,body.pp .cmp-table tbody td{width:88px}
}

/* ── FAQ footer ───────────────────────────────────────────────────────────
   Was a full-width purple gradient surface with a 50px shadow, landing directly
   after the calmest section on the page — an older design system surviving
   underneath the new one. The gradient belongs on buttons, not as a content
   background. Now a hairline, a line of copy and one quiet action. */
body.hp .faq-foot,body.pp .faq-foot{max-width:760px;margin:56px auto 0;padding-top:40px;
  border-top:1px solid var(--line);text-align:center}
body.hp .faq-foot h3,body.pp .faq-foot h3{font-size:21px;font-weight:700;letter-spacing:-.02em;color:var(--ink);margin:0}
body.hp .faq-foot p,body.pp .faq-foot p{margin:8px 0 0;font-size:15.5px;line-height:1.7;color:var(--body)}
body.hp .faq-foot a,body.pp .faq-foot a{display:inline-block;margin-top:20px;padding:13px 26px;
  background:#fff;border:1px solid var(--line);border-radius:13px;
  font-size:15px;font-weight:700;color:var(--ink);transition:border-color .2s ease,color .2s ease}
body.hp .faq-foot a:hover,body.pp .faq-foot a:hover{border-color:var(--pu);color:var(--pu)}