/* ==========================================================================
   ITCM Site Kit — base stylesheet (shared by every page and theme)
   Mobile-first. See plan/07_design_direction.md for the design rationale.
   ========================================================================== */

:root {
  --navy:        #171E5E;
  --navy-deep:   #0E1440;
  --navy-light:  #2A3480;
  --water-blue:  #1FA3D8;
  --clean-cyan:  #5BD0F0;
  --action:      #C4440A; /* darkened from #FF6B1A — the brighter orange failed WCAG AA
                              contrast (2.85:1) for white button text against the 4.5:1
                              minimum. This shade keeps the same warm-orange brand hue at
                              5.03:1, passing AA for the primary CTA and every other place
                              --action is used as text on a white/light background. */
  --action-dark: #A83D0A; /* hover/pressed state, kept proportionally darker */
  --action-bright: #FF6B1A; /* original bright orange — kept for small decorative accents
                                (icons, borders, badges) where it's not used as text or a
                                button fill, so nothing needs AA contrast there */
  --white:       #FFFFFF;
  --off-white:   #F5F7FA;
  --grey-700:    #3A3A3A;
  --grey-400:    #8A93A6;
  --grey-200:    #E2E6ED;
  --success:     #2E9E5B;

  --font-heading: 'Montserrat', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, Segoe UI, sans-serif;

  /* ---- Site-wide theme tokens ----
     Every page reads these, and each of the 3 templates (assets/css/template-*.css,
     loaded on every page, scoped by body.theme-*) overrides them — that's what
     makes the three templates look like three different websites rather than
     three homepages. Defaults below = the "Business" look. */
  --bg:            var(--white);      /* page background */
  --surface:       var(--white);      /* cards, forms, panels */
  --surface-alt:   var(--off-white);  /* alternating sections, pills, table heads */
  --text:          var(--grey-700);
  --heading:       var(--navy);
  --muted:         var(--grey-400);
  --line:          var(--grey-200);   /* borders / dividers */
  --link:          #116C90; /* NOT var(--water-blue). The brand cyan #1FA3D8 is
                                only 2.88:1 on white, so link text set in it failed
                                WCAG AA (4.5:1 minimum) everywhere it appeared in a
                                paragraph. This deeper shade of the same hue is
                                5.88:1. The bright cyan is still used untouched for
                                decoration, where nothing has to be read off it. */
  --topbar-bg:     var(--navy-deep);
  --topbar-text:   #FFFFFF;
  --topbar-accent: var(--clean-cyan);
  --nav-bg:        var(--white);
  --nav-text:      var(--navy);
  --dark-bg:       var(--navy);       /* "final CTA" / dark bands */
  --dark-text:     #FFFFFF;
  --dark-muted:    #C7CCE6;
  --footer-bg:     var(--navy-deep);
  --footer-text:   #C7CCE6;
  --footer-heading:#FFFFFF;
  --footer-accent: var(--clean-cyan);
  --btn-primary-text: #FFFFFF;
  --action-tint:   #FFF4EC;           /* selected quote tile, hover fills */
  --sticky-call:   var(--navy);
  --sticky-text:   var(--navy-light);
  --heading-weight: 800;
  --heading-transform: none;
  --heading-tracking: normal;
  --btn-radius:    999px;

  --radius: 10px;
  --shadow: 0 4px 16px rgba(14, 20, 64, 0.10);
  --shadow-lg: 0 12px 32px rgba(14, 20, 64, 0.16);
  --max-width: 1200px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--heading);
  font-weight: var(--heading-weight);
  text-transform: var(--heading-transform);
  letter-spacing: var(--heading-tracking);
  line-height: 1.2;
  margin: 0 0 0.5em;
}
h1 { font-size: clamp(2rem, 5vw, 3rem); }
h2 { font-size: clamp(1.6rem, 4vw, 2.25rem); }
h3 { font-size: clamp(1.2rem, 3vw, 1.5rem); }
p { margin: 0 0 1em; max-width: 68ch; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }
ul { padding-left: 1.2em; }

.wrap { max-width: var(--max-width); margin: 0 auto; padding: 0 16px; }

.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--navy); color: #fff;
  padding: 10px 16px; z-index: 1000;
}
.skip-link:focus { left: 16px; top: 16px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-heading); font-weight: 700; font-size: 0.95rem;
  padding: 12px 22px; border-radius: var(--btn-radius); border: 2px solid transparent;
  cursor: pointer; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease;
  min-height: 44px;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-primary { background: var(--action); color: var(--btn-primary-text); }
