/* Dark is the default palette. Light is applied either by an explicit choice
   (:root[data-theme="light"], set by the header toggle) or — for "auto" — when
   the OS prefers light AND no explicit dark choice is in effect. The toggle
   script sets data-theme to light/dark and removes it for auto. */
:root{color-scheme:dark;
--bg:#0b0c10;--card:#15171e;--ink:#e8eaf0;--muted:#9aa0ad;--line:#262a36;
--accent:#5f7fc4;--accent-rgb:95,127,196;--gold:#d4af37;--silver:#aab2c0;--bronze:#b08d57;--red:#e2533b;--ok:#3fb27f;
--header-bg:rgba(11,12,16,.92);--hover:rgba(255,255,255,.04);--accent-soft:rgba(var(--accent-rgb),.10)}
:root[data-theme="light"]{color-scheme:light;
--bg:#f6f7f9;--card:#ffffff;--ink:#1b1f27;--muted:#5b6473;--line:#e4e7ec;
--accent:#3f63c4;--accent-rgb:63,99,196;--gold:#8a6d1f;--silver:#5e6675;--bronze:#7d5f34;--red:#c5341e;--ok:#1f9d63;
--header-bg:rgba(246,247,249,.85);--hover:rgba(0,0,0,.05);--accent-soft:rgba(var(--accent-rgb),.09)}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){color-scheme:light;
--bg:#f6f7f9;--card:#ffffff;--ink:#1b1f27;--muted:#5b6473;--line:#e4e7ec;
--accent:#3f63c4;--accent-rgb:63,99,196;--gold:#8a6d1f;--silver:#5e6675;--bronze:#7d5f34;--red:#c5341e;--ok:#1f9d63;
--header-bg:rgba(246,247,249,.85);--hover:rgba(0,0,0,.05);--accent-soft:rgba(var(--accent-rgb),.09)}}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);
font:16px/1.5 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
.wrap{max-width:1100px;margin:0 auto;padding:0 20px}
header.site{position:sticky;top:0;background:var(--header-bg);backdrop-filter:blur(8px);
border-bottom:1px solid var(--line);z-index:10}
header.site .wrap{display:flex;align-items:center;gap:16px;height:62px}
header.site .brand{font-weight:700;font-size:1.15rem}
header.site .count{color:var(--muted);font-size:.9rem}
/* Theme switch — icon-cycle button (inline SVG: monitor=auto / sun=light /
   moon=dark), pushed right. The SVG inherits the button color via currentColor.
   Hidden when JS is off (see the <noscript> rule injected in each page head). */
.theme-toggle{margin-left:auto;flex:none;width:34px;height:34px;display:inline-flex;
align-items:center;justify-content:center;cursor:pointer;position:relative;
background:transparent;color:var(--muted);border:1px solid var(--line);border-radius:9px;
transition:color .15s,border-color .15s,background .15s}
.theme-toggle svg{display:block;width:18px;height:18px}
.theme-toggle:hover{color:var(--ink);border-color:var(--muted);background:var(--hover)}
.theme-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Immediate tooltip — also shown on keyboard focus (the accessible name lives on
   aria-label; this is the visual affordance). Anchored to the button's right edge
   so it can't overflow the viewport, and below the sticky header so it's not
   clipped. data-tip is kept current by the theme script. */
