/* ═══════════════════════════════════════════════════════════════
   REVIEWER SURFACE — shared chrome
   ---------------------------------------------------------------
   A small, gated mini-site for Handshake / university reviewers.
   Reuses the Lucia background system (dot grid, white patches,
   roaming shine, amber bloom palette, film grain, cursor glow) so
   it reads as one world with the public landing + legal pages, then
   layers a scrollable content system (nav, cards, product switch).

   Reachable only via the landing-page mark-top easter-egg link.
   All reviewer pages carry <meta name="robots" content="noindex">.
   Remove /reviewer/ + the easter-egg link to retire this surface.
   ═══════════════════════════════════════════════════════════════ */

/* ── Canela (display serif) — licensed, self-hosted on Lucia CDN ── */
@font-face {
  font-family: 'Canela';
  src: url('https://hello-lucia.b-cdn.net/canela/Canela-Light-Desktop.otf') format('opentype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Canela';
  src: url('https://hello-lucia.b-cdn.net/canela/Canela-Light%20Italic-Desktop.otf') format('opentype');
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Canela';
  src: url('https://hello-lucia.b-cdn.net/canela/Canela-Regular-Desktop.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Canela';
  src: url('https://hello-lucia.b-cdn.net/canela/Canela-Regular%20Italic-Desktop.otf') format('opentype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Canela';
  src: url('https://hello-lucia.b-cdn.net/canela/Canela-Medium%20Italic-Desktop.otf') format('opentype');
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Canela';
  src: url('https://hello-lucia.b-cdn.net/canela/Canela-Bold-Desktop.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Canela';
  src: url('https://hello-lucia.b-cdn.net/canela/Canela-Bold%20Italic-Desktop.otf') format('opentype');
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Canela';
  src: url('https://hello-lucia.b-cdn.net/canela/Canela-Black-Desktop.otf') format('opentype');
  font-weight: 900; font-style: normal; font-display: swap;
}

:root {
  --bg: #FFBC17;
  --serif: 'Canela', 'Cormorant Garamond', Georgia, serif;
  --ink: #0A0A0A;
  --ink-soft: rgba(10, 10, 10, 0.68);
  --ink-mute: rgba(10, 10, 10, 0.42);
  --ink-faint: rgba(10, 10, 10, 0.16);
  --panel: #FFFFFF;

  /* Dot grid */
  --dot-opacity: 0.18;
  --dot-size: 0.9px;
  --dot-spacing: 10px;

  /* Fade mask */
  --fade-center: 0.34;
  --fade-inner:  0.40;
  --fade-mid:    0.56;
  --fade-outer:  0.78;
  --fade-edge:   0.46;
  --fade-shape-w: 62%;
  --fade-shape-h: 55%;
  --fade-center-x: 50%;
  --fade-center-y: 30%;

  /* White-dot patches */
  --white-patches-opacity: 1;
  --white-patch-1-x: 18%;
  --white-patch-1-y: 22%;
  --white-patch-1-size: 240px;
  --white-patch-2-x: 82%;
  --white-patch-2-y: 30%;
  --white-patch-2-size: 300px;
  --white-patch-3-x: 50%;
  --white-patch-3-y: 70%;
  --white-patch-3-size: 260px;
  --white-patch-core: 30%;

  /* Eval Labs accent — the "binary / ink" side */
  --eval-ink: #0A0A0A;
  --eval-panel: #0E0E10;

  --maxw: 940px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

html, body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  background: var(--bg);
  font-family: 'Manrope', system-ui, -apple-system, Segoe UI, sans-serif;
  color: var(--ink);
  min-height: 100%;
  position: relative;
  overflow-x: hidden;
}

/* ─── DOT GRID ─────────────────────────────────────────────── */
.grid {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(10, 10, 10, var(--dot-opacity)) var(--dot-size), transparent calc(var(--dot-size) + 0.2px));
  background-size: var(--dot-spacing) var(--dot-spacing);
  -webkit-mask-image: radial-gradient(ellipse var(--fade-shape-w) var(--fade-shape-h) at var(--fade-center-x) var(--fade-center-y),
    rgba(0,0,0,var(--fade-center)) 0%,
    rgba(0,0,0,var(--fade-inner))  28%,
    rgba(0,0,0,var(--fade-mid))    52%,
    rgba(0,0,0,var(--fade-outer))  74%,
    rgba(0,0,0,var(--fade-edge))   96%);
  mask-image: radial-gradient(ellipse var(--fade-shape-w) var(--fade-shape-h) at var(--fade-center-x) var(--fade-center-y),
    rgba(0,0,0,var(--fade-center)) 0%,
    rgba(0,0,0,var(--fade-inner))  28%,
    rgba(0,0,0,var(--fade-mid))    52%,
    rgba(0,0,0,var(--fade-outer))  74%,
    rgba(0,0,0,var(--fade-edge))   96%);
  opacity: 0;
  animation: gridIn 1.6s cubic-bezier(.22,.61,.36,1) 0.15s forwards;
}

.grid-white {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, var(--dot-opacity)) var(--dot-size), transparent calc(var(--dot-size) + 0.2px));
  background-size: var(--dot-spacing) var(--dot-spacing);
  -webkit-mask-image:
    radial-gradient(circle var(--white-patch-1-size) at var(--white-patch-1-x) var(--white-patch-1-y), white 0%, white var(--white-patch-core), transparent 100%),
    radial-gradient(circle var(--white-patch-2-size) at var(--white-patch-2-x) var(--white-patch-2-y), white 0%, white var(--white-patch-core), transparent 100%),
    radial-gradient(circle var(--white-patch-3-size) at var(--white-patch-3-x) var(--white-patch-3-y), white 0%, white var(--white-patch-core), transparent 100%);
  mask-image:
    radial-gradient(circle var(--white-patch-1-size) at var(--white-patch-1-x) var(--white-patch-1-y), white 0%, white var(--white-patch-core), transparent 100%),
    radial-gradient(circle var(--white-patch-2-size) at var(--white-patch-2-x) var(--white-patch-2-y), white 0%, white var(--white-patch-core), transparent 100%),
    radial-gradient(circle var(--white-patch-3-size) at var(--white-patch-3-x) var(--white-patch-3-y), white 0%, white var(--white-patch-core), transparent 100%);
  opacity: 0;
  animation: gridWhiteIn 1.6s cubic-bezier(.22,.61,.36,1) 0.35s forwards;
}

@keyframes gridIn { to { opacity: 1; } }
@keyframes gridWhiteIn { to { opacity: var(--white-patches-opacity); } }

/* ─── ROAMING SHINE ────────────────────────────────────────── */
@property --shine-x   { syntax: '<percentage>'; inherits: false; initial-value: 22%; }
@property --shine-y   { syntax: '<percentage>'; inherits: false; initial-value: 38%; }
@property --shine-x-2 { syntax: '<percentage>'; inherits: false; initial-value: 80%; }
@property --shine-y-2 { syntax: '<percentage>'; inherits: false; initial-value: 65%; }

.grid-shine, .grid-shine-2 {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.92) var(--dot-size), transparent calc(var(--dot-size) + 0.2px));
  background-size: var(--dot-spacing) var(--dot-spacing);
  opacity: 0;
}
.grid-shine {
  -webkit-mask-image: radial-gradient(ellipse 52% 46% at var(--shine-x) var(--shine-y), black 0%, transparent 70%);
  mask-image: radial-gradient(ellipse 52% 46% at var(--shine-x) var(--shine-y), black 0%, transparent 70%);
  animation: fadeIn 2.2s ease 2.0s forwards, shineRoam 24s ease-in-out 2.0s infinite;
}
.grid-shine-2 {
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.88) var(--dot-size), transparent calc(var(--dot-size) + 0.2px));
  -webkit-mask-image: radial-gradient(ellipse 48% 44% at var(--shine-x-2) var(--shine-y-2), black 0%, transparent 70%);
  mask-image: radial-gradient(ellipse 48% 44% at var(--shine-x-2) var(--shine-y-2), black 0%, transparent 70%);
  animation: fadeIn 2.2s ease 2.0s forwards, shineRoam2 24s ease-in-out 2.0s infinite;
}
@keyframes shineRoam {
  0%   { --shine-x: 22%; --shine-y: 38%; }
  25%  { --shine-x: 76%; --shine-y: 24%; }
  50%  { --shine-x: 72%; --shine-y: 72%; }
  75%  { --shine-x: 18%; --shine-y: 76%; }
  100% { --shine-x: 22%; --shine-y: 38%; }
}
@keyframes shineRoam2 {
  0%   { --shine-x-2: 80%; --shine-y-2: 65%; }
  25%  { --shine-x-2: 27%; --shine-y-2: 73%; }
  50%  { --shine-x-2: 31%; --shine-y-2: 25%; }
  75%  { --shine-x-2: 79%; --shine-y-2: 21%; }
  100% { --shine-x-2: 80%; --shine-y-2: 65%; }
}

