/* ============================================================
   RateSecure Financial, Inc. — site stylesheet
   Palette: brand red #bf1922 (Brand_Guidelines_Mirko.pdf p.6)
   Type:    Inter Tight (display) + Inter (text)
   ============================================================ */

:root{
  /* surfaces */
  --page:#f8f9fb;
  --surface:#ffffff;
  --surface-warm:#faf8f8;
  --surface-tint:#fdf4f4;
  --ink-band:#14181f;
  --ink-band-2:#1c222c;

  /* ink */
  --ink:#14181f;
  --ink-2:#5b6572;
  --ink-3:#8b939e;
  --on-dark:#f4f5f7;
  --on-dark-2:#a8b0bb;

  /* lines */
  --line:#e7e9ee;
  --line-2:#f0f2f5;
  --line-dark:#2b323d;

  /* brand */
  --brand:#bf1922;
  --brand-bright:#e32832;
  --brand-deep:#92131a;
  --brand-soft:#e9555d;
  --brand-wash:#fdf1f2;

  /* support */
  --good:#0f7a4d;
  --good-wash:#e9f6ef;

  /* type */
  --display:"Inter Tight","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  /* geometry */
  --r-pill:999px;
  --r-card:11px;
  --r-panel:13px;
  --r-field:7px;
  --r-tight:5px;
  --wrap:1180px;
  --gut:24px;

  --shadow-sm:0 1px 2px rgba(20,24,31,.05), 0 1px 3px rgba(20,24,31,.04);
  --shadow-card:0 1px 2px rgba(20,24,31,.07), 0 8px 20px -4px rgba(20,24,31,.13);
  --shadow-card-h:0 2px 4px rgba(20,24,31,.08), 0 16px 34px -6px rgba(20,24,31,.19);
  --shadow-md:0 4px 16px rgba(20,24,31,.06), 0 1px 3px rgba(20,24,31,.04);
  --shadow-lg:0 18px 48px rgba(20,24,31,.10), 0 2px 8px rgba(20,24,31,.05);
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

body{
  margin:0;
  overflow-x:hidden;
  background:var(--page);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}

:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:4px}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--brand);color:#fff;padding:12px 18px;border-radius:0 0 var(--r-field) 0;
  font-weight:600;text-decoration:none;
}
.skip:focus{left:0}

/* ---------- layout ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.section{padding:72px 0}
.section--tight{padding:46px 0}
.section--warm{background:var(--surface-warm)}
.section--white{background:var(--surface)}

.band{background:var(--ink-band);color:var(--on-dark)}
.band h2,.band h3,.band h4{color:#fff}
.band p{color:var(--on-dark-2)}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--display);font-weight:600;letter-spacing:-.022em;line-height:1.1;margin:0}
h1{font-size:clamp(2.5rem,5.4vw,4.05rem);letter-spacing:-.032em;line-height:1.04}
h2{font-size:clamp(1.9rem,3.5vw,2.85rem);letter-spacing:-.028em}
h3{font-size:clamp(1.15rem,1.7vw,1.4rem)}
h4{font-size:1.02rem;letter-spacing:-.014em}
p{margin:0}

.eyebrow{
  font-family:var(--mono);
  font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brand);margin:0 0 15px;line-height:1.45;
  display:flex;align-items:flex-start;gap:9px;
}
.eyebrow::before{
  content:"";width:5px;height:5px;background:var(--brand);
  border-radius:1px;flex:none;transform:rotate(45deg);margin-top:.48em;
}
.sec-head--center .eyebrow{justify-content:center}
.band .eyebrow{color:var(--brand-soft)}

.lede{font-size:clamp(1.06rem,1.5vw,1.24rem);color:var(--ink-2);line-height:1.55;max-width:62ch}
.band .lede{color:var(--on-dark-2)}
.muted{color:var(--ink-2)}
.small{font-size:13.5px;line-height:1.55}
.fine{font-size:12.5px;line-height:1.55;color:var(--ink-3)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}

.sec-head{max-width:68ch;margin-bottom:38px}
.sec-head p{margin-top:16px}
.sec-head--center{margin-left:auto;margin-right:auto;text-align:center}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 26px;border-radius:var(--r-pill);
  font-size:15px;font-weight:600;letter-spacing:-.008em;
  text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:background-color .16s,border-color .16s,color .16s,transform .16s,box-shadow .16s;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--brand);color:#fff;box-shadow:var(--shadow-sm)}
.btn--primary:hover{background:var(--brand-deep);box-shadow:var(--shadow-md)}
.btn--ghost{background:transparent;color:var(--ink);border-color:#d5d9e1}
.btn--ghost:hover{border-color:var(--ink-3);background:var(--surface)}
.btn--onDark{background:#fff;color:var(--ink)}
.btn--onDark:hover{background:var(--on-dark)}
.btn--onDarkGhost{background:transparent;color:#fff;border-color:rgba(255,255,255,.28)}
.btn--onDarkGhost:hover{border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.06)}
.btn--sm{padding:9px 18px;font-size:14px}
.btn--lg{padding:16px 32px;font-size:16px}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
@media (max-width:560px){
  .hero .btn-row,.cta-band .btn-row{flex-direction:column;align-items:stretch;gap:10px}
  .hero .btn-row .btn,.cta-band .btn-row .btn{width:100%}
}

.arrow{transition:transform .16s}
.btn:hover .arrow{transform:translateX(3px)}

/* ---------- chips ---------- */
.chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 11px;border-radius:var(--r-tight);
  background:var(--surface);border:1px solid var(--line);
  font-family:var(--mono);font-size:11.5px;font-weight:500;color:var(--ink-2);
  letter-spacing:-.01em;
}
.chip .dot{width:4px;height:4px;border-radius:1px;background:var(--brand);flex:none;transform:rotate(45deg)}
.chip-row{display:flex;flex-wrap:wrap;gap:10px}