.theme-toggle::after{content:attr(data-tip);position:absolute;top:calc(100% + 8px);right:0;
white-space:nowrap;background:var(--ink);color:var(--bg);font-size:.76rem;font-weight:500;
line-height:1;padding:6px 8px;border-radius:6px;pointer-events:none;z-index:20;
opacity:0;transform:translateY(-3px);transition:opacity .12s,transform .12s}
.theme-toggle:hover::after,.theme-toggle:focus-visible::after{opacity:1;transform:translateY(0)}
.controls{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:22px 0}
.controls input,.controls select{background:var(--card);color:var(--ink);
border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:.95rem}
.controls input[type=search]{flex:1;min-width:220px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;
padding:16px;display:flex;flex-direction:column;gap:10px;content-visibility:auto;
contain-intrinsic-size:170px}
.card .name{font-size:1.15rem;font-weight:650;word-break:break-all}
.card .name a{color:var(--ink)}
/* Name + intrinsic badges (tier, gTLD) on one row, like the detail head. */
.card-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px}
.pills{display:flex;gap:6px;flex-wrap:wrap}
.pill{font-size:.72rem;color:var(--muted);border:1px solid var(--line);
border-radius:999px;padding:2px 8px}
.tier-Gold{color:var(--gold)}.tier-Silver{color:var(--silver)}.tier-Bronze{color:var(--bronze)}
.tier-Bargain{color:var(--red)}
.price{margin-top:auto;font-size:1.05rem;font-weight:700}
.price .cur{color:var(--muted);font-weight:500;font-size:.85rem}
.btn{display:inline-block;background:var(--accent);color:#fff;border:0;border-radius:10px;
padding:11px 16px;font-size:.95rem;font-weight:600;cursor:pointer;text-align:center}
.btn:hover{filter:brightness(1.08);text-decoration:none}
.btn.secondary{background:transparent;color:var(--ink);border:1px solid var(--line)}
.pager{display:flex;justify-content:center;align-items:center;gap:6px;margin:28px 0;flex-wrap:wrap}
.page-num,.page-nav{min-width:38px;height:38px;padding:0 10px;display:inline-flex;
  align-items:center;justify-content:center;border:1px solid var(--line);background:var(--card);
  color:var(--ink);border-radius:10px;font:inherit;font-size:.95rem;cursor:pointer;
  transition:background .12s,border-color .12s}
.page-nav{font-size:1.25rem;line-height:1}
.page-num:hover:not(.is-current),.page-nav:hover:not([disabled]){border-color:var(--accent);background:var(--accent-soft)}
.page-num.is-current{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600;cursor:default}
.page-nav[disabled]{opacity:.4;cursor:not-allowed}
.page-gap{min-width:24px;text-align:center;color:var(--muted);user-select:none}
.page-num:focus-visible,.page-nav:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.empty{color:var(--muted);text-align:center;padding:60px 0}
.detail{max-width:760px;margin:40px auto}
.detail h1{font-size:2.2rem;margin:0 0 6px;word-break:break-all}
/* Name + intrinsic badges (tier, gTLD) share a baseline-aligned row right under
   the H1; the topical category .pills sit below. */
