/*
 * Balance Foundations onboarding — authoritative presentation layer.
 *
 * This file intentionally loads after the legacy onboarding styles. Keep the
 * palette and text fills explicit so a delayed app theme stylesheet cannot
 * turn the cream experience back into a dark panel on iOS or Android.
 */

#onboarding-wizard.onboarding-overlay {
    --foundations-ink: #17130e;
    --foundations-muted: #625947;
    --foundations-cream: #fffaf2;
    --foundations-paper: #fffdf8;
    --foundations-gold: #8a5a12;
    --foundations-gold-soft: #d8b25e;
    --foundations-line: rgba(138, 90, 18, .24);
    isolation: isolate;
    height: var(--pbb-wizard-viewport-height, 100dvh) !important;
    max-height: var(--pbb-wizard-viewport-height, 100dvh) !important;
    overflow: hidden;
    padding: max(12px, env(safe-area-inset-top, 0px)) 12px max(12px, env(safe-area-inset-bottom, 0px)) !important;
    background:
        radial-gradient(circle at 8% 14%, rgba(216, 178, 94, .34), transparent 31%),
        radial-gradient(circle at 92% 84%, rgba(138, 90, 18, .18), transparent 35%),
        linear-gradient(145deg, #fffdf8 0%, #f8efd9 52%, #fffaf2 100%) !important;
    color: var(--foundations-ink) !important;
    -webkit-text-fill-color: var(--foundations-ink) !important;
}

#onboarding-wizard.onboarding-overlay::before,
#onboarding-wizard.onboarding-overlay::after {
    content: "";
    position: fixed;
    z-index: -1;
    pointer-events: none;
    border-radius: 50%;
}

#onboarding-wizard.onboarding-overlay::before {
    width: min(78vw, 720px);
    aspect-ratio: 1;
    left: -26vw;
    top: 16vh;
    border: 1px solid rgba(138, 90, 18, .16);
    box-shadow:
        0 0 0 34px rgba(216, 178, 94, .055),
        0 0 0 76px rgba(138, 90, 18, .035),
        0 0 110px rgba(216, 178, 94, .18);
    animation: foundationsOrbit 18s ease-in-out infinite alternate;
}

#onboarding-wizard.onboarding-overlay::after {
    width: min(58vw, 540px);
    aspect-ratio: 1;
    right: -19vw;
    bottom: -14vh;
    background: radial-gradient(circle, rgba(216, 178, 94, .23), rgba(138, 90, 18, .04) 48%, transparent 70%);
    filter: blur(2px);
    animation: foundationsGlow 12s ease-in-out infinite alternate;
}

#onboarding-wizard .wizard-particles {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: -1 !important;
    opacity: .52 !important;
    pointer-events: none !important;
    background-image:
        radial-gradient(circle, rgba(138, 90, 18, .58) 0 1px, transparent 1.7px),
        radial-gradient(circle, rgba(216, 178, 94, .52) 0 1.2px, transparent 1.9px) !important;
    background-position: 0 0, 23px 31px !important;
    background-size: 44px 44px, 67px 67px !important;
    animation: foundationsDrift 24s linear infinite !important;
}

#onboarding-wizard .onboarding-modal.wizard-container,
html[data-pbb-theme="light"] #onboarding-wizard .onboarding-modal.wizard-container,
html[data-pbb-theme="dark"] #onboarding-wizard .onboarding-modal.wizard-container {
    position: relative;
    z-index: 1;
    width: min(100%, 520px) !important;
    height: min(92svh, 820px) !important;
    max-width: 520px !important;
    max-height: min(92svh, 820px) !important;
    overflow: hidden !important;
    border: 1px solid rgba(138, 90, 18, .30) !important;
    border-radius: 28px !important;
    background:
        radial-gradient(circle at 12% 18%, rgba(216, 178, 94, .16), transparent 29%),
        radial-gradient(circle at 88% 74%, rgba(138, 90, 18, .09), transparent 34%),
        linear-gradient(155deg, rgba(255, 253, 248, .97), rgba(250, 241, 220, .94)) !important;
    background-size: 135% 135%, 145% 145%, 100% 100% !important;
    box-shadow: 0 28px 75px rgba(74, 48, 10, .20), inset 0 1px 0 rgba(255, 255, 255, .95) !important;
    color: var(--foundations-ink) !important;
    -webkit-text-fill-color: var(--foundations-ink) !important;
    backdrop-filter: blur(18px) saturate(1.08);
    -webkit-backdrop-filter: blur(18px) saturate(1.08);
    animation: foundationsCardAura 14s ease-in-out infinite alternate;
}

#onboarding-wizard .onboarding-modal.wizard-container::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    z-index: 2;
    height: 3px;
    background: linear-gradient(90deg, transparent, #d8b25e 22%, #8a5a12 50%, #d8b25e 78%, transparent);
    background-size: 180% 100%;
    animation: foundationsSheen 5s ease-in-out infinite;
}

