/* /Components/Account/KeepTrial.razor.rz.scp.css */
/* The conversion page. Deliberately the same card, ground and green as /try:
   somebody arrives here from the trial banner, and the two screens are the two
   ends of one decision. A different-looking page would read as a different
   product asking for a password. */

.keep[b-6ivejzrgy1] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 3rem 1rem;
}

.keep-card[b-6ivejzrgy1] {
    width: 100%;
    max-width: 32rem;
    padding: 2.5rem;
    background: #fff;
    border: 1px solid #e2e6e3;
    border-radius: 1rem;
    box-shadow: 0 1px 2px rgba(18, 36, 28, 0.04),
                0 8px 24px rgba(18, 36, 28, 0.06);
}

.keep-eyebrow[b-6ivejzrgy1] {
    margin: 0 0 0.5rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8a6d1f;
}

.keep-card h1[b-6ivejzrgy1] {
    margin: 0 0 0.75rem;
    font-size: 1.75rem;
    line-height: 1.2;
    color: #12241c;
}

.keep-lede[b-6ivejzrgy1] {
    margin: 0 0 1.75rem;
    font-size: 1rem;
    line-height: 1.55;
    color: #41514a;
}

.keep-form[b-6ivejzrgy1] {
    display: block;
}

/* Stacked, not inline. The label sat beside its box before, which on a narrow
   window put three fields and a button on one line with nothing to say which
   label belonged to which box. */
.keep-field[b-6ivejzrgy1] {
    margin-bottom: 1.25rem;
}

.keep-field label[b-6ivejzrgy1] {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #2c3b34;
}

.keep-field input[b-6ivejzrgy1] {
    display: block;
    width: 100%;
    padding: 0.7rem 0.85rem;
    font-size: 1rem;
    color: #12241c;
    background: #fff;
    border: 1px solid #cfd8d3;
    border-radius: 0.5rem;
    box-sizing: border-box;
}

.keep-field input:focus[b-6ivejzrgy1] {
    outline: 2px solid #0b5c3f;
    outline-offset: 1px;
    border-color: #0b5c3f;
}

.keep-hint[b-6ivejzrgy1] {
    margin: 0.35rem 0 0;
    font-size: 0.8125rem;
    color: #6b7a73;
}

/* Blazor marks invalid fields with this class; without a rule the only sign a
   field was rejected was the message underneath it. */
.keep-field input.invalid[b-6ivejzrgy1] {
    border-color: #b3261e;
}

.keep-field .validation-message[b-6ivejzrgy1] {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.875rem;
    color: #b3261e;
}

.keep-errors[b-6ivejzrgy1] {
    margin: 0 0 1.5rem;
    padding: 0.9rem 1rem 0.9rem 2.25rem;
    border-left: 3px solid #b3261e;
    border-radius: 0 0.5rem 0.5rem 0;
    background: #fdf1f0;
    color: #7a1c17;
    font-size: 0.9375rem;
}

.keep-errors li[b-6ivejzrgy1] {
    margin-bottom: 0.25rem;
}

.keep-errors li:last-child[b-6ivejzrgy1] {
    margin-bottom: 0;
}

.keep-button[b-6ivejzrgy1] {
    display: block;
    width: 100%;
    margin-top: 1.5rem;
    padding: 0.85rem 1.5rem;
    border: 0;
    border-radius: 0.6rem;
    background: #0b5c3f;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.keep-button:hover[b-6ivejzrgy1],
.keep-button:focus-visible[b-6ivejzrgy1] {
    background: #0e7350;
    color: #fff;
}

.keep-note[b-6ivejzrgy1] {
    padding: 0.9rem 1.125rem;
    border-left: 3px solid #0b5c3f;
    border-radius: 0 0.5rem 0.5rem 0;
    background: #f1f7f4;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: #2c4a3c;
}

.keep-alternative[b-6ivejzrgy1] {
    margin: 1.5rem 0 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #6b7a73;
}

@media (max-width: 30rem) {
    .keep[b-6ivejzrgy1] {
        padding: 1.5rem 0.75rem;
    }

    .keep-card[b-6ivejzrgy1] {
        padding: 1.75rem 1.25rem;
    }

    .keep-card h1[b-6ivejzrgy1] {
        font-size: 1.5rem;
    }
}
/* /Components/Account/StartTrial.razor.rz.scp.css */
/* The trial entry point. Deliberately one card on a quiet ground: whoever
   arrives here came from a link and has no context, so there is exactly one
   thing to read and one thing to press. */

.trial[b-c6fm1tsyx5] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 70vh;
    padding: 2rem 1rem;
}

.trial-card[b-c6fm1tsyx5] {
    width: 100%;
    max-width: 34rem;
    padding: 2.5rem;
    background: #fff;
    border: 1px solid #e2e6e3;
    border-radius: 1rem;
    box-shadow: 0 1px 2px rgba(18, 36, 28, 0.04),
                0 8px 24px rgba(18, 36, 28, 0.06);
}

.trial-eyebrow[b-c6fm1tsyx5] {
    margin: 0 0 0.5rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #0b5c3f;
}

.trial-card h1[b-c6fm1tsyx5] {
    margin: 0 0 0.75rem;
    font-size: 1.875rem;
    line-height: 1.2;
    color: #12241c;
}

.trial-lede[b-c6fm1tsyx5] {
    margin: 0 0 1.5rem;
    font-size: 1.0625rem;
    line-height: 1.55;
    color: #41514a;
}

.trial-points[b-c6fm1tsyx5] {
    margin: 0 0 1.75rem;
    padding: 0;
    list-style: none;
}

.trial-points li[b-c6fm1tsyx5] {
    position: relative;
    padding-left: 1.75rem;
    margin-bottom: 0.6rem;
    line-height: 1.5;
    color: #2c3b34;
}

/* A tick drawn in CSS rather than an image, so the card stays one request. */
.trial-points li[b-c6fm1tsyx5]::before {
    content: "";
    position: absolute;
    left: 0.25rem;
    top: 0.45rem;
    width: 0.4rem;
    height: 0.75rem;
    border: solid #0b5c3f;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.trial-button[b-c6fm1tsyx5] {
    display: block;
    width: 100%;
    padding: 0.9rem 1.5rem;
    border: 0;
    border-radius: 0.6rem;
    background: #0b5c3f;
    color: #fff;
    font-size: 1.0625rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.trial-button:hover[b-c6fm1tsyx5],
.trial-button:focus-visible[b-c6fm1tsyx5] {
    background: #0e7350;
}

/* The warning is inside the card and above the fold on a phone, because it is
   the one thing somebody will wish they had read. */
.trial-warning[b-c6fm1tsyx5] {
    margin-top: 1.5rem;
    padding: 1rem 1.125rem;
    border-left: 3px solid #b8860b;
    border-radius: 0 0.5rem 0.5rem 0;
    background: #fdf8ec;
}

.trial-warning p[b-c6fm1tsyx5] {
    margin: 0 0 0.75rem;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: #4a3f22;
}

.trial-warning p:last-child[b-c6fm1tsyx5] {
    margin-bottom: 0;
}

.trial-alternative[b-c6fm1tsyx5] {
    margin: 1.5rem 0 0;
    font-size: 0.9375rem;
    color: #5b6a63;
}

.trial-alternative a[b-c6fm1tsyx5] {
    color: #0b5c3f;
    font-weight: 600;
}

@media (max-width: 30rem) {
    .trial-card[b-c6fm1tsyx5] {
        padding: 1.75rem 1.25rem;
    }

    .trial-card h1[b-c6fm1tsyx5] {
        font-size: 1.5rem;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.app-shell[b-k847vk97pk] {
    min-height: 100vh;
    background:
        radial-gradient(
            circle at 94% 0%,
            rgba(203, 156, 128, .16),
            transparent 27%),
        #f3f0e8;
}


.app-header[b-k847vk97pk] {
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid rgba(27, 33, 25, .12);
    background: rgba(243, 240, 232, .94);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}


.app-header-inner[b-k847vk97pk] {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 clamp(16px, 3vw, 38px);
}


.app-main[b-k847vk97pk] {
    min-width: 0;
}


.app-content[b-k847vk97pk] {
    max-width: 1440px;
    min-height: calc(100vh - 78px);
    margin: 0 auto;
    padding:
        20px
        clamp(16px, 3vw, 38px)
        56px;
}


@media (max-width: 760px) {
    .app-header-inner[b-k847vk97pk] {
        padding-left: 12px;
        padding-right: 12px;
    }

    .app-content[b-k847vk97pk] {
        padding: 12px 12px 42px;
    }
}


#blazor-error-ui[b-k847vk97pk] {
    color-scheme: light only;
    background: #f6ded8;
    border-top: 1px solid rgba(221, 100, 77, .38);
    bottom: 0;
    box-shadow: 0 -4px 18px rgba(27, 33, 25, .09);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: .75rem 3rem .75rem 1rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    color: #6f3429;
}


#blazor-error-ui .reload[b-k847vk97pk] {
    margin-left: .5rem;
    color: #00473a;
    font-weight: 800;
}


#blazor-error-ui .dismiss[b-k847vk97pk] {
    cursor: pointer;
    position: absolute;
    right: 1rem;
    top: .7rem;
}


.app-footer[b-k847vk97pk] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 24px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 22px 24px 34px;
    border-top: 1px solid rgba(27, 33, 25, .10);
}

.app-footer-links[b-k847vk97pk] {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.app-footer-links a[b-k847vk97pk] {
    color: #5d6b60;
    font-size: .81rem;
    text-decoration: none;
}

.app-footer-links a:hover[b-k847vk97pk] {
    color: #235c43;
    text-decoration: underline;
}

.app-footer-note[b-k847vk97pk] {
    margin: 0;
    /* #8b9389 measured 2.78:1 on the cream background at 12.5px, which WCAG AA
       needs 4.5:1 for. It rendered correctly and was simply too faint to read —
       it looked like the footer had failed to render its right-hand half. */
    color: #656c62;
    font-size: .78rem;
}

@media (max-width: 520px) {

    /* Stacked rather than split, so neither half is squeezed to one word
       per line on a phone. */
    .app-footer[b-k847vk97pk] {
        justify-content: flex-start;
    }
}


/* ============================================================
   Public chrome
   ------------------------------------------------------------
   Was MarketingLayout.razor.css. Folded in when the two layouts became one:
   scoped styles only reach the component that renders the markup, so with the
   header and footer now rendered here, these rules had to move here too.
   Different class prefixes (.site-* against .app-*), so nothing collides.
   ============================================================ */

.site[b-k847vk97pk] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #fdfcf9;
    color: var(--golf-text);
}


/* ============================================================
   Header
   ============================================================ */

/* Reads as the top of the page rather than a bar sitting on it. The rule line
   and the translucent-blurred panel were what made it a separate object; the
   background is now exactly the page's own, so nothing marks where the header
   stops. Still sticky, and still opaque, so content passes underneath cleanly
   instead of showing through. */
.site-header[b-k847vk97pk] {
    position: sticky;
    top: 0;
    z-index: 20;
    background: #fdfcf9;
}


.site-header-inner[b-k847vk97pk] {
    display: flex;
    align-items: center;
    gap: 30px;
    max-width: 1120px;
    margin: 0 auto;
    padding: 15px 24px;
}


.site-brand[b-k847vk97pk] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
}


/* Was flat green with flat text. A slight gradient and an inner highlight give
   it the dimension a mark needs at 30px, where there is no room for detail. */
.site-brand-mark[b-k847vk97pk] {
    display: grid;
    place-content: center;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background:
        linear-gradient(150deg, #00614e 0%, #00473a 55%, #003428 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .18),
        0 2px 6px rgba(0, 71, 58, .28);
    color: #fff;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .02em;
}


.site-brand:hover .site-brand-mark[b-k847vk97pk] {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .24),
        0 4px 10px rgba(0, 71, 58, .34);
}


.site-brand-name[b-k847vk97pk] {
    font-size: .95rem;
    font-weight: 750;
    letter-spacing: -.02em;
}


.site-nav[b-k847vk97pk] {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-right: auto;
}


.site-nav a[b-k847vk97pk] {
    color: #4a4740;
    font-size: .87rem;
    font-weight: 600;
    text-decoration: none;
}


.site-nav a:hover[b-k847vk97pk] {
    color: var(--golf-green);
}


.site-actions[b-k847vk97pk] {
    display: flex;
    align-items: center;
    gap: 12px;
}


.site-signin[b-k847vk97pk] {
    color: #4a4740;
    font-size: .87rem;
    font-weight: 650;
    text-decoration: none;
}


.site-signin:hover[b-k847vk97pk] {
    color: var(--golf-green);
}


/* ============================================================
   Footer
   ============================================================ */

.site-footer[b-k847vk97pk] {
    margin-top: auto;
    border-top: 1px solid rgba(27, 33, 25, .08);
    background: #faf8f3;
}


.site-footer-inner[b-k847vk97pk] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 30px;
    max-width: 1120px;
    margin: 0 auto;
    padding: 34px 24px 40px;
}


.site-footer-brand[b-k847vk97pk] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    max-width: 340px;
}


.site-footer-brand p[b-k847vk97pk] {
    margin: 4px 0 0;
    color: var(--golf-muted);
    font-size: .84rem;
    line-height: 1.55;
}


.site-footer-links[b-k847vk97pk] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
}


.site-footer-links a[b-k847vk97pk] {
    color: #4a4740;
    font-size: .84rem;
    font-weight: 600;
    text-decoration: none;
}


.site-footer-links a:hover[b-k847vk97pk] {
    color: var(--golf-green);
}


@media (max-width: 760px) {

    .site-header-inner[b-k847vk97pk] {
        gap: 16px;
        padding: 12px 16px;
    }

    /* The header would otherwise wrap onto two rows on a phone. The links are
       repeated in the footer and on the landing page itself, so losing them
       here costs nothing; the two controls that matter stay. */
    .site-nav[b-k847vk97pk] {
        display: none;
    }

    .site-brand-name[b-k847vk97pk] {
        display: none;
    }

    .site-footer-inner[b-k847vk97pk] {
        flex-direction: column;
        padding: 28px 16px 34px;
    }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.topnav-shell[b-bq1o0q9oxf] {
    width: 100%;
}


.topnav-toggle[b-bq1o0q9oxf] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}


.topnav-row[b-bq1o0q9oxf] {
    min-height: 78px;
    display: grid;
    grid-template-columns:
        minmax(220px, auto)
        minmax(0, 1fr)
        auto;
    align-items: center;
    gap: clamp(18px, 3vw, 44px);
}


.topnav-brand[b-bq1o0q9oxf] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 11px;
    color: #1b2119;
    text-decoration: none;
}


.topnav-brand:hover[b-bq1o0q9oxf] {
    color: #1b2119;
    text-decoration: none;
}


.brand-mark[b-bq1o0q9oxf] {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #f3f0e8;
    background: #00473a;
    box-shadow: 0 10px 22px rgba(0, 71, 58, .16);
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: -.01em;
}


.brand-copy[b-bq1o0q9oxf] {
    min-width: 0;
}


.brand-copy strong[b-bq1o0q9oxf],
.brand-copy span[b-bq1o0q9oxf] {
    display: block;
}


.brand-copy strong[b-bq1o0q9oxf] {
    overflow: hidden;
    color: #1b2119;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .92rem;
    font-weight: 820;
    letter-spacing: -.025em;
}


.brand-copy span[b-bq1o0q9oxf] {
    margin-top: 1px;
    color: #7a746d;
    font-size: .61rem;
}


.topnav-links[b-bq1o0q9oxf] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}


