/* /Components/Account/AccountConnections.razor.rz.scp.css */
.account-connections[b-uga0vydsn9] { max-width: 760px; margin-top: 2rem; color: var(--ht-ink); }
.account-connections h2[b-uga0vydsn9] { font-size: 1.2rem; font-weight: 550; }
.account-connections > p[b-uga0vydsn9] { color: var(--ht-ink-muted); font-size: .85rem; line-height: 1.65; max-width: 70ch; }
.account-connection[b-uga0vydsn9] { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.2rem 0; border-bottom: 1px solid var(--ht-edge-strong); }
.account-connection > div[b-uga0vydsn9] { min-width: 0; overflow-wrap: anywhere; }
.account-connection h3[b-uga0vydsn9] { font-size: 1rem; font-weight: 550; margin: 0 0 .4rem; }
.account-connection p[b-uga0vydsn9] { margin: 0; font-size: .85rem; color: var(--ht-ink-soft); }
.account-connection span[b-uga0vydsn9] { font-size: .75rem; color: var(--ht-ink-muted); }
.account-connection button[b-uga0vydsn9] { min-height: 44px; padding: .7rem 1rem; color: var(--ht-ink-soft); background: transparent; border: 1px solid var(--ht-edge-strong); border-radius: 5px; font: inherit; font-size: .85rem; cursor: pointer; white-space: nowrap; }
.account-connection button:hover[b-uga0vydsn9] { border-color: var(--ht-accent); color: var(--ht-accent); }
.account-connection button:focus-visible[b-uga0vydsn9] { outline: 2px solid var(--ht-accent); outline-offset: 4px; }
.account-connections__note[b-uga0vydsn9] { padding: 1rem; background: var(--ht-accent-soft); border-left: 2px solid var(--ht-accent); }
@media(max-width: 420px) { .account-connection[b-uga0vydsn9] { align-items: flex-start; flex-wrap: wrap; } }
/* /Components/Account/SignInExperience.razor.rz.scp.css */
.signin[b-r6jaw9svbd] {
    position: relative;
    z-index: var(--hts-z-content);
    display: grid;
    /* One column, centred. The aside that used to sit here drew a diagram of an
       authentication handshake that does not take place. */
    grid-template-columns: minmax(0, 30rem);
    justify-content: center;
    /* Stretch, not centre: the instrument beside the form should share its top and bottom
       edge, so the two columns read as one panel rather than two floating boxes. */
    align-items: stretch;
    gap: clamp(2.5rem, 5vw, 4.5rem);
}

.signin-primary[b-r6jaw9svbd] {
    display: flex;
    flex-direction: column;
    max-width: 34rem;
}

.signin-aside[b-r6jaw9svbd] {
    display: grid;
}

/* ── Type ──────────────────────────────────────────────────────────────── */

.signin-kicker[b-r6jaw9svbd] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: var(--hts-space-5);
    color: var(--ht-ink-muted);
    font-family: var(--hts-font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.2em;
}

.kicker-rule[b-r6jaw9svbd] {
    width: 2.5rem;
    height: 1px;
    flex: none;
    background: var(--ht-edge-strong);
}

/* Same construction as the homepage hero: stacked lines, second one carrying the brand
   purple, so arriving here reads as the same product rather than a different template. */
.signin-title[b-r6jaw9svbd] {
    font-size: clamp(2rem, 1.25rem + 2.4vw, 2.95rem);
    font-weight: 460;
    line-height: 1.02;
    letter-spacing: -0.032em;
}

.title-line[b-r6jaw9svbd] {
    display: block;
}

/* Emphasis by weight, not by colour. A purple word in a headline is decoration; it
   also spends the one hue that means "running" everywhere else on the site. */
.title-line--accent[b-r6jaw9svbd] {
    font-weight: 800;
}

.signin-lede[b-r6jaw9svbd] {
    max-width: 27rem;
    margin-top: var(--hts-space-4);
    color: var(--hts-ink-soft);
    font-size: var(--hts-text-base);
    line-height: var(--hts-leading-relaxed);
}

/* ── Card ──────────────────────────────────────────────────────────────── */

.signin-card[b-r6jaw9svbd] {
    position: relative;
    margin-top: var(--hts-space-6);
    padding: var(--hts-space-5);
    border: 1px solid var(--hts-border-strong);
    border-radius: var(--hts-radius-lg);
    background: var(--hts-surface);
    box-shadow: var(--hts-rim), var(--hts-shadow-md);
    overflow: hidden;
}

/* A lit top edge instead of a frosted panel: the surface stays opaque and the light sits on
   the rim, which is how every other panel in the system is built. */
.card-rim[b-r6jaw9svbd] {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 1px;
    background: var(--hts-gradient-hairline);
    pointer-events: none;
}

.card-flag[b-r6jaw9svbd] {
    display: flex;
    align-items: flex-start;
    gap: var(--hts-space-3);
    margin-bottom: var(--hts-space-5);
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--hts-border-blue);
    border-radius: var(--hts-radius-md);
    background: var(--hts-state-online-bg);
    color: var(--ht-ink-soft);
    font-size: var(--hts-text-xs);
    line-height: 1.5;
}

.flag-badge[b-r6jaw9svbd] {
    flex: none;
    margin-top: 0.05rem;
    padding: 0.12rem 0.45rem;
    border: 1px solid var(--hts-border-blue);
    border-radius: var(--ht-radius-xs);
    color: var(--hts-blue-300);
    font-family: var(--hts-font-mono);
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.18em;
}

.signin-form[b-r6jaw9svbd] {
    display: grid;
    gap: var(--hts-space-4);
}

/* ── Fields ────────────────────────────────────────────────────────────── */

.field[b-r6jaw9svbd] {
    display: grid;
    gap: 0.5rem;
}

.field-label[b-r6jaw9svbd] {
    color: var(--hts-ink-soft);
    font-family: var(--hts-font-mono);
    font-size: 0.5625rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.field-shell[b-r6jaw9svbd] {
    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid var(--hts-border-strong);
    border-radius: var(--hts-radius-md);
    background: var(--hts-surface-inset);
    box-shadow: var(--hts-rim);
    transition:
        border-color var(--hts-duration-fast) var(--hts-ease),
        box-shadow var(--hts-duration-base) var(--hts-ease);
}

/* The lit border is on the shell, not the input, so the reveal button lights with it. */
.field-shell:focus-within[b-r6jaw9svbd] {
    border-color: var(--hts-purple-400);
    box-shadow: var(--hts-rim), var(--ht-shadow-3);
}

.field.has-error .field-shell[b-r6jaw9svbd] {
    border-color: var(--hts-purple-500);
}

.field.has-error .field-shell:focus-within[b-r6jaw9svbd] {
    box-shadow: var(--hts-rim), 0 0 0 3px rgba(155, 77, 251, 0.28);
}

.field-input[b-r6jaw9svbd] {
    flex: 1;
    min-width: 0;
    padding: 0.72rem 0.9rem;
    border: 0;
    background: transparent;
    color: var(--hts-ink);
    font-size: var(--hts-text-md);
    outline: none;
}

.field-input[b-r6jaw9svbd]::placeholder {
    color: var(--hts-ink-muted);
    opacity: 0.75;
}

.field-input:disabled[b-r6jaw9svbd] {
    opacity: 0.55;
}

/* The focus ring lives on the shell; a second ring on the input inside it would double up. */
.field-input:focus-visible[b-r6jaw9svbd] {
    outline: none;
}

.field-reveal[b-r6jaw9svbd] {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    flex: none;
    margin-right: 0.2rem;
    border-radius: var(--hts-radius-sm);
    color: var(--hts-ink-muted);
    transition:
        color var(--hts-duration-fast) var(--hts-ease),
        background-color var(--hts-duration-fast) var(--hts-ease);
}

.field-reveal:hover[b-r6jaw9svbd] {
    background: var(--hts-tint-hover);
    color: var(--hts-ink);
}

.field-reveal:disabled[b-r6jaw9svbd] {
    opacity: 0.4;
    cursor: not-allowed;
}

.field-reveal.is-shown[b-r6jaw9svbd] {
    color: var(--hts-purple-300);
}

.field-message[b-r6jaw9svbd] {
    color: var(--hts-purple-300);
    font-size: var(--hts-text-sm);
}

/* ── Row: remember me + recovery ───────────────────────────────────────── */

.field-row[b-r6jaw9svbd] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--hts-space-3);
}

.checkbox[b-r6jaw9svbd] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    color: var(--hts-ink-soft);
    font-size: var(--hts-text-base);
}

/* The real control is still there and still focusable - it is just sized to the box that is
   drawn over it, so the focus ring lands in the right place. */
.checkbox-input[b-r6jaw9svbd] {
    position: absolute;
    width: 1.15rem;
    height: 1.15rem;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.checkbox-box[b-r6jaw9svbd] {
    display: grid;
    place-items: center;
    width: 1.15rem;
    height: 1.15rem;
    flex: none;
    /* A control has to look like one. The panel rim weight is too quiet for something a
       visitor is meant to hit. */
    border: 1px solid var(--hts-rule-strong);
    border-radius: var(--hts-radius-xs);
    background: var(--hts-surface-inset);
    transition:
        border-color var(--hts-duration-fast) var(--hts-ease),
        background-color var(--hts-duration-fast) var(--hts-ease);
}

.checkbox-tick[b-r6jaw9svbd] {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 1px;
    background-image: var(--hts-gradient-brand);
    transform: scale(0);
    transition: transform var(--hts-duration-base) var(--hts-ease-spring);
}

.checkbox-input:checked ~ .checkbox-box[b-r6jaw9svbd] {
    border-color: var(--hts-border-brand);
}

.checkbox-input:checked ~ .checkbox-box .checkbox-tick[b-r6jaw9svbd] {
    transform: scale(1);
}

.checkbox-input:focus-visible ~ .checkbox-box[b-r6jaw9svbd] {
    outline: 2px solid var(--hts-purple-300);
    outline-offset: 3px;
}

.checkbox:hover .checkbox-box[b-r6jaw9svbd] {
    border-color: var(--hts-border-brand);
}

.checkbox-label[b-r6jaw9svbd] {
    user-select: none;
}

/* A button that reads as a link. It is a button because it does not navigate - account
   recovery does not exist yet, and a link to nowhere is worse than an honest message. */
.link-action[b-r6jaw9svbd] {
    padding: 0.2rem 0;
    color: var(--hts-ink-soft);
    font-size: var(--hts-text-base);
    text-decoration: underline;
    text-decoration-color: var(--hts-muted-mark);
    text-underline-offset: 0.25em;
    transition:
        color var(--hts-duration-fast) var(--hts-ease),
        text-decoration-color var(--hts-duration-fast) var(--hts-ease);
}

.link-action:hover[b-r6jaw9svbd] {
    color: var(--hts-ink);
    text-decoration-color: var(--hts-purple-400);
}

.link-action.is-strong[b-r6jaw9svbd] {
    color: var(--hts-purple-300);
    font-weight: 560;
    text-decoration-color: color-mix(in srgb, var(--hts-purple-400) 45%, transparent);
}

.signin-submit[b-r6jaw9svbd] {
    width: 100%;
}

/* ── Notices ───────────────────────────────────────────────────────────── */

/* The slot keeps its place in the layout whether or not there is a message, so the card does
   not jump when one appears. */
.notice-slot[b-r6jaw9svbd] {
    min-height: 1px;
}

.notice[b-r6jaw9svbd] {
    display: flex;
    align-items: flex-start;
    gap: var(--hts-space-3);
    padding: var(--hts-space-4);
    border: 1px solid var(--hts-border-blue);
    border-radius: var(--hts-radius-md);
    background: var(--hts-state-online-bg);
    color: var(--hts-ink-soft);
    font-size: var(--hts-text-base);
    line-height: var(--hts-leading-normal);
    animation: notice-in-b-r6jaw9svbd var(--hts-duration-base) var(--hts-ease-out) both;
}

@keyframes notice-in-b-r6jaw9svbd {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
}

.notice-mark[b-r6jaw9svbd] {
    width: 0.4rem;
    height: 0.4rem;
    flex: none;
    margin-top: 0.5rem;
    border-radius: 50%;
    background: var(--hts-blue-300);
    box-shadow: var(--hts-rim), var(--ht-ring);
}

.notice--warning[b-r6jaw9svbd] {
    border-color: var(--hts-border-brand);
    background: var(--hts-state-busy-bg);
}

.notice--warning .notice-mark[b-r6jaw9svbd] {
    background: var(--hts-purple-300);
    box-shadow: var(--ht-lamp-data);
}

/* ── Card foot and back link ───────────────────────────────────────────── */

.card-foot[b-r6jaw9svbd] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    margin-top: var(--hts-space-5);
    padding-top: var(--hts-space-4);
    border-top: 1px solid var(--hts-border);
    color: var(--hts-ink-muted);
    font-size: var(--hts-text-base);
}

.signin-back[b-r6jaw9svbd] {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 0.6rem;
    margin-top: var(--hts-space-5);
    color: var(--hts-ink-muted);
    font-family: var(--hts-font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color var(--hts-duration-fast) var(--hts-ease);
}

.signin-back:hover[b-r6jaw9svbd] {
    color: var(--hts-ink);
}

.back-arrow[b-r6jaw9svbd] {
    position: relative;
    width: 1.5rem;
    height: 1px;
    flex: none;
    background: currentColor;
    transition: width var(--hts-duration-base) var(--hts-ease-out);
}

.back-arrow[b-r6jaw9svbd]::before {
    content: "";
    position: absolute;
    top: -3px;
    left: 0;
    width: 7px;
    height: 7px;
    border-bottom: 1px solid currentColor;
    border-left: 1px solid currentColor;
    transform: rotate(45deg);
}

.signin-back:hover .back-arrow[b-r6jaw9svbd] {
    width: 2.1rem;
}

/* ── Responsive ────────────────────────────────────────────────────────── */

@media (max-width: 1080px) {
    .signin[b-r6jaw9svbd] {
        grid-template-columns: minmax(0, 1fr);
        gap: clamp(2.5rem, 7vw, 3.5rem);
    }

    .signin-primary[b-r6jaw9svbd] {
        max-width: 38rem;
        margin-inline: auto;
    }

    .signin-aside[b-r6jaw9svbd] {
        max-width: 38rem;
        margin-inline: auto;
        width: 100%;
    }
}

@media (max-width: 560px) {
    .signin-card[b-r6jaw9svbd] {
        padding: var(--hts-space-5) var(--hts-space-4);
    }

    .field-row[b-r6jaw9svbd] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--hts-space-4);
    }
}
/* /Components/Hardware/ChapterSection.razor.rz.scp.css */
.chapter[b-ivnnn7dkrk] {
    position: relative;
    padding-block: clamp(4rem, 7vw, 7rem);
    border-top: 1px solid var(--hts-border);
}

.chapter-inner[b-ivnnn7dkrk] {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    align-items: center;
    gap: clamp(2.5rem, 6vw, 5.5rem);
}

/* Mirrored chapters swap the columns rather than re-laying the page out, so the eye keeps
   crossing back and forth down the page instead of running in one straight gutter. */
.chapter.is-mirrored .chapter-copy[b-ivnnn7dkrk] {
    order: 2;
}

.chapter.is-mirrored .chapter-visual[b-ivnnn7dkrk] {
    order: 1;
}

/* ── Shared frame ──────────────────────────────────────────────────────── */

.chapter-kicker[b-ivnnn7dkrk] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: var(--hts-space-5);
    color: var(--ht-ink-muted);
    font-family: var(--hts-font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.2em;
}

/* The topic word is the display type. It is the one thing on this page that is definitely
   true, so it carries the size the finished headline will eventually take. */
.chapter-title[b-ivnnn7dkrk] {
    /* Sized to the narrow column this sits in. The longest chapter title is a single
       unbreakable word, so nothing wraps it out of trouble - at the old maximum it ran 121px
       past its own column. */
    font-size: clamp(1.9rem, 1rem + 2.5vw, 3.4rem);
    font-weight: 460;
    line-height: 0.98;
    letter-spacing: -0.035em;
}

.chapter-lede[b-ivnnn7dkrk] {
    max-width: 26rem;
    margin-top: var(--hts-space-5);
}

.chapter-visual[b-ivnnn7dkrk] {
    position: relative;
    min-width: 0;
}

/* ── Shared readout strip under a visual ───────────────────────────────── */

.readout[b-ivnnn7dkrk] {
    display: grid;
    gap: var(--hts-space-5);
    margin-top: var(--hts-space-6);
    padding-top: var(--hts-space-5);
    border-top: 1px solid var(--hts-border);
}

.readout--wide[b-ivnnn7dkrk] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.readout dt[b-ivnnn7dkrk] {
    margin-bottom: 0.4rem;
    color: var(--hts-ink-muted);
    font-family: var(--hts-font-mono);
    font-size: 0.5625rem;
    letter-spacing: 0.2em;
}

/* ══════════════════════════════════════════════════════════════════════════
   COMPUTE - a die plate
   ══════════════════════════════════════════════════════════════════════════ */

.die[b-ivnnn7dkrk] {
    position: relative;
    display: grid;
    place-items: center;
    padding: clamp(1.5rem, 3.4vw, 2.75rem);
    border: 1px solid var(--hts-border-strong);
    border-radius: var(--hts-radius-lg);
    background:
        radial-gradient(90% 80% at 50% 0%, rgba(176, 105, 255, 0.12) 0%, transparent 62%),
        var(--hts-surface);
    box-shadow: var(--hts-rim), var(--hts-shadow-md);
    overflow: hidden;
}

/* Bond wires: four hairlines running out of the package to the board. */
.die-frame[b-ivnnn7dkrk] {
    position: absolute;
    inset: clamp(1.1rem, 2.6vw, 1.9rem);
    border: 1px dashed var(--hts-cell-border);
    border-radius: var(--hts-radius-md);
    pointer-events: none;
}

.die-grid[b-ivnnn7dkrk] {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: clamp(3px, 0.6vw, 6px);
    width: min(100%, 24rem);
    aspect-ratio: 1;
}

.die-cell[b-ivnnn7dkrk] {
    border: 1px solid var(--hts-cell-border);
    border-radius: 2px;
    background: var(--hts-cell-bg);
}

/* Active cores. The stagger comes from nth-child, so it is deterministic and free. */
.die-cell.is-lit[b-ivnnn7dkrk] {
    border-color: var(--hts-blue-500);
    background: rgba(131, 168, 243, 0.42);
    box-shadow: var(--ht-lamp-data);
    animation: die-pulse-b-ivnnn7dkrk 4.4s var(--hts-ease) infinite;
}

.die-cell.is-lit:nth-child(3n)[b-ivnnn7dkrk] {
    animation-delay: -1.4s;
}

.die-cell.is-lit:nth-child(4n)[b-ivnnn7dkrk] {
    animation-delay: -2.7s;
    background: rgba(176, 105, 255, 0.45);
    border-color: var(--hts-purple-500);
    box-shadow: var(--ht-lamp-live);
}

@keyframes die-pulse-b-ivnnn7dkrk {
    0%, 100% {
        opacity: 0.78;
    }

    50% {
        opacity: 1;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   MEMORY - three equal bands
   ══════════════════════════════════════════════════════════════════════════ */

.bands[b-ivnnn7dkrk] {
    display: grid;
    gap: var(--hts-space-3);
}

.band[b-ivnnn7dkrk] {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--hts-space-4);
    padding: var(--hts-space-4) var(--hts-space-5);
    border: 1px solid var(--hts-border);
    border-radius: var(--hts-radius-sm);
    background: var(--hts-surface);
    overflow: hidden;
}

/* The band's role is carried by its fill treatment, not by its width. */
.band-fill[b-ivnnn7dkrk] {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.band--allocated .band-fill[b-ivnnn7dkrk] {
    background: linear-gradient(90deg, rgba(131, 168, 243, 0.22), rgba(131, 168, 243, 0.04));
}

.band--headroom .band-fill[b-ivnnn7dkrk] {
    background-image: repeating-linear-gradient(
        -45deg,
        rgba(131, 168, 243, 0.14) 0 2px,
        transparent 2px 8px);
}

.band--reserved .band-fill[b-ivnnn7dkrk] {
    background: transparent;
    border-left: 2px solid var(--hts-border-brand);
}

.band-label[b-ivnnn7dkrk],
.band[b-ivnnn7dkrk]  .copy-slot {
    position: relative;
    z-index: 1;
}

.band-label[b-ivnnn7dkrk] {
    color: var(--hts-ink);
    font-family: var(--hts-font-mono);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.2em;
}

/* ══════════════════════════════════════════════════════════════════════════
   STORAGE - a volume stack
   ══════════════════════════════════════════════════════════════════════════ */

.stack[b-ivnnn7dkrk] {
    position: relative;
    display: grid;
    gap: var(--hts-space-4);
    padding-left: 2rem;
}

.stack[b-ivnnn7dkrk]::before {
    content: "";
    position: absolute;
    top: 1.4rem;
    bottom: 1.4rem;
    left: 0.42rem;
    width: 1px;
    background: linear-gradient(180deg, rgba(131, 168, 243, 0.5), rgba(131, 168, 243, 0.3));
}

.plate[b-ivnnn7dkrk] {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--hts-space-4);
    padding: var(--hts-space-4) var(--hts-space-5);
    border: 1px solid var(--hts-border-strong);
    border-radius: var(--hts-radius-sm);
    background: var(--hts-surface);
    box-shadow: var(--hts-rim), var(--hts-shadow-sm);
}

/* Each plate steps further in, which is what gives the stack its depth without a 3D
   transform that would break at small widths. */
.plate:nth-child(2)[b-ivnnn7dkrk] {
    margin-left: clamp(0rem, 2.5vw, 1.75rem);
}

.plate:nth-child(3)[b-ivnnn7dkrk] {
    margin-left: clamp(0rem, 5vw, 3.5rem);
    opacity: 0.86;
}

.plate-mark[b-ivnnn7dkrk] {
    position: absolute;
    top: 50%;
    left: -1.62rem;
    width: 0.5rem;
    height: 0.5rem;
    border: 1px solid var(--hts-blue-400);
    border-radius: 50%;
    background: var(--hts-canvas);
    transform: translateY(-50%);
}

.plate:first-child .plate-mark[b-ivnnn7dkrk] {
    background: var(--hts-blue-400);
    box-shadow: var(--ht-lamp-data);
}

.plate-label[b-ivnnn7dkrk] {
    color: var(--hts-ink);
    font-family: var(--hts-font-mono);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.18em;
}

/* ══════════════════════════════════════════════════════════════════════════
   NETWORK - a horizontal flow
   ══════════════════════════════════════════════════════════════════════════ */

.flow[b-ivnnn7dkrk] {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--hts-space-4);
    padding-top: 2.25rem;
}

/* The rail the hops sit on. */
.flow[b-ivnnn7dkrk]::before {
    content: "";
    position: absolute;
    top: 0.72rem;
    right: 6%;
    left: 6%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(131, 168, 243, 0.45) 12%,
        rgba(131, 168, 243, 0.45) 88%,
        transparent);
}

.hop[b-ivnnn7dkrk] {
    position: relative;
    display: grid;
    gap: 0.45rem;
    padding: var(--hts-space-4) var(--hts-space-3);
    border: 1px solid var(--hts-border);
    border-radius: var(--hts-radius-sm);
    background: var(--hts-surface);
    text-align: center;
    justify-items: center;
}

.hop-mark[b-ivnnn7dkrk] {
    position: absolute;
    top: -2.02rem;
    left: 50%;
    width: 0.6rem;
    height: 0.6rem;
    border: 1px solid var(--hts-blue-400);
    border-radius: 50%;
    background: var(--hts-canvas);
    transform: translateX(-50%);
}

.hop:first-child .hop-mark[b-ivnnn7dkrk],
.hop:last-child .hop-mark[b-ivnnn7dkrk] {
    background: var(--hts-blue-400);
    box-shadow: var(--ht-lamp-data);
}

.hop-label[b-ivnnn7dkrk] {
    color: var(--hts-ink);
    font-family: var(--hts-font-mono);
    font-size: 0.5625rem;
    font-weight: 600;
    letter-spacing: 0.2em;
}

/* A packet crossing the rail. */
.flow-beam[b-ivnnn7dkrk] {
    position: absolute;
    top: 0.6rem;
    left: 6%;
    width: 2.5rem;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--hts-purple-300), transparent);
    box-shadow: var(--ht-lamp-live);
    animation: flow-beam-b-ivnnn7dkrk 3.6s var(--hts-ease) infinite;
}

@keyframes flow-beam-b-ivnnn7dkrk {
    0% {
        left: 6%;
        opacity: 0;
    }

    12%, 82% {
        opacity: 1;
    }

    100% {
        left: calc(94% - 2.5rem);
        opacity: 0;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   SERVER ALLOCATION - a capacity schematic
   ══════════════════════════════════════════════════════════════════════════ */

.map[b-ivnnn7dkrk] {
    padding: var(--hts-space-5);
    border: 1px solid var(--hts-border-strong);
    border-radius: var(--hts-radius-md);
    background:
        radial-gradient(100% 70% at 20% 0%, rgba(131, 168, 243, 0.10) 0%, transparent 62%),
        var(--hts-surface);
    box-shadow: var(--hts-rim), var(--hts-shadow-md);
}

.map-label[b-ivnnn7dkrk] {
    margin-bottom: var(--hts-space-4);
    color: var(--hts-blue-400);
    font-family: var(--hts-font-mono);
    font-size: 0.5625rem;
    font-weight: 620;
    letter-spacing: 0.22em;
}

.map-grid[b-ivnnn7dkrk] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 4px;
}

.map-tile[b-ivnnn7dkrk] {
    aspect-ratio: 3 / 2;
    border: 1px dashed var(--hts-cell-border);
    border-radius: 3px;
    background: var(--hts-cell-bg);
}

.map-tile.is-allocated[b-ivnnn7dkrk] {
    border-style: solid;
    border-color: var(--hts-border-blue);
    background: linear-gradient(140deg, rgba(131, 168, 243, 0.26), rgba(131, 168, 243, 0.08));
    box-shadow: var(--hts-rim);
}

.map-legend[b-ivnnn7dkrk] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hts-space-5);
    margin-top: var(--hts-space-5);
}

.legend-item[b-ivnnn7dkrk] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--hts-ink-muted);
    font-family: var(--hts-font-mono);
    font-size: 0.5625rem;
    letter-spacing: 0.18em;
}

.legend-swatch[b-ivnnn7dkrk] {
    width: 0.7rem;
    height: 0.5rem;
    border: 1px dashed var(--hts-cell-border);
    border-radius: 2px;
    background: var(--hts-cell-bg);
}

.legend-item.is-allocated .legend-swatch[b-ivnnn7dkrk] {
    border-style: solid;
    border-color: var(--hts-border-blue);
    background: rgba(131, 168, 243, 0.26);
}

.map-note[b-ivnnn7dkrk] {
    margin-top: var(--hts-space-4);
    padding-top: var(--hts-space-4);
    border-top: 1px solid var(--hts-border);
    color: var(--hts-ink-muted);
    font-family: var(--hts-font-mono);
    font-size: 0.5rem;
    letter-spacing: 0.18em;
}

/* ══════════════════════════════════════════════════════════════════════════
   RELIABILITY / OPERATIONS - a ticked rail
   ══════════════════════════════════════════════════════════════════════════ */

.ops[b-ivnnn7dkrk] {
    position: relative;
    display: grid;
    gap: var(--hts-space-5);
    padding-left: 2.25rem;
}

.ops[b-ivnnn7dkrk]::before {
    content: "";
    position: absolute;
    top: 0.5rem;
    bottom: 0.5rem;
    left: 0.5rem;
    width: 1px;
    background: linear-gradient(180deg,
        rgba(131, 168, 243, 0.5),
        rgba(131, 168, 243, 0.35) 60%,
        transparent);
}

.op[b-ivnnn7dkrk] {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    align-items: baseline;
    gap: var(--hts-space-4);
    padding-bottom: var(--hts-space-5);
    border-bottom: 1px solid var(--hts-border);
}

.op:last-child[b-ivnnn7dkrk] {
    padding-bottom: 0;
    border-bottom: 0;
}

/* A tick on the rail rather than a dot: this is a schedule, not a network. */
.op-tick[b-ivnnn7dkrk] {
    position: absolute;
    top: 0.42rem;
    left: -1.87rem;
    width: 0.65rem;
    height: 1px;
    background: var(--hts-blue-400);
    box-shadow: var(--ht-lamp-data);
}

.op-label[b-ivnnn7dkrk] {
    min-width: 8.5rem;
    color: var(--hts-ink);
    font-family: var(--hts-font-mono);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.2em;
}

.op[b-ivnnn7dkrk]  .copy-slot {
    width: 100%;
}

/* ── Responsive ────────────────────────────────────────────────────────── */

@media (max-width: 1080px) {
    .chapter-inner[b-ivnnn7dkrk] {
        grid-template-columns: minmax(0, 1fr);
        gap: clamp(2.25rem, 6vw, 3rem);
    }

    /* Copy always leads on a narrow screen; a mirrored chapter would otherwise open with an
       illustration whose caption has not been read yet. */
    .chapter.is-mirrored .chapter-copy[b-ivnnn7dkrk] {
        order: 0;
    }

    .chapter.is-mirrored .chapter-visual[b-ivnnn7dkrk] {
        order: 0;
    }

    .chapter-lede[b-ivnnn7dkrk] {
        max-width: 34rem;
    }
}

@media (max-width: 720px) {
    .flow[b-ivnnn7dkrk] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--hts-space-5) var(--hts-space-4);
    }

    /* The single rail no longer connects two rows of hops, so it is dropped rather than left
       crossing the drawing at a meaningless height. */
    .flow[b-ivnnn7dkrk]::before,
    .flow-beam[b-ivnnn7dkrk] {
        display: none;
    }

    .hop-mark[b-ivnnn7dkrk] {
        top: -0.5rem;
    }

    .map-grid[b-ivnnn7dkrk] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .op[b-ivnnn7dkrk] {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.5rem;
    }
}

@media (max-width: 560px) {
    .plate:nth-child(2)[b-ivnnn7dkrk],
    .plate:nth-child(3)[b-ivnnn7dkrk] {
        margin-left: 0;
    }

    .die[b-ivnnn7dkrk] {
        padding: var(--hts-space-5);
    }

    .readout--wide[b-ivnnn7dkrk] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/Hardware/HardwareClosing.razor.rz.scp.css */
.hw-closing[b-cf1j4uyvb1] {
    padding-block: clamp(2rem, 4vw, 3rem);
    border-top: 1px solid var(--ht-edge-strong);
    scroll-margin-top: 6rem;
}

.closing-inner[b-cf1j4uyvb1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem 3rem;
}

.closing-copy[b-cf1j4uyvb1] {
    min-width: 0;
}

.closing-heading[b-cf1j4uyvb1] {
    margin: 0;
    color: var(--ht-ink);
    font-size: clamp(1.45rem, 1.1rem + 1.25vw, 2rem);
    font-weight: 610;
    line-height: 1.25;
    letter-spacing: -0.035em;
    text-wrap: balance;
}

.closing-note[b-cf1j4uyvb1] {
    max-width: 35rem;
    margin: 0.75rem 0 0;
    color: var(--ht-ink-soft);
    font-size: 0.9rem;
    line-height: 1.7;
}

.closing-actions[b-cf1j4uyvb1] {
    display: flex;
    flex-wrap: wrap;
    flex: none;
    gap: 0.75rem;
}

@media (max-width: 850px) {
    .closing-inner[b-cf1j4uyvb1] {
        align-items: start;
        flex-direction: column;
    }
}

@media (max-width: 450px) {
    .closing-actions[b-cf1j4uyvb1] {
        display: grid;
        width: 100%;
    }

    .closing-actions[b-cf1j4uyvb1]  .cta {
        width: 100%;
    }
}
/* /Components/Hardware/HardwareHero.razor.rz.scp.css */
/* Actual photography and one specification sheet replace repeated inventory panels. */
.hw-hero[b-gyo7vcs7r7] {
    padding-block: clamp(2.5rem, 5vw, 4.25rem) 0;
}

.hw-hero-inner[b-gyo7vcs7r7] {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 5rem);
    padding-bottom: clamp(2rem, 4vw, 3rem);
}

.hw-hero-type[b-gyo7vcs7r7],
.hw-hero-image[b-gyo7vcs7r7] {
    min-width: 0;
}

.hw-kicker[b-gyo7vcs7r7],
.hw-spec-heading[b-gyo7vcs7r7] {
    margin: 0 0 1.1rem;
    color: var(--ht-ink-muted);
    font-family: var(--ht-font-mono);
    font-size: 0.7rem;
    font-weight: 550;
    line-height: 1.6;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.hw-kicker[b-gyo7vcs7r7] {
    color: var(--ht-accent);
}

.hw-title[b-gyo7vcs7r7] {
    max-width: 20ch;
    margin: 0;
    color: var(--ht-ink);
    font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.8rem);
    font-weight: 640;
    line-height: 1.1;
    letter-spacing: -0.055em;
    text-wrap: balance;
}

.hw-title span[b-gyo7vcs7r7] {
    display: block;
    color: var(--ht-accent);
}

.hw-lede[b-gyo7vcs7r7] {
    max-width: 40rem;
    margin: 1.5rem 0 0;
    color: var(--ht-ink-soft);
    font-size: 1rem;
    line-height: 1.75;
}

.hw-context[b-gyo7vcs7r7] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem 2rem;
    margin: 1.75rem 0 0;
}

.hw-context div[b-gyo7vcs7r7] {
    display: grid;
    gap: 0.35rem;
}

.hw-context dt[b-gyo7vcs7r7],
.hw-spec dt[b-gyo7vcs7r7] {
    color: var(--ht-ink-muted);
    font-family: var(--ht-font-mono);
    font-size: 0.65rem;
    line-height: 1.6;
    letter-spacing: 0.07em;
}

.hw-context dd[b-gyo7vcs7r7] {
    margin: 0;
    color: var(--ht-ink);
    font-size: 0.85rem;
    line-height: 1.55;
}

.hw-hero-actions[b-gyo7vcs7r7] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.1rem 1.5rem;
    margin-top: 2rem;
}

.hw-text-link[b-gyo7vcs7r7] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding-block: 0.6rem;
    color: var(--ht-ink-soft);
    font-size: 0.85rem;
    font-weight: 550;
    text-decoration: none;
    transition: color 180ms ease;
}

.hw-text-link:hover[b-gyo7vcs7r7] {
    color: var(--ht-accent);
}

.hw-text-link:focus-visible[b-gyo7vcs7r7] {
    outline: 2px solid var(--ht-accent);
    outline-offset: 5px;
}

.hw-hero-image[b-gyo7vcs7r7] {
    width: 100%;
    max-width: 27rem;
    justify-self: end;
}

.hw-hero-image[b-gyo7vcs7r7]  .photo-frame {
    --photo-ratio: 5 / 4;
}

.hw-hero-image[b-gyo7vcs7r7]  .photo-image {
    object-position: center 42%;
}

.hw-spec-sheet[b-gyo7vcs7r7] {
    padding-block: 1.5rem;
    border-top: 1px solid var(--ht-edge-strong);
    border-bottom: 1px solid var(--ht-edge-strong);
    scroll-margin-top: 6rem;
}

.hw-spec-heading[b-gyo7vcs7r7] {
    margin-bottom: 1rem;
}

.hw-specs[b-gyo7vcs7r7] {
    display: grid;
    grid-template-columns: 1.45fr repeat(3, minmax(0, 1fr));
    gap: 1rem 1.5rem;
    margin: 0;
}

.hw-spec[b-gyo7vcs7r7] {
    display: grid;
    align-content: start;
    gap: 0.45rem;
    min-width: 0;
}

.hw-spec dd[b-gyo7vcs7r7] {
    margin: 0;
    color: var(--ht-ink);
    font-size: clamp(0.95rem, 1.5vw, 1.1rem);
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
}

.hw-spec .hw-spec-detail[b-gyo7vcs7r7] {
    color: var(--ht-ink-muted);
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0;
}

.hw-spec-note[b-gyo7vcs7r7] {
    margin: 1rem 0 0;
    color: var(--ht-ink-muted);
    font-size: 0.75rem;
    line-height: 1.65;
}

@media (max-width: 800px) {
    .hw-hero-inner[b-gyo7vcs7r7] {
        grid-template-columns: minmax(0, 1fr);
        gap: 2rem;
    }

    .hw-title[b-gyo7vcs7r7] {
        max-width: 23ch;
    }

    .hw-hero-image[b-gyo7vcs7r7] {
        max-width: none;
        justify-self: stretch;
    }

    .hw-hero-image[b-gyo7vcs7r7]  .photo-frame {
        --photo-ratio: 16 / 9;
    }

    .hw-hero-image[b-gyo7vcs7r7]  .photo-image {
        object-position: center 38%;
    }

    .hw-specs[b-gyo7vcs7r7] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.5rem;
    }
}

