/* 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 tabs. Without JS (.ptabs lacks .is-tabs) the bar is a set of anchor links and every
   panel shows, stacked; js/site.js adds .is-tabs and the WAI-ARIA tab roles. */
.ptabs { margin-top: clamp(40px, 5vw, 64px); }
.ptabs__list {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}
.ptabs__list > li { display: flex; min-width: 0; }
.ptabs__tab {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  min-height: 68px;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(241, 242, 244, 0.03), rgba(241, 242, 244, 0.006));
  color: var(--silver-dim);
  text-decoration: none;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.ptabs__tab:hover { border-color: rgba(246, 220, 138, 0.45); }
.ptabs__name {
  color: var(--silver);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.005em;
}
.ptabs__kind {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* Status at a glance: filled gold = available now, gold ring = not out yet. */
.ptabs__dot {
  flex: none;
  width: 7px;
  height: 7px;
  border: 1px solid var(--gold);
  border-radius: 50%;
}
.ptabs__dot--live { border-color: var(--gold-hi); background: var(--gold-hi); box-shadow: 0 0 8px 1px rgba(246, 220, 138, 0.55); }
.ptabs__tab[aria-selected="true"] {
  border-color: rgba(201, 146, 46, 0.7);
  background:
    radial-gradient(ellipse 90% 80% at 0% 0%, rgba(201, 146, 46, 0.16), rgba(201, 146, 46, 0) 70%),
    linear-gradient(180deg, rgba(241, 242, 244, 0.04), rgba(241, 242, 244, 0.01));
  box-shadow: inset 0 1px 0 rgba(246, 220, 138, 0.14), inset 0 -2px 0 var(--gold);
}
.ptabs__tab[aria-selected="true"] .ptabs__kind { color: var(--gold-hi); }

.ptab { margin-top: clamp(36px, 4.5vw, 56px); }
.ptab:focus-visible { outline-offset: 8px; border-radius: 12px; }
.ptab[hidden] { display: none; }
/* No JS: panels stack, each on its own hairline. */
.ptabs:not(.is-tabs) .ptab + .ptab {
  margin-top: clamp(64px, 8vw, 104px);
  padding-top: clamp(64px, 8vw, 104px);
  border-top: 1px solid var(--line);
}

/* Unfinished products: a full-width banner heads the tab. */
.status-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  margin-bottom: clamp(28px, 3.5vw, 40px);
  padding: 18px clamp(18px, 2.4vw, 28px);
  border: 1px solid rgba(201, 146, 46, 0.55);
  border-radius: 14px;
  background: linear-gradient(90deg, rgba(201, 146, 46, 0.2), rgba(201, 146, 46, 0.05));
  box-shadow: inset 0 1px 0 rgba(246, 220, 138, 0.14);
}
.status-banner__tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--gold-hi);
  font-family: var(--font-mono);
  font-size: clamp(14px, 0.8rem + 0.35vw, 17px);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.status-banner__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold-hi);
  box-shadow: 0 0 10px 2px rgba(246, 220, 138, 0.6);
}
.status-banner__text { color: var(--silver); font-size: 1rem; line-height: 1.5; }

.ptab__head {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 28px clamp(40px, 6vw, 88px);
  align-items: end;
}
.ptab__head--solo { grid-template-columns: minmax(0, 46rem); }
.ptab__intro--art {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 clamp(20px, 3vw, 32px);
  align-items: start;
}
.ptab__medallion {
  width: clamp(88px, 10vw, 112px);
  height: auto;
  border-radius: 50%;
  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);
}

.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);
}

.ptab__name {
  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;
}
.product__badge + .ptab__name { margin-top: 0.75rem; }
/* 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 text edge. */
.ptab__name--wordmark { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; line-height: 0; }
.ptab__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);
}
.ptab__edition {
  padding: 6px 12px;
  border: 1px solid rgba(201, 146, 46, 0.45);
  border-radius: 999px;
  color: var(--gold-hi);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ptab__kind {
  margin-top: 0.55rem;
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.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;
  }
}
.ptab__tagline {             /* Jacob's own line, as on his promo */
  margin-top: 0.5rem;
  color: var(--silver);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.4;
  text-wrap: balance;
}

.product__tagline {
  margin-top: 0.8rem;
  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;
}
.ptab__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 6px;
  margin-top: 1.25rem;
}
.ptab__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;
}

