/* GRM — full-bleed product page.
 *
 * THE TELL THIS FIXES. Three previous attempts all centred everything inside a fixed-width box,
 * leaving dead margins down both sides of the screen. That silhouette — a narrow column floating
 * in the middle of a wide monitor — is the single most recognisable signature of a generated
 * page, and no amount of good typography inside the box repairs it.
 *
 * So the page is built edge-to-edge instead. Content begins a short, viewport-relative distance
 * from the left edge and stays there; horizontal rules span the entire width; each section runs
 * on a two-column grid with a sticky label rail in the left gutter, so the corner that used to be
 * empty is now carrying structure; and the hero's terminal panel deliberately bleeds off the
 * right edge rather than stopping politely inside an invisible container.
 *
 * Nothing here is decoration. The vertical rule beside the rail, the full-width section rules and
 * the bleeding panel are all doing the same job: telling the eye that this was laid out on
 * purpose rather than poured into a template.
 */

:root {
    --bg:          #0b0b0d;
    --bg-panel:    #101014;
    --bg-inset:    #0c0c0f;
    --bg-hover:    #17171c;

    --line:        #212127;
    --line-soft:   #17171c;

    --fg:          #f2f2f4;
    --fg-mid:      #a4a4ae;
    --fg-dim:      #6a6a76;
    --fg-faint:    #47474f;

    --accent:      #7aa2f7;
    --accent-deep: #2b3a5c;
    --good:        #7fcf9a;

    --mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, monospace;
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;

    /* Content starts here, measured from the viewport edge -- never from a centred box. */
    --pad:  clamp(20px, 4.2vw, 76px);
    --rail: 190px;
    --gap:  56px;
    --radius: 10px;
}

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

html { scroll-behavior: smooth; color-scheme: dark; }

body {
    background-color: #08080a;
    background-image: 
        radial-gradient(ellipse 80% 50% at 50% -15%, rgba(122, 162, 247, 0.14), transparent 70%),
        linear-gradient(to right, rgba(255, 255, 255, 0.024) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.024) 1px, transparent 1px);
    background-size: 100% 100%, 36px 36px, 36px 36px;
    color: var(--fg);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    position: relative;
}

/* ── Kinetic Synaptic Background Canvas ──────────────────────────────────── */

#kinetic-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 0;
}

.top, main, footer, section { position: relative; z-index: 1; }

a { color: inherit; text-decoration: none; }

/* ── header: full width, rule spans the screen ───────────────────────────── */

.top {
    position: sticky;
    top: 0;
    z-index: 30;
    background: rgba(11, 11, 13, 0.82);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--line-soft);
    display: flex;
    align-items: center;
    gap: 28px;
    height: 58px;
    padding: 0 var(--pad);
}

.brand { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }

/* The mark is now real SVG rather than a CSS box, so it needs a size and a colour and
 * nothing else -- `currentColor` inside it picks up this rule. */
.mark { width: 20px; height: 20px; flex: none; color: var(--accent); }

.top nav { display: flex; align-items: center; gap: 26px; margin-left: auto; }
.top nav a { font-size: 14px; color: var(--fg-mid); transition: color 0.15s; }
.top nav a:hover { color: var(--fg); }

/* ── buttons ─────────────────────────────────────────────────────────────── */

.btn {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 500; line-height: 1;
    padding: 11px 18px; border-radius: 7px;
    border: 1px solid var(--line); background: var(--bg-panel); color: var(--fg);
    cursor: pointer; white-space: nowrap;
    transition: background 0.15s, border-color 0.15s;
}
.btn:hover { background: var(--bg-hover); border-color: #2e2e36; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #0a0d16; font-weight: 600; }
.btn-primary:hover { background: #96b6ff; border-color: #96b6ff; }
.btn-sm { padding: 8px 13px; font-size: 13px; }

/* ── download buttons ────────────────────────────────────────────────────── */

.dl-buttons-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin: 18px 0 12px 0;
}

.dl-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    border-radius: 8px;
    background: #111116 !important;
    border: 1px solid #282834 !important;
    text-decoration: none !important;
    color: #f2f2f4 !important;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.05) inset;
}

