/* ==========================================================================
   SUNOLO
   --------------------------------------------------------------------------
   The design device that runs through the whole site is the seam: a single
   vertical line of light where the original language meets the translated
   one. It is the hero's draggable divider, the rule beside pull quotes, the
   marker on the active nav item and the left edge of the pipeline steps. One
   idea, reused, rather than decoration scattered around.

   Colour is deliberately narrow. One violet-to-azure gradient does all the
   accent work; everything else is navy and light. The handwritten notes are a
   nod to subtitles and to a director's margin notes, and they are the only
   place a third typeface appears.
   ========================================================================== */

:root {
  /* Base palette ---------------------------------------------------------- */
  --void:        #05060d;   /* page floor                                     */
  --panel:       #0c1120;   /* cards and raised surfaces                      */
  --panel-2:     #121a2e;   /* inputs, nested panels                          */
  --line:        rgb(148 170 220 / 14%);
  --line-strong: rgb(148 170 220 / 26%);

  /* Accent ---------------------------------------------------------------- */
  --violet: #8b5cf6;
  --azure:  #2f80ff;
  --seam:   #6e8bff;
  --accent-gradient: linear-gradient(112deg, var(--violet) 0%, var(--azure) 100%);

  /* Text ------------------------------------------------------------------ */
  --paper: #f2f5ff;
  --dim:   #8e9bbc;
  --faint: #64708d;

  /* Status ---------------------------------------------------------------- */
  --ok:    #34d399;
  --warn:  #fbbf24;
  --stop:  #f87171;

  /* Type ------------------------------------------------------------------ */
  --display: "Outfit", "Segoe UI", system-ui, sans-serif;
  --ui:      "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --hand:    "Caveat", "Bradley Hand", cursive;

  /* A modular scale at 1.25, per Elements of Typographic Style. Fluid
     between a 360px phone and a 1440px desktop so nothing needs a
     breakpoint just to change size. */
  --step--1: clamp(0.83rem, 0.80rem + 0.14vw, 0.90rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.18vw, 1.09rem);
  --step-1:  clamp(1.25rem, 1.17rem + 0.36vw, 1.45rem);
  --step-2:  clamp(1.56rem, 1.42rem + 0.64vw, 1.94rem);
  --step-3:  clamp(1.95rem, 1.70rem + 1.09vw, 2.58rem);
  --step-4:  clamp(2.44rem, 2.02rem + 1.79vw, 3.44rem);
  --step-5:  clamp(3.05rem, 2.38rem + 2.86vw, 4.58rem);

  /* Space ----------------------------------------------------------------- */
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --shell:  76rem;
  --radius:      14px;
  --radius-lg:   22px;
  --radius-pill: 999px;

  --shadow-lift: 0 24px 60px -28px rgb(0 0 0 / 85%);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------------
   Reset and base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--void);
  color: var(--paper);
  font-family: var(--ui);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.025em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); letter-spacing: -0.015em; }

p { margin: 0; text-wrap: pretty; }

/* Long-form prose stays under 72 characters. */
.prose p, .lede, .section__intro { max-width: 62ch; }

a { color: inherit; text-decoration-color: rgb(110 139 255 / 55%); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--seam); }

ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--seam);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  translate: -50% -150%;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: 0 0 var(--radius) var(--radius);
  text-decoration: none;
  transition: translate 0.2s var(--ease);
}
.skip-link:focus { translate: -50% 0; }

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

.shell {
  width: min(100% - var(--gutter) * 2, var(--shell));
  margin-inline: auto;
}

.section { padding-block: clamp(4rem, 9vw, 7.5rem); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }

.section__head { margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.section__head--center { text-align: center; }
.section__head--center .section__intro { margin-inline: auto; }

.section__intro {
  margin-top: 1rem;
  color: var(--dim);
  font-size: var(--step-1);
}

/* The seam: one hairline of light. Reused everywhere. */
.seam {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong) 18%, var(--seam) 50%, var(--line-strong) 82%, transparent);
  opacity: 0.55;
  margin: 0;
}

/* Handwritten margin notes. Set on a slight angle, as if written on the frame. */
.note {
  font-family: var(--hand);
  font-size: clamp(1.35rem, 2.4vw, 1.95rem);
  line-height: 1.15;
  color: rgb(242 245 255 / 88%);
  rotate: -4deg;
  text-wrap: balance;
}

.gradient-text {
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgb(5 6 13 / 72%);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.site-header[data-scrolled] {
  border-bottom-color: var(--line);
  background: rgb(5 6 13 / 92%);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  min-height: 4.5rem;
}

.wordmark { text-decoration: none; display: block; flex-shrink: 0; }

.wordmark__name {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.14em;
  line-height: 1;
}
.wordmark__name--sm { font-size: 1.25rem; }
/* The L is the highlighted letter in SUNOLO, as the U was in the old mark. */
.wordmark__l { color: var(--violet); }

.wordmark__tagline {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--faint);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  margin-left: auto;
}

.site-nav__list { display: flex; gap: clamp(0.75rem, 2vw, 1.75rem); }

.site-nav__list a {
  position: relative;
  display: block;
  padding: 0.4rem 0;
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--dim);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
.site-nav__list a:hover { color: var(--paper); }

/* Active state uses the seam rather than a colour change alone, so it does not
   depend on colour perception to be legible. */
.site-nav__list a[aria-current]::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -2px;
  height: 2px;
  background: var(--accent-gradient);
  border-radius: 2px;
}
.site-nav__list a[aria-current] { color: var(--paper); }

