/* ============================================================================
   Pricing (pricing.html). Page-local styles. Shared tokens/components: forge.css.
   Grammar: dense ledger. Anchors: hero lead (plans under it), finder split 5/7,
   comparison full-width ledger, billing split with the heading trailing.
   ========================================================================== */

/* ---------------------------------------------------------------- hero -- */
.phero { padding: calc(var(--nav-h) + clamp(2.5rem, 7vh, 5rem)) 0 var(--s-8); position: relative; }
.phero__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--s-6); align-items: end; margin-bottom: clamp(2rem, 5vh, 3.25rem); }
.phero__head .d-hero { font-size: clamp(2.6rem, 1.2rem + 4.6vw, 5.75rem); max-width: 14ch; }
.phero__head .nw { white-space: nowrap; }
.phero__side { display: grid; gap: var(--s-4); justify-items: start; padding-bottom: 0.4em; }
.phero__side .lede { max-width: 34ch; }
.phero__fine { display: flex; align-items: center; gap: 8px; margin-top: var(--s-5); color: var(--ink-3); }
.phero__fine .i { width: 15px; height: 15px; }

/* plan cards: the fit state set by the finder */
.plan { transition: opacity var(--d-3) var(--ease-out), border-color var(--d-3) var(--ease-out), transform var(--d-3) var(--ease-out); scroll-margin-top: calc(var(--nav-h) + 40px); }
.plan__name { font-size: var(--t-base); }
.plan__fit { position: absolute; top: var(--s-5); right: var(--s-5); opacity: 0; transform: translateY(-4px); transition: opacity var(--d-2) var(--ease-out), transform var(--d-2) var(--ease-out); }
.plans.has-fit .plan:not(.is-fit) { opacity: 0.5; }
.plans.has-fit .plan.is-fit { border-color: var(--accent-text); transform: translateY(-4px); box-shadow: var(--e3), var(--edge); }
.plan.is-fit .plan__fit { opacity: 1; transform: none; }
.plan.is-fit .plan__flag { opacity: 0; }
.plan__flag { transition: opacity var(--d-2) var(--ease-out); }
.plan.is-flash { animation: fit-flash 1100ms var(--ease-out); }
@keyframes fit-flash { 0% { outline: 2px solid var(--accent-text); outline-offset: 10px; } 100% { outline: 2px solid transparent; outline-offset: 2px; } }

