/* /Components/BetaSignupForm.razor.rz.scp.css */
.beta-signup-form[b-w1zf4ksl32] {
    display: grid;
    gap: .5rem;
}

.beta-signup-form label[b-w1zf4ksl32] {
    color: var(--text-secondary);
    font-size: .74rem;
    font-weight: 700;
}

.beta-signup-form input[b-w1zf4ksl32] {
    min-height: 2.85rem;
    padding: 0 .9rem;
    border: 1px solid var(--stroke-strong);
    border-radius: .55rem;
    color: var(--text-primary);
    background: var(--surface-app);
    font: inherit;
    font-size: .9rem;
}

.beta-signup-form input:focus-visible[b-w1zf4ksl32] {
    outline: 3px solid var(--accent);
    outline-offset: 1px;
}

.beta-signup-form input:disabled[b-w1zf4ksl32] {
    opacity: .62;
}

.beta-signup-form button[b-w1zf4ksl32] {
    margin-top: .35rem;
}

.beta-signup-form__message[b-w1zf4ksl32] {
    margin: 0;
    color: var(--accent);
    font-size: .74rem;
    font-weight: 700;
}

.beta-signup-form__result[b-w1zf4ksl32] {
    margin: 1rem 0 0;
    padding: .7rem .8rem;
    border: 1px solid var(--stroke-strong);
    border-radius: .5rem;
    color: var(--text-primary);
    background: var(--surface-header);
    font-size: .78rem;
    line-height: 1.5;
}
/* /Components/LaunchListForm.razor.rz.scp.css */
.launch-list-form__status[b-vs3rukqs43] {
    margin: 1rem 0 0;
    padding: .8rem;
    border: 1px solid var(--stroke);
    border-radius: .5rem;
    color: var(--text-secondary);
    background: var(--surface-header);
    font-size: .78rem;
}
/* /Components/ScreenshotFrame.razor.rz.scp.css */
.screenshot-frame[b-bla5y8qqe0] {
    --capture-aspect: 16 / 10;
    display: flex;
    flex-direction: column;
    align-self: start;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--stroke);
    border-radius: var(--radius-large);
    background: var(--surface-raised);
    box-shadow: var(--shadow-card);
}

/* Media and placeholder both sit inset on a mat of the frame surface, with a hairline of their own. Captures
   are always cozy-dark, so the mat and hairline let a dark screenshot sit comfortably on the cozy-day (light)
   page, and the layout does not shift when a real capture replaces the placeholder. */
.screenshot-frame__media[b-bla5y8qqe0] {
    position: relative;
    display: block;
    overflow: hidden;
    margin: .55rem;
    aspect-ratio: var(--capture-aspect);
    border: 1px solid var(--stroke);
    border-radius: calc(var(--radius-large) - .35rem);
    line-height: 0;
    background: var(--surface-app);
}

.screenshot-frame__media-button[b-bla5y8qqe0] {
    width: calc(100% - 1.1rem);
    padding: 0;
    appearance: none;
    color: inherit;
    font: inherit;
    text-align: initial;
    cursor: zoom-in;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.screenshot-frame__picture[b-bla5y8qqe0] {
    display: block;
    width: 100%;
    height: 100%;
}

.screenshot-frame__expand[b-bla5y8qqe0] {
    position: absolute;
    right: .65rem;
    bottom: .65rem;
    padding: .45rem .65rem;
    border: 1px solid var(--stroke-strong);
    border-radius: 999px;
    color: var(--text-primary);
    background: var(--surface-raised);
    box-shadow: var(--shadow-card);
    font-size: .72rem;
    font-weight: 750;
    line-height: 1;
    opacity: 0;
    transform: translateY(.35rem);
    transition: opacity 160ms ease, transform 160ms ease;
}

.screenshot-frame__media-button:hover[b-bla5y8qqe0],
.screenshot-frame__media-button:focus-visible[b-bla5y8qqe0] {
    border-color: var(--accent);
    box-shadow: 0 .45rem 1.25rem rgba(5, 4, 3, .22);
    transform: translateY(-2px);
}

.screenshot-frame__media-button:hover .screenshot-frame__expand[b-bla5y8qqe0],
.screenshot-frame__media-button:focus-visible .screenshot-frame__expand[b-bla5y8qqe0] {
    opacity: 1;
    transform: none;
}

.screenshot-frame__media-button:focus-visible[b-bla5y8qqe0] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.screenshot-frame__image[b-bla5y8qqe0] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    background: var(--surface-app);
}

/* Placeholder slot: a dashed, matted stand-in for a real capture. Its interior holds only the production
   scaffolding now (hand note plus capture spec); the frame's label lives in the caption plate below, which is
   shared with the real-screenshot state so the layout never loses its explanation on swap. */
.screenshot-frame__placeholder[b-bla5y8qqe0] {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: .55rem;
    aspect-ratio: var(--capture-aspect);
    margin: .55rem;
    padding: clamp(1rem, 3.5vw, 1.7rem);
    border: 2px dashed var(--stroke-strong);
    border-radius: calc(var(--radius-large) - .35rem);
    background: var(--surface-header);
    text-align: center;
}

.screenshot-frame--aspect-three-to-one[b-bla5y8qqe0] { --capture-aspect: 3 / 1; }
.screenshot-frame--aspect-three-to-two[b-bla5y8qqe0] { --capture-aspect: 3 / 2; }
.screenshot-frame--aspect-four-to-three[b-bla5y8qqe0] { --capture-aspect: 4 / 3; }
.screenshot-frame--aspect-five-to-four[b-bla5y8qqe0] { --capture-aspect: 5 / 4; }
.screenshot-frame--aspect-square[b-bla5y8qqe0] { --capture-aspect: 1 / 1; }
.screenshot-frame--aspect-two-to-one[b-bla5y8qqe0] { --capture-aspect: 2 / 1; }
.screenshot-frame--aspect-four-to-five[b-bla5y8qqe0] { --capture-aspect: 4 / 5; }
.screenshot-frame--aspect-fourteen-to-five[b-bla5y8qqe0] { --capture-aspect: 14 / 5; }
.screenshot-frame--video .screenshot-frame__media[b-bla5y8qqe0],
.screenshot-frame--video .screenshot-frame__placeholder[b-bla5y8qqe0] {
    background: var(--surface-app);
}

.screenshot-frame__video[b-bla5y8qqe0] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: var(--surface-app);
}

.screenshot-frame__placeholder-note[b-bla5y8qqe0] {
    color: var(--text-muted);
    font-family: var(--font-hand);
    font-size: .95rem;
    line-height: 1.4;
    transform: translateX(var(--note-shift, 0)) rotate(var(--note-tilt, -1deg));
}

/* Each variant nudges the hand-note's tilt and offset so repeated placeholders never stamp out identically. */
.screenshot-frame--editor[b-bla5y8qqe0] { --note-tilt: -1.5deg; --note-shift: .15rem; }
.screenshot-frame--timeline[b-bla5y8qqe0] { --note-tilt: 1.1deg; --note-shift: -.2rem; }
.screenshot-frame--graph[b-bla5y8qqe0] { --note-tilt: -.6deg; --note-shift: .25rem; }
.screenshot-frame--map[b-bla5y8qqe0] { --note-tilt: 1.5deg; --note-shift: -.15rem; }
.screenshot-frame--heatmap[b-bla5y8qqe0] { --note-tilt: -1.2deg; --note-shift: .2rem; }
.screenshot-frame--video[b-bla5y8qqe0] { --note-tilt: 1deg; --note-shift: 0; }

/* Plainer placeholder for compact cluster and thumbnail slots: the hand note steps aside, leaving the capture
   line only. This is also the second visual tier: a tighter mat, finer dash, and smaller corner radius than the
   anchor slots, so the set reads as one family without every slot being a stamped-out identical rectangle. */
.screenshot-frame--plain .screenshot-frame__placeholder[b-bla5y8qqe0] {
    margin: .45rem;
    padding: clamp(.9rem, 3vw, 1.4rem);
    border-width: 1.5px;
    border-radius: calc(var(--radius-large) - .5rem);
}

.screenshot-frame--plain .screenshot-frame__placeholder-note[b-bla5y8qqe0] {
    display: none;
}

/* A muted production note: the specific capture to shoot for this slot while no real asset exists. */
.screenshot-frame__capture[b-bla5y8qqe0] {
    max-width: 34ch;
    color: var(--text-muted);
    font-size: .68rem;
    line-height: 1.45;
    text-wrap: pretty;
}

