@font-face {
  font-family: 'Geist';
  src: url('./assets/fonts/Geist-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: 'Geist Mono';
  src: url('./assets/fonts/GeistMono-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --bg: #130d0d;
  --bg-deep: #130d0d;
  --surface: #130d0d;
  --surface-2: #130d0d;
  --depth: #130d0d;
  --ink: #f6efea;
  --soft: #f6efea;
  --muted: #b8aca6;
  --dim: #7f7470;
  --mint: #36ffab;
  --mint-core: #0e8f61;
  --signal-ink: #01231e;
  --execution: #ff8a3d;
  --heat: #ff4d5e;
  --brand-favicon-yellow: #ffc44d;
  --warning: var(--brand-favicon-yellow);
  --line: rgba(246, 239, 234, 0.12);
  --line-bright: rgba(246, 239, 234, 0.24);
  --line-brown: rgba(210, 134, 84, 0.2);
  --line-brown-soft: rgba(210, 134, 84, 0.105);
  --line-brown-faint: rgba(210, 134, 84, 0.062);
  --panel: rgba(19, 13, 13, 0.72);
  --panel-strong: rgba(19, 13, 13, 0.86);
  --paper-rgb: 246, 239, 234;
  --field-rgb: 19, 13, 13;
  --ink-rgb: 19, 13, 13;
  --surface-rgb: 19, 13, 13;
  --line-brown-rgb: 210, 134, 84;
  --signal-rgb: 54, 255, 171;
  --execution-rgb: 255, 138, 61;
  --heat-rgb: 255, 77, 94;
  --purple: 255, 138, 61;
  --cta-bg-image: url('./assets/brand/backgrounds/footer-cta-bg-1.png');
  --cta-bg-position: center;
  --cta-art-filter: saturate(1.04) contrast(1.02) brightness(1);
  --cta-center-overlay: 0.66;
  --cta-side-overlay: 0.9;
  --cta-mid-overlay: 0.28;
  --cta-bottom-overlay: 0.9;
  --max: 1280px;
  --gutter: 24px;
  --nav-h: 76px;
  --section-pad-y: clamp(132px, 9vw, 156px);
  --section-pad-y-tight: clamp(84px, 6.6vw, 104px);
  --section-head-gap: clamp(68px, 5.8vw, 88px);
  --glass-line: var(--line);
  --sans:
    'Geist', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

:root[data-cta-bg='2'] {
  --cta-bg-image: url('./assets/brand/backgrounds/footer-cta-bg-2.png');
  --cta-bg-position: center;
  --cta-art-filter: saturate(1.12) contrast(1.04) brightness(1.32);
  --cta-center-overlay: 0.48;
  --cta-side-overlay: 0.78;
  --cta-mid-overlay: 0.14;
  --cta-bottom-overlay: 0.78;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background:
    linear-gradient(180deg, rgba(var(--execution-rgb), 0.025), transparent 360px), var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.36'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  opacity: 0.13;
  mix-blend-mode: screen;
  pointer-events: none;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(
      90deg,
      transparent calc(50% - 640px),
      var(--line-brown-soft) calc(50% - 640px) calc(50% - 639px),
      transparent calc(50% - 639px)
    ),
    linear-gradient(
      90deg,
      transparent calc(50% + 639px),
      var(--line-brown-soft) calc(50% + 639px) calc(50% + 640px),
      transparent calc(50% + 640px)
    ),
    linear-gradient(
      90deg,
      transparent calc(50% - 320px),
      rgba(210, 134, 84, 0.046) calc(50% - 320px) calc(50% - 319px),
      transparent calc(50% - 319px)
    ),
    linear-gradient(
      90deg,
      transparent calc(50% + 319px),
      rgba(210, 134, 84, 0.046) calc(50% + 319px) calc(50% + 320px),
      transparent calc(50% + 320px)
    ),
    repeating-linear-gradient(0deg, transparent 0 79px, rgba(210, 134, 84, 0.026) 80px),
    repeating-linear-gradient(90deg, transparent 0 79px, rgba(210, 134, 84, 0.02) 80px);
  opacity: 0.7;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 94%, transparent);
  mask-image: linear-gradient(90deg, #000 0, #000 94%, transparent);
  pointer-events: none;
}

a {
  color: inherit;
  text-decoration: none;
}
a:focus-visible,
button:focus-visible {
  outline: 1px solid rgba(var(--signal-rgb), 0.78);
  outline-offset: 5px;
}

button {
  font: inherit;
}

img {
  display: block;
  max-width: 100%;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: var(--nav-h);
  border-bottom: 0;
  background:
    linear-gradient(180deg, rgba(var(--field-rgb), 0.56), rgba(var(--field-rgb), 0.22)),
    rgba(var(--surface-rgb), 0.2);
  box-shadow:
    inset 0 1px 0 rgba(var(--paper-rgb), 0.06),
    0 14px 42px rgba(0, 0, 0, 0.18),
    0 0 42px rgba(var(--execution-rgb), 0.035);
  -webkit-backdrop-filter: blur(24px) saturate(145%);
  backdrop-filter: blur(24px) saturate(145%);
}

.nav-inner {
  width: min(var(--max), calc(100% - var(--gutter) * 2));
  height: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 32px;
}

.nav-cta {
  justify-self: end;
}

.logo-composite,
.brand-logo {
  display: inline-flex;
  align-items: center;
}

.logo-composite img,
.brand-logo img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
}

.brand-logo {
  width: 120px;
  height: 28px;
}

.nav-links,
.footer-bottom {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 520;
  letter-spacing: 0;
  text-transform: none;
}

.nav-links a {
  position: relative;
  transition: color 180ms ease;
}

.nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -10px;
  height: 1px;
  background: var(--mint);
  opacity: 0;
  transform: scaleX(0.42);
  transform-origin: center;
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

.nav-links a:hover,
.nav-links a:focus-visible,
.nav-links a.is-active,
.nav-links a[aria-current='page'] {
  color: var(--ink);
}

.nav-links a:hover::after,
.nav-links a:focus-visible::after,
.nav-links a.is-active::after,
.nav-links a[aria-current='page']::after {
  opacity: 0.78;
  transform: scaleX(1);
}

.product-tabs {
  position: sticky;
  top: var(--nav-h);
  z-index: 45;
  display: flex;
  justify-content: center;
  gap: clamp(18px, 4vw, 52px);
  padding: 14px 24px 0;
  background: linear-gradient(180deg, rgba(var(--field-rgb), 0.93), rgba(var(--field-rgb), 0.76));
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}

.product-tab {
  position: relative;
  padding: 8px 2px 14px;
  font-size: 13px;
  color: var(--dim);
  transition: color 200ms ease;
  white-space: nowrap;
}

.product-tab::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--mint);
  transform: scaleX(0);
  transition: transform 240ms ease;
}

