/* ============ Flannable v1 — mesh ============ */

:root {
  --bg: #fbfcff;
  --wash: #f3f4fc;
  --ink: #12141c;
  --body: rgba(18, 20, 28, 0.68);
  --faint: rgba(18, 20, 28, 0.48);

  /* brand */
  --brand: #5b46d6;
  --brand-deep: #4736b0;

  /* the mesh — four stops. used together only as atmosphere,
     never all at once inside a component. */
  --iris: #7c66ff;
  --aqua: #42c4f5;
  --jade: #50deb4;
  --peach: #ffa478;

  /* semantic — deliberately not brand hues, so "covered / not covered"
     never reads as decoration */
  --ok: #1e8a5a;
  --ok-deep: #146845;
  --warn: #9a6b12;
  --err: #b0463c;
  --err-deep: #8a352d;

  --stroke: rgba(18, 20, 28, 0.11);
  --card-shadow: 0 14px 40px -22px rgba(30, 20, 90, 0.22);
  --r: 18px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: "Instrument Sans", sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.65;
  overflow-x: hidden;
}

/* ══════════ THE MESH ══════════
   Four blurred blobs bleeding down from the top and dissolving into the page.
   Fixed + blurred is GPU-cheap because it never repaints — the blur is
   rasterised once. The ::after fade is what stops it competing with body copy;
   without it the headline sits on colour and legibility drops outdoors. */
.atmo {
  position: fixed; inset: 0; z-index: -1;
  background: var(--bg);
  overflow: hidden;
}
.atmo::before {
  content: ""; position: absolute;
  left: -8%; right: -8%; top: -14%; height: 780px;
  background:
    radial-gradient(340px 300px at 14% 18%, rgba(124, 102, 255, 0.55), transparent 66%),
    radial-gradient(380px 320px at 46% 4%,  rgba(66, 196, 245, 0.50), transparent 64%),
    radial-gradient(360px 300px at 76% 22%, rgba(80, 222, 180, 0.48), transparent 66%),
    radial-gradient(300px 280px at 96% 2%,  rgba(255, 164, 120, 0.45), transparent 64%);
  filter: blur(38px);
  /* fade out on its own bottom edge. Without this the blur ends on a hard
     boundary and leaves a visible seam across the hero. */
  mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 100%);
}
.atmo::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 820px;
  background: linear-gradient(180deg,
    rgba(251, 252, 255, 0) 38%,
    rgba(251, 252, 255, 0.86) 76%,
    var(--bg) 100%);
}
/* inner pages get a quieter mesh — the hero already spent the colour */
.atmo.calm::before { height: 460px; opacity: 0.6; }
.atmo.calm::after { height: 520px; }

/* Narrow viewports: the blobs are absolutely sized, so on a phone they overlap
   and the headline ends up sitting on saturated colour — the exact thing this
   direction was chosen to avoid. Pull them back and blur harder. */
@media (max-width: 700px) {
  .atmo::before { height: 520px; opacity: 0.5; filter: blur(52px); }
  .atmo::after { height: 560px; }
  .atmo.calm::before { height: 380px; opacity: 0.34; }
  .atmo.calm::after { height: 420px; }
}

h1, h2, h3 { font-family: "Bricolage Grotesque", sans-serif; line-height: 1.04; letter-spacing: -0.02em; color: var(--ink); }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 28px; }

/* ---------- nav ---------- */
header.wrap { position: relative; z-index: 210; }   /* stays above the mobile menu overlay */
nav { display: flex; align-items: center; justify-content: space-between; padding: 24px 0; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.wordmark {
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 700;
  font-size: 1.35rem; letter-spacing: -0.03em;
}
/* The mark: a rounded tile carrying a slice of the mesh. It is the only place
   the four stops appear inside a component, which is what makes it read as a
   logo rather than decoration. */
/* Stops are weighted toward the indigo end on purpose. An even four-stop ramp
   renders as a blue-green blob at 26px — the brand hue disappears from its own
   logo. Holding brand/iris through the first 22% keeps it legible at nav size. */
.mark {
  width: 26px; height: 26px; border-radius: 8px; flex: none; display: block;
  background: linear-gradient(140deg,
    var(--brand) 0%, var(--iris) 22%, var(--aqua) 58%, var(--jade) 85%, var(--peach) 100%);
  box-shadow: 0 4px 12px -4px rgba(91, 70, 214, 0.5);
}
.mark.lg { width: 46px; height: 46px; border-radius: 13px; }
.mark.sm { width: 19px; height: 19px; border-radius: 6px; }
.chip {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--brand-deep);
  border: 1px solid rgba(91, 70, 214,0.35);
  padding: 8px 16px; border-radius: 99px;
  background: rgba(124, 102, 255,0.10);
}
.chip b { color: var(--iris); animation: blink 2.2s ease-in-out infinite; }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }

/* ---------- hero ---------- */
.hero { padding-block: 78px 26px; }
.kicker {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--brand); margin-bottom: 20px;
}
.hero h1 { font-size: clamp(3rem, 8vw, 6rem); font-weight: 700; max-width: 11ch; }
.hero h1 .accent, .accent {
  background: linear-gradient(92deg, var(--brand) 5%, var(--iris) 80%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero .sub { margin-top: 24px; font-size: 1.15rem; color: var(--body); max-width: 54ch; }
.hero .sub strong { color: var(--ink); font-weight: 700; }

/* waitlist bar */
.wl { margin-top: 36px; max-width: 640px; }
.wl-row {
  display: flex; gap: 10px; flex-wrap: wrap;
  background: #fff;
  border: 1px solid var(--stroke);
  border-radius: 16px;
  padding: 10px;
  box-shadow: var(--card-shadow);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.wl-row:focus-within { border-color: rgba(91, 70, 214,0.5); box-shadow: 0 0 0 4px rgba(124, 102, 255,0.14), var(--card-shadow); }
.wl input, .wl select {
  font: inherit; color: var(--ink);
  background: transparent; border: 0; outline: none;
  padding: 12px 14px; flex: 1; min-width: 150px;
}
.wl select { color: var(--faint); }
.wl input::placeholder { color: var(--faint); }
.btn {
  font: inherit; font-weight: 700; cursor: pointer;
  background: var(--brand); color: #fff;
  border: 0; border-radius: 12px;
  padding: 13px 26px;
  white-space: nowrap;
  transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
  box-shadow: 0 10px 26px -12px rgba(91, 70, 214, 0.55);
}
.btn:hover { background: var(--brand-deep); transform: translateY(-2px); box-shadow: 0 16px 34px -12px rgba(91, 70, 214,0.6); }
.btn:active { transform: translateY(0); }
.fineprint { margin-top: 12px; font-size: 0.8rem; color: var(--faint); }
.joined {
  display: inline-block; margin-bottom: 14px;
  color: var(--brand-deep); font-weight: 700;
  border: 1px solid rgba(91, 70, 214,0.35); border-radius: 12px;
  background: rgba(124, 102, 255,0.12);
  padding: 10px 16px;
}

/* ---------- hero quote card ----------
   The exclusions row is the point of this component: price and exclusions in
   one card, so the promise is structural rather than a claim in the copy. */
.qcard {
  background: #fff; border: 1px solid var(--stroke); border-radius: 16px;
  overflow: hidden; width: 100%; max-width: 340px;
  box-shadow: 0 34px 70px -30px rgba(30, 20, 90, 0.4), 0 2px 8px rgba(30, 20, 90, 0.07);
}
.qcard-top { padding: 18px 20px; border-bottom: 1px solid var(--stroke); }
.qcard-cap {
  font-size: 0.65rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 5px;
}
.qcard-head {
  font-family: "Bricolage Grotesque", sans-serif; font-size: 1.15rem; font-weight: 700;
  letter-spacing: -0.02em; color: var(--ink); line-height: 1.1;
}
.qcard-body { padding: 6px 20px 14px; }
.qcard-sect {
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--faint); margin: 12px 0 2px;
}
.qcard-sect:first-child { margin-top: 4px; }
.qcard-row .ok { color: var(--ok); }
.qcard-row .no { color: var(--err-deep); font-weight: 600; }
.qcard-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  font-size: 0.83rem; padding: 9px 0; border-bottom: 1px solid var(--stroke);
  font-variant-numeric: tabular-nums;
}
.qcard-row:last-child { border-bottom: 0; }
.qcard-row span:first-child { color: var(--faint); }
.qcard-row span:last-child { font-weight: 700; color: var(--ink); }
.qcard-pill {
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase;
  background: rgba(124, 102, 255, 0.13); color: var(--brand-deep);
  padding: 4px 9px; border-radius: 99px; white-space: nowrap;
}

/* ---------- ticker ---------- */
.ticker { background: var(--wash); border-block: 1px solid var(--stroke); overflow: hidden; padding: 13px 0; margin-top: 64px; }
.ticker-track {
  display: flex; gap: 3rem; width: max-content;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(18, 20, 28,0.55);
  animation: slide 30s linear infinite;
}
.ticker-track span::after { content: "/"; margin-left: 3rem; color: var(--iris); }
@keyframes slide { to { transform: translateX(-50%); } }

/* ---------- bento ---------- */
.bento { padding-block: 86px 20px; }
.bento h2 { font-size: clamp(2rem, 4.4vw, 3rem); max-width: 20ch; }
.bento .lede { color: var(--body); margin-top: 14px; max-width: 52ch; }
.grid {
  display: grid; gap: 18px; margin-top: 42px;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(190px, auto);
}
.cell {
  background: #fff;
  border: 1px solid var(--stroke);
  border-radius: var(--r);
  padding: 28px;
  box-shadow: var(--card-shadow);
  position: relative; overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.cell:hover { transform: translateY(-4px); border-color: rgba(91, 70, 214,0.4); }
.cell h3 { font-size: 1.28rem; margin-bottom: 10px; }
.cell p { color: var(--body); font-size: 0.97rem; }
.cell .tag {
  font-size: 0.67rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--brand); display: block; margin-bottom: 14px;
}
.cell.big { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; justify-content: space-between; }

/* mock COI card */
.coi {
  margin-top: 26px;
  background: #fff;
  border: 1px solid var(--stroke);
  border-left: 4px solid var(--iris);
  border-radius: 14px;
  padding: 18px 20px;
  font-size: 0.85rem;
  max-width: 430px;
  box-shadow: 0 24px 60px -28px rgba(18, 20, 28,0.35);
  animation: floaty 6s ease-in-out infinite;
}
@keyframes floaty { 0%,100% { transform: translateY(0);} 50% { transform: translateY(-7px);} }
.coi-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; gap: 10px; }
.coi-head b { font-family: "Bricolage Grotesque", sans-serif; }
.pill {
  font-size: 0.65rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink); background: var(--aqua);
  border-radius: 99px; padding: 4px 10px; white-space: nowrap;
}
.coi-row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px dashed var(--stroke); color: var(--body); }
.coi-row b { color: var(--ink); font-weight: 700; }
.stat { font-family: "Bricolage Grotesque", sans-serif; font-size: 2.7rem; font-weight: 700; color: var(--brand); line-height: 1; }

/* ---------- anchor quote: the one dark block on a light site ---------- */
.anchor { margin: 100px auto 0; padding-inline: 28px; }
.anchor-inner {
  position: relative; overflow: hidden;
  background: linear-gradient(142deg, #1b1548 0%, #3a2a96 52%, #2f3f9e 100%);
  border-radius: 24px;
  padding: 72px 40px;
  text-align: center;
  color: #f2f1fb;
  box-shadow: 0 40px 90px -40px rgba(30, 20, 90, 0.6);
}
/* the mesh again, inverted — same four stops, dark ground */
.anchor-inner::before {
  content: ""; position: absolute; inset: -30% -10% auto -10%; height: 340px;
  background:
    radial-gradient(260px 200px at 18% 30%, rgba(124, 102, 255, 0.55), transparent 68%),
    radial-gradient(240px 200px at 54% 10%, rgba(66, 196, 245, 0.40), transparent 66%),
    radial-gradient(220px 190px at 86% 34%, rgba(80, 222, 180, 0.32), transparent 66%);
  filter: blur(44px); pointer-events: none;
}
.anchor-inner > * { position: relative; z-index: 1; }
.anchor .mark { margin: 0 auto 24px; }
.anchor blockquote {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: clamp(1.7rem, 4.2vw, 2.8rem);
  font-weight: 600; line-height: 1.15; letter-spacing: -0.02em;
  max-width: 22ch; margin: 0 auto; color: #f2f1fb;
}
.anchor blockquote em {
  font-style: normal;
  background: linear-gradient(92deg, var(--aqua), var(--jade));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.anchor p { margin-top: 16px; color: rgba(242, 241, 251, 0.7); }

/* ---------- florida + faq ---------- */
.florida { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; padding-block: 96px; align-items: start; }
.florida h2 { font-size: clamp(1.9rem, 4vw, 2.7rem); }
.florida .accentbar {
  width: 74px; height: 5px; border-radius: 99px; margin-bottom: 22px;
  background: linear-gradient(90deg, #ffa478, var(--iris));
}
.florida p { color: var(--body); margin-top: 14px; }
.faq h2 {
  font-size: 0.85rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--brand); margin-bottom: 18px;
  font-family: "Instrument Sans", sans-serif; font-weight: 800;
}
details {
  border: 1px solid var(--stroke); border-radius: 14px;
  background: #fff;
  padding: 16px 20px; margin-bottom: 12px;
  box-shadow: 0 8px 24px -18px rgba(18, 20, 28,0.25);
  transition: border-color 0.2s ease;
}
details[open] { border-color: rgba(91, 70, 214,0.45); }
summary { font-weight: 700; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
summary::after { content: "+"; color: var(--brand); font-size: 1.25rem; font-weight: 400; }
details[open] summary::after { content: "–"; }
details p { margin-top: 10px; color: var(--body); font-size: 0.95rem; }

/* ---------- footer ---------- */
footer { border-top: 1px solid var(--stroke); background: var(--wash); padding: 38px 0 48px; font-size: 0.82rem; color: var(--faint); }
footer .brand { margin-bottom: 14px; }
footer a { color: var(--body); }

/* ---------- article / guides ---------- */
.article { max-width: 760px; }
.nav-link { text-decoration: none; font-weight: 600; color: var(--brand-deep); font-size: 0.92rem; }
.nav-link:hover { color: var(--brand); }
@media (max-width: 700px) { .nav-link { display: none; } }
.crumbs { display: block; font-size: 0.82rem; color: var(--faint); padding: 10px 0 26px; }
.crumbs a { color: var(--brand-deep); text-decoration: none; }
.article h1 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 10px; }
.byline { color: var(--faint); font-size: 0.85rem; margin-bottom: 26px; }
.article article h2 { font-size: 1.5rem; margin: 36px 0 12px; }
.article article p { color: var(--body); margin: 14px 0; }
.article article ul, .article article ol { margin: 14px 0 14px 22px; color: var(--body); }
.article article li { margin: 6px 0; }
.article article strong { color: var(--ink); }
.article article table {
  width: 100%; border-collapse: collapse; font-size: 0.92rem; margin: 18px 0;
  background: #fff; border: 1px solid var(--stroke); border-radius: 12px; overflow: hidden;
}
.article article th { text-align: left; background: var(--wash); padding: 10px 12px; }
.article article td { padding: 10px 12px; border-top: 1px solid var(--stroke); color: var(--body); }
.guide-cta {
  margin-top: 50px; background: var(--wash);
  border: 1px solid var(--stroke); border-radius: var(--r); padding: 28px;
}
.guide-cta h3 { margin-bottom: 8px; }
.guide-cta p { color: var(--body); margin-bottom: 16px; }

/* ---------- reveal (JS-triggered on scroll; no-js shows instantly) ---------- */
.reveal { opacity: 0; transform: translateY(20px); }
.reveal.in { animation: rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }
html.no-js .reveal { opacity: 1; transform: none; }
.reveal.d1.in { animation-delay: 0.05s; } .reveal.d2.in { animation-delay: 0.16s; }
.reveal.d3.in { animation-delay: 0.28s; } .reveal.d4.in { animation-delay: 0.4s; }
@keyframes rise { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  .coi, .ticker-track { animation: none !important; }
  .atmo::before { transform: none !important; }
}

/* hero two-column */
.hero-grid { display: grid; grid-template-columns: 1.12fr 0.88fr; gap: 44px; align-items: center; }
.hero-stage { display: grid; place-items: center; min-height: 300px; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }
/* mobile: the hero belongs to the headline and the CTA */
@media (max-width: 900px) { .hero-stage { display: none; } }

/* ══════════ BRAND MOTION ══════════ */

/* Mesh drift — blobs follow the pointer by a few px. Transform only, so the
   blurred layer is never re-rasterised. JS sets --mx/--my. */
.atmo::before {
  transform: translate3d(var(--mx, 0), var(--my, 0), 0);
  transition: transform .9s cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: transform;
}

/* The Printout — COI assembles like a document printing */
.coi .coi-row, .coi .coi-head { opacity: 1; }
.coi.print .coi-head, .coi.print .coi-row { opacity: 0; transform: translateY(8px); animation: printrow .45s ease forwards; }
.coi.print .coi-head { animation-delay: .1s; }
.coi.print .coi-row:nth-of-type(2) { animation-delay: .35s; }
.coi.print .coi-row:nth-of-type(3) { animation-delay: .55s; }
.coi.print .coi-row:nth-of-type(4) { animation-delay: .75s; }
.coi.print .coi-row:nth-of-type(5) { animation-delay: .95s; }
.coi.print .pill { animation: sealstamp .5s cubic-bezier(0.2,0.9,0.3,1.4) 1.25s backwards; }
@keyframes printrow { to { opacity: 1; transform: none; } }

/* Reading progress — the mesh, stretched into a 4px bar */
.read-bar { position: fixed; top: 0; left: 0; height: 4px; width: 100%; z-index: 999; background: transparent; pointer-events: none; }
.read-bar i {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--iris) 0%, var(--aqua) 42%, var(--jade) 74%, var(--peach) 100%);
  transition: width .1s linear;
}

/* Elevated honesty — the not-covered column rises on hover */
.honest .h-col.no { transition: transform .25s ease, box-shadow .25s ease; }
.honest:hover .h-col.no { transform: translateY(-4px); box-shadow: 0 14px 30px -18px rgba(138,53,45,0.35); }

/* Pulse — one calm heartbeat when a promise enters view */
.pulse.beat { animation: beat 1s ease-out 1; }
@keyframes beat {
  0% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(124, 102, 255, 0)); }
  35% { transform: scale(1.045); filter: drop-shadow(0 0 14px rgba(124, 102, 255, 0.5)); }
  100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(124, 102, 255, 0)); }
}

/* Seal — confirmation stamp (form success) */
.seal { position: relative; display: inline-grid; place-items: center; }
.seal.stamp svg, .seal.stamp .mark { animation: sealstamp .55s cubic-bezier(0.2, 0.9, 0.3, 1.4) 1; }
.seal.stamp::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid rgba(91, 70, 214, 0.45); animation: sealring .8s ease-out .1s 1 forwards; opacity: 0;
}
@keyframes sealstamp { 0% { transform: scale(1.6); opacity: 0; } 60% { transform: scale(0.96); opacity: 1; } 100% { transform: scale(1); } }
@keyframes sealring { 0% { transform: scale(0.7); opacity: .8; } 100% { transform: scale(1.25); opacity: 0; } }

/* Underline-draw — mesh annotation under key phrases */
.udraw { background-image: linear-gradient(90deg, var(--iris), var(--aqua) 60%, var(--jade)); background-repeat: no-repeat; background-size: 0% 3px; background-position: 0 96%; transition: background-size .9s cubic-bezier(0.2,0.7,0.2,1) .15s; padding-bottom: 2px; }
.udraw.in { background-size: 100% 3px; }
@media (prefers-reduced-motion: reduce) {
  .pulse.beat, .seal.stamp svg, .seal.stamp .mark { animation: none; }
  .udraw { background-size: 100% 3px; transition: none; }
}

/* ══════════ MESSAGING COMPONENTS ══════════ */

/* Promise ledger — numbered public promises */
.promise { display: grid; grid-template-columns: 64px 1fr auto; gap: 20px; align-items: start; background: #fff; border: 1px solid var(--stroke); border-radius: var(--r); padding: 24px 26px; margin-bottom: 14px; box-shadow: var(--card-shadow); }
.promise .num { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 1.9rem; color: var(--iris); line-height: 1; }
.promise h3 { font-size: 1.18rem; margin-bottom: 6px; }
.promise p { color: var(--body); font-size: 0.96rem; }
.promise .held { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand-deep); border: 1px solid rgba(91, 70, 214,0.3); background: rgba(124, 102, 255,0.08); border-radius: 99px; padding: 6px 12px; white-space: nowrap; }
@media (max-width: 700px) { .promise { grid-template-columns: 44px 1fr; } .promise .held { display: none; } }

/* Plain-English translator rows */
.translate { border: 1px solid var(--stroke); border-radius: var(--r); overflow: hidden; background: #fff; box-shadow: var(--card-shadow); }
.t-row { display: grid; grid-template-columns: 1fr 1fr; }
.t-row + .t-row { border-top: 1px dashed var(--stroke); }
.t-row .legal { padding: 18px 22px; font-family: ui-monospace, Menlo, monospace; font-size: 0.82rem; color: var(--faint); background: var(--wash); text-decoration: line-through; text-decoration-color: rgba(176, 70, 60,0.45); text-decoration-thickness: 1.5px; }
.t-row .legal.keep { text-decoration: none; }
.t-row .legal .term {
  display: inline-block; width: 100%; text-decoration: none;
  color: var(--ink); font-family: "Instrument Sans", sans-serif;
  font-size: 0.95rem; font-weight: 700; margin-bottom: 4px;
}
.t-row .human { padding: 18px 22px; font-weight: 600; }
.t-row .human::before { content: "→ "; color: var(--iris); font-weight: 800; }
/* Stacked on mobile the two halves read as one run-on block, so give them an
   explicit before/after rhythm: label, rule, answer. The `.vs` variant is for the
   industry-says / we-say comparison; plain rows just get the separator. */
@media (max-width: 700px) {
  .t-row { grid-template-columns: 1fr; }
  .t-row .legal { padding: 16px 20px 14px; }
  .t-row .human { padding: 15px 20px 18px; border-top: 1px solid var(--stroke); }
  .t-row .human::before { content: ""; }
  .translate.vs .t-row { background: #fff; }
  .translate.vs .t-row .legal {
    background: var(--wash); text-decoration: none;   /* strikethrough would hit the label too */
    color: var(--faint); font-size: 0.8rem; line-height: 1.5;
  }
  .translate.vs .t-row .legal::before,
  .translate.vs .t-row .human::before {
    display: block; content: "What they say";
    font-family: "Instrument Sans", sans-serif; font-size: 0.62rem; font-weight: 800;
    letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 7px;
    color: rgba(18, 20, 28,0.42);
  }
  .translate.vs .t-row .human::before { content: "What we say"; color: var(--brand); }
  .translate.vs .t-row .human { border-top: 0; }
}

/* Them vs us strip */
.versus { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.versus .col { border-radius: var(--r); padding: 24px; border: 1px solid var(--stroke); }
.versus .them { background: var(--wash); color: var(--faint); }
.versus .us { background: #fff; box-shadow: var(--card-shadow); border-color: rgba(91, 70, 214,0.35); }
.versus h4 { font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 14px; }
.versus .them h4 { color: var(--faint); }
.versus .us h4 { color: var(--brand); }
.versus li { list-style: none; padding: 7px 0; font-size: 0.95rem; }
.versus .them li::before { content: "✕ "; color: #b0463c; opacity: .55; }
.versus .us li::before { content: "✓ "; color: var(--ok); font-weight: 800; }
@media (max-width: 700px) { .versus { grid-template-columns: 1fr; } }

/* Honest-coverage card: covered AND not covered */
.honest { background: #fff; border: 1px solid var(--stroke); border-radius: var(--r); box-shadow: var(--card-shadow); overflow: hidden; }
.honest .h-head { padding: 18px 22px; border-bottom: 1px solid var(--stroke); display: flex; justify-content: space-between; align-items: center; }
.honest .h-cols { display: grid; grid-template-columns: 1fr 1fr; }
.honest .h-col { padding: 18px 22px; }
.honest .h-col + .h-col { border-left: 1px dashed var(--stroke); }
.honest .h-col h5 { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 10px; }
.honest .h-col.yes h5 { color: var(--ok); } .honest .h-col.no h5 { color: var(--err-deep); }
.honest li { list-style: none; padding: 5px 0; font-size: 0.92rem; color: var(--body); }
.honest .yes li::before { content: "✓ "; color: var(--ok); font-weight: 800; }
.honest .no li::before { content: "— "; color: #b0463c; }
@media (max-width: 700px) { .honest .h-cols { grid-template-columns: 1fr; } .honest .h-col + .h-col { border-left: 0; border-top: 1px dashed var(--stroke); } }

/* ══════════ FORMS — full set ══════════ */
.check, .radio { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: 0.95rem; padding: 8px 0; }
.check input, .radio input { appearance: none; width: 20px; height: 20px; flex: none; margin-top: 1px; border: 1.5px solid var(--stroke); background: #fff; cursor: pointer; transition: all .15s ease; }
.check input { border-radius: 6px; }
.radio input { border-radius: 50%; }
.check input:checked, .radio input:checked { background: var(--brand); border-color: var(--brand); }
.check input:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size: 14px; background-position: center; background-repeat: no-repeat; }
.radio input:checked { box-shadow: inset 0 0 0 4.5px #fff; }
.check input:focus-visible, .radio input:focus-visible, .switch input:focus-visible + .track { outline: none; box-shadow: 0 0 0 4px rgba(124, 102, 255,0.25); }

/* chip-radios (trade picker) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { cursor: pointer; }
.chips input { position: absolute; opacity: 0; pointer-events: none; }
.chips .c { display: inline-block; font-size: 0.88rem; font-weight: 600; padding: 9px 16px; border-radius: 99px; border: 1.5px solid var(--stroke); background: #fff; transition: all .15s ease; }
.chips input:checked + .c { background: var(--brand); border-color: var(--brand); color: #fff; }
.chips input:focus-visible + .c { box-shadow: 0 0 0 4px rgba(124, 102, 255,0.25); }

/* toggle */
.switch { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font-size: 0.95rem; }
.switch input { position: absolute; opacity: 0; }
.switch .track { width: 46px; height: 26px; border-radius: 99px; background: var(--stroke); position: relative; transition: background .2s ease; flex: none; }
.switch .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(18, 20, 28,0.3); transition: transform .2s cubic-bezier(0.2,0.8,0.3,1.2); }
.switch input:checked + .track { background: var(--brand); }
.switch input:checked + .track::after { transform: translateX(20px); }

/* textarea, prefix input, upload */
.field textarea { min-height: 110px; resize: vertical; }
.prefix { display: flex; align-items: stretch; }
.prefix .pre { display: grid; place-items: center; padding: 0 14px; background: var(--wash); border: 1.5px solid var(--stroke); border-right: 0; border-radius: 12px 0 0 12px; font-weight: 700; color: var(--faint); }
.prefix input { border-radius: 0 12px 12px 0; }
.upload { border: 2px dashed var(--stroke); border-radius: var(--r); padding: 30px; text-align: center; color: var(--faint); background: #fff; transition: all .2s ease; cursor: pointer; }
.upload:hover, .upload.drag { border-color: var(--brand); background: rgba(124, 102, 255,0.05); color: var(--brand-deep); }
.fieldset { border: 1px solid var(--stroke); border-radius: var(--r); padding: 22px; background: #fff; }
.fieldset legend { font-weight: 800; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand); padding: 0 8px; }

/* ══════════ TRADE ILLUSTRATIONS ══════════ */
.trade-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px) { .trade-grid { grid-template-columns: 1fr; } }
.trade-card { background: #fff; border: 1px solid var(--stroke); border-radius: var(--r); overflow: hidden; box-shadow: var(--card-shadow); transition: transform .2s ease; }
.trade-card:hover { transform: translateY(-4px); }
.trade-card svg { display: block; width: 100%; height: auto; }
.trade-card .tc-meta { padding: 14px 18px; display: flex; justify-content: space-between; align-items: center; }
.trade-card .tc-meta b { font-family: "Bricolage Grotesque", sans-serif; }
.trade-card .tc-meta span { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }

/* illustration animations — one calm loop per scene */
@keyframes tc-glow { 0%,100% { opacity: .45; } 50% { opacity: .9; } }
.tc-glow { animation: tc-glow 4.5s ease-in-out infinite; }
@keyframes tc-spin { to { transform: rotate(360deg); } }
.tc-spin { animation: tc-spin 9s linear infinite; transform-origin: center; transform-box: fill-box; }
@keyframes tc-bubble { 0%,100% { transform: translateX(-7px); } 50% { transform: translateX(7px); } }
.tc-bubble { animation: tc-bubble 5.5s ease-in-out infinite; }
@keyframes tc-drip { 0%,55% { transform: translateY(0) scale(1); opacity: 1; } 75% { transform: translateY(26px) scale(1.02); opacity: 1; } 82%,100% { transform: translateY(30px) scale(0.9); opacity: 0; } }
.tc-drip { animation: tc-drip 4.2s ease-in infinite; }
@keyframes tc-ripple { 0%,60% { transform: scaleX(0.4); opacity: 0; } 78% { transform: scaleX(1); opacity: .6; } 100% { transform: scaleX(1.25); opacity: 0; } }
.tc-ripple { animation: tc-ripple 4.2s ease-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes tc-puff { 0%,100% { transform: scale(0.96); opacity: .75; } 50% { transform: scale(1.05); opacity: 1; } }
.tc-puff { animation: tc-puff 3.8s ease-in-out infinite; transform-origin: left center; transform-box: fill-box; }
@keyframes tc-wipe { 0%, 12% { transform: translateY(0); } 42%, 62% { transform: translateY(46px); } 92%, 100% { transform: translateY(0); } }
.tc-wipe { animation: tc-wipe 7s cubic-bezier(0.4, 0, 0.3, 1) infinite; }
@keyframes tc-swing { 0%,100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
.tc-swing { animation: tc-swing 6s ease-in-out infinite; transform-origin: top center; transform-box: fill-box; }
/* choreography v2 */
@keyframes tc-flicker { 0% { opacity: 0; } 4% { opacity: 1; } 6% { opacity: .2; } 9% { opacity: 1; } 11% { opacity: .5; } 14%, 88% { opacity: 1; } 100% { opacity: 0.9; } }
.tc-flicker { animation: tc-flicker 8s ease-out infinite; }
@keyframes tc-ray { 0%, 12% { transform: scale(0); opacity: 0; } 18% { transform: scale(1.25); opacity: 1; } 24%, 86% { transform: scale(1); opacity: .9; } 100% { transform: scale(0.9); opacity: .4; } }
.tc-ray { animation: tc-ray 8s ease-out infinite; transform-origin: center; transform-box: fill-box; }
.tc-ray:nth-of-type(2) { animation-delay: .12s; } .tc-ray:nth-of-type(3) { animation-delay: .22s; }
.tc-ray:nth-of-type(4) { animation-delay: .3s; } .tc-ray:nth-of-type(5) { animation-delay: .4s; } .tc-ray:nth-of-type(6) { animation-delay: .5s; }
@keyframes tc-jet { to { stroke-dashoffset: -60; } }
.tc-jet { stroke-dasharray: 10 8; animation: tc-jet 0.9s linear infinite; }
@keyframes tc-arm { 0%,100% { transform: rotate(-2.6deg); } 50% { transform: rotate(2.2deg); } }
.tc-arm { animation: tc-arm 3.6s ease-in-out infinite; transform-box: fill-box; }
@keyframes tc-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-1.6px); } }
.tc-bob { animation: tc-bob 3.6s ease-in-out infinite; }
@keyframes tc-splat { 0%, 8% { transform: translate(0,0) scale(.4); opacity: 0; } 16% { opacity: .9; } 34% { transform: translate(13px,-9px) scale(1); opacity: .8; } 48%,100% { transform: translate(22px,-4px) scale(.5); opacity: 0; } }
.tc-splat { animation: tc-splat 2.6s ease-out infinite; transform-box: fill-box; }
.tc-splat.s2 { animation-delay: .5s; } .tc-splat.s3 { animation-delay: 1.1s; }
@keyframes tc-curl { 0% { transform: translateX(0); opacity: 0; } 25% { opacity: .8; } 100% { transform: translateX(16px); opacity: 0; } }
.tc-curl { animation: tc-curl 3.2s ease-in-out infinite; }
.tc-curl.c2 { animation-delay: 1.5s; }
@media (prefers-reduced-motion: reduce) {
  .tc-glow, .tc-spin, .tc-bubble, .tc-drip, .tc-ripple, .tc-puff, .tc-wipe, .tc-swing,
  .tc-flicker, .tc-ray, .tc-jet, .tc-arm, .tc-bob, .tc-splat, .tc-curl { animation: none; }
}

/* ══════════ EDITORIAL / BLOG ══════════ */
.pullquote { border-left: 4px solid var(--iris); background: var(--wash); border-radius: 0 var(--r) var(--r) 0; padding: 22px 26px; margin: 28px 0; font-family: "Bricolage Grotesque", sans-serif; font-size: 1.35rem; font-weight: 600; line-height: 1.3; }
.author { display: flex; gap: 14px; align-items: center; padding: 16px 0; border-block: 1px solid var(--stroke); margin: 26px 0; }
.author .ava { width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg, var(--aqua), var(--iris)); display: grid; place-items: center; font-weight: 800; color: var(--ink); flex: none; }
.author b { display: block; }
.author span { font-size: 0.83rem; color: var(--faint); }
.toc { background: var(--wash); border: 1px solid var(--stroke); border-radius: var(--r); padding: 18px 22px; font-size: 0.9rem; margin: 22px 0; }
.toc b { display: block; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand); margin-bottom: 8px; }
.toc a { display: block; color: var(--body); text-decoration: none; padding: 4px 0; }
.toc a:hover { color: var(--brand-deep); }
.callout-cta { background: linear-gradient(135deg, #241a5c, #4736b0); color: #f2f1fb; border-radius: var(--r); padding: 26px; margin: 30px 0; display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; }
.callout-cta b { font-family: "Bricolage Grotesque", sans-serif; font-size: 1.15rem; }

/* ══════════ TEMPLATE WIREFRAMES (design-system thumbnails) ══════════ */
.wire { border: 1px solid var(--stroke); border-radius: 14px; background: #fff; padding: 12px; box-shadow: var(--card-shadow); }
.wire .w-t { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand); margin-bottom: 10px; }
.wire .b { border-radius: 6px; background: var(--wash); margin-bottom: 6px; }
.wire .b.hi { background: linear-gradient(90deg, var(--aqua), var(--iris)); }
.wire .b.dark { background: #241a5c; }
.wire .cols { display: grid; gap: 6px; }
.wire p { font-size: 0.78rem; color: var(--faint); margin-top: 10px; }

/* journey map */
.journey { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; align-items: stretch; }
.j-stage { position: relative; padding: 18px 16px 18px 22px; background: #fff; border: 1px solid var(--stroke); border-left: 4px solid var(--iris); border-radius: 12px; margin-right: 14px; }
.j-stage:last-child { margin-right: 0; }
.j-stage .j-n { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand); }
.j-stage b { display: block; font-family: "Bricolage Grotesque", sans-serif; margin: 4px 0 6px; }
.j-stage p { font-size: 0.8rem; color: var(--faint); }
@media (max-width: 900px) { .journey { grid-template-columns: 1fr; } .j-stage { margin: 0 0 10px; } }

/* ---------- toasts ---------- */
.toast-stack { position: fixed; bottom: 22px; right: 22px; z-index: 1000; display: flex; flex-direction: column; gap: 10px; }
.toast {
  font-weight: 600; font-size: 0.92rem;
  background: #fff; color: var(--ink);
  border: 1px solid var(--stroke); border-left: 4px solid var(--brand);
  border-radius: 12px; padding: 13px 18px;
  box-shadow: 0 18px 50px -20px rgba(18, 20, 28,0.4);
  opacity: 0; transform: translateY(10px);
  transition: opacity .3s ease, transform .3s ease;
  max-width: 340px;
}
.toast.show { opacity: 1; transform: none; }
.toast-error { border-left-color: #b0463c; }

/* ---------- alerts ---------- */
.alert {
  display: flex; gap: 10px; align-items: flex-start;
  border-radius: 12px; padding: 13px 16px; font-size: 0.93rem;
  border: 1px solid; margin: 10px 0;
}
.alert b { display: block; }
.alert-success { background: #e9f6ef; border-color: rgba(30,138,90,0.35); color: var(--ok-deep); }
.alert-info    { background: var(--wash); border-color: var(--stroke); color: var(--ink); }
.alert-warn    { background: #fdf4dd; border-color: rgba(198,146,43,0.4); color: var(--warn); }
.alert-error   { background: #faeceb; border-color: rgba(176, 70, 60,0.4); color: var(--err-deep); }

/* ---------- badges / status ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: 99px; padding: 4px 11px; border: 1px solid transparent;
}
.badge::before { content: "●"; font-size: 0.6em; }
.badge-issued  { background: #e9f6ef; color: var(--ok-deep); border-color: rgba(30,138,90,0.3); }
.badge-pending { background: #fdf4dd; color: var(--warn); border-color: rgba(198,146,43,0.35); }
.badge-expired { background: #faeceb; color: var(--err-deep); border-color: rgba(176, 70, 60,0.35); }
.badge-draft   { background: var(--wash); color: var(--faint); border-color: var(--stroke); }

/* ---------- form field pattern & states ---------- */
.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 700; font-size: 0.9rem; margin-bottom: 6px; }
.field .help { font-size: 0.8rem; color: var(--faint); margin-top: 5px; }
.field input, .field select, .field textarea {
  font: inherit; color: var(--ink); width: 100%;
  background: #fff; border: 1.5px solid var(--stroke); border-radius: 12px;
  padding: 12px 14px; outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--brand); box-shadow: 0 0 0 4px rgba(124, 102, 255,0.16);
}
.field.error input { border-color: #b0463c; box-shadow: 0 0 0 4px rgba(176, 70, 60,0.12); }
.field.error .help { color: var(--err-deep); font-weight: 600; }
.field.success input { border-color: var(--ok); }

/* ---------- stepper (quote flow) ---------- */
.stepper { display: flex; align-items: center; gap: 0; }
.step { display: flex; align-items: center; gap: 10px; }
.step .dot {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 0.8rem; font-weight: 800;
  border: 2px solid var(--stroke); color: var(--faint); background: #fff;
}
.step.done .dot  { background: var(--brand); border-color: var(--brand); color: #fff; }
.step.active .dot{ border-color: var(--brand); color: var(--brand-deep); box-shadow: 0 0 0 4px rgba(124, 102, 255,0.18); }
.step .lbl { font-size: 0.85rem; font-weight: 700; color: var(--faint); }
.step.active .lbl, .step.done .lbl { color: var(--ink); }
.step-bar { flex: 1; height: 2px; background: var(--stroke); margin: 0 12px; min-width: 26px; }
.step.done + .step-bar { background: var(--brand); }

/* ---------- loading: spinner & skeleton ---------- */
.spinner {
  width: 22px; height: 22px; border-radius: 50%;
  border: 3px solid rgba(91, 70, 214,0.2); border-top-color: var(--brand);
  animation: spin 0.8s linear infinite; display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }
.skeleton {
  border-radius: 8px;
  background: linear-gradient(90deg, var(--wash) 25%, #e8e9f7 45%, var(--wash) 65%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton, .spinner { animation: none; } }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .grid { grid-template-columns: 1fr; }
  .cell.big { grid-column: span 1; grid-row: span 1; }
  .florida { grid-template-columns: 1fr; padding-block: 70px; }
  .hero { padding-top: 44px; }
  .anchor-inner { padding: 52px 24px; }
}

/* lottie slots inside trade cards */
.tc-slot { position: relative; }
.tc-slot svg { display: block; width: 100%; height: auto; }
.tc-slot.lottie-live { background: #f3f4fc; aspect-ratio: 240/170; display: grid; place-items: center; }
.tc-slot.lottie-live > svg { max-height: 100%; }

/* storyset character art inside trade cards */
.tc-slot img { display: block; width: 100%; height: auto; background: #f3f4fc; padding: 10px 14px 6px; }

/* ══════════ NAV: desktop links + mobile menu ══════════ */
.nav-right { display: flex; align-items: center; gap: 20px; }
.nav-links { display: flex; align-items: center; gap: 20px; }
.btn-sm { font-size: 0.9rem; padding: 10px 20px; border-radius: 11px; text-decoration: none; display: inline-block; }
.btn-quiet {
  font: inherit; font-weight: 600; font-size: 0.92rem; text-decoration: none;
  color: var(--brand-deep); padding: 10px 4px;
}
.btn-quiet:hover { color: var(--brand); }

.menu-btn {
  display: none; background: none; border: 1px solid var(--stroke); border-radius: 11px;
  width: 44px; height: 44px; cursor: pointer; padding: 0;
  align-items: center; justify-content: center; flex-direction: column; gap: 5px;
}
.menu-btn span { display: block; width: 19px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
.menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 200; background: var(--bg);
  padding: 92px 28px 40px; overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
.mobile-menu.open { opacity: 1; visibility: visible; transform: none; }
.mobile-menu h4 {
  font-family: "Instrument Sans", sans-serif;
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--brand); margin: 26px 0 10px;
}
.mobile-menu a.mm-link {
  display: block; padding: 11px 0; text-decoration: none;
  color: var(--ink); font-size: 1.05rem; font-weight: 600;
  border-bottom: 1px solid var(--stroke);
}
.mobile-menu .mm-actions { display: grid; gap: 10px; margin-top: 30px; }
.mobile-menu .mm-actions .btn, .mobile-menu .mm-actions .btn-secondary {
  width: 100%; text-align: center; text-decoration: none; padding: 15px 20px; display: block;
}
body.menu-open { overflow: hidden; }

@media (max-width: 860px) {
  .nav-links, .nav-right .btn-sm, .nav-right .btn-quiet { display: none; }
  .menu-btn { display: flex; }
}

/* ══════════ hero CTA row ══════════ */
.cta-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 34px; }
.cta-row .btn { padding: 16px 32px; font-size: 1.02rem; text-decoration: none; display: inline-block; }
.btn-outline {
  font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
  background: #fff; color: var(--brand-deep);
  border: 1.5px solid rgba(91, 70, 214,0.45); border-radius: 12px;
  padding: 15px 30px; display: inline-block;
  transition: border-color .15s ease, background .15s ease;
}
.btn-outline:hover { border-color: var(--brand); background: rgba(124, 102, 255,0.08); }
.cta-note { font-size: 0.86rem; color: var(--faint); margin-top: 14px; }

/* ══════════ "How we get you covered" steps ══════════ */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 38px; counter-reset: step; }
.step-card {
  background: #fff; border: 1px solid var(--stroke); border-radius: var(--r);
  padding: 28px 26px; box-shadow: var(--card-shadow); position: relative;
  transition: transform .2s ease, border-color .2s ease;
}
.step-card:hover { transform: translateY(-4px); border-color: rgba(91, 70, 214,0.4); }
.step-card .n {
  font-family: "Bricolage Grotesque", sans-serif; font-size: 0.78rem; font-weight: 800;
  letter-spacing: 0.14em; color: var(--iris); display: block; margin-bottom: 14px;
}
.step-card h3 { font-size: 1.18rem; margin-bottom: 9px; }
.step-card p { color: var(--body); font-size: 0.96rem; }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; } }

/* ══════════ auth pages ══════════ */
.auth { max-width: 460px; margin: 0 auto; padding-block: 54px 90px; }
.auth h1 { font-size: clamp(1.9rem, 5vw, 2.5rem); margin-bottom: 10px; }
.auth .lede { color: var(--body); margin-bottom: 30px; }
.auth-card { background: #fff; border: 1px solid var(--stroke); border-radius: var(--r); padding: 30px 28px; box-shadow: var(--card-shadow); }
.auth-card .field { margin-bottom: 16px; }
.auth-card label { display: block; font-size: 0.82rem; font-weight: 700; margin-bottom: 6px; color: var(--ink); }
.auth-card input, .auth-card select {
  font: inherit; width: 100%; color: var(--ink); background: #fff;
  border: 1px solid var(--stroke); border-radius: 11px; padding: 13px 14px; outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.auth-card input:focus, .auth-card select:focus { border-color: rgba(91, 70, 214,0.55); box-shadow: 0 0 0 4px rgba(124, 102, 255,0.14); }
.auth-card .btn { width: 100%; margin-top: 8px; padding: 15px; }
.sso-btn {
  display: flex; align-items: center; justify-content: center; gap: 11px;
  width: 100%; font: inherit; font-weight: 700; cursor: pointer;
  background: #fff; color: var(--ink); text-decoration: none;
  border: 1px solid var(--stroke); border-radius: 12px; padding: 14px;
  transition: border-color .15s ease, background .15s ease;
}
.sso-btn:hover { border-color: rgba(91, 70, 214,0.45); background: var(--wash); }
.auth-or { display: flex; align-items: center; gap: 14px; margin: 20px 0; color: var(--faint); font-size: 0.8rem; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--stroke); }
.auth-alt { text-align: center; margin-top: 20px; font-size: 0.92rem; color: var(--body); }
.hint { font-size: 0.8rem; color: var(--faint); margin-top: 6px; }

/* ══════════ /start — intake wizard ══════════
   Steps are plain fieldsets, shipped VISIBLE in the markup. An inline script
   right after the form collapses them during parse (no flash), and deferred
   app.js drives navigation. With JS off neither runs, so all four fieldsets
   stay visible and the form submits as one long page.

   Do not put `hidden` in the template — that breaks the no-JS path silently,
   because the steps then never un-hide and the form can't be completed. */
.wiz-wrap { max-width: 780px; padding-bottom: 90px; }
.wiz-head { padding: 8px 0 26px; }
.wiz-head h1 { font-size: clamp(1.9rem, 5vw, 2.7rem); margin: 10px 0 14px; }
.wiz-lede { color: var(--body); max-width: 58ch; font-size: 1.04rem; }
.wiz-notice {
  margin-top: 20px; border: 1px solid rgba(91, 70, 214, 0.28);
  background: rgba(124, 102, 255, 0.07); border-radius: 14px;
  padding: 15px 18px; font-size: 0.93rem; color: var(--body); max-width: 62ch;
}
.wiz-notice b { color: var(--brand-deep); }

.wiz { margin-top: 26px; }

/* progress rail */
.wiz-rail {
  display: flex; gap: 6px; list-style: none; padding: 0; margin: 0 0 26px;
  flex-wrap: wrap; counter-reset: none;
}
.wiz-rail li {
  display: flex; align-items: center; gap: 8px; flex: 1; min-width: 150px;
  font-size: 0.82rem; font-weight: 600; color: var(--faint);
  padding: 10px 12px; border-radius: 11px; border: 1px solid var(--stroke);
  background: #fff; transition: border-color .2s ease, color .2s ease;
}
.wiz-rail li span {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 0.74rem; font-weight: 800;
  background: var(--wash); color: var(--faint);
}
.wiz-rail li.on { color: var(--ink); border-color: rgba(91, 70, 214, 0.45); }
.wiz-rail li.on span { background: var(--brand); color: #fff; }
.wiz-rail li.done span { background: var(--ok); color: #fff; }
.wiz-rail li.done { color: var(--body); }

/* steps */
.wiz-step {
  border: 1px solid var(--stroke); border-radius: var(--r); background: #fff;
  padding: 26px 26px 24px; box-shadow: var(--card-shadow); margin-bottom: 18px;
}
.wiz-step legend {
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 700;
  font-size: 1.22rem; letter-spacing: -0.02em; padding: 0 10px; margin-left: -10px;
}
.wiz-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
@media (max-width: 620px) { .wiz-row { grid-template-columns: 1fr; } }
.wiz .field { margin-bottom: 18px; }
.wiz .field label { font-size: 0.92rem; }
.req {
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--brand); margin-left: 6px;
}
.wiz textarea { font: inherit; }

/* nav */
.wiz-nav { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.wiz-nav .btn, .wiz-nav .btn-outline { padding: 14px 28px; }
.wiz-step-of {
  font-size: 0.84rem; color: var(--faint); margin-left: auto;
  font-variant-numeric: tabular-nums;
}
.wiz-fine { font-size: 0.84rem; color: var(--faint); margin-top: 18px; max-width: 58ch; }
.wiz-fine a { color: var(--brand-deep); }

/* done page */
.wiz-done { max-width: 660px; padding: 30px 0 40px; }
.wiz-done h1 { font-size: clamp(2rem, 5.4vw, 2.9rem); margin: 22px 0 16px; }
.wiz-done h2 { font-size: 1.16rem; margin-bottom: 10px; }
.wiz-next, .wiz-meanwhile {
  margin-top: 30px; border: 1px solid var(--stroke); border-radius: var(--r);
  background: #fff; padding: 22px 26px; box-shadow: var(--card-shadow);
}
.wiz-next ol { margin: 8px 0 0 20px; color: var(--body); }
.wiz-next li { margin-bottom: 10px; }
.wiz-next b { color: var(--ink); }
.wiz-meanwhile ul { margin: 10px 0 0 20px; color: var(--body); }
.wiz-meanwhile li { margin-bottom: 7px; }
.wiz-meanwhile a { color: var(--brand-deep); font-weight: 600; }
.wiz-meanwhile p { color: var(--body); font-size: 0.95rem; }