/* ─── CURSOR GLOW + GRAIN ──────────────────────────────────── */
#cursor-glow {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  animation: fadeIn 2.0s ease 1.2s forwards;
}
.grain-overlay {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  width: 100%;
  height: 100%;
  opacity: 0.048;
}
@keyframes fadeIn { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .grid, .grid-white, .grid-shine, .grid-shine-2, #cursor-glow { animation: none; opacity: 1; }
  .grid-shine, .grid-shine-2 { opacity: 0.5; }
  html { scroll-behavior: auto; }
}

/* ═══════════════════════════════════════════════════════════════
   NAV
   ═══════════════════════════════════════════════════════════════ */
.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px clamp(18px, 5vw, 40px);
  background: #0A0A0A;
  box-shadow: 0 1px 0 rgba(255,255,255,0.06), 0 10px 30px -18px rgba(0,0,0,0.7);
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: #ffffff;
  font-weight: 900;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.nav-brand .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(255,255,255,0.10);
}
.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(10px, 2.4vw, 26px);
  flex-wrap: wrap;
  justify-content: flex-end;
}
.nav-links a {
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(255,255,255,0.62);
  text-decoration: none;
  transition: color 0.2s ease;
  white-space: nowrap;
}
.nav-links a:hover { color: #ffffff; }
.nav-links a.is-active { color: #ffffff; border-bottom: 2px solid #ffffff; padding-bottom: 2px; }
.nav-links a.ext::after { content: " ↗"; opacity: 0.5; font-weight: 600; }

/* Hamburger toggle — hidden on desktop, shown ≤820px */
.nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: -8px -8px -8px 0;
  background: transparent;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}
.nav-toggle:focus-visible { outline: 2px solid rgba(255,255,255,0.55); outline-offset: 2px; }
.nav-toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: #ffffff;
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav-toggle-bar + .nav-toggle-bar { margin-top: 5px; }

@media (max-width: 820px) {
  .nav { flex-wrap: nowrap; }
  .nav-toggle { display: inline-flex; }
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #0A0A0A;
    padding: 0 clamp(18px, 5vw, 40px);
    border-top: 1px solid rgba(255,255,255,0.06);
    box-shadow: 0 18px 36px -20px rgba(0,0,0,0.75);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: max-height 0.32s ease, opacity 0.22s ease, padding 0.32s ease;
  }
  .nav-links a {
    width: 100%;
    font-size: 12px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(255,255,255,0.07);
  }
  .nav-links a:last-child { border-bottom: 0; }
  .nav-links a.is-active { border-bottom: 1px solid rgba(255,255,255,0.07); padding-bottom: 16px; }
  .nav.is-open .nav-links {
    max-height: 80vh;
    opacity: 1;
    padding: 4px clamp(18px, 5vw, 40px) 14px;
    pointer-events: auto;
  }
  .nav.is-open .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav.is-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
  .nav.is-open .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ═══════════════════════════════════════════════════════════════
   LAYOUT
   ═══════════════════════════════════════════════════════════════ */
main { position: relative; z-index: 2; }
.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(14px, 3vw, 32px) clamp(18px, 5vw, 40px) 120px;
}
.kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 18px;
}
.hero {
  padding: clamp(12px, 3vw, 28px) 0 clamp(6px, 1.6vw, 16px);
}
.hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(34px, 6.4vw, 62px);
  line-height: 1.04;
  letter-spacing: -0.01em;
  max-width: 16ch;
}
.hero h1 em { font-style: italic; }
.hero .lede {
  margin-top: 22px;
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.6;
  color: #0a0a0ac9;
  max-width: 60ch;
  font-weight: 500;
}