.detail-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 12px;margin:0 0 12px}
.detail-head h1{margin:0}
.name-badges{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.detail .lede{color:var(--muted);margin:0 0 18px}
/* Buy / Pay-monthly / Make-offer accordion (<details name=buybox>) */
.buybox{margin:22px 0;border:1px solid var(--line);border-radius:14px;
overflow:hidden;background:var(--card)}
.opt{border-top:1px solid var(--line)}
.opt:first-child{border-top:0}
.opt-head{display:flex;align-items:center;gap:12px;padding:16px 18px;cursor:pointer;
list-style:none;user-select:none;transition:background .15s}
.opt-head::-webkit-details-marker{display:none}
.opt-head:hover{background:var(--hover)}
.opt[open]>.opt-head{background:var(--accent-soft)}
.opt-head:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:8px}
.opt-title{font-weight:650;font-size:1.05rem}
.opt-val{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums}
.opt-val small{color:var(--muted);font-weight:500;font-size:.78em}
.opt-val--muted{color:var(--muted);font-weight:500}
.opt-chevron{flex:none;width:8px;height:8px;border-right:2px solid var(--muted);
border-bottom:2px solid var(--muted);transform:rotate(-45deg);
transition:transform .18s ease}
.opt[open]>.opt-head .opt-chevron{transform:rotate(45deg)}
/* one constrained content column so every control + CTA lines up to one width */
.opt-panel{padding:4px 18px 18px;display:flex;flex-direction:column;gap:14px;
align-items:stretch;max-width:460px}
.opt-note{color:var(--muted);margin:0}
.opt-panel>.btn{width:100%}
/* shared form controls: native <select>/<input>/<textarea>, consistently styled */
.ctl{width:100%;background:var(--bg);color:var(--ink);border:1px solid var(--line);
border-radius:10px;padding:11px 12px;font:inherit;font-size:.95rem}
.ctl::placeholder{color:var(--muted)}
.ctl:hover{border-color:var(--muted)}
.ctl:focus-visible,.ctl:focus{outline:none;border-color:var(--accent);
box-shadow:0 0 0 3px rgba(var(--accent-rgb),.22)}
textarea.ctl{resize:vertical;min-height:84px}
select.ctl{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:38px;
background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239aa0ad' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
background-repeat:no-repeat;background-position:right 13px center}
.lease-controls{display:flex;gap:12px;flex-wrap:wrap}
.lease-controls .field{flex:1;min-width:150px}
.field{display:flex;flex-direction:column;gap:6px}
.field-label{font-size:.85rem;font-weight:600;color:var(--ink)}
.field-hint{font-weight:400;color:var(--muted)}
/* Lease payment-schedule breakdown (built by detail.js / website.py twin) */
.lease-breakdown{margin:2px 0}
.lease-table{width:100%;border-collapse:collapse;font-size:.92rem}
.lease-table th,.lease-table td{padding:6px 0;font-weight:400;vertical-align:baseline}
.lease-table th{text-align:left;color:var(--muted)}
.lease-table td{text-align:right;color:var(--ink);font-variant-numeric:tabular-nums;
white-space:nowrap;padding-left:14px}
.lt-sub,.lt-per{color:var(--muted);font-weight:400;font-size:.82em}
.lt-schedule>tr:first-child>*{padding-top:14px}
.lt-total>*,.lt-due>*{border-top:1px solid var(--line);padding-top:10px;
color:var(--ink);font-weight:700}
.lt-note{color:var(--muted);font-size:.8rem;margin:10px 0 0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Bundle & save (Spec D) */
.bundle{margin:18px 0;border:1px solid var(--line);border-radius:14px;
background:var(--card);padding:16px 18px}
.bundle-h{font-size:1.05rem;font-weight:650;margin:0 0 4px}
.bundle-sub{color:var(--muted);font-size:.88rem;margin:0 0 12px}
.bundle-row{display:flex;align-items:center;gap:10px;padding:9px 0;
border-top:1px solid var(--line)}
.bundle-cb{width:18px;height:18px;accent-color:var(--accent);cursor:pointer;flex:none}
.bundle-cb:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
a.bundle-name{font-weight:600;word-break:break-all;color:var(--ink);text-decoration:none}
a.bundle-name:hover{color:var(--accent);text-decoration:underline}
.bundle-price{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--ink);font-weight:600}
.bundle-row.is-offer a.bundle-name{color:var(--muted);font-weight:500}
.bundle-summary{margin:12px 0 0;color:var(--ok);font-weight:600;font-size:.9rem}
.bundle-summary:empty{margin:0}  /* reserve no space until a bundle is selected */
.lease-teaser{display:block;color:var(--muted);font-size:.8rem;font-weight:500;margin-top:2px}
.btn[disabled]{opacity:.45;cursor:not-allowed;filter:none}
.btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.trust{margin-top:28px;padding-top:18px;border-top:1px solid var(--line);color:var(--muted);
font-size:.9rem}.trust b{color:var(--ink)}
/* Make-offer form + masked currency field */
.offer{display:flex;flex-direction:column;gap:14px;margin:0;width:100%;max-width:none}
/* segmented money input: $ prefix · number · attached −/+ $100 steppers */
.money{display:flex;align-items:stretch;background:var(--bg);border:1px solid var(--line);
border-radius:10px;overflow:hidden;transition:border-color .15s,box-shadow .15s}
.money:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.22)}
.money-sym{display:flex;align-items:center;padding:0 2px 0 12px;color:var(--muted);
font-size:1.05rem;font-weight:600}
/* The offer amount matches the other form controls (a hair larger to mark the
   primary field), not the oversized display type it used to be. */
