/* ══════════════════════════════════════════════════════════════════════════
   Policy review, ADION Financial Group

   Theme is ADION's, not daud's: navy #18325A and gold #C39A2A, both sampled
   from adionfg.com, on a light ground. The site this form hangs off is light,
   and a dark form in front of a light site reads as a third-party widget, 
   which is the one thing a lead form must never look like.

   Gold is the action colour and nothing else. Navy carries structure. The two
   never sit at the same weight in the same block: navy states, gold acts.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  /* Navy, structure, headings, the header band. */
  --navy:#18325A;
  --navy-d:#0F2140;
  --navy-l:#203466;
  --navy-tint:#ECF0F8;      /* their own pale blue, used for inset panels */

  /* Gold, action, and only action. */
  --gold:#C39A2A;
  --gold-l:#D9B44A;
  --gold-d:#A37F18;
  --gold-tint:#FBF5E6;

  /* Ground and ink. */
  --paper:#F7F8FA;
  --card:#FFFFFF;
  --ink:#1A1D23;
  --ink-2:rgba(26,29,35,0.68);
  --ink-3:rgba(26,29,35,0.46);
  --line:rgba(24,50,90,0.14);
  --line-2:rgba(24,50,90,0.26);

  /* Status. Green only ever means "we read this off your policy", it is not
     a brand colour and never decorates. */
  --ok:#1F7A4C;
  --ok-tint:#E8F5EE;
  --warn:#A8600C;
  --warn-tint:#FDF1E3;
  --bad:#B3261E;
  --bad-tint:#FCEDEC;

  --r:14px; --r-s:10px; --r-xs:7px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --edge:clamp(18px,5vw,40px);
  --shadow:0 1px 2px rgba(15,33,64,.05), 0 8px 26px rgba(15,33,64,.07);
  --shadow-lg:0 2px 6px rgba(15,33,64,.07), 0 22px 60px rgba(15,33,64,.12);
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  background:var(--paper);color:var(--ink);
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-weight:400;-webkit-font-smoothing:antialiased;
  min-height:100dvh;display:flex;flex-direction:column;
}

