/* ==========================================================================
   PENTAX Loupes UK — design system & layout
   Dark mode only, by design brief — there is no light theme to toggle.
   ========================================================================== */

/* Inter, self-hosted (variable, latin subset, weights 400-700; SIL OFL
   licence). Served from our own origin on purpose: loading it from Google
   Fonts sent every visitor's IP address to Google, which EU courts have
   treated as a GDPR violation. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter-var.woff2") format("woff2");
}
/* DM Sans (SIL Open Font License), self-hosted like Inter. Used only for the
   opening line over the film. */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/dm-sans-var.woff2") format("woff2");
}

:root {
  --bg: #000000;
  --bg-raised: #17181a;
  --bg-raised-2: #1e1f22;
  --card-light: #fbfbfb;      /* card bg behind white-studio product photography, seamless blend */
  --ink: #f5f5f6;
  --muted: #9a9aa1;
  --pentax-blue: #5b86ff;
  --pentax-blue-dim: #3f63d1;
  --line: rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.22);
  --white: #ffffff;
  --danger: #ff6b6b;
  --success: #4fd17c;

  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --content-max: 1280px;
  --content-min-pad: 24px;
  --col-narrow: 560px;
  --col-wide: 680px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 180ms;
  --dur-med: 420ms;
  --dur-slow: 700ms;
}

/* ---------------------------------------------------------------------- */
/* Reset                                                                    */
/* ---------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* `clip`, not `hidden`: it clips stray horizontal overflow (decorative glows
   etc.) without turning <main> into a scroll container, so the tour's
   sticky stage keeps working. One over-wide element is enough to zoom a
   phone out and leave a black strip down the right of every screen. */
main { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; color-scheme: dark; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
button { font-family: inherit; }
a { color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
.no-scroll { overflow: hidden; }

/* Skip link */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--pentax-blue);
  color: var(--white);
  padding: 12px 20px;
  z-index: 200;
  border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--pentax-blue);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------------- */
/* Typography                                                              */
/* ---------------------------------------------------------------------- */

.eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pentax-blue);
}

.display {
  font-size: clamp(2.4rem, 5.4vw, 4.6rem);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.headline {
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.subhead {
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  color: var(--muted);
  font-weight: 400;
  max-width: var(--col-wide);
}

.body-copy {
  font-size: 1.05rem;
  color: var(--muted);
  max-width: var(--col-wide);
}
.body-copy--tight { max-width: var(--col-narrow); }

.stat-number {
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* ---------------------------------------------------------------------- */
/* Layout utilities                                                        */
/* ---------------------------------------------------------------------- */

.container {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--content-min-pad);
}

.section { padding: 80px 0; }
.section--tight { padding: 80px 0; }
.section--raised { background: var(--bg-raised); }

.section-heading { max-width: 760px; margin-bottom: 42px; }
.section-heading .eyebrow { display: block; margin-bottom: 14px; }
.section-heading .headline { margin-bottom: 16px; }
/* The prescription and demo sections set their heading beside a grid or a
   form rather than in a .section-heading, so the same rhythm is spelled out
   for them; without it the eyebrow, headline and copy ran together. */
.rx-section .eyebrow,
.demo-section .eyebrow { display: block; margin-bottom: 14px; }
.rx-section .headline,
.demo-section .headline { margin-bottom: 18px; }

@media (max-width: 780px) {
  .section { padding: 64px 0; }
  .section--tight { padding: 56px 0; }
}

/* ---------------------------------------------------------------------- */
/* Buttons & links                                                         */
/* ---------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  text-decoration: none;
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--ink); color: #0a0a0c; }
.btn-primary:hover { background: var(--pentax-blue); color: var(--white); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--ink); }
.btn__arrow { transition: transform var(--dur-fast) var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--pentax-blue);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease);
}
.text-link:hover { border-color: currentColor; }

/* ---------------------------------------------------------------------- */
/* Navigation                                                               */
/* ---------------------------------------------------------------------- */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--dur-med) var(--ease), border-color var(--dur-med) var(--ease), backdrop-filter var(--dur-med) var(--ease);
}
.nav--scrolled { border-color: var(--line); }
/* The frosted backdrop lives on a pseudo-element rather than on .nav itself:
   backdrop-filter turns its element into the containing block for fixed
   descendants, which would pin the full-screen mobile drawer inside the
   67px bar. */
.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: transparent;
  transition: background var(--dur-med) var(--ease);
}
.nav--scrolled::before {
  background: rgba(10, 10, 12, 0.78);
  backdrop-filter: blur(16px) saturate(1.6);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
}
.nav__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 16px var(--content-min-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* Over the hero the bar is transparent; a faint top gradient keeps the
   wordmark and links legible on bright frames without boxing them in. */
.nav:not(.nav--scrolled) {
  background: linear-gradient(180deg, rgba(10, 10, 12, 0.6), rgba(10, 10, 12, 0));
}
/* Smooth Optics presents PENTAX Loupes UK. A two-line lockup rather than a
   bar of its own: the header is sticky and already tight on a phone, and a
   presenting company belongs above the name it presents, not beside it. */
.nav__brand {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  text-decoration: none;
  color: var(--ink);
}
.nav__brand-lockup { display: inline-flex; align-items: baseline; gap: 9px; }
.nav__brand-presents {
  font-weight: 500;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.nav__brand-mark { font-weight: 800; font-size: 1rem; letter-spacing: 0.14em; }
.nav__brand-sub {
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.nav__links {
  display: flex;
  align-items: center;
  gap: 26px;
}
.nav__sep { width: 1px; height: 18px; background: var(--line-strong); margin: 0 2px; }
/* :not(.btn) — otherwise this beats .btn-primary's own text colour on
   specificity (class+tag > single class) and the nav CTA renders as
   invisible light-on-light text. */
.nav__links a:not(.btn) {
  position: relative;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--muted);
  padding: 6px 0;
  transition: color var(--dur-fast) var(--ease);
}
/* Underline grows in on hover and stays on the section currently in view
   (aria-current is set by initNavSpy in main.js). */
.nav__links a:not(.btn)::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-fast) var(--ease);
}
.nav__links a:not(.btn):hover,
.nav__links a:not(.btn)[aria-current="true"] { color: var(--ink); }
.nav__links a:not(.btn):hover::after,
.nav__links a:not(.btn)[aria-current="true"]::after { transform: scaleX(1); }
.nav__cta { white-space: nowrap; }
.nav__toggle {
  display: none;
  background: none;
  border: 0;
  width: 34px; height: 34px;
  cursor: pointer;
  position: relative;
}
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after {
  content: "";
  position: absolute;
  left: 7px; right: 7px;
  height: 2px;
  background: var(--ink);
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.nav__toggle span { top: 16px; }
.nav__toggle span::before { top: -7px; }
.nav__toggle span::after { top: 7px; }

.nav__drawer { display: none; }

@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__toggle { display: block; }
  /* The bar's own row must sit above the full-screen drawer so the X stays
     tappable. */
  .nav__inner { position: relative; z-index: 2; }
  .nav__drawer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: fixed;
    inset: 0;
    padding: 96px 28px 40px;
    background: rgba(10, 10, 12, 0.96);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    text-align: center;
    opacity: 0;
    transform: translateY(-8px);
    /* visibility keeps the closed drawer's links out of the tab order;
       delayed on close so the fade finishes first. */
    visibility: hidden;
    transition: opacity var(--dur-med) var(--ease), transform var(--dur-med) var(--ease), visibility 0s var(--dur-med);
  }
  .nav__drawer--open {
    opacity: 1;
    transform: none;
    visibility: visible;
    transition: opacity var(--dur-med) var(--ease), transform var(--dur-med) var(--ease), visibility 0s;
  }
  .nav__drawer a:not(.btn) {
    display: block;
    padding: 18px 0;
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-decoration: none;
    color: var(--ink);
    border-bottom: 1px solid var(--line);
  }
  .nav__drawer a:not(.btn):first-child { border-top: 1px solid var(--line); }
  .nav__drawer .btn { margin-top: 32px; width: 100%; justify-content: center; padding: 16px 20px; font-size: 1rem; }
  /* Hamburger becomes an X while the menu is open. */
  .nav__toggle span::before, .nav__toggle span::after { transition: transform var(--dur-fast) var(--ease), top var(--dur-fast) var(--ease); }
  .nav__toggle[aria-expanded="true"] span { background: transparent; }
  .nav__toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
  .nav__toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }
}

/* ---------------------------------------------------------------------- */
/* Cinematic video tour                                                    */
/*                                                                          */
/* Base state below is the progressive-enhancement baseline: a normal,     */
/* stacked, crawlable document that works with no JS and under             */
/* prefers-reduced-motion — every chapter's <video poster="..."> shows a   */
/* real frame even before any script runs. main.js adds `.tour--cinematic` */
/* to the wrapper once it's safe to pin/scrub (JS present, motion allowed) */
/* — that class is what turns this into the pinned, scroll-scrubbed        */
/* sequence. Video sources are real product footage (see /videos), each    */
/* chapter scrubs its own short clip based on scroll position within it.   */
/* ---------------------------------------------------------------------- */

.tour {
  position: relative;
  background: var(--bg);
}

.tour__stage {
  padding: 96px 0;
}

.tour__viewport {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 48px;
}

/* No border, no card treatment — a soft ambient shadow only, so the video
   reads as floating in the black page rather than framed/boxed. object-fit
   is `contain`, not `cover`: the source is never cropped, regardless of how
   the container's computed box relates to the video's own aspect ratio. */
.tour__frame-wrap {
  position: relative;
  width: min(84vw, 1360px);
  aspect-ratio: 16 / 9;
  max-height: 82vh;
  border-radius: 18px;
  overflow: hidden;
  background: transparent;
  box-shadow: 0 60px 140px -50px rgba(0, 0, 0, 0.9);
}

.tour__frame-wrap--full { border-radius: 0; box-shadow: none; }

.tour__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--bg);
}

/* Through-the-lens sample overlay - sits exactly over the video frame.
   Hidden entirely outside the cinematic tour; opacity is written per-frame
   by product-tour.js during the magnification chapter. */