.dl-btn .dl-os {
    font-weight: 600;
    color: #ffffff;
}

.dl-btn .dl-size {
    font-family: var(--mono);
    font-size: 11px;
    color: #a4a4ae;
    background: #0c0c10;
    padding: 2px 7px;
    border-radius: 4px;
    border: 1px solid #212127;
}

.dl-btn:hover {
    background: #181820 !important;
    border-color: #3e3e4f !important;
    transform: translateY(-1px);
}

/* Featured glow button (Windows) */
.dl-btn-featured {
    background: linear-gradient(180deg, rgba(122, 162, 247, 0.16) 0%, rgba(17, 17, 24, 0.95) 100%) !important;
    border-color: rgba(122, 162, 247, 0.6) !important;
    box-shadow: 0 0 24px rgba(122, 162, 247, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

.dl-btn-featured .dl-os {
    color: #ffffff;
}

.dl-btn-featured .dl-size {
    color: #7aa2f7;
    background: rgba(122, 162, 247, 0.18);
    border-color: rgba(122, 162, 247, 0.35);
}

.dl-btn-featured:hover {
    border-color: #7aa2f7 !important;
    box-shadow: 0 0 32px rgba(122, 162, 247, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
    background: linear-gradient(180deg, rgba(122, 162, 247, 0.26) 0%, rgba(22, 24, 34, 0.98) 100%) !important;
}

/* ── hero: asymmetric, and the panel runs off the right edge ─────────────── */

.hero {
    padding: clamp(56px, 8vw, 104px) 0 clamp(56px, 7vw, 92px) var(--pad);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
    overflow: hidden;
}

.hero-copy { max-width: 620px; }

h1 {
    font-size: clamp(34px, 5.4vw, 66px);
    line-height: 1.02;
    letter-spacing: -0.04em;
    font-weight: 600;
    margin-bottom: 24px;
}

.lede { font-size: clamp(16px, 1.35vw, 18.5px); line-height: 1.6; color: var(--fg-mid); margin-bottom: 32px; }
.lede b { color: var(--fg); font-weight: 500; }

.hero-cta { display: flex; gap: 10px; flex-wrap: wrap; }

.hero-fine { margin-top: 20px; font-size: 13.5px; color: var(--fg-dim); }
.hero-fine b { color: var(--fg-mid); font-weight: 500; }

/* Deliberately clipped by the viewport: the panel is wider than the space it is given. */
.hero-announcement {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px 6px 8px;
    border-radius: 100px;
    background: rgba(122, 162, 247, 0.08);
    border: 1px solid rgba(122, 162, 247, 0.25);
    font-size: 13px;
    color: #c4d7fc;
    margin-bottom: 24px;
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
    transition: border-color 0.2s, background 0.2s;
}
.hero-announcement:hover {
    border-color: rgba(122, 162, 247, 0.45);
    background: rgba(122, 162, 247, 0.12);
}
.ann-badge {
    background: var(--accent);
    color: #07090e;
    font-weight: 700;
    font-size: 10.5px;
    padding: 2px 7px;
    border-radius: 100px;
    letter-spacing: 0.05em;
}
.ann-arrow { color: var(--accent); }

.ecosystem-strip {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 32px;
}
.eco-label {
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fg-dim);
    font-weight: 600;
}
.eco-badges {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.eco-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 500;
    color: #d1d1db;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 5px 12px;
    border-radius: 6px;
    font-family: var(--mono);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.hero-panel { min-width: 0; }
.hero-panel .term { 
    border-right: 0; 
    border-radius: var(--radius) 0 0 var(--radius); 
    min-width: 560px;
    box-shadow: -10px 20px 50px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(122, 162, 247, 0.12);
}

/* ── terminal panels — authentic window bar & real captured output ───────── */

.term { 
    background: #09090c; 
    border: 1px solid rgba(255, 255, 255, 0.09); 
    border-radius: var(--radius); 
    overflow: hidden;
    box-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.term-bar {
    display: flex; align-items: center; gap: 7px;
    padding: 10px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); background: #111115;
}
.dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.dot:nth-child(1) { background: #ff5f56; opacity: 0.85; }
.dot:nth-child(2) { background: #ffbd2e; opacity: 0.85; }
.dot:nth-child(3) { background: #27c93f; opacity: 0.85; }
.term-title { font-family: var(--mono); font-size: 11.5px; color: var(--fg-mid); margin-left: 6px; }

.term-body {
    padding: 16px 18px;
    font-family: var(--mono);
    font-size: 12.5px;
    line-height: 1.72;
    color: var(--fg-mid);
    white-space: pre;
    overflow-x: auto;
}
.term-body.wrapped { white-space: pre-wrap; }
.term-body .ok  { color: var(--good); }
.term-body .dim { color: var(--fg-faint); }
.term-body .hi  { color: var(--fg); }
.term-body .acc { color: var(--accent); }
.term-body .cmd { color: var(--fg); }

.term-cap { font-size: 12.5px; color: var(--fg-dim); margin-top: 12px; line-height: 1.55; max-width: 560px; }
.term-cap b { color: var(--fg-mid); font-weight: 500; }

/* ── sections: full-width rules, sticky label rail in the left gutter ────── */

section { border-top: 1px solid var(--line-soft); padding: clamp(52px, 6vw, 84px) var(--pad); }

.sec { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); gap: var(--gap); align-items: start; }

.rail { position: sticky; top: 86px; padding-right: 24px; border-right: 1px solid var(--line-soft); min-height: 90px; }

.eyebrow {
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--fg-faint);
    margin-bottom: 10px;
}

.rail p { font-size: 13px; color: var(--fg-dim); line-height: 1.55; }

h2 { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.14; letter-spacing: -0.028em; font-weight: 600; margin-bottom: 14px; }
.sub { font-size: 16.5px; color: var(--fg-mid); max-width: 660px; line-height: 1.6; margin-bottom: 44px; }

h3 { font-size: 15.5px; font-weight: 600; margin-bottom: 7px; letter-spacing: -0.005em; }
p { margin-bottom: 15px; }
p:last-child { margin-bottom: 0; }

/* ── feature lattice ─────────────────────────────────────────────────────── */

.lattice {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 1px;
    background: var(--line-soft);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    overflow: hidden;
}
.cell { background: var(--bg); padding: 26px 28px; }
.cell p { font-size: 14.5px; color: var(--fg-mid); line-height: 1.6; }
.cell code, .flow code, .faq code {
    font-family: var(--mono); font-size: 12.5px;
    background: var(--bg-panel); border: 1px solid var(--line-soft);
    border-radius: 4px; padding: 1px 5px; color: var(--fg);
}

/* ── figures & data ──────────────────────────────────────────────────────── */

.figs {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1px; background: var(--line-soft);
    border: 1px solid var(--line-soft); border-radius: var(--radius);
    overflow: hidden; margin-bottom: 44px;
}
.fig { background: var(--bg); padding: 26px 24px; }
.fig .n { font-family: var(--mono); font-size: clamp(24px, 2.2vw, 30px); font-weight: 500; letter-spacing: -0.03em; line-height: 1; color: var(--fg); font-variant-numeric: tabular-nums; }
.fig .l { font-size: 13px; color: var(--fg-dim); line-height: 1.45; margin-top: 11px; }

.duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: clamp(32px, 4vw, 56px); align-items: start; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
caption { text-align: left; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--fg-faint); padding-bottom: 12px; }
td { padding: 9px 0; border-bottom: 1px solid var(--line-soft); color: var(--fg-mid); }
tr:last-child td { border-bottom: none; }
td.n { text-align: right; font-family: var(--mono); color: var(--fg); font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: 20px; }

.note { font-size: 14px; color: var(--fg-mid); line-height: 1.68; padding-left: 16px; border-left: 2px solid var(--accent-deep); margin-bottom: 22px; }
.note:last-child { margin-bottom: 0; }
.note b { color: var(--fg); font-weight: 500; }

/* ── steps ───────────────────────────────────────────────────────────────── */

.steps { display: grid; gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden; }
.step { background: var(--bg); padding: 26px 28px; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 18px; }
.step .k { font-family: var(--mono); font-size: 13px; color: var(--fg-faint); padding-top: 2px; }
.step p { font-size: 14.5px; color: var(--fg-mid); margin-bottom: 14px; }

.dl { display: flex; gap: 8px; flex-wrap: wrap; }
.dl a { font-family: var(--mono); font-size: 12.5px; padding: 8px 13px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg-panel); transition: border-color 0.15s, background 0.15s; }
.dl a:hover { border-color: var(--accent-deep); background: var(--bg-hover); }
.dl a span { color: var(--fg-faint); }

.dl-buttons-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin: 16px 0 10px 0;
}

.dl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    border-radius: 8px;
    background: var(--bg-panel);
    border: 1px solid var(--line);
    text-decoration: none;
    color: var(--fg);
    font-size: 13.5px;
    font-weight: 500;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.04) inset;
}

