:root {
    --ink: #17231d;
    --ink-soft: #435048;
    --paper: #fbf8ef;
    --paper-deep: #f0eadc;
    --white: #fffefa;
    --green-950: #123326;
    --green-900: #173f2d;
    --green-800: #20563b;
    --green-700: #2d714b;
    --green-600: #39845a;
    --green-200: #cde0cf;
    --green-100: #e4eee3;
    --sage: #dfe7c5;
    --sage-light: #f0f2df;
    --coral: #c9674f;
    --coral-dark: #9c402f;
    --coral-light: #f3d8cf;
    --gold: #d8b464;
    --line: #d8d6cb;
    --line-dark: #a8ada6;
    --danger: #a23d32;
    --danger-soft: #f9e4df;
    --warning-soft: #fff3cf;
    --success-soft: #e3f1e2;
    --shadow-sm: 0 2px 8px rgba(18, 51, 38, 0.08);
    --shadow-md: 0 16px 44px rgba(18, 51, 38, 0.12);
    --shadow-lg: 0 30px 80px rgba(18, 51, 38, 0.16);
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 28px;
    --serif: Georgia, "Times New Roman", serif;
    --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 6rem;
}

body {
    margin: 0;
    color: var(--ink);
    background: var(--paper);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

img,
svg,
canvas {
    max-width: 100%;
}

button,
input,
select,
textarea {
    color: inherit;
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

a {
    color: var(--green-800);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

a:hover {
    color: var(--green-950);
}

button:not(:disabled),
summary {
    cursor: pointer;
}

:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 3px;
}

::selection {
    color: var(--white);
    background: var(--green-700);
}

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

.skip-link {
    position: fixed;
    z-index: 9999;
    top: 0.75rem;
    left: 0.75rem;
    padding: 0.7rem 1rem;
    color: var(--white);
    background: var(--green-950);
    border-radius: var(--radius-sm);
    font-weight: 700;
    transform: translateY(-150%);
    transition: transform 160ms ease;
}

.skip-link:focus {
    color: var(--white);
    transform: translateY(0);
}

.page-width {
    width: min(1180px, calc(100% - 40px));
    margin-inline: auto;
}

.eyebrow {
    margin: 0 0 0.8rem;
    color: var(--green-700);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    line-height: 1.2;
    text-transform: uppercase;
}

.inline-form {
    display: inline-flex;
    margin: 0;
}

.text-button {
    appearance: none;
    padding: 0;
    color: currentColor;
    background: none;
    border: 0;
    font-size: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

.text-button:hover {
    color: var(--green-700);
}

.text-button--danger {
    color: var(--danger);
}

.primary-cta,
.secondary-cta,
.nav-cta {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.2rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-weight: 800;
    line-height: 1.15;
    text-align: center;
    text-decoration: none;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

button.primary-cta {
    appearance: none;
}

.primary-cta {
    color: var(--white);
    background: var(--green-800);
    border-color: var(--green-800);
    box-shadow: 0 5px 0 var(--green-950);
}

.primary-cta:hover {
    color: var(--white);
    background: var(--green-700);
    border-color: var(--green-700);
    transform: translateY(-1px);
}

.primary-cta:active {
    box-shadow: 0 2px 0 var(--green-950);
    transform: translateY(2px);
}

.primary-cta:disabled {
    color: #69736d;
    background: #d7dbd6;
    border-color: #d7dbd6;
    box-shadow: none;
    cursor: not-allowed;
}

.primary-cta--light {
    color: var(--green-950);
    background: var(--white);
    border-color: var(--white);
    box-shadow: 0 5px 0 rgba(0, 0, 0, 0.3);
}

.primary-cta--light:hover {
    color: var(--green-950);
    background: var(--sage);
    border-color: var(--sage);
}

.primary-cta--coral {
    color: var(--white);
    background: var(--coral);
    border-color: var(--coral);
    box-shadow: 0 5px 0 var(--coral-dark);
}

.primary-cta--coral:hover {
    color: var(--white);
    background: var(--coral-dark);
    border-color: var(--coral-dark);
}

.primary-cta--coral:active {
    box-shadow: 0 2px 0 #6f2b20;
}

.primary-cta--full {
    width: 100%;
}

.secondary-cta {
    color: var(--green-900);
    background: transparent;
    border-color: var(--green-800);
}

.secondary-cta:hover {
    color: var(--white);
    background: var(--green-800);
}

.secondary-cta--muted {
    color: #405148;
    background: rgba(255, 254, 250, 0.64);
    border-color: #89978f;
}

.secondary-cta--muted:hover {
    color: var(--green-950);
    background: var(--white);
    border-color: var(--green-700);
}

.secondary-cta--light {
    color: var(--white);
    border-color: rgba(255, 255, 255, 0.64);
}

.secondary-cta--light:hover {
    color: var(--green-950);
    background: var(--sage);
    border-color: var(--sage);
}

.secondary-cta:disabled {
    color: #69736d;
    background: #eef0ec;
    border-color: #c4c9c4;
    cursor: not-allowed;
}

.secondary-cta--danger {
    color: var(--danger);
    border-color: var(--danger);
}

.secondary-cta--danger:hover:not(:disabled) {
    color: var(--white);
    background: var(--danger);
    border-color: var(--danger);
}

/* Brand */
.brand-mark {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    flex-direction: column;
    padding-top: 0.55rem;
    color: var(--ink);
    line-height: 1;
    text-decoration: none;
}

.brand-mark:hover {
    color: var(--ink);
}

.brand-mark__qualifier {
    position: absolute;
    z-index: 1;
    top: -0.05rem;
    left: 0.15rem;
    color: var(--coral-dark);
    font-family: var(--sans);
    font-size: 0.6rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transform: rotate(-4deg);
}

.brand-mark__name {
    font-family: var(--serif);
    font-size: clamp(1.05rem, 2vw, 1.35rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    white-space: nowrap;
}

.brand-mark__ugly {
    position: relative;
    display: inline-block;
}

.brand-mark__ugly::after {
    position: absolute;
    right: -0.1em;
    bottom: 0.44em;
    left: -0.08em;
    height: 2px;
    content: "";
    background: var(--coral);
    border-radius: 99px;
    transform: rotate(-7deg);
}

.brand-mark--compact {
    padding-top: 0.48rem;
}

.brand-mark--compact .brand-mark__name {
    font-size: 1.05rem;
}

.brand-mark--compact .brand-mark__qualifier {
    font-size: 0.52rem;
}

/* Public shell */
.public-body {
    overflow-x: hidden;
    background:
        radial-gradient(circle at 10% 5%, rgba(223, 231, 197, 0.42), transparent 24rem),
        var(--paper);
}

.public-header {
    position: relative;
    z-index: 20;
    border-bottom: 1px solid rgba(23, 35, 29, 0.13);
    background: rgba(251, 248, 239, 0.94);
    backdrop-filter: blur(12px);
}

.public-header__inner,
.public-footer__inner {
    display: flex;
    width: min(1180px, calc(100% - 40px));
    min-height: 76px;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-inline: auto;
}

.public-nav,
.account-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(0.8rem, 2.2vw, 1.6rem);
    font-size: 0.9rem;
    font-weight: 700;
}

.public-nav > a:not(.nav-cta),
.account-nav > a {
    color: var(--ink);
    text-decoration: none;
}

.public-nav > a:not(.nav-cta):hover,
.account-nav > a:hover {
    color: var(--green-700);
}

.nav-cta {
    min-height: 40px;
    padding: 0.55rem 1rem;
    color: var(--white);
    background: var(--green-800);
}

.nav-cta:hover {
    color: var(--white);
    background: var(--green-700);
}

.public-footer {
    padding-block: 2.2rem;
    color: #dce8de;
    background: var(--green-950);
}

.public-footer .brand-mark {
    color: var(--white);
}

.public-footer .brand-mark:hover {
    color: var(--white);
}

.public-footer__inner {
    min-height: 0;
}

.public-footer p {
    margin: 0;
    font-family: var(--serif);
    font-size: 0.95rem;
    font-style: italic;
}

.public-footer nav {
    display: flex;
    gap: 1.2rem;
}

.public-footer nav a {
    color: var(--white);
    font-size: 0.85rem;
}

/* Legal, support and sitemap pages */
.legal-page {
    width: min(860px, calc(100% - 40px));
    margin: clamp(2rem, 6vw, 5rem) auto;
}

.legal-hero {
    margin-bottom: 2rem;
    padding: clamp(1.5rem, 5vw, 3.5rem);
    background: var(--sage-light);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}

.legal-hero h1 {
    max-width: 13ch;
    margin: 0;
    font-family: var(--serif);
    font-size: clamp(2.5rem, 7vw, 5rem);
    font-weight: 500;
    letter-spacing: -0.055em;
    line-height: 0.98;
}

.legal-hero > p:last-child {
    max-width: 58rem;
    margin: 1rem 0 0;
    color: var(--ink-soft);
}

.legal-section {
    padding: 1.4rem clamp(0rem, 2vw, 1rem);
    border-bottom: 1px solid var(--line);
}

.legal-section h2 {
    margin: 0 0 0.55rem;
    color: var(--green-950);
    font-family: var(--serif);
    font-size: clamp(1.35rem, 3vw, 1.8rem);
}

.legal-section p {
    margin: 0.65rem 0 0;
}

.legal-callout {
    margin-block: 1rem;
    padding: 1.4rem;
    background: var(--warning-soft);
    border: 1px solid #ead38d;
    border-radius: var(--radius-md);
}

.support-card {
    width: min(690px, 100%);
    margin-block: 0;
}

.support-card .legal-hero {
    margin-bottom: 1.4rem;
}

.support-card .legal-hero h1 {
    max-width: none;
    font-size: clamp(2.2rem, 7vw, 4.2rem);
    text-align: left;
}

.support-form {
    padding: clamp(1rem, 3vw, 1.5rem);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
}

.support-form textarea {
    width: 100%;
    resize: vertical;
}

.support-form .form-field__label-row span,
.support-privacy-note {
    color: var(--ink-soft);
    font-size: 0.78rem;
}

.support-form .primary-cta {
    justify-self: start;
}

.support-privacy-note {
    margin: 1rem 0 0;
}

.sitemap-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
}

.sitemap-links a {
    display: grid;
    gap: 0.3rem;
    min-height: 7rem;
    align-content: center;
    padding: 1.15rem;
    color: var(--ink);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    text-decoration: none;
}

.sitemap-links a:hover {
    border-color: var(--green-700);
    box-shadow: var(--shadow-sm);
}

.sitemap-links strong {
    color: var(--green-800);
    font-family: var(--serif);
    font-size: 1.25rem;
}

.sitemap-links span {
    color: var(--ink-soft);
    font-size: 0.85rem;
}

/* Landing */
.hero {
    position: relative;
    min-height: min(660px, 57vw);
    margin-top: 1.5rem;
    overflow: hidden;
    background: #f9f4e8;
    border: 1px solid rgba(23, 35, 29, 0.16);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    isolation: isolate;
}

.hero::after {
    position: absolute;
    z-index: 1;
    inset: 0 auto 0 0;
    width: 39%;
    content: "";
    background: linear-gradient(
        90deg,
        rgba(249, 244, 232, 0.98) 0%,
        rgba(249, 244, 232, 0.96) 70%,
        rgba(249, 244, 232, 0.78) 82%,
        rgba(249, 244, 232, 0.42) 90%,
        rgba(249, 244, 232, 0) 100%
    );
    pointer-events: none;
}

.hero__picture,
.hero__art {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.hero__art {
    object-fit: cover;
    object-position: center center;
}

.hero__copy {
    position: relative;
    z-index: 2;
    width: 39%;
    padding: clamp(3.1rem, 7vw, 7.5rem) 0 clamp(3rem, 6vw, 6rem) clamp(2rem, 4vw, 4rem);
}

.hero h1,
.section-intro h2,
.how-section h2,
.origin-section h2,
.pricing-card h2,
.faq-section h2,
.final-cta h2,
.auth-card h1,
.status-card h1,
.billing-intro h1,
.account-heading h1 {
    margin: 0;
    font-family: var(--serif);
    font-weight: 500;
    letter-spacing: -0.055em;
    line-height: 0.98;
}

.hero h1 {
    max-width: 8.5em;
    font-size: clamp(3rem, 5.25vw, 4.25rem);
}

.hero__lede {
    max-width: 23rem;
    margin: 1.4rem 0 0;
    color: var(--ink-soft);
    font-size: clamp(1rem, 1.55vw, 1.2rem);
    line-height: 1.55;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-top: 1.8rem;
}

.hero__note {
    margin: 1.25rem 0 0;
    color: #59645e;
    font-size: 0.76rem;
    font-weight: 700;
}

.proof-strip {
    margin-top: 1.5rem;
    color: var(--white);
    background: var(--green-900);
}

.proof-strip__inner {
    display: flex;
    min-height: 82px;
    align-items: center;
    gap: clamp(1rem, 4vw, 3rem);
}

.proof-strip p {
    margin: 0;
    color: var(--sage);
    font-family: var(--serif);
    font-style: italic;
}

.proof-strip ul {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: clamp(0.76rem, 1.4vw, 0.92rem);
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.proof-strip li::after {
    margin-left: clamp(1rem, 3vw, 2.5rem);
    color: var(--gold);
    content: "•";
}

.editorial-section,
.origin-section,
.pricing-section,
.faq-section {
    padding-block: clamp(5rem, 9vw, 8rem);
}

.section-intro {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(17rem, 0.75fr);
    column-gap: clamp(2rem, 7vw, 7rem);
    align-items: end;
    margin-bottom: clamp(2.2rem, 5vw, 4rem);
}

.section-intro .eyebrow {
    grid-column: 1 / -1;
}

.section-intro h2,
.how-section h2,
.origin-section h2,
.pricing-card h2,
.faq-section h2,
.final-cta h2 {
    font-size: clamp(2.35rem, 5vw, 4.5rem);
}

.section-intro > p:last-child {
    margin: 0;
    color: var(--ink-soft);
    font-size: 1.05rem;
}

.section-intro--narrow {
    display: block;
    max-width: 42rem;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1rem;
}

.feature-card {
    position: relative;
    display: flex;
    grid-column: span 4;
    min-height: 270px;
    min-width: 0;
    flex-direction: column;
    gap: clamp(1.5rem, 3vw, 2.25rem);
    padding: clamp(1.4rem, 3vw, 2rem);
    overflow: hidden;
    background: rgba(255, 254, 250, 0.75);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
}

.feature-card--large {
    display: grid;
    grid-column: span 8;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.9fr);
    align-content: center;
    align-items: stretch;
    gap: 2rem;
    background: var(--white);
}

.feature-card--full {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: minmax(14rem, 0.75fr) minmax(0, 1.5fr);
    align-content: center;
    align-items: center;
    gap: clamp(2rem, 5vw, 4rem);
}

.feature-card--tint {
    background: var(--sage-light);
    border-color: #d5dab7;
}

.feature-card--dark {
    color: var(--white);
    background: var(--green-900);
    border-color: var(--green-900);
}

.feature-card__number {
    display: block;
    margin-bottom: 2.8rem;
    color: var(--coral-dark);
    font-family: var(--serif);
    font-size: 0.85rem;
    font-style: italic;
}

.feature-card--dark .feature-card__number {
    color: var(--sage);
}

.feature-card h3,
.steps-list h3,
.plan-card h2 {
    margin: 0 0 0.65rem;
    font-family: var(--serif);
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    font-weight: 500;
    letter-spacing: -0.035em;
    line-height: 1.05;
}

.feature-card p {
    margin: 0;
    color: var(--ink-soft);
}

.feature-card--dark p {
    color: #dce8de;
}

.feature-card__copy {
    min-width: 0;
}

.feature-card__visual {
    width: 100%;
    min-width: 0;
    margin: auto 0 0;
    padding: 0.4rem;
    overflow: hidden;
    background: var(--paper-deep);
    border: 1px solid rgba(23, 35, 29, 0.18);
    border-radius: calc(var(--radius-md) + 2px);
    box-shadow: 0 12px 28px rgba(18, 51, 38, 0.12);
}

.feature-card__visual img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: calc(var(--radius-md) - 5px);
}

.demo-band {
    color: var(--white);
    background: var(--green-950);
    border-block: 1px solid var(--green-950);
}

.demo-section {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(20rem, 1.1fr);
    gap: clamp(3rem, 8vw, 8rem);
    align-items: center;
    padding-block: clamp(5rem, 9vw, 8rem);
}

.demo-section__copy,
.demo-section__visual {
    min-width: 0;
}

.demo-section .eyebrow {
    color: var(--sage);
}

.demo-section h2,
.feature-list-section h2 {
    margin: 0;
    font-family: var(--serif);
    font-size: clamp(2.35rem, 5vw, 4.5rem);
    font-weight: 500;
    letter-spacing: -0.055em;
    line-height: 0.98;
}

.demo-section__copy > p:not(.eyebrow) {
    max-width: 32rem;
    margin: 1.5rem 0 0;
    color: #dce8de;
    font-size: 1.08rem;
}

.demo-section__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.25rem;
    margin-top: 1.8rem;
}

.demo-section__actions > span {
    color: #c7d6ca;
    font-size: 0.78rem;
    font-weight: 700;
}

.demo-section__visual {
    width: min(100%, 22rem);
    margin: 0 auto;
    text-align: center;
}

.demo-visual__frame {
    width: 100%;
    padding: 0.7rem;
    overflow: hidden;
    background: var(--paper);
    border: 1px solid rgba(255, 254, 250, 0.5);
    border-radius: calc(var(--radius-lg) + 4px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
    transform: rotate(2deg);
}

.demo-visual__frame picture,
.demo-visual__frame img {
    display: block;
    width: 100%;
    height: auto;
}

.demo-visual__frame picture {
    overflow: hidden;
    border-radius: var(--radius-md);
}

.demo-section__visual figcaption {
    margin-top: 1.5rem;
    color: var(--sage);
    font-family: var(--serif);
    font-size: 0.95rem;
    font-style: italic;
}

.feature-list-band {
    background: var(--paper-deep);
    border-block: 1px solid var(--line);
}

.feature-list-section {
    padding-block: clamp(5rem, 9vw, 8rem);
}

.feature-list__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    padding-bottom: 1.8rem;
    border-bottom: 2px solid var(--ink);
}

.feature-list__header > div {
    min-width: 0;
}

.feature-list__stamp {
    flex: 0 0 auto;
    margin: 0 0 0.2rem;
    padding: 0.5rem 0.7rem;
    color: var(--coral-dark);
    border: 2px solid var(--coral-dark);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.13em;
    line-height: 1.2;
    text-transform: uppercase;
    transform: rotate(-2deg);
}

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

.feature-list__item {
    display: grid;
    grid-template-columns: 3rem minmax(13rem, 0.75fr) minmax(0, 1.25fr);
    gap: 1rem;
    align-items: baseline;
    min-width: 0;
    padding: 0.8rem 0;
    border-bottom: 1px solid var(--line-dark);
}

.feature-list__number {
    color: var(--coral-dark);
    font-family: var(--serif);
    font-size: 0.78rem;
    font-style: italic;
}

.feature-list__item h3 {
    margin: 0;
    font-family: var(--serif);
    font-size: 1.16rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.feature-list__item p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.9rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.feature-list__footer {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
    margin-top: 1rem;
    color: var(--ink-soft);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.4;
    text-transform: uppercase;
}

.feature-list__footer > p {
    margin: 0;
}

.feature-list__negatives {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.45rem 1.2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.feature-list__mark--negative {
    color: var(--danger);
    font-weight: 900;
    text-align: center;
}

.how-section {
    padding-block: clamp(5rem, 9vw, 8rem);
    background: var(--paper-deep);
    border-block: 1px solid var(--line);
}

.how-section__inner {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(20rem, 1.15fr);
    gap: clamp(3rem, 8vw, 8rem);
}

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

.steps-list li {
    display: grid;
    grid-template-columns: 3.4rem 1fr;
    gap: 1.1rem;
    padding-block: 1.65rem;
    border-top: 1px solid var(--line-dark);
}

.steps-list li:last-child {
    border-bottom: 1px solid var(--line-dark);
}

.steps-list__marker {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    place-items: center;
    color: var(--white);
    background: var(--green-800);
    border-radius: 50%;
    font-family: var(--serif);
}

.steps-list p {
    margin: 0;
    color: var(--ink-soft);
}

.origin-section {
    display: grid;
    grid-template-columns: minmax(18rem, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(3rem, 9vw, 9rem);
    align-items: center;
}

.origin-band {
    background: var(--paper-deep);
    border-block: 1px solid var(--line);
}

.origin-section__aside {
    position: relative;
    min-height: 330px;
    padding: 2.2rem;
    color: var(--white);
    background: var(--coral-dark);
    border-radius: 50% 46% 48% 44%;
    box-shadow: var(--shadow-md);
    transform: rotate(-3deg);
}

.origin-section__aside span {
    position: absolute;
    font-family: var(--serif);
}

.origin-section__aside span:nth-child(1) {
    top: 2.4rem;
    left: 3.5rem;
    color: var(--coral-light);
    font-size: 0.9rem;
}

.origin-section__aside span:nth-child(2) {
    top: 7rem;
    right: 12%;
    left: 18%;
    font-size: clamp(2rem, 4vw, 3.6rem);
    letter-spacing: -0.05em;
    line-height: 0.95;
}

.origin-section__aside span:nth-child(3) {
    right: 3.5rem;
    bottom: 2.5rem;
    color: var(--coral-light);
    font-style: italic;
}

.origin-section__copy > p:not(.eyebrow) {
    max-width: 37rem;
    margin: 1.5rem 0 0;
    color: var(--ink-soft);
    font-size: 1.12rem;
}

.origin-section__copy > p:not(.eyebrow) + p {
    margin-top: 0.9rem;
}

.origin-section__story-link {
    margin-top: 1.7rem;
}

/* Family story */
.story-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(17rem, 0.65fr);
    gap: clamp(2rem, 7vw, 7rem);
    align-items: center;
    margin-top: 1.5rem;
    padding: clamp(2rem, 6vw, 5.5rem);
    background: var(--paper-deep);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.story-hero h1,
.story-actions h2 {
    margin: 0;
    font-family: var(--serif);
    font-weight: 500;
    letter-spacing: -0.055em;
    line-height: 0.98;
}

.story-hero h1 {
    max-width: 10em;
    font-size: clamp(3rem, 7vw, 6.25rem);
}

.story-hero__lede {
    max-width: 42rem;
    margin: 1.5rem 0 0;
    color: var(--ink-soft);
    font-size: clamp(1rem, 1.7vw, 1.2rem);
}

.story-hero__note {
    padding: clamp(1.5rem, 4vw, 2.5rem);
    color: var(--white);
    background: var(--coral-dark);
    border-radius: 44% 52% 46% 50%;
    box-shadow: var(--shadow-md);
    transform: rotate(2deg);
}

.story-hero__note span,
.story-hero__note small {
    display: block;
    color: var(--coral-light);
    text-align: center;
}

.story-hero__note span {
    margin-top: 1rem;
}

.story-hero__note small {
    margin-bottom: 1rem;
}

.story-hero__note p {
    margin: 2.25rem 0;
    font-family: var(--serif);
    font-size: clamp(1.8rem, 4vw, 3rem);
    letter-spacing: -0.04em;
    line-height: 1;
    text-align: center;
}

.story-article {
    width: min(47rem, calc(100% - 40px));
    padding-block: clamp(4.5rem, 9vw, 8rem);
}

.story-article p {
    margin: 1.1rem 0 0;
    color: var(--ink-soft);
    font-size: 1.05rem;
    line-height: 1.75;
}

.story-article__lead {
    color: var(--ink) !important;
    font-family: var(--serif);
    font-size: clamp(1.4rem, 3vw, 2rem) !important;
    line-height: 1.45 !important;
}

.story-article__lead::first-letter {
    float: left;
    margin: 0.07em 0.12em 0 0;
    color: var(--coral-dark);
    font-family: var(--serif);
    font-size: 3.4em;
    line-height: 0.78;
}

.story-article h2 {
    margin: clamp(3.3rem, 7vw, 5rem) 0 0;
    color: var(--green-950);
    font-family: var(--serif);
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 500;
    letter-spacing: -0.045em;
    line-height: 1;
}

.story-article strong {
    color: var(--green-950);
    font-weight: 850;
}

.story-article blockquote {
    margin: clamp(3rem, 7vw, 5rem) 0;
    padding: clamp(1.5rem, 4vw, 2.4rem);
    color: var(--white);
    background: var(--green-900);
    border-left: 8px solid var(--gold);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    box-shadow: var(--shadow-md);
}

.story-article blockquote p {
    margin: 0;
    color: var(--white);
    font-family: var(--serif);
    font-size: clamp(1.45rem, 3vw, 2.1rem);
    font-style: italic;
    line-height: 1.35;
}

.story-article blockquote cite {
    display: block;
    margin-top: 1rem;
    color: var(--sage);
    font-size: 0.82rem;
    font-style: normal;
    font-weight: 800;
}

.story-figure {
    margin: clamp(3rem, 7vw, 5rem) 0;
}

.story-figure__image {
    display: block;
    overflow: hidden;
    padding: clamp(0.4rem, 1vw, 0.7rem);
    background: var(--white);
    border: 1px solid var(--line-dark);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

.story-figure picture,
.story-figure img {
    display: block;
    width: 100%;
}

.story-figure img {
    height: auto;
    border-radius: calc(var(--radius-md) - 6px);
}

.story-figure figcaption {
    display: flex;
    gap: 1rem;
    align-items: baseline;
    justify-content: space-between;
    margin-top: 1rem;
    color: var(--ink-soft);
    font-size: 0.88rem;
    line-height: 1.55;
}

.story-figure figcaption > span {
    max-width: 31rem;
}

.story-figure figcaption a {
    flex: 0 0 auto;
    color: var(--green-700);
    font-weight: 850;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

.story-emphasis {
    margin: clamp(2.5rem, 6vw, 4rem) clamp(-2rem, -4vw, -1rem);
    padding: clamp(1.5rem, 4vw, 2.25rem);
    background: var(--sage-light);
    border: 1px solid #d5dab7;
    border-radius: var(--radius-md);
}

.story-emphasis p:last-child {
    margin: 0;
    color: var(--green-950);
    font-family: var(--serif);
    font-size: clamp(1.3rem, 3vw, 1.8rem);
    line-height: 1.45;
}

.story-article hr {
    width: 8rem;
    margin: clamp(3.5rem, 8vw, 6rem) auto;
    border: 0;
    border-top: 3px solid var(--coral);
    transform: rotate(-2deg);
}

.story-actions {
    color: var(--white);
    background: var(--green-950);
}

.story-actions__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2rem;
    align-items: center;
    padding-block: clamp(3.5rem, 7vw, 5.5rem);
}

.story-actions .eyebrow {
    color: var(--sage);
}

.story-actions h2 {
    max-width: 12em;
    font-size: clamp(2.2rem, 5vw, 4.2rem);
}

.story-actions__buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.85rem;
}

.pricing-section {
    padding-block: clamp(3rem, 5vw, 4.5rem);
}

.faq-section {
    padding-top: 0;
}

.pricing-card {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(16rem, 0.75fr) minmax(13rem, 0.55fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
    padding: clamp(2.2rem, 6vw, 5.5rem);
    color: var(--white);
    background: var(--green-900);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.pricing-card .eyebrow {
    color: var(--sage);
}

.pricing-card__price {
    margin: 1.4rem 0 0;
    color: var(--sage);
    font-family: var(--serif);
    font-size: 1.3rem;
}

.pricing-card__copy > p:last-child {
    max-width: 31rem;
    margin-bottom: 0;
    color: #dce8de;
    font-size: 0.86rem;
}

.check-list {
    display: grid;
    gap: 0.8rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.check-list li {
    position: relative;
    padding-left: 1.65rem;
}

.check-list li::before {
    position: absolute;
    top: 0.12em;
    left: 0;
    color: var(--sage);
    content: "✓";
    font-weight: 900;
}

.pricing-card__action {
    display: grid;
    gap: 0.9rem;
    text-align: center;
}

.pricing-card__action > a {
    width: 100%;
}

.pricing-card__action span {
    color: #c7d6ca;
    font-size: 0.73rem;
}

.faq-section {
    display: grid;
    grid-template-columns: minmax(0, 0.72fr) minmax(20rem, 1.28fr);
    gap: clamp(3rem, 8vw, 8rem);
}

.faq-list {
    border-top: 1px solid var(--line-dark);
}

.faq-list details {
    border-bottom: 1px solid var(--line-dark);
}

.faq-list summary {
    position: relative;
    padding: 1.4rem 3rem 1.4rem 0;
    font-family: var(--serif);
    font-size: 1.25rem;
    font-weight: 700;
    list-style: none;
}

.faq-list summary::-webkit-details-marker {
    display: none;
}

.faq-list summary::after {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    content: "+";
    color: var(--green-700);
    font-family: var(--sans);
    font-size: 1.5rem;
    transform: translateY(-50%);
}

.faq-list details[open] summary::after {
    content: "−";
}

.faq-list details p {
    max-width: 44rem;
    margin: -0.4rem 3rem 1.5rem 0;
    color: var(--ink-soft);
}

.final-cta {
    padding-block: clamp(5rem, 10vw, 9rem);
    color: var(--white);
    background: var(--coral-dark);
}

.final-cta__inner {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2rem;
    align-items: end;
}

.final-cta .eyebrow {
    grid-column: 1 / -1;
    color: var(--coral-light);
}

/* Messages and forms */
.flash-stack {
    display: grid;
    gap: 0.65rem;
    margin-top: 1rem;
}

.app-shell > .flash-stack {
    margin-right: 3.75rem;
    margin-bottom: 1rem;
}

.flash-message {
    padding: 0.85rem 1rem;
    background: #edf1ee;
    border: 1px solid #c4cec7;
    border-left: 5px solid var(--green-700);
    border-radius: var(--radius-sm);
    font-size: 0.92rem;
    transition: opacity 220ms ease, transform 220ms ease;
}

.flash-message--leaving {
    opacity: 0;
    transform: translateY(-0.35rem);
}

.flash-message--error,
.flash-message--danger {
    background: var(--danger-soft);
    border-color: #e9bdb4;
    border-left-color: var(--danger);
}

.flash-message--success {
    background: var(--success-soft);
    border-color: #bad4bc;
    border-left-color: var(--green-700);
}

.flash-message--warning {
    background: var(--warning-soft);
    border-color: #ead38d;
    border-left-color: #9c7113;
}

.stacked-form {
    display: grid;
    gap: 1.15rem;
}

.form-field {
    display: grid;
    gap: 0.38rem;
}

.form-field label {
    color: var(--ink);
    font-size: 0.84rem;
    font-weight: 800;
}

.form-field__label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

input,
select,
textarea {
    max-width: 100%;
    min-height: 44px;
    padding: 0.65rem 0.75rem;
    background: var(--white);
    border: 1px solid var(--line-dark);
    border-radius: var(--radius-sm);
}

input:hover,
select:hover,
textarea:hover {
    border-color: var(--green-700);
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--green-700);
    box-shadow: 0 0 0 3px rgba(57, 132, 90, 0.14);
    outline: 0;
}

.form-help,
.form-fine-print {
    margin: 0;
    color: #657068;
    font-size: 0.78rem;
    line-height: 1.45;
}

.form-error {
    padding: 0.75rem;
    color: #70281f;
    background: var(--danger-soft);
    border: 1px solid #e9bdb4;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
}

.registration-consents {
    display: grid;
    gap: 0.9rem;
    min-width: 0;
    margin: 0;
    padding: 1rem;
    border: 1px solid var(--line-dark);
    border-radius: var(--radius-sm);
}

.registration-consents legend {
    padding-inline: 0.35rem;
    color: var(--ink);
    font-size: 0.84rem;
    font-weight: 800;
}

.consent-option {
    display: grid;
    grid-template-columns: 1.15rem minmax(0, 1fr);
    gap: 0.65rem;
    align-items: start;
    color: var(--ink-soft);
    font-size: 0.78rem;
    line-height: 1.45;
    cursor: pointer;
}

.consent-option input[type="checkbox"] {
    width: 1.15rem;
    min-height: 1.15rem;
    margin: 0.1rem 0 0;
    padding: 0;
    accent-color: var(--green-700);
}

/* Auth and status */
.auth-page main,
.status-page main,
.billing-page main,
.account-page main {
    min-height: calc(100vh - 76px);
}

.auth-layout {
    display: grid;
    grid-template-columns: minmax(18rem, 0.82fr) minmax(25rem, 1.18fr);
    max-width: 980px;
    padding-block: clamp(3rem, 8vw, 7rem);
}

.auth-aside,
.auth-card {
    min-height: 610px;
    padding: clamp(2rem, 5vw, 4.5rem);
}

.auth-aside {
    position: relative;
    overflow: hidden;
    color: var(--white);
    background: var(--green-900);
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

.auth-aside::after {
    position: absolute;
    right: -5rem;
    bottom: -6rem;
    width: 17rem;
    height: 17rem;
    content: "";
    background: var(--sage);
    border-radius: 48% 52% 43% 57%;
    opacity: 0.18;
}

.auth-aside__time {
    margin: 0;
    color: var(--sage);
    font-family: var(--serif);
    font-size: clamp(3.5rem, 7vw, 6rem);
    letter-spacing: -0.06em;
    line-height: 1;
}

.auth-aside__time small {
    font-size: 1rem;
    letter-spacing: 0;
}

.auth-aside__question,
.auth-aside__scribble {
    margin: 5rem 0 0;
    font-family: var(--serif);
    font-size: clamp(2.1rem, 4.5vw, 3.5rem);
    letter-spacing: -0.05em;
    line-height: 0.98;
}

.auth-aside__answer {
    position: absolute;
    right: 2rem;
    bottom: 2.5rem;
    left: 2rem;
    margin: 0;
    color: #dce8de;
    font-family: var(--serif);
    font-style: italic;
}

.auth-aside--register {
    background: var(--coral-dark);
}

.auth-aside--register::after {
    background: var(--coral-light);
}

.auth-aside__scribble {
    margin-top: 1rem;
    font-size: clamp(3rem, 7vw, 6rem);
    line-height: 0.9;
    transform: rotate(-3deg);
}

.auth-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--white);
    border: 1px solid var(--line);
    border-left: 0;
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    box-shadow: var(--shadow-md);
}

.auth-card h1,
.status-card h1,
.billing-intro h1,
.account-heading h1 {
    font-size: clamp(2.5rem, 5vw, 4.4rem);
}

.auth-card__intro {
    margin: 1.2rem 0 2rem;
    color: var(--ink-soft);
}

.auth-card__switch {
    margin: 1.6rem 0 0;
    font-size: 0.9rem;
    text-align: center;
}

.auth-card .form-fine-print {
    margin-top: 1rem;
    text-align: center;
}

.status-card {
    max-width: 700px;
    margin-block: clamp(3rem, 9vw, 8rem);
    padding: clamp(2rem, 6vw, 5rem);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.status-card__stamp {
    display: grid;
    width: 4.8rem;
    height: 4.8rem;
    place-items: center;
    margin-bottom: 2rem;
    color: var(--white);
    background: var(--green-700);
    border-radius: 50%;
    font-family: var(--serif);
    font-size: 2rem;
    font-weight: 700;
    transform: rotate(-5deg);
}

.status-card__stamp--warning {
    background: var(--coral-dark);
}

.status-card > p:not(.eyebrow):not(.form-help) {
    max-width: 36rem;
    margin: 1.2rem 0 0;
    color: var(--ink-soft);
    font-size: 1.05rem;
}

.status-card__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
    margin-block: 2rem 1rem;
}

.dev-notice,
.configuration-notice {
    padding: 1rem;
    background: var(--warning-soft);
    border: 1px solid #e3cb7e;
    border-radius: var(--radius-sm);
}

.dev-notice {
    margin-top: 1.7rem;
}

.dev-notice__label {
    margin: 0;
    color: #72520c;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.dev-notice p:not(.dev-notice__label) {
    margin: 0.4rem 0 1rem;
}

/* Billing and account */
.billing-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(25rem, 0.75fr);
    gap: clamp(3rem, 8vw, 8rem);
    align-items: center;
    padding-block: clamp(3rem, 8vw, 7rem);
}

.billing-intro > p:not(.eyebrow) {
    max-width: 38rem;
    margin: 1.4rem 0 2.5rem;
    color: var(--ink-soft);
    font-size: 1.08rem;
}

.account-facts {
    display: grid;
    gap: 0;
    margin: 0;
    border-top: 1px solid var(--line);
}

.account-facts > div {
    display: grid;
    grid-template-columns: 8rem minmax(0, 1fr);
    gap: 1rem;
    padding-block: 0.9rem;
    border-bottom: 1px solid var(--line);
}

.account-facts dt {
    color: #68736d;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.account-facts dd {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
    font-weight: 700;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.27rem 0.6rem;
    color: #4d554f;
    background: #e8ebe8;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.status-pill--active,
.status-pill--trialing {
    color: #174a30;
    background: var(--success-soft);
}

.status-pill--past-due,
.status-pill--unpaid,
.status-pill--canceled {
    color: #7b2d24;
    background: var(--danger-soft);
}

.status-pill--pending,
.status-pill--incomplete,
.status-pill--inactive {
    color: #73540f;
    background: var(--warning-soft);
}

.plan-card {
    position: relative;
    padding: clamp(1.7rem, 4vw, 3rem);
    background: var(--white);
    border: 1px solid var(--green-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.plan-card--active {
    border: 2px solid var(--green-700);
}

.plan-card__ribbon {
    position: absolute;
    top: 1.2rem;
    right: 1.2rem;
    margin: 0;
    padding: 0.3rem 0.65rem;
    color: var(--white);
    background: var(--green-700);
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.plan-card__heading {
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--line);
}

.plan-card h2 {
    font-size: clamp(2rem, 4vw, 3rem);
}

.plan-card__price {
    margin: 1rem 0 0;
    color: var(--green-700);
    font-family: var(--serif);
    font-size: 1.25rem;
    font-weight: 700;
}

.plan-card__renewal,
.plan-card__secure {
    margin: 0.35rem 0 0;
    color: #68736d;
    font-size: 0.75rem;
}

.plan-card .check-list {
    margin-block: 1.5rem;
}

.plan-card .check-list li::before {
    color: var(--green-700);
}

.plan-card__secure {
    text-align: center;
}

.plan-card__portal-form {
    margin-top: 1rem;
}

.plan-card .configuration-notice {
    margin-block: 1rem;
    font-size: 0.8rem;
}

.cancel-plan-form {
    margin-top: 1rem;
}

.account-actions .cancel-plan-form {
    margin-top: 0;
}

.cancellation-notice {
    margin-top: 1.25rem;
    padding: 1rem;
    color: #563f0d;
    background: var(--warning-soft);
    border: 1px solid #dec985;
    border-radius: var(--radius-md);
}

.cancellation-notice p {
    margin: 0.3rem 0 0;
    font-size: 0.84rem;
}

.account-link {
    display: block;
    margin-top: 1rem;
    font-size: 0.86rem;
    font-weight: 700;
    text-align: center;
}

.billing-trust {
    margin-bottom: clamp(4rem, 9vw, 8rem);
    padding: clamp(1.5rem, 4vw, 2.5rem);
    background: var(--sage-light);
    border: 1px solid #d5dab7;
    border-radius: var(--radius-md);
}

.billing-trust h2 {
    margin: 0 0 1.25rem;
    font-family: var(--serif);
    font-size: 1.6rem;
}

.billing-trust ol {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.billing-trust li {
    display: grid;
    grid-template-columns: 2rem 1fr;
    gap: 0.65rem;
}

.billing-trust li span {
    display: grid;
    width: 1.7rem;
    height: 1.7rem;
    place-items: center;
    color: var(--white);
    background: var(--green-700);
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 900;
}

.billing-trust li p {
    margin: 0;
    font-size: 0.9rem;
}

.account-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(25rem, 1.2fr);
    gap: clamp(3rem, 8vw, 8rem);
    align-items: start;
    padding-block: clamp(3rem, 8vw, 7rem);
}

.account-heading > p:last-child {
    margin-top: 1.3rem;
    color: var(--ink-soft);
}

.account-panel {
    padding: clamp(1.5rem, 4vw, 3rem);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.account-facts--large > div {
    grid-template-columns: 10rem minmax(0, 1fr);
    padding-block: 1.2rem;
}

.account-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.9rem;
    margin-top: 2rem;
}

.account-sessions,
.family-access-panel,
.family-switcher,
.account-support-panel,
.account-password-panel,
.danger-zone {
    grid-column: 2;
}

.account-support-panel,
.account-password-panel {
    display: grid;
    gap: 1.25rem;
}

.account-support-panel h2,
.account-password-panel h2 {
    margin-top: 0.25rem;
    font-family: var(--serif);
    font-size: clamp(1.5rem, 3vw, 2rem);
}

.account-support-panel > div > p:last-child,
.account-password-panel > div > p:last-child {
    margin: 0.7rem 0 0;
    color: var(--ink-soft);
    font-size: 0.9rem;
}

.account-support-panel .primary-cta {
    justify-self: start;
}

.account-password-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

.account-password-form .form-field {
    margin: 0;
}

.account-password-form input[type="password"] {
    width: 100%;
    height: 48px;
    min-height: 48px;
}

.account-password-form small {
    color: var(--ink-soft);
    font-size: 0.78rem;
}

.account-password-form .primary-cta {
    grid-column: 1 / -1;
    justify-self: start;
}

.danger-zone {
    display: grid;
    gap: 1.25rem;
    border-color: #e5b8af;
    box-shadow: none;
}

.danger-zone h2,
.account-delete-dialog h2 {
    margin-top: 0.25rem;
    font-family: var(--serif);
    font-size: clamp(1.5rem, 3vw, 2rem);
}

.danger-zone p:last-child {
    margin: 0.7rem 0 0;
    color: var(--ink-soft);
    font-size: 0.9rem;
}

.danger-button {
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    padding: 0.7rem 1rem;
    color: var(--white);
    background: var(--danger);
    border: 1px solid var(--danger);
    border-radius: 999px;
    font-weight: 800;
}

.danger-button:hover:not(:disabled) {
    background: #7e2e26;
    border-color: #7e2e26;
}

.danger-button:disabled {
    color: #7a746f;
    background: #dedbd7;
    border-color: #dedbd7;
    cursor: not-allowed;
}

.account-delete-dialog {
    width: min(34rem, calc(100% - 2rem));
    padding: clamp(1.4rem, 4vw, 2.2rem);
    color: var(--ink);
    background: var(--white);
    border: 1px solid #e5b8af;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.account-delete-dialog::backdrop {
    background: rgba(9, 25, 18, 0.7);
    backdrop-filter: blur(3px);
}

.account-delete-dialog > form > p:not(.eyebrow) {
    margin: 0.7rem 0 1.3rem;
    color: var(--ink-soft);
}

.account-delete-dialog__actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-top: 1.25rem;
}

.account-sessions__heading,
.session-card,
.session-card__title {
    display: flex;
    align-items: center;
}

.account-sessions__heading,
.session-card {
    justify-content: space-between;
    gap: 1rem;
}

.account-sessions__heading h2 {
    margin-top: 0.25rem;
    font-family: var(--serif);
    font-size: clamp(1.5rem, 3vw, 2rem);
}

.account-sessions__explanation {
    margin: 1rem 0 1.5rem;
    color: var(--ink-soft);
    font-size: 0.9rem;
}

.session-list {
    display: grid;
    gap: 0.8rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.session-card {
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
}

.session-card--current {
    background: var(--success-soft);
    border-color: var(--green-200);
}

.session-card__details {
    min-width: 0;
}

.session-card__title {
    flex-wrap: wrap;
    gap: 0.6rem;
}

.session-card__times {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 1.2rem;
    margin: 0.65rem 0 0;
    color: var(--ink-soft);
    font-size: 0.76rem;
}

.session-card__times div {
    display: flex;
    gap: 0.3rem;
}

.session-card__times dt {
    font-weight: 800;
}

.session-card__times dd {
    margin: 0;
}

.family-invite-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.8rem;
    align-items: end;
}

.family-invite-form .form-field {
    margin: 0;
}

.invitation-preview {
    display: grid;
    gap: 0.45rem;
    margin: 1rem 0;
    padding: 1rem;
    overflow-wrap: anywhere;
    background: var(--success-soft);
    border: 1px solid var(--green-200);
    border-radius: var(--radius-md);
}

.invitation-preview code {
    color: var(--ink-soft);
    font-size: 0.72rem;
}

.family-access-list,
.family-list {
    display: grid;
    gap: 0.8rem;
    margin: 1.25rem 0 0;
    padding: 0;
    list-style: none;
}

.family-access-card,
.family-card,
.family-card__title,
.family-card__actions {
    display: flex;
    align-items: center;
}

.family-access-card,
.family-card {
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
}

.family-access-card > div,
.family-card__details {
    display: grid;
    min-width: 0;
    gap: 0.4rem;
}

.family-access-card small,
.family-card small,
.family-card p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.78rem;
}

.family-card--current {
    background: var(--success-soft);
    border-color: var(--green-200);
}

.family-card__title {
    flex-wrap: wrap;
    gap: 0.5rem;
}

.family-card__actions {
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.family-label-form {
    display: grid;
    grid-template-columns: minmax(7rem, 1fr) auto;
    gap: 0.35rem 0.5rem;
    align-items: end;
}

.family-label-form label {
    grid-column: 1 / -1;
    font-size: 0.72rem;
    font-weight: 800;
}

.family-label-form input {
    min-width: 0;
}

.caregiver-permission-note {
    padding: 0.8rem;
    color: var(--ink-soft);
    background: #efe6d4;
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
}

/* Signed-in application shell */
.app-body {
    min-height: 100vh;
    background:
        linear-gradient(rgba(228, 238, 227, 0.55), rgba(251, 248, 239, 0) 20rem),
        #f3f1e9;
}

.app-header {
    position: relative;
    z-index: 100;
    color: var(--white);
    background: var(--green-950);
    border-bottom: 1px solid rgba(255, 255, 255, 0.13);
}

.app-header__inner {
    display: flex;
    width: min(980px, calc(100% - 32px));
    min-height: 64px;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
    margin-inline: auto;
}

.app-header .brand-mark,
.app-header .brand-mark:hover {
    color: var(--white);
}

.account-nav {
    gap: 1rem;
    color: #d9e4db;
    font-size: 0.78rem;
}

.account-nav > a {
    color: var(--white);
}

.account-nav__email {
    max-width: 17rem;
    overflow: hidden;
    color: #bfcfc2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-shell {
    position: relative;
    width: min(900px, calc(100% - 48px));
    min-height: calc(100vh - 112px);
    margin: 24px auto 48px;
    padding: clamp(1.25rem, 4vw, 2.6rem);
    background: rgba(255, 254, 250, 0.96);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.app-shell h1 {
    margin: 1.2rem 0;
    color: var(--ink);
    font-family: var(--serif);
    font-size: clamp(2.1rem, 5vw, 3.5rem);
    font-weight: 500;
    letter-spacing: -0.045em;
    line-height: 1;
    text-align: center;
}

.app-footer {
    padding: 1.25rem 24px 1.8rem;
    color: #dce8de;
    background: var(--green-950);
}

.app-footer__inner {
    display: flex;
    width: min(900px, 100%);
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
    margin-inline: auto;
}

.app-footer p {
    margin: 0;
    font-family: var(--serif);
    font-size: 0.9rem;
    font-style: italic;
}

.app-footer nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.8rem 1.2rem;
}

.app-footer nav a {
    color: var(--white);
    font-size: 0.82rem;
}

.app-footer nav .app-footer__support {
    color: #f6cf76;
    font-weight: 900;
}

.app-footer nav .app-footer__support:hover {
    color: var(--gold);
}

.child-tab-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0 3.5rem 1.4rem 0;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--line);
}

.child-tab {
    min-height: 38px;
    padding: 0.45rem 0.9rem;
    color: var(--ink-soft);
    background: var(--paper-deep);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 800;
    transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease;
}

.child-tab:hover {
    color: var(--green-950);
    background: var(--green-100);
    border-color: var(--green-200);
}

.child-tab.active {
    color: var(--white);
    background: var(--green-700);
    border-color: var(--green-700);
}

.child-tab.add-child-tab {
    display: inline-grid;
    width: 38px;
    padding: 0;
    place-items: center;
    font-size: 1.2rem;
}

.child-name-editor:empty {
    display: none;
}

.child-name-editor {
    margin-bottom: 1.2rem;
}

.child-name-form {
    display: flex;
    max-width: 32rem;
    align-items: center;
    gap: 0.6rem;
}

.child-name-form input {
    min-width: 0;
    flex: 1;
}

.child-name-form button,
#saveBirthdayButton,
#saveGenderButton {
    min-height: 44px;
    padding: 0.6rem 0.9rem;
    color: var(--white);
    background: var(--green-700);
    border: 1px solid var(--green-700);
    border-radius: var(--radius-sm);
    font-weight: 800;
}

.menu-container {
    position: absolute;
    z-index: 90;
    top: 2.25rem;
    right: 2.5rem;
}

.menu-button {
    display: grid;
    width: 42px;
    height: 42px;
    padding: 0;
    place-items: center;
    color: var(--white);
    background: var(--green-700);
    border: 0;
    border-radius: 50%;
    box-shadow: var(--shadow-sm);
    font-size: 1.15rem;
}

.menu-button:hover {
    background: var(--green-800);
}

.demo-menu-callout {
    appearance: none;
    position: absolute;
    top: 0.05rem;
    right: calc(100% + 0.55rem);
    display: flex;
    width: max-content;
    align-items: center;
    gap: 0.15rem;
    padding: 0.25rem 0;
    color: var(--coral-dark);
    background: transparent;
    border: 0;
    font-family: "Comic Sans MS", "Segoe Print", cursive;
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1;
    transform: rotate(-4deg);
}

.demo-menu-callout:hover {
    color: var(--green-800);
}

.demo-menu-callout svg {
    width: 2.9rem;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.2;
}

.menu-dropdown {
    position: absolute;
    top: 50px;
    right: 0;
    display: none;
    width: min(250px, calc(100vw - 40px));
    padding: 1rem;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

.menu-dropdown.open {
    display: block;
}

.menu-dropdown h3 {
    margin: 0 0 0.75rem;
    font-family: var(--serif);
    font-size: 1.15rem;
}

.relative-time-setting {
    margin: -0.15rem 0 0;
}

.relative-time-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    cursor: pointer;
}

.relative-time-option strong,
.relative-time-option small {
    display: block;
}

.relative-time-option strong {
    font-family: var(--serif);
    font-size: 1.05rem;
}

.relative-time-option small {
    max-width: 10rem;
    margin-top: 0.12rem;
    color: var(--ink-soft);
    font-size: 0.72rem;
    line-height: 1.3;
}

.relative-time-switch {
    position: relative;
    flex: 0 0 auto;
    width: 2.6rem;
    height: 1.45rem;
}

.relative-time-switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.relative-time-switch__track {
    position: absolute;
    inset: 0;
    background: #a9aaa4;
    border: 1px solid #858680;
    border-radius: 999px;
    transition: background-color 150ms ease, border-color 150ms ease;
}

.relative-time-switch__track::after {
    content: "";
    position: absolute;
    top: 0.16rem;
    left: 0.17rem;
    width: 1rem;
    height: 1rem;
    background: var(--white);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgb(0 0 0 / 25%);
    transition: transform 150ms ease;
}

.relative-time-switch input:checked + .relative-time-switch__track {
    background: var(--green-700);
    border-color: var(--green-800);
}

.relative-time-switch input:checked + .relative-time-switch__track::after {
    transform: translateX(1.13rem);
}

.relative-time-switch input:focus-visible + .relative-time-switch__track {
    outline: 3px solid rgb(48 108 84 / 28%);
    outline-offset: 2px;
}

.relative-time-switch input:disabled + .relative-time-switch__track {
    opacity: 0.55;
    cursor: wait;
}

.menu-settings-divider {
    margin: 0.9rem 0;
    border: 0;
    border-top: 1px solid var(--line);
}

.visibility-option {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-block: 0.5rem;
    font-size: 0.85rem;
}

.visibility-option input {
    width: 1.1rem;
    min-height: 1.1rem;
}

.visibility-save-status {
    margin: 0.75rem 0 0;
    padding: 0.6rem;
    color: #782b28;
    background: #fff0ee;
    border: 1px solid #d9aaa5;
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
    line-height: 1.35;
}

.hidden-field {
    display: none !important;
}

#breastTracker {
    margin: 0 0 1rem;
    padding: 0.85rem 1rem;
    color: var(--green-950);
    background: var(--sage-light);
    border: 1px solid #d5dab7;
    border-radius: var(--radius-sm);
    font-weight: 800;
    text-align: center;
}

.breast-toggle {
    appearance: none;
    display: inline;
    margin: 0;
    padding: 0 0.12rem;
    background: transparent;
    border: 0;
    border-bottom: 1px dashed currentColor;
    border-radius: 0;
    font: inherit;
    font-weight: inherit;
    line-height: inherit;
    cursor: pointer;
}

.breast-toggle--left {
    color: var(--green-700);
}

.breast-toggle--right {
    color: #a53d36;
}

#stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    margin-bottom: 1.4rem;
}

#stats p {
    min-width: 0;
    margin: 0;
    padding: 0.85rem 1rem;
    color: var(--ink-soft);
    background: #f3f4ef;
    border: 1px solid #e4e5df;
    border-radius: var(--radius-sm);
    font-size: 0.86rem;
}

#stats p span {
    color: var(--ink);
    font-weight: 800;
}

