/* =========================================================================
   Latch Vector — platform page components.
   This used to be an embedded <style> block with its own colour tokens
   (#0C1116 instead of the rest of the site's #0f1317, a teal "patina" accent
   instead of the shared blue). That was the two-design-systems bug. Every
   token below now aliases the shared tokens in assets/css/tokens.css instead
   of a literal hex value; the component rules that follow are unchanged from
   the original page, just re-pointed at the alias names. .masthead/.nav/
   .theme-toggle/.btn/.reveal/.form-row/.eyebrow are NOT redefined here: this
   page uses the shared ones from styles.css.
   ========================================================================= */

:root {
    --paper-raised: var(--field);
    --ink-soft: var(--ink-2);
    --ink-faint: var(--ink-3);
    --rule-strong: var(--ink-3);
    --patina: var(--blue);
    --patina-wash: var(--blue-bg);
    --refused: var(--flag);
    --grain: color-mix(in srgb, var(--ink) 3%, transparent);
}

.wrap { width: min(var(--container-max), 100%); margin: 0 auto; padding: 0 var(--gutter); }

body {
    background-image: repeating-linear-gradient(0deg, var(--grain) 0 1px, transparent 1px 3px);
}

/* ---------- type scale (page-local: a slightly wider measure than the rest
   of the site, inherited from when this page had its own type system) ---- */
h1, h2, h3 { font-family: var(--display); font-weight: 700; font-stretch: 110%; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(2.6rem, 6.4vw, 5rem); line-height: 1.02; letter-spacing: -0.022em; font-stretch: 115%; }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.7rem); line-height: 1.12; letter-spacing: -0.015em; font-stretch: 112%; }
h3 { font-size: 1.18rem; line-height: 1.3; letter-spacing: -0.005em; }
p { max-width: var(--measure); }

.lede { font-size: clamp(1.06rem, 1.7vw, 1.28rem); color: var(--ink-2); line-height: 1.55; }
.fine { font-size: 0.9rem; color: var(--ink-3); }
/* div.stack/section.stack, not bare .stack: styles.css has its own bare
   .stack (the 4-column tech grid on engineering.html) at equal specificity,
   so this only reliably wins the cascade by being the more specific
   selector, not by load order. .stack on this page is used on both <div>
   and <section> elements, so both must be listed, or the unlisted tag
   falls straight through to styles.css's grid version. */
div.stack, section.stack { display: flex; flex-direction: column; }
.gap-s { gap: 0.6rem; } .gap-m { gap: 1.1rem; }
.gap-l { gap: 2rem; } .gap-xl { gap: 3.4rem; }

section { padding-block: clamp(4rem, 9vw, 7.5rem); border-top: 1px solid var(--rule); }
section:first-of-type { border-top: 0; }

/* This page's eyebrows are accent-coloured rather than the muted grey the
   rest of the site uses: a deliberate, page-scoped accent, not a stray hex. */
.eyebrow { color: var(--patina); }

/* ---------- hero ----------
   Named .platform-hero, not .hero: styles.css's bare .hero carries its own
   layout (a claim-animation two-column grid, a decorative ::before graph-
   paper background, its own padding-block) built for the engineering/home
   hero. At equal specificity this page's rules would only win by load
   order, and would still inherit styles.css's ::before pattern and padding
   since those properties are never overridden. A different name avoids
   inheriting any of that by accident. */
.platform-hero { display: grid; grid-template-columns: 1fr; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; }
@media (min-width: 62rem) { .platform-hero { grid-template-columns: 1.05fr 0.95fr; } }

.platform-hero h1 em {
    font-style: normal;
    background-image: linear-gradient(transparent 62%, var(--patina-wash) 62%);
}

/* ---------- layers ---------- */
.layers { display: grid; gap: 0; }
.layer {
    display: grid; gap: 0.35rem 1.6rem; padding-block: 1.9rem;
    border-top: 1px solid var(--rule);
    grid-template-columns: 1fr;
}
@media (min-width: 48rem) {
    .layer { grid-template-columns: 4.5rem 15rem 1fr; align-items: start; }
}
.layer:first-child { border-top: 0; }
.layer-no {
    font-family: var(--mono); font-size: 0.78rem; color: var(--patina);
    letter-spacing: 0.08em; padding-top: 0.35rem;
}
.layer p { color: var(--ink-2); }
.layer code {
    font-family: var(--mono); font-size: 0.84em;
    background: var(--patina-wash); padding: 0.1em 0.35em; border-radius: 2px;
}

