/* Code Space AI: every lead answered in under 60 seconds.
   Visual direction: "after hours, answered". A phone lighting up green in the dark, timed against a
   60-second dial. Black and neon green (#15FF80), Inter Tight for headlines, Quicksand for brand and UI
   text, Instrument Serif italic for one accent line, the system font for reading.
   Design rules: Apple's principles (apple-design skill): type tightens as it grows, motion is critically
   damped (no overshoot), glass only on the floating header, and every animation has a reduced-motion
   equivalent. No inline styles or scripts anywhere: the Content-Security-Policy forbids them. */

/* ---------- Fonts: self-hosted latin subsets (SIL Open Font License, licences in assets/fonts) ---------- */
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("/assets/fonts/inter-tight-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Quicksand";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("/assets/fonts/quicksand-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/instrument-serif-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* A fallback that measures like Inter Tight (Arial-metric bold faces scaled to 96%, measured against
   Liberation Sans), so the headline wraps the same before and after the web font arrives: no layout shift. */
@font-face {
  font-family: "Inter Tight Fallback";
  font-style: normal;
  font-weight: 500 700;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"), local("Helvetica Bold"), local("Arimo Bold"), local("Liberation Sans Bold"), local("Roboto Bold"), local("Roboto-Bold");
  size-adjust: 96%;
}

/* ---------- Tokens ---------- */
:root {
  color-scheme: dark;

  --bg: #000;
  --bg-tint: #030705; /* near-black with a green cast, for alternating sections */
  --surface: rgba(255, 255, 255, 0.04);
  --surface-2: rgba(255, 255, 255, 0.07);
  --hairline: rgba(255, 255, 255, 0.09);
  --hairline-2: rgba(255, 255, 255, 0.16);

  --text: #f4f6f5;
  --text-2: rgba(244, 246, 245, 0.76);
  --text-3: rgba(244, 246, 245, 0.62);

  --green: #15ff80;
  --green-ink: #021a0c;
  --green-soft: rgba(21, 255, 128, 0.12);
  --green-line: rgba(21, 255, 128, 0.38);
  --green-glow: rgba(21, 255, 128, 0.45);
  --danger: #ff9a9a;

  --font-display: "Inter Tight", "Inter Tight Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-brand: "Quicksand", ui-rounded, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Instrument Serif", ui-serif, Georgia, "Times New Roman", serif;
  --font-body: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --maxw: 76rem;
  --gutter: clamp(1rem, 4vw, 3rem);
  --section-y: clamp(4rem, 2.5rem + 5vw, 7rem);
  --header-h: 4rem;

  --r-sm: 0.625rem;
  --r-md: 1rem;
  --r-lg: 1.5rem;
  --r-xl: 2rem;

  /* A critically damped spring (Apple's default: damping 1.0, no overshoot) sampled for CSS linear():
     x(t) = 1 - (1 + wt)e^(-wt), scaled so it settles at the end of the duration. Response about 0.4 s
     maps to a 0.6 s duration. Browsers without linear() fall back to --ease-out. */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --spring: var(--ease-out);
}
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --spring: linear(0, 0.079 5%, 0.236 10%, 0.403 15%, 0.551 20%, 0.671 25%, 0.764 30%, 0.833 35%, 0.883 40%, 0.919 45%, 0.944 50%, 0.962 55%, 0.974 60%, 0.983 65%, 0.988 70%, 0.992 75%, 0.995 80%, 0.997 85%, 0.998 90%, 0.999 95%, 1);
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  background: var(--bg);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 1.0625rem/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

/* The hidden attribute always wins over a component's own display value. */
[hidden] { display: none !important; }

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
p, figure, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p, li { text-wrap: pretty; }
button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--green); color: var(--green-ink); }

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

.container {
  width: min(var(--maxw), 100% - 2 * var(--gutter));
  margin-inline: auto;
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: -4rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  border-radius: var(--r-sm);
  background: var(--green);
  color: var(--green-ink);
  font: 700 0.9375rem/1 var(--font-brand);
  text-decoration: none;
}
.skip:focus { top: 0.75rem; }

.nowrap { white-space: nowrap; }

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Type ---------- */
/* Size-specific tracking and leading: the bigger the text, the tighter both get. */
/* The two headline lines measure about 9em at this tracking, so the size follows the column width
   (container query units) and each line always stays on one line, from 320 px phones up. */
.hero-copy { container-type: inline-size; }
.display {
  font: 700 clamp(1.75rem, 10.3cqi, 5.5rem)/1 var(--font-display);
  letter-spacing: -0.035em;
}
.display .line { display: block; }
.display .serif {
  margin-top: 0.08em;
  font: 400 italic 1.06em/1 var(--font-serif);
  letter-spacing: -0.01em;
  color: var(--text-2);
}
.hl { color: var(--green); }

.h2 {
  font: 700 clamp(2rem, 1.25rem + 3.2vw, 3.875rem)/1.04 var(--font-display);
  letter-spacing: -0.032em;
}
.h2-xl { font-size: clamp(2.6rem, 1rem + 6.4vw, 6.25rem); line-height: 0.98; letter-spacing: -0.04em; }