.dl-btn .dl-os {
    font-weight: 600;
    color: var(--fg);
}

.dl-btn .dl-size {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--fg-dim);
    background: var(--bg-inset);
    padding: 2px 7px;
    border-radius: 4px;
    border: 1px solid var(--line-soft);
}

.dl-btn:hover {
    background: var(--bg-hover);
    border-color: #2e2e38;
    transform: translateY(-1px);
}

/* Featured glow button (Windows) */
.dl-btn-featured {
    background: linear-gradient(180deg, rgba(122, 162, 247, 0.12) 0%, rgba(16, 16, 20, 0.9) 100%);
    border-color: rgba(122, 162, 247, 0.5);
    box-shadow: 0 0 20px rgba(122, 162, 247, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    position: relative;
}

.dl-btn-featured .dl-os {
    color: #ffffff;
}

.dl-btn-featured .dl-size {
    color: var(--accent);
    background: rgba(122, 162, 247, 0.15);
    border-color: rgba(122, 162, 247, 0.3);
}

.dl-btn-featured:hover {
    border-color: var(--accent);
    box-shadow: 0 0 28px rgba(122, 162, 247, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    background: linear-gradient(180deg, rgba(122, 162, 247, 0.2) 0%, rgba(20, 22, 30, 0.95) 100%);
}

/* ── pricing ─────────────────────────────────────────────────────────────── */

.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-bottom: 28px; }
.plan { border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; background: var(--bg-panel); }
.plan.lead { border-color: var(--accent-deep); }
.plan .amt { font-family: var(--mono); font-size: 30px; font-weight: 500; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.plan .amt s { font-size: 16px; color: var(--fg-faint); margin-left: 8px; font-weight: 400; }
.plan .per { font-size: 13px; color: var(--fg-dim); margin: 6px 0 20px; }
.plan ul { list-style: none; margin-bottom: 24px; }
.plan li { font-size: 14px; color: var(--fg-mid); padding: 6px 0 6px 18px; position: relative; }
.plan li::before { content: ""; position: absolute; left: 0; top: 14px; width: 6px; height: 1px; background: var(--fg-faint); }

.fineprint { font-size: 14px; color: var(--fg-mid); }
.fineprint b { color: var(--fg); font-weight: 500; }

/* ── flow ────────────────────────────────────────────────────────────────── */

.flow { list-style: none; counter-reset: f; }
.flow li { counter-increment: f; position: relative; padding: 16px 0 16px 38px; border-bottom: 1px solid var(--line-soft); font-size: 14.5px; color: var(--fg-mid); line-height: 1.6; }
.flow li:last-child { border-bottom: none; }
.flow li::before { content: counter(f); position: absolute; left: 0; top: 16px; font-family: var(--mono); font-size: 12px; color: var(--fg-faint); }
.flow b { color: var(--fg); font-weight: 500; }

/* ── faq ─────────────────────────────────────────────────────────────────── */

.faq { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 34px 48px; }
.faq p { font-size: 14.5px; color: var(--fg-mid); line-height: 1.6; }

/* ── footer ──────────────────────────────────────────────────────────────── */

footer {
    border-top: 1px solid var(--line-soft);
    padding: 34px var(--pad) 60px;
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px;
    font-size: 13px; color: var(--fg-dim);
}
/* Publisher line. Deliberately quieter than the product line above it -- a studio credit
   that shouts reads as padding, one that sits back reads as a company. */
footer .pub { display: inline-block; margin-top: 7px; color: var(--fg-dim); opacity: 0.8; }
footer .pub b { color: var(--fg-mid); font-weight: 600; }
footer a { color: var(--fg-mid); }
footer a:hover { color: var(--fg); }

/* ── narrow ──────────────────────────────────────────────────────────────── */

@media (max-width: 1080px) {
    .hero { grid-template-columns: 1fr; padding-right: var(--pad); }
    .hero-panel .term { border-right: 1px solid var(--line); border-radius: var(--radius); min-width: 0; }
    .sec { grid-template-columns: 1fr; gap: 26px; }
    .rail { position: static; border-right: 0; padding-right: 0; min-height: 0; }
    .rail p { display: none; }
}

@media (max-width: 620px) {
    .top nav a:not(.btn) { display: none; }
    .term-body { font-size: 11.5px; }
    .sub { margin-bottom: 32px; }
}

/* ── demos ──────────────────────────────────────────────────────────────────
 * The stage is deliberately the widest element on the page. Everything else here is
 * type in a column; a video is the one thing whose whole job is to be looked at, so it
 * gets the full remaining width rather than being politely boxed to match the prose.
 */
/* THE COLUMN RATIO IS DOING ARITHMETIC, not taste. The video is 16:9 and the screenshot
 * is 641x595, so equal columns would leave the screenshot towering over the player by
 * about 150px and the row would read as broken. At 1.25 / 0.75 the two panels land within
 * a couple of pixels of the same height on their own, with no cropping, no letterboxing
 * and no fixed height to fight. It also does what was actually asked -- the player is
 * roughly 40% narrower than the full-width version it replaces. */
.proof-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    gap: 26px;
    align-items: start;
    margin-top: 30px;
}

.proof { margin: 0; min-width: 0; }

.proof-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 10px;
    font-family: var(--mono);
    font-size: 12px;
}
.proof-where { color: var(--fg); }
.proof-tier {
    color: var(--fg-faint);
    padding-left: 10px;
    border-left: 1px solid var(--line);
}

