/* =========================================================================
   Clawdia — landing page v0.2
   Editorial-craft warmth. Quiet motion, never ambient decoration.
   The signature is the brand. One accent. Restraint via omission.

   Tokens mirror src/clawdia/design/tokens.py + proposed additions
   (see docs/marketing/landing-page-v0-brief.md §A5–§A7).
   ========================================================================= */

:root {
  color-scheme: light dark;

  /* === Color — light mode (default) === */
  --color-surface:         #f7f3ec;
  --color-surface-subtle:  #e8e4dc;
  --color-surface-panel:   #efeae0;  /* Proposed for DESIGN.md */
  --color-ink:             #1a1814;
  --color-ink-soft:        #57514a;  /* Proposed: body-secondary, AA-passing */
  --color-ink-muted:       #a8a39a;  /* Decorative meta only */
  --color-accent:          #C8632E;
  --color-accent-deep:     #9b481e;
  --color-on-accent:       #f7f3ec;  /* Invariant — cream text on the sienna CTA / chips in both modes */

  /* === Composition tokens (mode-aware via dark override below) ===
     Hairlines, elevations, highlights, washes, and CTA glow are inlined as
     rgba in component rules so light mode is unchanged. The dark @media block
     re-points each so the editorial-coffee character holds on warm graphite. */
  --hairline-strong:       rgba(26, 24, 20, 0.16);  /* shift-log card border */
  --hairline-soft:         rgba(26, 24, 20, 0.10);  /* bullet card borders */
  --hairline-faint:        rgba(26, 24, 20, 0.08);  /* rail icon border */
  --hairline-hair:         rgba(26, 24, 20, 0.07);  /* ledger row divider */

  --elevation-rest:        0 4px 10px -4px rgba(26, 24, 20, 0.12);    /* CTA at rest */
  --elevation-card:        0 22px 60px rgba(26, 24, 20, 0.08);        /* shift-log */
  --elevation-bullet:      0 18px 40px -22px rgba(26, 24, 20, 0.18);  /* v-thread */
  --elevation-ledger:      0 18px 40px -22px rgba(26, 24, 20, 0.16);  /* v-ledger */
  --elevation-cta-floor:   0 8px 16px -6px rgba(26, 24, 20, 0.14);    /* CTA hover floor */

  --highlight-inset:       inset 0 1px 0 rgba(247, 243, 236, 0.82);   /* shift-log top edge */
  --highlight-card-inset:  inset 0 1px 0 rgba(247, 243, 236, 0.80);   /* bullet card top edge */

  --surface-veil:          rgba(247, 243, 236, 0.6);    /* channel-rail wash */
  --panel-diag-from:       rgba(239, 234, 224, 0.72);   /* shift-log diagonal */
  --panel-diag-to:         rgba(247, 243, 236, 0.38);

  --accent-tint:           rgba(200, 99, 46, 0.10);     /* shift-log corner wash */
  --accent-dust:           rgba(200, 99, 46, 0.14);     /* trailing fade */
  --accent-scribble:       rgba(200, 99, 46, 0.22);     /* .prose strong scribble */

  /* CTA reflection: a matte single-band radial gradient panned by tilt. On cream,
     a cream tint + soft-light blend reads as a quiet editorial gloss. On dark
     (see dark override), the tint shifts warm and the blend flips to screen so the
     band reads as a real specular highlight, not a mid-gray smear. */
  --cta-reflection-1:      rgba(252, 240, 218, 0.18);
  --cta-reflection-2:      rgba(252, 240, 218, 0.07);
  --cta-reflection-3:      rgba(252, 240, 218, 0);
  --cta-reflection-blend:  soft-light;

  /* CTA glow: 4-layer luminance lift. On cream the outer layers are pale-warm-cream —
     they genuinely brighten the surrounding light substrate. On dark the same logic
     holds but the warm color identity has to carry more weight, so the inner kiss
     gets hotter alpha and the band slides warmer. */
  --cta-glow-1:            0 0 8px -1px rgba(255, 198, 132, 0.55);
  --cta-glow-2:            0 0 30px -4px rgba(255, 246, 226, 0.90);
  --cta-glow-3:            0 0 64px -14px rgba(255, 250, 236, 0.72);
  --cta-glow-4:            0 0 120px -32px rgba(255, 252, 244, 0.52);

  /* Subtle drop under the CTA text — sits the label on the tilting surface. */
  --cta-text-emboss:       0 1px 0 rgba(0, 0, 0, 0.16);

  /* === Type families === */
  --font-display:  'EB Garamond', Georgia, 'Times New Roman', serif;
  --font-body:     'Geist', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', sans-serif;
  --font-wordmark: 'Caveat', 'Brush Script MT', cursive;
  --font-mono:     'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* === Type scale (proposed for DESIGN.md §A5) === */
  --fs-hero:        clamp(2.75rem, 4.2vw + 1rem, 5rem);     /* 44 → 80 */
  --fs-display:     clamp(2.25rem, 2.4vw + 1.25rem, 3.5rem);/* 36 → 56 */
  --fs-section:     clamp(1.625rem, 0.8vw + 1.25rem, 2rem); /* 26 → 32 */
  --fs-bullet:      clamp(1.5rem, 1vw + 1.25rem, 1.875rem); /* 24 → 30 — one step smaller than section */
  --fs-body-lead:   clamp(1.125rem, 0.4vw + 1rem, 1.25rem); /* 18 → 20 */
  --fs-body:        1rem;       /* 16 */
  --fs-meta:        0.875rem;   /* 14 */
  --fs-mono:        0.8125rem;  /* 13 */

  /* === Signature sizes (the character moment) === */
  --fs-signature-closing: clamp(2.75rem, 3.5vw + 1rem, 4.25rem);/* 44 → 68 — one step LARGER than hero */
  --fs-bullet-numeral:    clamp(1.5rem, 1vw + 1.125rem, 1.875rem);/* 24 → 30 */

  /* === Editorial rhythm (variable pacing) === */
  --rhythm-tight:   clamp(72px, 7vw, 112px);
  --rhythm-default: clamp(112px, 11vw, 180px);
  --rhythm-loose:   clamp(160px, 16vw, 240px);

  /* === Layout === */
  --page-max:    1200px;
  --page-gutter: 24px;

  /* === Edges === */
  --hairline: 1px solid var(--color-surface-subtle);
  --rule:     1.5px solid var(--color-ink);
}

