/*
Theme Name: Get Paid Pronto
Theme URI: https://getpaidpronto.com
Author: Get Paid Pronto
Description: Custom block theme for Get Paid Pronto. Design tokens come from the approved design fix list (section F); every colour, size, radius and shadow is locked in theme.json so editors can change copy without changing the design system.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: get-paid-pronto
Tags: block-theme, full-site-editing, business
*/


/* ============================================================
   DESIGN TOKENS — one navy, one red, one green, 4 greys, 1 border.
   Replaces: 5 blues + 2 reds + 2 button radii + 9 font sizes.
   ============================================================ */
:root{
  /* Brand */
  --navy:#0B1F3A;          /* headings, dark sections  (NOT #000) */
  --navy-soft:#1B3358;
  --red:#C8102E;           /* THE single accent */
  --red-hover:#A50D26;
  --red-tint:#FDF2F4;
  --green:#0F7B4F;         /* functional only: the cash-price side */
  --green-tint:#EEF8F3;

  /* Neutrals */
  --ink:#0B1F3A;
  --body:#54657C;          /* 5.54:1 on white */
  --muted:#5C6E82;         /* 5.24:1 on white — was #7A8A9E at 3.5:1, which failed WCAG */
  --surface:#FFFFFF;
  --surface-2:#F5F7FA;
  --surface-3:#EDF1F6;
  --border:#E2E8EF;
  --border-strong:#CBD5E1;

  /* Type */
  --display:'Instrument Sans','Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --text:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* Radii — one per role, no more 50px vs 700px */
  --r-pill:999px;
  --r-btn:10px;
  --r-card:14px;
  --r-input:8px;
  --r-chip:6px;

  /* Elevation — subtle, navy-tinted (Stripe's trick) */
  --sh-1:0 1px 2px rgba(11,31,58,.06);
  --sh-2:0 1px 3px rgba(11,31,58,.07), 0 8px 20px -8px rgba(11,31,58,.10);
  --sh-3:0 24px 48px -24px rgba(11,31,58,.22), 0 2px 6px rgba(11,31,58,.06);

  /* Spacing */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  --container:1160px;
  --focus:0 0 0 3px rgba(200,16,46,.28);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--surface); color:var(--body);
  font-family:var(--text); font-size:1.0625rem; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:var(--display); color:var(--ink); margin:0; font-weight:700; letter-spacing:-.02em; text-wrap:balance}
h1{font-size:clamp(2.5rem,5.6vw,4.125rem); line-height:1.03; letter-spacing:-.032em}
h2{font-size:clamp(1.75rem,3.3vw,2.625rem); line-height:1.1; letter-spacing:-.026em}
h3{font-size:1.1875rem; line-height:1.3; letter-spacing:-.012em}
p{margin:0}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
:focus-visible{outline:none; box-shadow:var(--focus); border-radius:6px}

.container{max-width:var(--container); margin:0 auto; padding:0 var(--s5)}
@media(min-width:768px){.container{padding:0 var(--s6)}}

/* Type helpers */
.eyebrow{
  font-family:var(--text); font-size:.8125rem; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:var(--red); margin-bottom:var(--s4);
}
.lede{font-size:1.1875rem; line-height:1.55; color:var(--body)}
.small{font-size:.875rem; line-height:1.55; color:var(--muted)}
.tnum{font-variant-numeric:tabular-nums}
section{padding:var(--s8) 0}
@media(min-width:900px){section{padding:var(--s9) 0}}
.rule{height:1px; background:var(--border); border:0; margin:0}