/* Anchor targets clear the 72px sticky header. Without this, jumping to
   #get-in-touch (linked from every page) parks the section heading — and the
   keyboard focus that follows it — underneath the header. .calc sets the same
   offset for the same reason. */
#main,#get-in-touch{scroll-margin-top:96px}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(248,249,251,.82);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;gap:28px;height:72px}
.brand{display:flex;align-items:center;flex:none;text-decoration:none}
.brand img{height:32px;width:auto}
.nav-links{display:flex;align-items:center;gap:4px;margin-left:8px;flex:1}
.nav-links a{
  padding:8px 12px;border-radius:var(--r-tight);
  font-size:14px;font-weight:500;color:var(--ink-2);text-decoration:none;
  transition:color .14s,background-color .14s;
}
.nav-links a:hover{color:var(--ink);background:rgba(20,24,31,.045)}
.nav-links a[aria-current="page"]{color:var(--ink);font-weight:600}
.nav-cta{display:flex;align-items:center;gap:10px;flex:none}
.nav-tel{font-size:14.5px;font-weight:600;text-decoration:none;color:var(--ink);white-space:nowrap}
.nav-tel:hover{color:var(--brand)}

.nav-toggle{
  display:none;flex:none;width:42px;height:42px;border-radius:var(--r-field);
  background:transparent;border:1px solid var(--line);cursor:pointer;
  align-items:center;justify-content:center;
}
.nav-toggle span{display:block;width:17px;height:1.5px;background:var(--ink);position:relative}
.nav-toggle span::before,.nav-toggle span::after{
  content:"";position:absolute;left:0;width:17px;height:1.5px;background:var(--ink);
  transition:transform .18s,top .18s;
}
.nav-toggle span::before{top:-5.5px}
.nav-toggle span::after{top:5.5px}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

@media (max-width:920px){
  .nav-toggle{display:flex}
  .nav-links{
    display:none;position:absolute;left:0;right:0;top:72px;
    flex-direction:column;align-items:stretch;gap:2px;
    background:var(--surface);border-bottom:1px solid var(--line);
    padding:14px var(--gut) 22px;box-shadow:var(--shadow-md);
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:12px 14px;font-size:16px}
  .nav-tel{display:none}
}

/* ---------- hero ---------- */
.hero{padding:56px 0 64px;position:relative;overflow:hidden}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(680px 380px at 84% -8%,rgba(191,25,34,.055),transparent 64%);
}
.hero .wrap{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:56px;align-items:start}
.hero h1{margin-bottom:22px}
.hero .lede{margin-bottom:30px}
.hero .btn-row{margin-bottom:26px}

@media (max-width:940px){
  .hero{padding:52px 0 44px}
  .hero-grid{grid-template-columns:1fr;gap:44px}
}

/* ---------- cards ---------- */
.grid{display:grid;gap:20px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:940px){
  .grid-3,.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
}

