/*
Theme Name: ACT Head Impact Tracker
Theme URI: https://www.act-tracker.com/
Author: Northern Sports Insight and Intelligence Oy
Description: Custom block theme for ACT Head Impact Tracker. Replaces the PopularFX + Pagelayer build.
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.1
Version: 1.9.5
License: GPL-2.0-or-later
Text Domain: act
*/

/* ============================================================
   ACT Head Impact Tracker - homepage prototype
   Design tokens sampled from the approved mockups
   ============================================================ */

:root {
  --navy-900: #0a121b;
  --navy-800: #0c151f;   /* hero / base background */
  --navy-700: #101b29;   /* alternating sections */

  /* Boxes. Heidi, 11 Sep: "change all the boxes color in the site so that
     they stand out more and brings some added color to the visual feel of
     the page now too black. Try one of these" - and she gave three Material
     lightBlue shades. Every card fill on the site is --navy-600/--navy-650,
     so tinting those two tints every box at once. To try one of her other
     blues, change --box-blue and the two pairs of hex fallbacks below:
        lightBlue 200 #81D4FA -> #2A4F66 / #274B5D
        lightBlue 300 #4FC3F7 -> #214560 / #1F4157   (in use)
        lightBlue 400 #29B6F6 -> #1B435F / #193F56
     The plain hex is declared first so a browser without color-mix() still
     gets the colour; the color-mix() line is what keeps the two in step. */
  --box-blue: #4FC3F7;
  --navy-650: #1F4157;
  --navy-650: color-mix(in srgb, var(--box-blue) 20%, #13202f);
  --navy-600: #214560;   /* cards / panels */
  --navy-600: color-mix(in srgb, var(--box-blue) 20%, #16263a);
  --navy-500: #1f3548;   /* raised / hover */
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.16);

  --teal: #d8fc30;       /* brand accent (lime) */
  --teal-bright: #e6ff5c;
  --teal-dim: rgba(216, 252, 48, 0.14);
  --accent-ink: #0a121b; /* dark text for use on the lime accent */
  --emerald: #107858;    /* statement / quote band background (white text) */

  --white: #ffffff;
  --text: #e7edf1;
  /* lifted from #93a2ac when the card fills gained the blue tint above:
     on the tinted cards the old grey fell to 3.9:1, under WCAG AA. */
  --muted: #a9b8c3;
  /* lifted from #6f808b for the same reason as --muted above. This one
     is the role line under a testimonial name, which sits ON a tinted
     card: the tint had taken it down to 2.5:1. It is now 4.0:1 there,
     better than the 3.7:1 it had before the tint, and still visibly
     dimmer than --muted so the hierarchy survives. */
  --muted-dim: #95a4af;

  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --maxw: 1180px;
  --radius: 18px;
  --radius-sm: 12px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  background: var(--navy-800);
  color: var(--text);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
em { font-style: italic; }

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; }

/* ---------- shared type ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 22px;
}
.eyebrow::before {
  content: "";
  width: 30px;
  height: 2px;
  background: var(--teal);
  display: inline-block;
}

.section-title,
.hero-title,
.cta-title {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--white);
  line-height: 1.06;
  letter-spacing: -0.01em;
}
.section-title em,
.hero-title em,
.cta-title em { color: var(--teal); font-weight: 600; }

.section-title { font-size: clamp(2rem, 4.4vw, 3.25rem); }
.section-lead, .section-head p:not(.eyebrow) { color: var(--muted); }

.section { padding-block: clamp(72px, 11vw, 130px); }
.section-head { max-width: 720px; margin-bottom: 64px; }
.section-head .section-lead { margin-top: 22px; font-size: 1.08rem; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.98rem;
  padding: 14px 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.18s var(--ease), background 0.18s var(--ease), border-color 0.18s var(--ease), color 0.18s var(--ease);
  white-space: nowrap;
}
.btn-sm { padding: 10px 20px; font-size: 0.9rem; }
.btn-primary { background: var(--teal); color: var(--accent-ink); }
.btn-primary:hover { background: var(--teal-bright); transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--white); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--teal); color: var(--teal); transform: translateY(-2px); }

/* ============================================================
   Header
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10, 18, 27, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}
.brand-logo { height: 34px; width: auto; }
.nav { display: flex; align-items: center; gap: 24px; }
.nav > a:not(.btn) {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--muted);
  transition: color 0.16s var(--ease);
}
.nav > a:not(.btn):hover { color: var(--white); }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  background: none; border: none; cursor: pointer;
}
.nav-toggle span { display: block; height: 2px; width: 24px; background: var(--white); transition: 0.25s var(--ease); }

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative;
  /* Heidi, 11 Sep: the black gap above the emerald statement band was much
     deeper than the one below it. The gap above is this padding. */
  padding-block: clamp(80px, 13vw, 150px) clamp(40px, 5.5vw, 66px);
  background: radial-gradient(120% 90% at 12% 0%, #122231 0%, var(--navy-800) 46%, #08101a 100%);
  overflow: hidden;
}
.hero-inner { position: relative; z-index: 2; max-width: 880px; }
.hero-title { font-size: clamp(2.9rem, 8.2vw, 6rem); margin-bottom: 30px; }
.hero-lead {
  max-width: 600px;
  font-size: 1.18rem;
  color: var(--muted);
  margin-bottom: 36px;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 40px; }
.hero-note {
  max-width: 560px;
  font-size: 0.95rem;
  color: var(--muted-dim);
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.hero-glow {
  position: absolute;
  right: -10%;
  top: -20%;
  width: 60%;
  height: 120%;
  background: radial-gradient(circle, rgba(216, 252, 48, 0.10) 0%, transparent 62%);
  pointer-events: none;
  z-index: 1;
}

/* ============================================================
   Trust strip
   ============================================================ */
.trust { background: var(--navy-900); border-block: 1px solid var(--line); }
.trust-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 26px;
  padding-block: 22px;
  font-size: 0.9rem;
  color: var(--muted);
}
.trust-label {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted-dim);
}
.trust-item em { color: var(--teal); font-style: normal; font-weight: 600; }
.trust-sep { width: 1px; height: 16px; background: var(--line-strong); }

/* ============================================================
   How it works
   ============================================================ */
.how { background: var(--navy-700); }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.step {
  background: linear-gradient(180deg, var(--navy-600) 0%, var(--navy-650) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 38px 32px 34px;
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease);
}
.step:hover { transform: translateY(-4px); border-color: var(--line-strong); }
.step-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; }
.step-num { font-family: var(--serif); font-size: 2.4rem; font-weight: 600; color: var(--teal); line-height: 1; }
.step-icon { width: 30px; height: 30px; color: var(--teal); }
.step h3 { font-size: 1.45rem; font-weight: 600; color: var(--white); margin-bottom: 12px; }
.step p { color: var(--muted); font-size: 1rem; }

/* ============================================================
   Universal by design
   ============================================================ */
.universal { background: var(--navy-800); }
.universal-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 64px;
  align-items: center;
}
.universal-copy .section-title { margin-bottom: 26px; }
.universal-copy p { color: var(--muted); margin-bottom: 18px; max-width: 540px; }
.sports { display: flex; flex-wrap: wrap; gap: 10px; margin: 30px 0 26px; }
.sports span {
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--text);
  background: var(--teal-dim);
  border: 1px solid rgba(216, 252, 48, 0.28);
  padding: 7px 14px;
  border-radius: 999px;
}
.universal-join { color: var(--text) !important; font-weight: 500; }

