/* /Components/Layout/PublicLayout.razor.rz.scp.css */
/* The header stays pinned to the top while the page scrolls. It needs the solid ground behind it
   so content does not show through, and a z-index above the page's own stacked cells (.lane). */
.site-header[b-lfmm0f6623] {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--ground);
    border-bottom: 1px solid var(--hairline);
}

.site-header-inner[b-lfmm0f6623] {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--header-height);
}

.brand[b-lfmm0f6623] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.wordmark[b-lfmm0f6623] {
    font-size: 19px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text);
}

.site-nav[b-lfmm0f6623] {
    display: flex;
    gap: 32px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-lead);
    white-space: nowrap;
}

.site-nav a:hover[b-lfmm0f6623] {
    color: var(--text);
}

/* The public pages' top nav sits beside the brand and pushes the actions to the right. */
.site-nav-public[b-lfmm0f6623] {
    margin-left: 56px;
    margin-right: auto;
}

.site-nav-public a[b-lfmm0f6623] {
    padding: 6px 0;
}

/* Sign in is beside the buttons until the phone layout, where it moves into the menu (see max-width: 767px). */
.nav-signin[b-lfmm0f6623] {
    display: none;
}

/* The current page's item: white, with a 1px underline drawn inside the box so the row does not move. */
.site-nav-public a[aria-current="page"][b-lfmm0f6623] {
    color: var(--text);
    box-shadow: inset 0 -1px 0 var(--text);
}

.site-actions[b-lfmm0f6623] {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

.header-signin[b-lfmm0f6623] {
    margin-right: 12px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-lead);
}

.header-signin:hover[b-lfmm0f6623] {
    color: var(--text);
}

.header-email[b-lfmm0f6623] {
    margin-right: 12px;
    font-size: 12px;
    color: var(--text-muted);
}

.signout-form[b-lfmm0f6623] {
    display: inline-flex;
}

.nav-burger[b-lfmm0f6623] {
    display: none;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-lead);
    cursor: pointer;
    padding: 8px 0;
}

.nav-burger:hover[b-lfmm0f6623] {
    color: var(--text);
}

/* Above its menu breakpoint a label is gone, so its checkbox must leave the tab order too: visually-hidden alone
   would keep an invisible stop between the wordmark and the first link. The public nav folds below 1024, the member
   header's (an admin's area links) below 768; each edge must move together with its collapse below. */
@media (min-width: 1024px) {
    .nav-toggle-public[b-lfmm0f6623] {
        display: none;
    }
}

@media (min-width: 768px) {
    .nav-toggle-member[b-lfmm0f6623] {
        display: none;
    }
}

.nav-toggle:focus-visible + .nav-burger[b-lfmm0f6623] {
    outline: 1px solid var(--text);
    outline-offset: 3px;
}

.site-footer[b-lfmm0f6623] {
    border-top: 1px solid var(--hairline);
}

.site-footer-inner[b-lfmm0f6623] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Longhands only: the padding shorthand here would cancel the gutter .wrap sets on the sides. */
    padding-top: 24px;
    padding-bottom: 32px;
}

.footer-brand[b-lfmm0f6623] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.footer-legal[b-lfmm0f6623] {
    font-size: 12px;
    color: var(--text-muted);
}

.footer-nav[b-lfmm0f6623] {
    display: flex;
    gap: 24px;
    font-size: 12px;
    color: var(--text-muted);
}

.footer-nav a:hover[b-lfmm0f6623] {
    color: var(--text);
}

/* From 1279 down the public nav tightens so it fits beside the three actions down to 1024. */
@media (max-width: 1279px) {
    .site-nav-public[b-lfmm0f6623] {
        gap: 24px;
        margin-left: 40px;
    }
}

/* From 1024 down the secondary header button goes, so the header stays on one line. */
@media (max-width: 1024px) {
    .site-actions[b-lfmm0f6623]  .action-secondary {
        display: none;
    }
}

/* From 1023 down a nav folds into a menu opened by the checkbox, no JavaScript: the public nav here, the member
   header's from 767 (its label only shows there, and its links are hidden above it, see site.css .nav-area).
   These edges must move together with the toggle-hides above. */
@media (max-width: 1023px) {
    .site-header-inner[b-lfmm0f6623] {
        gap: 16px;
    }

    .nav-burger-public[b-lfmm0f6623] {
        display: inline-flex;
        margin-left: auto;
    }

    .site-nav[b-lfmm0f6623] {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: var(--header-height);
        z-index: 10;
        flex-direction: column;
        gap: 0;
        margin: 0;
        padding: 8px var(--gutter) 16px;
        background: var(--ground);
        border-bottom: 1px solid var(--hairline);
    }

    .site-nav a[b-lfmm0f6623] {
        padding: 12px 0;
        border-top: 1px solid var(--hairline);
        font-size: 15px;
    }

    .site-nav-public a[aria-current="page"][b-lfmm0f6623] {
        box-shadow: none;
    }

    .nav-toggle:checked ~ .site-nav[b-lfmm0f6623] {
        display: flex;
    }
}

/* From 767 down the member header's menu label shows too, and the public header's Sign in moves into its menu: the
   brand, the label and both actions would not fit at 375 px. The footer stacks at the same width, its links under the
   legal line. */