.screenshot-frame__capture-label[b-bla5y8qqe0] {
    color: var(--text-secondary);
    font-weight: 800;
    letter-spacing: .01em;
}

.screenshot-frame__capture-label[b-bla5y8qqe0]::after {
    content: ": ";
    font-weight: 800;
}

/* Caption plate: the frame's permanent label, rendered in BOTH the placeholder and real-screenshot states so a
   real capture is never an unlabelled image. Serif title plus an optional one-line blurb. */
.screenshot-frame__caption[b-bla5y8qqe0] {
    display: grid;
    gap: .18rem;
    padding: .1rem .9rem .8rem;
}

.screenshot-frame__caption-title[b-bla5y8qqe0] {
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 560;
    line-height: 1.25;
    letter-spacing: normal;
}

.screenshot-frame__caption-blurb[b-bla5y8qqe0] {
    color: var(--text-secondary);
    font-size: .8rem;
    line-height: 1.45;
    text-wrap: pretty;
}

.screenshot-frame__play[b-bla5y8qqe0] {
    position: relative;
    display: grid;
    place-items: center;
    width: 3.6rem;
    height: 3.6rem;
    border: 1px solid var(--stroke-strong);
    border-radius: 50%;
    background: var(--surface-raised);
    box-shadow: 0 .35rem 1rem rgba(5, 4, 3, .18);
}

.screenshot-frame__play[b-bla5y8qqe0]::before {
    margin-left: .22rem;
    border-style: solid;
    border-width: .55rem 0 .55rem .95rem;
    border-color: transparent transparent transparent var(--accent);
    content: "";
}

.screenshot-lightbox[b-bla5y8qqe0] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: clamp(1rem, 3vw, 2rem);
    background: rgba(5, 4, 3, .82);
    cursor: zoom-out;
}

.screenshot-lightbox__panel[b-bla5y8qqe0] {
    position: relative;
    display: grid;
    gap: .55rem;
    width: fit-content;
    max-width: 96vw;
    max-height: 94vh;
    padding: .7rem;
    border: 1px solid var(--stroke-strong);
    border-radius: var(--radius-large);
    background: var(--surface-raised);
    box-shadow: 0 1.5rem 5rem rgba(0, 0, 0, .48);
    cursor: default;
}

.screenshot-lightbox__image[b-bla5y8qqe0] {
    display: block;
    width: auto;
    max-width: calc(96vw - 1.4rem);
    height: auto;
    max-height: 84vh;
    border-radius: calc(var(--radius-large) - .35rem);
    object-fit: contain;
}

.screenshot-lightbox__viewport[b-bla5y8qqe0] {
    overflow: hidden;
    border-radius: calc(var(--radius-large) - .35rem);
    line-height: 0;
}

.screenshot-lightbox__viewport:focus-visible[b-bla5y8qqe0] {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.screenshot-lightbox__viewport--magnified[b-bla5y8qqe0] {
    cursor: zoom-in;
}

.screenshot-lightbox__viewport--magnified .screenshot-lightbox__image[b-bla5y8qqe0] {
    pointer-events: none;
    transform: scale(2);
    transform-origin: var(--magnifier-origin-x) var(--magnifier-origin-y);
}

.screenshot-lightbox__close[b-bla5y8qqe0] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 1px solid var(--stroke-strong);
    border-radius: 50%;
    color: var(--text-primary);
    background: var(--surface-raised);
    box-shadow: var(--shadow-card);
    font: inherit;
    font-size: 1.45rem;
    line-height: 1;
    cursor: pointer;
}

.screenshot-lightbox__zoom[b-bla5y8qqe0] {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 2.5rem;
    padding: .45rem .75rem;
    border: 1px solid var(--stroke-strong);
    border-radius: 999px;
    color: var(--text-primary);
    background: var(--surface-raised);
    box-shadow: var(--shadow-card);
    font: inherit;
    font-size: .76rem;
    font-weight: 750;
    line-height: 1;
    cursor: pointer;
}

.screenshot-lightbox__footer[b-bla5y8qqe0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-inline: .25rem;
}

.screenshot-lightbox__zoom-icon[b-bla5y8qqe0] {
    position: relative;
    display: block;
    width: .85rem;
    height: .85rem;
    border: 1.5px solid currentColor;
    border-radius: 50%;
}

.screenshot-lightbox__zoom-icon[b-bla5y8qqe0]::after {
    position: absolute;
    right: -.35rem;
    bottom: -.2rem;
    width: .42rem;
    height: 1.5px;
    border-radius: 999px;
    background: currentColor;
    content: "";
    transform: rotate(45deg);
    transform-origin: left center;
}

.screenshot-lightbox__zoom[aria-pressed="true"][b-bla5y8qqe0],
.screenshot-lightbox__zoom:hover[b-bla5y8qqe0],
.screenshot-lightbox__zoom:focus-visible[b-bla5y8qqe0] {
    border-color: var(--accent);
    color: var(--accent);
    outline: none;
}

.screenshot-lightbox__close:hover[b-bla5y8qqe0],
.screenshot-lightbox__close:focus-visible[b-bla5y8qqe0] {
    border-color: var(--accent);
    color: var(--accent);
    outline: none;
}

.screenshot-lightbox__title[b-bla5y8qqe0] {
    color: var(--text-secondary);
    font-family: var(--font-display);
    font-size: .9rem;
    line-height: 1.4;
}

.screenshot-lightbox__zoom-help[b-bla5y8qqe0] {
    min-height: 1rem;
    padding-inline: .25rem;
    color: var(--text-muted);
    font-size: .7rem;
    line-height: 1.35;
}

@media (pointer: coarse) {
    .screenshot-frame__expand[b-bla5y8qqe0] {
        opacity: 1;
        transform: none;
    }

    .screenshot-lightbox__zoom[b-bla5y8qqe0],
    .screenshot-lightbox__zoom-help[b-bla5y8qqe0] {
        display: none;
    }
}

@media (max-width: 40rem) {
    .screenshot-frame__expand[b-bla5y8qqe0],
    .screenshot-lightbox__zoom[b-bla5y8qqe0],
    .screenshot-lightbox__zoom-help[b-bla5y8qqe0] {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .screenshot-frame__placeholder-note[b-bla5y8qqe0],
    .screenshot-frame__media-button[b-bla5y8qqe0],
    .screenshot-frame__expand[b-bla5y8qqe0] { transition: none; transform: none; }
}
/* /Components/StorefrontFooter.razor.rz.scp.css */
/* Mirrors the footer on Pages/Home.razor.css; see StorefrontHeader.razor.css for why this is a
   deliberate, bounded duplication rather than a shared stylesheet. */
.wordmark[b-o5domgsyyo] {
    display: inline-flex;
    align-items: center;
    gap: .68rem;
    width: fit-content;
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: normal;
    text-decoration: none;
}

.wordmark__mark[b-o5domgsyyo] {
    display: block;
    width: 2rem;
    height: 2rem;
}

.wordmark__mark img[b-o5domgsyyo] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.site-footer[b-o5domgsyyo] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 3rem;
    width: min(calc(100% - 2rem), var(--content-width));
    margin: 0 auto;
    padding-block: 3rem 2rem;
    border-top: 1px solid var(--stroke-strong);
}

.site-footer__brand p[b-o5domgsyyo] {
    margin: .75rem 0 0;
    color: var(--text-muted);
    font-size: .78rem;
}

.site-footer nav[b-o5domgsyyo] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: end;
    gap: 1.5rem;
}

.site-footer nav a[b-o5domgsyyo] {
    color: var(--text-secondary);
    font-size: .82rem;
    font-weight: 700;
    text-decoration: none;
}

.site-footer nav a:hover[b-o5domgsyyo] {
    color: var(--accent);
}

.site-footer__legal[b-o5domgsyyo] {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: 0;
    color: var(--text-muted);
    font-size: .68rem;
}


@media (max-width: 50rem) {
    .site-footer[b-o5domgsyyo] { grid-template-columns: 1fr; }
    .site-footer nav[b-o5domgsyyo] { justify-content: start; }
}

@media (max-width: 40rem) {
    .site-footer nav[b-o5domgsyyo] { display: grid; grid-template-columns: 1fr 1fr; }
}
/* /Components/StorefrontHeader.razor.rz.scp.css */
/* Mirrors the sticky header on Pages/Home.razor.css so the self-service pages (/thanks, /license,
   /license/reset) read as the same site. Blazor CSS isolation cannot share scoped rules across
   components, so this is an intentional, bounded duplication of just the chrome, not the whole page. */
