/* jwebview.css -- the JWebView landing page (/jwebview).
   Loaded after pure-browse.css, see the order-significant $stylesheets
   list in src/view/layout.php. Everything is scoped under .jw and reads
   the site's own tokens from theme.css; the only values defined here
   are the Java syntax colours, which have no counterpart in the theme. */

/* ---------- syntax colours ---------- */

/* Picked for at least 4.5:1 on --bg-neutral-section in both themes.
   The dark values apply via the media query and via data-theme="dark",
   same two-selector pattern as theme.css. Keep the two in sync. */
.jw {
    --syn-kw: #1E1EC6;
    --syn-st: #0B6B3A;
    --syn-ty: #8A3B00;
    --syn-fn: #7A2E9E;
    --syn-nu: #A3300A;
    --syn-an: #8A3B00;
    --syn-cm: #5C5C5C;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .jw {
        --syn-kw: #9DB4FF;
        --syn-st: #7FD1A0;
        --syn-ty: #F0B27A;
        --syn-fn: #D6A8F5;
        --syn-nu: #FF9E80;
        --syn-an: #F0B27A;
        --syn-cm: #A0A0A0;
    }
}

:root[data-theme="dark"] .jw {
    --syn-kw: #9DB4FF;
    --syn-st: #7FD1A0;
    --syn-ty: #F0B27A;
    --syn-fn: #D6A8F5;
    --syn-nu: #FF9E80;
    --syn-an: #F0B27A;
    --syn-cm: #A0A0A0;
}

.syn-kw { color: var(--syn-kw); }
.syn-st { color: var(--syn-st); }
.syn-ty { color: var(--syn-ty); }
.syn-fn { color: var(--syn-fn); }
.syn-nu { color: var(--syn-nu); }
.syn-an { color: var(--syn-an); }
.syn-cm { color: var(--syn-cm); font-style: italic; }

/* ---------- shared ---------- */

.jw {
    --jw-gap: var(--spacing-8);
    width: 100%;
    padding-bottom: var(--spacing-15);
}

.jw h1,
.jw h2,
.jw h3 {
    letter-spacing: var(--heading-tracking);
    line-height: var(--heading-leading);
    text-wrap: balance;
}

.jw-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.jw-tag {
    display: inline-block;
    padding: 0.25em 0.6em;
    border-radius: var(--rounded-full);
    background: var(--bg-info-section);
    color: var(--fg-info-body);
    font-size: var(--text-size-small);
    font-weight: var(--weight-medium);
    line-height: 1.4;
    white-space: nowrap;
}

.jw-tag-plain {
    background: var(--bg-neutral-surface);
    color: var(--fg-neutral-body);
}

.jw-note {
    max-width: var(--prose-width);
    margin: var(--spacing-6) 0 0;
    font-size: var(--text-size-label);
    color: var(--fg-neutral-muted);
}

.jw-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-3);
    margin: var(--spacing-8) 0 0;
}

.jw a:focus-visible,
.jw button:focus-visible,
.jw input:focus-visible,
.jw select:focus-visible,
.jw textarea:focus-visible,
.jw [tabindex]:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

/* ---------- hero ---------- */

.jw-hero {
    padding-top: var(--spacing-20);
}

.jw-hero h1 {
    max-width: 20ch;
    margin: var(--spacing-4) 0 var(--spacing-6);
    font-size: clamp(40px, 7.4vw, 84px);
    line-height: 1.04;
    letter-spacing: -0.035em;
}

.jw-lead,
.jw-section-lead {
    max-width: 46ch;
    margin: 0;
    font-size: var(--text-size-lead);
    color: var(--fg-neutral-body);
    text-wrap: pretty;
}

.jw-section-lead + .jw-section-lead {
    margin-top: var(--spacing-4);
}

/* ---------- hero visual ---------- */

.jw-stage {
    margin: var(--spacing-15) 0 0;
}

.jw-stage-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--spacing-8);
    padding: var(--spacing-8);
    border: 1px solid var(--border-neutral-default);
    border-radius: var(--rounded-xl);
    background: var(--bg-neutral-base);
    align-items: stretch;
}

.jw-stage figcaption {
    margin-top: var(--spacing-3);
    font-size: var(--text-size-small);
    color: var(--fg-neutral-muted);
}

.jw-codecard {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--border-neutral-default);
    border-radius: var(--rounded-lg);
    background: var(--bg-neutral-section);
    overflow: hidden;
}

.jw-codecard-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-3);
    padding: var(--spacing-2) var(--spacing-4);
    border-bottom: 1px solid var(--border-neutral-default);
    min-height: 40px;
}

.jw-file {
    font-family: var(--font-mono);
    font-size: var(--text-size-detail);
    color: var(--fg-neutral-body);
}

.jw .jw-pre {
    flex: 1;
    margin: 0;
    padding: var(--spacing-5) var(--spacing-4);
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--fg-neutral-accent);
    font-size: 13px;
    line-height: 1.65;
    tab-size: 4;
}

/* The mock Swing window. Decorative, hidden from assistive tech, built
   from empty elements so it cannot be mistaken for a working demo. */
.jw-window {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--border-neutral-strong);
    border-radius: var(--rounded-lg);
    background: var(--bg-base);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.jw-window i,
.jw-window b {
    display: block;
}

.jw-window-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-2) var(--spacing-4);
    background: var(--bg-neutral-surface);
    border-bottom: 1px solid var(--border-neutral-default);
    font-size: var(--text-size-detail);
    color: var(--fg-neutral-body);
}

.jw-window-ctrl {
    display: flex;
    gap: 6px;
}

.jw-window-ctrl i {
    width: 10px;
    height: 10px;
    border: 1px solid var(--border-neutral-strong);
}

.jw-window-toolbar {
    display: flex;
    gap: var(--spacing-2);
    align-items: center;
    padding: var(--spacing-2) var(--spacing-4);
    border-bottom: 1px solid var(--border-neutral-default);
}

