/* ============================================================================
   24Own.ae — design tokens & styles.

   Signature idea: the calculator's output is treated as a real artifact — an
   "ownership plan" card in the shape of a boarding pass (dashed perforation,
   ledger-precise mono figures) — because the whole product is "answer four
   questions, get handed a real plan." Optimistic, premium, no red, no
   urgency. See docs/frontend-report.md for the full design rationale.
   ========================================================================== */

:root{
  --paper:#F6F3EC;
  --paper-alt:#EFEAE0;
  --ink:#1C2530;
  --navy:#16324F;
  --navy-deep:#0E2338;
  --gold:#C3993F;
  --gold-soft:#E4C77A;
  /* Darker gold for TEXT on light backgrounds — the base --gold above reads
     ~2.2-2.6:1 on paper/white, well under AA. Decorative uses (slider thumb,
     hover borders, the "24" logotype) keep --gold; anything conveying
     meaning as text uses this instead. ~5-6:1 on paper/paper-alt/white. */
  --gold-text:#7A5A22;
  --sage:#6F9179;
  --line:rgba(28,37,48,.14);
  --line-strong:rgba(28,37,48,.22);
  /* .62 measured ~4.3-4.47:1 on this site's light backgrounds — under AA's
     4.5:1 for normal text (disclaimer, field hints). .70 clears it with
     margin (~5.5-5.8:1) everywhere --muted is used. */
  --muted:rgba(28,37,48,.70);
  --white:#FFFFFF;
  --shadow:0 24px 60px -32px rgba(14,35,56,.28);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}
body{
  font-family:'Figtree',sans-serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.display{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;letter-spacing:-.01em;line-height:1.04}
.mono{font-family:'JetBrains Mono',monospace}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;background:none;border:none;color:inherit}
input,select,textarea{font-family:inherit}
/* A class that sets `display` outbids the [hidden] attribute's display:none,
   so .btn[hidden] stays visible. The wizard hides its Continue button on the
   last step, where the form's own submit lives — without this the two sit
   side by side competing for the same tap. */
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:4px}
.skip-link{
  position:absolute;left:-9999px;top:0;background:var(--navy);color:var(--white);
  padding:12px 18px;border-radius:0 0 8px 0;z-index:200;font-weight:600;
}
.skip-link:focus{left:0}

/* ---------- top bar ---------- */
.topbar{display:flex;justify-content:space-between;align-items:baseline;padding:26px 24px 18px}
.brand{display:flex;align-items:baseline;gap:6px}
.brand-mark{font-size:22px}
.n24{color:var(--gold)}
.brand-suffix{font-size:11px;color:var(--muted)}
.brand-tag{font-size:10.5px;letter-spacing:.14em;color:var(--muted)}
@media(max-width:640px){
  .topbar{flex-direction:column;align-items:center;gap:6px;text-align:center;padding:22px 24px 16px}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:16px 30px;border-radius:12px;font-weight:700;font-size:16px;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
  white-space:nowrap;
}
.btn-primary{background:var(--navy);color:var(--white);box-shadow:0 14px 32px -14px rgba(22,50,79,.55)}
.btn-primary:hover{background:var(--navy-deep);transform:translateY(-1px)}
.btn-primary:disabled{background:var(--line-strong);color:var(--muted);box-shadow:none;cursor:not-allowed;transform:none}
.btn-ghost{background:transparent;color:var(--navy);border:1.5px solid var(--line-strong)}
.btn-ghost:hover{border-color:var(--navy)}
.btn-busy{opacity:.75;cursor:progress}