h3 {
  font: 650 1.25rem/1.25 var(--font-display);
  letter-spacing: -0.012em;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
  font: 700 0.9375rem/1.2 var(--font-brand);
  letter-spacing: 0.01em;
  color: var(--green);
}

.lead {
  max-width: 34rem;
  margin-top: 1.75rem;
  font-size: clamp(1.0625rem, 1rem + 0.45vw, 1.3125rem);
  line-height: 1.55;
  color: var(--text-2);
}

.section-lead {
  max-width: 40rem;
  margin-top: 1.25rem;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  line-height: 1.6;
  color: var(--text-2);
}
.section-lead a, .demo-note a, .form-success a { color: var(--green); text-underline-offset: 0.18em; }

.live-dot {
  position: relative;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--green);
}
.live-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--green);
  animation: live 2.4s var(--ease-out) infinite;
}
@keyframes live {
  0% { transform: scale(1); opacity: 0.6; }
  70%, 100% { transform: scale(3.2); opacity: 0; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0 1.25rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font: 700 1rem/1 var(--font-brand);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.1s ease-out, background-color 0.2s, border-color 0.2s, box-shadow 0.35s var(--ease-out), color 0.2s;
}
/* Feedback on press, instantly (apple-design: respond on pointer-down). */
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--green); color: var(--green-ink); }
.btn-primary:hover { box-shadow: 0 0 2rem var(--green-glow); }
.btn-ghost { background: var(--surface); border-color: var(--hairline-2); color: var(--text); }
.btn-ghost:hover { background: var(--surface-2); border-color: rgba(255, 255, 255, 0.28); }
.btn-lg { min-height: 3.375rem; padding: 0 1.6rem; font-size: 1.0625rem; }
.btn-sm { min-height: 2.5rem; padding: 0 1.05rem; font-size: 0.9375rem; }
.btn-block { width: 100%; }
.btn-arrow { transition: transform 0.35s var(--spring); }
.btn:hover .btn-arrow { transform: translateX(3px); }
.btn[aria-disabled="true"] { cursor: progress; opacity: 0.75; }

/* ---------- Header: a translucent layer the page scrolls under ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(0, 0, 0, 0.62);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: var(--header-h);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-right: auto;
  font: 700 1.0625rem/1 var(--font-brand);
  letter-spacing: 0.005em;
  text-decoration: none;
  white-space: nowrap;
}
.header-nav { display: none; gap: 0.25rem; }
.header-nav a {
  padding: 0.6rem 0.85rem;
  border-radius: 999px;
  font: 600 0.9375rem/1 var(--font-brand);
  color: var(--text-2);
  text-decoration: none;
  transition: color 0.2s, background-color 0.2s;
}
.header-nav a:hover { color: var(--text); background: var(--surface); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: clip;
  padding: clamp(2.5rem, 1.5rem + 4vw, 5.5rem) 0 clamp(2rem, 1rem + 3vw, 4rem);
}
.hero-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent);
  mask-image: linear-gradient(to bottom, #000 60%, transparent);
}
.hero-glow span {
  position: absolute;
  width: min(90vw, 62rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(21, 255, 128, 0.2), rgba(21, 255, 128, 0.05) 55%, transparent 72%);
  animation: drift 28s ease-in-out infinite alternate;
}
/* Anchored in rem, not % of the hero's height, so they don't move when the web fonts swap in. */
.hero-glow span:first-child { top: -18rem; right: -22%; }
.hero-glow span:last-child {
  top: 26rem;
  left: -30%;
  width: min(80vw, 48rem);
  opacity: 0.6;
  animation-duration: 34s;
  animation-direction: alternate-reverse;
}
@keyframes drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-6%, 5%, 0); }
}

.hero-grid {
  position: relative;
  display: grid;
  gap: clamp(3rem, 2rem + 4vw, 4.5rem);
  align-items: center;
}
.hero-copy { position: relative; z-index: 2; }

.cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.25rem; }

.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 2rem; }
.chips li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--surface);
  font: 600 0.875rem/1.2 var(--font-brand);
  color: var(--text-2);
}
.chips li::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--green);
}

/* The hero text rises in on load with CSS alone, so it never waits for a script. */
.rise { animation: rise 0.9s var(--spring) both; animation-delay: calc(var(--i, 0) * 70ms + 60ms); }
.r1 { --i: 0; } .r2 { --i: 1; } .r3 { --i: 2; } .r4 { --i: 3; } .r5 { --i: 4; } .r6 { --i: 5; } .r7 { --i: 6; }
@keyframes rise {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}

/* ---------- The stage: phone, 60-second dial and stopwatch ---------- */
.hero-visual { position: relative; z-index: 1; display: grid; justify-items: center; gap: 1.25rem; }

.stage {
  --phone-w: clamp(16rem, 76vw, 18.75rem);
  /* The dial's SVG is 500 units wide with the ring 428 across: on phones and tablets the ring spans the
     column; on desktops it rings the whole phone. */
  --dial-w: min(117%, 40rem);
  --reply: 14; /* seconds until the reply lands, per example */
  position: relative;
  display: grid;
  justify-items: center;
  width: 100%;
  padding-top: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  margin: 0;
}
.stage[data-trade="fencing"] { --reply: 12; }
.stage[data-trade="pest-control"] { --reply: 16; }

