/*
 * fixture.dev global stylesheet.
 *
 * Design tokens live on :root and inherit into shadow DOM (custom properties
 * cross shadow boundaries). Views render in light DOM and are styled here;
 * the layout and interactive form components keep shadow DOM and consume the
 * same tokens.
 */

/* ---------------------------------------------------------------- fonts */

@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/hanken-grotesk-latin-300-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/hanken-grotesk-latin-400-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/hanken-grotesk-latin-500-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
}

/* --------------------------------------------------------------- tokens */

:root {
  --paper: #fafaf8;
  --ink: #1c1c1a;
  --muted: #6d6c66;
  --faint: #9c9a92;
  --hairline: #e6e4dd;
  --card: #ffffff;
  --accent: #46707f;
  --accent-ink: #35545f;
  --accent-wash: #eef3f4;
  --sans: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --measure: 62ch;
  --page-max: 68rem;
  --page-pad: clamp(1.25rem, 4vw, 2.5rem);
}

/* ----------------------------------------------------------------- base */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* ------------------------------------------------------- shared pieces */

.page {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--page-pad);
}

.eyebrow {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1rem;
}

.prose {
  max-width: var(--measure);
  color: var(--muted);
}

/* --------------------------------------------------------------- icons */

/* Lucide icons: thin strokes to match the light type. */
svg.lucide {
  stroke-width: 1.5;
}

.value-icon {
  display: inline-flex;
  width: 2.5rem;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hairline);
  border-radius: 3px;
  background: var(--card);
  color: var(--accent);
  margin-bottom: 1rem;
}

.value-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.not-found .lost-icon {
  display: inline-flex;
  color: var(--faint);
  margin-bottom: 1.25rem;
}

.not-found .lost-icon svg {
  width: 2rem;
  height: 2rem;
  stroke-width: 1.25;
}

/* ------------------------------------------------------------- buttons */

.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1;
  padding: 0.875rem 1.5rem;
  border: 1px solid var(--ink);
  border-radius: 2px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.btn-primary {
  background: var(--ink);
  color: var(--paper);
}

.btn-primary:hover {
  background: var(--accent-ink);
  border-color: var(--accent-ink);
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
}

.btn-ghost:hover {
  background: var(--accent-wash);
}

.text-link {
  color: var(--accent-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline);
  transition: border-color 0.15s ease;
}

.text-link:hover {
  border-color: var(--accent-ink);
}

/* defined term with tooltip (term-tooltip) */

term-tooltip {
  display: inline;
}

.term-tip {
  position: relative;
  display: inline-block;
}

/* The term reads as body text, marked only by the dashed underline. */
.term-tip-term {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: help;
  text-decoration: underline dashed var(--faint);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.term-tip-term:hover,
.term-tip:focus-within .term-tip-term,
.term-tip.is-open .term-tip-term {
  text-decoration-color: var(--accent-ink);
  color: var(--accent-ink);
}

/* --term-tip-shift is set by the component when a centered bubble
   would clip a viewport edge. */
.term-tip-bubble {
  --term-tip-shift: 0px;
  position: absolute;
  bottom: calc(100% + 0.375rem);
  left: 50%;
  transform: translateX(calc(-50% + var(--term-tip-shift)))
    translateY(0.375rem);
  width: max-content;
  max-width: min(19rem, calc(100vw - 2 * var(--page-pad)));
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 3px;
  box-shadow: 0 6px 20px rgb(28 28 26 / 8%);
  padding: 0.625rem 0.875rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--muted);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  z-index: 10;
}

/* Invisible extension over the gap keeps the hover path contiguous, so
   the pointer can travel from term to bubble without it closing. */
.term-tip-bubble::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 0.5rem;
}

.term-tip:hover .term-tip-bubble,
.term-tip:focus-within .term-tip-bubble,
.term-tip.is-open .term-tip-bubble {
  opacity: 1;
  visibility: visible;
  transform: translateX(calc(-50% + var(--term-tip-shift))) translateY(0);
}

.term-tip-link {
  white-space: nowrap;
}

/* ----------------------------------------------------------- home view */

home-view {
  display: block;
}

