/* ============================================================
   OwnerWell — site stylesheet
   Palette and type per brand directive.
   Navy carries credibility. Green is reserved for action.
   ============================================================ */

:root {
  --navy:        #001B3D;
  --navy-lift:   #0A2B54;   /* one step up from navy, for layered navy surfaces */
  --accent:      #F39A27;   /* brand amber, sampled from the logo artwork */
  --accent-deep: #8A5300;   /* amber text on light backgrounds: 6.4:1 on white */
  --accent-soft: #F8CB80;   /* amber text on navy: 10:1 */

  /* Action colour, matched to the logo amber so buttons read as brand
     rather than as a separate system. Near-black text on it clears AAA. */
  --cta:         #F39A27;
  --cta-hover:   #FFB655;
  --cta-ink:     #241600;
  --offwhite:    #F8FAF9;
  --white:       #FFFFFF;

  --ink:         #001B3D;
  --ink-muted:   #3D4F63;   /* darkened from #52657B: 8.9:1 on white */
  --ink-onnavy:  #DDE7F2;   /* lightened from #C9D6E4: 12.6:1 on navy */

  --rule:        rgba(0, 27, 61, 0.13);
  --rule-onnavy: rgba(216, 226, 240, 0.24);

  --font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Type scale — 1.25 ratio, fluid at the top end */
  --t-sm:   1rem;        /* was 0.875rem — nothing on the site goes below 16px */
  --t-body: 1.1875rem;   /* was 1.0625rem — 19px base */
  --t-lead: clamp(1.15rem, 0.9rem + 0.9vw, 1.375rem);
  --t-h3:   clamp(1.25rem, 1.05rem + 0.7vw, 1.5rem);
  --t-h2:   clamp(1.75rem, 1.35rem + 1.7vw, 2.75rem);
  --t-h1:   clamp(2.25rem, 1.6rem + 2.9vw, 3.75rem);
  --t-hero: clamp(2.6rem, 1.5rem + 5.2vw, 5.25rem);

  --radius: 14px;
  --radius-sm: 10px;

  --gutter: 1.5rem;
  --measure: 62ch;
  --max: 1200px;
  --max-narrow: 780px;
}

@media (min-width: 800px) {
  :root { --gutter: 3rem; }
}

/* ---------- reset ---------- */

*, *::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: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.72;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; height: auto; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); letter-spacing: -0.012em; line-height: 1.25; }

p { margin: 0 0 1.15em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

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

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--white); color: var(--navy);
  padding: 0.75rem 1.25rem; z-index: 200; font-weight: 600;
}
.skip:focus { left: 0; }

/* ---------- layout ---------- */

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap-narrow { max-width: var(--max-narrow); }

.section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.section-tight { padding-block: clamp(2.5rem, 5vw, 4rem); }

.band-navy  { background: var(--navy); color: var(--white); }
.band-off   { background: var(--offwhite); }
.band-white { background: var(--white); }

.band-navy h1, .band-navy h2, .band-navy h3 { color: var(--white); }
.band-navy p { color: var(--ink-onnavy); }

.lead { font-size: var(--t-lead); line-height: 1.55; color: var(--ink-muted); }
.band-navy .lead, .hero .lead { color: var(--ink-onnavy); }

.stack > * + * { margin-top: 1.5rem; }

/* ---------- header ---------- */

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--navy);
  border-bottom: 1px solid var(--rule-onnavy);
}

.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 86px;
}

.brand { display: block; line-height: 0; flex: 0 0 auto; }
.brand img { width: auto; height: 34px; }

/* the lockup plus the Menu button overruns the narrowest phones */
@media (max-width: 400px) { .brand img { height: 28px; } }

@media (min-width: 700px) { .brand img { height: 36px; } }

/* the lockup's own tagline is unreadable below ~150px tall,
   so the footer sets it as live text instead */
.brand-footer img { height: 38px; }
@media (min-width: 700px) { .brand-footer img { height: 44px; } }

.nav { display: none; }