.site-header[b-jrajuey4lm] {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--surface-app);
    border-bottom: 1px solid var(--stroke);
}

.site-header__inner[b-jrajuey4lm] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    width: min(calc(100% - 2rem), var(--content-width));
    min-height: 5.5rem;
    margin: 0 auto;
}

.wordmark[b-jrajuey4lm] {
    display: inline-flex;
    align-items: center;
    gap: .68rem;
    width: fit-content;
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: normal;
    text-decoration: none;
}

.wordmark__mark[b-jrajuey4lm] {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: .5rem;
    background: var(--accent-hover);
}

.wordmark__mark img[b-jrajuey4lm] {
    width: 82%;
    height: 82%;
    object-fit: contain;
}

.site-nav[b-jrajuey4lm] {
    display: flex;
    align-items: center;
    gap: clamp(1.25rem, 3vw, 2.5rem);
}

.site-nav a[b-jrajuey4lm],
.header-viewer-link[b-jrajuey4lm] {
    color: var(--text-secondary);
    font-size: .82rem;
    font-weight: 700;
    text-decoration: none;
}

.site-nav a:hover[b-jrajuey4lm],
.header-viewer-link:hover[b-jrajuey4lm] {
    color: var(--accent);
}

.site-nav a.button--primary[b-jrajuey4lm],
.site-nav a.button--primary:hover[b-jrajuey4lm] {
    color: var(--text-on-accent);
}

.header-viewer-link[b-jrajuey4lm] {
    justify-self: end;
    padding-bottom: .2rem;
    border-bottom: 1px solid var(--stroke-strong);
}

.header-actions[b-jrajuey4lm] {
    display: flex;
    align-items: center;
    justify-self: end;
    gap: 1rem;
}

@media (max-width: 50rem) {
    .site-header__inner[b-jrajuey4lm] {
        grid-template-columns: 1fr auto;
        row-gap: .75rem;
        padding-block: .85rem;
    }

    .site-nav[b-jrajuey4lm] {
        grid-column: 1 / -1;
        flex-wrap: wrap;
        gap: .75rem 1.1rem;
        padding-bottom: .15rem;
    }
}

@media (max-width: 40rem) {
    .site-header__inner[b-jrajuey4lm] { min-height: 4.75rem; }
    .header-viewer-link[b-jrajuey4lm] { font-size: .72rem; }
    .header-actions[b-jrajuey4lm] { gap: .6rem; }
}
/* /Components/ThemeToggleButton.razor.rz.scp.css */
/* Moved out of Pages/Home.razor.css so the pill has one styled source shared by Home's own header and
   Components/StorefrontHeader.razor (every other route). Blazor CSS isolation scopes rules to wherever
   the component that owns them renders, so co-locating this here (rather than duplicating it per host,
   the pattern StorefrontHeader.razor.css uses for the surrounding chrome it cannot share) covers both
   header markups from one file. */
.theme-toggle[b-pmm49wmiba] {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 2.25rem;
    padding: .42rem .65rem;
    border: 1px solid var(--stroke-strong);
    border-radius: 999px;
    color: var(--text-secondary);
    background: var(--surface-raised);
    font: inherit;
    font-size: .7rem;
    font-weight: 750;
    cursor: pointer;
}

.theme-toggle:hover[b-pmm49wmiba] {
    border-color: var(--accent);
    color: var(--text-primary);
    background: var(--surface-hover);
}

/* Touch ergonomics: mirrors Home.razor.css's own (pointer: coarse) bump for .menu-toggle. */
@media (pointer: coarse) {
    .theme-toggle[b-pmm49wmiba] { min-height: 2.75rem; }
}
/* /Components/ViewerTryCard.razor.rz.scp.css */
.viewer-try-card[b-ajbx6qacg3] {
    position: relative;
    display: grid;
    grid-template-columns: minmax(17rem, .9fr) minmax(20rem, 1.1fr);
    align-items: center;
    gap: clamp(2rem, 7vw, 7rem);
    overflow: hidden;
    padding: clamp(2rem, 6vw, 5rem);
    border: 1px solid var(--stroke);
    border-radius: var(--radius-large);
    color: var(--text-primary);
    background: var(--surface-header);
}

.viewer-try-card__art[b-ajbx6qacg3] {
    min-width: 0;
}

.viewer-try-card__art[b-ajbx6qacg3]  .screenshot-frame {
    width: 100%;
}

.viewer-try-card__copy[b-ajbx6qacg3] {
    position: relative;
    z-index: 1;
}

.viewer-try-card h2[b-ajbx6qacg3] {
    max-width: 14ch;
    margin: 0;
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 3.2vw, 2.9rem);
    font-weight: 580;
    letter-spacing: normal;
    line-height: 1.15;
    text-wrap: balance;
}

.viewer-try-card__description[b-ajbx6qacg3] {
    max-width: 36rem;
    margin: 1.3rem 0 0;
    color: var(--text-secondary);
    line-height: 1.7;
    text-wrap: pretty;
}

.viewer-try-card__action[b-ajbx6qacg3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 2.75rem;
    margin-top: 1.6rem;
    padding: .6rem .95rem;
    border: 1px solid var(--accent);
    border-radius: .55rem;
    color: var(--text-on-accent);
    background: var(--accent);
    font-size: .82rem;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
}

.viewer-try-card__action:hover[b-ajbx6qacg3] {
    border-color: var(--accent-hover);
    background: var(--accent-hover);
}

.viewer-try-card__action:focus-visible[b-ajbx6qacg3] {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.viewer-try-card__privacy[b-ajbx6qacg3] {
    max-width: 31rem;
    margin: .9rem 0 0;
    color: var(--text-muted);
    font-size: .76rem;
    line-height: 1.5;
    text-wrap: pretty;
}

@media (max-width: 50rem) {
    .viewer-try-card[b-ajbx6qacg3] { grid-template-columns: 1fr; }
}

@media (max-width: 35rem) {
    .viewer-try-card[b-ajbx6qacg3] { padding-inline: 1.25rem; }
    .viewer-try-card__action[b-ajbx6qacg3] { width: 100%; }
}
/* /Pages/Download.razor.rz.scp.css */
.download-page[b-ltz22lwz8m] {
    display: grid;
    align-content: start;
    width: min(calc(100% - 2rem), 40rem);
    margin: 0 auto;
    padding-block: clamp(4rem, 9vw, 7rem) clamp(4rem, 8vw, 6rem);
}

.section-kicker[b-ltz22lwz8m] {
    margin: 0 0 .6rem;
    color: var(--text-muted);
    font-family: var(--font-display);
    font-size: .9rem;
    font-style: italic;
    font-weight: 500;
}

.download-page h1[b-ltz22lwz8m] {
    margin: 0;
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: clamp(2.1rem, 4vw, 2.9rem);
    font-weight: 580;
    line-height: 1.15;
}

.download-page__lede[b-ltz22lwz8m] {
    max-width: 34rem;
    margin: 1.4rem 0 0;
    color: var(--text-secondary);
    font-size: 1.05rem;
    line-height: 1.72;
}

.download-page > .button[b-ltz22lwz8m],
.download-page__card[b-ltz22lwz8m] {
    margin-top: 2rem;
}

.download-page__platform-note[b-ltz22lwz8m] {
    margin: 2rem 0 0;
    color: var(--text-secondary);
    font-size: .86rem;
    line-height: 1.6;
}

.download-page__note[b-ltz22lwz8m] {
    margin: .8rem 0 0;
    color: var(--text-muted);
    font-size: .82rem;
}

.download-page__card[b-ltz22lwz8m] {
    padding: clamp(1.25rem, 3vw, 1.75rem);
    border: 1px solid var(--stroke);
    border-radius: var(--radius-large);
    background: var(--surface-header);
}

.download-page__card h2[b-ltz22lwz8m] {
    margin: 0 0 .7rem;
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 580;
}

.download-page__card p[b-ltz22lwz8m] {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.65;
}

.download-page__links[b-ltz22lwz8m] {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    margin-top: 2.5rem;
}

@media (max-width: 40rem) {
    .download-page .button[b-ltz22lwz8m] { width: 100%; }
}
/* /Pages/Home.razor.rz.scp.css */
/* Sticky header: a full-bleed bar (solid page background + hairline) so Features / Viewer / Video / Buy stay
   reachable after any in-page jump. The wordmark still goes home. Height stays modest; scroll-padding-top in
   app.css is bumped to clear it so anchor targets never hide beneath. */
.site-header[b-83mglu3rx7] {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--surface-app);
    border-bottom: 1px solid var(--stroke);
}