@media (max-width: 400px) {
    .hw-context[b-gyo7vcs7r7] {
        gap: 1rem;
    }

    .hw-context div:last-child[b-gyo7vcs7r7] {
        flex-basis: 100%;
    }

    .hw-specs[b-gyo7vcs7r7] {
        column-gap: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hw-text-link[b-gyo7vcs7r7] {
        transition: none;
    }
}
/* /Components/Hardware/HardwareOperations.razor.rz.scp.css */
.hardware-operations[b-7nelhte5m5] {
    padding-block: clamp(2rem, 4vw, 3.25rem);
    border-top: 1px solid var(--ht-edge-strong);
    scroll-margin-top: 6rem;
}

.operations-inner[b-7nelhte5m5] {
    display: grid;
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
    align-items: start;
    gap: clamp(2rem, 5vw, 4.5rem);
}

.operations-kicker[b-7nelhte5m5] {
    margin: 0 0 0.85rem;
    color: var(--ht-accent);
    font-family: var(--ht-font-mono);
    font-size: 0.7rem;
    line-height: 1.6;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.operations-heading[b-7nelhte5m5] {
    max-width: 22ch;
    margin: 0;
    color: var(--ht-ink);
    font-size: clamp(1.6rem, 1.25rem + 1.5vw, 2.3rem);
    font-weight: 610;
    line-height: 1.2;
    letter-spacing: -0.04em;
    text-wrap: balance;
}

.operations-lede[b-7nelhte5m5] {
    max-width: 31rem;
    margin: 1rem 0 0;
    color: var(--ht-ink-soft);
    font-size: 0.9rem;
    line-height: 1.75;
}

.operations-list[b-7nelhte5m5] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    column-gap: clamp(1.25rem, 3vw, 2.5rem);
}

.operation[b-7nelhte5m5] {
    min-width: 0;
    border-bottom: 1px solid var(--ht-edge-strong);
    scroll-margin-top: 6rem;
}

.operation:nth-child(-n + 2)[b-7nelhte5m5] {
    border-top: 1px solid var(--ht-edge-strong);
}

.operation-summary[b-7nelhte5m5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 5rem;
    padding-block: 1rem;
    color: var(--ht-ink);
    cursor: pointer;
    list-style: none;
}

.operation-summary[b-7nelhte5m5]::-webkit-details-marker {
    display: none;
}

.operation-summary:focus-visible[b-7nelhte5m5] {
    outline: 2px solid var(--ht-accent);
    outline-offset: 4px;
}

.operation-label[b-7nelhte5m5] {
    display: grid;
    gap: 0.3rem;
    min-width: 0;
}

.operation-label strong[b-7nelhte5m5] {
    font-size: 0.95rem;
    font-weight: 560;
    line-height: 1.5;
    transition: color 180ms ease;
}

.operation-hint[b-7nelhte5m5] {
    color: var(--ht-ink-muted);
    font-size: 0.73rem;
    line-height: 1.6;
}

.operation-mark[b-7nelhte5m5] {
    position: relative;
    flex: none;
    width: 0.8rem;
    height: 0.8rem;
    color: var(--ht-ink-muted);
}

.operation-mark[b-7nelhte5m5]::before,
.operation-mark[b-7nelhte5m5]::after {
    position: absolute;
    inset: 0;
    width: 0.65rem;
    height: 1px;
    margin: auto;
    background: currentColor;
    content: "";
}

.operation-mark[b-7nelhte5m5]::after {
    transform: rotate(90deg);
    transition: transform 200ms ease;
}

.operation[open] .operation-mark[b-7nelhte5m5]::after {
    transform: rotate(0deg);
}

.operation[open] .operation-label strong[b-7nelhte5m5],
.operation-summary:hover .operation-label strong[b-7nelhte5m5] {
    color: var(--ht-accent);
}

.operation-body[b-7nelhte5m5] {
    margin: 0;
    padding: 0 1rem 1.2rem 0;
    color: var(--ht-ink-soft);
    font-size: 0.85rem;
    line-height: 1.75;
    animation: operation-enter-b-7nelhte5m5 220ms ease-out;
}

@keyframes operation-enter-b-7nelhte5m5 {
    from { opacity: 0; transform: translateY(-3px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 980px) {
    .operations-inner[b-7nelhte5m5] {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.75rem;
    }

    .operations-heading[b-7nelhte5m5] {
        max-width: 28ch;
    }
}

@media (max-width: 580px) {
    .operations-list[b-7nelhte5m5] {
        grid-template-columns: minmax(0, 1fr);
    }

    .operation:nth-child(2)[b-7nelhte5m5] {
        border-top: 0;
    }

    .operation-summary[b-7nelhte5m5] {
        min-height: 4.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .operation-label strong[b-7nelhte5m5],
    .operation-mark[b-7nelhte5m5]::after {
        transition: none;
    }

    .operation-body[b-7nelhte5m5] {
        animation: none;
    }
}
/* /Components/Hardware/HardwarePhoto.razor.rz.scp.css */
.photo[b-p3r51bpjwi] {
    display: grid;
    gap: 0.65rem;
    min-width: 0;
    margin: 0;
}

.photo-frame[b-p3r51bpjwi] {
    position: relative;
    aspect-ratio: var(--photo-ratio, 3 / 4);
    overflow: hidden;
    border: 1px solid var(--ht-edge-strong);
    border-radius: 0.5rem;
    background: var(--ht-surface-1);
}

.photo-frame picture[b-p3r51bpjwi] {
    display: block;
    width: 100%;
    height: 100%;
}

.photo-image[b-p3r51bpjwi] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.95);
    transition: transform 350ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (hover: hover) and (pointer: fine) {
    .photo:hover .photo-image[b-p3r51bpjwi] {
        transform: scale(1.015);
    }
}

.photo-caption[b-p3r51bpjwi] {
    margin: 0;
    color: var(--ht-ink-muted);
    font-size: 0.75rem;
    line-height: 1.6;
}

.photo--pending .photo-frame[b-p3r51bpjwi] {
    display: grid;
    place-items: center;
}

.pending-label[b-p3r51bpjwi] {
    margin: 0;
    padding: 1rem;
    color: var(--ht-ink-muted);
    font-size: 0.8rem;
    line-height: 1.6;
    text-align: center;
}

.photo.is-landscape .photo-frame[b-p3r51bpjwi] {
    --photo-ratio: 3 / 2;
}

.photo.is-tall .photo-frame[b-p3r51bpjwi] {
    --photo-ratio: 9 / 16;
}

.photo.is-wide .photo-frame[b-p3r51bpjwi] {
    --photo-ratio: 16 / 9;
}

@media (prefers-reduced-motion: reduce) {
    .photo-image[b-p3r51bpjwi],
    .photo:hover .photo-image[b-p3r51bpjwi] {
        transform: none;
        transition: none;
    }
}
/* /Components/Hardware/NodeGallerySection.razor.rz.scp.css */
.gallery[b-xk12uohif1] {
    padding-block: clamp(2rem, 4vw, 3.25rem);
    scroll-margin-top: 6rem;
}

.gallery-head[b-xk12uohif1] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
    gap: 1rem 3rem;
    margin-bottom: 1.5rem;
}

.gallery-title[b-xk12uohif1] {
    max-width: 25ch;
    margin: 0;
    color: var(--ht-ink);
    font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
    font-weight: 610;
    line-height: 1.2;
    letter-spacing: -0.035em;
}

.gallery-lede[b-xk12uohif1] {
    max-width: 35rem;
    margin: 0;
    color: var(--ht-ink-soft);
    font-size: 0.9rem;
    line-height: 1.7;
}

.gallery-strip[b-xk12uohif1] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(0.75rem, 2vw, 1.5rem);
}

.gallery-strip[b-xk12uohif1]  .photo-frame {
    --photo-ratio: 3 / 2;
}

.gallery-strip[b-xk12uohif1]  .photo:first-child .photo-image {
    object-position: center 38%;
}

@media (max-width: 700px) {
    .gallery-head[b-xk12uohif1] {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.75rem;
    }
}

@media (max-width: 480px) {
    .gallery-strip[b-xk12uohif1] {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.25rem;
    }

    .gallery-strip[b-xk12uohif1]  .photo-frame {
        --photo-ratio: 2 / 1;
    }
}
/* /Components/Hardware/NodeTopologySection.razor.rz.scp.css */
.topology[b-e1tajw33mx] {
    position: relative;
    padding-block: clamp(4.5rem, 8vw, 8rem);
    overflow: hidden;
}

/* One low bloom behind the diagram, so the drawing sits in light rather than on black. */
.topology[b-e1tajw33mx]::before {
    content: "";
    position: absolute;
    top: -10%;
    left: -8%;
    width: var(--hts-glow-w);
    height: var(--hts-glow-h);
    background: radial-gradient(ellipse at center, var(--hts-glow-brand) 0%, transparent 68%);
    filter: blur(var(--hts-glow-blur));
    pointer-events: none;
}

.topology-head[b-e1tajw33mx] {
    position: relative;
    max-width: 44rem;
    margin-bottom: clamp(3rem, 5vw, 4.5rem);
}

.chapter-kicker[b-e1tajw33mx] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: var(--hts-space-5);
    color: var(--ht-ink-muted);
    font-family: var(--hts-font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.2em;
}

.topology-title[b-e1tajw33mx] {
    font-size: clamp(2rem, 1.25rem + 2.6vw, 3.1rem);
    font-weight: 460;
    line-height: 1.04;
    letter-spacing: -0.03em;
}

.topology-lede[b-e1tajw33mx] {
    max-width: 30rem;
    margin-top: var(--hts-space-5);
}

/* ── Diagram ───────────────────────────────────────────────────────────── */

.diagram[b-e1tajw33mx] {
    position: relative;
    display: grid;
    justify-items: center;
}

/* Crown and outcome: the two ends of the drawing. */
.crown[b-e1tajw33mx],
.outcome[b-e1tajw33mx] {
    display: grid;
    justify-items: center;
}

.crown-plate[b-e1tajw33mx],
.outcome-plate[b-e1tajw33mx] {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.6rem 1.25rem;
    border: 1px solid var(--hts-border-brand);
    border-radius: var(--ht-radius-sm);
    background: var(--hts-surface-raised);
    box-shadow: var(--hts-rim), var(--ht-shadow-3);
    color: var(--hts-ink);
    font-family: var(--hts-font-mono);
    font-size: 0.625rem;
    font-weight: 620;
    letter-spacing: 0.2em;
}

.outcome-plate[b-e1tajw33mx] {
    border-color: var(--hts-border-blue);
    box-shadow: var(--hts-rim), var(--ht-shadow-3);
    color: var(--hts-blue-300);
}

.crown-dot[b-e1tajw33mx] {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background-image: var(--hts-gradient-brand);
    box-shadow: var(--hts-rim);
}

/* Vertical connectors carry a travelling light, so the diagram reads as a direction of flow
   rather than a static tree. */
.crown-drop[b-e1tajw33mx],
.outcome-drop[b-e1tajw33mx],
.node-drop[b-e1tajw33mx],
.node-riser[b-e1tajw33mx] {
    position: relative;
    display: block;
    width: 1px;
    background: linear-gradient(180deg, rgba(131, 168, 243, 0.55), rgba(131, 168, 243, 0.35));
    overflow: hidden;
}

.crown-drop[b-e1tajw33mx],
.outcome-drop[b-e1tajw33mx] {
    height: 2.75rem;
}

.crown-drop[b-e1tajw33mx]::after,
.node-drop[b-e1tajw33mx]::after {
    content: "";
    position: absolute;
    left: -1px;
    width: 3px;
    height: 45%;
    background: var(--hts-blue-200);
    box-shadow: var(--hts-rim);
    animation: drop-travel-b-e1tajw33mx 2.6s var(--hts-ease) infinite;
}

@keyframes drop-travel-b-e1tajw33mx {
    0% {
        top: -45%;
        opacity: 0;
    }

    25% {
        opacity: 1;
    }

    100% {
        top: 100%;
        opacity: 0;
    }
}

/* ── Bus ───────────────────────────────────────────────────────────────── */

.bus[b-e1tajw33mx],
.collector[b-e1tajw33mx] {
    display: flex;
    align-items: center;
    gap: var(--hts-space-4);
    width: 100%;
}

.bus-line[b-e1tajw33mx] {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(176, 105, 255, 0.5), transparent);
}

.bus-label[b-e1tajw33mx] {
    color: var(--hts-purple-300);
    font-family: var(--hts-font-mono);
    font-size: 0.5625rem;
    letter-spacing: 0.22em;
    white-space: nowrap;
}

/* The junction where the platform's drop line meets the bus. The label sits at the start of
   the run instead of the middle, so the two never overlap. */
.bus-junction[b-e1tajw33mx] {
    width: 0.42rem;
    height: 0.42rem;
    flex: none;
    border-radius: 50%;
    background: var(--hts-purple-400);
    box-shadow: var(--ht-lamp-live);
}

.collector-dot[b-e1tajw33mx] {
    width: 0.5rem;
    height: 0.5rem;
    flex: none;
    border-radius: 50%;
    background: var(--hts-blue-400);
    box-shadow: var(--ht-lamp-data);
}

/* ── Nodes ─────────────────────────────────────────────────────────────── */

.node-row[b-e1tajw33mx] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--hts-space-5);
    width: 100%;
}

.node[b-e1tajw33mx] {
    position: relative;
    display: grid;
    align-content: start;
    gap: var(--hts-space-4);
    margin-block: 2.75rem;
    padding: var(--hts-space-5);
    border: 1px solid var(--hts-border-strong);
    border-radius: var(--hts-radius-md);
    background: var(--hts-surface);
    box-shadow: var(--hts-rim);
    transition:
        border-color var(--hts-duration-base) var(--hts-ease),
        box-shadow var(--hts-duration-base) var(--hts-ease),
        transform var(--hts-duration-base) var(--hts-ease-out);
}

.node:hover[b-e1tajw33mx] {
    border-color: var(--hts-border-blue);
    box-shadow: var(--hts-rim), var(--ht-shadow-3);
    transform: translateY(-3px);
}

/* Drop from the bus into the node, and riser from the node down to the collector. */
.node-drop[b-e1tajw33mx] {
    position: absolute;
    top: -2.75rem;
    left: 50%;
    height: 2.75rem;
}

.node-riser[b-e1tajw33mx] {
    position: absolute;
    bottom: -2.75rem;
    left: 50%;
    height: 2.75rem;
    background: linear-gradient(180deg, rgba(131, 168, 243, 0.35), rgba(131, 168, 243, 0.5));
}

.node.is-reserved .node-drop[b-e1tajw33mx],
.node.is-reserved .node-riser[b-e1tajw33mx] {
    background: var(--hts-rule);
}

.node.is-reserved .node-drop[b-e1tajw33mx]::after {
    display: none;
}

.node-head[b-e1tajw33mx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hts-space-3);
}

.node-id[b-e1tajw33mx] {
    color: var(--hts-ink);
    font-family: var(--hts-font-mono);
    font-size: var(--hts-text-sm);
    font-weight: 620;
    letter-spacing: 0.12em;
}

.node-health[b-e1tajw33mx] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--hts-font-mono);
    font-size: 0.5rem;
    letter-spacing: 0.16em;
    white-space: nowrap;
}

.health-dot[b-e1tajw33mx] {
    width: 0.35rem;
    height: 0.35rem;
    border-radius: 50%;
    background: currentColor;
}

.is-healthy .node-health[b-e1tajw33mx] {
    color: var(--hts-blue-300);
}

.is-healthy .health-dot[b-e1tajw33mx] {
    box-shadow: var(--ht-lamp-live);
}

.is-provisioning .node-health[b-e1tajw33mx] {
    color: var(--hts-purple-300);
}

.is-reserved .node-health[b-e1tajw33mx] {
    color: var(--hts-ink-muted);
}

.node-specs[b-e1tajw33mx] {
    display: grid;
    gap: var(--hts-space-3);
    padding-block: var(--hts-space-4);
    border-block: 1px solid var(--hts-border);
}

.node-specs > div[b-e1tajw33mx] {
    display: grid;
    gap: 0.3rem;
}

.node-specs dt[b-e1tajw33mx] {
    color: var(--hts-ink-muted);
    font-family: var(--hts-font-mono);
    font-size: 0.5rem;
    letter-spacing: 0.2em;
}

.load-head[b-e1tajw33mx] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    color: var(--hts-ink-muted);
    font-family: var(--hts-font-mono);
    font-size: 0.5rem;
    letter-spacing: 0.18em;
}

.load-value[b-e1tajw33mx] {
    color: var(--hts-ink-soft);
    font-size: var(--hts-text-sm);
}

.load-track[b-e1tajw33mx] {
    position: relative;
    height: 4px;
    margin-top: 0.5rem;
    border-radius: 1px;
    background: var(--hts-track);
    overflow: hidden;
}

.load-fill[b-e1tajw33mx] {
    display: block;
    height: 100%;
    background: var(--hts-blue-500);
}

/* Indeterminate: a short segment sweeping the track. It reports "no figure yet" without
   drawing a level that would be read as one. */
.load-sweep[b-e1tajw33mx] {
    position: absolute;
    top: 0;
    left: -35%;
    width: 35%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--hts-purple-400), transparent);
    animation: load-sweep-b-e1tajw33mx 2.2s var(--hts-ease) infinite;
}

@keyframes load-sweep-b-e1tajw33mx {
    to {
        left: 100%;
    }
}

/* Without motion the sweep never arrives, so the track carries a hatch instead. */
@media (prefers-reduced-motion: reduce) {
    .load-track.is-indeterminate[b-e1tajw33mx] {
        background-image: repeating-linear-gradient(
            -45deg,
            var(--hts-muted-mark) 0 3px,
            transparent 3px 7px);
    }

    .load-sweep[b-e1tajw33mx] {
        display: none;
    }
}

.load-note[b-e1tajw33mx] {
    margin-top: 0.5rem;
    color: var(--hts-ink-muted);
    font-family: var(--hts-font-mono);
    font-size: 0.5rem;
    letter-spacing: 0.16em;
}

/* ── Responsive ────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
    .node-row[b-e1tajw33mx] {
        grid-template-columns: minmax(0, 1fr);
        max-width: 26rem;
        gap: 0;
    }

    /* The branch collapses into one vertical run: each node hangs off the one above it, so
       the drawing still reads top to bottom on a phone. */
    .node[b-e1tajw33mx] {
        margin-block: 0;
    }

    .node + .node[b-e1tajw33mx] {
        margin-top: 2.75rem;
    }

    .node-drop[b-e1tajw33mx] {
        top: -2.75rem;
        left: 2rem;
    }

    .node:first-child .node-drop[b-e1tajw33mx] {
        top: -2.75rem;
    }

    .node-riser[b-e1tajw33mx] {
        display: none;
    }

    .node:last-child .node-riser[b-e1tajw33mx] {
        display: block;
        left: 2rem;
    }

    .bus[b-e1tajw33mx],
    .collector[b-e1tajw33mx] {
        margin-bottom: 0;
    }
}
/* /Components/Hardware/PhysicalSection.razor.rz.scp.css */
.physical[b-irpk0fz73j] {
    position: relative;
    padding-block: clamp(4.5rem, 8vw, 8rem);
}

.physical-inner[b-irpk0fz73j] {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: start;
    gap: clamp(2.5rem, 6vw, 5.5rem);
}

/* ── Copy column ───────────────────────────────────────────────────────── */

.chapter-kicker[b-irpk0fz73j] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: var(--hts-space-5);
    color: var(--ht-ink-muted);
    font-family: var(--hts-font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.2em;
}

.physical-title[b-irpk0fz73j] {
    font-size: clamp(2rem, 1.25rem + 2.6vw, 3.1rem);
    font-weight: 460;
    line-height: 1.04;
    letter-spacing: -0.03em;
}

.physical-lede[b-irpk0fz73j] {
    max-width: 30rem;
    margin-top: var(--hts-space-5);
}

/* ── Specification ledger ──────────────────────────────────────────────── */

.sheet[b-irpk0fz73j] {
    margin-top: var(--hts-space-8);
    padding: var(--hts-space-5);
    border: 1px solid var(--hts-border);
    border-radius: var(--hts-radius-md);
    background: var(--hts-surface);
    box-shadow: var(--hts-rim);
}

.sheet-label[b-irpk0fz73j] {
    margin-bottom: var(--hts-space-4);
    color: var(--hts-blue-400);
    font-family: var(--hts-font-mono);
    font-size: 0.5625rem;
    font-weight: 620;
    letter-spacing: 0.22em;
}

.ledger[b-irpk0fz73j] {
    display: grid;
}

/* Label, dot leader, value - a specification sheet, not a card. The leader is what makes a
   row of pending values read as a form waiting to be filled in. */
.ledger-row[b-irpk0fz73j] {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: baseline;
    gap: var(--hts-space-4);
    padding-block: var(--hts-space-4);
    border-top: 1px solid var(--hts-border);
}

.ledger-row:first-child[b-irpk0fz73j] {
    border-top: 0;
    padding-top: 0;
}

.ledger-row dt[b-irpk0fz73j] {
    min-width: 6.5rem;
    color: var(--hts-ink);
    font-family: var(--hts-font-mono);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.2em;
}

.ledger-row dd[b-irpk0fz73j] {
    min-width: 0;
}

.ledger-row[b-irpk0fz73j]  .copy-slot {
    width: 100%;
}

.sheet-note[b-irpk0fz73j] {
    margin-top: var(--hts-space-5);
    padding-top: var(--hts-space-4);
    border-top: 1px solid var(--hts-border);
    color: var(--hts-ink-muted);
    font-size: var(--hts-text-sm);
    line-height: var(--hts-leading-normal);
}

/* ── Rack elevation ────────────────────────────────────────────────────── */

.physical-figure[b-irpk0fz73j] {
    position: relative;
}

.figure-label[b-irpk0fz73j] {
    margin-bottom: var(--hts-space-4);
    color: var(--hts-ink-muted);
    font-family: var(--hts-font-mono);
    font-size: 0.5625rem;
    letter-spacing: 0.22em;
}

/* The photograph is the figure now. It gets the column at full width rather than sitting at
   a third of it beside a drawing of the same thing. */
.physical-figure[b-irpk0fz73j]  .figure-photo {
    max-width: 28rem;
}

@media (max-width: 1080px) {
    .physical-inner[b-irpk0fz73j] {
        grid-template-columns: minmax(0, 1fr);
        gap: clamp(2.5rem, 7vw, 3.5rem);
    }

    .physical-figure[b-irpk0fz73j] {
        max-width: 34rem;
    }
}

@media (max-width: 560px) {
    .sheet[b-irpk0fz73j] {
        padding: var(--hts-space-4);
    }

    .ledger-row[b-irpk0fz73j] {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.5rem;
    }

}
/* /Components/Home/BotSection.razor.rz.scp.css */
.bot[b-4z3s83q7y9] {
    position: relative;
    padding-block: clamp(4.5rem, 8vw, 8rem);
    border-top: 1px solid var(--hts-border);
    background: var(--hts-navy-900);
    overflow: hidden;
}

.bot[b-4z3s83q7y9]::before {
    content: "";
    position: absolute;
    top: -18%;
    right: -6%;
    width: var(--hts-glow-w);
    height: var(--hts-glow-h);
    background: radial-gradient(ellipse at center, var(--hts-glow-brand) 0%, transparent 68%);
    filter: blur(var(--hts-glow-blur));
    pointer-events: none;
}

.bot-inner[b-4z3s83q7y9] {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(2.5rem, 6vw, 5rem);
}

/* ── Copy ──────────────────────────────────────────────────────────────── */

.bot-kicker[b-4z3s83q7y9] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: var(--hts-space-5);
    color: var(--ht-ink-muted);
    font-family: var(--hts-font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.2em;
}

.bot-title[b-4z3s83q7y9] {
    font-size: clamp(2rem, 1.25rem + 2.5vw, 3.1rem);
    font-weight: 460;
    line-height: 1.04;
    letter-spacing: -0.03em;
}

.bot-lede[b-4z3s83q7y9] {
    max-width: 32rem;
    margin-top: var(--hts-space-5);
    color: var(--hts-ink-soft);
    font-size: var(--hts-text-md);
    line-height: var(--hts-leading-relaxed);
}

/* The eligibility rule, set as a rule rather than as a sentence in a paragraph. */
.bot-threshold[b-4z3s83q7y9] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    max-width: 30rem;
    margin-top: var(--hts-space-6);
    padding: var(--hts-space-4) var(--hts-space-5);
    border: 1px solid var(--hts-border-blue);
    border-radius: var(--hts-radius-md);
    background: rgba(61, 92, 224, 0.08);
    color: var(--hts-ink);
    font-family: var(--hts-font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    line-height: 1.6;
}

.threshold-mark[b-4z3s83q7y9] {
    width: 0.4rem;
    height: 0.4rem;
    flex: none;
    border-radius: 1px;
    background: var(--hts-blue-300);
    transform: rotate(45deg);
}

.bot-caveat[b-4z3s83q7y9] {
    max-width: 30rem;
    margin-top: var(--hts-space-4);
    color: var(--hts-ink-muted);
    font-size: var(--hts-text-sm);
    line-height: var(--hts-leading-normal);
}

/* ── System ────────────────────────────────────────────────────────────── */

.bot-system[b-4z3s83q7y9] {
    padding: clamp(1.25rem, 2.5vw, 1.75rem);
    border: 1px solid var(--hts-border-strong);
    border-radius: var(--hts-radius-lg);
    background:
        radial-gradient(120% 80% at 80% 0%, rgba(176, 105, 255, 0.12) 0%, transparent 62%),
        var(--hts-surface);
    box-shadow: var(--hts-rim), var(--hts-shadow-md);
    min-width: 0;
}

.system-head[b-4z3s83q7y9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hts-space-4);
    padding-bottom: var(--hts-space-4);
    border-bottom: 1px solid var(--hts-border);
}

.system-name[b-4z3s83q7y9] {
    color: var(--hts-ink);
    font-family: var(--hts-font-mono);
    font-size: var(--hts-text-sm);
    font-weight: 640;
    letter-spacing: 0.14em;
}

.system-state[b-4z3s83q7y9] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--hts-purple-300);
    font-family: var(--hts-font-mono);
    font-size: 0.5rem;
    letter-spacing: 0.18em;
    white-space: nowrap;
}

.state-dot[b-4z3s83q7y9] {
    width: 0.35rem;
    height: 0.35rem;
    border-radius: 50%;
    background: currentColor;
    box-shadow: var(--ht-lamp-live);
    animation: bot-breathe-b-4z3s83q7y9 3.4s var(--hts-ease) infinite;
}

@keyframes bot-breathe-b-4z3s83q7y9 {
    0%, 100% {
        opacity: 1;
    }

    55% {
        opacity: 0.32;
    }
}

/* The rail on the left, the channels on the right. */
.system-body[b-4z3s83q7y9] {
    display: grid;
    grid-template-columns: 1.6rem minmax(0, 1fr);
    gap: var(--hts-space-4);
    padding-top: var(--hts-space-4);
}

.rail[b-4z3s83q7y9] {
    position: relative;
}

.rail-line[b-4z3s83q7y9] {
    position: absolute;
    top: 0.55rem;
    bottom: 0.55rem;
    left: 50%;
    width: 2px;
    border-radius: 1px;
    background: linear-gradient(180deg, var(--hts-blue-400) 0%, var(--ht-data-500) 100%);
    transform: translateX(-50%);
}

.rail-node[b-4z3s83q7y9] {
    position: absolute;
    left: 50%;
    width: 0.55rem;
    height: 0.55rem;
    border: 2px solid var(--hts-blue-300);
    border-radius: 50%;
    background: var(--hts-navy-900);
    transform: translateX(-50%);
}

.rail-node--top[b-4z3s83q7y9] {
    top: 0.28rem;
}

.rail-node--bottom[b-4z3s83q7y9] {
    bottom: 0.28rem;
    border-color: var(--hts-purple-300);
}

/* Where the bot attaches: a tap on the side of the rail, not a link in the middle of it. */
.rail-tap[b-4z3s83q7y9] {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.65rem;
    height: 0.65rem;
    background: var(--hts-purple-500);
    box-shadow: var(--ht-lamp-live);
    transform: translate(-50%, -50%) rotate(45deg);
}

.system-rows[b-4z3s83q7y9] {
    display: grid;
    gap: var(--hts-space-4);
    min-width: 0;
}

.row-end[b-4z3s83q7y9] {
    color: var(--hts-ink-muted);
    font-family: var(--hts-font-mono);
    font-size: 0.5625rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

/* ── Channels ──────────────────────────────────────────────────────────── */

.channels[b-4z3s83q7y9] {
    display: grid;
    gap: 0.7rem;
    padding: var(--hts-space-4) 0;
    border-block: 1px solid var(--hts-border);
}

.channel[b-4z3s83q7y9] {
    display: grid;
    grid-template-columns: minmax(5.5rem, 0.9fr) minmax(0, 1.4fr) auto;
    align-items: center;
    gap: var(--hts-space-4);
    min-width: 0;
}

.channel-label[b-4z3s83q7y9] {
    color: var(--hts-ink-soft);
    font-family: var(--hts-font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.12em;
}

.channel-bar[b-4z3s83q7y9] {
    position: relative;
    height: 3px;
    border-radius: var(--hts-radius-pill);
    background: var(--hts-cell-bg);
    overflow: hidden;
}

.channel-fill[b-4z3s83q7y9] {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    transform-origin: left center;
}

.channel--watched .channel-fill[b-4z3s83q7y9] {
    background: linear-gradient(90deg, var(--hts-blue-500) 0%, var(--hts-blue-300) 100%);
}

.channel--managed .channel-fill[b-4z3s83q7y9] {
    background: linear-gradient(90deg, var(--hts-purple-600) 0%, var(--hts-purple-300) 100%);
}

.channel-state[b-4z3s83q7y9] {
    color: var(--hts-ink-muted);
    font-family: var(--hts-font-mono);
    font-size: 0.5rem;
    letter-spacing: 0.16em;
    white-space: nowrap;
}

.channel--managed .channel-state[b-4z3s83q7y9] {
    color: var(--hts-purple-300);
}

.channel--watched .channel-state[b-4z3s83q7y9] {
    color: var(--hts-blue-300);
}

/*
    The fill runs on entry, one channel after another. A transform, not a width, so it stays on
    the compositor; and a transition off a class rather than a keyframe loop, so it happens once
    and then stops.
*/
html.hts-js .bot-system[data-reveal] .channel-fill[b-4z3s83q7y9] {
    transform: scaleX(0);
    transition: transform 0.72s var(--hts-ease-out);
    transition-delay: calc(var(--channel-index) * 110ms);
}

html.hts-js .bot-system[data-reveal].is-revealed .channel-fill[b-4z3s83q7y9] {
    transform: scaleX(1);
}

/* ── Responsive ────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
    .bot-inner[b-4z3s83q7y9] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 560px) {
    .channel[b-4z3s83q7y9] {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    /* The bar is the first thing to go on a phone: the label and the state carry the meaning. */
    .channel-bar[b-4z3s83q7y9] {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .state-dot[b-4z3s83q7y9] {
        animation: none;
    }

    html.hts-js .bot-system[data-reveal] .channel-fill[b-4z3s83q7y9] {
        transform: scaleX(1);
        transition: none;
    }
}
/* /Components/Home/CapabilitiesSection.razor.rz.scp.css */
.caps[b-fmnkx44gz9] {
    position: relative;
    padding-block: clamp(4rem, 8vw, 8rem);
    background: var(--hts-navy-900);
    border-block: 1px solid var(--hts-border);
}

.cap-list[b-fmnkx44gz9] {
    display: grid;
}

.cap[b-fmnkx44gz9] {
    display: grid;
    grid-template-columns: 9rem minmax(0, 1fr) 12rem;
    align-items: start;
    gap: clamp(1.5rem, 4vw, 4rem);
    padding-block: clamp(2.5rem, 5vw, 4.5rem);
    border-bottom: 1px solid var(--hts-border);
}

.cap:last-child[b-fmnkx44gz9] {
    border-bottom: none;
}

/* Alternating composition so the rhythm never settles into a template. */
.cap.is-flipped[b-fmnkx44gz9] {
    grid-template-columns: 12rem minmax(0, 1fr) 9rem;
}

.cap.is-flipped .cap-index[b-fmnkx44gz9] {
    order: 3;
    align-items: flex-end;
    text-align: right;
}

.cap.is-flipped .cap-readout[b-fmnkx44gz9] {
    order: 1;
}

.cap.is-flipped .cap-body[b-fmnkx44gz9] {
    order: 2;
}

/* ── Index column ──────────────────────────────────────────────────────── */

.cap-index[b-fmnkx44gz9] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--hts-space-3);
}

/* A counter, not a state. The readouts on the other side of the row are measurements and keep
   their colour; the number that says which section this is does not. */
.cap-number[b-fmnkx44gz9] {
    color: var(--ht-ink-muted);
    font-family: var(--hts-font-mono);
    font-size: clamp(2rem, 1.4rem + 1.8vw, 3rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
}

.cap-rule[b-fmnkx44gz9] {
    width: 2.5rem;
    height: 1px;
    background: linear-gradient(90deg, var(--hts-purple-400), transparent);
}

.cap.is-flipped .cap-rule[b-fmnkx44gz9] {
    background: linear-gradient(270deg, var(--hts-blue-400), transparent);
}

.cap-kicker[b-fmnkx44gz9] {
    color: var(--hts-ink-muted);
    font-family: var(--hts-font-mono);
    font-size: 0.5625rem;
    letter-spacing: 0.22em;
}

/* ── Body ──────────────────────────────────────────────────────────────── */

.cap-headline[b-fmnkx44gz9] {
    font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3rem);
    font-weight: 460;
    line-height: 1.04;
    letter-spacing: -0.032em;
    text-wrap: balance;
}

.cap-copy[b-fmnkx44gz9] {
    max-width: 38rem;
    margin-top: var(--hts-space-4);
    color: var(--hts-ink-soft);
    font-size: var(--hts-text-lg);
    line-height: var(--hts-leading-relaxed);
}

/* ── Readout ───────────────────────────────────────────────────────────── */

.cap-readout[b-fmnkx44gz9] {
    display: grid;
    gap: var(--hts-space-4);
    padding-left: var(--hts-space-5);
    border-left: 1px solid var(--hts-border);
}

.cap.is-flipped .cap-readout[b-fmnkx44gz9] {
    padding-left: 0;
    padding-right: var(--hts-space-5);
    border-left: none;
    border-right: 1px solid var(--hts-border);
    text-align: right;
}

.cap-readout dt[b-fmnkx44gz9] {
    color: var(--hts-ink-muted);
    font-family: var(--hts-font-mono);
    font-size: 0.5rem;
    letter-spacing: 0.2em;
}

.cap-readout dd[b-fmnkx44gz9] {
    margin-top: 0.3rem;
    color: var(--hts-blue-300);
    font-family: var(--hts-font-mono);
    font-size: var(--hts-text-sm);
    letter-spacing: 0.06em;
}

.cap.is-flipped .cap-readout dd[b-fmnkx44gz9] {
    color: var(--hts-purple-300);
}

/* ── Responsive ────────────────────────────────────────────────────────── */

@media (max-width: 1000px) {
    .cap[b-fmnkx44gz9],
    .cap.is-flipped[b-fmnkx44gz9] {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--hts-space-5);
    }

    .cap.is-flipped .cap-index[b-fmnkx44gz9] {
        order: 0;
        align-items: flex-start;
        text-align: left;
    }

    .cap.is-flipped .cap-body[b-fmnkx44gz9] {
        order: 0;
    }

    .cap.is-flipped .cap-readout[b-fmnkx44gz9] {
        order: 0;
        padding-right: 0;
        padding-left: var(--hts-space-5);
        border-right: none;
        border-left: 1px solid var(--hts-border);
        text-align: left;
    }

    .cap-index[b-fmnkx44gz9] {
        flex-direction: row;
        align-items: center;
    }

    .cap-number[b-fmnkx44gz9] {
        font-size: 1.75rem;
    }

    .cap-readout[b-fmnkx44gz9] {
        display: flex;
        flex-wrap: wrap;
        gap: var(--hts-space-6);
    }
}
/* /Components/Home/ClosingSection.razor.rz.scp.css */
.closing[b-a25yj2no4b] { padding: 3rem 0 5rem; }
.closing-inner[b-a25yj2no4b] { display: grid; grid-template-columns: 1.3fr .8fr; gap: clamp(2rem, 6vw, 6rem); border-block: 1px solid var(--ht-edge-strong); padding: clamp(2rem, 5vw, 4.5rem) 0; background: transparent; }
.closing-copy h2[b-a25yj2no4b] { margin: 1.3rem 0 1.2rem; max-width: 17ch; font-size: clamp(2.2rem, 4.5vw, 4rem); font-weight: 520; letter-spacing: -.055em; line-height: 1.1; }
.closing-copy > p:not(.storefront-kicker)[b-a25yj2no4b] { max-width: 36rem; margin-bottom: 1.7rem; font-size: .88rem; color: var(--ht-ink-soft); line-height: 1.75; }
.closing-contact[b-a25yj2no4b] { align-self: end; padding-left: 2.5rem; border-left: 1px solid var(--ht-edge-strong); }
.contact-symbol[b-a25yj2no4b] { display: block; color: var(--ht-accent); font-size: 2.8rem; line-height: 1; margin-bottom: 1.8rem; }
.contact-symbol[b-a25yj2no4b]  .hts-icon { width: 26px; height: 26px; }
.closing-contact h3[b-a25yj2no4b] { margin: 0 0 .7rem; font-size: 1.3rem; font-weight: 530; letter-spacing: -.035em; }
.closing-contact p[b-a25yj2no4b] { max-width: 26rem; margin: 0 0 1rem; font-size: .78rem; color: var(--ht-ink-soft); line-height: 1.75; }
.closing-contact .hts-text-link[b-a25yj2no4b] { font-size: .74rem; overflow-wrap: anywhere; }
@media (max-width: 850px) { .closing-inner[b-a25yj2no4b] { grid-template-columns: 1fr; gap: 2.5rem; } .closing-contact[b-a25yj2no4b] { padding: 2rem 0 0; border-left: 0; border-top: 1px solid var(--ht-edge-strong); } .contact-symbol[b-a25yj2no4b] { margin-bottom: 1rem; } }
@media (max-width: 500px) { .closing-inner[b-a25yj2no4b] { padding: 1.6rem; } .closing-copy[b-a25yj2no4b]  .cta { width: 100%; } .closing[b-a25yj2no4b] { padding-bottom: 3rem; } }
/* /Components/Home/ControlPanelSection.razor.rz.scp.css */
.cp[b-ktsrb6n9jw] {
    position: relative;
    padding-block: clamp(4rem, 7vw, 7rem);
    border-block: 1px solid var(--ht-edge);
    background: var(--ht-surface-1);
}

