/* Generated by site/concepts/tools/mksite.py — edit concepts/base.css and concepts/e.css. */

@font-face { font-family: "Open Runde"; src: url("fonts/OpenRunde-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Open Runde"; src: url("fonts/OpenRunde-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Open Runde"; src: url("fonts/OpenRunde-Semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Lora"; src: url("fonts/Lora-roman-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Lora"; src: url("fonts/Lora-italic-latin.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/JetBrainsMono-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Freeman"; src: url("fonts/Freeman-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

/* Agent marks. Cursor's and Codex's are near-black, so each sits on the
   same faint neutral disc rather than a white badge — the app's own
   invisible-mask trick, which survives either ground. */
.mark { background-repeat: no-repeat; background-position: center; }
.mark-claude { background-image: url("logos/claude.png"); }
.mark-cursor { background-image: url("logos/cursor.png"); }
.mark-codex { background-image: url("logos/codex.png"); }

/* ═══════════════════════════════════════════════════════════════════════════
   Shared ground for the three landing-page concepts.

   Tokens start from the app's own (DESIGN-SYSTEM.md) and warm the *ground*
   only — this page is the edge layer, where the brand spec says colour and
   warmth are allowed. The editor surfaces drawn inside the page keep the
   app's real cool neutrals so a screenshot never disagrees with the product.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Ground — mostly pure white (owner, 2026-08-02). `--paper-deep` is the
     app's own grey (`--page` / GraphaDesign canvas) and is the CONTRAST
     ground: the few sections that need to separate, and nothing else. */
  --paper:        #FFFFFF;
  --paper-deep:   #F7F8FA;
  --surface:      #FFFFFF;
  --surface-sunk: #F7F8FA;

  /* The app's real editor neutrals — cool, unchanged, for product surfaces. */
  --app-canvas:   #F7F8FA;
  --app-surface:  #FFFFFF;
  --app-hairline: #E4E7EC;

  /* The primary button inverts with the ground: dark pill on light, light
     pill on dark. Declared as tokens so one `.cta` serves both themes. */
  --cta-top:  #2B2D33;
  --cta-bot:  #16171A;
  --cta-fg:   #FFFFFF;
  --cta-ts:   0 1px 1px rgba(0, 0, 0, 0.18);
  --cta-edge: rgba(255, 255, 255, 0.10);

  /* Atmosphere. Light pages get almost none of it; dark pages get all of it. */
  --grain:     0;
  /* Pure white means pure white (owner, 2026-08-02): no wash under the hero or
     the closing block, and no halo behind the primary button. Dark keeps all
     three — on a near-black ground the glow is what stops the page reading as
     one flat rectangle. */
  --glow-a:    transparent;
  --glow-b:    transparent;
  --halo-base: transparent;

  --ink:      #16171A;
  --ink-2:    #5A5F67;
  --ink-3:    #8B9098;
  --hairline: rgba(22, 23, 26, 0.065);
  --hairline-2: rgba(22, 23, 26, 0.13);

  --accent:      #006BFF;
  --accent-tint: #E3EEFF;
  --accent-ink:  #0057D1;

  /* Spark palette — the brand's content hues. Used one per section, never two
     in the same frame. */
  --sp-blue:   #0086FC;
  --sp-sky:    #57BEF7;
  --sp-violet: #7A5CFF;
  --sp-green:  #17B877;
  --sp-sun:    #FFB024;
  --sp-coral:  #F26B45;
  --sp-pink:   #F368AC;

  --tint-violet: #ECE7FF;
  --tint-green:  #DBF6EA;
  --tint-sun:    #FFF1D2;
  --tint-coral:  #FDE6DD;

  --font-ui:    "Open Runde", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-prose: "Lora", Georgia, serif;
  --font-mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  /* The page's display voice — the demo's chapter row, and nothing else. The
     hero was set in this and reverted to Open Runde (owner, 2026-08-03).
     Freeman ships ONE weight (400): anything set in it must ask for 400, or
     the browser synthesises a bold and smears the drawing. */
  --font-display: "Freeman", "Open Runde", -apple-system, sans-serif;

  /* One scale, used everywhere. */
  --t-11: 11px; --t-13: 13px; --t-15: 15px; --t-17: 17px;
  --t-21: 21px; --t-27: 27px; --t-34: 34px; --t-44: 44px; --t-60: 60px;

  --r-chip: 8px; --r-control: 12px; --r-card: 16px; --r-big: 24px; --r-pill: 999px;

  --page: 1080px;
  --column: 680px;

  /* Single light source, top-down, neutral-not-black (visual-shadow-direction,
     visual-no-pure-black-shadow, visual-layered-shadows). */
  --lift-1: 0 1px 2px rgba(22, 23, 26, 0.05),
            0 2px 6px rgba(22, 23, 26, 0.04);
  --lift-2: 0 1px 2px rgba(22, 23, 26, 0.06),
            0 4px 10px rgba(22, 23, 26, 0.05),
            0 12px 28px rgba(22, 23, 26, 0.04);
  --lift-3: 0 2px 4px rgba(22, 23, 26, 0.07),
            0 10px 24px rgba(22, 23, 26, 0.07),
            0 32px 64px rgba(22, 23, 26, 0.07);

  --t-press: 140ms;
  --t-state: 220ms;
  --t-move:  340ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:  cubic-bezier(0.64, 0, 0.78, 0);
  --ease-soft: cubic-bezier(0.2, 0.85, 0.25, 1);
}

@media (prefers-color-scheme: dark) { :root { color-scheme: dark; } }
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }

/* Token-level dark. Components never style inside a media query. */
@media (prefers-color-scheme: dark) {
  :root {
    /* Night is nearly black (owner, 2026-08-02: "I also like the blackness of
       dark mode, of option D"). These are D's grounds — the page darker than
       the cards it holds, so elevation still reads without a single hairline
       getting brighter. */
    --paper:        #0B0C0E;
    --paper-deep:   #08090A;
    --surface:      #17181C;
    --surface-sunk: #101115;

    --app-canvas:   #101114;
    --app-surface:  #1A1B1F;
    --app-hairline: #26272C;

    --cta-top:  #FFFFFF;
    --cta-bot:  #E6E7EA;
    --cta-fg:   #0E0F12;
    --cta-ts:   none;
    --cta-edge: rgba(255, 255, 255, 0.90);

    --grain:     0.5;
    --glow-a:    rgba(76, 147, 255, 0.46);
    --glow-b:    rgba(122, 92, 255, 0.20);
    --halo-base: rgba(76, 147, 255, 0.30);

    --ink:      #F2F3F5;
    --ink-2:    #A8ADB5;
    --ink-3:    #767B83;
    --hairline: rgba(255, 250, 245, 0.10);
    --hairline-2: rgba(255, 250, 245, 0.18);

    --accent:      #3A8BFF;
    --accent-tint: #16243D;
    --accent-ink:  #77AEFF;

    --tint-violet: #221D3B;
    --tint-green:  #0E2A21;
    --tint-sun:    #2E2413;
    --tint-coral:  #301B15;

    --lift-1: inset 0 1px 0 0 rgba(255, 250, 245, 0.05),
              0 1px 2px rgba(0, 0, 0, 0.40);
    --lift-2: inset 0 1px 0 0 rgba(255, 250, 245, 0.06),
              0 2px 4px rgba(0, 0, 0, 0.44),
              0 12px 32px rgba(0, 0, 0, 0.32);
    --lift-3: inset 0 1px 0 0 rgba(255, 250, 245, 0.07),
              0 4px 8px rgba(0, 0, 0, 0.48),
              0 32px 64px rgba(0, 0, 0, 0.42);
  }
}

:root[data-theme="dark"] {
  --paper:        #0B0C0E;
  --paper-deep:   #08090A;
  --surface:      #17181C;
  --surface-sunk: #101115;
  --cta-top:  #FFFFFF;
  --cta-bot:  #E6E7EA;
  --cta-fg:   #0E0F12;
  --cta-ts:   none;
  --cta-edge: rgba(255, 255, 255, 0.90);
  --grain:     0.5;
  --glow-a:    rgba(76, 147, 255, 0.46);
  --glow-b:    rgba(122, 92, 255, 0.20);
  --halo-base: rgba(76, 147, 255, 0.30);
  --app-canvas:   #101114;
  --app-surface:  #1A1B1F;
  --app-hairline: #26272C;
  --ink:      #F2F3F5;
  --ink-2:    #A8ADB5;
  --ink-3:    #767B83;
  --hairline: rgba(255, 250, 245, 0.10);
  --hairline-2: rgba(255, 250, 245, 0.18);
  --accent:      #3A8BFF;
  --accent-tint: #16243D;
  --accent-ink:  #77AEFF;
  --tint-violet: #221D3B;
  --tint-green:  #0E2A21;
  --tint-sun:    #2E2413;
  --tint-coral:  #301B15;
  --lift-1: inset 0 1px 0 0 rgba(255, 250, 245, 0.05),
            0 1px 2px rgba(0, 0, 0, 0.40);
  --lift-2: inset 0 1px 0 0 rgba(255, 250, 245, 0.06),
            0 2px 4px rgba(0, 0, 0, 0.44),
            0 12px 32px rgba(0, 0, 0, 0.32);
  --lift-3: inset 0 1px 0 0 rgba(255, 250, 245, 0.07),
            0 4px 8px rgba(0, 0, 0, 0.48),
            0 32px 64px rgba(0, 0, 0, 0.42);
}

:root[data-theme="light"] {
  --paper:        #FFFFFF;
  --paper-deep:   #F7F8FA;
  --surface:      #FFFFFF;
  --surface-sunk: #F7F8FA;
  --cta-top:  #2B2D33;
  --cta-bot:  #16171A;
  --cta-fg:   #FFFFFF;
  --cta-ts:   0 1px 1px rgba(0, 0, 0, 0.18);
  --cta-edge: rgba(255, 255, 255, 0.10);
  --grain:     0;
  /* Pure white means pure white (owner, 2026-08-02): no wash under the hero or
     the closing block, and no halo behind the primary button. Dark keeps all
     three — on a near-black ground the glow is what stops the page reading as
     one flat rectangle. */
  --glow-a:    transparent;
  --glow-b:    transparent;
  --halo-base: transparent;
  --app-canvas:   #F7F8FA;
  --app-surface:  #FFFFFF;
  --app-hairline: #E4E7EC;
  --ink:      #16171A;
  --ink-2:    #5A5F67;
  --ink-3:    #8B9098;
  --hairline: rgba(22, 23, 26, 0.065);
  --hairline-2: rgba(22, 23, 26, 0.13);
  --accent:      #006BFF;
  --accent-tint: #E3EEFF;
  --accent-ink:  #0057D1;
  --tint-violet: #ECE7FF;
  --tint-green:  #DBF6EA;
  --tint-sun:    #FFF1D2;
  --tint-coral:  #FDE6DD;
  --lift-1: 0 1px 2px rgba(22, 23, 26, 0.05), 0 2px 6px rgba(22, 23, 26, 0.04);
  --lift-2: 0 1px 2px rgba(22, 23, 26, 0.06), 0 4px 10px rgba(22, 23, 26, 0.05),
            0 12px 28px rgba(22, 23, 26, 0.04);
  --lift-3: 0 2px 4px rgba(22, 23, 26, 0.07), 0 10px 24px rgba(22, 23, 26, 0.07),
            0 32px 64px rgba(22, 23, 26, 0.07);
}

/* ── Reset ─────────────────────────────────────────────────────────────── */

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--t-17);
  line-height: 1.55;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }

::selection { background: rgba(0, 107, 255, 0.16); }

:where(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;              /* Bold caps at 600, never 700. */
  letter-spacing: -0.028em;
  line-height: 1.06;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }

.u-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.u-num  { font-variant-numeric: tabular-nums; }

/* ── Small shared pieces every concept uses ────────────────────────────── */

.wrap { width: 100%; max-width: var(--page); margin: 0 auto; padding: 0 32px; }

/* Primary button — full shadow anatomy, one light source, subtle gradient. */
.cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--r-pill);
  background: linear-gradient(to bottom, var(--cta-top), var(--cta-bot));
  color: var(--cta-fg);
  font-size: var(--t-15);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.28),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 0 1px 0 var(--cta-edge),
    0 1px 2px rgba(22, 23, 26, 0.14),
    0 2px 5px rgba(22, 23, 26, 0.09),
    0 6px 14px rgba(22, 23, 26, 0.06);
  text-shadow: var(--cta-ts);
  transition: transform var(--t-press) var(--ease-out),
              box-shadow var(--t-press) var(--ease-out);
}
.cta:hover {
  box-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.30),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 1px 0 var(--cta-edge),
    0 2px 4px rgba(22, 23, 26, 0.16),
    0 6px 12px rgba(22, 23, 26, 0.10),
    0 14px 28px rgba(22, 23, 26, 0.08);
}
.cta:active { transform: scale(0.985); }
.cta .os { opacity: 0.62; }