.mag-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;
  opacity: 0;
  pointer-events: none;
  background: var(--bg);
}
.tour--cinematic .mag-overlay { display: block; }
/* The two stacked rack-zoom layers (shared with .mag-sample below) */
[data-mag-sample] img[data-mag-layer] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform, opacity;
}
.mag-overlay__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mag-overlay__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mag-overlay__badge { font-size: 3rem; font-weight: 700; color: var(--pentax-blue); }

.tour__chapters { position: static; }

.tour__chapter {
  padding: 56px 8vw;
  border-bottom: 1px solid var(--line);
  opacity: 1;
}

.tour__copy {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.tour__chapter-index {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--pentax-blue);
  letter-spacing: 0.08em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 14px;
}
.tour__chapter-index::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
  max-width: 90px;
}

.tour__chapter h2 { font-size: clamp(1.7rem, 3vw, 2.6rem); line-height: 1.1; margin-bottom: 14px; letter-spacing: -0.015em; color: var(--ink); }
.tour__chapter p { color: var(--muted); font-size: 1rem; max-width: 420px; margin-left: auto; margin-right: auto; }

.tour__scroll-cue { display: none; }
/* Stage-level: visible over the full-bleed cold open (which has no chapter
   copy at all), fading out as soon as the user starts scrolling (is-hidden
   is toggled from product-tour.js). */
.tour--cinematic .tour__scroll-cue {
  display: flex;
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  pointer-events: none; /* decorative — must never swallow taps */
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: opacity var(--dur-med) var(--ease);
}
.tour--cinematic .tour__scroll-cue.is-hidden { opacity: 0; }
/* Past the cold open the words go and a chevron stays, so it is still clear
   that there is more below and that the page is what moves. */
.tour--cinematic .tour__scroll-cue.is-compact { bottom: 10px; gap: 0; }
.tour--cinematic .tour__scroll-cue.is-compact span { opacity: 0; height: 0; overflow: hidden; }
.tour--cinematic .tour__scroll-cue.is-compact::after {
  width: 11px;
  height: 11px;
  background: none;
  border-right: 1.6px solid var(--line-strong);
  border-bottom: 1.6px solid var(--line-strong);
  animation: cue-nudge 1.9s var(--ease) infinite;
}
@keyframes cue-nudge {
  0%, 100% { transform: rotate(45deg) translate(-2px, -2px); opacity: 0.4; }
  50% { transform: rotate(45deg) translate(2px, 2px); opacity: 1; }
}
/* Opening line: centred over the cold open, set like a film title.
   Each word comes into focus in turn (blur to sharp, a nod to the optics),
   then a short blue rule draws in. main.js decides the typeface ONCE
   (DM Sans if it has loaded, otherwise the site face), measures the real
   text and breaks it into whole lines that fit, and only then lets the
   animation start, so nothing can re-wrap or jump after it appears.
   product-tour.js adds is-gone as the opening film hands over to the first
   headline. On phones the film is a centred strip, so the line sits in the
   black band above it. */