#onboarding-wizard .wizard-header,
#onboarding-wizard .wizard-content,
#onboarding-wizard .wizard-slide,
#onboarding-wizard .wizard-chat-intake,
#onboarding-wizard .wizard-chat-messages,
#onboarding-wizard .wizard-chat-choices,
#onboarding-wizard .wizard-chat-input-row {
    background: transparent !important;
    color: var(--foundations-ink) !important;
    -webkit-text-fill-color: var(--foundations-ink) !important;
}

#onboarding-wizard .wizard-header {
    padding: 22px 24px 0 !important;
    border-bottom: 0 !important;
}

#onboarding-wizard .wizard-brand-lockup {
    filter: drop-shadow(0 7px 14px rgba(138, 90, 18, .10));
}

#onboarding-wizard .wizard-brand-mark {
    animation: foundationsMark 5.5s ease-in-out infinite !important;
}

#onboarding-wizard .wizard-brand-copy strong,
#onboarding-wizard #wizard-title,
#onboarding-wizard .wizard-chat-progress-row,
#onboarding-wizard .wizard-chat-progress-row span,
#onboarding-wizard .wizard-chat-back,
#onboarding-wizard .wizard-chat-bubble,
#onboarding-wizard .wizard-chat-choice,
#onboarding-wizard .wizard-chat-choice *,
#onboarding-wizard .wizard-chat-helper {
    color: var(--foundations-ink) !important;
    -webkit-text-fill-color: var(--foundations-ink) !important;
}

#onboarding-wizard .wizard-brand-copy small,
#onboarding-wizard .wizard-chat-progress-row span {
    color: var(--foundations-gold) !important;
    -webkit-text-fill-color: var(--foundations-gold) !important;
}

#onboarding-wizard .wizard-progress .dot {
    background: rgba(23, 19, 14, .11) !important;
}

#onboarding-wizard .wizard-progress .dot.active,
#onboarding-wizard #wizard-chat-progress-fill {
    background: linear-gradient(90deg, #8a5a12, #d8b25e) !important;
    box-shadow: 0 0 14px rgba(138, 90, 18, .26) !important;
}

#onboarding-wizard #wizard-chat-progress-fill {
    transition: width .42s cubic-bezier(.16, 1, .3, 1) !important;
}

#onboarding-wizard .wizard-content {
    min-height: 0 !important;
    padding: 12px 24px 20px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}

#onboarding-wizard.wizard-chat-mode .wizard-content {
    overflow: hidden !important;
}

#onboarding-wizard .wizard-chat-intake {
    display: grid !important;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto !important;
    height: 100% !important;
    min-height: 0 !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    padding: 4px 0 8px !important;
    overflow: hidden !important;
}

#onboarding-wizard.wizard-chat-no-textbox .wizard-chat-intake {
    grid-template-rows: auto auto minmax(0, 1fr) auto auto !important;
}

#onboarding-wizard .wizard-chat-progress-row {
    min-height: 38px;
    gap: 10px !important;
    padding: 2px 0 8px !important;
    font-size: .76rem !important;
    font-weight: 800 !important;
    letter-spacing: .10em !important;
    text-transform: uppercase;
}

#onboarding-wizard .wizard-chat-back {
    min-height: 36px !important;
    padding: 8px 13px !important;
    border: 1px solid var(--foundations-line) !important;
    border-radius: 999px !important;
    background: rgba(255, 253, 248, .90) !important;
    box-shadow: 0 5px 14px rgba(74, 48, 10, .08) !important;
    font-size: .76rem !important;
}

#onboarding-wizard .wizard-chat-progress-track {
    overflow: hidden;
    background: rgba(23, 19, 14, .10) !important;
}

#onboarding-wizard.wizard-chat-mode:not(.wizard-chat-intro):not(.wizard-chat-complete) .wizard-chat-messages {
    min-height: 92px !important;
    flex: 0 0 auto !important;
    justify-content: center !important;
    padding: 6px 0 10px !important;
    overflow: visible !important;
}

#onboarding-wizard .wizard-chat-bubble.coach {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
    animation: none !important;
}

#onboarding-wizard .wizard-chat-bubble.coach:first-child:not(:last-child) {
    color: var(--foundations-gold) !important;
    -webkit-text-fill-color: var(--foundations-gold) !important;
}

#onboarding-wizard .wizard-chat-bubble.coach:last-child {
    max-width: 460px !important;
    color: var(--foundations-ink) !important;
    -webkit-text-fill-color: var(--foundations-ink) !important;
    font: 850 clamp(1.45rem, 5.6vw, 2.15rem)/1.08 "Montserrat", system-ui, sans-serif !important;
    letter-spacing: -.035em !important;
    text-wrap: balance;
}

