/* Hallmark · shape: app screen · genre: modern-minimal · theme: brand (catchonstv.com: DM Sans, red, orange, white)
 * nav: top bar with five tabs, a bottom tab bar under 48rem · signature: the plan box, each plan's paid time drawn as a track to its end date · states: loading, empty, error, full, trial, due, ended, paused, unknown, pending
 * axes: white/DM Sans/red · contrast: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S4 R4 V3 · weakest: V, it keeps the site's own look on purpose; the coverage track and the plan box carry the identity */
/* Hallmark · dismissed 74 · ink #0F172A is catchonstv.com's own --text-primary and footer colour since 2024, kept so these pages match the site */
/* Hallmark · dismissed 40 · .lg-points svg is an icon, 4.18:1 clears the 3:1 icon bar; button text uses the darker --ac-red at 5.09:1 */

/* Customer pages of catchonstv.com: /login (public) and /account (signed in). Loaded after style.css, whose
   tokens and DM Sans it reuses. Every colour below is a token; nothing past :root names a colour. */
:root {
  --ac-bg: #F6F7FB;
  --ac-surface: #FFFFFF;
  --ac-line: #E7EAF0;
  --ac-line-2: #D6DAE3;
  --ac-ink: #0F172A;
  --ac-ink-2: #334155;
  --ac-ink-3: #5B6B82;
  --ac-red: #D12E22;
  --ac-red-hover: #B91C1C;
  --ac-red-ink: #B91C1C;
  --ac-orange: #FF6105;
  --ac-ok: #047857;
  --ac-ok-soft: #E7F6EF;
  --ac-warn: #A44A06;
  --ac-warn-soft: #FFF4E2;
  --ac-bad: #B91C1C;
  --ac-bad-soft: #FDECEA;
  --ac-trial: #C2410C;
  --ac-trial-soft: #FFEFE6;
  --ac-muted-soft: #EEF1F6;
  --ac-navy: #0F172A;
  --ac-navy-2: #1E293B;
  --ac-on-navy: #FFFFFF;
  --ac-on-navy-2: #CBD5E1;
  --ac-focus: #1D4ED8;
  --ac-scrim: rgba(15, 23, 42, 0.45);
  --ac-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 6px 20px rgba(15, 23, 42, 0.06);
  --ac-shadow-up: 0 -1px 0 rgba(15, 23, 42, 0.08), 0 -6px 20px rgba(15, 23, 42, 0.06);
  --ac-font: var(--font-body, 'DM Sans', system-ui, sans-serif);
  --ac-t-xs: 0.8125rem;
  --ac-t-s: 0.875rem;
  --ac-t-m: 1rem;
  --ac-t-l: 1.125rem;
  --ac-t-xl: 1.375rem;
  --ac-t-2xl: 1.75rem;
  --ac-r: 12px;
  --ac-r-s: 8px;
  --ac-r-pill: 999px;
  --ac-dur: 0.15s;
  --ac-top-h: 64px;
  --ac-tabs-h: 64px;
}

html { overflow-x: clip; }

/* ── Shared controls ─────────────────────────────────────────────────────── */
.ac-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 8px 20px; border-radius: var(--ac-r-s);
  border: 1px solid var(--ac-red); background: var(--ac-red); color: var(--ac-on-navy);
  font: 600 var(--ac-t-m)/1.2 var(--ac-font); text-decoration: none; cursor: pointer;
  transition: background-color var(--ac-dur), border-color var(--ac-dur), transform var(--ac-dur);
}
.ac-btn:hover { background: var(--ac-red-hover); border-color: var(--ac-red-hover); color: var(--ac-on-navy); }
.ac-btn:active { transform: translateY(1px); }
.ac-btn:focus-visible, .ac-link:focus-visible, .ac-tab:focus-visible, .ac-iconbtn:focus-visible,
.ac-choice input:focus-visible + span, .ac-row-toggle:focus-visible, .ac-input:focus-visible, .ac-seg button:focus-visible,
.ac-switch input:focus-visible + span, .lg-switch:focus-visible, summary:focus-visible {
  outline: 3px solid var(--ac-focus); outline-offset: 2px; transition: none;
}
.ac-btn:disabled, .ac-btn[aria-disabled="true"], .ac-row-toggle:disabled, .ac-link:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.ac-btn[aria-busy="true"] { cursor: progress; }
.ac-btn[aria-busy="true"]::after {
  content: ""; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; animation: ac-spin 0.8s linear infinite;
}
.ac-btn--ghost { background: var(--ac-surface); color: var(--ac-ink); border-color: var(--ac-line-2); }
.ac-btn--ghost:hover { background: var(--ac-bg); color: var(--ac-ink); border-color: var(--ac-ink-3); }
.ac-btn--navy { background: var(--ac-navy); border-color: var(--ac-navy); }
.ac-btn--navy:hover { background: var(--ac-navy-2); border-color: var(--ac-navy-2); }
.ac-btn--wide { width: 100%; }
.ac-btn--s { min-height: 40px; padding: 8px 16px; font-size: var(--ac-t-s); }
.ac-btn svg, .ac-iconbtn svg, .ac-tab svg { width: 20px; height: 20px; flex: none; }

