@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=JetBrains+Mono:wght@400;500;700&display=swap");

/* Bleed bands extend past the .responsive container; clip so the document never scrolls sideways. */
html { overflow-x: clip; }
body { overflow-x: clip; }

.hp {
    /* ── type ─────────────────────────────────────────────────────────── */
    --hp-font-display: "Bricolage Grotesque", "Be Vietnam Pro", sans-serif;
    --hp-font-body: "Be Vietnam Pro", sans-serif;
    --hp-font-mono: "JetBrains Mono", ui-monospace, "Menlo", monospace;

    --hp-text-xs: 0.75rem;
    --hp-text-sm: 0.8125rem;
    --hp-text-base: 1rem;
    --hp-text-md: 1.0625rem;
    --hp-text-lg: 1.25rem;
    --hp-text-xl: 1.5rem;
    --hp-text-2xl: clamp(1.6rem, 2.2vw + 0.75rem, 2.4rem);
    --hp-text-display: clamp(2.3rem, 4.4vw + 0.6rem, 4.1rem);

    /* ── space (4pt) ──────────────────────────────────────────────────── */
    --hp-space-2xs: 0.25rem;
    --hp-space-xs: 0.5rem;
    --hp-space-sm: 0.75rem;
    --hp-space-md: 1rem;
    --hp-space-lg: 1.5rem;
    --hp-space-xl: 2.5rem;
    --hp-space-2xl: 4rem;
    --hp-space-3xl: 6rem;
    --hp-space-4xl: 8.5rem;

    /* ── colour · derived from the active forumify theme ──────────────── */
    --hp-ink: var(--c-text-primary);
    --hp-ink-2: color-mix(in oklab, var(--c-text-primary) 78%, var(--c-elevation-0));
    --hp-ink-3: color-mix(in oklab, var(--c-text-primary) 62%, var(--c-elevation-0));

    /* Bands stay on the page's elevation step and are marked by a stronger warm tint plus
       hairlines; surfaces climb one step. That keeps "raised" reading as raised in both the
       light and the dark theme, where the platform's elevation ramp runs in opposite
       directions. */
    --hp-band: color-mix(in oklab, var(--c-elevation-0) 93%, var(--c-call-to-action));
    --hp-surface: color-mix(in oklab, var(--c-elevation-1) 97%, var(--c-call-to-action));
    --hp-surface-2: color-mix(in oklab, var(--c-elevation-2) 96%, var(--c-call-to-action));

    --hp-rule: color-mix(in oklab, var(--c-text-primary) 13%, transparent);
    --hp-rule-2: color-mix(in oklab, var(--c-text-primary) 26%, transparent);
    /* Control boundaries and the unchecked matrix boxes need 3:1, which rule-2 misses. */
    --hp-rule-3: color-mix(in oklab, var(--c-text-primary) 52%, transparent);

    --hp-accent: var(--c-call-to-action);
    --hp-accent-deep: var(--c-call-to-action-accent);
    --hp-accent-ink: var(--c-call-to-action-text);
    --hp-accent-wash: color-mix(in oklab, var(--c-call-to-action) 14%, transparent);
    --hp-primary: var(--c-primary);
    --hp-primary-ink: var(--c-primary-text);
    --hp-focus: var(--c-call-to-action-accent);

    /* ── shape, depth, motion ─────────────────────────────────────────── */
    --hp-radius: 10px;
    --hp-radius-sm: 6px;
    --hp-radius-pill: 999px;
    --hp-shadow: 0 1px 2px color-mix(in oklab, var(--c-primary) 12%, transparent);
    --hp-shadow-lift: 0 6px 18px color-mix(in oklab, var(--c-primary) 16%, transparent);

    --hp-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --hp-ease-in: cubic-bezier(0.7, 0, 0.84, 0);
    --hp-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --hp-dur-micro: 120ms;
    --hp-dur-short: 200ms;
    --hp-dur-long: 380ms;

    --hp-z-sticky: 200;

    font-family: var(--hp-font-body);
    font-weight: 400;
    color: var(--hp-ink);
    font-size: var(--hp-text-base);
    line-height: 1.6;
    padding-block: var(--hp-space-xl) var(--hp-space-3xl);
    display: flex;
    flex-direction: column;
    gap: var(--hp-space-3xl);
}

/* ─────────────────────────────  primitives  ───────────────────────────── */

.hp :where(h1, h2, h3) {
    font-family: var(--hp-font-display);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.1;
    margin: 0;
    overflow-wrap: anywhere;
    min-width: 0;
    text-wrap: balance;
}

.hp :where(p) { margin: 0; }
.hp :where(ul, ol) { margin: 0; padding: 0; }

.hp-display {
    font-size: var(--hp-text-display);
    font-weight: 800;
    max-width: 22ch;
}

.hp-h2 { font-size: var(--hp-text-2xl); }

.hp-lede {
    font-size: var(--hp-text-md);
    color: var(--hp-ink-2);
    max-width: 54ch;
    line-height: 1.65;
}

.hp-sub {
    color: var(--hp-ink-2);
    max-width: 62ch;
    font-size: var(--hp-text-base);
}

.hp-head {
    display: flex;
    flex-direction: column;
    gap: var(--hp-space-md);
    margin-bottom: var(--hp-space-2xl);
}

.hp-head--tight { margin-bottom: var(--hp-space-xl); }

.hp-head--row {
    margin-bottom: var(--hp-space-xl);
    gap: var(--hp-space-lg);
}

