/* ==========================================================================
   Trip Manager — schooltripmanager.com
   Static marketing site stylesheet. No build step, no frameworks, no CDN.
   Design system: design-system/trip-manager/MASTER.md
   Style: Minimalism & Swiss — spacious, grid-based, high contrast.
   Palette: Trip Manager brand (marketing/brand) — teal / mint / amber / slate.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  --teal-950: #0a3330;
  --teal-900: #134e4a;
  --teal-800: #115e59;
  --teal-700: #0f766e;   /* primary */
  --mint-300: #5eead4;
  --mint-200: #99f6e4;
  --mint-100: #ccfbf1;
  --mint-50:  #f0fdfa;
  --amber:    #fbbf24;   /* location-pin motif only */

  /* Neutrals */
  --ink:       #0f172a;
  --slate-700: #334155;
  --slate-600: #475569;
  --slate-400: #94a3b8;
  --slate-300: #cbd5e1;
  --slate-200: #e2e8f0;
  --slate-100: #f1f5f9;
  --slate-50:  #f8fafc;
  --white:     #ffffff;

  /* Semantic */
  --bg:            var(--white);
  --bg-subtle:     var(--slate-50);
  --bg-brand-soft: var(--mint-50);
  --surface:       var(--white);
  --text:          var(--ink);
  --text-muted:    var(--slate-600);
  --text-on-dark:  #ffffff;
  --text-on-dark-muted: var(--mint-100);
  --border:        var(--slate-200);
  --border-strong: var(--slate-300);
  --primary:       var(--teal-700);
  --primary-hover: var(--teal-800);
  --on-primary:    #ffffff;
  --ring:          var(--teal-700);
  --ring-on-dark:  var(--amber);

  /* Spacing — spacious scale (density 3/10) */
  --sp-1: 0.25rem; --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
  --sp-9: 6rem;    --sp-10: 8rem;

  /* Radius */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-2xl: 32px;
  --r-pill: 999px;

  /* Elevation — sharp and restrained (Swiss) */
  --sh-1: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.05);
  --sh-2: 0 2px 4px rgba(15, 23, 42, 0.05), 0 6px 16px rgba(15, 23, 42, 0.07);
  --sh-3: 0 8px 24px rgba(15, 23, 42, 0.09), 0 2px 6px rgba(15, 23, 42, 0.05);
  --sh-4: 0 18px 48px rgba(15, 23, 42, 0.16), 0 4px 12px rgba(15, 23, 42, 0.08);

  /* Motion — subtle tier (2/10) */
  --dur-fast: 140ms;
  --dur: 220ms;
  --dur-slow: 380ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* Layout */
  --container: 1160px;
  --container-narrow: 760px;
  --header-h: 72px;

  /* Type — Inter is not bundled (no licensed local copy in the repository),
     so the stack leads with the system UI faces the brand SVGs already
     fall back through. No runtime webfont request. */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text",
    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1.0625rem;          /* 17px */
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;            /* belt and braces against 320px overflow */
}

h1, h2, h3, h4 {
  margin: 0 0 var(--sp-4);
  line-height: 1.15;
  letter-spacing: -0.022em;
  font-weight: 700;
  color: var(--text);
  text-wrap: balance;
}

h1 { font-size: clamp(2.125rem, 1.55rem + 2.5vw, 3.5rem); letter-spacing: -0.032em; }
h2 { font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem); letter-spacing: -0.028em; }
h3 { font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem); line-height: 1.3; }
h4 { font-size: 1rem; line-height: 1.4; }

p { margin: 0 0 var(--sp-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--primary); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--primary-hover); }

/* Links inside running prose are the WCAG "inline" target-size exception, but
   a little vertical padding lifts their hit area past 24px without affecting
   the line box or the layout around them. */
.prose p a, .prose li a, .faq__panel a { padding-block: 3px; }

ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.25rem; }
li { margin-bottom: var(--sp-2); }
li:last-child { margin-bottom: 0; }

img, svg, picture { max-width: 100%; height: auto; display: block; }

strong { font-weight: 650; color: var(--ink); }

hr { border: 0; border-top: 1px solid var(--border); margin: var(--sp-7) 0; }

/* Focus — visible everywhere, never removed */
:focus-visible {
  outline: 3px solid var(--ring);
  outline-offset: 2px;
  border-radius: 4px;
}
.band--dark :focus-visible,
.cta-band :focus-visible,
.site-footer :focus-visible { outline-color: var(--ring-on-dark); }

::selection { background: var(--mint-200); color: var(--ink); }

/* Skip link */
.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: var(--sp-4);
  z-index: 200;
  transform: translateY(-160%);
  background: var(--teal-900);
  color: #fff;
  padding: 0.85rem 1.25rem;
  border-radius: var(--r-md);
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--sh-3);
  transition: transform var(--dur) var(--ease);
}
.skip-link:focus { transform: translateY(0); color: #fff; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-4);
}
@media (min-width: 640px)  { .container { padding-inline: var(--sp-5); } }
@media (min-width: 1024px) { .container { padding-inline: var(--sp-6); } }

.container--narrow { max-width: var(--container-narrow); }

.band { padding-block: var(--sp-8); }
@media (min-width: 768px) { .band { padding-block: var(--sp-9); } }

.band--subtle { background: var(--bg-subtle); }
.band--brand  { background: var(--bg-brand-soft); }