.proof-stage {
    background: var(--bg-inset);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}

.proof-video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
}

/* The screenshot keeps its own proportions -- a crop or a squash of a picture of text is
 * both ugly and slightly dishonest, since the thing being shown IS the text. */
.proof-stage--shot img {
    display: block;
    width: 100%;
    height: auto;
}

.proof-cap {
    margin-top: 13px;
    color: var(--fg-dim);
    font-size: 13px;
    line-height: 1.6;
}
.proof-cap b    { color: var(--fg-mid); font-weight: 600; }
.proof-cap code {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--fg-mid);
}
.proof-len { color: var(--fg-faint); }

/* Deliberately quiet, and placed under BOTH panels rather than inside one caption. It is a
 * footnote about how the evidence was captured, not a defence of either picture -- set louder
 * or attached to the screenshot alone, it would read as an apology for it, which invites the
 * reader to go looking for the thing being apologised for. */
.proof-note {
    margin-top: 26px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    color: var(--fg-faint);
    font-size: 12.5px;
    line-height: 1.6;
    max-width: 70ch;
}

/* One column below the point where 0.75fr stops being a readable width for a screenshot
 * of a conversation. Stacked, the video no longer needs to be held narrow. */
/* ── Pricing & Licensing 3-Tier Grid ────────────────────────────────── */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    margin-top: 32px;
    align-items: stretch;
}

