/*
 | Heavenly Pair app theme tokens
 | Canonical semantic token source for fallback heavenly, women, and men variants.
 */

:root {
    --hp-radius-xl: 32px;
    --hp-radius-lg: 24px;
    --hp-radius-md: 18px;
    --hp-radius-sm: 14px;
    --hp-radius-pill: 999px;

    --hp-page-gutter: 18px;
    --hp-page-max: 430px;
    --hp-bottom-nav-height: 64px;
    --hp-safe-bottom: env(safe-area-inset-bottom, 0px);

    --hp-shell-width: 540px;
    --hp-shell-gutter: 0px;
    --hp-shell-desktop-max: 1180px;
    --hp-topbar-height: 126px;
    --hp-bottomnav-height: 96px;

    --hp-bg: #F1E3CF;
    --hp-bg-soft: #FAF2E8;
    --hp-surface: rgba(255, 253, 249, 0.84);
    --hp-surface-raised: #FFFDF9;
    --hp-surface-soft: #FBF4ED;

    --hp-text: #5C493F;
    --hp-text-muted: #75645A;
    --hp-text-soft: var(--hp-text-muted);
    --hp-border: rgba(92, 73, 63, 0.12);
    --hp-border-strong: rgba(92, 73, 63, 0.18);

    --hp-accent: #E8B39D;
    --hp-accent-hover: #DDA188;
    --hp-accent-active: #C98970;
    --hp-accent-soft: #F2CFC7;
    --hp-accent-foreground: #4F3A31;

    --hp-secondary: #F2BAB0;
    --hp-secondary-soft: #F8DED8;
    --hp-highlight: #F6D9A1;
    --hp-focus-ring: rgba(221, 161, 136, 0.22);
    --hp-shadow-color: rgba(116, 83, 67, 0.12);

    --hp-error: #A24D42;
    --hp-error-soft: rgba(244, 207, 200, 0.56);
    --hp-success: #3F735B;
    --hp-success-soft: rgba(219, 241, 230, 0.86);
    --hp-warning: #9C6A2C;
    --hp-warning-soft: rgba(246, 217, 161, 0.36);
    --hp-notification: #D85F55;

    --hp-paper-rgb: 255, 253, 249;
    --hp-paper-soft-rgb: 251, 244, 237;
    --hp-text-rgb: 92, 73, 63;
    --hp-text-muted-rgb: 117, 100, 90;
    --hp-accent-rgb: 232, 179, 157;
    --hp-accent-hover-rgb: 221, 161, 136;
    --hp-accent-active-rgb: 201, 137, 112;
    --hp-secondary-rgb: 242, 186, 176;
    --hp-highlight-rgb: 246, 217, 161;
    --hp-shadow-rgb: 116, 83, 67;
    --hp-notification-rgb: 216, 95, 85;

    --hp-line: rgba(92, 73, 63, 0.085);
    --hp-line-strong: rgba(92, 73, 63, 0.14);
    --hp-nav-muted: #A48F82;
    --hp-ink: var(--hp-text);
    --hp-ink-soft: var(--hp-text-muted);
    --hp-body: #7E6F66;
    --hp-muted: #A59489;
    --hp-muted-2: #D2C1B7;
    --hp-primary: var(--hp-accent);
    --hp-primary-strong: var(--hp-accent-active);
    --hp-on-accent: var(--hp-accent-foreground);
    --hp-on-dark: #FFFDF9;
    --hp-bg-2: var(--hp-bg-soft);
    --hp-paper: var(--hp-surface-raised);
    --hp-paper-soft: var(--hp-surface-soft);
    --hp-surface-strong: var(--hp-surface-raised);
    --hp-surface-muted: var(--hp-surface-soft);
    --hp-shell-start: #F4D9CE;
    --hp-shell-mid: #FAF2E8;
    --hp-shell-end: #F5DDD7;
    --hp-shadow: 0 18px 50px var(--hp-shadow-color);
    --hp-shadow-strong: 0 22px 54px rgba(116, 83, 67, 0.16);
    --hp-shadow-soft: 0 12px 30px rgba(116, 83, 67, 0.09);
    --hp-shadow-shell: 0 30px 80px rgba(86, 59, 47, 0.18);
}

.hp-theme-heavenly {
    color-scheme: light;
}

.hp-theme-women {
    --hp-bg: #F1E3CF;
    --hp-bg-soft: #FAF2E8;
    --hp-surface: rgba(255, 253, 249, 0.84);
    --hp-surface-raised: #FFFDF9;
    --hp-surface-soft: #FBF4ED;

    --hp-text: #5C493F;
    --hp-text-muted: #75645A;
    --hp-border: rgba(92, 73, 63, 0.12);
    --hp-border-strong: rgba(92, 73, 63, 0.18);

    --hp-accent: #E8B39D;
    --hp-accent-hover: #DDA188;
    --hp-accent-active: #C98970;
    --hp-accent-soft: #F2CFC7;
    --hp-accent-foreground: #4F3A31;

    --hp-secondary: #F2BAB0;
    --hp-secondary-soft: #F8DED8;
    --hp-highlight: #F6D9A1;
    --hp-focus-ring: rgba(221, 161, 136, 0.22);
    --hp-shadow-color: rgba(116, 83, 67, 0.12);

    --hp-paper-rgb: 255, 253, 249;
    --hp-paper-soft-rgb: 251, 244, 237;
    --hp-text-rgb: 92, 73, 63;
    --hp-text-muted-rgb: 117, 100, 90;
    --hp-accent-rgb: 232, 179, 157;
    --hp-accent-hover-rgb: 221, 161, 136;
    --hp-accent-active-rgb: 201, 137, 112;
    --hp-secondary-rgb: 242, 186, 176;
    --hp-highlight-rgb: 246, 217, 161;
    --hp-shadow-rgb: 116, 83, 67;

    --hp-line: rgba(92, 73, 63, 0.085);
    --hp-line-strong: rgba(92, 73, 63, 0.14);
    --hp-nav-muted: #A48F82;
    --hp-ink: var(--hp-text);
    --hp-ink-soft: var(--hp-text-muted);
    --hp-body: #7E6F66;
    --hp-muted: #A59489;
    --hp-muted-2: #D2C1B7;
    --hp-primary: var(--hp-accent);
    --hp-primary-strong: var(--hp-accent-active);
    --hp-on-accent: var(--hp-accent-foreground);
    --hp-bg-2: var(--hp-bg-soft);
    --hp-paper: var(--hp-surface-raised);
    --hp-paper-soft: var(--hp-surface-soft);
    --hp-surface-strong: var(--hp-surface-raised);
    --hp-surface-muted: var(--hp-surface-soft);
    --hp-shell-start: #F4D9CE;
    --hp-shell-mid: #FAF2E8;
    --hp-shell-end: #F5DDD7;
    --hp-shadow: 0 18px 50px var(--hp-shadow-color);
    --hp-shadow-strong: 0 22px 54px rgba(116, 83, 67, 0.16);
    --hp-shadow-soft: 0 12px 30px rgba(116, 83, 67, 0.09);
    --hp-shadow-shell: 0 30px 80px rgba(86, 59, 47, 0.18);
    color-scheme: light;
}

.hp-theme-men {
    --hp-bg: #DDEBE8;
    --hp-bg-soft: #F2F7F4;
    --hp-surface: rgba(252, 253, 249, 0.86);
    --hp-surface-raised: #FCFDF9;
    --hp-surface-soft: #EEF4F0;

    --hp-text: #40534D;
    --hp-text-muted: #61726C;
    --hp-border: rgba(64, 83, 77, 0.12);
    --hp-border-strong: rgba(64, 83, 77, 0.18);

    --hp-accent: #BFDAD6;
    --hp-accent-hover: #A6CCC6;
    --hp-accent-active: #86B8B0;
    --hp-accent-soft: #DDEBE8;
    --hp-accent-foreground: #304943;

    --hp-secondary: #CFA9B5;
    --hp-secondary-soft: #E9D9DF;
    --hp-highlight: #E8C493;
    --hp-focus-ring: rgba(166, 204, 198, 0.22);
    --hp-shadow-color: rgba(67, 92, 84, 0.12);

    --hp-paper-rgb: 252, 253, 249;
    --hp-paper-soft-rgb: 238, 244, 240;
    --hp-text-rgb: 64, 83, 77;
    --hp-text-muted-rgb: 97, 114, 108;
    --hp-accent-rgb: 191, 218, 214;
    --hp-accent-hover-rgb: 166, 204, 198;
    --hp-accent-active-rgb: 134, 184, 176;
    --hp-secondary-rgb: 207, 169, 181;
    --hp-highlight-rgb: 232, 196, 147;
    --hp-shadow-rgb: 67, 92, 84;

    --hp-line: rgba(64, 83, 77, 0.085);
    --hp-line-strong: rgba(64, 83, 77, 0.14);
    --hp-nav-muted: #849690;
    --hp-ink: var(--hp-text);
    --hp-ink-soft: var(--hp-text-muted);
    --hp-body: #72817C;
    --hp-muted: #95A39D;
    --hp-muted-2: #C4D0CB;
    --hp-primary: var(--hp-accent);
    --hp-primary-strong: var(--hp-accent-active);
    --hp-on-accent: var(--hp-accent-foreground);
    --hp-bg-2: var(--hp-bg-soft);
    --hp-paper: var(--hp-surface-raised);
    --hp-paper-soft: var(--hp-surface-soft);
    --hp-surface-strong: var(--hp-surface-raised);
    --hp-surface-muted: var(--hp-surface-soft);
    --hp-shell-start: #D7E2D2;
    --hp-shell-mid: #EDF4F1;
    --hp-shell-end: #DDEBE8;
    --hp-shadow: 0 18px 50px var(--hp-shadow-color);
    --hp-shadow-strong: 0 22px 54px rgba(67, 92, 84, 0.16);
    --hp-shadow-soft: 0 12px 30px rgba(67, 92, 84, 0.09);
    --hp-shadow-shell: 0 30px 80px rgba(44, 69, 62, 0.17);
    color-scheme: light;
}


@import 'tailwindcss';
@import './hp-theme-tokens.css';
@import './hp-heavenly-foundation.css';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';

@theme {
    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol', 'Noto Color Emoji';
}

body.hp-shell-page {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(circle at top left, rgba(var(--hp-secondary-rgb, 242, 186, 176), 0.35), transparent 30%),
        radial-gradient(circle at top right, rgba(var(--hp-accent-rgb, 232, 179, 157), 0.24), transparent 26%),
        linear-gradient(180deg, var(--hp-bg-2, #faf2e8) 0%, var(--hp-bg, #f1e3cf) 100%);
    color: var(--hp-text);
    font-family: var(--font-sans);
    overflow-x: hidden;
}

.hp-app-frame {
    width: min(calc(100vw - (var(--hp-shell-gutter) * 2)), var(--hp-shell-width));
    min-height: 100dvh;
    margin: 0 auto;
    position: relative;
}

.hp-shell-page * {
    box-sizing: border-box;
}

.hp-shell-page a {
    color: inherit;
    text-decoration: none;
}

.hp-shell {
    width: 100%;
    min-height: 100dvh;
    background: rgba(var(--hp-paper-rgb, 255, 253, 249), 0.52);
    backdrop-filter: blur(20px);
    box-shadow: var(--hp-shadow);
    position: relative;
    overflow: hidden;
}

.hp-topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    min-height: var(--hp-topbar-height);
    padding: calc(14px + env(safe-area-inset-top, 0px)) 16px 14px;
    display: grid;
    gap: 12px;
    background: rgba(var(--hp-paper-rgb, 255, 253, 249), 0.9);
    backdrop-filter: blur(22px);
    border-bottom: 1px solid rgba(var(--hp-paper-rgb, 255, 253, 249), 0.72);
    transition: transform 180ms ease, opacity 180ms ease;
}

.hp-topbar.is-hidden {
    transform: translateY(-110%);
    opacity: 0;
    pointer-events: none;
}

.hp-topbar__brand-row {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--hp-border);
}

.hp-topbar__brand-title {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.hp-topbar__section-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding-top: 2px;
}

.hp-topbar__section-link {
    min-height: 42px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--hp-border);
    background: var(--hp-surface);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.15;
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, color 160ms ease;
}

.hp-topbar__section-link.is-active {
    background: linear-gradient(135deg, var(--hp-accent), var(--hp-accent-hover));
    border-color: transparent;
    color: var(--hp-accent-foreground);
    box-shadow: 0 12px 24px rgba(var(--hp-accent-rgb), 0.22);
}

.hp-topbar__eyebrow,
.hp-eyebrow,
.hp-list-card__eyebrow,
.hp-stat-card__label {
    color: var(--hp-text-soft);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.hp-topbar__title {
    margin: 6px 0 0;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.15;
}

.hp-section-title,
.hp-list-card__title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.24;
}

.hp-topbar__subtitle,
.hp-copy-muted,
.hp-list-card p,
.hp-link-card p,
.hp-stat-card__hint,
.hp-timeline__item p,
.hp-bullet-list {
    color: var(--hp-text-soft);
    font-size: 0.95rem;
    line-height: 1.55;
}

.hp-brand-mark {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid var(--hp-border);
}

.hp-brand-mark__badge,
.hp-profile-avatar,
.hp-avatar-pill__avatar {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--hp-on-dark);
    background: linear-gradient(135deg, var(--hp-accent), var(--hp-secondary));
    box-shadow: 0 12px 24px rgba(var(--hp-accent-rgb), 0.24);
}

.hp-brand-mark__text,
.hp-avatar-pill__text {
    font-weight: 600;
    white-space: nowrap;
}