.product-tab:hover {
  color: var(--muted);
}
.product-tab.is-on,
.product-tab[aria-current='true'] {
  color: var(--mint);
}
.product-tab.is-on::after,
.product-tab[aria-current='true']::after {
  transform: scaleX(1);
}

.sec {
  position: relative;
  padding: var(--section-pad-y) 0;
  scroll-margin-top: 104px;
}

.sec + .sec {
  border-top: 1px solid var(--line-brown-soft);
}

/* Canonical content shell. Every page measures its content the same way as the
   home page: --max wide, --gutter of breathing room on each side. Page-specific
   shells alias this rather than inventing their own width. */
.shell,
.sec-inner,
.copilot-shell,
.agentic-shell,
.faq-shell,
.dna-shell {
  width: min(var(--max), calc(100% - var(--gutter) * 2));
  margin-right: auto;
  margin-left: auto;
  /* Several sections are flex containers, where the shell would otherwise shrink
     to its content width. Hold the measured width and let the parent centre it. */
  flex: 0 0 auto;
}

/* Flex sections centre their shell; the auto margins above cover block layout. */
.copilot-hero,
.signals-section,
.context-section,
.review-section,
.agentic-hero,
.night-log,
.agent-record,
.agent-mandate {
  justify-content: center;
}

.sec-head {
  display: grid;
  grid-template-columns: minmax(0, 600px) minmax(260px, 400px);
  justify-content: space-between;
  align-items: end;
  gap: 36px;
  margin-bottom: clamp(40px, 5vw, 64px);
}

.sec-head h2 {
  margin: 0;
  font-size: clamp(34px, 4.2vw, 50px);
  line-height: 1.06;
  letter-spacing: -0.045em;
  font-weight: 790;
}

.sec-head p {
  margin: 0;
  color: var(--muted);
  font-size: 16.5px;
  line-height: 1.6;
}

.sec-kicker {
  display: block;
  margin-bottom: 14px;
  font-family: var(--mono);
  font-size: clamp(10px, 1vw, 12px);
  font-weight: 520;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(var(--paper-rgb), 0.68);
}

.sec-kicker b {
  color: var(--execution);
  font-weight: 640;
}

.glass {
  border: 1px solid var(--glass-line);
  border-radius: 16px;
  background: rgba(24, 19, 17, 0.5);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
}

.rise {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 550ms ease,
    transform 680ms cubic-bezier(0.2, 0.9, 0.3, 1);
}
.rise.is-live,
.sec.is-live .rise,
.hero-product.is-live .rise {
  opacity: 1;
  transform: translateY(0);
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

.hero-product {
  --gauge-reserved-y: clamp(360px, 48svh, 420px);
  --gauge-fit: calc(100svh - var(--gauge-reserved-y));
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: calc(var(--nav-h) + clamp(48px, 7vh, 80px)) var(--gutter) clamp(64px, 8vh, 110px);
  overflow: hidden;
}

.hero-product::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 6%;
  width: min(900px, 92vw);
  height: 74%;
  transform: translateX(-50%);
  background: radial-gradient(
    ellipse 52% 46% at 50% 38%,
    rgba(255, 138, 61, 0.08),
    transparent 68%
  );
  pointer-events: none;
}