.topnav-links[b-bq1o0q9oxf]  .topnav-link {
    position: relative;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border: 1px solid transparent;
    border-radius: 11px;
    color: #6c6a63;
    text-decoration: none;
    font-size: .79rem;
    font-weight: 730;
    transition:
        color .14s ease,
        background .14s ease,
        border-color .14s ease,
        transform .14s ease;
}


.topnav-links[b-bq1o0q9oxf]  .topnav-link:hover {
    color: #00473a;
    background: rgba(208, 216, 200, .5);
    transform: translateY(-1px);
}


.topnav-links[b-bq1o0q9oxf]  .topnav-link.active {
    color: #00473a;
    border-color: rgba(0, 71, 58, .12);
    background: rgba(208, 216, 200, .66);
}


.topnav-links[b-bq1o0q9oxf]  .topnav-link.active::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: -18px;
    height: 3px;
    border-radius: 999px;
    background: #dd644d;
}


.topnav-links[b-bq1o0q9oxf]  .nav-symbol {
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    color: #8f8a82;
}


.topnav-links[b-bq1o0q9oxf]  .topnav-link.active .nav-symbol {
    color: #00473a;
}


.topnav-links[b-bq1o0q9oxf]  .nav-symbol svg {
    width: 17px;
    height: 17px;
}


.topnav-actions[b-bq1o0q9oxf] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}


.live-practice-button[b-bq1o0q9oxf] {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border: 1px solid #c95540;
    border-radius: 11px;
    color: #f3f0e8;
    background: #dd644d;
    box-shadow: 0 9px 22px rgba(221, 100, 77, .17);
    text-decoration: none;
    font-size: .79rem;
    font-weight: 780;
    white-space: nowrap;
    transition:
        transform .14s ease,
        box-shadow .14s ease,
        background .14s ease;
}


.live-practice-button:hover[b-bq1o0q9oxf] {
    color: #f3f0e8;
    background: #c95540;
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(221, 100, 77, .22);
    text-decoration: none;
}


.live-dot[b-bq1o0q9oxf] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #f3f0e8;
    box-shadow: 0 0 0 4px rgba(243, 240, 232, .16);
}


.mobile-nav-toggle[b-bq1o0q9oxf] {
    display: none;
    width: 42px;
    height: 42px;
    place-content: center;
    border: 1px solid rgba(27, 33, 25, .14);
    border-radius: 11px;
    background: #fbf8f1;
    cursor: pointer;
}


/* The checkbox that actually holds focus is opacity:0, so without this a
   keyboard user tabs onto the menu control and nothing whatsoever changes on
   screen — focus is simply invisible. The ring is drawn on the hamburger the
   checkbox controls, which is the thing the user is looking at. */
.topnav-toggle:focus-visible ~ .topnav-row .mobile-nav-toggle[b-bq1o0q9oxf] {
    outline: 3px solid rgba(0, 71, 58, .35);
    outline-offset: 2px;
}


.mobile-nav-toggle span[b-bq1o0q9oxf] {
    display: block;
    width: 16px;
    height: 1.5px;
    margin: 3px auto;
    border-radius: 99px;
    background: #1b2119;
}


.mobile-nav-panel[b-bq1o0q9oxf] {
    display: none;
}


.topnav-account[b-bq1o0q9oxf] {
    display: inline-flex;
    align-items: center;
    max-width: 190px;
    padding: 8px 13px;
    border: 1px solid rgba(27, 33, 25, .14);
    border-radius: 11px;
    background: #fbf8f1;
    color: #2f2d29;
    font-size: .82rem;
    text-decoration: none;
}

.topnav-account:hover[b-bq1o0q9oxf] {
    border-color: rgba(27, 33, 25, .28);
}

/* Quieter than the account chip beside it. Signing out is a thing you want
   findable, not a thing you want to be drawn to — it sits as plain text until
   hovered, when it picks up the same warning colour the app uses elsewhere for
   actions that end something. */
.topnav-signout[b-bq1o0q9oxf] {
    display: inline-flex;
    align-items: center;
    padding: 8px 11px;
    border: 1px solid transparent;
    border-radius: 11px;
    color: #625f58;
    font-size: .82rem;
    font-weight: 650;
    text-decoration: none;
    white-space: nowrap;
}


.topnav-signout:hover[b-bq1o0q9oxf] {
    border-color: rgba(221, 100, 77, .3);
    background: rgba(221, 100, 77, .07);
    color: #b6432c;
}


.topnav-signout:focus-visible[b-bq1o0q9oxf] {
    outline: 3px solid rgba(221, 100, 77, .25);
    outline-offset: 1px;
}


/* An email address is long and its distinguishing part is at the front, so it
   truncates at the end rather than wrapping and pushing the nav taller. */
.topnav-account-name[b-bq1o0q9oxf] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


@media (max-width: 860px) {

    .topnav-row[b-bq1o0q9oxf] {
        grid-template-columns: 1fr auto;
    }


    /* The mobile panel already lists the account and sign-out, so showing the
       chip and the sign-out here as well would be a duplicate. */
    .topnav-account[b-bq1o0q9oxf],
    .topnav-signout[b-bq1o0q9oxf] {
        display: none;
    }


    .topnav-links[b-bq1o0q9oxf] {
        display: none;
    }


    .mobile-nav-toggle[b-bq1o0q9oxf] {
        display: grid;
    }


    .topnav-toggle:checked ~ .mobile-nav-panel[b-bq1o0q9oxf] {
        display: grid;
    }


    .mobile-nav-panel[b-bq1o0q9oxf] {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
        padding: 0 0 12px;
    }


    .mobile-nav-panel[b-bq1o0q9oxf]  .mobile-nav-link {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 42px;
        padding: 8px 10px;
        border: 1px solid rgba(27, 33, 25, .12);
        border-radius: 10px;
        color: #625f58;
        background: #fbf8f1;
        text-decoration: none;
        font-size: .76rem;
        font-weight: 720;
    }


    .mobile-nav-panel[b-bq1o0q9oxf]  .mobile-nav-link.active {
        color: #00473a;
        border-color: rgba(0, 71, 58, .25);
        background: #d0d8c8;
    }
}


@media (max-width: 520px) {

    .brand-copy span[b-bq1o0q9oxf] {
        display: none;
    }


    .brand-copy strong[b-bq1o0q9oxf] {
        max-width: 155px;
    }


    .live-practice-button span:last-child[b-bq1o0q9oxf] {
        display: none;
    }


    .live-practice-button[b-bq1o0q9oxf] {
        width: 42px;
        padding: 0;
        justify-content: center;
    }


    .mobile-nav-panel[b-bq1o0q9oxf] {
        grid-template-columns: 1fr;
    }
}


/* The developer-mode entrance, which only exists when the server says this
   person may use it. Quieter than sign-out and carrying the same amber the
   developer page's own banner uses, so it reads as "you are in a mode" rather
   than as another ordinary destination. */
.topnav-developer[b-bq1o0q9oxf] {
    display: inline-flex;
    align-items: center;
    padding: 8px 11px;
    border: 1px solid rgba(196, 137, 45, .32);
    border-radius: 11px;
    background: rgba(196, 137, 45, .07);
    color: #8a5a1c;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .01em;
    text-decoration: none;
    white-space: nowrap;
}


.topnav-developer:hover[b-bq1o0q9oxf] {
    border-color: rgba(196, 137, 45, .5);
    background: rgba(196, 137, 45, .13);
    color: #6f4715;
}


.topnav-developer:focus-visible[b-bq1o0q9oxf] {
    outline: 3px solid rgba(196, 137, 45, .3);
    outline-offset: 1px;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-7s3gd6hy05],
.components-reconnect-repeated-attempt-visible[b-7s3gd6hy05],
.components-reconnect-failed-visible[b-7s3gd6hy05],
.components-pause-visible[b-7s3gd6hy05],
.components-resume-failed-visible[b-7s3gd6hy05],
.components-rejoining-animation[b-7s3gd6hy05] {
    display: none;
}

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


#components-reconnect-modal[b-7s3gd6hy05] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-7s3gd6hy05 0.5s both;
    &[open]

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

}

#components-reconnect-modal[b-7s3gd6hy05]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-7s3gd6hy05 0.5s ease-in-out;
    opacity: 1;
}

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

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

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

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

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Layout/TrialBanner.razor.rz.scp.css */
/* Always visible while a trial is signed in. Amber rather than red: this is a
   standing condition to act on, not an error that has happened. */

.trial-banner[b-pmodp8xlic] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 1rem;
    padding: 0.6rem 1rem;
    background: #fdf8ec;
    border-bottom: 1px solid #efe0bd;
    font-size: 0.9375rem;
    color: #4a3f22;
}

.trial-banner-text strong[b-pmodp8xlic] {
    color: #7a5c05;
}

.trial-banner-action[b-pmodp8xlic] {
    flex-shrink: 0;
    padding: 0.35rem 0.9rem;
    border-radius: 0.4rem;
    background: #0b5c3f;
    color: #fff;
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    white-space: nowrap;
}

.trial-banner-action:hover[b-pmodp8xlic],
.trial-banner-action:focus-visible[b-pmodp8xlic] {
    background: #0e7350;
    color: #fff;
}

/* On a phone the message wraps to its own line and the action stays reachable
   without hunting for it. */
@media (max-width: 40rem) {
    .trial-banner[b-pmodp8xlic] {
        justify-content: flex-start;
        text-align: left;
    }

    .trial-banner-text[b-pmodp8xlic] {
        flex: 1 1 100%;
    }
}
/* /Components/Pages/DataRow.razor.rz.scp.css */
/* These rules lived in ShotDetails' inline <style>, which worked only because
   an inline block is not scoped. They describe this component's own markup, so
   they belong here — and scoping would otherwise have stopped them matching,
   since a parent's scoped rules do not reach a child's elements without
   ::deep. ShotDetails is the only thing that renders a DataRow. */

.data-row[b-na55faajlg] {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 6px 0;
    border-bottom: 1px solid #eee;
}


.data-row:last-child[b-na55faajlg] {
    border-bottom: none;
}


.data-label[b-na55faajlg] {
    color: #666;
}


.data-value[b-na55faajlg] {
    font-weight: 600;
    text-align: right;
}


/* The linked variant. Kept visually identical at rest so the panel still reads
   as a table of numbers rather than a list of links; the chevron and the tint
   only appear on hover. */
.data-row-link[b-na55faajlg] {
    color: inherit;
    text-decoration: none;
    transition: background .14s ease;
}


.data-row-link:hover[b-na55faajlg] {
    background: #f6f8f6;
    text-decoration: none;
}


.data-row-link:focus-visible[b-na55faajlg] {
    outline: 3px solid rgba(15, 122, 76, .18);
    outline-offset: -3px;
}


.data-row-go[b-na55faajlg] {
    display: inline-block;
    width: 0;
    margin-left: 6px;
    color: var(--golf-green, #00473a);
    opacity: 0;
    transition: opacity .14s ease;
}


.data-row-link:hover .data-row-go[b-na55faajlg],
.data-row-link:focus-visible .data-row-go[b-na55faajlg] {
    opacity: 1;
}
/* /Components/Pages/Developer.razor.rz.scp.css */
/* Developer mode. Deliberately plainer than the rest of the app — this is a
   set of instruments, not a page anyone is meant to enjoy looking at, and it
   should never be mistaken for ordinary application UI. */

.dev-page[b-fdgr0o6vun],
.dev-denied[b-fdgr0o6vun] {
    max-width: 900px;
    margin: 0 auto;
    padding: 25px 4px 56px;
    color: var(--golf-text);
}


/* The clay accent, not the app's green: this is a state you are in, and it
   should read as a warning strip rather than as branding. */
.dev-banner[b-fdgr0o6vun] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
    padding: 10px 16px;
    border: 1px solid rgba(221, 100, 77, .35);
    border-radius: 12px;
    background: rgba(221, 100, 77, .09);
    color: #b6432c;
    font-size: .78rem;
    letter-spacing: .1em;
}


.dev-dot[b-fdgr0o6vun] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #dd644d;
}


.dev-env[b-fdgr0o6vun] {
    margin-left: auto;
    letter-spacing: .04em;
    text-transform: none;
    opacity: .8;
}


.dev-header h1[b-fdgr0o6vun] {
    margin: 0 0 8px;
    font-size: clamp(1.7rem, 3.4vw, 2.3rem);
    font-weight: 770;
    letter-spacing: -.04em;
}


.dev-header p[b-fdgr0o6vun] {
    max-width: 640px;
    margin: 0 0 26px;
    color: var(--golf-muted);
    line-height: 1.6;
}


.dev-card[b-fdgr0o6vun] {
    margin-bottom: 18px;
    padding: 22px;
    border: 1px solid var(--golf-border);
    border-radius: 16px;
    background: var(--golf-surface);
}


.dev-card h2[b-fdgr0o6vun] {
    margin: 0 0 16px;
    font-size: 1.1rem;
    font-weight: 740;
    letter-spacing: -.02em;
}


.dev-muted[b-fdgr0o6vun] {
    margin: 12px 0 0;
    color: var(--golf-muted);
    font-size: .87rem;
    line-height: 1.55;
}


.dev-stats[b-fdgr0o6vun] {
    display: flex;
    gap: 12px;
}


.dev-stat[b-fdgr0o6vun] {
    flex: 1;
    padding: 16px;
    border: 1px solid rgba(27, 33, 25, .08);
    border-radius: 12px;
    background: #fbf8f1;
}


.dev-stat-test[b-fdgr0o6vun] {
    border-color: rgba(221, 100, 77, .28);
    background: rgba(221, 100, 77, .06);
}


.dev-stat strong[b-fdgr0o6vun] {
    display: block;
    font-size: 1.5rem;
    font-weight: 760;
    font-variant-numeric: tabular-nums;
}


.dev-stat span[b-fdgr0o6vun] {
    color: var(--golf-muted);
    font-size: .78rem;
}


.dev-button[b-fdgr0o6vun] {
    margin-top: 16px;
    padding: 9px 15px;
    border: 1px solid transparent;
    border-radius: 11px;
    font-size: .86rem;
    font-weight: 700;
    cursor: pointer;
}


.dev-button:disabled[b-fdgr0o6vun] {
    opacity: .6;
    cursor: default;
}


.dev-danger[b-fdgr0o6vun] {
    border-color: rgba(221, 100, 77, .35);
    background: rgba(221, 100, 77, .1);
    color: #b6432c;
}


.dev-danger:hover:not(:disabled)[b-fdgr0o6vun] {
    background: rgba(221, 100, 77, .16);
}


.dev-result[b-fdgr0o6vun] {
    margin: 12px 0 0;
    color: var(--golf-green);
    font-size: .87rem;
    font-weight: 650;
}


/* Two columns of label/value. Monospaced values so versions and timings line
   up and stay readable when they are the thing you are comparing. */
.dev-facts[b-fdgr0o6vun] {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 9px 18px;
    margin: 0;
}


.dev-facts dt[b-fdgr0o6vun] {
    color: var(--golf-muted);
    font-size: .84rem;
}


.dev-facts dd[b-fdgr0o6vun] {
    margin: 0;
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        monospace;
    font-size: .83rem;
    word-break: break-word;
}


.dev-ok[b-fdgr0o6vun] {
    color: #2f7d5c;
}


.dev-bad[b-fdgr0o6vun] {
    color: #b6432c;
}


@media (max-width: 620px) {

    .dev-facts[b-fdgr0o6vun] {
        grid-template-columns: 1fr;
        gap: 2px 0;
    }

    .dev-facts dd[b-fdgr0o6vun] {
        margin-bottom: 10px;
    }

    .dev-stats[b-fdgr0o6vun] {
        flex-direction: column;
    }
}


