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

/* 0) Variables / Base reset */
:root{
  --red:#aa1e2e; --orange:#f26829; --black:#231f20;
  --gray-dark:#58595b; --gray-light:#d1d3d4;
  --bg:#ffffff; --panel:#f7f9fc; --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 }
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 }

/* 1) Header / Navigation (desktop defaults) */
.nav{ position:sticky; top:0; z-index:1200; background:#fff; border-bottom:1px solid var(--border) }
.nav__inner{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; min-height:72px; gap:24px }
.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:28px; 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 }

/* 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:#fff; 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:#fff; 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 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:900px){
  /* 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:#fff; z-index:1201; overflow:auto; -webkit-overflow-scrolling:touch;
    padding:16px 18px 28px; 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 */
  .nav.nav--open .menu__mobile-cta{
    display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:6px 0 16px;
  }
  .menu__mobile-cta .btn--primary{ grid-column:1 / -1; padding:16px 18px }
  .menu__mobile-cta .btn--outline{ padding:14px 18px }

  /* 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:901px){
  .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-color:transparent }
.btn-primary:hover{ background:var(--orange) }
.btn-outline{ background:#fff; color:var(--red); border-color:var(--red) }
.btn-outline:hover{ background:var(--red); color:#fff }
/* Temporary compatibility aliases */
.btn--primary{ background:var(--red); color:#fff; border:2px solid transparent }
.btn--primary:hover{ background:var(--orange) }
.btn--outline{ background:#fff; color:var(--red); border:2px solid var(--red) }
.btn--outline:hover{ background:var(--red); color:#fff }

/* 3) Hero (shared base) */
.hero{ position:relative; padding:84px 0; overflow:hidden }
.hero--light{ background:#fff }
.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 }
.hero__inner{ position:relative; z-index:1; display:grid; grid-template-columns:1.1fr .9fr; gap:32px; align-items:center }
.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) }
}

/* 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{ padding:64px 0 }
.section--alt{ background:var(--panel) }
.section__head{ margin-bottom:22px; text-align:center }
.section__head h2{ margin:0 0 6px 0; font-size:2rem }
.section__head .lead{ color:var(--gray-dark) }

.grid{ display:grid; gap:28px }
.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 } }
.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:#fff; border:1px solid var(--border); border-radius:12px; padding:18px; transition:transform .15s ease, box-shadow .2s ease }
.card:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.06) }
.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:#fff;
}
.badge--solid{ background:var(--red); color:#fff; border-color:var(--red) }
.badge--muted{ border-color:var(--gray-light); color:var(--gray-dark); background:#fff }
.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:#fff; 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; 
  align-items:center; 
  justify-content:center; 
  padding:8px 0;
}
.footer__brand img{
  width: clamp(200px, 72%, 320px);       /* responsive width, keeps logo tidy */
  height:auto;
}
.footer__brand p{ display:none }
.footer__bar{ border-top:1px solid var(--border); font-size:.9rem; color:var(--gray-dark); padding:12px 0; text-align:center }
.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::after{
  background:linear-gradient(to right,
    rgba(0,0,0,0.24) 0%,
    rgba(0,0,0,0.14) 45%,
    rgba(0,0,0,0.06) 100%);
}
.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:#fff; 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{ margin:0; display:grid; gap:12px }
.faq dt{
  background:#fff; 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:#fff; 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:#fff; border:1px solid var(--border);
  border-radius:999px; padding:8px 12px;
}

/* 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:#fff; 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:18px }
.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) }
@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 }
.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; }

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

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

/* Shared form layout */
.support-form .form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.support-form .form-grid .full{ grid-column:1 / -1; }
.support-form label span{ display:block; 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:#fff; 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:#fff; 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; }
/* Inline form status */
.form-status{
  display:inline-flex; gap:6px; align-items:center; margin-left:8px;
  font-weight:800; min-height:24px; vertical-align:middle;
}
.form-status svg{ width:18px; height:18px; }
.form-status--ok{ color:#1a7f37; }       /* accessible green */
.form-status--error{ color:#aa1e2e; }
/* Required marker */
.req{ color: var(--red); font-weight: 800; margin-left: 0.25ch; }

/* 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;
}
/* inline required marker next to label text */
.support-form .req{
  display:inline;            /* ensure it doesn't wrap to a new line */
  color: var(--red);
  font-weight:800;
  margin-left: 0.25ch;
}

/* actions row: keep buttons left, note on the far right */
.support-form .form-actions{
  display:flex;
  align-items:center;
  gap:12px;
}
.support-form .form-actions .form-required-note{
  margin-left:auto;           /* push to right edge */
  color: var(--gray-dark);
  font-size:.95rem;
  white-space:nowrap;
}
/* --- Disabled buttons: gray-out and no hover --- */
.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:#fff !important;
  color:#9aa0a6 !important;
  border-color: var(--gray-light) !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); } }

/* Attachment note: actually muted */
.attachments .attach-note,
.attach-note.muted{
  color: var(--gray-dark);
  opacity: .7;
  font-size: .92rem;
}
/* ===== 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:#fff !important;
  color:#9aa0a6 !important;
  border-color: var(--gray-light) !important;
}

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

/* 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 }

/* Status chip with 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 }
.form-status--ok{ color:#1a7f37 }
.form-status--error{ color:#b42318 }
.form-status--progress{ color:var(--gray-dark) }
.form-status svg{ width:18px; height:18px; display:inline-block }

/* Small spinner */
.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); } }