.card{
  background:var(--surface);border:1px solid #e1e5ec;border-radius:var(--r-card);
  padding:26px;box-shadow:var(--shadow-card);position:relative;
  transition:border-color .16s,box-shadow .16s,transform .16s;
}
.card h3{margin-bottom:10px}
.card p{color:var(--ink-2);font-size:14.8px}
.card--link{text-decoration:none;display:block}
.card--link:hover{border-color:var(--brand-soft);box-shadow:var(--shadow-card-h);transform:none}
.card .card-more{
  margin-top:18px;font-family:var(--mono);font-size:12px;font-weight:600;color:var(--brand);
  display:inline-flex;align-items:center;gap:7px;letter-spacing:-.01em;
}
.card--link:hover .arrow{transform:translateX(3px)}

.card-icon{
  width:34px;height:34px;border-radius:var(--r-tight);flex:none;
  background:var(--brand-wash);color:var(--brand);border:1px solid #f3d9db;
  display:flex;align-items:center;justify-content:center;margin-bottom:17px;
}
.card-icon svg{width:17px;height:17px}

.band .card{background:var(--ink-band-2);border-color:var(--line-dark);box-shadow:none}
.band .card--link:hover{box-shadow:none;border-color:var(--brand-soft)}
.band .card p{color:var(--on-dark-2)}
.band .card-icon{background:rgba(233,85,93,.14);color:var(--brand-soft)}

/* ---------- stat / step ---------- */
.steps{counter-reset:step;display:grid;gap:0}
.step{
  display:grid;grid-template-columns:auto 1fr;gap:22px;
  padding:26px 0;border-top:1px solid var(--line-dark);align-items:start;
}
.step:last-child{border-bottom:1px solid var(--line-dark)}
.step-n{
  font-family:var(--mono);font-size:12px;font-weight:600;
  color:var(--brand-soft);padding-top:6px;letter-spacing:.02em;
  min-width:34px;border-top:1px solid var(--brand-soft);margin-top:6px;
}
.step h3{margin-bottom:8px}
.step p{max-width:70ch}

/* ---------- feature list ---------- */
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.ticks li{display:grid;grid-template-columns:auto 1fr;gap:11px;font-size:14.8px;color:var(--ink-2);align-items:start}
.ticks svg{width:17px;height:17px;color:var(--brand);margin-top:3px;flex:none}
.band .ticks li{color:var(--on-dark-2)}
.band .ticks svg{color:var(--brand-soft)}

/* ---------- panel ---------- */
.panel{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-panel);padding:30px;box-shadow:var(--shadow-sm);
}
.panel-head{margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid var(--line-2)}
.panel-head h3{margin-bottom:6px}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line);max-width:860px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:20px 44px 20px 0;position:relative;
  font-family:var(--display);font-size:1.02rem;font-weight:600;letter-spacing:-.018em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:8px;top:50%;width:10px;height:10px;
  border-right:1.8px solid var(--ink-3);border-bottom:1.8px solid var(--ink-3);
  transform:translateY(-70%) rotate(45deg);transition:transform .18s;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq details[open] summary{color:var(--brand)}
.faq .faq-body{padding:0 44px 24px 0;color:var(--ink-2);font-size:15px;max-width:76ch}
.faq .faq-body p+p{margin-top:12px}

