/* ============================================================
   JEX.DEV — Systems for better worlds.
   Brand palette and type per the brand sheet.
   ============================================================ */

:root {
    --primary:    #B7FF3C;
    --primary-dk: #96D62B;
    --primary-gl: rgba(183, 255, 60, .14);

    --bg:         #0B0C0D;
    --bg-2:       #0F1113;
    --surface:    #17191C;
    --surface-2:  #1D2024;
    --line:       #24272B;
    --line-2:     #33373D;

    --text:       #E8E5DE;
    --text-2:     #C7C6C1;   /* supporting copy - brighter than muted */
    --muted:      #85878A;
    --faint:      #5C5F63;
    --line-3:     #4A525B;   /* hover border */
    --grid:       rgba(255, 255, 255, .035);

    --display: 'Space Grotesk', 'Inter', -apple-system, sans-serif;
    --body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --wrap: 1400px;
    --radius: 2px;      /* buttons, chips */
    --radius-lg: 3px;   /* cards and media - squared, not SaaS-round */

    --shadow: 0 18px 44px rgba(0, 0, 0, .5);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* The browser's own [hidden] { display: none } is a user-agent rule, so
   ANY author rule that sets `display` silently beats it - and then
   `el.hidden = true` does nothing. That is how the cart badge, the
   account menu and the admin sign-in card all ended up stuck visible. */
[hidden] { display: none !important; }

/* ---------- Scrollbar ---------- */

/* Firefox */
html { scrollbar-color: #33373D #0B0C0D; scrollbar-width: thin; }

/* Chrome, Edge, Safari */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: #0B0C0D; }

::-webkit-scrollbar-thumb {
    background: #2E333A;
    border: 3px solid #0B0C0D;   /* inset so the thumb reads as a slim pill */
    border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover { background: #454C55; }
::-webkit-scrollbar-thumb:active { background: var(--primary); }
::-webkit-scrollbar-corner { background: #0B0C0D; }

/* ---------- Page transitions ---------- */

/* Browsers with the View Transitions API cross-fade between pages natively. */
@view-transition { navigation: auto; }

::view-transition-old(root) { animation: fade-out .22s ease both; }
::view-transition-new(root) { animation: fade-in .32s ease both; }

@keyframes fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }

/* Fallback for everything else - main.js toggles .is-leaving on nav. */
body { opacity: 1; transition: opacity .22s ease; }
body.is-leaving { opacity: 0; }

/* Sections ease in as you reach them. */
.reveal {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
    transition: opacity .45s cubic-bezier(.22, .61, .36, 1),
                transform .45s cubic-bezier(.22, .61, .36, 1);
    will-change: opacity, transform;
}

.reveal.is-in { opacity: 1; transform: none; will-change: auto; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    body, body.is-leaving { transition: none; opacity: 1; }
    .reveal {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
    transition: opacity .45s cubic-bezier(.22, .61, .36, 1),
                transform .45s cubic-bezier(.22, .61, .36, 1);
    will-change: opacity, transform;
}
    ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--body);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
    font-family: var(--display);
    font-weight: 700;
    line-height: 1.05;
    margin: 0;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 40px; }

/* Stops the sticky header covering a section when you jump to it. */
section[id] { scroll-margin-top: 90px; }

/* ---------- Shared ---------- */

.lime { color: var(--primary); }

.eyebrow {
    font-family: var(--display);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 18px;
}

.eyebrow .sep { color: var(--faint); margin: 0 8px; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 28px;
    border-radius: var(--radius);
    font-family: var(--display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all .18s ease;
    white-space: nowrap;
}

.btn-primary { background: var(--primary); color: #0B0C0D; }
.btn-primary:hover { background: var(--primary-dk); transform: translateY(-2px); }

.btn-ghost { background: transparent; border-color: var(--line-2); color: var(--text); }
.btn-ghost:hover { border-color: var(--primary); color: var(--primary); }

.btn-outline { background: transparent; border-color: var(--primary); color: var(--primary); }
.btn-outline:hover { background: var(--primary); color: #0B0C0D; }

.btn-block { width: 100%; }
.btn.is-disabled, .btn[disabled] { opacity: .35; pointer-events: none; }

.header-actions .btn { padding: 13px 22px; }

/* ---------- Wordmark ---------- */

.wordmark {
    display: inline-flex;
    align-items: baseline;
    font-family: var(--display);
    font-weight: 700;
    font-size: 24px;
    letter-spacing: -0.03em;
    font-style: italic;
    line-height: 1;
}

.wordmark .jex { color: #fff; }
.wordmark .bolt { color: var(--primary); margin: 0 1px; }
.wordmark .dev {
    font-size: .52em;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: #fff;
    margin-left: 2px;
}

.wordmark-sm { font-size: 20px; }

/* ---------- Header ---------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 80;
    background: rgba(11, 12, 13, .92);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
}

/* Header content sits in the same column as the page, so the wordmark and
   the account controls stay near the content instead of being flung out to
   the screen edges on a wide monitor. */
.site-header .wrap {
    display: flex;
    align-items: center;
    gap: 40px;
    height: 74px;
    max-width: var(--wrap);
    padding: 0 40px;
}

.nav {
    display: flex;
    gap: 30px;
    margin: 0 auto;
    font-family: var(--display);
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--muted);
}

.nav a { position: relative; padding: 6px 0; transition: color .18s ease; }
.nav a:hover, .nav a.is-active { color: var(--text); }

.nav a.is-active::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -2px;
    height: 2px;
    background: var(--primary);
}

/* ---------- Products menu ---------- */

.nav-item { position: relative; display: inline-flex; align-items: center; gap: 7px; }

.nav-caret {
    display: grid;
    place-items: center;
    width: 16px; height: 16px;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--muted);
    cursor: pointer;
    transition: color .18s ease;
}

.nav-caret:hover, .nav-item.is-open .nav-caret { color: var(--primary); }

.nav-caret i {
    width: 6px; height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .24s cubic-bezier(.22, .61, .36, 1);
}

.nav-item.is-open .nav-caret i { transform: translateY(1px) rotate(-135deg); }

.nav-menu {
    position: absolute;
    top: calc(100% + 16px);
    left: 50%;
    z-index: 60;
    width: 340px;
    transform: translateX(-50%);
    background: var(--bg-2);
    border: 1px solid var(--line-2);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
    animation: nav-menu-in .22s cubic-bezier(.22, .61, .36, 1) both;
}

@keyframes nav-menu-in {
    from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
    to   { opacity: 1; transform: translateX(-50%); }
}

/* Points back up at the caret that opened it. */
.nav-menu::before {
    content: '';
    position: absolute;
    top: -5px; left: 50%;
    width: 8px; height: 8px;
    margin-left: -4px;
    background: var(--bg-2);
    border-left: 1px solid var(--line-2);
    border-top: 1px solid var(--line-2);
    transform: rotate(45deg);
}

.nav-menu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 16px 13px;
    border-bottom: 1px solid var(--line);
}

.nav-menu-count {
    font-family: var(--display);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 3px 8px;
    border: 1px solid var(--line-2);
    border-radius: var(--radius);
    color: var(--muted);
}

.nav-menu-grid { display: grid; padding: 8px; gap: 2px; }

.nmc {
    display: flex;
    align-items: center;
    gap: 13px;
    width: 100%;
    padding: 9px 10px;
    background: transparent;
    border: 0;
    border-radius: var(--radius);
    text-align: left;
    cursor: pointer;
    transition: background .16s ease;
}

.nmc:hover { background: var(--surface); }

.nmc-media {
    flex: none;
    display: grid;
    place-items: center;
    width: 62px; height: 40px;
    border-radius: var(--radius);
    background: radial-gradient(circle at 50% 40%, #23272C, #101215 74%);
    overflow: hidden;
}

.nmc-media img { width: 100%; height: 100%; object-fit: cover; }
.nmc-media img.mark { width: 20px; height: auto; opacity: .25; }

.nmc-text { min-width: 0; display: grid; gap: 3px; }

.nmc-text b {
    font-family: var(--display);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: none;
    color: var(--text);
}

/* One line only - the menu is a glance, not a catalogue. */
.nmc-text i {
    font-style: normal;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--faint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nmc:hover .nmc-text i { color: var(--muted); }

.nav-menu-all {
    display: block;
    padding: 13px 16px;
    border-top: 1px solid var(--line);
    font-size: 10.5px;
    letter-spacing: 0.16em;
    color: var(--muted);
    transition: color .18s ease;
}

.nav-menu-all:hover { color: var(--primary); }

/* Two links share the foot, so they sit side by side with one divider
   between them rather than stacking into a second menu. */
.nav-menu-foot { display: grid; grid-template-columns: 1fr 1fr; }
.nav-menu-foot .nav-menu-all + .nav-menu-all { border-left: 1px solid var(--line); }

@media (prefers-reduced-motion: reduce) {
    .nav-menu { animation: none; }
    .nav-caret i { transition: none; }
}

.header-actions { display: flex; align-items: center; gap: 12px; }

/* ---------- Signed-in menu ---------- */

.acct { position: relative; }

.acct-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 14px 8px 8px;
    background: transparent;
    border: 1px solid var(--line-2);
    border-radius: var(--radius);
    cursor: pointer;
    color: var(--text-2);
    font-family: var(--display);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    transition: border-color .18s ease, color .18s ease;
}

.acct-btn:hover { border-color: var(--primary); color: var(--primary); }

/* Only ever rendered for an account on the staff allowlist. */
.acct-tag {
    font-style: normal;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 3px 7px;
    border-radius: var(--radius);
    background: var(--primary);
    color: #0B0C0D;
}

.acct-admin {
    border-bottom: 1px solid var(--line);
    margin-bottom: 4px;
    padding-bottom: 12px !important;
    color: var(--primary) !important;
}
.acct-btn img { width: 24px; height: 24px; border-radius: 50%; }
.acct-btn svg { width: 17px; height: 17px; margin-left: 5px; }

/* Whether this is showing is set inline by the script - see initAccount.
   Nothing here declares `display`, so nothing here can fight it. */
.acct-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 60;
    min-width: 220px;
    padding: 6px;
    background: var(--bg-2);
    border: 1px solid var(--line-2);
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .6);
}

.acct-menu a {
    padding: 10px 12px;
    border-radius: var(--radius);
    font-family: var(--display);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--muted);
    transition: background .16s ease, color .16s ease;
}

.acct-menu a:hover { background: var(--surface); color: var(--primary); }

/* ---------- Account page ---------- */

/* One centred column for the heading and everything under it, so the
   page doesn't sit hard left with an empty right half on wide screens.
   The header and footer keep the full site width. */
body[data-page="account"] .page-head > .wrap,
body[data-page="account"] #account-body { max-width: 1080px; }

.acct-page { max-width: none; }

.acct-id {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-bottom: 30px;
    margin-bottom: 34px;
    border-bottom: 1px solid var(--line);
}

.acct-id img { width: 64px; height: 64px; border-radius: 50%; }
.acct-id div { flex: 1; min-width: 0; }
.acct-id h2 { font-size: 24px; margin-bottom: 4px; }

.acct-id p {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--muted);
    font-size: 13.5px;
}

.acct-actions { display: flex; gap: 12px; margin-top: 22px; }

.acct-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
}

.acct-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 24px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}

.acct-card h3 { font-size: 17px; }
.acct-card p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.65; }
.acct-card .btn { margin-top: auto; }

@media (max-width: 820px) {
    .acct-id { flex-wrap: wrap; }
}

.btn-login {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 18px;
    border: 1px solid var(--line-2);
    border-radius: var(--radius);
    font-family: var(--display);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
    transition: all .18s ease;
}

.btn-login:hover { border-color: var(--primary); color: var(--primary); }
.btn-login svg { width: 14px; height: 14px; fill: currentColor; }

.btn-icon {
    position: relative;
    background: transparent;
    cursor: pointer;
    font: inherit;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line-2);
    border-radius: var(--radius);
    color: var(--muted);
    transition: all .18s ease;
}

.btn-icon:hover { border-color: var(--primary); color: var(--primary); }
.btn-icon svg { width: 16px; height: 16px; fill: currentColor; }

.cart-count[hidden] { display: none; }

.cart-count {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: var(--primary);
    color: #0B0C0D;
    font-family: var(--display);
    font-size: 10px;
    font-weight: 700;
}

.nav-toggle {
    display: none;
    background: none;
    border: 1px solid var(--line-2);
    border-radius: var(--radius);
    color: var(--text);
    padding: 9px 13px;
    cursor: pointer;
}

/* ---------- Hero ---------- */

/* The opener fills the screen below the header, so nothing from the next
   section creeps into the first frame. svh keeps mobile browser chrome
   from pushing it taller than the visible area. */
.hero {
    position: relative;
    min-height: calc(100svh - 74px);
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--line);
    overflow: hidden;
}

