/* 970 Tech Solutions — v3 — real light + dark mode, 2026-08-14.
   Token values match the same contrast-verified palette already proven out on the internal Rivet
   product this quarter (independently re-measured here with the real WCAG relative-luminance
   formula for THIS site's own background/surface pairs, not copied blind -- light mode is a direct
   match; dark mode needed one adjustment, --accent-accessible, since the shared --accent value
   fails as text on this site's own dark backgrounds even though it's fine as a button fill -- see
   below). No "Rivet" naming or product identity appears anywhere on this customer-facing site --
   only the color values are shared, for one consistent 970 Tech Solutions brand.

   Fully automatic: follows the visitor's OS preference (prefers-color-scheme) only. No manual
   toggle -- one less control, one less thing to explain, and it matches how every other app on
   the visitor's device already behaves. */
:root{
  color-scheme: light;
  --bg:#F7F8FA;
  --surface:#FFFFFF;
  --surface-2:#F5F5F5;
  --border:#E2E6EA;                 /* decorative dividers only -- not a UI boundary */
  --border-input:#7C8794;           /* form-control boundary: 3.44:1 on --bg, 3.65:1 on --surface (WCAG 1.4.11) */
  --accent:#1972C2;                 /* text AND fill: 4.67:1 on --bg, 4.97:1 on --surface as text; 4.97:1 white-on-fill */
  --accent-strong:#145E9E;          /* hover/pressed fill: 6.72:1 white-on-fill */
  --accent-accessible:#1972C2;      /* == --accent in light mode (already clears 4.5:1 as text) */
  --text:#151A21;
  --muted:#495361;                  /* 7.34:1 on --bg, 7.80:1 on --surface */
  --muted-subtle:#66717E;           /* 4.67:1 on --bg, 4.97:1 on --surface */
  --success:#168253;                /* 4.58:1 on --success-bg */
  --success-bg:#ECFDF3;
  --warning:#9E5A05;                /* 5.03:1 on --warning-bg */
  --warning-bg:#FFF7E6;
  --danger:#C73939;                 /* 4.85:1 on --bg, 5.16:1 on --surface, 4.66:1 on --danger-bg */
  --danger-bg:#FFF0F0;
  --danger-accessible:#C73939;      /* == --danger in light mode (already clears 4.5:1 as text) */
  --accent-muted:#EEF7FE;           /* low-opacity-tint replacement -- a real solid color per mode, not rgba(), so it never looks muddy on dark */
  --header-bg:rgba(255,255,255,.85);
  --font: 'Inter', -apple-system, 'SF Pro Display', BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --max: 1120px;
}

/* Dark mode: applies purely from the visitor's OS-level preference. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg:#151A21;
    --surface:#222831;
    --surface-2:#2A313B;
    --border:#343C47;
    --border-input:#6B7684;         /* 3.79:1 on --bg, 3.21:1 on --surface (WCAG 1.4.11) */
    --accent:#1972C2;                /* fill only in dark mode -- see --accent-accessible below for text */
    --accent-strong:#145E9E;
    /* The shared --accent value (#1972C2) measures only 3.52:1 on dark --bg and 2.99:1 on dark
       --surface as TEXT -- below the 4.5:1 minimum, even though it's fine as a button fill (fill
       contrast is fill-vs-text-color only, independent of page background). Every accent-colored
       TEXT use (inline links, eyebrow labels, focus rings) must use --accent-accessible instead --
       the site's own prior single-dark-theme accent value (#4A9EE8, 6.11:1/5.19:1), kept for
       continuity with the site's established identity rather than introducing a new blue. */
    --accent-accessible:#4A9EE8;
    --text:#F7F8FA;
    --muted:#B8C0CC;                 /* 9.53:1 on --bg, 8.09:1 on --surface */
    --muted-subtle:#8B95A1;          /* 5.75:1 on --bg, 4.88:1 on --surface */
    --success:#34D399;               /* 7.98:1 on --success-bg */
    --success-bg:#16291D;
    --warning:#FBBF24;               /* 9.61:1 on --warning-bg */
    --warning-bg:#2A2008;
    --danger:#F87171;                /* 6.32:1 on --bg, 5.36:1 on --surface, 6.24:1 on --danger-bg */
    --danger-bg:#2A1515;
    --danger-accessible:#F87171;     /* == --danger in dark mode (already clears 4.5:1 as text) */
    --accent-muted:#16222D;
    --header-bg:rgba(21,26,33,.85);
  }
}