@media (min-width: 900px) {
  :root { --page-gutter: 48px; }
}

/* =========================================================================
   Dark mode — substrate inversion + composition retune
   The editorial-coffee character holds: warm graphite substrate, warm parchment
   ink, sienna accent unchanged. Hairlines become cream-tinted, shadows pump
   opacity (ink-shadows disappear into dark surfaces otherwise), the CTA
   reflection flips soft-light → screen (soft-light averages toward 50% gray on
   dark and reads as a smear; screen always lightens), and the glow stack
   shifts the warm-amber identity hotter so the halo reads as sienna fire, not
   pale-cream halo floating on graphite.
   ========================================================================= */
@media (prefers-color-scheme: dark) {
  :root {
    --color-surface:         #1a1612;   /* warm graphite — same hue family as the cream */
    --color-surface-subtle:  #25201a;
    --color-surface-panel:   #221d18;   /* one stop lifted from surface */
    --color-ink:             #f4ede0;   /* warm parchment */
    --color-ink-soft:        #b8aa92;   /* warm taupe — AA-passing body secondary on graphite */
    --color-ink-muted:       #6e6657;   /* dimmer warm taupe — decorative meta only */
    /* accent + accent-deep + on-accent: invariant. Sienna reads on both substrates. */

    --hairline-strong:       rgba(244, 237, 224, 0.18);
    --hairline-soft:         rgba(244, 237, 224, 0.12);
    --hairline-faint:        rgba(244, 237, 224, 0.09);
    --hairline-hair:         rgba(244, 237, 224, 0.07);

    --elevation-rest:        0 6px 14px -4px rgba(0, 0, 0, 0.55);
    --elevation-card:        0 22px 60px rgba(0, 0, 0, 0.50);
    --elevation-bullet:      0 18px 40px -18px rgba(0, 0, 0, 0.60);
    --elevation-ledger:      0 18px 40px -18px rgba(0, 0, 0, 0.55);
    --elevation-cta-floor:   0 8px 16px -6px rgba(0, 0, 0, 0.55);

    --highlight-inset:       inset 0 1px 0 rgba(244, 237, 224, 0.10);
    --highlight-card-inset:  inset 0 1px 0 rgba(244, 237, 224, 0.08);

    --surface-veil:          rgba(28, 23, 18, 0.55);
    --panel-diag-from:       rgba(34, 29, 24, 0.78);
    --panel-diag-to:         rgba(26, 22, 18, 0.40);

    --accent-tint:           rgba(200, 99, 46, 0.22);
    --accent-dust:           rgba(200, 99, 46, 0.30);
    --accent-scribble:       rgba(216, 113, 56, 0.50);

    --cta-reflection-1:      rgba(255, 220, 178, 0.32);
    --cta-reflection-2:      rgba(255, 220, 178, 0.14);
    --cta-reflection-3:      rgba(255, 220, 178, 0);
    --cta-reflection-blend:  screen;

    --cta-glow-1:            0 0 10px -1px rgba(255, 175, 100, 0.85);
    --cta-glow-2:            0 0 34px -4px rgba(255, 205, 145, 0.70);
    --cta-glow-3:            0 0 70px -14px rgba(255, 230, 180, 0.55);
    --cta-glow-4:            0 0 130px -32px rgba(255, 245, 215, 0.40);

    --cta-text-emboss:       0 1px 0 rgba(0, 0, 0, 0.45);
  }
}