.site-nav__actions { display: flex; align-items: center; gap: 0.75rem; }
.inline-form { display: contents; }

.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.55rem;
  margin-left: auto;
  padding: 0.55rem 0.9rem;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: var(--step--1);
  cursor: pointer;
}
.nav-toggle__bars { display: grid; gap: 4px; width: 16px; }
.nav-toggle__bars span {
  display: block;
  height: 1.5px;
  background: var(--paper);
  transition: translate 0.25s var(--ease), rotate 0.25s var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:first-child { translate: 0 2.75px; rotate: 45deg; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:last-child  { translate: 0 -2.75px; rotate: -45deg; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.8rem 1.4rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--ui);
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: translate 0.2s var(--ease), background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.btn:hover { translate: 0 -1px; }
.btn:active { translate: 0 0; }

.btn--solid { background: var(--accent-gradient); color: #fff; box-shadow: 0 10px 30px -14px var(--violet); }
.btn--solid:hover { box-shadow: 0 16px 40px -16px var(--violet); }

.btn--ghost { background: rgb(18 26 46 / 70%); border-color: var(--line-strong); color: var(--paper); }
.btn--ghost:hover { border-color: var(--seam); }

.btn--quiet { background: none; border-color: transparent; color: var(--dim); padding-inline: 0.5rem; }
.btn--quiet:hover { color: var(--paper); }

.btn--lg { padding: 1.05rem 1.9rem; font-size: var(--step-0); }
.btn--block { width: 100%; }

/* Two-line CTA, as in the hero: the action on top, the promise underneath. */
.btn--stacked { flex-direction: column; gap: 0.15rem; align-items: flex-start; text-align: left; padding-block: 0.7rem; }
.btn--stacked small { font-size: 0.72rem; font-weight: 500; opacity: 0.78; }

.btn__play {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: rgb(255 255 255 / 16%);
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(3.5rem, 8vw, 6rem);
  overflow: hidden;
}

/* A single soft light source behind the seam, not a full-bleed gradient wash. */
.hero::before {
  content: "";
  position: absolute;
  top: -30%;
  left: 46%;
  width: 60rem;
  height: 60rem;
  background: radial-gradient(circle, rgb(110 139 255 / 16%) 0%, transparent 62%);
  translate: -50% 0;
  pointer-events: none;
}

.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.hero__title { font-size: var(--step-5); font-weight: 800; }
.hero__title span { display: block; }

.hero__lede {
  margin-top: 1.5rem;
  max-width: 34ch;
  color: var(--dim);
  font-size: var(--step-1);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2.25rem; }

.hero__assurances {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 2.25rem;
  font-size: var(--step--1);
  color: var(--dim);
}
.hero__assurances li { display: flex; align-items: center; gap: 0.55rem; }

.tick {
  display: grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgb(110 139 255 / 16%);
  color: var(--seam);
  font-size: 0.7rem;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   The Language Switch. The one bold thing on the page.
   -------------------------------------------------------------------------- */

.switch {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-lift);
  background: var(--panel);
}

.switch__stage {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  cursor: ew-resize;
  touch-action: pan-y;
}

.switch__side { position: absolute; inset: 0; }

/* Two halves of one frame. The right side is clipped by a CSS variable that
   the pointer drives, so the reveal is a compositor-only change: no layout,
   no repaint, smooth on a mid-range phone. */
.switch__side--after { clip-path: inset(0 0 0 var(--seam-pos, 50%)); }

.switch__art { width: 100%; height: 100%; object-fit: cover; display: block; }

.switch__seam {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--seam-pos, 50%);
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--seam) 12%, #fff 50%, var(--seam) 88%, transparent);
  box-shadow: 0 0 24px 2px rgb(110 139 255 / 55%);
  pointer-events: none;
}

.switch__handle {
  position: absolute;
  top: 50%;
  left: var(--seam-pos, 50%);
  translate: -50% -50%;
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgb(255 255 255 / 45%);
  background: rgb(5 6 13 / 70%);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 0.85rem;
  cursor: grab;
}
.switch__handle:active { cursor: grabbing; }

.switch__tag {
  position: absolute;
  top: 1.1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.95rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
  background: rgb(5 6 13 / 78%);
  backdrop-filter: blur(10px);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.switch__tag--before { left: 1.1rem; }
.switch__tag--after  { right: 1.1rem; }

.switch__bars { display: flex; align-items: center; gap: 2px; height: 0.85rem; }
.switch__bars i {
  display: block;
  width: 2px;
  height: 40%;
  border-radius: 1px;
  background: var(--seam);
  animation: pulse 1.1s var(--ease) infinite;
}
.switch__bars i:nth-child(2) { animation-delay: 0.12s; }
.switch__bars i:nth-child(3) { animation-delay: 0.24s; }
.switch__bars i:nth-child(4) { animation-delay: 0.36s; }

@keyframes pulse { 0%, 100% { height: 35%; } 50% { height: 100%; } }

/* Subtitle cards, one per language, positioned low in the frame. */
.switch__caption {
  position: absolute;
  bottom: 5.75rem;
  max-width: 15rem;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  background: rgb(5 6 13 / 86%);
  backdrop-filter: blur(10px);
  font-size: 0.86rem;
  line-height: 1.35;
}
.switch__caption--before { left: 1.1rem; }
.switch__caption--after  { right: 1.1rem; border-color: rgb(110 139 255 / 45%); }

.switch__note {
  position: absolute;
  right: 1.5rem;
  top: 4.5rem;
  max-width: 11rem;
  text-align: right;
  pointer-events: none;
}

/* Transport bar under the frame. */
.switch__transport {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border-top: 1px solid var(--line);
  background: rgb(8 11 22 / 92%);
}

.switch__play {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  flex-shrink: 0;
  border: 0;
  border-radius: 50%;
  background: var(--accent-gradient);
  color: #fff;
  cursor: pointer;
}

.switch__wave { display: flex; align-items: center; gap: 1.5px; flex: 1; height: 2.1rem; min-width: 0; }
.switch__wave i {
  flex: 1;
  min-width: 1px;
  border-radius: 1px;
  background: rgb(142 155 188 / 45%);
  height: var(--h, 30%);
  transition: height 0.18s var(--ease), background 0.18s var(--ease);
}
.switch__wave--after i { background: var(--seam); }
.switch__wave[data-playing] i { background: var(--azure); }

.switch__meta { display: flex; gap: 1.25rem; font-size: 0.72rem; color: var(--faint); }

/* Language pills */
.lang-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding: 0.85rem 1rem;
  border-top: 1px solid var(--line);
  background: rgb(8 11 22 / 92%);
}

.lang-pill {
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--dim);
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.lang-pill:hover { color: var(--paper); border-color: var(--line-strong); }
.lang-pill[aria-pressed="true"] {
  color: #fff;
  border-color: transparent;
  background: var(--accent-gradient);
}

/* --------------------------------------------------------------------------
   Product cards
   -------------------------------------------------------------------------- */

.products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: start;
}

