/* ==========================================================================
   GNX Performance — Telemetry Design System
   One accent color (sodium amber). Two fonts (Fraunces + JetBrains Mono).
   Grid as visible structure. Numbers as first-class design elements.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=JetBrains+Mono:wght@300;400;500;600&family=Michroma&display=swap');

/* DSEG7 — classic 7-segment LCD display font, for the gauge readouts.
   Covers digits, decimal point, colon. Non-digit characters fall back. */
@font-face {
  font-family: 'DSEG7';
  src: url('https://cdn.jsdelivr.net/gh/keshikan/DSEG@v0.46/fonts/DSEG7-Classic/DSEG7Classic-Bold.woff2') format('woff2'),
       url('https://cdn.jsdelivr.net/gh/keshikan/DSEG@v0.46/fonts/DSEG7-Classic/DSEG7Classic-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DSEG7';
  src: url('https://cdn.jsdelivr.net/gh/keshikan/DSEG@v0.46/fonts/DSEG7-Classic/DSEG7Classic-Regular.woff2') format('woff2'),
       url('https://cdn.jsdelivr.net/gh/keshikan/DSEG@v0.46/fonts/DSEG7-Classic/DSEG7Classic-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ------- color ------------------------------------------------------- */
  /* Palette: Buick GNX red-on-black with Turbo 6 orange accents.
     Primary = red (needles, digits, fills). Orange = redline zone only. */
  --bg:          #0A0807;
  --bg-panel:    #120D0B;
  --bg-panel-hi: #1A1310;
  --border:      #2A201C;
  --border-hi:   #3D2D27;
  --ink:         #F2EDE4;
  --ink-dim:     #8A7F76;
  --ink-faint:   #4A403A;
  --signal:      #E92E1A; /* GNX red — primary signal */
  --signal-hi:   #FF4530; /* lighter red for hover / active states */
  --signal-glow: rgba(233, 46, 26, 0.18);
  --turbo:       #FF8820; /* Turbo 6 orange — secondary, redline only */
  --turbo-glow:  rgba(255, 136, 32, 0.22);
  --alert:       #FF3E00;

  /* ------- type -------------------------------------------------------- */
  --ff-display: "Fraunces", Georgia, "Times New Roman", serif;
  --ff-badge:   "Michroma", var(--ff-mono);
  --ff-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-micro: 0.6875rem;  /* 11 */
  --fs-xs:    0.75rem;    /* 12 */
  --fs-sm:    0.8125rem;  /* 13 */
  --fs-base:  0.9375rem;  /* 15 */
  --fs-md:    1.0625rem;  /* 17 */
  --fs-lg:    1.375rem;   /* 22 */
  --fs-xl:    1.875rem;   /* 30 */
  --fs-2xl:   2.75rem;    /* 44 */
  --fs-3xl:   4rem;       /* 64 */

  /* ------- space ------------------------------------------------------- */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem;
  --s-5: 1.25rem; --s-6: 1.5rem; --s-8: 2rem; --s-10: 2.5rem;
  --s-12: 3rem; --s-16: 4rem; --s-20: 5rem; --s-24: 6rem; --s-32: 8rem;

  /* ------- layout ------------------------------------------------------ */
  --wrap: 1400px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --dur: 320ms;
  --dur-fast: 160ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}

/* ==========================================================================
   BASE
   ========================================================================== */

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

html {
  background: var(--bg);
  color-scheme: dark;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--ff-mono);
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  font-feature-settings: "ss01", "cv11", "zero" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Dot grid — graph paper atmosphere */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, var(--border) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 30%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 30%, transparent 90%);
}

/* Grain — warm */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 0.78  0 0 0 0 0.32  0 0 0 0.07 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.6;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 1000;
}

a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; background: none; border: none; }
button { cursor: pointer; }

::selection { background: var(--signal); color: var(--bg); }

/* Focus visibility — sodium amber outline */
:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
}

/* ==========================================================================
   LAYOUT PRIMITIVES
   ========================================================================== */

.wrap {
  position: relative;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
  z-index: 2;
}

.section {
  position: relative;
  padding: var(--s-24) 0;
  border-top: 1px solid var(--border);
}
.section--tight { padding: var(--s-16) 0; }

/* Section meta label — the "section number / title / rule" marker */
.section-meta {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: end;
  gap: var(--s-4);
  margin-bottom: var(--s-12);
  font-family: var(--ff-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.section-meta__id    { color: var(--signal); font-weight: 400; font-family: var(--ff-badge); }
.section-meta__title { padding-bottom: var(--s-1); }
.section-meta__rule  {
  height: 1px;
  background: var(--border);
  transform: translateY(-4px);
}

/* ==========================================================================
   TOP TELEMETRY BAR
   ========================================================================== */

.telemetry {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: var(--s-6);
  padding: var(--s-2) var(--gutter);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  overflow: hidden;
  white-space: nowrap;
}

.telemetry__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 8px var(--signal);
  animation: pulse 1.8s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.85); }
}

.telemetry__item { display: inline-flex; gap: var(--s-2); }
.telemetry__sep  { color: var(--ink-faint); }
.telemetry__val  { color: var(--ink); }

/* ==========================================================================
   NAV
   ========================================================================== */

.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

/* Checker pattern behind the nav — text sits on top, fades from center outward.
   Uses CSS vars so the dev slider panel can tune live. */
.nav::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-conic-gradient(var(--signal) 0% 25%, transparent 0% 50%);
  background-size: 34px 34px;
  opacity: 0.41;
  pointer-events: none;
  z-index: 0;
  mask-image: linear-gradient(to bottom, black 0%, rgb(0 0 0 / 0.25) 45%, rgb(0 0 0 / 0.25) 55%, black 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, rgb(0 0 0 / 0.25) 45%, rgb(0 0 0 / 0.25) 55%, black 100%);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-5) 0;
  gap: var(--s-6);
  position: relative;
  z-index: 1;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-family: 'Michroma', var(--ff-mono);
  font-size: var(--fs-sm);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}

/* Logo spin-to-align animation — 2 clean turns at full radius, then accelerating snap to center. */
.logo-sa {
  stroke: currentColor; stroke-width: 2.2; fill: none;
  stroke-linecap: square; transform-origin: 16px 16px; transform-box: view-box;
}
.logo-housing-fade { opacity: 0; }
.logo-sa--a1 { animation: sa-a1 4s linear both; }
.logo-sa--a2 { animation: sa-a2 4s linear both; }
.logo-sa--a3 { animation: sa-a3 4s linear both; }
.logo-sa--a1 ~ .logo-housing-fade { animation: housing-appear 500ms ease 3.6s both; }
@keyframes sa-a1 {
  0%{transform:rotate(0deg) translate(0,-9px)}35%{transform:rotate(360deg) translate(0,-9px)}70%{transform:rotate(720deg) translate(0,-9px)}78%{transform:rotate(788deg) translate(-.5px,-8.36px)}85%{transform:rotate(864deg) translate(-1.75px,-6.75px)}91%{transform:rotate(942deg) translate(-3.43px,-4.59px)}96%{transform:rotate(1016deg) translate(-5.26px,-2.23px)}100%{transform:rotate(1080deg) translate(-7px,0)}
}
@keyframes sa-a2 {
  0%{transform:rotate(120deg) translate(0,-9px)}35%{transform:rotate(560deg) translate(0,-9px)}70%{transform:rotate(1000deg) translate(0,-9px)}78%{transform:rotate(1084deg) translate(0,-8.36px)}85%{transform:rotate(1176deg) translate(0,-6.75px)}91%{transform:rotate(1271deg) translate(0,-4.59px)}96%{transform:rotate(1362deg) translate(0,-2.23px)}100%{transform:rotate(1440deg) translate(0,0)}
}
@keyframes sa-a3 {
  0%{transform:rotate(240deg) translate(0,-9px)}35%{transform:rotate(640deg) translate(0,-9px)}70%{transform:rotate(1040deg) translate(0,-9px)}78%{transform:rotate(1116deg) translate(.5px,-8.36px)}85%{transform:rotate(1200deg) translate(1.75px,-6.75px)}91%{transform:rotate(1286deg) translate(3.43px,-4.59px)}96%{transform:rotate(1369deg) translate(5.26px,-2.23px)}100%{transform:rotate(1440deg) translate(7px,0)}
}
@keyframes housing-appear { 0%{opacity:0} 100%{opacity:.85} }