.tour__tagline { display: none; }
.tour--cinematic .tour__tagline {
  --focus: cubic-bezier(0.16, 1, 0.3, 1);
  display: block;
  position: absolute;
  left: 50%;
  top: 41%;
  width: min(86vw, 1180px);
  margin: 0;
  transform: translate(-50%, -50%);
  z-index: 3;
  pointer-events: none;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(2.4rem, 5.4vw, 5.6rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-shadow: 0 2px 26px rgba(0, 0, 0, 0.6);
}
.tour--cinematic .tour__tagline.is-dm { font-family: "DM Sans", var(--font-body); letter-spacing: -0.035em; }
.tour__tagline .tl-line { display: block; white-space: nowrap; }
.tour__tagline .tl-line--soft { color: #a4a6ad; }
.tour__tagline .tl-probe { position: absolute; left: 0; top: 0; visibility: hidden; white-space: nowrap; pointer-events: none; }
.tour__tagline .tl-word {
  display: inline-block;
  opacity: 0;
  filter: blur(14px);
  transform: translateY(0.28em);
  transition:
    opacity 900ms var(--focus),
    filter 1100ms var(--focus),
    transform 1100ms var(--focus);
  transition-delay: calc(var(--i, 0) * 80ms + 120ms);
}
.tour__tagline.is-in .tl-word { opacity: 1; filter: blur(0); transform: none; }
/* After the first entrance, anything that brings the words back (scrolling
   to the top again) does it together, not word by word. */
.tour__tagline.is-settled .tl-word { transition-delay: 0ms; transition-duration: 500ms; }
.tour__tagline::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin: 26px auto 0;
  border-radius: 2px;
  background: var(--pentax-blue);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 800ms var(--focus) 1000ms, opacity 400ms ease;
}
.tour__tagline.is-in::after { transform: scaleX(1); }
.tour__tagline.is-settled::after { transition-delay: 0ms; }
/* A soft dark pool behind the words, so the film can pass underneath them. */
.tour--cinematic .tour__tagline::before {
  content: "";
  position: absolute;
  left: -14vw;
  right: -14vw;
  top: -20vh;
  bottom: -18vh;
  z-index: -1;
  background: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.4) 40%, rgba(0, 0, 0, 0) 72%);
  opacity: 0;
  transition: opacity 900ms ease;
}
.tour__tagline.is-in::before { opacity: 1; }
.tour__tagline.is-gone .tl-word {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(-0.16em);
  transition-duration: 450ms;
  transition-delay: 0ms;
}
.tour__tagline.is-gone::after,
.tour__tagline.is-gone::before { opacity: 0; transition-duration: 450ms; transition-delay: 0ms; }
@media (max-width: 900px) {
  .tour--cinematic .tour__tagline {
    left: 24px;
    right: 24px;
    width: auto;
    top: calc((68px + 50% - 28.125vw) / 2);
    transform: translateY(-50%);
    font-size: clamp(1.8rem, 7.6vw, 2.6rem);
  }
  .tour--cinematic .tour__tagline::before { left: -24px; right: -24px; top: -9vh; bottom: -8vh; }
  .tour__tagline::after { margin-top: 18px; width: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .tour__tagline .tl-word { transition: none; filter: none; transform: none; }
  .tour__tagline::after, .tour__tagline::before { transition: none; }
}

.tour__scroll-cue span { transition: opacity var(--dur-fast) var(--ease); }
.tour__scroll-cue::after {
  content: "";
  width: 1px; height: 26px;
  background: var(--line-strong);
  animation: cue-flow 1.8s var(--ease) infinite;
}
@keyframes cue-flow {
  0% { transform: scaleY(0.3); opacity: 0.3; transform-origin: top; }
  50% { transform: scaleY(1); opacity: 1; transform-origin: top; }
  100% { transform: scaleY(0.3); opacity: 0.3; transform-origin: bottom; }
}

/* Progress rail — only meaningful once the cinematic sequence is active;
   hidden by default via the `hidden` attribute until main.js unhides it. */
.rail {
  position: fixed;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 6;
}
.rail[hidden] { display: none; }
.rail { transition: opacity var(--dur-med) var(--ease); }
.rail--offscreen { opacity: 0; pointer-events: none; }
.rail__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: var(--line-strong);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.rail__dot.is-active { background: var(--pentax-blue); transform: scale(1.5); }

/* In-tour magnification & colour selectors */
.tour-selector { margin-top: 22px; }
.tour-selector__row { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.mag-btn {
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.mag-btn[aria-pressed="true"] { background: var(--ink); color: #0a0a0c; border-color: var(--ink); }
.mag-display__value {
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  display: block;
  color: var(--ink);
  transition: opacity var(--dur-fast) var(--ease);
}
.mag-display__fov { color: var(--muted); font-size: 0.9rem; display: block; margin: 4px 0 10px; }

.colour-swatches { display: flex; justify-content: center; gap: 16px; align-items: center; flex-wrap: wrap; }
.colour-swatch {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  /* 0.35 alpha ring: the black swatch sits on a near-black page and needs
     more than a faint inset line to read as present at all. */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.14);
  transition: box-shadow var(--dur-med) var(--ease), transform var(--dur-med) var(--ease);
}
.colour-swatch:hover { transform: scale(1.08); }
/* currentColor picks up each swatch's own inline `color` (set alongside its
   `background` in the markup) so the selected ring/glow matches that
   swatch's actual colour rather than one fixed accent for every option —
   a clearer "this one, specifically" cue than a same-colour ring on all four. */
.colour-swatch.is-selected {
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px currentColor, 0 0 24px currentColor;
  transform: scale(1.18);
}
/* One-shot pop on click (class added then removed in main.js) — a quick
   ring flare in the swatch's own colour. */
@keyframes swatch-pop {
  0% { box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px currentColor, 0 0 0 0 currentColor; }
  60% { box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px currentColor, 0 0 0 14px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px currentColor, 0 0 24px currentColor; }
}
.colour-swatch.is-pop { animation: swatch-pop 480ms var(--ease); }

/* ------------------------------------------------------------------------
   Cinematic enhancement — added by main.js once it's safe to pin/scrub.
   Turns the plain stacked baseline above into the pinned, scroll-scrubbed
   sequence. ONE fixed layout for every chapter: copy in a constant left
   column, video in a constant right slot (sized/positioned by _sizeFrame()
   in product-tour.js). Nothing moves between chapters except the footage
   itself and the copy crossfade — the earlier per-chapter left/right
   alternation read as the screen jumping side to side and is gone.
   ------------------------------------------------------------------------ */
.tour--cinematic { height: 650vh; } /* 6 chapters worth of scroll range */
.tour--cinematic .tour__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh; /* phones: never taller than the visible screen */
  padding: 0;
  overflow: hidden;
}
.tour--cinematic .tour__viewport {
  position: absolute;
  inset: 0;
  padding: 0;
  display: block;
}
/* Width/height/position are set inline by `_sizeFrame()` in
   product-tour.js, not by CSS aspect-ratio/vw/vh math (aspect-ratio boxes
   whose width and max-height come from separate rules didn't reliably
   re-resolve together after class swaps in this codebase — JS computing
   exact pixel values sidesteps that). The slot is the same for every
   chapter: right of the fixed left copy column on desktop, pinned top on
   mobile. It is computed once at start and on resize, never per chapter. */
.tour--cinematic .tour__frame-wrap {
  position: absolute;
  /* The base (non-cinematic) rule above sets width/aspect-ratio/max-height
     for the plain-document fallback. Inline width/height from _sizeFrame()
     naturally override the base `width`/`aspect-ratio` (same properties,
     inline wins) — but `max-height` is a *different* property, so it stays
     active as a hard ceiling even over an inline `height`, unless it's
     explicitly cleared here. Missing this reset once meant every inline
     height silently got capped at 82vh regardless of what JS computed —
     a real, measured 810px-vs-738px mismatch on the intro's full-bleed
     sizing, not a hypothetical one. */
  max-height: none;
  aspect-ratio: auto;
  /* No transition here on purpose: width/height/left/top are layout-
     triggering properties, and _sizeFrame() re-sets all four every single
     chapter change during continuous scroll. An earlier version animated
     this move with a FLIP transform (GPU-composited, so cheap even
     back-to-back) instead of snapping instantly — technically smooth, but
     on this page it read as the video visibly sliding left/right between
     chapters, most noticeable wherever two alignment flips sit close
     together (e.g. magnification → colour → illumination), which is worse
     than the plain instant snap it replaced. Back to an instant snap; the
     chapter copy's own opacity/transform fade (see .tour__chapter.is-active
     below) carries the "smooth" feel on its own. */
}
.tour--cinematic .tour__chapters {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.tour--cinematic .tour__chapter {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start; /* copy always left — never alternates */
  padding: 0 6vw;
  border-bottom: 0;
  opacity: 0;
  transform: translateY(10px);
  /* visibility keeps the CTAs/selectors of the five invisible chapters out
     of the keyboard tab order (opacity alone leaves them focusable). It
     flips to visible instantly when is-active lands, so the opacity
     fade-in still shows in full. */
  visibility: hidden;
  transition: opacity var(--dur-med) var(--ease), transform var(--dur-med) var(--ease), visibility 0s;
  will-change: opacity, transform;
}
.tour--cinematic .tour__chapter.is-active { opacity: 1; transform: translateY(0); visibility: visible; pointer-events: auto; }
.tour--cinematic .tour__copy { max-width: 400px; margin: 0; text-align: left; }
.tour--cinematic .tour__chapter p { margin-left: 0; margin-right: 0; }
.tour--cinematic .tour__chapter-index { justify-content: flex-start; }

/* Smaller, tighter type in the cinematic tour specifically — the base
   sizes above are tuned for the plain stacked no-JS/reduced-motion
   fallback, which has the full page width to work with. Every chapter's
   copy here instead sits in a fixed 400px column beside a much larger
   video (see _sizeFrame() in product-tour.js), so it reads as a caption,
   not a competing headline. */
.tour--cinematic .tour-selector__row { justify-content: flex-start; }

.tour--cinematic .display { font-size: clamp(1.7rem, 2.6vw, 2.4rem); }
.tour--cinematic .subhead { font-size: clamp(0.92rem, 1vw, 1rem); }
.tour--cinematic .tour__chapter h2 { font-size: clamp(1.25rem, 1.7vw, 1.6rem); margin-bottom: 10px; }
.tour--cinematic .tour__chapter p { font-size: 0.9rem; }
.tour--cinematic .tour__chapter-index { font-size: 0.7rem; margin-bottom: 10px; }

.tour__end-cta { margin-top: 22px; }
.tour--cinematic .tour__end-cta {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity var(--dur-med) var(--ease), transform var(--dur-med) var(--ease);
}
.tour--cinematic .tour__end-cta.is-ready {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Second selector outguns .tour--cinematic .tour__chapter p, so the
   footnote stays small inside the cinematic tour too. */
.tour__footnote,
.tour--cinematic .tour__chapter p.tour__footnote {
  margin-top: 10px;
  font-size: 0.72rem;
  color: var(--muted);
  opacity: 0.85;
}

.tour__spec-line {
  margin-top: 24px;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  display: grid;
  gap: 5px;
}

/* .colour-swatch.is-selected grows to scale(1.18) and paints a glow with a
   24px blur radius (see the rule above) — fine in the base layout's wider
   spacing, but in the tour's tighter 360px/0.9rem column the caption
   paragraph right above the swatches (only its own ~1em default bottom
   margin apart) sat close enough that the selected swatch's glow visually
   overlapped the last line of that text — a real, reported overlap, not a
   hypothetical one. Enough top margin to comfortably clear the glow radius
   fixes it without touching the base (non-cinematic) layout, which wasn't
   affected. */
.tour--cinematic .colour-swatches { margin-top: 36px; }

@media (prefers-reduced-motion: reduce) {
  .tour--cinematic .tour__chapter { transition: opacity var(--dur-fast) linear; }
}

@media (max-width: 900px) {
  .tour--cinematic { height: 850vh; }
  /* Phones. The frame is an edge-to-edge 16:9 strip: never cropped, and
     never wider than the layout, so the footage is not upscaled past its
     own pixels. _sizeFrame() in product-tour.js centres it vertically for
     the textless cold open, then it glides up under the nav for the copy
     chapters (only `top` changes, hence the transition). Copy is centred,
     horizontally and vertically, in the band below the video. */
  .tour--cinematic .tour__frame-wrap {
    border-radius: 0;
    box-shadow: none;
    transition: top 0.55s var(--ease);
  }
  .tour--cinematic .tour__scroll-cue { bottom: 40px; }
  .tour--cinematic .tour__chapter {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* --tour-video-bottom is published by _sizeFrame() (the video's actual
       bottom edge in px); the fallback is nav + gap + a full-width 16:9. */
    padding: calc(var(--tour-video-bottom, calc(79px + 56.25vw)) + 12px) 7vw 4vh;
  }
  .tour--cinematic .tour__copy {
    text-align: center;
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    /* Never scrollable. It used to be, as a safety net for short screens,
       and on a phone the two longest chapters overflowed by 40px and 8px:
       a flick meant for the page scrolled the copy instead and the text
       slid away behind the film. The two chapters are tightened to fit
       below instead. */
  }
  .tour--cinematic .tour__chapter-index { justify-content: center; }
  .tour--cinematic .tour__chapter-index::after { display: none; }
  .tour--cinematic .tour__chapter p { margin-left: auto; margin-right: auto; }
  /* Three classes deep on purpose: the desktop cinematic rules that push
     these rows to flex-start come later in the file at two classes. */
  .tour--cinematic .tour__chapter .tour-selector__row,
  .tour--cinematic .tour__chapter .colour-swatches,
  .tour--cinematic .tour__chapter .hero-ctas { justify-content: center; }
  .tour--cinematic .tour__spec-line { justify-items: center; }
  .tour--cinematic .rail { display: none; }
  /* The hero chapter carries more content (headline + subhead + two CTAs)
     than any other chapter: compact it so it fits under the video. */
  .tour--cinematic .tour__chapter[data-chapter="overview"] .display { font-size: 1.9rem; margin-bottom: 2px; }
  .tour--cinematic .tour__chapter[data-chapter="overview"] .subhead { font-size: 0.92rem; }
  .tour--cinematic .tour__chapter[data-chapter="overview"] .eyebrow { margin-bottom: 6px; }
  .tour--cinematic .tour__chapter[data-chapter="overview"] .hero-ctas { margin-top: 14px; gap: 10px; }
  .tour--cinematic .tour__chapter[data-chapter="overview"] .hero-ctas .btn { padding: 10px 18px; font-size: 0.85rem; }
  /* Magnification is the longest chapter: index, headline, the readout, a
     guidance line, five buttons, a paragraph and a footnote. Measured at
     367px against 327px of room on an iPhone, so every part gives a little
     back. The buttons keep their 44px hit area. */
  .tour--cinematic .tour__chapter[data-chapter="magnification"] h2 { font-size: 1.45rem; margin-bottom: 8px; }
  .tour--cinematic .tour__chapter[data-chapter="magnification"] .tour__chapter-index { margin-bottom: 10px; }
  .tour--cinematic .tour__chapter[data-chapter="magnification"] .mag-display__value { font-size: 1.9rem; }
  .tour--cinematic .tour__chapter[data-chapter="magnification"] .mag-display__fov { font-size: 0.82rem; margin: 2px 0 6px; }
  .tour--cinematic .tour__chapter[data-chapter="magnification"] [data-mag-guidance] { font-size: 0.84rem; line-height: 1.4; }
  .tour--cinematic .tour__chapter[data-chapter="magnification"] .tour-selector__row { margin-top: 10px; }
  .tour--cinematic .tour__chapter[data-chapter="magnification"] .tour__copy > p { font-size: 0.84rem; line-height: 1.4; margin-top: 10px !important; }
  .tour--cinematic .tour__chapter[data-chapter="magnification"] .tour__footnote { margin-top: 8px; }

  /* Colour was over by 8px: the swatches and the closing button. */
  .tour--cinematic .tour__chapter[data-chapter="colour"] .colour-swatches { gap: 12px; }
  .tour--cinematic .tour__chapter[data-chapter="colour"] .tour__end-cta { margin-top: 14px; }

  /* The pinned stage is a full screen but the last chapter's copy ends
     well above the fold. product-tour.js (_fitTail) measures that spare
     band and pulls the next section up over it with a negative margin, so
     the tour hands straight over with no empty screen in between. */
}

/* The section after the tour is pulled up over the sticky stage's empty
   tail by that negative margin, so it has to paint ABOVE the stage at every
   width. While this lived inside the phone breakpoint, desktop let the
   stage cover the section's top 170px, hiding its heading and swallowing
   the top padding so the band looked lopsided against its own bottom. */
.tour + section { position: relative; z-index: 1; }

/* ---------------------------------------------------------------------- */
/* Handoff / Why PENTAX (editorial rows)                                   */
/* ---------------------------------------------------------------------- */

.why-rows { position: relative; }
/* Connecting timeline line down the middle of the alternating rows, with a
   small ringed node at each row's vertical centre — purely decorative
   (hidden from AT), collapses on mobile where rows stack single-column and
   there's no longer a "middle" for it to run through. */
.why-rows::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--line) 8%, var(--line) 92%, transparent);
  transform: translateX(-50%);
  pointer-events: none;
}

.why-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  padding: 36px 0;
  border-top: 1px solid var(--line);
}
.why-row:first-of-type { border-top: 0; }
.why-row::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--pentax-blue);
  pointer-events: none;
}
.why-row--reverse .why-row__media { order: 2; }
.why-row__index { font-size: 0.85rem; font-weight: 700; color: var(--pentax-blue); letter-spacing: 0.08em; margin-bottom: 14px; }
/* Dark background: the images here are real frames from the product footage
   (black studio), so they blend into the page instead of sitting in a white
   card. `--photo` keeps the light card for white-studio photography. */