.product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(1.5rem, 2.5vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(168deg, rgb(18 26 46 / 90%), rgb(10 14 27 / 92%));
  transition: border-color 0.3s var(--ease), translate 0.3s var(--ease);
}
.product-card:hover { border-color: var(--line-strong); translate: 0 -3px; }

.product-card__head { display: flex; align-items: flex-start; gap: 1rem; }
.product-card__icon { width: 2.75rem; height: 2.75rem; flex-shrink: 0; color: var(--seam); }
.product-card__name { font-family: var(--display); font-size: var(--step-1); font-weight: 700; letter-spacing: 0.01em; }
.product-card__tagline { margin-top: 0.35rem; color: var(--dim); font-size: var(--step--1); }

.product-card__features { display: grid; gap: 0.7rem; margin: 1.5rem 0; }
.product-card__features li { display: flex; gap: 0.65rem; font-size: var(--step--1); line-height: 1.45; }

.product-card__foot { margin-top: auto; padding-top: 1.25rem; }

.product-card__platforms {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.1rem;
  margin-top: 1.25rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  font-size: 0.72rem;
  color: var(--faint);
}

.badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-pill);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.badge--available    { background: rgb(52 211 153 / 15%); color: var(--ok); }
.badge--early_access { background: rgb(251 191 36 / 15%); color: var(--warn); }
.badge--pre_order    { background: rgb(110 139 255 / 18%); color: var(--seam); }
.badge--coming_soon  { background: rgb(142 155 188 / 15%); color: var(--dim); }

/* --------------------------------------------------------------------------
   Proof strip
   -------------------------------------------------------------------------- */

.proof {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: 1px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--line);
  overflow: hidden;
}

.proof__item { padding: 1.75rem 1.5rem; background: var(--panel); }
.proof__value { font-family: var(--display); font-size: var(--step-3); font-weight: 700; line-height: 1; }
.proof__label { margin-top: 0.6rem; font-size: var(--step--1); color: var(--dim); }

/* --------------------------------------------------------------------------
   Pipeline (How it works). Numbering earns its place: this is a sequence.
   -------------------------------------------------------------------------- */

.pipeline { display: grid; gap: 0; counter-reset: step; }

.pipeline__step {
  position: relative;
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: clamp(1.5rem, 3vw, 2.25rem) 0;
  border-top: 1px solid var(--line);
  counter-increment: step;
}
.pipeline__step:last-child { border-bottom: 1px solid var(--line); }

.pipeline__step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--display);
  font-size: var(--step-2);
  font-weight: 700;
  color: transparent;
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  line-height: 1;
}

.pipeline__name { font-family: var(--display); font-size: var(--step-2); font-weight: 700; }
.pipeline__copy { margin-top: 0.5rem; font-size: var(--step-1); color: var(--paper); }
.pipeline__detail { margin-top: 0.6rem; color: var(--dim); max-width: 58ch; }

/* --------------------------------------------------------------------------
   Panels, forms and fields
   -------------------------------------------------------------------------- */

.panel {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel);
}
.panel--flush { padding: 0; overflow: hidden; }

.form-grid { display: grid; gap: 1.25rem; }
.form-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

.field { display: grid; gap: 0.45rem; }

.field__label { font-size: var(--step--1); font-weight: 600; }
.field__label .optional { font-weight: 400; color: var(--faint); }

.field__input, .field__select, .field__textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--panel-2);
  color: var(--paper);
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.field__input:hover, .field__select:hover, .field__textarea:hover { border-color: rgb(148 170 220 / 40%); }
.field__input:focus, .field__select:focus, .field__textarea:focus {
  border-color: var(--seam);
  outline: none;
  box-shadow: 0 0 0 3px rgb(110 139 255 / 22%);
}
.field__textarea { min-height: 8rem; resize: vertical; }

.field__input::placeholder { color: var(--faint); }

.field__input--error { border-color: var(--stop); }
.field__error { font-size: var(--step--1); color: var(--stop); }
.field__help { font-size: var(--step--1); color: var(--faint); }

