/* === Tokens (single source of truth, with aliases to preserve output) === */
:root{
  /* canonical tokens */
  --bg:#f7f8fa; --ink:#0f172a; --muted:#6b7280; --border:#e5e7eb;
  --shadow:0 6px 18px rgba(0,0,0,.06);
  --shadow-md:0 6px 18px rgba(2,6,23,.10);
  --shadow-lg:0 10px 30px rgba(2,6,23,.12);
  --ring:0 0 0 3px rgba(37,99,235,.25);
  --blue:#0d6efd; --blue-hover:#0b5ed7;
  --green:#16a34a; --green-hover:#15803d;
  --grey:#e5e7eb; --grey-ink:#374151; --grey-hover:#d1d5db;
  --red:#dc2626; --red-hover:#b91c1c;
  --ok-bg:#eaf4ff;   --ok-bd:#bfdcff;   --ok-ink:#0c3b66;
  --bad-bg:#fff1f2;  --bad-bd:#fecdd3;  --bad-ink:#881337;
  --warn-bg:#fff7ed; --warn-bd:#fed7aa; --warn-ink:#9a3412;
  --info-bg:#eff6ff; --info-bd:#bfdbfe; --info-ink:#1e3a8a;
  --plate-yellow:#ffde00; --plate-blue:#1e3a8a;
  --r-card:12px; --r-md:8px; --gap:14px;
  --auth-max:640px; --container-pad:16px; --section-pad-y:48px; --tap:44px;

  /* aliases (legacy) */
  --bg-elev:#ffffff; --glass:rgba(255,255,255,.75);
  --bd:var(--border); --txt:var(--ink); --txt-muted:var(--muted);
  --primary:var(--blue); --primary-600:var(--blue-hover);
  --success:var(--green); --danger:var(--red);

  /* confirm/billing tokens */
  --rr-radius:14px; --rr-gap:12px;
  --rr-danger:#dc2626; --rr-danger-ink:#7f1d1d; --rr-danger-bg:#fef2f2;
  --rr-border:#e5e7eb; --rr-muted:#6b7280;

  /* fixed-header offsets (default; JS may update) */
  --header-h:64px; --header-gap:16px;

  /* link tokens */
  --link:#1d4ed8;       /* blue-700 */
  --link-hover:#1e40af; /* blue-800 */
}

/* === Base / Reset ====================================================== */
*,*::before,*::after{ box-sizing:border-box; }
body{ background:var(--bg); color:var(--ink); margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; }
img{ max-width:100%; height:auto; }
.container{ max-width:960px; margin:0 auto; padding:0 1rem; }
.stack>*+*{ margin-top:.25rem; }

/* global link styling (avoid default purple visited links) */
main a:not(.btn):not(.rr-cta),
footer a:not(.btn):not(.rr-cta),
section a:not(.btn):not(.rr-cta){
  color:var(--link);
  text-decoration-color:currentColor;
  text-underline-offset:2px;
}
main a:not(.btn):not(.rr-cta):hover,
footer a:not(.btn):not(.rr-cta):hover,
section a:not(.btn):not(.rr-cta):hover{ color:var(--link-hover); }
main a:not(.btn):not(.rr-cta):visited,
footer a:not(.btn):not(.rr-cta):visited,
section a:not(.btn):not(.rr-cta):visited{ color:var(--link); }

/* text utilities */
.subtle,.rr-sub,.rr-note,.muted{ color:var(--muted); }
.muted{ opacity:.85; }

/* === Cards / Glass ===================================================== */
.card,.glass,.min-card{ background:var(--bg-elev); border:1px solid var(--bd); box-shadow:var(--shadow-md); border-radius:14px; }
.card{ background:var(--bg-elev); border-radius:var(--r-card); padding:16px; box-shadow:var(--shadow); }
.glass{ background:var(--glass); backdrop-filter:saturate(140%) blur(6px); }

/* === Buttons =========================================================== */
.btn,a.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  vertical-align:middle; font-size:14px; font-weight:600; line-height:1.2;
  border-radius:10px; padding:8px 16px; height:38px; text-decoration:none;
  cursor:pointer; border:1px solid var(--bd); transition:background .2s,color .2s,border .2s,box-shadow .2s;
  -webkit-appearance:none; appearance:none; color:var(--txt); background:#f9fafb;
}
.btn:hover,a.btn:hover{ background:#f3f4f6; }
.btn:focus-visible,a.btn:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(13,110,253,.25); }
.btn:disabled,a.btn[aria-disabled="true"]{ opacity:.6; cursor:not-allowed; }