/* =========================================================================
   Reset + base
   ========================================================================= */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@view-transition {
  navigation: auto;
}

main {
  view-transition-name: page-main;
}

.wordmark {
  view-transition-name: site-wordmark;
}

.nav-cta {
  view-transition-name: header-cta;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
}

::view-transition-old(page-main) {
  animation: page-fade-out 180ms ease both;
}

::view-transition-new(page-main) {
  animation: page-fade-in 220ms ease both;
}

::view-transition-group(site-wordmark),
::view-transition-group(header-cta) {
  animation-duration: 180ms;
}

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

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

body {
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'kern' 1, 'liga' 1;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
em { font-style: italic; }
strong { font-weight: 500; }
ul { list-style: none; }
img, svg { display: block; max-width: 100%; }

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

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =========================================================================
   Skip link + focus
   ========================================================================= */

.skip-link {
  position: absolute;
  top: -200px;
  left: 16px;
  background: var(--color-ink);
  color: var(--color-surface);
  padding: 12px 16px;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 500;
  border-radius: 2px;
  z-index: 100;
}
.skip-link:focus { top: 16px; }

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

/* =========================================================================
   Header — minimal: wordmark + single CTA, no top nav
   ========================================================================= */

.site-header {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 32px var(--page-gutter) 48px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
}

.wordmark {
  font-family: var(--font-wordmark);
  font-size: clamp(2.25rem, 1.4vw + 1.75rem, 3rem);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  font-weight: 500;
  transition: color 150ms ease, font-weight 180ms ease, font-variation-settings 180ms ease;
  font-variation-settings: 'wght' 500;
}

.wordmark:hover,
.wordmark:focus-visible {
  color: var(--color-accent-deep);
  font-weight: 650;
  font-variation-settings: 'wght' 650;
}

.nav-cta {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--color-ink);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: color 150ms ease;
  white-space: nowrap;
}

.nav-cta span,
.footer-cta span {
  display: inline-block;
  transition: transform 150ms ease;
}

.nav-cta:hover,
.nav-cta:focus-visible { color: var(--color-accent); }

.nav-cta:hover span,
.nav-cta:focus-visible span,
.footer-cta:hover span,
.footer-cta:focus-visible span {
  transform: translateX(2px);
}

/* =========================================================================
   Main + section rhythm (variable pacing per move #8)
   ========================================================================= */

main {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--page-gutter);
}

section {
  position: relative;
}

/* Explicit, intentional rhythm. No "+ section { padding: 0 }" auto-collapse. */
.hero       { padding-top: 0;                    padding-bottom: var(--rhythm-default); }
.bullets    { padding-top: 0;                    padding-bottom: var(--rhythm-loose); }
.cesura     { padding-top: 0;                    padding-bottom: var(--rhythm-default); }
.closing    { padding-top: 0;                    padding-bottom: var(--rhythm-default); }

/* =========================================================================
   Hero — left text column + right shift-log artifact
   ========================================================================= */

.hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
  align-items: start;
}

@media (min-width: 1024px) {
  .hero {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
    gap: 88px;
  }
}

.hero-text { min-width: 0; }

.hero-headline {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-hero);
  line-height: 1.02;
  letter-spacing: -0.022em;
  color: var(--color-ink);
  text-wrap: balance;
  max-width: 14ch;
}