@media (max-width: 767px) {
    .nav-burger-member[b-lfmm0f6623] {
        display: inline-flex;
        margin-left: auto;
    }

    .header-signin[b-lfmm0f6623] {
        display: none;
    }

    .site-nav .nav-signin[b-lfmm0f6623] {
        display: block;
    }

    .site-footer-inner[b-lfmm0f6623] {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .footer-nav[b-lfmm0f6623] {
        flex-wrap: wrap;
        gap: 16px 24px;
    }
}
/* /Components/Pages/Account/AccountShell.razor.rz.scp.css */
.account-hero[b-p9c5izhmjr] {
    position: relative;
    overflow: hidden;
    background-image:
        linear-gradient(var(--hairline-07) 1px, transparent 1px),
        linear-gradient(90deg, var(--hairline-07) 1px, transparent 1px);
    background-size: var(--grid-step) var(--grid-step);
}

.hero-circle[b-p9c5izhmjr] {
    position: absolute;
    right: -140px;
    top: -120px;
    box-sizing: content-box;
    width: 620px;
    height: 620px;
    border-radius: 50%;
    border: 1px solid var(--hairline-22);
}

.account-hero-inner[b-p9c5izhmjr] {
    position: relative;
    display: grid;
    grid-template-columns: 440px minmax(0, 1fr);
    gap: 80px;
    align-items: start;
    padding-top: 96px;
    padding-bottom: 104px;
}

.hero-copy[b-p9c5izhmjr] {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.account-title[b-p9c5izhmjr] {
    font-size: 64px;
    line-height: 0.98;
    font-weight: 600;
    letter-spacing: -0.035em;
    color: var(--text);
}

.account-lead[b-p9c5izhmjr] {
    font-size: 18px;
}

.account-stats[b-p9c5izhmjr] {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--hairline);
}

.account-stat[b-p9c5izhmjr] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--hairline);
}

.account-stat-key[b-p9c5izhmjr] {
    font-size: 13px;
    color: var(--text-lead);
}

.tagline[b-p9c5izhmjr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 6px;
}

.account-panel-col[b-p9c5izhmjr] {
    display: flex;
    justify-content: center;
}

@media (max-width: 1279px) {
    .account-hero-inner[b-p9c5izhmjr] {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        gap: 48px;
    }

    .account-title[b-p9c5izhmjr] {
        font-size: clamp(44px, 5.5vw, 64px);
    }
}

@media (max-width: 1023px) {
    .account-hero-inner[b-p9c5izhmjr] {
        grid-template-columns: minmax(0, 1fr);
        gap: 48px;
        padding-top: 72px;
        padding-bottom: 72px;
    }

    .hero-circle[b-p9c5izhmjr] {
        right: -260px;
        top: -260px;
    }

    .account-panel-col[b-p9c5izhmjr] {
        justify-content: stretch;
    }
}

@media (max-width: 767px) {
    .account-title[b-p9c5izhmjr] {
        font-size: clamp(38px, 10vw, 52px);
    }

    .account-stat[b-p9c5izhmjr] {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
}
/* /Components/Pages/Desktop/Desktop.razor.rz.scp.css */
/* The Desktop page, the home page (docs/design/home-offers/home.html at 1440; below that, the patterns of docs/design/README.md). */

/* 1 · hero: the copy and the prices on the drafting grid, then one wide screenshot */
.hero[b-pxg15mpijr] {
    position: relative;
    overflow: hidden;
    background-image:
        linear-gradient(var(--hairline-07) 1px, transparent 1px),
        linear-gradient(90deg, var(--hairline-07) 1px, transparent 1px);
    background-size: var(--grid-step) var(--grid-step);
}

.hero-circle[b-pxg15mpijr] {
    position: absolute;
    right: -140px;
    top: -120px;
    box-sizing: content-box;
    width: 620px;
    height: 620px;
    border-radius: 50%;
    border: 1px solid var(--hairline-22);
}

.hero-dot[b-pxg15mpijr] {
    position: absolute;
    right: 140px;
    top: 160px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--brand-red);
}

.hero-inner[b-pxg15mpijr] {
    position: relative;
    display: grid;
    grid-template-columns: 720px minmax(0, 1fr);
    gap: 80px;
    align-items: end;
    padding-top: 104px;
    padding-bottom: 64px;
}

.hero-copy[b-pxg15mpijr] {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.hero-title[b-pxg15mpijr] {
    font-size: 80px;
    line-height: 0.98;
    font-weight: 600;
    letter-spacing: -0.035em;
    color: var(--text);
}

.hero-lead[b-pxg15mpijr] {
    max-width: 660px;
}

.hero-cta[b-pxg15mpijr] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hero-shot[b-pxg15mpijr] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-bottom: 96px;
}

/* The strip under the screenshot: three figures side by side, each with its caption. */
.statrow[b-pxg15mpijr] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
}

.statrow-item[b-pxg15mpijr] {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding: 20px 24px 20px 0;
}

.statrow-item + .statrow-item[b-pxg15mpijr] {
    padding-left: 24px;
    border-left: 1px solid var(--hairline-14);
}

.statrow-number[b-pxg15mpijr] {
    font-size: 32px;
    letter-spacing: -0.02em;
    color: var(--text);
}

/* A word in the number slot ("audited") is set smaller than the figures. */
.statrow-word[b-pxg15mpijr] {
    font-size: 24px;
}

/* A shape in front of an eyebrow (the hero, "Missing something?"). */
.marked[b-pxg15mpijr] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.actions[b-pxg15mpijr] {
    display: flex;
    gap: 12px;
}

.note[b-pxg15mpijr] {
    font-size: 12px;
    color: var(--text-muted);
}

.inline-link[b-pxg15mpijr] {
    color: var(--text);
    text-decoration: underline;
}

/* Sections */
.sec[b-pxg15mpijr] {
    padding: 104px 0;
    border-top: 1px solid var(--hairline);
}

.sec-index[b-pxg15mpijr] {
    padding: 72px 0;
}

.sec-inner[b-pxg15mpijr] {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.sec-inner-tight[b-pxg15mpijr] {
    gap: 28px;
}

.sec-title[b-pxg15mpijr] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.item-title[b-pxg15mpijr] {
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
}

.two[b-pxg15mpijr] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.three[b-pxg15mpijr] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.shots[b-pxg15mpijr] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.card[b-pxg15mpijr] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 28px;
    background: var(--surface);
    border: 1px solid var(--hairline-18);
}

/* 2 · what you are paying for: the five-part index */
.index[b-pxg15mpijr] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
}

.index-link[b-pxg15mpijr] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-right: 20px;
    padding: 22px 20px 22px 0;
    border-right: 1px solid var(--hairline-14);
}

.index-link:last-child[b-pxg15mpijr] {
    margin-right: 0;
    border-right: 0;
}