.cp-head[b-ktsrb6n9jw] {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    align-items: end;
    gap: 1rem 4rem;
    margin-bottom: 2.75rem;
}

.cp-kicker[b-ktsrb6n9jw] {
    display: flex;
    align-items: center;
    gap: .75rem;
    grid-column: 1;
    color: var(--ht-ink-muted);
    font-family: var(--ht-font-mono);
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.cp-title[b-ktsrb6n9jw] {
    grid-column: 1;
    color: var(--ht-ink);
    font-size: clamp(2rem, 4vw, 3.4rem);
    font-weight: 550;
    line-height: 1.1;
    letter-spacing: -.045em;
}

.cp-accent[b-ktsrb6n9jw] {
    color: var(--ht-accent);
    font-weight: 650;
}

.cp-lede[b-ktsrb6n9jw] {
    grid-column: 2;
    grid-row: 2;
    max-width: 32rem;
    margin: 0;
    color: var(--ht-ink-soft);
    font-size: 1rem;
    line-height: 1.8;
}

.app[b-ktsrb6n9jw] {
    overflow: hidden;
    border: 1px solid var(--ht-edge-strong);
    border-radius: 8px;
    background: var(--ht-ground);
    box-shadow: 0 20px 70px -45px rgb(0 0 0 / 45%);
}

.app-chrome[b-ktsrb6n9jw] {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 56px;
    padding: .6rem 1.25rem;
    border-bottom: 1px solid var(--ht-edge);
    background: var(--ht-surface-2);
}

.chrome-dots[b-ktsrb6n9jw] {
    display: inline-flex;
    gap: 5px;
    flex: none;
}

.chrome-dots i[b-ktsrb6n9jw] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ht-ink-faint);
    opacity: .6;
}

.chrome-url[b-ktsrb6n9jw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    flex: 1;
    min-width: 0;
    max-width: 31rem;
    padding: .4rem .85rem;
    margin-inline: auto;
    border: 1px solid var(--ht-edge);
    border-radius: 7px;
    background: var(--ht-ground);
    color: var(--ht-ink-muted);
    font-family: var(--ht-font-mono);
    font-size: .625rem;
}

.url-host[b-ktsrb6n9jw] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.url-path[b-ktsrb6n9jw] {
    white-space: nowrap;
}

.url-lock[b-ktsrb6n9jw] {
    width: 5px;
    height: 5px;
    flex: none;
    border-radius: 2px;
    background: var(--ht-data-500);
}

.chrome-env[b-ktsrb6n9jw] {
    flex: none;
    padding: .25rem .5rem;
    border: 1px solid color-mix(in srgb, var(--ht-accent) 30%, transparent);
    border-radius: 5px;
    background: var(--ht-accent-soft);
    color: var(--ht-accent);
    font-family: var(--ht-font-mono);
    font-size: .625rem;
    font-weight: 600;
    letter-spacing: .08em;
}

.app-body[b-ktsrb6n9jw] {
    display: grid;
    grid-template-columns: 12rem minmax(0, 1fr);
    min-height: 28rem;
}

.app-side[b-ktsrb6n9jw] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem .75rem;
    border-right: 1px solid var(--ht-edge);
    background: var(--ht-surface-1);
}

.side-key[b-ktsrb6n9jw] {
    padding-inline: .75rem;
    color: var(--ht-ink-muted);
    font-family: var(--ht-font-mono);
    font-size: .625rem;
    letter-spacing: .09em;
}

.app-side ul[b-ktsrb6n9jw] {
    display: grid;
    gap: .25rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

.side-item[b-ktsrb6n9jw] {
    position: relative;
    display: flex;
    align-items: center;
    gap: .65rem;
    width: 100%;
    min-height: 44px;
    padding: .6rem .75rem;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--ht-ink-muted);
    font-size: .8125rem;
    font-weight: 530;
    text-align: left;
    transition: background-color 180ms ease, color 180ms ease;
}

.side-bar[b-ktsrb6n9jw] {
    width: 2px;
    height: 1rem;
    flex: none;
    border-radius: 2px;
    background: transparent;
}

.side-item.is-active[b-ktsrb6n9jw] {
    background: var(--ht-accent-soft);
    color: var(--ht-ink);
}

.side-item.is-active .side-bar[b-ktsrb6n9jw] {
    background: var(--ht-accent);
}

.side-foot[b-ktsrb6n9jw] {
    margin-top: auto;
    padding-top: 1.25rem;
    border-top: 1px solid var(--ht-edge);
}

.side-node[b-ktsrb6n9jw] {
    margin-top: .4rem;
    padding-inline: .75rem;
    color: var(--ht-ink-soft);
    font-family: var(--ht-font-mono);
    font-size: .625rem;
    letter-spacing: .02em;
}

.app-main[b-ktsrb6n9jw] {
    display: grid;
    align-content: start;
    gap: 1.25rem;
    min-width: 0;
    padding: 1.5rem;
}

.main-bar[b-ktsrb6n9jw] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--ht-edge);
}

.main-id[b-ktsrb6n9jw] {
    min-width: 0;
    margin-right: auto;
}

.main-id h3[b-ktsrb6n9jw] {
    color: var(--ht-ink);
    font-family: var(--ht-font-mono);
    font-size: .9375rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.main-id p[b-ktsrb6n9jw] {
    margin-top: .3rem;
    color: var(--ht-ink-muted);
    font-family: var(--ht-font-mono);
    font-size: .6875rem;
    overflow-wrap: anywhere;
}

.main-state[b-ktsrb6n9jw] {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .4rem .6rem;
    border: 1px solid var(--ht-edge);
    border-radius: 6px;
    background: var(--ht-surface-1);
    color: var(--ht-ink-muted);
    font-family: var(--ht-font-mono);
    font-size: .625rem;
    font-weight: 600;
    letter-spacing: .04em;
}

.main-state.is-online[b-ktsrb6n9jw] {
    background: var(--hts-state-online-bg);
    color: var(--hts-state-online);
}

.main-state.is-busy[b-ktsrb6n9jw] {
    background: var(--hts-state-busy-bg);
    color: var(--hts-state-busy);
}

.state-dot[b-ktsrb6n9jw] {
    width: 5px;
    height: 5px;
    flex: none;
    border-radius: 50%;
    background: currentColor;
}

.main-actions[b-ktsrb6n9jw] {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.act[b-ktsrb6n9jw] {
    min-height: 44px;
    padding: .65rem .8rem;
    border: 1px solid var(--ht-edge-strong);
    border-radius: 8px;
    background: var(--ht-surface-1);
    color: var(--ht-ink);
    font-size: .6875rem;
    font-weight: 550;
    transition: border-color 180ms ease, background-color 180ms ease;
}

.act:disabled[b-ktsrb6n9jw] {
    opacity: .45;
    cursor: not-allowed;
}

.act:focus-visible[b-ktsrb6n9jw],
.side-item:focus-visible[b-ktsrb6n9jw] {
    outline: 2px solid var(--ht-accent);
    outline-offset: 3px;
}

.metrics[b-ktsrb6n9jw] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
}

.metric[b-ktsrb6n9jw] {
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--ht-edge);
    border-radius: 10px;
    background: var(--ht-surface-1);
}

.metric-key[b-ktsrb6n9jw] {
    color: var(--ht-ink-muted);
    font-family: var(--ht-font-mono);
    font-size: .625rem;
    letter-spacing: .06em;
}

.metric-value[b-ktsrb6n9jw] {
    margin-top: .5rem;
    color: var(--ht-ink);
    font-family: var(--ht-font-mono);
    font-size: clamp(1.05rem, 1rem + .5vw, 1.5rem);
    font-weight: 580;
    letter-spacing: -.04em;
}

.metric-track[b-ktsrb6n9jw] {
    height: 3px;
    margin-top: .8rem;
    overflow: hidden;
    border-radius: 3px;
    background: var(--ht-edge-strong);
}

.metric-fill[b-ktsrb6n9jw] {
    display: block;
    width: var(--target, 0%);
    height: 100%;
    background: var(--ht-data-500);
    transition: width 240ms ease;
}

.metric-note[b-ktsrb6n9jw] {
    margin-top: .6rem;
    color: var(--ht-ink-muted);
    font-size: .625rem;
    line-height: 1.5;
}

.mods[b-ktsrb6n9jw] {
    overflow: hidden;
    border: 1px solid var(--ht-edge);
    border-radius: 10px;
}

.mods-head[b-ktsrb6n9jw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: 1rem;
    border-bottom: 1px solid var(--ht-edge);
    background: var(--ht-surface-1);
    color: var(--ht-ink-muted);
    font-family: var(--ht-font-mono);
    font-size: .625rem;
    letter-spacing: .04em;
}

.mods-count[b-ktsrb6n9jw] {
    color: var(--ht-ink-soft);
}

.mods ul[b-ktsrb6n9jw] {
    display: grid;
    padding: 0;
    margin: 0;
    list-style: none;
}

.mods li[b-ktsrb6n9jw] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto 5.5rem;
    align-items: center;
    gap: 1rem;
    padding: .9rem 1rem;
    border-bottom: 1px solid var(--ht-edge);
}

.mods li:last-child[b-ktsrb6n9jw] {
    border-bottom: 0;
}

.mods-name[b-ktsrb6n9jw] {
    color: var(--ht-ink);
    font-size: .8125rem;
    overflow-wrap: anywhere;
}

.mods-id[b-ktsrb6n9jw],
.mods-size[b-ktsrb6n9jw] {
    color: var(--ht-ink-muted);
    font-family: var(--ht-font-mono);
    font-size: .625rem;
}

.mods-state[b-ktsrb6n9jw] {
    color: var(--ht-ink-muted);
    font-family: var(--ht-font-mono);
    font-size: .625rem;
    text-align: right;
}

.mods-state.s-synced[b-ktsrb6n9jw] {
    color: var(--hts-state-online);
}

.mods-state.s-syncing[b-ktsrb6n9jw] {
    color: var(--hts-state-busy);
}

.placeholder[b-ktsrb6n9jw] {
    display: grid;
    place-items: center;
    gap: 1rem;
    min-height: 16rem;
    padding: 2rem;
    border: 1px dashed var(--ht-edge-strong);
    border-radius: 10px;
    text-align: center;
}

.placeholder-key[b-ktsrb6n9jw] {
    color: var(--ht-accent);
    font-family: var(--ht-font-mono);
    font-size: .7rem;
    letter-spacing: .08em;
}

.placeholder-copy[b-ktsrb6n9jw] {
    max-width: 24rem;
    color: var(--ht-ink-muted);
    font-size: .9375rem;
    line-height: 1.75;
}

.loading[b-ktsrb6n9jw] {
    padding: 3rem;
    color: var(--ht-ink-muted);
    text-align: center;
}

.cp-note[b-ktsrb6n9jw] {
    max-width: 48rem;
    margin: 1.25rem auto 0;
    color: var(--ht-ink-muted);
    font-size: .75rem;
    line-height: 1.7;
    text-align: center;
}

.app-main[b-ktsrb6n9jw]  .caret {
    animation: none;
    opacity: .65;
}

@media (hover: hover) and (pointer: fine) {
    .side-item:hover[b-ktsrb6n9jw] {
        background: var(--ht-surface-2);
        color: var(--ht-ink);
    }

    .side-item.is-active:hover[b-ktsrb6n9jw] {
        background: var(--ht-accent-soft);
    }

    .act:not(:disabled):hover[b-ktsrb6n9jw] {
        border-color: var(--ht-accent);
        background: var(--ht-accent-soft);
    }
}

@media (max-width: 1100px) {
    .metrics[b-ktsrb6n9jw] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    .cp-head[b-ktsrb6n9jw] {
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
    }

    .cp-lede[b-ktsrb6n9jw] {
        grid-column: 1;
        grid-row: auto;
        max-width: 42rem;
    }

    .app-body[b-ktsrb6n9jw] {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
    }

    .app-side[b-ktsrb6n9jw] {
        flex-direction: row;
        align-items: center;
        gap: .5rem;
        min-width: 0;
        padding: .7rem;
        overflow-x: auto;
        border-right: 0;
        border-bottom: 1px solid var(--ht-edge);
        scrollbar-width: thin;
        scrollbar-color: var(--ht-edge-strong) transparent;
    }

    .app-side .side-key[b-ktsrb6n9jw],
    .side-foot[b-ktsrb6n9jw] {
        display: none;
    }

    .app-side ul[b-ktsrb6n9jw] {
        display: flex;
        gap: .25rem;
    }

    .side-item[b-ktsrb6n9jw] {
        width: auto;
        white-space: nowrap;
    }

    .side-bar[b-ktsrb6n9jw] {
        display: none;
    }

    .mods li[b-ktsrb6n9jw] {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: .5rem;
    }

    .mods-id[b-ktsrb6n9jw] {
        display: none;
    }
}

@media (max-width: 560px) {
    .app[b-ktsrb6n9jw] {
        border-radius: 8px;
    }

    .app-chrome[b-ktsrb6n9jw] {
        gap: .65rem;
        padding-inline: .75rem;
    }

    .chrome-dots[b-ktsrb6n9jw],
    .url-path[b-ktsrb6n9jw] {
        display: none;
    }

    .chrome-url[b-ktsrb6n9jw] {
        justify-content: flex-start;
        margin: 0;
        font-size: .5625rem;
    }

    .app-main[b-ktsrb6n9jw] {
        padding: 1rem;
    }

    .main-actions[b-ktsrb6n9jw] {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .act[b-ktsrb6n9jw] {
        padding-inline: .5rem;
    }

    .metric[b-ktsrb6n9jw] {
        padding: .75rem;
    }

    .metric-value[b-ktsrb6n9jw] {
        font-size: 1rem;
    }

    .mods li[b-ktsrb6n9jw] {
        padding-inline: .75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .side-item[b-ktsrb6n9jw],
    .act[b-ktsrb6n9jw],
    .metric-fill[b-ktsrb6n9jw] {
        transition: none;
    }
}
/* /Components/Home/CustomBuildSection.razor.rz.scp.css */
/* Interactive values stay in Blazor's DOM. Native ranges keep their keyboard and touch behavior. */
.build[b-of9did3zr7] {
    padding-block: clamp(3.5rem, 7vw, 6rem);
    border-top: 1px solid var(--ht-edge-strong);
}

.build-inner[b-of9did3zr7] {
    display: grid;
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
    align-items: start;
    gap: clamp(2rem, 4.5vw, 4rem);
}

.build-copy[b-of9did3zr7] {
    min-width: 0;
}

.build-kicker[b-of9did3zr7] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.3rem;
    color: var(--ht-accent);
    font-family: var(--ht-font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.build-title[b-of9did3zr7] {
    max-width: 22ch;
    color: var(--ht-ink);
    font-size: clamp(2rem, 1.5rem + 2vw, 3.4rem);
    font-weight: 630;
    line-height: 1.14;
    letter-spacing: -0.045em;
    text-wrap: balance;
}

.build-lede[b-of9did3zr7] {
    max-width: 36rem;
    margin-top: 1.4rem;
    color: var(--ht-ink-soft);
    font-size: 1rem;
    line-height: 1.8;
}

.build-ceiling[b-of9did3zr7] {
    max-width: 36rem;
    margin-top: 1.6rem;
    padding-top: 1.3rem;
    border-top: 1px solid var(--ht-edge);
    color: var(--ht-ink-muted);
    font-size: 0.875rem;
    line-height: 1.8;
}

.build-ceiling a[b-of9did3zr7] {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-height: 44px;
    color: var(--ht-accent);
    text-decoration: underline;
    text-underline-offset: 0.25em;
    overflow-wrap: anywhere;
}

/* Two clear zones: request on the left, the actual estimate on the right. */
.build-panel[b-of9did3zr7] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(15rem, 0.85fr);
    align-items: start;
    gap: 1.5rem;
    min-width: 0;
    padding: clamp(1.3rem, 2.5vw, 2rem);
    border: 1px solid var(--ht-edge-strong);
    border-radius: 1.2rem;
    background: var(--ht-surface-1);
}

.build-fields[b-of9did3zr7] {
    display: grid;
    align-content: start;
    gap: 1.4rem;
    min-width: 0;
}

.field[b-of9did3zr7] {
    display: grid;
    gap: 0.5rem;
    min-width: 0;
}

.field label[b-of9did3zr7] {
    color: var(--ht-ink-soft);
    font-size: 0.85rem;
    font-weight: 550;
    line-height: 1.5;
}

.field-row[b-of9did3zr7] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
}

.field-value[b-of9did3zr7] {
    min-width: 4.5ch;
    color: var(--ht-ink);
    font-family: var(--ht-font-mono);
    font-size: 1.1rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.5;
    text-align: right;
    white-space: nowrap;
}

.field-unit[b-of9did3zr7] {
    margin-left: 0.2rem;
    color: var(--ht-ink-muted);
    font-size: 0.75rem;
}

/* Keeping the native range makes its filled track reflect the real value without extra JS. */
.field input[type="range"][b-of9did3zr7] {
    width: 100%;
    min-width: 0;
    height: 44px;
    margin: 0;
    background: transparent;
    accent-color: var(--ht-accent);
    cursor: pointer;
}

.field input[type="range"]:focus-visible[b-of9did3zr7] {
    outline: 2px solid var(--ht-accent);
    outline-offset: 4px;
    border-radius: 0.4rem;
}

.field-input[b-of9did3zr7] {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--ht-edge-strong);
    border-radius: 0.65rem;
    background: var(--ht-surface-2);
    color: var(--ht-ink);
    font-family: inherit;
    font-size: 0.9rem;
    line-height: 1.6;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

.field-input[b-of9did3zr7]::placeholder {
    color: var(--ht-ink-muted);
}

.field-input:focus-visible[b-of9did3zr7] {
    outline: 2px solid var(--ht-accent);
    outline-offset: 3px;
    border-color: var(--ht-accent);
}

.field-textarea[b-of9did3zr7] {
    min-height: 6.5rem;
    resize: vertical;
}

/* An estimate is always readable on first render; numbers never animate or count up. */
.build-quote[b-of9did3zr7] {
    display: grid;
    align-content: start;
    gap: 1rem;
    min-width: 0;
    padding: 1.3rem;
    border: 1px solid var(--ht-edge-strong);
    border-radius: 0.85rem;
    background: var(--ht-surface-2);
}

.quote-label[b-of9did3zr7] {
    color: var(--ht-accent);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.55;
}

.quote-total[b-of9did3zr7] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.4rem;
    color: var(--ht-ink);
    font-size: clamp(2.1rem, 1.7rem + 0.7vw, 2.8rem);
    font-weight: 650;
    letter-spacing: -0.045em;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}

.quote-symbol[b-of9did3zr7] {
    color: var(--ht-ink-soft);
    font-size: 0.5em;
    font-weight: 550;
    letter-spacing: 0;
}

.quote-unit[b-of9did3zr7] {
    color: var(--ht-ink-muted);
    font-size: 0.8rem;
    font-weight: 450;
    letter-spacing: 0;
}

.quote-spec[b-of9did3zr7] {
    display: grid;
    gap: 0.65rem;
    padding-top: 1rem;
    border-top: 1px solid var(--ht-edge);
}

.quote-spec li[b-of9did3zr7] {
    position: relative;
    padding-left: 1.1rem;
    color: var(--ht-ink-soft);
    font-size: 0.8rem;
    line-height: 1.6;
}

.quote-spec li[b-of9did3zr7]::before {
    content: "";
    position: absolute;
    top: 0.48em;
    left: 0;
    width: 0.35rem;
    height: 0.35rem;
    border-radius: 50%;
    background: var(--ht-accent);
}

.quote-periods[b-of9did3zr7] {
    display: grid;
    gap: 0.85rem;
    padding-top: 1rem;
    border-top: 1px solid var(--ht-edge);
}

.quote-periods li[b-of9did3zr7] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.35rem 0.75rem;
    min-width: 0;
}

.period-name[b-of9did3zr7] {
    grid-column: 1;
    grid-row: 1;
    color: var(--ht-ink-soft);
    font-size: 0.8rem;
    line-height: 1.55;
}

.period-save[b-of9did3zr7] {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    padding: 0.1rem 0.35rem;
    border-radius: 0.3rem;
    background: var(--ht-accent-soft);
    color: var(--ht-accent);
    font-family: var(--ht-font-mono);
    font-size: 0.7rem;
    line-height: 1.45;
}

.period-total[b-of9did3zr7] {
    grid-column: 2;
    grid-row: 1 / 3;
    color: var(--ht-ink);
    font-family: var(--ht-font-mono);
    font-size: 0.875rem;
    font-weight: 550;
    font-variant-numeric: tabular-nums;
    line-height: 1.6;
    white-space: nowrap;
}

.quote-compare[b-of9did3zr7],
.quote-note[b-of9did3zr7],
.quote-send-note[b-of9did3zr7],
.quote-unavailable[b-of9did3zr7] {
    color: var(--ht-ink-muted);
    font-size: 0.8rem;
    line-height: 1.75;
}

.quote-compare[b-of9did3zr7] {
    padding-top: 1rem;
    border-top: 1px solid var(--ht-edge);
}

.quote-unavailable[b-of9did3zr7] {
    color: var(--ht-ink-soft);
    font-size: 0.9rem;
}

.quote-send[b-of9did3zr7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    width: 100%;
    min-height: 48px;
    padding: 0.75rem 1rem;
    border: 1px solid transparent;
    border-radius: 0.65rem;
    background: var(--ht-accent);
    color: var(--ht-accent-ink);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    transition: background-color 180ms ease, box-shadow 180ms ease;
}

.quote-send[b-of9did3zr7]  .hts-icon {
    width: 1em;
    height: 1em;
    flex: none;
}

.quote-send:hover[b-of9did3zr7] {
    background: color-mix(in srgb, var(--ht-accent) 90%, var(--ht-ink));
    box-shadow: var(--ht-shadow-2);
}

.quote-send:focus-visible[b-of9did3zr7],
.build-ceiling a:focus-visible[b-of9did3zr7] {
    outline: 2px solid var(--ht-accent);
    outline-offset: 4px;
}

@media (max-width: 1180px) {
    .build-inner[b-of9did3zr7] {
        grid-template-columns: minmax(0, 1fr);
        gap: 2rem;
    }

    .build-copy[b-of9did3zr7] {
        max-width: 52rem;
    }

    .build-title[b-of9did3zr7] {
        max-width: 26ch;
    }
}

@media (max-width: 760px) {
    .build-panel[b-of9did3zr7] {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.5rem;
    }

    .build-quote[b-of9did3zr7] {
        padding: 1.3rem;
    }
}

@media (max-width: 400px) {
    .build-panel[b-of9did3zr7] {
        padding: 1rem;
    }

    .build-quote[b-of9did3zr7] {
        padding: 1rem;
    }

    .field-row[b-of9did3zr7] {
        gap: 0.75rem;
    }

    .field-value[b-of9did3zr7] {
        font-size: 1rem;
    }

    .quote-total[b-of9did3zr7] {
        font-size: 2.2rem;
    }

    .period-total[b-of9did3zr7] {
        font-size: 0.8rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .field-input[b-of9did3zr7],
    .quote-send[b-of9did3zr7] {
        transition: none;
    }
}
/* /Components/Home/FaqSection.razor.rz.scp.css */
.faq-section[b-op3jmkd8dj] {
    position: relative;
    padding-block: clamp(4rem, 7vw, 7rem);
    background: var(--ht-ground);
}

.faq-inner[b-op3jmkd8dj] {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    align-items: start;
    gap: clamp(2.5rem, 6vw, 5rem);
}

.faq-aside[b-op3jmkd8dj] {
    position: sticky;
    top: calc(var(--ht-header-h) + 2rem);
}

.faq-kicker[b-op3jmkd8dj] {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.2rem;
    color: var(--ht-ink-muted);
    font-family: var(--ht-font-mono);
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.faq-title[b-op3jmkd8dj] {
    color: var(--ht-ink);
    font-size: clamp(2rem, 4vw, 3.4rem);
    font-weight: 550;
    line-height: 1.1;
    letter-spacing: -.045em;
}

.faq-accent[b-op3jmkd8dj] {
    color: var(--ht-accent);
    font-weight: 650;
}

.faq-note[b-op3jmkd8dj] {
    max-width: 27rem;
    margin-block: 1.5rem 1.75rem;
    color: var(--ht-ink-soft);
    font-size: 1rem;
    line-height: 1.8;
}

.faq[b-op3jmkd8dj] {
    display: grid;
    gap: .75rem;
    min-width: 0;
}

.faq-item[b-op3jmkd8dj] {
    border: 1px solid var(--ht-edge-strong);
    border-radius: 12px;
    background: var(--ht-surface-1);
    transition: border-color 200ms ease, background-color 200ms ease;
}

.faq-item.is-open[b-op3jmkd8dj] {
    border-color: color-mix(in srgb, var(--ht-accent) 40%, var(--ht-edge));
    background: var(--ht-accent-soft);
}

.faq-heading[b-op3jmkd8dj] {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: normal;
}

.faq-question[b-op3jmkd8dj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    min-height: 64px;
    padding: 1.25rem 1.5rem;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: var(--ht-ink);
    font-size: 1rem;
    font-weight: 570;
    line-height: 1.5;
    letter-spacing: -.015em;
    text-align: left;
}

.faq-text[b-op3jmkd8dj] {
    min-width: 0;
}

.faq-question:focus-visible[b-op3jmkd8dj] {
    outline: 2px solid var(--ht-accent);
    outline-offset: 3px;
}

.faq-sign[b-op3jmkd8dj] {
    position: relative;
    display: block;
    width: 24px;
    height: 24px;
    flex: none;
    border: 1px solid var(--ht-edge-strong);
    border-radius: 6px;
    background: var(--ht-ground);
    color: var(--ht-ink-muted);
}

.faq-sign[b-op3jmkd8dj]::before,
.faq-sign[b-op3jmkd8dj]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 6px;
    width: 10px;
    height: 1px;
    background: currentColor;
    transform: translateY(-50%);
    transition: transform 200ms ease;
}

.faq-sign[b-op3jmkd8dj]::after {
    transform: translateY(-50%) rotate(90deg);
}

.faq-item.is-open .faq-sign[b-op3jmkd8dj] {
    color: var(--ht-accent);
}

.faq-item.is-open .faq-sign[b-op3jmkd8dj]::after {
    transform: translateY(-50%) rotate(0);
}

.faq-answer[b-op3jmkd8dj] {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 220ms ease;
}

.faq-answer-inner[b-op3jmkd8dj] {
    min-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: visibility 0s linear 220ms;
}

.faq-item.is-open .faq-answer[b-op3jmkd8dj] {
    grid-template-rows: 1fr;
}

.faq-item.is-open .faq-answer-inner[b-op3jmkd8dj] {
    visibility: visible;
    transition-delay: 0s;
}

.faq-answer-inner p[b-op3jmkd8dj] {
    max-width: 45rem;
    margin: 0;
    padding: 0 1.5rem 1.5rem;
    color: var(--ht-ink-soft);
    font-size: .9375rem;
    line-height: 1.85;
}

@media (hover: hover) and (pointer: fine) {
    .faq-item:hover[b-op3jmkd8dj] {
        border-color: var(--ht-ink-faint);
    }

    .faq-item.is-open:hover[b-op3jmkd8dj] {
        border-color: color-mix(in srgb, var(--ht-accent) 45%, var(--ht-edge));
    }
}

@media (max-width: 1024px) {
    .faq-inner[b-op3jmkd8dj] {
        grid-template-columns: minmax(0, 1fr);
    }

    .faq-aside[b-op3jmkd8dj] {
        position: static;
        max-width: 42rem;
    }
}

@media (max-width: 560px) {
    .faq-question[b-op3jmkd8dj] {
        padding: 1.1rem;
        font-size: .9375rem;
    }

    .faq-answer-inner p[b-op3jmkd8dj] {
        padding: 0 1.1rem 1.25rem;
        font-size: .875rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .faq-item[b-op3jmkd8dj],
    .faq-sign[b-op3jmkd8dj]::before,
    .faq-sign[b-op3jmkd8dj]::after,
    .faq-answer[b-op3jmkd8dj],
    .faq-answer-inner[b-op3jmkd8dj] {
        transition: none;
    }
}
/* /Components/Home/GameGateway.razor.rz.scp.css */
/* Product rows hold their geometry: focus changes the edge and image crop, never column width. */
.gateway[b-ddiyidpbi3] { padding-block: clamp(3.5rem, 6vw, 5.5rem); border-top: 1px solid var(--ht-edge); }
.gateway-head[b-ddiyidpbi3] { display: grid; grid-template-columns: 1.2fr 1fr; align-items: end; gap: 3rem; margin-bottom: 2rem; }
.gateway-head .storefront-title[b-ddiyidpbi3] { max-width: 24ch; font-size: clamp(2rem, 1.6rem + 2vw, 3rem); }
.gateway-head .storefront-copy[b-ddiyidpbi3] { max-width: 28rem; justify-self: end; font-size: 1rem; line-height: 1.75; }
.game-grid[b-ddiyidpbi3] { display: grid; gap: 1.25rem; }
.game-card[b-ddiyidpbi3] { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); min-width: 0; overflow: hidden; border: 1px solid var(--ht-edge-strong); border-radius: 8px; background: var(--ht-surface-1); transition: opacity 260ms ease, transform 260ms ease, border-color 180ms ease; }
.game-card--planned[b-ddiyidpbi3] { grid-template-columns: minmax(0, .55fr) minmax(0, 1.45fr); background: transparent; }
.game-art[b-ddiyidpbi3] { min-height: 20rem; overflow: hidden; background: #111318; }
.game-card--planned .game-art[b-ddiyidpbi3] { min-height: 14rem; }
.game-art[b-ddiyidpbi3]  .cover { height: 100%; width: 100%; aspect-ratio: auto; border: 0; border-radius: 0; }
.game-art[b-ddiyidpbi3]  .cover-banner { transition: transform 450ms var(--ht-ease-out); }
.game-art[b-ddiyidpbi3]  .cover-foot { min-height: 42px; }
.game-details[b-ddiyidpbi3] { display: flex; flex-direction: column; min-width: 0; padding: clamp(1.4rem, 3vw, 2.3rem); }
.game-category[b-ddiyidpbi3] { color: var(--ht-ink-muted); font-size: .875rem; line-height: 1.65; }
.game-title-row[b-ddiyidpbi3] { margin-top: .65rem; }
.game-title-row h3[b-ddiyidpbi3] { color: var(--ht-ink); font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem); font-weight: 640; letter-spacing: -.035em; line-height: 1.2; }
.game-description[b-ddiyidpbi3] { max-width: 44rem; margin-top: 1rem; color: var(--ht-ink-soft); font-size: .9375rem; line-height: 1.8; }
.game-bottom[b-ddiyidpbi3] { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.3rem; margin-top: auto; padding-top: 1.5rem; }
.game-from > span[b-ddiyidpbi3] { color: var(--ht-ink-muted); font-size: .75rem; line-height: 1.5; }
.game-from strong[b-ddiyidpbi3] { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; margin-top: .25rem; color: var(--ht-ink); font-size: 1.8rem; font-weight: 640; letter-spacing: -.035em; }
.game-from small[b-ddiyidpbi3] { color: var(--ht-ink-muted); font-size: .8125rem; font-weight: 400; letter-spacing: 0; }
.game-from .unpriced[b-ddiyidpbi3] { font-size: .9375rem; }
.game-from p[b-ddiyidpbi3] { margin-top: .45rem; color: var(--ht-ink-muted); font-size: .75rem; line-height: 1.6; }
.game-bottom .hts-text-link[b-ddiyidpbi3] { min-height: 44px; font-size: .9375rem; }
.gateway-foot[b-ddiyidpbi3] { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem 2rem; padding-top: 1.3rem; }
.gateway-foot > a[b-ddiyidpbi3] { display: inline-flex; align-items: center; min-height: 44px; color: var(--ht-ink-muted); font-size: .875rem; line-height: 1.65; }
.gateway-foot > a:hover[b-ddiyidpbi3], .gateway-foot > a:focus-visible[b-ddiyidpbi3] { color: var(--ht-accent); }
.game-card:focus-within[b-ddiyidpbi3] { border-color: var(--ht-accent); }
.game-card:focus-within .game-art[b-ddiyidpbi3]  .cover-banner { transform: scale(1.02); }
@media (hover:hover) and (pointer:fine) { .game-card:hover[b-ddiyidpbi3] { border-color: var(--ht-accent); } .game-card:hover .game-art[b-ddiyidpbi3]  .cover-banner { transform: scale(1.02); } }
@media (max-width:800px) { .gateway-head[b-ddiyidpbi3] { grid-template-columns: 1fr; gap: 1.3rem; } .gateway-head .storefront-copy[b-ddiyidpbi3] { justify-self: start; } .game-card[b-ddiyidpbi3], .game-card--planned[b-ddiyidpbi3] { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } }
@media (max-width:650px) { .game-card[b-ddiyidpbi3], .game-card--planned[b-ddiyidpbi3] { grid-template-columns: minmax(0, 1fr); } .game-art[b-ddiyidpbi3] { height: 14rem; min-height: 0; } .game-card--planned .game-art[b-ddiyidpbi3] { height: 11rem; min-height: 0; } .game-bottom[b-ddiyidpbi3] { align-items: start; } .gateway-foot[b-ddiyidpbi3] { align-items: start; flex-direction: column; gap: .3rem; } }
@media (max-width:380px) { .game-details[b-ddiyidpbi3] { padding: 1.2rem; } .game-bottom[b-ddiyidpbi3]  .cta { width: 100%; justify-content: space-between; } }
@media (prefers-reduced-motion:reduce) { .game-card[b-ddiyidpbi3], .game-art[b-ddiyidpbi3]  .cover-banner { transition: none; } .game-card:hover .game-art[b-ddiyidpbi3]  .cover-banner, .game-card:focus-within .game-art[b-ddiyidpbi3]  .cover-banner { transform: none; } }
/* /Components/Home/HeroExperience.razor.rz.scp.css */
/* The large HTS mark anchors the centered opening without obscuring its heading. */
.hero[b-vk57temjtm] { padding-block: clamp(1.5rem, 3vw, 2.8rem) 3.5rem; }
.hero-inner[b-vk57temjtm] { display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; }
.hero-kicker[b-vk57temjtm] { display: flex; align-items: center; justify-content: center; gap: .8rem; color: var(--ht-ink-muted); font-family: var(--ht-font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .5rem; }
.hero-wordmark-shell[b-vk57temjtm] { width: min(820px, 100%); height: clamp(180px, 25vw, 300px); margin-bottom: 1rem; }
.hero-wordmark-shell[b-vk57temjtm]  .hero-wordmark { width: 100%; height: 100%; max-width: none; }
.kicker-line[b-vk57temjtm] { width: 24px; height: 1px; background: var(--ht-accent); }
.hero-title[b-vk57temjtm] { max-width: 64rem; font-size: clamp(2.35rem, 4.2vw, 3.8rem); letter-spacing: -.045em; font-weight: 580; line-height: 1.12; text-wrap: balance; }
.hero-accent[b-vk57temjtm] { color: var(--ht-accent); }
.hero-lede[b-vk57temjtm] { max-width: 38rem; font-size: 1.05rem; line-height: 1.75; color: var(--ht-ink-soft); margin-top: 1.6rem; text-wrap: pretty; }
.hero-actions[b-vk57temjtm] { display: flex; justify-content: center; gap: .8rem; align-items: center; flex-wrap: wrap; margin-top: 2rem; }
.hero-note[b-vk57temjtm] { color: var(--ht-ink-muted); font-size: .8rem; line-height: 1.65; margin-top: 1rem; max-width: 35rem; }
.hero-infrastructure[b-vk57temjtm] { margin-top: 1.5rem; color: var(--ht-ink-soft); font-size: .85rem; }
@media (max-width: 600px) {
    .hero[b-vk57temjtm] { padding-block: 1.6rem 2.8rem; }
    .hero-kicker[b-vk57temjtm] { margin-bottom: .3rem; font-size: .65rem; letter-spacing: .06em; }
    .hero-wordmark-shell[b-vk57temjtm] { height: clamp(145px, 38vw, 215px); margin-bottom: 1.2rem; }
    .hero-title[b-vk57temjtm] { font-size: clamp(2rem, 7.5vw, 2.8rem); }
    .hero-lede[b-vk57temjtm] { font-size: .95rem; margin-top: 1.3rem; }
    .hero-actions[b-vk57temjtm] { width: 100%; gap: .7rem; margin-top: 1.5rem; }
    .hero-actions[b-vk57temjtm]  .cta { justify-content: center; min-width: 0; }
    .hero-note[b-vk57temjtm] { font-size: .75rem; }
    .hero-infrastructure[b-vk57temjtm] { margin-top: 1rem; }
}
@media (max-width: 420px) { .hero-actions[b-vk57temjtm] { flex-direction: column; } .hero-actions[b-vk57temjtm]  .cta { width: 100%; max-width: 22rem; } }
/* /Components/Home/HeroPanel.razor.rz.scp.css */
/*
    One face, divided by hairlines. Not a stack of cards.

    The only two colours in here are the lamp and the meter, and each of them is carrying its
    meaning rather than decorating: purple says the thing is running, blue says the thing was
    measured. Everything else is graphite and mono.
*/

.panel[b-dkjo7jvhfs] {
    position: relative;
    display: grid;
    margin: 0;
    border: 1px solid var(--ht-edge-strong);
    border-radius: var(--ht-radius-md);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.028) 0%, transparent 34%),
        var(--ht-surface-2);
    box-shadow: var(--ht-rim), var(--ht-shadow-3);
    overflow: hidden;
}