.hero-media {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, var(--bg) 4%, rgba(11, 12, 13, .78) 42%, rgba(11, 12, 13, .25) 72%, rgba(11,12,13,.6)),
        radial-gradient(900px 520px at 74% 42%, #2C3138, transparent 68%),
        linear-gradient(160deg, #101316, #05060700);
    background-size: cover;
    background-position: center;
}

.hero-media.has-image { background-image: var(--hero-img); }

/* Two stacked videos crossfade between clips; the gradient stays as fallback. */
.hero-vid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.2s ease;
}

.hero-vid.is-ready { opacity: 1; }

/* ---------- Hero green effects ---------- */

.fx {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* Casts the footage green without flattening it - soft-light keeps the
   original contrast instead of painting a flat colour over the top. */
.fx-tint {
    background:
        linear-gradient(115deg, rgba(183, 255, 60, .30), transparent 52%),
        linear-gradient(0deg, rgba(120, 190, 40, .16), transparent 60%);
    mix-blend-mode: soft-light;
    opacity: .9;
}

/* Slow drifting bloom, so the panel isn't static behind the headline. */
.fx-glow {
    background:
        radial-gradient(620px 420px at 72% 38%, rgba(183, 255, 60, .20), transparent 68%),
        radial-gradient(420px 300px at 18% 78%, rgba(183, 255, 60, .10), transparent 70%);
    mix-blend-mode: screen;
    will-change: transform, opacity;
    animation: bloom 18s ease-in-out infinite alternate;
}

@keyframes bloom {
    from { transform: translate3d(-2%, -1%, 0) scale(1); opacity: .75; }
    to   { transform: translate3d(3%, 2%, 0) scale(1.08); opacity: 1; }
}

/* Very faint scanlines - reads as a screen rather than a video still. */
.fx-scan {
    background: repeating-linear-gradient(
        180deg,
        rgba(183, 255, 60, .05) 0 1px,
        transparent 1px 4px
    );
    opacity: .5;
}

/* Lime edge on the seam into the next section. */
.hero::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(183, 255, 60, .5), transparent);
}

@media (prefers-reduced-motion: reduce) {
    .fx-glow { animation: none; }
}

/* Keeps the headline readable whatever is playing behind it. */
.hero-scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, #0B0C0D 2%, rgba(11, 12, 13, .86) 38%, rgba(11, 12, 13, .45) 70%, rgba(11, 12, 13, .72)),
        linear-gradient(180deg, rgba(11, 12, 13, .5), transparent 30%, rgba(11, 12, 13, .75));
}

.hero .wrap { position: relative; padding-top: 80px; padding-bottom: 150px; }

/* Copy on the left, the rotating showcase on the right. */
.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(400px, 520px);
    gap: 40px;
    align-items: center;
}

.hero-inner { max-width: 660px; }

/* ---------- Hero showcase ---------- */

/* One panel holds the label, the arrows, the slides and the progress,
   so the controls sit on something instead of floating above the card.

   Hover is a lift plus a lime bloom - only transform and box-shadow. The
   border-draw this replaced animated background-size, which repaints the
   whole panel every frame and stuttered. */
.show-panel {
    position: relative;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line-2);
    background: rgba(13, 15, 17, .9);
    box-shadow: 0 30px 70px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .07);
    overflow: hidden;
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.show-panel:hover {
    transform: translateY(-4px);
    border-color: var(--primary);
    box-shadow:
        0 34px 78px rgba(0, 0, 0, .62),
        0 0 26px -4px rgba(183, 255, 60, .32),
        inset 0 1px 0 rgba(255, 255, 255, .07);
}

@media (prefers-reduced-motion: reduce) {
    .show-panel { transition: none; }
    .show-panel:hover { transform: none; }
}

.show-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 12px 12px 18px;
    border-bottom: 1px solid var(--line);
}

.show-label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--display);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--primary);
}

.show-label i { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }

/* Thin chevrons split by a hairline - reads as one control, not two buttons. */
.show-nav {
    display: flex;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.show-nav-sep { width: 1px; align-self: stretch; background: var(--line); }

.show-btn {
    width: 34px; height: 30px;
    display: grid;
    place-items: center;
    background: transparent;
    border: 0;
    color: var(--muted);
    cursor: pointer;
    transition: color .16s ease, background .16s ease;
}

.show-btn svg {
    width: 15px; height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .2s ease;
}

.show-btn:hover { color: var(--primary); background: rgba(183, 255, 60, .07); }

.show-btn[data-dir="-1"]:hover svg,
.show-btn[data-bdir="-1"]:hover svg { transform: translateX(-2px); }

.show-btn[data-dir="1"]:hover svg,
.show-btn[data-bdir="1"]:hover svg { transform: translateX(2px); }

/* ---------- Deck ---------- */

.show-view { overflow: hidden; padding: 34px 18px 18px; }

/* Grid stacking: every card shares one cell, so the container takes the
   height of the tallest and nothing needs absolute positioning. */
.show-deck { display: grid; }

.show-deck .pcard {
    grid-area: 1 / 1;
    flex: none;
    transform-origin: 50% 100%;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    overflow: hidden;
    transition: transform .45s cubic-bezier(.22, .61, .36, 1),
                opacity .35s ease;
    /* No will-change here on purpose: it would promote every card in the
       deck to its own layer, each holding a full-size image. */
}

@media (prefers-reduced-motion: reduce) {
    .show-deck .pcard { transition: none; }
}

/* Progress runs flush along the bottom edge instead of as loose dots. */
.show-dots {
    display: flex;
    gap: 3px;
    border-top: 1px solid var(--line);
}

.show-dots .dot {
    flex: 1;
    width: auto;
    height: 3px;
    border-radius: 0;
    background: transparent;
}

.show-dots .dot.is-on { width: auto; }





.show-media {
    aspect-ratio: 4 / 3;
    background: radial-gradient(circle at 50% 40%, #23272C, #101215 74%);
    display: grid;
    place-items: center;
    overflow: hidden;
    border-bottom: 1px solid var(--line);
}

.show-media img.shot {
    width: 100%; height: 100%;
    object-fit: cover;
}


.show-media img.mark { width: 44px; opacity: .16; }

.show-body { padding: 26px 28px 28px; }
.show-body h3 { font-size: 26px; margin-bottom: 9px; }

/* Fixed to two lines so every slide is the same height - otherwise the
   card jumps as it cycles through taglines of different lengths. */
.show-body p {
    color: var(--muted);
    font-size: 15px;
    margin: 0 0 20px;
    min-height: 3em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.show-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

.show-price {
    font-family: var(--display);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
}

.show-go {
    font-family: var(--display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--primary);
    border: 1px solid var(--primary);
    border-radius: var(--radius);
    padding: 11px 20px;
    transition: background .18s ease, color .18s ease;
}

.pcard:hover .show-go { background: var(--primary); color: #0B0C0D; }

.showcase .dots { margin-top: 16px; }

/* Same staggered entrance as the products carousel. */
.show-deck .pcard [data-anim] { opacity: 0; transform: translateY(10px); }

.show-deck .pcard.is-live [data-anim] {
    animation: step-in .45s cubic-bezier(.2, .7, .3, 1) forwards;
}

.show-deck .pcard.is-live [data-anim="1"] { animation-delay: .05s; }
.show-deck .pcard.is-live [data-anim="2"] { animation-delay: .12s; }
.show-deck .pcard.is-live [data-anim="3"] { animation-delay: .19s; }

@media (prefers-reduced-motion: reduce) {
    .show-deck .pcard [data-anim] { opacity: 1; transform: none; animation: none; }
    .show-media img.shot { transition: none; transform: none; }
}

@media (max-width: 1080px) {
    .hero-grid { grid-template-columns: 1fr; gap: 44px; }
    .showcase { max-width: 460px; }
}

.hero h1 { font-size: clamp(2.8rem, 6.4vw, 5.6rem); margin-bottom: 26px; }
.hero h1 span { display: block; }

.hero-sub {
    color: var(--text-2);
    font-size: 19.5px;
    line-height: 1.62;
    max-width: 500px;
    margin: 0 0 40px;
}

.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* Sits at the bottom of the opening frame so it's clear there's more. */

@media (prefers-reduced-motion: reduce) {
}

/* Technical mark on the right of the hero. Replaced the handwritten
   treatment, which sat outside the rest of the system. */
.hero-mark-block {
    position: absolute;
    right: 48px;
    bottom: 150px;
    text-align: right;
    font-family: var(--display);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    line-height: 2.1;
    color: var(--text);
}

.hero-mark-block em { font-style: normal; color: var(--primary); }

.hero-mark-rule {
    display: block;
    width: 46px;
    height: 1px;
    background: var(--primary);
    margin: 0 0 16px auto;
}

/* ---------- Page head (inner pages) ---------- */

.page-head {
    padding: 76px 0 56px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, var(--bg-2), var(--bg));
}

.page-head h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); margin-bottom: 16px; }
.page-head .ph-intro > p,
.page-head > .wrap > p { color: var(--muted); margin: 0; max-width: 52ch; }

/* Heading on the left, the bundle offer on the right. Flex rather than
   grid so the intro takes the full width if there are no bundles. */
.page-head-split > .wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 44px;
}

.ph-intro { flex: 1 1 400px; min-width: 0; }

.ph-bundles { flex: 0 1 430px; }

/* Title and arrows sit above the deck, inset to line up with the front
   card rather than the padding the cards behind slide into. */
.bdeck-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 34px 14px;
}

/* Padding is what the cards behind slide into, so nothing clips. */
.bundle-deck { display: grid; padding: 0 34px; }

/* ---------- Section frame ---------- */

.section { padding: 108px 0; }
.section-alt { background: var(--bg-2); border-block: 1px solid var(--line); }

.section-bar {
    display: flex;
    align-items: center;
    gap: 26px;
    margin-bottom: 34px;
}

.section-bar h2 {
    font-size: 21px;
    letter-spacing: 0.16em;
    font-weight: 600;
    white-space: nowrap;
}

.section-bar h2::first-letter { color: var(--primary); }

.section-bar .line { flex: 1; height: 1px; background: var(--line); }

.section-bar a {
    font-family: var(--display);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
    transition: color .18s ease;
}

.section-bar a:hover { color: var(--primary); }

.section-head { max-width: 620px; margin-bottom: 44px; }
.section-head h2 { font-size: clamp(1.9rem, 4vw, 3rem); margin-bottom: 14px; }
.section-head p { color: var(--muted); margin: 0; }

/* ---------- System cards ---------- */

/* The catalogue and the homepage share one tile - see .pcard-panel. */
.grid-empty {
    grid-column: 1 / -1;
    margin: 0;
    padding: 40px 0;
    color: var(--muted);
    text-align: center;
}

/* Before anything has shipped. Deliberately not styled as an error. */
.grid-empty.is-first {
    display: grid;
    justify-items: start;
    gap: 14px;
    padding: 52px 48px;
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--line-2);
    border-radius: var(--radius-lg);
}

.grid-empty.is-first h3 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0; }
.grid-empty.is-first p { margin: 0; max-width: 62ch; color: var(--muted); line-height: 1.75; }
.grid-empty-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }

@media (max-width: 620px) {
    .grid-empty.is-first { padding: 34px 24px; }
}
/* ---------- Stats ---------- */

.stats {
    background: var(--bg-2);
    border-block: 1px solid var(--line);
    padding: 30px 0;
}

.stats .wrap {
    display: flex;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
}

.stat { text-align: center; padding: 0 6px; }

.stat b {
    display: block;
    font-family: var(--display);
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.stat span {
    font-family: var(--display);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
}

.stats-quote {
    margin-left: auto;
    max-width: 330px;
    font-size: 14px;
    font-style: italic;
    color: var(--muted);
    line-height: 1.6;
}

.stats-quote b { display: block; font-style: normal; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); margin-top: 8px; font-weight: 600; }

.stat-divider { width: 1px; height: 40px; background: var(--line); }

/* ---------- Most popular carousel ---------- */

.carousel { overflow: hidden; }

.carousel-track {
    display: flex;
    will-change: transform;
    transition: transform .45s cubic-bezier(.4, 0, .2, 1);
}

/* Arrows come from .show-nav / .show-btn, shared with the hero deck
   and the bundle deck. */
.section-bar .show-nav { flex: none; }

.dots { display: flex; gap: 10px; justify-content: center; margin-top: 36px; }

.dot {
    position: relative;
    width: 34px; height: 3px;
    padding: 0;
    border: 0;
    border-radius: 2px;
    background: var(--line-2);
    cursor: pointer;
    overflow: hidden;
    transition: width .25s ease;
}

.dot.is-on { width: 64px; }