.index-number[b-pxg15mpijr] {
    font-size: 28px;
    line-height: 1;
    color: var(--hairline-28);
}

.index-link:hover .index-number[b-pxg15mpijr] {
    color: var(--text);
}

.index-title[b-pxg15mpijr] {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--text);
}

/* 3, 4, 5 · sections 01 to 03: text and screenshots side by side, the screenshots left in 02 */
.cap[b-pxg15mpijr] {
    display: grid;
    grid-template-columns: 400px minmax(0, 1fr);
    gap: 40px;
    align-items: start;
}

.cap-shots-first[b-pxg15mpijr] {
    grid-template-columns: minmax(0, 1fr) 400px;
}

/* The text stays first in the markup, so it reads first when the columns stack. */
.cap-shots-first .cap-text[b-pxg15mpijr] {
    order: 2;
}

.cap-text[b-pxg15mpijr] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-top: 8px;
}

.inside[b-pxg15mpijr] {
    margin: 0;
    padding: 14px 16px;
    list-style: none;
    font-size: 12px;
    line-height: 1.9;
    color: var(--text-lead);
    background: var(--surface);
    border: 1px solid var(--hairline-soft);
}

/* 6 · 04 Claude through MCP: screenshots, the example session, four points */
.mcp[b-pxg15mpijr] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 470px;
    gap: 32px;
    align-items: start;
}

.session[b-pxg15mpijr] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
    padding: 26px;
    background: var(--surface);
    border: 1px solid var(--hairline-18);
}

.session-head[b-pxg15mpijr] {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--hairline);
}

.session-line[b-pxg15mpijr] {
    font-size: 13px;
    line-height: 1.7;
}

.session-you[b-pxg15mpijr] {
    color: var(--text);
}

.session-claude[b-pxg15mpijr] {
    color: var(--text-body);
}

.session-who[b-pxg15mpijr] {
    color: var(--text-muted);
}

.session-calls[b-pxg15mpijr] {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.session-call[b-pxg15mpijr] {
    display: grid;
    grid-template-columns: 18px 190px minmax(0, 1fr);
    gap: 8px;
    font-size: 12.5px;
    line-height: 1.9;
    color: var(--text-muted);
}

.session-tool[b-pxg15mpijr] {
    color: var(--text-lead);
}

.session-last[b-pxg15mpijr] {
    padding-top: 4px;
    border-top: 1px solid var(--hairline-14);
}

.points[b-pxg15mpijr] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
}

.point[b-pxg15mpijr] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 22px 24px 22px 0;
}

.point + .point[b-pxg15mpijr] {
    padding-left: 24px;
    border-left: 1px solid var(--hairline-14);
}

/* 7 · 05 connectors: what it connects to, three ways, three screenshots */
.venues-block[b-pxg15mpijr] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.venues[b-pxg15mpijr] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--hairline);
    border-left: 1px solid var(--hairline);
}

.venue[b-pxg15mpijr] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 132px;
    padding: 22px 24px;
    border-right: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
}

.venue-name[b-pxg15mpijr] {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.1;
    color: var(--text);
}

.is-coming .venue-name[b-pxg15mpijr] {
    color: var(--text-muted);
}

.venue-foot[b-pxg15mpijr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    font-size: 12px;
    color: var(--text-muted);
}

/* Available: a green dot and the word in white. Coming soon: an empty circle. */
.venue-status[b-pxg15mpijr] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.venue-status[b-pxg15mpijr]::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1px solid var(--hairline-45);
}

.is-available .venue-status[b-pxg15mpijr] {
    color: var(--text);
}

.is-available .venue-status[b-pxg15mpijr]::before {
    background: var(--available);
    border-color: var(--available);
}

.way-mark[b-pxg15mpijr] {
    display: flex;
    align-items: center;
    height: 16px;
}

.way-foot[b-pxg15mpijr] {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--hairline-14);
    font-size: 12px;
    color: var(--text-muted);
}

/* 8 · missing something? is the shared AskSection. */

/* 9 · running a trading business?: the copy beside the three lanes, one line each */
.business[b-pxg15mpijr] {
    display: grid;
    grid-template-columns: 560px minmax(0, 1fr);
    gap: 80px;
    align-items: start;
}

.business-copy[b-pxg15mpijr] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* "Talk to us" beside "See the offers": the secondary button's box, unframed and underlined. */
.actions[b-pxg15mpijr]  .btn-quiet,
.actions[b-pxg15mpijr]  .btn-quiet:hover {
    border-color: transparent;
    text-decoration: underline;
}

.business-lanes[b-pxg15mpijr] {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
    border-bottom: 1px solid var(--hairline);
}

.business-lane[b-pxg15mpijr] {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 16px;
    padding: 22px 0;
    border-top: 1px solid var(--hairline);
}

.business-lane[b-pxg15mpijr]  .business-shape {
    margin-top: 6px;
}

/* 10 · 06 how it starts */
.start-step[b-pxg15mpijr] {
    gap: 14px;
}

.card-number[b-pxg15mpijr] {
    font-size: 34px;
    color: var(--hairline-28);
}

.start-title[b-pxg15mpijr] {
    font-size: 20px;
    font-weight: 600;
    color: var(--text);
}

.start-foot[b-pxg15mpijr] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* 10 · 07 plans */
.plan[b-pxg15mpijr] {
    display: grid;
    grid-template-rows: auto auto auto 44px;
}

.plan-featured[b-pxg15mpijr] {
    border-color: var(--hairline-60);
}

.plan-name[b-pxg15mpijr] {
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
    color: var(--text);
}

.plan-price[b-pxg15mpijr] {
    font-size: 34px;
    letter-spacing: -0.02em;
    color: var(--text);
}

.plan-per[b-pxg15mpijr] {
    font-size: 14px;
    letter-spacing: 0;
    color: var(--text-muted);
}

.plan-lines[b-pxg15mpijr] {
    font-size: 12.5px;
    line-height: 1.65;
    color: var(--text-muted);
}