.universal-media { position: relative; display: grid; gap: 20px; }
.media-card {
  position: relative;
  background: linear-gradient(160deg, #f4f6f7 0%, #dfe5e8 100%);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
}
.media-card img { width: 100%; height: 100%; object-fit: cover; }
.media-card-sm {
  position: absolute;
  bottom: -28px;
  right: -22px;
  width: 44%;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.45);
  border: 1px solid var(--line-strong);
}

.disclaimer {
  margin-top: 84px;
  padding: 20px 26px;
  border-left: 2px solid var(--teal);
  background: var(--navy-700);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--muted-dim);
  font-size: 0.9rem;
  max-width: 860px;
}

/* ============================================================
   Testimonials
   ============================================================ */
.reviews { background: var(--navy-700); }
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.quote {
  background: var(--navy-600);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px 30px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  position: relative;
}
.quote::before {
  content: "\201C";
  position: absolute;
  top: 8px; right: 24px;
  font-family: var(--serif);
  font-size: 4.5rem;
  line-height: 1;
  color: var(--teal);
  opacity: 0.28;
}
.quote blockquote { color: var(--text); font-size: 1.02rem; line-height: 1.6; }
.quote figcaption { display: flex; flex-direction: column; gap: 3px; margin-top: auto; }
.quote figcaption strong { color: var(--white); font-weight: 600; font-size: 0.98rem; }
.quote figcaption span { color: var(--muted-dim); font-size: 0.86rem; }

/* ============================================================
   CTA / pricing
   ============================================================ */
.cta { background: var(--navy-800); }
.cta-card {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 0;
  background: linear-gradient(135deg, var(--navy-600) 0%, var(--navy-700) 100%);
  border: 1px solid var(--line-strong);
  border-radius: calc(var(--radius) + 6px);
  overflow: hidden;
}
.cta-art { position: relative; background: radial-gradient(circle at 50% 40%, #1d4a78 0%, #0a1726 75%); display: flex; align-items: center; justify-content: center; padding: 30px; }
.cta-art img { border-radius: var(--radius-sm); }
.cta-body { padding: clamp(36px, 5vw, 60px); }
.cta-title { font-size: clamp(2rem, 3.6vw, 2.9rem); margin: 20px 0 26px; }
.cta-points { list-style: none; padding: 0; display: grid; gap: 12px; margin-bottom: 32px; }
.cta-points li { position: relative; padding-left: 32px; color: var(--text); }
.cta-points li::before {
  content: "";
  position: absolute;
  left: 0; top: 3px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--teal-dim);
  border: 1px solid var(--teal);
}
.cta-points li::after {
  content: "";
  position: absolute;
  left: 7px; top: 8px;
  width: 6px; height: 10px;
  border: solid var(--teal);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.cta-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 26px; }

.store-badges { display: flex; gap: 12px; }
.store-badges.col { flex-direction: column; align-items: flex-start; }
.store {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 9px 18px;
  transition: border-color 0.16s var(--ease), color 0.16s var(--ease);
}
.store::before {
  content: "";
  width: 14px; height: 14px;
  background: var(--teal);
  border-radius: 3px;
}
.store:hover { border-color: var(--teal); color: var(--white); }

/* ============================================================
   Footer
   ============================================================ */
.site-footer { background: var(--navy-900); border-top: 1px solid var(--line); padding-top: 72px; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.85fr 1.05fr 1.25fr;
  gap: 40px;
  padding-bottom: 54px;
}
.footer-logo { height: 38px; margin-bottom: 22px; }
.footer-tag { font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: var(--text); line-height: 1.4; }
.footer-col h4 { font-size: 0.76rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted-dim); margin-bottom: 18px; font-weight: 600; }
.footer-col a, .footer-col p { display: block; color: var(--muted); font-size: 0.95rem; margin-bottom: 10px; }
.footer-col a:hover { color: var(--teal); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding-block: 26px;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
  color: var(--muted-dim);
}

/* ============================================================
   Reveal animation
   ============================================================ */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 940px) {
  .steps { grid-template-columns: 1fr; }
  .quotes { grid-template-columns: 1fr 1fr; }
  .universal-grid { grid-template-columns: 1fr; gap: 40px; }
  .media-card-sm { width: 38%; right: 0; bottom: -20px; }
  .cta-card { grid-template-columns: 1fr; }
  .cta-art { min-height: 220px; }
}
@media (max-width: 760px) {
  .nav {
    position: fixed;
    inset: 76px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--navy-900);
    border-bottom: 1px solid var(--line);
    padding: 12px 24px 24px;
    transform: translateY(-130%);
    transition: transform 0.32s var(--ease);
  }
  .nav.open { transform: none; }
  .nav > a:not(.btn) { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .nav > .btn { margin-top: 16px; }
  .nav-toggle { display: flex; }
  .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2) { opacity: 0; }
  .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .quotes { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  body { font-size: 16px; }
}
@media (max-width: 460px) {
  .footer-grid { grid-template-columns: 1fr; }
  .hero-actions .btn, .cta-actions .btn { width: 100%; }
}

/* ============================================================
   Print / PDF (keeps the dark design when printed from a browser)
   ============================================================ */