.hp-avatar-pill,
.hp-icon-button,
.hp-primary-button,
.hp-inline-link {
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.hp-icon-button,
.hp-avatar-pill {
    border: 1px solid var(--hp-border);
    background: rgba(255, 255, 255, 0.86);
    border-radius: 999px;
    min-height: 42px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: inherit;
    color: var(--hp-text);
    cursor: pointer;
}

.hp-icon-button:hover,
.hp-avatar-pill:hover,
.hp-primary-button:hover,
.hp-inline-link:hover,
.hp-link-card:hover,
.hp-bottom-nav__item:hover {
    transform: translateY(-1px);
}

.hp-icon-button--ghost {
    background: rgba(255, 255, 255, 0.6);
}

.hp-shell__main {
    min-height: calc(100dvh - var(--hp-topbar-height));
    padding-bottom: calc(var(--hp-bottomnav-height) + env(safe-area-inset-bottom, 0px) + 24px);
}

.hp-app-frame[data-top-visible="false"] .hp-shell__main {
    min-height: 100dvh;
}

.hp-app-frame[data-bottom-visible="false"] .hp-shell__main {
    padding-bottom: 24px;
}

.hp-shell__main--padded {
    padding-inline: 20px;
    padding-top: 22px;
}

.hp-app-screen,
.hp-app-screen__body,
.hp-app-shell-panel,
.hp-app-shell-panel__body,
.hp-app-content {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.hp-app-screen {
    min-height: 100vh;
}

.hp-app-screen,
.hp-app-screen__body,
.hp-app-shell-panel,
.hp-app-shell-panel__body,
.hp-app-content {
    position: relative;
    top: 0;
    transform: none;
    align-content: start;
}

.hp-app-screen__chrome,
.hp-app-shell-panel__chrome {
    display: grid;
    gap: 16px;
}

.hp-app-shell-panel__body,
.hp-app-content {
    align-content: start;
}

html.hp-question-picker-open,
body.hp-question-picker-open {
    overflow: hidden;
}

.hp-question-picker {
    position: fixed;
    inset: 0;
    z-index: 60;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    display: grid;
    align-items: center;
    justify-items: center;
    padding: 16px;
    padding-top: max(16px, env(safe-area-inset-top, 0px));
    padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
    overflow: auto;
    overscroll-behavior: contain;
}

.hp-question-picker[hidden] {
    display: none;
}

.hp-question-picker__backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    padding: 0;
    background: rgba(24, 18, 45, 0.52);
}

.hp-question-picker__panel {
    position: relative;
    z-index: 1;
    width: min(100%, 600px);
    max-height: calc(100dvh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    margin: auto 0;
    overflow: hidden;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    border-radius: 28px;
    background: var(--hp-surface-strong, #ffffff);
    border: 1px solid var(--hp-border);
    box-shadow: 0 24px 60px rgba(31, 22, 56, 0.22);
}

.hp-question-picker__body {
    min-height: 0;
    overflow: auto;
    max-height: calc(100dvh - 140px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
}

@media (max-width: 767px) {
    .hp-question-picker {
        padding: 0;
        align-items: end;
        overflow: hidden;
    }

    .hp-question-picker__panel {
        width: 100%;
        max-height: min(92dvh, calc(100dvh - env(safe-area-inset-top, 0px)));
        margin-top: auto;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .hp-question-picker__body {
        max-height: calc(92dvh - 140px - env(safe-area-inset-top, 0px));
    }
}

.hp-page-header,
.hp-page-content,
.hp-section-stack,
.hp-list-stack,
.hp-link-list,
.hp-card-grid,
.hp-chip-row,
.hp-inline-form,
.hp-profile-head {
    display: grid;
    gap: 16px;
}

.hp-section-stack--focus {
    gap: 20px;
    justify-items: stretch;
}

.hp-hero-card,
.hp-feature-card,
.hp-panel-card,
.hp-list-card,
.hp-stat-card,
.hp-link-card {
    background: var(--hp-surface);
    border: 1px solid var(--hp-border);
    border-radius: var(--hp-radius-lg);
    box-shadow: 0 8px 28px rgba(55, 26, 116, 0.06);
}

.hp-hero-card,
.hp-feature-card,
.hp-panel-card,
.hp-list-card {
    padding: 20px;
}

.hp-hero-card {
    gap: 18px;
}

.hp-feature-card--focus {
    text-align: center;
    padding-block: 28px;
}

.hp-feature-card--profile {
    gap: 18px;
}

.hp-hero-title {
    margin: 8px 0 0;
    font-size: 1.45rem;
    font-weight: 600;
    line-height: 1.14;
}

.hp-card-grid--stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hp-card-grid--two-up {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hp-stat-card {
    padding: 16px;
    gap: 6px;
    display: grid;
}

.hp-stat-card__value,
.hp-score-display {
    font-size: clamp(1.65rem, 4vw, 2.4rem);
    font-weight: 800;
    line-height: 1;
}

.hp-score-display {
    margin: 10px 0;
}

.hp-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.hp-chip,
.hp-score-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 600;
}

.hp-chip {
    background: rgba(var(--hp-accent-rgb), 0.12);
    color: var(--hp-accent-deep);
}

.hp-chip--soft {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--hp-border);
    color: var(--hp-text-soft);
}

.hp-section-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: start;
}

.hp-link-list,
.hp-list-stack,
.hp-timeline,
.hp-bullet-list {
    gap: 14px;
}

.hp-link-card {
    padding: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
}

.hp-link-card--static {
    cursor: default;
}

.hp-list-card {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: start;
}

.hp-list-card--stacked {
    display: grid;
}

.hp-list-card__aside {
    display: grid;
    gap: 10px;
    justify-items: end;
}

.hp-score-pill {
    min-width: 54px;
    background: linear-gradient(135deg, rgba(var(--hp-accent-rgb), 0.16), rgba(var(--hp-secondary-rgb), 0.16));
    color: var(--hp-accent-deep);
}

.hp-inline-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--hp-primary-strong);
    font-weight: 600;
}

.hp-timeline {
    display: grid;
}

.hp-timeline__item {
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.hp-timeline__dot {
    width: 14px;
    height: 14px;
    margin-top: 6px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--hp-accent), var(--hp-secondary));
    box-shadow: 0 0 0 6px rgba(var(--hp-accent-rgb), 0.1);
}

.hp-bullet-list {
    margin: 0;
    padding-left: 18px;
}

.hp-profile-head {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
}

.hp-profile-avatar {
    width: 64px;
    height: 64px;
    font-size: 1.3rem;
}

.hp-primary-button {
    border: 0;
    border-radius: 18px;
    padding: 14px 18px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, var(--hp-accent), var(--hp-accent-hover));
    color: var(--hp-accent-foreground);
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 16px 32px rgba(var(--hp-accent-strong-rgb), 0.26);
}

.hp-primary-button--dark {
    background: var(--hp-text);
    color: var(--hp-on-dark);
    box-shadow: 0 16px 32px rgba(var(--hp-text-rgb), 0.22);
}

.hp-onboarding-stack,
.hp-onboarding-form,
.hp-choice-list {
    display: grid;
    gap: 18px;
}

.hp-choice-list--cards {
    grid-template-columns: 1fr;
    gap: 12px;
}

.hp-choice-list--triad {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hp-onboarding-hero,
.hp-question-head,
.hp-form-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.hp-onboarding-hero {
    padding-top: 8px;
    flex-wrap: wrap;
}

.hp-onboarding-step,
.hp-step-badge {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.hp-onboarding-step {
    color: var(--hp-text-soft);
}

.hp-step-badge {
    min-width: 38px;
    height: 38px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--hp-accent-active);
    background: rgba(var(--hp-accent-rgb), 0.14);
}

.hp-copy-center {
    text-align: center;
    justify-items: center;
}

.hp-copy-wide {
    max-width: 58ch;
}

.hp-brand-mark--centered {
    margin-inline: auto;
}

.hp-onboarding-card {
    gap: 20px;
}

.hp-section-stack--tight {
    gap: 12px;
}

.hp-card-grid--three-up {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hp-card-grid--wizard {
    align-items: start;
}

.hp-stat-card--step {
    position: relative;
    padding-top: 18px;
}

.hp-auth-actions {
    display: grid;
    gap: 14px;
}

.hp-social-button {
    width: 100%;
    min-height: 56px;
}

.hp-form-grid {
    display: grid;
    gap: 16px;
}

.hp-form-grid--single {
    grid-template-columns: 1fr;
}

.hp-form-grid--two-up {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hp-form-field {
    display: grid;
    gap: 8px;
}

.hp-form-field span {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--hp-text-soft);
}

.hp-form-field input,
.hp-form-field select {
    width: 100%;
    min-height: 52px;
    border-radius: 16px;
    border: 1px solid var(--hp-border);
    background: rgba(255, 255, 255, 0.92);
    padding: 0 16px;
    font: inherit;
    color: var(--hp-text);
}

.hp-form-field input:focus,
.hp-form-field select:focus {
    outline: none;
    border-color: var(--hp-border-strong);
    box-shadow: 0 0 0 4px var(--hp-focus-ring);
}

.hp-form-field input:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.hp-checkbox-row {
    display: flex;
    align-items: start;
    gap: 12px;
    color: var(--hp-text);
    font-size: 0.96rem;
    line-height: 1.45;
}

.hp-checkbox-row input {
    margin-top: 3px;
}

.hp-form-actions--centered {
    justify-content: center;
}

.hp-status-card {
    border-radius: 18px;
    padding: 14px 16px;
    border: 1px solid var(--hp-border);
    font-weight: 600;
}

.hp-status-card--soft {
    background: rgba(255, 255, 255, 0.78);
    color: var(--hp-text-soft);
}

.hp-status-card--success {
    background: rgba(52, 211, 153, 0.12);
    border-color: rgba(16, 185, 129, 0.22);
    color: #0f766e;
}

.hp-status-card--error {
    background: rgba(251, 113, 133, 0.12);
    border-color: rgba(244, 63, 94, 0.22);
    color: #be123c;
}

.hp-choice-button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.hp-choice-button {
    min-height: 46px;
    padding: 0 18px;
    border-radius: 999px;
    border: 1px solid var(--hp-border);
    background: rgba(255, 255, 255, 0.9);
    color: var(--hp-text);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, color 160ms ease;
}

.hp-choice-button.is-selected {
    color: var(--hp-accent-foreground);
    border-color: transparent;
    background: linear-gradient(135deg, var(--hp-accent), var(--hp-accent-hover));
    box-shadow: 0 12px 24px rgba(var(--hp-accent-rgb), 0.2);
}

.hp-bottom-nav {
    position: fixed;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: min(calc(100vw - (var(--hp-shell-gutter) * 2)), var(--hp-shell-width));
    z-index: 24;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(var(--hp-paper-rgb), 0.94);
    backdrop-filter: blur(24px);
    border-top: 1px solid var(--hp-border);
    box-shadow: 0 -10px 24px rgba(var(--hp-shadow-rgb), 0.08);
    transition: transform 180ms ease, opacity 180ms ease;
}

.hp-bottom-nav.is-hidden {
    transform: translateX(-50%) translateY(110%);
    opacity: 0;
    pointer-events: none;
}

.hp-bottom-nav__item {
    border-radius: 16px;
    min-height: 58px;
    padding: 8px 6px;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 4px;
    color: var(--hp-nav-muted);
}

.hp-bottom-nav__item.is-active {
    background: linear-gradient(135deg, rgba(var(--hp-accent-rgb), 0.14), rgba(var(--hp-secondary-rgb), 0.14));
    color: var(--hp-accent-active);
}

.hp-bottom-nav__icon {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.hp-bottom-nav__icon-svg {
    width: 28px;
    height: 28px;
    display: block;
}

.hp-bottom-nav__icon-img {
    width: 28px;
    height: 28px;
    display: block;
    object-fit: contain;
    filter: contrast(1.08) saturate(0.92);
}

.hp-bottom-nav__label {
    font-size: 0.76rem;
    font-weight: 700;
}

.hp-chrome-reveal {
    position: fixed;
    left: 50%;
    bottom: calc(22px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%) translateY(16px);
    z-index: 30;
    opacity: 0;
    pointer-events: none;
    border: 0;
    border-radius: 999px;
    min-height: 44px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--hp-text);
    color: var(--hp-on-dark);
    font: inherit;
    font-weight: 700;
    box-shadow: 0 18px 36px rgba(var(--hp-text-rgb), 0.28);
    transition: opacity 180ms ease, transform 180ms ease;
    cursor: pointer;
}

.hp-chrome-reveal.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

@media (min-width: 768px) {
    :root {
        --hp-shell-width: 100vw;
        --hp-shell-gutter: 0px;
    }
}

@media (min-width: 1100px) {
    :root {
        --hp-shell-width: var(--hp-shell-desktop-max);
        --hp-shell-gutter: 24px;
    }
}

@media (max-width: 720px) {
    .hp-topbar {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .hp-topbar__title-wrap {
        text-align: left;
        order: -1;
    }

    .hp-topbar__actions {
        justify-content: flex-start;
    }
}

@media (max-width: 560px) {
    :root {
        --hp-topbar-height: 132px;
        --hp-bottomnav-height: 100px;
    }

    .hp-shell__main--padded {
        padding-inline: 16px;
    }

    .hp-card-grid--stats,
    .hp-card-grid--two-up,
    .hp-card-grid--three-up,
    .hp-card-grid--wizard,
    .hp-form-grid--two-up,
    .hp-list-card,
    .hp-profile-head {
        grid-template-columns: 1fr;
        display: grid;
    }

    .hp-list-card__aside {
        justify-items: start;
    }

    .hp-section-head,
    .hp-onboarding-hero,
    .hp-question-head,
    .hp-form-actions,
    .hp-choice-button-row {
        flex-direction: column;
        align-items: stretch;
    }
}


/*
 | Heavenly Pair soft-mobile foundation
 | Source reference: heavenly_pair_profile_mobile_v2.html
 |
 | Usage patterns:
 | 1) Wrap the page root with .hp-theme-heavenly
 | 2) Use .hp-mobile-page for the screen background
 | 3) Use .hp-page-stack inside for vertical sections
 | 4) Compose with cards/panels/buttons/lists below
 |
 | Example Blade skeleton:
 |
 | <body class="hp-shell-page hp-theme-heavenly">
 |   <main class="hp-mobile-page">
 |     <section class="hp-page-stack">
 |       <article class="hp-paper-card hp-paper-card--hero">
 |         <p class="hp-kicker">Личен профил</p>
 |         <h1 class="hp-serif-title hp-serif-title--xl">Елена</h1>
 |         <p class="hp-body-copy">...</p>
 |       </article>
 |     </section>
 |   </main>
 | </body>
 */

.hp-theme-heavenly {
    --hp-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --hp-font-serif: Georgia, "Times New Roman", serif;

    color: var(--hp-ink);
    font-family: var(--hp-font-sans);
}

.hp-theme-heavenly,
.hp-theme-heavenly * {
    box-sizing: border-box;
}

.hp-theme-heavenly a {
    color: inherit;
    text-decoration: none;
}

body.hp-shell-page.hp-theme-heavenly,
body.hp-shell-page.hp-theme-women,
body.hp-shell-page.hp-theme-men {
    padding: 18px 10px;
    background:
        radial-gradient(circle at 0% 4%, rgba(var(--hp-paper-rgb), 0.62), transparent 26%),
        radial-gradient(circle at 100% 18%, rgba(var(--hp-paper-rgb), 0.48), transparent 30%),
        linear-gradient(135deg, var(--hp-shell-start) 0%, var(--hp-shell-mid) 48%, var(--hp-shell-end) 100%);
    color: var(--hp-ink);
    font-family: var(--hp-font-sans);
}

.hp-shell-page.hp-theme-heavenly .hp-app-frame {
    width: min(100%, var(--hp-page-max));
}

.hp-shell-page.hp-theme-heavenly .hp-shell {
    min-height: calc(100dvh - 36px);
    border-radius: 38px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.28)),
        var(--hp-bg-2);
    backdrop-filter: none;
    box-shadow: var(--hp-shadow-shell);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.55);
}