.why-row__media { position: relative; overflow: hidden; border-radius: 14px; background: var(--bg-raised); aspect-ratio: 16 / 11; }
.why-row__media img,
.why-row__media video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-slow) var(--ease); }
.why-row__media--photo { background: var(--card-light); }
/* Portrait media (vertical product/clinician clips): a taller box so the
   9:16 source fills without a hard crop. Cover-fit keeps the subject, which
   sits centred in every clip, in frame. */
/* Capped rather than filling half the row: at full column width a 4:5
   frame stood over 700px tall and swamped the copy beside it. Centred in
   its half so the alternating rows stay balanced. Narrower than the cap
   (phones) is unaffected. */
.why-row__media--portrait { aspect-ratio: 4 / 5; max-width: 380px; margin-inline: auto; }
/* Two built-around-you tiles now hold portrait clips; keep the 4:3 tile
   (so the 2x2 grid stays even) and frame the subject with object-position. */
.feature-card__media--portrait video { object-position: 50% 32%; }
.why-row__title { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin-bottom: 14px; letter-spacing: -0.01em; color: var(--ink); }

/* Scroll-reveal hiding is scoped to html:not(.no-js): without JS nothing
   would ever add .is-visible, and unscoped opacity:0 would hide these
   permanently for no-JS visitors. */
html:not(.no-js) .why-row {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
html:not(.no-js) .why-row.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 860px) {
  .why-row { grid-template-columns: 1fr; gap: 28px; padding: 44px 0; }
  .why-row--reverse .why-row__media { order: 0; }
  .why-rows::before, .why-row::after { display: none; }
}

/* ---------------------------------------------------------------------- */
/* Trust band — bold restatement of real specs, leading into the final CTA */
/* ---------------------------------------------------------------------- */

.trust--raised { background: var(--bg-raised) !important; }
.trust {
  position: relative;
  background: var(--bg);
  padding: 62px 0;
  overflow: hidden;
  text-align: center;
}
.trust__bg {
  position: absolute;
  inset: 0;
  opacity: 0.3;
  pointer-events: none;
}
.trust__bg video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 64%; }
.trust__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.5) 45%, rgba(0, 0, 0, 0.82));
}