button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;text-align:left}
input,select,textarea{font:inherit;color:inherit;background:none;border:none;outline:none;width:100%}
a{color:inherit}
[hidden]{display:none !important}
::selection{background:var(--gold);color:#fff}
:focus-visible{outline:2px solid var(--gold-d);outline-offset:2px;border-radius:4px}

/* ── header ───────────────────────────────────────────────────────────────
   A thin navy band. It is a strip rather than a full nav because this page has
   one job and a nav is an exit. */
.top{
  background:var(--navy);color:#fff;padding:0 var(--edge);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:62px;flex:none;
}
.lockup{display:flex;align-items:baseline;gap:9px;text-decoration:none}
.lockup b{font-weight:800;font-size:19px;letter-spacing:.04em}
.lockup i{
  font-style:normal;font-weight:600;font-size:9.5px;letter-spacing:.17em;
  text-transform:uppercase;color:rgba(255,255,255,.62);
}
.lockup .fg{color:var(--gold-l)}
.topcall{
  display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;
  color:rgba(255,255,255,.9);text-decoration:none;white-space:nowrap;
}
.topcall svg{width:14px;height:14px;flex:none;opacity:.7}
.topcall:hover{color:#fff}
@media (max-width:460px){ .topcall span{display:none} }

/* ── shell ────────────────────────────────────────────────────────────── */
.shell{flex:1;display:flex;flex-direction:column;padding:0 var(--edge)}
.stage{width:min(680px,100%);margin:0 auto;padding:clamp(26px,5vw,48px) 0 40px;flex:1}

/* ── progress ─────────────────────────────────────────────────────────── */
.prog{display:flex;align-items:center;gap:10px;margin-bottom:26px}
.prog .bar{flex:1;height:4px;border-radius:99px;background:rgba(24,50,90,.11);overflow:hidden}
.prog .bar i{
  display:block;height:100%;width:0;border-radius:99px;background:var(--navy);
  transition:width .45s var(--ease);
}
.prog .pct{
  font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap;
}

/* ── panels ───────────────────────────────────────────────────────────── */
.panel{display:none}
.panel.on{display:block;animation:rise .34s var(--ease)}
@keyframes rise{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.panel.on{animation:none}}

.eyebrow{
  font-size:10.5px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:var(--gold-d);margin-bottom:13px;
}
h1{
  font-size:clamp(25px,4.6vw,35px);font-weight:800;letter-spacing:-.028em;
  line-height:1.13;color:var(--navy);text-wrap:balance;
}
h1 .g{color:var(--gold-d)}
.lede{
  font-size:15px;font-weight:400;line-height:1.62;color:var(--ink-2);
  margin-top:13px;max-width:52ch;text-wrap:pretty;
}
.sub{
  font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-3);margin:30px 0 12px;display:flex;align-items:center;gap:12px;
}
.sub::after{content:"";flex:1;height:1px;background:var(--line)}

/* ── intro ──────────────────────────────────────────── */
/* Six lines and a button, so it gets room rather than structure. The .why list
   and .promise panel an earlier draft used are gone with the copy that needed
   them; nothing else referenced those rules. */
.lede.quiet{font-size:13.5px;color:var(--ink-3);margin-top:10px}

.need{
  font-size:14.5px;line-height:1.65;color:var(--ink-2);
  max-width:54ch;text-wrap:pretty;
}

/* The one button on the screen carries the whole page, so it is not left at
   form-control size. */
.panel[data-panel="intro"] .nav{margin-top:30px}
.panel[data-panel="intro"] .btn.pri{padding:16px 30px;font-size:15.5px}

/* ── the fork ─────────────────────────────────────────────────────────── */
.fork{display:grid;gap:12px;margin-top:28px}

.upbox{
  position:relative;
  border:1.5px dashed var(--line-2);border-radius:var(--r);background:var(--card);
  padding:38px 24px 30px;text-align:center;cursor:pointer;display:block;width:100%;
  transition:border-color .2s var(--ease),background .2s var(--ease),transform .2s var(--ease);
}

/* The speed claim, sat across the top edge of the card like a "recommended"
   ribbon. Solid gold rather than a tint: this is the one thing on the fork
   that should pull the eye, because the upload route is the one that produces
   a better lead and it is the one people skip. */
.upbox .flag{
  position:absolute;top:0;left:50%;transform:translate(-50%,-50%);
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  background:var(--gold);color:#fff;
  font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  padding:6px 14px;border-radius:99px;
  box-shadow:0 2px 10px rgba(163,127,24,.32);
}
.upbox .flag svg{width:12px;height:12px;flex:none}
.upbox:hover .flag,.upbox.drag .flag{background:var(--gold-d)}
@media (max-width:420px){
  .upbox .flag{font-size:10px;letter-spacing:.05em;padding:5px 11px}
}
.upbox:hover,.upbox:focus-visible{border-color:var(--gold);background:var(--gold-tint)}
.upbox.drag{border-color:var(--gold);background:var(--gold-tint);border-style:solid;transform:scale(1.008)}
.upbox .ic{
  width:44px;height:44px;margin:0 auto 14px;border-radius:12px;
  background:var(--navy-tint);color:var(--navy);display:grid;place-items:center;
}
.upbox .ic svg{width:21px;height:21px}
.upbox b{display:block;font-size:16.5px;font-weight:700;color:var(--navy);letter-spacing:-.015em}
.upbox span{display:block;font-size:13px;color:var(--ink-3);margin-top:6px;line-height:1.55}
.upbox em{
  display:block;font-style:normal;font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;font-weight:600;color:var(--ink-3);margin-top:13px;
}

/* The escape hatch is a real option, so it is a button and not a link in small
   grey text. Making it look like a penalty is how you lose the lead. */
.skip{
  border:1px solid var(--line);border-radius:var(--r-s);background:var(--card);
  padding:15px 18px;display:flex;align-items:center;justify-content:space-between;
  gap:14px;transition:border-color .2s var(--ease),background .2s var(--ease);width:100%;
}
.skip:hover{border-color:var(--navy);background:var(--navy-tint)}
.skip b{font-size:14.5px;font-weight:600;color:var(--navy)}
.skip span{font-size:12.5px;color:var(--ink-3);display:block;margin-top:3px;line-height:1.5}
.skip .arr{color:var(--ink-3);flex:none;font-size:18px;line-height:1}

/* Where to find the policy. Collapsed by default: somebody already holding
   the PDF should not have to read past it. */
.where{margin-top:16px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--card)}
.where summary{
  cursor:pointer;padding:12px 15px;font-size:13px;font-weight:700;color:var(--navy);
  list-style:none;display:flex;align-items:center;gap:8px;
}
.where summary::-webkit-details-marker{display:none}
.where summary::before{
  content:"+";font-size:15px;font-weight:700;color:var(--gold-d);
  width:16px;text-align:center;flex:none;
}
.where[open] summary::before{content:"\2212"}
.where summary:hover{color:var(--gold-d)}
.where ol{margin:0;padding:0 15px 4px 15px;list-style:none;display:grid;gap:10px;counter-reset:w}
.where ol li{
  font-size:13px;line-height:1.6;color:var(--ink-2);
  display:flex;gap:11px;align-items:flex-start;
}
.where ol li::before{
  counter-increment:w;content:counter(w);flex:none;
  width:20px;height:20px;border-radius:50%;background:var(--navy-tint);color:var(--navy);
  font-size:10.5px;font-weight:800;display:grid;place-items:center;margin-top:1px;
}
.where ol li b{color:var(--ink);font-weight:700}
.where > p{
  margin:12px 15px 14px;padding-top:12px;border-top:1px solid var(--line);
  font-size:12.5px;line-height:1.6;color:var(--ink-3);
}
.where > p b{color:var(--ink-2);font-weight:700}