@media print {
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  html, body { background: var(--navy-800) !important; }
  .site-header { position: static; background: var(--navy-900); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .nav-toggle, .hero-glow { display: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .section { padding-block: 44px; }
  .step, .quote, .cta-card, .media-card, .disclaimer,
  .card, .know-item, .myth, .price, .stat, .datapoint { break-inside: avoid; }
}

/* ============================================================
   INNER PAGES - shared components
   ============================================================ */

/* active nav link */
.nav > a[aria-current="page"] { color: var(--white); }
.nav > a[aria-current="page"]::after { content: ""; display: block; height: 2px; background: var(--teal); margin-top: 3px; }

/* compact inner-page hero */
.page-hero {
  position: relative;
  padding-block: clamp(60px, 9vw, 104px) clamp(40px, 6vw, 64px);
  background: radial-gradient(120% 90% at 12% 0%, #122231 0%, var(--navy-800) 50%, #08101a 100%);
  overflow: hidden;
}
.page-hero .container { position: relative; z-index: 2; }
.page-hero h1 {
  font-family: var(--serif); font-weight: 600; color: var(--white);
  font-size: clamp(2.3rem, 5.2vw, 3.9rem); line-height: 1.07; letter-spacing: -0.01em; margin-top: 6px;
}
.page-hero h1 em { color: var(--teal); }
.page-hero .lead { max-width: 640px; margin-top: 24px; font-size: 1.12rem; color: var(--muted); }

/* generic two-column split (text + media) */
.split { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 60px; align-items: center; }
.split + .split { margin-top: clamp(56px, 8vw, 96px); }
.split-copy p { color: var(--muted); margin-bottom: 16px; max-width: 560px; }
.split-copy .section-title { margin-bottom: 22px; }
.split-media .media-card { box-shadow: 0 30px 60px rgba(0,0,0,0.4); }
/* Heidi's Our Mission photo (17 Sep) is a portrait phone shot; left to its own
   3:4 it towers over the copy beside it. Her mockup shows it roughly level
   with the text block, so it is cropped to 4:5. */
.mission-photo img { aspect-ratio: 4 / 5; object-fit: cover; object-position: center 42%; }
.media-tall { aspect-ratio: 4 / 3; }

/* reusable card grid */
.cards { display: grid; gap: 24px; }
.cards.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cards.cols-2 { grid-template-columns: repeat(2, 1fr); }
.card {
  background: linear-gradient(180deg, var(--navy-600) 0%, var(--navy-650) 100%);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 32px 30px;
}
.card .card-eyebrow { color: var(--teal); font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; margin-bottom: 14px; }
.card h3 { color: var(--white); font-size: 1.28rem; font-weight: 600; margin-bottom: 12px; }
.card p { color: var(--muted); font-size: 0.98rem; }
.card p + p { margin-top: 12px; }

/* reusable teal check list */
.check-list { list-style: none; padding: 0; display: grid; gap: 12px; }
.check-list li { position: relative; padding-left: 30px; color: var(--text); }
.check-list li::before { content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--teal-dim); border: 1px solid var(--teal); }
.check-list li::after { content: ""; position: absolute; left: 6px; top: 7px; width: 6px; height: 9px; border: solid var(--teal); border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* numbered knowledge list (7 things) */
.know { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.know-item { display: grid; grid-template-columns: auto 1fr; gap: 22px; padding: 28px; background: var(--navy-600); border: 1px solid var(--line); border-radius: var(--radius); }
.know-num { font-family: var(--serif); font-size: 2.1rem; font-weight: 600; color: var(--teal); line-height: 1; }
.know-item h3 { color: var(--white); font-size: 1.1rem; font-weight: 600; margin-bottom: 8px; }
.know-item p { color: var(--muted); font-size: 0.96rem; }

/* myth-buster cards */
.myths { display: grid; gap: 18px; }
.myth { background: var(--navy-600); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 32px; }
.myth .tag { display: inline-block; font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: #f3a6a6; background: rgba(243, 166, 166, 0.12); border: 1px solid rgba(243, 166, 166, 0.3); padding: 4px 10px; border-radius: 6px; margin-bottom: 14px; }
.myth .claim { font-family: var(--serif); font-style: italic; font-size: 1.3rem; color: var(--white); margin-bottom: 16px; line-height: 1.3; }
.myth .reality { color: var(--muted); }
.myth .reality b { color: var(--teal); font-weight: 600; }

/* device spec table */
.specs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; }
.specs dl { margin: 0; }
.spec { display: grid; grid-template-columns: 1fr auto; gap: 24px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.spec dt { color: var(--muted); font-size: 0.96rem; }
.spec dd { color: var(--white); font-weight: 500; text-align: right; margin: 0; font-size: 0.96rem; }

/* big stat callout */
.stat { text-align: center; background: linear-gradient(135deg, var(--navy-600), var(--navy-700)); border: 1px solid var(--line-strong); border-radius: calc(var(--radius) + 6px); padding: clamp(48px, 7vw, 80px) 40px; }
.stat .big { font-family: var(--serif); font-weight: 700; font-size: clamp(4rem, 12vw, 7.5rem); color: var(--teal); line-height: 1; }
.stat h3 { color: var(--white); font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 600; margin: 14px 0 0; font-family: var(--serif); }
.stat p { color: var(--muted); max-width: 620px; margin: 18px auto 0; }

/* data-point grid (research measurements) */
.datapoints { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.datapoint { display: flex; gap: 11px; align-items: center; background: var(--navy-600); border: 1px solid var(--line); border-radius: 12px; padding: 15px 18px; color: var(--text); font-size: 0.92rem; }
.datapoint::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); flex: none; }

/* pricing tiers */
.prices { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.price { background: var(--navy-600); border: 1px solid var(--line); border-radius: var(--radius); padding: 40px 36px; }
.price.featured { border-color: rgba(216, 252, 48, 0.55); box-shadow: 0 0 40px rgba(216, 252, 48, 0.08); }
.price .price-label { color: var(--teal); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; }
.price .amount { font-family: var(--serif); font-size: 3.2rem; font-weight: 600; color: var(--white); margin: 12px 0 6px; }
.price .amount small { font-size: 1rem; color: var(--muted); font-family: var(--sans); }
.price .price-note { color: var(--muted); font-size: 0.95rem; margin-bottom: 26px; }
.price .check-list { margin-bottom: 30px; }

/* contact */
.contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; }
.contact-details h3 { color: var(--white); font-size: 1.1rem; margin: 0 0 8px; }
.contact-details p { color: var(--muted); margin-bottom: 18px; line-height: 1.6; }
.contact-details a { color: var(--teal); }
.form { display: grid; gap: 16px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 7px; }
.field label { font-size: 0.84rem; color: var(--muted); }
.form input, .form textarea {
  background: var(--navy-700); border: 1px solid var(--line-strong); border-radius: 10px;
  padding: 13px 16px; color: var(--white); font-family: var(--sans); font-size: 1rem; width: 100%;
}
.form input:focus, .form textarea:focus { outline: none; border-color: var(--teal); }
.form textarea { min-height: 150px; resize: vertical; }

/* small print / legal block */
.legal { margin-top: 64px; padding-top: 28px; border-top: 1px solid var(--line); }
.legal h4 { color: var(--muted); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 12px; }
.legal p { color: var(--muted-dim); font-size: 0.86rem; max-width: 980px; }

/* research links */
.links-list { display: grid; gap: 12px; }
.link-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 22px; background: var(--navy-600); border: 1px solid var(--line); border-radius: 12px; }
.link-row span { color: var(--text); }
.link-row .go { color: var(--teal); font-weight: 600; white-space: nowrap; font-size: 0.9rem; }

@media (max-width: 940px) {
  .split { grid-template-columns: 1fr; gap: 36px; }
  .split-media { order: -1; }
  .cards.cols-3 { grid-template-columns: 1fr; }
  .know { grid-template-columns: 1fr; }
  .datapoints { grid-template-columns: 1fr 1fr; }
  .specs { grid-template-columns: 1fr; gap: 0; }
  .prices { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 560px) {
  .cards.cols-2 { grid-template-columns: 1fr; }
  .datapoints { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
}

/* ============================================================
   BLOG - index + article
   ============================================================ */
.blog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.post-card {
  display: flex; flex-direction: column; gap: 14px;
  background: var(--navy-600); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 34px 32px; transition: transform 0.25s var(--ease), border-color 0.25s var(--ease);
}
.post-card:hover { transform: translateY(-4px); border-color: var(--line-strong); }
.post-card .cat { color: var(--teal); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; }
.post-card h3 { font-family: var(--serif); color: var(--white); font-size: 1.42rem; line-height: 1.2; font-weight: 600; }
.post-card p { color: var(--muted); font-size: 0.98rem; }
.post-card .read { color: var(--teal); font-weight: 600; font-size: 0.92rem; margin-top: auto; }

/* article */
.post-narrow { max-width: 768px; }
.post-back { display: inline-block; color: var(--teal); font-size: 0.9rem; font-weight: 500; margin-bottom: 26px; }
.post-title { font-family: var(--serif); font-weight: 600; color: var(--white); font-size: clamp(2rem, 4.6vw, 3.3rem); line-height: 1.1; letter-spacing: -0.01em; }
.post-meta { color: var(--muted-dim); font-size: 0.92rem; margin-top: 18px; }
.post-body > p { color: var(--text); font-size: 1.1rem; line-height: 1.8; margin-bottom: 1.3em; }
.post-body > h2 { font-family: var(--serif); color: var(--white); font-size: clamp(1.55rem, 3vw, 2.05rem); line-height: 1.2; margin: 1.9em 0 0.55em; }
.post-body > h3 { color: var(--white); font-size: 1.28rem; font-weight: 600; margin: 1.4em 0 0.5em; }
.post-body strong { color: var(--white); font-weight: 600; }
.post-body em { font-style: italic; }
.post-body a { color: var(--teal); text-decoration: underline; }
.post-body ul { margin: 0 0 1.3em; padding-left: 1.25em; }
.post-body li { color: var(--text); font-size: 1.06rem; line-height: 1.75; margin-bottom: 0.5em; }
.post-body hr { border: none; border-top: 1px solid var(--line); margin: 2.4em 0; }

@media (max-width: 760px) { .blog-grid { grid-template-columns: 1fr; } }
@media print { .post-card { break-inside: avoid; } .post-body > h2, .post-body > h3 { break-after: avoid; } }

/* ============================================================
   Feedback round 1 - more colour: statement band, lime accents, footer
   ============================================================ */

/* full-bleed colour statement band (emerald, white text) */
.statement { background: var(--emerald); color: #fff; }
.statement .container { padding-block: clamp(52px, 8vw, 88px); text-align: center; }
.statement h2 {
  font-family: var(--serif); font-weight: 700; color: #fff;
  font-size: clamp(1.9rem, 4.6vw, 3.3rem); line-height: 1.08; letter-spacing: -0.01em;
}
.statement p { color: rgba(255, 255, 255, 0.82); font-weight: 500; max-width: 640px; margin: 18px auto 0; font-size: 1.08rem; }
.statement .btn-primary { background: #fff; color: var(--emerald); }
.statement .btn-primary:hover { background: #eafff5; }

/* emerald quote band (for named testimonials shown as statements) */
.quote-band { background: var(--emerald); color: #fff; }
.quote-band .container { max-width: 940px; text-align: center; }
.quote-band .qmark { font-family: var(--serif); font-size: 2.6rem; line-height: 0.5; color: rgba(255, 255, 255, 0.55); display: block; margin-bottom: 18px; }
.quote-band blockquote { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(1.35rem, 3.1vw, 2.05rem); line-height: 1.42; color: #fff; margin: 0; }
.quote-band figcaption { margin-top: 24px; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.82); }
.quote-band figcaption strong { color: #fff; font-weight: 700; }

/* lime accent strip on the dark cards (breaks up the black) */
.step, .quote, .card, .know-item, .price { border-top: 3px solid var(--teal); }
.step { padding-top: 35px; }

/* footer colour: lime headings + social + legal bar + trademark */
.site-footer .footer-col h4 { color: var(--teal); }
.footer-social { display: flex; gap: 12px; margin-top: 4px; }
.footer-social a {
  width: 40px; height: 40px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--navy-700); border: 1px solid var(--line); color: var(--teal);
  transition: background 0.16s var(--ease), color 0.16s var(--ease), border-color 0.16s var(--ease);
}
.footer-social a:hover { background: var(--teal); color: var(--accent-ink); border-color: var(--teal); }
.footer-social svg { width: 18px; height: 18px; }
.footer-legal {
  display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center;
  padding-block: 20px; border-top: 1px solid var(--line); font-size: 0.82rem;
}
.footer-legal a { color: var(--muted-dim); }
.footer-legal a:hover { color: var(--teal); }
.footer-trademark { color: var(--muted-dim); font-size: 0.8rem; padding-bottom: 14px; }
.footer-trademark strong { color: var(--muted); font-weight: 600; }

@media print { .statement { break-inside: avoid; } }

/* product page round 2: accessory gallery, card links, readable disclaimer */
.acc-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.acc-gallery figure:first-child { grid-column: 1 / -1; }
.acc-gallery .media-card img { width: 100%; height: 100%; object-fit: cover; }
.card-link { display: inline-block; margin-top: 16px; color: var(--teal); font-weight: 600; font-size: 0.92rem; }
.card-link:hover { text-decoration: underline; }

/* ============================================================
   Heidi's real photographs (placements from Documents\Doc1.pdf)
   These are REAL photos, so unlike the AI banners they carry NO .ai-tag.
   ============================================================ */

/* mosaic of small photos, sits under a lead image */
.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; }
.photo-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.photo-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.photo-grid .media-card { aspect-ratio: 1; background: var(--navy-600); }
.photo-grid .media-card img { width: 100%; height: 100%; object-fit: cover; }

/* the data screenshots - app and browser dashboard captures.
   Heidi: there was not a single image of the data, and there had to be. */
.data-row { margin-top: 26px; align-items: end; }
.data-group { display: flex; gap: 12px; align-items: flex-end; }
.data-shot {
  flex: 1; min-width: 0;
  background: var(--navy-600); border: 1px solid var(--line);
  border-radius: var(--radius-sm); overflow: hidden;
}
/* phone captures are 9:16 - at full column width they tower over the browser
   shots, so they are pinned narrow and the row is bottom-aligned, as in Doc1 */
.data-shot.phone { flex: 0 0 152px; }
.data-shot img { width: 100%; display: block; }
.data-caption { margin-top: 10px; font-size: 0.8rem; color: var(--muted-dim); }

/* photo alongside the closing statement block */
.stat-with-media { display: grid; grid-template-columns: 1.55fr 0.8fr; gap: 22px; align-items: stretch; }
.stat-with-media .stat { height: 100%; }
.stat-photo {
  border-radius: calc(var(--radius) + 6px); overflow: hidden;
  border: 1px solid var(--line-strong); min-height: 240px;
}
.stat-photo img { width: 100%; height: 100%; object-fit: cover; }

/* photo alongside a section heading. .section-head caps at 720px, which would
   squeeze the photo to a sliver, so this variant takes the full container. */
.head-with-photo { display: grid; grid-template-columns: 1fr 0.62fr; gap: 34px; align-items: center; max-width: none; }
.head-photo { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.head-photo img { width: 100%; display: block; aspect-ratio: 16 / 9; object-fit: cover; }

/* page hero with an image beside the headline (blog, help) */
.page-hero-grid { display: grid; grid-template-columns: 1.12fr 0.88fr; gap: 46px; align-items: center; }
.page-hero-grid .lead { max-width: none; }
.page-hero-visual {
  position: relative; line-height: 0;
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line-strong); box-shadow: 0 24px 55px rgba(0, 0, 0, 0.45);
}
.page-hero-visual img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }

@media (max-width: 900px) {
  .stat-with-media, .head-with-photo, .page-hero-grid { grid-template-columns: 1fr; }
  .page-hero-visual { order: -1; }
  .data-group { flex-wrap: wrap; }
}
@media print {
  .photo-grid .media-card, .data-shot, .stat-photo, .head-photo, .page-hero-visual { break-inside: avoid; }
}

/* ============================================================
   Help centre - the full 147-article help page (help.html)
   Content is the live site's, verbatim; these are display rules only.
   ============================================================ */

/* search + expand all */
.help-tools { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 22px; }
.help-search { position: relative; flex: 1 1 320px; display: flex; align-items: center; }
.help-search svg {
  position: absolute; left: 16px; width: 18px; height: 18px;
  color: var(--muted); pointer-events: none;
}
.help-search input {
  width: 100%; font: inherit; font-size: 0.98rem; color: var(--text);
  background: var(--navy-600); border: 1px solid var(--line);
  border-radius: 999px; padding: 13px 20px 13px 46px;
  transition: border-color 0.16s var(--ease), background 0.16s var(--ease);
}
.help-search input::placeholder { color: var(--muted-dim); }
.help-search input:focus { outline: none; border-color: var(--teal); background: var(--navy-650); }
.help-search input::-webkit-search-cancel-button { filter: invert(1) opacity(0.5); }
.help-toggle-all {
  font: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer;
  color: var(--teal); background: transparent;
  border: 1px solid rgba(216, 252, 48, 0.4); border-radius: 999px; padding: 12px 22px;
  transition: background 0.16s var(--ease), color 0.16s var(--ease);
}
.help-toggle-all:hover { background: var(--teal); color: var(--accent-ink); border-color: var(--teal); }
.help-noresult { color: var(--muted); padding: 18px 0 6px; }

/* category nav carries a per-section count */
.help-cat-nav a { display: inline-flex; align-items: center; gap: 8px; }
.help-cat-nav a span {
  font-size: 0.76rem; font-weight: 700; color: var(--accent-ink);
  background: var(--teal); border-radius: 999px; padding: 1px 8px;
}
.faq-count {
  font-family: var(--sans); font-size: 0.8rem; font-weight: 700; vertical-align: middle;
  color: var(--accent-ink); background: var(--teal); border-radius: 999px;
  padding: 3px 11px; margin-left: 10px;
}
.faq-blurb { color: var(--muted); font-size: 0.95rem; margin: 14px 0 6px; }

/* the answers themselves */
details.faq .faq-body ol { margin: 0 0 12px; padding-left: 1.4em; }
details.faq .faq-body ol li, details.faq .faq-body ul li { margin-bottom: 8px; }
details.faq .faq-body li p { margin-bottom: 6px; }
details.faq .faq-body h3, details.faq .faq-body h4,
details.faq .faq-body h5, details.faq .faq-body h6 {
  color: var(--white); font-size: 1rem; font-weight: 700; margin: 20px 0 8px;
}
details.faq .faq-body a { color: var(--teal); text-decoration: underline; text-underline-offset: 2px; }
details.faq .faq-body a:hover { color: var(--teal-bright); }
details.faq .faq-body em, details.faq .faq-body i { color: var(--text); }
details.faq .faq-body u { text-decoration-color: var(--teal); }

/* screenshots and diagrams from the live help centre sit on a light panel,
   most of them are white-background app captures */
details.faq .faq-body img {
  display: inline-block; vertical-align: top;
  max-width: 100%; height: auto; margin: 10px 12px 10px 0;
  background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 6px;
}

/* read more / read less on the very long articles */
.help-long { position: relative; max-height: 300px; overflow: hidden; }
.help-long::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 110px; pointer-events: none;
  background: linear-gradient(to bottom, rgba(12, 21, 31, 0), var(--navy-800));
}
.help-long.expanded { max-height: none; }
.help-long.expanded::after { display: none; }
.help-more {
  font: inherit; font-size: 0.88rem; font-weight: 600; cursor: pointer;
  color: var(--teal); background: transparent;
  border: 1px solid rgba(216, 252, 48, 0.4); border-radius: 999px;
  padding: 8px 20px; margin: 4px 0 22px;
  transition: background 0.16s var(--ease), color 0.16s var(--ease);
}
.help-more:hover { background: var(--teal); color: var(--accent-ink); border-color: var(--teal); }

/* instruction videos: poster card linking out to YouTube */
.help-video {
  position: relative; display: block; max-width: 420px; margin: 14px 0 18px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden;
  background: var(--navy-600);
}
.help-video img { display: block; width: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; max-width: none; }
.help-video-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--teal); box-shadow: 0 8px 26px rgba(0, 0, 0, 0.5);
}
.help-video-play::after {
  content: ""; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%);
  border-left: 17px solid var(--accent-ink);
  border-top: 11px solid transparent; border-bottom: 11px solid transparent;
}
.help-video-label {
  display: block; padding: 12px 16px; color: var(--text);
  font-size: 0.88rem; font-weight: 600;
}
.help-video:hover { border-color: var(--teal); }
.help-video:hover .help-video-label { color: var(--teal); }

/* search filtering */
.faq.is-hidden, .faq-cat.is-hidden { display: none; }

@media (max-width: 620px) {
  .help-tools { flex-direction: column; align-items: stretch; }
  .help-toggle-all { width: 100%; }
  details.faq .faq-body img { max-width: 100%; margin-right: 0; }
}

/* PDF / print: nothing may be collapsed or clipped away */
@media print {
  .help-long { max-height: none !important; overflow: visible !important; }
  .help-long::after, .help-more, .help-tools { display: none !important; }
  .faq-cat > h2 { break-after: avoid; }
  details.faq .faq-body img { break-inside: avoid; }
}
.legal p { color: var(--muted); font-size: 0.92rem; }

/* full-width sport banner (AI-generated athlete imagery, EU AI-Act labelled) */
.banner { position: relative; width: 100%; overflow: hidden; line-height: 0; }
.banner img { width: 100%; height: clamp(260px, 34vw, 440px); object-fit: cover; object-position: center 30%; display: block; }
/* wrapper that pins the AI label to any single image (brain art, etc.) */
.ai-img { position: relative; display: inline-block; line-height: 0; max-width: 100%; }
.ai-tag {
  position: absolute; bottom: 12px; right: 14px; line-height: 1; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.92);
  background: rgba(10, 18, 27, 0.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  padding: 6px 11px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.22);
}
.ai-tag svg { width: 12px; height: 12px; flex: none; }

/* Help page - category quick-nav + accordion FAQ */
.cat-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.cat-nav a { font-size: 0.88rem; font-weight: 500; color: var(--text); background: var(--navy-600); border: 1px solid var(--line); padding: 8px 16px; border-radius: 999px; }
.cat-nav a:hover { border-color: var(--teal); color: var(--teal); }
.faq-cat { margin-top: clamp(48px, 7vw, 80px); }
.faq-cat > h2 { font-family: var(--serif); font-weight: 600; color: var(--white); font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 8px; padding-bottom: 16px; border-bottom: 2px solid var(--teal); }
details.faq { border-bottom: 1px solid var(--line); }
details.faq summary { cursor: pointer; padding: 20px 0; color: var(--white); font-weight: 600; font-size: 1.04rem; list-style: none; display: flex; justify-content: space-between; gap: 20px; align-items: center; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; color: var(--teal); font-size: 1.5rem; line-height: 1; flex: none; }
details.faq[open] summary::after { content: "\2013"; }
details.faq .faq-body { padding: 0 0 22px; color: var(--muted); line-height: 1.7; max-width: 820px; overflow-wrap: break-word; }
details.faq .faq-body p { margin-bottom: 12px; }
details.faq .faq-body ul { margin: 0 0 12px; padding-left: 1.2em; }
details.faq .faq-body li { margin-bottom: 6px; }
details.faq .faq-body strong { color: var(--text); }

/* News cards reuse .blog-grid/.post-card; date sits in the .cat slot */

/* Safety and Warning block - prominent, identical on every page (regulatory) */
.safety {
  max-width: 980px; margin-inline: auto;
  background: var(--navy-600);
  border: 1px solid rgba(216, 252, 48, 0.38);
  border-radius: var(--radius);
  padding: 30px 34px;
}
.safety-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.safety-head svg { width: 24px; height: 24px; color: var(--teal); flex: none; }
.safety-head h3 { color: var(--white); font-size: 1.15rem; font-weight: 700; letter-spacing: 0.01em; }
.safety p { color: var(--text); font-size: 0.96rem; line-height: 1.66; }

/* hero with brain visual */
.hero-grid { display: grid; grid-template-columns: 0.95fr 1.15fr; gap: 28px; align-items: center; position: relative; z-index: 2; }
.hero-grid .hero-inner { max-width: none; }
.hero-visual { display: flex; justify-content: center; }
/* Heidi, 11 Sep: "Brain picture should be made much BIGGER" */
.hero-visual img { width: 100%; max-width: 680px; border-radius: 16px; box-shadow: 0 22px 55px rgba(0, 0, 0, 0.45); }
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { order: -1; }
  .hero-visual img { max-width: 380px; }
}


/* ============================================================
   Heidi's 11 Sep 2026 feedback - layout and search
   ============================================================ */

/* the emerald band: less dark space above it, more below it */
.statement + .banner, .statement + .section { margin-top: clamp(48px, 7vw, 88px); }

/* "Recrop this picture. Now the ACT Dock only is partially visible and
   should be fully visible." The source photo is fine; it was the square
   crop in .photo-grid that cut the dock off the bottom. */
.crop-bottom { object-position: center bottom !important; }

/* the Help hero photo is portrait, so the 4:3 frame has to sit low enough
   to keep both the skates and the sensor in view */
.hero-skates { object-position: center 80% !important; }

/* ---------- site-wide search ----------
   Heidi, 11 Sep: "No search bar for the site. > Please add search bar to the
   top or in the boiler to maximize the SEO." It is in both: a magnifier in
   the header that drops a full-width field, and a permanent field in the
   footer (a crawler sees the footer one without running any script). */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.search-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: none; margin-left: 2px;
  color: var(--text); background: transparent; cursor: pointer;
  border: 1px solid var(--line); border-radius: 999px;
  transition: color 0.16s var(--ease), border-color 0.16s var(--ease);
}
.search-toggle svg { width: 17px; height: 17px; }
.search-toggle:hover { color: var(--teal); border-color: var(--teal); }
.search-toggle[aria-expanded="true"] { color: var(--accent-ink); background: var(--teal); border-color: var(--teal); }