.hero-product h1 {
  margin: 0 0 10px;
  font-size: clamp(42px, 5.8vw, 78px);
  line-height: 1.02;
  letter-spacing: -0.05em;
  font-weight: 820;
}

.decode {
  color: var(--execution);
  text-shadow: 0 0 34px rgba(var(--execution-rgb), 0.25);
}

.hero-product .lede {
  max-width: 650px;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: clamp(15px, 1.25vw, 18.5px);
  line-height: 1.55;
}

.score-gauge {
  position: relative;
  width: clamp(188px, min(300px, 66vw, var(--gauge-fit)), 300px);
  margin-top: clamp(30px, 4.5svh, 52px);
}

.score-gauge svg {
  display: block;
  width: 100%;
  transform: rotate(165deg);
}
.arc-track,
.arc {
  fill: none;
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: 58.333 100;
}
.arc-track {
  stroke: rgba(246, 239, 234, 0.08);
}
.arc {
  stroke-dasharray: 0 100;
  transition: stroke-dasharray 1400ms cubic-bezier(0.2, 0.8, 0.2, 1);
  filter: drop-shadow(0 0 14px rgba(255, 138, 61, 0.35));
}

.score-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.score-center small {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--dim);
}
.score-center b {
  font-size: clamp(62px, 6vw, 82px);
  font-weight: 830;
  line-height: 1;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, #ff4d5e, #ff8a3d 55%, #ffc44d);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.score-center span {
  max-width: 20ch;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.25;
  color: var(--dim);
}

.archetype {
  margin-top: 14px;
}
.archetype h3 {
  margin: 0;
  font-size: clamp(26px, 2.7vw, 34px);
  font-weight: 790;
  letter-spacing: -0.03em;
}
.archetype h4 {
  margin: 2px 0 0;
  font-size: clamp(16px, 1.6vw, 20px);
  font-weight: 600;
  color: var(--muted);
}
.archetype p {
  max-width: 400px;
  margin: 12px auto 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--dim);
}

.hero-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 26px;
  flex-wrap: wrap;
}

.cta-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 11px 13px 11px 18px;
  overflow: hidden;
  border: 1.6px solid rgba(var(--paper-rgb), 0.08);
  border-radius: 8px;
  background: var(--brand-favicon-yellow);
  color: var(--signal-ink);
  font-size: 12px;
  font-weight: 720;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease;
}

.nav .cta-button {
  min-height: 40px;
  padding: 9px 11px 9px 15px;
  font-size: 11px;
  box-shadow: 0 10px 28px rgba(255, 196, 77, 0.12);
}

.cta-button::before {
  content: '';
  position: absolute;
  inset: -70% -30%;
  background:
    radial-gradient(circle at 20% 20%, rgba(var(--paper-rgb), 0.42), transparent 22%),
    radial-gradient(circle at 80% 50%, rgba(var(--purple), 0.34), transparent 22%);
  opacity: 0;
  transform: translateX(-16%);
  transition:
    opacity 220ms ease,
    transform 400ms ease;
}

.cta-button span,
.cta-button svg {
  position: relative;
  z-index: 1;
}

.cta-button svg {
  width: 22px;
  height: 22px;
  padding: 5px;
  border-radius: 999px;
  background: var(--bg-deep);
  color: var(--brand-favicon-yellow);
  transition: transform 180ms ease;
}

.nav .cta-button svg {
  width: 20px;
  height: 20px;
  padding: 4px;
}

.cta-button:hover,
.cta-button:focus-visible {
  transform: translateY(-2px);
}

.cta-button:hover::before,
.cta-button:focus-visible::before {
  opacity: 1;
  transform: translateX(0);
}

.cta-button:hover svg,
.cta-button:focus-visible svg {
  transform: translateX(2px);
}

.cta-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 22px;
  border: 1px solid var(--line-bright);
  border-radius: 8px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 660;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  transition:
    background 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}

.cta-ghost:hover,
.cta-ghost:focus-visible {
  border-color: rgba(var(--signal-rgb), 0.5);
  background: rgba(var(--signal-rgb), 0.08);
  color: var(--mint);
  transform: translateY(-2px);
}

.bd-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.bd-col {
  padding: 20px 22px 10px;
}
.bd-col-head {
  margin: 0 0 16px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.bd-col-head--edge {
  color: var(--mint);
}
.bd-col-head--gap {
  color: var(--heat);
}

.bd-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  column-gap: 12px;
  row-gap: 8px;
  align-items: center;
  padding: 10px 0 14px;
}