.hero {
  padding: clamp(4rem, 12vh, 8rem) 0 clamp(3.5rem, 10vh, 6.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3rem;
  align-items: center;
}

@media (min-width: 56rem) {
  .hero {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: clamp(2rem, 5vw, 4.5rem);
  }
}

.hero-visual {
  max-width: 36rem;
  width: 100%;
}

/* homepage hero: engineering drawing sheet (fixture-schematic) */

.schematic {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: clamp(0.5rem, 1.5vw, 0.875rem);
}

.schematic svg {
  display: block;
  width: 100%;
  height: auto;
}

/* stroke + fill vocabulary */

.schematic .s-hair {
  fill: none;
  stroke: var(--hairline);
  stroke-width: 1;
}

.schematic .s-ink {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.5;
}

.schematic .s-code {
  stroke: var(--hairline);
  stroke-width: 3.5;
  stroke-linecap: round;
}

/* repaired segment left behind where a bug was cleared */
.schematic .s-fix {
  stroke: var(--accent);
  stroke-width: 3.5;
  stroke-linecap: round;
  opacity: 0.55;
}

/* latent bug: pixel invader in the terminal's error red */
.schematic .s-bug rect {
  fill: #a03d3d;
}

.schematic .s-scanline {
  stroke: var(--accent);
  stroke-width: 1.25;
}

.schematic .s-scan-band {
  fill: var(--accent);
  opacity: 0.08;
}

.schematic .s-leader {
  stroke: var(--faint);
  stroke-width: 0.75;
}

.schematic .s-ext {
  stroke: var(--faint);
  stroke-width: 0.75;
}

.schematic .s-accent {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.25;
}

.schematic .s-fill {
  fill: var(--ink);
  stroke: none;
}

.schematic .s-fill-accent {
  fill: var(--accent);
  stroke: none;
}

/* dimension in the defect red (suite schematic's "verified" span) */
.schematic .s-bad {
  fill: none;
  stroke: #a03d3d;
  stroke-width: 1.25;
}

.schematic .s-fill-bad {
  fill: #a03d3d;
  stroke: none;
}

.schematic .s-fill-faint {
  fill: var(--faint);
  stroke: none;
}

/* annotation type */

.schematic text {
  font-family: var(--mono);
}

.schematic .s-label {
  font-size: 12.5px;
  fill: var(--muted);
}

.schematic .s-label-accent {
  fill: var(--accent-ink);
  font-weight: 500;
}

.schematic .s-label-bad {
  fill: #a03d3d;
  font-weight: 500;
}

.schematic .s-dim-label {
  font-size: 12.5px;
  font-weight: 500;
  fill: var(--accent-ink);
  letter-spacing: 0.08em;
}

/* part names inside station boxes, and flow labels on connectors */
.schematic .s-part {
  font-size: 10.5px;
  letter-spacing: 0.06em;
  fill: var(--faint);
}

/* station number in a header ("01 · plant") */
.schematic .s-num {
  fill: var(--accent);
  font-weight: 500;
}

/* chip nodes: commands and actors ("$ flawd run", the agent) */
.schematic .s-chip {
  font-size: 13px;
  font-weight: 500;
  fill: var(--ink);
}

.schematic .s-wordmark {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.18em;
  fill: var(--ink);
}

.schematic .s-block {
  font-size: 8px;
  letter-spacing: 0.04em;
  fill: var(--faint);
}

/*
 * Inspection sequence, played once. The timeline:
 *   0.0s  sheet frame
 *   0.25  container draws; agent arrow; "your code" callout
 *   0.95  code lines write in top to bottom, bugs appearing in place
 *   2.0   "latent bugs" callout
 *   2.7   flawd scanline sweeps the container (1.6s, linear);
 *         each bug it passes fades out, a repaired segment fades in
 *   4.3   scan exits; callout flips to "no survivors"
 *   4.65  "trustworthy" dimension draws — done ~5.2s
 * Bug fade-in/out delays are derived from the sweep: it crosses
 * y=145/195/220 at 3.22/3.76/4.02s.
 */

@keyframes sch-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes sch-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes sch-stroke {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes sch-sweep {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(150px);
  }
}

.schematic .sch-draw {
  stroke-dasharray: 1;
  animation: sch-stroke 0.5s ease-out both;
}

.schematic .sch-frame,
.schematic .sch-piece,
.schematic .sch-agent,
.schematic .sch-dim {
  animation: sch-fade 0.45s ease-out both;
}

.schematic .sch-piece,
.schematic .sch-piece .sch-draw {
  animation-delay: 0.25s;
}

.schematic .sch-agent,
.schematic .sch-agent .sch-draw {
  animation-delay: 0.6s;
}

.schematic .sch-callout-code {
  animation: sch-fade 0.35s ease-out 0.85s both;
}

/* code lines write left to right, one after another */

.schematic .sch-write {
  stroke-dasharray: 1;
  animation: sch-stroke 0.3s ease-out both;
}

.schematic .sch-l1 {
  animation-delay: 0.95s;
}

.schematic .sch-l2 {
  animation-delay: 1.15s;
}

.schematic .sch-l3 {
  animation-delay: 1.35s;
}

.schematic .sch-l4 {
  animation-delay: 1.55s;
}

.schematic .sch-l5 {
  animation-delay: 1.75s;
}

/* bugs appear with their line (outer), die under the scan (inner) */

.schematic .sch-bug-in-1 {
  animation: sch-fade 0.2s ease-out 1.25s both;
}

.schematic .sch-bug-in-2 {
  animation: sch-fade 0.2s ease-out 1.65s both;
}

.schematic .sch-bug-in-3 {
  animation: sch-fade 0.2s ease-out 1.85s both;
}

.schematic .sch-bug-out-1 {
  animation: sch-fade-out 0.25s ease-in 3.2s both;
}

.schematic .sch-bug-out-2 {
  animation: sch-fade-out 0.25s ease-in 3.75s both;
}

.schematic .sch-bug-out-3 {
  animation: sch-fade-out 0.25s ease-in 4s both;
}

.schematic .sch-fix-1 {
  animation: sch-fade 0.3s ease-out 3.35s both;
}

.schematic .sch-fix-2 {
  animation: sch-fade 0.3s ease-out 3.9s both;
}

.schematic .sch-fix-3 {
  animation: sch-fade 0.3s ease-out 4.15s both;
}

/* defect callout: red note during inspection, teal verdict after */

.schematic .sch-callout-leader {
  animation: sch-fade 0.35s ease-out 2s both;
}

.schematic .sch-callout-latent {
  animation: sch-fade 0.35s ease-out 2s both;
}

.schematic .sch-latent-out {
  animation: sch-fade-out 0.25s ease-in 4.3s both;
}

.schematic .sch-callout-verdict {
  animation: sch-fade 0.35s ease-out 4.55s both;
}

/* the scan itself: fade in, sweep the container, fade out */

.schematic .sch-scan {
  animation: sch-fade 0.2s ease-out 2.7s both;
}

.schematic .sch-scan-run {
  animation:
    sch-sweep 1.6s linear 2.7s both,
    sch-fade-out 0.3s ease-out 4.3s both;
}

.schematic .sch-dim,
.schematic .sch-dim .sch-draw {
  animation-delay: 4.65s;
}

/*
 * Mechanism sheet: a one-shot cascade when the sheet scrolls into
 * view (the component adds .is-live), following the flow — command,
 * stations, agent, return path. Each element takes a second to
 * appear, one per beat; between beats the flow arrows draw
 * themselves stroke-first (.m-trace), arrowheads and flow labels
 * landing as the stroke completes (.m-pop). Every group carries its
 * beat as an inline --md delay: elements on whole seconds, arrows
 * at source + 0.75s. The return path's dashes then march slowly
 * toward the command chip: the cycle, running.
 *
 * Until the sheet goes live only the frame shows: every player
 * rests hidden (fades at zero opacity, traces fully offset) so
 * there's no flash of the finished drawing before the cascade.
 */

@keyframes mech-march {
  to {
    stroke-dashoffset: -9;
  }
}

.schematic .m-fade,
.schematic .m-pop {
  opacity: 0;
}

.schematic .m-trace {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.schematic.is-live .m-fade {
  animation: sch-fade 0.1s ease-out both;
  animation-delay: var(--md, 0s);
}

.schematic.is-live .m-trace {
  animation: sch-stroke 0.5s ease-out both;
  animation-delay: var(--md, 0s);
}

.schematic.is-live .m-pop {
  animation: sch-fade 0.3s ease-out both;
  animation-delay: calc(var(--md, 0s) + 0.35s);
}

.schematic .m-march {
  stroke-dasharray: 5 4;
}

.schematic.is-live .m-march {
  animation: mech-march 0.9s linear 7s infinite;
}

/*
 * Reduced motion: the finished sheet, immediately. Ephemeral players
 * (bugs, the red callout, the scan) end the sequence invisible, so
 * they stay hidden; everything else's resting style is its end state.
 */
@media (prefers-reduced-motion: reduce) {
  /* !important outranks the two-class timeline rules above */
  .schematic * {
    animation: none !important;
  }

  .schematic .sch-ephemeral {
    opacity: 0;
  }

  /* mechanism players rest hidden awaiting the cascade; with no
     animation to reveal them, rest them in their finished state */
  .schematic .m-fade,
  .schematic .m-pop {
    opacity: 1;
  }

  .schematic .m-trace {
    stroke-dashoffset: 0;
  }
}

/* terminal mockup (flawd product page hero) */

.terminal {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 4px;
}

.terminal-bar {
  display: flex;
  gap: 0.4rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--hairline);
}

.terminal-bar span {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: var(--hairline);
}

.terminal pre {
  margin: 0;
  padding: 1.375rem 1.5rem 1.625rem;
  font-family: var(--mono);
  font-size: 0.875rem;
  line-height: 1.85;
  color: var(--ink);
  overflow-x: auto;
  /* Reserve the finished transcript's exact height so the animation
     never shifts layout: 14 line boxes (13 script lines + the cursor's
     line) x 1.85 line-height, plus the vertical padding. */
  min-height: calc(25.9em + 3rem);
}

.terminal .t-prompt,
.cmd-chip .t-prompt {
  color: var(--accent);
  font-weight: 500;
}

.terminal .t-cmd,
.cmd-chip .t-cmd {
  font-weight: 500;
}

.terminal .t-ok {
  color: var(--accent-ink);
}

.terminal .t-bad {
  color: #a03d3d;
}

.terminal .t-dim {
  color: var(--faint);
}

.terminal .t-note {
  color: var(--faint);
  font-style: italic;
}

.terminal .t-cursor,
.cmd-chip .t-cursor {
  display: inline-block;
  width: 0.55em;
  height: 1.1em;
  vertical-align: text-bottom;
  background: var(--accent);
  animation: cursor-blink 1.1s steps(1) infinite;
}

@keyframes cursor-blink {
  50% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .terminal .t-cursor,
  .cmd-chip .t-cursor {
    animation: none;
  }
}

/* one-line command chips (copy-command, typed-command) */

.cmd-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--hairline);
  border-radius: 4px;
  background: var(--card);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.875rem;
  line-height: 1.4;
}