.header-search {
  border-top: 1px solid var(--line);
  background: rgba(10, 18, 27, 0.97);
  padding-block: 14px;
}

.site-search { position: relative; display: flex; align-items: center; gap: 10px; }
.site-search > svg {
  position: absolute; left: 40px; width: 18px; height: 18px;
  color: var(--muted); pointer-events: none;
}
.site-search input[type="search"] {
  flex: 1 1 auto; min-width: 0; font: inherit; font-size: 0.98rem;
  color: var(--text); background: var(--navy-600);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 12px 20px 12px 46px;
  transition: border-color 0.16s var(--ease);
}
.site-search input[type="search"]::placeholder { color: var(--muted-dim); }
.site-search input[type="search"]:focus { outline: none; border-color: var(--teal); }
.site-search input[type="search"]::-webkit-search-cancel-button { filter: invert(1) opacity(0.5); }
.site-search .btn { flex: none; }

.footer-search { margin-top: 22px; max-width: 340px; }
.footer-search > svg { left: 16px; }

@media (max-width: 980px) {
  .search-toggle { margin-left: auto; margin-right: 6px; }
}
@media print { .search-toggle, .header-search, .footer-search { display: none !important; } }

/* ---------- Help: regroup and centre the search + category chips ----------
   Heidi, 11 Sep: "Regroup, center and make nicer looking this part." The
   chips ran full width and left-aligned, so the last one sat alone against
   the left edge. */
