/* ZYLT Gloss - accent derived from the physical packaging (black + raspberry + chrome).
   Switch --accent back to #CA8A04 to restore the old gold site. Nothing else needs to change. */

@font-face {
  font-family: "Satoshi";
  src: url("/assets/fonts/satoshi-900.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("/assets/fonts/dm-sans.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg-deep: #0A0A0B;
  --bg-base: #101012;
  --bg-elev: #17171A;
  --surface: rgba(255, 255, 255, 0.045);
  --surface-2: rgba(255, 255, 255, 0.07);
  --border: rgba(255, 255, 255, 0.09);
  --border-bright: rgba(255, 255, 255, 0.16);

  --fg: #FAFAFA;
  --fg-muted: #A1A1AA;
  /* #71717A only reached 3.08:1 on the lightest glass surface. Lightened to
     clear 4.5:1 on every background this token is actually painted on. */
  --fg-dim: #8D8D95;

  /* Brand raspberry. Decorative only: fills, glows, dots, rules. It is 4.08:1
     under white text and 3.65:1 as text on glass, so it must not carry text.
     Use --accent-text for accent-coloured text, --accent-fill under white. */
  --accent: #E23E6E;
  --accent-lite: #FF6B96;
  --accent-deep: #A81E48;
  --accent-glow: rgba(226, 62, 110, 0.22);
  /* Same hue, lightened until it clears 4.5:1 on --surface-2 over --bg-elev. */
  --accent-text: #E75F86;
  /* Same hue, darkened until white text on it clears 4.5:1 (measured 5.00:1).
     Paired with --accent-deep (7.13:1) as the light end of every filled CTA. */
  --accent-fill: #D62055;

  --chrome: linear-gradient(180deg, #FFFFFF 0%, #C9C9CE 46%, #8A8A92 54%, #E8E8ED 100%);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --shell: min(1180px, 92vw);
}

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

/* The page background lives on the root, not on body, so the two ambient
   layers below can sit at z-index -1 and still paint above it. On body they
   would be hidden by body's own background box. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg-deep); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- ambient field ----------
   Costs no assets and no requests. Two fixed layers behind every page: a slow
   raspberry aurora that drifts, and a static salt grain that gives the black
   some tooth. Only the aurora moves, and it moves by transform, so the whole
   effect is one composited layer rather than a per-frame repaint.
   Peak wash is rgba(226,62,110,0.16) over #0A0A0B, which still leaves muted
   body text above 6:1. */
html::before,
html::after {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
}
html::before {
  inset: -20%;
  background:
    radial-gradient(38% 42% at 22% 28%, rgba(226, 62, 110, 0.16), transparent 70%),
    radial-gradient(34% 38% at 78% 62%, rgba(168, 30, 72, 0.13), transparent 72%),
    radial-gradient(30% 30% at 62% 10%, rgba(255, 255, 255, 0.05), transparent 70%);
  filter: blur(34px);
  will-change: transform;
  animation: field-drift 46s ease-in-out infinite alternate;
}
/* Grain, deliberately still. One moving thing on the page reads as authored;
   two reads as a screensaver. */
html::after {
  inset: 0;
  opacity: 0.55;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.5) 0.5px, transparent 1.2px),
    radial-gradient(circle, rgba(255, 107, 150, 0.42) 0.6px, transparent 1.5px);
  background-size: 137px 137px, 223px 223px;
  background-position: 0 0, 41px 67px;
}
@keyframes field-drift {
  0%   { transform: translate3d(-2%, -1%, 0) scale(1.04); }
  50%  { transform: translate3d(2.5%, 2%, 0)  scale(1.10); }
  100% { transform: translate3d(-1%, 2.5%, 0) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  html::before { animation: none; transform: translate3d(0, 0, 0) scale(1.05); will-change: auto; }
}

body {
  margin: 0;
  /* Transparent on purpose. The root carries the colour, see the ambient field. */
  background: transparent;
  color: var(--fg);
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* `clip`, not `hidden`. `hidden` makes body a scroll container, which breaks
     `position: sticky` on the nav. `clip` still contains the hero glow. */
  overflow-x: clip;
}

h1, h2, h3, .wordmark, .stat-value, .price {
  font-family: "Satoshi", "DM Sans", sans-serif;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 0.98;
  margin: 0;
}

p { margin: 0; }
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

.shell { width: var(--shell); margin-inline: auto; }
.section { padding: clamp(72px, 11vw, 148px) 0; position: relative; }

.eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 18px;
}

