@import url("fonts.css");

/* ==========================================================================
   Siiv marketing site
   Design tokens follow the product palette: deep green ground, single
   bright green accent, off-white type.
   ========================================================================== */

:root {
  /* Ground and surfaces */
  --bg:            #071E0A;
  --surface:       #0D2E12;
  --surface-alt:   #0A2610;

  /* Accent */
  --accent:        #95E066;
  --accent-hi:     #A8E880;
  --accent-drop:   #528831;
  --accent-soft:   #C6F2A6;

  /* Secondary button */
  --btn2-bg:       #1C4510;
  --btn2-bg-hover: #1D7929;
  --btn2-drop:     #284616;

  /* Type */
  --fg:            #FAFAFA;
  --fg-bright:     #E8E8E8;
  --fg-muted:      #C7C7C7;
  --fg-soft:       rgba(250, 250, 250, 0.62);
  --fg-dim:        rgba(250, 250, 250, 0.60);
  --fg-faint:      rgba(250, 250, 250, 0.50);

  /* Caution (consumer-email prompt) */
  --warn:          #E5D049;
  --warn-line:     rgba(229, 208, 73, 0.45);
  --warn-bg:       rgba(229, 208, 73, 0.07);

  /* Hairlines, in ascending strength */
  --line-1: rgba(149, 224, 102, 0.12);
  --line-2: rgba(149, 224, 102, 0.16);
  --line-3: rgba(149, 224, 102, 0.22);
  --line-4: rgba(149, 224, 102, 0.35);
  --line-n: rgba(250, 250, 250, 0.20);
  --line-n2: rgba(250, 250, 250, 0.24);

  /* Type families */
  --font-display: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body:    Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Rhythm */
  --maxw:  1120px;
  --pad-x: clamp(20px, 5vw, 40px);
  --pad-y: clamp(56px, 7vw, 104px);
  --radius:   10px;
  --radius-lg: 12px;
  --radius-sm: 5px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  /* Keep anchored sections clear of the sticky header. */
  scroll-padding-top: 84px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-soft); }

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

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

input, textarea, button, select { font-family: inherit; font-size: inherit; }
input::placeholder, textarea::placeholder { color: rgba(250, 250, 250, 0.28); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Screen-reader-only, but focusable (skip link). */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip-link:focus {
  position: fixed;
  top: 12px; left: 12px;
  z-index: 100;
  width: auto; height: auto;
  clip: auto; clip-path: none;
  margin: 0;
  padding: 12px 18px;
  background: var(--accent);
  color: var(--bg);
  font: 600 14px/1 var(--font-body);
  border-radius: var(--radius-sm);
}

[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

.wrap { max-width: var(--maxw); margin-inline: auto; }

.section {
  padding: var(--pad-y) var(--pad-x);
  border-top: 1px solid var(--line-1);
}
.section--flush { border-top: 0; }
.section--tint { background: var(--surface-alt); }

/* Two-column: label on the left, prose on the right. Stacks on mobile. */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 4vw, 40px);
  align-items: start;
}
@media (min-width: 760px) {
  .split {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: clamp(28px, 5vw, 72px);
  }
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

.eyebrow {
  margin: 0 0 18px;
  font: 500 11px/1 var(--font-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow--quiet { color: rgba(250, 250, 250, 0.58); }

.h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(38px, 7vw, 76px);
  line-height: 0.99;
  letter-spacing: -0.038em;
  color: var(--fg);
  text-wrap: balance;
}
.h1--home { font-size: clamp(42px, 7.6vw, 84px); line-height: 0.97; max-width: 15ch; }

.h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(30px, 4.2vw, 48px);
  line-height: 1.04;
  letter-spacing: -0.032em;
  color: var(--fg);
  text-wrap: balance;
}

.h3 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--fg);
}

.lead {
  margin: clamp(24px, 3vw, 34px) 0 0;
  max-width: 56ch;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.55;
  color: var(--fg-muted);
  text-wrap: pretty;
}

.prose {
  margin: 0;
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.66;
  color: var(--fg-muted);
  text-wrap: pretty;
}
.prose + .prose { margin-top: 20px; color: var(--fg); }

.copy {
  margin: 0;
  font-size: 15px;
  line-height: 1.62;
  color: var(--fg-muted);
  text-wrap: pretty;
}

.note {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg-dim);
}