/* Hero intro — Lucia avatar beside the lede (Company page) */
.hero-intro {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-top: 24px;
}
.hero-intro .lede { margin-top: 0; font-size: 15px; }
.hero-avatar {
  flex: 0 0 auto;
  width: 150px;
  height: 150px;
  object-fit: contain;
}

/* Ember bloom around the headshot — the landing-page input's ripple
   system (same amber, same 5.2s cycle, three rings staggered in
   thirds) adapted to a circle. Rings emerge from the medallion's
   edge and dissipate outward; blur radii are scaled down from the
   landing page's (25/50/120/220) to suit a 150px element. */
.avatar-bloom {
  --glow-r: 255;
  --glow-g: 152;
  --glow-b:  20;
  --bloom-edge-opacity: 1.00;
  --bloom-near-opacity: 0.80;
  --bloom-mid-opacity:  0.45;
  --bloom-halo-opacity: 0.10;
  --bloom-edge-blur: 24px;
  --bloom-near-blur: 52px;
  --bloom-mid-blur:  120px;
  --bloom-halo-blur: 220px;
  --bloom-near-spread: 5px;
  --bloom-mid-spread:  9px;
  --pulse-duration: 5.2s;
  position: relative;
  flex: 0 0 auto;
  width: 150px;
  height: 150px;
}
.avatar-bloom .hero-avatar {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
}
.avatar-ripple {
  position: absolute;
  inset: 3%;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  box-shadow:
    0 0 var(--bloom-edge-blur) 0                        rgba(var(--glow-r), var(--glow-g), var(--glow-b), var(--bloom-edge-opacity)),
    0 0 var(--bloom-near-blur) var(--bloom-near-spread) rgba(var(--glow-r), var(--glow-g), var(--glow-b), var(--bloom-near-opacity)),
    0 0 var(--bloom-mid-blur)  var(--bloom-mid-spread)  rgba(var(--glow-r), var(--glow-g), var(--glow-b), var(--bloom-mid-opacity)),
    0 0 var(--bloom-halo-blur) 0                        rgba(var(--glow-r), var(--glow-g), var(--glow-b), var(--bloom-halo-opacity));
  animation: avatarRippleOut var(--pulse-duration) cubic-bezier(.22,.61,.36,1) infinite;
  transform-origin: center center;
  will-change: opacity, transform;
  opacity: 0;
}
.avatar-ripple.r2 { animation-delay: calc(var(--pulse-duration) / -3); }
.avatar-ripple.r3 { animation-delay: calc(var(--pulse-duration) / -3 * 2); }
@keyframes avatarRippleOut {
  0%   { opacity: 0; transform: scale(0.96); }
  15%  { opacity: 1; transform: scale(1.00); }
  100% { opacity: 0; transform: scale(1.22); }
}
@media (prefers-reduced-motion: reduce) {
  .avatar-ripple { animation: none; transform: none; opacity: 0.45; }
  .avatar-ripple.r2, .avatar-ripple.r3 { display: none; }
}
@media (max-width: 600px) {
  /* Mobile hero (Company page only — has the avatar pair):
     kicker on top, then avatar (left) + headline (right) as a row,
     then lede and CTAs below spanning the full width. Scoped to
     heroes that actually contain .hero-intro so plain heroes on
     Products / Careers keep their default left-aligned block flow. */
  .hero:has(.hero-intro) {
    display: grid;
    grid-template-columns: 92px 1fr;
    column-gap: 16px;
    row-gap: 0;
    align-items: center;
  }
  .hero:has(.hero-intro) .hero-intro { display: contents; }
  .hero:has(.hero-intro) .kicker { grid-column: 1 / -1; margin-bottom: 34px; }
  .hero:has(.hero-intro) .avatar-bloom {
    grid-column: 1; grid-row: 2;
    width: 92px; height: 92px;
    margin: 0;
    align-self: center;
    /* tighter ember on small screens so it doesn't wash the headline */
    --bloom-edge-blur: 16px;
    --bloom-near-blur: 36px;
    --bloom-mid-blur:  80px;
    --bloom-halo-blur: 150px;
  }
  .hero:has(.hero-intro) .hero-avatar {
    width: 100%; height: 100%;
    margin: 0;
  }
  .hero:has(.hero-intro) h1 {
    grid-column: 2; grid-row: 2;
    font-size: clamp(26px, 7.4vw, 34px);
    line-height: 1.06;
    max-width: none;
    margin: 0;
  }
  .hero:has(.hero-intro) .lede { grid-column: 1 / -1; margin-top: 32px; font-size: 15px; }
  .hero:has(.hero-intro) .hero-cta { grid-column: 1 / -1; margin-top: 28px; }

  /* Plain heroes (no avatar) — Products / Careers: keep block flow */
  .hero:not(:has(.hero-intro)) h1 {
    font-size: clamp(28px, 7.4vw, 38px);
    line-height: 1.06;
    max-width: none;
  }
}