.help-tools { justify-content: center; max-width: 980px; margin-inline: auto; }
.help-search { flex: 1 1 380px; }
.cat-nav {
  justify-content: center; gap: 10px 12px;
  max-width: 980px; margin-inline: auto; margin-bottom: 8px;
}
.cat-nav a {
  background: var(--navy-600); border: 1px solid var(--line-strong);
  padding: 9px 18px;
  transition: border-color 0.16s var(--ease), color 0.16s var(--ease),
              background 0.16s var(--ease);
}
.cat-nav a:hover { background: var(--navy-500); border-color: var(--teal); color: var(--teal); }
.help-cat-wrap { text-align: center; margin-bottom: clamp(18px, 3vw, 30px); }

/* ---------- contact form result ----------
   Heidi, 11 Sep: the form's messages went nowhere. It now posts through
   admin-post.php and mails contact@norspo.com; these are the two states it
   can come back in, plus the off-screen honeypot field that catches bots. */
.act-hp {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}
.form-notice {
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  margin-bottom: 20px;
  font-size: 0.96rem;
  font-weight: 500;
}
.form-notice-ok {
  color: #eafff5;
  background: var(--emerald);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.form-notice-bad {
  color: var(--white);
  background: rgba(190, 60, 60, 0.18);
  border: 1px solid rgba(240, 120, 120, 0.45);
}

/* the search results page: the box that repeats the query, and the count */
.search-again { margin-top: 28px; max-width: 560px; }
.search-again > svg { left: 16px; }
.search-count { margin-top: 14px; color: var(--muted); font-size: 0.95rem; }


/* ============================================================
   Platform showcase - product page
   Heidi, 16 Sep: "some images of the service are comparatively very small,
   they should be larger." The old row put 296x186 dashboard captures in
   third-of-a-row boxes next to a phone mockup. This gives the dashboard
   shots the width they need and keeps the phones narrow, where they belong.
   ============================================================ */
.data-showcase { display: grid; gap: clamp(20px, 3vw, 34px); margin-top: 30px; }
.data-showcase .data-shot {
  background: var(--navy-600); border: 1px solid var(--line);
  border-radius: var(--radius-sm); overflow: hidden;
  display: flex; flex-direction: column;
}
.data-showcase .data-shot img { width: 100%; height: auto; display: block; }
.data-showcase figcaption {
  color: var(--muted); font-size: 0.88rem; line-height: 1.55;
  padding: 14px 18px 16px;
}

/* the lead shot carries the whole row on its own */
.data-lead { max-width: 900px; margin-inline: auto; }

.data-two { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.4vw, 26px); }
.data-three { display: grid; grid-template-columns: 0.62fr 0.62fr 1.5fr; gap: clamp(16px, 2.4vw, 26px); align-items: start; }