#onboarding-wizard .wizard-chat-bubble.user {
    display: none !important;
}

#onboarding-wizard .wizard-chat-choices {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-content: start;
    gap: 10px !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 2px 5px 16px 1px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(138, 90, 18, .35) transparent;
}

#onboarding-wizard.wizard-chat-no-textbox .wizard-chat-choices {
    height: 100% !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding-bottom: 16px !important;
}

#onboarding-wizard .wizard-chat-input-row {
    position: relative;
    z-index: 2;
    flex: 0 0 auto !important;
    margin-top: 0 !important;
    padding-top: 8px !important;
    border-top: 1px solid rgba(138, 90, 18, .18) !important;
    background: linear-gradient(180deg, rgba(255, 250, 242, .72), var(--foundations-cream) 34%) !important;
}

#onboarding-wizard .wizard-chat-choice {
    position: relative;
    min-height: 54px !important;
    padding: 13px 15px !important;
    overflow: hidden;
    border: 1px solid rgba(138, 90, 18, .30) !important;
    border-radius: 15px !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(255, 248, 234, .92)) !important;
    box-shadow: 0 9px 22px rgba(74, 48, 10, .08), inset 0 1px 0 #fff !important;
    font-size: .96rem !important;
    font-weight: 750 !important;
    line-height: 1.25 !important;
    transform: translateZ(0);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease !important;
    animation: none !important;
}

#onboarding-wizard .wizard-chat-choice::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,.72) 46%, transparent 67%);
    transform: translateX(-130%);
    transition: transform .55s ease;
}

#onboarding-wizard .wizard-chat-choice:hover,
#onboarding-wizard .wizard-chat-choice:focus-visible {
    border-color: #8a5a12 !important;
    box-shadow: 0 13px 28px rgba(74, 48, 10, .13), 0 0 0 3px rgba(216, 178, 94, .18) !important;
    transform: translateY(-2px);
}

#onboarding-wizard .wizard-chat-choice:hover::after,
#onboarding-wizard .wizard-chat-choice:focus-visible::after {
    transform: translateX(130%);
}

#onboarding-wizard .wizard-chat-choice.selected {
    border-color: #8a5a12 !important;
    background: linear-gradient(135deg, #f0ddb0, #d8b25e) !important;
    color: var(--foundations-ink) !important;
    -webkit-text-fill-color: var(--foundations-ink) !important;
    box-shadow: 0 12px 28px rgba(138, 90, 18, .20), inset 0 1px 0 rgba(255,255,255,.7) !important;
}

#onboarding-wizard .wizard-chat-choice.is-confirmed,
#onboarding-wizard .wizard-chat-choice.is-confirmed:disabled {
    opacity: 1 !important;
    border-color: #8a5a12 !important;
    background: linear-gradient(135deg, #f4e6c2, #d8b25e) !important;
    box-shadow: 0 8px 18px rgba(138, 90, 18, .22), 0 0 0 4px rgba(216, 178, 94, .16) !important;
    transform: scale(.975) !important;
}

#onboarding-wizard .wizard-chat-choice.is-confirmed::before {
    content: "\2713";
    display: inline-grid;
    width: 22px;
    height: 22px;
    margin-right: 8px;
    place-items: center;
    border-radius: 50%;
    background: #17130e;
    color: #fffaf2;
    -webkit-text-fill-color: #fffaf2;
    font-size: .75rem;
    line-height: 1;
    animation: foundationsChoiceCheck .22s cubic-bezier(.16, 1, .3, 1) both;
}

#onboarding-wizard .wizard-chat-choices[aria-busy="true"] .wizard-chat-choice:not(.is-confirmed) {
    opacity: .52 !important;
}

#onboarding-wizard .wizard-section-transition {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: grid;
    grid-template-rows: 148px auto auto auto auto;
    align-content: center;
    justify-items: center;
    gap: 12px;
    padding: 34px 28px;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    text-align: center;
    background:
        radial-gradient(circle at 50% 27%, rgba(216, 178, 94, .27), transparent 30%),
        linear-gradient(145deg, rgba(255, 253, 248, .995), rgba(247, 235, 207, .995));
    color: var(--foundations-ink);
    -webkit-text-fill-color: var(--foundations-ink);
    transition: opacity .18s ease, visibility 0s linear .18s;
}

#onboarding-wizard .wizard-section-transition::before,
#onboarding-wizard .wizard-section-transition::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

#onboarding-wizard .wizard-section-transition::before {
    inset: 0;
    opacity: .48;
    background-image: radial-gradient(circle, rgba(138, 90, 18, .48) 0 1px, transparent 1.5px);
    background-size: 32px 32px;
    mask-image: linear-gradient(to bottom, #000, transparent 74%);
    -webkit-mask-image: linear-gradient(to bottom, #000, transparent 74%);
}

#onboarding-wizard .wizard-section-transition::after {
    top: 0;
    bottom: 0;
    width: 36%;
    left: -42%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.88), transparent);
    transform: skewX(-12deg);
}