.nav a {
  color: var(--ink-onnavy); text-decoration: none; font-size: 1.0625rem; font-weight: 500;
  font-weight: 500; padding-block: 0.5rem; white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.nav a:hover, .nav a[aria-current="page"] {
  color: var(--white); border-bottom-color: var(--accent);
}

.nav-toggle {
  background: none; border: 1px solid var(--rule-onnavy); color: var(--white);
  padding: 0.55rem 0.85rem; border-radius: 4px; font: inherit; font-size: 1rem;
  font-weight: 600; cursor: pointer;
}

.mobile-nav {
  display: none; background: var(--navy-lift);
  border-bottom: 1px solid var(--rule-onnavy);
}
.mobile-nav.open { display: block; }
.mobile-nav ul { list-style: none; margin: 0; padding: 0.5rem 0 1.5rem; }
.mobile-nav a {
  display: block; padding: 0.85rem var(--gutter); color: var(--white);
  text-decoration: none; font-weight: 500;
  border-bottom: 1px solid var(--rule-onnavy);
}

@media (min-width: 1240px) {
  .nav { display: flex; align-items: center; gap: 1.1rem; }
  .nav a { font-size: 1rem; }
  .brand img { height: 34px; }
  .nav-toggle, .mobile-nav { display: none !important; }
}
@media (min-width: 1400px) { .nav { gap: 1.7rem; } .nav a { font-size: 1.0625rem; } .brand img { height: 40px; } }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1.05rem 1.8rem; border-radius: 8px; border: 1px solid transparent;
  font: inherit; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.005em;
  min-height: 3.4rem;
  text-decoration: none; cursor: pointer; text-align: center;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

/* .nav a is more specific than .btn-primary, so the header CTA needs
   this or it inherits the muted nav link colour. */
.nav a.btn-primary, .nav a.btn-primary:hover { color: var(--cta-ink); border-bottom-color: transparent; }
.mobile-nav a.btn-primary { color: var(--cta-ink); border-bottom: 0; }

.btn-primary {
  background: var(--cta); color: var(--cta-ink);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}
.btn-primary:hover { background: var(--cta-hover); }
.btn-primary:active { background: var(--cta); }

.btn-outline { background: transparent; color: var(--white); border-color: var(--rule-onnavy); }
.btn-outline:hover { border-color: var(--accent-soft); background: rgba(255,255,255,0.06); }

.btn-navy { background: var(--navy); color: var(--white); }
.btn-navy:hover { background: var(--navy-lift); }

.btn-ghost { background: transparent; color: var(--navy); border-color: var(--rule); }
.btn-ghost:hover { border-color: var(--navy); }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.85rem; }

.btn-sm { padding: 0.65rem 1.05rem; font-size: 1rem; white-space: nowrap; }

.btn-full { width: 100%; }

/* on narrow screens stacked CTAs read better full width */
@media (max-width: 560px) {
  .btn-row .btn { width: 100%; }
}

/* text link with a green underline that thickens on hover */
.tlink {
  color: var(--navy); font-weight: 600; text-decoration: none;
  box-shadow: inset 0 -2px 0 var(--accent-soft);
  transition: box-shadow 140ms ease;
}
.tlink:hover { box-shadow: inset 0 -8px 0 var(--accent-soft); }
.band-navy .tlink { color: var(--white); box-shadow: inset 0 -2px 0 var(--accent); }

/* ---------- hero ---------- */

.hero { background: var(--navy); color: var(--white); padding-block: clamp(3.5rem, 9vw, 7.5rem); }

.hero h1 {
  font-size: var(--t-hero); font-weight: 800; letter-spacing: -0.026em;
  line-height: 1.12; max-width: 24ch;
}
/* full-width heroes carry longer headlines, so ease the display size */
.hero:not(.hero-convert) h1 { font-size: clamp(2.2rem, 1.4rem + 3vw, 3.75rem); }

.hero .lead { margin-top: 1.75rem; max-width: 46ch; }

.hero .btn-row { margin-top: 2.5rem; }