/* Input rows for the diagnostics panels. */
.dev-row[b-fdgr0o6vun] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    margin-top: 14px;
}


.dev-row .dev-button[b-fdgr0o6vun] {
    margin-top: 0;
    border-color: var(--golf-border);
    background: #fff;
    color: var(--golf-text);
}


.dev-row .dev-button:hover:not(:disabled)[b-fdgr0o6vun] {
    border-color: rgba(27, 33, 25, .3);
}


.dev-input[b-fdgr0o6vun] {
    width: 130px;
    padding: 9px 12px;
    border: 1px solid var(--golf-border);
    border-radius: 11px;
    background: #fff;
    font: inherit;
    font-size: .86rem;
}


.dev-input:focus-visible[b-fdgr0o6vun] {
    outline: 3px solid rgba(0, 71, 58, .18);
    outline-offset: 1px;
}


/* The analysis and voice panels answer with prose as often as numbers, so this
   block relaxes the monospace the system facts want. */
.dev-card .dev-facts dd > div[b-fdgr0o6vun] {
    margin-bottom: 3px;
}


/* The only place test shots are visible, so it has to carry the id you need. */
.dev-list[b-fdgr0o6vun] {
    margin-top: 16px;
    border: 1px solid rgba(27, 33, 25, .1);
    border-radius: 12px;
    overflow: hidden;
}


.dev-list-row[b-fdgr0o6vun] {
    display: grid;
    grid-template-columns: .5fr 1.2fr 1fr 1fr;
    gap: 12px;
    padding: 9px 14px;
    border-top: 1px solid rgba(27, 33, 25, .07);
    font-size: .83rem;
    font-variant-numeric: tabular-nums;
}


.dev-list-row:first-child[b-fdgr0o6vun] {
    border-top: 0;
}


.dev-list-head[b-fdgr0o6vun] {
    background: #f8f4eb;
    color: var(--golf-muted);
    font-size: .58rem;
    font-weight: 850;
    letter-spacing: .09em;
}


/* =====================================================
   PIPELINE TRACES AND IMPORT DIAGNOSTICS
   ===================================================== */

.dev-note[b-fdgr0o6vun] {
    padding: 12px 14px;
    border-left: 3px solid rgba(221, 100, 77, .5);
    border-radius: 0 8px 8px 0;
    background: rgba(221, 100, 77, .05);
}


.dev-quiet[b-fdgr0o6vun] {
    border-color: rgba(27, 33, 25, .16);
    background: transparent;
    color: var(--golf-ink);
    text-decoration: none;
}


.dev-trace[b-fdgr0o6vun] {
    margin-top: 16px;
    border: 1px solid rgba(27, 33, 25, .1);
    border-radius: 12px;
    background: #fbf8f1;
    overflow: hidden;
}


.dev-trace-head[b-fdgr0o6vun] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 9px;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(27, 33, 25, .08);
    background: #f8f4eb;
    font-size: .87rem;
}


.dev-trace-head .dev-muted[b-fdgr0o6vun] {
    margin: 0;
    font-size: .78rem;
}


.dev-trace-link[b-fdgr0o6vun] {
    margin-left: auto;
    font-size: .78rem;
    font-weight: 700;
}


.dev-pill[b-fdgr0o6vun] {
    padding: 3px 8px;
    border-radius: 999px;
    font-size: .58rem;
    font-weight: 850;
    letter-spacing: .08em;
}


.dev-pill-ok[b-fdgr0o6vun] {
    background: rgba(47, 125, 92, .14);
    color: #24614a;
}


.dev-pill-warned[b-fdgr0o6vun] {
    background: rgba(196, 137, 45, .16);
    color: #8a5a1c;
}


.dev-pill-skipped[b-fdgr0o6vun] {
    background: rgba(27, 33, 25, .09);
    color: var(--golf-muted);
}


.dev-pill-failed[b-fdgr0o6vun] {
    background: rgba(182, 67, 44, .14);
    color: #b6432c;
}


.dev-stages[b-fdgr0o6vun] {
    margin: 0;
    padding: 0;
    list-style: none;
}


/* The waterfall. Three columns so the stage names line up down the left and
   the timings down the right, which is what makes a gap between two stages
   visible as a gap rather than as prose. */
.dev-stage[b-fdgr0o6vun] {
    display: grid;
    grid-template-columns: 165px 1fr 66px;
    gap: 12px;
    padding: 10px 14px;
    border-top: 1px solid rgba(27, 33, 25, .06);
    font-size: .83rem;
    line-height: 1.5;
}


.dev-stage:first-child[b-fdgr0o6vun] {
    border-top: 0;
}


.dev-stage-name[b-fdgr0o6vun] {
    position: relative;
    padding-left: 16px;
    font-weight: 700;
}


/* The status dot. Sized and placed off the text baseline so a column of them
   reads as a track down the side of the list. */
.dev-stage-name[b-fdgr0o6vun]::before {
    content: "";
    position: absolute;
    top: .5em;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(27, 33, 25, .2);
}


.dev-stage-ok .dev-stage-name[b-fdgr0o6vun]::before {
    background: #2f7d5c;
}


.dev-stage-warned .dev-stage-name[b-fdgr0o6vun]::before {
    background: #c4892d;
}


.dev-stage-failed .dev-stage-name[b-fdgr0o6vun]::before {
    background: #b6432c;
}


.dev-stage-skipped .dev-stage-name[b-fdgr0o6vun]::before {
    background: rgba(27, 33, 25, .28);
}


/* Never reached. Hollow rather than filled, so an unreached stage does not
   read as a quiet success. */
.dev-stage-none .dev-stage-name[b-fdgr0o6vun]::before {
    background: transparent;
    box-shadow: inset 0 0 0 1.5px rgba(27, 33, 25, .22);
}


.dev-stage-none .dev-stage-name[b-fdgr0o6vun] {
    color: var(--golf-muted);
    font-weight: 600;
}


.dev-stage-ms[b-fdgr0o6vun] {
    color: var(--golf-muted);
    font-size: .76rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
}


.dev-stage-notes[b-fdgr0o6vun] {
    margin: 6px 0 0;
    padding-left: 16px;
    color: var(--golf-muted);
    font-size: .79rem;
}


.dev-stage-notes li[b-fdgr0o6vun] {
    margin-bottom: 2px;
}


.dev-import-outcome[b-fdgr0o6vun] {
    margin: 0;
    padding: 11px 14px;
    border-bottom: 1px solid rgba(27, 33, 25, .07);
    font-size: .85rem;
    font-weight: 650;
}


.dev-trace .dev-stats[b-fdgr0o6vun],
.dev-trace .dev-facts[b-fdgr0o6vun] {
    padding: 14px;
}


.dev-stats-tight .dev-stat[b-fdgr0o6vun] {
    padding: 11px;
}


.dev-stats-tight .dev-stat strong[b-fdgr0o6vun] {
    font-size: 1.15rem;
}


.dev-event[b-fdgr0o6vun] {
    color: var(--golf-muted);
    font-size: .79rem;
    font-variant-numeric: tabular-nums;
}


@media (max-width: 620px) {

    .dev-stage[b-fdgr0o6vun] {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .dev-stage-ms[b-fdgr0o6vun] {
        text-align: left;
    }

    .dev-trace-link[b-fdgr0o6vun] {
        margin-left: 0;
    }
}


.dev-trace-footnote[b-fdgr0o6vun] {
    margin: 0;
    padding: 10px 14px;
    border-top: 1px solid rgba(27, 33, 25, .07);
    background: #f8f4eb;
    color: var(--golf-muted);
    font-size: .78rem;
    line-height: 1.5;
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* Moved out of an inline <style> block in the component.

   Inline styles are re-sent inside the HTML on every render and are not scoped,
   so each page's rules applied to every other page that happened to be visited
   afterwards. Scoped means these rules reach this component only, and the
   browser caches them. */

.modern-page[b-46cy2pm0tm] {
    max-width: 1280px;
    margin: 0 auto;
    padding: 24px 4px 56px;
    color: var(--golf-text);
}


.workspace-section[b-46cy2pm0tm] {
    margin-top: 28px;
}


.section-heading[b-46cy2pm0tm] {
    margin-bottom: 14px;
}


.section-heading h2[b-46cy2pm0tm],
.workflow-copy h2[b-46cy2pm0tm] {
    margin: 4px 0 0;
    font-size: 1.55rem;
    font-weight: 760;
    letter-spacing: -.03em;
}


.workspace-grid[b-46cy2pm0tm] {
    display: grid;
    grid-template-columns:
    1.15fr
    1fr
    1fr;
    gap: 14px;
}


.workspace-card[b-46cy2pm0tm] {
    min-height: 270px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 22px;
    border: 1px solid var(--golf-border);
    border-radius: 20px;
    background: var(--golf-surface);
    color: var(--golf-text);
    text-decoration: none;
    transition:
    transform .16s ease,
    box-shadow .16s ease,
    border-color .16s ease;
}


.workspace-card:hover[b-46cy2pm0tm] {
    transform: translateY(-3px);
    border-color: #c7cbbf;
    box-shadow:
    0 16px 34px rgba(20, 48, 36, .08);
    color: var(--golf-text);
    text-decoration: none;
}


.featured-card[b-46cy2pm0tm] {
    background:
    linear-gradient(
    145deg,
    #fffdf8 0%,
    #f4faf6 100%);
}


.card-top[b-46cy2pm0tm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}


.card-icon[b-46cy2pm0tm] {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: #d0d8c8;
    color: #54625b;
    font-size: .74rem;
    font-weight: 850;
}


.live-icon[b-46cy2pm0tm] {
    position: relative;
    background: var(--golf-green);
}


.pulse-ring[b-46cy2pm0tm] {
    width: 10px;
    height: 10px;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow:
    0 0 0 7px rgba(255, 255, 255, .13);
}


.card-badge[b-46cy2pm0tm] {
    padding: 4px 7px;
    border-radius: 7px;
    background: var(--golf-green-soft);
    color: var(--golf-green);
    font-size: .59rem;
    font-weight: 900;
    letter-spacing: .09em;
}


.card-kicker[b-46cy2pm0tm] {
    margin-bottom: 5px;
    color: var(--golf-green);
    font-size: .63rem;
    font-weight: 850;
    letter-spacing: .1em;
}


.workspace-card h3[b-46cy2pm0tm] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 740;
    letter-spacing: -.025em;
}


.workspace-card p[b-46cy2pm0tm] {
    margin: 8px 0 0;
    color: var(--golf-muted);
    font-size: .88rem;
    line-height: 1.55;
}


.card-link[b-46cy2pm0tm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 18px;
    border-top: 1px solid #e6e0d6;
    color: #33423a;
    font-size: .83rem;
    font-weight: 720;
}


.workflow-strip[b-46cy2pm0tm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin-top: 20px;
    padding: 24px;
    border: 1px solid var(--golf-border);
    border-radius: 20px;
    background: #fbf8f1;
}


.workflow-steps[b-46cy2pm0tm] {
    display: flex;
    align-items: center;
    gap: 14px;
}


.workflow-step[b-46cy2pm0tm] {
    display: flex;
    align-items: center;
    gap: 9px;
}


.step-number[b-46cy2pm0tm] {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--golf-green-soft);
    color: var(--golf-green);
    font-size: .66rem;
    font-weight: 900;
}


.workflow-step strong[b-46cy2pm0tm],
.workflow-step small[b-46cy2pm0tm] {
    display: block;
}


.workflow-step strong[b-46cy2pm0tm] {
    font-size: .84rem;
}


.workflow-step small[b-46cy2pm0tm] {
    color: var(--golf-muted);
    font-size: .68rem;
}


.workflow-arrow[b-46cy2pm0tm] {
    color: #a5aea9;
}


@media (max-width: 980px) {


    .workspace-grid[b-46cy2pm0tm] {
        grid-template-columns: 1fr 1fr;
    }


    .featured-card[b-46cy2pm0tm] {
        grid-column: 1 / -1;
    }


    .workflow-strip[b-46cy2pm0tm] {
        align-items: flex-start;
        flex-direction: column;
    }
}


@media (max-width: 650px) {


    .modern-page[b-46cy2pm0tm] {
        padding-top: 10px;
    }


    .workspace-grid[b-46cy2pm0tm] {
        grid-template-columns: 1fr;
    }


    .featured-card[b-46cy2pm0tm] {
        grid-column: auto;
    }


    .workspace-card[b-46cy2pm0tm] {
        min-height: 235px;
    }


    .workflow-steps[b-46cy2pm0tm] {
        width: 100%;
        align-items: stretch;
        flex-direction: column;
    }


    .workflow-arrow[b-46cy2pm0tm] {
        display: none;
    }
}


/* Sits under the workspace heading, which now says something different
   depending on whether the account has any history behind it. */
.section-note[b-46cy2pm0tm] {
    max-width: 620px;
    margin: 8px 0 0;
    color: var(--golf-muted);
    font-size: .92rem;
    line-height: 1.55;
}


/* ============================================================
   The homey half
   ------------------------------------------------------------
   Everything above this belongs to the hero, which the public landing shows
   too. From here down the page belongs to whoever signed in, so it warms up:
   cream instead of white, softer corners, a greeting instead of a label, and
   their own numbers rather than a pitch.
   ============================================================ */

.welcome[b-46cy2pm0tm] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 22px;
    padding: 4px 3px 0;
}


.welcome-greeting[b-46cy2pm0tm] {
    margin: 0 0 6px;
    color: var(--golf-green);
    font-size: .95rem;
    font-weight: 650;
}


.welcome-copy h2[b-46cy2pm0tm] {
    margin: 0;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 750;
    letter-spacing: -.035em;
}


.welcome-note[b-46cy2pm0tm] {
    max-width: 560px;
    margin: 9px 0 0;
    color: var(--golf-muted);
    font-size: .93rem;
    line-height: 1.55;
}


/* Their own totals, sitting quietly beside the greeting rather than announced
   as statistics. Tabular figures so the numbers do not jitter as they change. */
.welcome-stats[b-46cy2pm0tm] {
    display: flex;
    flex: none;
    gap: 10px;
}


.welcome-stat[b-46cy2pm0tm] {
    min-width: 84px;
    padding: 12px 16px;
    border: 1px solid rgba(27, 33, 25, .07);
    border-radius: 14px;
    background: #fbf8f1;
    text-align: center;
}


.welcome-stat strong[b-46cy2pm0tm] {
    display: block;
    font-size: 1.3rem;
    font-weight: 760;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
}


.welcome-stat span[b-46cy2pm0tm] {
    display: block;
    margin-top: 2px;
    color: var(--golf-muted);
    font-size: .72rem;
    font-weight: 600;
}


/* Warmer than the marketing cards: cream ground, softer border, rounder
   corners, and a lift on hover rather than a hard shadow. */
.workspace-card[b-46cy2pm0tm] {
    border-color: rgba(27, 33, 25, .08);
    border-radius: 18px;
    background: #fffdf8;
    transition:
        transform .16s ease,
        box-shadow .16s ease;
}


.workspace-card:hover[b-46cy2pm0tm] {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px rgba(20, 48, 36, .09);
}