.lede { color: var(--fg-muted); font-size: clamp(16px, 1.6vw, 19px); max-width: 62ch; }

/* ---------- gloss surface ---------- */
.gloss {
  position: relative;
  background: linear-gradient(168deg, var(--surface-2) 0%, var(--surface) 38%, rgba(255,255,255,0.02) 100%);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  overflow: hidden;
}
/* specular highlight across the top edge */
.gloss::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-bright) 18%, rgba(255,255,255,0.5) 50%, var(--border-bright) 82%, transparent);
}

/* ---------- announcement ---------- */
.announce {
  background: linear-gradient(90deg, var(--accent-deep), var(--accent-fill));
  color: #fff;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 16px;
}
.announce[hidden], .announce[data-enabled="false"] { display: none; }

/* ---------- nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(10, 10, 11, 0.72);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid var(--border);
}
.nav-inner { display: flex; align-items: center; gap: 28px; height: 68px; }
.wordmark { font-size: 22px; letter-spacing: 0.02em; }
.nav-links { display: flex; gap: 26px; margin-left: auto; font-size: 15px; color: var(--fg-muted); }
.nav-links a:hover { color: var(--fg); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  background: var(--fg);
  color: #0A0A0B;
  border: 1px solid transparent;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 34px rgba(0,0,0,0.5); }
.btn .price {
  background: #0A0A0B;
  color: var(--fg);
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 14px;
}
.btn-lg { padding: 17px 26px; font-size: 17px; }
.btn-accent { background: linear-gradient(135deg, var(--accent-fill), var(--accent-deep)); color: #fff; }
.btn-accent .price { background: rgba(0,0,0,0.28); color: #fff; }

/* ---------- hero ---------- */
.hero { position: relative; padding-top: clamp(48px, 7vw, 86px); overflow: hidden; }
.hero::after {
  content: "";
  position: absolute;
  width: 900px; height: 900px;
  top: -420px; right: -260px;
  background: radial-gradient(circle, var(--accent-glow), transparent 66%);
  pointer-events: none;
  z-index: 0;
}
.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.hero h1 { font-size: clamp(46px, 7.4vw, 92px); }
.hero h1 .tint { color: var(--accent-lite); }
.hero-sub { margin-top: 24px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 34px; }

.rating-inline { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--fg-muted); }
.stars { color: var(--accent-text); letter-spacing: 2px; }

.hero-media { position: relative; }
.hero-media .gloss { padding: 26px; }
.hero-media img { border-radius: var(--r-md); }

.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 30px;
  font-size: 13px;
  color: var(--fg-dim);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.trust-row span { display: flex; align-items: center; gap: 8px; }
.trust-row span::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

/* ---------- spec numbers ---------- */
.spec-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 46px;
}
.spec {
  padding: 34px 30px;
  background: linear-gradient(168deg, var(--surface-2), rgba(255,255,255,0.015));
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  position: relative;
  overflow: hidden;
}
.spec::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
}
/* Chrome fill mirrors the brushed-metal ZYLT mark on the box.
   color is set first so the number stays readable if background-clip:text is unsupported. */