/* ---------- hero ---------- */
.hero{padding:36px 0 72px}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center}
@media(max-width:920px){.hero-grid{grid-template-columns:1fr;gap:40px}}
.eyebrow{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-text);font-weight:700;margin-bottom:16px}
/* two sentences now, so a shade smaller than a one-line headline would take */
h1.display{font-size:clamp(33px,4.6vw,52px);color:var(--navy-deep)}
.hero-sub{font-size:18px;color:var(--muted);margin:20px 0 0;max-width:50ch}
.hero-cta{margin-top:30px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.hero-note{font-size:13px;color:var(--muted)}
@media(max-width:640px){
  .hero-cta{align-items:stretch}
  .hero-cta .btn{width:100%}
  .hero-note{text-align:center}
}

/* ---------- the hero wizard (the page's one call to action) ---------- */
.wizard{
  background:var(--white);border-radius:20px;box-shadow:var(--shadow);
  padding:26px 26px 22px;display:flex;flex-direction:column;
  /* Steps differ in height; a floor stops the card resizing under the reader
     on every Continue, which reads as the page jumping. */
  min-height:430px;
}
@media(max-width:640px){.wizard{padding:22px 18px 18px;border-radius:16px;min-height:0}}
/* Most paid traffic is mobile, where the wizard stacks under the hero copy and
   was landing right on the fold. The "How does this work?" exit is redundant
   on a single column — the explanation sections are the very next thing the
   reader scrolls into — so drop it here and let the first question come up. */
@media(max-width:920px){
  .hero-cta{display:none}
  .hero-copy .hero-sub{margin-bottom:24px}
}
.wizard-head{margin-bottom:20px}
.wizard-count{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.wizard-bar{margin-top:8px;height:3px;border-radius:2px;background:var(--line);overflow:hidden}
.wizard-bar-fill{display:block;height:100%;background:var(--gold);transition:width .25s ease}
/* The result step is much taller than the question steps (plan card, settlement
   table, disclaimer). Left alone it stretches the hero past the fold and undoes
   the reason the wizard is up here at all. Bound the content and let it scroll
   inside — the nav sits outside this box, so Back and Continue never scroll
   away from the reader. */
.wizard-body{flex:1 1 auto;max-height:min(58vh,520px);overflow-y:auto;overscroll-behavior:contain}
@media(max-width:920px){.wizard-body{max-height:none;overflow-y:visible}}
.wizard-step{animation:wizard-in .2s ease}
@keyframes wizard-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .wizard-step{animation:none}
  .wizard-bar-fill{transition:none}
}
.wizard-q{font-size:20px;font-weight:800;line-height:1.28;color:var(--ink)}
.wizard-q:focus{outline:none}
.wizard-hint{font-size:13.5px;color:var(--muted);margin-top:6px}
.wizard-sublabel{margin-top:22px;font-size:14px;font-weight:700;color:var(--ink)}
.wizard-step .slider-row{margin-top:20px}
.wizard-step .toggle-group{margin-top:12px}
.wizard-step .field{margin-top:18px}
.wizard-step-result .calc-result{margin:0}
.wizard-step-result .disclaimer{margin-top:16px;font-size:11.5px}
.wizard-submit{width:100%;margin-top:22px}
.wizard-blocked{
  margin-top:16px;font-size:13px;font-weight:600;color:#B4472F;
  background:rgba(180,71,47,.08);border-radius:9px;padding:9px 12px;
}
.wizard-nav{display:flex;align-items:center;gap:14px;margin-top:14px;padding-top:18px;border-top:1px solid var(--line)}
.wizard-next{margin-left:auto}
.wizard-back{
  background:none;border:none;padding:0;cursor:pointer;
  font-size:13.5px;font-weight:600;color:var(--muted);font-family:inherit;
}
.wizard-back:hover{color:var(--navy)}
.wizard-noscript{min-height:0;gap:14px;align-items:flex-start}

/* The country code sits against the number, so they read as one field.
   These need to out-specify `.field input,.field select{width:100%}` further
   down the sheet — otherwise the select claims the whole row and the number
   input is pushed out of sight. */
.phone-row{display:flex;gap:8px;align-items:stretch}
.field .phone-row .phone-cc{flex:0 0 auto;width:116px;padding-inline:10px}
.field .phone-row input[type="tel"]{flex:1 1 auto;width:auto;min-width:0}

/* ---------- shared section head (the explanation sections) ---------- */
.section-head{max-width:660px;margin:0 auto 34px;text-align:center}
.section-head .section-title{font-size:clamp(26px,3.6vw,36px)}
.section-head .section-sub{margin-bottom:0}

/* ---------- how it works ---------- */
.steps-section{padding:4px 0 64px}
.steps-grid{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:820px){.steps-grid{grid-template-columns:1fr;gap:14px}}
.step-card{background:var(--white);border-radius:18px;padding:30px 28px;box-shadow:0 16px 40px -30px rgba(14,35,56,.5)}
@media(max-width:640px){.step-card{padding:26px 22px}}
.step-num{font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--gold-text);margin-bottom:14px}
.step-title{font-size:17px;line-height:1.35;color:var(--navy-deep);margin-bottom:10px}
.step-body{font-size:14.5px;color:var(--muted)}