@media (max-width: 760px) {

    .welcome[b-46cy2pm0tm] {
        align-items: flex-start;
        flex-direction: column;
        gap: 18px;
    }

    .welcome-stats[b-46cy2pm0tm] {
        width: 100%;
    }

    .welcome-stat[b-46cy2pm0tm] {
        flex: 1;
        min-width: 0;
    }
}
/* /Components/Pages/Landing.razor.rz.scp.css */
/* Landing page. Follows the reference site's rhythm — a pill, a two-tone
   headline, a short subhead, paired pill buttons, then a framed product view —
   in this app's cream-and-green palette rather than its blue-on-white. */

.hero[b-p1psgtikry] {
    max-width: 1120px;
    margin: 0 auto;
    padding: 74px 24px 0;
}


.hero-inner[b-p1psgtikry] {
    max-width: 720px;
}


.pill[b-p1psgtikry] {
    display: inline-block;
    margin-bottom: 22px;
    padding: 6px 14px;
    border: 1px solid rgba(0, 71, 58, .18);
    border-radius: 999px;
    background: rgba(0, 71, 58, .05);
    color: var(--golf-green);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .01em;
}


.hero h1[b-p1psgtikry] {
    margin: 0 0 20px;
    font-size: clamp(2.3rem, 5.4vw, 3.9rem);
    line-height: 1.04;
    font-weight: 780;
    letter-spacing: -.045em;
}


/* The second clause in a lighter weight and the green, which is what gives the
   reference headline its two-tone read. */
.hero h1 span[b-p1psgtikry] {
    display: block;
    color: var(--golf-green);
    font-weight: 620;
}


.hero-sub[b-p1psgtikry] {
    max-width: 560px;
    margin: 0 0 28px;
    color: #4a4740;
    font-size: 1.02rem;
    line-height: 1.62;
}


.hero-actions[b-p1psgtikry] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 11px;
}


.hero-note[b-p1psgtikry] {
    margin: 20px 0 0;
    color: var(--golf-muted);
    font-size: .84rem;
    line-height: 1.55;
}


/* ============================================================
   Framed product view
   ============================================================ */

.hero-frame[b-p1psgtikry] {
    max-width: 1000px;
    margin: 54px auto 0;
    border: 1px solid rgba(27, 33, 25, .1);
    border-radius: 16px 16px 0 0;
    background: #fff;
    box-shadow: 0 30px 70px rgba(20, 48, 36, .13);
    overflow: hidden;
}


.frame-bar[b-p1psgtikry] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 11px 14px;
    border-bottom: 1px solid rgba(27, 33, 25, .08);
    background: #f6f4ef;
}


.frame-bar > span[b-p1psgtikry] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(27, 33, 25, .16);
}


.frame-address[b-p1psgtikry] {
    flex: 1;
    margin-left: 8px;
    padding: 4px 12px;
    border-radius: 999px;
    background: #fff;
    color: var(--golf-muted);
    font-size: .72rem;
    text-align: center;
}


.frame-body[b-p1psgtikry] {
    padding: 20px;
}


.frame-stats[b-p1psgtikry] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}


.frame-stat[b-p1psgtikry] {
    padding: 14px 16px;
    border: 1px solid rgba(27, 33, 25, .09);
    border-radius: 12px;
    background: #fffdf8;
}


.frame-stat-lead[b-p1psgtikry] {
    border-color: transparent;
    background: var(--golf-green);
}


.frame-stat small[b-p1psgtikry] {
    display: block;
    color: var(--golf-muted);
    font-size: .58rem;
    font-weight: 850;
    letter-spacing: .1em;
}


.frame-stat-lead small[b-p1psgtikry] {
    color: rgba(255, 255, 255, .68);
}


.frame-stat strong[b-p1psgtikry] {
    display: block;
    margin-top: 4px;
    font-size: 1.35rem;
    font-weight: 760;
    letter-spacing: -.03em;
}


.frame-stat-lead strong[b-p1psgtikry] {
    color: #fff;
}


.frame-list[b-p1psgtikry] {
    border: 1px solid rgba(27, 33, 25, .09);
    border-radius: 12px;
    overflow: hidden;
}


.frame-row[b-p1psgtikry] {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1fr 1fr;
    gap: 12px;
    padding: 11px 16px;
    border-top: 1px solid rgba(27, 33, 25, .07);
    font-size: .82rem;
}


.frame-row:first-child[b-p1psgtikry] {
    border-top: 0;
}


.frame-row-head[b-p1psgtikry] {
    background: #f8f4eb;
    color: var(--golf-muted);
    font-size: .58rem;
    font-weight: 850;
    letter-spacing: .09em;
}


.frame-row span:nth-child(2)[b-p1psgtikry] {
    font-weight: 650;
}


.frame-row span:nth-child(3)[b-p1psgtikry],
.frame-row span:nth-child(4)[b-p1psgtikry] {
    color: var(--golf-muted);
    font-variant-numeric: tabular-nums;
}


/* ============================================================
   Bands and sections
   ============================================================ */

.facts[b-p1psgtikry] {
    max-width: 1120px;
    margin: 0 auto;
    padding: 46px 24px 8px;
}


.facts-inner[b-p1psgtikry] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}


.fact[b-p1psgtikry] {
    padding: 18px 18px 20px;
    border-top: 2px solid var(--golf-green-soft);
}


.fact strong[b-p1psgtikry] {
    display: block;
    margin-bottom: 6px;
    font-size: .95rem;
    font-weight: 720;
    letter-spacing: -.02em;
}


.fact span[b-p1psgtikry] {
    color: var(--golf-muted);
    font-size: .85rem;
    line-height: 1.5;
}


@media (max-width: 900px) {

    .facts-inner[b-p1psgtikry] {
        grid-template-columns: 1fr 1fr;
    }
}


@media (max-width: 560px) {

    .facts[b-p1psgtikry] {
        padding: 34px 16px 4px;
    }

    .facts-inner[b-p1psgtikry] {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}


.band[b-p1psgtikry] {
    border-bottom: 1px solid rgba(27, 33, 25, .07);
    background: #faf8f3;
}


.band-note[b-p1psgtikry] {
    max-width: 1120px;
    margin: 0 auto;
    padding: 22px 24px;
    color: var(--golf-muted);
    font-size: .87rem;
    text-align: center;
}


.section[b-p1psgtikry] {
    max-width: 1120px;
    margin: 0 auto;
    padding: 76px 24px;
}


.section-head[b-p1psgtikry] {
    max-width: 660px;
    margin-bottom: 40px;
}


.eyebrow[b-p1psgtikry] {
    display: block;
    margin-bottom: 12px;
    color: var(--golf-green);
    font-size: .68rem;
    font-weight: 850;
    letter-spacing: .14em;
    text-transform: uppercase;
}


.section-head h2[b-p1psgtikry] {
    margin: 0 0 14px;
    font-size: clamp(1.75rem, 3.6vw, 2.6rem);
    line-height: 1.1;
    font-weight: 760;
    letter-spacing: -.04em;
}


.section-head h2 span[b-p1psgtikry] {
    display: block;
    color: var(--golf-green);
    font-weight: 620;
}


.section-head p[b-p1psgtikry] {
    margin: 0;
    color: #4a4740;
    line-height: 1.62;
}


.steps[b-p1psgtikry] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}


/* A link now, not a card: each step has its own page. Colour and underline are
   reset so it still reads as a panel rather than as body-text link. */
.step[b-p1psgtikry] {
    display: flex;
    flex-direction: column;
    padding: 26px 24px 24px;
    border: 1px solid rgba(27, 33, 25, .1);
    border-radius: 16px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    transition:
        transform .16s ease,
        border-color .16s ease,
        box-shadow .16s ease;
}


.step:hover[b-p1psgtikry] {
    transform: translateY(-2px);
    border-color: rgba(0, 71, 58, .28);
    box-shadow: 0 16px 34px rgba(20, 48, 36, .1);
    text-decoration: none;
}


.step:focus-visible[b-p1psgtikry] {
    outline: 3px solid rgba(0, 71, 58, .25);
    outline-offset: 2px;
}


/* Sits below the tag and only colours up on hover, so the card does not read as
   two competing calls to action while at rest. */
.step-go[b-p1psgtikry] {
    margin-top: 14px;
    color: var(--golf-muted);
    font-size: .82rem;
    font-weight: 700;
}


.step:hover .step-go[b-p1psgtikry] {
    color: var(--golf-green);
}


.step-index[b-p1psgtikry] {
    color: var(--golf-green);
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .1em;
}


.step h3[b-p1psgtikry] {
    margin: 12px 0 9px;
    font-size: 1.18rem;
    font-weight: 740;
    letter-spacing: -.025em;
}


.step p[b-p1psgtikry] {
    margin: 0 0 18px;
    color: #4a4740;
    font-size: .92rem;
    line-height: 1.6;
}


.tag[b-p1psgtikry] {
    margin-top: auto;
    padding: 5px 11px;
    border-radius: 999px;
    background: #f1efe8;
    color: var(--golf-muted);
    font-size: .72rem;
    font-weight: 650;
    align-self: flex-start;
}


/* ============================================================
   Closing call to action
   ============================================================ */

.cta[b-p1psgtikry] {
    padding: 0 24px 84px;
}


.cta-inner[b-p1psgtikry] {
    max-width: 1072px;
    margin: 0 auto;
    padding: 54px 40px 58px;
    border-radius: 22px;
    background: var(--golf-green);
    color: #fff;
    text-align: center;
}


.cta-inner h2[b-p1psgtikry] {
    margin: 0 0 12px;
    font-size: clamp(1.7rem, 3.4vw, 2.4rem);
    font-weight: 760;
    letter-spacing: -.04em;
}


.cta-inner p[b-p1psgtikry] {
    max-width: 520px;
    margin: 0 auto 26px;
    color: rgba(255, 255, 255, .8);
    line-height: 1.6;
}


.cta .hero-actions[b-p1psgtikry] {
    justify-content: center;
}


/* On the green panel the solid button would disappear into the background, so
   the two controls swap: the light one leads. */
.cta .site-button-solid[b-p1psgtikry] {
    background: #fff;
    color: var(--golf-green);
    box-shadow: none;
}


.cta .site-button-ghost[b-p1psgtikry] {
    border-color: rgba(255, 255, 255, .3);
    background: transparent;
    color: #fff;
}


@media (max-width: 900px) {

    .steps[b-p1psgtikry] {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 760px) {

    .hero[b-p1psgtikry] {
        padding: 46px 16px 0;
    }

    .section[b-p1psgtikry] {
        padding: 56px 16px;
    }

    .hero-frame[b-p1psgtikry] {
        margin-top: 38px;
    }

    .frame-stats[b-p1psgtikry] {
        grid-template-columns: 1fr;
    }

    /* Four numeric columns will not fit a phone at a readable size; the date
       and club identify the row, the carry is what the picture is selling. */
    .frame-row span:nth-child(4)[b-p1psgtikry] {
        display: none;
    }

    .frame-row[b-p1psgtikry] {
        grid-template-columns: 1fr 1.2fr 1fr;
    }

    .cta[b-p1psgtikry] {
        padding: 0 16px 60px;
    }

    .cta-inner[b-p1psgtikry] {
        padding: 40px 22px 44px;
    }

    .hero-actions .site-button[b-p1psgtikry] {
        flex: 1;
    }
}


/* ============================================================
   Feature showcase
   ------------------------------------------------------------
   Moved here when the separate /features page was folded into this one. The
   pill, eyebrow and closing-panel rules are not repeated — this page already
   defines them, and duplicating them would mean two places to change a colour.
   ============================================================ */

.feat-hero[b-p1psgtikry] {
    max-width: 1120px;
    margin: 0 auto;
    padding: 70px 24px 12px;
}


.feat-hero h1[b-p1psgtikry] {
    max-width: 760px;
    margin: 0 0 18px;
    font-size: clamp(2.1rem, 4.8vw, 3.4rem);
    line-height: 1.06;
    font-weight: 780;
    letter-spacing: -.045em;
}


.feat-hero h1 span[b-p1psgtikry] {
    display: block;
    color: var(--golf-green);
    font-weight: 620;
}


.feat-hero p[b-p1psgtikry] {
    max-width: 600px;
    margin: 0;
    color: #4a4740;
    font-size: 1.02rem;
    line-height: 1.62;
}

.feat[b-p1psgtikry] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 56px;
    max-width: 1120px;
    margin: 0 auto;
    padding: 62px 24px;
}
.feat-reverse .feat-copy[b-p1psgtikry] {
    order: 2;
}


.feat-copy h2[b-p1psgtikry] {
    margin: 0 0 14px;
    font-size: clamp(1.6rem, 3.2vw, 2.2rem);
    line-height: 1.12;
    font-weight: 760;
    letter-spacing: -.038em;
}


.feat-copy > p[b-p1psgtikry] {
    margin: 0 0 22px;
    color: #4a4740;
    line-height: 1.62;
}


.feat-points[b-p1psgtikry] {
    margin: 0;
    padding: 0;
    list-style: none;
}


.feat-points li[b-p1psgtikry] {
    position: relative;
    margin-bottom: 15px;
    padding-left: 20px;
    color: #4a4740;
    font-size: .92rem;
    line-height: 1.58;
}


.feat-points li[b-p1psgtikry]::before {
    content: "";
    position: absolute;
    top: .55em;
    left: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--golf-green-soft);
}


.feat-points strong[b-p1psgtikry] {
    color: var(--golf-text);
    font-weight: 700;
}

.mock[b-p1psgtikry] {
    border: 1px solid rgba(27, 33, 25, .1);
    border-radius: 16px;
    background: #fff;
    box-shadow:
        0 1px 2px rgba(20, 48, 36, .05),
        0 20px 46px rgba(20, 48, 36, .1);
    overflow: hidden;
}


.mock-head[b-p1psgtikry] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 13px 17px;
    border-bottom: 1px solid rgba(27, 33, 25, .08);
    background: #f8f6f1;
    font-size: .8rem;
    font-weight: 700;
}


/* A real mark rather than a coloured dot. The dot said "this is a panel"; the
   icon says which panel, before the heading is read. */
.mock-icon[b-p1psgtikry] {
    flex: none;
    width: 17px;
    height: 17px;
    color: var(--golf-green);
}


.mock-dark .mock-icon[b-p1psgtikry] {
    color: #6fcf97;
}


/* The imported/skipped split, drawn. */
.mock-bar[b-p1psgtikry] {
    display: flex;
    height: 8px;
    margin-top: 16px;
    border-radius: 99px;
    background: #e6ded3;
    overflow: hidden;
}


.mock-bar-fill[b-p1psgtikry] {
    display: block;
    height: 100%;
    border-radius: 99px 0 0 99px;
    background: linear-gradient(90deg, #00473a, #2f7d5c);
}


.mock-legend[b-p1psgtikry] {
    display: flex;
    gap: 16px;
    margin-top: 9px;
    color: var(--golf-muted);
    font-size: .74rem;
}


.mock-legend span[b-p1psgtikry],
.mock-delivery-keys span[b-p1psgtikry] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}


.key[b-p1psgtikry] {
    width: 9px;
    height: 9px;
    border-radius: 3px;
}