.stat-value {
  font-size: clamp(44px, 5.6vw, 68px);
  color: #E8E8ED;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .stat-value {
    background: var(--chrome);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
/* High Contrast mode strips backgrounds, which would leave transparent text invisible. */
@media (forced-colors: active) {
  .stat-value { background: none; color: CanvasText; -webkit-text-fill-color: CanvasText; forced-color-adjust: none; }
}
.stat-unit { font-size: 0.42em; letter-spacing: 0; margin-left: 4px; color: var(--fg-muted); -webkit-text-fill-color: var(--fg-muted); }
.spec-name { margin-top: 10px; font-weight: 700; font-size: 16px; letter-spacing: 0.02em; }
.spec-source { color: var(--fg-dim); font-size: 14px; margin-top: 4px; }

/* ---------- bento ---------- */
.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
  margin-top: 48px;
}
.bento .cell { padding: 0; }
.cell-wide { grid-column: span 4; }
.cell-narrow { grid-column: span 2; }
.cell-half { grid-column: span 3; }
.cell figure { margin: 0; }
.cell-body { padding: 28px 30px 32px; }
.cell h3 { font-size: 22px; margin-bottom: 10px; }
.cell p { color: var(--fg-muted); font-size: 15.5px; }

/* ---------- full-bleed lifestyle band ---------- */
.band { position: relative; min-height: 62vh; display: grid; align-items: end; overflow: hidden; }
.band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.band::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(10,10,11,0.62) 0%, rgba(10,10,11,0.16) 42%, rgba(10,10,11,0.94) 100%);
}
.band-copy { position: relative; z-index: 2; padding-bottom: clamp(40px, 6vw, 82px); }
.band-copy h2 { font-size: clamp(34px, 5vw, 62px); max-width: 15ch; }

/* ---------- liveness ----------
   The sync is the argument. A dot that breathes, the source, and how fresh it
   is. Deliberately quiet: it must read as instrumentation, not as a badge. */
.live-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 26px;
  font-size: 13.5px;
  color: var(--fg-dim);
  letter-spacing: 0.01em;
}
.live-strip .live-when { color: var(--fg-dim); }
.live-strip .live-when::before { content: "·"; margin-right: 10px; opacity: 0.6; }
.live-source { color: var(--fg-muted); }
.live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent-lite);
  box-shadow: 0 0 0 0 var(--accent-glow);
  flex: none;
}
@media (prefers-reduced-motion: no-preference) {
  .live-dot { animation: live-pulse 2.6s var(--ease) infinite; }
}
@keyframes live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 107, 150, 0.5); }
  60%  { box-shadow: 0 0 0 9px rgba(255, 107, 150, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 107, 150, 0); }
}

/* ---------- panel table ---------- */
.panel-table { border-collapse: collapse; width: 100%; min-width: 420px; margin-top: 18px; }
.panel-table th, .panel-table td {
  text-align: left;
  padding: 13px 18px 13px 0;
  border-bottom: 1px solid var(--border);
  font-size: 16px;
}
.panel-table thead th {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-dim);
  padding-bottom: 10px;
}
.panel-table tbody th { font-weight: 700; color: var(--fg); width: 34%; }
.panel-table tbody td { color: var(--fg-muted); }
.panel-table tbody td:first-of-type { color: var(--fg); font-variant-numeric: tabular-nums; }
.panel-table tbody tr:last-child th, .panel-table tbody tr:last-child td { border-bottom: 0; }
.panel-note { margin-top: 16px; color: var(--fg-dim); font-size: 14px; }

.cell-link {
  display: inline-block;
  margin-top: 16px;
  font-size: 15px;
  font-weight: 700;
  color: var(--accent-text);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.cell-link:hover { color: var(--fg); }

/* ---------- momentum ---------- */
.momentum { display: grid; grid-template-columns: auto auto 1fr; align-items: end; gap: 22px 44px; padding: 34px 32px; }
.momentum .big { font-size: clamp(40px, 5vw, 60px); }
.momentum-body { display: grid; gap: 10px; }
.momentum-body .live-strip { margin-top: 0; }
.stat-unit.delta { color: var(--accent-text); -webkit-text-fill-color: var(--accent-text); font-size: 0.34em; }
.stat-unit.delta:empty { display: none; }

/* ---------- hydration journal ---------- */
.journal-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 44px;
}
.post {
  display: block;
  padding: 30px 32px 34px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  transition: border-color 0.35s var(--ease), background 0.35s var(--ease), transform 0.35s var(--ease);
}
.post:hover {
  border-color: var(--border-bright);
  background: var(--surface-2);
  transform: translateY(-3px);
}
.post-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.post h3 { font-size: clamp(19px, 2.1vw, 23px); margin: 12px 0 10px; line-height: 1.25; }
.post p { color: var(--fg-muted); font-size: 15.5px; max-width: 46ch; }
.post:hover h3 { color: var(--accent-text); }
.journal-more { margin-top: 26px; }
.journal-more a {
  font-weight: 700;
  color: var(--accent-text);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.journal-more a:hover { color: var(--fg); }

/* Cells lift the same way the journal cards do, so the whole page answers to
   the pointer with one gesture rather than three different ones. */
.bento .cell {
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease);
}
.bento .cell:hover { border-color: var(--border-bright); transform: translateY(-3px); }

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