#onboarding-wizard .wizard-section-transition.is-active {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition-delay: 0s;
}

#onboarding-wizard .wizard-section-transition.is-active::after {
    animation: foundationsTransitionSweep .92s cubic-bezier(.16, 1, .3, 1) both;
}

#onboarding-wizard .wizard-section-transition-glow {
    position: absolute;
    width: 250px;
    aspect-ratio: 1;
    top: calc(50% - 210px);
    left: calc(50% - 125px);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(216,178,94,.38), rgba(138,90,18,.08) 50%, transparent 70%);
    filter: blur(8px);
}

#onboarding-wizard .wizard-section-transition-orbit {
    position: relative;
    width: 132px;
    height: 132px;
    display: grid;
    place-items: center;
}

#onboarding-wizard .wizard-section-transition-orbit > span {
    position: absolute;
    inset: 9px;
    border: 1px solid rgba(138,90,18,.42);
    border-radius: 50%;
    box-shadow: 0 0 24px rgba(216,178,94,.16);
}

#onboarding-wizard .wizard-section-transition-orbit > span:nth-child(1) {
    border-top-color: #8a5a12;
    border-right-color: transparent;
    animation: foundationsTransitionOrbit 1.8s linear infinite;
}

#onboarding-wizard .wizard-section-transition-orbit > span:nth-child(2) {
    inset: 22px;
    border-bottom-color: #d8b25e;
    border-left-color: transparent;
    animation: foundationsTransitionOrbit 1.25s linear infinite reverse;
}

#onboarding-wizard .wizard-section-transition-orbit > span:nth-child(3) {
    inset: 0;
    border-color: rgba(216,178,94,.22);
    box-shadow: 0 0 0 12px rgba(216,178,94,.045), 0 0 42px rgba(138,90,18,.14);
    animation: foundationsTransitionPulse 1.35s ease-in-out infinite;
}

#onboarding-wizard .wizard-section-transition-orbit img {
    position: relative;
    z-index: 2;
    width: 72px;
    height: 72px;
    object-fit: contain;
    filter: drop-shadow(0 10px 16px rgba(74,48,10,.18));
    animation: foundationsTransitionLogo .78s cubic-bezier(.16, 1, .3, 1) both;
}

#onboarding-wizard .wizard-section-transition-kicker {
    position: relative;
    z-index: 2;
    margin: 2px 0 0;
    color: var(--foundations-gold) !important;
    -webkit-text-fill-color: var(--foundations-gold) !important;
    font: 850 .76rem/1.2 "Montserrat", system-ui, sans-serif;
    letter-spacing: .18em;
}

#onboarding-wizard .wizard-section-transition h3 {
    position: relative;
    z-index: 2;
    max-width: 390px;
    margin: 0;
    color: var(--foundations-ink) !important;
    -webkit-text-fill-color: var(--foundations-ink) !important;
    font: 900 clamp(1.65rem, 6.5vw, 2.35rem)/1.02 "Montserrat", system-ui, sans-serif;
    letter-spacing: -.045em;
    text-wrap: balance;
}

#onboarding-wizard .wizard-section-transition > p:not(.wizard-section-transition-kicker) {
    position: relative;
    z-index: 2;
    max-width: 360px;
    margin: 0;
    color: var(--foundations-muted) !important;
    -webkit-text-fill-color: var(--foundations-muted) !important;
    font: 650 .95rem/1.5 system-ui, sans-serif;
}

#onboarding-wizard .wizard-section-transition-stages {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: min(100%, 340px);
    margin-top: 12px;
}

#onboarding-wizard .wizard-section-transition-stages span {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 7px;
    color: rgba(98, 89, 71, .62) !important;
    -webkit-text-fill-color: rgba(98, 89, 71, .62) !important;
    font: 750 .68rem/1.1 "Montserrat", system-ui, sans-serif;
    letter-spacing: .06em;
    text-transform: uppercase;
}

#onboarding-wizard .wizard-section-transition-stages span::before {
    content: "";
    position: absolute;
    top: 7px;
    left: -50%;
    width: 100%;
    height: 2px;
    background: rgba(138, 90, 18, .16);
}

#onboarding-wizard .wizard-section-transition-stages span:first-child::before { display: none; }

#onboarding-wizard .wizard-section-transition-stages i {
    position: relative;
    z-index: 2;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(138,90,18,.28);
    border-radius: 50%;
    background: var(--foundations-paper);
}

#onboarding-wizard .wizard-section-transition-stages span.is-complete,
#onboarding-wizard .wizard-section-transition-stages span.is-active {
    color: var(--foundations-gold) !important;
    -webkit-text-fill-color: var(--foundations-gold) !important;
}