.trust__glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 900px;
  height: 900px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(91, 134, 255, 0.16), transparent 70%);
  pointer-events: none;
}
.trust__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 34px;
}
.trust__heading { max-width: 560px; }
.trust__heading .eyebrow { display: block; margin-bottom: 12px; }
.trust__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  width: 100%;
  max-width: 960px;
}
.trust__stat {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
html:not(.no-js) .trust__stat {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
html:not(.no-js) .trust__stat.is-visible { opacity: 1; transform: translateY(0); }
.trust__stat:nth-child(2) { transition-delay: 80ms; }
.trust__stat:nth-child(3) { transition-delay: 160ms; }
.trust__stat:nth-child(4) { transition-delay: 240ms; }
.trust__stat-number {
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.trust__stat-label { color: var(--muted); font-size: 0.88rem; max-width: 200px; margin: 0 auto; }
.trust__stat-unit { font-size: 0.5em; font-weight: 600; color: var(--muted); margin-left: 4px; }
.trust__strip {
  color: var(--muted);
  font-size: 0.88rem;
  letter-spacing: 0.04em;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  width: 100%;
  max-width: 960px;
}
.trust__cta { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.trust__cta p { font-size: 1.15rem; color: var(--ink); max-width: 440px; }

@media (max-width: 780px) {
  .trust { padding: 72px 0; }
  .trust__stats { grid-template-columns: repeat(2, 1fr); gap: 32px 20px; }
}

/* ---------------------------------------------------------------------- */
/* Built around you — feature grid                                         */
/* ---------------------------------------------------------------------- */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.feature-card {
  background: var(--bg-raised);
  padding: 44px 36px;
  transition: background var(--dur-fast) var(--ease);
}
.feature-card:hover { background: var(--bg-raised-2); }
.feature-card__media { border-radius: 10px; overflow: hidden; margin-bottom: 22px; aspect-ratio: 4 / 3; background: var(--card-light); }
.feature-card__media img,
.feature-card__media video { width: 100%; height: 100%; object-fit: cover; }
.feature-card__stat { display: block; margin-bottom: 6px; color: var(--ink); }
.feature-card__label { font-weight: 600; margin-bottom: 8px; display: block; color: var(--ink); }
.feature-card__body { color: var(--muted); font-size: 0.95rem; }

@media (max-width: 780px) {
  .feature-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------- */
/* Magnification range — table (desktop) / rows (mobile)                   */
/* ---------------------------------------------------------------------- */

.mag-table { width: 100%; border-collapse: collapse; }
.mag-table th, .mag-table td {
  text-align: left;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
  font-size: 0.95rem;
  color: var(--ink);
}
.mag-table th { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.mag-table td:first-child, .mag-table th:first-child { font-weight: 700; font-size: 1.1rem; }

.spec-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
  color: var(--muted);
}
.spec-strip strong { color: var(--ink); display: block; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 4px; }

/* The table is a desktop reference. On a phone the buttons above are the
   comparison: each one swaps the field of view, the guidance and the sample. */
@media (max-width: 720px) {
  .mag-table { display: none; }
}

/* ---------------------------------------------------------------------- */
/* Prescription section                                                    */
/* ---------------------------------------------------------------------- */

.rx-section { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.rx-options { display: grid; gap: 18px; margin-top: 24px; }
.rx-option { padding: 18px 20px; border: 1px solid var(--line); border-radius: 12px; }
.rx-option h3 { font-size: 1rem; margin-bottom: 6px; color: var(--ink); }
.rx-option p { color: var(--muted); font-size: 0.92rem; }

@media (max-width: 860px) {
  .rx-section { grid-template-columns: 1fr; gap: 28px; }
}

/* ---------------------------------------------------------------------- */
/* Testimonials                                                            */
/* ---------------------------------------------------------------------- */

.testimonial {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 56px;
  align-items: center;
}
.testimonial__portrait { border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--bg-raised); }
.testimonial__portrait img { width: 100%; height: 100%; object-fit: cover; }
.testimonial__quote { font-size: clamp(1.2rem, 2vw, 1.6rem); line-height: 1.35; letter-spacing: -0.01em; margin-bottom: 20px; color: var(--ink); }
.testimonial__name { font-weight: 700; color: var(--ink); }
.testimonial__role { color: var(--muted); font-size: 0.9rem; }
.testimonial__controls { display: flex; align-items: center; gap: 16px; margin-top: 28px; }
.testimonial__prev, .testimonial__next {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.testimonial__dots { display: flex; gap: 8px; }
.testimonial__dot { width: 6px; height: 6px; border-radius: 50%; border: 0; background: var(--line-strong); cursor: pointer; padding: 0; }
.testimonial__dot.is-active { background: var(--pentax-blue); }

@media (max-width: 780px) {
  .testimonial { grid-template-columns: 1fr; gap: 24px; }
  .testimonial__portrait { max-width: 220px; }
}

/* ---------------------------------------------------------------------- */
/* FAQ accordion                                                           */
/* ---------------------------------------------------------------------- */

.faq-item { border-bottom: 1px solid var(--line); }
.faq-item__question { font-size: 1rem; }
.faq-item__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: none;
  border: 0;
  padding: 22px 4px;
  text-align: left;
  font-size: 1.05rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--ink);
}
.faq-item__chevron {
  flex-shrink: 0;
  width: 12px; height: 12px;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: rotate(45deg);
  transition: transform var(--dur-fast) var(--ease);
}
.faq-item__trigger[aria-expanded="true"] .faq-item__chevron { transform: rotate(-135deg); }
.faq-item__panel { padding: 0 4px 22px; color: var(--muted); max-width: var(--col-wide); }
.faq-item__panel p { font-size: 0.96rem; line-height: 1.6; }

/* ---------------------------------------------------------------------- */
/* Demo form                                                                */
/* ---------------------------------------------------------------------- */

.demo-section { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; }
.demo-form { display: grid; gap: 18px; }
.form-row { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; }
.field { display: grid; gap: 6px; }
/* Three rows always, in the enquiry form: label, control, error. The optional
   fields carry no error span, and without the reserved row they sat closer to
   the next field than the required ones did, so the column read as unevenly
   spaced. Scoped to the form, because the configurator puts a bare .field
   round a select where the extra row is just a hole. */
.demo-form .field { grid-template-rows: auto auto 16px; align-content: start; }
.field label { font-size: 0.85rem; font-weight: 600; color: var(--ink); }
.field .required { color: var(--pentax-blue); }
.field input, .field select, .field textarea {
  font-family: inherit;
  font-size: 0.95rem;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--bg-raised);
  color: var(--ink);
}
.field select option { background: var(--bg-raised); color: var(--ink); }
.field input::placeholder, .field textarea::placeholder { color: #8f8f96; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--pentax-blue); }
.field input[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: var(--danger); }
.field-error { min-height: 16px; font-size: 0.8rem; color: var(--danger); }
.form-status { min-height: 20px; font-size: 0.9rem; }
.form-status--success { color: var(--success); }
.form-status--error { color: var(--danger); }

.demo-aside { display: grid; gap: 20px; align-content: start; }
.demo-aside__card { border: 1px solid var(--line); border-radius: 14px; padding: 24px; background: var(--bg-raised); }
.demo-aside__card h3 { font-size: 1rem; margin-bottom: 8px; color: var(--ink); }
.demo-aside__card p { color: var(--muted); font-size: 0.92rem; }

@media (max-width: 900px) {
  .demo-section { grid-template-columns: 1fr; gap: 36px; }
  .form-row { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------- */
/* Footer                                                                   */
/* ---------------------------------------------------------------------- */

.footer {
  background: #050506;
  color: rgba(255, 255, 255, 0.62);
  padding: 64px 0 32px;
  font-size: 0.88rem;
  border-top: 1px solid var(--line);
}
.footer__top { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; margin-bottom: 40px; }
.footer__brand { font-weight: 700; color: var(--white); letter-spacing: 0.04em; margin-bottom: 10px; }
.footer__cols { display: flex; gap: 56px; flex-wrap: wrap; }
.footer__col h4 { color: var(--white); font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 14px; }
.footer__col a { display: block; text-decoration: none; color: rgba(255, 255, 255, 0.62); padding: 5px 0; }
.footer__col a:hover { color: var(--white); }
.footer__bottom { border-top: 1px solid var(--line); padding-top: 20px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; color: rgba(255, 255, 255, 0.58); font-size: 0.8rem; }

/* ---------------------------------------------------------------------- */
/* Hero (chapter 0 shares tour styling but a couple of hero-only bits)     */
/* ---------------------------------------------------------------------- */

.hero-ctas { display: flex; gap: 14px; margin-top: 26px; flex-wrap: wrap; justify-content: center; }
.tour--cinematic .hero-ctas { justify-content: flex-start; }

/* ---------------------------------------------------------------------- */
/* Misc                                                                     */
/* ---------------------------------------------------------------------- */

[hidden] { display: none !important; }

/* ---------------------------------------------------------------------- */
/* Fullscreen image viewer                                                 */
/* ---------------------------------------------------------------------- */
.lightbox {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  padding: 4vw;
  background: rgba(0,0,0,0.92);
  backdrop-filter: blur(4px);
  animation: lb-in var(--dur-fast) var(--ease);
}
@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }
.lightbox__img { max-width: 96vw; max-height: 92vh; object-fit: contain; border-radius: 10px; }
.lightbox__close {
  position: absolute; top: 20px; right: 24px;
  width: 44px; height: 44px;
  background: rgba(255,255,255,0.1); color: var(--white);
  border: 1px solid var(--line-strong); border-radius: 50%;
  font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.lightbox__close:hover { background: rgba(255,255,255,0.2); }

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

.no-js .js-only { display: none !important; }

/* ---------------------------------------------------------------------- */
/* Legal pages (privacy / terms / cookies / returns)                       */
/* ---------------------------------------------------------------------- */

.legal { padding-top: 140px; }
.legal .headline { margin-bottom: 6px; }
.legal__updated { color: var(--muted); font-size: 0.85rem; margin-bottom: 36px; }
.legal h2 { color: var(--ink); font-size: 1.25rem; letter-spacing: -0.01em; margin: 34px 0 10px; }
.legal p { color: var(--muted); font-size: 0.98rem; line-height: 1.65; margin-bottom: 12px; max-width: 70ch; }
.legal a { color: var(--pentax-blue); text-decoration: none; }
.legal a:hover { text-decoration: underline; }
.footer__bottom a { color: inherit; text-decoration: none; }
.footer__bottom a:hover { color: var(--white); }

/* ---------------------------------------------------------------------- */
/* Photo slots — placeholders that swap themselves for real photos          */
/* the moment the referenced file exists (see initPhotoSlots in main.js).   */
/* ---------------------------------------------------------------------- */

.photo-slot {
  position: relative;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-raised);
  border: 1px dashed var(--line-strong);
  aspect-ratio: 4 / 3;
}
.photo-slot img { width: 100%; height: 100%; object-fit: cover; }
/* Product renders (colours, lenses, lights) are square subjects on pure
   black. contain shows the whole product; the black container is seamless
   with the render's own background, so there are no visible bars. */
.cfg-preview--product img,
.cfg-colour__media img { object-fit: contain !important; background: #000; }
.cfg-preview--product, .cfg-colour__media { background: #000; }
[data-zoom] { cursor: zoom-in; }
.photo-slot.has-photo { border-style: solid; border-color: var(--line); }
.photo-slot.has-photo .photo-slot__placeholder { display: none; }
.photo-slot__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 16px;
}
.photo-slot__icon { font-size: 1.6rem; color: var(--muted); }
.photo-slot__label { font-weight: 600; color: var(--ink); font-size: 0.95rem; }
.photo-slot__note { color: var(--muted); font-size: 0.78rem; }

/* ---------------------------------------------------------------------- */
/* Magnification section — selector + per-magnification sample slot        */
/* ---------------------------------------------------------------------- */

/* Three children, not two: the priority slider is a sibling of the sample so
   that on a phone the order reads readout -> buttons -> sample -> slider,
   and tapping a magnification changes the picture directly below it. */
.mag-layout {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  grid-template-areas:
    "selector sample"
    "priority sample";
  column-gap: 56px;
  align-items: center;
  margin-bottom: 48px;
}
.mag-layout > .tour-selector { grid-area: selector; margin-top: 0; }
.mag-layout > .mag-sample { grid-area: sample; }
.mag-layout > .mag-priority { grid-area: priority; }
.mag-layout .tour-selector__row { justify-content: flex-start; }

.mag-sample {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg-raised-2);
  border: 1px solid var(--line);
}
.mag-sample__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.mag-sample__badge {
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--pentax-blue);
}
.mag-sample__note { color: var(--muted); font-size: 0.85rem; }

/* Priority slider — "What's more important for you?" Field of view on the
   left, magnification on the right; the track splits into five equal bands,
   one per level, and the recommended band's tick lights up
   (initMagPrioritySlider() in main.js). */
.mag-priority {
  --thumb: 22px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.mag-priority__title {
  display: block;
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--ink);
  margin-bottom: 16px;
}
.mag-priority__scale {
  display: grid;
  grid-template-areas: "left track right";
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 14px;
}
.mag-priority__end {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  line-height: var(--thumb); /* centred on the thumb row */
}
.mag-priority__end:first-child { grid-area: left; }
.mag-priority__end:last-child { grid-area: right; text-align: right; }
.mag-priority__track { grid-area: track; min-width: 0; display: grid; gap: 6px; }
.mag-priority__range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: var(--thumb);
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.mag-priority__range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--line-strong), var(--pentax-blue));
}
.mag-priority__range::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--line-strong), var(--pentax-blue));
}
.mag-priority__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--thumb);
  height: var(--thumb);
  margin-top: calc((4px - var(--thumb)) / 2);
  border-radius: 50%;
  background: var(--ink);
  border: 3px solid var(--bg-raised);
  box-shadow: 0 0 0 1px var(--line-strong), 0 8px 20px -8px rgba(0, 0, 0, 0.9);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.mag-priority__range::-moz-range-thumb {
  width: var(--thumb);
  height: var(--thumb);
  border-radius: 50%;
  background: var(--ink);
  border: 3px solid var(--bg-raised);
  box-shadow: 0 0 0 1px var(--line-strong), 0 8px 20px -8px rgba(0, 0, 0, 0.9);
}
.mag-priority__range:hover::-webkit-slider-thumb,
.mag-priority__range:active::-webkit-slider-thumb { transform: scale(1.1); }
.mag-priority__range:focus-visible { outline: none; }
.mag-priority__range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--pentax-blue); }
.mag-priority__range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--pentax-blue); }
.mag-priority__ticks {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin: 0;
  padding: 0 calc(var(--thumb) / 2); /* lines the five bands up with the thumb's travel */
  list-style: none;
  font-size: 0.74rem;
  color: var(--muted);
  text-align: center;
}
.mag-priority__ticks li { transition: color var(--dur-fast) var(--ease); }
.mag-priority__ticks li.is-active { color: var(--ink); font-weight: 600; }
.mag-priority__result { margin-top: 16px; font-size: 0.95rem; color: var(--muted); }
.mag-priority__result strong { color: var(--ink); font-weight: 700; }

@media (max-width: 860px) {
  .mag-layout {
    grid-template-columns: 1fr;
    grid-template-areas: "selector" "sample" "priority";
    gap: 24px;
  }
}
@media (max-width: 720px) {
  /* End labels move above the track so it keeps a usable length */
  .mag-priority__scale {
    grid-template-areas: "left right" "track track";
    grid-template-columns: 1fr 1fr;
    row-gap: 10px;
  }
  .mag-priority__end { line-height: 1.3; }
}

/* ---------------------------------------------------------------------- */
/* Illumination section — two LED photo slots + copy                       */
/* ---------------------------------------------------------------------- */

.led-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.led-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 860px) { .led-options { grid-template-columns: 1fr; } }

@media (max-width: 860px) {
  .led-section { grid-template-columns: 1fr; gap: 32px; }
}

/* ---------------------------------------------------------------------- */
/* Who it's for — discipline cards                                          */
/* ---------------------------------------------------------------------- */

.discipline-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.discipline-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 36px 30px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--bg);
  text-decoration: none;
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease);
}
.discipline-card:hover {
  border-color: var(--pentax-blue-dim);
  transform: translateY(-4px);
  box-shadow: 0 24px 60px -30px rgba(91, 134, 255, 0.35);
}
.discipline-card__media {
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: 12px;
  margin-bottom: 8px;
}
/* People photos are portrait; bias the crop toward the top so faces and
   loupes stay in frame rather than the torso. */
.discipline-card__media img { object-position: 50% 22%; }
.discipline-card__media .photo-slot__label { font-size: 0.8rem; }
.discipline-card__media .photo-slot__note { font-size: 0.65rem; }