.ac-link {
  background: none; border: 0; padding: 8px 4px; min-height: 44px; cursor: pointer;
  font: 600 var(--ac-t-s)/1.3 var(--ac-font); color: var(--ac-red-ink); text-decoration: underline;
  text-underline-offset: 3px; display: inline-flex; align-items: center;
}
.ac-link:hover { color: var(--ac-ink); }

.ac-iconbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 44px; min-height: 44px; padding: 0 12px; border-radius: var(--ac-r-s);
  background: none; border: 1px solid transparent; color: var(--ac-ink-2); cursor: pointer;
  font: 600 var(--ac-t-s)/1 var(--ac-font); text-decoration: none;
}
.ac-iconbtn:hover { background: var(--ac-muted-soft); color: var(--ac-ink); }

.ac-field { display: grid; gap: 8px; margin-bottom: 16px; }
.ac-field label, .ac-label { font: 600 var(--ac-t-s)/1.3 var(--ac-font); color: var(--ac-ink); }
.ac-input {
  width: 100%; min-height: 48px; padding: 12px 16px; border-radius: var(--ac-r-s);
  border: 1px solid var(--ac-line-2); background: var(--ac-surface); color: var(--ac-ink);
  font: 400 var(--ac-t-m)/1.3 var(--ac-font);
  transition: border-color var(--ac-dur);
}
.ac-input:hover { border-color: var(--ac-ink-3); }
.ac-input:focus { border-color: var(--ac-focus); }
.ac-input[aria-invalid="true"] { border-color: var(--ac-bad); }
.ac-input::placeholder { color: var(--ac-ink-3); }
.ac-input--code { letter-spacing: 0.08em; font-variant-numeric: tabular-nums; font-size: var(--ac-t-l); }
.ac-hint { font: 400 var(--ac-t-s)/1.4 var(--ac-font); color: var(--ac-ink-3); margin: 0; min-height: 1.4em; }
.ac-hint--ok { color: var(--ac-ok); }
.ac-error { font: 500 var(--ac-t-s)/1.4 var(--ac-font); color: var(--ac-bad); margin: 0 0 12px; }
.ac-error:empty { display: none; }

.ac-chip {
  display: inline-flex; align-items: center; min-height: 28px; padding: 4px 12px; border-radius: var(--ac-r-pill);
  font: 600 var(--ac-t-xs)/1.2 var(--ac-font); background: var(--ac-muted-soft); color: var(--ac-ink-2); white-space: nowrap;
}
.ac-chip--ok { background: var(--ac-ok-soft); color: var(--ac-ok); }
.ac-chip--warn { background: var(--ac-warn-soft); color: var(--ac-warn); }
.ac-chip--bad { background: var(--ac-bad-soft); color: var(--ac-bad); }
.ac-chip--trial { background: var(--ac-trial-soft); color: var(--ac-trial); }

/* The coverage track: paid time left, drawn to the plan's end date. Fill moves by transform only. */
.ac-track { height: 8px; border-radius: var(--ac-r-pill); background: var(--ac-muted-soft); overflow: hidden; }
.ac-track > i {
  display: block; height: 100%; width: 100%; border-radius: inherit; background: var(--ac-ok);
  transform-origin: left center; transform: scaleX(var(--fill, 1)); transition: transform 0.4s ease;
}
.ac-track--warn > i { background: var(--ac-orange); }
.ac-track--bad > i { background: var(--ac-bad); }
.ac-track--trial > i { background: var(--ac-orange); }