.device { position: relative; display: grid; place-items: center; width: 100%; }

.dial {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--dial-w);
  max-width: none;
  height: auto;
  translate: -50% -50%;
  overflow: visible;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 90%);
  mask-image: linear-gradient(to bottom, #000 70%, transparent 90%);
}
.dial-face { fill: rgba(21, 255, 128, 0.025); stroke: rgba(255, 255, 255, 0.06); stroke-width: 1; }
.dial-ticks {
  fill: none;
  stroke: rgba(255, 255, 255, 0.2);
  stroke-width: 14;
  stroke-dasharray: 0.07 0.93;
  stroke-dashoffset: 0.035;
  transform: rotate(-90deg);
  transform-origin: 220px 220px;
}
.dial-ticks-major { stroke: rgba(255, 255, 255, 0.5); stroke-width: 22; stroke-dasharray: 0.035 0.965; stroke-dashoffset: 0.0175; }
.dial-arc, .dial-glow {
  fill: none;
  stroke: var(--green);
  stroke-linecap: round;
  stroke-dasharray: 60 60;
  stroke-dashoffset: calc(60px - var(--reply) * 1px);
  transform: rotate(-90deg);
  transform-origin: 220px 220px;
  animation: sweep 1.2s linear 1.4s both;
}
.dial-arc { stroke-width: 4; }
.dial-glow { stroke-width: 16; stroke-opacity: 0.14; }
@keyframes sweep {
  from { stroke-dashoffset: 60px; }
  to { stroke-dashoffset: calc(60px - var(--reply) * 1px); }
}
.dial-num {
  fill: rgba(244, 246, 245, 0.55);
  font: 700 15px/1 var(--font-brand);
  text-anchor: middle;
}

.stopwatch {
  position: absolute;
  z-index: 3;
  top: -0.6rem; /* above the contact line, so it never covers the name or status */
  left: min(calc(50% + var(--phone-w) * 0.3), calc(100% - 9.75rem));
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.95rem 0.5rem 0.55rem;
  border: 1px solid var(--green-line);
  border-radius: 999px;
  background: rgba(3, 18, 9, 0.88);
  white-space: nowrap;
  box-shadow: 0 0 2.5rem rgba(21, 255, 128, 0.25), 0 1rem 2rem rgba(0, 0, 0, 0.5);
  animation: pop 0.6s var(--spring) 1.4s both;
}
.sw-ring { width: 2.125rem; height: 2.125rem; flex: none; }
.sw-track, .sw-arc { fill: none; stroke-width: 4; transform: rotate(-90deg); transform-origin: 18px 18px; }
.sw-track { stroke: rgba(255, 255, 255, 0.14); }
.sw-arc {
  stroke: var(--green);
  stroke-linecap: round;
  stroke-dasharray: 60 60;
  stroke-dashoffset: calc(60px - var(--reply) * 1px);
  animation: sweep 1.2s linear 1.4s both;
}
.stopwatch-text { display: grid; gap: 0.15rem; }
.stopwatch-label { font: 600 0.75rem/1 var(--font-brand); color: var(--text-2); }
.stopwatch-time {
  font: 700 1.375rem/1 var(--font-display);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--green);
}

.phone {
  position: relative;
  z-index: 2;
  width: var(--phone-w);
  aspect-ratio: 9 / 18.4;
  padding: 0.6rem;
  border-radius: calc(var(--phone-w) * 0.17);
  background: linear-gradient(160deg, #262b29, #0b0e0d 45%, #1a1e1c);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    0 0 0 1px rgba(0, 0, 0, 0.9),
    0 2.5rem 5rem -1rem rgba(0, 0, 0, 0.85),
    0 0 6rem rgba(21, 255, 128, 0.12);
  container-type: inline-size;
}
.phone-screen {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: calc(var(--phone-w) * 0.14);
  background: #050706;
}
.phone-island {
  position: absolute;
  top: 2.6cqw;
  left: 50%;
  width: 30cqw;
  height: 8cqw;
  translate: -50% 0;
  border-radius: 999px;
  background: #000;
}
.phone-bar {
  display: flex;
  align-items: center;
  gap: 3.2cqw;
  padding: 14cqw 5cqw 3.6cqw;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.03);
}
.avatar {
  display: grid;
  place-items: center;
  width: 11cqw;
  height: 11cqw;
  flex: none;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--green), #08a356);
  color: var(--green-ink);
  font: 700 max(4.2cqw, 0.6875rem)/1 var(--font-brand);
}
.phone-contact { display: grid; gap: 0.8cqw; min-width: 0; }
.phone-name { font: 650 4.9cqw/1.1 var(--font-display); }
.phone-status { font: 500 max(3.5cqw, 0.6875rem)/1.2 var(--font-body); color: var(--green); }

