/* /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] {
    position: relative;
    padding-block: clamp(4.5rem, 8vw, 8rem);
    border-top: 1px solid var(--hts-border);
    overflow: hidden;
    isolation: isolate;
}

/* The page ends on light rather than on a rule: one bloom rising from the bottom edge, which
   is the same move the homepage closing section makes. */
.closing-glow[b-cf1j4uyvb1] {
    position: absolute;
    bottom: -18rem;
    left: 50%;
    z-index: -1;
    width: min(60rem, 96vw);
    height: 32rem;
    background: radial-gradient(ellipse at center, rgba(139, 50, 224, 0.24) 0%, transparent 66%);
    filter: blur(50px);
    transform: translateX(-50%);
    pointer-events: none;
}

.closing-inner[b-cf1j4uyvb1] {
    display: grid;
    justify-items: center;
    text-align: center;
}

.closing-kicker[b-cf1j4uyvb1] {
    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.22em;
}

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

.closing-heading[b-cf1j4uyvb1] {
    max-width: 40rem;
}

.closing-actions[b-cf1j4uyvb1] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--hts-space-4);
    margin-top: var(--hts-space-8);
}

.closing-note[b-cf1j4uyvb1] {
    max-width: 40rem;
    margin-top: var(--hts-space-8);
    padding-top: var(--hts-space-5);
    border-top: 1px solid var(--hts-border);
    color: var(--hts-ink-muted);
    font-size: var(--hts-text-sm);
    line-height: var(--hts-leading-normal);
}

@media (max-width: 560px) {
    .closing-actions[b-cf1j4uyvb1] {
        flex-direction: column;
        align-self: stretch;
    }
}
/* /Components/Hardware/HardwareHero.razor.rz.scp.css */
.hw-hero[b-gyo7vcs7r7] {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 72vh;
    padding-block: calc(var(--hts-header-height) + 2rem) 0;
    overflow: hidden;
    isolation: isolate;
}

.hw-hero-inner[b-gyo7vcs7r7] {
    position: relative;
    z-index: var(--hts-z-content);
    flex: 1;
    display: grid;
    /* The plate is capped at 26rem, so it takes what it needs and the type gets the rest.
       A fractional split gave the headline a column narrower than the headline. */
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(2rem, 5vw, 4.5rem);
    padding-block: clamp(2.5rem, 6vw, 5rem);
}

.hw-hero-type[b-gyo7vcs7r7] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

/* The rack photograph sits at the scale of the headline rather than as an inset thumbnail. */
.hw-hero-plate[b-gyo7vcs7r7] {
    min-width: 0;
    max-width: 26rem;
    margin-left: auto;
}

.hw-kicker[b-gyo7vcs7r7] {
    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.24em;
}

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

/*
    Three lines, tightly leaded - the homepage headline's construction beside a photograph.

    Sized so the longest line ("mundos persistentes", nineteen characters, longer than the
    English) clears the column at every width. It did not: at 1440 the type was 80px wide-cut
    and the column was 739px, so the last line ran under the rack photo. nowrap is deliberate -
    the three lines are composed, not wrapped - which means the size has to be the thing that
    yields.
*/
.hw-title[b-gyo7vcs7r7] {
    /* Wide enough for the longest line. It was 15ch while "mundos persistentes." is twenty
       characters, so the measure - not the type size and not the column - was what pushed the
       last line under the photograph. */
    max-width: 20ch;
    font-size: clamp(2rem, 0.85rem + 3.1vw, 3.75rem);
    font-weight: 460;
    line-height: 0.96;
    letter-spacing: -0.035em;
    text-wrap: nowrap;
}

.title-line[b-gyo7vcs7r7] {
    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-gyo7vcs7r7] {
    margin-left: clamp(0rem, 3vw, 2.75rem);
    font-weight: 800;
}

.hw-lede[b-gyo7vcs7r7] {
    max-width: 34rem;
    margin-top: var(--hts-space-6);
}

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

.hw-hero-foot[b-gyo7vcs7r7] {
    position: relative;
    z-index: var(--hts-z-content);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(1.5rem, 5vw, 4rem);
    padding-block: var(--hts-space-5);
    border-top: 1px solid var(--hts-border);
}

.foot-item[b-gyo7vcs7r7] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.7rem;
    font-family: var(--hts-font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.18em;
}

.foot-label[b-gyo7vcs7r7] {
    color: var(--hts-ink-muted);
}

.foot-value[b-gyo7vcs7r7] {
    color: var(--hts-blue-300);
    font-weight: 600;
}

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

    .hw-hero-plate[b-gyo7vcs7r7] {
        max-width: 22rem;
        margin-left: 0;
    }
}

@media (max-width: 900px) {
    .hw-hero[b-gyo7vcs7r7] {
        min-height: auto;
        padding-bottom: var(--hts-space-6);
    }

    .hw-title[b-gyo7vcs7r7] {
        max-width: none;
        text-wrap: balance;
    }

    .title-line--accent[b-gyo7vcs7r7] {
        margin-left: 0;
    }

    .hw-hero-foot[b-gyo7vcs7r7] {
        gap: var(--hts-space-4) var(--hts-space-8);
    }
}
/* /Components/Hardware/HardwarePhoto.razor.rz.scp.css */
.photo[b-p3r51bpjwi] {
    display: grid;
    gap: var(--hts-space-3);
    margin: 0;
    min-width: 0;
}

/* The box reserves its space before the image decodes, so nothing below it moves when the
   photograph arrives. `cover` then crops to fill it rather than letterboxing. */
.photo-frame[b-p3r51bpjwi] {
    position: relative;
    aspect-ratio: var(--photo-ratio, 3 / 4);
    border-radius: var(--hts-radius-md);
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(131, 168, 243, 0.10) 0%, transparent 62%),
        var(--hts-surface-inset);
    overflow: hidden;
    isolation: isolate;
}

.photo-image[b-p3r51bpjwi] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* The rack photography is shot in a lit room; the page is not. A small grade settles the
       photograph into the page instead of letting it glare out of it. */
    filter: saturate(0.92) contrast(1.04) brightness(0.95);
    transform: scale(1.001);
    transition:
        transform var(--hts-duration-slow) var(--hts-ease-out),
        filter var(--hts-duration-slow) var(--hts-ease);
}

.photo:hover .photo-image[b-p3r51bpjwi] {
    transform: scale(1.03);
    filter: saturate(0.98) contrast(1.05) brightness(0.98);
}

/* Rim light on the inside edge, matching every other panel in the system. */
.photo-rim[b-p3r51bpjwi] {
    position: absolute;
    inset: 0;
    z-index: 2;
    border: 1px solid var(--hts-border-strong);
    border-radius: inherit;
    box-shadow: var(--hts-rim);
    pointer-events: none;
}

/* A registration tick in the corner, borrowed from the diagrams, so a photograph reads as part
   of the same technical drawing set. */
.photo-tick[b-p3r51bpjwi] {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 3;
    width: 0.9rem;
    height: 0.9rem;
    border-top: 1px solid var(--hts-blue-300);
    border-left: 1px solid var(--hts-blue-300);
    opacity: 0.7;
    pointer-events: none;
}

.photo-caption[b-p3r51bpjwi] {
    color: var(--hts-ink-muted);
    font-family: var(--hts-font-mono);
    font-size: 0.5625rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

/* ── Pending: no photograph supplied yet ───────────────────────────────── */

.photo--pending .photo-frame[b-p3r51bpjwi] {
    display: grid;
    place-items: center;
    background:
        repeating-linear-gradient(
            -45deg,
            var(--hts-cell-bg) 0 10px,
            transparent 10px 20px),
        var(--hts-surface-inset);
}

.photo--pending .photo-rim[b-p3r51bpjwi] {
    border-style: dashed;
    border-color: var(--hts-rule);
}

.photo--pending .photo-tick[b-p3r51bpjwi] {
    border-color: var(--hts-ink-muted);
    opacity: 0.5;
}

.pending-body[b-p3r51bpjwi] {
    display: grid;
    justify-items: center;
    gap: var(--hts-space-3);
    padding: var(--hts-space-5);
    text-align: center;
}

.pending-badge[b-p3r51bpjwi] {
    padding: 0.16rem 0.55rem;
    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.2em;
}

.pending-label[b-p3r51bpjwi] {
    color: var(--hts-ink-soft);
    font-family: var(--hts-font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* The instruction lives on the page, because a note in a README is a note nobody opens. */
.pending-path[b-p3r51bpjwi] {
    max-width: 100%;
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--hts-border);
    border-radius: var(--hts-radius-xs);
    background: var(--hts-console);
    color: var(--hts-console-accent);
    font-family: var(--hts-font-mono);
    font-size: 0.5625rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

/* ── Variants ──────────────────────────────────────────────────────────── */

/* A rack is photographed standing up, so portrait is the default. These two exist for the
   occasional shot that is not. */
.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] {
    position: relative;
    padding-block: clamp(4.5rem, 8vw, 8rem);
    border-top: 1px solid var(--hts-border);
    overflow: hidden;
}

/* One low bloom behind the photographs, so the images sit in light rather than on flat black. */
.gallery[b-xk12uohif1]::before {
    content: "";
    position: absolute;
    top: 22%;
    right: -10%;
    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;
}

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

.chapter-kicker[b-xk12uohif1] {
    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;
}

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

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

/* --- Lead: the open rack, and the two machines inside it ---------------- */

/* The photograph is portrait and tall; the two readouts stack beside it and together match its
   height, so the row reads as one block rather than a tall image with a gap under the text. */
.gallery-lead[b-xk12uohif1] {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: stretch;
    gap: clamp(1.5rem, 3vw, 2.75rem);
}

.node-list[b-xk12uohif1] {
    display: grid;
    align-content: stretch;
    gap: clamp(1.25rem, 2.5vw, 2rem);
    min-width: 0;
}

/* --- Readout ------------------------------------------------------------ */

.node-readout[b-xk12uohif1] {
    display: grid;
    align-content: start;
    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);
}

.readout-head[b-xk12uohif1] {
    display: flex;
    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);
}

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

.readout-status[b-xk12uohif1] {
    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;
}

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

.readout-status.is-healthy[b-xk12uohif1] {
    color: var(--hts-blue-300);
}

.readout-status.is-healthy .status-dot[b-xk12uohif1] {
    box-shadow: var(--ht-lamp-data);
    animation: status-breathe-b-xk12uohif1 3.2s var(--hts-ease) infinite;
}

@keyframes status-breathe-b-xk12uohif1 {
    0%, 100% {
        opacity: 1;
    }

    55% {
        opacity: 0.35;
    }
}

.readout-status.is-provisioning[b-xk12uohif1] {
    color: var(--hts-purple-300);
}

.readout-status.is-reserved[b-xk12uohif1] {
    color: var(--hts-ink-muted);
}

/* Two specification columns inside a readout, because the card is now wide and short rather than
   narrow and tall. It collapses back to one below. */
.readout-specs[b-xk12uohif1] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--hts-space-5);
}

.readout-row[b-xk12uohif1] {
    display: grid;
    align-content: start;
    gap: 0.35rem;
    padding-block: var(--hts-space-4);
    border-bottom: 1px solid var(--hts-border);
}

/* The last row of each column, not just the last of the card. */
.readout-row:nth-last-child(-n + 2)[b-xk12uohif1] {
    padding-bottom: 0;
    border-bottom: 0;
}

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

.readout-row dd[b-xk12uohif1] {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.readout-detail[b-xk12uohif1] {
    color: var(--hts-ink-muted);
    font-family: var(--hts-font-mono);
    font-size: 0.5625rem;
    letter-spacing: 0.12em;
}

/* --- Strip: the rest of the rack ---------------------------------------- */

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

.gallery-note[b-xk12uohif1] {
    position: relative;
    max-width: 42rem;
    margin-top: clamp(2.5rem, 4vw, 3.5rem);
    padding-top: var(--hts-space-5);
    border-top: 1px solid var(--hts-border);
    color: var(--hts-ink-muted);
    font-size: var(--hts-text-sm);
    line-height: var(--hts-leading-normal);
}

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

@media (max-width: 1080px) {
    .gallery-lead[b-xk12uohif1] {
        grid-template-columns: minmax(0, 1fr);
    }

    /* A full-width portrait photograph would run past a laptop screen on its own, so the lead
       image takes the landscape crop once it stops sharing the row. */
    .gallery-lead[b-xk12uohif1]  .photo .photo-frame {
        --photo-ratio: 3 / 2;
    }
}

@media (max-width: 720px) {
    .readout-specs[b-xk12uohif1] {
        grid-template-columns: minmax(0, 1fr);
    }

    .readout-row:nth-last-child(-n + 2)[b-xk12uohif1] {
        padding-bottom: var(--hts-space-4);
        border-bottom: 1px solid var(--hts-border);
    }

    .readout-row:last-child[b-xk12uohif1] {
        padding-bottom: 0;
        border-bottom: 0;
    }

    /* Three portrait frames side by side become slivers; two rows of readable frames is better
       than one row of unreadable ones. The third would be left on its own, so it runs the full
       width and takes a landscape crop rather than sitting in half a row. */
    .gallery-strip[b-xk12uohif1] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gallery-strip[b-xk12uohif1]  .photo:last-child {
        grid-column: 1 / -1;
    }

    .gallery-strip[b-xk12uohif1]  .photo:last-child .photo-frame {
        --photo-ratio: 3 / 2;
    }
}
/* /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] {
    position: relative;
    padding-block: clamp(5rem, 10vw, 10rem);
    overflow: hidden;
    isolation: isolate;
}

/* ── Field ─────────────────────────────────────────────────────────────── */

.closing-field[b-a25yj2no4b] {
    position: absolute;
    inset: 0;
    z-index: 0;
    /* Light, not ruling. The graticule that used to be here was texture pretending to be
       information, and it read as a tablecloth laid under the headline. */
    background-image:
        radial-gradient(ellipse 62% 70% at 50% 46%, rgba(176, 105, 255, 0.16) 0%, transparent 68%),
        radial-gradient(ellipse 46% 50% at 18% 78%, rgba(61, 92, 224, 0.13) 0%, transparent 70%);
}

/* The spine that has run between sections terminates here. */
.closing-spine[b-a25yj2no4b] {
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 6rem;
    background: linear-gradient(180deg, rgba(176, 105, 255, 0.6), transparent);
}

.closing-glow[b-a25yj2no4b] {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44rem;
    height: 30rem;
    transform: translate(-50%, -50%);
    background:
        radial-gradient(48% 48% at 50% 50%, rgba(139, 50, 224, 0.30) 0%, transparent 70%),
        radial-gradient(38% 38% at 24% 66%, rgba(61, 92, 224, 0.24) 0%, transparent 72%);
    filter: blur(40px);
    animation: closing-drift-b-a25yj2no4b 20s var(--hts-ease) infinite alternate;
}

@keyframes closing-drift-b-a25yj2no4b {
    from {
        transform: translate(-50%, -50%) scale(1);
    }

    to {
        transform: translate(-52%, -48%) scale(1.1);
    }
}

/* ── Content ───────────────────────────────────────────────────────────── */

.closing-inner[b-a25yj2no4b] {
    position: relative;
    z-index: var(--hts-z-content);
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: center;
    gap: clamp(2.5rem, 6vw, 5rem);
}

.closing-kicker[b-a25yj2no4b] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    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;
}