.cmd-chip .t-prompt {
  white-space: pre;
}

.cmd-chip .t-cmd {
  display: inline-block;
  text-align: left;
  white-space: pre;
}

.cmd-chip .t-cursor {
  margin-left: 0.55ch;
}

button.cmd-chip {
  cursor: pointer;
  transition: border-color 0.15s ease;
}

button.cmd-chip:hover,
button.cmd-chip:focus-visible {
  border-color: var(--accent);
}

.cmd-chip-icon {
  display: grid;
  place-items: center;
  margin-left: 0.75rem;
  color: var(--faint);
}

.cmd-chip-icon svg {
  width: 0.9375rem;
  height: 0.9375rem;
}

button.cmd-chip:hover .cmd-chip-icon {
  color: var(--muted);
}

.cmd-chip-icon.is-copied {
  color: var(--accent-ink);
}

.hero h1 {
  font-size: clamp(2.5rem, 6vw, 4.25rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin: 0 0 1.5rem;
  max-width: 18ch;
}

.hero .lede {
  font-size: clamp(1.0625rem, 2vw, 1.25rem);
  font-weight: 300;
  line-height: 1.6;
  color: var(--muted);
  max-width: 46ch;
  margin: 0 0 2.5rem;
}

.hero .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
}

/* products */