/* Fills across while the slide is showing, so you can see the timer. */
.dot i {
    position: absolute;
    inset: 0;
    display: block;
    width: 0;
    background: var(--primary);
    border-radius: 2px;
}

.dot.is-on i { width: 100%; }

@keyframes dot-fill { from { width: 0; } to { width: 100%; } }

@media (prefers-reduced-motion: reduce) {
    .carousel-track { transition: none; }
}

/* ---------- Featured system ---------- */

.feat {
    flex: 0 0 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 52px;
    align-items: center;
}

.feat-media {
    position: relative;
    aspect-ratio: 4 / 3;
    background: radial-gradient(circle at 50% 42%, #23272C, #101215 74%);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    display: grid;
    place-items: center;
    overflow: hidden;
}

.feat-media img.shot {
    width: 100%; height: 100%;
    object-fit: cover;
    transform: scale(1.04);
    transition: transform 6s ease-out;
}

.feat.is-live .feat-media img.shot { transform: scale(1); }

.feat-media img.mark { width: 76px; opacity: .16; }

.feat-count {
    position: absolute;
    left: 20px; bottom: 16px;
    font-family: var(--display);
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
}

.feat-count i { font-style: normal; font-size: 13px; color: var(--faint); }

.feat-body { position: relative; }

/* Big faint number behind the title. */
.feat-index {
    position: absolute;
    top: -34px;
    right: 0;
    font-family: var(--display);
    font-size: 116px;
    font-weight: 700;
    line-height: 1;
    color: var(--text);
    opacity: .04;
    pointer-events: none;
    user-select: none;
}

.feat-body h2 { font-size: clamp(2rem, 3.6vw, 2.9rem); margin-bottom: 12px; }

/* Content steps in each time a slide becomes the active one. */
.feat [data-anim] { opacity: 0; transform: translateY(14px); }

.feat.is-live [data-anim] {
    animation: step-in .5s cubic-bezier(.2, .7, .3, 1) forwards;
}

.feat.is-live [data-anim="1"] { animation-delay: .05s; }
.feat.is-live [data-anim="2"] { animation-delay: .11s; }
.feat.is-live [data-anim="3"] { animation-delay: .17s; }
.feat.is-live [data-anim="4"] { animation-delay: .23s; }
.feat.is-live [data-anim="5"] { animation-delay: .29s; }
.feat.is-live [data-anim="6"] { animation-delay: .35s; }

@keyframes step-in {
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .feat [data-anim] { opacity: 1; transform: none; animation: none; }
    .feat-media img.shot { transition: none; transform: none; }
    .dot i { animation: none !important; }
}

.feat-tagline {
    font-family: var(--display);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--primary);
    margin: 0 0 18px;
}

.feat-desc { color: var(--muted); margin: 0 0 24px; max-width: 52ch; }

.feat-list {
    list-style: none;
    margin: 0 0 30px;
    padding: 0;
    display: grid;
    gap: 9px;
}

.feat-list li {
    position: relative;
    padding-left: 24px;
    font-size: 15px;
}

.feat-list li::before {
    content: '';
    position: absolute;
    left: 0; top: 9px;
    width: 8px; height: 8px;
    background: var(--primary);
    border-radius: 1px;
}

.feat-buy {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding-bottom: 26px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 22px;
}

.feat-price {
    font-family: var(--display);
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
}

.feat-meta { display: flex; gap: 38px; flex-wrap: wrap; }

.feat-meta span {
    display: block;
    font-family: var(--display);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--faint);
    margin-bottom: 4px;
}

.feat-meta b { font-size: 13px; font-weight: 500; color: var(--muted); }

@media (max-width: 900px) {
    .feat { grid-template-columns: 1fr; gap: 30px; }
}

/* ---------- About + shoutout ---------- */

/* Statement on the left, mission sitting at its baseline on the right.
   NOTE: don't put a ch-based max-width on this container - ch resolves
   against the container's own 16px font, not the headline's, which
   squeezes the big type into a narrow column. Cap the h2 instead. */
.about-lead {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 60px;
    align-items: end;
    margin-bottom: 18px;
}

.about-lead h2 {
    font-size: clamp(2rem, 4.4vw, 3.6rem);
    line-height: 1.02;
    letter-spacing: -0.03em;
    max-width: 15ch;   /* resolves against the h2's own size, so this is safe */
    margin-bottom: 0;
}

.about-mission {
    color: var(--muted);
    font-size: 17px;
    margin: 0 0 6px;
    max-width: 42ch;
}

.approach-bar { margin-top: 72px; }

.pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.pillar {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 32px 30px 34px;
    transition: border-color .2s ease;
}

.pillar:hover { border-color: var(--line-2); }

.pillar-num {
    display: block;
    font-family: var(--display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--primary);
    margin-bottom: 18px;
}

.pillar h3 { font-size: 17px; margin-bottom: 11px; }
.pillar p { margin: 0; color: var(--muted); font-size: 15px; }

@media (max-width: 900px) {
    .about-lead { grid-template-columns: 1fr; gap: 24px; align-items: start; }
    .about-lead h2 { max-width: none; }
    .about-mission { max-width: none; }
    .pillars { grid-template-columns: 1fr; }
    .approach-bar { margin-top: 52px; }
}

/* ---------- Our server ---------- */

.live-dot {
    display: inline-block;
    width: 7px; height: 7px;
    margin-right: 9px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 0 rgba(183, 255, 60, .55);
    animation: pulse 2.4s ease-out infinite;
}

@keyframes pulse {
    0%   { box-shadow: 0 0 0 0 rgba(183, 255, 60, .5); }
    70%  { box-shadow: 0 0 0 9px rgba(183, 255, 60, 0); }
    100% { box-shadow: 0 0 0 0 rgba(183, 255, 60, 0); }
}

.live-pill {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    margin-bottom: 26px;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    background: rgba(183, 255, 60, .06);
    font-family: var(--display);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text);
    transition: border-color .18s ease, background .18s ease;
}

.live-pill:hover { border-color: var(--primary); background: rgba(183, 255, 60, .12); }
.live-pill b { color: var(--primary); margin-left: 8px; font-weight: 700; }

.server {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 56px;
    align-items: center;
    background:
        radial-gradient(700px 320px at 12% 50%, rgba(183, 255, 60, .07), transparent 70%),
        var(--surface);
    border: 1px solid var(--line-2);
    border-radius: var(--radius-lg);
    padding: 52px 56px;
}

.server-mark {
    width: 150px; height: 150px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-lg);
    background: var(--bg-2);
    border: 1px solid var(--line);
}

.server-mark img { width: 96px; height: 96px; object-fit: contain; }

.server-body .eyebrow { display: flex; align-items: center; }
.server-body h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); margin-bottom: 16px; }
.server-body > p { color: var(--muted); margin: 0 0 28px; max-width: 62ch; }

.server-actions { display: flex; gap: 14px; flex-wrap: wrap; }

@media (prefers-reduced-motion: reduce) {
    .live-dot { animation: none; }
}

@media (max-width: 820px) {
    .server { grid-template-columns: 1fr; gap: 28px; padding: 36px 28px; text-align: center; }
    .server-mark { margin: 0 auto; width: 116px; height: 116px; }
    .server-mark img { width: 74px; height: 74px; }
    .server-body .eyebrow { justify-content: center; }
    .server-actions { justify-content: center; }
}

@media (max-width: 900px) {
}

/* ---------- Closing band ---------- */

.band {
    border-block: 1px solid var(--line);
    background: var(--bg-2);
    padding: 76px 0;
    text-align: center;
}

.band h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 12px; }
.band p { color: var(--muted); margin: 0 auto 28px; max-width: 46ch; }

.band-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- Filters ---------- */

.filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 30px; }

.filter {
    font-family: var(--display);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 10px 18px;
    border-radius: var(--radius);
    border: 1px solid transparent;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: all .16s ease;
}

.filter:hover { color: var(--text); }
.filter.is-active { background: var(--primary-gl); border-color: var(--primary); color: var(--primary); }

/* ---------- Bundle ---------- */

/* A deck, not a list. Every card sits in the same cell and the chosen
   one comes forward; the rest slide out behind it. */
.bundle {
    grid-area: 1 / 1;
    display: block;
    background: var(--surface);
    border: 1px solid var(--line-2);
    border-radius: var(--radius-lg);
    padding: 20px 22px 18px;
    transition:
        transform .4s cubic-bezier(.22, .61, .36, 1),
        opacity .3s ease,
        filter .3s ease,
        border-color .24s ease,
        box-shadow .3s ease;
}

/* Behind and to one side, drained of colour so the front card carries. */
.bundle.is-prev, .bundle.is-next {
    z-index: 1;
    opacity: .38;
    filter: grayscale(1);
    cursor: pointer;
    box-shadow: none;
}

.bundle.is-prev { transform: translateX(-40px) scale(.9); }
.bundle.is-next { transform: translateX(40px) scale(.9); }

.bundle.is-prev:hover, .bundle.is-next:hover { opacity: .62; filter: grayscale(.5); }

/* Anything not in the front three stays hidden rather than piling up. */
.bundle:not(.is-on):not(.is-prev):not(.is-next) {
    opacity: 0;
    transform: scale(.85);
    pointer-events: none;
}

.bundle.is-on {
    z-index: 3;
    opacity: 1;
    transform: none;
    filter: none;
    border-color: var(--primary);
    background: linear-gradient(150deg, var(--primary-gl), transparent 62%), var(--surface);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .5), 0 0 30px -8px rgba(183, 255, 60, .35);
}

.bundle-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 7px;
}

.bundle h3 { font-size: 19px; margin: 0; }

.bundle-tag {
    margin: 0 0 16px;
    color: var(--muted);
    font-size: 13.5px;
}

.bundle-includes { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }

/* The reason to buy the bundle, said plainly. */
.bundle-save {
    flex: none;
    font-family: var(--display);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: var(--radius);
    background: var(--primary);
    color: #0B0C0D;
}

.bundle-foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-top: 13px;
    border-top: 1px solid var(--line);
}

.bundle-price { display: flex; align-items: baseline; gap: 9px; }

.bundle-price .now {
    font-family: var(--display);
    font-size: 26px;
    font-weight: 700;
    color: var(--primary);
    line-height: 1;
}

.bundle-price .was { color: var(--faint); text-decoration: line-through; font-size: 13px; }

/* Only the front card is actually buyable, so only it invites a click. */
.bundle-go {
    align-self: center;
    font-family: var(--display);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    opacity: 0;
    transition: color .2s ease, opacity .3s ease;
}

.bundle.is-on .bundle-go { opacity: 1; }
.bundle.is-on:hover .bundle-go { color: var(--primary); }

@media (prefers-reduced-motion: reduce) {
    .bundle { transition: opacity .2s ease, border-color .2s ease; }
}

@media (max-width: 900px) {
    .page-head-split > .wrap { gap: 34px; }
    .ph-bundles { flex: 1 1 100%; max-width: 470px; margin: 0 auto; }
}

/* ---------- Roadmap ---------- */

/* Sits on the rule under the page heading, so it reads as the divider
   itself rather than another section stacked below it. */
.rm-strip { background: var(--bg); border-bottom: 1px solid var(--line); }

.rm-bar {
    display: block;
    width: 100%;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: left;
    transition: background .2s ease;
}

.rm-bar:hover, .rm-strip.is-open .rm-bar { background: rgba(183, 255, 60, .035); }

.rm-bar > .wrap {
    display: flex;
    align-items: center;
    gap: 22px;
    padding-block: 15px;
}

/* Middle column takes the slack so the control stays pinned right. */
.rm-bar-sum {
    flex: 1;
    min-width: 0;
    font-family: var(--display);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--faint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rm-bar-go {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    font-family: var(--display);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    transition: color .18s ease;
}

.rm-bar-go em { font-style: normal; }
.rm-bar:hover .rm-bar-go, .rm-strip.is-open .rm-bar-go { color: var(--primary); }

.rm-bar-go i {
    width: 7px; height: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .3s cubic-bezier(.22, .61, .36, 1);
}

.rm-strip.is-open .rm-bar-go i { transform: translateY(1px) rotate(-135deg); }

/* 0fr to 1fr animates a height the content decides. */
.rm-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .42s cubic-bezier(.22, .61, .36, 1);
}

.rm-strip.is-open .rm-panel { grid-template-rows: 1fr; }

.rm-panel-in { overflow: hidden; }
.rm-strip.is-open .rm-panel-in { border-top: 1px solid var(--line); }
.rm-panel .wrap { padding-block: 34px 38px; }

.rm-intro { margin: 0 0 28px; max-width: 68ch; color: var(--muted); }

/* Three fixed rows - heading, note, cards - that every column shares.
   Without this a one-line note lets its column's cards ride up above
   the others. */
.rm-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto 1fr;
    gap: 0;
    border: 1px solid var(--line-2);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