.kicker-dot[b-a25yj2no4b] {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: var(--hts-purple-400);
    box-shadow: var(--ht-lamp-live);
}

.closing-title[b-a25yj2no4b] {
    font-size: clamp(2.4rem, 1.3rem + 4vw, 4.4rem);
    font-weight: 460;
    line-height: 1;
    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. */
.closing-accent[b-a25yj2no4b] {
    font-weight: 800;
}

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

.closing-actions[b-a25yj2no4b] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hts-space-4);
    margin-top: var(--hts-space-8);
}

/* ── Contact ───────────────────────────────────────────────────────────── */

.closing-contact[b-a25yj2no4b] {
    padding: var(--hts-space-6);
    border: 1px solid var(--hts-border-strong);
    border-radius: var(--hts-radius-lg);
    background: var(--hts-surface-glass);
    box-shadow: var(--hts-rim), var(--hts-shadow-lg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    scroll-margin-top: calc(var(--hts-header-height) + var(--hts-space-8));
}

.contact-key[b-a25yj2no4b] {
    color: var(--hts-purple-300);
    font-family: var(--hts-font-mono);
    font-size: 0.5625rem;
    letter-spacing: 0.22em;
}

.contact-title[b-a25yj2no4b] {
    margin-top: var(--hts-space-3);
    font-size: var(--hts-text-xl);
    font-weight: 620;
}

.contact-copy[b-a25yj2no4b] {
    margin-top: var(--hts-space-4);
    color: var(--hts-ink-soft);
    font-size: var(--hts-text-base);
    line-height: var(--hts-leading-relaxed);
}

.contact-link[b-a25yj2no4b] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: var(--hts-space-5);
    padding: 0.6rem 1rem;
    border: 1px solid var(--hts-border-strong);
    border-radius: var(--hts-radius-xs);
    background: var(--hts-navy-950);
    color: var(--hts-ink);
    font-family: var(--hts-font-mono);
    font-size: var(--hts-text-sm);
    text-decoration: none;
    transition:
        border-color var(--hts-duration-fast) var(--hts-ease),
        background-color var(--hts-duration-fast) var(--hts-ease),
        color var(--hts-duration-fast) var(--hts-ease);
}

.contact-link:hover[b-a25yj2no4b] {
    border-color: var(--hts-purple-400);
    background: rgba(176, 105, 255, 0.12);
    color: var(--hts-ink);
}

/* Arrow drawn from borders rather than an icon. */
.contact-arrow[b-a25yj2no4b] {
    width: 0.45rem;
    height: 0.45rem;
    border-top: 1.5px solid var(--hts-purple-300);
    border-right: 1.5px solid var(--hts-purple-300);
    transform: rotate(45deg);
    transition: transform var(--hts-duration-base) var(--hts-ease-spring);
}

.contact-link:hover .contact-arrow[b-a25yj2no4b] {
    transform: rotate(45deg) translate(2px, -2px);
}

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

@media (max-width: 560px) {
    .closing-actions[b-a25yj2no4b] {
        flex-direction: column;
        align-items: stretch;
    }
}
/* /Components/Home/ControlPanelSection.razor.rz.scp.css */
.cp[b-ktsrb6n9jw] {
    position: relative;
    padding-block: clamp(5rem, 9vw, 9rem);
    background: var(--hts-navy-900);
    border-block: 1px solid var(--hts-border);
}

.cp-head[b-ktsrb6n9jw] {
    max-width: 44rem;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.cp-kicker[b-ktsrb6n9jw] {
    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;
}

.cp-title[b-ktsrb6n9jw] {
    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. */
.cp-accent[b-ktsrb6n9jw] {
    font-weight: 800;
}

.cp-lede[b-ktsrb6n9jw] {
    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);
}

/* ── Application frame ─────────────────────────────────────────────────── */

.cp-stage[b-ktsrb6n9jw] {
    width: min(92%, 96rem);
    margin-inline: auto;
}

.app[b-ktsrb6n9jw] {
    border: 1px solid var(--hts-border-strong);
    border-radius: var(--hts-radius-lg);
    background: var(--hts-navy-950);
    box-shadow: var(--hts-rim), var(--ht-shadow-4);
    overflow: hidden;
}

.app-chrome[b-ktsrb6n9jw] {
    display: flex;
    align-items: center;
    gap: var(--hts-space-4);
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--hts-border);
    background: var(--hts-navy-800);
}

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

.chrome-dots i[b-ktsrb6n9jw] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--hts-muted-mark);
}

.chrome-dots i:first-child[b-ktsrb6n9jw] {
    background: var(--hts-purple-400);
}

.chrome-dots i:nth-child(2)[b-ktsrb6n9jw] {
    background: var(--hts-blue-400);
}

.chrome-url[b-ktsrb6n9jw] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    justify-content: center;
    padding: 0.3rem 0.9rem;
    max-width: 34rem;
    margin-inline: auto;
    border: 1px solid var(--hts-border);
    border-radius: var(--ht-radius-sm);
    background: var(--hts-navy-950);
    color: var(--hts-ink-muted);
    font-family: var(--hts-font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.08em;
}

.url-lock[b-ktsrb6n9jw] {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 1px;
    background: var(--hts-blue-400);
}

.chrome-env[b-ktsrb6n9jw] {
    flex: none;
    padding: 0.15rem 0.5rem;
    border: 1px solid var(--hts-border-brand);
    border-radius: var(--ht-radius-xs);
    color: var(--hts-purple-300);
    font-family: var(--hts-font-mono);
    font-size: 0.5rem;
    letter-spacing: 0.18em;
}

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

/* ── Sidebar ───────────────────────────────────────────────────────────── */

.app-side[b-ktsrb6n9jw] {
    display: flex;
    flex-direction: column;
    gap: var(--hts-space-3);
    padding: var(--hts-space-5) var(--hts-space-4);
    border-right: 1px solid var(--hts-border);
    background: var(--hts-navy-900);
}

.side-key[b-ktsrb6n9jw] {
    padding-inline: 0.55rem;
    color: var(--hts-ink-muted);
    font-family: var(--hts-font-mono);
    font-size: 0.5rem;
    letter-spacing: 0.22em;
}

.app-side ul[b-ktsrb6n9jw] {
    display: grid;
    gap: 2px;
}

.side-item[b-ktsrb6n9jw] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.55rem 0.6rem;
    border-radius: var(--hts-radius-xs);
    color: var(--hts-ink-muted);
    font-size: var(--hts-text-base);
    font-weight: 520;
    text-align: left;
    transition:
        background-color var(--hts-duration-fast) var(--hts-ease),
        color var(--hts-duration-fast) var(--hts-ease);
}

.side-bar[b-ktsrb6n9jw] {
    width: 2px;
    height: 0.9rem;
    border-radius: 1px;
    background: transparent;
    transition: background-color var(--hts-duration-fast) var(--hts-ease);
}

.side-item:hover[b-ktsrb6n9jw] {
    background: var(--hts-tint-hover);
    color: var(--hts-ink-soft);
}

.side-item.is-active[b-ktsrb6n9jw] {
    background: rgba(176, 105, 255, 0.12);
    color: var(--hts-ink);
}

.side-item.is-active .side-bar[b-ktsrb6n9jw] {
    background: var(--hts-purple-400);
    box-shadow: var(--hts-rim), var(--hts-shadow-lg);
}

.side-foot[b-ktsrb6n9jw] {
    margin-top: auto;
    padding-top: var(--hts-space-4);
    border-top: 1px solid var(--hts-border);
}

.side-node[b-ktsrb6n9jw] {
    padding-inline: 0.55rem;
    margin-top: 0.3rem;
    color: var(--hts-blue-300);
    font-family: var(--hts-font-mono);
    font-size: var(--hts-text-xs);
    letter-spacing: 0.1em;
}

/* ── Main area ─────────────────────────────────────────────────────────── */

.app-main[b-ktsrb6n9jw] {
    display: grid;
    align-content: start;
    gap: var(--hts-space-5);
    padding: var(--hts-space-6);
    min-width: 0;
}

.main-bar[b-ktsrb6n9jw] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--hts-space-4);
    padding-bottom: var(--hts-space-5);
    border-bottom: 1px solid var(--hts-border);
}

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

.main-id h3[b-ktsrb6n9jw] {
    color: var(--hts-ink);
    font-family: var(--hts-font-mono);
    font-size: var(--hts-text-lg);
    font-weight: 600;
}

.main-id p[b-ktsrb6n9jw] {
    margin-top: 0.2rem;
    color: var(--hts-blue-300);
    font-family: var(--hts-font-mono);
    font-size: var(--hts-text-xs);
}

.main-state[b-ktsrb6n9jw] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.3rem 0.8rem;
    border: 1px solid transparent;
    border-radius: var(--ht-radius-xs);
    font-family: var(--hts-font-mono);
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.18em;
}

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

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

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

.state-dot[b-ktsrb6n9jw] {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 8px 1px currentColor;
}

.main-state.is-busy .state-dot[b-ktsrb6n9jw] {
    animation: cp-blink-b-ktsrb6n9jw 0.9s steps(2, end) infinite;
}

/* 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 .metric-fill[b-ktsrb6n9jw] {
    transform: scaleX(0);
}

@keyframes cp-blink-b-ktsrb6n9jw {
    50% {
        opacity: 0.2;
    }
}

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

.act[b-ktsrb6n9jw] {
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--hts-border-strong);
    border-radius: var(--hts-radius-xs);
    background: var(--hts-navy-800);
    color: var(--hts-ink);
    font-family: var(--hts-font-mono);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transition:
        border-color var(--hts-duration-fast) var(--hts-ease),
        background-color var(--hts-duration-fast) var(--hts-ease),
        color var(--hts-duration-fast) var(--hts-ease);
}

.act:hover:not(:disabled)[b-ktsrb6n9jw] {
    border-color: var(--hts-purple-400);
    background: rgba(176, 105, 255, 0.14);
    color: var(--hts-ink);
}

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

/* ── Metrics ───────────────────────────────────────────────────────────── */

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

.metric[b-ktsrb6n9jw] {
    padding: var(--hts-space-4);
    border: 1px solid var(--hts-border);
    border-radius: var(--hts-radius-sm);
    background: var(--hts-navy-800);
}

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

.metric-value[b-ktsrb6n9jw] {
    margin-top: 0.35rem;
    color: var(--hts-ink);
    font-family: var(--hts-font-mono);
    font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.75rem);
    font-weight: 600;
    letter-spacing: -0.02em;
}

.metric-track[b-ktsrb6n9jw] {
    margin-top: var(--hts-space-3);
    height: 4px;
    border-radius: 1px;
    background: var(--hts-track);
    overflow: hidden;
}

.metric-fill[b-ktsrb6n9jw] {
    display: block;
    width: var(--target, 0%);
    height: 100%;
    background: var(--hts-blue-500);
    transform-origin: left center;
    transition: width var(--hts-duration-slow) var(--hts-ease-out);
}

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

/* ── Mods view ─────────────────────────────────────────────────────────── */

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

.mods-head[b-ktsrb6n9jw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hts-space-3);
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--hts-border);
    background: var(--hts-navy-800);
    color: var(--hts-ink-muted);
    font-family: var(--hts-font-mono);
    font-size: 0.5625rem;
    letter-spacing: 0.18em;
}

.mods-count[b-ktsrb6n9jw] {
    color: var(--hts-blue-300);
}

.mods ul[b-ktsrb6n9jw] {
    display: grid;
}

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

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

.mods-name[b-ktsrb6n9jw] {
    color: var(--hts-ink);
    font-size: var(--hts-text-base);
}

.mods-id[b-ktsrb6n9jw],
.mods-size[b-ktsrb6n9jw] {
    color: var(--hts-ink-muted);
    font-family: var(--hts-font-mono);
    font-size: var(--hts-text-xs);
}

.mods-state[b-ktsrb6n9jw] {
    font-family: var(--hts-font-mono);
    font-size: 0.5625rem;
    letter-spacing: 0.16em;
    text-align: right;
}

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

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

.mods-state.s-queued[b-ktsrb6n9jw] {
    color: var(--hts-ink-muted);
}

/* ── Placeholder view ──────────────────────────────────────────────────── */

.placeholder[b-ktsrb6n9jw] {
    display: grid;
    place-items: center;
    gap: var(--hts-space-3);
    min-height: 16rem;
    padding: var(--hts-space-8);
    border: 1px dashed var(--hts-border-strong);
    border-radius: var(--hts-radius-sm);
    text-align: center;
}