/* -- Head ---------------------------------------------------------------------------------- */

.panel-head[b-dkjo7jvhfs] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--ht-space-3);
    padding: var(--ht-space-4) var(--ht-space-5);
    border-bottom: 1px solid var(--ht-edge);
    background: var(--ht-surface-inset);
}

/*
    The lamp. The one continuously animated thing in the hero, and it earns it: a status light
    that does not move does not read as a status light. It breathes rather than blinks, because
    blinking means a fault everywhere else in the building.
*/
.panel-lamp[b-dkjo7jvhfs] {
    width: 7px;
    height: 7px;
    flex: none;
    border-radius: 50%;
    background: var(--ht-live-500);
    box-shadow: var(--ht-lamp-live);
    animation: panel-breathe-b-dkjo7jvhfs 3.6s var(--ht-ease-in-out) infinite;
}

@keyframes panel-breathe-b-dkjo7jvhfs {
    0%, 100% {
        opacity: 1;
    }

    52% {
        opacity: 0.42;
    }
}

.panel-id[b-dkjo7jvhfs] {
    color: var(--ht-ink);
    font-family: var(--ht-font-mono);
    font-size: var(--ht-text-sm);
    font-weight: 600;
    letter-spacing: var(--ht-track-mono);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.panel-state[b-dkjo7jvhfs] {
    color: var(--ht-live-400);
    font-family: var(--ht-font-mono);
    font-size: var(--ht-text-2xs);
    font-weight: 600;
    letter-spacing: var(--ht-track-label);
    text-transform: uppercase;
    white-space: nowrap;
}

/* -- Rows ---------------------------------------------------------------------------------- */

.panel-rows[b-dkjo7jvhfs] {
    display: grid;
    margin: 0;
}

.row[b-dkjo7jvhfs] {
    display: grid;
    grid-template-columns: minmax(6.5rem, 0.85fr) minmax(0, 1.5fr) auto;
    align-items: center;
    gap: var(--ht-space-4);
    padding: var(--ht-space-4) var(--ht-space-5);
    min-width: 0;
}

.row + .row[b-dkjo7jvhfs] {
    border-top: 1px solid var(--ht-edge);
}

.row-key[b-dkjo7jvhfs] {
    color: var(--ht-ink-muted);
    font-family: var(--ht-font-mono);
    font-size: var(--ht-text-2xs);
    font-weight: 600;
    letter-spacing: var(--ht-track-label);
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.row-value[b-dkjo7jvhfs] {
    margin: 0;
    color: var(--ht-ink);
    font-family: var(--ht-font-mono);
    font-size: var(--ht-text-sm);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--ht-track-mono);
    text-align: right;
    white-space: nowrap;
}

.row-meter[b-dkjo7jvhfs] {
    height: 3px;
    border-radius: 1px;
    background: var(--ht-surface-inset);
    box-shadow: inset 0 0 0 1px var(--ht-edge);
    overflow: hidden;
}

.row-fill[b-dkjo7jvhfs] {
    display: block;
    width: var(--fill);
    height: 100%;
    border-radius: inherit;
    background: var(--ht-data-500);
    transform-origin: left center;
}

/* Where a reading has no denominator, the column holds a rule instead of a bar. The row keeps
   its rhythm and nothing pretends to have been measured against a scale. */
.row-rule[b-dkjo7jvhfs] {
    height: 1px;
    background: var(--ht-edge);
}

/* -- Foot ---------------------------------------------------------------------------------- */

.panel-foot[b-dkjo7jvhfs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ht-space-4);
    padding: var(--ht-space-3) var(--ht-space-5);
    border-top: 1px solid var(--ht-edge);
    background: var(--ht-surface-inset);
    color: var(--ht-ink-muted);
    font-family: var(--ht-font-mono);
    font-size: var(--ht-text-2xs);
    font-weight: 600;
    letter-spacing: var(--ht-track-label);
    text-transform: uppercase;
}

.foot-title[b-dkjo7jvhfs] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.foot-build[b-dkjo7jvhfs] {
    color: var(--ht-ink-soft);
    white-space: nowrap;
}

/* -- Entrance -----------------------------------------------------------------------------
   The meter runs out to its value once, on arrival, and then stops. A transform rather than a
   width so it stays on the compositor, and a transition off a class rather than a loop so it
   is an event rather than an ornament. */

html.hts-js .panel[data-reveal] .row-fill[b-dkjo7jvhfs] {
    transform: scaleX(0);
    transition: transform var(--ht-dur-5) var(--ht-ease-lock) 260ms;
}

html.hts-js .panel[data-reveal].is-revealed .row-fill[b-dkjo7jvhfs] {
    transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
    .panel-lamp[b-dkjo7jvhfs] {
        animation: none;
    }

    html.hts-js .panel[data-reveal] .row-fill[b-dkjo7jvhfs] {
        transform: scaleX(1);
        transition: none;
    }
}

@media (max-width: 560px) {
    /* The bar is the first thing to go: the label and the figure carry the meaning without it. */
    .row[b-dkjo7jvhfs] {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .row-meter[b-dkjo7jvhfs],
    .row-rule[b-dkjo7jvhfs] {
        display: none;
    }
}
/* /Components/Home/HostingBenefits.razor.rz.scp.css */
/* Concise capabilities, separated by rules rather than decorative diagrams. */
.benefits[b-uf6zmt2bab] { padding-block: clamp(3.5rem, 6vw, 5.5rem); }
.benefits-head[b-uf6zmt2bab] { display: grid; grid-template-columns: 1.2fr 1fr; align-items: end; gap: 3rem; margin-bottom: 2rem; }
.benefits-head .storefront-title[b-uf6zmt2bab] { max-width: 23ch; font-size: clamp(2rem, 1.6rem + 2vw, 3rem); }
.benefits-head .storefront-copy[b-uf6zmt2bab] { max-width: 29rem; justify-self: end; font-size: 1rem; line-height: 1.75; }
.benefits-grid[b-uf6zmt2bab] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.benefit[b-uf6zmt2bab] { display: flex; flex-direction: column; min-width: 0; padding-block: 1.5rem; border-top: 1px solid var(--ht-edge-strong); transition: opacity 260ms ease, transform 260ms ease, border-color 180ms ease; }
.benefit-top[b-uf6zmt2bab] { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.5rem; color: var(--ht-accent); }
.benefit-top[b-uf6zmt2bab]  .hts-icon { width: 22px; height: 22px; flex: none; }
.benefit-top > span[b-uf6zmt2bab] { color: var(--ht-ink-muted); font-family: var(--ht-font-mono); font-size: .75rem; line-height: 1.6; letter-spacing: .02em; }
.benefit h3[b-uf6zmt2bab] { max-width: 24ch; color: var(--ht-ink); font-size: clamp(1.4rem, 1.2rem + .65vw, 1.8rem); font-weight: 640; line-height: 1.3; letter-spacing: -.025em; }
.benefit > p[b-uf6zmt2bab] { margin-top: 1rem; color: var(--ht-ink-soft); font-size: .9375rem; line-height: 1.8; }
.benefit > .hts-text-link[b-uf6zmt2bab] { min-height: 44px; margin-top: auto; padding-top: 1.1rem; font-size: .9375rem; }
.benefit-detail[b-uf6zmt2bab] { display: flex; align-items: center; gap: .6rem; margin-top: auto; padding-top: 1.5rem; color: var(--ht-ink-muted); font-family: var(--ht-font-mono); font-size: .75rem; line-height: 1.6; }
.detail-rule[b-uf6zmt2bab] { width: 18px; height: 1px; flex: none; background: var(--ht-accent); }
.benefit:focus-within[b-uf6zmt2bab] { border-color: var(--ht-accent); }

@media (hover:hover) and (pointer:fine) { .benefit:hover[b-uf6zmt2bab] { border-color: var(--ht-accent); }  }
@media (max-width:900px) { .benefits-head[b-uf6zmt2bab] { grid-template-columns: 1fr; gap: 1.3rem; } .benefits-head .storefront-copy[b-uf6zmt2bab] { justify-self: start; } .benefits-grid[b-uf6zmt2bab] { grid-template-columns: 1fr; gap: .5rem; } .benefit > p[b-uf6zmt2bab] { max-width: 50rem; } }
@media (prefers-reduced-motion:reduce) { .benefit[b-uf6zmt2bab] { transition: none; } }
/* /Components/Home/InfrastructureProof.razor.rz.scp.css */
/* Evidence is the photograph and the service-backed spec sheet, without ornamental badges. */
.proof[b-o7qiuyijym] { padding-block: clamp(3.5rem, 6vw, 5.5rem); border-top: 1px solid var(--ht-edge-strong); }
.proof-grid[b-o7qiuyijym] { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); }
.proof-visual[b-o7qiuyijym] { position: relative; min-width: 0; }
.proof-visual[b-o7qiuyijym]  .hts-plate { margin: 0; }
.proof-visual[b-o7qiuyijym]  .hts-plate-frame { border: 1px solid var(--ht-edge-strong); border-radius: 8px; }
.proof-visual[b-o7qiuyijym]  .hts-plate-caption { display: none; }
.proof-visual[b-o7qiuyijym]  .hts-plate-image { transition: transform 450ms var(--ht-ease-out); }
.proof-caption[b-o7qiuyijym] { padding-top: .85rem; color: var(--ht-ink-muted); font-size: .8125rem; line-height: 1.7; }
.proof-copy[b-o7qiuyijym] { min-width: 0; }
.proof-copy .storefront-title[b-o7qiuyijym] { max-width: 22ch; font-size: clamp(2rem, 1.6rem + 2vw, 3rem); }
.proof-copy .storefront-copy[b-o7qiuyijym] { max-width: 34rem; margin-top: 1.3rem; font-size: 1rem; line-height: 1.8; }
.proof-specs[b-o7qiuyijym] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-block: 1.8rem 1rem; border-top: 1px solid var(--ht-edge-strong); transition: opacity 260ms ease, transform 260ms ease; }
.proof-specs > div[b-o7qiuyijym] { min-width: 0; padding: 1rem 1rem 1rem 0; border-bottom: 1px solid var(--ht-edge); }
.proof-specs dt[b-o7qiuyijym] { margin-bottom: .55rem; color: var(--ht-ink-muted); font-size: .8125rem; line-height: 1.6; }
.proof-specs dd[b-o7qiuyijym] { margin: 0; color: var(--ht-ink); font-size: 1rem; font-weight: 600; line-height: 1.6; letter-spacing: -.015em; overflow-wrap: anywhere; }
.proof-copy > .hts-text-link[b-o7qiuyijym] { min-height: 44px; font-size: .9375rem; }
@media (hover:hover) and (pointer:fine) { .proof-visual:hover[b-o7qiuyijym]  .hts-plate-image { transform: scale(1.02); } }
@media (max-width:800px) { .proof-grid[b-o7qiuyijym] { grid-template-columns: 1fr; gap: 2rem; } .proof-visual[b-o7qiuyijym] { max-width: 34rem; } .proof-visual[b-o7qiuyijym]  .hts-plate-frame { aspect-ratio: 4/3 !important; } }
@media (max-width:380px) { .proof-specs[b-o7qiuyijym] { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion:reduce) { .proof-specs[b-o7qiuyijym], .proof-visual[b-o7qiuyijym]  .hts-plate-image { transition: none; } .proof-visual:hover[b-o7qiuyijym]  .hts-plate-image { transform: none; } }
/* /Components/Home/NodesSection.razor.rz.scp.css */
.nodes[b-fk1hzk3su4] {
    position: relative;
    padding-block: clamp(5rem, 9vw, 9rem);
}

.nodes-head[b-fk1hzk3su4] {
    max-width: 46rem;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.nodes-kicker[b-fk1hzk3su4] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: var(--hts-space-6);
    color: var(--ht-ink-muted);
    font-family: var(--hts-font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.2em;
}

.nodes-title[b-fk1hzk3su4] {
    font-size: clamp(2.2rem, 1.3rem + 3.2vw, 3.6rem);
    font-weight: 460;
    line-height: 1.04;
    letter-spacing: -0.03em;
}

/* Emphasis by weight, not by colour. A purple word in a headline is decoration; it
   also spends the one hue that means "running" everywhere else on the site. */
.nodes-accent[b-fk1hzk3su4] {
    font-weight: 800;
}

.nodes-lede[b-fk1hzk3su4] {
    max-width: 34rem;
    margin-top: var(--hts-space-5);
    color: var(--hts-ink-soft);
    font-size: var(--hts-text-lg);
    line-height: var(--hts-leading-relaxed);
}

/* ── Bus the panels hang from ──────────────────────────────────────────── */

.bus[b-fk1hzk3su4] {
    display: flex;
    align-items: center;
    gap: var(--hts-space-4);
    margin-bottom: 0;
}

.bus-line[b-fk1hzk3su4] {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(176, 105, 255, 0.5), transparent);
}

.bus-label[b-fk1hzk3su4] {
    color: var(--hts-purple-300);
    font-family: var(--hts-font-mono);
    font-size: 0.5625rem;
    letter-spacing: 0.22em;
    white-space: nowrap;
}

/* ── Node panels ───────────────────────────────────────────────────────── */

/* ── Rack plate ────────────────────────────────────────────────────────── */

.nodes-plate[b-fk1hzk3su4] {
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.plate-readout[b-fk1hzk3su4] {
    display: grid;
    gap: 0.7rem;
}

.readout-key[b-fk1hzk3su4] {
    color: var(--hts-blue-300);
    font-family: var(--hts-font-mono);
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.24em;
}

.readout-nodes[b-fk1hzk3su4] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.75rem;
}

.readout-nodes li[b-fk1hzk3su4] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.readout-dot[b-fk1hzk3su4] {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: var(--hts-blue-300);
    box-shadow: var(--ht-lamp-data);
}

.readout-id[b-fk1hzk3su4] {
    color: var(--hts-white);
    font-family: var(--hts-font-mono);
    font-size: var(--hts-text-sm);
    font-weight: 640;
    letter-spacing: 0.12em;
}

.readout-state[b-fk1hzk3su4] {
    color: var(--ht-ink-muted);
    font-family: var(--hts-font-mono);
    font-size: 0.5rem;
    letter-spacing: 0.18em;
}

.node-grid[b-fk1hzk3su4] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
    gap: clamp(var(--hts-space-5), 4vw, var(--hts-space-8));
}

.node-panel[b-fk1hzk3su4] {
    position: relative;
    display: grid;
    align-content: start;
    gap: var(--hts-space-4);
    margin-top: 2.5rem;
    padding: var(--hts-space-6);
    border: 1px solid var(--hts-border-strong);
    border-radius: var(--hts-radius-md);
    background: var(--hts-surface);
    box-shadow: var(--hts-rim);
}

/* Drop line joining each panel back up to the bus. */
.node-drop[b-fk1hzk3su4] {
    position: absolute;
    top: -2.5rem;
    left: 2rem;
    width: 1px;
    height: 2.5rem;
    background: linear-gradient(180deg, rgba(131, 168, 243, 0.5), rgba(131, 168, 243, 0.35));
}

.node-drop[b-fk1hzk3su4]::after {
    content: "";
    position: absolute;
    bottom: -3px;
    left: -2px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--hts-blue-400);
    box-shadow: var(--ht-lamp-data);
}

.node-panel.is-reserved .node-drop[b-fk1hzk3su4] {
    background: var(--hts-rule);
}

.node-panel.is-reserved .node-drop[b-fk1hzk3su4]::after {
    background: var(--hts-muted-mark);
    box-shadow: none;
}

.node-top[b-fk1hzk3su4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hts-space-3);
}

.node-id[b-fk1hzk3su4] {
    color: var(--hts-ink);
    font-family: var(--hts-font-mono);
    font-size: var(--hts-text-md);
    font-weight: 600;
    letter-spacing: 0.1em;
}

.node-health[b-fk1hzk3su4] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--hts-font-mono);
    font-size: 0.5rem;
    letter-spacing: 0.18em;
}

.health-dot[b-fk1hzk3su4] {
    width: 0.35rem;
    height: 0.35rem;
    border-radius: 50%;
    background: currentColor;
}

.is-healthy .node-health[b-fk1hzk3su4] {
    color: var(--hts-blue-300);
}

.is-healthy .health-dot[b-fk1hzk3su4] {
    box-shadow: var(--ht-lamp-data);
}

.is-provisioning .node-health[b-fk1hzk3su4] {
    color: var(--hts-purple-300);
}

.is-reserved .node-health[b-fk1hzk3su4] {
    color: var(--hts-ink-muted);
}

.node-region[b-fk1hzk3su4] {
    color: var(--hts-ink-muted);
    font-family: var(--hts-font-mono);
    font-size: 0.5625rem;
    letter-spacing: 0.2em;
}

.node-specs[b-fk1hzk3su4] {
    display: grid;
    gap: var(--hts-space-3);
    padding-block: var(--hts-space-4);
    border-block: 1px solid var(--hts-border);
}

.node-specs > div[b-fk1hzk3su4] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--hts-space-3);
}

.node-specs dt[b-fk1hzk3su4] {
    color: var(--hts-ink-muted);
    font-family: var(--hts-font-mono);
    font-size: 0.5625rem;
    letter-spacing: 0.16em;
}

.node-specs dd[b-fk1hzk3su4] {
    color: var(--hts-ink-soft);
    font-size: var(--hts-text-base);
    text-align: right;
}

.load-head[b-fk1hzk3su4] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    color: var(--hts-ink-muted);
    font-family: var(--hts-font-mono);
    font-size: 0.5625rem;
    letter-spacing: 0.18em;
}

.load-value[b-fk1hzk3su4] {
    color: var(--hts-ink);
    font-size: var(--hts-text-sm);
}

.load-track[b-fk1hzk3su4] {
    height: 4px;
    margin-top: 0.5rem;
    border-radius: 1px;
    background: var(--hts-track);
    overflow: hidden;
}

.load-fill[b-fk1hzk3su4] {
    display: block;
    width: var(--target, 0%);
    height: 100%;
    background: var(--hts-blue-500);
    transform-origin: left center;
}

.node-panel.is-revealed .load-fill[b-fk1hzk3su4] {
    animation: load-fill-b-fk1hzk3su4 900ms var(--hts-ease-out) 200ms forwards;
}

.node-panel.is-reserved .load-fill[b-fk1hzk3su4] {
    background: var(--hts-muted-mark);
}

/* Zeroed start state only when the reveal observer is actually running, so the
   bar still shows its real width if JavaScript never loads. */
html.hts-js .load-fill[b-fk1hzk3su4] {
    transform: scaleX(0);
}

@keyframes load-fill-b-fk1hzk3su4 {
    to {
        transform: scaleX(1);
    }
}

.load-note[b-fk1hzk3su4] {
    margin-top: 0.5rem;
    color: var(--hts-ink-muted);
    font-size: var(--hts-text-xs);
}

/* The disclaimer and the way through to the full infrastructure page share a line, so the
   section ends on an action rather than on a caveat. */
.nodes-foot[b-fk1hzk3su4] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--hts-space-5);
    margin-top: var(--hts-space-8);
    padding-top: var(--hts-space-6);
    border-top: 1px solid var(--hts-border);
}

.nodes-note[b-fk1hzk3su4] {
    max-width: 42rem;
    color: var(--hts-ink-muted);
    font-size: var(--hts-text-sm);
}

@media (max-width: 900px) {
    .node-grid[b-fk1hzk3su4] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .node-grid[b-fk1hzk3su4] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/Home/PlansTeaser.razor.rz.scp.css */
/* Prices are a decision, not a decorative display. The three real catalogue tiers stay aligned. */
.teaser[b-ef4uq2zekc] { padding-block: clamp(3.5rem, 6vw, 5.5rem); border-block: 1px solid var(--ht-edge); }
.teaser-head[b-ef4uq2zekc] { display: grid; grid-template-columns: 1.1fr 1fr; gap: 3rem; align-items: end; margin-bottom: 2rem; }
.teaser-head .storefront-title[b-ef4uq2zekc] { max-width: 23ch; font-size: clamp(2rem, 1.6rem + 2vw, 3rem); }
.teaser-head .storefront-copy[b-ef4uq2zekc] { max-width: 30rem; font-size: 1rem; line-height: 1.75; }
.preview-plans[b-ef4uq2zekc] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.preview-plan[b-ef4uq2zekc] { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 1.65rem; border: 1px solid var(--ht-edge-strong); border-radius: 8px; background: var(--ht-surface-1); transition: opacity 260ms ease, transform 260ms ease, border-color 180ms ease; }
.preview-plan.is-recommended[b-ef4uq2zekc] { border-color: var(--ht-accent); }
.preview-plan.is-recommended[b-ef4uq2zekc]::before { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 3px; border-radius: 8px 8px 0 0; background: var(--ht-accent); }
.plan-top[b-ef4uq2zekc] { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; min-height: 32px; }
.plan-top h3[b-ef4uq2zekc] { margin: 0; color: var(--ht-ink); font-size: 1.125rem; font-weight: 640; letter-spacing: -.025em; }
.plan-badge[b-ef4uq2zekc] { padding: .25rem .4rem; border: 1px solid var(--ht-edge-strong); border-radius: 4px; color: var(--ht-accent); font-size: .75rem; line-height: 1.4; }
.plan-memory[b-ef4uq2zekc] { display: flex; align-items: baseline; gap: .6rem; margin: 1.4rem 0; }
.plan-memory strong[b-ef4uq2zekc] { color: var(--ht-ink); font-size: 2.8rem; font-weight: 650; line-height: 1; letter-spacing: -.05em; }
.plan-memory > span[b-ef4uq2zekc] { color: var(--ht-ink-soft); font-family: var(--ht-font-mono); font-size: .8125rem; }
.plan-specs[b-ef4uq2zekc] { display: grid; gap: .8rem; margin: 0; padding-bottom: 1.5rem; border-bottom: 1px solid var(--ht-edge-strong); }
.plan-specs div[b-ef4uq2zekc] { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; min-width: 0; font-size: .875rem; line-height: 1.6; }
.plan-specs dt[b-ef4uq2zekc] { color: var(--ht-ink-soft); }
.plan-specs dd[b-ef4uq2zekc] { flex: none; margin: 0; color: var(--ht-ink); font-family: var(--ht-font-mono); font-size: .875rem; }
.plan-price[b-ef4uq2zekc] { margin-top: auto; padding-top: 1.4rem; }
.plan-price > span[b-ef4uq2zekc] { color: var(--ht-ink-muted); font-size: .75rem; line-height: 1.6; }
.plan-price p[b-ef4uq2zekc] { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; margin: .4rem 0 1.3rem; }
.plan-price strong[b-ef4uq2zekc] { color: var(--ht-ink); font-size: 1.8rem; font-weight: 640; letter-spacing: -.035em; }
.plan-price p > span[b-ef4uq2zekc] { color: var(--ht-ink-muted); font-size: .8125rem; }
.plan-price[b-ef4uq2zekc]  .cta { width: 100%; min-height: 44px; }
.plan-price .pending[b-ef4uq2zekc] { min-height: 2rem; color: var(--ht-ink-soft); font-size: .9375rem; }
.teaser-foot[b-ef4uq2zekc] { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.3rem; color: var(--ht-ink-soft); font-size: .875rem; }
.teaser-foot .hts-text-link[b-ef4uq2zekc] { min-height: 44px; font-size: .9375rem; }
.preview-plan:focus-within[b-ef4uq2zekc] { border-color: var(--ht-accent); }
@media (hover:hover) and (pointer:fine) { .preview-plan:hover[b-ef4uq2zekc] { border-color: var(--ht-accent); } }
@media (max-width:900px) { .teaser-head[b-ef4uq2zekc] { grid-template-columns: 1fr; gap: 1.3rem; } .preview-plan[b-ef4uq2zekc] { padding: 1.2rem; } }
@media (max-width:700px) { .preview-plans[b-ef4uq2zekc] { grid-template-columns: 1fr; gap: 1rem; } .preview-plan[b-ef4uq2zekc] { padding: 1.5rem; } .plan-memory[b-ef4uq2zekc] { margin-block: 1.1rem; } }
@media (prefers-reduced-motion:reduce) { .preview-plan[b-ef4uq2zekc] { transition: none; } }
/* /Components/Home/ProvisioningDiagram.razor.rz.scp.css */
.topology[b-8jdtadgabu] {
    width: 100%;
    max-width: 26rem;
    height: auto;
}

/* ── Links ───────────────────────────────────────────────────────── */

.link-route[b-8jdtadgabu],
.link-packet[b-8jdtadgabu] {
    fill: none;
    stroke-linecap: round;
}

/* The route. Always drawn, whatever the stage - a connection that exists does not stop
   existing because the reader has not scrolled to it yet. */
.link-route[b-8jdtadgabu] {
    stroke: var(--hts-rule);
    stroke-width: 1.5;
    transition: stroke var(--hts-duration-slow) var(--hts-ease);
}

/* Completed routes stay lit in light blue: data has already flowed through. */
.is-done .link-route[b-8jdtadgabu] {
    stroke: rgba(131, 168, 243, 0.55);
}

.is-live .link-route[b-8jdtadgabu] {
    stroke: rgba(176, 105, 255, 0.42);
}

/* The packet. A short dash travelling the route, drawn over it rather than cut out of it.
   pathLength="100" in the markup normalises every route to the same scale, so one dash
   pattern fits the short vertical hops and the long forked branch alike. */
.link-packet[b-8jdtadgabu] {
    stroke: transparent;
    stroke-width: 2.5;
    stroke-dasharray: 12 88;
    stroke-dashoffset: 100;
}

.is-live .link-packet[b-8jdtadgabu] {
    stroke: var(--hts-purple-300);
    filter: drop-shadow(0 0 3px rgba(176, 105, 255, 0.9));
    animation: link-travel-b-8jdtadgabu 1.9s linear infinite;
}

@keyframes link-travel-b-8jdtadgabu {
    to {
        stroke-dashoffset: 0;
    }
}

/* With motion suppressed the packet would sit frozen mid-route, reading as a stray mark.
   The live route simply stays lit instead. */
@media (prefers-reduced-motion: reduce) {
    .is-live .link-packet[b-8jdtadgabu] {
        stroke: transparent;
        animation: none;
    }

    .is-live .link-route[b-8jdtadgabu] {
        stroke: var(--hts-purple-400);
    }
}

/* ── Nodes ─────────────────────────────────────────────────────────────── */

.node rect[b-8jdtadgabu] {
    fill: var(--hts-navy-800);
    stroke: var(--hts-rule);
    stroke-width: 1;
    transition:
        fill var(--hts-duration-slow) var(--hts-ease),
        stroke var(--hts-duration-slow) var(--hts-ease);
}

.node-title[b-8jdtadgabu] {
    fill: var(--hts-ink-muted);
    font-family: var(--hts-font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    transition: fill var(--hts-duration-slow) var(--hts-ease);
}

.node-caption[b-8jdtadgabu] {
    fill: rgba(136, 145, 181, 0.7);
    font-family: var(--hts-font-mono);
    font-size: 9px;
    letter-spacing: 0.1em;
}

.node.is-done rect[b-8jdtadgabu] {
    fill: rgba(131, 168, 243, 0.10);
    stroke: rgba(131, 168, 243, 0.45);
}

.node.is-done .node-title[b-8jdtadgabu] {
    fill: var(--hts-blue-300);
}

/* The stage being read: solid purple block, white type. */
.node.is-live rect[b-8jdtadgabu] {
    fill: var(--hts-purple-600);
    stroke: var(--hts-purple-400);
}

.node.is-live .node-title[b-8jdtadgabu] {
    fill: var(--hts-white);
}

.node.is-live .node-caption[b-8jdtadgabu] {
    fill: rgba(255, 255, 255, 0.75);
}
/* /Components/Home/ProvisioningSection.razor.rz.scp.css */
.provision[b-ieytbg0ano] {
    position: relative;
    padding-block: clamp(5rem, 9vw, 9rem);
}

.provision-head[b-ieytbg0ano] {
    max-width: 44rem;
    margin-bottom: clamp(3rem, 6vw, 5rem);
}

.provision-kicker[b-ieytbg0ano] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: var(--hts-space-6);
    color: var(--ht-ink-muted);
    font-family: var(--hts-font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.2em;
}

.provision-title[b-ieytbg0ano] {
    font-size: clamp(2.4rem, 1.3rem + 3.6vw, 4rem);
    font-weight: 460;
    line-height: 1.02;
    letter-spacing: -0.032em;
}

/* Emphasis by weight, not by colour. A purple word in a headline is decoration; it
   also spends the one hue that means "running" everywhere else on the site. */
.provision-accent[b-ieytbg0ano] {
    font-weight: 800;
}

.provision-lede[b-ieytbg0ano] {
    max-width: 32rem;
    margin-top: var(--hts-space-5);
    color: var(--hts-ink-soft);
    font-size: var(--hts-text-lg);
    line-height: var(--hts-leading-relaxed);
}

/* ── Body: stages scroll, figure sticks ────────────────────────────────── */

.provision-body[b-ieytbg0ano] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
    align-items: start;
    gap: clamp(2.5rem, 6vw, 5rem);
}

.stage-list[b-ieytbg0ano] {
    display: grid;
}

.stage[b-ieytbg0ano] {
    display: grid;
    grid-template-columns: 3.25rem minmax(0, 1fr);
    gap: var(--hts-space-5);
    padding-block: clamp(2.5rem, 5vw, 4.5rem);
}

.stage:first-child[b-ieytbg0ano] {
    padding-top: 0;
}

.stage-mark[b-ieytbg0ano] {
    display: grid;
    justify-items: center;
    gap: 0.75rem;
    height: 100%;
}

.stage-code[b-ieytbg0ano] {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border: 1px solid var(--hts-border-strong);
    border-radius: var(--hts-radius-sm);
    background: var(--hts-surface);
    color: var(--hts-ink-muted);
    font-family: var(--hts-font-mono);
    font-size: var(--hts-text-md);
    font-weight: 700;
    letter-spacing: 0.04em;
    transition:
        background-color var(--hts-duration-slow) var(--hts-ease),
        border-color var(--hts-duration-slow) var(--hts-ease),
        color var(--hts-duration-slow) var(--hts-ease),
        box-shadow var(--hts-duration-slow) var(--hts-ease);
}

.stage-rail[b-ieytbg0ano] {
    width: 1px;
    height: 100%;
    background: var(--hts-rule);
    transition: background-color var(--hts-duration-slow) var(--hts-ease);
}

.stage:last-child .stage-rail[b-ieytbg0ano] {
    display: none;
}

.stage-text h3[b-ieytbg0ano] {
    font-family: var(--hts-font-mono);
    font-size: var(--hts-text-md);
    font-weight: 600;
    letter-spacing: 0.16em;
    color: var(--hts-ink-muted);
    transition: color var(--hts-duration-slow) var(--hts-ease);
}

.stage-text p[b-ieytbg0ano] {
    max-width: 34rem;
    margin-top: var(--hts-space-4);
    color: var(--hts-ink-muted);
    font-size: var(--hts-text-lg);
    line-height: var(--hts-leading-relaxed);
    transition: color var(--hts-duration-slow) var(--hts-ease);
}

/* Completed stages settle into light blue. */
.stage.is-done .stage-code[b-ieytbg0ano] {
    border-color: var(--hts-border-blue);
    background: rgba(131, 168, 243, 0.12);
    color: var(--hts-blue-300);
}

.stage.is-done .stage-rail[b-ieytbg0ano] {
    background: rgba(131, 168, 243, 0.45);
}

/* The stage being read takes a solid purple block and full-contrast copy. */
.stage.is-live .stage-code[b-ieytbg0ano] {
    border-color: var(--hts-purple-400);
    background: var(--hts-purple-600);
    color: #ffffff;  /* literal: the fill under it is dark in both themes */
    box-shadow: var(--ht-shadow-3);
}

.stage.is-live .stage-text h3[b-ieytbg0ano] {
    color: var(--hts-ink);
}

.stage.is-live .stage-text p[b-ieytbg0ano] {
    color: var(--hts-ink-soft);
}

/* ── Sticky figure ─────────────────────────────────────────────────────── */

.provision-figure[b-ieytbg0ano] {
    height: 100%;
}

.figure-sticky[b-ieytbg0ano] {
    position: sticky;
    top: calc(var(--hts-header-height) + var(--hts-space-8));
    display: grid;
    justify-items: center;
    gap: var(--hts-space-5);
    padding: var(--hts-space-6);
    border: 1px solid var(--hts-border-strong);
    border-radius: var(--hts-radius-lg);
    background: var(--hts-navy-900);
    box-shadow: var(--hts-rim), var(--hts-shadow-lg);
}

.figure-head[b-ieytbg0ano] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: var(--hts-space-3);
    font-family: var(--hts-font-mono);
    font-size: 0.5625rem;
    letter-spacing: 0.18em;
}

.figure-key[b-ieytbg0ano] {
    color: var(--hts-ink-muted);
}

.figure-step[b-ieytbg0ano] {
    color: var(--hts-purple-300);
}

.figure-note[b-ieytbg0ano] {
    color: var(--hts-ink-muted);
    font-size: var(--hts-text-xs);
    text-align: center;
}

/* ── Responsive ────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
    .provision-body[b-ieytbg0ano] {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Figure leads on narrow screens, then the stages read as a list. */
    .provision-figure[b-ieytbg0ano] {
        order: -1;
    }

    .figure-sticky[b-ieytbg0ano] {
        position: static;
    }

    .stage[b-ieytbg0ano] {
        padding-block: var(--hts-space-8);
    }

    .stage:first-child[b-ieytbg0ano] {
        padding-top: var(--hts-space-6);
    }
}

@media (max-width: 560px) {
    .stage[b-ieytbg0ano] {
        grid-template-columns: 2.75rem minmax(0, 1fr);
        gap: var(--hts-space-4);
    }

    .stage-code[b-ieytbg0ano] {
        width: 2.5rem;
        height: 2.5rem;
        font-size: var(--hts-text-base);
    }

    .stage-text p[b-ieytbg0ano] {
        font-size: var(--hts-text-md);
    }
}
/* /Components/Home/ServerConsole.razor.rz.scp.css */
.console[b-lkd1vava7x] {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    border: 1px solid var(--hts-console-rule);
    border-radius: var(--hts-radius-sm);
    background: var(--hts-console);
    overflow: hidden;
}

.console-bar[b-lkd1vava7x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hts-space-3);
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--hts-console-rule);
    background: rgba(255, 255, 255, 0.02);
    font-family: var(--hts-font-mono);
    font-size: 0.5625rem;
    letter-spacing: 0.18em;
}

.console-key[b-lkd1vava7x] {
    color: var(--hts-console-accent);
}

.console-meta[b-lkd1vava7x] {
    color: var(--hts-console-muted);
}

.console-body[b-lkd1vava7x] {
    display: grid;
    align-content: start;
    gap: 0.35rem;
    padding: var(--hts-space-4) var(--hts-space-5);
    overflow-y: auto;
    font-family: var(--hts-font-mono);
    font-size: var(--hts-text-xs);
    line-height: 1.6;
    scrollbar-width: thin;
    scrollbar-color: rgba(131, 168, 243, 0.35) transparent;
}

.console.is-compact .console-body[b-lkd1vava7x] {
    max-height: 13rem;
}

.console:not(.is-compact) .console-body[b-lkd1vava7x] {
    min-height: 22rem;
    max-height: 30rem;
}

.console-line[b-lkd1vava7x] {
    display: flex;
    gap: 0.7rem;
    color: var(--hts-console-text);
    white-space: nowrap;
}

.console-time[b-lkd1vava7x] {
    flex: none;
    color: var(--hts-console-muted);
}

.console-source[b-lkd1vava7x] {
    flex: none;
    color: var(--hts-console-brand);
}

.console-text[b-lkd1vava7x] {
    white-space: normal;
}

.console-line.is-ok .console-text[b-lkd1vava7x] {
    color: var(--hts-console-accent);
}

.console-line.is-warn .console-text[b-lkd1vava7x] {
    color: var(--hts-console-brand);
}

/* Blinking prompt caret at the tail of the log. */
.caret[b-lkd1vava7x] {
    display: inline-block;
    width: 0.5rem;
    height: 0.85rem;
    background: var(--hts-console-accent);
    animation: caret-blink-b-lkd1vava7x 1.1s steps(2, end) infinite;
}

@keyframes caret-blink-b-lkd1vava7x {
    50% {
        opacity: 0;
    }
}
/* /Components/Home/TelemetryStrip.razor.rz.scp.css */
/*
    The rail that carries the eye out of the hero.

    The cap used to be a solid purple block the width of a paragraph, which is a lot of brand
    colour to spend on the word LIVE. Now the cap is graphite and the only purple in it is the
    lamp - which is what is actually claiming the thing is live.
*/

.strip[b-s23187gxy1] {
    position: relative;
    display: flex;
    align-items: stretch;
    border-block: 1px solid var(--ht-edge);
    background: var(--ht-surface-1);
    overflow: hidden;
}

.strip-cap[b-s23187gxy1] {
    display: inline-flex;
    align-items: center;
    gap: var(--ht-space-2);
    flex: none;
    padding-inline: clamp(1rem, 3vw, 1.75rem);
    border-right: 1px solid var(--ht-edge-strong);
    background: var(--ht-surface-inset);
    color: var(--ht-ink-soft);
    font-family: var(--ht-font-mono);
    font-size: var(--ht-text-2xs);
    font-weight: 700;
    letter-spacing: var(--ht-track-label);
    z-index: 1;
}