.key-in[b-p1psgtikry]    { background: #2f7d5c; }
.key-skip[b-p1psgtikry]  { background: #e6ded3; }
.key-face[b-p1psgtikry]  { background: #6fcf97; }
.key-path[b-p1psgtikry]  { background: #dd8a6b; }


/* Face against path on the dark coach panel. */
.mock-delivery[b-p1psgtikry] {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, .09);
}


.mock-delivery svg[b-p1psgtikry] {
    display: block;
    width: 100%;
    height: auto;
}


.mock-delivery-keys[b-p1psgtikry] {
    display: flex;
    gap: 16px;
    margin-top: 4px;
    color: rgba(255, 255, 255, .62);
    font-size: .74rem;
}


.mock-body[b-p1psgtikry] {
    padding: 16px 17px;
}


.mock-body-flush[b-p1psgtikry] {
    padding: 0;
}


.mock-line[b-p1psgtikry] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 9px 0;
    border-bottom: 1px solid rgba(27, 33, 25, .06);
    font-size: .87rem;
}


.mock-line:last-of-type[b-p1psgtikry] {
    border-bottom: 0;
}


.mock-line span[b-p1psgtikry] {
    color: var(--golf-muted);
}


.mock-line strong[b-p1psgtikry] {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}


.mock-line-muted strong[b-p1psgtikry] {
    color: var(--golf-muted);
}


.mock-note[b-p1psgtikry] {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(27, 33, 25, .06);
    color: var(--golf-muted);
    font-size: .78rem;
    line-height: 1.5;
}


.mock-row[b-p1psgtikry] {
    display: grid;
    grid-template-columns: .6fr 1.2fr 1fr 1fr;
    gap: 12px;
    padding: 10px 17px;
    border-top: 1px solid rgba(27, 33, 25, .06);
    font-size: .83rem;
}


.mock-row-head[b-p1psgtikry] {
    border-top: 0;
    background: #f8f4eb;
    color: var(--golf-muted);
    font-size: .57rem;
    font-weight: 850;
    letter-spacing: .09em;
}


.mock-row span:nth-child(2)[b-p1psgtikry] {
    font-weight: 650;
}


.mock-row span:nth-child(3)[b-p1psgtikry],
.mock-row span:nth-child(4)[b-p1psgtikry] {
    color: var(--golf-muted);
    font-variant-numeric: tabular-nums;
}
.mock-dark[b-p1psgtikry] {
    border-color: transparent;
    background: #14211c;
    color: #fff;
}


.mock-dark .mock-head[b-p1psgtikry] {
    border-bottom-color: rgba(255, 255, 255, .1);
    background: rgba(255, 255, 255, .04);
    color: #fff;
}


.mock-metric small[b-p1psgtikry] {
    display: block;
    color: rgba(255, 255, 255, .5);
    font-size: .58rem;
    font-weight: 850;
    letter-spacing: .1em;
}


.mock-metric strong[b-p1psgtikry] {
    display: block;
    margin-top: 3px;
    font-size: 2rem;
    font-weight: 760;
    letter-spacing: -.04em;
}


.mock-metric em[b-p1psgtikry] {
    font-size: .9rem;
    font-style: normal;
    color: rgba(255, 255, 255, .55);
}


.mock-quote[b-p1psgtikry] {
    margin: 14px 0;
    padding: 13px 15px;
    border-radius: 11px;
    background: rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .88);
    font-size: .87rem;
    line-height: 1.55;
}


.mock-line-dark[b-p1psgtikry] {
    border-bottom-color: rgba(255, 255, 255, .09);
}


.mock-line-dark span[b-p1psgtikry] {
    color: rgba(255, 255, 255, .55);
}


.mock-line-dark strong[b-p1psgtikry] {
    color: #fff;
}


@media (max-width: 900px) {

    .feat[b-p1psgtikry] {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 44px 24px;
    }

    /* Stacked, the copy always leads — a mock with no explanation above it is
       just decoration. */
    .feat-reverse .feat-copy[b-p1psgtikry] {
        order: 0;
    }
}


@media (max-width: 760px) {

    .feat-hero[b-p1psgtikry] {
        padding: 46px 16px 8px;
    }

    .feat[b-p1psgtikry] {
        padding: 38px 16px;
    }

    .mock-row span:nth-child(4)[b-p1psgtikry] {
        display: none;
    }

    .mock-row[b-p1psgtikry] {
        grid-template-columns: .6fr 1.2fr 1fr;
    }

    .cta[b-p1psgtikry] {
        padding: 20px 16px 60px;
    }

    .cta-inner[b-p1psgtikry] {
        padding: 40px 22px 44px;
    }

    .hero-actions .site-button[b-p1psgtikry] {
        flex: 1;
    }
}
/* /Components/Pages/Pricing.razor.rz.scp.css */
/* Pricing. The layout is complete whether or not there are numbers in it — the
   only thing that changes when pricing goes live is what sits in .price-amount,
   so the page is not being redesigned on the day money starts moving. */

.price-hero[b-udw50dj9ya] {
    max-width: 1120px;
    margin: 0 auto;
    padding: 66px 24px 8px;
}


.pill[b-udw50dj9ya] {
    display: inline-block;
    margin-bottom: 20px;
    padding: 6px 14px;
    border: 1px solid rgba(0, 71, 58, .18);
    border-radius: 999px;
    background: rgba(0, 71, 58, .05);
    color: var(--golf-green);
    font-size: .76rem;
    font-weight: 700;
}


.price-hero h1[b-udw50dj9ya] {
    max-width: 720px;
    margin: 0 0 18px;
    font-size: clamp(2rem, 4.6vw, 3.2rem);
    line-height: 1.06;
    font-weight: 780;
    letter-spacing: -.045em;
}


.price-hero h1 span[b-udw50dj9ya] {
    display: block;
    color: var(--golf-green);
    font-weight: 620;
}


.price-lead[b-udw50dj9ya] {
    max-width: 560px;
    margin: 0;
    color: #4a4740;
    font-size: 1.02rem;
    line-height: 1.62;
}


/* Stated once, at the top, in the app's warning colour rather than a cheerful
   ribbon — the point is that a visitor should not think these are real prices. */
.price-notice[b-udw50dj9ya] {
    max-width: 640px;
    padding: 14px 18px;
    border: 1px solid rgba(221, 100, 77, .3);
    border-radius: 12px;
    background: rgba(221, 100, 77, .07);
    color: #8f3520;
    font-size: .92rem;
    line-height: 1.6;
}


.price-notice strong[b-udw50dj9ya] {
    margin-right: 6px;
}


/* ============================================================
   Tiers
   ============================================================ */

.price-grid[b-udw50dj9ya] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    max-width: 1120px;
    margin: 0 auto;
    padding: 40px 24px 10px;
    align-items: start;
}


.price-card[b-udw50dj9ya] {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 28px 26px 26px;
    border: 1px solid rgba(27, 33, 25, .12);
    border-radius: 18px;
    background: #fff;
}


.price-card-lead[b-udw50dj9ya] {
    border-color: rgba(0, 71, 58, .3);
    box-shadow:
        0 1px 2px rgba(20, 48, 36, .05),
        0 18px 40px rgba(20, 48, 36, .1);
}


.price-badge[b-udw50dj9ya] {
    position: absolute;
    top: -11px;
    left: 26px;
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--golf-green);
    color: #fff;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}


.price-card h2[b-udw50dj9ya] {
    margin: 0 0 4px;
    font-size: 1.24rem;
    font-weight: 760;
    letter-spacing: -.025em;
}


.price-tagline[b-udw50dj9ya] {
    margin: 0 0 18px;
    color: var(--golf-muted);
    font-size: .89rem;
    line-height: 1.5;
}


.price-amount[b-udw50dj9ya] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid rgba(27, 33, 25, .09);
}


.price-amount strong[b-udw50dj9ya] {
    font-size: 2.1rem;
    font-weight: 780;
    letter-spacing: -.04em;
}


.price-amount span[b-udw50dj9ya] {
    color: var(--golf-muted);
    font-size: .85rem;
}


/* While pricing is off this is the real state, not a placeholder, so it is
   coloured as a fact rather than greyed out like something missing. */
.price-tbc[b-udw50dj9ya] {
    color: var(--golf-green);
}


.price-features[b-udw50dj9ya] {
    flex: 1;
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
}


.price-features li[b-udw50dj9ya] {
    position: relative;
    margin-bottom: 10px;
    padding-left: 24px;
    color: #4a4740;
    font-size: .9rem;
    line-height: 1.55;
}


/* A tick drawn in CSS: two borders rotated, so there is no icon font or extra
   request for a mark that appears fifteen times. */
.price-features li[b-udw50dj9ya]::before {
    content: "";
    position: absolute;
    top: .34em;
    left: 2px;
    width: 5px;
    height: 9px;
    border: solid var(--golf-green);
    border-width: 0 2px 2px 0;
    transform: rotate(43deg);
}


.price-cta[b-udw50dj9ya] {
    width: 100%;
}


/* ============================================================
   Questions
   ============================================================ */

.price-faq[b-udw50dj9ya] {
    max-width: 1120px;
    margin: 0 auto;
    padding: 54px 24px 10px;
}


.price-faq > h2[b-udw50dj9ya] {
    margin: 0 0 26px;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 760;
    letter-spacing: -.035em;
}


.price-faq-grid[b-udw50dj9ya] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px 40px;
}


.price-faq h3[b-udw50dj9ya] {
    margin: 0 0 8px;
    font-size: 1rem;
    font-weight: 720;
}


.price-faq p[b-udw50dj9ya] {
    margin: 0;
    color: #4a4740;
    font-size: .93rem;
    line-height: 1.62;
}


/* ============================================================
   Closing panel — matches the landing's
   ============================================================ */

.cta[b-udw50dj9ya] {
    padding: 46px 24px 84px;
}


.cta-inner[b-udw50dj9ya] {
    max-width: 1072px;
    margin: 0 auto;
    padding: 54px 40px 58px;
    border-radius: 22px;
    background: var(--golf-green);
    color: #fff;
    text-align: center;
}


.cta-inner h2[b-udw50dj9ya] {
    margin: 0 0 12px;
    font-size: clamp(1.7rem, 3.4vw, 2.4rem);
    font-weight: 760;
    letter-spacing: -.04em;
}


.cta-inner p[b-udw50dj9ya] {
    max-width: 520px;
    margin: 0 auto 26px;
    color: rgba(255, 255, 255, .8);
    line-height: 1.6;
}


.hero-actions[b-udw50dj9ya] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 11px;
}


.cta .site-button-solid[b-udw50dj9ya] {
    background: #fff;
    color: var(--golf-green);
    box-shadow: none;
}


.cta .site-button-ghost[b-udw50dj9ya] {
    border-color: rgba(255, 255, 255, .3);
    background: transparent;
    color: #fff;
}


@media (max-width: 940px) {

    .price-grid[b-udw50dj9ya] {
        grid-template-columns: 1fr;
        max-width: 560px;
    }

    .price-faq-grid[b-udw50dj9ya] {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 620px) {

    .price-hero[b-udw50dj9ya] {
        padding: 44px 16px 4px;
    }

    .price-grid[b-udw50dj9ya] {
        padding: 32px 16px 6px;
    }

    .price-faq[b-udw50dj9ya] {
        padding: 40px 16px 4px;
    }

    .cta[b-udw50dj9ya] {
        padding: 34px 16px 60px;
    }

    .cta-inner[b-udw50dj9ya] {
        padding: 40px 22px 44px;
    }

    .hero-actions .site-button[b-udw50dj9ya] {
        flex: 1;
    }
}
/* /Components/Pages/ShotDetails.razor.rz.scp.css */
/* Moved out of an inline <style> block in the component.

   Inline styles are re-sent inside the HTML on every render and are not scoped,
   so each page's rules applied to every other page visited afterwards. Scoped
   means these rules reach this component only, and the browser caches them. */

.analysis-table td[b-2jzzfs32fb],
.analysis-table th[b-2jzzfs32fb] {
    vertical-align: middle;
}


.analysis-good[b-2jzzfs32fb] {
    font-weight: 600;
    color: green;
}


/* Better than the band rather than inside it. Distinct from plain good so the
   table can show which shots were the ones worth keeping. */
.analysis-exceeds[b-2jzzfs32fb] {
    font-weight: 700;
    color: #24614a;
}


.analysis-bad[b-2jzzfs32fb] {
    font-weight: 600;
    color: #c62828;
}


.ml-stat[b-2jzzfs32fb] {
    padding: 14px;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    height: 100%;
}


.ml-label[b-2jzzfs32fb] {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 3px;
}


.ml-value[b-2jzzfs32fb] {
    font-size: 1.5rem;
    font-weight: 700;
}


.shot-navigation[b-2jzzfs32fb] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
}


.shot-navigation > div:first-child[b-2jzzfs32fb] {
    text-align: left;
}


.shot-navigation > div:nth-child(2)[b-2jzzfs32fb] {
    text-align: center;
}


.shot-navigation > div:last-child[b-2jzzfs32fb] {
    text-align: right;
}



/* =====================================================
   CLUB DELIVERY VISUAL
   ===================================================== */

.club-delivery-layout[b-2jzzfs32fb] {
    display: grid;
    grid-template-columns:
    minmax(190px, 1fr)
    minmax(230px, 0.9fr);
    gap: 24px;
    align-items: center;
}


.club-delivery-data[b-2jzzfs32fb] {
    min-width: 0;
}


.club-delivery-visual[b-2jzzfs32fb] {
    min-width: 0;
    padding-left: 20px;
    border-left: 1px solid #eeeeee;
}


.club-delivery-visual svg[b-2jzzfs32fb] {
    display: block;
    width: 100%;
    max-width: 310px;
    height: auto;
    margin: 0 auto;
    overflow: visible;
}


.club-delivery-visual-empty[b-2jzzfs32fb] {
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #777;
    font-size: 0.9rem;
}


.club-target-line[b-2jzzfs32fb] {
    stroke: #c7ccd3;
    stroke-width: 2;
    stroke-dasharray: 7 7;
}


.club-target-label[b-2jzzfs32fb] {
    fill: #6b7280;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
}


.club-target-arrow[b-2jzzfs32fb] {
    fill: #6b7280;
}


.club-target-line-label[b-2jzzfs32fb] {
    fill: #9ca3af;
    font-size: 9px;
}


.club-path-line[b-2jzzfs32fb] {
    stroke: #2563eb;
    stroke-width: 5;
    stroke-linecap: round;
}


.club-path-arrow-marker[b-2jzzfs32fb] {
    fill: #2563eb;
}


.club-face-line[b-2jzzfs32fb] {
    stroke: #dc2626;
    stroke-width: 7;
    stroke-linecap: round;
}


.club-face-end[b-2jzzfs32fb] {
    stroke: #dc2626;
    stroke-width: 2;
}


.club-ball[b-2jzzfs32fb] {
    fill: white;
    stroke: #374151;
    stroke-width: 2;
}


.club-ball-dimple[b-2jzzfs32fb] {
    fill: #d1d5db;
}


.club-impact-label[b-2jzzfs32fb] {
    fill: #9ca3af;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1px;
}


.club-visual-legend[b-2jzzfs32fb] {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: -3px;
    font-size: 0.85rem;
}


.club-visual-legend-item[b-2jzzfs32fb] {
    display: flex;
    align-items: center;
    gap: 6px;
}


.club-visual-dot[b-2jzzfs32fb] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: 0 0 auto;
}


.club-visual-dot.path[b-2jzzfs32fb] {
    background: #2563eb;
}


.club-visual-dot.face[b-2jzzfs32fb] {
    background: #dc2626;
}


.club-visual-summary[b-2jzzfs32fb] {
    margin-top: 10px;
    text-align: center;
    color: #666;
    font-size: 0.78rem;
    line-height: 1.45;
}


@media (max-width: 1050px) {

    .club-delivery-layout[b-2jzzfs32fb] {
        grid-template-columns: 1fr;
    }


    .club-delivery-visual[b-2jzzfs32fb] {
        padding-left: 0;
        padding-top: 18px;
        border-left: none;
        border-top: 1px solid #eeeeee;
    }
}


