/* ============================================================================
   Veygo - design system
   The single source of truth for tokens + reusable components (§2 of the build
   guide). Every screen reuses these. Mobile-first (~390px); centred + capped on
   desktop. Values sampled from the Pixel Perfect Reference screenshots.
   ========================================================================== */

/* ── Fonts (self-hosted) ─────────────────────────────────────────────────── */
/* Body: Metropolis - Veygo's real body font (open-source, self-hosted).
   Headings: Veygo's brand face is Graphie (commercial, Adobe Fonts); --font-head
   is the interim substitute until the licensed Graphie files are wired in.
   Number plates: Charles Wright (UK plate face, reused from esure). */
@font-face { font-family:'Poppins'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/poppins-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:500; font-display:swap; src:url('/fonts/poppins-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:600; font-display:swap; src:url('/fonts/poppins-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:700; font-display:swap; src:url('/fonts/poppins-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:800; font-display:swap; src:url('/fonts/poppins-latin-800-normal.woff2') format('woff2'); }
/* Graphie - Veygo's real heading font (commercial, licensed). Converted from the
   supplied desktop OTFs to woff2 (Regular/SemiBold/Bold/ExtraBold). The source
   OTFs are kept, unserved + gitignored, in /brand/graphie-src/. Poppins stays in
   --font-head as a safety fallback for any weight not shipped here. */
/* graphie-*-t.woff2 = Graphie with the "1" glyph re-spaced to match the other
   digits (the stock "1" floats in its tabular slot, gapping before/after it).
   See scripts/patch-graphie-one.py. */
@font-face { font-family:'Graphie'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/graphie-400-t.woff2') format('woff2'); }
@font-face { font-family:'Graphie'; font-style:normal; font-weight:600; font-display:swap; src:url('/fonts/graphie-600-t.woff2') format('woff2'); }
@font-face { font-family:'Graphie'; font-style:normal; font-weight:700; font-display:swap; src:url('/fonts/graphie-700-t.woff2') format('woff2'); }
@font-face { font-family:'Graphie'; font-style:normal; font-weight:800; font-display:swap; src:url('/fonts/graphie-800-t.woff2') format('woff2'); }
@font-face { font-family:'Metropolis'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/metropolis-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family:'Metropolis'; font-style:normal; font-weight:500; font-display:swap; src:url('/fonts/metropolis-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family:'Metropolis'; font-style:normal; font-weight:600; font-display:swap; src:url('/fonts/metropolis-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family:'Metropolis'; font-style:normal; font-weight:700; font-display:swap; src:url('/fonts/metropolis-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family:'Metropolis'; font-style:normal; font-weight:800; font-display:swap; src:url('/fonts/metropolis-latin-800-normal.woff2') format('woff2'); }
@font-face { font-family:'UK Plate'; font-style:normal; font-weight:700; font-display:swap; src:url('/fonts/charles-wright-bold.otf') format('opentype'); }

/* ── Tokens ──────────────────────────────────────────────────────────────── */
:root {
  /* Brand - values sampled from the Pixel Perfect Reference (pass-2 colour
     check); these override the §2 starting hexes. "The image wins." */
  --teal-900:#015466;   /* splash/hero bg, primary buttons, dark headings, plate GB tab (splash bg 91%) */
  --teal-700:#136070;   /* secondary teal surfaces (lighter teal) */
  --teal-950:#093F4C;   /* darkest teal (Veybot card) */
  --turquoise:#06DCCE;  /* active tab + label, progress fill, logo accent, link chevrons (progress-bar fill) */
  --green:#16C79A;      /* cover-checklist ticks (guide value - re-sample on the excess screen) */
  --pink:#F1B2E4;       /* onboarding highlight marker + tick circles (orchid) */
  --pink-soft:#F7E1EE;  /* "cancelled" X bg, push-notif banner bg */
  --mint:#CFF7F5;       /* "Subscription" pill bg, "your plan" highlight */
  --mint-soft:#E9FBFB;  /* large info / Trustpilot banner bg */

  /* Surfaces + ink */
  --bg:#F9FBFA;
  --card:#FFFFFF;
  --line:#DBDEDD;
  --ink:#17201F;
  --ink-2:#3B4543;
  --muted:#6B7570;
  --danger:#D62F5C;     /* cancelled X mark (guide value - re-sample on the policies screen) */

  /* States */
  --disabled-bg:#EEEEEE;
  --disabled-ink:#ABABAB;
  --keypad-bg:#D0D3DC;
  --scrim:rgba(1,30,34,.42);

  /* Type */
  --font-head:'Graphie', 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:'Metropolis', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-plate:'UK Plate', 'Roboto Mono', ui-monospace, monospace;

  /* Radii */
  --r-card:12px;
  --r-input:11px;
  --r-banner:11px;
  --r-sheet:20px;
  --r-pill:999px;
  --r-tag:8px;

  /* Elevation */
  --shadow-soft:0 1px 2px rgba(16,40,37,.05), 0 1px 3px rgba(16,40,37,.05);
  --shadow-float:0 6px 22px rgba(13,40,46,.12);
  --shadow-up:0 -8px 28px rgba(13,40,46,.16);

  /* Layout */
  --app-max:480px;
  --gutter:22px;
  --sat:env(safe-area-inset-top);
  --sab:env(safe-area-inset-bottom);
}

/* ── Reset / base ────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;height:100%;}
body{
  margin:0;
  /* The app frame (.app) is position:fixed and owns the layout + scroll; the page
     itself never scrolls, so nothing can be rubber-banded out of place. */
  height:100%;
  overflow:hidden;
  overscroll-behavior:none;
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.45;
  color:var(--ink-2);
  background:#DCE3E2;            /* surround colour so the app column reads as a phone on desktop */
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* On desktop keep the grey "phone surround" regardless of the per-screen canvas
   colour that app.js sets (that colour only matters for the iOS safe-area strip). */
@media (min-width:481px){ body{ background:#DCE3E2 !important; } }
button{font-family:inherit;}
a{color:inherit;}
img,svg{display:block;}

/* The whole app lives in a centred, capped column. This column is the single
   scroll container: a fixed viewport height with internal scroll, so sticky
   top/bottom bars pin correctly and overscroll never drags them out of place. */
.app{
  /* Anchored with fixed + inset:0 so the frame fills the ENTIRE layout viewport,
     including the iOS safe areas (home indicator). A viewport-height unit (100dvh)
     resolves short of the home-indicator area in an installed iOS PWA, leaving a
     gap at the bottom. left/right:0 + max-width + margin:auto keeps it centred. */
  position:fixed;
  top:0;right:0;bottom:0;left:0;
  max-width:var(--app-max);
  margin:0 auto;
  background:var(--bg);
  box-shadow:0 0 40px rgba(0,0,0,.08);
  overflow:hidden;
  /* Flex column: a scroll area (.app-view) + a flex-pinned tab bar. */
  display:flex;
  flex-direction:column;
}
/* ── Installed PWA: lay the frame out in NORMAL FLOW, not position:fixed ──
   ROOT CAUSE of the long-running "raised bottom": position:fixed is pinned to (and
   CLIPPED at) iOS's layout viewport, which the translucent status bar makes
   ~status-bar-height SHORTER than the physical screen (793 vs 852). A fixed frame
   therefore can't paint the bottom strip no matter what height it's given - the tab
   bar stays high and the strip below shows only the page background.
   Fix: in the installed app, make the frame a normal-flow block at the true screen
   height (100vh = the full 852 on iOS), so it renders all the way to the bottom.
   The scroll still lives in .app-view, so nothing rubber-bands. The .pwa class is
   set from JS (navigator.standalone - reliable on iOS); the media query backs it up
   for Android/other engines. */
html.pwa, html.pwa body{ height:100vh; }
html.pwa body{ overflow:hidden; }
html.pwa .app{ position:static; inset:auto; height:100vh; }
@media (display-mode:standalone){
  html, body{ height:100vh; }
  body{ overflow:hidden; }
  .app{ position:static; inset:auto; height:100vh; }
}
/* The single scroll area - every screen renders here and scrolls within it. */
.app-view{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:auto;   /* allow the iOS rubber-band/bounce at top+bottom */
  -webkit-overflow-scrolling:touch;
  position:relative;
  /* Flex column so the current screen FILLS the view via flex (not min-height:100%,
     which doesn't resolve against a flex-item parent in Safari - that left screens
     collapsed to content height, so their bottom content read as "raised"). */
  display:flex;
  flex-direction:column;
}
/* The current screen fills the view when short, grows + scrolls when tall. */
.app-view > *{
  flex:1 0 auto;
  min-height:0;
}

/* Standard light screen: padded content area, room for sticky footer/tab bar. */
.screen{
  padding:calc(var(--sat) + 8px) var(--gutter) 28px;
}

/* ── Typography helpers ──────────────────────────────────────────────────── */
.t-hero{font-family:var(--font-head);font-weight:700;font-size:32px;line-height:1.1;color:#fff;letter-spacing:-.01em;}
.t-title{font-family:var(--font-head);font-weight:700;font-size:24px;line-height:1.15;color:var(--ink);letter-spacing:-.01em;}
.t-h2{font-family:var(--font-head);font-weight:700;font-size:17px;line-height:1.3;color:var(--ink);}
.t-section{font-family:var(--font-head);font-weight:700;font-size:17px;color:var(--ink);}
.t-label{font-family:var(--font-head);font-weight:700;font-size:15px;color:var(--ink);}
.t-body{font-family:var(--font-body);font-weight:400;font-size:16px;color:var(--ink-2);}
.t-muted{color:var(--muted);}
.t-price{font-family:var(--font-head);font-weight:800;font-size:30px;color:var(--ink);letter-spacing:-.01em;}
.t-price .per{font-family:var(--font-body);font-weight:500;font-size:16px;color:var(--muted);}
.t-teal{color:var(--teal-900);}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:100%;min-height:58px;padding:0 22px;
  font-family:var(--font-head);font-weight:700;font-size:19px;
  border:none;border-radius:var(--r-pill);cursor:pointer;
  transition:transform .09s ease, background .15s ease, opacity .15s ease;
  -webkit-tap-highlight-color:transparent;
}
.btn:active,.btn.is-press{transform:scale(.95);}

.btn-primary{background:var(--teal-900);color:#fff;}
.btn-primary:hover{background:#013E4B;}
.btn-primary:disabled,.btn-primary.is-disabled{background:var(--disabled-bg);color:var(--disabled-ink);cursor:default;}
.btn-primary:disabled:active,.btn-primary.is-disabled:active{transform:none;}

.btn-secondary{background:#fff;color:var(--ink);border:1.5px solid var(--ink);}
.btn-secondary:hover{background:#fafbfb;}

.btn-light{background:#fff;color:var(--ink);}      /* white pill on a teal bg (onboarding "Log in") */

.btn-text{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  width:auto;min-height:auto;padding:6px 4px;background:none;border:none;cursor:pointer;
  font-family:var(--font-head);font-weight:700;font-size:16px;color:var(--ink);
}
.btn-text.on-teal{color:#fff;}
.btn-text.teal{color:var(--teal-900);}

/* Compact pill for inline actions (Find, small Edit). */
.btn-sm{width:auto;min-height:48px;padding:0 26px;font-size:16px;border-radius:var(--r-pill);}
.btn-edit{width:auto;min-height:44px;padding:0 26px;background:#fff;color:var(--ink);
  border:1.5px solid var(--ink);border-radius:var(--r-pill);
  font-family:var(--font-head);font-weight:700;font-size:15px;cursor:pointer;}

/* ── Inputs ──────────────────────────────────────────────────────────────── */
.field{margin-bottom:22px;}
.field > label{display:block;margin-bottom:8px;font-family:var(--font-head);font-weight:700;font-size:15px;color:var(--ink);}
.input{
  width:100%;min-height:58px;padding:16px 18px;
  font-family:var(--font-body);font-size:16px;font-weight:500;color:var(--ink);
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-input);
  outline:none;transition:border-color .15s ease, box-shadow .15s ease;
}
.input::placeholder{color:var(--muted);}
.input:focus{border-color:var(--teal-700);box-shadow:0 0 0 3px rgba(1,84,102,.14);}
/* iOS renders native date/time controls at their own intrinsic width, ignoring
   width:100% (the DOB box ends up far wider than text fields). Flatten their
   appearance on iOS only so they size like every other field; tapping still opens
   the native picker. Desktop keeps its calendar icon. */
@supports (-webkit-touch-callout: none) {
  .input[type="date"], .input[type="time"]{ -webkit-appearance:none; appearance:none; }
}

/* Password field with an eye toggle on the right. */
.input-wrap{position:relative;display:flex;align-items:center;}
.input-wrap .input{padding-right:58px;}
.input-eye{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  width:38px;height:30px;display:grid;place-items:center;
  background:#D6DAD9;border:none;border-radius:8px;color:#5b6563;cursor:pointer;
}
.input-eye svg{width:22px;height:22px;}

/* ── GB number plate ─────────────────────────────────────────────────────── */
.plate{
  display:inline-flex;align-items:stretch;height:48px;
  border:1px solid #C7CDCB;border-radius:8px;overflow:hidden;background:#fff;
}
.plate-gb{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  width:38px;background:var(--teal-900);color:#fff;padding:4px 0;
}
.plate-gb svg{width:20px;height:13px;border-radius:1px;}
.plate-gb span{font-family:var(--font-head);font-weight:700;font-size:9px;letter-spacing:.04em;line-height:1;}
.plate-reg{
  display:flex;align-items:center;justify-content:center;text-align:center;padding:0 14px;
  font-family:var(--font-plate);font-size:21px;letter-spacing:.06em;color:#10100F;
  /* Charles Wright is caps-only; CSS 'normal' line-height reserves phantom
     descender space, so the glyphs sit high. Nudge down to true vertical centre. */
  transform:translateY(.16em);
}
.plate-reg::placeholder{color:#A9AFAD;}
/* When used as an editable reg input on Home (joined to a Find button). */
.plate-input{flex:1;min-width:0;border:none;background:transparent;outline:none;text-align:left;
  font-family:var(--font-plate);font-size:17px;letter-spacing:.08em;color:#10100F;text-transform:uppercase;
  transform:translateY(.16em);}   /* match .plate-reg: nudge the caps to true vertical centre */
/* The reg TEXT is centred within its own plate box via justify-content:center on
   .plate-reg above; the plate keeps its natural position (NOT centred on the page). */
.plate-input::placeholder{color:#AAB0AE;}

/* ── Card ────────────────────────────────────────────────────────────────── */
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);
  padding:20px;box-shadow:var(--shadow-soft);
}
.card-flush{padding:0;}
.card--float{box-shadow:var(--shadow-float);border-color:transparent;}

/* ── Pill / badge ────────────────────────────────────────────────────────── */
.tag{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 13px;border-radius:var(--r-tag);
  font-family:var(--font-head);font-weight:700;font-size:15px;color:var(--ink);
  background:var(--mint);
}
.tag svg{width:17px;height:17px;}

/* Status circles (policy active / cancelled). */
.status{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none;}
.status--ok{background:var(--mint);color:var(--teal-900);}
.status--cancelled{background:var(--pink-soft);color:var(--danger);}
.status svg{width:20px;height:20px;}

/* ── Segmented control ───────────────────────────────────────────────────── */
.segmented{
  display:flex;padding:5px;gap:4px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-pill);
}
.seg{
  flex:1;min-height:46px;padding:0 12px;border:none;background:transparent;cursor:pointer;
  border-radius:var(--r-pill);
  font-family:var(--font-head);font-weight:700;font-size:17px;color:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .15s ease, color .15s ease;
}
.seg.is-active{background:var(--teal-900);color:#fff;}

/* ── Choice cards ────────────────────────────────────────────────────────── */
.choices{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.choice{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;
  padding:22px 16px;min-height:152px;cursor:pointer;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-card);
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.choice .choice-icon{color:var(--teal-900);margin-bottom:2px;}
.choice .choice-icon svg{width:30px;height:30px;}
.choice .choice-title{font-family:var(--font-head);font-weight:700;font-size:18px;color:var(--ink);}
.choice .choice-sub{font-family:var(--font-body);font-size:15px;color:var(--muted);line-height:1.35;}
.choice.is-selected{background:var(--teal-900);border-color:var(--teal-900);}
.choice.is-selected .choice-title{color:#fff;}
.choice.is-selected .choice-sub{color:rgba(255,255,255,.82);}
.choice.is-selected .choice-icon{color:#fff;}

/* ── Accordion ───────────────────────────────────────────────────────────── */
.accordion{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);margin-bottom:14px;box-shadow:var(--shadow-soft);}
.accordion-head{
  display:flex;align-items:center;gap:14px;width:100%;
  padding:20px;background:none;border:none;cursor:pointer;text-align:left;
}
.accordion-head .lead{color:var(--teal-900);flex:none;display:grid;place-items:center;}
.accordion-head .lead svg{width:26px;height:26px;}
.accordion-head .title{flex:1;font-family:var(--font-head);font-weight:700;font-size:19px;color:var(--ink);}
.accordion-head .chev{color:var(--teal-900);transition:transform .2s ease;}
.accordion-head .chev svg{width:22px;height:22px;}
.accordion[open] .accordion-head .chev,.accordion.is-open .accordion-head .chev{transform:rotate(180deg);}
.accordion-body{padding:0 20px 20px;}

/* ── Bottom sheet ────────────────────────────────────────────────────────── */
.scrim{position:fixed;inset:0;background:var(--scrim);z-index:40;}
.sheet{
  position:fixed;left:50%;bottom:0;transform:translateX(-50%);
  width:100%;max-width:var(--app-max);z-index:41;
  background:#fff;border-radius:var(--r-sheet) var(--r-sheet) 0 0;
  padding:26px var(--gutter) calc(22px + var(--sab));
  box-shadow:var(--shadow-up);max-height:58dvh;overflow-y:auto;   /* sheets come up ~halfway, never covering most of the screen */
}
.sheet-title{font-family:var(--font-head);font-weight:700;font-size:25px;line-height:1.1;color:var(--ink);margin:0 0 16px;letter-spacing:-.01em;}   /* reference 02.44.00(6)/(9): cap 17.5 log @414w */

/* ── Info banner + info line ─────────────────────────────────────────────── */
.banner{
  background:var(--mint-soft);border:1px solid var(--turquoise);border-radius:var(--r-banner);
  padding:18px 20px;color:var(--ink);
}
.banner--mint{background:var(--mint-soft);}
.banner-title{font-family:var(--font-head);font-weight:700;font-size:18px;color:var(--ink);text-align:center;}
.banner p{margin:0;font-size:15px;color:var(--teal-900);line-height:1.4;}

/* push-notification style banner (pink). */
.banner-pink{
  display:flex;align-items:center;gap:14px;
  background:var(--pink-soft);border-radius:var(--r-banner);padding:16px 18px;color:var(--ink);
}
.banner-pink .msg{flex:1;font-family:var(--font-head);font-weight:700;font-size:15px;line-height:1.35;}

/* inline "i" + teal text (premium tax, excess explanation). */
.info-line{display:flex;align-items:flex-start;gap:10px;color:var(--teal-900);font-size:15.5px;line-height:1.4;}
.info-line .i{flex:none;width:22px;height:22px;border-radius:50%;background:var(--turquoise);color:var(--teal-900);
  display:grid;place-items:center;font-family:var(--font-head);font-weight:700;font-size:14px;margin-top:1px;}

/* ── Progress bar ────────────────────────────────────────────────────────── */
.progress{height:8px;border-radius:var(--r-pill);background:#E2E7E5;overflow:hidden;}
.progress-fill{height:100%;border-radius:var(--r-pill);background:var(--turquoise);}

/* ── Checklist (cover) + ticked lists ────────────────────────────────────── */
.checklist{display:flex;flex-direction:column;gap:14px;}
.check-item{display:flex;align-items:center;gap:14px;font-size:16px;color:var(--ink-2);}
.check-item .tick{color:var(--green);flex:none;}
.check-item .tick svg{width:22px;height:22px;}
.check-item.teal .tick{color:var(--teal-900);}

/* ── Radio list (reason for cover) ───────────────────────────────────────── */
.radio-list{display:flex;flex-direction:column;}
.radio-row{display:flex;gap:14px;padding:12px 0;cursor:pointer;align-items:flex-start;text-align:left;background:none;border:none;width:100%;}
.radio-row .dot{flex:none;width:26px;height:26px;border-radius:50%;border:2px solid #C5CCCA;margin-top:2px;
  display:grid;place-items:center;transition:border-color .15s ease;}
.radio-row .dot::after{content:"";width:13px;height:13px;border-radius:50%;background:var(--teal-900);transform:scale(0);transition:transform .15s ease;}
.radio-row.is-selected .dot{border-color:var(--teal-900);}
.radio-row.is-selected .dot::after{transform:scale(1);}
.radio-row .rtitle{font-family:var(--font-head);font-weight:700;font-size:15px;color:var(--ink);line-height:1.25;}
.radio-row .rdesc{font-family:var(--font-body);font-size:13px;color:var(--muted);line-height:1.32;margin-top:2px;}

/* ── List rows (account / menu) ──────────────────────────────────────────── */
.section-label{font-family:var(--font-head);font-weight:700;font-size:15px;color:var(--ink);margin:24px 0 10px;}
.list{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow-soft);}
.list-row{display:flex;align-items:center;gap:12px;width:100%;padding:20px;background:none;border:none;cursor:pointer;text-align:left;}
.list-row + .list-row{border-top:1px solid var(--line);}
.list-row .lr-title{flex:1;font-family:var(--font-head);font-weight:700;font-size:18px;color:var(--ink);}
.list-row .lr-value{font-family:var(--font-body);font-size:16px;color:var(--muted);}
.list-row .chev{color:var(--turquoise);}
.list-row .chev svg{width:22px;height:22px;}

/* ── Hero header (Home) ──────────────────────────────────────────────────── */
.hero{
  position:relative;background:var(--teal-900);color:#fff;
  padding:calc(var(--sat) + 18px) var(--gutter) 26px;overflow:hidden;
}
.hero::before{ /* turquoise accent wedge peeking on the left, as in the screenshot */
  content:"";position:absolute;left:-46px;top:58%;width:96px;height:120px;
  background:var(--turquoise);border-radius:24px;transform:rotate(12deg);opacity:.9;
}
.hero > *{position:relative;z-index:1;}
.hero .hero-sub{margin-top:14px;font-family:var(--font-head);font-weight:700;font-size:22px;color:#fff;}

/* Dark teal "Veybot" promo card. */
.promo-dark{background:var(--teal-900);color:#fff;border-radius:var(--r-card);padding:20px;display:flex;align-items:center;gap:16px;}   /* match the hero teal shade (#015466), was the darker teal-950 */
.promo-dark .promo-icon{color:var(--turquoise);flex:none;}
.promo-dark .ptitle{font-family:var(--font-head);font-weight:700;font-size:17px;}
.promo-dark .psub{font-family:var(--font-head);font-weight:700;font-size:12px;opacity:.92;margin-top:2px;}

/* ── Top bar (inner screens) ─────────────────────────────────────────────── */
.topbar{display:flex;align-items:center;min-height:40px;}
.icon-btn{width:40px;height:40px;display:grid;place-items:center;background:none;border:none;cursor:pointer;color:var(--ink);margin-left:-8px;}
.icon-btn svg{width:26px;height:26px;}
.icon-btn.right{margin-left:auto;margin-right:-8px;}

/* ── Bottom tab bar ──────────────────────────────────────────────────────── */
/* A flex child of .app pinned at the bottom of the column by the flex layout -
   NOT fixed/sticky - so it sits exactly at the real viewport bottom on every
   device (no load-time gap, never dragged out of place). Hidden off tab routes. */
.tabbar{
  flex:none;
  display:flex;background:#fff;border-top:1px solid var(--line);
  padding:5px 8px calc(4px + var(--sab));   /* slightly shorter bar */
}
.tabbar[hidden]{display:none;}
.tab{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;
  background:none;border:none;cursor:pointer;color:var(--ink);padding:2px 0;
  font-family:var(--font-body);font-weight:500;font-size:11px;
}
.tab svg{width:26px;height:26px;}
.tab.is-active{color:var(--turquoise);}

/* ── Sticky footer CTA ───────────────────────────────────────────────────── */
.footer-cta{
  position:sticky;bottom:0;left:0;right:0;
  padding:14px var(--gutter) calc(14px + var(--sab));
  background:#fff;border-top:1px solid var(--line);   /* solid white, like the bottom nav bar */
}
.footer-price{display:flex;align-items:center;gap:16px;}
.footer-price .price-col{flex:none;}
.footer-price .price-col .lbl{font-size:14px;color:var(--muted);}
.footer-price .btn{flex:1;}
/* Quote-flow prices are admin-set on approval - shown as "To be confirmed". */
.tbc-price{font-family:var(--font-head);font-weight:700;font-size:18px;color:var(--ink);letter-spacing:normal;line-height:1.2;}

/* ── Spinner ─────────────────────────────────────────────────────────────── */
.spinner{width:34px;height:34px;border-radius:50%;border:4px solid rgba(22,224,198,.25);border-top-color:var(--turquoise);animation:spin .8s linear infinite;}
.spinner.on-teal{border-color:rgba(255,255,255,.25);border-top-color:var(--turquoise);}
/* Explicit 0% keyframe so both stops are rotate() functions → the browser
   interpolates the ANGLE (0→360). With only `to:rotate(360deg)` the implicit
   start is `none`, which matrix-interpolates to rotate(360deg)=identity → the
   spinner never visibly turns. */
@keyframes spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}

/* ── Splash + onboarding (PROMPT 2) ──────────────────────────────────────── */
.scr-teal{position:relative;min-height:100%;background:var(--teal-900);color:#fff;display:flex;flex-direction:column;}

/* Splash - centred "Veygo by Admiral" lockup + spinner below. */
.splash{align-items:center;justify-content:center;padding:24px;background:#015466;}   /* matches the veygo-admiral.png teal bg (#015466) so the lockup blends seamlessly */
.splash-lockup{display:flex;flex-direction:column;align-items:center;}
.splash-img{width:min(360px,calc(100vw - 48px));height:auto;display:block;}   /* full image (its teal padding blends into the splash); sized so the 828px PNG stays >=2.5x density = crisp on retina/iPhone */
.logo-splash{width:184px;height:auto;color:var(--turquoise);}
/* Spinner sits just below the lockup (matches the reference splash). The image's
   teal bottom padding supplies most of the gap; the small negative margin tucks
   the spinner up to the reference spacing. White spokes on the teal background. */
.splash-spinner{color:rgba(255,255,255,.95);margin-top:-6px;line-height:0;}
.splash-spinner .spoke-spinner{width:38px;height:38px;}

/* "by Admiral" endorsement lockup - traced SVG (white). */
/* Crisp text "by Admiral" lockup (replaces the grainy auto-traced SVG). */
.admiral-lockup{display:flex;align-items:baseline;gap:6px;color:#fff;}
.admiral-lockup .adm-by{font-family:var(--font-body);font-weight:400;font-size:15px;opacity:.92;}
.admiral-lockup .adm-name{font-family:var(--font-head);font-weight:800;font-size:24px;letter-spacing:-.015em;}

/* Onboarding - logo top, headline + sub + bullets, CTA pinned bottom. */
.onboarding{justify-content:space-between;padding:calc(var(--sat) + 46px) var(--gutter) calc(var(--sab) + 24px);}
.onb-top{display:flex;flex-direction:column;}
.logo-onb{width:188px;height:auto;color:var(--turquoise);align-self:center;margin:10px 0 30px;}
.onb-headline{font-family:var(--font-head);font-weight:700;font-size:40px;line-height:1.13;letter-spacing:normal;color:#fff;margin:0 0 0 18px;}
.mark{position:relative;display:inline-block;line-height:1;color:var(--teal-900);margin:5px 0;}
/* traced highlighter silhouette, sized to its true aspect (no stretch) + centred behind the text */
/* exact reference silhouette (two overlapping strokes), extracted to a pink
   transparent PNG - the shape/edges are the reference's, not an approximation. */
.mark-bg{position:absolute;left:-6%;top:50%;transform:translateY(calc(-50% + 7px));width:118%;aspect-ratio:621/122;z-index:0;display:block;
  background:url('/icons/marker.png') center/100% 100% no-repeat;}
.mark-tx{position:relative;z-index:1;}
.onb-sub{font-family:var(--font-body);font-weight:400;font-size:17.5px;line-height:1.3;color:rgba(255,255,255,.92);margin:22px 0 0 18px;max-width:17.6em;}
.onb-bullets{list-style:none;margin:30px 0 0 18px;padding:0;display:flex;flex-direction:column;gap:19px;}
.onb-bullet{display:flex;align-items:center;gap:16px;font-family:var(--font-head);font-weight:700;font-size:19px;color:#fff;}
.onb-tick{flex:none;width:24px;height:24px;border-radius:50%;background:var(--pink);color:var(--teal-900);display:grid;place-items:center;}
.onb-tick svg{width:14px;height:14px;}
.onb-cta{display:flex;flex-direction:column;align-items:center;gap:4px;padding-top:18px;}
.onb-cta .btn{width:100%;}
.onb-cta .btn-text{padding:14px;}

/* ── Log in (PROMPT 3) ───────────────────────────────────────────────────── */
.login{display:flex;flex-direction:column;min-height:100%;background:var(--bg);
  padding:calc(var(--sat) + 10px) var(--gutter) calc(var(--sab) + 18px);}
.login .topbar{min-height:34px;}
.login-title{margin:2px 0 18px;}
.login-field{margin-bottom:24px;}
.login-field > label{margin:0 0 9px;line-height:1;}
.login-forgot{display:flex;justify-content:flex-end;margin-top:24px;}
.login-forgot .btn-text{font-size:16px;padding:6px 2px;}
.login-cta{margin-top:auto;display:flex;flex-direction:column;gap:12px;}
.form-msg{margin:0;font-size:14px;line-height:1.4;text-align:center;color:var(--danger);display:none;}
.form-msg.show{display:block;}
.form-msg.info{color:var(--muted);}

/* ── Passcode gate (PROMPT 4): account security · set passcode · unlock ───── */
.acct-sec{
  display:flex;flex-direction:column;min-height:100%;background:var(--bg);
  padding:calc(var(--sat) + 5px) var(--gutter) calc(var(--sab) + 20px);
}
.acct-title{margin:0;}
.acct-illus{align-self:center;width:204px;max-width:60%;height:auto;margin:17px 0 0;}
.acct-text{
  text-align:center;font-family:var(--font-body);font-weight:400;
  font-size:17px;line-height:1.3;color:var(--ink);margin:58px auto 0;max-width:20.5em;
}
.acct-cta{margin-top:auto;}

/* Set-passcode & unlock share the keypad layout. The screen carries no
   horizontal padding so the keypad runs full-bleed; title/body pad themselves. */
.passcode-screen{display:flex;flex-direction:column;min-height:100%;background:var(--bg);}
.passcode-title{margin:0;padding:calc(var(--sat) + 5px) var(--gutter) 0;}
.pass-body{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:17px var(--gutter) 0;   /* keypad fills the bottom; caption+dots centre in the space above it (~38% down, matches ref 02.44.00(1)) */
}
.pass-caption{margin:0;font-family:var(--font-body);font-weight:400;font-size:14px;line-height:1;color:var(--ink);}
.pass-caption.is-error{color:var(--danger);}
.pass-dots{display:flex;gap:24px;margin-top:31px;}
.pass-dot{
  width:18px;height:18px;border-radius:50%;background:transparent;
  border:1.6px solid #D8E0E2;transition:background .12s ease, border-color .12s ease;
}
.pass-dot.is-filled{background:var(--teal-900);border-color:var(--teal-900);}
.pass-dots.shake{animation:shake .42s ease both;}
.logo-unlock{color:var(--teal-900);width:132px;height:auto;margin-bottom:34px;}

/* iOS-style numeric keypad - full-bleed grey tray, white rounded keys. */
.keypad{
  display:grid;grid-template-columns:repeat(3,1fr);gap:7px 6px;
  padding:6px 6px calc(var(--sab) + 44px);background:var(--keypad-bg);
}
.key{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:49px;border:none;border-radius:5px;background:#fff;color:var(--ink);
  box-shadow:0 1px 1px rgba(37,46,56,.30);line-height:1;cursor:pointer;
  -webkit-tap-highlight-color:transparent;user-select:none;
  transition:background .07s ease, transform .07s ease, box-shadow .07s ease;
}
/* Obvious pressed state - clearly darker + slight shrink (also driven by JS .is-press
   so the feedback is reliable on iOS standalone where :active can be swallowed). */
.key:active,.key.is-press{background:#B6C0C9;transform:scale(.93);box-shadow:none;}
.key--blank{background:transparent;box-shadow:none;cursor:default;}
.key--blank:active{background:transparent;}
.key-num{font-family:var(--font-body);font-weight:400;font-size:25px;}
.key-let{font-family:var(--font-body);font-weight:600;font-size:9.5px;letter-spacing:.12em;margin-top:2px;color:var(--ink);}
.key--back{color:var(--ink);}
.key--back svg{width:30px;height:24px;}

@keyframes shake{
  0%,100%{transform:translateX(0);}
  20%{transform:translateX(-8px);}
  40%{transform:translateX(8px);}
  60%{transform:translateX(-6px);}
  80%{transform:translateX(6px);}
}

/* ── Home (Get Quote tab) - PROMPT 5 ───────────────────────────────────────── */
.home{display:flex;flex-direction:column;min-height:100%;background:var(--bg);position:relative;overflow-x:hidden;}
.home-hero{position:relative;overflow:visible;padding:calc(var(--sat) + 5px) var(--gutter) 44px;}
.home-hero::before{   /* turquoise wedge peeking from the bottom-left - sits BELOW the hero text */
  content:"";position:absolute;left:-38px;top:auto;bottom:-85px;width:90px;height:120px;z-index:0;   /* top:auto overrides .hero::before's top:58%; bottom tuned so it sits just below the text */
  background:var(--turquoise);border-radius:26px;transform:rotate(12deg);
}
.home-hero > *{position:relative;z-index:1;}
.hero-title{margin:0;font-family:var(--font-head);font-weight:700;font-size:27px;line-height:1.12;color:#fff;letter-spacing:-.01em;}
.home-hero .hero-title{font-size:26px;}   /* reference 02.44.00(5): cap 18.5 log @414w */
.home-hero .hero-sub{margin-top:22px;font-size:16px;}
.home-body{position:relative;z-index:1;flex:1;margin-top:-22px;padding:0 var(--gutter) 8px;}

/* Insure a car card  (sizes sampled from reference 02.44.00(5), 414×896 @2x) */
.insure-card{padding:19px 18px;border-radius:14px;border-color:transparent;box-shadow:var(--shadow-float);}
.insure-title{margin:0 0 12px;font-family:var(--font-head);font-weight:700;font-size:14px;line-height:1.05;color:var(--ink);}
.insure-row{display:flex;align-items:center;gap:10px;}
.plate-reg-input{flex:1;min-width:0;height:41px;}
.plate-reg-input .plate-gb{width:28px;}
.btn-find{flex:none;display:inline-flex;align-items:center;justify-content:center;position:relative;
  min-height:41px;padding:0 16px;border:none;border-radius:var(--r-pill);
  background:var(--teal-900);color:#fff;font-family:var(--font-head);font-weight:700;font-size:17px;
  cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .15s ease;}
.btn-find:hover{background:#013E4B;}
.btn-find.is-loading{color:transparent;}
.btn-find.is-loading::after{content:"";position:absolute;width:20px;height:20px;border-radius:50%;
  border:3px solid rgba(255,255,255,.4);border-top-color:#fff;animation:spin .7s linear infinite;}

/* Your previous cars carousel */
.prev-cars{margin-top:36px;}
.section-title{margin:0 0 12px;font-family:var(--font-head);font-weight:700;font-size:14px;color:var(--ink);letter-spacing:-.01em;}
.carousel{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  margin-right:calc(-1 * var(--gutter));padding:2px var(--gutter) 4px 0;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;}
.carousel::-webkit-scrollbar{display:none;}
.car-card{flex:0 0 91%;scroll-snap-align:start;background:#fff;border:1px solid var(--line);
  border-radius:14px;box-shadow:var(--shadow-soft);padding:16px 16px;}
.car-name{font-family:var(--font-head);font-weight:700;font-size:17px;line-height:1;color:var(--ink);letter-spacing:-.01em;margin-bottom:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.car-plate{height:30px;border-radius:6px;margin-bottom:22px;}
.car-plate .plate-gb{width:22px;}
.car-plate .plate-gb svg{width:15px;height:10px;}
.car-plate .plate-gb span{font-size:7px;}
.car-plate .plate-reg{font-size:16px;padding:0 9px;letter-spacing:.04em;}
.car-buy{width:100%;min-height:42px;font-size:16px;}
.prev-dots{justify-content:center;gap:10px;margin-top:14px;}
.prev-dots .dot{width:10px;height:10px;border:1.6px solid var(--ink);}
.prev-dots .dot.is-active{background:var(--ink);}

/* Veybot promo + info cards */
.veybot{margin-top:30px;padding:18px;border:none;width:100%;text-align:left;font:inherit;cursor:pointer;}
.veybot .ptitle{font-size:16px;}
.promo-icon svg{width:40px;height:40px;}
.veybot .psub{font-size:11px;white-space:nowrap;}
.home-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px;}
.info-card{position:relative;display:flex;flex-direction:column;text-align:left;cursor:pointer;
  background:#fff;border:1px solid var(--line);border-radius:13px;box-shadow:var(--shadow-soft);
  padding:16px 16px 26px;-webkit-tap-highlight-color:transparent;}
.ic-chev{position:absolute;top:16px;right:14px;color:var(--turquoise);}
.ic-chev svg{width:22px;height:22px;}
.ic-spark{position:absolute;top:14px;left:16px;color:var(--teal-900);}
.ic-spark svg{width:30px;height:26px;}
.ic-title{margin-top:26px;font-family:var(--font-head);font-weight:700;font-size:17px;color:var(--ink);letter-spacing:-.01em;}
.ic-sub{margin:8px 0 0;font-family:var(--font-body);font-size:13px;line-height:1.25;color:var(--ink-2);}

/* Car found sheet */
/* Car-found sheet: tint the sheet so the white details card clearly reads as a
   card (ref 02.44.00(6) - card is whiter than the sheet). */
.cf-sheet{background:#eef2f1;}
.cf-card{padding:16px 18px;background:#fff;border-color:var(--line);box-shadow:var(--shadow-soft);margin-bottom:14px;}
.cf-name{font-family:var(--font-head);font-weight:700;font-size:17px;color:var(--ink);letter-spacing:-.01em;margin-bottom:8px;}
.cf-spec{margin:0;font-family:var(--font-body);font-size:16px;color:var(--ink-2);line-height:1.35;}
/* car-found plate = the small plate (ref 02.44.00(6): h~30, GB~22, reg cap 11.5) */
.cf-plate{height:30px;border-radius:6px;margin-top:14px;}
.cf-plate .plate-gb{width:22px;}
.cf-plate .plate-gb svg{width:15px;height:10px;}
.cf-plate .plate-gb span{font-size:7px;}
.cf-plate .plate-reg{font-size:16px;padding:0 9px;letter-spacing:.04em;}
.cf-confirm{min-height:50px;}
.cf-tryagain{margin-top:14px;}
.sheet-up{animation:sheetUp .26s cubic-bezier(.22,.61,.36,1);}
.scrim{animation:scrimIn .2s ease;}
@keyframes sheetUp{from{transform:translateX(-50%) translateY(100%);}to{transform:translateX(-50%) translateY(0);}}
@keyframes scrimIn{from{opacity:0;}to{opacity:1;}}
.tab span{line-height:1;}

/* ── Choose your cover (quote flow 1) - PROMPT 6 ───────────────────────────── */
.cover-screen{display:flex;flex-direction:column;min-height:100%;background:var(--bg);}
.cover-body{flex:1;padding:calc(var(--sat) + 6px) var(--gutter) 18px;}
.cover-title{margin:26px 0 8px;}

/* Two cover choice cards (override the design-system .choice to the compact card) */
.cover-body .choices{gap:13px;}
.cover-body .choice{min-height:0;padding:14px 10px 8px;gap:6px;border-radius:11px;}
.cover-body .choice-icon{margin-bottom:6px;}
.cover-body .choice-icon svg{width:22px;height:22px;}
.cover-body .choice-title{font-size:14px;line-height:1.1;letter-spacing:-.01em;white-space:nowrap;}
.cover-body .choice-sub{font-size:13px;line-height:1.2;}
.choice.is-selected .choice-icon{color:var(--turquoise);}

/* Revealed "Is … right for me?" detail */
.cover-q{margin:30px 0 10px;font-family:var(--font-head);font-weight:700;font-size:13px;color:var(--ink);}
.reason-q{margin-top:16px;margin-bottom:8px;}
.cover-bullets{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;}
.cover-bullet{display:flex;align-items:center;gap:15px;}
.cb-icon{flex:none;width:28px;height:28px;color:var(--teal-900);}
.cb-icon svg{width:28px;height:28px;display:block;}
.cb-text{font-family:var(--font-body);font-size:14px;color:var(--ink-2);line-height:1.3;}

/* Reason dropdown field */
.dropdown-field{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  min-height:50px;padding:0 18px;background:#fff;border:1px solid var(--line);border-radius:10px;
  cursor:pointer;text-align:left;-webkit-tap-highlight-color:transparent;}
.dd-value{font-family:var(--font-body);font-size:15px;color:var(--ink);}
.dd-value.is-placeholder{color:var(--muted);}
.dd-chev{flex:none;color:var(--teal-900);display:flex;}
.dd-chev svg{width:24px;height:24px;}

/* Trustpilot banner */
.trustpilot-banner{margin-top:30px;padding:16px 18px;text-align:center;}
.cover-detail:empty + .trustpilot-banner{margin-top:51px;}
.trustpilot-banner .banner-title{margin-bottom:12px;font-size:19px;}
.tp-row{display:flex;align-items:center;justify-content:center;gap:9px;}
.tp-logo{display:inline-flex;align-items:center;gap:5px;}
.tp-logostar{width:19px;height:19px;color:#000;display:flex;}
.tp-logostar svg{width:19px;height:19px;}
.tp-name{font-family:var(--font-head);font-weight:700;font-size:17px;color:#191919;letter-spacing:-.02em;}
.tp-stars{display:inline-flex;gap:2px;}
.tp-sq{width:19px;height:19px;background:#00B67A;display:grid;place-items:center;}
.tp-sq svg{width:14px;height:14px;color:#fff;}
.tp-sq--half{background:linear-gradient(to right,#00B67A 50%,#DCDCE6 50%);}
.tp-excellent{font-family:var(--font-head);font-weight:700;font-size:15px;color:#191919;}

/* Reason-for-cover sheet radio rows */
/* The reason sheet has a long list - cap it so it covers ~half the screen and
   scrolls inside (reference 02.44.00(9): sheet top ~46% down, i.e. ~54dvh tall),
   instead of the default 88dvh which swallowed most of the screen. */
/* Title stays put; only the reason list scrolls (ref 02.44.00(9)). */
.reason-sheet{max-height:56dvh;display:flex;flex-direction:column;overflow:hidden;}
.reason-sheet .sheet-title{flex:none;}
.reason-sheet .radio-list{flex:1;min-height:0;overflow-y:auto;}
.reason-sheet .radio-row + .radio-row{border-top:1px solid var(--line);}
.radio-row .rtext{flex:1;display:flex;flex-direction:column;}

/* ── Quote flow 2: subscription plans / start time / your plan - PROMPT 7 ──── */
.plans-q{margin:16px 0 2px;}
.plan-fields{display:grid;grid-template-columns:1fr 1fr;gap:13px;}
.plan-field{position:relative;display:flex;align-items:center;gap:9px;min-height:48px;padding:0 11px;
  background:#fff;border:1px solid var(--line);border-radius:10px;cursor:pointer;text-align:left;
  -webkit-tap-highlight-color:transparent;}
.pf-icon{flex:none;color:#9AA3A1;display:flex;}
.pf-icon svg{width:22px;height:22px;}
.pf-value{flex:1;min-width:0;font-family:var(--font-body);font-size:15px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pf-value.is-placeholder{color:var(--muted);}
.pf-chev{flex:none;color:var(--ink);display:flex;}
.pf-chev svg{width:22px;height:22px;}
/* Transparent native date/time field covering the whole tile - tapping it opens
   the phone's own date/time picker directly (the reliable mobile path). */
.pf-input{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;
  background:transparent;opacity:0;cursor:pointer;-webkit-appearance:none;appearance:none;}
.pf-input:disabled{cursor:default;}
.plan-fields.is-loading{opacity:.5;}

/* Start cover now link */
.start-now{display:inline-flex;align-items:center;gap:11px;margin-top:18px;padding:6px 2px;
  background:none;border:none;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.sn-icon{flex:none;color:var(--ink);display:flex;}
.sn-icon svg{width:18px;height:18px;}
.sn-text{font-family:var(--font-head);font-weight:700;font-size:15px;color:var(--ink);text-decoration:underline;text-underline-offset:3px;}

/* Generating your plans */
.plans-generating{display:flex;flex-direction:column;align-items:center;text-align:center;margin-top:238px;}
.gen-spin{color:#5C99A6;}
/* Rotation is driven by SMIL <animateTransform> inside the SVG (pivoting on the
   exact centre 12,12), NOT a CSS transform - that avoids the Safari/iOS quirk
   where an SVG's CSS transform-origin defaults to the (0,0) corner and the whole
   spinner orbits. So no CSS animation/transform here, just sizing. */
.spoke-spinner{width:34px;height:34px;}
.gen-title{margin-top:18px;font-family:var(--font-head);font-weight:700;font-size:18px;color:var(--ink);letter-spacing:-.01em;}
.gen-sub{margin-top:8px;font-family:var(--font-body);font-size:14px;color:var(--muted);}

/* Your plan result */
.yourplan-q{margin-top:40px;margin-bottom:12px;}
.plan-card{padding:16px 18px 16px;border-radius:11px;border-color:var(--line);box-shadow:var(--shadow-soft);}
.plan-card-head{display:flex;align-items:center;gap:12px;}
.pc-icon{flex:none;color:var(--teal-900);width:22px;height:22px;line-height:0;}
.pc-icon svg{width:22px;height:22px;}
.pc-title{font-family:var(--font-head);font-weight:700;font-size:15px;line-height:1.05;color:var(--ink);}
.plan-price{margin-top:4px;display:flex;align-items:baseline;gap:5px;line-height:1;}
.pp-amount{font-family:var(--font-head);font-weight:800;font-size:30px;color:var(--ink);letter-spacing:-.01em;}
.pp-per{font-family:var(--font-body);font-weight:500;font-size:16px;color:var(--muted);}
.plan-ticks{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:13px;}
.plan-tick{display:flex;align-items:center;gap:14px;}
.pt-ic{flex:none;color:var(--teal-900);display:flex;}
.pt-ic svg{width:18px;height:18px;}
.plan-tick > span:last-child{font-family:var(--font-body);font-size:14px;line-height:1;color:var(--ink-2);}
.plan-mint{margin-top:18px;padding:13px 15px;}
.plan-mint p{margin:0;font-family:var(--font-body);font-size:14px;color:var(--teal-900);line-height:1.3;}

/* ── Quote flow 3: excess / confirm / review - PROMPT 8 ────────────────────── */
/* Voluntary excess */
.excess-q{margin:4px 0 4px;line-height:1.2;}
.excess-seg{margin-bottom:0;}
.excess-seg .seg{font-size:16px;}
.excess-info{margin-top:26px;font-size:14px;}
.excess-info .i{background:var(--turquoise);color:#fff;}
.current-ex-h{margin:30px 0 10px;}
.ex-rows{display:flex;flex-direction:column;gap:6px;}
.ex-row{display:flex;justify-content:space-between;gap:14px;font-family:var(--font-body);font-size:14px;color:var(--ink-2);}
.ex-mint{margin-top:34px;padding:18px;position:relative;overflow:hidden;}
.ex-mint-title{font-family:var(--font-head);font-weight:700;font-size:15px;color:var(--ink);margin-bottom:12px;}
.ex-checklist{gap:4px;}
.ex-checklist .check-item{font-size:14px;line-height:1.15;color:var(--ink-2);align-items:center;}
.ex-checklist .tick{color:var(--green);}
.ex-checklist .tick svg{width:16px;height:16px;}
/* price footer */
.price-col .lbl{font-size:16px;color:var(--ink-2);}
.price-now{display:flex;align-items:baseline;gap:3px;margin-top:1px;}
.pn-amount{font-family:var(--font-head);font-weight:800;font-size:25px;color:var(--ink);letter-spacing:-.01em;}
.pn-per{font-family:var(--font-body);font-size:16px;color:var(--muted);}
.footer-price .ex-next-btn{flex:none;width:auto;min-width:160px;padding:0 30px;margin-left:auto;}   /* sit hard right, away from the price */

/* Confirm statements (sizes from reference 02.44.00(18), 414x896 @2x) */
.confirm-title{font-size:24px;margin:14px 0 4px;line-height:1.15;}
.confirm-list{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:22px;}
.confirm-row{display:flex;gap:14px;align-items:flex-start;}
.cr-check{flex:none;width:25px;height:25px;color:var(--teal-900);margin-top:1px;}
.cr-check svg{width:25px;height:25px;display:block;}
.cr-text{font-family:var(--font-body);font-size:14px;line-height:1.35;color:var(--ink);}
.confirm-tc{margin-top:26px;padding:18px 18px;border-color:var(--line);box-shadow:none;}
.tc-text{margin:0 0 14px;font-family:var(--font-body);font-size:14px;line-height:1.4;color:var(--ink-2);}
.tc-btn{width:100%;}

/* Review and pay (sizes from reference 02.44.00(20)/(24), 414x896 @2x) */
.topbar--review{justify-content:flex-end;min-height:34px;}
.review-card{padding:18px;border-color:var(--line);box-shadow:var(--shadow-soft);}
.rc-policy{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.rc-policy-h{font-family:var(--font-head);font-weight:700;font-size:18px;color:var(--ink);}
.rc-tag{background:var(--mint);color:var(--ink);font-size:15px;padding:5px 12px;gap:7px;}
.rc-tag svg{width:17px;height:17px;color:var(--teal-900);}
.rc-start{margin-top:6px;padding:9px;border:1px solid var(--line);border-radius:10px;text-align:center;line-height:1.05;}
.rc-start-lbl{font-family:var(--font-body);font-size:12px;color:var(--ink-2);}
.rc-start-day{font-family:var(--font-head);font-weight:700;font-size:16px;color:var(--ink);margin:1px 0;}
.rc-start-time{font-family:var(--font-head);font-weight:700;font-size:12px;color:var(--ink);}
.rc-kv{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:8px;}
.rc-k{font-family:var(--font-body);font-size:14px;color:var(--ink-2);}
.rc-v{font-family:var(--font-head);font-weight:700;font-size:14px;color:var(--ink);}
/* Review "We will insure" + "Vehicle details" plates: narrower tab/text, a touch
   taller - per ref 02.44.00(20) (was a wide squat plate using the 48px base). */
.rc-plate,.acc-plate{height:32px;}
.rc-plate .plate-gb,.acc-plate .plate-gb{width:22px;}
.rc-plate .plate-gb svg,.acc-plate .plate-gb svg{width:15px;height:10px;}
.rc-plate .plate-gb span,.acc-plate .plate-gb span{font-size:7px;}
.rc-plate .plate-reg,.acc-plate .plate-reg{font-size:16px;padding:0 9px;}
.rc-div{border:none;border-top:1px solid var(--line);margin:12px 0 0;}
.rc-price{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-top:11px;}
.rc-price-h{font-family:var(--font-head);font-weight:700;font-size:18px;color:var(--ink);}
.rc-price-v{font-family:var(--font-head);font-weight:800;font-size:18px;color:var(--ink);letter-spacing:-.01em;}
.rc-price-per{font-weight:800;font-size:18px;}
/* Unlimited (self-issue) customers type their own premium into this field. */
.rc-price-set{align-items:center;}
.rc-price-field{display:inline-flex;align-items:center;gap:2px;border:1.5px solid var(--line);border-radius:10px;padding:6px 12px;background:#fff;}
.rc-price-field:focus-within{border-color:var(--turquoise);}
.rcp-cur{font-family:var(--font-head);font-weight:800;font-size:18px;color:var(--ink);}
.rcp-input{width:90px;border:none;outline:none;background:transparent;font-family:var(--font-head);font-weight:800;font-size:18px;color:var(--ink);text-align:right;letter-spacing:-.01em;-moz-appearance:textfield;}
.rcp-input::-webkit-outer-spin-button,.rcp-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.rc-edit{display:flex;width:100%;margin:14px 0 0;min-height:42px;padding:0 26px;font-size:17px;}   /* full-width within the card, per ref 02.44.00(20) */
.review-tax{margin-top:18px;font-size:14px;}
.review-tax .i{background:var(--turquoise);color:#fff;}
.review-tp{margin-top:26px;}
.review-tp .banner-title{font-size:17px;}
.review-accordions{margin-top:26px;}
.accordion:not(.is-open) .accordion-body{display:none;}
.accordion.is-open .accordion-head .chev{transform:rotate(180deg);}
.review-acc .accordion-head{padding:16px 18px;}
.review-acc .lead svg{width:24px;height:24px;}
.review-acc .title{font-size:18px;}
.acc-plate{margin-bottom:14px;}
.acc-name{font-family:var(--font-head);font-weight:700;font-size:15px;color:var(--ink);letter-spacing:-.01em;}
.acc-spec{font-family:var(--font-body);font-size:14px;color:var(--ink-2);line-height:1.35;}
.acc-field{margin-bottom:12px;}
.acc-k{font-family:var(--font-head);font-weight:700;font-size:14px;color:var(--ink);}
.acc-k--gap{margin-top:14px;}
.acc-v{font-family:var(--font-body);font-size:14px;color:var(--ink-2);line-height:1.35;margin-top:2px;}
.licence-pill{display:inline-flex;align-items:center;gap:9px;margin-top:6px;padding:8px 14px;background:#fff;
  border:1.5px solid var(--ink);border-radius:var(--r-pill);font-family:var(--font-head);font-weight:700;font-size:14px;color:var(--ink);cursor:pointer;}
.licence-pill svg{width:18px;height:18px;color:var(--ink);}
.acc-edit{display:flex;justify-content:flex-end;margin-top:8px;}
.promo-section{margin-top:30px;}
.promo-h{font-family:var(--font-head);font-weight:700;font-size:15px;color:var(--ink);margin:0 0 12px;}
.promo-row{display:flex;gap:12px;}
.promo-input{flex:1;min-width:0;height:46px;padding:0 16px;background:#fff;border:1px solid var(--line);border-radius:10px;
  font-family:var(--font-body);font-size:15px;color:var(--ink);}
.promo-input::placeholder{color:var(--muted);}
.btn-add{flex:none;min-height:46px;padding:0 22px;border:none;border-radius:var(--r-pill);
  background:var(--teal-900);color:#fff;font-family:var(--font-head);font-weight:700;font-size:15px;cursor:pointer;}
.btn-add:disabled,.btn-add.is-disabled{background:var(--disabled-bg);color:var(--disabled-ink);cursor:default;}
.pay-terms{margin-top:24px;background:#EEF1F0;border-radius:10px;padding:16px 16px;}
.pay-terms p{margin:0;font-family:var(--font-body);font-size:14px;line-height:1.4;color:var(--ink-2);}
.pt-link{color:#2E7CC4;text-decoration:none;cursor:pointer;}

/* Leave this quote sheet (reference 02.44.00(25)) */
.leave-sheet{text-align:center;padding-bottom:calc(28px + var(--sab));}
.leave-title{text-align:center;font-size:24px;line-height:1.12;margin:6px 0 14px;}
.leave-sub{margin:0 0 26px;font-family:var(--font-body);font-size:16px;color:var(--ink-2);}
.leave-link{display:block;width:100%;margin-top:18px;color:var(--teal-900);font-size:17px;}

/* ── Pay with card + success (PROMPT 9) ────────────────────────────────────── */
.pay-summary{margin-top:6px;background:var(--mint-soft);border-radius:11px;padding:16px 18px;}
.ps-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;}
.ps-name{font-family:var(--font-head);font-weight:700;font-size:18px;color:var(--ink);}
.ps-amt{font-family:var(--font-head);font-weight:800;font-size:20px;color:var(--ink);letter-spacing:-.01em;}
.ps-per{font-family:var(--font-body);font-weight:500;font-size:14px;color:var(--muted);}
.ps-note{margin-top:8px;font-family:var(--font-body);font-size:14px;line-height:1.4;color:var(--ink-2);}
.pay-form{margin-top:26px;}
.pay-fg{margin-bottom:16px;}
.pay-fg > label{display:block;margin-bottom:8px;font-family:var(--font-head);font-weight:700;font-size:15px;color:var(--ink);}
.pay-field{display:flex;align-items:center;gap:10px;min-height:54px;padding:0 16px;background:#fff;border:1px solid var(--line);border-radius:10px;}
.pay-input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-family:var(--font-body);font-size:17px;color:var(--ink);letter-spacing:.01em;}
.pay-input::placeholder{color:var(--muted);letter-spacing:normal;}
.pay-brand{flex:none;color:#9AA3A1;display:flex;}
.pay-brand svg{width:30px;height:30px;}
.pay-row{display:flex;gap:12px;}
.pay-row .pay-fg{flex:1;margin-bottom:0;}
.pay-msg{margin-top:14px;}
.pay-secure{margin-top:22px;display:flex;align-items:center;justify-content:center;gap:7px;color:var(--muted);font-family:var(--font-body);font-size:14px;}
.pay-lock{display:flex;}.pay-lock svg{width:16px;height:16px;}
#pay-btn.is-loading{color:transparent;position:relative;}
#pay-btn.is-loading::after{content:"";position:absolute;width:22px;height:22px;border-radius:50%;
  border:3px solid rgba(255,255,255,.4);border-top-color:#fff;animation:spin .7s linear infinite;}

/* Payment success */
.pay-success{display:flex;flex-direction:column;min-height:100%;background:var(--bg);
  padding:calc(var(--sat) + 8px) var(--gutter) calc(var(--sab) + 22px);}
.psx-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;}
.success-ring{color:var(--teal-900);width:84px;height:84px;}
.success-ring svg{width:84px;height:84px;display:block;}
.success-h{margin:26px 0 0;font-family:var(--font-head);font-weight:700;font-size:30px;color:var(--ink);letter-spacing:-.01em;}
.success-sub{margin:12px 0 0;font-family:var(--font-body);font-size:17px;line-height:1.4;color:var(--ink-2);max-width:300px;}
.policy-num-card{margin-top:30px;width:100%;background:#fff;border:1px solid var(--line);border-radius:11px;
  box-shadow:var(--shadow-soft);padding:20px;text-align:center;}
.pnc-lbl{font-family:var(--font-body);font-size:15px;color:var(--muted);}
.pnc-num{margin-top:6px;font-family:var(--font-head);font-weight:700;font-size:19px;color:var(--ink);letter-spacing:.02em;}
.success-cta{display:flex;flex-direction:column;gap:8px;}
.success-cta .btn-text{margin-top:2px;}

/* ── My Policies (PROMPT 10) ───────────────────────────────────────────────── */
.policies-screen{display:flex;flex-direction:column;min-height:100%;background:var(--bg);}
.policies-body{flex:1;padding:calc(var(--sat) + 12px) var(--gutter) 10px;}
.pol-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;}
.pol-title{margin:0;font-family:var(--font-head);font-weight:700;font-size:23px;line-height:1.05;color:var(--ink);letter-spacing:-.02em;}   /* reference 02.44.00(26): cap 16.5 log @414w */
.pol-claim{flex:none;background:none;border:none;cursor:pointer;font-family:var(--font-head);font-weight:700;font-size:15px;color:var(--teal-900);}
.pol-seg{margin-top:16px;padding:4px;}
.pol-seg .seg{min-height:36px;font-size:16px;}
.pol-list{margin-top:18px;}
.pol-loading{display:flex;justify-content:center;padding:40px 0;color:var(--teal-900);}
.pol-loading .spoke-spinner{width:34px;height:34px;}
.pol-empty{text-align:center;color:var(--muted);font-size:16px;padding:36px 0;}

/* Policy card */
.pol-card{display:block;width:100%;text-align:left;-webkit-appearance:none;appearance:none;
  background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-soft);
  padding:16px 18px 14px;cursor:pointer;}
.pol-card + .pol-card{margin-top:16px;}
.pc-top{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.pc-tag{padding:6px 11px;font-size:13px;}
.pc-top .status{width:32px;height:32px;}
.pc-top .status svg{width:17px;height:17px;}
.pc-name{margin-top:12px;font-family:var(--font-head);font-weight:700;font-size:18px;color:var(--ink);letter-spacing:-.01em;}
.plate--sm{height:31px;border-radius:6px;}
.plate--sm .plate-gb{width:26px;}
.plate--sm .plate-gb svg{width:15px;height:10px;}
.plate--sm .plate-gb span{font-size:7px;}
.plate--sm .plate-reg{font-size:15px;padding:0 9px;letter-spacing:.04em;}
.pc-plate{margin-top:7px;}
.pc-rows{margin-top:9px;display:flex;flex-direction:column;gap:15px;}
.pc-row{display:flex;gap:14px;font-size:15px;line-height:1.15;}
.pc-k{color:var(--ink-2);font-family:var(--font-body);font-weight:400;}
.pc-v{color:var(--ink);font-family:var(--font-body);font-weight:400;}
.pc-div{height:1px;background:var(--line);margin-top:6px;}
.pc-progress{height:6px;margin-top:6px;}
.pc-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:9px;}
.pc-foot-k{color:var(--ink-2);font-family:var(--font-body);font-weight:400;font-size:14px;}
.pc-foot-k.pc-foot-strong{color:var(--ink);font-family:var(--font-head);font-weight:700;}
.pc-foot-v{color:var(--ink);font-family:var(--font-head);font-weight:700;font-size:15px;}

/* Pink push-notifications banner */
.pol-notif{margin-top:16px;margin-bottom:8px;padding:13px 15px;gap:12px;}
.pol-notif .msg{font-size:13px;line-height:1.3;}
.pn-bell{flex:none;color:var(--ink);display:flex;}
.pn-bell svg{width:20px;height:20px;}
.pn-chev{flex:none;color:var(--ink);display:flex;}
.pn-chev svg{width:20px;height:20px;}

/* ── Your policy (detail) ──────────────────────────────────────────────────── */
.policy-screen .cover-body{padding-bottom:calc(var(--sab) + 30px);}
.policy-screen .cover-title{font-size:23px;letter-spacing:-.02em;margin:4px 0 14px;}   /* ref 02.44.00(28): cap 16 log @414w */
.policy-card-d{padding:16px 18px 14px;}
.pd-name{font-family:var(--font-head);font-weight:700;font-size:23px;color:var(--ink);letter-spacing:-.01em;line-height:1.05;}
.pd-plate{margin-top:9px;height:30px;border-radius:6px;}
.pd-plate .plate-gb{width:26px;}
.pd-plate .plate-gb svg{width:15px;height:10px;}
.pd-plate .plate-gb span{font-size:7px;}
.pd-plate .plate-reg{font-size:16px;padding:0 9px;letter-spacing:.04em;}
.pd-tagrow{margin-top:16px;display:flex;}   /* hug the pill so the gap below equals the gap above */
.pd-tagrow .tag{padding:4px 12px;line-height:1;}   /* thinner tag (ref pill ~25 log tall) */
.pd-start{margin-top:16px;padding:5px 14px;border:1px solid var(--line);border-radius:10px;background:#F4F6F5;text-align:center;line-height:1.1;}   /* equal gap above + below the tag */
.pd-start-lbl{font-family:var(--font-body);font-size:12px;color:var(--ink-2);}
.pd-start-day{font-family:var(--font-head);font-weight:700;font-size:15px;color:var(--ink);margin:2px 0;}
.pd-start-time{font-family:var(--font-body);font-weight:500;font-size:12px;color:var(--ink);}
.pd-kv{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-top:11px;line-height:1.2;}
.pd-start + .pd-kv{margin-top:11px;}
.pd-k{font-family:var(--font-body);font-weight:400;font-size:13px;color:var(--ink);}
.pd-v{font-family:var(--font-head);font-weight:700;font-size:14px;color:var(--ink);text-align:right;}
.pd-div{height:1px;background:var(--line);margin-top:11px;}
.pd-progress{height:6px;margin-top:9px;}
.pd-next{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-top:5px;line-height:1.2;}

/* Policy number + Copy */
.policy-num-d{margin-top:16px;padding:12px 18px;}
.pnd-lbl{font-family:var(--font-body);font-weight:400;font-size:14px;line-height:1.2;color:var(--ink);}
.pnd-row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:6px;}
.pnd-val{font-family:var(--font-head);font-weight:700;font-size:13px;color:var(--ink);letter-spacing:.01em;}
.pnd-copy{flex:none;min-height:34px;padding:0 18px;border:none;border-radius:var(--r-pill);cursor:pointer;
  background:var(--teal-900);color:#fff;font-family:var(--font-head);font-weight:700;font-size:14px;}
.pnd-copy.is-done{background:#06A99D;}

/* Actions + documents */
.pd-section{margin:18px 0 9px;font-family:var(--font-head);font-weight:700;font-size:13px;color:var(--ink);}
.action-list{display:flex;flex-direction:column;gap:10px;}
.action-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;-webkit-appearance:none;appearance:none;
  background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-soft);
  padding:14px 16px;cursor:pointer;min-height:58px;}   /* ref action row ~60 log tall */
.ar-ic{flex:none;display:flex;}
.ar-ic svg{width:22px;height:22px;}
.ar-ic--teal{color:var(--teal-900);}
.ar-ic--pink{color:#E8638F;}
.ar-label{flex:1;font-family:var(--font-head);font-weight:700;font-size:14px;color:var(--ink);}
.ar-chev{flex:none;color:var(--teal-900);display:flex;}
.ar-chev svg{width:18px;height:18px;}
.cx-danger{color:var(--danger);}

/* ── My Account (PROMPT 11) ────────────────────────────────────────────────── */
.account-screen{display:flex;flex-direction:column;height:100%;background:var(--bg);}
.account-body{flex:1;min-height:0;overflow-y:auto;padding:calc(var(--sat) + 14px) var(--gutter) 8px;}
.acct-title{margin:0;font-family:var(--font-head);font-weight:700;font-size:23px;line-height:1.05;color:var(--ink);letter-spacing:-.02em;}   /* ref 02.44.01(1): cap 16 log @414w */
.acct-name{text-align:center;font-family:var(--font-head);font-weight:700;font-size:16px;line-height:1.1;color:var(--ink);margin:36px 0 36px;}
.acct-section{font-family:var(--font-head);font-weight:700;font-size:13px;line-height:1.15;color:var(--ink);margin:0 0 10px;}
.list + .acct-section{margin-top:22px;}
.acct-list{padding:0;}
.acct-row{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;
  padding:19px 18px;background:none;border:none;cursor:pointer;text-align:left;-webkit-appearance:none;appearance:none;}
.acct-row-label{font-family:var(--font-head);font-weight:700;font-size:18px;line-height:1.15;color:var(--ink);}
.acct-chev{flex:none;color:var(--teal-900);display:flex;}
.acct-chev svg{width:20px;height:20px;}
.acct-version{font-family:var(--font-body);font-weight:400;font-size:17px;color:var(--muted);}
.acct-div{height:1px;background:var(--line);margin:0 18px;}
.acct-footer{flex:none;padding:14px var(--gutter) 8px;background:var(--bg);}
.acct-footer .btn{min-height:48px;font-size:18px;}

/* ── Edit account ──────────────────────────────────────────────────────────── */
.edit-acct-screen .cover-title{font-size:23px;letter-spacing:-.02em;margin:4px 0 16px;}   /* ref 02.44.01(2): cap 16 log */
.ea-card{padding:16px 18px;margin-bottom:14px;}
.ea-head{display:flex;align-items:center;gap:11px;margin-bottom:11px;}
.ea-ic{flex:none;color:var(--teal-900);display:flex;}
.ea-ic svg{width:22px;height:22px;}
.ea-ic--person svg{width:22px;height:22px;}
.ea-title{font-family:var(--font-head);font-weight:700;font-size:18px;color:var(--ink);letter-spacing:-.01em;}
.ea-line{font-family:var(--font-body);font-weight:400;font-size:16px;line-height:1.22;color:var(--ink);margin-top:4px;}
.ea-line:first-of-type{margin-top:0;}
.ea-line--gap{margin-top:14px;}
.ea-up{text-transform:uppercase;}
.ea-licrow{display:flex;align-items:center;gap:10px;margin-top:7px;}
.ea-licrow .ea-edit{margin-top:-11px;margin-bottom:-11px;}
.ea-badge{flex:none;width:25px;height:25px;border-radius:50%;border:2px solid var(--turquoise);
  display:grid;place-items:center;font-family:var(--font-head);font-weight:700;font-size:13px;color:var(--teal-900);}
.ea-lictype{flex:1;font-family:var(--font-body);font-weight:400;font-size:16px;color:var(--ink);}
.ea-edit{flex:none;min-height:44px;padding:0 24px;font-size:16px;}
.ea-editrow{display:flex;justify-content:flex-end;margin-top:14px;}

/* Edit-account form sheets */
.ea-sheet-title{font-size:21px;margin-bottom:14px;}
.ea-field{margin-bottom:12px;}
.ea-sheet .field > label{font-size:13px;margin-bottom:6px;}
.ea-sheet .input{min-height:46px;padding:11px 16px;font-size:15px;}
.ea-sheet .btn{min-height:48px;font-size:17px;}
.ea-msg{margin:2px 0 14px;}

/* ── Claims (PROMPT 12) ────────────────────────────────────────────────────── */
.claim-screen .cover-title{font-size:23px;letter-spacing:-.02em;margin:4px 0 0;}   /* ref 02.44.01(4-8): cap 16 log - was 32px (enlarged) */
.claim-intro{margin:16px 0 0;font-family:var(--font-body);font-weight:400;font-size:16px;line-height:1.2;color:var(--ink-2);}
.claim-list{margin-top:36px;padding:0;}
.claim-list .acct-chev{color:var(--turquoise);}   /* ref: bright turquoise link chevrons */
.claim-detail .cover-body{padding-bottom:calc(var(--sab) + 18px);}
.claim-body{margin-top:30px;}
.claim-p{margin:0;font-family:var(--font-body);font-weight:400;font-size:16px;line-height:1.1;color:var(--ink-2);}
.claim-p + .claim-p{margin-top:15px;}
.claim-bullets + .claim-p,.claim-p + .claim-bullets{margin-top:15px;}
.claim-p--bold{font-family:var(--font-head);font-weight:700;color:var(--ink);}
.claim-bullets{list-style:none;margin:0;padding:0;}
.claim-bullets li{position:relative;padding-left:20px;font-family:var(--font-body);font-weight:400;font-size:16px;line-height:1.1;color:var(--ink-2);}
.claim-bullets li + li{margin-top:11px;}
.claim-bullets li::before{content:"•";position:absolute;left:5px;top:0;}
.claim-footer{display:flex;flex-direction:column;gap:10px;}

/* ── Utilities ───────────────────────────────────────────────────────────── */
.stack > * + *{margin-top:14px;}
.stack-lg > * + *{margin-top:22px;}
.row{display:flex;align-items:center;gap:12px;}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.mt-0{margin-top:0;} .mb-0{margin-bottom:0;}
.dots{display:flex;align-items:center;justify-content:center;gap:10px;}
.dots .dot{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--ink);}
.dots .dot.is-active{background:var(--ink);}
.divider{height:1px;background:var(--line);border:none;margin:0;}

/* ── Tactile press feedback on tappable controls ─────────────────────────────
   A quick scale-down so every button feels physical when tapped: policy-document
   rows, Buy cover + the CTAs (.btn, above), account rows, icon buttons, policy
   cards and the cover choices. Rows get a faint teal tap-wash, cards a subtle dim.
   iOS standalone PWAs frequently SWALLOW :active on tap, so a tiny delegated
   handler in app.js also toggles .is-press on pointerdown/up — every rule fires
   on BOTH so the feedback is reliable everywhere (the keypad uses the same trick). */
.btn-add,.icon-btn,.action-row,.acct-row,.list-row,.pol-card,.choice,.btn-text{
  transition:transform .09s ease, background-color .12s ease, filter .12s ease, opacity .12s ease;
  -webkit-tap-highlight-color:transparent;
}
.btn-add:active,.btn-add.is-press{transform:scale(.95);}
.icon-btn:active,.icon-btn.is-press{transform:scale(.82);opacity:.65;}
.action-row:active,.action-row.is-press,.acct-row:active,.acct-row.is-press,.list-row:active,.list-row.is-press{transform:scale(.975);background-color:rgba(1,84,102,.08);}
.pol-card:active,.pol-card.is-press,.choice:active,.choice.is-press{transform:scale(.97);filter:brightness(.96);}
.btn-text:active,.btn-text.is-press{opacity:.5;}

@media (prefers-reduced-motion: reduce){
  .btn:active,.btn.is-press,.btn-add:active,.btn-add.is-press,.icon-btn:active,.icon-btn.is-press,
  .pol-card:active,.pol-card.is-press,.choice:active,.choice.is-press{transform:none;}
}