.cap-dot[b-s23187gxy1] {
    width: 6px;
    height: 6px;
    flex: none;
    border-radius: 50%;
    background: var(--ht-live-500);
    box-shadow: var(--ht-lamp-live);
    animation: cap-breathe-b-s23187gxy1 2.8s var(--ht-ease-in-out) infinite;
}

/* Breathing, not blinking. A blinking light means a fault in every other context. */
@keyframes cap-breathe-b-s23187gxy1 {
    0%, 100% {
        opacity: 1;
    }

    52% {
        opacity: 0.35;
    }
}

.strip-viewport[b-s23187gxy1] {
    position: relative;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 3rem, #000 calc(100% - 3rem), transparent);
}

.strip-rail[b-s23187gxy1] {
    display: flex;
    width: max-content;
    animation: strip-scroll-b-s23187gxy1 64s linear infinite;
}

.strip:hover .strip-rail[b-s23187gxy1] {
    animation-play-state: paused;
}

@keyframes strip-scroll-b-s23187gxy1 {
    to {
        transform: translateX(-50%);
    }
}

.strip-set[b-s23187gxy1] {
    display: flex;
    align-items: center;
    flex: none;
}

.signal[b-s23187gxy1] {
    display: inline-flex;
    align-items: center;
    gap: var(--ht-space-2);
    padding: 0.9rem clamp(1.15rem, 3vw, 2rem);
    border-right: 1px solid var(--ht-edge);
    font-family: var(--ht-font-mono);
    font-size: var(--ht-text-2xs);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--ht-track-label);
    white-space: nowrap;
}

.signal-label[b-s23187gxy1] {
    color: var(--ht-ink-muted);
}

.signal-value[b-s23187gxy1] {
    color: var(--ht-ink);
    font-weight: 600;
}

.tone-data .signal-value[b-s23187gxy1] {
    color: var(--ht-data-400);
}

.tone-routing .signal-value[b-s23187gxy1] {
    color: var(--ht-live-400);
}

.signal-pulse[b-s23187gxy1] {
    width: 5px;
    height: 5px;
    flex: none;
    border-radius: 50%;
    background: var(--ht-data-400);
    box-shadow: var(--ht-lamp-data);
    animation: cap-breathe-b-s23187gxy1 3.4s var(--ht-ease-in-out) infinite;
}

/*
    A rail that never stops moving is the kind of motion this rebuild is meant to remove, so
    under a reduced-motion preference it simply stops - readings still legible, nothing
    travelling. The mask stays, otherwise the parked set would be cut off mid-word at the edge.
*/
@media (prefers-reduced-motion: reduce) {
    .strip-rail[b-s23187gxy1] {
        animation: none;
    }

    .cap-dot[b-s23187gxy1],
    .signal-pulse[b-s23187gxy1] {
        animation: none;
    }
}

@media (max-width: 720px) {
    .strip-cap[b-s23187gxy1],
    .signal[b-s23187gxy1] {
        font-size: 0.5625rem;
        letter-spacing: 0.14em;
    }

    .signal[b-s23187gxy1] {
        padding-block: 0.78rem;
    }
}
/* /Components/Home/WorkshopSection.razor.rz.scp.css */
.workshop[b-wxp4pmx1sf] {
    position: relative;
    padding-block: clamp(5rem, 9vw, 9rem);
    background: var(--hts-navy-900);
    border-block: 1px solid var(--hts-border);
}

.workshop-inner[b-wxp4pmx1sf] {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: center;
    gap: clamp(2.5rem, 6vw, 5.5rem);
}

/* ── Copy ──────────────────────────────────────────────────────────────── */

.workshop-kicker[b-wxp4pmx1sf] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: var(--hts-space-6);
    color: var(--ht-ink-muted);
    font-family: var(--hts-font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.2em;
}

.workshop-title[b-wxp4pmx1sf] {
    font-size: clamp(2.6rem, 1.4rem + 4.2vw, 4.6rem);
    font-weight: 460;
    line-height: 0.98;
    letter-spacing: -0.035em;
}

/* Emphasis by weight, not by colour. A purple word in a headline is decoration; it
   also spends the one hue that means "running" everywhere else on the site. */
.workshop-accent[b-wxp4pmx1sf] {
    font-weight: 800;
}

.workshop-body[b-wxp4pmx1sf] {
    max-width: 30rem;
    margin-top: var(--hts-space-5);
    color: var(--hts-ink-soft);
    font-size: var(--hts-text-lg);
    line-height: var(--hts-leading-relaxed);
}

.workshop-points[b-wxp4pmx1sf] {
    display: grid;
    gap: var(--hts-space-3);
    margin-top: var(--hts-space-7, 1.75rem);
    padding-top: var(--hts-space-6);
    border-top: 1px solid var(--hts-border);
}

.workshop-points li[b-wxp4pmx1sf] {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    color: var(--hts-ink-soft);
    font-size: var(--hts-text-base);
}

/* A small solid square instead of a checkmark icon. */
.point-mark[b-wxp4pmx1sf] {
    width: 0.4rem;
    height: 0.4rem;
    flex: none;
    background: var(--hts-purple-400);
    transform: translateY(-1px);
}

/* ── Sync panel ────────────────────────────────────────────────────────── */

.workshop-panel[b-wxp4pmx1sf] {
    /* The old panel drew edge-to-edge bars, so it carried no padding of its own. The installer
       has type on both margins, and without this the state labels sat under the border. */
    padding: clamp(1.1rem, 2.5vw, 1.65rem);
    border: 1px solid var(--hts-border-strong);
    border-radius: var(--hts-radius-lg);
    background: var(--hts-navy-950);
    box-shadow: var(--hts-rim), var(--hts-shadow-lg);
    min-width: 0;
}

.panel-bar[b-wxp4pmx1sf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hts-space-4);
    padding: var(--hts-space-5) var(--hts-space-6);
    border-bottom: 1px solid var(--hts-border);
    background: var(--hts-navy-900);
}

.panel-bar-id[b-wxp4pmx1sf],
.panel-bar-count[b-wxp4pmx1sf] {
    display: grid;
    gap: 0.2rem;
}

.panel-bar-count[b-wxp4pmx1sf] {
    text-align: right;
}

.bar-key[b-wxp4pmx1sf] {
    color: var(--hts-ink-muted);
    font-family: var(--hts-font-mono);
    font-size: 0.5625rem;
    letter-spacing: 0.18em;
}

.bar-value[b-wxp4pmx1sf] {
    color: var(--hts-blue-300);
    font-family: var(--hts-font-mono);
    font-size: var(--hts-text-sm);
}

.count-value[b-wxp4pmx1sf] {
    color: var(--hts-ink);
    font-family: var(--hts-font-mono);
    font-size: var(--hts-text-xl);
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* ── Installer ─────────────────────────────────────────────────────────── */

.panel-bar[b-wxp4pmx1sf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hts-space-4);
    padding-bottom: var(--hts-space-4);
    border-bottom: 1px solid var(--hts-border);
}

.bar-title[b-wxp4pmx1sf] {
    color: var(--hts-ink);
    font-family: var(--hts-font-mono);
    font-size: var(--hts-text-sm);
    font-weight: 640;
    letter-spacing: 0.14em;
}

/* The search field, drawn rather than functional. It is the shape of the thing the panel
   does, standing in for it on a page that cannot do it. */
.installer-search[b-wxp4pmx1sf] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: var(--hts-space-4);
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--hts-border);
    border-radius: var(--hts-radius-sm);
    background: var(--hts-surface-inset);
}

.search-mark[b-wxp4pmx1sf] {
    position: relative;
    width: 0.75rem;
    height: 0.75rem;
    flex: none;
    border: 1.5px solid var(--hts-ink-muted);
    border-radius: 50%;
}

.search-mark[b-wxp4pmx1sf]::after {
    content: "";
    position: absolute;
    top: 78%;
    left: 78%;
    width: 0.34rem;
    height: 1.5px;
    background: var(--hts-ink-muted);
    transform: rotate(45deg);
    transform-origin: left center;
}

.search-text[b-wxp4pmx1sf] {
    color: var(--hts-ink-muted);
    font-size: var(--hts-text-sm);
}

.mod-list[b-wxp4pmx1sf] {
    display: grid;
    margin-top: var(--hts-space-2);
}

.mod[b-wxp4pmx1sf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hts-space-4);
    padding-block: var(--hts-space-4);
    border-bottom: 1px solid var(--hts-border);
    min-width: 0;
}

.mod:last-child[b-wxp4pmx1sf] {
    border-bottom: 0;
}

.mod-identity[b-wxp4pmx1sf] {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.mod-name[b-wxp4pmx1sf] {
    color: var(--hts-ink);
    font-size: var(--hts-text-md);
    font-weight: 560;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The identifiers a person would otherwise be copying by hand, kept small. They are here to
   show the work was done correctly, not to be read. */
.mod-ids[b-wxp4pmx1sf] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--hts-ink-muted);
    font-family: var(--hts-font-mono);
    font-size: 0.5625rem;
    letter-spacing: 0.08em;
}

/* The one control on the row. */
.mod-action[b-wxp4pmx1sf] {
    flex: none;
    padding: 0.35rem 0.85rem;
    border: 1px solid var(--hts-border-brand, rgba(176, 105, 255, 0.5));
    border-radius: var(--ht-radius-sm);
    background: rgba(176, 105, 255, 0.12);
    color: var(--hts-purple-300);
    font-family: var(--hts-font-mono);
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    white-space: nowrap;
}

.mod-state[b-wxp4pmx1sf] {
    flex: none;
    color: var(--hts-ink-muted);
    font-family: var(--hts-font-mono);
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    white-space: nowrap;
}

.mod.is-installed .mod-state[b-wxp4pmx1sf] {
    color: var(--hts-blue-300);
}

.mod.is-staged .mod-state[b-wxp4pmx1sf] {
    color: var(--hts-purple-300);
}

/* ── Foot ──────────────────────────────────────────────────────────────── */

.panel-foot[b-wxp4pmx1sf] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: var(--hts-space-4);
    padding-top: var(--hts-space-4);
    border-top: 1px solid var(--hts-border);
    color: var(--hts-ink-muted);
    font-family: var(--hts-font-mono);
    font-size: 0.5rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.foot-dot[b-wxp4pmx1sf] {
    width: 0.35rem;
    height: 0.35rem;
    border-radius: 50%;
    background: var(--hts-blue-300);
    box-shadow: var(--ht-lamp-data);
}

.foot-spacer[b-wxp4pmx1sf] {
    flex: 1;
}

.foot-note[b-wxp4pmx1sf] {
    color: var(--hts-ink-muted);
    letter-spacing: 0.08em;
    text-transform: none;
}

@media (max-width: 1024px) {
    .workshop-inner[b-wxp4pmx1sf] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 480px) {
    .mod[b-wxp4pmx1sf] {
        flex-wrap: wrap;
    }
}
/* /Components/Home/WorldSection.razor.rz.scp.css */
.world[b-tzb00m0zh3] {
    position: relative;
    padding-block: clamp(5rem, 9vw, 9rem);
}

.world-inner[b-tzb00m0zh3] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: center;
    gap: clamp(2.5rem, 6vw, 6rem);
}

/* ── Copy ──────────────────────────────────────────────────────────────── */

.world-kicker[b-tzb00m0zh3] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: var(--hts-space-6);
    color: var(--ht-ink-muted);
    font-family: var(--hts-font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.2em;
}

/* Solid purple index chip - brand colour on a hard edge, not a gradient. */
.world-title[b-tzb00m0zh3] {
    font-size: clamp(2.4rem, 1.3rem + 3.6vw, 4rem);
    font-weight: 460;
    line-height: 1.02;
    letter-spacing: -0.032em;
}

/* Emphasis by weight, not by colour. A purple word in a headline is decoration; it
   also spends the one hue that means "running" everywhere else on the site. */
.world-accent[b-tzb00m0zh3] {
    font-weight: 800;
}

.world-body[b-tzb00m0zh3] {
    max-width: 32rem;
    margin-top: var(--hts-space-5);
    color: var(--hts-ink-soft);
    font-size: var(--hts-text-lg);
    line-height: var(--hts-leading-relaxed);
}

/* ── World plate ───────────────────────────────────────────────────────── */

.world-plate[b-tzb00m0zh3] {
    margin-bottom: var(--hts-space-5);
}

.plate-state[b-tzb00m0zh3] {
    display: grid;
    gap: 0.3rem;
}

.state-key[b-tzb00m0zh3] {
    color: var(--hts-blue-300);
    font-family: var(--hts-font-mono);
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.24em;
}

.state-value[b-tzb00m0zh3] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--hts-white);
    font-family: var(--hts-font-mono);
    font-size: var(--hts-text-sm);
    font-weight: 620;
    letter-spacing: 0.12em;
}

.state-value .state-dot[b-tzb00m0zh3] {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: var(--hts-blue-300);
    box-shadow: var(--ht-lamp-data);
}

.world-readout[b-tzb00m0zh3] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hts-space-8);
    margin-top: var(--hts-space-8);
    padding-top: var(--hts-space-6);
    border-top: 1px solid var(--hts-border);
}

.world-readout dt[b-tzb00m0zh3] {
    color: var(--hts-ink-muted);
    font-family: var(--hts-font-mono);
    font-size: 0.5625rem;
    letter-spacing: 0.18em;
}

.world-readout dd[b-tzb00m0zh3] {
    margin-top: 0.35rem;
    color: var(--hts-ink);
    font-size: var(--hts-text-md);
    font-weight: 560;
}

/* ── Figure ────────────────────────────────────────────────────────────── */

.world-figure[b-tzb00m0zh3] {
    min-width: 0;
}

@media (max-width: 1024px) {
    .world-inner[b-tzb00m0zh3] {
        grid-template-columns: minmax(0, 1fr);
        gap: clamp(2.5rem, 8vw, 4rem);
    }

    .world-copy[b-tzb00m0zh3] {
        max-width: 40rem;
    }
}

@media (max-width: 560px) {
    .world-readout[b-tzb00m0zh3] {
        gap: var(--hts-space-5);
    }
}
/* /Components/Home/WorldTimeline.razor.rz.scp.css */
.continuity[b-q3k4frv45p] {
    display: grid;
    gap: var(--hts-space-4);
    margin: 0;
}

/* ── Head ──────────────────────────────────────────────────────────────── */

.continuity-head[b-q3k4frv45p] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hts-space-4);
    color: var(--hts-ink-muted);
    font-family: var(--hts-font-mono);
    font-size: 0.5625rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.head-live[b-q3k4frv45p] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--hts-blue-300);
    white-space: nowrap;
}

.head-dot[b-q3k4frv45p] {
    width: 0.32rem;
    height: 0.32rem;
    border-radius: 50%;
    background: currentColor;
    box-shadow: var(--ht-lamp-data);
    animation: continuity-breathe-b-q3k4frv45p 3.2s var(--hts-ease) infinite;
}

@keyframes continuity-breathe-b-q3k4frv45p {
    0%, 100% {
        opacity: 1;
    }

    55% {
        opacity: 0.3;
    }
}

/* ── Frame ─────────────────────────────────────────────────────────────── */

.continuity-frame[b-q3k4frv45p] {
    position: relative;
    padding: var(--hts-space-5) var(--hts-space-5) var(--hts-space-6);
    border: 1px solid var(--hts-border-strong);
    border-radius: var(--hts-radius-lg);
    background:
        radial-gradient(120% 70% at 12% 0%, rgba(131, 168, 243, 0.10) 0%, transparent 60%),
        var(--hts-surface);
    box-shadow: var(--hts-rim), var(--hts-shadow-md);
    overflow: hidden;
}

/*
    The two lane columns and the copy column. The same track sizes are used by the heads and by
    every event row, so the lines and their labels cannot drift apart.
*/
.lane-heads[b-q3k4frv45p],
.event[b-q3k4frv45p] {
    display: grid;
    grid-template-columns: 3.75rem 3.75rem minmax(0, 1fr);
    align-items: stretch;
}

.lane-heads[b-q3k4frv45p] {
    margin-bottom: var(--hts-space-4);
}

.lane-head[b-q3k4frv45p] {
    font-family: var(--hts-font-mono);
    font-size: 0.5rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.lane-head--world[b-q3k4frv45p] {
    color: var(--hts-blue-300);
}

.lane-head--instance[b-q3k4frv45p] {
    color: var(--hts-ink-muted);
}

/* ── Lanes ─────────────────────────────────────────────────────────────── */

.events[b-q3k4frv45p] {
    display: grid;
}

.event[b-q3k4frv45p] {
    position: relative;
    min-height: 4.25rem;
}

.lane[b-q3k4frv45p] {
    position: relative;
    width: 100%;
}

/*
    The world lane: a 2px stroke down the middle of its column, on every row, with nothing that
    can interrupt it. Adjacent rows meet exactly, so it reads as one line the full height of the
    figure.
*/
.lane--world[b-q3k4frv45p]::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0.3rem;
    width: 2px;
    border-radius: 1px;
    background: linear-gradient(180deg, var(--hts-blue-400) 0%, var(--ht-data-500) 100%);
    box-shadow: var(--ht-lamp-data);
}

/* A restore point is a node on the world lane, not a break in it. */
.lane-node[b-q3k4frv45p] {
    position: absolute;
    top: 50%;
    left: 0.3rem;
    width: 0.6rem;
    height: 0.6rem;
    background: var(--hts-navy-900);
    border: 2px solid var(--hts-blue-300);
    box-shadow: var(--ht-lamp-data);
    transform: translate(-45%, -50%) rotate(45deg);
}

/*
    The instance lane: the same stroke, in a quieter colour, cut through the middle of any row
    where something happened to it. The gap is cut with a gradient rather than with two elements,
    so the surviving ends stay aligned with the rows above and below.
*/
.lane--instance[b-q3k4frv45p]::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0.3rem;
    width: 2px;
    border-radius: 1px;
    background: rgba(136, 145, 181, 0.55);
}

.event.is-break .lane--instance[b-q3k4frv45p]::before {
    background: linear-gradient(
        180deg,
        rgba(136, 145, 181, 0.55) 0%,
        rgba(136, 145, 181, 0.55) 32%,
        transparent 32%,
        transparent 68%,
        rgba(136, 145, 181, 0.55) 68%,
        rgba(136, 145, 181, 0.55) 100%);
}

/*
    The cut itself: the two parallel strokes a drawing uses to mark a broken line. Without a mark
    the gap reads as a rendering fault rather than as the point being made.
*/
.event.is-break .lane--instance[b-q3k4frv45p]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0.3rem;
    width: 0.85rem;
    height: 0.8rem;
    transform: translate(-46%, -50%);
    background-image:
        linear-gradient(118deg,
            transparent 42%, var(--hts-purple-300) 42%, var(--hts-purple-300) 58%, transparent 58%),
        linear-gradient(118deg,
            transparent 42%, var(--hts-purple-300) 42%, var(--hts-purple-300) 58%, transparent 58%);
    background-size: 100% 42%;
    background-position: 0 0, 0 100%;
    background-repeat: no-repeat;
}

/* ── Copy ──────────────────────────────────────────────────────────────── */

.event-body[b-q3k4frv45p] {
    display: grid;
    align-content: center;
    gap: 0.3rem;
    padding: var(--hts-space-3) 0 var(--hts-space-3) var(--hts-space-2);
    min-width: 0;
}

.event-tag[b-q3k4frv45p] {
    color: var(--hts-ink);
    font-family: var(--hts-font-mono);
    font-size: 0.625rem;
    font-weight: 640;
    letter-spacing: 0.18em;
}

.event.is-checkpoint .event-tag[b-q3k4frv45p] {
    color: var(--hts-blue-300);
}

.event-detail[b-q3k4frv45p] {
    color: var(--hts-ink-muted);
    font-size: var(--hts-text-sm);
    line-height: var(--hts-leading-normal);
}

/* ── Note ──────────────────────────────────────────────────────────────── */

.continuity-note[b-q3k4frv45p] {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    color: var(--hts-ink-soft);
    font-size: var(--hts-text-sm);
    line-height: var(--hts-leading-normal);
}

.note-mark[b-q3k4frv45p] {
    width: 1.25rem;
    height: 2px;
    flex: none;
    align-self: center;
    border-radius: 1px;
    background: linear-gradient(90deg, var(--hts-blue-400) 0%, var(--ht-data-500) 100%);
}

@media (max-width: 480px) {
    .lane-heads[b-q3k4frv45p],
    .event[b-q3k4frv45p] {
        grid-template-columns: 3.5rem 3.5rem minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .head-dot[b-q3k4frv45p] {
        animation: none;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.site-shell[b-wsoyqnq3jg] {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

main[b-wsoyqnq3jg] {
    flex: 1;
}

main:focus[b-wsoyqnq3jg] {
    outline: none;
}
/* /Components/Layout/SiteFooter.razor.rz.scp.css */
.site-footer[b-clkuqoki4y] {
    position: relative;
    border-top: 1px solid var(--ht-edge-strong);
    background: var(--ht-surface-1);
}

.footer-capabilities[b-clkuqoki4y] {
    border-bottom: 1px solid var(--ht-edge);
    background: var(--ht-surface-2);
}

.footer-capability-list[b-clkuqoki4y] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    padding-block: 1.35rem;
    list-style: none;
}

.footer-capability-list li[b-clkuqoki4y] {
    display: flex;
    align-items: center;
    gap: .8rem;
    color: var(--ht-ink-soft);
    font-family: var(--ht-font-mono);
    font-size: .6875rem;
    font-weight: 500;
    letter-spacing: .04em;
    line-height: 1.5;
}

.footer-capability-mark[b-clkuqoki4y] {
    width: 10px;
    height: 1px;
    flex: none;
    background: var(--ht-edge-strong);
}

.footer-inner[b-clkuqoki4y] {
    display: grid;
    grid-template-columns: 1.65fr 1fr 1fr 1fr;
    gap: 3rem 2.5rem;
    padding-block: clamp(3rem, 6vw, 5.5rem) 3.5rem;
}

.footer-brand[b-clkuqoki4y] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    max-width: 24rem;
    min-width: 0;
}

.footer-brand[b-clkuqoki4y]  .brand-mark {
    background: var(--ht-surface-2);
    border-radius: 8px;
    box-shadow: none;
}

.footer-brand[b-clkuqoki4y]  .brand-mark svg {
    filter: none;
}

.footer-brand[b-clkuqoki4y]  .brand-name {
    font-size: 1.15rem;
    font-weight: 650;
    letter-spacing: -.035em;
}

.footer-brand[b-clkuqoki4y]  .brand-tagline {
    margin-top: .2rem;
    color: var(--ht-ink-muted);
    letter-spacing: .12em;
}

.footer-blurb[b-clkuqoki4y] {
    color: var(--ht-ink-soft);
    font-size: .9rem;
    line-height: 1.8;
}

.footer-mail[b-clkuqoki4y] {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    min-height: 44px;
    max-width: 100%;
    color: var(--ht-ink);
    font-size: .875rem;
    font-weight: 550;
    text-decoration: none;
}

.footer-mail span[b-clkuqoki4y] {
    overflow-wrap: anywhere;
}

.footer-mail[b-clkuqoki4y]  .hts-icon {
    flex: none;
    color: var(--ht-accent, var(--ht-live-400));
}

.footer-title[b-clkuqoki4y] {
    margin: 0 0 1.15rem;
    color: var(--ht-ink);
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: -.01em;
}

.footer-column ul[b-clkuqoki4y] {
    display: grid;
    gap: .15rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

.footer-column a[b-clkuqoki4y] {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--ht-ink-muted);
    font-size: .875rem;
    line-height: 1.5;
    text-decoration: none;
    transition: color 180ms ease;
}

.footer-column a[b-clkuqoki4y]::after,
.footer-mail[b-clkuqoki4y]::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: .5rem;
    left: 0;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 220ms ease;
}

.footer-mail[b-clkuqoki4y] {
    position: relative;
}

.footer-placeholder[b-clkuqoki4y] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    min-height: 44px;
    color: var(--ht-ink-muted);
    font-size: .825rem;
    line-height: 1.5;
}

.footer-chip[b-clkuqoki4y] {
    padding: .15rem .4rem;
    border: 1px solid var(--ht-edge-strong);
    border-radius: 4px;
    color: var(--ht-ink-muted);
    font-size: .6rem;
    font-weight: 500;
    line-height: 1.5;
    white-space: nowrap;
}

.footer-base[b-clkuqoki4y] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .5rem 1.5rem;
    padding-block: 1.75rem;
    border-top: 1px solid var(--ht-edge);
    color: var(--ht-ink-muted);
    font-size: .75rem;
    line-height: 1.7;
}

.footer-credit[b-clkuqoki4y] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .25rem;
}

.footer-credit a[b-clkuqoki4y] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-block: -.75rem;
    color: var(--ht-ink-soft);
    text-underline-offset: 3px;
}

.footer-note[b-clkuqoki4y] {
    grid-column: 1 / -1;
    max-width: 65rem;
    font-size: .6875rem;
}

.footer-column a:focus-visible[b-clkuqoki4y],
.footer-mail:focus-visible[b-clkuqoki4y],
.footer-credit a:focus-visible[b-clkuqoki4y] {
    outline: 2px solid var(--ht-accent, var(--ht-live-400));
    outline-offset: 4px;
    border-radius: 2px;
}

.footer-column a:focus-visible[b-clkuqoki4y]::after,
.footer-mail:focus-visible[b-clkuqoki4y]::after {
    transform: scaleX(1);
}

@media (hover: hover) and (pointer: fine) {
    .footer-column a:hover[b-clkuqoki4y],
    .footer-mail:hover[b-clkuqoki4y],
    .footer-credit a:hover[b-clkuqoki4y] {
        color: var(--ht-ink);
    }

    .footer-column a:hover[b-clkuqoki4y]::after,
    .footer-mail:hover[b-clkuqoki4y]::after {
        transform: scaleX(1);
    }
}

@media (max-width: 980px) {
    .footer-inner[b-clkuqoki4y] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .footer-brand[b-clkuqoki4y] {
        grid-column: 1 / -1;
        max-width: 36rem;
    }

    .footer-capability-list[b-clkuqoki4y] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .footer-inner[b-clkuqoki4y] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2.5rem 1.25rem;
        padding-bottom: 2.5rem;
    }

    .footer-column:last-child[b-clkuqoki4y] {
        grid-column: 1 / -1;
    }

    .footer-column:last-child ul[b-clkuqoki4y] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .25rem 1rem;
    }

    .footer-placeholder[b-clkuqoki4y] {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .footer-capability-list[b-clkuqoki4y] {
        gap: .85rem 1rem;
    }

    .footer-capability-list li[b-clkuqoki4y] {
        gap: .5rem;
        font-size: .6rem;
    }

    .footer-base[b-clkuqoki4y] {
        grid-template-columns: minmax(0, 1fr);
        gap: .75rem;
    }
}

@media (max-width: 360px) {
    .footer-column:last-child ul[b-clkuqoki4y] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .footer-column a[b-clkuqoki4y],
    .footer-column a[b-clkuqoki4y]::after,
    .footer-mail[b-clkuqoki4y]::after {
        transition: none;
    }
}
/* /Components/Layout/SiteHeader.razor.rz.scp.css */
.site-header[b-3bvhw2rvnf] {
    position: sticky;
    top: 0;
    z-index: var(--ht-z-header);
    border-bottom: 1px solid var(--ht-edge);
    background: var(--ht-ground);
    transition: background-color 220ms ease, box-shadow 220ms ease;
}

html.hts-scrolled .site-header[b-3bvhw2rvnf] {
    background: var(--ht-ground);
    box-shadow: 0 4px 14px rgb(0 0 0 / 6%);
}

.header-inner[b-3bvhw2rvnf] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2.5vw, 2.5rem);
    min-height: 76px;
}

.header-brand[b-3bvhw2rvnf] {
    flex: none;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    border-radius: 8px;
    text-decoration: none;
}

.header-brand[b-3bvhw2rvnf]  .brand-mark {
    border-radius: 8px;
    background: var(--ht-surface-1);
    box-shadow: none;
}

.header-brand[b-3bvhw2rvnf]  .brand-mark svg {
    filter: none;
}

.header-brand[b-3bvhw2rvnf]  .brand-name {
    font-weight: 650;
    letter-spacing: -.035em;
}

.header-panel[b-3bvhw2rvnf] {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-width: 0;
}

.header-nav ul[b-3bvhw2rvnf] {
    display: flex;
    align-items: center;
    gap: .3rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.header-nav a[b-3bvhw2rvnf] {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: .5rem .85rem;
    border-radius: 8px;
    color: var(--ht-ink-soft);
    font-size: .875rem;
    font-weight: 540;
    text-decoration: none;
    white-space: nowrap;
    transition: color 200ms ease, background-color 200ms ease;
}

.header-nav a[b-3bvhw2rvnf]::after {
    content: "";
    position: absolute;
    right: .85rem;
    bottom: .45rem;
    left: .85rem;
    height: 2px;
    border-radius: 2px;
    background: var(--ht-accent, var(--ht-live-400));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 220ms ease;
}

.header-nav a.is-current[b-3bvhw2rvnf] {
    color: var(--ht-ink);
}

.header-nav a.is-current[b-3bvhw2rvnf]::after {
    transform: scaleX(1);
}

.header-nav a:focus-visible[b-3bvhw2rvnf] {
    --nav-roll-shift: -100%;
}

.header-nav a:focus-visible[b-3bvhw2rvnf]::after {
    transform: scaleX(1);
}

.header-utility[b-3bvhw2rvnf]  .lang,
.header-utility[b-3bvhw2rvnf]  .theme-toggle {
    border-radius: 8px;
}

.header-actions[b-3bvhw2rvnf],
.header-utility[b-3bvhw2rvnf] {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex: none;
}

.header-utility[b-3bvhw2rvnf] {
    gap: .65rem;
}

.header-toggle[b-3bvhw2rvnf] {
    display: none;
    place-items: center;
    flex: none;
    width: 44px;
    height: 44px;
    border: 1px solid var(--ht-edge-strong);
    border-radius: 8px;
    background: var(--ht-surface-1);
    color: var(--ht-ink);
    transition: background-color 200ms ease, border-color 200ms ease;
}

.header-backdrop[b-3bvhw2rvnf] {
    display: none;
}

.header-static[b-3bvhw2rvnf] {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    padding-block: .5rem 1rem;
}

.header-static a[b-3bvhw2rvnf] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--ht-ink-soft);
    font-size: .875rem;
}

.header-brand:focus-visible[b-3bvhw2rvnf],
.header-nav a:focus-visible[b-3bvhw2rvnf],
.header-toggle:focus-visible[b-3bvhw2rvnf] {
    outline: 2px solid var(--ht-accent, var(--ht-live-400));
    outline-offset: 4px;
}

@media (hover: hover) and (pointer: fine) {
    .header-nav a:hover[b-3bvhw2rvnf] {
        --nav-roll-shift: -100%;
        color: var(--ht-ink);
    }

    .header-nav a:hover[b-3bvhw2rvnf]::after {
        transform: scaleX(1);
    }

    .header-toggle:hover[b-3bvhw2rvnf] {
        background: var(--ht-surface-3);
        border-color: var(--ht-ink-faint);
    }
}