/* ---------- comparison table (defines the category against the two the reader knows) ---------- */
.compare-section{padding:0 0 64px}
.compare-scroll{background:var(--white);border-radius:20px;box-shadow:var(--shadow);overflow-x:auto}
/* fixed layout so the three option columns stay equal, and so the mobile
   min-width below is actually honoured instead of being pushed out by content */
.compare-table{width:100%;min-width:680px;table-layout:fixed;border-collapse:separate;border-spacing:0;font-size:14.5px}
.compare-table th,.compare-table td{padding:18px 20px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.compare-table tbody tr:last-child th,.compare-table tbody tr:last-child td{border-bottom:none}
.compare-table thead th{font-size:13px;font-weight:700;color:var(--muted);letter-spacing:.03em}
.compare-table td{color:var(--muted)}
/* the row label stays put while the columns scroll on a phone */
.compare-corner,.compare-table th[scope="row"]{
  position:sticky;left:0;background:var(--white);z-index:1;
  width:212px;min-width:212px;box-shadow:1px 0 0 var(--line);
}
.compare-table th[scope="row"]{font-weight:700;color:var(--ink)}
.compare-table .own-col{background:rgba(22,50,79,.045)}
.compare-table tbody .own-col{color:var(--ink);font-weight:600}
.compare-table thead .own-col{background:var(--navy);color:var(--white);font-size:15px;border-bottom-color:var(--navy)}
.compare-hint{display:none}
/* On a phone the table scrolls rather than reflowing — a real <table> with real
   row headers survives, and the page body never scrolls sideways. Sized so a
   390px screen lands on the row label, "Renting today" and the 24Own column,
   which is the comparison that matters; the mortgage column is one swipe away. */
@media(max-width:760px){
  .compare-table{min-width:470px;font-size:13px}
  .compare-table th,.compare-table td{padding:13px 12px}
  .compare-table thead th{font-size:12px}
  .compare-table thead .own-col{font-size:13.5px}
  .compare-corner,.compare-table th[scope="row"]{width:120px;min-width:120px}
  .compare-hint{display:block;font-size:12.5px;color:var(--muted);margin-top:12px;text-align:center}
}

/* ---------- calculator card ---------- */
.calc-section{padding:0 0 56px}
.calc-card{
  background:var(--white);border-radius:22px;box-shadow:var(--shadow);
  overflow:hidden;display:grid;grid-template-columns:1fr 1fr;
}
@media(max-width:920px){.calc-card{grid-template-columns:1fr}}
.calc-inputs{padding:44px 40px;border-right:1px solid var(--line)}
@media(max-width:920px){.calc-inputs{border-right:none;border-bottom:1px solid var(--line)}}
@media(max-width:640px){.calc-inputs{padding:32px 22px}}
.section-eyebrow{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-text);font-weight:700;margin-bottom:10px}
.section-title{font-size:clamp(22px,3vw,28px);color:var(--navy-deep);margin-bottom:8px}
.section-sub{color:var(--muted);font-size:15px;margin-bottom:30px}

fieldset.field{border:none;padding:0;margin:0 0 30px}
fieldset.field:last-child{margin-bottom:0}
.field-label{display:block;font-weight:700;font-size:15px;color:var(--ink);margin-bottom:4px}
.field-hint{font-size:13px;color:var(--muted);margin-bottom:14px}
.optional{font-weight:400;color:var(--muted);text-transform:none;letter-spacing:0}

/* sliders */
.slider-row{display:flex;align-items:center;gap:16px;margin-bottom:14px}
.slider-value{flex-shrink:0;font-size:15px;font-weight:600;color:var(--navy);min-width:112px;text-align:right}
input[type="range"].range{
  -webkit-appearance:none;appearance:none;flex:1;height:6px;border-radius:99px;
  background:var(--line);outline-offset:6px;
}
input[type="range"].range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;
  background:var(--gold);border:3px solid var(--white);box-shadow:0 2px 8px rgba(22,50,79,.35);
  cursor:pointer;transition:transform .15s ease;
}
input[type="range"].range:hover::-webkit-slider-thumb{transform:scale(1.08)}
input[type="range"].range::-moz-range-thumb{
  width:24px;height:24px;border-radius:50%;background:var(--gold);
  border:3px solid var(--white);box-shadow:0 2px 8px rgba(22,50,79,.35);cursor:pointer;
}
input[type="range"].range::-moz-range-track{height:6px;border-radius:99px;background:var(--line)}