.jw-window-toolbar i {
    width: 22px;
    height: 14px;
    border-radius: var(--rounded-sm);
    background: var(--bg-neutral-state);
}

.jw-window-toolbar b {
    flex: 1;
    height: 14px;
}

.jw-window-body {
    flex: 1;
    padding: var(--spacing-4);
    display: flex;
}

.jw-embed {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 220px;
    padding: var(--spacing-6) var(--spacing-3) var(--spacing-3);
    border: 1.5px dashed var(--fg-info-body);
    border-radius: var(--rounded);
}

.jw-embed-label {
    position: absolute;
    top: -0.8em;
    left: var(--spacing-3);
    padding: 0 var(--spacing-2);
    background: var(--bg-base);
    color: var(--fg-info-body);
    font-size: var(--text-size-small);
    font-weight: var(--weight-medium);
}

.jw-page {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
    padding: var(--spacing-3);
    border: 1px solid var(--border-neutral-default);
    border-radius: var(--rounded);
    background: var(--bg-neutral-section);
}

.jw-page-bar {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.jw-page-bar i {
    width: 12px;
    height: 12px;
    border-radius: var(--rounded-full);
    background: var(--bg-neutral-state);
}

.jw-page-bar b {
    flex: 1;
    height: 12px;
    border-radius: var(--rounded-full);
    background: var(--bg-neutral-surface);
}

.jw-page-h,
.jw-page-line {
    height: 10px;
    border-radius: var(--rounded-sm);
    background: var(--bg-neutral-state);
}

.jw-page-h {
    width: 62%;
    height: 18px;
    background: var(--border-neutral-strong);
}

.jw-page-line-short {
    width: 78%;
}

.jw-page-media {
    flex: 1;
    min-height: 56px;
    border-radius: var(--rounded);
    background: var(--bg-neutral-surface);
}

/* ---------- sections ---------- */

.jw-section {
    padding-top: var(--spacing-20);
    scroll-margin-top: var(--header-height);
}

.jw-section h2 {
    max-width: 20ch;
    margin: 0 0 var(--spacing-5);
    font-size: var(--heading-size-h1);
}

/* three differentiators */

.jw-triplet {
    list-style: none;
    margin: var(--spacing-12) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--spacing-10);
}

.jw-triplet li {
    padding-top: var(--spacing-6);
    border-top: 1px solid var(--border-neutral-default);
}

.jw-icon {
    display: block;
    width: 28px;
    height: 28px;
    margin-bottom: var(--spacing-4);
    color: var(--fg-info-body);
}

.jw-triplet h3,
.jw-group h3 {
    margin: var(--spacing-3) 0 var(--spacing-2);
    font-size: var(--heading-size-h5);
}

.jw-triplet p {
    margin: 0;
    color: var(--fg-neutral-body);
}

/* java integration */

.jw-split {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--spacing-12);
    align-items: start;
}

.jw-frameworks {
    list-style: none;
    margin: var(--spacing-8) 0 0;
    padding: 0;
    max-width: 26em;
}

.jw-framework {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-3);
    padding: var(--spacing-3) 0;
    border-bottom: 1px solid var(--border-neutral-default);
    color: var(--fg-neutral-body);
}

.jw-framework-main {
    font-size: var(--heading-size-h4);
    font-weight: var(--weight-semibold);
    color: var(--fg-neutral-accent);
    padding: var(--spacing-4) 0;
}

.jw-code {
    min-width: 0;
    border: 1px solid var(--border-neutral-default);
    border-radius: var(--rounded-lg);
    background: var(--bg-neutral-section);
    overflow: hidden;
}

.jw-code-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-3);
    justify-content: space-between;
    padding: var(--spacing-3) var(--spacing-4);
    border-bottom: 1px solid var(--border-neutral-default);
}

.jw-tablist {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-1);
}

.jw-tablist[hidden] {
    display: none;
}

.jw-tablist button,
.jw-copy {
    height: 30px;
    padding: 0 var(--spacing-3);
    border: 1px solid transparent;
    border-radius: var(--rounded);
    background: transparent;
    color: var(--fg-neutral-body);
    font: inherit;
    font-size: var(--text-size-detail);
    cursor: pointer;
}

.jw-tablist button:hover,
.jw-copy:hover {
    background: var(--bg-neutral-surface);
    color: var(--fg-neutral-accent);
}

.jw-tablist button[aria-selected="true"] {
    border-color: var(--border-neutral-default);
    background: var(--bg-base);
    color: var(--fg-neutral-accent);
}

.jw-copy {
    border-color: var(--border-neutral-default);
    min-width: 6.5em;
}

.jw-copy[hidden] {
    display: none;
}

.jw-panel + .jw-panel {
    border-top: 1px solid var(--border-neutral-default);
}

/* With script, the panels share one grid cell so the box is always as
   tall as the tallest sample and switching tabs moves nothing. */
.jw-code.is-enhanced .jw-panels {
    display: grid;
}

.jw-code.is-enhanced .jw-panel {
    grid-area: 1 / 1;
    visibility: hidden;
    border-top: 0;
}

.jw-code.is-enhanced .jw-panel.is-active {
    visibility: visible;
}

/* capabilities */

.jw-groups {
    margin-top: var(--spacing-12);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--spacing-10);
}

.jw-group {
    padding-top: var(--spacing-6);
    border-top: 1px solid var(--border-neutral-default);
}

.jw-group h3 {
    margin-top: 0;
}

.jw-group ul {
    list-style: none;
    margin: var(--spacing-4) 0 0;
    padding: 0;
}

.jw-group li {
    padding: var(--spacing-2) 0;
    color: var(--fg-neutral-body);
}

/* architecture */