/* Hairlines between columns rather than three floating boxes. */
.rm-col {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    padding: 22px;
    border-left: 1px solid var(--line);
}

.rm-col:first-child { border-left: 0; }

.rm-col-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.rm-count {
    font-family: var(--display);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 3px 8px;
    border: 1px solid var(--line-2);
    border-radius: var(--radius);
    color: var(--muted);
}

.rm-note {
    margin: 0 0 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
    color: var(--faint);
    font-size: 12.5px;
    line-height: 1.6;
}

/* A column without a note shouldn't draw a rule over nothing. */
.rm-note:empty { border-bottom: 0; padding-bottom: 0; }

.rm-list { display: grid; align-content: start; gap: 8px; }

.rm-card {
    display: grid;
    gap: 5px;
    width: 100%;
    padding: 14px 15px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    text-align: left;
    cursor: pointer;
    transition: border-color .2s ease, transform .2s ease, background .2s ease;
}

.rm-card:hover {
    transform: translateX(3px);
    border-color: var(--primary);
    background: linear-gradient(100deg, var(--primary-gl), transparent 65%), var(--surface);
}

/* Ideas aren't products yet, so they don't pretend to be clickable. */
.rm-card.is-idea { cursor: default; background: transparent; border-style: dashed; }
.rm-card.is-idea:hover { transform: none; border-color: var(--line-2); background: transparent; }

.rm-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.rm-card-top b {
    font-family: var(--display);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text);
}

/* Two hairlines crossed, so it stays crisp at this size. */
.rm-plus {
    position: relative;
    flex: none;
    width: 11px; height: 11px;
    color: var(--muted);
    opacity: .35;
    transition: opacity .2s ease, color .2s ease, transform .25s ease;
}

.rm-plus::before, .rm-plus::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    background: currentColor;
    transform: translate(-50%, -50%);
}

.rm-plus::before { width: 11px; height: 1px; }
.rm-plus::after  { width: 1px; height: 11px; }

.rm-card:hover .rm-plus { opacity: 1; color: var(--primary); transform: rotate(90deg); }

.rm-card-sub { color: var(--faint); font-size: 12.5px; line-height: 1.55; }

.rm-empty { margin: 0; color: var(--faint); font-size: 12.5px; }

.rm-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 18px 26px;
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
}

.rm-foot p { margin: 0; max-width: 60ch; color: var(--muted); font-size: 13.5px; }

@media (prefers-reduced-motion: reduce) {
    .rm-card, .rm-plus, .rm-panel, .rm-bar-go i { transition: none; }
    .rm-card:hover, .rm-card:hover .rm-plus { transform: none; }
}

/* Stacked, so there are no neighbouring rows to line up with. */
@media (max-width: 900px) {
    .rm-grid { grid-template-columns: 1fr; grid-template-rows: none; }
    .rm-col {
        display: block;
        grid-row: auto;
        grid-template-rows: none;
        border-left: 0;
        border-top: 1px solid var(--line);
    }
    .rm-col:first-child { border-top: 0; }
    .rm-bar-sum { display: none; }
}

/* ---------- Documentation ---------- */

/* The body keeps the same width and position as every other page, and
   the rail sits outside it to the left.

   Columns: [ rail | body | gutter ]. The empty third column is what
   keeps the body centred on the viewport rather than pushed right by
   the width of the rail. The body shrinks before the rail does, so the
   rail never gets squeezed off the edge. */
.doc-wrap {
    display: grid;
    grid-template-columns: 250px minmax(0, var(--wrap)) 250px;
    justify-content: center;
    gap: 0 40px;
    padding: 0 24px;
    align-items: start;
}

/* Follows you down the page rather than scrolling away. */
.doc-side {
    position: sticky;
    top: 96px;
    display: grid;
    gap: 22px;
}

.doc-body { padding: 0 40px; }

/* On the chooser there is nothing to navigate yet, so the rail goes and
   the cards take the full width. */
.doc-wrap.is-home { grid-template-columns: minmax(0, var(--wrap)); }
.doc-wrap.is-home .doc-side { display: none; }

/* Not enough room left of the body to hold a rail outside it, so it
   comes back inline rather than being pushed off the page. */
@media (max-width: 1380px) {
    .doc-wrap { grid-template-columns: 250px minmax(0, 1fr); justify-content: stretch; gap: 0 40px; }
    .doc-body { padding: 0; }
}

.doc-search input {
    width: 100%;
    padding: 11px 14px;
    background: var(--bg);
    border: 1px solid var(--line-2);
    border-radius: var(--radius);
    color: var(--text);
    font-family: var(--body);
    font-size: 13px;
    transition: border-color .18s ease;
}

.doc-search input:focus { outline: 0; border-color: var(--primary); }
.doc-search input::placeholder { color: var(--faint); }

.doc-nav { display: grid; gap: 22px; }

.doc-group { display: grid; }

.doc-group-label {
    margin-bottom: 9px;
    font-family: var(--display);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--faint);
}

.doc-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0 8px 14px;
    border-left: 1px solid var(--line);
    font-family: var(--display);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--muted);
    transition: color .18s ease, border-color .18s ease;
}

.doc-link:hover { color: var(--text); }
.doc-link.is-on { color: var(--primary); border-left-color: var(--primary); }

/* One rail per space; you are only ever inside one. */
.doc-nav { display: none; }
.doc-nav.is-on { display: grid; }

/* Sits with the page heading, opposite the title. */
#docs-head .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px 40px;
}

#docs-head .ph-intro { flex: 1 1 420px; min-width: 0; }

/* Nowhere to go back to from the chooser. */
#docs-head.is-home .doc-back { display: none; }

/* Route out of a space, back to the chooser. The main way back, so it
   reads as a control rather than a footnote. */
.doc-back {
    flex: none;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: var(--surface);
    border: 1px solid var(--line-2);
    border-radius: var(--radius);
    font-family: var(--display);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-2);
    transition: color .18s ease, border-color .18s ease, background .18s ease;
}

.doc-back:hover {
    color: var(--primary);
    border-color: var(--primary);
    background: linear-gradient(100deg, var(--primary-gl), transparent 70%), var(--surface);
}

.doc-back i {
    flex: none;
    width: 8px; height: 8px;
    border-left: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform .2s ease;
}

.doc-back:hover i { transform: rotate(45deg) translate(-2px, 2px); }

/* Which script you're reading about, held at the top of the rail. */
.doc-space {
    display: grid;
    gap: 5px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--line);
}

.doc-space-name {
    font-family: var(--display);
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
}

.doc-space-sub {
    font-family: var(--display);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--faint);
}

/* Unwritten products are still listed, just marked. */
.doc-soon {
    flex: none;
    font-style: normal;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 2px 6px;
    border: 1px solid var(--line-2);
    border-radius: var(--radius);
    color: var(--faint);
}

/* One page at a time - the rest stay in the DOM but out of the way. */
.doc-sec { display: none; }
.doc-sec.is-on { display: block; }

/* ---------- Docs landing ---------- */

.doc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding-bottom: 34px;
    margin-bottom: 34px;
    border-bottom: 1px solid var(--line);
}

.doc-cards-head {
    display: flex;
    align-items: baseline;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.doc-cards-note { color: var(--faint); font-size: 13px; }

/* Same tile as the products page - see .pcard-panel. Only the footer
   differs, because nothing here is for sale. */
.doc-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
    gap: 20px;
}

.dcard-pages {
    font-family: var(--display);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--faint);
}

.dcard-panel .pcard.is-soon .dcard-pages { color: var(--muted); }

.doc-crumb {
    margin: 0 0 10px !important;
    font-family: var(--display);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--primary);
}

.doc-pager {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 56px;
    padding-top: 26px;
    border-top: 1px solid var(--line);
}

.doc-prev, .doc-next {
    display: grid;
    gap: 5px;
    padding: 15px 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    transition: border-color .2s ease, background .2s ease;
}

.doc-next { text-align: right; }
.doc-prev:hover, .doc-next:hover { border-color: var(--primary); background: var(--surface); }

.doc-prev span, .doc-next span {
    font-family: var(--display);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--faint);
}

.doc-prev b, .doc-next b {
    font-family: var(--display);
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
}

.doc-help {
    padding: 20px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}

.doc-help b { display: block; font-family: var(--display); font-size: 13px; margin-bottom: 6px; }
.doc-help p { margin: 0 0 16px; color: var(--muted); font-size: 12.5px; line-height: 1.6; }

.doc-sec h2 {
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    margin-bottom: 26px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--line);
}

.doc-sec p { margin: 0 0 18px; color: var(--text-2); max-width: 74ch; }
.doc-sec .code { margin: 0 0 24px; }

.doc-list, .doc-steps {
    margin: 0 0 22px;
    padding: 0;
    display: grid;
    gap: 11px;
    max-width: 74ch;
    color: var(--text-2);
}

.doc-list { list-style: none; }

.doc-list li { position: relative; padding-left: 20px; }

.doc-list li::before {
    content: '';
    position: absolute;
    left: 0; top: 10px;
    width: 6px; height: 1px;
    background: var(--primary);
}

/* Counter rather than list-style, so the number can be styled. */
.doc-steps { list-style: none; counter-reset: step; }

.doc-steps li {
    position: relative;
    padding-left: 36px;
    counter-increment: step;
}

.doc-steps li::before {
    content: counter(step, decimal-leading-zero);
    position: absolute;
    left: 0; top: 1px;
    font-family: var(--display);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--primary);
}

.doc-rows {
    margin: 0 0 24px;
    display: grid;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.doc-rows > div {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 20px;
    padding: 14px 18px;
    border-top: 1px solid var(--line);
}

.doc-rows > div:first-child { border-top: 0; }

.doc-rows dt {
    font-family: var(--display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--text);
}

.doc-rows dd { margin: 0; color: var(--muted); font-size: 14px; }

.doc-h {
    margin: 40px 0 14px;
    padding-top: 26px;
    border-top: 1px solid var(--line);
    font-size: 17px;
    letter-spacing: 0.01em;
}

.doc-h:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* ---------- API reference ---------- */

.doc-api { margin-bottom: 26px; }

/* Switcher between exports, events and callbacks. */
.api-nav {
    display: flex;
    gap: 0;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--line);
    overflow-x: auto;
    scrollbar-width: none;
}

.api-nav::-webkit-scrollbar { display: none; }

.api-navbtn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: none;
    padding: 12px 18px;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    font-family: var(--display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    transition: color .18s ease, border-color .18s ease;
}

.api-navbtn:first-child { padding-left: 0; }
.api-navbtn:hover { color: var(--text); }
.api-navbtn.is-on { color: var(--primary); border-bottom-color: var(--primary); }

/* Count sits with the label so you can see how much is in each. */
.api-navbtn i {
    font-style: normal;
    font-size: 9px;
    letter-spacing: 0.1em;
    padding: 2px 6px;
    border: 1px solid var(--line-2);
    border-radius: var(--radius);
    color: var(--faint);
}

.api-navbtn.is-on i { border-color: var(--primary); color: var(--primary); }

.api-pane { display: none; }
.api-pane.is-on { display: grid; gap: 20px; }

.api {
    padding: 20px 22px 22px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}

.api-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.api-name {
    font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 15px;
    font-weight: 600;
    color: var(--primary);
}

/* Kind is the tab you're on, so the entry only needs to say the side. */
.api-side {
    flex: none;
    font-style: normal;
    font-family: var(--display);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: var(--radius);
    border: 1px solid var(--line-2);
    color: var(--muted);
}

.api-desc { margin: 0 0 14px !important; color: var(--text-2); font-size: 14px; }

.api-sig {
    margin: 0 0 16px;
    padding: 12px 14px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow-x: auto;
    font-size: 13px;
    line-height: 1.5;
}

.api-sig code { font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace); }

.api-params {
    width: 100%;
    margin-bottom: 16px;
    border-collapse: collapse;
    font-size: 13px;
    text-align: left;
}

.api-params th {
    padding: 0 14px 9px 0;
    border-bottom: 1px solid var(--line);
    font-family: var(--display);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--faint);
}

.api-params td {
    padding: 10px 14px 10px 0;
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    vertical-align: top;
}

.api-params tr:last-child td { border-bottom: 0; }
.api-params code { font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace); color: var(--text); }
.api-params em { font-style: normal; color: var(--primary); font-size: 12px; }

.api-returns {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 0 0 16px !important;
    flex-wrap: wrap;
}

.api-returns span {
    font-family: var(--display);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--faint);
}

.api-returns code {
    font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 13px;
    color: var(--text);
}

.api .code { margin: 0 !important; }