.wordmark__full {
  display: inline-block;
  max-width: 180px;
  overflow: hidden;
  vertical-align: baseline;
  white-space: nowrap;
  opacity: 1;
  transition: max-width 400ms var(--ease), opacity 250ms var(--ease);
}

.nav--scrolled .wordmark__full {
  max-width: 0;
  opacity: 0;
}

.nav__links {
  display: flex;
  gap: var(--s-8);
  align-items: center;
}

.nav__link {
  font-family: var(--ff-mono);
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--turbo);
  text-shadow: 0 0 8px rgba(255, 136, 32, 0.5);
  transition: color var(--dur-fast) var(--ease), text-shadow var(--dur-fast) var(--ease);
}
.nav__link:hover {
  color: #FFA040;
  text-shadow: 0 0 16px rgba(255, 136, 32, 0.7);
}

@media (max-width: 680px) {
  .nav__links .nav__link { display: none; }
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn {
  --btn-bg: var(--signal);
  --btn-ink: var(--bg);
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-5);
  font-family: var(--ff-badge);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--btn-bg);
  color: var(--btn-ink);
  border: 1px solid var(--btn-bg);
  transition: background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
  position: relative;
  isolation: isolate;
  text-decoration: none;
}

.btn:hover {
  background: var(--signal-hi);
  border-color: var(--signal-hi);
}

.btn__arrow {
  display: inline-block;
  transition: transform var(--dur-fast) var(--ease);
  margin-top: -1px;
}
.btn:hover .btn__arrow { transform: translateX(3px); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-ink: var(--ink);
  border-color: var(--border-hi);
}
.btn--ghost:hover {
  background: var(--bg-panel-hi);
  border-color: var(--ink-dim);
  color: var(--ink);
}

.btn--cta {
  --btn-bg: transparent;
  --btn-ink: var(--turbo);
  border-color: var(--turbo);
  box-shadow: 0 0 10px var(--turbo-glow), inset 0 0 10px rgba(255, 136, 32, 0.06);
}
.btn--cta:hover {
  --btn-bg: var(--turbo);
  --btn-ink: var(--bg);
  border-color: var(--turbo);
  box-shadow: 0 0 18px var(--turbo-glow);
}

.link-inline {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--border);
  transition: color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.link-inline:hover { color: var(--signal); border-color: var(--signal); }

/* ==========================================================================
   HERO
   ========================================================================== */

.hero { position: relative; padding: var(--s-16) 0 var(--s-24); }

.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-12);
}

@media (min-width: 980px) {
  .hero__grid {
    grid-template-columns: 1.25fr 1fr;
    gap: var(--s-12);
    align-items: start;
  }
}

.hero__label {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--fs-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--signal);
  margin-bottom: var(--s-8);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--border);
}

.hero__headline {
  font-family: var(--ff-display);
  font-size: clamp(2.5rem, 6vw + 1rem, 5.25rem);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.028em;
  color: var(--ink);
  margin: 0 0 var(--s-8) 0;
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 30, "opsz" 144;
  text-wrap: balance;
  max-width: 14ch;
}

.hero__headline em {
  font-style: italic;
  font-weight: 400;
  color: var(--signal);
  font-variation-settings: "SOFT" 100, "opsz" 144;
}

.hero__sub {
  font-family: var(--ff-mono);
  font-size: var(--fs-md);
  line-height: 1.65;
  color: var(--ink-dim);
  max-width: 56ch;
  margin: 0 0 var(--s-10) 0;
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-6);
}

/* ==========================================================================
   TELE PANEL — The Hero Instrument
   This is the one thing people should remember.
   ========================================================================== */

.telepanel {
  border: 1px solid var(--border-hi);
  background: linear-gradient(180deg, var(--bg-panel-hi) 0%, var(--bg-panel) 100%);
  position: relative;
  font-family: var(--ff-mono);
  box-shadow:
    0 0 0 1px rgba(255,176,0,0.02),
    0 30px 60px -20px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(255,255,255,0.02);
}

/* Corner ticks */
.telepanel::before,
.telepanel::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  border: 1px solid var(--signal);
  pointer-events: none;
}
.telepanel::before {
  top: -1px; left: -1px;
  border-right: none; border-bottom: none;
}
.telepanel::after {
  bottom: -1px; right: -1px;
  border-left: none; border-top: none;
}

.telepanel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  gap: var(--s-4);
}

.telepanel__head strong {
  color: var(--signal);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}

.telepanel__body { padding: var(--s-4) var(--s-4) var(--s-3); }

.telepanel__row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: var(--s-4);
  padding: var(--s-3) 0;
  border-bottom: 1px dashed var(--border);
  font-size: var(--fs-sm);
}
.telepanel__row:last-of-type { border-bottom: none; }

.telepanel__label {
  color: var(--ink-dim);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.telepanel__val {
  color: var(--ink);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "zero" 1;
}

.telepanel__val--signal { color: var(--signal); }

.telepanel__foot {
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--border);
  font-size: var(--fs-micro);
  color: var(--ink-faint);
  letter-spacing: 0.12em;
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  text-transform: uppercase;
}

/* LED pulse dot */
.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 10px var(--signal);
  animation: pulse 1.8s ease-in-out infinite;
  vertical-align: middle;
  flex-shrink: 0;
}
.dot--off {
  background: var(--ink-faint);
  box-shadow: none;
  animation: none;
}

/* Sparkline inside panel */
.spark {
  display: block;
  width: 100%;
  height: 48px;
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px dashed var(--border);
}
.spark path { fill: none; stroke: var(--signal); stroke-width: 1.5; stroke-linecap: square; }
.spark .spark__fill { fill: var(--signal); opacity: 0.08; stroke: none; }

/* ==========================================================================
   STEPS
   ========================================================================== */

.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--border);
}

@media (min-width: 880px) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
  }
  .steps > * { border-right: 1px solid var(--border); }
  .steps > *:last-child { border-right: none; }
}