.preset-row{display:flex;flex-wrap:wrap;gap:8px}
.preset-btn{
  padding:8px 14px;border-radius:99px;border:1.5px solid var(--line-strong);
  font-size:13px;font-weight:600;color:var(--navy);background:var(--white);
  transition:border-color .15s,background .15s;
}
.preset-btn:hover{border-color:var(--gold)}
.preset-btn[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:var(--white)}

/* toggle groups (term / income / areas / ptype) */
.toggle-group{display:flex;flex-wrap:wrap;gap:10px}
.toggle-btn{
  padding:12px 16px;border-radius:11px;border:1.5px solid var(--line-strong);
  font-size:14px;font-weight:600;color:var(--ink);background:var(--white);
  transition:border-color .15s,background .15s,color .15s;text-align:left;
}
.toggle-btn:hover{border-color:var(--gold)}
.toggle-btn[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:var(--white)}
.chip-group .toggle-btn{padding:9px 15px;border-radius:99px;font-size:13.5px}

/* ---------- result panel ---------- */
.calc-result{padding:44px 40px;background:var(--paper-alt);display:flex;flex-direction:column}
@media(max-width:640px){.calc-result{padding:32px 22px}}

.result-prompt{
  margin:auto;text-align:center;padding:30px 10px;color:var(--muted);
}
.result-prompt .prompt-mark{
  width:52px;height:52px;border-radius:50%;border:2px dashed var(--line-strong);
  display:flex;align-items:center;justify-content:center;margin:0 auto 16px;
  font-family:'JetBrains Mono',monospace;font-size:20px;color:var(--gold);
}
.result-prompt p{font-size:14.5px;max-width:32ch;margin:0 auto}
.result-prompt strong{display:block;color:var(--ink);font-size:16px;margin-bottom:6px}

.result-guard{background:var(--white);border-radius:16px;padding:26px 24px;box-shadow:0 12px 30px -20px rgba(22,50,79,.25)}
.result-guard h3{font-size:17px;color:var(--navy-deep);margin-bottom:8px}
.result-guard p{font-size:14.5px;color:var(--muted);margin-bottom:16px}
.result-guard .suggested{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:var(--paper);border-radius:11px;padding:14px 16px;margin-bottom:16px;
}
.result-guard .suggested .mono{font-size:17px;font-weight:700;color:var(--navy)}

/* the plan card — signature "ownership pass" */
.plan-card{
  background:var(--navy);color:var(--white);border-radius:18px;
  padding:30px 26px 26px;box-shadow:0 20px 44px -22px rgba(14,35,56,.55);
  position:relative;
}
.plan-card .plan-eyebrow{font-size:11px;letter-spacing:.12em;color:var(--gold-soft);margin-bottom:6px}
.plan-figure{
  font-size:clamp(30px,4.2vw,42px);font-weight:700;color:var(--white);
  margin-bottom:2px;line-height:1.05;
}
.plan-figure .cur{font-size:.5em;color:var(--gold-soft);font-weight:600;margin-right:6px;vertical-align:middle}
.plan-sub{font-size:13px;color:rgba(255,255,255,.68);margin-bottom:22px}

.plan-perforation{
  position:relative;height:1px;margin:0 -26px 20px;
  background-image:linear-gradient(to right,rgba(255,255,255,.28) 0 8px,transparent 8px 16px);
  background-size:16px 1px;background-repeat:repeat-x;
}
.plan-perforation::before,.plan-perforation::after{
  content:"";position:absolute;top:50%;width:20px;height:20px;border-radius:50%;
  background:var(--paper-alt);transform:translateY(-50%);
}
.plan-perforation::before{left:-36px}
.plan-perforation::after{right:-36px}
/* the plan card also appears inside the (white) confirmation card — the notch
   "cut" only reads correctly if it matches whatever it's sitting on */
.plan-card.on-white .plan-perforation::before,
.plan-card.on-white .plan-perforation::after{background:var(--white)}