.pricing-card {
    background: var(--bg-panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 32px 26px;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.pricing-card:hover {
    transform: translateY(-3px);
    border-color: rgba(122, 162, 247, 0.35);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}

.pricing-card.featured {
    background: linear-gradient(180deg, rgba(23, 23, 30, 0.95) 0%, rgba(16, 16, 20, 0.98) 100%);
    border: 1px solid rgba(122, 162, 247, 0.5);
    box-shadow: 0 0 35px rgba(122, 162, 247, 0.12);
}

.pricing-badge {
    position: absolute;
    top: -12px;
    left: 26px;
    background: linear-gradient(135deg, var(--accent), #565f89);
    color: #0b0b0d;
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 100px;
}

.pricing-name {
    font-size: 19px;
    font-weight: 600;
    color: var(--fg);
    letter-spacing: -0.01em;
    margin-bottom: 6px;
}

.pricing-desc {
    font-size: 13px;
    color: var(--fg-dim);
    line-height: 1.5;
    min-height: 38px;
    margin-bottom: 20px;
}

.pricing-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--line-soft);
}

.pricing-amount {
    font-size: 34px;
    font-weight: 700;
    color: var(--fg);
    letter-spacing: -0.03em;
    font-family: var(--mono);
}

.pricing-period {
    font-size: 13px;
    color: var(--fg-dim);
}

.pricing-features {
    list-style: none;
    padding: 0;
    margin: 0 0 28px 0;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* NOT flex. A flex li makes every child its own column, so `<b>Label:</b> rest of the
   sentence` breaks into two ragged columns instead of one wrapped line -- which is what
   it did until the tick was moved out of the flow. Absolute marker, block li, and the
   copy wraps as prose. */
.pricing-features li {
    font-size: 13.5px;
    color: var(--fg-mid);
    line-height: 1.5;
    position: relative;
    padding-left: 21px;
}

.pricing-features li b {
    color: var(--fg);
}

.pricing-features li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--good);
    font-family: var(--mono);
    font-weight: 700;
    font-size: 13px;
}