#onboarding-wizard .wizard-section-transition-stages span.is-complete i {
    border-color: #8a5a12;
    background: #8a5a12;
    box-shadow: 0 0 0 4px rgba(216,178,94,.13);
}

#onboarding-wizard .wizard-section-transition-stages span.is-complete i::after {
    content: "\2713";
    position: absolute;
    inset: -2px;
    display: grid;
    place-items: center;
    color: #fffaf2;
    -webkit-text-fill-color: #fffaf2;
    font: 800 10px/1 system-ui, sans-serif;
}

#onboarding-wizard .wizard-section-transition-stages span.is-active i {
    border-color: #8a5a12;
    background: #d8b25e;
    box-shadow: 0 0 0 5px rgba(216,178,94,.17), 0 0 18px rgba(138,90,18,.25);
    animation: foundationsStagePulse 1s ease-in-out infinite;
}

#onboarding-wizard .wizard-section-transition.is-active .wizard-section-transition-kicker,
#onboarding-wizard .wizard-section-transition.is-active h3,
#onboarding-wizard .wizard-section-transition.is-active > p:not(.wizard-section-transition-kicker),
#onboarding-wizard .wizard-section-transition.is-active .wizard-section-transition-stages {
    animation: foundationsTransitionCopy .46s cubic-bezier(.16, 1, .3, 1) both;
}

#onboarding-wizard .wizard-section-transition.is-active h3 { animation-delay: 70ms; }
#onboarding-wizard .wizard-section-transition.is-active > p:not(.wizard-section-transition-kicker) { animation-delay: 120ms; }
#onboarding-wizard .wizard-section-transition.is-active .wizard-section-transition-stages { animation-delay: 165ms; }

#onboarding-wizard .wizard-chat-input-row input,
#onboarding-wizard .wizard-input,
#onboarding-wizard input,
#onboarding-wizard select,
#onboarding-wizard textarea {
    border-color: rgba(138, 90, 18, .34) !important;
    background: rgba(255, 253, 248, .96) !important;
    color: var(--foundations-ink) !important;
    -webkit-text-fill-color: var(--foundations-ink) !important;
    caret-color: var(--foundations-gold) !important;
}

#onboarding-wizard input::placeholder,
#onboarding-wizard textarea::placeholder {
    color: var(--foundations-muted) !important;
    -webkit-text-fill-color: var(--foundations-muted) !important;
    opacity: 1 !important;
}

#onboarding-wizard .wizard-chat-input-row button,
#onboarding-wizard .wizard-nav button,
#onboarding-wizard .wizard-next-btn {
    border: 1px solid #17130e !important;
    background: linear-gradient(135deg, #211b13, #17130e) !important;
    color: var(--foundations-cream) !important;
    -webkit-text-fill-color: var(--foundations-cream) !important;
    box-shadow: 0 11px 24px rgba(23, 19, 14, .18), inset 0 1px 0 rgba(216, 178, 94, .30) !important;
}

#onboarding-wizard .wizard-chat-helper {
    color: var(--foundations-muted) !important;
    -webkit-text-fill-color: var(--foundations-muted) !important;
}

#onboarding-wizard .wizard-input-group,
#onboarding-wizard .wizard-option,
#onboarding-wizard label[style*="background:white"],
#onboarding-wizard button[style*="background:white"],
#onboarding-wizard button[style*="background:#fff"] {
    border-color: var(--foundations-line) !important;
    background: rgba(255, 253, 248, .86) !important;
    color: var(--foundations-ink) !important;
    -webkit-text-fill-color: var(--foundations-ink) !important;
}

#onboarding-wizard .wizard-slide h2,
#onboarding-wizard .wizard-slide h3,
#onboarding-wizard .wizard-slide h4,
#onboarding-wizard .wizard-slide p,
#onboarding-wizard .wizard-slide label,
#onboarding-wizard .wizard-slide label span,
#onboarding-wizard .wizard-slide strong {
    color: var(--foundations-ink) !important;
    -webkit-text-fill-color: var(--foundations-ink) !important;
}

@keyframes foundationsOrbit {
    from { transform: translate3d(-2%, -2%, 0) rotate(-5deg) scale(.96); opacity: .62; }
    to { transform: translate3d(10%, 5%, 0) rotate(8deg) scale(1.06); opacity: 1; }
}

@keyframes foundationsGlow {
    from { transform: translate3d(0, 0, 0) scale(.94); opacity: .55; }
    to { transform: translate3d(-8%, -7%, 0) scale(1.12); opacity: .92; }
}

@keyframes foundationsDrift {
    from { background-position: 0 0, 23px 31px; }
    to { background-position: 44px -88px, -44px -103px; }
}

@keyframes foundationsSheen {
    0%, 25% { background-position: 130% 0; opacity: .62; }
    65%, 100% { background-position: -30% 0; opacity: 1; }
}