.thread {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2.9cqw;
  padding: 4.5cqw 4cqw 2cqw;
  overflow: hidden;
}
.thread[hidden] { display: none; }
.sys {
  align-self: center;
  font: 600 max(3.3cqw, 0.6875rem)/1.2 var(--font-brand);
  color: var(--text-3);
}
.msg { position: relative; display: flex; max-width: 84%; }
.msg.me { align-self: flex-end; }
.msg.them { align-self: flex-start; }
.bubble {
  padding: 2.4cqw 3.6cqw;
  border-radius: 5.4cqw;
  font: 400 max(4.55cqw, 0.75rem)/1.34 var(--font-body);
}
.me .bubble { background: var(--green); color: var(--green-ink); border-bottom-right-radius: 1.6cqw; }
.them .bubble { background: #1d2321; color: var(--text); border-bottom-left-radius: 1.6cqw; }
.typing {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  gap: 1.3cqw;
  padding: 3.6cqw 4cqw;
  border-radius: 5.4cqw;
  background: #1d2321;
}
.typing i {
  width: 1.7cqw;
  height: 1.7cqw;
  border-radius: 50%;
  background: rgba(244, 246, 245, 0.7);
  animation: dot 0.6s ease-in-out 3;
}
.typing i:nth-child(2) { animation-delay: 0.12s; }
.typing i:nth-child(3) { animation-delay: 0.24s; }
@keyframes dot {
  0%, 100% { transform: translateY(0); opacity: 0.45; }
  40% { transform: translateY(-1.2cqw); opacity: 1; }
}
.booked {
  display: flex;
  align-items: center;
  gap: 3cqw;
  margin-top: 1.5cqw;
  padding: 3.2cqw 3.6cqw;
  border: 1px solid var(--green-line);
  border-radius: 4.5cqw;
  background: linear-gradient(135deg, rgba(21, 255, 128, 0.16), rgba(21, 255, 128, 0.04));
  box-shadow: 0 0 6cqw rgba(21, 255, 128, 0.18);
  font: 400 max(3.5cqw, 0.6875rem)/1.35 var(--font-body);
  color: var(--text-2);
}
.booked strong { display: block; font: 700 max(4.2cqw, 0.75rem)/1.2 var(--font-display); color: var(--text); }
.booked-check {
  position: relative;
  width: 8.5cqw;
  height: 8.5cqw;
  flex: none;
  border-radius: 50%;
  background: var(--green);
}
.booked-check::after {
  content: "";
  position: absolute;
  left: 32%;
  top: 22%;
  width: 26%;
  height: 46%;
  border: solid var(--green-ink);
  border-width: 0 max(2px, 0.6cqw) max(2px, 0.6cqw) 0;
  transform: rotate(45deg);
}
.phone-composer {
  margin: 0 3.5cqw 3.5cqw;
  padding: 2.6cqw 4cqw;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  font: 400 max(3.7cqw, 0.6875rem)/1 var(--font-body);
  color: var(--text-3);
}

/* The conversation plays once with CSS alone; the script only switches between the three examples. */
.at-1 { --at: 0.5s; } .at-2 { --at: 0.9s; } .at-3 { --at: 1.4s; } .at-4 { --at: 3.5s; }
.at-5 { --at: 4s; } .at-6 { --at: 6s; } .at-7 { --at: 6.7s; }
.sys, .me .bubble, .booked { animation: pop 0.6s var(--spring) var(--at) both; }
.them .typing { animation: typing-window 1.2s linear var(--at) both; }
.them .bubble { animation: pop 0.6s var(--spring) calc(var(--at) + 1.2s) both; }
@keyframes pop {
  from { opacity: 0; transform: translateY(0.6rem) scale(0.96); }
  to { opacity: 1; transform: none; }
}
@keyframes typing-window {
  0% { opacity: 0; transform: scale(0.85); }
  12% { opacity: 1; transform: none; }
  88% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: none; }
}
.stage.is-paused,
.stage.is-paused * { animation-play-state: paused !important; }
.motion-paused .live-dot::after,
.motion-paused .hero-glow span { animation-play-state: paused; }

.stage-caption {
  position: relative;
  z-index: 2;
  margin-top: 1.25rem;
  font: 600 0.875rem/1.3 var(--font-brand);
  color: var(--text-3);
  text-align: center;
}

.stage-controls {
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.3rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: rgba(10, 13, 12, 0.85);
}
/* Space is kept for the controls until the script shows them, so revealing them never shifts the page. */
.stage-controls.is-pending { visibility: hidden; }
.seg, .play-toggle {
  min-height: 2.5rem;
  padding: 0 0.8rem;
  white-space: nowrap;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font: 700 0.875rem/1 var(--font-brand);
  color: var(--text-2);
  cursor: pointer;
  transition: background-color 0.25s var(--ease-out), color 0.2s, transform 0.1s ease-out;
}
.seg:hover, .play-toggle:hover { color: var(--text); }
.seg:active, .play-toggle:active { transform: scale(0.96); }
.seg[aria-pressed="true"] { background: var(--green); color: var(--green-ink); }
.play-toggle { display: grid; place-items: center; width: 2.5rem; padding: 0; }
.play-toggle .icon-play { display: none; }
.play-toggle[aria-pressed="true"] .icon-play { display: block; }
.play-toggle[aria-pressed="true"] .icon-pause { display: none; }

