/* ───────────────────────────────────────────────────────────────
   Pomelo — design system v3.2 in production.
   Switzer for UI, Fraunces italic for editorial moments.
   No borders. No washes. Soft shadows on elevated surfaces.
   Status indicators are dot + text. Banners use a leading dot.
   ─────────────────────────────────────────────────────────────── */

:root {
  /* ── Single accent ── */
  --pomelo:       #7DD134;
  --pomelo-deep:  #65B720;

  /* ── Ink + surface ── */
  --ink:        #0A0A0A;
  --ink-mute:   #6B6B6B;
  --ink-faint:  #B0B0B0;
  --surface:    #FFFFFF;
  --surface-2:  #F4F4F4;
  --surface-3:  #EDEDED;

  /* ── Error: crimson dot only, never a wash ── */
  --err:        #DC143C;

  /* Legacy aliases (so existing app.py classes keep working) */
  --bg:         var(--surface);
  --paper:      var(--surface);
  --canvas:     var(--surface);
  --line:       var(--surface-3);
  --brand:      var(--pomelo);
  --brand-dark: var(--pomelo-deep);
  --brand-soft: var(--surface-2);
  --ok:         var(--pomelo);
  --ok-soft:    var(--surface-2);
  --warn:       var(--pomelo);
  --err-soft:   var(--surface);
  --muted:      var(--ink-mute);

  /* ── Type ── */
  --font:         "Switzer", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-display: "Fraunces", "Switzer", Georgia, serif;
  --font-mono:    ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace;

  /* ── Radius ── */
  --r:      10px;
  --r-lg:   16px;
  --r-pill: 999px;
  --radius:      var(--r-lg);  /* legacy alias */
  --radius-chip: var(--r-pill);

  /* ── Space ── */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 40px;

  /* ── Shadow ── */
  --lift:       0 1px 2px rgba(10,10,10,0.04), 0 8px 24px -12px rgba(10,10,10,0.12);
  --lift-hover: 0 2px 4px rgba(10,10,10,0.05), 0 16px 36px -14px rgba(10,10,10,0.16);

  /* ── Motion ── */
  --spring: cubic-bezier(0.2, 0.9, 0.3, 1.2);
  --ease:   cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ────────── RESET + ROOT ────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* `overflow-x: clip` instead of `hidden` — clip prevents horizontal
     scroll without creating a scroll-containing block, so `position:
     sticky` on the header still works. `hidden` here used to break
     sticky on Safari + Chrome. MDN: developer.mozilla.org/Web/CSS/overflow. */
  overflow-x: clip;
}

a { color: inherit; text-decoration: none; }

/* ────────── HEADER ────────── */
/* One opaque sticky unit: thin header row + slim progress bar. Sticking them
   together (rather than two separate sticky elements with a hardcoded offset)
   keeps them aligned and always above the scrolling chat, so green echo
   bubbles never bleed through. */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: var(--surface);
}
header {
  display: flex; align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-4);
  min-height: 40px;
  background: var(--surface);
}
.logo {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 17px; font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-decoration: none;
}
.logo svg { width: 24px; height: 24px; display: block; flex-shrink: 0; }
.logo span { line-height: 1; }

.tagline { display: none; }   /* Pomelo wordmark carries the brand — tagline retired */

header .header-action { margin: 0; }
header .logout { margin-left: auto; }

.logout-btn {
  display: inline-flex; align-items: center; gap: 5px;
  max-width: 100%;
  background: transparent;
  border: 0;
  color: var(--ink-mute);
  font-family: inherit;
  font-size: 12.5px;
  white-space: nowrap;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.logout-btn:hover { background: var(--surface-2); color: var(--ink); }
/* Truncate a long email so the header stays a single thin line. */
.logout-email {
  max-width: 42vw;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.logout-sep { opacity: .6; }

/* ────────── MAIN ────────── */
main {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--s-4) var(--s-4) var(--s-6);
  display: flex; flex-direction: column; gap: var(--s-4);
  min-height: calc(100vh - 60px);
}

#chat-log {
  display: flex; flex-direction: column;
  gap: var(--s-3);
  padding-bottom: var(--s-4);
}

/* ────────── BUBBLES (used by app.py's render_bot_bubble) ────────── */
.bubble {
  background: var(--surface);
  border: 0;
  border-radius: var(--r-lg);
  padding: var(--s-4);
  max-width: 100%;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  box-shadow: var(--lift);
  animation: pop-in 0.32s var(--spring) both;
}
@keyframes pop-in {
  from { opacity: 0; transform: translateY(6px) scale(0.99); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.bubble.bot     { align-self: flex-start; }
.bubble.welcome { background: var(--surface); }
.welcome-list {
  list-style: none;
  margin: var(--s-3) 0 0;
  padding: 0;
  display: flex; flex-direction: column;
  gap: var(--s-2);
  font-size: 14.5px;
}
.welcome-list li {
  padding-left: 22px;
  position: relative;
  color: var(--ink);
  line-height: 1.5;
}
.welcome-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--pomelo);
}
.welcome-list li b { font-weight: 600; }

/* User bubble — pomelo bg, ink text */
.bubble.user {
  align-self: flex-end;
  background: var(--pomelo);
  color: var(--ink);
  font-weight: 500;
  padding: 10px 14px;
  border-radius: var(--r-lg);
  box-shadow: var(--lift);
  max-width: 80%;
}
.bubble.user code {
  background: rgba(255,255,255,0.55);
  color: var(--ink);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 13px;
}

/* Error bubble — white card + crimson dot */
.bubble.error {
  align-self: flex-start;
  background: var(--surface);
  color: var(--ink);
  position: relative;
  padding-left: calc(var(--s-4) + 18px);
}
.bubble.error::before {
  content: "";
  position: absolute;
  left: var(--s-4); top: 22px;
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--err);
}
.bubble.error .error-tech {
  margin-top: 8px; padding: 8px 12px;
  background: var(--surface-2); border-radius: var(--r);
  font-family: var(--font-mono); font-size: 12px;
  color: var(--ink);
}
.bubble.error .muted { color: var(--ink-mute); font-size: 12.5px; }

/* Success / terminal — ink-on-white card; the win is in the type */
.bubble.success, .bubble.terminal {
  background: var(--surface);
  position: relative;
  padding-left: calc(var(--s-4) + 18px);
}
.bubble.success::before, .bubble.terminal::before {
  content: "";
  position: absolute;
  left: var(--s-4); top: 22px;
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--pomelo);
}

/* Processing — soft text + typing indicator */
.bubble.processing {
  background: var(--surface);
  color: var(--ink-mute);
  display: flex; align-items: center; gap: 10px;
  padding: 12px var(--s-4);
}

/* Bubble typography */
/* Renewal hub — tappable action rows (replaces the flat chip wall). */
/* Submit success toast (Option B): shown when the MSIG fill completes,
   above the plan hub, in place of a terminal screen. */
.submit-toast {
  align-self: flex-start; background: #eef7e3; border: 1px solid #d6ecbf;
  border-radius: var(--r-lg); padding: 12px 15px;
  font-size: 14px; font-weight: 600; color: #2f5a10;
}
.submit-toast-meta { display: block; margin-top: 4px; font-weight: 400; font-size: 12.5px; color: var(--ink-mute); }

/* Group form (type: group) — several mobile-friendly fields on one screen. */
.group-form { display: flex; flex-direction: column; }
.group-title {
  font-size: 11px; font-weight: 700; color: var(--ink-faint);
  text-transform: uppercase; letter-spacing: .05em; margin: 14px 0 4px;
}
.group-title:first-child { margin-top: 2px; }
.group-fld { margin: 8px 0; }
.group-label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 5px; }
.group-inp {
  width: 100%; padding: 12px 13px; font: 16px var(--font);
  border: 1px solid var(--surface-3); border-radius: var(--r);
  background: var(--surface); color: var(--ink);
}
.group-select {
  appearance: none; -webkit-appearance: none; padding-right: 32px;
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%236B6B6B' stroke-width='1.5'/></svg>") no-repeat right 12px center;
}
.group-continue { margin-top: var(--s-3); }
/* Secondary "upload a photo instead" chip below the grouped form. */
.group-alt { margin-top: var(--s-2); }

/* Inline field validation — the design-system error state: a thin crimson
   border on the field plus a short crimson hint below it. Never a banner,
   never a chat bubble. Painted by the form-guard script (client checks) and
   by the server's in-place form bounce (checksum-class errors). */
.group-inp.is-invalid { border-color: var(--err); }
.group-inp.is-invalid:focus { outline-color: var(--err); }
.fld-err { display: block; color: var(--err); font-size: 12px; margin-top: 4px; }

/* Minimal undo — a small "↩" pinned top-right of the current bot bubble.
   Reads as "previous message" in a conversation; no line-consuming label. */
.bubble.bot { position: relative; }
.back-form { position: absolute; top: 10px; right: 12px; margin: 0; z-index: 1; }
.back-undo {
  background: transparent; border: 0; padding: 2px 4px;
  font-size: 16px; line-height: 1; color: var(--ink-faint);
  cursor: pointer; border-radius: var(--r);
  transition: color .12s ease, background .12s ease;
}
.back-undo:hover { color: var(--pomelo-deep); background: var(--surface-2); }

/* Superseded bubbles: dimmed and inert so stale controls can't fire against
   the current node. Applied to all but the newest .bubble.bot (see chat.html). */
.bubble.bot.spent { opacity: .6; }
.bubble.bot.spent button,
.bubble.bot.spent input,
.bubble.bot.spent select,
.bubble.bot.spent textarea,
.bubble.bot.spent label,
.bubble.bot.spent .dropzone,
.bubble.bot.spent .back-form { pointer-events: none; }
/* Disclosures (why-this-matters, which-photos-help) stay readable on a spent
   bubble — they're informational, not actions. */
.bubble.bot.spent details summary { pointer-events: auto; }
.seg { display: flex; gap: 8px; }
.seg-opt { flex: 1; }
.seg-opt input { position: absolute; opacity: 0; pointer-events: none; }
.seg-opt span {
  display: block; text-align: center; padding: 11px 8px;
  border: 1px solid var(--surface-3); border-radius: var(--r);
  font-weight: 600; font-size: 15px; cursor: pointer;
}
.seg-opt input:checked + span {
  border-color: var(--pomelo); background: rgba(125,209,52,0.10); color: var(--pomelo-deep);
}

.hub-rows { display: flex; flex-direction: column; gap: var(--s-2); }
.hub-row-form { margin: 8px 0; }
.hub-row {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: var(--surface); border: 1px solid var(--surface-3);
  border-radius: var(--r); padding: 12px 13px; cursor: pointer;
  transition: border-color .15s ease, transform .1s ease;
}
.hub-row:hover { border-color: var(--pomelo); }
.hub-row:active { transform: translateY(1px); }
/* Static rows (in-progress / non-tappable) aren't wrapped in .hub-row-form,
   so they miss its 8px vertical margin — add it back so every row is evenly
   spaced regardless of state. */
.hub-row.is-static { cursor: default; margin: 8px 0; }
.hub-row.is-static:hover { border-color: var(--surface-3); }
.hub-row.is-done { opacity: 0.75; }
/* The one recommended "start here" step: green border + pale fill, and its
   icon tile picks up the accent so the eye lands on it first. */