.num {
  margin: 0 0 14px;
  font: 500 11px/1 var(--font-mono);
  letter-spacing: 0.18em;
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(7, 30, 10, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-1);
}
.site-header__inner {
  max-width: 1180px;
  margin-inline: auto;
  padding: 14px var(--pad-x);
  display: flex;
  align-items: center;
  gap: 16px;
}
.site-header__logo { height: 30px; width: auto; margin-bottom: -9px; }
.site-header__cta { margin-left: auto; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-block;
  border: 0;
  border-radius: var(--radius-sm);
  font: 600 15px/1 var(--font-body);
  padding: 15px 26px;
  cursor: pointer;
  text-align: center;
  transition: background-color 140ms ease, color 140ms ease, transform 140ms ease;
}
.btn--primary {
  background: var(--accent);
  color: var(--bg);
  box-shadow: 0 2px 0 var(--accent-drop);
}
.btn--primary:hover { background: var(--accent-hi); color: var(--bg); }
.btn--primary:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--accent-drop); }

.btn--secondary {
  background: var(--btn2-bg);
  color: var(--accent);
  box-shadow: 0 2px 0 var(--btn2-drop);
}
.btn--secondary:hover { background: var(--btn2-bg-hover); color: var(--fg); }
.btn--secondary:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--btn2-drop); }

.btn--sm { font-size: 13px; padding: 11px 16px; }
.btn--block { width: 100%; }

/* Understated inline link, used where the brief calls for a plain link
   rather than another button competing with the primary action. */
.link-quiet {
  display: inline-block;
  font: 500 13px/1 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-soft);
  border-bottom: 1px solid var(--line-4);
  padding-bottom: 5px;
  transition: color 140ms ease, border-color 140ms ease;
}
.link-quiet:hover { color: var(--accent); border-color: var(--accent); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding: clamp(48px, 7vw, 84px) var(--pad-x) clamp(40px, 5vw, 64px);
  overflow: hidden;
}
.hero--tall { padding-top: clamp(64px, 10vw, 128px); padding-bottom: clamp(48px, 6vw, 88px); }
.hero--home { padding: clamp(72px, 12vw, 150px) var(--pad-x) clamp(56px, 8vw, 110px); }

.hero__glow {
  position: absolute;
  top: -190px;
  left: 50%;
  transform: translateX(-50%);
  width: min(900px, 140vw);
  height: 520px;
  background: radial-gradient(ellipse at center, rgba(149, 224, 102, 0.13), rgba(149, 224, 102, 0) 68%);
  pointer-events: none;
}
.hero__inner { position: relative; max-width: var(--maxw); margin-inline: auto; }

.hero__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 3vw, 48px);
  align-items: end;
}
@media (min-width: 860px) {
  .hero__cols { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
}
.hero__sub {
  margin: 0;
  max-width: 52ch;
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.6;
  color: var(--fg-muted);
  text-wrap: pretty;
}
.hero__actions { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }

/* --------------------------------------------------------------------------
   Cards: shared 1px-gap grid used by "What Siiv does" and "What it does today"
   -------------------------------------------------------------------------- */

/* Hairlines come from a border on each cell, pulled 1px outside and clipped
   by the container, rather than from a coloured gap. A gap would leave the
   container colour showing through whenever the item count does not fill the
   last row, which reads as a stray empty box. */
.tiles {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: 0;
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  overflow: hidden;
}
.tiles > * {
  border-top: 1px solid var(--line-2);
  border-left: 1px solid var(--line-2);
  margin: -1px 0 0 -1px;
}
.tile { background: var(--bg); padding: clamp(22px, 2.6vw, 32px); }
.tile__num {
  margin: 0 0 16px;
  font: 500 10px/1 var(--font-mono);
  letter-spacing: 0.18em;
  color: var(--accent);
}
.tile__title {
  margin: 0 0 12px;
  font: 600 20px/1.2 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--fg);
}

/* Shipped-feature rows. Container matches the row colour so a ragged last
   row is invisible. */
.tiles--rows {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  background: var(--surface);
}
.row {
  background: var(--surface);
  padding: 20px 22px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.row__mark {
  width: 8px;
  height: 8px;
  background: var(--accent);
  margin-top: 8px;
  flex: 0 0 auto;
}
.row__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--fg-bright);
  text-wrap: pretty;
}