.field--check { display: flex; gap: 0.75rem; align-items: flex-start; }
.field--check input { margin-top: 0.3rem; width: 1.05rem; height: 1.05rem; accent-color: var(--violet); flex-shrink: 0; }
.field--check label { font-size: var(--step--1); color: var(--dim); line-height: 1.5; }
.field--check a { color: var(--paper); }

/* Honeypot. Off-screen rather than display:none, because some automation
   skips hidden inputs but still fills anything it can read in the DOM. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Verification block
   -------------------------------------------------------------------------- */

.verify {
  display: grid;
  gap: 1.1rem;
  padding: 1.25rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: rgb(8 11 22 / 70%);
}

.verify__challenge { display: grid; gap: 0.75rem; justify-items: start; }

.verify__image-wrap {
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  line-height: 0;
  background: var(--panel-2);
}
.verify__image { width: 260px; height: 90px; }

.verify__question {
  padding: 1rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-2);
  font-size: var(--step-1);
  font-family: var(--display);
}

.verify__controls { display: flex; flex-wrap: wrap; gap: 1rem; }

.verify__control {
  padding: 0;
  border: 0;
  background: none;
  color: var(--seam);
  font-size: var(--step--1);
  font-weight: 500;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.verify__control:hover { color: var(--paper); }

.verify__answer { display: grid; gap: 0.45rem; }
.verify__answer .field__input { max-width: 16rem; letter-spacing: 0.22em; font-family: var(--display); font-size: var(--step-1); }

.verify__pow {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--step--1);
  color: var(--faint);
}
.verify__pow[data-state="done"] { color: var(--ok); }
.verify__pow[data-state="failed"] { color: var(--warn); }

.verify__pow-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--warn);
  flex-shrink: 0;
  animation: blink 1.2s var(--ease) infinite;
}
.verify__pow[data-state="done"] .verify__pow-dot { background: var(--ok); animation: none; }

@keyframes blink { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }

/* --------------------------------------------------------------------------
   Flash messages
   -------------------------------------------------------------------------- */

.flash-stack { display: grid; gap: 0.6rem; margin-top: 1.5rem; }

.flash {
  padding: 0.9rem 1.2rem;
  border: 1px solid var(--line-strong);
  border-left-width: 3px;
  border-radius: var(--radius);
  background: var(--panel);
  font-size: var(--step--1);
}
.flash--success { border-left-color: var(--ok); }
.flash--error   { border-left-color: var(--stop); }
.flash--info    { border-left-color: var(--seam); }

/* --------------------------------------------------------------------------
   Auth pages
   -------------------------------------------------------------------------- */

.auth {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  padding-block: clamp(2.5rem, 6vw, 5rem);
}

.auth__aside { position: sticky; top: 7rem; }
.auth__points { display: grid; gap: 1.5rem; margin-top: 2.5rem; }
.auth__point { display: grid; gap: 0.35rem; padding-left: 1.25rem; border-left: 2px solid var(--line-strong); }
.auth__point h3 { font-size: var(--step-0); font-family: var(--ui); font-weight: 600; }
.auth__point p { font-size: var(--step--1); color: var(--dim); }

.auth__form { display: grid; gap: 1.5rem; }
.auth__foot { font-size: var(--step--1); color: var(--dim); text-align: center; }

/* --------------------------------------------------------------------------
   Compatibility
   -------------------------------------------------------------------------- */

.checker { display: grid; gap: 1.25rem; }
.checker__tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.checker__tab {
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--dim);
  font-size: var(--step--1);
  font-weight: 500;
  cursor: pointer;
}
.checker__tab[aria-selected="true"] { background: var(--accent-gradient); border-color: transparent; color: #fff; }

.result { display: grid; gap: 0.75rem; padding: 1.5rem; border-radius: var(--radius); border: 1px solid var(--line-strong); border-left-width: 3px; }
.result--supported   { border-left-color: var(--ok); }
.result--limited     { border-left-color: var(--warn); }
.result--unsupported { border-left-color: var(--stop); }
.result--contact     { border-left-color: var(--seam); }
.result__verdict { font-family: var(--display); font-size: var(--step-2); }

/* --------------------------------------------------------------------------
   Languages
   -------------------------------------------------------------------------- */

.lang-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
  gap: 0.75rem;
}

.lang-card {
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}
.lang-card__native { font-family: var(--display); font-size: var(--step-1); }
.lang-card__english { font-size: var(--step--1); color: var(--dim); margin-top: 0.15rem; }

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

.faq { display: grid; }
.faq__item { border-top: 1px solid var(--line); }
.faq__item:last-child { border-bottom: 1px solid var(--line); }

.faq__q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding: 1.35rem 0;
  font-family: var(--display);
  font-size: var(--step-1);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after { content: "+"; color: var(--seam); font-size: var(--step-2); line-height: 1; flex-shrink: 0; }
.faq__item[open] .faq__q::after { content: "−"; }

.faq__a { padding-bottom: 1.5rem; color: var(--dim); max-width: 64ch; }

/* --------------------------------------------------------------------------
   Pricing
   -------------------------------------------------------------------------- */

.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1rem; }

.plan { display: flex; flex-direction: column; padding: 1.75rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); }
.plan[data-featured] { border-color: var(--seam); box-shadow: 0 0 0 1px rgb(110 139 255 / 25%); }
.plan__price { font-family: var(--display); font-size: var(--step-3); font-weight: 700; margin: 1rem 0 0.25rem; }
.plan__period { font-size: var(--step--1); color: var(--faint); }
.plan__desc { margin: 1rem 0 1.75rem; color: var(--dim); font-size: var(--step--1); }
.plan__cta { margin-top: auto; }