.btn-primary:hover { background: var(--action-dark); box-shadow: var(--shadow); }
.btn-outline { background: transparent; border-color: var(--heading); color: var(--heading); }
.btn-outline:hover { background: var(--heading); color: var(--bg); }
.btn-lg { padding: 16px 30px; font-size: 1.05rem; }
.btn-white { background: #fff; color: var(--navy); }
.btn-white:hover { background: #fff; }

/* Small reassurance line under a hero's CTA buttons — inherits the
   surrounding text color at reduced opacity so it adapts to any theme. */
.hero-microcopy { margin: 12px 0 0; font-size: .88rem; font-weight: 600; opacity: .72; display: flex; align-items: center; gap: 6px; }
.hero-microcopy::before { content: "⚡"; font-size: .95em; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 100; background: var(--nav-bg); box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.topbar { background: var(--topbar-bg); color: var(--topbar-text); font-size: .8rem; }
.topbar-inner { display: flex; justify-content: space-between; align-items: center; padding: 6px 16px; gap: 12px; flex-wrap: wrap; }
.topbar-badge { color: var(--topbar-accent); font-weight: 600; }
.topbar-links a {
  position: relative; /* anchors the invisible touch-target extender below */
  color: var(--topbar-text); margin-left: 16px;
}
.topbar-links a:first-child { margin-left: 0; }
/* The topbar is deliberately thin, so instead of visually growing it to hit
   the 44px touch-target minimum, extend the tappable area invisibly beyond
   the visible text — same trick used natively by iOS/Android system UI. */
.topbar-links a::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: max(100%, 44px);
  height: 44px;
}

.navbar { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; gap: 16px; }
.brand img { width: 120px; height: auto; }
.main-nav { display: none; gap: 24px; font-family: var(--font-heading); font-weight: 600; }
.main-nav a { color: var(--nav-text); }
.nav-cta { display: flex; align-items: center; gap: 10px; }
.nav-cta .btn-primary { display: none; }
.nav-toggle { width: 44px; height: 44px; background: none; border: none; cursor: pointer; display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 0 10px; touch-action: manipulation; }
.nav-toggle span { display: block; height: 3px; background: var(--nav-text); border-radius: 2px; }

@media (min-width: 900px) {
  .main-nav { display: flex; align-items: center; }
  .nav-cta .btn-primary { display: inline-flex; }
  .nav-toggle { display: none; }
  .brand img { width: 140px; }
}

.main-nav.open {
  display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0;
  background: var(--nav-bg); padding: 16px; box-shadow: var(--shadow); gap: 4px;
}
.main-nav.open a { padding: 12px 8px; border-bottom: 1px solid var(--line); }

/* ---------- Breadcrumbs ---------- */
.breadcrumbs { padding: 10px 16px; font-size: .85rem; color: var(--muted); }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; }
.breadcrumbs li:not(:last-child)::after { content: '/'; margin-left: 6px; color: var(--muted); }

/* ---------- Sections / layout rhythm ---------- */
.section { padding: 56px 0; }
.section-alt { background: var(--surface-alt); }
.section-navy { background: var(--dark-bg); color: var(--dark-text); }
.section-navy h2, .section-navy h3 { color: var(--dark-text); }
.section-header { text-align: center; max-width: 680px; margin: 0 auto 36px; }
.section-header p { margin: 0 auto; }
.eyebrow { display: inline-block; font-family: var(--font-heading); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: .78rem; color: var(--action); margin-bottom: 8px; }

/* ---------- Trust bar ---------- */
.trust-bar { background: var(--surface-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.trust-bar-inner { display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: center; padding: 16px; font-family: var(--font-heading); font-weight: 700; font-size: .85rem; color: var(--heading); text-align: center; }
.trust-bar-promise { display: flex; flex-wrap: wrap; gap: 8px 32px; justify-content: center; background: var(--action); padding: 10px 16px; font-family: var(--font-heading); font-weight: 700; font-size: .85rem; color: var(--btn-primary-text); text-align: center; }

/* ---------- Cards ---------- */
.card-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 640px) { .card-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .card-grid-3 { grid-template-columns: repeat(3, 1fr); } .card-grid-4 { grid-template-columns: repeat(4, 1fr); } }



.service-card {
  background: var(--surface); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
  display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease;
}
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.service-card img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.service-card-body { padding: 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.service-card-price { font-family: var(--font-heading); font-weight: 800; color: var(--action); font-size: 1.05rem; }
.service-card h3 { margin-bottom: 4px; font-size: 1.15rem; }
.service-card-body .btn { margin-top: auto; align-self: flex-start; }

/* ---------- Before/After slider ---------- */
.ba-slider {
  position: relative; overflow: hidden; border-radius: var(--radius); aspect-ratio: 4/3;
  box-shadow: var(--shadow); background: var(--line); user-select: none; -webkit-user-select: none;
  /* Vertical finger movement scrolls the page; only a sideways drag moves the
     slider (see main.js). touch-action:none used to trap the page scroll. */
  touch-action: pan-y;
}
.ba-slider img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba-slider .ba-after { clip-path: inset(0 0 0 50%); }
.ba-slider .ba-divider {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 4px; background: #fff;
  box-shadow: 0 0 0 2px rgba(0,0,0,.15); transform: translateX(-2px); cursor: ew-resize;
}
.ba-slider .ba-handle {
  position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; border-radius: 50%;
  background: var(--action); color: #fff; display: flex; align-items: center; justify-content: center;
  transform: translate(-50%, -50%); box-shadow: var(--shadow); font-size: 1.2rem; font-weight: 800;
}
.ba-slider .ba-label { position: absolute; top: 10px; padding: 4px 10px; font-size: .72rem; font-weight: 800; border-radius: 999px; background: rgba(14,20,64,.75); color: #fff; letter-spacing: .04em; text-transform: uppercase; }
.ba-slider .ba-label-before { left: 10px; }
.ba-slider .ba-label-after { right: 10px; }
.ba-figure { margin: 0; } /* reset the browser's default <figure> margin (was shrinking every slider) */
.ba-caption { margin-top: 10px; font-size: .9rem; color: var(--muted); text-align: center; }
.service-card-media .ba-figure, .service-card-media .ba-slider { border-radius: 0; box-shadow: none; }
.service-card-media-soon {
  aspect-ratio: 4/3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%); color: rgba(255,255,255,.55);
}
.service-card-media-soon svg { width: 40px; height: 40px; opacity: .8; }
.service-card-media-soon span { font-family: var(--font-heading); font-weight: 700; font-size: .78rem; letter-spacing: .03em; text-transform: uppercase; color: rgba(255,255,255,.65); }
.ba-static { display: flex; gap: 4px; }
.ba-static img { width: 50%; aspect-ratio: 1/1; object-fit: cover; }

/* ---------- Gallery grid (standalone photos, non-slider) ---------- */
.gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (min-width: 700px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .gallery-grid { grid-template-columns: repeat(4, 1fr); } }
.gallery-grid img { border-radius: var(--radius); aspect-ratio: 1/1; object-fit: cover; box-shadow: var(--shadow); }
.gallery-filters { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 28px; }
.gallery-filters button { font-family: var(--font-heading); font-weight: 700; font-size: .82rem; padding: 8px 16px; border-radius: 999px; border: 2px solid var(--line); background: var(--surface); color: var(--heading); cursor: pointer; }
.gallery-filters button.active { background: var(--heading); color: var(--bg); border-color: var(--heading); }

/* ---------- Reviews ---------- */
.review-card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.review-stars { color: var(--action); letter-spacing: 2px; }
.review-name { font-family: var(--font-heading); font-weight: 700; color: var(--heading); }

/* ---------- FAQ accordion ---------- */
.faq-item { border-bottom: 1px solid var(--line); }
.faq-question { width: 100%; text-align: left; background: none; border: none; padding: 18px 0; font-family: var(--font-heading); font-weight: 700; font-size: 1.02rem; color: var(--heading); cursor: pointer; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.faq-question::after { content: '+'; font-size: 1.4rem; color: var(--action); flex-shrink: 0; }
.faq-item.open .faq-question::after { content: '−'; }
.faq-answer { display: none; padding: 0 0 18px; color: var(--text); }
.faq-item.open .faq-answer { display: block; }

/* ---------- Forms ---------- */
.form-field { margin-bottom: 16px; }
.form-field label { display: block; font-weight: 700; font-family: var(--font-heading); margin-bottom: 6px; font-size: .9rem; color: var(--heading); }
.form-field input, .form-field select, .form-field textarea {
  width: 100%; padding: 12px 14px; border: 2px solid var(--line); border-radius: 8px;
  font-family: var(--font-body); font-size: 1rem; background: var(--surface); color: var(--text);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: 2px solid var(--link); border-color: var(--link); }
.form-grid { display: grid; gap: 0 16px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .form-grid-2 { grid-template-columns: 1fr 1fr; } }
.honeypot { position: absolute; left: -9999px; opacity: 0; }
.form-success { background: #EAF7EF; border: 2px solid var(--success); color: #1D6B3E; padding: 18px; border-radius: var(--radius); }
.form-error { background: #FDECEC; border: 2px solid #D9534F; color: #A0362F; padding: 18px; border-radius: var(--radius); margin-bottom: 16px; }

/* ---------- Customer access gate ---------- */
.gate-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--navy) linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%); }
.gate-card { background: #fff; border-radius: 16px; box-shadow: var(--shadow-lg); padding: 40px 32px; max-width: 400px; width: 100%; text-align: center; }
.gate-logo { margin: 0 auto 18px; display: block; }
.gate-card h1 { font-size: 1.4rem; margin: 0 0 8px; color: var(--navy); }
.gate-sub { color: var(--grey-700); margin: 0 0 24px; font-size: .95rem; }
.gate-form { text-align: left; }
.gate-submit { width: 100%; justify-content: center; margin-top: 4px; }
.gate-help { margin: 22px 0 0; font-size: .85rem; color: var(--grey-400); }
.gate-help a { color: var(--water-blue); font-weight: 700; }

/* ---------- Quote calculator ---------- */
.quote-widget { background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-lg); padding: 24px; }
.quote-step { display: none; }
.quote-step.active { display: block; }
.quote-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 640px) { .quote-tiles { grid-template-columns: repeat(4, 1fr); } }
.quote-tile {
  border: 2px solid var(--line); border-radius: var(--radius); padding: 16px 10px; text-align: center;
  cursor: pointer; background: var(--surface); font-family: var(--font-heading); font-weight: 700; font-size: .88rem; color: var(--heading);
}
.quote-tile:hover, .quote-tile.selected { border-color: var(--action); background: var(--action-tint); }
.quote-progress { display: flex; gap: 6px; margin-bottom: 20px; }
.quote-progress span { flex: 1; height: 4px; border-radius: 2px; background: var(--line); }
.quote-progress span.active { background: var(--action); }
.quote-result { text-align: center; padding: 24px 0; }
.quote-result .amount { font-family: var(--font-heading); font-size: 2.4rem; font-weight: 800; color: var(--action); }
.quote-back { background: none; border: none; color: var(--muted); cursor: pointer; font-weight: 700; margin-bottom: 12px; }

/* ---------- Final CTA ---------- */
.final-cta { background: var(--dark-bg); color: var(--dark-text); text-align: center; padding: 48px 0; }
.final-cta h2 { color: var(--dark-text); }
.final-cta p { margin: 0 auto 24px; color: var(--dark-muted); }
.cta-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.final-cta .btn-outline { border-color: var(--dark-text); color: var(--dark-text); }
.final-cta .btn-outline:hover { background: var(--dark-text); color: var(--dark-bg); }

/* ---------- Footer ---------- */
.site-footer { background: var(--footer-bg); color: var(--footer-text); padding: 48px 0 0; }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 800px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }
.footer-col h3 { color: var(--footer-heading); font-size: 1rem; margin-bottom: 14px; }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.footer-col a { color: var(--footer-text); }
.footer-col a:hover { color: var(--footer-heading); }
.footer-about img { margin-bottom: 12px; }
.footer-rating { color: var(--footer-accent); font-weight: 700; }
.footer-social { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 10px; }
/* Without nowrap a long label like "Read Our Google Reviews" is squeezed to the
   width of its longest word and wraps to four lines, which stretches every other
   link in the row to match and adds ~70px of dead height to the footer. */
.footer-social a { white-space: nowrap; }
/* Three children, so space-between gave equal GAPS but left the middle item
   111px right of the row's centre — it read as misaligned. A 1fr/auto/1fr grid
   centres the middle item on the row instead, whatever the outer two weigh. */
.footer-bottom { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px 24px; padding: 24px 16px; margin-top: 32px; border-top: 1px solid rgba(255,255,255,.12); font-size: .82rem; }
.footer-bottom > :first-child { justify-self: start; }
.footer-bottom > :nth-child(2) { justify-self: center; text-align: center; }
.footer-bottom > :last-child  { justify-self: end; text-align: right; }
@media (max-width: 760px) {
  /* Each child is listed by the SAME selector shape used above, because a media
     query adds no specificity: `.footer-bottom > *` (0,1,0) loses to
     `.footer-bottom > :last-child` (0,2,0), which left "Website by ITCM"
     right-aligned on phones while the other two centred. */
  .footer-bottom { grid-template-columns: 1fr; gap: 10px; text-align: center; }
  .footer-bottom > :first-child,
  .footer-bottom > :nth-child(2),
  .footer-bottom > :last-child { justify-self: center; text-align: center; }
}
.footer-bottom a { color: var(--footer-text); }

/* ---------- Mobile sticky bar ---------- */
.mobile-sticky-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 200; display: flex; box-shadow: 0 -4px 16px rgba(0,0,0,.12); }
.sticky-btn { flex: 1; text-align: center; padding: 14px 6px; font-family: var(--font-heading); font-weight: 700; color: var(--dark-text); font-size: .88rem; }
.sticky-call { background: var(--sticky-call); }
.sticky-text { background: var(--sticky-text); }
.sticky-quote { background: var(--action); }
body { padding-bottom: 58px; }
@media (min-width: 900px) { .mobile-sticky-bar { display: none; } body { padding-bottom: 0; } }

