/* /Components/Landing/LoopRing.razor.rz.scp.css */
.loop-ring[b-tuta0shez1] {
    position: relative;
    left: 50%;
    width: min(1360px, 94vw);
    margin: 3.5rem 0 0;
    transform: translateX(-50%);
}

/* PROTOTYPE: one shared stage for the whole module — the night map lies
   under the compass and its light fades toward the product screen, so
   controller and evidence read as one instrument panel. Still image;
   only the needle moves. */
.loop-ring[b-tuta0shez1]::before {
    content: "";
    position: absolute;
    inset: -6% -2%;
    z-index: -1;
    background: url('img/proto/loose-ends-converge.jpg') 24% 66% / cover no-repeat;
    opacity: 0.16;
    -webkit-mask-image: radial-gradient(95% 125% at 27% 55%, #000 22%, transparent 72%);
    mask-image: radial-gradient(95% 125% at 27% 55%, #000 22%, transparent 72%);
    pointer-events: none;
}

.loop-ring-columns[b-tuta0shez1] {
    display: grid;
    /* PROTOTYPE: the compass is the controller (~45%), the real screen is
       the evidence (~55%). */
    grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
    gap: 1.75rem;
    align-items: center;
}

.loop-ring-stage[b-tuta0shez1] {
    position: relative;
}

.loop-ring-stage[b-tuta0shez1]::before {
    content: "";
    position: absolute;
    inset: -6%;
    background: radial-gradient(circle at 50% 47%, rgba(114, 217, 154, 0.09), transparent 62%);
    pointer-events: none;
}

/* PROTOTYPE: compass expression. The loop is a thin trail; one amber path
   travels it to the chosen bearing and closes the full circle on Navigator. */
.ring-trail[b-tuta0shez1] {
    fill: none;
    stroke: rgba(255, 255, 255, 0.12);
    stroke-width: 2;
    pointer-events: none;
}

.ring-path[b-tuta0shez1] {
    fill: none;
    stroke: var(--amber, #f2bd63);
    stroke-width: 2.5;
    stroke-linecap: round;
    opacity: 0.9;
    filter: drop-shadow(0 0 8px rgba(242, 189, 99, 0.35));
    transition: stroke-dasharray 0.9s cubic-bezier(0.3, 0.8, 0.3, 1);
    animation: ring-path-in-b-tuta0shez1 1.2s cubic-bezier(0.3, 0.8, 0.3, 1) 0.35s backwards;
    pointer-events: none;
}

@keyframes ring-path-in-b-tuta0shez1 {
    from { stroke-dasharray: 0 1; }
}

/* The arrival halo: marks where the amber path ends. */
.ring-path-end[b-tuta0shez1] {
    fill: none;
    stroke: var(--amber, #f2bd63);
    stroke-width: 1.5;
    opacity: 0.85;
    pointer-events: none;
}

.ring-node[b-tuta0shez1] {
    stroke: none;
    stroke-width: 0;
    transition: fill 0.25s ease, filter 0.3s ease, transform 0.3s ease, stroke 0.2s ease, stroke-width 0.2s ease;
    transform-box: fill-box;
    transform-origin: center;
    pointer-events: auto;
    animation: ring-enter-b-tuta0shez1 0.5s ease backwards;
}

.ring-node.ring-g0[b-tuta0shez1] { animation-delay: 0.1s; }
.ring-node.ring-g1[b-tuta0shez1] { animation-delay: 0.2s; }
.ring-node.ring-g2[b-tuta0shez1] { animation-delay: 0.3s; }
.ring-node.ring-g3[b-tuta0shez1] { animation-delay: 0.4s; }
.ring-node.ring-g4[b-tuta0shez1] { animation-delay: 0.5s; }

.loop-ring-stage svg[b-tuta0shez1] {
    position: relative;
    display: block;
    width: min(460px, 100%);
    height: auto;
    margin: 0 auto;
}

/* Feature chips under the dial (desktop) — shared styling with the mobile
   trail's buttons. */
.loop-ring-desktop-features[b-tuta0shez1] {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: center;
    gap: 0.45rem;
    max-width: 480px;
    /* Reserved for the tallest chip set (two wrapped rows) so the dial
       holds still when the selection changes. */
    min-height: 96px;
    margin: 1.1rem auto 0;
}

.loop-ring-tab[b-tuta0shez1],
.loop-ring-feature-button[b-tuta0shez1] {
    min-height: 42px;
    padding: 0.58rem 0.95rem;
    color: var(--muted, #b7c0cc);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    background: var(--surface-soft, rgba(255, 255, 255, 0.035));
    border: 1px solid var(--line, rgba(255, 255, 255, 0.105));
    border-radius: 999px;
    cursor: pointer;
}

.loop-ring-feature-button[b-tuta0shez1] {
    color: var(--muted-soft, #929dab);
    font-size: 0.78rem;
}

.loop-ring-tab:hover[b-tuta0shez1],
.loop-ring-tab:focus-visible[b-tuta0shez1],
.loop-ring-feature-button:hover[b-tuta0shez1],
.loop-ring-feature-button:focus-visible[b-tuta0shez1] {
    color: #ffffff;
    border-color: rgba(114, 217, 154, 0.55);
}

.loop-ring-tab:focus-visible[b-tuta0shez1],
.loop-ring-feature-button:focus-visible[b-tuta0shez1] {
    outline: 2px solid rgba(114, 217, 154, 0.45);
    outline-offset: 2px;
}

.loop-ring-feature-button.is-active[b-tuta0shez1] {
    color: var(--green, #72d99a);
    background: rgba(114, 217, 154, 0.08);
    border-color: rgba(114, 217, 154, 0.45);
}

.ring-core-hit[b-tuta0shez1],
.ring-bearing[b-tuta0shez1] {
    cursor: pointer;
    outline: none;
}

/* Segments remain the generous click/focus targets, but render invisibly —
   the bearing nodes carry the color now. Hover hints the sector faintly. */
.ring-seg[b-tuta0shez1] {
    fill: none;
    stroke: transparent;
    stroke-width: 56;
    transition: stroke 0.22s ease;
}

@keyframes ring-enter-b-tuta0shez1 {
    from { opacity: 0; }
}

.ring-bearing:hover .ring-seg[b-tuta0shez1] {
    stroke: rgba(255, 255, 255, 0.045);
}

.ring-bearing:focus-visible .ring-seg[b-tuta0shez1] {
    stroke: rgba(242, 189, 99, 0.22);
}

.ring-bearing:focus-visible .ring-node[b-tuta0shez1] {
    stroke: #ffffff;
    stroke-width: 3px;
    transform: scale(1.3);
}

.ring-core[b-tuta0shez1] {
    fill: url(#ring-core-fill);
    stroke: var(--line, rgba(255, 255, 255, 0.105));
    stroke-width: 1;
    transition: fill 0.2s ease, stroke 0.2s ease, filter 0.28s ease;
}

.ring-core-hit:hover .ring-core[b-tuta0shez1],
.ring-core-hit:focus-visible .ring-core[b-tuta0shez1],
.ring-core-hit.is-active .ring-core[b-tuta0shez1] {
    filter: drop-shadow(0 0 22px rgba(114, 217, 154, 0.25));
}

.ring-core-hit:hover .ring-core[b-tuta0shez1],
.ring-core-hit:focus-visible .ring-core[b-tuta0shez1],
.ring-core-hit.is-active .ring-core[b-tuta0shez1] {
    fill: #243444;
    stroke: var(--green, #72d99a);
}

.ring-core-hit:focus[b-tuta0shez1] {
    outline: none;
}

/* The needle pivots at the dial's exact center — damped, instrument-like.
   North half amber (it points where the path travels), tail slate. */
.ring-needle[b-tuta0shez1] {
    transform-box: view-box;
    transform-origin: 210px 210px;
    transition: transform 0.7s cubic-bezier(0.34, 1.3, 0.4, 1);
    pointer-events: none;
}

.ring-needle-north[b-tuta0shez1] {
    fill: var(--amber, #f2bd63);
    filter: drop-shadow(0 0 6px rgba(242, 189, 99, 0.4));
}

.ring-needle-south[b-tuta0shez1] {
    fill: #4a5a6e;
}

.ring-pivot[b-tuta0shez1] {
    fill: #141e2a;
    stroke: rgba(242, 189, 99, 0.65);
    stroke-width: 1.5;
    pointer-events: none;
}

/* Engraved dial marks; the five majors carry their bearing's color. */
.ring-rose-tick[b-tuta0shez1] {
    stroke: rgba(255, 255, 255, 0.07);
    stroke-width: 1;
    pointer-events: none;
}

.ring-rose-major[b-tuta0shez1] {
    stroke-width: 1.5;
    pointer-events: none;
}

.ring-rose-major.ring-g0[b-tuta0shez1] { stroke: rgba(101, 185, 255, 0.42); }
.ring-rose-major.ring-g1[b-tuta0shez1] { stroke: rgba(114, 217, 154, 0.42); }
.ring-rose-major.ring-g2[b-tuta0shez1] { stroke: rgba(178, 142, 242, 0.42); }
.ring-rose-major.ring-g3[b-tuta0shez1] { stroke: rgba(255, 176, 66, 0.42); }
.ring-rose-major.ring-g4[b-tuta0shez1] { stroke: rgba(95, 212, 196, 0.42); }

.loop-ring-stage[b-tuta0shez1]  .ring-core-title {
    fill: var(--text, #f7f9fb);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.loop-ring-stage[b-tuta0shez1]  .ring-core-sub {
    fill: var(--muted-soft, #929dab);
    font-size: 10.5px;
    letter-spacing: 0.04em;
}

.loop-ring-stage[b-tuta0shez1]  .ring-seg-label {
    fill: var(--muted, #b7c0cc);
    font-size: 15px;
    font-weight: 600;
    pointer-events: auto;
    transition: fill 0.22s ease;
}

.loop-ring-stage[b-tuta0shez1]  .ring-seg-label.is-active {
    fill: #ffffff;
}

.ring-bearing:focus-visible .ring-seg-label[b-tuta0shez1] {
    fill: #ffffff;
    paint-order: stroke;
    stroke: rgba(9, 14, 22, 0.92);
    stroke-width: 3px;
}

/* Category identity now lives in the bearing nodes and compass points:
   Plan blue, Do green, Reflect violet, Review amber, Rewards teal.
   The chosen bearing lights and grows; hovering its sector previews it. */
.ring-node.ring-g0[b-tuta0shez1] { fill: rgba(101, 185, 255, 0.55); }
.ring-node.ring-g1[b-tuta0shez1] { fill: rgba(114, 217, 154, 0.55); }
.ring-node.ring-g2[b-tuta0shez1] { fill: rgba(178, 142, 242, 0.55); }
.ring-node.ring-g3[b-tuta0shez1] { fill: rgba(255, 176, 66, 0.55); }
.ring-node.ring-g4[b-tuta0shez1] { fill: rgba(95, 212, 196, 0.55); }

.ring-node.is-active[b-tuta0shez1] { transform: scale(1.25); }
.ring-node.is-active.ring-g0[b-tuta0shez1] { fill: #65b9ff; filter: drop-shadow(0 0 12px rgba(101, 185, 255, 0.65)); }
.ring-node.is-active.ring-g1[b-tuta0shez1] { fill: #72d99a; filter: drop-shadow(0 0 12px rgba(114, 217, 154, 0.65)); }
.ring-node.is-active.ring-g2[b-tuta0shez1] { fill: #b28ef2; filter: drop-shadow(0 0 12px rgba(178, 142, 242, 0.65)); }
.ring-node.is-active.ring-g3[b-tuta0shez1] { fill: #f2b84b; filter: drop-shadow(0 0 12px rgba(255, 176, 66, 0.65)); }
.ring-node.is-active.ring-g4[b-tuta0shez1] { fill: #5fd4c4; filter: drop-shadow(0 0 12px rgba(95, 212, 196, 0.65)); }

/* Hovering or focusing any visible part previews the same bearing node. */
.ring-bearing.ring-g0:hover .ring-node[b-tuta0shez1],
.ring-bearing.ring-g0:focus-visible .ring-node[b-tuta0shez1] { fill: #65b9ff; }
.ring-bearing.ring-g1:hover .ring-node[b-tuta0shez1],
.ring-bearing.ring-g1:focus-visible .ring-node[b-tuta0shez1] { fill: #72d99a; }
.ring-bearing.ring-g2:hover .ring-node[b-tuta0shez1],
.ring-bearing.ring-g2:focus-visible .ring-node[b-tuta0shez1] { fill: #b28ef2; }
.ring-bearing.ring-g3:hover .ring-node[b-tuta0shez1],
.ring-bearing.ring-g3:focus-visible .ring-node[b-tuta0shez1] { fill: #f2b84b; }
.ring-bearing.ring-g4:hover .ring-node[b-tuta0shez1],
.ring-bearing.ring-g4:focus-visible .ring-node[b-tuta0shez1] { fill: #5fd4c4; }

/* Film-capture label boost (?film=1): downscaled video needs brighter
   labels than the full-size page. (The old ?tour=1 segment-emphasis rules
   are gone — segments are invisible hit areas in the compass expression;
   film v4 captures the compass as-is.) */
.loop-ring-filmmode[b-tuta0shez1]  .ring-seg-label {
    fill: #e8edf4;
    paint-order: stroke;
    stroke: rgba(9, 14, 22, 0.85);
    stroke-width: 2.8px;
}


/* On compact layouts the wheel is hidden; the preview card carries the active
   group's identity tint so the color system reaches the phone. */
@media (max-width: 959px) {
    .loop-ring-card.ring-g0[b-tuta0shez1] { border-left: 3px solid #65b9ff; }
    .loop-ring-card.ring-g1[b-tuta0shez1] { border-left: 3px solid #72d99a; }
    .loop-ring-card.ring-g2[b-tuta0shez1] { border-left: 3px solid #b28ef2; }
    .loop-ring-card.ring-g3[b-tuta0shez1] { border-left: 3px solid #f2b84b; }
    .loop-ring-card.ring-g4[b-tuta0shez1] { border-left: 3px solid #5fd4c4; }
}

.loop-ring-mobile-controls[b-tuta0shez1] {
    display: none;
}

.loop-ring-card[b-tuta0shez1] {
    display: block;
    width: 100%;
    padding: 0.9rem 1rem 0.75rem;
    color: inherit;
    font: inherit;
    text-align: left;
    background: var(--surface, #202b39);
    border: 1px solid var(--line, rgba(255, 255, 255, 0.105));
    border-radius: 14px;
    cursor: zoom-in;
    transition: border-color 0.2s ease;
}

.loop-ring-card:hover[b-tuta0shez1],
.loop-ring-card:focus-visible[b-tuta0shez1] {
    border-color: var(--green, #72d99a);
}

.loop-ring-card:focus-visible[b-tuta0shez1] {
    outline: 3px solid rgba(114, 217, 154, 0.3);
    outline-offset: 4px;
}

.loop-ring-card-head[b-tuta0shez1] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.loop-ring-chip[b-tuta0shez1] {
    padding: 0.15rem 0.55rem;
    color: var(--green, #72d99a);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid rgba(114, 217, 154, 0.35);
    border-radius: 999px;
}

.loop-ring-card-title[b-tuta0shez1] {
    color: var(--text, #f7f9fb);
    font-size: 1rem;
    font-weight: 600;
}

.loop-ring-card-blurb[b-tuta0shez1] {
    display: block;
    min-height: 2.6em;
    margin: 0.35rem 0 0.7rem;
    color: var(--muted, #b7c0cc);
    font-size: 0.88rem;
}

.loop-ring-picture[b-tuta0shez1] {
    /* Block, not grid: a percentage img height inside an auto-sized grid row
       resolves as auto, so taller-than-16:10 screenshots overflowed the fixed
       aspect box and were cropped at the bottom instead of letterboxed. */
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #101822;
    border: 1px solid var(--line-soft, rgba(255, 255, 255, 0.065));
    border-radius: 8px;
}

.loop-ring-picture img[b-tuta0shez1] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.loop-ring-card-expand[b-tuta0shez1] {
    display: block;
    margin-top: 0.55rem;
    color: var(--muted-soft, #929dab);
    font-size: 0.75rem;
    text-align: right;
}

/* (The former ≤1399px label-compaction block is gone: the dial no longer
   renders feature labels or counts at any width — chips carry the words.) */

@media (max-width: 959px) {
    .loop-ring[b-tuta0shez1] {
        width: min(760px, 94vw);
        margin-top: 2.5rem;
    }

    .loop-ring-columns[b-tuta0shez1] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .loop-ring-stage[b-tuta0shez1] {
        display: none;
    }

    .loop-ring-mobile-controls[b-tuta0shez1] {
        display: grid;
        gap: 0.75rem;
    }

    /* PROTOTYPE: the compass unfolds into a vertical trail on mobile —
       bearing markers on an amber line, not generic filter pills. */
    .loop-ring-group-buttons[b-tuta0shez1] {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.4rem;
        padding-left: 26px;
    }

    .loop-ring-group-buttons[b-tuta0shez1]::before {
        content: "";
        position: absolute;
        left: 10px;
        top: 10px;
        bottom: 10px;
        width: 2px;
        border-radius: 2px;
        background: linear-gradient(180deg,
            rgba(242, 189, 99, 0.0),
            rgba(242, 189, 99, 0.5) 18%,
            rgba(242, 189, 99, 0.5) 82%,
            rgba(242, 189, 99, 0.0));
    }

    .loop-ring-tab[b-tuta0shez1] {
        position: relative;
        text-align: left;
    }

    .loop-ring-tab[b-tuta0shez1]::before {
        content: "";
        position: absolute;
        left: -20px;
        top: 50%;
        translate: 0 -50%;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: var(--green, #72d99a);
    }

    .loop-ring-tab.ring-g0[b-tuta0shez1]::before { background: #65b9ff; }
    .loop-ring-tab.ring-g1[b-tuta0shez1]::before { background: #72d99a; }
    .loop-ring-tab.ring-g2[b-tuta0shez1]::before { background: #b28ef2; }
    .loop-ring-tab.ring-g3[b-tuta0shez1]::before { background: #f2b84b; }
    .loop-ring-tab.ring-g4[b-tuta0shez1]::before { background: #5fd4c4; }

    .loop-ring-feature-buttons[b-tuta0shez1] {
        display: flex;
        flex-wrap: wrap;
        gap: 0.45rem;
    }

    .loop-ring-tab[b-tuta0shez1],
    .loop-ring-feature-button[b-tuta0shez1] {
        /* Comfortable touch targets: ~44px tall on coarse pointers. */
        min-height: 42px;
        padding: 0.58rem 0.95rem;
        color: var(--muted, #b7c0cc);
        font: inherit;
        font-size: 0.82rem;
        font-weight: 600;
        background: var(--surface-soft, rgba(255, 255, 255, 0.035));
        border: 1px solid var(--line, rgba(255, 255, 255, 0.105));
        border-radius: 999px;
        cursor: pointer;
    }

    .loop-ring-feature-button[b-tuta0shez1] {
        color: var(--muted-soft, #929dab);
        font-size: 0.78rem;
    }

    .loop-ring-tab:hover[b-tuta0shez1],
    .loop-ring-tab:focus-visible[b-tuta0shez1],
    .loop-ring-feature-button:hover[b-tuta0shez1],
    .loop-ring-feature-button:focus-visible[b-tuta0shez1] {
        color: #ffffff;
        border-color: rgba(114, 217, 154, 0.55);
    }

    .loop-ring-tab:focus-visible[b-tuta0shez1],
    .loop-ring-feature-button:focus-visible[b-tuta0shez1] {
        outline: 2px solid rgba(114, 217, 154, 0.45);
        outline-offset: 2px;
    }

    .loop-ring-tab.is-active[b-tuta0shez1] {
        color: #ffffff;
        background: var(--green-fill, #287d4e);
        border-color: var(--green, #72d99a);
    }

    .loop-ring-tab.is-active.ring-g0[b-tuta0shez1] { background: #2b5d8f; border-color: #65b9ff; }
    .loop-ring-tab.is-active.ring-g2[b-tuta0shez1] { background: #5c4390; border-color: #b28ef2; }
    .loop-ring-tab.is-active.ring-g3[b-tuta0shez1] { background: #a06a22; border-color: #f2b84b; }
    .loop-ring-tab.is-active.ring-g4[b-tuta0shez1] { background: #26685f; border-color: #5fd4c4; }

    .loop-ring-feature-button.is-active[b-tuta0shez1] {
        color: var(--green, #72d99a);
        background: rgba(114, 217, 154, 0.08);
        border-color: rgba(114, 217, 154, 0.45);
    }
}

@media (max-width: 480px) {
    .loop-ring-card[b-tuta0shez1] {
        padding: 0.75rem;
    }

    .loop-ring-card-blurb[b-tuta0shez1] {
        min-height: 0;
    }

    .loop-ring-tab[b-tuta0shez1],
    .loop-ring-feature-button[b-tuta0shez1] {
        padding: 0.38rem 0.7rem;
    }
}

/* Film-capture determinism: entrance and travel must not race the pipeline. */
.loop-ring-filmmode .ring-node[b-tuta0shez1],
.loop-ring-tourmode .ring-node[b-tuta0shez1],
.loop-ring-filmmode .ring-path[b-tuta0shez1],
.loop-ring-tourmode .ring-path[b-tuta0shez1] {
    animation: none;
    transition: none;
}

@media (prefers-reduced-motion: reduce) {
    .ring-seg[b-tuta0shez1],
    .ring-core[b-tuta0shez1],
    .ring-node[b-tuta0shez1],
    .ring-path[b-tuta0shez1],
    .ring-needle[b-tuta0shez1],
    .loop-ring-stage[b-tuta0shez1]  .ring-seg-label,
    .loop-ring-card[b-tuta0shez1] {
        transition: none;
        animation: none;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-vaibe7lx4k] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #1a222d;
    color: #ffffff;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

.skip-link[b-vaibe7lx4k] {
    position: fixed;
    top: 10px;
    left: 12px;
    z-index: 10000;
    padding: 10px 14px;
    color: #ffffff;
    background: #287d4e;
    border: 2px solid #72d99a;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    translate: 0 -160%;
    transition: translate 0.15s ease;
}

.skip-link:focus[b-vaibe7lx4k] {
    translate: 0 0;
    outline: none;
}

[b-vaibe7lx4k] main {
    flex: 1;
}

/* ---------- Top nav ---------- */

.site-nav[b-vaibe7lx4k] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(30, 39, 52, 0.85);
    backdrop-filter: saturate(140%) blur(10px);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.nav-inner[b-vaibe7lx4k] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 14px 28px;
    display: flex;
    align-items: center;
    gap: 32px;
}

.nav-brand[b-vaibe7lx4k] {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #fff;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -0.01em;
}

.nav-brand img[b-vaibe7lx4k] {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.nav-links[b-vaibe7lx4k] {
    display: flex;
    gap: 28px;
    margin-left: auto;
}

.nav-links a[b-vaibe7lx4k] {
    position: relative;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    color: #c2c5cc;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    padding: 6px 0;
    transition: color 0.15s ease;
}

.nav-links a:hover[b-vaibe7lx4k] {
    color: #fff;
}

.nav-links a[b-vaibe7lx4k]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: #72d99a;
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.nav-links a.is-active[b-vaibe7lx4k] {
    color: #fff;
}

.nav-links a.is-active[b-vaibe7lx4k]::after {
    transform: scaleX(1);
}

.nav-cta[b-vaibe7lx4k] {
    margin-left: 8px;
}

.brand-picture[b-vaibe7lx4k] {
    display: inline-flex;
    flex: 0 0 auto;
}

.nav-cta[b-vaibe7lx4k]  .mud-button-root {
    min-height: 44px;
}

/* ---------- Mobile menu (native <details> disclosure — works without JS) ---------- */

.nav-mobile[b-vaibe7lx4k] {
    display: none;
    position: relative;
    margin-left: 4px;
}

.nav-toggle[b-vaibe7lx4k] {
    list-style: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.nav-toggle[b-vaibe7lx4k]::-webkit-details-marker { display: none; }
.nav-toggle[b-vaibe7lx4k]::marker { content: ""; }
.nav-toggle:hover[b-vaibe7lx4k] { background: rgba(255,255,255,0.08); }
.nav-toggle:focus-visible[b-vaibe7lx4k] { outline: 3px solid rgba(114, 217, 154, 0.65); outline-offset: 2px; }

.nav-toggle-icon[b-vaibe7lx4k],
.nav-toggle-icon[b-vaibe7lx4k]::before,
.nav-toggle-icon[b-vaibe7lx4k]::after {
    display: block;
    width: 18px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease, background 0.2s ease;
}

.nav-toggle-icon[b-vaibe7lx4k] { position: relative; }

.nav-toggle-icon[b-vaibe7lx4k]::before,
.nav-toggle-icon[b-vaibe7lx4k]::after {
    content: "";
    position: absolute;
    left: 0;
}

.nav-toggle-icon[b-vaibe7lx4k]::before { top: -6px; }
.nav-toggle-icon[b-vaibe7lx4k]::after { top: 6px; }

.nav-mobile[open] .nav-toggle-icon[b-vaibe7lx4k] { background: transparent; }
.nav-mobile[open] .nav-toggle-icon[b-vaibe7lx4k]::before { transform: translateY(6px) rotate(45deg); }
.nav-mobile[open] .nav-toggle-icon[b-vaibe7lx4k]::after { transform: translateY(-6px) rotate(-45deg); }

.nav-mobile-menu[b-vaibe7lx4k] {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    min-width: 210px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px;
    background: rgba(30, 39, 52, 0.98);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(0,0,0,0.45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 200;
}

.nav-mobile:not([open]) .nav-mobile-menu[b-vaibe7lx4k] {
    display: none;
}

.nav-mobile-menu a[b-vaibe7lx4k] {
    color: #c2c5cc;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    padding: 11px 12px;
    border-radius: 8px;
    transition: background 0.15s ease, color 0.15s ease;
}

.nav-mobile-menu a:hover[b-vaibe7lx4k] { background: rgba(255,255,255,0.06); color: #fff; }

.nav-mobile-menu a:focus-visible[b-vaibe7lx4k] {
    color: #fff;
    background: rgba(255,255,255,0.08);
    outline: 3px solid rgba(114, 217, 154, 0.65);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .nav-toggle-icon[b-vaibe7lx4k],
    .nav-toggle-icon[b-vaibe7lx4k]::before,
    .nav-toggle-icon[b-vaibe7lx4k]::after { transition: none; }
}

@media (max-width: 820px) {
    .nav-links[b-vaibe7lx4k] { display: none; }
    .nav-inner[b-vaibe7lx4k] { gap: 16px; padding: 12px 18px; }
    .nav-cta[b-vaibe7lx4k] { margin-left: auto; }
    .nav-mobile[b-vaibe7lx4k] { display: block; }
}

@media (max-width: 420px) {
    .nav-cta[b-vaibe7lx4k] { display: none; }
    .nav-mobile[b-vaibe7lx4k] { margin-left: auto; }
}

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

.site-footer[b-vaibe7lx4k] {
    margin-top: 80px;
    border-top: 1px solid rgba(255,255,255,0.06);
    background: #161d27;
}

.footer-inner[b-vaibe7lx4k] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 56px 28px 32px;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 48px;
}

.footer-brand[b-vaibe7lx4k] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.footer-brand img[b-vaibe7lx4k] {
    width: 42px;
    height: 42px;
    object-fit: contain;
}

.footer-title[b-vaibe7lx4k] {
    font-weight: 700;
    font-size: 18px;
    color: #fff;
}

.footer-tag[b-vaibe7lx4k] {
    color: #8b95a3;
    font-size: 13px;
    max-width: 260px;
    margin-top: 4px;
    line-height: 1.5;
}

.footer-cols[b-vaibe7lx4k] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.footer-col[b-vaibe7lx4k] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-h[b-vaibe7lx4k] {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #8b95a3;
    margin-bottom: 6px;
}

.footer-col a[b-vaibe7lx4k] {
    color: #c2c5cc;
    text-decoration: none;
    font-size: 14px;
    padding: 3px 0;
}

.footer-col a:hover[b-vaibe7lx4k] {
    color: #fff;
}

.footer-bottom[b-vaibe7lx4k] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 18px 28px 32px;
    display: flex;
    justify-content: space-between;
    color: #8b95a3;
    font-size: 12px;
    border-top: 1px solid rgba(255,255,255,0.04);
}

@media (max-width: 760px) {
    .footer-inner[b-vaibe7lx4k] { grid-template-columns: 1fr; gap: 32px; padding: 40px 18px 24px; }
    .footer-cols[b-vaibe7lx4k] { grid-template-columns: repeat(2, 1fr); gap: 24px; }
    .footer-bottom[b-vaibe7lx4k] { flex-direction: column; gap: 6px; padding: 16px 18px 28px; }
}

/* ---------- Error UI ---------- */

#blazor-error-ui[b-vaibe7lx4k] {
    color-scheme: light only;
    color: #242424;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss[b-vaibe7lx4k] {
    width: 36px;
    height: 36px;
    padding: 0;
    color: #2d2d2d;
    background: transparent;
    border: 0;
    font: inherit;
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.25rem;
}

#blazor-error-ui a[b-vaibe7lx4k] { color: #145a35; }

#blazor-error-ui .dismiss:focus-visible[b-vaibe7lx4k] {
    outline: 2px solid #287d4e;
    outline-offset: 1px;
}

@media (prefers-reduced-motion: reduce) {
    .skip-link[b-vaibe7lx4k] { transition: none; }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-e52cmxbh2n],
.components-reconnect-repeated-attempt-visible[b-e52cmxbh2n],
.components-reconnect-failed-visible[b-e52cmxbh2n],
.components-pause-visible[b-e52cmxbh2n],
.components-resume-failed-visible[b-e52cmxbh2n],
.components-rejoining-animation[b-e52cmxbh2n] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-e52cmxbh2n],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-e52cmxbh2n],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-e52cmxbh2n],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-e52cmxbh2n],
#components-reconnect-modal.components-reconnect-retrying[b-e52cmxbh2n],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-e52cmxbh2n],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-e52cmxbh2n],
#components-reconnect-modal.components-reconnect-failed[b-e52cmxbh2n],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-e52cmxbh2n] {
    display: block;
}


/* Explicit dark-site styling; keep selectors flat — the CSS-isolation
   bundler mishandles native nesting, which silently dropped the old
   background rule and left UA-black text on a dark fallback. */
#components-reconnect-modal[b-e52cmxbh2n] {
    /* !important: MudBlazor.min.css targets this id with an !important
       palette background; the scoped attribute selector plus !important
       outranks it deterministically. */
    background-color: #202b39 !important;
    color: #e2e8f0;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 1px solid rgba(101, 185, 255, 0.22);
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-e52cmxbh2n 0.5s both;
}

#components-reconnect-modal[open][b-e52cmxbh2n] {
    animation: components-reconnect-modal-slideUp-b-e52cmxbh2n 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-e52cmxbh2n 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

#components-reconnect-modal[b-e52cmxbh2n]::backdrop {
    background-color: rgba(4, 9, 16, 0.55);
    animation: components-reconnect-modal-fadeInOpacity-b-e52cmxbh2n 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-e52cmxbh2n {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-e52cmxbh2n {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-e52cmxbh2n {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-e52cmxbh2n] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-e52cmxbh2n] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-e52cmxbh2n] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-e52cmxbh2n] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-e52cmxbh2n] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-e52cmxbh2n] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-e52cmxbh2n] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-e52cmxbh2n 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-e52cmxbh2n] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-e52cmxbh2n {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Beta.razor.rz.scp.css */
.beta-page[b-p9d687fgpu] {
    min-height: 70vh;
    display: grid;
    place-items: center;
    padding: 96px 20px;
    background:
        radial-gradient(circle at 25% 15%, rgba(66, 211, 146, .10), transparent 36%),
        var(--rk-bg, #111a24);
}

.beta-card[b-p9d687fgpu] {
    width: min(620px, 100%);
    padding: clamp(28px, 6vw, 52px);
    border: 1px solid rgba(114, 217, 154, .22);
    border-radius: 24px;
    background: rgba(22, 32, 43, .96);
    box-shadow: 0 24px 72px rgba(0, 0, 0, .24);
}

.beta-kicker[b-p9d687fgpu] {
    color: #72d99a;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.beta-card h1[b-p9d687fgpu] {
    margin: 10px 0 16px;
    color: #f4f7fa;
    font-size: clamp(36px, 7vw, 54px);
    line-height: 1.02;
    letter-spacing: -.04em;
}

.beta-lede[b-p9d687fgpu],
.beta-footnote[b-p9d687fgpu],
.beta-meta[b-p9d687fgpu] {
    color: #aeb9c6;
    line-height: 1.65;
}

.beta-download-form[b-p9d687fgpu] {
    display: grid;
    gap: 10px;
    margin: 28px 0 18px;
}

.beta-download-form label[b-p9d687fgpu] {
    color: #dfe6ed;
    font-weight: 700;
}

.beta-download-form input[b-p9d687fgpu] {
    min-height: 48px;
    padding: 0 14px;
    color: #f4f7fa;
    border: 1px solid #3c4b5b;
    border-radius: 10px;
    background: #101923;
}

.beta-consent[b-p9d687fgpu] {
    display: grid;
    gap: 12px;
    margin: 12px 0 0;
    padding: 18px;
    border: 1px solid rgba(114, 217, 154, .2);
    border-radius: 12px;
}

.beta-consent legend[b-p9d687fgpu] {
    padding: 0 6px;
    color: #dfe6ed;
    font-weight: 800;
}

.beta-check[b-p9d687fgpu] {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 10px;
    align-items: start;
    color: #c8d2dc;
    font-weight: 500 !important;
    line-height: 1.5;
}

.beta-check input[b-p9d687fgpu] {
    width: 18px;
    min-height: 18px;
    margin-top: 3px;
    padding: 0;
    accent-color: #72d99a;
}

.beta-consent-note[b-p9d687fgpu] {
    margin: 2px 0 0;
    color: #98a6b5;
    font-size: 13px;
    line-height: 1.55;
}

.beta-license-request[b-p9d687fgpu] {
    display: grid;
    gap: 10px;
    margin-top: 10px;
    padding: 18px;
    border: 1px solid rgba(101, 185, 255, .28);
    border-radius: 12px;
    background: rgba(101, 185, 255, .06);
}

.beta-license-request .beta-button[b-p9d687fgpu] {
    justify-self: start;
}

.beta-license-status[b-p9d687fgpu] {
    margin: 2px 0 0;
    color: #b9d9f5;
    font-size: 14px;
    line-height: 1.5;
}

.beta-download-form input:focus-visible[b-p9d687fgpu],
.beta-button:focus-visible[b-p9d687fgpu],
.beta-card a:focus-visible[b-p9d687fgpu] {
    outline: 3px solid #72d99a;
    outline-offset: 3px;
}

.beta-download-actions[b-p9d687fgpu] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
}

.beta-button[b-p9d687fgpu] {
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: 10px;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    text-decoration: none;
}

.beta-button-primary[b-p9d687fgpu] {
    color: #08140e;
    background: #72d99a;
}

.beta-button-secondary[b-p9d687fgpu] {
    color: #eaf0f5;
    border-color: #465667;
    background: transparent;
}

.beta-meta[b-p9d687fgpu] {
    font-size: 14px;
}

.beta-card a[b-p9d687fgpu] {
    color: #88e3ad;
}

.beta-footnote[b-p9d687fgpu] {
    margin: 28px 0 0;
    font-size: 14px;
}

@media (max-width: 520px) {
    .beta-page[b-p9d687fgpu] {
        padding: 54px 14px;
    }

    .beta-download-actions[b-p9d687fgpu],
    .beta-license-request .beta-button[b-p9d687fgpu],
    .beta-button[b-p9d687fgpu] {
        width: 100%;
    }
}
/* /Components/Pages/Disclaimer.razor.rz.scp.css */
.legal-page[b-jdzp959l1z] {
    padding: 84px 28px;
}

.legal-card[b-jdzp959l1z] {
    max-width: 900px;
    margin: 0 auto;
    padding: 44px 48px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 18px;
    background:
        radial-gradient(circle at 0% 0%, rgba(51, 147, 96, 0.13), transparent 42%),
        linear-gradient(180deg, rgba(39,49,63,0.72), rgba(30,39,52,0.42));
    box-shadow: 0 24px 70px rgba(0,0,0,0.34);
}

.legal-kicker[b-jdzp959l1z] {
    margin-bottom: 12px;
    color: #8ddb8c;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.legal-card h1[b-jdzp959l1z] {
    margin: 0 0 18px;
    color: #fff;
    font-size: 44px;
    line-height: 1.08;
}

.legal-lede[b-jdzp959l1z],
.legal-section p[b-jdzp959l1z],
.legal-section li[b-jdzp959l1z],
.legal-updated[b-jdzp959l1z] {
    color: #c2c5cc;
    font-size: 16px;
    line-height: 1.66;
}

.legal-lede[b-jdzp959l1z] {
    margin-bottom: 28px;
}

.legal-warning[b-jdzp959l1z] {
    margin: 0 0 28px;
    padding: 16px 18px;
    color: #f3d8a7;
    border: 1px solid rgba(232, 176, 77, .35);
    border-radius: 12px;
    background: rgba(117, 76, 16, .18);
    line-height: 1.55;
}

.legal-section[b-jdzp959l1z] {
    padding: 24px 0;
    border-top: 1px solid rgba(255,255,255,0.07);
}

.legal-section h2[b-jdzp959l1z] {
    margin: 0 0 10px;
    color: #fff;
    font-size: 22px;
    line-height: 1.25;
}

.legal-section p[b-jdzp959l1z] {
    margin: 0;
}

.legal-section a[b-jdzp959l1z],
.legal-card a[b-jdzp959l1z] {
    color: #8ddb8c;
}

.legal-updated[b-jdzp959l1z] {
    margin: 8px 0 0;
    color: #8b95a3;
    font-size: 13px;
}

@media (max-width: 640px) {
    .legal-page[b-jdzp959l1z] {
        padding: 56px 18px;
    }

    .legal-card[b-jdzp959l1z] {
        padding: 32px 24px;
        border-radius: 14px;
    }

    .legal-card h1[b-jdzp959l1z] {
        font-size: 34px;
    }
}
/* /Components/Pages/HealthData.razor.rz.scp.css */
.legal-page[b-vzxayvy4md] {
    padding: 84px 28px;
}

.legal-card[b-vzxayvy4md] {
    max-width: 900px;
    margin: 0 auto;
    padding: 44px 48px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 18px;
    background:
        radial-gradient(circle at 0% 0%, rgba(51, 147, 96, 0.13), transparent 42%),
        linear-gradient(180deg, rgba(39,49,63,0.72), rgba(30,39,52,0.42));
    box-shadow: 0 24px 70px rgba(0,0,0,0.34);
}

.legal-kicker[b-vzxayvy4md] {
    margin-bottom: 12px;
    color: #8ddb8c;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.legal-card h1[b-vzxayvy4md] {
    margin: 0 0 18px;
    color: #fff;
    font-size: 44px;
    line-height: 1.08;
}

.legal-lede[b-vzxayvy4md],
.legal-section p[b-vzxayvy4md],
.legal-section li[b-vzxayvy4md],
.legal-updated[b-vzxayvy4md] {
    color: #c2c5cc;
    font-size: 16px;
    line-height: 1.66;
}

.legal-lede[b-vzxayvy4md] {
    margin-bottom: 28px;
}

.legal-warning[b-vzxayvy4md] {
    margin: 0 0 28px;
    padding: 16px 18px;
    color: #f3d8a7;
    border: 1px solid rgba(232, 176, 77, .35);
    border-radius: 12px;
    background: rgba(117, 76, 16, .18);
    line-height: 1.55;
}

.legal-section[b-vzxayvy4md] {
    padding: 24px 0;
    border-top: 1px solid rgba(255,255,255,0.07);
}

.legal-section h2[b-vzxayvy4md] {
    margin: 0 0 10px;
    color: #fff;
    font-size: 22px;
    line-height: 1.25;
}

.legal-section p[b-vzxayvy4md] {
    margin: 0 0 12px;
}

.legal-section p:last-child[b-vzxayvy4md] {
    margin-bottom: 0;
}

.legal-section ul[b-vzxayvy4md] {
    margin: 10px 0 0;
    padding-left: 22px;
}

.legal-section li + li[b-vzxayvy4md] {
    margin-top: 8px;
}

.legal-section a[b-vzxayvy4md],
.legal-card a[b-vzxayvy4md] {
    color: #8ddb8c;
}

.legal-updated[b-vzxayvy4md] {
    margin: 8px 0 0;
    color: #8b95a3;
    font-size: 13px;
}

@media (max-width: 640px) {
    .legal-page[b-vzxayvy4md] {
        padding: 56px 18px;
    }

    .legal-card[b-vzxayvy4md] {
        padding: 32px 24px;
        border-radius: 14px;
    }

    .legal-card h1[b-vzxayvy4md] {
        font-size: 34px;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* Runeka landing page
   The visual system stays deliberately restrained: green is trust/action,
   amber is closure, and blue/pink/violet identify the three daily signals. */

.hero[b-f7fk5hscpz],
.product-film[b-f7fk5hscpz],
.ritual[b-f7fk5hscpz],
.depth[b-f7fk5hscpz],
.founder-note[b-f7fk5hscpz],
.pricing[b-f7fk5hscpz],
.faq[b-f7fk5hscpz],
.download[b-f7fk5hscpz] {
    --page-bg: #1a222d;
    --page-bg-deep: #131b25;
    --surface: #202b39;
    --surface-raised: #263343;
    --surface-soft: rgba(255, 255, 255, 0.035);
    --line: rgba(255, 255, 255, 0.105);
    --line-soft: rgba(255, 255, 255, 0.065);
    --text: #f7f9fb;
    --muted: #b7c0cc;
    --muted-soft: #929dab;
    --green: #72d99a;
    --green-fill: #287d4e;
    --green-deep: #173f30;
    --amber: #f2bd63;
    --blue: #65b9ff;
    --pink: #ff8fa3;
    --violet: #b591ff;
    /* Editorial display voice: Newsreader (OFL), self-hosted via
       wwwroot/fonts/newsreader.css; Inter remains the product-facts face. */
    --font-display: 'Newsreader', Georgia, serif;
    color: var(--text);
}

.container[b-f7fk5hscpz] {
    width: min(1180px, calc(100% - 48px));
    margin: 0 auto;
}

.section-head[b-f7fk5hscpz] {
    max-width: 780px;
    margin: 0 auto 52px;
    text-align: center;
}

.section-head-left[b-f7fk5hscpz] {
    max-width: 680px;
    margin-left: 0;
    text-align: left;
}

.kicker[b-f7fk5hscpz] {
    display: block;
    margin-bottom: 12px;
    color: var(--green);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.15em;
    line-height: 1.4;
    text-transform: uppercase;
}

/* PROTOTYPE: the thread as a repeated mark — a small arc under each section
   kicker, echoing the hero thread and the film's loose-ends motif. Inherits
   the kicker's color, so it turns amber wherever the closing arc does. */
.section-head .kicker[b-f7fk5hscpz]::after {
    content: "";
    display: block;
    width: 44px;
    height: 9px;
    margin: 10px auto 0;
    border-bottom: 2px solid currentColor;
    border-radius: 50% / 100%;
    opacity: 0.55;
}

.section-head-left .kicker[b-f7fk5hscpz]::after {
    margin-left: 0;
}

/* The mark draws in with its section's reveal — entrance-only, no loop.
   Rides the same IntersectionObserver as [data-reveal]; with JS blocked or
   reduced motion the mark is simply present at full width. */
.js-reveal .section-head .kicker[b-f7fk5hscpz]::after {
    width: 0;
    transition: width 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.3s;
}

.js-reveal .section-head.is-revealed .kicker[b-f7fk5hscpz]::after {
    width: 44px;
}

.section-head h2[b-f7fk5hscpz] {
    max-width: 740px;
    margin: 0 auto;
    color: var(--text);
    font-family: var(--font-display);
    font-size: clamp(34px, 4.2vw, 54px);
    font-weight: 600;
    line-height: 1.06;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

.section-head-left h2[b-f7fk5hscpz] {
    margin-left: 0;
}

.section-head > p[b-f7fk5hscpz] {
    max-width: 700px;
    margin: 22px auto 0;
    color: var(--muted);
    font-size: 18px;
    line-height: 1.65;
    text-wrap: pretty;
}

.section-head-left > p[b-f7fk5hscpz] {
    margin-left: 0;
}

.button[b-f7fk5hscpz] {
    min-height: 48px;
    padding: 0 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 1px solid transparent;
    border-radius: 12px;
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.015em;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease, color 160ms ease, translate 160ms ease, box-shadow 160ms ease;
}

.button:hover[b-f7fk5hscpz] {
    translate: 0 -1px;
}

.button:focus-visible[b-f7fk5hscpz],
.pricing-toggle button:focus-visible[b-f7fk5hscpz],
.faq summary:focus-visible[b-f7fk5hscpz],
.download-access input:focus-visible[b-f7fk5hscpz],
.beta-signup-form input:focus-visible[b-f7fk5hscpz] {
    outline: 3px solid rgba(114, 217, 154, 0.45);
    outline-offset: 3px;
}

.button-primary[b-f7fk5hscpz] {
    color: #fff;
    background: var(--green-fill);
    border-color: #369462;
    box-shadow: 0 14px 34px rgba(17, 92, 55, 0.25);
}

.button-primary:hover[b-f7fk5hscpz] {
    background: #236c45;
    border-color: #4aa875;
}

.button-outline[b-f7fk5hscpz],
.button-quiet[b-f7fk5hscpz] {
    color: var(--text);
    background: rgba(255, 255, 255, 0.025);
    border-color: rgba(255, 255, 255, 0.24);
}

.button-outline:hover[b-f7fk5hscpz],
.button-quiet:hover[b-f7fk5hscpz] {
    background: rgba(255, 255, 255, 0.075);
    border-color: rgba(255, 255, 255, 0.38);
}

.button-block[b-f7fk5hscpz] {
    width: 100%;
}

.button:disabled[b-f7fk5hscpz] {
    opacity: 0.5;
    cursor: not-allowed;
    translate: none;
}

[b-f7fk5hscpz] .button-icon {
    color: currentColor;
}

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

.hero[b-f7fk5hscpz] {
    position: relative;
    min-height: 760px;
    padding: 88px 0 110px;
    overflow: hidden;
    isolation: isolate;
    background:
        linear-gradient(128deg, rgba(34, 124, 82, 0.16) 0%, transparent 38%),
        linear-gradient(115deg, #182631 0%, #1a222d 52%, #1c2430 100%);
}

/* PROTOTYPE: owned trailhead world as hero atmosphere — dusk, one amber-lit
   cabin. Masked toward the copy column so text contrast is untouched.
   Sits at -2, beneath the grid texture (::before) and the glows (-1). */
.hero[b-f7fk5hscpz]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: url('img/proto/trailhead-dusk.jpg') right 68% / cover no-repeat;
    opacity: 0.20;
    -webkit-mask-image: radial-gradient(115% 105% at 76% 62%, #000 32%, transparent 74%);
    mask-image: radial-gradient(115% 105% at 76% 62%, #000 32%, transparent 74%);
    pointer-events: none;
}

.hero[b-f7fk5hscpz]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.28;
    background-image:
        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(to bottom, black, transparent 86%);
}

.hero-glow[b-f7fk5hscpz] {
    position: absolute;
    z-index: -1;
    filter: blur(42px);
    pointer-events: none;
}

.hero-glow-green[b-f7fk5hscpz] {
    width: 760px;
    height: 480px;
    right: -210px;
    top: -150px;
    border-radius: 38% 62% 54% 46% / 58% 42% 58% 42%;
    transform: rotate(-12deg);
    background: linear-gradient(
        138deg,
        transparent 8%,
        rgba(48, 145, 122, 0.06) 30%,
        rgba(63, 166, 105, 0.18) 56%,
        rgba(52, 132, 128, 0.07) 76%,
        transparent 94%
    );
}

.hero-glow-amber[b-f7fk5hscpz] {
    width: 520px;
    height: 240px;
    right: 8%;
    bottom: -120px;
    border-radius: 30% 70% 64% 36% / 62% 38% 62% 38%;
    transform: rotate(-7deg);
    filter: blur(52px);
    background: linear-gradient(
        110deg,
        transparent 6%,
        rgba(242, 189, 99, 0.04) 34%,
        rgba(242, 189, 99, 0.11) 58%,
        transparent 92%
    );
}

.hero-grid[b-f7fk5hscpz] {
    display: grid;
    /* PROTOTYPE: cede more width to the product — the screen is the proof. */
    grid-template-columns: minmax(0, 0.78fr) minmax(520px, 1.22fr);
    align-items: center;
    gap: 56px;
}

.hero-copy[b-f7fk5hscpz] {
    position: relative;
    z-index: 4;
}

/* Quiet status line — the green dot carries the state; no pill chrome. */
.eyebrow[b-f7fk5hscpz] {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--muted-soft);
    font-size: 11.5px;
    font-weight: 750;
    letter-spacing: 0.16em;
}

.eyebrow-dot[b-f7fk5hscpz] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 5px rgba(114, 217, 154, 0.09);
}

.hero h1[b-f7fk5hscpz] {
    max-width: 690px;
    margin: 26px 0 0;
    color: var(--text);
    font-family: var(--font-display);
    font-size: clamp(54px, 6vw, 86px);
    font-weight: 600;
    line-height: 1.0;
    letter-spacing: -0.015em;
    text-wrap: balance;
}

.hero h1 span[b-f7fk5hscpz] {
    display: block;
    color: var(--green);
    font-style: italic;
}

.hero-afterline[b-f7fk5hscpz] {
    margin: 18px 0 0;
    color: var(--amber);
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(21px, 2.1vw, 28px);
    font-weight: 500;
    letter-spacing: 0;
}

.hero-lede[b-f7fk5hscpz] {
    max-width: 620px;
    margin: 24px 0 0;
    color: #c4ccd6;
    font-size: 18px;
    line-height: 1.65;
}

.hero-actions[b-f7fk5hscpz] {
    margin-top: 32px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.hero-trust[b-f7fk5hscpz] {
    margin-top: 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    color: var(--muted-soft);
    font-size: 12px;
}

.hero-trust span[b-f7fk5hscpz] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

[b-f7fk5hscpz] .trust-icon {
    color: var(--green);
}

.hero-visual[b-f7fk5hscpz] {
    position: relative;
    min-height: 560px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-window[b-f7fk5hscpz] {
    position: relative;
    /* PROTOTYPE: ~17% larger; near-flat — the angled-screenshot tilt is the
       category cliche, and a straight screen reads as confidence. */
    width: min(760px, 100%);
    /* Window bar (38px) + picture area at the capture's 2344/1250 aspect:
       650 / (650/1.875 + 38) — keeps the full cockpit visible, no side crop. */
    aspect-ratio: 1.69;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 20px;
    background: #111923;
    box-shadow: 0 35px 90px rgba(0,0,0,0.48), 0 0 50px rgba(58, 143, 92, 0.08);
    transform: perspective(1400px) rotateY(-1.5deg) rotateX(0.75deg);
}

.window-bar[b-f7fk5hscpz] {
    height: 38px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #7f8a98;
    background: #111923;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    font-size: 10px;
}

.window-bar span[b-f7fk5hscpz] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #334050;
}

.window-bar span:first-child[b-f7fk5hscpz] { background: #bd5c5c; }
.window-bar span:nth-child(2)[b-f7fk5hscpz] { background: #c3974d; }
.window-bar span:nth-child(3)[b-f7fk5hscpz] { background: #4e9667; }
.window-bar b[b-f7fk5hscpz] { margin-left: auto; font-weight: 600; }

.shot-picture[b-f7fk5hscpz] {
    display: block;
    width: 100%;
}

.hero-window > .shot-picture[b-f7fk5hscpz] {
    height: calc(100% - 38px);
}

.hero-window > img[b-f7fk5hscpz],
.hero-window > .shot-picture > img[b-f7fk5hscpz] {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center top;
    /* PROTOTYPE: was 0.88 — stop dimming the product; the capture is honest. */
    opacity: 0.97;
}

/* PROTOTYPE: amber closure thread from the screen to the receipt. */
.hero-trail[b-f7fk5hscpz] {
    position: absolute;
    z-index: 4;
    left: 6%;
    bottom: 20px;
    width: 52%;
    height: 120px;
    pointer-events: none;
}

.hero-trail path[b-f7fk5hscpz] {
    stroke: var(--amber);
    /* User-space units throughout (no vector-effect): Chromium measures
       dashes in screen space under non-scaling-stroke, which desyncs them
       from getTotalLength(). The slight width variation from the non-uniform
       viewBox scale reads as a hand-drawn taper. */
    stroke-width: 0.75;
    stroke-linecap: round;
    opacity: 0.55;
    /* Drawn as a reward when the visitor closes the day; dash metrics are set
       from getTotalLength() in landing.js. Without JS the thread is visible. */
    transition: stroke-dashoffset 1s cubic-bezier(0.3, 0.6, 0.2, 1) 0.15s;
}

.hero.close-instant .hero-trail path[b-f7fk5hscpz] {
    transition: none;
}

/* PROTOTYPE: close-demo states — receipt opens cool, closes amber. */
.hero-receipt[b-f7fk5hscpz] {
    transition: border-color 0.45s ease, box-shadow 0.45s ease;
}

.hero-receipt:not(.is-closed)[b-f7fk5hscpz] {
    border-color: rgba(255, 255, 255, 0.18);
}

/* Programmatic focus target after the close button removes itself. The
   receipt still needs an explicit indicator for keyboard and low-vision use. */
.hero-receipt.is-closed:focus[b-f7fk5hscpz] {
    outline: 3px solid rgba(242, 189, 99, 0.78);
    outline-offset: 4px;
}

.hero-receipt.is-closed[b-f7fk5hscpz] {
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.45), 0 0 34px rgba(242, 189, 99, 0.14);
}

.hero-receipt .receipt-signals span[b-f7fk5hscpz] {
    transition: opacity 0.3s ease;
}

.hero-receipt:not(.is-closed) .receipt-signals span:not(.is-set)[b-f7fk5hscpz] {
    opacity: 0.45;
}

.receipt-close-button[b-f7fk5hscpz] {
    margin-top: 14px;
    width: 100%;
    padding: 9px 12px;
    border: 1px solid rgba(242, 189, 99, 0.5);
    border-radius: 9px;
    background: rgba(242, 189, 99, 0.09);
    color: var(--amber);
    font: inherit;
    font-size: 13px;
    font-weight: 750;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.receipt-close-button:hover[b-f7fk5hscpz] {
    background: rgba(242, 189, 99, 0.16);
    border-color: rgba(242, 189, 99, 0.7);
}

.receipt-close-button:focus-visible[b-f7fk5hscpz] {
    outline: 3px solid rgba(242, 189, 99, 0.45);
    outline-offset: 2px;
}

.receipt-close-button:disabled[b-f7fk5hscpz] {
    cursor: default;
    opacity: 0.7;
}

.hero-receipt[b-f7fk5hscpz] {
    position: absolute;
    z-index: 5;
    right: -18px;
    bottom: 28px;
    width: 300px;
    padding: 18px;
    border: 1px solid rgba(242, 189, 99, 0.42);
    border-radius: 16px;
    background: rgba(22, 30, 41, 0.94);
    box-shadow: 0 22px 60px rgba(0,0,0,0.45);
    backdrop-filter: blur(14px);
}

.receipt-topline[b-f7fk5hscpz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--muted-soft);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.receipt-topline span[b-f7fk5hscpz] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.receipt-topline i[b-f7fk5hscpz] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--amber);
    box-shadow: 0 0 0 5px rgba(242, 189, 99, 0.09);
}

.receipt-topline b[b-f7fk5hscpz] { color: var(--amber); }

.hero-receipt > strong[b-f7fk5hscpz] {
    display: block;
    margin-top: 14px;
    color: #fff;
    font-size: 24px;
    letter-spacing: -0.035em;
}

.hero-receipt > p[b-f7fk5hscpz] {
    margin: 5px 0 15px;
    color: var(--muted);
    font-size: 13px;
}

.receipt-signals[b-f7fk5hscpz] {
    padding-top: 13px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    border-top: 1px solid var(--line-soft);
}

.receipt-signals span[b-f7fk5hscpz] {
    color: var(--muted-soft);
    font-size: 10px;
}

.receipt-signals b[b-f7fk5hscpz] {
    display: block;
    margin-bottom: 2px;
    color: #fff;
    font-size: 12px;
}

.hero-signal[b-f7fk5hscpz] {
    position: absolute;
    z-index: 6;
    padding: 8px 11px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #e8edf3;
    background: rgba(23, 31, 42, 0.93);
    border: 1px solid var(--line);
    border-radius: 999px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.28);
    font-size: 11px;
    font-weight: 700;
}

.hero-signal span[b-f7fk5hscpz] {
    font-size: 13px;
}

.hero-signal-open[b-f7fk5hscpz] { top: 52px; right: 8px; }
.hero-signal-open span[b-f7fk5hscpz] { color: var(--blue); }
.hero-signal-felt[b-f7fk5hscpz] { left: -14px; bottom: 106px; }
.hero-signal-felt span[b-f7fk5hscpz] { color: var(--pink); }
.hero-signal-focus[b-f7fk5hscpz] { top: 106px; left: -26px; }
.hero-signal-focus span[b-f7fk5hscpz] { color: var(--violet); }

/* ---------- Product film ---------- */

.product-film[b-f7fk5hscpz] {
    position: relative;
    padding: 76px 0 92px;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 10%, rgba(63, 147, 100, 0.10), transparent 38%),
        linear-gradient(180deg, #17212c 0%, #151e28 100%);
}

/* PROTOTYPE: the film's own "loose ends" world behind the frame — the three
   signal colors converging on the night map, still frame, no motion. */
.product-film[b-f7fk5hscpz]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url('img/proto/loose-ends-converge.jpg') center 38% / cover no-repeat;
    opacity: 0.22;
    -webkit-mask-image: radial-gradient(140% 120% at 50% 32%, #000 30%, transparent 78%);
    mask-image: radial-gradient(140% 120% at 50% 32%, #000 30%, transparent 78%);
    pointer-events: none;
}

.product-film .container[b-f7fk5hscpz] {
    position: relative;
    z-index: 1;
}

.product-film .section-head[b-f7fk5hscpz] {
    margin-bottom: 34px;
}

/* PROTOTYPE: Lumo hosts the film — the recurring-character device. */
.film-host[b-f7fk5hscpz] {
    width: 64px;
    height: 64px;
    margin-bottom: 14px;
    object-fit: cover;
    border-radius: 50%;
    border: 1px solid rgba(114, 217, 154, 0.42);
    box-shadow: 0 0 26px rgba(114, 217, 154, 0.16);
}

/* The only play affordance is the browser's native control, which renders very
   differently across engines on this dark frame. Warm the border on hover and
   keyboard focus so the frame reads as something you can start, without adding
   ambient motion to a section about closing the day quietly. */
.product-film-frame[b-f7fk5hscpz] {
    width: min(1040px, 100%);
    margin: 0 auto;
    padding: 8px;
    overflow: hidden;
    border: 1px solid rgba(114, 217, 154, 0.22);
    border-radius: 20px;
    background: #0f1721;
    box-shadow: 0 34px 90px rgba(0, 0, 0, 0.38);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.product-film-frame:hover[b-f7fk5hscpz],
.product-film-frame:focus-within[b-f7fk5hscpz] {
    border-color: rgba(114, 217, 154, 0.52);
    box-shadow:
        0 34px 90px rgba(0, 0, 0, 0.42),
        0 0 34px rgba(114, 217, 154, 0.12);
}

.product-film video[b-f7fk5hscpz] {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border-radius: 13px;
    background: #0d1620;
}

.product-film-transcript[b-f7fk5hscpz] {
    width: min(1040px, 100%);
    margin: 16px auto 0;
    padding: 16px 20px;
    color: var(--muted);
    border: 1px solid var(--line-soft);
    border-radius: 13px;
    background: rgba(11, 18, 27, 0.36);
    font-size: 14px;
}

.product-film-transcript summary[b-f7fk5hscpz] {
    color: #dce3ea;
    font-weight: 750;
    cursor: pointer;
}

.product-film-transcript summary:focus-visible[b-f7fk5hscpz] {
    outline: 3px solid rgba(114, 217, 154, 0.45);
    outline-offset: 4px;
    border-radius: 3px;
}

.product-film-transcript ol[b-f7fk5hscpz] {
    margin: 18px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 34px;
    list-style: none;
}

.product-film-transcript li[b-f7fk5hscpz] {
    padding: 9px 0;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 10px;
    border-top: 1px solid var(--line-soft);
    line-height: 1.55;
}

.product-film-transcript time[b-f7fk5hscpz] {
    color: var(--green);
    font-variant-numeric: tabular-nums;
    font-weight: 750;
}

.product-film-transcript p[b-f7fk5hscpz] {
    margin: 14px 0 0;
    color: var(--muted-soft);
    line-height: 1.55;
}

/* ---------- Ritual ---------- */

.ritual[b-f7fk5hscpz] {
    padding: 112px 0;
    background:
        radial-gradient(circle at 84% 48%, rgba(242,189,99,0.055), transparent 28%),
        #17202b;
}

/* The trail of the day: timeline steps interleaved with the evidence they
   produce, connected by one green-to-amber line. */
.trail[b-f7fk5hscpz] {
    position: relative;
    max-width: 1040px;
    margin: 0 auto;
    padding-left: 88px;
    list-style: none;
}

.trail-item[b-f7fk5hscpz] {
    margin: 0;
    padding: 0;
}

.trail[b-f7fk5hscpz]::before {
    content: "";
    position: absolute;
    left: 27px;
    top: 10px;
    bottom: 10px;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(180deg,
        rgba(114, 217, 154, 0.5),
        rgba(114, 217, 154, 0.35) 40%,
        rgba(242, 189, 99, 0.4) 75%,
        rgba(242, 189, 99, 0.6));
}

.trail-step[b-f7fk5hscpz] {
    position: relative;
    margin: 40px 0 18px;
}

.trail-item:first-child .trail-step[b-f7fk5hscpz] {
    margin-top: 0;
}

.trail-step time[b-f7fk5hscpz] {
    position: absolute;
    left: -88px;
    top: 0;
    width: 56px;
    height: 28px;
    display: grid;
    place-items: center;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
}

.trail-step-active time[b-f7fk5hscpz] {
    color: #2b2418;
    background: var(--amber);
    border-color: var(--amber);
    box-shadow: 0 0 0 5px rgba(242, 189, 99, 0.10);
}

.step-kicker[b-f7fk5hscpz] {
    color: var(--green);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.trail-step-active .step-kicker[b-f7fk5hscpz] { color: var(--amber); }

.trail-step h3[b-f7fk5hscpz] {
    margin: 6px 0 4px;
    color: var(--text);
    font-size: 20px;
    line-height: 1.25;
}

.trail-step p[b-f7fk5hscpz] {
    margin: 0;
    max-width: 620px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.55;
}

.trail-evidence[b-f7fk5hscpz] {
    margin: 24px 0 44px;
}

.trail-evidence-label[b-f7fk5hscpz] {
    margin-bottom: 14px;
    color: var(--green);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.trail .reflection-card[b-f7fk5hscpz] {
    max-width: none;
}

.signal-shot > .shot-picture[b-f7fk5hscpz] {
    height: 100%;
}

.reflection-action small[b-f7fk5hscpz] {
    display: block;
    color: var(--amber);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.signal-grid[b-f7fk5hscpz] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.signal-card[b-f7fk5hscpz] {
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.18);
}

.signal-card-did[b-f7fk5hscpz] { border-top: 2px solid rgba(101,185,255,0.75); }
.signal-card-felt[b-f7fk5hscpz] { border-top: 2px solid rgba(255,143,163,0.75); }
.signal-card-focus[b-f7fk5hscpz] { border-top: 2px solid rgba(181,145,255,0.75); }

.signal-shot[b-f7fk5hscpz] {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #111923;
    border-bottom: 1px solid var(--line-soft);
}

.signal-shot[b-f7fk5hscpz]::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent 62%, rgba(16,23,32,0.28));
}

.signal-shot img[b-f7fk5hscpz] {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    object-position: center;
}

.signal-body[b-f7fk5hscpz] {
    padding: 22px 22px 25px;
}

.signal-index[b-f7fk5hscpz] {
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.13em;
}

.signal-card-did .signal-index[b-f7fk5hscpz] { color: var(--blue); }
.signal-card-felt .signal-index[b-f7fk5hscpz] { color: var(--pink); }
.signal-card-focus .signal-index[b-f7fk5hscpz] { color: var(--violet); }

.signal-body h3[b-f7fk5hscpz] {
    margin: 8px 0 7px;
    color: var(--text);
    font-size: 21px;
}

.signal-body p[b-f7fk5hscpz] {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.55;
}

.reflection-card[b-f7fk5hscpz] {
    max-width: 980px;
    margin: 0 auto;
    padding: 30px;
    background:
        linear-gradient(135deg, rgba(33,80,73,0.34), rgba(24,34,46,0.85) 52%),
        var(--surface);
    border: 1px solid rgba(114,217,154,0.24);
    border-radius: 20px;
    box-shadow: 0 22px 60px rgba(0,0,0,0.22);
}

.reflection-label[b-f7fk5hscpz] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--green);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.reflection-label span[b-f7fk5hscpz] { font-size: 17px; }

.reflection-grid[b-f7fk5hscpz] {
    margin-top: 18px;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(250px, 0.6fr);
    gap: 30px;
    align-items: stretch;
}

.reflection-copy h3[b-f7fk5hscpz] {
    margin: 0 0 12px;
    max-width: 650px;
    color: var(--text);
    font-size: clamp(24px, 3vw, 34px);
    line-height: 1.08;
    letter-spacing: -0.035em;
}

.reflection-copy p[b-f7fk5hscpz] {
    margin: 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.65;
}

.reflection-action[b-f7fk5hscpz] {
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: rgba(15,22,30,0.5);
    border: 1px solid var(--line-soft);
    border-radius: 14px;
}

.reflection-action strong[b-f7fk5hscpz] {
    margin-top: 10px;
    color: #fff;
    font-size: 18px;
    line-height: 1.35;
}

.reflection-action span[b-f7fk5hscpz] {
    width: fit-content;
    margin-top: 16px;
    padding: 7px 10px;
    color: var(--green);
    background: rgba(114,217,154,0.08);
    border: 1px solid rgba(114,217,154,0.18);
    border-radius: 8px;
    font-size: 11px;
    font-weight: 750;
}

.ai-trust-note[b-f7fk5hscpz] {
    margin: 24px 0 0;
    padding-top: 18px;
    color: var(--muted-soft);
    border-top: 1px solid var(--line-soft);
    font-size: 12px;
    line-height: 1.55;
}

.privacy-rail[b-f7fk5hscpz] {
    margin-top: 72px;
    padding: 28px 30px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 22px;
    background: rgba(17,29,28,0.58);
    border: 1px solid rgba(114,217,154,0.2);
    border-radius: 18px;
}

.privacy-mark[b-f7fk5hscpz] {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    color: var(--green);
    background: rgba(114,217,154,0.08);
    border: 1px solid rgba(114,217,154,0.18);
    border-radius: 15px;
}

.privacy-rail .kicker[b-f7fk5hscpz] { margin-bottom: 5px; font-size: 9px; }

.privacy-rail h3[b-f7fk5hscpz] {
    margin: 0;
    color: var(--text);
    font-size: 20px;
}

.privacy-rail p[b-f7fk5hscpz] {
    max-width: 760px;
    margin: 7px 0 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.55;
}

.privacy-rail > a[b-f7fk5hscpz] {
    min-height: 44px;
    padding: 0 4px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--green);
    font-size: 13px;
    font-weight: 750;
    text-decoration: none;
    white-space: nowrap;
}

.privacy-rail > a:hover[b-f7fk5hscpz] { color: #9ceab8; }

/* ---------- Depth ---------- */

.depth[b-f7fk5hscpz] {
    position: relative;
    padding: 112px 0;
    overflow: hidden;
    background: #17202b;
}

/* PROTOTYPE: the world stage moved into the compass module itself
   (see LoopRing.razor.css) so controller + evidence share one atmosphere
   instead of the whole section carrying a wash. */
.depth > .container[b-f7fk5hscpz] {
    position: relative;
    z-index: 1;
}

.depth-intro[b-f7fk5hscpz] {
    max-width: 760px;
}

.depth-intro .section-head[b-f7fk5hscpz] { margin-bottom: 0; }

/* ---------- Founder ---------- */

.founder-note[b-f7fk5hscpz] {
    padding: 92px 0;
    background:
        radial-gradient(circle at 80% 40%, rgba(242,189,99,0.07), transparent 24%),
        #1a222d;
}

.founder-note blockquote[b-f7fk5hscpz] {
    position: relative;
    isolation: isolate;
    max-width: 1100px;
    min-height: 500px;
    margin: 0 auto;
    padding: 56px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #141d27;
    border: 1px solid var(--line);
    border-radius: 22px;
}

.founder-note blockquote[b-f7fk5hscpz]::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(13, 20, 29, 0.96) 0%,
        rgba(13, 20, 29, 0.9) 38%,
        rgba(13, 20, 29, 0.68) 58%,
        rgba(13, 20, 29, 0.12) 82%
    );
    pointer-events: none;
}

.founder-story-picture[b-f7fk5hscpz] {
    position: absolute;
    z-index: -2;
    inset: 0;
    display: block;
}

.founder-story-picture img[b-f7fk5hscpz] {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

.founder-story-content[b-f7fk5hscpz] {
    position: relative;
    z-index: 1;
    width: min(58%, 620px);
}

.founder-quote-mark[b-f7fk5hscpz] {
    position: absolute;
    left: 0;
    top: -62px;
    color: rgba(242,189,99,0.18);
    font-family: Georgia, serif;
    font-size: 96px;
    line-height: 1;
}

.founder-story-content > p[b-f7fk5hscpz] {
    position: relative;
    margin: 0;
    color: #eef2f6;
    font-size: clamp(24px, 3.2vw, 36px);
    font-weight: 650;
    line-height: 1.3;
    letter-spacing: -0.035em;
    text-wrap: balance;
}

.founder-note footer[b-f7fk5hscpz] {
    margin-top: 28px;
    display: flex;
    align-items: center;
    gap: 11px;
}

.founder-avatar[b-f7fk5hscpz] {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    color: #1d281f;
    background: var(--green);
    border-radius: 50%;
    font-weight: 900;
}

.founder-note footer strong[b-f7fk5hscpz],
.founder-note footer small[b-f7fk5hscpz] {
    display: block;
}

.founder-note footer strong[b-f7fk5hscpz] { color: #fff; font-size: 13px; }
.founder-note footer small[b-f7fk5hscpz] { margin-top: 2px; color: var(--muted-soft); font-size: 11px; }

/* ---------- Pricing ---------- */

.pricing[b-f7fk5hscpz] {
    padding: 112px 0;
    background: #17202b;
}

.pricing-toggle[b-f7fk5hscpz] {
    width: fit-content;
    margin: -22px auto 38px;
    padding: 4px;
    display: flex;
    gap: 3px;
    background: #111923;
    border: 1px solid var(--line);
    border-radius: 13px;
}

.pricing-toggle button[b-f7fk5hscpz] {
    min-width: 100px;
    min-height: 44px;
    padding: 0 16px;
    color: var(--muted);
    background: transparent;
    border: 0;
    border-radius: 9px;
    font: inherit;
    font-size: 13px;
    font-weight: 750;
    cursor: pointer;
}

.pricing-toggle button.is-active[b-f7fk5hscpz] {
    color: #fff;
    background: var(--green-fill);
    box-shadow: 0 8px 24px rgba(17,92,55,0.24);
}

.pricing-grid[b-f7fk5hscpz] {
    width: min(520px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 18px;
}

.price-card[b-f7fk5hscpz] {
    position: relative;
    min-height: 540px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
}

.price-card-featured[b-f7fk5hscpz] {
    background: linear-gradient(180deg, rgba(40,125,78,0.14), transparent 48%), var(--surface);
    border-color: rgba(114,217,154,0.42);
    box-shadow: 0 24px 70px rgba(0,0,0,0.25);
}

.price-badge[b-f7fk5hscpz] {
    position: absolute;
    top: -14px;
    left: 50%;
    min-height: 28px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    translate: -50% 0;
    color: #fff;
    background: var(--green-fill);
    border: 1px solid #3d9868;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.price-name[b-f7fk5hscpz] {
    margin: 0;
    color: var(--green);
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.price-head p[b-f7fk5hscpz] {
    min-height: 48px;
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.5;
}

.price-row[b-f7fk5hscpz] {
    margin: 25px 0;
    display: flex;
    align-items: flex-end;
    gap: 4px;
}

.price-currency[b-f7fk5hscpz] {
    align-self: flex-start;
    margin-top: 7px;
    color: #fff;
    font-size: 22px;
    font-weight: 800;
}

.price-row > strong[b-f7fk5hscpz] {
    color: #fff;
    font-size: 56px;
    line-height: 0.9;
    letter-spacing: -0.055em;
    font-variant-numeric: tabular-nums;
}

.price-cycle[b-f7fk5hscpz] {
    margin-left: 8px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.price-cycle span[b-f7fk5hscpz] {
    color: var(--muted);
    font-size: 12px;
}

.price-cycle small[b-f7fk5hscpz] {
    color: var(--green);
    font-size: 10px;
    font-weight: 700;
}

.price-card ul[b-f7fk5hscpz] {
    margin: 0 0 28px;
    padding: 0;
    display: grid;
    gap: 0;
    list-style: none;
}

.price-card li[b-f7fk5hscpz] {
    position: relative;
    padding: 12px 0 12px 24px;
    color: #c8d0da;
    border-bottom: 1px solid var(--line-soft);
    font-size: 13px;
    line-height: 1.4;
}

.price-card li[b-f7fk5hscpz]::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--green);
    font-weight: 900;
}

.price-card .button[b-f7fk5hscpz] {
    margin-top: auto;
}

.price-terms[b-f7fk5hscpz] {
    margin: 14px 0 0;
    color: #8b95a3;
    font-size: 12px;
    line-height: 1.55;
}

.price-terms strong[b-f7fk5hscpz] {
    color: #c8d0da;
}

.pricing-footnote[b-f7fk5hscpz] {
    margin-top: 24px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px 28px;
    color: var(--muted-soft);
    font-size: 12px;
}

.pricing-footnote span[b-f7fk5hscpz] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.pricing-footnote[b-f7fk5hscpz]  svg { color: var(--green); font-size: 18px; }

.checkout-status[b-f7fk5hscpz] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

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

/* The warm drift begins here: the last quiet section before the amber
   ending picks up the evening temperature, and its kicker (with the
   thread-mark inheriting currentColor) turns amber with it. */
.faq[b-f7fk5hscpz] {
    padding: 112px 0;
    background: linear-gradient(180deg, #1a222d 0%, #1d2026 60%, #201f22 100%);
}

.faq .kicker[b-f7fk5hscpz] {
    color: var(--amber);
}

.faq-layout[b-f7fk5hscpz] {
    display: grid;
    grid-template-columns: minmax(280px, 0.68fr) minmax(0, 1.32fr);
    align-items: start;
    gap: 72px;
}

.faq-layout .section-head[b-f7fk5hscpz] {
    position: sticky;
    top: 105px;
    margin-bottom: 0;
}

.faq-list[b-f7fk5hscpz] {
    border-top: 1px solid var(--line);
}

.faq details[b-f7fk5hscpz] {
    border-bottom: 1px solid var(--line);
}

.faq summary[b-f7fk5hscpz] {
    position: relative;
    min-height: 72px;
    padding: 22px 48px 22px 2px;
    display: flex;
    align-items: center;
    color: #edf1f5;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    list-style: none;
    cursor: pointer;
}

.faq summary[b-f7fk5hscpz]::-webkit-details-marker { display: none; }
.faq summary[b-f7fk5hscpz]::marker { content: ""; }

.faq summary[b-f7fk5hscpz]::after {
    content: "+";
    position: absolute;
    right: 4px;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    color: var(--green);
    background: rgba(114,217,154,0.06);
    border: 1px solid rgba(114,217,154,0.16);
    border-radius: 50%;
    font-size: 19px;
    font-weight: 500;
}

.faq details[open] summary[b-f7fk5hscpz]::after { content: "−"; }
.faq details[open] summary[b-f7fk5hscpz] { color: var(--green); }

.faq details > p[b-f7fk5hscpz] {
    max-width: 720px;
    margin: -4px 50px 0 2px;
    padding: 0 0 24px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.7;
}

/* ---------- Download ---------- */

/* PROTOTYPE: the page's ending — the arc resolves from working green to
   closure amber, then stops. Amber here is semantic (closure), not glow. */
.download[b-f7fk5hscpz] {
    position: relative;
    padding: 20px 0 88px;
    overflow: hidden;
    /* Warm earlier and reveal the path world higher, so the early-access card
       already sits on warming ground instead of the amber arriving as a band. */
    background:
        radial-gradient(85% 60% at 50% 100%, rgba(242, 189, 99, 0.10), transparent 62%),
        linear-gradient(180deg, #1a222d 0%, #211f1a 44%, #262016 100%);
}

/* PROTOTYPE: one amber path into the night — tomorrow's first move,
   from the same footage the film's loose ends resolve through. */
.download[b-f7fk5hscpz]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url('img/proto/first-move-path.jpg') center 74% / cover no-repeat;
    opacity: 0.16;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 42%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 42%);
    pointer-events: none;
}

.download .container[b-f7fk5hscpz] {
    position: relative;
    z-index: 1;
}

/* PROTOTYPE: the card joins the evening. Its surfaces warm to the ending's
   world — cool card on amber ground read as pasted-on. Green remains only
   where action lives: the button, the icon, the links. */
.download .kicker[b-f7fk5hscpz] {
    color: var(--amber);
}

.page-close[b-f7fk5hscpz] {
    max-width: 620px;
    margin: 72px auto 0;
    text-align: center;
}

/* Lumo witnesses the close rather than performing it. The alpha render stays
   still; a responsive CSS contact shadow seats it in the amber path world. */
.page-close-lumo[b-f7fk5hscpz] {
    position: relative;
    width: clamp(56px, 4.8vw, 64px);
    margin: 0 auto -4px;
    isolation: isolate;
}

.page-close-lumo[b-f7fk5hscpz]::after {
    content: "";
    position: absolute;
    z-index: 0;
    left: 50%;
    bottom: 1px;
    width: 92%;
    height: 10px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse, rgba(242, 189, 99, 0.34), rgba(10, 8, 5, 0) 72%);
    filter: blur(3px);
}

.page-close-lumo picture[b-f7fk5hscpz],
.page-close-lumo img[b-f7fk5hscpz] {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    display: block;
}

.page-close-lumo img[b-f7fk5hscpz] {
    filter:
        drop-shadow(0 8px 12px rgba(0, 0, 0, 0.34))
        drop-shadow(0 0 14px rgba(242, 189, 99, 0.16));
}

.page-close-lumo + .page-close-rule[b-f7fk5hscpz] {
    margin-top: 14px;
}

/* Entrance-only polish: the amber rule draws in with the block's reveal. */
.js-reveal .page-close .page-close-rule[b-f7fk5hscpz] {
    width: 0;
    transition: width 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.35s;
}

.js-reveal .page-close.is-revealed .page-close-rule[b-f7fk5hscpz] {
    width: 72px;
}

.page-close-rule[b-f7fk5hscpz] {
    width: 72px;
    height: 2px;
    margin: 24px auto 20px;
    border-radius: 2px;
    background: var(--amber);
    opacity: 0.85;
}

.page-close-time[b-f7fk5hscpz] {
    margin: 0 0 10px;
    color: var(--amber);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.page-close-line[b-f7fk5hscpz] {
    margin: 0;
    color: #f6efe3;
    font-family: var(--font-display);
    font-size: clamp(32px, 3.8vw, 46px);
    font-weight: 600;
    line-height: 1.05;
}

.page-close-sub[b-f7fk5hscpz] {
    margin: 12px 0 0;
    color: var(--muted);
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(17px, 1.6vw, 20px);
}

.download-card[b-f7fk5hscpz] {
    position: relative;
    padding: 50px;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
    align-items: stretch;
    gap: 50px;
    overflow: hidden;
    background:
        radial-gradient(circle at 88% 10%, rgba(242,189,99,0.1), transparent 26%),
        linear-gradient(135deg, rgba(40,125,78,0.16), transparent 45%),
        #17212d;
    border: 1px solid rgba(114,217,154,0.2);
    border-radius: 24px;
    box-shadow: 0 32px 90px rgba(0,0,0,0.25);
}

.download-copy[b-f7fk5hscpz],
.requirements[b-f7fk5hscpz] {
    position: relative;
    z-index: 2;
}

.download-copy h2[b-f7fk5hscpz] {
    max-width: 650px;
    margin: 0;
    color: var(--text);
    font-family: var(--font-display);
    font-size: clamp(36px, 4.5vw, 56px);
    font-weight: 600;
    line-height: 1.06;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

.download-copy > p[b-f7fk5hscpz] {
    max-width: 690px;
    margin: 18px 0 0;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.65;
}

.beta-access-box[b-f7fk5hscpz] {
    container-type: inline-size;
    margin-top: 28px;
    padding: 18px;
    background: rgba(9,17,24,0.38);
    border: 1px solid var(--line);
    border-radius: 15px;
}

.beta-access-intro[b-f7fk5hscpz] {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: start;
    gap: 14px;
}

.beta-access-icon[b-f7fk5hscpz] {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    color: var(--green);
    background: rgba(114,217,154,0.08);
    border-radius: 12px;
}

.beta-access-copy strong[b-f7fk5hscpz] {
    display: block;
    color: #fff;
    font-size: 16px;
    line-height: 1.3;
}

.beta-access-copy p[b-f7fk5hscpz] {
    margin: 5px 0 0;
    color: var(--muted-soft);
    font-size: 13px;
    line-height: 1.5;
}

.beta-access-box .button[b-f7fk5hscpz] { min-height: 44px; }

.beta-signup-form[b-f7fk5hscpz] {
    position: relative;
    margin-top: 18px;
}

.beta-signup-form:not(.is-enhanced) > label[b-f7fk5hscpz],
.beta-signup-form:not(.is-enhanced) > .beta-signup-row[b-f7fk5hscpz],
.beta-signup-form:not(.is-enhanced) > .beta-signup-help[b-f7fk5hscpz],
.beta-signup-form:not(.is-enhanced) > .beta-signup-status[b-f7fk5hscpz] {
    display: none;
}

.beta-signup-form > label[b-f7fk5hscpz] {
    display: block;
    margin-bottom: 7px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 750;
}

.beta-signup-row[b-f7fk5hscpz] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 9px;
}

.beta-signup-form input[b-f7fk5hscpz] {
    min-width: 0;
    min-height: 48px;
    padding: 0 13px;
    color: #fff;
    background: rgba(8,14,21,0.66);
    border: 1px solid var(--line);
    border-radius: 11px;
    font: inherit;
}

.beta-signup-form input[b-f7fk5hscpz]::placeholder { color: #778493; }
.beta-signup-form input[aria-invalid="true"][b-f7fk5hscpz] { border-color: #ef8d87; }
.beta-signup-form input:disabled[b-f7fk5hscpz] { opacity: 0.72; }

.beta-honeypot[b-f7fk5hscpz] {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

.beta-access-box .beta-signup-help[b-f7fk5hscpz] {
    margin-top: 9px;
    font-size: 11px;
    line-height: 1.45;
}

.beta-signup-help a[b-f7fk5hscpz],
.beta-email-fallback[b-f7fk5hscpz] { color: var(--green); }

.beta-access-box .beta-signup-status[b-f7fk5hscpz] {
    min-height: 18px;
    margin-top: 7px;
    color: #dfe8e2;
    font-size: 12px;
    line-height: 1.45;
}

.beta-access-box .beta-signup-status:empty[b-f7fk5hscpz] {
    min-height: 0;
    margin-top: 0;
}

.beta-email-fallback[b-f7fk5hscpz] {
    display: inline-block;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 700;
}

.beta-email-fallback[hidden][b-f7fk5hscpz] { display: none; }

.download-actions[b-f7fk5hscpz] {
    margin-top: 28px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.download-access[b-f7fk5hscpz] {
    margin-top: 28px;
}

.download-access label[b-f7fk5hscpz] {
    display: block;
    margin-bottom: 7px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.download-access-row[b-f7fk5hscpz] {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) auto auto;
    gap: 9px;
}

.download-access input[b-f7fk5hscpz] {
    min-height: 48px;
    padding: 0 13px;
    color: #fff;
    background: rgba(8,14,21,0.6);
    border: 1px solid var(--line);
    border-radius: 11px;
    font: inherit;
}

.beta-access-box .release-meta[b-f7fk5hscpz] {
    margin: 16px 0 0;
    padding-top: 15px;
    color: var(--muted-soft);
    border-top: 1px solid var(--line-soft);
    font-size: 12px;
    line-height: 1.45;
}

.release-meta a[b-f7fk5hscpz] { color: var(--green); }

.requirements[b-f7fk5hscpz] {
    padding: 26px;
    display: flex;
    flex-direction: column;
    background: rgba(10,17,24,0.5);
    border: 1px solid var(--line);
    border-radius: 18px;
}

.requirements-label[b-f7fk5hscpz] {
    color: var(--muted-soft);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.requirements > strong[b-f7fk5hscpz] {
    display: block;
    margin: 7px 0 18px;
    color: #fff;
    font-size: 22px;
}

.requirements ul[b-f7fk5hscpz] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.requirements li[b-f7fk5hscpz] {
    padding: 10px 0;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    color: var(--muted-soft);
    border-top: 1px solid var(--line-soft);
    font-size: 11px;
}

.requirements li b[b-f7fk5hscpz] {
    color: #dfe5ec;
    text-align: right;
}

.requirements > a[b-f7fk5hscpz] {
    min-height: 44px;
    margin-top: auto;
    padding-top: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--green);
    font-size: 12px;
    font-weight: 750;
    text-decoration: none;
}

/* The conversion card belongs to the warm end-of-day world. Keep these
   scoped overrides after the reusable card/form foundations so the cascade
   cannot silently restore the cool SaaS surface. */
.download .download-card[b-f7fk5hscpz] {
    background:
        radial-gradient(circle at 88% 10%, rgba(242, 189, 99, 0.14), transparent 30%),
        linear-gradient(135deg, rgba(242, 189, 99, 0.06), transparent 45%),
        #201c15;
    border-color: rgba(242, 189, 99, 0.22);
    box-shadow: 0 32px 90px rgba(0, 0, 0, 0.35);
}

.download .beta-access-box[b-f7fk5hscpz] {
    background: rgba(26, 20, 11, 0.42);
    border-color: rgba(242, 189, 99, 0.15);
}

.download .beta-signup-form input[b-f7fk5hscpz] {
    background: rgba(17, 13, 8, 0.6);
    border-color: rgba(242, 189, 99, 0.15);
}

.download .requirements[b-f7fk5hscpz] {
    background: rgba(26, 20, 11, 0.5);
    border-color: rgba(242, 189, 99, 0.15);
}

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

@media (max-width: 1080px) {
    .hero-grid[b-f7fk5hscpz] {
        grid-template-columns: minmax(0, 0.9fr) minmax(450px, 1.1fr);
        gap: 36px;
    }

    .hero-signal-focus[b-f7fk5hscpz] { left: -8px; }
    .hero-signal-felt[b-f7fk5hscpz] { left: 6px; }
}

@media (max-width: 900px) {
    .container[b-f7fk5hscpz] { width: min(100% - 36px, 760px); }

    .hero[b-f7fk5hscpz] {
        min-height: 0;
        /* Mobile fold: tighter head so the product screen arrives sooner. */
        padding: 44px 0 84px;
    }

    .hero-grid[b-f7fk5hscpz] {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .hero-copy[b-f7fk5hscpz] {
        max-width: 720px;
        margin: 0 auto;
        text-align: center;
    }

    .eyebrow[b-f7fk5hscpz] { margin: 0 auto; }
    .hero h1[b-f7fk5hscpz] { margin-left: auto; margin-right: auto; }
    .hero-lede[b-f7fk5hscpz] { margin-left: auto; margin-right: auto; }
    .hero-actions[b-f7fk5hscpz], .hero-trust[b-f7fk5hscpz] { justify-content: center; }
    .hero-visual[b-f7fk5hscpz] { width: min(680px, 100%); min-height: 530px; margin: 0 auto; }

    .faq-layout[b-f7fk5hscpz],
    .download-card[b-f7fk5hscpz] {
        grid-template-columns: 1fr;
    }

    .trail[b-f7fk5hscpz] { padding-left: 76px; }
    .trail[b-f7fk5hscpz]::before { left: 23px; }
    .trail-step time[b-f7fk5hscpz] { left: -76px; }

    .reflection-grid[b-f7fk5hscpz] { grid-template-columns: 1fr; }
    .reflection-action[b-f7fk5hscpz] { min-height: 160px; }

    .privacy-rail[b-f7fk5hscpz] { grid-template-columns: auto 1fr; }
    .privacy-rail > a[b-f7fk5hscpz] { grid-column: 2; }

    .pricing-grid[b-f7fk5hscpz] { grid-template-columns: 1fr; max-width: 620px; margin: 0 auto; }
    .price-card[b-f7fk5hscpz] { min-height: 0; }
    .price-head p[b-f7fk5hscpz] { min-height: 0; }
    .price-card .button[b-f7fk5hscpz] { margin-top: 12px; }

    .faq-layout[b-f7fk5hscpz] { gap: 38px; }
    .faq-layout .section-head[b-f7fk5hscpz] { position: static; }

    .download-card[b-f7fk5hscpz] { padding: 42px; }
    .requirements[b-f7fk5hscpz] { max-width: 520px; }
}

@media (max-width: 700px) {
    .container[b-f7fk5hscpz] { width: calc(100% - 32px); }

    .section-head[b-f7fk5hscpz] { margin-bottom: 38px; }
    .section-head h2[b-f7fk5hscpz] { font-size: clamp(31px, 9vw, 43px); }
    .section-head > p[b-f7fk5hscpz] { margin-top: 16px; font-size: 16px; line-height: 1.6; }

    .hero[b-f7fk5hscpz] { padding: 46px 0 76px; }
    .hero h1[b-f7fk5hscpz] { font-size: clamp(46px, 13.5vw, 64px); }
    .hero-afterline[b-f7fk5hscpz] { margin-top: 14px; font-size: 20px; }
    .hero-lede[b-f7fk5hscpz] { margin-top: 20px; font-size: 16px; line-height: 1.6; }
    .hero-actions[b-f7fk5hscpz] { flex-direction: column; align-items: stretch; }
    .hero-actions .button[b-f7fk5hscpz] { width: 100%; }
    .hero-trust[b-f7fk5hscpz] { max-width: 310px; margin-left: auto; margin-right: auto; }

    .hero-visual[b-f7fk5hscpz] { min-height: 455px; }
    .hero-window[b-f7fk5hscpz] { transform: none; border-radius: 15px; }
    .hero-receipt[b-f7fk5hscpz] { right: 6px; bottom: 4px; width: 274px; }
    .hero-signal[b-f7fk5hscpz] { font-size: 10px; }
    .hero-signal-open[b-f7fk5hscpz] { top: 35px; right: 4px; }
    .hero-signal-focus[b-f7fk5hscpz] { top: 82px; left: 3px; }
    .hero-signal-felt[b-f7fk5hscpz] { left: 10px; bottom: 92px; }

    .product-film[b-f7fk5hscpz],
    .ritual[b-f7fk5hscpz],
    .depth[b-f7fk5hscpz],
    .pricing[b-f7fk5hscpz],
    .faq[b-f7fk5hscpz] { padding: 82px 0; }

    .product-film-frame[b-f7fk5hscpz] { padding: 4px; border-radius: 15px; }
    .product-film video[b-f7fk5hscpz] { border-radius: 10px; }
    .product-film-transcript[b-f7fk5hscpz] { padding: 15px 16px; }
    .product-film-transcript ol[b-f7fk5hscpz] { grid-template-columns: 1fr; }

    .trail[b-f7fk5hscpz] { padding-left: 64px; }
    .trail[b-f7fk5hscpz]::before { left: 18px; }
    .trail-step time[b-f7fk5hscpz] { left: -64px; width: 48px; }

    .signal-grid[b-f7fk5hscpz] { grid-template-columns: 1fr; }
    .signal-card[b-f7fk5hscpz] { display: grid; grid-template-columns: minmax(150px, 0.8fr) minmax(0, 1.2fr); }
    .signal-shot[b-f7fk5hscpz] { height: 100%; aspect-ratio: auto; border-right: 1px solid var(--line-soft); border-bottom: 0; }
    .signal-body[b-f7fk5hscpz] { padding: 20px; }
    .reflection-card[b-f7fk5hscpz] { padding: 24px; }
    .reflection-copy h3[b-f7fk5hscpz] { font-size: 27px; }

    .privacy-rail[b-f7fk5hscpz] { padding: 24px; grid-template-columns: 1fr; }
    .privacy-rail > a[b-f7fk5hscpz] { grid-column: 1; }

    .founder-note[b-f7fk5hscpz] { padding: 72px 0; }
    .founder-note blockquote[b-f7fk5hscpz] {
        min-height: 0;
        padding: 0;
        display: block;
    }
    .founder-note blockquote[b-f7fk5hscpz]::after { display: none; }
    .founder-story-picture[b-f7fk5hscpz] {
        position: relative;
        z-index: auto;
        inset: auto;
        aspect-ratio: 16 / 9;
    }
    .founder-story-content[b-f7fk5hscpz] {
        width: 100%;
        padding: 32px 28px;
        background:
            linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.018)),
            #141d27;
    }
    .founder-quote-mark[b-f7fk5hscpz] {
        left: auto;
        right: 24px;
        top: 2px;
    }

    .pricing-toggle[b-f7fk5hscpz] { margin-top: -12px; }

    .faq summary[b-f7fk5hscpz] { min-height: 68px; padding-right: 44px; font-size: 15px; }
    .faq details > p[b-f7fk5hscpz] { margin-right: 38px; }

    .download[b-f7fk5hscpz] { padding: 4px 0 56px; }
    .download-card[b-f7fk5hscpz] { padding: 32px 24px; gap: 32px; border-radius: 20px; }
    .beta-signup-row[b-f7fk5hscpz] { grid-template-columns: 1fr; }
    .beta-signup-row .button[b-f7fk5hscpz] { width: 100%; }
    .download-access-row[b-f7fk5hscpz] { grid-template-columns: 1fr; }
    .download-actions[b-f7fk5hscpz] { flex-direction: column; }
    .download-actions .button[b-f7fk5hscpz] { width: 100%; }
}

@container (max-width: 560px) {
    .beta-signup-row[b-f7fk5hscpz] { grid-template-columns: 1fr; }
    .beta-signup-row .button[b-f7fk5hscpz] { width: 100%; }
}

@media (max-width: 480px) {
    .container[b-f7fk5hscpz] { width: calc(100% - 28px); }

    .eyebrow[b-f7fk5hscpz] { font-size: 11px; }
    .hero h1[b-f7fk5hscpz] { margin-top: 16px; font-size: 42px; }
    .hero-afterline[b-f7fk5hscpz] { margin-top: 12px; font-size: 19px; }
    .hero-lede[b-f7fk5hscpz] { margin-top: 14px; font-size: 15px; }
    /* The screen is the fold priority; the invitation note repeats below. */
    .hero-cta-note[b-f7fk5hscpz] { display: none; }
    .hero-trust[b-f7fk5hscpz] { display: grid; justify-content: start; text-align: left; row-gap: 6px; }
    .hero-visual[b-f7fk5hscpz] { min-height: 420px; }
    .window-bar[b-f7fk5hscpz] { height: 30px; }
    .hero-window > .shot-picture[b-f7fk5hscpz] { height: calc(100% - 30px); }
    .hero-receipt[b-f7fk5hscpz] { width: 250px; padding: 15px; }
    .hero-signal-open[b-f7fk5hscpz] { top: 23px; }
    .hero-signal-focus[b-f7fk5hscpz] { top: 66px; }
    .hero-signal-felt[b-f7fk5hscpz] { bottom: 91px; }

    .trail[b-f7fk5hscpz] { padding-left: 54px; }
    .trail[b-f7fk5hscpz]::before { left: 14px; }
    .trail-step time[b-f7fk5hscpz] { left: -54px; width: 42px; font-size: 11px; }

    .signal-card[b-f7fk5hscpz] { grid-template-columns: 1fr; }
    .signal-shot[b-f7fk5hscpz] { min-height: 180px; aspect-ratio: 16 / 9; border-right: 0; border-bottom: 1px solid var(--line-soft); }

    .reflection-card[b-f7fk5hscpz] { padding: 21px; }
    .privacy-rail[b-f7fk5hscpz] { padding: 21px; }

    .depth-item[b-f7fk5hscpz] { grid-template-columns: 1fr; }
    .founder-story-content > p[b-f7fk5hscpz] { font-size: 23px; }

    .price-card[b-f7fk5hscpz] { padding: 26px 22px; }
    .price-row > strong[b-f7fk5hscpz] { font-size: 52px; }

    .requirements[b-f7fk5hscpz] { padding: 22px; }
}

@media (prefers-reduced-motion: reduce) {
    .button[b-f7fk5hscpz] {
        transition: none;
    }

    .button:hover[b-f7fk5hscpz] { translate: none; }

    .product-film-frame[b-f7fk5hscpz] { transition: none; }

    .hero-trail path[b-f7fk5hscpz],
    .hero-receipt[b-f7fk5hscpz],
    .hero-receipt .receipt-signals span[b-f7fk5hscpz],
    .receipt-close-button[b-f7fk5hscpz] { transition: none; }

    .js-reveal .section-head .kicker[b-f7fk5hscpz]::after {
        width: 44px;
        transition: none;
    }

    .js-reveal .page-close .page-close-rule[b-f7fk5hscpz] {
        width: 72px;
        transition: none;
    }
}

/* Mid-page conversion shortcut after the reflection story — the mobile page is
   long and the header keeps Early Access inside the menu. */
.mid-cta[b-f7fk5hscpz] {
    /* Mobile aid by its own charter: the long page keeps Early Access in the
       header menu on phones. Desktop already has the header CTA in view, so
       the mid-page interruption exists only below 900px. */
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    margin-top: 2.4rem;
    text-align: center;
}

@media (max-width: 900px) {
    .mid-cta[b-f7fk5hscpz] {
        display: flex;
    }
}

.mid-cta > span[b-f7fk5hscpz] {
    color: var(--muted-soft, #929dab);
    font-size: 0.8rem;
}

.hero-cta-note[b-f7fk5hscpz] {
    margin: 0.6rem 0 0;
    color: var(--muted-soft, #929dab);
    font-size: 0.8rem;
}
/* /Components/Pages/Privacy.razor.rz.scp.css */
.privacy-page[b-bw0b9l0mrm] {
    padding: 84px 28px;
}

.privacy-card[b-bw0b9l0mrm] {
    max-width: 820px;
    margin: 0 auto;
    padding: 44px 48px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 18px;
    background:
        radial-gradient(circle at 0% 0%, rgba(51, 147, 96, 0.13), transparent 42%),
        linear-gradient(180deg, rgba(39,49,63,0.72), rgba(30,39,52,0.42));
    box-shadow: 0 24px 70px rgba(0,0,0,0.34);
}

.privacy-kicker[b-bw0b9l0mrm] {
    margin-bottom: 12px;
    color: #8ddb8c;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.privacy-card h1[b-bw0b9l0mrm] {
    margin: 0 0 18px;
    color: #fff;
    font-size: 44px;
    line-height: 1.08;
}

.privacy-lede[b-bw0b9l0mrm],
.privacy-section p[b-bw0b9l0mrm],
.privacy-updated[b-bw0b9l0mrm] {
    color: #c2c5cc;
    font-size: 16px;
    line-height: 1.66;
}

.privacy-lede[b-bw0b9l0mrm] {
    margin-bottom: 34px;
}

.privacy-warning[b-bw0b9l0mrm] {
    margin: 0 0 28px;
    padding: 16px 18px;
    color: #f3d8a7;
    border: 1px solid rgba(232, 176, 77, .35);
    border-radius: 12px;
    background: rgba(117, 76, 16, .18);
    line-height: 1.55;
}

.privacy-section[b-bw0b9l0mrm] {
    padding: 24px 0;
    border-top: 1px solid rgba(255,255,255,0.07);
}

.privacy-section h2[b-bw0b9l0mrm] {
    margin: 0 0 10px;
    color: #fff;
    font-size: 22px;
    line-height: 1.2;
}

.privacy-section p[b-bw0b9l0mrm] {
    margin: 0 0 12px;
}

.privacy-section p:last-child[b-bw0b9l0mrm] {
    margin-bottom: 0;
}

.privacy-section ul[b-bw0b9l0mrm] {
    margin: 10px 0 14px;
    padding-left: 22px;
    color: #c2c5cc;
    line-height: 1.62;
}

.privacy-section li + li[b-bw0b9l0mrm] {
    margin-top: 8px;
}

.privacy-section a[b-bw0b9l0mrm] {
    color: #8ddb8c;
}

.privacy-updated[b-bw0b9l0mrm] {
    margin: 8px 0 0;
    color: #8b95a3;
    font-size: 13px;
}

@media (max-width: 640px) {
    .privacy-page[b-bw0b9l0mrm] {
        padding: 56px 18px;
    }

    .privacy-card[b-bw0b9l0mrm] {
        padding: 32px 24px;
        border-radius: 14px;
    }

    .privacy-card h1[b-bw0b9l0mrm] {
        font-size: 34px;
    }
}
/* /Components/Pages/RegionalPrivacy.razor.rz.scp.css */
.legal-page[b-3up1pnpv1w] {
    padding: 84px 28px;
}

.legal-card[b-3up1pnpv1w] {
    max-width: 900px;
    margin: 0 auto;
    padding: 44px 48px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 18px;
    background:
        radial-gradient(circle at 0% 0%, rgba(51, 147, 96, 0.13), transparent 42%),
        linear-gradient(180deg, rgba(39,49,63,0.72), rgba(30,39,52,0.42));
    box-shadow: 0 24px 70px rgba(0,0,0,0.34);
}

.legal-kicker[b-3up1pnpv1w] {
    margin-bottom: 12px;
    color: #8ddb8c;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.legal-card h1[b-3up1pnpv1w] {
    margin: 0 0 18px;
    color: #fff;
    font-size: 44px;
    line-height: 1.08;
}

.legal-lede[b-3up1pnpv1w],
.legal-section p[b-3up1pnpv1w],
.legal-section li[b-3up1pnpv1w],
.legal-updated[b-3up1pnpv1w] {
    color: #c2c5cc;
    font-size: 16px;
    line-height: 1.66;
}

.legal-lede[b-3up1pnpv1w] {
    margin-bottom: 28px;
}

.legal-warning[b-3up1pnpv1w] {
    margin: 0 0 28px;
    padding: 16px 18px;
    color: #f3d8a7;
    border: 1px solid rgba(232, 176, 77, .35);
    border-radius: 12px;
    background: rgba(117, 76, 16, .18);
    line-height: 1.55;
}

.legal-section[b-3up1pnpv1w] {
    padding: 24px 0;
    border-top: 1px solid rgba(255,255,255,0.07);
    scroll-margin-top: 96px;
}

.legal-section h2[b-3up1pnpv1w] {
    margin: 0 0 10px;
    color: #fff;
    font-size: 22px;
    line-height: 1.25;
}

/* Sub-headings inside the long United States section. */
.legal-section h3[b-3up1pnpv1w] {
    margin: 22px 0 8px;
    color: #e6eaef;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.legal-section h3:first-of-type[b-3up1pnpv1w] {
    margin-top: 12px;
}

.legal-section p[b-3up1pnpv1w] {
    margin: 0 0 12px;
}

.legal-section p:last-child[b-3up1pnpv1w] {
    margin-bottom: 0;
}

.legal-section ul[b-3up1pnpv1w] {
    margin: 10px 0 0;
    padding-left: 22px;
}

.legal-section li + li[b-3up1pnpv1w] {
    margin-top: 8px;
}

.legal-section a[b-3up1pnpv1w],
.legal-card a[b-3up1pnpv1w] {
    color: #8ddb8c;
}

/* Region index. Wraps to as many rows as the viewport needs. */
.legal-jump[b-3up1pnpv1w] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 24px;
    padding: 18px 0 4px;
    border-top: 1px solid rgba(255,255,255,0.07);
}

.legal-jump a[b-3up1pnpv1w] {
    padding: 6px 12px;
    color: #c2c5cc;
    font-size: 13px;
    line-height: 1.3;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 999px;
    background: rgba(255,255,255,0.03);
    transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}

.legal-jump a:hover[b-3up1pnpv1w],
.legal-jump a:focus-visible[b-3up1pnpv1w] {
    color: #8ddb8c;
    border-color: rgba(141, 219, 140, 0.38);
    background: rgba(141, 219, 140, 0.08);
}

/*
 * A jurisdiction we do not serve yet because the statutory appointment is
 * still open. Deliberately quieter than the amber pre-release warning: this is
 * a scope statement, not a defect.
 */
.legal-pending[b-3up1pnpv1w] {
    padding: 12px 14px;
    color: #aab3bf;
    font-size: 15px;
    border-left: 2px solid rgba(255,255,255,0.14);
    border-radius: 0 8px 8px 0;
    background: rgba(255,255,255,0.03);
}

.legal-updated[b-3up1pnpv1w] {
    margin: 8px 0 0;
    color: #8b95a3;
    font-size: 13px;
}

@media (max-width: 640px) {
    .legal-page[b-3up1pnpv1w] {
        padding: 56px 18px;
    }

    .legal-card[b-3up1pnpv1w] {
        padding: 32px 24px;
        border-radius: 14px;
    }

    .legal-card h1[b-3up1pnpv1w] {
        font-size: 34px;
    }
}
/* /Components/Pages/Terms.razor.rz.scp.css */
.legal-page[b-m8rbby05rk] {
    padding: 84px 28px;
}

.legal-card[b-m8rbby05rk] {
    max-width: 900px;
    margin: 0 auto;
    padding: 44px 48px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 18px;
    background:
        radial-gradient(circle at 0% 0%, rgba(51, 147, 96, 0.13), transparent 42%),
        linear-gradient(180deg, rgba(39,49,63,0.72), rgba(30,39,52,0.42));
    box-shadow: 0 24px 70px rgba(0,0,0,0.34);
}

.legal-kicker[b-m8rbby05rk] {
    margin-bottom: 12px;
    color: #8ddb8c;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.legal-card h1[b-m8rbby05rk] {
    margin: 0 0 18px;
    color: #fff;
    font-size: 44px;
    line-height: 1.08;
}

.legal-lede[b-m8rbby05rk],
.legal-section p[b-m8rbby05rk],
.legal-section li[b-m8rbby05rk],
.legal-updated[b-m8rbby05rk] {
    color: #c2c5cc;
    font-size: 16px;
    line-height: 1.66;
}

.legal-lede[b-m8rbby05rk] {
    margin-bottom: 28px;
}

.legal-warning[b-m8rbby05rk] {
    margin: 0 0 28px;
    padding: 16px 18px;
    color: #f3d8a7;
    border: 1px solid rgba(232, 176, 77, .35);
    border-radius: 12px;
    background: rgba(117, 76, 16, .18);
    line-height: 1.55;
}

.legal-section[b-m8rbby05rk] {
    padding: 24px 0;
    border-top: 1px solid rgba(255,255,255,0.07);
}

.legal-section h2[b-m8rbby05rk] {
    margin: 0 0 10px;
    color: #fff;
    font-size: 22px;
    line-height: 1.25;
}

.legal-section p[b-m8rbby05rk] {
    margin: 0 0 12px;
}

.legal-section p:last-child[b-m8rbby05rk] {
    margin-bottom: 0;
}

.legal-section ul[b-m8rbby05rk] {
    margin: 10px 0 0;
    padding-left: 22px;
}

.legal-section li + li[b-m8rbby05rk] {
    margin-top: 8px;
}

.legal-section a[b-m8rbby05rk],
.legal-card a[b-m8rbby05rk] {
    color: #8ddb8c;
}

.legal-card code[b-m8rbby05rk] {
    color: #d9e1e8;
    overflow-wrap: anywhere;
}

.legal-updated[b-m8rbby05rk] {
    margin: 8px 0 0;
    color: #8b95a3;
    font-size: 13px;
}

@media (max-width: 640px) {
    .legal-page[b-m8rbby05rk] {
        padding: 56px 18px;
    }

    .legal-card[b-m8rbby05rk] {
        padding: 32px 24px;
        border-radius: 14px;
    }

    .legal-card h1[b-m8rbby05rk] {
        font-size: 34px;
    }
}