/* Bleed a band out to the viewport edges from inside .responsive. */
.hp-bleed {
    margin-inline: calc(50% - 50vw);
    padding-inline: calc(50vw - 50%);
}

/* ─────────────────────────────  buttons + links  ──────────────────────── */

.hp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--hp-space-xs);
    min-height: 44px;
    padding-inline: var(--hp-space-lg);
    border: 1px solid transparent;
    border-radius: var(--hp-radius-pill);
    font-family: var(--hp-font-body);
    font-size: var(--hp-text-sm);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transition:
        background-color var(--hp-dur-short) var(--hp-ease-out),
        border-color var(--hp-dur-short) var(--hp-ease-out),
        color var(--hp-dur-short) var(--hp-ease-out),
        transform var(--hp-dur-micro) var(--hp-ease-out);
}

.hp-btn i { font-size: 1.15em; }

.hp-btn--primary {
    background: var(--hp-accent);
    color: var(--hp-accent-ink);
}

.hp-btn--primary:hover {
    background: var(--hp-accent-deep);
    color: var(--hp-accent-ink);
    transform: translateY(-1.5px);
}

.hp-btn--outline {
    border-color: var(--hp-rule-3);
    color: var(--hp-ink);
    background: transparent;
}

.hp-btn--outline:hover {
    border-color: var(--hp-ink);
    color: var(--hp-ink);
    background: color-mix(in oklab, var(--c-text-primary) 5%, transparent);
    transform: translateY(-1.5px);
}

.hp-btn--ghost {
    color: var(--hp-ink);
    background: transparent;
    padding-inline: var(--hp-space-md);
}

.hp-btn--ghost:hover {
    color: var(--hp-ink);
    background: color-mix(in oklab, var(--c-text-primary) 6%, transparent);
}

.hp-btn:active { transform: translateY(0.5px); }
.hp-btn--sm { min-height: 38px; font-size: var(--hp-text-xs); padding-inline: var(--hp-space-md); }
.hp-btn--lg { min-height: 52px; font-size: var(--hp-text-base); padding-inline: var(--hp-space-xl); }

.hp-btn[aria-disabled="true"],
.hp-btn:disabled {
    cursor: default;
    opacity: 0.5;
    transform: none;
}

/* C3 · typographic link */
.hp-link {
    display: inline-flex;
    align-items: baseline;
    gap: var(--hp-space-xs);
    align-self: start;
    color: var(--hp-ink);
    font-weight: 600;
    font-size: var(--hp-text-sm);
    white-space: nowrap;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    text-decoration-color: var(--hp-rule-2);
    transition:
        text-decoration-color var(--hp-dur-short) var(--hp-ease-out),
        color var(--hp-dur-short) var(--hp-ease-out);
}

.hp-link:hover {
    color: var(--hp-accent-deep);
    text-decoration-color: var(--hp-accent);
}

.hp-link i {
    font-size: 0.95em;
    transition: transform var(--hp-dur-short) var(--hp-ease-out);
}

.hp-link:hover i { transform: translateX(2px); }
.hp-link:active { color: var(--hp-accent); }

.hp-link[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.55;
    text-decoration-color: var(--hp-rule);
}
.hp-link--sm { font-size: var(--hp-text-xs); }

.hp :where(a):focus-visible,
.hp :where(button):focus-visible {
    outline: 2px solid var(--hp-focus);
    outline-offset: 3px;
    border-radius: var(--hp-radius-sm);
}

/* Inline prose links keep the accent underline, not the platform navy. Scoped to the four
   places that actually run prose. A blanket p/li rule leaked into the feed and footnotes. */
.hp-hero__note a,
.hp-tier__aside a,
.hp-notes a,
.hp-close__note a {
    color: var(--hp-ink);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: var(--hp-accent);
}

.hp-hero__note a:hover,
.hp-tier__aside a:hover,
.hp-notes a:hover,
.hp-close__note a:hover {
    color: var(--hp-accent-deep);
}

/* ─────────────────────────────  hero (H2)  ────────────────────────────── */

.hp-hero { padding-block: var(--hp-space-lg) var(--hp-space-xl); }

.hp-hero__grid {
    display: grid;
    gap: var(--hp-space-2xl);
    align-items: center;
}

.hp-hero__lead {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: var(--hp-space-lg);
}

.hp-hero__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--hp-space-sm);
    margin-top: var(--hp-space-2xs);
}

.hp-hero__note {
    font-size: var(--hp-text-sm);
    color: var(--hp-ink-3);
}

.hp-sep { padding-inline: var(--hp-space-2xs); color: var(--hp-rule-2); }

/* recreated forum index */
.hp-panel {
    background: var(--hp-surface);
    border: 1px solid var(--hp-rule);
    border-radius: var(--hp-radius);
    box-shadow: var(--hp-shadow);
    overflow: hidden;
}

.hp-panel__bar {
    display: flex;
    align-items: center;
    gap: var(--hp-space-sm);
    padding: var(--hp-space-sm) var(--hp-space-md);
    border-bottom: 1px solid var(--hp-rule);
    background: color-mix(in oklab, var(--c-text-primary) 3%, transparent);
}