@media (max-width: 1100px) {
    .header-inner[b-3bvhw2rvnf] {
        justify-content: space-between;
        gap: .75rem;
        min-height: 76px;
    }

    .header-utility[b-3bvhw2rvnf] {
        margin-left: auto;
    }

    .header-toggle[b-3bvhw2rvnf] {
        display: grid;
    }

    .header-backdrop[b-3bvhw2rvnf] {
        position: fixed;
        inset: 0;
        top: 76px;
        display: block;
        background: rgb(0 0 0 / 32%);
    }

    .header-panel[b-3bvhw2rvnf] {
        position: absolute;
        z-index: 2;
        top: calc(100% + .6rem);
        right: var(--ht-container-pad);
        left: var(--ht-container-pad);
        display: grid;
        gap: 1.25rem;
        max-height: calc(100dvh - 100px);
        overflow-y: auto;
        padding: 1.25rem;
        border: 1px solid var(--ht-edge-strong);
        border-radius: 8px;
        background: var(--ht-surface-1);
        box-shadow: var(--ht-shadow-4);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: opacity 220ms ease, transform 220ms ease, visibility 220ms;
    }

    .header-panel.is-open[b-3bvhw2rvnf] {
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .header-nav ul[b-3bvhw2rvnf] {
        display: grid;
        gap: .2rem;
    }

    .header-nav a[b-3bvhw2rvnf] {
        display: flex;
        width: 100%;
        min-height: 52px;
        padding: .7rem 1rem;
        font-size: 1.125rem;
        color: var(--ht-ink);
    }

    .header-nav a[b-3bvhw2rvnf]::after {
        top: .8rem;
        right: auto;
        bottom: .8rem;
        left: 0;
        width: 2px;
        height: auto;
        transform: scaleY(0);
    }

    .header-nav a.is-current[b-3bvhw2rvnf] {
        background: var(--ht-accent-soft, var(--ht-surface-2));
    }

    .header-nav a.is-current[b-3bvhw2rvnf]::after {
        transform: scaleY(1);
    }

    .header-nav a:focus-visible[b-3bvhw2rvnf]::after {
        transform: scaleY(1);
    }

    .header-actions[b-3bvhw2rvnf] {
        padding-top: 1rem;
        border-top: 1px solid var(--ht-edge);
    }

    .header-actions[b-3bvhw2rvnf]  .cta {
        width: 100%;
        min-height: 48px;
    }
}

@media (max-width: 640px) {
    .header-backdrop[b-3bvhw2rvnf] {
        top: 72px;
    }

    .header-inner[b-3bvhw2rvnf] {
        gap: .5rem;
        min-height: 72px;
    }

    .header-utility[b-3bvhw2rvnf] {
        gap: .45rem;
    }

    .header-brand[b-3bvhw2rvnf]  .brand-word {
        display: none;
    }

    .header-brand[b-3bvhw2rvnf]  .brand-mark {
        width: 40px;
        height: 40px;
    }

    .header-brand[b-3bvhw2rvnf]  .brand {
        gap: 0;
    }
}

@media (max-width: 360px) {
    .header-inner[b-3bvhw2rvnf] {
        gap: .35rem;
        padding-inline: 1rem;
    }

    .header-utility[b-3bvhw2rvnf] {
        gap: .35rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-header[b-3bvhw2rvnf],
    .header-panel[b-3bvhw2rvnf],
    .header-nav a[b-3bvhw2rvnf],
    .header-nav a[b-3bvhw2rvnf]::after,
    .header-toggle[b-3bvhw2rvnf] {
        transition: none;
    }

    .header-nav a[b-3bvhw2rvnf] {
        --nav-roll-shift: 0% !important;
    }
}
 .header-customer[b-3bvhw2rvnf] { color: var(--ht-ink-soft); font-size: .8rem; text-decoration: none; white-space: nowrap; padding: .7rem .5rem; }
 .header-customer:hover[b-3bvhw2rvnf] { color: var(--ht-accent); }
 .header-customer:focus-visible[b-3bvhw2rvnf] { outline: 2px solid var(--ht-accent); outline-offset: 3px; }
/* /Components/Pages/CustomerAccount.razor.rz.scp.css */
.customer-area[b-zdzmroyrzg] { max-width: 1240px; padding-block: clamp(2rem, 5vw, 4rem); color: var(--ht-ink); }
.customer-area h1[b-zdzmroyrzg] { font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.1; font-weight: 550; letter-spacing: -.04em; margin: 0 0 .7rem; }
.customer-area h2[b-zdzmroyrzg] { font-size: 1.2rem; font-weight: 550; letter-spacing: -.02em; margin: 0; }
.customer-area h3[b-zdzmroyrzg] { font-size: 1.15rem; font-weight: 550; margin: .4rem 0; }
.customer-area h4[b-zdzmroyrzg] { font-weight: 600; margin: 0 0 .7rem; }
.customer-area p[b-zdzmroyrzg] { max-width: 72ch; line-height: 1.65; }
.customer-area a[b-zdzmroyrzg] { color: var(--ht-accent); text-underline-offset: .25em; }
.customer-heading[b-zdzmroyrzg] { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.customer-heading p[b-zdzmroyrzg] { color: var(--ht-ink-muted); margin: 0; overflow-wrap: anywhere; }
.customer-nav[b-zdzmroyrzg] { display: flex; gap: .25rem; border-bottom: 1px solid var(--ht-edge-strong); margin-block: 1.5rem 2rem; overflow-x: auto; }
.customer-nav a[b-zdzmroyrzg] { flex: 0 0 auto; min-height: 48px; padding: .8rem 1.1rem; font-size: .9rem; color: var(--ht-ink-muted); text-decoration: none; border-bottom: 2px solid transparent; }
.customer-nav a[aria-current="page"][b-zdzmroyrzg] { color: var(--ht-accent); border-bottom-color: var(--ht-accent); background: var(--ht-accent-soft); }
.customer-nav a:hover[b-zdzmroyrzg] { color: var(--ht-ink); }
.customer-notice[b-zdzmroyrzg] { padding: 1rem 1.2rem; border-left: 3px solid var(--ht-accent); background: var(--ht-accent-soft); color: var(--ht-ink-soft); font-size: .9rem; margin-bottom: 1.5rem; }
.customer-summary[b-zdzmroyrzg] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-bottom: 2rem; padding-block: .5rem 1.5rem; border-bottom: 1px solid var(--ht-edge); }
.customer-summary div[b-zdzmroyrzg] { display: grid; gap: .6rem; }
.customer-summary span[b-zdzmroyrzg], .customer-help[b-zdzmroyrzg] { font-size: .8rem; color: var(--ht-ink-muted); }
.customer-summary strong[b-zdzmroyrzg] { font-family: var(--ht-font-mono); font-size: clamp(1.4rem, 2vw, 1.8rem); font-weight: 500; }
.customer-section-title[b-zdzmroyrzg] { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 2rem 0 1rem; }
.customer-section-title a[b-zdzmroyrzg] { font-size: .85rem; }
.customer-empty[b-zdzmroyrzg] { padding: 1.5rem; border: 1px dashed var(--ht-edge-strong); border-radius: 7px; color: var(--ht-ink-muted); font-size: .9rem; }
.customer-empty p[b-zdzmroyrzg] { margin: 0; }
.customer-empty a[b-zdzmroyrzg] { display: inline-block; margin-top: .8rem; }
.customer-service[b-zdzmroyrzg] { background: var(--ht-surface-1); border: 1px solid var(--ht-edge); border-radius: 9px; padding: clamp(1rem, 3vw, 1.6rem); margin-bottom: 1rem; }
.customer-service > header[b-zdzmroyrzg], .customer-service > footer[b-zdzmroyrzg] { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.customer-service > footer[b-zdzmroyrzg] { margin-top: 1rem; }
.customer-service > header > div[b-zdzmroyrzg] { min-width: 0; overflow-wrap: anywhere; }
.customer-service > footer a[b-zdzmroyrzg] { font-size: .85rem; }
.customer-status[b-zdzmroyrzg] { font-size: .8rem; padding: .35rem .7rem; border: 1px solid var(--ht-edge-live); border-radius: 5px; }
.customer-specs[b-zdzmroyrzg] { display: flex; flex-wrap: wrap; gap: 1.2rem 2.5rem; margin: 1.2rem 0; padding-block: 1rem; border-block: 1px solid var(--ht-edge); }
.customer-specs dt[b-zdzmroyrzg] { font-size: .75rem; color: var(--ht-ink-muted); margin-bottom: .4rem; }
.customer-specs dd[b-zdzmroyrzg] { margin: 0; font-size: .9rem; font-weight: 550; }
.customer-upcoming[b-zdzmroyrzg] { display: grid; grid-template-columns: 1fr 1fr auto; gap: 1rem; padding: 1rem; border-bottom: 1px solid var(--ht-edge); font-size: .9rem; }
.customer-upcoming time[b-zdzmroyrzg] { color: var(--ht-ink-muted); }
.customer-table-wrap[b-zdzmroyrzg] { overflow-x: auto; border: 1px solid var(--ht-edge); border-radius: 7px; }
.customer-area table[b-zdzmroyrzg] { border-collapse: collapse; width: 100%; font-size: .85rem; text-align: left; }
.customer-area th[b-zdzmroyrzg] { font-size: .75rem; color: var(--ht-ink-muted); font-weight: 500; background: var(--ht-surface-1); }
.customer-area th[b-zdzmroyrzg], .customer-area td[b-zdzmroyrzg] { padding: 1rem; border-bottom: 1px solid var(--ht-edge); }
.customer-area td a[b-zdzmroyrzg] { display: inline-block; margin: .25rem .6rem .25rem 0; white-space: nowrap; }
.customer-area form[b-zdzmroyrzg] { display: grid; gap: .7rem; }
.customer-area label[b-zdzmroyrzg] { font-size: .85rem; font-weight: 550; margin-top: .5rem; }
.customer-area input:not([type="hidden"])[b-zdzmroyrzg], .customer-area select[b-zdzmroyrzg], .customer-area textarea[b-zdzmroyrzg] { width: 100%; min-width: 0; padding: .8rem; min-height: 46px; border: 1px solid var(--ht-edge-strong); border-radius: 5px; background: var(--ht-ground); color: var(--ht-ink); font: inherit; font-size: .9rem; }
.customer-area textarea[b-zdzmroyrzg] { resize: vertical; }
.customer-button[b-zdzmroyrzg] { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px; width: fit-content; max-width: 100%; padding: .7rem 1.1rem; border: 1px solid var(--ht-accent); border-radius: 5px; background: var(--ht-accent); color: var(--ht-accent-ink) !important; font: inherit; font-size: .85rem; font-weight: 600; text-decoration: none; cursor: pointer; }
.customer-button--quiet[b-zdzmroyrzg] { color: var(--ht-ink-soft) !important; background: transparent; border-color: var(--ht-edge-strong); }
.customer-button:disabled[b-zdzmroyrzg] { opacity: .45; cursor: not-allowed; }
.customer-button:not(:disabled):hover[b-zdzmroyrzg] { filter: brightness(1.1); }
.customer-area :is(a, button, input, select, textarea, summary):focus-visible[b-zdzmroyrzg] { outline: 2px solid var(--ht-accent); outline-offset: 4px; }
.customer-access[b-zdzmroyrzg] { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem, 8vw, 7rem); padding-block: 2rem; max-width: 1040px; margin-inline: auto; align-items: start; }
.customer-access h1[b-zdzmroyrzg] { font-size: clamp(2rem, 4vw, 3.7rem); max-width: 16ch; margin-top: 1.6rem; }
.customer-access p[b-zdzmroyrzg] { color: var(--ht-ink-soft); font-size: .95rem; max-width: 47ch; }
.customer-access__benefits[b-zdzmroyrzg] { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2rem; color: var(--ht-ink-muted); font-size: .85rem; }
.customer-access__benefits li[b-zdzmroyrzg] { border-top: 1px solid var(--ht-edge-strong); padding-top: .7rem; }
.customer-access__form[b-zdzmroyrzg] { background: var(--ht-surface-1); padding: clamp(1.2rem, 3vw, 2rem); border: 1px solid var(--ht-edge); border-radius: 10px; }
.customer-access__form .customer-help[b-zdzmroyrzg] { font-size: .8rem; color: var(--ht-ink-muted); }
.customer-access__form > a[b-zdzmroyrzg] { display: block; font-size: .85rem; margin-top: 1rem; }
.customer-change[b-zdzmroyrzg] { padding: 1.2rem; margin-top: 1rem; background: var(--ht-ground); border-left: 2px solid var(--ht-accent); border-radius: 4px; }
.customer-inline-actions[b-zdzmroyrzg] { display: flex; gap: .7rem; flex-wrap: wrap; }
.customer-ticket[b-zdzmroyrzg] { padding: 1rem; border-bottom: 1px solid var(--ht-edge); font-size: .9rem; }
.customer-ticket summary[b-zdzmroyrzg] { cursor: pointer; }
.customer-ticket summary span[b-zdzmroyrzg] { float: right; font-size: .75rem; color: var(--ht-ink-muted); }
.customer-ticket p[b-zdzmroyrzg] { white-space: pre-wrap; overflow-wrap: anywhere; }
.customer-support[b-zdzmroyrzg] { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(1.5rem, 5vw, 4rem); padding-top: 2rem; }
.customer-support p[b-zdzmroyrzg] { color: var(--ht-ink-soft); font-size: .9rem; }
.customer-account[b-zdzmroyrzg] { max-width: 650px; display: grid; gap: 1rem; padding: 1.5rem; border: 1px solid var(--ht-edge); border-radius: 8px; background: var(--ht-surface-1); overflow-wrap: anywhere; }
.customer-account span[b-zdzmroyrzg] { font-size: .8rem; color: var(--ht-ink-muted); }
@media(max-width: 700px) { .customer-access[b-zdzmroyrzg], .customer-support[b-zdzmroyrzg] { grid-template-columns: 1fr; gap: 1.5rem; } .customer-access[b-zdzmroyrzg] { padding-top: 0; } .customer-access h1[b-zdzmroyrzg] { max-width: 20ch; } .customer-heading[b-zdzmroyrzg] { align-items: flex-start; } .customer-summary[b-zdzmroyrzg] { gap: 1rem; } .customer-summary span[b-zdzmroyrzg] { font-size: .7rem; } .customer-summary strong[b-zdzmroyrzg] { font-size: 1.2rem; } .customer-nav a[b-zdzmroyrzg] { padding-inline: .8rem; } .customer-upcoming[b-zdzmroyrzg] { grid-template-columns: 1fr auto; } .customer-upcoming time[b-zdzmroyrzg] { grid-row: 2; font-size: .8rem; } .customer-section-title[b-zdzmroyrzg] { flex-wrap: wrap; } .customer-ticket summary span[b-zdzmroyrzg] { float: none; display: block; margin-top: .5rem; } }
/* /Components/Pages/Error.razor.rz.scp.css */
.status-page[b-ig3sn58d2i] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--hts-space-5);
    padding-block: clamp(3rem, 8vw, 6rem);
}

.status-code[b-ig3sn58d2i] {
    font-family: var(--hts-font-mono);
    font-size: var(--hts-text-3xl);
    font-weight: 600;
    background: var(--hts-gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
/* /Components/Pages/ExternalIdentityReturn.razor.rz.scp.css */
.external-return[b-mcizjvnw1a] { max-width: 720px; padding-block: 4rem; color: var(--ht-ink); }
.external-return h1[b-mcizjvnw1a] { font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 550; letter-spacing: -.035em; }
.external-return p[b-mcizjvnw1a] { max-width: 60ch; line-height: 1.65; color: var(--ht-ink-soft); }
.external-return a[b-mcizjvnw1a] { display: inline-flex; min-height: 44px; align-items: center; padding: .8rem 1.2rem; border-radius: 5px; background: var(--ht-accent); color: var(--ht-accent-ink); font-size: .9rem; text-decoration: none; margin-top: 1rem; }
.external-return a:focus-visible[b-mcizjvnw1a] { outline: 2px solid var(--ht-accent); outline-offset: 4px; }
/* /Components/Pages/GameHosting.razor.rz.scp.css */
/* A product-led storefront: the available game leads, roadmap entries stay secondary. */
.catalog[b-lkw6h3dizl] {
    position: relative;
    padding-block: clamp(3.5rem, 7vw, 6rem) var(--ht-unit-pad);
}

.catalog-intro[b-lkw6h3dizl] {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(18rem, 0.7fr);
    align-items: end;
    gap: clamp(2rem, 6vw, 6rem);
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.catalog-kicker[b-lkw6h3dizl] {
    display: flex;
    align-items: center;
    gap: var(--ht-space-3);
    margin-bottom: 1.5rem;
    color: var(--ht-accent, var(--ht-live-400));
}

.catalog-title[b-lkw6h3dizl] {
    max-width: 19ch;
    font-size: clamp(2.5rem, 1.9rem + 3.8vw, 4.8rem);
    letter-spacing: -0.055em;
    line-height: 1.06;
    text-wrap: balance;
}

.catalog-lede[b-lkw6h3dizl] {
    max-width: 38rem;
    margin-top: 1.5rem;
    color: var(--ht-ink-soft);
    font-size: var(--ht-text-lg);
    line-height: 1.7;
}

.catalog-guide[b-lkw6h3dizl] {
    padding: 1.6rem 1.8rem;
    border: 1px solid var(--ht-edge);
    border-radius: 1rem;
    background: var(--ht-surface-1);
}

.catalog-guide > p[b-lkw6h3dizl] {
    color: var(--ht-ink-muted);
}

.how[b-lkw6h3dizl] {
    display: grid;
    gap: 1rem;
    margin-top: 1.25rem;
}

.how li[b-lkw6h3dizl] {
    display: grid;
    grid-template-columns: 1.7rem minmax(0, 1fr);
    gap: 0.7rem;
    align-items: baseline;
    color: var(--ht-ink-soft);
    font-size: 0.875rem;
    line-height: 1.5;
}

.how-index[b-lkw6h3dizl] {
    color: var(--ht-accent, var(--ht-live-400));
    font-size: 0.7rem;
    font-weight: 600;
}

.games[b-lkw6h3dizl] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
}

.game[b-lkw6h3dizl] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--ht-edge);
    border-radius: 1.2rem;
    background: var(--ht-surface-1);
    transition: border-color 200ms ease, box-shadow 200ms ease;
}

.game:hover[b-lkw6h3dizl] {
    border-color: var(--ht-edge-strong);
    box-shadow: var(--ht-shadow-2);
}

.game.is-primary[b-lkw6h3dizl] {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    border-color: var(--ht-edge-live);
    background: var(--ht-surface-2);
}

.game[b-lkw6h3dizl]  .game-cover {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    aspect-ratio: 16 / 8;
}

.game.is-primary[b-lkw6h3dizl]  .game-cover {
    height: 100%;
    min-height: 26rem;
    aspect-ratio: auto;
    border-right: 1px solid var(--ht-edge);
}

.game[b-lkw6h3dizl]  .cover-banner {
    transition: transform 700ms var(--ht-ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .game:hover[b-lkw6h3dizl]  .cover-banner {
        transform: scale(1.025);
    }
}

.game-body[b-lkw6h3dizl] {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    padding: clamp(1.5rem, 3vw, 2rem);
}

.game.is-primary .game-body[b-lkw6h3dizl] {
    padding: clamp(1.6rem, 3.5vw, 3rem);
}

.game-status[b-lkw6h3dizl] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    width: fit-content;
    margin-bottom: 0.3rem;
    color: var(--ht-ink-muted);
}

.is-primary .game-status[b-lkw6h3dizl] {
    color: var(--ht-accent, var(--ht-live-400));
}

.status-lamp[b-lkw6h3dizl] {
    width: 6px;
    height: 6px;
    flex: none;
    border-radius: 50%;
    background: currentColor;
}

.game-name[b-lkw6h3dizl] {
    font-size: clamp(1.8rem, 1.5rem + 1.5vw, 3rem);
    line-height: 1.12;
    letter-spacing: -0.045em;
}

.is-planned .game-name[b-lkw6h3dizl] {
    font-size: 1.6rem;
}

.game-tagline[b-lkw6h3dizl] {
    color: var(--ht-ink);
    font-size: var(--ht-text-md);
    font-weight: 550;
    line-height: 1.55;
}

.game-summary[b-lkw6h3dizl] {
    max-width: 44rem;
    color: var(--ht-ink-soft);
    font-size: 0.9rem;
    line-height: 1.75;
}

.is-planned .game-summary[b-lkw6h3dizl] {
    color: var(--ht-ink-muted);
}

.game-highlights[b-lkw6h3dizl] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem 1rem;
    margin-block: 0.4rem 0.7rem;
}

.game-highlights li[b-lkw6h3dizl] {
    position: relative;
    padding-left: 1.25rem;
    color: var(--ht-ink-soft);
    font-size: 0.8rem;
    line-height: 1.55;
}

.game-highlights li[b-lkw6h3dizl]::before {
    content: "";
    position: absolute;
    top: 0.34em;
    left: 0.1rem;
    width: 0.35rem;
    height: 0.6rem;
    border-right: 1.5px solid var(--ht-accent, var(--ht-live-400));
    border-bottom: 1.5px solid var(--ht-accent, var(--ht-live-400));
    transform: rotate(40deg);
}

.game-foot[b-lkw6h3dizl] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.3rem;
    margin-top: auto;
    padding-top: 1.5rem;
    border-top: 1px solid var(--ht-edge);
}

.game-price[b-lkw6h3dizl] {
    display: grid;
    gap: 0.3rem;
}

.price-from[b-lkw6h3dizl] {
    color: var(--ht-ink-muted);
}

.price-figure[b-lkw6h3dizl] {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    color: var(--ht-ink);
}

.price-symbol[b-lkw6h3dizl] {
    color: var(--ht-ink-soft);
    font-size: 1rem;
    font-weight: 600;
}

.price-amount[b-lkw6h3dizl] {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.04em;
}

.price-unit[b-lkw6h3dizl] {
    color: var(--ht-ink-muted);
    font-size: 0.85rem;
}

.price-range[b-lkw6h3dizl],
.price-pending[b-lkw6h3dizl] {
    color: var(--ht-ink-muted);
    font-size: 0.75rem;
    line-height: 1.55;
}

.game--request[b-lkw6h3dizl] {
    justify-content: center;
    background: var(--ht-surface-1);
}

.request[b-lkw6h3dizl] {
    display: grid;
    justify-items: start;
    gap: 1.25rem;
    padding: clamp(1.5rem, 4vw, 3rem);
}

.request-kicker[b-lkw6h3dizl] {
    color: var(--ht-accent, var(--ht-live-400));
}

.request-title[b-lkw6h3dizl] {
    max-width: 20ch;
    font-size: clamp(1.7rem, 1.4rem + 1vw, 2.3rem);
    line-height: 1.2;
    letter-spacing: -0.035em;
}

.request-body[b-lkw6h3dizl] {
    max-width: 36rem;
    color: var(--ht-ink-soft);
    font-size: 0.95rem;
    line-height: 1.75;
}

@media (max-width: 1000px) {
    .catalog-intro[b-lkw6h3dizl] {
        grid-template-columns: minmax(0, 1fr);
        gap: 2rem;
    }

    .catalog-guide[b-lkw6h3dizl] {
        padding: 1.25rem 1.5rem;
    }

    .how[b-lkw6h3dizl] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem 1.5rem;
    }

    .game.is-primary[b-lkw6h3dizl] {
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    }

    .game-highlights[b-lkw6h3dizl] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 720px) {
    .games[b-lkw6h3dizl],
    .game.is-primary[b-lkw6h3dizl] {
        grid-template-columns: minmax(0, 1fr);
    }

    .game.is-primary[b-lkw6h3dizl] {
        grid-column: auto;
    }

    .game.is-primary[b-lkw6h3dizl]  .game-cover {
        min-height: 0;
        aspect-ratio: 16 / 9;
        border-right: 0;
        border-bottom: 1px solid var(--ht-edge);
    }

    .game-foot[b-lkw6h3dizl] {
        align-items: stretch;
        flex-direction: column;
    }

    .game[b-lkw6h3dizl]  .game-cta {
        width: 100%;
    }

    .how[b-lkw6h3dizl] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .game[b-lkw6h3dizl],
    .game[b-lkw6h3dizl]  .cover-banner {
        transition: none;
    }

    .game:hover[b-lkw6h3dizl]  .cover-banner {
        transform: none;
    }
}
/* /Components/Pages/Login.razor.rz.scp.css */
.login-page[b-758nkvg2sk] {
    position: relative;
    display: flex;
    align-items: center;
    /* Fills what is left of the viewport under the header without pinning the footer off
       screen on a short window - the content decides when it needs more room. */
    min-height: calc(100dvh - var(--hts-header-height));
    padding-block: clamp(2rem, 4vw, 3.5rem);
    overflow: hidden;
    isolation: isolate;
}

.login-inner[b-758nkvg2sk] {
    width: 100%;
}
/* /Components/Pages/Minecraft.razor.rz.scp.css */
.minecraft-intro[b-lc9k90al3y] { padding-block: clamp(4rem, 8vw, 7rem) 3rem; }
.minecraft-copy[b-lc9k90al3y] { margin-block: 1.5rem 2rem; font-size: 1.05rem; color: var(--ht-ink-soft); line-height: 1.8; }
.minecraft-upgrade[b-lc9k90al3y] { padding-block: 2rem; color: var(--ht-ink-soft); line-height: 1.75; }
/* /Components/Pages/NotFound.razor.rz.scp.css */
.status-page[b-azbuam3znc] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--hts-space-5);
    padding-block: clamp(3rem, 8vw, 6rem);
}

.status-code[b-azbuam3znc] {
    font-family: var(--hts-font-mono);
    font-size: var(--hts-text-3xl);
    font-weight: 600;
    background: var(--hts-gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
/* /Components/Pages/PaymentCancel.razor.rz.scp.css */
.cancel[b-8rksxebw70] {
    position: relative;
    padding-block: clamp(4rem, 8vw, 7rem) var(--ht-unit-pad);
}

.cancel-inner[b-8rksxebw70] {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(20rem, 0.9fr);
    align-items: start;
    gap: clamp(2.5rem, 6vw, 5rem);
}

.cancel-kicker[b-8rksxebw70] {
    display: flex;
    align-items: center;
    gap: var(--ht-space-3);
    margin-bottom: var(--ht-space-5);
    color: var(--ht-ink-muted);
}

.cancel-title[b-8rksxebw70] {
    max-width: 16ch;
    font-size: var(--ht-text-5xl);
}

.cancel-lede[b-8rksxebw70] {
    max-width: 32rem;
    margin-top: var(--ht-space-5);
    color: var(--ht-ink-soft);
    font-size: var(--ht-text-lg);
    line-height: var(--ht-leading-normal);
}

.cancel-actions[b-8rksxebw70] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ht-space-3);
    margin-top: var(--ht-space-7);
}

.cancel-periods[b-8rksxebw70] {
    display: grid;
    gap: var(--ht-space-3);
    margin-top: var(--ht-space-7);
    padding-top: var(--ht-space-5);
    border-top: 1px solid var(--ht-edge);
}

.periods-label[b-8rksxebw70] {
    color: var(--ht-ink-muted);
}

.period-links[b-8rksxebw70] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ht-space-2);
}

.period-link[b-8rksxebw70] {
    display: inline-flex;
    align-items: center;
    gap: var(--ht-space-2);
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--ht-edge-strong);
    border-radius: var(--ht-radius-sm);
    color: var(--ht-ink-soft);
    font-size: var(--ht-text-sm);
    font-weight: 600;
    text-decoration: none;
    transition:
        border-color var(--ht-dur-2) var(--ht-ease-lock),
        color var(--ht-dur-2) var(--ht-ease-lock);
}

.period-link:hover[b-8rksxebw70] {
    border-color: var(--ht-ink-faint);
    color: var(--ht-ink);
}

.period-save[b-8rksxebw70] {
    color: var(--ht-data-400);
    font-size: var(--ht-text-2xs);
    letter-spacing: 0.06em;
}

.cancel-panel[b-8rksxebw70] {
    min-width: 0;
}

@media (max-width: 960px) {
    .cancel-inner[b-8rksxebw70] {
        grid-template-columns: minmax(0, 1fr);
    }

    .cancel-panel[b-8rksxebw70] {
        order: -1;
    }

    .cancel-actions[b-8rksxebw70]  .cta {
        width: 100%;
    }
}
/* /Components/Pages/PaymentSuccess.razor.rz.scp.css */
.result[b-2cllt9ep4y] {
    position: relative;
    padding-block: clamp(4rem, 8vw, 7rem) var(--ht-unit-pad);
}

.result-inner[b-2cllt9ep4y] {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(20rem, 0.9fr);
    align-items: start;
    gap: clamp(2.5rem, 6vw, 5rem);
}

.result-kicker[b-2cllt9ep4y] {
    display: flex;
    align-items: center;
    gap: var(--ht-space-3);
    margin-bottom: var(--ht-space-5);
    color: var(--ht-ink-muted);
}

.result-title[b-2cllt9ep4y] {
    max-width: 16ch;
    font-size: var(--ht-text-5xl);
}

.result-lede[b-2cllt9ep4y] {
    max-width: 32rem;
    margin-top: var(--ht-space-5);
    color: var(--ht-ink-soft);
    font-size: var(--ht-text-lg);
    line-height: var(--ht-leading-normal);
}

.result-facts[b-2cllt9ep4y] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ht-space-6);
    margin: var(--ht-space-7) 0 0;
    padding-top: var(--ht-space-5);
    border-top: 1px solid var(--ht-edge);
}

.result-facts div[b-2cllt9ep4y] {
    display: grid;
    gap: 0.3rem;
}

.result-facts dt[b-2cllt9ep4y] {
    color: var(--ht-ink-muted);
}

.result-facts dd[b-2cllt9ep4y] {
    margin: 0;
    color: var(--ht-ink);
    font-size: var(--ht-text-md);
    font-weight: 600;
}

.result-actions[b-2cllt9ep4y] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ht-space-4);
    margin-top: var(--ht-space-7);
}

.result-refresh[b-2cllt9ep4y],
.result-contact[b-2cllt9ep4y] {
    color: var(--ht-ink-muted);
    font-size: var(--ht-text-sm);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.result-refresh:hover[b-2cllt9ep4y],
.result-contact:hover[b-2cllt9ep4y] {
    color: var(--ht-ink);
}

/* -- Panel --------------------------------------------------------------------------------- */

.result-panel[b-2cllt9ep4y] {
    position: sticky;
    top: calc(var(--ht-header-h) + var(--ht-space-5));
    padding-bottom: var(--ht-space-3);
    border: 1px solid var(--ht-edge-strong);
    border-radius: var(--ht-radius-md);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.028) 0%, transparent 34%),
        var(--ht-surface-2);
    box-shadow: var(--ht-rim), var(--ht-shadow-3);
    overflow: hidden;
}

.panel-head[b-2cllt9ep4y] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--ht-space-3);
    padding: var(--ht-space-4) var(--ht-space-5);
    border-bottom: 1px solid var(--ht-edge);
    background: var(--ht-surface-inset);
}

.panel-lamp[b-2cllt9ep4y] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ht-graphite-500);
}

.panel-lamp.is-live[b-2cllt9ep4y] {
    background: var(--ht-live-500);
    box-shadow: var(--ht-lamp-live);
}

.panel-lamp.is-breathing[b-2cllt9ep4y] {
    animation: result-breathe-b-2cllt9ep4y 2.4s var(--ht-ease-in-out) infinite;
}

.panel-lamp.is-warn[b-2cllt9ep4y] {
    background: var(--ht-warn-500);
    box-shadow: 0 0 0 1px rgba(240, 160, 60, 0.4), 0 0 10px 1px rgba(240, 160, 60, 0.5);
}

.panel-id[b-2cllt9ep4y] {
    color: var(--ht-ink);
    font-size: var(--ht-text-sm);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.panel-state[b-2cllt9ep4y] {
    color: var(--ht-live-400);
}

.result-panel[b-2cllt9ep4y]  .timeline {
    padding: var(--ht-space-3) var(--ht-space-5);
}

@keyframes result-breathe-b-2cllt9ep4y {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.35;
    }
}

@media (max-width: 960px) {
    .result-inner[b-2cllt9ep4y] {
        grid-template-columns: minmax(0, 1fr);
    }

    .result-panel[b-2cllt9ep4y] {
        position: static;
    }
}

@media (prefers-reduced-motion: reduce) {
    .panel-lamp.is-breathing[b-2cllt9ep4y] {
        animation: none;
    }
}
/* /Components/Pages/PlanReview.razor.rz.scp.css */
.review[b-sikf9gh33v] {
    position: relative;
    padding-block: clamp(3rem, 6vw, 5.5rem) clamp(4rem, 7vw, 7rem);
    background: var(--ht-ground);
}

.review-inner[b-sikf9gh33v] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(20rem, .9fr);
    align-items: start;
    gap: clamp(2.5rem, 6vw, 5rem);
}

.review-copy[b-sikf9gh33v] {
    min-width: 0;
}

.review--empty .hts-container[b-sikf9gh33v] {
    display: grid;
    justify-items: start;
    gap: 1.25rem;
}

.review-crumbs[b-sikf9gh33v] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .65rem;
    margin-bottom: 1.25rem;
    color: var(--ht-ink-muted);
    font-size: .75rem;
    font-weight: 500;
    line-height: 1.6;
}

.review-crumbs a[b-sikf9gh33v] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--ht-ink-muted);
    text-decoration: none;
    text-underline-offset: 3px;
    transition: color 180ms ease;
}

.crumb-sep[b-sikf9gh33v] {
    color: var(--ht-ink-faint);
}

.crumb-here[b-sikf9gh33v] {
    color: var(--ht-accent);
}

.review-title[b-sikf9gh33v] {
    max-width: 14ch;
    color: var(--ht-ink);
    font-size: clamp(2.25rem, 4.5vw, 3.8rem);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -.05em;
}

.review-lede[b-sikf9gh33v] {
    max-width: 34rem;
    margin-top: 1.5rem;
    color: var(--ht-ink-soft);
    font-size: 1rem;
    line-height: 1.8;
}

.review-periods[b-sikf9gh33v] {
    display: grid;
    gap: .9rem;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--ht-edge);
}

.periods-label[b-sikf9gh33v] {
    color: var(--ht-ink-muted);
    font-size: .6875rem;
    letter-spacing: .08em;
}

.period-links[b-sikf9gh33v] {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

.period-link[b-sikf9gh33v] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 44px;
    padding: .65rem .9rem;
    border: 1px solid var(--ht-edge-strong);
    border-radius: 9px;
    background: var(--ht-surface-1);
    color: var(--ht-ink-soft);
    font-size: .8125rem;
    font-weight: 550;
    line-height: 1.5;
    text-decoration: none;
    transition: border-color 180ms ease, color 180ms ease, background-color 180ms ease;
}

.period-link.is-current[b-sikf9gh33v] {
    border-color: var(--ht-accent);
    background: var(--ht-accent-soft);
    color: var(--ht-ink);
}

.period-save[b-sikf9gh33v] {
    color: var(--ht-accent);
    font-size: .625rem;
    letter-spacing: .02em;
}

.review-change[b-sikf9gh33v] {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    min-height: 44px;
    color: var(--ht-ink-muted);
    font-size: .8125rem;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.review-form[b-sikf9gh33v] {
    display: grid;
    justify-items: start;
    gap: 1rem;
    margin-top: 2rem;
}

.review-promo[b-sikf9gh33v] {
    display: grid;
    gap: .6rem;
    width: 100%;
    max-width: 30rem;
    margin-bottom: .5rem;
}

.review-promo label[b-sikf9gh33v] {
    color: var(--ht-ink-muted);
    font-size: .6875rem;
    letter-spacing: .08em;
}

.review-promo-row[b-sikf9gh33v] {
    display: flex;
    min-width: 0;
}

.review-promo input[b-sikf9gh33v] {
    width: 100%;
    min-height: 48px;
    padding: .75rem 1rem;
    border: 1px solid var(--ht-edge-strong);
    border-radius: 10px;
    background: var(--ht-surface-1);
    color: var(--ht-ink);
    font: inherit;
    font-size: .9375rem;
    line-height: 1.5;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

.review-promo input[b-sikf9gh33v]::placeholder {
    color: var(--ht-ink-muted);
    opacity: 1;
}

.review-promo input:focus[b-sikf9gh33v] {
    outline: 0;
    border-color: var(--ht-accent);
    box-shadow: 0 0 0 3px var(--ht-accent-soft);
}

.review-form[b-sikf9gh33v]  .review-cta {
    min-width: 16rem;
    min-height: 52px;
}

.review-note[b-sikf9gh33v] {
    max-width: 32rem;
    color: var(--ht-ink-muted);
    font-size: .8125rem;
    line-height: 1.75;
}

.review-note.is-warn[b-sikf9gh33v] {
    padding: 1rem;
    border: 1px solid color-mix(in srgb, var(--ht-warn-500) 35%, var(--ht-edge));
    border-radius: 10px;
    background: color-mix(in srgb, var(--ht-warn-500) 5%, var(--ht-surface-1));
    color: var(--ht-ink-soft);
}

.review-contact[b-sikf9gh33v] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--ht-accent);
    font-size: .8125rem;
    text-underline-offset: 3px;
}

.review-error[b-sikf9gh33v] {
    padding: 1rem;
    border: 1px solid color-mix(in srgb, var(--ht-fault-500) 40%, var(--ht-edge));
    border-radius: 10px;
    background: color-mix(in srgb, var(--ht-fault-500) 5%, var(--ht-surface-1));
    color: var(--ht-fault-500);
    font-size: .8125rem;
    line-height: 1.75;
}

.review-crumbs a:focus-visible[b-sikf9gh33v],
.period-link:focus-visible[b-sikf9gh33v],
.review-change:focus-visible[b-sikf9gh33v],
.review-contact:focus-visible[b-sikf9gh33v] {
    outline: 2px solid var(--ht-accent);
    outline-offset: 4px;
    border-radius: 3px;
}

.review-panel[b-sikf9gh33v] {
    position: sticky;
    top: calc(var(--ht-header-h) + 1.5rem);
    min-width: 0;
}

.review-currencies[b-sikf9gh33v] {
    margin-bottom: .75rem;
}

@media (hover: hover) and (pointer: fine) {
    .review-crumbs a:hover[b-sikf9gh33v],
    .review-change:hover[b-sikf9gh33v] {
        color: var(--ht-ink);
    }

    .period-link:hover[b-sikf9gh33v] {
        border-color: var(--ht-ink-faint);
        color: var(--ht-ink);
    }

    .period-link.is-current:hover[b-sikf9gh33v] {
        border-color: var(--ht-accent);
    }

    .review-contact:hover[b-sikf9gh33v] {
        color: var(--ht-ink);
    }
}

@media (max-width: 960px) {
    .review-inner[b-sikf9gh33v] {
        grid-template-columns: minmax(0, 1fr);
    }

    .review-panel[b-sikf9gh33v] {
        position: static;
        order: -1;
    }

    .review-form[b-sikf9gh33v] {
        justify-items: stretch;
    }

    .review-form[b-sikf9gh33v]  .review-cta {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 560px) {
    .review-crumbs[b-sikf9gh33v] {
        gap: .45rem;
        font-size: .6875rem;
    }

    .period-links[b-sikf9gh33v] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .period-link[b-sikf9gh33v] {
        width: 100%;
        padding-inline: .6rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .review-crumbs a[b-sikf9gh33v],
    .period-link[b-sikf9gh33v],
    .review-promo input[b-sikf9gh33v] {
        transition: none;
    }
}
/* /Components/Pages/ProjectZomboid.razor.rz.scp.css */
/* The game is the product. Artwork and real catalogue facts make the first choice clear. */
.zomboid-hero[b-344mwbbd57] {
    position: relative;
    padding-block: clamp(3rem, 6vw, 5.5rem);
}

.hero-layout[b-344mwbbd57] {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 5rem);
}

.hero-copy[b-344mwbbd57] {
    min-width: 0;
}

.hero-crumbs[b-344mwbbd57] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 1.4rem;
    font-size: 0.8rem;
    line-height: 1.6;
}

.hero-crumbs a[b-344mwbbd57] {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--ht-ink-muted);
    text-decoration: none;
}

.crumb-sep[b-344mwbbd57] {
    color: var(--ht-ink-faint);
}

.crumb-here[b-344mwbbd57] {
    color: var(--ht-accent, var(--ht-live-400));
}

.hero-title[b-344mwbbd57] {
    max-width: 17ch;
    font-size: clamp(2.5rem, 1.9rem + 3.4vw, 4.65rem);
    line-height: 1.06;
    letter-spacing: -0.055em;
    text-wrap: balance;
}

.hero-lede[b-344mwbbd57] {
    max-width: 36rem;
    margin-top: 1.5rem;
    color: var(--ht-ink-soft);
    font-size: var(--ht-text-lg);
    line-height: 1.75;
}

.hero-actions[b-344mwbbd57] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-top: 2rem;
}

.hero-facts[b-344mwbbd57] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 2.3rem;
    margin: 2rem 0 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--ht-edge);
}

.hero-facts div[b-344mwbbd57] {
    display: grid;
    gap: 0.55rem;
}

.hero-facts dt[b-344mwbbd57] {
    color: var(--ht-ink-muted);
}

.hero-facts dd[b-344mwbbd57] {
    margin: 0;
    color: var(--ht-ink);
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: -0.04em;
    line-height: 1.2;
}

.fact-unit[b-344mwbbd57] {
    margin-left: 0.3rem;
    color: var(--ht-ink-muted);
    font-size: 0.8rem;
    font-weight: 400;
    letter-spacing: 0;
}

.hero-art[b-344mwbbd57] {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--ht-edge-strong);
    border-radius: 1.3rem;
    background: var(--ht-surface-2);
    box-shadow: var(--ht-shadow-3);
}