/* ---------- Sections ---------- */
.section { position: relative; padding: var(--section-y) 0; }
.section-head { max-width: 50rem; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .section-lead { margin-inline: auto; }

/* ---------- The gap: a week of 168 hours ---------- */
.gap { background: linear-gradient(180deg, var(--bg), var(--bg-tint) 30%, var(--bg)); }
.week-wrap { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); }
.week {
  padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem);
  border: 1px solid var(--hairline);
  border-radius: var(--r-xl);
  background: rgba(255, 255, 255, 0.02);
}
.week-scale {
  display: flex;
  justify-content: space-between;
  margin: 0 0 0.75rem calc(2.75rem + 0.75rem);
  font: 600 0.75rem/1 var(--font-brand);
  color: var(--text-3);
}
.week-rows { display: grid; gap: 0.6rem; }
.day { display: grid; grid-template-columns: 2.75rem 1fr; align-items: center; gap: 0.75rem; }
.day-name { font: 700 0.875rem/1 var(--font-brand); color: var(--text-2); }
.track {
  position: relative;
  height: 1.75rem;
  border-radius: 0.5rem;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(100% / 24 - 1px), rgba(0, 0, 0, 0.55) calc(100% / 24 - 1px) calc(100% / 24)),
    rgba(255, 255, 255, 0.04);
}
.after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(100% / 24 - 1px), rgba(0, 0, 0, 0.45) calc(100% / 24 - 1px) calc(100% / 24)),
    linear-gradient(90deg, rgba(21, 255, 128, 0.62), rgba(21, 255, 128, 0.92));
  box-shadow: 0 0 1.5rem rgba(21, 255, 128, 0.22);
  transform-origin: left center;
}
.office {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(100% * 8 / 24);
  width: calc(100% * 9 / 24);
  display: grid;
  place-items: center;
  border-radius: 0.375rem;
  background: #2b302e;
  box-shadow: 0 0 0 2px #070908;
}
.office-label {
  font: 700 0.6875rem/1 var(--font-brand);
  letter-spacing: 0.02em;
  color: var(--text-2);
  white-space: nowrap;
}
.pin {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  translate: -50% -50%;
  border-radius: 50%;
  background: #fff;
  color: #000;
  font: 700 0.75rem/1 var(--font-brand);
  box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.55), 0 0 1.25rem rgba(255, 255, 255, 0.55);
}
.pin-1 { left: calc(100% * 18.25 / 24); }
.pin-2 { left: calc(100% * 9.2 / 24); }
.pin-3 { left: calc(100% * 19.67 / 24); }

.week-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 1.25rem 0 0 calc(2.75rem + 0.75rem);
  font: 600 0.8125rem/1.2 var(--font-brand);
  color: var(--text-2);
}
.key { display: inline-flex; align-items: center; gap: 0.5rem; }
.key::before { content: ""; width: 0.9rem; height: 0.9rem; border-radius: 0.25rem; }
.key-office::before { background: #2b302e; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); }
.key-after::before { background: var(--green); }

.week-caption {
  display: grid;
  gap: 1.5rem;
  margin-top: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
  padding-top: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  border-top: 1px solid var(--hairline);
}
.stat { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 1.25rem; }
.stat-num {
  min-width: 2.4ch;
  font: 700 clamp(3.25rem, 2.25rem + 4vw, 5.75rem)/0.9 var(--font-display);
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
  color: rgba(244, 246, 245, 0.42);
}
.stat-green .stat-num { color: var(--green); text-shadow: 0 0 2.5rem rgba(21, 255, 128, 0.35); }
.stat-text { max-width: 22rem; font-size: 1rem; line-height: 1.5; color: var(--text-2); }

.moments-label {
  margin-top: 1.5rem;
  font: 700 0.8125rem/1.3 var(--font-brand);
  letter-spacing: 0.02em;
  color: var(--text-3);
}
.moments { display: grid; gap: 0.75rem; margin-top: 0.75rem; }
.moments li {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.9rem;
  row-gap: 0.3rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.025);
}
.moment-num {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: #fff;
  color: #000;
  font: 700 0.8125rem/1 var(--font-brand);
}
.moment-when { font: 700 0.8125rem/1.3 var(--font-brand); color: var(--green); }
.moment-what { font-size: 1rem; line-height: 1.45; color: var(--text); }