.cta-quiet {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 20px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--hairline);
  box-shadow: var(--lift-1);
  color: var(--ink);
  font-size: var(--t-15);
  font-weight: 500;
  text-decoration: none;
  transition: box-shadow var(--t-press) var(--ease-out),
              border-color var(--t-press) var(--ease-out),
              transform var(--t-press) var(--ease-out);
}
.cta-quiet:hover { box-shadow: var(--lift-2); border-color: var(--hairline-2); }
.cta-quiet:active { transform: scale(0.985); }

/* Eyebrow — uppercase needs tracking (type-letter-spacing-uppercase). */
.eyebrow {
  font-size: var(--t-11);
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

/* A label as the app draws it: uppercase, unique, one of seven hues. */
.label-pill {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: var(--r-chip);
  font-size: var(--t-11);
  font-weight: 600;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.lp-violet { background: var(--tint-violet); color: var(--sp-violet); }
.lp-green  { background: var(--tint-green);  color: var(--sp-green); }
.lp-sun    { background: var(--tint-sun);    color: #B4700A; }
.lp-coral  { background: var(--tint-coral);  color: var(--sp-coral); }
.lp-blue   { background: var(--accent-tint); color: var(--accent-ink); }

/* A metric chip as the editor draws it: prose ink, one dotted blue rule. */
.chip-metric {
  border-bottom: 1px dotted rgba(0, 107, 255, 0.55);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  cursor: default;
}

/* Agent marks. */
.avatar {
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0;
  flex: 0 0 auto;
}
.av-claude { background: #D97757; color: #fff; }
.av-codex  { background: #0B0B0B; color: #fff; }
.av-cursor { background: #E5E5E5; color: #111; }

/* Frames that hold a drawn product surface. Concentric radius: the inner
   window is (outer − padding). */
.frame {
  --pad: 12px;
  padding: var(--pad);
  border-radius: calc(var(--r-card) + var(--pad));
  background: var(--surface-sunk);
  border: 1px solid var(--hairline);
}
.frame > * { border-radius: var(--r-card); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

@media (max-width: 860px) {
  :root { --t-60: 40px; --t-44: 32px; --t-34: 27px; }
  .wrap { padding: 0 20px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   Drawn product surfaces — shared by all three concepts.

   These are HTML/CSS reconstructions of the real app, not screenshots, so the
   page stays a single self-contained file with no image payload. Every value
   that has a counterpart in the app (canvas, hairline, reading column, Lora at
   17/1.65, the 9 % blue selection, the label pill, the dotted metric rule) is
   the app's value.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── The window ────────────────────────────────────────────────────────── */

.win {
  position: relative;
  overflow: hidden;
  background: var(--app-canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-big);
  box-shadow: var(--lift-3);
}
.win-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 38px;
  padding: 0 14px;
}
.lights { display: flex; gap: 7px; }
.lights i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.lights i:nth-child(1) { background: #FF5F57; }
.lights i:nth-child(2) { background: #FEBC2E; }
.lights i:nth-child(3) { background: #28C840; }
.win-title {
  font-size: var(--t-11);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.win-body { padding: 0 8px 8px; }

/* The white writing card that floats inside the window on its 8px grey frame. */
.doc {
  background: var(--app-surface);
  border-radius: 15px;
  box-shadow: var(--lift-1);
  overflow: hidden;
}

/* ── The prose ─────────────────────────────────────────────────────────── */

.prose {
  max-width: var(--column);
  margin: 0 auto;
  padding: 34px 40px 40px;
  font-family: var(--font-prose);
  font-size: var(--t-17);
  line-height: 1.65;
  color: var(--ink);
  letter-spacing: 0;
}
.prose > * + * { margin-top: 15px; }
.prose h1 {
  font-family: var(--font-prose);
  font-size: 25px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.prose h2 {
  font-family: var(--font-prose);
  font-size: var(--t-21);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
  margin-top: 26px;
}
.prose ul { margin: 0; padding-left: 1.3em; }
.prose li + li { margin-top: 4px; }
.prose li::marker { color: var(--ink-3); }
.prose blockquote {
  margin: 0;
  padding-left: 16px;
  border-left: 2px solid var(--hairline-2);
  color: var(--ink-2);
  font-style: italic;
}
.prose code {
  padding: 1px 5px;
  border-radius: 6px;
  background: var(--surface-sunk);
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: 0.8em;
}
.prose .sel { background: rgba(0, 107, 255, 0.09); border-radius: 2px; }
.prose .caret-pill {
  display: inline-block;
  width: 2.5px;
  height: 1.05em;
  vertical-align: -0.18em;
  margin: 0 -1px;
  border-radius: 1.5px;
  background: var(--accent);
  animation: caret-blink 1.1s steps(1, end) infinite;
}
@keyframes caret-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }

/* ── The bottom bar — the one place uppercase survives ─────────────────── */

.doc-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  border-top: 1px solid var(--app-hairline);
  color: var(--ink-3);
  font-family: var(--font-ui);
}
.doc-bar span {
  font-size: var(--t-11);
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.doc-bar .grow { flex: 1; }
.doc-bar .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.6; }

/* ── A comment thread, as the right panel draws it ─────────────────────── */

.thread {
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  box-shadow: var(--lift-2);
  font-family: var(--font-ui);
}
.thread .quoted {
  padding-left: 10px;
  border-left: 2px solid var(--sp-sun);
  color: var(--ink-3);
  font-family: var(--font-prose);
  font-size: var(--t-13);
  font-style: italic;
  line-height: 1.5;
}
.msg { display: flex; gap: 10px; margin-top: 14px; }
.msg .who {
  font-size: var(--t-13);
  font-weight: 600;
  letter-spacing: -0.005em;
}
.msg .when { font-size: var(--t-11); color: var(--ink-3); margin-left: 6px; font-weight: 400; }
.msg .body { font-size: var(--t-13); line-height: 1.55; color: var(--ink-2); margin-top: 2px; }

/* ── A suggested edit, hunk by hunk ────────────────────────────────────── */

.hunk {
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  box-shadow: var(--lift-2);
  font-family: var(--font-prose);
  font-size: var(--t-15);
  line-height: 1.6;
}
.hunk .row { padding: 9px 14px; display: flex; gap: 10px; }
.hunk .row + .row { border-top: 1px solid var(--hairline); }
.hunk .mk {
  font-family: var(--font-mono);
  font-size: var(--t-13);
  line-height: 1.75;
  flex: 0 0 auto;
  opacity: 0.75;
}
.hunk .del { background: color-mix(in srgb, var(--sp-coral) 9%, transparent); }
.hunk .del .mk { color: var(--sp-coral); }
.hunk .del .tx { color: var(--ink-3); text-decoration: line-through; text-decoration-thickness: 1px; }
.hunk .add { background: color-mix(in srgb, var(--sp-green) 10%, transparent); }
.hunk .add .mk { color: var(--sp-green); }
.hunk .foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-top: 1px solid var(--hairline);
  background: var(--surface-sunk);
  font-family: var(--font-ui);
}
.hunk .foot .grow { flex: 1; }
.hunk .src {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--t-11); color: var(--ink-3);
}
.mini {
  height: 28px;
  padding: 0 12px;
  border-radius: var(--r-chip);
  border: 1px solid var(--hairline);
  background: var(--surface);
  font-size: var(--t-13);
  font-weight: 500;
  cursor: pointer;
  box-shadow: var(--lift-1);
  transition: transform var(--t-press) var(--ease-out),
              box-shadow var(--t-press) var(--ease-out);
}
.mini:hover { box-shadow: var(--lift-2); }
.mini:active { transform: scale(0.96); }
.mini.ok { background: var(--sp-green); border-color: transparent; color: #fff; }

/* ── A chart, as the editor draws it ───────────────────────────────────── */

.chart {
  padding: 16px 18px 12px;
  background: var(--app-surface);
  border: 1px solid var(--app-hairline);
  border-radius: var(--r-control);
}
.chart .bars { display: flex; align-items: flex-end; gap: 10px; height: 118px; }
.chart .bars i {
  flex: 1;
  display: block;
  border-radius: 4px 4px 2px 2px;
  background: var(--sp-blue);
  transform-origin: bottom;
  animation: bar-rise 1.1s var(--ease-soft) both;
}
@keyframes bar-rise { from { transform: scaleY(0.02); } to { transform: scaleY(1); } }
.chart .axis {
  display: flex;
  justify-content: space-between;
  margin-top: 9px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-3);
}

/* ── Home cards ────────────────────────────────────────────────────────── */

.hcard {
  padding: 16px 16px 13px;
  background: var(--app-surface);
  border: 1px solid var(--app-hairline);
  border-radius: 15px;
  box-shadow: var(--lift-1);
  font-family: var(--font-ui);
  transition: box-shadow var(--t-state) var(--ease-out),
              transform var(--t-state) var(--ease-out);
}
.hcard:hover { box-shadow: var(--lift-2); transform: translateY(-2px); }
.hcard h4 { font-size: var(--t-15); letter-spacing: -0.012em; }
.hcard p {
  margin-top: 6px;
  font-size: var(--t-13);
  line-height: 1.5;
  color: var(--ink-3);
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
}
.hcard .foot {
  display: flex; align-items: center; gap: 6px;
  margin-top: 12px;
  font-size: var(--t-11);
  color: var(--ink-3);
}
.hcard .foot .grow { flex: 1; }
.hcard .avatar { width: 18px; height: 18px; font-size: 9px; }

/* ── A file listing, because the file is the point ─────────────────────── */

.files {
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  font-family: var(--font-mono);
  font-size: var(--t-13);
  line-height: 2;
  color: var(--ink-2);
  box-shadow: var(--lift-1);
  overflow-x: auto;
}
.files b { color: var(--ink); font-weight: 400; }
.files .dim { color: var(--ink-3); }

/* ── The agent's own voice: the whisper ────────────────────────────────── */

.whisper {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px 7px 9px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--hairline);
  box-shadow: var(--lift-2);
  font-size: var(--t-13);
  color: var(--ink-2);
}
.spiral { width: 15px; height: 15px; flex: 0 0 auto; }
.spiral circle {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 20 34;
  transform-origin: center;
  animation: spin 1.15s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 700px) {
  .prose { padding: 22px 20px 26px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   Concept E — the owner's cut.

   Assembled from the two concepts he kept: D's chrome (the small centred pill
   nav, the tilted product stage over a wash of light, the split feature rows,
   the price card) and B's warmth (the four-word value band, the detail cards,
   the spark-coloured chart). The floating sticker cluster B put either side of
   the headline is gone — owner, 2026-08-02: too noisy.

   Unlike D this is NOT single-theme. Every value comes from a token declared
   in base.css, so light and dark are the same page under two palettes — the
   glow, the grain and the primary button all follow the ground rather than
   being painted onto it.
   ═══════════════════════════════════════════════════════════════════════════ */

#e { background: var(--paper); color: var(--ink); }

/* Near-black flats band on cheap panels; the noise fixes it. `--grain` is 0
   in light, so the layer is inert rather than conditionally rendered. */
#e .grain {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: var(--grain);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}
#e > *:not(.grain) { position: relative; z-index: 1; }

/* ── The mark ──────────────────────────────────────────────────────────── */

/* The real Grapha mark, from Assets.xcassets/grapha-mark. It is a filled
   shape, so it takes the accent directly rather than a stroke colour. */
#e .brand {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: var(--t-15); font-weight: 600; letter-spacing: -0.02em;
  text-decoration: none;
}
/* The supplied wordmark: the mark keeps #FF4500, the letters take `color`. */
#e .brand .wm { height: 19px; width: auto; aspect-ratio: 804 / 199; flex: 0 0 auto; }
#e .brand { gap: 0; color: var(--ink); }
#e footer .brand .wm { height: 21px; }

/* The real vendor marks (build/mklogos.py) stand in for the letter avatars —
   the owner's call: an agent signs with its own logo, not an initial. */
/* Cursor's and Codex's marks are near-black, so on a dark surface they vanish.
   Every mark sits on the same faint neutral disc — the app's own "invisible
   mask" trick — which keeps them legible on either ground without inventing a
   white badge that reads as decoration. */
#e .mark {
  width: 22px; height: 22px;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--ink) 9%, transparent);
  background-size: 70%;
}

/* ── Nav: a small centred pill ─────────────────────────────────────────── */

#e .nav-hold {
  position: sticky; top: 0; z-index: 40;
  display: flex; justify-content: center;
  padding: 16px 16px 0;
}
#e .nav {
  display: flex; align-items: center; gap: 22px;
  padding: 6px 6px 6px 16px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  backdrop-filter: saturate(180%) blur(22px);
  border: 1px solid var(--hairline);
  box-shadow: var(--lift-2);
}
#e .nav-links { display: flex; gap: 18px; padding: 0 12px; }
#e .nav-links a { font-size: var(--t-13); color: var(--ink-3); text-decoration: none;
  transition: color var(--t-press) var(--ease-out); }
#e .nav-links a:hover { color: var(--ink); }
#e .nav .cta { height: 34px; padding: 0 15px; font-size: var(--t-13); }

/* On dark the button is the one lit object on the page, so it earns a halo. */
#e .cta { box-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 var(--cta-edge),
    0 1px 2px rgba(0, 0, 0, 0.22),
    0 6px 18px rgba(0, 0, 0, 0.14),
    0 0 40px var(--glow-a); }