.site-header__inner[b-83mglu3rx7] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    width: min(calc(100% - 2rem), var(--content-width));
    min-height: 5.5rem;
    margin: 0 auto;
}

.wordmark[b-83mglu3rx7] {
    display: inline-flex;
    align-items: center;
    gap: .68rem;
    width: fit-content;
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: normal;
    text-decoration: none;
}

.wordmark__mark[b-83mglu3rx7] {
    display: block;
    width: 2rem;
    height: 2rem;
}

.wordmark__mark img[b-83mglu3rx7] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.wordmark__mark--header[b-83mglu3rx7] {
    display: grid;
    place-items: center;
    border-radius: .5rem;
    background: var(--accent-hover);
}

.wordmark__mark--header img[b-83mglu3rx7] {
    width: 82%;
    height: 82%;
}

.site-nav[b-83mglu3rx7] {
    display: flex;
    align-items: center;
    gap: clamp(1.25rem, 3vw, 2.5rem);
}

.site-nav a[b-83mglu3rx7],
.header-viewer-link[b-83mglu3rx7],
.site-footer nav a[b-83mglu3rx7] {
    color: var(--text-secondary);
    font-size: .82rem;
    font-weight: 700;
    text-decoration: none;
}

.site-nav a:hover[b-83mglu3rx7],
.header-viewer-link:hover[b-83mglu3rx7],
.site-footer nav a:hover[b-83mglu3rx7] {
    color: var(--accent);
}

.site-nav a.button--primary[b-83mglu3rx7],
.site-nav a.button--primary:hover[b-83mglu3rx7] {
    color: var(--text-on-accent);
}

.header-viewer-link[b-83mglu3rx7] {
    justify-self: end;
    padding-bottom: .2rem;
    border-bottom: 1px solid var(--stroke-strong);
}

.header-actions[b-83mglu3rx7] {
    display: flex;
    align-items: center;
    justify-self: end;
    gap: 1rem;
}

/* .theme-toggle styling now lives in Components/ThemeToggleButton.razor.css (Blazor CSS isolation
   scopes to wherever that component renders, so it is shared by this header and StorefrontHeader's). */

/* Mobile menu disclosure: hidden wherever the inline nav fits; below the 50rem breakpoint it replaces the nav.
   Styled as a sibling of the theme-toggle pill so the header actions read as one family. */
.menu-toggle[b-83mglu3rx7] {
    display: none;
    align-items: center;
    min-height: 2.25rem;
    padding: .42rem .8rem;
    border: 1px solid var(--stroke-strong);
    border-radius: 999px;
    color: var(--text-secondary);
    background: var(--surface-raised);
    font: inherit;
    font-size: .7rem;
    font-weight: 750;
    cursor: pointer;
}

.menu-toggle:hover[b-83mglu3rx7],
.menu-toggle[aria-expanded="true"][b-83mglu3rx7] {
    border-color: var(--accent);
    color: var(--text-primary);
    background: var(--surface-hover);
}

/* The dropdown panel lives inside the sticky header, so an open menu simply makes the sticky bar taller and
   the links stay reachable mid-scroll. Rendered only while open; the media query keeps it away from desktop. */
.mobile-nav[b-83mglu3rx7] {
    display: none;
}

.section-shell[b-83mglu3rx7] {
    width: min(calc(100% - 2rem), var(--content-width));
    margin-inline: auto;
}

/* One or two small, lowercase, italic kickers are the only "label above a heading" device left on the
   page — no uppercase tracked eyebrows anywhere. */
.section-kicker[b-83mglu3rx7] {
    margin: 0 0 .6rem;
    color: var(--text-muted);
    font-family: var(--font-display);
    font-size: .9rem;
    font-style: italic;
    font-weight: 500;
}

.hero[b-83mglu3rx7] {
    display: grid;
    grid-template-columns: minmax(0, .84fr) minmax(26rem, 1.16fr);
    align-items: start;
    gap: clamp(2.5rem, 5vw, 5rem);
    padding-block: clamp(3.5rem, 7vw, 6rem);
}

.hero__copy[b-83mglu3rx7] {
    position: relative;
    z-index: 2;
}

.hero h1[b-83mglu3rx7] {
    max-width: 18ch;
    margin: 0;
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 4.2vw, 3.75rem);
    font-weight: 580;
    letter-spacing: normal;
    line-height: 1.15;
    text-wrap: balance;
}

.hero__tagline[b-83mglu3rx7] {
    max-width: 28rem;
    margin: .65rem 0 0;
    color: var(--text-muted);
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 1.8vw, 1.45rem);
    line-height: 1.35;
    text-wrap: balance;
}

.hero__lede[b-83mglu3rx7] {
    max-width: 35rem;
    margin: 1.5rem 0 0;
    color: var(--text-secondary);
    font-size: clamp(1rem, 1.5vw, 1.15rem);
    line-height: 1.72;
    text-wrap: pretty;
}

.hero__lede--second[b-83mglu3rx7] {
    margin-top: .9rem;
    color: var(--text-muted);
}

.hero__actions[b-83mglu3rx7] {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 2rem;
}

.hero__visual[b-83mglu3rx7] {
    position: relative;
    padding: 0;
}

/* The hero summarizes the working loop: place the story, write it, then analyze its shape. */
.hero-loop[b-83mglu3rx7] {
    --hero-loop-card-height: clamp(15rem, 24vw, 19rem);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .75rem;
    width: 100%;
}

.hero-loop__workspace[b-83mglu3rx7],
.hero-loop__support[b-83mglu3rx7] {
    width: 100%;
    min-width: 0;
}

.hero-loop__support[b-83mglu3rx7] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: .75rem;
}

.hero-loop[b-83mglu3rx7]  .screenshot-frame {
    width: 100%;
    height: var(--hero-loop-card-height);
    align-self: stretch;
    box-shadow: var(--shadow-card);
}

.hero-loop[b-83mglu3rx7]  .screenshot-frame__media {
    flex: 1 1 0;
    min-height: 0;
}

.hero-loop[b-83mglu3rx7]  .screenshot-frame__caption {
    flex: 0 0 auto;
}

.hero-loop[b-83mglu3rx7]  .screenshot-frame__media-button:hover,
.hero-loop[b-83mglu3rx7]  .screenshot-frame__media-button:focus-visible {
    transform: none;
}

.feature-intro[b-83mglu3rx7] {
    display: grid;
    gap: .75rem;
    padding-block: clamp(4.5rem, 8vw, 7rem) clamp(2rem, 4vw, 3rem);
}

.feature-intro h2[b-83mglu3rx7],
.demo h2[b-83mglu3rx7],
.pricing h2[b-83mglu3rx7] {
    margin: 0;
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 3.2vw, 2.9rem);
    font-weight: 580;
    letter-spacing: normal;
    line-height: 1.15;
    text-wrap: balance;
}

.feature-intro p[b-83mglu3rx7] {
    max-width: 35rem;
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.75;
}

/* Audience wayfinding: four calm "this part is for you" cards routing each kind of writer to their feature
   anchors. Sits between the intro and the feature story; collapses 4 -> 2 -> 1 at the shared breakpoints. */
.audience[b-83mglu3rx7] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 1.4rem);
    padding-bottom: clamp(2.75rem, 5vw, 4.25rem);
}

.audience__kicker[b-83mglu3rx7] {
    grid-column: 1 / -1;
    margin: 0;
}

.audience-card[b-83mglu3rx7] {
    display: grid;
    align-content: start;
    gap: .7rem;
    padding: clamp(1.15rem, 2.5vw, 1.5rem);
    border: 1px solid var(--stroke);
    border-radius: var(--radius-large);
    background: var(--surface-header);
}

/* A small, flat, per-audience motif — one consistent stroke set across the four cards, muted base with a
   single accent element. Purely decorative (aria-hidden); flat palette fills only, no gradients. */
.audience-card__motif[b-83mglu3rx7] {
    display: block;
    width: 3.5rem;
    height: 2.25rem;
    margin-bottom: .05rem;
}