.placeholder-key[b-ktsrb6n9jw] {
    color: var(--hts-purple-300);
    font-family: var(--hts-font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.22em;
}

.placeholder-copy[b-ktsrb6n9jw] {
    max-width: 24rem;
    color: var(--hts-ink-muted);
    font-size: var(--hts-text-base);
}

.loading[b-ktsrb6n9jw] {
    padding: var(--hts-space-10);
    color: var(--hts-ink-muted);
    text-align: center;
}

.cp-note[b-ktsrb6n9jw] {
    margin-top: var(--hts-space-5);
    color: var(--hts-ink-muted);
    font-size: var(--hts-text-sm);
    text-align: center;
}

/* ── Staged reveal ─────────────────────────────────────────────────────── */

/* Frame first, then sidebar items, then metrics, then console lines. Everything
   is readable from the first frame - this only orders the entrance. */
.cp-stage.is-revealed .side-item[b-ktsrb6n9jw] {
    animation: cp-in-b-ktsrb6n9jw 380ms var(--hts-ease-out) both;
}

.cp-stage.is-revealed .app-side li:nth-child(1) .side-item[b-ktsrb6n9jw] { animation-delay: 140ms; }
.cp-stage.is-revealed .app-side li:nth-child(2) .side-item[b-ktsrb6n9jw] { animation-delay: 180ms; }
.cp-stage.is-revealed .app-side li:nth-child(3) .side-item[b-ktsrb6n9jw] { animation-delay: 220ms; }
.cp-stage.is-revealed .app-side li:nth-child(4) .side-item[b-ktsrb6n9jw] { animation-delay: 260ms; }
.cp-stage.is-revealed .app-side li:nth-child(5) .side-item[b-ktsrb6n9jw] { animation-delay: 300ms; }
.cp-stage.is-revealed .app-side li:nth-child(6) .side-item[b-ktsrb6n9jw] { animation-delay: 340ms; }
.cp-stage.is-revealed .app-side li:nth-child(7) .side-item[b-ktsrb6n9jw] { animation-delay: 380ms; }

.cp-stage.is-revealed .metric[b-ktsrb6n9jw] {
    animation: cp-in-b-ktsrb6n9jw 420ms var(--hts-ease-out) both;
    animation-delay: calc(var(--i, 0) * 90ms + 300ms);
}

.cp-stage.is-revealed .metric-fill[b-ktsrb6n9jw] {
    animation: cp-fill-b-ktsrb6n9jw 900ms var(--hts-ease-out) forwards;
    animation-delay: calc(var(--i, 0) * 90ms + 460ms);
}

/* Console lives in a child component, so the parent reaches in with ::deep. */
.cp-stage.is-revealed[b-ktsrb6n9jw]  .console-line {
    animation: cp-line-b-ktsrb6n9jw 320ms var(--hts-ease-out) both;
    animation-delay: calc(var(--i, 0) * 52ms + 520ms);
}

@keyframes cp-in-b-ktsrb6n9jw {
    from {
        opacity: 0;
        transform: translate3d(0, 10px, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes cp-fill-b-ktsrb6n9jw {
    to {
        transform: scaleX(1);
    }
}

@keyframes cp-line-b-ktsrb6n9jw {
    from {
        opacity: 0;
        transform: translate3d(-6px, 0, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

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

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

@media (max-width: 860px) {
    .cp-stage[b-ktsrb6n9jw] {
        width: 100%;
    }

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

    /* Sidebar becomes a horizontal tab rail above the content. */
    .app-side[b-ktsrb6n9jw] {
        flex-direction: row;
        align-items: center;
        gap: var(--hts-space-2);
        border-right: none;
        border-bottom: 1px solid var(--hts-border);
        overflow-x: auto;
        scrollbar-width: none;
    }

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

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

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

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

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

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

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

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

    .main-actions[b-ktsrb6n9jw] {
        width: 100%;
    }

    .act[b-ktsrb6n9jw] {
        flex: 1;
    }
}
/* /Components/Home/CustomBuildSection.razor.rz.scp.css */
.build[b-of9did3zr7] {
    position: relative;
    padding-block: clamp(4.5rem, 8vw, 8rem);
    border-top: 1px solid var(--hts-border);
    overflow: hidden;
}

.build[b-of9did3zr7]::before {
    content: "";
    position: absolute;
    top: -12%;
    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;
}

.build-inner[b-of9did3zr7] {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: start;
    gap: clamp(2.5rem, 5vw, 4.5rem);
}

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

.build-kicker[b-of9did3zr7] {
    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;
}

.build-title[b-of9did3zr7] {
    font-size: clamp(1.9rem, 1.2rem + 2.4vw, 2.9rem);
    font-weight: 460;
    line-height: 1.06;
    letter-spacing: -0.03em;
}

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

.build-ceiling[b-of9did3zr7] {
    max-width: 28rem;
    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);
    line-height: var(--hts-leading-normal);
}

.build-ceiling a[b-of9did3zr7] {
    color: var(--hts-blue-300);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

/* ── Panel ─────────────────────────────────────────────────────────────── */

.build-panel[b-of9did3zr7] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
    gap: clamp(1.5rem, 3vw, 2.5rem);
    padding: clamp(1.5rem, 3vw, 2.25rem);
    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);
}

.build-fields[b-of9did3zr7] {
    display: grid;
    align-content: start;
    gap: var(--hts-space-5);
    min-width: 0;
}

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

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

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

.field-value[b-of9did3zr7] {
    min-width: 4.5ch;
    color: var(--hts-ink);
    font-family: var(--hts-font-mono);
    font-size: var(--hts-text-md);
    font-weight: 620;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.field-unit[b-of9did3zr7] {
    margin-left: 0.15rem;
    color: var(--hts-ink-muted);
    font-size: 0.625rem;
    letter-spacing: 0.1em;
}

/* The slider, drawn rather than left to the platform - a default range control is the one
   element that would announce this page was assembled from parts. */
.field input[type="range"][b-of9did3zr7] {
    width: 100%;
    height: 1.5rem;
    background: transparent;
    appearance: none;
    cursor: pointer;
}

.field input[type="range"][b-of9did3zr7]::-webkit-slider-runnable-track {
    height: 3px;
    border-radius: var(--hts-radius-pill);
    background:
        linear-gradient(90deg, var(--hts-blue-500) 0%, var(--ht-data-500) 100%);
}

.field input[type="range"][b-of9did3zr7]::-moz-range-track {
    height: 3px;
    border-radius: var(--hts-radius-pill);
    background:
        linear-gradient(90deg, var(--hts-blue-500) 0%, var(--ht-data-500) 100%);
}

.field input[type="range"][b-of9did3zr7]::-webkit-slider-thumb {
    width: 1rem;
    height: 1rem;
    margin-top: -0.4rem;
    border: 2px solid var(--hts-purple-300);
    border-radius: 50%;
    background: var(--hts-navy-900);
    box-shadow: var(--ht-ring);
    appearance: none;
    transition: box-shadow var(--hts-duration-fast) var(--hts-ease);
}

.field input[type="range"][b-of9did3zr7]::-moz-range-thumb {
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--hts-purple-300);
    border-radius: 50%;
    background: var(--hts-navy-900);
    box-shadow: var(--ht-ring);
}

.field input[type="range"]:hover[b-of9did3zr7]::-webkit-slider-thumb,
.field input[type="range"]:focus-visible[b-of9did3zr7]::-webkit-slider-thumb {
    box-shadow: var(--ht-ring);
}

.field-input[b-of9did3zr7] {
    width: 100%;
    padding: 0.6rem 0.75rem;
    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-sm);
    transition:
        border-color var(--hts-duration-fast) var(--hts-ease),
        box-shadow var(--hts-duration-fast) var(--hts-ease);
}

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

.field-input:focus-visible[b-of9did3zr7] {
    border-color: var(--hts-border-blue);
    box-shadow: var(--ht-ring);
    outline: none;
}

.field-textarea[b-of9did3zr7] {
    min-height: 4.5rem;
    line-height: var(--hts-leading-normal);
    resize: vertical;
}

/* ── Quote ─────────────────────────────────────────────────────────────── */

.build-quote[b-of9did3zr7] {
    display: grid;
    align-content: start;
    gap: var(--hts-space-4);
    padding: var(--hts-space-5);
    border: 1px solid var(--hts-border-blue);
    border-radius: var(--hts-radius-md);
    background:
        radial-gradient(130% 90% at 50% 0%, rgba(61, 92, 224, 0.14) 0%, transparent 66%),
        var(--hts-surface-inset);
    min-width: 0;
}

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

.quote-total[b-of9did3zr7] {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
    color: var(--hts-ink);
    font-size: clamp(2rem, 1.4rem + 1.8vw, 2.8rem);
    font-weight: 680;
    letter-spacing: -0.035em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.quote-symbol[b-of9did3zr7] {
    color: var(--hts-ink-muted);
    font-size: 0.5em;
    font-weight: 560;
}

.quote-unit[b-of9did3zr7] {
    color: var(--hts-ink-muted);
    font-family: var(--hts-font-mono);
    font-size: 0.5625rem;
    font-weight: 500;
    letter-spacing: 0.16em;
}

/* What the figure above covers. Ticked like the plan cards' include lists, because that is
   what it is - the same kind of list, for a tier that is not on the grid. */
.quote-spec[b-of9did3zr7] {
    display: grid;
    gap: 0.42rem;
    padding-top: var(--hts-space-4);
    border-top: 1px solid var(--hts-border);
}

.quote-spec li[b-of9did3zr7] {
    position: relative;
    padding-left: 1.05rem;
    color: var(--hts-ink-soft);
    font-family: var(--hts-font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
}

.quote-spec li[b-of9did3zr7]::before {
    content: "";
    position: absolute;
    top: 0.45em;
    left: 0;
    width: 0.32rem;
    height: 0.32rem;
    border-radius: 1px;
    background: var(--hts-blue-400);
}

.quote-renewal[b-of9did3zr7] {
    color: var(--hts-blue-300);
    font-family: var(--hts-font-mono);
    font-size: 0.5625rem;
    letter-spacing: 0.12em;
    line-height: 1.6;
}

.quote-compare[b-of9did3zr7],
.quote-note[b-of9did3zr7],
.quote-send-note[b-of9did3zr7] {
    color: var(--hts-ink-muted);
    font-size: var(--hts-text-sm);
    line-height: var(--hts-leading-normal);
}

.quote-compare[b-of9did3zr7] {
    padding-top: var(--hts-space-4);
    border-top: 1px solid var(--hts-border);
}

.quote-note[b-of9did3zr7],
.quote-send-note[b-of9did3zr7] {
    font-size: 0.6875rem;
}

.quote-unavailable[b-of9did3zr7] {
    color: var(--hts-ink-soft);
    font-size: var(--hts-text-sm);
    line-height: var(--hts-leading-normal);
}

.quote-send[b-of9did3zr7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: var(--hts-space-2);
    padding: 0.7rem 1.1rem;
    border-radius: var(--ht-radius-sm);
    background: var(--ht-live-600);
    color: #ffffff;  /* literal: the fill under it stays dark in both themes */
    font-size: var(--hts-text-sm);
    font-weight: 580;
    text-align: center;
    box-shadow: var(--hts-rim);
    transition:
        transform var(--hts-duration-fast) var(--hts-ease-out),
        box-shadow var(--hts-duration-fast) var(--hts-ease);
}

.quote-send:hover[b-of9did3zr7] {
    transform: translateY(-1px);
    box-shadow: var(--hts-rim), var(--ht-shadow-3);
}

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

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

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

@media (prefers-reduced-motion: reduce) {
    .quote-send:hover[b-of9did3zr7] {
        transform: none;
    }
}
/* /Components/Home/FaqSection.razor.rz.scp.css */
.faq-section[b-op3jmkd8dj] {
    position: relative;
    padding-block: clamp(5rem, 9vw, 9rem);
    background: var(--hts-navy-900);
    border-block: 1px solid var(--hts-border);
}

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

/* ── Aside ─────────────────────────────────────────────────────────────── */

.faq-aside[b-op3jmkd8dj] {
    position: sticky;
    top: calc(var(--hts-header-height) + var(--hts-space-8));
}

.faq-kicker[b-op3jmkd8dj] {
    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;
}

/* Sized for the pinch point rather than for the wide case: just above the width where this
   two-column layout stacks, the aside is at its narrowest and the headline was 15px wider than
   the column it sits in. */
.faq-title[b-op3jmkd8dj] {
    font-size: clamp(1.85rem, 1.15rem + 2.2vw, 3rem);
    font-weight: 460;
    line-height: 1.05;
    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. */
.faq-accent[b-op3jmkd8dj] {
    font-weight: 800;
}

.faq-note[b-op3jmkd8dj] {
    max-width: 24rem;
    margin-block: var(--hts-space-5) var(--hts-space-6);
    color: var(--hts-ink-soft);
    font-size: var(--hts-text-md);
    line-height: var(--hts-leading-relaxed);
}

/* ── List ──────────────────────────────────────────────────────────────── */

.faq[b-op3jmkd8dj] {
    display: grid;
    border-top: 1px solid var(--hts-border);
}

.faq-item[b-op3jmkd8dj] {
    position: relative;
    border-bottom: 1px solid var(--hts-border);
}

/*
    The open row is marked by an accent rule and a wash that fades out across the column,
    rather than by a flat tinted rectangle.

    The flat version had a hard right edge at the column boundary while the answer text wrapped
    well short of it, so the block read as a panel the copy had been dropped into by accident.
    A wash with no edge of its own cannot disagree with a ragged right margin.
*/
.faq-item[b-op3jmkd8dj]::before {
    content: "";
    position: absolute;
    inset: 0 0 1px -1.15rem;
    border-left: 2px solid transparent;
    border-radius: 0 var(--hts-radius-sm) var(--hts-radius-sm) 0;
    background: linear-gradient(
        100deg,
        rgba(176, 105, 255, 0.11) 0%,
        rgba(176, 105, 255, 0.04) 38%,
        rgba(176, 105, 255, 0) 78%);
    opacity: 0;
    transition:
        opacity var(--hts-duration-base) var(--hts-ease),
        border-color var(--hts-duration-base) var(--hts-ease);
    pointer-events: none;
}

.faq-item.is-open[b-op3jmkd8dj]::before {
    border-left-color: var(--hts-purple-400);
    opacity: 1;
}

/* The question and the answer sit above the wash. */
.faq-heading[b-op3jmkd8dj],
.faq-answer[b-op3jmkd8dj] {
    position: relative;
    z-index: 1;
}

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

.faq-question[b-op3jmkd8dj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hts-space-4);
    width: 100%;
    padding: var(--hts-space-5) var(--hts-space-4) var(--hts-space-5) 0;
    color: var(--hts-ink-soft);
    font-size: var(--hts-text-lg);
    font-weight: 560;
    letter-spacing: -0.012em;
    text-align: left;
    transition: color var(--hts-duration-fast) var(--hts-ease);
}

.faq-question:hover[b-op3jmkd8dj],
.faq-item.is-open .faq-question[b-op3jmkd8dj] {
    color: var(--hts-ink);
}

/* A plus/minus drawn from two rules - no icon font, no chevron cliche. */
.faq-sign[b-op3jmkd8dj] {
    position: relative;
    width: 0.85rem;
    height: 0.85rem;
    flex: none;
}

.faq-sign[b-op3jmkd8dj]::before,
.faq-sign[b-op3jmkd8dj]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1.5px;
    background: var(--hts-purple-400);
    transform: translateY(-50%);
    transition: transform var(--hts-duration-base) var(--hts-ease-out);
}

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

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

/* Collapsed panels stay in the DOM so the height can animate; visibility keeps
   them out of the accessibility tree and the tab order until opened. */
.faq-answer[b-op3jmkd8dj] {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--hts-duration-base) var(--hts-ease-out);
}

.faq-answer-inner[b-op3jmkd8dj] {
    overflow: hidden;
    visibility: hidden;
    transition: visibility 0s linear var(--hts-duration-base);
}

.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: 42rem;
    padding: 0 var(--hts-space-6) var(--hts-space-6) 0;
    color: var(--hts-ink-soft);
    font-size: var(--hts-text-md);
    line-height: var(--hts-leading-relaxed);
}

/* A hairline between the question and its answer, inset to the text rather than run to the
   column edge, so the pair reads as one block. */
.faq-item.is-open .faq-answer-inner p[b-op3jmkd8dj] {
    border-top: 1px solid var(--hts-border);
    margin-bottom: 0;
    padding-top: var(--hts-space-4);
}

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

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

@media (max-width: 560px) {
    .faq-question[b-op3jmkd8dj] {
        padding-block: var(--hts-space-4);
        font-size: var(--hts-text-md);
    }

    /* The wash cannot bleed past the container on a phone, so it starts at the text instead. */
    .faq-item[b-op3jmkd8dj]::before {
        inset: 0 0 1px -0.5rem;
    }
}
/* /Components/Home/HeroExperience.razor.rz.scp.css */
.hero[b-vk57temjtm] {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(100svh - var(--ht-header-h));
    padding-top: clamp(3rem, 7vh, 6rem);
    padding-bottom: var(--ht-space-6);
}

.hero-inner[b-vk57temjtm] {
    display: grid;
    align-content: center;
    gap: 0;
}

/* -- Kicker -------------------------------------------------------------------------------- */

.hero-kicker[b-vk57temjtm] {
    display: flex;
    align-items: center;
    gap: var(--ht-space-4);
    margin-bottom: var(--ht-space-6);
    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;
}

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

/* -- Title --------------------------------------------------------------------------------
   The full measure of the container, which is the point of the restructure: at half width this
   type had nowhere to go and ran into the panel beside it.

   The clamp is tuned so the longest line - "Feito para mundos", seventeen characters, longer
   than the English - still clears the container at every width down to 390px. */

.hero-title[b-vk57temjtm] {
    max-width: 20ch;
    font-size: clamp(2rem, 0.6rem + 5.2vw, 6rem);
    font-stretch: 112%;
    line-height: var(--ht-leading-flat);
    letter-spacing: -0.04em;
    text-wrap: nowrap;
}

.title-line[b-vk57temjtm] {
    display: block;
    color: var(--ht-ink);
    font-weight: 460;
}

/* The emphasis, and there is no colour in it. 460 against 800 in one family carries a headline
   on its own, which leaves purple free to keep meaning something. */
.title-line--accent[b-vk57temjtm] {
    font-weight: 800;
}

/* -- Body ---------------------------------------------------------------------------------- */

.hero-body[b-vk57temjtm] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
    align-items: start;
    gap: clamp(2rem, 5vw, 4.5rem);
    margin-top: clamp(2rem, 4vw, 3.25rem);
}

.hero-copy[b-vk57temjtm] {
    max-width: 42ch;
    color: var(--ht-ink-soft);
    font-size: var(--ht-text-md);
    line-height: var(--ht-leading-loose);
    text-wrap: pretty;
}

.hero-actions[b-vk57temjtm] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ht-space-3);
    margin-top: var(--ht-space-6);
}

