:root {
  /* Black + Electric Blue palette. --navy kept as the var name (avoids churn across the
     stylesheet) but now holds the near-black charcoal used for the header wordmark box,
     hero left panel, footer, and CTA bands. --accent is electric blue; --accent-dark is
     the deeper blue used for hover states and small-text-on-white contrast. */
  --navy:#14181f; --navy-dark:#0b0d11; --accent:#2b8fff; --accent-dark:#1667d6; --bg:#f5f7fa;
  --ink:#14181f; --muted:#5b6472; --line:#d6deea; --line-soft:#e2e8f2; --card:#fff;
}
* { box-sizing:border-box } body { margin:0; font-family:system-ui,-apple-system,'Segoe UI',sans-serif; background:var(--bg); color:var(--ink) }
.hd { position:sticky; top:0; z-index:50; display:flex; justify-content:space-between; align-items:center;
  padding:14px 24px; background:#fff; border-bottom:1px solid var(--line); flex-wrap:wrap; gap:10px; box-shadow:0 2px 12px rgba(20,24,31,.06) }
.hd .brand { color:var(--navy); font-weight:700; text-decoration:none; display:inline-flex; align-items:center }
.hd .brand-tenant { color:var(--muted); font-weight:400; margin-left:4px }

/* --- Main nav: mega-menu (Repairs / Services / Shop) + plain links + right cluster --- */
.hd-nav { display:flex; align-items:center; flex:1; justify-content:flex-end; gap:20px; flex-wrap:wrap }
.hd-menu { display:flex; align-items:center; gap:4px }
.hd-menu a.nav-link { color:var(--navy); margin-left:14px; text-decoration:none; font-size:.94rem; font-weight:600 }
.hd-menu a.nav-link:hover { color:var(--accent-dark) }
.hd-right { display:flex; align-items:center }
.hd-right a.lang { border:1px solid var(--line); color:var(--muted); border-radius:14px; padding:3px 10px; font-size:.8rem; text-decoration:none; margin-left:6px }
.hd-right a.nav-cta { margin-left:20px; background:var(--accent); color:#fff; padding:9px 18px; border-radius:9px; font-weight:700; box-shadow:0 8px 18px rgba(43,143,255,.3); text-decoration:none }
.hd-right a.nav-cta:hover { filter:brightness(1.08); color:#fff }
.hd-phone { display:flex; flex-direction:column; line-height:1.25; text-align:right; margin-left:22px }
.hd-phone-label { font-size:.68rem; color:var(--muted); font-weight:600 }
.hd-phone-num { font-size:.88rem; font-weight:800; color:var(--navy); text-decoration:none }

/* --- Mega-menu dropdowns: CSS-only on desktop (:hover / :focus-within) --- */
.hd-item { position:relative }
.hd-mega { display:inline-flex }
.hd-toplink { display:inline-flex; align-items:center; gap:5px; margin-left:14px; padding:8px 2px; background:none;
  border:none; font:inherit; font-size:.94rem; font-weight:600; color:var(--navy); cursor:pointer }
.hd-toplink:hover { color:var(--accent-dark) }
.hd-chevron { width:9px; height:9px; color:var(--muted); transition:transform .15s ease }
.hd-mega:hover .hd-chevron, .hd-mega:focus-within .hd-chevron, .hd-mega.open .hd-chevron { transform:rotate(180deg); color:var(--accent) }
.hd-dropdown {
  position:absolute; top:calc(100% + 8px); left:14px; min-width:220px; background:#fff; border:1px solid var(--line);
  border-radius:12px; box-shadow:0 18px 40px rgba(20,24,31,.18); padding:12px; z-index:55;
  opacity:0; visibility:hidden; transform:translateY(6px); pointer-events:none;
  transition:opacity .12s ease, transform .12s ease;
}
.hd-mega:hover .hd-dropdown, .hd-mega:focus-within .hd-dropdown, .hd-mega.open .hd-dropdown {
  opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto;
}
.hd-dropdown a { display:block; padding:8px 10px; border-radius:8px; color:var(--ink); text-decoration:none; font-size:.88rem; font-weight:600; white-space:nowrap }
.hd-dropdown a:hover, .hd-dropdown a:focus-visible { background:#eef2f7; color:var(--accent-dark) }
.hd-dropdown-note { border-top:1px solid var(--line-soft); margin-top:6px; padding-top:6px }
.hd-dropdown-note a { color:var(--muted); font-size:.8rem; font-weight:600; white-space:normal }
.hd-dropdown-soon { display:block; padding:8px 10px; color:var(--muted); font-weight:600; font-size:.88rem; font-style:italic; white-space:nowrap }
/* the Shop menu sits at the right edge of the bar — open it leftward so it never overflows offscreen */
.hd-dropdown-shop { left:auto; right:0; min-width:200px }

/* --- Illustrated mega-menus: 2-column grid of picture-tile items (uBreakiFix-style layout,
   original CellSpot artwork) --- */
/* max-width also clamped to the viewport (min() against 100vw) so a mega-panel can never
   hang off the right edge on any in-between desktop width, not just the ones covered by the
   two explicit breakpoints below. */
.hd-mega-panel { min-width:480px; max-width:min(580px, calc(100vw - 28px)); padding:14px }
.hd-mega-grid { display:grid; grid-template-columns:1fr 1fr; gap:4px 14px }
/* Specificity note: qualified as ".hd-mega-panel .hd-tile" (2 classes) so this flex-row
   layout beats the generic ".hd-dropdown a { display:block }" rule above (1 class + 1
   element) — otherwise the tile would collapse to a block anchor and the icon/text stack
   vertically instead of sitting side by side. */
.hd-mega-panel .hd-tile {
  display:flex; align-items:center; gap:12px; padding:8px; border-radius:12px;
  color:var(--ink); text-decoration:none; white-space:normal;
}
.hd-mega-panel .hd-tile:hover, .hd-mega-panel .hd-tile:focus-visible { background:#eaf2ff }
.hd-tile-ico {
  flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  width:56px; height:56px; border-radius:14px; overflow:hidden;
}
.hd-tile-ico .thumb-ico { width:56px; height:56px; display:block }
.hd-tile-ico-sm { width:30px; height:30px; border-radius:9px }
.hd-tile-ico-sm .thumb-ico { width:30px; height:30px }
.hd-tile-txt { display:flex; flex-direction:column; gap:2px; min-width:0 }
.hd-tile-txt strong { font-size:.86rem; font-weight:700; color:var(--navy); line-height:1.25 }
.hd-tile-txt small { font-size:.74rem; color:var(--muted); font-weight:500; line-height:1.3 }
.hd-mega-note {
  display:flex; align-items:center; gap:10px; padding:9px 8px 2px; color:var(--muted);
  font-size:.8rem; font-weight:600; text-decoration:none;
}
.hd-mega-note:hover { color:var(--accent-dark) }
.hd-tile-static { cursor:default }
.hd-tile-static:hover { background:none }
.hd-dropdown-shop.hd-mega-panel { min-width:280px; max-width:min(320px, calc(100vw - 28px)) }
/* Medium desktop widths (just above the mobile breakpoint): keep the panel narrow and
   single-column so it can never run off the right edge of the viewport before there's
   room for the full 2-column layout. Upper bound is 1024px (inclusive) so the common
   1024x768 tablet-landscape/laptop viewport gets the narrow treatment too. */
@media (min-width:761px) and (max-width:1024px) {
  .hd-mega-panel { min-width:300px; max-width:min(340px, calc(100vw - 28px)) }
  .hd-mega-grid { grid-template-columns:1fr }
}

.hd-burger { display:none; background:none; border:none; color:var(--navy); cursor:pointer; padding:6px; margin-left:12px; border-radius:6px }
.hd-burger:hover { background:#eef2f7 }

@media (max-width:760px) {
  .hd { padding:12px 16px }
  .hd-nav { position:static; flex:none; gap:0 }
  .hd-right { margin-left:auto }
  .hd-right a.lang { display:none }
  .hd-phone { display:none }
  .hd-right a.nav-cta { margin-left:10px; padding:8px 14px; font-size:.86rem }
  .hd-burger { display:inline-flex; align-items:center; justify-content:center }

  /* top uses --hd-h (set by nav.js from the header's real, measured height) instead of a
     fixed guess — the header can wrap to 2 rows at narrow widths, and a hardcoded offset
     would let the sliding panel cover the lower part of the header (incl. the burger
     button itself, making it unclickable while "open"). --hd-h falls back to 64px if JS
     hasn't run yet. bottom is trimmed to 92px (clear of the always-on chat fab) and further
     to 190px whenever the first-visit cookie banner is showing, so the open menu never
     geometrically sits under either of them. */
  .hd-menu {
    position:fixed; top:var(--hd-h, 64px); left:0; right:0; bottom:92px; z-index:55; background:#fff;
    flex-direction:column; align-items:stretch; gap:0; padding:10px 18px 24px; overflow-y:auto;
    transform:translateX(-100%); transition:transform .2s ease; box-shadow:2px 0 24px rgba(20,24,31,.15);
  }
  .hd-menu.open { transform:translateX(0) }
  body:has(#cookie:not([hidden])) .hd-menu { bottom:190px }
  .hd-item, .hd-mega { display:block; width:100% }
  .hd-toplink { width:100%; margin-left:0; justify-content:space-between; padding:14px 4px; border-bottom:1px solid var(--line-soft) }
  .hd-menu a.nav-link { display:block; width:100%; margin-left:0; padding:14px 4px; border-bottom:1px solid var(--line-soft) }
  .hd-dropdown {
    position:static; opacity:1; visibility:visible; pointer-events:auto; transform:none; box-shadow:none;
    border:none; border-radius:0; padding:2px 0 6px 12px; display:none; min-width:0;
  }
  .hd-mega.open .hd-dropdown { display:block }
  .hd-dropdown-shop { right:auto }

  /* Icon mega-menus on mobile: single-column stacked list, icon + label, descriptions hidden to save space */
  .hd-mega-panel { min-width:0; max-width:none; padding:0 }
  .hd-mega-grid { grid-template-columns:1fr; gap:0 }
  .hd-mega-panel .hd-tile { padding:10px 4px; align-items:center; border-radius:0 }
  .hd-tile-txt small { display:none }
  .hd-mega-note { padding:10px 4px }
  .hd-dropdown-shop.hd-mega-panel { min-width:0; max-width:none }
}
main { max-width:1080px; margin:0 auto; padding:32px 20px; min-height:60vh }
.ft { background:var(--navy-dark); color:#9db2cc; text-align:center; padding:28px 20px 20px; font-size:14px }
.ft a { color:#cfe0f5 } .sep { margin:0 8px }
.ftnote { margin-top:8px; font-size:12px }
.ftcopy { margin-top:10px; font-size:12px; letter-spacing:.04em; color:#7488a3 }
.ftnav { display:flex; flex-wrap:wrap; justify-content:center; gap:6px 18px; margin-bottom:16px; padding-bottom:16px; border-bottom:1px solid rgba(255,255,255,.1) }
.ftnav a { text-decoration:none; font-weight:600 }

/* --- Wordmark: boxed "C" + letterspaced "ELLSPOT" + small "REPAIR" descriptor --- */
.wm { display:inline-flex; align-items:center; gap:9px; line-height:1 }
.wm-c { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px;
  background:linear-gradient(155deg, var(--accent), var(--accent-dark)); border-radius:8px; color:#fff; font-weight:800;
  font-size:1.02rem; box-shadow:0 5px 12px rgba(43,143,255,.35) }
.wm-rest { font-weight:800; letter-spacing:.08em; font-size:1rem; display:inline-flex; flex-direction:column; gap:1px }
.wm-sub { display:block; font-weight:600; letter-spacing:.22em; font-size:.5rem; color:var(--accent-dark) }

/* --- Demo mode banner (workers.dev preview) --- */
.demo-banner { background:var(--accent); color:#fff; text-align:center; padding:8px 14px; font-size:.85rem;
  font-weight:700; display:flex; justify-content:center; align-items:center; gap:12px; flex-wrap:wrap }
.demo-banner a { color:#fff; text-decoration:underline; font-weight:600 }
/* Stacking order intent, top to bottom: #cookie(70) > .cart-drawer(65) > .ai-panel(61) >
   .ai-fab(60) > header/mega-menus(~50-55) > page content. Consent must win every collision. */
#cookie { position:fixed; bottom:16px; left:16px; right:16px; max-width:520px; margin:auto; background:#fff;
  border:1px solid #d6deea; border-radius:10px; padding:14px; display:flex; gap:10px; align-items:center;
  box-shadow:0 6px 24px rgba(0,0,0,.15); z-index:70 }
#cookie[hidden] { display:none }
#cookie button { padding:8px 14px; border-radius:8px; border:1px solid var(--navy); background:#fff; cursor:pointer }
#cookie #ck-a { background:var(--navy); color:#fff }
.hero { font-size:2rem; font-weight:800; color:var(--navy); margin:0 0 8px; line-height:1.15 }
.hero-sub { font-size:1.05rem; margin:0 0 4px; max-width:640px }
.cta { display:inline-block; margin-top:16px; background:var(--accent); color:#fff; padding:12px 22px; border-radius:10px; text-decoration:none; font-weight:700; border:none; cursor:pointer }
.cta:hover { filter:brightness(1.06) }
.cta-outline { background:transparent; border:2px solid var(--navy); color:var(--navy); margin-left:10px }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 }

/* --- Base icon sizing shared by category chips / devicetypes cards --- */
.cat-icon { width:38px; height:38px; color:var(--accent) }
.arrow-icon { width:18px; height:18px }

/* =========================================================================
   Mockup C "Bold Split" hero — navy-left / teal-tinted-right, full-bleed.
   ========================================================================= */
.heroc {
  width:100vw; position:relative; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw;
  display:grid; grid-template-columns:1fr; min-height:460px; margin-bottom:56px;
}
main > .heroc:first-child { margin-top:-32px }
@media (min-width:860px) { .heroc { grid-template-columns:1fr 1fr; min-height:520px } }

.heroc-left {
  background:radial-gradient(1000px 600px at 0% 0%, #163459 0%, var(--navy) 55%, #0a1a30 100%);
  color:#fff; padding:56px 24px 76px; display:flex; flex-direction:column; justify-content:center; position:relative;
}
@media (min-width:860px) { .heroc-left { padding:64px 24px 84px 48px } }
.heroc-left::after {
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px); background-size:22px 22px;
}
.heroc-left > * { position:relative }
.heroc-eyebrow {
  display:inline-flex; align-items:center; gap:8px; background:rgba(43,143,255,.16); border:1px solid rgba(43,143,255,.4);
  color:#8fc4ff; font-weight:700; font-size:.78rem; padding:7px 14px; border-radius:100px; width:fit-content; margin-bottom:22px;
}
.heroc-dot { width:7px; height:7px; border-radius:50%; background:var(--accent) }
.heroc-h1 { font-size:1.9rem; line-height:1.1; letter-spacing:-.02em; margin:0 0 16px; font-weight:800; color:#fff }
.heroc-h1 em { color:#6fb3ff; font-style:normal }
.heroc-h1-tenant { font-size:2.1rem }
@media (min-width:860px) { .heroc-h1 { font-size:2.7rem } .heroc-h1-tenant { font-size:2.5rem } }
.heroc-subhead { font-size:1.02rem; line-height:1.6; color:#c3cfdc; max-width:440px; margin:0 0 26px }
.heroc-hours { color:#c3cfdc; margin:0 0 6px }
.heroc-tel { color:#8fc4ff; font-weight:700; text-decoration:none }
.heroc-ctas { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:22px }
.heroc-ctas .cta { margin-top:0 }
.heroc-ctas .cta-outline-light { background:transparent; border:2px solid rgba(255,255,255,.55); color:#fff }
.heroc-ctas .cta-outline-light:hover { border-color:#fff; filter:none }
.heroc-trustline { display:flex; align-items:center; gap:9px; font-size:.86rem; color:#a9bbcd; font-weight:600 }
.heroc-trustline svg { color:var(--accent); flex:none }
.heroc-directions { display:inline-block; margin-top:12px; color:#cfe0f5; text-decoration:underline; font-size:.9rem }

.heroc-right {
  position:relative; overflow:hidden; min-height:340px;
  background:
    radial-gradient(circle at 25% 20%, rgba(255,255,255,.4), transparent 45%),
    linear-gradient(150deg, #dbe8ff 0%, #c7dcfb 45%, #aecdf2 100%);
}
/* navy->transparent bleed from the left column into the video panel, layered ABOVE the video
   but BELOW the diagonal texture + ribbon, so the split seam reads as one cohesive design and
   the left column's text never loses contrast at the edge. */
.heroc-right::before {
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, rgba(20,24,31,.5) 0%, rgba(20,24,31,0) 16%);
}
.heroc-right::after {
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background-image:repeating-linear-gradient(135deg, rgba(20,24,31,.045) 0 2px, transparent 2px 26px);
}

/* --- Rating ribbon straddling the split --- */
.heroc-ribbon {
  position:absolute; left:50%; bottom:-24px; transform:translateX(-50%);
  background:#fff; border-radius:100px; box-shadow:0 14px 34px rgba(20,24,31,.18);
  display:flex; align-items:center; gap:10px; padding:11px 22px; z-index:10; border:1px solid var(--line);
  white-space:nowrap; max-width:calc(100% - 32px);
}
.heroc-ribbon-stars { display:flex; gap:2px; color:#f5a623; flex:none }
.heroc-ribbon-text b { font-size:.92rem; color:var(--navy); font-weight:800 }
.heroc-ribbon-text span { font-size:.78rem; color:var(--muted); font-weight:600 }
@media (max-width:640px) {
  .heroc-ribbon { flex-direction:column; text-align:center; gap:6px; padding:10px 18px; bottom:-30px; white-space:normal }
}

/* --- Browse-by-category chip scroller --- */
.cat-section { padding:56px 0 18px }
.cat-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:20px; flex-wrap:wrap }
.cat-head h2 { font-size:1.35rem; color:var(--navy); margin:0; font-weight:800; letter-spacing:-.01em }
.cat-head span { font-size:.84rem; color:var(--muted); font-weight:600 }
.cat-scroller { display:flex; gap:12px; overflow-x:auto; padding-bottom:10px; scrollbar-width:thin }
.cat-pill {
  flex:none; display:flex; align-items:center; gap:9px; background:#fff; border:1px solid var(--line);
  padding:12px 20px; border-radius:100px; font-weight:700; font-size:.86rem; color:var(--navy);
  box-shadow:0 4px 14px rgba(20,24,31,.06); text-decoration:none; transition:border-color .15s ease, transform .15s ease;
}
.cat-pill:hover { border-color:var(--accent); transform:translateY(-2px) }
.cat-pill .cat-icon { width:19px; height:19px; color:var(--accent) }

/* --- Popular repairs: Mockup C price cards --- */
.repair-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px }
@media (min-width:640px) { .repair-grid { grid-template-columns:repeat(3,1fr); gap:20px } }
.repair-card {
  border:1px solid var(--line); border-radius:16px; padding:18px 18px 16px; background:var(--card);
  box-shadow:0 4px 14px rgba(20,24,31,.06); display:flex; flex-direction:column; gap:12px;
}
.repair-top { display:flex; align-items:center; justify-content:space-between; gap:8px }
.repair-ic { width:38px; height:38px; flex:none; border-radius:10px; background:#e8f2ff; color:var(--accent);
  display:flex; align-items:center; justify-content:center }
.repair-ic .cat-icon { width:20px; height:20px }
.repair-price { font-size:1.15rem; font-weight:800; color:var(--navy) }
.repair-card h3 { margin:0; font-size:.96rem; color:var(--navy); font-weight:700 }
.device-name { font-size:.72rem; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.04em }
.repair-book { margin-top:2px; font-size:.85rem; font-weight:700; color:var(--accent-dark); display:inline-flex; align-items:center; gap:6px; text-decoration:none }
.repair-book:hover { text-decoration:underline }
.repair-book .arrow-icon { width:13px; height:13px }

/* =========================================================================
   Animated hero panel — REAL looping MP4/WebM video (see the
   AnimatedRepairHero component in src/pages/sections.tsx for the <video>
   markup, the /hero.mp4 + /hero.webm + /hero-poster.jpg assets in public/,
   and a comment on swapping in real footage later). The video FILLS the
   entire `.heroc-right` panel (z-index:0, base layer) and sits BEHIND the
   navy bleed (.heroc-right::before, z-index:1), the diagonal texture
   overlay (.heroc-right::after, z-index:2) and the rating ribbon
   (.heroc-ribbon, z-index:10) — all three still render on top, unchanged.
   ========================================================================= */
/* `.heroc-photo` IS the right panel now (not a small floating box inside
   it) — absolutely positioned to cover the panel's full width/height so the
   video reads as a large, obviously-a-video hero element instead of a tiny
   centered thumbnail. */
.heroc-photo { position:absolute; inset:0; z-index:0; overflow:hidden }
.hero-video, .hero-poster {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
}
.hero-poster { display:none } /* the <video poster> attr supplies the still frame */

/* Accessibility: reduced-motion users are NOT auto-animated, but the video
   still renders (showing its poster frame) and heroplay.js reveals the ▶
   button so they can play it on demand. We never hide the video outright —
   that left reduced-motion users staring at a dead still with no way to play.
   A gentle pulse draws the eye to the play affordance. */
@media (prefers-reduced-motion: reduce) {
  .hero-play:not([hidden]) { animation:none }
}
/* ▶ button — hidden until heroplay.js reveals it (reduced-motion, or autoplay
   blocked by the browser). A soft pulse makes it obviously interactive. */
@keyframes heroPlayPulse { 0%,100%{ box-shadow:0 6px 20px rgba(0,0,0,.28),0 0 0 0 rgba(43,143,255,.45) } 50%{ box-shadow:0 6px 20px rgba(0,0,0,.28),0 0 0 14px rgba(43,143,255,0) } }
.hero-play {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:64px; height:64px; border-radius:50%; border:none; cursor:pointer; z-index:5;
  background:var(--accent, #2b8fff); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 20px rgba(0,0,0,.28); animation:heroPlayPulse 2.4s ease-in-out infinite;
}
.hero-play[hidden] { display:none }
.hero-play:hover { filter:brightness(1.05) }

@media (max-width:860px) {
  /* Right panel stacks below the hero text on mobile; without the desktop
     grid row to stretch into, give it an explicit wide-banner aspect ratio
     so the video still reads as a large, prominent element full-width
     instead of shrinking to a tiny box. */
  .heroc-right { min-height:0; aspect-ratio:16/10; }
}

/* --- Trust grid: 4 benefit cards with SVG icons --- */
.trust-cards { display:grid; grid-template-columns:1fr; gap:14px }
@media (min-width:640px) { .trust-cards { grid-template-columns:repeat(2,1fr) } }
@media (min-width:960px) { .trust-cards { grid-template-columns:repeat(4,1fr) } }
.trust-card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:22px 20px;
  display:flex; flex-direction:column; gap:8px }
.trust-card-icon { display:inline-flex; width:40px; height:40px; align-items:center; justify-content:center;
  border-radius:10px; background:#e8f2ff; color:var(--accent) }
.trust-card-icon svg { width:24px; height:24px }
.trust-card h3 { margin:0; color:var(--navy); font-size:1rem }
.trust-card p { margin:0; color:var(--muted); font-size:.88rem }

/* --- Store locator promo band --- */
.locator-band { text-align:center; background:linear-gradient(135deg,#eef4ff,#f4f8fc); border:1px solid var(--line);
  border-radius:16px; padding:38px 24px }
.locator-band h2 { margin-bottom:8px }
.locator-band p { color:var(--muted); max-width:520px; margin:0 auto }
.locator-band .note { margin-top:8px }
.locator-band .cta { margin-top:18px }

/* --- Device repair types grid (7 cards, icon + description) --- */
.devicetypes-grid { display:grid; grid-template-columns:1fr; gap:14px }
@media (min-width:560px) { .devicetypes-grid { grid-template-columns:repeat(2,1fr) } }
@media (min-width:860px) { .devicetypes-grid { grid-template-columns:repeat(3,1fr) } }
@media (min-width:1180px) { .devicetypes-grid { grid-template-columns:repeat(4,1fr) } }
.devicetype-card { display:flex; flex-direction:column; gap:8px; background:var(--card); border:1px solid var(--line);
  border-radius:14px; padding:20px; text-decoration:none; color:var(--ink);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease }
.devicetype-card:hover { transform:translateY(-4px); box-shadow:0 10px 24px rgba(20,24,31,.12); border-color:var(--accent) }
.devicetype-card .cat-icon { width:30px; height:30px }
.devicetype-card h3 { margin:6px 0 0; color:var(--navy); font-size:1rem }
.devicetype-card p { margin:0; color:var(--muted); font-size:.86rem }

/* --- "What We Fix" services grid: 8 cards, icon + name + one-line description --- */
.section-sub { color:var(--muted); margin:-10px 0 22px; max-width:640px; font-size:.96rem }
.services-grid { display:grid; grid-template-columns:1fr; gap:14px }
@media (min-width:560px) { .services-grid { grid-template-columns:repeat(2,1fr) } }
@media (min-width:860px) { .services-grid { grid-template-columns:repeat(3,1fr) } }
@media (min-width:1180px) { .services-grid { grid-template-columns:repeat(4,1fr) } }
.service-card { display:flex; flex-direction:column; gap:8px; background:var(--card); border:1px solid var(--line);
  border-radius:14px; padding:20px; text-decoration:none; color:var(--ink);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease }
.service-card:hover { transform:translateY(-4px); box-shadow:0 10px 24px rgba(20,24,31,.12); border-color:var(--accent) }
.service-card .cat-icon { width:30px; height:30px }
.service-card h3 { margin:6px 0 0; color:var(--navy); font-size:1rem }
.service-card p { margin:0; color:var(--muted); font-size:.86rem }

/* --- How It Works: numbered circles with a connecting line --- */
.how-steps { position:relative }
@media (min-width:760px) {
  .how-steps::before {
    content:''; position:absolute; top:36px; left:calc(100%/6); right:calc(100%/6); height:2px;
    background:repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 14px); z-index:0;
  }
}
.how-step { position:relative; z-index:1 }

/* --- AI callout: card with chat-bubble SVG icon --- */
.ai-callout { align-items:flex-start; background:#eef4ff; border:1px solid #9cc4ff; border-radius:16px; padding:22px 24px; gap:18px }
.ai-callout-icon { flex:0 0 auto }
.ai-icon { width:52px; height:52px }
.ai-callout-body { display:flex; flex-direction:column; gap:8px }
.ai-callout-body p { margin:0; color:#1155b0; font-weight:600 }
.ai-callout-hint { display:inline-flex; align-items:center; gap:6px; color:var(--accent-dark); font-weight:700; font-size:.9rem }
.ai-callout-hint .arrow-icon { width:16px; height:16px }

/* --- Reviews-ready band (honest placeholder, no fabricated quotes) --- */
.reviews-band { text-align:center; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:32px 22px }
.reviews-stars { display:block; color:#f5a623; font-size:1.6rem; letter-spacing:.15em; margin-bottom:10px }
.reviews-band p { margin:0; color:var(--muted); max-width:520px; margin:0 auto }

.store-card-icon { color:var(--accent); margin-bottom:2px }
.store-icon { width:28px; height:28px }

/* --- Footer: 4-column sitemap + contact line + legal trio + copyright --- */
.ftcols { display:grid; grid-template-columns:1fr; gap:22px; text-align:left; max-width:920px; margin:0 auto 22px }
@media (min-width:480px) { .ftcols { grid-template-columns:repeat(2,1fr) } }
@media (min-width:860px) { .ftcols.ftcols-4 { grid-template-columns:repeat(4,1fr) } }
.ftcol { display:flex; flex-direction:column; gap:8px }
.ftcol-h { color:#fff; font-weight:700; font-size:.82rem; text-transform:uppercase; letter-spacing:.05em; margin-bottom:2px }
.ftcol a { text-decoration:none; font-size:.88rem }
.ftcol a:hover { color:#fff }
.ftcontact { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:6px 10px; margin-bottom:6px; font-size:.88rem }
.ftcontact .ftcol-h { margin-bottom:0; margin-right:2px }
.ftcontact a { text-decoration:none }
.ftcontact a:hover { color:#fff }

/* --- Section rhythm --- */
.section { margin:44px 0 }
.section h2 { color:var(--navy); font-size:1.4rem; margin:0 0 18px }
.note { color:var(--muted) }

/* --- Card grids (mobile-first, responsive) --- */
.card-grid { display:grid; grid-template-columns:1fr; gap:14px }
@media (min-width:560px) { .card-grid { grid-template-columns:repeat(2,1fr) } }
@media (min-width:860px) { .card-grid { grid-template-columns:repeat(3,1fr) } }

.store-card, .popular-card { display:flex; flex-direction:column; gap:4px; background:var(--card); border:1px solid var(--line);
  border-radius:12px; padding:16px 18px; text-decoration:none; color:var(--ink) }
.store-card:hover, .popular-card:hover { border-color:var(--accent) }
.store-name { font-weight:700; color:var(--navy) }
.store-city, .store-address { color:var(--muted); font-size:.9rem }
.store-phone { color:var(--accent-dark); font-weight:600; font-size:.9rem }
.popular-name { font-weight:600 }
.popular-price { font-weight:800; color:var(--navy); font-size:1.15rem }

/* --- How It Works --- */
.how-steps { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr; gap:18px }
@media (min-width:760px) { .how-steps { grid-template-columns:repeat(3,1fr) } }
.how-step { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:20px }
.how-step h3 { margin:10px 0 6px; color:var(--navy); font-size:1.05rem }
.how-step p { margin:0; color:var(--muted); font-size:.92rem }
.how-num { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px;
  border-radius:50%; background:var(--accent); color:#fff; font-weight:800 }

/* --- Shop (Accessories catalog) --- */
.shop-online-banner { display:inline-block; background:#eef2f7; color:var(--navy); border:1px solid var(--line);
  border-radius:10px; padding:8px 14px; font-size:.88rem; font-weight:600; margin:0 0 18px }
.cart-toggle-btn { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--navy); background:#fff;
  color:var(--navy); padding:9px 16px; border-radius:9px; font-weight:700; font-size:.92rem; cursor:pointer; margin-bottom:22px }
.cart-toggle-btn:hover { background:#eef2f7 }
.shop-cat { margin:30px 0 }
.shop-cat-h { color:var(--navy); font-size:1.15rem; margin:0 0 14px; border-bottom:2px solid var(--line); padding-bottom:8px }
.shop-prod-grid { display:grid; grid-template-columns:1fr; gap:14px }
@media (min-width:560px) { .shop-prod-grid { grid-template-columns:repeat(2,1fr) } }
@media (min-width:860px) { .shop-prod-grid { grid-template-columns:repeat(3,1fr) } }
@media (min-width:1180px) { .shop-prod-grid { grid-template-columns:repeat(4,1fr) } }
.shop-card { display:flex; flex-direction:column; gap:8px; background:var(--card); border:1px solid var(--line);
  border-radius:14px; padding:18px }
.shop-card-ico { display:inline-flex; width:56px; height:56px }
.shop-card-name { margin:0; color:var(--navy); font-size:1rem }
.shop-card-desc { margin:0; color:var(--muted); font-size:.86rem; line-height:1.4; flex:1 }
.shop-card-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:6px }
.shop-card-price { font-weight:800; color:var(--navy); font-size:1.05rem }
.shop-add-btn { border:none; background:var(--accent); color:#fff; padding:8px 14px; border-radius:8px;
  font-weight:700; font-size:.86rem; cursor:pointer; white-space:nowrap }
.shop-add-btn:hover { filter:brightness(1.06) }
.shop-ctas { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin:26px 0 26px }
.shop-ctas .cta { margin-top:0 }
.shop-note { color:var(--muted); font-size:.92rem }

/* --- Cart drawer + summary (shop + checkout) --- */
.hd-right a.hd-cart { position:relative; display:inline-flex; align-items:center; color:var(--navy); margin-left:14px;
  padding:4px; text-decoration:none }
.cart-badge { position:absolute; top:-6px; right:-8px; min-width:16px; height:16px; padding:0 4px; border-radius:9px;
  background:var(--accent); color:#fff; font-size:.68rem; font-weight:800; line-height:16px; text-align:center }
.cart-toggle-btn .cart-badge, #cart-toggle-count { position:static; display:inline; background:none; color:inherit;
  padding:0; font-weight:700 }
/* z-index:65 — above the chat fab/panel (60/61) and the header/menus (~50) so the drawer
   reads on top of page content, but strictly below the cookie banner (70) so consent always
   wins if both are open at once (see #cookie below). Was previously tied at 70 with #cookie,
   which only happened to stack correctly because of DOM order — now it's unambiguous. */
.cart-drawer { position:fixed; top:0; right:0; bottom:0; width:340px; max-width:92vw; background:#fff;
  border-left:1px solid var(--line); box-shadow:-14px 0 32px rgba(20,24,31,.18); z-index:65;
  display:flex; flex-direction:column; padding:0 }
.cart-drawer[hidden] { display:none }
.cart-drawer-head { display:flex; align-items:center; justify-content:space-between; padding:16px 18px;
  border-bottom:1px solid var(--line-soft); color:var(--navy) }
.cart-close-btn { border:none; background:none; font-size:1.3rem; line-height:1; color:var(--muted); cursor:pointer }
.cart-items { flex:1; overflow-y:auto; padding:8px 18px }
.cart-summary-block .cart-items { flex:none; overflow:visible; padding:0; margin-bottom:8px; max-width:520px }
.cart-item { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 0;
  border-bottom:1px solid var(--line-soft); font-size:.9rem }
.cart-item-name { color:var(--ink) }
.cart-item-price { font-weight:700; color:var(--navy); white-space:nowrap }
.cart-item-remove { border:none; background:none; color:#c0392b; font-size:1.1rem; line-height:1; cursor:pointer; padding:0 0 0 8px }
.cart-empty { color:var(--muted); font-size:.9rem; padding:10px 0 }
.cart-drawer-foot { padding:14px 18px; border-top:1px solid var(--line-soft) }
.cart-total-row { display:flex; justify-content:space-between; font-weight:800; color:var(--navy); font-size:1.05rem; margin-bottom:12px; max-width:520px }
.cart-drawer-foot .cta { display:block; text-align:center; margin-top:0 }
.cart-summary-block { max-width:520px; margin:14px 0 22px }
.cart-summary-block h2 { font-size:1.05rem; color:var(--navy); margin:0 0 10px }

/* --- CTA banner (navy, pre-footer) --- */
.cta-banner { background:linear-gradient(135deg, var(--navy), var(--navy-dark)); color:#fff; border-radius:14px;
  padding:32px 26px; text-align:center }
.cta-banner h2 { color:#fff; margin:0 0 8px }
.cta-banner p { color:#d7e4f2; margin:0 0 4px }

/* --- Store locator --- */
.locator-state h2 { border-bottom:2px solid var(--line); padding-bottom:6px }
.locator-card { align-items:flex-start }
.locator-actions { display:flex; gap:8px; margin-top:8px; flex-wrap:wrap }
.btn-sm { display:inline-block; border:1px solid var(--navy); color:var(--navy); background:#fff;
  padding:7px 14px; border-radius:8px; text-decoration:none; font-size:.85rem; font-weight:700 }
.btn-sm-primary { background:var(--accent); border-color:var(--accent); color:#fff }
.tel-link { color:var(--accent-dark); font-weight:700; text-decoration:none }
.chip { border:1px solid var(--navy); border-radius:20px; padding:8px 16px; text-decoration:none; color:var(--navy); background:#fff }
.chip.on { background:var(--navy); color:#fff }
table.prices { width:100%; border-collapse:collapse; margin-top:10px }
table.prices td { padding:10px; border-bottom:1px solid #e2e8f2 } td.price { text-align:right; font-weight:800; color:var(--navy) }

.hp { position:absolute; left:-9999px; top:-9999px; width:1px; height:1px; opacity:0 }
.summary { background:#fff; border:1px solid #d6deea; border-radius:10px; padding:14px 16px; margin:14px 0 }
.summary .price { font-weight:800; color:var(--navy) }
.errors { background:#fdeceb; border:1px solid #e6a9a3; color:#7a231c; border-radius:8px; padding:10px 16px; margin:14px 0; list-style:none }
.bookform { display:block; max-width:520px; margin-top:16px }
.bookform label { display:block; margin-bottom:14px; font-weight:600; color:var(--navy) }
.bookform input[type=text], .bookform input[type=email], .bookform input:not([type]), .bookform select {
  display:block; width:100%; margin-top:6px; padding:10px 12px; border:1px solid #c9d4e2; border-radius:8px;
  font-size:1rem; font-family:inherit; background:#fff; color:#1a2433 }
.bookform fieldset.radios { border:1px solid #d6deea; border-radius:8px; padding:10px 14px; margin-bottom:14px }
.bookform fieldset.radios legend { font-weight:700; color:var(--navy); padding:0 6px }
.bookform fieldset.radios label { display:inline-flex; align-items:center; gap:6px; font-weight:400; margin:6px 14px 6px 0 }
.bookform fieldset.radios input[type=radio] { width:auto; margin:0 }
.bookform button.cta { border:none; cursor:pointer; font-size:1rem }
.ticket-code { font-size:1.6rem; font-weight:800; color:var(--navy); letter-spacing:.05em }
.timeline { list-style:none; padding:0; margin:14px 0 }
.timeline li { padding:10px 0; border-bottom:1px solid #e2e8f2 }
.timeline .ts { color:#5c6b80; font-size:.9rem }
.timeline .note { color:#5c6b80; font-size:.9rem; margin-top:4px }
.track-result { background:#fff; border:1px solid #d6deea; border-radius:10px; padding:14px 16px; margin-top:16px }

.ai-fab { position:fixed; right:20px; bottom:20px; width:56px; height:56px; border-radius:50%; border:none;
  background:var(--accent); color:#fff; font-size:1.5rem; line-height:1; cursor:pointer; z-index:60;
  box-shadow:0 6px 20px rgba(0,0,0,.25) }
.ai-panel { position:fixed; right:20px; bottom:88px; width:320px; max-width:calc(100vw - 32px); max-height:70vh;
  background:#fff; border:1px solid #d6deea; border-radius:12px; box-shadow:0 10px 32px rgba(0,0,0,.25);
  display:flex; flex-direction:column; overflow:hidden; z-index:61 }
.ai-panel[hidden] { display:none }
.ai-head { background:var(--navy); color:#fff; padding:10px 14px; display:flex; justify-content:space-between; align-items:center; font-weight:700 }
.ai-head button { background:none; border:none; color:#fff; font-size:1.1rem; cursor:pointer; line-height:1 }
.ai-msgs { flex:1; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:8px; min-height:160px }
.ai-msg { max-width:85%; padding:8px 12px; border-radius:12px; font-size:.92rem; white-space:pre-wrap }
.ai-msg.user { align-self:flex-end; background:var(--navy); color:#fff; border-bottom-right-radius:2px }
.ai-msg.bot { align-self:flex-start; background:#eef2f7; color:#1a2433; border-bottom-left-radius:2px }
.ai-link { align-self:flex-start; background:var(--accent); color:#fff; text-decoration:none; font-weight:700;
  padding:8px 14px; border-radius:8px; font-size:.9rem }
.ai-form { display:flex; gap:8px; padding:10px; border-top:1px solid #e2e8f2 }
.ai-form input { flex:1; padding:8px 10px; border:1px solid #c9d4e2; border-radius:8px; font-size:.92rem; font-family:inherit }
.ai-form button { border:none; background:var(--accent); color:#fff; border-radius:8px; padding:0 14px; cursor:pointer; font-size:1rem }
@media (max-width: 480px) {
  .ai-panel { right:16px; left:16px; width:auto; bottom:84px }
  .ai-fab { right:16px; bottom:16px }
}
/* The cart drawer and the (first-visit) cookie banner both occupy the same bottom-right
   corner as the chat fab/panel and both must outrank it (z-index 65 / 70 vs 60 / 61), which
   would otherwise leave the fab invisibly stacked underneath with no way to reach it. Hide
   it while either is on screen instead — it reappears the instant both are dismissed/closed. */
body:has(.cart-drawer:not([hidden])) .ai-fab,
body:has(.cart-drawer:not([hidden])) .ai-panel,
body:has(#cookie:not([hidden])) .ai-fab,
body:has(#cookie:not([hidden])) .ai-panel {
  display:none;
}

/* --- Admin portal (.adm*) — plain navy/white, no public nav/consent --- */
.adm-body { margin:0; font-family:system-ui,sans-serif; background:#eef2f7; color:#1a2433 }
.adm-shell { display:flex; min-height:100vh }
.adm-sidebar { width:200px; flex:0 0 200px; background:var(--navy); color:#cfe0f5; display:flex; flex-direction:column; padding:18px 0 }
.adm-sidebar .adm-brand { color:#fff; font-weight:700; padding:0 18px 16px; border-bottom:1px solid rgba(255,255,255,.12); margin-bottom:10px }
.adm-nav { display:flex; flex-direction:column; flex:1 }
.adm-nav a { color:#cfe0f5; text-decoration:none; padding:10px 18px; font-size:.94rem }
.adm-nav a:hover { background:rgba(255,255,255,.08) }
.adm-nav a.on { background:var(--accent); color:#fff; font-weight:700 }
.adm-logout { padding:10px 18px 0; border-top:1px solid rgba(255,255,255,.12) }
.adm-logout button { width:100%; padding:8px 10px; border:1px solid rgba(255,255,255,.3); background:none; color:#cfe0f5; border-radius:6px; cursor:pointer; font-size:.9rem }
.adm-logout button:hover { background:rgba(255,255,255,.08) }
.adm-main { flex:1; display:flex; flex-direction:column; min-width:0 }
.adm-topbar { background:#fff; border-bottom:1px solid #d6deea; padding:14px 24px; display:flex; justify-content:space-between; align-items:center }
.adm-title { font-weight:700; color:var(--navy); font-size:1.1rem }
.adm-who { color:#5c6b80; font-size:.88rem }
.adm-content { padding:24px; max-width:1000px }
.adm-tiles { display:flex; flex-wrap:wrap; gap:14px; margin-bottom:24px }
.adm-tile { background:#fff; border:1px solid #d6deea; border-radius:10px; padding:16px 18px; min-width:160px; display:flex; flex-direction:column; gap:4px }
.adm-tile-n { font-size:1.8rem; font-weight:800; color:var(--navy) }
.adm-tile-l { font-size:.85rem; color:#5c6b80 }
.adm-tile.adm-health.ok { border-color:#2b8fff } .adm-tile.adm-health.ok .adm-tile-n { color:#2b8fff }
.adm-tile.adm-health.bad { border-color:#c0392b } .adm-tile.adm-health.bad .adm-tile-n { color:#c0392b }
.adm-table { width:100%; border-collapse:collapse; background:#fff; border:1px solid #d6deea; border-radius:8px; overflow:hidden; margin-bottom:20px }
.adm-table td { padding:10px 14px; border-bottom:1px solid #e2e8f2 }
.adm-table th { padding:10px 14px; text-align:left; background:#f3f6fa; border-bottom:1px solid #d6deea; color:var(--navy); font-size:.85rem; text-transform:uppercase; letter-spacing:.02em }
.adm-note { color:#5c6b80 }
.adm-error { background:#fdeceb; border:1px solid #e6a9a3; color:#7a231c; border-radius:8px; padding:10px 16px }
.adm-errors { background:#fdeceb; border:1px solid #e6a9a3; color:#7a231c; border-radius:8px; padding:10px 16px; margin:14px 0; list-style:none }
.adm-banner { background:#e8f2ff; border:1px solid #9cc4ff; color:#1155b0; border-radius:8px; padding:10px 16px; margin:0 0 16px }
.adm-login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--navy) }
.adm-login-card { background:#fff; border-radius:12px; padding:32px; width:320px; box-shadow:0 10px 32px rgba(0,0,0,.25) }
.adm-login-card .adm-brand { color:var(--navy); font-weight:700; margin-bottom:16px }
.adm-form { max-width:560px }
.adm-form label { display:block; margin-bottom:14px; font-weight:600; color:var(--navy) }
.adm-form input, .adm-form select, .adm-form textarea {
  display:block; width:100%; margin-top:6px; padding:10px 12px; border:1px solid #c9d4e2; border-radius:8px;
  font-size:1rem; font-family:inherit; background:#fff; color:#1a2433 }
.adm-form textarea { font-family:ui-monospace,monospace; font-size:.9rem }
.adm-form input:disabled { background:#eef2f7; color:#5c6b80 }
.adm-btn { width:100%; border:none; background:var(--accent); color:#fff; padding:11px; border-radius:8px; font-weight:700; font-size:1rem; cursor:pointer }
.adm-btn-sm { display:inline-block; border:1px solid var(--navy); background:#fff; color:var(--navy); padding:6px 12px; border-radius:6px; font-size:.85rem; font-weight:700; cursor:pointer; text-decoration:none }
.adm-btn-sm:hover { background:#eef2f7 }
.adm-btn-danger { border-color:#c0392b; color:#c0392b }
.adm-btn-danger:hover { background:#fdeceb }
.adm-filters { display:flex; align-items:flex-end; gap:12px; margin-bottom:16px }
.adm-filters label { font-weight:600; color:var(--navy); font-size:.9rem }
.adm-filters select { display:block; margin-top:4px; padding:8px 10px; border:1px solid #c9d4e2; border-radius:6px }
.adm-filters button { padding:8px 14px }

.sec-badge { display:inline-block; padding:2px 9px; border-radius:12px; font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.02em; background:#eef2f7; color:#5c6b80 }
.sec-badge.sec-critical { background:#fdeceb; color:#a3271e }
.sec-badge.sec-high { background:#fdf1e3; color:#a05a05 }
.sec-badge.sec-suspicious { background:#fdf7dc; color:#8a7000 }
.sec-badge.sec-ok { background:#e8f2ff; color:#1155b0 }
tr.sec-critical td { background:#fdeceb }
tr.sec-high td { background:#fdf1e3 }
tr.sec-suspicious td { background:#fdf7dc }
.sec-ua { max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.82rem; color:#5c6b80 }
.sec-quick { display:flex; gap:6px }
.sec-quick-form { display:inline }

.bookform textarea { display:block; width:100%; margin-top:6px; padding:10px 12px; border:1px solid #c9d4e2; border-radius:8px; font-size:1rem; font-family:inherit; background:#fff; color:#1a2433; resize:vertical }
.bookform .hint { display:block; font-weight:400; font-size:.85rem; color:#5c6b80; margin-top:4px }
.intake-details { border:1px solid #d6deea; border-radius:8px; padding:12px 14px; margin-bottom:14px; background:#fff }
.intake-details > summary { font-weight:700; color:var(--navy); cursor:pointer }
.intake-details .bookform-inner { margin-top:14px }
.release { background:#fff; border:1px solid #d6deea; border-radius:8px; padding:14px 16px; margin:20px 0; font-size:.85rem; color:#3a475c; line-height:1.5 }
.release p { margin:0 0 10px } .release p:last-child { margin-bottom:0 }
.release .release-note { font-weight:700; color:var(--navy) }

/* --- Device Intake (admin) --- */
.intake-form h2 { color:var(--navy); font-size:1.1rem; margin:24px 0 10px }
.intake-form h2:first-of-type { margin-top:0 }
.intake-form label.checkbox { display:flex; align-items:center; gap:8px; font-weight:400 }
.intake-form label.checkbox input { width:auto; margin:0 }
.sig-pad { display:block; width:100%; max-width:500px; height:180px; border:1px solid #c9d4e2; border-radius:8px; background:#fff; touch-action:none; cursor:crosshair }
.intake-summary .ticket-code { font-size:2rem; margin-bottom:16px }
@media print {
  .adm-sidebar, .adm-topbar, .no-print { display:none !important }
  .adm-main, .adm-content { padding:0; margin:0 }
  body.adm-body { background:#fff }
}

/* --- Community mega-menu panel: anchor to the right edge so a wide 4-tile panel
   near the end of the nav doesn't overflow the viewport (same trick as Shop). --- */
.hd-dropdown-community { left:auto; right:0 }
@media (max-width:760px) { .hd-dropdown-community { right:auto } }

/* --- 5-column footer (Repairs / Services / Company / Community / Support) --- */
@media (min-width:860px) { .ftcols.ftcols-5 { grid-template-columns:repeat(5,1fr) } }

/* --- Browse by category: responsive grid of illustrated device tiles --- */
.browse-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px }
@media (min-width:560px) { .browse-grid { grid-template-columns:repeat(3,1fr) } }
@media (min-width:860px) { .browse-grid { grid-template-columns:repeat(4,1fr) } }
@media (min-width:1180px) { .browse-grid { grid-template-columns:repeat(5,1fr) } }
.browse-tile { display:flex; align-items:center; gap:12px; background:var(--card); border:1px solid var(--line);
  border-radius:14px; padding:12px 14px; text-decoration:none; color:var(--ink);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease }
.browse-tile:hover { transform:translateY(-3px); box-shadow:0 10px 22px rgba(20,24,31,.12); border-color:var(--accent) }
.browse-tile-ico { flex:none; width:46px; height:46px; border-radius:12px; overflow:hidden; display:block }
.browse-tile-ico .thumb-ico { width:46px; height:46px; display:block }
.browse-tile-label { font-weight:700; color:var(--navy); font-size:.9rem; line-height:1.2 }
.browse-tile-power { grid-column:1 / -1; background:linear-gradient(135deg,#eef4ff,#f4f8fc) }

/* --- Community hub / sub-pages --- */
.comm-hero { background:linear-gradient(150deg, var(--navy), var(--navy-dark)); color:#fff;
  border-radius:18px; padding:40px 28px; margin:8px 0 30px }
.comm-hero-eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:.82rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.08em; color:#9cc4ff }
.comm-hero-dot { width:7px; height:7px; border-radius:50%; background:var(--accent) }
.comm-hero-h1 { margin:12px 0 10px; font-size:2rem; line-height:1.15 }
@media (min-width:860px) { .comm-hero-h1 { font-size:2.5rem } }
.comm-hero-lead { margin:0; max-width:640px; color:#d6e2f4; font-size:1.02rem; line-height:1.5 }

.comm-cards { display:grid; grid-template-columns:1fr; gap:14px }
@media (min-width:560px) { .comm-cards { grid-template-columns:repeat(2,1fr) } }
.comm-card { display:flex; align-items:center; gap:14px; background:var(--card); border:1px solid var(--line);
  border-radius:14px; padding:16px 18px; text-decoration:none; color:var(--ink);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease }
.comm-card:hover { transform:translateY(-3px); box-shadow:0 10px 22px rgba(20,24,31,.12); border-color:var(--accent) }
.comm-card-ico { flex:none; width:52px; height:52px; border-radius:13px; overflow:hidden; display:block }
.comm-card-ico .thumb-ico { width:52px; height:52px; display:block }
.comm-card-txt { display:flex; flex-direction:column; gap:3px; min-width:0; flex:1 }
.comm-card-txt strong { color:var(--navy); font-size:1rem }
.comm-card-txt small { color:var(--muted); font-size:.86rem; line-height:1.35 }
.comm-card-arrow { flex:none; color:var(--accent-dark) }
.comm-card-arrow .arrow-icon { width:18px; height:18px }

.comm-tips { display:grid; grid-template-columns:1fr; gap:14px }
@media (min-width:560px) { .comm-tips { grid-template-columns:repeat(2,1fr) } }
@media (min-width:960px) { .comm-tips { grid-template-columns:repeat(4,1fr) } }
.comm-tip { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px 20px;
  border-top:3px solid var(--accent) }
.comm-tip h3 { margin:0 0 8px; color:var(--navy); font-size:1rem }
.comm-tip p { margin:0; color:var(--muted); font-size:.88rem; line-height:1.5 }

/* --- Answers accordion + success banner --- */
.qa-list { display:flex; flex-direction:column; gap:10px }
.qa-item { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px 18px }
.qa-item > summary { font-weight:700; color:var(--navy); cursor:pointer; font-size:.98rem; list-style:none }
.qa-item > summary::-webkit-details-marker { display:none }
.qa-item > summary::before { content:'+'; display:inline-block; width:1em; color:var(--accent); font-weight:800 }
.qa-item[open] > summary::before { content:'\2013' }
.qa-item p { margin:12px 0 0; color:#3a475c; font-size:.92rem; line-height:1.55 }
.comm-success { background:#e6f6ec; border:1px solid #93cfa8; color:#1c6b3a; border-radius:10px;
  padding:14px 18px; margin:14px 0; font-weight:600 }
.comm-ask { max-width:640px }
.comm-form { max-width:100% }

/* --- Right to Repair prose --- */
.comm-prose { max-width:760px }
.comm-prose-block { margin-bottom:22px }
.comm-prose-block h2 { color:var(--navy); font-size:1.25rem; margin:0 0 8px }
.comm-prose-block p { margin:0; color:#3a475c; font-size:1rem; line-height:1.6 }

/* --- Help Out --- */
.comm-help-grid { display:grid; grid-template-columns:1fr; gap:18px }
@media (min-width:760px) { .comm-help-grid { grid-template-columns:repeat(2,1fr) } }
.comm-help-card { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:24px }
.comm-help-card .comm-card-ico { width:56px; height:56px; border-radius:14px; margin-bottom:6px }
.comm-help-card .comm-card-ico .thumb-ico { width:56px; height:56px }
.comm-help-card h2 { color:var(--navy); font-size:1.15rem; margin:6px 0 8px }
.comm-help-card p { margin:0 0 14px; color:var(--muted); font-size:.94rem; line-height:1.55 }
.comm-help-link { display:inline-flex; align-items:center; gap:6px; color:var(--accent-dark);
  font-weight:700; font-size:.92rem; text-decoration:none }
.comm-help-link .arrow-icon { width:16px; height:16px }
.comm-contact-band { text-align:center; background:linear-gradient(135deg,#eef4ff,#f4f8fc);
  border:1px solid var(--line); border-radius:16px; padding:34px 24px }
.comm-contact-band h2 { margin-bottom:8px }
.comm-contact-band p { color:var(--muted); max-width:520px; margin:0 auto 6px }