#buttons {
    padding: 1rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
}

#buttons .button-group {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0;
}

#buttons .button-group + .button-group {
    margin-top: 0.7rem;
}

#buttons input[type="datetime-local"],
#buttons input[type="number"],
#buttons button {
    min-width: 0;
    min-height: 44px;
}

#buttons input[type="datetime-local"] {
    flex: 1 1 13rem;
}

#buttons button {
    display: flex;
    flex: 1 1 12rem;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.55rem 0.8rem;
    color: var(--white);
    background: var(--green-700);
    border: 1px solid var(--green-700);
    border-radius: var(--radius-sm);
    font-weight: 800;
    line-height: 1.15;
}

#buttons button:hover {
    background: var(--green-800);
    border-color: var(--green-800);
}

.event-button-emoji {
    flex: 0 0 auto;
    font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
    font-size: 1.08em;
    line-height: 1;
}

#buttons .measurement-button-group,
#buttons .weight-button-group {
    display: grid;
    grid-template-columns: minmax(12rem, 1fr) 5.5rem minmax(10rem, 1fr);
    gap: 0.75rem;
}

#buttons .measurement-button-group input[type="number"] {
    width: 5.5rem;
    max-width: 5.5rem;
}

#buttons .measurement-button-group input[type="datetime-local"],
#buttons .measurement-button-group button,
#buttons .weight-button-group input[type="datetime-local"],
#buttons .weight-button-group button {
    width: 100%;
}