/* one orchestrated page-load reveal, hero only */
.reveal { opacity: 0; transform: translateY(14px); animation: rise 700ms cubic-bezier(.2,.7,.3,1) forwards; }
.reveal-2 { animation-delay: 110ms; }
.reveal-3 { animation-delay: 200ms; }
@keyframes rise { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ============================================================
   Converting hero: copy on the left, the form on the right.
   The form is the hero. Everything else supports it.
   ============================================================ */

.hero-grid { display: grid; gap: 2.5rem; align-items: center; }

.hero-convert { padding-block: clamp(1.5rem, 4.5vw, 3.75rem) clamp(2.5rem, 5vw, 4rem); }
.hero-convert .hero-grid { align-items: start; gap: 2rem; }

@media (min-width: 940px) {
  .hero-convert .hero-grid {
    grid-template-columns: 1fr 30rem;
    grid-template-areas: "copy form" "detail form" "proof form";
    gap: 0 3rem;
  }
  .hero-convert .hero-copy   { grid-area: copy; }
  .hero-convert .hero-detail { grid-area: detail; }
  .hero-convert .hero-proof  { grid-area: proof; }
  .hero-convert .hero-form   { grid-area: form; }
  .hero-convert .hero-copy h1 { max-width: none; }
}
@media (min-width: 1140px) {
  .hero-convert .hero-grid { grid-template-columns: 1fr 34rem; gap: 0 4rem; }
}
@media (min-width: 1320px) {
  .hero-convert .hero-grid { grid-template-columns: 1fr 35rem; gap: 0 5rem; }
}

.hero-convert h1 {
  font-size: clamp(2.1rem, 1.35rem + 2.6vw, 3.4rem);
  max-width: none;
}

/* Two-tier supporting copy: the positioning statement carries weight and
   near-white contrast, the capability line sits back a step. Establishing
   the firm before the offer is what keeps this from reading as lead-gen. */
.hero-position {
  margin-top: 1.35rem; max-width: 40ch;
  font-size: clamp(1.125rem, 1rem + 0.65vw, 1.4375rem);
  line-height: 1.42; font-weight: 500; letter-spacing: -0.012em;
  color: #EAF1F8;
}
.hero-detail {
  margin-top: 0.9rem; max-width: 44ch;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.1rem);
  line-height: 1.55; color: var(--ink-onnavy);
}
@media (min-width: 940px) { .hero-position { margin-top: 1.6rem; } }

/* reassurances, ruled rather than bulleted */
.hero-proof {
  list-style: none; margin: 2.25rem 0 0; padding: 0;
  border-top: 1px solid var(--rule-onnavy);
  max-width: 40ch;
}
.hero-proof li {
  padding: 0.7rem 0 0.7rem 1.75rem;
  border-bottom: 1px solid var(--rule-onnavy);
  color: var(--ink-onnavy); font-size: 1.0625rem; position: relative;
}
.hero-proof li::before {
  content: ""; position: absolute; left: 0; top: 1.2em;
  width: 0.7rem; height: 0.7rem; border-radius: 2px; background: var(--accent);
}

/* ---- the form card ----
   One clean white panel. The only colour on it is a green rule along the
   top edge, which reads as brand rather than as a second background. */
.hero-form {
  background: var(--white); color: var(--ink);
  border-radius: 10px; overflow: hidden;
  border-top: 5px solid var(--accent);
  box-shadow: 0 26px 60px rgba(0, 8, 20, 0.38);
}

.hero-form-head {
  padding: clamp(1.5rem, 4vw, 2.25rem) clamp(1.35rem, 4vw, 2.25rem) 0;
}
.hero-form-head h2 {
  color: var(--navy); font-size: clamp(1.4rem, 1.1rem + 1vw, 1.85rem);
  letter-spacing: -0.02em; line-height: 1.2;
}
.hero-form-head p {
  color: var(--ink-muted); font-size: 1rem;
  margin: 0.55rem 0 0; max-width: 42ch;
}

.hero-form form {
  padding: clamp(1.35rem, 4vw, 2.25rem);
  margin-top: clamp(1.25rem, 3vw, 1.6rem);
  border-top: 1px solid var(--rule);
}

.form-title {
  font-size: 1.0625rem; font-weight: 700; line-height: 1.3;
  letter-spacing: -0.01em; color: var(--navy); margin-bottom: 1.1rem;
}
.form-sub { font-size: 1.0625rem; color: var(--ink-muted); margin-bottom: 1.15rem; }

/* revenue picker: large tap targets, no typing to begin */
.choices { display: grid; gap: 0.7rem; }
@media (min-width: 330px) { .choices { grid-template-columns: 1fr 1fr; } }

.choice { position: relative; display: block; cursor: pointer; }
.choice input {
  position: absolute; opacity: 0; width: 100%; height: 100%;
  margin: 0; cursor: pointer;
}
.choice span {
  display: flex; align-items: center; justify-content: center;
  min-height: 3.9rem; padding: 0.6rem 0.5rem;
  border: 1.5px solid rgba(0, 27, 61, 0.22); border-radius: 6px;
  font-weight: 700; font-size: 1.0625rem; text-align: center;
  white-space: nowrap;
  transition: border-color 120ms ease, background-color 120ms ease;
}
.choice:hover span { border-color: var(--cta); background: var(--offwhite); }
.choice input:checked + span {
  border-color: var(--cta); background: var(--cta); color: var(--cta-ink);
}
.choice input:focus-visible + span {
  outline: 3px solid var(--cta); outline-offset: 2px;
}