.hp-panel__title {
    font-size: var(--hp-text-sm);
    font-weight: 600;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hp-crumb { color: var(--hp-ink-3); font-weight: 400; }

.hp-panel__tag {
    margin-inline-start: auto;
    flex: none;
    font-family: var(--hp-font-mono);
    font-size: var(--hp-text-xs);
    color: var(--hp-ink-3);
    letter-spacing: -0.01em;
}

.hp-panel__tag--live { color: var(--hp-accent-deep); }

.hp-panel__rows { display: flex; flex-direction: column; }

.hp-row {
    display: flex;
    align-items: center;
    gap: var(--hp-space-sm);
    padding: var(--hp-space-sm) var(--hp-space-md);
    border-bottom: 1px solid var(--hp-rule);
}

.hp-row__icon {
    font-size: 1.15rem;
    color: var(--hp-ink-3);
    flex: none;
}

.hp-row__body { display: flex; flex-direction: column; min-width: 0; flex: 1; }

.hp-row__name {
    font-size: var(--hp-text-sm);
    font-weight: 600;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.hp-row__last {
    font-size: var(--hp-text-xs);
    color: var(--hp-ink-3);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hp-row__nums {
    display: grid;
    grid-template-columns: 6.5ch 7.5ch;
    gap: var(--hp-space-sm);
    flex: none;
    font-family: var(--hp-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--hp-text-xs);
    color: var(--hp-ink-2);
    text-align: end;
}

.hp-panel__cols {
    display: flex;
    justify-content: end;
    gap: var(--hp-space-sm);
    padding: var(--hp-space-xs) var(--hp-space-md);
    border-bottom: 1px solid var(--hp-rule);
    font-family: var(--hp-font-mono);
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--hp-ink-3);
}

.hp-panel__cols span:first-child { width: 6.5ch; text-align: end; }
.hp-panel__cols span:last-child { width: 7.5ch; text-align: end; }

.hp-hero__caption {
    margin-block-start: var(--hp-space-xs);
    font-size: var(--hp-text-xs);
    color: var(--hp-ink-3);
}

/* ─────────────────────────────  thesis band  ──────────────────────────── */

/* Replaces the old stat strip. Same job structurally (a full-bleed band that separates the
   hero from the tour) but it states the position instead of counting things. */
.hp-thesis {
    border-block: 1px solid var(--hp-rule);
    background: var(--hp-band);
    padding-block: var(--hp-space-xl);
}

.hp-thesis__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--hp-space-xl);
}

.hp-thesis__lead {
    display: flex;
    flex-direction: column;
    gap: var(--hp-space-md);
}

.hp-thesis__line {
    font-size: clamp(1.6rem, 2.2vw + 0.75rem, 2.4rem);
    font-weight: 800;
    max-width: 18ch;
}

.hp-claims {
    display: flex;
    flex-direction: column;
}

.hp-claim {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--hp-space-2xs);
    padding-block: var(--hp-space-md);
    border-top: 1px solid var(--hp-rule);
}

.hp-claim:first-child { border-top: none; padding-block-start: 0; }
.hp-claim:last-child { padding-block-end: 0; }

.hp-claim__name {
    font-size: var(--hp-text-base);
    font-weight: 700;
    letter-spacing: -0.015em;
}

.hp-claim p {
    color: var(--hp-ink-2);
    font-size: var(--hp-text-sm);
    line-height: 1.6;
    max-width: 62ch;
}

/* ─────────────────────────────  tour (F5)  ────────────────────────────── */

.hp-tour { display: flex; flex-direction: column; }

.hp-figure {
    display: grid;
    gap: var(--hp-space-lg);
    margin: 0;
    padding-block: var(--hp-space-xl);
    border-top: 1px solid var(--hp-rule);
}

.hp-tour .hp-figure:first-of-type { border-top: none; padding-top: 0; }

.hp-cap {
    display: flex;
    flex-direction: column;
    gap: var(--hp-space-xs);
    align-self: center;
}

.hp-cap__label {
    font-family: var(--hp-font-mono);
    font-size: var(--hp-text-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--hp-accent-deep);
}

.hp-cap p {
    color: var(--hp-ink-2);
    font-size: var(--hp-text-base);
    max-width: 46ch;
    line-height: 1.65;
    text-wrap: pretty;
}

.hp-cap .hp-link { margin-block-start: var(--hp-space-2xs); }

.hp-panel--tall { min-height: 0; }

/* ── page builder mock ── */
.hp-builder {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}

.hp-builder__palette {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hp-space-2xs);
    align-content: start;
    padding: var(--hp-space-md);
    border-bottom: 1px solid var(--hp-rule);
    background: color-mix(in oklab, var(--c-text-primary) 2%, transparent);
}

.hp-pill {
    font-family: var(--hp-font-mono);
    font-size: 0.6875rem;
    padding: var(--hp-space-2xs) var(--hp-space-xs);
    border: 1px solid var(--hp-rule-2);
    border-radius: var(--hp-radius-sm);
    color: var(--hp-ink-2);
    white-space: nowrap;
}

.hp-builder__canvas {
    display: flex;
    flex-direction: column;
    gap: var(--hp-space-sm);
    padding: var(--hp-space-md);
}

.hp-block {
    display: flex;
    flex-direction: column;
    gap: var(--hp-space-xs);
    padding: var(--hp-space-sm);
    border: 1px solid var(--hp-rule);
    border-radius: var(--hp-radius-sm);
}

.hp-block--split {
    flex-direction: row;
    gap: var(--hp-space-sm);
    border: none;
    padding: 0;
}