@media (max-width: 600px) {

    .shot-navigation[b-2jzzfs32fb] {
        grid-template-columns: 1fr;
    }


    .shot-navigation > div[b-2jzzfs32fb] {
        text-align: center !important;
    }


    .shot-navigation button[b-2jzzfs32fb],
    .shot-navigation a[b-2jzzfs32fb] {
        width: 100%;
    }
}


/* Which standard the Target column came from. On its own line so it reads as a
   caveat on the whole table rather than as part of the club's name. */
.analysis-standard[b-2jzzfs32fb] {
    display: block;
    margin-top: 3px;
    color: var(--golf-muted, #706d66);
    font-size: .78rem;
    font-weight: 500;
}


/* The unset case earns a touch more contrast: it is the one a reader should act
   on, and the link is the action. */
.analysis-standard-default a[b-2jzzfs32fb] {
    color: var(--golf-green, #00473a);
    font-weight: 650;
}
/* /Components/Pages/ShotMetricDetail.razor.rz.scp.css */
/* The explainer for one measurement. Reads as a page of prose with the reader's
   own number pinned at the top, rather than as another dashboard. */

.metric-page[b-tr3118fskk] {
    max-width: 760px;
    margin: 0 auto;
    padding: 22px 4px 64px;
    color: var(--golf-text);
}


.metric-back[b-tr3118fskk] {
    display: inline-block;
    margin-bottom: 18px;
    color: var(--golf-muted);
    font-size: .85rem;
    font-weight: 650;
    text-decoration: none;
}


.metric-back:hover[b-tr3118fskk] {
    color: var(--golf-green);
}


.metric-eyebrow[b-tr3118fskk] {
    display: block;
    margin-bottom: 8px;
    color: var(--golf-green);
    font-size: .68rem;
    font-weight: 850;
    letter-spacing: .14em;
    text-transform: uppercase;
}


.metric-page h1[b-tr3118fskk] {
    margin: 0 0 12px;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    line-height: 1.08;
    font-weight: 780;
    letter-spacing: -.04em;
}


.metric-lead[b-tr3118fskk] {
    margin: 0 0 28px;
    color: #4a4740;
    font-size: 1.02rem;
    line-height: 1.62;
}


.metric-loading[b-tr3118fskk] {
    padding: 40px 0;
    color: var(--golf-muted);
}


/* The reader's own number and the verdict on it, side by side. */
.metric-yours[b-tr3118fskk] {
    display: grid;
    grid-template-columns: minmax(180px, .8fr) 1.4fr;
    gap: 16px;
    margin-bottom: 34px;
}


.metric-reading[b-tr3118fskk] {
    padding: 20px;
    border: 1px solid var(--golf-border);
    border-radius: 16px;
    background: var(--golf-surface);
}


.metric-reading small[b-tr3118fskk] {
    display: block;
    color: var(--golf-muted);
    font-size: .6rem;
    font-weight: 850;
    letter-spacing: .11em;
}


.metric-reading strong[b-tr3118fskk] {
    display: block;
    margin: 6px 0 2px;
    font-size: 2.1rem;
    font-weight: 780;
    letter-spacing: -.04em;
    font-variant-numeric: tabular-nums;
}


.metric-reading span[b-tr3118fskk] {
    color: var(--golf-muted);
    font-size: .84rem;
}


.metric-verdict[b-tr3118fskk] {
    padding: 20px;
    border: 1px solid var(--golf-border);
    border-radius: 16px;
    background: #fff;
}


.metric-verdict p[b-tr3118fskk] {
    margin: 0 0 8px;
    color: #4a4740;
    font-size: .93rem;
    line-height: 1.6;
}


.metric-verdict p:last-child[b-tr3118fskk] {
    margin-bottom: 0;
}


.metric-verdict-head[b-tr3118fskk] {
    margin-bottom: 8px;
    font-size: .68rem;
    font-weight: 850;
    letter-spacing: .11em;
    text-transform: uppercase;
}


.metric-good[b-tr3118fskk] {
    border-color: rgba(47, 125, 92, .32);
    background: rgba(47, 125, 92, .05);
}


.metric-good .metric-verdict-head[b-tr3118fskk] {
    color: #2f7d5c;
}


/* Past the top of the band, on a measurement where there is no such thing as
   too much. Green like Good, but warmer and with the accent border, because
   this is the one verdict on the page worth being pleased about. */
.metric-exceeds[b-tr3118fskk] {
    border-color: rgba(47, 125, 92, .5);
    background: linear-gradient(
        180deg,
        rgba(47, 125, 92, .1),
        rgba(47, 125, 92, .04));
}


.metric-exceeds .metric-verdict-head[b-tr3118fskk] {
    color: #24614a;
}


/* Amber, not red. A shot outside the band is worth a look, not a telling-off,
   and the coaching tone everywhere else on the site is the same. */
.metric-bad[b-tr3118fskk] {
    border-color: rgba(155, 107, 82, .34);
    background: rgba(155, 107, 82, .06);
}


.metric-bad .metric-verdict-head[b-tr3118fskk] {
    color: #8a5a3c;
}


/* Not a failure state — the app simply has no benchmark for this one, and says
   so in the same neutral register it would report anything else. */
.metric-nobenchmark .metric-verdict-head[b-tr3118fskk] {
    color: var(--golf-muted);
}


.metric-benchmark[b-tr3118fskk] {
    padding-top: 8px;
    border-top: 1px solid rgba(27, 33, 25, .08);
    font-size: .86rem;
}


.metric-block[b-tr3118fskk] {
    margin-bottom: 26px;
}


.metric-block h2[b-tr3118fskk] {
    margin: 0 0 8px;
    font-size: 1.12rem;
    font-weight: 750;
    letter-spacing: -.022em;
}


.metric-block p[b-tr3118fskk] {
    margin: 0;
    color: #4a4740;
    line-height: 1.68;
}


/* Every other measurement from the same shot, so the page is a way through the
   shot rather than a dead end. */
.metric-others[b-tr3118fskk] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 8px;
}


.metric-others a[b-tr3118fskk] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 14px;
    border: 1px solid rgba(27, 33, 25, .1);
    border-radius: 11px;
    background: #fff;
    color: inherit;
    text-decoration: none;
}


.metric-others a:hover[b-tr3118fskk] {
    border-color: rgba(0, 71, 58, .28);
    background: #f9fbfa;
    text-decoration: none;
}


.metric-others span[b-tr3118fskk] {
    color: var(--golf-muted);
    font-size: .78rem;
}


.metric-others strong[b-tr3118fskk] {
    font-size: .88rem;
    font-variant-numeric: tabular-nums;
}


@media (max-width: 620px) {

    .metric-yours[b-tr3118fskk] {
        grid-template-columns: 1fr;
    }
}


/* Which standard the band came from. Quiet, but present — a benchmark with no
   stated basis invites the reader to assume it is theirs. */
.metric-standard[b-tr3118fskk] {
    display: block;
    margin-top: 4px;
    color: var(--golf-muted);
    font-size: .8rem;
}
/* /Components/Pages/ShotsByDate.razor.rz.scp.css */
/* Scoped rather than an inline <style> block, which is what the other pages in
   this folder use. Scoped keeps these rules off every other page, and lets the
   browser cache them instead of re-sending them inside the HTML on each render.

   The --golf-* tokens are declared on the page wrapper rather than :root,
   for two reasons. CSS isolation rewrites selectors to carry this component's
   scope attribute, so a :root rule here would compile to a selector that never
   matches. And the tokens are not actually global today — Home, Shots and
   Upload each declare their own copy inside their inline <style>, so on a
   direct load of this page there is nothing defining them. Children inherit
   them from the wrapper, so this page stands on its own either way. */
.session-day-page[b-g5c9wya8ur] {
    --golf-surface: #fffdf8;
    --golf-surface-soft: #f8f4eb;
    --golf-border: #d7d2c8;
    --golf-text: #1b2119;
    --golf-muted: #706d66;
    --golf-green: #00473a;
    --golf-shadow: 0 18px 50px rgba(20, 48, 36, .08);

    max-width: 1180px;
    margin: 0 auto;
    padding: 25px 4px 56px;
    color: var(--golf-text);
}


.day-header[b-g5c9wya8ur] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 24px;
    padding: 14px 3px 4px;
}


.eyebrow[b-g5c9wya8ur] {
    color: var(--golf-green);
    font-size: .68rem;
    font-weight: 850;
    letter-spacing: .14em;
    text-transform: uppercase;
}


.day-header h1[b-g5c9wya8ur] {
    margin: 7px 0 8px;
    /* Clamped like the sessions heading, but from a smaller floor: a full date
       is a much longer string than "Golf Sessions" and wraps to three lines on
       a phone at the larger size. */
    font-size: clamp(1.7rem, 4vw, 2.9rem);
    line-height: 1.05;
    font-weight: 780;
    letter-spacing: -.04em;
}


.day-header p[b-g5c9wya8ur] {
    max-width: 620px;
    margin: 0;
    color: var(--golf-muted);
    line-height: 1.55;
}


.header-actions[b-g5c9wya8ur] {
    display: flex;
    align-items: center;
    gap: 9px;
}


.page-button[b-g5c9wya8ur] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 9px 14px;
    border: 1px solid transparent;
    border-radius: 11px;
    font-size: .85rem;
    font-weight: 720;
    text-decoration: none;
    transition:
        transform .15s ease,
        background .15s ease;
}


.page-button:hover[b-g5c9wya8ur] {
    transform: translateY(-1px);
    text-decoration: none;
}


.primary-button[b-g5c9wya8ur] {
    background: var(--golf-green);
    color: #fff;
    box-shadow: 0 8px 20px rgba(15, 122, 76, .16);
}


.secondary-button[b-g5c9wya8ur] {
    border-color: var(--golf-border);
    background: #fff;
    color: var(--golf-text);
}


.state-panel[b-g5c9wya8ur],
.empty-panel[b-g5c9wya8ur],
.shot-panel[b-g5c9wya8ur] {
    border: 1px solid var(--golf-border);
    border-radius: 18px;
    background: var(--golf-surface);
    box-shadow: var(--golf-shadow);
    overflow: hidden;
}


.state-panel[b-g5c9wya8ur] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 26px 22px;
}


.state-title[b-g5c9wya8ur] {
    color: var(--golf-text);
    font-weight: 730;
}


.state-copy[b-g5c9wya8ur] {
    margin-top: 2px;
    color: var(--golf-muted);
    font-size: .83rem;
}


.loading-mark[b-g5c9wya8ur] {
    flex: none;
    width: 28px;
    height: 28px;
    border: 3px solid #d7d2c8;
    border-top-color: var(--golf-green);
    border-radius: 50%;
    animation: spin-b-g5c9wya8ur 1s linear infinite;
}


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


/* Respects a reduced-motion preference: the spinner still reads as a spinner
   standing still, and a continuous rotation is exactly what that setting is
   asking us not to do. */
@media (prefers-reduced-motion: reduce) {

    .loading-mark[b-g5c9wya8ur] {
        animation: none;
    }
}


.empty-panel[b-g5c9wya8ur] {
    min-height: 350px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 35px 22px;
    text-align: center;
}


.empty-mark[b-g5c9wya8ur] {
    display: grid;
    place-content: center;
    width: 54px;
    height: 54px;
    margin-bottom: 14px;
    border-radius: 16px;
    background: #e8ede3;
    color: var(--golf-green);
    font-size: .95rem;
    font-weight: 800;
}


.empty-panel h2[b-g5c9wya8ur] {
    margin: 5px 0 8px;
    font-size: 1.5rem;
    letter-spacing: -.025em;
}


.empty-panel p[b-g5c9wya8ur] {
    max-width: 530px;
    margin: 0;
    color: var(--golf-muted);
    line-height: 1.55;
}


.empty-actions[b-g5c9wya8ur] {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 20px;
}


.panel-heading[b-g5c9wya8ur] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 21px 15px;
    border-bottom: 1px solid #e6e0d6;
}


.panel-heading h2[b-g5c9wya8ur] {
    margin: 4px 0 0;
    font-size: 1.35rem;
    font-weight: 750;
    letter-spacing: -.025em;
}


.shot-count[b-g5c9wya8ur] {
    color: var(--golf-muted);
    font-size: .78rem;
}


.shot-list-header[b-g5c9wya8ur],
.shot-row[b-g5c9wya8ur] {
    display: grid;
    grid-template-columns:
        .6fr
        1.4fr
        1fr
        1fr;
    gap: 18px;
    align-items: center;
    padding: 12px 18px;
}


.shot-list-header[b-g5c9wya8ur] {
    background: var(--golf-surface-soft);
    color: var(--golf-muted);
    font-size: .61rem;
    font-weight: 850;
    letter-spacing: .09em;
}


.shot-row[b-g5c9wya8ur] {
    width: 100%;
    border: 0;
    border-top: 1px solid #e6e0d6;
    background: #fff;
    color: var(--golf-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background .14s ease;
}


.shot-row:hover[b-g5c9wya8ur] {
    position: relative;
    z-index: 1;
    background: #f9fbfa;
}


.shot-row:focus-visible[b-g5c9wya8ur] {
    outline: 3px solid rgba(15, 122, 76, .15);
    outline-offset: -3px;
}


.club-cell[b-g5c9wya8ur] {
    font-weight: 650;
}


.carry-cell[b-g5c9wya8ur],
.spin-cell[b-g5c9wya8ur] {
    color: var(--golf-muted);
    font-variant-numeric: tabular-nums;
}


@media (max-width: 760px) {

    .day-header[b-g5c9wya8ur] {
        align-items: flex-start;
        flex-direction: column;
    }


    .header-actions[b-g5c9wya8ur] {
        width: 100%;
    }


    .header-actions .page-button[b-g5c9wya8ur] {
        flex: 1;
    }
}


@media (max-width: 470px) {

    /* Four columns of numbers do not fit a narrow phone at a readable size, so
       the gap and padding tighten rather than a column being dropped — every
       one of these four is the reason someone opened the session. */
    .shot-list-header[b-g5c9wya8ur],
    .shot-row[b-g5c9wya8ur] {
        gap: 8px;
        padding: 11px 12px;
        font-size: .86rem;
    }


    .shot-list-header[b-g5c9wya8ur] {
        font-size: .58rem;
    }


    .empty-actions[b-g5c9wya8ur] {
        align-items: stretch;
        flex-direction: column;
        width: 100%;
    }


    .empty-actions .page-button[b-g5c9wya8ur] {
        width: 100%;
    }
}
/* /Components/Pages/Upload.razor.rz.scp.css */
/* Moved out of an inline <style> block in the component.

   Inline styles are re-sent inside the HTML on every render and are not scoped,
   so each page's rules applied to every other page that happened to be visited
   afterwards. Scoped means these rules reach this component only, and the
   browser caches them. */

.upload-page[b-ix6kskw2vt] {
    /* The import result states — a rejected file, a partial import — are the
       only place in the app that needs these, so they stay with this page
       rather than joining the shared palette in app.css. Declared on the
       wrapper because CSS isolation rewrites :root to a selector that never
       matches. (--golf-blue/-soft were declared alongside these originally and
       referenced by nothing, so they are not carried over.) */
    --golf-red: #dd644d;
    --golf-red-soft: #f6ded8;
    --golf-amber: #9b6b52;
    --golf-amber-soft: #ead8cc;

    max-width: 1180px;
    margin: 0 auto;
    padding: 25px 4px 56px;
    color: var(--golf-text);
}


.eyebrow[b-ix6kskw2vt],
.result-kicker[b-ix6kskw2vt] {
    color: var(--golf-green);
    font-size: .68rem;
    font-weight: 850;
    letter-spacing: .14em;
    text-transform: uppercase;
}


.upload-header[b-ix6kskw2vt] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 24px;
    padding: 14px 3px 4px;
}


