/* =========================================================================
   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); }
/* .cards draws its 1px rules as a grey container showing through the gaps,
   so an odd number of cards leaves the empty cell painted grey rather than
   blank. A trailing card that would sit alone spans the row instead. */
.card--span { grid-column: 1 / -1; }
.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; }
}

/* ---------- Narrow viewports: the phone mock ------------------------------
   .phone-frame is a fixed 320px wide plus 9px of padding each side, sitting
   inside a .card that adds 1.5rem of padding each side: 386px total, which
   overflowed a 375px viewport by the width of the scrollbar it then created.
   The mock is decorative, so it shrinks with the card rather than the card
   growing for it. */

@media (max-width: 26rem) {
    /* Grid and flex items default to min-width:auto, i.e. they refuse to go
       below their min-content width, and .phone-frame is flex-shrink:0 on top
       of that. Both have to be released or the fixed-width mock keeps
       inflating the card past the viewport. */
    .cards > .card--mobile {
        min-width: 0;
    }

    .card--mobile .card-copy,
    .card--mobile .phone-frame {
        min-width: 0;
    }

    .card--mobile .phone-frame {
        flex: 0 1 auto;
        width: 100%;
        max-width: 320px;
    }

    /* The card has `margin: 0 auto`, which disables justify-self:stretch on a
       grid item and leaves it fit-content sized — i.e. as wide as its
       min-content. width:100% pins it back to the track instead. */
    .card--mobile {
        width: 100%;
        margin: 0;
    }

    /* .ph-title and .ph-type are `white-space: nowrap` with an ellipsis, so
       their min-content is the full untruncated string. Inside a flex column
       that became the mock's min-content width, and the ellipsis never got a
       chance to engage. min-width:0 is what lets it. */
    .card--mobile .ph-card,
    .card--mobile .ph-title,
    .card--mobile .ph-type,
    .card--mobile .ph-screen {
        min-width: 0;
    }
}

/* =========================================================================
   Org-tree lead card. Lives here, not in styles.css: it only appears on this
   page, and `.card { flex-direction: column }` above has the same specificity
   as `.card--tree`, so a rule in the earlier stylesheet lost the tie and the
   card stacked instead of sitting side by side.
   ========================================================================= */

.card--tree {
    display: flex;
    /* .card is flex-direction:column; without resetting it here the copy and
       the diagram stack, and `flex: 1 1 26rem` on .card-copy resolves against
       the HEIGHT, which left a 26rem hole in the middle of the card. */
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: clamp(1.3rem, 3.5vw, 2.6rem);
}

.card--tree .card-copy {
    flex: 1 1 26rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.tree-fig {
    flex: 1 1 22rem;
    min-width: 0;
}

.tree-frame {
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--field);
    overflow: hidden;
}

.tree-frame svg {
    display: block;
    width: 100%;
    height: auto;
    padding: 0.9rem 0.8rem 1.1rem;
}

.tree-fig figcaption {
    margin-top: 0.7rem;
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--ink-3);
}

.card-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1.1rem;
    margin-top: 0.3rem;
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    color: var(--ink-3);
}

.legend-key {
    display: inline-block;
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 2px;
    vertical-align: -0.12em;
    margin-right: 0.2rem;
}

.legend-key--shared {
    background: var(--blue-bg);
    border: 1.5px solid var(--blue);
}

.legend-key--reg {
    background: var(--flag-bg);
    border: 1.5px dashed var(--flag);
}


/* ---------- Page titles inside a .split column ----------------------------
   .split's first column is a fixed 18rem, and h1 above scales to 5rem: that
   pairing only ever worked because every .split on this page held an h2.
   The pricing pages put the page's h1 there, which at 80px could not fit a
   word like "Abgerechnet" and hyphenated the heading down eleven lines.
   A title in that column takes the h2 size the column was measured for; the
   hero h1, which is not in a .split, keeps the full display scale. */

.split h1 {
    font-size: clamp(1.8rem, 3.4vw, 2.7rem);
    line-height: 1.12;
    letter-spacing: -0.015em;
    font-stretch: 112%;
}

/* German compounds still run long at that size, so the column gets a little
   more room on the German pages rather than the type getting smaller. */
@media (min-width: 56rem) {
    :lang(de) .split {
        grid-template-columns: 21rem 1fr;
    }
}

/* ---------- Hero: let the 1fr track shrink -------------------------------
   Grid items default to min-width:auto, so a `1fr` track never gets narrower
   than the widest item's min-content. The terminal figure's min-content is
   ~356px, which at 375px made the single-column hero track wider than its
   own container and left the page nudgeable ~1px sideways. The log panel
   already scrolls inside its own frame, so it does not need the room. */

.platform-hero > * {
    min-width: 0;
}