.products {
  border-top: 1px solid var(--hairline);
  padding: clamp(3rem, 8vh, 5rem) 0;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.product-card {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 3px;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
}

.product-card .logo {
  height: 3.25rem;
  display: flex;
  align-items: center;
  margin-bottom: 1.75rem;
}

.product-card .logo img {
  max-height: 100%;
  max-width: 11rem;
  display: block;
}

.product-card h3 {
  font-size: 1.375rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0 0 0.5rem;
}

.product-card h3 a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--hairline);
  transition: border-color 0.15s ease;
}

.product-card h3 a:hover {
  border-color: var(--accent-ink);
}

.product-card .tagline {
  font-size: 1rem;
  color: var(--ink);
  margin: 0 0 1rem;
}

.product-card .blurb {
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.65;
  margin: 0 0 1.5rem;
}

.product-card .meta {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--faint);
  margin: auto 0 1.25rem;
  padding-top: 0.5rem;
}

.product-card .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

/* values */

.values {
  border-top: 1px solid var(--hairline);
  padding: clamp(3rem, 8vh, 5rem) 0;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: 2.5rem;
}

.values-grid h3 {
  font-size: 1.0625rem;
  font-weight: 500;
  margin: 0 0 0.625rem;
}

.values-grid p {
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.65;
  margin: 0;
}