.form-assure {
  font-size: 1rem; color: var(--ink-muted);
  margin-top: 0.9rem; text-align: center;
}

.step-recap {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  margin-bottom: 1.15rem; padding: 0.6rem 0.85rem;
  background: var(--offwhite); border: 1px solid var(--rule);
  border-radius: 5px; font-size: 1.0625rem; font-weight: 600; color: var(--navy);
}
.step-back {
  background: none; border: 0; font: inherit; font-size: 1rem; font-weight: 600;
  color: var(--accent-deep); text-decoration: underline; cursor: pointer;
  padding: 0.15rem 0.25rem; margin-left: auto;
}
.step-back:hover { color: var(--navy); }

.hero-form .field input, .hero-form .field select { padding: 1.05rem 1rem; font-size: 1.125rem; }
.hero-form .btn { padding: 1.2rem 1.6rem; font-size: 1.1875rem; }

/* without JS both steps simply stack and the form still works */
.js-only { display: none; }
.js-steps .js-only { display: block; }
.js-steps .step { display: none; }
.js-steps .step.is-active { display: block; }

.hero-alt {
  margin-top: 1.75rem; font-size: 1.0625rem; color: var(--ink-onnavy);
  max-width: none;
}
/* .tlink defaults to navy, which vanishes on the navy hero */
.hero .tlink { color: var(--white); box-shadow: inset 0 -2px 0 var(--accent); }
.hero .tlink:hover { box-shadow: inset 0 -8px 0 var(--accent); color: var(--navy); }

/* on phones the form leads and the supporting copy follows */
@media (max-width: 939px) {
  /* the roomier heading leading costs vertical space, so tighten the
     surrounding gaps to keep all six revenue options above the fold */
  .hero-convert { padding-block: 1rem clamp(2.5rem, 5vw, 4rem); }
  .hero-convert h1 { line-height: 1.08; }
  .hero-convert .hero-position { margin-top: 1rem; }
  .hero-form-head { padding-top: 1.25rem; }
  .hero-form-head p { margin-top: 0.4rem; }
  .hero-form form { margin-top: 0.9rem; padding-top: 1.15rem; }
  .form-title { margin-bottom: 0.85rem; }
  /* 3.4rem is 54px, comfortably above the 44px touch-target minimum */
  .choice span { min-height: 3.4rem; }
  .choices { gap: 0.55rem; }
  /* the longest label ("$50M to $100M") is set nowrap, so on the narrowest
     phones it forces the grid wider than the gutter allows */
  @media (max-width: 380px) {
    .choice span { font-size: 0.9375rem; padding-inline: 0.3rem; }
    .hero-form form, .hero-form-head { padding-inline: 1.1rem; }
  }
  .hero-convert .hero-grid { display: flex; flex-direction: column; }
  /* On phones the form comes second, so the capability line moves below it.
     Establishing the firm still happens first, via the headline and the
     positioning statement, which are the two things that carry authority. */
  .hero-convert .hero-copy   { order: 1; }
  .hero-convert .hero-form   { order: 2; margin-top: 0.25rem; }
  .hero-convert .hero-detail { order: 3; margin-top: 1.75rem; max-width: none; }
  .hero-convert .hero-proof  { order: 4; margin-top: 1.5rem; max-width: none; }
  .hero-convert .hero-position { max-width: none; }
}

/* facts row beneath the hero headline */
.facts {
  display: grid; gap: 0; margin-top: 3.25rem;
  border-top: 1px solid var(--rule-onnavy);
}
.facts div {
  padding-block: 1.15rem;
  border-bottom: 1px solid var(--rule-onnavy);
}
.facts dt { font-size: 1rem; color: var(--accent-soft); font-weight: 600; margin-bottom: 0.2rem; }
.facts dd { margin: 0; font-size: 1.05rem; color: var(--white); font-weight: 500; }

@media (min-width: 760px) {
  .facts { grid-template-columns: repeat(3, 1fr); column-gap: 2.5rem; }
}

/* ---------- ledger: label column + content column ---------- */

.ledger { border-top: 1px solid var(--rule); }