#e .cta:hover { box-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 var(--cta-edge),
    0 2px 4px rgba(0, 0, 0, 0.24),
    0 10px 26px rgba(0, 0, 0, 0.18),
    0 0 60px var(--glow-a); }

/* ── Hero ──────────────────────────────────────────────────────────────── */

/* The headline wants air above it before it starts (owner, 2026-08-02) — more
   than D's 86px, not less, even though the type came down. A big headline can
   sit near the nav and still read as the top of the page; a smaller one needs
   the gap to say the same thing. */
/* 136px is 104 + 30% (owner, 2026-08-03), rounded to the 4px grid the rest of
   this sheet sits on. The phone value below moves by the same 30%. */
#e .hero { position: relative; padding: 136px 0 0; text-align: center; overflow: hidden; }
/* Three lines, and smaller than D's (owner, 2026-08-02: "the display font and
   the hero section is a little too large" — then, at 60px, "a little too
   small"). D's fluid 46-88px was drawn for a headline that took the full width
   in two lines; over three lines the same size becomes a wall. 70px is the
   landing point, and the block gets its height back from the extra line rather
   than from the type.

   Scoped to the hero's own column, because an unscoped `#e h1` also matched the
   H1 inside the product mock and centred a document title that the app draws
   hard against the reading column's left edge. */