/* The thing people skim for, so it gets the lime edge. */
.doc-note {
    margin: 0 0 24px;
    padding: 16px 20px;
    max-width: 74ch;
    background: linear-gradient(100deg, var(--primary-gl), transparent 70%), var(--surface);
    border: 1px solid var(--line);
    border-left: 2px solid var(--primary);
    border-radius: var(--radius);
    color: var(--text-2);
    font-size: 14px;
    line-height: 1.65;
}

@media (max-width: 940px) {
    .doc-wrap, .doc-wrap.is-home { grid-template-columns: 1fr; gap: 40px; padding: 0 22px; }
    .doc-side { position: static; padding-right: 0; }
    .doc-body { padding: 0; }
    .doc-nav.is-on { gap: 18px; }
    .doc-group { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; gap: 4px; align-items: center; }
    .doc-group-label { margin: 0 10px 0 0; }
    .doc-link { padding: 9px 14px; border-left: 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
    .doc-link.is-on { border-bottom-color: var(--primary); }
    .doc-rows > div { grid-template-columns: 1fr; gap: 6px; }
    .doc-pager { grid-template-columns: 1fr; }
    .doc-next { text-align: left; }
}

.tag {
    font-family: var(--display);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 5px 11px;
    border-radius: var(--radius);
    border: 1px solid var(--line-2);
    color: var(--muted);
}

/* ---------- Tools ---------- */

/* Note under a section heading, for the one line of context a heading
   can't carry on its own. */
.sec-note {
    margin: -12px 0 26px;
    max-width: 56ch;
    color: var(--muted);
    font-size: 14.5px;
}

.tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 22px;
}

/* Wider than a system card: a subscription has to justify itself. */
.tool {
    display: grid;
    grid-template-columns: 210px 1fr;
    background: var(--surface);
    border: 1px solid var(--line-2);
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.tool:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

.tool:hover {
    transform: translateY(-4px);
    border-color: var(--primary);
    box-shadow:
        0 18px 40px rgba(0, 0, 0, .5),
        0 0 26px -4px rgba(183, 255, 60, .3);
}

.tool-media {
    display: grid;
    place-items: center;
    background: radial-gradient(circle at 50% 40%, #23272C, #101215 74%);
    border-right: 1px solid var(--line);
    overflow: hidden;
}

.tool-media img.shot { width: 100%; height: 100%; object-fit: cover; }
.tool-media img.mark { width: 52px; opacity: .18; }

.tool-body { display: flex; flex-direction: column; padding: 22px 24px 24px; }

.tool-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}

.tool-body h3 { font-size: 21px; margin-bottom: 8px; }
.tool-tagline { margin: 0 0 16px; color: var(--text-2); font-size: 14.5px; }

.tool-list {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    display: grid;
    gap: 8px;
}

.tool-list li {
    position: relative;
    padding-left: 18px;
    color: var(--muted);
    font-size: 13.5px;
}

.tool-list li::before {
    content: '';
    position: absolute;
    left: 0; top: 8px;
    width: 5px; height: 5px;
    background: var(--primary);
}

.tool-foot {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

.tool-price {
    font-family: var(--display);
    font-size: 24px;
    font-weight: 700;
    color: var(--primary);
    white-space: nowrap;
}

.tool-actions { display: flex; align-items: center; gap: 16px; }

/* The card opens the detail overlay, so it says so. */
.tool-more {
    font-family: var(--display);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    transition: color .18s ease;
}

.tool:hover .tool-more { color: var(--primary); }

.tool.is-soon .tool-media img { filter: grayscale(1); opacity: .45; }
.tool.is-soon .tool-price { color: var(--muted); }

/* An unreleased product has to look unreleased, or the catalogue reads
   as a shop full of things nobody can buy yet. */
.pcard.is-soon img.shot { filter: grayscale(1); opacity: .5; }
.pcard.is-soon .show-price { color: var(--muted); font-size: 12px; letter-spacing: 0.16em; }
.pcard-panel:has(.pcard.is-soon):hover { border-color: var(--line-3); box-shadow: none; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .tool { transition: none; }
    .tool:hover { transform: none; }
}

@media (max-width: 620px) {
    .tools-grid, .tool { grid-template-columns: 1fr; }
    .tool-media { aspect-ratio: 16 / 9; border-right: 0; border-bottom: 1px solid var(--line); }
    .tool-foot { flex-direction: column; align-items: stretch; }
}

/* ---------- Free ---------- */

/* One per row. There are only ever a couple, and stacked they read as a
   short list rather than a thin catalogue. */
.freebies { display: flex; flex-direction: column; gap: 16px; }

.free-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 22px;
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 30px 32px;
    transition: border-color .2s ease;
}

.free-card { cursor: pointer; }
.free-card:hover { border-color: var(--primary); }
.free-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.free-card img { width: 46px; opacity: .9; }
.free-card h3 { font-size: 18px; margin-bottom: 8px; }
.free-card p { margin: 0; color: var(--muted); font-size: 14.5px; }

.free-foot { display: flex; align-items: center; gap: 16px; margin-top: 18px; }

/* The card opens a detail page, so it says so. */
.free-more {
    font-family: var(--display);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    transition: color .18s ease;
}

.free-card:hover .free-more { color: var(--primary); }

.pill-free {
    display: inline-block;
    font-family: var(--display);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #0B0C0D;
    background: var(--primary);
    border-radius: 2px;
    padding: 3px 9px;
    margin-bottom: 10px;
}

/* ---------- FAQ ---------- */

/* Full width, with a rule under each row. The +/- sits at the far right
   so the whole row reads as one control rather than a short line of
   text with a lot of empty space after it. */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); transition: background .18s ease; }
.faq details:hover { background: rgba(255, 255, 255, .012); }

.faq summary {
    cursor: pointer;
    list-style: none;
    padding: 26px 56px 26px 20px;
    position: relative;
    font-family: var(--display);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: color .16s ease;
}

.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--primary); }

.faq summary::after {
    content: '+';
    position: absolute;
    right: 20px; top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    line-height: 1;
    color: var(--primary);
}

.faq details[open] summary::after { content: '\2212'; }
.faq details[open] summary { color: var(--primary); }

/* The row runs the full width; the answer stays a readable measure. */
.faq p {
    margin: 0 0 28px;
    padding: 0 56px 0 20px;
    max-width: 88ch;
    color: var(--muted);
    line-height: 1.75;
}

@media (max-width: 700px) {
    .faq summary { padding: 20px 44px 20px 0; font-size: 15px; }
    .faq summary::after { right: 4px; }
    .faq p { padding: 0 44px 0 0; }
}

/* ---------- Partners / quotes ---------- */

.partners { display: flex; gap: 44px; justify-content: center; align-items: center; flex-wrap: wrap; }
.partners img { height: 42px; width: auto; opacity: .45; filter: grayscale(1); transition: all .2s ease; }
.partners a:hover img { opacity: 1; filter: grayscale(0); }

.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }

.quote { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px 28px; }
.quote p { margin: 0 0 16px; font-size: 15.5px; font-style: italic; }
.quote footer { font-size: 13px; color: var(--muted); }
.quote footer b { color: var(--primary); font-weight: 600; }

/* ============================================================
   JEX design language
   Small technical parts reused across every section.
   ============================================================ */

.label {
    font-family: var(--display);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--muted);
}

.status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--display);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
}

.status i {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 3px rgba(183, 255, 60, .12);
}

.status.is-pending i { background: var(--faint); box-shadow: none; }

/* Key/value technical rows. */
.meta {
    margin: 0;
    display: grid;
    gap: 7px;
    border-top: 1px solid var(--line);
    padding-top: 14px;
}

.meta > div { display: flex; gap: 14px; align-items: baseline; }

.meta dt {
    flex: 0 0 108px;
    font-family: var(--display);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--faint);
}

.meta dd {
    margin: 0;
    font-family: var(--display);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-2);
}

/* Oversized ghost index. */
.sec-num {
    font-family: var(--display);
    font-size: clamp(3.4rem, 6vw, 5.6rem);
    font-weight: 700;
    line-height: .8;
    letter-spacing: -0.04em;
    color: var(--text);
    opacity: .07;
    user-select: none;
}

/* ---------- Section header ---------- */

.sec-head { margin-bottom: 64px; }

.sec-head-top {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 30px;
}

.sec-index {
    font-family: var(--display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--primary);
}

.sec-head-top .rule { flex: 1; height: 1px; background: var(--line); }

.sec-link {
    font-family: var(--display);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
    transition: color .18s ease;
}

.sec-link:hover { color: var(--primary); }
.sec-link b { color: var(--primary); }

.sec-head h2 {
    font-size: clamp(2rem, 4.4vw, 3.4rem);
    line-height: 1.04;
    letter-spacing: -0.03em;
    max-width: 18ch;
}

.sec-head h2 span { display: block; }
.sec-head h2 span:last-child { color: var(--primary); }
.sec-head h2 span:only-child { color: var(--text); }

.sec-body {
    margin: 24px 0 0;
    max-width: 56ch;
    color: var(--muted);
    font-size: 16.5px;
}

/* ---------- 01 Principles ---------- */

.prins {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-top: 1px solid var(--line);
}

.prin {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 22px;
    padding: 40px 34px 44px 0;
    border-right: 1px solid var(--line);
}

.prin:last-child { border-right: 0; padding-right: 0; }
.prin:not(:first-child) { padding-left: 34px; }

.prin-body h3 { font-size: 17px; margin-bottom: 12px; }
.prin-body > p { margin: 0 0 20px; color: var(--muted); font-size: 15px; }

.prin-list {
    list-style: none;
    margin: 0 0 4px;
    padding: 0;
    display: grid;
    gap: 8px;
}

.prin-list li {
    position: relative;
    padding-left: 18px;
    font-family: var(--display);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--text-2);
}

.prin-list li::before {
    content: '';
    position: absolute;
    left: 0; top: 8px;
    width: 6px; height: 1px;
    background: var(--primary);
}

/* ---------- 02 Featured systems ---------- */

/* Three across, using the same card component as the hero deck. */
.fsys-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.pcard-panel {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line-2);
    border-radius: var(--radius-lg);
    background: var(--surface);
    overflow: hidden;
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.pcard-panel:hover {
    transform: translateY(-4px);
    border-color: var(--primary);
    box-shadow:
        0 26px 60px rgba(0, 0, 0, .55),
        0 0 26px -4px rgba(183, 255, 60, .3);
}

.pcard-panel .pcard { flex: 1; display: flex; flex-direction: column; }
.pcard-panel .show-body { flex: 1; display: flex; flex-direction: column; }
.pcard-panel .show-foot { margin-top: auto; }

/* Panel owns the hover, so the card inside stays flat. */
.pcard-panel .pcard { border: 0; border-radius: 0; background: transparent; }

@media (max-width: 1000px) { .fsys-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px)  { .fsys-grid { grid-template-columns: 1fr; } }
/* ---------- 03 Ecosystem diagram ---------- */

.diagram {
    display: grid;
    justify-items: center;
    padding: 20px 0 0;
}

.node {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 20px 22px;
    width: 100%;
    transition: border-color .2s ease;
}

.node:hover { border-color: var(--line-3); }

.node-core {
    max-width: 320px;
    text-align: center;
    border-color: var(--line-2);
    background: linear-gradient(180deg, rgba(183, 255, 60, .05), transparent 70%), var(--surface);
}

.node-core .status { margin-top: 12px; }

.node-id {
    display: block;
    font-family: var(--display);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.2em;
    color: var(--primary);
    margin-bottom: 9px;
}

.node h3 { font-size: 15px; margin-bottom: 6px; }
.node p { margin: 0; font-size: 13px; color: var(--muted); }

/* Vertical drop from the core, then a horizontal rail over the nodes. */
.diagram-rail {
    width: 100%;
    height: 54px;
    position: relative;
}

.diagram-rail::before {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    width: 1px; height: 27px;
    background: var(--line-2);
}

.diagram-rail::after {
    content: '';
    position: absolute;
    top: 27px;
    left: 12.5%; right: 12.5%;
    height: 1px;
    background: var(--line-2);
}

.diagram-nodes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    width: 100%;
}

/* Stub connecting each node up to the rail. */
.diagram-nodes .node::before {
    content: '';
    position: absolute;
    left: 50%; top: -27px;
    width: 1px; height: 27px;
    background: var(--line-2);
}

.diagram-note {
    margin: 44px auto 0;
    max-width: 62ch;
    text-align: center;
    color: var(--muted);
    font-size: 15px;
}

/* ---------- 04 Config panel ---------- */

.devx {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 56px;
    align-items: start;
}

.code {
    background: #0D0F11;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.code-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 18px;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
    font-family: var(--display);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--text-2);
}

/* One panel, a tab per file, so config and integration share one layout
   instead of repeating the whole heading/copy/list block twice. */
.code-bar { padding: 0 12px 0 0; }

.code-tabs { display: flex; align-self: stretch; }