/* ---------- faq ---------- */
.faq { margin-top: 40px; border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 26px 44px 26px 0;
  font-weight: 700;
  font-size: clamp(17px, 2vw, 21px);
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute; right: 6px; top: 50%;
  transform: translateY(-50%);
  color: var(--accent-text);
  font-size: 24px;
  transition: transform 0.35s var(--ease);
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq .answer { padding: 0 0 26px; color: var(--fg-muted); max-width: 72ch; }

/* ---------- closing cta ---------- */
.close-cta { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(28px, 4vw, 56px); align-items: center; padding: clamp(34px, 4vw, 56px); }
.close-cta h2 { font-size: clamp(34px, 4.6vw, 58px); }

/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--border); padding: 54px 0 66px; color: var(--fg-dim); font-size: 14px; }
.footer-grid { display: grid; grid-template-columns: auto 1fr auto; gap: 32px; align-items: start; }
.footer a:hover { color: var(--fg); }
.legal { max-width: 58ch; line-height: 1.55; }

/* ---------- motion. Visible by default so no-JS and reduced-motion always see content. ---------- */
.motion-ready .reveal { opacity: 0; transform: translateY(22px); filter: blur(6px); }
.motion-ready .reveal.is-visible {
  opacity: 1;
  transform: none;
  filter: blur(0);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease), filter 0.6s var(--ease);
}
.motion-ready .reveal:nth-child(2) { transition-delay: 0.07s; }
.motion-ready .reveal:nth-child(3) { transition-delay: 0.14s; }
.motion-ready .reveal:nth-child(4) { transition-delay: 0.21s; }
.motion-ready .reveal:nth-child(5) { transition-delay: 0.28s; }
.motion-ready .reveal:nth-child(6) { transition-delay: 0.35s; }

/* The authored moment: the three spec numbers count up while a chrome highlight
   crosses the rule above them, once, the first time they are read. */