.hero-panel-col[b-vk57temjtm] {
    min-width: 0;
}

/* -- Foot ---------------------------------------------------------------------------------
   The bar the hero sits on. A hairline and three readings, which is how a piece of equipment
   labels itself - not a bouncing chevron. */

.hero-foot[b-vk57temjtm] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--ht-space-4);
    margin-top: clamp(2.5rem, 5vw, 4rem);
    padding-top: var(--ht-space-4);
    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;
}

.hero-foot[b-vk57temjtm]::before {
    content: "";
    grid-column: 1 / -1;
    height: 1px;
    margin-bottom: var(--ht-space-4);
    background: var(--ht-edge);
}

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

.foot-alloc[b-vk57temjtm] {
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.foot-scroll[b-vk57temjtm] {
    display: inline-flex;
    align-items: center;
    gap: var(--ht-space-3);
    color: var(--ht-ink-muted);
    white-space: nowrap;
}

.foot-scroll-track[b-vk57temjtm] {
    position: relative;
    width: 1px;
    height: 1.5rem;
    background: var(--ht-edge-strong);
    overflow: hidden;
}

/* One dot falling down one hairline. The only thing in the hero that repeats, and it is doing
   a job: it says which way the page goes. */
.foot-scroll-dot[b-vk57temjtm] {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 0.5rem;
    background: var(--ht-ink-soft);
    animation: foot-fall-b-vk57temjtm 2.6s var(--ht-ease-in-out) infinite;
}

@keyframes foot-fall-b-vk57temjtm {
    0% {
        transform: translateY(-100%);
    }

    60%, 100% {
        transform: translateY(300%);
    }
}

/* -- Entrance -----------------------------------------------------------------------------
   Guarded on hts-js so that with scripting off the hero is simply there, fully painted, rather
   than animating in from nothing. */

html.hts-js .hero-body[b-vk57temjtm],
html.hts-js .hero-foot[b-vk57temjtm] {
    animation: hero-enter-b-vk57temjtm var(--ht-dur-5) var(--ht-ease-lock) both;
}

html.hts-js .hero-body[b-vk57temjtm] {
    animation-delay: 260ms;
}

html.hts-js .hero-foot[b-vk57temjtm] {
    animation-delay: 420ms;
}

@keyframes hero-enter-b-vk57temjtm {
    from {
        opacity: 0;
        transform: translate3d(0, 14px, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

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

@media (max-width: 1024px) {
    .hero-body[b-vk57temjtm] {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--ht-space-8);
    }

    .hero-panel-col[b-vk57temjtm] {
        max-width: 32rem;
    }
}

@media (max-width: 640px) {
    .hero-title[b-vk57temjtm] {
        max-width: none;
        text-wrap: balance;
    }

    /* Three readings do not fit across a phone. The allocation is the one that is only there
       for texture, so it is the one that goes. */
    .hero-foot[b-vk57temjtm] {
        grid-template-columns: 1fr auto;
    }

    .foot-alloc[b-vk57temjtm] {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .foot-scroll-dot[b-vk57temjtm] {
        animation: none;
        top: 50%;
    }

    html.hts-js .hero-body[b-vk57temjtm],
    html.hts-js .hero-foot[b-vk57temjtm] {
        animation: none;
    }
}
/* /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/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 */
.teaser[b-ef4uq2zekc] {
    position: relative;
    padding-block: clamp(4.5rem, 8vw, 8rem);
    border-top: 1px solid var(--hts-border);
    background: var(--hts-navy-900);
    overflow: hidden;
}

.teaser[b-ef4uq2zekc]::before {
    content: "";
    position: absolute;
    top: 8%;
    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;
}

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

.teaser-kicker[b-ef4uq2zekc] {
    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;
}

.teaser-title[b-ef4uq2zekc] {
    font-size: clamp(2rem, 1.3rem + 2.5vw, 3.1rem);
    font-weight: 460;
    line-height: 1.05;
    letter-spacing: -0.03em;
}

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

.teaser-points[b-ef4uq2zekc] {
    display: grid;
    gap: 0.55rem;
    margin-top: var(--hts-space-6);
}

.teaser-points li[b-ef4uq2zekc] {
    position: relative;
    padding-left: 1.15rem;
    color: var(--hts-ink-muted);
    font-family: var(--hts-font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
}

/* A square tick rather than a bullet, matching the plan cards. */
.teaser-points li[b-ef4uq2zekc]::before {
    content: "";
    position: absolute;
    top: 0.42em;
    left: 0;
    width: 0.35rem;
    height: 0.35rem;
    border-radius: 1px;
    background: var(--hts-blue-400);
}

/*
    ::deep, because this class lands on CtaButton's own root element and that element carries
    CtaButton's scope attribute rather than this component's. Without it the rule compiles,
    ships, matches nothing, and the button sits flush against the list above it.
*/
.teaser-copy[b-ef4uq2zekc]  .teaser-cta {
    margin-top: var(--hts-space-8);
}

/* ── Price ─────────────────────────────────────────────────────────────── */

.teaser-price[b-ef4uq2zekc] {
    display: grid;
    justify-items: start;
    gap: 0.2rem;
    padding: clamp(1.5rem, 3vw, 2.25rem);
    border: 1px solid var(--hts-border-blue);
    border-radius: var(--hts-radius-lg);
    background:
        radial-gradient(130% 90% at 50% 0%, rgba(61, 92, 224, 0.16) 0%, transparent 66%),
        var(--hts-surface);
    box-shadow: var(--hts-rim), var(--hts-shadow-md);
    min-width: 0;
}

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

.price-figure[b-ef4uq2zekc] {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    margin-top: 0.35rem;
    color: var(--hts-ink);
    font-size: clamp(2.4rem, 1.6rem + 2.4vw, 3.4rem);
    font-weight: 680;
    line-height: 1;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
}

.price-symbol[b-ef4uq2zekc] {
    color: var(--hts-ink-muted);
    font-size: 0.42em;
    font-weight: 560;
}

.price-unit[b-ef4uq2zekc] {
    color: var(--hts-ink-muted);
    font-family: var(--hts-font-mono);
    font-size: 0.5625rem;
    letter-spacing: 0.16em;
}

.price-pending[b-ef4uq2zekc] {
    margin-top: 0.35rem;
    color: var(--hts-ink-soft);
    font-size: var(--hts-text-sm);
    line-height: var(--hts-leading-normal);
}

.price-spec[b-ef4uq2zekc] {
    display: grid;
    width: 100%;
    margin-top: var(--hts-space-5);
    padding-top: var(--hts-space-4);
    border-top: 1px solid var(--hts-border);
}

.price-spec > div[b-ef4uq2zekc] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--hts-space-4);
    padding-block: 0.4rem;
}

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

.price-spec dd[b-ef4uq2zekc] {
    color: var(--hts-ink-soft);
    font-family: var(--hts-font-mono);
    font-size: 0.6875rem;
    white-space: nowrap;
}

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

    .teaser-price[b-ef4uq2zekc] {
        justify-self: stretch;
        max-width: 26rem;
    }
}
/* /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;
    background: var(--hts-navy-900);
    overflow: hidden;
}

/* Brand hairline sitting on the top edge. */
.site-footer[b-clkuqoki4y]::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 1px;
    background: var(--hts-gradient-hairline);
}

/* A single low bloom so the footer does not read as a flat black slab. */
.site-footer[b-clkuqoki4y]::after {
    content: "";
    position: absolute;
    right: 8%;
    bottom: -22rem;
    width: 40rem;
    height: 34rem;
    background: radial-gradient(circle, rgba(139, 50, 224, 0.20) 0%, transparent 68%);
    filter: blur(60px);
    pointer-events: none;
}

/* The footer begins with a systems ribbon rather than a silent edge. Its two identical groups
   slide by exactly one group's width, so the loop has no visible reset. */
.footer-ticker[b-clkuqoki4y] {
    position: relative;
    z-index: var(--hts-z-content);
    border-bottom: 1px solid var(--hts-border);
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--ht-live-500) 7%, transparent), transparent 20%, transparent 80%, color-mix(in srgb, var(--ht-data-500) 7%, transparent)),
        var(--hts-surface-inset);
}

.footer-ticker-window[b-clkuqoki4y] {
    position: relative;
    overflow: hidden;
}

.footer-ticker-window[b-clkuqoki4y]::before,
.footer-ticker-window[b-clkuqoki4y]::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    width: clamp(1.5rem, 6vw, 7rem);
    pointer-events: none;
}

.footer-ticker-window[b-clkuqoki4y]::before {
    left: 0;
    background: linear-gradient(90deg, var(--hts-surface-inset), transparent);
}

.footer-ticker-window[b-clkuqoki4y]::after {
    right: 0;
    background: linear-gradient(270deg, var(--hts-surface-inset), transparent);
}

.footer-ticker-track[b-clkuqoki4y] {
    display: flex;
    width: max-content;
    animation: footer-ticker-roll-b-clkuqoki4y 34s linear infinite;
    will-change: transform;
}