.hub-row.is-recommended {
  border-color: var(--pomelo);
  background: var(--wash, rgba(125, 209, 52, 0.07));
  box-shadow: 0 0 0 1px var(--pomelo);
}
.hub-row.is-recommended .hub-row-ic { background: #eef7e3; }
.hub-row-tag {
  display: inline-block; margin-left: 8px; vertical-align: 1px;
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  color: var(--pomelo-deep); background: #eef7e3;
  border-radius: 6px; padding: 1px 7px;
}
.hub-row-ic {
  width: 36px; height: 36px; border-radius: 10px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; background: var(--surface-2);
}
.hub-row.is-done .hub-row-ic { background: #eef7e3; }
.hub-row-body { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.hub-row-label { font-weight: 600; font-size: 15px; color: var(--ink); }
.hub-row.is-done .hub-row-label { color: var(--ink-mute); }
.hub-row-desc { font-size: 12px; color: var(--ink-mute); }
.hub-row-go { margin-left: auto; color: var(--ink-faint); font-weight: 700; font-size: 18px; }
.hub-row-go.done { color: var(--pomelo-deep); }
/* Group headers + finish link inside the plan */
.hub-group-name {
  font-size: 11px; font-weight: 700; color: var(--ink-faint);
  text-transform: uppercase; letter-spacing: .05em; margin: 14px 0 2px;
}
.renewal-plan .hub-row-form:first-of-type { margin-top: 4px; }
.hub-finish {
  background: transparent; border: 0; cursor: pointer; margin-top: var(--s-3);
  color: var(--pomelo-deep); font: 600 13px/1 var(--font); padding: 6px 2px;
}
.hub-more { margin-top: var(--s-2); }
.hub-more > summary {
  cursor: pointer; list-style: none; color: var(--pomelo-deep);
  font-size: 13px; font-weight: 600; padding: 6px 2px;
}
.hub-more > summary::-webkit-details-marker { display: none; }
.hub-more > summary::after { content: " ›"; }
.hub-more[open] > summary::after { content: " ⌄"; }
.hub-more .chips { margin-top: var(--s-2); }

/* Persistent renewal progress strip — non-linear "N of M done" (no implied
   order). Sits under the header; OOB-refreshed each turn. Empty when no plan. */
#renewal-progress:empty { display: none; }
/* Slim single-line progress, sits directly under the header inside .topbar
   (no sticky/offset of its own — the whole topbar sticks as a unit). */
#renewal-progress {
  background: var(--surface); border-bottom: 1px solid var(--surface-3);
}
.renewal-progress {
  display: flex; align-items: center; gap: 10px;
  max-width: 640px; margin: 0 auto; padding: 5px 20px 6px;
}
.renewal-progress .rp-label {
  font-size: 11px; font-weight: 700; color: var(--ink-mute);
  white-space: nowrap; letter-spacing: .02em;
}
/* Segmented progress — one short bar per task, filled as done. */
.renewal-progress .rp-segs { display: flex; gap: 5px; flex: 1; }
.renewal-progress .rp-seg {
  flex: 1; height: 4px; background: var(--surface-3); border-radius: var(--r-pill);
  transition: background .35s var(--spring);
}
.renewal-progress .rp-seg.is-done { background: var(--pomelo); }

.bubble h2 {
  margin: 0 0 var(--s-2);
  /* Conversational scale, not headline — one prompt per turn shouldn't shout. */
  font-size: clamp(17px, 2.1vw, 19px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--ink);
}
/* Collapsed explanation — detail is one tap away (see render_bot_bubble). */
.exp-toggle { margin: 10px 0 0; }
.exp-toggle > summary {
  cursor: pointer; list-style: none;
  color: var(--pomelo-deep); font-size: 13px; font-weight: 600;
  display: inline-block;
}
.exp-toggle > summary::-webkit-details-marker { display: none; }
.exp-toggle > summary::after { content: " ›"; }
.exp-toggle[open] > summary::after { content: " ⌄"; }
.exp-toggle .exp-body {
  color: var(--ink-mute); font-size: 13.5px; line-height: 1.5; margin-top: 8px;
}
.bubble p { margin: 6px 0; color: var(--ink); }
.bubble p.subq {
  color: var(--ink-mute);
  font-size: 14px;
  margin-top: 6px;
}
.bubble p.exp {
  color: var(--ink-mute);
  font-size: 13.5px;
  font-style: normal;
  border-left: 0;
  padding-left: 16px;
  margin: 10px 0;
  position: relative;
}
.bubble p.exp::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--pomelo);
}
.bubble code {
  background: var(--surface-2);
  color: var(--ink);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 13px;
}

.bubble .next-steps {
  margin-top: var(--s-3);
  padding: var(--s-3);
  background: var(--surface-2);
  border-radius: var(--r);
  font-size: 14px;
  color: var(--ink);
}

/* Inline estimate inside a question bubble — quiet supporting text only.
   Real price moments live on .plan-card (.plan-price) and on the confirm card
   (.summary-premium). This rule keeps the estimate visible but stops it from
   competing with the question. */
.bubble .premium {
  display: block;
  margin-top: var(--s-2);
  font-family: var(--font);
  font-style: normal;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink-mute);
  line-height: 1.4;
}

/* ────────── ACK ────────── */
.ack {
  font-size: 12.5px;
  color: var(--ink-mute);
  padding: 0 var(--s-2);
  margin: 0 0 -2px var(--s-1);
  letter-spacing: -0.005em;
}

/* ────────── GLOSSARY ────────── */
.glossary {
  margin-top: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--surface-2);
  border-radius: var(--r);
  font-size: 13.5px;
  color: var(--ink-mute);
}
.glossary b { color: var(--ink); font-weight: 600; }
.glossary div { margin: 2px 0; }

/* ────────── SIDE-EFFECT (upload result / progress notice) ────────── */
.side-effect {
  align-self: flex-start;
  max-width: 100%;
  padding: var(--s-3) var(--s-4);
  padding-left: calc(var(--s-4) + 18px);
  background: var(--surface);
  border-radius: var(--r);
  box-shadow: var(--lift);
  font-size: 14px;
  position: relative;
}
.side-effect::before {
  content: "";
  position: absolute;
  left: var(--s-4); top: 18px;
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--pomelo);
}
.side-effect.error::before { background: var(--err); }
.side-effect.warn::before  { background: var(--ink); }

/* Contract render — "What's in your draft" summary list + download CTA. */
.contract-side-effect ul.contract-answers {
  list-style: none;
  margin: var(--s-2) 0 var(--s-3);
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-2);
}
.contract-side-effect ul.contract-answers li {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  padding: 6px 0;
  border-bottom: 1px solid var(--surface-3);
  font-size: 14.5px;
}
.contract-side-effect ul.contract-answers li:last-child { border-bottom: 0; }
.contract-side-effect ul.contract-answers .muted {
  flex: 0 0 38%;
  font-size: 13px;
  color: var(--ink-mute);
}
.contract-side-effect ul.contract-answers b { flex: 1; font-weight: 600; }
.contract-side-effect ul.contract-answers li:hover .row-edit { opacity: 1; }
.contract-download {
  margin: 0 0 var(--s-3);
  display: flex; align-items: center; gap: var(--s-3);
  flex-wrap: wrap;
}
.contract-pdf-link { text-decoration: none; }
.contract-pdf-link:hover { text-decoration: none; }

.side-effect .coverage { margin: var(--s-3) 0 var(--s-2); color: var(--ink); }
.side-effect .coverage-counts {
  display: flex; justify-content: space-between; gap: var(--s-2);
  font-weight: 600; font-size: 14px; margin-bottom: var(--s-1);
}
.side-effect .cov-extracted { color: var(--pomelo-deep, #3a7a00); }
.side-effect .cov-provide { color: var(--ink-2, #555); }
.side-effect .progress {
  background: var(--surface-2);
  height: 10px; border-radius: 999px;
  overflow: hidden;
  margin: var(--s-1) 0;
}
.side-effect .progress-bar {
  background: var(--pomelo);
  height: 100%;
  border-radius: 999px;
  transition: width 320ms var(--spring);
}
.side-effect .cov-sub { font-size: 12px; margin: var(--s-1) 0 0; }
.side-effect .nudge {
  background: var(--surface-2);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r);
  margin: var(--s-3) 0 0;
  color: var(--ink);
  font-size: 13.5px;
}
.side-effect ul { margin: var(--s-2) 0 0; padding-left: 22px; }
.side-effect .conf { color: var(--ink-mute); font-size: 11.5px; }

/* ────────── TYPING INDICATOR (3 dots) ────────── */
.spinner {
  display: inline-block;
  position: relative;
  width: 30px; height: 8px;
  vertical-align: middle;
}
.spinner::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 4px 4px,  var(--ink-mute) 3px, transparent 3.5px),
    radial-gradient(circle at 15px 4px, var(--ink-mute) 3px, transparent 3.5px),
    radial-gradient(circle at 26px 4px, var(--ink-mute) 3px, transparent 3.5px);
  animation: typebreathe 1.4s var(--ease) infinite;
}
@keyframes typebreathe {
  0%, 100% { opacity: 0.35; transform: translateY(0); }
  50%      { opacity: 1;    transform: translateY(-1px); }
}

/* Generic "Sally is thinking…" bubble — shown on every chat turn while the
   server responds (cold start + DB round-trip can lag on serverless). */
.bubble.typing {
  display: inline-flex; align-items: center;
  width: auto; min-width: 0;
  padding: 12px 16px;
}
.typing-dots { display: inline-flex; gap: 5px; align-items: center; }
.typing-dots i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ink-mute);
  animation: typebreathe 1.4s var(--ease) infinite;
}
.typing-dots i:nth-child(2) { animation-delay: 0.18s; }
.typing-dots i:nth-child(3) { animation-delay: 0.36s; }

/* Top progress bar for full-page navigations (landing CTAs, start/continue/
   logout). Slim, indeterminate; appears the instant the user commits so a
   slow cold start still feels responsive. */
#nav-progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 3px; z-index: 9999;
  background: transparent;
  pointer-events: none;
  opacity: 0;
}
#nav-progress.active {
  opacity: 1;
  background: linear-gradient(90deg,
    transparent 0%, var(--pomelo) 50%, transparent 100%);
  background-size: 40% 100%;
  background-repeat: no-repeat;
  animation: nav-progress-slide 1.1s ease-in-out infinite;
}
@keyframes nav-progress-slide {
  0%   { background-position: -40% 0; }
  100% { background-position: 140% 0; }
}
@media (prefers-reduced-motion: reduce) {
  #nav-progress.active { animation: none; background-position: 50% 0; }
}

/* ────────── INPUT AREA ────────── */
#input-area {
  position: sticky; bottom: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, var(--surface) 18%);
  /* Match the bubble's horizontal inset so chips don't bleed to the edge. */
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  transition: opacity .2s ease;
  /* Never let a tall picker (e.g. 4 plan chips with prices) eat the screen:
     cap the bar and let it scroll internally so the chat stays visible above.
     The gradient top already signals there's a scroll boundary here. */
  max-height: 55vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
#input-area > * { margin: 0; }
/* The input area's form stacks chips on top, free-text row below. They
   used to sit side-by-side at flex: 1 each, which split the row into 50/50
   and forced the input + Send button to stretch awkwardly — the wide Send
   was visually competing with the primary chip. Stacking puts the chips
   in one rail (full width, wraps cleanly), and the text row in its own
   line below at sensible size. */
#input-area form { display: flex; flex-direction: column; gap: var(--s-3); }
/* A form that IS a text row (the travel ask-anything row) lays out
   horizontally: input beside its Send button, like every other text row. */
#input-area form.text-row { flex-direction: row; }

/* While the OCR pipeline is running (a .bubble.processing exists in the
   chat log), the input area becomes click-blocked + dimmed. Prevents the
   user from queueing a second upload or hitting submit twice. */
#chat-log:has(.bubble.processing) ~ #input-area {
  pointer-events: none;
  opacity: 0.45;
}
/* Answer chips stack full-width so every button is the same size (was
   content-width inline chips → ragged widths). */
.chips    { display: flex; flex-direction: column; gap: var(--s-2); }
.chips .chip { width: 100%; }
.text-row { display: flex; gap: var(--s-3); align-items: stretch; }
/* Text input fills the row; Send button stays compact. */
.text-row input[type="text"] {
  flex: 1;
  padding: 12px 14px;
  border-radius: var(--r);
  border: 1px solid var(--surface-3);
  background: var(--surface);
  font: inherit;
  font-size: 16px;          /* 16px = no iOS focus-zoom */
  color: var(--ink);
  min-height: 44px;
}
.text-row input[type="text"]:focus {
  outline: none;
  border-color: var(--pomelo);
  box-shadow: 0 0 0 3px rgba(125, 209, 52, 0.18);
}
.text-row input[type="text"]::placeholder { color: var(--ink-faint); }
/* Ask-anything row: the quiet always-there text input under structured
   inputs on travel nodes. */