.hp-block__col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--hp-space-xs);
    padding: var(--hp-space-sm);
    border: 1px solid var(--hp-rule);
    border-radius: var(--hp-radius-sm);
}

.hp-block__tag {
    font-family: var(--hp-font-mono);
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--hp-ink-3);
}

.hp-skel {
    display: block;
    height: 6px;
    border-radius: 3px;
    background: color-mix(in oklab, var(--c-text-primary) 11%, transparent);
}

.hp-skel--title {
    height: 10px;
    width: 45%;
    background: color-mix(in oklab, var(--c-text-primary) 20%, transparent);
}

.hp-skel--short { width: 62%; }

.hp-skel--tile {
    height: 48px;
    border-radius: var(--hp-radius-sm);
    background:
        repeating-linear-gradient(
            135deg,
            color-mix(in oklab, var(--c-call-to-action) 16%, transparent) 0 6px,
            transparent 6px 12px
        ),
        color-mix(in oklab, var(--c-text-primary) 7%, transparent);
}

.hp-block--drop {
    align-items: center;
    justify-content: center;
    min-height: 44px;
    border-style: dashed;
    border-color: var(--hp-accent);
    background: var(--hp-accent-wash);
    color: var(--hp-accent-deep);
    font-size: var(--hp-text-xs);
    letter-spacing: 0.02em;
}

/* ── template editor mock ── */
.hp-editor {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.hp-tree {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--hp-space-md);
    border-bottom: 1px solid var(--hp-rule);
    font-family: var(--hp-font-mono);
    font-size: var(--hp-text-xs);
    color: var(--hp-ink-2);
    background: color-mix(in oklab, var(--c-text-primary) 2%, transparent);
}

.hp-tree__dir {
    display: flex;
    align-items: center;
    gap: var(--hp-space-xs);
    font-weight: 500;
    color: var(--hp-ink);
}

.hp-tree__dir i { color: var(--hp-accent); font-size: 0.95rem; }

.hp-tree__file { padding-inline-start: 1.35rem; }

.hp-tree__file.is-open {
    color: var(--hp-accent-deep);
    font-weight: 500;
}

.hp-editor__main { display: flex; flex-direction: column; min-width: 0; }

.hp-code {
    margin: 0;
    padding: var(--hp-space-md);
    font-family: var(--hp-font-mono);
    font-size: var(--hp-text-xs);
    line-height: 1.85;
    color: var(--hp-ink-2);
    overflow-x: auto;
    tab-size: 2;
}

.hp-gut {
    display: inline-block;
    width: 2.5ch;
    color: var(--hp-ink-3);
    opacity: 0.6;
    user-select: none;
}

.hp-tw { color: var(--hp-accent-deep); }
.hp-str { color: var(--hp-ink); }

.hp-vars {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hp-space-xs) var(--hp-space-md);
    padding: var(--hp-space-md);
    border-top: 1px solid var(--hp-rule);
    background: color-mix(in oklab, var(--c-text-primary) 2%, transparent);
}

.hp-var {
    display: inline-flex;
    align-items: center;
    gap: var(--hp-space-xs);
    font-family: var(--hp-font-mono);
    font-size: var(--hp-text-xs);
}

.hp-var__swatch {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    border: 1px solid var(--hp-rule-2);
    flex: none;
}

.hp-var__key { color: var(--hp-ink-2); }
.hp-var:has(.hp-var__swatch) .hp-var__key { color: var(--hp-ink); }
.hp-var__val { color: var(--hp-ink-3); }

/* ── automation flow ──
   A vertical flow rather than a wide SVG: an svg scaled to a 375 px column renders its
   labels at ~6 px. Real text in real boxes reflows, stays selectable, and inherits the
   theme tokens. The rail sits on one x so trigger → condition → fan-out reads as one line. */
.hp-flow {
    --hp-rail: 24px;
    display: flex;
    flex-direction: column;
    gap: var(--hp-space-lg);
    padding: var(--hp-space-lg) var(--hp-space-md);
}

.hp-fnode {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1px;
    max-width: 22rem;
    padding: var(--hp-space-xs) var(--hp-space-sm);
    border: 1px solid var(--hp-rule-2);
    border-radius: var(--hp-radius-sm);
    background: color-mix(in oklab, var(--c-text-primary) 3%, transparent);
    list-style: none;
}

.hp-fnode__kind {
    font-family: var(--hp-font-mono);
    font-size: 0.625rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--hp-ink-3);
}

.hp-fnode__name {
    font-family: var(--hp-font-mono);
    font-size: var(--hp-text-sm);
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--hp-ink);
    overflow-wrap: anywhere;
}

.hp-fnode--trigger {
    border-color: var(--hp-accent);
    background: var(--hp-accent-wash);
}

.hp-fnode--trigger .hp-fnode__kind { color: var(--hp-accent-deep); }
.hp-fnode--cond { border-style: dashed; }

/* trigger → condition */
.hp-flow > .hp-fnode + .hp-fnode::before {
    content: "";
    position: absolute;
    inset-inline-start: var(--hp-rail);
    top: calc(-1 * var(--hp-space-lg));
    height: var(--hp-space-lg);
    border-inline-start: 1px solid var(--hp-rule-2);
}

.hp-fbranch { list-style: none; }

/* condition → each action. The rows are contiguous (padding, not gap) so each row's rail
   segment meets the next one exactly; the last stops at its own tick. */
.hp-facts {
    display: flex;
    flex-direction: column;
    list-style: none;
}