/* ── trust row ────────────────────────────────────────────────────────── */
.trust{
  display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:24px;padding-top:20px;
  border-top:1px solid var(--line);
}
.trust li{
  list-style:none;font-size:12px;color:var(--ink-2);display:flex;align-items:center;gap:7px;
}
.trust svg{width:13px;height:13px;color:var(--ok);flex:none}

.privacy{
  font-size:11.5px;line-height:1.6;color:var(--ink-3);margin-top:16px;
  display:flex;gap:8px;align-items:flex-start;
}
.privacy svg{width:13px;height:13px;flex:none;margin-top:2px;color:var(--ink-3)}

/* ── fields ───────────────────────────────────────────────────────────── */
.fld{display:flex;flex-direction:column;gap:7px;margin-top:18px}
.fld > .lab{
  font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);
}
.fld > .lab em{font-style:normal;font-weight:500;color:rgba(26,29,35,.3);letter-spacing:.06em}
.fld input,.fld select,.fld textarea{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-s);
  padding:13px 14px;font-size:15px;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
}
.fld textarea{resize:vertical;min-height:84px;line-height:1.55}
.fld input:focus,.fld select:focus,.fld textarea:focus{
  border-color:var(--navy);box-shadow:0 0 0 3px rgba(24,50,90,.09);
}
.fld input::placeholder,.fld textarea::placeholder{color:rgba(26,29,35,.3)}
.fld select{cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231A1D23' stroke-opacity='.45' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:11px;padding-right:36px;
}
.fld .hint{font-size:11.5px;color:var(--ink-3);line-height:1.55}
.fld.bad input,.fld.bad select,.fld.bad textarea{border-color:var(--bad);box-shadow:0 0 0 3px rgba(179,38,30,.08)}
.fld .oops{font-size:11.5px;color:var(--bad);font-weight:600}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:520px){.pair{grid-template-columns:1fr}}

/* Prefixed money input, the $ belongs to the field, not the placeholder,
   so it survives the user typing over it. */
.money{position:relative}
.money::before{
  content:"$";position:absolute;left:14px;top:50%;transform:translateY(-50%);
  font-size:15px;color:var(--ink-3);pointer-events:none;z-index:1;
}
.money input{padding-left:27px;font-variant-numeric:tabular-nums}