.audience-card__motif svg[b-83mglu3rx7] {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.audience-card__motif .m-stroke[b-83mglu3rx7] {
    fill: none;
    stroke: var(--stroke-strong);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.audience-card__motif .m-accent[b-83mglu3rx7] {
    stroke: var(--accent);
}

.audience-card__motif .m-node[b-83mglu3rx7] {
    fill: var(--stroke-strong);
}

.audience-card__motif .m-node--accent[b-83mglu3rx7] {
    fill: var(--accent);
}

.audience-card h3[b-83mglu3rx7] {
    margin: 0;
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 580;
    letter-spacing: normal;
    line-height: 1.2;
}

.audience-card p[b-83mglu3rx7] {
    margin: 0;
    color: var(--text-secondary);
    font-size: .85rem;
    line-height: 1.6;
    text-wrap: pretty;
}

.audience-card__links[b-83mglu3rx7] {
    display: grid;
    gap: .35rem;
    margin: .2rem 0 0;
    padding: 0;
    list-style: none;
}

.audience-card__links a[b-83mglu3rx7] {
    width: fit-content;
    color: var(--accent);
    font-size: .82rem;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.audience-card__links a:hover[b-83mglu3rx7] {
    border-bottom-color: var(--accent);
}

.feature-story[b-83mglu3rx7] {
    display: grid;
}

.feature-band[b-83mglu3rx7] {
    display: grid;
    grid-template-columns: minmax(15rem, .4fr) minmax(0, .6fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 5rem);
    padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
}

.feature-band--reverse .feature-band__copy[b-83mglu3rx7] { order: 2; }
.feature-band--reverse .feature-band__media[b-83mglu3rx7] { order: 1; }

/* Give the two-up planning workflow the full content width; each capture needs enough room for its editor UI. */
.feature-band--plan[b-83mglu3rx7] {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.5rem, 3vw, 2.25rem);
}

.feature-band--plan .feature-band__copy[b-83mglu3rx7] {
    order: 1;
    max-width: 44rem;
}

.feature-band--plan .feature-band__media[b-83mglu3rx7] {
    order: 2;
    width: 88%;
    margin-inline: auto;
}

.feature-band--plan .feature-band__duo[b-83mglu3rx7] {
    gap: clamp(1rem, 2vw, 1.5rem);
}

.feature-band__copy[b-83mglu3rx7] {
    max-width: 30rem;
}

.feature-band__copy h3[b-83mglu3rx7] {
    max-width: 16ch;
    margin: 0;
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 2.4vw, 2.15rem);
    font-weight: 580;
    letter-spacing: normal;
    line-height: 1.15;
    text-wrap: balance;
}

.feature-band__copy p[b-83mglu3rx7] {
    max-width: 31rem;
    margin: 1.1rem 0 0;
    color: var(--text-secondary);
    font-size: .94rem;
    line-height: 1.7;
    text-wrap: pretty;
}

.feature-band__media[b-83mglu3rx7] {
    min-width: 0;
}

.feature-band__media[b-83mglu3rx7]  .screenshot-frame {
    width: 100%;
}

.feature-band__media[b-83mglu3rx7]  .screenshot-frame--aspect-four-to-five {
    width: min(100%, 24rem);
    margin-inline: auto;
}

/* A two-up media pair inside an anchor row (reading order vs story order): two compact slots side by side,
   sized squarer than a single anchor frame. */
.feature-band__duo[b-83mglu3rx7] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 1rem;
}

.feature-band__duo[b-83mglu3rx7]  .screenshot-frame {
    width: 100%;
}

.feature-band--goals[b-83mglu3rx7] {
    padding-block: clamp(2.5rem, 5vw, 4rem);
}

.feature-band--goals .feature-band__media[b-83mglu3rx7]  .screenshot-frame {
    width: 100%;
}

/* Workspace cluster: a labeled lead card over two plainer cards — a 1-big-2-small shape that reads as one
   surface, distinct from the full-width anchor bands above and below it. */
.feature-cluster[b-83mglu3rx7] {
    padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
}

.feature-cluster__head[b-83mglu3rx7] {
    margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.feature-cluster__head h3[b-83mglu3rx7] {
    margin: 0;
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.5vw, 2.05rem);
    font-weight: 580;
    letter-spacing: normal;
    line-height: 1.15;
    text-wrap: balance;
}

.feature-cluster__intro[b-83mglu3rx7] {
    max-width: 64ch;
    margin: .75rem 0 0;
    color: var(--text-secondary);
    line-height: 1.65;
    text-wrap: pretty;
}

.feature-cluster__grid[b-83mglu3rx7] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.5rem, 3vw, 2.25rem);
}

.cluster-card--lead[b-83mglu3rx7] {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3rem);
}

.cluster-card:not(.cluster-card--lead)[b-83mglu3rx7] {
    display: grid;
    align-content: start;
    gap: 1.15rem;
}

.cluster-card__copy h4[b-83mglu3rx7] {
    margin: 0;
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 1.9vw, 1.6rem);
    font-weight: 580;
    letter-spacing: normal;
    line-height: 1.18;
    text-wrap: balance;
}

.cluster-card__copy p[b-83mglu3rx7] {
    max-width: 34rem;
    margin: .85rem 0 0;
    color: var(--text-secondary);
    font-size: .9rem;
    line-height: 1.65;
    text-wrap: pretty;
}

.cluster-card__media[b-83mglu3rx7] {
    min-width: 0;
}

.cluster-card__media[b-83mglu3rx7]  .screenshot-frame {
    width: 100%;
}

.cluster-card--compact .cluster-card__copy[b-83mglu3rx7],
.cluster-card--compact .cluster-card__media[b-83mglu3rx7] {
    width: min(100%, 22rem);
    justify-self: center;
}

/* World pair: two titled columns, one carrying a small graph+map duo, the other a single lore frame — sized
   differently on purpose so the pair does not echo the anchor bands. */
.feature-pair[b-83mglu3rx7] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
}

.pair-card[b-83mglu3rx7] {
    min-width: 0;
}

.pair-card h3[b-83mglu3rx7] {
    margin: 0;
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2.1vw, 1.85rem);
    font-weight: 580;
    letter-spacing: normal;
    line-height: 1.15;
    text-wrap: balance;
}

.pair-card p[b-83mglu3rx7] {
    max-width: 34rem;
    margin: 1rem 0 0;
    color: var(--text-secondary);
    font-size: .92rem;
    line-height: 1.68;
    text-wrap: pretty;
}

.pair-card > p[b-83mglu3rx7] {
    min-height: 6.4rem;
}

.pair-card__duo[b-83mglu3rx7] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    gap: 1rem;
    margin-top: 1.6rem;
}

.pair-card__media[b-83mglu3rx7] {
    margin-top: 1.6rem;
}

.pair-card__duo[b-83mglu3rx7]  .screenshot-frame,
.pair-card__media[b-83mglu3rx7]  .screenshot-frame {
    width: 100%;
    height: 100%;
    align-self: stretch;
}

.pair-card__duo[b-83mglu3rx7]  .screenshot-frame__caption {
    min-height: 4.25rem;
}

/* Feature chapters: four titled breaks (Write / Arrange / World / Check) that split the long feature scroll
   into short chapters. The chapter head — an accent numeral beside a serif title over a strong rule — carries
   the rhythm, so the rows inside each chapter drop their own hairlines and simply breathe. */
.feature-chapter[b-83mglu3rx7] {
    border-top: 1px solid var(--stroke-strong);
}

.feature-chapter__head[b-83mglu3rx7] {
    display: flex;
    align-items: baseline;
    gap: clamp(.85rem, 2vw, 1.35rem);
    padding-top: clamp(2.5rem, 5vw, 4rem);
    padding-bottom: clamp(.4rem, 1.5vw, 1rem);
}

.feature-chapter__num[b-83mglu3rx7] {
    color: var(--accent);
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 2.2vw, 1.75rem);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.feature-chapter__title[b-83mglu3rx7] {
    margin: 0;
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.8vw, 2.2rem);
    font-weight: 580;
    letter-spacing: normal;
    line-height: 1.1;
}

/* Analytics closing section: a warm lead row over a compact grid of plain tiles. Kept last and kept calm —
   it reads as "there when you're curious," not a cockpit. */
.feature-analytics[b-83mglu3rx7] {
    padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
}

.feature-analytics__head[b-83mglu3rx7] {
    display: grid;
    grid-template-columns: minmax(15rem, .4fr) minmax(0, .6fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 5rem);
}

.feature-analytics__tiles[b-83mglu3rx7] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.25rem, 2.5vw, 2rem);
    margin: clamp(2rem, 4vw, 3rem) 0 0;
    padding: 0;
    list-style: none;
}

