/* Design tokens from website/DESIGN.md §2 and §4. Copied verbatim; do not add colors here. */
:root {
  --paper: #f4f1ea;
  --paper-raised: #fbf9f3;
  --paper-deep: #eae4d6;

  --ink: #1c1915;
  --ink-soft: #57503f;
  --ink-on-dark: #f6f2e9;

  --line: rgba(28, 25, 21, 0.14);
  --line-strong: rgba(28, 25, 21, 0.3);

  --copper: #b4622d;
  --copper-deep: #7c4519;
  --copper-tint: rgba(180, 98, 45, 0.12);

  --verde: #3e6b4f;

  --shadow-rest: 0 1px 2px rgba(40, 30, 15, 0.06);
  --shadow-hover: 0 16px 40px rgba(68, 42, 16, 0.14);

  --focus-ring: 2px solid var(--copper);

  --space-section: clamp(72px, 10vw, 128px);

  --radius-btn: 12px;
  --radius-card: 20px;
  --radius-frame: 24px;
  --radius-pill: 999px;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background:
    radial-gradient(circle at 18% -4%, rgba(180, 98, 45, 0.14), transparent 34%),
    var(--paper);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 1.05rem;
  line-height: 1.7;
}

/* Drafting grid, painted over everything at a strength that must stay invisible in a screenshot. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.3;
  background-image:
    linear-gradient(rgba(28, 25, 21, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(28, 25, 21, 0.02) 1px, transparent 1px);
  background-size: 24px 24px;
}

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

/* ---------- Type scale (DESIGN.md §3) ---------- */

.display-xl {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-size: clamp(3.4rem, 7vw, 6rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
}

.display {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.title {
  margin: 0;
  font-weight: 800;
  font-size: 1.35rem;
  line-height: 1.3;
}

.body {
  margin: 0;
  color: var(--ink-soft);
  max-width: 60ch;
}

.body-sm {
  margin: 0;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

.eyebrow {
  margin: 0 0 20px;
  font-weight: 800;
  font-size: 0.8rem;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--copper-deep);
}

.mono {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 500;
  font-size: 0.85rem;
}

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

.container {
  max-width: 1180px;
  margin: 0 auto;
  padding-inline: 24px;
}

.container--narrow {
  max-width: 720px;
  text-align: center;
}

.section {
  padding-block: var(--space-section);
}

.section--deep {
  background: var(--paper-deep);
}

/* ---------- Top bar (§5.1) ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 3;
  background: rgba(244, 241, 234, 0.85);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 160ms ease-out;
}

.topbar.is-scrolled {
  border-bottom-color: var(--line);
}

.topbar-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 72px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}

/* The mark is three flag colours on transparency, drawn to read against dark: its yellow
   waveform bars wash out on paper (1.52:1) and carry on ink (10.24:1). The tile is painted
   here rather than baked into the PNG, so the corners stay rounded and the one file is
   reusable on any surface. Below ~32px the bars stop resolving; do not shrink it. */
.brand-mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-btn);
  background: var(--ink);
}

.brand-mark img {
  display: block;
  width: 32px;
  height: auto;
}

.brand-name {
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.nav {
  display: flex;
  gap: 28px;
  margin-inline: auto;
}

.nav a {
  position: relative;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 160ms ease-out;
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--copper);
  transform: scaleX(0);
  transition: transform 160ms ease-out;
}

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

.nav a:hover::after {
  transform: scaleX(1);
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* ---------- Buttons (§5.3) ---------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border-radius: var(--radius-btn);
  font-weight: 800;
  font-size: 0.94rem;
  text-decoration: none;
  transition:
    transform 160ms ease-out,
    box-shadow 160ms ease-out;
}

.button--primary {
  background: var(--ink);
  color: var(--ink-on-dark);
}

.button--secondary {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--ink);
}