/* --------------------------------------------------------------------------
   Closing band
   -------------------------------------------------------------------------- */

.closer {
  position: relative;
  padding-block: clamp(4rem, 9vw, 7rem);
  border-top: 1px solid var(--line);
  background:
    radial-gradient(ellipse at 30% 0%, rgb(139 92 246 / 18%), transparent 55%),
    radial-gradient(ellipse at 80% 100%, rgb(47 128 255 / 16%), transparent 55%);
}

.closer__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: end; }

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

.site-footer { border-top: 1px solid var(--line); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.site-footer__top { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 2fr); gap: clamp(2rem, 5vw, 4rem); }
.site-footer__line { margin-top: 1rem; color: var(--dim); font-size: var(--step--1); max-width: 22ch; }

.site-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: 2rem; }
.site-footer__heading { font-family: var(--ui); font-size: var(--step--1); font-weight: 600; margin-bottom: 0.9rem; }
.site-footer__col ul { display: grid; gap: 0.55rem; }
.site-footer__col a { font-size: var(--step--1); color: var(--dim); text-decoration: none; }
.site-footer__col a:hover { color: var(--paper); }

.site-footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
  font-size: 0.78rem;
  color: var(--faint);
}
.site-footer__note { max-width: 52ch; }

/* --------------------------------------------------------------------------
   Error pages
   -------------------------------------------------------------------------- */

.error-page { display: grid; place-items: center; min-height: 60vh; text-align: center; padding-block: 4rem; }
.error-page__code { font-family: var(--display); font-size: clamp(5rem, 18vw, 11rem); font-weight: 800; line-height: 0.85; }

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */

.stack     { display: grid; gap: 1rem; }
.stack--lg { gap: 2rem; }
.cluster   { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center; }
.muted     { color: var(--dim); }
.center    { text-align: center; }
[hidden]   { display: none !important; }

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

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 60rem) {
  .hero__grid,
  .auth,
  .closer__grid,
  .site-footer__top { grid-template-columns: minmax(0, 1fr); }

  .auth__aside { position: static; }
  .switch__note { display: none; }
  .switch__caption { max-width: 11rem; font-size: 0.78rem; bottom: 5rem; }
}

@media (max-width: 52rem) {
  .nav-toggle { display: inline-flex; }

  /* The menu becomes a sheet rather than a squeezed row: the Language Switch
     and the product selector have to stay first-class on a phone, which means
     navigation must get out of their way completely. */
  .site-nav {
    position: fixed;
    inset: 4.5rem 0 auto;
    display: grid;
    gap: 1.5rem;
    padding: 1.5rem var(--gutter) 2rem;
    background: rgb(5 6 13 / 98%);
    border-bottom: 1px solid var(--line);
    translate: 0 -120%;
    transition: translate 0.3s var(--ease);
    max-height: calc(100dvh - 4.5rem);
    overflow-y: auto;
  }
  .site-nav[data-open] { translate: 0 0; }

  .site-nav__list { flex-direction: column; gap: 0.25rem; }
  .site-nav__list a { padding: 0.75rem 0; font-size: var(--step-1); }
  .site-nav__list a[aria-current]::after { width: 1.75rem; inset-inline: 0 auto; bottom: 0.5rem; }

  .site-nav__actions { flex-direction: column; align-items: stretch; }
  .site-nav__actions .btn { width: 100%; }
  .inline-form { display: block; }

  .pipeline__step { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
  .switch__transport { flex-wrap: wrap; }
  .switch__meta { width: 100%; justify-content: space-between; }
}

@media (max-width: 30rem) {
  .switch__caption { max-width: 9.5rem; padding: 0.6rem 0.7rem; font-size: 0.72rem; bottom: 4.25rem; }
  .switch__tag { font-size: 0.68rem; padding: 0.35rem 0.7rem; }
  .hero__actions .btn { width: 100%; }
  .verify__image { width: 100%; height: auto; }
}

/* --------------------------------------------------------------------------
   Reduced motion. Section 13 of the spec requires a non-animated equivalent,
   not merely a shorter animation: everything below removes movement while
   leaving every state change visible.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .btn:hover, .product-card:hover { translate: none; }
  .switch__bars i { height: 70%; }
  .verify__pow-dot { opacity: 1; }
}

@media (prefers-contrast: more) {
  :root { --line: rgb(148 170 220 / 40%); --line-strong: rgb(148 170 220 / 62%); --dim: #b6c0d8; }
}

@media print {
  .site-header, .site-footer, .switch__transport, .lang-pills, .btn { display: none; }
  body { background: #fff; color: #000; }
}

/* --------------------------------------------------------------------------
   Long-form pages (legal, stories). Added late and deliberately small: these
   pages are read, not navigated, so they borrow the existing rhythm rather
   than introducing another set of components.
   -------------------------------------------------------------------------- */

.shell--text { max-width: 72ch; }

/* The global list reset strips markers, which is right for navigation and
   wrong for prose. Put them back only inside .prose. */
.prose ul, .prose ol { padding-left: 1.25rem; margin: 1rem 0; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-bottom: 0.4rem; color: var(--dim); }
.prose li::marker { color: var(--faint); }

.prose h2, .prose h3 { text-wrap: balance; }

.prose blockquote {
  margin: 2rem 0;
  padding-left: 1.35rem;
  border-left: 2px solid var(--violet);
  font-family: var(--display);
  font-size: var(--step-1);
  color: var(--paper);
}

/* Story list rows: a headline on a hairline. A grid of thumbnails would imply
   images we do not have and would make three posts look like a gallery. */
.article-row { transition: background 0.2s var(--ease); }
.article-row:hover { background: rgb(148 170 220 / 4%); }
.article-row h2 a:hover { color: var(--seam); }

@media (min-width: 50rem) {
  .article-row { grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); align-items: baseline; }
}

