/* ============================================================================
   SILVERA MOBILITY

   Two constraints pull against each other here and both hold: do not design it
   like a hospital supply catalogue, and do not reduce clarity to look
   luxurious. Everything premium in this file is bought with typography,
   restraint and space. Nothing is bought by shrinking type, dropping contrast
   or hiding navigation, because the customer may have reduced vision, reduced
   hand control or a bad connection, and accessibility here is the product
   rather than a checklist appended to it.

   1  tokens
   2  reset and base
   3  typography
   4  layout
   5  buttons and controls
   6  header, mega menu, mobile nav
   7  hero
   8  needs, products, cards
   9  product page
   10 comparison
   11 finder
   12 editorial, guides, policy
   13 footer
   14 line art
   15 responsive
   ========================================================================= */

/* ---------------------------------------------------------------- 1 tokens */
:root {
  --paper:      #FCFBF9;   /* warm white, never clinical */
  --paper-2:    #F4F2EE;   /* the quiet band */
  --paper-3:    #EAE7E1;
  --ink:        #14181C;   /* graphite, deliberately not navy: navy is Digilu */
  --ink-2:      #3A4247;
  --silver:     #6E777C;   /* 5.1:1 on paper. the lightest text tone allowed */
  --hair:       #DCD8D1;

  --sig:        #E0701A;   /* marigold. graphic use only */
  --sig-ink:    #96490B;   /* 6.4:1 on paper. every accent TEXT uses this */
  --sig-tint:   #FBF0E5;
  --sig-hair:   #EFD3B4;

  --ok:         #2C6E49;
  --warn-ink:   #8A5A00;

  --display: 'Jost', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Body copy is 18px on desktop and never below 16px anywhere. This is not a
     concession to the audience, it is what makes long product copy readable. */
  --fs-body: 1.125rem;
  --lh-body: 1.65;

  --shell: 1240px;
  --gut: 2rem;
  --rad: 4px;      /* almost square. rounded-rectangle soup is the thing to avoid */
  --focus: 3px solid var(--sig-ink);
}

/* ------------------------------------------------------- 2 reset and base */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;         /* the page body must never scroll sideways */
}

img, svg, video { max-width: 100%; }
img { height: auto; display: block; }   /* height:auto or a height attr stretches it */

a { color: inherit; }

:focus-visible {
  outline: var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}
:focus:not(:focus-visible) { outline: none; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: #fff; padding: 1rem 1.5rem;
  font-weight: 600; text-decoration: none;
}
.skip:focus { left: 0; }

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------- 3 typography */
/* An inline SVG with no width attribute fills its container, which turns a 22px
   tick in a heading into a 500px one. Constrain it once, here, rather than
   remembering to size every icon at every call site. */
h4 > svg, h4 svg, .tickset > li > svg, .trustline svg, .pdp-reassure svg {
  width: 22px; height: 22px; flex: 0 0 22px;
}
h4 { display: flex; align-items: center; gap: .55rem; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 .6em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); letter-spacing: -0.028em; }
h2 { font-size: clamp(2rem, 4vw, 2.9rem); letter-spacing: -0.022em; }
h3 { font-size: clamp(1.35rem, 2.2vw, 1.65rem); }
h4 { font-size: 1.18rem; }

p { margin: 0 0 1.15em; max-width: 68ch; }

.eyebrow {
  font-family: var(--display);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sig-ink);
  margin: 0 0 1.1rem;
}
.eyebrow--quiet { color: var(--silver); }

.lede {
  font-size: clamp(1.2rem, 1.9vw, 1.4rem);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 60ch;
}

.fine { font-size: .95rem; color: var(--silver); line-height: 1.55; }

/* ------------------------------------------------------------- 4 layout */
.shell { max-width: var(--shell); margin: 0 auto; padding: 0 var(--gut); }
.shell--narrow { max-width: 820px; }