.ledger-row {
  display: grid; gap: 0.5rem 3rem;
  padding-block: clamp(1.75rem, 4vw, 2.75rem);
  border-bottom: 1px solid var(--rule);
}
.ledger-row > h3 { color: var(--navy); }
.ledger-index {
  font-size: 1.0625rem; font-weight: 700; color: var(--accent-deep);
  font-variant-numeric: tabular-nums;
}
.ledger-body { max-width: var(--measure); color: var(--ink-muted); }
.ledger-body p { color: var(--ink-muted); }

@media (min-width: 820px) {
  .ledger-row { grid-template-columns: 5rem 20rem 1fr; align-items: start; }
}

/* ---------- generic grids ---------- */

.grid { display: grid; gap: 1.25rem; }
@media (min-width: 700px)  { .grid-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 700px)  { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 640px)  { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }

/* split: text beside a supporting block */
.split { display: grid; gap: 2.5rem; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
  .split-wide { grid-template-columns: 1.15fr 0.85fr; }
}

/* ---------- cards ---------- */

.card {
  background: var(--white); border: 1px solid var(--rule);
  border-radius: 6px; padding: 1.75rem;
}
.card h3 { margin-bottom: 0.6rem; }
.card p { color: var(--ink-muted); font-size: 1rem; }

/* transaction card — flat, tabular, no shadow */
.deal {
  border: 1px solid var(--rule); border-radius: 6px;
  padding: 1.5rem; background: var(--white);
  display: flex; flex-direction: column; gap: 0.85rem;
}
.deal-sector { font-size: 1rem; font-weight: 700; color: var(--accent-deep); }
.deal-name { font-size: 1.2rem; font-weight: 700; line-height: 1.25; letter-spacing: -0.015em; }
.deal-meta { margin-top: auto; padding-top: 0.85rem; border-top: 1px solid var(--rule); }
.deal-meta div { display: flex; justify-content: space-between; gap: 1rem; font-size: 1.0625rem; padding-block: 0.2rem; }
.deal-meta dt { color: var(--ink-muted); }
.deal-meta dd { margin: 0; font-weight: 600; }

/* industry tile */
.tile {
  display: block; text-decoration: none; color: var(--navy);
  border: 1px solid var(--rule); border-radius: 6px;
  padding: 1.35rem 1.5rem; background: var(--white);
  font-weight: 600; font-size: 1.05rem;
  transition: border-color 140ms ease, background-color 140ms ease;
}
.tile:hover { border-color: var(--accent); background: var(--offwhite); }
.tile small { display: block; font-weight: 400; font-size: 1rem; color: var(--ink-muted); margin-top: 0.3rem; }

/* insight / article link row */
.article-row {
  display: block; text-decoration: none; color: var(--navy);
  padding-block: 1.5rem; border-bottom: 1px solid var(--rule);
}
.article-row:hover .article-title { box-shadow: inset 0 -8px 0 var(--accent-soft); }
.article-kicker { font-size: 1rem; color: var(--accent-deep); font-weight: 600; margin-bottom: 0.35rem; }
.article-title {
  font-size: var(--t-h3); font-weight: 700; letter-spacing: -0.015em; line-height: 1.25;
  box-shadow: inset 0 0 0 var(--accent-soft); transition: box-shadow 140ms ease;
}
.article-row p { margin-top: 0.5rem; color: var(--ink-muted); font-size: 1rem; }

/* checklist */
.checks { list-style: none; margin: 0; padding: 0; }
.checks li {
  position: relative; padding-left: 1.9rem; margin-bottom: 1.05rem; line-height: 1.6;
  color: var(--ink-muted); max-width: var(--measure);
}
.checks li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 0.7rem; height: 0.7rem; border-radius: 2px;
  background: var(--accent-soft);
}
.band-navy .checks li { color: var(--ink-onnavy); }
.band-navy .checks li::before { background: var(--accent); }


/* ============================================================
   Credibility without photography.
   Every device below earns trust through command of the subject
   rather than a picture of somebody else's warehouse.
   ============================================================ */

/* --- Asymmetry panel: two columns set against each other -------------- */
.compare { display: grid; gap: 1rem; }
@media (min-width: 760px) { .compare { grid-template-columns: 1fr 1fr; gap: 1.25rem; } }