.band--dark {
  background: var(--teal-900);
  color: var(--text-on-dark);
}
.band--dark h2, .band--dark h3, .band--dark h4 { color: #fff; }
.band--dark p { color: var(--text-on-dark-muted); }
/* Buttons carry their own colours — the link rule must not match them. */
.band--dark a:not(.btn) { color: var(--mint-200); }
.band--dark a:not(.btn):hover { color: #fff; }

.band__head { max-width: 46rem; margin-bottom: var(--sp-7); }
.band__head--centred { margin-inline: auto; text-align: center; }
.band__head p { font-size: 1.125rem; color: var(--text-muted); margin-bottom: 0; }
.band--dark .band__head p { color: var(--text-on-dark-muted); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--teal-700);
  margin-bottom: var(--sp-3);
}
.band--dark .eyebrow { color: var(--mint-200); }
.eyebrow::before {
  content: "";
  width: 20px; height: 2px;
  background: currentColor;
  border-radius: 2px;
  flex: none;
}
.band__head--centred .eyebrow::before { display: none; }

.lede { font-size: 1.1875rem; color: var(--text-muted); }

/* Grids */
.grid { display: grid; gap: var(--sp-5); }
.grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
@media (min-width: 620px) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  min-width: 48px;
  padding: 0.75rem 1.5rem;
  border: 2px solid transparent;
  border-radius: var(--r-pill);
  font: inherit;
  font-weight: 650;
  font-size: 1rem;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.btn svg { flex: none; }

.btn--primary {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
  box-shadow: var(--sh-2);
}
.btn--primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: #fff; }

.btn--secondary {
  background: var(--white);
  border-color: var(--border-strong);
  color: var(--ink);
}
.btn--secondary:hover { background: var(--slate-50); border-color: var(--slate-400); color: var(--ink); }

.btn--ghost-light {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}
.btn--ghost-light:hover { background: rgba(255, 255, 255, 0.14); border-color: #fff; color: #fff; }

.btn--on-dark {
  background: #fff;
  border-color: #fff;
  color: var(--teal-900);
}
.btn--on-dark:hover { background: var(--mint-100); border-color: var(--mint-100); color: var(--teal-900); }

.btn--lg { min-height: 54px; padding: 0.9rem 1.85rem; font-size: 1.0625rem; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}

/* Section-level booking call to action. Deliberately lighter than the header,
   hero and closing buttons so the hierarchy stays intact. */
.cta-inline {
  margin: var(--sp-6) 0 0;
  text-align: center;
}
.cta-inline .btn { box-shadow: var(--sh-1); }
.band--dark .cta-inline .btn {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}
.band--dark .cta-inline .btn:hover { background: rgba(255, 255, 255, 0.14); border-color: #fff; }

/* Reassurance line under a primary call to action */
.cta-note {
  margin-top: var(--sp-4);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 34rem;
}
.cta-band .cta-note { color: var(--mint-100); margin-inline: auto; max-width: 38rem; }

/* --------------------------------------------------------------------------
   5. Header & navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--border);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  flex: none;
  min-height: 44px;
  text-decoration: none;
}
.brand img { height: 32px; width: auto; }
@media (min-width: 480px) { .brand img { height: 38px; } }

.nav { margin-left: auto; }

.nav__list {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.15rem;
  margin: 0;
  padding: 0;
}
.nav__list li { margin: 0; }

.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 0.65rem;
  border-radius: var(--r-sm);
  color: var(--slate-700);
  font-size: 0.9375rem;
  font-weight: 550;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav__link:hover { background: var(--slate-100); color: var(--ink); }

.header__cta { flex: none; }

/* Mobile toggle */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
  min-height: 44px;
  min-width: 44px;
  padding: 0.5rem 0.85rem;
  background: var(--white);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  color: var(--ink);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
}
.nav-toggle:hover { background: var(--slate-50); }
.nav-toggle__bars { position: relative; width: 18px; height: 12px; flex: none; }
.nav-toggle__bars span {
  position: absolute; left: 0; width: 100%; height: 2px;
  background: currentColor; border-radius: 2px;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 5px; }
.nav-toggle__bars span:nth-child(3) { top: 10px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* Below 1024px the nav collapses behind the toggle */
@media (max-width: 1139.98px) {
  .site-header__inner { position: relative; }
  .nav-toggle { display: inline-flex; }
  .header__cta { display: none; }
  .nav {
    display: none;
    position: absolute;
    /* The header inner element is the .container itself, so its border box
       already spans the viewport — no negative offsets needed. */
    left: 0;
    right: 0;
    top: 100%;
    background: var(--white);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--sh-3);
    padding: var(--sp-3) var(--sp-4) var(--sp-5);
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
  }
  .nav.is-open { display: block; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__link {
    min-height: 52px;
    padding: 0.75rem 0.5rem;
    border-bottom: 1px solid var(--slate-100);
    border-radius: 0;
    font-size: 1.0625rem;
  }
  .nav__cta { margin-top: var(--sp-4); }
  .nav__cta .btn { width: 100%; }
}
@media (min-width: 640px) and (max-width: 1139.98px) {
  .nav { padding-inline: var(--sp-5); }
}
@media (min-width: 1140px) {
  .nav-toggle { display: none; }
  .nav { display: block; }
  .nav__cta { display: none; }
}

/* No-JS fallback: the toggle cannot work, so the links are shown inline */
.no-js .nav-toggle { display: none; }
@media (max-width: 1139.98px) {
  .no-js .nav {
    display: block;
    position: static;
    box-shadow: none;
    border-bottom: 0;
    padding: 0 0 var(--sp-4);
    max-height: none;
  }
  .no-js .site-header { position: static; }
  .no-js .site-header__inner { flex-wrap: wrap; }
  .no-js .nav { width: 100%; margin-left: 0; }
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--mint-50) 0%, #ffffff 78%);
  padding-block: var(--sp-7) var(--sp-8);
}
@media (min-width: 768px) { .hero { padding-block: var(--sp-8) var(--sp-9); } }

/* Decorative route motif — echoes the brand mark rather than a generic blob */
.hero__motif {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.hero__motif svg {
  position: absolute;
  top: -8%;
  right: -18%;
  width: min(720px, 96%);
  height: auto;
  opacity: 0.55;
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--sp-7);
  align-items: center;
}
@media (min-width: 980px) {
  /* The media column is the wider of the two: the platform screenshot is the
     message, not a decorative aside. */
  .hero__inner { grid-template-columns: minmax(0, 0.98fr) minmax(0, 1.02fr); gap: var(--sp-7); }
}
@media (min-width: 1200px) {
  .hero__inner { gap: var(--sp-8); }
}
/* Keep both hero CTAs on one line in the narrower copy column. */
@media (min-width: 980px) {
  .hero .btn-row .btn { padding-inline: 1.35rem; }
}

.hero h1 { margin-bottom: var(--sp-4); }
.hero__sub {
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  color: var(--slate-700);
  max-width: 34rem;
  margin-bottom: var(--sp-5);
}
.hero .btn-row { margin-bottom: var(--sp-6); }

.hero__points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-3);
  max-width: 34rem;
}
.hero__points li {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin: 0;
  font-size: 0.9875rem;
  color: var(--slate-700);
}
.tick {
  flex: none;
  width: 22px; height: 22px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--mint-100);
  color: var(--teal-800);
  display: grid;
  place-items: center;
}
.tick svg { width: 13px; height: 13px; }