@keyframes ac-spin { to { transform: rotate(360deg); } }
@keyframes ac-pulse { 50% { opacity: 0.45; } }

/* ── /login ──────────────────────────────────────────────────────────────── */
.lg-main { background: var(--ac-bg); padding: 104px 0 56px; }
.lg-grid { display: grid; gap: 32px; align-items: start; }
.lg-head h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); margin: 0 0 8px; text-wrap: balance; overflow-wrap: break-word; min-width: 0; }
.lg-head p { font-size: var(--ac-t-l); margin: 0 0 20px; color: var(--ac-ink-2); }
.lg-card {
  background: var(--ac-surface); border: 1px solid var(--ac-line); border-radius: 16px; box-shadow: var(--ac-shadow);
  padding: 24px; max-width: 480px;
}
.lg-card h2 { font-size: var(--ac-t-xl); margin: 0 0 16px; }
.lg-step[hidden] { display: none; }
/* The human check: empty (and taking no room) unless Cloudflare asks this visitor to tick the box. */
.lg-ts:empty { display: none; }
.ac-tab[hidden] { display: none; }
.lg-ts { margin: 0 0 12px; }
.lg-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; }
.lg-or { border-top: 1px solid var(--ac-line); margin: 20px 0 4px; padding-top: 12px; font: 400 var(--ac-t-s)/1.5 var(--ac-font); color: var(--ac-ink-2); }
.lg-or p { margin: 0; color: var(--ac-ink-2); }
.lg-switch { background: none; border: 0; padding: 12px 0; min-height: 44px; cursor: pointer; font: 600 var(--ac-t-s)/1.2 var(--ac-font); color: var(--ac-red-ink); text-decoration: underline; text-underline-offset: 3px; }
.lg-invite { background: var(--ac-ok-soft); color: var(--ac-ok); border-radius: var(--ac-r-s); padding: 12px 16px; font: 500 var(--ac-t-s)/1.45 var(--ac-font); margin: 0 0 16px; }
.lg-invite[hidden] { display: none; }
.lg-legal { font: 400 var(--ac-t-xs)/1.5 var(--ac-font); color: var(--ac-ink-3); margin: 12px 0 0; }
.lg-legal a { color: var(--ac-ink-2); text-decoration: underline; }
/* The free-trial page's sign-up (iptv-free-trial-no-card): the box fills its column; the trial's VPN box. */
.lg-card--trial { max-width: none; }
.lg-vpn { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; min-height: 44px; cursor: pointer; font: 400 var(--ac-t-s)/1.4 var(--ac-font); color: var(--ac-ink-2); }
.lg-vpn input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--ac-red); cursor: pointer; }
.lg-help { margin-top: 16px; max-width: 480px; }
.lg-help summary { cursor: pointer; font: 600 var(--ac-t-s)/1.4 var(--ac-font); color: var(--ac-ink); display: list-item; padding: 12px 0; }
.lg-help p { margin: 0 0 8px; font-size: var(--ac-t-s); }
.lg-side { display: grid; gap: 20px; }
.lg-side h2 { font-size: var(--ac-t-xl); margin: 0; }
.lg-points { display: grid; gap: 16px; }
.lg-points li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: start; font: 400 var(--ac-t-m)/1.45 var(--ac-font); color: var(--ac-ink-2); }
.lg-points svg { width: 40px; height: 40px; padding: 8px; border-radius: 10px; background: var(--ac-surface); border: 1px solid var(--ac-line); color: var(--ac-red); }
.lg-points b { color: var(--ac-ink); display: block; }
.lg-shot { width: min(300px, 80%); border-radius: 28px; border: 1px solid var(--ac-line-2); box-shadow: var(--ac-shadow); background: var(--ac-surface); }
.lg-faq { background: var(--ac-surface); border-top: 1px solid var(--ac-line); padding: 48px 0; }
.lg-faq h2 { font-size: var(--ac-t-2xl); margin: 0 0 16px; }
.lg-faq details { border-bottom: 1px solid var(--ac-line); max-width: 760px; }
.lg-faq summary { cursor: pointer; padding: 16px 0; min-height: 44px; font: 600 var(--ac-t-l)/1.35 var(--ac-font); color: var(--ac-ink); }
.lg-faq details p { margin: 0 0 16px; max-width: 68ch; }
.lg-foot-link { color: var(--ac-on-navy); text-decoration: underline; }
.lg-foot-mail { color: var(--accent-primary); }
@media (min-width: 64rem) {
  .lg-grid { grid-template-columns: minmax(0, 480px) minmax(0, 1fr); gap: 72px; }
  .lg-side { padding-top: 96px; justify-items: start; }
}