/* ---------- How it works ---------- */
.steps {
  position: relative;
  display: grid;
  gap: 1rem;
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
}
.step {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.75rem;
  padding: 1.75rem 1.5rem 1.6rem;
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
}
.step-num {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 0.5rem;
  border: 1px solid var(--green-line);
  border-radius: 50%;
  background: var(--green-soft);
  font: 700 1rem/1 var(--font-display);
  color: var(--green);
}
.step p { color: var(--text-2); }
.ui-chip {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding: 0.5rem 0.8rem;
  border: 1px solid var(--hairline-2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  font: 700 0.8125rem/1 var(--font-brand);
  color: var(--text-2);
}
.ui-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #fff; }
.ui-chip-green { border-color: var(--green-line); color: var(--green); }
.ui-chip-green .ui-dot { background: var(--green); }
.ui-chip-solid { border-color: transparent; background: var(--green); color: var(--green-ink); }
.ui-check {
  width: 0.4rem;
  height: 0.7rem;
  margin: -0.1rem 0.15rem 0 0.1rem;
  border: solid var(--green-ink);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ---------- Demo ---------- */
.demo { overflow: clip; isolation: isolate; }
.demo-bg { position: absolute; inset: 0; z-index: -1; display: grid; place-items: center; }
.demo-bg::before {
  content: "";
  position: absolute;
  width: min(120vw, 80rem);
  aspect-ratio: 1.6;
  background: radial-gradient(closest-side, rgba(21, 255, 128, 0.2), rgba(21, 255, 128, 0.04) 60%, transparent 75%);
}
.demo-sixty {
  font: 700 clamp(16rem, 8rem + 34vw, 40rem)/0.8 var(--font-display);
  letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(21, 255, 128, 0.2);
  user-select: none;
}
.demo-cards {
  display: grid;
  gap: 1rem;
  max-width: 56rem;
  margin: clamp(2.5rem, 2rem + 2vw, 3.5rem) auto 0;
}
.demo-card {
  position: relative;
  display: grid;
  gap: 1.25rem;
  padding: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-xl);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  text-decoration: none;
  transition: transform 0.5s var(--spring), border-color 0.25s, box-shadow 0.5s var(--ease-out), background-color 0.25s;
}
.demo-card:hover { transform: translateY(-4px); border-color: var(--green-line); box-shadow: 0 1.5rem 3rem -1rem rgba(0, 0, 0, 0.7), 0 0 3rem rgba(21, 255, 128, 0.16); }
.demo-card:active { transform: scale(0.985); transition-duration: 0.1s; }
.demo-tag { font: 700 clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem)/1.1 var(--font-display); letter-spacing: -0.02em; }
.demo-try { display: grid; gap: 0.5rem; }
.demo-try-label { font: 600 0.8125rem/1 var(--font-brand); color: var(--text-3); }
.demo-bubble {
  justify-self: start;
  max-width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 1.25rem 1.25rem 0.375rem 1.25rem;
  background: var(--green);
  color: var(--green-ink);
  font-size: 1rem;
  line-height: 1.4;
}
.demo-go {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font: 700 1rem/1 var(--font-brand);
  color: var(--green);
}
.demo-go svg { transition: transform 0.4s var(--spring); }
.demo-card:hover .demo-go svg { transform: translate(2px, -2px); }
.demo-note {
  margin-top: 1.75rem;
  text-align: center;
  color: var(--text-2);
}

/* ---------- Fits how you work: bento ---------- */
.bento {
  display: grid;
  gap: 1rem;
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
}
.tile {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.75rem;
  padding: 1.75rem 1.5rem;
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
  overflow: hidden;
}
.tile p { color: var(--text-2); }
.tile-icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 0.25rem;
  border-radius: 0.875rem;
  background: var(--green-soft);
  color: var(--green);
}
.tool-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.tool-row span {
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--hairline-2);
  border-radius: 999px;
  font: 700 0.8125rem/1 var(--font-brand);
  color: var(--text-2);
}
.tool-row span:last-child { border-color: var(--green-line); color: var(--green); }
.mini-thread { display: grid; gap: 0.5rem; margin-top: 0.75rem; }
.mini-label { justify-self: center; font: 700 0.75rem/1 var(--font-brand); letter-spacing: 0.02em; color: var(--text-3); }
.mini { max-width: 85%; padding: 0.6rem 0.9rem; border-radius: 1.1rem; font-size: 0.9375rem; line-height: 1.35; }
.mini.me { justify-self: end; background: var(--green); color: var(--green-ink); border-bottom-right-radius: 0.35rem; }
.mini.them { justify-self: start; background: #1d2321; color: var(--text); border-bottom-left-radius: 0.35rem; }

/* ---------- FAQ ---------- */
.faq { background: linear-gradient(180deg, var(--bg), var(--bg-tint) 50%, var(--bg)); }
.faq-grid { display: grid; gap: 2.5rem; }
.faq-list { display: grid; gap: 0.75rem; }
.faq-list details {
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.025);
  transition: border-color 0.25s, background-color 0.25s;
}
.faq-list details[open] { border-color: var(--hairline-2); background: rgba(255, 255, 255, 0.045); }
.faq-list summary {
  position: relative;
  display: block;
  padding: 1.2rem 3.5rem 1.2rem 1.35rem;
  font: 650 1.0625rem/1.4 var(--font-display);
  letter-spacing: -0.008em;
  list-style: none;
  cursor: pointer;
  border-radius: var(--r-md);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::before,
.faq-list summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1.35rem;
  width: 0.875rem;
  height: 2px;
  border-radius: 2px;
  background: var(--green);
  transition: transform 0.4s var(--spring);
}
.faq-list summary::after { transform: rotate(90deg); }
.faq-list details[open] summary::after { transform: rotate(0deg); }
.faq-a { padding: 0 1.35rem 1.35rem; color: var(--text-2); }
/* Smooth open where the browser can animate to auto height. */
@supports (interpolate-size: allow-keywords) {
  .faq-list { interpolate-size: allow-keywords; }
  .faq-list details::details-content {
    height: 0;
    overflow: clip;
    transition: height 0.45s var(--spring), content-visibility 0.45s allow-discrete;
  }
  .faq-list details[open]::details-content { height: auto; }
}