/* Tables appear on four pages and are the one place a horizontal scroll is
   acceptable; make the affordance obvious rather than silent. */
.panel--flush table caption { caption-side: bottom; }

/* --------------------------------------------------------------------------
   Homepage imagery and bands
   --------------------------------------------------------------------------
   Added when the homepage was brought in line with the approved mockup. The
   rule that governs all of it: pictures carry weight the copy does not have
   to, so wherever an image appears, the text beside it gets shorter.
   -------------------------------------------------------------------------- */

/* The device shot at the top of each product card. Bled to the card edges and
   masked out at the bottom so it reads as a photograph sitting behind the
   content rather than a thumbnail pasted on top of it. */
.product-card { position: relative; overflow: hidden; }

.product-card__shot {
  margin: calc(clamp(1.5rem, 2.5vw, 2rem) * -1) calc(clamp(1.5rem, 2.5vw, 2rem) * -1) 1.25rem;
  line-height: 0;
  background: linear-gradient(168deg, rgb(24 33 58 / 90%), rgb(12 17 32 / 95%));
}
.product-card__shot img {
  width: 100%;
  height: auto;
  aspect-ratio: 640 / 420;
  object-fit: cover;
  /* Fade the lower edge into the card so there is no hard seam under the art. */
  mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
}

/* Capability band: five plain statements on one hairline rule. Not cards —
   these are labels, and boxing each one would give them a weight they have
   not earned next to the product cards directly above. */
.capabilities {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: 1px;
  padding: 0;
  margin: 0;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--line);
  overflow: hidden;
}

.capability {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.35rem 1.25rem;
  background: var(--panel);
}

.capability__icon {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgb(110 139 255 / 14%);
  color: var(--seam);
}
.capability__icon svg { width: 1.3rem; height: 1.3rem; }

.capability__title { display: block; font-size: var(--step-0); font-weight: 600; }
.capability__note  { display: block; font-size: var(--step--1); color: var(--dim); margin-top: 0.1rem; }

/* Story band: image on the left, evidence on the right. The handwritten note
   sits over the picture, as if annotated on a contact sheet. */
.story-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}

.story-band__media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
}
.story-band__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 8 / 5; }

.story-band__note {
  position: absolute;
  left: 1.5rem;
  bottom: 1.5rem;
  max-width: 11rem;
  text-shadow: 0 2px 18px rgb(5 6 13 / 90%);
  pointer-events: none;
}

.story-band__copy .proof { margin-top: 1.75rem; }

/* Quotes. Rendered only when the testimonials flag is on AND real quotes
   exist — see the comment in views/pages/home.php. */
.quotes { display: grid; gap: 1rem; margin-top: 1.75rem; }
@media (min-width: 30rem) { .quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.quote {
  margin: 0;
  padding: 1.35rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}
.quote blockquote {
  margin: 0 0 1rem;
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--paper);
}
.quote blockquote::before { content: "\201C"; color: var(--seam); font-size: 1.6em; line-height: 0; vertical-align: -0.3em; margin-right: 0.1em; }
.quote figcaption b    { display: block; font-size: var(--step--1); }
.quote figcaption span { font-size: 0.78rem; color: var(--faint); }