.hero-art[b-344mwbbd57]  .product-cover {
    min-height: 22rem;
    aspect-ratio: 5 / 4;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.hero-art[b-344mwbbd57]  .cover-banner {
    transition: transform 750ms var(--ht-ease-out);
}

.hero-art-caption[b-344mwbbd57] {
    display: grid;
    gap: 0.6rem;
    padding: 1.4rem 1.6rem;
    border-top: 1px solid var(--ht-edge);
}

.hero-art-caption span[b-344mwbbd57] {
    color: var(--ht-accent, var(--ht-live-400));
}

.hero-art-caption p[b-344mwbbd57] {
    color: var(--ht-ink-soft);
    font-size: 0.9rem;
    line-height: 1.65;
}

/* Skiper 40 Link000: a directional underline follows hover and keyboard focus. */
.hero-crumbs a[b-344mwbbd57]::after,
.back-link span[b-344mwbbd57]::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0.45rem;
    left: 0;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-crumbs a:hover[b-344mwbbd57],
.hero-crumbs a:focus-visible[b-344mwbbd57] {
    color: var(--ht-ink);
}

.hero-crumbs a:hover[b-344mwbbd57]::after,
.hero-crumbs a:focus-visible[b-344mwbbd57]::after,
.back-link:hover span[b-344mwbbd57]::after,
.back-link:focus-visible span[b-344mwbbd57]::after {
    transform: scaleX(1);
    transform-origin: left;
}

@media (hover: hover) and (pointer: fine) {
    .hero-art:hover[b-344mwbbd57]  .cover-banner {
        transform: scale(1.035);
    }
}

/* Shared platform features stay below the purchase choice. */
.features[b-344mwbbd57] {
    padding-block: var(--ht-unit-pad);
    border-top: 1px solid var(--ht-edge);
}

.features-head[b-344mwbbd57] {
    max-width: 44rem;
    margin-bottom: 2rem;
}

.features-kicker[b-344mwbbd57] {
    margin-bottom: 1rem;
    color: var(--ht-accent, var(--ht-live-400));
}

.features-title[b-344mwbbd57] {
    font-size: var(--ht-text-3xl);
    line-height: 1.15;
    letter-spacing: -0.04em;
    text-wrap: balance;
}

.feature-grid[b-344mwbbd57] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.feature-grid li[b-344mwbbd57] {
    display: grid;
    align-content: start;
    gap: 0.8rem;
    padding: 1.7rem;
    border: 1px solid var(--ht-edge);
    border-radius: 0.9rem;
    background: var(--ht-surface-1);
}

.feature-index[b-344mwbbd57] {
    color: var(--ht-accent, var(--ht-live-400));
    font-size: 0.7rem;
    letter-spacing: 0.04em;
}

.feature-name[b-344mwbbd57] {
    font-size: 1rem;
    font-weight: 620;
    line-height: 1.4;
    letter-spacing: -0.02em;
}

.feature-detail[b-344mwbbd57] {
    color: var(--ht-ink-soft);
    font-size: 0.875rem;
    line-height: 1.75;
}

.zomboid-back[b-344mwbbd57] {
    padding-block: 2rem;
    border-top: 1px solid var(--ht-edge);
}

.back-link[b-344mwbbd57] {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    min-height: 44px;
    color: var(--ht-ink-muted);
    font-size: 0.875rem;
    text-decoration: none;
    transition: color 200ms ease;
}

.back-link span[b-344mwbbd57] {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 44px;
}

.back-link[b-344mwbbd57]  svg {
    transform: rotate(180deg);
}

.back-link:hover[b-344mwbbd57] {
    color: var(--ht-ink);
}

@media (max-width: 1000px) {
    .hero-layout[b-344mwbbd57] {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
        gap: 2rem;
    }

    .hero-art[b-344mwbbd57]  .product-cover {
        min-height: 24rem;
        aspect-ratio: 4 / 5;
    }

    .hero-title[b-344mwbbd57] {
        font-size: clamp(2.5rem, 4.8vw, 3.6rem);
    }

    .hero-facts[b-344mwbbd57] {
        gap: 1.25rem 1.5rem;
    }

    .feature-grid[b-344mwbbd57] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .hero-layout[b-344mwbbd57] {
        grid-template-columns: minmax(0, 1fr);
    }

    .hero-title[b-344mwbbd57] {
        max-width: 20ch;
        font-size: clamp(2.3rem, 6.3vw, 3.8rem);
    }

    .hero-art[b-344mwbbd57]  .product-cover {
        min-height: 0;
        aspect-ratio: 16 / 10;
    }

    .hero-art-caption[b-344mwbbd57] {
        padding: 1.2rem;
    }
}

@media (max-width: 560px) {
    .feature-grid[b-344mwbbd57] {
        grid-template-columns: minmax(0, 1fr);
    }

    .feature-grid li[b-344mwbbd57] {
        padding: 1.4rem;
    }

    .hero-actions[b-344mwbbd57]  .cta {
        width: 100%;
    }

    .hero-facts[b-344mwbbd57] {
        gap: 1.2rem;
    }

    .hero-facts dd[b-344mwbbd57] {
        font-size: 1.4rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-art[b-344mwbbd57]  .cover-banner,
    .hero-crumbs a[b-344mwbbd57]::after,
    .back-link[b-344mwbbd57],
    .back-link span[b-344mwbbd57]::after {
        transition: none;
    }

    .hero-art:hover[b-344mwbbd57]  .cover-banner {
        transform: none;
    }
}
/* /Components/Pages/ProvisioningLab.razor.rz.scp.css */
.lab[b-oxow12xns8] {
    position: relative;
    min-height: calc(100dvh - var(--hts-header-height));
    padding-block: clamp(2.5rem, 5vw, 4.5rem);
}

/* ── Closed ────────────────────────────────────────────────────────────── */

.lab-closed[b-oxow12xns8] {
    display: grid;
    justify-items: start;
    gap: var(--hts-space-4);
    max-width: 40rem;
    padding: var(--hts-space-8);
    border: 1px dashed var(--hts-rule);
    border-radius: var(--hts-radius-lg);
    background: var(--hts-surface);
}

.closed-badge[b-oxow12xns8] {
    padding: 0.2rem 0.6rem;
    border: 1px solid var(--hts-border-strong);
    border-radius: var(--ht-radius-xs);
    color: var(--hts-ink-muted);
    font-family: var(--hts-font-mono);
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.2em;
}

.closed-title[b-oxow12xns8] {
    font-size: var(--hts-text-3xl);
}

.closed-copy[b-oxow12xns8] {
    color: var(--hts-ink-soft);
    line-height: var(--hts-leading-relaxed);
}

/* ── Head ──────────────────────────────────────────────────────────────── */

.lab-head[b-oxow12xns8] {
    max-width: 44rem;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.lab-kicker[b-oxow12xns8] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: var(--hts-space-4);
    /* Purple rather than blue: this page is not part of the product, and it should not look like
       it is. */
    color: var(--ht-ink-muted);
    font-family: var(--hts-font-mono);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.2em;
}

.kicker-rule[b-oxow12xns8] {
    width: 2.5rem;
    height: 1px;
    flex: none;
    background: var(--ht-edge-strong);
}

.lab-title[b-oxow12xns8] {
    font-size: clamp(2rem, 1.4rem + 2vw, 2.8rem);
    letter-spacing: -0.03em;
}

.lab-lede[b-oxow12xns8] {
    max-width: 34rem;
    margin-top: var(--hts-space-4);
    color: var(--hts-ink-soft);
    line-height: var(--hts-leading-relaxed);
}

/* ── Layout ────────────────────────────────────────────────────────────── */

.lab-grid[b-oxow12xns8] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: var(--hts-space-5);
}

.panel[b-oxow12xns8] {
    display: grid;
    align-content: start;
    gap: var(--hts-space-4);
    padding: var(--hts-space-5);
    border: 1px solid var(--hts-border-strong);
    border-radius: var(--hts-radius-md);
    background: var(--hts-surface);
    box-shadow: var(--hts-rim);
}

.panel-head[b-oxow12xns8] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--hts-space-3);
    padding-bottom: var(--hts-space-4);
    border-bottom: 1px solid var(--hts-border);
}

.panel-title[b-oxow12xns8] {
    color: var(--hts-ink);
    font-family: var(--hts-font-mono);
    font-size: 0.625rem;
    font-weight: 620;
    letter-spacing: 0.22em;
}

/* ── Readouts ──────────────────────────────────────────────────────────── */

.readout[b-oxow12xns8] {
    display: grid;
    gap: var(--hts-space-4);
}

.readout--wide[b-oxow12xns8] {
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.readout dt[b-oxow12xns8] {
    margin-bottom: 0.3rem;
    color: var(--hts-ink-muted);
    font-family: var(--hts-font-mono);
    font-size: 0.5rem;
    letter-spacing: 0.2em;
}

.readout dd[b-oxow12xns8] {
    color: var(--hts-ink);
    font-family: var(--hts-font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
}

.readout dd.is-wrap[b-oxow12xns8] {
    overflow-wrap: anywhere;
}

.readout dd.is-ok[b-oxow12xns8] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--hts-state-online);
}

.readout dd.is-bad[b-oxow12xns8] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--hts-purple-300);
}

.dot[b-oxow12xns8] {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 8px 1px currentColor;
}

.panel-message[b-oxow12xns8],
.panel-hint[b-oxow12xns8] {
    color: var(--hts-ink-soft);
    font-size: var(--hts-text-sm);
    line-height: var(--hts-leading-normal);
}

.panel-hint[b-oxow12xns8] {
    color: var(--hts-ink-muted);
}

.panel-hint.is-warn[b-oxow12xns8] {
    color: var(--hts-purple-300);
}

/* ── Node list ─────────────────────────────────────────────────────────── */

.node-list[b-oxow12xns8] {
    display: grid;
    gap: 2px;
}

.node[b-oxow12xns8] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 0.25rem var(--hts-space-3);
    padding: var(--hts-space-3);
    border: 1px solid var(--hts-border);
    border-radius: var(--hts-radius-xs);
    background: var(--hts-surface-inset);
}

.node.is-blocked[b-oxow12xns8] {
    border-style: dashed;
    opacity: 0.7;
}

.node-name[b-oxow12xns8] {
    color: var(--hts-ink);
    font-family: var(--hts-font-mono);
    font-size: 0.6875rem;
    font-weight: 620;
}

.node-free[b-oxow12xns8] {
    color: var(--hts-blue-300);
    font-family: var(--hts-font-mono);
    font-size: 0.5625rem;
    text-align: right;
}

.node-meta[b-oxow12xns8] {
    grid-column: 1 / -1;
    color: var(--hts-ink-muted);
    font-family: var(--hts-font-mono);
    font-size: 0.5rem;
    letter-spacing: 0.12em;
}

.node-warn[b-oxow12xns8] {
    margin-left: 0.4rem;
    padding: 0.05rem 0.3rem;
    border: 1px solid var(--hts-border-brand);
    border-radius: 2px;
    color: var(--hts-purple-300);
}

/* ── Fields ────────────────────────────────────────────────────────────── */

.field[b-oxow12xns8] {
    display: grid;
    gap: 0.4rem;
}

.field-label[b-oxow12xns8] {
    color: var(--hts-ink-muted);
    font-family: var(--hts-font-mono);
    font-size: 0.5rem;
    font-weight: 600;
    letter-spacing: 0.2em;
}

.field-input[b-oxow12xns8] {
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--hts-border-strong);
    border-radius: var(--hts-radius-sm);
    background: var(--hts-surface-inset);
    color: var(--hts-ink);
    font-family: var(--hts-font-mono);
    font-size: var(--hts-text-sm);
}

.field-input:focus-visible[b-oxow12xns8] {
    outline: none;
    border-color: var(--hts-purple-400);
    box-shadow: var(--ht-ring);
}

/* The exact numbers that will cross the wire, in the panel's units. */
.payload[b-oxow12xns8] {
    margin: 0;
    padding: var(--hts-space-4);
    border: 1px solid var(--hts-console-border);
    border-radius: var(--hts-radius-sm);
    background: var(--hts-console);
    color: var(--hts-console-accent);
    font-family: var(--hts-font-mono);
    font-size: 0.625rem;
    line-height: 1.7;
    overflow-x: auto;
    white-space: pre;
}

/* ── Actions and confirmation ──────────────────────────────────────────── */

.lab-actions[b-oxow12xns8] {
    padding-top: var(--hts-space-2);
}

.confirm[b-oxow12xns8] {
    display: grid;
    gap: var(--hts-space-4);
    padding: var(--hts-space-4);
    border: 1px solid var(--hts-border-brand);
    border-radius: var(--hts-radius-md);
    background: var(--hts-state-busy-bg);
}

.confirm-copy[b-oxow12xns8] {
    color: var(--hts-ink);
    font-size: var(--hts-text-sm);
    line-height: var(--hts-leading-normal);
}

.confirm-copy code[b-oxow12xns8] {
    color: var(--hts-purple-300);
}

.confirm-actions[b-oxow12xns8] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hts-space-3);
}

/* ── Result ────────────────────────────────────────────────────────────── */

.result[b-oxow12xns8] {
    margin-top: var(--hts-space-5);
}

.result.is-ok[b-oxow12xns8] {
    border-color: var(--hts-border-blue);
}

.result.is-bad[b-oxow12xns8] {
    border-color: var(--hts-border-brand);
}

.result-message[b-oxow12xns8] {
    color: var(--hts-ink-soft);
    font-size: var(--hts-text-base);
    line-height: var(--hts-leading-normal);
}

@media (max-width: 900px) {
    .lab-grid[b-oxow12xns8] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/Pages/Register.razor.rz.scp.css */
.register-page[b-yh573hxcrk] {
    position: relative;
    padding-block: clamp(3.5rem, 8vw, 7rem);
    min-height: 100vh;
    overflow: hidden;
}

/* One low bloom, no ruling. */
.register-page[b-yh573hxcrk]::before {
    content: "";
    position: absolute;
    top: -14%;
    left: 50%;
    width: min(60rem, 92vw);
    height: 34rem;
    background: radial-gradient(ellipse at center, rgba(176, 105, 255, 0.14) 0%, transparent 68%);
    filter: blur(80px);
    transform: translateX(-50%);
    pointer-events: none;
}

.register-inner[b-yh573hxcrk] {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: start;
    gap: clamp(2.5rem, 6vw, 5rem);
}

/* ── Card ──────────────────────────────────────────────────────────────── */

.register-card[b-yh573hxcrk] {
    padding: clamp(1.5rem, 3vw, 2.5rem);
    border: 1px solid var(--hts-border-strong);
    border-radius: var(--hts-radius-lg);
    background: var(--hts-surface);
    box-shadow: var(--hts-rim), var(--hts-shadow-md);
}

.register-kicker[b-yh573hxcrk] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--ht-ink-muted);
    font-family: var(--hts-font-mono);
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.22em;
}

.kicker-dot[b-yh573hxcrk] {
    width: 0.32rem;
    height: 0.32rem;
    border-radius: 50%;
    background: currentColor;
    box-shadow: var(--ht-lamp-live);
}

.register-title[b-yh573hxcrk] {
    margin-top: var(--hts-space-4);
    font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.5rem);
    font-weight: 460;
    line-height: 1.06;
    letter-spacing: -0.03em;
}

.register-lede[b-yh573hxcrk] {
    margin-top: var(--hts-space-4);
    color: var(--hts-ink-soft);
    font-size: var(--hts-text-md);
    line-height: var(--hts-leading-relaxed);
}

/* ── Form ──────────────────────────────────────────────────────────────── */

.register-form[b-yh573hxcrk] {
    display: grid;
    gap: var(--hts-space-5);
    margin-top: var(--hts-space-6);
}

.field[b-yh573hxcrk] {
    display: grid;
    gap: 0.4rem;
}

.field-label[b-yh573hxcrk] {
    color: var(--hts-ink-muted);
    font-family: var(--hts-font-mono);
    font-size: 0.5625rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.field-input[b-yh573hxcrk] {
    width: 100%;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--hts-border);
    border-radius: var(--hts-radius-sm);
    background: var(--hts-surface-inset);
    color: var(--hts-ink);
    font-family: inherit;
    font-size: var(--hts-text-md);
    transition:
        border-color var(--hts-duration-fast) var(--hts-ease),
        box-shadow var(--hts-duration-fast) var(--hts-ease);
}

.field-input[b-yh573hxcrk]::placeholder {
    color: var(--hts-ink-muted);
}

.field-input:focus-visible[b-yh573hxcrk] {
    border-color: var(--hts-border-blue);
    box-shadow: var(--ht-ring);
    outline: none;
}

/* Invalid is a colour AND a message. The message is what a colour-blind visitor reads. */
.field-input.is-invalid[b-yh573hxcrk] {
    border-color: rgba(248, 113, 113, 0.6);
}

.field-message[b-yh573hxcrk] {
    color: #f87171;
    font-size: var(--hts-text-sm);
}

.field-hint[b-yh573hxcrk] {
    color: var(--hts-ink-muted);
    font-size: var(--hts-text-sm);
    line-height: var(--hts-leading-normal);
}

/* The explanation for the field that is not here. */
.register-password-note[b-yh573hxcrk] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: var(--hts-space-4);
    border: 1px solid var(--hts-border-blue);
    border-radius: var(--hts-radius-sm);
    background: rgba(61, 92, 224, 0.08);
    color: var(--hts-ink-soft);
    font-size: var(--hts-text-sm);
    line-height: var(--hts-leading-normal);
}

.note-mark[b-yh573hxcrk] {
    width: 0.4rem;
    height: 0.4rem;
    flex: none;
    margin-top: 0.42em;
    border-radius: 1px;
    background: var(--hts-blue-300);
    transform: rotate(45deg);
}

.register-submit[b-yh573hxcrk] {
    width: 100%;
}

.notice-slot:empty[b-yh573hxcrk] {
    display: none;
}

.notice[b-yh573hxcrk] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: var(--hts-space-4);
    border: 1px solid var(--hts-warning-border, rgba(255, 176, 82, 0.45));
    border-radius: var(--hts-radius-sm);
    background: rgba(255, 176, 82, 0.09);
    color: var(--hts-ink-soft);
    font-size: var(--hts-text-sm);
    line-height: var(--hts-leading-normal);
}

.notice-mark[b-yh573hxcrk] {
    width: 0.4rem;
    height: 0.4rem;
    flex: none;
    margin-top: 0.42em;
    border-radius: 50%;
    background: var(--hts-warning, #ffb052);
}

.register-foot[b-yh573hxcrk] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: var(--hts-space-6);
    padding-top: var(--hts-space-5);
    border-top: 1px solid var(--hts-border);
    color: var(--hts-ink-muted);
    font-size: var(--hts-text-sm);
}

.link-action[b-yh573hxcrk] {
    color: var(--hts-blue-300);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.link-action.is-strong[b-yh573hxcrk] {
    font-weight: 560;
}

.link-action:hover[b-yh573hxcrk] {
    color: var(--hts-blue-200);
}

/* ── Steps ─────────────────────────────────────────────────────────────── */

.register-steps[b-yh573hxcrk] {
    position: sticky;
    top: calc(var(--hts-header-height) + var(--hts-space-8));
    display: grid;
    align-content: start;
    gap: var(--hts-space-5);
}

.steps-title[b-yh573hxcrk] {
    color: var(--hts-ink);
    font-size: var(--hts-text-lg);
    font-weight: 620;
    letter-spacing: -0.015em;
}

.steps[b-yh573hxcrk] {
    display: grid;
    gap: 0;
    counter-reset: step;
}

.step[b-yh573hxcrk] {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: var(--hts-space-4);
    padding-block: var(--hts-space-4);
    border-bottom: 1px solid var(--hts-border);
}

.step:last-child[b-yh573hxcrk] {
    border-bottom: 0;
}

.step-index[b-yh573hxcrk] {
    color: var(--hts-purple-300);
    font-family: var(--hts-font-mono);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.step-body[b-yh573hxcrk] {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
}

.step-title[b-yh573hxcrk] {
    color: var(--hts-ink);
    font-size: var(--hts-text-md);
    font-weight: 560;
}

.step-detail[b-yh573hxcrk] {
    color: var(--hts-ink-muted);
    font-size: var(--hts-text-sm);
    line-height: var(--hts-leading-normal);
}

.register-back[b-yh573hxcrk] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--hts-ink-muted);
    font-family: var(--hts-font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    transition: color var(--hts-duration-fast) var(--hts-ease);
}

.back-arrow[b-yh573hxcrk] {
    width: 1.5rem;
    height: 1px;
    background: currentColor;
}

.register-back:hover[b-yh573hxcrk] {
    color: var(--hts-blue-300);
}

@media (max-width: 900px) {
    .register-inner[b-yh573hxcrk] {
        grid-template-columns: minmax(0, 1fr);
    }

    .register-steps[b-yh573hxcrk] {
        position: static;
    }
}
/* /Components/Pages/Trial.razor.rz.scp.css */
.trial-page[b-c6u8qzekeu] { padding-block: clamp(2rem, 5vw, 4rem); }
.trial-page__layout[b-c6u8qzekeu] { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4rem); max-width: 1120px; align-items: start; }
.trial-page__intro[b-c6u8qzekeu] { position: sticky; top: 7rem; }
.trial-page__back[b-c6u8qzekeu], .trial-page__refresh[b-c6u8qzekeu] { display: inline-flex; align-items: center; min-height: 44px; color: var(--ht-accent); font-size: .85rem; text-underline-offset: .25em; }
.trial-page__kicker[b-c6u8qzekeu] { margin-top: .8rem; color: var(--ht-ink-muted); }
.trial-page h1[b-c6u8qzekeu] { margin: .7rem 0 1rem; font-size: clamp(2rem, 3.2vw, 3rem); line-height: 1.07; font-weight: 550; letter-spacing: -.045em; max-width: 16ch; color: var(--ht-ink); }
.trial-page h2[b-c6u8qzekeu] { margin-bottom: .8rem; font-size: clamp(1.35rem, 2vw, 1.7rem); line-height: 1.2; letter-spacing: -.025em; font-weight: 550; color: var(--ht-ink); overflow-wrap: anywhere; }
.trial-page p[b-c6u8qzekeu] { line-height: 1.65; }
.trial-page__lede[b-c6u8qzekeu] { font-size: .95rem; max-width: 48ch; color: var(--ht-ink-soft); }
.trial-page__specs[b-c6u8qzekeu] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin: 1.25rem 0; padding: 1.1rem 0; border-block: 1px solid var(--ht-edge); }
.trial-page dt[b-c6u8qzekeu] { font-size: .75rem; color: var(--ht-ink-muted); }
.trial-page dd[b-c6u8qzekeu] { margin: .35rem 0 0; font-size: .95rem; font-weight: 550; color: var(--ht-ink); overflow-wrap: anywhere; }
.trial-page__steps[b-c6u8qzekeu] { margin: 1.25rem 0; padding-left: 1.2rem; display: grid; gap: .6rem; font-size: .875rem; line-height: 1.55; color: var(--ht-ink-soft); }
.trial-page__steps li[b-c6u8qzekeu] { padding-left: .3rem; }
.trial-page__steps li[b-c6u8qzekeu]::marker { color: var(--ht-accent); }
.trial-page__terms[b-c6u8qzekeu] { padding: 1rem; border-left: 2px solid var(--ht-accent); background: var(--ht-surface-1); color: var(--ht-ink-soft); font-size: .8rem; }
.trial-page__content[b-c6u8qzekeu] { padding: clamp(1.2rem, 3vw, 2rem); border: 1px solid var(--ht-edge); border-radius: 12px; background: var(--ht-surface-1); }
.trial-page__choices[b-c6u8qzekeu] { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0 1.25rem; }
.trial-page__choices a[b-c6u8qzekeu] { display: inline-flex; align-items: center; min-height: 44px; padding: .6rem 1rem; border: 1px solid var(--ht-edge-strong); border-radius: 6px; font-size: .85rem; text-decoration: none; color: var(--ht-ink-soft); }
.trial-page__choices a.is-selected[b-c6u8qzekeu] { color: var(--ht-ink); border-color: var(--ht-accent); background: color-mix(in srgb, var(--ht-accent) 12%, transparent); }
.trial-page__form[b-c6u8qzekeu] { display: grid; gap: .55rem; }
.trial-page__form label[b-c6u8qzekeu], .trial-page__field-label[b-c6u8qzekeu] { margin-top: .5rem; font-size: .8rem; font-weight: 550; color: var(--ht-ink); }
.trial-page__form input[b-c6u8qzekeu], .trial-page__form select[b-c6u8qzekeu], .trial-page__dates select[b-c6u8qzekeu] { min-width: 0; width: 100%; padding: .8rem; min-height: 46px; border: 1px solid var(--ht-edge-strong); border-radius: 5px; background: var(--ht-ground); color: var(--ht-ink); font: inherit; font-size: .9rem; }
.trial-page :focus-visible[b-c6u8qzekeu] { outline: 2px solid var(--ht-accent); outline-offset: 4px; }
.trial-page__form input:disabled[b-c6u8qzekeu], .trial-page__form select:disabled[b-c6u8qzekeu] { opacity: .55; cursor: not-allowed; }
.trial-page__form[b-c6u8qzekeu]  .cta { margin-top: .5rem; justify-content: center; width: 100%; }
.trial-page__hint[b-c6u8qzekeu] { margin: .35rem 0; font-size: .78rem; color: var(--ht-ink-muted); line-height: 1.6; }
.trial-page__notice[b-c6u8qzekeu] { margin-bottom: 1.1rem; padding: .9rem 1rem; color: var(--ht-ink); background: color-mix(in srgb, var(--ht-accent) 12%, var(--ht-ground)); border: 1px solid var(--ht-accent); border-radius: 6px; font-size: .875rem; }
.trial-page__sent[b-c6u8qzekeu] { padding-block: 1.5rem; }
.trial-page__mail-icon[b-c6u8qzekeu] { display: block; color: var(--ht-accent); font-size: 2.5rem; margin-bottom: 1rem; }
.trial-page__confirmation > p[b-c6u8qzekeu], .trial-page__status > p[b-c6u8qzekeu] { margin: .8rem 0; color: var(--ht-ink-soft); }
.trial-page__confirmation form[b-c6u8qzekeu] { margin-top: 1.25rem; }
.trial-page__recovery[b-c6u8qzekeu] { border-top: 1px solid var(--ht-edge); margin-top: 1.5rem; padding-top: 1rem; }
.trial-page__recovery summary[b-c6u8qzekeu] { cursor: pointer; color: var(--ht-ink); font-size: .85rem; min-height: 44px; }
.trial-page__state[b-c6u8qzekeu] { display: inline-flex; padding: .3rem .65rem; border: 1px solid var(--ht-accent); border-radius: 4px; color: var(--ht-accent) !important; font-size: .8rem; }
.trial-page__owner[b-c6u8qzekeu] { font-size: .85rem; overflow-wrap: anywhere; }
.trial-page__runtime[b-c6u8qzekeu] { font-size: .8rem; }
.trial-page__clock[b-c6u8qzekeu] { display: grid; gap: .5rem; padding: 1.2rem 0; border-block: 1px solid var(--ht-edge); margin-top: 1.2rem; }
.trial-page__clock span[b-c6u8qzekeu] { font-size: .8rem; color: var(--ht-ink-soft); }
.trial-page__clock strong[b-c6u8qzekeu] { font: 550 clamp(1.7rem, 4vw, 2.4rem)/1.2 monospace; font-variant-numeric: tabular-nums; color: var(--ht-ink); }
.trial-page__dates[b-c6u8qzekeu] { display: grid; gap: 1rem; margin: 1rem 0; }
.trial-page__dates dt[b-c6u8qzekeu] { display: grid; gap: .45rem; }
.trial-page__dates select[b-c6u8qzekeu] { width: auto; max-width: 100%; min-height: 38px; padding: .4rem .6rem; font-size: .8rem; }
.trial-page__actions[b-c6u8qzekeu] { display: grid; gap: .6rem; margin-top: 1.25rem; }
@media (max-width: 760px) { .trial-page__layout[b-c6u8qzekeu] { grid-template-columns: 1fr; gap: 1.25rem; } .trial-page__intro[b-c6u8qzekeu] { position: static; } .trial-page h1[b-c6u8qzekeu] { max-width: 22ch; } .trial-page__steps[b-c6u8qzekeu] { display: none; } .trial-page__specs[b-c6u8qzekeu] { margin-block: 1rem; } }
/* /Components/Shared/BrandMark.razor.rz.scp.css */
.brand[b-dyh1pakoma] {
    display: inline-flex;
    align-items: center;
    gap: var(--hts-space-3);
    text-decoration: none;
}

.brand-mark[b-dyh1pakoma] {
    position: relative;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    flex: none;
    border: 1px solid var(--hts-border-strong);
    border-radius: var(--hts-radius-md);
    background:
        radial-gradient(120% 120% at 30% 0%, rgba(131, 168, 243, 0.16) 0%, transparent 62%),
        var(--hts-surface-raised);
    box-shadow: var(--hts-rim), var(--ht-shadow-3);
}

.brand-mark svg[b-dyh1pakoma] {
    width: 1.75rem;
    height: 1.75rem;
    filter: drop-shadow(0 0 6px rgba(176, 105, 255, 0.55));
    transition: filter var(--hts-duration-base) var(--hts-ease);
}

.brand:hover .brand-mark svg[b-dyh1pakoma] {
    filter: drop-shadow(0 0 11px rgba(176, 105, 255, 0.85));
}

.brand-word[b-dyh1pakoma] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.brand-name[b-dyh1pakoma] {
    color: var(--hts-ink);
    font-size: 1.0625rem;
    font-weight: 620;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.brand-tagline[b-dyh1pakoma] {
    color: var(--hts-blue-400);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: var(--hts-tracking-wide);
    line-height: 1.2;
    text-transform: uppercase;
}

/* ── Size variants ─────────────────────────────────────────────────────── */

.brand.is-lg .brand-mark[b-dyh1pakoma] {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: var(--hts-radius-lg);
}

.brand.is-lg .brand-mark svg[b-dyh1pakoma] {
    width: 2.35rem;
    height: 2.35rem;
}

.brand.is-lg .brand-name[b-dyh1pakoma] {
    font-size: 1.3rem;
}

/* Sits on an already-raised surface, so the plate drops back a level. */
.brand.is-plain .brand-mark[b-dyh1pakoma] {
    background: var(--hts-surface);
}
/* /Components/Shared/CopySlot.razor.rz.scp.css */
/* Pending copy. Reads as a deliberate blank in a technical document: mono, dimmed, and
   underscored with a dashed rule the way a form leaves a line to be filled in. */
.copy-slot[b-gphr36kcv2] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--hts-ink-muted);
    font-family: var(--hts-font-mono);
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-wrap: nowrap;
}

.copy-slot[b-gphr36kcv2]::after {
    content: "";
    align-self: flex-end;
    flex: 1;
    min-width: 1.25rem;
    height: 0;
    margin-bottom: 0.28em;
    border-bottom: 1px dashed var(--hts-rule);
}

/* Small square tick, borrowed from the node drop-line dots, so the marker belongs to the
   same drawing language as the diagrams around it. */
.copy-slot-tick[b-gphr36kcv2] {
    width: 0.3rem;
    height: 0.3rem;
    flex: none;
    background: var(--hts-blue-400);
    opacity: 0.55;
    transform: rotate(45deg);
}

.copy-slot.is-micro[b-gphr36kcv2] {
    font-size: 0.5625rem;
    letter-spacing: 0.2em;
}

/* A micro slot sits inside tight readouts, where a leader stretching the full width reads as
   a stray rule. It gets a short tail instead. */
.copy-slot.is-micro[b-gphr36kcv2]::after {
    flex: 0 0 auto;
    width: 1.1rem;
    min-width: 0;
}

/* Centred contexts have no left-aligned column to lead into. */
.copy-slot.is-display[b-gphr36kcv2]::after {
    display: none;
}

.copy-slot.is-micro .copy-slot-tick[b-gphr36kcv2] {
    width: 0.22rem;
    height: 0.22rem;
}

.copy-slot.is-value[b-gphr36kcv2] {
    font-size: var(--hts-text-sm);
}

.copy-slot.is-lede[b-gphr36kcv2] {
    display: flex;
    color: var(--hts-ink-soft);
    font-size: var(--hts-text-base);
    letter-spacing: 0.14em;
}

.copy-slot.is-display[b-gphr36kcv2] {
    display: flex;
    color: var(--hts-ink-soft);
    font-size: clamp(1.1rem, 0.85rem + 1.1vw, 1.75rem);
    font-weight: 500;
    letter-spacing: 0.1em;
}

.copy-slot.is-display .copy-slot-tick[b-gphr36kcv2] {
    width: 0.45rem;
    height: 0.45rem;
    opacity: 0.75;
}

/*
    Once real copy lands the slot stops shouting and just renders the text.

    Including the layout: the placeholder is a chip - an inline-flex row of tick, label and
    leader rule that must stay on one line - but a resolved value is a sentence, and inheriting
    the chip's `nowrap` sent plan taglines straight out through the side of their card.
*/
.copy-slot.is-resolved[b-gphr36kcv2] {
    display: inline;
    color: var(--hts-ink-soft);
    font-family: var(--hts-font-sans);
    letter-spacing: normal;
    text-transform: none;
    text-wrap: pretty;
}

.copy-slot.is-resolved[b-gphr36kcv2]::after {
    display: none;
}

.copy-slot.is-resolved.is-value[b-gphr36kcv2] {
    color: var(--hts-ink);
    font-size: var(--hts-text-base);
}
/* /Components/Shared/CtaButton.razor.rz.scp.css */
/* One action primitive for marketing and transactional pages. Native element semantics,
   disabled/busy states and existing targets are retained. The short underline on text
   actions adapts Skiper40's hover acknowledgement without its decorative looping effects. */
.cta[b-1urx9vka13] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    min-height: 48px;
    padding: .75rem 1.3rem;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: var(--ht-text-base);
    font-weight: 630;
    letter-spacing: -.01em;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease, color 200ms ease;
}

.cta--sm[b-1urx9vka13] {
    min-height: 44px;
    padding: .6rem 1rem;
    font-size: .875rem;
}

.cta--lg[b-1urx9vka13] {
    min-height: 54px;
    padding: .95rem 1.6rem;
    font-size: 1rem;
}

.cta--primary[b-1urx9vka13] {
    background: var(--ht-accent, var(--ht-live-600));
    color: var(--ht-accent-ink, #fff);
    border-color: var(--ht-accent);
    box-shadow: none;
}

.cta--secondary[b-1urx9vka13] {
    background: var(--ht-surface-1);
    border-color: var(--ht-edge-strong);
    color: var(--ht-ink);
}

.cta--ghost[b-1urx9vka13] {
    padding-inline: .3rem;
    color: var(--ht-accent, var(--ht-live-400));
}

.cta--ghost[b-1urx9vka13]::before {
    content: "";
    position: absolute;
    right: .3rem;
    bottom: .5rem;
    left: .3rem;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 240ms ease;
}

.cta--inverse[b-1urx9vka13] {
    background: #f4f5f8;
    color: #121318;
}

.cta--outline-inverse[b-1urx9vka13] {
    background: transparent;
    border-color: rgb(255 255 255 / 30%);
    color: #fff;
}

.cta:focus-visible[b-1urx9vka13] {
    outline: 2px solid var(--ht-accent);
    outline-offset: 4px;
}

.cta--primary:focus-visible[b-1urx9vka13] {
    background-color: var(--ht-accent-hover);
    color: var(--ht-accent-ink);
}

.cta--ghost:focus-visible[b-1urx9vka13]::before {
    transform: scaleX(1);
}

.cta:not(:disabled):focus-visible[b-1urx9vka13]  .hts-icon {
    transform: translateX(3px);
}

.cta:disabled[b-1urx9vka13] {
    opacity: .45;
    cursor: not-allowed;
    box-shadow: none;
}

.cta[aria-busy="true"][b-1urx9vka13] {
    opacity: .9;
    cursor: progress;
}

.cta[b-1urx9vka13]  .hts-icon {
    width: 1em;
    height: 1em;
    flex: none;
    transition: transform 220ms ease;
}

.cta-spinner[b-1urx9vka13] {
    width: .9em;
    height: .9em;
    flex: none;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    opacity: .8;
}

@media (hover: hover) and (pointer: fine) {
    .cta--primary:not(:disabled):hover[b-1urx9vka13] {
        background-color: var(--ht-accent-hover);
        color: var(--ht-accent-ink, #fff);
        border-color: var(--ht-accent-hover);
    }

    .cta--secondary:not(:disabled):hover[b-1urx9vka13] {
        color: var(--ht-ink);
        border-color: var(--ht-ink-faint);
        background: var(--ht-surface-2);
    }

    .cta--ghost:not(:disabled):hover[b-1urx9vka13] {
        color: var(--ht-ink);
    }

    .cta--ghost:not(:disabled):hover[b-1urx9vka13]::before {
        transform: scaleX(1);
    }

    .cta--inverse:not(:disabled):hover[b-1urx9vka13] {
        background: #fff;
        color: #121318;
    }

    .cta--outline-inverse:not(:disabled):hover[b-1urx9vka13] {
        border-color: rgb(255 255 255 / 55%);
        background: rgb(255 255 255 / 6%);
        color: #fff;
    }

    .cta:not(:disabled):hover[b-1urx9vka13]  .hts-icon {
        transform: translateX(3px);
    }
}

.cta:not(:disabled):active[b-1urx9vka13] {
    box-shadow: inset 0 2px 3px rgb(0 0 0 / 15%);
}

@media (max-width: 480px) {
    .cta--lg[b-1urx9vka13],
    .cta--md[b-1urx9vka13] {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cta[b-1urx9vka13],
    .cta[b-1urx9vka13]::before,
    .cta[b-1urx9vka13]  .hts-icon {
        transition: none;
    }

    .cta-spinner[b-1urx9vka13] {
        animation: none;
    }

    .cta:not(:disabled):hover[b-1urx9vka13]  .hts-icon,
    .cta:not(:disabled):focus-visible[b-1urx9vka13]  .hts-icon {
        transform: none;
    }
}
/* /Components/Shared/Icon.razor.rz.scp.css */
.hts-icon[b-1ciy9j1hzw] {
    width: 1.25rem;
    height: 1.25rem;
    flex: none;
}

.hts-icon.is-sm[b-1ciy9j1hzw] {
    width: 1rem;
    height: 1rem;
}

.hts-icon.is-lg[b-1ciy9j1hzw] {
    width: 1.5rem;
    height: 1.5rem;
}

.hts-icon.is-xl[b-1ciy9j1hzw] {
    width: 1.75rem;
    height: 1.75rem;
}
/* /Components/Shared/LanguageSwitcher.razor.rz.scp.css */
.lang[b-xw5t1ahdju] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex: none;
    min-height: 44px;
    padding: 2px;
    border: 1px solid var(--ht-edge-strong);
    border-radius: 10px;
    background: var(--ht-surface-1);
    font-family: var(--ht-font-sans);
    font-size: .7rem;
    font-weight: 620;
    letter-spacing: .02em;
}

.lang-option[b-xw5t1ahdju] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: .35rem .55rem;
    border-radius: 6px;
    color: var(--ht-ink-muted);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 180ms ease, color 180ms ease;
}

.lang-option.is-active[b-xw5t1ahdju] {
    background: var(--ht-surface-3);
    color: var(--ht-ink);
}

.lang-option:focus-visible[b-xw5t1ahdju] {
    outline: 2px solid var(--ht-accent, var(--ht-live-400));
    outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
    .lang-option:hover[b-xw5t1ahdju] {
        color: var(--ht-ink);
        background: var(--ht-surface-2);
    }

    .lang-option.is-active:hover[b-xw5t1ahdju] {
        background: var(--ht-surface-3);
    }
}

@media (prefers-reduced-motion: reduce) {
    .lang-option[b-xw5t1ahdju] {
        transition: none;
    }
}
/* /Components/Shared/PromotionAnnouncements.razor.rz.scp.css */
.promotion-announcements[b-eozsf269uy] {
    position: relative;
    padding-block: .5rem 1.5rem;
}

.promotion-rail[b-eozsf269uy] {
    padding-block: 1rem;
    border-bottom: 1px solid var(--ht-edge);
}

.promotion-kicker[b-eozsf269uy] {
    margin-bottom: .7rem;
    color: var(--ht-accent);
    font-size: .65rem;
    letter-spacing: .12em;
}

.promotion-list[b-eozsf269uy] {
    display: grid;
    list-style: none;
    margin: 0;
    padding: 0;
}

.promotion-offer[b-eozsf269uy] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    min-width: 0;
    padding-block: .75rem;
}