/* 11 · 08 good to know */
.answers[b-pxg15mpijr] {
    display: flex;
    flex-direction: column;
    margin: 0;
    border-bottom: 1px solid var(--hairline);
}

.answer[b-pxg15mpijr] {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 40px;
    padding: 20px 0;
    border-top: 1px solid var(--hairline);
}

.answer dd[b-pxg15mpijr] {
    margin: 0;
}

/* Responsive, per docs/design/README.md: the grids hold down to 1024, then stack. */
@media (max-width: 1279px) {
    .hero-inner[b-pxg15mpijr],
    .business[b-pxg15mpijr] {
        grid-template-columns: minmax(0, 6fr) minmax(0, 4fr);
        gap: 48px;
    }
}

@media (max-width: 1023px) {
    .hero-inner[b-pxg15mpijr] {
        grid-template-columns: minmax(0, 1fr);
        gap: 56px;
        padding-top: 80px;
        padding-bottom: 56px;
    }

    .hero-title[b-pxg15mpijr] {
        font-size: clamp(48px, 9vw, 80px);
    }

    .hero-dot[b-pxg15mpijr] {
        right: 40px;
        top: 40px;
        width: 40px;
        height: 40px;
    }

    .hero-circle[b-pxg15mpijr] {
        right: -260px;
        top: -260px;
    }

    .hero-shot[b-pxg15mpijr] {
        padding-bottom: 72px;
    }

    .sec[b-pxg15mpijr] {
        padding: 72px 0;
    }

    .sec-index[b-pxg15mpijr] {
        padding: 56px 0;
    }

    /* The index wraps: each link under its own rule, three to a row. */
    .index[b-pxg15mpijr] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: 20px;
        border-top: 0;
    }

    .index-link[b-pxg15mpijr] {
        margin-right: 0;
        padding-right: 0;
        border-right: 0;
        border-top: 1px solid var(--hairline);
    }

    .cap[b-pxg15mpijr],
    .cap-shots-first[b-pxg15mpijr],
    .mcp[b-pxg15mpijr],
    .business[b-pxg15mpijr] {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }

    .cap-shots-first .cap-text[b-pxg15mpijr] {
        order: 0;
    }

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

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

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

    .point:nth-child(odd)[b-pxg15mpijr] {
        padding-left: 0;
        border-left: 0;
    }

    .point:nth-child(n + 3)[b-pxg15mpijr] {
        border-top: 1px solid var(--hairline-14);
    }
}

@media (max-width: 767px) {
    .actions[b-pxg15mpijr],
    .start-foot[b-pxg15mpijr] {
        flex-wrap: wrap;
    }

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

    .two[b-pxg15mpijr],
    .points[b-pxg15mpijr],
    .venues[b-pxg15mpijr] {
        grid-template-columns: minmax(0, 1fr);
    }

    /* The strip's figures go one under another, each under its own rule. */
    .statrow[b-pxg15mpijr] {
        grid-template-columns: minmax(0, 1fr);
    }

    .statrow-item + .statrow-item[b-pxg15mpijr] {
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid var(--hairline-14);
    }

    .point + .point[b-pxg15mpijr] {
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid var(--hairline-14);
    }

    /* The tool's detail drops under its name. */
    .session[b-pxg15mpijr] {
        padding: 20px;
    }

    .session-call[b-pxg15mpijr] {
        grid-template-columns: 18px minmax(0, 1fr);
        column-gap: 8px;
        row-gap: 0;
    }

    .session-detail[b-pxg15mpijr] {
        grid-column: 2;
    }

    .answer[b-pxg15mpijr] {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }
}
/* /Components/Pages/Desktop/ShotFrame.razor.rz.scp.css */
/* Frames per the brief: the shot ground, a 1px hairline, no rounding, no shadow. The frame holds its proportions and the
   picture is fitted inside it, so a picture of another shape sits on the same dark ground. */
.shot[b-zafzu3cevz] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    margin: 0;
}

.shot-frame[b-zafzu3cevz] {
    position: relative;
    overflow: hidden;
    background: var(--shot-ground);
    border: 1px solid var(--hairline-18);
}

.shot-frame img[b-zafzu3cevz] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.shot-caption[b-zafzu3cevz] {
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--text-muted);
}
/* /Components/Pages/Offers/BlockTree.razor.rz.scp.css */
/* The block tree, drawn to docs/design/reference-home-blocks-tree.png at 1200 wide.
   Every line is a pseudo-element; every box is ground-coloured so it covers the drafting grid. */
.tree[b-d1znqxemet] {
    --box-w: 104px;
    --box-h: 64px;
    --gap: 18px;
    --step: calc(var(--box-w) + var(--gap));
    --line: var(--hairline-28);
    --edge: var(--hairline-60);
    --edge-coming: var(--hairline-28);
    position: relative;
    padding: 30px 0 66px;
    border-top: 1px solid var(--hairline);
    background-image:
        linear-gradient(var(--hairline-07) 1px, transparent 1px),
        linear-gradient(90deg, var(--hairline-07) 1px, transparent 1px);
    background-size: var(--grid-step) var(--grid-step);
}

.tree-blocks[b-d1znqxemet],
.tree-kids[b-d1znqxemet],
.tree-legend[b-d1znqxemet] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tree-box[b-d1znqxemet],
.tree-root[b-d1znqxemet] {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--ground);
    border: 1px solid var(--edge);
    color: var(--text);
    font-weight: 600;
}

.tree-root[b-d1znqxemet] {
    position: relative;
    flex-direction: column;
    gap: 10px;
    width: 200px;
    height: 92px;
    margin: 0 auto;
    font-size: 22px;
    line-height: 1;
    letter-spacing: -0.01em;
}

/* The trunk: from the root down to the bus. */
.tree-root[b-d1znqxemet]::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    width: 1px;
    height: 33px;
    background: var(--line);
}

.tree-blocks[b-d1znqxemet] {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--cols), var(--box-w));
    justify-content: space-between;
    margin-top: 33px;
    padding-top: 39px;
}