/* subscribe */

.subscribe {
  border-top: 1px solid var(--hairline);
  padding: clamp(3rem, 8vh, 5rem) 0;
}

.subscribe h2 {
  margin-top: 0;
}

/* shared section heading */

section h2 {
  font-size: clamp(1.625rem, 3vw, 2.125rem);
  font-weight: 300;
  letter-spacing: -0.015em;
  margin: 0;
}

/* ----------------------------------------------------- about/eval views */

about-view,
eval-view,
not-found-view {
  display: block;
}

.subpage {
  padding: clamp(3rem, 8vh, 5rem) 0 clamp(4rem, 10vh, 6rem);
}

.subpage h1 {
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 1.25rem;
  max-width: 24ch;
}

.subpage h2 {
  font-size: 1.25rem;
  font-weight: 500;
  margin: 2.75rem 0 0.75rem;
}

.subpage p {
  max-width: var(--measure);
  color: var(--muted);
  margin: 0 0 1rem;
}

.subpage .lede {
  font-size: clamp(1.0625rem, 2vw, 1.1875rem);
  font-weight: 300;
}

/* ----------------------------------------------------- flawd view */

flawd-view {
  display: block;
}

/* Sections share the landing rhythm: hairline top, generous padding. */
.flawd-page .ai-case,
.flawd-page .how-it-works,
.flawd-page .features,
.flawd-page .interface,
.flawd-page .runs,
.flawd-page .pricing,
.flawd-page .faq {
  border-top: 1px solid var(--hairline);
  padding: clamp(3rem, 8vh, 5rem) 0;
}

.flawd-page section h2 {
  max-width: 26ch;
}

/* why-now: copy beside the suite schematic, echoing the hero split */
.flawd-page .ai-case {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 56rem) {
  .flawd-page .ai-case {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: clamp(2rem, 5vw, 4.5rem);
  }
}

.ai-case-visual {
  max-width: 33rem;
  width: 100%;
  justify-self: center;
}

@media (min-width: 56rem) {
  .ai-case-visual {
    justify-self: end;
  }
}

/* hero lockup: product mark beside the eyebrow */

.product-mark {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.product-mark img {
  height: 1.625rem;
  width: auto;
  display: block;
}

.flawd-page .prose {
  margin: 1.25rem 0 0;
}

.flawd-page .prose code {
  font-family: var(--mono);
  font-size: 0.875em;
}

/* how it works */

/*
 * The mechanism is drawn as a full-width process sheet. Its mono
 * annotations only stay legible at a decent rendered width, so narrow
 * screens get the four text steps instead — same story, one visible
 * at a time.
 */
.mech-figure {
  display: none;
  margin-top: 2.5rem;
}

@media (min-width: 56rem) {
  .mech-figure {
    display: block;
  }

  .how-it-works .steps-grid {
    display: none;
  }
}

.steps-grid {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: clamp(1.5rem, 4vw, 2.5rem);
  counter-reset: none;
}

.steps-grid .step-n {
  display: block;
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin-bottom: 0.75rem;
}

.steps-grid h3 {
  font-size: 1.0625rem;
  font-weight: 500;
  margin: 0 0 0.625rem;
}

.steps-grid p {
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.65;
  margin: 0;
}

/* features */

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: clamp(1.5rem, 4vw, 2.5rem);
  margin-top: 2.5rem;
}

.features-grid h3 {
  font-size: 1.0625rem;
  font-weight: 500;
  margin: 0 0 0.625rem;
}