.plan-rows{display:flex;flex-direction:column;gap:12px;margin-bottom:6px}
.plan-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font-size:14px}
.plan-row .label{color:rgba(255,255,255,.72)}
.plan-row .value{font-weight:600}
.plan-row.total{padding-top:12px;border-top:1px solid rgba(255,255,255,.18)}
.plan-row.total .label{color:var(--white);font-weight:600}
.plan-row.total .value{color:var(--gold-soft);font-size:16px}
.plan-footnote{font-size:12.5px;color:rgba(255,255,255,.6);margin-top:14px;line-height:1.5}

/* settlement schedule — "pay sooner, pay less" */
.settlement{margin-top:32px}
.settlement-head{margin-bottom:18px}
.settlement-head h3{font-size:16px;color:var(--navy-deep);margin-bottom:4px}
.settlement-head p{font-size:13px;color:var(--muted)}
.settlement-track{display:flex;gap:0;align-items:stretch}
.settlement-node{flex:1;text-align:center;position:relative;padding-top:22px}
.settlement-node::before{
  content:"";position:absolute;top:6px;left:0;right:0;height:2px;background:var(--line-strong);
}
.settlement-node:first-child::before{left:50%}
.settlement-node:last-child::before{right:50%}
.settlement-dot{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:14px;height:14px;border-radius:50%;background:var(--white);border:2.5px solid var(--line-strong);
}
.settlement-node.current .settlement-dot{background:var(--gold);border-color:var(--gold)}
.settlement-node.current::before{background:var(--gold)}
.settlement-term{font-size:12.5px;color:var(--muted);font-weight:600;margin-bottom:4px}
.settlement-price{font-size:15px;font-weight:700;color:var(--navy-deep)}
.settlement-node.current .settlement-term{color:var(--navy)}
.settlement-node.current .settlement-price{color:var(--gold-text)}
.settlement-tag{font-size:10.5px;color:var(--gold-text);font-weight:700;letter-spacing:.06em;margin-top:4px;text-transform:uppercase}
.settlement-tag-warn{color:var(--muted);font-size:10.5px;font-weight:700;letter-spacing:.02em;margin-top:4px;text-transform:none}
.settlement-node.unfundable .settlement-price{color:var(--navy-deep)}
.unfundable-mark{color:var(--gold-text);font-weight:700;margin-left:2px}
.settlement-note{margin-top:16px;font-size:12px;line-height:1.6;color:var(--muted)}
@media(max-width:520px){
  .settlement-track{flex-direction:column;gap:18px}
  .settlement-node::before{display:none}
  .settlement-node{padding-top:0;padding-left:24px;text-align:left}
  .settlement-dot{left:0;top:4px;transform:none}
}

.calc-cta{margin-top:28px}
.calc-cta .btn{width:100%}

.disclaimer{margin-top:26px;font-size:12px;line-height:1.6;color:var(--muted);border-top:1px solid var(--line);padding-top:18px}