.btn.primary,a.btn.primary{ background:var(--primary); color:#fff; border-color:var(--primary); }
.btn.primary:hover,a.btn.primary:hover{ background:var(--primary-600); border-color:var(--primary-600); }

.btn.neutral,a.btn.neutral{ background:var(--grey); color:var(--grey-ink); border-color:var(--grey); }
.btn.neutral:hover,a.btn.neutral:hover{ background:var(--grey-hover); }

.btn.success,a.btn.success{ background:var(--green); color:#fff; border-color:var(--green); }
.btn.success:hover,a.btn.success:hover{ background:var(--green-hover); }

.btn.danger,a.btn.danger{ background:var(--red); color:#fff; border-color:var(--red); }
.btn.danger:hover,a.btn.danger:hover{ background:var(--red-hover); }

.btn.w-full{ width:100%; }
.btn.sm{ padding:6px 12px; font-size:13px; height:32px; }

.actions{ display:grid; gap:.4rem; margin-top:.5rem; }
.button-row{ display:flex; gap:.75rem; margin-top:1rem; }
.button-row .btn{ flex:1 1 50%; }
@media (max-width:640px){ .btn,a.btn,.button-row .btn{ width:100%; } }

/* === Badges / Flash ==================================================== */
.badge{ display:inline-block; font-weight:600; padding:.2rem .5rem; border-radius:.25rem; color:#fff; }
.badge.error{ background:#e3342f; }
.badge.info{ background:#6b7280; }
.badge.warn{ background:#f59e0b; }
.badge.sorn{ background:#fef3c7; color:#92400e; border-radius:6px; padding:2px 8px; font-size:12px; font-weight:700; }

.flash{ border-radius:.5rem; padding:.75rem; margin:.75rem 0; border:1px solid; }
.flash.notice{ background:var(--ok-bg); border-color:var(--ok-bd); color:var(--ok-ink); }
.flash.alert{  background:var(--bad-bg); border-color:var(--bad-bd); color:var(--bad-ink); }

.flash-center{ max-width:440px; margin:.75rem auto; padding:0 1rem; }
.flash-box{
  display:grid; grid-template-columns:auto 1fr auto; align-items:start; gap:.5rem .6rem;
  border:1px solid var(--border); border-radius:var(--r-card); padding:.65rem .75rem; background:#fff; box-shadow:var(--shadow);
}
.flash-ok{background:var(--ok-bg);border-color:var(--ok-bd);color:var(--ok-ink);}
.flash-bad{background:var(--bad-bg);border-color:var(--bad-bd);color:var(--bad-ink);}
.flash-warn{background:var(--warn-bg);border-color:var(--warn-bd);color:var(--warn-ink);}
.flash-info{background:var(--info-bg);border-color:var(--info-bd);color:var(--info-ink);}
.flash-ico{ font-size:1.1rem; line-height:1; margin-top:.1rem; }
.flash-msg{ font-size:.95rem; }
.flash-x{ border:0; background:transparent; color:inherit; font-size:1.1rem; line-height:1; opacity:.6; cursor:pointer; }
.flash-x:hover{ opacity:1; }

/* === Tables ============================================================ */
.table,.mot-table{ width:100%; border-collapse:collapse; }
.table th,.table td,.mot-table th,.mot-table td{ padding:.5rem; border-top:1px solid var(--border); text-align:left; }
.mot-table{ font-size:14px; }
.mot-table thead th{ background:#f9fafb; color:#64748b; border-top:0; }
.mot-footnote{ color:var(--muted); font-size:12px; margin-top:6px; }
.table-wrap,.mot-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.right{ text-align:right; }

/* === Typography ======================================================== */
.page-head h1{ font-size:1.5rem; font-weight:700; margin:0; }
.page-head .subtle{ color:var(--muted); margin-top:.25rem; }
.card__title{ display:block; font-weight:600; margin-bottom:.5rem; }
.u-uppercase{ text-transform:uppercase; }

/* === Forms ============================================================= */
.form{ display:grid; gap:var(--gap); }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); }
@media (max-width:640px){ .grid-2{ grid-template-columns:1fr; } }

.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-weight:600; margin:0; }
.field input[type="text"],.field input[type="email"],.field input[type="tel"],.field input[type="password"],
.field select,.field textarea{
  width:100%; padding:10px 12px; border:1px solid #cbd5e1; border-radius:var(--r-md);
  font-size:15px; line-height:1.3; background:#fff;
}
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--blue); outline:none; box-shadow:0 0 0 3px rgba(13,110,253,.18); }
fieldset{ border:0; padding:0; margin:0; }
legend{ font-weight:600; margin-bottom:.25rem; }
.check{ display:flex; gap:.5rem; align-items:center; margin:.2rem 0; }
.has-error input{ border-color:#ef4444; }
.error-msg{ color:#b91c1c; font-size:.875rem; margin:0; }
.alert-box{ background:#fff1f2; border:1px solid #fecdd3; color:#881337; padding:.75rem; border-radius:var(--r-md); margin-bottom:.25rem; }

/* === Hero / Auth ======================================================= */
.hero{ text-align:center; margin:2rem 0 1rem; }
.hero-title{ font-size:1.6rem; font-weight:700; margin:0; line-height:1.2; }
.hero-sub{ margin:.25rem 0 1rem; color:#475569; font-size:.95rem; }

.hero-wrap{ background:#f8fafc; padding:1.5rem 1rem; text-align:center; border-bottom:1px solid var(--border); margin-bottom:1rem; }
.hero-link{ text-decoration:none; display:inline-block; transition:transform .15s ease,color .15s ease; }
.hero-link:hover{ transform:scale(1.02); }
.hero-text h1{ font-size:1.75rem; font-weight:700; margin:0; color:var(--ink); }
.hero-text .sub{ margin-top:.25rem; font-size:1rem; color:#475569; }

.auth-wrap{ max-width:440px; margin:2.5rem auto; padding:0 1rem; }
.auth-head h1{ margin:0; font-size:1.6rem; line-height:1.2; }
.auth-head .sub{ margin:.25rem 0 1rem; color:#475569; font-size:.95rem; }
.auth-wrap--wide{ max-width:960px; margin:2.5rem auto; padding:0 1rem; }
@media (min-width:1280px){ .auth-wrap--wide{ max-width:1100px; } }

nav a.active{ font-weight:600; text-decoration:underline; }

/* === Confirm Vehicle ==================================================== */
.confirm-wrap{ max-width:1100px; margin:1.75rem auto; padding:0 1rem; }
.confirm-head{ margin:0 0 .75rem; font-size:1.75rem; line-height:1.25; }
.confirm-meta{ margin:.5rem 0 1rem; color:#374151; }
.confirm-meta p{ margin:.25rem 0; }
.section-gap>*+*{ margin-top:1rem; }

.vehicle-identity{ display:grid; grid-template-columns:1fr; align-items:center; gap:12px; }
@media (min-width:720px){ .vehicle-identity{ grid-template-columns:1fr auto; } }

.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin-top:12px; }
.stat{ background:#fff; border:1px solid var(--border); border-radius:var(--r-card); padding:14px; box-shadow:0 6px 18px rgba(0,0,0,.04); display:flex; flex-direction:column; gap:6px; }
.stat .label{ font-size:12px; text-transform:uppercase; letter-spacing:.02em; color:#64748b; }
.stat .value{ font-weight:700; }
.stat .value .date-strong{ line-height:1.1; }
.stat .value .subtle{ font-size:.85rem; color:var(--muted); margin-top:2px; }

.colour-swatch{ width:16px; height:16px; border-radius:4px; border:1px solid #cbd5e1; display:inline-block; vertical-align:-3px; margin-right:8px; }

/* === UK Number Plate (display) ========================================= */
.uk-plate{
  display:inline-flex; align-items:center; gap:10px; line-height:1;
  padding:6px 14px 6px 12px; height:36px; background:var(--plate-yellow); color:#111;
  border:2px solid #111; border-radius:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  font-family:"UKNumberPlate","Impact","DIN Condensed","Arial Black",sans-serif;
  position:relative; box-shadow:inset 0 0 0 2px rgba(0,0,0,.08),0 2px 8px rgba(0,0,0,.08);
}
.uk-plate::after{ content:""; position:absolute; inset:3px; border-radius:7px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.28); pointer-events:none; }
.uk-plate .eu-strip{ width:14px; height:24px; background:var(--plate-blue); border-radius:3px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.25); }

.uk-plate.big{ font-size:clamp(20px,6vw,36px); height:auto; padding:12px 20px 12px 16px; border-radius:12px; box-shadow:inset 0 0 2px #000; }
.uk-plate.big .eu-strip{ height:100%; width:16px; border-radius:4px; display:flex; align-items:center; justify-content:center; background:#003399; color:#fff; font-size:.6rem; font-weight:bold; padding:0 6px; margin-right:8px; }
.uk-plate.big .eu-strip::after{ content:"GB"; writing-mode:vertical-rl; transform:rotate(180deg); font-size:.7rem; font-family:sans-serif; }

/* === UK Number Plate (input) =========================================== */
.numberplate-wrap{
  display:flex; align-items:center; height:56px; max-width:420px; background:var(--plate-yellow);
  border:3px solid #000; border-radius:8px; overflow:hidden; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);
}
.numberplate-wrap .gb-strip{
  background:#003399; color:#fff; font-weight:700; width:52px; height:100%;
  display:flex; align-items:center; justify-content:center; letter-spacing:.08em; border-right:2px solid #000;
}
.numberplate-input{
  flex:1; height:100%; border:0; outline:0; background:transparent; padding:0 14px; text-align:center; text-transform:uppercase;
  font-size:28px; line-height:56px; font-weight:800; letter-spacing:.12em;
  font-family:"UKNumberPlate","FE-Font","Roadgeek 2005 Series E","DIN Alternate","Impact",system-ui,sans-serif;
}
.numberplate-input::placeholder{ color:#222; opacity:.45; }
.numberplate-wrap:focus-within{ box-shadow:0 0 0 3px rgba(34,113,241,.35), inset 0 0 0 1px rgba(0,0,0,.08); }
.numberplate-wrap.front-plate{ background:#fffdf2; }

/* === Legal pages ======================================================= */
.legal{ padding:24px 16px 48px; }
.legal__hero{ max-width:960px; margin:0 auto 16px; text-align:center; }
.legal__title{ font-size:28px; line-height:1.2; font-weight:700; color:var(--ink); margin:0; }
.legal__meta{ margin-top:4px; color:var(--muted); font-size:14px; }

.legal__toc-bar{ position:sticky; top:64px; z-index:20; background:var(--bg); border-bottom:1px solid var(--border); box-shadow:0 1px 0 rgba(0,0,0,.02); }
.legal__toc{ max-width:960px; margin:0 auto; padding:8px 16px; display:flex; flex-wrap:wrap; gap:8px 16px; justify-content:center; font-size:14px; }
.legal__toc-link{ color:var(--muted); text-decoration:none; padding:6px 10px; border-radius:9999px; transition:color .2s,background-color .2s,box-shadow .2s; }
.legal__toc-link:hover{ color:var(--ink); }
.legal__toc-link.active,.legal__toc-link[aria-current="true"]{ color:var(--ok-ink); background:var(--ok-bg); box-shadow:inset 0 0 0 1px var(--ok-bd); font-weight:600; }
.legal__toc-link:focus-visible{ outline:3px solid rgba(13,110,253,.35); outline-offset:2px; border-radius:8px; }

.legal__card{ max-width:960px; margin:0 auto; background:var(--bg-elev); border:1px solid var(--border); border-radius:12px; box-shadow:0 2px 10px rgba(15,23,42,.04); padding:24px; color:var(--ink); }
.legal__card h2{ font-size:20px; line-height:1.3; margin:20px 0 8px; color:var(--ink); }
.legal__card p{ margin:8px 0 12px; color:var(--ink); }
.legal__card ul{ margin:8px 0 12px 18px; }
.legal__card li{ margin:6px 0; color:var(--ink); }
.legal__card a{ color:var(--link); text-decoration:underline; }
.legal__card a:hover{ color:var(--link-hover); }
.legal__divider{ border:0; border-top:1px solid var(--border); margin:24px 0 12px; }
.legal__crosslink{ text-align:center; margin:0; }

@media (max-width:640px){
  .legal__card{ padding:20px; border-radius:10px; }
  .legal__title{ font-size:24px; }
  .legal__toc-bar{ top:56px; }
}

/* Smooth scroll + offset */
html{ scroll-behavior:smooth; }
.legal__card section{ scroll-margin-top:128px; }
@media (max-width:640px){ .legal__card section{ scroll-margin-top:96px; } }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .legal__toc-link{ transition:none; }
}

/* === Landing page (unchanged visuals) ================================== */
.lp-hero{ background:#f8fafc; border-bottom:1px solid var(--border); padding:40px 16px 28px; text-align:center; }
.lp-hero-inner{ max-width:960px; margin:0 auto; }
.lp-title{ font-size:2rem; line-height:1.2; margin:0; font-weight:800; color:var(--ink); }
.lp-sub{ margin:.5rem 0 1rem; color:#475569; font-size:1.05rem; }
.lp-cta{ display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; margin:.5rem 0 1rem; }
.lp-trust{ font-size:.95rem; }
.lp-plate-demo{ margin-top:14px; display:flex; justify-content:center; }

.lp-proof{ padding:18px 16px; }
.lp-proof-grid{ max-width:960px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
@media (max-width:720px){ .lp-proof-grid{ grid-template-columns:1fr; } }
.lp-proof-item{ text-align:center; }
.lp-proof-stat{ font-size:1.25rem; font-weight:800; }
.lp-proof-caption{ color:#6b7280; }

.lp-section{ padding:28px 16px; }
.lp-h2{ text-align:center; font-size:1.5rem; margin:0 0 12px; }
.lp-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; max-width:960px; margin:0 auto; align-items:stretch; }
@media (max-width:1024px){ .lp-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .lp-grid{ grid-template-columns:1fr; } }
.lp-card{ min-height:120px; transition:transform .18s ease,box-shadow .18s ease; }
.lp-card:hover{ transform:translateY(-4px); box-shadow:0 8px 20px rgba(0,0,0,.08); }
.lp-card-title{ margin:0 0 8px; font-weight:700; }

.lp-grid--balanced .lp-card{ display:flex; flex-direction:column; height:100%; }
.lp-grid--balanced .lp-card .lp-card-title{ margin-bottom:.35rem; }
.lp-grid--balanced .lp-card p{ margin-top:.25rem; line-height:1.45; }

.grid-3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
@media (max-width:720px){ .grid-3{ grid-template-columns:1fr; } }
.step{ text-align:center; }
.step h3{ margin:.5rem 0 .25rem; font-weight:700; }

.rr-cadence{ max-width:960px; margin:0 auto; }
.rr-cadence__row{ display:grid; gap:16px; grid-template-columns:repeat(4,1fr); }
@media (max-width:1024px){ .rr-cadence__row{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .rr-cadence__row{ grid-template-columns:1fr; } }
.rr-cadence__item{ background:#fff; border:1px solid var(--border); border-radius:12px; padding:14px; box-shadow:var(--shadow); }
.rr-cadence__badge{ display:inline-block; font-weight:700; font-size:.9rem; background:#eef2ff; color:#1e40af; padding:4px 10px; border-radius:999px; margin-bottom:8px; }
.rr-cadence__list{ margin:0; padding-left:18px; }
.rr-cadence__list li{ margin:.35rem 0; color:#374151; }

.lp-trust-badges .lp-badge{ transition:transform .15s ease,box-shadow .15s ease,background .15s ease; box-shadow:0 1px 2px rgba(15,23,42,.06); }
.lp-trust-badges .lp-badge:hover{ transform:translateY(-1px); background:#e2e8f0; box-shadow:0 3px 10px rgba(15,23,42,.08); }

.hicon{ display:inline-flex; align-items:center; gap:.5rem; }
.hicon .i{ font-size:1.15em; line-height:1; }

.sticky-cta{ position:sticky; bottom:0; z-index:30; background:rgba(255,255,255,.85); backdrop-filter:blur(6px); border-top:1px solid var(--border); padding:10px 12px; display:none; }
.sticky-cta .inner{ max-width:960px; margin:0 auto; display:flex; gap:.6rem; justify-content:center; }
@media (max-width:720px){ .sticky-cta{ display:block; } }

/* Testimonials */
.testi-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; }
.testi{ display:flex; flex-direction:column; gap:.75rem; padding:20px; }
.testi__head{ display:flex; align-items:center; gap:.75rem; }
.testi__avatar{ width:44px; height:44px; border-radius:999px; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px; color:#0f172a; background:#e0f2fe; }
.testi:nth-child(2) .testi__avatar{ background:#fef3c7; }
.testi:nth-child(3) .testi__avatar{ background:#dcfce7; }
.testi__name{ font-weight:600; line-height:1.2; }
.testi__meta{ font-size:.85rem; }
.testi__quote{ margin:0; font-size:.95rem; line-height:1.45; color:#374151; position:relative; padding-left:24px; }
.testi__quote::before{ content:"“"; position:absolute; left:0; top:-6px; font-size:28px; color:#9ca3af; }

/* Pricing */
.pricing-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; }
.pricing-grid .lp-card{ display:flex; flex-direction:column; height:100%; }
.pricing-grid .lp-card .btn{ margin-top:auto; }
.pricing-grid .pricing-more{ grid-column:1/-1; }
.pricing-more .lp-card{ flex-direction:row; padding:20px 24px; }
.pricing-more h3{ font-size:18px; font-weight:700; }

/* Visual helpers */
.lp-hero-illustration{ max-width:180px; margin:0 auto 16px; opacity:.98; display:block; }
.lp-icon{ width:56px; height:56px; display:inline-block; }
.lp-icon--sm{ width:48px; height:48px; }
.testi-avatar-img{ width:44px; height:44px; border-radius:999px; object-fit:cover; display:block; border:1px solid #e5e7eb; background:#f8fafc; margin-right:10px; }
.plan-icon{ width:48px; height:48px; margin-bottom:.35rem; display:inline-block; }

/* Wide screens helper */
@media (min-width:1024px){ .cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

/* Focus outlines */
.btn:focus-visible,a.btn:focus-visible,.lp-cta a:focus-visible,.legal__toc-link:focus-visible{
  outline:3px solid rgba(13,110,253,.35); outline-offset:3px; border-radius:6px;
}

/* === RoadReady theme overrides ======================================== */
.rr-theme{ --ink:#0f172a; --muted:#6b7280; --bg:#ffffff; --soft:#f6f7f9; --bd:#e5e7eb; --shadow:0 10px 30px rgba(15,23,42,.08); --cta-blue:#0d6efd; --cta-blue-ink:#fff; --cta-blue-hover:#0b5ed7; }
body.rr-theme{ background:var(--bg); color:var(--txt); }
.rr-theme .rr-wrap{ background:var(--bg); color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Arial,sans-serif; }
.rr-theme .rr-container{ max-width:1120px; margin:0 auto; padding:0 20px; }
.rr-theme .rr-center{ text-align:center; }
.rr-theme .rr-h1{ font-size:clamp(34px,5vw,56px); line-height:1.05; letter-spacing:-.02em; margin:0 0 10px; font-weight:800; }
.rr-theme .rr-sub{ font-size:clamp(16px,2.2vw,20px); color:var(--muted); margin:0 auto 24px; max-width:720px; }
.rr-theme .h2{ font-size:28px; line-height:1.2; margin:0 0 28px; font-weight:800; text-align:center; letter-spacing:-.02em; }
.rr-theme .h3{ font-size:18px; font-weight:700; margin:0 0 6px; }
.rr-theme .p{ margin:0; color:var(--ink); }

.rr-theme .section{ padding:64px 0; }
.rr-theme .section.soft{ background:var(--soft); }
.rr-theme .rr-hero{ padding:96px 0 64px; background:linear-gradient(180deg,#fff,#fafbfc 60%,#f7f8fb); border-bottom:1px solid var(--bd); }
.rr-theme .rr-hero .cta-row{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.rr-theme .rr-note{ color:var(--muted); font-size:14px; margin-top:8px; }

.rr-theme .glass{ background:rgba(255,255,255,.65); border:1px solid rgba(255,255,255,.6); box-shadow:var(--shadow); border-radius:16px; -webkit-backdrop-filter:saturate(180%) blur(14px); backdrop-filter:saturate(180%) blur(14px); }
.rr-theme .card{ padding:22px; border-radius:16px; border:1px solid var(--bd); background:#fff; box-shadow:var(--shadow); }
.rr-theme .min-card{ padding:18px; border-radius:14px; border:1px solid var(--bd); background:rgba(255,255,255,.6); -webkit-backdrop-filter:saturate(180%) blur(10px); backdrop-filter:saturate(180%) blur(10px); }

.rr-theme .grid{ display:grid; gap:18px; }
.rr-theme .grid.cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.rr-theme .grid.cols-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.rr-theme .grid.cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:980px){ .rr-theme .grid.cols-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:720px){ .rr-theme .grid.cols-3,.rr-theme .grid.cols-2,.rr-theme .grid.cols-4{ grid-template-columns:1fr; } }

.rr-theme .icon{ width:48px; height:48px; display:inline-grid; place-items:center; border-radius:12px; background:linear-gradient(180deg,#f1f5ff,#eef2ff); border:1px solid #e5e7eb; margin:0 auto 10px; }
.rr-theme .icon svg{ width:26px; height:26px; color:#0f172a; }

.rr-theme .blurbs{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
@media (max-width:980px){ .rr-theme .blurbs{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .rr-theme .blurbs{ grid-template-columns:1fr; } }

.rr-theme .pricing{ display:grid; gap:18px; align-items:stretch; grid-template-columns:1fr; }
/* 2-up on tablets, 4-up on desktops */
@media (min-width:720px){ .rr-theme .pricing{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1100px){ .rr-theme .pricing{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
/* Give extra breathing room between the pricing heading and cards */
.rr-theme #pricing .h2{ margin-bottom:28px; }
.rr-theme .price-card{ padding:24px; display:flex; flex-direction:column; height:100%; }
.rr-theme .price-card .rr-cta{ margin-top:auto; }
.rr-theme .price{ font-weight:900; font-size:32px; letter-spacing:-.02em; }
.rr-theme .pill{ display:inline-block; font-size:12px; padding:4px 8px; border-radius:999px; background:#eff6ff; color:#1e40af; border:1px solid #bfdbfe; font-weight:700; }

.rr-theme .quote{ display:flex; gap:12px; align-items:flex-start; }
.rr-theme .avatar{ width:44px; height:44px; border-radius:999px; background:linear-gradient(180deg,#f3f4f6,#e5e7eb); border:1px solid var(--bd); }

.rr-theme .faq q{ font-style:normal; font-weight:700; }
.rr-theme .faq .qa{ padding:16px; border:1px solid var(--bd); border-radius:14px; background:#fff; box-shadow:0 6px 16px rgba(15,23,42,.04); }

.rr-theme .iphone{
  width:290px; height:580px; border-radius:44px; padding:14px; background:linear-gradient(180deg,#f7f7f8,#ededf0);
  border:1px solid #d1d5db; box-shadow:0 18px 50px rgba(0,0,0,.12) inset,0 10px 40px rgba(0,0,0,.10);
  margin:32px auto 0; position:relative;
}
.rr-theme .iphone::after{ content:""; position:absolute; inset:10px; border-radius:34px; border:1px solid rgba(255,255,255,.6); pointer-events:none; }
.rr-theme .android{
  width:290px; height:580px; border-radius:26px; padding:12px; background:linear-gradient(180deg,#eef1f5,#e6eaee);
  border:1px solid #cfd6de; box-shadow:0 18px 50px rgba(0,0,0,.12) inset,0 10px 40px rgba(0,0,0,.10);
  margin:32px auto 0; position:relative;
}
.rr-theme .android::after{ content:""; position:absolute; inset:8px; border-radius:20px; border:1px solid rgba(255,255,255,.55); pointer-events:none; }
/* Android punch‑hole camera */
.rr-theme .android::before{
  content:""; position:absolute; top:10px; left:50%; transform:translateX(-50%);
  width:10px; height:10px; border-radius:50%; background:#111827; border:2px solid rgba(255,255,255,.45);
  box-shadow:0 0 0 1px rgba(0,0,0,.08);
}
/* Slightly squarer screen inside Android frame */
.rr-theme .android .screen{ border-radius:22px; }

/* Laptop/desktop mock */
.rr-theme .laptop{
  width:380px; height:280px; border-radius:12px; padding:12px;
  background:linear-gradient(180deg,#f6f7f9,#e9ecf1);
  border:1px solid #d1d6de;
  box-shadow:0 10px 28px rgba(0,0,0,.10) inset,0 10px 32px rgba(0,0,0,.10);
  margin:0 auto; position:relative;
}
.rr-theme .laptop::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  bottom:0; width:420px; height:10px; border-radius:8px;
  background:linear-gradient(180deg,#e7eaef,#dfe4ea); border:1px solid #c8d0d8;
}
.rr-theme .laptop::before{
  content:""; position:absolute; top:6px; left:50%; transform:translateX(-50%);
  width:6px; height:6px; border-radius:50%; background:#6b7280; box-shadow:0 0 0 2px rgba(255,255,255,.85) inset;
}
.rr-theme .laptop .screen{ border-radius:8px; height:100%; padding:12px; background:#fff; border:1px solid #e5e7eb; overflow:hidden; }

/* Simple email UI inside laptop */
.rr-theme .email-ui{ height:100%; display:flex; flex-direction:column; gap:10px; }
.rr-theme .email-bar{ height:26px; display:flex; align-items:center; padding:0 8px; font-size:12px; color:var(--muted); background:var(--bg-elev); border:1px solid var(--bd); border-radius:6px; }
.rr-theme .email-card{ background:var(--bg-elev); border:1px solid var(--bd); border-radius:10px; padding:10px; text-align:left; color:var(--ink); box-shadow:0 4px 12px rgba(0,0,0,.06); }
.rr-theme .email-subject{ font-weight:700; margin-bottom:4px; }
.rr-theme .email-snippet{ font-size:13px; color:var(--muted); }

/* Smartwatch mock (decorative) */
.rr-theme .watch{ position:relative; width:230px; height:280px; }
.rr-theme .watch-body{
  width:230px; height:280px; margin:0 auto; position:relative;
  border-radius:36px;
  background:linear-gradient(180deg,#f7f8fb,#e7ebf1);
  border:1px solid #cfd6de;
  box-shadow: inset 0 3px 10px rgba(255,255,255,.65), inset 0 -4px 10px rgba(2,6,23,.05), 0 10px 24px rgba(2,6,23,.08);
  display:grid; place-items:center;
}
.rr-theme .watch-screen{
  width:86%; height:74%; border-radius:26px; background:var(--bg-elev);
  border:1px solid var(--bd);
  color:var(--ink); display:block; padding:8px;
  box-shadow: inset 0 0 0 6px rgba(2,6,23,.06), inset 0 10px 18px rgba(2,6,23,.06);
  position:relative; overflow:hidden;
}
/* subtle glass glare */
.rr-theme .watch-screen::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(210deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 40%);
}
/* bands */
.rr-theme .watch::before,.rr-theme .watch::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  width:150px; height:26px; border-radius:12px;
  background:linear-gradient(180deg,#e9ecf2,#dfe4ea); border:1px solid #c8d0d8;
}
.rr-theme .watch::before{ top:-18px; }
.rr-theme .watch::after{ bottom:-18px; }
/* crown + side button */
.rr-theme .watch-body::after{
  content:""; position:absolute; right:-10px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; border-radius:50%;
  background:linear-gradient(180deg,#e5e9ef,#cfd6de);
  border:1px solid #b9c2cc; box-shadow:0 1px 2px rgba(2,6,23,.15);
}
.rr-theme .watch-body::before{
  content:""; position:absolute; right:-6px; top:calc(50% - 38px);
  width:8px; height:28px; border-radius:4px;
  background:#cfd6de; box-shadow:0 1px 2px rgba(2,6,23,.12);
}

/* Dark / system themes for watch */
:root[data-theme="dark"] .rr-theme .watch-body{
  background:linear-gradient(180deg,#0f172a,#111827);
  border-color:#1f2937;
  box-shadow: inset 0 3px 10px rgba(255,255,255,.08), inset 0 -4px 10px rgba(0,0,0,.25), 0 10px 24px rgba(0,0,0,.26);
}
:root[data-theme="dark"] .rr-theme .watch-body::after{ background:linear-gradient(180deg,#1f2937,#111827); border-color:#334155; }
:root[data-theme="dark"] .rr-theme .watch-body::before{ background:#1f2937; }
:root[data-theme="dark"] .rr-theme .watch-screen{
  background:#0b1220; border-color:#1f2937; color:var(--ink);
  box-shadow: inset 0 0 0 6px rgba(255,255,255,.05), inset 0 10px 18px rgba(0,0,0,.35);
}
@media (prefers-color-scheme: dark){
  :root[data-theme="system"] .rr-theme .watch-body, :root:not([data-theme]) .rr-theme .watch-body{ background:linear-gradient(180deg,#0f172a,#111827); border-color:#1f2937; box-shadow:0 8px 20px rgba(0,0,0,.30) inset,0 10px 24px rgba(0,0,0,.26); }
  :root[data-theme="system"] .rr-theme .watch-screen, :root:not([data-theme]) .rr-theme .watch-screen{ background:#0b1220; border-color:#1f2937; color:var(--ink); }
}

/* Place and scale the watch in the hero group; hide on small screens */
.rr-theme .iphone-group .watch{ align-self:center; transform:scale(.75); transform-origin:center; margin-top:24px; }
@media (max-width: 720px){ .rr-theme .watch{ display:none; } }
.rr-theme .screen{ background:#ffffff; border-radius:30px; height:100%; padding:14px; overflow:hidden; border:1px solid #e5e7eb; }
.rr-theme .chat{ display:grid; gap:8px; margin-top:10px; }
.rr-theme .bubble{ max-width:80%; padding:10px 12px; border-radius:16px; font-size:14px; box-shadow:0 4px 10px rgba(0,0,0,.06); }
.rr-theme .bubble.rr{ background:#e9fbe9; border:1px solid #bde9bd; justify-self:start; }
.rr-theme .bubble.you{ background:#e6f0ff; border:1px solid #c7dcff; justify-self:end; }
/* Smaller bubbles inside the watch screen */
.rr-theme .watch .chat{ height:100%; display:grid; place-content:center; gap:8px; margin-top:0; }
.rr-theme .watch .bubble{ font-size:12px; padding:8px 10px; max-width:86%; }

.rr-theme footer.min{ border-top:1px solid var(--bd); background:#fff; padding:24px 0; margin-top:48px; color:var(--muted); font-size:14px; }
.rr-theme footer.min nav{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:6px; }
.rr-theme footer.min a{ color:#4b5563; text-decoration:none; }
.rr-theme footer.min a:hover{ text-decoration:underline; }

.rr-theme .card,.rr-theme .min-card,.rr-theme .glass{ transition:transform .18s ease,box-shadow .18s ease; }
.rr-theme .card:hover,.rr-theme .min-card:hover,.rr-theme .glass:hover{ transform:translateY(-4px); box-shadow:0 16px 40px rgba(0,0,0,.10); }

/* Unscoped CTA */
.rr-cta,a.rr-cta{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:14px 22px; border-radius:12px; font-weight:700; text-decoration:none; border:0; cursor:pointer;
  min-height:var(--tap);
}
.rr-cta,a.rr-cta{ background:var(--bg-elev); color:var(--ink); }
.rr-cta.primary,a.rr-cta.primary{ background:#0d6efd; color:#fff; box-shadow:0 8px 24px rgba(13,110,253,.16); }
.rr-cta.primary:hover,a.rr-cta.primary:hover{ background:#0b5ed7; }
.rr-cta:focus-visible,a.rr-cta:focus-visible{ outline:3px solid rgba(13,110,253,.35); outline-offset:3px; border-radius:12px; }

/* Mobile-first spacing & grids */
.rr-theme .rr-container{ max-width:1120px; margin:0 auto; padding:0 var(--container-pad); }
.rr-theme .section{ padding:var(--section-pad-y) 0; }
.rr-theme .rr-h1{ font-size:clamp(28px,7vw,56px); }
.rr-theme .rr-sub{ font-size:clamp(15px,4vw,20px); }

.rr-theme .card,.rr-theme .min-card,.rr-theme .glass{ padding:18px; }
.rr-theme .grid{ display:grid; gap:18px; }
/* Multi-phone layout inside hero */
.rr-theme .iphone-group{ display:flex; flex-wrap:wrap; gap:18px; justify-content:center; align-items:flex-end; }
.rr-theme .iphone-group .right-stack{ display:flex; flex-direction:column; gap:16px; align-items:center; align-self:flex-end; }
.rr-theme .iphone-group .iphone{ margin:24px 0 0; }
.rr-theme .iphone-group .laptop{ margin:24px 0 0; }
/* Make side devices slightly smaller but bottom-aligned */
.rr-theme .iphone-group .is-side{ transform:scale(.88); transform-origin:bottom center; }
/* Explicit scales for stacked items on the right */
.rr-theme .iphone-group .right-stack .watch{ transform:none; }
.rr-theme .iphone-group .right-stack .laptop{ transform:none; }

@media (max-width: 780px){ .rr-theme .iphone-group .right-stack .watch{ display:none; } }
/* Ensure pricing cards keep a bit more padding on small screens */
.rr-theme .price-card{ padding:20px; }
.rr-theme .grid.cols-2,.rr-theme .grid.cols-3,.rr-theme .grid.cols-4{ grid-template-columns:1fr; }
@media (min-width:720px){
  .rr-theme .grid.cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .rr-theme .grid.cols-3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width:980px){
  .rr-theme .grid.cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .rr-theme .grid.cols-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}

/* Increase section rhythm on wider screens */
@media (min-width: 980px){
  :root{ --section-pad-y: 64px; }
}

/* Vehicle card */
.rr-card.rr-veh{ border-radius:16px; padding:14px; background:var(--glass,rgba(255,255,255,.65)); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border:1px solid var(--bd,rgba(15,23,42,.08)); }
.rr-veh__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.rr-plate-wrap{ transform:scale(.9); transform-origin:left center; }
.uk-plate.uk-plate--sm{ display:inline-flex; }
.rr-veh__title{ margin-top:6px; display:flex; align-items:center; gap:8px; font-size:.95rem; color:#334155; }
.rr-veh__make{ font-weight:700; color:#0f172a; letter-spacing:-.01em; }
.rr-veh__year{ color:#334155; }
.rr-veh__title .dot{ color:#94a3b8; }
.rr-veh__grid{ margin-top:10px; display:grid; gap:8px; grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (min-width:560px){ .rr-veh__grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.rr-tile{ border:1px solid var(--bd,rgba(15,23,42,.08)); border-radius:12px; padding:10px 12px; min-height:68px; display:flex; flex-direction:column; justify-content:center; }
.rr-tlabel{ font-size:12px; text-transform:uppercase; letter-spacing:.02em; color:#64748b; }
.rr-tvalue{ margin-top:2px; font-weight:600; color:#0f172a; display:flex; align-items:center; gap:6px; }
.rr-veh__reason{ margin-top:8px; font-size:.9rem; color:#475569; }
.rr-veh__reason span{ font-weight:600; color:#0f172a; }
.rr-veh__actions{ margin-top:12px; display:flex; gap:8px; flex-wrap:wrap; }
.rr-cta.outline{ border:1px solid var(--bd,rgba(15,23,42,.12)); background:transparent; border-radius:12px; padding:10px 14px; }
.grid .rr-card.rr-veh{ height:100%; }
.rr-container{ max-width:980px; margin-inline:auto; padding-inline:16px; }
.rr-center{ text-align:center; display:grid; justify-items:center; }
.rr-center>*{ margin-inline:auto; }
.hero .sub{ text-align:center; margin-inline:auto; }
footer.trust{ margin:16px auto 0; text-align:center; color:#6b7280; font-size:.9rem; }

/* === Modal ============================================================= */
.modal-backdrop{ position:fixed; inset:0; display:grid; place-items:center; background:rgba(0,0,0,.4); z-index:50; }
.modal{ background:#fff; width:100%; max-width:420px; border-radius:12px; padding:16px; box-shadow:0 10px 30px rgba(0,0,0,.2); }
.modal__header{ margin-bottom:8px; }
.modal__title{ margin:0; font-size:18px; }
.modal__body{ margin:8px 0 16px; }
.modal__footer{ display:flex; gap:8px; justify-content:flex-end; }

/* Simple util */
.hidden,.is-hidden{ display:none !important; }

/* === Waitlist form ===================================================== */
.wl-card{ max-width:560px; margin:24px auto 0; padding:20px; }
.wl-form{ display:block; }
.wl-row{ display:grid; gap:10px; grid-template-columns:1fr; }
@media (min-width:640px){ .wl-row{ grid-template-columns:1fr 1fr; } }
.wl-field{ display:flex; flex-direction:column; gap:6px; }
.rr-label{ font-weight:600; font-size:14px; color:#0f172a; }
.rr-optional{ color:var(--muted); font-weight:400; }
.rr-input{ width:100%; padding:12px 14px; border:1px solid var(--bd); border-radius:10px; font-size:16px; background:#fff; color:var(--ink); }
.rr-input:focus{ outline:none; box-shadow:var(--ring); border-color:#93c5fd; }
.wl-consent{ margin:12px 0 4px; }
.rr-check{ display:flex; align-items:flex-start; gap:8px; font-size:14px; color:#374151; }
.rr-check input[type="checkbox"]{ width:18px; height:18px; margin-top:2px; }
.wl-actions{ display:flex; align-items:center; gap:10px; margin-top:10px; flex-wrap:wrap; }
.rr-hint{ color:var(--muted); font-size:12px; }
.wl-alert{ border-radius:10px; padding:10px 12px; margin-bottom:12px; font-size:14px; }
.wl-alert--error{ background:var(--bad-bg); border:1px solid var(--bad-bd); color:var(--bad-ink); }
.wl-toast{ max-width:560px; margin:16px auto 0; padding:12px 14px; border-radius:10px; font-size:14px; }
.wl-toast--ok{ background:#ecfdf5; border:1px solid #bbf7d0; color:#065f46; }

/* === Inline confirmation box ========================================== */
.confirm-box{
  border:1px solid var(--rr-border);
  border-radius:var(--rr-radius);
  background:var(--rr-danger-bg);
  padding:14px 16px; margin-top:12px;
  transform-origin:top; animation:rr-expand 160ms ease-out both;
}
.confirm-box.is-hidden{ display:none !important; animation:none; }
.confirm-box__header{ display:flex; align-items:center; gap:8px; margin-bottom:6px; color:var(--rr-danger-ink); }
.confirm-box__icon{ font-size:1.1rem; line-height:1; }
.confirm-box__text{ margin:0 0 12px; color:var(--rr-muted); }
.confirm-box__actions{ display:flex; gap:var(--rr-gap); justify-content:flex-end; }

@keyframes rr-expand{ 0%{ opacity:0; transform:scaleY(0.96); } 100%{ opacity:1; transform:scaleY(1); } }
@media (prefers-reduced-motion:reduce){ .confirm-box{ animation:none; } }

/* === Billing card polish ============================================== */
.billing-row{ display:grid; gap:.75rem; grid-template-columns:1fr; }
@media (min-width:768px){ .billing-row{ grid-template-columns:1fr 1fr; } }
.plan-name{ font-weight:600; }
.plan-price{ color:var(--text-muted,#6b7280); }
.status-badge{ display:inline-block; margin-top:.25rem; font-size:.85rem; padding:.2rem .5rem; border-radius:999px; border:1px solid transparent; }
.status-badge.ok{ color:#065f46; background:#d1fae5; border-color:#10b981; }
.status-badge.warn{ color:#92400e; background:#fef3c7; border-color:#f59e0b; }

.invoices-head{ font-weight:600; margin-bottom:.5rem; }
.invoice-list{ list-style:none; padding:0; margin:0; }
.invoice-item{
  display:grid; grid-template-columns:1.2fr .8fr .8fr auto; gap:.5rem; align-items:center;
  padding:.5rem 0; border-top:1px solid #e5e7eb;
}
.invoice-item:first-child{ border-top:0; }
.invoice-no{ font-weight:500; font-variant-numeric:tabular-nums; }
.invoice-date,.invoice-total{ color:var(--text-muted,#6b7280); }
.btn.sm{ padding:.25rem .5rem; font-size:.85rem; }
.divider{ height:1px; background:#e5e7eb; margin:1rem 0; }

/* Plans grid/cards */
.plans.grid{ display:grid; gap:2rem; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); margin-top:2rem; }
.plan-card{ text-align:center; padding:2rem; border:1px solid #e5e7eb; border-radius:1rem; box-shadow:0 4px 12px rgba(0,0,0,.05); transition:transform .2s,box-shadow .2s; }
.plan-card:hover{ transform:translateY(-4px); box-shadow:0 8px 18px rgba(0,0,0,.08); }
.plan-title{ font-size:1.3rem; font-weight:600; margin-bottom:.25rem; }
.plan-price{ font-size:1.1rem; font-weight:500; color:#2563eb; margin-bottom:1rem; }
.plan-features{ list-style:none; padding:0; margin:0 0 1.5rem; color:#374151; font-size:.95rem; line-height:1.5; }
.plan-features li{ margin:.25rem 0; }
.btn.full-width{ width:100%; }

/* Compact billing plans */
.plans.grid.compact{ gap:1rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); margin-top:1rem; }
.plan-card.sm{ padding:1rem; }
.plan-card.sm h2{ font-size:1.1rem; margin:0 0 .25rem; }
.plan-card.sm .price{ font-size:1rem; color:#0f172a; margin:.25rem 0 .75rem; }
.plan-card.sm .features{ list-style:none; padding:0; margin:0 0 .75rem; color:#475569; font-size:.9rem; line-height:1.45; }
.plan-card.sm .features li{ margin:.15rem 0; }
.plan-card.popular{ position:relative; border:2px solid #dbeafe; box-shadow:0 14px 40px rgba(13,110,253,.12); }
.plan-card .pill.popular{ position:absolute; top:-10px; right:12px; background:#eef2ff; border:1px solid #dbeafe; color:#1d4ed8; font-weight:700; }
.plan-card.is-selected{ outline:2px solid #2563eb; outline-offset:2px; }

/* (triangle variant removed per request) */

/* Processing page */
.processing-wrap{ min-height:70vh; display:flex; align-items:center; justify-content:center; padding:2rem; background:#f9fafb; }
.processing-card{ background:var(--bg-elev); border:1px solid var(--bd); border-radius:1rem; padding:2rem 2.5rem; max-width:480px; width:100%; text-align:center; box-shadow:0 4px 14px rgba(0,0,0,.05); }
.processing-card h1{ font-size:1.5rem; font-weight:600; margin-bottom:.5rem; }
.processing-card p{ margin:.25rem 0; color:#4b5563; }
.processing-card .subtle{ color:#6b7280; font-size:.95rem; margin-bottom:1.5rem; }
.spinner{ margin:1.5rem auto; width:40px; height:40px; border:4px solid #e5e7eb; border-top:4px solid #2563eb; border-radius:50%; animation:spin 1s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.button-row{ margin-top:1.5rem; }

/* === Settings layout ==================================================== */
.settings-shell{ display:grid; grid-template-columns:280px minmax(0,1fr); gap:2rem; align-items:start; padding-top:calc(var(--header-h) + var(--header-gap)); }
.settings-nav{ position:sticky; top:1rem; align-self:start; background:#fff; border:1px solid var(--border,#e5e7eb); border-radius:12px; padding:1rem; }
.settings-nav__head h1{ font-size:1.25rem; margin:0 0 .25rem; }
.settings-nav__head .muted{ color:#6b7280; margin:0 0 .5rem; }
.settings-nav__list{ display:grid; gap:.25rem; margin-top:.5rem; }
.settings-nav__link{ display:block; padding:.5rem .625rem; border-radius:8px; color:#374151; text-decoration:none; }
.settings-nav__link:hover{ background:#f3f4f6; }
.settings-nav__link.is-active{ background:#eef2ff; color:#3730a3; font-weight:600; }
.settings-nav__link.danger{ color:#b91c1c; }
.settings-nav__link.danger.is-active{ background:#fee2e2; color:#991b1b; }
.settings-content{ min-width:0; display:grid; gap:1.25rem; }

@media (max-width:920px){
  .settings-shell{ grid-template-columns:1fr; }
  .settings-nav{ position:static; }
}

/* =============== Fixed-header anchor offsets =========================== */
html{ scroll-padding-top:calc(var(--header-h) + var(--header-gap)); }
section[id],.card{ scroll-margin-top:calc(var(--header-h) + var(--header-gap)); }

/* === Brand header tagline tweaks ====================================== */
.site-brand .tagline{ font-size:13px; font-weight:400; color:#4b5563; line-height:1.3; margin-top:2px; }
@media (max-width:359px){ .site-brand .tagline{ display:none; } }
@media (min-width:640px){
  .site-brand a{ flex-direction:row !important; align-items:baseline !important; gap:6px !important; }
  .site-brand .tagline{ margin-top:0; white-space:nowrap; font-size:14px; }
}

/* Beta badge (theme-aware) */
.beta-badge{ display:inline-flex; align-items:center; gap:4px; padding:4px 10px; border-radius:999px; font-size:13px; font-weight:800; letter-spacing:.03em; background:#eef2ff; color:#1e40af; border:1px solid #bfdbfe; height:28px; align-self:center; }
:root[data-theme="dark"] .beta-badge{ background:#1f2937; color:#93c5fd; border-color:#334155; }

/* Beta banner */
.beta-banner{ background:#f1f5f9; border-bottom:1px solid var(--border); }
.beta-banner__inner{ max-width:980px; margin:0 auto; padding:8px 16px; display:flex; align-items:center; gap:10px; }
.beta-banner__text{ color:#334155; }
.beta-banner__link{ color:var(--link); text-decoration:underline; }
.beta-banner__link:hover{ color:var(--link-hover); }
.beta-banner__toggle{ display:none; }

:root[data-theme="dark"] .beta-banner{ background:#0e1626; border-color:var(--border); }
:root[data-theme="dark"] .beta-banner__text{ color:var(--ink); }

/* === Dark theme ======================================================== */
:root[data-theme="dark"]{
  --bg:#0b1220; --ink:#e5e7eb; --muted:#94a3b8; --border:#1f2937;
  --bg-elev:#111827; --glass:rgba(17,24,39,.6);
  --shadow:0 6px 18px rgba(0,0,0,.35);
  --shadow-md:0 6px 18px rgba(0,0,0,.45);
  --shadow-lg:0 10px 30px rgba(0,0,0,.55);
  --grey:#374151; --grey-ink:#e5e7eb; --grey-hover:#4b5563;
  --ok-bg:#0b2540;   --ok-bd:#153e75;   --ok-ink:#93c5fd;
  --bad-bg:#3b0a0f;  --bad-bd:#7f1d1d;  --bad-ink:#fecaca;
  --warn-bg:#422006; --warn-bd:#b45309; --warn-ink:#fed7aa;
  --link:#93c5fd;       /* blue-300 */
  --link-hover:#bfdbfe; /* blue-200 */
}

body[data-theme="dark"], :root[data-theme="dark"] body{
  background:var(--bg);
  color:var(--ink);
}

.processing-wrap{ background:var(--bg); }

/* Dark overrides for hero/soft sections and glass */
:root[data-theme="dark"] .hero-wrap{ background:#0e1626; border-bottom:1px solid var(--border); }
:root[data-theme="dark"] .rr-theme .rr-hero{ background:linear-gradient(180deg,#0b1220,#0e1626 60%,#0b1220); border-bottom:1px solid var(--border); }
:root[data-theme="dark"] .rr-theme .section.soft{ background:#0e1626; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
:root[data-theme="dark"] .rr-theme .glass{ background:rgba(17,24,39,.55); border:1px solid rgba(148,163,184,.18); box-shadow:0 10px 30px rgba(0,0,0,.45); }

/* Header/footer inline style overrides */
/* Header/footer (override inline light styles) */
body[data-theme="dark"] #site-header,
:root[data-theme="dark"] #site-header{ background:var(--bg-elev) !important; border-bottom:1px solid var(--border) !important; }
body[data-theme="dark"] footer,
:root[data-theme="dark"] footer{ background:var(--bg-elev) !important; border-top:1px solid var(--border) !important; }
/* Header link color fixes in dark */
:root[data-theme="dark"] #site-header a{ color:var(--ink) !important; }
:root[data-theme="dark"] .site-brand .tagline{ color:var(--muted) !important; }

/* Price cards + popular badge readable in dark */
:root[data-theme="dark"] .plan-card.popular{ border-color:#334155; box-shadow:0 14px 40px rgba(0,0,0,.5); }
:root[data-theme="dark"] .plan-card .pill.popular{ background:#1f2937; border-color:#334155; color:#93c5fd; }

/* Override rr-theme scoped tokens in dark mode (ensures sections using rr-theme vars flip) */
:root[data-theme="dark"] .rr-theme{
  --ink:#e5e7eb; --muted:#94a3b8;
  --bg:#0b1220; --soft:#0e1626; --bd:#1f2937;
  --shadow:0 10px 30px rgba(0,0,0,.55);
  --cta-blue:#3b82f6; --cta-blue-ink:#fff; --cta-blue-hover:#2563eb;
}

/* Ensure all sections inherit dark background */
:root[data-theme="dark"] .rr-theme .section{ background:var(--bg); }

/* Icons in info cards readable in dark */
:root[data-theme="dark"] .rr-theme .icon svg{ color:var(--ink); stroke:currentColor; }

/* iPhone mock in dark */
:root[data-theme="dark"] .rr-theme .iphone{
  background:linear-gradient(180deg,#0f172a,#111827);
  border-color:#1f2937;
  box-shadow:0 18px 50px rgba(0,0,0,.32) inset,0 10px 40px rgba(0,0,0,.28);
}
:root[data-theme="dark"] .rr-theme .iphone::after{ border-color:rgba(255,255,255,.12); }
:root[data-theme="dark"] .rr-theme .android{
  background:linear-gradient(180deg,#0f172a,#111827);
  border-color:#1f2937;
  box-shadow:0 18px 50px rgba(0,0,0,.32) inset,0 10px 40px rgba(0,0,0,.28);
}
:root[data-theme="dark"] .rr-theme .android::after{ border-color:rgba(255,255,255,.12); }
:root[data-theme="dark"] .rr-theme .android::before{ background:#000; border-color:rgba(255,255,255,.25); }

/* Laptop in dark */
:root[data-theme="dark"] .rr-theme .laptop{
  background:linear-gradient(180deg,#0f172a,#111827);
  border-color:#1f2937;
  box-shadow:0 10px 28px rgba(0,0,0,.35) inset,0 10px 32px rgba(0,0,0,.28);
}
:root[data-theme="dark"] .rr-theme .laptop::after{ background:linear-gradient(180deg,#111827,#0f172a); border-color:#1f2937; }
:root[data-theme="dark"] .rr-theme .laptop .screen{ background:#0b1220; border-color:#1f2937; }

:root[data-theme="dark"] .rr-theme .android{
  background:linear-gradient(180deg,#0f172a,#111827);
  border-color:#1f2937;
  box-shadow:0 18px 50px rgba(0,0,0,.32) inset,0 10px 40px rgba(0,0,0,.28);
}
:root[data-theme="dark"] .rr-theme .android::after{ border-color:rgba(255,255,255,.12); }
:root[data-theme="dark"] .rr-theme .screen{ background:#0b1220; border-color:#1f2937; }
:root[data-theme="dark"] .rr-theme .bubble{ box-shadow:0 4px 10px rgba(0,0,0,.35); color:var(--ink); }
:root[data-theme="dark"] .rr-theme .bubble.rr{ background:#0f2a1a; border-color:#14532d; }
:root[data-theme="dark"] .rr-theme .bubble.you{ background:#0d1b34; border-color:#1e3a8a; }

/* Feature card icons background in dark */
:root[data-theme="dark"] .rr-theme .icon{ background:linear-gradient(180deg,#0f172a,#0b1220); border-color:#334155; }

/* Theme toggle (header) */
.theme-toggle{
  display:inline-block; width:50px; height:28px; border-radius:999px; border:1px solid var(--bd);
  background:var(--bg-elev); position:relative; cursor:pointer; padding:0; outline:none;
}
.theme-toggle::after{
  content:""; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%;
  background:#ffffff; box-shadow:0 2px 6px rgba(0,0,0,.25), inset 0 0 0 1px rgba(0,0,0,.06);
  transition:transform .25s ease, background-color .25s ease, box-shadow .25s ease;
}
:root[data-theme="dark"] .theme-toggle{ background:#0f172a; border-color:#334155; }
:root[data-theme="dark"] .theme-toggle::after{ transform:translateX(22px); background:#e5e7eb; box-shadow:0 2px 6px rgba(0,0,0,.4), inset 0 0 0 1px rgba(0,0,0,.08); }
.theme-toggle[data-state="system"]::after{ transform:translateX(11px); }

/* Theme toggle labels */
.theme-toggle-labels{ display:inline-flex; align-items:center; gap:6px; font-size:12px; }
.theme-toggle-labels .theme-label{ color:var(--muted, #6b7280); cursor:pointer; line-height:1; }
.theme-toggle-labels .theme-label.is-active{ color:var(--ink, #0f172a); font-weight:600; }

/* Smooth theme change: animate core surfaces only when toggling */
:root.theme-anim, :root.theme-anim body,
:root.theme-anim .card, :root.theme-anim .glass, :root.theme-anim .min-card,
:root.theme-anim #site-header, :root.theme-anim footer,
:root.theme-anim .hero-wrap, :root.theme-anim .section.soft,
:root.theme-anim .settings-nav, :root.theme-anim .modal,
:root.theme-anim input, :root.theme-anim textarea, :root.theme-anim select{
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
}

/* System theme support: when user chooses system, mirror dark overrides on dark-preference devices */
@media (prefers-color-scheme: dark){
  :root[data-theme="system"], :root:not([data-theme]){
    --bg:#0b1220; --ink:#e5e7eb; --muted:#94a3b8; --border:#1f2937;
    --bg-elev:#111827; --glass:rgba(17,24,39,.6);
    --shadow:0 6px 18px rgba(0,0,0,.35);
    --shadow-md:0 6px 18px rgba(0,0,0,.45);
    --shadow-lg:0 10px 30px rgba(0,0,0,.55);
    --grey:#374151; --grey-ink:#e5e7eb; --grey-hover:#4b5563;
    --ok-bg:#0b2540; --ok-bd:#153e75; --ok-ink:#93c5fd;
    --bad-bg:#3b0a0f; --bad-bd:#7f1d1d; --bad-ink:#fecaca;
    --warn-bg:#422006; --warn-bd:#b45309; --warn-ink:#fed7aa;
    --link:#93c5fd; --link-hover:#bfdbfe;
  }
  /* Beta banner + badge (system-dark) */
  :root[data-theme="system"] .beta-banner, :root:not([data-theme]) .beta-banner{ background:#0e1626; border-color:var(--border); }
  :root[data-theme="system"] .beta-banner__text, :root:not([data-theme]) .beta-banner__text{ color:var(--ink); }
  :root[data-theme="system"] .beta-badge, :root:not([data-theme]) .beta-badge{ background:#1f2937; color:#93c5fd; border-color:#334155; }

  :root[data-theme="system"] .hero-wrap, :root:not([data-theme]) .hero-wrap{ background:#0e1626; border-bottom:1px solid var(--border); }
  :root[data-theme="system"] .rr-theme .rr-hero, :root:not([data-theme]) .rr-theme .rr-hero{ background:linear-gradient(180deg,#0b1220,#0e1626 60%,#0b1220); border-bottom:1px solid var(--border); }
  :root[data-theme="system"] .rr-theme .section.soft, :root:not([data-theme]) .rr-theme .section.soft{ background:#0e1626; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
  :root[data-theme="system"] .rr-theme .glass, :root:not([data-theme]) .rr-theme .glass{ background:rgba(17,24,39,.55); border:1px solid rgba(148,163,184,.18); box-shadow:0 10px 30px rgba(0,0,0,.45); }
  :root[data-theme="system"] #site-header, :root:not([data-theme]) #site-header{ background:var(--bg-elev) !important; border-bottom:1px solid var(--border) !important; }
  :root[data-theme="system"] footer, :root:not([data-theme]) footer{ background:var(--bg-elev) !important; border-top:1px solid var(--border) !important; }
  :root[data-theme="system"] #site-header a, :root:not([data-theme]) #site-header a{ color:var(--ink) !important; }
  :root[data-theme="system"] .site-brand .tagline, :root:not([data-theme]) .site-brand .tagline{ color:var(--muted) !important; }
  :root[data-theme="system"] .plan-card.popular, :root:not([data-theme]) .plan-card.popular{ border-color:#334155; box-shadow:0 14px 40px rgba(0,0,0,.5); }
  :root[data-theme="system"] .plan-card .pill.popular, :root:not([data-theme]) .plan-card .pill.popular{ background:#1f2937; border-color:#334155; color:#93c5fd; }
  :root[data-theme="system"] .rr-theme{ --ink:#e5e7eb; --muted:#94a3b8; --bg:#0b1220; --soft:#0e1626; --bd:#1f2937; --shadow:0 10px 30px rgba(0,0,0,.55); --cta-blue:#3b82f6; --cta-blue-ink:#fff; --cta-blue-hover:#2563eb; }
  :root[data-theme="system"] .rr-theme .section, :root:not([data-theme]) .rr-theme .section{ background:var(--bg); }
  :root[data-theme="system"] .rr-theme .icon svg, :root:not([data-theme]) .rr-theme .icon svg{ color:var(--ink); stroke:currentColor; }
  :root[data-theme="system"] .rr-theme .card, :root[data-theme="system"] .rr-theme .min-card, :root[data-theme="system"] .rr-theme .faq .qa,
  :root[data-theme="system"] .stat, :root[data-theme="system"] .legal__card, :root[data-theme="system"] .rr-cadence__item, :root[data-theme="system"] .modal, :root[data-theme="system"] .settings-nav,
  :root:not([data-theme]) .rr-theme .card, :root:not([data-theme]) .rr-theme .min-card, :root:not([data-theme]) .rr-theme .faq .qa,
  :root:not([data-theme]) .stat, :root:not([data-theme]) .legal__card, :root:not([data-theme]) .rr-cadence__item, :root:not([data-theme]) .modal, :root:not([data-theme]) .settings-nav{
    background:var(--bg-elev) !important; border-color:var(--border) !important; color:var(--ink) !important;
  }
  :root[data-theme="system"] .plan-card.sm .features, :root:not([data-theme]) .plan-card.sm .features,
  :root[data-theme="system"] .rr-theme .min-card .muted, :root:not([data-theme]) .rr-theme .min-card .muted,
  :root[data-theme="system"] .hero-sub, :root:not([data-theme]) .hero-sub,
  :root[data-theme="system"] .hero-text .sub, :root:not([data-theme]) .hero-text .sub,
  :root[data-theme="system"] .auth-head .sub, :root:not([data-theme]) .auth-head .sub,
  :root[data-theme="system"] .lp-sub, :root:not([data-theme]) .lp-sub,
  :root[data-theme="system"] .rr-veh__reason, :root:not([data-theme]) .rr-veh__reason{ color:var(--muted) !important; }
  :root[data-theme="system"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="button"]):not([type="submit"]),
  :root[data-theme="system"] textarea, :root[data-theme="system"] select,
  :root:not([data-theme]) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="button"]):not([type="submit"]),
  :root:not([data-theme]) textarea, :root:not([data-theme]) select{ background:#0f172a !important; color:var(--ink) !important; border:1px solid #334155 !important; }
  :root[data-theme="system"] .rr-theme .iphone, :root:not([data-theme]) .rr-theme .iphone{ background:linear-gradient(180deg,#0f172a,#111827); border-color:#1f2937; box-shadow:0 18px 50px rgba(0,0,0,.32) inset,0 10px 40px rgba(0,0,0,.28); }
  :root[data-theme="system"] .rr-theme .iphone::after, :root:not([data-theme]) .rr-theme .iphone::after{ border-color:rgba(255,255,255,.12); }
  /* Laptop mock in system-dark */
  :root[data-theme="system"] .rr-theme .laptop, :root:not([data-theme]) .rr-theme .laptop{ background:linear-gradient(180deg,#0f172a,#111827); border-color:#1f2937; box-shadow:0 10px 28px rgba(0,0,0,.35) inset,0 10px 32px rgba(0,0,0,.28); }
  :root[data-theme="system"] .rr-theme .laptop::after, :root:not([data-theme]) .rr-theme .laptop::after{ background:linear-gradient(180deg,#111827,#0f172a); border-color:#1f2937; }
  :root[data-theme="system"] .rr-theme .laptop .screen, :root:not([data-theme]) .rr-theme .laptop .screen{ background:#0b1220; border-color:#1f2937; }
  :root[data-theme="system"] .rr-theme .android, :root:not([data-theme]) .rr-theme .android{ background:linear-gradient(180deg,#0f172a,#111827); border-color:#1f2937; box-shadow:0 18px 50px rgba(0,0,0,.32) inset,0 10px 40px rgba(0,0,0,.28); }
  :root[data-theme="system"] .rr-theme .android::after, :root:not([data-theme]) .rr-theme .android::after{ border-color:rgba(255,255,255,.12); }
  :root[data-theme="system"] .rr-theme .android::before, :root:not([data-theme]) .rr-theme .android::before{ background:#000; border-color:rgba(255,255,255,.25); }
  :root[data-theme="system"] .rr-theme .android, :root:not([data-theme]) .rr-theme .android{ background:linear-gradient(180deg,#0f172a,#111827); border-color:#1f2937; box-shadow:0 18px 50px rgba(0,0,0,.32) inset,0 10px 40px rgba(0,0,0,.28); }
  :root[data-theme="system"] .rr-theme .android::after, :root:not([data-theme]) .rr-theme .android::after{ border-color:rgba(255,255,255,.12); }
  :root[data-theme="system"] .rr-theme .screen, :root:not([data-theme]) .rr-theme .screen{ background:#0b1220; border-color:#1f2937; }
  :root[data-theme="system"] .rr-theme .bubble, :root:not([data-theme]) .rr-theme .bubble{ box-shadow:0 4px 10px rgba(0,0,0,.35); color:var(--ink); }
  :root[data-theme="system"] .rr-theme .bubble.rr, :root:not([data-theme]) .rr-theme .bubble.rr{ background:#0f2a1a; border-color:#14532d; }
  :root[data-theme="system"] .rr-theme .bubble.you, :root:not([data-theme]) .rr-theme .bubble.you{ background:#0d1b34; border-color:#1e3a8a; }
  :root[data-theme="system"] .rr-theme .icon, :root:not([data-theme]) .rr-theme .icon{ background:linear-gradient(180deg,#0f172a,#0b1220); border-color:#334155; }
}

/* Broader dark overrides for components still using light tokens */
:root[data-theme="dark"] .rr-theme .card,
:root[data-theme="dark"] .rr-theme .min-card,
:root[data-theme="dark"] .rr-theme .faq .qa,
:root[data-theme="dark"] .stat,
:root[data-theme="dark"] .legal__card,
:root[data-theme="dark"] .rr-cadence__item,
:root[data-theme="dark"] .modal,
:root[data-theme="dark"] .settings-nav{
  background:var(--bg-elev) !important;
  border-color:var(--border) !important;
  color:var(--ink) !important;
}

:root[data-theme="dark"] .plan-card.sm .features,
:root[data-theme="dark"] .rr-theme .min-card .muted,
:root[data-theme="dark"] .hero-sub,
:root[data-theme="dark"] .hero-text .sub,
:root[data-theme="dark"] .auth-head .sub,
:root[data-theme="dark"] .lp-sub,
:root[data-theme="dark"] .rr-veh__reason{
  color:var(--muted) !important;
}

/* Icons in the "What you get" cards */
:root[data-theme="dark"] .rr-theme .min-card .icon svg{ color:var(--ink); stroke:currentColor; }

/* Inputs and flash boxes */
body[data-theme="dark"] .field input[type="text"],
body[data-theme="dark"] .field input[type="email"],
body[data-theme="dark"] .field input[type="tel"],
body[data-theme="dark"] .field input[type="password"]{
  background:#0f172a; border-color:#334155; color:var(--ink);
}

/* Global form controls in dark mode (outside of .field wrappers) */
:root[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="button"]):not([type="submit"]),
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select{
  background:#0f172a !important;
  color:var(--ink) !important;
  border:1px solid #334155 !important;
}

:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder{
  color:var(--muted);
}

:root[data-theme="dark"] input:focus,
:root[data-theme="dark"] textarea:focus,
:root[data-theme="dark"] select:focus{
  outline:none;
  border-color:#3b82f6 !important;
  box-shadow:0 0 0 3px rgba(59,130,246,.30);
}

body[data-theme="dark"] .alert-box,
body[data-theme="dark"] .flash-center .flash-box,
body[data-theme="dark"] .flash-box{
  background:var(--bg-elev); border-color:var(--border); color:var(--ink);
}

/* Phone mock screen */
:root[data-theme="dark"] .rr-theme .screen{ background:#0b1220; border-color:#1f2937; }

/* FAQ tiles */
:root[data-theme="dark"] .faq .qa{ background:var(--bg-elev); border-color:var(--border); }

/* Settings shell with spacing */
.settings-shell {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
  max-width: 960px;
  margin: 0 auto;
  padding: calc(var(--header-h) + var(--header-gap) + 16px) 1.5rem 2rem;
  border-top: 1px solid var(--border);
}

@media (max-width: 920px) {
  .settings-shell {
    grid-template-columns: 1fr;
    padding: 0 1rem;       /* slightly tighter padding on mobile */
  }
}

/* Thin, full-width divider directly under the sticky header */
.header-divider{
  width:100%;
  border-top:1px solid var(--border, #e5e7eb);
}

:root {
  --header-h: 64px;   /* fallback */
  --header-gap: 16px; /* breathing room */
}

body.has-fixed-header main,
body.has-fixed-header .settings-shell {
  margin-top: calc(var(--header-h) + var(--header-gap));
}

/* Fallbacks + spacing token */
:root{
  --header-h: 64px;   /* fallback; JS sets real height */
  --header-gap: 16px; /* breathing room below header */
}

/* Push everything below header */
.under-header{
  padding-top: calc(var(--header-h) + var(--header-gap));
}

/* --- Header nav button sizing: keep compact and non-stretch --- */
.site-nav .btn, .site-nav a.btn{
  width: auto !important;
  flex: 0 0 auto;
  padding: 6px 12px;
  height: 32px;
  font-size: 13px;
  border-radius: 8px;
  box-shadow: none;
}
.site-nav .btn.primary, .site-nav a.btn.primary{
  box-shadow: none;
}
.site-nav .theme-toggle-wrap{ align-self:center; }

/* Air Datepicker (light + dark), styled to match site */
.air-datepicker{ border:1px solid var(--bd,#e5e7eb); border-radius:12px; box-shadow:0 12px 30px rgba(15,23,42,.12); }
.air-datepicker-nav{ padding:6px 8px; }
.air-datepicker-nav--title i{ font-style:normal; opacity:.9; }
.air-datepicker-body--day-names{ opacity:.8; font-weight:600; }
.air-datepicker-body--cells.-days- .air-datepicker-cell{ border-radius:10px; }
.air-datepicker-cell.-day-.-current-{ box-shadow: inset 0 0 0 2px #93c5fd; }
.air-datepicker-cell.-selected-{ background:#0d6efd; color:#fff; }
.air-datepicker-cell.-focus-:not(.-selected-){ background:#eef2ff; color:#1e3a8a; }

:root[data-theme="dark"] .air-datepicker{ background:#121318; border-color:rgba(255,255,255,.14); box-shadow:0 12px 30px rgba(0,0,0,.5); color:#e5e7eb; }
:root[data-theme="dark"] .air-datepicker-nav{ color:#e5e7eb; }
:root[data-theme="dark"] .air-datepicker-body--day-names{ color:#a3a7b3; }
:root[data-theme="dark"] .air-datepicker-cell.-focus-:not(.-selected-){ background:#1f2937; color:#e5e7eb; }


/* Make anchor jumps land below the header */
html{
  scroll-padding-top: calc(var(--header-h) + var(--header-gap));
}
section[id], .card{
  scroll-margin-top: calc(var(--header-h) + var(--header-gap));
}

/* Sidebar */
  .settings-nav {
    position: sticky;
    top: calc(var(--header-h) + var(--header-gap)); /* <-- was 1rem */
    align-self: start;
    background: #fff;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 12px;
    padding: 1rem;
  }

/* === Enrol page helpers (migrated from inline styles) ================== */
.rr-theme .section.compact{ padding:48px 0 32px; }
.rr-theme .rr-h1.rr-h1--sm{ font-size:clamp(28px,4vw,40px); margin-bottom:6px; }
.rr-narrow{ max-width:560px; margin:0 auto; }
.rr-narrow-sm{ max-width:480px; margin:0 auto; }
.rr-narrow-md{ max-width:640px; margin:0 auto; }
.mb-6{ margin-bottom:6px; }
.mb-10{ margin-bottom:10px; }
.mb-12{ margin-bottom:12px; }
.mb-8{ margin-bottom:8px; }
.mb-18{ margin-bottom:18px; }
.mb-16{ margin-bottom:16px; }
.mt-10{ margin-top:10px; }
.mt-8{ margin-top:8px; }
.mt-12{ margin-top:12px; }
.mt-16{ margin-top:16px; }
.mt-4{ margin-top:4px; }
.p-20{ padding:20px; }
.m-0{ margin:0 !important; }
.text-sm{ font-size:14px; }

/* Admin warning strip */
.admin-warning-strip{ background:var(--bad-bg); color:var(--bad-ink); border-bottom:1px solid var(--bad-bd); }
.admin-warning-inner{ padding:10px 16px; text-align:center; font-weight:600; }

/* Badge variant for warnings */
.beta-badge.bad{ background:var(--bad-bg); color:var(--bad-ink); border-color:var(--bad-bd); }

/* Tiny layout helpers */
.inline-flex-center{ display:inline-flex; align-items:center; gap:8px; }
.ml-auto{ margin-left:auto; }
.mx-auto{ margin-left:auto; margin-right:auto; }
.gap-4{ gap:1rem; }
.py-3{ padding-top:.75rem; padding-bottom:.75rem; }
.border-b{ border-bottom:1px solid var(--border); }
.bg-white{ background:#fff; }
.bg-gray-50{ background:#f9fafb; }
.min-h-screen{ min-height:100vh; }
.opacity-70{ opacity:.7; }

/* Active link in admin nav */
header nav a.active{ font-weight:700; }

/* Admin header/nav */
.admin-body{ min-height:100vh; background:var(--bg); color:var(--ink); }
.admin-header{ background:var(--bg-elev); border-bottom:1px solid var(--border,#e5e7eb); }
.admin-header .container{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 16px; }
.admin-header .nav-left{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.admin-header .nav-left strong{ font-weight:800; margin-right:6px; }
.admin-header .nav-left a{ color:var(--ink); text-decoration:none; padding:6px 8px; border-radius:8px; }
.admin-header .nav-left a:hover{ background:var(--grey-hover); }
.admin-header .nav-left a.active{ background:#eef2ff; color:#1e40af; }
.admin-header .nav-right{ display:flex; align-items:center; gap:10px; margin-left:auto; }
.admin-header .nav-right .who{ font-size:14px; opacity:.7; color:var(--ink); }

/* Admin auth screen */
.admin-auth{ padding:48px 0 32px; }
.admin-auth .head{ text-align:center; margin-bottom:18px; }
.admin-auth .title{ font-size:clamp(26px,4vw,36px); margin:0 0 6px; font-weight:800; letter-spacing:-.02em; }
.admin-auth .sub{ margin:0; color:var(--muted); }
.text-center{ text-align:center; }

/* Brand + chip for admin auth */
.admin-brand{ display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:10px; }
.admin-brand img{ width:28px; height:28px; border-radius:6px; }
.admin-brand .brand-text{ font-weight:800; letter-spacing:.01em; }
.chip{ display:inline-flex; align-items:center; gap:6px; padding:2px 8px; border-radius:999px; font-size:12px; font-weight:700; border:1px solid var(--bd); }
.chip.bad{ background:var(--bad-bg); color:var(--bad-ink); border-color:var(--bad-bd); }

/* Neutral button that adapts in admin dark mode */
.admin-body .btn, .admin-body a.btn{ background:var(--bg-elev); color:var(--ink); }
:root[data-theme="dark"] .admin-body .btn, :root[data-theme="dark"] .admin-body a.btn{
  background:#1f2937; color:#e5e7eb; border-color:#334155;
}
@media (prefers-color-scheme: dark){
  :root[data-theme="system"] .admin-body .btn, :root[data-theme="system"] .admin-body a.btn{
    background:#1f2937; color:#e5e7eb; border-color:#334155;
  }
}
.admin-body .btn:hover, .admin-body a.btn:hover{ background:var(--grey-hover); }
:root[data-theme="dark"] .admin-body .btn:hover, :root[data-theme="dark"] .admin-body a.btn:hover{ background:#111827; }
@media (prefers-color-scheme: dark){
  :root[data-theme="system"] .admin-body .btn:hover, :root[data-theme="system"] .admin-body a.btn:hover{ background:#111827; }
}
.inline-flex{ display:inline-flex; }
.mt-2{ margin-top:.5rem; }

/* Generic layout helpers for Admin Panel */
.flex{ display:flex; }
.flex-wrap{ flex-wrap:wrap; }
.items-center{ align-items:center; }
.items-start{ align-items:flex-start; }
.justify-between{ justify-content:space-between; }
.justify-end{ justify-content:flex-end; }
.self-end{ align-self:flex-end; }
.gap-6{ gap:6px; }
.gap-8{ gap:8px; }
.gap-12{ gap:12px; }
.grid{ display:grid; }
.grid-2{ grid-template-columns:1fr 1fr; }
.grid-4{ grid-template-columns: repeat(4, minmax(0,1fr)); }
.columns-2{ columns:2; -webkit-columns:2; -moz-columns:2; }
.w-full{ width:100%; }
.max-w-480{ max-width:480px; }
.max-w-640{ max-width:640px; }
.max-w-700{ max-width:700px; }
.overflow-auto{ overflow:auto; }
.max-h-60vh{ max-height:60vh; }
.rounded-8{ border-radius:8px; }
.rounded-12{ border-radius:12px; }
.border{ border:1px solid var(--bd); }
.bg-code{ background:#0b1020; }
.text-code{ color:#e5e9f0; }
.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; }
.pre-wrap{ white-space:pre-wrap; }
.truncate{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.max-w-360{ max-width:360px; }
.max-w-40rem{ max-width:40rem; }
.w-22rem{ width:22rem; }
.p-1{ padding:.25rem; }
.p-4{ padding:1rem; }
.p-12{ padding:12px; }
.p-8{ padding:8px; }
.p-0{ padding:0; }
.py-2{ padding-top:2px; padding-bottom:2px; }
.px-6{ padding-left:6px; padding-right:6px; }
.pl-16{ padding-left:16px; }
.nowrap{ white-space:nowrap; }
.border-t-lite{ border-top:1px solid #f3f4f6; }
.rounded-pill{ border-radius:999px; }
.ml-6{ margin-left:6px; }
.text-xs{ font-size:12px; }
.text-gray-600{ color:#4b5563; }

/* Lists */
.list-compact{ margin:.5rem 0 0; padding-left:1.1rem; }