@media (max-width: 60rem) {
  .story-band { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   Utilities, generated by tools/migrate_inline_styles.php
   --------------------------------------------------------------------------
   These exist because the Content-Security-Policy forbids inline style
   attributes: style-src carries a nonce, and a nonce does not authorise a
   style="" attribute. Every declaration that used to sit on an element now
   lives here. New markup should reach for an existing component class
   first and only fall back to these.
   -------------------------------------------------------------------------- */

.mt-3 { margin-top:.75rem; }
.fs-lg { font-size:var(--step-1); }
.mt-8 { margin-top:2rem; }
.fs-xl { font-size:var(--step-2); }
.mb-6 { margin-bottom:1.5rem; }
.mt-4 { margin-top:1rem; }
.u1 { font-size:var(--step-2); margin-top:2.5rem; }
.fs-base { font-size:var(--step-0); }
.mb-4 { margin-bottom:1rem; }
.mt-5 { margin-top:1.25rem; }
.mt-6 { margin-top:1.5rem; }
.fs-2xl { font-size:var(--step-3); }
.note--right { rotate:3deg; text-align:right; }
.measure-wide { max-width:72ch; }
.fs-sm { font-size:var(--step--1); }
.u2 { padding:1rem 1.25rem; border-bottom:1px solid var(--line); font-size:var(--step--1); vertical-align:top; }
.mx-auto { margin-inline:auto; }
.u3 { justify-content:center; margin-top:1.5rem; }
.m-0 { margin:0; }
.scroll-x { overflow-x:auto; }
.u4 { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr)); gap:1.5rem; }
.mb-5 { margin-bottom:1.25rem; }
.self-end { align-self:end; }
.u5 { text-align:left; padding:1rem 1.25rem; border-bottom:1px solid var(--line); color:var(--dim); font-weight:600; font-size:var(--step--1); }
.u6 { margin-top:clamp(2.5rem,5vw,4rem); }
.u7 { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr)); gap:1.5rem; }
.u8 { margin-top:1.25rem; font-size:var(--step--1); }
.u9 { padding:.9rem 1.25rem; border-bottom:1px solid var(--line); font-size:var(--step--1); }
.u10 { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr)); gap:1.5rem; }
.u11 { max-width:34rem; margin-inline:auto; text-align:center; }
.u12 { gap:.85rem; }
.u13 { display:grid; grid-template-columns:auto 1fr; gap:.75rem 2rem; margin-top:1.25rem; }
.u14 { gap:.6rem; }
.u15 { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr)); gap:2rem; padding-top:clamp(2rem,4vw,3.5rem); }
.u16 { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr)); gap:1rem; }
.u17 { margin-top:1.25rem; gap:.4rem; }
.u18 { cursor:default; }
.u19 { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr)); gap:2rem; }
.u20 { font-size:var(--step-2); margin-top:<?= $index === 0 ? '0' : '2.5rem' ?>; }
.u21 { margin:3rem 0; }
.u22 { width:100%; border-collapse:collapse; min-width:40rem; }
.u23 { font-size:var(--step-1); margin-top:1.75rem; }
.u24 { margin-top:.5rem; }
.pt-0 { padding-top:0; }
.u25 { margin-top:.4rem; }
.u26 { margin:0 0 2rem; }
.measure { max-width:68ch; }
.u27 { font-size:var(--step--1); margin-bottom:1rem; }
.u28 { font-size:var(--step-4); }
.u29 { margin-top:2.5rem; border-radius:var(--radius-lg); border:1px solid var(--line); width:100%; }
.u30 { margin-top:2.5rem; }
.u31 { margin-top:3rem; }
.u32 { width:100%; border-collapse:collapse; min-width:44rem; }
.u33 { text-align:left; padding:1.1rem 1.25rem; border-bottom:1px solid var(--line); font-weight:600; color:var(--dim); font-size:var(--step--1); }
.u34 { text-align:left; padding:1.1rem 1.25rem; border-bottom:1px solid var(--line); font-family:var(--display); font-size:var(--step-1); }
.u35 { text-align:left; padding:1rem 1.25rem; border-bottom:1px solid var(--line); color:var(--dim); font-weight:500; font-size:var(--step--1); vertical-align:top; }
.u36 { padding:1rem 1.25rem; border-bottom:1px solid var(--line); vertical-align:top; font-size:var(--step--1); }
.u37 { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr)); gap:clamp(2rem,5vw,4rem); align-items:start; }
.u38 { font-size:var(--step-1); margin-bottom:1.25rem; }
.u39 { font-weight:600; }
.u40 { margin-top:1.75rem; }
.u41 { margin-top:clamp(2rem,4vw,3.5rem); }
.u42 { margin-top:.75rem; max-width:56ch; }
.u43 { display:grid; gap:.35rem 2rem; padding:clamp(1.25rem,3vw,1.85rem) 0; border-top:1px solid var(--line); }
.no-underline { text-decoration:none; }
.u44 { margin-top:.5rem; max-width:62ch; }
.u45 { margin-top:0; }
.u46 { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr)); gap:1.5rem; align-items:start; }
.u47 { font-size:var(--step--1); margin-top:.5rem; }
.u48 { margin:1.25rem 0 0; }
.u49 { margin-top:1rem; max-width:62ch; }
.u50 { margin-bottom:clamp(2rem,4vw,3rem); }
.u51 { font-size:var(--step-1); margin-bottom:.75rem; }
.u52 { font-size:var(--step--1); margin-top:.35rem; }
.u53 { margin-top:1.5rem; font-size:var(--step--1); }
.u54 { margin-bottom:clamp(2.5rem,5vw,4rem); }
.u55 { margin-top:.75rem; font-size:var(--step--1); }
.u56 { width:100%; border-collapse:collapse; min-width:34rem; }
.u57 { padding:.9rem 1.25rem; border-bottom:1px solid var(--line); font-family:var(--display); font-size:var(--step-1); }
.u58 { grid-column:1/-1; }

.article-hero {
  margin-top: 2.5rem;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

/* --------------------------------------------------------------------------
   Structural hooks
   --------------------------------------------------------------------------
   Class names that were in the markup carrying no rules. Flagged by
   tests/csp_test.php, which checks that every class used has something behind
   it — a name with no rule is either a typo or a leftover, and both are worth
   knowing about.
   -------------------------------------------------------------------------- */

/* The hero glow is an absolutely positioned ::before on .hero; without a
   stacking context the copy sits underneath it and loses contrast. */
.hero__copy { position: relative; z-index: 1; }

/* The before half is the base layer: it fills the stage and the after half is
   clipped over the top of it. Stated explicitly so the pairing is legible. */
.switch__side--before { z-index: 0; }

.nav-toggle__label { font-size: var(--step--1); font-weight: 500; }

.site-footer__brand { display: grid; align-content: start; gap: 0.25rem; }

/* The device shot at the head of a product page. Larger than the card version
   and not masked, because here it is the subject rather than a garnish. */
.product-hero {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(168deg, rgb(24 33 58 / 90%), rgb(12 17 32 / 95%));
  overflow: hidden;
  line-height: 0;
}
.product-hero img { width: 100%; height: auto; aspect-ratio: 640 / 420; object-fit: cover; }

/* --------------------------------------------------------------------------
   Photography
   --------------------------------------------------------------------------
   Added when the rendered product and lifestyle shots replaced the placeholder
   artwork. The governing constraint: these photographs are bright, busy and
   warm, and the site's text is white on near-black. Every image therefore
   carries a wash sized to the text that sits on it — not for style, but
   because without one the copy fails contrast over the highlights.
   -------------------------------------------------------------------------- */

/* The product shot becomes the card itself rather than a picture pasted at the
   top of it. The card content floats above a full-bleed image and a gradient
   that is heaviest exactly where the feature list and button sit. */
.product-card__shot {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
  line-height: 0;
  background: none;
}
.product-card__shot img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center 32%;
  /* The top of these frames carries the product lock-up; bias toward it. */
  mask-image: none;
  -webkit-mask-image: none;
  transition: scale 0.6s var(--ease);
}
.product-card:hover .product-card__shot img { scale: 1.04; }