.footer-ticker:hover .footer-ticker-track[b-clkuqoki4y] {
    animation-play-state: paused;
}

.footer-ticker-group[b-clkuqoki4y] {
    display: flex;
    flex: none;
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-ticker-item[b-clkuqoki4y] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 3.4rem;
    padding-inline: clamp(1.25rem, 2.5vw, 2.75rem);
    border-right: 1px solid var(--hts-border);
    color: var(--hts-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;
}

.footer-ticker-dot[b-clkuqoki4y] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--ht-live-400);
    box-shadow: var(--ht-lamp-live);
    animation: footer-ticker-pulse-b-clkuqoki4y 2.8s var(--hts-ease-in-out) infinite;
    animation-delay: calc(var(--ticker-index) * -0.32s);
}

.footer-ticker-item:nth-child(3n) .footer-ticker-dot[b-clkuqoki4y] {
    background: var(--ht-data-400);
    box-shadow: var(--ht-lamp-data);
}

@keyframes footer-ticker-roll-b-clkuqoki4y {
    to {
        transform: translate3d(-50%, 0, 0);
    }
}

@keyframes footer-ticker-pulse-b-clkuqoki4y {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.38;
        transform: scale(0.72);
    }
}

.footer-inner[b-clkuqoki4y],
.footer-base[b-clkuqoki4y] {
    position: relative;
    z-index: var(--hts-z-content);
}

.footer-inner[b-clkuqoki4y] {
    display: grid;
    grid-template-columns: 1.7fr repeat(3, 1fr);
    gap: var(--hts-space-10) var(--hts-space-8);
    padding-block: clamp(3rem, 6vw, 5rem) var(--hts-space-10);
}

.footer-brand[b-clkuqoki4y] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--hts-space-5);
    max-width: 24rem;
}

.footer-blurb[b-clkuqoki4y] {
    color: var(--hts-ink-soft);
    font-size: var(--hts-text-base);
    line-height: var(--hts-leading-relaxed);
}

.footer-mail[b-clkuqoki4y] {
    display: inline-flex;
    align-items: center;
    gap: var(--hts-space-2);
    padding: 0.55rem 1rem;
    border: 1px solid var(--hts-border-strong);
    border-radius: var(--ht-radius-sm);
    background: var(--hts-surface-raised);
    box-shadow: var(--hts-rim);
    color: var(--hts-ink);
    font-size: var(--hts-text-base);
    font-weight: 520;
    text-decoration: none;
    transition:
        border-color var(--hts-duration-fast) var(--hts-ease),
        color var(--hts-duration-fast) var(--hts-ease),
        box-shadow var(--hts-duration-base) var(--hts-ease);
}

.footer-mail:hover[b-clkuqoki4y] {
    border-color: rgba(255, 255, 255, 0.28);
    color: var(--ht-ink);
    box-shadow: var(--hts-rim), var(--ht-shadow-2);
}

.footer-mail[b-clkuqoki4y]  .hts-icon {
    color: var(--ht-ink-muted);
}

.footer-title[b-clkuqoki4y] {
    margin-bottom: var(--hts-space-4);
    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;
}

.footer-column ul[b-clkuqoki4y] {
    display: grid;
    gap: var(--hts-space-3);
}

.footer-column a[b-clkuqoki4y] {
    color: var(--hts-ink-soft);
    font-size: var(--hts-text-base);
    text-decoration: none;
    transition: color var(--hts-duration-fast) var(--hts-ease);
}

.footer-column a:hover[b-clkuqoki4y] {
    color: var(--hts-ink);
    text-decoration: underline;
    text-decoration-color: var(--ht-edge-strong);
}

.footer-placeholder[b-clkuqoki4y] {
    display: flex;
    align-items: center;
    gap: var(--hts-space-2);
    color: var(--hts-ink-muted);
    font-size: var(--hts-text-base);
}

.footer-chip[b-clkuqoki4y] {
    padding: 0.1rem 0.45rem;
    border: 1px solid color-mix(in srgb, var(--ht-warn-500) 34%, transparent);
    border-radius: var(--ht-radius-xs);
    background: color-mix(in srgb, var(--ht-warn-500) 10%, transparent);
    color: var(--ht-warn-500);
    font-family: var(--ht-font-mono);
    font-size: var(--ht-text-2xs);
    font-weight: 600;
    letter-spacing: var(--ht-track-label);
    text-transform: uppercase;
    /* One of these labels sits beside a two-line link and was breaking across lines itself. */
    white-space: nowrap;
}

.footer-base[b-clkuqoki4y] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--hts-space-3);
    padding-block: var(--hts-space-6);
    border-top: 1px solid var(--hts-border);
    color: var(--hts-ink-muted);
    font-size: var(--hts-text-sm);
}

.footer-note[b-clkuqoki4y] {
    color: var(--hts-ink-muted);
}

@media (max-width: 980px) {
    .footer-inner[b-clkuqoki4y] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .footer-brand[b-clkuqoki4y] {
        grid-column: 1 / -1;
        max-width: 32rem;
    }
}

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

    .footer-base[b-clkuqoki4y] {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .footer-ticker-track[b-clkuqoki4y],
    .footer-ticker-dot[b-clkuqoki4y] {
        animation: none;
    }
}
/* /Components/Layout/SiteHeader.razor.rz.scp.css */
.site-header[b-3bvhw2rvnf] {
    position: sticky;
    top: 0;
    z-index: var(--ht-z-header);
    background: transparent;
    transition:
        background-color var(--ht-dur-3) var(--ht-ease-lock),
        backdrop-filter var(--ht-dur-3) var(--ht-ease-lock);
}

/*
    `hts-scrolled` is toggled on <html> by wwwroot/js/site.js. The header stays clear until the
    page has moved, so the hero reads edge to edge on load.

    A blur, but not a glassy one: the old rule pushed saturation to 160%, which turns whatever
    is behind it into colour and is most of what people mean by glassmorphism. Graphite at high
    opacity with a light blur keeps the type legible without the header becoming an effect.
*/
html.hts-scrolled .site-header[b-3bvhw2rvnf] {
    background: color-mix(in srgb, var(--ht-ground) 88%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.site-header[b-3bvhw2rvnf]::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 1px;
    background: var(--ht-edge-strong);
    opacity: 0;
    transition: opacity var(--ht-dur-3) var(--ht-ease-lock);
    pointer-events: none;
}

html.hts-scrolled .site-header[b-3bvhw2rvnf]::after {
    opacity: 1;
}

.header-inner[b-3bvhw2rvnf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ht-space-5);
    min-height: var(--ht-header-h);
}

.header-brand[b-3bvhw2rvnf] {
    text-decoration: none;
    border-radius: var(--ht-radius-sm);
    flex: none;
}

.header-panel[b-3bvhw2rvnf] {
    display: flex;
    align-items: center;
    gap: var(--ht-space-5);
}

.header-nav ul[b-3bvhw2rvnf] {
    display: flex;
    align-items: center;
    gap: 2px;
}

.header-nav a[b-3bvhw2rvnf] {
    position: relative;
    display: block;
    padding: 0.5rem 0.65rem;
    border-radius: var(--ht-radius-xs);
    color: var(--ht-ink-muted);
    font-size: var(--ht-text-sm);
    font-weight: 540;
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--ht-dur-2) var(--ht-ease-lock);
}

/*
    A rule under the label rather than a glowing gradient bar. Two states, and the difference
    between them is the whole colour rule in miniature: hovering is neutral, because hovering
    is not a state the system is in - being on this page is, and that one gets live purple.
*/
.header-nav a[b-3bvhw2rvnf]::after {
    content: "";
    position: absolute;
    right: 0.65rem;
    bottom: 0.22rem;
    left: 0.65rem;
    height: 1px;
    background: var(--ht-edge-strong);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--ht-dur-2) var(--ht-ease-lock);
}

.header-nav a:hover[b-3bvhw2rvnf] {
    color: var(--ht-ink);
}

.header-nav a:hover[b-3bvhw2rvnf]::after {
    transform: scaleX(1);
}

.header-nav a.is-current[b-3bvhw2rvnf] {
    color: var(--ht-ink);
}

.header-nav a.is-current[b-3bvhw2rvnf]::after {
    height: 2px;
    background: var(--ht-live-500);
    transform: scaleX(1);
}

.header-actions[b-3bvhw2rvnf] {
    display: flex;
    align-items: center;
    gap: var(--ht-space-3);
}

/* Language and theme are settings, not navigation. Grouping them behind a rule keeps the
   right-hand side from reading as three equal buttons. */
.header-utility[b-3bvhw2rvnf] {
    display: flex;
    align-items: center;
    gap: var(--ht-space-2);
    padding-right: var(--ht-space-3);
    border-right: 1px solid var(--ht-edge);
}

.header-toggle[b-3bvhw2rvnf] {
    display: none;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--ht-edge-strong);
    border-radius: var(--ht-radius-sm);
    background: var(--ht-surface-2);
    box-shadow: var(--ht-rim);
    color: var(--ht-ink);
    transition:
        border-color var(--ht-dur-2) var(--ht-ease-lock),
        color var(--ht-dur-2) var(--ht-ease-lock);
}

.header-toggle:hover[b-3bvhw2rvnf] {
    border-color: var(--ht-ink-faint);
}

/*
    Below this width the bar collapses into a panel.

    It used to be 1240px, sized for seven section links plus a sign-in link plus a call to
    action. The navigation is three items now and the sign-in link is gone, so the bar fits
    narrower than that - but not as narrow as 900, which is where it was first set: at 1024 the
    language and theme controls were being squeezed 95px under their own content. Measured, not
    guessed.
*/
@media (max-width: 1100px) {
    .header-toggle[b-3bvhw2rvnf] {
        display: grid;
    }

    .header-panel[b-3bvhw2rvnf] {
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        display: grid;
        gap: var(--ht-space-5);
        padding: var(--ht-space-5) var(--ht-container-pad) var(--ht-space-8);
        border-top: 1px solid var(--ht-edge);
        border-bottom: 1px solid var(--ht-edge);
        background: color-mix(in srgb, var(--ht-ground) 94%, transparent);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        box-shadow: var(--ht-shadow-4);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition:
            opacity var(--ht-dur-3) var(--ht-ease-lock),
            transform var(--ht-dur-3) var(--ht-ease-lock),
            visibility var(--ht-dur-3) linear;
    }

    .header-panel.is-open[b-3bvhw2rvnf] {
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .header-nav ul[b-3bvhw2rvnf] {
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
    }

    .header-nav a[b-3bvhw2rvnf] {
        padding: 0.8rem 0.9rem;
        border-radius: var(--ht-radius-sm);
        color: var(--ht-ink);
        font-size: var(--ht-text-md);
        font-weight: 560;
    }

    .header-nav a:hover[b-3bvhw2rvnf] {
        background: var(--hts-tint-hover);
    }

    /* No room for an underline in a stacked list, so the current page is marked on its leading
       edge instead - same colour, same meaning. */
    .header-nav a[b-3bvhw2rvnf]::after {
        top: 0.55rem;
        right: auto;
        bottom: 0.55rem;
        left: 0;
        width: 2px;
        height: auto;
        transform: scaleY(0);
        transform-origin: center top;
        transition: transform var(--ht-dur-2) var(--ht-ease-lock);
    }

    .header-nav a:hover[b-3bvhw2rvnf]::after {
        transform: scaleY(1);
    }

    .header-nav a.is-current[b-3bvhw2rvnf]::after {
        width: 2px;
        height: auto;
        transform: scaleY(1);
    }

    .header-actions[b-3bvhw2rvnf] {
        display: grid;
        gap: var(--ht-space-3);
        padding-top: var(--ht-space-4);
        border-top: 1px solid var(--ht-edge);
    }

    .header-utility[b-3bvhw2rvnf] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--ht-space-3);
        padding-right: 0;
        border-right: 0;
    }

    /*
        The language and theme controls stretch to fill their halves of the panel.

        These rules live here, not in the two components, because the only reason either of
        them changes shape is that THIS element collapsed. When each owned its own copy of the
        breakpoint they drifted: the switcher was still keyed to 1240 and the toggle to 960
        while the bar collapsed at 1100, so between 1100 and 1240 the switcher went full width
        inside a bar that had not collapsed yet.
    */
    .header-utility[b-3bvhw2rvnf]  .lang,
    .header-utility[b-3bvhw2rvnf]  .theme-toggle {
        justify-content: center;
        width: 100%;
    }

    .header-utility[b-3bvhw2rvnf]  .lang {
        padding-block: 0.3rem;
        font-size: var(--ht-text-xs);
    }

    .header-utility[b-3bvhw2rvnf]  .lang-option {
        flex: 1;
        padding-block: 0.5rem;
        text-align: center;
    }

    .header-utility[b-3bvhw2rvnf]  .theme-toggle {
        padding-block: 0.6rem;
    }

    .header-actions[b-3bvhw2rvnf]  .cta {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .header-nav a[b-3bvhw2rvnf]::after {
        transition: none;
    }
}
/* /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/GameHosting.razor.rz.scp.css */
/*
    The catalogue. One wide tile for the product, a narrow column for what is planned and what
    can be asked for. Hairline tiles on graphite; the only colour is the lamp on the game that
    is actually on sale and the one primary button that leads to its plans.
*/

.catalog[b-lkw6h3dizl] {
    position: relative;
    padding-block: clamp(4rem, 8vw, 7rem) var(--ht-unit-pad);
}

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

.catalog-head[b-lkw6h3dizl] {
    max-width: 56rem;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.catalog-kicker[b-lkw6h3dizl] {
    display: flex;
    align-items: center;
    gap: var(--ht-space-3);
    margin-bottom: var(--ht-space-5);
    color: var(--ht-ink-muted);
}

.catalog-title[b-lkw6h3dizl] {
    max-width: 14ch;
    font-size: var(--ht-text-5xl);
}

.catalog-lede[b-lkw6h3dizl] {
    max-width: 40rem;
    margin-top: var(--ht-space-5);
    color: var(--ht-ink-soft);
    font-size: var(--ht-text-lg);
    line-height: var(--ht-leading-normal);
}

/* -- Tiles ------------------------------------------------------------------------------- */

.games[b-lkw6h3dizl] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: auto;
    gap: var(--ht-space-4);
}