#e .hero > .wrap h1 {
  margin: 0 auto;
  /* The break is authored, on the sentence boundary: two lines, one sentence
     each. `nowrap` below means the measure never adds a break of its own, so
     this is the only one — and the phone breakpoint drops it and re-balances.
     24ch still clears the longer line ("Where plans get made." is 21). */
  max-width: 24ch;
  font-size: clamp(34px, 5.1vw, 70px);
  text-wrap: nowrap;
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 0.98;
}
/* The sub follows the headline down. It was set against an 84px display and
   left behind when that came to 70 — "it didn't shrink the body underneath in
   proportion" (owner, 2026-08-02). 84:21 was a 4:1 ratio; 70:17 holds it, and
   17 is on the scale where 17.5 would not be. */
#e .sub {
  margin: 24px auto 0;
  max-width: 50ch;
  font-size: var(--t-17);
  line-height: 1.45;
  color: var(--ink-2);
  letter-spacing: -0.012em;
}
#e .buttons { display: flex; justify-content: center; align-items: center; gap: 14px;
  margin-top: 34px; flex-wrap: wrap; }

/* ── The stage: the product, drawn to the app's own measurements ────────── */

/* The hero above is centred; a document is not. */
#e .stage {
  position: relative;
  margin-top: 52px;
  padding: 0 24px 96px;
  perspective: 2000px;
  text-align: left;
}
#e .glow {
  position: absolute;
  left: 50%; top: 40px;
  width: min(1240px, 120%); height: 560px;
  transform: translateX(-50%);
  background:
    radial-gradient(48% 52% at 50% 42%, var(--glow-a), transparent 70%),
    radial-gradient(70% 62% at 50% 50%, var(--glow-b), transparent 74%);
  filter: blur(34px);
  pointer-events: none;
}

/* One shallow tilt that lies down when you approach it. D's gesture, kept; the
   detached floating side-card it used to fly alongside is gone, because the app
   has no such object — the comments panel lives INSIDE the window, in the grey
   the writing canvas floats on. */
#e .app-hold {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  transform: rotateX(5deg);
  transform-origin: 50% 0;
  transition: transform 560ms var(--ease-soft);
}
#e .app-hold:hover { transform: rotateX(0deg); }

/* The window. `--app-canvas` is the app grey; the card inside it is white with
   an EQUAL 8px frame on all four sides (owner, 2026-07-23). */
/* CONCENTRIC: outer radius = inner radius + frame. The card inside is 15px (the
   app's own `--r-card`) on an 8px frame, so the window is 23px. It read wrong at
   14px because the inner corner was then ROUNDER than the outer one containing
   it — two arcs bending against each other, and the grey frame pinching thin at
   the corner while staying 8px along the edges. Change one of these three
   numbers and you owe the other two. */
#e .app {
  position: relative;
  padding: 8px;
  border-radius: 23px;
  background: var(--app-canvas);
  box-shadow:
    0 0 0 0.5px var(--hairline-2),
    0 2px 6px rgba(22, 23, 26, 0.10),
    0 24px 48px rgba(22, 23, 26, 0.13),
    0 60px 120px rgba(22, 23, 26, 0.10);
}

/* macOS puts these at the window's top-left; Grapha nudges them in by 10/9, so
   they land on the white card rather than hugging the corner. Nudged further
   in again on the landing page (owner, 2026-08-03) — the shot is a portrait of
   the window, not a screenshot of it, and the extra air reads as deliberate. */