/* Numbered services list */
.tiles--numbered { grid-template-columns: 1fr; background: var(--surface); }
.row--numbered { padding: clamp(18px, 2.2vw, 26px); align-items: baseline; gap: 18px; }
.row__idx { font: 500 11px/1 var(--font-mono); color: var(--accent); flex: 0 0 auto; }
.row--numbered .row__text { font-size: clamp(15px, 1.3vw, 18px); line-height: 1.55; }

/* --------------------------------------------------------------------------
   Status banners: keeps shipped and planned visually separate
   -------------------------------------------------------------------------- */

.status {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(12px, 1.6vw, 18px);
  margin-bottom: clamp(26px, 3vw, 40px);
}
.badge {
  font: 500 10px/1 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 4px;
}
.badge--shipped { background: var(--accent); color: var(--bg); }
.badge--planned {
  color: var(--fg-dim);
  border: 1px dashed rgba(250, 250, 250, 0.32);
  padding: 5px 10px;
}
.h2--planned { color: rgba(250, 250, 250, 0.72); }

/* Planned features: dashed, dimmer, never reads as available */
.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: clamp(14px, 1.6vw, 20px);
}
.plan {
  border: 1px dashed var(--line-n);
  border-radius: 8px;
  padding: 22px;
}
.plan__title {
  margin: 0 0 8px;
  font: 600 17px/1.28 var(--font-display);
  letter-spacing: -0.018em;
  color: rgba(250, 250, 250, 0.82);
}
.plan__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(250, 250, 250, 0.62);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   How it works
   -------------------------------------------------------------------------- */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  gap: clamp(18px, 2vw, 26px);
}
.step { border-top: 1px solid var(--line-4); padding-top: 22px; }

/* Optional AI note: dashed so it reads as optional, not a requirement */
.aside-optional {
  margin-top: 20px;
  border: 1px dashed var(--line-4);
  border-radius: 8px;
  padding: 18px;
  background: rgba(149, 224, 102, 0.04);
}
.aside-optional__label {
  margin: 0 0 10px;
  font: 500 10px/1 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.aside-optional__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(250, 250, 250, 0.72);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   The connection graphic (home). Coordination data and design data, tied
   together and kept as the project moves through time.
   -------------------------------------------------------------------------- */

.graphic {
  position: relative;
  margin-top: clamp(36px, 5vw, 60px);
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: clamp(16px, 2.6vw, 34px);
  overflow: hidden;
}
.graphic__glow {
  position: absolute;
  top: -40%; left: 20%;
  width: 60%; height: 180%;
  background: radial-gradient(ellipse at center, rgba(149, 224, 102, 0.09), rgba(149, 224, 102, 0) 70%);
  pointer-events: none;
}
.graphic__inner { position: relative; }

.graphic__key {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(12px, 2vw, 26px);
  align-items: center;
  padding-bottom: clamp(16px, 2.2vw, 26px);
  border-bottom: 1px solid rgba(149, 224, 102, 0.14);
}
.key {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 400 clamp(10px, 0.95vw, 11px)/1.3 var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--fg-dim);
}
.key--coord { color: var(--accent); }
.key__swatch { width: 10px; height: 10px; border-radius: 2px; flex: 0 0 auto; }
.key__swatch--coord { background: var(--accent); }
.key__swatch--design { border: 1px solid rgba(250, 250, 250, 0.6); }
.key__caption {
  margin-left: auto;
  font: 400 clamp(10px, 0.95vw, 11px)/1.3 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.timeline { padding-top: clamp(20px, 2.6vw, 30px); }

.tl {
  display: grid;
  /* Wide enough that "week 1" stays on one line at 390px. */
  grid-template-columns: clamp(58px, 7.5vw, 96px) clamp(22px, 2.4vw, 30px) minmax(0, 1fr);
  align-items: start;
}
.tl__when {
  margin: clamp(3px, 0.4vw, 5px) clamp(8px, 1.4vw, 16px) 0 0;
  padding-bottom: clamp(18px, 2.4vw, 26px);
  text-align: right;
  font: 400 clamp(10px, 0.95vw, 11px)/1.3 var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--fg-dim);
}
.tl__rail {
  position: relative;
  display: flex;
  justify-content: center;
  align-self: stretch;
  min-height: 100%;
}
.tl__rail::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 1px;
  background: rgba(149, 224, 102, 0.28);
}
/* Last row: the rail stops at the node instead of running past it. */
.tl--last .tl__rail::before { bottom: auto; height: clamp(14px, 1.6vw, 20px); }

