@import url('fonts.css');

:root {
  --ink: #0a0f14;
  --paper: #070b0f;
  --paper-2: #0c1218;
  --panel: rgba(17, 26, 34, 0.55);
  --panel-solid: #111a22;
  --panel-2: rgba(22, 33, 43, 0.6);
  --border: rgba(34, 48, 57, 0.9);
  --border-glow: rgba(45, 212, 196, 0.35);
  --teal: #14b8a6;
  --teal-deep: #0d9488;
  --teal-glow: #2dd4c4;
  --on-teal: #051312;
  --success: #34d399;
  --warning: #fbbf24;
  --critical: #f87b93;
  --text-body: #e6edeb;
  --text-soft: #9fb0ac;
  --text-faint: #62726f;

  --font-display: 'Fraunces', ui-serif, Georgia, serif;
  --font-body: 'IBM Plex Sans', -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --glass-blur: blur(18px);
  --shadow-glow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;

  --step-hero:    clamp(2.4rem, 5.2vw, 4rem);
  --step-hero-sm: clamp(2rem, 4.4vw, 3.2rem);
  --step-section: clamp(1.9rem, 3.4vw, 2.8rem);
  --step-feature: clamp(1.8rem, 3.2vw, 2.5rem);
  --step-cta:     clamp(1.8rem, 3.4vw, 2.4rem);
  --step-contact: clamp(2rem, 4vw, 2.8rem);
  --heading-gap:  14px;

  --glow-none:   var(--shadow-glow);
  --glow-subtle: var(--shadow-glow), 0 0 16px rgba(45, 212, 196, 0.10);
  --glow-medium: var(--shadow-glow), 0 0 24px rgba(45, 212, 196, 0.20);
  --glow-strong: var(--shadow-glow), 0 0 32px rgba(45, 212, 196, 0.35);
  --ambient-glow-opacity-1: 0.35;
  --ambient-glow-opacity-2: 0.25;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}
::selection { background: var(--teal); color: var(--on-teal); }

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 600;
  text-wrap: balance;
  margin: 0;
  letter-spacing: -0.01em;
  color: #fff;
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal-glow);
}
p { margin: 0; }
.prose { max-width: 62ch; color: var(--text-soft); font-size: 1.08rem; line-height: 1.65; }
.tnum { font-variant-numeric: tabular-nums; }
.h-section { font-size: var(--step-section); margin-top: var(--heading-gap); }
.h-cta { font-size: var(--step-cta); margin-top: var(--heading-gap); }
a { color: var(--teal-glow); text-decoration: none; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--teal-glow);
  outline-offset: 3px;
  border-radius: 4px;
}
.nav-toggle:focus-visible + .nav-toggle-btn {
  outline: 2px solid var(--teal-glow);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---- Ambient background glow (what the glass panels refract) ---- */
.bg-glow {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.bg-glow::before, .bg-glow::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
}
.bg-glow::before {
  width: 60vw; height: 60vw;
  top: -20vw; right: -15vw;
  background: radial-gradient(circle, var(--teal) 0%, transparent 70%);
  opacity: var(--ambient-glow-opacity-1);
}
.bg-glow::after {
  width: 50vw; height: 50vw;
  bottom: -20vw; left: -10vw;
  background: radial-gradient(circle, #0d9488 0%, transparent 70%);
  opacity: var(--ambient-glow-opacity-2);
}
.bg-grid {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(45, 212, 196, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45, 212, 196, 0.04) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 40%, transparent 100%);
}

/* ---- Glass components ---- */
.glass {
  background: var(--panel);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--glow-none);
}
.glass-hover {
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.glass-hover:hover {
  border-color: var(--border-glow);
  transform: translateY(-2px);
}

/* ---- Layout ---- */
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 32px; }
.section { padding: 96px 0; }
.section-tight { padding: 56px 0; }