.upload-header h1[b-ix6kskw2vt] {
    margin: 7px 0 8px;
    font-size: clamp(2.2rem, 5vw, 3.8rem);
    line-height: 1;
    font-weight: 780;
    letter-spacing: -.05em;
}


.upload-header p[b-ix6kskw2vt] {
    max-width: 650px;
    margin: 0;
    color: var(--golf-muted);
    line-height: 1.55;
}


.page-button[b-ix6kskw2vt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 9px 14px;
    border: 1px solid transparent;
    border-radius: 11px;
    font-size: .85rem;
    font-weight: 720;
    text-decoration: none;
    transition:
    transform .15s ease,
    background .15s ease,
    opacity .15s ease;
}


.page-button:hover:not(:disabled)[b-ix6kskw2vt] {
    transform: translateY(-1px);
    text-decoration: none;
}


.page-button:disabled[b-ix6kskw2vt] {
    cursor: not-allowed;
    opacity: .62;
}


.primary-button[b-ix6kskw2vt] {
    background: var(--golf-green);
    color: #fff;
    box-shadow:
    0 8px 20px rgba(15, 122, 76, .16);
}


.primary-button:hover:not(:disabled)[b-ix6kskw2vt] {
    background: var(--golf-green-dark);
    color: #fff;
}


.secondary-button[b-ix6kskw2vt] {
    border-color: var(--golf-border);
    background: #fff;
    color: var(--golf-text);
}


.secondary-button:hover[b-ix6kskw2vt] {
    background: #f8f4eb;
    color: var(--golf-text);
}


.upload-layout[b-ix6kskw2vt] {
    display: grid;
    grid-template-columns:
    minmax(520px, 1.45fr)
    minmax(280px, .65fr);
    gap: 18px;
    align-items: start;
}


.upload-panel[b-ix6kskw2vt],
.import-guide[b-ix6kskw2vt] {
    border: 1px solid var(--golf-border);
    border-radius: 22px;
    background: #fff;
}


.upload-panel[b-ix6kskw2vt] {
    padding: 22px;
    box-shadow: var(--golf-shadow);
}


.panel-heading[b-ix6kskw2vt] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 17px;
}


.panel-heading h2[b-ix6kskw2vt],
.import-guide h2[b-ix6kskw2vt],
.success-result h2[b-ix6kskw2vt] {
    margin: 4px 0 0;
    font-size: 1.35rem;
    font-weight: 750;
    letter-spacing: -.025em;
}


.file-type-badge[b-ix6kskw2vt] {
    padding: 5px 8px;
    border-radius: 7px;
    background: var(--golf-green-soft);
    color: var(--golf-green);
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .08em;
}


.file-zone[b-ix6kskw2vt] {
    min-height: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 28px;
    border: 1.5px dashed #c7cbbf;
    border-radius: 18px;
    background:
    linear-gradient(
    145deg,
    #fbf8f1 0%,
    #f1ece2 100%);
    text-align: center;
    transition:
    border-color .16s ease,
    background .16s ease;
}


.file-zone-selected[b-ix6kskw2vt] {
    border-color: #aebaa8;
    background:
    linear-gradient(
    145deg,
    #fbfefc 0%,
    #dbe0d5 100%);
}


.file-zone-icon[b-ix6kskw2vt] {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin-bottom: 15px;
    border-radius: 18px;
    background: var(--golf-green-soft);
    color: var(--golf-green);
    font-size: 1.45rem;
    font-weight: 800;
}


.file-zone-title[b-ix6kskw2vt] {
    font-size: 1.08rem;
    font-weight: 740;
}


.file-zone-copy[b-ix6kskw2vt] {
    margin-top: 5px;
    color: var(--golf-muted);
    font-size: .82rem;
}


.file-picker-button[b-ix6kskw2vt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 16px;
    padding: 9px 14px;
    border: 1px solid var(--golf-border);
    border-radius: 10px;
    background: #fff;
    color: var(--golf-text);
    cursor: pointer;
    font-size: .83rem;
    font-weight: 720;
    transition:
    transform .14s ease,
    background .14s ease;
}


.file-picker-button:hover[b-ix6kskw2vt] {
    transform: translateY(-1px);
    background: #f8f4eb;
}


/* ::deep, because <InputFile> renders the actual <input> itself. CSS isolation
   stamps this component's scope onto elements this component renders, and that
   input is not one of them — so a plain .hidden-file-input stopped matching the
   moment these rules moved out of the unscoped inline <style>. The native file
   input then rendered at full width and pushed the page sideways. */
.file-picker-button[b-ix6kskw2vt]  .hidden-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}


.selected-file-row[b-ix6kskw2vt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 13px;
    padding: 13px;
    border: 1px solid var(--golf-border);
    border-radius: 14px;
    background: var(--golf-surface-soft);
}


.selected-file-info[b-ix6kskw2vt] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 11px;
}


.selected-file-mark[b-ix6kskw2vt] {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: #d0d8c8;
    color: #52615a;
    font-size: .61rem;
    font-weight: 900;
    letter-spacing: .05em;
}


.selected-file-info > div:last-child[b-ix6kskw2vt] {
    min-width: 0;
}


.selected-file-info strong[b-ix6kskw2vt],
.selected-file-info span[b-ix6kskw2vt] {
    display: block;
}


.selected-file-info strong[b-ix6kskw2vt] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .86rem;
}


.selected-file-info span[b-ix6kskw2vt] {
    margin-top: 2px;
    color: var(--golf-muted);
    font-size: .72rem;
}


.import-button[b-ix6kskw2vt] {
    flex: 0 0 auto;
}


.button-spinner[b-ix6kskw2vt] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, .4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin-b-ix6kskw2vt .8s linear infinite;
}


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


.result-card[b-ix6kskw2vt],
.success-result[b-ix6kskw2vt] {
    margin-top: 14px;
    border-radius: 16px;
}


.result-card[b-ix6kskw2vt] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 15px;
}


.result-icon[b-ix6kskw2vt] {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    font-weight: 850;
}


.result-card strong[b-ix6kskw2vt] {
    display: block;
    margin-top: 2px;
    font-size: .9rem;
}


.result-card p[b-ix6kskw2vt] {
    margin: 4px 0 0;
    font-size: .78rem;
}


.error-result[b-ix6kskw2vt] {
    border: 1px solid #e7b8ad;
    background: var(--golf-red-soft);
    color: #82333a;
}


.error-result .result-kicker[b-ix6kskw2vt] {
    color: var(--golf-red);
}


.error-result .result-icon[b-ix6kskw2vt] {
    background: #efc8bf;
    color: var(--golf-red);
}


.duplicate-result[b-ix6kskw2vt] {
    border: 1px solid #dbc4b5;
    background: var(--golf-amber-soft);
    color: #795421;
}


.duplicate-result .result-kicker[b-ix6kskw2vt] {
    color: var(--golf-amber);
}


.duplicate-result .result-icon[b-ix6kskw2vt] {
    background: #e2c7b7;
    color: var(--golf-amber);
}


.success-result[b-ix6kskw2vt] {
    padding: 18px;
    border: 1px solid #c3cbbb;
    background:
    linear-gradient(
    145deg,
    #fbfefc 0%,
    #f0f8f3 100%);
}


.success-heading[b-ix6kskw2vt] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}


.success-heading p[b-ix6kskw2vt] {
    margin: 6px 0 0;
    color: var(--golf-muted);
    font-size: .8rem;
}


.success-check[b-ix6kskw2vt] {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 43px;
    height: 43px;
    border-radius: 14px;
    background: var(--golf-green);
    color: #fff;
    font-size: 1.05rem;
    font-weight: 850;
}


.result-metrics[b-ix6kskw2vt] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    margin: 15px 0;
}


.result-metrics > div[b-ix6kskw2vt] {
    padding: 13px;
    border: 1px solid #d8d7ca;
    border-radius: 12px;
    background: rgba(255, 255, 255, .7);
}


.result-metrics span[b-ix6kskw2vt],
.result-metrics strong[b-ix6kskw2vt] {
    display: block;
}


.result-metrics span[b-ix6kskw2vt] {
    color: var(--golf-muted);
    font-size: .6rem;
    font-weight: 850;
    letter-spacing: .08em;
}


.result-metrics strong[b-ix6kskw2vt] {
    margin-top: 2px;
    font-size: 1.45rem;
}


.import-guide[b-ix6kskw2vt] {
    padding: 22px;
    background:
    linear-gradient(
    155deg,
    #fffdf8 0%,
    #f6f1e7 100%);
}


.import-guide p[b-ix6kskw2vt] {
    margin: 10px 0 0;
    color: var(--golf-muted);
    font-size: .84rem;
    line-height: 1.55;
}


.guide-list[b-ix6kskw2vt] {
    margin-top: 20px;
}


.guide-item[b-ix6kskw2vt] {
    display: flex;
    gap: 11px;
    padding: 14px 0;
    border-top: 1px solid #e6e0d6;
}


.guide-number[b-ix6kskw2vt] {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 33px;
    height: 33px;
    border-radius: 10px;
    background: var(--golf-green-soft);
    color: var(--golf-green);
    font-size: .62rem;
    font-weight: 900;
}


.guide-item strong[b-ix6kskw2vt],
.guide-item span:not(.guide-number)[b-ix6kskw2vt] {
    display: block;
}


.guide-item strong[b-ix6kskw2vt] {
    font-size: .84rem;
}


.guide-item span:not(.guide-number)[b-ix6kskw2vt] {
    margin-top: 3px;
    color: var(--golf-muted);
    font-size: .73rem;
    line-height: 1.45;
}


.guide-footer[b-ix6kskw2vt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 15px;
    padding: 11px 13px;
    border-radius: 12px;
    background: #d0d8c8;
}


.guide-footer span[b-ix6kskw2vt] {
    color: var(--golf-muted);
    font-size: .61rem;
    font-weight: 850;
    letter-spacing: .08em;
}


.guide-footer strong[b-ix6kskw2vt] {
    font-size: .82rem;
}


@media (max-width: 900px) {

    .upload-layout[b-ix6kskw2vt] {
        grid-template-columns: 1fr;
    }


    .import-guide[b-ix6kskw2vt] {
        order: 2;
    }

}


@media (max-width: 650px) {

    .upload-header[b-ix6kskw2vt] {
        align-items: flex-start;
        flex-direction: column;
    }


    .upload-header .page-button[b-ix6kskw2vt] {
        width: 100%;
    }


    .upload-panel[b-ix6kskw2vt],
    .import-guide[b-ix6kskw2vt] {
        padding: 18px;
    }


    .file-zone[b-ix6kskw2vt] {
        min-height: 230px;
        padding: 22px 16px;
    }


    .selected-file-row[b-ix6kskw2vt] {
        align-items: stretch;
        flex-direction: column;
    }


    .import-button[b-ix6kskw2vt] {
        width: 100%;
    }


    .result-metrics[b-ix6kskw2vt] {
        grid-template-columns: 1fr;
    }

}
/* /Components/Shared/ClubDeliveryVisual.razor.rz.scp.css */
/* Moved out of an inline <style> block in the component.

   Inline styles are re-sent inside the HTML on every render and are not scoped,
   so each page's rules applied to every other page that happened to be visited
   afterwards. Scoped means these rules reach this component only, and the
   browser caches them. */

.live-delivery-visual[b-dv8tjf4zkc] {
    width: 100%;
}


.live-delivery-visual svg[b-dv8tjf4zkc] {
    display: block;
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
    height: auto;
}


.delivery-target-line[b-dv8tjf4zkc] {
    stroke: #c4c9d0;
    stroke-width: 2;
    stroke-dasharray: 7 7;
}


.delivery-target-text[b-dv8tjf4zkc] {
    fill: #6b7280;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
}


.delivery-target-arrow[b-dv8tjf4zkc] {
    fill: #6b7280;
}


.delivery-path-line[b-dv8tjf4zkc] {
    stroke: #2563eb;
    stroke-width: 5;
    stroke-linecap: round;
}


.delivery-path-marker[b-dv8tjf4zkc] {
    fill: #2563eb;
}


.delivery-face-line[b-dv8tjf4zkc] {
    stroke: #dc2626;
    stroke-width: 7;
    stroke-linecap: round;
}


.delivery-face-edge[b-dv8tjf4zkc] {
    stroke: #dc2626;
    stroke-width: 2;
}


.delivery-ball[b-dv8tjf4zkc] {
    fill: white;
    stroke: #374151;
    stroke-width: 2;
}


.delivery-dimple[b-dv8tjf4zkc] {
    fill: #d1d5db;
}


.delivery-impact-text[b-dv8tjf4zkc] {
    fill: #9ca3af;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1px;
}


.delivery-legend[b-dv8tjf4zkc] {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    font-size: 0.9rem;
    margin-top: -4px;
}


.delivery-legend > div[b-dv8tjf4zkc] {
    display: flex;
    align-items: center;
    gap: 5px;
}


.delivery-dot[b-dv8tjf4zkc] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
}


.delivery-dot.path[b-dv8tjf4zkc] {
    background: #2563eb;
}


.delivery-dot.face[b-dv8tjf4zkc] {
    background: #dc2626;
}


.delivery-face-to-path[b-dv8tjf4zkc] {
    margin-top: 8px;
    text-align: center;
    color: #666;
    font-size: 0.85rem;
}


.delivery-no-data[b-dv8tjf4zkc] {
    min-height: 260px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #777;
}
/* /Components/Shared/ClubFacePathVisual.razor.rz.scp.css */
/* Moved out of an inline <style> block in the component.

   Inline styles are re-sent inside the HTML on every render and are not scoped,
   so each page's rules applied to every other page that happened to be visited
   afterwards. Scoped means these rules reach this component only, and the
   browser caches them. */

.cfp-card[b-43ap00a5fy] {
    background: #ffffff;
    border: 1px solid #e3e7eb;
    border-radius: 14px;
    padding: 20px;
    margin-top: 18px;
}