.hp-shell-page.hp-theme-heavenly .hp-topbar {
    min-height: auto;
    padding: calc(18px + env(safe-area-inset-top, 0px)) 18px 12px;
    gap: 14px;
    background: transparent;
    backdrop-filter: none;
    border-bottom: 0;
}

.hp-shell-page.hp-theme-heavenly .hp-topbar__brand-row {
    min-height: auto;
    padding-bottom: 0;
    border-bottom: 0;
}

.hp-shell-page.hp-theme-heavenly .hp-topbar__brand-title {
    font-family: var(--hp-font-serif);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.hp-shell-page.hp-theme-heavenly .hp-topbar__section-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.hp-shell-page.hp-theme-heavenly .hp-topbar__section-link {
    min-height: 40px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.82);
    background: rgba(255, 253, 248, 0.74);
    color: var(--hp-ink-soft);
    box-shadow: var(--hp-shadow-soft);
    font-size: 12px;
    font-weight: 700;
}

.hp-shell-page.hp-theme-heavenly .hp-topbar__section-link.is-active,
.hp-shell-page.hp-theme-women .hp-topbar__section-link.is-active,
.hp-shell-page.hp-theme-men .hp-topbar__section-link.is-active {
    background: var(--hp-accent);
    color: var(--hp-accent-foreground);
    box-shadow: 0 8px 18px rgba(var(--hp-accent-rgb), 0.2);
}

.hp-shell-page.hp-theme-heavenly .hp-shell__main {
    min-height: auto;
    padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px));
}

.hp-shell-page.hp-theme-heavenly .hp-shell__main--padded {
    padding-top: 0;
    padding-inline: 18px;
}

.hp-shell-page.hp-theme-heavenly .hp-bottom-nav {
    left: 50%;
    right: auto;
    bottom: 0;
    width: min(calc(100vw - 36px), calc(var(--hp-page-max) - 36px));
    height: calc(64px + env(safe-area-inset-bottom, 0px));
    border-radius: 26px 26px 0 0;
    background: rgba(255, 253, 248, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.72);
    box-shadow: 0 18px 44px rgba(122, 99, 79, 0.15);
    backdrop-filter: blur(18px);
    padding: 0 4px env(safe-area-inset-bottom, 0px);
    transform: translateX(-50%);
}

.hp-shell-page.hp-theme-heavenly .hp-bottom-nav__item {
    min-height: 100%;
    border-radius: 20px;
    color: #a89889;
    gap: 4px;
}

.hp-shell-page.hp-theme-heavenly .hp-bottom-nav__icon {
    width: 28px;
    height: 28px;
}

.hp-shell-page.hp-theme-heavenly .hp-bottom-nav__icon-svg,
.hp-shell-page.hp-theme-heavenly .hp-bottom-nav__icon-img {
    width: 28px;
    height: 28px;
}

.hp-shell-page.hp-theme-heavenly .hp-bottom-nav__icon-symbol {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    line-height: 1;
    font-weight: 400;
}

.hp-shell-page.hp-theme-heavenly .hp-bottom-nav__icon-symbol--serif {
    font-family: Georgia, 'Times New Roman', serif;
}

.hp-shell-page.hp-theme-heavenly .hp-bottom-nav__icon-symbol--gear {
    font-family: inherit;
}

.hp-shell-page.hp-theme-heavenly .hp-bottom-nav__label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.1;
    text-align: center;
    white-space: nowrap;
}

.hp-shell-page.hp-theme-heavenly .hp-bottom-nav__item.is-active {
    color: var(--hp-accent);
}

.hp-shell-page.hp-theme-heavenly .hp-bottom-nav__item.is-active::after {
    bottom: 7px;
    width: 5px;
    height: 5px;
    background: var(--hp-accent);
}

.hp-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.hp-shell-page.hp-theme-heavenly .hp-bottom-nav__activity-icon-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
}

.hp-shell-page.hp-theme-heavenly .hp-bottom-nav__activity-running {
    position: absolute;
    inset: -4px;
    border-radius: 999px;
    border: 1.5px solid rgba(116, 109, 102, 0.38);
    animation: hp-activity-ring-pulse 1.8s ease-in-out infinite;
}

.hp-shell-page.hp-theme-heavenly .hp-bottom-nav__activity-dot {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--hp-accent);
    box-shadow: 0 0 0 2px rgba(255, 253, 248, 0.92);
}

.hp-shell-page.hp-theme-heavenly .hp-bottom-nav__item.is-processing {
    color: var(--hp-ink-soft);
}

.hp-activity-page {
    gap: 14px;
}

.hp-activity-page__hero {
    padding: 22px 20px;
}

.hp-activity-page__status {
    padding: 12px 14px;
    border-radius: var(--hp-radius-md);
    background: rgba(255, 253, 248, 0.74);
    color: var(--hp-ink-soft);
    border: 1px solid var(--hp-line);
}

.hp-activity-group {
    display: grid;
    gap: 10px;
}

.hp-activity-group__list {
    display: grid;
    gap: 10px;
}

.hp-activity-item {
    display: grid;
    gap: 10px;
    padding: 16px;
}

.hp-activity-item__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.hp-activity-item__title,
.hp-activity-item__context,
.hp-activity-item__meta,
.hp-activity-item__error {
    margin: 0;
}

.hp-activity-item__context,
.hp-activity-item__meta {
    color: var(--hp-body);
    font-size: 0.92rem;
}

.hp-activity-item__error {
    color: var(--hp-error);
    font-size: 0.92rem;
}

.hp-activity-item__result-link {
    display: inline-flex;
}

.hp-activity-item__progress {
    position: relative;
    width: 100%;
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(170, 161, 152, 0.22);
}

.hp-activity-item__progress-bar {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(var(--hp-accent-rgb), 0.82), rgba(var(--hp-accent-hover-rgb), 0.96));
    transition: width 0.65s ease;
}

.hp-activity-item--completed .hp-activity-item__progress-bar {
    background: linear-gradient(90deg, rgba(44, 122, 88, 0.82), rgba(34, 105, 74, 0.94));
}

.hp-activity-item--failed .hp-activity-item__progress-bar {
    background: linear-gradient(90deg, rgba(181, 69, 69, 0.7), rgba(156, 48, 48, 0.82));
}

.hp-activity-item__pulse {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: rgba(116, 109, 102, 0.7);
    box-shadow: 0 0 0 0 rgba(116, 109, 102, 0.28);
    animation: hp-activity-dot-pulse 1.8s ease-in-out infinite;
    flex: 0 0 auto;
    margin-top: 6px;
}

.hp-activity-empty {
    padding: 18px;
}

@keyframes hp-activity-ring-pulse {
    0% {
        transform: scale(0.96);
        opacity: 0.48;
    }
    50% {
        transform: scale(1.08);
        opacity: 0.9;
    }
    100% {
        transform: scale(0.96);
        opacity: 0.48;
    }
}

@keyframes hp-activity-dot-pulse {
    0% {
        transform: scale(0.92);
        box-shadow: 0 0 0 0 rgba(116, 109, 102, 0.2);
    }
    50% {
        transform: scale(1.08);
        box-shadow: 0 0 0 8px rgba(116, 109, 102, 0);
    }
    100% {
        transform: scale(0.92);
        box-shadow: 0 0 0 0 rgba(116, 109, 102, 0);
    }
}

.hp-shell-page.hp-theme-heavenly .hp-chrome-reveal {
    background: rgba(255, 253, 248, 0.9);
    color: var(--hp-ink-soft);
    border: 1px solid rgba(255, 255, 255, 0.82);
    box-shadow: var(--hp-shadow-soft);
}

body.hp-shell-page.hp-shell-page--onboarding.hp-theme-heavenly {
    background:
        radial-gradient(circle at 0% 8%, rgba(255, 255, 255, 0.66), transparent 28%),
        radial-gradient(circle at 100% 12%, rgba(255, 255, 255, 0.44), transparent 24%),
        linear-gradient(180deg, #efe4d9 0%, #f8f1eb 46%, #ebdfd4 100%);
}

.hp-shell-page.hp-shell-page--onboarding.hp-theme-heavenly .hp-app-frame {
    width: min(100%, 470px);
}

.hp-shell-page.hp-shell-page--onboarding.hp-theme-heavenly .hp-shell {
    background:
        radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0.55), transparent 24%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.26)),
        var(--hp-bg-2);
    box-shadow: 0 30px 78px rgba(95, 72, 55, 0.16);
    border-inline: 1px solid rgba(255, 255, 255, 0.58);
}

.hp-shell-page.hp-shell-page--onboarding.hp-theme-heavenly .hp-shell__main--padded {
    padding-top: 14px;
    padding-inline: 18px;
    padding-bottom: 34px;
}

.hp-shell-page.hp-shell-page--onboarding.hp-theme-heavenly .hp-page-header {
    margin-bottom: 14px;
}

.hp-brand-header {
    min-height: 36px;
    padding: 0 2px 12px;
    border-bottom: 1px solid rgba(85, 77, 71, 0.085);
    display: flex;
    align-items: center;
    justify-content: center;
}

.hp-brand-header .hp-topbar__brand-row {
    min-height: auto;
    padding-bottom: 0;
    border-bottom: 0;
}

.hp-brand-header .hp-topbar__brand-title {
    font-family: var(--hp-font-serif);
    font-size: 18px;
    font-weight: 700;
    color: var(--hp-ink);
    letter-spacing: 0.01em;
}

.hp-app-screen,
.hp-app-screen__chrome,
.hp-app-screen__body,
.hp-app-shell-panel,
.hp-app-shell-panel__chrome,
.hp-app-shell-panel__body,
.hp-app-topbar__identity,
.hp-app-topbar__actions,
.hp-section-nav,
.hp-app-content {
    display: grid;
}

.hp-app-screen {
    gap: 0;
}

.hp-app-screen__chrome {
    gap: 0;
}

.hp-app-screen__body,
.hp-app-shell-panel__body {
    gap: 0;
}

.hp-app-content {
    padding-bottom: calc(var(--hp-bottom-nav-height) + var(--hp-safe-bottom) + 22px);
}

.hp-app-screen__body {
    padding: 14px 10px 0;
}

.hp-app-shell-panel {
    gap: 18px;
    padding: 20px 18px 22px;
    border-radius: 32px;
    background:
        radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0.62), transparent 28%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.26)),
        var(--hp-bg-2);
    border: 1px solid rgba(255, 255, 255, 0.72);
    box-shadow: var(--hp-shadow-shell);
}

.hp-app-shell-panel__chrome {
    gap: 12px;
}

.hp-app-brand-bar {
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 4px;
}

.hp-app-brand-bar__title {
    margin: 0;
    font-family: var(--hp-font-serif);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--hp-ink);
}

.hp-app-topbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.hp-app-topbar__identity {
    gap: 4px;
    min-width: 0;
}

.hp-app-topbar__title {
    margin: 0;
    font-family: var(--hp-font-serif);
    font-size: clamp(1.65rem, 4.6vw, 2.1rem);
    font-weight: 700;
    line-height: 1.05;
    color: var(--hp-ink);
}

.hp-app-topbar__subtitle {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hp-ink-soft);
}

.hp-app-topbar__actions {
    grid-auto-flow: column;
    gap: 8px;
    align-content: start;
    justify-content: end;
    flex: 0 0 auto;
}

.hp-app-topbar__icon-button {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255, 253, 248, 0.62);
    color: var(--hp-ink-soft);
    box-shadow: 0 8px 20px rgba(122, 99, 79, 0.08);
    cursor: pointer;
}

.hp-section-nav {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    align-items: center;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 0;
    scrollbar-width: none;
}

.hp-section-nav::-webkit-scrollbar {
    display: none;
}

.hp-section-nav__link {
    min-height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.82);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 253, 248, 0.88);
    color: var(--hp-ink-soft);
    box-shadow: none;
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.hp-section-nav__link.is-active {
    background: linear-gradient(135deg, var(--hp-accent), var(--hp-accent-hover));
    color: var(--hp-accent-foreground);
    box-shadow: 0 8px 18px rgba(var(--hp-accent-rgb), 0.18);
}

.hp-app-content {
    gap: 0;
}

.hp-shell-page.hp-shell-page--onboarding.hp-theme-heavenly .hp-onboarding-hero {
    padding-top: calc(6px + env(safe-area-inset-top, 0px));
    align-items: center;
}

.hp-shell-page.hp-shell-page--onboarding.hp-theme-heavenly .hp-onboarding-step {
    color: var(--hp-ink-soft);
    letter-spacing: 0.1em;
}

.hp-login-screen .hp-page-header {
    margin-bottom: 12px;
}

.hp-login-screen .hp-login-topbar {
    min-height: 36px;
    padding: 0 2px 12px;
    border-bottom: 1px solid rgba(85, 77, 71, 0.085);
    display: flex;
    align-items: center;
    justify-content: center;
}

.hp-login-screen .hp-login-topbar__title {
    font-family: var(--hp-font-serif);
    font-size: 18px;
    font-weight: 700;
    color: var(--hp-ink);
    letter-spacing: 0.01em;
}

.hp-login-screen .hp-login-stack {
    gap: 18px;
}

.hp-stage-hero--compact {
    width: min(100%, 38rem);
    margin-left: auto;
    margin-right: auto;
}

.hp-stage-intro--compact {
    width: min(100%, 32rem);
    margin-left: auto;
    margin-right: auto;
}

.hp-login-screen .hp-login-card {
    padding: 28px 20px 24px;
    gap: 24px;
}

.hp-login-screen .hp-login-intro {
    gap: 12px;
    padding-bottom: 12px;
}

.hp-login-screen .hp-login-title {
    margin: 0;
    font-size: 1.45rem;
    font-weight: 600;
    line-height: 1.14;
}

.hp-login-screen .hp-login-subtitle {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--hp-ink-soft);
}

.hp-login-screen .hp-auth-actions--standard {
    gap: 12px;
    margin-top: 16px;
}

.hp-social-auth-button {
    min-height: 52px;
    padding: 0 18px;
    border-radius: 14px;
    border: 1px solid rgba(85, 77, 71, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    box-shadow: 0 8px 20px rgba(122, 99, 79, 0.08);
    transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}

.hp-login-screen .hp-social-auth-button {
    width: 100%;
}

.hp-login-screen .hp-social-auth-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(122, 99, 79, 0.11);
}

.hp-social-auth-button__icon {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
}

.hp-social-auth-button__icon--google {
    color: #4285f4;
    font-family: Arial, sans-serif;
}

.hp-social-auth-button__label {
    display: inline-block;
    min-width: 0;
    line-height: 1.3;
    text-align: center;
}

.hp-login-screen .hp-social-auth-button--facebook {
    background: #5b63f6;
    border-color: transparent;
    color: #ffffff;
}

.hp-login-screen .hp-social-auth-button--facebook .hp-social-auth-button__icon {
    color: #ffffff;
    font-family: Arial, sans-serif;
    font-size: 24px;
}

.hp-login-screen .hp-social-auth-button--google {
    background: #ffffff;
    color: #202124;
}

.hp-login-screen .hp-panel-card {
    gap: 18px;
}

.hp-personal-details-screen .hp-page-header {
    margin-bottom: 12px;
}

.hp-personal-details-screen .hp-personal-details-topbar {
    min-height: 36px;
    padding: 0 2px 12px;
    border-bottom: 1px solid rgba(85, 77, 71, 0.085);
    display: flex;
    align-items: center;
    justify-content: center;
}

.hp-personal-details-screen .hp-login-topbar__title {
    font-family: var(--hp-font-serif);
    font-size: 18px;
    font-weight: 700;
    color: var(--hp-ink);
    letter-spacing: 0.01em;
}

.hp-personal-details-screen .hp-stage-stack {
    gap: 18px;
}

.hp-personal-details-screen .hp-stage-hero {
    padding: 28px 20px 24px;
}

.hp-personal-details-screen .hp-stage-intro {
    gap: 12px;
    text-align: center;
    justify-items: center;
}

.hp-personal-details-screen .hp-stage-heading {
    display: grid;
    gap: 8px;
}

.hp-personal-details-screen .hp-eyebrow {
    margin: 0;
}

.hp-personal-details-screen .hp-hero-title {
    margin: 0;
    font-size: 1.45rem;
    font-weight: 600;
    line-height: 1.14;
}

.hp-personal-details-screen .hp-copy-muted {
    margin: 0;
}

.hp-shell-page.hp-shell-page--onboarding.hp-theme-heavenly .hp-form-status-copy {
    margin: 4px 0 0;
    text-align: center;
    min-height: 1.4em;
}

.hp-shell-page.hp-shell-page--onboarding.hp-theme-heavenly .hp-form-status-copy--success {
    color: var(--hp-accent-strong);
}

.hp-shell-page.hp-shell-page--onboarding.hp-theme-heavenly .hp-form-status-copy--error {
    color: #b55f56;
}

.hp-personal-details-screen .hp-stage-card,
.hp-personal-details-screen .hp-stage-form {
    gap: 24px;
}

.hp-intent-wizard-screen .hp-page-header {
    margin-bottom: 12px;
}

.hp-intent-wizard-screen .hp-intent-wizard-topbar {
    min-height: 36px;
    padding: 0 2px 12px;
    border-bottom: 1px solid rgba(85, 77, 71, 0.085);
    display: flex;
    align-items: center;
    justify-content: center;
}

.hp-intent-wizard-screen .hp-login-topbar__title {
    font-family: var(--hp-font-serif);
    font-size: 18px;
    font-weight: 700;
    color: var(--hp-ink);
    letter-spacing: 0.01em;
}

.hp-intent-wizard-screen .hp-stage-stack {
    gap: 18px;
}

.hp-intent-wizard-screen .hp-stage-hero {
    padding: 28px 20px 24px;
}

.hp-intent-wizard-screen .hp-stage-intro {
    gap: 12px;
    text-align: center;
    justify-items: center;
}

.hp-intent-wizard-screen .hp-stage-intro > .hp-copy-muted {
    max-width: 32rem;
    margin-left: auto;
    margin-right: auto;
}

.hp-intent-wizard-screen .hp-stage-heading {
    display: grid;
    gap: 8px;
}

.hp-tab-title {
    align-self: center;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: rgb(104, 95, 131);
    text-align: center;
    box-shadow: none;
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    line-height: 1;
    text-transform: uppercase;
}

.hp-tab-title--hero,
.hp-tab-title--section {
    margin-top: 12px;
    margin-bottom: 24px;
}

.hp-tab-title--section {
    margin-top: 12px;
    margin-right: auto;
    margin-bottom: 22px;
    margin-left: auto;
}

.hp-question-block {
    display: grid;
    gap: 18px;
    padding-top: 0;
}

.hp-question-block + .hp-question-block {
    margin-top: 30px;
}

.hp-tab-stage {
    display: grid;
    gap: 0;
    padding-top: 0;
}

.hp-stage-card,
.hp-stage-form {
    display: grid;
}

.hp-tab-stage__body {
    display: block;
}

.hp-question-block__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.hp-question-block__title-stack {
    display: grid;
    gap: 8px;
}

.hp-intent-wizard-screen .hp-question-block__head {
    display: grid;
    justify-items: center;
    gap: 14px;
}

.hp-intent-wizard-screen .hp-question-block__badge {
    margin-left: auto;
    margin-right: auto;
}

.hp-intent-wizard-screen .hp-question-block__title-stack {
    justify-items: center;
    text-align: center;
}

.hp-question-block__title,
.hp-question-block__helper {
    margin: 0;
}

.hp-question-block__badge {
    inline-size: 38px;
    block-size: 38px;
    flex: 0 0 38px;
    padding: 0;
    border-radius: 999px;
    display: grid;
    place-items: center;
    line-height: 1;
    border: 1px solid var(--hp-accent-strong);
    background: #fefcf6;
    color: var(--hp-accent-strong);
    box-shadow: none;
}

.hp-intent-wizard-screen .hp-stage-card,
.hp-intent-wizard-screen .hp-stage-form {
    gap: 24px;
}

.hp-intent-wizard-screen .hp-tab-stage {
    gap: 18px;
}

.hp-intent-wizard-screen .hp-stage-status {
    margin-top: 36px;
}

.hp-intent-wizard-screen .hp-form-actions--centered {
    margin-bottom: 50px;
}

body.hp-shell-page.hp-shell-page--onboarding.hp-theme-heavenly.hp-intent-wizard-screen .hp-bottom-action__actions--centered {
    justify-content: center;
    align-items: center;
    text-align: center;
}

.hp-personal-details-screen .hp-form-grid--responsive-stack {
    grid-template-columns: 1fr;
    align-items: start;
}

.hp-personal-details-screen .hp-form-grid--single,
.hp-personal-details-screen .hp-form-grid--two-up,
.hp-personal-details-screen .hp-form-grid--responsive-stack {
    gap: 18px;
}

.hp-personal-details-screen .hp-form-field {
    display: grid;
    gap: 10px;
}

.hp-shell-page.hp-shell-page--onboarding.hp-theme-heavenly .hp-select {
    appearance: none;
    -webkit-appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, rgba(85, 77, 71, 0.72) 50%),
        linear-gradient(135deg, rgba(85, 77, 71, 0.72) 50%, transparent 50%);
    background-position:
        calc(100% - 21px) calc(50% - 2px),
        calc(100% - 15px) calc(50% - 2px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 36px;
}

.hp-shell-page.hp-shell-page--onboarding.hp-theme-heavenly .hp-date-cluster,
.hp-shell-page.hp-shell-page--onboarding.hp-theme-heavenly .hp-time-cluster {
    display: grid;
    gap: 10px;
}

.hp-shell-page.hp-shell-page--onboarding.hp-theme-heavenly .hp-date-cluster {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hp-shell-page.hp-shell-page--onboarding.hp-theme-heavenly .hp-time-cluster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hp-shell-page.hp-shell-page--onboarding.hp-theme-heavenly .hp-date-cluster .hp-select,
.hp-shell-page.hp-shell-page--onboarding.hp-theme-heavenly .hp-time-cluster .hp-select {
    min-width: 0;
}

.hp-shell-page.hp-shell-page--onboarding.hp-theme-heavenly .hp-checkbox-card {
    position: relative;
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 12px;
    align-items: center;
    padding: 16px 18px;
    border-radius: 20px;
    background: rgba(255, 253, 248, 0.82);
    border: 1px solid var(--hp-line);
    box-shadow: var(--hp-shadow-soft);
    cursor: pointer;
}

.hp-shell-page.hp-shell-page--onboarding.hp-theme-heavenly .hp-checkbox-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.hp-shell-page.hp-shell-page--onboarding.hp-theme-heavenly .hp-checkbox-card__indicator {
    width: 24px;
    height: 24px;
    border-radius: 9px;
    border: 1px solid rgba(85, 77, 71, 0.16);
    background: rgba(255, 253, 248, 0.96);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
    position: relative;
    transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.hp-shell-page.hp-shell-page--onboarding.hp-theme-heavenly .hp-checkbox-card__indicator::after {
    content: '';
    position: absolute;
    inset: 5px;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--hp-accent), var(--hp-accent-strong));
    transform: scale(0.4);
    opacity: 0;
    transition: transform 160ms ease, opacity 160ms ease;
}

.hp-shell-page.hp-shell-page--onboarding.hp-theme-heavenly .hp-checkbox-card__indicator--radio {
    border-radius: 999px;
}

.hp-shell-page.hp-shell-page--onboarding.hp-theme-heavenly .hp-checkbox-card__indicator--radio::after {
    inset: 6px;
    border-radius: 999px;
}

.hp-shell-page.hp-shell-page--onboarding.hp-theme-heavenly .hp-checkbox-card__label {
    color: var(--hp-ink);
    font-weight: 600;
    line-height: 1.45;
}

.hp-shell-page.hp-shell-page--onboarding.hp-theme-heavenly .hp-choice-list--cards {
    gap: 12px;
}

.hp-shell-page.hp-shell-page--onboarding.hp-theme-heavenly .hp-choice-list--cards .hp-checkbox-card {
    min-height: 60px;
}

.hp-question-block--constrained {
    width: min(100%, 44rem);
    margin-left: auto;
    margin-right: auto;
}

.hp-shell-page.hp-shell-page--onboarding.hp-theme-heavenly .hp-choice-list--triad {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hp-shell-page.hp-shell-page--onboarding.hp-theme-heavenly .hp-choice-list--triad .hp-checkbox-card {
    grid-template-columns: 1fr;
    justify-items: center;
    align-content: center;
    text-align: center;
    gap: 10px;
    padding: 16px 14px;
}

.hp-shell-page.hp-shell-page--onboarding.hp-theme-heavenly .hp-choice-list--triad .hp-checkbox-card__label {
    font-size: 0.95rem;
}

.hp-shell-page.hp-shell-page--onboarding.hp-theme-heavenly .hp-checkbox-card:has(input:checked) {
    border-color: rgba(226, 102, 88, 0.28);
    box-shadow: 0 12px 28px rgba(226, 102, 88, 0.1);
}

.hp-shell-page.hp-shell-page--onboarding.hp-theme-heavenly .hp-checkbox-card:has(input:checked) .hp-checkbox-card__indicator {
    border-color: transparent;
    box-shadow: 0 10px 18px rgba(226, 102, 88, 0.18);
}

.hp-shell-page.hp-shell-page--onboarding.hp-theme-heavenly .hp-checkbox-card:has(input:checked) .hp-checkbox-card__indicator::after {
    transform: scale(1);
    opacity: 1;
}

.hp-shell-page.hp-shell-page--onboarding.hp-theme-heavenly .hp-checkbox-card:has(input:focus-visible) {
    outline: 0;
    box-shadow: 0 0 0 4px rgba(234, 120, 107, 0.12);
}

.hp-personal-details-screen .hp-input-cluster {
    display: grid;
    gap: 10px;
}

.hp-personal-details-screen .hp-input-cluster--date {
    grid-template-columns: 1fr 1.2fr 1.1fr;
}

.hp-personal-details-screen .hp-input-cluster--time {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hp-personal-details-screen .hp-form-field select {
    appearance: none;
    -webkit-appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, rgba(85, 77, 71, 0.72) 50%),
        linear-gradient(135deg, rgba(85, 77, 71, 0.72) 50%, transparent 50%);
    background-position:
        calc(100% - 21px) calc(50% - 2px),
        calc(100% - 15px) calc(50% - 2px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 36px;
}

.hp-personal-details-screen .hp-input-cluster select {
    min-width: 0;
}

.hp-personal-details-screen .hp-checkbox-row--card {
    position: relative;
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 12px;
    align-items: center;
    padding: 16px 18px;
    border-radius: 20px;
    background: rgba(255, 253, 248, 0.82);
    border: 1px solid var(--hp-line);
    box-shadow: var(--hp-shadow-soft);
    cursor: pointer;
}

.hp-personal-details-screen .hp-checkbox-row--card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.hp-personal-details-screen .hp-checkbox-row__indicator {
    width: 24px;
    height: 24px;
    border-radius: 9px;
    border: 1px solid rgba(85, 77, 71, 0.16);
    background: rgba(255, 253, 248, 0.96);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
    position: relative;
    transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.hp-personal-details-screen .hp-checkbox-row__indicator::after {
    content: '';
    position: absolute;
    inset: 5px;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--hp-accent), var(--hp-accent-strong));
    transform: scale(0.4);
    opacity: 0;
    transition: transform 160ms ease, opacity 160ms ease;
}

.hp-personal-details-screen .hp-checkbox-row__label {
    color: var(--hp-ink);
    font-weight: 600;
    line-height: 1.45;
}

.hp-personal-details-screen .hp-checkbox-row--card:has(input:checked) {
    border-color: rgba(226, 102, 88, 0.28);
    box-shadow: 0 12px 28px rgba(226, 102, 88, 0.1);
}

.hp-personal-details-screen .hp-checkbox-row--card:has(input:checked) .hp-checkbox-row__indicator {
    border-color: transparent;
    box-shadow: 0 10px 18px rgba(226, 102, 88, 0.18);
}

.hp-personal-details-screen .hp-checkbox-row--card:has(input:checked) .hp-checkbox-row__indicator::after {
    transform: scale(1);
    opacity: 1;
}

.hp-personal-details-screen .hp-checkbox-row--card:has(input:focus-visible) {
    outline: 0;
    box-shadow: 0 0 0 4px rgba(234, 120, 107, 0.12);
}

.hp-personal-details-screen .hp-form-actions--centered {
    justify-content: center;
}

.hp-personal-details-screen .hp-primary-button--onboarding {
    min-width: min(100%, 220px);
    justify-content: center;
}

.hp-personal-details-screen .hp-primary-button--onboarding:disabled {
    opacity: 0.72;
    cursor: wait;
    transform: none;
}

.hp-personal-details-screen #personalDetailsStatus {
    margin: 18px 0 0;
}

@media (max-width: 640px) {
    .hp-personal-details-screen .hp-form-grid--two-up,
    .hp-personal-details-screen .hp-form-grid--responsive-stack {
        grid-template-columns: 1fr;
    }

    .hp-shell-page.hp-shell-page--onboarding.hp-theme-heavenly .hp-date-cluster {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hp-shell-page.hp-shell-page--onboarding.hp-theme-heavenly .hp-date-cluster .hp-select:last-child {
        grid-column: 1 / -1;
        inline-size: calc((100% - 10px) / 2);
        justify-self: center;
    }
}

.hp-shell-page.hp-shell-page--onboarding.hp-theme-heavenly .hp-onboarding-card,
.hp-shell-page.hp-shell-page--onboarding.hp-theme-heavenly .hp-stat-card,
.hp-shell-page.hp-shell-page--onboarding.hp-theme-heavenly .hp-status-card,
.hp-shell-page.hp-shell-page--onboarding.hp-theme-heavenly .hp-choice-button,
.hp-shell-page.hp-shell-page--onboarding.hp-theme-heavenly .hp-form-field input,
.hp-shell-page.hp-shell-page--onboarding.hp-theme-heavenly .hp-form-field select,
.hp-shell-page.hp-shell-page--onboarding.hp-theme-heavenly .hp-brand-mark {
    border-color: var(--hp-line);
    box-shadow: var(--hp-shadow-soft);
}

.hp-shell-page.hp-shell-page--onboarding.hp-theme-heavenly .hp-onboarding-card {
    background: rgba(255, 253, 248, 0.78);
    border-radius: 30px;
}

.hp-shell-page.hp-shell-page--onboarding.hp-theme-heavenly .hp-onboarding-card--hero {
    padding-top: 28px;
    padding-bottom: 24px;
}

.hp-shell-page.hp-shell-page--onboarding.hp-theme-heavenly .hp-brand-mark {
    background: rgba(255, 253, 248, 0.76);
}

.hp-shell-page.hp-shell-page--onboarding.hp-theme-heavenly .hp-brand-mark__badge {
    background: rgba(248, 221, 215, 0.92);
    color: var(--hp-accent-strong);
    box-shadow: none;
}

.hp-shell-page.hp-shell-page--onboarding.hp-theme-heavenly .hp-hero-title,
.hp-shell-page.hp-shell-page--onboarding.hp-theme-heavenly .hp-section-title,
.hp-shell-page.hp-shell-page--onboarding.hp-theme-heavenly .hp-list-card__title {
    font-family: var(--hp-font-serif);
    color: var(--hp-ink);
    letter-spacing: 0.01em;
}

.hp-shell-page.hp-shell-page--onboarding.hp-theme-heavenly .hp-section-title,
.hp-shell-page.hp-shell-page--onboarding.hp-theme-heavenly .hp-list-card__title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.24;
}

.hp-shell-page.hp-shell-page--onboarding.hp-theme-heavenly .hp-copy-muted,
.hp-shell-page.hp-shell-page--onboarding.hp-theme-heavenly .hp-stat-card__hint {
    color: var(--hp-body);
}

.hp-inline-note {
    margin: 0;
    color: var(--hp-body);
    font-size: 0.95rem;
    line-height: 1.55;
}

.hp-chip-row--centered {
    justify-content: center;
}

.hp-shell-page.hp-shell-page--onboarding.hp-theme-heavenly .hp-chip,
.hp-shell-page.hp-shell-page--onboarding.hp-theme-heavenly .hp-chip--soft {
    background: rgba(255, 253, 248, 0.78);
    color: var(--hp-ink-soft);
    border: 1px solid rgba(255, 255, 255, 0.82);
}

.hp-shell-page.hp-shell-page--onboarding.hp-theme-heavenly .hp-primary-button {
    background: linear-gradient(135deg, var(--hp-accent), var(--hp-accent-strong));
    box-shadow: 0 18px 36px rgba(226, 102, 88, 0.24);
    border-radius: 20px;
}

.hp-shell-page.hp-shell-page--onboarding.hp-theme-heavenly .hp-primary-button--dark {
    background: linear-gradient(135deg, #d8c8bc, #bcaea2);
    color: #4d4741;
    box-shadow: 0 16px 30px rgba(122, 99, 79, 0.14);
}

.hp-shell-page.hp-shell-page--onboarding.hp-theme-heavenly .hp-form-field span {
    color: var(--hp-ink-soft);
}

.hp-shell-page.hp-shell-page--onboarding.hp-theme-heavenly .hp-form-field input,
.hp-shell-page.hp-shell-page--onboarding.hp-theme-heavenly .hp-form-field select {
    min-height: 56px;
    background: rgba(255, 253, 248, 0.92);
    color: var(--hp-ink);
    border-radius: 18px;
}

.hp-shell-page.hp-shell-page--onboarding.hp-theme-heavenly .hp-form-field input:focus,
.hp-shell-page.hp-shell-page--onboarding.hp-theme-heavenly .hp-form-field select:focus {
    border-color: rgba(226, 102, 88, 0.34);
    box-shadow: 0 0 0 4px rgba(234, 120, 107, 0.12);
}

.hp-shell-page.hp-shell-page--onboarding.hp-theme-heavenly .hp-checkbox-row {
    color: var(--hp-ink);
}

.hp-shell-page.hp-shell-page--onboarding.hp-theme-heavenly .hp-status-card--soft {
    background: rgba(255, 253, 248, 0.76);
    color: var(--hp-ink-soft);
}

.hp-shell-page.hp-shell-page--onboarding.hp-theme-heavenly .hp-status-card--success {
    background: rgba(219, 241, 230, 0.86);
    border-color: rgba(117, 157, 131, 0.22);
    color: #496351;
}

.hp-shell-page.hp-shell-page--onboarding.hp-theme-heavenly .hp-status-card--error {
    background: rgba(250, 229, 225, 0.94);
    border-color: rgba(226, 102, 88, 0.18);
    color: #a24d41;
}

.hp-shell-page.hp-shell-page--onboarding.hp-theme-heavenly .hp-choice-button {
    min-height: 48px;
    background: rgba(255, 253, 248, 0.88);
    color: var(--hp-ink-soft);
}

.hp-shell-page.hp-shell-page--onboarding.hp-theme-heavenly .hp-choice-button.is-selected {
    background: linear-gradient(135deg, var(--hp-accent), var(--hp-accent-hover));
    color: var(--hp-accent-foreground);
    box-shadow: 0 14px 28px rgba(var(--hp-accent-rgb), 0.24);
}

.hp-shell-page.hp-shell-page--onboarding.hp-theme-heavenly .hp-question-head,
.hp-shell-page.hp-shell-page--onboarding.hp-theme-heavenly .hp-form-actions {
    align-items: flex-start;
}

.hp-theme-heavenly button,
.hp-theme-heavenly input,
.hp-theme-heavenly textarea,
.hp-theme-heavenly select {
    font: inherit;
}

.hp-mobile-page {
    min-height: 100dvh;
    color: var(--hp-ink);
    background:
        radial-gradient(circle at 0% 4%, rgba(255, 255, 255, 0.62), transparent 26%),
        radial-gradient(circle at 100% 18%, rgba(255, 255, 255, 0.48), transparent 30%),
        linear-gradient(135deg, #e7d8cc 0%, #f7f0ea 48%, #e4d4c8 100%);
}

.hp-mobile-shell {
    width: min(100%, var(--hp-page-max));
    min-height: 100dvh;
    margin: 0 auto;
    position: relative;
    padding: 18px var(--hp-page-gutter) calc(var(--hp-bottom-nav-height) + var(--hp-safe-bottom) + 32px);
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.28)),
        var(--hp-bg-2);
    box-shadow: var(--hp-shadow-shell);
    border: 1px solid rgba(255, 255, 255, 0.55);
}

.hp-mobile-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at -12% 12%, rgba(255, 255, 255, 0.75), transparent 26%),
        radial-gradient(circle at 108% 0%, rgba(255, 255, 255, 0.55), transparent 28%);
    pointer-events: none;
}

.hp-mobile-shell > * {
    position: relative;
    z-index: 1;
}

.hp-page-stack,
.hp-section-stack,
.hp-card-stack,
.hp-inline-stack {
    display: grid;
}

.hp-page-stack {
    gap: 18px;
}

.hp-section-stack {
    gap: 14px;
}

.hp-card-stack {
    gap: 12px;
}

.hp-inline-stack {
    gap: 8px;
}

.hp-brand-lockup {
    text-align: center;
    padding-top: 2px;
    margin-bottom: 6px;
}

.hp-brand-lockup__title {
    margin: 0;
    font-family: var(--hp-font-serif);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--hp-ink);
}

.hp-brand-lockup__mark {
    display: inline-block;
    color: var(--hp-accent);
    margin-right: 5px;
    font-size: 16px;
    transform: translateY(-1px);
}

.hp-profile-screen .hp-brand-lockup {
    margin-bottom: 18px;
}

.hp-profile-screen .hp-page-head {
    margin: 4px 0 14px;
    padding-left: 1px;
}

body.hp-shell-page.hp-theme-heavenly.hp-profile-screen {
    padding: 0;
}

body.hp-shell-page.hp-theme-heavenly.hp-profile-screen .hp-app-frame {
    width: 100%;
}

body.hp-shell-page.hp-theme-heavenly.hp-profile-screen .hp-shell {
    min-height: 100dvh;
    background: transparent;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    overflow: visible;
}

body.hp-shell-page.hp-theme-heavenly.hp-profile-screen .hp-shell__main--padded {
    padding-top: 0;
    padding-inline: 0;
}

.hp-profile-screen .hp-page-content {
    padding: 0;
}

.hp-profile-screen .hp-profile-card-stage {
    margin: 0;
    padding-bottom: 8px;
    overflow: visible;
}

.hp-profile-screen .hp-profile-side-rail {
    display: grid;
    gap: 18px;
    align-content: start;
}

.hp-profile-screen .hp-paper-card--hero {
    width: min(78%, 336px);
    min-height: 492px;
    max-height: 492px;
    margin: 0 auto;
    padding: 25px 21px 24px;
    padding-top: 54px;
}

.hp-profile-screen .hp-paper-card--hero .hp-card-head {
    margin-bottom: 26px;
}

.hp-profile-screen .hp-paper-card--hero .hp-card-body-split {
    min-height: 383px;
    height: 383px;
}

.hp-profile-screen .hp-paper-card--hero .hp-scroll-copy {
    max-height: 383px;
    padding: 0 6px 28px 0;
}

.hp-profile-screen .hp-dot-nav {
    margin: 2px 0 8px;
}

.hp-profile-screen .hp-form-card {
    padding: 14px;
    border-radius: 23px;
}

.hp-profile-screen .hp-app-screen__chrome {
    gap: 0;
}

.hp-profile-screen .hp-app-brand-bar {
    min-height: 54px;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 18px 10px;
    background: rgba(255, 253, 248, 0.98);
    border-bottom: 1px solid var(--hp-line);
}

.hp-profile-screen .hp-app-shell-panel {
    gap: 18px;
    padding-top: 18px;
}

.hp-profile-screen .hp-app-shell-panel__chrome {
    gap: 14px;
}

.hp-profile-screen .hp-app-content {
    padding-top: 0;
}

.hp-page-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
    margin-bottom: 2px;
}

.hp-page-head__body {
    min-width: 0;
}

.hp-back-button,
.hp-icon-bubble {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    cursor: pointer;
}

.hp-back-button {
    flex: 0 0 auto;
    background: rgba(255, 253, 248, 0.62);
    color: var(--hp-ink-soft);
    box-shadow: 0 8px 20px rgba(122, 99, 79, 0.08);
    font-size: 22px;
}

.hp-kicker {
    margin: 5px 0 0;
    color: var(--hp-muted);
    font-size: 11px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.hp-serif-title,
.hp-serif-heading,
.hp-panel-title {
    margin: 0;
    color: var(--hp-ink);
    font-family: var(--hp-font-serif);
    font-weight: 700;
}

.hp-serif-title--xl {
    font-size: 28px;
    line-height: 1;
    letter-spacing: -0.035em;
}

.hp-serif-title--lg,
.hp-panel-title {
    font-size: 21px;
    line-height: 1.1;
}

.hp-serif-heading {
    font-size: 18px;
    line-height: 1.2;
}

.hp-body-copy,
.hp-body-copy p,
.hp-soft-list,
.hp-soft-list li,
.hp-fine-copy {
    color: var(--hp-body);
    font-size: 14px;
    line-height: 1.58;
}

.hp-fine-copy {
    color: var(--hp-muted);
}

.hp-counter {
    color: var(--hp-muted-2);
    font-size: 13px;
    letter-spacing: 0.02em;
}

.hp-paper-card,
.hp-soft-panel,
.hp-question-box,
.hp-floating-nav {
    border: 1px solid rgba(255, 255, 255, 0.72);
}

.hp-paper-card {
    position: relative;
    overflow: hidden;
    background: var(--hp-paper);
    border-radius: var(--hp-radius-xl);
    box-shadow: var(--hp-shadow-soft);
    padding: 24px 21px;
}

.hp-paper-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 80% -8%, rgba(234, 120, 107, 0.095), transparent 24%),
        radial-gradient(circle at 0% 100%, rgba(205, 188, 172, 0.16), transparent 32%);
    pointer-events: none;
}

.hp-paper-card > * {
    position: relative;
    z-index: 1;
}

.hp-paper-card--hero {
    box-shadow: var(--hp-shadow-strong);
    padding-top: 54px;
}

.hp-paper-card--hero .hp-counter {
    position: absolute;
    top: 24px;
    left: 24px;
    z-index: 2;
}

.hp-paper-card--hero .hp-card-head {
    margin-bottom: 20px;
}

.hp-paper-card--hero .hp-card-body-split {
    min-height: 392px;
}

.hp-paper-card--hero .hp-scroll-copy {
    max-height: 392px;
    padding-bottom: 28px;
}

.hp-soft-panel {
    background: rgba(255, 253, 248, 0.68);
    border-radius: 24px;
    box-shadow: var(--hp-shadow-soft);
    padding: 16px;
}

.hp-soft-panel--glass {
    background: rgba(255, 253, 248, 0.78);
    backdrop-filter: blur(18px);
}

.hp-card-head {
    display: grid;
    gap: 7px;
    margin-bottom: 18px;
    text-align: center;
}

.hp-card-head--left {
    text-align: left;
}

.hp-card-subtitle {
    color: var(--hp-muted);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hp-profile-summary-card__head {
    gap: 10px;
}

.hp-profile-summary-card__eyebrow {
    margin: 0;
}

.hp-profile-summary-card__subtitle {
    margin: 0;
    color: var(--hp-muted);
    font-size: 13px;
    letter-spacing: 0.04em;
}

.hp-action-section {
    display: grid;
    gap: 14px;
}

.hp-action-section__head {
    margin-bottom: 0;
}

.hp-action-section__groups,
.hp-action-section__group,
.hp-action-section__items {
    display: grid;
}

.hp-action-section__groups {
    gap: 12px;
}

.hp-action-section__group {
    gap: 8px;
}

.hp-action-section__items {
    gap: 8px;
}

.hp-action-section__group-label {
    margin: 0;
    color: var(--hp-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hp-action-card {
    display: block;
    padding: 14px 16px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.72);
    box-shadow: var(--hp-shadow-soft);
    color: var(--hp-ink-soft);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.hp-action-card:hover {
    transform: translateY(-1px);
}

.hp-action-card--primary {
    background: rgba(246, 226, 219, 0.78);
    color: var(--hp-ink);
    box-shadow: 0 12px 24px rgba(234, 120, 107, 0.14);
}

.hp-action-card__title {
    display: block;
}

.hp-empty-state-card {
    display: grid;
    gap: 0;
    min-height: 112px;
    align-content: center;
}

.hp-empty-state-card__head {
    margin-bottom: 0;
    gap: 10px;
}

.hp-empty-state-card__title {
    font-size: 1.1rem;
}

.hp-empty-state-card__helper {
    margin: 0;
    color: var(--hp-body);
}

.hp-empty-state-card--placeholder {
    background: rgba(255, 253, 248, 0.78);
}

.hp-empty-state-card--placeholder .hp-empty-state-card__head {
    text-align: center;
}

.hp-empty-state-card--placeholder .hp-empty-state-card__title {
    font-size: 1.22rem;
}

body.hp-question-picker-open {
    overflow: hidden;
}

.hp-question-picker-launch {
    width: 100%;
    border: 0;
    cursor: pointer;
    text-align: left;
}

.hp-question-picker-launch:hover,
.hp-question-picker-launch:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 16px 30px rgba(122, 99, 79, 0.12);
}

.hp-question-picker {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    align-items: start;
    justify-items: center;
    padding: max(12px, env(safe-area-inset-top, 0px)) 12px 12px;
}

.hp-question-picker[hidden] {
    display: none;
}

.hp-question-picker__backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(85, 77, 71, 0.36);
    backdrop-filter: blur(6px);
}

.hp-question-picker__panel {
    position: relative;
    width: min(100%, 600px);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 0;
    max-height: calc(100dvh - max(24px, env(safe-area-inset-top, 0px)) - 24px);
    padding: 16px 18px calc(18px + env(safe-area-inset-bottom, 0px));
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(255, 250, 246, 0.98), rgba(247, 239, 232, 0.99));
    box-shadow: 0 18px 44px rgba(95, 72, 55, 0.2);
    overflow: hidden;
}

.hp-question-picker__header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(85, 77, 71, 0.08);
}

.hp-question-picker__header > :first-child {
    min-width: 0;
    display: grid;
    gap: 8px;
}

.hp-question-picker__title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.hp-question-picker__scope {
    flex: 0 0 auto;
}

.hp-question-picker__scope-trigger {
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid rgba(85, 77, 71, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
    color: var(--hp-ink-soft);
    display: inline-grid;
    place-items: center;
    cursor: pointer;
}

.hp-question-picker__scope-menu {
    width: 280px;
    max-width: 100%;
    margin-top: 8px;
    padding: 8px;
    border: 1px solid rgba(85, 77, 71, 0.1);
    border-radius: 18px;
    background: rgba(255, 252, 248, 0.98);
    box-shadow: 0 18px 34px rgba(95, 72, 55, 0.16);
    display: grid;
    gap: 4px;
}

.hp-question-picker__scope-menu[hidden] {
    display: none;
}

.hp-question-picker__scope-option {
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: var(--hp-ink);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    text-align: left;
    font-size: 0.94rem;
    font-weight: 700;
    cursor: pointer;
}

.hp-question-picker__scope-option.is-active {
    background: rgba(246, 226, 219, 0.82);
}

.hp-question-picker__scope-meta {
    color: var(--hp-body);
    font-size: 0.76rem;
    font-weight: 700;
}

.hp-question-picker__helper,
.hp-question-picker__selection-label,
.hp-question-picker__message,
.hp-question-picker__status,
.hp-question-picker__empty,
.hp-question-picker__empty-copy {
    margin: 0;
}

.hp-question-picker__helper {
    color: var(--hp-body);
}

.hp-question-picker__close {
    width: 52px;
    height: 52px;
    padding: 0;
    border: 1px solid rgba(85, 77, 71, 0.12);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.82);
    color: var(--hp-ink-soft);
    font-size: 1.5rem;
    line-height: 1;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    align-self: flex-start;
    cursor: pointer;
}

.hp-question-picker__close > span {
    display: block;
    line-height: 1;
    transform: translateY(-1px);
}

.hp-question-picker__context {
    padding-top: 2px;
    color: var(--hp-ink-soft);
    font-size: 0.92rem;
    font-weight: 700;
}

.hp-question-picker__body {
    min-height: 0;
    overflow-y: auto;
    display: grid;
    gap: 20px;
    padding: 18px 2px 12px 0;
}

.hp-question-picker__section {
    display: grid;
    gap: 12px;
}

.hp-question-picker__section[hidden],
.hp-question-picker__scope-state[hidden],
.hp-question-picker__add-person[hidden],
.hp-question-picker [hidden] {
    display: none;
}

.hp-question-picker__section--questions {
    min-height: 0;
}

.hp-question-picker__section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.hp-question-picker__section-title {
    margin: 0;
    color: var(--hp-ink);
    font-size: 0.94rem;
    font-weight: 800;
}

.hp-question-picker__scope-state {
    min-height: 0;
}

.hp-question-picker__empty-state {
    padding: 20px 18px;
    border: 1px solid rgba(85, 77, 71, 0.08);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.76);
    display: grid;
    gap: 10px;
}

.hp-question-picker__empty-state--scope {
    gap: 14px;
}

.hp-question-picker__scope-copy {
    display: grid;
    gap: 8px;
}

.hp-question-picker__context-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 18px;
    background: rgba(246, 226, 219, 0.48);
    color: var(--hp-ink);
}

.hp-question-picker__context-label {
    color: var(--hp-body);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.3;
}

.hp-question-picker__context-value {
    font-size: 0.92rem;
    font-weight: 800;
    line-height: 1.3;
}

.hp-question-picker__people-status,
.hp-question-picker__prepared-context {
    padding: 12px 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.78);
    color: var(--hp-ink-soft);
    font-size: 0.88rem;
    line-height: 1.55;
}

.hp-question-picker__people-status[data-state="error"] {
    background: rgba(244, 207, 200, 0.72);
    color: #8f4d45;
}

.hp-question-picker__prepared-context {
    display: grid;
    gap: 4px;
    border: 1px solid rgba(var(--hp-accent-rgb), 0.18);
    background: rgba(var(--hp-accent-rgb), 0.12);
    color: var(--hp-ink);
}

.hp-question-picker__pair-helper {
    color: var(--hp-body);
    font-size: 0.82rem;
    line-height: 1.45;
}

.hp-question-picker__prepared-title,
.hp-question-picker__prepared-copy {
    margin: 0;
}

.hp-question-picker__payload-preview {
    margin: 8px 0 0;
    padding: 10px 12px;
    overflow-x: auto;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(85, 77, 71, 0.12);
    color: var(--hp-ink);
    font-size: 0.74rem;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}

.hp-question-picker__prepared-title {
    font-weight: 800;
}

.hp-question-picker__people-filter {
    display: grid;
    gap: 8px;
}

.hp-question-picker__people-filter .hp-form-field > span {
    color: var(--hp-body);
    font-size: 0.82rem;
    line-height: 1.45;
}

.hp-question-picker__people {
    display: grid;
    gap: 10px;
}

.hp-question-picker__person {
    width: 100%;
    padding: 14px 15px;
    border: 1px solid rgba(85, 77, 71, 0.12);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.88);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    text-align: left;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.hp-question-picker__person:hover,
.hp-question-picker__person:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(85, 77, 71, 0.22);
    box-shadow: 0 14px 28px rgba(122, 99, 79, 0.1);
}

.hp-question-picker__person--selected {
    border-color: rgba(234, 120, 107, 0.52);
    background: rgba(246, 226, 219, 0.48);
    box-shadow: 0 16px 28px rgba(234, 120, 107, 0.12);
}

.hp-question-picker__person-copy {
    min-width: 0;
    display: grid;
    gap: 4px;
    flex: 1 1 auto;
}

.hp-question-picker__person-name {
    color: var(--hp-ink);
    font-size: 0.96rem;
    font-weight: 800;
    line-height: 1.35;
}

.hp-question-picker__person-meta {
    color: var(--hp-body);
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.45;
}

.hp-question-picker__person-affordance {
    flex: 0 0 auto;
    display: grid;
    justify-items: end;
    gap: 8px;
}

.hp-question-picker__person-arrow {
    color: rgba(85, 77, 71, 0.55);
    font-size: 1.2rem;
    line-height: 1;
}

.hp-question-picker__person-selected {
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(234, 120, 107, 0.12);
    color: var(--hp-accent);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.1;
    white-space: nowrap;
}

.hp-question-picker__person-add {
    width: 100%;
    padding: 13px 15px;
    border: 1px dashed rgba(85, 77, 71, 0.18);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.56);
    color: var(--hp-ink-soft);
    font-size: 0.9rem;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
}

.hp-question-picker__person-add-note {
    margin: 0;
    color: var(--hp-body);
    font-size: 0.82rem;
    line-height: 1.5;
}

.hp-question-picker__add-person {
    padding: 16px;
    border: 1px solid rgba(85, 77, 71, 0.1);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.9);
    display: grid;
    gap: 14px;
}

.hp-question-picker__add-person-head {
    display: grid;
    gap: 6px;
}

.hp-question-picker__add-person-title {
    margin: 0;
    color: var(--hp-ink);
    font-size: 0.98rem;
    font-weight: 800;
}

.hp-question-picker__add-person-copy {
    margin: 0;
    color: var(--hp-ink-soft);
    font-size: 0.84rem;
    line-height: 1.55;
}

.hp-question-picker__add-person-form {
    display: grid;
    gap: 14px;
}

.hp-question-picker__form-grid {
    display: grid;
    gap: 12px;
}

.hp-question-picker__field {
    min-width: 0;
}

.hp-relationships,
.hp-relationships-page {
    display: grid;
    gap: 16px;
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}

.hp-relationships__header,
.hp-relationships-page__header {
    display: grid;
    gap: 6px;
}

.hp-relationships__title,
.hp-relationships-page__title {
    margin: 0;
    color: var(--hp-ink);
    font-size: 1.55rem;
    font-weight: 800;
    line-height: 1.15;
}

.hp-relationships__menu,
.hp-relationships-page__people,
.hp-relationships-page__group-list {
    display: grid;
    gap: 12px;
}

.hp-relationships__menu-item,
.hp-person-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 22px;
    border: 1px solid rgba(85, 77, 71, 0.12);
    background: rgba(255, 255, 255, 0.92);
    color: var(--hp-ink);
    text-decoration: none;
    box-shadow: 0 14px 26px rgba(122, 99, 79, 0.08);
}

.hp-relationships__menu-label,
.hp-person-row__name {
    min-width: 0;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.35;
}

.hp-relationships__menu-meta,
.hp-person-row__copy {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hp-person-row__copy {
    flex: 1 1 auto;
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
}

.hp-relationships__menu-count,
.hp-person-row__role {
    color: var(--hp-body);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.4;
}

.hp-relationships__menu-count {
    min-width: 1.75rem;
    padding: 4px 8px;
    border-radius: 999px;
    text-align: center;
    background: rgba(246, 226, 219, 0.54);
}

.hp-relationships__menu-chevron,
.hp-person-row__chevron {
    color: rgba(85, 77, 71, 0.55);
    font-size: 1.2rem;
    line-height: 1;
}

.hp-relationships-page__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--hp-ink-soft);
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
}

.hp-relationships-page__section,
.hp-relationships-page__form-shell,
.hp-family-branch {
    display: grid;
    gap: 12px;
    padding: 16px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(85, 77, 71, 0.08);
}

.hp-relationships-page__section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.hp-relationships-page__section-title {
    margin: 0;
    color: var(--hp-ink);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.3;
}

.hp-relationships-page__actions,
.hp-relationships-page__form-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.hp-relationships-page__action-button {
    width: 100%;
    padding: 13px 15px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--hp-accent), var(--hp-accent-hover));
    color: var(--hp-accent-foreground);
    font-size: 0.95rem;
    font-weight: 800;
    text-align: center;
}

.hp-relationships-page__empty,
.hp-relationships-page__warning {
    margin: 0;
    color: var(--hp-body);
    font-size: 0.88rem;
    line-height: 1.55;
}

.hp-relationships-page__warning {
    color: #8f4d45;
}

.hp-relationships-page__form-shell[hidden] {
    display: none;
}

.hp-add-person-inline-form {
    display: grid;
    gap: 14px;
}

.hp-question-picker__field--full {
    grid-column: 1 / -1;
}

.hp-question-picker__compact-cluster {
    width: 100%;
}

.hp-question-picker__checkbox-row {
    margin: 0;
}

.hp-question-picker__fixed-relation-value {
    padding: 13px 14px;
    border: 1px solid rgba(var(--hp-accent-rgb), 0.24);
    border-radius: 18px;
    background: rgba(var(--hp-accent-rgb), 0.16);
    color: var(--hp-ink);
    font-weight: 700;
    line-height: 1.35;
}

.hp-question-picker__field-error {
    display: block;
    margin-top: 6px;
    color: #8f4d45;
    font-size: 0.76rem;
    line-height: 1.45;
}

.hp-question-picker__field-error:empty {
    display: none;
}

.hp-question-picker__field-error--form {
    margin-top: 0;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(244, 207, 200, 0.56);
}

.hp-birth-date-grid,
.hp-birth-time-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.hp-birth-time-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hp-birth-time-grid.is-muted {
    opacity: 0.58;
}

.hp-birth-date-field {
    min-width: 0;
    display: grid;
    gap: 6px;
}

.hp-birth-date-field__label {
    color: var(--hp-body);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.3;
}

.hp-city-combobox {
    position: relative;
}

.hp-city-combobox__list {
    margin-top: 8px;
    display: grid;
    gap: 6px;
    max-height: 220px;
    overflow-y: auto;
    padding: 8px;
    border: 1px solid rgba(85, 77, 71, 0.12);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 18px 32px rgba(122, 99, 79, 0.12);
}

.hp-city-combobox__option {
    width: 100%;
    border: 0;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.88);
    color: var(--hp-ink);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 12px;
    text-align: left;
    font-size: 0.86rem;
    line-height: 1.4;
}

.hp-city-combobox__option span:last-child {
    color: var(--hp-body);
    font-size: 0.78rem;
    font-weight: 700;
}

.hp-city-combobox__option.is-active {
    background: rgba(246, 226, 219, 0.5);
    color: var(--hp-ink);
}

.hp-form-field.has-error .hp-input,
.hp-form-field.has-error .hp-select,
.hp-birth-date-field.has-error .hp-select {
    border-color: rgba(170, 72, 58, 0.58);
    box-shadow: 0 0 0 3px rgba(170, 72, 58, 0.08);
}

@media (max-width: 639px) {
    .hp-birth-date-grid,
    .hp-birth-time-grid {
        gap: 10px;
    }
}

.hp-question-picker__add-person-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.hp-question-picker__primary-action,
.hp-question-picker__secondary-action {
    border-radius: 18px;
    padding: 12px 16px;
    font-size: 0.9rem;
    font-weight: 800;
    cursor: pointer;
}

.hp-question-picker__primary-action {
    border: 0;
    background: linear-gradient(135deg, var(--hp-accent), var(--hp-accent-hover));
    color: var(--hp-accent-foreground);
    box-shadow: 0 14px 22px rgba(var(--hp-accent-rgb), 0.18);
}

.hp-question-picker__secondary-action {
    border: 1px solid rgba(85, 77, 71, 0.12);
    background: rgba(255, 255, 255, 0.82);
    color: var(--hp-ink-soft);
}

.hp-question-picker__primary-action:disabled,
.hp-question-picker__secondary-action:disabled {
    opacity: 0.7;
    cursor: default;
    box-shadow: none;
}

.hp-question-picker__empty-title {
    margin: 0;
    color: var(--hp-ink);
    font-size: 1rem;
    font-weight: 800;
}

.hp-question-picker__empty-copy {
    color: var(--hp-ink-soft);
    line-height: 1.6;
}

.hp-question-picker__modes,
.hp-question-picker__pair-modes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.hp-question-picker__mode,
.hp-question-picker__pair-mode,
.hp-question-picker__filter,
.hp-question-picker__pair-filter {
    border: 1px solid rgba(85, 77, 71, 0.1);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.72);
    color: var(--hp-ink-soft);
    cursor: pointer;
}

.hp-question-picker__mode,
.hp-question-picker__pair-mode {
    min-width: 0;
    padding: 14px;
    text-align: left;
    display: grid;
    gap: 4px;
}

.hp-question-picker__mode.is-active,
.hp-question-picker__pair-mode.is-active,
.hp-question-picker__filter.is-active,
.hp-question-picker__pair-filter.is-active {
    background: rgba(246, 226, 219, 0.82);
    border-color: rgba(234, 120, 107, 0.34);
    color: var(--hp-ink);
    box-shadow: 0 10px 22px rgba(234, 120, 107, 0.12);
}

.hp-question-picker__mode-label {
    font-size: 0.96rem;
    font-weight: 800;
    line-height: 1.3;
}

.hp-question-picker__mode-subtitle {
    color: var(--hp-body);
    font-size: 0.8rem;
    font-weight: 700;
}

.hp-question-picker__filters,
.hp-question-picker__pair-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.hp-question-picker__filter,
.hp-question-picker__pair-filter {
    padding: 4px 7px;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.1;
    border-radius: 999px;
}

.hp-question-picker__status {
    padding: 12px 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.72);
    color: var(--hp-ink-soft);
    font-size: 0.9rem;
}

.hp-question-picker__status[data-state="error"] {
    background: rgba(244, 207, 200, 0.72);
}

.hp-question-picker__status[data-state="warning"] {
    background: rgba(245, 232, 199, 0.76);
}

.hp-question-picker__questions {
    display: grid;
    gap: 12px;
}

.hp-question-picker__question-helper {
    margin: 0;
    color: var(--hp-body);
    font-size: 0.82rem;
    line-height: 1.45;
}

.hp-question-picker__question {
    width: 100%;
    padding: 16px 16px 15px;
    border: 1px solid rgba(85, 77, 71, 0.16);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.88);
    text-align: left;
    display: block;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.hp-question-picker__question-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.hp-question-picker__question-copy {
    min-width: 0;
    display: grid;
    gap: 10px;
    flex: 1 1 auto;
}

.hp-question-picker__question:hover,
.hp-question-picker__question:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(85, 77, 71, 0.24);
    box-shadow: 0 14px 28px rgba(122, 99, 79, 0.1);
}

.hp-question-picker__question.is-selected {
    border-color: rgba(234, 120, 107, 0.52);
    background: rgba(246, 226, 219, 0.48);
    box-shadow: 0 16px 28px rgba(234, 120, 107, 0.12);
}

.hp-question-picker__question--featured {
    background: rgba(255, 252, 248, 0.96);
}

.hp-question-picker__question-title {
    color: var(--hp-ink);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.45;
}

.hp-question-picker__question-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.hp-question-picker__question-chip {
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(221, 211, 201, 0.42);
    color: var(--hp-ink-soft);
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.2;
}

.hp-question-picker__question-affordance {
    flex: 0 0 auto;
    display: grid;
    justify-items: end;
    gap: 8px;
}

.hp-question-picker__question-arrow {
    color: rgba(85, 77, 71, 0.55);
    font-size: 1.2rem;
    line-height: 1;
    transition: transform 0.2s ease, color 0.2s ease;
}

.hp-question-picker__question:hover .hp-question-picker__question-arrow,
.hp-question-picker__question:focus-visible .hp-question-picker__question-arrow,
.hp-question-picker__question.is-selected .hp-question-picker__question-arrow {
    color: var(--hp-accent);
    transform: translateX(2px);
}

.hp-question-picker__question-selected {
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(234, 120, 107, 0.12);
    color: var(--hp-accent);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.1;
    white-space: nowrap;
}

.hp-question-picker__empty {
    padding: 18px 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.72);
    color: var(--hp-ink-soft);
    text-align: center;
}

.hp-question-picker__custom-note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 4px 0 0;
    padding-top: 6px;
    color: var(--hp-body);
    font-size: 0.9rem;
    line-height: 1.5;
}

.hp-question-picker__custom-link {
    color: var(--hp-accent);
    font-weight: 700;
    text-decoration: none;
}

.hp-question-picker__custom-link:hover,
.hp-question-picker__custom-link:focus-visible {
    text-decoration: underline;
}

.hp-question-picker__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(85, 77, 71, 0.08);
    background: linear-gradient(180deg, rgba(247, 239, 232, 0), rgba(247, 239, 232, 0.96) 34%, rgba(247, 239, 232, 1) 100%);
}

.hp-question-picker__footer[hidden] {
    display: none;
}

.hp-question-picker__footer-copy {
    min-width: 0;
}

.hp-question-picker__selection-label {
    color: var(--hp-body);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.hp-question-picker__selection-value {
    margin: 6px 0 0;
    color: var(--hp-ink);
    font-size: 0.96rem;
    font-weight: 700;
    line-height: 1.4;
}

.hp-question-picker__footer.is-completed {
    display: grid;
    justify-items: stretch;
    gap: 14px;
}

.hp-question-picker__footer-copy.is-completed {
    display: grid;
    justify-items: center;
    text-align: center;
    width: 100%;
}

.hp-question-picker__selection-value[data-state="completed"] {
    margin: 0;
    font-size: clamp(1.45rem, 4.8vw, 2rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.hp-question-picker__result-link--prominent {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 54px;
    margin-top: 0;
    padding: 14px 18px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--hp-accent), var(--hp-accent-hover));
    color: var(--hp-accent-foreground);
    font-size: 1rem;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 16px 26px rgba(var(--hp-accent-rgb), 0.18);
}

.hp-question-picker__result-link--prominent:hover,
.hp-question-picker__result-link--prominent:focus-visible {
    text-decoration: none;
    filter: brightness(0.98);
}

.hp-question-picker__footer.is-completed .hp-question-picker__message,
.hp-question-picker__footer.is-completed .hp-question-picker__submission-progress,
.hp-question-picker__footer.is-completed .hp-question-picker__payload-preview,
.hp-question-picker__footer.is-completed .hp-question-picker__selection-label {
    display: none !important;
}

.hp-question-picker__footer.is-completed .hp-question-picker__continue {
    display: none !important;
}

@media (max-width: 639px) {
    .hp-question-picker__footer.is-completed {
        gap: 12px;
    }

    .hp-question-picker__result-link--prominent {
        min-height: 52px;
    }
}

.hp-question-picker__message {
    margin-top: 8px;
    color: var(--hp-accent);
    font-size: 0.88rem;
    line-height: 1.45;
}

.hp-question-picker__message[data-state="success"] {
    color: var(--hp-success);
}

.hp-question-picker__message[data-state="error"] {
    color: var(--hp-error);
}

.hp-question-picker__message[data-state="info"] {
    color: var(--hp-accent);
}

.hp-question-picker__submission-progress {
    margin-top: 10px;
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(255, 250, 244, 0.88);
    border: 1px solid rgba(170, 161, 152, 0.22);
}

.hp-question-picker__submission-progress[data-state="completed"] {
    border-color: rgba(44, 122, 88, 0.24);
    background: rgba(240, 250, 245, 0.92);
}

.hp-question-picker__submission-progress[data-state="failed"] {
    border-color: rgba(181, 69, 69, 0.22);
    background: rgba(255, 245, 245, 0.92);
}

.hp-question-picker__submission-title,
.hp-question-picker__submission-line {
    margin: 0;
    color: var(--hp-ink);
    font-size: 0.88rem;
    line-height: 1.45;
}

.hp-question-picker__submission-title {
    font-weight: 700;
}

.hp-question-picker__submission-line + .hp-question-picker__submission-line {
    margin-top: 4px;
}

.hp-question-picker__result-link {
    display: inline-flex;
    margin-top: 10px;
    color: var(--hp-accent);
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
}

.hp-question-picker__result-link:hover {
    text-decoration: underline;
}

.hp-question-picker__continue {
    border: 0;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--hp-accent), var(--hp-accent-hover));
    color: var(--hp-accent-foreground);
    padding: 13px 18px;
    font-size: 0.96rem;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 16px 26px rgba(var(--hp-accent-rgb), 0.18);
}

.hp-question-picker__continue:disabled,
.hp-question-picker__continue[aria-disabled="true"] {
    background: rgba(170, 161, 152, 0.45);
    color: rgba(85, 77, 71, 0.7);
    box-shadow: none;
    cursor: default;
}

@media (min-width: 640px) {
    .hp-question-picker__form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hp-question-picker__form-grid--date-time {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {
    .hp-question-picker {
        padding: max(24px, env(safe-area-inset-top, 0px)) 20px 24px;
    }

    .hp-question-picker__panel {
        max-height: min(calc(100dvh - max(48px, env(safe-area-inset-top, 0px)) - 24px), 760px);
        border-radius: 32px;
        padding: 20px 24px 22px;
    }
}

@media (max-width: 767.98px) {
    .hp-question-picker {
        padding: max(10px, env(safe-area-inset-top, 0px)) 0 0;
    }

    .hp-question-picker__panel {
        width: 100%;
        max-height: calc(100dvh - max(10px, env(safe-area-inset-top, 0px)));
        border-radius: 28px 28px 0 0;
        padding-inline: 16px;
    }

    .hp-question-picker__modes {
        grid-template-columns: minmax(0, 1fr);
    }

    .hp-question-picker__scope-menu {
        width: 100%;
        max-width: none;
    }

    .hp-question-picker__footer {
        align-items: stretch;
        flex-direction: column;
    }

    .hp-question-picker__continue {
        width: 100%;
    }
}

.hp-card-body-split {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 15px;
    align-items: start;
}

.hp-axis {
    position: relative;
    display: flex;
    justify-content: center;
    min-height: 100%;
    padding-top: 10px;
    padding-bottom: 24px;
}

.hp-axis::before {
    content: "";
    width: 1px;
    height: 100%;
    background: linear-gradient(180deg, rgba(234, 120, 107, 0.42), rgba(85, 77, 71, 0.05));
    display: block;
}

.hp-axis-dot {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--hp-accent);
    box-shadow: 0 0 0 7px rgba(234, 120, 107, 0.1);
}

.hp-axis-dot--soft {
    background: #d8cdc4;
    box-shadow: 0 0 0 7px rgba(216, 205, 196, 0.2);
}

.hp-scroll-copy {
    overflow-y: auto;
    padding-right: 6px;
    scrollbar-width: thin;
    scrollbar-color: rgba(85, 77, 71, 0.14) transparent;
}

.hp-scroll-copy::-webkit-scrollbar {
    width: 4px;
}

.hp-scroll-copy::-webkit-scrollbar-thumb {
    background: rgba(85, 77, 71, 0.14);
    border-radius: 20px;
}

.hp-scroll-fade {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 86px;
    background: linear-gradient(180deg, transparent, var(--hp-paper) 82%);
    pointer-events: none;
}

.hp-section-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 18px 0 8px;
    color: var(--hp-ink);
    font-size: 13px;
    font-weight: 800;
}

.hp-section-label::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--hp-accent);
    opacity: 0.78;
}

.hp-soft-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.hp-soft-list li {
    padding: 9px 0;
    border-bottom: 1px solid var(--hp-line);
}

.hp-soft-list li:last-child {
    border-bottom: 0;
}

.hp-dot-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.hp-dot-nav__item {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(85, 77, 71, 0.14);
}

.hp-dot-nav__item.is-active {
    width: 17px;
    border-radius: 999px;
    background: rgba(234, 120, 107, 0.72);
}

.hp-cta-button,
.hp-accent-button,
.hp-inline-send {
    border: 0;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.hp-cta-button:hover,
.hp-accent-button:hover,
.hp-inline-send:hover,
.hp-question-row:hover,
.hp-floating-nav__item:hover,
.hp-back-button:hover {
    transform: translateY(-1px);
}

.hp-cta-button {
    width: 100%;
    padding: 15px 16px;
    border-radius: 22px;
    background: rgba(255, 253, 248, 0.72);
    color: var(--hp-ink-soft);
    box-shadow: var(--hp-shadow-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.hp-icon-bubble {
    background: var(--hp-accent-soft);
    color: var(--hp-accent);
    font-size: 18px;
}

.hp-accent-button,
.hp-inline-send {
    color: var(--hp-accent-foreground);
    background: linear-gradient(135deg, var(--hp-accent), var(--hp-accent-hover));
    box-shadow: 0 8px 18px rgba(var(--hp-accent-rgb), 0.2);
}

.hp-accent-button {
    min-height: 48px;
    padding: 0 18px;
    border-radius: 18px;
    font-size: 14px;
    font-weight: 800;
}

.hp-form-card {
    display: grid;
    gap: 10px;
}

.hp-inline-form {
    display: flex;
    gap: 8px;
}

.hp-input,
.hp-textarea,
.hp-select {
    width: 100%;
    border: 1px solid rgba(85, 77, 71, 0.07);
    background: rgba(255, 255, 255, 0.74);
    border-radius: 17px;
    padding: 13px 14px;
    color: var(--hp-ink-soft);
    outline: none;
}

.hp-textarea {
    min-height: 108px;
    resize: vertical;
}

.hp-input::placeholder,
.hp-textarea::placeholder {
    color: #b6aca3;
}

.hp-input:focus,
.hp-textarea:focus,
.hp-select:focus {
    border-color: rgba(234, 120, 107, 0.32);
    box-shadow: 0 0 0 5px rgba(234, 120, 107, 0.08);
}

.hp-inline-send {
    width: 46px;
    min-width: 46px;
    border-radius: 17px;
    font-size: 18px;
}

.hp-question-box {
    overflow: hidden;
    background: rgba(255, 253, 248, 0.68);
    border-radius: 24px;
    box-shadow: var(--hp-shadow-soft);
}

.hp-question-row {
    width: 100%;
    border: 0;
    border-bottom: 1px solid rgba(85, 77, 71, 0.075);
    background: transparent;
    padding: 15px 16px;
    text-align: left;
    color: var(--hp-ink-soft);
    cursor: pointer;
}

.hp-question-row:last-child {
    border-bottom: 0;
}

.hp-question-row__title {
    display: block;
    font-size: 14px;
    font-weight: 800;
}

.hp-question-row__meta {
    display: block;
    margin-top: 4px;
    color: var(--hp-muted);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
}

.hp-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.hp-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0 12px;
    border-radius: var(--hp-radius-pill);
    font-size: 12px;
    font-weight: 700;
}

.hp-chip--soft {
    background: rgba(255, 253, 248, 0.74);
    color: var(--hp-ink-soft);
    border: 1px solid rgba(255, 255, 255, 0.82);
}

.hp-floating-nav {
    position: fixed;
    left: 50%;
    bottom: calc(14px + var(--hp-safe-bottom));
    transform: translateX(-50%);
    width: min(calc(100vw - 36px), calc(var(--hp-page-max) - 36px));
    height: var(--hp-bottom-nav-height);
    padding: 0 6px;
    border-radius: 26px;
    background: rgba(255, 253, 248, 0.78);
    backdrop-filter: blur(18px);
    box-shadow: 0 18px 44px rgba(122, 99, 79, 0.15);
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: center;
    z-index: 40;
}

.hp-floating-nav__item {
    position: relative;
    height: 100%;
    border: 0;
    background: transparent;
    display: grid;
    place-items: center;
    color: #c9c0b7;
    font-size: 24px;
    cursor: pointer;
}

.hp-floating-nav__item.is-active {
    color: var(--hp-accent);
}

.hp-floating-nav__item.is-active::after {
    content: "";
    position: absolute;
    bottom: 9px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--hp-accent);
}

@media (max-width: 390px) {
    .hp-mobile-shell {
        width: 100%;
        padding-left: 16px;
        padding-right: 16px;
        box-shadow: none;
        border-left: 0;
        border-right: 0;
    }

    .hp-paper-card {
        padding: 22px 18px;
    }
}

@media (min-width: 768px) {
    .hp-mobile-page {
        padding: 18px 10px;
        display: flex;
        justify-content: center;
    }

    .hp-mobile-shell {
        min-height: calc(100dvh - 36px);
        border-radius: 38px;
    }

    .hp-shell-page.hp-theme-heavenly .hp-app-frame,
    .hp-shell-page.hp-shell-page--onboarding.hp-theme-heavenly .hp-app-frame {
        width: min(calc(100vw - 36px), 860px);
    }

    .hp-shell-page.hp-theme-heavenly .hp-bottom-nav {
        width: min(calc(100vw - 36px), 820px);
    }

    .hp-question-block--constrained {
        width: min(100%, 42rem);
        margin-left: auto;
        margin-right: auto;
    }

    .hp-intent-wizard-screen .hp-question-block {
        gap: 18px;
    }

    .hp-intent-wizard-screen .hp-question-block__head {
        grid-template-columns: 38px minmax(0, 1fr);
        justify-items: stretch;
        align-items: start;
        gap: 16px;
        width: 100%;
    }

    .hp-intent-wizard-screen .hp-question-block__badge {
        margin: 2px 0 0;
        justify-self: center;
    }

    .hp-intent-wizard-screen .hp-question-block__title-stack {
        justify-items: start;
        text-align: left;
        max-width: none;
        margin: 0;
    }

    .hp-intent-wizard-screen .hp-question-block__options {
        width: calc(100% - 54px);
        margin-left: 54px;
    }
}

@media (min-width: 1100px) {
    .hp-shell-page.hp-theme-heavenly .hp-app-frame,
    .hp-shell-page.hp-shell-page--onboarding.hp-theme-heavenly .hp-app-frame {
        width: min(calc(100vw - 48px), 1120px);
    }

    .hp-shell-page.hp-theme-heavenly .hp-bottom-nav {
        width: min(calc(100vw - 48px), 1080px);
    }

    .hp-personal-details-screen .hp-stage-hero,
    .hp-intent-wizard-screen .hp-stage-hero {
        padding: 24px 28px 22px;
    }

    .hp-intent-wizard-screen .hp-stage-hero {
        width: min(100%, 920px);
        margin-left: auto;
        margin-right: auto;
        padding: 28px 36px 30px;
    }

    .hp-personal-details-screen .hp-stage-intro,
    .hp-intent-wizard-screen .hp-stage-intro {
        max-width: 760px;
    }

    .hp-intent-wizard-screen .hp-stage-intro {
        max-width: 640px;
        gap: 14px;
    }

    .hp-intent-wizard-screen .hp-stage-card,
    .hp-intent-wizard-screen .hp-stage-form {
        gap: 28px;
    }

    .hp-question-block--constrained {
        width: min(100%, 46rem);
    }

    .hp-intent-wizard-screen .hp-question-block {
        gap: 18px;
    }

    .hp-intent-wizard-screen .hp-question-block + .hp-question-block {
        margin-top: 34px;
    }

    .hp-intent-wizard-screen .hp-question-block:nth-of-type(-n + 2) .hp-choice-list--cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hp-intent-wizard-screen .hp-choice-list--cards {
        gap: 14px;
    }

    .hp-intent-wizard-screen .hp-choice-list--cards .hp-checkbox-card {
        min-height: 62px;
    }

    .hp-intent-wizard-screen .hp-choice-list--triad .hp-checkbox-card {
        min-height: 0;
        padding-top: 18px;
        padding-bottom: 18px;
    }

    .hp-profile-screen .hp-page-stack {
        grid-template-columns: minmax(0, 1.15fr) minmax(348px, 0.85fr);
        gap: 22px 24px;
        align-items: start;
    }

    .hp-profile-screen .hp-profile-side-rail {
        grid-column: 2;
        grid-row: 1 / span 3;
        display: grid;
        gap: 18px;
        align-content: start;
    }

    .hp-profile-screen .hp-profile-card-stage {
        grid-column: 1;
        grid-row: 1;
    }

    .hp-profile-screen .hp-dot-nav {
        grid-column: 1;
        grid-row: 2;
    }

    .hp-profile-screen .hp-page-stack > .hp-section-stack:not(.hp-soft-panel) {
        grid-column: 1;
        grid-row: 3 / span 2;
    }

    .hp-profile-screen .hp-paper-card--hero {
        width: 100%;
        min-height: 0;
        max-height: none;
        margin: 0;
        padding: 32px 28px 28px;
    }

    .hp-profile-screen .hp-paper-card--hero .hp-card-body-split {
        min-height: 0;
        height: auto;
        display: grid;
        grid-template-columns: 72px minmax(0, 1fr);
        gap: 20px;
    }

    .hp-profile-screen .hp-paper-card--hero .hp-scroll-copy {
        max-height: none;
        padding: 0;
    }

    .hp-profile-screen .hp-dot-nav {
        margin: -4px 0 0;
        justify-content: flex-start;
    }

    .hp-profile-screen .hp-cta-button,
    .hp-profile-screen .hp-form-card,
    .hp-profile-screen .hp-page-stack > .hp-soft-panel.hp-section-stack {
        height: fit-content;
    }
}