/* ── choices ──────────────────────────────────────────────────────────── */
.choices{display:grid;gap:9px;margin-top:20px}
.choices.two{grid-template-columns:1fr 1fr}
@media (max-width:520px){.choices.two{grid-template-columns:1fr}}
.choices button{
  border:1px solid var(--line);border-radius:var(--r-s);background:var(--card);
  padding:15px 16px;display:flex;align-items:center;gap:13px;
  transition:border-color .18s var(--ease),background .18s var(--ease);
}
.choices button:hover{border-color:var(--navy-l)}
.choices button b{display:block;font-size:14.5px;font-weight:600;color:var(--ink)}
.choices button span{display:block;font-size:12.5px;color:var(--ink-3);margin-top:3px;line-height:1.5}
.choices button .tick{
  width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line-2);flex:none;
  display:grid;place-items:center;transition:.18s var(--ease);
}
.choices.multi button .tick{border-radius:6px}
.choices button .tick svg{width:11px;height:11px;color:#fff;opacity:0;transition:opacity .15s}
.choices button.sel{border-color:var(--navy);background:var(--navy-tint)}
.choices button.sel .tick{background:var(--navy);border-color:var(--navy)}
.choices button.sel .tick svg{opacity:1}
.choices button .txt{flex:1;min-width:0}

/* ── the policy card ──────────────────────────────────────────────────── */
.pcard{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);overflow:hidden;margin-top:24px;
}
.pcard .head{
  background:var(--navy);color:#fff;padding:17px 20px;
  display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
}
.pcard .head b{display:block;font-size:16px;font-weight:700;letter-spacing:-.01em}
.pcard .head span{display:block;font-size:11.5px;color:rgba(255,255,255,.62);margin-top:4px}
.pcard .head .badge{
  font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  background:rgba(255,255,255,.14);padding:5px 9px;border-radius:99px;
  white-space:nowrap;flex:none;
}
.rows{display:grid}
.row{
  display:grid;grid-template-columns:150px 1fr auto;gap:12px;align-items:center;
  padding:12px 20px;border-top:1px solid var(--line);
}
.row:first-child{border-top:none}
@media (max-width:560px){
  .row{grid-template-columns:1fr auto;gap:5px 10px}
  .row .k{grid-column:1/-1}
}
.row .k{
  font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);
}
.row .v{font-size:14.5px;font-weight:600;color:var(--ink);min-width:0;word-break:break-word}
.row .v.empty{color:var(--ink-3);font-weight:400;font-style:italic}
.row input{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-xs);
  padding:8px 10px;font-size:14px;font-weight:600;
}
.row input:focus{border-color:var(--navy);background:var(--card)}

/* Provenance. Every extracted value says where it came from, a number the
   model guessed and a number printed on the declarations page must never look
   the same on screen. */
.src{
  font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:4px 8px;border-radius:99px;white-space:nowrap;flex:none;
}
.src.read{background:var(--ok-tint);color:var(--ok)}
.src.guess{background:var(--warn-tint);color:var(--warn)}
.src.miss{background:rgba(26,29,35,.06);color:var(--ink-3)}
.src.you{background:var(--navy-tint);color:var(--navy)}

.pcard .foot{
  padding:13px 20px;background:var(--paper);border-top:1px solid var(--line);
  font-size:12px;color:var(--ink-3);line-height:1.55;
}

/* ── coverage list inside the card ────────────────────────────────────── */
.covs{padding:4px 20px 14px;border-top:1px solid var(--line)}
.covs .t{
  font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);margin:12px 0 9px;
}
.cov{
  display:flex;justify-content:space-between;gap:14px;padding:8px 0;
  border-bottom:1px dashed var(--line);font-size:13.5px;
}
.cov:last-child{border-bottom:none}
.cov .cn{color:var(--ink-2);min-width:0}
.cov .cv{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}

/* ── reading state ────────────────────────────────────────────────────── */
.reading{text-align:center;padding:46px 20px}
.reading .spin{
  width:42px;height:42px;margin:0 auto 20px;border-radius:50%;
  border:3px solid rgba(24,50,90,.13);border-top-color:var(--navy);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.reading .spin{animation-duration:2.4s}}
.reading b{display:block;font-size:17px;font-weight:700;color:var(--navy)}
.reading span{display:block;font-size:13.5px;color:var(--ink-3);margin-top:7px;min-height:1.5em}

.files{display:grid;gap:7px;margin-top:16px}
.file{
  display:flex;align-items:center;gap:11px;padding:11px 13px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-s);font-size:13px;
}
.file .fi{width:15px;height:15px;color:var(--navy);flex:none}
.file .fn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file .fs{color:var(--ink-3);font-size:11.5px;font-variant-numeric:tabular-nums;flex:none}
.file .fx{color:var(--ink-3);padding:3px;border-radius:5px;flex:none;line-height:0}
.file .fx:hover{color:var(--bad);background:var(--bad-tint)}
.file .fx svg{width:13px;height:13px}