.discipline-card__index {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--pentax-blue);
  letter-spacing: 0.08em;
}
.discipline-card h3 { font-size: 1.5rem; letter-spacing: -0.01em; color: var(--ink); }
.discipline-card__chip {
  align-self: flex-start;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 4px 12px;
}
.discipline-card p { color: var(--muted); font-size: 0.92rem; flex: 1; }
.discipline-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--pentax-blue);
}
.discipline-card:hover .discipline-card__link { text-decoration: underline; }

/* Scroll reveal (same html:not(.no-js) guard as .why-row — see there) */
html:not(.no-js) .discipline-card,
html:not(.no-js) .steps__item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-med) var(--ease);
}
html:not(.no-js) .discipline-card.is-visible,
html:not(.no-js) .steps__item.is-visible { opacity: 1; transform: translateY(0); }
html:not(.no-js) .discipline-card.is-visible:hover { transform: translateY(-4px); }

@media (max-width: 780px) {
  .discipline-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------- */
/* UK service — numbered steps                                              */
/* ---------------------------------------------------------------------- */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  position: relative;
}
.steps__item {
  position: relative;
  padding: 30px 26px 26px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--bg);
}
.steps__num {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--pentax-blue);
  letter-spacing: 0.08em;
  border: 1px solid var(--pentax-blue-dim);
  border-radius: 999px;
  padding: 4px 12px;
  margin-bottom: 16px;
}
.steps__item h3 { font-size: 1.1rem; margin-bottom: 8px; color: var(--ink); }
.steps__item p { color: var(--muted); font-size: 0.92rem; }

@media (max-width: 780px) {
  .steps { grid-template-columns: 1fr; }
}

.steps--stacked { grid-template-columns: 1fr; align-content: start; }

@media (max-width: 860px) {
  .uk-split { grid-template-columns: 1fr; }
  .ambient-panel { max-height: 420px; aspect-ratio: 4 / 5; min-height: 0; }
}

/* ---------------------------------------------------------------------- */
/* Configurator — build-your-loupes flow                                    */
/* ---------------------------------------------------------------------- */

.cfg {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 48px;
  align-items: start;
  max-width: 880px; /* the live summary floats (see .cfg__summary), so the steps run in one readable column */
}
/* Bottom padding keeps the last step clear of the floating summary bar */
/* The bar floats over the steps, so the last one reserves its height plus
   the inset it sits at; anything less and the bar covers the final card at
   the bottom of the section. */
.cfg__steps { display: grid; gap: 20px; padding-bottom: 104px; }
@media (max-width: 1000px) { .cfg__steps { padding-bottom: 96px; } }
.cfg__step {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 26px 28px 28px;
  background: var(--bg);
  transition: border-color var(--dur-fast) var(--ease);
}
.cfg__step legend {
  /* legend behaves oddly across browsers inside rounded fieldsets — float
     keeps it in normal flow so the border stays intact */
  float: left;
  width: 100%;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--ink);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.cfg__step legend + * { clear: both; }
.cfg__step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--pentax-blue);
  color: var(--white);
  font-size: 0.85rem;
  font-weight: 700;
  flex-shrink: 0;
}
.cfg__step.cfg__step--invalid { border-color: var(--danger); }
.cfg__hint { margin-top: 12px; color: var(--muted); font-size: 0.85rem; }

/* Per-step preview picture, shown once an option is chosen */
.cfg-preview {
  margin-top: 18px;
  aspect-ratio: 16 / 9;
  max-width: 460px;
}
/* Product-render previews are square subjects — give them a squarer box so
   contain leaves minimal empty space, and hint they open fullscreen. */
.cfg-preview--product { aspect-ratio: 4 / 3; }
.cfg-preview--product::after {
  content: "\2922";
  position: absolute; right: 10px; top: 10px;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  font-size: 15px; color: var(--ink);
  background: rgba(0,0,0,0.55); border-radius: 8px;
  pointer-events: none;
}
.cfg__error { margin-top: 12px; color: var(--danger); font-size: 0.85rem; }