.jw-arch {
    position: relative;
    margin: var(--spacing-12) 0 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(140px, 0.55fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    column-gap: 0;
    row-gap: var(--spacing-10);
    max-width: 880px;
}

.jw-arch-zone {
    grid-row: 1 / 5;
    border: 1px dashed var(--border-neutral-strong);
    border-radius: var(--rounded-xl);
    background: var(--bg-neutral-base);
    margin: calc(var(--spacing-4) * -1);
}

.jw-arch-zone-java { grid-column: 1; }
.jw-arch-zone-host { grid-column: 3; }

.jw-arch-label {
    grid-row: 1;
    margin: 0;
    align-self: start;
    font-size: var(--text-size-small);
    font-weight: var(--weight-medium);
    color: var(--fg-neutral-muted);
}

.jw-arch-label-java { grid-column: 1; }
.jw-arch-label-host { grid-column: 3; }

.jw-node {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 64px;
    padding: var(--spacing-3) var(--spacing-4);
    border: 1px solid var(--border-neutral-strong);
    border-radius: var(--rounded-lg);
    background: var(--bg-base);
    font-weight: var(--weight-semibold);
    color: var(--fg-neutral-accent);
    text-align: center;
}

.jw-node-accent {
    border-color: var(--fg-info-body);
    background: var(--bg-info-section);
    color: var(--fg-info-body);
}

.jw-node-app { grid-column: 1; grid-row: 2; }
.jw-node-api { grid-column: 1; grid-row: 3; }
.jw-node-host { grid-column: 3; grid-row: 3; }
.jw-node-chromium { grid-column: 3; grid-row: 4; }

/* Down arrows between stacked nodes of one process. */
.jw-node-app::after,
.jw-node-host::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    height: var(--spacing-10);
    border-left: 1.5px solid var(--border-neutral-strong);
}

.jw-node-app::before,
.jw-node-host::before {
    content: "";
    position: absolute;
    left: calc(50% - 4px);
    top: calc(100% + var(--spacing-10) - 7px);
    width: 7px;
    height: 7px;
    border-right: 1.5px solid var(--border-neutral-strong);
    border-bottom: 1.5px solid var(--border-neutral-strong);
    transform: rotate(45deg);
}

.jw-arch-ipc {
    grid-column: 2;
    grid-row: 3;
    z-index: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.jw-arch-ipc::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    border-top: 1.5px solid var(--fg-info-body);
}

.jw-arch-ipc span {
    position: relative;
    padding: 0.25em 0.7em;
    border: 1px solid var(--fg-info-body);
    border-radius: var(--rounded-full);
    background: var(--bg-base);
    color: var(--fg-info-body);
    font-size: var(--text-size-detail);
    font-weight: var(--weight-medium);
    white-space: nowrap;
}

.jw-benefits {
    list-style: none;
    margin: var(--spacing-12) 0 0;
    padding: 0;
    max-width: var(--prose-width);
}

.jw-benefits li {
    padding: var(--spacing-3) 0;
    border-bottom: 1px solid var(--border-neutral-default);
    color: var(--fg-neutral-body);
}

.jw-benefits strong {
    color: var(--fg-neutral-accent);
}

.jw-benefits code,
.jw-note code {
    font-size: 0.92em;
}

/* platforms */

.jw-platforms {
    list-style: none;
    margin: var(--spacing-12) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--spacing-5);
}

.jw-platforms li {
    padding: var(--spacing-6);
    border: 1px dashed var(--border-neutral-strong);
    border-radius: var(--rounded-lg);
}

.jw-platforms h3 {
    margin: 0 0 var(--spacing-2);
    font-size: var(--heading-size-h4);
}

.jw-platforms p {
    margin: 0;
    color: var(--fg-neutral-body);
}

/* developer experience, use cases, roadmap */

.jw-chores,
.jw-usecases {
    list-style: none;
    margin: var(--spacing-10) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--spacing-12);
    max-width: 860px;
}

.jw-chores li,
.jw-usecases li {
    padding: var(--spacing-4) 0;
    border-bottom: 1px solid var(--border-neutral-default);
    color: var(--fg-neutral-body);
    font-size: var(--text-size-large);
}

.jw-roadmap {
    list-style: none;
    counter-reset: step;
    margin: var(--spacing-10) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--spacing-5);
}

.jw-roadmap li {
    counter-increment: step;
    padding-top: var(--spacing-4);
    border-top: 2px solid var(--border-neutral-strong);
    color: var(--fg-neutral-accent);
    font-weight: var(--weight-medium);
}

.jw-roadmap li::before {
    content: counter(step);
    display: block;
    margin-bottom: var(--spacing-2);
    color: var(--fg-neutral-muted);
    font-size: var(--text-size-label);
}

/* conversion */

.jw-section-last {
    padding-bottom: var(--spacing-10);
}

.jw-status-line {
    margin: var(--spacing-5) 0 0;
    font-size: var(--text-size-label);
    color: var(--fg-neutral-muted);
}

.jw-forms-unused {
    margin-top: var(--spacing-15);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-8);
    align-items: start;
}

.jw-form-panel {
    padding: var(--spacing-8);
    border: 1px solid var(--border-neutral-default);
    border-radius: var(--rounded-xl);
    background: var(--bg-neutral-section);
    scroll-margin-top: var(--header-height);
}

.jw-form-panel:focus {
    outline: none;
}

.jw-form-panel h3 {
    margin: 0 0 var(--spacing-3);
    font-size: var(--heading-size-h3);
}

.jw-form-intro {
    margin: 0 0 var(--spacing-6);
    color: var(--fg-neutral-body);
}

.jw-form .field {
    margin-bottom: var(--spacing-5);
}

.jw-form label {
    display: block;
    margin-bottom: var(--spacing-2);
    font-size: var(--label-font-size);
    font-weight: var(--label-font-weight);
}

