/* ============================================================
   AURUS.AI — 2026 CONTENT COMPONENTS
   Supplements main.css / components.css / animations.css.
   Adds only the components the two-vertical content needs.
   Every colour is taken from the existing brand tokens:
   navy #061C39, gold #FFC000. Healthcare teal #00897B is used
   ONLY to separate the two verticals from each other.
   ============================================================ */

:root{
  --a-navy:#061C39;
  --a-navy-2:#0a2847;
  --a-gold:#FFC000;
  --a-gold-2:#e6ac00;
  --a-health:#00897B;
  --a-health-dk:#00695C;
  --a-ink:#1e293b;
  --a-muted:#64748b;
  --a-line:#e2e8f0;
  --a-wash:#f8fafc;
  --a-yes:#15803d;
  --a-no:#94a3b8;
}

/* ── Section scaffolding ─────────────────────────────────── */
.section-alt{background:var(--a-wash)}
.section-badge{
  display:inline-block;background:rgba(255,192,0,.16);color:#7a5b00;
  font-size:.78rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  padding:7px 15px;border-radius:99px;margin-bottom:1rem;
}

/* ── Hero badge pieces (used by the carousel slides) ─────── */
.badge-icon{margin-right:.5rem}
.badge-text{font-weight:600}

/* ── Answer block — the paragraph answer engines lift ────── */
.aurus-answer{
  max-width:900px;margin:0 auto 3rem;padding:1.6rem 2rem;
  background:#fff;border:1px solid var(--a-line);border-left:5px solid var(--a-gold);
  border-radius:0 12px 12px 0;box-shadow:0 4px 20px rgba(6,28,57,.06);
}
.aurus-answer p{margin:0;font-size:1.15rem;line-height:1.7;color:var(--a-ink)}
.aurus-answer strong{color:var(--a-navy);font-weight:700}

/* ── Numbered process cards ──────────────────────────────── */
.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;margin-bottom:3rem}
.feature-card{
  background:#fff;border:1px solid var(--a-line);border-radius:12px;padding:1.9rem 1.6rem;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.feature-card:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(6,28,57,.1);border-color:var(--a-gold)}
.feature-step{
  display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  border-radius:50%;background:var(--a-navy);color:var(--a-gold);
  font-weight:800;font-size:.9rem;margin-bottom:1rem;
}
.feature-card h3{font-size:1.2rem;color:var(--a-navy);margin-bottom:.6rem;font-weight:700}
.feature-card p{color:var(--a-muted);font-size:.98rem;line-height:1.65;margin:0}

/* ── Section-level call to action ────────────────────────── */
.section-cta{text-align:center;margin-top:3rem}
.cta-subtext{margin-top:1rem;color:var(--a-muted);font-size:.95rem}

/* ── Vertical picker (Healthcare vs Legal) ───────────────── */
.vertical-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem}
.vertical-card{
  display:block;background:#fff;border:1px solid var(--a-line);
  border-top:5px solid var(--a-navy);border-radius:14px;padding:2.4rem 2.1rem;
  transition:transform .25s ease,box-shadow .25s ease;color:inherit;text-decoration:none;
}
.vertical-card:hover{transform:translateY(-5px);box-shadow:0 18px 44px rgba(6,28,57,.13)}
.vertical-card--health{border-top-color:var(--a-health)}
.vertical-card--legal{border-top-color:var(--a-gold)}
.vertical-eyebrow{font-size:.78rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;margin-bottom:.7rem}
.vertical-card--health .vertical-eyebrow{color:var(--a-health-dk)}
.vertical-card--legal .vertical-eyebrow{color:#7a5b00}
.vertical-card h3{font-size:1.6rem;color:var(--a-navy);margin-bottom:.9rem;font-weight:800;line-height:1.25}
.vertical-card > p{color:var(--a-muted);margin-bottom:1.3rem;line-height:1.7}
.vertical-list{list-style:none;padding:0;margin:0 0 1.5rem}
.vertical-list li{padding:.5rem 0 .5rem 1.7rem;position:relative;color:var(--a-muted);font-size:.97rem;line-height:1.55}
.vertical-list li::before{content:"✓";position:absolute;left:0;font-weight:900}
.vertical-card--health .vertical-list li::before{color:var(--a-health)}
.vertical-card--legal .vertical-list li::before{color:var(--a-gold-2)}
.vertical-go{font-weight:800;color:var(--a-navy);font-size:1rem}
.vertical-card:hover .vertical-go{color:var(--a-gold-2)}

/* ── Benefit grid ────────────────────────────────────────── */
.benefit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.benefit-card{
  background:#fff;border:1px solid var(--a-line);border-radius:12px;padding:1.9rem;
  border-left:4px solid var(--a-gold);transition:transform .25s ease,box-shadow .25s ease;
}
.benefit-card:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(6,28,57,.09)}
.benefit-card h3{font-size:1.18rem;color:var(--a-navy);margin-bottom:.6rem;font-weight:700}
.benefit-card p{color:var(--a-muted);font-size:.97rem;line-height:1.65;margin:0}

