/* Agentic Applications front page. Dark and gold, system fonts only, no external requests. */

:root {
  --black: #000;
  --gold-hi: #f6dc8a;
  --gold: #c9922e;
  --gold-lo: #9a6614;
  --silver: #f1f2f4;
  --silver-dim: #b9bdc5;     /* 11:1 on black */
  --muted: #8e939c;          /* 6.6:1 on black */
  --surface: #0a0a0b;
  --surface-2: #101012;
  --line: rgba(241, 242, 244, 0.09);
  --line-strong: rgba(241, 242, 244, 0.16);

  --font-sans: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "Cascadia Mono", Consolas, "SFMono-Regular", Menlo, "Liberation Mono", monospace;

  --gutter: clamp(16px, 4vw, 40px);
  --maxw: 1200px;
  --rb-h: 0px;                /* review banner height, set while review marks are on */
  --nav-h: 72px;
  /* First screen: the lattice's box. Capped so a very tall window never stretches it. */
  --hero-h: clamp(640px, 100vh, 1000px);

  --gold-text: linear-gradient(180deg, #fff4cf 0%, #f6dc8a 26%, #deb052 46%, #c9922e 60%, #9a6614 76%, #c9922e 90%, #efcd74 100%);
  --gold-fill: linear-gradient(180deg, #fbe8a6 0%, #f6dc8a 18%, #dcaa46 55%, #c9922e 74%, #ad7b20 100%);

  color-scheme: dark;
}
@supports (height: 100svh) {
  :root { --hero-h: clamp(640px, 100svh, 1000px); }
}

body[data-review="on"] { --rb-h: 34px; }

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

html {
  background: var(--black);
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 24px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html:has(body[data-review="on"]) { scroll-padding-top: calc(var(--nav-h) + 58px); }

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

body {
  margin: 0;
  background: var(--black);
  color: var(--silver-dim);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img { display: block; max-width: 100%; height: auto; }
p, h1, h2, h3, h4, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }

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

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

.skip {
  position: fixed;
  left: 12px;
  top: calc(var(--rb-h) + 12px);
  z-index: 100;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--silver);
  color: #000;
  font-weight: 600;
  text-decoration: none;
  transform: translateY(calc(-100% - var(--rb-h) - 16px));   /* fully off-screen whatever the banner height */
}
.skip:focus-visible { transform: none; }

.container {
  width: 100%;
  max-width: calc(var(--maxw) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---- Gold text --------------------------------------------------------- */
.gold { color: var(--gold-hi); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .gold {
    background: var(--gold-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

/* ---- Buttons ----------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 48px;
  padding: 0.8rem 1.6rem;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: 0.005em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.btn:focus-visible { outline-offset: 4px; border-radius: 999px; }

.btn--gold {
  color: #1b1304;
  background: var(--gold-fill);
  box-shadow:
    inset 0 1px 0 rgba(255, 250, 232, 0.75),
    inset 0 -2px 6px rgba(120, 76, 10, 0.35),
    0 0 0 1px rgba(154, 102, 20, 0.65),
    0 12px 32px -12px rgba(201, 146, 46, 0.55);
}
.btn--gold:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 250, 232, 0.8),
    inset 0 -2px 6px rgba(120, 76, 10, 0.35),
    0 0 0 1px rgba(154, 102, 20, 0.7),
    0 16px 40px -12px rgba(221, 170, 70, 0.7);
}
.btn--gold:active { transform: translateY(0); }

.btn--ghost {
  color: var(--silver);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(241, 242, 244, 0.26);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.btn--ghost:hover {
  border-color: rgba(246, 220, 138, 0.6);
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
}

.btn--pill {
  position: relative;
  min-height: 38px;
  padding: 0.5rem 1.1rem;
  font-size: 0.9rem;
}
/* Invisible hit area: the pill looks 38px tall but takes taps across at least 44px. */
.btn--pill::after {
  content: "";
  position: absolute;
  inset: min(0px, (100% - 44px) / 2) 0;
}

.btn__arrow { font-size: 0.95em; line-height: 1; }

/* ---- Review marks ------------------------------------------------------ */
/* body[data-review="on"]: fixed banner + dotted underlines on .draft + boxed .slot.
   Any other value (or no attribute): a clean page; slots stay as plain text. */
.review-banner { display: none; }

body[data-review="on"] .review-banner {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  height: var(--rb-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 var(--gutter);
  background: #17120a;
  border-bottom: 1px solid rgba(201, 146, 46, 0.45);
  color: #e9dcc0;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.2;
}
.review-banner__text {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.review-banner__tag {
  flex: none;
  padding: 3px 7px;
  border-radius: 4px;
  background: var(--gold);
  color: #1b1304;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 10.5px;
}
.review-banner__key { overflow: hidden; text-overflow: ellipsis; }
.review-banner__sample {
  text-decoration: underline dotted var(--gold-hi);
  text-underline-offset: 3px;
}
.review-banner__btn {
  flex: none;
  min-height: 24px;
  padding: 3px 10px;
  border: 1px solid rgba(246, 220, 138, 0.45);
  border-radius: 999px;
  background: transparent;
  color: var(--gold-hi);
  font: inherit;
  font-size: 11.5px;
  cursor: pointer;
}
.review-banner__btn:hover { background: rgba(246, 220, 138, 0.1); }
html:not(.js) .review-banner__btn { display: none; }   /* it needs site.js */
.review-banner__btn:focus-visible { border-radius: 999px; outline-offset: 2px; }

body[data-review="on"] .draft {
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: rgba(246, 220, 138, 0.8);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.24em;
  text-decoration-skip-ink: none;
}
body[data-review="on"] .btn--gold .draft { text-decoration-color: rgba(27, 19, 4, 0.7); }

/* ---- Nav --------------------------------------------------------------- */
.nav {
  position: fixed;
  top: var(--rb-h);
  left: 0;
  right: 0;
  z-index: 50;
  height: var(--nav-h);
  border-bottom: 1px solid rgba(241, 242, 244, 0.06);
  transition: border-color 0.3s ease;
}
/* The frosted glass is painted by a pseudo-element inside the nav, so the logo's screen blend
   has the blurred page behind it to blend with (the nav is its own isolated stacking context). */
.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(0, 0, 0, 0.36);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  transition: background-color 0.3s ease;
}
.nav.is-scrolled { border-bottom-color: var(--line); }
.nav.is-scrolled::before { background: rgba(0, 0, 0, 0.72); }

.nav__inner {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 100%;
  max-width: calc(var(--maxw) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Logo: a fixed layer of its own in the root stacking context, so mix-blend-mode: screen drops the
   PNG's black against whatever is behind it (the nav is a separate isolated group). --logo-h sets
   its size; .nav__brand-space reserves the same box inside the nav's flex row.
   The logo is --logo-max tall wherever the bar has room, and otherwise as tall as the room left by
   --nav-fixed allows: the measured width of everything else in the bar (links, CTA, toggle, gaps)
   plus ~20px for a scrollbar. Re-measure --nav-fixed if the bar's contents change. */
:root {
  --logo-max: 51px;
  --nav-fixed: 548px;
  /* --logo-min is a safety floor, not a design size: without it the formula keeps shrinking with the
     viewport and goes negative below ~203px. 20px is the largest floor that still does not overflow
     the bar at 320px, the narrowest width WCAG 1.4.10 asks about. */
  --logo-min: 20px;
  --logo-h: max(var(--logo-min), min(var(--logo-max), calc((100vw - 2 * var(--gutter) - var(--nav-fixed)) * 258 / 1533)));
  --logo-w: calc(var(--logo-h) * 1533 / 258);
}
.brand {
  position: fixed;
  z-index: 51;
  top: calc(var(--rb-h) + (var(--nav-h) - var(--logo-h)) / 2);
  left: calc(max(0px, (100% - var(--maxw) - 2 * var(--gutter)) / 2) + var(--gutter));
  display: block;
  /* Invisible padding lifts the hit area to 44px tall; the equal negative margin keeps the logo put. */
  --brand-pad: max(0px, (44px - var(--logo-h)) / 2);
  padding-block: var(--brand-pad);
  margin-block: calc(-1 * var(--brand-pad));
  border-radius: 6px;
  mix-blend-mode: screen;
}
.brand__logo {
  display: block;
  width: var(--logo-w);
  height: var(--logo-h);
  border-radius: 6px;
}
/* The focus ring hugs the logo itself, not the padded hit area. */
.brand:focus-visible { outline: none; }
.brand:focus-visible .brand__logo { outline: 2px solid var(--gold-hi); outline-offset: 4px; }
.nav__brand-space {
  flex: none;
  width: var(--logo-w);
  height: var(--logo-h);
  margin-right: auto;
}

/* The CTA lives inside .nav__menu (so the collapsed phone menu carries it). Above 760px the menu
   is not a panel, just a row, and this gap stands in for the .nav__inner gap that used to separate
   the links from the CTA. */
.nav__menu {
  display: flex;
  align-items: center;
  gap: 28px;
}
.nav__links {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav__link {
  position: relative;
  display: inline-block;
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--silver-dim);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease;
}
/* Invisible hit area: the link looks ~40px tall but takes taps across at least 44px, the same trick
   .btn--pill::after and .nav__toggle::before already use. No visible change. */
.nav__link::after {
  content: "";
  position: absolute;
  inset: min(0px, (100% - 44px) / 2) 0;
}
.nav__link:hover { color: var(--silver); background: rgba(241, 242, 244, 0.06); }
.nav__link:focus-visible { border-radius: 999px; }

.nav__cta { flex: none; }

.nav__toggle { display: none; }

/* Between the mobile bar and 940px the links tighten so the logo keeps its size (at 941px the
   untightened bar already has room for the full --logo-max, so the size never steps). */
@media (max-width: 940px) {
  :root { --nav-fixed: 492px; }
  .nav__inner { gap: 16px; }
  .nav__menu { gap: 16px; }
  .nav__link { padding-inline: 10px; }
}

@media (max-width: 760px) {
  :root { --nav-h: 64px; }
  /* --nav-fixed is "how much of the bar's first row is NOT the logo". At this width the CTA is in
     neither case part of that row any more -- with JS it is inside the collapsed menu, without JS
     it wraps onto the menu's own full-width row below -- so the 176px measured when the CTA sat in
     the bar no longer applies to either branch. What is left beside the logo is the 42px toggle
     (JS) or nothing at all (no JS); 70px covers both. */
  :root { --logo-max: 39px; --nav-fixed: 70px; }
  .nav__inner { gap: 10px; }
  .nav__cta { min-height: 38px; padding: 0.45rem 0.95rem; font-size: 0.86rem; }

  /* Without JS there is no toggle, so the links and the CTA wrap under the bar and the bar grows
     past --nav-h -- which is what the hero reserves -- and covers the hero's first line. The
     reservation below must therefore be >= the bar's real height at EVERY width. It was not:
     at 320px the bar measured 158px against a 132px reservation even before the CTA moved into
     the menu. Giving the links their own full-width row and the CTA the row below keeps the
     height flat across widths instead of stepping with every link wrap. */
  html:not(.js) { --nav-h: 164px; }
  html:not(.js) .nav { height: auto; min-height: var(--nav-h); }
  html:not(.js) .nav__inner { flex-wrap: wrap; padding-block: 12px; }
  html:not(.js) .nav__menu { order: 3; width: 100%; flex-wrap: wrap; row-gap: 10px; }
  html:not(.js) .nav__links { flex: 1 1 100%; flex-wrap: wrap; }
  html:not(.js) .nav__cta { flex: 1 1 100%; justify-content: center; }

  .js .nav__toggle {
    position: relative;
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid rgba(241, 242, 244, 0.18);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.35);
    color: var(--silver);
    cursor: pointer;
  }
  .js .nav__toggle:focus-visible { border-radius: 999px; }
  .js .nav__toggle::before {         /* invisible 44px hit area around the 42px button */
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 999px;
  }
  .nav__toggle-bars { display: grid; gap: 5px; width: 16px; }
  .nav__toggle-bars span {
    display: block;
    height: 1.5px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 0.25s ease;
  }
  .nav.is-open .nav__toggle-bars span:first-child { transform: translateY(3.25px) rotate(45deg); }
  .nav.is-open .nav__toggle-bars span:last-child { transform: translateY(-3.25px) rotate(-45deg); }

  .js .nav__menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 8px var(--gutter) 20px;
    background: rgba(0, 0, 0, 0.94);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
  }
  .js .nav.is-open .nav__menu {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;
  }
  .js .nav__menu { display: block; }
  .js .nav__menu .nav__cta { display: flex; justify-content: center; width: 100%; margin-top: 16px; }
  .js .nav__links { display: grid; gap: 0; }
  .js .nav__links li + li { border-top: 1px solid var(--line); }
  .js .nav__link {
    display: block;
    padding: 14px 4px;
    border-radius: 6px;
    font-size: 1.05rem;
    color: var(--silver);
  }
  .js .nav.is-open::before { background: rgba(0, 0, 0, 0.94); }
}

/* Below ~360px the no-JS link row takes one more line and the logo is at its largest relative to
   the bar, so the bar steps up. Measured 204px at 320 and 206px at 340; 208px covers both. Only
   the no-JS fallback is affected -- with JS the bar is a flat --nav-h at every width. */
@media (max-width: 359px) {
  html:not(.js) { --nav-h: 208px; }
}

@media (max-width: 370px) {
  /* --nav-fixed was 171px here, measured when the CTA shared the bar with the logo. It does not any
     more (see the <=760px block), so the 70px set there stands and the logo keeps its room. */
  .nav__cta { padding-inline: 0.8rem; }
}

/* ---- Hero -------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  min-height: var(--hero-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding:
    calc(var(--rb-h) + var(--nav-h) + clamp(40px, 8.5vh, 104px))
    var(--gutter)
    clamp(56px, 6vw, 88px);
}

/* The lattice box is exactly one (capped) screen tall, the framing Jacob approved; the rest of the
   hero (the terminal card's lower part) sits on plain black. */
.hero__bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--hero-h);
  z-index: -1;
  overflow: hidden;
  background: #050505;        /* the lattice's own ground: the fallback without JS or a 2D canvas */
  pointer-events: none;
}
.hero__bg::after {            /* hand-off from the lattice into the black page */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(80px, 14%, 150px);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000);
}

/* WCAG 2.2.2 control for the lattice. Deliberately quiet: it sits in the hero's bottom-left corner,
   below the copy and clear of the terminal card, and only reaches full opacity on hover or focus. */
.lattice-toggle {
  position: absolute;
  /* Top-right of the hero, just under the fixed nav: the one part of the lattice that is always
     empty. The hero's bottom holds the terminal card, and its centre holds the approved copy, so
     anchoring there would put this on top of one or the other at some viewport width. */
  top: calc(var(--rb-h) + var(--nav-h) + 12px);
  right: var(--gutter);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 6px 12px 6px 10px;
  border: 1px solid rgba(241, 242, 244, 0.16);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--muted);
  font: inherit;
  font-size: 11.5px;
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.lattice-toggle:hover,
.lattice-toggle:focus-visible { opacity: 1; color: var(--gold-hi); border-color: rgba(246, 220, 138, 0.5); }
.lattice-toggle:focus-visible { border-radius: 999px; }
/* Invisible 44px hit area, the same trick .btn--pill uses. Both axes: at <=760px the label is
   hidden and the button collapses to 26px wide, so a vertical-only expansion left it under the
   44px target this stylesheet holds its other controls to. */
.lattice-toggle::after { content: ""; position: absolute; inset: min(0px, (100% - 44px) / 2); }
/* Two bars while playing (press to pause), one triangle while paused (press to play). The bars are
   two gradient slabs rather than one clip-path: a single polygon cannot enclose two separate shapes
   without a bridge between them, which renders as a blob at this size. */
.lattice-toggle__icon {
  flex: none;
  width: 9px;
  height: 10px;
  background:
    linear-gradient(currentColor 0 0) 0 0 / 3px 100% no-repeat,
    linear-gradient(currentColor 0 0) 100% 0 / 3px 100% no-repeat;
}
.lattice-toggle[aria-pressed="true"] .lattice-toggle__icon {
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
@media (max-width: 760px) {
  /* The terminal card comes up to meet the hero's floor on narrow screens; keep the control clear of it. */
  .lattice-toggle { font-size: 0; gap: 0; padding: 8px; min-height: 34px; }
  .lattice-toggle__label {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
}

/* Signal lattice canvas (from backgrounds/bg-signal-grid.html; there it was fixed to the viewport). */
#lattice {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 1.4s ease;
}
#lattice.on { opacity: 1; }

#perf {                       /* #perf in the URL: JS ms/frame readout */
  position: fixed;
  left: 12px;
  bottom: 10px;
  z-index: 70;
  font: 12px/1.3 ui-monospace, Consolas, monospace;
  color: #8d8f94;
  pointer-events: none;
}

.hero__copy {
  width: 100%;
  max-width: 56rem;
  text-align: center;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 1.75rem;
  padding: 7px 14px 7px 12px;
  border: 1px solid rgba(201, 146, 46, 0.42);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: var(--gold-hi);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.pill__dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold-hi);
  box-shadow: 0 0 10px 1px rgba(246, 220, 138, 0.7);
}

.hero__title {
  margin: 0 0 1.4rem;
  color: var(--silver);
  font-size: clamp(2.5rem, 0.9rem + 5.4vw, 4.75rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.035em;
  text-wrap: balance;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.6);
}
.hero__line { display: block; }
.ap { margin-left: 0.025em; letter-spacing: -0.1em; }   /* the bold ’ sits tight to the letter before it and far from the next: re-centre it (letter-spacing keeps review underlines continuous) */
.hero__title .gold { text-shadow: none; padding-bottom: 0.08em; }

.hero__sub {
  max-width: 40rem;
  margin: 0 auto 2.25rem;
  color: var(--silver-dim);
  font-size: clamp(1.02rem, 0.92rem + 0.45vw, 1.2rem);
  line-height: 1.6;
  text-wrap: pretty;
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.7);
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

/* ---- Terminal card ----------------------------------------------------- */
/* Static product facts that type in once; not a live feed. */
.term {
  width: 100%;
  max-width: 52rem;
  margin-top: clamp(52px, 7.5vh, 80px);
  border: 1px solid rgba(241, 242, 244, 0.12);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(18, 18, 20, 0.86), rgba(6, 6, 7, 0.94));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow:
    inset 0 1px 0 rgba(246, 220, 138, 0.08),
    0 30px 80px -30px rgba(0, 0, 0, 0.95);
  text-align: left;
  font-family: var(--font-mono);
  overflow: hidden;
}
.term__bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(241, 242, 244, 0.025);
}
.term__dots { display: inline-flex; gap: 7px; flex: none; }
.term__dots i {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #d0625a;
  opacity: 0.85;
}
.term__dots i:nth-child(2) { background: #d6a73c; }
.term__dots i:nth-child(3) { background: #5aa564; }
.term__title {
  flex: 1;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-align: center;
  padding-right: 44px;   /* balance the dots so the title reads centred */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.term__body {
  padding: 18px 22px 20px;
  font-size: 13.5px;
  line-height: 1.75;
}
.term__line {
  display: grid;
  grid-template-columns: 2.2em 5.6em minmax(0, 1fr);
  column-gap: 0.9em;
}
.term__n { color: #7b8089; user-select: none; }
.term__k { color: var(--gold); }
.term__v { position: relative; color: var(--silver-dim); }
.term__line--note .term__v { color: var(--silver); }

.term__caret {
  display: inline-block;
  width: 0.6em;
  height: 1.15em;
  vertical-align: -0.2em;
  background: var(--gold-hi);
  animation: caret 1.1s steps(1, end) infinite;
}
@keyframes caret { 50% { opacity: 0; } }

/* Typing: JS adds .is-typing. Without JS or under reduced motion every line shows at once.
   Hidden lines use opacity (not visibility) so screen readers still get every line immediately. */
.term.is-typing .term__line { opacity: 0; }
.term.is-typing .term__line.is-shown { opacity: 1; }
.term.is-typing .term__line.is-current .term__v { color: transparent; }
body[data-review="on"] .term.is-typing .term__line.is-current .term__v { text-decoration-color: transparent; }
.term.is-typing .term__line--caret { opacity: 0; }
.term__typed {
  position: absolute;
  inset: 0;
  color: var(--silver-dim);
  pointer-events: none;
}
.term__line--note .term__typed { color: var(--silver); }
.term__typed::after {
  content: "";
  display: inline-block;
  width: 0.6em;
  height: 1.15em;
  margin-left: 1px;
  vertical-align: -0.2em;
  background: var(--gold-hi);
}

/* ---- Sections ---------------------------------------------------------- */
.section {
  position: relative;
  padding-block: clamp(80px, 9vw, 128px);
  border-top: 1px solid var(--line);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 1.25rem;
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.eyebrow__num {
  color: var(--gold-hi);
  padding-right: 12px;
  border-right: 1px solid rgba(201, 146, 46, 0.45);
}

.section__title {
  max-width: 22ch;
  color: var(--silver);
  font-size: clamp(2.1rem, 1.2rem + 3vw, 3.5rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.label {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.lead {
  max-width: 36rem;
  color: var(--silver-dim);
  font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.2rem);
  line-height: 1.65;
  text-wrap: pretty;
}

/* ---- Products ---------------------------------------------------------- */
.lead--intro {
  max-width: 50rem;
  margin-top: 1.75rem;
  color: var(--silver);
  font-size: clamp(1.12rem, 1rem + 0.5vw, 1.38rem);
  line-height: 1.6;
}

.product {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 88px);
  margin-top: clamp(48px, 6vw, 80px);
  align-items: start;
}

.product__card {
  position: relative;
  padding: clamp(26px, 3.2vw, 44px);
  border: 1px solid rgba(201, 146, 46, 0.34);
  border-radius: 20px;
  background:
    radial-gradient(ellipse 90% 60% at 0% 0%, rgba(201, 146, 46, 0.12), rgba(201, 146, 46, 0) 70%),
    linear-gradient(180deg, rgba(241, 242, 244, 0.035), rgba(241, 242, 244, 0.008));
  box-shadow: inset 0 1px 0 rgba(246, 220, 138, 0.12), 0 40px 90px -50px rgba(201, 146, 46, 0.35);
}

.product__badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--gold-hi);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.product__badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold-hi);
  box-shadow: 0 0 10px 1px rgba(246, 220, 138, 0.7);
}

.product__name {
  margin-top: 1rem;
  color: var(--silver);
  font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
}
/* The app's own wordmark is the visible product name (its alt is the heading's name). At most
   240px wide, so the 485px art stays crisp at 2x. The art keeps 27/485 of its width as glow room
   left of the N; the negative margin puts the N's stem on the card's text edge. */
.product__name:has(.product__wordmark) { margin-top: 0.75rem; line-height: 0; }
.product__name picture { display: block; }
.product__wordmark {
  --wm-w: min(240px, 100%);
  width: var(--wm-w);
  height: auto;
  margin-left: calc(var(--wm-w) * -27 / 485);
}
.product__name:has(.product__wordmark) + .product__tagline { margin-top: 0.8rem; }

.product__tagline {
  margin-top: 0.6rem;
  color: var(--gold-hi);
  font-size: clamp(1.15rem, 1.02rem + 0.5vw, 1.4rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.product__desc {
  margin-top: 1.1rem;
  font-size: 1.0625rem;
  line-height: 1.7;
  text-wrap: pretty;
}

.notice {
  display: flex;
  gap: 14px;
  margin-top: 1.6rem;
  padding: 16px 18px;
  border: 1px solid rgba(201, 146, 46, 0.3);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(201, 146, 46, 0.08), rgba(201, 146, 46, 0.025));
}
.notice__icon { flex: none; margin-top: 3px; color: var(--gold-hi); }
.notice__text { font-size: 0.97rem; line-height: 1.6; color: var(--silver-dim); }
.notice__text strong { color: var(--silver); font-weight: 600; }

.product__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  margin-top: 1.9rem;
}
.platform {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--silver);
  font-size: 0.95rem;
}
/* LAUNCH-GATE: the pre-launch stand-in for the "View on Google Play" link. Delete this rule with
   the .product__status line in index.html once the listing is live. */
.product__status {
  display: inline-flex;
  align-items: center;
  color: var(--gold-hi);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.platform__label {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.product__features { padding-top: 0.4rem; }
.product__features .label { margin-bottom: 0.6rem; }
.feature {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  gap: 0 0.75rem;
  padding: 1.15rem 0;
  border-top: 1px solid var(--line);
}
.feature:last-child { border-bottom: 1px solid var(--line); }
.feature__n {
  padding-top: 0.2rem;
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
}
.feature__text { display: grid; gap: 0.2rem; }
.feature__title { color: var(--silver); font-size: 1.08rem; font-weight: 600; line-height: 1.35; }
.feature__detail { color: var(--silver-dim); font-size: 0.98rem; line-height: 1.55; }

.also {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  gap: 0.35rem 0.75rem;
  margin-top: 1.4rem;
  font-size: 0.95rem;
  line-height: 1.55;
}
.also__label {
  grid-column: 2;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.also__text { grid-column: 2; color: var(--silver-dim); }

/* Gallery: each row is a justified strip; flex-grow = aspect ratio keeps image heights equal. */
.gallery { margin-top: clamp(72px, 8vw, 112px); }
.gallery__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  margin-bottom: 1.25rem;
}
.gallery__note { color: var(--muted); font-size: 0.92rem; }

.gallery__row {
  display: flex;
  gap: clamp(12px, 1.6vw, 20px);
}
.gallery__row + .gallery__row { margin-top: clamp(20px, 2.4vw, 32px); }

.shot {
  flex: var(--ar) 1 0;
  min-width: 0;
}
.shot img {
  width: 100%;
  height: auto;
  aspect-ratio: var(--ar);
  object-fit: cover;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface-2);
  box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(0, 0, 0, 0.6);
}
.shot--phone img { border-radius: 16px; }
.shot figcaption {
  margin-top: 0.7rem;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
}

/* ---- Upcoming ---------------------------------------------------------- */
/* A step below the flagship: smaller, quieter cards, linked like nodes on a route. */
.section__intro {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 20px clamp(40px, 6vw, 88px);
  align-items: end;
}
.section__intro .lead { padding-bottom: 0.35rem; }

.roadmap {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
  margin-top: clamp(48px, 6vw, 72px);
}

.ucard {
  --cycle: 9s;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px clamp(22px, 2.2vw, 30px) 26px;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(241, 242, 244, 0.03), rgba(241, 242, 244, 0.006));
}
/* Side by side, the cards share row tracks, so names, descriptions and tag rows line up. */
@supports (grid-template-rows: subgrid) {
  .roadmap { grid-auto-rows: auto; }
  .ucard {
    display: grid;
    grid-row: span 7;            /* art, chip, name, tagline, kind, desc, tags */
    grid-template-rows: subgrid;
    row-gap: 0;
    align-content: start;
  }
  .chip { justify-self: start; }
  /* Only Pocket Naighbors has a tagline: elsewhere the kind moves up into that row, so it stays
     tight under its name, while descriptions and tag rows still line up across the three cards. */
  .ucard__desc { grid-row: 6; }
  .ucard__tags { grid-row: 7; }
}

/* Card art: the same square slot heads every card, so the row reads as a set. Pocket Naighbors
   shows Jacob's medallion; RADS and EliteAtlas have no art, so their slot holds the route's own
   node (the dot from the card edge, ringed to the medallion's size), not an invented logo. */
.ucard { --art: 104px; }
.ucard__art {
  display: block;
  width: var(--art);
  height: var(--art);
  margin-bottom: 1.4rem;
  border-radius: 50%;
}
.ucard__art--medallion {
  background: #1d1608;          /* while it loads */
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.55),
    0 16px 30px -14px rgba(0, 0, 0, 0.95),
    0 0 34px -8px rgba(201, 146, 46, 0.4);
}
.ucard__art--node {
  position: relative;
  border: 1px solid rgba(201, 146, 46, 0.24);
  background: radial-gradient(circle, rgba(201, 146, 46, 0.1), rgba(201, 146, 46, 0) 62%);
}
.ucard__art--node::before {     /* inner ring */
  content: "";
  position: absolute;
  inset: 27%;
  border: 1px solid rgba(201, 146, 46, 0.14);
  border-radius: 50%;
}
.ucard__art-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--gold-hi);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 1), 0 0 8px 1px rgba(246, 220, 138, 0.45);
  animation: ucard-node var(--cycle) ease-out infinite;
  animation-delay: calc(var(--i) * 1.3s);
}