#e .app-lights {
  position: absolute; z-index: 3;
  left: 22px; top: 20px;
  display: flex; gap: 8px;
}
#e .app-lights i { width: 12px; height: 12px; border-radius: 50%; display: block; }
#e .app-lights i:nth-child(1) { background: #FF5F57; }
#e .app-lights i:nth-child(2) { background: #FEBC2E; }
#e .app-lights i:nth-child(3) { background: #28C840; }

/* The canvas and the panel are flex siblings — which is exactly why the panel
   PUSHES the writing column instead of covering it (decision 54). No gap: a
   flex gap survives the panel closing to zero width, leaving the right side
   of the frame 16px while the other three sit at 8px. The 8px seam lives in
   the panel's own open padding instead. */
#e .app-row { display: flex; height: 604px; }

#e .app-card {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 15px;
  background: var(--app-surface);
  border: 1px solid var(--app-hairline);
  box-shadow: 0 1px 3px rgba(18, 18, 32, 0.06);
}

#e .app-scroll { flex: 1 1 auto; min-height: 0; overflow: hidden; }

/* The 660px reading measure, 17/31. The real app opens a note with
   `leading × 6` of air above the title; the mock shows the document nudged up
   so the bar and the panel fit in one frame.

   The document is set in the app's own sans (owner, 2026-08-03) — it was Lora,
   the cycler's SERIF, and the bar below now reads NORMAL to match. Open Runde
   tops out at Semibold, so the title asks for 600, not the 700 it carried in a
   400-only Lora build: 700 here would be a face the browser has to invent. */
#e .app-col {
  max-width: 660px;
  margin: 0 auto;
  padding: 64px 24px 0;
  font-family: var(--font-ui);
  font-size: 17px;
  line-height: 31px;
  color: var(--ink);
}
#e .app-col > * + * { margin-top: 31px; }
#e .app-col h1 {
  font-family: var(--font-ui);
  font-size: 34px; font-weight: 600;
  line-height: 1.3; letter-spacing: -0.011em;
}
#e .app-col p { font-family: var(--font-ui); }
#e .app-col ul { margin: 0; padding-left: 1.25em; }
#e .app-col li::marker { color: var(--ink-3); }
#e .app-col .sel { background: rgba(0, 107, 255, 0.09); border-radius: 2px; }
/* Ours, not the browser's: a 2.7px rounded pill that rests between keystrokes. */
#e .app-col .caret-pill {
  display: inline-block;
  width: 2.7px; height: 1.05em;
  margin: 0 0 -0.18em 1px;
  border-radius: 2px;
  background: var(--accent);
  animation: caret-rest 1.1s steps(1, end) infinite;
}
@keyframes caret-rest { 0%, 55% { opacity: 1 } 56%, 100% { opacity: 0 } }

/* The bottom bar, pinned inside the card: 40px, 16px side padding, one hairline
   above it, items at 10px / 500 / 0.12em uppercase. */
#e .app-bar {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 0;
  height: 40px; padding: 0 16px;
  border-top: 1px solid var(--app-hairline);
  font-size: 10px; font-weight: 500; letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
#e .app-bar .bi { padding: 4px 8px; border-radius: 5px; }
#e .app-bar .bnum { font-variant-numeric: tabular-nums; }
#e .app-bar .bsep { margin: 0 8px; letter-spacing: 0; }
#e .app-bar .bgrow { flex: 1; }
/* The label in the bar. It inherited only its two tint colours from `.lp-violet`
   and none of `.label-pill`'s anatomy, so it drew as a SQUARE block with the word
   sitting off-centre — a bare `<span>` with a height is not a box that centres
   anything. `inline-flex` + `align-items: center` is what actually centres it;
   the height alone never did. Radius 5 is the bar's own (`--bar-item-radius` in
   the app, and `.bi` beside it here), so the row reads as one set of chips. */
#e .app-bar .bpill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 18px;
  padding: 0 7px;
  border-radius: 5px;
  font-size: 9px;
  line-height: 1;
}

/* The comments panel: embedded in the grey rather than floating on it. The
   left padding is the 8px seam between the card and the panel; box-sizing
   keeps the 290px pcard inside the 300px basis. */
#e .app-panel { flex: 0 0 300px; padding: 18px 0 0 10px; box-sizing: border-box; }
#e .pcard {
  padding: 16px;
  border-radius: 15px;
  background: var(--app-surface);
  border: 1px solid var(--app-hairline);
}
#e .ptype { margin-bottom: 10px; font-size: 11px; font-weight: 500; color: var(--ink-3); }
#e .pquote {
  margin-bottom: 12px; padding-left: 10px;
  border-left: 2px solid var(--sp-sun);
  font-family: var(--font-prose); font-size: 13px; font-style: italic;
  color: var(--ink-2);
}
#e .pwho { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
#e .pwho .mark { width: 24px; height: 24px; background-color: transparent; }
#e .pname { font-size: 14px; font-weight: 600; }
#e .pwhen { margin-left: auto; font-size: 11px; color: var(--ink-3); }
#e .pbody { font-size: 14px; line-height: 1.5; color: var(--ink); }
#e .pacts { display: flex; gap: 6px; margin-top: 14px; }
#e .pbtn {
  flex: 1; height: 30px;
  border: 1px solid var(--app-hairline); border-radius: 10px;
  background: var(--app-surface);
  font-size: 11px; font-weight: 500;
  cursor: pointer;
  transition: background var(--t-press) var(--ease-out),
              border-color var(--t-press) var(--ease-out);
}
#e .pbtn:hover { background: var(--surface-sunk); border-color: var(--hairline-2); }

/* ── Ground rhythm ─────────────────────────────────────────────────────── */

/* The page is white. `.tinted` is the exception — the app's own grey, used
   only where a section has to separate from the one above it (owner,
   2026-08-02: "mostly pure white except a few sections that need contrast"). */
#e .tinted { background: var(--paper-deep); border-block: 1px solid var(--hairline); }

/* ── The loop ──────────────────────────────────────────────────────────────
   The page's thesis, so it gets a stage: four cards, each carrying one real
   fragment of the app rather than an icon standing in for it. `<ol>` because
   the order is load-bearing — Write, Crystalize, Do, Review is the product's
   own loop, not a decorative sequence — and the step names carry it, so no
   `01/02/03` counters are needed on top. */

#e .loop {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 44px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
#e .loop > li {
  padding: 26px;
  border-radius: var(--r-big);
  background: var(--surface);
  border: 1px solid var(--hairline);
  transition: transform 400ms var(--ease-soft), box-shadow 400ms var(--ease-soft);
}
#e .loop > li:hover { transform: translateY(-4px); box-shadow: var(--lift-2); }
#e .loop .step {
  display: block;
  font-size: var(--t-11); font-weight: 600; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--accent);
}
#e .loop h4 { margin-top: 10px; font-size: var(--t-21); letter-spacing: -0.025em; }
#e .loop > li > p { margin-top: 8px; font-size: var(--t-15); line-height: 1.55; color: var(--ink-2); }

/* Concentric: the well sits inside the card's 26px padding. */
#e .lstage {
  display: flex; flex-direction: column; justify-content: center; gap: 12px;
  min-height: 152px;
  margin-top: 20px;
  padding: 18px;
  border-radius: var(--r-card);
  background: var(--paper-deep);
  border: 1px solid var(--hairline);
}

/* 1 — the rough version, in the user's own serif voice. */
#e .lrough { font-family: var(--font-prose); font-size: var(--t-15); line-height: 1.75; }
#e .lrough b { display: block; margin-bottom: 6px; font-size: var(--t-21); font-weight: 600;
  letter-spacing: -0.011em; }
#e .lrough div { color: var(--ink-2); }