.analytics-tile[b-83mglu3rx7] {
    display: grid;
    align-content: start;
    gap: .75rem;
}

.analytics-tile[b-83mglu3rx7]  .screenshot-frame {
    width: 100%;
}

.analytics-tile p[b-83mglu3rx7] {
    margin: 0;
    color: var(--text-secondary);
    font-size: .84rem;
    line-height: 1.55;
    text-wrap: pretty;
}

/* Whole-story showcase: a wider, cinematic slot so the zoom-out moment feels special. Lives inside the
   Arrange chapter, so it carries no chapter rule of its own. */
.feature-showcase[b-83mglu3rx7] {
    display: grid;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    padding-block: clamp(2rem, 4vw, 3.25rem);
}

.feature-showcase__copy[b-83mglu3rx7] {
    max-width: 46rem;
}

.feature-showcase h3[b-83mglu3rx7] {
    margin: 0;
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 3vw, 2.5rem);
    font-weight: 580;
    letter-spacing: normal;
    line-height: 1.14;
    text-wrap: balance;
}

.feature-showcase p[b-83mglu3rx7] {
    max-width: 44rem;
    margin: 1.1rem 0 0;
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.7;
    text-wrap: pretty;
}

.feature-showcase__media[b-83mglu3rx7]  .screenshot-frame {
    width: 75%;
    margin-inline: auto;
}

/* Corkboard aside: a compact note beside a small slot — one honest mention without a full band. */
.feature-aside[b-83mglu3rx7] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(14rem, .5fr);
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3rem);
    padding-block: clamp(1.5rem, 3vw, 2.25rem);
}

.feature-aside__copy p[b-83mglu3rx7] {
    max-width: 34rem;
    margin: 0;
    color: var(--text-secondary);
    font-size: .94rem;
    line-height: 1.7;
    text-wrap: pretty;
}

.feature-aside__media[b-83mglu3rx7]  .screenshot-frame {
    width: 100%;
}

.demo-band[b-83mglu3rx7] {
    background: var(--surface-header);
    border-block: 1px solid var(--stroke);
}

.demo[b-83mglu3rx7] {
    display: grid;
    justify-items: start;
    padding-block: clamp(4.5rem, 8vw, 7rem);
}

.demo__lede[b-83mglu3rx7] {
    max-width: 38rem;
    margin: 1.1rem 0 2.5rem;
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.7;
    text-wrap: pretty;
}

.demo[b-83mglu3rx7]  .screenshot-frame {
    width: 100%;
}

.demo__thumbs[b-83mglu3rx7] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    width: 100%;
    margin-top: 1.5rem;
}

.demo__thumbs[b-83mglu3rx7]  .screenshot-frame {
    width: 100%;
}

/* Elevated sample invite: sits high (right after the audience cards) as the key "try it now" conversion
   asset, so it stays compact — an invitation, not a wall. */
.sample[b-83mglu3rx7] {
    padding-block: clamp(2.5rem, 5vw, 3.75rem);
}

.pricing[b-83mglu3rx7] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(23rem, .7fr);
    align-items: center;
    gap: clamp(3rem, 8vw, 7rem);
    padding-block: clamp(5rem, 9vw, 8rem);
}

.pricing__intro p[b-83mglu3rx7] {
    max-width: 34rem;
    margin: 1.35rem 0 0;
    color: var(--text-secondary);
    line-height: 1.7;
}

.pricing__cards[b-83mglu3rx7] {
    display: grid;
    gap: 1rem;
}

.pricing__cards[b-83mglu3rx7] {
    display: grid;
    gap: 1rem;
}

.price-card[b-83mglu3rx7] {
    padding: clamp(1.5rem, 4vw, 2.6rem);
    border: 1px solid var(--stroke-strong);
    border-radius: var(--radius-large);
    background: var(--surface-raised);
    box-shadow: var(--shadow-card);
}

.price-card__heading[b-83mglu3rx7] {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 1rem;
}

.price-card__heading h3[b-83mglu3rx7] {
    margin: 0;
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 580;
    letter-spacing: normal;
    line-height: 1.15;
    text-wrap: balance;
}

.price-card__badge[b-83mglu3rx7] {
    padding: .38rem .55rem;
    border-radius: 999px;
    color: var(--accent);
    background: var(--accent-soft);
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.price-card__price[b-83mglu3rx7] {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    margin: 2rem 0;
}

.price-card__price-amount[b-83mglu3rx7] {
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 620;
    letter-spacing: normal;
}

.price-card__price-before[b-83mglu3rx7] {
    color: var(--text-muted);
    font-size: .88rem;
    text-decoration: line-through;
}

.price-card__price-before[b-83mglu3rx7] {
    color: var(--text-muted);
    font-size: .88rem;
    text-decoration: line-through;
}

.price-card__price-term[b-83mglu3rx7] {
    color: var(--text-secondary);
    font-size: .78rem;
}

.price-card ul[b-83mglu3rx7] {
    display: grid;
    gap: .8rem;
    margin: 0 0 2rem;
    padding: 0;
    list-style: none;
}

.price-card li[b-83mglu3rx7] {
    position: relative;
    padding-left: 1.5rem;
    color: var(--text-secondary);
    font-size: .86rem;
    line-height: 1.5;
}

/* CSS-drawn tick (no emoji): a rotated corner of two accent borders forms the checkmark. */
.price-card li[b-83mglu3rx7]::before {
    position: absolute;
    top: .2rem;
    left: .35rem;
    box-sizing: border-box;
    width: .36rem;
    height: .62rem;
    border-right: 2px solid var(--accent-hover);
    border-bottom: 2px solid var(--accent-hover);
    transform: rotate(45deg);
    content: "";
}

.price-card__fine-print[b-83mglu3rx7] {
    margin: 1rem 0 0;
    color: var(--text-muted);
    font-size: .69rem;
    line-height: 1.55;
    text-align: center;
}

.price-card__fine-print a[b-83mglu3rx7],
.launch-list-card a[b-83mglu3rx7] {
    color: var(--accent);
}

.launch-list-card > p[b-83mglu3rx7] {
    color: var(--text-secondary);
    line-height: 1.65;
}

.price-card__checkout-message[b-83mglu3rx7] {
    margin: 1rem 0 0;
    padding: .7rem .8rem;
    border: 1px solid var(--stroke-strong);
    border-radius: .5rem;
    color: var(--text-primary);
    background: var(--surface-header);
    font-size: .75rem;
    line-height: 1.5;
}

.price-card__updates-note[b-83mglu3rx7] {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.site-footer[b-83mglu3rx7] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 3rem;
    width: min(calc(100% - 2rem), var(--content-width));
    margin: 0 auto;
    padding-block: 3rem 2rem;
    border-top: 1px solid var(--stroke-strong);
}

.site-footer__brand p[b-83mglu3rx7] {
    margin: .75rem 0 0;
    color: var(--text-muted);
    font-size: .78rem;
}

.site-footer nav[b-83mglu3rx7] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: end;
    gap: 1.5rem;
}