*,*::before,*::after{box-sizing:border-box;}
:root{
  /* Real height, measured and kept current by initHeaderHeightVar() in
     main.js (95px desktop / 65px tablet+mobile, but not tied to a clean
     breakpoint -- driven by content, so it's measured rather than
     hardcoded). The static fallback here only matters before JS runs or
     if JS fails; it's the larger (desktop) measured value so the offset
     is never too small. */
  --header-height:95px;
}
html{scroll-behavior:smooth;
  /* Prevents a site-wide horizontal-scroll bug: the closed mobile nav panel
     (position:fixed, translateX(100%)) is measured by the browser as part of
     document scrollable overflow even though it's visually off-screen. This
     clips that phantom overflow without affecting any visible layout. */
  overflow-x:hidden;
  /* Accessibility fix (2026-07-12, accessScan finding #1, score 0):
     the sticky .site-header sat on top of the document's normal scroll
     flow with no offset, so both keyboard-focus auto-scroll and in-page
     anchor jumps could land a focused/target element directly underneath
     the header, hidden from view. scroll-padding-top reserves that space
     for both cases. */
  scroll-padding-top:calc(var(--header-height) + 16px);
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
/* Locks background scroll on iOS while the mobile nav panel is open —
   overflow:hidden alone doesn't reliably stop touch-scroll on iOS Safari,
   so we also pin body position and restore the scroll offset on close. */
body.nav-open{position:fixed;width:100%;overflow:hidden;}

/* Accessibility utility (2026-07-12): visually hides content while keeping
   it in the accessibility tree — standard "sr-only" pattern (not display:none
   or visibility:hidden, both of which also hide from assistive tech). Used
   for the newsletter form's programmatic label (kept off-screen since the
   compact inline design has no room for a visible one; the placeholder
   remains as a supplementary visual hint, not the sole label). */
.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;
}

/* Skip link (2026-07-12, WCAG 2.4.1 Bypass Blocks — confirmed missing
   sitewide). First focusable element in the DOM on every page. Uses the
   same off-screen technique as .sr-only while hidden, but z-index:600 (above
   .site-header's 500 and the mobile nav panel's 500) plus an explicit
   top:0/left:0 position on :focus so it's never the thing hidden behind the
   sticky header -- it sits on top of it instead. --accent-strong/white is
   the same combination already verified ~4.55:1 for .btn-primary. */