.code-tab {
    padding: 14px 18px;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
    color: var(--faint);
    cursor: pointer;
    transition: color .16s ease, border-color .16s ease;
}

.code-tab:hover { color: var(--text-2); }
.code-tab.is-on { color: var(--text); border-bottom-color: var(--primary); }

.code-pane { display: none; }
.code-pane.is-on { display: block; }

/* Filename with a lime dot, used when there's only one file. */
.code-file { display: inline-flex; align-items: center; gap: 10px; padding-left: 18px; }

.code-file i {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--primary);
}

.code-copy {
    font-family: var(--display);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    background: transparent;
    border: 1px solid var(--line-2);
    border-radius: var(--radius);
    padding: 6px 12px;
    cursor: pointer;
    transition: color .16s ease, border-color .16s ease;
}

.code-copy:hover { color: var(--primary); border-color: var(--primary); }
.code-copy.is-done { color: var(--primary); border-color: var(--primary); }

/* Off-screen source for the copy button. */
.code-raw {
    position: absolute;
    left: -9999px;
    width: 1px; height: 1px;
    opacity: 0;
}

.code { position: relative; }

.code-body { padding: 26px 0 28px; }

/* ---------- Lua syntax ---------- */

.code code .cm, .code code .hash { color: #55606B; font-style: italic; }
.code code .st { color: #B7FF3C; }
.code code .kw { color: #7FB2FF; }
.code code .li { color: #E0A45E; }
.code code .nu { color: #E0A45E; }

.code-line { display: flex; gap: 22px; padding: 3px 26px; }

.code-n {
    flex: 0 0 auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
    color: #3A4047;
    user-select: none;
}

.code code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 15.5px;
    line-height: 1.85;
    color: var(--text-2);
    white-space: pre-wrap; overflow-wrap: anywhere;
}

.devx-points { list-style: none; margin: 0; padding: 0; }

.devx-points li {
    padding: 22px 0;
    border-bottom: 1px solid var(--line);
}

.devx-points li:first-child { padding-top: 0; }
.devx-points li:last-child { border-bottom: 0; }

.devx-points h4 {
    font-family: var(--display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0 0 8px;
}

.devx-points p { margin: 0; color: var(--muted); font-size: 15px; }

/* ---------- Install steps ---------- */

.devx-steps { list-style: none; margin: 0; padding: 0; }

.step {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 20px;
    padding-bottom: 28px;
}

.step:last-child { padding-bottom: 0; }

/* Thin connector running down through the step numbers. */
.step::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 34px;
    bottom: 0;
    width: 1px;
    background: var(--line);
}

.step:last-child::before { display: none; }

.step-n {
    position: relative;
    z-index: 1;
    width: 31px; height: 31px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line-2);
    border-radius: 50%;
    background: var(--bg-2);
    font-family: var(--display);
    font-size: 10.5px;
    font-weight: 700;
    color: var(--primary);
}

.step h4 {
    font-family: var(--display);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 5px 0 8px;
}

.step p { margin: 0; color: var(--muted); font-size: 15px; }

/* Supporting points as bordered cards, same treatment as the ecosystem
   nodes. The divided strip this replaced put six items in four columns,
   so the last two wrapped and the borders stopped lining up. */
.devx-points-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 76px;
    list-style: none;
    padding: 0;
}

.devx-points-row .node { width: auto; padding: 24px 24px 26px; }

.devx-points-row li {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 24px 24px 26px;
    transition: border-color .2s ease;
}

.devx-points-row li:hover { border-color: var(--line-3); }

.devx-points-row .node-id { margin-bottom: 14px; }

.devx-points-row h4 {
    font-family: var(--display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0 0 9px;
}

.devx-points-row p { margin: 0; color: var(--muted); font-size: 14.5px; }

@media (max-width: 1000px) { .devx-points-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .devx-points-row { grid-template-columns: 1fr; margin-top: 52px; } }
/* ---------- Mirrored row: copy left, panel right ---------- */

/* Oversized figure balancing the code panel above it. */

@media (max-width: 1100px) {
}

@media (max-width: 640px) {
}

/* ---------- 05 Build with JEX ---------- */

.bw-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-top: 1px solid var(--line);
}

.bw-col {
    padding: 34px 28px 38px 0;
    border-right: 1px solid var(--line);
}

.bw-col:last-child { border-right: 0; padding-right: 0; }
.bw-col:not(:first-child) { padding-left: 28px; }

.bw-n {
    display: block;
    font-family: var(--display);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--primary);
    margin-bottom: 16px;
}

.bw-col h3 { font-size: 15px; margin-bottom: 10px; }
.bw-col p { margin: 0; color: var(--muted); font-size: 14.5px; }

.bw-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 52px; }

/* ---------- Responsive ---------- */

@media (max-width: 1100px) {
    .devx { grid-template-columns: 1fr; gap: 36px; }
    .diagram-nodes { grid-template-columns: repeat(2, 1fr); gap: 18px; }
    .diagram-rail::after { left: 25%; right: 25%; }
}

@media (max-width: 900px) {
    .prins, .bw-grid { grid-template-columns: 1fr; }
    .prin, .bw-col {
        border-right: 0;
        border-bottom: 1px solid var(--line);
        padding: 30px 0 32px;
    }
    .prin:not(:first-child), .bw-col:not(:first-child) { padding-left: 0; }
    .prin:last-child, .bw-col:last-child { border-bottom: 0; }
    .sec-head { margin-bottom: 44px; }
}

@media (max-width: 640px) {
    .diagram-nodes { grid-template-columns: 1fr; }
    .diagram-rail { height: 32px; }
    .diagram-rail::after { display: none; }
    .diagram-nodes .node::before { display: none; }
}

/* ============================================================
   Product overlay
   ============================================================ */

body.is-locked { overflow: hidden; }

.pm {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
    overflow-y: auto;
    padding: 28px 20px;
}

.pm.is-open { display: flex; }

/* The basket is pinned to the edge, so it opts out of the centring. */
#cart-drawer.is-open { display: block; }

.pm-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(6, 7, 8, .82);
    animation: fade-in .2s ease both;
}

/* margin:auto centres on both axes. align-items:center would clip the top
   of the panel once it grows taller than the viewport. */
.pm-panel {
    position: relative;
    width: 100%;
    max-width: 1104px;
    max-height: calc(100vh - 48px);
    margin: auto;
    display: flex;
    flex-direction: column;
    background: var(--bg-2);
    border: 1px solid var(--line-2);
    border-radius: var(--radius-lg);
    box-shadow: 0 40px 100px rgba(0, 0, 0, .7);
    animation: pm-in .28s cubic-bezier(.22, .61, .36, 1) both;
    overflow: hidden;
}

/* Header and tabs stay put; only the tab content scrolls. */
.pm-top, .pm-tabbar { flex: 0 0 auto; }
.pm-body { flex: 1 1 auto; overflow-y: auto; min-height: 0; }

@keyframes pm-in {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

/* Close on top, rail arrow underneath, in their own column down the
   right-hand edge so neither ever sits over the content. */
.pm-ctl {
    flex: none;
    z-index: 3;
    width: 58px;
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 8px;
    padding: 14px 0;
    background: var(--bg);
}

.pm-ctl-btn {
    width: 36px; height: 36px;
    display: grid;
    place-items: center;
    background: rgba(11, 12, 13, .7);
    border: 1px solid var(--line-2);
    border-radius: var(--radius);
    color: var(--muted);
    font-size: 13px;
    cursor: pointer;
    transition: color .16s ease, border-color .16s ease;
}

.pm-ctl-btn:hover { color: var(--primary); border-color: var(--primary); }
.pm-panel.rail-open .pm-rail-btn { color: var(--primary); border-color: var(--line-3); }

/* Points the way the rail travels: out to bring it in, back to tuck it away. */
.pm-rail-btn i {
    width: 8px; height: 8px;
    border-top: 1px solid currentColor;
    border-left: 1px solid currentColor;
    transform: rotate(135deg);
    transition: transform .38s cubic-bezier(.22, .61, .36, 1);
}

.pm-panel.rail-open .pm-rail-btn i { transform: rotate(-45deg); }

/* Media left, purchase panel right. */
.pm-top {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    border-bottom: 1px solid var(--line);
}

.pm-media {
    background: radial-gradient(circle at 50% 40%, #23272C, #101215 74%);
    display: grid;
    place-items: center;
    overflow: hidden;
    border-right: 1px solid var(--line);
    min-height: 340px;
}

.pm-media { position: relative; }
.pm-media img { width: 100%; height: 100%; object-fit: cover; }
.pm-media img.mark { width: 76px; height: auto; opacity: .16; }

/* Gallery strip across the bottom of the main shot. */
.pm-thumbs {
    position: absolute;
    left: 14px; right: 14px; bottom: 14px;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 2px;
    scrollbar-width: none;
}

.pm-thumbs::-webkit-scrollbar { display: none; }

.pm-thumb {
    flex: 0 0 78px;
    height: 52px;
    padding: 0;
    background: rgba(11, 12, 13, .6);
    border: 1px solid var(--line-2);
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    opacity: .55;
    transition: opacity .18s ease, border-color .18s ease;
}

.pm-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pm-thumb:hover { opacity: 1; }
.pm-thumb.is-on { opacity: 1; border-color: var(--primary); }

.pm-buy { padding: 34px 36px 36px; display: flex; flex-direction: column; }

/* ---------- Basket drawer ---------- */

/* Full height, pinned to the right edge. */
#cart-drawer { padding: 0; }

.cart-panel {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(430px, 100%);
    display: flex;
    flex-direction: column;
    background: var(--bg-2);
    border-left: 1px solid var(--line-2);
    box-shadow: -30px 0 80px rgba(0, 0, 0, .6);
    animation: cart-in .3s cubic-bezier(.22, .61, .36, 1) both;
}

@keyframes cart-in {
    from { transform: translateX(100%); }
    to   { transform: none; }
}

.cart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 22px 22px 20px;
    border-bottom: 1px solid var(--line);
}

.cart-head .pm-x { flex: none; }

/* Items and suggestions share one scroll area, so the footer stays put. */
.cart-scroll { flex: 1; overflow-y: auto; min-height: 0; }

.cart-list {
    list-style: none;
    margin: 0;
    padding: 8px 22px;
}

/* ---------- Cross-sell rail ---------- */

/* Only a spine shows until the rail is asked for, and the panel widens to
   make room rather than squeezing the card, so nothing below it reflows. */
.pm-panel {
    flex-direction: row;
    transition: max-width .42s cubic-bezier(.22, .61, .36, 1);
}

.pm-panel.rail-open { max-width: 1380px; }

.pm-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Keeps the card above the rail while it emerges. */
    position: relative;
    z-index: 1;
    background: var(--bg-2);
}

.pm-rail {
    flex: none;
    display: flex;
    align-items: stretch;
    background: var(--bg);
    border-left: 1px solid var(--line);
    overflow: hidden;
}

/* Parked at zero width behind the product card, then floats out. */
.pm-rail-inner {
    flex: 0 0 0px;
    min-width: 0;
    display: grid;
    grid-template-columns: 238px;
    align-content: start;
    gap: 22px;
    padding: 24px 0;
    overflow: hidden;
    opacity: 0;
    transform: translateX(-26px);
    transition:
        flex-basis .42s cubic-bezier(.22, .61, .36, 1),
        padding .42s cubic-bezier(.22, .61, .36, 1),
        transform .42s cubic-bezier(.22, .61, .36, 1),
        opacity .3s ease;
}

.pm-panel.rail-open .pm-rail-inner {
    flex-basis: 276px;
    padding: 24px 19px;
    overflow-y: auto;
    opacity: 1;
    transform: none;
}

/* Second card trails the first so they drift out rather than snap. */
.pm-rail-inner .pm-rel-block {
    opacity: 0;
    transform: translateX(-18px);
    transition: opacity .34s ease, transform .44s cubic-bezier(.22, .61, .36, 1);
}

.pm-panel.rail-open .pm-rail-inner .pm-rel-block { opacity: 1; transform: none; }
.pm-panel.rail-open .pm-rail-inner .pm-rel-block:nth-child(1) { transition-delay: .08s; }
.pm-panel.rail-open .pm-rail-inner .pm-rel-block:nth-child(2) { transition-delay: .16s; }

.pm-rel-block {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
    overflow: hidden;
}

.pm-rel-block summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 15px;
    cursor: pointer;
    list-style: none;
    font-family: var(--display);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
    transition: color .16s ease;
}

.pm-rel-block summary::-webkit-details-marker { display: none; }
.pm-rel-block summary:hover { color: var(--text); }

/* Chevron that flips when the card is open. */
.pm-rel-block summary i {
    flex: none;
    width: 7px; height: 7px;
    border-right: 1px solid var(--primary);
    border-bottom: 1px solid var(--primary);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .2s ease;
}