/* ---- Header / nav ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(7, 11, 15, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.site-header .wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  color: #fff;
}
.brand .mark {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: #0f766e; /* matches the app's logo mark exactly, not the site's --teal/--teal-deep accent pair */
  display: flex; align-items: center; justify-content: center;
  color: var(--on-teal);
  font-size: 1rem;
  box-shadow: var(--glow-subtle);
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  font-size: 0.95rem;
}
.nav-links a:not(.btn) { color: var(--text-soft); }
.nav-links a:not(.btn):hover { color: #fff; }
.nav-links a.current { color: var(--teal-glow); }

.nav-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.nav-toggle-btn { display: none; }

@media (max-width: 860px) {
  .nav-toggle-btn {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    cursor: pointer; border-radius: 8px;
  }
  .nav-toggle-bars,
  .nav-toggle-bars::before,
  .nav-toggle-bars::after {
    content: ''; display: block; width: 20px; height: 2px;
    background: var(--text-body);
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  .nav-toggle-bars { position: relative; }
  .nav-toggle-bars::before { position: absolute; top: -6px; }
  .nav-toggle-bars::after  { position: absolute; top: 6px; }
  .nav-toggle:checked ~ .nav-toggle-btn .nav-toggle-bars { background: transparent; }
  .nav-toggle:checked ~ .nav-toggle-btn .nav-toggle-bars::before { transform: translateY(6px) rotate(45deg); }
  .nav-toggle:checked ~ .nav-toggle-btn .nav-toggle-bars::after  { transform: translateY(-6px) rotate(-45deg); }

  .nav-links {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 4px;
    padding: 12px;
    background: rgba(7, 11, 15, 0.96);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
  }
  .nav-toggle:checked ~ .nav-links { display: flex; }

  .nav-links a:not(.btn) {
    padding: 14px 16px; min-height: 44px;
    display: flex; align-items: center; border-radius: 8px;
  }
  .nav-links a:not(.btn):hover { background: var(--panel); }
  .nav-links .btn { width: 100%; justify-content: center; padding: 14px 22px; }
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 12px 22px;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.btn-primary {
  background: linear-gradient(135deg, var(--teal-glow), var(--teal-deep));
  color: var(--on-teal);
  box-shadow: var(--glow-medium);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: var(--glow-strong); }
.btn-ghost {
  background: var(--panel);
  color: #fff;
  border-color: var(--border);
}
.btn-ghost:hover { border-color: var(--border-glow); }
.btn-sm { padding: 9px 16px; font-size: 0.85rem; }

/* ---- Hero ---- */
.hero { padding: 88px 0 64px; text-align: left; }
.hero h1 {
  font-size: var(--step-hero);
  line-height: 1.06;
  margin-top: 18px;
  max-width: 16ch;
}
.hero--compact h1 { font-size: var(--step-hero-sm); }
.hero .prose { margin-top: 22px; font-size: 1.2rem; }
.hero-cta { display: flex; gap: 16px; margin-top: 36px; flex-wrap: wrap; }
/* .hero .prose above is a plain descendant selector -- now that
   .cba-panel nests inside .hero, it would also match .cba-intro .prose
   and the methodology <details> text, inflating them to the hero's
   larger 1.2rem lead-paragraph size. Reset explicitly back to base. */
.hero .cba-panel .prose { font-size: 1.08rem; }
.hero .cba-panel { margin-top: 48px; }
.stack-badge {
  margin-top: 56px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-faint);
  letter-spacing: 0.04em;
}
.stack-count {
  color: var(--teal-glow);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.03em;
}
.stack-group b {
  color: var(--text-soft);
  font-weight: 600;
  margin-right: 8px;
  letter-spacing: 0.03em;
}

/* ---- Cards / grids ---- */
/* ---- Breakpoints ----
   860px "tablet"  — grid-3/grid-2 → 1 column; primary nav → hamburger menu
   640px "phone"   — tighter section/wrap padding; compact contact panel & CTA */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
@media (max-width: 860px) {
  .grid-3 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
}
.card { padding: 28px; }
.card .eyebrow { display: block; margin-bottom: 10px; }
.card h3 { font-size: 1.25rem; margin-top: 8px; }
.card .prose { margin-top: 10px; font-size: 0.98rem; }
.card-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--teal-glow);
  font-family: var(--font-mono);
  font-weight: 600;
}
.card-icon.tinted {
  border-color: var(--border-glow);
  background: rgba(20, 184, 166, 0.12);
}

/* Suppress native number-input spinner arrows site-wide, for the 3
   fields in the full #cba-panel calculator (merged into the hero).
   Without this, Chrome/Safari's up/down stepper carries unused visual
   weight the design doesn't call for. */
input[type="number"] {
  -moz-appearance: textfield;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ---- Card 01: single-line cited stat ----
   v6: card 01 absorbs the "Do the math" panel's headline idea and its
   41%-slippage stat, folded into one prose sentence + this one inline
   stat line -- deliberately NOT the panel's old stacked format (big
   number on its own line, separate label paragraph, separate footnote
   paragraph). That stacked format is what blew card 01's height budget
   in earlier passes; keeping it to a single flowing <p> (number + label
   + citation, one element, no extra vertical margins between them) is
   what keeps this card in the same weight class as 02/03. See the
   .cba-panel comment below for where the stat used to live. */