/* Colour cards — side by side so every option is visible at once */
.cfg__colours {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.cfg-colour {
  display: grid;
  gap: 10px;
  padding: 10px 10px 14px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 14px;
  cursor: pointer;
  color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.cfg-colour:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.cfg-colour[aria-pressed="true"] {
  border-color: var(--pentax-blue);
  box-shadow: 0 0 0 1px var(--pentax-blue), 0 12px 32px -18px rgba(91, 134, 255, 0.6);
}
.cfg-colour__media { aspect-ratio: 1 / 1; border-radius: 10px; }
.cfg-colour__media .photo-slot__placeholder { padding: 0; }
.cfg-colour__dot {
  width: 44%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.12), 0 10px 24px -10px rgba(0, 0, 0, 0.8);
}
.cfg-colour__name { font-size: 0.88rem; font-weight: 600; text-align: center; }

/* Option chips (magnification / lenses / light) */
.cfg__chips { display: flex; flex-wrap: wrap; gap: 10px; }
.cfg-chip {
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink);
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.cfg-chip:hover { border-color: var(--ink); }
.cfg-chip[aria-pressed="true"] { background: var(--ink); color: #0a0a0c; border-color: var(--ink); }
.cfg-chip:active { transform: scale(0.97); }

/* Floating summary bar — fixed to the bottom-centre of the viewport while
   the configurator is on screen (initConfigurator() toggles .is-visible from
   an IntersectionObserver on #configure). Sits under the nav and its drawer
   (z 100) and the lightbox (z 300), above everything else. Off-screen and
   inert until the section arrives so the hero and tour stay clean. */
.cfg__summary {
  --bar-inset: 24px;
  position: fixed;
  left: 50%;
  /* --bar-dock is written by initConfigurator(): it grows as the
     configurator's bottom edge rises past the bar, so the bar stops
     floating and rides out with the section instead of drifting on
     over the sections below. */
  bottom: calc(var(--bar-inset) + var(--bar-dock, 0px) + env(safe-area-inset-bottom, 0px));
  z-index: 90;
  width: min(1120px, calc(100vw - 2 * var(--bar-inset)));
  display: grid;
  grid-template-areas: "head list btn";
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 24px;
  padding: 14px 14px 14px 26px;
  border: 1px solid var(--line-strong);
  border-radius: 22px;
  background: rgba(30, 31, 34, 0.84);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: 0 30px 70px -24px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(0, 0, 0, 0.5);
  transform: translate(-50%, calc(100% + var(--bar-inset) + 24px));
  opacity: 0;
  visibility: hidden;
  transition: transform var(--dur-med) var(--ease), opacity var(--dur-med) var(--ease), visibility 0s var(--dur-med);
}
.cfg__summary.is-visible {
  transform: translate(-50%, 0);
  opacity: 1;
  visibility: visible;
  transition: transform var(--dur-med) var(--ease), opacity var(--dur-med) var(--ease), visibility 0s;
}
.cfg__summary[hidden] { display: none; }
.cfg__summary-head { grid-area: head; display: grid; gap: 2px; }
.cfg__summary h3 {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.cfg__summary-progress { font-size: 0.92rem; font-weight: 600; color: var(--ink); white-space: nowrap; }
.cfg__summary-list { grid-area: list; margin: 0; display: flex; min-width: 0; }
.cfg__summary-list > div {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 2px 16px;
  border-left: 1px solid var(--line);
}
.cfg__summary-list dt {
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cfg__summary-list dd {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cfg__summary-list dd.is-set { color: var(--ink); font-weight: 600; }
.cfg__summary-compact { grid-area: compact; display: none; }
.cfg__quote-btn { grid-area: btn; justify-content: center; white-space: nowrap; }

/* Narrower than the five-column list can bear: title + one-line recap on the
   left, quote button on the right. The list stays in the accessibility tree. */
@media (max-width: 1000px) {
  .cfg__summary {
    --bar-inset: 20px;
    grid-template-areas: "head btn" "compact btn";
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 14px;
    row-gap: 2px;
    padding: 12px 12px 12px 18px;
    border-radius: 18px;
  }
  .cfg__summary-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
  }
  .cfg__summary h3 { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; }
  .cfg__summary-progress { flex: none; }
  .cfg__summary-list {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .cfg__summary-compact {
    display: block;
    margin: 0;
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cfg__quote-btn { padding: 11px 16px; font-size: 0.88rem; }
}
/* Phones: no room for the title next to the count, so it goes to assistive
   tech only and the "n of 5 chosen" line plus the recap carry the bar. */
@media (max-width: 600px) {
  .cfg__summary h3 {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

.cfg__submit-row { display: grid; gap: 12px; margin-top: 6px; }
.consent-note { color: var(--muted); font-size: 0.82rem; max-width: 520px; }
.consent-note .text-link { font-weight: 500; }

/* Success state */
.cfg__success {
  grid-column: 1 / -1;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 64px 32px;
  background: var(--bg);
  display: grid;
  justify-items: center;
  gap: 14px;
}
.cfg__success h3 { font-size: 1.6rem; color: var(--ink); }
.cfg__success p { color: var(--muted); max-width: 480px; }
.cfg__success-recap { font-size: 0.85rem; }
.cfg__success-check {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid var(--success);
  position: relative;
  animation: check-in 600ms var(--ease);
}
.cfg__success-check::after {
  content: "";
  position: absolute;
  left: 21px;
  top: 16px;
  width: 16px;
  height: 28px;
  border-right: 3px solid var(--success);
  border-bottom: 3px solid var(--success);
  transform: rotate(45deg);
}
@keyframes check-in {
  0% { transform: scale(0.6); opacity: 0; }
  60% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}

@media (max-width: 900px) {
  .cfg { grid-template-columns: 1fr; gap: 24px; }
  .cfg__step { padding: 20px 18px 22px; }
  .cfg__colours { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .cfg__success-check,
  .colour-swatch.is-pop { animation: none; }
  .discipline-card:hover { transform: none; }
  .cfg__summary,
  .mag-priority__range::-webkit-slider-thumb,
  .mag-priority__ticks li { transition: none; }
}

/* ---------------------------------------------------------------------- */
/* Built around you: four portrait tiles                                   */
/* The working-distance and PD clips are 9:16 and the working-distance     */
/* composition runs diagonally (surgeon top-left, patient bottom-right), so */
/* a landscape tile can never hold it. All four tiles share a 3:4 box; on   */
/* desktop they sit in one row so the section stays a sensible height.      */
/* ---------------------------------------------------------------------- */
/* 5:6, between the old 3:4 and a square. A square could not hold the
   working-distance shot: the surgeon's head starts a quarter of the way
   down a 9:16 frame and the patient is in the bottom corner, so anchoring
   low to keep the patient sliced the top of his head off. 5:6 holds the cap
   and a corner of the patient, and is only a fifth taller than a square. */
.feature-card__media { aspect-ratio: 5 / 6; }
.feature-card__media--portrait video { object-position: 50% 50%; }
/* From the top of the cap down, with the patient's corner still in shot. */
.feature-card__media--wd video { object-position: 50% 64%; }
/* The lens photograph is square and already cut at the left barrel, so the
   5:6 box takes its width off the right (hair) and keeps both eyes. */
.feature-card__media--lens img { object-position: 35% 50%; }
@media (min-width: 1100px) {
  .feature-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; }
  .feature-card { padding: 20px; }
  .feature-card__media { margin-bottom: 18px; }
}
/* Why PENTAX: the wide-field row uses the same diagonal shot; give it a
   taller box anchored to the bottom so the patient stays in frame. */
.why-row__media--tall { aspect-ratio: 2 / 3; max-width: 340px; }
.why-row__media--tall video { object-position: 50% 100%; }

/* Who it's for: a single centred call to action under the three cards
   (replaces the per-card links and numbering). */
.discipline-cta { display: flex; justify-content: center; margin-top: 40px; }

/* ---------------------------------------------------------------------- */
/* Loupe passport — homepage intro (card visual) and benefits grid          */
/* The passport pages themselves live in passport.html / css/passport.css. */
/* ---------------------------------------------------------------------- */

.passport-intro {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 64px;
  align-items: center;
}
.passport-intro__copy .headline { margin: 12px 0 16px; }
.passport-steps { display: grid; gap: 12px; margin: 30px 0 0; padding: 0; list-style: none; }
.passport-steps__item {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg);
}
.passport-steps__num {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 0.78rem; font-weight: 700;
  color: var(--pentax-blue);
  border: 1px solid var(--pentax-blue-dim);
}
.passport-steps__item h3 { font-size: 1rem; color: var(--ink); margin-bottom: 4px; }
.passport-steps__item p { color: var(--muted); font-size: 0.92rem; }
.passport-intro__ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

/* The card: the same white A6 passport card that /manage prints, sitting
   on the dark page with a soft blue glow behind it. */
.passport-visual { position: relative; display: grid; justify-items: center; gap: 22px; padding: 24px 0; }
.passport-visual__glow {
  position: absolute;
  left: 50%; top: 45%;
  /* Sized to the column rather than a fixed 520px: this used to spill past
     the viewport on phones and zoom the whole page out. */
  width: min(520px, 100%); height: 520px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(91, 134, 255, 0.22), transparent 66%);
  pointer-events: none;
}
.passport-stack {
  position: relative;
  width: min(100%, 330px);
  display: grid;
}
/* Colourways fanned out behind the passport, so the card reads as one of a
   set rather than a single mock-up. Purely decorative: the wrapper is
   aria-hidden, and these carry no text. */
.passport-stack__card {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  transform-origin: 50% 90%;
  box-shadow: 0 30px 60px -32px rgba(0, 0, 0, 0.95), inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  will-change: transform;
}
/* The fan opens as the visitor scrolls the card into view, not on hover or
   tap: --fan runs from 0 (a neat deck) to 1 (fully fanned) and is set from
   main.js (initPassportFan). Scrolling back up closes it again. Without
   JavaScript it rests part way open. */
.passport-visual { --fan: 0.55; }
.passport-stack__card--blue  { background: linear-gradient(150deg, #3f74ff, #1c3fa8); transform: rotate(calc(1deg + 5deg * var(--fan)))  translateY(calc(1px + 2px * var(--fan)))  scale(0.985); }
.passport-stack__card--red   { background: linear-gradient(150deg, #cf3b33, #8d1b18); transform: rotate(calc(2deg + 9deg * var(--fan)))  translateY(calc(2px + 5px * var(--fan)))  scale(0.97); }
.passport-stack__card--pink  { background: linear-gradient(150deg, #ef7fb4, #b4487d); transform: rotate(calc(3deg + 13deg * var(--fan))) translateY(calc(3px + 8px * var(--fan)))  scale(0.955); }
.passport-stack__card--black { background: linear-gradient(150deg, #33343a, #131417); transform: rotate(calc(4deg + 17deg * var(--fan))) translateY(calc(4px + 11px * var(--fan))) scale(0.94); }

.passport-card {
  position: relative;
  z-index: 1;
  width: 100%;
  background: #fff;
  color: #111;
  border-radius: 18px;
  padding: 30px 28px 26px;
  display: grid;
  gap: 18px;
  transform: rotate(-3deg);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.06);
  transition: transform var(--dur-slow) var(--ease);
}
.passport-visual:hover .passport-card { transform: rotate(0deg) translateY(-4px); }
.passport-card__brand { font-weight: 800; letter-spacing: 0.14em; font-size: 0.95rem; }
.passport-card__brand span { display: block; font-weight: 500; letter-spacing: 0.16em; font-size: 0.58rem; color: #6b6b6b; text-transform: uppercase; margin-top: 3px; }
.passport-card__title { font-size: 1.2rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.15; }
.passport-card__name { font-size: 0.9rem; color: #333; margin-top: 4px; }
.passport-card__qr { width: 150px; height: 150px; margin: 0 auto; }
.passport-card__qr svg { width: 100%; height: 100%; display: block; }
.passport-card__spec { font-size: 0.78rem; color: #444; text-align: center; line-height: 1.5; }
.passport-card__ref { font-size: 0.74rem; letter-spacing: 0.12em; font-weight: 700; text-align: center; margin-top: 4px; }
.passport-card__foot { font-size: 0.7rem; color: #666; text-align: center; line-height: 1.45; }
.passport-visual__chips { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.passport-visual__chips li {
  font-size: 0.78rem; font-weight: 600; color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: 999px; padding: 7px 12px;
  background: rgba(10, 10, 12, 0.6);
}

/* A personal panel sits beside the reasons, so the section opens on the
   owner rather than on a list: the point of a passport is that it belongs
   to one person. */
.benefit-layout {
  display: grid;
  grid-template-columns: minmax(0, 330px) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}
.benefit-feature {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--bg-raised-2), var(--bg-raised));
}
.benefit-feature__media { aspect-ratio: 4 / 5; background: #000; }
.benefit-feature__media img { object-position: 50% 22%; }
.benefit-feature__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.benefit-feature__body { padding: 22px 24px 26px; }
.benefit-feature__kicker {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pentax-blue);
  margin-bottom: 12px;
}
.benefit-feature__text { color: var(--ink); font-size: 1.02rem; line-height: 1.5; letter-spacing: -0.01em; }
.benefit-feature__note { color: var(--muted); font-size: 0.87rem; line-height: 1.6; margin-top: 12px; }

/* Cards, not a hairline mosaic: rounded, separated and liftable reads far
   warmer than a 1px grid, and gives each reason its own breathing room. */
.benefit-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.benefit,
.led-option {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 26px 26px 28px;
}
.benefit:hover,
.led-option:hover { background: var(--bg-raised-2); border-color: var(--line-strong); }
/* With an odd number of reasons the last card would sit alone in half a
   row; let it run the full width so the block still reads as a block. */
.benefit-grid > .benefit:last-child:nth-child(odd) { grid-column: 1 / -1; }
.benefit__icon,
.led-option__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  margin-bottom: 15px;
  color: var(--pentax-blue);
  background: rgba(91, 134, 255, 0.12);
  box-shadow: inset 0 0 0 1px rgba(91, 134, 255, 0.22);
}
.benefit__icon svg,
.led-option__icon svg { width: 19px; height: 19px; }
.benefit h3,
.led-option h3 { font-size: 1.08rem; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 9px; }
.benefit p,
.led-option p { color: var(--muted); font-size: 0.93rem; line-height: 1.62; }

/* Scroll reveal, same html:not(.no-js) guard as .why-row */
html:not(.no-js) .benefit,
html:not(.no-js) .benefit-feature,
html:not(.no-js) .passport-visual {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease), background var(--dur-fast) var(--ease);
}
html:not(.no-js) .benefit.is-visible,
html:not(.no-js) .benefit-feature.is-visible,
html:not(.no-js) .passport-visual.is-visible { opacity: 1; transform: translateY(0); }
.benefit:nth-child(2), .benefit:nth-child(5) { transition-delay: 60ms; }
.benefit:nth-child(3), .benefit:nth-child(6) { transition-delay: 120ms; }

@media (max-width: 1000px) {
  .benefit-layout { grid-template-columns: 1fr; }
  .benefit-feature { max-width: 520px; margin: 0 auto; }
  .benefit-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .passport-intro { grid-template-columns: 1fr; gap: 36px; }
  .passport-card, .passport-visual:hover .passport-card { transform: none; }
}
@media (max-width: 640px) {
  .benefit-grid { grid-template-columns: 1fr; }
  .benefit { padding: 24px 22px 26px; }
  .benefit__icon { margin-left: auto; margin-right: auto; }
  .passport-intro__ctas .btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .passport-card, .passport-visual:hover .passport-card { transform: none; transition: none; }
}

/* Honeypot fields on the enquiry forms: invisible to people, tempting to
   bots. The server rejects any submission that fills one in. */
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------------------------------------------------------------------- */
/* Phones: once media and copy stack in one column, centre the copy under  */
/* the media. Forms and the FAQ stay left-aligned (readability).           */
/* ---------------------------------------------------------------------- */
@media (max-width: 780px) {
  .section-heading { text-align: center; margin-left: auto; margin-right: auto; }
  .why-row__text,
  .feature-card,
  .discipline-card,
  .passport-intro__copy,
  .demo-aside__card,
  .testimonial,
  #magnification [data-magnification-selector] { text-align: center; }
  .testimonial { justify-items: center; }
  .testimonial__portrait { margin: 0 auto; }
  .testimonial__controls,
  .passport-intro__ctas { justify-content: center; }
  .footer__top, .footer__cols, .footer__bottom { text-align: center; justify-content: center; }
  .footer__col { align-items: center; }
}

/* ---------------------------------------------------------------------- */
/* Brochure: the downloadable PDF for leads (brochure/). Cover image left,  */
/* copy and download button right; stacks and centres on narrow screens.    */
/* ---------------------------------------------------------------------- */
.brochure { display: grid; grid-template-columns: 300px 1fr; gap: 64px; align-items: center; }
.brochure__cover {
  display: block; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--line-strong);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55);
  transition: transform var(--dur-med) var(--ease), border-color var(--dur-fast) var(--ease);
}
.brochure__cover:hover { transform: translateY(-4px); border-color: var(--ink); }
.brochure__cover img { display: block; width: 100%; height: auto; }
.brochure__text .eyebrow { display: block; margin-bottom: 14px; }
.brochure__text .headline { margin-bottom: 16px; }
.brochure__actions { display: flex; align-items: center; gap: 18px; margin-top: 28px; flex-wrap: wrap; }
@media (max-width: 860px) {
  .brochure { grid-template-columns: 1fr; gap: 36px; }
  .brochure__cover { max-width: 260px; margin: 0 auto; }
  .brochure__text { text-align: center; }
  .brochure__actions { justify-content: center; }
}

/* Phones: wordmark centred in the bar, menu button on the right. */
@media (max-width: 900px) {
  .nav__inner { justify-content: flex-end; }
  .nav__brand {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    align-items: center;
  }
}
/* Phones: the remaining left-aligned copy blocks (found by a sweep at 375px). */
@media (max-width: 780px) {
  #prescription .eyebrow, #prescription .headline, #prescription .body-copy, .rx-option,
  #request-demo .eyebrow, #request-demo .headline, #request-demo .body-copy, #request-demo .consent-note,
  .steps__item, .mag-priority, .cfg__hint, .benefit { text-align: center; }
  .consent-note { margin-left: auto; margin-right: auto; }
}

/* ---------------------------------------------------------------------- */
/* Touch targets                                                           */
/* Small visual controls (progress dots, carousel dots, swatches, pills)   */
/* keep their size but get a 44x44 hit area on touch pointers, which is    */
/* the WCAG 2.5.5 / platform minimum. An invisible ::after does the work   */
/* so nothing about the design changes.                                    */
/* ---------------------------------------------------------------------- */
.rail__dot, .testimonial__dot, .colour-swatch { position: relative; }
.rail__dot::after, .testimonial__dot::after, .colour-swatch::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}
@media (pointer: coarse) {
  .mag-btn { min-height: 48px; }
  .faq-item__trigger { min-height: 48px; }
  .nav__drawer a:not(.btn) { min-height: 48px; }
  .testimonial__prev, .testimonial__next { width: 44px; height: 44px; }
}

/* ---------------------------------------------------------------------- */
/* Links inside prose must not rely on colour alone to be recognisable     */
/* (WCAG 1.4.1). Navigation, buttons and cards are excluded: they are      */
/* distinguishable by position and shape.                                  */
/* ---------------------------------------------------------------------- */
.body-copy a,
.legal a,
p a:not(.btn):not(.text-link),
.consent-note a,
.faq-item__panel a,
.footer__col a {
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: from-font;
}
.text-link { text-decoration: underline; text-underline-offset: 0.18em; }
.footer__col a { text-decoration-color: rgba(255, 255, 255, 0.35); }
.footer__col a:hover { text-decoration-color: currentColor; }

/* Touch pointers: bring the real controls up to a 44px target. Inline links
   inside sentences are deliberately left alone -- WCAG 2.5.8 exempts them,
   and padding them out would wreck the line spacing of body copy. */
@media (pointer: coarse) {
  /* The bars are positioned against the 34px box, so the hit area is added
     as an overlay rather than by resizing the button. */
  .nav__toggle::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }
  .nav__brand { padding-block: 10px; }
  .cfg-chip { padding-block: 12px; }
  .field input, .field select, .field textarea { min-height: 44px; }
  .footer__col a { padding-block: 12px; }
  .mag-priority__range { height: 44px; }
  /* A standalone call to action, not a link inside a sentence. */
  .journey__link { min-height: 44px; }
}

/* Small print carries links inside sentences; a little more leading keeps
   those links above the 24px minimum target and makes the text easier to
   read at 0.82rem. */
.consent-note, .demo-aside__card p, .footer__bottom { line-height: 1.95; }

/* Phones: a narrower column, so the deck sits slightly smaller. */
@media (max-width: 560px) {
  .passport-stack { width: min(100%, 300px); }
}

/* ---------------------------------------------------------------------- */
/* How it works: four steps, then the lead-time comparison                  */
/* ---------------------------------------------------------------------- */
.journey {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 0 0 34px;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.journey__step {
  position: relative;
  padding: 20px 20px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-raised);
}
/* The rule joining one step to the next; hidden on the last, and dropped
   entirely once the steps stack. */
.journey__step::after {
  content: "";
  position: absolute;
  top: 35px;
  right: -15px;
  width: 15px;
  height: 1px;
  background: var(--line-strong);
}
.journey__step:last-child::after { display: none; }
.journey__num {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-bottom: 12px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--pentax-blue);
  background: rgba(91, 134, 255, 0.12);
  box-shadow: inset 0 0 0 1px rgba(91, 134, 255, 0.24);
}
.journey__step h3 { font-size: 0.97rem; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 7px; }
.journey__step p { color: var(--muted); font-size: 0.86rem; line-height: 1.55; }
.journey__when {
  display: inline-block;
  margin-top: 12px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pentax-blue);
  background: rgba(91, 134, 255, 0.1);
}

.speed {
  margin: 0;
  padding: 24px 24px 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--bg-raised);
}
.speed__title { font-size: 0.95rem; font-weight: 600; color: var(--ink); margin-bottom: 18px; }
.speed__row { display: grid; gap: 9px; margin-bottom: 18px; }
.speed__label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; font-size: 0.92rem; color: var(--muted); }
.speed__label strong { color: var(--ink); font-weight: 600; }
.speed__track { display: block; height: 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.speed__bar { display: block; height: 100%; border-radius: 999px; background: var(--line-strong); }
.speed__bar--fast { background: linear-gradient(90deg, var(--pentax-blue), #8fb0ff); min-width: 34px; }
.speed__note { margin-top: 4px; font-size: 0.86rem; color: var(--muted); line-height: 1.6; }

@media (max-width: 980px) {
  .journey { grid-template-columns: repeat(2, 1fr); }
  .journey__step:nth-child(2)::after { display: none; }
}
@media (max-width: 620px) {
  .journey { grid-template-columns: 1fr; }
  .journey__step::after { display: none; }
  .speed { padding: 24px 22px; }
}

/* ---------------------------------------------------------------------- */
/* Card tone follows the section                                           */
/* Sections alternate black and grey, so a card carrying the same grey as  */
/* its section disappears into it. Inside a raised (grey) section every    */
/* card drops to the page black instead; on black sections they keep the   */
/* raised grey. One rule, so adding a section never silently swallows the  */
/* cards inside it.                                                        */
/* ---------------------------------------------------------------------- */
.section--raised .journey__step,
.section--raised .speed,
.section--raised .benefit,
.section--raised .led-option,
.section--raised .feature-card,
.section--raised .discipline-card,
.section--raised .demo-aside__card,
.section--raised .rx-option,
.section--raised .cfg-colour,
.section--raised .testimonial__portrait,
.section--raised .why-row__media { background: var(--bg); }
.section--raised .benefit-feature { background: linear-gradient(180deg, var(--bg), #0e0f11); }
.section--raised .benefit:hover,
.section--raised .led-option:hover,
.section--raised .feature-card:hover { background: #0e0f11; }

/* This headline needs about 795px on one line and the shared heading column
   caps at 760px, so it broke onto a second line for the sake of 35px. Freed
   to the container width here; the paragraph under it keeps a readable
   measure, and narrow screens still wrap because the type scales with the
   viewport. */
#illumination-detail .section-heading { max-width: none; }
#illumination-detail .section-heading .body-copy { max-width: 720px; }

/* The prescription section is a two-column layout with a single image, not
   a run of editorial rows, so it carries a larger frame than the 380px cap
   the Why PENTAX rows share. */
#prescription .why-row__media--portrait { max-width: 480px; }

/* Links that leave the site for the measurement app. The arrow marks them
   as off-site; the scroll-spy ignores them because it only tracks hrefs
   beginning with "#". */
.nav__ext { display: inline-flex; align-items: center; gap: 4px; }
.nav__ext-mark { font-size: 0.78em; opacity: 0.75; }
.journey__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 14px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--pentax-blue);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
.journey__link + .journey__when { margin-left: 12px; }
.journey__link:hover { color: var(--ink); }

/* ---------------------------------------------------------------------- */
/* Magnification on a phone                                                */
/* One control, not three: the buttons are the only way to change the      */
/* magnification now, so they get the width and the height to be easy to   */
/* hit, and the gap above the readout comes down.                          */
/* ---------------------------------------------------------------------- */
@media (max-width: 720px) {
  #magnification .section-heading { margin-bottom: 20px; }
  .mag-layout .tour-selector__row { justify-content: center; gap: 6px; }
  .mag-layout .mag-btn { flex: 1 1 0; min-width: 0; padding: 12px 6px; font-size: 0.9rem; }
}

/* ---------------------------------------------------------------------- */
/* Configurator bottom edge                                                */
/* .cfg__steps already reserves the height of the floating summary bar, so */
/* the section's usual bottom padding stacked on top of it and left the    */
/* bar parked on the section's edge under 70-odd pixels of nothing. The    */
/* section keeps just enough to sit the bar in, evenly.                    */
/* ---------------------------------------------------------------------- */
#configure { padding-bottom: 32px; }