.pm-rel-block[open] summary i { transform: rotate(-135deg) translate(-2px, -2px); }
.pm-rel-block[open] summary { border-bottom: 1px solid var(--line); }

.pm-rel-row { display: grid; gap: 10px; padding: 12px; }

.pm-rel {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color .2s ease;
}

.pm-rel:hover { border-color: var(--line-3); }

.pm-rel-open {
    display: block;
    width: 100%;
    padding: 0 0 12px;
    background: transparent;
    border: 0;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.pm-rel-media {
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 9;
    background: radial-gradient(circle at 50% 40%, #23272C, #101215 74%);
    overflow: hidden;
}

.pm-rel-media img { width: 100%; height: 100%; object-fit: cover; }
.pm-rel-media img.mark { width: 28px; height: auto; opacity: .2; }

.pm-rel-name {
    display: block;
    padding: 12px 14px 3px;
    font-family: var(--display);
    font-size: 13.5px;
    font-weight: 700;
    text-transform: uppercase;
}

.pm-rel-sub {
    display: block;
    padding: 0 14px;
    font-family: var(--display);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--faint);
}

.pm-rel-foot {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px 14px;
    border-top: 1px solid var(--line);
}

.pm-rel-price {
    font-family: var(--display);
    font-size: 14px;
    font-weight: 700;
    color: var(--primary);
}

/* No room beside the card, so the buttons pin to the top of the panel and
   the rail unfolds underneath instead of out to the side. */
@media (max-width: 980px) {
    .pm-panel { flex-direction: column; overflow-y: auto; }
    .pm-main { overflow: visible; }

    .pm-ctl {
        order: -1;
        position: sticky;
        top: 0;
        width: auto;
        grid-auto-flow: column;
        justify-content: end;
        padding: 12px 14px;
        background: var(--bg-2);
        border-bottom: 1px solid var(--line);
    }

    .pm-ctl .pm-x { order: 2; }

    .pm-rail-btn i { transform: rotate(-135deg); }
    .pm-panel.rail-open .pm-rail-btn i { transform: rotate(45deg); }

    .pm-rail { border-left: 0; border-top: 1px solid var(--line); }

    .pm-rail-inner {
        grid-template-columns: 1fr;
        padding: 0 20px;
        transform: translateY(-14px);
    }

    .pm-panel.rail-open .pm-rail-inner {
        flex-basis: auto;
        padding: 0 20px 24px;
    }

    .pm-rail-inner .pm-rel-block { transform: translateY(-12px); }
    .pm-rel-row { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .pm-rel-row { grid-template-columns: 1fr; }
}

/* ---------- Basket suggestions ---------- */

.cart-suggest {
    padding: 20px 22px 22px;
    border-top: 1px solid var(--line);
    background: var(--bg);
}

.cart-suggest h5 {
    font-family: var(--display);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 16px;
}

.cart-sug {
    display: grid;
    grid-template-columns: 52px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 10px 0;
}

.cart-sug + .cart-sug { border-top: 1px solid var(--line); }

.cart-sug .cart-thumb { width: 52px; height: 38px; }
.cart-sug .cart-info h4 { font-size: 13.5px; }

.cart-sug .cart-info span {
    font-family: var(--display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--primary);
}

.cart-add {
    padding: 8px 14px;
    background: transparent;
    border: 1px solid var(--line-2);
    border-radius: var(--radius);
    font-family: var(--display);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    cursor: pointer;
    transition: color .16s ease, border-color .16s ease;
}

.cart-add:hover { color: var(--primary); border-color: var(--primary); }

.cart-row {
    display: grid;
    grid-template-columns: 62px 1fr auto auto;
    gap: 14px;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
}

.cart-thumb {
    width: 62px; height: 44px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface);
    display: grid;
    place-items: center;
}

.cart-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-thumb img.mark { width: 20px; height: auto; opacity: .3; }

.cart-info h4 { font-size: 14px; margin: 0 0 4px; }

.cart-info span {
    font-family: var(--display);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--faint);
}

.cart-price {
    font-family: var(--display);
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
}

.cart-del {
    width: 26px; height: 26px;
    display: grid;
    place-items: center;
    background: transparent;
    border: 0;
    color: var(--faint);
    font-size: 11px;
    cursor: pointer;
    transition: color .16s ease;
}

.cart-del:hover { color: var(--primary); }

.cart-foot {
    padding: 22px;
    border-top: 1px solid var(--line);
    background: var(--bg);
}

.cart-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 18px;
}

.cart-total span {
    font-family: var(--display);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
}

.cart-total b { font-family: var(--display); font-size: 28px; font-weight: 700; letter-spacing: -0.02em; }

.cart-note { margin: 14px 0 0; font-size: 12px; color: var(--faint); line-height: 1.6; }

.cart-clear {
    display: block;
    width: 100%;
    margin-top: 14px;
    padding: 10px;
    background: transparent;
    border: 0;
    font-family: var(--display);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--faint);
    cursor: pointer;
    transition: color .16s ease;
}

.cart-clear:hover { color: var(--text); }

.cart-empty {
    flex: 1;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 18px;
    padding: 40px;
    text-align: center;
}

.cart-empty p { margin: 0; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
    .cart-panel { animation: none; }
}

.pm-tags {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 20px;
}

.pm-buy h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-bottom: 10px; }

.pm-tagline {
    font-family: var(--display);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--primary);
    margin: 0 0 26px;
}

.pm-price {
    margin-top: auto;
    padding-top: 24px;
    border-top: 1px solid var(--line);
    margin-bottom: 18px;
}

.pm-price span {
    display: block;
    font-family: var(--display);
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
}

.pm-price i {
    display: block;
    margin-top: 7px;
    font-style: normal;
    font-family: var(--display);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--faint);
}

.pm-note { margin: 14px 0 0; font-size: 12.5px; color: var(--faint); }

/* Fills the space under the buy button. Spec-sheet rows rather than a
   paragraph - it's meant to be scanned, not read. */
.pm-req {
    margin: auto 0 0;
    padding-top: 22px;
    display: grid;
    gap: 0;
}

.pm-req > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
    padding: 11px 0;
    border-top: 1px solid var(--line);
}

.pm-req dt {
    flex: none;
    font-family: var(--display);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--faint);
}

.pm-req dd {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: right;
    font-family: var(--display);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-2);
}

/* Dependencies are always free - worth saying every time it comes up. */
.pm-free {
    flex: none;
    padding: 3px 7px;
    border-radius: var(--radius);
    background: var(--primary);
    color: #0B0C0D;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* ---------- Tabbed detail ---------- */

.pm-tabbar {
    display: flex;
    gap: 0;
    padding: 0 36px;
    border-bottom: 1px solid var(--line);
    background: var(--bg);
    overflow-x: auto;
    scrollbar-width: none;
}

.pm-tabbar::-webkit-scrollbar { display: none; }

.pm-tab {
    padding: 16px 20px;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    font-family: var(--display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--faint);
    white-space: nowrap;
    cursor: pointer;
    transition: color .16s ease, border-color .16s ease;
}

.pm-tab:hover { color: var(--text-2); }
.pm-tab.is-on { color: var(--text); border-bottom-color: var(--primary); }

.pm-pane { display: none; }
.pm-pane.is-on { display: block; }

/* Long-form copy on the left, quick facts pinned on the right. */
.pm-overview {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: start;
}

.pm-prose p {
    margin: 0 0 18px;
    color: var(--muted);
    font-size: 15.5px;
    line-height: 1.75;
    max-width: 68ch;
}

.pm-prose p:last-child { margin-bottom: 0; }

/* First paragraph reads as the lead. */
.pm-prose .pm-lead {
    color: var(--text-2);
    font-size: 17.5px;
    line-height: 1.62;
    margin-bottom: 24px;
}

.pm-lead { margin: 0 0 24px; color: var(--text-2); font-size: 16px; max-width: 70ch; }

@media (max-width: 900px) {
    .pm-overview { grid-template-columns: 1fr; gap: 28px; }
}

/* Feature groups, two across. */
.pm-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 44px;
}

.pm-feature h5 {
    font-family: var(--display);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--primary);
    margin: 0 0 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
}

.pm-list-2 { grid-template-columns: repeat(2, 1fr); gap: 10px 34px; }

.pm-specs { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }

/* Changelog */
.pm-releases { display: grid; gap: 26px; }

.pm-release-head {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
}

.pm-release-head b {
    font-family: var(--display);
    font-size: 15px;
    font-weight: 700;
    color: var(--primary);
}

.pm-release-head span {
    font-family: var(--display);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--faint);
}

.pm-body { padding: 32px 36px 40px; }

@media (max-width: 760px) {
    .pm-tabbar { padding: 0 20px; }
    .pm-features, .pm-list-2 { grid-template-columns: 1fr; }
}