.jw-optional {
    font-weight: var(--weight-regular);
    color: var(--fg-neutral-muted);
}

.jw-form input[type="text"],
.jw-form input[type="email"],
.jw-form select,
.jw-form textarea {
    width: 100%;
    font: inherit;
    font-size: var(--input-font-size);
    padding: 0 var(--input-padding-md);
    border: 1px solid var(--border-input);
    border-radius: var(--input-border-radius);
    background: var(--bg-input);
    color: var(--body-color);
}

.jw-form input[type="text"],
.jw-form input[type="email"],
.jw-form select {
    height: var(--input-height);
}

.jw-form textarea {
    padding: var(--input-padding-md);
    resize: vertical;
}

.jw-form input:focus,
.jw-form select:focus,
.jw-form textarea:focus {
    border-color: var(--border-input-focus);
}

.jw-form .warning {
    display: block;
    margin-top: var(--spacing-2);
    font-size: var(--text-size-label);
}

.jw-form > .warning {
    margin: 0 0 var(--spacing-5);
}

.jw-form .caption {
    margin: var(--spacing-5) 0 0;
}

.jw-confirm {
    margin: 0;
    padding: var(--spacing-4) var(--spacing-5);
    border-radius: var(--rounded-lg);
    background: var(--bg-info-section);
    color: var(--fg-info-body);
    font-weight: var(--weight-medium);
}

.jw-legal {
    max-width: var(--prose-width);
    margin: var(--spacing-12) 0 0;
    font-size: var(--text-size-small);
    color: var(--fg-neutral-muted);
}

/* ---------- responsive ---------- */

@media (max-width: 1000px) {
    .jw-stage-grid,
    .jw-split,
    .jw-forms {
        grid-template-columns: minmax(0, 1fr);
    }

    .jw-groups,
    .jw-platforms {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .jw-roadmap {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--spacing-4);
    }
}

@media (max-width: 720px) {
    .jw-hero {
        padding-top: var(--spacing-10);
    }

    .jw-section {
        padding-top: var(--spacing-15);
    }

    .jw-triplet,
    .jw-groups,
    .jw-chores,
    .jw-usecases {
        grid-template-columns: minmax(0, 1fr);
    }

    .jw-stage-grid,
    .jw-form-panel {
        padding: var(--spacing-5);
    }

    .jw-actions .button {
        width: 100%;
    }

    /* The two processes stack: one column, IPC as a short vertical link. */
    .jw-arch {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        row-gap: var(--spacing-5);
    }

    .jw-arch-zone {
        display: none;
    }

    .jw-arch-label,
    .jw-node,
    .jw-arch-ipc {
        grid-column: 1;
        grid-row: auto;
    }

    .jw-arch-label-java { order: 1; }
    .jw-node-app { order: 2; }
    .jw-node-api { order: 3; }
    .jw-arch-ipc { order: 4; min-height: 48px; }
    .jw-arch-label-host { order: 5; }
    .jw-node-host { order: 6; }
    .jw-node-chromium { order: 7; }

    .jw-node-app::after,
    .jw-node-host::after {
        height: var(--spacing-5);
    }

    .jw-node-app::before,
    .jw-node-host::before {
        top: calc(100% + var(--spacing-5) - 7px);
    }

    .jw-arch-ipc::before {
        left: 50%;
        right: auto;
        top: 0;
        bottom: 0;
        border-top: 0;
        border-left: 1.5px solid var(--fg-info-body);
    }
}

@media (prefers-reduced-motion: no-preference) {
    .jw-tablist button,
    .jw-copy {
        transition: background-color 0.15s ease, color 0.15s ease;
    }
}

@media (prefers-reduced-motion: reduce) {
    html:has(.jw) {
        scroll-behavior: auto;
    }
}

/* ---------- second pass: shorter page, style switch, api-style ---------- */

/* The secondary action next to the one primary button. */
.jw-textlink {
    display: inline-flex;
    align-items: center;
    min-height: var(--button-height);
    padding: 0 var(--spacing-2);
    color: var(--fg-neutral-body);
    font-weight: var(--weight-medium);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.jw-textlink:hover {
    color: var(--fg-neutral-accent);
}

/* code style switch */

.jw-code-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-3) var(--spacing-5);
    padding: var(--spacing-2) var(--spacing-4);
    border-bottom: 1px solid var(--border-neutral-default);
    font-size: var(--text-size-detail);
}

.jw-style {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-2) var(--spacing-3);
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.jw-style[hidden] {
    display: none;
}

.jw-style legend {
    float: left;
    padding: 0;
    margin-right: var(--spacing-3);
    color: var(--fg-neutral-body);
    font-weight: var(--weight-medium);
}

.jw-style label {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: 3px var(--spacing-3);
    border: 1px solid var(--border-neutral-default);
    border-radius: var(--rounded-full);
    color: var(--fg-neutral-body);
    cursor: pointer;
}

.jw-style input {
    margin: 0;
    accent-color: var(--fg-info-body);
}

/* The chosen option is bold and carries a stronger border as well as
   the radio dot, so the state never rests on colour alone. */
.jw-style label:has(input:checked) {
    border-color: var(--fg-neutral-accent);
    color: var(--fg-neutral-accent);
    font-weight: var(--weight-semibold);
}

.jw-style label:has(input:focus-visible) {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

.jw-draft {
    font-style: normal;
    font-size: var(--text-size-micro);
    padding: 1px 6px;
    border-radius: var(--rounded-full);
    background: var(--bg-notice-surface);
    color: var(--fg-neutral-accent);
    border: 1px solid var(--border-neutral-default);
}

.jw-style-link {
    color: var(--fg-info-body);
}

.jw-style-note {
    color: var(--fg-neutral-muted);
}

.jw-variant[hidden] {
    display: none;
}

.jw-variant-title {
    margin: 0;
    padding: var(--spacing-3) var(--spacing-4) 0;
    font-size: var(--text-size-small);
    font-weight: var(--weight-medium);
    color: var(--fg-neutral-muted);
}

.jw-variant + .jw-variant {
    border-top: 1px solid var(--border-neutral-default);
}

.jw-code.is-enhanced .jw-variant + .jw-variant {
    border-top: 0;
}

/* status section */

.jw-status {
    margin-top: var(--spacing-12);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--spacing-10);
}