.record-entry-separator {
    margin: 1.7rem 0 1.2rem;
    border: 0;
    border-top: 1px solid var(--line-dark);
}

#record-links,
#profile-links {
    text-align: center;
}

#record-links > .button,
#profile-links > .button {
    margin: 0.25rem;
}

#record-links > hr {
    margin-block: 1rem;
    border: 0;
    border-top: 1px solid var(--line);
}

#record-links .button-group {
    max-width: 38rem;
    margin: 1rem auto 0;
}

#record-links .child-name-form {
    max-width: 38rem;
    margin: 1rem auto 0;
}

.child-settings {
    max-width: 38rem;
    margin-inline: auto;
}

.child-settings > hr {
    margin-block: 1.2rem;
    border: 0;
    border-top: 1px solid var(--line);
}

.child-settings__age {
    min-height: 1.4rem;
    margin: 0.35rem 0 0;
    color: var(--ink-soft);
    font-size: 0.86rem;
}

.child-name-settings-slot:empty {
    display: none;
}

.child-settings__archive-link {
    margin: 0.25rem;
}

.button {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 1rem;
    color: var(--white);
    background: var(--green-700);
    border: 1px solid var(--green-700);
    border-radius: var(--radius-sm);
    font-weight: 750;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
}

.button:hover {
    color: var(--white);
    background: var(--green-800);
    border-color: var(--green-800);
}

