:root {
    --paper: #f7f3ea;
    --paper-deep: #efe8d8;
    --card: #fffdf7;
    --ink: #181511;
    --ink-soft: #433d33;
    --muted: #6e6758;
    --rule: #e2d9c4;
    --rule-strong: #cfc4a8;
    --lime: #6f9a2c;
    --cyan: #0c8e9a;
    --gold: #c8860d;
    --coral: #d94f33;
    --violet: #5b4be0;
    --night: #14161d;
    --serif: "Fraunces", Georgia, "Times New Roman", serif;
    --sans: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --hand: "Caveat", "Bradley Hand", "Segoe Print", cursive;
    --shadow-card: 0 1px 2px rgba(24, 21, 17, 0.05), 0 14px 34px -20px rgba(24, 21, 17, 0.28);
    --shadow-window: 0 2px 4px rgba(10, 9, 7, 0.18), 0 30px 70px -28px rgba(10, 9, 7, 0.55);
    --wrap: 1168px;
  }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16.5px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
  }
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 90;
    pointer-events: none;
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  }
  body.menu-open { overflow: hidden; }

  a { color: inherit; }
  img { max-width: 100%; display: block; }
  h1, h2, h3, p { margin: 0; }

  ::selection { background: rgba(200, 134, 13, 0.28); }

  .wrap { width: min(var(--wrap), calc(100% - 48px)); margin: 0 auto; }
  @media (max-width: 640px) { .wrap { width: calc(100% - 36px); } }

  /* ---------------- nav ---------------- */
  .nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 50;
    background: rgba(247, 243, 234, 0.88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color 200ms ease, box-shadow 200ms ease;
  }
  .nav.scrolled { border-bottom-color: var(--rule); box-shadow: 0 10px 30px -24px rgba(24, 21, 17, 0.4); }
  .nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 14px 0;
  }
  .brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
    font-weight: 800;
    font-size: 1.06rem;
    letter-spacing: -0.01em;
  }
  .brand img { width: 34px; height: 34px; border-radius: 7px; box-shadow: 0 3px 10px -2px rgba(24, 21, 17, 0.4); }
  .brand .ai { color: var(--gold); }
  .nav-links { display: flex; align-items: center; gap: 26px; font-size: 0.94rem; font-weight: 500; }
  .nav-links a:not(.btn) { text-decoration: none; color: var(--ink-soft); padding: 6px 2px; border-bottom: 2px solid transparent; transition: color 140ms ease, border-color 140ms ease; }
  .nav-links a:not(.btn):hover { color: var(--ink); border-bottom-color: var(--gold); }

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 46px;
    padding: 0 21px;
    border: 2px solid var(--ink);
    border-radius: 7px;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--sans);
    font-size: 0.97rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease, color 140ms ease;
  }
  .btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -10px rgba(24, 21, 17, 0.5); }
  .btn:active { transform: translateY(0); }
  .btn.ghost { background: transparent; color: var(--ink); }
  .btn.ghost:hover { background: var(--ink); color: var(--paper); }
  .btn.small { min-height: 40px; padding: 0 15px; font-size: 0.88rem; }
  .btn.paper { background: var(--paper); border-color: var(--paper); color: var(--ink); }
  .btn.paper:hover { box-shadow: 0 10px 22px -10px rgba(0, 0, 0, 0.6); }
  .btn.line-paper { background: transparent; border-color: rgba(247, 243, 234, 0.5); color: var(--paper); }
  .btn.line-paper:hover { border-color: var(--paper); background: rgba(247, 243, 234, 0.08); }

  .menu-button { display: none; }

  /* ---------------- hero ---------------- */
  .hero {
    position: relative;
    padding: 150px 0 0;
    background:
      linear-gradient(180deg, rgba(247, 243, 234, 0) 0%, rgba(247, 243, 234, 0) 78%, var(--paper) 100%),
      repeating-linear-gradient(180deg, transparent 0, transparent 43px, rgba(24, 21, 17, 0.055) 43px, rgba(24, 21, 17, 0.055) 44px);
  }
  .hero::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    left: clamp(14px, 4vw, 58px);
    width: 1px;
    background: rgba(217, 79, 51, 0.34);
    pointer-events: none;
  }
  .hero-head { text-align: center; position: relative; }
  .hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border: 1.5px solid var(--rule-strong);
    border-radius: 7px;
    background: var(--card);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-soft);
    box-shadow: var(--shadow-card);
  }
  .hero-eyebrow .tiles { display: inline-flex; gap: 3px; }
  .hero-eyebrow .tiles i { width: 8px; height: 8px; border-radius: 2px; }
  .hero-eyebrow .tiles i:nth-child(1) { background: var(--lime); }
  .hero-eyebrow .tiles i:nth-child(2) { background: var(--cyan); }
  .hero-eyebrow .tiles i:nth-child(3) { background: var(--coral); }
  .hero-eyebrow .tiles i:nth-child(4) { background: var(--gold); }

  h1 {
    margin: 30px auto 0;
    max-width: 13ch;
    font-family: var(--serif);
    font-size: clamp(2.9rem, 7.4vw, 5.9rem);
    font-weight: 900;
    line-height: 1.0;
    letter-spacing: -0.022em;
    font-variation-settings: "opsz" 110;
  }
  h1 .alive {
    display: block;
    margin-top: 10px;
    font-style: italic;
    font-weight: 640;
    font-size: 0.62em;
    letter-spacing: -0.01em;
    color: var(--ink-soft);
  }
  h1 .alive em {
    font-style: italic;
    color: var(--coral);
    position: relative;
    white-space: nowrap;
  }
  h1 .alive em svg { position: absolute; left: -2%; bottom: -0.28em; width: 104%; height: 0.42em; overflow: visible; }
  h1 .alive em svg path { fill: none; stroke: var(--coral); stroke-width: 3.4; stroke-linecap: round; opacity: 0.62; }
  /* The mission line is long (2026-08-21): nowrap + the one-line squiggle CLIPPED it at phone
     widths. Below 640px the em wraps like text and wears a wavy underline instead of the svg. */
  @media (max-width: 640px) {
    h1 .alive em { white-space: normal; }
    h1 .alive em svg { display: none; }
    h1 .alive em {
      text-decoration: underline wavy var(--coral);
      text-decoration-thickness: 2px;
      text-underline-offset: 6px;
    }
  }

  .hero-copy {
    max-width: 620px;
    margin: 26px auto 0;
    color: var(--muted);
    font-size: clamp(1.04rem, 1.6vw, 1.22rem);
    line-height: 1.62;
  }
  .hero-copy strong { color: var(--ink); font-weight: 700; }
  .hero-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 13px 20px; margin-top: 32px; }
  /* ONE DOMINANT CTA. Two equally-weighted buttons split the eye and cost
     conversion — the second ask is a quiet text link so the primary is the only
     thing that reads as "the button". */
  .quiet-link {
    font-size: 15px; font-weight: 600; color: var(--muted);
    text-decoration: none; border-bottom: 1px solid var(--rule);
    padding-bottom: 2px; transition: color .15s ease, border-color .15s ease;
  }
  .quiet-link:hover { color: var(--ink); border-color: var(--ink); }
  .quiet-link.paper-link { color: rgba(255,255,255,.72); border-color: rgba(255,255,255,.28); }
  .quiet-link.paper-link:hover { color: #fff; border-color: #fff; }
  .quiet-link:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
  .hero-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 9px 22px;
    margin-top: 26px;
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 500;
  }
  .hero-meta span { display: inline-flex; align-items: center; gap: 7px; }
  .hero-meta i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }

  /* hero stage */
  .hero-stage { position: relative; margin-top: 64px; padding-bottom: 26px; }
  .stage-grid {
    display: grid;
    grid-template-columns: 308px minmax(0, 1fr);
    gap: 34px;
    align-items: center;
  }
  .stage-grid > * { min-width: 0; }
  .demo-stage, .demo-rail { min-width: 0; }
  .stage-note { position: relative; }
  .note-card {
    position: relative;
    padding: 26px 24px 22px;
    background: #fffef9;
    border: 1px solid var(--rule);
    border-radius: 4px;
    box-shadow: var(--shadow-card);
    transform: rotate(-1.6deg);
    background-image: repeating-linear-gradient(180deg, transparent 0, transparent 27px, rgba(12, 142, 154, 0.14) 27px, rgba(12, 142, 154, 0.14) 28px);
  }
  .note-card::before {
    content: "";
    position: absolute;
    top: -12px; left: 50%;
    width: 92px; height: 26px;
    transform: translateX(-50%) rotate(1.8deg);
    background: rgba(200, 134, 13, 0.22);
    border-left: 1px solid rgba(200, 134, 13, 0.16);
    border-right: 1px solid rgba(200, 134, 13, 0.16);
  }
  .note-card .note-kicker {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 8px;
  }
  .note-card .note-text { font-family: var(--hand); font-size: 1.62rem; line-height: 1.22; color: #232017; }
  .stage-annot {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    margin-left: 8px;
    font-family: var(--hand);
    font-size: 1.34rem;
    color: var(--coral);
    transform: rotate(-2deg);
  }
  .stage-annot svg { width: 52px; height: 30px; flex: 0 0 auto; }
  .stage-annot svg path { fill: none; stroke: var(--coral); stroke-width: 2.6; stroke-linecap: round; }

  .window {
    position: relative;
    border-radius: 8px;
    background: var(--night);
    border: 1px solid rgba(12, 10, 8, 0.6);
    box-shadow: var(--shadow-window);
    overflow: hidden;
  }
  .window-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 14px;
    background: #1b1e27;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    color: rgba(247, 243, 234, 0.9);
    font-size: 0.83rem;
    font-weight: 600;
  }
  .window-bar .live {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }
  .window-bar .live .t {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .window-bar .live i {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.55);
    animation: pulse 2.2s ease-out infinite;
    flex: 0 0 auto;
  }
  @keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.55); }
    70% { box-shadow: 0 0 0 9px rgba(74, 222, 128, 0); }
    100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
  }
  .window-bar a { color: rgba(247, 243, 234, 0.72); text-decoration: none; font-weight: 700; white-space: nowrap; flex: 0 0 auto; }
  .window-bar a:hover { color: #fff; }
  .stage {
    position: relative;
    aspect-ratio: 16 / 9.6;
    background: #101317;
  }
  .stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: #101317; }
  .stage.locked iframe { pointer-events: none; }
  .stage-cover {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 18px;
    background: linear-gradient(180deg, rgba(16, 19, 23, 0) 55%, rgba(16, 19, 23, 0.42) 100%);
    border: 0;
    cursor: pointer;
    transition: opacity 200ms ease;
    font-family: var(--sans);
  }
  .stage-cover .play-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 7px;
    background: var(--paper);
    color: var(--ink);
    font-size: 0.95rem;
    font-weight: 800;
    box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.6);
    transition: transform 150ms ease;
  }
  .stage-cover:hover .play-pill { transform: translateY(-2px); }
  .stage-cover .play-pill svg { width: 13px; height: 13px; }
  .stage-release {
    position: absolute;
    top: 10px; right: 10px;
    z-index: 4;
    display: none;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid rgba(247, 243, 234, 0.34);
    border-radius: 7px;
    background: rgba(16, 19, 23, 0.66);
    color: rgba(247, 243, 234, 0.92);
    font-family: var(--sans);
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  .stage.unlocked .stage-cover { opacity: 0; pointer-events: none; }
  .stage.unlocked .stage-release { display: inline-flex; }
  .stage-poster { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: cover; transition: opacity 420ms ease; }
  .stage.booted .stage-poster { opacity: 0; pointer-events: none; }
  .stage-caption {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin-top: 14px;
    color: var(--muted);
    font-size: 0.88rem;
  }
  .stage-caption b { color: var(--ink); font-weight: 700; }
  .chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 10px;
    border-radius: 6px;
    border: 1px solid var(--rule-strong);
    background: var(--card);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-soft);
  }
  .chip i { width: 8px; height: 8px; border-radius: 2px; background: var(--lime); }
  .chip.cyan i { background: var(--cyan); }
  .chip.gold i { background: var(--gold); }
  .chip.violet i { background: var(--violet); }
  .chip.coral i { background: var(--coral); }

  /* ---------------- ticker ---------------- */
  .ticker {
    border-top: 1.5px solid var(--ink);
    border-bottom: 1.5px solid var(--ink);
    background: var(--card);
    overflow: hidden;
    padding: 15px 0;
  }
  .ticker-track {
    display: flex;
    gap: 0;
    width: max-content;
    animation: ticker 46s linear infinite;
  }
  .ticker:hover .ticker-track { animation-play-state: paused; }
  @keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  .ticker-set { display: flex; align-items: center; width: max-content; flex: 0 0 auto; }
  .tick {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 0 30px;
    font-size: 0.98rem;
    color: var(--ink-soft);
    white-space: nowrap;
  }
  .tick b { font-weight: 700; color: var(--ink); }
  .tick .arrow { color: var(--coral); font-weight: 800; }
  .tick-dot { width: 7px; height: 7px; border-radius: 2px; flex: 0 0 auto; }

  /* ---------------- sections ---------------- */
  .section { padding: clamp(78px, 9vw, 128px) 0; position: relative; }
  .section.deep { background: var(--paper-deep); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
  .sec-head { max-width: 760px; margin-bottom: clamp(40px, 5vw, 64px); }
  .sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
  .kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 16px;
  }
  .kicker i { width: 9px; height: 9px; border-radius: 2px; background: var(--gold); }
  .kicker.lime i { background: var(--lime); }
  .kicker.cyan i { background: var(--cyan); }
  .kicker.violet i { background: var(--violet); }
  .kicker.coral i { background: var(--coral); }
  h2 {
    font-family: var(--serif);
    font-size: clamp(2rem, 4.4vw, 3.4rem);
    font-weight: 900;
    line-height: 1.04;
    letter-spacing: -0.018em;
    font-variation-settings: "opsz" 90;
  }
  h2 em { font-style: italic; font-weight: 640; }
  .sec-sub { margin-top: 18px; color: var(--muted); font-size: 1.06rem; line-height: 1.66; max-width: 660px; }
  .sec-head.center .sec-sub { margin-left: auto; margin-right: auto; }
  .sec-sub strong { color: var(--ink); }

  /* ---------------- how it works ---------------- */
  .steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .step {
    position: relative;
    padding: 26px 24px 28px;
    background: var(--card);
    border: 1.5px solid var(--rule);
    border-radius: 8px;
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  .step-num {
    font-family: var(--serif);
    font-style: italic;
    font-size: 2.5rem;
    font-weight: 640;
    line-height: 1;
    color: var(--gold);
  }
  .step:nth-child(2) .step-num { color: var(--cyan); }
  .step:nth-child(3) .step-num { color: var(--lime); }
  .step h3 { font-family: var(--serif); font-size: 1.42rem; font-weight: 900; letter-spacing: -0.01em; line-height: 1.12; }
  .step > p { color: var(--muted); font-size: 0.97rem; line-height: 1.6; }

  .vig { margin-top: auto; }
  .vig-note { padding: 16px 16px 14px; background: #fffef9; border: 1px solid var(--rule); border-radius: 6px; }
  .vig-note .t { font-weight: 700; font-size: 0.92rem; margin-bottom: 6px; }
  .vig-note .l { font-family: var(--hand); font-size: 1.28rem; line-height: 1.3; color: #2c2820; }
  .vig-chat { display: grid; gap: 9px; }
  .bubble {
    justify-self: flex-end;
    max-width: 92%;
    padding: 11px 14px;
    border-radius: 8px;
    background: var(--ink);
    color: var(--paper);
    font-size: 0.92rem;
    line-height: 1.45;
  }
  .bubble.reply {
    justify-self: flex-start;
    background: transparent;
    border: 1px solid var(--rule-strong);
    color: var(--ink-soft);
  }
  .bubble.reply .routing { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
  .bubble.reply .routing span {
    padding: 3px 8px;
    border-radius: 5px;
    background: rgba(12, 142, 154, 0.12);
    color: var(--cyan);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.04em;
  }
  .vig-app { border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; background: #fffef9; }
  .vig-app .bar { display: flex; justify-content: space-between; align-items: center; padding: 9px 13px; background: var(--paper-deep); font-size: 0.8rem; font-weight: 800; }
  .vig-app .bar span:last-child { color: var(--lime); }
  .vig-app ul { list-style: none; margin: 0; padding: 6px 13px 11px; }
  .vig-app li { display: flex; align-items: center; gap: 9px; padding: 6px 0; font-size: 0.9rem; color: var(--ink-soft); border-bottom: 1px dashed var(--rule); }
  .vig-app li:last-child { border-bottom: 0; }
  .vig-app li i {
    width: 17px; height: 17px;
    border-radius: 5px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-style: normal;
    font-size: 11px;
    font-weight: 900;
    background: var(--lime);
    color: #fff;
  }
  .vig-app li.todo i { background: transparent; border: 1.5px solid var(--rule-strong); }
  .vig-app li.todo { color: var(--muted); }
  .share-pill {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 10px;
    padding: 9px 12px;
    border-radius: 6px;
    background: rgba(91, 75, 224, 0.1);
    color: var(--violet);
    font-size: 0.85rem;
    font-weight: 700;
  }

  /* ---------------- live demos ---------------- */
  .demo-row {
    display: grid;
    grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr);
    gap: clamp(26px, 4vw, 52px);
    align-items: center;
    padding: clamp(40px, 5vw, 64px) 0;
  }
  .demo-row + .demo-row { border-top: 1px dashed var(--rule-strong); }
  .demo-row.flip .demo-stage { order: 2; }
  .demo-row.flip .demo-rail { order: 1; }
  .demo-rail .note-card { transform: rotate(1.3deg); margin-bottom: 26px; max-width: 360px; }
  .demo-rail .note-card .note-text { font-size: 1.42rem; }
  .demo-rail h3 { font-family: var(--serif); font-size: clamp(1.5rem, 2.3vw, 2rem); font-weight: 900; letter-spacing: -0.014em; line-height: 1.08; margin: 14px 0 12px; }
  .demo-rail > p { color: var(--muted); font-size: 0.99rem; line-height: 1.62; }
  .demo-facts { list-style: none; margin: 18px 0 24px; padding: 0; display: grid; gap: 9px; }
  .demo-facts li { display: grid; grid-template-columns: 14px 1fr; gap: 10px; align-items: baseline; font-size: 0.94rem; color: var(--ink-soft); }
  .demo-facts li::before { content: "→"; color: var(--gold); font-weight: 800; }
  .demo-row.voxel .demo-facts li::before { color: var(--lime); }
  .demo-row.runner .demo-facts li::before { color: var(--coral); }
  .demo-row.site .demo-facts li::before { color: var(--cyan); }
  .demo-row.game .demo-facts li::before { color: var(--violet); }
  .demo-row.pool .demo-facts li::before { color: var(--gold); }
  .demo-row.lifeapp .demo-facts li::before { color: var(--lime); }
  .demo-actions { display: flex; flex-wrap: wrap; gap: 11px; }

  /* ---------------- mini apps ---------------- */
  .apps-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .app-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 22px 20px;
    background: var(--card);
    border: 1.5px solid var(--rule);
    border-radius: 8px;
    box-shadow: var(--shadow-card);
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
  }
  .app-card:hover { transform: translateY(-3px); border-color: var(--rule-strong); box-shadow: 0 2px 3px rgba(24,21,17,.05), 0 22px 44px -22px rgba(24, 21, 17, 0.34); }
  .app-card .from { font-family: var(--hand); font-size: 1.3rem; line-height: 1.25; color: #2c2820; }
  .app-card .from::before { content: "“"; color: var(--muted); }
  .app-card .from::after { content: "”"; color: var(--muted); }
  .app-ui { border: 1px solid var(--rule); border-radius: 6px; background: #fffef9; padding: 13px 14px; font-size: 0.87rem; }
  .app-ui .row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5.5px 0; color: var(--ink-soft); }
  .app-ui .row + .row { border-top: 1px dashed var(--rule); }
  .app-ui .row b { font-weight: 700; color: var(--ink); }
  .app-ui .num { font-variant-numeric: tabular-nums; font-weight: 700; }
  .app-ui .pos { color: var(--lime); }
  .app-ui .neg { color: var(--coral); }
  .meter { position: relative; height: 7px; border-radius: 4px; background: var(--paper-deep); overflow: hidden; margin-top: 9px; }
  .meter span { position: absolute; inset: 0 auto 0 0; border-radius: 4px; background: var(--cyan); }
  .dots { display: flex; gap: 4px; }
  .dots i { width: 11px; height: 11px; border-radius: 3px; background: var(--paper-deep); }
  .dots i.on { background: var(--lime); }
  .dots i.today { background: var(--gold); }
  .app-card h3 { font-family: var(--serif); font-size: 1.22rem; font-weight: 900; letter-spacing: -0.01em; }
  .app-card .what { color: var(--muted); font-size: 0.92rem; line-height: 1.55; }
  .app-card .make {
    margin-top: auto;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--cyan);
    text-decoration: none;
    border-bottom: 2px solid rgba(12, 142, 154, 0.3);
    padding-bottom: 2px;
  }
  .app-card .make:hover { border-bottom-color: var(--cyan); }

  /* ---------------- community ---------------- */
  .feed-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
  .feed { display: grid; gap: 18px; }
  .post {
    border: 1.5px solid var(--rule);
    border-radius: 8px;
    background: var(--card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
  }
  .post-top { display: flex; align-items: center; gap: 11px; padding: 13px 16px; }
  .avatar {
    width: 34px; height: 34px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.92rem;
    color: #fff;
    background: var(--violet);
    flex: 0 0 auto;
  }
  .post:nth-child(2) .avatar { background: var(--cyan); }
  .post-top .who { min-width: 0; }
  .post-top .who b { display: block; font-size: 0.93rem; }
  .post-top .who span { display: block; color: var(--muted); font-size: 0.8rem; }
  .post-top .chip { margin-left: auto; }
  .post-media { position: relative; display: block; }
  .post-media img { width: 100%; aspect-ratio: 16 / 9.4; object-fit: cover; }
  .post-media .open-pill {
    position: absolute;
    left: 14px; bottom: 14px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 40px;
    padding: 0 15px;
    border-radius: 7px;
    background: var(--paper);
    color: var(--ink);
    font-size: 0.88rem;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 12px 26px -8px rgba(0, 0, 0, 0.55);
    transition: transform 140ms ease;
  }
  .post-media .open-pill:hover { transform: translateY(-2px); }
  .post-media .open-pill svg { width: 12px; height: 12px; }
  .post-foot { display: flex; align-items: center; gap: 18px; padding: 12px 16px; color: var(--muted); font-size: 0.86rem; font-weight: 600; }
  .post-foot span { display: inline-flex; align-items: center; gap: 6px; }
  .feed-rail h3 { font-family: var(--serif); font-size: clamp(1.5rem, 2.3vw, 2rem); font-weight: 900; line-height: 1.1; letter-spacing: -0.014em; margin-bottom: 14px; }
  .feed-rail > p { color: var(--muted); font-size: 0.99rem; line-height: 1.64; }
  .feed-points { list-style: none; margin: 20px 0 26px; padding: 0; display: grid; gap: 13px; }
  .feed-points li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; font-size: 0.95rem; color: var(--ink-soft); line-height: 1.5; }
  .feed-points li i {
    width: 24px; height: 24px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-style: normal;
    font-size: 12px;
    font-weight: 900;
    color: #fff;
    background: var(--violet);
    margin-top: 1px;
  }
  .feed-points li:nth-child(2) i { background: var(--cyan); }
  .feed-points li:nth-child(3) i { background: var(--gold); }

  /* ---------------- final cta ---------------- */
  .cta {
    background: var(--night);
    color: var(--paper);
    padding: clamp(80px, 9vw, 130px) 0;
    position: relative;
    overflow: hidden;
  }
  .cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(180deg, transparent 0, transparent 43px, rgba(247, 243, 234, 0.05) 43px, rgba(247, 243, 234, 0.05) 44px);
    pointer-events: none;
  }
  .cta-inner { position: relative; text-align: center; }
  .cta .tiles { display: inline-flex; gap: 5px; margin-bottom: 26px; }
  .cta .tiles i { width: 12px; height: 12px; border-radius: 3px; }
  .cta .tiles i:nth-child(1) { background: var(--lime); }
  .cta .tiles i:nth-child(2) { background: var(--cyan); }
  .cta .tiles i:nth-child(3) { background: var(--coral); }
  .cta .tiles i:nth-child(4) { background: var(--gold); }
  .cta .tiles i:nth-child(5) { background: var(--violet); }
  .cta h2 { color: var(--paper); max-width: 17ch; margin: 0 auto; }
  .cta h2 em { color: #f0c87e; }
  .cta p { max-width: 540px; margin: 20px auto 0; color: rgba(247, 243, 234, 0.66); font-size: 1.05rem; line-height: 1.62; }
  .cta .hero-actions { margin-top: 34px; }
  .cta .mailto-line { margin-top: 26px; font-size: 0.9rem; color: rgba(247, 243, 234, 0.5); }
  .cta .mailto-line a { color: rgba(247, 243, 234, 0.82); font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(247, 243, 234, 0.3); }
  .cta .mailto-line a:hover { color: #fff; }

  /* ---------------- footer ---------------- */
  footer { background: #0e1015; color: rgba(247, 243, 234, 0.62); padding: 58px 0 34px; font-size: 0.92rem; }
  .foot-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 36px; }
  .foot-brand .brand { color: var(--paper); margin-bottom: 14px; }
  .foot-brand p { max-width: 300px; line-height: 1.6; color: rgba(247, 243, 234, 0.5); }
  .foot-col strong { display: block; color: var(--paper); font-size: 0.82rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 14px; }
  .foot-col a { display: block; padding: 5px 0; color: rgba(247, 243, 234, 0.62); text-decoration: none; }
  .foot-col a:hover { color: #fff; }
  .foot-base {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 44px;
    padding-top: 22px;
    border-top: 1px solid rgba(247, 243, 234, 0.12);
    font-size: 0.84rem;
    color: rgba(247, 243, 234, 0.42);
  }

  /* ---------------- reveal ---------------- */
  .reveal { opacity: 0; transform: translateY(22px); transition: opacity 640ms ease, transform 640ms ease; }
  .reveal.in { opacity: 1; transform: none; }

  /* ---------------- responsive ---------------- */
  @media (max-width: 1020px) {
    .stage-grid { grid-template-columns: 1fr; gap: 26px; }
    .stage-note { display: flex; align-items: flex-end; gap: 18px; max-width: 560px; }
    .note-card { flex: 1; }
    .demo-row, .demo-row.flip { grid-template-columns: 1fr; }
    .demo-row.flip .demo-stage { order: 1; }
    .demo-row.flip .demo-rail { order: 2; }
    .demo-rail .note-card { max-width: 420px; }
    .steps { grid-template-columns: 1fr; max-width: 560px; }
    .apps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .feed-layout { grid-template-columns: 1fr; }
    .feed-rail { max-width: 620px; }
    .foot-grid { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 720px) {
    body { font-size: 16px; }
    .menu-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 42px;
      padding: 0 14px;
      border: 1.5px solid var(--ink);
      border-radius: 7px;
      background: transparent;
      color: var(--ink);
      font: inherit;
      font-weight: 800;
      cursor: pointer;
    }
    .nav-links {
      position: fixed;
      top: 66px;
      left: 18px; right: 18px;
      flex-direction: column;
      align-items: stretch;
      gap: 4px;
      padding: 12px;
      background: var(--card);
      border: 1.5px solid var(--rule-strong);
      border-radius: 8px;
      box-shadow: 0 24px 50px -18px rgba(24, 21, 17, 0.4);
      display: none;
    }
    .nav-links.open { display: flex; }
    .nav-links a:not(.btn) { padding: 12px 10px; border-bottom: 0; font-size: 1rem; }
    .nav-links .btn { margin-top: 6px; }
    .hero { padding-top: 118px; }
    .hero::before { display: none; }
    .hero-actions .btn { flex: 1 1 100%; }
    .hero-actions .quiet-link { flex: 1 1 100%; text-align: center; border-bottom: 0; }
    .stage { aspect-ratio: 4 / 4.6; }
    .stage-note { flex-direction: column; align-items: flex-start; }
    .stage-annot { transform: rotate(0); margin-left: 2px; }
    .apps-grid { grid-template-columns: 1fr; }
    .demo-actions .btn { flex: 1 1 auto; }
    .foot-grid { grid-template-columns: 1fr; gap: 26px; }
    .cta .hero-actions .btn { flex: 1 1 100%; }
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .ticker-track { animation: none; }
    .reveal { opacity: 1; transform: none; transition: none; }
    .window-bar .live i { animation: none; }
    *, *::before, *::after { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
  }

/* ══════════════════════════════════════════════════════════════════════════
   PATHWAYS — the "where next" chooser that replaced five stacked sections.
   The landing page used to say everything at once; these four cards say the
   NAMES of the things and hand the reader a door instead of five more screens
   of prose.
   ══════════════════════════════════════════════════════════════════════════ */
.pathways {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 18px;
  margin-top: 38px;
}
.pathway {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 22px 22px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 18px;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-card);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
  overflow: hidden;
}
.pathway::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--accent, var(--gold));
  opacity: .85;
}
.pathway:hover, .pathway:focus-visible {
  transform: translateY(-4px);
  border-color: var(--rule-strong);
  box-shadow: 0 2px 4px rgba(24,21,17,.06), 0 26px 48px -24px rgba(24,21,17,.42);
}
.pathway .p-emoji { font-size: 1.7rem; line-height: 1; }
.pathway h3 {
  font-family: var(--serif);
  font-size: 1.22rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.pathway p { color: var(--muted); font-size: .95rem; line-height: 1.5; }
.pathway .p-go {
  margin-top: auto;
  padding-top: 8px;
  font-weight: 600;
  font-size: .92rem;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.pathway:hover .p-go { color: var(--ink); }
.pathway .p-go span { transition: transform 180ms ease; }
.pathway:hover .p-go span { transform: translateX(4px); }

/* ── sub-page header ─────────────────────────────────────────────────────────
   ⛔ A LABEL, NOT A HEADLINE. The first cut gave each sub-page a big serif h1 —
   which then sat directly above the moved section's own editorial h2 saying the
   SAME sentence twice. It also inherited the GLOBAL `h1` rule further up this
   file (`margin: 30px auto 0; max-width: 13ch`), written for the hero, so it
   centred itself while everything around it stayed left. This is a quiet
   breadcrumb that keeps one valid <h1> per page and lets the section headline
   do the talking. Both margin and max-width are restated to beat that rule. */
.subhero { padding: 122px 0 0; }
.subhero .backlink {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  color: var(--muted);
  font-weight: 600;
  font-size: .93rem;
}
.subhero .backlink:hover { color: var(--ink); }
.subhero h1 {
  margin: 14px 0 0;
  max-width: none;
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--gold);
  font-variation-settings: normal;
}

/* ── breathing room: the page was wall-to-wall before ────────────────────── */
.section.airy { padding-top: 84px; padding-bottom: 84px; }
@media (max-width: 720px) { .section.airy { padding-top: 58px; padding-bottom: 58px; } }