.step {
  padding: var(--s-12) 0 var(--s-12) 0;
  border-bottom: 1px solid var(--border);
  position: relative;
}
@media (min-width: 880px) {
  .step {
    border-bottom: none;
    padding: var(--s-12) var(--s-6);
  }
  .step:first-child { padding-left: 0; }
  .step:last-child  { padding-right: 0; }
}

.step__num {
  font-family: var(--ff-display);
  font-size: clamp(3.5rem, 5vw, 5rem);
  font-weight: 500;
  line-height: 0.9;
  color: var(--signal);
  font-variation-settings: "SOFT" 60, "opsz" 144;
  margin-bottom: var(--s-6);
  display: block;
  letter-spacing: -0.04em;
}

.step__title {
  font-family: var(--ff-display);
  font-size: var(--fs-lg);
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 var(--s-3) 0;
  letter-spacing: -0.01em;
}

.step__body {
  color: var(--ink-dim);
  font-size: var(--fs-sm);
  line-height: 1.65;
  margin: 0;
  max-width: 36ch;
}

.step__timing {
  margin-top: var(--s-6);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-top: var(--s-3);
  border-top: 1px dashed var(--border);
  max-width: 36ch;
}

/* ==========================================================================
   RESULT SKELETON
   ========================================================================== */

.result {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-12);
  padding: var(--s-12);
  border: 1px solid var(--border-hi);
  background: var(--bg-panel);
  position: relative;
  overflow: hidden;
}

@media (min-width: 880px) {
  .result {
    grid-template-columns: 1fr 1fr;
    padding: var(--s-16);
    align-items: center;
    gap: var(--s-16);
  }
}

.result::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 30px,
      rgba(255, 176, 0, 0.02) 30px,
      rgba(255, 176, 0, 0.02) 31px
    );
  pointer-events: none;
}

.result > * { position: relative; z-index: 1; }

.result__label {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--signal);
  margin-bottom: var(--s-6);
}

.result__headline {
  font-family: var(--ff-display);
  font-size: clamp(2rem, 3.2vw + 1rem, 3rem);
  font-weight: 500;
  line-height: 0.98;
  margin: 0 0 var(--s-6) 0;
  letter-spacing: -0.025em;
  font-variation-settings: "SOFT" 20;
  max-width: 14ch;
}

.result__note {
  color: var(--ink-dim);
  font-size: var(--fs-sm);
  max-width: 42ch;
  margin: 0;
  line-height: 1.65;
}

/* Skeleton metric grid */
.skelgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border-hi);
}

.skel {
  padding: var(--s-6);
  background: var(--bg-panel-hi);
  min-height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.skel__label {
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: var(--s-3);
}

.skel__val {
  font-family: var(--ff-display);
  font-size: clamp(1.75rem, 3vw + 0.5rem, 2.5rem);
  color: var(--ink-faint);
  line-height: 1;
  letter-spacing: -0.02em;
  display: inline-block;
  font-variation-settings: "SOFT" 50;
}
.skel__val--on {
  color: var(--signal);
  font-family: 'DSEG7', var(--ff-mono);
  font-weight: 700;
  letter-spacing: 0.02em;
  filter: drop-shadow(0 0 6px var(--signal-glow));
  font-size: clamp(1.4rem, 2.4vw + 0.4rem, 2rem);
}

/* ==========================================================================
   SPEC LIST  (Who this is for)
   ========================================================================== */

.spec {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.spec__row {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: var(--s-6);
  padding: var(--s-6) 0;
  border-bottom: 1px solid var(--border);
  align-items: baseline;
}
.spec__row:last-child { border-bottom: none; }

.spec__key {
  font-family: var(--ff-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  color: var(--signal);
  font-weight: 500;
  margin: 0;
}

.spec__val {
  font-family: var(--ff-mono);
  font-size: var(--fs-md);
  color: var(--ink);
  line-height: 1.6;
  margin: 0;
  max-width: 62ch;
}

.spec__val strong {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 500;
  color: var(--ink);
  font-size: 1.08em;
}

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq {
  border-top: 1px solid var(--border);
}

.faq__item {
  border-bottom: 1px solid var(--border);
}

.faq__item summary {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--s-6);
  align-items: baseline;
  padding: var(--s-8) 0;
  font-family: var(--ff-display);
  font-size: var(--fs-lg);
  font-weight: 500;
  list-style: none;
  cursor: pointer;
  color: var(--ink);
  letter-spacing: -0.01em;
  transition: color var(--dur-fast) var(--ease);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::marker { content: ''; }
.faq__item summary:hover { color: var(--signal); }

.faq__num {
  font-family: var(--ff-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  color: var(--ink-faint);
  font-weight: 400;
  padding-top: 0.35em;
}

.faq__toggle {
  font-family: var(--ff-mono);
  font-size: var(--fs-md);
  color: var(--ink-dim);
  padding-top: 0.1em;
  transition: transform var(--dur) var(--ease),
              color var(--dur-fast) var(--ease);
}

.faq__item[open] .faq__toggle {
  transform: rotate(45deg);
  color: var(--signal);
}
.faq__item[open] summary { color: var(--ink); }

.faq__body {
  padding: 0 0 var(--s-8) 6rem;
  color: var(--ink-dim);
  font-size: var(--fs-sm);
  line-height: 1.7;
  max-width: 62ch;
}

@media (max-width: 680px) {
  .faq__item summary { grid-template-columns: 1fr auto; font-size: var(--fs-md); }
  .faq__num { display: none; }
  .faq__body { padding-left: 0; font-size: var(--fs-sm); }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.foot {
  border-top: 1px solid var(--border);
  padding: var(--s-16) 0 var(--s-8);
  margin-top: var(--s-8);
}

.foot__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-10);
}

@media (min-width: 680px) {
  .foot__grid { grid-template-columns: 2fr 1fr 1fr; gap: var(--s-12); }
}

.foot__line {
  font-family: var(--ff-display);
  font-size: var(--fs-xl);
  font-weight: 500;
  font-style: italic;
  color: var(--ink);
  max-width: 26ch;
  line-height: 1.2;
  margin: 0 0 var(--s-6) 0;
  letter-spacing: -0.015em;
}

.foot__label {
  font-family: var(--ff-badge);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: var(--s-4);
}

.foot__link {
  display: block;
  color: var(--ink-dim);
  font-size: var(--fs-sm);
  padding: var(--s-1) 0;
  transition: color var(--dur-fast) var(--ease);
}
.foot__link:hover { color: var(--signal); }

.foot__meta {
  margin-top: var(--s-16);
  padding-top: var(--s-6);
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-3);
  font-family: var(--ff-badge);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ==========================================================================
   ABOUT  (editorial)
   ========================================================================== */

.editorial {
  max-width: 70ch;
  margin: 0 auto;
  padding: var(--s-20) 0;
}

.editorial__kicker {
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--signal);
  margin: 0 0 var(--s-4) 0;
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--border);
}

.editorial__title {
  font-family: var(--ff-display);
  font-size: clamp(2.5rem, 5vw + 1rem, 4.25rem);
  font-weight: 500;
  font-style: italic;
  line-height: 0.98;
  color: var(--ink);
  margin: 0 0 var(--s-10) 0;
  letter-spacing: -0.028em;
  font-variation-settings: "SOFT" 40, "opsz" 144;
  text-wrap: balance;
}

.editorial__lede {
  font-family: var(--ff-display);
  font-size: var(--fs-xl);
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink);
  margin: 0 0 var(--s-10) 0;
  max-width: 52ch;
  font-variation-settings: "opsz" 72;
}