.hero-headline-mark {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

.hero-headline-mark::after {
  content: '';
  position: absolute;
  left: 0.03em;
  right: 0.02em;
  bottom: -0.08em;
  height: 0.075em;
  background: var(--color-accent);
  opacity: 0.82;
  clip-path: polygon(0 40%, 14% 18%, 38% 32%, 62% 14%, 82% 28%, 100% 24%, 99% 76%, 72% 64%, 44% 82%, 18% 70%, 4% 76%);
  transform: scaleX(0) rotate(-1.4deg);
  transform-origin: left center;
  animation: hero-mark-draw 720ms cubic-bezier(0.64, 0, 0.18, 1) 520ms forwards;
}

@keyframes hero-mark-draw {
  to { transform: scaleX(1) rotate(-1.4deg); }
}

/* === Hero + shift-log entrance choreography (one-shot, on first paint) === */

.hero-headline,
.hero-subhead,
.shift-log {
  animation: hero-rise 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero-headline { animation-delay: 80ms; }
.shift-log     { animation-delay: 280ms; }
.hero-subhead  { animation-delay: 440ms; }

/* CTA gets opacity-only entrance so the runtime tilt transform (perspective + rotateX/Y)
   isn't fought by an entrance translateY. Same delay as the rest of the choreography.
   Scoped to the HERO CTA only — the closing CTA must stay visible at rest so a user
   anchor-jumping or fast-scrolling to the closing section within ~1.3s of page load
   doesn't see an invisible button. (Bugbot finding on PR #60.) */
.hero .primary-cta {
  animation: cta-fade-in 620ms cubic-bezier(0.16, 1, 0.3, 1) 640ms both;
}

@keyframes hero-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

.shift-row {
  animation: shift-row-in 460ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.shift-log-section:nth-of-type(1) .shift-row:nth-of-type(1) { animation-delay: 620ms; }
.shift-log-section:nth-of-type(1) .shift-row:nth-of-type(2) { animation-delay: 720ms; }
.shift-log-section:nth-of-type(1) .shift-row:nth-of-type(3) { animation-delay: 820ms; }
.shift-log-section:nth-of-type(2) .shift-row:nth-of-type(1) { animation-delay: 940ms; }
.shift-log-section:nth-of-type(2) .shift-row:nth-of-type(2) { animation-delay: 1040ms; }

@keyframes shift-row-in {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* === Signature: the brand's most distinctive asset, treated as such === */

/* === Signature: captured-pen-replay ===
   A real human-signed "— Clawdia" captured as a pointer-event stream
   (timestamps + Apple Pencil pressure) and replayed live by signature-replay.js
   into a <canvas>. perfect-freehand turns the points into a variable-width ink
   polygon. Real motion → real perceptual handwriting cues for free. */

.signature {
  display: inline-block;
  color: var(--color-accent);
  line-height: 0;          /* the canvas is the only content — no baseline gap */
  overflow: visible;
}

.signature-closing {
  margin-top: clamp(28px, 2.6vw, 44px);
  margin-left: clamp(2rem, 6vw, 5rem);
  transform: rotate(-7deg);
  transform-origin: left center;
}

/* The canvas carries role="img" + aria-label, so this redundant offscreen
   screen-reader <span> is hidden: its absolute position (inside the rotated
   .signature-closing) was extending the page ~600px of empty space below the footer. */
#signature-closing span { display: none; }

/* Visible canvas inside each signature mount. The JS sets explicit width/height
   in CSS pixels — we just make sure it lays out cleanly. */
.handwriting-canvas {
  display: block;
}

.hero-subhead {
  margin-top: 40px;
  font-family: var(--font-body);
  font-size: var(--fs-body-lead);
  line-height: 1.55;
  color: var(--color-ink-soft);
  max-width: 36rem;
}

.cycle-item {
  display: inline-block;
  color: var(--color-ink);
  font-weight: 500;
  white-space: nowrap;
}

/* =========================================================================
   Primary CTA — Apple-TV tilt button
   Cursor-driven 3D rotation, matte single-band reflection, real luminance-lifting
   glow. Text + arrow ride the tilting surface via .cta-inner translateZ. Two-phase
   motion: ~320ms dampened engage, instant 1:1 track, 620ms dampened release.
   See site.js for the rAF-coalesced mousemove handler. Touch + reduced-motion
   fall back to quiet darken-on-hover via the media query at the bottom.
   ========================================================================= */
.primary-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-top: 36px;
  padding: 14px 26px;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: 2px;
  border: 0;
  /* tilt + reflection state — site.js updates these on mousemove */
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --env-tx: 0px;
  --env-ty: 0px;
  transform-style: preserve-3d;
  transform: perspective(500px)
             rotateX(var(--tilt-x))
             rotateY(var(--tilt-y));
  /* Rest: a quiet floor shadow that grounds the button. Glow only appears on hover
     (see .is-tilting rule below). */
  box-shadow: var(--elevation-rest);
  /* Snap-back transition (mouseleave). Pure ease-out quart — no overshoot, dampened
     settle. During active tracking the .is-tilting override kills these so the tilt
     follows the cursor without a perpetually-incomplete interpolation. */
  transition:
    transform 620ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 620ms cubic-bezier(0.22, 1, 0.36, 1),
    background 220ms ease;
  /* overflow: clip (not hidden) — clip doesn't create a grouping context that forces
     children's transform-style to flat, so .cta-inner translateZ(8px) keeps its real
     Z-displacement on the tilting surface. (Bugbot PR #60: per CSS Transforms L2,
     `overflow: hidden` flattens 3D children — clip doesn't.)
     `isolation: isolate` is NOT needed for the ::before stacking — the `transform`
     property above already creates a stacking context. Keeping isolation would be a
     second grouping trigger that re-flattens the children. (Bugbot PR #65.) */
  overflow: clip;
  cursor: pointer;
  will-change: transform, box-shadow;
}

/* Matte single-band reflection — an oversized layer panned by GPU translate3d.
   Soft-light blend so the reflection sits IN the surface rather than ON it
   (no glossy lacquered look). The gradient is rendered ONCE into a compositor
   layer; mousemove only updates --env-tx / --env-ty. No per-frame repaint. */
.primary-cta::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background:
    radial-gradient(
      ellipse 44% 30% at 50% 30%,
      var(--cta-reflection-1) 0%,
      var(--cta-reflection-2) 48%,
      var(--cta-reflection-3) 82%
    );
  background-repeat: no-repeat;
  transform: translate3d(var(--env-tx), var(--env-ty), 0);
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: var(--cta-reflection-blend);
  transition: opacity 320ms ease;
  z-index: 0;
  will-change: transform;
}

.primary-cta.is-tilting {
  /* Active tracking: kill the transform transition so the tilt follows the cursor
     1:1 every mousemove tick. Box-shadow transitions on the base rule (620ms quart)
     so the glow fades in/out without chasing the cursor. */
  transition:
    box-shadow 620ms cubic-bezier(0.22, 1, 0.36, 1),
    background 220ms ease;
  /* REAL glow — outer layers use colors brighter than the substrate so they
     genuinely LIFT luminance around the button (rather than tinting it darker,
     which reads as shadow). The tight inner amber kiss carries the warm color
     identity. Each layer is its own token so the dark override can shift the
     warm-amber identity hotter without redefining the stack. */
  box-shadow:
    var(--cta-glow-1),
    var(--cta-glow-2),
    var(--cta-glow-3),
    var(--cta-glow-4),
    var(--elevation-cta-floor);
}

.primary-cta.is-tilting.is-entering {
  /* First ~320ms after mouseenter: smooth the initial tilt with the same dampened
     quart ease-out used for the snap-back, so engaging the button feels as soft as
     leaving it. site.js drops .is-entering after the entry settles, at which point
     tracking returns to instant 1:1 follow. */
  transition:
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 320ms cubic-bezier(0.22, 1, 0.36, 1),
    background 220ms ease;
}

.primary-cta.is-tilting.is-entering::before {
  transition:
    opacity 320ms ease,
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.primary-cta.is-tilting::before { opacity: 1; }

/* Inner layer carries text + arrow as one solid object on the tilting surface.
   translateZ(8px) lifts them slightly above the button face so they read as
   embossed / sitting ON the surface — and they tilt as one with the parent. */
.cta-inner {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transform: translateZ(8px);
  text-shadow: var(--cta-text-emboss);
}

.cta-arrow {
  display: inline-block;
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

.primary-cta:hover .cta-arrow,
.primary-cta:focus-visible .cta-arrow { transform: translateX(3px); }

.primary-cta:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
}

/* Touch + reduced-motion fallback — no tilt, no glow chrome; quiet darken on hover. */
@media (prefers-reduced-motion: reduce), (hover: none) {
  .primary-cta {
    transform: none !important;
    transition: background 220ms ease, box-shadow 220ms ease;
  }
  .primary-cta::before { display: none; }
  .cta-inner { transform: none; text-shadow: none; }
  .primary-cta:hover { background: var(--color-accent-deep); }
}

/* =========================================================================
   Shift-log — premium operator artifact
   ========================================================================= */

.shift-log {
  position: relative;
  padding: clamp(22px, 3vw, 30px);
  font-feature-settings: 'tnum' 1, 'kern' 1;
  border: 1px solid var(--hairline-strong);
  border-left: 2px solid var(--color-ink);
  background:
    linear-gradient(135deg, var(--accent-tint), transparent 42%),
    linear-gradient(180deg, var(--panel-diag-from), var(--panel-diag-to));
  box-shadow:
    var(--elevation-card),
    var(--highlight-inset);
  overflow: hidden;
}

.shift-log::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--color-accent), var(--accent-dust), transparent);
}