.jw-status-col {
    padding-top: var(--spacing-6);
    border-top: 1px solid var(--border-neutral-default);
}

.jw-status-col h3,
.jw-usecases-title {
    margin: 0 0 var(--spacing-4);
    font-size: var(--heading-size-h5);
}

.jw-status-col ul,
.jw-next {
    margin: 0;
    padding-left: 1.2em;
    color: var(--fg-neutral-body);
}

.jw-status-col li {
    padding: var(--spacing-1) 0;
}

.jw-status-col .jw-note {
    margin-top: var(--spacing-4);
}

.jw-facts {
    margin: var(--spacing-12) 0 0;
    max-width: var(--prose-width);
}

.jw-facts div {
    display: grid;
    grid-template-columns: 9em minmax(0, 1fr);
    gap: var(--spacing-5);
    padding: var(--spacing-4) 0;
    border-bottom: 1px solid var(--border-neutral-default);
}

.jw-facts dt {
    font-weight: var(--weight-semibold);
}

.jw-facts dd {
    margin: 0;
    color: var(--fg-neutral-body);
}

.jw-usecases-title {
    margin-top: var(--spacing-12);
}

.jw-usecases {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
}

.jw-usecases li {
    padding: var(--spacing-1) var(--spacing-4);
    border: 1px solid var(--border-neutral-default);
    border-radius: var(--rounded-full);
    color: var(--fg-neutral-body);
    font-size: var(--text-size-label);
}

/* early access, now one quiet block under the single primary action */

.jw-early {
    margin-top: var(--spacing-12);
    max-width: 34em;
}

.jw-early:focus {
    outline: none;
}

.jw-early h3 {
    margin: 0 0 var(--spacing-4);
    font-size: var(--heading-size-h5);
    font-weight: var(--weight-medium);
}

.jw-early-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--spacing-3);
}

.jw-early-form .field {
    flex: 1 1 14em;
    margin: 0;
}

.jw-early-form > .warning {
    flex-basis: 100%;
    margin: 0;
}

.jw-early .caption {
    margin: var(--spacing-3) 0 0;
}

/* api-style page */

.jw-article .jw-hero {
    padding-bottom: var(--spacing-10);
}

.jw-h1-small {
    font-size: clamp(34px, 5vw, 56px);
    max-width: 18ch;
}

.jw-section-tight {
    padding-top: var(--spacing-12);
}

.jw-callout {
    margin-top: var(--spacing-10);
    padding: var(--spacing-6);
    border: 1px dashed var(--border-neutral-strong);
    border-radius: var(--rounded-lg);
    max-width: var(--prose-width);
}

.jw-callout h2 {
    margin: 0 0 var(--spacing-3);
    font-size: var(--heading-size-h5);
}

.jw-callout p {
    margin: 0;
    color: var(--fg-neutral-body);
}

.jw-compare {
    margin-top: var(--spacing-8);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-8);
}

.jw-variant-card {
    min-width: 0;
}

.jw-variant-card h3 {
    margin: 0 0 var(--spacing-2);
    font-size: var(--heading-size-h5);
}

.jw-variant-card p {
    margin: 0 0 var(--spacing-4);
    color: var(--fg-neutral-body);
}

.jw-table-wrap {
    margin-top: var(--spacing-6);
    overflow-x: auto;
}

.jw-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-size-label);
}

.jw-table th,
.jw-table td {
    padding: var(--spacing-3) var(--spacing-4) var(--spacing-3) 0;
    border-bottom: 1px solid var(--border-neutral-default);
    text-align: left;
    vertical-align: top;
}

.jw-table thead th {
    color: var(--fg-neutral-muted);
    font-weight: var(--weight-medium);
}

.jw-table tbody th {
    font-weight: var(--weight-semibold);
}

@media (max-width: 1000px) {
    .jw-status {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--spacing-8);
    }

    .jw-compare {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 720px) {
    .jw-facts div {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--spacing-1);
    }

    .jw-actions .jw-textlink {
        width: 100%;
        justify-content: flex-start;
        padding-left: 0;
    }
}

/* The style switch is a footnote of the code card, not a control of its
   own: small, muted, below the code, no pills. The chosen option still
   shows as bold text next to a filled native radio, not by colour. */
.jw-code-tools {
    padding: var(--spacing-2) var(--spacing-4);
    border-top: 1px solid var(--border-neutral-default);
    border-bottom: 0;
    gap: var(--spacing-1) var(--spacing-4);
    font-size: var(--text-size-small);
    color: var(--fg-neutral-muted);
}

.jw-style {
    gap: var(--spacing-1) var(--spacing-3);
}

.jw-style legend {
    margin-right: var(--spacing-2);
    color: var(--fg-neutral-muted);
    font-weight: var(--weight-regular);
}

.jw-style label {
    gap: var(--spacing-1);
    padding: 0;
    border: 0;
    border-radius: 0;
    color: var(--fg-neutral-muted);
}

.jw-style label:has(input:checked) {
    border: 0;
    color: var(--fg-neutral-accent);
    font-weight: var(--weight-semibold);
}

.jw-style input {
    width: 12px;
    height: 12px;
}

.jw-draft {
    padding: 0 4px;
    font-size: 10px;
    background: transparent;
    color: var(--fg-neutral-muted);
}