.compare-side {
  border: 1px solid var(--rule); border-radius: 8px;
  padding: 1.5rem 1.6rem; background: var(--white);
}
.compare-side h4 {
  font-size: 1.0625rem; font-weight: 700; color: var(--ink-muted);
  margin: 0 0 0.9rem;
}
.compare-side ul { list-style: none; margin: 0; padding: 0; }
.compare-side li {
  padding: 0.85rem 0; line-height: 1.5; border-bottom: 1px solid var(--rule);
  font-size: 1rem; color: var(--ink);
}
.compare-side li:last-child { border-bottom: 0; padding-bottom: 0; }

/* the buyer's side carries the weight, which is the point */
.compare-side.is-weighted {
  background: var(--navy); border-color: var(--navy);
}
.compare-side.is-weighted h4 { color: var(--accent-soft); }
.compare-side.is-weighted li { color: var(--white); border-bottom-color: var(--rule-onnavy); }

/* --- Positioning scale: broker / us / bank ---------------------------- */
.scale { display: grid; gap: 0.85rem; }
@media (min-width: 860px) { .scale { grid-template-columns: 1fr 1.15fr 1fr; align-items: stretch; } }

.scale-item {
  border: 1px dashed rgba(0, 27, 61, 0.28); border-radius: 8px;
  padding: 1.5rem 1.5rem 1.6rem; background: transparent;
}
.scale-item h4 { font-size: 1.05rem; margin: 0 0 0.55rem; color: var(--ink-muted); }
.scale-item p { font-size: 1.0625rem; color: var(--ink-muted); margin: 0; }

.scale-item.is-us {
  background: var(--navy); border: 1px solid var(--navy);
  border-top: 5px solid var(--accent);
}
.scale-item.is-us h4 { color: var(--white); font-size: 1.25rem; letter-spacing: -0.015em; }
.scale-item.is-us p { color: var(--ink-onnavy); }

.band-navy .scale-item { border-color: var(--rule-onnavy); }
.band-navy .scale-item h4, .band-navy .scale-item p { color: var(--ink-onnavy); }
.band-navy .scale-item.is-us { background: var(--white); border-color: var(--white); }
.band-navy .scale-item.is-us h4 { color: var(--navy); }
.band-navy .scale-item.is-us p { color: var(--ink-muted); }

/* --- Term chips: command of the vocabulary --------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.chips li {
  border: 1px solid var(--rule); border-radius: 100px;
  padding: 0.5rem 0.95rem; font-size: 1.0625rem; font-weight: 600;
  color: var(--navy); background: var(--white);
}
.band-navy .chips li,
.hero .chips li {
  border-color: var(--rule-onnavy); background: transparent; color: var(--white);
}
.band-off .chips li { background: var(--white); }

/* --- Standalone statement, set large -------------------------------- */
.statement {
  font-size: clamp(1.5rem, 1.1rem + 1.9vw, 2.4rem);
  line-height: 1.3; letter-spacing: -0.02em; font-weight: 700;
  max-width: 22ch; color: var(--navy);
}
.band-navy .statement { color: var(--white); }
.statement-wide { max-width: 30ch; }

.statement-note.statement-note-wide { max-width: 78ch; }

.statement-note {
  margin-top: 1.75rem; padding-top: 1.25rem;
  border-top: 1px solid var(--rule); max-width: 52ch;
  color: var(--ink-muted); font-size: 1.0125rem;
}
.band-navy .statement-note { border-top-color: var(--rule-onnavy); color: var(--ink-onnavy); }

/* --- Numbered factor rail ------------------------------------------- */
.rail { list-style: none; margin: 0; padding: 0; counter-reset: rail; }
.rail li {
  counter-increment: rail; position: relative;
  padding: 1.15rem 0 1.15rem 3rem; line-height: 1.5;
  border-bottom: 1px solid var(--rule);
  color: var(--ink); font-size: 1.0125rem;
}
.rail li::before {
  content: counter(rail, decimal-leading-zero);
  position: absolute; left: 0; top: 1.05rem;
  font-size: 1rem; font-weight: 700; color: var(--accent-deep);
  font-variant-numeric: tabular-nums;
}
.rail li span { display: block; color: var(--ink-muted); font-size: 1.0625rem; margin-top: 0.15rem; }
.band-navy .rail li { color: var(--white); border-bottom-color: var(--rule-onnavy); }
.band-navy .rail li span { color: var(--ink-onnavy); }

/* --- Advisor monogram, in place of a portrait ----------------------- */
.monogram {
  width: 4.5rem; height: 4.5rem; border-radius: 8px;
  background: var(--navy); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; font-weight: 800; letter-spacing: -0.03em;
  border-bottom: 4px solid var(--accent);
  margin-bottom: 1.25rem;
}