@media (min-width: 1024px) {
  .shift-log {
    margin-top: 16px;
  }
}

.shift-log-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  margin-bottom: 24px;
  border-bottom: var(--hairline);
}

.shift-log-title {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  font-weight: 500;
}

.shift-log-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--color-ink);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}

.caret {
  display: inline-block;
  width: 6px;
  height: 13px;
  background: var(--color-accent);
  opacity: 0.42;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

.shift-log-section + .shift-log-section {
  margin-top: 26px;
  padding-top: 22px;
  border-top: var(--hairline);
}

.shift-log-section-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  font-weight: 500;
  margin-bottom: 12px;
}

.shift-log-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
}

.shift-row {
  position: relative;
  padding: 2px 0 2px 18px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--color-ink);
}

.shift-row::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.66em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  opacity: 0.78;
}

.handle {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-weight: 500;
  text-decoration: underline dotted;
  text-decoration-color: var(--color-ink-muted);
  text-underline-offset: 3px;
  color: var(--color-ink);
  transition: color 150ms ease, text-decoration-color 150ms ease;
}

.handle:hover {
  color: var(--color-accent-deep);
  text-decoration-color: var(--color-accent);
}

/* =========================================================================
   Bullets — vertical single-column with right-rail visuals (>=900px)
   Stacks visual-below-text on narrow. Caveat numerals are the character moment.
   ========================================================================= */