/* ---------- is this you? (self-identification, after the numbers) ---------- */
.profiles-section{padding:0 0 64px}
.profile-grid{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
@media(max-width:760px){.profile-grid{grid-template-columns:1fr}}
.profile-card{
  background:var(--white);border-radius:18px;padding:26px 28px;
  border-left:3px solid var(--gold);box-shadow:0 16px 40px -30px rgba(14,35,56,.5);
}
@media(max-width:640px){.profile-card{padding:22px 22px}}
.profile-title{font-size:15px;color:var(--navy-deep);margin-bottom:8px}
.profile-body{font-size:15px;line-height:1.65;color:var(--muted)}

/* ---------- straight answers (faq) ---------- */
.faq-section{padding:0 0 72px}
.faq-list{max-width:780px;margin:0 auto;background:var(--white);border-radius:20px;box-shadow:var(--shadow);overflow:hidden}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item:last-child{border-bottom:none}
.faq-q{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:22px 26px;cursor:pointer;list-style:none}
.faq-q::-webkit-details-marker{display:none}
.faq-q::after{content:"+";font-family:'JetBrains Mono',monospace;font-size:20px;line-height:1.3;color:var(--gold-text);flex-shrink:0}
.faq-item[open] .faq-q::after{content:"–"}
.faq-q-text{font-size:16px;line-height:1.4;color:var(--navy-deep)}
.faq-q:hover .faq-q-text{color:var(--navy)}
.faq-a{padding:0 26px 24px;font-size:14.5px;line-height:1.7;color:var(--muted)}
.faq-a p+p{margin-top:12px}
@media(max-width:640px){
  .faq-q{padding:18px 20px}
  .faq-a{padding:0 20px 20px}
}

/* Answers blocked on underwriting or the legal/DLD review. Deliberately loud
   and open by default: this section must be impossible to publish by accident
   while a placeholder is still in it. Also flagged in the markup with
   data-pending="true". */
.faq-pending{background:repeating-linear-gradient(135deg,rgba(180,71,47,.06) 0 12px,transparent 12px 24px)}
.faq-pending .faq-q-text,.faq-pending .faq-q::after{color:#B4472F}
.faq-pending-flag{
  display:inline-block;background:#B4472F;color:var(--white);border-radius:6px;
  font-size:11px;font-weight:700;letter-spacing:.08em;padding:6px 10px;margin-bottom:12px;
}

/* ---------- lead section ---------- */
.lead-section{padding:0 0 80px}
.lead-card{background:var(--white);border-radius:22px;box-shadow:var(--shadow);padding:46px 44px}
@media(max-width:640px){.lead-card{padding:32px 22px;border-radius:18px}}
.form-subhead{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--navy);font-weight:700;margin:28px 0 16px}
.form-subhead:first-of-type{margin-top:0}

.lead-locked{
  background:var(--paper-alt);border-radius:12px;padding:16px 18px;
  font-size:14px;color:var(--muted);margin-top:8px;
}
#lead-form{margin-top:8px}

.field{margin-bottom:16px}
.field label{display:block;font-size:13px;font-weight:700;color:var(--ink);margin-bottom:6px}
.field input,.field select,.field textarea{
  width:100%;padding:13px 15px;border:1.5px solid var(--line-strong);border-radius:11px;
  font-size:15px;background:var(--white);color:var(--ink);
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold)}
.field input.inp-err,.field select.inp-err{border-color:#B4472F}
.field-err{font-size:12.5px;color:#B4472F;margin-top:6px}
.hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

.lead-submit-row{margin-top:8px}
.lead-submit-row .btn{width:100%}
.lead-microcopy{font-size:12.5px;color:var(--muted);text-align:center;margin-top:12px}

/* confirmation swap */
.confirm{text-align:center;padding:20px 0 6px}
.confirm .tick{
  width:56px;height:56px;border-radius:50%;background:var(--sage);color:var(--white);
  display:flex;align-items:center;justify-content:center;font-size:26px;margin:0 auto 18px;
}
.confirm h2{font-size:26px;color:var(--navy-deep);margin-bottom:12px}
.confirm p{color:var(--muted);font-size:15px;max-width:44ch;margin:0 auto 8px}
.confirm .plan-card{margin-top:26px;text-align:left}

/* ---------- footer ---------- */
.site-footer{padding:40px 0 60px;border-top:1px solid var(--line)}
.footer-grid{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px}
.footer-brand{color:var(--navy);font-weight:700}
.footer-links{display:flex;gap:20px}
.footer-links a{font-size:13px;font-weight:600;color:var(--navy)}
.footer-links a:hover{color:var(--gold)}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;z-index:100;display:none}
.modal.open{display:block}
.modal-overlay{position:absolute;inset:0;background:rgba(14,35,56,.55)}
.modal-panel{
  position:relative;max-width:640px;margin:6vh auto;background:var(--white);
  border-radius:18px;padding:36px 32px;max-height:88vh;overflow-y:auto;box-shadow:var(--shadow);
}
@media(max-width:640px){.modal-panel{margin:0;max-height:100vh;height:100vh;border-radius:0;padding:28px 22px}}
.modal-close{position:absolute;top:18px;right:18px;font-size:26px;line-height:1;color:var(--muted);width:36px;height:36px}
.modal-close:hover{color:var(--ink)}
.modal-body{margin-top:16px;font-size:14.5px;color:var(--muted);line-height:1.7}
.modal-body h4,.modal-body h5{color:var(--ink);margin:20px 0 8px;font-size:15px}
.modal-body p{margin-bottom:10px}
.modal-body ul{margin:0 0 12px 20px}
.modal-body li{margin-bottom:6px}

@media(prefers-color-scheme:dark){
  /* This product's premium/optimistic identity is deliberately fixed-light —
     a financial "statement" reads as more trustworthy on paper-white than
     inverted. No dark-mode override; the palette above is intentional either way. */
}