.bd-row + .bd-row {
  border-top: 1px solid var(--line);
}
.bd-label {
  font-size: 13.5px;
  color: rgba(var(--paper-rgb), 0.82);
}
.bd-label i {
  font-style: normal;
  margin-left: 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--dim);
}
.bd-badge {
  padding: 3px 9px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 760;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transform: scale(0.5);
  opacity: 0;
  transition:
    transform 420ms cubic-bezier(0.2, 0.9, 0.3, 1.5) 500ms,
    opacity 300ms ease 500ms;
}
.sec.is-live .bd-badge {
  transform: scale(1);
  opacity: 1;
}
.bd-badge--edge {
  background: rgba(var(--signal-rgb), 0.15);
  color: var(--mint);
}
.bd-badge--gap {
  background: rgba(var(--heat-rgb), 0.18);
  color: var(--heat);
}
.bd-score {
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 740;
  min-width: 34px;
  text-align: right;
}
.bd-bar {
  grid-column: 1 / -1;
  height: 6px;
  border-radius: 999px;
  background: rgba(246, 239, 234, 0.08);
  overflow: hidden;
}
.bd-bar i {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: 999px;
  transition: width 1000ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.bd-bar--edge i {
  background: linear-gradient(90deg, #0e8f61, var(--mint));
  box-shadow: 0 0 12px rgba(var(--signal-rgb), 0.35);
}
.bd-bar--gap i {
  background: linear-gradient(90deg, #7a2230, var(--heat));
  box-shadow: 0 0 12px rgba(var(--heat-rgb), 0.3);
}

.bd-lever {
  display: grid;
  grid-template-columns: auto 1.2fr 1fr;
  gap: 16px 18px;
  align-items: center;
  margin-top: 16px;
  padding: 20px 22px;
  border-radius: 16px;
  border: 1px solid rgba(255, 196, 77, 0.35);
  background: rgba(38, 30, 14, 0.5);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
}

.bd-lever .ico {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: linear-gradient(135deg, #ffc44d, #c07016);
  color: #241703;
  font-size: 16px;
  align-self: start;
}
.bd-lever-copy b {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 720;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--warning);
}
.bd-lever-copy p {
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(246, 234, 214, 0.88);
}
.bd-lever-copy p strong {
  color: #ffe3ae;
  font-weight: 680;
}
.bd-lever-copy small {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--dim);
}
.bd-proj-track {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: rgba(246, 239, 234, 0.08);
  overflow: hidden;
}
.bd-proj-track i {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 999px;
  transition: width 1100ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.bd-proj-track .cur {
  left: 0;
  width: 0%;
  background: linear-gradient(90deg, #ff4d5e, #ff8a3d, #ffc44d);
}
.bd-proj-track .ext {
  left: var(--current-width, 54%);
  width: 0%;
  background: repeating-linear-gradient(
    135deg,
    rgba(54, 255, 171, 0.85) 0 6px,
    rgba(54, 255, 171, 0.35) 6px 12px
  );
  transition-delay: 900ms;
}
.bd-proj-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 9px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--dim);
}
.bd-proj-labels b {
  color: var(--ink);
  font-weight: 700;
}
.bd-proj-labels .mint,
.bd-proj-labels .mint b {
  color: var(--mint);
}

.pat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.pat-col-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 700;
}
.pat-col-head .n {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 760;
}
.pat-col--for .n,
.pat-col--for .sev {
  background: rgba(var(--signal-rgb), 0.14);
  color: var(--mint);
}
.pat-col--against .n,
.pat-col--against .sev {
  background: rgba(var(--heat-rgb), 0.16);
  color: var(--heat);
}
.pat-col--obs .n,
.pat-col--obs .sev {
  background: rgba(246, 239, 234, 0.1);
  color: var(--muted);
}
.pat-item {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 12px;
  padding: 13px 15px;
  margin-bottom: 10px;
}
.pat-item .sev {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 760;
  transform: scale(0.4);
  opacity: 0;
  transition:
    transform 420ms cubic-bezier(0.2, 0.9, 0.3, 1.5),
    opacity 300ms ease;
}
.sec.is-live .pat-item .sev {
  transform: scale(1);
  opacity: 1;
}
.pat-item b {
  display: block;
  font-size: 14.5px;
  font-weight: 680;
}
.pat-item p {
  margin: 4px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--dim);
}
.pat-obs {
  grid-column: 1 / -1;
}
.pat-obs-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.pat-obs-row .pat-item {
  margin-bottom: 0;
}