.game[b-lkw6h3dizl] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--ht-edge);
    border-radius: var(--ht-radius-lg);
    background: var(--ht-surface-2);
    box-shadow: var(--ht-rim);
    overflow: hidden;
    transition: border-color var(--ht-dur-2) var(--ht-ease-lock);
}

.game:hover[b-lkw6h3dizl] {
    border-color: var(--ht-edge-strong);
}

/* The product: two columns wide, cover on the left, and the one tile with a lit edge. */
.game.is-primary[b-lkw6h3dizl] {
    grid-column: span 2;
    grid-row: span 2;
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    border-color: var(--ht-edge-live);
    box-shadow: var(--ht-rim), var(--ht-shadow-3);
}

.game.is-planned[b-lkw6h3dizl] {
    background: var(--ht-surface-1);
}

.game[b-lkw6h3dizl]  .game-cover {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    aspect-ratio: 16 / 10;
}

.game.is-primary[b-lkw6h3dizl]  .game-cover {
    aspect-ratio: auto;
    height: 100%;
    min-height: 22rem;
    border-right: 1px solid var(--ht-edge);
}

.game.is-planned[b-lkw6h3dizl]  .game-cover {
    aspect-ratio: 16 / 8;
    border-bottom: 1px solid var(--ht-edge);
}

.game-body[b-lkw6h3dizl] {
    display: flex;
    flex-direction: column;
    gap: var(--ht-space-3);
    padding: clamp(1.25rem, 2.5vw, 2rem);
}

.game.is-primary .game-body[b-lkw6h3dizl] {
    padding: clamp(1.5rem, 3vw, 2.5rem);
}

.game-status[b-lkw6h3dizl] {
    display: inline-flex;
    align-items: center;
    gap: var(--ht-space-2);
    color: var(--ht-ink-muted);
}

.is-primary .game-status[b-lkw6h3dizl] {
    color: var(--ht-live-400);
}

.status-lamp[b-lkw6h3dizl] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ht-live-500);
    box-shadow: var(--ht-lamp-live);
}

.game-name[b-lkw6h3dizl] {
    font-size: var(--ht-text-3xl);
}

.is-planned .game-name[b-lkw6h3dizl] {
    font-size: var(--ht-text-xl);
    font-stretch: 100%;
    letter-spacing: var(--ht-track-tight);
}

.game-tagline[b-lkw6h3dizl] {
    color: var(--ht-ink);
    font-size: var(--ht-text-md);
    font-weight: 560;
}

.game-summary[b-lkw6h3dizl] {
    color: var(--ht-ink-soft);
    font-size: var(--ht-text-base);
    line-height: var(--ht-leading-normal);
}

.is-planned .game-summary[b-lkw6h3dizl] {
    color: var(--ht-ink-muted);
    font-size: var(--ht-text-sm);
}

.game-highlights[b-lkw6h3dizl] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem var(--ht-space-4);
    margin-top: var(--ht-space-2);
}

.game-highlights li[b-lkw6h3dizl] {
    position: relative;
    padding-left: 1rem;
    color: var(--ht-ink-soft);
    font-size: var(--ht-text-sm);
    line-height: var(--ht-leading-snug);
}

/* A tick mark drawn as a hairline square, the way the rest of the site draws "included". */
.game-highlights li[b-lkw6h3dizl]::before {
    content: "";
    position: absolute;
    top: 0.42em;
    left: 0;
    width: 0.4rem;
    height: 0.4rem;
    border: 1px solid var(--ht-data-500);
    border-radius: 1px;
}

.game-foot[b-lkw6h3dizl] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--ht-space-4);
    margin-top: auto;
    padding-top: var(--ht-space-4);
    border-top: 1px solid var(--ht-edge);
}

.game-price[b-lkw6h3dizl] {
    display: grid;
    gap: 0.15rem;
}

.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-muted);
    font-size: var(--ht-text-md);
    font-weight: 600;
}

.price-amount[b-lkw6h3dizl] {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
}

.price-unit[b-lkw6h3dizl] {
    color: var(--ht-ink-muted);
    font-size: var(--ht-text-sm);
}

.price-range[b-lkw6h3dizl],
.price-pending[b-lkw6h3dizl] {
    color: var(--ht-data-400);
    font-size: var(--ht-text-2xs);
    letter-spacing: 0.06em;
}

.price-pending[b-lkw6h3dizl] {
    color: var(--ht-ink-muted);
}

/* -- Request tile ------------------------------------------------------------------------ */

.game--request[b-lkw6h3dizl] {
    justify-content: center;
    border-style: dashed;
    background: transparent;
    box-shadow: none;
}

.request[b-lkw6h3dizl] {
    display: grid;
    gap: var(--ht-space-3);
    padding: clamp(1.25rem, 2.5vw, 2rem);
}

.request-kicker[b-lkw6h3dizl] {
    color: var(--ht-ink-muted);
}

.request-title[b-lkw6h3dizl] {
    font-size: var(--ht-text-xl);
    font-stretch: 100%;
    letter-spacing: var(--ht-track-tight);
}

.request-body[b-lkw6h3dizl] {
    color: var(--ht-ink-muted);
    font-size: var(--ht-text-sm);
    line-height: var(--ht-leading-normal);
}

/* -- How --------------------------------------------------------------------------------- */

.how[b-lkw6h3dizl] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--ht-space-4);
    margin-top: clamp(2.5rem, 5vw, 4rem);
    padding-top: var(--ht-space-6);
    border-top: 1px solid var(--ht-edge);
}

.how li[b-lkw6h3dizl] {
    display: grid;
    gap: var(--ht-space-2);
    color: var(--ht-ink-soft);
    font-size: var(--ht-text-sm);
    line-height: var(--ht-leading-snug);
}

.how-index[b-lkw6h3dizl] {
    color: var(--ht-ink-faint);
    font-size: var(--ht-text-2xs);
    font-weight: 600;
    letter-spacing: var(--ht-track-label);
}

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

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

    .game.is-primary[b-lkw6h3dizl] {
        grid-column: span 2;
        grid-row: auto;
    }

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

@media (max-width: 760px) {
    .games[b-lkw6h3dizl] {
        grid-template-columns: minmax(0, 1fr);
    }

    .game.is-primary[b-lkw6h3dizl] {
        grid-column: auto;
        grid-template-columns: minmax(0, 1fr);
    }

    .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-highlights[b-lkw6h3dizl] {
        grid-template-columns: minmax(0, 1fr);
    }

    .game-foot[b-lkw6h3dizl] {
        align-items: stretch;
        flex-direction: column;
    }

    .game[b-lkw6h3dizl]  .game-cta {
        width: 100%;
    }
}
/* /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/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(4rem, 8vw, 7rem) var(--ht-unit-pad);
}

.review-inner[b-sikf9gh33v] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.9fr);
    align-items: start;
    gap: clamp(2.5rem, 6vw, 5rem);
}

.review--empty .hts-container[b-sikf9gh33v] {
    display: grid;
    justify-items: start;
    gap: var(--ht-space-5);
}

/* -- Copy ---------------------------------------------------------------------------------- */

.review-crumbs[b-sikf9gh33v] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ht-space-3);
    margin-bottom: var(--ht-space-5);
    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;
}

.review-crumbs a[b-sikf9gh33v] {
    color: var(--ht-ink-muted);
    text-decoration: none;
}

.review-crumbs a:hover[b-sikf9gh33v] {
    color: var(--ht-ink);
}

.crumb-sep[b-sikf9gh33v] {
    color: var(--ht-ink-faint);
}

.crumb-here[b-sikf9gh33v] {
    color: var(--ht-live-400);
}

.review-title[b-sikf9gh33v] {
    font-size: var(--ht-text-5xl);
}

.review-lede[b-sikf9gh33v] {
    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);
}

/* -- Period links -------------------------------------------------------------------------- */

.review-periods[b-sikf9gh33v] {
    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-sikf9gh33v] {
    color: var(--ht-ink-muted);
}

.period-links[b-sikf9gh33v] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ht-space-2);
}

.period-link[b-sikf9gh33v] {
    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),
        background-color var(--ht-dur-2) var(--ht-ease-lock);
}

.period-link:hover[b-sikf9gh33v] {
    border-color: var(--ht-ink-faint);
    color: var(--ht-ink);
}

.period-link.is-current[b-sikf9gh33v] {
    border-color: var(--ht-live-500);
    background: color-mix(in srgb, var(--ht-live-600) 16%, transparent);
    color: var(--ht-ink);
}

.period-save[b-sikf9gh33v] {
    color: var(--ht-data-400);
    font-size: var(--ht-text-2xs);
    letter-spacing: 0.06em;
}

.review-change[b-sikf9gh33v] {
    justify-self: start;
    color: var(--ht-ink-muted);
    font-size: var(--ht-text-sm);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.review-change:hover[b-sikf9gh33v] {
    color: var(--ht-ink);
}

/* -- Form ---------------------------------------------------------------------------------- */

.review-form[b-sikf9gh33v] {
    display: grid;
    justify-items: start;
    gap: var(--ht-space-3);
    margin-top: var(--ht-space-7);
}

.review-form[b-sikf9gh33v]  .review-cta {
    min-width: 16rem;
}

.review-note[b-sikf9gh33v] {
    max-width: 30rem;
    color: var(--ht-ink-muted);
    font-size: var(--ht-text-sm);
    line-height: var(--ht-leading-normal);
}

.review-note.is-warn[b-sikf9gh33v] {
    padding: var(--ht-space-3) var(--ht-space-4);
    border: 1px solid rgba(240, 160, 60, 0.35);
    border-radius: var(--ht-radius-sm);
    color: var(--ht-warn-300);
}

.review-contact[b-sikf9gh33v] {
    color: var(--ht-live-400);
    font-size: var(--ht-text-sm);
}

.review-error[b-sikf9gh33v] {
    padding: var(--ht-space-3) var(--ht-space-4);
    border: 1px solid rgba(242, 99, 92, 0.4);
    border-radius: var(--ht-radius-sm);
    color: var(--ht-fault-300);
    font-size: var(--ht-text-sm);
}

/* -- Panel --------------------------------------------------------------------------------- */

.review-panel[b-sikf9gh33v] {
    position: sticky;
    top: calc(var(--ht-header-h) + var(--ht-space-5));
    min-width: 0;
}

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

    /* The summary comes first on one column: what you are buying, then the button. */
    .review-panel[b-sikf9gh33v] {
        position: static;
        order: -1;
    }

    .review-form[b-sikf9gh33v]  .review-cta {
        width: 100%;
    }
}
/* /Components/Pages/ProjectZomboid.razor.rz.scp.css */
/* -- Hero ---------------------------------------------------------------------------------- */

.zomboid-hero[b-344mwbbd57] {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: clamp(4rem, 8vw, 7rem) clamp(3rem, 6vw, 5rem);
}

/* The hero has a quiet, continuous machine rhythm after its entrance animation finishes. */
.zomboid-hero[b-344mwbbd57]::before {
    content: "";
    position: absolute;
    z-index: -2;
    inset: 0;
    opacity: 0.48;
    background-image:
        repeating-linear-gradient(90deg, var(--ht-grid-ink) 0 1px, transparent 1px 2.4rem),
        repeating-linear-gradient(180deg, var(--ht-grid-ink) 0 1px, transparent 1px 2.4rem);
    mask-image: radial-gradient(ellipse 62% 90% at 50% 45%, #000 0%, transparent 78%);
    animation: zomboid-grid-drift-b-344mwbbd57 18s linear infinite;
}

.zomboid-hero[b-344mwbbd57]::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -30%;
    pointer-events: none;
    background:
        radial-gradient(circle at 32% 50%, color-mix(in srgb, var(--ht-live-500) 18%, transparent), transparent 22%),
        radial-gradient(circle at 72% 42%, color-mix(in srgb, var(--ht-data-500) 14%, transparent), transparent 24%);
    filter: blur(26px);
    animation: zomboid-hero-drift-b-344mwbbd57 12s var(--ht-ease-in-out) infinite alternate;
}

.zomboid-hero > .hts-container[b-344mwbbd57] {
    position: relative;
}

.hero-copy[b-344mwbbd57] {
    max-width: 64rem;
    margin-inline: auto;
    text-align: center;
}

.hero-crumbs[b-344mwbbd57] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ht-space-3);
    margin-bottom: var(--ht-space-5);
    font-family: var(--ht-font-mono);
    font-size: var(--ht-text-2xs);
    font-weight: 600;
    letter-spacing: var(--ht-track-label);
    text-transform: uppercase;
}

.hero-crumbs[b-344mwbbd57]::before {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ht-live-400);
    box-shadow: var(--ht-lamp-live);
    animation: zomboid-status-pulse-b-344mwbbd57 2.8s var(--ht-ease-in-out) infinite;
    content: "";
}

.hero-crumbs a[b-344mwbbd57] {
    color: var(--ht-ink-muted);
    text-decoration: none;
}

.hero-crumbs a:hover[b-344mwbbd57] {
    color: var(--ht-ink);
}

.crumb-sep[b-344mwbbd57] {
    color: var(--ht-ink-faint);
}

.crumb-here[b-344mwbbd57] {
    color: var(--ht-live-400);
}

.hero-title[b-344mwbbd57] {
    max-width: 20ch;
    margin-inline: auto;
    font-size: var(--ht-text-5xl);
}

.hero-lede[b-344mwbbd57] {
    max-width: 40rem;
    margin: var(--ht-space-5) auto 0;
    color: var(--ht-ink-soft);
    font-size: var(--ht-text-lg);
    line-height: var(--ht-leading-normal);
}

.hero-actions[b-344mwbbd57] {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--ht-space-3);
    margin-top: var(--ht-space-7);
}

/* Three facts, read from the catalogue. Mono because they are figures. */
.hero-facts[b-344mwbbd57] {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    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);
}

.hero-facts[b-344mwbbd57]::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 18%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--ht-live-400), var(--ht-data-400), transparent);
    box-shadow: 0 0 14px color-mix(in srgb, var(--ht-live-400) 46%, transparent);
    animation: zomboid-signal-sweep-b-344mwbbd57 5.6s linear infinite;
}

@keyframes zomboid-grid-drift-b-344mwbbd57 {
    to {
        background-position: 2.4rem 0, 0 2.4rem;
    }
}

@keyframes zomboid-hero-drift-b-344mwbbd57 {
    from {
        transform: translate3d(-2%, -1%, 0) scale(0.98);
    }

    to {
        transform: translate3d(2%, 2%, 0) scale(1.04);
    }
}

@keyframes zomboid-status-pulse-b-344mwbbd57 {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    52% {
        opacity: 0.42;
        transform: scale(0.72);
    }
}

@keyframes zomboid-signal-sweep-b-344mwbbd57 {
    from {
        transform: translateX(-20%);
    }

    to {
        transform: translateX(555%);
    }
}

.hero-facts div[b-344mwbbd57] {
    display: grid;
    gap: 0.3rem;
}

.hero-facts dt[b-344mwbbd57] {
    color: var(--ht-ink-muted);
}

.hero-facts dd[b-344mwbbd57] {
    margin: 0;
    color: var(--ht-ink);
    font-size: var(--ht-text-xl);
    font-weight: 620;
    letter-spacing: -0.02em;
}

.fact-unit[b-344mwbbd57] {
    margin-left: 0.25rem;
    color: var(--ht-ink-muted);
    font-size: var(--ht-text-sm);
    font-weight: 400;
    letter-spacing: 0;
}

/* -- Features ---------------------------------------------------------------------------- */

.features[b-344mwbbd57] {
    padding-block: clamp(3rem, 6vw, 5rem);
    border-top: 1px solid var(--ht-edge);
}

.features-head[b-344mwbbd57] {
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.features-kicker[b-344mwbbd57] {
    display: flex;
    align-items: center;
    gap: var(--ht-space-3);
    margin-bottom: var(--ht-space-4);
    color: var(--ht-ink-muted);
}

.features-title[b-344mwbbd57] {
    font-size: var(--ht-text-3xl);
}

/* Nine facts on a hairline grid. Not cards: the lines between them are the structure. */
.feature-grid[b-344mwbbd57] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--ht-edge);
    border-left: 1px solid var(--ht-edge);
}

.feature-grid li[b-344mwbbd57] {
    display: grid;
    gap: var(--ht-space-2);
    padding: var(--ht-space-5);
    border-right: 1px solid var(--ht-edge);
    border-bottom: 1px solid var(--ht-edge);
}

.feature-index[b-344mwbbd57] {
    color: var(--ht-ink-faint);
    font-size: var(--ht-text-2xs);
    font-weight: 600;
    letter-spacing: var(--ht-track-label);
}

.feature-name[b-344mwbbd57] {
    font-size: var(--ht-text-md);
    font-weight: 620;
    letter-spacing: -0.012em;
}

.feature-detail[b-344mwbbd57] {
    color: var(--ht-ink-muted);
    font-size: var(--ht-text-sm);
    line-height: var(--ht-leading-normal);
}

/* -- Back -------------------------------------------------------------------------------- */

.zomboid-back[b-344mwbbd57] {
    padding-block: clamp(2rem, 4vw, 3rem);
    border-top: 1px solid var(--ht-edge);
}

.back-link[b-344mwbbd57] {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    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-decoration: none;
    text-transform: uppercase;
    transition: color var(--ht-dur-2) var(--ht-ease-lock);
}

.back-link[b-344mwbbd57]  svg {
    transform: rotate(180deg);
}

.back-link:hover[b-344mwbbd57] {
    color: var(--ht-ink);
}

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

@media (max-width: 1024px) {
    .feature-grid[b-344mwbbd57] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .feature-grid[b-344mwbbd57] {
        grid-template-columns: minmax(0, 1fr);
    }

    .hero-actions[b-344mwbbd57]  .cta {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .zomboid-hero[b-344mwbbd57]::before,
    .zomboid-hero[b-344mwbbd57]::after,
    .hero-crumbs[b-344mwbbd57]::before,
    .hero-facts[b-344mwbbd57]::before {
        animation: 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/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 */
/*
    The action primitive.

    What changed and why:

      - No pill. A 999px radius on a call to action is the single most common tell of a
        consumer software template. Hardware has small corners, so this has small corners.
      - No gradient fill. One flat hue, which is what makes it read as a switch rather than as
        an advertisement.
      - No lift on hover. Buttons that rise off the page are the default everywhere; a mounted
        control does not move when you point at it. What changes instead is the rim, the edge
        and the arrow - the button acknowledges the pointer without leaving its seat.
      - No light sweeping across it. That effect existed because it could.

    The fill stays at one lightness in every state on purpose: white on it measures 5.3:1, and
    a hover that brightened the fill would drop that under the AA floor exactly when somebody
    is about to press it.
*/

.cta[b-1urx9vka13] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ht-space-2);
    border: 1px solid transparent;
    border-radius: var(--ht-radius-sm);
    font-weight: 620;
    letter-spacing: -0.005em;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background-color var(--ht-dur-2) var(--ht-ease-lock),
        border-color var(--ht-dur-2) var(--ht-ease-lock),
        box-shadow var(--ht-dur-2) var(--ht-ease-lock),
        color var(--ht-dur-2) var(--ht-ease-lock);
}

.cta:disabled[b-1urx9vka13] {
    opacity: 0.42;
    cursor: not-allowed;
    box-shadow: none;
}

/* -- Sizes ------------------------------------------------------------------------------- */

.cta--sm[b-1urx9vka13] {
    padding: 0.5rem 0.95rem;
    font-size: var(--ht-text-base);
}

.cta--md[b-1urx9vka13] {
    padding: 0.7rem 1.3rem;
    font-size: var(--ht-text-base);
}

.cta--lg[b-1urx9vka13] {
    padding: 0.9rem 1.7rem;
    font-size: var(--ht-text-md);
}

/* -- Primary ------------------------------------------------------------------------------
   Live purple, and the only place on a given view it is allowed to be used as a fill. */

.cta--primary[b-1urx9vka13] {
    background-color: var(--ht-live-600);
    color: #ffffff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.cta--primary:hover[b-1urx9vka13] {
    color: #ffffff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 0 0 1px var(--ht-live-400);
}

.cta--primary:active[b-1urx9vka13] {
    background-color: var(--ht-live-700);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* -- Secondary ----------------------------------------------------------------------------
   Deliberately colourless. If the secondary action also carried brand colour, the primary one
   would stop being the answer to the question "what does this page want me to do". */

.cta--secondary[b-1urx9vka13] {
    background-color: transparent;
    border-color: var(--ht-edge-strong);
    color: var(--ht-ink);
}

.cta--secondary:hover[b-1urx9vka13] {
    border-color: var(--ht-ink-faint);
    background-color: var(--hts-tint-hover);
    color: var(--ht-ink);
}

.cta--secondary:active[b-1urx9vka13] {
    background-color: transparent;
}

/* -- Ghost: an inline text action --------------------------------------------------------- */

.cta--ghost[b-1urx9vka13] {
    padding-inline: 0.3rem;
    color: var(--ht-live-400);
}

.cta--ghost:hover[b-1urx9vka13] {
    color: var(--ht-live-300);
}

/* -- Inverse: for the rare panel that is itself light ------------------------------------- */

.cta--inverse[b-1urx9vka13] {
    background-color: var(--ht-graphite-100);
    color: var(--ht-graphite-1000);
}

.cta--inverse:hover[b-1urx9vka13] {
    background-color: #ffffff;
    color: var(--ht-graphite-1000);
}

.cta--outline-inverse[b-1urx9vka13] {
    background-color: transparent;
    border-color: var(--ht-ink-faint);
    color: #ffffff;
}

.cta--outline-inverse:hover[b-1urx9vka13] {
    border-color: var(--ht-ink-muted);
    background-color: var(--ht-ink-faint);
    color: #ffffff;
}

/* -- Trailing icon ------------------------------------------------------------------------
   The one thing that moves. Short, and it locks rather than easing out for a third of a
   second - the difference between a mechanism and a decoration. */

.cta[b-1urx9vka13]  .hts-icon {
    width: 1em;
    height: 1em;
    transition: transform var(--ht-dur-2) var(--ht-ease-lock);
}

.cta:hover[b-1urx9vka13]  .hts-icon {
    transform: translateX(3px);
}

.cta--secondary:focus-visible[b-1urx9vka13],
.cta--outline-inverse:focus-visible[b-1urx9vka13] {
    outline: 2px solid var(--ht-data-400);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .cta:hover[b-1urx9vka13]  .hts-icon {
        transform: none;
    }
}

@media (max-width: 480px) {
    .cta--lg[b-1urx9vka13],
    .cta--md[b-1urx9vka13] {
        width: 100%;
    }
}

/* -- Busy ---------------------------------------------------------------------------------- */

.cta-spinner[b-1urx9vka13] {
    width: 0.9em;
    height: 0.9em;
    flex: none;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    opacity: 0.85;
    animation: cta-spin-b-1urx9vka13 620ms linear infinite;
}

@keyframes cta-spin-b-1urx9vka13 {
    to {
        transform: rotate(360deg);
    }
}

/* A spinner that cannot spin is just a ring; a pulse still reads as working. */
@media (prefers-reduced-motion: reduce) {
    .cta-spinner[b-1urx9vka13] {
        animation: cta-pulse-b-1urx9vka13 1.4s steps(2, jump-none) infinite;
    }
}

@keyframes cta-pulse-b-1urx9vka13 {
    50% {
        opacity: 0.3;
    }
}

.cta[aria-busy="true"][b-1urx9vka13] {
    opacity: 0.9;
    cursor: progress;
}
/* /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 */
/*
    Two keys, one of them pressed.

    The pressed key used to take a purple wash and a purple rim. Which language you are reading
    is not a running state, so it does not get the colour that means running - it gets the
    treatment a pressed key gets, which is to sit lower and lighter than the one beside it.

    No media query here; the header owns the breakpoint. See SiteHeader.razor.css.
*/

.lang[b-xw5t1ahdju] {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    flex: none;
    padding: 2px;
    border: 1px solid var(--ht-edge-strong);
    border-radius: var(--ht-radius-sm);
    background: var(--ht-surface-2);
    box-shadow: var(--ht-rim);
    font-family: var(--ht-font-mono);
    font-size: var(--ht-text-2xs);
    font-weight: 600;
    letter-spacing: var(--ht-track-label);
}

.lang-option[b-xw5t1ahdju] {
    padding: 0.3rem 0.5rem;
    border-radius: var(--ht-radius-xs);
    color: var(--ht-ink-muted);
    text-decoration: none;
    white-space: nowrap;
    transition:
        background-color var(--ht-dur-2) var(--ht-ease-lock),
        color var(--ht-dur-2) var(--ht-ease-lock);
}

.lang-option:hover[b-xw5t1ahdju] {
    color: var(--ht-ink);
    background: var(--hts-tint-hover);
}

.lang-option.is-active[b-xw5t1ahdju],
.lang-option.is-active:hover[b-xw5t1ahdju] {
    background: var(--ht-surface-inset);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
    color: var(--ht-ink);
}
/* /Components/Shared/ThemeToggle.razor.rz.scp.css */
/*
    The theme switch.

    Deliberately colourless. Purple means running and blue means measured, and a theme
    preference is neither - it is a setting. The old version put a glowing blue lamp in the
    knob that turned into a glowing purple one, which is two lit indicators in the header
    signalling nothing at all.

    The affordance comes from the track darkening and the knob brightening, which is what a
    physical switch does.

    No media query here. The only reason this control ever changes shape is that the header
    collapsed around it, and the header owns that breakpoint - see SiteHeader.razor.css.
*/

.theme-toggle[b-dlp51e5tnj] {
    display: inline-flex;
    align-items: center;
    gap: var(--ht-space-2);
    padding: 0.35rem 0.65rem 0.35rem 0.4rem;
    border: 1px solid var(--ht-edge-strong);
    border-radius: var(--ht-radius-sm);
    background: var(--ht-surface-2);
    box-shadow: var(--ht-rim);
    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);
    transition:
        border-color var(--ht-dur-2) var(--ht-ease-lock),
        color var(--ht-dur-2) var(--ht-ease-lock);
}

.theme-toggle:hover[b-dlp51e5tnj] {
    border-color: rgba(255, 255, 255, 0.28);
    color: var(--ht-ink);
}

/* A track is one of the few things a pill radius is actually right for. */
.toggle-track[b-dlp51e5tnj] {
    position: relative;
    display: block;
    width: 1.9rem;
    height: 1.05rem;
    flex: none;
    border-radius: var(--ht-radius-pill);
    background: var(--hts-track);
    box-shadow: inset 0 0 0 1px var(--ht-edge);
    transition: background-color var(--ht-dur-3) var(--ht-ease-lock);
}

.theme-toggle[aria-checked="true"] .toggle-track[b-dlp51e5tnj] {
    background: var(--ht-graphite-700);
}

.toggle-knob[b-dlp51e5tnj] {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    background: var(--ht-ink-muted);
    transition:
        transform var(--ht-dur-3) var(--ht-ease-lock),
        background-color var(--ht-dur-3) var(--ht-ease-lock);
}

.theme-toggle[aria-checked="true"] .toggle-knob[b-dlp51e5tnj] {
    transform: translateX(0.85rem);
    background: var(--ht-ink);
}

.toggle-label[b-dlp51e5tnj] {
    min-width: 2.4rem;
    text-align: left;
}

@media (prefers-reduced-motion: reduce) {
    .toggle-knob[b-dlp51e5tnj] {
        transition: none;
    }
}
/* /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);
}

.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 */
/*
    One face, divided by hairlines. The lamp is the only purple; the discount and the
    equivalent-per-month line are the only blue, because those two are the measured figures.
*/

.summary[b-zzhhvfriwi] {
    display: grid;
    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;
}

.summary-head[b-zzhhvfriwi] {
    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);
}

.summary-lamp[b-zzhhvfriwi] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ht-live-500);
    box-shadow: var(--ht-lamp-live);
}

.summary-id[b-zzhhvfriwi] {
    color: var(--ht-ink);
    font-size: var(--ht-text-sm);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.summary-state[b-zzhhvfriwi] {
    color: var(--ht-live-400);
}

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

.row[b-zzhhvfriwi] {
    display: grid;
    grid-template-columns: minmax(6rem, 0.6fr) minmax(0, 1.8fr);
    align-items: baseline;
    gap: var(--ht-space-4);
    padding: var(--ht-space-4) var(--ht-space-5);
    border-bottom: 1px solid var(--ht-edge);
}

.row:last-child[b-zzhhvfriwi] {
    border-bottom: 0;
}

.row dt[b-zzhhvfriwi] {
    color: var(--ht-ink-muted);
}

.row dd[b-zzhhvfriwi] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.7rem;
    margin: 0;
    color: var(--ht-ink);
    font-size: var(--ht-text-md);
    font-weight: 560;
}

.row dd.is-data[b-zzhhvfriwi] {
    color: var(--ht-data-400);
}

.row-strong[b-zzhhvfriwi] {
    color: var(--ht-ink);
}

.row-dim[b-zzhhvfriwi] {
    color: var(--ht-ink-muted);
    font-size: var(--ht-text-sm);
    font-weight: 400;
}

/* -- Resources ----------------------------------------------------------------------------- */

.resources[b-zzhhvfriwi] {
    display: grid;
    width: 100%;
    gap: 0.35rem;
}

.resources li[b-zzhhvfriwi] {
    display: flex;
    justify-content: space-between;
    gap: var(--ht-space-3);
    font-size: var(--ht-text-sm);
    font-weight: 400;
    color: var(--ht-ink-soft);
}

.resources b[b-zzhhvfriwi] {
    color: var(--ht-ink);
    font-weight: 600;
    white-space: nowrap;
}

/* -- Price ----------------------------------------------------------------------------- */

.row--price[b-zzhhvfriwi] {
    background: var(--ht-surface-inset);
}

.row--price dd[b-zzhhvfriwi] {
    display: grid;
    gap: var(--ht-space-2);
}

.price[b-zzhhvfriwi] {
    width: 100%;
    border-collapse: collapse;
}

.price th[b-zzhhvfriwi] {
    padding: 0.3rem 0;
    color: var(--ht-ink-soft);
    font-size: var(--ht-text-sm);
    font-weight: 400;
    text-align: left;
}

.price th .row-dim[b-zzhhvfriwi] {
    display: block;
    font-size: var(--ht-text-xs);
}

.price td[b-zzhhvfriwi] {
    padding: 0.3rem 0;
    color: var(--ht-ink);
    font-size: var(--ht-text-sm);
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
}

.price tr.is-data td[b-zzhhvfriwi],
.price tr.is-data th[b-zzhhvfriwi] {
    color: var(--ht-data-400);
}

.price-total th[b-zzhhvfriwi],
.price-total td[b-zzhhvfriwi] {
    padding-top: 0.6rem;
    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: var(--ht-text-xl);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.price-equivalent[b-zzhhvfriwi] {
    color: var(--ht-data-400);
    font-size: var(--ht-text-2xs);
    letter-spacing: 0.04em;
    text-align: right;
}

/* -- Audience --------------------------------------------------------------------------- */

.summary-audience[b-zzhhvfriwi] {
    display: grid;
    gap: var(--ht-space-2);
    padding: var(--ht-space-4) var(--ht-space-5);
    border-top: 1px solid var(--ht-edge);
    color: var(--ht-ink-soft);
    font-size: var(--ht-text-sm);
    line-height: var(--ht-leading-normal);
}

.summary-audience .hts-label[b-zzhhvfriwi] {
    color: var(--ht-ink-muted);
}

@media (max-width: 480px) {
    .row[b-zzhhvfriwi] {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--ht-space-2);
    }
}
/* /Components/Shop/PlanPicker.razor.rz.scp.css */
/*
    Eight tiers on one grid. Cards, because a plan is genuinely a thing you pick up - but hairline
    cards on graphite, all the same size, with one recommended tier marked by its edge rather
    than by being bigger. Colour appears in exactly three places: the checked period, the
    recommended tier's edge and primary button, and the bot lamp on the tiers that carry it.
*/

.picker[b-cah4stokat] {
    position: relative;
    padding-block: var(--ht-unit-pad);
    border-top: 1px solid var(--ht-edge);
}

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

.picker-head[b-cah4stokat] {
    max-width: 52rem;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.picker-kicker[b-cah4stokat] {
    display: flex;
    align-items: center;
    gap: var(--ht-space-3);
    margin-bottom: var(--ht-space-5);
    color: var(--ht-ink-muted);
}

.picker-title[b-cah4stokat] {
    font-size: var(--ht-text-4xl);
}

.picker-lede[b-cah4stokat] {
    max-width: 40rem;
    margin-top: var(--ht-space-4);
    color: var(--ht-ink-soft);
    font-size: var(--ht-text-lg);
    line-height: var(--ht-leading-normal);
}

/* -- Periods ----------------------------------------------------------------------------- */

/*
    Three radios drawn as one segmented control. The inputs are visually hidden but stay in the
    tab order: arrow keys move between them, the label's ring follows focus, and the checked one
    is the one with the live fill.
*/
.periods[b-cah4stokat] {
    margin: 0 0 var(--ht-space-7);
    padding: 0;
    border: 0;
    min-width: 0;
}

.periods-legend[b-cah4stokat] {
    margin-bottom: var(--ht-space-3);
    padding: 0;
    color: var(--ht-ink-muted);
}

.periods-track[b-cah4stokat] {
    display: inline-grid;
    grid-template-columns: repeat(3, auto);
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--ht-edge-strong);
    border-radius: var(--ht-radius-md);
    background: var(--ht-surface-1);
    box-shadow: var(--ht-rim);
}

.period-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] {
    display: inline-flex;
    align-items: center;
    gap: var(--ht-space-3);
    padding: 0.6rem 1.1rem;
    border-radius: var(--ht-radius-sm);
    color: var(--ht-ink-muted);
    font-size: var(--ht-text-base);
    font-weight: 600;
    letter-spacing: -0.005em;
    cursor: pointer;
    transition:
        background-color var(--ht-dur-2) var(--ht-ease-lock),
        color var(--ht-dur-2) var(--ht-ease-lock),
        box-shadow var(--ht-dur-2) var(--ht-ease-lock);
}

.period:hover[b-cah4stokat] {
    color: var(--ht-ink);
}

.period-input:checked + .period[b-cah4stokat] {
    background: var(--ht-live-600);
    color: #ffffff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.period-input:focus-visible + .period[b-cah4stokat] {
    box-shadow: var(--ht-ring);
}

/* The saving, in the data voice: it is a measured percentage, not a promotion badge. */
.period-save[b-cah4stokat] {
    padding: 0.1rem 0.45rem;
    border: 1px solid var(--ht-edge-data);
    border-radius: var(--ht-radius-xs);
    color: var(--ht-data-400);
    font-size: var(--ht-text-2xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.period-input:checked + .period .period-save[b-cah4stokat] {
    border-color: rgba(255, 255, 255, 0.35);
    color: #ffffff;
}

/* -- Plans ------------------------------------------------------------------------------- */

.plans[b-cah4stokat] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--ht-space-4);
}

.plan[b-cah4stokat] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--ht-space-4);
    padding: var(--ht-space-5);
    border: 1px solid var(--ht-edge);
    border-radius: var(--ht-radius-md);
    background: var(--ht-surface-2);
    box-shadow: var(--ht-rim);
    transition: border-color var(--ht-dur-2) var(--ht-ease-lock);
}

.plan:hover[b-cah4stokat] {
    border-color: var(--ht-edge-strong);
}

.plan.is-recommended[b-cah4stokat] {
    border-color: var(--ht-edge-live);
}

.plan-title[b-cah4stokat] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ht-space-3);
}

.plan-name[b-cah4stokat] {
    font-size: var(--ht-text-xl);
    font-weight: 660;
    letter-spacing: -0.02em;
}

.plan-flag[b-cah4stokat] {
    padding: 0.15rem 0.45rem;
    border: 1px solid var(--ht-edge-live);
    border-radius: var(--ht-radius-xs);
    color: var(--ht-live-400);
    white-space: nowrap;
}

/* One line, clamped. The cards are read across, so every figure below has to sit at the same
   height on every card. */
.plan-tagline[b-cah4stokat] {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    min-height: calc(var(--ht-leading-snug) * var(--ht-text-sm) * 2);
    margin-top: var(--ht-space-1);
    overflow: hidden;
    color: var(--ht-ink-muted);
    font-size: var(--ht-text-sm);
    line-height: var(--ht-leading-snug);
}

/* The headline figure. RAM is what differs between tiers and what a community shops on. */
.plan-memory[b-cah4stokat] {
    display: flex;
    align-items: baseline;
    gap: var(--ht-space-2);
    padding: var(--ht-space-3) var(--ht-space-4);
    border: 1px solid var(--ht-edge);
    border-radius: var(--ht-radius-sm);
    background: var(--ht-surface-inset);
}

.memory-value[b-cah4stokat] {
    color: var(--ht-ink);
    font-size: 1.9rem;
    font-weight: 620;
    line-height: 1;
    letter-spacing: -0.03em;
}

.memory-unit[b-cah4stokat] {
    color: var(--ht-data-400);
}

.plan-specs[b-cah4stokat] {
    display: grid;
    gap: 0.45rem;
    margin: 0;
}

.plan-specs > div[b-cah4stokat] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--ht-space-3);
    padding-bottom: 0.45rem;
    border-bottom: 1px solid var(--ht-edge);
}

.plan-specs dt[b-cah4stokat] {
    color: var(--ht-ink-muted);
    font-size: var(--ht-text-sm);
}

.plan-specs dd[b-cah4stokat] {
    margin: 0;
    color: var(--ht-ink);
    font-size: var(--ht-text-sm);
    font-weight: 600;
    white-space: nowrap;
}

.spec-bot dd[b-cah4stokat] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    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;
}

.bot-lamp[b-cah4stokat] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ht-live-500);
    box-shadow: var(--ht-lamp-live);
}

/* -- Prices ------------------------------------------------------------------------------ */

/*
    Three price blocks per card; one shown. The picker's own radio state decides which, through
    :has() on the section, so the eight cards switch together and nothing crosses to the server.
*/
.plan-price[b-cah4stokat] {
    display: none;
    flex-direction: column;
    gap: var(--ht-space-3);
    margin-top: auto;
    padding-top: var(--ht-space-4);
    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;
}

/* A billing switch is a new commercial state, not a number teleported into place. The incoming
   price lifts through a short mask while the old block leaves with the normal display swap.
   Amounts themselves never count upward: money must remain immediately legible. */
.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 360ms var(--hts-ease-out) both;
}

@keyframes price-period-enter-b-cah4stokat {
    from {
        opacity: 0;
        clip-path: inset(0 0 34% 0);
        transform: translate3d(0, 10px, 0);
    }

    to {
        opacity: 1;
        clip-path: inset(0 0 0 0);
        transform: none;
    }
}

/* A browser without :has() shows the monthly price and never switches. Nothing is hidden that
   matters; the review step re-states the period anyway. */
@supports not selector(:has(a)) {
    .plan-price[data-period="monthly"][b-cah4stokat] {
        display: flex;
    }
}

.price-figure[b-cah4stokat] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.1rem 0.4rem;
    color: var(--ht-ink);
}

.price-symbol[b-cah4stokat] {
    color: var(--ht-ink-muted);
    font-family: var(--ht-font-mono);
    font-size: var(--ht-text-md);
    font-weight: 600;
}

.price-amount[b-cah4stokat] {
    font-size: clamp(1.7rem, 1.3rem + 1vw, 2.1rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
}

.price-unit[b-cah4stokat] {
    color: var(--ht-ink-muted);
    font-size: var(--ht-text-sm);
}

.price-line[b-cah4stokat] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 0.6rem;
    color: var(--ht-ink-muted);
    font-size: var(--ht-text-2xs);
    letter-spacing: 0.04em;
}

.price-was[b-cah4stokat] {
    text-decoration: line-through;
    text-decoration-color: var(--ht-ink-faint);
}

.price-equivalent[b-cah4stokat] {
    color: var(--ht-data-400);
}

.price-pending[b-cah4stokat] {
    color: var(--ht-ink-muted);
    font-size: var(--ht-text-sm);
    letter-spacing: 0.06em;
}

.plan[b-cah4stokat]  .plan-cta {
    width: 100%;
    margin-top: var(--ht-space-1);
}

/* -- Note -------------------------------------------------------------------------------- */

.picker-note[b-cah4stokat] {
    max-width: 46rem;
    margin-top: clamp(2rem, 3.5vw, 3rem);
    padding-top: var(--ht-space-5);
    border-top: 1px solid var(--ht-edge);
    color: var(--ht-ink-muted);
    font-size: var(--ht-text-sm);
    line-height: var(--ht-leading-normal);
}

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

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

@media (max-width: 620px) {
    .plans[b-cah4stokat] {
        grid-template-columns: minmax(0, 1fr);
    }

    .periods-track[b-cah4stokat] {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
    }

    .period[b-cah4stokat] {
        flex-direction: column;
        gap: 0.2rem;
        justify-content: center;
        padding: 0.55rem 0.4rem;
        text-align: center;
        font-size: var(--ht-text-sm);
    }
}

@media (prefers-reduced-motion: reduce) {
    .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;
    }
}