@keyframes foundationsMark {
    0%, 100% { transform: translateY(0) rotate(0); filter: drop-shadow(0 5px 9px rgba(138,90,18,.10)); }
    50% { transform: translateY(-3px) rotate(2deg); filter: drop-shadow(0 9px 13px rgba(138,90,18,.20)); }
}

@keyframes foundationsCardAura {
    from { background-position: 0% 0%, 100% 100%, 0 0; }
    to { background-position: 22% 16%, 76% 74%, 0 0; }
}

@keyframes foundationsChoiceCheck {
    from { opacity: 0; transform: scale(.4) rotate(-20deg); }
    to { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes foundationsTransitionOrbit {
    to { transform: rotate(360deg); }
}

@keyframes foundationsTransitionPulse {
    0%, 100% { transform: scale(.94); opacity: .55; }
    50% { transform: scale(1.05); opacity: 1; }
}

@keyframes foundationsTransitionLogo {
    from { opacity: 0; transform: scale(.72) rotate(-8deg); }
    to { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes foundationsTransitionCopy {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

@keyframes foundationsTransitionSweep {
    from { left: -42%; }
    to { left: 118%; }
}

@keyframes foundationsStagePulse {
    0%, 100% { transform: scale(.9); }
    50% { transform: scale(1.08); }
}

@media (max-width: 560px) {
    #onboarding-wizard.onboarding-overlay {
        align-items: flex-start !important;
        padding: max(6px, env(safe-area-inset-top, 0px)) 6px max(6px, env(safe-area-inset-bottom, 0px)) !important;
    }

    #onboarding-wizard .onboarding-modal.wizard-container,
    html[data-pbb-theme="light"] #onboarding-wizard .onboarding-modal.wizard-container,
    html[data-pbb-theme="dark"] #onboarding-wizard .onboarding-modal.wizard-container {
        width: calc(100vw - 12px) !important;
        height: calc(var(--pbb-wizard-viewport-height, 100dvh) - max(12px, env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px))) !important;
        max-height: calc(var(--pbb-wizard-viewport-height, 100dvh) - max(12px, env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px))) !important;
        border-radius: 24px !important;
    }

    #onboarding-wizard .wizard-header {
        padding: 18px 18px 0 !important;
    }

    #onboarding-wizard .wizard-content {
        padding: 8px 18px max(14px, env(safe-area-inset-bottom, 0px)) !important;
    }

    #onboarding-wizard .wizard-chat-intake {
        gap: 12px !important;
    }

    #onboarding-wizard .wizard-chat-bubble.coach:last-child {
        font-size: clamp(1.35rem, 6.2vw, 1.82rem) !important;
        line-height: 1.09 !important;
    }

    #onboarding-wizard .wizard-chat-choices {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    #onboarding-wizard .wizard-chat-choice {
        min-height: 58px !important;
        font-size: 1rem !important;
    }

    #onboarding-wizard.wizard-chat-mode.wizard-chat-keyboard {
        padding: 4px 6px !important;
    }

    #onboarding-wizard.wizard-chat-mode.wizard-chat-keyboard .onboarding-modal.wizard-container {
        width: calc(100vw - 12px) !important;
        height: calc(var(--pbb-wizard-viewport-height, 100dvh) - 8px) !important;
        max-height: calc(var(--pbb-wizard-viewport-height, 100dvh) - 8px) !important;
        border-radius: 18px !important;
    }

    #onboarding-wizard.wizard-chat-mode.wizard-chat-keyboard .wizard-header {
        display: none !important;
    }

    #onboarding-wizard.wizard-chat-mode.wizard-chat-keyboard .wizard-content {
        padding: 6px 14px 8px !important;
    }

    #onboarding-wizard.wizard-chat-mode.wizard-chat-keyboard .wizard-chat-intake {
        grid-template-rows: auto auto minmax(0, 1fr) auto auto !important;
        gap: 7px !important;
        padding-bottom: 0 !important;
    }

    #onboarding-wizard.wizard-chat-mode.wizard-chat-keyboard .wizard-chat-progress-row {
        min-height: 32px !important;
        padding-bottom: 2px !important;
    }

    #onboarding-wizard.wizard-chat-mode.wizard-chat-keyboard .wizard-chat-messages {
        min-height: 72px !important;
        max-height: 34vh !important;
        padding: 2px 0 4px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    #onboarding-wizard.wizard-chat-mode.wizard-chat-keyboard .wizard-chat-bubble.coach:last-child {
        font-size: clamp(1.18rem, 5.5vw, 1.5rem) !important;
    }

    #onboarding-wizard.wizard-chat-mode.wizard-chat-keyboard .wizard-chat-choices {
        padding-bottom: 4px !important;
    }

    #onboarding-wizard.wizard-chat-mode.wizard-chat-keyboard .wizard-chat-input-row {
        padding-top: 5px !important;
    }

    #onboarding-wizard .wizard-section-transition {
        grid-template-rows: 132px auto auto auto auto;
        padding: 26px 22px;
    }

    #onboarding-wizard .wizard-section-transition-orbit {
        width: 118px;
        height: 118px;
    }

    #onboarding-wizard .wizard-section-transition-orbit img {
        width: 64px;
        height: 64px;
    }
}