.pm-block h4 {
    font-family: var(--display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 16px;
}

.pm-block p { margin: 0; color: var(--text-2); font-size: 15px; }

.pm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

.pm-list li {
    position: relative;
    padding-left: 20px;
    font-size: 14.5px;
    color: var(--text-2);
}

.pm-list li::before {
    content: '';
    position: absolute;
    left: 0; top: 9px;
    width: 7px; height: 1px;
    background: var(--primary);
}

.pm-block .meta { border-top: 0; padding-top: 0; }
.pm-block .meta dt { flex-basis: 96px; }

@media (max-width: 900px) {
    .pm { padding: 0; }
    .pm-panel { border-radius: 0; border: 0; min-height: 100%; }
    .pm-top { grid-template-columns: 1fr; }
    .pm-media { border-right: 0; border-bottom: 1px solid var(--line); min-height: 0; aspect-ratio: 16/9; }
    .pm-body { padding: 26px 20px 34px; }
    .pm-buy { padding: 26px 24px 28px; }
}

@media (prefers-reduced-motion: reduce) {
    .pm-panel, .pm-backdrop { animation: none; }
    .pm-panel, .pm-rail-inner, .pm-rail-inner .pm-rel-block, .pm-rail-btn i { transition: none; }
    .pm-rail-inner .pm-rel-block { transform: none; }
}

/* ---------- Ticker ---------- */

/* Runs along the bottom edge of the hero. */
.ticker {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 4;
    overflow: hidden;
    padding: 15px 0;
    background: rgba(9, 10, 11, .5);
    border-top: 1px solid rgba(255, 255, 255, .08);
    /* fade the ends so text doesn't hard-clip at the edges */
    mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.ticker-track {
    display: flex;
    width: max-content;
    will-change: transform;
    animation: tick 46s linear infinite;
}

.ticker:hover .ticker-track { animation-play-state: paused; }

.tick {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    font-family: var(--display);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text);
}

.tick i {
    font-style: normal;
    font-size: 9px;
    color: var(--primary);
    margin: 0 30px;
}

/* Repeated 4x in the markup, so shifting 25% moves it exactly one set
   and loops seamlessly. Keep this in step with TICKER_COPIES. */
@keyframes tick {
    from { transform: translateX(0); }
    to   { transform: translateX(-25%); }
}

@media (prefers-reduced-motion: reduce) {
    .ticker-track { animation: none; }
    .ticker { overflow-x: auto; }
}

/* ---------- Footer ---------- */

.site-footer { border-top: 1px solid var(--line); background: var(--bg-2); }

.footer-top {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 48px;
    padding: 72px 0 56px;
}

.footer-brand .wordmark { margin-bottom: 22px; }

.footer-line {
    font-family: var(--display);
    font-size: clamp(1.3rem, 2.2vw, 1.9rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    margin: 0 0 26px;
}

.footer-col { display: flex; flex-direction: column; gap: 13px; }
.footer-col .label { margin-bottom: 5px; }

.footer-col a {
    font-size: 14.5px;
    color: var(--muted);
    transition: color .18s ease;
}

.footer-col a:hover { color: var(--primary); }
.footer-stamp p { margin: 0 0 16px; color: var(--muted); font-size: 14.5px; }

.footer-legal {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
    border-top: 1px solid var(--line);
    padding: 22px 0 30px;
    font-size: 13px;
    color: var(--faint);
}

.footer-legal a { transition: color .18s ease; }
.footer-legal a:hover { color: var(--muted); }
.footer-legal .footer-sep { flex: 1; }
.footer-legal .footer-note { flex-basis: 100%; color: #4A4E52; font-size: 12px; }

@media (max-width: 900px) {
    .footer-top { grid-template-columns: 1fr 1fr; gap: 36px; padding: 52px 0 40px; }
    .footer-brand { grid-column: span 2; }
    .footer-legal .footer-sep { display: none; }
}

@media (max-width: 560px) {
    .footer-top { grid-template-columns: 1fr; }
    .footer-brand { grid-column: auto; }
}

.footer-main {
    display: flex;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
    padding: 26px 0;
}

.footer-nav {
    display: flex;
    gap: 30px;
    margin: 0 auto;
    font-family: var(--display);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
}

.footer-nav a:hover { color: var(--primary); }

.socials { display: flex; gap: 14px; }

.socials a {
    width: 34px; height: 34px;
    display: grid; place-items: center;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--muted);
    transition: all .18s ease;
}

.socials a:hover { color: var(--primary); border-color: var(--primary); }
.socials svg { width: 15px; height: 15px; fill: currentColor; }

.footer-legal {
    border-top: 1px solid var(--line);
    padding: 18px 0 26px;
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
    align-items: center;
    font-size: 12px;
    color: var(--faint);
}

.footer-legal a:hover { color: var(--muted); }
.footer-legal .spacer { margin-left: auto; }

/* ---------- Responsive ---------- */

@media (max-width: 1200px) {
}

@media (max-width: 900px) {
    .wrap { padding: 0 22px; }
    .stats-quote { margin-left: 0; }
    .stat-divider { display: none; }
    .bundle { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
}

@media (max-width: 760px) {
    .hero { min-height: auto; }
    .hero .wrap { padding-top: 54px; padding-bottom: 48px; }
    .section { padding: 60px 0; }

    .nav {
        position: absolute;
        top: 74px; left: 0; right: 0;
        flex-direction: column;
        gap: 0;
        background: var(--bg-2);
        border-bottom: 1px solid var(--line);
        padding: 4px 22px 14px;
        margin: 0;
    }
    .nav:not(.is-open) { display: none; }
    .nav a { padding: 14px 0; border-bottom: 1px solid var(--line); }
    .nav-toggle { display: block; margin-left: auto; }

    /* Inside the burger menu the panel sits in the flow, full width. */
    .nav-item { display: flex; flex-wrap: wrap; justify-content: space-between; }
    .nav-item > a { flex: 1; }
    .nav-caret { width: 40px; height: 46px; }

    .nav-menu {
        position: static;
        width: 100%;
        transform: none;
        margin: 0 0 12px;
        box-shadow: none;
        animation: none;
    }

    .nav-menu::before { display: none; }
    .nav-menu-all { border-bottom: 0; }

    /* Keep Login reachable on mobile, drop it to the icon and hide the CTA. */
    .site-header .wrap { padding: 0 22px; gap: 16px; }
    .header-actions .btn { display: none; }
    .btn-login { padding: 10px 12px; }
    .btn-login span { display: none; }
    .header-actions { order: 2; margin-left: auto; }
    .nav-toggle { order: 3; margin-left: 0; }
    .footer-nav { margin: 0; }
}

@media (max-width: 460px) {
}

/* ---------- Progress bar ----------
   One component everywhere: product cards, the nav menu, the roadmap
   and the overlay's Progress tab. Sizes are modifiers, not separate components. */

.pbar {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.pbar-track {
    position: relative;
    flex: 1;
    height: 4px;
    background: var(--line);
    border-radius: 99px;
    overflow: hidden;
}

.pbar-fill {
    position: absolute;
    inset: 0 auto 0 0;
    background: var(--primary);
    border-radius: inherit;
    box-shadow: 0 0 10px rgba(183, 255, 60, .45);
    transition: width .6s ease;
}

.pbar-num {
    flex: none;
    min-width: 3ch;
    font-family: var(--display);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-align: right;
    color: var(--primary);
}

/* Nothing posted yet - say so quietly rather than show an empty 0%. */
.pbar.is-unset .pbar-num {
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--faint);
}

.pbar.is-sm .pbar-track { height: 3px; }
.pbar.is-sm .pbar-num { font-size: 10px; }
.nmc-text .pbar { margin-top: 3px; }
.rm-card .pbar { margin-top: 6px; }

.pbar.is-lg .pbar-track { height: 6px; }
.pbar.is-lg .pbar-num { font-size: 13px; }

.pbar.is-xl { gap: 16px; }
.pbar.is-xl .pbar-track { height: 10px; }
.pbar.is-xl .pbar-num { font-size: clamp(1.3rem, 2.6vw, 1.7rem); letter-spacing: 0; }
.pbar.is-xl.is-unset .pbar-num { font-size: 14px; }

/* Under the product card, so a script in build always shows where it is. */
.pcard-progress {
    width: 100%;
    background: transparent;
    border: 0;
    text-align: left;
    cursor: pointer;
    color: inherit;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 18px;
    border-top: 1px solid var(--line);
    transition: background .18s ease;
}

.pcard-progress:hover { background: var(--surface-2); }

.pcard-progress-go {
    flex: none;
    font-family: var(--display);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    transition: color .18s ease;
}

.pcard-progress:hover .pcard-progress-go { color: var(--primary); }

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    .pbar-fill, .pcard-progress { transition: none; }
    .pg-live i { animation: none; }
}

@media (max-width: 720px) {
    .pg-cols { grid-template-columns: 1fr; }
}

/* ---------- Roadmap card extras ---------- */

/* Exploring: shown, but nothing to open yet. */
.rm-card.is-flat { cursor: default; }
.rm-card.is-flat:hover { transform: none; border-color: var(--line); background: var(--surface); }

/* ---------- Progress tab (product overlay) ---------- */

.pg { display: grid; gap: 30px; }

.pg-head { display: grid; gap: 10px; }

.pg-sum {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 20px;
    margin: 0;
    font-size: 12.5px;
    color: var(--muted);
}

.pg-live {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--display);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.pg-live i {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--primary);
    animation: pg-pulse 2s ease-in-out infinite;
}

@keyframes pg-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(183, 255, 60, .55); }
    50%      { box-shadow: 0 0 0 6px rgba(183, 255, 60, 0); }
}

.pg-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 34px;
}

.pg h5 { margin: 0 0 12px; }

.pg-ms, .pg-log { list-style: none; margin: 0; padding: 0; }

.pg-ms li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--line);
    color: var(--text-2);
    line-height: 1.5;
}

.pg-ms li:last-child { border-bottom: 0; }

.pg-tick {
    position: relative;
    flex: none;
    width: 16px; height: 16px;
    margin-top: 2px;
    border: 1px solid var(--line-3);
    border-radius: var(--radius);
}

.pg-ms li.is-done { color: var(--muted); }
.pg-ms li.is-done .pg-tick { background: var(--primary); border-color: var(--primary); }

/* Drawn rather than a glyph so it sits dead centre. */
.pg-ms li.is-done .pg-tick::after {
    content: '';
    position: absolute;
    left: 5px; top: 1px;
    width: 4px; height: 9px;
    border: solid #0B0C0D;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.pg-log li {
    position: relative;
    padding: 0 0 18px 20px;
    border-left: 1px solid var(--line-2);
}

.pg-log li:last-child { padding-bottom: 0; }

.pg-log li::before {
    content: '';
    position: absolute;
    left: -4px; top: 5px;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--line-3);
}

.pg-log li:first-child::before { background: var(--primary); }

.pg-log time {
    display: block;
    margin-bottom: 3px;
    font-family: var(--display);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--primary);
}

.pg-log p { margin: 0; color: var(--text-2); line-height: 1.6; }

.pg-empty { margin: 0; color: var(--faint); font-size: 13.5px; }

/* ---------- Home: before anything has shipped ---------- */

.wip {
    display: grid;
    justify-items: center;
    gap: 22px;
    max-width: 820px;
    margin: 0 auto;
    padding: 24px 0;
    text-align: center;
}

.wip h2 {
    margin: 0;
    font-size: clamp(2rem, 4.6vw, 3.4rem);
    line-height: 1.08;
}

.wip p {
    margin: 0;
    max-width: 60ch;
    color: var(--muted);
    line-height: 1.75;
}

.wip-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 8px;
}

.wip-count {
    font-family: var(--display);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--faint);
}
/* ---------- Account: linked accounts + purchases ---------- */

.acct-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin: 22px 0 0;
    font-size: 12.5px;
}

.acct-links span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: 1px dashed var(--line-2);
    border-radius: var(--radius);
    color: var(--faint);
}

.acct-links span::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--line-3);
}

.acct-links span.is-on { border-style: solid; color: var(--text-2); }
.acct-links span.is-on::before { background: var(--primary); }
.acct-links a { color: var(--primary); font-size: 12px; }

.acct-buys { margin: 46px 0; }

.acct-empty {
    display: grid;
    justify-items: start;
    gap: 10px;
    padding: 30px 32px;
    background: var(--surface);
    border: 1px solid var(--line-2);
    border-radius: var(--radius-lg);
}

.acct-empty h3 { margin: 0; font-size: 1.15rem; }
.acct-empty p { margin: 0 0 6px; max-width: 60ch; color: var(--muted); line-height: 1.7; }

.buys {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--line-2);
    border-radius: var(--radius-lg);
    background: var(--surface);
}

.buy {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 8px 26px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--line);
}

.buy:last-child { border-bottom: 0; }

.buy-main { display: grid; gap: 4px; min-width: 0; }
.buy-main b { font-family: var(--display); font-size: 15px; color: var(--text); }
.buy-main span { font-size: 12px; color: var(--faint); }
.buy-main code { font-size: 11.5px; color: var(--muted); }

.buy-amt { font-family: var(--display); font-weight: 600; color: var(--text-2); white-space: nowrap; }

.buy.is-off .buy-main b,
.buy.is-off .buy-amt { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--faint); }

@media (max-width: 620px) {
    .buy { grid-template-columns: 1fr auto; }
    .buy .status { grid-column: 1 / -1; }
    .acct-empty { padding: 24px 20px; }
}
/* ---------- Account: lifetime spend + docs ---------- */

.loyal {
    padding: 26px 28px;
    background: var(--surface);
    border: 1px solid var(--line-2);
    border-radius: var(--radius-lg);
}

.loyal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.loyal-head b { font-family: var(--display); font-size: 2rem; color: var(--text); }

.loyal-badge {
    padding: 6px 11px;
    border-radius: var(--radius);
    background: var(--primary);
    color: #0B0C0D;
    font-family: var(--display);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.loyal-badge.is-off { background: transparent; border: 1px solid var(--line-2); color: var(--muted); }

.loyal-track {
    position: relative;
    height: 6px;
    margin: 24px 0 16px;
    background: var(--line);
    border-radius: 99px;
}

.loyal-fill {
    position: absolute;
    inset: 0 auto 0 0;
    background: var(--primary);
    border-radius: inherit;
    box-shadow: 0 0 10px rgba(183, 255, 60, .45);
}

.loyal-mark {
    position: absolute;
    top: 50%;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--surface);
    border: 2px solid var(--line-3);
    transform: translate(-50%, -50%);
}

.loyal-mark.is-hit { border-color: var(--primary); background: var(--primary); }

.loyal-tiers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
}

.loyal-tiers li {
    display: grid;
    gap: 2px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.loyal-tiers b { font-family: var(--display); font-size: 14px; color: var(--muted); }
.loyal-tiers span { font-size: 11.5px; color: var(--faint); }
.loyal-tiers li.is-hit { border-color: var(--primary); }
.loyal-tiers li.is-hit b { color: var(--primary); }

.loyal-next { margin: 0; font-size: 13px; line-height: 1.65; color: var(--muted); }
.loyal-next b { color: var(--text); }

.cart-loyal {
    margin: 0 0 12px;
    padding: 10px 12px;
    border: 1px dashed var(--line-2);
    border-radius: var(--radius);
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--muted);
}

.cart-loyal.is-on { border-style: solid; border-color: var(--primary); color: var(--text-2); }
.cart-loyal b { color: var(--primary); }

@media (max-width: 820px) {
    .acct-top { grid-template-columns: 1fr; }
}
/* Identity left, discount right. */
.acct-top {
    display: grid;
    grid-template-columns: 1fr minmax(0, 440px);
    align-items: start;
    gap: 34px;
    padding-bottom: 34px;
    border-bottom: 1px solid var(--line);
}

.acct-top .acct-id { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
.acct-top .loyal-head b { font-size: 1.7rem; }

/* ---------- Account: free scripts ---------- */

.acct-free { margin: 0 0 46px; }

.frees {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--line-2);
    border-radius: var(--radius-lg);
    background: var(--surface);
}

.free-row {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    align-items: center;
    gap: 18px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--line);
}

.free-row:last-child { border-bottom: 0; }
.free-row img { width: 44px; height: 44px; object-fit: contain; }

.free-row-main { display: grid; gap: 5px; min-width: 0; }
.free-row-main b { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-size: 15px; color: var(--text); }
.free-row-main span { font-size: 13px; line-height: 1.55; color: var(--muted); }

.free-row-go { display: flex; gap: 10px; }

@media (max-width: 620px) {
    .free-row { grid-template-columns: 36px 1fr; }
    .free-row-go { grid-column: 1 / -1; }
}