/* ---------- Utility ---------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.badge-list { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; }
.badge-list li { background: var(--surface-alt); border-radius: 999px; padding: 6px 14px; font-size: .82rem; font-weight: 700; color: var(--heading); }
.two-col { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; }
@media (min-width: 900px) { .two-col { grid-template-columns: 1fr 1fr; } }
.price-table { width: 100%; border-collapse: collapse; margin: 20px 0; }
.price-table th, .price-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.price-table th { font-family: var(--font-heading); color: var(--heading); background: var(--surface-alt); }
.price-table td:last-child, .price-table th:last-child { text-align: right; font-weight: 700; color: var(--action); }

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

/* ---- Google review CTA + agency credit line (theme-tokenised, works on all 3) ---- */
.greview-cta {
  border: 1px solid var(--line); border-radius: 12px; background: var(--action-tint);
  padding: 20px; margin-top: 20px; text-align: center;
}
.greview-lead { margin: 0 0 14px; color: var(--text); font-size: .95rem; line-height: 1.6; }
.greview-btn { display: inline-flex; align-items: center; gap: 8px; }
.greview-band {
  border: 0; border-radius: 0; margin-top: 0; padding: 40px 16px;
  background: var(--surface-alt);
}
.greview-band .greview-lead { font-size: 1.05rem; max-width: 620px; margin-inline: auto; margin-bottom: 18px; }
.footer-credit { opacity: .85; }
.footer-credit a { text-decoration: underline; }
.greview-alt { margin: 12px 0 0; font-size: .88rem; }
.greview-alt a { color: var(--link); text-decoration: underline; }