/* ── /account: the shell ─────────────────────────────────────────────────── */
.ac-body { background: var(--ac-bg); min-height: 100vh; }
.ac-top {
  position: sticky; top: 0; z-index: 50; height: var(--ac-top-h);
  background: var(--ac-surface); border-bottom: 1px solid var(--ac-line);
}
.ac-top-in { max-width: 1120px; margin: 0 auto; height: 100%; padding: 0 16px; display: flex; align-items: center; gap: 16px; }
.ac-logo img { height: 36px; width: auto; }
.ac-top-tabs { display: none; gap: 4px; margin-left: 16px; }
.ac-top-end { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.ac-tab {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border-radius: var(--ac-r-s);
  font: 600 var(--ac-t-s)/1 var(--ac-font); color: var(--ac-ink-2); text-decoration: none; position: relative;
}
.ac-tab:hover { background: var(--ac-muted-soft); color: var(--ac-ink); }
.ac-tab[aria-current="page"] { color: var(--ac-red-ink); }
.ac-top-tabs .ac-tab[aria-current="page"]::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: -10px; height: 3px; border-radius: 3px 3px 0 0; background: var(--ac-red);
}
.ac-tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; height: calc(var(--ac-tabs-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom); background: var(--ac-surface); box-shadow: var(--ac-shadow-up);
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
}
.ac-tabs .ac-tab { flex-direction: column; justify-content: center; gap: 4px; padding: 0; font-size: 0.75rem; border-radius: 0; }
.ac-tabs .ac-tab svg { width: 22px; height: 22px; }
.ac-main { max-width: 1120px; margin: 0 auto; padding: 20px 16px calc(var(--ac-tabs-h) + 40px); }
.ac-screen:focus { outline: none; }
.ac-screen > h1, .ac-h1 { font-size: 1.5rem; line-height: 1.2; margin: 0 0 8px; text-wrap: balance; overflow-wrap: break-word; min-width: 0; }
.ac-sub { font: 400 var(--ac-t-m)/1.5 var(--ac-font); color: var(--ac-ink-2); margin: 0 0 20px; }
.ac-section { margin: 28px 0 0; padding: 0; } /* style.css pads every <section> 64px */
.ac-section > h2 { font-size: var(--ac-t-l); line-height: 1.3; margin: 0 0 12px; }
.ac-panel { background: var(--ac-surface); border: 1px solid var(--ac-line); border-radius: var(--ac-r); box-shadow: var(--ac-shadow); padding: 20px; }
.ac-panel + .ac-panel { margin-top: 16px; }
.ac-panel h3 { font-size: var(--ac-t-l); margin: 0 0 8px; }
.ac-panel p { margin: 0 0 12px; font-size: var(--ac-t-m); }
.ac-actions { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-top: 16px; }
.ac-home { display: grid; gap: 0; }
.ac-aside { display: grid; gap: 16px; margin-top: 28px; align-content: start; }
@media (min-width: 48rem) {
  .ac-tabs { display: none; }
  .ac-top-tabs { display: flex; }
  .ac-main { padding: 32px 24px 64px; }
  .ac-screen > h1, .ac-h1 { font-size: var(--ac-t-2xl); }
}
@media (min-width: 64rem) {
  .ac-home { grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; }
  .ac-aside { margin-top: 0; }
}