.risk-legend {
  display: flex;
  gap: 18px;
  margin-bottom: 18px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--dim);
}
.risk-legend i {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 7px;
}
.risk-legend .h i {
  background: var(--mint);
}
.risk-legend .w i {
  background: var(--warning);
}
.risk-legend .c i {
  background: var(--heat);
}
.risk-intro {
  max-width: 780px;
  margin: 0 0 26px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--muted);
}
.risk-intro b {
  color: var(--ink);
  font-weight: 640;
}
.risk-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.risk-cell {
  position: relative;
  padding: 18px 20px;
}
.risk-cell .dot {
  position: absolute;
  left: 20px;
  top: 21px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.risk-cell[data-tone='crit'] .dot {
  background: var(--heat);
  box-shadow: 0 0 9px rgba(var(--heat-rgb), 0.6);
  animation: pulse 1.8s ease-in-out infinite;
}
.risk-cell[data-tone='warn'] .dot {
  background: var(--warning);
  box-shadow: 0 0 9px rgba(255, 196, 77, 0.5);
}
.risk-cell[data-tone='ok'] .dot {
  background: var(--mint);
  box-shadow: 0 0 9px rgba(var(--signal-rgb), 0.5);
}
.risk-cell small {
  display: block;
  padding-left: 17px;
  font-size: 12.5px;
  color: var(--muted);
}
.risk-cell .pct {
  position: absolute;
  right: 20px;
  top: 18px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--dim);
}
.risk-cell b {
  display: block;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: clamp(24px, 2.4vw, 30px);
  font-weight: 740;
  letter-spacing: -0.01em;
}
.risk-cell[data-tone='crit'] b {
  color: var(--heat);
}
.risk-cell[data-tone='warn'] b {
  color: var(--warning);
}
.risk-cell[data-tone='ok'] b {
  color: var(--mint);
}
.risk-cell p {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--dim);
}
.risk-interp {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-top: 18px;
  padding: 17px 20px;
  border-radius: 16px;
  border: 1px solid rgba(255, 196, 77, 0.35);
  background: rgba(38, 30, 14, 0.5);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
}
.risk-interp .ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: linear-gradient(135deg, #ffc44d, #c07016);
  color: #241703;
  font-size: 15px;
}
.risk-interp b {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 720;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--warning);
}
.risk-interp p {
  margin: 5px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(246, 234, 214, 0.8);
}
.risk-interp p strong {
  color: #ffe3ae;
  font-weight: 660;
}

.tr-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}
.tr-kpi {
  padding: 18px 20px;
}
.tr-kpi small {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--muted);
}
.tr-kpi small i {
  font-style: normal;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--dim);
}
.tr-kpi b {
  display: block;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 740;
}
.tr-kpi--pnl b {
  color: var(--mint);
  text-shadow: 0 0 24px rgba(var(--signal-rgb), 0.25);
}
.tr-chart {
  position: relative;
  padding: 22px 22px 16px;
}
.tr-chart-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  gap: 16px;
}
.tr-chart-head span {
  font-size: 14px;
  font-weight: 660;
}
.tr-ranges {
  display: flex;
  gap: 4px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--dim);
}
.tr-ranges i {
  font-style: normal;
  padding: 4px 9px;
  border-radius: 6px;
}
.tr-ranges i.on {
  background: rgba(246, 239, 234, 0.1);
  color: var(--ink);
}
.tr-canvas-wrap {
  position: relative;
  height: clamp(200px, min(30vw, 46svh), 320px);
}
.tr-canvas-wrap canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.tr-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--dim);
}

.lb-filters {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.lb-filters span {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--glass-line);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--dim);
}
.lb-filters span.on {
  background: rgba(246, 239, 234, 0.12);
  color: var(--ink);
  border-color: transparent;
}
.lb-table {
  overflow: hidden;
}
.lb-row {
  display: grid;
  grid-template-columns: 44px 1.3fr 1fr 0.7fr 1.4fr;
  gap: 14px;
  align-items: center;
  padding: 13px 20px;
  font-family: var(--mono);
  font-size: 13px;
  border-top: 1px solid var(--line);
  opacity: 0;
  transform: translateX(-14px);
  transition:
    opacity 450ms ease,
    transform 550ms cubic-bezier(0.2, 0.9, 0.3, 1);
}
.sec.is-live .lb-row {
  opacity: 1;
  transform: translateX(0);
}
.lb-row.lb-head {
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
  border-top: 0;
  background: var(--panel);
}
.lb-row .rank {
  color: var(--dim);
}
.lb-row .pnl.up {
  color: var(--mint);
}
.lb-row .pnl.down {
  color: var(--heat);
}
.lb-row .score {
  font-weight: 740;
}
.lb-row .arch {
  color: var(--muted);
  font-size: 12px;
}
.lb-row.lb-you {
  position: relative;
  background: rgba(var(--signal-rgb), 0.06);
  border-top-color: rgba(var(--signal-rgb), 0.28);
  box-shadow:
    inset 0 -1px 0 rgba(var(--signal-rgb), 0.28),
    inset 3px 0 0 var(--mint);
}
.lb-row.lb-you .wallet,
.lb-row.lb-you .arch {
  color: var(--mint);
}
.lb-you-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--mint);
  color: var(--signal-ink);
  font-size: 9.5px;
  font-weight: 760;
  letter-spacing: 0.1em;
}
.lb-ellipsis {
  padding: 8px 20px;
  color: var(--dim);
  font-family: var(--mono);
  border-top: 1px solid var(--line);
}
.lb-note {
  margin-top: 16px;
  font-size: 13.5px;
  color: var(--dim);
}
.lb-note b {
  color: var(--muted);
  font-weight: 640;
}