/* Top edge: a hairline "link" with a node at its start; a packet runs along it card to card. */
.ucard__signal {
  position: absolute;
  top: -1px;
  left: 16px;
  right: 16px;
  height: 1px;
  overflow: hidden;
  background: linear-gradient(90deg, rgba(201, 146, 46, 0.55), rgba(201, 146, 46, 0.14) 55%, rgba(201, 146, 46, 0.05));
}
.ucard__signal::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(251, 231, 164, 0) calc(100% - 110px), rgba(251, 231, 164, 0.9) calc(100% - 6px), #fffaf0);
  transform: translateX(-100%);
  opacity: 0;
  animation: ucard-packet var(--cycle) linear infinite;
  animation-delay: calc(var(--i) * 1.3s);
}
@keyframes ucard-packet {
  0%   { transform: translateX(-100%); opacity: 1; }
  14%  { transform: translateX(0);     opacity: 1; }
  15%  { transform: translateX(6%);    opacity: 0; }
  100% { transform: translateX(6%);    opacity: 0; }
}

.ucard__node {
  position: absolute;
  top: -4px;
  left: 12px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold-hi);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 1), 0 0 8px 1px rgba(246, 220, 138, 0.45);
  animation: ucard-node var(--cycle) ease-out infinite;
  animation-delay: calc(var(--i) * 1.3s);
}
@keyframes ucard-node {
  0%   { box-shadow: 0 0 0 3px #000, 0 0 18px 6px rgba(255, 236, 186, 0.85); background: #fffaf0; }
  8%   { box-shadow: 0 0 0 3px #000, 0 0 8px 1px rgba(246, 220, 138, 0.45); background: var(--gold-hi); }
  100% { box-shadow: 0 0 0 3px #000, 0 0 8px 1px rgba(246, 220, 138, 0.45); background: var(--gold-hi); }
}

.chip {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 11px 5px 9px;
  border: 1px solid rgba(201, 146, 46, 0.4);
  border-radius: 999px;
  background: rgba(201, 146, 46, 0.07);
  color: var(--gold-hi);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.chip__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold-hi);
}

.ucard__name {
  margin-top: 1.4rem;
  color: var(--silver);
  font-size: clamp(1.5rem, 1.25rem + 0.8vw, 1.85rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.ucard__ai { color: var(--gold-hi); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .ucard__ai {
    background: var(--gold-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}
.ucard__tagline {             /* Jacob's own line, as on his promo */
  margin-top: 0.45rem;
  color: var(--silver);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.ucard__tagline + .ucard__kind { margin-top: 0.55rem; }
.ucard__kind {
  margin-top: 0.35rem;
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ucard__desc {
  margin-top: 1.1rem;
  color: var(--silver-dim);
  font-size: 0.98rem;
  line-height: 1.65;
  text-wrap: pretty;
}
/* Fact tags at the card foot, on a hairline so the three rows line up. */
.ucard__tags {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 6px;
  align-self: end;
  margin-top: auto;
  padding-top: calc(1.1rem + 1px + 1.1rem);
}
.ucard__tags::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 1.1rem;
  height: 1px;
  background: var(--line);
}
.ucard__tags li {
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(241, 242, 244, 0.05);
  color: var(--silver-dim);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  line-height: 1.4;
  white-space: nowrap;
}
.ucard__tags b { color: var(--gold-hi); font-weight: 700; }

/* ---- About ------------------------------------------------------------- */
.about {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.about .lead { margin-top: 1.5rem; }

.principles { display: grid; gap: 0; padding-top: 0.25rem; }
.principle {
  padding: 1.6rem 0;
  border-top: 1px solid var(--line);
}
.principle:last-child { border-bottom: 1px solid var(--line); }
.principle__title {
  color: var(--silver);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.principle__title::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 12px;
  vertical-align: 0.18em;
  transform: rotate(45deg);
  background: var(--gold);
}
.principle__text { margin-top: 0.5rem; max-width: 32rem; line-height: 1.65; }

/* ---- Contact ----------------------------------------------------------- */
.section--contact {
  background:
    radial-gradient(ellipse 60% 70% at 85% 100%, rgba(201, 146, 46, 0.09), rgba(0, 0, 0, 0) 70%),
    #000;
}
.contact {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: end;
}
.contact .lead { margin-top: 1.5rem; }
.contact__card {
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(241, 242, 244, 0.035), rgba(241, 242, 244, 0.01));
}
.contact__email {
  display: inline-block;
  margin-top: 0.6rem;
  color: var(--gold-hi);
  font-size: clamp(1.1rem, 0.9rem + 1.1vw, 1.6rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: underline;
  text-decoration-color: rgba(246, 220, 138, 0.35);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  overflow-wrap: anywhere;
  transition: text-decoration-color 0.2s ease, color 0.2s ease;
}
.contact__email:hover { color: #fff1c4; text-decoration-color: var(--gold-hi); }

/* ---- Footer ------------------------------------------------------------ */
.footer {
  padding-block: 44px 40px;
  border-top: 1px solid var(--line);
  font-size: 0.92rem;
}
.footer__top,
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 40px;
}
.footer__bottom {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.footer__logo-link { display: block; border-radius: 6px; }
.footer__logo { height: 39px; width: auto; mix-blend-mode: screen; }
.footer__legal { color: var(--muted); }
.footer__links { display: flex; flex-wrap: wrap; gap: 8px 26px; }
.footer__links a,
.footer__top-link {
  position: relative;
  color: var(--silver-dim);
  text-decoration: none;
  transition: color 0.2s ease;
}
/* Same invisible 44px hit area as .nav__link; the row gap is 8px, so the expanded areas of two
   wrapped rows meet without overlapping enough to steal each other's taps. */
.footer__links a::after,
.footer__top-link::after {
  content: "";
  position: absolute;
  inset: min(0px, (100% - 44px) / 2) 0;
}
.footer__links a:hover,
.footer__top-link:hover { color: var(--gold-hi); }

/* ---- Motion preference ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  #lattice, .btn, .nav, .nav::before, .nav__link, .nav__toggle-bars span, .footer__links a, .footer__top-link, .contact__email { transition: none; }
  .term__caret, .ucard__signal::after, .ucard__node, .ucard__art-dot { animation: none; }
}

/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 1000px) {
  .product, .about, .contact { grid-template-columns: minmax(0, 1fr); }
  .contact { align-items: start; }
  .product__features { padding-top: 0; }
}

/* #upcoming: the intro row and the card grid go single-column at the same width, so the
   heading/lead block never runs full width above an already-stacked, narrower card column. */
@media (max-width: 1100px) {
  .section__intro { grid-template-columns: minmax(0, 1fr); }
  .roadmap { grid-template-columns: minmax(0, 1fr); max-width: 44rem; }
  /* Stacked, no row is shared: every card flows in order with no empty (tagline) row. */
  .ucard__desc, .ucard__tags { grid-row: auto; }
  @supports (grid-template-rows: subgrid) {
    .ucard:not(:has(.ucard__tagline)) { grid-row: span 6; }
  }
}

/* Review banner (review-only; absent when data-review is off). Its one-line form needs ~950px;
   below that it becomes a two-line strip that wraps its notes instead of cutting them off. */
@media (max-width: 1000px) {
  body[data-review="on"] { --rb-h: 46px; }
  html:has(body[data-review="on"]) { scroll-padding-top: calc(var(--nav-h) + 70px); }
  .review-banner__text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    white-space: normal;
    line-height: 1.4;
  }
  .review-banner__tag {
    display: inline-block;
    margin-right: 4px;
    padding: 1px 6px;
    line-height: 1.3;
  }
  .review-banner__key { display: inline; overflow: visible; }
  .review-banner__key:not(:last-child) { margin-right: 6px; }
}
@media (max-width: 340px) {
  body[data-review="on"] { --rb-h: 60px; }
  html:has(body[data-review="on"]) { scroll-padding-top: calc(var(--nav-h) + 84px); }
  .review-banner__text { -webkit-line-clamp: 3; line-clamp: 3; }
}

@media (max-width: 760px) {
  .gallery__row { flex-wrap: wrap; }
  .shot--tv { flex: 1 1 100%; }
  .shot--phone { flex: 1 1 0; }
  .gallery__row + .gallery__row { margin-top: clamp(12px, 1.6vw, 20px); }
  .gallery__row .shot--tv + .shot--tv { margin-top: 4px; }
  /* Touch-size footer links: each takes taps across 44px (rows then sit 44px apart, not 28px). */
  .footer__links { gap: 0 26px; }
  .footer__links a,
  .footer__top-link { display: inline-flex; align-items: center; min-height: 44px; }
  .footer__logo-link { padding-block: 9px; margin-block: -9px; }
}

@media (max-width: 560px) {
  body { font-size: 1rem; }
  .hero__ctas .btn { flex: 1 1 100%; }
  .term__body { padding: 14px 14px 16px; font-size: 12.5px; }
  .term__line { grid-template-columns: 4.9em minmax(0, 1fr); column-gap: 0.8em; }
  .term__n { display: none; }
  .term__title { padding-right: 0; text-align: right; }
  .review-banner__key + .review-banner__key { display: none; }
  .footer__top, .footer__bottom { flex-direction: column; align-items: flex-start; }
  .product__actions .btn { flex: 1 1 100%; }
  .ucard { --art: 88px; }
}

@media (max-width: 420px) {
  body[data-review="on"] .review-banner { font-size: 11px; }
  .review-banner__tag { display: none; }
}