.hp-fact {
    position: relative;
    display: grid;
    grid-template-columns: calc(var(--hp-rail) * 2) minmax(0, 1fr);
    align-items: center;
    padding-block: calc(var(--hp-space-sm) / 2);
    list-style: none;
}

.hp-fact__wire {
    position: absolute;
    inset-block: 0;
    inset-inline-start: var(--hp-rail);
    border-inline-start: 1px solid var(--hp-rule-2);
}

.hp-fact:first-child .hp-fact__wire { inset-block-start: calc(-1 * var(--hp-space-lg)); }
.hp-fact:last-child .hp-fact__wire { inset-block-end: 50%; }

.hp-fact::after {
    content: "";
    position: absolute;
    inset-inline-start: var(--hp-rail);
    top: 50%;
    width: var(--hp-rail);
    border-block-start: 1px solid var(--hp-rule-2);
}

.hp-fact .hp-fnode { grid-column: 2; }

/* ── permission matrix ──
   Real table markup, not a mock: it is tabular data, it should be readable by a screen
   reader, and it reflows to a scroll container rather than squashing on a phone. */
.hp-acl {
    padding: var(--hp-space-md);
    overflow-x: auto;
}

.hp-matrix {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--hp-text-sm);
}

.hp-matrix__cap {
    caption-side: bottom;
    padding-block-start: var(--hp-space-sm);
    font-size: var(--hp-text-xs);
    color: var(--hp-ink-3);
    text-align: start;
}

.hp-matrix th,
.hp-matrix td {
    padding: var(--hp-space-xs) var(--hp-space-sm);
    border-bottom: 1px solid var(--hp-rule);
    text-align: center;
    white-space: nowrap;
}

.hp-matrix thead th {
    font-family: var(--hp-font-mono);
    font-size: 0.625rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--hp-ink-3);
}

.hp-matrix tbody th,
.hp-matrix thead th:first-child {
    text-align: start;
    font-weight: 600;
    color: var(--hp-ink);
    text-transform: none;
    letter-spacing: -0.01em;
    font-family: var(--hp-font-body);
    font-size: var(--hp-text-sm);
}

.hp-matrix tbody tr:last-child th,
.hp-matrix tbody tr:last-child td { border-bottom: none; }

/* The platform stripes every tbody with a hard-coded rgba(0,0,0,.03) and adds a row hover.
   Neither is theme-aware, and the hover implies the rows are interactive. Take both over. */
.hp-matrix tbody tr:nth-child(even) {
    background-color: color-mix(in oklab, var(--c-text-primary) 4%, transparent);
}

.hp-matrix tbody tr:not(.disabled):hover { background-color: transparent; }

.hp-matrix i { font-size: 1.15rem; vertical-align: -0.15em; }
.hp-matrix .is-on i { color: var(--hp-accent); }
.hp-matrix .is-off i { color: var(--hp-rule-3); }

/* Screen-reader-only text: the checkbox glyphs alone are not a state. */
.hp-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ─────────────────────────────  spec sheet (F3)  ──────────────────────── */

/* The sheet itself is capped rather than the value text. Capping the text left the rules
   running the full container width with a half-empty right side on wide screens. */
.hp-spec {
    margin: 0;
    border-top: 1px solid var(--hp-rule);
}

.hp-spec__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--hp-space-2xs) var(--hp-space-xl);
    padding-block: var(--hp-space-md);
    border-bottom: 1px solid var(--hp-rule);
}

.hp-spec__key {
    display: flex;
    align-items: center;
    gap: var(--hp-space-xs);
    font-weight: 600;
    font-size: var(--hp-text-base);
    letter-spacing: -0.01em;
}

.hp-spec__key i { color: var(--hp-accent); font-size: 1.2rem; }

.hp-spec__val {
    margin: 0;
    color: var(--hp-ink-2);
    font-size: var(--hp-text-sm);
    line-height: 1.6;
    text-wrap: pretty;
}

/* ─────────────────────────────  plugin cards (F6)  ────────────────────── */

.hp-cards {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--hp-space-lg);
}

.hp-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--hp-surface);
    border: 1px solid var(--hp-rule);
    border-radius: var(--hp-radius);
    overflow: hidden;
    transition:
        transform var(--hp-dur-short) var(--hp-ease-out),
        border-color var(--hp-dur-short) var(--hp-ease-out),
        box-shadow var(--hp-dur-short) var(--hp-ease-out);
}

.hp-card:hover,
.hp-card:focus-within {
    transform: translateY(-3px);
    box-shadow: var(--hp-shadow-lift);
}

.hp-card__media {
    display: block;
    aspect-ratio: 16 / 9;
    pointer-events: none;
    background: var(--hp-surface-2);
    border-bottom: 1px solid var(--hp-rule);
}

.hp-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hp-card__meta {
    display: flex;
    flex-direction: column;
    gap: var(--hp-space-2xs);
    padding: var(--hp-space-md);
    flex: 1;
}

.hp-card__name {
    font-size: var(--hp-text-lg);
    font-weight: 700;
    line-height: 1.2;
}

.hp-card__name a {
    color: inherit;
    text-decoration: none;
    font-weight: inherit;
}

/* Stretch the title link over the tile so the whole card is clickable, while the DOM
   still holds exactly one link per product. */
.hp-card__name a::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.hp-card:hover .hp-card__name a { color: var(--hp-accent-deep); }

