/* ---- 01-tokens.css ---- */
/* ==========================================================================
   Vessel Quiet Arrival design system
   01 Tokens

   Everything visual in this layer is expressed through these tokens. Change a
   value here and every primitive and component that reads it follows.

   Foundation   graphite, ivory, smoke, pearl and titanium carry the page.
   Spectral     three semantic lights, used as contained reflected light only:
                  live   Ion / Ion Ice  status, activation, signal, consequence
                  select Violet         selection, focus, intelligence, future
                  human  Pale rose      Care, "next", handoff moments
   Materials    pearl ceramic, smoked glass, frosted glass, satin titanium.
   Motion       short, physical, one-time. Never looping for decoration.
   ========================================================================== */

:root{
  /* Foundation ---------------------------------------------------------- */
  --void:#05070a;--night:#090c11;--night-2:#0e1116;--night-3:#161b22;
  --white:#f3f5f6;--fog:#a7afb8;--fog-2:#7d8690;--fog-3:#cdd4da;
  --paper:#eeede8;--paper-2:#e3e1da;--paper-3:#d6d3ca;--ink:#0b0d10;
  --pearl:#f8f7f3;--titanium:#a7afb8;--smoke:#384049;
  --ti-1:#eef1f3;--ti-2:#c9d0d6;--ti-3:#a7afb8;--ti-4:#6f7882;--ti-5:#384049;

  /* Spectral (the Dossier lights) --------------------------------------- */
  --cyan:#5ce1ff;--ion:#5ce1ff;--ion-ice:#a9f4ff;--cyan-ink:#0a6f8c;--ion-ink:#0a6f8c;
  --violet:#7d6bff;--violet-2:#8b7bff;--violet-ink:#5443d9;
  --rose:#ff9ad0;--rose-ink:#a8326d;
  --live:var(--ion);--live-ice:var(--ion-ice);--select:var(--violet-2);--human:var(--rose);
  /* The full spectrum only ever appears as a hairline, never as a wash */
  --holo:linear-gradient(100deg,var(--violet-2) 0%,var(--ion) 50%,var(--rose) 100%);
  --holo-ink:linear-gradient(100deg,#5443d9 0%,#1290b3 55%,#c23a80 100%);
  --spectrum-line:linear-gradient(90deg,var(--violet-2),var(--ion) 55%,var(--rose));

  /* Glow recipes: a tight core and a soft halo, never a flood */
  --glow-live:0 0 0 3px #5ce1ff1f,0 0 12px #5ce1ffb3;
  --glow-select:0 0 0 3px #8b7bff24,0 0 12px #8b7bff99;
  --glow-human:0 0 0 3px #ff9ad01f,0 0 12px #ff9ad099;

  /* Type ----------------------------------------------------------------- */
  --font-sans:"Helvetica Neue",var(--font-geist),"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;
  --fs-hero:clamp(3rem,6.4vw,6.4rem);
  --fs-display:clamp(2.75rem,5.4vw,5.6rem);
  --fs-h2:clamp(2.4rem,4.6vw,4.6rem);
  --fs-home-h1:clamp(3.8rem,6.8vw,7.1rem);
  --fs-home-h2:clamp(3rem,5.2vw,5.45rem);
  --fs-home-intro:clamp(3.3rem,6.2vw,6.5rem);
  --fs-home-closing:clamp(3.8rem,6.2vw,6.8rem);
  --fs-plan-price:clamp(4.6rem,8vw,7.9rem);
  --fs-label:.63rem;
  --tr-display:-.062em;--tr-hero:-.067em;--lh-display:.96;--lh-hero:.94;

  /* Shape and space ------------------------------------------------------ */
  --r-sm:4px;--r-md:6px;--r-lg:6px;--r-xl:8px;--r-obj:6px;--r-slab:4px;
  --sec-pad:clamp(96px,11vw,160px);
  --card-pad:clamp(22px,2.6vw,30px);
  --slab-pad:clamp(28px,4.6vw,62px);
  --stack-gap:16px;

  /* Materials ------------------------------------------------------------ */
  /* satin titanium: edges, fine rules, numeric hardware */
  --satin:linear-gradient(90deg,transparent 0%,#a7afb866 14%,#e6ebeecc 48%,#a7afb866 82%,transparent 100%);
  --satin-ink:linear-gradient(90deg,transparent 0%,#38404933 14%,#0b0d1047 48%,#38404933 82%,transparent 100%);
  --satin-pearl:linear-gradient(90deg,transparent,#ffffff 30%,#ffffff 70%,transparent);
  /* the same rule, catching one semantic light at its end */
  --satin-live:linear-gradient(90deg,transparent 0%,#a7afb84d 18%,#e6ebeeb3 52%,#a9f4ffcc 80%,transparent 100%);
  --satin-select:linear-gradient(90deg,transparent 0%,#a7afb84d 18%,#e6ebeeb3 50%,#8b7bffbf 80%,transparent 100%);
  --satin-human:linear-gradient(90deg,transparent 0%,#a7afb84d 18%,#e6ebeeb3 50%,#ff9ad0b3 80%,transparent 100%);
  --satin-ink-live:linear-gradient(90deg,transparent 0%,#0b0d1026 18%,#0b0d1040 50%,#0a6f8c99 82%,transparent 100%);

  /* pearl ceramic: reading, pricing and decision surfaces */
  --pearl-face:linear-gradient(178deg,#fcfbf8 0%,#f7f5f0 46%,#f1efe9 100%);
  --pearl-warm:linear-gradient(176deg,#f6f3ec 0%,#efebe2 58%,#e9e4da 100%);
  --pearl-slab:radial-gradient(120% 70% at 18% 0%,#ffffffb3,transparent 58%),linear-gradient(176deg,#f6f3ec 0%,#efebe2 56%,#e7e2d7 100%);
  --pearl-edge:#0b0d101a;
  --pearl-lift:inset 0 1px 0 #ffffffe6,inset 0 -1px 0 #0b0d100a,0 1px 1px #0b0d100a,0 12px 28px -22px #0b0d1047;
  --pearl-well:inset 0 1px 2px #0b0d1012,inset 0 0 0 1px #0b0d100d;

  /* smoked glass: dark objects and instruments */
  --smoke-face:linear-gradient(170deg,#1a1f27e6 0%,#11151be8 42%,#0b0e12f0 100%);
  --smoke-deep:linear-gradient(172deg,#161b22 0%,#0e1116 55%,#0a0c10 100%);
  --smoke-sheen:linear-gradient(160deg,#ffffff0d 0%,#ffffff00 38%);
  --smoke-edge:#ffffff17;
  --smoke-lift:inset 0 1px 0 #ffffff14,inset 0 0 0 1px #ffffff06,inset 0 -24px 48px -36px #00000099,0 28px 56px -40px #000000b3;
  --smoke-well:inset 0 1px 3px #00000066,inset 0 0 0 1px #ffffff0d;
  /* internal reflections: a single semantic light caught inside the glass */
  --reflect-live:radial-gradient(90% 120% at 100% 0%,#5ce1ff12,transparent 55%);
  --reflect-select:radial-gradient(90% 120% at 100% 0%,#8b7bff14,transparent 55%);
  --reflect-human:radial-gradient(90% 120% at 100% 0%,#ff9ad010,transparent 55%);

  /* frosted glass: navigation, menus and controls only */
  --frost-dark:#0c0f14a3;
  --frost-light:#ffffffa6;
  --frost-blur:blur(18px) saturate(150%);
  --frost-edge-dark:inset 0 1px 0 #ffffff1a,inset 0 0 0 1px #ffffff0a;
  --frost-edge-light:inset 0 1px 0 #ffffff,inset 0 0 0 1px #ffffff99;

  /* Motion --------------------------------------------------------------- */
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-press:cubic-bezier(.3,0,.2,1);
  --t-press:140ms;--t-hover:280ms;--t-state:420ms;--t-arrive:620ms;--t-enter:860ms;
  --rise:12px;--lift:1px;--stagger:70ms;

  --glass-edge:inset 0 1px 0 #ffffff14,inset 0 0 0 1px #ffffff0a;
}

/* Context tokens -----------------------------------------------------------
   Dark and paper contexts set the reading tokens the review build already
   uses (--text, --line, --accent ...) plus the default material for any
   surface inside them (--ctx-*). */
:root,.tone-dark,.card--dark,.line-hero,.portal-header,.site-header,.site-footer,.preview-bar,.minimal-header,.join-page{
  --surface:#ffffff08;--surface-solid:var(--night-2);--surface-2:#ffffff0d;
  --text:var(--white);--text-2:#cdd4da;--text-3:#a7afb8;--text-4:#86909a;--soft:#8a939c;
  --line:#ffffff17;--line-2:#ffffff0d;--line-strong:#ffffff2e;
  --accent:var(--violet-2);--marker:#a7afb8;--now:var(--ion);--next:var(--rose);
  --field-bg:#ffffff0a;--field-line:#ffffff24;--field-hover:#ffffff4d;
  --primary-bg:#f2f4f5;--primary-fg:#07090c;--primary-hover:#ffffff;
  --good:#8be9c1;--good-bg:#8be9c114;--warn:#f2cf8f;--warn-bg:#f2cf8f14;--bad:#ff9fac;--bad-bg:#ff9fac14;
  --focus:#8b7bffd9;
  --card-bg:linear-gradient(160deg,#ffffff0d,#ffffff03);--card-glow:none;--holo-text:var(--holo);
  --ctx-face:var(--smoke-face);--ctx-edge:var(--smoke-edge);--ctx-lift:var(--smoke-lift);--ctx-rim:var(--satin);
  --ctx-well:var(--smoke-well);--ctx-well-bg:#00000033;--ctx-well-edge:#ffffff14;
  --ctx-glint:#ffffff14;
}
.tone-paper,.portal-main,.ops-main,.table-wrap,#disclosures,.qa-pearl,
main .grid-2>.card:has(> .row > .tag--now){
  --bg:var(--paper);--surface:var(--pearl);--surface-solid:var(--pearl);--surface-2:#e7e5de;
  --text:var(--ink);--text-2:#41464b;--text-3:#585d5b;--text-4:#666a69;--soft:#969793;
  --line:#0b0d101f;--line-2:#0b0d1012;--line-strong:#0b0d1033;
  --accent:var(--violet-ink);--marker:#6e716e;--now:var(--cyan-ink);--next:var(--rose-ink);
  --field-bg:#fbfaf7;--field-line:#0b0d1029;--field-hover:#0b0d1059;
  --primary-bg:#0b0d10;--primary-fg:#ffffff;--primary-hover:#25282c;
  --good:#12654a;--good-bg:#1270510f;--warn:#7a5308;--warn-bg:#b07a1414;--bad:#9e2a3a;--bad-bg:#9e2a3a0f;
  --focus:#5443d9b3;--card-bg:var(--pearl);--card-glow:none;--holo-text:var(--holo-ink);
  --ctx-face:var(--pearl-face);--ctx-edge:var(--pearl-edge);--ctx-lift:var(--pearl-lift);--ctx-rim:var(--satin-pearl);
  --ctx-well:var(--pearl-well);--ctx-well-bg:#fbfaf7;--ctx-well-edge:#0b0d101f;
  --ctx-glint:#ffffffb3;
  color-scheme:light;
}
/* The planned plan sits on paper in some layouts but is always dark glass */
main .grid-2>.card:has(> .row > .tag--concept),.qa-plan--next{
  --ctx-face:var(--smoke-face);--ctx-edge:var(--smoke-edge);--ctx-lift:var(--smoke-lift);--ctx-rim:var(--satin);
}

/* Responsive tokens: 390 and 320 are their own compositions --------------- */
@media (max-width:720px){
  :root{
    --header-h:60px;
    --fs-hero:2.6rem;--fs-display:2.35rem;--fs-h2:2.05rem;
    --fs-home-h1:2.4rem;--fs-home-h2:2.1rem;--fs-home-intro:2.1rem;--fs-home-closing:2.3rem;
    --fs-plan-price:3.5rem;
    --tr-display:-.05em;--tr-hero:-.055em;--lh-display:1;--lh-hero:.98;
    --sec-pad:56px;--card-pad:20px;--slab-pad:22px;--stack-gap:14px;
    --rise:10px;
  }
}
@media (max-width:359px){
  :root{
    --fs-hero:2.25rem;--fs-display:2.05rem;--fs-h2:1.8rem;
    --fs-home-h1:2.08rem;--fs-home-h2:1.85rem;--fs-home-intro:1.85rem;--fs-home-closing:2rem;
    --fs-plan-price:3rem;
    --sec-pad:48px;--card-pad:16px;--slab-pad:18px;--stack-gap:12px;
  }
}


/* ---- 02-base.css ---- */
/* ==========================================================================
   02 Base: page foundation, type, labels and site chrome
   ========================================================================== */

html{background:var(--void)}
body{font-family:var(--font-sans);font-feature-settings:"ss01" 1}
::selection{background:#8b7bff4d;color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:4px}

/* Type ------------------------------------------------------------------ */
.h-hero,.h-display,.h2{font-weight:320;letter-spacing:var(--tr-display);line-height:var(--lh-display)}
.h-hero{letter-spacing:var(--tr-hero);line-height:var(--lh-hero)}
.h3{font-weight:420;letter-spacing:-.03em}
.h4{font-weight:520;letter-spacing:-.015em}
.h-hero .soft,.h-display .soft,.h2 .soft,.portal-title .soft{color:var(--soft)}
.tone-dark .soft,.page-head .soft,body:not(:has(.portal-main,.ops-main)) main>section:not(.tone-paper):not(#disclosures) .h2 .soft{color:#d5dce280}
/* Gradient text stays out of headlines; the spectrum lives in hairlines */
.holo{background:none;-webkit-text-fill-color:currentColor;color:#d5dce280}
.tone-paper .holo,.portal-main .holo,.ops-main .holo{color:var(--soft)}
.lead{letter-spacing:-.008em;line-height:1.6;color:var(--text-2)}
.body{line-height:1.62}
.fine{letter-spacing:.005em}
.price{font-weight:310;letter-spacing:-.08em;line-height:.9}
.price small{letter-spacing:0;font-weight:500;font-size:.78rem;opacity:.75}
.bignum{font-weight:300;letter-spacing:-.07em}
.line-number{font-weight:330;letter-spacing:-.055em}
.portal-title h1{font-weight:330;letter-spacing:-.058em}
.pull{font-weight:340}
.pull:before{background:linear-gradient(180deg,var(--violet-2),var(--ion) 55%,var(--rose));width:1px;opacity:.85}

/* Small spaced labels -------------------------------------------------------- */
.eyebrow,.k{font:540 var(--fs-label)/1.2 var(--font-sans);letter-spacing:.19em;text-transform:uppercase}
.eyebrow{color:var(--marker);gap:12px}
.eyebrow:before{width:22px;height:1px;opacity:.6}
/* A live label carries one Ion point. It catches light once, then rests. */
.eyebrow--signal{color:#c0e2edb8;gap:10px}
.eyebrow--signal:before{width:5px;height:5px;border-radius:50%;background:var(--live);opacity:1;box-shadow:var(--glow-live);animation:qa-glint 2.4s var(--ease-out) .4s 1 both}
.tone-paper .eyebrow--signal,.portal-main .eyebrow--signal,.ops-main .eyebrow--signal{color:#4f5a5e}
.tone-paper .eyebrow--signal:before,.portal-main .eyebrow--signal:before,.ops-main .eyebrow--signal:before{background:var(--cyan-ink);box-shadow:0 0 0 3px #5ce1ff40}
.kv dt,.review-row dt,.table th,.timeline .t-state,.msg-meta,.footer-grid h2{font-family:var(--font-sans);font-weight:540;letter-spacing:.16em}

/* Lists ------------------------------------------------------------------ */
.list-check li:before{height:1px;width:9px;background:var(--now)}

/* Chrome: preview bar --------------------------------------------------- */
.preview-bar{background:#030508;border-bottom:1px solid #ffffff0d;color:#a7afb8;position:relative}
.preview-bar:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,#ffffff14 50%,transparent);pointer-events:none}
.preview-bar b{background:none;-webkit-text-fill-color:currentColor;color:#e6ebee;font:540 .6rem/1 var(--font-sans);letter-spacing:.19em}
.preview-bar a,.preview-bar button{color:#cdd4da;text-decoration-color:#ffffff2e}

/* Chrome: headers are frosted glass with a satin lower edge.
   They stay sticky (the review build's behaviour); the edge is drawn as a
   background layer so no positioning is overridden. */
.site-header,.minimal-header,.portal-header{
  background:var(--satin) bottom/100% 1px no-repeat,linear-gradient(180deg,#0c0f14b8,#0c0f149e);
  -webkit-backdrop-filter:var(--frost-blur);backdrop-filter:var(--frost-blur);
  border-bottom-color:transparent;box-shadow:inset 0 1px 0 #ffffff0d,0 1px 0 #0000004d}
.portal-header{background:var(--satin) bottom/100% 1px no-repeat,linear-gradient(180deg,#0b0e13f2,#0b0e13e6)}
.wordmark .wm{height:20px}
.nav a{color:#cfd6dcb8;font-size:.86rem;padding:8px 13px;letter-spacing:-.005em;transition:color var(--t-hover) var(--ease),background-color var(--t-hover) var(--ease),box-shadow var(--t-hover) var(--ease)}
.nav a:hover{color:#fff;background:#ffffff0a}
@media (min-width:980px){
  .site-header .nav{padding:4px;border-radius:999px;background:#ffffff08;box-shadow:var(--frost-edge-dark)}
  .site-header .nav a{padding:7px 14px}
}
/* The current page is a pressed chip with a violet underglow (selected) */
.nav a[aria-current=page]{color:#fff;
  background:linear-gradient(90deg,transparent 20%,#8b7bffb3 50%,transparent 80%) bottom/100% 1px no-repeat,linear-gradient(180deg,#ffffff17,#ffffff0a);
  box-shadow:inset 0 1px 0 #ffffff1f,inset 0 -1px 0 #00000040,0 1px 2px #00000059}
.menu-toggle{background:linear-gradient(180deg,#ffffff0f,#ffffff05);box-shadow:var(--frost-edge-dark);border-color:transparent}
.menu-toggle[aria-expanded=true]{background:#ffffff1a;box-shadow:var(--frost-edge-dark),0 0 0 1px #8b7bff4d}
.mobile-nav{background:var(--satin) top/100% 1px no-repeat,linear-gradient(180deg,#0c0f14e6,#0a0c10f2);border-top:0;padding-inline:4px}
.mobile-nav a{border-bottom-color:#ffffff0f;font-weight:340;letter-spacing:-.03em;font-size:1.3rem}
.mobile-nav a[aria-current=page]{color:#fff;box-shadow:inset 2px 0 0 var(--select);padding-left:12px}

/* Portal and operations navigation: a rail with a violet selection line */
.portal-nav{background:linear-gradient(180deg,#ffffff03,#ffffff06);box-shadow:inset 0 1px 0 #ffffff0a}
.portal-nav--dark{background:linear-gradient(180deg,#0e1116,#0b0e12)}
.portal-nav a{color:#cfd6dcb8}
.portal-nav a[aria-current=page]{color:#fff;text-shadow:0 0 18px #ffffff26}
.portal-nav a[aria-current=page]:after{height:1px;bottom:-1px;background:linear-gradient(90deg,transparent,var(--violet-2) 30%,#c9c1ff 60%,transparent)}
.portal-who{color:#cdd4da}

/* Footer: deep graphite with a satin upper edge ----------------------------- */
.site-footer{background:var(--satin) top/100% 1px no-repeat,radial-gradient(60% 120% at 85% 0%,#1d2f3c1f,transparent 60%),linear-gradient(180deg,#07090c,#05070a);border-top:1px solid #ffffff0f}
.footer-orbit{display:none}
.footer-line{font-weight:330;letter-spacing:-.045em;color:#f1f5f7}
.footer-grid h2{font-size:.6rem;color:#86909a;position:relative;padding-bottom:10px;margin-bottom:12px}
.footer-grid h2:after{content:"";position:absolute;left:0;width:28px;bottom:0;height:1px;background:linear-gradient(90deg,#a7afb8,transparent)}
.site-footer .fine{color:#7d8690}

/* Hardware in satin titanium ---------------------------------------------- */
.avatar{background:radial-gradient(circle at 32% 28%,#f8fafb,#a7afb8 55%,#4a525b);color:#0b0d10;font-family:var(--font-sans);font-weight:600;
  box-shadow:inset 0 1px 0 #fff,0 0 0 1px #00000080,0 0 0 3px #ffffff0d}
.phone{background:linear-gradient(125deg,#eef1f3 0%,#a7afb8 16%,#2b3139 36%,#4f5862 58%,#c9d0d6 80%,#384049 100%);
  box-shadow:inset 0 0 0 1px #ffffff80,inset 0 0 0 2px #06070a99,0 2px 2px #0003,0 30px 70px -20px #000000b3,0 0 90px -30px #8b7bff4d}
.phone-glass{background:linear-gradient(152deg,#ffffff1f,#0000 28% 72%,#5ce1ff0d)}
.phone-reflection{background:linear-gradient(90deg,#0000,#8b7bff80,#5ce1ff66,#0000)}
.scr--dark{background:radial-gradient(110% 60% at 100% 0%,#7d6bff40,transparent 60%),radial-gradient(90% 50% at 0% 100%,#5ce1ff14,transparent 65%),var(--void)}
.scr-title{font-weight:330;letter-spacing:-.06em}
.scr-kicker{font-family:var(--font-sans);font-weight:540}
.scr-bar span{background:var(--spectrum-line)}
.scr-step.is-done b{background:#e6ebee;border-color:#e6ebee}
.scr-step.is-done b:after{border-color:#0b0d10}
.scr--light .scr-word:before{background:var(--cyan-ink);box-shadow:0 0 0 1.2cqw #0a6f8c26}
.scr-check b{background:radial-gradient(circle at 32% 28%,#f8fafb,#a7afb8 60%,#4a525b)}
.scr-predawn{background:radial-gradient(70% 45% at 50% 50%,#7d6bff33,transparent 70%),var(--void)}
.placeholder-photo{background:radial-gradient(420px 260px at 100% 0%,#7d6bff2e,transparent 65%),linear-gradient(180deg,#0e1116,#090c11);border-radius:var(--r-md)}


/* ---- 03-primitives.css ---- */
/* ==========================================================================
   03 Primitives

   Six reusable building blocks. Each reads a small set of custom properties,
   so components choose a material or a semantic light by setting variables,
   not by restating backgrounds and shadows.

     Surface  --s-face --s-edge --s-lift --s-rim --s-reflect --s-radius
     Key      --k-bg --k-hover --k-fg --k-edge --k-lift --k-glint
     Well     --w-bg --w-edge --w-inset
     Ledger   tables as pearl ledgers; row mode on small screens
     Rail     horizontally scrolling controls with edge fades and snap
     Signal   chips, counts and glow points in the three semantic lights
   ========================================================================== */

/* 1. Surface ---------------------------------------------------------------
   A rim (1px top hairline), an optional internal reflection and a pointer
   glint are drawn as background layers above the material face, so the
   primitive never needs a pseudo-element. */
.card,.table-wrap,.msg,.line-hero,.choice,.qa-check,#check .split>.stack:first-child,
.coverage-explorer,.coverage-next-card,.coverage-truth,.qa-account__console,.qa-plan,
main .grid-2>.card:has(> .row > .tag--now),main .grid-2>.card:has(> .row > .tag--concept),
.notice--preview,.qr,.empty,.code-box{
  --s-face:var(--ctx-face);--s-edge:var(--ctx-edge);--s-lift:var(--ctx-lift);--s-rim:var(--ctx-rim);
  --s-reflect:linear-gradient(#0000,#0000);
  --s-glint:radial-gradient(260px 180px at var(--qa-mx,50%) var(--qa-my,-40%),var(--ctx-glint),transparent 70%);
  background:var(--s-rim) top/100% 1px no-repeat,var(--s-glint-on,linear-gradient(#0000,#0000)),var(--s-reflect),var(--s-face);
  background-origin:border-box;
  border-color:var(--s-edge);
  box-shadow:var(--s-lift);
}
/* Glint only appears while a pointer is over an interactive surface */
@media (hover:hover){[data-qa-glint]:hover{--s-glint-on:var(--s-glint)}}

/* Material bundles ------------------------------------------------------- */
.qa-m-pearl{--s-face:var(--pearl-face);--s-edge:var(--pearl-edge);--s-lift:var(--pearl-lift);--s-rim:var(--satin-pearl)}
.qa-m-smoke{--s-face:var(--smoke-face);--s-edge:var(--smoke-edge);--s-lift:var(--smoke-lift);--s-rim:var(--satin)}
/* Semantic lights a surface may catch */
.qa-l-live{--s-rim:var(--satin-live);--s-reflect:var(--reflect-live)}
.qa-l-select{--s-rim:var(--satin-select);--s-reflect:var(--reflect-select)}
.qa-l-human{--s-rim:var(--satin-human);--s-reflect:var(--reflect-human)}

/* 2. Key (buttons) ----------------------------------------------------------
   Pearl keys on dark, smoked keys on light, frosted or ceramic ghosts.
   Hover lifts one pixel and lets a light sweep across the lip; press settles. */
.btn,.qa-button{position:relative;isolation:isolate;
  transition:transform var(--t-press) var(--ease-press),background-color var(--t-hover) var(--ease),color var(--t-hover) var(--ease),border-color var(--t-hover) var(--ease),box-shadow var(--t-hover) var(--ease)}
.btn{min-height:48px;padding:0 21px;gap:16px;font-size:.84rem;font-weight:550;letter-spacing:.005em;
  --btn-bg:var(--k-bg);--btn-hover:var(--k-hover);--btn-fg:var(--k-fg);--btn-border:var(--k-edge);box-shadow:var(--k-ring,0 0 #0000),var(--k-lift)}
.btn:hover,.qa-button:hover{--k-ring:0 0 0 1px var(--k-ring-c,#a9f4ff59)}
.btn--sm{min-height:40px;padding:0 15px;font-size:.78rem;gap:10px}
.btn:after,.qa-button:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:linear-gradient(105deg,transparent 38%,var(--k-glint,#ffffff59) 50%,transparent 62%) 130% 0/260% 100% no-repeat;
  opacity:0;transition:background-position 0s,opacity var(--t-hover) var(--ease)}
@media (hover:hover){
  .btn:hover,.qa-button:hover{transform:translateY(calc(-1 * var(--lift)))}
  .btn:hover:after,.qa-button:hover:after{opacity:1;background-position:-30% 0;transition:background-position .9s var(--ease-out),opacity var(--t-hover) var(--ease)}
}
.btn:active,.qa-button:active{transform:translateY(0) scale(.99);transition-duration:var(--t-press)}

/* Key bundles */
.btn{--k-bg:linear-gradient(180deg,#fbfbfa 0%,#eceeef 100%);--k-hover:linear-gradient(180deg,#ffffff 0%,#f2f4f5 100%);--k-fg:#07090c;--k-edge:transparent;
  --k-lift:inset 0 1px 0 #ffffff,inset 0 -1px 0 #0b0d101f,0 1px 2px #0000004d,0 8px 18px -12px #00000099;--k-glint:#ffffffcc}
/* Smoked key: the primary action on light surfaces */
.tone-paper .btn:not(.btn--ghost):not(.btn--danger):not(.btn-text):not(.btn--light),
.portal-main .btn:not(.btn--ghost):not(.btn--danger):not(.btn-text):not(.btn--light),
#disclosures .btn:not(.btn--ghost):not(.btn--danger):not(.btn-text):not(.btn--light),
main .grid-2>.card:has(> .row > .tag--now) .btn:not(.btn--ghost):not(.btn-text),
.qa-plan--now .qa-button--dark{
  --k-bg:linear-gradient(180deg,#22272e 0%,#0b0d10 100%);--k-hover:linear-gradient(180deg,#2b3139 0%,#14171b 100%);--k-fg:#fff;--k-glint:#ffffff2e;
  --k-lift:inset 0 1px 0 #ffffff26,inset 0 -1px 0 #000000,0 1px 2px #0b0d1040,0 10px 18px -12px #0b0d10b3;
  --k-ring-c:#0a6f8c66;
  background:var(--k-bg);color:#fff;box-shadow:var(--k-ring,0 0 #0000),var(--k-lift)}
.qa-plan--now .qa-button--dark:hover{background:var(--k-hover)}
/* Ghosts: frosted on dark, ceramic outline on light */
.btn--ghost{--k-bg:linear-gradient(180deg,#ffffff0d,#ffffff05);--k-hover:linear-gradient(180deg,#ffffff17,#ffffff08);--k-fg:var(--text);--k-edge:#ffffff21;
  --k-lift:inset 0 1px 0 #ffffff12;--k-glint:#ffffff26;--k-ring-c:#8b7bff40;font-weight:520}
.btn--ghost:hover{--k-edge:#ffffff40}
.tone-paper .btn--ghost,.portal-main .btn--ghost,.ops-main .btn--ghost,#disclosures .btn--ghost,.qa-pearl .btn--ghost,
main .grid-2>.card:has(> .row > .tag--now) .btn--ghost{
  --k-bg:linear-gradient(180deg,#ffffffb3,#ffffff4d);--k-hover:linear-gradient(180deg,#ffffff,#ffffffb3);--k-edge:#0b0d1024;--k-glint:#ffffffe6;
  --k-lift:inset 0 1px 0 #fff,0 1px 1px #0b0d100a;--k-ring-c:#5443d933}
.tone-paper .btn--ghost:hover,.portal-main .btn--ghost:hover,.ops-main .btn--ghost:hover,#disclosures .btn--ghost:hover,
main .grid-2>.card:has(> .row > .tag--now) .btn--ghost:hover{--k-edge:#0b0d1047}
.btn--light{--k-bg:linear-gradient(180deg,#fbfbfa,#eceeef);--k-fg:#07090c;--k-hover:linear-gradient(180deg,#fff,#f2f4f5)}
.btn--danger{--k-bg:transparent;--k-hover:var(--bad-bg);--k-fg:var(--bad);--k-edge:color-mix(in srgb,var(--bad) 45%,transparent);--k-lift:0 0 #0000;--k-ring-c:color-mix(in srgb,var(--bad) 35%,transparent)}
/* Consequential actions carry one Ion point */
.btn--signal:before,.btn--ion:before{content:"";width:5px;height:5px;border-radius:50%;flex:none;background:var(--live);box-shadow:var(--glow-live)}
.tone-paper .btn--signal:before,.portal-main .btn--signal:before,.ops-main .btn--signal:before,
.tone-paper .btn--ion:before,.portal-main .btn--ion:before,.ops-main .btn--ion:before,
.qa-pearl .btn--signal:before{background:var(--ion);box-shadow:0 0 0 3px #5ce1ff40,0 0 8px #5ce1ffb3}
.btn-text{text-underline-offset:6px;transition:text-decoration-color var(--t-hover) var(--ease),color var(--t-hover) var(--ease)}
.btn-text:hover{text-decoration-color:var(--accent)}

/* Homepage keys share the bundles */
.qa-button--light{background:linear-gradient(180deg,#fbfbfa 0%,#eceeef 100%);box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 #0b0d101f,0 1px 2px #0000004d,0 8px 18px -12px #00000099;--k-glint:#ffffffcc}
.qa-button--light:hover{background:linear-gradient(180deg,#fff 0%,#f2f4f5 100%);box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 #0b0d101f,0 0 0 1px #a9f4ff59,0 2px 4px #0000004d,0 12px 22px -12px #000000a6}
.qa-button--quiet{background:linear-gradient(180deg,#ffffff0d,#ffffff03);box-shadow:inset 0 1px 0 #ffffff12;--k-glint:#ffffff26}
.qa-button--quiet:hover{box-shadow:inset 0 1px 0 #ffffff1f,0 0 0 1px #8b7bff40}
.qa-text-link{transition:gap var(--t-hover) var(--ease),border-color var(--t-hover) var(--ease)}
.qa-text-link:hover{border-bottom-color:var(--accent)}

/* 3. Well (fields) --------------------------------------------------------
   Fields are recessed into their surface. Focus is violet (selection). */
.input,.select,.textarea{--w-bg:var(--ctx-well-bg);--w-edge:var(--ctx-well-edge);--w-inset:var(--ctx-well);
  border-radius:var(--r-md);min-height:50px;background:var(--w-bg);border-color:var(--w-edge);box-shadow:var(--w-inset);
  transition:border-color var(--t-hover) var(--ease),box-shadow var(--t-hover) var(--ease),background-color var(--t-hover) var(--ease)}
.input:hover,.select:hover,.textarea:hover{border-color:color-mix(in srgb,var(--w-edge) 50%,var(--field-hover))}
.input:focus,.select:focus,.textarea:focus{border-color:color-mix(in srgb,var(--focus) 80%,transparent);box-shadow:var(--w-inset),0 0 0 3px color-mix(in srgb,var(--focus) 26%,transparent)}
.input--mono{letter-spacing:.08em}
.input[type=file]::file-selector-button{border-radius:999px}
.label{font-weight:520;letter-spacing:-.005em}
.choice input,.check input{accent-color:var(--accent)}

/* 4. Ledger (tables) ------------------------------------------------------- */
.table-wrap{border-radius:var(--r-obj);color:var(--ink)}
.table th{background:linear-gradient(180deg,#f3f1ec,#eeebe4);border-bottom:0;box-shadow:inset 0 -1px 0 #0b0d1029,inset 0 1px 0 #ffffffcc}
.table td{border-bottom-color:#0b0d100d}
.table tbody tr{transition:background-color var(--t-hover) var(--ease)}
.table tbody tr:hover td{background:#ffffff8c}
.table .link{text-decoration-color:#0b0d1033}
.table .link:hover{text-decoration-color:var(--accent)}
.table tr.is-vessel td,.table tr.is-highlight td{background:linear-gradient(90deg,#8b7bff14,transparent 70%)}
.table tr.is-vessel td:first-child,.table tr.is-highlight td:first-child{box-shadow:inset 2px 0 0 var(--accent)}

/* 5. Rail (horizontally scrolling controls) --------------------------------
   qa.js marks a rail that overflows with data-qa-rail and which edges still
   hide content with data-qa-edge, and brings the current item into view. */
.portal-nav .wrap,.join-progress ol,.tabs,.coverage-tabs{scroll-behavior:smooth;overscroll-behavior-x:contain}
[data-qa-rail]{scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch}
[data-qa-rail]::-webkit-scrollbar{display:none}
[data-qa-rail]>*{scroll-snap-align:start}
[data-qa-rail]{scroll-padding-inline:44px}
[data-qa-rail][data-qa-edge=start]{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent)}
[data-qa-rail][data-qa-edge=end]{-webkit-mask-image:linear-gradient(90deg,transparent,#000 40px);mask-image:linear-gradient(90deg,transparent,#000 40px)}
[data-qa-rail][data-qa-edge=middle]{-webkit-mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 48px),transparent)}

/* 6. Signal (chips, counts, glow points) ----------------------------------- */
.tag{font:540 .58rem/1.2 var(--font-sans);letter-spacing:.14em;padding:6px 10px;min-height:26px;border-color:color-mix(in srgb,currentColor 38%,transparent)}
.tag--now:before{width:5px;height:5px;box-shadow:0 0 8px currentColor}
.tag--next{color:var(--next)}
.status{font-weight:520;border-radius:999px;box-shadow:inset 0 1px 0 #ffffff12;
  transition:background-color var(--t-state) var(--ease),border-color var(--t-state) var(--ease),color var(--t-state) var(--ease)}
.portal-main .status,.tone-paper .status{box-shadow:inset 0 1px 0 #ffffffb3}
.status--live{--dot:var(--ion);background:#5ce1ff12;border-color:#5ce1ff4d}
.status--live:before{box-shadow:0 0 10px #5ce1ffcc}
.tone-paper .status--live,.portal-main .status--live,.ops-main .status--live{--dot:var(--cyan-ink);color:#064b5f;background:#5ce1ff24;border-color:#0a6f8c4d}
.tone-paper .status--live:before,.portal-main .status--live:before,.ops-main .status--live:before{box-shadow:0 0 0 3px #5ce1ff59}
.card--dark .status--live,.line-hero .status--live{--dot:var(--ion);color:var(--white);background:#5ce1ff12;border-color:#5ce1ff4d}
.card--dark .status--live:before,.line-hero .status--live:before{box-shadow:0 0 8px var(--ion)}
.badge-num{background:linear-gradient(180deg,#e6ebee,#a7afb8);color:#0b0d10;font-family:var(--font-sans);font-weight:560;box-shadow:inset 0 1px 0 #fff,0 0 0 1px #0b0d101f}
.portal-nav .badge-num{box-shadow:inset 0 1px 0 #fff,0 0 0 1px #00000066}
/* Care counts are human: rose */
.portal-nav a[href$="/care"] .badge-num,.portal-nav a[href*="/support"] .badge-num{background:linear-gradient(180deg,#ffd1e8,#ff9ad0);box-shadow:inset 0 1px 0 #fff,0 0 0 1px #00000066,0 0 10px #ff9ad059}
.badge-num--zero{background:var(--surface-2);color:var(--text-4);box-shadow:none}
.meter{height:4px;background:#0b0d1012;box-shadow:inset 0 1px 1px #0b0d101a;overflow:hidden}
.meter>span{background:linear-gradient(90deg,var(--violet-2),var(--ion));transform-origin:left center}
.tone-paper .meter>span,.portal-main .meter>span,.ops-main .meter>span{background:linear-gradient(90deg,var(--violet-ink),var(--cyan-ink))}

/* Satin rules ----------------------------------------------------------------- */
.divider{background:var(--satin-ink);height:1px}
.portal-main .divider{background:linear-gradient(90deg,#0b0d1000,#0b0d1033 10%,#0b0d1033 90%,#0b0d1000)}


/* ---- 04-components.css ---- */
/* ==========================================================================
   04 Components

   Each component picks a material bundle and, where it has a meaning, one
   semantic light. Layout belongs to the review build; only material, light
   and rhythm are set here.
   ========================================================================== */

/* Cards --------------------------------------------------------------------- */
.card{border-radius:var(--r-obj);overflow:visible}
.card:before{display:none}
.card--flat{--s-face:linear-gradient(#0000,#0000);--s-lift:0 0 #0000;--s-rim:linear-gradient(#0000,#0000)}
.card--sunk{--s-face:linear-gradient(#ffffff08,#ffffff08);--s-lift:var(--smoke-well);--s-rim:linear-gradient(#0000,#0000);border-color:transparent}
.portal-main .card--sunk,.tone-paper .card--sunk{--s-face:linear-gradient(#0b0d1008,#0b0d1008);--s-lift:var(--pearl-well)}
.card--glass{--s-face:linear-gradient(150deg,#ffffff14,#ffffff05);--s-edge:#ffffff24;--s-lift:inset 0 1px 0 #ffffff1f,inset 0 -18px 40px -30px #00000066;
  -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%)}
.card--dark{--s-face:var(--smoke-deep);--s-edge:#ffffff1a;--s-lift:var(--smoke-lift);--s-reflect:var(--reflect-select)}
.card.card--next{border-color:transparent;
  background:var(--satin-human) top/100% 1px no-repeat border-box,linear-gradient(var(--bg),var(--bg)) padding-box,linear-gradient(140deg,#cdd4da,#6f7882 45%,#ff9ad099) border-box}
/* Linked cards are physical objects: they lift a pixel and catch the light */
a.card{transition:transform var(--t-hover) var(--ease),box-shadow var(--t-hover) var(--ease),border-color var(--t-hover) var(--ease)}
@media (hover:hover){a.card:hover{transform:translateY(calc(-1 * var(--lift)));border-color:color-mix(in srgb,var(--s-edge) 40%,var(--accent))}}
a.card:active{transform:none}

/* Plans: a warm pearl slab now, a smoked glass slab next ---------------------- */
main .grid-2>.card:has(> .row > .tag--now),.qa-plan--now{
  --s-face:var(--pearl-slab);--s-rim:linear-gradient(#0000,#0000);
  --s-lift:inset 0 1px 0 #ffffff,inset 0 0 0 1px #ffffff80,inset 0 -1px 0 #0b0d1012,0 1px 1px #00000026,0 40px 80px -56px #000000e6;
  --ctx-glint:#ffffffcc;border:0;border-radius:var(--r-slab);position:relative}
main .grid-2>.card:has(> .row > .tag--concept),.qa-plan--next{
  --s-face:linear-gradient(162deg,#ffffff12 0%,#ffffff05 34%,#ffffff00 60%),linear-gradient(176deg,#1a1f26d9 0%,#0f1217e6 60%,#0b0d10f0 100%);
  --s-edge:#ffffff14;--s-rim:var(--satin-human);--s-reflect:var(--reflect-human);
  --s-lift:inset 0 1px 0 #ffffff17,inset 0 0 0 1px #ffffff05,inset 0 -40px 80px -60px #000000,0 40px 80px -56px #000000e6;
  border:1px solid var(--s-edge);border-radius:var(--r-slab);position:relative;-webkit-backdrop-filter:none;backdrop-filter:none}
main .grid-2>.card:has(> .row > .tag--now),main .grid-2>.card:has(> .row > .tag--concept){color:var(--text);padding:var(--slab-pad)}
main .grid-2>.card:has(> .row > .tag--now){color:var(--ink)}
main .grid-2>.card:has(> .row > .tag--now) .price,main .grid-2>.card:has(> .row > .tag--concept) .price{font-size:clamp(4.2rem,7.4vw,7.4rem);margin-top:8px}
main .grid-2>.card:has(> .row > .tag--now) .price small,main .grid-2>.card:has(> .row > .tag--concept) .price small{display:block;margin:14px 0 0;font-size:.74rem;letter-spacing:.01em}
main .grid-2>.card:has(> .row > .tag--now) .h3,main .grid-2>.card:has(> .row > .tag--concept) .h3{font-size:clamp(1.45rem,2.3vw,2rem);font-weight:400}
main .grid-2>.card:has(> .row > .tag--now) .list-check,main .grid-2>.card:has(> .row > .tag--concept) .list-check{gap:0;border-top:1px solid var(--line)}
main .grid-2>.card:has(> .row > .tag--now) .list-check li,main .grid-2>.card:has(> .row > .tag--concept) .list-check li{border-bottom:1px solid var(--line);padding:13px 0 13px 24px;font-size:.88rem}
main .grid-2>.card:has(> .row > .tag--now) .list-check li:before,main .grid-2>.card:has(> .row > .tag--concept) .list-check li:before{background:currentColor;opacity:.5;height:1px;width:8px;top:calc(13px + .72em)}
main .grid-2>.card:has(> .row > .tag--concept) .list-check{border-top-color:#ffffff17}
main .grid-2>.card:has(> .row > .tag--concept) .list-check li{border-bottom-color:#ffffff0f}
main .grid-2>.card:has(> .row > .tag--now) .list-check{border-top-color:#0b0d101f}
main .grid-2>.card:has(> .row > .tag--now) .list-check li{border-bottom-color:#0b0d1014}
/* Live availability reads in Ion; planned stays quiet with a rose glint */
main .grid-2>.card:has(> .row > .tag--now) .tag--now,.qa-pill--live{color:var(--cyan-ink);background:#5ce1ff1a;border-color:#0a6f8c47;box-shadow:inset 0 1px 0 #ffffffb3}
.qa-pill--live:before{content:"";width:5px;height:5px;border-radius:50%;background:var(--ion);box-shadow:0 0 0 2px #5ce1ff33,0 0 8px #5ce1ffcc;margin-right:8px;align-self:center}
.qa-pill{box-shadow:inset 0 1px 0 #ffffff12;align-items:center}
main .grid-2>.card:has(> .row > .tag--concept) .tag--concept,.qa-plan--next .qa-pill:not(.qa-pill--live){border-color:#ff9ad047;color:#f3c6dd}
/* Pricing numerals read as engraved */
main .grid-2>.card:has(> .row > .tag--now) .price,.qa-plan--now .qa-plan__price{color:#0b0d10;text-shadow:0 1px 0 #ffffffb3}
main .grid-2>.card:has(> .row > .tag--concept) .price,.qa-plan--next .qa-plan__price{background:linear-gradient(180deg,#f3f5f6 0%,#c9d0d6 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.qa-plan--now ul{border-top-color:#0b0d101f}
.qa-plan--now li{border-bottom-color:#0b0d1014}
.qa-plan--next ul{border-top-color:#ffffff17}
.qa-plan--next li{border-bottom-color:#ffffff0f}
.qa-plan__note{background:#ffffff05;border-color:#ffffff14;box-shadow:inset 0 1px 0 #ffffff0d,inset 2px 0 0 #ff9ad066}
/* Plan cards respond to the pointer like the objects they are */
.qa-plan,main .grid-2>.card:has(> .row > .tag--now),main .grid-2>.card:has(> .row > .tag--concept){transition:transform var(--t-state) var(--ease),box-shadow var(--t-state) var(--ease)}
@media (hover:hover) and (min-width:721px){
  .qa-plan:hover,main .grid-2>.card:has(> .row > .tag--now):hover,main .grid-2>.card:has(> .row > .tag--concept):hover{transform:translateY(-2px)}
}

/* IMEI checker: a smoked instrument tuned to the live signal -------------------- */
.qa-check,#check .split>.stack:first-child{
  --s-face:var(--smoke-deep);--s-edge:#ffffff12;--s-rim:var(--satin-live);--s-reflect:linear-gradient(160deg,#ffffff0d 0%,#ffffff00 38%),var(--reflect-live);
  --ctx-well-bg:#00000052;--ctx-well-edge:transparent;--ctx-well:inset 0 2px 4px #00000080,inset 0 0 0 1px #ffffff0f;--ctx-glint:#a9f4ff12;
  position:relative;border:1px solid var(--s-edge)}
.qa-check{--s-lift:inset 0 1px 0 #ffffff17,inset 0 -30px 60px -48px #000,28px 32px 0 var(--qa-paper-2),28px 32px 0 1px #0b0d100d}
#check .split>.stack:first-child{--s-lift:var(--smoke-lift);padding:clamp(24px,3.2vw,40px);border-radius:var(--r-obj)}
.qa-check__top{border-bottom:0;position:relative;background:var(--satin) bottom/100% 1px no-repeat}
.qa-check__top i{color:var(--ion-ice);display:inline-flex;align-items:center;gap:8px}
.qa-check__top i:before{content:"";width:5px;height:5px;border-radius:50%;background:var(--ion);box-shadow:var(--glow-live)}
.qa-check .card,#check .card{--s-face:linear-gradient(170deg,#ffffff0f,#ffffff04);--s-lift:inset 0 1px 0 #ffffff14;--s-rim:var(--satin-live);border-radius:var(--r-sm)}
#check details.disclose{border-color:#ffffff12}
/* Preview fixtures sit in a frosted tray */
.notice--preview{--s-face:linear-gradient(170deg,#ffffff0f,#ffffff05);--s-edge:#ffffff14;--s-lift:inset 0 1px 0 #ffffff14;--s-rim:linear-gradient(#0000,#0000);
  color:var(--text-2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.notice--preview:before{content:"P";color:var(--violet-2);border-color:#8b7bff66;font-family:var(--font-sans);font-weight:600}
.notice--preview .btn--ghost{--k-bg:#ffffff08}
.tone-paper .notice--preview,.portal-main .notice--preview,.ops-main .notice--preview{--s-face:linear-gradient(#ffffff8c,#ffffff8c);--s-edge:#0b0d101a;--s-lift:inset 0 1px 0 #fff}
.tone-paper .notice--preview:before,.portal-main .notice--preview:before{color:var(--violet-ink);border-color:#5443d94d}
.notice .btn,.notice--preview .btn{white-space:normal;text-align:left;height:auto;min-height:44px;padding-block:9px;line-height:1.3}

/* Account lines: a smoked object resting on ceramic, live by nature ---------------- */
.line-hero{
  --s-face:var(--smoke-deep);--s-edge:#0b0d10;--s-rim:var(--satin-live);
  --s-reflect:radial-gradient(90% 120% at 100% 0%,#5ce1ff14,transparent 55%),linear-gradient(160deg,#ffffff0d 0%,#ffffff00 36%);
  --s-lift:inset 0 1px 0 #ffffff1f,inset 0 0 0 1px #ffffff08,inset 0 -40px 80px -60px #000,0 1px 1px #0b0d1040,0 24px 44px -30px #0b0d10b3;
  --ctx-glint:#a9f4ff14;border:1px solid var(--s-edge);border-radius:var(--r-xl)}
.line-hero .eyebrow{color:#a7afb8}
.line-hero .eyebrow:before{opacity:.5}
.line-number{letter-spacing:-.05em;background:linear-gradient(180deg,#ffffff 0%,#cdd4da 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.line-hero .meter{background:#ffffff0f;box-shadow:inset 0 1px 1px #00000066}
.line-hero .meter>span{background:linear-gradient(90deg,var(--violet-2),var(--ion));box-shadow:0 0 8px #5ce1ff59}
.line-hero .btn--light{--k-bg:linear-gradient(180deg,#fbfbfa,#e6e9eb)}
/* Line list cards */
.portal-main .grid-3>a.card .status--live{margin-left:auto}
.portal-main .grid-3>.card .eyebrow:before,.portal-main .grid-2>.card .eyebrow:before{background:linear-gradient(90deg,#384049,#a7afb8)}

/* Portal sheet: frosted enclosure over warm ivory with two faint light pools ------ */
.portal,.ops{background:#ebe9e3}
.portal-main{background:
  radial-gradient(900px 420px at 92% -6%,#5ce1ff12,transparent 60%),
  radial-gradient(760px 380px at 2% -4%,#8b7bff0f,transparent 60%),
  linear-gradient(180deg,#e7e5df,#eeede8 340px)}
.portal-main>.wrap{
  background:linear-gradient(180deg,#ffffff8c,#ffffff59);
  border:1px solid #ffffffcc;border-radius:10px;
  -webkit-backdrop-filter:blur(16px) saturate(130%);backdrop-filter:blur(16px) saturate(130%);
  box-shadow:inset 0 1px 0 #ffffff,0 1px 1px #0b0d100d,0 44px 90px -64px #0b0d1066;
  padding-block:clamp(22px,3vw,40px);
  max-width:calc(var(--max) + 2 * var(--gutter) - 2 * clamp(0px,2vw,24px))}
.portal-title{padding-bottom:22px;margin-bottom:28px;position:relative;background:var(--satin-ink) bottom/100% 1px no-repeat}

/* Vessel Care: your words on smoke, a person's reply on pearl with a rose edge ---- */
.thread{gap:12px}
.msg{border-radius:var(--r-obj)}
.msg:not(.msg--me):not(.msg--system):not(.msg--internal){--s-rim:var(--satin-human);--s-reflect:radial-gradient(70% 100% at 0% 0%,#ff9ad00d,transparent 60%)}
.msg:not(.msg--me):not(.msg--system):not(.msg--internal) .msg-meta{color:var(--rose-ink)}
.msg--me{--s-face:var(--smoke-deep);--s-edge:#0b0d10;--s-rim:var(--satin);--s-reflect:linear-gradient(160deg,#ffffff0d,#ffffff00 40%);
  --s-lift:inset 0 1px 0 #ffffff1a,0 12px 24px -18px #0b0d10b3;color:var(--white)}
.msg--system{--s-face:linear-gradient(#0000,#0000);--s-lift:0 0 #0000;--s-rim:linear-gradient(#0000,#0000);border-style:solid;border-color:#0b0d1014;border-width:1px 0 0;border-radius:0;padding-inline:0}
.msg--internal{--s-face:linear-gradient(180deg,#fbf3e2,#f6ecd6);--s-edge:#7a530829;--s-lift:inset 0 1px 0 #fff;--s-rim:linear-gradient(#0000,#0000)}
.msg-meta{letter-spacing:.14em}
/* Case rows */
.portal-main .stack>a.card.row{gap:14px}

/* Billing and orders ------------------------------------------------------------- */
/* Invoices are pearl ledger slips; the open slip comes slightly forward */
.portal-main details.card{padding-block:0;transition:box-shadow var(--t-state) var(--ease),transform var(--t-state) var(--ease)}
.portal-main details.card>summary{cursor:pointer;list-style:none;padding-block:18px}
.portal-main details.card>summary::-webkit-details-marker{display:none}
.portal-main details.card[open]{--s-face:linear-gradient(178deg,#fffefb,#f7f5f0);--s-lift:inset 0 1px 0 #fff,0 1px 2px #0b0d1014,0 22px 40px -28px #0b0d1059}
.portal-main details.card[open]>summary{border-bottom:1px solid #0b0d1012;margin-bottom:16px}
.portal-main details.card>.stack{padding-bottom:20px}

/* Timelines: titanium discs for what is done, an Ion ring for what is live now */
.timeline .node{font-family:var(--font-sans);font-weight:540}
.timeline li:after{background:linear-gradient(180deg,#0b0d1026,#0b0d100d)}
.timeline .done .node{background:radial-gradient(circle at 34% 28%,#ffffff,#c9d0d6 46%,#6f7882 100%);border-color:#0b0d1033;color:#0b0d10;box-shadow:inset 0 1px 0 #fff,0 1px 2px #0b0d1033}
.timeline .done:after{background:linear-gradient(180deg,#6f7882,#a7afb866)}
.timeline .done:has(+ .current):after{background:linear-gradient(180deg,#6f7882,var(--cyan-ink))}
.timeline .upcoming .node,.timeline li:not(.done):not(.current):not(.attention) .node{background:var(--pearl-face);box-shadow:var(--pearl-well)}
.timeline .current .node{border-color:var(--cyan-ink);background:var(--pearl);color:var(--ink);box-shadow:0 0 0 4px var(--bg),0 0 0 5px #0a6f8c66,0 0 0 9px var(--bg),0 0 0 10px #0a6f8c26,0 0 16px 6px #5ce1ff40}
.timeline .current .t-state{color:var(--now)}
.tone-dark .timeline .current .node,.card--dark .timeline .current .node,.qa-check .timeline .current .node{border-color:var(--ion);background:var(--night);color:var(--white);box-shadow:0 0 0 4px var(--bg),0 0 0 5px #5ce1ff73,0 0 14px #5ce1ff59}
.card--dark .timeline .done .node,.tone-dark .timeline .done .node,.qa-check .timeline .done .node{border-color:#00000080}

/* Key-value specs read as engraved rules */
.kv{row-gap:0;column-gap:24px}
.kv dt,.kv dd{padding-block:10px;border-bottom:1px solid #0b0d100f}
.card:not(.tone-paper *):not(.portal-main *) .kv dt,.card:not(.tone-paper *):not(.portal-main *) .kv dd{border-bottom-color:#ffffff0d}
.kv dt:last-of-type,.kv dd:last-of-type{border-bottom:0}

/* Operations console: a graphite instrument bar above a ceramic desk -------------- */
.ops .portal-header,.portal-nav--dark{background:var(--satin) bottom/100% 1px no-repeat,linear-gradient(180deg,#0e1116,#0a0c10)}
.ops-badge{color:var(--ion-ice)}
.ops .portal-main>.wrap{background:linear-gradient(180deg,#ffffff73,#ffffff40)}
.ops .portal-main section.stack>.row h2,.ops .portal-main .h4{letter-spacing:-.01em}
.ops .table-wrap{--s-lift:inset 0 1px 0 #ffffffe6,0 1px 1px #0b0d100d,0 18px 36px -30px #0b0d1066}
.ops .table td .status{margin-left:8px}
.ops .card .grid-3:empty{display:none}
/* Staff sign-in: smoked identity tiles */
main.tone-dark.page-head .grid-2 .card.btn--block{
  --s-face:var(--smoke-deep);--s-reflect:var(--smoke-sheen);--s-edge:#ffffff12;--s-lift:var(--smoke-lift);--s-rim:var(--satin-select);
  display:grid;gap:4px;justify-items:start;text-align:left;min-height:84px;padding:18px 20px;
  border:1px solid var(--s-edge);color:var(--white);cursor:pointer;
  transition:transform var(--t-hover) var(--ease),border-color var(--t-hover) var(--ease),box-shadow var(--t-hover) var(--ease)}
@media (hover:hover){main.tone-dark.page-head .grid-2 .card.btn--block:hover{transform:translateY(-1px);border-color:#8b7bff4d}}
main.tone-dark.page-head .grid-2 .card.btn--block:active{transform:none}
main.tone-dark.page-head .grid-2 .card.btn--block .small{color:#a7afb8}

/* Coverage: smoked explorer, Ion for LTE signal, violet for 5G -------------------- */
.coverage-explorer{--s-face:var(--smoke-face);--s-edge:#ffffff1c;--s-rim:var(--satin-live);--s-lift:inset 0 1px 0 #ffffff14,0 60px 120px -80px #000;border-radius:var(--r-xl);position:relative}
.coverage-tabs{background:#ffffff05;border-bottom:1px solid #ffffff0f;box-shadow:inset 0 -1px 0 #00000059}
.coverage-tabs button{border-radius:999px;font-size:.84rem;transition:color var(--t-hover) var(--ease),background-color var(--t-state) var(--ease),box-shadow var(--t-state) var(--ease)}
.coverage-tabs button:hover{color:#fff}
.coverage-tabs button[aria-selected=true]{
  background:linear-gradient(90deg,transparent 15%,#8b7bffcc 50%,transparent 85%) bottom/100% 1px no-repeat,linear-gradient(180deg,#ffffff17,#ffffff0a);
  box-shadow:inset 0 1px 0 #ffffff1f,inset 0 -1px 0 #00000059,0 1px 2px #00000066}
.coverage-map{border-right-color:#ffffff0f;box-shadow:inset -1px 0 0 #00000066}
.coverage-map-label,.coverage-map-caption{background:var(--frost-dark);-webkit-backdrop-filter:var(--frost-blur);backdrop-filter:var(--frost-blur);border-color:#ffffff1a;box-shadow:var(--frost-edge-dark)}
.coverage-map-label{font:540 .6rem var(--font-sans);letter-spacing:.16em}
.status-dot{background:var(--ion);box-shadow:var(--glow-live)}
.coverage-stage-copy h2{font-weight:320;letter-spacing:-.06em}
.legend-4g{color:var(--ion);background:linear-gradient(90deg,#5ce1ff8f,var(--ion))}
.legend-5g{color:var(--violet-2);background:linear-gradient(90deg,#8b7bff99,var(--violet-2))}
.coverage-legend i{border-color:#ffffff33;box-shadow:inset 0 1px 0 #ffffff66}
.coverage-actions{border-top-color:#ffffff0f;background:#00000026}
.coverage-facts{border-radius:var(--r-obj);background:#0b0d1014;border-color:transparent;box-shadow:var(--pearl-lift)}
.coverage-facts article{background:var(--pearl-face)}
.coverage-next-card{--s-face:var(--smoke-face);--s-edge:#ffffff14;--s-lift:var(--smoke-lift);--s-rim:var(--satin-select);border-radius:var(--r-obj)}
.coverage-next-card>div>span{color:var(--ion-ice);font:540 .66rem var(--font-sans);letter-spacing:.14em}
.coverage-truth{--s-face:linear-gradient(135deg,#ffffff0d,#ffffff04);--s-edge:#ffffff1f;--s-lift:inset 0 1px 0 #ffffff12;--s-rim:linear-gradient(#0000,#0000);
  border-radius:var(--r-sm);color:#cdd4da;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.coverage-truth strong{color:#f3f5f6;font-weight:560}

/* Homepage objects share the same materials (composition untouched) --------------- */
.qa-home .qa-check .card{border-radius:var(--r-sm)}
.qa-account__console{--s-face:var(--pearl-face);--s-edge:#0b0d101f;--s-rim:linear-gradient(#0000,#0000);
  --s-lift:inset 0 1px 0 #fff,28px 32px 0 var(--qa-paper-2),0 1px 1px #0b0d100d}
.qa-console__bar{background:linear-gradient(180deg,#f3f1ec,#eeebe4);box-shadow:inset 0 1px 0 #fff}
.qa-console__lines{background:#00000080}
.qa-console__lines article{background:var(--satin-live) top/100% 1px no-repeat,linear-gradient(160deg,#ffffff0b 0%,#ffffff00 40%),var(--smoke-deep);box-shadow:inset 0 1px 0 #ffffff12}
.qa-console__lines i{color:var(--ion-ice);display:inline-flex;align-items:center;gap:7px}
.qa-console__lines i:before{content:"";width:5px;height:5px;border-radius:50%;background:var(--ion);box-shadow:var(--glow-live)}
.qa-console__lines strong{background:linear-gradient(180deg,#fff,#cdd4da);-webkit-background-clip:text;background-clip:text;color:transparent}
.qa-console__footer>div:last-child span{color:var(--rose-ink)}
.qa-hero__signal{border-top:0;position:relative;background:var(--satin) top/100% 1px no-repeat}
.qa-hero__signal dt{display:flex;align-items:center;gap:8px}
.qa-hero__signal div:nth-child(1) dt:before,.qa-hero__signal div:nth-child(2) dt:before{content:"";width:5px;height:5px;border-radius:50%}
.qa-hero__signal div:nth-child(1) dt:before{background:var(--ion);box-shadow:var(--glow-live)}
.qa-hero__signal div:nth-child(2) dt:before{background:var(--rose);box-shadow:var(--glow-human)}
.qa-future__rail{border-color:transparent;position:relative;background:var(--satin) top/100% 1px no-repeat,var(--satin) bottom/100% 1px no-repeat}
.qa-future__rail article{background:linear-gradient(180deg,#ffffff05,#ffffff00 60%)}
.qa-future__rail span{display:inline-flex;align-items:center;gap:8px}
.qa-future__rail span:before{content:"";width:5px;height:5px;border-radius:50%;border:1px solid #8b7bffb3;box-shadow:0 0 8px #8b7bff59}
.qa-steps{border-top-color:#0b0d1026}
.qa-steps>li>span{color:var(--violet-ink)}
.qa-kicker i{background:var(--ion);box-shadow:0 0 15px #5ce1ffcc}

/* Join ---------------------------------------------------------------------------- */
.join-page{background:#05070a}
.join-page:before{background:radial-gradient(640px 340px at 85% 0,#7d6bff26,transparent 70%),radial-gradient(520px 260px at 10% 10%,#5ce1ff0a,transparent 70%)}
.join-body>section>.card:not(.card--sunk){--s-face:var(--smoke-face)}
.join-progress li>*{transition:background-color var(--t-hover) var(--ease),box-shadow var(--t-hover) var(--ease)}
.join-progress .n{font-family:var(--font-sans);font-weight:540}
.join-progress .current>*{background:linear-gradient(180deg,#ffffff12,#ffffff06);border-color:transparent;box-shadow:inset 0 1px 0 #ffffff17,0 0 0 1px #ffffff0f}
.join-progress .current .n{border-color:var(--ion);box-shadow:0 0 0 3px #5ce1ff1f,0 0 12px #5ce1ff59}
.join-progress .done .n{background:radial-gradient(circle at 34% 28%,#ffffff,#c9d0d6 46%,#6f7882 100%);border-color:#00000080;color:#0b0d10}
.review-list{border-top:0;background:var(--satin) top/100% 1px no-repeat}
.review-row{border-bottom-color:#ffffff0f}
/* Choices: ceramic or glass tiles. Selection is violet. */
.choice{border-radius:var(--r-lg);
  --s-face:linear-gradient(170deg,#ffffff0b,#ffffff03);--s-edge:#ffffff14;--s-lift:inset 0 1px 0 #ffffff0f;--s-rim:linear-gradient(#0000,#0000);
  transition:border-color var(--t-state) var(--ease),box-shadow var(--t-state) var(--ease),transform var(--t-press) var(--ease-press)}
.choice:has(input:checked){--s-face:linear-gradient(170deg,#ffffff14,#ffffff06);--s-edge:#8b7bffbf;--s-rim:var(--satin-select);--s-reflect:var(--reflect-select);
  --s-lift:inset 0 1px 0 #ffffff1f,0 0 0 1px #8b7bff8c,0 0 0 5px #7d6bff1f}
.portal-main .choice,.tone-paper .choice{--s-face:var(--pearl-face);--s-edge:var(--pearl-edge);--s-lift:var(--pearl-lift)}
.portal-main .choice:has(input:checked),.tone-paper .choice:has(input:checked){--s-face:var(--pearl-warm);--s-edge:#5443d999;--s-lift:inset 0 1px 2px #0b0d1014,0 0 0 1px #5443d966,0 0 0 4px #5443d914}
.choice:active{transform:scale(.995)}
.qr{--s-face:var(--pearl-face);--s-edge:var(--pearl-edge);--s-lift:var(--pearl-lift);--s-rim:linear-gradient(#0000,#0000);border-radius:var(--r-md)}
.code-box{--s-face:linear-gradient(#00000033,#00000033);--s-lift:var(--smoke-well);--s-rim:linear-gradient(#0000,#0000);border-color:transparent;border-radius:var(--r-sm)}
.portal-main .code-box{--s-face:linear-gradient(#fbfaf7,#fbfaf7);--s-lift:var(--pearl-well)}

/* Disclosures and notices --------------------------------------------------------- */
details.disclose{border-top-color:transparent;background:var(--satin) top/100% 1px no-repeat}
#disclosures details.disclose,.tone-paper details.disclose,.portal-main details.disclose{background:var(--satin-ink) top/100% 1px no-repeat}
details.disclose:last-of-type{border-bottom-color:#ffffff12}
#disclosures details.disclose:last-of-type,.tone-paper details.disclose:last-of-type{border-bottom-color:#0b0d101a}
details.disclose summary{font-weight:500;letter-spacing:-.012em;transition:color var(--t-hover) var(--ease)}
details.disclose summary:after{font:300 1.25rem/1 var(--font-sans);color:var(--text-4);transition:transform var(--t-state) var(--ease-out),color var(--t-hover) var(--ease)}
details.disclose[open] summary:after{color:var(--accent)}
details.disclose[open]>summary{color:var(--text)}
#disclosures{background:var(--paper);color:var(--ink)}
#disclosures .h2 .soft{color:#a09f9a}
.notice{border-radius:var(--r-md);box-shadow:inset 0 1px 0 #ffffff0d}
.notice:before{font-family:var(--font-sans);font-weight:600}
.portal-main .notice,.tone-paper .notice{box-shadow:inset 0 1px 0 #ffffffb3}
.notice--good{box-shadow:inset 0 1px 0 #ffffff12,inset 2px 0 0 var(--good)}
.empty{--s-face:linear-gradient(#0b0d1005,#0b0d1005);--s-edge:#0b0d1014;--s-lift:var(--pearl-well);--s-rim:linear-gradient(#0000,#0000);border-style:solid;border-radius:var(--r-md)}

/* Interior heads ------------------------------------------------------------------ */
main>.page-head .h-display{font-weight:320}
main>.page-head:not(.qa-has-vessel){padding-bottom:clamp(48px,6vw,80px)}

/* Signal thread ----------------------------------------------------------------------
   One hairline that connects Plan, Move, Coverage and Account. On the homepage
   it runs through the four sections; on those pages it marks where you are. */
.qa-thread{position:absolute;z-index:4;pointer-events:none;width:1px;left:var(--qa-thread-x,24px);top:var(--qa-thread-top,0);height:var(--qa-thread-h,0)}
.qa-thread__track,.qa-thread__lit{position:absolute;left:0;top:0;width:1px;height:100%}
.qa-thread__track{background:linear-gradient(180deg,#a7afb800,#a7afb866 6%,#a7afb866 94%,#a7afb800)}
.qa-thread__lit{background:linear-gradient(180deg,var(--violet-2),var(--rose) 34%,var(--ion) 62%,var(--ion-ice));transform-origin:top;transform:scaleY(var(--qa-thread-p,0));box-shadow:0 0 6px #5ce1ff40}
.qa-thread__node{position:absolute;left:-3px;width:7px;height:7px;border-radius:50%;top:var(--y);background:var(--paper);border:1px solid #a7afb8;
  transition:background-color var(--t-state) var(--ease),border-color var(--t-state) var(--ease),box-shadow var(--t-state) var(--ease)}
.qa-thread__node:after{content:"";position:absolute;top:3px;left:7px;height:1px;width:var(--tick,14px);background:linear-gradient(90deg,#a7afb880,transparent)}
.qa-thread__node[data-on]{border-color:transparent}
.qa-thread__node[data-on][data-stage=plan]{background:var(--violet-2);box-shadow:var(--glow-select)}
.qa-thread__node[data-on][data-stage=move]{background:var(--rose);box-shadow:var(--glow-human)}
.qa-thread__node[data-on][data-stage=coverage],.qa-thread__node[data-on][data-stage=account]{background:var(--ion);box-shadow:var(--glow-live)}
.qa-home{position:relative}
/* Route marker: the same thread at the foot of the page head */
.qa-route{position:absolute;left:var(--gutter);right:var(--gutter);bottom:0;height:1px;z-index:5;pointer-events:none;max-width:var(--max);margin-inline:auto}
.qa-route__track{position:absolute;inset:0;background:linear-gradient(90deg,#a7afb800,#a7afb84d 8%,#a7afb84d 92%,#a7afb800)}
.qa-route__lit{position:absolute;left:0;top:0;height:1px;width:var(--qa-route-at,0%);background:linear-gradient(90deg,#8b7bff00,var(--violet-2) 30%,var(--rose) 62%,var(--ion));transform-origin:left;box-shadow:0 0 6px #5ce1ff40}
.qa-route i{position:absolute;top:-3px;width:7px;height:7px;margin-left:-3px;border-radius:50%;border:1px solid #a7afb899;background:var(--void)}
.qa-route i[data-on]{border-color:transparent;background:var(--ion);box-shadow:var(--glow-live)}
.qa-route i[data-here]{width:9px;height:9px;top:-4px;margin-left:-4px}
/* Each stop is named, so the line reads as wayfinding rather than ornament */
.qa-route i:after{content:attr(data-label);position:absolute;left:50%;bottom:13px;transform:translateX(-50%);white-space:nowrap;
  font:540 .55rem/1 var(--font-sans);letter-spacing:.16em;text-transform:uppercase;color:#a7afb873;transition:color var(--t-state) var(--ease)}
.qa-route i[data-on]:after{color:#a7afb8b3}
.qa-route i[data-here]:after{color:var(--ion-ice)}
.qa-route--below i:after{bottom:auto;top:14px}
.portal-title .qa-route i:after{color:#6668667a}
.portal-title .qa-route i[data-on]:after{color:#666866}
.portal-title .qa-route i[data-here]:after{color:var(--cyan-ink)}
.portal-title:has(.qa-route){margin-bottom:calc(28px + 22px)}
.portal-title .qa-route,.portal-title>.qa-route{left:0;right:0}
.portal-title .qa-route i{background:#f3f1ec}
.portal-title .qa-route i[data-on]{background:var(--cyan-ink);box-shadow:0 0 0 3px #5ce1ff40}


/* ---- 05-vessel.css ---- */
/* ==========================================================================
   05 Living Vessel and page-head compositions
   One independently living Vessel per composition. Exact renderer styles.
   ========================================================================== */

.living-vessel{isolation:isolate;margin:0;position:absolute}
.living-vessel>img,.living-vessel>canvas{object-fit:contain;width:100%;height:100%;position:absolute;inset:0}
.living-vessel>img{z-index:0;opacity:1;filter:drop-shadow(0 30px 58px #0000008c)}
.living-vessel>canvas{z-index:1;opacity:0;transition:opacity .5s;display:block}
.living-vessel.is-ready>canvas{opacity:1}
.living-vessel.is-ready>img{opacity:0}
.living-vessel__toggle,.living-vessel__still{z-index:3;color:#e4eaef6b;font:500 .56rem/1 var(--font-sans);letter-spacing:.13em;text-transform:uppercase;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#0406092e;border:0;align-items:center;gap:8px;padding:7px 9px;display:inline-flex;position:absolute;bottom:4%;right:8%}
.living-vessel__toggle{cursor:pointer;transition:color var(--t-hover) var(--ease)}
.living-vessel__toggle:hover,.living-vessel__toggle:focus-visible{color:#fff}
.living-vessel__toggle:focus-visible{outline-offset:3px;outline:1px solid #8b7bffb3}
.living-vessel__toggle[aria-pressed=true]{color:#c9c1ff}

/* Interior page heads --------------------------------------------------------- */
.page-head{isolation:isolate}
.page-head:before{display:none}
main>.page-head,.coverage-hero,.qa-auth{
  background:radial-gradient(circle at 72% 42%,#1d2f3c36,transparent 32%),linear-gradient(145deg,#070a0e 0%,#040609 56%,#07090d 100%);
  border-bottom:0;position:relative}
main>.page-head:after,.coverage-hero:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--satin);opacity:.5;z-index:4;pointer-events:none}
main>.page-head .lead,.coverage-hero .lead{color:#dee5ea9e;max-width:52ch}

.qa-has-vessel{position:relative;isolation:isolate;overflow:hidden}
.qa-has-vessel>.wrap{position:relative;z-index:3}
.qa-has-vessel>.qa-scrim{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,#030508f0 0%,#0305089e 38%,#03050826 60%,transparent 72%),linear-gradient(180deg,transparent 70%,#030508a6)}
.qa-has-vessel>.qa-grain{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.1;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E")}
/* Atmospheric pools: one Ion, one violet, low and far */
.qa-has-vessel>.qa-ambient{position:absolute;z-index:0;aspect-ratio:1;width:min(720px,55vw);border-radius:50%;filter:blur(110px);pointer-events:none}
.qa-has-vessel>.qa-ambient--a{background:#2b82ae1f;top:-10%;right:-18%}
.qa-has-vessel>.qa-ambient--b{background:#7244ca1f;bottom:-55%;right:12%}
.qa-has-vessel>.qa-vessel{z-index:1;width:min(56vw,800px);height:88%;top:6%;right:-3%}

main>.page-head.qa-has-vessel{min-height:clamp(600px,calc(86svh - var(--header-h)),860px);display:grid;align-items:center;padding-bottom:clamp(64px,8vw,112px)}
main>.page-head.qa-has-vessel .h-display{font-size:clamp(3rem,5.6vw,5.9rem);max-width:12.5ch!important}
main>.page-head.qa-has-vessel .lead{max-width:44ch}
.coverage-hero.qa-has-vessel{min-height:clamp(620px,calc(86svh - var(--header-h)),880px);display:grid;align-items:center}
.coverage-hero.qa-has-vessel h1{max-width:10.5ch;font-weight:310;letter-spacing:-.067em}
.coverage-hero.qa-has-vessel .lead{max-width:44ch}
.coverage-hero.qa-has-vessel .coverage-truth{max-width:520px}

/* Sign in, recovery and verification share one quiet arrival composition */
.qa-auth.qa-has-vessel{min-height:clamp(640px,calc(92svh - var(--header-h)),900px)}
.qa-auth .wrap--narrow{margin-inline:max(0px,calc((100% - (var(--max) + 2 * var(--gutter))) / 2)) auto}
.qa-auth .h2{font-size:clamp(2.6rem,4.4vw,4.2rem)}
.qa-auth .notice--preview .btn{justify-content:space-between}
.qa-auth .notice--preview .btn .fine{color:var(--text-4)}

@media (max-width:980px){
  .qa-has-vessel>.qa-vessel{width:76vw;right:-16%}
}
@media (max-width:979px){
  .qa-auth>.qa-vessel,.qa-auth>.qa-ambient{display:none}
  .qa-auth.qa-has-vessel{min-height:0}
  .qa-auth>.qa-scrim{background:none}
}
@media (prefers-reduced-motion:reduce){.qa-has-vessel>.qa-ambient{display:none}}

/* Copy layers sit above the form; their empty space lets the pause control through */
.qa-hero__inner,.qa-closing__inner,.qa-has-vessel>.wrap{pointer-events:none}
.qa-hero__inner>*,.qa-closing__inner>*,.qa-has-vessel>.wrap>*{pointer-events:auto}


/* ---- 06-motion.css ---- */
/* ==========================================================================
   06 Motion

   Perceptible, physical, one-time. Three kinds only:
     arrival     a section's content settles in once, in a short stagger
     response    surfaces answer the pointer: light shifts, 1 to 2 px of travel
     state       functional changes (results, selection, tabs, usage, steps,
                 replies, status) animate so the change is legible
   No loops, no floating, no spinning. Reduced motion gets the end state.
   ========================================================================== */

@keyframes qa-enter{from{opacity:0;transform:translate3d(0,var(--rise),0)}to{opacity:1;transform:none}}
@keyframes qa-arrive{from{opacity:0;transform:translate3d(0,8px,0)}to{opacity:1;transform:none}}
@keyframes qa-fade{from{opacity:0}to{opacity:1}}
@keyframes qa-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes qa-draw{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes qa-dot{0%{transform:scale(0)}60%{transform:scale(1.35)}100%{transform:scale(1)}}
@keyframes qa-glint{0%{transform:scale(.4);opacity:.3}45%{transform:scale(1.25);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes qa-select{0%{outline-color:#8b7bff00;outline-offset:0}45%{outline-color:#8b7bff8c;outline-offset:3px}100%{outline-color:#8b7bff00;outline-offset:9px}}
/* Two identical pairs, so a repeat change can restart by swapping the name */
@keyframes qa-sweep-a{from{transform:scaleX(0);opacity:1}70%{transform:scaleX(1);opacity:1}to{transform:scaleX(1);opacity:.55}}
@keyframes qa-sweep-b{from{transform:scaleX(0);opacity:1}70%{transform:scaleX(1);opacity:1}to{transform:scaleX(1);opacity:.55}}
@keyframes qa-swap-a{from{opacity:.25;transform:translate3d(0,5px,0)}to{opacity:1;transform:none}}
@keyframes qa-swap-b{from{opacity:.25;transform:translate3d(0,5px,0)}to{opacity:1;transform:none}}
@keyframes qa-ring-a{0%{box-shadow:0 0 0 0 #5ce1ff66}100%{box-shadow:0 0 0 8px #5ce1ff00}}
@keyframes qa-ring-b{0%{box-shadow:0 0 0 0 #5ce1ff66}100%{box-shadow:0 0 0 8px #5ce1ff00}}

/* Arrival: the first view composes itself (CSS only, no flash before script) */
.qa-hero__copy>*,.qa-hero__signal,
main>.page-head>.wrap>*,main>.page-head.stack>*,.coverage-hero>.wrap>*,
.portal-title>*,.join-body>section>*{animation:qa-enter var(--t-enter) var(--ease-out) both}
.qa-hero__copy>:nth-child(2),main>.page-head>.wrap>:nth-child(2),.coverage-hero>.wrap>:nth-child(2),.portal-title>:nth-child(2),.join-body>section>:nth-child(2){animation-delay:calc(1 * var(--stagger))}
.qa-hero__copy>:nth-child(3),main>.page-head>.wrap>:nth-child(3),.coverage-hero>.wrap>:nth-child(3),.join-body>section>:nth-child(3){animation-delay:calc(2 * var(--stagger))}
.qa-hero__copy>:nth-child(4),main>.page-head>.wrap>:nth-child(4),.coverage-hero>.wrap>:nth-child(4),.join-body>section>:nth-child(4){animation-delay:calc(3 * var(--stagger))}
.qa-hero__copy>:nth-child(5),main>.page-head>.wrap>:nth-child(5),.coverage-hero>.wrap>:nth-child(5),.join-body>section>:nth-child(5){animation-delay:calc(4 * var(--stagger))}
.qa-hero__copy>:nth-child(n+6),main>.page-head>.wrap>:nth-child(n+6),.coverage-hero>.wrap>:nth-child(n+6),.join-body>section>:nth-child(n+6){animation-delay:calc(5 * var(--stagger))}
.qa-hero__signal{animation-delay:calc(6 * var(--stagger))}
.portal-title>*{animation-duration:var(--t-arrive)}

/* Arrival below the fold: qa.js marks content with data-qa-reveal once it
   knows motion is welcome; content without the script is simply visible. */
[data-qa-motion] [data-qa-reveal=pending]{opacity:0;transform:translate3d(0,var(--rise),0)}
[data-qa-motion] [data-qa-reveal=in]{opacity:1;transform:none;
  transition:opacity var(--t-enter) var(--ease-out),transform var(--t-enter) var(--ease-out);
  transition-delay:calc(var(--qa-i,0) * var(--stagger))}
[data-qa-i="1"]{--qa-i:1}[data-qa-i="2"]{--qa-i:2}[data-qa-i="3"]{--qa-i:3}[data-qa-i="4"]{--qa-i:4}[data-qa-i="5"]{--qa-i:5}[data-qa-i="6"]{--qa-i:6}

/* State: usage fills, steps draw, replies arrive ----------------------------- */
.meter>span{animation:qa-fill 1.2s var(--ease-out) .25s both}
.timeline>li{animation:qa-arrive var(--t-arrive) var(--ease-out) both}
.timeline>li:after{transform-origin:top;animation:qa-draw .7s var(--ease-out) both}
.timeline>li:nth-child(2){animation-delay:90ms}.timeline>li:nth-child(2):after{animation-delay:150ms}
.timeline>li:nth-child(3){animation-delay:180ms}.timeline>li:nth-child(3):after{animation-delay:240ms}
.timeline>li:nth-child(4){animation-delay:270ms}.timeline>li:nth-child(4):after{animation-delay:330ms}
.timeline>li:nth-child(5){animation-delay:360ms}.timeline>li:nth-child(5):after{animation-delay:420ms}
.timeline>li:nth-child(6){animation-delay:430ms}.timeline>li:nth-child(6):after{animation-delay:490ms}
.timeline>li:nth-child(n+7){animation-delay:500ms}.timeline>li:nth-child(n+7):after{animation-delay:560ms}
.timeline .current .node{animation:qa-ring-a 1.4s var(--ease-out) .6s 1 both}
/* Held until their section arrives */
[data-qa-reveal=pending] .meter>span,[data-qa-reveal=pending] .timeline>li,[data-qa-reveal=pending] .timeline>li:after,[data-qa-reveal=pending] .timeline .current .node{animation-name:none}

.thread>.msg{animation:qa-arrive var(--t-arrive) var(--ease-out) both}
.thread>.msg:nth-last-child(2){animation-delay:60ms}
.thread>.msg:last-child{animation-delay:120ms}
.notice,.status:before,.badge-num{animation:qa-fade var(--t-state) var(--ease) both}
.status:before{animation:qa-dot var(--t-arrive) var(--ease-out) .2s both}
details.disclose[open]>div,.portal-main details.card[open]>.stack{animation:qa-arrive var(--t-state) var(--ease-out) both}
details.disclose[open] summary:after{transform:rotate(180deg)}

/* Selection: a violet ring travels out once */
.choice:has(input:checked){outline:1px solid transparent;animation:qa-select .7s var(--ease-out) both}

/* Results and live regions: qa.js alternates data-qa-pulse a/b on change */
.qa-check [role=status]>*,#check [role=status]>*{animation:qa-arrive var(--t-arrive) var(--ease-out) both}
.qa-check [role=status],#check [role=status]{position:relative}
.qa-check [role=status][data-qa-pulse]:before,#check [role=status][data-qa-pulse]:before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--ion-ice) 40%,var(--ion) 70%,transparent);transform-origin:left;box-shadow:0 0 8px #5ce1ff80}
[role=status][data-qa-pulse=a]:before{animation:qa-sweep-a 1s var(--ease-out) both}
[role=status][data-qa-pulse=b]:before{animation:qa-sweep-b 1s var(--ease-out) both}
[data-qa-swap][data-qa-pulse=a]{animation:qa-swap-a var(--t-state) var(--ease-out) both}
[data-qa-swap][data-qa-pulse=b]{animation:qa-swap-b var(--t-state) var(--ease-out) both}
.status[data-qa-pulse=a]{animation:qa-ring-a 1.1s var(--ease-out) both}
.status[data-qa-pulse=b]{animation:qa-ring-b 1.1s var(--ease-out) both}

/* The thread lights as you travel; nodes ring once when reached */
.qa-thread__lit{transition:transform .18s linear}
.qa-thread__node[data-on]{animation:qa-ring-a 1.2s var(--ease-out) 1 both}
.qa-route__lit{animation:qa-fill 1.4s var(--ease-out) .5s both}
.qa-route i[data-here]{animation:qa-ring-a 1.4s var(--ease-out) 1.6s 1 both}

/* No decorative loops from the review build either */
.orb-a,.orb-b,.orb-c,.core-glow{animation:none!important}

/* Reduced motion: the finished state, no travel, no delay -------------------- */
@media (prefers-reduced-motion:reduce){
  .qa-hero__copy>*,.qa-hero__signal,main>.page-head>.wrap>*,main>.page-head.stack>*,.coverage-hero>.wrap>*,.portal-title>*,.join-body>section>*,
  .meter>span,.timeline>li,.timeline>li:after,.timeline .current .node,.thread>.msg,.notice,.status:before,.badge-num,
  details.disclose[open]>div,.portal-main details.card[open]>.stack,.choice:has(input:checked),
  .qa-check [role=status]>*,#check [role=status]>*,[role=status][data-qa-pulse]:before,[data-qa-swap][data-qa-pulse],.status[data-qa-pulse],
  .qa-thread__node[data-on],.qa-route__lit,.qa-route i[data-here],.eyebrow--signal:before{animation:none!important}
  .btn:after,.qa-button:after{display:none}
  .btn:hover,.qa-button:hover,a.card:hover,.qa-plan:hover{transform:none!important}
  .qa-thread__lit{transition:none}
}


/* ---- 07-mobile.css ---- */
/* ==========================================================================
   07 Mobile art direction
   390 and 320 are composed, not stacked. Display type steps down, rhythm
   tightens, secondary detail moves behind disclosure, and dense desktop
   panels become compact rows. Touch targets stay at 44px or more.
   ========================================================================== */

.qa-more{display:none}

@media (max-width:720px){
  /* Chrome ---------------------------------------------------------------- */
  .preview-bar a,.preview-bar button{min-height:44px;margin-block:-5px;display:inline-flex;align-items:center}
  .btn--sm{min-height:44px}
  .tabs a,.tabs button{min-height:44px}
  .coverage-tabs button{min-height:44px}
  label.check,.check:has(input){min-height:44px;align-items:center}
  .site-header,.minimal-header{-webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%)}
  .living-vessel__toggle{border:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;border-radius:50%;justify-content:center;width:44px;height:44px;padding:0;font-size:0;inset:calc(12% - 5px) calc(var(--qa-v-over,0px) + 9px) auto auto}
  .living-vessel__toggle:before{content:"";position:absolute;inset:5px;border-radius:50%;border:1px solid #ffffff1f;background:#0406092e;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:-1}
  .living-vessel__toggle span{font-size:.6rem}
  .living-vessel__still{font-size:.46rem;inset:12% calc(var(--qa-v-over,0px) + 14px) auto auto}
  .qa-text-link{position:relative}
  .qa-text-link:before{content:"";position:absolute;inset:-11px -4px}

  /* Footer: two columns, full touch height ------------------------------- */
  .site-footer{padding-block:44px 28px}
  .site-footer .wrap.stack{--gap:30px!important}
  .site-footer .row.row--between{gap:18px}
  .footer-line{font-size:1.2rem}
  .footer-grid{grid-template-columns:1fr 1fr;gap:22px 16px}
  .footer-grid ul{gap:0}
  .footer-grid li a,.footer-grid li span{min-height:44px;line-height:1.25}
  .footer-grid h2{margin-bottom:4px}

  /* Homepage ------------------------------------------------------------ */
  .qa-home h1,.qa-home h2{letter-spacing:var(--tr-hero)}
  .qa-hero{min-height:0}
  .qa-hero__vessel{width:106vw;height:clamp(236px,70vw,300px);top:-6px;right:-13%;--qa-v-over:13vw}
  .qa-hero:after{background:linear-gradient(180deg,#03050800 0,#03050814 clamp(120px,34vw,160px),#030508c7 clamp(214px,60vw,262px),#030508f7 100%),linear-gradient(90deg,#03050826,transparent)}
  .qa-hero__inner{display:flex;flex-direction:column;justify-content:flex-start;min-height:0;padding-top:clamp(196px,56vw,240px);padding-bottom:16px}
  .qa-hero__copy{gap:13px;padding:0 0 16px}
  .qa-hero h1{font-size:var(--fs-home-h1);line-height:var(--lh-hero)}
  .qa-hero__copy>p:not(.qa-disclosure){font-size:.9rem;line-height:1.5}
  .qa-hero .qa-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:3px}
  .qa-hero .qa-button,.qa-closing .qa-button{width:auto;padding:0 12px;gap:10px;font-size:.8rem}
  .qa-hero__signal{grid-template-columns:1fr 1fr}
  .qa-hero__signal div,.qa-hero__signal div+div{border-top:0;border-left:0;padding:12px 0 0}
  .qa-hero__signal div+div{border-left:1px solid #ffffff14;padding-left:14px}
  .qa-hero__signal div:nth-child(3){display:none}
  .qa-hero__signal dd{margin-top:4px;font-size:.78rem}

  .qa-intro,.qa-plans,.qa-switch,.qa-account,.qa-future{padding-block:var(--sec-pad)}
  .qa-intro__grid{gap:18px}
  .qa-intro__statement{gap:16px}
  .qa-intro h2,.qa-section-head h2,.qa-switch h2,.qa-coverage h2,.qa-account h2,.qa-future h2{font-size:var(--fs-home-h2);line-height:var(--lh-hero)}
  .qa-intro h2{font-size:var(--fs-home-intro);max-width:none}
  .qa-intro__body{gap:12px;font-size:.96rem;line-height:1.56}

  .qa-section-head{gap:12px;margin-bottom:24px}
  .qa-section-head>div{gap:14px}
  .qa-section-head>p{font-size:.9rem}
  .qa-plan-grid{gap:10px}
  .qa-plan{min-height:0;padding:var(--slab-pad)}
  .qa-plan__top{margin-bottom:20px}
  .qa-plan h3{font-size:1.32rem}
  .qa-plan__price{font-size:var(--fs-plan-price);margin-top:6px}
  .qa-plan__price small{display:inline;margin:0 0 0 8px}
  .qa-plan__summary{margin-top:10px!important;font-size:.9rem}
  .qa-plan ul{margin:16px 0 4px}
  .qa-plan li{padding:10px 0 10px 20px;font-size:.82rem;line-height:1.4}
  .qa-plan li:before{top:18px}
  .qa-plan .qa-button{margin-top:12px}
  .qa-plan .qa-disclosure{margin-top:10px!important}
  .qa-plan--next .qa-plan__top{margin-bottom:14px}
  .qa-plan--next .qa-plan__price{font-size:calc(var(--fs-plan-price) * .74)}
  .qa-plan--next ul{margin:12px 0 14px}
  .qa-plan--next li{padding-block:8px}
  .qa-plan--next li:before{top:16px}
  .qa-plan__note{padding:11px 12px;gap:2px}
  .qa-plan--next .qa-text-link{margin-top:14px}

  .qa-switch__grid{gap:30px}
  .qa-switch__copy{gap:14px}
  .qa-switch__copy>p,.qa-account__copy>p{font-size:.94rem;line-height:1.56}
  .qa-steps{margin-top:4px}
  .qa-steps li{grid-template-columns:34px 1fr;gap:10px;padding:11px 0}
  .qa-steps h3{font-size:.94rem}
  .qa-steps p{font-size:.8rem;margin-top:2px!important}
  .qa-check{padding:22px 18px;--s-lift:inset 0 1px 0 #ffffff17,inset 0 -30px 60px -48px #000,10px 12px 0 var(--qa-paper-2)}
  .qa-check__top{padding-bottom:13px}
  .qa-check>h3{font-size:1.7rem;margin-top:20px!important}
  .qa-check>p{margin-top:10px!important;font-size:.82rem}
  .qa-check .field{margin-top:16px}
  .qa-check .hint{font-size:.76rem}

  .qa-coverage{min-height:0;padding-block:64px}
  .qa-coverage__inner{gap:20px}
  .qa-coverage__copy{gap:18px}
  .qa-coverage__copy p{font-size:.94rem}

  .qa-account__grid{gap:26px}
  .qa-account__copy{gap:14px}
  .qa-account__console{--s-lift:inset 0 1px 0 #fff,10px 12px 0 var(--qa-paper-2)}
  .qa-console__bar{padding:12px 14px}
  .qa-console__lines{grid-template-columns:1fr 1fr}
  .qa-console__lines article{padding:16px 14px}
  .qa-console__lines article+article{border-top:0}
  .qa-console__lines strong{font-size:1.12rem;margin-top:14px}
  .qa-console__lines p{font-size:.68rem}
  .qa-console__footer{grid-template-columns:1fr 1fr}
  .qa-console__footer>div{padding:14px;gap:4px}
  .qa-console__footer>div+div{border-top:0;border-left:1px solid #0b0d101f}
  .qa-console__footer strong{font-size:.9rem}
  .qa-console__footer small{font-size:.66rem}

  .qa-future__head{gap:12px}
  .qa-future__rail{margin-top:24px}
  .qa-future__rail article{min-height:0;padding:16px 0}
  .qa-future__rail h3{font-size:1.15rem;margin-top:8px!important}
  .qa-future__rail p{margin-top:4px!important;font-size:.82rem}

  .qa-closing{min-height:0;align-items:start}
  .qa-closing__vessel{width:106vw;height:clamp(230px,68vw,290px);top:0;left:-13%;--qa-v-over:-7vw}
  .qa-closing:after{background:linear-gradient(180deg,#03050800 0,#03050814 clamp(110px,32vw,150px),#030508c7 clamp(200px,58vw,250px),#030508f7 100%)}
  .qa-closing__inner{padding-top:clamp(190px,54vw,232px);padding-bottom:52px}
  .qa-closing__copy{gap:14px}
  .qa-closing h2{font-size:var(--fs-home-closing)}
  .qa-closing .qa-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}

  /* Plan cards: progressive disclosure ------------------------------------ */
  .qa-more{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:44px;margin:0;padding:0;background:none;border:0;
    color:inherit;font:540 .78rem/1 var(--font-sans);letter-spacing:.01em;cursor:pointer;opacity:.78;border-bottom:1px solid currentColor;border-bottom-color:color-mix(in srgb,currentColor 18%,transparent)}
  .qa-more:hover{opacity:1}
  .qa-more:after{content:"+";font:300 1.25rem/1 var(--font-sans);transition:transform var(--t-state) var(--ease-out)}
  [data-qa-plan=open] .qa-more:after{transform:rotate(45deg)}
  [data-qa-plan=collapsed] ul>li:nth-child(n+4),[data-qa-plan=collapsed] [data-qa-extra]{display:none}
  [data-qa-plan=open] ul>li:nth-child(n+4),[data-qa-plan=open] [data-qa-extra]{animation:qa-arrive var(--t-state) var(--ease-out) both}

  /* Interior page heads: the Vessel above, the words right beneath -------- */
  main>.page-head.qa-has-vessel,.coverage-hero.qa-has-vessel{min-height:0;display:block;align-items:initial;padding-top:clamp(190px,54vw,232px)!important;padding-bottom:34px}
  .qa-has-vessel>.qa-vessel{width:100vw;height:clamp(230px,66vw,284px);top:-6px;right:-12%;--qa-v-over:12vw}
  .qa-has-vessel>.qa-scrim{background:linear-gradient(180deg,#03050800 0,#03050814 clamp(110px,32vw,150px),#030508c4 clamp(196px,56vw,240px),#030508fa 100%),linear-gradient(90deg,#03050826,transparent)}
  main>.page-head.qa-has-vessel .h-display{font-size:var(--fs-display);max-width:none!important}
  .coverage-hero.qa-has-vessel h1{font-size:calc(var(--fs-display) * 1.06);max-width:none}
  main>.page-head .wrap.stack{--gap:16px!important}
  main>.page-head .lead,.coverage-hero .lead{font-size:.96rem;line-height:1.55}
  main>.page-head:not(.qa-has-vessel){padding-top:48px!important;padding-bottom:34px}
  .section{padding-block:var(--sec-pad)}
  .section--tight{padding-block:32px}
  .h2{font-size:var(--fs-h2)}

  /* /plans cards */
  main .grid-2>.card:has(> .row > .tag--now),main .grid-2>.card:has(> .row > .tag--concept){--gap:12px!important}
  main .grid-2>.card:has(> .row > .tag--now) .price,main .grid-2>.card:has(> .row > .tag--concept) .price{font-size:var(--fs-plan-price);margin-top:2px}
  main .grid-2>.card:has(> .row > .tag--concept) .price{font-size:calc(var(--fs-plan-price) * .74)}
  main .grid-2>.card:has(> .row > .tag--now) .price small,main .grid-2>.card:has(> .row > .tag--concept) .price small{margin-top:10px}
  main .grid-2>.card:has(> .row > .tag--now) .list-check li,main .grid-2>.card:has(> .row > .tag--concept) .list-check li{padding:10px 0 10px 20px;font-size:.84rem}
  main .grid-2>.card:has(> .row > .tag--now) .list-check li:before,main .grid-2>.card:has(> .row > .tag--concept) .list-check li:before{top:calc(10px + .72em)}
  main .grid-2>.card:has(> .row > .tag--now)>.row:not(.row--between){display:grid;grid-template-columns:1fr;gap:8px}
  main .grid-2>.card:has(> .row > .tag--now)>.row:not(.row--between) .btn{width:100%}

  /* Join: the plan's price note sits beneath the figure, not beside it */
  .join-body .price small{display:block;margin-top:8px}

  /* Portal and operations ------------------------------------------------- */
  .portal-header>.wrap{min-height:56px}
  .portal-nav a{min-height:46px;padding:0 12px;font-size:.88rem}
  .portal-nav a[aria-current=page]:after{left:12px;right:12px}
  .portal-main{padding-block:14px 56px}
  .portal-title{margin-bottom:18px;padding-bottom:14px;gap:10px;align-items:flex-start}
  .portal-title:has(.qa-route){margin-bottom:40px}
  .qa-route i:after{font-size:.5rem;letter-spacing:.13em}
  .portal-title h1{font-size:1.8rem}
  .portal-title .stack{--gap:6px!important}
  .portal-main .card{padding:16px}
  .portal-main .grid{--gap:12px!important}
  .portal-main .stack{--gap:12px}

  /* A line becomes a compact summary: number, device, status, usage, bill, action */
  .line-hero{padding:16px 16px 14px;gap:12px 14px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-areas:"head head" "num num" "data hot" "bill act"}
  .line-hero>.row:first-child{grid-area:head}
  .line-hero>.stack{grid-area:num;--gap:2px!important}
  .line-hero .line-number{font-size:1.7rem}
  .line-hero .usage-grid{display:contents}
  .line-hero .usage-grid>div:nth-child(1){grid-area:data}
  .line-hero .usage-grid>div:nth-child(2){grid-area:hot}
  .line-hero .usage-grid>div:nth-child(3){grid-area:bill;align-self:center}
  .line-hero .usage-grid .row{flex-wrap:wrap;gap:2px 8px}
  .line-hero .usage-grid .meter{margin-top:6px}
  .line-hero .usage-grid .fine{font-size:.68rem}
  .line-hero>.row:last-child{grid-area:act;justify-self:end;align-self:center}
  .portal-main .grid-3>section.card{--gap:6px!important;padding:14px 16px}
  .portal-main .grid-3>section.card .h4{font-size:.98rem}
  .portal-main .grid-3>a.card{padding:14px 16px}
  .portal-main .bignum,.portal-main .price{font-size:2.6rem}

  /* Invoices: number and amount on one line, period and status beneath */
  .portal-main details.card>summary{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 12px;align-items:center;padding-block:14px}
  .portal-main details.card>summary>span:first-child,.portal-main details.card>summary>span.row{display:contents}
  .portal-main details.card>summary>span:first-child>b{grid-area:1/1}
  .portal-main details.card>summary>span:first-child>.small{grid-area:2/1}
  .portal-main details.card>summary>span.row>.num{grid-area:1/2;justify-self:end}
  .portal-main details.card>summary>span.row>.status{grid-area:2/2;justify-self:end}

  /* Timelines tighten */
  .timeline li{grid-template-columns:24px 1fr;gap:12px;padding-bottom:14px}
  .timeline .node{width:24px;height:24px;font-size:.62rem}
  .timeline li:after{left:11.5px;top:26px}
  .timeline .t-label{padding-top:2px;font-size:.92rem}
  .timeline .t-detail{font-size:.84rem;margin-top:2px}
  .kv dt,.kv dd{padding-block:7px}

  /* Care */
  .thread{gap:10px}
  .msg{padding:12px 14px;max-width:92%}
  .msg--system{max-width:none}

  /* Ops */
  .ops .portal-main .stack[style*="28px"]{--gap:22px!important}
  main.tone-dark.page-head .grid-2 .card.btn--block{min-height:64px;padding:14px 16px}
}

/* Ledgers become compact rows (qa.js labels the cells) -------------------- */
@media (max-width:640px){
  .portal-main>.wrap{border-radius:0;border-inline:0;max-width:none;padding-block:18px;-webkit-backdrop-filter:none;backdrop-filter:none;background:#f7f6f2e6}
  .table-wrap:has(.table[data-qa-rows]){overflow:visible}
  .table[data-qa-rows],.table[data-qa-rows] tbody{display:block}
  .table[data-qa-rows] thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .table[data-qa-rows] tr{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;row-gap:3px;padding:12px 14px;border-bottom:1px solid #0b0d100f;transition:background-color var(--t-hover) var(--ease)}
  .table[data-qa-rows] tbody tr:last-child{border-bottom:0}
  .table[data-qa-rows] td,.table[data-qa-rows] tbody th{display:block;padding:0;border:0;background:none!important;box-shadow:none!important;min-width:0}
  .table[data-qa-rows] [data-qa-role=primary]{grid-column:1;grid-row:1;font-weight:520;line-height:1.4}
  .table[data-qa-rows][data-qa-noaside] [data-qa-role=primary]{grid-column:1/-1}
  .table[data-qa-rows] [data-qa-role=primary] .status{margin:4px 0 0;display:inline-flex}
  .table[data-qa-rows] [data-qa-role=aside]{grid-column:2;grid-row:1;justify-self:end;text-align:right;white-space:nowrap}
  .table[data-qa-rows] [data-qa-role=meta]{grid-column:1/-1;font-size:.8rem;line-height:1.45;color:var(--text-3)}
  .table[data-qa-rows] [data-qa-role=meta][data-qa-label]:before{content:attr(data-qa-label);font:540 .56rem/1 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--text-4);margin-right:8px}
  .table[data-qa-rows] tbody tr:hover td{background:none}
  .table[data-qa-rows] tbody tr:has(a:hover){background:#ffffff8c}
  .table[data-qa-rows] tr.is-vessel,.table[data-qa-rows] tr.is-highlight{box-shadow:inset 2px 0 0 var(--accent);background:linear-gradient(90deg,#8b7bff14,transparent 70%)}
}

@media (max-width:480px){
  .kv{grid-template-columns:minmax(0,7.2rem) minmax(0,1fr);column-gap:14px}
  .kv dt{font-size:.56rem;line-height:1.3;padding-top:12px;color:var(--text-4)}
  .kv dd{padding-block:8px;line-height:1.4;overflow-wrap:anywhere}
  .kv dd .status{margin-top:-2px}
}

/* 320: its own composition ------------------------------------------------- */
@media (max-width:359px){
  .qa-hero__vessel{height:226px}
  .qa-hero__inner{padding-top:178px}
  .qa-hero .qa-actions,.qa-closing .qa-actions{grid-template-columns:1fr}
  .qa-hero__copy>p:not(.qa-disclosure){font-size:.86rem}
  .qa-hero__signal dd{font-size:.74rem}
  .qa-plan li,main .grid-2>.card:has(> .row > .tag--now) .list-check li{font-size:.8rem}
  .qa-console__lines article{padding:14px 12px}
  .qa-console__lines strong{font-size:.98rem}
  .qa-console__footer>div{padding:12px}
  .qa-closing__vessel{height:220px}
  .qa-closing__inner{padding-top:176px}
  main>.page-head.qa-has-vessel,.coverage-hero.qa-has-vessel{padding-top:176px!important}
  .qa-has-vessel>.qa-vessel{height:220px}
  .footer-grid{gap:18px 12px}
  .footer-grid li a,.footer-grid li span{font-size:.86rem}
  .line-hero{padding:14px 14px 12px;gap:10px 12px}
  .line-hero .line-number{font-size:1.5rem}
  .line-hero .usage-grid .small{font-size:.78rem}
  .portal-nav a{padding:0 10px;font-size:.84rem}
  .portal-title h1{font-size:1.6rem}
}

/* Restraint ------------------------------------------------------------------- */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .site-header,.minimal-header,.portal-header{background:var(--satin) bottom/100% 1px no-repeat,#0b0e13f5}
  .portal-main>.wrap{background:#f7f6f2}
  .coverage-map-label,.coverage-map-caption{background:#0b0e13e6}
  .notice--preview,.card--glass{--s-face:linear-gradient(#11151b,#11151b)}
}
@media (prefers-reduced-transparency:reduce){
  .site-header,.minimal-header,.portal-header{background:var(--satin) bottom/100% 1px no-repeat,#0b0e13;-webkit-backdrop-filter:none;backdrop-filter:none}
  .portal-main>.wrap{background:#f7f6f2;-webkit-backdrop-filter:none;backdrop-filter:none}
  .notice--preview{-webkit-backdrop-filter:none;backdrop-filter:none}
}


/* ---- 08-mobile-ux.css ---- */
/* ==========================================================================
   08 Mobile UX
   Route-by-route phone composition at 390 and 320. Same materials, palette
   and type as the approved system; only density, order and disclosure
   change. Desktop is untouched: everything below is either scoped to the
   mobile breakpoint or to elements that only exist on phones.
   ========================================================================== */

.qa-show{display:none}

/* Mobile navigation ---------------------------------------------------------
   A fluid editorial field below the header: no tiles, drawer chrome or
   directory rows. It is fixed so opening it never reflows the page. */
#mobile-nav.mobile-nav{
  position:fixed;z-index:80;left:0;right:0;top:var(--qa-menu-top,56px);bottom:0;
  display:block;
  width:auto;max-width:none;height:auto;margin:0;
  padding:0 max(18px,env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));
  overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  background:
    radial-gradient(80% 45% at 84% 0%,rgba(96,75,210,.16),transparent 70%),
    radial-gradient(65% 45% at 8% 94%,rgba(60,181,207,.1),transparent 72%),
    rgba(3,5,8,.94);
  -webkit-backdrop-filter:blur(22px) saturate(130%);backdrop-filter:blur(22px) saturate(130%);
  border:0;box-shadow:none;
  pointer-events:auto;touch-action:pan-y;
  animation:qa-sheet-in .28s var(--ease-out,cubic-bezier(.2,.7,.2,1)) both;
}
#mobile-nav.mobile-nav .mobile-nav__panel{
  position:relative;width:100%;max-width:440px;margin:0 auto;padding:clamp(26px,8vh,72px) 0 0;
  border:0;border-radius:0;background:transparent;box-shadow:none;
}
#mobile-nav.mobile-nav .mobile-nav__panel:before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,rgba(169,236,255,.08),rgba(168,149,255,.8) 42%,rgba(241,169,215,.7) 72%,rgba(169,236,255,.06));
  box-shadow:0 0 18px rgba(168,149,255,.25);
}
#mobile-nav.mobile-nav .mobile-nav__grid{
  display:flex;flex-wrap:wrap;align-items:baseline;column-gap:0;row-gap:2px;
}
#mobile-nav.mobile-nav .mobile-nav__grid a{
  position:relative;display:inline-flex;align-items:center;min-width:0;min-height:52px;margin:0;padding:0;
  border:0;border-radius:0;background:transparent!important;box-shadow:none!important;
  color:rgba(226,232,236,.58);text-decoration:none;white-space:nowrap;
  font-family:var(--font-sans);font-size:clamp(1.25rem,6.1vw,1.62rem);font-weight:340;line-height:1;letter-spacing:-.045em;
  opacity:1;transform:none;
  pointer-events:auto;touch-action:manipulation;
  transition:color var(--t-hover,.18s) var(--ease,ease),text-shadow var(--t-hover,.18s) var(--ease,ease);
}
#mobile-nav.mobile-nav .mobile-nav__grid a:not(:last-child):after{
  content:"";display:inline-block;width:1px;height:.72em;margin:0 clamp(12px,3.8vw,18px);
  background:rgba(169,236,255,.2);transform:rotate(18deg);
}
#mobile-nav.mobile-nav .mobile-nav__grid a:hover,
#mobile-nav.mobile-nav .mobile-nav__grid a:active{color:#fff;text-shadow:0 0 20px rgba(169,236,255,.24)}
#mobile-nav.mobile-nav .mobile-nav__grid a[aria-current=page]{color:#fff}
#mobile-nav.mobile-nav .mobile-nav__grid a[aria-current=page]:before{
  content:"";position:absolute;left:0;right:calc(clamp(12px,3.8vw,18px) * 2 + 1px);bottom:4px;height:1px;
  background:linear-gradient(90deg,var(--ion-ice,#a9ecff),var(--select,#8b7bff));box-shadow:0 0 10px rgba(139,123,255,.55);
}
#mobile-nav.mobile-nav .mobile-nav__grid a:last-child[aria-current=page]:before{right:0}
#mobile-nav.mobile-nav a:focus-visible{outline:1px solid var(--ion-ice,#a9f4ff);outline-offset:5px}
#mobile-nav.mobile-nav .mobile-nav__actions{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;gap:8px;margin-top:clamp(30px,8vh,62px);padding-top:16px;border-top:1px solid #ffffff12;
}
#mobile-nav.mobile-nav .mobile-nav__actions a{
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin:0;padding:0 12px;
  border:1px solid #ffffff18;border-radius:999px;background:#ffffff08!important;color:rgba(229,234,238,.72);
  text-decoration:none;font-size:.78rem;font-weight:520;letter-spacing:.01em;
}
#mobile-nav.mobile-nav .mobile-nav__actions a:last-child{border-color:#a895ff38;background:linear-gradient(110deg,#a895ff17,#a9ecff0d)!important;color:#eef1f4}
#mobile-nav.mobile-nav .mobile-nav__actions a:hover{color:#fff;border-color:#ffffff35}
@keyframes qa-sheet-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* Lock on body, not html: body's overflow then propagates to the viewport, so
   the sticky header keeps the viewport as its scroller and stays in place. */
html:has(#mobile-nav){overscroll-behavior:none}
html:has(#mobile-nav) body{overflow:hidden!important}
/* A blurred header would become the containing block for the fixed sheet. */
.site-header:has(#mobile-nav){-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:var(--satin) bottom/100% 1px no-repeat,#080a0e!important}
.menu-toggle{position:relative}
.menu-toggle[aria-expanded=true] svg{opacity:0}
.menu-toggle[aria-expanded=true]:before,.menu-toggle[aria-expanded=true]:after{
  content:"";position:absolute;left:50%;top:50%;width:16px;height:1.6px;border-radius:1px;background:currentColor;
  transform:translate(-50%,-50%) rotate(45deg);
}
.menu-toggle[aria-expanded=true]:after{transform:translate(-50%,-50%) rotate(-45deg)}

@media (prefers-reduced-motion:reduce){
  #mobile-nav.mobile-nav{animation:none}
}

@media (max-width:720px){
  /* Shared disclosure control for long lists, ledgers and details ---------- */
  .qa-show{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:44px;margin:2px 0 0;padding:0;
    background:none;border:0;border-top:1px solid currentColor;border-top-color:color-mix(in srgb,currentColor 12%,transparent);
    color:inherit;font:540 .8rem/1 var(--font-sans);letter-spacing:.01em;cursor:pointer;opacity:.8}
  .qa-show:hover{opacity:1}
  .qa-show:after{content:"";width:7px;height:7px;margin:0 6px 4px 0;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform var(--t-state,.3s) var(--ease-out,ease)}
  .qa-show[aria-expanded=true]:after{transform:rotate(-135deg);margin-bottom:-4px}
  .qa-show:focus-visible{outline:2px solid var(--focus,#8b7bff);outline-offset:2px;border-radius:4px}
  [data-qa-clamp=closed] [data-qa-x]:not(#qa-x){display:none!important}
  [data-qa-clamp=open] [data-qa-x]:not(#qa-x){animation:qa-arrive var(--t-state,.3s) var(--ease-out,ease) both}
  .table-wrap+.qa-show{margin-top:0;padding-inline:14px;border-top:0}

  /* Readable floor: small spaced labels never drop below 10.5px ----------- */
  .eyebrow,.qa-kicker,.qa-section-label,.qa-pill,.qa-hero__signal dt,.k{font-size:max(.66rem,10.5px)}
  .fine,.coverage-map-caption{font-size:max(.72rem,11.5px)}
  .qa-check__top span,.qa-check__top i{font-size:max(.66rem,10.5px)}
  .qa-steps li>span,.qa-plan__note span{font-size:max(.72rem,11.5px)}
  .tag,.badge{font-size:max(.66rem,10.5px)}
  .kv dt{font-size:max(.66rem,10.5px)!important}
  .site-footer h2,.footer-grid h2{font-size:max(.66rem,10.5px)}
  .preview-bar b{font-size:max(.66rem,10.5px)}
  .badge-num{font-size:12px}
  .coverage-map-label{font-size:max(.66rem,10.5px)}
  .table[data-qa-rows] [data-qa-role=meta][data-qa-label]:before{font-size:max(.62rem,10px)}
  .qa-route i:after{font-size:max(.58rem,9.5px)}
  input.input,.field input,.field select,.field textarea,select.input,textarea.input{font-size:max(1rem,16px)}

  /* Actions keep their words on one line ---------------------------------- */
  .qa-button,.btn:not(.btn--block):not(.card):not(:has(>.fine)),.coverage-buttons .btn{white-space:nowrap}
  .living-vessel__toggle{white-space:nowrap}
  /* The closing form bleeds off the left edge; its pause key stays on screen. */
  .qa-closing__vessel .living-vessel__toggle{left:calc(13vw + 14px)!important;right:auto!important}

  /* Rhythm: fewer dead bands between sections ----------------------------- */
  .site-footer{padding-top:36px}
  .section{padding-block:44px}
  .section--tight{padding-block:28px}

  /* Plans: name, price, status, promise, three benefits and the CTA -------- */
  main .card[data-qa-plan]{padding:18px 18px 12px!important;--gap:10px!important}
  main .card[data-qa-plan]>.row--between{flex-direction:column-reverse;align-items:flex-start;justify-content:flex-start;gap:8px}
  main .card[data-qa-plan] .price{font-size:calc(var(--fs-plan-price,3.2rem) * .8)!important;line-height:1;margin-top:0!important}
  main .card[data-qa-plan]:has(.tag--concept) .price{font-size:calc(var(--fs-plan-price,3.2rem) * .62)!important}
  main .card[data-qa-plan] .price small{display:block;margin-top:8px!important}
  main .card[data-qa-plan]>p.body{font-size:.9rem!important;line-height:1.45}
  main .card[data-qa-plan] .list-check li{padding:6px 0 6px 20px!important;font-size:.84rem!important;line-height:1.38}
  main .card[data-qa-plan] .list-check li:before{top:calc(6px + .72em)!important}
  main .card[data-qa-plan]>.row:not(.row--between){order:20;display:grid;grid-template-columns:1fr;gap:8px}
  main .card[data-qa-plan]>.row:not(.row--between) .btn{width:100%}
  main .card[data-qa-plan]>.qa-more{order:21}
  main .card[data-qa-plan]>p.fine{order:22}
  main .card[data-qa-plan][data-qa-plan=collapsed]>.row:not(.row--between)>.btn--ghost{display:none}
  main .grid:has(>.card[data-qa-plan]){--gap:12px!important}
  .qa-plan{padding:18px 18px 14px!important}
  .qa-plan__top{margin-bottom:14px!important}
  .qa-plan__price{font-size:calc(var(--fs-plan-price,3.2rem) * .84)!important}
  .qa-plan ul{margin:12px 0 2px!important}
  .qa-plan li{padding:6px 0 6px 20px!important}
  .qa-plan li:before{top:calc(6px + .62em)!important}
  .qa-plan .qa-button{margin-top:10px!important}
  .qa-plan__index{font-size:12px}

  /* Join: the plan, the note and the subtotal tighten; the action stays in reach */
  .join-body .card.stack:has(>.list-check){padding:18px 18px 14px;--gap:10px!important}
  .join-body .list-check li{padding-block:6px!important;font-size:.88rem;line-height:1.4}
  .join-body .list-check li:before{top:calc(6px + .72em)!important}
  .join-body .price{font-size:2.6rem;line-height:1}
  .join-body .notice{display:block;padding:12px 14px}
  .join-body .notice>b{display:block;width:auto;margin:0 0 4px}
  .join-body .notice>p{margin:0}
  .join-body .card--sunk.row{flex-wrap:nowrap;align-items:baseline;justify-content:space-between;gap:12px;padding:14px 16px}
  .join-body .card--sunk.row>span:first-child{font-size:.88rem}
  .join-body .card--sunk.row .h3{white-space:nowrap;text-align:right}
  .join-body .card--sunk.row .h3 .small{display:block;font-size:.72rem;margin-top:2px}
  .join-body>section>div:last-child:has(>.btn),
  .join-body form:not(.account-form)>.row:last-child:has(.btn){
    position:sticky;bottom:0;z-index:6;display:flex;flex-wrap:nowrap;gap:8px;
    margin:0 -20px;padding:14px 20px calc(14px + env(safe-area-inset-bottom));
    background:linear-gradient(180deg,#05070a00,#05070ae8 26%,#05070a);
  }
  .join-body>section>div:last-child:has(>.btn) .btn,
  .join-body form:not(.account-form)>.row:last-child:has(.btn) .btn{flex:1 1 0;min-width:0;justify-content:center}

  /* Join progress: Step X of 6, with the current and next step ------------- */
  .join-progress[data-qa-step]{position:relative;padding-top:24px}
  .join-progress[data-qa-step]:before{content:"Step " attr(data-qa-step) " of " attr(data-qa-steps);position:absolute;top:0;left:0;
    font:540 max(.66rem,10.5px)/1 var(--font-sans);letter-spacing:.17em;text-transform:uppercase;color:#9aa3ab}
  .join-progress[data-qa-step]:after{content:"";position:absolute;top:4px;right:0;width:min(40%,150px);height:2px;border-radius:2px;
    background:linear-gradient(90deg,var(--ion,#5ce1ff) calc(var(--qa-join-p,0) * 100%),#ffffff1c 0);box-shadow:0 0 10px #5ce1ff26}
  .join-progress[data-qa-step] ol,.join-progress[data-qa-step] ol[data-qa-rail]{
    display:grid!important;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;
    overflow:visible!important;-webkit-mask:none!important;mask:none!important;scroll-snap-type:none;padding:0;margin:0}
  .join-progress[data-qa-step] li{display:none}
  .join-progress[data-qa-step] li.current{display:block;grid-column:2;min-width:0}
  .join-progress[data-qa-step] li.current+li{display:block;grid-column:3}
  .join-progress[data-qa-step] li.done:has(+li.current){display:block;grid-column:1}
  .join-progress[data-qa-step] li.current>*{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;white-space:nowrap}
  .join-progress[data-qa-step] li.current+li>*{display:flex;align-items:center;gap:6px;min-height:44px;padding:0 4px;border:0;background:none;box-shadow:none;color:#8d969e;white-space:nowrap}
  .join-progress[data-qa-step] li.current+li>*:before{content:"Next";font:540 max(.6rem,10px)/1 var(--font-sans);letter-spacing:.15em;text-transform:uppercase;color:#6f7880}
  .join-progress[data-qa-step] li.current+li .n{display:none}
  .join-progress[data-qa-step] li.done>button{min-width:44px;min-height:44px;white-space:nowrap}
  .join-progress[data-qa-step] .n{font-size:12px}

  /* Coverage: the map and its copy are capped; facts become rows ---------- */
  .coverage-explorer .coverage-map{height:clamp(232px,64vw,290px)!important;min-height:0!important}
  .coverage-stage-copy{padding:16px 16px 18px!important}
  .coverage-stage-copy{gap:10px!important}
  .coverage-stage-copy h2{font-size:1.5rem!important;line-height:1.15}
  .coverage-stage-copy p{font-size:.86rem!important;line-height:1.5}
  .coverage-legend{gap:6px 14px!important;margin-top:2px!important}
  .coverage-actions{padding:16px!important;gap:12px}
  .coverage-buttons{display:grid!important;grid-template-columns:1fr;gap:8px}
  .coverage-buttons .btn{width:100%;justify-content:center}
  .coverage-facts article{padding:14px 16px!important}
  .coverage-facts article h3{margin-top:6px!important}
  .coverage-facts article p{margin-top:4px!important;font-size:.84rem}
  .maplibregl-ctrl-group button{width:44px!important;height:44px!important}
  .maplibregl-ctrl-attrib-button{width:44px!important;height:44px!important;background-position:center!important}

  /* Preview lists: test phones, account states, staff roles --------------- */
  .notice--preview .row:has(>.btn--sm){display:grid;grid-template-columns:1fr;gap:6px}
  .notice--preview .row>.btn--sm{justify-content:flex-start;text-align:left;white-space:normal!important;height:auto;min-height:44px;padding:10px 14px;line-height:1.32}
  .notice--preview .grid-2:has(>form>button){grid-template-columns:1fr;--gap:6px!important;gap:6px}
  .notice--preview form>button.btn{flex-direction:column;align-items:flex-start;justify-content:center!important;gap:2px;height:auto;min-height:48px;padding:9px 14px;text-align:left;white-space:normal;line-height:1.3}
  .notice--preview form>button.btn .fine{font-size:.76rem;opacity:.8}
  main form>button.card.btn--block{flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;min-height:56px;padding:10px 16px;text-align:left}

  /* Ledgers: compact rows with a clear drill-in --------------------------- */
  .table[data-qa-rows] tr[data-qa-kind=drill]{position:relative;padding-right:38px;cursor:pointer}
  .table[data-qa-rows] tr[data-qa-kind=drill]:after{content:"";position:absolute;right:17px;top:50%;width:7px;height:7px;
    border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:translateY(-50%) rotate(45deg);opacity:.34;pointer-events:none}
  .table[data-qa-rows] tr[data-qa-kind=drill] [data-qa-drill-link]:before{content:"";position:absolute;inset:0;z-index:1}
  .table[data-qa-rows] tr[data-qa-kind=drill] :is(a:not([data-qa-drill-link]),button,form,input,select){position:relative;z-index:2}
  .table[data-qa-rows] tr[data-qa-kind=drill]:active{background:#0b0d100d}
  .table[data-qa-rows] tr[data-qa-kind=drill]:has([data-qa-drill-link]:focus-visible){box-shadow:inset 0 0 0 2px var(--focus,#8b7bff)}
  .table[data-qa-rows] tr[data-qa-kind=drill] [data-qa-drill-link]:focus-visible{outline:0}
  /* Rows that explain rather than link open in place. */
  .table[data-qa-rows] tr[data-qa-kind=fold] [data-qa-role=meta]{display:none!important}
  .table[data-qa-rows] tr[data-qa-kind=fold][data-qa-open] [data-qa-role=meta]{display:block!important;animation:qa-arrive var(--t-state,.3s) var(--ease-out,ease) both}
  .table[data-qa-rows] tr[data-qa-kind=fold] [data-qa-role=primary]{position:relative;grid-column:1/-1;display:block;min-height:44px;padding:12px 30px 12px 0!important;margin:-12px 0;cursor:pointer}
  .table[data-qa-rows] tr[data-qa-kind=fold] [data-qa-role=primary]:after{content:"";position:absolute;right:4px;top:50%;width:7px;height:7px;margin-top:-6px;
    border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);opacity:.4;transition:transform var(--t-state,.3s) var(--ease-out,ease)}
  .table[data-qa-rows] tr[data-qa-kind=fold][data-qa-open] [data-qa-role=primary]:after{transform:rotate(-135deg);margin-top:-2px}
  .table[data-qa-rows] tr[data-qa-kind=fold] [data-qa-role=primary]:focus-visible{outline:2px solid var(--focus,#8b7bff);outline-offset:2px;border-radius:4px}
  .table[data-qa-rows] tr[data-qa-kind=fold][data-qa-open] [data-qa-role=meta]:first-of-type{margin-top:12px}
  /* Preference rows: the topic, then Email and Text as two tappable cells. */
  .table[data-qa-rows] tr[data-qa-kind=toggles]{grid-template-columns:minmax(0,1fr) 56px 56px;align-items:center;column-gap:4px;padding-block:8px}
  .table[data-qa-rows] tr[data-qa-kind=toggles] [data-qa-role=primary]{grid-column:1;grid-row:1}
  .table[data-qa-rows] tr[data-qa-kind=toggles] [data-qa-role=meta]{grid-row:1;grid-column:auto!important;display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:7px;min-height:56px;cursor:pointer;color:inherit}
  .table[data-qa-rows] tr[data-qa-kind=toggles] [data-qa-role=meta][data-qa-label]:before{margin:0}
  .table[data-qa-rows] tr[data-qa-kind=toggles] [data-qa-role=meta] input[type=checkbox]{margin:0}
  .table[data-qa-rows] tr[data-qa-kind=toggles] [data-qa-role=meta]:has(input:disabled){cursor:default;opacity:.7}

  /* Operations: queue heads keep the count beside the title --------------- */
  .portal-main section>.row--between h2.h4:has(>.badge-num){display:flex;align-items:baseline;justify-content:space-between;gap:12px}
  .portal-main section>.row--between h2.h4>.badge-num{flex:none}
  .portal-main section>.row--between{min-height:0}

  /* Ledger rows pack their facts onto shared lines ----------------------- */
  .table[data-qa-rows] tr[data-qa-pack]{display:flex!important;flex-wrap:wrap;align-items:baseline;column-gap:14px;row-gap:3px}
  .table[data-qa-rows] tr[data-qa-pack] [data-qa-role=primary]{flex:1 1 0;min-width:0;order:0}
  .table[data-qa-rows][data-qa-noaside] tr[data-qa-pack] [data-qa-role=primary]{flex-basis:100%}
  .table[data-qa-rows] tr[data-qa-pack] [data-qa-role=aside]{flex:none;order:1;margin-left:auto}
  .table[data-qa-rows] tr[data-qa-pack]:before{content:"";order:2;flex-basis:100%;height:0}
  .table[data-qa-rows] tr[data-qa-pack] [data-qa-role=meta]{flex:0 1 auto;order:3;min-width:0;max-width:100%}
  .table[data-qa-rows] tr[data-qa-pack] [data-qa-role=meta]:empty{display:none}

  /* Detail lists tighten -------------------------------------------------- */
  .kv{grid-template-columns:minmax(0,8.4rem) minmax(0,1fr)}
  .kv[data-qa-stack]{grid-template-columns:minmax(0,1fr)!important}
  .kv[data-qa-stack] dt{padding:10px 0 0!important}
  .kv[data-qa-stack] dd{padding:3px 0 10px!important;border-top:0!important;margin:0}
  .timeline .t-detail{line-height:1.45}
}

@media (max-width:359px){
  #mobile-nav.mobile-nav{padding-inline:16px}
  #mobile-nav.mobile-nav .mobile-nav__panel{padding-top:24px}
  #mobile-nav.mobile-nav .mobile-nav__grid a{min-height:48px;font-size:1.22rem}
  .join-progress[data-qa-step] li.done>button{font-size:0;padding:0;justify-content:center}
  .join-progress[data-qa-step] li.done>button:before{content:"";width:8px;height:8px;border-left:1.5px solid #cdd4da;border-bottom:1.5px solid #cdd4da;transform:rotate(45deg);margin-left:3px}
  .join-progress[data-qa-step] li.done>button .n{display:none}
  .join-progress[data-qa-step] li.current+li>*:before{display:none}
  .table[data-qa-rows] tr[data-qa-kind=toggles]{grid-template-columns:minmax(0,1fr) 50px 50px}
  .section{padding-block:40px}
  .kv{grid-template-columns:minmax(0,7.4rem) minmax(0,1fr)}
  main .card[data-qa-plan]{padding:16px 16px 12px}
  .join-body>section>div:last-child:has(>.btn),.join-body form>.row:last-child:has(.btn){margin:0 -16px;padding-inline:16px}
}