/* ── The status panel (the one thing to do now) ──────────────────────────── */
.ac-hero { border-radius: var(--ac-r); padding: 24px 20px; background: var(--ac-surface); border: 1px solid var(--ac-line); box-shadow: var(--ac-shadow); }
.ac-hero--warn { background: var(--ac-warn-soft); border-color: var(--ac-warn-soft); }
.ac-hero--bad { background: var(--ac-bad-soft); border-color: var(--ac-bad-soft); }
.ac-hero--trial { background: var(--ac-trial-soft); border-color: var(--ac-trial-soft); }
.ac-hero--navy { background: var(--ac-navy); border-color: var(--ac-navy); color: var(--ac-on-navy); }
.ac-hero--navy h1, .ac-hero--navy .ac-hero-lead { color: var(--ac-on-navy); }
.ac-hero--navy .ac-hero-small { color: var(--ac-on-navy-2); }
.ac-hero h1 { font-size: 1.5rem; line-height: 1.2; margin: 0 0 8px; text-wrap: balance; overflow-wrap: break-word; min-width: 0; }
.ac-hero-lead { font: 400 var(--ac-t-l)/1.45 var(--ac-font); color: var(--ac-ink-2); margin: 0; }
.ac-hero-small { font: 400 var(--ac-t-s)/1.45 var(--ac-font); color: var(--ac-ink-3); margin: 12px 0 0; }
.ac-hero .ac-actions { margin-top: 20px; }
.ac-hero--navy .ac-btn--ghost { background: transparent; color: var(--ac-on-navy); border-color: var(--ac-on-navy-2); }
.ac-hero--navy .ac-btn--ghost:hover { background: var(--ac-navy-2); color: var(--ac-on-navy); }
@media (min-width: 48rem) { .ac-hero { padding: 28px; } .ac-hero h1 { font-size: 2rem; } }

/* ── The plan box (signature) ─────────────────────────────────────────────── */
.ac-plan { background: var(--ac-surface); border: 1px solid var(--ac-line); border-radius: var(--ac-r); box-shadow: var(--ac-shadow); }
.ac-plan + .ac-plan { margin-top: 16px; }
.ac-plan-head { padding: 20px 20px 16px; display: grid; gap: 12px; }
.ac-plan-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ac-plan-title h3 { font-size: var(--ac-t-l); margin: 0; }
.ac-plan-when { display: flex; justify-content: space-between; gap: 12px; font: 500 var(--ac-t-s)/1.3 var(--ac-font); color: var(--ac-ink-2); font-variant-numeric: tabular-nums; }
.ac-plan-when b { color: var(--ac-ink); font-weight: 700; }
.ac-tvs { border-top: 1px solid var(--ac-line); }
.ac-tv + .ac-tv { border-top: 1px solid var(--ac-line); }
.ac-tv-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; padding: 12px 12px 12px 20px; }
.ac-tv-name { font: 600 var(--ac-t-m)/1.3 var(--ac-font); color: var(--ac-ink); margin: 0; }
.ac-tv-meta { font: 400 var(--ac-t-s)/1.4 var(--ac-font); color: var(--ac-ink-3); margin: 2px 0 0; }
.ac-tv-meta--warn { color: var(--ac-warn); font-weight: 600; }
.ac-tv-btns { display: flex; gap: 4px; }
.ac-row-toggle {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border-radius: var(--ac-r-s);
  background: var(--ac-surface); border: 1px solid var(--ac-line-2); color: var(--ac-ink); cursor: pointer;
  font: 600 var(--ac-t-s)/1 var(--ac-font); text-decoration: none;
}
.ac-row-toggle:hover { border-color: var(--ac-ink-3); background: var(--ac-bg); }
.ac-row-toggle[aria-expanded="true"] { background: var(--ac-muted-soft); }
.ac-row-toggle svg { width: 18px; height: 18px; }
@media (max-width: 26rem) { .ac-row-toggle svg { display: none; } }
.ac-tv-more { padding: 4px 20px 20px; display: grid; gap: 12px; }
.ac-tv-more[hidden] { display: none; }
.ac-code { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 16px; border-radius: var(--ac-r-s); background: var(--ac-bg); }
.ac-code output { font: 700 var(--ac-t-xl)/1.2 var(--ac-font); letter-spacing: 0.06em; font-variant-numeric: tabular-nums; color: var(--ac-ink); margin-right: auto; }
@media (max-width: 30rem) { .ac-code output { flex: 1 0 100%; } }
.ac-plan-foot { border-top: 1px solid var(--ac-line); padding: 16px 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.ac-plan-foot p { margin: 0; font-size: var(--ac-t-s); color: var(--ac-ink-2); flex: 1 1 220px; }

/* ── Side cards, lists, tables ───────────────────────────────────────────── */
.ac-mini h3 { display: flex; align-items: center; gap: 12px; }
.ac-mini h3 svg { width: 22px; height: 22px; color: var(--ac-red); }
.ac-list { display: grid; }
.ac-list > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 16px 0; border-top: 1px solid var(--ac-line); }
.ac-list > li:first-child { border-top: 0; padding-top: 0; }
.ac-list p { margin: 0; }
.ac-list .ac-tv-meta { margin: 2px 0 0; }
.ac-table-wrap { overflow-x: auto; }
.ac-table { width: 100%; border-collapse: collapse; font: 400 var(--ac-t-s)/1.4 var(--ac-font); font-variant-numeric: tabular-nums; }
.ac-table th { text-align: left; font-weight: 600; color: var(--ac-ink-3); padding: 0 12px 12px 0; border-bottom: 1px solid var(--ac-line); }
.ac-table td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--ac-line); color: var(--ac-ink); vertical-align: middle; }
.ac-table tr:last-child td { border-bottom: 0; }
.ac-steps { counter-reset: s; display: grid; gap: 12px; margin: 0 0 4px; }
.ac-steps li { counter-increment: s; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; align-items: start; font: 400 var(--ac-t-m)/1.5 var(--ac-font); color: var(--ac-ink-2); }
.ac-steps li::before { content: counter(s); width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--ac-muted-soft); color: var(--ac-ink); font-weight: 700; font-size: var(--ac-t-s); }
.ac-steps b { color: var(--ac-ink); }
.ac-empty { text-align: left; padding: 8px 0; }
.ac-empty p { color: var(--ac-ink-2); }