/* ---------- Buttons: ONE radius, ONE accent, real focus ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:48px; padding:0 var(--s5);
  font-family:var(--text); font-size:1rem; font-weight:600; letter-spacing:-.005em;
  border-radius:var(--r-btn); border:1px solid transparent; cursor:pointer;
  transition:background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}
.btn-primary{background:var(--red); color:#fff}
.btn-primary:hover{background:var(--red-hover)}
.btn-primary:active{transform:translateY(1px)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--border-strong)}
.btn-ghost:hover{background:var(--surface-2); border-color:var(--muted)}
.btn-sm{min-height:42px; padding:0 var(--s4); font-size:.9375rem}
.btn-block{width:100%}

/* ---------- Header: sticky, CTA always reachable ---------- */
.hdr{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.9); backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid var(--border)}
.hdr-in{display:flex; align-items:center; gap:var(--s5); min-height:92px}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--display); font-weight:700; letter-spacing:-.03em; color:var(--ink); font-size:1.0625rem; white-space:nowrap}
.logo{display:block}
.gpp-defs{position:absolute; width:0; height:0; overflow:hidden}
.logo-hdr{height:51px; width:121px}
@media(min-width:768px){.logo-hdr{height:64px; width:151px}}
.logo-ft{height:68px; width:161px; margin-bottom:var(--s3)}
.nav{display:none; gap:var(--s5); margin-left:var(--s4)}
.nav a{font-size:.9375rem; font-weight:500; color:var(--body); padding:8px 0}
.nav a:hover{color:var(--ink)}
.hdr-cta{margin-left:auto; display:flex; align-items:center; gap:var(--s3)}
.hdr-tel{display:none; font-size:.9375rem; font-weight:600; color:var(--ink)}
@media(min-width:1000px){.nav{display:flex}.hdr-tel{display:inline-flex; align-items:center; height:42px}}
@media(max-width:999px){
  .hdr-cta .btn-primary{display:none}
  .burger{display:inline-flex}
}
.burger{width:42px; height:42px; border:1px solid var(--border-strong); border-radius:var(--r-btn); background:transparent; cursor:pointer; display:grid; place-items:center; gap:0}
.burger span{display:block; width:16px; height:1.5px; background:var(--ink); margin:2px 0}
@media(min-width:1000px){.burger{display:none}}
.mnav{display:none; border-bottom:1px solid var(--border); background:#fff; padding:var(--s4) 0}
.mnav[data-open="true"]{display:block}
.mnav a{display:block; padding:14px var(--s5); font-size:1.0625rem; font-weight:500; color:var(--ink); border-bottom:1px solid var(--border)}
.mnav a:last-child{border-bottom:0}

/* ---------- Hero: typography does the work, no stock photo ---------- */
.hero{padding:var(--s7) 0 var(--s8)}
@media(min-width:900px){.hero{padding:var(--s8) 0 var(--s9)}}
.hero-grid{display:grid; gap:var(--s7)}
@media(min-width:1000px){.hero-grid{grid-template-columns:1.05fr .95fr; gap:var(--s8); align-items:center}}
.hero p.lede{max-width:34ch; margin-top:var(--s5)}
.hero-cta{display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s6)}
.hero-facts{display:flex; flex-wrap:wrap; gap:var(--s2) var(--s5); margin-top:var(--s5); padding:0; list-style:none}
.hero-facts li{font-size:.9375rem; color:var(--body); display:flex; align-items:center; gap:8px}
.tick{width:16px; height:16px; flex:0 0 16px; color:var(--green)}