/* The bus: first box centre to last box centre. */
.tree-blocks[b-d1znqxemet]::before {
    content: "";
    position: absolute;
    top: 0;
    left: calc(var(--box-w) / 2);
    right: calc(var(--box-w) / 2);
    border-top: 1px solid var(--line);
}

.tree-block[b-d1znqxemet],
.tree-kid[b-d1znqxemet] {
    position: relative;
}

/* The drop from the bus to each box. */
.tree-block[b-d1znqxemet]::before,
.tree-kid[b-d1znqxemet]::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 100%;
    width: 1px;
    height: 39px;
    background: var(--line);
}

.tree-box[b-d1znqxemet] {
    position: relative;
    width: var(--box-w);
    height: var(--box-h);
    padding: 0 6px;
    font-size: 15px;
    line-height: 1.15;
}

.is-coming > .tree-box[b-d1znqxemet] {
    border-color: var(--edge-coming);
    color: var(--text-muted);
}

.is-yours > .tree-box[b-d1znqxemet] {
    border-color: var(--brand-yellow);
    color: var(--brand-yellow);
}

/* The children: a second bus centred under their block. The list is as wide as its column and its
   boxes overflow it evenly on both sides, so the group is centred on the box above. */
.tree-kids[b-d1znqxemet] {
    position: relative;
    display: flex;
    justify-content: center;
    gap: var(--gap);
    margin-top: 40px;
    padding-top: 28px;
}

/* The drop from the parent box to that bus. */
.tree-block:has(> .tree-kids) > .tree-box[b-d1znqxemet]::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    width: 1px;
    height: 40px;
    background: var(--line);
}

/* Solid bus from the first child's centre to the last one's. */
.tree-kids[b-d1znqxemet]::before {
    content: "";
    position: absolute;
    top: 0;
    left: calc(50% - (var(--kids) - 1) / 2 * var(--step));
    width: calc((var(--kids) - 1) * var(--step));
    border-top: 1px solid var(--line);
}

.tree-kid[b-d1znqxemet]::before {
    height: 28px;
}

/* When the last child is the one you add, a negative margin takes it out of the centring so the
   shipped ones stay centred on the block above, and the bus reaches it dashed. */
.tree-kids > .is-yours:last-child[b-d1znqxemet] {
    margin-right: calc(-1 * var(--step));
}

.tree-kids:has(> .is-yours:last-child)[b-d1znqxemet]::before {
    left: calc(50% - (var(--kids) - 2) / 2 * var(--step));
    width: calc((var(--kids) - 2) * var(--step));
}

.tree-kids:has(> .is-yours:last-child)[b-d1znqxemet]::after {
    content: "";
    position: absolute;
    top: 0;
    left: calc(50% + (var(--kids) - 2) / 2 * var(--step));
    width: var(--step);
    border-top: 1px dashed var(--line);
}

.tree-kid.is-yours[b-d1znqxemet]::before {
    width: 0;
    background: none;
    border-left: 1px dashed var(--line);
}

/* Legend and footnote */
.tree-legend[b-d1znqxemet] {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    margin-top: 10px;
}

.tree-legend-item[b-d1znqxemet] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.tree-swatch[b-d1znqxemet] {
    width: 12px;
    height: 12px;
    border: 1px solid var(--hairline-60);
}

.is-coming > .tree-swatch[b-d1znqxemet] {
    border-color: var(--hairline-28);
}

.is-yours > .tree-swatch[b-d1znqxemet] {
    border-color: var(--brand-yellow);
}

.tree-note[b-d1znqxemet] {
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-muted);
    padding-bottom: 32px;
    border-bottom: 1px solid var(--hairline);
}

/* Between 1024 and 1279 the ten boxes stay in one row, narrower. */
@media (max-width: 1279px) {
    .tree[b-d1znqxemet] {
        --box-w: 82px;
        --box-h: 56px;
        --gap: 12px;
    }

    .tree-box[b-d1znqxemet] {
        padding: 0 2px;
        font-size: 12px;
    }
}

/* Below 1024 the drawing goes and the tree becomes an indented outline. */
@media (max-width: 1023px) {
    .tree[b-d1znqxemet] {
        padding: 24px 0 40px;
    }

    .tree-root[b-d1znqxemet] {
        margin: 0;
        width: 180px;
        height: 80px;
        font-size: 20px;
    }

    .tree-root[b-d1znqxemet]::after,
    .tree-blocks[b-d1znqxemet]::before,
    .tree-kids[b-d1znqxemet]::before,
    .tree-kids:has(> .is-yours:last-child)[b-d1znqxemet]::after,
    .tree-block:has(> .tree-kids) > .tree-box[b-d1znqxemet]::after {
        content: none;
    }

    .tree-kids > .is-yours:last-child[b-d1znqxemet] {
        margin-right: 0;
    }

    .tree-blocks[b-d1znqxemet],
    .tree-kids[b-d1znqxemet] {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        margin: 10px 0 0 24px;
        padding: 0 0 0 24px;
        border-left: 1px solid var(--line);
    }

    /* The tick from the rail to each box. */
    .tree-block[b-d1znqxemet]::before,
    .tree-kid[b-d1znqxemet]::before,
    .tree-kid.is-yours[b-d1znqxemet]::before {
        left: -24px;
        bottom: auto;
        top: 24px;
        width: 16px;
        height: 1px;
        background: var(--line);
        border: 0;
    }

    .tree-box[b-d1znqxemet] {
        display: inline-flex;
        width: auto;
        min-width: 120px;
        height: 48px;
        padding: 0 16px;
        font-size: 14px;
    }
}
/* /Components/Pages/Offers/ComparisonTable.razor.rz.scp.css */
.comparison[b-fbkt42rpt5] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding-top: 24px;
}

.comparison-head[b-fbkt42rpt5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}

.legend[b-fbkt42rpt5] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px 20px;
}