/* ---------- team ---------- */
.team-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  overflow:hidden;box-shadow:var(--shadow-sm);
  transition:box-shadow .16s,transform .16s;
}
.team-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.team-photo{
  aspect-ratio:1/1;background:linear-gradient(150deg,#f1f3f7,#e6e9f0);
  display:flex;align-items:center;justify-content:center;position:relative;
}
.team-photo img{width:100%;height:100%;object-fit:cover}
.team-initials{
  font-family:var(--display);font-size:2.6rem;font-weight:600;
  color:var(--brand);opacity:.35;letter-spacing:-.03em;
}
.team-body{padding:22px}
.team-body h3{margin-bottom:3px;font-size:1.12rem}
.team-role{font-size:13.5px;font-weight:600;color:var(--brand);margin-bottom:12px}
.team-body p{font-size:14.3px;color:var(--ink-2)}
.team-meta{
  margin-top:14px;padding-top:14px;border-top:1px solid var(--line-2);
  font-family:var(--mono);font-size:11.5px;color:var(--ink-3);letter-spacing:.02em;
}
.team-links{margin-top:12px;display:flex;gap:14px;font-size:13px}
.team-links a{color:var(--ink-2);text-decoration:none;font-weight:500}
.team-links a:hover{color:var(--brand)}

/* ---------- forms ---------- */
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field>span{font-size:13px;font-weight:600;color:var(--ink-2)}
.field input,.field select,.field textarea{
  background:var(--surface);border:1px solid #d9dde5;border-radius:var(--r-field);
  padding:11px 13px;font-size:15px;width:100%;min-width:0;
  transition:border-color .14s,box-shadow .14s;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(191,25,34,.11);
}
.field textarea{resize:vertical;min-height:120px}
.field-note{font-size:12px;color:var(--ink-3)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:620px){.form-grid{grid-template-columns:1fr}}
.form-grid .span-2{grid-column:1/-1}

/* ---------- CTA band ---------- */
.cta-band{
  background:var(--ink-band);color:#fff;border-radius:var(--r-panel);
  padding:56px;text-align:center;position:relative;overflow:hidden;
}
.cta-band::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(620px 300px at 50% 0%,rgba(227,40,50,.16),transparent 70%);
}
.cta-band>*{position:relative;z-index:1}
.cta-band h2{margin-bottom:16px}
.cta-band p{color:var(--on-dark-2);max-width:56ch;margin:0 auto 28px}
.cta-band .btn-row{justify-content:center}
@media (max-width:620px){.cta-band{padding:40px 24px}}

/* ---------- footer ---------- */
.site-footer{background:var(--ink-band);color:var(--on-dark-2);padding:64px 0 0;font-size:14px}
.footer-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;padding-bottom:48px}
@media (max-width:940px){.footer-top{grid-template-columns:1fr 1fr;gap:34px}}
@media (max-width:560px){.footer-top{grid-template-columns:1fr}}
.footer-brand img{height:30px;width:auto;margin-bottom:18px}
.footer-brand p{color:var(--on-dark-2);font-size:14px;max-width:34ch;margin-bottom:18px}
.footer-col h4{
  color:#fff;font-size:10.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  margin-bottom:16px;font-family:var(--mono);
}
.footer-col ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.footer-col a{color:var(--on-dark-2);text-decoration:none;transition:color .14s}
.footer-col a:hover{color:#fff}

.footer-legal{border-top:1px solid var(--line-dark);padding:30px 0 40px}
.footer-legal p{font-size:12.5px;line-height:1.65;color:#7c8593;margin-bottom:14px;max-width:none}
.footer-legal p:last-child{margin-bottom:0}
.footer-legal strong{color:var(--on-dark-2);font-weight:600}
.footer-bottom{
  display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;
  padding-top:18px;border-top:1px solid var(--line-dark);
}
.footer-bottom nav{display:flex;flex-wrap:wrap;gap:20px}
.footer-bottom a{color:#7c8593;text-decoration:none;font-size:12.5px}
.footer-bottom a:hover{color:#fff}
.eho{display:flex;align-items:center;gap:10px;color:#7c8593;font-size:12.5px}
.eho svg{width:26px;height:26px;flex:none;color:#7c8593}

/* ---------- misc ---------- */
.page-head{padding:64px 0 44px;border-bottom:1px solid var(--line)}
.page-head h1{font-size:clamp(2.1rem,4.2vw,3.15rem);margin-bottom:18px}
.prose{max-width:74ch}
.prose h2{margin:44px 0 16px;font-size:1.6rem}
.prose h3{margin:30px 0 12px}
.prose p{margin-bottom:16px;color:var(--ink-2)}
.prose ul,.prose ol{margin:0 0 16px;padding-left:22px;color:var(--ink-2)}
.prose li{margin-bottom:8px}
.prose a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}

.notice{
  background:var(--brand-wash);border:1px solid #f3d5d7;border-left:3px solid var(--brand);
  border-radius:var(--r-field);padding:18px 20px;font-size:14px;color:var(--ink-2);
}
.notice strong{color:var(--ink)}

.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r-card)}
table.data{width:100%;border-collapse:collapse;font-size:14px;background:var(--surface);min-width:520px}
table.data th,table.data td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line)}
table.data th{
  font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);background:var(--surface-warm);
}
table.data td{color:var(--ink-2)}
table.data td:first-child{color:var(--ink);font-weight:500}
table.data tr:last-child td{border-bottom:none}

/* ============================================================
   Calculators
   ============================================================ */