/* ============================================================
   Modern marketing-site patterns
   ============================================================ */

/* --- eligibility line above the headline ---------------------------- */
.eyebrow {
  display: inline-block; margin: 0 0 1rem;
  font-size: 1.0625rem; font-weight: 600; color: var(--accent-soft);
  padding: 0.4rem 0.9rem; border: 1px solid var(--rule-onnavy);
  border-radius: 100px; max-width: none;
}
.band-white .eyebrow, .band-off .eyebrow {
  color: var(--accent-deep); border-color: var(--rule);
}

/* --- stat strip ------------------------------------------------------ */
.stat-strip {
  display: grid; gap: 0; margin: 0;
  border-top: 1px solid var(--rule-onnavy);
}
.stat-strip > div {
  padding: 1.5rem 0 1.4rem;
  border-bottom: 1px solid var(--rule-onnavy);
}
@media (min-width: 720px) {
  .stat-strip { grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--rule-onnavy); }
  .stat-strip > div { border-bottom: 0; padding: 1.9rem 1.75rem 1.9rem 0; }
  .stat-strip > div + div { border-left: 1px solid var(--rule-onnavy); padding-left: 1.75rem; }
}
.stat-figure {
  font-size: clamp(1.75rem, 1.3rem + 1.7vw, 2.5rem); font-weight: 800;
  letter-spacing: -0.035em; line-height: 1; color: var(--white);
}
.band-white .stat-figure, .band-off .stat-figure { color: var(--navy); }
.stat-label {
  margin: 0.6rem 0 0; font-size: 1.0625rem; line-height: 1.45;
  color: var(--ink-onnavy); max-width: 26ch;
}
.band-white .stat-label, .band-off .stat-label { color: var(--ink-muted); }

/* --- sector grid with counts ---------------------------------------- */
.sectors { display: grid; gap: 0.75rem; }
@media (min-width: 620px)  { .sectors { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .sectors { grid-template-columns: repeat(3, 1fr); } }

.sector {
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 8.5rem; gap: 1.25rem;
  text-decoration: none; color: var(--navy);
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 1.35rem 1.4rem; background: var(--white);
  transition: border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}
.sector:hover {
  border-color: var(--accent); transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 27, 61, 0.09);
}
.sector-name { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; }
.sector-meta {
  display: block; font-size: 1rem; font-weight: 400;
  color: var(--ink-muted); line-height: 1.45; max-width: 30ch;
}
/* the arrow anchors to the card, not to the wrapping text */
.sector { position: relative; padding-right: 2.75rem; }
.sector::after {
  content: "→"; position: absolute; right: 1.25rem; bottom: 1.2rem;
  color: var(--accent-deep); font-weight: 700; font-size: 1.05rem;
  transition: transform 140ms ease;
}
.sector:hover::after { transform: translateX(3px); }

/* --- FAQ accordion, native disclosure ------------------------------- */
.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.35rem 2.5rem 1.35rem 0;
  font-size: 1.0625rem; font-weight: 700; color: var(--navy);
  letter-spacing: -0.012em; position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 0.25rem; top: 1.15rem;
  font-size: 1.5rem; font-weight: 400; color: var(--accent-deep); line-height: 1;
}
.faq details[open] summary::after { content: "\2013"; }
.faq summary:hover { color: var(--accent-deep); }
.faq-body { padding: 0 2.5rem 1.5rem 0; }
.faq-body p { color: var(--ink-muted); font-size: 1rem; }

.band-navy .faq, .band-navy .faq details { border-color: var(--rule-onnavy); }
.band-navy .faq summary { color: var(--white); }
.band-navy .faq-body p { color: var(--ink-onnavy); }

/* --- larger closing call to action ---------------------------------- */
.cta-final { padding-block: clamp(3.5rem, 8vw, 6rem); }
.cta-final h2 {
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  letter-spacing: -0.032em; max-width: 18ch;
}

/* --- softer, rounder cards throughout ------------------------------- */
.card, .deal, .tile, .compare-side, .scale-item, .form-panel {
  border-radius: var(--radius);
}
.btn { border-radius: 8px; }
.hero-form { border-radius: var(--radius); }

/* ---------- forms ---------- */