/* phone captures are 9:16 - left to fill a grid column they tower over the
   landscape dashboard shots beside them */
.data-showcase .data-phone img { max-height: 520px; object-fit: contain; object-position: top; }

@media (max-width: 900px) {
  .data-two, .data-three { grid-template-columns: 1fr 1fr; }
  .data-three .data-shot:last-child { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .data-two, .data-three { grid-template-columns: 1fr; }
  .data-showcase .data-phone img { max-height: none; }
}
@media print {
  .data-showcase .data-shot { break-inside: avoid; }
}

/* ---------- home hero: the brain ----------
   Heidi, 17 Sep, Doc1.docx: "Make brain image bigger and center it to the
   header text. Like this", with a mockup. The mockup keeps the brain in the
   right-hand column, level with the headline - "center it TO the header
   text" is vertical alignment, not "put it in the middle of the page". An
   earlier reading had moved it below the text and centred it horizontally.

   Its width is bounded by the column, so the hero (and only the hero) gets a
   wider container than the rest of the site, and the split favours the image:
   480px originally -> 605 -> 670 here, beside the headline as she drew it. */
/* The hero is allowed to be wider than the rest of the site so the brain can
   be - but its LEFT edge still has to line up with the logo in the header, or
   the headline sits in from the page edge and looks wrong. So the extra width
   is taken on the right only: the padding below is exactly the difference
   between where a 1180 container starts and where a 1320 one does, which is
   70px on a wide screen and tapers to 0 on a narrow one. */
.hero .hero-grid {
  max-width: 1320px;
  margin-inline: auto;
  padding-left: calc(24px + max(0px, (100vw - 1180px) / 2) - max(0px, (100vw - 1320px) / 2));
}
.hero-grid {
  /* 0.88/1.22 is the largest the image can be while the headline still breaks
     into the six lines her mockup shows. Past this "your brain." wraps and it
     becomes seven. */
  grid-template-columns: 0.88fr 1.22fr;
  gap: clamp(28px, 3.4vw, 44px);
  align-items: center;
}
.hero-grid .hero-inner { max-width: none; }
.hero-visual img { max-width: 100%; }
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; gap: 38px; }
  .hero-visual { order: 0; }            /* was -1: the brain belongs below the headline */
  .hero-visual img { max-width: min(460px, 100%); margin-inline: auto; }
}