.hero__media { position: relative; }

/* --------------------------------------------------------------------------
   6b. Product showcase — genuine platform screenshot in a browser frame
   The desktop platform is the dominant visual; the phone is deliberately
   secondary and is hidden entirely on small screens, where the screenshot
   needs the full width and the iOS section further down carries the app.
   -------------------------------------------------------------------------- */
.showcase { position: relative; margin: 0; }

.showcase__browser {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: var(--sh-4);
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 500ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 500ms var(--ease);
}
.hero__media.is-tilting .showcase__browser { box-shadow: 0 28px 60px rgba(15, 23, 42, 0.2), 0 6px 18px rgba(15, 23, 42, 0.1); }

.showcase__chrome {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  background: var(--slate-100);
  border-bottom: 1px solid var(--border);
}

.showcase__shot {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1425 / 990;   /* matches the current desktop captures */
  object-fit: cover;
  object-position: top center;
  background: var(--slate-50);
}

/* Same frame reused further down the page, without the overlapping phone */
.showcase--inline .showcase__browser { box-shadow: var(--sh-3); }
.showcase__shot--tall { aspect-ratio: 1425 / 990; }

.showcase__caption {
  display: block;
  margin-top: var(--sp-4);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--slate-600);
  text-align: center;
}

/* Interactive tour layered over the genuine dashboard screenshot. */
.tour__hotspots { position: absolute; inset: 38px 0 0; pointer-events: none; }
.tour__hotspot {
  position: absolute; z-index: 4; display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0; border: 3px solid #fff;
  border-radius: 50%; background: var(--teal-700); color: #fff;
  font: 750 0.8125rem/1 var(--font-sans);
  box-shadow: 0 6px 18px rgba(15, 118, 110, 0.34);
  cursor: pointer; pointer-events: auto; transform: translate(-50%, -50%);
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.tour__hotspot::before {
  content: ""; position: absolute; inset: -9px; border: 2px solid rgba(15, 118, 110, 0.42);
  border-radius: inherit; animation: tour-pulse 2.4s ease-out infinite;
}
.tour__hotspot:hover, .tour__hotspot[aria-pressed="true"] {
  background: var(--amber); color: var(--ink); transform: translate(-50%, -50%) scale(1.12);
  box-shadow: 0 8px 22px rgba(251, 191, 36, 0.38);
}
.tour__hotspot[aria-pressed="true"]::before { border-color: rgba(251, 191, 36, 0.65); }
.tour__hotspot--approvals { left: 29%; top: 44%; }
.tour__hotspot--trips { left: 48%; top: 44%; }
.tour__hotspot--consent { left: 87%; top: 44%; }
.tour__copy {
  display: flex; align-items: center; gap: var(--sp-3); min-height: 76px;
  margin: var(--sp-4) auto 0; padding: var(--sp-3) var(--sp-4); max-width: 38rem;
  background: rgba(255, 255, 255, 0.92); border: 1px solid var(--mint-100);
  border-radius: var(--r-md); box-shadow: var(--sh-1);
}
.tour__copy .tour__copy-num {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 50%; background: var(--amber); color: var(--ink);
  font-size: 0.8125rem; font-weight: 750;
}
.tour__copy p { margin: 0; font-size: 0.875rem; line-height: 1.45; }
.tour__copy strong, .tour__copy span { display: block; }
.tour__copy strong { margin-bottom: 2px; }
.tour__copy p span { color: var(--slate-600); }
.tour__fallback { display: none; }
.no-js .tour__hotspots, .no-js .tour__copy { display: none; }
.no-js .tour__fallback { display: grid; gap: var(--sp-2); margin: var(--sp-4) 0 0; padding-left: 1.25rem; font-size: 0.875rem; color: var(--slate-700); }
@keyframes tour-pulse { 0% { opacity: 0.75; transform: scale(0.78); } 70%, 100% { opacity: 0; transform: scale(1.35); } }
@media (max-width: 479.98px) {
  .tour__hotspot { width: 44px; height: 44px; border-width: 2px; }
  .tour__hotspots { top: 34px; }
  .tour__copy { align-items: flex-start; }
}

/* The hero frame spans the full media column: the platform screenshot is the
   whole message there. The companion app is shown, legibly, in its own
   section further down the page. */

/* --------------------------------------------------------------------------
   7. Phone mockups (HTML/CSS interface illustrations)
   Used for the companion-app screens. The genuine platform screenshots use
   the .showcase block above.
   -------------------------------------------------------------------------- */
.mock-note {
  display: block;
  margin-top: var(--sp-4);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--slate-600);
  text-align: center;
}
.band--dark .mock-note, .cta-band .mock-note { color: var(--mint-100); }