/* Card / panel */
.card {
  position: relative;
  background: var(--panel);
  border-radius: 5px;
  padding: clamp(22px, 3.4vw, 38px);
  box-shadow: 0 1px 0 rgba(10,10,10,0.04), 0 24px 60px -34px rgba(10,10,10,0.42);
  margin-top: 22px;
}
.card-corner-icon {
  position: absolute;
  top: clamp(47px, 5vw, 63px);
  right: clamp(47px, 5vw, 63px);
  width: 28px; height: 28px;
  color: var(--ink-soft);
  stroke-width: 1.5;
}
.card.dark .card-corner-icon { color: #fff; }
.card:has(> .card-corner-icon) > h3 { padding-right: 64px; }
@media (min-width: 981px) {
  .trio .card .card-corner-icon { top: 86px; right: 32px; }
}
.card.dark {
  background: var(--eval-panel);
  color: rgba(255,255,255,0.92);
  box-shadow: 0 1px 0 rgba(0,0,0,0.4), 0 30px 70px -34px rgba(0,0,0,0.7);
}
.card.dark .section-title,
.card.dark h2, .card.dark h3 { color: #fff; }
.card.dark p { color: rgba(255,255,255,0.74); }
.card.dark .meta-row { border-color: rgba(255,255,255,0.12); }
.card.dark .meta-row dt { color: rgba(255,255,255,0.5); }
.card.dark .meta-row dd { color: rgba(255,255,255,0.92); }
.card.dark a { color: #FFC23D; }

.section-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(24px, 3.6vw, 34px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin-bottom: 14px;
}
.card h3 {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  margin: 22px 0 8px;
}
.card p { font-size: 15.5px; line-height: 1.62; color: var(--ink-soft); margin-bottom: 12px; font-weight: 500; }
.card p:last-child { margin-bottom: 0; }
.card a { color: var(--ink); font-weight: 700; text-decoration: none; }

.lead-in {
  font-size: 16.5px; line-height: 1.62; color: var(--ink-soft);
  max-width: 64ch; margin-top: 10px; font-weight: 500;
}

/* Section heading on amber */
.band { margin-top: 56px; }
.family-divider {
  border: 0; height: 1px;
  background: linear-gradient(to right, transparent 0%, rgba(10,10,10,0.28) 50%, transparent 100%);
  margin: 28px 0 0;
}
.family-divider + .band { margin-top: 28px; }
.band.tight-after-loop { margin-top: 28px; }
.band > .section-title { max-width: 24ch; }
.band > .lead-in { margin-bottom: 6px; }

/* Stat strip */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--ink-faint);
  border-radius: 5px;
  overflow: hidden;
  margin-top: 22px;
}
@media (max-width: 820px) { .stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .stats { grid-template-columns: 1fr; } }
.stat { background: var(--panel); padding: 28px 28px; }
.stat .n {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800; font-size: clamp(26px, 4vw, 38px);
  line-height: 1; letter-spacing: -0.02em;
}
.stat .stat-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  color: var(--ink-soft);
  stroke-width: 1.5;
}
.stat .l { margin-top: 9px; font-size: 12px; font-weight: 700; color: var(--ink-mute); letter-spacing: 0.02em; line-height: 1.35; }

/* Two-up product grid */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 22px; }
@media (max-width: 760px) { .duo { grid-template-columns: 1fr; } }
.duo .card { margin-top: 0; }

/* Three-up product grid */
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 26px; }
@media (max-width: 980px) { .trio { grid-template-columns: 1fr; } }
.trio .card { margin-top: 0; }