section { padding: clamp(3rem, 5.5vw, 5rem) 0; }
section.tight { padding: clamp(2rem, 3.5vw, 3rem) 0; }
.band { background: var(--paper-2); }
.band--ink { background: var(--ink); color: var(--paper); }
.band--ink .lede, .band--ink .fine { color: #B9BFC3; }
.band--ink .eyebrow { color: var(--sig); }
.band--sig { background: var(--sig-tint); }

.rule { border: 0; border-top: 1px solid var(--hair); margin: 0; }

.section-head { margin-bottom: clamp(1.5rem, 2.6vw, 2.4rem); max-width: 40ch; }
.section-head p { color: var(--ink-2); }

.grid { display: grid; gap: clamp(1.5rem, 3vw, 2.6rem); }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

/* ------------------------------------------------ 5 buttons and controls */
/* 52px minimum height everywhere. A person with reduced hand control does not
   get a second chance at a 36px target. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 54px; padding: .85rem 1.9rem;
  font-family: var(--display); font-size: 1.05rem; font-weight: 500;
  letter-spacing: .01em;
  border: 2px solid transparent; border-radius: var(--rad);
  text-decoration: none; cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.btn--primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--primary:hover { background: #000; border-color: #000; }
.btn--sig { background: var(--sig-ink); color: #fff; border-color: var(--sig-ink); }
.btn--sig:hover { background: #7C3C08; border-color: #7C3C08; }
.btn--ghost { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.band--ink .btn--ghost { border-color: var(--paper); color: var(--paper); }
.band--ink .btn--ghost:hover { background: var(--paper); color: var(--ink); }
.btn--wide { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }

.textlink {
  font-weight: 500; color: var(--sig-ink);
  text-decoration: underline; text-underline-offset: .25em;
  text-decoration-thickness: 1.5px;
}
.textlink:hover { text-decoration-thickness: 2.5px; }

/* --------------------------------------- 6 header, mega menu, mobile nav */
.site-header {
  position: sticky; top: 0; z-index: 200;
  background: var(--paper);
  border-bottom: 1px solid var(--hair);
}
.header-inner {
  max-width: var(--shell); margin: 0 auto; padding: 0 var(--gut);
  display: flex; align-items: center; gap: 2rem; min-height: 72px;
}
.site-logo { display: flex; align-items: center; flex: 0 0 auto; }
.site-logo img { height: 40px; width: auto; }

.primary-nav { display: flex; align-items: center; gap: .25rem; margin-left: auto; }
.nav-item { position: relative; }
.nav-link {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: 1.1rem .95rem; min-height: 54px;
  font-family: var(--display); font-size: 1.02rem; font-weight: 500;
  text-decoration: none; color: var(--ink);
  border-bottom: 3px solid transparent;
}
.nav-item:hover > .nav-link,
.nav-item:focus-within > .nav-link { border-bottom-color: var(--sig); }
.nav-caret { width: 15px; height: 15px; opacity: .5; transition: transform .18s ease; }
.nav-item:hover .nav-caret, .nav-item:focus-within .nav-caret { transform: rotate(180deg); }

.mega-menu {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(-8px);
  min-width: 640px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  padding-top: 10px;
}
.mega-menu--wide { min-width: 880px; }
.mega-menu--r { left: auto; right: 0; transform: translateX(0) translateY(-8px); }
.nav-item:hover > .mega-menu,
.nav-item:focus-within > .mega-menu {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-item:hover > .mega-menu--r,
.nav-item:focus-within > .mega-menu--r { transform: translateX(0) translateY(0); }

.mega-menu-inner {
  background: var(--paper);
  border: 1px solid var(--hair);
  border-top: 3px solid var(--sig);
  box-shadow: 0 22px 50px rgba(20, 24, 28, .13);
  padding: 2rem;
  display: grid; gap: 2rem;
}
.mega-menu--wide .mega-menu-inner { grid-template-columns: 1.15fr 1fr; }

.mm-glabel {
  display: block; font-family: var(--display); font-size: .74rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--silver);
  margin: 0 0 .9rem;
}
.mm-list { display: grid; gap: .1rem; align-content: start; }
.mm-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.6rem; }
.mm-row {
  display: flex; gap: .85rem; align-items: flex-start;
  padding: .7rem .75rem; margin: 0 -.75rem;
  text-decoration: none; border-radius: var(--rad);
}
.mm-row:hover { background: var(--paper-2); }
.mm-ico { flex: 0 0 26px; margin-top: 2px; }
.mm-ico svg { width: 26px; height: 26px; display: block; }
.mm-tt { display: block; font-family: var(--display); font-weight: 500; font-size: 1.02rem; }
.mm-ds { display: block; font-size: .88rem; color: var(--silver); line-height: 1.4; margin-top: .1rem; }

.mm-feature {
  background: var(--paper-2); padding: 1.6rem; border-radius: var(--rad);
  display: flex; flex-direction: column;
}
.mm-feature img { border-radius: var(--rad); margin-bottom: 1.1rem; }
.mm-feature .mm-tt { font-size: 1.15rem; margin-bottom: .3rem; }