.ask-row { margin-top: var(--s-2); }

/* Compact upload: one quiet button row (conversation-first screens).
   Same file input + HTMX wiring as the dropzone, none of the furniture. */
.upload-inline {
  display: flex; align-items: center; justify-content: center;
  gap: var(--s-2);
  min-height: 44px;
  margin-top: var(--s-3);
  padding: 10px 14px;
  border: 1px solid var(--surface-3);
  border-radius: var(--r);
  background: var(--surface-2);
  color: var(--ink-mute);
  font-size: 14px; font-weight: 500;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.upload-inline:hover { border-color: var(--pomelo); background: var(--surface); }
.upload-inline input[type="file"] { display: none; }
.upload-inline .dz-busy { display: none; }
.upload-inline.htmx-request .dz-idle { display: none; }
.upload-inline.htmx-request .dz-busy { display: inline-flex; align-items: center; gap: 6px; }
.text-row .chip {
  flex: 0 0 auto;        /* don't stretch — compact Send button */
  align-self: stretch;   /* match input's height visually */
}

/* Destination tokens — multi-stop trip entry. Each added place is a
   removable token above the text row; hidden until the first add. */
.dest-tokens { display: none; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-2); }
.dest-tokens.has-tokens { display: flex; }
.dest-token {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 6px 4px 6px 12px;
  min-height: 44px;
  background: var(--surface);
  border: 1px solid var(--surface-3);
  border-radius: var(--r);
  font-size: 15px;
  color: var(--ink);
}
.dest-token-x {
  border: 0;
  background: none;
  color: var(--ink-mute);
  font-size: 20px;
  line-height: 1;
  min-width: 36px;
  min-height: 36px;
  cursor: pointer;
  border-radius: var(--r);
}
.dest-token-x:hover { color: var(--ink); background: var(--surface-2); }
.dest-row .dest-add { flex: 0 0 auto; }
/* Three controls share the row on a phone — let the input give way. */
.dest-row input[type="text"] { min-width: 0; }

/* ────────── CHIPS (answer rail) ────────── */
.chip {
  display: inline-flex; flex-direction: column; align-items: flex-start;
  padding: 11px 18px;
  border-radius: var(--r);
  border: 0;
  background: var(--surface-2);
  color: var(--ink);
  cursor: pointer;
  font: 600 14px/1.3 var(--font);
  letter-spacing: -0.005em;
  text-align: left;
  min-height: 44px;
  transition: background .12s var(--ease), box-shadow .15s var(--ease), transform .12s var(--spring);
}
.chip:hover {
  background: var(--surface-3);
  box-shadow: var(--lift);
  transform: translateY(-1px);
}
.chip:active { transform: translateY(0); }

/* Multi-select: checkbox chips (tick several, then Continue) */
.chips-multi { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip-check {
  flex-direction: row; align-items: center; gap: 8px;
  user-select: none;
}
.chip-check input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--brand-dark); cursor: pointer; }
.chip-check:has(input:checked) {
  background: rgba(125, 209, 52, 0.14);   /* light Pomelo-green tint */
  box-shadow: inset 0 0 0 1.5px var(--brand-dark);
}
.multi-continue { margin-top: var(--s-2); }

/* Roster picker — a full-width traveller checklist (reuses .chip-check) */
.chips-roster { flex-direction: column; }
.chips-roster .chip-check { width: 100%; justify-content: flex-start; }
.chip-check--locked { opacity: 0.72; cursor: default; }
.chip-check--locked input[type="checkbox"] { cursor: default; }
.chip-check--add { box-shadow: inset 0 0 0 1px var(--surface-3); }
.chip-check--add:has(input:checked) {
  background: rgba(125, 209, 52, 0.14);
  box-shadow: inset 0 0 0 1.5px var(--brand-dark);
}
.roster-add { margin-top: var(--s-2); }
.roster-add-kids {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 14px; background: var(--surface-2); border-radius: var(--r);
  font: 600 14px/1.3 var(--font); color: var(--ink);
}
.roster-add-kids input[type="number"] {
  flex: 0 0 auto; width: 84px; text-align: center; padding: 11px 12px;
  border: 1px solid var(--surface-3); border-radius: var(--r);
  font: 600 16px/1 var(--font); background: var(--surface);
}
.roster-add-kids input[type="number"]:focus { outline: none; border-color: var(--brand-dark); }

/* Composition: one number input per household band */
.comp-grid { display: flex; flex-direction: column; gap: 6px; }
.comp-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 8px 14px;
  background: var(--surface-2); border-radius: var(--r);
}
.comp-label { font: 600 14px/1.3 var(--font); color: var(--ink); }
.comp-row input[type="number"] {
  flex: 0 0 auto;            /* don't flex-grow — a compact counter, not a bar */
  width: 84px; text-align: center; padding: 11px 12px;
  border: 1px solid var(--surface-3); border-radius: var(--r);
  font: 600 16px/1 var(--font); background: var(--surface);
}
.comp-row input[type="number"]:focus {
  outline: none; border-color: var(--brand-dark);
}

.chip.primary,
.chip.terminal,
.chip.submit {
  background: var(--pomelo);
  color: var(--ink);
  box-shadow: var(--lift);
}
.chip.primary:hover,
.chip.terminal:hover,
.chip.submit:hover {
  background: var(--pomelo-deep);
  color: #fff;
  box-shadow: var(--lift-hover);
}

.chip.secondary { background: var(--surface-2); }

.chip .desc {
  font-size: 12px;
  color: var(--ink-mute);
  margin-top: 3px;
  font-weight: 400;
  letter-spacing: 0;
}
.chip.primary .desc,
.chip.terminal .desc,
.chip.submit .desc { color: rgba(10,10,10,0.7); }
.chip.primary:hover .desc,
.chip.terminal:hover .desc,
.chip.submit:hover .desc { color: rgba(255,255,255,0.85); }

.chip small.note {
  color: var(--ink-mute);
  font-size: 11.5px;
  margin-top: 3px;
  font-weight: 400;
}

/* Live plan price on a tier chip (from the background price probe):
   discounted price prominent, pre-promotion price struck through. */
.chip .chip-price {
  font: 700 15px/1.3 var(--font);
  color: var(--ink);
  margin-top: 3px;
  letter-spacing: 0;
}
.chip .chip-price .chip-was {
  font-weight: 400;
  font-size: 12px;
  color: var(--ink-mute);
  margin-left: 4px;
}
.chip.primary .chip-price .chip-was,
.chip.primary:hover .chip-price { color: inherit; }

/* ────────── CANCEL CHIP (last option, every chat step) ──────────
   Visually identical to the other answer chips: same shape, same fill,
   sizes to its content like its siblings. The label "← Cancel renewal"
   communicates intent. Always last in the rail. */
.cancel-chip-wrap {
  margin-top: var(--s-3);
}

/* ────────── DROPZONE ────────── */
.dropzone {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: var(--s-5);
  /* Dashed-green "drop target" affordance (matches the approved mockup). */
  background: rgba(125, 209, 52, 0.06);
  border: 1.5px dashed var(--pomelo);
  border-radius: var(--r-lg);
  color: var(--ink);
  cursor: pointer;
  text-align: center;
  min-height: 120px;
  transition: background .15s var(--ease), box-shadow .15s var(--ease);
}
.dropzone:hover,
.dropzone.dragover {
  background: rgba(125, 209, 52, 0.12);
  box-shadow: inset 0 0 0 1px var(--pomelo), var(--lift);
}
.dropzone input { display: none; }
.dropzone span { font-size: 15px; font-weight: 600; letter-spacing: -0.005em; }
.dropzone-hint {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--ink-mute);
  font-weight: 400;
}
/* Up-front 'what to upload' guidance (F3) — sits above the dropzone and
   lists which docs fill which still-missing fields. */
.upload-guidance {
  margin-top: var(--s-3);
}
.upload-guidance > summary {
  cursor: pointer; list-style: none;
  color: var(--pomelo-deep); font-size: 13px; font-weight: 600;
}
.upload-guidance > summary::-webkit-details-marker { display: none; }
.upload-guidance > summary::after { content: " ›"; }
.upload-guidance[open] > summary::after { content: " ⌄"; }
.upload-guidance[open] > summary { margin-bottom: var(--s-2); }
.upload-guidance ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.upload-guidance li { font-size: 13px; line-height: 1.35; }
.upload-guidance .muted { font-size: 12.5px; }

.upload-form { display: flex; gap: var(--s-3); align-items: stretch; flex-direction: column; }
.submit-row  { margin-top: var(--s-2); }

/* Auto-upload: idle vs "reading…" state. htmx adds .htmx-request to the
   dropzone itself (hx-indicator="closest .dropzone") for the OCR request. */
.dropzone .dz-busy { display: none; }
.dropzone.htmx-request .dz-idle { display: none; }
.dropzone.htmx-request .dz-busy { display: block; }
.dropzone.htmx-request {
  pointer-events: none;
  background: rgba(125, 209, 52, 0.12);
  box-shadow: inset 0 0 0 1px var(--pomelo);
}

/* Consent & privacy — a quiet collapsible link under the dropzone, inside
   the upload bubble (consent-by-proceeding; the terms are one tap away). */
.consent-link { margin-top: var(--s-3); }
.consent-link > summary {
  cursor: pointer; list-style: none;
  color: var(--pomelo-deep); font-size: 13px; font-weight: 600;
}
.consent-link > summary::-webkit-details-marker { display: none; }
.consent-link > summary::after { content: " ›"; }
.consent-link[open] > summary::after { content: " ⌄"; }
.consent-link .consent-body {
  margin: 8px 0 0; font-size: 12.5px; color: var(--ink-mute); line-height: 1.5;
}

/* ────────── INPUTS ────────── */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="number"] {
  flex: 1;
  padding: 12px 14px;
  font: 16px var(--font);          /* 16px = no iOS zoom */
  letter-spacing: -0.005em;
  background: var(--surface-2);
  color: var(--ink);
  border: 0;
  border-radius: var(--r);
  transition: background .12s ease, box-shadow .12s ease;
  outline: 0;
}
input[type="text"]::placeholder,
input[type="email"]::placeholder { color: var(--ink-faint); }
input[type="text"]:focus,
input[type="email"]:focus {
  background: var(--surface);
  box-shadow: inset 0 0 0 2px var(--pomelo);
}

details.resume { margin-top: var(--s-3); }
details.resume summary {
  color: var(--ink-mute);
  cursor: pointer;
  font-size: 13.5px;
  padding: 4px 0;
  list-style: none;
}
.resume-form { margin-top: var(--s-3); display: flex; gap: var(--s-3); }

/* ────────── BANNER (white card + leading dot) ────────── */
.banner {
  position: relative;
  padding: var(--s-3) var(--s-4);
  padding-left: calc(var(--s-4) + 18px);
  background: var(--surface);
  border-radius: var(--r);
  box-shadow: var(--lift);
  font-size: 14px;
  color: var(--ink);
  margin-bottom: var(--s-2);
}
.banner::before {
  content: "";
  position: absolute;
  left: var(--s-4); top: 18px;
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--ink);
}
.banner strong { display: block; margin-bottom: 3px; font-size: 15px; font-weight: 600; }
.banner code {
  background: var(--surface-2);
  color: var(--ink);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 12.5px;
}
.banner-in_progress::before,
.banner-reminder_due::before,
/* 'failed' is internal status only; the customer sees a calm still-working
   note (invisible-human principle), so the dot stays neutral, not crimson. */
.banner-failed::before       { background: var(--ink); }
.banner-filled::before,
.banner-pending::before      { background: var(--pomelo); }