/* Product family — HelloLucia, LLC + its three products */
.product-family { margin: 26px 0 8px; }
.product-family-head {
  font-size: 11px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 12px;
}
.product-family-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.product-family-card {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--ink);
  padding: 14px 16px; border-radius: 4px;
}
.pfc-title { font-size: 13px; font-weight: 800; letter-spacing: 0.02em; color: #fff; }
.pfc-sub { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #FFC23D; }
@media (max-width: 700px) { .product-family-row { grid-template-columns: 1fr; } }

/* badge / chip */
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 6px 11px; border-radius: 4px;
  background: rgba(10,10,10,0.06); color: var(--ink-soft);
}
.chip.amber { background: rgba(255,152,20,0.18); color: #7a4a00; }
.chip.ink { background: var(--ink); color: #FFC23D; }
.chip .pulse {
  position: relative;
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #28a745;
}
.chip .pulse::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #28a745;
  animation: chipPulseRing 2.2s cubic-bezier(.22,.61,.36,1) infinite;
}
@keyframes chipPulseRing {
  0%   { transform: scale(1);   opacity: 0.55; }
  70%  { transform: scale(3);   opacity: 0; }
  100% { transform: scale(3);   opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .chip .pulse::before { animation: none; }
}

/* CTA buttons */
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 800; letter-spacing: 0.04em;
  padding: 13px 20px; border-radius: 5px; text-decoration: none;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}
.btn.primary { background: var(--ink); color: #fff; }
.btn.primary:hover { transform: translateY(-1px); box-shadow: 0 12px 26px -12px rgba(10,10,10,0.6); }
.btn.ghost { background: var(--panel); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink-faint); }
.btn.ghost:hover { box-shadow: inset 0 0 0 1px rgba(10,10,10,0.32); transform: translateY(-1px); }
.btn .arr { width: 1em; height: 1em; transition: transform 0.16s ease; }
.btn:hover .arr { transform: translate(2px,-2px); }

/* Anchor-buttons inside cards must opt out of the .card-link underline */
.card .btn { text-decoration: none; }
/* Ghost buttons keep ink-on-white treatment even on dark cards (not yellow) */
.card.dark .btn.ghost,
.card.dark .btn.ghost:hover { color: var(--ink); text-decoration: none; }

/* Hero CTA dock — glassy ink with a diagonal alpha fade.
   Selector bumped to .card.dark.hero-cta so it beats .card.dark on
   the background property (otherwise --eval-panel wins by specificity). */
.card.dark.hero-cta {
  margin-top: 30px;
  padding: clamp(18px, 3vw, 26px);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.07) 0%, transparent 30%),
    linear-gradient(135deg, rgba(10,10,10,0.90) 0%, rgba(10,10,10,0.52) 100%);
  -webkit-backdrop-filter: blur(6px) saturate(135%);
  backdrop-filter: blur(6px) saturate(135%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.07), 0 22px 50px -34px rgba(0,0,0,0.6);
}
.hero-cta .btn-row {
  margin-top: 0;
  justify-content: center;
  gap: 14px;
}
.hero-cta .btn-row .btn {
  flex: 0 0 auto;
  min-width: 240px;
  justify-content: center;
}
.hero-cta .btn.primary {
  background: #FFBC17;
  color: var(--ink);
}
.hero-cta .btn.primary:hover {
  background: #FFCB45;
  box-shadow: 0 12px 26px -12px rgba(0,0,0,0.6);
}
/* Leading icons in hero CTAs: subtle scale-up on hover instead of the
   trailing-arrow translate (which only makes sense for icons after text) */
.hero-cta .btn:hover .arr { transform: scale(1.12); }
@media (max-width: 600px) {
  .hero-cta .btn-row { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { justify-content: center; width: 100%; }
}

/* definition / meta rows (contact + facts) */
.meta-row { display: grid; grid-template-columns: 180px 1fr; gap: 6px 24px; padding: 14px 0; border-top: 1px solid var(--ink-faint); }
.meta-row:first-of-type { border-top: none; }
.meta-row dt { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); padding-top: 2px; }
.meta-row dd { font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.5; }
.meta-row dd a { font-weight: 700; }
@media (max-width: 620px) { .meta-row { grid-template-columns: 1fr; gap: 3px; } }

/* bullet list, restrained */
.feat { list-style: none; margin-top: 8px; }
.feat li { position: relative; padding-left: 22px; font-size: 15px; line-height: 1.58; color: var(--ink-soft); font-weight: 500; margin-bottom: 9px; }
.feat li::before { content: ""; position: absolute; left: 4px; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); opacity: 0.5; }
.card.dark .feat li { color: rgba(255,255,255,0.78); }
.card.dark .feat li::before { background: #FFC23D; opacity: 0.9; }

/* code-ish loop block */
.loop {
  font-family: 'Plus Jakarta Sans', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; font-weight: 600; line-height: 1.9; letter-spacing: 0.01em;
  color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.04);
  border-radius: 5px; padding: 18px 20px; margin-top: 14px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}
