/* Compare plans (pages/compare-plans.html, 18 to 19 Sep 2026, OPEN-DECISIONS #43). Linked from that page only; scoped to main.plans.
   Four blocks in the AI Studio MVP's trainer-tier order on WisdomHub tokens: header with the billing toggle, three tier cards,
   navy fee band, comparison table with a summary / full toggle. Components are the site's own (.card, .pill, .btn, .checklist,
   .tick, .band-navy, .band-card, .table). The segmented control is the sheet's "Segmented Control" row (Design System v3.0,
   Tabs & Segmented) mapped to tokens; it lives here until a second page needs it. Every value maps to css/styles.css. */

/* State. One attribute each on <main> (app.js block 33 writes them); the page renders its default, annual and the full
   table, with no JavaScript. */
.plans[data-billing="annual"]  [data-monthly]  { display: none; }
.plans[data-billing="monthly"] [data-annual]   { display: none; }
.plans[data-view="table"]   [data-view-panel="summary"] { display: none; }
.plans[data-view="summary"] [data-view-panel="table"]   { display: none; }

/* Segmented control (sheet): grey-100 track, r10, 4px inset, 4px gap; segments 13/600 r7 muted; the pressed one white,
   navy, with the sheet's 0 1 3 shadow. Press answers with the site's scale (S4). */
.plans .segmented { display: inline-flex; gap: 0.25rem; padding: 0.25rem; border-radius: var(--radius-md); background: var(--grey-100); }
.plans .seg {
  padding: 0.5rem 1.125rem; border: 0; border-radius: 7px; background: transparent;
  color: var(--muted-foreground); font-size: var(--text-body-sm); font-weight: 600; line-height: 1.5; white-space: nowrap; cursor: pointer;
  transition: background-color .15s, color .15s, box-shadow .15s, transform .16s var(--ease-out);
}
@media (hover: hover) { .plans .seg:hover { color: var(--primary); } }
.plans .seg[aria-pressed="true"] { background: var(--card); color: var(--primary); box-shadow: var(--shadow-sm); }
.plans .seg:active { transform: scale(0.97); }

/* 1. Header: William's header on the left (8 columns), the billing toggle on the right, bottom-aligned from 1024px. */
.plans-hero         { display: grid; gap: 2rem; align-items: end; }
@media (min-width: 1024px) { .plans-hero { grid-template-columns: 8fr 4fr; gap: 3rem; } }
.plans-hero__lead   { max-width: 40rem; font-size: var(--text-body-lg); line-height: 1.7; }
.plans-hero__billing { display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; }
@media (min-width: 1024px) { .plans-hero__billing { align-items: flex-end; } }