.bullets-grid {
  display: flex;
  flex-direction: column;
  gap: clamp(96px, 12vw, 150px);
  max-width: 60rem;
  margin: 0 auto;
}

.bullet {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: clamp(36px, 4vw, 64px);
  row-gap: 32px;
  align-items: start;
}

@media (min-width: 900px) {
  .bullet {
    grid-template-columns: minmax(0, 60fr) minmax(0, 38fr);
    row-gap: 0;
  }
}

.bullet-text {
  display: grid;
  grid-template-columns: clamp(3.25rem, 5vw, 4.5rem) minmax(0, 1fr);
  column-gap: clamp(16px, 2vw, 28px);
  align-items: start;
}

.bullet-numeral {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: block;
  font-family: var(--font-wordmark);
  font-size: clamp(2.5rem, 2vw + 1.5rem, 3rem);
  font-weight: 500;
  color: var(--color-accent);
  line-height: 0.9;
  letter-spacing: 0.02em;
  transform: rotate(-4deg);
  transform-origin: left center;
  margin-top: 0.05em;
}

.bullet-headline {
  grid-column: 2;
  grid-row: 1;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-bullet);
  line-height: 1.12;
  letter-spacing: -0.012em;
  color: var(--color-ink);
  margin-bottom: 14px;
  text-wrap: balance;
}

.bullet-body {
  grid-column: 2;
  grid-row: 2;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--color-ink);
}

.bullet-visual {
  width: 100%;
  max-width: 340px;
  justify-self: start;
}

@media (min-width: 900px) {
  .bullet-visual { justify-self: end; margin-top: 6px; }
}

/* === Visual 1: Slack-style thread (institutional knowledge) === */
.v-thread {
  border: 1px solid var(--hairline-soft);
  background: var(--color-surface);
  box-shadow:
    var(--highlight-card-inset),
    var(--elevation-bullet);
  padding: 18px 18px 20px;
}

.v-thread-channel {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: var(--hairline);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-ink-soft);
  letter-spacing: 0.04em;
}
.v-thread-channel::before {
  content: '#';
  color: var(--color-ink-muted);
  font-weight: 500;
}

.v-msg {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.v-msg:last-child { margin-bottom: 0; }

.v-avatar {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--color-surface);
  background: var(--color-ink);
}

.v-msg.from-clawdia .v-avatar {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.v-msg-body { min-width: 0; }

.v-msg-meta {
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--color-ink-soft);
  margin-bottom: 2px;
}
.v-msg-meta b { color: var(--color-ink); font-weight: 500; }
.v-msg-meta time {
  color: var(--color-ink-muted);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  margin-left: 6px;
}

.v-msg-text {
  font-family: var(--font-body);
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--color-ink);
}

/* === Visual 2: channel rail (channel-native) === */
.v-rails {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 6px 0;
}

.v-rail {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 10px;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--hairline-soft);
  background: var(--surface-veil);
}

.v-rail-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 4px;
  background: var(--color-surface-panel);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-ink);
  border: 1px solid var(--hairline-faint);
}

.v-rail-label {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--color-ink);
  font-weight: 500;
}

.v-rail-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  opacity: 0.78;
}

/* === Visual 3: revenue ledger (CFO ROI) === */
.v-ledger {
  border: 1px solid var(--hairline-soft);
  background: var(--color-surface);
  padding: 18px 20px 16px;
  box-shadow: var(--elevation-ledger);
}

.v-ledger-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: var(--hairline);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

.v-ledger-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px solid var(--hairline-hair);
}
.v-ledger-row:last-child { border-bottom: 0; }

.v-ledger-row.is-strict {
  position: relative;
  border-bottom: 2px solid var(--color-accent);
}

.v-ledger-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.v-ledger-row.is-strict .v-ledger-label {
  color: var(--color-ink);
  font-weight: 500;
}

.v-ledger-amount {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--color-ink);
}

/* === Visual 4: pricing line (no middleman) === */
.v-pricing {
  border: 1px solid var(--hairline-soft);
  background: var(--color-surface-panel);
  padding: 20px 22px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--color-ink);
  letter-spacing: 0.01em;
}