.jw-style-link {
    color: var(--fg-neutral-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.jw-style-link:hover {
    color: var(--fg-neutral-accent);
}

/* closing call to action: one box, heading on the minor part of a
   golden-ratio split, text, the single primary button and the quiet
   early-access form on the major part */
.jw-cta-box {
    display: grid;
    grid-template-columns: minmax(0, 38.2fr) minmax(0, 61.8fr);
    gap: var(--spacing-12);
    padding: var(--spacing-20) var(--spacing-15);
    border-radius: var(--rounded-xl);
    background: var(--bg-neutral-section);
}

.jw-cta-head h2 {
    margin: 0;
    max-width: 12ch;
    font-size: var(--heading-size-h1);
}

.jw-cta-lead {
    max-width: 44ch;
    margin: 0;
    font-size: var(--text-size-lead);
    color: var(--fg-neutral-body);
}

.jw-cta-body .jw-actions {
    margin-top: var(--spacing-10);
}

.jw-cta-body .jw-status-line {
    margin-top: var(--spacing-4);
}

.jw-cta-body .jw-early {
    margin-top: var(--spacing-12);
    padding-top: var(--spacing-8);
    border-top: 1px solid var(--border-neutral-default);
}

@media (max-width: 1000px) {
    .jw-cta-box {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--spacing-6);
        padding: var(--spacing-12) var(--spacing-8);
    }
}

@media (max-width: 720px) {
    .jw-cta-box {
        padding: var(--spacing-8) var(--spacing-5);
    }
}

/* The box runs edge to edge of the viewport; its content stays on the
   page column. overflow-x: clip keeps the oversized background layer
   from creating a horizontal scroll bar. */
html:has(.jw-cta-box) body {
    overflow-x: clip;
}

.jw-cta-box {
    position: relative;
    isolation: isolate;
    border-radius: 0;
    background: none;
    padding-left: 0;
    padding-right: 0;
}

.jw-cta-box::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: -100vmax;
    right: -100vmax;
    background: var(--bg-neutral-section);
}

.jw-section-last {
    padding-bottom: 0;
}

.jw-cta-button span {
    margin-left: var(--spacing-3);
}

/* Early access is a different offer from the conversation above, so it
   has its own box in the page column: same split, quieter. */
.jw-early-box {
    display: grid;
    grid-template-columns: minmax(0, 38.2fr) minmax(0, 61.8fr);
    gap: var(--spacing-12);
    margin-top: var(--spacing-10);
    padding: var(--spacing-10);
    border: 1px solid var(--border-neutral-default);
    border-radius: var(--rounded-xl);
    scroll-margin-top: var(--header-height);
}

.jw-early-box:focus {
    outline: none;
}

.jw-early-head h2 {
    margin: 0 0 var(--spacing-3);
    font-size: var(--heading-size-h4);
}

.jw-early-head p {
    margin: 0;
    color: var(--fg-neutral-body);
}

.jw-early-body .caption {
    margin: var(--spacing-3) 0 0;
}

@media (max-width: 1000px) {
    .jw-early-box {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--spacing-5);
        padding: var(--spacing-6);
    }
}

.jw-early-head h2 {
    max-width: 14ch;
}

/* Early access closes the page as a section of its own. */
#early.jw-section .jw-early-box {
    margin-top: 0;
}

/* The wait list closes the page as a full width band in the tint the
   theme uses for information (light blue on light, deep blue on dark),
   so it belongs to both themes. One big line, one field, one button,
   centred. */
.jw-early-band {
    position: relative;
    isolation: isolate;
    margin: var(--spacing-20) 0 0;
    padding: var(--spacing-20) 0;
    color: var(--fg-neutral-body);
    text-align: center;
}

.jw-early-band::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: -100vmax;
    right: -100vmax;
    background: var(--bg-info-section);
}

.jw-early-inner {
    max-width: 44em;
    margin: 0 auto;
}

.jw-early-inner:focus {
    outline: none;
}

.jw-early-inner h2 {
    max-width: 16ch;
    margin: 0 auto var(--spacing-5);
    font-size: clamp(34px, 5.6vw, 64px);
    line-height: 1.08;
    letter-spacing: -0.03em;
    text-wrap: balance;
    color: var(--fg-neutral-accent);
}

.jw-early-lead {
    max-width: 38em;
    margin: 0 auto var(--spacing-8);
    font-size: var(--text-size-lead);
    color: var(--fg-neutral-body);
}

.jw-early-form {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: var(--spacing-3);
}

.jw-early-form .field {
    flex: 1 1 18em;
    max-width: 24em;
    margin: 0;
    text-align: left;
}

.jw-early-form input[type="email"] {
    width: 100%;
    height: 48px;
    padding: 0 var(--spacing-4);
    border: 1px solid var(--border-input);
    border-radius: var(--rounded);
    background: var(--bg-input);
    color: var(--body-color);
    font: inherit;
    font-size: var(--text-size-body);
}

.jw-early-form .button {
    height: 48px;
    padding: 0 var(--spacing-6);
}

.jw-early-form .warning {
    display: block;
    margin-top: var(--spacing-2);
    font-size: var(--text-size-label);
}

.jw-early-form > .warning {
    flex-basis: 100%;
    margin: 0;
}

.jw-early-caption {
    margin: var(--spacing-5) 0 0;
    font-size: var(--text-size-small);
    color: var(--fg-neutral-muted);
}

.jw-confirm-band {
    display: inline-block;
    background: var(--bg-base);
    color: var(--fg-info-body);
}

.jw-legal {
    margin-top: var(--spacing-8);
}

@media (max-width: 720px) {
    .jw-early-band {
        padding: var(--spacing-15) 0;
        margin-top: var(--spacing-15);
    }

    .jw-early-form .button {
        width: 100%;
    }
}

/* ---------- third pass: product first ---------- */

.jw-hero-note {
    max-width: 52ch;
    margin: var(--spacing-5) 0 0;
    font-size: var(--text-size-label);
    color: var(--fg-neutral-muted);
}