/* ── the comparison ─────────────────────────────────────── */
.tally{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.tally b{
  display:inline-flex;align-items:baseline;gap:7px;
  padding:9px 14px;border-radius:99px;font-size:12.5px;font-weight:700;
}
.tally b i{font-style:normal;font-size:16px;font-weight:800;font-variant-numeric:tabular-nums}
.tally .t-gap{background:var(--bad-tint);color:var(--bad)}
.tally .t-weak{background:var(--warn-tint);color:var(--warn)}
.tally .t-watch{background:var(--navy-tint);color:var(--navy)}
.tally .t-good{background:var(--ok-tint);color:var(--ok)}

.finds{display:grid;gap:12px;margin-top:24px}

.find{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  border-left:3px solid var(--line-2);overflow:hidden;box-shadow:var(--shadow);
}
.find.gap{border-left-color:var(--bad)}
.find.weak{border-left-color:var(--warn)}
.find.watch{border-left-color:var(--navy-l)}
.find.good{border-left-color:var(--ok)}

.find .fh{display:flex;align-items:flex-start;gap:12px;padding:16px 18px 13px}
.find .fh .sev{
  font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 9px;border-radius:99px;white-space:nowrap;flex:none;margin-top:2px;
}
.find.gap   .sev{background:var(--bad-tint);color:var(--bad)}
.find.weak  .sev{background:var(--warn-tint);color:var(--warn)}
.find.watch .sev{background:var(--navy-tint);color:var(--navy)}
.find.good  .sev{background:var(--ok-tint);color:var(--ok)}
.find .fh h3{
  font-size:16.5px;font-weight:700;color:var(--navy);
  letter-spacing:-.015em;line-height:1.3;flex:1;min-width:0;
}

/* Yours, why, ours. The order is the argument, so it is fixed in the markup
   rather than left to whatever order the checks happen to define. */
.find .rowset{border-top:1px solid var(--line)}
.find .r{display:grid;grid-template-columns:82px 1fr;gap:14px;padding:12px 18px;align-items:baseline}
.find .r + .r{border-top:1px dashed var(--line)}
.find .r .rk{
  font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);
}
.find .r .rv{font-size:13.5px;line-height:1.62;color:var(--ink-2);min-width:0}
.find .r.yours{background:rgba(24,50,90,.028)}
.find .r.yours .rv{color:var(--ink);font-weight:600}

/* The one row that is a claim rather than a reading. Gold, because it is the
   only place on the page where ADION is selling rather than reporting, and
   that distinction should be visible without being read. */
.find .r.ours{background:var(--gold-tint)}
.find .r.ours .rk{color:var(--gold-d)}
.find .r.ours .rv{color:#5c4708}

/* The appetite match, inside the Ours row. Indented and ruled rather than
   boxed, because it is the same claim continued in more detail, not a second
   kind of thing. */
.find .mkt{display:block;margin-top:11px;padding-left:13px;border-left:2px solid rgba(195,154,42,.45)}
.find .mkt .mh{
  display:block;font-size:10px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold-d);margin-bottom:7px;
}
.find .mkt ul{margin:0;padding:0;list-style:none;display:grid;gap:7px}
.find .mkt li{font-size:13px;line-height:1.55;color:#5c4708}
.find .mkt li b{font-weight:700;color:var(--navy)}
.find .mkt li em{display:block;font-style:normal;font-size:12px;opacity:.75;margin-top:2px}

@media (max-width:560px){
  .find .r{grid-template-columns:1fr;gap:5px}
  .find .fh h3{font-size:15.5px}
}

/* The honesty line under the list. Not small print: if the comparison is
   going to claim anything, the basis for it belongs at the same size as the
   rest of the page. */
#cmpFoot{margin-top:22px}

/* ── renewal timeline (the payoff screen) ─────────────────────────────── */
.tl{
  margin-top:26px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:24px 22px;box-shadow:var(--shadow);
}
/* One positioned rail with the pins absolutely placed along it, rather than a
   flex row overlaid on a bar. The call pin lands at an arbitrary percentage
   between today and the renewal, and only percentage positioning puts it
   where the arithmetic actually says it goes. */
.tl .rail{
  position:relative;height:3px;border-radius:99px;
  background:rgba(24,50,90,.12);margin:16px 0 56px;
}
/* Width comes in as a custom property rather than an inline width, so the
   phone layout below can repurpose this element as a vertical spine without
   fighting an inline style. */
.tl .rail .fill{
  position:absolute;top:0;bottom:0;left:0;width:var(--w,0%);border-radius:99px;
  background:linear-gradient(90deg,var(--navy),var(--gold));
}
.tl .pin{position:absolute;top:50%;width:96px;text-align:center}
.tl .pin .dot{
  position:absolute;top:-5.5px;width:11px;height:11px;border-radius:50%;
  background:var(--navy);border:2.5px solid var(--card);box-shadow:0 0 0 1.5px var(--navy);
}
.tl .pin .pk{
  font-size:9.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);display:block;padding-top:16px;
}
.tl .pin .pv{font-size:12.5px;font-weight:700;color:var(--navy);display:block;margin-top:2px}
.tl .pin.call .dot{background:var(--gold);box-shadow:0 0 0 1.5px var(--gold)}
.tl .pin.call .pk{color:var(--gold-d)}