.phone {
  position: relative;
  width: 100%;
  max-width: 286px;
  margin-inline: auto;
  aspect-ratio: 9 / 19;
  background: #0b1220;
  border-radius: 40px;
  padding: 9px;
  box-shadow: var(--sh-4), inset 0 0 0 1.5px rgba(255, 255, 255, 0.16);
  flex: none;
}
.phone__screen {
  position: relative;
  height: 100%;
  width: 100%;
  border-radius: 32px;
  background: var(--slate-50);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-size: 11px;
  line-height: 1.35;
  color: var(--ink);
}
.phone__island {
  position: absolute;
  top: 8px; left: 50%;
  transform: translateX(-50%);
  width: 62px; height: 17px;
  background: #0b1220;
  border-radius: var(--r-pill);
  z-index: 3;
}
.phone__status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 15px 4px;
  font-size: 10px;
  font-weight: 700;
  flex: none;
}
.phone__status-icons { display: flex; align-items: flex-end; gap: 3px; height: 9px; }
.phone__status-icons i { display: block; width: 2.5px; background: var(--ink); border-radius: 1px; }
.phone__status-icons i:nth-child(1) { height: 3px; }
.phone__status-icons i:nth-child(2) { height: 5px; }
.phone__status-icons i:nth-child(3) { height: 7px; }
.phone__status-icons i:nth-child(4) { height: 9px; }
.phone__battery {
  width: 17px; height: 9px;
  border: 1.2px solid var(--ink);
  border-radius: 2.5px;
  padding: 1px;
  margin-left: 3px;
}
.phone__battery span { display: block; height: 100%; width: 72%; background: var(--ink); border-radius: 1px; }