/* ---------- Payment methods ------------------------------------------------
   One block, used in the site-wide CTA band and on the quote page. It sets no
   text colour of its own: in the navy CTA band it inherits --dark-text, on the
   quote page it inherits --text, so the same markup reads correctly in all
   three templates without a single per-theme override. The marks carry their
   own backgrounds, which is what makes that possible.
   -------------------------------------------------------------------------- */
.payments-block { margin-top: 28px; }
.final-cta .payments-block { padding-top: 22px; border-top: 1px solid rgba(255,255,255,.14); }
.payments-heading { font-weight: 600; font-size: .95rem; margin: 0 0 12px; opacity: .95; }
.payments-marks { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; justify-content: inherit; }
.payments-marks img { display: block; width: 52px; height: 33px; border-radius: 4px; }
.payments-note { font-size: .86rem; line-height: 1.6; margin: 14px 0 0; opacity: .82; max-width: 68ch; }
.final-cta .payments-block { text-align: center; }
.final-cta .payments-marks { justify-content: center; }
.final-cta .payments-note { margin-left: auto; margin-right: auto; }
.payments-section .payments-block { margin-top: 0; }
@media (max-width: 560px) {
  .payments-marks img { width: 44px; height: 28px; }
  .payments-marks { gap: 6px; }
}