.cfp-header[b-43ap00a5fy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.cfp-title[b-43ap00a5fy] {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1f2937;
}

.cfp-subtitle[b-43ap00a5fy] {
    color: #6b7280;
    font-size: 0.88rem;
    margin-top: 2px;
}

.cfp-content[b-43ap00a5fy] {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(220px, 0.7fr);
    gap: 25px;
    align-items: center;
}

.cfp-visual[b-43ap00a5fy] {
    width: 100%;
    max-width: 430px;
    margin: auto;
}

.cfp-visual svg[b-43ap00a5fy] {
    width: 100%;
    height: auto;
    overflow: visible;
}

.target-line[b-43ap00a5fy] {
    stroke: #c4c9d0;
    stroke-width: 2;
    stroke-dasharray: 7 7;
}

.target-label[b-43ap00a5fy] {
    fill: #6b7280;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
}

.target-arrow[b-43ap00a5fy] {
    fill: #6b7280;
}

.target-line-label[b-43ap00a5fy] {
    fill: #9ca3af;
    font-size: 9px;
}

.club-path-line[b-43ap00a5fy] {
    stroke: #2563eb;
    stroke-width: 5;
    stroke-linecap: round;
}

.path-arrow-marker[b-43ap00a5fy] {
    fill: #2563eb;
}

.club-face-line[b-43ap00a5fy] {
    stroke: #dc2626;
    stroke-width: 7;
    stroke-linecap: round;
}

.club-face-end[b-43ap00a5fy] {
    stroke: #dc2626;
    stroke-width: 2;
}

.ball[b-43ap00a5fy] {
    fill: #ffffff;
    stroke: #374151;
    stroke-width: 2;
}

.ball-dimple[b-43ap00a5fy] {
    fill: #d1d5db;
}

.impact-label[b-43ap00a5fy] {
    fill: #9ca3af;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1px;
}

.cfp-stats[b-43ap00a5fy] {
    display: grid;
    gap: 12px;
}

.cfp-stat[b-43ap00a5fy] {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 14px 16px;
}

.cfp-stat-top[b-43ap00a5fy] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cfp-dot[b-43ap00a5fy] {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.path-dot[b-43ap00a5fy] {
    background: #2563eb;
}

.face-dot[b-43ap00a5fy] {
    background: #dc2626;
}

.cfp-label[b-43ap00a5fy] {
    font-size: 0.8rem;
    color: #6b7280;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.cfp-value[b-43ap00a5fy] {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.15;
    margin-top: 4px;
    color: #111827;
}

.cfp-direction[b-43ap00a5fy] {
    color: #6b7280;
    font-size: 0.82rem;
    margin-top: 2px;
}

.cfp-empty[b-43ap00a5fy] {
    color: #6b7280;
    padding: 20px 0;
}

@media (max-width: 700px) {

    .cfp-content[b-43ap00a5fy] {
        grid-template-columns: 1fr;
    }

    .cfp-stats[b-43ap00a5fy] {
        grid-template-columns: repeat(3, 1fr);
    }

    .cfp-value[b-43ap00a5fy] {
        font-size: 1.25rem;
    }
}

@media (max-width: 520px) {

    .cfp-stats[b-43ap00a5fy] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Shared/HomeHero.razor.rz.scp.css */
/* The shared hero: the headline, the actions and the dark scorecard panel.

   Lives with the component that renders it rather than with either page. Both
   the public landing and the signed-in home show this same block, and a page's
   scoped rules do not reach markup another component rendered — left in
   Home.razor.css these would have styled the hero on /home and left the one on
   / completely unstyled. */

.eyebrow[b-uqz1mlkdw1] {
    color: var(--golf-green);
    font-size: .68rem;
    font-weight: 850;
    letter-spacing: .14em;
    text-transform: uppercase;
}


.hero[b-uqz1mlkdw1] {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns:
    minmax(360px, .9fr)
    minmax(420px, 1.1fr);
    gap: 40px;
    align-items: center;
    min-height: 470px;
    padding: 48px;
    border: 1px solid var(--golf-border);
    border-radius: 28px;
    background:
    linear-gradient(
    135deg,
    #fffdf8 0%,
    #f2f8f4 100%);
    box-shadow: var(--golf-shadow);
}


.hero[b-uqz1mlkdw1]::after {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    right: -170px;
    top: -220px;
    border-radius: 50%;
    background:
    radial-gradient(
    circle,
    rgba(15, 122, 76, .11),
    rgba(15, 122, 76, 0) 68%);
    pointer-events: none;
}


.hero-copy[b-uqz1mlkdw1] {
    position: relative;
    z-index: 1;
}


.hero h1[b-uqz1mlkdw1] {
    max-width: 670px;
    margin: 12px 0 18px;
    font-size: clamp(2.7rem, 6vw, 5rem);
    line-height: .96;
    font-weight: 780;
    letter-spacing: -.055em;
}


.hero h1 span[b-uqz1mlkdw1] {
    color: var(--golf-green);
}


.hero p[b-uqz1mlkdw1] {
    max-width: 590px;
    margin: 0;
    color: var(--golf-muted);
    font-size: 1.03rem;
    line-height: 1.65;
}


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


.action-button[b-uqz1mlkdw1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 11px 17px;
    border: 1px solid transparent;
    border-radius: 12px;
    font-size: .9rem;
    font-weight: 720;
    text-decoration: none;
    transition:
    transform .15s ease,
    box-shadow .15s ease,
    background .15s ease;
}


.action-button:hover[b-uqz1mlkdw1] {
    transform: translateY(-1px);
    text-decoration: none;
}


.primary-action[b-uqz1mlkdw1] {
    background: var(--golf-green);
    color: #fff;
    box-shadow:
    0 10px 24px rgba(15, 122, 76, .18);
}


.primary-action:hover[b-uqz1mlkdw1] {
    background: var(--golf-green-dark);
    color: #fff;
}


.secondary-action[b-uqz1mlkdw1] {
    border-color: var(--golf-border);
    background: #fff;
    color: var(--golf-text);
}


.secondary-action:hover[b-uqz1mlkdw1] {
    background: #f9fbfa;
    color: var(--golf-text);
}


.hero-visual[b-uqz1mlkdw1] {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: flex-end;
}


.hero-scorecard[b-uqz1mlkdw1] {
    width: min(100%, 510px);
    padding: 25px;
    border-radius: 24px;
    color: #fff;
    background:
    linear-gradient(
    145deg,
    #1b2119 0%,
    #00473a 100%);
    box-shadow:
    0 26px 55px rgba(10, 80, 49, .2);
}


.scorecard-top[b-uqz1mlkdw1] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}


.light-eyebrow[b-uqz1mlkdw1] {
    color: rgba(255, 255, 255, .6);
}


.scorecard-title[b-uqz1mlkdw1] {
    margin-top: 5px;
    font-size: 1.18rem;
    font-weight: 720;
}


.live-chip[b-uqz1mlkdw1] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    font-size: .62rem;
    font-weight: 850;
    letter-spacing: .08em;
}


.live-dot[b-uqz1mlkdw1] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #5be2a0;
    box-shadow:
    0 0 0 4px rgba(91, 226, 160, .1);
}


.scorecard-metric[b-uqz1mlkdw1] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 220px;
    margin-top: 10px;
}


.scorecard-metric span[b-uqz1mlkdw1] {
    color: rgba(255, 255, 255, .62);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .1em;
}


.scorecard-metric strong[b-uqz1mlkdw1] {
    margin-top: 6px;
    font-size: clamp(2.1rem, 5vw, 3.5rem);
    line-height: 1;
    letter-spacing: -.05em;
}


.scorecard-metric small[b-uqz1mlkdw1] {
    margin-top: 12px;
    color: rgba(255, 255, 255, .7);
    font-size: .82rem;
}


.scorecard-grid[b-uqz1mlkdw1] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}


.scorecard-grid > div[b-uqz1mlkdw1] {
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 13px;
    background: rgba(255, 255, 255, .06);
}


.scorecard-grid span[b-uqz1mlkdw1] {
    display: block;
    margin-bottom: 3px;
    color: rgba(255, 255, 255, .52);
    font-size: .58rem;
    font-weight: 850;
    letter-spacing: .08em;
}


.scorecard-grid strong[b-uqz1mlkdw1] {
    font-size: .82rem;
}


@media (max-width: 980px) {


    .hero[b-uqz1mlkdw1] {
        grid-template-columns: 1fr;
        padding: 34px;
    }


    .hero-visual[b-uqz1mlkdw1] {
        justify-content: flex-start;
    }
}


@media (max-width: 650px) {


    .hero[b-uqz1mlkdw1] {
        min-height: 0;
        padding: 24px 19px;
        border-radius: 22px;
    }


    .hero h1[b-uqz1mlkdw1] {
        font-size: 2.8rem;
    }


    .hero-actions[b-uqz1mlkdw1] {
        align-items: stretch;
        flex-direction: column;
    }


    .action-button[b-uqz1mlkdw1] {
        width: 100%;
    }


    .scorecard-grid[b-uqz1mlkdw1] {
        grid-template-columns: 1fr;
    }
}


/* Lives here, not in Landing's sheet, because this component renders it and a
   page's scoped rules never reach another component's markup. */
.hero-note[b-uqz1mlkdw1] {
    max-width: 470px;
    margin: 18px 0 0;
    color: var(--golf-muted);
    font-size: .84rem;
    line-height: 1.55;
}
/* /Components/Shared/LiveDataRow.razor.rz.scp.css */
/* Moved out of an inline <style> block in the component.

   Inline styles are re-sent inside the HTML on every render and are not scoped,
   so each page's rules applied to every other page that happened to be visited
   afterwards. Scoped means these rules reach this component only, and the
   browser caches them. */

.live-data-row[b-og0lpj1q0l] {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 8px 0;
    border-bottom: 1px solid #eeeeee;
}


.live-data-row:last-child[b-og0lpj1q0l] {
    border-bottom: none;
}


.live-data-label[b-og0lpj1q0l] {
    color: #666;
}


.live-data-value[b-og0lpj1q0l] {
    text-align: right;
}
/* /Components/Shared/ShotFlight3D.razor.rz.scp.css */
.shot-flight-shell[b-abp9tf7uvv] {
    overflow: hidden;
    border: 1px solid rgba(27, 33, 25, .14);
    border-radius: 18px;
    background: #fffdf8;
}

.shot-flight-toolbar[b-abp9tf7uvv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 62px;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(27, 33, 25, .10);
    background: #fffdf8;
}

.shot-flight-heading[b-abp9tf7uvv] {
    display: grid;
    gap: 0;
}

.shot-flight-heading strong[b-abp9tf7uvv] {
    color: #1b2119;
    font-size: .98rem;
    line-height: 1.15;
}

.shot-flight-heading > span:last-child[b-abp9tf7uvv] {
    margin-top: 2px;
    color: #706d66;
    font-size: .73rem;
}

.shot-flight-eyebrow[b-abp9tf7uvv] {
    margin-bottom: 2px;
    color: #dd644d !important;
    font-size: .64rem !important;
    font-weight: 850;
    letter-spacing: .13em;
}

.shot-flight-actions[b-abp9tf7uvv] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.shot-flight-view-button[b-abp9tf7uvv],
.shot-flight-replay-button[b-abp9tf7uvv] {
    min-height: 32px;
    border: 1px solid rgba(27, 33, 25, .14);
    border-radius: 999px;
    padding: 5px 10px;
    background: #f3f0e8;
    color: #1b2119;
    font-size: .74rem;
    font-weight: 750;
}

.shot-flight-view-button.active[b-abp9tf7uvv] {
    border-color: #00473a;
    background: #00473a;
    color: #f3f0e8;
}

.shot-flight-replay-button[b-abp9tf7uvv] {
    border-color: rgba(221, 100, 77, .40);
    background: #fff8f5;
    color: #b54d39;
}

.shot-flight-stage[b-abp9tf7uvv] {
    position: relative;
    width: 100%;
    overflow: hidden;
    background:
        linear-gradient(
            180deg,
            #ecebe4 0%,
            #f3f0e8 54%,
            #c7d2c0 54.5%,
            #aebfa8 100%);
}

.shot-flight-canvas[b-abp9tf7uvv] {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* ::deep — the canvas is appended by shotFlight3dV5.js and so carries no
   scoped-CSS attribute of its own. three.js sets its width/height inline. */
.shot-flight-canvas[b-abp9tf7uvv]  canvas {
    display: block;
}

.shot-flight-speedbar[b-abp9tf7uvv] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 14px;
    border-top: 1px solid rgba(27, 33, 25, .10);
    background: #fffdf8;
}

.shot-flight-speed-label[b-abp9tf7uvv] {
    margin-right: 2px;
    color: #706d66;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.shot-flight-speed-button[b-abp9tf7uvv] {
    min-height: 26px;
    border: 1px solid rgba(27, 33, 25, .14);
    border-radius: 999px;
    padding: 3px 10px;
    background: #f3f0e8;
    color: #1b2119;
    font-size: .72rem;
    font-weight: 700;
}

.shot-flight-speed-button.active[b-abp9tf7uvv] {
    border-color: #00473a;
    background: #00473a;
    color: #f3f0e8;
}

.shot-flight-speed-time[b-abp9tf7uvv] {
    margin-left: auto;
    color: #706d66;
    font-size: .68rem;
}

.shot-flight-metrics[b-abp9tf7uvv] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid rgba(27, 33, 25, .10);
    background: #f3f0e8;
}

.conf[b-abp9tf7uvv] {
    font-style: normal;
    font-size: .62rem;
    cursor: help;
}

.conf-high[b-abp9tf7uvv] {
    color: #2f7d5c;
}

.conf-medium[b-abp9tf7uvv] {
    color: #b8860b;
}

.conf-low[b-abp9tf7uvv] {
    color: #b0704f;
}

.shot-flight-metric[b-abp9tf7uvv] {
    padding: 8px 12px;
    border-right: 1px solid rgba(27, 33, 25, .10);
}

.shot-flight-metric:nth-child(4n)[b-abp9tf7uvv] {
    border-right: 0;
}

.shot-flight-metric:nth-child(-n+4)[b-abp9tf7uvv] {
    border-bottom: 1px solid rgba(27, 33, 25, .10);
}

.shot-flight-footnote[b-abp9tf7uvv] {
    margin: 0;
    padding: 9px 14px 11px;
    border-top: 1px solid rgba(27, 33, 25, .10);
    background: #fffdf8;
    color: #706d66;
    font-size: .68rem;
    line-height: 1.45;
}

.shot-flight-legend[b-abp9tf7uvv] {
    display: block;
    margin-top: 5px;
    color: #8a877e;
}

.shot-flight-caveat[b-abp9tf7uvv] {
    display: block;
    margin-top: 3px;
    color: #8a877e;
}

.shot-flight-measured[b-abp9tf7uvv] {
    display: block;
    margin-top: 3px;
    color: #8a6b3f;
}

.shot-flight-metric span[b-abp9tf7uvv] {
    display: block;
    margin-bottom: 1px;
    color: #706d66;
    font-size: .66rem;
}

.shot-flight-metric strong[b-abp9tf7uvv] {
    color: #1b2119;
    font-size: .91rem;
}

@media (max-width: 760px) {
    .shot-flight-toolbar[b-abp9tf7uvv] {
        align-items: flex-start;
        flex-direction: column;
    }

    .shot-flight-actions[b-abp9tf7uvv] {
        justify-content: flex-start;
    }

    .shot-flight-metrics[b-abp9tf7uvv] {
        grid-template-columns: 1fr 1fr;
    }

    .shot-flight-metric:nth-child(2n)[b-abp9tf7uvv] {
        border-right: 0;
    }

    .shot-flight-metric[b-abp9tf7uvv] {
        border-bottom: 1px solid rgba(27, 33, 25, .10);
    }
}


/* The method, the confidence legend and the caveats matter when a number looks
   wrong and are noise the rest of the time. Collapsed by default; the metrics
   themselves stay in view above. */
.shot-flight-details[b-abp9tf7uvv] {
    margin: 10px 0 0;
}

.shot-flight-details > summary[b-abp9tf7uvv] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 2px;
    color: #5d6b60;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
    list-style: none;
}

/* Safari renders the default triangle via this pseudo-element rather than
   list-style, so both have to be suppressed before a custom marker is drawn. */
.shot-flight-details > summary[b-abp9tf7uvv]::-webkit-details-marker {
    display: none;
}

.shot-flight-details > summary[b-abp9tf7uvv]::after {
    content: "▾";
    font-size: .8em;
    transition: transform .15s ease;
}

.shot-flight-details[open] > summary[b-abp9tf7uvv]::after {
    transform: rotate(180deg);
}

.shot-flight-details > summary:hover[b-abp9tf7uvv] {
    color: #24332b;
}

.shot-flight-details > summary:focus-visible[b-abp9tf7uvv] {
    outline: 2px solid #2f7d5c;
    outline-offset: 2px;
    border-radius: 4px;
}

.shot-flight-details .shot-flight-footnote[b-abp9tf7uvv] {
    margin-top: 6px;
}