.promotion-offer + .promotion-offer[b-eozsf269uy] {
    border-top: 1px solid var(--ht-edge);
}

.promotion-copy[b-eozsf269uy] {
    flex: 1;
    min-width: 0;
}

.promotion-title[b-eozsf269uy] {
    color: var(--ht-ink);
    font-size: .9375rem;
    font-weight: 550;
    line-height: 1.5;
}

.promotion-detail[b-eozsf269uy],
.promotion-note[b-eozsf269uy] {
    color: var(--ht-ink-muted);
    font-size: .75rem;
    line-height: 1.6;
}

.promotion-detail span[b-eozsf269uy] {
    padding-inline: .25rem;
}

.promotion-code[b-eozsf269uy] {
    color: var(--ht-ink-soft);
    font-size: .8rem;
    letter-spacing: .08em;
    overflow-wrap: anywhere;
    max-width: 18ch;
}

.promotion-link[b-eozsf269uy] {
    display: inline-flex;
    align-items: center;
    flex: none;
    gap: .6rem;
    min-height: 44px;
    color: var(--ht-accent);
    font-size: .8125rem;
    text-decoration: none;
}

.promotion-link span[b-eozsf269uy] {
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .3em;
    text-decoration-color: transparent;
    transition: text-decoration-color 180ms ease;
}

.promotion-link:hover span[b-eozsf269uy],
.promotion-link:focus-visible span[b-eozsf269uy] {
    text-decoration-color: currentColor;
}

.promotion-link:focus-visible[b-eozsf269uy] {
    outline: 2px solid var(--ht-accent);
    outline-offset: 5px;
}

.promotion-link[b-eozsf269uy]  .hts-icon {
    width: 15px;
    height: 15px;
}

.promotion-note[b-eozsf269uy] {
    margin-top: .5rem;
    font-size: .6875rem;
}

@media (max-width: 620px) {
    .promotion-offer[b-eozsf269uy] {
        flex-wrap: wrap;
        gap: .25rem 1rem;
    }

    .promotion-copy[b-eozsf269uy] {
        flex-basis: 100%;
    }

    .promotion-link[b-eozsf269uy] {
        margin-inline-start: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .promotion-link span[b-eozsf269uy] {
        transition: none;
    }
}
/* /Components/Shared/RollingNavText.razor.rz.scp.css */
.nav-roll[b-5vp1cgcqw2] {
    position: relative;
    display: inline-block;
    overflow: hidden;
    vertical-align: middle;
    line-height: 1.5;
}

.roll-label[b-5vp1cgcqw2] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.roll-layer[b-5vp1cgcqw2] {
    display: flex;
    white-space: nowrap;
}

.roll-layer--next[b-5vp1cgcqw2] {
    position: absolute;
    inset: 0;
}

.roll-letter[b-5vp1cgcqw2] {
    display: inline-block;
    transition: transform 250ms cubic-bezier(.4, 0, .2, 1);
    transition-delay: var(--roll-delay);
}

.roll-layer--first .roll-letter[b-5vp1cgcqw2] {
    transform: translateY(var(--nav-roll-shift, 0%));
}

.roll-layer--next .roll-letter[b-5vp1cgcqw2] {
    transform: translateY(calc(100% + var(--nav-roll-shift, 0%)));
}

@media (prefers-reduced-motion: reduce) {
    .roll-letter[b-5vp1cgcqw2] {
        transform: none !important;
        transition: none;
    }

    .roll-layer--next[b-5vp1cgcqw2] {
        display: none;
    }
}
/* /Components/Shared/ThemeToggle.razor.rz.scp.css */
.theme-toggle[b-dlp51e5tnj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    padding: 8px;
    border: 1px solid var(--ht-edge-strong);
    border-radius: 10px;
    background: var(--ht-surface-1);
    color: var(--ht-ink);
    transition: background-color 180ms ease, border-color 180ms ease;
}

.toggle-track[b-dlp51e5tnj] {
    position: relative;
    display: block;
    width: 28px;
    height: 16px;
    flex: none;
    border-radius: 20px;
    background: var(--ht-surface-3);
    box-shadow: inset 0 0 0 1px var(--ht-edge-strong);
    transition: background-color 200ms ease;
}

.toggle-knob[b-dlp51e5tnj] {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--ht-ink-soft);
    transition: transform 220ms ease, background-color 220ms ease;
}

.theme-toggle[aria-checked="true"] .toggle-knob[b-dlp51e5tnj] {
    transform: translateX(12px);
    background: var(--ht-ink);
}

.toggle-label[b-dlp51e5tnj] {
    display: none;
}

.theme-toggle:focus-visible[b-dlp51e5tnj] {
    outline: 2px solid var(--ht-accent, var(--ht-live-400));
    outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
    .theme-toggle:hover[b-dlp51e5tnj] {
        border-color: var(--ht-ink-faint);
        background: var(--ht-surface-2);
    }
}

@media (prefers-reduced-motion: reduce) {
    .theme-toggle[b-dlp51e5tnj],
    .toggle-track[b-dlp51e5tnj],
    .toggle-knob[b-dlp51e5tnj] {
        transition: none;
    }
}
/* /Components/Shared/TrialServerBanner.razor.rz.scp.css */
.trial-banner[b-1r2qgmwo5q] {
    position: relative;
    scroll-margin-top: 7rem;
    padding-block: clamp(1.5rem, 3vw, 3rem);
}

.trial-shell[b-1r2qgmwo5q] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(1.5rem, 3.5vw, 3rem);
    padding-block: clamp(1.5rem, 3vw, 2.25rem);
    border-block: 1px solid var(--ht-edge-strong);
}

.trial-duration[b-1r2qgmwo5q] {
    display: flex;
    align-items: baseline;
    gap: .45rem;
    color: var(--ht-accent);
}

.trial-duration__number[b-1r2qgmwo5q] {
    font-size: clamp(3.25rem, 7vw, 5.5rem);
    font-weight: 550;
    line-height: .95;
    letter-spacing: -.065em;
    font-variant-numeric: tabular-nums;
}

.trial-duration__unit[b-1r2qgmwo5q] {
    color: var(--ht-ink-soft);
    font-size: .65rem;
    letter-spacing: .08em;
}

.trial-copy[b-1r2qgmwo5q] {
    min-width: 0;
}

.trial-kicker[b-1r2qgmwo5q] {
    margin-bottom: .65rem;
    color: var(--ht-accent);
    font-size: .65rem;
    letter-spacing: .12em;
}

.trial-title[b-1r2qgmwo5q] {
    max-width: 30ch;
    color: var(--ht-ink);
    font-size: clamp(1.35rem, 2.6vw, 2rem);
    font-weight: 550;
    line-height: 1.2;
    letter-spacing: -.035em;
}

.trial-body[b-1r2qgmwo5q] {
    max-width: 51ch;
    margin-top: .65rem;
    color: var(--ht-ink-soft);
    font-size: .875rem;
    line-height: 1.7;
}

.trial-action[b-1r2qgmwo5q] {
    display: grid;
    justify-items: stretch;
    gap: .65rem;
    max-width: 16rem;
}

.trial-action[b-1r2qgmwo5q]  .trial-cta {
    justify-content: center;
    min-height: 48px;
    white-space: nowrap;
}

.trial-note[b-1r2qgmwo5q] {
    color: var(--ht-ink-muted);
    font-size: .7rem;
    line-height: 1.55;
    text-align: center;
}

@media (max-width: 1000px) {
    .trial-shell[b-1r2qgmwo5q] {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 1.25rem 2rem;
    }

    .trial-duration[b-1r2qgmwo5q] {
        align-self: start;
        grid-row: 1 / span 2;
    }

    .trial-action[b-1r2qgmwo5q] {
        grid-column: 2;
        justify-items: start;
        max-width: 24rem;
    }

    .trial-note[b-1r2qgmwo5q] {
        text-align: left;
    }
}

@media (max-width: 620px) {
    .trial-shell[b-1r2qgmwo5q] {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.15rem;
    }

    .trial-duration[b-1r2qgmwo5q] {
        grid-row: auto;
        gap: .6rem;
    }

    .trial-duration__number[b-1r2qgmwo5q] {
        font-size: 3rem;
    }

    .trial-action[b-1r2qgmwo5q] {
        grid-column: auto;
        justify-items: stretch;
        max-width: none;
    }

    .trial-action[b-1r2qgmwo5q]  .trial-cta {
        width: 100%;
    }

    .trial-note[b-1r2qgmwo5q] {
        text-align: center;
    }
}
/* /Components/Shared/VectorWordmark.razor.rz.scp.css */
.vector-wordmark[b-1w74p6q0jw] {
    position: relative;
    width: 100%;
    max-width: 650px;
    height: clamp(155px, 19vw, 230px);
    min-width: 0;
    container-type: inline-size;
    overflow: hidden;
    color: var(--ht-ink);
    font-family: var(--ht-font-sans);
    font-weight: 750;
    touch-action: pan-y;
    border-radius: 4px;
}

.wordmark-fallback[b-1w74p6q0jw] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(90px, 16vw, 245px);
    line-height: .9;
    letter-spacing: -.025em;
}

.wordmark-canvas[b-1w74p6q0jw] {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
    visibility: hidden;
}

.wordmark-coordinate[b-1w74p6q0jw] {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
    font-family: var(--ht-font-mono);
    font-size: 9px;
    letter-spacing: .05em;
    color: var(--ht-accent, var(--ht-ink-muted));
}

.vector-wordmark.is-ready .wordmark-canvas[b-1w74p6q0jw] { visibility: visible; }
.vector-wordmark.is-ready .wordmark-fallback[b-1w74p6q0jw] { visibility: hidden; }

@supports (font-size: 1cqw) {
    .wordmark-fallback[b-1w74p6q0jw] { font-size: 41.6667cqw; }
}

@media (prefers-reduced-motion: reduce) {
    .vector-wordmark.is-ready .wordmark-canvas[b-1w74p6q0jw],
    .wordmark-coordinate[b-1w74p6q0jw] { visibility: hidden; }
    .vector-wordmark.is-ready .wordmark-fallback[b-1w74p6q0jw] { visibility: visible; }
}
/* /Components/Shop/GameCover.razor.rz.scp.css */
/*
    A stamped plate. Graphite, a faint drafting grid, and the name set in the display cut and
    pushed off the edge, so it reads as a designation on a panel rather than as a title in a box.
    The only colour is the lamp, and only when the game is actually on sale.
*/

.cover[b-km8gaqyso7] {
    position: relative;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border: 1px solid var(--ht-edge-strong);
    border-radius: var(--ht-radius-md);
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.035) 0%, transparent 42%),
        var(--ht-surface-inset);
    box-shadow: var(--ht-rim);
    isolation: isolate;
}

/* The banner fills the plate. Graded only slightly, so the artwork the company supplied
   reads as itself and not as a tinted backdrop. */
.cover-banner[b-km8gaqyso7] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    filter: saturate(0.95) contrast(1.03);
}

.cover-grid[b-km8gaqyso7] {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image:
        repeating-linear-gradient(90deg, var(--ht-grid-ink) 0 1px, transparent 1px var(--ht-grid-cell)),
        repeating-linear-gradient(180deg, var(--ht-grid-ink) 0 1px, transparent 1px var(--ht-grid-cell));
    mask-image: linear-gradient(180deg, #000 30%, transparent 100%);
    pointer-events: none;
}

.cover-face[b-km8gaqyso7] {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    padding: var(--ht-space-5) var(--ht-space-5) 0;
    overflow: hidden;
}

/*
    The name fills the plate: sized to the frame's width, breaking between words where it must,
    never inside one. A designation stamped on equipment is large, but it is legible.
*/
.cover-name[b-km8gaqyso7] {
    display: block;
    max-width: 100%;
    color: var(--ht-ink);
    font-family: var(--ht-font-sans);
    font-size: clamp(2rem, 0.4rem + 9.6cqw, 6rem);
    font-stretch: 116%;
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 0.9;
    text-transform: uppercase;
    text-wrap: balance;
    overflow-wrap: normal;
    white-space: normal;
    opacity: 0.92;
}

.cover--minecraft .cover-name[b-km8gaqyso7] {
    color: var(--ht-ink-muted);
    opacity: 0.6;
}

.cover-foot[b-km8gaqyso7] {
    position: relative;
    z-index: 2;
    align-self: end;
    display: flex;
    align-items: center;
    gap: var(--ht-space-3);
    padding: var(--ht-space-3) var(--ht-space-5);
    border-top: 1px solid var(--ht-edge);
    background: color-mix(in srgb, var(--ht-surface-inset) 78%, transparent);
}

/* Over a banner the strip needs its own ground to stay legible on any artwork. */
.has-banner .cover-foot[b-km8gaqyso7] {
    background: rgba(8, 9, 11, 0.82);
    backdrop-filter: blur(6px);
}
.has-banner .cover-tag[b-km8gaqyso7] { color: #d9d9e2; }

.cover-lamp[b-km8gaqyso7] {
    width: 7px;
    height: 7px;
    flex: none;
    border-radius: 50%;
    background: var(--ht-live-500);
    box-shadow: var(--ht-lamp-live);
}

.cover-tag[b-km8gaqyso7] {
    color: var(--ht-ink-muted);
    font-family: var(--ht-font-mono);
    font-size: var(--ht-text-2xs);
    font-weight: 600;
    letter-spacing: var(--ht-track-label);
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cover[b-km8gaqyso7] {
    container-type: inline-size;
}
/* /Components/Shop/OrderSummary.razor.rz.scp.css */
.summary[b-zzhhvfriwi] {
    display: grid;
    overflow: hidden;
    border: 1px solid var(--ht-edge-strong);
    border-radius: 18px;
    background: var(--ht-surface-1);
    box-shadow: 0 12px 40px -30px rgb(0 0 0 / 30%);
}

.summary-head[b-zzhhvfriwi] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .75rem;
    padding: 1.35rem 1.5rem;
    border-bottom: 1px solid var(--ht-edge);
    background: var(--ht-surface-2);
}

.summary-lamp[b-zzhhvfriwi] {
    width: 6px;
    height: 6px;
    border-radius: 2px;
    background: var(--ht-accent);
}

.summary-id[b-zzhhvfriwi] {
    overflow: hidden;
    color: var(--ht-ink);
    font-size: .75rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.summary-state[b-zzhhvfriwi] {
    color: var(--ht-accent);
    font-size: .625rem;
    letter-spacing: .06em;
}

.rows[b-zzhhvfriwi] {
    display: grid;
    margin: 0;
}

.row[b-zzhhvfriwi] {
    display: grid;
    grid-template-columns: minmax(6rem, .7fr) minmax(0, 1.5fr);
    align-items: baseline;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--ht-edge);
}

.row:last-child[b-zzhhvfriwi] {
    border-bottom: 0;
}

.row dt[b-zzhhvfriwi] {
    color: var(--ht-ink-muted);
    font-size: .625rem;
    line-height: 1.7;
    letter-spacing: .07em;
}

.row dd[b-zzhhvfriwi] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .3rem .6rem;
    min-width: 0;
    margin: 0;
    color: var(--ht-ink);
    font-size: .9375rem;
    font-weight: 550;
    line-height: 1.5;
}

.row dd.is-data[b-zzhhvfriwi] {
    color: var(--ht-accent);
}

.row-strong[b-zzhhvfriwi] {
    color: var(--ht-ink);
    font-weight: 620;
}

.row-dim[b-zzhhvfriwi] {
    color: var(--ht-ink-muted);
    font-size: .75rem;
    font-weight: 400;
    line-height: 1.7;
}

.resources[b-zzhhvfriwi] {
    display: grid;
    width: 100%;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.resources li[b-zzhhvfriwi] {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    color: var(--ht-ink-soft);
    font-size: .75rem;
    font-weight: 400;
    line-height: 1.6;
}

.resources b[b-zzhhvfriwi] {
    color: var(--ht-ink);
    font-weight: 550;
    white-space: nowrap;
}

.row--price[b-zzhhvfriwi] {
    background: var(--ht-surface-2);
}

.row--price dd[b-zzhhvfriwi] {
    display: grid;
    gap: .65rem;
}

.price[b-zzhhvfriwi] {
    width: 100%;
    border-collapse: collapse;
}

.price th[b-zzhhvfriwi] {
    padding: .35rem .6rem .35rem 0;
    color: var(--ht-ink-soft);
    font-size: .75rem;
    font-weight: 400;
    line-height: 1.6;
    text-align: left;
}

.price th .row-dim[b-zzhhvfriwi] {
    display: block;
    margin-top: .2rem;
    font-size: .625rem;
}

.price td[b-zzhhvfriwi] {
    padding: .35rem 0;
    color: var(--ht-ink);
    font-size: .75rem;
    font-weight: 550;
    text-align: right;
    white-space: nowrap;
}

.price tr.is-data td[b-zzhhvfriwi],
.price tr.is-data th[b-zzhhvfriwi] {
    color: var(--ht-accent);
}

.price-total th[b-zzhhvfriwi],
.price-total td[b-zzhhvfriwi] {
    padding-top: 1rem;
    border-top: 1px solid var(--ht-edge-strong);
    color: var(--ht-ink);
}

.price-total th[b-zzhhvfriwi] {
    font-weight: 600;
}

.price-total td[b-zzhhvfriwi] {
    font-size: clamp(1.25rem, 1.1rem + .65vw, 1.625rem);
    font-weight: 650;
    letter-spacing: -.04em;
}

.price-equivalent[b-zzhhvfriwi] {
    color: var(--ht-accent);
    font-size: .625rem;
    letter-spacing: .02em;
    line-height: 1.7;
    text-align: right;
}

.summary-audience[b-zzhhvfriwi] {
    display: grid;
    gap: .6rem;
    padding: 1.25rem 1.5rem;
    border-top: 1px solid var(--ht-edge);
    color: var(--ht-ink-soft);
    font-size: .8125rem;
    line-height: 1.75;
}

.summary-audience .hts-label[b-zzhhvfriwi] {
    color: var(--ht-ink-muted);
    font-size: .625rem;
    letter-spacing: .07em;
}

@media (max-width: 560px) {
    .summary[b-zzhhvfriwi] {
        border-radius: 14px;
    }

    .summary-head[b-zzhhvfriwi],
    .row[b-zzhhvfriwi],
    .summary-audience[b-zzhhvfriwi] {
        padding-inline: 1.1rem;
    }
}

@media (max-width: 480px) {
    .row[b-zzhhvfriwi] {
        grid-template-columns: minmax(0, 1fr);
        gap: .65rem;
    }

    .row dt[b-zzhhvfriwi] {
        font-size: .6875rem;
    }
}
/* /Components/Shop/PlanPicker.razor.rz.scp.css */
/* Native radios drive both views and billing prices. One catalogue, one set of review links. */
.picker[b-cah4stokat] {
    position: relative;
    padding-block: var(--ht-unit-pad);
    border-top: 1px solid var(--ht-edge);
}

.picker-head[b-cah4stokat] {
    max-width: 52rem;
    margin-bottom: 2.5rem;
}

.picker-kicker[b-cah4stokat] {
    display: flex;
    align-items: center;
    gap: var(--ht-space-3);
    margin-bottom: 1.3rem;
    color: var(--ht-accent, var(--ht-live-400));
}

.picker-title[b-cah4stokat] {
    max-width: 24ch;
    font-size: var(--ht-text-4xl);
    line-height: 1.12;
    letter-spacing: -0.045em;
    text-wrap: balance;
}

.picker-lede[b-cah4stokat] {
    max-width: 44rem;
    margin-top: 1.3rem;
    color: var(--ht-ink-soft);
    font-size: var(--ht-text-lg);
    line-height: 1.75;
}

.picker-tools[b-cah4stokat] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem 2rem;
    margin-bottom: 2rem;
}

.periods[b-cah4stokat],
.view-switch[b-cah4stokat] {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.periods legend[b-cah4stokat],
.view-switch legend[b-cah4stokat] {
    margin-bottom: 0.75rem;
    padding: 0;
    color: var(--ht-ink-muted);
}

.periods-track[b-cah4stokat],
.view-track[b-cah4stokat] {
    display: inline-grid;
    grid-template-columns: repeat(3, auto);
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--ht-edge-strong);
    border-radius: 0.75rem;
    background: var(--ht-surface-1);
}

.view-track[b-cah4stokat] {
    grid-template-columns: repeat(2, auto);
}

.period-input[b-cah4stokat],
.view-input[b-cah4stokat] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.period[b-cah4stokat],
.view-option[b-cah4stokat] {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 0.7rem;
    min-height: 44px;
    padding: 0.6rem 1rem;
    border-radius: 0.5rem;
    color: var(--ht-ink-muted);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.5;
    cursor: pointer;
    transition: color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.period:hover[b-cah4stokat],
.view-option:hover[b-cah4stokat] {
    color: var(--ht-ink);
}

.period-input:checked + .period[b-cah4stokat] {
    color: var(--ht-accent-ink, #fff);
    background: var(--ht-accent, var(--ht-live-600));
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.view-input:checked + .view-option[b-cah4stokat] {
    color: var(--ht-ink);
    background: var(--ht-surface-3);
    box-shadow: var(--ht-shadow-1);
}

.period-input:focus-visible + .period[b-cah4stokat],
.view-input:focus-visible + .view-option[b-cah4stokat] {
    outline: 2px solid var(--ht-accent, var(--ht-live-400));
    outline-offset: 3px;
}

.view-option svg[b-cah4stokat] {
    width: 18px;
    height: 18px;
    flex: none;
    stroke: currentColor;
    stroke-width: 1.35;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.period-save[b-cah4stokat] {
    padding: 0.1rem 0.4rem;
    border: 1px solid var(--ht-edge-live);
    border-radius: 0.3rem;
    color: var(--ht-accent, var(--ht-live-400));
    font-size: 0.625rem;
    font-weight: 650;
    line-height: 1.6;
}

.period-input:checked + .period .period-save[b-cah4stokat] {
    border-color: rgba(255, 255, 255, 0.35);
    color: var(--ht-accent-ink, #fff);
}

.periods-help[b-cah4stokat] {
    max-width: 40rem;
    margin-top: 0.8rem;
    color: var(--ht-ink-muted);
    font-size: 0.8rem;
    line-height: 1.6;
}

.plans[b-cah4stokat] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.2rem;
}

.plan[b-cah4stokat] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 1.4rem;
    overflow: hidden;
    padding: 1.5rem;
    border: 1px solid var(--ht-edge);
    border-radius: 1rem;
    background: var(--ht-surface-1);
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

.plan:hover[b-cah4stokat] {
    border-color: var(--ht-edge-strong);
    box-shadow: var(--ht-shadow-2);
}

.plan.is-recommended[b-cah4stokat] {
    border-color: var(--ht-edge-live);
    background: var(--ht-surface-2);
}

.plan.is-recommended[b-cah4stokat]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--ht-accent, var(--ht-live-500));
}

.plan-title[b-cah4stokat] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 1.6rem;
}

.plan-name[b-cah4stokat] {
    font-size: 1.25rem;
    font-weight: 650;
    line-height: 1.4;
    letter-spacing: -0.035em;
}

.plan-flag[b-cah4stokat] {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.45rem;
    border-radius: 0.35rem;
    background: var(--ht-accent-soft, color-mix(in srgb, var(--ht-live-500) 12%, transparent));
    color: var(--ht-accent, var(--ht-live-400));
    font-size: 0.6rem;
    line-height: 1.5;
    letter-spacing: 0.03em;
}

.plan-tagline[b-cah4stokat] {
    min-height: 2.8em;
    margin-top: 0.6rem;
    color: var(--ht-ink-muted);
    font-size: 0.8rem;
    line-height: 1.5;
}

.plan-memory[b-cah4stokat] {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    padding-block: 0.5rem 0.8rem;
}

.memory-value[b-cah4stokat] {
    color: var(--ht-ink);
    font-size: 3.2rem;
    font-weight: 620;
    line-height: 1;
    letter-spacing: -0.055em;
}

.memory-unit[b-cah4stokat] {
    color: var(--ht-ink-muted);
    font-size: 0.75rem;
    letter-spacing: 0.03em;
}

.plan-specs[b-cah4stokat] {
    display: grid;
    gap: 0.4rem;
    margin: 0;
}

.plan-specs > div[b-cah4stokat] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.8rem;
    min-width: 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--ht-edge);
}

.plan-specs dt[b-cah4stokat] {
    min-width: 0;
    color: var(--ht-ink-muted);
    font-size: 0.8rem;
    line-height: 1.5;
}

.plan-specs dd[b-cah4stokat] {
    flex: none;
    margin: 0;
    color: var(--ht-ink);
    font-size: 0.8rem;
    font-weight: 550;
    line-height: 1.5;
}

.spec-bot dd[b-cah4stokat] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--ht-ink-muted);
    font-family: var(--ht-font-sans);
    font-size: 0.75rem;
}

.spec-bot.is-included dd[b-cah4stokat] {
    color: var(--ht-accent, var(--ht-live-400));
}

.bot-lamp[b-cah4stokat] {
    width: 5px;
    height: 5px;
    flex: none;
    border-radius: 50%;
    background: currentColor;
}

/* Prices never count up. The selected period enters as an immediately readable amount. */
.plan-price[b-cah4stokat] {
    display: none;
    flex-direction: column;
    gap: 0.85rem;
    margin-top: auto;
    padding-top: 1.4rem;
    border-top: 1px solid var(--ht-edge);
}

.picker:has(#period-monthly:checked) .plan-price[data-period="monthly"][b-cah4stokat],
.picker:has(#period-quarterly:checked) .plan-price[data-period="quarterly"][b-cah4stokat],
.picker:has(#period-annual:checked) .plan-price[data-period="annual"][b-cah4stokat],
.plan-price.is-pending[b-cah4stokat] {
    display: flex;
}

.picker:has(#period-monthly:checked) .plan-price[data-period="monthly"][b-cah4stokat],
.picker:has(#period-quarterly:checked) .plan-price[data-period="quarterly"][b-cah4stokat],
.picker:has(#period-annual:checked) .plan-price[data-period="annual"][b-cah4stokat] {
    animation: price-period-enter-b-cah4stokat 220ms var(--ht-ease-out) both;
}

@keyframes price-period-enter-b-cah4stokat {
    from { opacity: 0.45; transform: translateY(5px); }
    to { opacity: 1; transform: none; }
}

.price-figure[b-cah4stokat] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.15rem 0.4rem;
    color: var(--ht-ink);
}

.price-symbol[b-cah4stokat] {
    color: var(--ht-ink-soft);
    font-family: var(--ht-font-mono);
    font-size: 0.95rem;
    font-weight: 600;
}

.price-amount[b-cah4stokat] {
    font-size: clamp(1.8rem, 1.2rem + 0.9vw, 2.2rem);
    font-weight: 650;
    line-height: 1.15;
    letter-spacing: -0.045em;
}

.price-unit[b-cah4stokat] {
    color: var(--ht-ink-muted);
    font-size: 0.75rem;
}

.price-line[b-cah4stokat] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.6rem;
    min-height: 2.7em;
    color: var(--ht-ink-muted);
    font-size: 0.72rem;
    line-height: 1.6;
    letter-spacing: 0;
}

.price-was[b-cah4stokat] {
    text-decoration: line-through;
}

.price-equivalent[b-cah4stokat] {
    color: var(--ht-accent, var(--ht-data-400));
}

.price-pending[b-cah4stokat] {
    color: var(--ht-ink-muted);
    font-size: 0.85rem;
    line-height: 1.6;
}

.plan[b-cah4stokat]  .plan-cta {
    width: 100%;
    margin-top: 0.3rem;
    font-size: 0.85rem;
}

.picker-note[b-cah4stokat] {
    max-width: 48rem;
    margin-top: 1.8rem;
    color: var(--ht-ink-muted);
    font-size: 0.85rem;
    line-height: 1.7;
}

/* The comparison reflows the same list into aligned rows; no duplicate prices or hidden links. */
.comparison-head[b-cah4stokat] {
    display: none;
}

.picker:has(#view-comparison:checked) .comparison-head[b-cah4stokat],
.picker:has(#view-comparison:checked) .plan[b-cah4stokat] {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.55fr) minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: center;
    gap: 1.5rem;
}

.picker:has(#view-comparison:checked) .comparison-head[b-cah4stokat] {
    padding: 0 1.5rem 1rem;
    color: var(--ht-ink-muted);
    font-size: 0.7rem;
    letter-spacing: 0.04em;
}

.picker:has(#view-comparison:checked) .plans[b-cah4stokat] {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.8rem;
}

.picker:has(#view-comparison:checked) .plan[b-cah4stokat] {
    padding: 1.5rem;
}

.picker:has(#view-comparison:checked) .plan.is-recommended[b-cah4stokat]::before {
    width: 3px;
    height: 100%;
}

.picker:has(#view-comparison:checked) .plan-title[b-cah4stokat] {
    justify-content: flex-start;
}

.picker:has(#view-comparison:checked) .plan-tagline[b-cah4stokat] {
    min-height: 0;
}

.picker:has(#view-comparison:checked) .plan-memory[b-cah4stokat] {
    flex-direction: column;
    gap: 0.5rem;
}

.picker:has(#view-comparison:checked) .memory-value[b-cah4stokat] {
    font-size: 2.6rem;
}

.picker:has(#view-comparison:checked) .plan-specs[b-cah4stokat] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem 1.2rem;
}

.picker:has(#view-comparison:checked) .plan-specs > div[b-cah4stokat] {
    display: grid;
    align-content: start;
    gap: 0.25rem;
}

.picker:has(#view-comparison:checked) .plan-price[b-cah4stokat] {
    margin-top: 0;
    padding-top: 0;
    border: 0;
}

.picker:has(#view-comparison:checked) .price-line[b-cah4stokat] {
    min-height: 0;
}

@media (max-width: 1180px) {
    .plans[b-cah4stokat] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 960px) {
    .picker:has(#view-comparison:checked) .comparison-head[b-cah4stokat] {
        display: none;
    }

    .picker:has(#view-comparison:checked) .plan[b-cah4stokat] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.4fr);
        align-items: start;
    }

    .picker:has(#view-comparison:checked) .plan-memory[b-cah4stokat] {
        justify-self: end;
        align-items: flex-end;
        padding-block: 0;
    }

    .picker:has(#view-comparison:checked) .plan-specs[b-cah4stokat],
    .picker:has(#view-comparison:checked) .plan-price[b-cah4stokat] {
        grid-column: 1 / -1;
    }

    .picker:has(#view-comparison:checked) .plan-specs > div[b-cah4stokat] {
        display: flex;
        align-items: baseline;
    }

    .picker:has(#view-comparison:checked) .plan-price[b-cah4stokat] {
        padding-top: 1rem;
        border-top: 1px solid var(--ht-edge);
    }
}

@media (max-width: 680px) {
    .plans[b-cah4stokat] {
        grid-template-columns: minmax(0, 1fr);
    }

    .picker-tools[b-cah4stokat] {
        display: grid;
        gap: 1.5rem;
    }

    .periods-track[b-cah4stokat] {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .period[b-cah4stokat] {
        flex-direction: column;
        gap: 0.3rem;
        min-height: 56px;
        padding: 0.55rem 0.4rem;
        font-size: 0.8rem;
    }

    .period-save[b-cah4stokat] {
        font-size: 0.6rem;
    }

    .plan[b-cah4stokat],
    .picker:has(#view-comparison:checked) .plan[b-cah4stokat] {
        padding: 1.3rem;
    }
}

@media (max-width: 400px) {
    .picker:has(#view-comparison:checked) .plan-specs[b-cah4stokat] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@supports not selector(:has(a)) {
    .periods[b-cah4stokat],
    .view-switch[b-cah4stokat] {
        display: none;
    }

    .plan-price[data-period="monthly"][b-cah4stokat] {
        display: flex;
    }
}

@media (prefers-reduced-motion: reduce) {
    .period[b-cah4stokat],
    .view-option[b-cah4stokat],
    .plan[b-cah4stokat] {
        transition: none;
    }

    .picker:has(#period-monthly:checked) .plan-price[data-period="monthly"][b-cah4stokat],
    .picker:has(#period-quarterly:checked) .plan-price[data-period="quarterly"][b-cah4stokat],
    .picker:has(#period-annual:checked) .plan-price[data-period="annual"][b-cah4stokat] {
        animation: none;
    }
}
/* /Components/Shop/ProvisioningTimeline.razor.rz.scp.css */
/*
    A rail with six stations. Done stations are filled graphite, the live one carries the lamp,
    idle ones are outlines. Purple means running - the one live lamp is the only colour until
    the last station lights, and amber means a station that needs somebody.
*/

.timeline[b-i7iivm7tqp] {
    position: relative;
    display: grid;
    gap: 0;
    padding-left: 0;
}

.step[b-i7iivm7tqp] {
    position: relative;
    display: grid;
    grid-template-columns: 1.6rem auto minmax(0, 1fr);
    align-items: center;
    gap: var(--ht-space-4);
    min-height: 3.1rem;
    padding: var(--ht-space-3) 0;
    color: var(--ht-ink-muted);
    transition: color var(--ht-dur-3) var(--ht-ease-lock);
}

/* The rail itself, drawn once per step so it can change colour as the work passes. */
.step[b-i7iivm7tqp]::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(0.8rem - 1px);
    width: 2px;
    background: var(--ht-edge-strong);
}

.step:first-child[b-i7iivm7tqp]::before {
    top: 50%;
}

.step:last-child[b-i7iivm7tqp]::before {
    bottom: 50%;
}

.step.is-done[b-i7iivm7tqp]::before {
    background: var(--ht-graphite-500);
}

.step-mark[b-i7iivm7tqp] {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    border: 1px solid var(--ht-edge-strong);
    border-radius: 50%;
    background: var(--ht-surface-2);
    transition:
        border-color var(--ht-dur-3) var(--ht-ease-lock),
        background-color var(--ht-dur-3) var(--ht-ease-lock);
}

.step-lamp[b-i7iivm7tqp] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: transparent;
    transition: background-color var(--ht-dur-3) var(--ht-ease-lock), box-shadow var(--ht-dur-3) var(--ht-ease-lock);
}

.step.is-done .step-mark[b-i7iivm7tqp] {
    border-color: var(--ht-graphite-500);
    background: var(--ht-graphite-700);
}

.step.is-done .step-lamp[b-i7iivm7tqp] {
    background: var(--ht-ink);
}

.step.is-live[b-i7iivm7tqp] {
    color: var(--ht-ink);
}

.step.is-live .step-mark[b-i7iivm7tqp] {
    border-color: var(--ht-live-500);
}

.step.is-live .step-lamp[b-i7iivm7tqp] {
    background: var(--ht-live-500);
    box-shadow: var(--ht-lamp-live);
    animation: step-breathe-b-i7iivm7tqp 2.4s var(--ht-ease-in-out) infinite;
}

.step.is-fault[b-i7iivm7tqp] {
    color: var(--ht-warn-300);
}

.step.is-fault .step-mark[b-i7iivm7tqp] {
    border-color: var(--ht-warn-500);
}

.step.is-fault .step-lamp[b-i7iivm7tqp] {
    background: var(--ht-warn-500);
    box-shadow: 0 0 0 1px rgba(240, 160, 60, 0.4), 0 0 10px 1px rgba(240, 160, 60, 0.5);
}

/* Every station finished: the whole rail is lit, quietly. */
.step:last-child.is-done[b-i7iivm7tqp] {
    color: var(--ht-ink);
}

.step:last-child.is-done .step-mark[b-i7iivm7tqp] {
    border-color: var(--ht-live-500);
    background: var(--ht-live-700);
}

.step:last-child.is-done .step-lamp[b-i7iivm7tqp] {
    background: var(--ht-live-300);
    box-shadow: var(--ht-lamp-live);
}

/* Waiting for the webhook: the first station holds a dim lamp rather than none. */
.timeline.is-waiting .step:first-child .step-lamp[b-i7iivm7tqp] {
    background: var(--ht-graphite-500);
    animation: step-breathe-b-i7iivm7tqp 2.4s var(--ht-ease-in-out) infinite;
}

.step-index[b-i7iivm7tqp] {
    color: var(--ht-ink-faint);
    font-size: var(--ht-text-2xs);
    font-weight: 600;
    letter-spacing: var(--ht-track-label);
}

.step.is-live .step-index[b-i7iivm7tqp],
.step.is-done .step-index[b-i7iivm7tqp] {
    color: var(--ht-ink-muted);
}

.step-label[b-i7iivm7tqp] {
    font-size: var(--ht-text-md);
    font-weight: 560;
    letter-spacing: -0.01em;
}

@keyframes step-breathe-b-i7iivm7tqp {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.35;
    }
}

@media (prefers-reduced-motion: reduce) {
    .step-lamp[b-i7iivm7tqp] {
        animation: none !important;
    }
}