.jw-code-wrap {
    margin-top: var(--spacing-8);
    max-width: 920px;
}

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

.jw-arch-notes,
.jw-today {
    list-style: none;
    margin: var(--spacing-8) 0 0;
    padding: 0;
    max-width: var(--prose-width);
}

.jw-arch-notes li,
.jw-today li {
    padding: var(--spacing-3) 0;
    border-bottom: 1px solid var(--border-neutral-default);
    color: var(--fg-neutral-body);
}

/* pricing: two plans, no prices */

.jw-plans {
    margin-top: var(--spacing-10);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-8);
    max-width: 920px;
}

.jw-plan {
    display: flex;
    flex-direction: column;
    padding: var(--spacing-8);
    border: 1px solid var(--border-neutral-default);
    border-radius: var(--rounded-xl);
}

.jw-plan h3 {
    margin: 0;
    font-size: var(--heading-size-h3);
}

.jw-plan-price {
    margin: var(--spacing-2) 0 0;
    font-size: var(--text-size-lead);
    font-weight: var(--weight-semibold);
    color: var(--fg-neutral-accent);
}

.jw-plan-for {
    margin: var(--spacing-2) 0 var(--spacing-5);
    color: var(--fg-neutral-body);
}

.jw-plan ul {
    flex: 1;
    list-style: none;
    margin: 0 0 var(--spacing-6);
    padding: 0;
}

.jw-plan li {
    padding: var(--spacing-2) 0;
    border-top: 1px solid var(--border-neutral-default);
    color: var(--fg-neutral-body);
}

.jw-plan .button {
    align-self: flex-start;
}

.jw-section-box {
    padding-top: var(--spacing-20);
}

@media (max-width: 1000px) {
    .jw-groups {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 720px) {
    .jw-plans {
        grid-template-columns: minmax(0, 1fr);
    }

    .jw-plan {
        padding: var(--spacing-5);
    }
}

/* features with one line each, and the use cases */
.jw-group li strong {
    display: block;
    color: var(--fg-neutral-accent);
    font-weight: var(--weight-semibold);
}

.jw-group li span {
    display: block;
    margin-top: 2px;
    font-size: var(--text-size-label);
    color: var(--fg-neutral-muted);
}

.jw-uses {
    list-style: none;
    margin: var(--spacing-10) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--spacing-8) var(--spacing-10);
}

.jw-uses li {
    padding-top: var(--spacing-5);
    border-top: 1px solid var(--border-neutral-default);
}

.jw-uses h3 {
    margin: 0 0 var(--spacing-2);
    font-size: var(--heading-size-h5);
}

.jw-uses p {
    margin: 0;
    color: var(--fg-neutral-body);
}