/* NxtGenTv Elite: one app on every screen, one purchase for several devices. */
.onebuy {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  padding: 14px 18px;
  border: 1px solid rgba(201, 146, 46, 0.55);
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(201, 146, 46, 0.18), rgba(201, 146, 46, 0.04));
  color: var(--silver-dim);
  font-size: 1rem;
  line-height: 1.5;
}
.onebuy strong { color: var(--gold-hi); font-weight: 600; }
.onebuy__icon {               /* three screens, drawn from borders: TV, box, phone */
  flex: none;
  position: relative;
  width: 34px;
  height: 22px;
  border: 2px solid var(--gold-hi);
  border-radius: 4px;
}
.onebuy__icon::before {
  content: "";
  position: absolute;
  right: -9px;
  bottom: -5px;
  width: 9px;
  height: 15px;
  border: 2px solid var(--gold-hi);
  border-radius: 3px;
  background: var(--black);
}
.onebuy__icon::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: -7px;
  height: 2px;
  background: var(--gold-hi);
}
.ptab__mission {
  max-width: 44rem;
  margin-top: 1rem;
  color: var(--silver);
  font-size: clamp(1.08rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.6;
  text-wrap: pretty;
}

.notice {
  display: flex;
  gap: 14px;
  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.5rem;
}
.platform {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--silver);
  font-size: 0.95rem;
}
.platform__label {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Feature rows: picture on one side, words on the other, alternating; stacked on phones. */
.frows {
  display: grid;
  gap: clamp(48px, 6vw, 88px);
  margin-top: clamp(48px, 6vw, 80px);
}
.frow {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 24px clamp(32px, 6vw, 88px);
  align-items: center;
}
.frow:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.frow:nth-child(even) .frow__media { order: 2; }
.frow__media { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.frow__media img {
  width: 100%;
  height: auto;
  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);
}
.frow__media--phone img { width: min(280px, 100%); border-radius: 18px; }
/* Two pictures in one row: TV shots overlap, phone shots stand side by side. */
.frow__media--pair-tv { display: grid; width: 100%; }
.frow__media--pair-tv img:nth-of-type(2) { position: relative; width: 78%; justify-self: end; margin-top: -16%; }
.frow__media--pair-phone { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 0 16px; }
.frow__media--pair-phone img { width: min(220px, calc(50% - 8px)); border-radius: 18px; }
.frow__media--pair-phone img:nth-of-type(2) { margin-top: 36px; }
.frow__media--pair-phone figcaption { flex-basis: 100%; }
.frow__media--stack { display: grid; gap: 12px; width: 100%; }
.frow__media--concept img { width: min(440px, 100%); border-radius: 14px; }
.frow__media figcaption {
  margin-top: 0.7rem;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-align: center;
}
.frow__text { max-width: 30rem; }
/* A feature still waiting for its picture: the words alone, on a card. */
.frow.frow--text,
.frow.frow--text:nth-child(even) {
  grid-template-columns: minmax(0, 1fr);
  padding: clamp(22px, 3vw, 34px) clamp(22px, 3.2vw, 40px);
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--gold);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(241, 242, 244, 0.035), rgba(241, 242, 244, 0.008));
}
.frow--text .frow__text { max-width: 48rem; }
/* EliteAtlas: a before/after pair takes the wider side of its row. */
.frow.frow--wide { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.frow.frow--wide:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
.frow.frow--wide:nth-child(even) .ba { order: 2; }
.ba { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; min-width: 0; }
.ba__half { min-width: 0; }
/* Real screenshots need the width: before above after. */
.ba--shots { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.ba__half img {
  display: block;
  width: 100%;
  height: auto;
  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);
}
.ba__half figcaption {
  margin-top: 0.6rem;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-align: center;
}
.frow__n {
  display: block;
  margin-bottom: 0.6rem;
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
}
.frow__title {
  color: var(--silver);
  font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.65rem);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.frow__detail { margin-top: 0.7rem; color: var(--silver-dim); font-size: 1.02rem; line-height: 1.65; text-wrap: pretty; }

/* Diagrams: inline SVG drawn from the page's tokens. */
.frow__media--diagram { width: 100%; }
.dg {
  display: block;
  width: 100%;
  height: auto;
  padding: clamp(8px, 1.5vw, 16px);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background:
    radial-gradient(ellipse 80% 60% at 0% 0%, rgba(201, 146, 46, 0.08), rgba(201, 146, 46, 0) 70%),
    var(--surface);
  font-family: var(--font-sans);
}
.dg-box { fill: rgba(241, 242, 244, 0.035); stroke: var(--line-strong); stroke-width: 1.5; }
.dg-box--gold { fill: rgba(201, 146, 46, 0.1); stroke: var(--gold); }
.dg-box--tools { stroke-dasharray: 5 4; }
.dg-chip { fill: rgba(241, 242, 244, 0.06); stroke: var(--line-strong); stroke-width: 1; }
.dg-title { fill: var(--silver); font-size: 20px; font-weight: 600; }
.dg-sub { fill: var(--silver-dim); font-size: 16px; }
.dg-head2 { fill: var(--silver); font-size: 17px; font-weight: 600; }
.dg-item { fill: var(--silver-dim); font-size: 17px; }
.dg-step { fill: var(--silver); font-size: 18px; font-weight: 600; }
.dg-tier { fill: var(--silver-dim); font-size: 16px; }
.dg-tier--chat { fill: var(--gold-hi); }
.dg-tier--tools { fill: var(--muted); }
.dg-proof circle { fill: rgba(201, 146, 46, 0.14); stroke: var(--gold-hi); stroke-width: 1.5; }
.dg-proof path { fill: none; stroke: var(--gold-hi); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.dg-cap { fill: var(--muted); font-size: 15px; font-family: var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; }
.dg-note { fill: var(--muted); font-size: 15px; }
.dg-note--gold { fill: var(--gold-hi); }
.dg-chiptext { fill: var(--silver); font-size: 16px; }
.dg-flow { fill: none; stroke: var(--silver-dim); stroke-width: 2; }
.dg-flow--gold { stroke: var(--gold-hi); }
.dg-head { fill: var(--silver-dim); }
.dg-break { stroke: var(--gold); stroke-width: 1.5; stroke-dasharray: 4 5; }
.dg-rule { stroke: var(--line-strong); stroke-width: 1; }
.dg-cell { fill: rgba(241, 242, 244, 0.1); stroke: var(--line-strong); stroke-width: 1; }
.dg-cell--atlas { fill: rgba(201, 146, 46, 0.22); stroke: var(--gold-hi); stroke-dasharray: 4 3; }
.dg-cell--sel { fill: rgba(201, 146, 46, 0.12); stroke: var(--gold); }
.dg-cell--empty { fill: none; stroke: var(--line-strong); stroke-dasharray: 3 4; }
.dg-progress { fill: rgba(241, 242, 244, 0.14); }
.dg-progress--on { fill: var(--gold-hi); }
.dg-celltext { fill: var(--silver); font-size: 17px; font-weight: 600; }
.dg-celltext--dim { fill: var(--silver-dim); font-weight: 400; }
.dg-badge { fill: var(--gold-hi); }
.dg-badgetext { fill: #1b1304; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; }
.dg-now { stroke: var(--gold-hi); stroke-width: 2; }
.dg-center { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 10 4 2 4; }
.dg-pipe { fill: none; stroke: var(--silver-dim); stroke-width: 16; }
.dg-pipe--stub { stroke: rgba(185, 189, 197, 0.35); }
.dg-fitting { fill: none; stroke: var(--gold); stroke-width: 16; }
.dg-dim { fill: none; stroke: var(--silver-dim); stroke-width: 1.25; }
.dg-dim--gold { stroke: var(--gold-hi); }
.dg-dimtext { fill: var(--silver-dim); font-size: 16px; }
.dg-dimtext--gold { fill: var(--gold-hi); font-weight: 700; font-size: 18px; }
.dg-row { fill: var(--silver-dim); font-size: 17.5px; }
.dg-row--val { fill: var(--silver); font-family: var(--font-mono); }
.dg-cut { fill: var(--gold-hi); font-size: 38px; font-weight: 700; }

/* "Also on board": a gold-edged glass panel with a slow sheen, so the extras read as a highlight. */
.extras {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: clamp(56px, 7vw, 96px);
  padding: clamp(24px, 3.4vw, 44px);
  border: 1px solid transparent;
  border-radius: 20px;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(246, 220, 138, 0.11), transparent 55%) padding-box,
    radial-gradient(90% 80% at 100% 100%, rgba(201, 146, 46, 0.08), transparent 60%) padding-box,
    linear-gradient(180deg, #131315, #0c0c0e) padding-box,
    linear-gradient(135deg, rgba(246, 220, 138, 0.75), rgba(154, 102, 20, 0.25) 35%, rgba(241, 242, 244, 0.12) 60%, rgba(246, 220, 138, 0.6)) border-box;
  box-shadow: 0 30px 80px -40px rgba(201, 146, 46, 0.45), inset 0 1px 0 rgba(255, 244, 207, 0.08);
}
.extras::before {
  content: "";
  position: absolute;
  inset: -40% auto -40% -60%;
  z-index: -1;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 244, 207, 0.07) 45%, rgba(255, 244, 207, 0.13) 50%, rgba(255, 244, 207, 0.07) 55%, transparent);
  transform: rotate(8deg);
  animation: extras-sheen 7s ease-in-out 1.2s infinite;
  pointer-events: none;
}
@keyframes extras-sheen {
  0% { left: -60%; }
  45%, 100% { left: 130%; }
}
.extras .label {
  margin-bottom: 1.1rem;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.22em;
  background: var(--gold-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Spotlight cards: the stand-out extras, bigger than the list below them. */
.extras__spot {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(14px, 2vw, 22px);
  margin-bottom: clamp(18px, 2.6vw, 28px);
}
.spot {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: clamp(20px, 2.4vw, 28px);
  border: 1px solid rgba(246, 220, 138, 0.28);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(246, 220, 138, 0.075), rgba(241, 242, 244, 0.015) 55%);
  box-shadow: inset 0 1px 0 rgba(255, 244, 207, 0.1), 0 18px 40px -28px rgba(0, 0, 0, 0.9);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.spot:hover {
  transform: translateY(-3px);
  border-color: rgba(246, 220, 138, 0.6);
  box-shadow: inset 0 1px 0 rgba(255, 244, 207, 0.16), 0 24px 50px -26px rgba(201, 146, 46, 0.5);
}
.spot__eyebrow {
  margin: 0;
  color: var(--gold-hi);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.spot__title { color: #fff; font-size: clamp(1.2rem, 1.6vw, 1.38rem); font-weight: 650; line-height: 1.25; }
.spot__detail { margin: 0; color: var(--silver-dim); font-size: 0.98rem; line-height: 1.6; }
.spot__points { display: grid; gap: 0.45rem; margin: 0.35rem 0 0; padding: 0; list-style: none; }
.spot__points li {
  position: relative;
  padding-left: 1.4rem;
  color: var(--silver);
  font-size: 0.95rem;
  line-height: 1.45;
}
.spot__points li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.42em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 2px;
  background: var(--gold-fill);
  transform: rotate(45deg);
  box-shadow: 0 0 10px rgba(246, 220, 138, 0.55);
}
.extras__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(10px, 1.4vw, 14px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.extra {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.25rem;
  padding: 1rem 1.1rem 1rem 2.4rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(241, 242, 244, 0.025);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.extra::before {
  content: "";
  position: absolute;
  left: 1.05rem;
  top: 1.38rem;
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 2px;
  background: var(--gold-fill);
  transform: rotate(45deg);
  box-shadow: 0 0 10px rgba(246, 220, 138, 0.5);
}
.extra:hover { border-color: rgba(246, 220, 138, 0.4); background-color: rgba(246, 220, 138, 0.05); }
.extra__title { color: var(--silver); font-size: 1.05rem; font-weight: 600; line-height: 1.35; }
.extra__detail { color: var(--silver-dim); font-size: 0.97rem; line-height: 1.55; }

.ptab__credits {
  max-width: 52rem;
  margin-top: clamp(32px, 4vw, 48px);
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.6;
}

/* ---- 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, .ptabs__tab { transition: none; }
  .term__caret { animation: none; }
  .extras::before { animation: none; display: none; }
  .spot, .extra { transition: none; }
  .spot:hover { transform: none; }
}

/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 1000px) {
  .about, .contact, .ptab__head { grid-template-columns: minmax(0, 1fr); }
  .contact { align-items: start; }
  .ptab__head { align-items: start; }
  .ptabs__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 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) {
  .frow, .frow:nth-child(even),
  .frow.frow--wide, .frow.frow--wide:nth-child(even) { grid-template-columns: minmax(0, 1fr); }
  .frow:nth-child(even) .frow__media, .frow.frow--wide:nth-child(even) .ba { order: 0; }
  .dg { padding: 6px; border-radius: 12px; }
  .onebuy { align-items: flex-start; }
  .onebuy__icon { margin-top: 4px; }
  .frow__media--phone img { width: min(240px, 72%); }
  .frow__text { max-width: none; }
  /* 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%; }
  .ptabs__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ba { grid-template-columns: minmax(0, 1fr); }
  .ptab__intro--art { grid-template-columns: minmax(0, 1fr); }
  .ptab__medallion { margin-bottom: 1.1rem; }
}

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