.calc{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-panel);
  padding:28px;box-shadow:var(--shadow-sm);scroll-margin-top:96px;
}
.calc-head{margin-bottom:24px}
.calc-head h3{margin-bottom:7px}
.calc-body{display:grid;grid-template-columns:1.05fr .95fr;gap:30px;align-items:start}
@media (max-width:860px){.calc-body{grid-template-columns:1fr;gap:26px}}

.calc-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:480px){.calc-fields{grid-template-columns:1fr}}
.calc-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.calc-field.wide{grid-column:1/-1}
.calc-field>span:first-child{
  font-family:var(--mono);font-size:11px;font-weight:600;color:var(--ink-2);
  letter-spacing:.02em;text-transform:uppercase;
}
.calc-field input,.calc-field select{
  background:var(--surface);border:1px solid #d9dde5;border-radius:var(--r-field);
  padding:10px 12px;font-size:15px;width:100%;min-width:0;
  font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em;
  transition:border-color .14s,box-shadow .14s;
}
.calc-field select{font-family:var(--sans);letter-spacing:normal}
.calc-field input:focus,.calc-field select:focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(191,25,34,.11);
}
.calc-field input::-webkit-outer-spin-button,
.calc-field input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.calc-field input[type=number]{-moz-appearance:textfield}
.calc-hint{font-size:11.5px;color:var(--ink-3);line-height:1.4}

.calc-affix{position:relative;display:block}
.calc-affix i{
  position:absolute;right:11px;top:50%;transform:translateY(-50%);
  font-style:normal;font-size:12px;font-weight:600;color:var(--ink-3);pointer-events:none;
}
.calc-affix input{padding-right:46px}

.calc-out{
  background:var(--surface-warm);border:1px solid var(--line);
  border-radius:var(--r-card);padding:24px;position:sticky;top:96px;
}
@media (max-width:860px){.calc-out{position:static}}