.tl__node {
  position: relative;
  width: clamp(10px, 1.1vw, 13px);
  height: clamp(10px, 1.1vw, 13px);
  border-radius: 2px;
  margin-top: clamp(4px, 0.5vw, 7px);
  box-shadow: 0 0 0 4px var(--surface);
  flex: 0 0 auto;
}
.tl__node--coord  { background: var(--accent); }
.tl__node--design { border: 1px solid rgba(250, 250, 250, 0.6); }
.tl__node--answer {
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--surface), 0 0 0 7px rgba(149, 224, 102, 0.35);
}

.tl__body {
  padding: 0 0 clamp(18px, 2.4vw, 26px) clamp(8px, 1.4vw, 16px);
  min-width: 0;
}
.tl--last .tl__body { padding-bottom: 0; }
.tl__event {
  margin: 0;
  font-size: clamp(13px, 1.15vw, 16px);
  line-height: 1.45;
  color: var(--fg-bright);
  text-wrap: pretty;
}
.tl__when--answer { color: var(--accent); }

.chips { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex;
  align-items: center;
  border-radius: 4px;
  padding: 5px 9px;
  font: 400 clamp(10px, 0.9vw, 11px)/1 var(--font-mono);
}
/* Solid outline = design data. Dashed green = coordination data. */
.chip--design { border: 1px solid rgba(250, 250, 250, 0.22); color: rgba(250, 250, 250, 0.55); }
.chip--coord  { border: 1px dashed var(--line-4); color: var(--accent); }