.card-stat-line {
  margin-top: 12px;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text-soft);
}
.card-stat-num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--teal-glow);
  margin-right: 2px;
}
.card-stat-cite {
  color: var(--text-faint);
  text-decoration: underline;
  text-underline-offset: 2px;
  margin-left: 2px;
}
.card-stat-cite:hover { color: var(--teal-glow); }

/* ---- Screenshot frame ---- */
.shot-frame {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--glow-none);
}
.shot-frame img { display: block; width: 100%; height: auto; }
.shot-cap {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-faint);
  margin-top: 14px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.shot-cap .tag {
  color: var(--on-teal);
  background: var(--teal-glow);
  padding: 2px 7px;
  border-radius: 5px;
  font-weight: 600;
  font-size: 0.7rem;
}

/* ---- Feature row (highlights page) ---- */
.feature {
  padding: 88px 0;
  border-top: 1px solid var(--border);
}
.feature:first-child { border-top: none; }
.feature-num { font-family: var(--font-mono); color: var(--text-faint); font-size: 0.85rem; }
.feature h2 { font-size: var(--step-feature); margin-top: var(--heading-gap); }
.feature .prose { margin-top: 16px; }
.feature .grid-2 { margin-top: 40px; }

/* ---- Stat strip ---- */
.stat { font-family: var(--font-display); font-size: 2.2rem; font-weight: 600; color: var(--teal-glow); line-height: 1; }
.stat-label { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-faint); letter-spacing: 0.06em; text-transform: uppercase; margin-top: 8px; }

/* ---- Comparison table ---- */
.compare-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 8px; margin-top: 40px; }
.compare { width: 100%; border-collapse: collapse; margin-top: 40px; min-width: 560px; }
.compare th, .compare td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--border); font-size: 0.95rem; }
.compare th { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); }
.compare td.stryde-col { color: var(--teal-glow); }
.compare td.compare-row-label { text-transform: none; letter-spacing: 0; }
.compare tr:last-child td { border-bottom: none; }

/* ---- CTA panel (reused mid-page callout block) ---- */
.cta-panel { padding: 56px; text-align: center; }

/* ---- Contact page ---- */
.contact-panel { max-width: 640px; margin: 0 auto; padding: 64px 48px; text-align: center; }
.contact-panel h1 { font-size: var(--step-contact); }
.contact-panel .prose { margin: 20px auto 0; }
.contact-panel .btn { margin-top: 32px; }

/* ---- Footer ---- */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 48px 0;
}
.site-footer .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 0.88rem;
  color: var(--text-faint);
}
.site-footer a { color: var(--text-soft); }
.site-footer a:hover { color: var(--teal-glow); }

@media (max-width: 640px) {
  .wrap { padding: 0 20px; }
  .section { padding: 64px 0; }
  .site-header .wrap { height: 60px; }
  .contact-panel { padding: 40px 24px; }
  .cta-panel { padding: 40px 24px; }
  .hero .cba-panel { margin-top: 32px; }

  /* Comparison table: horizontal scroll hides the "Stryde" column with no
     affordance that there's more off-screen. Below 640px, drop the grid
     and stack each row as label + two data points instead. */
  .compare-scroll { overflow-x: visible; padding: 4px; margin-top: 28px; }
  .compare { min-width: 0; width: 100%; margin-top: 0; }
  .compare thead { display: none; }
  .compare tbody, .compare tr, .compare td { display: block; width: 100%; }
  .compare tr { padding: 18px 4px; border-bottom: 1px solid var(--border); }
  .compare tr:last-child { border-bottom: none; }
  .compare td { padding: 3px 0; border-bottom: none; }
  .compare td:first-child { padding-bottom: 8px; }
  .compare td[data-label]::before {
    content: attr(data-label) ": ";
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: var(--text-faint);
  }
}

/* ---- CBA calculator (full panel) ----
   v7: the panel is now merged directly into <section class="hero"> as a
   sibling of the headline/CTA -- see .hero .cba-panel below for the
   spacing/font-size rules that govern it in that position. It's still
   dense enough (3 fields with presets, methodology, CTA/trust copy)
   that it stays a full-width block rather than a grid column. */