/* 2 — an anchored comment, as the panel draws it. */
#e .lcomment { display: flex; gap: 10px; align-items: flex-start; }
#e .lcomment .mark { width: 24px; height: 24px; background-color: transparent; flex: 0 0 auto; }
#e .lname { font-size: var(--t-13); font-weight: 600; }
#e .lcomment p { margin-top: 4px; font-size: var(--t-13); line-height: 1.5; color: var(--ink-2); }

/* 3 — checked-off work, and one instrument carrying one fact. */
#e .ltodo { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
#e .ltodo li { display: flex; gap: 9px; align-items: center;
  font-family: var(--font-prose); font-size: var(--t-15); color: var(--ink); }
#e .ltodo svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--sp-green); }
#e .ltodo .box { width: 13px; height: 13px; margin: 0 1px; flex: 0 0 auto;
  border: 1.5px solid var(--hairline-2); border-radius: 4px; }
#e .ltodo .done { color: var(--ink-3); text-decoration: line-through;
  text-decoration-thickness: 1px; text-decoration-color: var(--hairline-2); }
#e .linstr {
  margin-top: 4px; padding: 11px 13px;
  border-radius: var(--r-control);
  background: var(--surface);
  border: 1px solid var(--hairline);
}
#e .lfact { font-size: var(--t-13); font-weight: 500; font-variant-numeric: tabular-nums; }
#e .lbar { display: block; height: 3px; margin-top: 9px; border-radius: 2px;
  background: var(--hairline-2); overflow: hidden; }
#e .lbar i { display: block; height: 100%; border-radius: 2px; background: var(--sp-green); }

/* 4 — a review hunk, at card scale. */
#e .lhunk { border-radius: var(--r-control); overflow: hidden; background: var(--surface);
  border: 1px solid var(--hairline); }
#e .lhunk .row { display: flex; gap: 9px; padding: 8px 12px;
  font-family: var(--font-prose); font-size: var(--t-13); }
#e .lhunk .mk { font-family: var(--font-mono); font-size: var(--t-11); width: 9px; flex: 0 0 auto; }
#e .lhunk .del { background: color-mix(in srgb, var(--sp-coral) 9%, transparent); }
#e .lhunk .del .mk { color: var(--sp-coral); }
#e .lhunk .del .tx { color: var(--ink-3); text-decoration: line-through; text-decoration-thickness: 1px; }
#e .lhunk .add { background: color-mix(in srgb, var(--sp-green) 10%, transparent); }
#e .lhunk .add .mk { color: var(--sp-green); }
#e .lhunk .foot { display: flex; align-items: center; gap: 8px; padding: 9px 12px;
  border-top: 1px solid var(--hairline); font-size: var(--t-11); color: var(--ink-3); }
#e .lhunk .src { display: inline-flex; align-items: center; gap: 6px; }
#e .lhunk .src .mark { width: 15px; height: 15px; background-color: transparent; }
#e .lhunk .grow { flex: 1; }
#e .lhunk .mini { height: 25px; padding: 0 11px; border-radius: 7px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--hairline); color: var(--ink);
  font-size: var(--t-11); font-weight: 500; }
#e .lhunk .mini.ok { background: var(--sp-green); border-color: transparent; color: #fff; }

#e .loop-foot {
  margin-top: 28px; text-align: center;
  font-size: var(--t-21); letter-spacing: -0.015em; color: var(--ink-2);
}

/* ── Split feature rows ────────────────────────────────────────────────── */

#e section { padding: 104px 0; }
#e .eyebrow { color: var(--accent); }
#e h2 {
  font-size: clamp(32px, 4.2vw, 54px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.03;
  margin-top: 14px;
}
#e .lead { margin-top: 20px; max-width: 46ch; font-size: var(--t-17);
  line-height: 1.62; color: var(--ink-2); }

#e .split { display: grid; grid-template-columns: minmax(0,.88fr) minmax(0,1.12fr);
  gap: 60px; align-items: center; }
#e .split.flip > *:first-child { order: 2; }
#e .split h2 { font-size: clamp(28px, 3.2vw, 42px); }

/* A pane, tilted, with its own light under it. */
#e .tilt { position: relative; }
#e .tilt::before {
  content: "";
  position: absolute; inset: 12% 6% -6%;
  background: radial-gradient(50% 60% at 50% 50%, var(--halo, var(--halo-base)), transparent 70%);
  filter: blur(30px);
  z-index: 0;
}
#e .tilt > * { position: relative; z-index: 1; }
#e .tilt.l > * { transform: rotateZ(-1.6deg); }
#e .tilt.r > * { transform: rotateZ(1.6deg); }

#e .ticks { margin: 26px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
#e .ticks li { display: flex; gap: 11px; align-items: flex-start;
  font-size: var(--t-15); color: var(--ink-2); }
#e .ticks b { color: var(--ink); font-weight: 500; }
#e .ticks svg { width: 17px; height: 17px; margin-top: 3px; flex: 0 0 auto; color: var(--accent); }

/* ── The scope card: what a run was handed, and what it wasn't ──────────── */

#e .scope {
  padding: 18px;
  border-radius: var(--r-big);
  background: var(--surface);
  border: 1px solid var(--hairline);
  box-shadow: var(--lift-2);
}
#e .scope-head {
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 12px; margin-bottom: 4px;
  border-bottom: 1px solid var(--hairline);
  font-size: var(--t-13); font-weight: 500;
}
#e .scope-head .mark { width: 20px; height: 20px; background-color: transparent; }
#e .scope-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 2px;
  font-size: var(--t-13);
}
#e .scope-row .fn { font-family: var(--font-mono); font-size: var(--t-13); }
#e .scope-row .label-pill { flex: 0 0 auto; }
/* The denied half reads as absence, not as an error: no red, no strike, just
   less ink — a document the run was never given has nothing wrong with it. */
#e .scope-row.off { opacity: 0.4; }
#e .scope-row.off .fn { color: var(--ink-2); }
#e .nolabel {
  display: inline-flex; align-items: center; height: 22px; padding: 0 9px;
  border-radius: var(--r-chip);
  border: 1px dashed var(--hairline-2);
  font-size: var(--t-11); font-weight: 500; letter-spacing: 0.06em;
  color: var(--ink-3); white-space: nowrap;
}
#e .scope-sep {
  margin: 10px 0 2px; padding-top: 12px;
  border-top: 1px solid var(--hairline);
  font-size: var(--t-11); font-weight: 600; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--ink-3);
}

/* ── Details that matter ───────────────────────────────────────────────── */

#e .details { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 42px; }
#e .dcard {
  padding: 26px;
  border-radius: var(--r-big);
  background: var(--surface);
  border: 1px solid var(--hairline);
  transition: transform 400ms var(--ease-soft), box-shadow 400ms var(--ease-soft);
}
#e .dcard:hover { transform: translateY(-4px); box-shadow: var(--lift-2); }
#e .dcard h4 { font-size: var(--t-21); letter-spacing: -0.025em; }
#e .dcard p { margin-top: 8px; font-size: var(--t-15); line-height: 1.55; color: var(--ink-2); }
/* Concentric: the inner stage sits inside the card's 26px padding. */
#e .dcard .stagealt {
  display: grid; place-items: center;
  min-height: 132px;
  margin-top: 20px;
  padding: 18px;
  border-radius: var(--r-card);
  background: var(--paper-deep);
  border: 1px solid var(--hairline);
}
/* Lock-in draws itself: the stage goes dark in BOTH themes, because what the
   mode does is take the room away from around the sentence. The Esc pill is the
   app's own — radius 5, 10px/0.12em uppercase, dimmed to .7. */
#e .dcard .stagealt.lockin {
  position: relative;
  background: #0B0C0E;
  border-color: rgba(255, 250, 245, 0.10);
}
#e .li-line {
  font-family: var(--font-prose);
  font-size: var(--t-17);
  line-height: 1.6;
  text-align: center;
  color: #EDEEF0;
}
#e .li-esc {
  position: absolute; left: 12px; top: 12px;
  display: grid; place-items: center;
  height: 24px; padding: 0 10px;
  border-radius: 5px;
  background: rgba(255, 250, 245, 0.06);
  border: 1px solid rgba(255, 250, 245, 0.12);
  font-size: 10px; font-weight: 500; letter-spacing: 0.12em;
  text-transform: uppercase; color: #9AA0A8;
  opacity: 0.7;
}