/* The two ends hug the rail rather than overhanging it. */
.tl .pin.mid{left:var(--x,50%);transform:translateX(-50%)}
.tl .pin.mid .dot{left:50%;margin-left:-5.5px}
.tl .pin.start{left:0;text-align:left}
.tl .pin.start .dot{left:0}
.tl .pin.end{right:0;text-align:right}
.tl .pin.end .dot{right:0}

.tl .cap{
  font-size:12.5px;line-height:1.6;color:var(--ink-2);
  padding-top:14px;border-top:1px solid var(--line);
}
.tl .cap b{color:var(--navy);font-weight:700}

/* On a phone the rail becomes a spine. Three 96px labels will not fit across
   291px of usable width without colliding, and shrinking them to fit makes
   the one screen the customer is meant to remember the hardest one to read. */
@media (max-width:560px){
  .tl{padding:20px 18px}
  .tl .rail{height:auto;background:none;margin:14px 0 4px;padding-left:24px}
  .tl .rail .fill{
    top:9px;bottom:13px;left:5px;width:2px;border-radius:99px;
    background:linear-gradient(180deg,var(--navy),var(--gold));
  }
  .tl .pin,.tl .pin.mid{
    position:relative;top:auto;left:auto;right:auto;transform:none;
    width:auto;text-align:left;padding:7px 0;
    display:flex;align-items:baseline;gap:10px;
  }
  /* All three need naming explicitly: .pin.start/.mid/.end each set `left`
     at (0,3,0) above, so a bare `.tl .pin .dot` here loses to them and the
     dot lands on top of its own label. */
  .tl .pin .dot,
  .tl .pin.mid .dot,
  .tl .pin.start .dot,
  .tl .pin.end .dot{left:-24px;right:auto;top:9px;margin:0}
  .tl .pin .pk{padding-top:0;min-width:64px}
  .tl .pin .pv{margin-top:0}
}

.next{display:grid;gap:11px;margin-top:26px;counter-reset:n}
.next li{
  list-style:none;display:flex;gap:13px;align-items:flex-start;
  font-size:14px;line-height:1.6;color:var(--ink-2);
}
.next li::before{
  counter-increment:n;content:counter(n);flex:none;
  width:23px;height:23px;border-radius:50%;background:var(--navy-tint);color:var(--navy);
  font-size:11px;font-weight:800;display:grid;place-items:center;margin-top:1px;
}
/* The copy is wrapped so the whole sentence is ONE flex item. Without it the
   leading <b> becomes a flex sibling of the text after it and the two share
   the row, which on a phone squeezes the bold half into a three-word column. */
.next li > span{flex:1;min-width:0}
.next li b{color:var(--ink);font-weight:700}

/* ── callouts ─────────────────────────────────────────────────────────── */
.note{
  display:flex;gap:11px;align-items:flex-start;padding:14px 16px;border-radius:var(--r-s);
  font-size:13px;line-height:1.6;margin-top:20px;
}
.note svg{width:15px;height:15px;flex:none;margin-top:1px}
.note.info{background:var(--navy-tint);color:var(--navy)}
.note.warn{background:var(--warn-tint);color:var(--warn)}
.note.bad{background:var(--bad-tint);color:var(--bad)}
.note b{font-weight:700}