/* ---------- home hero: the brain, 6 Oct ----------
   Heidi, 6 Oct 2026, after go-live: the brain is still too small - "could it
   be enlarged to match the text content size on the left of the image".

   The brain is a landscape picture (940 x 526) and the headline beside it is
   six lines tall. With the 96px headline the brain could not get past two
   thirds of the headline's height on a 1440px screen, however the two
   columns were split. So on anything wider than a phone:
   - the headline is set about a fifth smaller (at most 76px, was 96px), in a
     column just wide enough for its six lines;
   - the brain takes the rest of the width and comes out as tall as the
     headline, level with it top and bottom;
   - the two introductory paragraphs and the buttons follow below the pair.
   The left edge still lines up with the logo (17 Sep): 50% - 566px is where
   the 1180px header container puts it. Phones keep the stacked layout above.
   Scoped to the home hero; the Why page's hero-grid is a different section. */
@media (min-width: 861px) {
  .hero > .hero-grid {
    max-width: none;
    margin-inline: 0;
    padding-left: max(24px, calc(50% - 566px));
    padding-right: 24px;
    grid-template-columns: minmax(0, min(calc(26.6vw + 8px), 400px)) minmax(0, 864px);
    column-gap: clamp(28px, 3.4vw, 44px);
    row-gap: 0;
    align-items: start;
  }
  .hero > .hero-grid > .hero-inner { display: contents; }
  .hero .hero-inner > .eyebrow { grid-column: 1 / -1; }
  .hero .hero-inner > .hero-title {
    grid-column: 1;
    grid-row: 2;
    font-size: clamp(2.9rem, 5.2vw, 4.75rem);
    margin-bottom: 0;
  }
  .hero > .hero-grid > .hero-visual { grid-column: 2; grid-row: 2; align-self: center; }
  .hero .hero-inner > .hero-lead,
  .hero .hero-inner > .hero-actions { grid-column: 1 / -1; }
  .hero .hero-title + .hero-lead { margin-top: clamp(32px, 3.4vw, 48px); }
}

/* ============================================================
   Heidi's 21 Sep 2026 corrections
   ============================================================ */

/* "Add Coming soon -text to this image" - the player-comparison capture.
   A ribbon rather than a caption, because she asked on 17 Sep for the caption
   texts under these shots to go. */
.data-shot { position: relative; }
.data-soon::after {
  content: "Coming soon";
  position: absolute; top: 12px; right: 12px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-ink); background: var(--teal);
  padding: 5px 12px; border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

/* the raw-data table gets a row of its own */
.data-wide .data-shot { max-width: 100%; }

/* five phone captures across. They are 9:16, so they stay narrow and wrap
   rather than each taking a fifth of a very wide row. */