/* 2. Tier cards: one column, three from 1024px, equal height with the button anchored at the foot. */
.plans-tiers        { padding-top: 0; }
.plans-grid         { display: grid; gap: 1.5rem; grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 1024px) { .plans-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.plan               { display: flex; flex-direction: column; padding: 1.5rem; }
@media (min-width: 640px) { .plan { padding: 2rem; } }
.plan--best         { box-shadow: var(--shadow-card), inset 0 0 0 1px var(--primary); }   /* the credits page's "Most chosen" edge: a full navy ring, never a bar */
.plan__head         { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; min-height: 1.75rem; }
.plan__price        { margin-top: 1.25rem; }
.plan__amount       { display: flex; align-items: baseline; gap: 0.375rem; }
.plan__amount::after { content: "\200b"; font-size: var(--text-subheading); font-weight: 600; } /* "Free" has no RM; this keeps its line as tall as the paid plans' so the credits cards line up (CP 17 Oct) */
.plan__currency     { font-size: var(--text-subheading); font-weight: 600; color: var(--muted-foreground); }
.plan__value        { font-family: var(--font-display); font-size: var(--text-display-lg); font-weight: 700; line-height: 1; letter-spacing: -0.5px; color: var(--primary); font-variant-numeric: tabular-nums; }
.plan__unit         { font-size: var(--text-body); font-weight: 500; color: var(--muted-foreground); }
.plan__billing      { margin-top: 0.625rem; font-size: var(--text-caption); line-height: 1.5; color: var(--muted-foreground); }
.plan__billing strong { color: var(--foreground); font-weight: 600; white-space: nowrap; }   /* "Save RM 168" never splits across a line */
.plan__credits      { margin-top: 1.25rem; padding: 0.875rem 1.125rem; border-radius: var(--radius-md); background: var(--navy-50); color: var(--primary); } /* sheet info alert surface */
.plan__credits-label { font-size: var(--text-overline); font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; }
.plan__credits-value { margin-top: 0.25rem; font-family: var(--font-display); font-size: var(--text-heading); font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.plan__credits-note { margin-top: 0.125rem; font-size: var(--text-caption); line-height: 1.5; }
.plan__features     { margin-top: 1.5rem; flex: 1; gap: 0.75rem; }
.plan__features li  { color: var(--foreground); font-weight: 500; line-height: 1.45; }
.plan__detail       { display: block; margin-top: 0.125rem; font-size: var(--text-body-sm); font-weight: 400; line-height: 1.5; color: var(--muted-foreground); }
.plan__cta          { margin-top: 1.75rem; }
/* Desktop: the three cards share one set of rows (CSS subgrid), so the feature rows line up across cards
   however many lines a row wraps to (CP 18 Oct, HANDOFF 247). Rows: head, price, credits, 8 feature rows, button.
   ponytail: 8 feature rows is Pro's count; a card with a 9th row needs both spans raised by one. */
@media (min-width: 1024px) {
  .plans-grid     { row-gap: 0; }
  .plan           { display: grid; grid-row: span 12; grid-template-rows: subgrid; row-gap: 0; }
  .plan__features { display: grid; grid-row: span 8; grid-template-rows: subgrid; row-gap: 0.75rem; align-content: start; }
  .plan__cta      { align-self: end; }
}


/* 4. Comparison: heading and view toggle on one row; the table's row labels are body weight, not the uppercase column head. */
.plans-compare__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.plans-table tbody th {
  text-align: left; text-transform: none; letter-spacing: 0; background: none; border-bottom: 0;
  padding: 0.875rem 1.125rem; vertical-align: top; line-height: 1.6; border-top: 1px solid var(--grey-100);
  font-size: var(--text-body-sm); font-weight: 600; color: var(--foreground);
}
/* Group label rows: Your profile, Getting work, Growing your business (CP 18 Oct, HANDOFF 245, 250): span the row, sentence case, on a grey band so the rows under each read as one set */
.plans-table tbody .plans-table__group th { background: var(--grey-50); color: var(--muted-foreground); font-size: var(--text-caption); padding-top: 0.625rem; padding-bottom: 0.625rem; }
.plans-table__note  { display: block; font-size: var(--text-caption); font-weight: 400; color: var(--muted-foreground); }
.plans-table td     { font-weight: 500; color: var(--foreground); }
.plans-table td.not { font-weight: 400; }
.plans-table .tick  { margin-top: 0.125rem; }
.plans-compare .table-wrap { contain: layout; } /* phones: without this, Chrome widens the layout viewport to the table's 36rem min-width although the wrapper scrolls (cause not pinned; invoice and admin tables do not trigger it). Verified in headless Chrome mobile emulation, 20 Sep. */
.plans-summary      { margin-top: 2rem; }

/* ---------- Plan checkout (pages/checkout.html, 21 Sep 2026, M4) and the credits page's return states ---------- */
/* States by query, the engagement.css pattern: <main> carries data-plan / data-billing / data-state in its markup
   (app.js block 34 overwrites them from the query string); each view block carries the matching data-*-view and
   only the match shows. `revert` hands the element its own display (span inline, div block, tr table-row), so
   never put a view attribute on a flex element; wrap its content instead. Sean: one state per route, delete the rest. */
.checkout [data-state-view], .checkout [data-plan-view], .checkout [data-billing-view],
main.credits [data-state-view] { display: none; }
.checkout[data-state="new"]          [data-state-view="new"],
.checkout[data-state="upgrade"]      [data-state-view="upgrade"],
.checkout[data-state="paid"]         [data-state-view="paid"],
.checkout[data-state="paid-upgrade"] [data-state-view="paid-upgrade"],
.checkout[data-plan="growth"]        [data-plan-view="growth"],
.checkout[data-plan="pro"]           [data-plan-view="pro"],
.checkout[data-billing="annual"]     [data-billing-view="annual"],
.checkout[data-billing="monthly"]    [data-billing-view="monthly"],
main.credits[data-state="idle"]      [data-state-view="idle"],
main.credits[data-state="paid"]      [data-state-view="paid"],
main.credits[data-state="pending"]   [data-state-view="pending"],
main.credits[data-state="cancelled"] [data-state-view="cancelled"] { display: revert; }
/* Layout (Fiverr Seller Plus checkout, CP 21 Sep): content left, a sticky summary rail right from 1024px. */
.checkout-layout      { display: grid; gap: 1.5rem; grid-template-columns: 1fr; margin-top: 1.5rem; align-items: start; }
@media (min-width: 1024px) { .checkout-layout { grid-template-columns: minmax(0, 1fr) 26rem; gap: 2.5rem; } }
.checkout-layout > *  { min-width: 0; }
.checkout-main h1     { margin: 0; }
.checkout-h2          { display: flex; align-items: baseline; gap: 0.75rem; margin: 2.5rem 0 0; }
.checkout-h2__link    { font-weight: 500; color: var(--secondary); }
@media (min-width: 1024px) { .checkout-rail { position: sticky; top: 6rem; } }
/* Plan card: name and billing pill, price line, the full feature list (CP 21 Sep: no +N more). */
.checkout-plan        { margin-top: 1rem; padding: 1.5rem; }
.checkout-plan__head  { display: flex; align-items: center; gap: 0.625rem; flex-wrap: wrap; }
.checkout-plan__head h2 { margin: 0; }
.checkout-plan__price { margin-top: 0.75rem; font-size: var(--text-body); color: var(--muted-foreground); }
.checkout-plan__price strong { color: var(--foreground); font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 600; }
.checkout-plan__label { margin-top: 1.25rem; font-weight: 600; }
.checkout-plan__list  { margin-top: 0.75rem; gap: 0.625rem; }
/* Payment methods: one card, hairline rows, the chosen row opens its panel. Details are entered on Billplz. */
.checkout-methods     { margin-top: 1rem; padding: 0; overflow: hidden; }
.paymethod + .paymethod { border-top: 1px solid var(--grey-100); }
.paymethod__row       { display: flex; align-items: center; gap: 0.875rem; padding: 1.125rem 1.5rem; cursor: pointer; }
.paymethod__row input { margin: 0; width: 1.25rem; height: 1.25rem; accent-color: var(--primary); flex-shrink: 0; }
.paymethod__name      { font-weight: 500; }
.paymethod__brands    { display: flex; gap: 0.375rem; margin-left: 0.25rem; }
.paymethod__panel     { display: none; padding: 0 1.5rem 1.25rem 3.625rem; font-size: var(--text-body-sm); color: var(--muted-foreground); background: var(--grey-50); border-top: 1px solid var(--grey-100); }
.paymethod:has(input:checked) .paymethod__panel { display: block; padding-top: 1rem; }
.checkout-billing     { margin-top: 0.75rem; line-height: 1.6; }
/* Rail: total, button, agreement line, safe line, rule, price summary, foot total, renewal note. */
.checkout-summary     { padding: 1.5rem; }
.checkout-summary__total { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: var(--text-subheading); font-weight: 600; }
.checkout-summary__total .mono { font-variant-numeric: tabular-nums; }
.checkout-summary__total--foot { font-size: var(--text-body); margin-top: 0.875rem; padding-top: 0.875rem; border-top: 1px solid var(--grey-200); }
.checkout-summary .btn-block { margin-top: 1rem; }
.checkout-summary__terms { margin-top: 0.875rem; font-size: var(--text-body-sm); color: var(--muted-foreground); line-height: 1.55; }
.checkout-summary__terms a { color: var(--foreground); text-decoration: underline; text-underline-offset: 2px; }
.checkout-summary__safe { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.875rem; font-size: var(--text-body-sm); font-weight: 500; }
.checkout-summary__safe svg { width: 1.125rem; height: 1.125rem; color: var(--primary); flex-shrink: 0; }
.checkout-summary__rule { margin: 1.25rem 0; border: 0; border-top: 1px solid var(--grey-200); }
.checkout-summary__label { margin: 0; font-family: var(--font-sans); font-size: var(--text-body); font-weight: 600; letter-spacing: 0; }
.checkout-summary__rows { display: grid; gap: 0.625rem; margin: 0.875rem 0 0; font-size: var(--text-body-sm); }
.checkout-summary__rows > div { display: flex; justify-content: space-between; gap: 1rem; }
.checkout-summary__rows dt { color: var(--muted-foreground); }
.checkout-summary__rows dd { margin: 0; text-align: right; white-space: nowrap; }
.checkout-summary__note { margin-top: 0.875rem; font-size: var(--text-body-sm); color: var(--muted-foreground); line-height: 1.55; }
/* Foot strip under both columns. */
.checkout-foot        { display: grid; gap: 1.25rem; grid-template-columns: 1fr; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--grey-200); font-size: var(--text-body-sm); color: var(--muted-foreground); }
@media (min-width: 768px) { .checkout-foot { grid-template-columns: 1fr 1fr; } }
.checkout-foot p      { display: flex; gap: 0.75rem; margin: 0; line-height: 1.55; }
.checkout-foot p svg  { width: 1.5rem; height: 1.5rem; flex-shrink: 0; color: var(--foreground); }
.checkout-foot strong { color: var(--foreground); font-weight: 600; }
.checkout-foot a      { color: var(--foreground); text-decoration: underline; text-underline-offset: 2px; }
.checkout-foot p.checkout-foot__legal { grid-column: 1 / -1; display: block; font-size: var(--text-caption); }

/* 3. How credits work (21 Sep 2026, copy sheet v1; reworked 17 Oct, CP). Heading and a full-width lead, then one card:
   two equal route panels (a real 17px header, steps stacked as plain lines with the credit numerals in navy-50 badges,
   the board's refund rule as a muted note, the total pinned to the panel bottom so both totals line up), then the
   "Always free" label and the three free actions as chips on components.css .chip-static. */
.plans-credits__lead  { font-size: var(--text-body-lg); line-height: 1.7; }   /* full width: no cap (CP 17 Oct, copy runs one line) */
.plans-routes__grid   { display: grid; gap: 1.25rem; }
@media (min-width: 768px) { .plans-routes__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; } }
.plans-route          { display: flex; flex-direction: column; padding: 1.25rem 1.5rem; border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--grey-200); }
.plans-route__title   { font-size: var(--text-subheading); font-weight: 600; color: var(--foreground); }
.plans-route__steps   { margin: 0.75rem 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.75rem; font-size: var(--text-body-sm); line-height: 1.5; color: var(--foreground); }
.plans-route__note    { margin-top: 0.75rem; font-size: var(--text-caption); line-height: 1.5; color: var(--muted-foreground); }
.plans-route__sum     { margin-top: auto; padding-top: 1rem; }
.plans-credit         { display: inline-block; padding: 0.125rem 0.5rem; border-radius: var(--radius-sm); background: var(--navy-50); color: var(--primary); font-weight: 700; font-size: var(--text-body); font-variant-numeric: tabular-nums; line-height: 1.4; }
.plans-free           { margin-top: 1.25rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.plans-free__label    { font-size: var(--text-body-sm); font-weight: 600; color: var(--foreground); }
.plans-free .chips    { margin: 0; padding: 0; list-style: none; gap: 0.5rem 1.25rem; }
.plans-free .chip     { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0; background: none; box-shadow: none; border: 0; color: var(--foreground); } /* plain tick + text, no pill (CP 17 Oct) */
.plans-free .chip svg { width: 0.75rem; height: 0.75rem; flex: none; color: var(--primary); }

/* Renewal note by payment method (CP 5 Oct 2026): card = Billplz charges the stored card at renewal,
   FPX = a payment link per cycle. Each state's .checkout-layout holds its own radios and summary. */
.checkout [data-method-view] { display: none; }
.checkout-layout:has(input[value="fpx"]:checked)  [data-method-view="fpx"],
.checkout-layout:has(input[value="card"]:checked) [data-method-view="card"] { display: inline; }