.loop .ar { color: #FFC23D; }

/* ──────────────────────────────────────────────────────────
   Product switch — segmented control with sliding indicator
   ──────────────────────────────────────────────────────────*/
.switch {
  --ind-left: 6px;
  --ind-width: 0px;
  position: relative;
  display: inline-flex;
  gap: 2px;
  padding: 6px;
  background: rgba(10,10,10,0.07);
  border-radius: 999px;
  margin-top: 8px;
  isolation: isolate;
}
.switch-indicator {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: var(--ind-left);
  width: var(--ind-width);
  background: var(--panel);
  border-radius: 999px;
  box-shadow: 0 4px 14px -6px rgba(10,10,10,0.42);
  transition: left 0.42s cubic-bezier(.22,.61,.36,1),
              width 0.42s cubic-bezier(.22,.61,.36,1),
              background 0.32s ease;
  z-index: 0;
  pointer-events: none;
}
.switch.is-eval .switch-indicator { background: var(--ink); }
.switch-tab {
  position: relative;
  z-index: 1;
  font: inherit;
  cursor: pointer;
  border: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  transition: color 0.18s ease;
  white-space: nowrap;
}
.switch-tab[aria-selected="true"] { color: var(--ink); }
.switch-tab.eval[aria-selected="true"] { color: #FFC23D; }
.switch-icon { width: 14px; height: 14px; stroke-width: 2; flex-shrink: 0; }
.switch-label.short { display: none; }
@media (max-width: 600px) {
  .switch { width: 100%; }
  .switch-tab { flex: 1 1 0; justify-content: center; padding: 10px 8px; gap: 6px; }
  .switch-label.long { display: none; }
  .switch-label.short { display: inline; }
}

.panel-pane { display: none; }
.panel-pane.is-on { display: block; animation: paneIn 0.4s ease; }
@keyframes paneIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ──────────────────────────────────────────────────────────
   Eval Labs hero — luxurious logo placement
   ──────────────────────────────────────────────────────────*/
.eval-logo-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 34px 20px 28px;
  margin: 0 0 26px;
  border-radius: 5px;
  background:
    radial-gradient(ellipse 60% 80% at 50% 50%, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 70%),
    linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0) 100%);
  overflow: hidden;
}
.eval-logo-stage::before,
.eval-logo-stage::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 38%;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.18), transparent);
  pointer-events: none;
}
.eval-logo-stage::before { left: 0; }
.eval-logo-stage::after  { right: 0; }
@media (max-width: 700px) {
  .eval-logo-stage::before,
  .eval-logo-stage::after { display: none; }
}
.eval-mark {
  display: block;
  width: clamp(150px, 22vw, 220px);
  height: clamp(150px, 22vw, 220px);
  filter: drop-shadow(0 12px 28px rgba(0,0,0,0.45));
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.22,.61,.36,1);
}
.eval-mark.is-loaded {
  opacity: 1;
  transform: scale(1);
}

/* ──────────────────────────────────────────────────────────
   Eval Labs core loop — 8-step flow diagram
   ──────────────────────────────────────────────────────────*/