/* ────────── CHECKLIST ────────── */
.checklist {
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 0;
  font-size: 14px;
}
.checklist-head {
  margin: var(--s-3) 0 var(--s-1);
  color: var(--ink-mute);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}
.checklist ul,
.checklist ol { margin: var(--s-2) 0 var(--s-3); padding: 0; list-style: none; }
.checklist li {
  margin: 6px 0;
  padding-left: 18px;
  position: relative;
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--pomelo);
}
.checklist .fee   { color: var(--ink); font-weight: 600; }
.checklist .muted { color: var(--ink-mute); }
.checklist a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--pomelo);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.checklist a:hover { color: var(--pomelo-deep); }

/* ────────── RENEWAL PLAN HUB ────────── */
.renewal-plan {
  margin-top: var(--s-3);
  padding: var(--s-4);
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--lift);
}
.renewal-plan-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
}
.renewal-plan-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
}
.renewal-plan-progress {
  flex: none;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
  background: var(--surface-2);
  padding: 4px 10px;
  border-radius: var(--r-pill);
}
.renewal-plan-sub {
  margin-top: 2px;
  font-size: 13px;
  color: var(--ink-mute);
}
.renewal-track {
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  position: relative;
}
.renewal-track::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: var(--surface-3);
}
.renewal-track:first-of-type {
  margin-top: var(--s-3);
}
.renewal-track-name {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
  font-weight: 700;
  margin-bottom: var(--s-2);
}
.renewal-items {
  margin: 0;
  padding: 0;
  list-style: none;
}
.renewal-item {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  padding: var(--s-2) 0;
}
.renewal-item + .renewal-item {
  border-top: 1px solid var(--surface-3);
}
.renewal-item-glyph {
  flex: none;
  font-size: 15px;
  line-height: 1.4;
}
.renewal-item-body { flex: 1; min-width: 0; }
.renewal-item-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
}
.renewal-item-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.renewal-item-who {
  flex: none;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-mute);
  background: var(--surface-2);
  padding: 2px 8px;
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.renewal-item-hint {
  margin-top: 2px;
  font-size: 13px;
  color: var(--ink-mute);
  line-height: 1.4;
}
/* Status accents: "next" leans on the accent, done/na recede. */
.renewal-item.is-next .renewal-item-label { color: var(--pomelo-deep); }
.renewal-item.is-next .renewal-item-who {
  color: var(--surface);
  background: var(--pomelo-deep);
}
.renewal-item.is-done .renewal-item-label { color: var(--ink-mute); }
/* "submitting": MSIG fill in flight — emphasise the label, mark it busy. */
.renewal-item.is-submitting .renewal-item-label { color: var(--pomelo-deep); font-style: italic; }
.renewal-item.is-na { opacity: 0.55; }
.renewal-item.is-na .renewal-item-label { color: var(--ink-mute); }
.renewal-plan-closing {
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  position: relative;
  font-size: 13px;
  color: var(--ink);
  line-height: 1.5;
}
.renewal-plan-closing::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: var(--surface-3);
}

/* ────────── PLAN CARDS ────────── */
.plan-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
  margin-top: var(--s-3);
}
/* Always one column. The chat column is capped at ~640px even on desktop
   (design: "same single centred column, never wider"), so three cards
   side by side would be ~200px each — the serif price collides with the
   eyebrow name and the limits wrap mid-number ("$60, / 000"). Stacked, each
   card is full width and reads cleanly. */
.plan-card {
  background: var(--surface);
  border: 0;
  border-radius: var(--r-lg);
  padding: var(--s-4);
  box-shadow: var(--lift);
  transition: box-shadow .18s ease, transform .15s ease;
}
.plan-card:hover {
  box-shadow: var(--lift-hover);
  transform: translateY(-1px);
}
.plan-card-head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: var(--s-2);
  margin-bottom: var(--s-3);
  border-bottom: 0;
}
.plan-card-head h3 {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
  white-space: nowrap;   /* "STANDARD" never breaks to "STAND / ARD" */
}
.plan-price {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(22px, 3.2vw, 28px);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  white-space: nowrap;   /* keep "SGD 585.33" on one line */
}
.plan-increment {
  color: var(--ink-mute);
  font-size: 12px;
  font-weight: 500;
  font-style: normal;
  font-family: var(--font);
  white-space: nowrap;
}
.plan-was {
  color: var(--ink-faint);
  font-size: 12px;
  font-style: normal;
  font-family: var(--font);
  white-space: nowrap;
}
.plan-price-pending {
  color: var(--ink-mute);
  font-size: 13px;
  font-style: italic;
  font-family: var(--font);
}
.plan-cards-note {
  font-size: 12.5px;
  color: var(--ink-mute);
  margin: var(--s-2) 0 0;
}
.plan-line { margin: var(--s-2) 0; padding: 0; }
.plan-line-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s-2);
  margin-bottom: 2px;
}
.plan-line-label { font-size: 13px; color: var(--ink-mute); }
.plan-line-limit { font-weight: 600; font-size: 14px; color: var(--ink); white-space: nowrap; }
.plan-line-plain { font-size: 13px; color: var(--ink); }
.plan-gut        { font-size: 12.5px; color: var(--ink-mute); margin-top: 2px; }
.plan-best-for {
  margin-top: var(--s-3);
  padding-top: var(--s-2);
  border-top: 0;
  font-size: 12.5px;
  color: var(--ink);
}
.plan-best-for b { color: var(--pomelo-deep); font-weight: 600; }

/* ────────── SUMMARY CARD (review) ────────── */
.summary-card {
  margin-top: var(--s-3);
  padding: var(--s-4);
  background: var(--surface);
  border: 0;
  border-radius: var(--r-lg);
  box-shadow: var(--lift);
}
/* Compact recommended-quote card (leads the confirm; full detail collapses). */
.quote-card {
  border: 1px solid var(--surface-3); border-radius: var(--r-lg);
  padding: 14px 16px; background: rgba(125,209,52,0.05);
}
.quote-rec { font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--pomelo-deep); }
.quote-plan { font-family: var(--font-display); font-size: 20px; font-weight: 600; margin-top: 2px; }
.quote-cov { font-size: 13px; color: var(--ink-mute); margin-top: 2px; }
.quote-premium { margin-top: 12px; font-size: 15px; }
.quote-premium b { font-family: var(--font-display); font-size: 19px; }
.quote-note { font-size: 12px; color: var(--ink-mute); font-weight: 400; margin-top: 3px; }
/* Live probed price: struck-through pre-promotion figure + savings line */
.quote-was { font-size: 13px; color: var(--ink-mute); font-weight: 400; margin-left: 6px; }
.quote-save { font-size: 13px; color: var(--pomelo-deep); font-weight: 600; margin-top: 3px; }
/* Collapsible "Change coverage" / "Review my details". */
.review-toggle { margin-top: var(--s-3); }
.review-toggle > summary {
  cursor: pointer; list-style: none; color: var(--pomelo-deep);
  font-size: 13px; font-weight: 600; padding: 4px 2px;
}
.review-toggle > summary::-webkit-details-marker { display: none; }
.review-toggle > summary::after { content: " ›"; }
.review-toggle[open] > summary::after { content: " ⌄"; }
.summary-section {
  padding: var(--s-2) 0;
  border-bottom: 0;
}
.summary-section + .summary-section {
  margin-top: var(--s-2);
  padding-top: var(--s-3);
  position: relative;
}
.summary-section + .summary-section::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: var(--surface-3);
}
.summary-head {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
  font-weight: 700;
  margin-bottom: 6px;
  display: flex; justify-content: space-between; align-items: center;
}
.edit-pill {
  background: var(--surface-2);
  border: 0;
  color: var(--ink);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 120ms ease;
}
.edit-pill:hover { background: var(--pomelo); }

.row-edit {
  background: transparent; border: 0; cursor: pointer;
  color: var(--ink-mute); font-size: 13px; padding: 0 6px;
  border-radius: 4px;
  opacity: 0.45;
  transition: opacity 120ms ease, background 120ms ease;
}
.summary-card dd:hover .row-edit, .row-edit:focus { opacity: 1; }
.row-edit:hover { background: var(--surface-2); color: var(--ink); opacity: 1; }
.summary-card dd { display: flex; align-items: center; gap: 6px; }

.summary-card dl {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 4px 12px;
  margin: 0;
  font-size: 14px;
}
.summary-card dt { color: var(--ink-mute); }
.summary-card dd { margin: 0; color: var(--ink); }
.summary-card dd.missing { color: var(--err); font-style: italic; }
.summary-premium {
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  position: relative;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
}
.summary-premium::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: var(--surface-3);
}

.src-badge {
  display: inline-block;
  padding: 0 4px;
  font-size: 11px;
  color: var(--ink-mute);
  cursor: help;
  opacity: 0.7;
  font-family: var(--font-mono);
}
.src-badge:hover { opacity: 1; }

.back-bail { margin-top: var(--s-2); opacity: 0.85; }
.back-bail .chip { font-size: 12px; padding: 6px 14px; }

.submit-cta { width: 100%; margin-bottom: var(--s-2); }
.submit-chip {
  width: 100%;
  padding: 16px 20px;
  font-size: 16px;
  font-weight: 700;
  border-radius: var(--r);
  background: var(--pomelo);
  color: var(--ink);
  border: 0;
  box-shadow: var(--lift);
  letter-spacing: -0.01em;
}
.submit-chip:hover {
  background: var(--pomelo-deep);
  color: #fff;
  box-shadow: var(--lift-hover);
}
.submit-chip .desc {
  display: block;
  font-size: 12.5px;
  font-weight: 400;
  opacity: 0.7;
  margin-top: 4px;
}

/* ────────── AUTH FORMS ────────── */
.auth-form {
  display: flex; flex-direction: column;
  gap: var(--s-3);
  max-width: 360px;
  padding: var(--s-4);
  background: var(--surface);
  border: 0;
  border-radius: var(--r-lg);
  box-shadow: var(--lift);
}
.auth-form .auth-field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.auth-form .auth-field span { color: var(--ink-mute); }
.auth-form input[type="email"],
.auth-form input[type="text"] {
  padding: 12px 14px;
  background: var(--surface-2);
  border: 0;
  border-radius: var(--r);
  font-size: 16px;          /* 16px = no iOS focus-zoom */
  font-family: inherit;
}
.auth-form input:focus {
  background: var(--surface);
  box-shadow: inset 0 0 0 2px var(--pomelo);
}
.auth-hint  { font-size: 12.5px; margin: 0; color: var(--ink-mute); }
.auth-step  { font-size: 14px; margin: 0; color: var(--ink); }
.auth-error { color: var(--err); font-size: 13px; margin: 0; }
.auth-actions { display: flex; gap: var(--s-3); flex-wrap: wrap; }

/* ────────── BADGES (dot + text style) ────────── */
.badge {
  display: inline-flex; align-items: center;
  gap: 6px;
  padding: 0;
  background: transparent;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 0;
}
.badge::before {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 999px;
  background: var(--ink-mute);
}
.badge-ok::before   { background: var(--pomelo); }
.badge-warn::before { background: var(--ink); }
.badge-info        { color: var(--ink-mute); }
.badge-info::before { background: var(--ink-faint); }
.badge-err         { color: var(--ink); }
.badge-err::before  { background: var(--err); }

/* ────────── STATUS ROWS ────────── */
.status-row { padding: var(--s-2) 0; border-bottom: 0; position: relative; }
.status-row + .status-row { padding-top: var(--s-3); margin-top: var(--s-2); }
.status-row + .status-row::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: var(--surface-3);
}
.status-row-head {
  display: flex; align-items: center; gap: var(--s-2);
  margin-bottom: 3px;
}
.status-helper { font-weight: 600; color: var(--ink); }
.status-row-meta { color: var(--ink-mute); font-size: 13px; }
.status-row-meta code {
  background: var(--surface-2);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11.5px;
  font-family: var(--font-mono);
}