.answer {
  border: 1px solid var(--line-4);
  background: rgba(149, 224, 102, 0.07);
  border-radius: 8px;
  padding: clamp(14px, 1.8vw, 20px);
}
.answer__q {
  margin: 0;
  font-weight: 500;
  font-size: clamp(14px, 1.3vw, 18px);
  line-height: 1.4;
  color: var(--fg);
}
.answer__label {
  margin: 10px 0 12px;
  font: 400 clamp(10px, 0.95vw, 11px)/1.3 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   Product recording
   -------------------------------------------------------------------------- */

.recording {
  max-width: var(--maxw);
  margin-inline: auto;
  background: var(--surface);
  border: 1px solid rgba(149, 224, 102, 0.18);
  border-radius: var(--radius);
  padding: 10px;
}
.recording__label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 12px;
  font: 500 10px/1 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.recording__dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--accent);
  animation: softpulse 2.6s ease-in-out infinite;
  flex: 0 0 auto;
}
.recording__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  overflow: hidden;
  background:
    repeating-linear-gradient(135deg, rgba(149, 224, 102, 0.05) 0 2px, rgba(149, 224, 102, 0) 2px 11px),
    var(--bg);
  border: 1px solid rgba(149, 224, 102, 0.14);
}
.recording__media { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Shown until the recording file is dropped in. */
.recording__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  text-align: center;
}
.recording__placeholder p { margin: 0; }
.recording__kicker {
  font: 500 11px/1 var(--font-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.recording__caption {
  max-width: 46ch;
  font-size: clamp(15px, 1.5vw, 19px);
  line-height: 1.5;
  color: rgba(250, 250, 250, 0.68);
}

/* --------------------------------------------------------------------------
   Panels (feature-interest, entry block, setup form, closing card)
   -------------------------------------------------------------------------- */

.panel {
  max-width: var(--maxw);
  margin-inline: auto;
  background: var(--surface);
  border: 1px solid rgba(149, 224, 102, 0.18);
  border-radius: var(--radius-lg);
  padding: clamp(22px, 3.4vw, 48px);
}
.panel--inline {
  margin-top: clamp(30px, 4vw, 48px);
  border-color: var(--line-2);
  border-radius: var(--radius);
  padding: clamp(22px, 3vw, 36px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(16px, 2.4vw, 30px);
  justify-content: space-between;
}
.panel--center { text-align: center; padding: clamp(26px, 4vw, 56px); }

.panel__ask {
  margin: 0;
  font: 600 clamp(19px, 2.2vw, 26px)/1.24 var(--font-display);
  letter-spacing: -0.024em;
  color: var(--fg);
}
.panel__grow { flex: 1 1 300px; }

/* Entry block on /product-web */
.entry {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 40px);
  align-items: start;
}
@media (min-width: 820px) {
  .entry { grid-template-columns: 1.15fr 1fr; gap: clamp(24px, 4vw, 56px); }
  .entry__side { border-left: 1px solid rgba(149, 224, 102, 0.18); padding-left: clamp(20px, 3vw, 36px); }
}
.entry__side-label {
  margin: 0 0 12px;
  font: 500 10px/1 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   Sandbox band
   -------------------------------------------------------------------------- */

.sandbox {
  position: relative;
  border-top: 1px solid rgba(149, 224, 102, 0.3);
  border-bottom: 1px solid rgba(149, 224, 102, 0.3);
  background: repeating-linear-gradient(135deg, rgba(149, 224, 102, 0.06) 0 2px, rgba(149, 224, 102, 0) 2px 12px);
  padding: clamp(34px, 4.4vw, 62px) var(--pad-x);
  overflow: hidden;
}
.sandbox__glow {
  position: absolute;
  top: -50%; left: 50%;
  transform: translateX(-50%);
  width: 70%; height: 200%;
  background: radial-gradient(ellipse at center, rgba(149, 224, 102, 0.1), rgba(149, 224, 102, 0) 70%);
  pointer-events: none;
}
.sandbox__inner {
  position: relative;
  max-width: var(--maxw);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(20px, 4vw, 56px);
  align-items: center;
}
.sandbox__title {
  margin: 0;
  font: 600 clamp(26px, 3.6vw, 42px)/1.08 var(--font-display);
  letter-spacing: -0.032em;
  color: var(--fg);
}
.sandbox__text {
  margin: 0;
  max-width: 52ch;
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.6;
  color: var(--fg-muted);
  text-wrap: pretty;
}
.sandbox__link { margin-top: clamp(18px, 2.4vw, 26px); }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.field { display: block; }
.field__label {
  display: block;
  margin-bottom: 7px;
  font: 500 10px/1 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.field__input,
.field__textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid rgba(149, 224, 102, 0.2);
  border-radius: var(--radius-sm);
  padding: 13px 14px;
  color: var(--fg);
  font: 400 15px/1.5 var(--font-body);
  transition: border-color 140ms ease;
}
.field__textarea { resize: vertical; min-height: 96px; }
.field__input:focus,
.field__textarea:focus { border-color: var(--accent); outline: none; }
.field__input:focus-visible,
.field__textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 14px;
}
.field-stack { display: grid; gap: 14px; align-content: start; }

/* Radio options in the setup form */
.options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 14px;
}
.option {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  background: var(--bg);
  border: 1px solid var(--line-3);
  border-radius: 8px;
  padding: 20px;
  cursor: pointer;
  transition: border-color 140ms ease;
}
.option:hover { border-color: var(--accent); }
.option:has(input:checked) { border-color: var(--accent); }
.option:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.option input { accent-color: var(--accent); width: 17px; height: 17px; margin: 2px 0 0; flex: 0 0 auto; }
.option__title {
  display: block;
  font: 600 16px/1.3 var(--font-display);
  letter-spacing: -0.018em;
  color: var(--fg);
}
.option__text {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.58;
  color: var(--fg-muted);
}

/* Checkbox list in the feature-interest form */
.checks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 10px 22px;
}
.check { display: flex; gap: 11px; align-items: flex-start; cursor: pointer; }
.check input { accent-color: var(--accent); width: 17px; height: 17px; margin: 2px 0 0; flex: 0 0 auto; }
.check span { font-size: 14px; line-height: 1.5; color: var(--fg-muted); }

/* Inline prompt when a consumer email domain is typed */
.consumer-hint {
  margin-top: 16px;
  border: 1px solid var(--warn-line);
  background: var(--warn-bg);
  border-radius: 6px;
  padding: 14px;
}
.consumer-hint p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--warn);
}

/* Honeypot. Off-screen rather than display:none, which some bots skip.
   Hidden from assistive tech via aria-hidden on the wrapper. */
.hp {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-error {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--warn);
}

.form-foot {
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(250, 250, 250, 0.58);
}

