/* Getting Started uses the same palette tokens in both application themes. */
html[data-layout-tab="getting-started"] #content-getting-started {
    display: block;
    min-height: 0;
}

.gs-page {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    padding: 12px 0 44px;
    color: var(--ft-text-primary);
}

.gs-welcome {
    position: relative;
    isolation: isolate;
    margin-bottom: 32px;
    padding: 6px 12px;
    text-align: center;
}

.gs-welcome::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: -48px 0 -42px;
    border-radius: 50%;
    background: radial-gradient(ellipse at 32% 42%, rgb(var(--ft-primary-rgb) / .09), transparent 62%),
        radial-gradient(ellipse at 76% 42%, rgb(var(--ft-accent-rgb) / .06), transparent 62%);
    filter: blur(24px);
    mask-image: radial-gradient(ellipse, #000 25%, transparent 72%);
    pointer-events: none;
}

.gs-welcome h1 { margin: 0; font-size: 22px; line-height: 1.35; font-weight: 700; }
.gs-welcome h1 > span:first-child { display: inline-block; margin-right: 5px; font-size: .85em; }
.gs-welcome p { margin: 12px 0 0; color: var(--ft-text-secondary); font-size: 14px; line-height: 1.5; }
.gs-accordions { display: grid; gap: 12px; }
.gs-accordion, .gs-advanced-card {
    border: 1px solid rgb(var(--ft-border-rgb) / .45);
    border-radius: 18px;
    background: var(--ft-surface);
    box-shadow: 0 10px 38px rgb(0 0 0 / .045);
}
.gs-accordion { scroll-margin-top: 24px; }
.gs-accordion > summary {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 68px;
    padding: 18px 20px;
    list-style: none;
    cursor: pointer;
    border-radius: 18px;
}
.gs-accordion > summary::-webkit-details-marker { display: none; }
.gs-accordion > summary::marker { content: ''; }
.gs-accordion > summary:hover { background: rgb(var(--ft-primary-rgb) / .025); }
.gs-number {
    display: grid; place-items: center; flex: 0 0 28px;
    height: 28px; border: 2px solid rgb(var(--ft-primary-rgb) / .08);
    border-radius: 50%; color: var(--ft-primary); font-size: 14px; font-weight: 600;
}
.gs-accordion h2 { margin: 0; font-size: 16px; line-height: 1.4; font-weight: 600; }
.gs-progress { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; color: var(--ft-text-muted); white-space: nowrap; font-size: 14px; }
.gs-progress i {
    display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
    background: radial-gradient(circle, var(--ft-surface) 55%, transparent 58%),
        conic-gradient(var(--ft-primary) var(--gs-progress), rgb(var(--ft-primary-rgb) / .1) 0);
}
.gs-progress i.is-complete { background: transparent; color: var(--ft-success); }
.gs-progress i svg { width: 18px; height: 18px; }
.gs-chevron { display: grid; place-items: center; margin-left: 6px; }
.gs-chevron svg { width: 18px; height: 18px; transition: transform .2s ease; }
.gs-accordion[open] > summary .gs-chevron svg { transform: rotate(180deg); }
.gs-accordion-content { padding: 0 20px 24px; }
.gs-intro { margin: 2px 0 22px; padding-top: 20px; border-top: 1px solid rgb(var(--ft-border-rgb) / .5); color: var(--ft-text-secondary); font-size: 15px; line-height: 1.6; }
.gs-centered { text-align: center; padding: 6px 0 4px; }
.gs-centered > p { max-width: 620px; margin: 18px auto 22px; color: var(--ft-text-secondary); font-size: 16px; line-height: 1.6; }
.gs-primary { min-height: 44px; padding: 10px 22px; border-radius: 12px; font-size: 14px; font-weight: 600; gap: 14px; }
.gs-primary:disabled { opacity: .5; cursor: not-allowed; }
.gs-availability { display: block; margin-top: 10px; color: var(--ft-text-muted); font-size: 11px; line-height: 1.5; }
.gs-feature-panel { display: grid; grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr); gap: 20px; }
.gs-feature-list { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.gs-feature-item {
    display: grid; grid-template-columns: 22px 20px minmax(0, 1fr); align-items: center;
    gap: 12px; min-height: 54px; width: 100%; padding: 12px;
    border: 0; border-radius: 10px; color: var(--ft-text-primary);
    background: transparent; text-align: left; font: inherit; font-size: 15px;
    cursor: pointer; transition: background .16s ease;
}
.gs-feature-item.is-selected, .gs-feature-item:hover { background: rgb(var(--ft-primary-rgb) / .065); }
.gs-item-check { display: grid; place-items: center; width: 22px; height: 22px; border: 2px solid rgb(var(--ft-border-rgb)); border-radius: 50%; }
.gs-item-check svg { width: 16px; height: 16px; }
.gs-feature-item.is-complete .gs-item-check { background: var(--ft-success); border-color: var(--ft-success); color: var(--ft-surface); }
.gs-feature-item.is-complete > span:last-child { text-decoration: line-through; }
.gs-item-icon { color: var(--ft-primary); }
.gs-item-icon svg { display: block; width: 20px; height: 20px; }
.gs-feature-detail { display: flex; flex-direction: column; min-width: 0; padding-left: 20px; border-left: 1px solid rgb(var(--ft-border-rgb) / .65); }
.gs-feature-image { aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: rgb(var(--ft-primary-rgb) / .06); }
.gs-advanced .gs-feature-image { aspect-ratio: 1600 / 950; }
.gs-feature-image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.gs-feature-detail h3 { margin: 20px 0 10px; font-size: 22px; line-height: 1.25; font-weight: 700; }
.gs-feature-detail p { margin: 0 0 26px; color: var(--ft-text-secondary); font-size: 15px; line-height: 1.6; }
.gs-explore { align-self: flex-end; margin-top: auto; }
.gs-arrow svg { width: 20px; height: 20px; transform: rotate(-45deg); }
.gs-advanced { margin-top: 48px; }
.gs-advanced > h2, .gs-resources > h2 { margin: 0 0 18px; font-size: 16px; line-height: 1.4; font-weight: 600; }
.gs-advanced-card { padding: 20px; }
.gs-text-link { display: inline-flex; align-items: center; gap: 8px; margin: 16px 0 0; padding: 4px 0; border: 0; background: transparent; color: var(--ft-text-secondary); font-size: 13px; cursor: pointer; }
.gs-text-link:hover { color: var(--ft-primary); }
.gs-text-link svg { width: 16px; height: 16px; }
.gs-dismiss { margin-left: 24px; }
.gs-download-form { max-width: 470px; margin: 0 auto; padding: 20px; border-radius: 16px; background: rgb(var(--ft-primary-rgb) / .035); }
.gs-download-form > label { display: block; margin-bottom: 12px; text-align: left; color: var(--ft-text-secondary); font-size: 13px; }
.gs-email-field { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--ft-border-strong); border-radius: 13px; background: var(--ft-surface); }
.gs-email-field:focus-within { border-color: var(--ft-primary); box-shadow: var(--ft-focus-ring); }
.gs-email-field > span { color: var(--ft-primary); }
.gs-email-field svg { display: block; width: 22px; height: 22px; }
.gs-email-field input { min-width: 0; width: 100%; border: 0; outline: none; background: transparent; color: var(--ft-text-primary); font: inherit; font-size: 14px; }
.gs-email-field input::placeholder { color: var(--ft-text-muted); }
.gs-download-form > button { margin-top: 22px; }