.phone__body {
  flex: 1 1 auto;
  overflow: hidden;
  padding: 4px 12px 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.phone__title {
  font-size: 13px;
  font-weight: 750;
  letter-spacing: -0.02em;
  margin: 2px 0 0;
  text-align: center;
}
.phone__topbar {
  display: flex; align-items: center; gap: 8px;
  padding: 2px 0 0;
  font-size: 11.5px; font-weight: 700;
}
.phone__topbar .phone__title { flex: 1 1 auto; margin: 0; }
.phone__back {
  width: 24px; height: 24px; border-radius: 50%;
  background: #fff; box-shadow: var(--sh-1);
  display: grid; place-items: center; color: var(--teal-800);
  flex: none;
}
.phone__back svg { width: 12px; height: 12px; }
.phone__spacer { width: 24px; flex: none; }

.phone__card {
  background: #fff;
  border-radius: 14px;
  padding: 10px 11px;
  box-shadow: var(--sh-1);
}
.phone__school { display: flex; align-items: center; gap: 5px; font-size: 9.5px; font-weight: 650; color: var(--slate-600); margin-bottom: 5px; }
.phone__school .tile { width: 15px; height: 15px; border-radius: 4px; background: var(--teal-700); flex: none; display: grid; place-items: center; }
.phone__school .tile svg { width: 10px; height: 10px; }
.phone__name { font-size: 16px; font-weight: 780; letter-spacing: -0.02em; margin: 0 0 3px; }
.phone__trip { font-size: 11.5px; font-weight: 700; margin: 0 0 6px; }

.pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  font-size: 9.5px; font-weight: 700;
  background: var(--mint-100); color: var(--teal-900);
}
.pill svg { width: 10px; height: 10px; }
.pill--info { background: #dbeafe; color: #1e3a8a; }
.pill--new  { background: var(--teal-700); color: #fff; }
.pill--warn { background: #fef3c7; color: #78350f; }

.phone__label { font-size: 9.5px; font-weight: 650; color: var(--slate-600); margin: 7px 0 0; }
.phone__time-big { font-size: 15px; font-weight: 780; letter-spacing: -0.02em; margin: 0; }

.phone__quote {
  background: var(--slate-100);
  border-radius: 10px;
  padding: 8px 9px;
  font-size: 10px;
  color: var(--slate-700);
  margin-top: 7px;
}
.phone__quote small { display: block; margin-top: 4px; color: var(--slate-600); font-size: 9px; }

.phone__btns { display: flex; gap: 6px; margin-top: 9px; }
.phone__btn {
  flex: 1 1 0;
  text-align: center;
  padding: 7px 4px;
  border-radius: 9px;
  font-size: 10px;
  font-weight: 700;
}
.phone__btn--fill { background: var(--teal-800); color: #fff; }
.phone__btn--out  { border: 1.4px solid var(--teal-800); color: var(--teal-800); }

.phone__section-head {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  font-size: 12px; font-weight: 750; letter-spacing: -0.01em;
  margin-top: 2px;
}
.phone__count {
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--slate-200); color: var(--slate-700);
  font-size: 9.5px; font-weight: 700;
  display: grid; place-items: center;
}
.phone__seeall {
  border: 1.3px solid var(--teal-700);
  color: var(--teal-800);
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 9.5px;
  font-weight: 700;
}

.phone__alert {
  background: #fffbeb;
  border: 1.4px solid #fde68a;
  border-radius: 12px;
  padding: 9px 10px;
}
.phone__alert-title { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 750; color: #78350f; margin-bottom: 3px; }
.phone__alert-title svg { width: 12px; height: 12px; flex: none; }
.phone__alert p { font-size: 9.8px; color: var(--slate-700); margin: 0 0 3px; }
.phone__alert .due { display: flex; align-items: center; gap: 4px; font-size: 9.5px; font-weight: 650; color: #92400e; }
.phone__alert .due svg { width: 11px; height: 11px; flex: none; }

.phone__timeline { list-style: none; margin: 6px 0 0; padding: 0; }
.phone__timeline li {
  display: grid;
  grid-template-columns: 13px 1fr auto;
  gap: 7px;
  align-items: center;
  margin: 0 0 7px;
  font-size: 10.5px;
}
.phone__timeline li:last-child { margin-bottom: 0; }
.phone__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--teal-700); display: grid; place-items: center; }
.phone__dot svg { width: 8px; height: 8px; color: #fff; }
.phone__dot--now { background: #fff; box-shadow: inset 0 0 0 3px var(--teal-700); }
.phone__timeline time { color: var(--slate-600); font-size: 9.5px; font-weight: 600; }
.phone__timeline .now { font-weight: 750; }

.phone__row {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 0;
  border-bottom: 1px solid var(--slate-100);
  font-size: 10.5px;
}
.phone__row:last-child { border-bottom: 0; }
.phone__avatar {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--mint-100); color: var(--teal-900);
  font-size: 9px; font-weight: 750;
  display: grid; place-items: center; flex: none;
}
.phone__row-name { flex: 1 1 auto; font-weight: 650; min-width: 0; }
.phone__check {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--teal-700); color: #fff;
  display: grid; place-items: center; flex: none;
}
.phone__check svg { width: 10px; height: 10px; }
.phone__check--open { background: transparent; box-shadow: inset 0 0 0 1.6px var(--slate-300); }

.phone__update { background: #fff; border-radius: 12px; padding: 9px 10px; box-shadow: var(--sh-1); }
.phone__update-top { display: flex; align-items: center; gap: 5px; margin-bottom: 5px; }
.phone__update-top time { margin-left: auto; font-size: 9px; color: var(--slate-600); font-weight: 600; }
.phone__update-title { font-size: 11px; font-weight: 750; margin: 0 0 2px; }
.phone__update-body { font-size: 9.8px; color: var(--slate-700); margin: 0; }
.phone__update .loc { display: flex; align-items: center; gap: 4px; margin-top: 5px; font-size: 9px; color: var(--slate-600); }
.phone__update .loc svg { width: 10px; height: 10px; color: var(--amber); flex: none; }

.phone__photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.phone__photos span {
  aspect-ratio: 1;
  border-radius: 7px;
  background: linear-gradient(160deg, var(--mint-100), var(--mint-200));
}
.phone__photos span:nth-child(3n+2) { background: linear-gradient(160deg, #e0f2fe, #bae6fd); }
.phone__photos span:nth-child(3n+3) { background: linear-gradient(160deg, #ecfccb, #d9f99d); }

.phone__note-line { text-align: center; font-size: 9px; color: var(--slate-600); margin: 0 0 8px; }

.phone__tabs {
  flex: none;
  margin: auto 10px 10px;
  background: #fff;
  border-radius: var(--r-pill);
  box-shadow: var(--sh-2);
  display: flex;
  justify-content: space-around;
  padding: 6px 4px;
}
.phone__tab {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 8.5px; font-weight: 650; color: var(--slate-600);
  padding: 3px 9px; border-radius: var(--r-pill);
}
.phone__tab svg { width: 15px; height: 15px; }
.phone__tab.is-active { color: var(--teal-800); background: var(--mint-50); }

/* The illustrations are self-contained light-mode interfaces. Inside a dark
   band, `.band--dark p` would otherwise win over the rules above and repaint
   this text mint-on-white, so the illustration's own colours are restated at
   a specificity that beats it. */
.phone__screen .phone__school,
.phone__screen .phone__label,
.phone__screen .phone__note-line,
.phone__screen .phone__update .loc { color: var(--slate-600); }

.phone__screen .phone__name,
.phone__screen .phone__trip,
.phone__screen .phone__time-big,
.phone__screen .phone__update-title { color: var(--ink); }

.phone__screen .phone__alert p,
.phone__screen .phone__update-body { color: var(--slate-700); }

.phone__screen .phone__alert .due { color: #92400e; }
.phone__screen .phone__alert .phone__alert-title { color: #78350f; }

/* Supplied app-icon source, shown at touch-icon scale */
.app-icon {
  width: 64px;
  height: 64px;
  border-radius: 15px;
  margin-bottom: var(--sp-4);
  box-shadow: var(--sh-3);
}
@media (min-width: 768px) { .app-icon { width: 72px; height: 72px; border-radius: 17px; } }

/* Phone cluster (iOS section) */
.app-screenshot { margin: 0 auto; width: 100%; max-width: 300px; }
.app-screenshot img { display: block; width: 100%; height: auto; border-radius: 16px; box-shadow: var(--sh-3); }
.app-screenshot figcaption { margin-top: 12px; text-align: center; font-size: 0.875rem; line-height: 1.5; color: var(--slate-600); }
.band--dark .app-screenshot figcaption { color: #e2e8f0; }
.app-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.app-gallery--four { margin-top: 24px; }
@media (min-width: 900px) { .app-gallery--four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 480px) { .app-gallery { grid-template-columns: 1fr; } }

.phone-cluster {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: var(--sp-4);
}
.phone-cluster .phone { max-width: 246px; }
.phone-cluster .phone--side { display: none; }
@media (min-width: 820px) {
  .phone-cluster .phone--side { display: block; max-width: 210px; margin-bottom: var(--sp-6); }
  .phone-cluster { gap: var(--sp-5); }
}

/* --- Browser chrome, shared by the real product screenshots --- */
.browser__dots { display: flex; gap: 5px; flex: none; }
.browser__dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--slate-300); display: block; }
.browser__url {
  flex: 1 1 auto;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 3px 10px;
  font-size: 10.5px;
  color: var(--slate-600);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* --------------------------------------------------------------------------
   8. Cards & content components
   -------------------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  height: 100%;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.card h3 { margin-bottom: var(--sp-2); }
.card p { color: var(--text-muted); font-size: 0.9875rem; margin-bottom: 0; }
.card--hover:hover { border-color: var(--mint-200); box-shadow: var(--sh-2); transform: translateY(-2px); }

.card--dark { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.18); }
.card--dark p { color: var(--text-on-dark-muted); }

.icon-badge {
  width: 46px; height: 46px;
  border-radius: var(--r-md);
  background: var(--mint-50);
  border: 1px solid var(--mint-100);
  color: var(--teal-700);
  display: grid;
  place-items: center;
  margin-bottom: var(--sp-4);
  flex: none;
}
.icon-badge svg { width: 24px; height: 24px; }
.card--dark .icon-badge {
  background: rgba(153, 246, 228, 0.14);
  border-color: rgba(153, 246, 228, 0.3);
  color: var(--mint-200);
}

/* Feature strip (4 across, under hero) */
.strip { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
@media (min-width: 620px)  { .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.strip__item {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  padding: var(--sp-4);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}
.strip__item .icon-badge { margin-bottom: 0; width: 40px; height: 40px; }
.strip__item .icon-badge svg { width: 21px; height: 21px; }
.strip__item h3 { font-size: 1rem; margin-bottom: 2px; }
.strip__item p { font-size: 0.875rem; color: var(--text-muted); margin: 0; }

/* Alternating feature rows */
.feature-row { display: grid; gap: var(--sp-6); align-items: center; }
.feature-row + .feature-row { margin-top: var(--sp-8); }
@media (min-width: 900px) {
  .feature-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-8); }
  .feature-row + .feature-row { margin-top: var(--sp-9); }
  .feature-row--flip .feature-row__media { order: -1; }
}
.feature-row__media { min-width: 0; }

.check-list { list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: grid; gap: var(--sp-3); }
.check-list li { display: flex; gap: 0.7rem; align-items: flex-start; margin: 0; font-size: 0.9875rem; color: var(--slate-700); }
.band--dark .check-list li { color: var(--text-on-dark-muted); }
.band--dark .tick { background: rgba(153, 246, 228, 0.18); color: var(--mint-200); }

/* Answer-first definition paragraph */
.definition {
  font-size: 1.1875rem;
  line-height: 1.6;
  color: var(--slate-700);
  max-width: 44rem;
  margin-inline: auto;
  margin-bottom: 0;
}
.band__head .definition strong { color: var(--ink); }

/* Platform / companion split — the platform column is visually weighted */
.split { display: grid; gap: var(--sp-5); align-items: start; }
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--sp-6); }
}
.split__col {
  position: relative;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  height: 100%;
}
.split__col--primary {
  background: var(--mint-50);
  border-color: var(--mint-200);
  box-shadow: var(--sh-2);
}
/* Specificity must beat `.split__col > p` below, or the label loses its
   white-on-teal colour and drops to 1.38:1. */
.split__col .split__tag {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.7rem;
  margin-bottom: var(--sp-4);
  border-radius: var(--r-pill);
  background: var(--teal-700);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.split__col .split__tag--muted { background: var(--slate-200); color: var(--slate-700); }
.split__col .icon-badge { margin-bottom: var(--sp-3); }
.split__col > p { color: var(--text-muted); font-size: 0.9875rem; }

/* Problem / outcome */
.compare { display: grid; gap: var(--sp-5); }
@media (min-width: 860px) { .compare { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); } }
.compare__col { border-radius: var(--r-lg); padding: var(--sp-5); border: 1px solid var(--border); }
.compare__col--before { background: var(--slate-50); }
.compare__col--after { background: var(--mint-50); border-color: var(--mint-100); }
.compare__col h3 { margin-bottom: var(--sp-2); }
.compare__col > p { font-size: 0.9375rem; color: var(--text-muted); margin: 0; }
.compare__list { list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: grid; gap: var(--sp-3); }
.compare__list li { display: flex; gap: 0.7rem; align-items: flex-start; margin: 0; font-size: 0.9875rem; color: var(--slate-700); }
.compare__list .mark { flex: none; width: 20px; height: 20px; margin-top: 2px; display: grid; place-items: center; color: var(--slate-400); }
.compare__col--after .compare__list .mark { color: var(--teal-700); }
.compare__list .mark svg { width: 17px; height: 17px; }

/* Branded trip journey connecting the six real stages. */
.journey { --journey-progress: 0; position: relative; padding-left: 54px; }
.journey__route { position: absolute; z-index: 0; top: 6px; bottom: 6px; left: 17px; width: 20px; }
.journey__track, .journey__progress { position: absolute; left: 8px; top: 0; width: 4px; height: 100%; border-radius: var(--r-pill); }
.journey__track { background: var(--slate-200); }
.journey__progress { background: linear-gradient(180deg, var(--teal-700), var(--mint-300)); transform: scaleY(var(--journey-progress)); transform-origin: top; transition: transform 90ms linear; }
.journey__pin { position: absolute; z-index: 3; top: calc(var(--journey-progress) * (100% - 34px)); left: -7px; display: grid; place-items: center; width: 34px; height: 34px; color: var(--amber); filter: drop-shadow(0 5px 6px rgba(120, 53, 15, 0.25)); transition: top 90ms linear; }
.journey__pin svg { width: 28px; height: 28px; fill: currentColor; }
.journey__pin circle { fill: var(--teal-900); }
.journey__waypoint { position: absolute; z-index: 2; left: 3px; width: 14px; height: 14px; border: 3px solid var(--teal-700); border-radius: 50%; background: #fff; transform: translateY(-50%); }
.journey__waypoint--1 { top: 3%; } .journey__waypoint--2 { top: 21%; } .journey__waypoint--3 { top: 40%; }
.journey__waypoint--4 { top: 60%; } .journey__waypoint--5 { top: 79%; } .journey__waypoint--6 { top: 97%; }
.steps { position: relative; z-index: 1; display: grid; gap: var(--sp-5); list-style: none; padding: 0; margin: 0; }
@media (min-width: 700px)  { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.step {
  position: relative;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  padding-top: var(--sp-6);
  box-shadow: var(--sh-1);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.step.is-current { border-color: var(--teal-700); box-shadow: 0 12px 34px rgba(15, 118, 110, 0.14); transform: translateY(-3px); }
.step__num {
  position: absolute;
  top: calc(-1 * var(--sp-3));
  left: var(--sp-5);
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--teal-700);
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 750;
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 5px var(--bg-subtle);
}
.step h3 { font-size: 1.0625rem; margin-bottom: var(--sp-2); }
.step p { font-size: 0.9375rem; color: var(--text-muted); margin: 0; }
@media (min-width: 700px) {
  .journey { padding-left: 0; padding-top: 58px; }
  .journey__route { top: 12px; bottom: auto; left: 5%; width: 90%; height: 24px; }
  .journey__track, .journey__progress { left: 0; top: 10px; width: 100%; height: 4px; }
  .journey__progress { transform: scaleX(var(--journey-progress)); transform-origin: left; }
  .journey__pin { top: -5px; left: calc(var(--journey-progress) * (100% - 34px)); transition: left 90ms linear; }
  .journey__waypoint { top: 12px; transform: translate(-50%, -50%); }
  .journey__waypoint--1 { left: 0; } .journey__waypoint--2 { left: 20%; } .journey__waypoint--3 { left: 40%; }
  .journey__waypoint--4 { left: 60%; } .journey__waypoint--5 { left: 80%; } .journey__waypoint--6 { left: 100%; }
}

/* MIS flow */
.flow { display: grid; gap: var(--sp-3); align-items: stretch; margin-bottom: var(--sp-6); }
@media (min-width: 800px) { .flow { grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: var(--sp-4); } }
.flow__node {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-5) var(--sp-4);
  text-align: center;
  box-shadow: var(--sh-1);
  height: 100%;
}
.flow__node--brand { border-color: var(--teal-700); border-width: 2px; background: var(--mint-50); }
.flow__node .icon-badge { margin-inline: auto; margin-bottom: var(--sp-3); }
.flow__node h3 { font-size: 1.0625rem; margin-bottom: var(--sp-1); }
.flow__node p { font-size: 0.875rem; color: var(--text-muted); margin: 0; }
.flow__arrow { display: grid; place-items: center; color: var(--teal-700); padding: var(--sp-1) 0; }
.flow__arrow svg { width: 26px; height: 26px; }
@media (max-width: 799.98px) { .flow__arrow svg { transform: rotate(90deg); } }

.chip-list { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; padding: 0; }
.chip-list li { margin: 0; }
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  background: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--slate-700);
}

.note {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  padding: var(--sp-4);
  border-radius: var(--r-md);
  background: var(--slate-50);
  border: 1px solid var(--border);
  font-size: 0.9375rem;
  color: var(--slate-700);
}
.note svg { flex: none; width: 20px; height: 20px; color: var(--teal-700); margin-top: 3px; }
.note p { margin: 0; }
.note--brand { background: var(--mint-50); border-color: var(--mint-100); }
.band--dark .note {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--text-on-dark-muted);
}
.band--dark .note svg { color: var(--mint-200); }
.band--dark .note p { color: var(--text-on-dark-muted); }

/* Visit types */
.tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (min-width: 700px) { .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); } }
.tile-item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  align-items: flex-start;
  padding: var(--sp-4);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-weight: 650;
  font-size: 0.9375rem;
  color: var(--slate-700);
}
.tile-item svg { width: 22px; height: 22px; color: var(--teal-700); }

/* Security list */
.sec-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
@media (min-width: 720px) { .sec-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-5); } }
.sec-list li {
  display: flex; gap: 0.7rem; align-items: flex-start; margin: 0;
  font-size: 0.9875rem; color: var(--text-on-dark-muted);
}