/* -------------------------------------------------------------- finder -- */
.finder { padding-block: var(--section); }
.finder__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8); align-items: start; }
.finder__intro .body { margin-top: var(--s-5); max-width: 36ch; }
.finder__art { width: min(380px, 80%); height: auto; margin-top: var(--s-6); margin-left: -6%; mix-blend-mode: lighten;
  -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent 100%); mask-image: radial-gradient(closest-side, #000 62%, transparent 100%); }
:root[data-theme="light"] .finder__art { mix-blend-mode: multiply; margin-left: -4%; filter: invert(1) hue-rotate(180deg) saturate(1.3); }

.finder__form { display: grid; gap: var(--s-6); padding: clamp(1.25rem, 0.9rem + 1.4vw, 2.5rem); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--e2), var(--edge); }
.q { margin: 0; padding: 0; border: 0; min-width: 0; }
.q__hint { margin-top: var(--s-2); color: var(--ink-3); }
.q__legend { padding: 0; margin-bottom: var(--s-3); font-weight: 600; font-size: var(--t-lg); letter-spacing: -0.015em; color: var(--ink); }
.seg { display: flex; flex-wrap: wrap; gap: 6px; padding: 5px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); }
.seg label { position: relative; flex: 1 1 0; min-width: max-content; }
.seg input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.seg span { display: flex; align-items: center; justify-content: center; height: 44px; padding: 0 16px; border-radius: var(--r-sm); font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); white-space: nowrap; transition: background-color var(--d-2) var(--ease-out), color var(--d-2) var(--ease-out), transform var(--d-1) var(--ease-out); pointer-events: none; }
.seg input:checked + span { background: var(--accent); color: var(--accent-ink); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.2), var(--e1); }
.seg input:focus-visible + span { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.seg label:active span { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .seg input:not(:checked):hover + span { color: var(--ink); background: color-mix(in oklab, var(--ink) 6%, transparent); } }

.verdict { padding-top: var(--s-6); border-top: 1px solid var(--line); min-height: 4.5em; }
.verdict__sentence { font-family: var(--f-display); font-weight: 560; font-size: var(--t-xl); line-height: 1.25; letter-spacing: -0.025em; color: var(--ink-3); text-wrap: balance; }
.verdict__sentence b { font-weight: 640; color: var(--ink); }
.verdict__pick { margin-top: var(--s-5); animation: verdict-in var(--d-3) var(--ease-out); }
.verdict__plan { display: flex; align-items: baseline; gap: var(--s-4); }
.verdict__plan b { font-family: var(--f-display); font-weight: 600; font-size: var(--t-3xl); letter-spacing: -0.035em; line-height: 1; color: var(--ink); }
.verdict__plan span { color: var(--ink-2); font-size: var(--t-base); }
.verdict__why { margin-top: var(--s-3); color: var(--ink-2); max-width: 52ch; }
.verdict__note { margin-top: var(--s-2); color: var(--ink-3); }
.verdict .btn-row { margin-top: var(--s-5); }
.verdict__reset { margin-left: var(--s-2); color: var(--ink-3); min-height: 44px; }
@keyframes verdict-in { from { opacity: 0; transform: translateY(8px); } }

/* ------------------------------------------------------------- compare -- */
.compare { padding-block: var(--section); }
.compare__head { display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap; gap: var(--s-5); margin-bottom: var(--s-7); }
.compare__head .body { max-width: 34ch; }
.ledger { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: var(--t-sm); }
.ledger__feat { width: 40%; }
.ledger thead th { position: sticky; top: calc(var(--nav-h) + 6px); z-index: 2; padding: 14px 12px; text-align: center; vertical-align: bottom; background: var(--bg); border-bottom: 1px solid var(--line-2); }
.ledger thead th:first-child { text-align: left; }
.ledger__name { display: block; font-weight: 600; color: var(--ink); font-size: var(--t-base); }
.ledger__price { display: block; margin-top: 2px; font-family: var(--f-display); font-weight: 600; font-size: var(--t-xl); letter-spacing: -0.035em; color: var(--ink); }
.ledger__price small { font-family: var(--f-text); font-size: var(--t-xs); font-weight: 500; letter-spacing: 0; color: var(--ink-3); margin-left: 2px; }
.ledger th[scope="row"] { padding: 15px 12px 15px 0; text-align: left; font-weight: 500; color: var(--ink); border-bottom: 1px solid var(--line); }
.ledger th[scope="row"] small { display: block; margin-top: 2px; font-weight: 400; font-size: 0.8125rem; color: var(--ink-3); }
.ledger td { padding: 15px 12px; text-align: center; border-bottom: 1px solid var(--line); vertical-align: middle; }
.ledger td .i { width: 18px; height: 18px; margin-inline: auto; color: var(--accent-text); }
.ledger td.v { font-family: var(--f-display); font-weight: 620; font-size: var(--t-lg); letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.ledger td:nth-child(3), .ledger thead th:nth-child(3) { background-color: color-mix(in oklab, var(--accent) 6%, var(--bg)); }
.ledger tfoot td:nth-child(3) { border-radius: 0 0 var(--r-md) var(--r-md); }
.ledger thead th:nth-child(3) { border-radius: var(--r-md) var(--r-md) 0 0; }
.ledger__group th { padding: var(--s-6) 0 var(--s-3); text-align: left; font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--line-2); background: var(--bg); }
.ledger tfoot td { padding: var(--s-5) 8px; border-bottom: 0; }
.ledger tfoot .btn { width: 100%; max-width: 180px; gap: 0.3em; }
/* every plan includes: the full feature list under the limits table */
.incl { margin-top: var(--s-8); padding: var(--s-6); border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--e1), var(--edge); }
.incl__title { margin-bottom: var(--s-5); }
.incl__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: var(--s-4) var(--s-6); }
.incl__list li { display: flex; gap: 10px; min-width: 0; font-size: var(--t-sm); }
.incl__list .i { flex: none; width: 17px; height: 17px; margin-top: 3px; color: var(--accent-text); }
.incl__list b { display: block; font-weight: 600; color: var(--ink); }
.incl__list small { display: block; margin-top: 2px; font-size: 0.8125rem; color: var(--ink-3); }
.compare__fine { margin-top: var(--s-6); color: var(--ink-3); }
.compare__fine a { color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .ledger tbody tr:not(.ledger__group):hover th, .ledger tbody tr:not(.ledger__group):hover td { background-color: color-mix(in oklab, var(--ink) 3%, var(--bg)); } }

/* ------------------------------------------------------------- billing -- */
.billing { padding-block: var(--section); }
.billing__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--s-8); align-items: start; }
.billing__side { position: sticky; top: calc(var(--nav-h) + 40px); }
.billing__side .body { margin-top: var(--s-4); }
.billing__side a, .billing .faq__a a { color: var(--ink); }

/* -------------------------------------------------------------- phones -- */
@media (max-width: 980px) {
  .phero__head { grid-template-columns: 1fr; gap: var(--s-5); }
  .finder__grid, .billing__grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .finder__art { display: none; }
  .billing__side { position: static; order: -1; }
}
@media (max-width: 760px) {
  .phero { padding-top: calc(var(--nav-h) + 2rem); }
  .phero__head .d-hero { font-size: clamp(2.4rem, 10.6vw, 3.3rem); }
  .phero__side .lede { font-size: var(--t-base); }
  .plan { padding: var(--s-5); }
  .plan__for { min-height: 0; }
  .finder__form { padding: var(--s-5) var(--s-4); border-radius: var(--r-lg); }
  .seg span { padding: 0 10px; }
  .verdict__sentence { font-size: var(--t-lg); }
  .verdict .btn-row .btn:not(.btn--quiet) { flex: 1 1 100%; }
  .verdict__reset { margin: 0 auto; }
  .ledger { font-size: 0.8125rem; }
  .ledger__feat { width: 34%; }
  .ledger thead th { padding: 10px 4px; }
  .ledger__name { font-size: 0.75rem; }
  .ledger__price { font-size: var(--t-base); }
  .ledger__price small { display: none; }
  .ledger th[scope="row"] { padding-right: 8px; }
  .ledger th[scope="row"] small { display: none; }
  .ledger td { padding: 13px 4px; }
  .ledger td.v { font-size: var(--t-base); }
  .incl { padding: var(--s-5) var(--s-4); border-radius: var(--r-lg); }
  .ledger tfoot td { padding: var(--s-4) 3px; }
  .ledger tfoot .btn { padding: 0 6px; }
  .ledger__long { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .plan, .plan__fit, .verdict__pick { transition-duration: 1ms; animation: none; }
  .plans.has-fit .plan.is-fit { transform: none; }
  .plan.is-flash { animation: none; }
}