.pricing-card.featured .pricing-features li::before {
    color: var(--accent);
}

.pricing-cta {
    width: 100%;
    text-align: center;
    padding: 11px 18px;
    font-size: 13.5px;
    font-weight: 600;
    border-radius: 6px;
    margin-top: auto;
}

@media (max-width: 960px) {
    .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 500px;
        margin: 32px auto 0;
    }
}

/* ── early-access tag + browser-download fallback ───────────────────────────
 * The tag is doing a specific job: this ships from a free subdomain with no company
 * behind it, and without a word for that a visitor supplies their own — "abandoned",
 * or "a toy". "Early access" is the true description and it is the flattering one,
 * so it is worth saying out loud rather than leaving to inference.
 */
.tag-ea {
    margin-left: 12px;
    padding: 3px 9px 4px;
    border: 1px solid var(--accent-deep);
    border-radius: 100px;
    background: rgba(122, 162, 247, 0.08);
    color: var(--accent);
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* The browser route, deliberately demoted to a sentence. It is still there for anyone
 * who wants it -- hiding it would read as having something to hide -- but the terminal
 * above is the path that does not hand a new visitor a scary-looking warning. */
.dl-alt {
    margin-top: 14px;
    color: var(--fg-dim);
    font-size: 12.5px;
    line-height: 1.7;
    max-width: 68ch;
}
.dl-alt a { color: var(--fg-mid); text-decoration: underline; text-underline-offset: 3px; }
.dl-alt a:hover { color: var(--accent); }
.dl-alt i { font-style: normal; color: var(--fg-mid); }

@media (max-width: 640px) { .tag-ea { display: none; } }

/* ── legal pages ──────────────────────────────────────────────────────────
   Privacy, terms, refunds, contact. One narrow measure, no rail, no figures.
   These are read by a payment provider's reviewer and by a customer's lawyer,
   and both want to find a clause fast -- so headings are dense and the column
   is capped at a comfortable reading width rather than running full bleed
   like the landing page does. */
.legal { padding: 46px var(--pad) 90px; max-width: 78ch; }
.legal .back { font-family: var(--mono); font-size: 12px; color: var(--fg-dim);
               text-decoration: none; letter-spacing: .04em; }
.legal .back:hover { color: var(--accent); }
.legal h1 { font-size: clamp(28px, 4vw, 40px); letter-spacing: -.035em; margin: 22px 0 6px; }
.legal .updated { font-family: var(--mono); font-size: 12px; color: var(--fg-dim); margin-bottom: 34px; }
.legal h2 { font-size: 17px; letter-spacing: -.01em; margin: 32px 0 10px; color: var(--fg); }
.legal p, .legal li { color: var(--fg-mid); font-size: 15px; line-height: 1.72; margin-bottom: 12px; }
.legal ul { padding-left: 20px; margin-bottom: 12px; }
.legal li { margin-bottom: 7px; }
.legal a { color: var(--accent); }
.legal b { color: var(--fg); font-weight: 600; }
.legal code { font-family: var(--mono); font-size: 13px; color: var(--fg); }
.legal .lead { font-size: 16px; color: var(--fg); border-left: 2px solid var(--accent-deep);
               padding-left: 16px; margin-bottom: 26px; }

/* ── the background field ─────────────────────────────────────────────────
   A sparse graph that brightens around the pointer. It is the product's own
   shape, which is the only reason it earns a place here — an ambient effect
   that has nothing to do with what is being sold is just noise.

   THE STACKING TRICK. The canvas has to sit BEHIND the content but IN FRONT of
   the page's own background, and `z-index: -1` cannot do that while `body`
   paints a colour: the negative layer goes behind body's own fill and vanishes.
   So the ground colour moves up to `html`, body goes transparent, and the
   canvas sits at 0 with the real content lifted to 1. */
html { background: var(--bg); }
body { background: transparent; }

#bg {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;   /* never intercepts a click, a drag or a text selection */
    display: block;
}