/* ---------- Receipt: illustrates the actual mechanic (not a fake dashboard) ---------- */
.receipt{background:#fff; border:1px solid var(--border); border-radius:var(--r-card); box-shadow:var(--sh-3); overflow:hidden}
.receipt-hd{display:flex; justify-content:space-between; align-items:center; padding:var(--s4) var(--s5); border-bottom:1px solid var(--border); background:var(--surface-2)}
.receipt-hd .t{font-family:var(--display); font-weight:600; font-size:.9375rem; color:var(--ink)}
.receipt-hd .n{font-family:var(--mono); font-size:.8125rem; color:var(--muted)}
.receipt-bd{padding:var(--s5)}
.line{display:flex; justify-content:space-between; gap:var(--s4); padding:9px 0; font-size:.9375rem; color:var(--body)}
.line span:last-child{font-family:var(--mono); font-variant-numeric:tabular-nums; color:var(--ink)}
.line.sub{padding-top:var(--s3); margin-top:var(--s2); border-top:1px dashed var(--border-strong); font-weight:600}
.line.sub span:last-child{font-size:1rem}
.pay{border-radius:var(--r-card); padding:var(--s4); margin-top:var(--s4)}
.pay-card{background:var(--surface-2); border:1px solid var(--border)}
.pay-cash{background:var(--green-tint); border:1px solid rgba(15,123,79,.22)}
.pay-top{display:flex; justify-content:space-between; align-items:baseline; gap:var(--s3)}
.pay-lbl{font-size:.8125rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--muted)}
.pay-amt{font-family:var(--display); font-weight:700; font-size:1.5rem; color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.pay-cash .pay-amt{color:var(--green)}
.pay-note{font-size:.875rem; margin-top:6px; color:var(--body)}
.save{margin-top:var(--s4); padding-top:var(--s4); border-top:1px solid var(--border); font-size:.875rem; color:var(--body); display:flex; gap:10px; align-items:flex-start}
.save strong{color:var(--ink)}

/* ---------- Proof strip ---------- */
.proof{background:var(--surface-2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:var(--s6) 0}
.proof-in{display:grid; gap:var(--s5)}
@media(min-width:900px){.proof-in{grid-template-columns:repeat(3,1fr); gap:var(--s7)}}
.quote{margin:0}
.quote p{font-size:.9375rem; line-height:1.55; color:var(--ink)}
.quote footer{margin-top:var(--s3); font-size:.875rem; color:var(--muted); font-weight:500}
.ph{display:inline-block; border:1px dashed var(--border-strong); border-radius:var(--r-chip); padding:1px 7px; font-size:.75rem; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); background:#fff}

/* ---------- Feature list: dense, typographic, no icon tiles ---------- */
.feat{display:grid; gap:0; margin-top:var(--s6)}
@media(min-width:820px){.feat{grid-template-columns:1fr 1fr; column-gap:var(--s8)}}
.feat-row{padding:var(--s4) 0; border-top:1px solid var(--border); display:grid; grid-template-columns:1fr; gap:2px}
@media(min-width:820px){.feat-row:nth-child(-n+2){border-top:0; padding-top:0}}
.feat-row h4{font-family:var(--text); font-size:1rem; font-weight:600; color:var(--ink); letter-spacing:-.008em; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.feat-row h4 em{font-style:normal; font-family:var(--text); font-size:.6875rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--muted)}
.feat-row p{font-size:.9375rem}

/* ---------- Integrations: real logo wall goes here ---------- */
.logos{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s4); margin-top:var(--s6)}
@media(min-width:640px){.logos{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.logos{grid-template-columns:repeat(6,1fr); gap:var(--s5)}}
.logo-cell{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; min-height:106px; border:1px solid var(--border); border-radius:var(--r-card); background:#fff; padding:var(--s4) var(--s3); text-align:center}
.logo-mark{display:flex; align-items:center; justify-content:center; height:34px}
.logo-mark svg,.logo-mark img{display:block}
.logo-cat{font-size:.6875rem; color:var(--muted); letter-spacing:.05em; text-transform:uppercase; line-height:1}
.logo-text{font-family:var(--display); font-weight:600; font-size:1.625rem; letter-spacing:-.022em; color:#64748B; line-height:1}

/* ---------- Pricing: Compare surface — aligned rows, parity ---------- */
.plans{display:grid; gap:var(--s5); margin-top:var(--s6); align-items:start}
@media(min-width:880px){.plans{grid-template-columns:1fr 1fr; gap:var(--s6)}}
.plan{border:1px solid var(--border); border-radius:var(--r-card); background:#fff; padding:var(--s6); box-shadow:var(--sh-2)}
.plan.feat-plan{border-color:var(--ink); box-shadow:var(--sh-3); position:relative}
.plan .flag{position:absolute; top:-13px; left:var(--s6); background:var(--red); color:#fff; font-size:.75rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:5px 10px; border-radius:var(--r-pill)}
.plan h3{font-size:1.375rem; margin-bottom:6px}
.plan .for{font-size:.9375rem; color:var(--body); min-height:3.1em}
.price{display:flex; align-items:baseline; gap:8px; margin:var(--s5) 0 var(--s3); padding-top:var(--s5); border-top:1px solid var(--border)}
.price b{font-family:var(--display); font-size:2.5rem; font-weight:700; color:var(--ink); letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.price span{font-size:.9375rem; color:var(--muted)}
.price-quote b{font-size:1.75rem; letter-spacing:-.02em; font-variant-numeric:normal}
.plan ul{list-style:none; margin:var(--s4) 0 0; padding:0; display:grid; gap:10px}
.plan li{display:flex; gap:10px; font-size:.9375rem; align-items:flex-start}
.plan li .tick{margin-top:2px}
.note{margin-top:var(--s5); font-size:.875rem; color:var(--muted); max-width:70ch}

/* ---------- FAQ ---------- */
.faq{margin-top:var(--s5); border-top:1px solid var(--border)}
details{border-bottom:1px solid var(--border)}
summary{cursor:pointer; list-style:none; padding:var(--s5) 0; font-family:var(--display); font-size:1.125rem; font-weight:600; color:var(--ink); display:flex; justify-content:space-between; gap:var(--s4); align-items:flex-start}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; font-family:var(--text); font-weight:400; font-size:1.375rem; color:var(--muted); line-height:1}
details[open] summary::after{content:"–"}
details p{padding-bottom:var(--s5); font-size:1rem; max-width:75ch}

/* ---------- CTA band + form ---------- */
.band{background:var(--navy); color:rgba(255,255,255,.78); padding:var(--s8) 0}
@media(min-width:900px){.band{padding:var(--s9) 0}}
.band h2{color:#fff}
.band .eyebrow{color:#F2A0AC}
.band-grid{display:grid; gap:var(--s7)}
@media(min-width:1000px){.band-grid{grid-template-columns:1fr 1fr; gap:var(--s8); align-items:start}}
.band ul{list-style:none; margin:var(--s5) 0 0; padding:0; display:grid; gap:12px}
.band li{display:flex; gap:10px; font-size:1rem; align-items:flex-start}
.band .tick{color:#7FD1A8}
.form{background:#fff; border-radius:var(--r-card); padding:var(--s6); box-shadow:var(--sh-3)}
.form h3{margin-bottom:var(--s5)}
.row{display:grid; gap:var(--s4); margin-bottom:var(--s4)}
.row.two{grid-template-columns:1fr}
@media(min-width:560px){.row.two{grid-template-columns:1fr 1fr}}
label{display:block; font-size:.875rem; font-weight:600; color:var(--ink); margin-bottom:6px}
label .req{color:var(--red)}
input[type=text],input[type=email],input[type=tel],select,textarea{
  width:100%; min-height:48px; padding:11px 14px; font-family:var(--text); font-size:1rem; color:var(--ink);
  background:#fff; border:1px solid var(--border-strong); border-radius:var(--r-input);
}
input::placeholder,textarea::placeholder{color:var(--muted)}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--red); box-shadow:var(--focus)}
.help{font-size:.8125rem; color:var(--muted); margin-top:6px}
.upload{border:1px dashed var(--border-strong); border-radius:var(--r-input); padding:var(--s4); background:var(--surface-2); font-size:.875rem; color:var(--body); display:flex; gap:10px; align-items:center}
.consent{display:flex; gap:10px; align-items:flex-start; margin:var(--s5) 0; font-size:.8125rem; color:var(--body); line-height:1.5}
.consent input{margin-top:3px; width:18px; height:18px; flex:0 0 18px; accent-color:var(--red)}
.consent a{color:var(--ink); text-decoration:underline; text-underline-offset:2px}

/* statement: upload now, or email it to us ---------------------------------- */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.stmt{border:0; padding:0; margin:0; min-width:0}
.stmt-legend{display:block; font-size:.875rem; font-weight:600; color:var(--ink); padding:0; margin-bottom:10px}
.stmt-legend .muted-inline{font-weight:400; color:var(--muted)}
.stmt-opts{display:flex; gap:8px; margin-bottom:var(--s3)}
.stmt-opt{display:flex; align-items:center; gap:9px; flex:1 1 0; min-width:0; min-height:46px; padding:11px 12px;
  border:1px solid var(--border-strong); border-radius:var(--r-input); background:#fff;
  font-size:.875rem; font-weight:500; color:var(--ink); cursor:pointer;
  transition:border-color .15s ease, background .15s ease, box-shadow .15s ease}
.stmt-opt:hover{border-color:var(--ink)}
.stmt-opt input{flex:0 0 18px; width:18px; height:18px; margin:0; accent-color:var(--red)}
.stmt-opt:has(input:checked){border-color:var(--ink); background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--ink)}
.stmt-opt:has(input:focus-visible){outline:2px solid var(--focus); outline-offset:2px}
.stmt-panel{display:none}
.stmt:has(input[value="upload"]:checked) .stmt-panel[data-when="upload"]{display:block}
.stmt:has(input[value="email"]:checked)  .stmt-panel[data-when="email"]{display:block}
@supports not selector(:has(*)){
  .stmt-panel{display:block}
  .stmt-panel + .stmt-panel{margin-top:var(--s3)}
}
.stmt-email{font-size:.875rem; line-height:1.55; color:var(--body); margin-top:2px}
.stmt-email a{color:var(--ink); font-weight:600; text-decoration:underline; text-underline-offset:2px; overflow-wrap:anywhere}

/* ---------- Footer ---------- */
footer.ft{background:var(--surface-2); border-top:1px solid var(--border); padding:var(--s8) 0 var(--s6); font-size:.875rem}
.ft-grid{display:grid; gap:var(--s6)}
@media(min-width:820px){.ft-grid{grid-template-columns:1.6fr 1fr 1fr 1fr; gap:var(--s7)}}
.ft h4{font-family:var(--text); font-size:.75rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:var(--s3)}
.ft a{display:block; padding:4px 0; color:var(--body)}
@media(max-width:819px){.ft a{padding:11px 0}}
.ft a:hover{color:var(--ink)}
.ft .brand{margin-bottom:var(--s4)}
.legal{margin-top:var(--s7); padding-top:var(--s5); border-top:1px solid var(--border); display:flex; flex-wrap:wrap; gap:var(--s3) var(--s5); align-items:center; justify-content:space-between}
.legal-links{display:flex; flex-wrap:wrap; gap:var(--s5)}
.legal-links a{font-weight:500; color:var(--ink)}
.iso{margin-top:var(--s5); font-size:.75rem; line-height:1.6; color:var(--muted); max-width:100ch}


/* ============================================================
   VARIANT B - original top-of-page hero band
   ============================================================ */
.hero-band{
  background-image:linear-gradient(rgba(11,31,58,.80), rgba(11,31,58,.86)), url("assets/pronto-business-hero.webp");
  background-size:cover; background-position:center; background-repeat:no-repeat;
  padding:var(--s7) 0 var(--s8); text-align:center;
}
@media(min-width:900px){.hero-band{padding:var(--s9) 0 104px}}
.hero-band-inner{max-width:900px; margin:0 auto}
.hero-band h1{color:#fff; margin-bottom:var(--s5)}
.eyebrow-dark{color:#F2A0AC}
.lede-dark{color:rgba(255,255,255,.84); font-size:1.1875rem; line-height:1.6; max-width:64ch; margin:0 auto}
.hero-band .hero-cta{justify-content:center}
.btn-ghost-dark{background:transparent; color:#fff; border-color:rgba(255,255,255,.5)}
.btn-ghost-dark:hover{background:rgba(255,255,255,.12); border-color:#fff}
.band-trust{margin-top:var(--s5); font-size:.9375rem; color:rgba(255,255,255,.8)}
.cd-grid{display:grid; gap:var(--s7)}
@media(min-width:1000px){.cd-grid{grid-template-columns:1.05fr .95fr; gap:var(--s8); align-items:start}}

@media(prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important}
}

/* ============================================================
   WordPress block defaults — neutralised
   ------------------------------------------------------------
   WP applies the block gap as a top margin on blocks, and core's
   button styles set their own padding and size. The design was authored
   without either, so the rendered theme drifted ~860px taller than the
   design and buttons came out 56px instead of 42px.

   These rules use :where() so their specificity is zero — any
   class-based margin or size in this file still wins.
   ============================================================ */
:where(h1,h2,h3,h4,h5,h6,p,ul,ol,figure,blockquote,.wp-block-group,.wp-block-heading,.wp-block-details,.wp-block-buttons){
	margin-block-start: 0;
}
/* Core button: put it back to the designed size (10px radius, 42px tall, 15px text).
   Specificity matters here — core's own rule loads after this file. */
.wp-site-blocks .wp-block-button .wp-block-button__link,
.wp-site-blocks .wp-block-button__link.wp-element-button{
	font-size: .9375rem;
	line-height: 1;
	min-height: 42px;
	height: auto;
	padding: 0 16px;
	border-radius: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
/* Lists: core adds a 2em left padding that the design does not use */
:where(.wp-block-list){ padding-left: 0; list-style: none; }

/* showContent fallback: the core Details block attribute did not emit the
   `open` attribute on this install, so the pattern carries it literally too. */
.wp-block-details[open] > summary + *{ margin-top: var(--s4); }

/* ============================================================
   Home page router cards — the split site's front door
   ============================================================ */
.router{padding:var(--s8) 0}
.router-grid{display:grid; gap:var(--s5); margin-top:var(--s7); grid-template-columns:1fr}
@media(min-width:640px){.router-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.router-grid{grid-template-columns:repeat(3,1fr)}}
.router-card{border:1px solid var(--border); border-radius:var(--r-card); padding:var(--s6);
	background:#fff; box-shadow:var(--sh-1); display:flex; flex-direction:column; gap:var(--s2)}
.router-card h3{font-size:1.1875rem; line-height:1.3}
.router-card p{font-size:.9375rem; color:var(--body); line-height:1.55}
.router-card .router-link{margin-top:auto; padding-top:var(--s3)}
.router-link a{font-family:var(--display); font-weight:600; font-size:.9375rem; color:var(--red); text-decoration:none}
.router-link a::after{content:" \2192"}
.router-link a:hover{color:var(--red-hover); text-decoration:underline}

/* ============================================================
   Inner-page hero — navy band, no photo, so sub-pages read as
   part of the set without repeating the home hero image.
   ============================================================ */
.page-hero{background:var(--navy); color:rgba(255,255,255,.80); padding:var(--s8) 0}
.page-hero h1{color:#fff; font-size:clamp(2.25rem,4.6vw,3.25rem); line-height:1.1;
	letter-spacing:-.02em; margin-bottom:var(--s4); max-width:24ch}
.page-hero .eyebrow{color:#F2A0AC; margin-bottom:var(--s4)}
.page-hero .lede{color:rgba(255,255,255,.80); font-size:1.1875rem; line-height:1.55;
	max-width:58ch; margin-top:0}
.page-hero .wp-block-buttons{margin-top:var(--s6)}
.page-hero .wp-block-button__link{background:var(--red); color:#fff}

/* Promoted page H1 — sits where a section H2 used to, so it must look
   identical. Same size/weight/tracking as h2, plus a white variant for
   the navy band. */
.section-h1{font-size:clamp(1.75rem,3.3vw,2.625rem); line-height:1.1;
	letter-spacing:-.026em; color:var(--ink)}
.band .section-h1, .page-hero .section-h1{color:#fff}