.product-cta {
  text-align: center;
  padding-bottom: clamp(110px, 14vh, 170px);
}
.product-cta h2 {
  margin: 0;
  font-size: clamp(38px, 5vw, 62px);
  font-weight: 810;
  letter-spacing: -0.05em;
}
.product-cta p {
  max-width: 520px;
  margin: 16px auto 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
}
.product-cta small {
  display: block;
  margin-top: 18px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--dim);
}

.footer {
  position: relative;
  /* Decorative rails sit in the gutter, OUTSIDE the content column, so they
     frame the footer instead of running through the text. The old value landed
     on exactly the same x as .footer-inner's edges, so the left rail was drawn
     straight through the blurb. Tied to --gutter so it tracks the breakpoints
     instead of fighting them. */
  --footer-rail-x: max(
    calc(var(--gutter) / 2),
    calc((100vw - var(--max)) / 2 - clamp(16px, 2vw, 28px))
  );
  padding: clamp(76px, 7vw, 108px) 0 clamp(34px, 3vw, 46px);
  overflow: hidden;
  border-top: 1px solid var(--line-brown-soft);
  /* Settles a shade below the page so the footer reads as a base layer
     rather than one more section stacked on the end. */
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.34)), var(--bg);
}

.footer::before {
  content: '';
  position: absolute;
  inset: 0;
  display: block;
  /* No horizontal line here: .footer's border-top already draws one at y=0 and
     the two were stacking into a single heavy rule. */
  background:
    linear-gradient(180deg, transparent, rgba(210, 134, 84, 0.055), transparent)
      var(--footer-rail-x) 50% / 1px 100% no-repeat,
    linear-gradient(180deg, transparent, rgba(210, 134, 84, 0.055), transparent)
      calc(100% - var(--footer-rail-x)) 50% / 1px 100% no-repeat;
  pointer-events: none;
}

.footer-inner {
  position: relative;
  z-index: 1;
  width: min(var(--max), calc(100% - var(--gutter) * 2));
  margin: 0 auto;
}

.footer-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(48px, 6vw, 88px);
  align-items: start;
}

.footer-logo {
  width: 156px;
  height: 36px;
}

.footer-about p {
  max-width: 42ch;
  margin-top: 26px;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.62;
}

.footer-social {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 30px;
}

.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(210, 134, 84, 0.18);
  border-radius: 8px;
  background: rgba(26, 17, 16, 0.36);
  color: var(--soft);
  box-shadow: none;
  -webkit-backdrop-filter: blur(14px) saturate(145%);
  backdrop-filter: blur(14px) saturate(145%);
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    color 180ms ease;
}

.social-link svg {
  width: 18px;
  height: 18px;
  display: block;
}

.social-link:hover {
  border-color: rgba(210, 134, 84, 0.34);
  background: rgba(var(--execution-rgb), 0.055);
  color: var(--execution);
  transform: none;
}

.footer-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px clamp(24px, 3vw, 52px);
}

.footer-column h3 {
  margin: 0 0 22px;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 450;
}

.footer-column a,
.footer-column span {
  display: block;
  margin-top: 16px;
  color: var(--muted);
  font-size: 14px;
}

.footer-column a {
  transition: color 180ms ease;
}

.footer-column a:hover,
.footer-column a:focus-visible {
  color: var(--ink);
}

/* The rule needs air on both sides. Copyright and legal sit on one line;
   the risk note drops to its own row underneath so nothing is crushed
   against the divider. */
.footer-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 14px 32px;
  margin-top: clamp(58px, 6vw, 86px);
  padding-top: clamp(28px, 3vw, 38px);
  border-top: 1px solid var(--line-brown-soft);
  color: var(--muted);
  font-size: 12px;
}

/* Copyright left, legal right, risk note on its own row underneath. The
   wrapper is dissolved so all three participate in the same grid. */
.footer-bottom > div:first-child {
  display: contents;
}
.footer-bottom > div:first-child > span {
  grid-column: 1;
  grid-row: 1;
}
.footer-bottom .legal {
  grid-column: 2;
  grid-row: 1;
}

.risk-note {
  grid-column: 1 / -1;
  grid-row: 2;
  max-width: 74ch;
  margin: clamp(16px, 1.8vw, 24px) 0 0;
  color: rgba(var(--paper-rgb), 0.52);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.55;
  letter-spacing: 0;
  text-transform: none;
}

.legal {
  display: flex;
  gap: 18px;
  white-space: nowrap;
}

.legal a {
  color: inherit;
  text-decoration: none;
}

