/* Microsite theme — the ONLY file that decides how a site looks.
   Swapping this file (plus its tokens) re-skins every site without touching
   the generator or any page markup. Semantic classes only. No framework.
   Budget: keep under 20 KB. No @import, no external fonts. */

/* ---------- tokens: the per-site variation surface ---------- */
:root {
  --brand: #1a56db;
  --brand-dark: #123f9e;
  --brand-tint: #eef3ff;
  --ink: #15202b;
  --ink-soft: #47586b;
  --line: #dde4ec;
  --bg: #ffffff;
  --bg-alt: #f6f8fb;
  --footer-bg: #15202b;
  --radius: 10px;
  --wrap: 1120px;
  --step: clamp(1rem, 0.9rem + 0.4vw, 1.125rem);
  --h1: clamp(1.9rem, 1.4rem + 2.4vw, 3rem);
  --h2: clamp(1.45rem, 1.2rem + 1.2vw, 2rem);
  --h3: 1.15rem;
  --gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: var(--step)/1.65 var(--font);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand); }
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .6em; font-weight: 700; letter-spacing: -.015em; }
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2rem); }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--bg);
  border-bottom: 1px solid var(--line); }
.nav { display: flex; align-items: center; gap: 1rem; max-width: var(--wrap);
  margin: 0 auto; padding: .7rem clamp(1rem, 4vw, 2rem); }
.nav__logo { display: flex; align-items: center; gap: .55rem; text-decoration: none;
  color: var(--ink); font-weight: 700; font-size: 1.02rem; line-height: 1.15; }
.nav__logo svg { flex: 0 0 auto; }
.nav__links { display: flex; align-items: center; gap: 1.35rem; list-style: none;
  margin: 0 0 0 auto; padding: 0; }
.nav__links a { color: var(--ink-soft); text-decoration: none; font-size: .95rem; font-weight: 500; }
.nav__links a:hover { color: var(--brand); }
.nav__call { background: var(--brand); color: #fff !important; padding: .55rem 1rem;
  border-radius: var(--radius); font-weight: 700 !important; white-space: nowrap; }
.nav__toggle { display: none; background: none; border: 1px solid var(--line);
  border-radius: 8px; font-size: 1.3rem; padding: .2rem .6rem; cursor: pointer; color: var(--ink); }

/* ---------- sections ---------- */
.section { padding: var(--gap) 0; }
.section--alt { background: var(--bg-alt); }
.section__lead { font-size: 1.08em; color: var(--ink-soft); max-width: 68ch; }
.section > .wrap > h2 { max-width: 30ch; }
.section p, .section li { max-width: 72ch; }

/* ---------- hero ----------
   Feature hero: dark copy panel on the left, photograph bleeding off the right
   edge of the viewport. The copy column stays aligned to the .wrap gutter so it
   lines up with every section below it. */
.hero__eyebrow { text-transform: uppercase; letter-spacing: .09em; font-size: .78rem;
  font-weight: 700; margin: 0 0 .8rem; }
.hero h1 { margin-bottom: .4em; }
.hero__sub { font-size: 1.12em; max-width: 46ch; }

/* The left gutter lives on the hero itself, not on the copy column: a
   percentage here resolves against the full page width (excluding the
   scrollbar), so the headline lands on the same left edge as every .wrap
   below it. Putting it on the grid item would resolve against the column
   instead and drift by a few pixels. */
.hero--feature { background: var(--ink); color: #fff;
  padding-left: max(clamp(1rem, 4vw, 2rem),
                    calc((100% - var(--wrap)) / 2 + clamp(1rem, 4vw, 2rem))); }
.hero--feature .hero__inner { display: grid; grid-template-columns: 1.02fr .98fr;
  align-items: stretch; min-height: 30rem; }
.hero--feature .hero__copy { display: flex; align-items: center;
  padding: calc(var(--gap) * 1.1) clamp(1.5rem, 3vw, 3rem) calc(var(--gap) * 1.1) 0; }