.editorial__portrait {
  width: 100%;
  aspect-ratio: 4/5;
  max-width: 280px;
  background:
    repeating-linear-gradient(-45deg,
      var(--bg-panel) 0 2px,
      var(--bg-panel-hi) 2px 4px);
  border: 1px solid var(--border-hi);
  margin: var(--s-10) 0;
  position: relative;
}

.editorial__portrait::before {
  content: '';
  position: absolute;
  inset: var(--s-4);
  border: 1px dashed var(--signal);
  opacity: 0.3;
}

.editorial__portrait::after {
  content: attr(data-label);
  position: absolute;
  bottom: var(--s-3);
  left: var(--s-3);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--signal);
  background: var(--bg);
  padding: var(--s-1) var(--s-2);
  font-family: var(--ff-mono);
}

.editorial__body p {
  font-family: var(--ff-mono);
  font-size: var(--fs-md);
  line-height: 1.8;
  color: var(--ink);
  margin: 0 0 var(--s-6) 0;
}

.editorial__body p:first-of-type::first-letter {
  font-family: var(--ff-display);
  font-size: 4em;
  float: left;
  line-height: 0.85;
  padding: 0.1em 0.15em 0 0;
  color: var(--signal);
  font-weight: 500;
  font-variation-settings: "SOFT" 50;
}

.editorial__sig {
  margin-top: var(--s-12);
  padding-top: var(--s-6);
  border-top: 1px solid var(--border);
  font-family: var(--ff-display);
  font-size: var(--fs-md);
  font-style: italic;
  color: var(--ink-dim);
}

/* ==========================================================================
   WORK PAGE — Status Block + Method
   ========================================================================== */

.status-block {
  border: 1px solid var(--border-hi);
  padding: var(--s-12);
  background: var(--bg-panel);
  position: relative;
  margin-top: var(--s-6);
}

@media (min-width: 880px) {
  .status-block { padding: var(--s-16); }
}

.status-block::before,
.status-block::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border: 1px solid var(--signal);
  pointer-events: none;
}
.status-block::before {
  top: -1px; left: -1px;
  border-right: none; border-bottom: none;
}
.status-block::after {
  bottom: -1px; right: -1px;
  border-left: none; border-top: none;
}

.status-block__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--s-6);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--s-10);
  gap: var(--s-4);
  flex-wrap: wrap;
}

.status-block__label {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--signal);
}

.status-block__ts {
  font-size: var(--fs-micro);
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.status-block__headline {
  font-family: var(--ff-display);
  font-size: clamp(2.25rem, 4.5vw + 1rem, 4.25rem);
  font-weight: 500;
  line-height: 0.95;
  color: var(--ink);
  margin: 0 0 var(--s-6) 0;
  letter-spacing: -0.028em;
  font-variation-settings: "SOFT" 30, "opsz" 144;
  max-width: 20ch;
}
.status-block__headline em {
  font-style: italic;
  color: var(--signal);
  font-weight: 400;
}

.status-block__sub {
  font-family: var(--ff-mono);
  font-size: var(--fs-md);
  color: var(--ink-dim);
  max-width: 62ch;
  line-height: 1.65;
  margin: 0 0 var(--s-10) 0;
}

.status-block__counter {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}

@media (min-width: 720px) {
  .status-block__counter { grid-template-columns: repeat(4, 1fr); }
}

.counter {
  background: var(--bg-panel-hi);
  padding: var(--s-6) var(--s-4);
  text-align: left;
}

.counter__val {
  font-family: var(--ff-display);
  font-size: clamp(2.25rem, 3.5vw + 0.5rem, 3.25rem);
  font-weight: 500;
  line-height: 1;
  color: var(--signal);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.035em;
  display: block;
  margin-bottom: var(--s-3);
  font-variation-settings: "SOFT" 20;
}

.counter__label {
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* Methodology list */
.method {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: var(--s-6);
}

@media (min-width: 720px)  { .method { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .method { grid-template-columns: repeat(3, 1fr); } }

.method__item {
  padding: var(--s-8);
  border: 1px solid var(--border);
  margin: -1px 0 0 -1px;
  position: relative;
  background: var(--bg);
  transition: background-color var(--dur-fast) var(--ease);
}
.method__item:hover { background: var(--bg-panel); }

.method__num {
  font-family: var(--ff-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  color: var(--signal);
  margin-bottom: var(--s-4);
  text-transform: uppercase;
}

.method__title {
  font-family: var(--ff-display);
  font-size: var(--fs-lg);
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 var(--s-3) 0;
  letter-spacing: -0.015em;
}

.method__body {
  font-family: var(--ff-mono);
  font-size: var(--fs-sm);
  color: var(--ink-dim);
  line-height: 1.7;
  margin: 0;
  max-width: 42ch;
}

/* ==========================================================================
   APPLY FORM
   ========================================================================== */

.form {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-8);
  margin-top: var(--s-12);
  padding: var(--s-12);
  border: 1px solid var(--border-hi);
  background: var(--bg-panel);
  position: relative;
}

.form::before,
.form::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border: 1px solid var(--signal);
  pointer-events: none;
}
.form::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.form::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }

@media (min-width: 680px) {
  .form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-8);
  }
}

.form__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: var(--s-6);
  border-bottom: 1px solid var(--border);
  gap: var(--s-4);
  flex-wrap: wrap;
}

.form__head-label {
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--signal);
}

.form__head-id {
  font-size: var(--fs-micro);
  letter-spacing: 0.12em;
  color: var(--ink-faint);
  text-transform: uppercase;
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.field__label {
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  display: flex;
  justify-content: space-between;
}
.field__label span { color: var(--signal); }

.field__input,
.field__select,
.field__textarea {
  width: 100%;
  padding: var(--s-4) 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-hi);
  color: var(--ink);
  font-family: var(--ff-mono);
  font-size: var(--fs-base);
  transition: border-color var(--dur-fast) var(--ease);
}

.field__input:focus,
.field__select:focus,
.field__textarea:focus {
  outline: none;
  border-bottom-color: var(--signal);
}

.field__input::placeholder,
.field__textarea::placeholder {
  color: var(--ink-faint);
}

.field__select {
  appearance: none;
  padding-right: var(--s-8);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'><path d='M3 5l4 4 4-4' stroke='%23FFB000' stroke-width='1.5' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position: right var(--s-1) center;
}

.field__select option {
  background: var(--bg-panel);
  color: var(--ink);
}

.field__textarea {
  min-height: 120px;
  resize: vertical;
  padding: var(--s-4);
  border: 1px solid var(--border-hi);
  line-height: 1.6;
}
.field__textarea:focus { border-color: var(--signal); }

.form__submit {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--s-6);
  border-top: 1px solid var(--border);
  gap: var(--s-6);
  flex-wrap: wrap;
}