.button:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.quiet-link {
  color: var(--copper);
  text-decoration: underline;
  text-underline-offset: 4px;
  font-weight: 600;
  transition: color 160ms ease-out;
}

.quiet-link:hover {
  color: var(--copper-deep);
}

/* ---------- Locale switcher (§5.4) ---------- */

.locale-switcher {
  display: inline-flex;
  gap: 4px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--paper-raised);
}

.locale-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-soft);
  font-family: inherit;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition:
    background 160ms ease-out,
    color 160ms ease-out;
}

.locale-button.is-active {
  background: var(--ink);
  color: var(--ink-on-dark);
}

.flag {
  display: block;
  width: 20px;
  height: 14px;
  border-radius: 3px;
  overflow: hidden;
  line-height: 0;
}

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

.hero {
  padding-block: clamp(56px, 8vw, 104px) var(--space-section);
}

.hero .lede {
  margin: 24px 0 0;
  max-width: 60ch;
  font-size: 1.15rem;
  color: var(--ink-soft);
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 40px;
}

/* ---------- Mat frame (§5.6) ---------- */

.media {
  margin: 64px 0 0;
}

.mat {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-frame);
  background: var(--paper-raised);
  box-shadow: var(--shadow-rest);
}

.media-caption {
  margin-top: 16px;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* ---------- Caption stage (REDESIGN.md §4.1) ----------
   The dark "stage" of amendment A1: ink is the product's native environment,
   not a mood. Motion here is the product's only observable behavior (A2). */

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

.stage {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 16 / 9;
  width: 100%;
  padding: clamp(18px, 3vw, 34px);
  border-radius: calc(var(--radius-frame) - 12px);
  overflow: hidden;
  background: var(--ink);
  color: var(--ink-on-dark);
}

.stage-chrome {
  position: absolute;
  top: clamp(18px, 3vw, 34px);
  left: clamp(18px, 3vw, 34px);
  right: clamp(18px, 3vw, 34px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.stage-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 10px;
  border: 1px solid rgba(246, 242, 233, 0.18);
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.stage-dot {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-pill);
  background: var(--copper);
  animation: stage-pulse 1800ms ease-in-out infinite;
}

@keyframes stage-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.25;
  }
}

.stage-pair {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(246, 242, 233, 0.55);
  letter-spacing: 0.16em;
}

.stage-time {
  position: absolute;
  right: clamp(18px, 3vw, 34px);
  bottom: clamp(18px, 3vw, 34px);
  color: rgba(246, 242, 233, 0.3);
  letter-spacing: 0.12em;
}

/* The OBS canvas as a labelled wireframe. There is no video to show, so the
   frame says so rather than pretending: dashed guides, mono labels. */
.scene {
  position: relative;
  flex: 1;
  margin-top: 44px;
  border: 1px dashed rgba(246, 242, 233, 0.14);
  border-radius: var(--radius-btn);
}

.scene-label {
  position: absolute;
  top: 14px;
  left: 16px;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(246, 242, 233, 0.22);
}

/* Subtitles burn into a corner of the video, not into page chrome. */
.subs {
  position: absolute;
  left: 4%;
  bottom: 6%;
  width: min(52%, 46ch);
}

.subs-label {
  display: block;
  margin-bottom: 10px;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--copper);
}

.subs-lines {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 14px;
  border: 1px dashed var(--copper-tint);
  border-radius: var(--radius-btn);
}

/* Newest line at the bottom; older lines rise above it and roll off the top. */
.sub {
  margin: 0;
  font-size: clamp(0.95rem, 1.35vw, 1.2rem);
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink-on-dark);
  animation: sub-enter 300ms ease-out;
}

/* The line about to roll off reads as leaving, the way a caption stack does. */
.sub:first-child {
  opacity: 0.5;
}

@keyframes sub-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

.stage.is-paused .stage-dot {
  animation-play-state: paused;
}

