/* =========================================================
   System Alternatives — Base (global)
   ========================================================= */

/* 0a) Self-hosted Inter font — falls back to Google Fonts CDN if local files are missing
   Local files live in /assets/fonts/inter/
   Download from: https://fonts.google.com/specimen/Inter
   Required: Inter-Regular.woff2, Inter-SemiBold.woff2, Inter-Bold.woff2, Inter-ExtraBold.woff2
   The browser tries each src() in order; first successful download wins.
   --------------------------------------------------------- */
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter/Inter-Regular.woff2') format('woff2'),
       url('https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyfMZg.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter/Inter-SemiBold.woff2') format('woff2'),
       url('https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuGKYMZg.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter/Inter-Bold.woff2') format('woff2'),
       url('https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuFuYMZg.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter/Inter-ExtraBold.woff2') format('woff2'),
       url('https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuDyYMZg.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* 0) Variables / Base reset */
:root{
  --red:#aa1e2e; --orange:#f26829; --black:#231f20;
  --gray-dark:#58595b; --gray-light:#d1d3d4;
  --bg:#ffffff; --panel:#f7f9fc; --surface:#ffffff; --border:#e6e6e6;
  --radius-pill:50px; --radius-card:12px; --max:1200px;
  --hero-bg:none;
}
*{ box-sizing:border-box }
html,body{ margin:0; padding:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; color:var(--black); background:var(--bg); -webkit-font-smoothing:antialiased }
/* Theme helpers */
:root{ color-scheme: light; }
:root.theme-dark{ color-scheme: dark; --bg:#0f1115; --panel:#171a20; --surface:#151821; --border:#2a2e39; --black:#f5f6f8; --gray-dark:#cfd2d8; --gray-light:#3a3f4c; }
:root.theme-dark body{ color:var(--black); background:var(--bg); }
:root.theme-dark .card,
:root.theme-dark .nav,
:root.theme-dark .footer,
:root.theme-dark .hero.hero--light,
:root.theme-dark .section--alt,
:root.theme-dark .collapsible__body{
  background:var(--panel); color:var(--black); border-color:var(--border);
}
:root.theme-dark .section,
:root.theme-dark .hero{ background:var(--bg); color:var(--black); }
:root.theme-dark img{ background:transparent; }
:root.theme-dark .hero--bg::before{ background-color:var(--bg); }
:root.theme-dark h1,
:root.theme-dark h2,
:root.theme-dark h3,
:root.theme-dark h4,
:root.theme-dark h5,
:root.theme-dark p,
:root.theme-dark li,
:root.theme-dark .lead,
:root.theme-dark .badge,
:root.theme-dark .tick-list li,
:root.theme-dark .check-list li,
:root.theme-dark .faq dt,
:root.theme-dark .faq dd,
:root.theme-dark .hero__badges span,
:root.theme-dark .hero__badges li{
  color:var(--black);
}
:root.theme-dark .hero__badges span,
:root.theme-dark .hero__badges li{
  background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.22);
}
:root.theme-dark .stat-card,
:root.theme-dark .feature-grid .feature,
:root.theme-dark .steps li{
  background:var(--surface); border-color:var(--border); box-shadow:0 10px 28px rgba(0,0,0,.35);
}
:root.theme-dark .btn{ color:#fff; }
:root.theme-dark .btn.btn--outline{ color:#fff; border-color:#fff; background:transparent; }
:root.theme-dark .btn.btn--outline:hover{ background:rgba(255,255,255,.12); }
:root.theme-dark .btn.btn--primary{ color:#fff; }
:root.theme-dark .btn:disabled,
:root.theme-dark .btn[disabled],
:root.theme-dark .btn--outline:disabled,
:root.theme-dark .btn--outline[disabled]{
  background:rgba(255,255,255,.08) !important;
  color:rgba(255,255,255,.55) !important;
  border-color:rgba(255,255,255,.25) !important;
}
:root.theme-dark .theme-slider__track{ background:linear-gradient(90deg,#1a1d25,#161922); border-color:var(--border); }
:root.theme-dark .theme-slider__ticks{ color:var(--black); }
:root.theme-dark .mobile-cta{ color:#fff; }
:root.theme-dark .theme-slider__icon--sun::before,
:root.theme-dark .theme-slider__icon--system::before,
:root.theme-dark .theme-slider__icon--moon::before{
  filter:invert(1);
}
:root.theme-dark .hero__badges li,
:root.theme-dark .hero__badges span{ color:var(--black); }
:root.theme-dark .faq dt,
:root.theme-dark .faq dd{ color:var(--black); }
:root.theme-dark .menu__link,
:root.theme-dark .dropdown a,
:root.theme-dark .submenu__link{ color:var(--black); }
:root.theme-dark .dropdown{ background:var(--panel); }
:root.theme-dark .card{ box-shadow:0 14px 30px rgba(0,0,0,.4); }
:root.theme-dark a{ color:var(--black); }
:root.theme-dark input, :root.theme-dark textarea, :root.theme-dark select{
  background:#0f1115; color:var(--black); border-color:var(--border);
}
:root.theme-dark .hero__copy .lead,
:root.theme-dark .hero__copy p{ color:var(--black); }
:root.theme-dark .cta-row .btn{ color:#fff; }
:root.theme-dark .badge{ background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25); color:var(--black); }
:root.theme-dark .tick-list li::before,
:root.theme-dark .check-list li::before{ filter:invert(1); }
:root.theme-dark .muted{ color:#d6d8dc; }
:root.theme-dark .subnav a{
  color:var(--black); background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.25);
}
:root.theme-dark .band{ background:var(--surface); border-color:var(--border); }
:root.theme-dark .footer__bar{ border-color:var(--border); }
:root.theme-dark .mobile-cta-bar{ background:#11141b; border-color:var(--border); }
img{ max-width:100%; height:auto; display:block }
a{ color:inherit; text-decoration:none }
.container{ max-width:var(--max); margin:0 auto; padding:0 24px }

/* Shared subnav */
.subnav{
  position:sticky;
  top: var(--subnav-top, 0);
  z-index:1100;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  backdrop-filter:saturate(160%) blur(6px);
}
.subnav .container{
  display:flex; gap:.6rem; padding:.55rem 1rem;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x proximity; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;
}
.subnav a{
  white-space:nowrap; padding:.55rem .9rem; border-radius:999px;
  border:1px solid var(--border); font-weight:800; letter-spacing:.01em; background:var(--surface);
  transition:background-color .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
  scroll-snap-align:start;
}
.subnav a:hover, .subnav a:focus-visible{
  background:var(--red); color:#fff; border-color:var(--red); transform:translateY(-1px);
}
.subnav a.is-active{ background:var(--red); color:#fff; border-color:var(--red) }
:root.theme-dark .subnav a{ border-color:rgba(255,255,255,.3); color:var(--black); background:rgba(255,255,255,.08); }
:root.theme-dark .subnav a.is-active{ background:var(--red); color:#fff; border-color:var(--red); box-shadow:0 6px 16px rgba(0,0,0,.4); }

/* 1) Header / Navigation (desktop defaults) */
.nav{ position:sticky; top:0; z-index:1200; background:var(--surface); border-bottom:1px solid var(--border) }
.nav__inner{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; min-height:72px; gap:24px }
.theme-toggle{ justify-self:end; }
.btn--tiny{ padding:8px 12px; font-size:.9rem; line-height:1; border-width:1px; }
.brand{ display:flex; align-items:center; gap:12px; color:var(--black) }
.brand img{ height:50px; width:auto }
.brand__text{ display:none }

.menu{ display:flex; justify-content:center; align-items:center }
.menu__list{ display:flex; gap:16px; list-style:none; margin:0; padding:0 }
.menu__item{ position:relative }
.menu__link{ position:relative; display:inline-block; padding:12px 6px; border-radius:4px; font-weight:700; color:var(--black); transition:color .15s ease }
@media (hover:hover){
  .menu__link::after{
    content:""; position:absolute; left:0; bottom:0; height:3px; width:100%;
    background:var(--red); transform:scaleX(0); transform-origin:left; transition:transform .2s ease;
  }
  .menu__link:hover::after, .menu__link:focus-visible::after{ transform:scaleX(1) }
}
/* Dropdown underline animation (matches top-level, but inset to text area) */
.dropdown a,
.submenu__link{
  position: relative;  /* ensure the ::after bar positions against the item */
}

@media (hover:hover){
  .dropdown a::after,
  .submenu__link::after{
    content:"";
    position:absolute;
    left:0px;
    right:0px;
    bottom:0;
    height:3px;
    background:var(--red);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .2s ease;
  }
  .dropdown a:hover::after,
  .dropdown a:focus-visible::after,
  .submenu__link:hover::after,
  .submenu__link:focus-visible::after{
    transform:scaleX(1);
  }
}

.menu__cta{ display:flex; gap:12px }
.menu__cta .btn{ gap:0.25em; } /* word-space between label and .nav-btn-extra; hides cleanly when span is gone */

/* Desktop dropdowns */
.has-dropdown{ --hover-buffer:10px; padding-bottom:var(--hover-buffer); margin-bottom:calc(var(--hover-buffer) * -1) }
.dropdown{
  position:absolute; top:100%; left:0; min-width:260px; background:var(--surface); border:1px solid var(--border);
  border-radius:8px; box-shadow:0 10px 24px rgba(0,0,0,.08); padding:8px 0; display:none; z-index:1100; list-style:none;
}
.dropdown li{ list-style:none }
.dropdown a, .submenu__link{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 16px; border-radius:6px; color:var(--black); font-weight:600 }
.dropdown a:hover, .submenu__link:hover{ background:rgba(209,211,212,.4); color:var(--red) }

/* second level flyout (desktop) */
.has-subdropdown{ position:relative }
.subdropdown{
  position:absolute; top:0; left:calc(100% - 1px); min-width:260px; background:var(--surface); border:1px solid var(--border);
  border-radius:8px; box-shadow:0 10px 24px rgba(0,0,0,.08); padding:8px 0; display:none; z-index:1101;
}
.submenu__link{ padding-right:28px }
.submenu__link::before{
  content:"›"; position:absolute; right:12px; top:50%; transform:translateY(-50%); font-size:.95rem; line-height:1; color:var(--gray-dark);
  transition:transform .2s ease, color .2s ease, opacity .2s ease; opacity:.85;
}
.submenu__link:hover::before, .submenu__link:focus-visible::before{ color:var(--red); transform:translateY(-50%) translateX(2px); opacity:1 }

/* open-on-hover for desktop */
.has-dropdown:hover > .dropdown,
.has-dropdown:focus-within > .dropdown,
.dropdown:hover, .dropdown:focus-within{ display:block }
.has-subdropdown:hover > .subdropdown,
.has-subdropdown:focus-within > .subdropdown,
.subdropdown:hover, .subdropdown:focus-within{ display:block }

/* 1.1 Compact nav — shortens CTA labels and tightens spacing before the drawer kicks in */
@media (max-width:1200px){
  .nav-btn-extra{ display:none; }
  .menu__list{ gap:8px; }
  .menu__link{ padding:8px 4px; }
}

/* 1.2 Mobile nav (overlay drawer) */
.hamburger{ display:none; justify-self:end; flex-direction:column; gap:5px; background:none; border:0 }

.menu__mobile-cta{ display:none } /* hidden by default, shown only in the open drawer */

.body--nav-open::before{          /* dimmer so drawer clearly covers page */
  content:""; position:fixed; inset:72px 0 0 0; background:rgba(0,0,0,.45); z-index:1100; display:none;
}

@media (max-width:1050px){
  /* bar & hamburger button */
  .nav .menu__cta{ display:none !important; }                   /* no desktop CTAs on phones */
  .hamburger{
    display:flex; width:44px; height:44px; align-items:center; justify-content:center;
    cursor:pointer; -webkit-tap-highlight-color:transparent; position:relative; z-index:1202;
  }
  .hamburger span{
    position:absolute; width:26px; height:2px; background:var(--black);
    transition:transform .22s ease, opacity .2s ease;
  }
  .hamburger span:nth-child(1){ transform:translateY(-6px) }
  .hamburger span:nth-child(2){ transform:translateY(0) }
  .hamburger span:nth-child(3){ transform:translateY(6px) }
  .nav.nav--open .hamburger span:nth-child(1){ transform:rotate(45deg) }
  .nav.nav--open .hamburger span:nth-child(2){ opacity:0 }
  .nav.nav--open .hamburger span:nth-child(3){ transform:rotate(-45deg) }

  /* drawer overlay under the sticky bar */
  .body--nav-open::before{ display:block }

  .nav .menu{
    display:block;                           /* override desktop flex */
    position:fixed; top:72px; left:0; right:0; bottom:0;
    background:var(--surface); z-index:1201; overflow:auto; -webkit-overflow-scrolling:touch;
    padding:16px 18px 88px; box-shadow:0 12px 24px rgba(0,0,0,.1);
    transform:translateY(-8px); opacity:0; pointer-events:none; transition:.2s ease;
  }
  .nav.nav--open .menu{ transform:none; opacity:1; pointer-events:auto }

  /* mobile CTA block at the top of drawer — all buttons same size, stacked */
  .nav.nav--open .menu__mobile-cta{
    display:flex; flex-direction:column; gap:10px; margin:6px 0 16px;
  }
  .menu__mobile-cta .btn{
    width:100%; padding:14px 18px; justify-content:center;
  }

  /* stack the list vertically (no columns), full width */
  .menu__list{ display:block !important; width:100% }
  .menu__list > li{ display:block; width:100% }

  /* make section headers visually distinct from leaf items */
  .menu__list > li > a.menu__link{
    display:block; padding:10px 0; margin-top:10px;
    font-size:.85rem; letter-spacing:.08em; text-transform:uppercase;
    color:var(--gray-dark); font-weight:800;
  }

  /* flatten submenus -> show only leaf links, no group headings/chevrons */
  .submenu__link{ display:none !important; }
  .menu .dropdown, .menu .subdropdown{
    position:static !important; display:block !important;
    border:0; box-shadow:none; margin:0; padding:0; width:100%;
  }

  /* leaf links (clean list; no divider lines) */
  .menu .dropdown > li > a,
  .menu .subdropdown a{
    display:block; padding:12px 0 10px 16px; background:transparent; border:0; border-radius:0; font-weight:600;
  }

  /* kill underline bars and any hover-open on mobile */
  .menu__link::after, .dropdown a::after, .submenu__link::after{ content:none !important }
  .menu .has-dropdown:hover > .dropdown,
  .menu .has-subdropdown:hover > .subdropdown{ display:block !important }
}

/* Desktop: make sure the mobile CTA row never shows */
@media (min-width:1051px){
  .menu__mobile-cta{ display:none !important }
}
/* --- Button/font normalization (keep buttons using Inter like the page) --- */
button, input, select, textarea { 
  font: inherit;           /* inherit family, size, weight, line-height */
  color: inherit; 
}

/* Ensure our .btn components (both <a> and <button>) share the same typography */
.btn, a.btn, button.btn {
  font-family: inherit;    /* Inter from body */
  font-weight: 700;
  font-size: 1rem;         /* match your base text size */
  line-height: 1; 
  letter-spacing: .01em;
  -webkit-appearance: none;
  appearance: none;
}

/* 2) Buttons (standardized) */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  border-radius:var(--radius-pill); padding:10px 20px; font-weight:700; border:2px solid transparent; transition:all .2s ease;
}
.btn--primary{ background:var(--red); color:#fff; border:2px solid transparent }
.btn--primary:hover{ background:var(--orange) }
.menu__cta .btn--primary,
.menu__mobile-cta .btn--primary{
  position:relative;
  box-shadow:0 10px 24px rgba(170,30,46,.35);
  animation: cta-glow 3.6s ease-in-out infinite;
}
@keyframes cta-glow{
  0%, 100%{
    box-shadow:0 10px 24px rgba(170,30,46,.32), 0 0 0 0 rgba(170,30,46,.0);
    transform:scale(1);
  }
  50%{
    box-shadow:0 12px 28px rgba(170,30,46,.45), 0 0 18px 3px rgba(170,30,46,.25);
    transform:scale(1.05);
  }
}
@media (prefers-reduced-motion: reduce){
  .menu__cta .btn--primary,
  .menu__mobile-cta .btn--primary{ animation:none; }
}
.btn--outline{ background:var(--surface); color:var(--red); border:2px solid var(--red) }
.btn--outline:hover{ background:var(--red); color:#fff }
.btn--pay{
  background:#15803d;
  color:#fff;
  border:2px solid transparent;
}
.btn--pay:hover{
  background:#16a34a;
  color:#fff;
}
:root.theme-dark .btn--pay{
  background:#22c55e;
  color:#0b0e14;
}
:root.theme-dark .btn--pay:hover{
  background:#4ade80;
  color:#0b0e14;
}

/* 3) Hero (shared base) */
.hero{ position:relative; padding:84px 0; overflow:hidden; display:flex; align-items:center; }
.hero--bg{ min-height:520px; }
.hero--light{ background:var(--surface) }
.hero--bg::before{
  content:""; position:absolute; inset:0; background-image:var(--hero-bg); background-size:cover; background-position:center; background-repeat:no-repeat; pointer-events:none; z-index:0;
}
.hero--bg::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(ellipse at 30% 30%, rgba(0,0,0,.18), rgba(0,0,0,.6) 60%), linear-gradient(90deg, rgba(0,0,0,.5), rgba(0,0,0,.15));
}
.hero__inner{ position:relative; z-index:1; display:grid; grid-template-columns:1.1fr .9fr; gap:32px; align-items:center; width:100%; }
.kicker{ text-transform:uppercase; color:var(--red); font-weight:700; font-size:.8rem; letter-spacing:.12em }
.lead{ color:var(--gray-dark) }

/* Readability over image heroes */
.hero.hero--bg .hero__copy h1,
.hero.hero--bg .hero__copy p,
.hero.hero--bg .hero__copy .kicker{
  color:#fff;
  text-shadow:
    -1px -1px 0 rgba(0,0,0,.95),
     1px -1px 0 rgba(0,0,0,.95),
    -1px  1px 0 rgba(0,0,0,.95),
     1px  1px 0 rgba(0,0,0,.95),
     0     2px 6px rgba(0,0,0,.25);
}
@supports (-webkit-text-stroke: 1px black){
  .hero.hero--bg .hero__copy h1,
  .hero.hero--bg .hero__copy p,
  .hero.hero--bg .hero__copy .kicker{
    -webkit-text-stroke: .95px rgba(0,0,0,.95);
    text-shadow: 0 2px 6px rgba(0,0,0,.25);
    paint-order: stroke fill;
  }
  .hero.hero--bg .hero__copy p{      -webkit-text-stroke: .75px rgba(0,0,0,.9) }
  .hero.hero--bg .hero__copy .kicker{-webkit-text-stroke: .65px rgba(0,0,0,.9) }
}

/* Compact hero — less padding, shorter min-height (used on service/contact pages) */
.hero--compact{ padding:52px 0; }
.hero--compact.hero--bg{ min-height:300px; }

/* Single-column hero — copy spans full width (no art column) */
.hero--singlecol .hero__inner{ grid-template-columns:1fr; }

/* Opt-out variant */
.hero--no-outline .hero__copy h1,
.hero--no-outline .hero__copy p,
.hero--no-outline .hero__copy .kicker{
  -webkit-text-stroke: initial; text-shadow:none; color:var(--black);
}

/* 4) Sections / grids / cards (shared) */
.section--alt{ background:var(--panel) }
.section__head{ margin-bottom:22px; text-align:center }
.section__head h2{ margin:0 0 6px 0; font-size:clamp(1.45rem, 1.1rem + 1.3vw, 2rem) }
.section__head .lead{ color:var(--gray-dark) }
.section + .section{ margin-top:0; }
.section.section--alt{ padding-top:56px; padding-bottom:56px; }
.section{ padding:72px 0; }

.grid{ display:grid; gap:28px }
.grid--2{ grid-template-columns:repeat(2,1fr) }
@media (max-width:720px){ .grid--2{ grid-template-columns:1fr } }
.grid--3{ grid-template-columns:repeat(3,1fr) }
@media (max-width:1024px){ .grid--3{ grid-template-columns:1fr 1fr } }
@media (max-width:720px){ .grid--3{ grid-template-columns:1fr } }

/* Steps (numbered process list — shared across pages) */
.steps{ counter-reset:step; display:grid; gap:14px; grid-template-columns:repeat(4,1fr); list-style:none; padding:0; margin:0 }
.steps li{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:16px }
.steps li h4{ margin:0 0 6px 0; font-size:1.05rem }
.steps li p{ color:var(--gray-dark); margin:0 }
.steps li::before{ counter-increment:step; content:counter(step); display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; margin-bottom:8px; background:var(--red); color:#fff; font-weight:800 }
@media (max-width:1024px){ .steps{ grid-template-columns:1fr 1fr } }
@media (max-width:640px){ .steps{ grid-template-columns:1fr } }

@media (max-width:720px){
  .hero{ padding:64px 0; }
  .hero--bg{ min-height:340px; }
  .hero__inner{ grid-template-columns:1fr; gap:22px; }
  .hero__copy{ text-align:center; align-items:center; }
  .hero__copy h1{ font-size:2.1rem; line-height:1.2; }
  .hero__copy p, .hero__copy p.lead{ font-size:1rem; }
  .hero__cta{ justify-content:center; flex-wrap:wrap; }
  .hero__badges{ justify-content:center; }
  .hero .cta-row{ gap:10px; justify-content:center; }
  .band.band--who{ padding:18px; text-align:center; }
  .band.band--who ul{ text-align:left; display:inline-block; }
  .section__head{ text-align:center; }
  .card{ text-align:center; }
  .card .tick-list, .card .checklist, .card .check-list{ text-align:left; display:inline-block; }
  /* Form labels and inputs always left-aligned */
  label, .form-grid label, .form-grid input, .form-grid textarea, .form-grid select,
  .support-form label, .collapsible__body label{ text-align:left; }
}
.grid-2{ grid-template-columns:repeat(2,1fr) }
.grid-3{ grid-template-columns:repeat(3,1fr) }
@media (max-width:1024px){ .grid-3{ grid-template-columns:1fr 1fr } }
@media (max-width:900px){ .grid-2{ grid-template-columns:1fr } }

.card{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:18px; transition:transform .15s ease, box-shadow .2s ease }
.card h3{ margin-top:0; font-size:1.25rem }

/* 4.1 Shared list styles */
.tick-list{ list-style:none; padding:0; margin:0 0 12px 0 }
.tick-list li{ position:relative; padding-left:22px; margin:8px 0; color:var(--black) }
.tick-list li::before{ content:"✔"; position:absolute; left:0; top:0; color:var(--red); font-weight:800 }

/* 4.2 Badges */
.badge{
  display:inline-flex; align-items:center; gap:.4ch;
  padding:.35rem .7rem; line-height:1; font-weight:800; font-size:.85rem;
  border-radius:9999px; border:2px solid var(--red); color:var(--red); background:var(--surface);
}
.badge--solid{ background:var(--red); color:#fff; border-color:var(--red) }
.badge--muted{ border-color:var(--gray-light); color:var(--gray-dark); background:var(--surface) }
.badge--inverted{ background:transparent; color:#fff; border-color:#fff }
.badge--sm{ font-size:.78rem; padding:.28rem .6rem; border-width:2px }
.badge--lg{ font-size:.95rem; padding:.5rem .9rem }

/* Spacing when a badge sits in hero copy */
.hero .badge{ margin-top:8px }

/* Checklist (promoted) */
.checklist{ list-style:none; padding:0; margin:.25rem 0 0 0 }
.checklist li{ position:relative; padding-left:22px; margin:.5rem 0; color:var(--black) }
.checklist li::before{ content:"✔"; position:absolute; left:0; top:0; color:var(--red); font-weight:800 }

/* Utility link */
.link{ color:var(--red); font-weight:700 }
.link:hover{ color:var(--orange); text-decoration:underline }

/* 5) Footer (shared) */
.footer{ background:var(--surface); border-top:1px solid var(--border) }
.footer__inner{ display:grid; grid-template-columns:1.1fr 1.4fr; gap:28px; padding:32px 0; align-items: center;}
.footer__brand{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:8px 0;
}
.footer__brand img{
  width: clamp(200px, 72%, 320px);       /* responsive width, keeps logo tidy */
  height:auto;
}
.footer__tagline{
  font-size:.85rem; color:var(--gray-dark); margin:0; text-align:center;
}
.footer__bar{ border-top:1px solid var(--border); font-size:.9rem; color:var(--gray-dark); padding:12px 0; text-align:center }
.footer__bar-grid{ display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap; text-align:center }
.footer__bar-meta{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; font-weight:600 }
.theme-slider{ display:flex; align-items:center; gap:10px }
.theme-slider__label{ font-weight:700; font-size:.95rem }
.theme-slider__track{
  position:relative; width:173px; height:46px; border:1px solid var(--border); border-radius:999px;
  background:linear-gradient(90deg, #f7f7f7, #ededed); display:grid; grid-template-columns:repeat(3,1fr); align-items:center;
  overflow:hidden;
}
.theme-slider__icon{
  appearance:none; border:0; background:transparent; cursor:pointer; height:100%; width:100%;
  display:flex; align-items:center; justify-content:center; position:relative; z-index:2;
}
.theme-slider__thumb{
  position:absolute; top:4px; left:4px; width:52px; height:36px; border-radius:999px;
  background:linear-gradient(120deg,var(--red),var(--orange));
  box-shadow:0 6px 14px rgba(0,0,0,.18); transition:transform .18s ease;
}
.theme-slider__track[data-mode="light"] .theme-slider__thumb{ transform:translateX(0); }
.theme-slider__track[data-mode="system"] .theme-slider__thumb{ transform:translateX(56px); }
.theme-slider__track[data-mode="dark"] .theme-slider__thumb{ transform:translateX(112px); }
.theme-slider__icon::before{
  content:""; display:block; width:18px; height:18px; background-size:contain; background-repeat:no-repeat;
  filter:none;
}
.theme-slider__icon:focus-visible{ outline:2px solid var(--red); outline-offset:2px; border-radius:999px; }
.theme-slider__icon--sun::before{
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='4' fill='%23231f20'/%3E%3Cpath d='M12 2v2m0 16v2m10-10h-2M4 12H2m14.95-6.95-1.41 1.41M8.46 17.54l-1.41 1.41m0-13.96 1.41 1.41m10.09 10.09-1.41 1.41' stroke='%23231f20' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.theme-slider__icon--system::before{
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='5' width='18' height='12' rx='2' ry='2' fill='none' stroke='%23231f20' stroke-width='2'/%3E%3Cpath d='M8 19h8M10 17h4' stroke='%23231f20' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.theme-slider__icon--moon::before{
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 14a8 8 0 1 1-8-10 7 7 0 0 0 8 10Z' fill='none' stroke='%23231f20' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.mobile-cta-bar{
  position:fixed; bottom:0; left:0; right:0; z-index:1202;
  display:none; gap:10px; padding:10px 14px; background:var(--surface);
  border-top:1px solid var(--border); box-shadow:0 -6px 18px rgba(0,0,0,.08);
}
.mobile-cta{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:10px 12px; border-radius:12px; text-align:center; font-weight:800;
  background:linear-gradient(120deg, var(--red), var(--orange)); color:#fff;
  text-decoration:none; gap:2px;
}
.mobile-cta__label{ font-size:.92rem; opacity:.9 }
.mobile-cta__value{ font-size:1.05rem; letter-spacing:.02em }
@media (max-width:780px){
  body{ padding-bottom:84px; }
  .mobile-cta-bar{ display:flex; }
  .has-subnav .mobile-cta-bar{ display:none !important; }
  /* Contact and support pages already have call/support CTAs inline — hide the bar */
  .page-contact .mobile-cta-bar,
  .page-support .mobile-cta-bar{ display:none !important; }
  .page-contact, .page-support{ padding-bottom:0; }
}
@media (min-width:781px){
  .mobile-cta-bar{ display:none !important; }
}
.footer__nav{
  display:grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr)); /* AI, Services, Support, Company */
  column-gap:32px;
  row-gap:12px;
}
.footer__nav h5{
  margin:0 0 10px;
  font-size:.95rem;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.footer__nav ul{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:8px;                                /* even link spacing */
}
.footer__nav li{ margin:0; line-height:1.35; }
.footer__nav a{ font-weight:600; }
.footer__nav a:hover{ color:var(--red); text-decoration:underline; }

/* Medium screens: fall back to 2 columns before stacking on mobile */
@media (max-width:1100px){
  .footer__nav{ grid-template-columns: repeat(2, minmax(180px, 1fr)); }
}

/* 6) Responsive (shared) */
@media (max-width:980px){
  .hero__inner{ grid-template-columns:1fr }
  .hero{ padding:64px 0 }
}

/* 7) Scroll reveal (shared) */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; will-change:opacity,transform }
.reveal.is-visible{ opacity:1; transform:none }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1 !important; transform:none !important } }
.reveal.is-visible .grid > *,
.reveal.is-visible .steps > li,
.reveal.is-visible .security__panel > .badge{ animation:sa-reveal .6s ease both }
.reveal.is-visible .grid > *:nth-child(1){ animation-delay:.05s }
.reveal.is-visible .grid > *:nth-child(2){ animation-delay:.12s }
.reveal.is-visible .grid > *:nth-child(3){ animation-delay:.19s }
.reveal.is-visible .steps > li:nth-child(1){ animation-delay:.05s }
.reveal.is-visible .steps > li:nth-child(2){ animation-delay:.12s }
.reveal.is-visible .steps > li:nth-child(3){ animation-delay:.19s }
.reveal.is-visible .steps > li:nth-child(4){ animation-delay:.26s }
@keyframes sa-reveal{ from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none} }

/* Shared enhanced hero variant */
.hero--enhanced::before{
  opacity:1;
}
.hero--enhanced .kicker,
.hero--enhanced h1,
.hero--enhanced p,
.hero--enhanced .btn{ text-shadow:0 1px 2px rgba(0,0,0,.18) }

/* Disabled buttons */
.btn[aria-disabled="true"],
.btn.is-disabled{
  background:#f3f4f6; color:#9aa0a6; border-color:var(--gray-light);
  cursor:not-allowed; box-shadow:none; pointer-events:auto;
}
.btn--outline[aria-disabled="true"],
.btn--outline.is-disabled{ background:var(--surface); color:#9aa0a6; border-color:var(--gray-light) }
.btn[aria-disabled="true"]:hover,
.btn[aria-disabled="true"]:focus{
  background:#f3f4f6; color:#9aa0a6; border-color:var(--gray-light); text-decoration:none; box-shadow:none;
}

/* FAQ */
#faq > .container > h2{ text-align:center; justify-content:center; }
.faq{ max-width:720px; margin:0 auto; display:grid; gap:12px }
.faq dt{
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  padding:12px 14px; font-weight:800; position:relative; cursor:pointer;
}
.faq dt::after{
  content:"+"; position:absolute; right:14px; top:50%; transform:translateY(-50%);
  color:var(--red); font-weight:800; transition:transform .2s ease;
}
.faq dt[aria-expanded="true"]::after{ content:"–" }
.faq dd{
  margin:-8px 0 4px 0; background:var(--surface); border:1px solid var(--border); border-top:0;
  border-radius:0 0 12px 12px; overflow:hidden;
  padding:0; max-height:0; opacity:.0; transition:max-height .35s ease, padding .25s ease, opacity .25s ease;
}
.faq dd.is-open{ padding:12px 14px; opacity:1 }
.faq dd > .faq__inner{ display:block }

/* Hero badges */
.hero__badges{
  display:flex; gap:16px; margin-top:14px; padding:0; list-style:none; flex-wrap:wrap;
}
.hero__badges li{
  font-weight:600; font-size:.9rem; color:var(--black);
  background:var(--surface); border:1px solid var(--border);
  border-radius:999px; padding:8px 12px;
}

/* Centered section CTA wrapper — used on multiple pages */
.section__cta{ display:flex; justify-content:center; gap:12px; margin-top:14px; flex-wrap:wrap }
.section__cta .btn + .btn{ margin-left:0 }

/* Inline button rows used throughout pages */
.cta-row{ display:flex; gap:12px; flex-wrap:wrap; margin:16px 0 14px }

/* Center CTAs in content sections */
main .section .cta-row{
  display:flex; justify-content:center; align-items:center; gap:12px; flex-wrap:wrap; margin-top:14px;
}
.hero .cta-row, .hero__cta{ justify-content:flex-start; margin-top:0 }
main .section > .container > a.btn,
main .section > .container > button.btn{ display:block; width:max-content; margin:14px auto 0 }
main .section > .container > .btn + .btn{ margin-left:12px }

/* Variety accents & components */
:root{
  --accent-red: var(--red);
  --accent-orange: var(--orange);
  --accent-teal: #1fa2a6;
  --accent-blue: #2a6de0;
}
.section--edge{ position:relative }
.section--edge::before{ content:""; position:absolute; inset:0 auto 0 0; width:4px; background:linear-gradient(var(--red), var(--orange)); opacity:.45; border-radius:4px }
.section--pattern{
  background:
    linear-gradient(0deg, rgba(255,255,255,.85), rgba(255,255,255,.85)),
    repeating-linear-gradient(135deg, rgba(0,0,0,.04) 0 10px, rgba(0,0,0,.02) 10px 20px);
}
.card--icon{ padding-top:54px; position:relative }
.card__icon{ position:absolute; left:18px; top:18px; width:32px; height:32px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; background:rgba(0,0,0,.04) }
.card--accent{ position:relative }
.card--accent::after{ content:""; position:absolute; left:-1px; top:-1px; bottom:-1px; width:4px; border-radius:4px 0 0 4px; background:var(--accent-red) }
.card--accent[data-accent="orange"]::after{ background:var(--accent-orange) }
.card--accent[data-accent="teal"]::after{ background:var(--accent-teal) }
.card--accent[data-accent="blue"]::after{ background:var(--accent-blue) }
.checklist--soft li::before{ content:"▸"; color:var(--orange); font-weight:900 }
.checklist--dot  li::before{ content:"•"; color:var(--red); font-weight:900 }
.checklist--shield li::before{ content:"🛡️"; font-size:.95rem; line-height:1 }
.band{ background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:0 10px 24px rgba(0,0,0,.06); padding:18px; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:start }
.band__item{ display:flex; gap:10px; align-items:baseline; color:var(--gray-dark) }
.band__item span{ font-size:1.6rem; font-weight:800; color:var(--red) }
.band.band--who{
  margin:16px 0 32px;
  padding:18px 20px;
  gap:20px;
}
.band.band--who h3{ margin:0 0 6px 0 }
.band.band--who ul{ margin:8px 0 0; padding-left:18px; color:var(--black) }
.band.band--who li{ margin:6px 0 }
@media (max-width:900px){ .band{ grid-template-columns:1fr } }
.section__kicker{ display:inline-block; margin-bottom:6px; padding:2px 8px; font-weight:800; color:var(--red); border:1px solid var(--border); border-radius:999px; font-size:.75rem; letter-spacing:.06em; text-transform:uppercase }
.section__kicker-sub{ margin:2px 0 10px; font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--gray-dark) }
.reveal.is-visible .grid > *{ animation:sa-reveal .6s ease both }
.reveal.is-visible .grid > *:nth-child(1){ animation-delay:.04s }
.reveal.is-visible .grid > *:nth-child(2){ animation-delay:.10s }
.reveal.is-visible .grid > *:nth-child(3){ animation-delay:.16s }
.reveal.is-visible .grid > *:nth-child(4){ animation-delay:.22s }

/* Mobile: force all grids to stack on narrow screens */
@media (max-width:720px){
  .grid{ grid-template-columns:1fr !important }
  .split, .grid.grid-2, .grid.grid-3{ grid-template-columns:1fr !important }
}

/* Lock page scroll when drawer is open */
.body--nav-open{ overflow:hidden; touch-action:none }
/* --- Anchor offset so targets don't hide under the sticky header --- */
:root{
  /* your header is 72px tall; add a little breathing room */
  --sticky-header: 54px;
  --anchor-gap: 1px;            /* tweak this to taste */
  --anchor-offset: calc(var(--sticky-header) + var(--anchor-gap));
}

/* Any element inside <main> with an id (e.g., #helpdesk, #edr-mdr, etc.) */
main [id]{
  scroll-margin-top: var(--anchor-offset);
}

/* Optional smooth scrolling for hash links */
html{ scroll-behavior: smooth; }

/* Fallback for very old browsers without scroll-margin-top */
@supports not (scroll-margin-top: 1px){
  main [id]:target::before{
    content:"";
    display:block;
    height: var(--anchor-offset);
    margin-top: calc(var(--anchor-offset) * -1);
  }
}
/* Hide footer logo on small screens */
@media (max-width: 900px){
  .footer__brand img{ display: none !important; }
}
/* Footer (mobile): hide logo + lay nav groups horizontally */
@media (max-width: 900px){
  /* hide the brand column */
  .footer__brand{ display:none !important; }

  /* single “row” layout for the remaining content */
  .footer__inner{
    grid-template-columns: 1fr;         /* no left column anymore */
    justify-items: stretch;
  }

  .footer__nav{
    display: grid;
    grid-template-columns: 1fr;   /* stack all groups */
    gap: 16px;
    padding: 4px 0 10px;
  }

  .footer__nav > *{
    text-align: center;             /* standard left align */
    min-width: 0;                 /* remove earlier min-widths */
  }

  /* tidy headings/links in this centered layout */
  .footer__nav h5{ margin: 0 0 6px; }
  .footer__nav ul{ margin: 0; padding: 0; list-style: none; }
  .footer__nav li{ margin: 6px 0; }
}
/* =========================================================
   Shared: collapsible panels + form styling (used by Support & Contact)
   ========================================================= */

/* Ensure hidden collapsibles are removed from flow */
.collapsible[hidden]{ display:none !important; }

/* Collapsible container (animated height + fade) */
.collapsible{
  display:block;
  overflow:hidden;
  height:0;
  opacity:0;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
  transition: height .28s ease, opacity .2s ease,
              background-color .24s ease, border-color .24s ease, box-shadow .24s ease;
  will-change: height, opacity;
}

/* Add a gap above the inner card only while open */
.collapsible.is-open{ padding-top:12px; overflow:visible; }

/* Inner card stays visually stable during animation */
.collapsible__body{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  padding:18px;
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  overflow:visible;
}

@media (max-width:1050px){
  .body--nav-open .mobile-cta-bar{ display:none !important; }
}

@media (prefers-reduced-motion:reduce){
  .collapsible{ transition:none }
}

/* Shared form layout */
.support-form .form-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:14px;
  align-items:start;
}
.support-form .form-grid .full{ grid-column:1 / -1; }
.support-form label span{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-weight:700;
  margin-bottom:6px;
}
.support-form input,
.support-form textarea{
  width:100%;
  border:1px solid var(--border);
  border-radius:8px;
  padding:10px 12px;
  font:inherit;
}
.support-form input:focus,
.support-form textarea:focus{
  outline:2px solid rgba(170,30,46,.25);
  border-color:var(--red);
}
.support-form .form-actions{ display:flex; gap:12px; margin-top:8px; }
.support-form .form-note{ margin:10px 0 0; color:var(--gray-dark); font-size:.95rem; }

@media (max-width:720px){
  .support-form .form-grid{ grid-template-columns:1fr; }
}
/* Shared: no hover lift on cards inside any collapsible panel */
.collapsible .card{ transition:none; }
.collapsible .card:hover{ transform:none; box-shadow:0 10px 24px rgba(0,0,0,.06); }
/* === Shared: Attachment chips === */
.attachments { display:grid; gap:8px; }
.attach-row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.file-chip {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:999px; padding:6px 10px; max-width:100%;
}
.file-chip__name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:42ch; }
.file-chip__size { color:var(--gray-dark); font-size:.9em; }
.file-chip__remove {
  appearance:none; border:0; background:#f3f4f6; color:#9aa0a6;
  width:22px; height:22px; border-radius:50%; font-weight:800; line-height:1;
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
}
.file-chip__remove:hover { background:#ffe9ec; color:var(--red); }
/* disabled state + pointer for add button */
/* Attachment add button: theme-aware icon */
.attach-btn{
  position:relative; display:inline-flex; align-items:center; gap:.6ch;
  border:1px dashed var(--border); background:var(--surface); padding:8px 12px;
  border-radius:999px; font-weight:700; cursor:pointer;
  color: var(--red);                     /* icon + label color */
}
.attach-btn:hover{ border-color: var(--red); }
.attach-btn:focus-visible{ outline:2px solid rgba(170,30,46,.25); outline-offset:2px; }

/* the icon */
.attach-btn .icon-plus{ width:18px; height:18px; flex-shrink:0; display:inline-block; }

/* disabled state */
.attach-btn[disabled]{
  opacity:.55; cursor:not-allowed; border-color: var(--gray-light);
  color:#9aa0a6;
}

/* list stays the same */
.attach-list{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
/* Screen-reader only text */
.sr-only{
  position:absolute !important; width:1px !important; height:1px !important;
  padding:0 !important; margin:-1px !important; overflow:hidden !important;
  clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important;
}

/* --- Form status placement and fade --- */
.form-status{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:1.25em;
  margin-left:8px;
  opacity:0;
  visibility:hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.form-status.is-visible{
  opacity:1;
  visibility:visible;
}

/* States */
.form-status--ok{ color:#1a7f37; }     /* green */
.form-status--error{ color:#b42318; }  /* red */
.form-status--progress{ color: var(--gray-dark); }

/* Icons */
.form-status svg{ width:18px; height:18px; display:inline-block }

/* Little spinner used for progress */
.spinner{
  width:16px; height:16px; display:inline-block; border-radius:50%;
  border:2px solid currentColor; border-right-color: transparent;
  animation: sa-spin .8s linear infinite;
}
@keyframes sa-spin{ to{ transform: rotate(360deg); } }

/* ===== Shared form utilities ===== */

/* Disabled buttons visibly gray out */
.btn:disabled,
.btn[disabled]{
  background:#f3f4f6 !important;
  color:#9aa0a6 !important;
  border-color: var(--gray-light) !important;
  cursor:not-allowed !important;
  box-shadow:none !important;
  pointer-events:none !important;
}
.btn--outline:disabled,
.btn--outline[disabled]{
  background:var(--surface) !important;
  color:#9aa0a6 !important;
  border-color: var(--gray-light) !important;
}

/* Required star */
.req{ color:var(--red); margin-left:.25ch; font-weight:800 }

/* Actions row + right-aligned "* Required" */
.form-actions{ display:flex; gap:12px; align-items:center; flex-wrap:wrap }
.form-required-note{ margin-left:auto; color:var(--gray-dark); opacity:.8; font-size:.95rem }

/* Overlay success state shared by support/contact forms */
.collapsible__body{ position:relative; }
.ticket-success{
  position:absolute; inset:0; display:none; align-items:center; justify-content:center;
  background:rgba(12,14,18,.7); border-radius:12px; z-index:5;
  backdrop-filter:blur(2px);
}
.ticket-success.is-visible{ display:flex; }
.ticket-success[hidden]{ display:none !important; }
.ticket-success__box{
  background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:22px 24px;
  text-align:center; max-width:420px; width:100%;
  box-shadow:0 20px 40px rgba(0,0,0,.35);
}
.ticket-success__icon{
  width:54px; height:54px; border-radius:50%; border:2px solid var(--red);
  display:inline-flex; align-items:center; justify-content:center; color:var(--red);
  font-size:28px; font-weight:800; margin:0 auto 10px;
}
.ticket-success__title{ font-weight:800; font-size:1.1rem; margin-bottom:6px; color:var(--black); }
.ticket-success__text{ color:var(--gray-dark); margin-bottom:14px; }
.collapsible__body.is-overlay .support-form{ filter:blur(3px); opacity:.45; pointer-events:none; }
.collapsible__body.is-overlay .howto-toggle{ opacity:.25; pointer-events:none; }

/* =========================================================
   Shared: Quick-access card grid (support + contact pages)
   ========================================================= */
.support-quick-grid{ align-items:stretch }
.support-quick-card{
  display:flex; flex-direction:column; gap:8px; padding:24px;
  text-align:center; align-items:center; position:relative;
}
.support-quick-card h3{ margin:0 0 4px; font-size:1.1rem }
.support-quick-card p{ color:var(--gray-dark); margin:0; font-size:.95rem; line-height:1.55; flex:1 }
.support-quick-icon{ font-size:2rem; line-height:1; margin-bottom:8px }
.quick-card-action{
  padding-top:16px; display:flex; flex-direction:column;
  align-items:center; gap:8px; width:100%;
}
.quick-card-action .btn{ white-space:nowrap }

/* =========================================================
   Shared: Stat card (homepage hero + About Us)
   ========================================================= */
.stat-card{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:18px; box-shadow:0 10px 24px rgba(0,0,0,.12); display:grid; gap:10px }
.stat{ display:flex; gap:10px; align-items:baseline; color:var(--gray-dark) }
.stat span{ font-size:1.6rem; font-weight:800; color:var(--red) }

/* =========================================================
   Shared: Feature grid (homepage, About Us, Tech Tips)
   ========================================================= */
.feature-grid .feature{ text-align:left; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:18px }
.feature__icon{ font-size:1.4rem; line-height:1; margin-bottom:6px }
.feature-grid .feature p{ color:var(--gray-dark) }

/* =========================================================
   Shared: Industry card grid (homepage, About Us)
   ========================================================= */
.industry-grid .card--industry{ text-align:center; padding:28px 20px }
.industry-icon{ font-size:2rem; line-height:1; margin-bottom:12px }
.card--industry h4{ margin:0 0 8px 0; font-size:1.05rem }
.card--industry p{ color:var(--gray-dark); margin:0; font-size:.95rem; line-height:1.55 }

/* =========================================================
   Shared: Final CTA section (homepage, About Us, Tech Tips)
   ========================================================= */
.section--cta .cta{ text-align:center }
.section--cta .cta h2{ margin:0 0 6px 0; font-size:2rem }
.section--cta .cta .lead{ color:var(--gray-dark); margin-bottom:12px }
.cta__buttons{ display:inline-flex; gap:12px; flex-wrap:wrap }
.cta__note{ margin-top:12px; font-size:.85rem; color:var(--gray-dark) }

/* =========================================================
   Mobile polish (max-width only — desktop layout untouched)
   ========================================================= */

/* Tighter section padding on small phones */
@media (max-width: 640px) {
  .section { padding: 48px 0; }
  .section.section--alt { padding-top: 40px; padding-bottom: 40px; }
}

/* Center .cta-row button groups on mobile */
@media (max-width: 720px) {
  .cta-row { justify-content: center; }
}

/* Card-level accent stripe: reduce left padding so content isn't cramped on mobile */
@media (max-width: 640px) {
  .card--accent { padding-left: 14px; }
}