/* ============================================================
   pricing.css: the /pricing compositions (spec 060, slice S13). Linked by pricing.html only,
   after tokens.css and the shared vy-base / vy-controls / vy-components / vy-site sheets.

   Only what /pricing alone has lives here: the layout of the hero, the CSS-only audience
   switch, the plan grid, the comparison table's cells, the business card, the FAQ columns and
   the closing band's contents. Every look comes from a shared recipe, so an owner edit to it
   lands on this page too: the tier card (.vy-tier), the note (.vy-note), the table (.vy-table),
   the chips (.tag), the eyebrow, the section band (.sec.alt), the dark band (.cta), the tabs,
   the accordion, the buttons and the screen-reader text. Where pricing-page.test.mjs pins an
   element's class attribute (the plan and business CTAs) or counts a bare <details> (the FAQ),
   the recipe names the ld-* class in its adopter list instead of the markup taking a class.

   Values come from tokens.css; this file defines none. The rules keep vy-site.css's
   one-rule-per-line form.
   ============================================================ */

/* ---------- hero ---------- */
.ld-price-hero{padding:112px 0 64px}
.ld-price-hero .wrap{text-align:center}
.ld-price-hero h1{font-size:var(--text-display);line-height:1.1;letter-spacing:-.02em;margin:14px auto 16px}
.ld-em{font-style:normal;color:var(--accent)}
.ld-pricing-sub{max-width:60ch;margin:0 auto;font-size:var(--text-lead);line-height:var(--leading-body);color:var(--text)}
.ld-price-preview{max-width:640px;margin:24px auto 0;text-align:left}

/* ---------- audience switch: the tabs recipe, driven by the hidden radios ----------
   Both radios stay siblings of .ld-aud and the two panels, before them (the ~ selectors). */
.ld-aud-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.ld-aud{width:fit-content;margin:36px auto 32px;justify-content:center}
.ld-aud-opt{display:inline-flex;align-items:center;cursor:pointer}
.ld-aud-biz-wrap{display:none}
#ld-aud-biz:checked~.ld-aud-self-wrap{display:none}
#ld-aud-biz:checked~.ld-aud-biz-wrap{display:block}
/* D26: 44 px touch targets; a mouse keeps the tab height of the recipe. */
@media(pointer:coarse){.ld-aud-opt{min-height:44px}}

/* ---------- plans ---------- */
.ld-aud-self-wrap{text-align:left}
.ld-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gap);align-items:stretch}
.ld-plan{position:relative;display:flex;flex-direction:column}
.ld-plan-flag{position:absolute;top:-11px;left:22px}
.ld-plan-tier{font-size:var(--text-2xl);font-weight:var(--weight-strong);line-height:1.15;letter-spacing:-.015em;color:var(--ink)}
.ld-plan-line{font-size:var(--text-base);line-height:var(--leading-normal);color:var(--text)}
.ld-price{display:grid;justify-items:start;gap:6px;margin:4px 0 8px;padding-top:16px;border-top:1px solid var(--ring)}
.ld-price-val{font-size:var(--text-lg);font-weight:var(--weight-strong);line-height:1.3;color:var(--ink)}
.ld-price-cad{font-size:var(--text-sm);color:var(--muted)}
.ld-plan-cta{margin-top:auto;width:100%}
@media(max-width:900px){.ld-plans{grid-template-columns:minmax(0,1fr);gap:20px}}

/* ---------- comparison ---------- */
.ld-compare{margin-top:72px}
.ld-compare-h{font-size:var(--text-3xl);line-height:1.15;letter-spacing:-.015em;text-align:center}
.ld-compare-sub{max-width:60ch;margin:10px auto 28px;font-size:var(--text-md);line-height:var(--leading-body);color:var(--text);text-align:center}
/* The scroller contains the table's screen-reader words: absolutely placed, they would otherwise
   stretch the page from their spot inside the scrolled table. */
.ld-compare-scroll{position:relative}
.ld-compare-table{min-width:640px}
.ld-compare-table thead th{color:var(--ink);font-size:var(--text-ui);font-weight:var(--weight-strong)}
.ld-compare-table thead .ld-ct-cap{color:var(--muted)}
.ld-compare-table thead .ld-ct-h-feat{color:var(--accent)}
.ld-compare-table tbody th[scope="row"]{background:none;color:var(--ink);font-size:var(--text-ui);font-weight:var(--weight-regular)}
.ld-compare-table .ld-ct-group th{padding-top:16px;font-weight:var(--weight-strong)}
.ld-compare-table td b{font-weight:var(--weight-strong);color:var(--ink)}
.ld-ct-yes{color:var(--ok);font-weight:var(--weight-strong)}
.ld-plans-note{max-width:80ch;margin-top:24px;font-size:var(--text-ui);line-height:var(--leading-normal);color:var(--muted)}
.ld-plans-note+.ld-plans-note{margin-top:8px}

/* ---------- business ---------- */
.ld-biz-card{display:grid;justify-items:center;gap:12px;max-width:640px;margin:8px auto 0;padding:40px 32px}
.ld-biz-title{font-size:var(--text-xl);font-weight:var(--weight-strong);line-height:1.3;color:var(--ink)}
.ld-biz-line{max-width:52ch;margin-bottom:8px;font-size:var(--text-base);line-height:var(--leading-body)}
/* D26: at a larger browser font the one-line button outgrew the card on a 320 px phone, so there its words
   wrap. The width is in em like vy-site.css's header rule: 256 px at the default 16 px, narrower than any
   phone, so the button keeps its one line there; 384 px at 24 px. */
@media(max-width:16em){.ld-biz-cta{white-space:normal;text-align:center}}

/* ---------- FAQ: the aside and the accordion side by side ---------- */
.ld-faq-section .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:48px;align-items:start}
.ld-faq-aside{margin:0}
.ld-faq-cta{display:inline-block;margin-top:12px;font-size:var(--text-ui)}
@media(pointer:coarse){.ld-faq-cta{display:inline-flex;align-items:center;min-height:44px}}
.ld-faq>details>p{max-width:64ch}
@media(max-width:900px){.ld-faq-section .wrap{grid-template-columns:1fr;gap:16px}}

/* ---------- closing band: the contents of the dark .cta band ---------- */
.ld-final-mark{width:64px;height:31px;margin:0 auto 6px;color:var(--dark-muted)}
.ld-cta-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px}
.ld-final-signin{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:var(--radius-pill);font-size:var(--text-base);color:var(--dark-text);transition:color .2s}
.ld-final-signin:hover{color:var(--dark-heading)}