.features-grid p {
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.65;
  margin: 0;
}

/* interface screenshots */

.interface-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
  gap: clamp(1.5rem, 4vw, 2.5rem);
  margin-top: 2.5rem;
  align-items: start;
}

.interface-grid figure {
  margin: 0;
}

/* Each screenshot is a button that opens the full-resolution lightbox. */
.shot {
  display: block;
  position: relative;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  border-radius: 4px;
}

.interface-grid img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--hairline);
  border-radius: 4px;
  transition: border-color 0.15s ease;
}

.shot:hover img,
.shot:focus-visible img {
  border-color: var(--accent);
}

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

.shot-zoom {
  position: absolute;
  right: 0.625rem;
  bottom: 0.625rem;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--hairline);
  border-radius: 3px;
  background: var(--card);
  color: var(--muted);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.shot-zoom svg {
  width: 1rem;
  height: 1rem;
}

.shot:hover .shot-zoom,
.shot:focus-visible .shot-zoom {
  opacity: 1;
}

.interface-grid figcaption {
  margin-top: 0.875rem;
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.6;
}

.interface copy-command {
  display: block;
  margin-top: 1.25rem;
}

/* handoff beat: centered between the screenshots and the CTA */

.handoff {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.125rem;
  margin-top: clamp(3rem, 6vh, 4rem);
  text-align: center;
}

.handoff h3 {
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
  font-weight: 500;
  margin: 0;
}

.handoff p {
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.65;
  max-width: 52ch;
  margin: 0;
}

.interface-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.875rem;
  margin-top: 2.5rem;
}

.cta-note {
  margin: 0;
  color: var(--faint);
  font-size: 0.875rem;
}

/* full-resolution screenshot lightbox */

.lightbox {
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  max-width: min(94vw, 80rem);
  max-height: none;
  overflow: visible;
}

.lightbox::backdrop {
  background: rgba(28, 28, 26, 0.82);
}

.lightbox figure {
  margin: 0;
}

.lightbox img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  max-height: 82vh;
  width: auto;
  height: auto;
  border: 1px solid var(--hairline);
  border-radius: 4px;
  background: var(--card);
}

.lightbox figcaption {
  margin-top: 0.875rem;
  color: var(--paper);
  font-size: 0.875rem;
  line-height: 1.6;
  text-align: center;
}

.lightbox-close {
  position: fixed;
  top: 1rem;
  right: 1rem;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid rgba(250, 250, 248, 0.3);
  border-radius: 3px;
  background: transparent;
  color: var(--paper);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.lightbox-close:hover {
  background: rgba(250, 250, 248, 0.12);
  border-color: rgba(250, 250, 248, 0.6);
}

.lightbox-close svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* runs — local / platforms / CI environment cards */

.runs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.runs-grid .env {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 3px;
  padding: clamp(1.5rem, 3vw, 2rem);
}

/* Fixed art height keeps the three headings on one baseline. */
.env-art {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  height: 7.5rem;
  margin-bottom: 1.25rem;
}

.env-art > svg {
  height: 100%;
  width: auto;
  max-width: 100%;
}

/* Equal flex basis keeps the icons evenly spaced no matter how wide
   each caption runs. */
.env-os {
  margin: 0;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
}

.env-os svg {
  height: 3rem;
  width: 3rem;
}

.env-os figcaption {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--faint);
  white-space: nowrap;
}

.runs-grid .env h3 {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin: 0 0 0.875rem;
}

.runs-grid .env p {
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.65;
  margin: 0;
}

/* runs-art stroke vocabulary (mirrors the schematic's) */