/* Separate, replaceable compositions for each app experience. */
.gs-product-art { max-width: 620px; height: 140px; margin: 0 auto; }
.gs-product-art--client { height: 160px; margin-top: 6px; }
.gs-product-art--coach { height: 150px; margin-top: 6px; }
.gs-product-art img { display: block; width: 100%; height: 100%; object-fit: contain; }
.gs-product-art--marketplace { height: 190px; margin-top: 8px; }
.gs-centered .gs-marketplace-lead { margin: 18px auto 8px; color: var(--ft-text-primary); font-size: 22px; font-weight: 600; }
.gs-centered .gs-marketplace-copy { max-width: 690px; margin: 0 auto 18px; font-size: 16px; }
.gs-marketplace-benefits { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 20px; margin: 0 auto 22px; }
.gs-marketplace-benefits > span { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ft-text-secondary); }
.gs-marketplace-benefits svg { width: 16px; height: 16px; color: var(--ft-primary); flex-shrink: 0; }
.gs-marketplace-actions { display: flex; align-items: center; justify-content: center; gap: 14px 20px; flex-wrap: wrap; }
.gs-marketplace-actions .gs-primary { margin: 0; }
.gs-centered .gs-marketplace-optional { margin: 14px auto 0; font-size: 12px; color: var(--ft-text-muted); }
@media(max-width:560px) {
    .gs-product-art--marketplace { height: 150px; }
    .gs-centered .gs-marketplace-lead { font-size: 19px; }
    .gs-centered .gs-marketplace-copy { font-size: 14px; }
    .gs-marketplace-benefits { flex-direction: column; gap: 10px; align-items: flex-start; width: fit-content; }
}
.gs-accordion[data-start-section="client-app"] .gs-accordion-content { padding-bottom: 18px; }
.gs-resources { margin-top: 34px; }
.gs-resource-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.gs-resource { position: relative; isolation: isolate; aspect-ratio: 4 / 5; overflow: hidden; padding: 14px; border: 0; border-radius: 13px; color: #fff; text-align: left; cursor: pointer; background: #17221b; box-shadow: 0 8px 26px rgb(0 0 0 / .06); }
.gs-resource > img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .3s ease; }
.gs-resource::after { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, transparent 48%, rgb(9 17 24 / .1) 68%, rgb(9 17 24 / .7)); }
.gs-resource:hover > img { transform: scale(1.045); }