/* ── Plans: duration picker, TV count, order summary ─────────────────────── */
.ac-seg { display: inline-grid; grid-auto-flow: column; gap: 4px; padding: 4px; border-radius: var(--ac-r); background: var(--ac-muted-soft); }
.ac-seg button {
  min-width: 48px; min-height: 44px; border: 0; border-radius: var(--ac-r-s); background: transparent; cursor: pointer;
  font: 700 var(--ac-t-m)/1 var(--ac-font); color: var(--ac-ink-2);
}
.ac-seg button:hover { color: var(--ac-ink); }
.ac-seg button[aria-pressed="true"] { background: var(--ac-surface); color: var(--ac-ink); box-shadow: var(--ac-shadow); }
.ac-choices { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 12px 0 0; }
.ac-choice { position: relative; display: block; cursor: pointer; }
.ac-choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ac-choice > span {
  display: grid; gap: 4px; min-height: 96px; padding: 16px; border-radius: var(--ac-r); border: 1px solid var(--ac-line-2);
  background: var(--ac-surface); transition: border-color var(--ac-dur), background-color var(--ac-dur);
}
.ac-choice:hover > span { border-color: var(--ac-ink-3); }
.ac-choice input:checked + span { border-color: var(--ac-red); background: var(--ac-bad-soft); box-shadow: 0 0 0 1px var(--ac-red) inset; }
.ac-choice b { font: 700 var(--ac-t-m)/1.25 var(--ac-font); color: var(--ac-ink); }
.ac-choice .ac-price { font: 700 var(--ac-t-xl)/1.2 var(--ac-font); color: var(--ac-ink); font-variant-numeric: tabular-nums; }
.ac-choice small { font: 500 var(--ac-t-xs)/1.35 var(--ac-font); color: var(--ac-ink-3); }
.ac-choice .ac-best { position: absolute; top: -10px; right: 10px; }
@media (min-width: 64rem) { .ac-choices { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ac-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--ac-line); }
.ac-summary p { margin: 0; color: var(--ac-ink-2); flex: 1 1 240px; }
.ac-summary b { color: var(--ac-ink); }
.ac-done { background: var(--ac-ok-soft); border-color: var(--ac-ok-soft); }
.ac-done h3 { color: var(--ac-ok); }