.data-phones {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(12px, 1.8vw, 20px);
  align-items: start;
}
@media (max-width: 1000px) { .data-phones { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px)  { .data-phones { grid-template-columns: repeat(2, 1fr); } }

/* "Re-crop the headband image." The headband is a 1600x842 product shot and
   the gallery cell is about 1.24:1, so object-fit: cover was slicing roughly a
   third off each end. It is shown whole instead, on the white it was shot
   against so the padding is invisible. Scoped to this one figure - the rule
   that caused the original complaint was a loose descendant selector. */
.acc-gallery .media-card.fit-whole { background: #fff; }
.acc-gallery .media-card.fit-whole img { object-fit: contain; padding: 6% 4%; }

/* ============================================================
   Help: Heidi's 21 Sep instructions (Doc1.docx)
   ============================================================
   The classes come from help_revisions.py ("mark", on a whole answer) and
   help_layout.py (rows, pairs and warning panels inside an answer). Every
   selector starts "details.faq .faq-body" because the base Help rules do, and
   a shorter selector silently loses to them. That is how 1.9.3 ended up with
   no padding on the warning panel and a near-white bold line on white. */

/* Answers whose pictures she asked to be bigger, and the warning answers, use
   the full width of the page. Their text keeps the 820px reading measure: a
   1130px line of text is too long to read comfortably. */
details.faq .faq-body.help-wide,
details.faq .faq-body.help-wide-images { max-width: none; }
details.faq .faq-body.help-wide > :is(p, ul, ol, h3, h4, h5),
details.faq .faq-body.help-wide-images > :is(p, ul, ol, h3, h4, h5) { max-width: 820px; }

/* "Images are too small, text and warnings in them are not readable. They
   have to be made bigger going from left side to right side of the page." */
details.faq .faq-body.help-wide-images img {
  display: block; width: 100%; height: auto; margin: 18px 0;
}
details.faq .faq-body > p.help-center,
details.faq .faq-body.help-wide-images > p.help-center { text-align: center; max-width: none; }

/* Team Dashboard: "on the black background, no white background". The
   screenshots are dark app captures, so they drop the white frame. */
details.faq .faq-body.help-no-frame img {
  background: none; border: 0; padding: 0; border-radius: 8px;
}

/* "Remove the bullets before the images. Place the pictures side by side, not
   on top of each other." A grid: WordPress leaves whitespace between blocks,
   which made the inline-block rows of 1.9.2 wrap 2 + 1, and a grid ignores
   it. Six phone screenshots go across the page, three on a phone. */
details.faq .faq-body .help-img-row {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px; align-items: start; margin: 16px 0 22px; max-width: 820px;
}
details.faq .faq-body .help-img-row.help-cols-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr)); max-width: none;
}
details.faq .faq-body .help-img-row > * { margin: 0; min-width: 0; }
details.faq .faq-body .help-img-row a { display: block; }
details.faq .faq-body .help-img-row img {
  display: block; width: 100%; max-width: 100%; height: auto; margin: 0;
}
@media (max-width: 760px) {
  details.faq .faq-body .help-img-row.help-cols-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* The tape, tape and head pictures are three different shapes. Columns in
   proportion to each one's width-to-height bring them out the same height, as
   in her mockup, and the row stops at about their real size. */
details.faq .faq-body .help-img-row.help-row-tape {
  grid-template-columns: 94fr 75fr 80fr; max-width: 560px;
}

/* "The white helmet is in the wrong place. It should be placed next to the
   black helmet." Both files are 238px tall, so columns in proportion to their
   widths give one row at one height. The white helmet file is a 217px photo
   in the middle of a 784px white canvas; it is cropped to the photo. */
details.faq .faq-body .help-img-pair { grid-template-columns: 700fr 217fr; max-width: none; }
details.faq .faq-body .help-img-pair img[src*="Junior-helmet-with-sensor-dock"] {
  aspect-ratio: 217 / 238; object-fit: cover;
}

/* The warnings: a white panel, red text, and each section that opens with
   WARNING framed in a thin red line and set in bold - her mockups (Doc1.docx
   p.56, p.126, p.130, p.275, p.281), and how the old site's text boxes drew
   them. The same panel is used on the Disclaimers and Important Usage pages
   (theme-wp.css). */
.help-warning-panel {
  background: #fff; color: #d81f26;
  border-radius: var(--radius-sm); padding: 22px 26px; margin: 18px 0 24px;
  line-height: 1.6;
}
details.faq .faq-body .help-warning-panel :is(p, li, span, b, strong, em, i, u, div) { color: #d81f26; }
details.faq .faq-body .help-warning-panel p { margin: 0 0 6px; }
details.faq .faq-body .help-warning-panel a { color: #0b5ea8; text-decoration: underline; }
details.faq .faq-body .help-warn-box { border: 1px solid #d81f26; padding: 10px 14px; margin: 14px 0; }
/* lines inside a box run on evenly, as in her mockup, whether the source
   made them separate paragraphs or one paragraph with line breaks */
details.faq .faq-body .help-warn-box p { margin: 0; }
.help-warn-box,
details.faq .faq-body .help-warn-box :is(p, li, span, b, strong) { font-weight: 700; }
details.faq .faq-body .help-warning-panel > figure { margin: 16px 0; }
/* the warning labels run the full width of the panel; the small 0-6 age icon
   keeps the width set on it */
details.faq .faq-body .help-warning-panel img {
  display: block; width: 100%; max-width: 100%; height: auto;
  margin: 16px 0; padding: 0; border: 0; border-radius: 0; background: none;
}
/* ============================================================
   WordPress integration
   Appended by _tools/build_theme.py. Everything above this line is the
   approved prototype stylesheet, unchanged. These rules only bridge the
   markup that core blocks emit and the prototype's class names - core wraps
   query results in <ul><li>, and renders dates/excerpts inside their own
   wrapper divs, neither of which the static prototype had.
   ============================================================ */

/* core/post-template renders <ul class="blog-grid"><li class="wp-block-post"> */
.blog-grid { list-style: none; margin: 0; padding: 0; }
.blog-grid > li { display: flex; margin: 0; }
.blog-grid > li > .post-card { flex: 1; }

/* the card is a div now, not an anchor, so stretch the title link over it */
.post-card.is-card-link { position: relative; }
.post-card.is-card-link .wp-block-post-title a::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
}
.post-card .wp-block-post-title { margin: 0; }
.post-card .wp-block-post-title a { color: inherit; text-decoration: none; }
.post-card .wp-block-post-date,
.post-card .wp-block-post-excerpt { margin: 0; }
.post-card .wp-block-post-excerpt__more-text { display: none; }

/* pagination */
.wp-block-query-pagination.pager {
  display: flex; gap: 10px; align-items: center; justify-content: center;
  margin-top: 44px; flex-wrap: wrap;
}
.wp-block-query-pagination.pager a,
.wp-block-query-pagination.pager span {
  color: var(--muted); font-size: 0.92rem; font-weight: 600;
  border: 1px solid var(--line); border-radius: 999px; padding: 9px 16px;
  text-decoration: none;
}
.wp-block-query-pagination.pager a:hover { color: var(--teal); border-color: var(--teal); }
.wp-block-query-pagination.pager .current {
  color: var(--accent-ink); background: var(--teal); border-color: var(--teal);
}

/* single post body: reuse the article styles the prototype already defines */
.post-body > * { margin-bottom: 18px; }
.post-body h2, .post-body h3 { color: var(--white); font-family: var(--serif); margin-top: 34px; }
.post-body img { border-radius: var(--radius-sm); }
.post-body a { color: var(--teal); text-decoration: underline; text-underline-offset: 2px; }

/* the editor canvas has no <body> background, so paint it for block previews */
.editor-styles-wrapper { background: var(--navy-800); color: var(--text); }

/* the card's "Read article" affordance (core/read-more) */
.post-card .wp-block-read-more { text-decoration: none; }

/* Featured images on News. Every one of the 125 posts has one, and the first
   build rendered none of them - Heidi's "There are NO IMAGES IN NEWS articles". */
.post-card .card-media { margin: -34px -32px 4px; line-height: 0; }
.post-card .card-media img,
.post-card .card-media a { display: block; width: 100%; }
.post-card .card-media img {
  height: 100%; object-fit: cover;
  border-radius: var(--radius) var(--radius) 0 0;
}
.post-hero-media { margin: 22px 0 0; line-height: 0; }
.post-hero-media img {
  width: 100%; display: block;
  border-radius: var(--radius); border: 1px solid var(--line);
}
@media (max-width: 620px) { .post-card .card-media { margin: -24px -22px 4px; } }

/* Legal and reference pages (Disclaimers, Cookie Policy, Important Usage, the
   privacy policies, Terms). These come off Pagelayer as a long run of plain
   paragraphs, and without this they render edge to edge with no hierarchy -
   Heidi: "Please make look more stylish, but do keep the texts exactly as they
   are in the old site." The text is untouched; only its presentation changes. */
.legal-body { font-size: 0.97rem; }
.legal-body > * { margin-bottom: 14px; }
.legal-body p { color: var(--text); line-height: 1.72; }
.legal-body strong { color: var(--white); }
.legal-body h2, .legal-body h3, .legal-body h4 {
  font-family: var(--serif); color: var(--white);
  margin-top: 40px; margin-bottom: 10px;
}
.legal-body h2 { font-size: 1.5rem; }
.legal-body h3 { font-size: 1.2rem; }
.legal-body a { color: var(--teal); text-decoration: underline; text-underline-offset: 2px; }
.legal-body ul, .legal-body ol { margin: 0 0 14px; padding-left: 1.3em; }
.legal-body li { margin-bottom: 7px; }

/* the warning graphics on Disclaimers, and any other inline image on these pages */
.legal-body figure.wp-block-image { margin: 26px 0; }
.legal-body figure.wp-block-image img {
  max-width: min(100%, 420px);
  background: #fff; padding: 8px;
  border: 1px solid var(--line); border-radius: 10px;
}

/* a paragraph that is entirely bold reads as a heading in these documents */
.legal-body p > strong:only-child { display: inline-block; padding-top: 8px; }
/* Disclaimers and Important Usage: Heidi's warnings panel (styles.css,
   .help-warning-panel), run wider than the 768px text column - "Add Warnings
   in this format and big size". The panel grows to the page width and stays
   centred on the column; on a phone it is simply the column. */
.legal-body .help-warning-panel {
  --pw: min(1132px, calc(100vw - 48px));
  width: var(--pw);
  margin: 30px 0 34px calc((100% - var(--pw)) / 2);
}
.legal-body .help-warning-panel :is(p, li, span, b, strong, em, i, u, div) { color: #d81f26; }
.legal-body .help-warning-panel p { margin: 0 0 6px; line-height: 1.6; }
.legal-body .help-warning-panel p > strong:only-child { padding-top: 0; }
.legal-body .help-warning-panel a { color: #0b5ea8; }
.legal-body .help-warn-box { border: 1px solid #d81f26; padding: 10px 14px; margin: 14px 0; }
.legal-body .help-warn-box p { margin: 0; }
.legal-body .help-warn-box :is(p, li, span, b, strong) { font-weight: 700; }
.legal-body .help-warning-panel figure.wp-block-image { margin: 16px 0; }
.legal-body .help-warning-panel figure.wp-block-image img {
  display: block; width: 100%; max-width: 100%; height: auto;
  padding: 0; border: 0; border-radius: 0; background: none;
}

/* User manual: the one link to the PDF, with the book symbol the old page had */
.legal-body .doc-link { margin: 6px 0 0; }
.legal-body .doc-link a {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 1.12rem; font-weight: 600;
}
.legal-body .doc-link a::before {
  content: ""; flex: none; width: 34px; height: 30px; background: var(--teal);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 4h6.5A3.5 3.5 0 0 1 12 7.5V21a2.5 2.5 0 0 0-2.5-2.5H2z'/%3E%3Cpath d='M22 4h-6.5A3.5 3.5 0 0 0 12 7.5V21a2.5 2.5 0 0 1 2.5-2.5H22z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 4h6.5A3.5 3.5 0 0 1 12 7.5V21a2.5 2.5 0 0 0-2.5-2.5H2z'/%3E%3Cpath d='M22 4h-6.5A3.5 3.5 0 0 0 12 7.5V21a2.5 2.5 0 0 1 2.5-2.5H22z'/%3E%3C/svg%3E") center / contain no-repeat;
}