.legend-item[b-fbkt42rpt5] {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.legend-item[b-fbkt42rpt5]  .shape,
.cmp-head[b-fbkt42rpt5]  .cmp-shape {
    margin-right: 10px;
}

.cmp-label[b-fbkt42rpt5]  .cmp-shape-label {
    margin-right: 8px;
}

.cmp-cell-span[b-fbkt42rpt5] {
    grid-column: 2 / -1;
}

.cmp[b-fbkt42rpt5] {
    display: grid;
    grid-template-columns: 220px repeat(4, minmax(0, 1fr));
    border-top: 1px solid var(--hairline);
}

/* Rows are only semantics; the cells are the grid items. */
.cmp-rows[b-fbkt42rpt5],
.cmp-row[b-fbkt42rpt5] {
    display: contents;
}

.cmp-corner[b-fbkt42rpt5],
.cmp-head[b-fbkt42rpt5],
.cmp-label[b-fbkt42rpt5],
.cmp-cell[b-fbkt42rpt5] {
    padding: 14px 16px 14px 0;
    border-bottom: 1px solid var(--hairline-14);
    font-size: 14px;
    line-height: 1.45;
    color: var(--text-body);
}

.cmp-corner[b-fbkt42rpt5],
.cmp-head[b-fbkt42rpt5] {
    padding: 12px 16px 12px 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
}

.cmp-label[b-fbkt42rpt5] {
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding-top: 16px;
}

/* Below 1024: one stacked card per lane, the row labels repeated in front of each value. */
@media (max-width: 1023px) {
    .cmp[b-fbkt42rpt5] {
        grid-template-columns: minmax(0, 1fr);
        border-top: 0;
    }

    .cmp-corner[b-fbkt42rpt5],
    .cmp-label[b-fbkt42rpt5] {
        display: none;
    }

    .cmp-head[b-fbkt42rpt5],
    .cmp-cell[b-fbkt42rpt5] {
        order: var(--o);
    }

    .cmp-cell-span[b-fbkt42rpt5] {
        grid-column: auto;
        margin-bottom: 24px;
        border-top: 1px solid var(--hairline);
    }

    .cmp-head[b-fbkt42rpt5] {
        margin-top: 40px;
        padding: 0 0 12px;
        border-bottom: 1px solid var(--hairline);
        font-size: 22px;
    }

    .cmp-head-first[b-fbkt42rpt5] {
        margin-top: 0;
    }

    .cmp-cell[b-fbkt42rpt5] {
        display: grid;
        grid-template-columns: 160px minmax(0, 1fr);
        gap: 16px;
    }

    .cmp-cell[b-fbkt42rpt5]::before {
        content: attr(data-label);
        font-family: var(--font-mono);
        font-size: 11px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--text-muted);
        padding-top: 3px;
    }
}

@media (max-width: 767px) {
    .cmp-cell[b-fbkt42rpt5] {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
    }
}
/* /Components/Pages/Offers/OfferCard.razor.rz.scp.css */
/* Each card spans four rows of the offers grid and shares them (subgrid): the title, description,
   price list and button rows size to the tallest card in the row, so the prices and buttons line
   up across cards and no text overflows into the next row. */
.offer[b-v0f61hvn54] {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    gap: 12px;
    padding: 28px;
    background: var(--surface);
    border: 1px solid var(--hairline-18);
}

.offer-title[b-v0f61hvn54] {
    min-height: 32px;
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
    color: var(--text);
}

.offer-title[b-v0f61hvn54]  .offer-shape {
    margin-right: 10px;
}

.offer-body[b-v0f61hvn54] {
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-body);
}

.offer-price[b-v0f61hvn54] {
    font-size: 12.5px;
    line-height: 1.65;
    color: var(--text-lead);
}

/* On the surface card the button's border is stronger than the page's secondary buttons. */
.offer[b-v0f61hvn54]  .btn-secondary {
    border-color: var(--hairline-60);
}

.offer[b-v0f61hvn54]  .btn-secondary:hover {
    border-color: var(--text);
}
/* /Components/Pages/Offers/Offers.razor.rz.scp.css */
/* 1 · brand */
.hero[b-8wk1t1w13s] {
    position: relative;
    overflow: hidden;
    background-image:
        linear-gradient(var(--hairline-07) 1px, transparent 1px),
        linear-gradient(90deg, var(--hairline-07) 1px, transparent 1px);
    background-size: var(--grid-step) var(--grid-step);
}

.hero-circle[b-8wk1t1w13s] {
    position: absolute;
    right: -140px;
    top: -120px;
    /* 620px of circle plus the 1px outline on each side, as measured off the reference render. */
    box-sizing: content-box;
    width: 620px;
    height: 620px;
    border-radius: 50%;
    border: 1px solid var(--hairline-22);
}

.hero-dot[b-8wk1t1w13s] {
    position: absolute;
    right: 140px;
    top: 160px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--brand-red);
}

.hero-inner[b-8wk1t1w13s] {
    position: relative;
    display: grid;
    grid-template-columns: 720px minmax(0, 1fr);
    gap: 80px;
    align-items: end;
    padding-top: 112px;
    padding-bottom: 96px;
}