/* ---------- Contact ---------- */
.contact { overflow: clip; isolation: isolate; }
.contact-glow {
  position: absolute;
  right: -20%;
  bottom: -30%;
  z-index: -1;
  width: min(90vw, 60rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(21, 255, 128, 0.16), transparent 70%);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 75%);
  mask-image: linear-gradient(to bottom, #000 45%, transparent 75%);
}
.contact-grid { display: grid; gap: clamp(2.5rem, 2rem + 3vw, 4.5rem); align-items: start; }
.next-steps { display: grid; gap: 1rem; margin-top: 2rem; }
.next-steps li { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.9rem; color: var(--text-2); }
.next-num {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--green-line);
  border-radius: 50%;
  background: var(--green-soft);
  font: 700 0.875rem/1 var(--font-display);
  color: var(--green);
}

.form-panel {
  position: relative;
  padding: clamp(1.25rem, 1rem + 2vw, 2.25rem);
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-xl);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)), #050806;
  box-shadow: 0 2rem 4rem -1.5rem rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(21, 255, 128, 0.05), 0 0 4rem rgba(21, 255, 128, 0.08);
}
.form { display: grid; gap: 1.1rem; }
.field { display: grid; gap: 0.45rem; min-width: 0; }
.field label { font: 700 0.9375rem/1.2 var(--font-brand); color: var(--text); }
.optional { font-weight: 600; color: var(--text-3); }
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 3.125rem;
  padding: 0.75rem 0.95rem;
  border: 1px solid var(--hairline-2);
  border-radius: 0.875rem;
  background: rgba(255, 255, 255, 0.04);
  font-size: 1rem;
  line-height: 1.4;
  transition: border-color 0.2s, box-shadow 0.25s var(--ease-out), background-color 0.2s;
}
.field textarea { min-height: 7.5rem; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(255, 255, 255, 0.28); }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: none;
  border-color: var(--green);
  background: rgba(21, 255, 128, 0.04);
  box-shadow: 0 0 0 4px rgba(21, 255, 128, 0.18);
}
.field [aria-invalid="true"] { border-color: var(--danger); }
.field [aria-invalid="true"]:focus-visible { box-shadow: 0 0 0 4px rgba(255, 154, 154, 0.2); border-color: var(--danger); }
.select-wrap { position: relative; display: block; }
.select-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1.1rem;
  width: 0.5rem;
  height: 0.5rem;
  margin-top: -0.35rem;
  border: solid var(--text-2);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  pointer-events: none;
}
.field select { appearance: none; padding-right: 2.75rem; cursor: pointer; }
.field select option { background: #0b0e0d; color: var(--text); }
.field-error {
  display: flex;
  gap: 0.45rem;
  font: 600 0.875rem/1.35 var(--font-body);
  color: var(--danger);
}
.field-error::before {
  content: "!";
  display: grid;
  place-items: center;
  width: 1.1rem;
  height: 1.1rem;
  flex: none;
  margin-top: 0.05rem;
  border-radius: 50%;
  background: var(--danger);
  color: #1a0505;
  font: 800 0.75rem/1 var(--font-body);
}
.field-error[hidden] { display: none; }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form-actions { display: grid; gap: 0.75rem; margin-top: 0.4rem; }
.form-note { font-size: 0.875rem; color: var(--text-3); text-align: center; }
.form-status:empty { display: none; }
.form-status {
  padding: 0.9rem 1rem;
  border: 1px solid rgba(255, 154, 154, 0.4);
  border-radius: 0.875rem;
  background: rgba(255, 154, 154, 0.07);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text);
}
.form-fallback { font-size: 0.9375rem; line-height: 1.5; color: var(--text-2); }
.form-success { display: grid; justify-items: center; gap: 0.9rem; padding: 2.5rem 1rem; text-align: center; }
.form-success[hidden] { display: none; }
.form-success p { max-width: 26rem; color: var(--text-2); }
.success-title { font-size: 1.5rem; outline: none; }
.success-check {
  position: relative;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 3rem var(--green-glow);
  animation: pop 0.6s var(--spring) both;
}
.success-check::after {
  content: "";
  position: absolute;
  left: 36%;
  top: 24%;
  width: 24%;
  height: 42%;
  border: solid var(--green-ink);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

/* ---------- Footer ---------- */
.site-footer { padding: 2.5rem 0 3rem; border-top: 1px solid var(--hairline); }
.footer-inner { display: grid; gap: 0.75rem; justify-items: start; }
.footer-inner .brand { margin-right: 0; }
.footer-tagline { color: var(--text-2); }
.footer-meta { font-size: 0.875rem; color: var(--text-3); }

/* ---------- Scroll reveals ----------
   The script marks only what starts below the screen, so nothing visible is ever hidden first, and
   without the script (or with reduced motion) everything simply shows. */
.will-reveal { opacity: 0; transform: translateY(2rem); }
.will-reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.8s var(--ease-out), transform 0.9s var(--spring);
}
/* Children that stagger in after their container. */
.will-reveal :is(.step, .tile, .demo-card, .moments li) { opacity: 0; transform: translateY(1.5rem); }
.will-reveal.is-in :is(.step, .tile, .demo-card, .moments li) {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s var(--ease-out), transform 0.8s var(--spring);
  transition-delay: calc(var(--n, 0) * 90ms + 120ms);
}
:is(.step, .tile, .demo-card, .moments li):nth-child(2) { --n: 1; }
:is(.step, .tile, .demo-card, .moments li):nth-child(3) { --n: 2; }
:is(.step, .tile, .demo-card, .moments li):nth-child(4) { --n: 3; }
:is(.step, .tile, .demo-card, .moments li):nth-child(5) { --n: 4; }
:is(.step, .tile, .demo-card, .moments li):nth-child(6) { --n: 5; }
/* The week fills in row by row, then the three requests drop in. */
.will-reveal .after { transform: scaleX(0); }
.will-reveal.is-in .after { transform: scaleX(1); transition: transform 1.1s var(--ease-out) calc(var(--row, 0) * 80ms + 200ms); }
.will-reveal .pin { opacity: 0; scale: 0.4; }
.will-reveal.is-in .pin { opacity: 1; scale: 1; transition: opacity 0.4s var(--ease-out) 1.3s, scale 0.6s var(--spring) 1.3s; }
.day:nth-child(2) { --row: 1; } .day:nth-child(3) { --row: 2; } .day:nth-child(4) { --row: 3; }
.day:nth-child(5) { --row: 4; } .day:nth-child(6) { --row: 5; } .day:nth-child(7) { --row: 6; }