/* The ring belongs on the card, not on the few words of the title. */
.hp-card__name a:focus-visible { outline: none; }

.hp-card:focus-within {
    outline: 2px solid var(--hp-focus);
    outline-offset: 3px;
}

.hp-card__vendor {
    font-family: var(--hp-font-mono);
    font-size: var(--hp-text-xs);
    color: var(--hp-ink-3);
}

.hp-card__desc {
    color: var(--hp-ink-2);
    font-size: var(--hp-text-sm);
    line-height: 1.55;
    margin-block-start: var(--hp-space-xs);
}

.hp-card__price {
    margin-block-start: auto;
    padding-block-start: var(--hp-space-md);
    font-family: var(--hp-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--hp-text-base);
    font-weight: 500;
}

.hp-card__from,
.hp-card__per {
    font-size: var(--hp-text-xs);
    font-weight: 400;
    color: var(--hp-ink-3);
}

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

.hp-pricing {
    background: var(--hp-band);
    border-block: 1px solid var(--hp-rule);
    padding-block: var(--hp-space-2xl);
    scroll-margin-block-start: var(--hp-space-lg);
}

.hp-tiers {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--hp-space-lg);
    align-items: start;
}

.hp-tier {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: var(--hp-space-md);
    padding: var(--hp-space-lg);
    background: var(--hp-surface);
    border: 1px solid var(--hp-rule);
    border-radius: var(--hp-radius);
}

.hp-tier--pick {
    border-color: var(--hp-accent);
    box-shadow: 0 0 0 1px var(--hp-accent);
}

.hp-tier__badge {
    font-size: var(--hp-text-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--hp-accent-ink);
    background: var(--hp-accent);
    padding: var(--hp-space-2xs) var(--hp-space-sm);
    border-radius: var(--hp-radius-pill);
}

.hp-tier__name {
    font-size: var(--hp-text-xl);
    font-weight: 700;
}

.hp-tier__amount {
    font-family: var(--hp-font-display);
    font-weight: 800;
    font-size: clamp(2rem, 2.4vw + 1rem, 2.6rem);
    line-height: 1;
    letter-spacing: -0.035em;
    font-variant-numeric: tabular-nums;
}

.hp-tier__amount--talk {
    font-size: clamp(1.6rem, 1.8vw + 0.9rem, 2.1rem);
    color: var(--hp-ink-2);
}

.hp-tier__per {
    font-family: var(--hp-font-body);
    font-size: var(--hp-text-base);
    font-weight: 400;
    letter-spacing: 0;
    color: var(--hp-ink-3);
}

.hp-price { display: flex; flex-direction: column; gap: var(--hp-space-sm); align-items: start; }
.hp-price[data-billing="monthly"] .hp-price__yearly { display: none; }
.hp-price[data-billing="yearly"] .hp-price__monthly { display: none; }

.hp-price__hint {
    font-size: var(--hp-text-xs);
    color: var(--hp-ink-3);
}

.hp-toggle {
    display: inline-flex;
    padding: var(--hp-space-2xs);
    gap: 2px;
    border: 1px solid var(--hp-rule-3);
    border-radius: var(--hp-radius-pill);
    background: color-mix(in oklab, var(--c-text-primary) 4%, transparent);
}

.hp-toggle__btn {
    appearance: none;
    border: none;
    background: transparent;
    cursor: pointer;
    min-height: 36px;
    padding-inline: var(--hp-space-md);
    border-radius: var(--hp-radius-pill);
    font-family: var(--hp-font-body);
    font-size: var(--hp-text-xs);
    font-weight: 600;
    color: var(--hp-ink-2);
    white-space: nowrap;
    transition:
        background-color var(--hp-dur-short) var(--hp-ease-out),
        color var(--hp-dur-short) var(--hp-ease-out);
}

.hp-toggle__btn:hover { color: var(--hp-ink); }
.hp-toggle__btn:active { transform: translateY(0.5px); }

.hp-toggle__btn:disabled,
.hp-toggle__btn[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.55;
    transform: none;
}

.hp-toggle__btn.is-on {
    background: var(--hp-surface);
    color: var(--hp-ink);
    box-shadow: var(--hp-shadow);
}

.hp-tier__blurb {
    color: var(--hp-ink-2);
    font-size: var(--hp-text-sm);
    line-height: 1.6;
}

.hp-mail {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--hp-space-xs);
    font-size: var(--hp-text-sm);
}

.hp-mail__label { color: var(--hp-ink-2); }

.hp-mail__addr {
    font-weight: 600;
    color: var(--hp-ink);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: var(--hp-accent);
    user-select: all;
}

.hp-mail__addr:hover { color: var(--hp-accent-deep); }
.hp-mail__addr:active { color: var(--hp-accent); }

.hp-copy {
    display: inline-flex;
    align-items: center;
    gap: var(--hp-space-2xs);
    min-height: 28px;
    padding-inline: var(--hp-space-xs);
    border: 1px solid var(--hp-rule-3);
    border-radius: var(--hp-radius-sm);
    background: transparent;
    cursor: pointer;
    font-family: var(--hp-font-body);
    font-size: var(--hp-text-xs);
    font-weight: 500;
    color: var(--hp-ink-2);
    white-space: nowrap;
    transition:
        color var(--hp-dur-short) var(--hp-ease-out),
        border-color var(--hp-dur-short) var(--hp-ease-out);
}