/* --------------------------------------------------------------------------
   Lead protection (Oct 2026): email code step, optional labels.
   -------------------------------------------------------------------------- */
.label-optional { font-weight: 400; color: var(--muted); font-size: .82rem; }
.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; }
.inline-form { display: inline; margin: 0; }
.link-btn { background: none; border: 0; padding: 0; color: var(--link); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.link-btn:disabled { color: var(--muted); cursor: default; text-decoration: none; }
.otp-box { text-align: center; padding: 8px 0 4px; }
.otp-box h2 { margin-bottom: 8px; }
.otp-box form { max-width: 340px; margin: 18px auto 10px; }
.otp-input {
  display: block; width: 100%; text-align: center; font-family: var(--font-heading); font-size: 2rem; font-weight: 800;
  letter-spacing: .5em; padding: 12px 0 12px .5em; border: 2px solid var(--line); border-radius: 12px; margin-bottom: 12px;
  background: var(--surface); color: var(--heading);
}
.otp-input:focus { outline: 3px solid var(--link); border-color: var(--link); }
.otp-box .btn { width: 100%; }
.otp-help { font-size: .9rem; color: var(--muted); margin: 8px 0 0; }
.otp-box-page { text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.otp-box-page form { margin-left: 0; }

/* --------------------------------------------------------------------------
   "Get the App" (installable website) — Oct 2026. Works in all 3 templates.
   -------------------------------------------------------------------------- */
.pwa-get-app[hidden], .pwa-band[hidden] { display: none !important; }
.pwa-get-app {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px;
  border: 1.5px solid currentColor; background: transparent; color: inherit; cursor: pointer;
  font-family: var(--font-heading); font-weight: 700; font-size: .8rem; line-height: 1; white-space: nowrap;
}
.pwa-get-app:hover { background: rgba(127,127,127,.12); }
.header-bold .pwa-get-app { color: #fff; }
.header-classic .pwa-get-app { color: #fff; }
.header-business .pwa-get-app { color: var(--navy); }
@media (min-width: 900px) { .pwa-get-app { display: none !important; } }

.pwa-band { background: var(--surface-alt); border-top: 1px solid var(--line); padding: 18px 0; }
.pwa-band-inner { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pwa-band-icon { border-radius: 14px; box-shadow: var(--shadow); flex: 0 0 auto; }
.pwa-band-text { flex: 1 1 220px; display: flex; flex-direction: column; gap: 2px; color: var(--text); }
.pwa-band-text strong { font-family: var(--font-heading); color: var(--heading); font-size: 1.05rem; }
.pwa-band-text span { font-size: .9rem; color: var(--muted); }
.pwa-band-btn { flex: 0 0 auto; }
.pwa-band-later { background: none; border: 0; color: var(--muted); text-decoration: underline; cursor: pointer; font: inherit; font-size: .85rem; }
@media (max-width: 560px) { .pwa-band-btn { flex: 1 1 auto; } }

.pwa-sheet-wrap { position: fixed; inset: 0; z-index: 1000; background: rgba(8,12,30,.55); display: flex; align-items: flex-end; justify-content: center; animation: pwaFade .2s ease; }
@keyframes pwaFade { from { opacity: 0; } to { opacity: 1; } }
.pwa-sheet {
  position: relative; width: 100%; max-width: 460px; background: #fff; color: #1d2433; border-radius: 20px 20px 0 0;
  padding: 26px 22px calc(26px + env(safe-area-inset-bottom)); text-align: center; animation: pwaUp .25s ease;
}
@keyframes pwaUp { from { transform: translateY(40px); } to { transform: none; } }
.pwa-sheet img { border-radius: 14px; box-shadow: 0 4px 16px rgba(0,0,0,.15); }
.pwa-sheet h3 { margin: 12px 0 14px; font-family: var(--font-heading); color: #171E5E; font-size: 1.2rem; }
.pwa-sheet-close { position: absolute; top: 10px; right: 12px; width: 36px; height: 36px; border: 0; background: #F1F3F8; border-radius: 50%; font-size: 1.4rem; line-height: 1; cursor: pointer; color: #1d2433; }
.pwa-steps { list-style: none; margin: 0; padding: 0; text-align: left; counter-reset: s; }
.pwa-steps li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid #E8EBF2; font-size: .98rem; line-height: 1.4; }
.pwa-step-icon { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px; background: #EEF3FF; color: #1a73e8; display: flex; align-items: center; justify-content: center; }
.pwa-sheet-note { margin: 12px 0 0; color: #5d6678; font-size: .86rem; }
.pwa-arrow { font-size: 1.8rem; color: #1a73e8; margin-top: 6px; animation: pwaBounce 1.2s ease-in-out infinite; }
@keyframes pwaBounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* Keep the phone bar clear of the iPhone home indicator, and — when running as
   the installed app — keep the page clear of the notch / status bar. */
.mobile-sticky-bar { padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--navy-deep, #0E1440); }
@media (max-width: 899px) { body { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); } }
@media (display-mode: standalone) { body { padding-top: env(safe-area-inset-top, 0px); } }
.is-app body { padding-top: env(safe-area-inset-top, 0px); }