.header-cta { display: flex; align-items: center; gap: .8rem; flex: 0 0 auto; }
.header-cta .btn { min-height: 48px; padding: .6rem 1.3rem; font-size: .98rem; }

.menu-toggle {
  display: none; width: 54px; height: 54px; background: none;
  border: 1px solid var(--hair); border-radius: var(--rad); cursor: pointer;
  padding: 0; position: relative;
}
.menu-toggle span {
  display: block; width: 24px; height: 2px; background: var(--ink);
  margin: 5px auto; transition: transform .2s ease, opacity .2s ease;
}
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
  display: none; background: var(--paper); border-bottom: 1px solid var(--hair);
  padding: 1rem var(--gut) 2rem;
  max-height: calc(100vh - 84px); overflow-y: auto;
}
.mobile-nav.open { display: block; }
.mobile-nav a {
  display: block; padding: 1rem 0; min-height: 54px;
  font-family: var(--display); font-size: 1.15rem; text-decoration: none;
  border-bottom: 1px solid var(--hair);
}
.mnav-group > summary {
  list-style: none; cursor: pointer; padding: 1rem 0; min-height: 54px;
  font-family: var(--display); font-size: 1.15rem;
  border-bottom: 1px solid var(--hair);
  display: flex; justify-content: space-between; align-items: center;
}
.mnav-group > summary::-webkit-details-marker { display: none; }
.mnav-group > summary::after { content: '+'; font-size: 1.5rem; color: var(--silver); }
.mnav-group[open] > summary::after { content: '\2212'; }
.mnav-group a { padding-left: 1rem; font-size: 1.02rem; color: var(--ink-2); }
.mobile-cta { margin-top: 1.5rem; display: grid; gap: .8rem; }

/* --------------------------------------------------------------- 7 hero */
.hero { padding: 0; border-bottom: 1px solid var(--hair); }
.hero-inner {
  max-width: var(--shell); margin: 0 auto; padding: clamp(3rem, 6vw, 5.5rem) var(--gut);
  display: grid; grid-template-columns: 1.02fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.hero h1 { margin-bottom: 1.2rem; }
.hero .lede { margin-bottom: 2rem; }
.hero-media { position: relative; }
.hero-media img { border-radius: var(--rad); width: 100%; }

/* A caption instead of text laid over the photograph. Text on an image is a
   contrast failure waiting for the next breakpoint. */
.hero-cap {
  margin-top: .9rem; font-size: .92rem; color: var(--silver);
  display: flex; gap: .6rem; align-items: baseline;
}
.hero-cap b { color: var(--ink); font-weight: 600; }

.trustline {
  display: flex; flex-wrap: wrap; gap: 1.5rem 2.2rem;
  padding: 1.4rem 0 0; margin-top: 2rem; border-top: 1px solid var(--hair);
  font-size: .96rem; color: var(--ink-2);
}
.trustline span { display: flex; gap: .5rem; align-items: center; }
.trustline svg { width: 20px; height: 20px; flex: 0 0 20px; }

/* --------------------------------------------- 8 needs, products, cards */
.need-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--hair); }
.need {
  display: flex; flex-direction: column; gap: .8rem;
  padding: 2rem 1.8rem 2.2rem;
  border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
  text-decoration: none; background: transparent;
  transition: background-color .16s ease;
}
.need:first-child { border-left: 1px solid var(--hair); }
.need:hover { background: var(--paper-2); }
.need__mark svg { width: 46px; height: 46px; }
.need__q { font-family: var(--display); font-size: 1.22rem; line-height: 1.25; }
.need__blurb { font-size: .96rem; color: var(--silver); margin: 0; }
.need__go { margin-top: auto; padding-top: .8rem; font-size: .93rem; font-weight: 600; color: var(--sig-ink); }

/* Product tiles are a grid, not floating rounded rectangles. The separation is
   done with alignment and one hairline. */