/* ── nav ──────────────────────────────────────────────────────────────── */
.nav{display:flex;align-items:center;gap:12px;margin-top:32px}
.nav .sp{flex:1}
.btn{
  border-radius:var(--r-s);padding:14px 26px;font-size:14.5px;font-weight:700;
  letter-spacing:.005em;transition:.18s var(--ease);text-align:center;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
}
.btn.pri{background:var(--gold);color:#fff;box-shadow:0 1px 2px rgba(163,127,24,.24)}
.btn.pri:hover{background:var(--gold-d)}
.btn.pri:disabled{opacity:.45;cursor:not-allowed;background:var(--gold)}
.btn.nav-navy{background:var(--navy);color:#fff}
.btn.nav-navy:hover{background:var(--navy-d)}
.btn.ghost{color:var(--ink-3);padding-left:4px;padding-right:12px}
.btn.ghost:hover{color:var(--navy)}
.btn.line{border:1px solid var(--line-2);color:var(--navy)}
.btn.line:hover{border-color:var(--navy);background:var(--navy-tint)}
.btn svg{width:15px;height:15px}

/* Honeypot. Hidden from people, irresistible to naive bots. The aria-hidden
   and the tabindex both matter: a screen reader must not announce it and a
   keyboard must never land on it. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Dismissible. It clears itself on any panel change, but while it is on screen
   the reader should be able to get rid of it rather than having to obey it:
   most of these are advisory, and a notice that cannot be closed reads as a
   blocker even when it is not one. */
.err{
  background:var(--bad-tint);color:var(--bad);border-radius:var(--r-s);
  padding:13px 42px 13px 16px;font-size:13.5px;font-weight:600;
  margin-top:20px;line-height:1.55;position:relative;cursor:pointer;
}
.err::after{
  content:"d7";position:absolute;right:13px;top:10px;
  font-size:20px;line-height:1;font-weight:400;opacity:.45;
}
.err:hover::after{opacity:.9}

/* ── footer ───────────────────────────────────────────────────────────── */
.foot{
  border-top:1px solid var(--line);padding:22px var(--edge);margin-top:auto;
  display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;justify-content:space-between;
  font-size:11.5px;color:var(--ink-3);
}
.foot a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--line-2);transition:.18s}
.foot a:hover{color:var(--navy);border-bottom-color:var(--navy)}


/* ── "How it will be used" ────────────────────────────────────────────────
   The popup that frames the demo for Anton. Four steps as arrows, and
   nothing else: a page that explained this at length was built and thrown
   away for being exactly that. */
.introv{
  position:fixed;inset:0;z-index:60;display:grid;place-items:center;
  padding:20px;background:rgba(15,33,64,.55);backdrop-filter:blur(3px);
  animation:introIn .2s var(--ease);
}
@keyframes introIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.introv{animation:none}}

.introbox{
  background:var(--card);border-radius:var(--r);box-shadow:var(--shadow-lg);
  padding:clamp(24px,4vw,34px);width:min(900px,100%);max-height:90dvh;overflow:auto;
}
.introbox h2{
  font-size:clamp(21px,3.2vw,27px);font-weight:800;color:var(--navy);
  letter-spacing:-.025em;line-height:1.15;
}

/* The arrow itself. Chevrons on a row at desk width, a stacked column with
   down-arrows on a phone, because four chevrons squeezed into 375px stop
   reading as a sequence and start reading as a mess. */
.steparrow{list-style:none;display:flex;gap:5px;margin:24px 0 26px}
.steparrow li{
  flex:1;min-width:0;position:relative;
  background:var(--navy-tint);padding:16px 14px 15px 26px;
  clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%);
}
.steparrow li:first-child{
  padding-left:16px;
  clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
}
.steparrow li:last-child{
  clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%, 14px 50%);
}
/* The last step is the point being made, so it is the one that is coloured. */
.steparrow li:last-child{background:var(--gold-tint)}
.steparrow li .sn{
  display:block;font-size:10px;font-weight:800;letter-spacing:.12em;
  color:var(--navy);opacity:.45;
}
.steparrow li:last-child .sn{color:var(--gold-d);opacity:.75}
.steparrow li b{
  display:block;font-size:13px;font-weight:700;color:var(--navy);
  line-height:1.28;margin-top:5px;letter-spacing:-.012em;
}
.steparrow li span:not(.sn){
  display:block;font-size:12.5px;line-height:1.5;color:var(--ink-2);margin-top:5px;
}

@media (max-width:720px){
  .steparrow{flex-direction:column;gap:10px}
  .steparrow li,
  .steparrow li:first-child,
  .steparrow li:last-child{clip-path:none;border-radius:var(--r-s);padding:14px 16px}
  .steparrow li::after{
    content:"";position:absolute;left:26px;bottom:-8px;width:0;height:0;
    border-left:6px solid transparent;border-right:6px solid transparent;
    border-top:7px solid var(--line-2);
  }
  .steparrow li:last-child::after{display:none}
}