.loop-flow {
  margin: 18px 0 0;
  padding: 22px 22px 26px;
  list-style: none;
  counter-reset: loopstep;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  background: rgba(255,255,255,0.05);
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}
.loop-step {
  counter-increment: loopstep;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 14px 14px;
  background: rgba(255,255,255,0.05);
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.loop-step:hover {
  background: rgba(255,255,255,0.08);
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px rgba(255,194,61,0.32);
}
.loop-step::before {
  content: counter(loopstep, decimal-leading-zero);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: #FFC23D;
}
.loop-step .step-icon {
  width: 22px;
  height: 22px;
  color: #fff;
  stroke-width: 1.5;
}
.loop-step .step-label {
  font-size: 12.5px;
  line-height: 1.42;
  color: rgba(255,255,255,0.82);
  font-weight: 500;
}
/* Right-side chevron between steps (skipped on the last in each row) */
.loop-step:not(:nth-child(4n))::after {
  content: "";
  position: absolute;
  right: -10px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 1.6px solid rgba(255,194,61,0.65);
  border-top: 1.6px solid rgba(255,194,61,0.65);
  transform: translateY(-50%) rotate(45deg);
  pointer-events: none;
}
@media (max-width: 880px) {
  .loop-flow { grid-template-columns: repeat(2, 1fr); }
  .loop-step:not(:nth-child(4n))::after { display: none; }
  .loop-step:not(:nth-child(2n))::after {
    content: "";
    position: absolute;
    right: -8px;
    top: 50%;
    width: 8px; height: 8px;
    border-right: 1.6px solid rgba(255,194,61,0.65);
    border-top: 1.6px solid rgba(255,194,61,0.65);
    transform: translateY(-50%) rotate(45deg);
  }
}
@media (max-width: 520px) {
  .loop-flow { grid-template-columns: 1fr; }
  .loop-step::after { display: none !important; }
}
.loop-cycle-note {
  margin-top: 18px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 5px;
  background: rgba(255,194,61,0.08);
  box-shadow: inset 0 0 0 1px rgba(255,194,61,0.22);
  color: rgba(255,255,255,0.84);
  font-size: 12.5px;
  line-height: 1.5;
  font-weight: 500;
}
.loop-cycle-note svg,
.loop-cycle-note [data-lucide] {
  width: 18px;
  height: 18px;
  color: #FFC23D;
  flex-shrink: 0;
  stroke-width: 1.7;
}

/* ──────────────────────────────────────────────────────────
   "Why three, not one" — flat three-column typographic trio
   No housing, no connecting lines. Hierarchy carries the
   relationship; the judge column is color-differentiated only.
   ──────────────────────────────────────────────────────────*/
.trio-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 4vw, 56px);
  margin: clamp(32px, 5vw, 52px) auto clamp(20px, 3vw, 32px);
  max-width: 820px;
  align-items: start;
  text-align: center;
}
.trio-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.trio-icon {
  width: 40px;
  height: 40px;
  color: var(--ink);
  stroke-width: 1.7;
}
.trio-item.judge .trio-icon { color: #b07906; }
.trio-name {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: var(--ink);
}
.trio-role {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 24ch;
  font-weight: 500;
}
@media (max-width: 700px) {
  .trio-list {
    grid-template-columns: 1fr;
    gap: clamp(28px, 5vw, 40px);
    max-width: 360px;
  }
  .trio-item { gap: 12px; }
}

/* ──────────────────────────────────────────────────────────
   Eval Labs brand transition — when on the Eval Labs tab the
   page subtly shifts cooler/darker; an ink-blot expands from
   the tab to mark the entry. Reverses on exit.
   ──────────────────────────────────────────────────────────*/
.brand-burst {
  position: fixed;
  z-index: 999;
  pointer-events: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  background: radial-gradient(circle at 50% 50%,
              var(--eval-burst-a, #7b5cff) 0%,
              var(--eval-burst-b, #00e0ff) 70%,
              transparent 100%);
  mix-blend-mode: multiply;
}
.brand-burst.is-bursting {
  animation: brandBurst 1100ms cubic-bezier(.22,.61,.36,1) forwards;
}
.brand-burst.is-leaving {
  animation: brandBurstOut 700ms cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes brandBurst {
  0%   { transform: translate(-50%, -50%) scale(0); opacity: 0.0; }
  18%  { opacity: 0.95; }
  60%  { opacity: 0.85; }
  100% { transform: translate(-50%, -50%) scale(140); opacity: 0; }
}
@keyframes brandBurstOut {
  0%   { transform: translate(-50%, -50%) scale(60); opacity: 0.7; }
  100% { transform: translate(-50%, -50%) scale(160); opacity: 0; }
}

/* Palette shift while on the Eval Labs tab. Body bg flips to a
   deep navy-violet that extends the welcome.evaluationlabs.ai
   atmosphere, dot grids hide (their dark dots disappear on dark bg
   anyway), and dependent surfaces (hero text, switch, footer
   landmark) flip to light variants so everything stays legible. */
body {
  transition: background 0.7s ease;
}
body.is-eval-mode {
  background: #16142e;
}
body.is-eval-mode .grain-overlay { opacity: 0.05; }
body.is-eval-mode .card.dark {
  background: #1e1a40;
  box-shadow:
    0 0 0 1px rgba(160, 90, 240, 0.22),
    0 26px 80px -28px rgba(0, 0, 0, 0.78);
}
body.is-eval-mode .chip.ink {
  background: rgba(160, 90, 240, 0.20);
  color: #f7d4ff;
}
#cursor-glow { transition: filter 0.9s ease; }
body.is-eval-mode #cursor-glow {
  filter: hue-rotate(200deg) saturate(1.35) brightness(0.95);
}
.grain-overlay { transition: opacity 0.6s ease; }
.card.dark, .chip.ink {
  transition: background 0.7s ease, box-shadow 0.7s ease, color 0.7s ease;
}

/* Dot grids — dim significantly in eval-mode so the dots stay
   ambient but stop competing with the lede / kicker / h1 text. */
.grid, .grid-white, .grid-shine, .grid-shine-2 {
  transition: opacity 0.7s ease;
}
body.is-eval-mode .grid { opacity: 0; }
body.is-eval-mode .grid-white,
body.is-eval-mode .grid-shine,
body.is-eval-mode .grid-shine-2 { opacity: 0.16; }

/* Hero text — flip to light variants so it stays legible on navy */
.hero h1, .hero .kicker, .hero .lede {
  transition: color 0.7s ease;
}
body.is-eval-mode .hero h1,
body.is-eval-mode .hero h1 em { color: #ffffff; }
body.is-eval-mode .hero .kicker { color: rgba(255,255,255,0.55); }
body.is-eval-mode .hero .lede   { color: rgba(255,255,255,0.78); }

/* Switch — solid charcoal pill on the dark surface so the dot
   grid can't bleed through behind the inactive tab labels. */
.switch, .switch-tab { transition: background 0.6s ease, color 0.6s ease; }
body.is-eval-mode .switch {
  background: #0e0b22;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}
body.is-eval-mode .switch-tab { color: rgba(255,255,255,0.72); }
body.is-eval-mode .switch-tab[aria-selected="true"] { color: var(--ink); }
body.is-eval-mode .switch-tab.eval[aria-selected="true"] { color: #FFC23D; }

/* Footer — light text + light hairlines */
.site-foot .fmark, .site-foot .flinks a, .site-foot .fnote {
  transition: color 0.7s ease;
}
.foot-landmark::before, .foot-landmark::after {
  transition: background 0.7s ease;
}
body.is-eval-mode .site-foot .fmark { color: rgba(255,255,255,0.92); }
body.is-eval-mode .site-foot .flinks a { color: rgba(255,255,255,0.55); }
body.is-eval-mode .site-foot .flinks a:hover { color: rgba(255,255,255,0.88); }
body.is-eval-mode .site-foot .fnote { color: rgba(255,255,255,0.42); }
body.is-eval-mode .foot-landmark::before,
body.is-eval-mode .foot-landmark::after {
  background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.20) 50%, transparent 100%);
}

@media (prefers-reduced-motion: reduce) {
  .brand-burst { display: none; }
  body, body * { transition: none !important; }
}

/* footer */
.site-foot {
  position: relative; z-index: 2;
  margin: 0 auto;
  max-width: var(--maxw);
  padding: 0 clamp(18px, 5vw, 40px) 60px;
  display: flex; flex-wrap: wrap; gap: 18px 30px; align-items: baseline; justify-content: space-between;
}
.foot-landmark {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 4px 0 22px;
}
.foot-landmark::before,
.foot-landmark::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent 0%, rgba(10,10,10,0.28) 50%, transparent 100%);
}
.foot-headshot {
  flex-shrink: 0;
  width: 96px; height: 96px;
  border-radius: 50%;
  display: block;
  box-shadow: 0 0 0 3px rgba(255,194,61,0.55), 0 10px 24px -10px rgba(10,10,10,0.35);
}
/* Eval-mode footer headshot crossfade — both images preloaded, opacity swap */
.foot-headshot-stack {
  position: relative;
  flex-shrink: 0;
  width: 96px; height: 96px;
}
.foot-headshot-stack .foot-headshot {
  position: absolute; inset: 0;
  transition: opacity 0.7s ease, box-shadow 0.7s ease;
}
.foot-headshot-eval {
  opacity: 0;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 18px 40px -14px rgba(123,92,255,0.55);
}
body.is-eval-mode .foot-headshot-default { opacity: 0; }
body.is-eval-mode .foot-headshot-eval { opacity: 1; }
.site-foot .fmark { font-size: 11px; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); }
.site-foot .flinks { display: flex; flex-wrap: wrap; gap: 18px; }
.site-foot .flinks a { font-size: 10.5px; letter-spacing: 0.13em; text-transform: uppercase; font-weight: 600; color: var(--ink-mute); text-decoration: none; }
.site-foot .flinks a:hover { color: var(--ink-soft); }
.site-foot .fnote { width: 100%; font-size: 11.5px; color: var(--ink-mute); font-weight: 500; line-height: 1.5; }

/* Surface grid — two product columns (Lucia | Evaluation Labs) on
   desktop, single column on mobile. Each column is anchored by a
   serif tag and a small caption, then 2 stacked surface items. */
.surface-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 28px;
}
@media (max-width: 720px) {
  .surface-grid { grid-template-columns: 1fr; }
}