/* ---------- Larger screens ---------- */
@media (min-width: 40rem) {
  .form { grid-template-columns: 1fr 1fr; }
  .field-full { grid-column: 1 / -1; }
  .moments { grid-template-columns: repeat(3, 1fr); }
  .footer-inner { grid-template-columns: auto 1fr auto; align-items: center; gap: 1.5rem; }
  .footer-tagline { justify-self: center; }
}

@media (min-width: 48rem) {
  .steps { grid-template-columns: repeat(3, 1fr); }
  .demo-cards { grid-template-columns: 1fr 1fr; }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .tile-wide { grid-column: span 2; }
  .week-caption { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 56rem) {
  .header-nav { display: flex; }
  .brand { margin-right: 0; }
  .header-nav { margin-left: auto; }
  .faq-grid { grid-template-columns: 0.8fr 1.2fr; gap: 4rem; }
  .faq-head { position: sticky; top: calc(var(--header-h) + 2rem); align-self: start; }
  .contact-grid { grid-template-columns: 0.85fr 1.15fr; }
}

@media (min-width: 64rem) {
  .hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
  /* Up to 80rem the dial stays inside the gap so it never runs behind the copy. */
  .stage { --phone-w: clamp(16.5rem, 20vw, 18.75rem); --dial-w: min(calc(var(--phone-w) * 2.5), calc(100% + 7rem)); }
  .bento { grid-template-columns: repeat(3, 1fr); }
  .tile-wide { grid-column: span 2; }
}

@media (min-width: 80rem) {
  .stage { --dial-w: calc(var(--phone-w) * 2.5); }
}

/* Small phones: keep the stopwatch inside the screen and the dial a halo. */
@media (max-width: 47.99rem) {
  .dial-num { display: none; }
}

@media (max-width: 30rem) {
  .stopwatch { left: auto; right: 0; gap: 0.45rem; padding: 0.35rem 0.75rem 0.35rem 0.4rem; }
  .sw-ring { width: 1.75rem; height: 1.75rem; }
  .stopwatch-time { font-size: 1.125rem; }
  .stage-controls { gap: 0.125rem; }
  .seg { padding: 0 0.7rem; font-size: 0.8125rem; }
  .play-toggle { width: 2.25rem; }
  .stat { grid-template-columns: 1fr; gap: 0.6rem; }
}

@media (max-width: 22.5rem) {
  .seg { padding: 0 0.55rem; font-size: 0.75rem; }
  .play-toggle { width: 2rem; }
  .week-scale span:nth-child(even) { visibility: hidden; }
  .office-label { font-size: 0.625rem; }
}

/* ---------- Preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
  .live-dot::after { display: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .site-header { background: #000; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .stopwatch { background: #031209; }
}

@media (prefers-contrast: more) {
  :root {
    --text-2: rgba(244, 246, 245, 0.9);
    --text-3: rgba(244, 246, 245, 0.8);
    --hairline: rgba(255, 255, 255, 0.3);
    --hairline-2: rgba(255, 255, 255, 0.45);
  }
}

@media (forced-colors: active) {
  .seg[aria-pressed="true"] { outline: 3px solid CanvasText; outline-offset: -3px; }
  .faq-list summary::before,
  .faq-list summary::after,
  .live-dot,
  .chips li::before,
  .key::before { forced-color-adjust: none; background: CanvasText; }
}

/* ---------- 404 ---------- */
.not-found { display: grid; place-items: center; min-height: calc(100svh - var(--header-h)); padding: 4rem 0; text-align: center; }
.not-found .h2 { margin-bottom: 1rem; }
.not-found .btn { margin-top: 2rem; }