@media (max-width: 68rem) {
    .hero[b-83mglu3rx7] { grid-template-columns: 1fr; min-height: auto; }
    .hero__copy[b-83mglu3rx7] { max-width: 48rem; }
    .hero h1[b-83mglu3rx7] { max-width: 20ch; }
    .hero__visual[b-83mglu3rx7] { width: min(100%, 52rem); margin: 0 auto; }
    .feature-band[b-83mglu3rx7],
    .feature-analytics__head[b-83mglu3rx7] { grid-template-columns: minmax(13rem, .42fr) minmax(0, .58fr); gap: 2rem; }
    .cluster-card--lead[b-83mglu3rx7] { gap: 2rem; }
    .audience[b-83mglu3rx7],
    .feature-analytics__tiles[b-83mglu3rx7] { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 50rem) {
    .feature-showcase__media[b-83mglu3rx7]  .screenshot-frame { width: 100%; }
    .site-header__inner[b-83mglu3rx7] { grid-template-columns: 1fr auto; }
    .site-nav[b-83mglu3rx7] { display: none; }
    .menu-toggle[b-83mglu3rx7] { display: inline-flex; }
    .mobile-nav[b-83mglu3rx7] {
        display: grid;
        width: min(calc(100% - 2rem), var(--content-width));
        margin: 0 auto;
        padding-bottom: .9rem;
    }
    .mobile-nav a[b-83mglu3rx7] {
        display: flex;
        align-items: center;
        gap: .5rem;
        min-height: 2.9rem;
        border-top: 1px solid var(--stroke);
        color: var(--text-secondary);
        font-size: .92rem;
        font-weight: 700;
        text-decoration: none;
    }
    .mobile-nav a:first-child[b-83mglu3rx7] { border-top: 0; }
    .mobile-nav a:hover[b-83mglu3rx7] { color: var(--accent); }
    .mobile-nav__viewer[b-83mglu3rx7] { color: var(--accent); }
    .pricing[b-83mglu3rx7],
    .feature-pair[b-83mglu3rx7],
    .feature-cluster__grid[b-83mglu3rx7],
    .cluster-card--lead[b-83mglu3rx7],
    .feature-analytics__head[b-83mglu3rx7],
    .feature-aside[b-83mglu3rx7],
    .feature-band[b-83mglu3rx7] { grid-template-columns: 1fr; }
    .feature-band--reverse .feature-band__copy[b-83mglu3rx7] { order: 1; }
    .feature-band--reverse .feature-band__media[b-83mglu3rx7] { order: 2; }
    .feature-band--plan .feature-band__media[b-83mglu3rx7] { width: 100%; }
    .feature-band__copy[b-83mglu3rx7] { max-width: 40rem; }
    .cluster-card__copy p[b-83mglu3rx7],
    .pair-card p[b-83mglu3rx7] { max-width: 44rem; }
    .pair-card > p[b-83mglu3rx7] { min-height: 0; }
    .price-card[b-83mglu3rx7] { width: min(100%, 34rem); }
    .site-footer[b-83mglu3rx7] { grid-template-columns: 1fr; }
    .site-footer nav[b-83mglu3rx7] { justify-content: start; }
    .demo__thumbs[b-83mglu3rx7] { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 40rem) {
    .site-header__inner[b-83mglu3rx7] { min-height: 4.75rem; }
    /* At phone widths the viewer link moves into the mobile menu; the header keeps wordmark + two pills. */
    .header-viewer-link[b-83mglu3rx7] { display: none; }
    .header-actions[b-83mglu3rx7] { gap: .6rem; }
    .hero[b-83mglu3rx7] { padding-top: 2rem; }
    .hero__actions[b-83mglu3rx7] { align-items: stretch; flex-direction: column; }
    .button[b-83mglu3rx7] { width: 100%; }
    .feature-band[b-83mglu3rx7] { padding-block: 2.25rem; }
    .feature-cluster[b-83mglu3rx7],
    .feature-pair[b-83mglu3rx7] { padding-block: 2.25rem; }
    .pair-card__duo[b-83mglu3rx7],
    .feature-band__duo[b-83mglu3rx7] { grid-template-columns: 1fr; }
    .audience[b-83mglu3rx7],
    .feature-analytics__tiles[b-83mglu3rx7] { grid-template-columns: 1fr; }
    .demo__thumbs[b-83mglu3rx7] { grid-template-columns: 1fr; }
    .price-card__heading[b-83mglu3rx7] { align-items: start; flex-direction: column; }
    .site-footer nav[b-83mglu3rx7] { display: grid; grid-template-columns: 1fr 1fr; }
    /* Stack the loop so app details stay legible and relax decorative tilts near the viewport edge. */
    .hero-loop[b-83mglu3rx7] { --hero-loop-card-height: clamp(14rem, 78vw, 18rem); }
    .hero-loop__support[b-83mglu3rx7] { grid-template-columns: 1fr; }
    /* The cinematic 12/5 zoom-out slot turns into a letterbox sliver on a phone; give it a taller ratio there. */
}

/* Touch ergonomics: on coarse pointers, lift the small header pills and the bare text links up to a
   comfortable tap size without changing how they read on desktop. */
@media (pointer: coarse) {
    .menu-toggle[b-83mglu3rx7] { min-height: 2.75rem; }
    .header-viewer-link[b-83mglu3rx7],
    .site-footer nav a[b-83mglu3rx7],
    .audience-card__links a[b-83mglu3rx7] { padding-block: .4rem; }
}

/* Commercial trust surfaces near the buying decision. */
.purchase-facts[b-83mglu3rx7] { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; padding-block: 0 3.5rem; }
.purchase-facts p[b-83mglu3rx7] { display: grid; gap: .2rem; margin: 0; padding: 1.15rem 1.25rem; background: var(--surface-header); border: 1px solid var(--stroke); }
.purchase-facts strong[b-83mglu3rx7] { color: var(--text-primary); font-family: var(--font-display); font-size: 1rem; }
.purchase-facts span[b-83mglu3rx7] { color: var(--text-muted); font-size: .72rem; }
.ownership[b-83mglu3rx7] { padding-block: clamp(3.5rem, 7vw, 5.5rem); border-top: 1px solid var(--stroke); }
.ownership h2[b-83mglu3rx7], .faq h2[b-83mglu3rx7] { margin: 0; color: var(--text-primary); font-family: var(--font-display); font-size: clamp(1.9rem, 3.2vw, 2.9rem); font-weight: 580; line-height: 1.15; text-wrap: balance; }
.ownership__copy p[b-83mglu3rx7], .faq__intro > p:last-child[b-83mglu3rx7] { color: var(--text-secondary); line-height: 1.7; }
.ownership[b-83mglu3rx7] { display: grid; grid-template-columns: minmax(16rem, .7fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); }
.ownership__copy p:first-child[b-83mglu3rx7] { margin-top: 0; }
.ownership__copy[b-83mglu3rx7] { max-width: 42rem; }
.faq[b-83mglu3rx7] { display: grid; grid-template-columns: minmax(15rem, .45fr) minmax(0, 1fr); gap: clamp(2rem, 7vw, 6rem); padding-block: clamp(4rem, 8vw, 7rem); border-top: 1px solid var(--stroke); }
.faq__list[b-83mglu3rx7] { border-top: 1px solid var(--stroke-strong); }
.faq details[b-83mglu3rx7] { border-bottom: 1px solid var(--stroke-strong); }
.faq summary[b-83mglu3rx7] { padding: 1.15rem .25rem; color: var(--text-primary); font-weight: 750; cursor: pointer; }
.faq details p[b-83mglu3rx7] { margin: 0; padding: 0 .25rem 1.25rem; color: var(--text-secondary); line-height: 1.7; }
.faq a[b-83mglu3rx7] { color: var(--accent); }
.site-footer__legal[b-83mglu3rx7] { grid-column: 1 / -1; margin: 0; color: var(--text-muted); font-size: .68rem; }

@media (max-width: 68rem) { .purchase-facts[b-83mglu3rx7] { grid-template-columns: 1fr 1fr; } }
@media (max-width: 50rem) {
    .feature-showcase__media[b-83mglu3rx7]  .screenshot-frame { width: 100%; } .ownership[b-83mglu3rx7], .faq[b-83mglu3rx7] { grid-template-columns: 1fr; } }
@media (max-width: 40rem) { .purchase-facts[b-83mglu3rx7] { grid-template-columns: 1fr; } }
.price-card__owner-upgrade[b-83mglu3rx7] {
    display: grid;
    gap: .35rem;
    margin: 0 0 1rem;
    padding: .9rem 1rem;
    border: 1px solid var(--accent);
    border-radius: .6rem;
    color: var(--text-secondary);
    background: var(--accent-soft);
    font-size: .82rem;
    line-height: 1.55;
}

.price-card__owner-upgrade strong[b-83mglu3rx7] {
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: .95rem;
    font-weight: 620;
}

.price-card__owner-upgrade a[b-83mglu3rx7] {
    color: var(--accent);
    font-weight: 700;
}
.price-card__agreement[b-83mglu3rx7] { margin: 0 0 1rem; color: var(--text-muted); font-size: .72rem; line-height: 1.55; }
.price-card__agreement a[b-83mglu3rx7] { color: var(--accent); }
/* /Pages/License.razor.rz.scp.css */
.license-page[b-79fcbggfmo] {
    display: grid;
    align-content: start;
    width: min(calc(100% - 2rem), 52rem);
    margin: 0 auto;
    padding-block: clamp(3.5rem, 8vw, 6rem) clamp(4rem, 8vw, 6rem);
}

.section-kicker[b-79fcbggfmo] {
    margin: 0 0 .6rem;
    color: var(--text-muted);
    font-family: var(--font-display);
    font-size: .9rem;
    font-style: italic;
    font-weight: 500;
}

.license-page h1[b-79fcbggfmo] {
    max-width: 18ch;
    margin: 0;
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: clamp(2.1rem, 4vw, 2.9rem);
    font-weight: 580;
    letter-spacing: normal;
    line-height: 1.15;
    text-wrap: balance;
}

.license-page__lede[b-79fcbggfmo] {
    max-width: 40rem;
    margin: 1.4rem 0 0;
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.7;
    text-wrap: pretty;
}

.license-page__cards[b-79fcbggfmo] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.25rem, 3vw, 2rem);
    margin: 2.5rem 0 2.5rem;
}