@media (max-height: 690px) and (max-width: 560px) {
    #onboarding-wizard .wizard-header {
        padding-top: 12px !important;
    }

    #onboarding-wizard .wizard-brand-lockup {
        transform: scale(.88);
        transform-origin: left center;
    }

    #onboarding-wizard .wizard-content {
        padding-top: 4px !important;
    }

    #onboarding-wizard .wizard-chat-bubble.coach:last-child {
        font-size: clamp(1.22rem, 5.7vw, 1.58rem) !important;
    }

    #onboarding-wizard .wizard-chat-choice {
        min-height: 50px !important;
        padding: 10px 13px !important;
    }

    #onboarding-wizard .wizard-section-transition {
        grid-template-rows: 102px auto auto auto auto;
        gap: 8px;
        padding: 18px;
    }

    #onboarding-wizard .wizard-section-transition-orbit {
        width: 92px;
        height: 92px;
    }

    #onboarding-wizard .wizard-section-transition-orbit img {
        width: 50px;
        height: 50px;
    }
}

/* Test-account-only mobile hardening. Android WebViews can report a zero
   safe-area inset while drawing the status bar over web content. */
@media (max-width: 560px) {
    html.pbb-onboarding-phone-test #onboarding-wizard.onboarding-overlay {
        --pbb-wizard-safe-top: max(42px, env(safe-area-inset-top, 0px));
        --pbb-wizard-safe-bottom: max(6px, env(safe-area-inset-bottom, 0px));
        top: var(--pbb-wizard-viewport-top, 0px) !important;
        bottom: auto !important;
        align-items: flex-start !important;
        padding: var(--pbb-wizard-safe-top) 6px var(--pbb-wizard-safe-bottom) !important;
    }

    html.pbb-onboarding-phone-test #onboarding-wizard .onboarding-modal.wizard-container {
        width: calc(100vw - 12px) !important;
        height: calc(var(--pbb-wizard-viewport-height, 100dvh) - var(--pbb-wizard-safe-top) - var(--pbb-wizard-safe-bottom)) !important;
        max-height: calc(var(--pbb-wizard-viewport-height, 100dvh) - var(--pbb-wizard-safe-top) - var(--pbb-wizard-safe-bottom)) !important;
    }

    html.pbb-onboarding-phone-test #onboarding-wizard.wizard-chat-mode.wizard-chat-keyboard .wizard-chat-choices {
        min-height: 0 !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    html.pbb-onboarding-phone-test #onboarding-wizard.wizard-chat-mode.wizard-chat-keyboard .wizard-chat-choice {
        min-height: 48px !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    html.pbb-onboarding-phone-test #onboarding-wizard.wizard-chat-mode.wizard-chat-keyboard .wizard-chat-input-row {
        position: sticky !important;
        bottom: 0 !important;
        z-index: 8 !important;
        background: rgba(255, 250, 242, .98) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    #onboarding-wizard.onboarding-overlay::before,
    #onboarding-wizard.onboarding-overlay::after,
    #onboarding-wizard .wizard-particles,
    #onboarding-wizard .onboarding-modal.wizard-container,
    #onboarding-wizard .onboarding-modal.wizard-container::before,
    #onboarding-wizard .wizard-brand-mark,
    #onboarding-wizard .wizard-chat-choice.is-confirmed::before,
    #onboarding-wizard .wizard-section-transition::after,
    #onboarding-wizard .wizard-section-transition-orbit > span,
    #onboarding-wizard .wizard-section-transition-orbit img,
    #onboarding-wizard .wizard-section-transition-stages span.is-active i,
    #onboarding-wizard .wizard-section-transition.is-active .wizard-section-transition-kicker,
    #onboarding-wizard .wizard-section-transition.is-active h3,
    #onboarding-wizard .wizard-section-transition.is-active > p,
    #onboarding-wizard .wizard-section-transition.is-active .wizard-section-transition-stages {
        animation: none !important;
    }

    #onboarding-wizard .wizard-chat-choice,
    #onboarding-wizard #wizard-chat-progress-fill,
    #onboarding-wizard .wizard-section-transition {
        transition-duration: .01ms !important;
    }
}

/* Paid-preview handoff: a calm, dedicated setup screen replaces the small
   inline meal-plan progress card. */
#onboarding-wizard .wizard-container {
    position: relative;
}