/* ── Price ─────────────────────────────────────────────────────────────── */

#e .price {
  max-width: 560px; margin: 44px auto 0; padding: 36px;
  border-radius: var(--r-big);
  background: linear-gradient(to bottom, var(--surface), var(--surface-sunk));
  border: 1px solid var(--hairline);
  box-shadow: var(--lift-3);
  text-align: center;
}
#e .price .amount { font-size: 72px; font-weight: 600; letter-spacing: -0.045em;
  line-height: 1; font-variant-numeric: tabular-nums; }
#e .price .once { margin-top: 10px; color: var(--ink-3); }
#e .price ul { margin: 28px 0 0; padding: 0; list-style: none; display: grid; gap: 11px;
  text-align: left; }
#e .price li { display: flex; gap: 10px; font-size: var(--t-15); color: var(--ink-2); }
#e .price li svg { width: 17px; height: 17px; margin-top: 3px; flex: 0 0 auto; color: var(--accent); }
#e .price .cta { margin-top: 28px; width: 100%; justify-content: center; }
#e .price .fine { margin-top: 14px; font-size: var(--t-13); color: var(--ink-3); }

/* ── FAQ ───────────────────────────────────────────────────────────────── */

#e .faq { max-width: 740px; margin: 40px auto 0; }
#e details { border-bottom: 1px solid var(--hairline); padding: 20px 0; }
#e summary { display: flex; align-items: center; gap: 16px; cursor: pointer; list-style: none;
  font-size: var(--t-17); font-weight: 500; letter-spacing: -0.015em; }
#e summary::-webkit-details-marker { display: none; }
#e summary .grow { flex: 1; }
#e summary .pm { width: 20px; height: 20px; flex: 0 0 auto; color: var(--ink-3);
  transition: transform var(--t-state) var(--ease-out); }
#e details[open] summary .pm { transform: rotate(45deg); }
#e details p { margin-top: 12px; font-size: var(--t-15); line-height: 1.65; color: var(--ink-2); }

/* ── Close + footer ────────────────────────────────────────────────────── */

/* No border of its own: `.tinted` already draws the rule above and below, and
   the two stacked read as one heavy double stroke. */
#e .end { position: relative; padding: 104px 0; text-align: center; overflow: hidden; }
#e .end .glow { top: auto; bottom: -180px; height: 420px; }
#e .end h2 { font-size: clamp(34px, 4.6vw, 58px); max-width: 17ch; margin: 0 auto; }
#e .end p { margin: 20px auto 0; max-width: 46ch; font-size: var(--t-17); color: var(--ink-2); }
/* The band is centered; the ticks read as a list, so they stay left-aligned
   on their own centered column. */
#e .end .ticks { max-width: 480px; margin: 30px auto 0; text-align: left; }
#e .end .fine { margin-top: 14px; font-size: var(--t-13); color: var(--ink-3); }

/* One row, no rule of its own: wordmark left, Privacy right (owner,
   2026-08-03). The tinted closing band already draws a line at this seam, and
   a second one directly under it reads as a stutter. */
#e footer { padding: 26px 0; }
#e footer h5 { margin: 0 0 14px; font-size: var(--t-11); font-weight: 600;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-3); }
#e footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
#e footer a { font-size: var(--t-15); color: var(--ink-3); text-decoration: none; }
#e footer a:hover { color: var(--ink); }
#e .fbot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  font-size: var(--t-13); color: var(--ink-3); }
#e .fbot .grow { flex: 1; }

/* ── Responsive ────────────────────────────────────────────────────────────
   Six steps, each one removing the thing that stopped fitting rather than
   shrinking everything at once. The product window is the exception: it does
   not scale down, it NARROWS — which is a real state of the app (a narrow
   window closes its comments panel and the prose re-centres), so the mock stays
   honest at every width instead of turning into a thumbnail. */

/* A narrow Grapha window closes the panel and gives the column the space. */
@media (max-width: 1080px) {
  #e .app-panel { display: none; }
  #e .app-row { height: 500px; }
}

@media (max-width: 940px) {
  #e .split { grid-template-columns: 1fr; gap: 34px; }
  #e .split.flip > *:first-child { order: 0; }
  #e .details { grid-template-columns: 1fr; }
  #e .loop { grid-template-columns: 1fr; }
  #e .nav-links { display: none; }
  #e section { padding: 68px 0; }
  #e .hero { padding-top: 72px; }   /* 56 + 30%, to the same grid */
  #e .stage { margin-top: 44px; padding-bottom: 84px; }
  #e .app-hold { transform: rotateX(3deg); }
  #e .app-row { height: 460px; }
  #e .app-col { padding-top: 84px; }
}

@media (max-width: 760px) {
  #e .sub { font-size: var(--t-17); }
  #e .stage { padding-inline: 12px; }
  /* A tilt reads as a mistake once the object is nearly as wide as the screen. */
  #e .app-hold { transform: none; }
  #e .app-row { height: 400px; }
  #e .app-col { padding: 64px 20px 0; font-size: 16px; line-height: 28px; }
  #e .app-col > * + * { margin-top: 28px; }
  #e .app-col h1 { font-size: 28px; }
  #e .loop > li { padding: 20px; }
  #e .loop-foot { font-size: var(--t-17); }
  #e .price { padding: 28px 22px; }
  #e .price .amount { font-size: 56px; }
  #e .dcard { padding: 20px; }
}

@media (max-width: 620px) {
  /* Both authored breaks go, along with the `nowrap` that kept each line whole.
     They are a desktop composition — a 15ch phone measure already breaks
     "get made. And then" on its own, so honouring the breaks too would stack
     the headline five or six lines deep. `balance` does the work here. */
  #e .hero > .wrap h1 { text-wrap: balance; max-width: 15ch; font-size: clamp(34px, 9.5vw, 44px); }
  #e .hero > .wrap h1 br { display: none; }
  /* No phone override for `.sub` any more — it is 17px everywhere since the
     headline came down to 70. A rule restating the value it already has reads
     like a decision and is not one. */
  #e section { padding: 52px 0; }
  /* Two full-width buttons stacked, not two shrink-wrapped ones centred: on a
     phone the tap target is the whole row or it is a guess. */
  #e .buttons { flex-direction: column; align-items: stretch; }
  #e .buttons .cta, #e .buttons .cta-quiet { justify-content: center; }
  #e .end { padding: 76px 0; }
  #e .app-row { height: 340px; }
  #e .app-col { padding-top: 52px; }
  #e .ticks li, #e .price li { font-size: var(--t-13); }
}