/* Confirmation replaces the form in place */
.done__label {
  margin: 0 0 10px;
  font: 500 11px/1 var(--font-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.done__text {
  margin: 0;
  max-width: 34ch;
  font: 600 clamp(24px, 3.2vw, 36px)/1.16 var(--font-display);
  letter-spacing: -0.03em;
  color: var(--fg);
}
.done--inline {
  margin: 0;
  font: 600 15px/1.4 var(--font-body);
  color: var(--accent);
  flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   Form panels

   A panel holds a set of form fields. Without JS it sits in the page as an
   ordinary block, so every form is reachable and submittable. Once JS runs
   the panel is hidden and re-opened on demand as an overlay.
   -------------------------------------------------------------------------- */

.fpanel { margin-top: clamp(24px, 3vw, 36px); }

.fpanel__card {
  background: var(--surface);
  border: 1px solid rgba(149, 224, 102, 0.24);
  border-radius: var(--radius-lg);
  padding: clamp(22px, 3.2vw, 40px);
  text-align: left;
}

.fpanel__head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 22px; }
.fpanel__kicker {
  margin: 0 0 8px;
  font: 500 10px/1 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.fpanel__title {
  margin: 0;
  font: 600 clamp(22px, 2.8vw, 30px)/1.14 var(--font-display);
  letter-spacing: -0.028em;
  color: var(--fg);
}

/* The close control is meaningless until the panel is an overlay. */
.fpanel__close {
  display: none;
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--line-n2);
  color: rgba(250, 250, 250, 0.7);
  width: 34px; height: 34px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font: 400 16px/1 var(--font-body);
  flex: 0 0 auto;
  transition: border-color 140ms ease, color 140ms ease;
}
.fpanel__close:hover { border-color: var(--accent); color: var(--accent); }

.fpanel.is-open {
  position: fixed;
  inset: 0;
  z-index: 80;
  margin: 0;
  background: rgba(3, 14, 5, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(16px, 4vw, 56px);
  overflow-y: auto;
}
.fpanel.is-open .fpanel__card {
  width: 100%;
  max-width: 600px;
  margin: auto;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.fpanel--wide.is-open .fpanel__card { max-width: 680px; }
.fpanel.is-open .fpanel__close { display: block; }

body.is-locked { overflow: hidden; }

/* --------------------------------------------------------------------------
   Home routing buttons
   -------------------------------------------------------------------------- */

.start { max-width: 900px; margin-inline: auto; text-align: center; }
.start__h {
  margin: 0;
  font: 600 clamp(30px, 4.4vw, 52px)/1.05 var(--font-display);
  letter-spacing: -0.032em;
  color: var(--fg);
}
.start__pair {
  margin-top: clamp(30px, 4vw, 44px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 16px;
}
.start__btn {
  text-align: left;
  background: var(--accent);
  color: var(--bg);
  border: 0;
  border-radius: 8px;
  padding: clamp(22px, 2.6vw, 30px);
  cursor: pointer;
  box-shadow: 0 2px 0 var(--accent-drop);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: background-color 140ms ease, transform 140ms ease;
}
.start__btn:hover { background: var(--accent-hi); }
.start__btn:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--accent-drop); }
.start__btn-main {
  font: 600 clamp(19px, 2vw, 24px)/1.2 var(--font-display);
  letter-spacing: -0.02em;
}
.start__btn-sub {
  font: 500 11px/1 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.65;
}

/* --------------------------------------------------------------------------
   Services: bios and examples
   -------------------------------------------------------------------------- */

.bios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(16px, 2vw, 24px);
}
.bio {
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: clamp(22px, 2.6vw, 30px);
}
.bio__name {
  margin: 0 0 6px;
  font: 600 19px/1.25 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--fg);
}
.bio__cred {
  margin: 0 0 16px;
  font: 500 10px/1 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.bio__text { margin: 0; font-size: 15px; line-height: 1.62; color: var(--fg-muted); text-wrap: pretty; }

/* Unwritten bio slot. Remove the card entirely once the copy lands. */
.bio--todo { background: var(--surface-alt); border: 1px dashed rgba(250, 250, 250, 0.22); }
.bio--todo .bio__name { color: rgba(250, 250, 250, 0.8); }
.bio--todo .bio__cred { color: var(--fg-dim); }
.bio--todo .bio__text { font: 400 14px/1.62 var(--font-mono); color: rgba(250, 250, 250, 0.55); }

.examples { display: grid; gap: clamp(16px, 2vw, 22px); }
.example {
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: clamp(22px, 3vw, 38px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(20px, 3vw, 44px);
}
.example__kicker {
  margin: 0 0 14px;
  font: 500 10px/1 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.example__title {
  margin: 0;
  max-width: 20ch;
  font: 600 clamp(21px, 2.4vw, 28px)/1.18 var(--font-display);
  letter-spacing: -0.026em;
  color: var(--fg);
}
.example__stat {
  margin: 22px 0 0;
  font: 500 clamp(26px, 3vw, 38px)/1 var(--font-display);
  letter-spacing: -0.03em;
  color: var(--accent);
}
.example__stat-note { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--fg-dim); }
.example__body { margin: 0; font-size: 15px; line-height: 1.66; color: var(--fg-muted); text-wrap: pretty; }

/* --------------------------------------------------------------------------
   Notice bar (post-submit confirmation on the destination page)
   -------------------------------------------------------------------------- */

.notice { background: var(--accent); color: var(--bg); }

/* Without JS the form endpoint redirects to #notice, which is the only way
   the confirmation can be shown on a static page. Beats [hidden] on
   specificity, so the bar appears. */
#notice:target { display: block !important; }
.notice__inner {
  max-width: 1180px;
  margin-inline: auto;
  padding: 14px var(--pad-x);
  display: flex;
  align-items: center;
  gap: 12px;
}
.notice__dot { width: 7px; height: 7px; background: var(--bg); border-radius: 50%; flex: 0 0 auto; }
.notice__text { margin: 0; font: 600 15px/1.4 var(--font-body); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--line-1);
  padding: clamp(40px, 5vw, 64px) var(--pad-x);
}
.site-footer__inner {
  max-width: var(--maxw);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}
.site-footer__logo { height: 26px; width: auto; opacity: 0.9; }
.site-footer__tag {
  margin: 18px 0 0;
  max-width: 32ch;
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg-dim);
}
.site-footer__col { display: flex; flex-direction: column; gap: 12px; }
.site-footer__col p { margin: 0; font-size: 14px; line-height: 1; color: var(--fg-dim); }
.site-footer__legal {
  font: 500 10px/1 var(--font-mono) !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-faint) !important;
}

