/*
 * The public landing page (layouts/landing). Plain CSS, not Tailwind: the
 * page is a marketing surface with its own display type and its own weights
 * (700/800 headlines), which the app's two-weight Typography contract in
 * tailwind/application.css deliberately forbids inside the product.
 *
 * Propshaft's `stylesheet_link_tag :app` pulls EVERY css file under
 * app/assets into the app layout too, so every rule below is nested under
 * body.lp and is inert anywhere else. Keep it that way.
 *
 * Sample figures live in LandingHelper; the colours are the app's own
 * tokens (ink, indigo, canvas, the chart palette) so landing and dashboard
 * read as one product.
 */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/assets/BricolageGrotesqueVariable-latin-78692770.woff2") format("woff2");
  font-weight: 500 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/JetBrainsMonoVariable-latin-68dbce1c.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}

/* The app's own Inter, declared here too because the landing layout does
   not load the Tailwind build that declares it. */
@font-face {
  font-family: "Inter";
  src: url("/assets/InterVariable-884c49a1.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@keyframes lp-rise { from { transform: translateY(14px); opacity: .001; } to { transform: none; opacity: 1; } }
@keyframes lp-draw { to { stroke-dashoffset: 0; } }

html:has(> body.lp) { scroll-behavior: smooth; }

body.lp {

  & {
    --ink: #0F172A;
    --ink-raised: #1E293B;
    --ink-hairline: #26344B;
    --ink-text: #E2E8F0;
    --ink-muted: #94A3B8;
    --canvas: #F5F6F8;
    --surface: #FFFFFF;
    --surface-2: #F8FAFC;
    --hairline: #E2E8F0;
    --text: #0F172A;
    --text-muted: #475569;
    --text-faint: #64748B;
    --accent: #4F46E5;
    --accent-strong: #4338CA;
    --accent-soft: #EEF2FF;
    --accent-on-ink: #818CF8;
    --up: #15803D;
    --down: #B91C1C;
    --up-on-ink: #4ADE80;
    --down-on-ink: #F87171;
    --lp-c-invest: #4F46E5;
    --lp-c-cash: #0D9488;
    --lp-c-crypto: #D97706;
    --lp-c-re: #65A30D;
    --lp-c-vehicle: #3F6212;
    --lp-c-debt: #DC2626;
    --warn-bg: #FFFBEB; --warn-text: #B45309;
    --pos-bg: #F0FDF4;  --pos-text: #15803D;
    --neg-bg: #FEF2F2;
    --neu-bg: #F1F5F9;  --neu-text: #475569;
    --shadow-card: 0 1px 2px rgb(15 23 42 / .04), 0 1px 3px rgb(15 23 42 / .06);
    --shadow-raised: 0 4px 6px -1px rgb(15 23 42 / .08), 0 10px 20px -6px rgb(15 23 42 / .12);
    --shadow-float: 0 24px 60px -20px rgb(2 6 23 / .7), 0 0 0 1px rgb(255 255 255 / .06) inset;
    --f-display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
    --f-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
    --gutter: clamp(16px, 4vw, 40px);
    --measure: 1160px;
  }

  &, & *, & *::before, & *::after { box-sizing: border-box; }
  & {
    margin: 0;
    min-height: 100vh;
    background: var(--canvas);
    color: var(--text);
    font: 16px/1.6 var(--f-body);
    -webkit-font-smoothing: antialiased;
  }
  a { color: inherit; }
  h1, h2, h3 { font-family: var(--f-display); margin: 0; text-wrap: balance; letter-spacing: -0.02em; }
  p { margin: 0; }
  .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
  .mono { font-family: var(--f-mono); font-size: 0.8125rem; letter-spacing: -0.01em; }
  .wrap { width: 100%; max-width: var(--measure); margin-inline: auto; padding-inline: var(--gutter); }
  .eyebrow {
    font: 600 0.75rem/1 var(--f-body);
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--accent);
  }
  :focus-visible { outline: 2px solid var(--accent-on-ink); outline-offset: 2px; border-radius: 4px; }
  .lp-light :focus-visible { outline-color: var(--accent); }

  /* ---------- Buttons ---------- */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font: 600 0.9375rem/1 var(--f-body);
    padding: 12px 18px; border-radius: 10px; border: 1px solid transparent;
    text-decoration: none; cursor: pointer;
    transition: background .15s, border-color .15s, transform .15s;
  }
  .btn:active { transform: translateY(1px); }
  .btn { white-space: nowrap; }
  .btn-primary { background: var(--accent); color: #fff; }
  .btn-primary:hover { background: var(--accent-strong); }
  .btn-ghost-ink { background: transparent; color: var(--ink-text); border-color: var(--ink-hairline); }
  .btn-ghost-ink:hover { border-color: var(--ink-muted); }
  .btn-sm { padding: 9px 14px; font-size: 0.875rem; }

  /* ---------- Hero band ---------- */
  .ink {
    background: var(--ink);
    color: var(--ink-text);
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }
  /* A ledger grid, faint, fading out downward: the subject's own paper. */
  .ink::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background-image:
      linear-gradient(to right, rgb(148 163 184 / .06) 1px, transparent 1px),
      linear-gradient(to bottom, rgb(148 163 184 / .06) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 80% 70% at 60% 30%, #000 30%, transparent 80%);
  }
  .ink::after {
    content: ""; position: absolute; z-index: -1;
    width: 720px; height: 720px; right: -160px; top: 180px;
    background: radial-gradient(circle, rgb(79 70 229 / .28), transparent 62%);
    pointer-events: none;
  }

  .topbar {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding-block: 20px;
  }
  .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
  .brand svg { width: 32px; height: 32px; flex: none; }
  .brand span { font: 700 1.125rem/1 var(--f-display); letter-spacing: -0.02em; color: #F8FAFC; }
  .brand span b { color: var(--accent-on-ink); font-weight: 700; }
  .toplinks { display: flex; align-items: center; gap: 28px; }
  .toplinks a:not(.btn) { color: var(--ink-muted); text-decoration: none; font-size: 0.9375rem; font-weight: 500; }
  .toplinks a:not(.btn):hover { color: #fff; }

  .hero {
    display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: clamp(32px, 6vw, 88px); align-items: center;
    padding-block: clamp(40px, 7vw, 88px) 56px;
  }
  .hero .eyebrow { color: var(--accent-on-ink); }
  .hero h1 {
    margin-top: 20px;
    font-size: clamp(2.5rem, 5.6vw, 4.5rem);
    line-height: 0.98; font-weight: 800; letter-spacing: -0.035em;
    color: #F8FAFC;
  }
  .hero h1 em { font-style: normal; color: var(--accent-on-ink); }
  .hero .lede { margin-top: 24px; max-width: 34em; font-size: 1.125rem; color: var(--ink-muted); }
  .hero .lede strong { color: var(--ink-text); font-weight: 500; }
  .assurances { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 28px 0 0; padding: 0; list-style: none; }
  .assurances li { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; color: var(--ink-text); }
  .assurances svg { width: 16px; height: 16px; color: var(--up-on-ink); flex: none; }

  /* Sign-in card: the one thing raised in the hero. */
  .signin {
    background: var(--surface); color: var(--text);
    border-radius: 18px; padding: 28px;
    box-shadow: var(--shadow-float);
    width: 100%; max-width: 400px; justify-self: end;
  }
  .signin h2 { font-size: 1.5rem; font-weight: 700; }
  .signin .sub { margin-top: 4px; color: var(--text-muted); font-size: 0.9375rem; }
  .field { display: grid; gap: 6px; margin-top: 18px; }
  .field-row { display: flex; justify-content: space-between; align-items: baseline; }
  .field label { font-size: 0.8125rem; font-weight: 600; color: var(--text); }
  .field a { font-size: 0.8125rem; color: var(--accent); text-decoration: none; font-weight: 500; }
  .field a:hover { text-decoration: underline; }
  /* width, not the grid's stretch: Rails derives size="72" from maxlength. */
  .field input {
    width: 100%; min-width: 0;
    font: 400 0.9375rem/1.4 var(--f-body); color: var(--text);
    padding: 11px 12px; border-radius: 10px;
    border: 1px solid var(--hairline); background: var(--surface-2);
    transition: border-color .15s, background .15s, box-shadow .15s;
  }
  .field input:focus { outline: none; border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px var(--accent-soft); }
  .signin .btn { width: 100%; margin-top: 22px; padding-block: 13px; }
  .signin .invite {
    margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hairline);
    font-size: 0.8125rem; color: var(--text-faint); text-align: center;
  }
  .signin .invite a { color: var(--text); font-weight: 600; }

  /* ---------- The stage: many balances converge into one ---------- */
  .stage-head {
    display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap;
    padding-top: 28px; border-top: 1px solid var(--ink-hairline);
  }
  .stage-head p { color: var(--ink-muted); font-size: 0.9375rem; }
  .stage-head p strong { color: var(--ink-text); font-weight: 600; }
  .sample-tag {
    font: 500 0.6875rem/1 var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--ink-muted); border: 1px dashed var(--ink-hairline); padding: 6px 9px; border-radius: 6px;
  }

  .stage {
    position: relative;
    display: grid; grid-template-columns: minmax(0, 1fr) clamp(64px, 11vw, 150px) minmax(0, 1.08fr);
    align-items: center;
    padding-block: 28px 72px;
  }
  .wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
  .wires path { fill: none; stroke: var(--ink-hairline); stroke-width: 1.5; transition: stroke .2s, stroke-width .2s; }
  .wires path.on { stroke: var(--accent-on-ink); stroke-width: 2; }
  .wires circle { fill: var(--accent-on-ink); }
  /* The wires' stand-in once the stage stacks to one column. */
  .adds-up {
    display: none; margin: 12px 0 0; text-align: center;
    font: 500 0.75rem/1 var(--f-mono); color: var(--ink-muted); letter-spacing: 0.04em;
  }

  .sources { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; position: relative; }
  .src {
    display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 12px;
    padding: 10px 14px 10px 10px;
    background: rgb(30 41 59 / .72);
    border: 1px solid var(--ink-hairline); border-radius: 12px;
    backdrop-filter: blur(4px);
    transition: border-color .2s, background .2s;
    cursor: default;
  }
  .src:hover, .src.on { border-color: var(--accent-on-ink); background: var(--ink-raised); }
  .src .mark {
    width: 36px; height: 36px; border-radius: 9px;
    display: grid; place-items: center;
    font: 700 0.75rem/1 var(--f-mono); color: #fff;
  }
  .src .who { min-width: 0; }
  .src .who b { display: block; font-weight: 600; font-size: 0.9375rem; color: #F8FAFC; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .src .who small { display: block; font: 400 0.75rem/1.3 var(--f-mono); color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .src .amt { text-align: right; }
  .src .amt b { display: block; font: 500 0.875rem/1.3 var(--f-mono); color: var(--ink-text); }
  .src .amt small { display: block; font: 400 0.6875rem/1.3 var(--f-mono); color: var(--ink-muted); }
  .src.debt .amt b { color: var(--down-on-ink); }

  .nw {
    position: relative;
    background: linear-gradient(180deg, #1B2640, #151E33);
    border: 1px solid #33425E; border-radius: 20px;
    padding: clamp(20px, 3vw, 32px);
    box-shadow: var(--shadow-float);
  }
  .nw-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
  .nw-label { font-size: 0.8125rem; font-weight: 600; color: var(--ink-muted); letter-spacing: 0.02em; }
  .toggle { display: inline-flex; padding: 3px; border-radius: 9px; background: var(--ink); border: 1px solid var(--ink-hairline); }
  .toggle button {
    font: 600 0.75rem/1 var(--f-mono); color: var(--ink-muted);
    background: none; border: 0; padding: 7px 10px; border-radius: 6px; cursor: pointer;
  }
  .toggle button[aria-pressed="true"] { background: var(--ink-raised); color: #fff; box-shadow: 0 0 0 1px var(--ink-hairline); }
  .nw-figure {
    margin-top: 14px;
    font: 700 clamp(2.1rem, 4.6vw, 3.4rem)/1 var(--f-body);
    letter-spacing: -0.035em; color: #fff;
  }
  .nw-figure .ccy { font-size: 0.42em; font-weight: 600; letter-spacing: 0; color: var(--ink-muted); margin-right: 0.35em; vertical-align: 0.55em; }
  .nw-delta { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 0.875rem; color: var(--ink-muted); }
  .nw-delta .up { color: var(--up-on-ink); font-weight: 600; }
  .spark { display: block; width: 100%; height: auto; margin-top: 20px; overflow: visible; }
  .spark-axis { display: flex; justify-content: space-between; font: 400 0.6875rem/1 var(--f-mono); color: var(--ink-muted); margin-top: 6px; }
  .nw-split {
    margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--ink-hairline);
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  }
  .nw-split small { display: block; font-size: 0.75rem; color: var(--ink-muted); }
  .nw-split b { font: 500 0.9375rem/1.4 var(--f-mono); color: var(--ink-text); }
  .nw-rate { margin-top: 14px; font: 400 0.6875rem/1.4 var(--f-mono); color: var(--ink-muted); }

  /* ---------- Sources strip ---------- */
  .works-with {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 32px;
    padding-block: 28px; border-bottom: 1px solid var(--hairline); background: var(--surface);
  }
  .works-with span { font-size: 0.8125rem; color: var(--text-faint); }
  .works-with b { font: 600 1rem/1 var(--f-display); letter-spacing: -0.01em; color: var(--text-muted); }

  /* ---------- Sections ---------- */
  .block { padding-block: clamp(64px, 9vw, 112px); }
  .section-head { max-width: 44rem; }
  .section-head h2 { margin-top: 14px; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.05; font-weight: 800; letter-spacing: -0.03em; }
  .section-head p { margin-top: 16px; font-size: 1.125rem; color: var(--text-muted); max-width: 38em; }

  /* ---------- Bento ---------- */
  .bento {
    margin-top: 48px;
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px;
  }
  .tile {
    background: var(--surface);
    border: 1px solid var(--hairline); border-radius: 16px;
    padding: clamp(20px, 2.4vw, 28px);
    display: flex; flex-direction: column; gap: 14px;
    min-width: 0;
  }
  .tile h3 { font-size: 1.3125rem; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; }
  .tile > p { color: var(--text-muted); font-size: 0.9375rem; max-width: 36em; }
  .tile .demo { margin-top: auto; padding-top: 6px; }
  .span-4 { grid-column: span 4; }
  .span-3 { grid-column: span 3; }
  .span-2 { grid-column: span 2; }
  .tile.feature { background: var(--ink); border-color: var(--ink); color: var(--ink-text); }
  .tile.feature > p { color: var(--ink-muted); }
  .tile.feature h3 { color: #F8FAFC; }

  .legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 0.8125rem; color: var(--text-muted); }
  .legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
  .chart { display: block; width: 100%; height: auto; overflow: visible; }
  .chart text { font: 400 11px var(--f-mono); fill: var(--text-faint); }
  .chart .gridline { stroke: var(--hairline); stroke-width: 1; }
  .chart .zero { stroke: #94A3B8; stroke-width: 1; }

  .queue { display: grid; gap: 6px; }
  .qrow {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center;
    padding: 10px 12px; border: 1px solid var(--hairline); border-radius: 10px; background: var(--surface-2);
  }
  .qrow b { font-size: 0.875rem; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .qrow .mono { color: var(--text-faint); font-size: 0.75rem; }
  .pill {
    grid-row: span 2; align-self: center;
    font: 600 0.6875rem/1 var(--f-body); padding: 5px 8px; border-radius: 999px; white-space: nowrap;
  }
  .pill.pos { background: var(--pos-bg); color: var(--pos-text); }
  .pill.warn { background: var(--warn-bg); color: var(--warn-text); }
  .pill.neu { background: var(--neu-bg); color: var(--neu-text); }
  .pill.acc { background: var(--accent-soft); color: var(--accent-strong); }

  .pnl { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
  .pnl td { padding: 9px 0; border-bottom: 1px solid var(--ink-hairline); }
  .pnl td:last-child { text-align: right; font-family: var(--f-mono); font-size: 0.8125rem; }
  .pnl td small { color: var(--ink-muted); font-size: 0.75rem; }
  .pnl tr.total td { border-bottom: 0; font-weight: 600; color: #fff; padding-top: 12px; }
  .pnl .neg { color: var(--down-on-ink); }
  .pnl .pos { color: var(--up-on-ink); }
  .yield {
    display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  }
  .yield b { font: 700 2.5rem/1 var(--f-body); letter-spacing: -0.03em; color: #fff; }
  .yield span { color: var(--ink-muted); font-size: 0.875rem; }
  .re-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 28px; align-items: start; }
  .chips { display: grid; gap: 8px; }
  .chip {
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 10px; background: var(--ink-raised); border: 1px solid var(--ink-hairline);
    font-size: 0.8125rem;
  }
  .chip b { font-weight: 600; color: #F8FAFC; }
  .chip .due { font: 600 0.6875rem/1 var(--f-body); padding: 5px 8px; border-radius: 999px; white-space: nowrap; }
  .chip .due.soon { background: rgb(217 119 6 / .18); color: #FBBF24; }
  .chip .due.paid { background: rgb(74 222 128 / .14); color: var(--up-on-ink); }

  .flow-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .flow-figs small { display: block; font-size: 0.75rem; color: var(--text-faint); }
  .flow-figs b { font: 600 1rem/1.3 var(--f-mono); }
  .barstrip { display: flex; height: 12px; border-radius: 6px; overflow: hidden; margin-top: 14px; gap: 2px; }
  .barstrip span { display: block; height: 100%; }
  .rate-big { display: flex; align-items: baseline; gap: 10px; margin-top: 14px; }
  .rate-big b { font: 700 2.25rem/1 var(--f-body); letter-spacing: -0.03em; }
  .rate-big span { color: var(--text-muted); font-size: 0.875rem; }

  .alloc { display: grid; gap: 12px; }
  .alloc-row small { display: flex; justify-content: space-between; font-size: 0.8125rem; color: var(--text-muted); margin-bottom: 5px; }
  .alloc-row small b { color: var(--text); font-weight: 600; }
  .alloc-row small .num.over { color: var(--warn-text); font-weight: 600; }
  .track { position: relative; height: 8px; background: var(--neu-bg); border-radius: 4px; }
  .track .fill { position: absolute; inset: 0 auto 0 0; border-radius: 4px; }
  .track .target { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--text); border-radius: 1px; }
  .signal {
    margin-top: 14px; padding: 10px 12px; border-radius: 10px; font-size: 0.8125rem;
    background: var(--warn-bg); color: var(--warn-text);
  }

  .fi-meter { position: relative; height: 14px; border-radius: 7px; background: var(--neu-bg); overflow: hidden; margin-top: 12px; }
  .fi-meter span { position: absolute; inset: 0 auto 0 0; width: 32%; background: linear-gradient(90deg, var(--accent), #6366F1); border-radius: 7px; }
  .fi-ends { display: flex; justify-content: space-between; margin-top: 8px; font: 400 0.75rem/1.3 var(--f-mono); color: var(--text-faint); }
  .fine { font-size: 0.75rem; color: var(--text-faint); }

  .fxline {
    font-family: var(--f-mono); font-size: 0.8125rem; line-height: 1.5;
    background: var(--surface-2); border: 1px solid var(--hairline); border-radius: 10px;
    padding: 12px; display: grid; gap: 4px;
  }
  .fxline .k { color: var(--text-faint); }
  .fxline .v { color: var(--text); }
  .fxline .arrow { color: var(--accent); }

  /* ---------- How it works ---------- */
  .steps { margin-top: 48px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; counter-reset: step; }
  .step { position: relative; padding-top: 28px; border-top: 2px solid var(--text); }
  .step::before {
    counter-increment: step; content: counter(step);
    position: absolute; top: -15px; left: 0;
    width: 28px; height: 28px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--text); color: #fff; font: 700 0.8125rem/1 var(--f-mono);
  }
  .step h3 { font-size: 1.25rem; font-weight: 700; }
  .step p { margin-top: 10px; color: var(--text-muted); font-size: 0.9375rem; }
  .files { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 6px; }
  .files span {
    font: 400 0.75rem/1 var(--f-mono); padding: 7px 9px; border-radius: 6px;
    background: var(--surface); border: 1px solid var(--hairline); color: var(--text-muted);
  }

  /* ---------- Principles band ---------- */
  .principles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 48px; border-top: 1px solid var(--ink-hairline); }
  .principle { padding: 28px 24px 8px 0; }
  .principle + .principle { padding-left: 24px; border-left: 1px solid var(--ink-hairline); }
  .principle svg { width: 22px; height: 22px; color: var(--accent-on-ink); }
  .principle h3 { margin-top: 16px; font-size: 1.125rem; font-weight: 700; color: #F8FAFC; }
  .principle p { margin-top: 8px; color: var(--ink-muted); font-size: 0.9375rem; }
  .ink .section-head h2 { color: #F8FAFC; }
  .ink .section-head p { color: var(--ink-muted); }
  .ink .section-head .eyebrow { color: var(--accent-on-ink); }

  .closing {
    margin-top: clamp(64px, 9vw, 104px);
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 24px 48px;
    padding: clamp(28px, 4vw, 44px);
    border-radius: 20px; border: 1px solid #33425E;
    background: linear-gradient(120deg, #1B2640, #1E1B4B);
  }
  .closing h2 { font-size: clamp(1.9rem, 4vw, 2.75rem); font-weight: 800; letter-spacing: -0.03em; color: #fff; }
  .closing p { margin-top: 8px; color: var(--ink-muted); }
  .closing .actions { display: flex; gap: 10px; flex-wrap: wrap; }

  footer {
    display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
    padding-block: 36px 40px; margin-top: 56px; border-top: 1px solid var(--ink-hairline);
    color: var(--ink-muted); font-size: 0.8125rem;
  }
  footer nav { display: flex; gap: 20px; }
  footer a { text-decoration: none; }
  footer a:hover { color: #fff; }


  /* ---------- Load sequence (visible at rest; motion only adds) ---------- */
  @media (prefers-reduced-motion: no-preference) {
    .rise { animation: lp-rise .7s cubic-bezier(.2,.7,.2,1) both; }
    .d1 { animation-delay: .05s; } .d2 { animation-delay: .15s; } .d3 { animation-delay: .25s; } .d4 { animation-delay: .35s; }
    .spark .line { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: lp-draw 1.6s .4s cubic-bezier(.3,.6,.2,1) forwards; }
  }

  /* ---------- Responsive ---------- */
  @media (max-width: 980px) {
    .hero { grid-template-columns: 1fr; }
    .signin { justify-self: start; max-width: 460px; }
    .stage { grid-template-columns: 1fr; gap: 28px; }
    .stage .gap { display: none; }
    .wires { display: none; }
    .adds-up { display: block; }
    .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .span-4, .span-3 { grid-column: span 2; }
    .span-2 { grid-column: span 1; }
    .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .closing { grid-template-columns: 1fr; }
    .waitlist { justify-self: start; }
    .principle:nth-child(3) { padding-left: 0; border-left: 0; }
    .principle:nth-child(n+3) { border-top: 1px solid var(--ink-hairline); margin-top: 20px; }
  }
  @media (max-width: 720px) {
    .toplinks a:not(.btn) { display: none; }
    .bento { grid-template-columns: 1fr; }
    .span-2 { grid-column: span 1; }
    .span-4, .span-3 { grid-column: span 1; }
    .re-grid { grid-template-columns: 1fr; }
    .steps { grid-template-columns: 1fr; gap: 40px; }
    .principles { grid-template-columns: 1fr; }
    .principle, .principle + .principle { padding: 24px 0 4px; border-left: 0; }
    .principle + .principle { border-top: 1px solid var(--ink-hairline); margin-top: 0; }
    .flow-figs { grid-template-columns: 1fr 1fr; }
    .src { grid-template-columns: 32px minmax(0, 1fr) auto; }
    .src .mark { width: 32px; height: 32px; }
  }

  /* ---------- Added in the port: flash, waitlist form, anchors ---------- */
  [id] { scroll-margin-top: 24px; }
  .lp-flash { margin-top: 16px; padding: 10px 12px; border-radius: 10px; font-size: 0.875rem; }
  .lp-flash.alert { background: var(--neg-bg); color: var(--down); }
  .lp-flash.notice { background: var(--pos-bg); color: var(--pos-text); }
  .closing .lp-flash.alert { background: rgb(248 113 113 / .12); color: #FCA5A5; }
  .closing .lp-flash.notice { background: rgb(74 222 128 / .12); color: var(--up-on-ink); }
  .waitlist { width: 100%; max-width: 460px; justify-self: end; }
  .waitlist label { display: block; font-size: 0.8125rem; font-weight: 600; color: var(--ink-text); margin-bottom: 8px; }
  .waitlist-row { display: flex; gap: 8px; flex-wrap: wrap; }
  .waitlist-row input {
    flex: 1 1 220px; min-width: 0;
    font: 400 0.9375rem/1.4 var(--f-body); color: #fff;
    padding: 11px 12px; border-radius: 10px;
    border: 1px solid #33425E; background: rgb(15 23 42 / .6);
  }
  .waitlist-row input::placeholder { color: var(--ink-muted); }
  .waitlist-row input:focus { outline: none; border-color: var(--accent-on-ink); box-shadow: 0 0 0 3px rgb(129 140 248 / .25); }
  .waitlist .fine { margin-top: 10px; color: var(--ink-muted); }
  .signin .invite a { text-decoration: none; }
  .signin .invite a:hover { text-decoration: underline; }
  .chips { margin-top: 18px; }
  .fi-head { margin-top: 0; }
  .fi-note { margin-top: 10px; }
  .how { padding-top: 0; }
  .principles-block { padding-bottom: 0; }
  @media (max-width: 480px) {
    .toplinks .btn-primary { display: none; }
  }
}