/* --------------------------------------------------------------------------
   9. FAQ accordion — readable without JavaScript
   -------------------------------------------------------------------------- */
.faq { display: grid; gap: var(--sp-3); }
.faq__item {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}

.faq__q { margin: 0; font-size: 1rem; }
.faq__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  width: 100%;
  min-height: 60px;
  padding: var(--sp-4) var(--sp-5);
  background: none;
  border: 0;
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 650;
  line-height: 1.4;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease);
}
.faq__trigger:hover { background: var(--slate-50); }
.faq__trigger:focus-visible { outline-offset: -3px; }

.faq__icon {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--mint-50);
  color: var(--teal-800);
  display: grid;
  place-items: center;
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.faq__icon svg { width: 16px; height: 16px; }
.faq__trigger[aria-expanded="true"] .faq__icon { transform: rotate(180deg); background: var(--mint-100); }

.faq__panel { padding: 0 var(--sp-5) var(--sp-5); }
.faq__panel p { color: var(--text-muted); margin-bottom: var(--sp-3); }
.faq__panel > :last-child { margin-bottom: 0; }

/* Without JS the trigger is a plain heading and every panel stays open */
.no-js .faq__icon { display: none; }
.no-js .faq__trigger { cursor: default; min-height: 0; padding-bottom: var(--sp-2); }