@media (max-width: 460px) {
  :root { --t-60: 32px; }
  #e .nav { padding-left: 12px; }
  #e .nav .cta { padding: 0 12px; }
  #e .app { padding: 6px; }
  #e .app-col { padding-inline: 16px; }
  #e .price .amount { font-size: 48px; }
  #e summary { font-size: var(--t-15); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   The live demo — demo.js plays the loop inside the hero window.

   The `.js` root class (set inline in <head>) scopes every pre-hidden state,
   so with no script the markup's finished Review state simply shows. Beats
   the script has not reached yet carry `data-beat`.
   ═══════════════════════════════════════════════════════════════════════════ */

/* The four step names, small and tracked, above the window. */
#e .demo-steps {
  position: relative; z-index: 1;
  display: flex; justify-content: center; align-items: center; gap: 12px;
  margin: 0 auto 22px;
  /* Freeman (owner, 2026-08-03) — the one place the display face is used;
     `.dstep`/`.darr`/`.dreplay` inherit it through their `font: inherit`.
     Freeman has one weight, so this asks for 400 rather than the 600 the row
     carried in Open Runde — 600 would draw a synthetic bold over a face that
     is already heavy. */
  font-family: var(--font-display);
  font-size: 10px; font-weight: 400; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
/* Real buttons now — clicking a chapter name jumps the playhead there. */
#e .dstep {
  border: 0; padding: 0; background: none;
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  color: inherit; cursor: pointer;
  opacity: 0.45;
  transition: opacity var(--t-state) var(--ease-out), color var(--t-state) var(--ease-out);
}
#e .dstep:hover { opacity: 0.85; color: var(--ink); }
#e .dstep.on { opacity: 1; color: var(--ink); }
#e .darr { opacity: 0.3; letter-spacing: 0; }
#e .dreplay {
  margin-left: 10px; padding: 5px 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline-2);
  background: var(--surface);
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  color: var(--ink-2); cursor: pointer;
}
#e .dreplay:hover { color: var(--ink); background: var(--surface-sunk); }

#e .stage-foot {
  position: relative; z-index: 1;
  margin: 30px auto 0; max-width: 62ch;
  text-align: center;
  font-size: var(--t-15); color: var(--ink-2);
}
#e .foot-hint { color: var(--ink-3); }

/* Beats the script has not reached yet. Without `.js` everything shows.
   `!important` because the beat gate must beat each element's own display
   rule below (equal specificity, earlier in the file loses). */
.js #e [data-beat] { display: none !important; }
#e .din { animation: drise 640ms var(--ease-soft); }
@keyframes drise { from { opacity: 0; transform: translateY(7px); } }
/* Suggestion marks fade in rather than pop (inline spans can't translate). */
#e .sfade { animation: sugin 520ms var(--ease-out); }
@keyframes sugin { from { opacity: 0; } }
/* Between loops the document takes a breath: fade out, reset, fade back. */
.js #e .app-col { transition: opacity 460ms var(--ease-out); }
.js #e .app-col.dimmed { opacity: 0; }

/* The label pops into the bar — the whole setup gesture. */
#e .app-bar .bpill { transition: transform 340ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 220ms var(--ease-out); }
#e .app-bar .bpill.hide { opacity: 0; transform: scale(0.5); }

/* The comment's anchor in the prose, the app's soft sun tint. */
#e .canchor {
  background: color-mix(in srgb, var(--sp-sun) 26%, transparent);
  border-radius: 3px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
  transition: background 500ms var(--ease-out);
}

/* Suggested edit, as the editor draws it: inline marks, not a diff block. */
#e .sug-del {
  color: var(--ink-3);
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--sp-coral) 70%, transparent);
  text-decoration-thickness: 1.5px;
  background: color-mix(in srgb, var(--sp-coral) 8%, transparent);
  border-radius: 3px; padding: 1px 3px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
#e .sug-add {
  background: color-mix(in srgb, var(--sp-green) 13%, transparent);
  border-radius: 3px; padding: 1px 3px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
#e .app-col > .sug-bar {
  display: flex; align-items: center; gap: 9px;
  margin-top: 14px;
  font-family: var(--font-ui);
  font-size: 12px; font-weight: 500; color: var(--ink-3);
}
#e .sug-bar .mark { width: 18px; height: 18px; }
#e .sug-who { margin-right: 2px; }
#e .sug-bar .mini {
  display: inline-flex; align-items: center; justify-content: center;
  height: 27px; padding: 0 13px;
  border-radius: 8px;
  border: 1px solid var(--hairline-2);
  background: var(--surface);
  font-family: var(--font-ui); font-size: 11px; font-weight: 500;
  color: var(--ink); cursor: pointer;
  transition: background var(--t-press) var(--ease-out), transform var(--t-press) var(--ease-out);
}
#e .sug-bar .mini:hover { background: var(--surface-sunk); }
#e .sug-bar .mini:active { transform: scale(0.97); }
#e .sug-bar .mini.ok { background: var(--sp-green); border-color: transparent; color: #fff; }
#e .sug-bar .mini.ok:hover { background: color-mix(in srgb, var(--sp-green) 88%, #000); }

/* The checklist the agent works through. Done items keep their ink — the app
   checks a box, it does not cross out your plan. */
#e .app-col > .d-todo { list-style: none; margin-top: 26px; padding: 0; display: grid; gap: 12px; }
#e .d-todo li { display: flex; align-items: center; gap: 12px; }
#e .dbox {
  width: 18px; height: 18px;
  border-radius: 5px;
  border: 1.5px solid var(--hairline-2);
  background: var(--app-surface);
  display: grid; place-items: center; flex: 0 0 auto;
  transition: background 240ms var(--ease-out), border-color 240ms var(--ease-out);
}
#e .dbox svg { width: 11px; height: 11px; color: #fff; transform: scale(0); transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1); }
#e .d-todo li.done .dbox { background: var(--accent); border-color: var(--accent); }
#e .d-todo li.done .dbox svg { transform: scale(1); }
#e .app-col > .d-budget { margin-top: 26px; }

/* `Edited just now` — the app's transient save note, top-right on the card. */
#e .app-note {
  position: absolute; z-index: 2;
  right: 20px; top: 32px;
  font-family: var(--font-ui);
  font-size: 11px; font-weight: 500; color: var(--ink-3);
  opacity: 0; transition: opacity 420ms var(--ease-out);
}
#e .app-note.show { opacity: 0.9; }

/* After the demo, the visitor holds the pen. */
#e .app-col[contenteditable="true"] { outline: none; caret-color: var(--accent); cursor: text; }

/* The panel PUSHES the column in (decision 54): closed is basis 0, open is
   the app's own 300. The card keeps a fixed width so its text never rewraps
   mid-slide. */
#e .pcard { width: 290px; box-sizing: border-box; }
.js #e .app-panel {
  flex-basis: 0; width: 0;
  padding-left: 0; padding-right: 0;
  opacity: 0; overflow: hidden;
  transition: flex-basis 560ms var(--ease-soft), width 560ms var(--ease-soft),
              opacity 400ms var(--ease-out), padding 560ms var(--ease-soft);
}
.js #e .app.panel-open .app-panel { flex-basis: 300px; width: 300px; opacity: 1; padding: 18px 0 0 10px; }
.js #e .pcard { opacity: 0; transform: translateX(12px); transition: opacity 340ms var(--ease-out), transform 460ms var(--ease-soft); }
.js #e .app.panel-open .pcard { opacity: 1; transform: none; transition-delay: 140ms; }
.js #e .app .pcard.resolved { opacity: 0; transform: translateX(8px); }

/* Narrow, the real app closes the panel and comments become a popover over
   the page — so the demo does the same. */
@media (max-width: 1080px) {
  .js #e .app-panel {
    display: block;
    position: absolute; right: 16px; bottom: 56px; z-index: 6;
    flex: none; width: 290px; padding: 0;
    opacity: 0; transform: translateY(10px);
    overflow: visible; pointer-events: none;
    transition: opacity 320ms var(--ease-out), transform 460ms var(--ease-soft);
  }
  .js #e .app.panel-open .app-panel { width: 290px; padding: 0; opacity: 1; transform: none; pointer-events: auto; }
  .js #e .app-panel .pcard { box-shadow: var(--lift-3); }
}
@media (max-width: 940px) {
  #e .app-col { padding-top: 64px; }
}
@media (max-width: 760px) {
  #e .app-row { height: 480px; }
}
@media (max-width: 620px) {
  #e .app-row { height: auto; min-height: 440px; }
  #e .app-scroll { overflow: visible; }
  #e .app-col { padding-bottom: 26px; }
  #e .demo-steps { flex-wrap: wrap; gap: 8px; }
  #e .pcard { width: min(290px, calc(100vw - 72px)); }
}