.v-pricing b {
  color: var(--color-accent);
  font-weight: 500;
  margin: 0 4px;
}

.v-pricing small {
  display: block;
  margin-top: 6px;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

/* === CFO margin-note (Caveat, scroll-drawn underline) ===
   .cfo-note lives inside .bullet-text (a 2-col grid: narrow numeral rail + main text
   area). Without explicit placement the auto-flow would put this in col 1 row 3 — the
   ~3.25rem numeral column — and the "even the scary one." text would overflow that
   narrow cell. Pin it to col 2 row 3, under the body copy. (Bugbot PR #60.) */
.margin-note {
  width: max-content;
  max-width: min(14rem, 100%);
  font-family: var(--font-wordmark);
  font-size: clamp(1.35rem, 1vw + 1rem, 1.8rem);
  line-height: 1;
  color: var(--color-accent);
  transform: rotate(-5deg);
  transform-origin: left center;
  opacity: 0;
  transition: opacity 260ms ease, transform 360ms ease;
  margin-top: 16px;
}

.bullet-text .cfo-note {
  grid-column: 2;
  grid-row: 3;
}

.margin-note span { display: block; }

.margin-note svg {
  width: 100%;
  height: 28px;
  margin-top: -4px;
  overflow: visible;
}

.margin-note path {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 190;
  stroke-dashoffset: 190;
  transition: stroke-dashoffset 620ms cubic-bezier(0.64, 0, 0.18, 1);
}

.margin-note.is-visible {
  opacity: 1;
  transform: rotate(-5deg) translateY(-4px);
}

.margin-note.is-visible path { stroke-dashoffset: 0; }

@media (max-width: 640px) {
  /* Single-column at narrow: reset BOTH grid-row AND grid-column on every child.
     The desktop rule pins numeral to col 1 / row 1-2 and headline + body to col 2
     (rows 1 and 2). Without resetting grid-column here the headline + body stayed
     stuck in an implicit second column, breaking the mobile layout. (Bugbot PR #60.) */
  .bullet-text {
    grid-template-columns: 1fr;
    row-gap: 6px;
  }
  .bullet-numeral  { grid-column: 1; grid-row: 1; }
  .bullet-headline { grid-column: 1; grid-row: 2; }
  .bullet-body     { grid-column: 1; grid-row: 3; }
  /* The desktop rule pins .cfo-note to grid-column: 2; at mobile the grid collapses
     to a single column so the note has to be reset to col 1 row 4 (under body).
     (Bugbot PR #60 round 3.) */
  .bullet-text .cfo-note { grid-column: 1; grid-row: 4; }
}

/* =========================================================================
   Editorial cesura — one italic line in a sea of whitespace
   ========================================================================= */

.cesura {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.cesura-line {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.75rem, 2vw + 1rem, 2.5rem);
  line-height: 1.2;
  color: var(--color-ink);
  display: inline;
  transition: color 160ms ease;
  letter-spacing: -0.005em;
}

.cesura-line:hover,
.cesura-line:focus-visible {
  color: var(--color-accent-deep);
}

.cesura-text {
  position: relative;
  padding-bottom: 8px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.cesura-text::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 620ms cubic-bezier(0.64, 0, 0.18, 1);
}

.cesura.is-visible .cesura-text::after {
  transform: scaleX(1);
}

.vs-slash {
  color: var(--color-accent);
  font-weight: 400;
  font-style: normal;
}

.cesura-arrow {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.7em;
  color: var(--color-accent);
  margin-left: 8px;
  vertical-align: 0.06em;
}

/* =========================================================================
   Closing — valediction with the LARGER signature
   ========================================================================= */

.closing {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 36rem;
}

.closing-headline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.25rem, 3vw + 1rem, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--color-ink);
  max-width: 16ch;
  text-wrap: balance;
}

.primary-cta-closing {
  margin-top: 56px;
}

/* =========================================================================
   Footer
   ========================================================================= */

.site-footer {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: clamp(64px, 7vw, 96px) var(--page-gutter) clamp(40px, 4vw, 56px);
  border-top: var(--hairline);
}

.footer-epigraph {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-body-lead);
  line-height: 1.5;
  color: var(--color-ink-soft);
  max-width: 36rem;
  margin-bottom: clamp(40px, 5vw, 72px);
}

.footer-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.footer-wordmark {
  font-family: var(--font-wordmark);
  font-size: 2rem;
  line-height: 1;
  color: var(--color-ink);
  flex-shrink: 0;
}

.footer-nav {
  display: flex;
  gap: clamp(20px, 2.5vw, 36px);
  flex: 1;
  justify-content: center;
}