.gs-resource-label { position: absolute; left: 14px; right: 10px; bottom: 15px; display: grid; gap: 8px; }
.gs-resource-label svg { display: block; width: 19px; height: 19px; }
.gs-resource-label strong { font-size: 16px; line-height: 1.25; font-weight: 700; }
.gs-page :where(button, a, summary, [role="tabpanel"]):focus-visible { outline: 2px solid var(--ft-primary); outline-offset: 4px; }

@media (max-width: 640px) {
    .gs-page { padding: 16px 0 38px; }
    .gs-welcome { margin-bottom: 26px; padding-inline: 0; }
    .gs-welcome h1 { font-size: 21px; }
    .gs-welcome p { font-size: 14px; }
    .gs-accordions { gap: 12px; }
    .gs-accordion, .gs-advanced-card { border-radius: 18px; }
    .gs-accordion > summary { min-height: 70px; flex-wrap: wrap; gap: 8px 10px; padding: 18px 16px; border-radius: 18px; }
    .gs-number { flex-basis: 30px; height: 30px; font-size: 14px; border-width: 2px; }
    .gs-accordion h2 { flex: 1; font-size: 16px; }
    .gs-progress { order: 4; flex-basis: 100%; margin-left: 40px; font-size: 12px; gap: 6px; }
    .gs-progress i { width: 15px; height: 15px; }
    .gs-progress i svg { width: 15px; height: 15px; }
    .gs-chevron { margin-left: 0; }
    .gs-chevron svg { width: 18px; height: 18px; }
    .gs-accordion-content { padding: 0 16px 24px; }
    .gs-intro { margin-bottom: 20px; padding-top: 18px; font-size: 15px; }
    .gs-feature-panel { grid-template-columns: minmax(0, 1fr); gap: 22px; }
    .gs-feature-item { min-height: 56px; }
    .gs-feature-detail { padding: 22px 0 0; border-left: 0; border-top: 1px solid rgb(var(--ft-border-rgb) / .65); }
    .gs-feature-detail h3 { margin-top: 18px; font-size: 21px; }
    .gs-feature-detail p { margin-bottom: 24px; }
    .gs-primary { min-height: 48px; font-size: 15px; padding: 11px 20px; border-radius: 12px; }
    .gs-centered > p { margin: 16px auto 20px; font-size: 15px; }
    .gs-desktop-break { display: none; }
    .gs-product-art--client { height: 140px; }
    .gs-download-form { padding: 18px 12px; }
    .gs-download-form > label { font-size: 13px; }
    .gs-email-field { gap: 10px; padding: 13px 12px; }
    .gs-email-field input { font-size: 15px; }
    .gs-advanced { margin-top: 36px; }
    .gs-advanced-card { padding: 20px 16px; }
    .gs-advanced > h2, .gs-resources > h2 { font-size: 18px; margin-bottom: 16px; }
    .gs-resources { margin-top: 32px; }
    .gs-resource-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .gs-resource { border-radius: 13px; }
    .gs-resource-label { left: 14px; bottom: 16px; }
    .gs-resource-label strong { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .gs-page *, .gs-page *::before, .gs-page *::after { transition: none !important; scroll-behavior: auto !important; }
}

/* Show complete frames rather than a partially downloaded image. */
img[data-marketing-image] { opacity:0; }
img[data-marketing-image].marketing-image-ready { opacity:1; }
.gs-feature-detail[aria-busy="true"] .gs-feature-image { opacity:.7; }
.marketing-image-loading { background:rgb(var(--ft-primary-rgb) / .055); }



.gs-text-link[disabled]{opacity:.5;cursor:default}

.gs-feature-detail h3 [data-feature-title]{padding:0;border:0;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}
.gs-feature-detail h3 [data-feature-title]:focus-visible{outline:2px solid var(--ft-secondary);outline-offset:4px;border-radius:4px}
.app-handoff{max-width:400px;width:calc(100vw - 48px);padding:24px;border:1px solid #dce2ed;border-radius:20px;color:#172033;background:white;font-family:Outfit,system-ui,sans-serif}.app-handoff::backdrop{background:#17203340}.app-handoff [data-close]{float:right;border:0;background:transparent;font-size:24px;cursor:pointer}.app-handoff p{line-height:1.5}.app-handoff [data-qr]{max-width:220px;margin:16px auto}.app-handoff svg{width:100%;height:auto}.app-handoff a,.app-handoff [data-copy]{display:inline-block;margin:6px;padding:10px;border:1px solid #dce2ed;border-radius:10px;background:white;color:#b75410;font:inherit;text-decoration:none;cursor:pointer}.app-handoff small{display:block;color:#63718a}

/* Shared client/coach download controls. */
.gs-app-download { display:grid; gap:20px; width:100%; max-width:540px; margin:24px auto 0; }
.gs-app-download-options { display:flex; align-items:center; justify-content:center; gap:28px; }
.gs-phone-qr { display:grid; flex-shrink:0; justify-items:center; gap:7px; color:var(--ft-text-muted); text-decoration:none; font-size:12px; }
.gs-qr-canvas { display:block; width:132px; height:132px; border:1px solid var(--ft-border); border-radius:12px; background:white; overflow:hidden; }
.gs-qr-canvas svg { display:block; width:100%; height:100%; }
.gs-app-download .gs-store-links { display:flex; justify-content:center; gap:12px; margin:0; }
.gs-app-download .gs-store-links :is(a,button) { display:grid; place-items:center; width:48px; height:48px; flex-shrink:0; min-width:0; padding:0; border:1px solid var(--ft-border-strong); border-radius:50%; background:white; color:var(--ft-primary); cursor:pointer; transition:border-color .15s,transform .15s; }
.gs-app-download .gs-store-links :is(a,button):hover { border-color:var(--ft-primary); transform:translateY(-2px); }
.gs-app-download .gs-store-links button[aria-expanded="true"] { border-color:var(--ft-primary); box-shadow:var(--ft-focus-ring); }
.gs-app-download .gs-store-links img { display:block; width:30px; height:30px; object-fit:contain; }
.gs-app-download .gs-store-links svg { display:block; width:24px; height:24px; }
.gs-app-download .gs-download-form { width:100%; max-width:none; margin:0; padding:0; background:transparent; border-radius:0; text-align:left; }
.gs-app-download .gs-download-form[hidden] { display:none; }
.gs-app-download .gs-download-form > label { font-size:13px; margin-bottom:10px; }
.gs-email-row { display:flex; align-items:stretch; gap:12px; }
.gs-email-row .gs-email-field { flex:1; min-width:0; }
.gs-app-download .gs-email-row > button { flex-shrink:0; min-height:44px; margin:0; padding:10px 18px; font-size:14px; white-space:nowrap; }
.gs-email-field input, .gs-email-field input:focus, .gs-email-field input:focus-visible { outline:none; box-shadow:none; }
.gs-app-download .gs-email-field { gap:10px; padding:11px 12px; }
.gs-app-download .gs-availability { margin-top:8px; font-size:12px; }
.gs-app-download .gs-availability:empty { display:none; }
.gs-centered .gs-download-instructions { max-width:640px; margin:14px auto 0; font-size:14px; }
@media(max-width:560px) {
    .gs-app-download { max-width:340px; }
    .gs-app-download-options { gap:18px; }
    .gs-qr-canvas { width:116px; height:116px; }
    .gs-app-download .gs-store-links { gap:8px; }
    .gs-app-download .gs-store-links :is(a,button) { width:44px; height:44px; }
    .gs-email-row { gap:8px; }
    .gs-app-download .gs-email-row > button { padding:10px 12px; }
    .gs-app-download .gs-email-field { gap:7px; padding:11px 9px; }
    .gs-email-row .gs-email-field > span { display:none; }
}
@media(max-width:380px) {
    .gs-app-download .gs-store-links { flex-direction:column; }
}

.gs-coach-app-completion { margin-top:18px; text-align:center; }
.gs-mark-done { min-height:36px; padding:7px 14px; border:1px solid var(--ft-border-strong); border-radius:9px; background:transparent; color:var(--ft-text-secondary); font:500 13px Outfit,system-ui,sans-serif; cursor:pointer; }
.gs-mark-done:hover { border-color:var(--ft-primary); color:var(--ft-text-primary); }
.gs-mark-done:focus-visible { outline:2px solid var(--ft-primary); outline-offset:3px; }
.gs-coach-app-done { display:inline-flex; align-items:center; gap:6px; min-height:36px; color:var(--ft-success); font-size:13px; }
.gs-coach-app-done svg { width:16px; height:16px; }

@media(max-width:560px) { .gs-mark-done { min-height:44px; } }