/* ────────── EXTERNAL LINK CHIPS ────────── */
.terminal-chips { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-2); }
.link-chip {
  text-decoration: none;
  background: var(--surface-2);
  color: var(--ink);
}
.link-chip:hover {
  background: var(--pomelo);
  color: var(--ink);
}

/* ────────── 'My policies (N) →' link on the picker page ──────────
   Single quiet entry-point into /my-submissions. Sits below the 3-card
   picker. Same chip-family treatment so it reads as part of the page. */
.my-policies-link {
  display: inline-flex; align-items: center;
  gap: 8px;
  align-self: center;
  margin-top: var(--s-3);
  padding: 10px 18px;
  background: var(--surface-2);
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--r-pill);
  transition: background .12s ease, transform .12s var(--spring);
}
.my-policies-link:hover {
  background: var(--surface-3);
  transform: translateY(-1px);
}
.my-policies-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px;
  padding: 0 7px;
  background: var(--pomelo);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  border-radius: 999px;
  letter-spacing: 0;
}
.my-policies-arrow {
  font-size: 16px;
  color: var(--ink-mute);
  font-weight: 400;
  transition: transform .15s var(--spring);
}
.my-policies-link:hover .my-policies-arrow { transform: translateX(3px); }

/* ────────── PICKER (welcome / picker mode) ────────── */
.picker {
  display: flex; flex-direction: column;
  max-width: 480px;
  margin: 0 auto;
  padding: var(--s-4) var(--s-3) var(--s-5);
  gap: var(--s-4);
}
.picker-head {
  display: flex; flex-direction: column;
  gap: 6px;
  padding: 0 var(--s-1);
}
.picker-title {
  margin: 0;
  font-size: clamp(24px, 4.6vw, 32px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--ink);
}
.picker-sub {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-mute);
}
.picker-sub code {
  background: var(--surface-2);
  color: var(--ink);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 12.5px;
}

.product-grid {
  display: flex; flex-direction: column;
  gap: var(--s-2);
}
.product-grid form { margin: 0; display: block; }

.product-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  padding: var(--s-3);
  background: var(--surface);
  border: 0;
  border-radius: var(--r-lg);
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
  box-shadow: var(--lift);
  transition: box-shadow .15s ease, transform .12s var(--spring), background .12s ease;
}
.product-card:hover {
  box-shadow: var(--lift-hover);
  transform: translateY(-1px);
}
.product-card:active { transform: translateY(0); }
.product-card[disabled] {
  cursor: not-allowed;
  opacity: 0.55;
  background: var(--surface-2);
  box-shadow: none;
}
.product-card[disabled]:hover { transform: none; box-shadow: none; }

.product-card--available { background: var(--surface); }

.product-art {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2);
  border-radius: var(--r);
}
.product-art svg { width: 30px; height: 30px; display: block; }
.product-card--available .product-art { background: var(--surface-2); }

.product-meta {
  display: flex; flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.product-name {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.product-blurb {
  font-size: 13.5px;
  color: var(--ink-mute);
  line-height: 1.35;
}

.product-status {
  display: inline-block;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-mute);
  background: transparent;
}

.product-go {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--pomelo);
  color: var(--ink);
  border-radius: 999px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  transition: background .12s ease, transform .15s var(--spring);
}
.product-card--available:hover .product-go {
  background: var(--pomelo-deep);
  color: #fff;
  transform: translateX(3px);
}

.picker-resume {
  display: flex; justify-content: center;
  margin-top: var(--s-4);
}
.picker-resume form, .picker-resume { margin: 0; }
/* Returning-customer gate — an explicit, prominent path next to the
   product grid (which is the "new / start" path). */
.resume-cta {
  display: inline-flex; align-items: baseline; gap: 8px;
  background: var(--surface-2); border: 1px solid var(--surface-3);
  border-radius: var(--r-pill); padding: 12px 20px; cursor: pointer;
  font: 500 14.5px/1 var(--font); color: var(--ink-mute);
  transition: border-color .15s ease, background .15s ease;
}
.resume-cta:hover { border-color: var(--pomelo); background: var(--surface); }
.resume-cta-q { color: var(--ink-mute); }
.resume-cta-go { color: var(--ink); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.resume-cta-go .arrow { transition: transform .2s var(--spring); }
.resume-cta:hover .resume-cta-go .arrow { transform: translateX(3px); }

/* ────────── LINK-ACTION (tertiary nav) ────────── */
.link-action {
  background: transparent;
  border: 0;
  font: 500 14.5px/1 var(--font);
  color: var(--ink-mute);
  padding: 10px 14px;
  cursor: pointer;
  border-radius: var(--r-pill);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color .15s ease, background .15s ease;
}
.link-action .arrow {
  display: inline-block;
  transition: transform .2s var(--spring);
}
.link-action:hover {
  color: var(--ink);
  background: var(--surface-2);
}
.link-action:hover .arrow { transform: translateX(3px); }

/* Generic muted text — used by bubble copy, footer links, hints. */
.muted { color: var(--ink-mute); }

/* ────────── PHASE CHECKLIST (submit-progress bubble) ────────── */
.phases {
  list-style: none;
  margin: var(--s-3) 0 0;
  padding: 0;
  display: flex; flex-direction: column;
  gap: var(--s-2);
}
.phase {
  display: flex; align-items: center; gap: var(--s-3);
  font-size: 14.5px;
  transition: color .25s var(--ease);
}
.phase-dot {
  width: 16px; height: 16px;
  border-radius: 999px;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font);
  transition: background .25s var(--ease);
}
.phase-completed { color: var(--ink); }
.phase-completed .phase-dot { background: var(--pomelo); }
.phase-completed .phase-dot::after {
  content: "✓";
  font-size: 10px;
  color: var(--ink);
  font-weight: 700;
  line-height: 1;
}
.phase-active { color: var(--ink); font-weight: 500; }
.phase-active .phase-dot {
  background: var(--pomelo);
  animation: phase-pulse 1.4s var(--ease) infinite;
}
.phase-future { color: var(--ink-faint); }
.phase-future .phase-dot { background: var(--surface-3); }
.phase-failed { color: var(--ink-mute); }
.phase-failed .phase-dot { background: #b94646; }
.phase-failed .phase-dot::after {
  content: "✕";
  font-size: 10px;
  color: #fff;
  font-weight: 700;
  line-height: 1;
}
.phase .muted { color: var(--ink-mute); font-size: 12.5px; }
.phase .err   { color: #b94646; font-size: 12.5px; }
@keyframes phase-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(125, 209, 52, 0.5);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(125, 209, 52, 0);
    transform: scale(1.1);
  }
}

/* ────────── /my-submissions + /submissions/<id>/summary pages ────────── */
.ms-page {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--s-4) var(--s-4) var(--s-6);
}
.ms-back {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--ink-mute);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  padding: var(--s-2) 0;
  transition: color .15s ease;
}
.ms-back:hover { color: var(--ink); }
.ms-back .arrow { display: inline-block; transition: transform .15s var(--spring); }
.ms-back:hover .arrow { transform: translateX(-3px); }

.ms-title {
  margin: var(--s-3) 0 4px;
  font-size: clamp(24px, 4.6vw, 32px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.ms-sub {
  margin: 0 0 var(--s-5);
  color: var(--ink-mute);
  font-size: 14.5px;
  line-height: 1.5;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.ms-sub code {
  background: var(--surface-2);
  color: var(--ink);
  padding: 2px 8px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 12.5px;
}
.ms-dot { color: var(--ink-faint); }

/* Empty state */
.ms-empty {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: var(--s-6) var(--s-5);
  text-align: center;
  box-shadow: var(--lift);
  display: flex; flex-direction: column;
  align-items: center; gap: var(--s-3);
}
.ms-empty p { margin: 0; }
.ms-empty p:first-child { font-size: 17px; font-weight: 600; }
.ms-empty p.muted { color: var(--ink-mute); max-width: 32ch; }
.ms-empty .chip { margin-top: var(--s-2); }

/* Zones — the page reads top to bottom: coming up, quick options,
   policies, drafts. Each zone gets an eyebrow-style title. */
.ms-zone { margin-bottom: var(--s-5); }
.ms-zone-title {
  margin: 0 0 var(--s-3);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
}

/* Coming up — dated to-dos. A quiet left rail, date pill, one line each. */
.ms-timeline {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: var(--s-3);
}
.ms-todo {
  display: flex; align-items: flex-start;
  gap: var(--s-3);
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  box-shadow: var(--lift);
}
.ms-todo-when {
  flex: 0 0 auto;
  min-width: 84px;
  text-align: center;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: rgba(125, 209, 52, 0.14);   /* green wash, matches segmented tint */
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.5;
}
.ms-todo-body { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.ms-todo-title { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.ms-todo-text { margin: 0; font-size: 13.5px; color: var(--ink-mute); line-height: 1.5; }
.ms-todo-action { margin-top: var(--s-2); align-self: flex-start; min-height: 36px; padding: 8px 14px; font-size: 13.5px; }

/* Quick options — action chips with a hint line, then quick answers. */
.ms-quick-actions {
  display: flex; flex-direction: column;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
}
.ms-quick-chip {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  width: 100%;
  min-height: 44px;
  padding: var(--s-3) var(--s-4);
  background: var(--surface);
  border: 1px solid var(--surface-3);
  border-radius: var(--r);
  font-family: var(--font);
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.ms-quick-chip:hover { border-color: var(--pomelo); }
.ms-quick-chip:focus-visible { outline: none; border-color: var(--pomelo); box-shadow: 0 0 0 3px rgba(125, 209, 52, 0.18); }
.ms-quick-label { font-size: 15px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.ms-quick-hint { font-size: 13px; color: var(--ink-mute); }

/* Quick answers — one disclosure per question, canonical text only. */
.ms-qa-list { display: flex; flex-direction: column; gap: var(--s-2); }
.ms-qa {
  background: var(--surface);
  border: 1px solid var(--surface-3);
  border-radius: var(--r);
}
.ms-qa summary {
  list-style: none;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  min-height: 44px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--pomelo-deep);
  cursor: pointer;
}
.ms-qa summary::-webkit-details-marker { display: none; }
.ms-qa-chevron {
  flex: 0 0 auto;
  color: var(--ink-faint);
  font-size: 18px;
  transition: transform .2s var(--spring);
}
.ms-qa[open] .ms-qa-chevron { transform: rotate(90deg); }
.ms-qa-answer { padding: 0 var(--s-4) var(--s-4); }
.ms-qa-answer p { margin: 0 0 var(--s-2); font-size: 14px; line-height: 1.55; color: var(--ink); }
.ms-qa-answer p:last-child { margin-bottom: 0; }
.ms-qa-source { font-size: 12.5px !important; color: var(--ink-mute) !important; }

/* Policy grid — two cards per row; one column only on the narrowest phones. */
.ms-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
}
@media (max-width: 430px) {
  .ms-pol { padding: var(--s-3); }
  .ms-pol-premium { font-size: 18px; }
}
@media (max-width: 359px) {
  .ms-grid { grid-template-columns: 1fr; }
}
.ms-pol {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  box-shadow: var(--lift);
  display: flex; flex-direction: column;
  gap: var(--s-1);
  transition: box-shadow .15s ease, transform .12s var(--spring);
}
.ms-pol:hover { box-shadow: var(--lift-hover); transform: translateY(-1px); }
.ms-pol-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-2);
  margin-bottom: var(--s-1);
}
.ms-eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-mute);
}
.ms-pol-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.ms-pol-premium {
  margin: 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.ms-pol-meta {
  margin: 0;
  font-size: 12.5px;
  color: var(--ink-mute);
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
}
.ms-pol .ms-ref { margin: 0; }
.ms-pol-actions {
  margin-top: auto;
  padding-top: var(--s-3);
  display: flex; flex-wrap: wrap; gap: var(--s-2);
}
.ms-pol-actions .chip {
  min-height: 36px;
  padding: 8px 14px;
  font-size: 13.5px;
}

@media (prefers-reduced-motion: reduce) {
  .ms-pol, .ms-todo, .ms-qa-chevron, .ms-quick-chip { transition: none; }
  .ms-pol:hover { transform: none; }
}

/* "What I have on file" — masked PII, behind the one canonical disclosure
   style (chevron that turns), collapsed by default so the card stays calm. */
.ms-pii { margin-top: var(--s-3); border-top: 1px solid var(--surface-3); padding-top: var(--s-2); }
.ms-pii > summary {
  cursor: pointer; list-style: none;
  color: var(--pomelo-deep); font-size: 13px; font-weight: 600;
  padding: 4px 0;
}
.ms-pii > summary::-webkit-details-marker { display: none; }
.ms-pii > summary::after { content: " ›"; }
.ms-pii[open] > summary::after { content: " ⌄"; }
.ms-pii-note { margin: 4px 0 var(--s-3); font-size: 12px; color: var(--ink-mute); }
.ms-pii-group + .ms-pii-group { margin-top: var(--s-3); }
.ms-pii-title {
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 4px;
}
.ms-pii-dl {
  margin: 0; display: grid; grid-template-columns: minmax(0,auto) 1fr;
  gap: 3px var(--s-3); font-size: 13px;
}
.ms-pii-dl dt { color: var(--ink-mute); }
.ms-pii-dl dd { margin: 0; color: var(--ink); word-break: break-word; }
.ms-pii-lock { font-size: 10px; opacity: 0.5; }

/* Drafts — quieter single-column rows under the policy grid. */
.ms-draft-list { display: flex; flex-direction: column; gap: var(--s-2); }
.ms-draft {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3);
  background: var(--surface);
  border: 1px solid var(--surface-3);
  border-radius: var(--r-lg);
  padding: var(--s-3) var(--s-4);
}
.ms-draft-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ms-draft-title { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.ms-draft-meta { margin: 0; font-size: 12.5px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ms-draft .chip { min-height: 36px; padding: 8px 14px; font-size: 13.5px; white-space: nowrap; }

/* Card list */
.ms-list {
  display: flex; flex-direction: column;
  gap: var(--s-3);
}
.ms-card {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  box-shadow: var(--lift);
  display: flex; flex-direction: column; gap: var(--s-3);
  transition: box-shadow .15s ease, transform .12s var(--spring);
}
.ms-card:hover { box-shadow: var(--lift-hover); transform: translateY(-1px); }

.ms-card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3);
}

/* Status: dot + label (not a badge pill) */
.ms-status {
  display: inline-flex; align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}
.ms-status-dot {
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--ink-faint);
}
.ms-status--ok       .ms-status-dot { background: var(--pomelo); }
.ms-status--warn     .ms-status-dot { background: var(--ink); }
.ms-status--info     .ms-status-dot { background: var(--ink-faint); }
.ms-status--err      .ms-status-dot { background: var(--err); }
.ms-status--err      { color: var(--ink); }
.ms-status--draft    .ms-status-dot { background: var(--ink-faint); }