.hero-copy[b-8wk1t1w13s] {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.hero-marked[b-8wk1t1w13s] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* 80px as the reference: "Your trading platform." is wider than the 720px column there too, so it runs to three lines. */
.hero-title[b-8wk1t1w13s] {
    font-size: 80px;
    line-height: 0.98;
    font-weight: 600;
    letter-spacing: -0.035em;
    color: var(--text);
}

.hero-lead[b-8wk1t1w13s] {
    max-width: 620px;
}

.hero-cta[b-8wk1t1w13s] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hero-actions[b-8wk1t1w13s] {
    display: flex;
    gap: 12px;
}

.hero-note[b-8wk1t1w13s] {
    font-size: 12px;
    color: var(--text-muted);
}

/* 01 · what is already solved, 02 · three ways to own it, 03 · talk to us */
.sec[b-8wk1t1w13s] {
    padding: 104px 0;
    border-top: 1px solid var(--hairline);
}

.sec-inner[b-8wk1t1w13s] {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.offers[b-8wk1t1w13s] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

/* "Then extend it." sits under the cards in the title column of the section grid. */
.extend[b-8wk1t1w13s] {
    display: grid;
    grid-template-columns: 720px minmax(0, 1fr);
    gap: 80px;
    align-items: start;
    padding-top: 8px;
}

.extend-note[b-8wk1t1w13s] {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.extend-note[b-8wk1t1w13s]  .extend-shape {
    margin-top: 4px;
}

.offers-footnote[b-8wk1t1w13s] {
    font-size: 12px;
    color: var(--text-muted);
}

.sec-talk[b-8wk1t1w13s] {
    padding: 96px 0;
}

.talk-inner[b-8wk1t1w13s] {
    display: grid;
    grid-template-columns: 560px minmax(0, 1fr);
    gap: 80px;
    align-items: start;
}

.talk-copy[b-8wk1t1w13s] {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.talk-body[b-8wk1t1w13s] {
    max-width: 520px;
}

.facts[b-8wk1t1w13s] {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--hairline);
    margin-top: 8px;
}

.fact[b-8wk1t1w13s] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--hairline);
}

.fact-value[b-8wk1t1w13s] {
    font-size: 13px;
    color: var(--text-lead);
}

.fact .eyebrow[b-8wk1t1w13s] {
    text-align: right;
}

/* Responsive, per docs/design/README.md */
@media (max-width: 1279px) {
    .hero-inner[b-8wk1t1w13s] {
        grid-template-columns: minmax(0, 6fr) minmax(0, 4fr);
        gap: 48px;
    }

    .talk-inner[b-8wk1t1w13s] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 48px;
    }

    .extend[b-8wk1t1w13s] {
        grid-template-columns: minmax(0, 6fr) minmax(0, 4fr);
        gap: 48px;
    }
}

@media (max-width: 1023px) {
    .hero-inner[b-8wk1t1w13s] {
        grid-template-columns: minmax(0, 1fr);
        gap: 56px;
        padding-top: 80px;
        padding-bottom: 72px;
    }

    .hero-title[b-8wk1t1w13s] {
        font-size: clamp(48px, 9vw, 80px);
    }

    .hero-dot[b-8wk1t1w13s] {
        right: 40px;
        top: 40px;
        width: 40px;
        height: 40px;
    }

    .hero-circle[b-8wk1t1w13s] {
        right: -260px;
        top: -260px;
    }

    .sec[b-8wk1t1w13s] {
        padding: 72px 0;
    }

    .offers[b-8wk1t1w13s] {
        grid-template-columns: minmax(0, 1fr);
    }

    /* The form stacks under its text. */
    .talk-inner[b-8wk1t1w13s] {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }

    .extend[b-8wk1t1w13s] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767px) {
    .hero-actions[b-8wk1t1w13s] {
        flex-wrap: wrap;
    }
}
/* /Components/Pages/Offers/PrinciplesRow.razor.rz.scp.css */
.principles[b-0j7u35l8ga] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
    padding-top: 8px;
}

.principle[b-0j7u35l8ga] {
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.principle[b-0j7u35l8ga]  .principle-shape {
    margin-top: 4px;
}

@media (max-width: 1023px) {
    .principles[b-0j7u35l8ga] {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }
}
/* /Components/Pages/TalkToUs/TalkToUs.razor.rz.scp.css */
/* Hero: promise, steps and contact details left, the form right, on the drafting grid. */
.hero[b-pu0scwpayl] {
    position: relative;
    overflow: hidden;
    background-image:
        linear-gradient(var(--hairline-07) 1px, transparent 1px),
        linear-gradient(90deg, var(--hairline-07) 1px, transparent 1px);
    background-size: var(--grid-step) var(--grid-step);
}

.hero-circle[b-pu0scwpayl] {
    position: absolute;
    right: -140px;
    top: -120px;
    box-sizing: content-box;
    width: 620px;
    height: 620px;
    border-radius: 50%;
    border: 1px solid var(--hairline-22);
}

.hero-inner[b-pu0scwpayl] {
    position: relative;
    display: grid;
    grid-template-columns: 520px minmax(0, 1fr);
    gap: 80px;
    align-items: start;
    padding-top: 96px;
    padding-bottom: 104px;
}

.hero-copy[b-pu0scwpayl] {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.hero-title[b-pu0scwpayl] {
    font-size: 72px;
    line-height: 0.98;
    font-weight: 600;
    letter-spacing: -0.035em;
    color: var(--text);
}

.steps[b-pu0scwpayl] {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--hairline);
}

.step[b-pu0scwpayl] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 24px;
    padding: 18px 0;
    border-bottom: 1px solid var(--hairline);
}

.step-index[b-pu0scwpayl] {
    font-size: 26px;
    font-weight: 400;
    letter-spacing: -0.02em;
    color: var(--text);
}

.step-text[b-pu0scwpayl] {
    max-width: 340px;
    text-align: right;
}

.contact-lines[b-pu0scwpayl] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 4px;
    font-size: 13px;
}

.contact-email[b-pu0scwpayl] {
    color: var(--text-lead);
}

.contact-email:hover[b-pu0scwpayl] {
    color: var(--text);
}

.contact-line[b-pu0scwpayl] {
    color: var(--text-muted);
}

.tagline[b-pu0scwpayl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 6px;
}

/* Responsive, per docs/design/README.md */
@media (max-width: 1279px) {
    .hero-inner[b-pu0scwpayl] {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        gap: 48px;
    }

    .hero-title[b-pu0scwpayl] {
        font-size: clamp(48px, 6vw, 72px);
    }
}

@media (max-width: 1023px) {
    .hero-inner[b-pu0scwpayl] {
        grid-template-columns: minmax(0, 1fr);
        gap: 48px;
        padding-top: 72px;
        padding-bottom: 72px;
    }

    .hero-circle[b-pu0scwpayl] {
        right: -260px;
        top: -260px;
    }
}