.hero--feature .hero__copy-in { max-width: 34rem; }
.hero--feature .hero__eyebrow { color: #fff; opacity: .72; }
.hero--feature .hero__sub { color: rgba(255,255,255,.78); }
.hero--feature .btn-note { color: rgba(255,255,255,.62); }
.hero--feature .btn { background: var(--brand); border-color: var(--brand); }
.hero--feature .btn:hover { background: #fff; border-color: #fff; color: var(--ink); }
.hero__media { position: relative; overflow: hidden; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
/* soft seam so the photo meets the dark panel instead of butting against it */
.hero__media::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 8rem;
  background: linear-gradient(90deg, var(--ink), transparent); z-index: 1; }

.hero--plain { background: var(--bg-alt); border-bottom: 1px solid var(--line);
  padding: calc(var(--gap) * .85) 0; }
.hero--plain .hero__eyebrow { color: var(--brand); }
.hero--plain .hero__sub { color: var(--ink-soft); }
.hero--plain .hero__copy-in { max-width: 46rem; }

/* ---------- split: image beside prose, alternating sides ---------- */
.section--split { padding: calc(var(--gap) * 1.05) 0; }
.split { display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.split--flip .split__text { order: 2; }
.split__text h2 { max-width: 22ch; }
.split__media { margin: 0; }
.split__media img { width: 100%; border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(21,32,43,.08), 0 12px 30px -12px rgba(21,32,43,.28); }
.split__media figcaption { font-size: .85rem; color: var(--ink-soft); margin-top: .7rem;
  padding-left: .9rem; border-left: 2px solid var(--brand); }

/* calls-to-action */
.btn { display: inline-block; background: var(--brand); color: #fff; text-decoration: none;
  font-weight: 700; padding: .85rem 1.5rem; border-radius: var(--radius);
  border: 2px solid var(--brand); }
.btn:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.btn--ghost { background: transparent; color: var(--brand); }
.btn--ghost:hover { background: var(--brand-tint); color: var(--brand-dark); }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.4rem; align-items: center; }
.btn-note { font-size: .9rem; color: var(--ink-soft); }
.section--cta { background: var(--brand); color: #fff; text-align: center; }
.section--cta h2, .section--cta p { color: #fff; margin-left: auto; margin-right: auto; }
.section--cta .btn { background: #fff; color: var(--brand); border-color: #fff; }
.section--cta .btn:hover { background: var(--brand-tint); }

/* cards / grids */
.grid { display: grid; gap: 1.15rem; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
/* Cards read as ruled entries rather than boxes — a lighter silhouette than a
   grid of outlined tiles, and it keeps the eye moving down the column. */
.card { border-top: 3px solid var(--brand); padding: 1.1rem 0 0; background: none;
  border-radius: 0; }
.card h3 { margin-bottom: .4em; }
.card p { color: var(--ink-soft); font-size: .97em; }
.card a { font-weight: 600; text-decoration: none; }
.card a:hover { text-decoration: underline; }

/* trust strip */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 1.5rem 0; background: none; }
.stat b { display: block; font-size: 1.35rem; color: var(--brand); line-height: 1.2; }
.stat span { font-size: .88rem; color: var(--ink-soft); }

/* numbered steps */
.steps { list-style: none; counter-reset: s; padding: 0; margin: 0; display: grid; gap: 1rem; }
.steps li { counter-increment: s; position: relative; padding-left: 3.1rem; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: .05rem;
  width: 2.15rem; height: 2.15rem; border-radius: 50%; background: var(--brand-tint);
  color: var(--brand); font-weight: 700; display: grid; place-items: center; font-size: .95rem; }
.steps b { display: block; }

/* checklist */
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.checklist li { position: relative; padding-left: 1.85rem; }
.checklist li::before { content: ""; position: absolute; left: .15rem; top: .55em;
  width: .72rem; height: .38rem; border-left: 2.5px solid var(--brand);
  border-bottom: 2.5px solid var(--brand); transform: rotate(-45deg); }

/* related-link rows */
.linkrow { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap;
  gap: .55rem .7rem; }
.linkrow a { display: inline-block; text-decoration: none; font-weight: 600;
  font-size: .95rem; padding: .5rem .9rem; border: 1px solid var(--line);
  border-radius: 999px; color: var(--brand); background: var(--bg); }
.linkrow a:hover { background: var(--brand-tint); border-color: var(--brand); }

/* faq */
.faq { border-bottom: 1px solid var(--line); padding: .95rem 0; }
.faq summary { cursor: pointer; font-weight: 650; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; float: right; color: var(--brand); font-weight: 700; }
.faq[open] summary::after { content: "\2212"; }
.faq p { margin: .7rem 0 .2rem; color: var(--ink-soft); }

/* diagrams */
.figure { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem;
  background: var(--bg); }
.figure figcaption { font-size: .88rem; color: var(--ink-soft); margin-top: .7rem; }

/* ---------- footer ---------- */
.site-footer { background: var(--footer-bg); color: rgba(255,255,255,.82);
  padding: var(--gap) 0 1.4rem; font-size: .95rem; }
.site-footer h4 { color: #fff; font-size: .92rem; text-transform: uppercase;
  letter-spacing: .06em; margin-bottom: .9em; }
.site-footer a { color: rgba(255,255,255,.82); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: var(--gap); }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.footer-disclaimer { font-size: .85rem; color: rgba(255,255,255,.58); margin-top: 1rem; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.14); margin-top: var(--gap);
  padding-top: 1.2rem; font-size: .85rem; color: rgba(255,255,255,.58); }

/* ---------- sticky call control ----------
   The phone number is the entire product, so it is never more than one tap
   away: a floating pill on desktop, a full-width bar on phones. Declared
   before the media queries so the mobile override actually wins. */
.callbar { position: fixed; z-index: 60; background: var(--brand); color: #fff;
  text-decoration: none; font-weight: 700; display: flex; align-items: center;
  justify-content: center; gap: .5rem; right: 1.5rem; bottom: 1.5rem; left: auto;
  padding: .9rem 1.5rem; border-radius: 999px;
  box-shadow: 0 6px 24px -6px rgba(21,32,43,.45); }
.callbar:hover { background: var(--brand-dark); }

/* ---------- mobile ---------- */
@media (max-width: 860px) {
  /* photo on top, copy beneath — the seam gradient only makes sense side-by-side */
  .hero--feature { padding-left: 0; }
  .hero--feature .hero__inner { grid-template-columns: 1fr; min-height: 0; }
  .hero--feature .hero__media { order: -1; height: 14rem; }
  .hero__media::before { display: none; }
  .hero--feature .hero__copy { padding: var(--gap) clamp(1rem, 4vw, 2rem); }
  .hero--feature .hero__copy-in { max-width: none; }
  .split { grid-template-columns: 1fr; }
  .split--flip .split__text { order: 0; }
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .nav__toggle { display: block; margin-left: auto; order: 2; }
  .nav__links { display: none; order: 3; width: 100%; flex-direction: column;
    align-items: flex-start; gap: .1rem; margin: .6rem 0 .3rem; }
  .nav__links.open { display: flex; }
  .nav__links li { width: 100%; border-top: 1px solid var(--line); }
  .nav__links a { display: block; padding: .7rem .1rem; }
  .nav__call { text-align: center; margin: .6rem 0; }
  .nav { flex-wrap: wrap; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  /* full-width bar on phones, where thumb reach matters more than elegance */
  body { padding-bottom: 3.65rem; }
  .callbar { left: 0; right: 0; bottom: 0; border-radius: 0; padding: .95rem;
    box-shadow: 0 -2px 12px rgba(0,0,0,.16); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}