.product-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    177deg,
    rgb(5 6 13 / 28%) 0%,
    rgb(5 6 13 / 62%) 34%,
    rgb(5 6 13 / 90%) 62%,
    rgb(5 6 13 / 97%) 100%
  );
}

/* Everything except the shot sits above the wash. */
.product-card > *:not(.product-card__shot) { position: relative; z-index: 2; }

/* The image supplies the scene; a line-art icon on top of it is noise. */
.product-card .product-card__icon { display: none; }

.product-card {
  background: rgb(8 11 21);
  min-height: 30rem;
  justify-content: flex-end;
}
.product-card__head { margin-top: auto; }

/* Product detail pages: same photograph, more room, no crop to a card. */
.product-hero img { object-position: center 34%; }

/* Story band. The testimonial photograph is warm and busy on the right, so the
   handwritten note moves to the lower left where the frame is darkest. */
.story-band__media img { aspect-ratio: 16 / 9; object-position: center 40%; }

/* --------------------------------------------------------------------------
   Closing band photograph
   --------------------------------------------------------------------------
   The world-map frame belongs to this section, not behind the footer: its
   subject is literally the closing call to action — four people watching a
   sunrise under a map of greetings — and the copy beside it says the same
   thing. Behind four columns of small footer links it was decoration fighting
   legibility; here it is the illustration for the words next to it.

   The source carries its own baked-in headline and Get Started button on the
   left, which would have duplicated this band's live text, so the asset is
   cropped to its right 62% before it ever reaches the page.

   Two formats ship for this frame, under one name:

     footer-world.svg   vector, traced from the photograph by
                        tools/build_footer_world_svg.php. Resolution
                        independent, posterised into seven tonal bands, 265KB.
     footer-world.webp  the photograph itself. 80KB, full detail.

   The SVG is wired up below. If you would rather have the photograph, change
   the one url() to .webp — it is a third of the weight and keeps the fine
   detail in the map and the city lights, at the cost of scalability that a
   background behind a heavy wash does not really need. Both are in the
   package; nothing else has to change either way.
   -------------------------------------------------------------------------- */

.closer--imaged {
  position: relative;
  background-color: rgb(4 5 12);
  background-image:
    linear-gradient(
      95deg,
      rgb(4 5 12 / 94%) 0%,
      rgb(4 5 12 / 82%) 34%,
      rgb(4 5 12 / 42%) 64%,
      rgb(4 5 12 / 30%) 100%
    ),
    url("/assets/img/footer-world.svg");
  background-size: cover;
  background-position: center 38%;
  background-repeat: no-repeat;
  border-top: 1px solid var(--line);
}

/* The wash is heaviest on the left because that is where the headline and
   button sit; the map stays visible on the right where nothing overlaps it. */
.closer--imaged .closer__grid { align-items: center; min-height: 26rem; }
.closer--imaged .note { text-shadow: 0 2px 20px rgb(4 5 12 / 92%); }

@media (max-width: 50rem) {
  /* Stacked, the text sits over the middle of the frame rather than beside it,
     so the wash has to come from the top instead of the side. */
  .closer--imaged {
    background-image:
      linear-gradient(180deg, rgb(4 5 12 / 92%) 0%, rgb(4 5 12 / 72%) 55%, rgb(4 5 12 / 55%) 100%),
      url("/assets/img/footer-world.svg");
    background-position: center 45%;
  }
  .closer--imaged .closer__grid { min-height: 0; }
  .product-card { min-height: 26rem; }
}

/* --------------------------------------------------------------------------
   Story band, restacked
   --------------------------------------------------------------------------
   Was a two-column grid: photograph left, copy right. That worked with the
   old 8:5 placeholder, but the real photograph is 16:9 and full of detail —
   squeezed into half a column it cropped to a letterbox, and the four proof
   figures beside it collapsed into a ragged left-aligned stack. Hence the
   "text is left aligned and not coming properly".
   The photograph now runs full width and the copy sits underneath it, centred.
   -------------------------------------------------------------------------- */

.story-band {
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3rem);
}

.story-band__copy {
  text-align: center;
  max-width: 62rem;
  margin-inline: auto;
}
.story-band__copy .section__intro { margin-inline: auto; }

/* With the full width back, the proof figures sit on one row again. */
.story-band__copy .proof { margin-top: 2rem; }
.story-band__copy .proof__item { text-align: center; }
.story-band__copy .proof__label { margin-inline: auto; }

.story-band__copy .quotes { text-align: left; }

/* The process diagram on How it works. Sits above the numbered stages and
   scrolls horizontally on narrow screens rather than shrinking the labels
   below legibility. */
.process-figure {
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  padding: clamp(1rem, 2.5vw, 1.75rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel);
  overflow-x: auto;
}
.process-figure img { width: 100%; min-width: 40rem; height: auto; display: block; }
.process-figure figcaption {
  margin-top: 1rem;
  font-size: var(--step--1);
  color: var(--dim);
  text-align: center;
}