/* Everything real rides above it. `.top` already carries its own higher z-index. */
main, footer, .legal { position: relative; z-index: 1; }

/* The verification run is the strongest evidence on the page, so it gets the full
   column instead of a half. Capped rather than edge-to-edge: past ~980px the terminal
   text stops gaining legibility and the caption line just gets harder to read. */
.proof--lead { max-width: 980px; margin: 0 auto 8px; }
.proof--lead .proof-stage { aspect-ratio: 16 / 9; }

/* ── the two halves ───────────────────────────────────────────────────────
   The site is one company with two products, and a visitor decides which one
   they came for in the first screen and a half. The h1 says both in the same
   voice; this band says which is which, once, before any section tries to
   explain anything. Kept deliberately plain -- two paragraphs and two links,
   no icons and no cards -- because a decorated version reads as a feature
   comparison, and these are not alternatives to each other. */
.h1-alt {
    font-size: 0.68em;
    display: block;
    color: var(--fg-dim);
    font-weight: 600;
    margin-top: 4px;
}

.split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1px;
    background: var(--line-soft);
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
    margin: clamp(40px, 6vw, 78px) 0 clamp(20px, 3vw, 34px);
}
.split-half { background: var(--bg); padding: 30px clamp(20px, 4.2vw, 76px) 34px; }
.split-half:last-child { border-left: 0; }

.split-k {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    color: var(--accent);
    margin-bottom: 12px;
}
.split-half p {
    font-size: 15px;
    color: var(--fg-mid);
    line-height: 1.66;
    max-width: 54ch;
    margin-bottom: 16px;
}
.split-half > a {
    font-family: var(--mono);
    font-size: 12.5px;
    color: var(--fg-dim);
    text-decoration: none;
    transition: color 0.15s;
}
.split-half > a:hover { color: var(--accent); }

/* `main` carries no horizontal padding of its own -- every section supplies its own
   var(--pad) -- so this band does the same and needs no negative margin to reach the
   viewport edge. Its inner padding matches --pad so the copy lines up with every
   heading above and below it. */