.form-panel {
  background: var(--white); border: 1px solid var(--rule);
  border-radius: 8px; padding: clamp(1.5rem, 4vw, 2.25rem);
}
.band-navy .form-panel { border-color: transparent; }

.field { margin-bottom: 1.15rem; }
.field label {
  display: block; font-size: 1.0625rem; font-weight: 700;
  color: var(--navy); margin-bottom: 0.45rem;
}
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 1.125rem; color: var(--navy);
  padding: 1rem 1rem; background: var(--white);
  border: 1px solid rgba(0,27,61,0.25); border-radius: 4px;
  transition: border-color 140ms ease;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(0,27,61,0.45); }
.field textarea { min-height: 7rem; resize: vertical; }
.field-note { font-size: 1rem; color: var(--ink-muted); margin-top: 0.4rem; }

@media (min-width: 620px) {
  .field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
}

.form-foot { font-size: 1rem; color: var(--ink-muted); margin-top: 1rem; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }


/* ---------- long-form article typography ----------
   Sized for comfortable reading by people in their sixties and seventies:
   larger body, generous leading, short measure, strong heading contrast. */

.prose { font-size: 1.25rem; line-height: 1.78; }
.prose p { margin-bottom: 1.35em; max-width: 60ch; color: var(--ink); }
.prose h2 {
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 1.95rem);
  margin: 2.9rem 0 1.1rem; letter-spacing: -0.02em; line-height: 1.25;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  font-size: 1.2rem; margin: 2rem 0 0.75rem;
  letter-spacing: -0.012em; line-height: 1.3;
}
.prose ul { margin: 0 0 1.35em; }
.prose .checks li { font-size: 1.125rem; color: var(--ink); margin-bottom: 0.7rem; }
.prose > h2 + p { margin-top: 0; }

.takeaway {
  background: var(--white); border: 1px solid var(--rule);
  border-left: 5px solid var(--cta);
  border-radius: var(--radius); padding: 1.75rem 1.9rem;
}
.takeaway h2 { font-size: 1.3rem; margin-bottom: 1.1rem; }
.takeaway .checks li { font-size: 1.0625rem; color: var(--ink); }

article .hero .lead { max-width: 54ch; }

/* ---------- footer ---------- */

.site-footer { background: var(--navy); color: var(--ink-onnavy); padding-block: 3.5rem 2rem; }
.site-footer h4 { color: var(--white); font-size: 1.0625rem; margin-bottom: 0.9rem; font-weight: 700; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 0.55rem; }
.site-footer a { color: var(--ink-onnavy); text-decoration: none; font-size: 1.0625rem; }
.site-footer a:hover { color: var(--white); }

.footer-grid { display: grid; gap: 2.5rem; }
@media (min-width: 700px)  { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 3rem; } }

.footer-brand p { color: var(--ink-onnavy); font-size: 1.0625rem; max-width: 30ch; margin-top: 0.9rem; }
.footer-tagline {
  color: var(--accent-soft) !important; font-weight: 600;
  letter-spacing: 0.01em; margin-top: 0.75rem !important; font-size: 1rem !important;
}

.footer-legal {
  margin-top: 1.75rem; padding-top: 1.5rem;
  border-top: 1px solid var(--rule-onnavy);
}
.footer-legal p {
  font-size: 1rem; line-height: 1.65; color: var(--ink-onnavy);
  max-width: 100ch; margin: 0;
}

.footer-base {
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--rule-onnavy);
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between;
  font-size: 1rem;
}

/* ---------- build-time placeholder warning ---------- */
/* DELETE these blocks (and this rule) before launch. */

.placeholder-note {
  border: 2px dashed #C2410C; background: #FFF7ED; color: #7C2D12;
  border-radius: 6px; padding: 1rem 1.15rem; margin-bottom: 2rem;
  font-size: 1.0625rem; font-weight: 600; max-width: 70ch;
}
.placeholder-note strong { display: block; margin-bottom: 0.25rem; color: #7C2D12; }
/* `.band-navy p` outranks a single class, so nested light panels need this */
.band-navy p.placeholder-note, .band-navy .placeholder-note strong { color: #7C2D12; }
.band-navy .form-panel p, .band-navy .hero-form p { color: var(--ink-muted); }
.band-navy .form-panel label, .band-navy .hero-form label { color: var(--navy); }

/* ---------- utilities ---------- */

.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.mb-2 { margin-bottom: 2rem; }
.mb-3 { margin-bottom: 3rem; }
.measure { max-width: var(--measure); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}