.prod-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.6rem); }
.prod {
  display: flex; flex-direction: column; text-decoration: none;
  border-top: 1px solid var(--hair); padding-top: 1.4rem;
}
.prod__shot {
  background: var(--paper-2); border-radius: var(--rad);
  aspect-ratio: 1 / 1; overflow: hidden; margin-bottom: 1.2rem;
  display: flex; align-items: center; justify-content: center;
}
.prod__shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.prod:hover .prod__shot img { transform: scale(1.03); }
.prod__name { font-family: var(--display); font-size: 1.3rem; font-weight: 500; margin: 0 0 .35rem; }
.prod__line { font-size: .98rem; color: var(--ink-2); margin: 0 0 1rem; }
.prod__foot { margin-top: auto; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.prod__price { font-family: var(--display); font-size: 1.25rem; font-weight: 500; }
.prod__per { font-size: .88rem; color: var(--silver); }
.prod__go { font-size: .95rem; font-weight: 600; color: var(--sig-ink); }

/* "Best for" is a scoped claim, which is the only kind allowed here. There is
   deliberately no overall rating anywhere in this stylesheet. */
.bestfor {
  display: inline-block; font-family: var(--display); font-size: .78rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--sig-ink); background: var(--sig-tint); border: 1px solid var(--sig-hair);
  padding: .3rem .7rem; border-radius: 2px; margin-bottom: .9rem;
}

/* --------------------------------------------------------- 9 product page */
.pdp { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.pdp-gallery { position: sticky; top: 108px; }
.pdp-main {
  background: var(--paper-2); border-radius: var(--rad); overflow: hidden;
  aspect-ratio: 1 / 1; margin-bottom: .9rem;
}
.pdp-main img { width: 100%; height: 100%; object-fit: cover; }
.pdp-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: .6rem; }
.pdp-thumb {
  background: var(--paper-2); border: 2px solid transparent; border-radius: var(--rad);
  padding: 0; cursor: pointer; overflow: hidden; aspect-ratio: 1 / 1;
}
.pdp-thumb[aria-current="true"] { border-color: var(--ink); }
.pdp-thumb img { width: 100%; height: 100%; object-fit: cover; }

.pdp h1 { font-size: clamp(2.1rem, 3.6vw, 3rem); margin-bottom: .5rem; }
.pdp-sub { font-size: 1.18rem; color: var(--ink-2); margin-bottom: 1.6rem; }
.pdp-price { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: .4rem; }
.pdp-price b { font-family: var(--display); font-size: 2.2rem; font-weight: 500; }
.pdp-price span { color: var(--silver); font-size: 1rem; }
.pdp-buy { margin: 1.6rem 0 1rem; display: grid; gap: .8rem; }
.pdp-reassure { display: grid; gap: .55rem; margin: 1.2rem 0 0; padding: 0; list-style: none; }
.pdp-reassure li { display: flex; gap: .6rem; align-items: flex-start; font-size: .98rem; color: var(--ink-2); }
.pdp-reassure svg { width: 20px; height: 20px; flex: 0 0 20px; margin-top: 3px; }

.gap-box {
  border-left: 3px solid var(--sig); background: var(--sig-tint);
  padding: 1.5rem 1.7rem; margin: 2rem 0; border-radius: 0 var(--rad) var(--rad) 0;
}
.gap-box p { margin: 0; font-size: 1.06rem; }

/* The pair that makes the page trustworthy. They are the same size on purpose:
   the moment "not ideal for" gets smaller than "best for", it is decoration. */
.fitgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--hair); border-radius: var(--rad); overflow: hidden; }
.fit { padding: 1.6rem 1.7rem; }
.fit + .fit { border-left: 1px solid var(--hair); }
.fit h4 { margin-bottom: .9rem; font-size: 1.05rem; }
.fit ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .7rem; }
.fit li { font-size: .99rem; line-height: 1.5; padding-left: 1.5rem; position: relative; color: var(--ink-2); }
.fit--yes li::before { content: ''; position: absolute; left: 0; top: .55em; width: 9px; height: 9px; border-radius: 50%; background: var(--ok); }
.fit--no li::before { content: ''; position: absolute; left: 0; top: .78em; width: 11px; height: 2px; background: var(--silver); }

.spec { width: 100%; border-collapse: collapse; }
.spec th, .spec td { text-align: left; padding: .95rem 0; border-bottom: 1px solid var(--hair); font-size: 1rem; vertical-align: top; }
.spec th { font-weight: 500; color: var(--silver); width: 44%; font-family: var(--display); }