/* ── Comparison table ────────────────────────────────────── */
.aurus-table-wrap{overflow-x:auto;border:1px solid var(--a-line);border-radius:12px;background:#fff}
table.aurus-cmp{width:100%;border-collapse:collapse;font-size:1rem;min-width:620px}
table.aurus-cmp th,table.aurus-cmp td{padding:1rem 1.4rem;text-align:left;border-bottom:1px solid #f1f5f9}
table.aurus-cmp thead th{background:var(--a-navy);color:#fff;font-weight:700;font-size:.88rem;letter-spacing:.03em}
table.aurus-cmp thead th:last-child{background:var(--a-navy-2);color:var(--a-gold)}
table.aurus-cmp tbody tr:last-child td{border-bottom:0}
table.aurus-cmp td:first-child{font-weight:600;color:var(--a-ink)}
table.aurus-cmp td.c-yes{color:var(--a-yes);font-weight:800}
table.aurus-cmp td.c-no{color:var(--a-no);font-weight:600}
table.aurus-cmp tr.c-hi td{background:#fffaec}
table.aurus-cmp tr.c-hi td:first-child{color:var(--a-navy);font-weight:800}
.aurus-note{margin-top:1rem;font-size:.88rem;color:var(--a-muted);font-style:italic}

/* ── FAQ accordion ───────────────────────────────────────── */
.aurus-faq{max-width:880px;margin:0 auto}
.aurus-faq details{border-bottom:1px solid var(--a-line);padding:1.2rem 0}
.aurus-faq summary{
  font-weight:700;cursor:pointer;font-size:1.12rem;color:var(--a-navy);list-style:none;
  display:flex;justify-content:space-between;gap:1.4rem;align-items:flex-start;
}
.aurus-faq summary::-webkit-details-marker{display:none}
.aurus-faq summary::after{content:"+";color:var(--a-gold-2);font-weight:800;font-size:1.6rem;line-height:1;flex:none}
.aurus-faq details[open] summary::after{content:"–"}
.aurus-faq details p{margin:.9rem 0 0;color:var(--a-muted);line-height:1.75}

/* ── Closing call to action ──────────────────────────────── */
.aurus-final-cta{background:linear-gradient(135deg,var(--a-navy) 0%,var(--a-navy-2) 100%);color:#fff}
.final-cta-inner{max-width:800px;margin:0 auto;text-align:center}
.final-cta-inner h2{font-size:clamp(1.8rem,3.6vw,2.7rem);color:#fff;font-weight:800;margin-bottom:1rem;line-height:1.2}
.final-cta-inner p{color:#c3d2e2;font-size:1.1rem;line-height:1.75;margin-bottom:2rem}
.final-cta-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.aurus-final-cta .cta-subtext{color:#8fa3b8;margin-top:1.4rem}

/* ── Responsive ──────────────────────────────────────────── */
@media(max-width:1100px){
  .feature-grid{grid-template-columns:repeat(2,1fr)}
  .benefit-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:820px){
  .vertical-grid{grid-template-columns:1fr}
  .feature-grid,.benefit-grid{grid-template-columns:1fr}
  .aurus-answer{padding:1.3rem 1.4rem}
  .aurus-answer p{font-size:1.05rem}
  .final-cta-actions{flex-direction:column}
  .final-cta-actions .btn{width:100%}
}
@media(prefers-reduced-motion:reduce){
  .feature-card:hover,.vertical-card:hover,.benefit-card:hover{transform:none}
}

/* ── Footer seam ─────────────────────────────────────────────
   footer-loader.js injects into a bare <div id="footer-placeholder">
   appended to <body>. With no styling of its own, any residual
   margin between the last section and the footer renders as a
   white band. Collapse the seam and tint the placeholder navy so
   nothing can show through even if a page adds trailing margin. */
#footer-placeholder{
  margin:0;padding:0;background:var(--a-navy);display:block;
}
#footer-placeholder > .footer{margin-top:0}
body > section:last-of-type{margin-bottom:0}
.aurus-final-cta{margin-bottom:0;padding-bottom:5rem}
.aurus-final-cta + #footer-placeholder{margin-top:0}

/* ── ROI calculator ──────────────────────────────────────── */
.roi-wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:2.5rem;align-items:start;max-width:1040px;margin:0 auto}
.roi-inputs{background:#fff;border:1px solid var(--a-line);border-radius:14px;padding:2rem}
.roi-field{margin-bottom:1.9rem}
.roi-field:last-of-type{margin-bottom:.6rem}
.roi-field label{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  font-weight:700;color:var(--a-navy);font-size:.97rem;margin-bottom:.7rem}
.roi-field output{font-size:1.25rem;font-weight:800;color:var(--a-gold-2);font-variant-numeric:tabular-nums}
.roi-field input[type=range]{width:100%;-webkit-appearance:none;appearance:none;height:6px;
  border-radius:99px;background:linear-gradient(90deg,var(--a-gold) 0%,var(--a-line) 0%);
  background:#e8edf3;outline:none;cursor:pointer}
.roi-field input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:22px;height:22px;border-radius:50%;background:var(--a-navy);border:3px solid var(--a-gold);
  cursor:pointer;box-shadow:0 2px 8px rgba(6,28,57,.25)}
.roi-field input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;
  background:var(--a-navy);border:3px solid var(--a-gold);cursor:pointer;border-radius:50%}
.roi-field input[type=range]:focus-visible{outline:3px solid var(--a-gold);outline-offset:4px}

.roi-results{background:linear-gradient(135deg,var(--a-navy) 0%,var(--a-navy-2) 100%);
  border-radius:14px;padding:2rem;color:#fff;border-top:5px solid var(--a-gold)}
.roi-stat{display:flex;flex-direction:column;gap:.25rem;padding:1rem 0;border-bottom:1px solid rgba(255,255,255,.14)}
.roi-stat:last-of-type{border-bottom:0}
.roi-label{font-size:.85rem;color:#a9bccf;letter-spacing:.02em}
.roi-value{font-size:1.9rem;font-weight:800;color:#fff;font-variant-numeric:tabular-nums;line-height:1.15}
.roi-stat--hero{background:rgba(255,192,0,.1);margin:.5rem -2rem;padding:1.1rem 2rem;border-bottom:0}
.roi-stat--hero .roi-value{color:var(--a-gold);font-size:2.3rem}
.roi-results .cta-subtext{color:#8fa3b8;margin-top:.8rem;text-align:center}

@media(max-width:900px){
  .roi-wrap{grid-template-columns:1fr}
  .roi-stat--hero{margin-inline:-1.2rem;padding-inline:1.2rem}
  .roi-inputs,.roi-results{padding:1.4rem}
}

/* ── Two orphan classes carried over from the original company.html.
   They had no rule in any stylesheet before; .hint-label is written by
   JS rather than styled. Given minimal sensible defaults rather than
   left undefined. */
.cta-content{max-width:760px;margin:0 auto;text-align:center}
.hint-label{font-weight:600}

/* ── Criticality ladder — the Provenza signature element ─── */
.ladder{display:flex;flex-direction:column;gap:.85rem;margin:0 0 1rem;max-width:1040px}
.rung{display:grid;grid-template-columns:180px 1fr 165px 190px;gap:1.4rem;align-items:center;
  padding:1.35rem 1.6rem;background:#fff;border:1px solid var(--a-line);
  border-left:6px solid var(--a-adm,#64748b);border-radius:10px;transition:box-shadow .2s ease}
.rung:hover{box-shadow:0 8px 24px rgba(6,28,57,.09)}
.rung--critical{border-left-color:#c8322b}
.rung--urgent{border-left-color:#e08a00}
.rung--routine{border-left-color:#1f7a5c}
.rung--admin{border-left-color:#64748b}
.rung-tier{font-weight:800;font-size:1.05rem;color:var(--a-navy);display:flex;align-items:center;gap:.6rem}
.rung-dot{width:11px;height:11px;border-radius:50%;flex:none}
.rung--critical .rung-dot{background:#c8322b}
.rung--urgent .rung-dot{background:#e08a00}
.rung--routine .rung-dot{background:#1f7a5c}
.rung--admin .rung-dot{background:#64748b}
.rung-docs{color:var(--a-muted);font-size:.95rem;line-height:1.55}
.rung-sla{font-weight:800;font-size:1rem;color:var(--a-navy);line-height:1.3}
.rung-sla small{display:block;font-size:.7rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--a-muted);margin-top:.2rem}
.rung-esc{font-size:.9rem;color:var(--a-muted);line-height:1.5}
.rung-config{display:inline-block;background:#fff3ce;color:#7a5b00;border:1px dashed #d4a800;
  border-radius:5px;padding:2px 9px;font-size:.82rem;font-weight:700}
@media(max-width:980px){.rung{grid-template-columns:160px 1fr;row-gap:.7rem}}
@media(max-width:700px){.rung{grid-template-columns:1fr;row-gap:.5rem}}

/* ── Document-type checklist (fax-triage scope section) ──── */
.checklist{list-style:none;padding:0;margin:0;columns:3;column-gap:2.4rem;max-width:1040px}
.checklist li{padding:.55rem 0 .55rem 1.5rem;break-inside:avoid;position:relative;
  color:var(--a-muted);font-size:.95rem;line-height:1.5;border-bottom:1px solid var(--a-line)}
.checklist li::before{content:"▸";position:absolute;left:0;color:var(--a-gold-2);font-weight:900}
@media(max-width:900px){.checklist{columns:2}}
@media(max-width:600px){.checklist{columns:1}}

/* ── Blog article pages ──────────────────────────────────── */
.page-hero-simple{background:linear-gradient(135deg,var(--a-navy) 0%,var(--a-navy-2) 100%);
  color:#fff;padding:calc(var(--navbar-h,104px) + 3rem) 0 3rem}
.post-kicker{font-size:.82rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--a-gold);margin:0 0 1rem}
.post-kicker a{color:var(--a-gold)}
.post-title{font-size:clamp(1.9rem,4vw,3rem);line-height:1.15;font-weight:800;color:#fff;
  margin:0 0 1.1rem;max-width:900px;letter-spacing:-.02em}
.post-meta{color:#a9bccf;font-size:.95rem;margin:0}
.post-meta a{color:#d7e3f2;text-decoration:underline;text-decoration-color:rgba(255,192,0,.6)}

.post-body{padding:3.5rem 0 1rem;background:#fff}
.post-body .container{max-width:760px}
.post-body p{font-size:1.12rem;line-height:1.85;color:#2b3a4d;margin:0 0 1.5rem}
.post-body p:first-of-type{font-size:1.25rem;line-height:1.75;color:#1e293b;font-weight:400}
.post-body h2{font-size:1.55rem;font-weight:800;color:var(--a-navy);line-height:1.28;
  margin:2.8rem 0 1rem;padding-top:.4rem;border-top:3px solid var(--a-gold);display:inline-block}
.post-body ul{margin:0 0 1.6rem;padding-left:0;list-style:none}
.post-body li{position:relative;padding:.5rem 0 .5rem 1.6rem;font-size:1.08rem;
  line-height:1.75;color:#2b3a4d}
.post-body li::before{content:"▸";position:absolute;left:0;color:var(--a-gold-2);font-weight:900}
.post-body blockquote{border-left:4px solid var(--a-gold);margin:2rem 0;padding:.4rem 0 .4rem 1.5rem;
  font-size:1.2rem;color:var(--a-navy);font-style:italic}

.cta-inline{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;
  background:#fff;border:1px solid var(--a-line);border-left:5px solid var(--a-gold);
  border-radius:12px;padding:1.8rem 2rem}
@media(max-width:760px){
  .post-body{padding-top:2.2rem}
  .post-body p{font-size:1.05rem}
  .post-body p:first-of-type{font-size:1.14rem}
  .cta-inline{flex-direction:column;align-items:flex-start}
}

/* ── Blog index cards ────────────────────────────────────── */
.post-card{padding:2rem 0;border-bottom:1px solid var(--a-line)}
.post-card:first-child{padding-top:.5rem}
.post-card:last-child{border-bottom:0}
.post-card-kicker{font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--a-gold-2);margin:0 0 .6rem}
.post-card-title{font-size:1.6rem;line-height:1.28;font-weight:800;margin:0 0 .7rem;letter-spacing:-.015em}
.post-card-title a{color:var(--a-navy)}
.post-card-title a:hover{color:var(--a-gold-2)}
.post-card-excerpt{color:#64748b;font-size:1.05rem;line-height:1.75;margin:0 0 .9rem}
.post-card-more{font-weight:700;color:var(--a-navy);font-size:.98rem}
.post-card-more:hover{color:var(--a-gold-2)}

/* ════════════════════════════════════════════════════════════
   APTOS — brand typeface
   Self-hosted for every device. `local()` first so anyone with
   Source Sans Pro installed (Microsoft 365) uses it immediately even
   before the woff2 files are dropped into assets/fonts/.
   ════════════════════════════════════════════════════════════ */
:root{ --aurus-font: "Source Sans Pro", "Segoe UI", system-ui, -apple-system, Arial, sans-serif; }

/* Every stylesheet now declares font-family: var(--aurus-font), so the family
   propagates through the normal cascade. Only form controls need restating,
   because they do not inherit typography from their ancestors by default. */
button, input, select, textarea, option{
  font-family: var(--aurus-font);
}

/* ════════════════════════════════════════════════════════════
   HERO — one declaration only
   aurus-pages.css already engineers the hero correctly at all
   viewports: block layout, navbar clearance via padding-top,
   a clamped bottom zone reserving the dot lane, overflow hidden,
   and deliberately NO min-height so it sizes to its content.

   The single thing it never overrides outside the 768px media
   query is main.css's `max-height: 80vh`, which clipped desktop.
   That is the whole fix. Type scale, spacing and proportion are
   left exactly as originally engineered.
   ════════════════════════════════════════════════════════════ */
.hero{ max-height: none !important; }

/* aurus-pages.css reserves clamp(5.5rem, 8vw, 8rem) of bottom padding for the
   carousel dot indicators. Only index.html has dots; on every other page that
   reservation is just dead space under the buttons. Give the lane back only
   where it is actually used. */
.hero{ padding-bottom: clamp(2rem, 3vw, 3rem) !important; }

/* Dots move OUT of an absolutely positioned lane and into normal flow,
   directly beneath the carousel. That removes the reserved 5.5–8rem of
   empty navy under the buttons AND makes overlap structurally impossible
   — an in-flow element cannot land on top of anything. */
.hero--carousel{ padding-bottom: clamp(2rem, 3vw, 3rem) !important; }
.hero .carousel-dots,
.carousel-dots{
  position: static !important;
  transform: none !important;
  left: auto !important;
  bottom: auto !important;
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 1.6rem auto 0 !important;
}
/* Slightly tighter internal rhythm so the slide does not read as gappy. */
.hero-slide .hero-content{ row-gap: 0.9rem !important; }

/* Long headings wrap instead of overflowing the viewport. */
.hero-title, .post-title, .section-title,
.card h3, .benefit-card h3, .vertical-card h3{
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Nothing anywhere may exceed the viewport width. */
html, body{ max-width: 100%; overflow-x: clip; }   /* clip, not hidden: hidden breaks position:sticky */
img, svg, video, table{ max-width: 100%; }

/* ── Stacking guard ───────────────────────────────────────────
   The hero's diagonal wedge is decorative and absolutely positioned.
   Content sections sit above it on an opaque background so no
   decorative layer can ever bleed over readable content. */
.section, .page-hero-simple, .post-body, footer, #footer-placeholder{
  position: relative;
  z-index: 1;
}
.section{ background-color: #fff; }
.section--alt, .section-alt{ background-color: var(--a-wash) !important; }
.section--navy, .aurus-final-cta{ background-color: var(--a-navy); }
.hero-background, .diagonal-overlay{ pointer-events: none; }

/* ════════════════════════════════════════════════════════════
   FOOTER — fluid type and a tighter bottom bar
   The footer used fixed rem sizes while the rest of the site
   scales fluidly, so it read oversized on desktop and cramped
   on phones. These clamp() values track the viewport the same
   way the hero does.
   ════════════════════════════════════════════════════════════ */
.footer{ padding: clamp(2.5rem, 4vw, 3.75rem) 0 clamp(1.25rem, 2vw, 1.75rem); }

.footer-column h4,
.footer .footer-title{
  font-size: clamp(.72rem, .82vw, .82rem);
  letter-spacing: .09em;
  text-transform: uppercase;
  margin-bottom: .85rem;
}
.footer-column a,
.footer .footer-column a{
  font-size: clamp(.78rem, .9vw, .88rem);
  line-height: 1.55;
  margin-bottom: .5rem;
}
.footer-link-sub{ font-size: clamp(.68rem, .78vw, .76rem); opacity: .75; }
.footer-brand p,
.footer .footer-blurb{
  font-size: clamp(.8rem, .92vw, .9rem);
  line-height: 1.65;
}

/* Bottom bar: smaller, quieter, and it stacks cleanly when narrow. */
.footer-bottom{
  font-size: clamp(.72rem, .82vw, .8rem);
  padding-top: clamp(1.1rem, 2vw, 1.6rem);
  margin-top: clamp(1.5rem, 2.5vw, 2.25rem);
  border-top: 1px solid rgba(255,255,255,.10);
  gap: 1rem;
  flex-wrap: wrap;
}
.footer-legal{ gap: clamp(14px, 1.6vw, 24px); flex-wrap: wrap; }
.footer-legal a{ font-size: inherit; opacity: .85; }
.footer-legal a:hover{ opacity: 1; }
.footer-copyright p{ margin: 0; opacity: .7; font-size: inherit; }

/* Disclaimer is fine print — it should read as fine print. */
.footer-disclaimer p{
  font-size: clamp(.7rem, .8vw, .78rem);
  line-height: 1.65;
  opacity: .72;
  max-width: 72ch;
}

@media (max-width: 640px){
  .footer-bottom{
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .footer-legal{ justify-content: center; }
}

/* ════════════════════════════════════════════════════════════
   FLUID TYPE SCALE
   Anchored to the original site's proportions (h1 3rem / h2 2.5rem
   / h3 2rem, hero-title 3rem desktop → 2.5rem mobile) but expressed
   as clamp() so every size interpolates smoothly with the viewport
   instead of jumping at a breakpoint. Nothing here is larger than
   the original scale; the hero is deliberately a little quieter.
   ════════════════════════════════════════════════════════════ */
:root{
  --fs-body:   clamp(0.95rem, 0.90rem + 0.22vw, 1.05rem);
  --fs-lead:   clamp(1.02rem, 0.96rem + 0.30vw, 1.15rem);
  --fs-h1:     clamp(1.85rem, 1.35rem + 2.10vw, 3rem);
  --fs-h2:     clamp(1.55rem, 1.20rem + 1.55vw, 2.4rem);
  --fs-h3:     clamp(1.20rem, 1.05rem + 0.70vw, 1.55rem);
  --fs-h4:     clamp(1.05rem, 0.98rem + 0.35vw, 1.25rem);
  --fs-small:  clamp(0.80rem, 0.77rem + 0.15vw, 0.90rem);
  --fs-hero:   clamp(2.05rem, 1.15rem + 3.00vw, 3.5rem);   /* live desktop = 3.5rem */
  --fs-herolede: clamp(1.02rem, 0.94rem + 0.42vw, 1.25rem); /* live desktop = 1.25rem */
}

body{ font-size: var(--fs-body); }
h1{ font-size: var(--fs-h1); }
h2{ font-size: var(--fs-h2); }
h3{ font-size: var(--fs-h3); }
h4{ font-size: var(--fs-h4); }

/* ── Hero: same proportions as the original, calmer overall ── */
.hero .hero-title,
.hero-slide .hero-title{
  font-size: var(--fs-hero) !important;
  font-weight: 700;
  line-height: 1.1;                /* live value */
  letter-spacing: -.01em;
  margin-bottom: 1.25rem;
  max-width: none;                 /* span the container — no early wrap */
}
.hero .hero-description,
.hero-slide .hero-description{
  font-size: var(--fs-herolede) !important;
  line-height: 1.6;                /* live value */
  max-width: 64ch;
  margin-bottom: 2rem;
  opacity: .9;
}
.hero .hero-badge,
.hero-slide .hero-badge{
  font-size: var(--fs-small);
  padding: .45rem 1rem;
}
.hero .btn-large{ font-size: clamp(.9rem, .86rem + .18vw, 1rem); padding: .8rem 1.5rem; }
.hero-content{ row-gap: 1rem !important; }

/* ── Section headings ─────────────────────────────────────── */
.section-title{ font-size: var(--fs-h2) !important; line-height: 1.2; letter-spacing: -.015em; }
.section-subtitle, .lead{ font-size: var(--fs-lead); line-height: 1.7; }
.section-badge{ font-size: var(--fs-small); padding: .4rem 0.9rem; }
.aurus-answer p{ font-size: var(--fs-lead); }
.card h3, .benefit-card h3, .feature-card h3{ font-size: var(--fs-h3); }
.card p, .benefit-card p, .feature-card p{ font-size: var(--fs-body); }
.vertical-card h3{ font-size: clamp(1.25rem, 1.05rem + 0.85vw, 1.7rem); }
.post-title{ font-size: var(--fs-h1); }
.post-body p{ font-size: var(--fs-lead); }
.post-body h2{ font-size: var(--fs-h3); }
.aurus-faq summary{ font-size: clamp(1rem, .95rem + .3vw, 1.12rem); }
.final-cta-inner h2{ font-size: var(--fs-h2); }
.final-cta-inner p{ font-size: var(--fs-lead); }

/* ── Section rhythm scales with viewport too ─────────────── */
.section{ padding: clamp(2.6rem, 1.8rem + 3vw, 4.6rem) 0; }

/* ── Footer: quieter, and fluid like everything else ─────── */
.footer{ font-size: var(--fs-body); }
.footer h4, .footer-title{ font-size: var(--fs-small); letter-spacing: .08em; }
.footer a{ font-size: clamp(.85rem, .82rem + .16vw, .95rem); }
.footer-blurb, .footer-disclaimer p{ font-size: clamp(.82rem, .80rem + .15vw, .92rem); line-height: 1.65; }
.footer-bottom{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem 1.5rem;
  flex-wrap: wrap;
  padding-top: 1.4rem;
  margin-top: 1.6rem;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: var(--fs-small);
}
.footer-legal{ display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; align-items: center; }
.footer-legal a{ font-size: var(--fs-small); }
.footer-copyright p{ margin: 0; font-size: var(--fs-small); opacity: .8; }

@media (max-width: 760px){
  .footer-bottom{ flex-direction: column; align-items: center; text-align: center; gap: .8rem; }
  .footer-legal{ justify-content: center; }
  .hero .hero-title, .hero-slide .hero-title{ max-width: none; }
  .hero .hero-description, .hero-slide .hero-description{ margin-inline: auto; }
}

/* ── Headline wrapping ────────────────────────────────────────
   Long headlines will wrap on some viewports no matter what. The
   failure mode to avoid is a stranded short final line ("closing
   them."), which is what reads as unbalanced. text-wrap:balance
   distributes words evenly across lines instead. */
.hero-title, .post-title, .section-title, .final-cta-inner h2{
  text-wrap: balance;
}
.hero-description, .section-subtitle, .lead, .aurus-answer p{
  text-wrap: pretty;
}
/* overflow-wrap:anywhere was allowing mid-word breaks in headings. */
.hero-title, .post-title, .section-title,
.card h3, .benefit-card h3, .vertical-card h3{
  overflow-wrap: normal;
  word-break: normal;
}

/* ── Hero bottom tightening ───────────────────────────────────
   Measured at 1440px before this rule: buttons ended at 535, the
   carousel cell ran to 571 (main.css puts 2rem of padding on
   .hero-content), dots sat at 597, and the hero ran to 675 —
   about 104px of empty navy under the CTAs. */
.hero .hero-content,
.hero-slide .hero-content{ padding-top: 0 !important; padding-bottom: 0 !important; }
.hero .carousel-dots,
.carousel-dots{ margin: 1.35rem auto 0 !important; }
.hero--carousel{ padding-bottom: 1.75rem !important; }

/* ── Vertical centring ────────────────────────────────────────
   main.css gives .hero min-height:75vh, so on a tall viewport the
   content leaves a void beneath it. Live absorbs this by centring
   (display:flex; align-items:center). aurus-pages.css turned that
   off because, with absolutely positioned dots, centring pushed the
   CTAs into the dot lane. The dots are now in normal flow, so that
   hazard is gone and centring is safe again — as a column, so the
   carousel and the dots centre together as one group. */
.hero{
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: stretch !important;
}
.hero > .hero-carousel{ width: 100%; }