/* ── Invite ─────────────────────────────────────────────────────────────── */
.ac-ticket {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 20px; border-radius: var(--ac-r);
  border: 2px dashed var(--ac-line-2); background: var(--ac-surface);
}
.ac-ticket output { font: 800 2rem/1.1 var(--ac-font); letter-spacing: 0.04em; color: var(--ac-ink); margin-right: auto; }
.ac-share { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* ── Account settings ───────────────────────────────────────────────────── */
.ac-kv { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 16px 0; border-top: 1px solid var(--ac-line); }
.ac-kv:first-of-type { border-top: 0; padding-top: 4px; }
.ac-kv p { margin: 0; }
.ac-kv .ac-k { font: 600 var(--ac-t-s)/1.3 var(--ac-font); color: var(--ac-ink-3); }
.ac-kv .ac-v { font: 500 var(--ac-t-m)/1.4 var(--ac-font); color: var(--ac-ink); overflow-wrap: anywhere; }
.ac-switch { position: relative; display: inline-block; width: 52px; height: 32px; }
.ac-switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.ac-switch span { position: absolute; inset: 0; border-radius: var(--ac-r-pill); background: var(--ac-line-2); transition: background-color var(--ac-dur); pointer-events: none; }
.ac-switch span::after { content: ""; position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%; background: var(--ac-surface); transition: transform var(--ac-dur); }
.ac-switch input:checked + span { background: var(--ac-ok); }
.ac-switch input:checked + span::after { transform: translateX(20px); }

/* ── Small pieces: inline forms, pills, skip link, honeypot ─────────────── */
.ac-inline { display: grid; gap: 8px; margin-top: 4px; }
.ac-inline-row { display: flex; gap: 8px; }
.ac-inline-row .ac-input { flex: 1 1 auto; min-width: 0; }
.ac-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.ac-pill {
  min-height: 44px; padding: 0 16px; border-radius: var(--ac-r-pill); border: 1px solid var(--ac-line-2); background: var(--ac-surface);
  font: 600 var(--ac-t-s)/1 var(--ac-font); color: var(--ac-ink-2); cursor: pointer; transition: border-color var(--ac-dur), background-color var(--ac-dur);
}
.ac-pill:hover { border-color: var(--ac-ink-3); color: var(--ac-ink); }
.ac-pill[aria-pressed="true"] { background: var(--ac-navy); border-color: var(--ac-navy); color: var(--ac-on-navy); }
.ac-pill:focus-visible { outline: 3px solid var(--ac-focus); outline-offset: 2px; transition: none; }
.ac-gap, .ac-panel .ac-gap { margin-top: 20px; }
.ac-panel .ac-codes-h { font-size: var(--ac-t-m); margin: 28px 0 4px; }
.ac-list .ac-code { margin-top: 8px; }
.ac-skip { position: absolute; left: 8px; top: -60px; z-index: 100; padding: 12px 16px; border-radius: var(--ac-r-s); background: var(--ac-navy); color: var(--ac-on-navy); }
.ac-skip:focus { top: 8px; color: var(--ac-on-navy); }
.ac-sr, .lg-hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ac-skel--hero { height: 188px; }
.ac-skel--plan { height: 260px; }

/* ── Feedback: toast, loading ───────────────────────────────────────────── */
.ac-toast {
  position: fixed; left: 50%; bottom: calc(var(--ac-tabs-h) + 16px + env(safe-area-inset-bottom)); z-index: 80;
  transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
  max-width: min(92vw, 420px); padding: 12px 16px; border-radius: var(--ac-r-s);
  background: var(--ac-navy); color: var(--ac-on-navy); font: 500 var(--ac-t-s)/1.4 var(--ac-font);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.ac-toast.is-on { transform: translate(-50%, 0); opacity: 1; }
@media (min-width: 48rem) { .ac-toast { bottom: 24px; } }
.ac-skel { border-radius: var(--ac-r); background: var(--ac-muted-soft); animation: ac-pulse 1.4s ease-in-out infinite; }
.ac-skel + .ac-skel { margin-top: 16px; }
.ac-noscript { max-width: 520px; margin: 48px auto; padding: 0 16px; }

@media (prefers-reduced-motion: reduce) {
  .ac-skel, .ac-btn[aria-busy="true"]::after { animation: none; }
  .ac-track > i, .ac-toast, .ac-btn, .ac-choice span, .ac-switch span, .ac-switch span::after { transition: none; }
}