.ms-ref {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-mute);
}

.ms-card-body {
  display: flex; flex-direction: column;
  gap: 4px;
}
.ms-card-name {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.ms-card-name .muted { font-weight: 400; color: var(--ink-mute); }
.ms-card-meta {
  font-size: 13.5px;
  color: var(--ink-mute);
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
}

.ms-card-actions {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  align-items: stretch;
}
.ms-action-form { margin: 0; display: block; }
.ms-card-actions .chip {
  min-height: 36px;
  padding: 8px 14px;
  font-size: 13.5px;
}

/* Summary-page sections */
.ms-section {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: var(--s-5) var(--s-4);
  box-shadow: var(--lift);
  margin-bottom: var(--s-3);
}
.ms-section-title {
  margin: 0 0 var(--s-3);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
}
.ms-dl {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 8px 16px;
  margin: 0;
  font-size: 14px;
}
.ms-dl dt {
  color: var(--ink-mute);
  font-weight: 500;
}
.ms-dl dd {
  margin: 0;
  color: var(--ink);
  word-break: break-word;
}
.ms-dl dd code {
  background: var(--surface-2);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 12.5px;
}
.ms-dl .missing {
  color: var(--ink-faint);
  font-style: italic;
}

@media (max-width: 540px) {
  .ms-dl { grid-template-columns: 1fr; gap: 2px 0; }
  .ms-dl dt { margin-top: var(--s-3); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }
  .ms-dl dt:first-child { margin-top: 0; }
}

/* ═══════════════════════════════════════════════════════════════════
   LANDING PAGE — pomeloinsured.com
   Namespaced with `lp-` to keep it from colliding with the chat UI.
   Reuses every token from :root (--pomelo, --ink*, --font*, --r*,
   --s-*, --lift, --spring, --ease). No new colors. No new fonts.
   ═══════════════════════════════════════════════════════════════════ */

/* Scroll-reveal utility — IntersectionObserver toggles `.in-view`. */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
  will-change: opacity, transform;
}
.reveal.in-view { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }

/* ────────── LP: STICKY HEADER ────────── */
.lp-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-3) var(--s-5);
  background: transparent;
  transition: background 0.24s var(--ease), box-shadow 0.24s var(--ease),
              backdrop-filter 0.24s var(--ease);
}
.lp-header[data-lp-condensed="true"] {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  box-shadow: var(--lift);
}
.lp-header .logo {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  font-size: 17px;
  letter-spacing: -0.01em;
}
.lp-header .logo svg { width: 26px; height: 26px; }
.lp-header__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--surface);
  font-weight: 500;
  font-size: 14px;
  text-decoration: none;
  transition: transform 0.2s var(--spring), background 0.2s var(--ease);
}
.lp-header__cta:hover { background: #1a1a1a; transform: translateY(-1px); }
.lp-header__cta .arrow { transition: transform 0.2s var(--ease); }
.lp-header__cta:hover .arrow { transform: translateX(2px); }

/* ────────── LP: HERO ────────── */
.lp-hero {
  min-height: 95svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--s-6) var(--s-5) calc(var(--s-6) * 1.5);
  max-width: 1100px;
  margin: 0 auto;
}
.lp-hero__eyebrow {
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: var(--s-5);
}
.lp-hero__eyebrow .dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--pomelo);
  margin-right: 8px;
  vertical-align: middle;
}
.lp-hero__title {
  font-family: var(--font);
  font-weight: 700;
  font-size: clamp(36px, 6.4vw, 84px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  margin: 0 0 var(--s-5);
  color: var(--ink);
  max-width: 22ch;
  overflow-wrap: anywhere;
}
.lp-hero__title em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  color: var(--pomelo-deep);
}
.lp-hero__sub {
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.5;
  color: var(--ink-mute);
  max-width: 52ch;
  margin: 0 0 var(--s-6);
}
.lp-hero__cta-row {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
  justify-content: center;
}
.lp-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: var(--r-pill);
  font-weight: 500;
  font-size: 16px;
  text-decoration: none;
  transition: transform 0.2s var(--spring), box-shadow 0.2s var(--ease),
              background 0.2s var(--ease);
  border: none;
  cursor: pointer;
}
.lp-cta--primary {
  background: var(--ink);
  color: var(--surface);
  box-shadow: var(--lift);
}
.lp-cta--primary:hover {
  background: #1a1a1a;
  box-shadow: var(--lift-hover);
  transform: translateY(-1px);
}
.lp-cta--ghost {
  background: transparent;
  color: var(--ink);
}
.lp-cta--ghost:hover { color: var(--pomelo-deep); }
.lp-cta .arrow { transition: transform 0.2s var(--ease); }
.lp-cta:hover .arrow { transform: translateX(3px); }

/* ────────── LP: VALUE BAND (Fraunces italic pull quote) ────────── */
.lp-valueband {
  padding: calc(var(--s-6) * 2.4) var(--s-5);
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}
.lp-valueband__quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(26px, 3.6vw, 48px);
  line-height: 1.25;
  color: var(--ink);
  letter-spacing: -0.015em;
  max-width: 22ch;
  margin: 0 auto;
}
.lp-valueband__quote .accent { color: var(--pomelo-deep); }
.lp-valueband__quote .word {
  display: inline-block;
  opacity: 0.18;
  transition: opacity 0.4s var(--ease);
}
.lp-valueband.in-view .lp-valueband__quote .word { opacity: 1; }
.lp-valueband__quote .word:nth-child(1) { transition-delay: 0s; }
.lp-valueband__quote .word:nth-child(2) { transition-delay: 0.04s; }
.lp-valueband__quote .word:nth-child(3) { transition-delay: 0.08s; }
.lp-valueband__quote .word:nth-child(4) { transition-delay: 0.12s; }
.lp-valueband__quote .word:nth-child(5) { transition-delay: 0.16s; }
.lp-valueband__quote .word:nth-child(6) { transition-delay: 0.20s; }
.lp-valueband__quote .word:nth-child(7) { transition-delay: 0.24s; }
.lp-valueband__quote .word:nth-child(8) { transition-delay: 0.28s; }
.lp-valueband__quote .word:nth-child(9) { transition-delay: 0.32s; }
.lp-valueband__quote .word:nth-child(10) { transition-delay: 0.36s; }
.lp-valueband__quote .word:nth-child(11) { transition-delay: 0.40s; }
.lp-valueband__quote .word:nth-child(12) { transition-delay: 0.44s; }
.lp-valueband__quote .word:nth-child(13) { transition-delay: 0.48s; }
.lp-valueband__quote .word:nth-child(14) { transition-delay: 0.52s; }

/* ────────── LP: WHAT IT COSTS ────────── */
.lp-cost {
  max-width: 720px;
  margin: 0 auto;
  padding: calc(var(--s-6) * 1.6) var(--s-5);
  text-align: center;
}
.lp-cost__title {
  font-family: var(--font);
  font-weight: 600;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: var(--s-3) 0 var(--s-4);
}
.lp-cost__title em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  color: var(--pomelo-deep);
}
.lp-cost__body {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-mute);
  margin: 0;
  max-width: 56ch;
  margin-left: auto;
  margin-right: auto;
}
.lp-cost__closing {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 19px;
  line-height: 1.4;
  color: var(--ink);
  margin: var(--s-5) auto 0;
  max-width: 44ch;
}

/* ────────── LP: PRODUCT GRID (3-up) ────────── */
.lp-section {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--s-6) var(--s-5);
}
.lp-section__head {
  /* These are <header> elements, so the generic `header` rule (sticky flex)
     applies unless we reset it here. Without this they stick to the top and
     collapse into overlapping columns on scroll. */
  display: block;
  position: static;
  text-align: center;
  margin-bottom: var(--s-6);
}
.lp-section__eyebrow {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: var(--s-3);
}
.lp-section__title {
  font-family: var(--font);
  font-weight: 600;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0;
}
.lp-section__lead {
  max-width: 56ch;
  margin: var(--s-3) auto 0;
  color: var(--ink-mute);
  font-size: 16px;
  line-height: 1.55;
}
/* Landing pages don't use the chat's narrow 640px main. */
.lp-main {
  max-width: none;
  padding: 0;
  display: block;
  min-height: 0;
}

.lp-product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
  align-items: stretch;
}
.lp-product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--surface-3);
  border-radius: var(--r-lg);
  box-shadow: var(--lift);
  transition: transform 0.24s var(--spring), box-shadow 0.24s var(--ease),
              border-color 0.24s var(--ease);
  min-height: 220px;
  text-decoration: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.lp-product-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--lift-hover);
}
/* Live card = same vertical shape as the others, marked by the green border. */
.lp-product-card--live {
  border-color: var(--pomelo);
  border-width: 1.5px;
}
.lp-product-card--live:hover { border-color: var(--pomelo-deep); }
.lp-product-card--live .lp-product-card__copy {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  flex: 1;
}
.lp-product-card--live .lp-product-card__go { color: var(--pomelo-deep); }
.lp-product-card--soon { opacity: 0.86; }
.lp-product-card__icon { width: 40px; height: 40px; }
.lp-product-card__title {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}
.lp-product-card__blurb {
  color: var(--ink-mute);
  font-size: 14.5px;
  line-height: 1.45;
  margin: 0;
  flex: 1;
  overflow-wrap: anywhere;
}
.lp-product-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--s-3);
}
.lp-product-card__go {
  font-size: 14.5px;
  font-weight: 500;
  white-space: nowrap;
}
.lp-product-card__go .arrow { transition: transform 0.2s var(--ease); }
.lp-product-card:hover .lp-product-card__go .arrow { transform: translateX(3px); }
.lp-product-card--live .lp-product-card__go { color: var(--pomelo-deep); }
/* Legacy top-right badge — kept for back-compat if any other page uses it.
   Soon cards now use .lp-product-card__pill in the foot instead. */
.lp-product-card__badge {
  position: absolute;
  top: var(--s-4);
  right: var(--s-4);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--ink-mute);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  white-space: nowrap;
}
.lp-product-card__badge::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ink-faint);
}

/* In-foot "Coming soon" pill, sits beside the action arrow.
   Replaces the top-right badge so they can't visually clash in narrow cards. */
.lp-product-card__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--ink-mute);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  white-space: nowrap;
}
.lp-product-card__pill::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ink-faint);
}
.lp-product-card__pill--live::before { background: var(--pomelo); }
.lp-product-card--soon .lp-product-card__go { color: var(--ink-mute); }

/* ────────── LP: WHITE-GLOVE PROOF ────────── */
.lp-whiteglove {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-6);
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
  padding: calc(var(--s-6) * 1.4) var(--s-5);
}
.lp-whiteglove__copy { max-width: 36ch; }
.lp-whiteglove__title {
  font-family: var(--font);
  font-weight: 600;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: var(--s-3) 0 var(--s-4);
}
.lp-whiteglove__title em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
}
.lp-whiteglove__body {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-mute);
  margin: 0 0 var(--s-4);
}
.lp-whiteglove__forthcoming {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-faint);
  margin: 0;
}
.lp-doc {
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--lift);
  padding: var(--s-5);
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--ink);
  position: relative;
  transform: translateY(40px);
  opacity: 0;
  transition: opacity 0.6s var(--ease), transform 0.6s var(--spring);
  transition-delay: 0.12s;
}
.lp-whiteglove.in-view .lp-doc { opacity: 1; transform: none; }
.lp-doc__corner {
  position: absolute;
  top: var(--s-3);
  right: var(--s-4);
  font-family: var(--font);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.lp-doc__title {
  font-family: var(--font);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 var(--s-3);
}
.lp-doc__line {
  margin: 4px 0;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.lp-doc__line .fld {
  color: var(--pomelo-deep);
  word-break: break-word;
  overflow-wrap: anywhere;
}
.lp-doc__sig {
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px dashed var(--surface-3);
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--ink-mute);
}

/* ────────── LP: FLOW CARDS (white-glove right column) ──────────
   Vertical stack of "checklist" cards. As .lp-whiteglove enters
   view (.in-view), each card fades up and its tick fills in lime
   with a drawing checkmark, staggered via --stagger per card. */
.lp-flow {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.lp-flow-card {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4);
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--lift);
  opacity: 0.45;
  transform: translateY(8px);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
  transition-delay: var(--stagger, 0s);
}
.lp-flow-card[data-flow-step="1"] { --stagger: 0s; }
.lp-flow-card[data-flow-step="2"] { --stagger: 0.22s; }
.lp-flow-card[data-flow-step="3"] { --stagger: 0.44s; }
.lp-flow-card[data-flow-step="4"] { --stagger: 0.66s; }
.lp-flow-card[data-flow-step="5"] { --stagger: 0.88s; }

.lp-whiteglove.in-view .lp-flow-card {
  opacity: 1;
  transform: none;
}

.lp-flow-card__tick {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}
.lp-flow-card__tick svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.lp-flow-card__tick-bg {
  fill: transparent;
  stroke: var(--ink-faint);
  stroke-width: 1.5;
  transition: fill 0.35s var(--ease), stroke 0.35s var(--ease);
  transition-delay: calc(var(--stagger, 0s) + 0.15s);
}
.lp-flow-card__tick-check {
  fill: none;
  stroke: var(--surface);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  transition: stroke-dashoffset 0.4s var(--ease);
  transition-delay: calc(var(--stagger, 0s) + 0.3s);
}
.lp-whiteglove.in-view .lp-flow-card__tick-bg {
  fill: var(--pomelo);
  stroke: var(--pomelo);
}
.lp-whiteglove.in-view .lp-flow-card__tick-check {
  stroke-dashoffset: 0;
}

.lp-flow-card__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.lp-flow-card__title {
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
}
.lp-flow-card__sub {
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-mute);
  margin: 0;
}

/* ────────── LP: HOW IT WORKS ────────── */
.lp-how__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
}
.lp-step {
  padding: var(--s-5) 0;
  border-top: 1px solid var(--surface-3);
}
.lp-step__num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 44px;
  color: var(--pomelo-deep);
  line-height: 1;
  margin-bottom: var(--s-3);
}
.lp-step__title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 var(--s-2);
}
.lp-step__body {
  color: var(--ink-mute);
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
}

/* ────────── LP: FAQ ────────── */
.lp-faq__list { max-width: 720px; margin: 0 auto; }
.lp-faq__item {
  border-top: 1px solid var(--surface-3);
  padding: 0;
}
.lp-faq__item:last-of-type { border-bottom: 1px solid var(--surface-3); }
.lp-faq__item > summary {
  list-style: none;
  cursor: pointer;
  padding: var(--s-4) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.lp-faq__item > summary::-webkit-details-marker { display: none; }
.lp-faq__item > summary::after {
  content: "+";
  font-size: 22px;
  color: var(--ink-faint);
  font-weight: 300;
  transition: transform 0.2s var(--ease), color 0.2s var(--ease);
}
.lp-faq__item[open] > summary::after {
  content: "−";
  color: var(--pomelo-deep);
}
.lp-faq__body {
  padding: 0 0 var(--s-4);
  color: var(--ink-mute);
  font-size: 15.5px;
  line-height: 1.6;
  max-width: 60ch;
}

/* ────────── LP: FOOTER ────────── */
.lp-footer {
  margin: var(--s-6) auto 0;
  padding: var(--s-5);
  border-top: 1px solid var(--surface-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  text-align: center;
  font-size: 13px;
  color: var(--ink-faint);
  max-width: 1100px;
}
.lp-footer nav {
  display: flex;
  gap: var(--s-4);
  flex-wrap: wrap;
  justify-content: center;
}
.lp-footer a { color: var(--ink-mute); text-decoration: none; }
.lp-footer a:hover { color: var(--ink); }
.lp-footer__legal {
  max-width: 60ch;
  line-height: 1.5;
}

/* ────────── LP: WAITLIST DIALOG ────────── */
.lp-modal {
  border: none;
  border-radius: var(--r-lg);
  padding: 0;
  background: var(--surface);
  box-shadow: var(--lift-hover);
  width: min(440px, calc(100vw - 32px));
  color: var(--ink);
}
.lp-modal::backdrop { background: rgba(10, 10, 10, 0.6); }
.lp-modal__inner { padding: var(--s-5); }
.lp-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}
.lp-modal__title {
  font-family: var(--font);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0;
}
.lp-modal__close {
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--ink-faint);
  padding: 4px;
}
.lp-modal__close:hover { color: var(--ink); }
.lp-modal__sub {
  color: var(--ink-mute);
  font-size: 14.5px;
  line-height: 1.5;
  margin: 0 0 var(--s-4);
}
.lp-modal__form { display: flex; flex-direction: column; gap: var(--s-3); }
.lp-modal__input {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--r);
  border: 1px solid var(--surface-3);
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--surface);
  transition: border-color 0.2s var(--ease);
}
.lp-modal__input:focus {
  outline: none;
  border-color: var(--pomelo);
}
.lp-modal__field {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
.lp-modal__label {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-mute);
}
textarea.lp-modal__input {
  resize: vertical;
  min-height: 72px;
  font-family: var(--font);
}
select.lp-modal__input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236B6B6B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
.lp-modal__error {
  color: var(--err);
  font-size: 13px;
  margin: 0;
  min-height: 16px;
}
.lp-modal__success {
  padding: var(--s-5) var(--s-3);
  text-align: center;
  color: var(--ink);
}
.lp-modal__success-tick {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--pomelo);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--surface);
  font-weight: 600;
  margin-bottom: var(--s-3);
}

/* ────────── LP: RESPONSIVE ────────── */
@media (max-width: 860px) {
  .lp-product-grid { grid-template-columns: 1fr; }
  .lp-whiteglove { grid-template-columns: 1fr; gap: var(--s-5); }
  .lp-how__steps { grid-template-columns: 1fr; }
  .lp-step { border-top: 1px solid var(--surface-3); }
}
@media (max-width: 540px) {
  .lp-header { padding: var(--s-3) var(--s-4); }
  .lp-header__cta { padding: 8px 12px; font-size: 13px; }
  .lp-hero { padding-top: var(--s-5); }
  .lp-section { padding: var(--s-5) var(--s-4); }
  .lp-whiteglove { padding: var(--s-5) var(--s-4); }
  .lp-doc { padding: var(--s-4); }
  .lp-valueband { padding: calc(var(--s-6) * 1.4) var(--s-4); }
}

/* ────────── REDUCED MOTION ────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .lp-valueband__quote .word { opacity: 1; }
  .lp-doc { opacity: 1; transform: none; }
  .lp-product-card:hover { transform: none; }
  .lp-flow-card { opacity: 1; transform: none; }
  .lp-flow-card__tick-bg { fill: var(--pomelo); stroke: var(--pomelo); }
  .lp-flow-card__tick-check { stroke-dashoffset: 0; }
}

/* ═══════════════════════════════════════════════════════════════════
   LP: DEMO CHAT — a short, self-playing conversation in the app's own
   bubble language. Reveals when scrolled into view (container carries
   `.reveal`; landing.js toggles `.in-view`), bubbles stagger in.
   ═══════════════════════════════════════════════════════════════════ */
.lp-demo {
  max-width: 440px;
  margin: 0 auto;
  background: var(--surface-2);
  border-radius: var(--r-lg);
  padding: var(--s-5) var(--s-4);
  display: flex; flex-direction: column; gap: var(--s-3);
  box-shadow: var(--lift);
}
.lp-demo__bubble {
  max-width: 84%;
  padding: 11px 15px;
  border-radius: var(--r-lg);
  font-size: 14.5px; line-height: 1.45;
  opacity: 0; transform: translateY(8px);
  transition: opacity .4s var(--ease), transform .45s var(--spring);
}
.lp-demo.in-view .lp-demo__bubble { opacity: 1; transform: none; }
.lp-demo__bubble--user {
  align-self: flex-end; background: var(--pomelo); color: var(--ink); font-weight: 500;
}
.lp-demo__bubble--bot {
  align-self: flex-start; background: var(--surface); color: var(--ink); box-shadow: var(--lift);
}
.lp-demo__bubble[data-d="1"] { transition-delay: .15s; }
.lp-demo__bubble[data-d="2"] { transition-delay: .70s; }
.lp-demo__bubble[data-d="3"] { transition-delay: 1.30s; }
.lp-demo__bubble[data-d="4"] { transition-delay: 1.90s; }
.lp-demo__foot {
  text-align: center;
  font-size: 13px; color: var(--ink-mute);
  margin: var(--s-4) auto 0;
  max-width: 38ch;
}
@media (prefers-reduced-motion: reduce) {
  .lp-demo__bubble { opacity: 1; transform: none; }
}