.motion-ready .spec::before { transform: translateX(-100%); }
.motion-ready .spec.is-visible::before {
  transform: none;
  transition: transform 0.9s var(--ease) 0.12s;
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .motion-ready .reveal { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  .motion-ready .spec::before { transform: none !important; }
  .btn:hover, .post:hover, .bento .cell:hover { transform: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 940px) {
  .hero-grid, .close-cta { grid-template-columns: 1fr; }
  .spec-grid { grid-template-columns: 1fr; }
  .cell-wide, .cell-narrow, .cell-half { grid-column: span 6; }
  .nav-links { display: none; }
  .footer-grid { grid-template-columns: 1fr; }
  .journal-grid { grid-template-columns: 1fr; }
  .momentum { grid-template-columns: auto auto; }
  .momentum-body { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .momentum { grid-template-columns: 1fr; }
  .post { padding: 24px 22px 28px; }
}

/* ---------- ambient video bed ----------
   The hero sat on flat black. The product footage runs behind it at low
   opacity under a two-axis veil, so the type keeps its contrast and the
   background stops being nothing. No autoplay attribute: motion.js opts in. */
.hero-bed {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero-bed .ambient {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.32;
  filter: saturate(0.8) contrast(1.06);
}
.hero-bed::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10,10,11,0.66) 0%, rgba(10,10,11,0.84) 62%, var(--bg-deep) 100%),
    linear-gradient(90deg, var(--bg-deep) 4%, rgba(10,10,11,0.30) 54%, rgba(10,10,11,0.72) 100%);
}

/* ---------- the shaker ---------- */
.gear-grid {
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  gap: 18px;
  margin-top: 46px;
  align-items: stretch;
}
.gear-stage, .gear-clip {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  position: relative;
  background: var(--surface);
}
.gear-stage img { width: 100%; height: 100%; object-fit: cover; }
.gear-side { display: grid; grid-template-rows: auto 1fr; gap: 18px; }
.gear-clip { aspect-ratio: 16 / 10; }
.gear-clip .ambient { width: 100%; height: 100%; object-fit: cover; }

.gear-facts {
  margin: 0;
  padding: 26px 30px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: linear-gradient(168deg, var(--surface-2), rgba(255,255,255,0.015));
  display: grid;
  align-content: center;
  gap: 20px;
}
.gear-facts dt {
  font-family: "Satoshi", "DM Sans", sans-serif;
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: 21px;
  line-height: 1;
}
.gear-facts dd { margin: 6px 0 0; color: var(--fg-muted); font-size: 15px; line-height: 1.5; }

/* Manufacturer sheets are printed on white. Framing them on white makes the
   light deliberate instead of four glowing rectangles on a dark page. */
.sheet-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(250px, 1fr);
  gap: 16px;
  margin-top: 18px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  padding-bottom: 6px;
}
.sheet-rail:focus-visible { outline: 2px solid var(--accent-lite); outline-offset: 4px; border-radius: var(--r-sm); }
.sheet {
  margin: 0;
  background: #FFFFFF;
  border-radius: var(--r-md);
  overflow: hidden;
  scroll-snap-align: start;
}
.sheet img { width: 100%; height: auto; }
.sheet figcaption {
  padding: 12px 18px 16px;
  color: #3F3F46;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* ---------- who it's for ---------- */
.who-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(28px, 4vw, 56px);
  margin-top: 46px;
  align-items: start;
}
.who-media { display: grid; gap: 16px; }
.who-media figure { margin: 0; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border); }
.who-media img { width: 100%; height: 100%; object-fit: cover; }
.who-tall { aspect-ratio: 3 / 4; }
.who-short { aspect-ratio: 4 / 3; }

.who-list { margin: 0; border-top: 1px solid var(--border); }
.who-item { padding: 26px 0; border-bottom: 1px solid var(--border); }
.who-item dt {
  font-family: "Satoshi", "DM Sans", sans-serif;
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: clamp(21px, 2.4vw, 27px);
  line-height: 1.05;
}
.who-item dd { margin: 10px 0 0; color: var(--fg-muted); font-size: 16px; max-width: 52ch; }

@media (max-width: 940px) {
  .gear-grid, .who-grid { grid-template-columns: 1fr; }
  .who-media { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .who-media { grid-template-columns: 1fr; }
  .gear-facts { padding: 24px 22px; }
}

/* ============================================================
   BLOG
   The migrated posts use their own class vocabulary (.wall/.pane/.s4).
   Restyled here rather than rewritten, because that markup carries the
   Article and FAQPage schema and must not be disturbed.
   ============================================================ */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 12px 18px;
  background: var(--accent-fill);
  color: #fff;
  border-radius: 0 0 var(--r-sm) 0;
}
.skip:focus { left: 0; }

.wall {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
  width: var(--shell);
  margin-inline: auto;
}
.s4 { grid-column: span 4; }
.s8 { grid-column: span 8; }
.s12 { grid-column: span 12; }

/* The blog nav is wrapped in a bare <header> that is exactly the nav's own
   height. A sticky element only travels inside its parent box, so sticking the
   nav itself gave it zero travel and it scrolled away on every post. The header
   is the direct child of body, so that is where sticky belongs. */
body > header {
  position: sticky;
  top: 0;
  z-index: 60;
}