.button-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.8rem;
}

.record-entry--other-user {
    background: #efe6d4;
}

.button-group.record-entry--other-user,
.tracker-timeline-event.record-entry--other-user {
    padding: 0.65rem;
    border-radius: var(--radius-sm);
}

.record-author-key {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.7rem 0 1rem;
    color: var(--ink-soft);
    font-size: 0.76rem;
}

.record-author-key__swatch {
    width: 1.5rem;
    height: 0.85rem;
    flex: 0 0 auto;
    background: #efe6d4;
    border: 1px solid #ded0b6;
    border-radius: 3px;
}

.input-datetime {
    min-width: 0;
    flex: 1;
}

.delete-button {
    min-width: 44px;
    min-height: 44px;
    padding: 0.55rem 0.8rem;
    color: var(--white);
    background: var(--danger);
    border: 1px solid var(--danger);
    border-radius: var(--radius-sm);
    font-weight: 900;
}

.delete-button:hover {
    background: #7f2c24;
}

#back-home {
    display: flex;
    width: fit-content;
    min-width: 12rem;
    margin: 0 auto 1.25rem;
    color: var(--white);
    background: var(--ink-soft);
    border-color: var(--ink-soft);
}

#back-home:hover {
    background: var(--ink);
    border-color: var(--ink);
}

.record-order-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem 1rem;
    margin: 0 0 1.35rem;
    padding: 0.85rem 1rem;
    background: var(--cream, #f7f2e6);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
}

.record-order-controls p {
    flex: 1 1 13rem;
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.82rem;
}

.record-order-toggle {
    flex: 0 0 auto;
    margin: 0;
    color: var(--white);
    background: var(--ink-soft);
    border-color: var(--ink-soft);
}

.record-order-toggle:hover {
    color: var(--white);
    background: var(--ink);
    border-color: var(--ink);
}

.volume-display {
    flex: 0 0 auto;
    color: var(--ink-soft);
    font-size: 0.8rem;
    font-weight: 800;
}

.record-pagination {
    display: flex;
    justify-content: center;
    gap: 0.65rem;
    margin: 1.5rem 0;
}

.record-pagination .button {
    margin: 0;
}

@media (max-width: 640px) {
    .legal-page {
        width: min(100% - 24px, 860px);
        margin-block: 1rem 2.5rem;
    }

    .legal-hero {
        border-radius: var(--radius-md);
    }

    .sitemap-links {
        grid-template-columns: 1fr;
    }

    .app-footer__inner,
    .record-order-controls {
        align-items: stretch;
        flex-direction: column;
    }

    .app-footer nav {
        justify-content: flex-start;
    }

    .record-order-toggle {
        width: 100%;
    }

    .record-order-controls p {
        flex: 0 0 auto;
    }
}

.timeline {
    margin-top: 1.4rem;
    padding: 1rem;
    background: #f7f7f2;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
}

.timeline-event {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem;
    border-bottom: 1px solid var(--line);
}

.timeline-event:last-child {
    border-bottom: 0;
}

.timeline-label {
    margin-right: 0.6rem;
    font-size: 1.05rem;
    font-weight: 800;
}

.timeline-datetime {
    color: #626c66;
}

.timeline-amount {
    color: var(--ink);
}

.chart-container {
    max-width: 100%;
}

.archive-controls {
    margin-top: 1rem;
    text-align: center;
}

.archive-controls .button,
.archive-controls .archive-button {
    display: inline-flex;
    margin: 0.25rem;
}

.archive-button {
    min-height: 42px;
    margin-top: 1.3rem;
    padding: 0.55rem 1rem;
    color: var(--white);
    background: var(--danger);
    border: 1px solid var(--danger);
    border-radius: var(--radius-sm);
    font-weight: 800;
}

.archived-table {
    width: 100%;
    margin-top: 1.2rem;
    border-collapse: collapse;
    background: var(--white);
}

.archived-table th,
.archived-table td {
    padding: 0.7rem;
    border: 1px solid var(--line);
    text-align: left;
}

.archived-table th {
    background: var(--paper-deep);
    font-size: 0.8rem;
}

.archived-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.archived-actions .button,
.archived-actions .delete-button {
    margin: 0;
}

.allergen-tracker {
    max-width: 760px;
    margin-inline: auto;
}

.allergen-group {
    margin-bottom: 1.4rem;
    padding: 1rem;
    background: #f8f8f3;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
}

.allergen-group h2 {
    margin-top: 0;
    font-family: var(--serif);
}

.allergen-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--line);
}

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

.allergen-name {
    min-width: 8.75rem;
    font-weight: 700;
}

.allergen-circles {
    display: flex;
    flex: 1;
    gap: 0.45rem;
}

.allergen-circle {
    display: inline-flex;
    width: 1.45rem;
    height: 1.45rem;
    align-items: center;
    justify-content: center;
    color: var(--white);
    border: 2px dashed #909992;
    border-radius: 50%;
    font-size: 0.75rem;
}

.allergen-circle.completed {
    background: var(--green-600);
    border-color: var(--green-700);
    border-style: solid;
}

.allergen-actions {
    display: flex;
    gap: 0.4rem;
}

.allergen-adjust {
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    color: var(--white);
    background: var(--green-700);
    border: 1px solid var(--green-700);
    border-radius: var(--radius-sm);
    font-size: 1.3rem;
    font-weight: 900;
    line-height: 1;
}

.allergen-adjust-increment {
    background: var(--green-700);
    border-color: var(--green-700);
}

.allergen-adjust-decrement {
    background: var(--danger);
    border-color: var(--danger);
}

.allergen-adjust:disabled {
    color: #69736d;
    background: #d7dbd6;
    border-color: #c4c9c4;
    cursor: not-allowed;
}

/* Child profile modal */
.modal-backdrop {
    position: fixed;
    z-index: 900;
    inset: 0;
    background: rgba(9, 25, 18, 0.62);
    backdrop-filter: blur(3px);
}

.modal {
    position: fixed;
    z-index: 1000;
    top: 50%;
    left: 50%;
    width: min(440px, calc(100% - 32px));
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: clamp(1.4rem, 4vw, 2.2rem);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    transform: translate(-50%, -50%);
}

.modal.hidden,
.modal-backdrop.hidden {
    display: none;
}

.modal-content h2 {
    margin: 0;
    font-family: var(--serif);
    font-size: 2.2rem;
    letter-spacing: -0.04em;
}

.modal-content > p:not(.eyebrow) {
    margin: 0.6rem 0 1.3rem;
    color: var(--ink-soft);
    font-size: 0.9rem;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.65rem;
    margin-top: 0.4rem;
}

.modal-actions button {
    min-height: 42px;
    padding: 0.55rem 0.9rem;
    border: 1px solid var(--line-dark);
    border-radius: var(--radius-sm);
    font-weight: 800;
}

#submitChildModal {
    color: var(--white);
    background: var(--green-700);
    border-color: var(--green-700);
}

#cancelChildModal {
    background: var(--paper-deep);
}

@media (max-width: 1040px) {
    .hero {
        display: flex;
        min-height: 0;
        flex-direction: column;
    }

    .hero::after {
        display: none;
    }

    .hero__picture,
    .hero__art {
        position: relative;
        inset: auto;
    }

    .hero__picture {
        order: 2;
        height: min(470px, 78vw);
        overflow: hidden;
        background: #f9f4e8;
    }

    .hero__art {
        height: 100%;
        object-fit: cover;
        object-position: 72% center;
    }

    .hero__copy {
        width: 100%;
        padding: 2.5rem 1.6rem;
    }

    .hero h1 {
        max-width: none;
        font-size: clamp(3rem, 12vw, 5.2rem);
    }
}

@media (max-width: 980px) {

    .feature-card,
    .feature-card--large {
        grid-column: span 6;
    }

    .feature-card--large {
        grid-template-columns: 1fr;
    }

    .feature-card--full {
        grid-column: 1 / -1;
        grid-template-columns: 1fr;
    }

    .pricing-card {
        grid-template-columns: 1fr 1fr;
    }

    .pricing-card__copy {
        grid-column: 1 / -1;
    }

    .billing-layout,
    .account-layout {
        gap: 3rem;
    }
}

@media (max-width: 780px) {
    .public-header__inner,
    .public-footer__inner {
        width: min(100% - 28px, 1180px);
    }

    .public-nav > a[href="/#features"],
    .public-nav > a[href="/purchase"] {
        display: none;
    }

    .proof-strip__inner,
    .section-intro,
    .how-section__inner,
    .origin-section,
    .faq-section,
    .demo-section,
    .billing-layout,
    .account-layout {
        display: block;
    }

    .proof-strip__inner {
        padding-block: 1.2rem;
    }

    .proof-strip p {
        margin-bottom: 0.65rem;
        text-align: center;
    }

    .proof-strip ul {
        flex-wrap: wrap;
        justify-content: center;
    }

    .proof-strip li::after {
        margin-left: 1rem;
    }

    .section-intro h2 {
        margin-bottom: 1.2rem;
    }

    .demo-section__visual {
        margin-top: 3.5rem;
    }

    .how-section .section-intro,
    .faq-section .section-intro {
        margin-bottom: 2.5rem;
    }

    .origin-section__aside {
        max-width: 30rem;
        min-height: 300px;
        margin: 0 auto 4rem;
    }

    .story-hero,
    .story-actions__inner {
        grid-template-columns: 1fr;
    }

    .story-hero__note {
        max-width: 28rem;
    }

    .story-actions__buttons {
        justify-content: flex-start;
    }

    .pricing-card {
        grid-template-columns: 1fr;
    }

    .pricing-card__copy {
        grid-column: auto;
    }

    .final-cta__inner {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .auth-layout {
        grid-template-columns: minmax(15rem, 0.7fr) minmax(22rem, 1.3fr);
    }

    .auth-aside,
    .auth-card {
        min-height: 560px;
        padding: 2rem;
    }

    .billing-intro,
    .account-heading {
        margin-bottom: 3rem;
    }

    .billing-trust ol {
        grid-template-columns: 1fr;
    }

    .account-nav__email {
        display: none;
    }

    .app-shell {
        width: min(900px, calc(100% - 28px));
        margin-top: 14px;
    }
}

@media (max-width: 620px) {
    .page-width {
        width: min(100% - 24px, 1180px);
    }

    .public-header__inner {
        min-height: 66px;
    }

    .brand-mark__name {
        font-size: 1rem;
    }

    .brand-mark__qualifier {
        font-size: 0.5rem;
    }

    .public-nav {
        gap: 0.7rem;
        font-size: 0.78rem;
    }

    .public-nav .nav-cta {
        min-height: 36px;
        padding: 0.45rem 0.7rem;
    }

    .hero {
        margin-top: 0.75rem;
        border-radius: 20px;
    }

    .hero__copy {
        padding: 2rem 1.25rem;
    }

    .hero__actions {
        display: grid;
    }

    .hero__actions > * {
        width: 100%;
    }

    .editorial-section,
    .origin-section,
    .pricing-section,
    .faq-section {
        padding-block: 4.5rem;
    }

    .pricing-section {
        padding-block: 3rem;
    }

    .faq-section {
        padding-top: 0;
    }

    .demo-section,
    .feature-list-section {
        padding-block: 4.5rem;
    }

    .demo-section__actions {
        display: grid;
    }

    .demo-section__actions > * {
        width: 100%;
    }

    .demo-section__visual {
        width: min(100%, 19rem);
    }

    .feature-grid {
        display: block;
    }

    .feature-list__header {
        align-items: flex-start;
        flex-direction: column;
    }

    .feature-list__item {
        grid-template-columns: 2rem minmax(0, 1fr);
        gap: 0.2rem 0.8rem;
        padding: 0.9rem 0;
    }

    .feature-list__item p {
        grid-column: 2;
    }

    .feature-list__footer {
        flex-direction: column;
        gap: 0.45rem;
    }

    .feature-list__negatives {
        justify-content: flex-start;
    }

    .feature-card,
    .feature-card--large,
    .feature-card--full {
        display: flex;
        min-height: 0;
        flex-direction: column;
        margin-top: 0.8rem;
    }

    .feature-card__number {
        margin-bottom: 2rem;
    }

    .origin-section__aside {
        min-height: 260px;
    }

    .origin-section__aside span:nth-child(2) {
        top: 6rem;
    }

    .story-hero {
        margin-top: 0.75rem;
        padding: 2rem 1.25rem;
        border-radius: 20px;
    }

    .story-hero__note {
        margin-top: 1rem;
    }

    .story-emphasis {
        margin-inline: 0;
    }

    .story-figure figcaption {
        display: grid;
        gap: 0.65rem;
    }

    .story-figure figcaption a {
        justify-self: start;
    }

    .story-actions__buttons {
        display: grid;
    }

    .story-actions__buttons > * {
        width: 100%;
    }

    .pricing-card {
        padding: 2rem 1.3rem;
        border-radius: 20px;
    }

    .faq-list summary {
        font-size: 1.1rem;
    }

    .public-footer__inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .auth-layout {
        display: flex;
        width: min(100% - 24px, 34rem);
        flex-direction: column;
        padding-block: 2rem 4rem;
    }

    .auth-aside {
        min-height: 220px;
        border-radius: 20px 20px 0 0;
    }

    .auth-aside__time {
        font-size: 3.6rem;
    }

    .auth-aside__question,
    .auth-aside__scribble {
        margin-top: 1.5rem;
        font-size: 2.3rem;
    }

    .auth-aside__answer {
        display: none;
    }

    .auth-card {
        min-height: 0;
        padding: 2rem 1.3rem;
        border-top: 0;
        border-left: 1px solid var(--line);
        border-radius: 0 0 20px 20px;
    }

    .status-card {
        margin-block: 2rem 4rem;
        padding: 2rem 1.3rem;
        border-radius: 20px;
    }

    .status-card__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .status-card__actions .inline-form,
    .status-card__actions .text-button {
        width: 100%;
        justify-content: center;
    }

    .billing-layout,
    .account-layout {
        padding-block: 2.5rem 4rem;
    }

    .plan-card,
    .account-panel {
        padding: 1.4rem;
        border-radius: 20px;
    }

    .account-sessions,
    .family-access-panel,
    .family-switcher,
    .account-support-panel,
    .account-password-panel,
    .danger-zone {
        margin-top: 1.25rem;
    }

    .account-sessions__heading,
    .session-card,
    .family-access-card,
    .family-card,
    .family-card__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .family-invite-form {
        grid-template-columns: 1fr;
    }

    .family-invite-form button,
    .family-card__actions form,
    .family-card__actions form > button,
    .family-label-form {
        width: 100%;
    }

    .account-sessions__heading form,
    .account-sessions__heading button,
    .session-card > form,
    .session-card > form button {
        width: 100%;
    }

    .account-facts > div,
    .account-facts--large > div {
        display: block;
    }

    .account-facts dd {
        margin-top: 0.3rem;
    }

    .account-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .account-actions > *,
    .account-actions form,
    .account-actions button {
        width: 100%;
    }

    .danger-zone .danger-button,
    .account-support-panel .primary-cta,
    .account-password-form .primary-cta,
    .account-delete-dialog__actions,
    .account-delete-dialog__actions button {
        width: 100%;
    }

    .account-password-form .primary-cta {
        grid-column: auto;
    }

    .account-delete-dialog__actions {
        flex-direction: column-reverse;
    }

    .app-header__inner {
        width: calc(100% - 24px);
    }

    .account-nav {
        gap: 0.65rem;
        font-size: 0.7rem;
    }

    .app-shell {
        width: 100%;
        min-height: calc(100vh - 64px);
        margin: 0;
        padding: 1rem 0.75rem 2rem;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .child-tab-bar {
        margin-right: 3rem;
    }

    .app-shell > .flash-stack {
        margin-right: 3.25rem;
    }

    .menu-container {
        top: 1rem;
        right: 0.75rem;
    }

    .child-name-form {
        align-items: stretch;
        flex-direction: column;
    }

    #stats {
        grid-template-columns: 1fr;
    }

    #buttons {
        padding: 0.65rem;
    }

    #buttons .button-group {
        gap: 0.5rem;
    }

    #buttons button {
        flex-basis: 9.5rem;
        padding-inline: 0.55rem;
        font-size: 0.9rem;
    }

    #record-links .button-group,
    .button-group {
        align-items: stretch;
    }

    .archived-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    .allergen-row {
        flex-wrap: wrap;
    }

    .allergen-name {
        width: 100%;
        min-width: 0;
    }

    .allergen-circles {
        flex: 0 0 auto;
    }

    .allergen-actions {
        margin-left: auto;
    }
}

@media (max-width: 520px) {
    .public-nav > a[href="/login"] {
        display: none;
    }

    .proof-strip ul {
        gap: 0.6rem;
    }

    .proof-strip li::after {
        margin-left: 0.6rem;
    }

    #buttons .measurement-button-group,
    #buttons .weight-button-group {
        grid-template-columns: minmax(0, 1fr) 5.5rem;
    }

    #buttons .measurement-button-group input[type="datetime-local"],
    #buttons .weight-button-group input[type="datetime-local"] {
        width: calc(100% - 4px);
    }

    #buttons .measurement-button-group button,
    #buttons .weight-button-group button {
        grid-column: 1 / -1;
        width: 100%;
    }

    #record-links .button-group,
    .app-shell > .button-group {
        flex-wrap: wrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

@media (prefers-contrast: more) {
    :root {
        --line: #737a75;
        --line-dark: #4e5651;
    }

    .primary-cta,
    .button,
    #buttons button {
        border-width: 2px;
    }
}