@media (max-width: 1000px) {
    .jw-uses {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .jw-uses {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* three licence plans */
.jw-plans {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: none;
    gap: var(--spacing-6);
}

.jw-plan {
    padding: var(--spacing-6);
}

.jw-plan h3 {
    font-size: var(--heading-size-h4);
}

@media (max-width: 1000px) {
    .jw-plans {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* product sub menu: sticky under the site header, section links in the
   middle, the one primary action on the right. On a phone the list
   scrolls sideways and the button drops out (the hero carries it). */
.jw-subnav {
    position: sticky;
    top: 0;
    z-index: 110;
    display: flex;
    align-items: center;
    gap: var(--spacing-6);
    min-height: 52px;
    font-size: var(--text-size-label);
}

/* The bar's background is a layer that runs far past both sides of the
   column; the content itself stays exactly on the column edges, whatever
   the width of a scroll bar (100vw would count it and shift the content). */
.jw-subnav::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: -100vmax;
    right: -100vmax;
    background: var(--bg-base);
}

.jw-subnav-name {
    flex: 0 0 auto;
    font-weight: var(--weight-regular);
    color: var(--fg-info-body);
    text-decoration: none;
}

.jw-subnav-list {
    flex: 1 1 auto;
    display: flex;
    gap: var(--spacing-5);
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
}

.jw-subnav-list::-webkit-scrollbar {
    display: none;
}

.jw-subnav-list a {
    display: block;
    padding: var(--spacing-4) 0;
    color: var(--fg-neutral-body);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
}

.jw-subnav-list a:hover {
    color: var(--fg-neutral-accent);
}

.jw-subnav-list a[aria-current] {
    color: var(--fg-neutral-accent);
    font-weight: var(--weight-semibold);
    border-bottom-color: var(--fg-neutral-accent);
}

.jw-subnav-cta {
    flex: 0 0 auto;
    margin-left: auto;
    height: 34px;
    padding: 0 var(--spacing-4);
    font-size: var(--text-size-label);
}

.jw-section,
.jw-callout {
    scroll-margin-top: 72px;
}

.jw-hero {
    padding-top: var(--spacing-12);
}

@media (max-width: 720px) {
    .jw-subnav {
        gap: var(--spacing-4);
    }

    .jw-subnav-cta {
        display: none;
    }
}

/* Docked: with a sub menu on the page the site header gets a solid
   background and the sub menu runs edge to edge directly under it, so
   the two read as one bar. The content stays on the page column. */
body:has(.jw-subnav) .site-header {
    background: var(--bg-base);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body:has(.jw-subnav) .site-header::after {
    display: none;
}

html:has(.jw-subnav) body {
    overflow-x: clip;
}

/* With a sub menu the site header does not follow the scroll: it leaves
   with the page and the sub menu alone stays at the top. It sits above the
   hero's dot grid (which reaches up behind it) and has no background of its
   own, so the dots show through. */
body:has(.jw-subnav) .site-header {
    position: relative;
    z-index: 2;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body:has(.jw-subnav)::before {
    display: none;
}

/* Full bleed layers stick out sideways; clip them at the viewport. */
html:has(.jw-subnav),
html:has(.jw-cta-box),
html:has(.jw-early-band) {
    overflow-x: hidden;
}

/* Blur for the sub menu, desktop only: content scrolling underneath shows through, softened,
   like the site header does. A browser without color-mix or backdrop-filter
   keeps the solid background above. */
@media (min-width: 721px) {
    @supports (backdrop-filter: blur(1px)) and (background: color-mix(in srgb, red 50%, transparent)) {
        .jw-subnav::before {
            background: color-mix(in srgb, var(--bg-base) 78%, transparent);
            -webkit-backdrop-filter: blur(14px) saturate(140%);
            backdrop-filter: blur(14px) saturate(140%);
        }
    }
}

/* Phone: the sub menu is a plain strip of section links. The name and
   the button drop out, the text is a size smaller, and a fade at the right
   edge shows that the strip scrolls. */
@media (max-width: 720px) {
    .jw-subnav {
        min-height: 46px;
        font-size: 14px;
    }

    .jw-subnav-name {
        display: none;
    }

    .jw-subnav-list {
        gap: var(--spacing-6);
        padding-right: var(--spacing-8);
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
    }

    .jw-subnav-list a {
        padding: var(--spacing-3) 0;
    }

    .jw-hero {
        padding-top: var(--spacing-8);
    }
}

/* The sub menu is set in JetBrains Mono (loaded with the other web fonts in
   layout.php); monospace is the fallback. Mono letters are wide, so the
   size is a step smaller than the body text. */
.jw-subnav,
.jw-subnav a {
    font-family: "JetBrains Mono", monospace;
}

.jw-subnav {
    font-size: 13px;
}

.jw-subnav-list {
    gap: var(--spacing-6);
}

@media (max-width: 720px) {
    .jw-subnav {
        font-size: 12px;
    }
}

/* The sub menu's action only appears once the hero, which carries the same
   button, has scrolled out of view. Without script it is always shown. */
.jw-subnav.is-enhanced .jw-subnav-cta {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.jw-subnav.is-enhanced.show-cta .jw-subnav-cta {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

@media (prefers-reduced-motion: no-preference) {
    .jw-subnav.is-enhanced .jw-subnav-cta {
        transition: opacity 0.2s ease, visibility 0.2s;
    }
}

/* Hero dot grid (assets/js/dot-grid.js). It fills the right part of the
   hero, fades out towards the text and the edges, and sits behind the
   content. Without script the canvas is simply empty. */
.jw-hero,
.dot-host {
    position: relative;
}

.jw-hero > *,
.dot-host > * {
    position: relative;
    z-index: 1;
}

.dot-host > .dot-grid {
    position: absolute;
    z-index: 0;
    top: 0;
    bottom: 0;
    left: 38%;
    /* To the right edge of the viewport: a canvas is a replaced element, so
       left and right alone would not stretch it. The hero is centred, so the
       edge lies 50vw - 50% beyond it. */
    width: 60%;
    height: 100%;
    pointer-events: none;
    --dot-color: var(--fg-neutral-body);
    /* Soft edge on the left, top and bottom. The fade towards the right
       viewport edge is done by the script, so that dots under the pointer
       can still show up there. */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 30%), linear-gradient(to bottom, #000 80%, transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent, #000 30%), linear-gradient(to bottom, #000 80%, transparent);
    mask-composite: intersect;
}

@media (max-width: 720px) {
    .dot-host > .dot-grid {
        left: calc(50% - 50vw);
        width: 100vw;
        opacity: 0.55;
    }
}

html:has(.jw-early-band) body {
    overflow-x: clip;
}

/* The sub menu has no background while it sits in the page; once it sticks to
   the top (script adds .is-stuck) it gets one, and the dots that would run
   under it are covered. Without script it keeps its background all the time. */
.jw-subnav.is-enhanced::before {
    background: transparent;
}

.jw-subnav.is-enhanced.is-stuck::before {
    background: var(--bg-base);
}

@media (min-width: 721px) {
    @supports (backdrop-filter: blur(1px)) and (background: color-mix(in srgb, red 50%, transparent)) {
        .jw-subnav.is-enhanced::before {
            background: transparent;
            -webkit-backdrop-filter: none;
            backdrop-filter: none;
        }

        .jw-subnav.is-enhanced.is-stuck::before {
            background: color-mix(in srgb, var(--bg-base) 86%, transparent);
            -webkit-backdrop-filter: blur(14px) saturate(140%);
            backdrop-filter: blur(14px) saturate(140%);
        }
    }
}

@media (prefers-reduced-motion: no-preference) {
    .jw-subnav.is-enhanced::before {
        transition: background-color 0.2s ease;
    }
}

/* Indented content, as on Imperavi: the site header keeps the outer
   edges of the column, the sub menu and everything below it start a step
   further in. Left side only; the right edge stays on the column. */
/* The step in from the header is set for every page in layout.css
   (--content-indent, on .page-content); the sub menu and the hero follow it. */
.jw {
    --jw-indent: var(--content-indent);
}

.jw-early-band {
    margin-left: calc(var(--jw-indent) * -1);
}

/* Only the product name in the sub menu is gold (and spaced out); everything
   else keeps the site's colours. Text colours are chosen for at least 4.5:1
   on their ground: dark gold on light, bright gold on dark. */
.jw {
    --jw-gold: #8A6100;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .jw {
        --jw-gold: #E3B341;
    }
}

:root[data-theme="dark"] .jw {
    --jw-gold: #E3B341;
}

.jw-subnav-name {
    color: var(--jw-gold);
    letter-spacing: 0.12em;
}


/* Hero label in grey, active mark under the sub menu in black. */
.jw .jw-eyebrow {
    background: var(--bg-neutral-surface);
    color: var(--fg-neutral-body);
}

.jw-subnav-list a[aria-current] {
    border-bottom-color: var(--fg-neutral-accent);
}