/* --------------------------------------------------------------------------
   10. Closing CTA & footer
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative;
  background-color: var(--teal-900);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.cta-band__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("../images/backdrop.webp");
  background-size: cover;
  background-position: center;
  opacity: 0.32;
}
.cta-band__inner { position: relative; text-align: center; max-width: 44rem; margin-inline: auto; }
.cta-band h2 { color: #fff; }
.cta-band p { color: var(--mint-100); font-size: 1.125rem; }
.cta-band .btn-row { justify-content: center; margin-top: var(--sp-6); }

.site-footer {
  background: var(--ink);
  color: var(--slate-300);
  padding-block: var(--sp-7) var(--sp-6);
  font-size: 0.9375rem;
}
.site-footer a { color: var(--mint-200); }
.site-footer a:hover { color: #fff; }
.site-footer__top {
  display: grid;
  gap: var(--sp-6);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
@media (min-width: 820px) {
  .site-footer__top { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-7); }
}
.site-footer__brand img { height: 36px; width: auto; margin-bottom: var(--sp-4); }
.site-footer__brand p { color: var(--slate-400); max-width: 32rem; margin-bottom: 0; }
.site-footer h2 {
  font-size: 0.8125rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: var(--sp-2);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 0; }
.site-footer li a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0.25rem 0;
  text-decoration: none;
}
.site-footer li a:hover { text-decoration: underline; }
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  align-items: center;
  justify-content: space-between;
  padding-top: var(--sp-5);
  color: var(--slate-400);
  font-size: 0.875rem;
}
.site-footer__bottom p { margin: 0; }

/* --------------------------------------------------------------------------
   11. Long-form pages (privacy, accessibility, 404)
   -------------------------------------------------------------------------- */