.footer-nav a {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--color-ink-soft);
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color 150ms ease, border-color 150ms ease;
}

.footer-nav a:hover,
.footer-nav a:focus-visible {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

.footer-cta {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--color-ink);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: color 150ms ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.footer-cta:hover,
.footer-cta:focus-visible { color: var(--color-accent); }

.footer-year {
  margin-top: clamp(32px, 4vw, 56px);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.12em;
  color: var(--color-ink-muted);
  text-transform: uppercase;
}

/* =========================================================================
   Sub-page support — used by vs.html / who.html / faq.html / demo.html
   ========================================================================= */

.subpage main {
  padding-top: 24px;
  padding-bottom: var(--rhythm-default);
}

.crumb {
  font-family: var(--font-body);
  font-size: var(--fs-meta);
  color: var(--color-ink-soft);
  margin-bottom: clamp(40px, 5vw, 64px);
  display: inline-block;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color 150ms ease, border-color 150ms ease;
}
.crumb:hover,
.crumb:focus-visible {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

.page-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-display);
  line-height: 1.05;
  letter-spacing: -0.018em;
  color: var(--color-ink);
  margin-bottom: clamp(20px, 2vw, 28px);
  max-width: 22ch;
  text-wrap: balance;
}

.page-lede {
  font-family: var(--font-body);
  font-size: var(--fs-body-lead);
  line-height: 1.55;
  color: var(--color-ink-soft);
  max-width: 44rem;
  margin-bottom: clamp(56px, 7vw, 88px);
}

.prose {
  max-width: 44rem;
}

.prose p {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--color-ink);
}

.prose p + p { margin-top: 1.25em; }

.prose h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-section);
  line-height: 1.15;
  letter-spacing: -0.012em;
  color: var(--color-ink);
  margin-top: clamp(48px, 5vw, 72px);
  margin-bottom: 16px;
  text-wrap: balance;
}

.prose h2:first-child { margin-top: 0; }

.prose h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  font-size: var(--fs-body-lead);
  line-height: 1.3;
  color: var(--color-ink);
  margin-top: clamp(32px, 4vw, 48px);
  margin-bottom: 10px;
}

.prose strong {
  font-weight: 500;
  color: var(--color-ink);
  background-image: linear-gradient(transparent 62%, var(--accent-scribble) 62%, var(--accent-scribble) 92%, transparent 92%);
  padding: 0 2px;
}

.prose em { font-style: italic; }

.prose .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--color-surface-subtle);
  padding: 1px 7px;
  border-radius: 3px;
}

.prose ul.bare {
  list-style: none;
  padding-left: 0;
}

.prose ul.bare li {
  font-size: var(--fs-body);
  line-height: 1.7;
  padding-left: 22px;
  position: relative;
  margin-top: 10px;
}

.prose ul.bare li:first-child { margin-top: 0; }

.prose ul.bare li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 10px;
  height: 1.5px;
  background: var(--color-accent);
  border-radius: 1px;
}

/* Card on a sub-page — for demo placeholders etc. */
.card {
  border-left: var(--rule);
  padding-left: 28px;
  margin-top: 32px;
}

.card-tag {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 10px;
}

.card-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-section);
  line-height: 1.12;
  color: var(--color-ink);
  margin-bottom: 16px;
}

.card-caption {
  margin-top: 20px;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--color-ink-soft);
  font-style: italic;
  letter-spacing: 0.02em;
}

/* =========================================================================
   Reduced motion + print
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  .caret { animation: none; opacity: 1; }
  .handwriting-canvas {
    /* Reduced-motion users see the final-state text without the brush sweep —
       the JS will still render the text canvas as a snapshot once mounted.
       We force it visible immediately by overriding the mount's opacity. */
    opacity: 1;
  }
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;        /* without this, animation-fill-mode: both
                                              leaves elements invisible during their
                                              delay window before snapping in — itself
                                              a form of motion the user opted out of.
                                              (Bugbot PR #60.) */
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}

@media print {
  .site-header .nav-cta,
  .primary-cta,
  .footer-cta { display: none; }
  .shift-log { border-left: 1px solid #000; }
  body { background: #fff; color: #000; }
  .caret { display: none; }
  .signature, .bullet-numeral { color: #000; transform: none; }
}

/* =========================================================================
   Mobile tweaks
   ========================================================================= */

@media (max-width: 640px) {
  .site-header { padding-top: 24px; padding-bottom: 24px; }
  .signature-closing { font-size: 2.75rem; margin-left: 0; }
  .closing { max-width: 100%; }
  .footer-nav { flex: 1 0 100%; justify-content: flex-start; gap: 24px; order: 3; }
  .footer-row { gap: 20px; }
  .shift-log { padding-left: 24px; }
}