.calc-hero{
  display:flex;flex-direction:column;gap:3px;
  padding-bottom:20px;margin-bottom:18px;border-bottom:1px solid var(--line);
}
.calc-hero-label{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.calc-hero-value{
  font-family:var(--mono);font-size:clamp(1.9rem,3.4vw,2.5rem);font-weight:600;
  color:var(--brand);letter-spacing:-.035em;line-height:1.1;
}
.calc-hero-sub{font-size:13px;color:var(--ink-2)}

.calc-rows{margin:0;display:grid;gap:0}
.calc-row{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:9px 0;border-bottom:1px solid var(--line-2);
}
.calc-row:last-child{border-bottom:none}
.calc-row dt{font-size:13.5px;color:var(--ink-2);margin:0}
.calc-row dd{
  margin:0;font-size:14px;font-weight:500;color:var(--ink);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.calc-row.strong{border-top:1px solid var(--line);margin-top:5px;padding-top:13px}
.calc-row.strong dt{color:var(--ink);font-weight:600}
.calc-row.strong dd{font-weight:700;color:var(--brand)}

.calc-note{
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
  font-size:12.5px;line-height:1.55;color:var(--ink-2);
}
.calc-disc{
  margin-top:22px;padding-top:18px;border-top:1px solid var(--line-2);
  font-size:11.5px;line-height:1.55;color:var(--ink-3);
}

/* compact variant for in-page embeds */
.calc--inline{box-shadow:var(--shadow-sm);padding:26px}
.calc--inline .calc-body{grid-template-columns:1fr;gap:22px}
.calc--inline .calc-out{position:static}

/* Staging placeholder — content awaiting sign-off. Remove .tbd rules before launch. */
.tbd{
  background:repeating-linear-gradient(45deg,#fff8e6,#fff8e6 8px,#fff3d6 8px,#fff3d6 16px);
  border:1px dashed #d9a441;border-radius:6px;padding:2px 6px;color:#8a6114;
  font-style:italic;
}
.tbd-note{
  background:#fff8e6;border:1px dashed #d9a441;border-radius:var(--r-field);
  padding:16px 18px;font-size:13.5px;color:#8a6114;margin-bottom:28px;
}
.tbd-note strong{color:#6d4c0f}

/* ============================================================
   Stat bar
   ============================================================ */
.statbar{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:26px;align-items:start;
}
@media (max-width:1000px){.statbar{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}}
@media (max-width:560px){.statbar{grid-template-columns:1fr;gap:24px}}
.stat{display:flex;flex-direction:column;gap:8px;position:relative;padding-left:22px}
.stat::before{
  content:"";position:absolute;left:0;top:4px;bottom:4px;width:1px;
  background:linear-gradient(180deg,var(--brand-bright),rgba(227,40,50,.10));
}
.stat-n{
  font-family:var(--display);font-size:clamp(2.2rem,4vw,3.1rem);font-weight:600;
  color:#fff;letter-spacing:-.04em;line-height:1;display:flex;align-items:baseline;gap:6px;
}
.stat-n sup{font-size:.42em;color:var(--brand-soft);top:-.7em;position:relative}
.stat-u{font-size:.36em;font-weight:500;color:var(--on-dark-2);letter-spacing:-.01em}
.stat-l{font-family:var(--mono);font-size:12px;line-height:1.5;color:var(--on-dark-2);max-width:32ch;letter-spacing:-.01em}
sup.fn{font-size:.72em;color:#6f7887;margin-left:1px}

/* ============================================================
   Lead capture band (every page) + dismissible flash
   ============================================================ */
.capture{background:var(--ink-band);color:var(--on-dark);border-top:1px solid var(--line-dark)}
.capture-inner{
  display:grid;grid-template-columns:.85fr 1.15fr;gap:44px;align-items:start;
}
@media (max-width:940px){.capture-inner{grid-template-columns:1fr;gap:30px}}
.capture-copy h2{color:#fff;font-size:clamp(1.5rem,2.4vw,2rem);margin-bottom:12px}
.capture-copy p{color:var(--on-dark-2);font-size:14.5px;max-width:44ch}
.capture .eyebrow{color:var(--brand-soft)}
.capture .eyebrow::before{background:var(--brand-soft)}

.capture-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.capture-grid{grid-template-columns:1fr}}
.capture-form .field>span{color:var(--on-dark-2);font-size:12px}
.capture-form input,.capture-form select{
  background:var(--ink-band-2);border:1px solid var(--line-dark);color:var(--on-dark);
  border-radius:var(--r-field);padding:11px 13px;font-size:15px;
}
.capture-form input::placeholder{color:#6f7887}
.capture-form input:focus,.capture-form select:focus{
  outline:none;border-color:var(--brand-soft);box-shadow:0 0 0 3px rgba(233,85,93,.16);
}
.capture-form select option{background:var(--ink-band-2);color:var(--on-dark)}
.capture-actions{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:18px;
}
.capture-actions .fine{color:#7c8593;max-width:38ch}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* flash */
.flash{
  position:fixed;right:20px;bottom:20px;z-index:120;width:min(340px,calc(100vw - 40px));
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-panel);
  padding:22px 22px 20px;box-shadow:var(--shadow-lg);
  transform:translateY(14px);opacity:0;transition:transform .28s ease,opacity .28s ease;
}
.flash.in{transform:translateY(0);opacity:1}
.flash-eyebrow{
  font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--brand);margin-bottom:8px;
}
.flash h3{font-size:1.06rem;margin-bottom:7px;padding-right:20px}
.flash-body{font-size:13.5px;color:var(--ink-2);margin-bottom:16px}
.flash .btn{width:100%;justify-content:center}
.flash-x{
  position:absolute;top:12px;right:12px;width:26px;height:26px;line-height:1;
  border:0;background:transparent;color:var(--ink-3);font-size:20px;cursor:pointer;
  border-radius:var(--r-tight);
}
.flash-x:hover{color:var(--ink);background:var(--line-2)}
.flash-later{
  display:block;width:100%;margin-top:9px;padding:7px;border:0;background:transparent;
  color:var(--ink-3);font-size:12.5px;cursor:pointer;border-radius:var(--r-tight);
}
.flash-later:hover{color:var(--ink-2);background:var(--line-2)}
@media (prefers-reduced-motion:reduce){
  .flash{transition:none;transform:none}
}
@media print{.flash{display:none}}

/* Separate the capture band from the footer beneath it. */
.capture + .site-footer{border-top:1px solid var(--line-dark)}

/* ============================================================
   Payment chart + amortization schedule
   ============================================================ */
.calc-chart{margin-top:28px;padding-top:24px;border-top:1px solid var(--line)}
.calc-chart-head{margin-bottom:14px}
.calc-chart-head h4{margin-bottom:5px}
.chart-host{position:relative}
.chart-host svg{display:block;width:100%;height:auto;overflow:visible}

.chart-legend{
  display:flex;gap:20px;margin-top:12px;
  font-family:var(--mono);font-size:11.5px;color:var(--ink-2);
}
.chart-legend span{display:inline-flex;align-items:center;gap:7px}
.chart-legend i{width:9px;height:9px;border-radius:2px;flex:none}

.chart-tip{
  position:absolute;top:6px;transform:translateX(-50%);pointer-events:none;
  background:var(--ink-band);color:#fff;border-radius:var(--r-tight);
  padding:9px 12px;font-size:12px;line-height:1.5;min-width:150px;
  box-shadow:var(--shadow-md);z-index:2;
}
.chart-tip b{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:#a8b0bb;font-weight:600;margin-bottom:5px;font-family:var(--mono)}
.chart-tip span{display:flex;align-items:center;gap:7px;white-space:nowrap}
.chart-tip i{width:8px;height:8px;border-radius:2px;flex:none}
.chart-tip em{margin-left:auto;font-style:normal;font-weight:600;
  font-family:var(--mono);font-variant-numeric:tabular-nums}
.chart-tip .bal{margin-top:5px;padding-top:5px;border-top:1px solid #2b323d;color:#a8b0bb}

.sched-btn{margin-top:22px}
.sched{margin-top:16px}
.sched-table{font-size:13px}
.sched-table td,.sched-table th{padding:9px 14px}
.sched-table td{font-family:var(--mono);font-variant-numeric:tabular-nums}
.sched-table tbody tr:nth-child(odd){background:var(--surface-warm)}

/* Single-column hero: no calculator competing with the headline. */
.hero-solo{max-width:900px}
.hero-solo h1{font-size:clamp(2.7rem,6.2vw,4.6rem)}
.hero-solo .lede{max-width:60ch;font-size:clamp(1.1rem,1.65vw,1.32rem)}
.hero-solo .btn-row{margin-bottom:30px}

/* About-page tagline triptych. */
.tagline{
  margin-top:26px;display:flex;flex-wrap:wrap;gap:0 10px;
  font-family:var(--display);font-weight:600;letter-spacing:-.02em;
  font-size:clamp(1.05rem,1.7vw,1.35rem);color:var(--ink);
}
.tagline span{position:relative;padding-left:14px}
.tagline span::before{
  content:"";position:absolute;left:0;top:.52em;width:5px;height:5px;
  background:var(--brand);border-radius:1px;transform:rotate(45deg);
}

/* ============================================================
   Convergence diagram (Who we're built for)
   Hidden on narrow screens — the card grid below carries the
   same content, and a radial figure is illegible at 390px.
   ============================================================ */
.hub{margin:0 0 44px;color:var(--ink)}
.hub svg{display:block;width:100%;max-width:780px;height:auto;margin:0 auto}
.hub figcaption{
  margin-top:14px;text-align:center;font-size:13px;color:var(--ink-2);
  max-width:60ch;margin-left:auto;margin-right:auto;
}
.hub-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.hub-hint{display:none}

/* A seven-spoke radial is illegible scaled down to a phone, so below 780px the
   figure keeps a readable minimum width and scrolls sideways inside its own
   container rather than disappearing. */
@media (max-width:780px){
  .hub svg{min-width:660px;max-width:none}
  .hub-hint{
    display:block;margin-top:10px;text-align:center;
    font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
    text-transform:uppercase;color:var(--ink-3);
  }
}

/* Statement page-head: the headline is the argument. */
.page-head--stmt{padding-bottom:52px}
.page-head--stmt h1{
  font-size:clamp(2.1rem,4.6vw,3.6rem);max-width:20ch;
  letter-spacing:-.032em;line-height:1.06;margin-bottom:22px;
}
.page-head--stmt .lede{max-width:56ch}

/* Second hero paragraph sits closer than a default block gap. */
.lede--next{margin-top:16px}

/* Programme tagline inside a card. */
.prog-tag{
  font-family:var(--display);font-size:14.5px;font-weight:600;
  color:var(--brand);letter-spacing:-.012em;margin-bottom:10px!important;
}

/* Every card carries exactly one mark. Cards with an icon already have theirs;
   these are the ones where the heading is the first child, so they get a short
   brand rule instead of sitting bare. No :has() needed. */
.card > h3:first-child{position:relative;padding-top:18px}
.card > h3:first-child::before{
  content:"";position:absolute;top:0;left:0;
  width:22px;height:2px;border-radius:1px;background:var(--brand);
}
.band .card > h3:first-child::before{background:var(--brand-soft)}