.cba-panel {
  padding: 56px;
  /* #cba-panel is still a valid, externally-reachable anchor (direct
     URL/bookmark/back-forward nav, not an in-page link anymore -- the
     old card links into it were removed in v7) -- the site header is
     position: sticky (72px tall, see .site-header), so without this the
     eyebrow/headline land underneath it on arrival. 60px header on
     mobile is covered by the 640px override below. */
  scroll-margin-top: 96px;
}

.cba-intro { margin-bottom: 8px; }
.cba-intro .prose { max-width: 60ch; }

.cba-calc {
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid var(--border);
}

/* 3-up at desktop: the panel is full-width now (~940px inner content at
   the site's 1120px wrap), so each field gets ~290px -- comfortable for
   a label + input, with the preset-button group wrapping to its own
   lines within the "hours per table" column as needed (see .cba-presets
   below). Collapses to 1 column at the 860px tablet breakpoint alongside
   the rest of the site's grid-3/grid-2 rules. */
.cba-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; }
@media (max-width: 860px) {
  .cba-fields { grid-template-columns: 1fr; }
}

.cba-field label { display: block; font-size: 0.92rem; color: var(--text-body); margin-bottom: 8px; }
.cba-hint { display: block; font-family: var(--font-mono); font-size: 0.76rem; color: var(--text-faint); font-weight: 400; margin-top: 2px; }

.cba-field input[type="number"] {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text-body);
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 11px 14px;
}
.cba-field input[type="number"]:focus-visible {
  outline: 2px solid var(--teal-glow);
  outline-offset: 2px;
  border-color: var(--border-glow);
}

/* flex-wrap, not a fixed 2-up grid: at narrow widths (mobile, and the
   ~290px-wide field column at desktop) two preset buttons with long
   band labels ("Large tables · 10K+ rows, with transforms (3-5 hrs)")
   don't both fit on one line -- wrapping lets the second one drop to
   its own line instead of overflowing or getting truncated. */
.cba-presets { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.cba-preset-btn {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-soft);
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 12px;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.cba-preset-btn:hover { border-color: var(--border-glow); color: #fff; }
.cba-preset-btn[aria-pressed="true"] {
  border-color: var(--teal-glow);
  color: var(--teal-glow);
  background: rgba(20, 184, 166, 0.12);
}

.cba-result {
  display: flex;
  flex-wrap: wrap;
  gap: 28px 36px;
  margin-top: 32px;
  padding: 22px;
  border-radius: 12px;
  background: var(--panel-2);
  border: 1px solid var(--border);
}
.cba-result > div { display: flex; flex-direction: column; }

.cba-disclaimer, .cba-stryde-disclaimer {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--text-faint);
  margin-top: 12px;
}

.cba-explain { margin-top: 24px; }
.cba-explain summary {
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--teal-glow);
  letter-spacing: 0.01em;
}
.cba-explain summary:hover { color: var(--teal); }
.cba-explain code {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  color: var(--text-body);
  background: var(--panel-2);
  padding: 2px 6px;
  border-radius: 5px;
}
.cba-explain .prose p + p { margin-top: 10px; }

/* "Cost with Stryde" banding -- sits directly below the manual-cost result
   inside .cba-calc, separated by a rule so it reads as a second, related
   result rather than a competing calculator. The 3 band states share this
   wrapper; calculator.js toggles which one is visible via [hidden]. */
.cba-stryde {
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}
.cba-stryde .eyebrow { display: block; margin-bottom: 14px; }
.cba-stryde .cba-result { margin-top: 0; }

.cba-cta { margin-top: 36px; }
.cba-pricing-link {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
}
.cba-trust {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--text-faint);
  margin-top: 14px;
  max-width: 64ch;
}

@media (max-width: 640px) {
  .cba-panel { padding: 40px 24px; scroll-margin-top: 80px; }
}

/* ---- Glow budget utilities ----
   Placed last so they win source-order ties against the component defaults
   above (.glass, .btn-primary, .shot-frame, etc.) at equal specificity.
   Apply deliberately per element — most things should stay glow-none. */
.glow-none   { box-shadow: var(--glow-none); }
.glow-subtle { box-shadow: var(--glow-subtle); }
.glow-medium { box-shadow: var(--glow-medium); }
.glow-strong { box-shadow: var(--glow-strong); }
.glow-hover-subtle:hover { box-shadow: var(--glow-subtle); }
.glow-hover-medium:hover { box-shadow: var(--glow-medium); }
.glow-hover-strong:hover { box-shadow: var(--glow-strong); }