.env-art .ra-ink {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.env-art .ra-hair {
  fill: none;
  stroke: var(--hairline);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.env-art .ra-accent {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.env-art .ra-code {
  stroke: var(--hairline);
  stroke-width: 3.5;
  stroke-linecap: round;
}

.env-art .ra-code-accent {
  stroke: var(--accent);
  stroke-width: 3.5;
  stroke-linecap: round;
  opacity: 0.55;
}

.env-art .ra-fill {
  fill: var(--ink);
  stroke: none;
}

.env-art .ra-fill-accent {
  fill: var(--accent);
  stroke: none;
}

/* pricing */

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.pricing-note {
  color: var(--faint);
  font-size: 0.875rem;
  margin: 0;
}

/* pricing cards (Evaluate / Individual / Team) */

pricing-card {
  display: contents;
}

.pricing-card ul {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.65;
}

.pricing-card ul li {
  padding-left: 1.1rem;
  position: relative;
  margin-bottom: 0.4rem;
}

.pricing-card ul li::before {
  content: '\2013';
  position: absolute;
  left: 0;
  color: var(--faint);
}

.pricing-card .price {
  margin: 0 0 1.25rem;
}

.pricing-card .price strong {
  display: block;
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.pricing-card .price-note {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: var(--muted);
}

.pricing-card .actions {
  margin-top: auto;
}

.team-fields {
  display: grid;
  gap: 0.75rem;
  margin: 0 0 1.5rem;
}

.team-fields label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted);
}

.team-fields input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 0.25rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--hairline);
  border-radius: 2px;
  background: var(--card);
  color: var(--ink);
  font-size: 1rem;
  font-family: inherit;
}

.team-fields input:focus {
  outline: none;
  border-color: var(--accent);
}

.team-fields .team-seats-label input {
  max-width: 6rem;
}

.team-fields .optional {
  font-weight: 400;
  color: var(--faint);
}

.team-fields .team-seats-note {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--faint);
}

.pricing-shared-note {
  margin: 2rem 0 0;
  color: var(--muted);
  font-size: 0.9375rem;
  max-width: var(--measure);
}

.pricing-renew-note {
  margin: 0.75rem 0 0;
  color: var(--muted);
  font-size: 0.9375rem;
}

.faq-columns {
  display: grid;
  gap: 0.5rem;
}

@media (min-width: 56rem) {
  .faq-columns {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
  }
}

.faq-col-heading {
  font-size: 1.0625rem;
  font-weight: 500;
  margin: 2rem 0 0;
}

.faq-col .faq-list {
  margin-top: 1rem;
}

/* renew and thanks pages */

/* These pages end in a form; without bottom padding the submit button
   butts against the footer hairline. Matches the .subpage scale. */
.renew-page,
.support-page {
  padding-bottom: clamp(4rem, 10vh, 6rem);
}

.renew-page form,
.support-page form {
  display: grid;
  gap: 1rem;
  max-width: 30rem;
  margin-top: 2rem;
}

.renew-page label,
.support-page label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted);
}

.renew-page input,
.support-page input,
.support-page textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 0.25rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--hairline);
  border-radius: 2px;
  background: var(--card);
  color: var(--ink);
  font-size: 1rem;
  font-family: inherit;
}

.renew-page input:focus,
.support-page input:focus,
.support-page textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.form-error {
  background: #faf1f1;
  border: 1px solid #d8a8a8;
  border-radius: 3px;
  padding: 0.875rem 1rem;
  color: #7c2f2f;
  font-size: 0.9375rem;
}

.form-notice {
  background: var(--accent-wash);
  border: 1px solid var(--accent);
  border-radius: 3px;
  padding: 0.875rem 1rem;
  color: var(--accent-ink);
  font-size: 0.9375rem;
}

.thanks-page .cli-instruction,
.renew-page .cli-instruction {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 2px;
  padding: 0.75rem 1rem;
  font-family: var(--mono);
  font-size: 0.875rem;
  margin: 0.75rem 0;
}

/* downloads */

.download-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}

.download-card {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1.25rem;
  border: 1px solid var(--hairline);
  border-radius: 3px;
  background: var(--card);
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.15s ease;
}

.download-card:hover {
  border-color: var(--accent);
}

.download-card-detected {
  border-color: var(--accent);
  background: var(--accent-wash);
}

.download-glyph {
  display: block;
  height: 2.25rem;
  margin-bottom: 0.5rem;
  color: var(--accent);
}

.download-glyph svg {
  height: 100%;
  width: auto;
}

/* The env drawings use the runs-art stroke vocabulary. */
.download-glyph .ra-ink {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.download-glyph .ra-hair {
  fill: none;
  stroke: var(--hairline);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.download-glyph .ra-accent {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.download-glyph .ra-fill {
  fill: var(--ink);
  stroke: none;
}

.download-os {
  font-weight: 500;
}

.download-arch {
  color: var(--muted);
  font-size: 0.875rem;
}

.download-detected-note {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 0.25rem;
}

.download-help {
  margin-top: 1.5rem;
  font-size: 0.9375rem;
  color: var(--muted);
}

.install-instructions {
  margin-top: 2.5rem;
  max-width: var(--measure);
}

.install-instructions h3 {
  font-size: 1.0625rem;
  font-weight: 500;
  margin: 0 0 0.5rem;
}

.install-instructions details {
  border-top: 1px solid var(--hairline);
}

.install-instructions details:last-of-type {
  border-bottom: 1px solid var(--hairline);
}

.install-instructions summary {
  cursor: pointer;
  padding: 0.875rem 0;
  font-weight: 500;
}

.install-instructions details p {
  color: var(--muted);
  font-size: 0.9375rem;
  margin: 0.5rem 0;
}

.install-instructions copy-command {
  display: block;
  margin: 0.5rem 0;
}

/* faq */

.faq-list {
  margin-top: 2rem;
  max-width: var(--measure);
}

/* Reserve room for the outside disclosure marker; without this it hangs
   into the narrow mobile gutter and crowds the viewport edge. Padding on
   details (not the list) keeps the hairline dividers full-width. */
.faq-list details {
  padding-left: 1.375rem;
}

@media (min-width: 56rem) {
  .faq-list details {
    /* Wide gutter: let the marker hang left of the text column. */
    padding-left: 0;
  }
}

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

.faq-list details:last-child {
  border-bottom: 1px solid var(--hairline);
}

.faq-list summary {
  cursor: pointer;
  padding: 1rem 0;
  font-weight: 500;
  font-size: 1rem;
  list-style-position: outside;
  transition: color 0.15s ease;
}

.faq-list summary:hover {
  color: var(--accent-ink);
}

.faq-list details p {
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.65;
  margin: 0 0 1.25rem;
}

.faq-list details code {
  font-family: var(--mono);
  font-size: 0.875em;
}

.faq-more {
  margin-top: 2rem;
}

/* ------------------------------------------- static pages (legal) */

/*
 * Header/footer for server-rendered static pages (privacy, terms,
 * notifications), mirroring the SPA's main-layout chrome.
 */

.site-header {
  border-bottom: 1px solid var(--hairline);
  background: var(--paper);
}

.site-header .bar {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 1.125rem var(--page-pad);
  display: flex;
  align-items: center;
  gap: 2rem;
}

.site-header .wordmark {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
  color: var(--ink);
  font-weight: 500;
  font-size: 1.0625rem;
  letter-spacing: 0.01em;
}

.site-header .wordmark img {
  height: 1.375rem;
  width: auto;
  display: block;
}

.site-header nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: clamp(0.875rem, 2.5vw, 1.75rem);
}

.site-header nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.9375rem;
  transition: color 0.15s ease;
}

.site-header nav a:hover {
  color: var(--ink);
}

.site-footer {
  border-top: 1px solid var(--hairline);
  padding: 2.5rem var(--page-pad);
  margin-top: clamp(3rem, 8vh, 5rem);
}

.site-footer .footer-inner {
  max-width: var(--page-max);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  font-size: 0.875rem;
  color: var(--faint);
}

.site-footer .footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-left: auto;
}

.site-footer .footer-links a {
  color: var(--muted);
  text-decoration: none;
  transition: color 0.15s ease;
}

.site-footer .footer-links a:hover {
  color: var(--ink);
}

/* legal article typography */

.legal h2 {
  font-size: 1.375rem;
  font-weight: 500;
  margin: 2.75rem 0 0.75rem;
}

.legal h3 {
  font-size: 1.0625rem;
  font-weight: 500;
  margin: 1.75rem 0 0.5rem;
}

.legal p,
.legal li {
  max-width: var(--measure);
  color: var(--muted);
}

.legal p {
  margin: 0 0 1rem;
}

.legal ul {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
}

.legal li {
  margin-bottom: 0.375rem;
}

.legal a {
  color: var(--accent-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline);
}

.legal a:hover {
  border-color: var(--accent-ink);
}

/* not found */

.not-found {
  padding: clamp(5rem, 18vh, 10rem) 0;
  text-align: center;
}

.not-found .code {
  font-family: var(--mono);
  font-size: 0.875rem;
  letter-spacing: 0.14em;
  color: var(--faint);
  margin: 0 0 0.75rem;
}

.not-found h1 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 300;
  margin: 0 0 1.5rem;
}