.form__submit-note {
  font-size: var(--fs-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.form__submit button[type="submit"] {
  border: 1px solid var(--signal);
}

/* Not-a-fit block */
.notfit {
  margin-top: var(--s-16);
  padding: var(--s-10) 0 0;
  border-top: 1px solid var(--border);
}

.notfit__title {
  font-family: var(--ff-display);
  font-size: var(--fs-xl);
  font-weight: 500;
  font-style: italic;
  color: var(--ink);
  margin: 0 0 var(--s-8) 0;
  letter-spacing: -0.02em;
}

.notfit__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.notfit__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  color: var(--ink-dim);
  font-size: var(--fs-sm);
  border-bottom: 1px dashed var(--border);
  line-height: 1.65;
  max-width: 72ch;
}
.notfit__item:last-child { border-bottom: none; }

.notfit__x {
  color: var(--alert);
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  padding-top: 0.1em;
}

/* ==========================================================================
   THANK YOU
   ========================================================================== */

.ty {
  min-height: calc(100vh - 200px);
  display: grid;
  grid-template-columns: 1fr;
  align-content: center;
  padding: var(--s-16) 0;
}

.ty__body { max-width: 68ch; }

.ty__status {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--signal);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--s-8);
}

.ty__headline {
  font-family: var(--ff-display);
  font-size: clamp(2.25rem, 5vw + 1rem, 4.25rem);
  font-weight: 500;
  line-height: 0.95;
  color: var(--ink);
  margin: 0 0 var(--s-6) 0;
  letter-spacing: -0.028em;
  font-variation-settings: "SOFT" 30, "opsz" 144;
  max-width: 16ch;
}
.ty__headline em {
  font-style: italic;
  color: var(--signal);
  font-weight: 400;
}

.ty__sub {
  font-family: var(--ff-mono);
  font-size: var(--fs-md);
  color: var(--ink-dim);
  line-height: 1.7;
  margin: 0 0 var(--s-12) 0;
  max-width: 60ch;
}

.calendly-embed {
  min-height: 500px;
  border: 1px solid var(--border-hi);
  background: var(--bg-panel);
  padding: var(--s-12);
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--ink-dim);
  font-family: var(--ff-mono);
  font-size: var(--fs-sm);
  position: relative;
}

.calendly-embed::before,
.calendly-embed::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border: 1px solid var(--signal);
  pointer-events: none;
}
.calendly-embed::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.calendly-embed::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }

/* ==========================================================================
   UTILITIES
   ========================================================================== */

.hr {
  height: 1px;
  background: var(--border);
  border: none;
  margin: var(--s-12) 0;
}

.eyebrow {
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--signal);
}

.mono-sm { font-family: var(--ff-mono); font-size: var(--fs-sm); }

/* ==========================================================================
   MOTION
   ========================================================================== */

@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.anim-rise { animation: rise 900ms var(--ease) both; }
.anim-fade { animation: fade 1200ms var(--ease) both; }

.delay-1 { animation-delay: 100ms; }
.delay-2 { animation-delay: 200ms; }
.delay-3 { animation-delay: 300ms; }
.delay-4 { animation-delay: 400ms; }
.delay-5 { animation-delay: 500ms; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .dot, .telemetry__dot { animation: none !important; }
}

/* ==========================================================================
   BRAND MARK — turbo housing + aligned chevrons
   (lives inside .wordmark, replaces the old square tick)
   ========================================================================== */

.brand__mark {
  width: 28px;
  height: 28px;
  color: var(--signal);
  flex-shrink: 0;
  display: inline-block;
}

.brand__mark .housing {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  opacity: 0.85;
}

.brand__mark .blade {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: square;
  stroke-linejoin: miter;
  transform-origin: 16px 16px;
  transform-box: view-box;
  animation: blade-align 900ms var(--ease) both;
}
.brand__mark .blade--1 { animation-delay: 60ms;  }
.brand__mark .blade--2 { animation-delay: 150ms; }
.brand__mark .blade--3 { animation-delay: 240ms; }

@keyframes blade-align {
  0%   { transform: rotate(-28deg); opacity: 0; }
  60%  { transform: rotate(6deg);   opacity: 1; }
  100% { transform: rotate(0deg);   opacity: 1; }
}

/* ==========================================================================
   BOOST GAUGE — hero instrument (analog dashboard DNA)
   ========================================================================== */

.gauge {
  position: relative;
  border: 1px solid var(--border-hi);
  background: linear-gradient(180deg, var(--bg-panel-hi) 0%, var(--bg-panel) 100%);
  padding: var(--s-6) var(--s-6) var(--s-5);
  box-shadow:
    0 30px 60px -20px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(255,255,255,0.02);
}

.gauge::before,
.gauge::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border: 1px solid var(--signal);
  pointer-events: none;
}
.gauge::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.gauge::after  { bottom: -1px; right: -1px; border-left: none; border-top: none; }

.gauge__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--border);
  gap: var(--s-4);
  flex-wrap: wrap;
}
.gauge__head strong {
  color: var(--signal);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}

.gauge__face {
  position: relative;
  margin: var(--s-3) auto 0;
  max-width: 520px;
  aspect-ratio: 520 / 360;
}

.gauge__svg { display: block; width: 100%; height: 100%; }

.gauge__svg .ring-outer   { fill: none; stroke: var(--border-hi); stroke-width: 1.5; }
.gauge__svg .ring-inner   { fill: none; stroke: var(--border); stroke-width: 1; }

/* Segmented LED-style arc */
.gauge__svg .seg-on  {
  stroke: var(--signal);
  stroke-opacity: 0.95;
  filter: drop-shadow(0 0 3px var(--signal));
}
.gauge__svg .seg-dim { stroke: var(--ink-faint); stroke-opacity: 0.55; }
.gauge__svg .seg-hot {
  stroke: var(--turbo);
  stroke-opacity: 1;
  filter: drop-shadow(0 0 5px var(--turbo));
}

.gauge__svg .gauge-label  {
  font-family: 'DSEG7', var(--ff-mono);
  font-size: 14px;
  fill: var(--ink-dim);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-anchor: middle;
  dominant-baseline: middle;
}
.gauge__svg .gauge-label--hot {
  fill: var(--turbo);
  filter: drop-shadow(0 0 4px var(--turbo-glow));
}

.gauge__svg .needle {
  stroke: var(--signal);
  stroke-width: 3;
  stroke-linecap: round;
  filter: drop-shadow(0 0 10px var(--signal));
}
.gauge__svg .needle--meta {
  transform-origin: 160px 185px;
  transform-box: view-box;
  transform: rotate(-135deg);
}
.gauge__svg .needle--google {
  transform-origin: 360px 185px;
  transform-box: view-box;
  transform: rotate(-135deg);
}

/* Needles sweep when dashboard toggles ON */
.gauge[data-on="true"] .needle--meta {
  animation: needle-meta 1600ms var(--ease) 180ms both;
}
.gauge[data-on="true"] .needle--google {
  animation: needle-google 1700ms var(--ease) 620ms both;
}
.gauge__svg .hub       { fill: var(--bg); stroke: var(--signal); stroke-width: 2; }
.gauge__svg .hub-dot   { fill: var(--signal); }

@keyframes needle-meta {
  0%   { transform: rotate(-135deg); opacity: 0; }
  12%  { opacity: 1; }
  60%  { transform: rotate(20deg); }
  100% { transform: rotate(6.75deg); }
}
@keyframes needle-google {
  0%   { transform: rotate(-135deg); opacity: 0; }
  12%  { opacity: 1; }
  60%  { transform: rotate(72deg); }
  100% { transform: rotate(54deg); }
}

/* In-SVG readouts for each platform dial */
.gauge__svg .platform-label {
  font-family: var(--ff-mono);
  font-size: 12px;
  fill: var(--signal);
  text-anchor: middle;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
}
.gauge__svg .platform-rule {
  stroke: var(--border-hi);
  stroke-width: 1;
}
.gauge__svg .dial-val {
  font-family: 'DSEG7', var(--ff-mono);
  font-size: 24px;
  fill: var(--signal);
  text-anchor: middle;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  filter: drop-shadow(0 0 6px var(--signal-glow));
}
.gauge__svg .dial-sub {
  font-family: var(--ff-mono);
  font-size: 9px;
  fill: var(--ink-dim);
  text-anchor: middle;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
}
.gauge__svg .mini-label-sub {
  font-family: var(--ff-mono);
  font-size: 10px;
  fill: var(--ink-dim);
  text-anchor: middle;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
}

/* Vertical bar mini-gauges (VOLT, TEMP on the sides) */
.gauge__svg .bar-on  {
  fill: var(--signal);
  fill-opacity: 0.9;
  filter: drop-shadow(0 0 2px var(--signal-glow));
}
.gauge__svg .bar-off { fill: var(--ink-faint); fill-opacity: 0.25; }

.gauge__svg .mini-label {
  font-family: var(--ff-mono);
  font-size: 11px;
  fill: var(--ink-dim);
  text-anchor: middle;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
}
.gauge__svg .mini-val {
  font-family: 'DSEG7', var(--ff-mono);
  font-size: 14px;
  fill: var(--signal);
  text-anchor: middle;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  filter: drop-shadow(0 0 4px var(--signal-glow));
}

/* Framing brackets around the mini gauges */
.gauge__svg .mini-frame {
  fill: none;
  stroke: var(--border-hi);
  stroke-width: 1;
}

.gauge__center {
  position: absolute;
  left: 0; right: 0;
  top: 58%;
  text-align: center;
  pointer-events: none;
}
.gauge__center-val {
  display: block;
  font-family: var(--ff-display);
  font-size: clamp(2.25rem, 4vw, 3rem);
  font-weight: 500;
  line-height: 1;
  color: var(--signal);
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  font-variation-settings: "SOFT" 20, "opsz" 144;
  text-shadow: 0 0 20px var(--signal-glow);
}
.gauge__center-label {
  display: block;
  font-family: var(--ff-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.18em;
  color: var(--ink-dim);
  text-transform: uppercase;
  margin-top: var(--s-2);
}

.gauge__rows {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  margin-top: var(--s-5);
}

.gauge__cell {
  background: var(--bg-panel);
  padding: var(--s-3) var(--s-3);
}
.gauge__cell-label {
  font-family: var(--ff-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: var(--s-1);
  display: block;
}
.gauge__cell-val {
  font-family: var(--ff-mono);
  font-size: var(--fs-sm);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  display: block;
}
.gauge__cell-val--signal { color: var(--signal); }

.gauge__foot {
  display: flex;
  justify-content: space-between;
  font-family: var(--ff-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px dashed var(--border);
  gap: var(--s-4);
  flex-wrap: wrap;
}

/* ==========================================================================
   TOGGLE SWITCH — race-car ignition style
   ========================================================================== */

.toggle-wrap {
  display: flex;
  justify-content: flex-end;
  padding-right: var(--s-4);
  margin-bottom: var(--s-3);
}

.toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  cursor: pointer;
  user-select: none;
}

.toggle__input { position: absolute; opacity: 0; width: 0; height: 0; }

.toggle__track {
  position: relative;
  width: 44px;
  height: 22px;
  background: var(--bg-panel-hi);
  border: 2px solid var(--border-hi);
  border-radius: 3px;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.toggle__cover {
  position: absolute;
  top: -18px;
  left: -2px;
  right: -2px;
  height: 16px;
  background: var(--signal);
  border-radius: 2px 2px 0 0;
  opacity: 0.85;
  transform-origin: bottom;
  transform: rotateX(0deg);
  transition: transform 300ms var(--ease), opacity 300ms var(--ease);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.3);
}

.toggle__input:checked ~ .toggle__track .toggle__cover {
  transform: rotateX(-100deg);
  opacity: 0.4;
}

.toggle__lever {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 14px;
  background: var(--ink-dim);
  border-radius: 2px;
  transition: left 300ms var(--ease), background 300ms var(--ease);
  box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.toggle__input:checked ~ .toggle__track .toggle__lever {
  left: 22px;
  background: var(--signal);
  box-shadow: 0 0 10px var(--signal-glow), 0 1px 3px rgba(0,0,0,0.5);
}

.toggle__input:checked ~ .toggle__track {
  border-color: var(--signal);
  background: rgba(233, 46, 26, 0.08);
}

.toggle__label {
  font-family: var(--ff-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  transition: color var(--dur) var(--ease);
}

.toggle__input:checked ~ .toggle__label {
  color: var(--signal);
}

/* ==========================================================================
   DIAL GLOW — backlight arc that follows the needle
   ========================================================================== */

/* (dial-glow circles removed — see seg--on for backlight) */

/* ==========================================================================
   DASHBOARD ON/OFF — progressive boot sequence
   Segments, bars, needles, and glow all animate together using
   CSS staggered delays keyed to --i (segment index) and --bi (bar index).
   ========================================================================== */

/* --- OFF state: everything dim, fast transition back --- */
.seg       { stroke-opacity: 0.08; transition: stroke-opacity 250ms var(--ease); }
.seg--dim  { stroke: var(--ink-faint); stroke-opacity: 0.5; } /* unlit ticks — always visible, no animation */
.seg--hot  { stroke: var(--turbo); stroke-opacity: 0.18; } /* redline always dimly visible like a painted mark */
.bar       { fill-opacity: 0.08;   transition: fill-opacity 250ms var(--ease), fill 250ms var(--ease); fill: var(--ink-faint); }

.gauge:not([data-on="true"]) .needle      { opacity: 0.08; }
.gauge:not([data-on="true"]) .dial-val    { opacity: 0.12; }
.gauge:not([data-on="true"]) .dial-glow   { opacity: 0; }
.gauge:not([data-on="true"]) .mini-val    { opacity: 0.12; }
.gauge:not([data-on="true"]) .gauge-label { opacity: 0.15; }
.gauge:not([data-on="true"]) .platform-label { opacity: 0.25; }
.gauge:not([data-on="true"]) .gauge__cell-val { opacity: 0.15; }
.gauge:not([data-on="true"]) .hub-dot     { fill-opacity: 0.15; }

/* --- ON state: progressive boot --- */

/* Per-dial / per-stack offsets — each instrument has its own rhythm so the
   dashboard doesn't feel mechanically synchronized. Keep offsets modest
   (200–500ms) so it still feels like one panel, not four separate widgets. */
.dial-segs--a   { --dial-delay: 0ms; }
.dial-segs--b   { --dial-delay: 260ms; }
.bar-stack--left  { --stack-delay: 140ms; }
.bar-stack--right { --stack-delay: 480ms; }

/* Segments light up following the needle (--i: 0 = first, 18 = last) */
.gauge[data-on="true"] .seg--on {
  stroke: var(--signal);
  stroke-opacity: 0.95;
  filter: drop-shadow(0 0 6px var(--signal)) drop-shadow(0 0 14px var(--signal-glow));
  transition: stroke-opacity 120ms var(--ease), filter 120ms var(--ease);
  transition-delay: calc(var(--dial-delay, 0ms) + var(--i) * 75ms);
}
.gauge[data-on="true"] .seg--dim {
  stroke: var(--ink-faint);
  stroke-opacity: 0.5;
  transition: stroke-opacity 200ms var(--ease);
  transition-delay: calc(var(--dial-delay, 0ms) + var(--i) * 75ms);
}
.gauge[data-on="true"] .seg--hot {
  stroke: var(--turbo);
  stroke-opacity: 1;
  filter: drop-shadow(0 0 5px var(--turbo));
  transition: stroke-opacity 300ms var(--ease);
  transition-delay: var(--dial-delay, 0ms); /* redline lights with its dial */
}

/* Bars rise from bottom (--bi: 0 = bottom/first, 9 = top/last) */
.gauge[data-on="true"] .bar--fill {
  fill: var(--signal);
  fill-opacity: 0.9;
  filter: drop-shadow(0 0 2px var(--signal-glow));
  transition: fill-opacity 100ms var(--ease), fill 100ms var(--ease);
  transition-delay: calc(var(--stack-delay, 0ms) + var(--bi) * 100ms);
}
.gauge[data-on="true"] .bar--hot {
  fill: var(--turbo);
  fill-opacity: 0.95;
  filter: drop-shadow(0 0 3px var(--turbo-glow));
  transition: fill-opacity 100ms var(--ease), fill 100ms var(--ease);
  transition-delay: calc(var(--stack-delay, 0ms) + var(--bi) * 100ms);
}

/* (glow arc removed — backlight now comes from boosted segment drop-shadows) */

/* Other elements fade in during boot */
.gauge[data-on="true"] .needle      { opacity: 1; transition: opacity 300ms var(--ease) 100ms; }
.gauge[data-on="true"] .gauge-label { opacity: 1; transition: opacity 300ms var(--ease) 100ms; }
.gauge[data-on="true"] .platform-label { opacity: 1; transition: opacity 300ms var(--ease) 100ms; }
.gauge[data-on="true"] .hub-dot     { fill-opacity: 1; transition: fill-opacity 300ms var(--ease); }
.gauge[data-on="true"] .gauge__cell-val { opacity: 1; transition: opacity 400ms var(--ease) 300ms; }
.gauge[data-on="true"] .dial-val    { opacity: 1; transition: opacity 400ms var(--ease) 600ms; }
.gauge[data-on="true"] .mini-val    {
  opacity: 1;
  transition: opacity 300ms var(--ease);
  transition-delay: calc(var(--stack-delay, 0ms) + 1050ms);
}

/* Hero grid variant — gauge gets a 1fr column */
.hero__grid--gauge {
  grid-template-columns: 1fr;
}
@media (min-width: 980px) {
  .hero__grid--gauge {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-16);
  }
}

/* ==========================================================================
   TURBO LOOP — dollar in → dollars out diagram
   ========================================================================== */

.loop {
  padding: var(--s-12);
  border: 1px solid var(--border-hi);
  background: var(--bg-panel);
  position: relative;
  overflow: hidden;
}

@media (min-width: 880px) { .loop { padding: var(--s-16); } }

.loop::before,
.loop::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border: 1px solid var(--signal);
  pointer-events: none;
}
.loop::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.loop::after  { bottom: -1px; right: -1px; border-left: none; border-top: none; }

.loop__head {
  max-width: 58ch;
  margin: 0 auto var(--s-12);
  text-align: center;
}

.loop__title {
  font-family: var(--ff-display);
  font-size: clamp(2rem, 3.8vw + 1rem, 3.5rem);
  font-weight: 500;
  line-height: 0.98;
  color: var(--ink);
  margin: 0 0 var(--s-5) 0;
  letter-spacing: -0.028em;
  font-variation-settings: "SOFT" 30, "opsz" 144;
  text-wrap: balance;
}
.loop__title em { font-style: italic; color: var(--signal); font-weight: 400; }

.loop__sub {
  font-family: var(--ff-mono);
  font-size: var(--fs-md);
  color: var(--ink-dim);
  line-height: 1.65;
  margin: 0;
  text-wrap: balance;
}

.loop__diagram {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
  align-items: center;
  max-width: 960px;
  margin: 0 auto;
}

@media (min-width: 880px) {
  .loop__diagram {
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: var(--s-4);
  }
}

.loop__cell {
  border: 1px solid var(--border-hi);
  background: var(--bg-panel-hi);
  padding: var(--s-8) var(--s-5);
  text-align: center;
  position: relative;
  min-height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.loop__cell--process {
  background: var(--bg);
  border-style: dashed;
  border-color: var(--border-hi);
}

.loop__cell-label {
  font-family: var(--ff-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: var(--s-4);
}

.loop__cell-val {
  font-family: var(--ff-display);
  font-size: clamp(2.5rem, 4vw + 0.5rem, 3.5rem);
  font-weight: 500;
  line-height: 1;
  color: var(--signal);
  letter-spacing: -0.03em;
  font-variation-settings: "SOFT" 20, "opsz" 144;
  margin-bottom: var(--s-2);
  font-variant-numeric: tabular-nums;
}

.loop__cell--process .loop__cell-val {
  font-family: var(--ff-mono);
  font-size: var(--fs-lg);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}

.loop__cell-note {
  font-family: var(--ff-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  color: var(--ink-faint);
  text-transform: uppercase;
}

.loop__arrow {
  font-family: var(--ff-mono);
  color: var(--signal);
  font-size: var(--fs-2xl);
  line-height: 1;
  text-align: center;
  font-weight: 300;
}

@media (max-width: 880px) {
  .loop__arrow { transform: rotate(90deg); padding: var(--s-2) 0; }
}

.loop__note {
  margin: var(--s-10) auto 0;
  text-align: center;
  font-family: var(--ff-mono);
  font-size: var(--fs-sm);
  color: var(--ink-dim);
  padding-top: var(--s-6);
  border-top: 1px dashed var(--border);
  max-width: 66ch;
  line-height: 1.65;
}
.loop__note strong { color: var(--signal); font-weight: 500; }

/* ==========================================================================
   Small tune-ups for hero
   ========================================================================== */

.hero__headline { max-width: 18ch; }

/* ==========================================================================
   GROWTH CHART — stacked area, one band per paid channel
   ========================================================================== */

.chart {
  border: 1px solid var(--border-hi);
  background: var(--bg-panel);
  padding: var(--s-6) var(--s-6) var(--s-5);
  position: relative;
}
.chart::before,
.chart::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border: 1px solid var(--signal);
  pointer-events: none;
}
.chart::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.chart::after  { bottom: -1px; right: -1px; border-left: none; border-top: none; }

.chart__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: var(--s-3);
  margin-bottom: var(--s-5);
  border-bottom: 1px solid var(--border);
  font-family: var(--ff-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  gap: var(--s-4);
  flex-wrap: wrap;
}
.chart__head strong {
  color: var(--signal);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}

.chart__svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 420px;
  aspect-ratio: 2.3 / 1;
}

.chart__svg .grid-line      { stroke: var(--border); stroke-width: 1; stroke-dasharray: 2 4; }
.chart__svg .axis-line      { stroke: var(--border-hi); stroke-width: 1; }
.chart__svg .axis-label     {
  font-family: var(--ff-mono);
  font-size: 11px;
  fill: var(--ink-faint);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
}
.chart__svg .axis-label--hot { fill: var(--signal); }
.chart__svg .axis-label--dim { fill: var(--ink-faint); opacity: 0.7; }
.chart__svg .axis-tick      { stroke: var(--border-hi); stroke-width: 1; }

.chart__svg .area-1         { fill: var(--signal); fill-opacity: 0.12; }  /* google — bottom */
.chart__svg .area-2         { fill: var(--signal); fill-opacity: 0.22; }  /* meta */
.chart__svg .area-3         { fill: var(--signal); fill-opacity: 0.34; }  /* tiktok */
.chart__svg .area-4         { fill: var(--signal); fill-opacity: 0.50; }  /* reddit — top */
.chart__svg .line-sub       { fill: none; stroke: var(--signal); stroke-width: 1; stroke-opacity: 0.35; }
.chart__svg .line-total     {
  fill: none;
  stroke: var(--signal);
  stroke-width: 2.5;
  filter: drop-shadow(0 0 6px var(--signal-glow));
}

.chart__svg .flag-pole      { stroke: var(--signal); stroke-width: 1; stroke-opacity: 0.6; }
.chart__svg .flag-cell      { fill: var(--signal); fill-opacity: 0.85; }
.chart__svg .flag-outline   { fill: none; stroke: var(--signal); stroke-width: 0.5; stroke-opacity: 0.5; }

.chart__svg .now-line       { stroke: var(--signal); stroke-width: 1; stroke-dasharray: 1 4; opacity: 0.7; }
.chart__svg .dot-now        { fill: var(--signal); filter: drop-shadow(0 0 6px var(--signal)); }

.chart__svg .pixel-tick     { fill: var(--ink-dim); }

.chart__svg .baseline {
  stroke: var(--ink-dim);
  stroke-width: 1.5;
  stroke-dasharray: 3 5;
  opacity: 0.6;
}
.chart__svg .baseline-label {
  font-family: var(--ff-mono);
  font-size: 10px;
  fill: var(--ink-dim);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  opacity: 0.8;
}

/* ---- Scroll-in reveal animation ---- */
.chart__svg .reveal-rect {
  width: 0;
  transition: width 2400ms cubic-bezier(0.2, 0, 0.15, 1);
}
.chart--in-view .chart__svg .reveal-rect { width: 660px; }

/* Target line — grey baseline that turns orange as chart data reaches it */
.chart__svg .target-line {
  stroke: var(--ink-faint);
  stroke-width: 1.5;
  stroke-dasharray: 3 5;
  opacity: 0;
  transition: opacity 400ms var(--ease) 200ms;
}
.chart--in-view .chart__svg .target-line { opacity: 0.6; }

.chart__svg .target-line-hit {
  stroke: var(--turbo);
  stroke-width: 1.5;
  stroke-dasharray: 3 5;
  opacity: 0;
  stroke-dashoffset: 0;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 2400ms cubic-bezier(0.2, 0, 0.15, 1) 0ms,
              opacity 300ms var(--ease) 200ms;
}
.chart--in-view .chart__svg .target-line-hit {
  opacity: 0.9;
  clip-path: inset(0 0 0 0);
}

/* Stage 1: TARGET label appears as a waypoint (300ms) */
.chart__svg .chart__target {
  font-family: var(--ff-mono);
  font-size: 12px;
  fill: var(--turbo);
  text-anchor: start;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  opacity: 0;
  transition: opacity 500ms var(--ease) 300ms;
}
.chart--in-view .chart__svg .chart__target { opacity: 1; }

/* Stage 2: NOW line + dot fade in (2000ms) */
.chart__svg .chart__now {
  opacity: 0;
  transition: opacity 500ms var(--ease) 2000ms;
}
.chart--in-view .chart__svg .chart__now { opacity: 1; }

/* Stage 3: Crossed flags POP IN at target (2400ms) — no movement, just appear in place */
.chart__svg .finish-flags {
  transform-origin: 730px 68px;
  transform-box: view-box;
  opacity: 0;
  transform: scale(0);
}
.chart--in-view .chart__svg .finish-flags {
  animation: flag-pop 700ms cubic-bezier(0.22, 1.4, 0.36, 1) 2400ms both;
}

@keyframes flag-pop {
  0%   { opacity: 0; transform: scale(0); }
  45%  { opacity: 1; transform: scale(1.15); }
  70%  { transform: scale(0.92); }
  100% { opacity: 1; transform: scale(1); }
}

.chart__svg .flag-pole {
  stroke: var(--signal);
  stroke-width: 1.5;
  stroke-opacity: 0.7;
}

.chart__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px dashed var(--border);
  font-family: var(--ff-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  gap: var(--s-4);
  flex-wrap: wrap;
}
.chart__legend {
  display: flex;
  gap: var(--s-5);
  flex-wrap: wrap;
}
.chart__legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--ink-dim);
}
.chart__swatch {
  width: 16px;
  height: 8px;
  background: var(--signal);
  display: inline-block;
}
.chart__swatch--dim { opacity: 0.38; }

/* ==========================================================================
   CHECKERED FLAG — subtle racing element
   ========================================================================== */

.checker {
  display: block;
  width: 100%;
  height: 10px;
  background-image:
    repeating-conic-gradient(var(--ink-faint) 0% 25%, transparent 0% 50%);
  background-size: 10px 10px;
  background-position: 0 0;
  opacity: 0.35;
}
.checker--tall { height: 14px; background-size: 14px 14px; }
.checker--signal {
  background-image:
    repeating-conic-gradient(var(--signal) 0% 25%, transparent 0% 50%);
  opacity: 0.45;
}

/* Full-width racing finish strip — bottom of page */
.checker-strip {
  width: 100%;
  height: 56px;
  background-image:
    repeating-conic-gradient(var(--signal) 0% 25%, transparent 0% 50%);
  background-size: 28px 28px;
  opacity: 0.28;
  mask-image: linear-gradient(to right, black 0%, transparent 30%, transparent 70%, black 100%);
  -webkit-mask-image: linear-gradient(to right, black 0%, transparent 30%, transparent 70%, black 100%);
  margin-top: var(--s-6);
}

/* Top variant — mirrored fade (solid right → transparent left) */
.checker-strip--top {
  margin: 0;
  mask-image: linear-gradient(245deg, black 0%, black 35%, transparent 70%);
  -webkit-mask-image: linear-gradient(245deg, black 0%, black 35%, transparent 70%);
}

/* Vertical variant for chart "finish line" end marker */
.checker-vert {
  display: inline-block;
  width: 10px;
  background-image:
    repeating-conic-gradient(var(--signal) 0% 25%, var(--bg-panel) 0% 50%);
  background-size: 10px 10px;
}