/* The newest line types in word by word, the way dictation resolves. */
.sub .w {
  opacity: 0;
  transition: opacity 180ms ease-out;
}

.sub .w.is-in {
  opacity: 1;
}

/* A 16:9 canvas at phone width is ~145px tall. Three subtitle lines, each of
   which wraps at this width, do not fit under the chrome and collide with it.
   No fixed ratio survives wrapping, so the stage grows to its content here.
   (The real <video> brings its own 16:9 when it swaps in. See REDESIGN.md 4.1.) */
@media (max-width: 640px) {
  .stage {
    aspect-ratio: auto;
  }

  /* Absolute positioning cannot grow its parent, so a wrapped subtitle block used to
     climb out of the scene and over the LIVE pill. On a phone the subtitles rejoin the
     normal flow and the scene grows under them, at any line count or text length. */
  .scene {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    margin-top: 38px;
    min-height: 264px;
    padding: 16px;
  }

  .scene-label,
  .stage-time {
    display: none;
  }

  /* Reserve the tallest the block ever gets (measured at 320px, the narrowest
     supported width, over a full loop) and bottom-align inside it. Without the
     reservation the stage resizes as phrases of different length wrap, shifting
     everything below the hero every few seconds. Re-measure if STAGE_LINES changes. */
  .subs {
    position: static;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: auto;
    min-height: 224px;
  }

  .subs-lines {
    padding: 8px 10px;
  }
}

/* A lede under a section headline, per DESIGN.md §5.5. */
.section-lede {
  margin-top: 20px;
}

/* ---------- Spec strip (REDESIGN.md §4.2) ----------
   Facts already in the body copy, displayed. Nothing measured, nothing invented. */

.spec-strip {
  border-block: 1px solid var(--line);
}

.specs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--line);
}

.specs li {
  padding: 26px 24px;
  background: var(--paper);
  color: var(--ink-soft);
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .specs {
    grid-template-columns: 1fr 1fr;
  }
}

/* Uppercase mono at 0.14em tracking needs the full column to stay on one or two
   lines; two columns of it read as rubble on a phone. */
@media (max-width: 560px) {
  .specs {
    grid-template-columns: 1fr;
  }

  .specs li {
    padding: 18px 20px;
  }
}

@media (max-width: 480px) {
  .specs {
    grid-template-columns: 1fr;
  }
}

/* ---------- OBS dock diagram (REDESIGN.md §4.3) ----------
   Our own product's presence in a third-party window, drawn in our tokens.
   A diagram, labelled as one. Not a screenshot, not a claim. */

.dock {
  border: 1px solid var(--line);
  border-radius: calc(var(--radius-frame) - 12px);
  overflow: hidden;
  background: var(--paper);
}

.dock-bar {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--paper-deep);
  color: var(--ink-soft);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.dock-list {
  margin: 0;
  padding: 8px;
  list-style: none;
}

.dock-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 8px;
  border-left: 2px solid transparent;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.dock-list li.is-active {
  border-left-color: var(--copper);
  background: var(--copper-tint);
  color: var(--ink);
  font-weight: 600;
}

/* The OBS visibility toggle, at 1.5px stroke per DESIGN.md §7. */
.dock-eye {
  flex: none;
  width: 16px;
  height: 10px;
  border: 1.5px solid currentColor;
  border-radius: 10px 10px 10px 10px / 6px 6px 6px 6px;
  opacity: 0.55;
}

.dock-toolbar {
  display: flex;
  gap: 6px;
  padding: 10px 14px;
  border-top: 1px solid var(--line);
  background: var(--paper-deep);
}

.dock-toolbar span {
  width: 18px;
  height: 4px;
  border-radius: 2px;
  background: var(--line-strong);
  opacity: 0.5;
}

.lead-feature-visual {
  margin: 0;
}

/* ---------- Editorial steps (§5.8) ---------- */