.tickset { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.tickset li { display: flex; gap: .75rem; align-items: flex-start; }
.tickset svg { width: 21px; height: 21px; flex: 0 0 21px; margin-top: 4px; }

/* ---------------------------------------------------------- 10 comparison */
.cmp-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmp { border-collapse: collapse; min-width: 780px; width: 100%; }
.cmp th, .cmp td { padding: 1rem .9rem; border-bottom: 1px solid var(--hair); text-align: left; font-size: .98rem; vertical-align: top; }
.cmp thead th { font-family: var(--display); font-size: 1.05rem; font-weight: 500; border-bottom: 2px solid var(--ink); }
.cmp tbody th { font-weight: 500; color: var(--silver); font-family: var(--display); position: sticky; left: 0; background: var(--paper); }
.cmp td b { font-family: var(--display); font-weight: 500; }

/* ------------------------------------------------------------- 11 finder */
.finder { border: 1px solid var(--hair); border-radius: var(--rad); background: var(--paper); }
.finder__step { padding: clamp(1.8rem, 4vw, 2.8rem); }
.finder__step[hidden] { display: none; }
.finder__q { font-family: var(--display); font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 1.6rem; }
.finder__opts { display: grid; gap: .8rem; margin-bottom: 1.8rem; }
.finder__opt {
  display: flex; align-items: center; gap: 1rem; width: 100%;
  min-height: 66px; padding: 1rem 1.3rem; text-align: left;
  background: var(--paper); border: 2px solid var(--hair); border-radius: var(--rad);
  font-family: var(--body); font-size: 1.05rem; color: var(--ink); cursor: pointer;
}
.finder__opt:hover { border-color: var(--ink); background: var(--paper-2); }
.finder__opt[aria-pressed="true"] { border-color: var(--sig-ink); background: var(--sig-tint); }
.finder__prog { display: flex; gap: .4rem; padding: 0 clamp(1.8rem, 4vw, 2.8rem); padding-top: 1.6rem; }
.finder__prog i { flex: 1; height: 4px; background: var(--paper-3); border-radius: 2px; }
.finder__prog i.on { background: var(--sig); }
.finder__out { padding: clamp(1.8rem, 4vw, 2.8rem); border-top: 1px solid var(--hair); }

/* --------------------------------- 12 editorial, guides, policy, notices */
.article { max-width: 68ch; }
.article h2 { margin-top: 2.6rem; }
.article h3 { margin-top: 2rem; }
.article ul, .article ol { padding-left: 1.3rem; margin: 0 0 1.4em; }
.article li { margin-bottom: .6em; max-width: 64ch; }

.guide-list { display: grid; gap: 0; border-top: 1px solid var(--hair); }
.guide {
  display: grid; grid-template-columns: 150px 1fr auto; gap: 1.8rem; align-items: center;
  padding: 1.7rem 0; border-bottom: 1px solid var(--hair); text-decoration: none;
}
.guide:hover .guide__t { color: var(--sig-ink); }
.guide img { border-radius: var(--rad); aspect-ratio: 3/2; object-fit: cover; width: 100%; }
.guide__t { font-family: var(--display); font-size: 1.3rem; font-weight: 500; margin: 0 0 .3rem; }
.guide__s { font-size: .99rem; color: var(--silver); margin: 0; max-width: 62ch; }
.guide__go { font-size: 1.4rem; color: var(--silver); }

.notice {
  border: 1px solid var(--hair); border-left: 3px solid var(--silver);
  background: var(--paper-2); padding: 1.3rem 1.5rem; border-radius: 0 var(--rad) var(--rad) 0;
}
.notice p:last-child { margin-bottom: 0; }
.notice--sig { border-left-color: var(--sig); background: var(--sig-tint); }

.faq { border-top: 1px solid var(--hair); }
.faq details { border-bottom: 1px solid var(--hair); }
.faq summary {
  list-style: none; cursor: pointer; padding: 1.3rem 2.5rem 1.3rem 0;
  font-family: var(--display); font-size: 1.15rem; position: relative; min-height: 54px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; position: absolute; right: .4rem; top: 1.05rem;
  font-size: 1.6rem; color: var(--silver); line-height: 1;
}
.faq details[open] summary::after { content: '\2212'; }
.faq .faq__a { padding: 0 2.5rem 1.4rem 0; }
.faq .faq__a p:last-child { margin-bottom: 0; }

.crumbs { font-size: .92rem; color: var(--silver); padding: .9rem 0 0; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs span { margin: 0 .5rem; opacity: .5; }

/* ------------------------------------------------------------- 13 footer */
.site-footer { background: var(--ink); color: #C7CCCF; padding: clamp(3.5rem, 6vw, 5rem) 0 2.5rem; }
.site-footer a { color: #C7CCCF; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.foot-top { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 2.5rem; padding-bottom: 3rem; }
.foot-brand img { height: 52px; width: auto; margin-bottom: 1.2rem; }
.foot-brand p { color: #98A0A5; font-size: .98rem; max-width: 32ch; }
.foot-col h5 {
  font-family: var(--display); font-size: .76rem; font-weight: 600; letter-spacing: .17em;
  text-transform: uppercase; color: #fff; margin: 0 0 1.1rem;
}
.foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.foot-col li { font-size: .98rem; }
.foot-bottom {
  border-top: 1px solid #2A3237; padding-top: 2rem;
  display: flex; flex-wrap: wrap; gap: 1.2rem 2rem; justify-content: space-between;
  font-size: .9rem; color: #8B9398;
}
.foot-legal { max-width: 78ch; font-size: .87rem; color: #7E868B; line-height: 1.6; margin-top: 1.6rem; }

/* ----------------------------------------------------------- 14 line art */
/* Ported from the Digilu .la system: hairline ink, a real recognisable
   subject, and the accent spent exactly once per drawing on the stroke that
   carries the meaning. Every stroke carries pathLength="1" so the draw-on is
   one transition with nothing measured in script. */
.la { display: block; width: 100%; height: auto; overflow: visible; }
.la-ink, .la-det, .la-acc, .la-ghost {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.la-ink   { stroke: var(--ink);    stroke-width: 1.9; }
.la-det   { stroke: var(--ink-2);  stroke-width: 1.3; opacity: .8; }
.la-ghost { stroke: var(--silver); stroke-width: 1;   opacity: .45; }
.la-acc   { stroke: var(--sig);    stroke-width: 2.4; }
.la-dot   { fill: var(--sig); stroke: none; }
.la-fill  { fill: var(--paper); stroke: none; }
.la--dark .la-ink   { stroke: #E8EBEC; }
.la--dark .la-det   { stroke: #97A0A5; }
.la--dark .la-ghost { stroke: #5B6469; }
.la--dark .la-fill  { fill: var(--ink); }

/* The drawing is VISIBLE by default; the entrance is opt-in, added by script.
   The other way round is how a page ends up with an empty column: if the
   observer never fires, or JavaScript is blocked, the drawing is simply gone.
   An animation that fails should cost the animation, never the artwork.

   This used to be a stroke-dashoffset draw-on, which looked better and did not
   survive contact with reality: `pathLength="1"` does not normalise the dash
   values once `vector-effect: non-scaling-stroke` is in play, so the computed
   offset stayed at 1px and every stroke rendered invisible while the filled
   accent dot rendered fine. A quiet rise is worth less than a drawing that is
   definitely on the page. */
.la--anim {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.4, 0, .2, 1);
}
.la--anim.drawn { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .la--anim { opacity: 1; transform: none; transition: none; }
}

.lineart-band { padding: 1rem 0 0; }
.lineart-band .la { max-height: 220px; }
.lineart-figure { width: 100%; max-width: 560px; margin: 0 auto; }
.lineart-figure .la { width: 100%; height: auto; }
.page-hero__mark { max-width: 300px; }

/* ------------------------------------------------------- 15 responsive */
@media (max-width: 1100px) {
  .nav-link { padding: 1.1rem .7rem; font-size: .97rem; }
  .mega-menu { min-width: 560px; }
  .mega-menu--wide { min-width: 700px; }
}

@media (max-width: 980px) {
  :root { --gut: 1.5rem; --fs-body: 1.0625rem; }
  .primary-nav, .header-cta .btn { display: none; }
  .menu-toggle { display: block; }
  .header-cta { margin-left: auto; }
  .hero-inner { grid-template-columns: 1fr; }
  .hero-media { order: -1; }        /* the photograph leads on a phone */
  .split { grid-template-columns: 1fr; }
  .g-3, .g-4, .prod-grid { grid-template-columns: repeat(2, 1fr); }
  .need-grid { grid-template-columns: repeat(2, 1fr); }
  .need:first-child { border-left: 0; }
  .need:nth-child(odd) { border-left: 1px solid var(--hair); }
  .pdp { grid-template-columns: 1fr; }
  .pdp-gallery { position: static; }
  .foot-top { grid-template-columns: repeat(2, 1fr); }
  .guide { grid-template-columns: 110px 1fr; }
  .guide__go { display: none; }
}

@media (max-width: 620px) {
  :root { --gut: 1.25rem; }
  h1 { font-size: clamp(2.1rem, 9vw, 2.8rem); }
  .g-2, .g-3, .g-4, .prod-grid { grid-template-columns: 1fr; }
  .need-grid { grid-template-columns: 1fr; }
  .need, .need:nth-child(odd) { border-left: 1px solid var(--hair); }
  .fitgrid { grid-template-columns: 1fr; }
  .fit + .fit { border-left: 0; border-top: 1px solid var(--hair); }
  .foot-top { grid-template-columns: 1fr; gap: 2rem; }
  .pdp-thumbs { grid-template-columns: repeat(4, 1fr); }
  .btn { width: 100%; }
  .btn-row { gap: .75rem; }
  .guide { grid-template-columns: 1fr; gap: 1rem; }
  .guide img { max-width: 200px; }
  .trustline { gap: .8rem 1.4rem; font-size: .92rem; }
}

/* ------------------------------------------- 16 mobility: the actual business */
/* A "Reviewing" flag is visually quieter than a use-case flag on purpose: it is
   an honest status, not a claim, and it must not read as a badge of merit. */
.bestfor--hold {
  color: var(--silver); background: var(--paper-2); border-color: var(--hair);
}
.prod__ph {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1 / 1; background: var(--paper-2); border-radius: var(--rad);
  margin-bottom: 1.2rem;
}
.prod__ph svg { width: 64px; height: 64px; }

/* Provenance, shown inline. Every published specification says where it came
   from, and an unverified one says that instead of showing a plausible guess. */
.srcflag {
  display: inline-block; margin-left: .6rem; font-size: .72rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--silver); vertical-align: middle;
}
.spec td.pend { color: var(--silver); font-style: italic; }

.guide--slim { grid-template-columns: 1fr; padding: 1.1rem 0; }
.guide--slim .guide__t { font-size: 1.1rem; }

.pdp-main--art {
  display: flex; align-items: center; justify-content: center; padding: 2rem;
  background: var(--paper-2);
}
.pdp-main--art svg { width: 100%; height: auto; }

.hero--mob .hero-media img { border-radius: var(--rad); }

/* ------------------------------------------------------ 17 the video hero */
/* Full bleed, text laid over the footage, no control furniture on top of it.

   The pause button is gone and the obligation is not: WCAG 2.2.2 only applies
   to moving content that runs longer than five seconds, so the loop is 4.5s.
   prefers-reduced-motion still stops it dead. The video is aria-hidden and
   untabbable because it carries no information the copy does not already say,
   so a screen reader should walk straight past it. */
.vhero {
  position: relative;
  min-height: clamp(430px, 62vh, 620px);
  display: flex; align-items: center;
  overflow: hidden;
  background: var(--ink);
}
.vhero--cat { min-height: clamp(360px, 50vh, 500px); }

.vhero__media { position: absolute; inset: 0; }
.vhero__vid {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Crop takes from the LEFT so the subject stays large and right of centre,
     which is what leaves the copy a clean field to sit on. */
  object-position: 72% 42%;
  display: block;
}
/* The scrim is what makes text on video legible at every width. Two stops, so
   the left edge is dark enough for white type and the right stays photographic. */
.vhero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(12,15,18,.94) 0%, rgba(12,15,18,.86) 26%,
                    rgba(12,15,18,.55) 50%, rgba(12,15,18,.12) 74%, rgba(12,15,18,0) 100%),
    linear-gradient(to top, rgba(12,15,18,.5), rgba(12,15,18,0) 45%);
}

.vhero__inner { position: relative; z-index: 2; width: 100%; padding-top: 2.2rem; padding-bottom: 2.2rem; }
.vhero__copy { max-width: 34rem; }
.vhero h1 {
  color: #fff; margin: 0 0 1rem;
  font-size: clamp(2.5rem, 5.2vw, 4rem); line-height: 1.02;
}
.vhero--cat h1 { font-size: clamp(2rem, 3.8vw, 3rem); }
.eyebrow--on { color: var(--sig); }
.lede--on { color: #DCE1E4; margin-bottom: 1.8rem; max-width: 46ch; }
.btn--onvid { border-color: rgba(255,255,255,.75); color: #fff; background: transparent; }
.btn--onvid:hover { background: #fff; color: var(--ink); border-color: #fff; }
/* Sits in the copy column, not out over the photograph: text laid on the busy
   half of a frame is a contrast failure waiting for the next breakpoint. */
.vhero__cap {
  margin: 1.6rem 0 0; font-size: .92rem; color: rgba(255,255,255,.68);
  max-width: 44ch; padding-top: 1.1rem;
  border-top: 1px solid rgba(255,255,255,.16);
}
.vhero__cap b { color: #fff; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .vhero__vid { display: none; }
  .vhero__media { background-image: var(--vhero-poster); background-size: cover; background-position: 72% 42%; }
}

/* The graphical element: the mark drawn as a hairline across the seam between
   the hero and the page, so the video reads as part of the design rather than
   a rectangle dropped on top of it. */
.trustbar {
  background: var(--ink); color: #C7CCCF;
  border-top: 1px solid rgba(255,255,255,.10);
}
.trustbar__in {
  display: flex; flex-wrap: wrap; gap: .9rem 2.4rem;
  padding-top: 1.1rem; padding-bottom: 1.1rem;
  font-size: .96rem;
}
.trustbar__in span { display: flex; align-items: center; gap: .55rem; }
.trustbar__in svg { width: 20px; height: 20px; flex: 0 0 20px; }

@media (max-width: 860px) {
  .vhero { min-height: 0; }
  .vhero__inner { padding-top: 2.6rem; padding-bottom: 2.6rem; }
  .vhero__scrim {
    background: linear-gradient(180deg, rgba(12,15,18,.55) 0%, rgba(12,15,18,.86) 55%, rgba(12,15,18,.94) 100%);
  }
  .vhero__vid { object-position: 60% 30%; }
  .vhero__copy { max-width: none; }
  .vhero__cap { max-width: none; }
  .trustbar__in { flex-direction: column; gap: .6rem; }
}

/* ------------------------------------------------- 18 the category we define */
/* The definition is quoted verbatim wherever it appears, so it gets one
   treatment everywhere and reads as a definition rather than as copy. */
.defbox {
  font-family: var(--display);
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  line-height: 1.4;
  color: var(--ink);
  border-left: 3px solid var(--sig);
  padding: .3rem 0 .3rem 1.4rem;
  margin: 0 0 1.4rem;
  max-width: 40ch;
}
.stages { display: grid; gap: 0; border-top: 1px solid var(--hair); }
.stage {
  display: grid; grid-template-columns: 3rem 1fr; gap: 1.4rem;
  padding: 1.6rem 0; border-bottom: 1px solid var(--hair);
}
.stage__n {
  font-family: var(--display); font-size: 1.5rem; font-weight: 500;
  color: var(--sig-ink); line-height: 1;
}
.stage h3 { font-size: 1.25rem; margin: 0 0 .4rem; }
.stage p { margin: 0; color: var(--ink-2); }
@media (max-width: 620px) {
  .stage { grid-template-columns: 2.2rem 1fr; gap: 1rem; }
}

/* The promise sits between the headline and the buttons: it is the one line the
   brand is claiming, so it gets its own weight rather than hiding in the lede. */
.vhero__promise {
  font-family: var(--display); font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  font-size: .95rem; color: var(--sig);
  margin: 0 0 1.6rem;
}
.vhero__promise--dark { color: var(--sig-ink); margin-bottom: 1.2rem; }

/* ------------------------------------------------------- 19 contact capture */
/* Appears AFTER the recommendation is already on screen. Nothing is gated: a
   locked result behind an email is a deceptive pattern and the brief bans it. */
.capture {
  margin-top: 2.4rem; padding-top: 2rem; border-top: 1px solid var(--hair);
  display: grid; gap: .5rem; max-width: 34rem;
}
.capture h3 { margin: 0 0 .3rem; }
.capture label { font-weight: 500; font-size: .98rem; margin-top: .7rem; }
.capture input[type=text], .capture input[type=email], .capture textarea {
  font: inherit; font-size: 1.05rem; padding: .8rem .9rem; min-height: 54px;
  border: 1px solid var(--hair); border-radius: var(--rad);
  background: var(--paper); color: var(--ink); width: 100%;
}
.capture textarea { min-height: 96px; resize: vertical; }
.capture input:focus-visible, .capture textarea:focus-visible { outline: var(--focus); outline-offset: 1px; }
.capture .chk {
  display: flex; gap: .7rem; align-items: flex-start;
  font-weight: 400; font-size: .98rem; margin: 1rem 0 .4rem;
}
.capture .chk input { width: 22px; height: 22px; margin: 2px 0 0; flex: 0 0 22px; }
.capture button { margin-top: .6rem; justify-self: start; }
/* The honeypot. Off-screen rather than display:none, because some autofillers
   skip hidden fields and we want a bot to find it. */
.capture .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }