.flow-action-stack {
    width: min(100%, 408px);
    max-width: 408px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.85rem;
    margin: 1.25rem auto 0;
    box-sizing: border-box;
}

.flow-action-stack.flow-action-stack--flush {
    margin-top: 0;
}

.flow-action-stack[data-flow-dock] {
    scroll-margin-bottom: calc(var(--flow-action-dock-height, 0px) + 1.5rem);
}

body.play-flow-route .footer {
    display: none !important;
}

body.play-flow-route #site-sticky-header {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(-100%) !important;
}

body.play-flow-route {
    min-height: 100dvh;
    background: var(--header-to-body-bg);
    background-attachment: fixed;
}

body.play-flow-route > main {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    body.play-flow-route:not(.play-start-active) header {
        padding-top: 0.7rem;
        padding-bottom: 0.75rem;
    }

    body.play-flow-route:not(.play-start-active) .header-link > .main-logo-image {
        width: clamp(42px, 12vw, 54px);
        margin-bottom: 0.3rem;
    }

    body.play-flow-route:not(.play-start-active) .bannertext {
        font-size: clamp(1.45rem, 6vw, 1.85rem);
        line-height: 1.05;
    }

    body.play-flow-route:not(.play-start-active) .tagline {
        display: none;
    }
}

@media (min-width: 769px) {
    body.play-flow-route:not(.play-start-active) header {
        padding-top: 0.75rem;
        padding-bottom: 0.85rem;
    }

    body.play-flow-route:not(.play-start-active) .header-link > .main-logo-image {
        width: clamp(54px, 5vw, 64px);
        margin-bottom: 0.35rem;
    }

    body.play-flow-route:not(.play-start-active) .bannertext {
        font-size: 1.9rem;
        line-height: 1.04;
    }

    body.play-flow-route:not(.play-start-active) .tagline {
        margin-top: 0.35rem;
        font-size: 0.95rem;
    }
}

.flow-action-dock-placeholder {
    width: min(100%, 408px);
    max-width: 408px;
    margin: 1.25rem auto 0;
    visibility: hidden;
    pointer-events: none;
    box-sizing: border-box;
}

.flow-action-stack.flow-action-stack--docked {
    position: fixed !important;
    top: auto !important;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1100;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    align-items: stretch;
    gap: 0.55rem;
    padding: 0.55rem max(0.75rem, env(safe-area-inset-left)) calc(0.58rem + env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-right));
    border-top: 0;
    background: var(--flow-action-dock-surface, rgba(238, 238, 238, 0.985));
    box-shadow: 0 -10px 24px rgba(15, 23, 42, 0.11);
    opacity: 1;
    transform: translateY(0) !important;
    transition: opacity 0.14s ease, transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, opacity;
}

.flow-action-stack.flow-action-stack--docked.flow-action-stack--dock-entering {
    opacity: 0;
    pointer-events: none;
    transform: translateY(0.55rem) !important;
}

.flow-action-stack.flow-action-stack--docked .flow-action {
    width: min(100%, 408px);
    max-width: 408px;
    min-height: 48px;
    margin-inline: auto;
}

.flow-action-stack.flow-action-stack--docked .back-button.flow-action--icon-left {
    width: min(100%, 10rem);
    max-width: 10rem;
    align-self: flex-start;
    margin-left: 0;
    margin-right: auto;
    padding-left: 2.85rem;
    padding-right: 1.25rem;
}

.flow-action-stack.flow-action-stack--docked.flow-action-stack--back-primary-action {
    display: grid;
    grid-template-columns: minmax(5.5rem, 6.25rem) minmax(0, 1fr);
    align-items: stretch;
    gap: 0.55rem;
}

.flow-action-stack.flow-action-stack--docked.flow-action-stack--back-primary-action > .flow-action:not(.back-button) {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    max-width: none;
}

.flow-action-stack.flow-action-stack--docked.flow-action-stack--back-primary-action > .back-button.flow-action--icon-left {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    max-width: none;
    margin: 0;
    padding-right: 0.65rem;
    padding-left: 2rem;
}

.flow-action-stack.flow-action-stack--docked.flow-action-stack--back-primary-action > .back-button.flow-action--icon-left .flow-action__icon,
.flow-action-stack.flow-action-stack--docked.flow-action-stack--back-primary-action > .back-button.flow-action--icon-left > i {
    left: 0.75rem;
}

body.bioage-result-ready .lwc-step-actions {
    display: none !important;
}

html.flow-action-dock-active {
    scroll-padding-bottom: calc(var(--flow-action-dock-height, 0px) + 1rem);
}

.flow-action-stack .flow-action,
.option-button.flow-action {
    width: 100%;
    min-width: 0;
    max-width: 408px;
    min-height: 60px;
    margin: 0;
    padding: 0.85rem 3.25rem;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border-radius: 50px;
    font: inherit;
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.22;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
}

.flow-action-stack .flow-action {
    max-width: none;
}

.flow-action-stack .back-button {
    width: min(100%, 11rem);
    max-width: 11rem;
    align-self: center;
}

.flow-action__label,
.flow-action .dashboard-action-label {
    display: block;
    width: 100%;
    min-width: 0;
    text-align: center;
}

.option-button.flow-action > i,
.flow-action__icon {
    position: absolute;
    top: 50%;
    right: 1.35rem;
    width: 1.25rem;
    margin: 0 !important;
    text-align: center;
    transform: translateY(-50%);
}

.option-button.flow-action.flow-action--icon-left {
    padding-right: 2rem;
}

.option-button.flow-action.flow-action--icon-left > i,
.flow-action--icon-left .flow-action__icon {
    right: auto;
    left: 1.35rem;
}

.option-button.flow-action.back-button,
.option-button.flow-action.flow-action--secondary {
    background: #f8fafc;
    border: 1px solid rgba(96, 125, 139, 0.16);
    color: #526d7a;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
}

.option-button.flow-action.back-button:hover,
.option-button.flow-action.flow-action--secondary:hover {
    background: #eef2f7;
    border-color: rgba(96, 125, 139, 0.22);
    color: #405866;
}

.option-button.flow-action:disabled,
.option-button.flow-action:disabled:hover {
    background: #eef2f7 !important;
    border: 1px solid rgba(100, 116, 139, 0.16);
    color: #64748b;
    box-shadow: none !important;
    cursor: not-allowed;
    opacity: 1;
    pointer-events: none;
    transform: none;
    user-select: none;
}

.flow-action-stack.flow-action-stack--hide-disabled-primary > .flow-action:disabled {
    display: none;
}

.flow-action-stack .flow-action:focus:not(:focus-visible) {
    outline: none;
}

.flow-action-stack--docked [data-flow-dock-label] .flow-action__label {
    font-size: 0;
}

.flow-action-stack--docked [data-flow-dock-label] .flow-action__label::after {
    content: attr(data-flow-dock-label);
    font-size: 1rem;
}

.flow-note {
    width: min(100%, 408px);
    max-width: 408px;
    min-width: 0;
    margin-inline: auto;
    box-sizing: border-box;
}

@media (max-width: 600px) {
    .flow-action-stack {
        width: min(100%, 408px);
        gap: 0.7rem;
    }

    .flow-action-stack.flow-action-stack--docked {
        padding-block-start: 0.5rem;
        padding-bottom: calc(0.52rem + env(safe-area-inset-bottom));
    }

    .flow-action-stack .flow-action,
    .option-button.flow-action {
        min-height: 56px;
        padding-inline: 3rem;
        font-size: 1rem;
    }

    .flow-action-stack.flow-action-stack--docked .flow-action {
        min-height: 48px;
        padding-block: 0.55rem;
        padding-inline: 2.4rem;
        font-size: 0.95rem;
    }

    .option-button.flow-action > i,
    .flow-action__icon {
        right: 1.2rem;
    }

    .option-button.flow-action.flow-action--icon-left > i,
    .flow-action--icon-left .flow-action__icon {
        left: 1.2rem;
    }
}

@media (min-width: 960px) {
    .flow-action-stack.flow-action-stack--docked {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 0.9rem;
        padding-block: 0.6rem calc(0.62rem + env(safe-area-inset-bottom));
    }

    .flow-action-stack.flow-action-stack--docked .flow-action {
        flex: 0 1 260px;
        width: min(260px, calc((100vw - 4rem) / 3));
        max-width: 260px;
        min-height: 44px;
        margin-inline: 0;
        padding-block: 0.55rem;
        padding-inline: 2rem;
    }

    .flow-action-stack.flow-action-stack--docked .flow-action:only-child {
        flex-basis: 408px;
        width: min(408px, calc(100vw - 4rem));
        max-width: 408px;
    }

    .flow-action-stack.flow-action-stack--docked.flow-action-stack--single-back-action .back-button.flow-action--icon-left {
        flex-basis: 11rem;
        width: min(11rem, calc(100vw - 4rem));
        max-width: 11rem;
        align-self: center;
        margin-inline: 0;
    }

    .flow-action-stack.flow-action-stack--docked.flow-action-stack--back-primary-action {
        display: grid;
        grid-template-columns: minmax(8.75rem, 11rem) minmax(16rem, 19rem) minmax(8.75rem, 11rem);
        justify-content: center;
        gap: 0.75rem;
    }

    .flow-action-stack.flow-action-stack--docked.flow-action-stack--back-primary-action > .flow-action:not(.back-button) {
        grid-column: 2;
        grid-row: 1;
        width: 100%;
        max-width: none;
        justify-self: stretch;
    }

    .flow-action-stack.flow-action-stack--docked.flow-action-stack--back-primary-action > .back-button.flow-action--icon-left {
        grid-column: 1;
        grid-row: 1;
        width: 100%;
        max-width: none;
        justify-self: stretch;
        align-self: stretch;
        order: -1;
    }
}

@media (min-width: 640px) and (max-width: 932px) and (max-height: 480px) and (orientation: landscape) {
    .flow-action-stack {
        gap: 0.55rem;
        margin-top: 0.65rem;
    }

    .flow-action-stack--docked {
        gap: 0.5rem;
        padding-block: 0.55rem calc(0.55rem + env(safe-area-inset-bottom));
    }

    .flow-action-stack .flow-action,
    .option-button.flow-action {
        min-height: 44px;
        padding-block: 0.55rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .flow-action-stack.flow-action-stack--docked {
        transition: none;
    }
}