.surface-column {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 22px 22px 24px;
  border-radius: 6px;
  background: rgba(10, 10, 10, 0.025);
}
.surface-column.lucia {
  background: rgba(255, 188, 23, 0.07);
}
.surface-column.eval {
  background: rgba(30, 64, 175, 0.05);
}

.surface-col-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 2px;
}
.surface-col-tag {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--ink);
}
.surface-col-desc {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.surface-item { display: flex; flex-direction: column; gap: 12px; }
.surface-eyebrow {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.surface-item a.surface-btn {
  align-self: stretch;
  width: 100%;
  justify-content: center;
  font-size: 14.5px;
}
.surface-desc {
  margin: -4px 0 0;
  font-size: 13px;
  line-height: 1.58;
  font-weight: 500;
  color: #151517;
}

/* Tactile surface-link buttons (the "What you're looking at" URLs) */
a.surface-btn {
  /* ═══════════ STROKE — TWEAK THESE LIVE IN DEVTOOLS ═══════════
     OPTION A · single hex stroke:
        edit  --surface-stroke-color  (DevTools shows a color swatch)
     OPTION B · gradient stroke:
        replace  --surface-stroke  with any gradient, e.g.
        --surface-stroke: linear-gradient(135deg, #FFBC17, #d37b00);
     Other knobs: --surface-stroke-w (thickness), --surface-fill (inside)
     ════════════════════════════════════════════════════════════ */
  --surface-fill: #f5f5f5;
  --surface-stroke-color: #d8d8d8;
  --surface-stroke: linear-gradient(135deg, var(--surface-stroke-color), var(--surface-stroke-color));
  --surface-stroke-w: 1px;

  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.005em;
  color: var(--ink);
  text-decoration: none;
  padding: 9px 15px;
  border-radius: 4px;
  border: var(--surface-stroke-w) solid transparent;
  background:
    linear-gradient(var(--surface-fill), var(--surface-fill)) padding-box,
    var(--surface-stroke) border-box;
  transition: color 0.25s ease, background 0.25s ease;
}
a.surface-btn .arr {
  width: 14px;
  height: 14px;
  opacity: 0.4;
  transition: opacity 0.25s ease;
}
a.surface-btn:hover {
  --surface-fill: var(--ink);
  --surface-stroke: linear-gradient(var(--ink), var(--ink));
  color: #FFC23D;
}
a.surface-btn:hover .arr { opacity: 0.85; }
a.surface-btn:active { --surface-fill: #000; --surface-stroke: linear-gradient(#000, #000); }

/* Per-column button color treatments — branded fill + flip on hover */
.surface-column.lucia a.surface-btn {
  --surface-fill: var(--ink);
  --surface-stroke: linear-gradient(var(--ink), var(--ink));
  color: #ffffff;
}
.surface-column.lucia a.surface-btn:hover {
  --surface-fill: #FFBC17;
  --surface-stroke: linear-gradient(#FFBC17, #FFBC17);
  color: var(--ink);
}
.surface-column.eval a.surface-btn {
  --surface-fill: #0F172A;
  --surface-stroke: linear-gradient(#0F172A, #0F172A);
  color: #ffffff;
}
.surface-column.eval a.surface-btn:hover {
  --surface-fill: #93C5FD;
  --surface-stroke: linear-gradient(#93C5FD, #93C5FD);
  color: #0F172A;
}
/* Branded surface buttons keep their lucide icon fully white in both states */
.surface-column a.surface-btn .arr {
  opacity: 1;
  color: #ffffff;
}
.surface-column a.surface-btn:hover .arr {
  opacity: 1;
  color: #ffffff;
}

/* reveal-on-scroll */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.7s cubic-bezier(.22,.61,.36,1), transform 0.7s cubic-bezier(.22,.61,.36,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }