@charset "UTF-8";
:root {
    --navy: #08192c;
    --navy-soft: #10253e;
    --ink: #10223b;
    --muted: #60718c;
    --lavender: #8f87ff;
    --primary: #6e65fa;
    --line: #e0e7f1;
    --paper: #f4f8fe;
    --white: #fff;
    --radius: 22px;
}
* {
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
    scroll-padding-top: 30px;
}
body {
    margin: 0;
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    color: var(--white);
    background: var(--navy);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
button,
input,
select,
textarea {
    font: inherit;
}
button,
a,
input,
select,
textarea {
    -webkit-tap-highlight-color: transparent;
}
button {
    cursor: pointer;
}
a {
    color: inherit;
    text-decoration: none;
}
button:disabled {
    cursor: wait;
    opacity: 0.55;
}
a,
button {
    touch-action: manipulation;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
    outline: 3px solid #8f87ff;
    outline-offset: 4px;
}
h1,
h2,
h3,
p {
    margin-top: 0;
}
h1,
h2,
h3 {
    line-height: 1.1;
    letter-spacing: -0.04em;
}
h1 {
    font-size: clamp(40px, 5vw, 68px);
}
h2 {
    font-size: clamp(30px, 3.8vw, 48px);
}
h3 {
    font-size: 19px;
    letter-spacing: -0.02em;
}
p {
    color: #b7c8dd;
}
strong {
    font-weight: 650;
}
svg {
    flex-shrink: 0;
}
.container {
    width: min(1120px, calc(100% - 64px));
    margin-inline: auto;
}
.skip-link {
    position: absolute;
    left: 16px;
    top: -80px;
    padding: 12px 20px;
    background: white;
    color: var(--ink);
    z-index: 50;
    border-radius: 8px;
}
.skip-link:focus {
    top: 8px;
}
.site-header {
    position: relative;
    z-index: 2;
}
.header-inner {
    min-height: 88px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 21px;
    font-weight: 750;
    letter-spacing: -0.04em;
}
.brand svg {
    color: #54d9d0;
}
.public-nav,
.account-nav {
    display: flex;
    align-items: center;
    gap: 28px;
    font-size: 13px;
    font-weight: 600;
}
.public-nav > a:not(.button):hover,
.account-nav > a:hover {
    color: var(--lavender);
}
.account-nav form {
    margin: 0;
}
.text-button {
    padding: 0;
    border: 0;
    background: none;
    color: var(--primary);
    font-weight: 600;
    font-size: 14px;
    line-height: 1.7;
    text-decoration: underline;
    text-underline-offset: 4px;
}
.account-nav .text-button {
    color: #cbd7eb;
}
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    border: 1px solid transparent;
    border-radius: 11px;
    min-height: 50px;
    padding: 13px 23px;
    background: var(--primary);
    box-shadow: 0 9px 28px #6e65fa24;
    color: white;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    transition:
        background 0.15s,
        transform 0.15s;
}
.button:hover {
    background: #5c52e5;
    transform: translateY(-1px);
}
.button.small {
    min-height: 42px;
    padding: 10px 17px;
    font-size: 12px;
}
.button.full {
    width: 100%;
}
.button.secondary {
    color: var(--ink);
    background: #f0f3fc;
    border-color: #dce2f0;
    box-shadow: none;
}
.button.secondary:hover {
    background: #e4e9f9;
}
.eyebrow {
    margin-bottom: 18px;
    color: #a69fff;
    text-transform: uppercase;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: 0.25em;
}
.site-footer {
    display: flex;
    gap: 24px;
    justify-content: space-between;
    align-items: center;
    padding-top: 32px;
    padding-bottom: 32px;
    font-size: 12px;
    color: #8298b5;
}
.footer-brand {
    font-weight: 750;
    color: #c9d6e9;
}
.landing-body {
    background:
        radial-gradient(ellipse at 75% 10%, #172a50 0, transparent 34%),
        var(--navy);
}
.hero {
    overflow: hidden;
    background: radial-gradient(
        ellipse at 40% 100%,
        #10414b70,
        transparent 60%
    );
}
.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    min-height: 620px;
    gap: 28px;
    align-items: center;
}
.hero-copy {
    padding: 24px 0 65px;
    position: relative;
    z-index: 1;
}
.hero h1 {
    margin-bottom: 20px;
    font-size: clamp(45px, 4.7vw, 66px);
    font-weight: 750;
    letter-spacing: -0.055em;
    line-height: 1.02;
}
.hero h1 span {
    color: var(--lavender);
}
.hero-description {
    max-width: 460px;
    font-size: 14px;
    line-height: 1.65;
    margin-bottom: 25px;
}
.hero-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}
.hero-actions > span {
    max-width: 145px;
    font-size: 11px;
    color: #95aac8;
}
.hero-art {
    height: 555px;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding-left: 30px;
}
.hero-art:before {
    content: "";
    position: absolute;
    inset: 130px -120px -30px;
    background: radial-gradient(ellipse, #7469fb49, transparent 64%);
    filter: blur(20px);
}
.phone {
    position: relative;
    width: 225px;
    height: 450px;
    border: 7px solid #060d18;
    border-left-color: #8990cd;
    border-bottom-color: #c58d9c;
    border-radius: 38px;
    background: linear-gradient(160deg, #eaf3ff, #fff);
    box-shadow: 0 20px 55px #0005;
    color: var(--ink);
    padding: 13px 11px;
    transform: rotate(1deg);
    flex-shrink: 0;
    z-index: 1;
}
.phone-notch {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 74px;
    height: 19px;
    background: #060d18;
    border-radius: 20px;
}
.phone-status {
    font-size: 8px;
    display: flex;
    justify-content: space-between;
    margin: 0 5px 20px;
}
.phone-date {
    text-align: center;
    font-size: 9px;
    color: #6f81a7;
}
.phone-time {
    text-align: center;
    font-size: 30px;
    font-weight: 350;
    margin: 3px 0 20px;
    letter-spacing: -0.05em;
}
.phone-card {
    background: white;
    border: 1px solid #d8e4f3;
    border-radius: 13px;
    padding: 12px 10px;
    box-shadow: 0 6px 13px #2e569619;
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 9px;
}
.phone-card > strong {
    font-size: 11px;
}
.mini-label {
    font-weight: 700;
    font-size: 9px;
}
.phone-action {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 9px;
    background: #fff;
    border: 1px solid #dbe6f5;
    border-radius: 11px;
    padding: 9px 7px;
    margin-bottom: 9px;
}
.phone-action .icon {
    width: 25px;
    height: 28px;
    border-radius: 8px;
    font-size: 15px;
    flex-shrink: 0;
}
.phone-action b {
    margin-left: auto;
}
.phone-preview {
    text-align: center;
    font-size: 8px;
    letter-spacing: 0.02em;
    color: #7284a0;
    margin-top: 15px;
}
.phone-bottom {
    position: absolute;
    bottom: 10px;
    left: 12px;
    right: 12px;
    display: flex;
    justify-content: space-around;
    border-top: 1px solid #e2eaf7;
    padding-top: 8px;
    font-size: 11px;
    color: #8695b3;
    text-align: center;
}
.phone-bottom small {
    display: block;
    font-size: 7px;
}
.growth {
    position: relative;
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 27px;
    margin-left: 25px;
    padding-bottom: 30px;
    width: 190px;
    z-index: 1;
}
.growth h2 {
    font-size: 18px;
    letter-spacing: -0.025em;
    margin: 0 0 -13px 24px;
    line-height: 1.12;
}
.pill {
    display: block;
    border-radius: 50px;
    font-size: 10px;
    font-weight: 700;
    padding: 8px 15px;
    white-space: nowrap;
}
.growth .pill:nth-child(3) {
    margin-left: -16px;
}
.growth .pill:nth-child(4) {
    margin-left: 8px;
}
.growth .pill:nth-child(5) {
    margin-left: -10px;
}
.orbit {
    position: absolute;
    border: 1px solid #75b6ca70;
    width: 490px;
    height: 100px;
    border-radius: 50%;
    transform: rotate(-27deg);
    top: 320px;
    left: 2px;
}
.orbit-two {
    top: 352px;
    border-color: #b17ead88;
}
.section-light {
    background: linear-gradient(#f8fbff, #eef6fe);
    color: var(--ink);
}
.section-light p {
    color: var(--muted);
}
.areas {
    padding: 75px 0;
}
.section-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 50px;
    margin-bottom: 38px;
}
.section-heading h2 {
    margin: 0;
}
.section-heading > p {
    max-width: 365px;
    font-size: 14px;
    margin-bottom: 4px;
}
.section-light .eyebrow {
    color: #667bad;
}
.area-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.area-card {
    padding: 24px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 20px 50px #15345409;
}
.card-title {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-bottom: 15px;
}
.card-title h3 {
    margin: 0;
}
.icon {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    font-size: 23px;
    font-style: normal;
}
.pink {
    background: #ffedf4;
    color: #ec709c;
}
.blue {
    background: #eaf3ff;
    color: #428ded;
}
.mint {
    background: #e5f8f2;
    color: #24b996;
}
.yellow {
    background: #fff2ce;
    color: #c99026;
}
.violet {
    background: #eeeaff;
    color: #8970ee;
}
.area-card p {
    font-size: 13px;
    line-height: 1.65;
    min-height: 65px;
    margin-bottom: 18px;
}
.outcome {
    border-radius: 12px;
    padding: 13px 16px;
    color: var(--ink);
}
.outcome small {
    display: block;
    font-size: 9px;
    color: #71819b;
    margin-bottom: 4px;
}
.outcome strong {
    font-size: 12px;
    line-height: 1.5;
    display: block;
}
.how-section {
    padding-block: 78px;
    text-align: center;
}
.how-section h2 {
    margin-bottom: 16px;
}
.section-intro {
    font-size: 14px;
}
.how-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 55px;
    margin-top: 42px;
}
.how-grid h3 {
    margin: 20px 0 12px;
}
.how-grid p {
    font-size: 13px;
    max-width: 270px;
    margin-inline: auto;
}
.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #a29aff16;
    border: 1px solid #a29aff40;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    color: #b2aaff;
    font-size: 15px;
}
.faq-section {
    padding: 65px 0;
}
.faq-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 55px;
}
.faq-grid details {
    border-bottom: 1px solid var(--line);
    padding: 17px 0;
}
.faq-grid summary {
    cursor: pointer;
    font-size: 16px;
    font-weight: 650;
    list-style-position: outside;
}
.faq-grid details p {
    margin: 15px 0 0;
    font-size: 14px;
}
.closing {
    padding-block: 75px;
    text-align: center;
}
.closing h2 {
    margin-bottom: 28px;
}
.app-body {
    background:
        radial-gradient(ellipse at 8% 35%, #10414b45, transparent 45%),
        radial-gradient(ellipse at 90% 10%, #52429126, transparent 42%),
        var(--navy);
}
.auth-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;
    align-items: center;
    padding-top: 54px;
    padding-bottom: 70px;
    min-height: calc(100vh - 170px);
}
.auth-aside {
    position: relative;
    align-self: center;
}
.auth-aside h1 {
    font-size: clamp(38px, 4.5vw, 58px);
    line-height: 1.08;
    margin: 0 0 22px;
}
.auth-aside h1 span,
.onboarding-aside h1 span,
.profile-heading h1 span {
    color: var(--lavender);
}
.auth-aside > p:not(.eyebrow) {
    max-width: 325px;
    font-size: 15px;
}
.aside-orbits {
    height: 185px;
    width: 260px;
    position: relative;
    margin: 35px 0 25px;
    display: grid;
    place-items: center;
}
.aside-orbits:before,
.aside-orbits:after {
    content: "";
    position: absolute;
    inset: 22px 0;
    border: 1px solid #978bff55;
    border-radius: 50%;
    transform: rotate(-28deg);
}
.aside-orbits:after {
    transform: rotate(28deg);
    border-color: #55ccb844;
    inset: 36px -15px;
}
.aside-orbits span {
    width: 75px;
    height: 75px;
    background: radial-gradient(circle at 30% 30%, #9d91ff44, #5143b533);
    display: grid;
    place-items: center;
    border: 1px solid #ac9ffb55;
    border-radius: 22px;
    transform: rotate(-7deg);
    font-size: 35px;
    color: #b6aaff;
    box-shadow: 0 0 80px #8574ef24;
}
.aside-note {
    font-size: 12px;
    color: #a3b6cd;
    display: flex;
    align-items: center;
    gap: 10px;
}
.status-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    background: #58d5bb;
    border-radius: 100%;
    box-shadow: 0 0 15px #56ddc540;
}
.form-card {
    background: #fff;
    color: var(--ink);
    border: 1px solid #e6ecf5;
    border-radius: var(--radius);
    box-shadow: 0 28px 85px #0002;
    padding: 38px;
}
.form-card h2 {
    font-size: 32px;
    letter-spacing: -0.045em;
    line-height: 1.12;
    margin: 12px 0;
}
.card-kicker {
    font-size: 10px;
    letter-spacing: 0.18em;
    color: #7c70d7;
    font-weight: 750;
    text-transform: uppercase;
}
.form-description {
    font-size: 14px;
    line-height: 1.7;
    color: var(--muted);
    margin-bottom: 24px;
}
.stack {
    display: flex;
    flex-direction: column;
    gap: 19px;
}
.field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}
.field label,
legend {
    font-size: 13px;
    font-weight: 650;
    line-height: 1.5;
}
.field input,
.field select,
.field textarea {
    width: 100%;
    max-width: 100%;
    padding: 12px 13px;
    background: #f9fbfe;
    border: 1px solid #dce3ee;
    border-radius: 9px;
    color: var(--ink);
    min-height: 46px;
    font-size: 14px;
    transition: border 0.15s;
}
.field textarea {
    resize: vertical;
    min-height: 110px;
}
.field input::placeholder,
.field textarea::placeholder {
    color: #8b98ab;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color: #8f87ff;
    background: #fff;
}
.field small,
.field-hint {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.6;
    margin: 0;
}
.field input[aria-invalid="true"] {
    border-color: #d85170;
}
.field .field-error {
    color: #b43250;
}
.notice {
    padding: 14px 16px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 22px;
    overflow-wrap: anywhere;
}
.notice.error {
    background: #fff0f3;
    color: #9d2e48;
    border: 1px solid #f4ccd6;
}
.notice.error ul {
    padding-left: 18px;
    margin: 6px 0 0;
}
.notice.success {
    background: #eaf9f2;
    color: #216b52;
    border: 1px solid #cbeedd;
}
.google-button {
    width: 100%;
    background: white;
    color: #1f1f1f;
    border-color: #747775;
    box-shadow: none;
    font-weight: 600;
}
.google-button:hover {
    background: #f6f7fc;
}
.google-button > img {
    flex: 0 0 20px;
    object-fit: contain;
}
.divider {
    position: relative;
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 23px 0;
    color: #8c98aa;
    font-size: 11px;
}
.divider:before,
.divider:after {
    content: "";
    height: 1px;
    background: var(--line);
    flex: 1;
}
.form-footnote {
    text-align: center;
    color: var(--muted);
    font-size: 13px;
    margin: 24px 0 0;
}
.form-footnote a,
.forgot-link,
.back-link {
    color: #665bdb;
    font-weight: 600;
}
.forgot-link {
    font-size: 12px;
    align-self: flex-end;
    margin-top: -8px;
}
.email-tag {
    background: #f1efff;
    color: #6254bf;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    overflow-wrap: anywhere;
    margin-bottom: 23px;
}
.field .code-input {
    font-size: 30px;
    letter-spacing: 0.45em;
    text-align: center;
    font-variant-numeric: tabular-nums;
    padding-left: 25px;
    font-weight: 600;
}
.resend-form {
    text-align: center;
    font-size: 12px;
    margin-top: 25px;
}
.resend-form p {
    color: var(--muted);
    margin-bottom: 8px;
}
.resend-countdown {
    display: block;
    color: var(--muted);
    font-size: 11px;
    margin-top: 5px;
}
.subtle-note {
    font-size: 12px;
    color: var(--muted);
    background: #f5f6fc;
    border-radius: 9px;
    padding: 12px 14px;
    line-height: 1.6;
    margin-bottom: 20px;
}
.onboarding-grid {
    display: grid;
    grid-template-columns: 330px minmax(0, 1fr);
    gap: 70px;
    align-items: start;
    padding-block: 45px 70px;
}
.onboarding-aside {
    position: sticky;
    top: 36px;
    padding-top: 12px;
}
.onboarding-aside h1 {
    font-size: 38px;
    line-height: 1.15;
    margin: 0 0 34px;
}
.step-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.step-list li {
    margin-bottom: 8px;
}
.step-list a,
.step-disabled {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 13px;
    border: 1px solid transparent;
    border-radius: 12px;
    font-size: 14px;
    color: #aebed4;
}
.step-list small {
    display: block;
    font-size: 11px;
    color: #7187a3;
    margin-top: 1px;
}
.step-index {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid #5f7392;
    border-radius: 50%;
    font-size: 12px;
    flex-shrink: 0;
}
.step-list .current a {
    background: #867aff18;
    border-color: #877dff45;
    color: white;
}
.step-list .current .step-index {
    background: #8b7fff;
    color: #0a172e;
    border-color: #8b7fff;
}
.step-list .done .step-index {
    border-color: #64c8b0;
    color: #76d8c1;
}
.step-list .current.done .step-index {
    color: #fff;
}
.step-disabled {
    opacity: 0.6;
}
.save-note {
    font-size: 12px;
    color: #92a7c1;
    margin: 30px 0 0 12px;
    line-height: 1.9;
}
.save-note .status-dot {
    margin-right: 7px;
}
.aside-profile-link {
    display: inline-block;
    margin: 20px 0 0 12px;
    font-size: 12px;
    color: #bab3ff;
}
.onboarding-card {
    padding: 34px 38px;
}
.step-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}
.optional-tag {
    font-size: 10px;
    color: #7b889e;
    background: #f0f3f8;
    padding: 3px 9px;
    border-radius: 50px;
}
.progress-track {
    height: 4px;
    border-radius: 10px;
    background: #eef0fa;
    margin-bottom: 25px;
    overflow: hidden;
}
.progress-track span {
    height: 100%;
    display: block;
    background: linear-gradient(90deg, #9d8fff, #6e65fa);
    border-radius: 10px;
}
.onboarding-card h2 {
    font-size: 30px;
}
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
fieldset {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
legend {
    padding: 0;
    margin-bottom: 13px;
    font-size: 15px;
}
.stack > fieldset + fieldset {
    padding-top: 22px;
    border-top: 1px solid #edf0f7;
}
.field-hint {
    margin-top: -8px;
}
.timezone-button {
    align-self: flex-start;
    font-size: 12px;
    text-decoration: none;
    margin-top: -6px;
}
.interest-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.choice-chip {
    position: relative;
    cursor: pointer;
}
.choice-chip input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
}
.choice-chip span {
    display: block;
    padding: 7px 12px;
    border: 1px solid var(--line);
    border-radius: 50px;
    font-size: 12px;
    color: #5a6d88;
    background: #fafbfe;
}
.choice-chip input:checked + span {
    border-color: #9c8df6;
    background: #f0ecff;
    color: #6a4cce;
}
.choice-chip input:focus-visible + span {
    outline: 3px solid var(--lavender);
    outline-offset: 2px;
}
.form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
    margin-top: 9px;
    padding-top: 22px;
    border-top: 1px solid #edf0f7;
}
.back-link {
    margin-right: auto;
    font-size: 13px;
}
.skip-button {
    align-self: center;
    color: #7a859b;
    text-decoration: none;
    font-size: 12px;
}
.child-card {
    background: #f7f9ff;
    padding: 20px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.child-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
}
.child-heading button {
    font-size: 11px;
    color: #996377;
}
.empty-note {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.65;
    margin-bottom: 0;
}
.goal-options {
    display: flex;
    flex-direction: column;
    gap: 11px;
}
.goal-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    cursor: pointer;
    background: #fff;
}
.goal-option input {
    position: absolute;
    opacity: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}
.goal-symbol {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    font-size: 23px;
    flex-shrink: 0;
    border-radius: 12px;
}
.goal-option strong {
    display: block;
    font-size: 14px;
}
.goal-option small {
    display: block;
    font-size: 11px;
    line-height: 1.5;
    color: var(--muted);
    margin-top: 4px;
}
.goal-option .checkmark {
    margin-left: auto;
    border: 1px solid #d8e0ee;
    display: grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    border-radius: 6px;
    color: transparent;
    font-size: 13px;
}
.goal-option:has(input:checked) {
    background: #f8f6ff;
    border-color: #a191f5;
    box-shadow: 0 0 0 1px #a191f526;
}
.goal-option input:checked ~ .checkmark {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}
.goal-option:has(input:focus-visible) {
    outline: 3px solid var(--lavender);
    outline-offset: 3px;
}
.profile-page {
    padding-block: 50px 70px;
}
.profile-heading {
    display: flex;
    gap: 30px;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 35px;
}
.profile-heading h1 {
    font-size: clamp(32px, 4vw, 48px);
    margin-bottom: 18px;
    overflow-wrap: anywhere;
}
.profile-heading p:not(.eyebrow) {
    font-size: 14px;
    margin-bottom: 0;
    max-width: 630px;
}
.profile-seal {
    display: grid;
    place-items: center;
    min-width: 74px;
    height: 74px;
    border-radius: 24px;
    background: #89e8ca16;
    border: 1px solid #89e8ca35;
    font-size: 30px;
    color: #7ee2c4;
    transform: rotate(7deg);
}
.profile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}
.profile-card {
    background: white;
    padding: 28px;
    border-radius: 18px;
    color: var(--ink);
    min-width: 0;
}
.profile-card .card-title h2 {
    font-size: 19px;
    letter-spacing: -0.025em;
    margin: 0;
}
.profile-card .card-title a {
    margin-left: auto;
    font-size: 12px;
    color: var(--primary);
    font-weight: 600;
}
.profile-card .icon {
    width: 36px;
    height: 36px;
    font-size: 20px;
    flex-shrink: 0;
}
.profile-card dl {
    margin: 23px 0 0;
}
.profile-card dl > div {
    display: grid;
    grid-template-columns: 125px minmax(0, 1fr);
    gap: 15px;
    padding-block: 9px;
    border-bottom: 1px solid #eff2f7;
    font-size: 13px;
}
.profile-card dt {
    color: var(--muted);
}
.profile-card dd {
    margin: 0;
    overflow-wrap: anywhere;
}
.profile-card h3 {
    font-size: 13px;
    letter-spacing: 0;
    margin: 23px 0 12px;
}
.profile-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 22px;
}
.profile-tags span {
    background: #f1efff;
    border: 1px solid #e7e1fc;
    border-radius: 50px;
    padding: 6px 12px;
    font-size: 12px;
    color: #6d58b7;
    overflow-wrap: anywhere;
    max-width: 100%;
}
.profile-card h3 + .profile-tags {
    margin-top: 0;
}
.verified-badge {
    color: #278464;
    background: #ebf9f3;
    border-radius: 4px;
    display: inline-block;
    font-size: 9px;
    padding: 2px 5px;
    margin-left: 5px;
}
.about-text {
    font-size: 13px;
    color: var(--muted);
    white-space: pre-line;
    overflow-wrap: anywhere;
}
.saved-child {
    display: flex;
    flex-direction: column;
    padding: 11px 0;
    border-bottom: 1px solid var(--line);
    font-size: 13px;
}
.saved-child span {
    color: var(--muted);
    font-size: 12px;
    margin-top: 3px;
}
.resume-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background: #182b45;
    border: 1px solid #4d456e;
    padding: 22px 25px;
    border-radius: 16px;
    margin-bottom: 24px;
}
.resume-banner p {
    margin: 5px 0 0;
    font-size: 13px;
}
.resume-banner .button {
    flex-shrink: 0;
}
.coming-next {
    display: flex;
    align-items: center;
    gap: 20px;
    border: 1px solid #415270;
    background: #102239;
    padding: 23px;
    border-radius: 15px;
    margin-top: 26px;
}
.coming-next .icon {
    flex-shrink: 0;
    background: #b5a8ff16;
    color: #a99fff;
}
.coming-next strong {
    font-size: 14px;
}
.coming-next p {
    font-size: 13px;
    margin: 5px 0 0;
    color: #95aac6;
}
@media (min-width: 1500px) {
    .hero-grid {
        min-height: 630px;
    }
    .hero-copy {
        padding-top: 30px;
    }
}
@media (max-width: 1050px) {
    .container {
        width: calc(100% - 48px);
    }
    .public-nav {
        gap: 18px;
    }
    .hero-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .hero-art {
        padding-left: 10px;
    }
    .growth {
        margin-left: 12px;
        gap: 23px;
    }
    .growth h2 {
        margin-left: 7px;
    }
    .pill {
        font-size: 9px;
        padding: 8px 10px;
    }
    .phone {
        width: 200px;
        height: 420px;
    }
    .phone-time {
        font-size: 27px;
        margin-bottom: 14px;
    }
    .auth-grid {
        gap: 50px;
    }
    .onboarding-grid {
        grid-template-columns: 270px minmax(0, 1fr);
        gap: 35px;
    }
    .onboarding-aside h1 {
        font-size: 33px;
    }
    .onboarding-card {
        padding: 30px;
    }
    .profile-card dl > div {
        grid-template-columns: 105px minmax(0, 1fr);
    }
}
@media (max-width: 800px) {
    .header-inner {
        min-height: 75px;
    }
    .desktop-link {
        display: none;
    }
    .hero-grid {
        grid-template-columns: 1.1fr 1fr;
        min-height: 565px;
    }
    .hero h1 {
        font-size: 48px;
    }
    .growth {
        display: none;
    }
    .hero-art {
        height: 460px;
        padding-left: 10px;
        justify-content: center;
    }
    .phone {
        width: 215px;
        height: 440px;
    }
    .hero-copy {
        padding-bottom: 45px;
    }
    .hero-actions {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }
    .hero-actions > span {
        max-width: none;
    }
    .orbit {
        width: 320px;
        left: -35px;
    }
    .section-heading {
        gap: 25px;
        align-items: start;
        flex-direction: column;
    }
    .section-heading > p {
        max-width: 470px;
    }
    .area-grid {
        gap: 13px;
    }
    .area-card {
        padding: 20px;
    }
    .card-title {
        gap: 10px;
    }
    .area-card .card-title {
        align-items: start;
        flex-direction: column;
    }
    .how-grid {
        gap: 25px;
    }
    .faq-grid {
        gap: 30px;
    }
    .auth-grid {
        gap: 30px;
        grid-template-columns: 0.85fr 1.15fr;
        padding-top: 35px;
    }
    .auth-aside h1 {
        font-size: 38px;
    }
    .form-card {
        padding: 29px;
    }
    .onboarding-grid {
        grid-template-columns: 1fr;
        max-width: 640px;
        gap: 24px;
        padding-top: 25px;
    }
    .onboarding-aside {
        position: static;
        padding: 0;
    }
    .onboarding-aside h1,
    .onboarding-aside > .eyebrow,
    .save-note {
        display: none;
    }
    .step-list {
        display: flex;
        gap: 8px;
    }
    .step-list li {
        flex: 1;
        margin: 0;
        min-width: 0;
    }
    .step-list a,
    .step-disabled {
        flex-direction: column;
        gap: 7px;
        padding: 9px 4px;
        font-size: 10px;
        text-align: center;
        line-height: 1.35;
        height: 100%;
    }
    .step-list small {
        display: none;
    }
    .step-index {
        width: 25px;
        height: 25px;
    }
    .aside-profile-link {
        font-size: 11px;
        margin: 12px 0 0;
    }
    .profile-grid {
        gap: 16px;
    }
    .profile-card {
        padding: 22px;
    }
    .profile-card .card-title h2 {
        font-size: 17px;
    }
    .profile-card dl > div {
        grid-template-columns: 1fr;
        gap: 2px;
    }
}
@media (max-width: 580px) {
    .container {
        width: calc(100% - 36px);
    }
    .brand {
        font-size: 19px;
        gap: 7px;
    }
    .brand svg {
        width: 24px;
    }
    .public-nav {
        gap: 14px;
        font-size: 12px;
    }
    .public-nav .button {
        display: none;
    }
    .account-nav {
        gap: 16px;
        font-size: 12px;
    }
    .account-nav .text-button {
        font-size: 12px;
    }
    .hero-grid {
        display: flex;
        flex-direction: column;
        gap: 0;
    }
    .hero-copy {
        padding: 28px 0 20px;
        width: 100%;
    }
    .hero h1 {
        font-size: clamp(42px, 11.6vw, 60px);
        max-width: 450px;
        line-height: 1.04;
    }
    .hero .eyebrow {
        font-size: 9px;
    }
    .hero-description {
        max-width: 390px;
        font-size: 14px;
    }
    .hero-actions {
        flex-direction: row;
        align-items: center;
        gap: 15px;
    }
    .hero-actions > span {
        max-width: 125px;
        line-height: 1.5;
        font-size: 10px;
    }
    .hero-art {
        height: 400px;
        width: 100%;
        align-items: flex-start;
        padding-top: 30px;
        overflow: hidden;
    }
    .phone {
        width: 195px;
        height: 410px;
        transform: rotate(5deg);
        border-radius: 32px;
    }
    .phone-time {
        font-size: 27px;
    }
    .phone-preview {
        margin-top: 9px;
    }
    .phone-action {
        padding: 7px;
    }
    .growth {
        display: flex;
        position: absolute;
        right: -3px;
        top: 40px;
        width: auto;
        gap: 18px;
        opacity: 0.95;
        transform: scale(0.9);
        transform-origin: right top;
        align-self: auto;
    }
    .growth h2 {
        font-size: 14px;
    }
    .phone {
        margin-right: 80px;
    }
    .orbit {
        top: 150px;
        left: 0;
    }
    .orbit-two {
        top: 175px;
    }
    .areas {
        padding: 48px 0;
    }
    .section-heading {
        margin-bottom: 28px;
    }
    .section-heading h2 {
        font-size: 34px;
    }
    .area-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    .area-card {
        padding: 24px;
    }
    .area-card .card-title {
        align-items: center;
        flex-direction: row;
        gap: 14px;
    }
    .area-card p {
        min-height: 0;
        margin-bottom: 15px;
    }
    .outcome strong br {
        display: none;
    }
    .how-section {
        padding-block: 52px;
    }
    .how-section h2 {
        font-size: 33px;
    }
    .how-grid {
        grid-template-columns: 1fr;
        gap: 25px;
        margin-top: 35px;
    }
    .how-grid h3 {
        margin-top: 13px;
    }
    .how-grid p {
        max-width: 290px;
        margin-bottom: 0;
    }
    .faq-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .faq-section {
        padding-block: 44px;
    }
    .faq-grid h2 {
        font-size: 33px;
    }
    .faq-grid summary {
        font-size: 14px;
    }
    .closing {
        padding-block: 50px;
    }
    .closing h2 {
        font-size: 32px;
    }
    .site-footer {
        flex-wrap: wrap;
        gap: 8px 20px;
        font-size: 10px;
        padding-block: 26px;
    }
    .site-footer > span:nth-child(2) {
        order: 3;
        width: 100%;
    }
    .auth-grid {
        display: block;
        padding-top: 22px;
        padding-bottom: 35px;
        min-height: calc(100vh - 190px);
        max-width: 470px;
    }
    .auth-aside {
        display: none;
    }
    .form-card {
        padding: 26px 23px;
        border-radius: 18px;
    }
    .form-card h2 {
        font-size: 29px;
    }
    .form-description {
        font-size: 13px;
    }
    .auth-card {
        margin-top: 5px;
    }
    .stack {
        gap: 18px;
    }
    .field input,
    .field select,
    .field textarea {
        font-size: 16px;
    }
    .onboarding-grid {
        padding-bottom: 40px;
    }
    .onboarding-card {
        padding: 25px 22px;
    }
    .onboarding-card h2 {
        font-size: 29px;
    }
    .form-row {
        grid-template-columns: 1fr;
        gap: 17px;
    }
    .goal-option {
        padding: 13px;
        gap: 11px;
    }
    .goal-option strong {
        font-size: 13px;
    }
    .goal-option small {
        font-size: 10px;
    }
    .goal-symbol {
        width: 34px;
        height: 36px;
        font-size: 19px;
    }
    .form-actions .button {
        font-size: 13px;
        padding-inline: 18px;
        gap: 14px;
    }
    .child-card {
        padding: 15px;
    }
    .profile-page {
        padding-block: 25px 40px;
    }
    .profile-heading {
        margin-bottom: 28px;
        gap: 10px;
    }
    .profile-heading h1 {
        font-size: 34px;
    }
    .profile-heading p:not(.eyebrow) {
        font-size: 13px;
    }
    .profile-seal {
        display: none;
    }
    .profile-grid {
        grid-template-columns: 1fr;
    }
    .profile-card {
        padding: 23px;
    }
    .profile-card dl > div {
        grid-template-columns: 110px minmax(0, 1fr);
        gap: 12px;
    }
    .profile-card .card-title h2 {
        font-size: 18px;
    }
    .resume-banner {
        flex-direction: column;
        align-items: stretch;
        padding: 22px;
        gap: 18px;
    }
    .resume-banner .button {
        align-self: flex-start;
    }
    .coming-next {
        align-items: flex-start;
        gap: 14px;
        padding: 19px;
    }
    .coming-next .icon {
        width: 32px;
        height: 32px;
        font-size: 19px;
    }
    .coming-next p {
        font-size: 12px;
    }
}
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    *,
    *:before,
    *:after {
        transition: none !important;
        animation: none !important;
    }
}
@media (max-width: 580px) {
    .account-body .header-inner { flex-wrap: wrap; gap: 16px; padding-top: 16px; padding-bottom: 16px; }
    .account-body .account-nav { width: 100%; flex-wrap: wrap; gap: 14px; justify-content: space-between; }
}