.wall.nav {
  align-items: center;
  gap: 18px;
  padding: 14px 0;
  grid-template-columns: auto 1fr auto;
  width: 100%;
  padding-inline: max(4vw, calc((100vw - var(--shell)) / 2));
  background: rgba(10, 10, 11, 0.72);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid var(--border);
}
.nav__mark a { font-family: "Satoshi", sans-serif; font-weight: 900; font-size: 21px; }
.nav__link { color: var(--fg-muted); font-size: 15px; padding: 8px 12px; }
.nav__link:hover { color: var(--fg); }
.nav__buy {
  background: linear-gradient(135deg, var(--accent-fill), var(--accent-deep));
  color: #fff;
  padding: 11px 18px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
}

.pane {
  background: linear-gradient(168deg, var(--surface-2) 0%, var(--surface) 40%, rgba(255,255,255,0.02) 100%);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 22px 24px;
  position: relative;
}
.wall.nav .pane { background: none; border: 0; padding: 0; }
.pane--frost { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.pane--raspberry {
  border-color: rgba(226, 62, 110, 0.34);
  background: linear-gradient(168deg, rgba(226,62,110,0.14), rgba(226,62,110,0.03));
}
.pane__body { color: var(--fg-muted); }
.pane__body > * + * { margin-top: 14px; }

.label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-text);
}

main .article, article.article { padding-block: clamp(38px, 6vw, 74px); }
.article-h1 {
  font-family: "Satoshi", sans-serif;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.02;
  font-size: clamp(34px, 5.2vw, 60px);
  margin: 0 0 20px;
}
.article h2 { font-size: clamp(24px, 3vw, 34px); margin: 44px 0 14px; }
.article h3 { font-size: clamp(19px, 2.2vw, 23px); margin: 30px 0 10px; }
.article p, .article li { color: #D4D4D8; font-size: 17.5px; line-height: 1.72; max-width: 72ch; }
.article p + p { margin-top: 16px; }
.article ul, .article ol { padding-left: 22px; }
.article li + li { margin-top: 8px; }
.article a { color: var(--accent-lite); text-decoration: underline; text-underline-offset: 3px; }
.article a:hover { color: var(--fg); }

/* Every FAQ answer in the blog is addressed by a fragment URL. The nav is
   sticky (105px desktop, 131px mobile), so without this the anchored heading
   lands behind the bar and the reader sees the wrong answer. */
:target { scroll-margin-top: 150px; }

/* Comparison tables. `body { overflow-x: hidden }` means a table wider than the
   column is clipped and unreachable, so the wrapper has to do the scrolling.
   tabindex is set on .scroller in the markup so keyboard users can reach it. */
.scroller {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  margin: 26px 0;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.scroller:focus-visible { outline: 2px solid var(--accent-lite); outline-offset: 2px; }
.article table {
  border-collapse: collapse;
  width: 100%;
  min-width: 560px;
  font-size: 16px;
}
.article th, .article td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.article thead th {
  background: var(--surface-2);
  color: var(--fg);
  font-weight: 700;
  white-space: nowrap;
}
.article tbody td { color: #D4D4D8; }
.article tbody tr:last-child td { border-bottom: 0; }

/* The extractable answer block. This is what AI engines quote, so it reads
   first and is visually unmistakable. */
/* The extractable answer. Emphasis comes from type weight and a soft wash
   rather than an accent stripe, which reads as a generic callout. */
.short-answer {
  background: linear-gradient(120deg, rgba(226,62,110,0.10), transparent 72%);
  border-radius: var(--r-sm);
  padding: 22px 26px;
  margin: 26px 0 34px;
}
.short-answer p {
  color: var(--fg);
  font-size: 19.5px;
  line-height: 1.58;
  font-weight: 500;
  max-width: 66ch;
}

.callout {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: 20px 24px;
  margin: 28px 0;
}

.footer__links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.legal { color: var(--fg-dim); font-size: 13.5px; line-height: 1.6; }

/* Focus visibility, applied globally. */
a:focus-visible, button:focus-visible, summary:focus-visible, details:focus-visible {
  outline: 2px solid var(--accent-lite);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (max-width: 940px) {
  .s4, .s8, .s12 { grid-column: span 12; }
  .wall.nav { grid-template-columns: auto auto; row-gap: 10px; }
  .article p, .article li { font-size: 16.5px; }
}