.hp-copy:hover { color: var(--hp-ink); border-color: var(--hp-ink); }
.hp-copy:active { color: var(--hp-accent-deep); }
.hp-copy i { font-size: 0.95rem; }

.hp-copy[data-state="copied"],
.hp-copy[data-state="selected"] {
    color: var(--hp-accent-deep);
    border-color: var(--hp-accent);
}

.hp-copy[data-state] i { display: none; }

.hp-copy:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

@media (pointer: coarse) {
    .hp-copy { min-height: 44px; padding-inline: var(--hp-space-sm); }
}

.hp-tier__list {
    display: flex;
    flex-direction: column;
    gap: var(--hp-space-xs);
    width: 100%;
    margin-block-start: auto;
    padding-block-start: var(--hp-space-md);
    border-top: 1px solid var(--hp-rule);
}

.hp-tier__list li {
    display: flex;
    align-items: start;
    gap: var(--hp-space-xs);
    font-size: var(--hp-text-sm);
    line-height: 1.5;
    list-style: none;
}

.hp-tier__list i { font-size: 1.05rem; flex: none; margin-block-start: 0.1em; }
.hp-tier__list .is-yes i { color: var(--hp-accent); }
.hp-tier__list .is-no { color: var(--hp-ink-2); }
.hp-tier__list .is-no i { color: var(--hp-ink-3); }

.hp-fn {
    font-size: 0.6875rem;
    vertical-align: super;
    color: var(--hp-ink-3);
    text-decoration: none;
    margin-inline-start: 1px;
}

.hp-fn:hover { color: var(--hp-accent-deep); }

.hp-tier__aside {
    font-size: var(--hp-text-xs);
    color: var(--hp-ink-2);
    line-height: 1.55;
}

/* Full width, stacked. Each note reads as one line on a wide viewport, which is why the
   measure is deliberately left uncapped here: capping it puts the rule and the copy on
   different widths, which is the thing this replaced. */
.hp-notes {
    counter-reset: hp-note;
    display: flex;
    flex-direction: column;
    gap: var(--hp-space-sm);
    margin-block-start: var(--hp-space-xl);
    padding-block-start: var(--hp-space-md);
    border-top: 1px solid var(--hp-rule);
}

.hp-notes li {
    counter-increment: hp-note;
    list-style: none;
    font-size: var(--hp-text-xs);
    color: var(--hp-ink-3);
    line-height: 1.55;
    padding-inline-start: 1.6em;
    position: relative;
    text-wrap: pretty;
    scroll-margin-block-start: var(--hp-space-xl);
}

.hp-notes li::before {
    content: counter(hp-note);
    position: absolute;
    inset-inline-start: 0;
    color: var(--hp-accent-deep);
}

.hp-notes li:target { color: var(--hp-ink); }

/* ─────────────────────────────  testimonials (T1)  ────────────────────── */

.hp-quotes {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--hp-space-xl);
}

.hp-quote {
    display: grid;
    gap: var(--hp-space-md);
    margin: 0;
    padding-block-start: var(--hp-space-md);
    border-top: 2px solid var(--hp-rule);
}

.hp-quote__text {
    margin: 0;
    font-size: var(--hp-text-md);
    line-height: 1.6;
    color: var(--hp-ink);
    max-width: 58ch;
    text-wrap: pretty;
}

.hp-quote__by {
    display: flex;
    align-items: center;
    gap: var(--hp-space-sm);
}

.hp-quote__by img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    flex: none;
}

.hp-quote__by > span { display: flex; flex-direction: column; min-width: 0; }

.hp-quote__name { font-size: var(--hp-text-sm); font-weight: 600; }

.hp-quote__org {
    font-size: var(--hp-text-sm);
    color: var(--hp-ink-2);
    font-weight: 400;
    text-decoration: underline;
    text-decoration-color: var(--hp-rule-2);
    text-underline-offset: 3px;
}

.hp-quote__org:hover { color: var(--hp-accent-deep); text-decoration-color: var(--hp-accent); }

.hp-quote__note {
    font-size: var(--hp-text-xs);
    color: var(--hp-ink-3);
    margin-block-start: 2px;
}

/* ─────────────────────────────  update feeds  ─────────────────────────── */

.hp-feeds {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--hp-space-xl);
}

.hp-feed { display: flex; flex-direction: column; gap: var(--hp-space-sm); align-items: start; }

.hp-feed__title {
    font-size: var(--hp-text-base);
    font-weight: 700;
    letter-spacing: 0;
    padding-block-end: var(--hp-space-xs);
    border-bottom: 2px solid var(--hp-rule);
    width: 100%;
}

.hp-feed__list { display: flex; flex-direction: column; width: 100%; }

.hp-feed__list li { list-style: none; border-bottom: 1px solid var(--hp-rule); }

.hp-feed__list a {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--hp-space-2xs) var(--hp-space-md);
    padding-block: var(--hp-space-sm);
    color: var(--hp-ink);
    font-weight: 400;
    text-decoration: none;
    transition: color var(--hp-dur-short) var(--hp-ease-out);
}

.hp-feed__list a:hover { color: var(--hp-accent-deep); }

.hp-feed__topic { font-size: var(--hp-text-sm); font-weight: 500; }

.hp-feed__list time {
    font-family: var(--hp-font-mono);
    font-size: var(--hp-text-xs);
    color: var(--hp-ink-3);
    white-space: nowrap;
}

/* ─────────────────────────────  close  ────────────────────────────────── */