.money-input{flex:1;min-width:0;background:transparent;border:0;outline:none;color:var(--ink);
font-size:1.05rem;font-weight:600;font-variant-numeric:tabular-nums;padding:11px 8px}
.money-input::placeholder{color:var(--muted);font-weight:500}
/* Stacked ▲/▼ spinner (like a native number control) — steps by $100. */
.money-spin{display:flex;flex-direction:column;flex:none;width:32px;border-left:1px solid var(--line)}
.money-step{flex:1;display:flex;align-items:center;justify-content:center;border:0;padding:0;
background:var(--card);color:var(--muted);cursor:pointer;transition:background .12s,color .12s}
.money-step:first-child{border-bottom:1px solid var(--line)}
.money-step svg{display:block;width:12px;height:12px}
.money-step:hover{background:var(--accent);color:#fff}
.money-step:active{filter:brightness(.92)}
.money-step:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.money-hint{color:var(--muted);font-size:.8rem;margin:0}
.money-err{color:var(--red);font-size:.8rem;font-weight:500;margin:0}
.offer.is-invalid .money{border-color:var(--red)}
.offer.is-invalid .money:focus-within{box-shadow:0 0 0 3px rgba(226,83,59,.2)}
/* Optional payment-plan affordance inside the offer form (Spec C). Hidden until
   detail.js sees the entered offer clears the LTO floor; the breakdown reuses
   the .lease-table / .lease-controls styling from the Pay-monthly panel. */
.offer-plan{margin:2px 0}
.offer-plan-toggle{display:flex;align-items:center;gap:8px;font-size:.9rem;
color:var(--ink);cursor:pointer;user-select:none}
.offer-plan-toggle input{width:16px;height:16px;flex:none;accent-color:var(--accent);cursor:pointer}
.offer-plan-body{margin-top:12px;display:flex;flex-direction:column;gap:12px}
/* explicit display defeats the [hidden] attribute — restore it so unchecking
   "Pay over time" collapses the panel instead of leaving it stale */
.offer-plan-body[hidden]{display:none}
/* International phone control (phone.js): country <select> beside the number.
   Both reuse .ctl; the country column is sized to its dial-code content. */
.tel{display:flex;gap:8px}
.tel-country{flex:0 0 auto;max-width:46%;min-width:6.5rem}
.tel-number{flex:1;min-width:0}
.tel-err{color:var(--red);font-size:.8rem;font-weight:500;margin:0}
/* Two fields side by side (first/last name, company/position); stacks on narrow. */
.field-row{display:flex;gap:12px;flex-wrap:wrap}
.field-row .field{flex:1;min-width:150px}
/* Inline field error + invalid-field border, shared by every validated .ctl. */
.field-err{color:var(--red);font-size:.8rem;font-weight:500;margin:0}
.ctl[aria-invalid="true"]{border-color:var(--red)}
.pricing-note{color:var(--muted);font-size:.82rem;margin:10px 0 0;max-width:560px}
.pricing-note strong{color:var(--ink)}
footer.site{color:var(--muted);font-size:.85rem;text-align:center;margin:50px 0 30px}
footer.site a{color:var(--muted);text-decoration:underline}
footer.site a:hover{color:var(--ink)}
.legal{max-width:760px;margin:32px auto;line-height:1.6}
.legal h1{font-size:1.8rem;margin:0 0 16px}
.legal h2{font-size:1.15rem;margin:26px 0 8px}
.legal .callout{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--accent);
border-radius:10px;padding:14px 16px}
.legal .legal-caps{font-size:.82rem;letter-spacing:.01em;color:var(--muted)}
.legal-banner{display:flex;gap:10px;flex-wrap:wrap;align-items:center;
margin:0 0 22px;padding-bottom:14px;border-bottom:1px solid var(--line);font-size:.85rem}
.legal-ver{font-weight:700}.legal-eff{color:var(--muted)}
.legal-status{margin-left:auto;border:1px solid var(--line);border-radius:999px;padding:2px 10px;font-size:.78rem}
.legal-status.is-current{color:var(--ok);border-color:var(--ok)}
.legal-status.is-superseded{color:var(--muted)}
.legal-fingerprint{margin-top:26px;color:var(--muted);font-size:.78rem;word-break:break-all}
.legal-fingerprint code{color:var(--ink)}
.legal-history{margin-top:30px;padding-top:18px;border-top:1px solid var(--line)}
.legal-history h2{font-size:1.05rem}
.legal-history ul{padding-left:18px}.legal-history li{margin:4px 0}
.legal-hash{color:var(--muted);font-family:ui-monospace,monospace;font-size:.78rem}
.legal-note{color:var(--muted);font-size:.8rem;font-style:italic;margin-top:24px}

/* Direct purchase (wire/Zelle, Spec H) */
.direct-methods{display:flex;gap:16px;margin-top:4px}
.direct-method{display:flex;align-items:center;gap:6px;font-size:.95em}
.cf-turnstile{margin:10px 0}
#direct docuseal-form{display:block;margin-top:10px;min-height:480px}