.legal a:hover,
.legal a:focus-visible {
  color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .rise {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Gutters narrow with the viewport so every shell steps down together instead of
   each page overriding its own width at its own breakpoint. */
@media (max-width: 980px) {
  :root {
    --gutter: 20px;
  }
}

@media (max-width: 560px) {
  :root {
    --gutter: 16px;
  }
}

@media (max-width: 860px) {
  .sec-head,
  .bd-grid,
  .pat-grid {
    grid-template-columns: 1fr;
  }
  .bd-lever {
    grid-template-columns: auto 1fr;
  }
  .bd-proj {
    grid-column: 1 / -1;
  }
  .pat-obs-row,
  .risk-grid,
  .tr-kpis {
    grid-template-columns: 1fr;
  }
}

/* Below 980px the links drop onto their own row under the logo and scroll
   sideways if they run out of room. They are the only way to reach the other
   products, so they must not simply disappear. */
@media (max-width: 980px) {
  :root {
    --nav-h: 108px;
  }

  .nav {
    height: var(--nav-h);
    padding-bottom: 8px;
  }

  .nav-inner {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      'brand cta'
      'links links';
    row-gap: 6px;
    padding-top: 12px;
  }

  .nav-inner > .brand-logo {
    grid-area: brand;
  }
  .nav-inner > .nav-cta {
    grid-area: cta;
  }

  .nav-links {
    grid-area: links;
    gap: 22px;
    margin: 0 calc(var(--gutter) * -1);
    padding: 2px var(--gutter) 6px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .nav-links::-webkit-scrollbar {
    display: none;
  }
  .nav-links a {
    flex: none;
    white-space: nowrap;
  }
  .nav-links a::after {
    bottom: -4px;
  }

  /* Stack the about block above the link columns, but keep the three columns
     side by side — there is still plenty of width for them at this size. */
  .footer-main {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .footer-columns {
    gap: 32px 24px;
  }
}

@media (max-width: 760px) {
  .lb-row {
    grid-template-columns: 34px 1.2fr 0.9fr 0.5fr;
  }
  .lb-row .arch {
    display: none;
  }
}

@media (max-width: 560px) {
  .brand-logo {
    width: 112px;
    height: 25px;
  }
  .hero-product {
    --gauge-reserved-y: clamp(470px, 64svh, 580px);
    padding-left: 18px;
    padding-right: 18px;
  }
  .hero-product h1 {
    font-size: clamp(34px, 10vw, 42px);
  }
  .score-gauge {
    margin-top: clamp(18px, 3svh, 30px);
  }
  .archetype p {
    margin-top: 8px;
  }
  .hero-actions {
    margin-top: 18px;
  }
  .product-tabs {
    justify-content: flex-start;
    gap: 24px;
    padding-left: 18px;
    padding-right: 18px;
  }
  .tr-canvas-wrap {
    height: clamp(180px, 52vw, 220px);
  }
  .tr-chart-head {
    align-items: flex-start;
    flex-direction: column;
  }
  /* one column at a time, with the risk note last */
  .footer-columns {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .footer-bottom {
    gap: 12px;
  }
  .legal {
    justify-content: flex-start;
  }
}

@media (max-width: 560px) and (max-height: 720px) {
  .hero-product {
    --gauge-reserved-y: clamp(480px, 72svh, 560px);
    padding: calc(60px + clamp(20px, 4svh, 34px)) 18px clamp(28px, 5svh, 52px);
  }
  .hero-product .lede {
    max-width: 34ch;
    font-size: 14px;
    line-height: 1.45;
  }
  .score-center b {
    font-size: clamp(48px, 13vw, 62px);
  }
}

/* ==========================================================================
   Trait cards — the home page's "Control is the product" card treatment,
   available to any product page that needs to state three behaviours.
   ========================================================================== */

.trait-section {
  position: relative;
  padding: var(--section-pad-y) 0;
  border-top: 1px solid var(--line-brown-soft);
}

.trait-head {
  display: grid;
  grid-template-columns: minmax(0, 600px) minmax(260px, 420px);
  justify-content: space-between;
  align-items: end;
  gap: 28px 36px;
  margin-bottom: var(--section-head-gap);
}

.trait-head h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(2.4rem, 3.6vw, 3.4rem);
  font-weight: 660;
  letter-spacing: -0.04em;
  line-height: 1.04;
}

.trait-head p {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.62;
}

.trait-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.trait-card {
  --theme-rgb: var(--signal-rgb);
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 300px;
  padding: 28px 28px 24px;
  overflow: hidden;
  border: 1px solid var(--line-brown-soft);
  background: rgba(26, 17, 16, 0.58);
  outline: none;
  /* own stacking context so the dotmatrix host can sit behind the content */
  isolation: isolate;
  transition:
    background-color 560ms cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 560ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.trait-card[data-theme='orange'] {
  --theme-rgb: var(--execution-rgb);
}
.trait-card[data-theme='blue'] {
  --theme-rgb: 62, 178, 255;
}

/* Dotmatrix canvas mounts here, behind everything else in the card. */
.trait-card .dm-host {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Hover wash, matching the home page's control cards. */
.trait-card::after {
  position: absolute;
  inset: -20%;
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(var(--execution-rgb), 0.045), transparent 56%),
    rgba(var(--paper-rgb), 0.014);
  content: '';
  opacity: 0;
  pointer-events: none;
  transition: opacity 560ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.trait-card:hover::after,
.trait-card:focus-within::after {
  opacity: 1;
}

/* Arrow affordance, slides in from the left on hover. */
.trait-card__action {
  position: absolute;
  right: 20px;
  bottom: 20px;
  z-index: 1;
  color: rgba(var(--theme-rgb), 0.64);
  opacity: 0;
  transform: translateX(-8px);
  transition:
    opacity 420ms cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.trait-card__action::after {
  content: '\2192';
  font-family: var(--mono);
  font-size: 26px;
  line-height: 1;
}

.trait-card:hover .trait-card__action,
.trait-card:focus-within .trait-card__action {
  opacity: 1;
  transform: translateX(0);
}

/* the same faint rule + grain the control cards carry */
.trait-card::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg, transparent, rgba(210, 134, 84, 0.1), transparent) 50% 0 / 86% 1px
      no-repeat,
    linear-gradient(180deg, transparent, rgba(210, 134, 84, 0.055), transparent) 24px 50% / 1px 100%
      no-repeat;
  content: '';
  opacity: 0.6;
  pointer-events: none;
  transition: opacity 560ms ease;
}

.trait-card:hover,
.trait-card:focus-within {
  background: #1a1212;
  border-color: rgba(var(--theme-rgb), 0.38);
}

.trait-card:hover::before,
.trait-card:focus-within::before {
  opacity: 0.32;
}

.trait-card__icon {
  position: relative;
  z-index: 1;
  display: grid;
  width: 46px;
  height: 46px;
  margin-bottom: auto;
  border: 1px solid var(--line-brown);
  border-radius: 12px;
  background: rgba(var(--field-rgb), 0.55);
  place-items: center;
  transition:
    border-color 400ms ease,
    background 400ms ease;
}

.trait-card__icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: rgba(var(--theme-rgb), 0.9);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.trait-card:hover .trait-card__icon,
.trait-card:focus-within .trait-card__icon {
  border-color: rgba(var(--theme-rgb), 0.34);
  background: rgba(var(--theme-rgb), 0.07);
}

.trait-card__num {
  position: relative;
  z-index: 1;
  margin-top: 28px;
  color: rgba(var(--theme-rgb), 0.85);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
}

.trait-card h3 {
  position: relative;
  z-index: 1;
  margin: 12px 0 0;
  color: var(--ink);
  font-size: 21px;
  font-weight: 620;
  letter-spacing: -0.02em;
  line-height: 1.22;
}

.trait-card p {
  position: relative;
  z-index: 1;
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.62;
}

@media (max-width: 1020px) {
  .trait-head {
    grid-template-columns: 1fr;
  }
  .trait-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .trait-grid {
    grid-template-columns: 1fr;
  }
  .trait-card {
    min-height: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .trait-card,
  .trait-card::before,
  .trait-card__icon {
    transition: none;
  }
}

/* ==========================================================================
   Closing CTA — one per product page, the last thing before the footer.
   Shared so every product page converts the same way.
   ========================================================================== */

.product-close {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(330px, 44svh, 420px);
  padding: var(--section-pad-y-tight) var(--gutter);
  overflow: hidden;
  text-align: center;
  isolation: isolate;
  border-top: 1px solid var(--line-brown-soft);
}

.product-close__image {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-close::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(
      circle at center,
      rgba(var(--field-rgb), 0.2),
      rgba(var(--field-rgb), 0.72) 74%
    ),
    linear-gradient(180deg, rgba(var(--field-rgb), 0.44), rgba(var(--field-rgb), 0.9));
  content: '';
  pointer-events: none;
}

.product-close__inner {
  width: min(720px, 100%);
  margin: 0 auto;
}

.product-close__eyebrow {
  margin: 0 0 16px;
  color: var(--mint);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.product-close h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(2.3rem, 4vw, 3.4rem);
  font-weight: 660;
  letter-spacing: -0.04em;
  line-height: 1.04;
}

.product-close
  > .product-close__inner
  > p:not(.product-close__eyebrow):not(.product-close__disclosure) {
  max-width: 46ch;
  margin: 16px auto 30px;
  color: var(--muted);
  font-size: 16.5px;
  line-height: 1.6;
}

.product-close__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.product-close__disclosure {
  margin: 26px 0 0;
  color: var(--dim);
  font-size: 12.5px;
  line-height: 1.6;
}

@media (max-width: 560px) {
  .product-close {
    min-height: 0;
  }
  .product-close__actions {
    display: grid;
  }
}