.license-card[b-79fcbggfmo] {
    display: grid;
    align-content: start;
    gap: .35rem;
    padding: clamp(1.35rem, 3vw, 1.85rem);
    border: 1px solid var(--stroke-strong);
    border-radius: var(--radius-large);
    background: var(--surface-raised);
    box-shadow: var(--shadow-card);
}

.license-card h2[b-79fcbggfmo] {
    margin: 0;
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 580;
    letter-spacing: normal;
}

.license-card > p[b-79fcbggfmo] {
    margin: .5rem 0 1.1rem;
    color: var(--text-secondary);
    font-size: .86rem;
    line-height: 1.6;
    text-wrap: pretty;
}

.license-card form[b-79fcbggfmo] {
    display: grid;
    gap: .5rem;
}

.license-card label[b-79fcbggfmo] {
    color: var(--text-secondary);
    font-size: .74rem;
    font-weight: 700;
}

.license-card input[b-79fcbggfmo] {
    min-height: 2.85rem;
    padding: 0 .9rem;
    border: 1px solid var(--stroke-strong);
    border-radius: .55rem;
    color: var(--text-primary);
    background: var(--surface-app);
    font: inherit;
    font-size: .9rem;
}

.license-card input:focus-visible[b-79fcbggfmo] {
    outline: 3px solid var(--accent);
    outline-offset: 1px;
}

.license-card input:disabled[b-79fcbggfmo] {
    opacity: .62;
}

.license-card button[b-79fcbggfmo] {
    margin-top: .35rem;
}

.license-card__field-message[b-79fcbggfmo] {
    margin: 0;
    color: var(--accent);
    font-size: .74rem;
    font-weight: 700;
}

.license-card__result[b-79fcbggfmo] {
    margin: 1rem 0 0;
    padding: .7rem .8rem;
    border: 1px solid var(--stroke-strong);
    border-radius: .5rem;
    color: var(--text-primary);
    background: var(--surface-header);
    font-size: .78rem;
    line-height: 1.5;
}

@media (max-width: 50rem) {
    .license-page__cards[b-79fcbggfmo] { grid-template-columns: 1fr; }
}

@media (max-width: 40rem) {
    .license-page .button:not(.button--full)[b-79fcbggfmo] {
        width: 100%;
    }
}

.license-card--upgrade[b-79fcbggfmo] {
    max-width: 42rem;
    margin-top: 2rem;
}
/* /Pages/LicenseReset.razor.rz.scp.css */
.license-reset-page[b-vftqvtujoc] {
    display: grid;
    align-content: start;
    justify-items: start;
    width: min(calc(100% - 2rem), 38rem);
    margin: 0 auto;
    padding-block: clamp(4rem, 9vw, 7rem) clamp(4rem, 8vw, 6rem);
}

.section-kicker[b-vftqvtujoc] {
    margin: 0 0 .6rem;
    color: var(--text-muted);
    font-family: var(--font-display);
    font-size: .9rem;
    font-style: italic;
    font-weight: 500;
}

.license-reset-page h1[b-vftqvtujoc] {
    max-width: 20ch;
    margin: 0;
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 2.7rem);
    font-weight: 580;
    letter-spacing: normal;
    line-height: 1.15;
    text-wrap: balance;
}

.license-reset-page__lede[b-vftqvtujoc] {
    max-width: 32rem;
    margin: 1.3rem 0 1.9rem;
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.72;
    text-wrap: pretty;
}

.license-reset-page__lede a[b-vftqvtujoc] {
    color: var(--accent);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.license-reset-page__lede a:hover[b-vftqvtujoc] {
    border-bottom-color: var(--accent);
}

@media (max-width: 40rem) {
    .license-reset-page .button[b-vftqvtujoc] {
        width: 100%;
    }
}
/* /Pages/Thanks.razor.rz.scp.css */
.thanks-page[b-ty9g0zx2qb] {
    display: grid;
    align-content: start;
    width: min(calc(100% - 2rem), 40rem);
    margin: 0 auto;
    padding-block: clamp(4rem, 9vw, 7rem) clamp(4rem, 8vw, 6rem);
}

.section-kicker[b-ty9g0zx2qb] {
    margin: 0 0 .6rem;
    color: var(--text-muted);
    font-family: var(--font-display);
    font-size: .9rem;
    font-style: italic;
    font-weight: 500;
}

.thanks-page h1[b-ty9g0zx2qb] {
    max-width: 18ch;
    margin: 0;
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: clamp(2.1rem, 4vw, 2.9rem);
    font-weight: 580;
    letter-spacing: normal;
    line-height: 1.15;
    text-wrap: balance;
}

.thanks-page__lede[b-ty9g0zx2qb] {
    max-width: 34rem;
    margin: 1.4rem 0 0;
    color: var(--text-secondary);
    font-size: 1.05rem;
    line-height: 1.72;
    text-wrap: pretty;
}

.thanks-page__card[b-ty9g0zx2qb] {
    width: min(100%, 32rem);
    margin: 2.5rem 0 2.5rem;
    padding: clamp(1.25rem, 3vw, 1.75rem);
    border: 1px solid var(--stroke);
    border-radius: var(--radius-large);
    background: var(--surface-header);
}

.thanks-page__card h2[b-ty9g0zx2qb] {
    margin: 0 0 .85rem;
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 580;
    letter-spacing: normal;
}

.thanks-page__card ul[b-ty9g0zx2qb] {
    display: grid;
    gap: .65rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.thanks-page__card li[b-ty9g0zx2qb] {
    position: relative;
    padding-left: 1.35rem;
    color: var(--text-secondary);
    font-size: .88rem;
    line-height: 1.55;
}

.thanks-page__card li[b-ty9g0zx2qb]::before {
    position: absolute;
    top: .55rem;
    left: 0;
    width: .4rem;
    height: .4rem;
    border-radius: 999px;
    background: var(--accent);
    content: "";
}

.thanks-page__card a[b-ty9g0zx2qb] {
    color: var(--accent);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.thanks-page__card a:hover[b-ty9g0zx2qb] {
    border-bottom-color: var(--accent);
}

@media (max-width: 40rem) {
    .thanks-page .button[b-ty9g0zx2qb] {
        width: 100%;
    }
}
/* /Pages/Upgrade.razor.rz.scp.css */
.upgrade-page[b-12ryn4t2sr] {
    display: grid;
    align-content: start;
    width: min(calc(100% - 2rem), 52rem);
    margin: 0 auto;
    padding-block: clamp(3.5rem, 8vw, 6rem) clamp(4rem, 8vw, 6rem);
}

.upgrade-page h1[b-12ryn4t2sr] {
    max-width: 20ch;
    margin: 0;
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: clamp(2.1rem, 4vw, 2.9rem);
    font-weight: 580;
    line-height: 1.15;
    text-wrap: balance;
}

.upgrade-page__lede[b-12ryn4t2sr] {
    max-width: 42rem;
    margin: 1.4rem 0 0;
    color: var(--text-secondary);
    line-height: 1.7;
    text-wrap: pretty;
}

.upgrade-page__guarantee[b-12ryn4t2sr] {
    max-width: 42rem;
    margin: 1rem 0 0;
    color: var(--text-muted);
    font-size: .86rem;
    line-height: 1.6;
}
.upgrade-card[b-12ryn4t2sr] {
    max-width: 42rem;
    margin-top: 2rem;
}

.upgrade-card--available[b-12ryn4t2sr] {
    border-color: var(--accent);
}

.upgrade-card strong[b-12ryn4t2sr] {
    color: var(--accent);
}

.upgrade-card__note[b-12ryn4t2sr] {
    margin-top: -.2rem;
    font-size: .78rem;
    font-style: italic;
}

.upgrade-page__help[b-12ryn4t2sr] {
    max-width: 42rem;
    margin: 2rem 0 1.5rem;
    color: var(--text-secondary);
    font-size: .86rem;
}

.upgrade-page a:not(.button)[b-12ryn4t2sr] {
    color: var(--accent);
}