.skip-link{
  position:absolute;top:-100px;left:0;z-index:600;
  background:var(--accent-strong);color:#fff;
  padding:14px 24px;font-weight:600;font-size:.95rem;
  border-radius:0 0 8px 0;
  transition:top .15s ease;
}
.skip-link:focus{
  top:0;
  outline:3px solid #fff;outline-offset:-3px;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
/* WCAG 1.4.1 (Use of Color), widened 2026-08-14 per Dylan's direct instruction ("all links need
   to be underlined"): every text link on the site is now underlined by default, not just the
   inline-prose subset the first pass covered. `:not(.btn)` still excludes anything already
   styled as a button (a filled/bordered CTA is already visually distinct from plain text by
   shape alone, so a corner-cutting page's own separate rule doesn't need an underline). The
   `.nav-logo`/`.footer-social a`/`.footer-logo` exclusions are image-only link wrappers -- an
   underline under a logo or icon has nothing to underline text-wise and would just draw a stray
   line under a picture. */
a:not(.btn):not(.nav-logo):not(.footer-logo):not(.footer-social a){text-decoration:underline;text-underline-offset:2px;}
a:not(.btn):not(.nav-logo):not(.footer-logo):not(.footer-social a):hover{text-decoration-thickness:2px;}
ul{list-style:none;margin:0;padding:0;}
h1,h2,h3,h4{font-family:var(--font);font-weight:700;line-height:1.15;margin:0 0 .5em;}
p{margin:0 0 1em;color:var(--muted);}

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

/* ---------- Header / Nav ---------- */
.site-header{
  position:sticky;top:0;z-index:500;
  /* z-index must stay above any other fixed-position UI (e.g. the
     cookie-consent bar, z-index:400) or the open nav panel renders/receives
     touches behind it on iOS Safari.
     #17: the blur deliberately lives on ::before, NOT here. A non-none
     backdrop-filter makes an element a containing block for position:fixed
     descendants -- which trapped .nav-menu against the header box instead of
     the viewport. Keeping it on a pseudo-element preserves the look without
     the containing-block side effect. */
  background:var(--header-bg);
  border-bottom:1px solid var(--border);
  padding-top:env(safe-area-inset-top,0px);
}
.site-header::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
/* #17: while the panel is open the body is pinned (position:fixed, offset by
   -scrollY), which leaves a sticky header with no scroll range -- it fell back
   to its flow position and went off-screen by exactly the scroll distance,
   taking the close button with it. Pin the header to the viewport for the
   duration instead. */
body.nav-open .site-header{position:fixed;top:0;left:0;right:0;}
.nav{
  max-width:var(--max);margin:0 auto;padding:14px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.nav-logo{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.nav-logo img{height:36px;width:auto;}
.nav-toggle{
  /* #1: hidden AND unfocusable at desktop widths -- display:none removes it
     from the tab order entirely. Re-shown only inside the 860px query. */
  display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px;z-index:200;
}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--text);border-radius:2px;transition:transform .2s ease, opacity .2s ease;}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.nav-menu{display:flex;align-items:center;gap:28px;}
.nav-link{
  font-size:.95rem;color:var(--muted);padding:6px 0;border-bottom:2px solid transparent;transition:color .2s ease, border-color .2s ease;
}
.nav-link:hover, .nav-link.active{color:var(--text);}
.nav-link.active{border-bottom-color:var(--accent);color:var(--text);font-weight:600;}

.btn{
  display:inline-block;padding:12px 26px;border-radius:8px;font-weight:600;font-size:.95rem;
  border:1px solid transparent;cursor:pointer;transition:all .2s ease;text-align:center;
}
.btn-primary{background:var(--accent-strong);color:#fff;}
.btn-primary:hover{filter:brightness(.88);}
.btn-ghost{background:transparent;border:1px solid var(--accent);color:var(--accent-accessible);}
.btn-ghost:hover{background:var(--accent-strong);color:#fff;border-color:var(--accent-strong);}
.nav-cta{margin-left:8px;}
.nav .btn{padding:9px 20px;font-size:.9rem;}

@media (max-width:860px){
  .nav-toggle{display:flex;}
  .nav-menu{
    /* #17: top + bottom + height was over-constrained. top + height is the
       unambiguous form; 100dvh tracks iOS Safari's collapsing toolbar, with
       100vh as the fallback for engines without dvh. */
    position:fixed;top:0;right:0;
    height:100vh;height:100dvh;
    width:min(78vw,320px);overflow-y:auto;-webkit-overflow-scrolling:touch;
    background:var(--bg);border-left:1px solid var(--border);
    flex-direction:column;align-items:flex-start;justify-content:flex-start;
    padding:calc(96px + env(safe-area-inset-top,0px)) calc(32px + env(safe-area-inset-right,0px)) calc(32px + env(safe-area-inset-bottom,0px)) 32px;
    gap:20px;
    transform:translateX(100%);transition:transform .3s ease;
  }
  .nav-menu.open{transform:translateX(0);}
  .nav-cta{margin-left:0;margin-top:12px;}
}

/* ---------- Hero ---------- */
.hero{padding:96px 0 64px;}
.hero .container{max-width:820px;text-align:left;}
.eyebrow{
  display:inline-block;color:var(--accent);font-weight:600;font-size:.85rem;
  letter-spacing:.06em;text-transform:uppercase;margin-bottom:16px;
}
.hero h1{font-size:clamp(2.2rem,5vw,3.4rem);margin-bottom:20px;}
.hero .lead{font-size:1.15rem;max-width:640px;}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:32px;}
.hero-logo{height:64px;width:auto;margin-bottom:28px;}

.hero-center{text-align:center;}
.hero-center .container{max-width:760px;margin:0 auto;text-align:center;}
.hero-center .hero-actions{justify-content:center;}
.hero-center .hero-logo{margin-left:auto;margin-right:auto;}

section{padding:72px 0;}
.section-tight{padding:48px 0;}
.section-head{max-width:640px;margin-bottom:48px;}
.section-head h2{font-size:clamp(1.6rem,3.6vw,2.2rem);}

/* ---------- Split ---------- */
.split{display:grid;grid-template-columns:1fr;gap:32px;}
@media (min-width:760px){ .split{grid-template-columns:1fr 1fr;gap:48px;} }
.split-col{border:1px solid var(--border);border-radius:14px;padding:36px;background:var(--surface);}
.split-col h3{font-size:1.4rem;margin-bottom:20px;}
/* Same visual size as .split-col h3 above, used where the split-col heading
   is the page's top-level content division (nothing between it and the H1)
   rather than nested under a section H2 -- see index.html/contact.html. */
.split-col h2{font-size:1.4rem;margin-bottom:20px;}
.split-col ul{display:flex;flex-direction:column;gap:12px;}
.split-col li{display:flex;align-items:baseline;gap:10px;color:var(--text);}
.split-col li::before{content:"—";color:var(--accent);flex-shrink:0;}

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

.card{
  border:1px solid var(--border);border-radius:14px;padding:28px;background:var(--surface);
  transition:border-color .2s ease;
}
.card:hover{border-color:var(--accent);}
.card h3{font-size:1.15rem;margin-bottom:10px;}
/* Same visual size as .card h3 above, used on services.html where the
   device-type cards are the page's top-level content division (nothing
   between them and the H1), unlike business-it.html/web-dev.html's cards
   which sit correctly nested under a section H2. */
.card h2{font-size:1.15rem;margin-bottom:10px;}
.card ul{margin:14px 0 18px;display:flex;flex-direction:column;gap:6px;}
.card li{color:var(--muted);font-size:.92rem;}
.card li::before{content:"• ";color:var(--accent);}
.card .btn{width:100%;}

/* ---------- Stats / numbered steps ---------- */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
@media (min-width:640px){ .stats{grid-template-columns:repeat(4,1fr);} }
.stat-num{font-size:clamp(2rem,5vw,3rem);font-weight:800;color:var(--accent);line-height:1;margin-bottom:8px;}
.stat-label{color:var(--muted);font-size:.9rem;}

.steps{display:grid;grid-template-columns:1fr;gap:28px;}
@media (min-width:760px){ .steps-3{grid-template-columns:repeat(3,1fr);} .steps-4{grid-template-columns:repeat(4,1fr);} }
.step-num{
  width:40px;height:40px;border-radius:50%;border:1px solid var(--accent);color:var(--accent);
  display:flex;align-items:center;justify-content:center;font-weight:700;margin-bottom:16px;
}
.step h3{font-size:1.05rem;margin-bottom:6px;}

.steps-list{display:flex;flex-direction:column;gap:0;}
.steps-list li{
  display:flex;gap:20px;padding:24px 0;border-bottom:1px solid var(--border);
}
.steps-list li:last-child{border-bottom:none;}
.steps-list .step-num{flex-shrink:0;margin-bottom:0;}
.steps-list .step-body h4{margin-bottom:6px;}

/* ---------- Cities ---------- */
.cities{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
@media (min-width:640px){ .cities{grid-template-columns:repeat(4,1fr);} }
.city{
  border:1px solid var(--border);border-radius:10px;padding:18px;text-align:center;font-weight:600;background:var(--surface);
}
/* WCAG 1.4.3 fix, 2026-08-14: --accent text on --surface (this element's own background)
   computes to ~4.23:1, below the 4.5:1 AA minimum for normal text -- the site's prior remediation
   only verified --accent against --bg (4.82:1, see the --accent-strong comment above), never
   against --surface, where this element actually renders. --accent-accessible is already
   independently verified at 4.75:1 on --surface (see its own comment above) -- same blue family,
   same visual intent. Border unchanged (border color has a lower, 3:1 non-text bar it already
   clears). */
.city.nationwide{border-color:var(--accent);color:var(--accent-accessible);}

/* ---------- CTA band ---------- */
.cta-band{
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  text-align:center;background:var(--surface);
}
.cta-band h2{font-size:clamp(1.6rem,4vw,2.4rem);margin-bottom:16px;}
.cta-band .hero-actions{justify-content:center;}

/* ---------- FAQ Accordion ---------- */
.faq-item{border-bottom:1px solid var(--border);}
.faq-question{
  width:100%;text-align:left;background:none;border:none;color:var(--text);
  font-family:var(--font);font-size:1.02rem;font-weight:600;
  padding:20px 0;display:flex;justify-content:space-between;align-items:center;cursor:pointer;gap:16px;
}
.faq-chevron{transition:transform .25s ease;flex-shrink:0;color:var(--accent);}
.faq-item.open .faq-chevron{transform:rotate(180deg);}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.faq-answer-inner{padding-bottom:20px;color:var(--muted);}

/* ---------- Forms ---------- */
.form-group{margin-bottom:20px;}
label{display:block;font-weight:600;margin-bottom:8px;font-size:.92rem;}
/* #11: group headings for a radiogroup / third-party widget. A <label> with no
   associated control is announced by nothing, so these are plain elements that
   inherit the label look and are wired up with aria-labelledby where needed. */
.group-label{display:block;font-weight:600;margin-bottom:8px;font-size:.92rem;}
input[type=text],input[type=email],input[type=tel],input[type=password],select,textarea{
  width:100%;padding:13px 14px;border-radius:8px;border:1px solid var(--border-input);
  background:var(--surface);color:var(--text);font-family:var(--font);font-size:.95rem;
}
/* #8: a real focus ring. The previous rule set outline:none and relied on a 1px
   border-colour change, which is not a sufficient focus indicator. */
input:focus-visible,select:focus-visible,textarea:focus-visible,
button:focus-visible,a:focus-visible,summary:focus-visible{
  outline:2px solid var(--accent-accessible);outline-offset:2px;border-radius:4px;
}
input:focus,select:focus,textarea:focus{border-color:var(--accent-accessible);}
textarea{resize:vertical;min-height:120px;}
.checkbox-row{display:flex;align-items:flex-start;gap:10px;}
.checkbox-row input{width:auto;margin-top:4px;}
.checkbox-row label{margin:0;font-weight:400;color:var(--muted);}
.form-note{font-size:.85rem;color:var(--muted);margin-top:6px;}
/* ---------- SMS consent callout (mail-in intake, real opt-in) ---------- */
.consent-box{
  border:1px solid var(--border-input);border-radius:10px;padding:16px 18px;
  background:var(--surface-2);margin-top:14px;
}
.consent-box .checkbox-row{gap:12px;}
.consent-box .checkbox-row label{font-size:.9rem;color:var(--text);line-height:1.5;}
.consent-box .checkbox-row input{margin-top:3px;width:17px;height:17px;accent-color:var(--accent);}
#form-status{margin-top:16px;font-weight:600;}
#form-status.success{color:var(--success);}
/* WCAG 1.4.3 fix, 2026-08-14: this instance renders inside contact.html's .split-col
   (background:var(--surface)), where plain #f87171 only measures 4.37:1 -- below AA. */
#form-status.error{color:var(--danger-accessible);}

.embed-placeholder{
  border:2px dashed var(--border);border-radius:14px;padding:48px 24px;text-align:center;color:var(--muted);
}

/* ---------- Multi-step mail-in form ---------- */
/* Card sits on the page bg (var(--bg)) so its inputs (var(--surface)) actually
   pop instead of blending — nesting two surface-colored boxes was the bug. */
.mailin-form-card{
  border:1px solid var(--border);border-radius:16px;background:var(--bg);padding:36px;
  box-shadow:0 24px 60px rgba(0,0,0,0.35);position:relative;
}
.mailin-form-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  border-radius:16px 16px 0 0;
  background:linear-gradient(90deg,var(--accent),var(--accent-accessible));
}
.form-progress{display:flex;align-items:center;gap:0;margin-bottom:32px;}
.form-progress-step{display:flex;align-items:center;flex:1;}
.form-progress-step:last-child{flex:none;}
.form-progress-dot{
  width:32px;height:32px;border-radius:50%;background:var(--surface);border:2px solid var(--border);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem;color:var(--muted);
  flex-shrink:0;transition:border-color .2s ease,background .2s ease,color .2s ease;
}
.form-progress-step.active .form-progress-dot,.form-progress-step.done .form-progress-dot{
  border-color:var(--accent);background:var(--accent-strong);color:#fff;
}
.form-progress-label{margin-left:10px;font-size:.85rem;color:var(--muted);white-space:nowrap;}
.form-progress-step.active .form-progress-label,.form-progress-step.done .form-progress-label{color:var(--text);}
.form-progress-line{flex:1;height:2px;background:var(--border);margin:0 12px;}
.form-progress-step.done + .form-progress-step .form-progress-line,.form-progress-step.done .form-progress-line{background:var(--accent);}

.form-step{display:none;}
.form-step.active{display:block;animation:formStepIn .25s ease;}
@keyframes formStepIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
@media (prefers-reduced-motion: reduce){
  .form-step.active{animation:none;}
}

.form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.form-row-3{display:grid;grid-template-columns:2fr 1fr 1fr;gap:16px;}
@media (max-width:640px){.form-row-2,.form-row-3{grid-template-columns:1fr;}}

/* form-progress-label's white-space:nowrap (needed on desktop so "Terms &
   Payment" doesn't wrap mid-word) has no narrow-viewport fallback, so on
   phone-width screens it overflows .mailin-form-card's fixed padding
   instead of shrinking. */
@media (max-width:480px){
  .mailin-form-card{padding:20px;}
  .form-progress-label{white-space:normal;font-size:.72rem;margin-left:6px;line-height:1.25;}
  .form-progress-line{margin:0 6px;}
}

.field-error{color:var(--danger);font-size:.82rem;margin-top:6px;display:none;}
.form-group.invalid input,.form-group.invalid select,.form-group.invalid textarea{border-color:var(--danger);}
.mi-step-error{color:var(--danger);font-size:.9rem;font-weight:600;margin:0 0 16px;}
.mi-step-error:empty{display:none;}
.form-group.invalid .field-error{display:block;}

.radio-row{display:flex;gap:20px;margin-top:4px;}
.radio-option{display:flex;align-items:center;gap:8px;}
.radio-option input{width:auto;}
.radio-option label{margin:0;font-weight:400;}
.backup-warning{
  display:none;margin-top:12px;border:1px solid var(--warning);border-radius:10px;padding:14px 16px;
  background:var(--warning-bg);color:var(--warning);font-size:.88rem;
}
.backup-warning.show{display:block;}

.form-step-actions{display:flex;justify-content:space-between;gap:12px;margin-top:28px;}
.form-step-actions .btn{min-width:120px;}
.form-step-actions .btn:disabled{opacity:.5;cursor:not-allowed;}

.promo-row{display:flex;gap:10px;}
.promo-row input{flex:1;}
.promo-row .btn{flex-shrink:0;padding:12px 18px;}
#mi-promo-status.success{color:var(--success);font-weight:600;}
#mi-promo-status.error{color:var(--danger);}

.cf-turnstile{max-width:100%;overflow:hidden;}
.stripe-card-element{
  padding:13px 14px;border-radius:8px;border:1px solid var(--border);background:var(--surface);
  max-width:100%;box-sizing:border-box;
}
.stripe-card-element.StripeElement--focus{border-color:var(--accent);}
.stripe-card-element.StripeElement--invalid{border-color:var(--danger);}
#stripe-card-errors{color:var(--danger);font-size:.85rem;margin-top:8px;min-height:1.1em;}

.mailin-success{text-align:center;padding:24px 0;}
.mailin-success .icon{
  width:56px;height:56px;border-radius:50%;background:var(--success-bg);color:var(--success);
  font-size:1.6rem;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;
}

/* ---------- Shipping-label sub-flow (task #89) ---------- */
.shipping-label-success{
  text-align:center;padding:20px 16px;border:1px solid var(--success);border-radius:10px;
  background:var(--success-bg);margin-top:16px;
}
.shipping-label-success .icon{
  width:48px;height:48px;border-radius:50%;background:var(--surface);color:var(--success);
  border:2px solid var(--success);font-size:1.4rem;display:flex;align-items:center;
  justify-content:center;margin:0 auto 12px;
}
.shipping-label-success h4{margin-bottom:8px;}
#msl-payment-errors{color:var(--danger-accessible);font-size:.85rem;margin-top:8px;min-height:1.1em;}
#msl-status.error{color:var(--danger-accessible);font-weight:600;}
#msl-status.success{color:var(--success);font-weight:600;}
#msl-payment-element{padding:4px 0;}

.summary-box{border:1px solid var(--border);border-radius:10px;padding:18px;background:var(--surface);margin-bottom:20px;font-size:.9rem;}
.summary-box dt{color:var(--muted);font-size:.8rem;margin-top:10px;}
.summary-box dt:first-child{margin-top:0;}
.summary-box dd{margin:2px 0 0;color:var(--text);}

/* ---------- Address notice ---------- */
.notice{
  border:1px solid var(--accent);border-radius:10px;padding:20px;background:var(--accent-muted);
}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--border);padding:56px 0 24px;background:var(--surface-2);}
.footer-grid{display:grid;grid-template-columns:1fr;gap:36px;}
@media (min-width:760px){ .footer-grid{grid-template-columns:2fr 1fr 1fr 1fr;} }
.footer-logo{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.footer-logo img{height:32px;width:auto;}
.site-footer h2{font-size:.95rem;color:var(--text);margin-bottom:14px;}
.site-footer ul{display:flex;flex-direction:column;gap:10px;}
.site-footer a{color:var(--muted);font-size:.92rem;transition:color .2s ease;}
.site-footer a:hover{color:var(--accent);}
.footer-social{display:flex;gap:12px;margin-top:16px;}
.footer-social a{
  width:34px;height:34px;border:1px solid var(--border);border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:.75rem;
}
.footer-bottom{
  border-top:1px solid var(--border);margin-top:40px;padding-top:24px;
  display:flex;flex-direction:column;gap:12px;font-size:.85rem;color:var(--muted);
}
@media (min-width:760px){ .footer-bottom{flex-direction:row;justify-content:space-between;align-items:center;} }
.footer-legal{display:flex;gap:20px;}

.newsletter-signup{
  border-top:1px solid var(--border);margin-top:32px;padding-top:24px;
}
.newsletter-signup h4{margin:0 0 6px;}
.newsletter-signup p{margin:0 0 14px;color:var(--muted);font-size:.9rem;}
.newsletter-form{display:flex;gap:10px;flex-wrap:wrap;max-width:420px;}
.newsletter-form input[type="email"]{
  flex:1;min-width:200px;padding:10px 14px;border-radius:8px;border:1px solid var(--border-input);
  background:var(--surface);color:var(--text);font-size:.9rem;
}
.newsletter-form input[type="email"]:focus{border-color:var(--accent-accessible);}
#newsletter-status{margin-top:10px;font-size:.85rem;}
#newsletter-status.success{color:var(--success);}
#newsletter-status.error{color:var(--danger);}

/* The scroll-triggered fade-in-on-scroll effect (JS IntersectionObserver + this CSS) was
   removed 2026-08-14 per Dylan's direct "no weird animations" instruction -- content now simply
   renders, no reveal choreography. The `class="fade-in"` attribute still on some page markup is
   now a harmless no-op (no matching CSS rule exists), left in place rather than mechanically
   stripped from every page to keep this change scoped to styles.css/main.js. */

/* ---------- Misc ---------- */
.center{text-align:center;}
.mt{margin-top:24px;}
.text-muted{color:var(--muted);}
hr.divider{border:none;border-top:1px solid var(--border);margin:48px 0;}

.legal h2{font-size:1.25rem;margin-top:2em;}
.legal .container{max-width:820px;}
.legal p, .legal li{color:var(--muted);}
.legal ul{margin:0 0 1em;padding-left:1.2em;list-style:disc;}
.legal li{margin-bottom:.4em;}

.big-cta-card{
  border:1px solid var(--border);border-radius:16px;padding:48px;text-align:center;background:var(--surface);
}
.big-cta-card h2{margin-bottom:10px;}
.big-cta-card .btn{margin-top:20px;}

/* ---------- Cookie/tracking consent banner ---------- */
#consent-banner{
  position:fixed;left:0;right:0;bottom:0;z-index:400; /* below the mobile nav panel (z-index:500) so it never traps taps */
  background:var(--surface);border-top:1px solid var(--border);
  padding:20px;
  padding-bottom:calc(20px + env(safe-area-inset-bottom)); /* iPhone home-indicator safe area */
  box-shadow:0 -10px 30px rgba(0,0,0,0.3);
  max-height:70vh;overflow-y:auto; /* never cover the whole viewport on small screens */
}
.consent-inner{max-width:900px;margin:0 auto;}
.consent-inner p{margin:0 0 14px;font-size:.9rem;color:var(--text);line-height:1.5;}
.consent-inner a{color:var(--text);text-decoration:underline;}
.consent-inner a:hover{color:var(--accent);}
.consent-options{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:16px;}
.consent-toggle{display:flex;align-items:center;gap:6px;font-size:.85rem;color:var(--muted);}
.consent-actions{display:flex;gap:12px;flex-wrap:wrap;}
.consent-actions button{font-family:var(--font);}
.consent-actions .btn-ghost{background:transparent;border:1px solid var(--border);color:var(--text);}
.consent-actions .btn-ghost:hover{border-color:var(--accent);color:var(--accent);}