/* ---------- measurements ---------- */
.measures { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (min-width: 40rem) { .measures { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .measures { grid-template-columns: repeat(4, 1fr); } }
.measure-cell { background: var(--paper-raised); padding: 1.6rem 1.4rem; display: flex; flex-direction: column; gap: 0.45rem; }
.measure-value {
    font-family: var(--display); font-size: 2.35rem; line-height: 1;
    font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.measure-label { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--patina); }
.measure-note { font-size: 0.88rem; color: var(--ink-3); line-height: 1.45; }

/* ---------- two-column prose blocks ---------- */
.split { display: grid; gap: clamp(1.6rem, 4vw, 3.5rem); }
@media (min-width: 56rem) { .split { grid-template-columns: 18rem 1fr; } }

.cards { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (min-width: 46rem) { .cards { grid-template-columns: repeat(2, 1fr); } }
.card { background: var(--paper-raised); padding: 1.7rem 1.5rem; display: flex; flex-direction: column; gap: 0.6rem; }
.card h3 { font-family: var(--body); font-size: 1rem; font-weight: 650; letter-spacing: 0; }
.card p { font-size: 0.95rem; color: var(--ink-2); }
.tag-new {
    align-self: flex-start; font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--patina); background: var(--patina-wash);
    border: 1px solid color-mix(in srgb, var(--patina) 35%, transparent);
    border-radius: 3px; padding: 0.1rem 0.42rem; margin-bottom: -0.2rem;
}
.card--wide { grid-column: 1 / -1; background: var(--patina-wash); }
.card--wide h3 { font-size: 1.1rem; max-width: none; }
.card--wide p { font-size: 1rem; max-width: none; }
.card--mobile {
    display: flex; flex-direction: row; flex-wrap: wrap; align-items: center;
    justify-content: center; gap: 2.5rem 3.5rem;
    max-width: 920px; margin: 0 auto;
}
.card--mobile .card-copy { flex: 0 1 360px; display: flex; flex-direction: column; gap: 0.6rem; }
.phone-frame {
    flex: 0 0 auto; width: 320px; margin: 0; padding: 9px;
    border: 1px solid var(--rule); border-radius: 34px; overflow: hidden;
    background: var(--paper-raised); box-shadow: 0 18px 40px -28px var(--shadow);
}
/* Real HTML/CSS, not a screenshot. Colours are literal because this
   reproduces the actual app's palette, not the marketing site's. */
.ph-screen { background: #F3F4F6; border-radius: 25px; padding: 1.1rem 0.95rem; display: flex; flex-direction: column; gap: 0.65rem; }
.ph-top { display: flex; align-items: center; justify-content: space-between; padding: 0 0.1rem; }
.ph-heading { font-family: var(--body); font-weight: 800; font-size: 1.15rem; color: #111827; }
.ph-live { display: flex; align-items: center; gap: 0.3rem; font-size: 0.68rem; color: #6B7280; }
.ph-live i { width: 7px; height: 7px; border-radius: 50%; background: #22C55E; display: inline-block; }
.ph-clear { text-align: center; font-size: 0.68rem; color: #6B7280; border: 1px solid #E5E7EB; border-radius: 999px; padding: 0.48rem 0; }
.ph-card { background: #fff; border-radius: 13px; padding: 0.75rem 0.8rem; display: flex; flex-direction: column; gap: 0.32rem; }
.ph-card-top { display: flex; align-items: baseline; justify-content: space-between; }
.ph-sev { font-family: var(--body); font-size: 0.64rem; font-weight: 800; letter-spacing: 0.02em; }
.ph-sev--critical { color: #DC2626; }
.ph-sev--warning { color: #D97706; }
.ph-sev--info { color: #2563EB; }
.ph-time { font-size: 0.62rem; color: #9CA3AF; }
.ph-card .ph-title { font-family: var(--body); font-size: 0.84rem; font-weight: 700; color: #111827; line-height: 1.3; margin: 0; text-align: left; hyphens: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-card .ph-type { font-family: var(--mono); font-size: 0.58rem; color: #6B7280; margin: 0; text-align: left; hyphens: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 0.12rem; }
.ph-ack { font-size: 0.64rem; font-weight: 700; color: #15803D; background: #F0FDF4; border-radius: 999px; padding: 0.2rem 0.55rem; }
.ph-del { font-size: 0.64rem; font-weight: 700; color: #DC2626; }
.ph-nav { display: flex; justify-content: space-between; background: #F1EAFB; border-radius: 15px; padding: 0.55rem 0.2rem 0.45rem; }
.ph-nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.22rem; font-size: 0.54rem; color: #374151; }
.ph-nav-item svg { width: 16px; height: 16px; }
.ph-nav-item.active { color: #111827; }
.ph-nav-item.active svg { background: #E4DAFB; border-radius: 999px; padding: 3px; box-sizing: content-box; }

.lede, .card p, .card--wide p, .layer p, .sdk-ledger-row p, .boundary li, .step p {
    text-align: justify; -webkit-hyphens: auto; hyphens: auto;
}
@media (min-width: 54rem) { .cards--3 { grid-template-columns: repeat(3, 1fr); } }
.card .phase { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--patina); }
.card .who { font-family: var(--mono); font-size: 0.68rem; color: var(--ink-3); letter-spacing: 0.03em; margin-top: -0.2rem; }
.card ol { margin: 0.1rem 0 0; padding-left: 1.3rem; display: flex; flex-direction: column; gap: 0.45rem; }
.card ol li { font-size: 0.88rem; color: var(--ink-2); }
.card ol li b { color: var(--ink); font-weight: 650; }

/* ---------- process steps ---------- */
.steps { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (min-width: 52rem) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { background: var(--paper-raised); padding: 1.6rem 1.4rem; display: flex; flex-direction: column; gap: 0.5rem; }
.step-no { font-family: var(--mono); font-size: 0.82rem; color: var(--patina); letter-spacing: 0.08em; }
.step h3 { font-family: var(--body); font-size: 1.12rem; font-weight: 650; }
.step p { font-size: 1rem; color: var(--ink-2); max-width: none; }

/* ---------- system map ---------- */
.sysmap { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (min-width: 60rem) { .sysmap { grid-template-columns: 1fr 1.2fr 1fr; } }
.node { background: var(--paper-raised); padding: 1.5rem 1.4rem; display: flex; flex-direction: column; gap: 0.9rem; position: relative; }
.node-label { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--patina); }
.node h3 { font-family: var(--body); font-size: 1.05rem; font-weight: 650; }
.node .tech { font-family: var(--mono); font-size: 0.7rem; color: var(--ink-3); letter-spacing: 0.04em; }
.node ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.node li { font-size: 0.86rem; color: var(--ink-2); padding-left: 1rem; position: relative; max-width: none; }
.node li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 5px; height: 5px; background: var(--patina); }
.node--flow::after {
    content: "→"; position: absolute; z-index: 2;
    right: -1px; top: 50%; transform: translate(50%, -50%);
    width: 1.6rem; height: 1.6rem; display: grid; place-items: center;
    font-family: var(--mono); font-size: 0.9rem; color: var(--patina);
    background: var(--paper); border: 1px solid var(--rule);
}
@media (max-width: 60rem) {
    .node--flow::after { right: 50%; top: auto; bottom: -1px; transform: translate(50%, 50%); content: "↓"; }
}
.sysmap-note { font-family: var(--mono); font-size: 0.84rem; color: var(--ink-3); line-height: 1.7; max-width: none; }

/* ---------- control-panel preview ---------- */
.panel-frame { margin: 0; border: 1px solid var(--rule); background: var(--paper-raised); box-shadow: 0 18px 40px -28px var(--shadow); overflow: hidden; }
.panel-body { display: grid; grid-template-columns: 13.5rem 1fr; min-height: 26rem; }

.panel-side { border-right: 1px solid var(--rule); padding: 1rem 0.8rem; display: flex; flex-direction: column; gap: 0.12rem; }
.panel-brand { display: flex; align-items: center; gap: 0.5rem; padding: 0.1rem 0.4rem 0.9rem; }
.panel-brand img { width: 22px; height: auto; }
.panel-brand b { font-family: var(--display); font-weight: 800; font-stretch: 112%; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.01em; line-height: 1.15; display: block; }
.panel-brand em { font-family: var(--mono); font-style: normal; font-size: 0.56rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--patina); }
.panel-nav { display: flex; align-items: center; gap: 0.6rem; padding: 0.48rem 0.55rem; border-radius: 5px; font-size: 0.84rem; color: var(--ink-2); }
.panel-nav svg { width: 15px; height: 15px; flex-shrink: 0; opacity: 0.65; }
.panel-nav.active { background: var(--patina-wash); color: var(--patina); font-weight: 650; }
.panel-nav.active svg { opacity: 1; }
.panel-user { margin-top: auto; padding-top: 1rem; display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; }
.panel-user .em { font-family: var(--mono); font-size: 0.64rem; color: var(--ink-3); }
.panel-signout { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.05em; color: var(--ink-2); border: 1px solid var(--rule-strong); border-radius: 3px; padding: 0.22rem 0.6rem; }

.panel-main { padding: 1.3rem 1.5rem; display: flex; flex-direction: column; gap: 1.15rem; min-width: 0; min-height: 23rem; }
.panel-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.panel-eyebrow { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--patina); }
.panel-title { font-family: var(--display); font-weight: 700; font-stretch: 110%; font-size: 1.5rem; line-height: 1.1; margin-top: 0.25rem; }
.panel-big { text-align: right; flex-shrink: 0; }
.panel-big b { font-family: var(--display); font-weight: 700; font-size: 1.75rem; line-height: 1; display: block; }
.panel-big span { font-family: var(--mono); font-size: 0.55rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.panel-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.panel-stat { background: var(--paper-raised); padding: 0.75rem 0.85rem; display: flex; flex-direction: column; gap: 0.28rem; }
.panel-stat .k { font-family: var(--mono); font-size: 0.54rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); }
.panel-stat b { font-family: var(--display); font-weight: 700; font-size: 1.35rem; line-height: 1; }
.panel-stat .d { font-size: 0.66rem; color: var(--ink-3); line-height: 1.3; }
.panel-chart { border: 1px solid var(--rule); background: var(--paper-raised); padding: 0.7rem 0.8rem; }
.panel-chart svg { display: block; width: 100%; height: auto; }

.panel-view { display: none; flex-direction: column; gap: 1.05rem; min-width: 0; }
.panel-view.active { display: flex; animation: panelfade 0.5s ease; }
@keyframes panelfade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.panel-tbl { display: flex; flex-direction: column; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.panel-tr { background: var(--paper-raised); display: grid; align-items: center; gap: 0.7rem; padding: 0.52rem 0.85rem; font-size: 0.8rem; color: var(--ink-2); }
.panel-tr.head { font-family: var(--mono); font-size: 0.54rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); }
.panel-tr b { color: var(--ink); font-weight: 600; }
.panel-tr .sub { color: var(--ink-3); font-size: 0.68rem; }
.panel-tr span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-badge { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.04em; padding: 0.1rem 0.45rem; border-radius: 3px; background: var(--patina-wash); color: var(--patina); justify-self: start; white-space: nowrap; }
.panel-badge.mut { background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink-3); }
.panel-code { font-family: var(--mono); font-size: 0.7rem; color: var(--ink-3); }
.panel-acts { display: flex; gap: 0.3rem; justify-self: end; overflow: visible; }
.panel-btn { font-family: var(--mono); font-size: 0.56rem; color: var(--ink-2); border: 1px solid var(--rule-strong); border-radius: 3px; padding: 0.12rem 0.42rem; white-space: nowrap; }
.panel-btn.warn { color: var(--refused); border-color: color-mix(in srgb, var(--refused) 45%, transparent); }
.panel-tbl--orgs .panel-tr { grid-template-columns: 1fr 7.5rem 4.5rem; }
.panel-tbl--apps .panel-tr { grid-template-columns: 1fr 0.9fr 4.4rem 4.6rem; }
.panel-tbl--roles .panel-tr { grid-template-columns: 1fr 4.5rem 1.4fr; }
.panel-tbl--users .panel-tr { grid-template-columns: 1.4fr 6rem 4.8rem 3.8rem auto; }
.panel-tbl--clients .panel-tr { grid-template-columns: 1fr 1.4fr 1fr; }
.panel-tbl--audit .panel-tr { grid-template-columns: 8rem 1fr auto; }
.panel-tbl--devices .panel-tr { grid-template-columns: 1fr 5.5rem 6.5rem auto; }

.panel-plan { border: 1px solid var(--rule); background: var(--paper-raised); padding: 1rem 1.2rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.panel-plan .k { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--patina); }
.panel-plan .name { font-family: var(--body); font-weight: 700; font-size: 1.15rem; margin-top: 0.2rem; }
.panel-plan .d { font-size: 0.76rem; color: var(--ink-3); margin-top: 0.15rem; }
.panel-plan .req { margin-top: 0.55rem; font-family: var(--mono); font-size: 0.58rem; color: var(--ink-2); border: 1px solid var(--rule-strong); border-radius: 3px; padding: 0.22rem 0.55rem; display: inline-block; }
.panel-ring { position: relative; width: 4.4rem; height: 4.4rem; flex-shrink: 0; display: grid; place-items: center; }
.panel-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.panel-ring b { position: absolute; font-family: var(--display); font-weight: 700; font-size: 1.1rem; line-height: 1; }
.panel-ring .lim { position: absolute; bottom: -1.35rem; left: 50%; transform: translateX(-50%); font-family: var(--mono); font-size: 0.52rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--refused); white-space: nowrap; }

.panel-choice { display: flex; flex-direction: column; gap: 0.5rem; border: 1px solid var(--rule); background: var(--paper-raised); padding: 0.9rem 1.1rem; }
.panel-choice .opt { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: var(--ink-2); }
.panel-choice .opt .dot { width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--rule-strong); flex-shrink: 0; display: grid; place-items: center; }
.panel-choice .opt.sel { color: var(--ink); font-weight: 650; }
.panel-choice .opt.sel .dot { border-color: var(--patina); }
.panel-choice .opt.sel .dot::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--patina); }
.panel-files { display: flex; flex-direction: column; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.panel-file-row { background: var(--paper-raised); display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 0.7rem; padding: 0.5rem 0.85rem; font-size: 0.78rem; color: var(--ink-2); }
.panel-file-row b { color: var(--ink); font-weight: 600; }
.panel-file-row .tmpl { font-family: var(--mono); font-size: 0.58rem; color: var(--patina); border: 1px solid color-mix(in srgb, var(--patina) 35%, transparent); border-radius: 3px; padding: 0.16rem 0.5rem; white-space: nowrap; }
.panel-file-row .upl { font-family: var(--mono); font-size: 0.58rem; color: var(--ink-3); border: 1px solid var(--rule-strong); border-radius: 3px; padding: 0.16rem 0.5rem; white-space: nowrap; }
.panel-import-acts { display: flex; gap: 0.5rem; }
.panel-import-acts span { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.04em; padding: 0.4rem 0.8rem; border-radius: 3px; }
.panel-import-acts .validate { color: var(--ink); background: var(--paper-raised); border: 1px solid var(--rule-strong); }
.panel-import-acts .commit { color: var(--paper); background: var(--ink); }
.panel-result { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.panel-result .cell { background: var(--paper-raised); padding: 0.65rem 0.8rem; display: flex; flex-direction: column; gap: 0.2rem; }
.panel-result .k { font-family: var(--mono); font-size: 0.52rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.panel-result b { font-family: var(--display); font-weight: 700; font-size: 1.15rem; }
@media (prefers-reduced-motion: reduce) { .panel-view.active { animation: none; } }

@media (max-width: 52rem) {
    .panel-body { grid-template-columns: 1fr; }
    .panel-side { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.4rem; border-right: 0; border-bottom: 1px solid var(--rule); }
    .panel-brand { width: 100%; padding-bottom: 0.3rem; }
    .panel-user { display: none; }
    .panel-nav { font-size: 0.72rem; padding: 0.3rem 0.5rem; border: 1px solid var(--rule); }
    .panel-nav svg { display: none; }
    .panel-stats { grid-template-columns: repeat(2, 1fr); }
    .panel-top { flex-direction: column; }
    .panel-big { text-align: left; }
    .panel-tbl--users .panel-tr { grid-template-columns: 1fr auto auto; }
    .panel-tbl--users .panel-tr > :nth-child(2),
    .panel-tbl--users .panel-tr > :nth-child(5) { display: none; }
    .panel-tbl--apps .panel-tr { grid-template-columns: 1fr auto; }
    .panel-tbl--apps .panel-tr > :nth-child(2),
    .panel-tbl--apps .panel-tr > :nth-child(3) { display: none; }
    .panel-file-row { grid-template-columns: 1fr; gap: 0.35rem; }
    .panel-plan { flex-direction: column; align-items: flex-start; }
}

/* ---------- code specimen ---------- */
.specimen {
    border: 1px solid var(--rule); background: var(--paper-raised);
    overflow-x: auto; box-shadow: 0 18px 40px -28px var(--shadow);
}
.specimen pre { margin: 0; padding: 1.3rem 1.4rem; font-family: var(--mono); font-size: 0.82rem; line-height: 1.7; }
.specimen .c { color: var(--ink-3); }
.specimen .k { color: var(--patina); }
.specimen .r { color: var(--refused); }

/* ---------- install commands ---------- */
.install-grid { display: flex; flex-direction: column; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.install-row {
    background: var(--paper-raised); padding: 0.85rem 1.1rem;
    display: grid; grid-template-columns: 5.5rem 1fr auto; align-items: center; gap: 0.9rem;
}
.install-label {
    font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--patina); text-decoration: none; border-bottom: 1px solid transparent;
}
.install-label:hover { border-bottom-color: var(--patina); }
.install-row code { font-family: var(--mono); font-size: 0.86rem; color: var(--ink); overflow-x: auto; white-space: nowrap; }
.install-copy {
    font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--ink-2); background: none; border: 1px solid var(--rule-strong); border-radius: 3px;
    padding: 0.3rem 0.6rem; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease;
}
.install-copy:hover { color: var(--ink); border-color: var(--ink); }
.install-copy.is-copied { color: var(--patina); border-color: var(--patina); }
@media (max-width: 40rem) {
    .install-row { grid-template-columns: 1fr auto; grid-template-areas: "label copy" "code code"; }
    .install-label { grid-area: label; }
    .install-copy { grid-area: copy; }
    .install-row code { grid-area: code; }
}

/* ---------- SDK switcher ---------- */
.sdk-tabs {
    display: flex; flex-wrap: wrap; gap: 1px;
    background: var(--rule); border: 1px solid var(--rule); border-bottom: none;
}
.sdk-tab {
    flex: 1 1 auto; min-width: 7rem;
    font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.09em; text-transform: uppercase;
    padding: 0.8rem 0.9rem; border: 0; cursor: pointer;
    background: var(--paper-raised); color: var(--ink-3);
    transition: color 0.2s ease, background 0.2s ease;
}
.sdk-tab:hover { color: var(--ink); }
.sdk-tab[aria-selected="true"] { color: var(--paper); background: var(--ink); }
.sdk-tab:focus-visible { outline: 2px solid var(--patina); outline-offset: -3px; }
.sdk-panels { position: relative; }
.sdk-panel[hidden] { display: none; }
.sdk-panel { animation: sdk-in 0.32s ease both; }
@keyframes sdk-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.sdk-count {
    font-family: var(--mono); font-size: 0.74rem; color: var(--ink-3);
    border: 1px solid var(--rule); border-top: none;
    padding: 0.7rem 1.4rem; background: var(--paper-raised);
}
.sdk-count b { color: var(--patina); font-weight: 650; }

.sdk-frameworks { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (min-width: 46rem) { .sdk-frameworks { grid-template-columns: repeat(4, 1fr); } }
.sdk-fw { background: var(--paper-raised); padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.35rem; }
.sdk-fw h4 { font-family: var(--body); font-size: 0.92rem; font-weight: 650; margin: 0; letter-spacing: 0; }
.sdk-fw .fw { font-family: var(--mono); font-size: 0.66rem; color: var(--patina); letter-spacing: 0.03em; }
.sdk-fw p { font-size: 0.8rem; color: var(--ink-2); margin: 0; max-width: none; }

/* ---------- ledger ----------
   Named .sdk-ledger, not .ledger: styles.css already owns a .ledger
   component (dt/dd based, used on security.html), and its ".ledger div"
   selector is more specific than a bare class, so it was silently winning
   the cascade here and turning this into a flex row instead of the grid
   below. Different name, no collision. */
.sdk-ledger { border: 1px solid var(--rule); background: var(--rule); display: grid; gap: 1px; }
.sdk-ledger-row {
    background: var(--paper-raised); padding: 1.3rem 1.5rem;
    display: grid; grid-template-columns: 1fr; gap: 0.35rem;
}
.sdk-ledger-n {
    font-family: var(--mono); font-size: 1.15rem; color: var(--patina);
    font-weight: 650; font-variant-numeric: tabular-nums;
    text-align: right;
}
.sdk-ledger-row h3 { font-family: var(--body); font-size: 0.97rem; font-weight: 650; letter-spacing: 0; }
.sdk-ledger-row p { font-size: 0.9rem; color: var(--ink-2); margin: 0; max-width: var(--measure); }
@media (min-width: 40rem) {
    .sdk-ledger-row {
        grid-template-columns: 6rem 1fr;
        grid-template-areas: "n h" ". p";
        column-gap: 1.6rem;
        row-gap: 0.4rem;
        align-items: start;
    }
    .sdk-ledger-n { grid-area: n; padding-top: 0.15rem; }
    .sdk-ledger-row h3 { grid-area: h; }
    .sdk-ledger-row p { grid-area: p; }
}

/* ---------- pricing ---------- */
.billing {
    display: inline-flex; gap: 1px; align-self: start;
    background: var(--rule); border: 1px solid var(--rule);
}
.billing button {
    font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.09em; text-transform: uppercase;
    padding: 0.55rem 1rem; border: 0; cursor: pointer;
    background: var(--paper-raised); color: var(--ink-3);
    transition: color 0.2s ease, background 0.2s ease;
}
.billing button:hover { color: var(--ink); }
.billing button[aria-pressed="true"] { color: var(--paper); background: var(--ink); }
.billing button:focus-visible { outline: 2px solid var(--patina); outline-offset: -3px; }
.billing .save { color: var(--patina); margin-left: 0.5ch; }
.billing button[aria-pressed="true"] .save { color: inherit; opacity: 0.8; }

.plans { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (min-width: 52rem) { .plans { grid-template-columns: repeat(3, 1fr); } }
.plan { background: var(--paper-raised); padding: 1.9rem 1.6rem; display: flex; flex-direction: column; gap: 1rem; }
.plan.feature { background: var(--patina-wash); }
.plan-name { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--patina); }
.plan-price { display: flex; align-items: baseline; gap: 0.4ch; }
.plan-amount { font-family: var(--display); font-size: 2.5rem; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.plan-unit { font-size: 0.82rem; color: var(--ink-3); }
.plan-meter { font-size: 0.95rem; color: var(--ink); font-weight: 650; }
.plan-note { font-size: 0.88rem; color: var(--ink-2); }
.plan ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.55rem; }
.plan li { font-size: 0.9rem; color: var(--ink-2); padding-left: 1.3rem; position: relative; }
.plan li::before { content: "—"; position: absolute; left: 0; color: var(--patina); }
.plan .btn { margin-top: auto; text-align: center; }
.price-fine {
    font-family: var(--mono); font-size: 0.74rem; color: var(--ink-3);
    line-height: 1.7; max-width: 64rem;
}

/* ---------- honest boundary ---------- */
.boundary { border-left: 2px solid var(--patina); padding-left: clamp(1rem, 3vw, 2rem); }
.boundary ul { margin: 0; padding-left: 1.1rem; color: var(--ink-2); }
.boundary li { margin-block: 0.4rem; max-width: var(--measure); }

/* ---------- booking calendar ---------- */
.scheduler {
    border: 1px solid var(--rule); background: var(--paper-raised);
    box-shadow: 0 18px 40px -28px var(--shadow); overflow: hidden;
}
.scheduler iframe { display: block; width: 100%; height: 700px; border: 0; }

/* ---------- close ---------- */
.cta-group { display: flex; flex-direction: column; align-items: flex-start; gap: 1.15rem; }
.actions { display: flex; flex-wrap: wrap; gap: 0.8rem; }

.text-link {
    font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--ink-3); text-decoration: none; transition: color 0.15s ease;
}
.text-link:hover { color: var(--patina); }
.text-link span { display: inline-block; transition: transform 0.15s ease; }
.text-link:hover span { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
    .text-link span { transition: none; }
}