.hp-close {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: var(--hp-space-lg);
    padding-block-start: var(--hp-space-xl);
    border-top: 1px solid var(--hp-rule);
}

.hp-close__line {
    font-size: clamp(1.9rem, 3.4vw + 0.7rem, 3.1rem);
    font-weight: 800;
    max-width: 26ch;
}

.hp-close__note { font-size: var(--hp-text-sm); color: var(--hp-ink-3); }

/* ─────────────────────────────  sticky CTA (C4)  ──────────────────────── */

.hp-sticky {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: var(--hp-z-sticky);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--hp-space-sm) var(--hp-space-lg);
    padding: var(--hp-space-sm) var(--hp-space-md);
    padding-bottom: max(var(--hp-space-sm), env(safe-area-inset-bottom));
    background: var(--hp-surface);
    border-top: 1px solid var(--hp-rule-2);
    opacity: 0;
    transform: translateY(100%);
    pointer-events: none;
    transition:
        opacity var(--hp-dur-long) var(--hp-ease-out),
        transform var(--hp-dur-long) var(--hp-ease-out);
}

.hp-sticky[hidden] { display: none; }
.hp-sticky.is-in { opacity: 1; transform: translateY(0); pointer-events: auto; }

@media (pointer: coarse) {
    .hp-toggle__btn,
    .hp-btn--sm { min-height: 44px; }
}

/* Mobile scroll has its own physics: the bar arrives without a slide, and stays one row. */
@media (max-width: 39.999rem) {
    .hp-sticky {
        transform: none;
        transition: opacity var(--hp-dur-short) var(--hp-ease-out);
        flex-wrap: nowrap;
        justify-content: space-between;
        gap: var(--hp-space-sm);
    }

    .hp-sticky__text {
        font-size: var(--hp-text-xs);
        min-width: 0;
    }
}

.hp-sticky__text {
    font-size: var(--hp-text-sm);
    color: var(--hp-ink-2);
}

/* ─────────────────────────────  ≥ 40rem  ──────────────────────────────── */

@media (min-width: 40rem) {
    .hp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .hp-spec__row {
        grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
        align-items: baseline;
    }

    .hp-builder { grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); }

    .hp-builder__palette {
        border-bottom: none;
        border-inline-end: 1px solid var(--hp-rule);
        flex-direction: column;
        flex-wrap: nowrap;
    }

    .hp-pill { text-align: center; }

    .hp-editor { grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); }

    .hp-tree {
        border-bottom: none;
        border-inline-end: 1px solid var(--hp-rule);
    }

    .hp-quote { grid-template-columns: minmax(0, 1fr) minmax(0, 15rem); gap: var(--hp-space-xl); }
    .hp-quote__by { align-items: start; padding-block-start: 2px; }
}

/* ─────────────────────────────  ≥ 60rem  ──────────────────────────────── */

@media (min-width: 60rem) {
    .hp {
        padding-block: var(--hp-space-2xl) var(--hp-space-4xl);
        gap: var(--hp-space-3xl);
    }

    .hp-hero { padding-block: var(--hp-space-md) var(--hp-space-xl); }
    .hp-caps, .hp-plugins, .hp-proof, .hp-updates { padding-block-start: var(--hp-space-xl); }

    .hp-hero__grid {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        gap: var(--hp-space-3xl);
    }

    .hp-thesis {
        padding-block: var(--hp-space-2xl);
    }

    .hp-thesis__grid {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        gap: var(--hp-space-3xl);
    }

    .hp-figure {
        grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
        gap: var(--hp-space-2xl);
        padding-block: var(--hp-space-2xl);
        align-items: center;
    }

    /* alternate which side the panel sits on, so the tour has a rhythm */
    .hp-figure--flip { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
    .hp-figure--flip > .hp-panel { order: 2; }

    .hp-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    .hp-head--row { flex-direction: row; align-items: end; justify-content: space-between; }
    .hp-head--row .hp-link { align-self: end; padding-block-end: 0.35rem; }

    .hp-tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--hp-space-md); }
    .hp-tier { padding: var(--hp-space-xl) var(--hp-space-lg); height: 100%; }

    .hp-quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--hp-space-xl) var(--hp-space-2xl); }
    .hp-quote { grid-template-columns: minmax(0, 1fr); gap: var(--hp-space-md); }
    .hp-quote__by { align-items: center; padding-block-start: 0; }

    .hp-feeds { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--hp-space-2xl); }

    .hp-close { align-items: center; text-align: center; padding-block-start: var(--hp-space-2xl); }
    .hp-close__line { text-wrap: balance; }

    .hp-sticky { justify-content: center; }
}

/* ─────────────────────────────  ≥ 90rem  ──────────────────────────────── */

@media (min-width: 90rem) {
    .hp-figure { gap: var(--hp-space-3xl); }

    /* Wide enough for the longest row to sit on one line, narrow enough that the rules
       stop roughly where the copy stops. */
    .hp-spec { max-width: 56rem; }
    .hp-spec__row { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); }
}

/* ─────────────────────────────  reduced motion  ───────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .hp *,
    .hp *::before,
    .hp *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 150ms !important;
    }

    .hp-btn:hover,
    .hp-card:hover,
    .hp-card:focus-within {
        transform: none;
    }

    .hp-sticky { transform: none; transition: opacity 150ms linear; }
    .hp-link:hover i { transform: none; }
}