.page-head {
  background: var(--mint-50);
  border-bottom: 1px solid var(--mint-100);
  padding-block: var(--sp-7);
}
.page-head p { color: var(--slate-700); font-size: 1.125rem; margin-bottom: 0; max-width: 44rem; }

.prose { max-width: 46rem; }
.prose h2 { font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem); margin-top: var(--sp-7); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: var(--sp-5); }
.prose ul { padding-left: 1.15rem; }
.prose li { color: var(--slate-700); }

.placeholder {
  display: block;
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-left: 4px solid #b45309;
  border-radius: var(--r-sm);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
  font-size: 0.9375rem;
  color: #78350f;
}
.placeholder strong { color: #78350f; }
.placeholder :last-child { margin-bottom: 0; }
.placeholder code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: rgba(120, 53, 15, 0.12);
  padding: 0.1em 0.4em;
  border-radius: 4px;
}

.error-page { text-align: center; padding-block: var(--sp-9); }
.error-page__code {
  font-size: clamp(3.5rem, 2rem + 6vw, 6rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--teal-700);
  margin: 0 0 var(--sp-4);
}
.error-page .btn-row { justify-content: center; }
.error-page__links { list-style: none; padding: 0; margin: var(--sp-6) 0 0; }
.error-page__links li { margin-bottom: var(--sp-1); }

/* --------------------------------------------------------------------------
   12. Motion — subtle reveal, disabled under reduced motion
   -------------------------------------------------------------------------- */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .card--hover:hover { transform: none; }
  .tour__hotspot::before { display: none; }
  .journey { --journey-progress: 1 !important; }
  .journey__pin { display: none; }
  .step.is-current { transform: none; }
}

/* --------------------------------------------------------------------------
   13. Print
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .cta-band, .skip-link, .nav-toggle { display: none !important; }
  body { font-size: 11pt; color: #000; background: #fff; }
  .band { padding-block: 1rem; }
  .phone, .browser { box-shadow: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; word-break: break-all; }
}