@media (max-width: 767px) {
    .hero-title[b-pu0scwpayl] {
        font-size: clamp(40px, 11vw, 56px);
    }

    .step[b-pu0scwpayl] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .step-text[b-pu0scwpayl] {
        max-width: none;
        text-align: left;
    }
}
/* /Components/Pages/TradovateCallback.razor.rz.scp.css */
/* Not p + p: the note script sits between the first two lines. */
p ~ p[b-93v5cchzz2] {
    margin-top: 16px;
}

/* The line that says what the page is for, and becomes "Returning to AlgoDesk…" while the browser leaves; or how the
   sign-in went, once AlgoDesk has sent the browser back. */
.relay-note[b-93v5cchzz2] {
    color: var(--text);
}

/* A failed sign-in's reason, as AlgoDesk passed it on: quoted words, not the page's own, and possibly one long word. */
.relay-reason[b-93v5cchzz2] {
    font-size: 14px;
    overflow-wrap: anywhere;
}
/* /Components/Shared/AskSection.razor.rz.scp.css */
/* "Missing something?" (docs/design/home-offers/home.html, offers.html): the section rules of the pages it sits on. */
.sec-ask[b-3ad3sg4qtp] {
    padding: 104px 0;
    border-top: 1px solid var(--hairline);
    background: var(--surface);
}

.ask[b-3ad3sg4qtp] {
    display: grid;
    grid-template-columns: 720px minmax(0, 1fr);
    gap: 80px;
    align-items: start;
}

.ask-copy[b-3ad3sg4qtp] {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.ask-marked[b-3ad3sg4qtp] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ask-actions[b-3ad3sg4qtp] {
    display: flex;
    gap: 12px;
}

.ask-steps[b-3ad3sg4qtp] {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
    border-bottom: 1px solid var(--hairline);
}

.ask-step[b-3ad3sg4qtp] {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 16px;
    padding: 22px 0;
    border-top: 1px solid var(--hairline);
}

.ask-number[b-3ad3sg4qtp] {
    font-size: 22px;
    line-height: 1.1;
    color: var(--hairline-28);
}

.ask-step-title[b-3ad3sg4qtp] {
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
}

@media (max-width: 1279px) {
    .ask[b-3ad3sg4qtp] {
        grid-template-columns: minmax(0, 6fr) minmax(0, 4fr);
        gap: 48px;
    }
}

@media (max-width: 1023px) {
    .sec-ask[b-3ad3sg4qtp] {
        padding: 72px 0;
    }

    .ask[b-3ad3sg4qtp] {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }
}

@media (max-width: 767px) {
    .ask-actions[b-3ad3sg4qtp] {
        flex-wrap: wrap;
    }
}
/* /Components/Shared/BrandMark.razor.rz.scp.css */
.mark[b-vgz0sjpvls] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 0;
}

.mark-circle[b-vgz0sjpvls] {
    width: var(--mark-size);
    height: var(--mark-size);
    border-radius: 50%;
    background: var(--brand-red);
}

.mark-square[b-vgz0sjpvls] {
    width: var(--mark-size);
    height: var(--mark-size);
    background: var(--brand-blue);
}

.mark-triangle[b-vgz0sjpvls] {
    width: 0;
    height: 0;
    border-left: var(--mark-half) solid transparent;
    border-right: var(--mark-half) solid transparent;
    border-bottom: var(--mark-size) solid var(--brand-yellow);
}
/* /Components/Shared/HeroStats.razor.rz.scp.css */
.stats[b-nwualb4ppg] {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--hairline);
}

.stat[b-nwualb4ppg] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 18px 0;
    border-bottom: 1px solid var(--hairline);
}

.stat-number[b-nwualb4ppg] {
    font-size: 34px;
    font-weight: 400;
    letter-spacing: -0.02em;
    color: var(--text);
}

/* A word in the number slot ("audited") is set smaller than the figures. */
.stat-word[b-nwualb4ppg] {
    font-size: 26px;
}

.stat-tagline[b-nwualb4ppg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 0;
}

.stat-note[b-nwualb4ppg] {
    padding: 18px 0;
    font-size: 12px;
    color: var(--text-muted);
}

/* The 400px column of the reference fits number and caption on one line with room to spare.
   Narrower than that the caption wraps, so it needs a gap to stay off the number. */
@media (max-width: 1279px) {
    .stat[b-nwualb4ppg] {
        gap: 16px;
    }

    .stat .eyebrow[b-nwualb4ppg] {
        text-align: right;
    }
}
/* /Components/Shared/SectionHeader.razor.rz.scp.css */
.section-header[b-carm9eir6d] {
    display: grid;
    grid-template-columns: 720px minmax(0, 1fr);
    gap: 80px;
    align-items: end;
}

.section-header-title[b-carm9eir6d] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Below the 1280 the reference was drawn for, the 720px title column would leave the aside
   a sliver. Same proportional fallback the hero uses. */
@media (max-width: 1279px) {
    .section-header[b-carm9eir6d] {
        grid-template-columns: minmax(0, 6fr) minmax(0, 4fr);
        gap: 48px;
    }
}

@media (max-width: 1023px) {
    .section-header[b-carm9eir6d] {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }
}
/* /Components/Shared/SimplePage.razor.rz.scp.css */
.simple[b-ymlldslavl] {
    padding: 104px 0 160px;
}

.simple-inner[b-ymlldslavl] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 800px;
}

.simple-title[b-ymlldslavl] {
    font-size: 56px;
    line-height: 1.02;
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--text);
}

.simple-body[b-ymlldslavl] {
    font-size: 17px;
    line-height: 1.55;
    max-width: 620px;
}

.simple-body[b-ymlldslavl]  a {
    color: var(--text);
    border-bottom: 1px solid var(--hairline-35);
}

.simple-body[b-ymlldslavl]  a:hover {
    border-color: var(--text);
}

@media (max-width: 1023px) {
    .simple[b-ymlldslavl] {
        padding: 72px 0 120px;
    }

    .simple-title[b-ymlldslavl] {
        font-size: clamp(36px, 7vw, 56px);
    }
}