.steps {
  list-style: none;
  margin: 56px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.step {
  display: flex;
  gap: 32px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}

.step-index,
.feature-index {
  color: var(--copper);
  line-height: 1.9;
}

.feature-index {
  display: block;
  margin-bottom: 12px;
}

.step-body {
  display: grid;
  gap: 8px;
}

/* ---------- Features (§5.7) ---------- */

.lead-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 56px;
  margin-top: 56px;
}

.lead-feature-copy {
  display: grid;
  gap: 8px;
  align-content: start;
}

/* The second lead row mirrors the first, so the page alternates rather than
   repeating. Two weights, per DESIGN.md 5.7. */
.lead-feature--flip .lead-feature-copy {
  order: 2;
}

/* The subtitle area is free: it goes anywhere on the canvas, not into a corner.
   One live position, three ghosts to show it moves. */
.canvas-free {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: calc(var(--radius-frame) - 12px);
  background: var(--ink);
}

.canvas-free .spot {
  position: absolute;
  display: grid;
  place-items: center;
  width: 42%;
  height: 22%;
  border: 1px dashed rgba(246, 242, 233, 0.16);
  border-radius: 8px;
}

.canvas-free .spot--a {
  top: 10%;
  left: 6%;
}
.canvas-free .spot--b {
  top: 20%;
  right: 8%;
}
.canvas-free .spot--c {
  bottom: 8%;
  right: 12%;
}

.canvas-free .spot--live {
  top: 46%;
  left: 22%;
  border-style: solid;
  border-color: var(--copper);
  background: var(--copper-tint);
  color: var(--ink-on-dark);
}

.canvas-free .mono {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.card {
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--paper-raised);
  box-shadow: var(--shadow-rest);
}

.card .body {
  margin-top: 12px;
}

/* ---------- Products (§5.9) ---------- */

.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 56px;
}

.product-card {
  display: grid;
  gap: 12px;
  justify-items: start;
  align-content: start;
}

.product-card--next {
  background: var(--paper-deep);
}

.tag {
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--copper-tint);
  color: var(--copper-deep);
  font-weight: 800;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.tag--muted {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--ink-soft);
}

/* ---------- CTA band ---------- */

.cta-band .eyebrow,
.cta-band .display {
  text-align: center;
}

.cta-band .body {
  margin: 20px auto 40px;
  text-align: center;
}

.cta-band .body-sm {
  margin-top: 20px;
}

/* ---------- Footer (§5.10) ---------- */

.footer {
  border-top: 1px solid var(--line);
  background: var(--paper-deep);
  padding-block: 64px 32px;
}

.footer-brand {
  display: grid;
  gap: 16px;
  justify-items: start;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

/* ---------- Motion (§6) ---------- */

.js-reveal .reveal {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 400ms ease-out,
    transform 400ms ease-out;
}

.js-reveal .reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }

  .button:hover {
    transform: none;
  }

  .js-reveal .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Responsive (§9) ---------- */

@media (max-width: 900px) {
  .lead-feature {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* Stacked, the copy leads again: a diagram above its own heading reads as orphaned. */
  .lead-feature--flip .lead-feature-copy {
    order: 0;
  }
}

@media (max-width: 640px) {
  .container {
    padding-inline: 18px;
  }

  /* One scrolling page with four sections: a hamburger would open a menu whose
     targets are already a swipe away. Anchors drop; brand, locale, and app stay. */
  .nav {
    display: none;
  }

  .topbar-inner {
    justify-content: space-between;
  }

  .topbar-actions {
    gap: 10px;
  }

  .topbar-cta {
    min-height: 40px;
    padding: 0 14px;
    font-size: 0.85rem;
  }

  .brand-name {
    display: none;
  }

  .cta-row {
    flex-direction: column;
    align-items: stretch;
  }

  .step {
    gap: 20px;
  }

  .product-grid {
    grid-template-columns: 1fr;
  }

  .card {
    padding: 24px;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}