#onboarding-wizard .wizard-personalising-screen {
    position: absolute;
    inset: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: calc(34px + env(safe-area-inset-top, 0px)) 28px calc(28px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    text-align: center;
    color: #1a202c;
    -webkit-text-fill-color: #1a202c;
    background: radial-gradient(circle at 50% 24%, rgba(221, 183, 91, .2), transparent 14rem), linear-gradient(180deg, #fffaf2 0%, #f6eddd 100%);
}

#onboarding-wizard .wizard-personalising-screen[hidden] { display: none !important; }
#onboarding-wizard .wizard-personalising-glow { position:absolute; width:180px; height:180px; top:15%; border-radius:50%; background:rgba(216,178,94,.13); filter:blur(18px); animation:wizardPersonalisingGlow 2.6s ease-in-out infinite; }
#onboarding-wizard .wizard-personalising-logo { position:relative; width:88px; height:88px; object-fit:contain; filter:drop-shadow(0 12px 24px rgba(113,78,19,.18)); }
#onboarding-wizard .wizard-personalising-kicker { position:relative; margin:16px 0 7px; color:#8b641d; -webkit-text-fill-color:#8b641d; font:900 .7rem/1.2 Montserrat,sans-serif; letter-spacing:.16em; }
#onboarding-wizard .wizard-personalising-screen h2 { position:relative; margin:0; max-width:330px; color:#1a202c; -webkit-text-fill-color:#1a202c; font:800 clamp(1.7rem,7vw,2.15rem)/1.08 Georgia,serif; }
#onboarding-wizard .wizard-personalising-detail { position:relative; min-height:42px; margin:11px 0 22px; max-width:330px; color:#625a4c; -webkit-text-fill-color:#625a4c; font:600 .88rem/1.5 Montserrat,sans-serif; }
#onboarding-wizard .wizard-personalising-stages { position:relative; width:min(100%,340px); display:grid; gap:10px; text-align:left; }
#onboarding-wizard .wizard-personalising-stage { display:flex; align-items:center; gap:12px; min-height:52px; padding:11px 13px; border:1px solid rgba(154,105,25,.16); border-radius:14px; background:rgba(255,255,255,.55); color:#847c70; -webkit-text-fill-color:#847c70; font:700 .78rem/1.3 Montserrat,sans-serif; transition:.25s ease; }
#onboarding-wizard .wizard-personalising-stage span { width:24px; height:24px; flex:0 0 24px; display:grid; place-items:center; border:2px solid #d8cdb7; border-radius:50%; color:#fff; -webkit-text-fill-color:#fff; }
#onboarding-wizard .wizard-personalising-stage.is-complete { color:#4e4639; -webkit-text-fill-color:#4e4639; border-color:rgba(154,105,25,.26); background:rgba(255,250,240,.88); }
#onboarding-wizard .wizard-personalising-stage.is-complete span { border-color:#b8892b; background:#b8892b; }
#onboarding-wizard .wizard-personalising-stage.is-active { color:#1a202c; -webkit-text-fill-color:#1a202c; border-color:#c99b3f; background:#fff; box-shadow:0 10px 25px rgba(103,73,18,.11); transform:translateY(-1px); }
#onboarding-wizard .wizard-personalising-stage.is-active span { border-color:#b8892b; border-right-color:transparent; animation:wizardPersonalisingSpin .8s linear infinite; }
#onboarding-wizard .wizard-personalising-progress { position:relative; width:min(100%,340px); height:7px; margin-top:18px; overflow:hidden; border-radius:999px; background:#e8ddc8; }
#onboarding-wizard .wizard-personalising-progress i { display:block; width:12%; height:100%; border-radius:inherit; background:linear-gradient(90deg,#a97821,#e0bc68); transition:width .4s ease; }
#onboarding-wizard .wizard-personalising-retry { position:relative; width:min(100%,340px); min-height:48px; margin-top:18px; border:0; border-radius:999px; background:#171923; color:#fff; -webkit-text-fill-color:#fff; font:900 .8rem Montserrat,sans-serif; letter-spacing:.06em; }
#onboarding-wizard .wizard-personalising-switch { position:relative; margin-top:15px; padding:8px 12px; border:0; background:transparent; color:#756b5d; -webkit-text-fill-color:#756b5d; font:700 .75rem Montserrat,sans-serif; text-decoration:underline; text-underline-offset:3px; }
#onboarding-wizard .wizard-personalising-screen.is-error .wizard-personalising-stage.is-active span { animation:none; border-color:#b42318; color:#b42318; -webkit-text-fill-color:#b42318; }

@keyframes wizardPersonalisingSpin { to { transform:rotate(360deg); } }
@keyframes wizardPersonalisingGlow { 50% { transform:scale(1.12); opacity:.62; } }
@media (prefers-reduced-motion: reduce) {
    #onboarding-wizard .wizard-personalising-glow,
    #onboarding-wizard .wizard-personalising-stage.is-active span { animation:none; }
}