/* --------------------------------------------------------------------------
   Utilities

   Small and deliberately few. These exist so the pages carry no inline style
   attributes, which lets the Content-Security-Policy stay strict.
   -------------------------------------------------------------------------- */

.mt-8  { margin-top: 8px; }
.mt-14 { margin-top: 14px; }
.mt-16 { margin-top: 16px; }
.mt-22 { margin-top: 22px; }
.mt-24 { margin-top: 24px; }
.mt-block { margin-top: clamp(30px, 4vw, 52px); }
.mt-cta   { margin-top: clamp(28px, 4vw, 44px); }

.mb-0 { margin-bottom: 0; }
.mb-head      { margin-bottom: clamp(28px, 3.8vw, 48px); }
.mb-form-head { margin-bottom: clamp(22px, 3vw, 32px); }

.mi-auto { margin-inline: auto; }
.mi-0    { margin-inline: 0; }

.mw-18 { max-width: 18ch; }
.mw-22 { max-width: 22ch; }
.mw-24 { max-width: 24ch; }
.mw-26 { max-width: 26ch; }
.mw-60 { max-width: 60ch; }

.shrink-0 { flex: 0 0 auto; }

/* The product recording sits directly under the hero, so it carries only
   bottom padding. */
.section--media { padding: 0 var(--pad-x) clamp(56px, 7vw, 96px); }
.section--tight-top { padding-top: clamp(48px, 7vw, 80px); }
.section--no-top { padding-top: 0; }

/* The services problem statement is one paragraph carrying the section. */
.prose--statement {
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.58;
  color: var(--fg-bright);
}

/* Setup form: details on the left, the open question on the right, with the
   textarea stretching to match. */
.setup-grid {
  margin-top: clamp(24px, 3vw, 34px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.field-grid--tight { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.field--fill { display: flex; flex-direction: column; }
.field__textarea--fill { flex: 1; min-height: 150px; }

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */

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

[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
[data-reveal].is-revealed { opacity: 1; transform: none; }
/* No JS: never leave content invisible. */
.no-js [data-reveal] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}