/* ────────── LP: FUNNEL SHORTCUTS ──────────
   Marketing CTAs that mutate state (start a submission) are real POST
   forms. `display: contents` removes the form from layout so the button
   sits in grids and CTA rows exactly like the anchor it replaced. */
.lp-start-form { display: contents; }
button.lp-header__cta,
button.lp-cta { font-family: inherit; line-height: inherit; }
button.lp-header__cta { border: 0; cursor: pointer; }
.lp-header__actions { display: flex; align-items: center; gap: var(--s-4); }
.lp-header__signin {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-mute);
  text-decoration: none;
}
.lp-header__signin:hover { color: var(--pomelo-deep); }

/* Compact hero: the product grid and proof sections sit one small scroll
   away instead of below a full-viewport brand moment. */
.lp-hero--compact {
  min-height: 0;
  padding-top: calc(var(--s-6) * 1.6);
  padding-bottom: calc(var(--s-6) * 1.2);
}

.lp-whiteglove__forthcoming a {
  color: var(--pomelo-deep);
  text-decoration: none;
  font-weight: 500;
}
.lp-whiteglove__forthcoming a:hover { text-decoration: underline; }

/* ────────── WELCOME / PICKER (chat shell) ────────── */
.welcome-actions { display: flex; flex-direction: column; gap: var(--s-3); }
.welcome-actions form { margin: 0; }
.picker-soon {
  margin: 0;
  padding: 0 var(--s-1);
  font-size: 13.5px;
  color: var(--ink-faint);
}
@media (max-width: 540px) {
  .lp-header__actions { gap: var(--s-3); }
  .lp-header__signin { font-size: 13px; }
}

/* ────────── CLAIMS — sending pack + tracker ────────── */
/* The pack reuses the renewal-plan hub row language; these are only the
   claims-specific pieces: the 21-day clock, the payout estimate, the
   check-off document rows, and the postal fallback note. */
.claim-clock {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid #F0D8A0; background: #FFFDF5;
  border-radius: var(--r); padding: 10px 13px; margin: 8px 0;
}
.claim-clock-days {
  font-family: var(--font-display); font-size: 22px; font-weight: 600;
  color: #8A6D1A; line-height: 1;
}
.claim-clock-label { font-size: 12.5px; color: #8A6D1A; font-weight: 600; }
.claim-clock.is-past { border-color: var(--surface-3); background: var(--surface-2); }
.claim-clock.is-past .claim-clock-label { color: var(--ink-mute); }

.claim-estimate {
  border: 1px solid rgba(125, 209, 52, 0.35);
  background: rgba(125, 209, 52, 0.07);
  border-radius: var(--r); padding: 12px 13px; margin: 8px 0;
  font-size: 14px;
}
.claim-estimate b { font-family: var(--font-display); font-size: 17px; font-weight: 600; }
.claim-estimate-note { display: block; margin-top: 4px; font-size: 12px; color: var(--ink-mute); }

a.hub-row { text-decoration: none; color: inherit; margin: 8px 0; }
.claim-doc-row { padding: 9px 13px; }
.claim-doc-row .hub-row-go { font-size: 15px; color: var(--ink-faint); }
.claim-doc-row.is-done .hub-row-go { color: var(--pomelo-deep); }
.claim-doc-row.is-done .hub-row-label { color: var(--ink-mute); }

.claim-post-note {
  font-size: 12.5px; color: var(--ink-mute);
  padding: 4px 2px 8px;
}

.ms-flow-tag {
  display: inline-block; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--pomelo-deep); background: rgba(125, 209, 52, 0.12);
  border-radius: 99px; padding: 2px 8px; margin-right: 6px;
  vertical-align: 2px;
}

/* ────────── START CHOOSER: product links as chips ──────────
   The /start chooser mixes button chips (helper, live) with anchor chips
   (travel, car → their marketing pages). Anchors need the underline
   stripped; everything else comes from .chip. */
a.chip { text-decoration: none; }

/* Header right cluster: optional "All products" link + sign out share one
   flex group (the old lone logout form grew a sibling when the conversation
   moved to /renewal and needed a way back to the chooser). */
header .logout { display: flex; align-items: center; gap: 2px; }
header .logout form { margin: 0; }
a.logout-btn { text-decoration: none; }


/* Living date hints: quiet line under a date field that answers back
   (age under a birth date, trip length under the return date). */
.date-hint {
  font: 400 12.5px/1.4 var(--font);
  color: var(--ink-mute);
  margin: 4px 2px 0;
}
.date-hint--ok { color: var(--pomelo-deep); font-weight: 600; }

/* OCR read-back: "here's what I read" — destination / dates / travellers */
.ocr-readback { margin-top: 8px; padding: 10px 12px; background: var(--surface-2);
  border-radius: var(--r); }
.ocr-readback .rb-head { font: 600 12.5px/1.4 var(--font); color: var(--ink-mute); margin-bottom: 4px; }
.ocr-readback .rb-row { display: flex; justify-content: space-between; gap: 12px;
  font: 500 14px/1.5 var(--font); }
.ocr-readback .rb-k { color: var(--ink-mute); }
.ocr-readback .rb-v { color: var(--ink); font-weight: 600; text-align: right; }

/* Policy Q&A chat (My policies → Ask about your cover) */
.ms-ask { margin-top: var(--s-3); }
.ms-ask-title { font: 600 14px/1.4 var(--font); color: var(--ink); margin-bottom: 8px; }
.qa-thread { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.qa-thread:empty { margin-bottom: 0; }
.qa-msg { padding: 10px 14px; border-radius: var(--r); font: 400 14px/1.5 var(--font); max-width: 90%; }
.qa-user { align-self: flex-end; background: var(--pomelo); color: var(--ink); font-weight: 600; }
.qa-bot { align-self: flex-start; background: var(--surface-2); color: var(--ink); }
.qa-bot .qa-caveat, .bubble .qa-caveat { display: block; margin-top: 6px; color: var(--ink-mute); font-size: 13px; }
.qa-bot .qa-src, .bubble .qa-src { display: block; margin-top: 8px; color: var(--ink-faint); font-size: 12px; }

/* Plan-comparison table (grounded benefits matrix). Wide content scrolls
   inside its own container; the bubble never scrolls horizontally. */
.qa-table-wrap { overflow-x: auto; margin-top: var(--s-3); }
.qa-table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.qa-table th, .qa-table td {
  text-align: left; padding: 7px 10px;
  border-bottom: 1px solid var(--surface-3);
  vertical-align: top;
}
.qa-table th { font-weight: 600; color: var(--ink-mute); font-size: 12.5px; }
.qa-table td:first-child { color: var(--ink-mute); }
.qa-table td:not(:first-child) { font-weight: 500; white-space: nowrap; }
details.qa-more { margin-top: var(--s-2); }
details.qa-more > summary {
  cursor: pointer; list-style: none;
  color: var(--pomelo-deep); font-weight: 600; font-size: 13px;
}
details.qa-more > summary::-webkit-details-marker { display: none; }

/* Verbatim wording quote — the policy's own words, visually a citation. */
.qa-quote {
  margin: var(--s-3) 0 0;
  padding: 10px 14px;
  border-left: 3px solid var(--pomelo);
  background: var(--surface-2);
  border-radius: 0 var(--r) var(--r) 0;
  font-size: 13.5px; color: var(--ink-mute);
}
.qa-quote cite {
  display: block; margin-top: 6px;
  font-style: normal; font-size: 12px; color: var(--ink-faint);
}
.qa-form { display: flex; gap: 8px; }
.qa-input { flex: 1; min-height: 44px; padding: 11px 14px; border: 1px solid var(--surface-3);
  border-radius: var(--r); font: 400 16px/1.3 var(--font); background: var(--surface); }
.qa-input:focus { outline: none; border-color: var(--brand-dark);
  box-shadow: 0 0 0 3px rgba(125,209,52,.22); }
.qa-send { flex: 0 0 auto; }
.qa-starters { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.qa-starter { border: 1px solid var(--surface-3); background: var(--surface); border-radius: 999px;
  padding: 6px 12px; font: 500 12.5px/1.3 var(--font); color: var(--ink-mute); cursor: pointer; }
.qa-starter:hover { border-color: var(--brand-dark); color: var(--ink); }

/* My policies: chat hero (top of funnel) + grouped policy sections */
.ms-ask-hero {
  margin: 8px 0 24px; padding: 20px; border-radius: 16px;
  background: rgba(125, 209, 52, 0.10); box-shadow: var(--lift);
}
.ms-ask-heading { font-family: var(--font-display); font-size: 24px; line-height: 1.2;
  color: var(--ink); margin: 0 0 6px; }
.ms-ask-lede { font: 400 14px/1.5 var(--font); color: var(--ink-mute); margin: 0 0 14px; }
.ms-ask-hero .qa-form { margin-bottom: 0; }
.ms-ask-hero .qa-thread { margin-top: 12px; }
.ms-pol-group { margin-top: 16px; }
.ms-group-label { font: 600 13px/1.4 var(--font); text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--ink-faint); margin: 0 0 8px; }

/* Travel plan picker: retrieving-prices state (shown before options appear) */
.price-loading { display: flex; align-items: center; gap: 10px; padding: 14px 16px;
  background: var(--surface-2); border-radius: var(--r); font: 500 14px/1.4 var(--font);
  color: var(--ink-mute); }

/* People on file (my-policies): the one PII surface on the page. Rows are
   flat bordered cards; actions are quiet chips on the right. */
.people-row { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 16px; background: var(--surface);
  border: 1px solid var(--surface-3); border-radius: 10px; margin-bottom: 8px; }
.people-main b { font-weight: 600; }
.people-rel { font-size: 12px; color: var(--ink-mute); margin-left: 6px; }
.people-meta { font-size: 13px; color: var(--ink-mute); margin-top: 2px; }
.people-actions { display: flex; gap: 8px; flex-shrink: 0; }
.people-actions .chip { width: auto; min-height: 36px; padding: 6px 14px; font-size: 13px; }
.people-edit { background: var(--surface); border: 1px solid var(--surface-3);
  border-radius: var(--r-lg); padding: 16px; }

/* ────────── GEO BANNER (non-SG visitors) + PDPA CONSENT ────────── */
/* Calm, informational top strip — never the red error treatment. */
.geo-banner {
  background: var(--surface-2);
  color: var(--ink-mute);
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
  padding: 8px 16px;
  border-bottom: 1px solid var(--surface-3);
}
/* Consent checkbox that gates Start. Left-aligned, quiet, with the full
   data-use notice one tap away behind a disclosure. */
.consent-check { margin: var(--s-3) 0; text-align: left; }
.consent-check__row {
  display: flex; gap: var(--s-2); align-items: flex-start;
  font-size: 13px; color: var(--ink); cursor: pointer;
}
.consent-check__row input[type="checkbox"] {
  width: 18px; height: 18px; margin: 1px 0 0; flex: 0 0 auto;
  accent-color: var(--pomelo); cursor: pointer;
}
.consent-check__more { margin-top: 4px; }
.consent-check__more summary {
  font-size: 12.5px; color: var(--pomelo-deep); cursor: pointer;
}
.consent-check__more p {
  margin: 6px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-mute);
}

/* Consent screen — the single PDPA gate all products pass through. */
.consent-page {
  min-height: 70vh; display: flex; align-items: center; justify-content: center;
  padding: 24px 16px;
}
.consent-card {
  width: 100%; max-width: 460px;
  background: var(--surface); border-radius: var(--r-lg);
  box-shadow: var(--lift); padding: 24px;
}
.consent-card__title { font-family: var(--font-display); font-size: 22px; margin: 0 0 12px; color: var(--ink); }
.consent-card__body { font-size: 14px; line-height: 1.6; color: var(--ink-mute); margin: 0 0 16px; }
.consent-card__err { color: var(--err); font-size: 13px; margin: 0 0 12px; }
.consent-card__cta { width: 100%; margin-top: 16px; }
.consent-card__back {
  display: block; text-align: center; margin-top: 12px;
  font-size: 13px; color: var(--ink-mute);
}