/* ==========================================================================
   Accessibility — screen-reader-only visual helper
   ========================================================================== */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

html {
    scroll-behavior: smooth;
}

.skip-link {
    position: fixed;
    top: -100px;
    left: 12px;
    z-index: 2000;
    padding: 10px 14px;
    border-radius: 4px;
    background: #1E1B19;
    color: #FFFFFF;
    font: var(--ds-title-m);
}

.skip-link:focus {
    top: 12px;
}

.skip-target {
    display: block;
    height: 0;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible {
    outline: 3px solid var(--ds-primary, #4A7C28);
    outline-offset: 3px;
}

/* Reserve icon space while the non-critical Bootstrap Icons font loads. */
.bi {
    display: inline-block;
    width: 1em;
    height: 1em;
}

/* ==========================================================================
   Article page — reading-optimized layout
   ========================================================================== */

.article-page {
    background: #fff;
    padding-block-start: var(--ds-spacing-600);
    padding-block-end: var(--ds-spacing-1600);
    padding-inline: 1rem;
}

@media (1024px <= width) {
    .article-page {
        padding-inline: 60px;
    }
}

.article-container {
    max-width: 680px;
    margin: 0 auto;
}

.article-back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--ds-text-tertiary, #999);
    text-decoration: none;
    margin-block-end: 3rem;
    transition: color 0.15s;
}

.article-back:hover {
    color: var(--ds-text-primary);
}

.article-header {
    display: block;
    margin-block-end: 4rem;
    padding-block-end: 2rem;
    padding: 0;
    background: transparent;
    border-block-end: 1px solid var(--ds-border-default, #e0e0e0);
}

.article-header h1 {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
    margin-block-end: 1.5rem;
    letter-spacing: -0.01em;
}

@media (600px <= width) {
    .article-header h1 {
        font-size: 2.25rem;
        letter-spacing: -0.02em;
    }
}

@media (1024px <= width) {
    .article-header h1 {
        font-size: 2.75rem;
    }
}

.article-description {
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--ds-text-secondary, #5A5A50);
    margin-block-end: 2rem;
}

.article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    font-size: 0.9375rem;
    color: var(--ds-text-tertiary, #999);
}

.article-meta .article-author {
    font-weight: 500;
    color: var(--ds-text-secondary, #5A5A50);
}

.article-meta .article-date::before {
    content: "\00b7";
    margin-inline-end: 1rem;
}

/* Article body — optimized for long-form reading (UX best practices) */
.article-body {
    font: var(--ds-body-m);
    line-height: 1.9;
    color: var(--ds-text-primary);
    letter-spacing: 0.01em;
}

@media (600px <= width) {
    .article-body {
        font-size: 1.0625rem;
        line-height: 1.9;
    }
}

/* First paragraph: lead — larger, draws reader in */
.article-body > p:first-child,
.article-body > h1 + p,
.article-body > h1 + p + p {
    font-size: 1.125em;
    line-height: 1.75;
    color: var(--ds-text-secondary);
}

.article-body > *:first-child {
    margin-block-start: 0;
}

/* Hide duplicate h1 from markdown (header already has h1) */
.article-body > h1:first-child {
    display: none;
}

/* Section headings with visual separator */
.article-body h1,
.article-body h2 {
    font: var(--ds-headline-s);
    margin-block-start: 3.5rem;
    margin-block-end: var(--ds-spacing-600);
    padding-block-start: var(--ds-spacing-800);
    border-block-start: 1px solid var(--ds-border-default);
    letter-spacing: -0.01em;
}

.article-body > h1:first-child {
    border: none;
    padding-block-start: 0;
    margin-block-start: 0;
}

@media (600px <= width) {
    .article-body h2 {
        font: var(--ds-headline-m);
    }
}

.article-body h3 {
    font: var(--ds-title-l);
    margin-block-start: 2.5rem;
    margin-block-end: var(--ds-spacing-400);
}

/* Paragraphs */
.article-body p {
    margin-block-end: 1.5em;
}

/* Blockquotes — prominent, inset */
.article-body blockquote {
    border-inline-start: 3px solid var(--ds-primary, #4A7C28);
    padding-inline-start: 1.5rem;
    padding-block: var(--ds-spacing-400);
    margin-inline: 0;
    margin-block: 2rem;
    font-style: italic;
    color: var(--ds-text-secondary);
    font-size: 1.1em;
    line-height: 1.7;
}

.article-body blockquote p:last-child {
    margin-block-end: 0;
}

/* Lists — more breathing room */
.article-body ul,
.article-body ol {
    padding-inline-start: 1.5rem;
    margin-block: 1.5em;
}

.article-body li {
    margin-block-end: 0.5em;
    line-height: 1.75;
}

.article-body li::marker {
    color: var(--ds-primary, #4A7C28);
}

.article-body strong {
    font-weight: 600;
}

/* Emphasis within text — subtle highlight */
.article-body em {
    font-style: italic;
    color: var(--ds-text-secondary);
}

/* Images in article */
.article-body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--ds-radius-md);
    margin-block: 2rem;
}

/* Horizontal rule between major sections */
.article-body hr {
    border: none;
    border-block-start: 1px solid var(--ds-border-default);
    margin-block: 3rem;
}

/* Article CTA — link to read text in app */
.article-cta {
    margin-block: 3rem;
    padding: var(--ds-spacing-800);
    background: var(--ds-surface-base, #F5F5F0);
    border-radius: var(--ds-radius-lg);
    text-align: center;
}

.article-cta-text {
    font: var(--ds-headline-s);
    margin-block-end: var(--ds-spacing-200);
}

.article-cta-sub {
    font: var(--ds-body-m);
    color: var(--ds-text-secondary);
    margin-block-end: var(--ds-spacing-600);
}

.article-cta-actions {
    display: flex;
    gap: var(--ds-spacing-300);
    justify-content: center;
    flex-wrap: wrap;
}

.article-footer {
    margin-block-start: var(--ds-spacing-1600);
    padding-block-start: var(--ds-spacing-800);
    border-block-start: 1px solid var(--ds-border-default);
}

/* ==========================================================================
   Legal pages (privacy, terms) — minimal typography, content from auth-be
   ========================================================================== */

.legal-page {
    background: #fff;
    padding-block-start: var(--ds-spacing-1200);
    padding-block-end: var(--ds-spacing-1600);
    padding-inline: 1rem;
}

@media (1024px <= width) {
    .legal-page {
        padding-inline: 60px;
    }
}

.legal-content {
    max-width: 720px;
    margin: 0 auto;
    font: var(--ds-body-m);
    line-height: 1.7;
    color: var(--ds-text-primary);
}

@media (600px <= width) {
    .legal-content {
        font-size: 1.0625rem;
        line-height: 1.75;
    }
}

.legal-content > *:first-child {
    margin-block-start: 0;
}

.legal-content > *:last-child {
    margin-block-end: 0;
}

.legal-content h1 {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin-block-start: 0;
    margin-block-end: var(--ds-spacing-800);
    padding-block-end: var(--ds-spacing-600);
    border-block-end: 1px solid var(--ds-border-default, #e0e0e0);
}

@media (600px <= width) {
    .legal-content h1 {
        font-size: 2.25rem;
        letter-spacing: -0.02em;
    }
}

.legal-content h2 {
    font: var(--ds-headline-s);
    font-weight: 600;
    margin-block-start: var(--ds-spacing-1200);
    margin-block-end: var(--ds-spacing-400);
    letter-spacing: -0.01em;
}

.legal-content h3 {
    font: var(--ds-title-l);
    font-weight: 600;
    margin-block-start: var(--ds-spacing-800);
    margin-block-end: var(--ds-spacing-300);
}

.legal-content h4 {
    font: var(--ds-title-m);
    font-weight: 600;
    margin-block-start: var(--ds-spacing-600);
    margin-block-end: var(--ds-spacing-200);
}

.legal-content p {
    margin-block: 0 1.25em;
}

.legal-content ul,
.legal-content ol {
    padding-inline-start: 1.5rem;
    margin-block: 1em 1.25em;
}

.legal-content li {
    margin-block-end: 0.4em;
    line-height: 1.7;
}

.legal-content li > ul,
.legal-content li > ol {
    margin-block: 0.4em 0.6em;
}

.legal-content strong {
    font-weight: 600;
    color: var(--ds-text-primary);
}

.legal-content em {
    font-style: italic;
}

.legal-content a {
    color: var(--ds-primary, #4A7C28);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.legal-content a:hover {
    text-decoration-thickness: 2px;
}

.legal-content blockquote {
    margin: 1.5em 0;
    padding-inline-start: 1rem;
    border-inline-start: 2px solid var(--ds-border-default, #e0e0e0);
    color: var(--ds-text-secondary, #5A5A50);
    font-style: italic;
}

.legal-content hr {
    border: none;
    border-block-start: 1px solid var(--ds-border-default, #e0e0e0);
    margin-block: 2.5rem;
}

.legal-content table {
    width: 100%;
    border-collapse: collapse;
    margin-block: 1.5em;
    font-size: 0.9375em;
}

.legal-content th,
.legal-content td {
    padding: var(--ds-spacing-300) var(--ds-spacing-400);
    border-block-end: 1px solid var(--ds-border-default, #e0e0e0);
    text-align: start;
    vertical-align: top;
}

.legal-content th {
    font-weight: 600;
    background: var(--ds-surface-base, #F5F5F0);
}

.legal-content code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.9em;
    padding: 0.1em 0.3em;
    background: var(--ds-surface-base, #F5F5F0);
    border-radius: var(--ds-radius-sm, 4px);
}

/* ==========================================================================
   Public information pages — reusable policy/help pages owned by landing
   ========================================================================== */

.info-page {
    background: #fff;
    padding-block-start: var(--ds-spacing-1200, 3rem);
    padding-block-end: var(--ds-spacing-1600, 4rem);
    padding-inline: 1rem;
}

@media (1024px <= width) {
    .info-page {
        padding-inline: 60px;
    }
}

.info-container {
    max-width: 760px;
    margin: 0 auto;
}

.info-hero {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: var(--ds-spacing-600, 1.5rem);
    margin-block-end: var(--ds-spacing-1200, 3rem);
    padding-block-end: var(--ds-spacing-800, 2rem);
    border-block-end: 1px solid var(--ds-border-default, #e0e0e0);
}

.info-illustration {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    color: var(--ds-primary, #4A7C28);
    background: var(--ds-surface-base, #F5F5F0);
    border: 1px solid var(--ds-border-default, #e0e0e0);
    border-radius: 50%;
    font-size: 1.6rem;
}

.info-hero h1 {
    margin: 0 0 var(--ds-spacing-300, 0.75rem);
    color: var(--ds-text-primary);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
}

.info-subtitle {
    max-width: 620px;
    margin: 0;
    color: var(--ds-text-secondary, #5A5A50);
    font: var(--ds-body-l);
    line-height: 1.65;
}

.info-content {
    display: flex;
    flex-direction: column;
}

.info-section {
    padding-block: 0 var(--ds-spacing-1200, 3rem);
    border-block-end: 1px solid var(--ds-border-default, #e0e0e0);
}

.info-section + .info-section {
    padding-block-start: var(--ds-spacing-1200, 3rem);
}

.info-section:last-child {
    border-block-end: 0;
    padding-block-end: 0;
}

.info-section h2 {
    margin-block-start: 0;
    margin-block-end: var(--ds-spacing-400);
    color: var(--ds-text-primary);
    font: var(--ds-headline-s);
    font-weight: 600;
}

.info-section p {
    margin-block: 0 1.25em;
    color: var(--ds-text-secondary, #5A5A50);
    font: var(--ds-body-m);
    line-height: 1.75;
}

.info-steps,
.info-bullets {
    margin-block: var(--ds-spacing-400) 0;
    padding-inline-start: 1.5rem;
    color: var(--ds-text-primary);
    font: var(--ds-body-m);
    line-height: 1.7;
}

.info-steps li,
.info-bullets li {
    margin-block-end: 0.5rem;
    padding-inline-start: 0.25rem;
}

.info-steps li::marker,
.info-bullets li::marker {
    color: var(--ds-primary, #4A7C28);
    font-weight: 600;
}

.info-section-muted {
    margin-block: var(--ds-spacing-300, 0.75rem) var(--ds-spacing-1200, 3rem);
    padding: var(--ds-spacing-800, 2rem);
    border: 1px solid var(--ds-border-default, #e0e0e0);
    border-radius: var(--ds-radius-md, 8px);
    background: var(--ds-surface-base, #F5F5F0);
}

.info-section-muted h2 {
    font: var(--ds-title-l);
    font-weight: 600;
}

.info-action-row {
    margin-block-start: var(--ds-spacing-600);
}

.info-action-row .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.info-updated {
    margin-block-start: var(--ds-spacing-1600, 4rem);
    padding-block-start: var(--ds-spacing-600, 1.5rem);
    border-block-start: 1px solid var(--ds-border-default, #e0e0e0);
    color: var(--ds-text-tertiary, #999);
    font: var(--ds-body-s);
}

@media (600px <= width) {
    .info-hero h1 {
        font-size: 2.25rem;
    }
}

@media (max-width: 600px) {
    .info-hero {
        grid-template-columns: 1fr;
        gap: var(--ds-spacing-400);
    }

    .info-illustration {
        width: 48px;
        height: 48px;
        font-size: 1.35rem;
    }
}

/* ==========================================================================
   Error pages (404, 500)
   ========================================================================== */

.error-page {
    background: #fff;
    padding-block: var(--ds-spacing-1600);
    padding-inline: 1rem;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.error-container {
    text-align: center;
    max-width: 480px;
}

.error-code {
    font: var(--ds-display-l);
    color: var(--ds-pink-600, #C34E82);
    margin-block-end: var(--ds-spacing-200);
}

.error-container h1 {
    font: var(--ds-headline-m);
    margin-block-end: var(--ds-spacing-400);
}

.error-message {
    font: var(--ds-body-l);
    color: var(--ds-text-secondary);
    margin-block-end: var(--ds-spacing-800);
}

.error-actions {
    display: flex;
    gap: var(--ds-spacing-300);
    justify-content: center;
}

/* ==========================================================================
   Blog listing page
   ========================================================================== */

.blog-page {
    background: #fff;
    padding-block: var(--ds-spacing-1200);
    padding-inline: 1rem;
}

.blog-container {
    max-width: 720px;
    margin: 0 auto;
}

.blog-header {
    display: block;
    margin-block-end: 3rem;
    padding: 0;
    background: transparent;
}

.blog-header h1 {
    font-size: 1.75rem;
    font-weight: 700;
    margin-block-end: 0.5rem;
}

@media (600px <= width) {
    .blog-header h1 {
        font-size: 2.25rem;
    }
}

.blog-header p {
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--ds-text-secondary, #5A5A50);
}

.blog-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.blog-card {
    border-block-end: 1px solid var(--ds-border-default);
}

.blog-card-link {
    display: flex;
    flex-direction: column;
    gap: var(--ds-spacing-400);
    padding: var(--ds-spacing-800) 0;
    text-decoration: none;
    color: inherit;
    transition: opacity 0.15s;
}

.blog-card-link:hover {
    opacity: 0.7;
}

.blog-card-link h2 {
    font: var(--ds-title-l);
    color: var(--ds-text-primary);
}

@media (600px <= width) {
    .blog-card-link h2 {
        font: var(--ds-headline-s);
    }
}

.blog-card-desc {
    font: var(--ds-body-m);
    color: var(--ds-text-secondary);
    line-height: 1.6;
}

.blog-card-meta {
    display: flex;
    gap: var(--ds-spacing-400);
    font: var(--ds-body-s);
    color: var(--ds-text-tertiary);
    padding-block-start: var(--ds-spacing-200);
    border-block-start: 1px solid var(--ds-border-default);
    width: fit-content;
}

/* ==========================================================================
   Layout
   ========================================================================== */

header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ds-spacing-400) var(--ds-spacing-300);
    background: #fff;
}

header .brand {
    display: flex;
    align-items: center;
    gap: var(--ds-spacing-200);
    min-height: 40px;
}

header .brand .brand-title p {
    margin: 0;
    line-height: 1;
}

.brand-logo-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.brand-logo {
    display: block;
    height: 24px;
    width: auto;
    max-width: min(220px, 58vw);
    object-fit: contain;
}

header #header-auth-status,
header #header-auth-status .header-login {
    display: none;
}

@media (600px <= width) {
    .brand-logo {
        height: 28px;
        max-width: 260px;
    }

    header #header-auth-status {
        display: flex;
    }
}

@media (1024px <= width) {
    header {
        padding-inline: 60px;
    }

    header #header-auth-status .header-login {
        display: flex;
    }
}

@media (1280px <= width) {
    header {
        max-width: none;
        padding-inline: calc((100% - 1220px) / 2 + 60px);
    }
}

header .avatar-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    background: transparent;
}
header .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    box-shadow: 0 0 0 2px #fff;
}

header .dropdown-menu.user-menu {
    width: 18rem;
    border: none;
    padding: 0.75rem;
    box-shadow: 0 10px 30px rgba(0,0,0,.15);
    border-radius: 1rem;
}

header .user-menu .big-btn {
    border-radius: 999px; padding-block: .7rem;
}

header .user-menu .mini-link {
    font-size: .95rem;
}

footer {
    padding-inline: 1rem;
    padding-top: var(--ds-spacing-1200);
    margin-block-end: 32px;
}

@media (1024px <= width) {
    footer {
        padding-inline: 60px;
    }
}

@media (1280px <= width) {
    footer {
        max-width: 1220px;
        width: 100%;
        margin: 0 auto;
        margin-block-end: 32px;
    }
}

footer .socials {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.5rem;
    border-block-end: 1px solid var(--ds-border-default, #e0e0e0);
}

footer .links {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

@media (1024px <= width) {
    footer .links {
        flex-direction: row;
        justify-content: space-between;
        gap: 3rem;
    }
}

@media (1280px <= width) {
    footer .links {
        max-width: 1075px;
    }
}

footer .links h4 {
    margin-block-end: 4px;
}

footer .links a {
    color: var(--ds-text-primary, #1E1B19);
    width: fit-content;
}

footer .links .brand-title {
    margin-bottom: 0;
}

@media (1024px <= width) {
    footer .links .brand-title {
        margin-bottom: 80px;
    }
}

.footer-logo {
    height: 28px;
    width: auto;
}

footer .links .product,
footer .links .company,
footer .links .policy {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

footer .auth-container {
    display: flex;
    gap: 1rem;
    flex-direction: column;
    padding-inline: 1.5rem;
    padding-block-start: 1.5rem;
    padding-block-end: 12px;
    border-block-start: 1px solid var(--ds-border-default, #e0e0e0);
}

footer .footer-meta {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.footer-copyright {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.footer-logo-sm {
    height: 16px;
    width: auto;
}

footer .footer-credit {
    font-size: 0.75rem;
}

footer .footer-credit a {
    text-decoration: none;
}

footer .footer-credit a:hover {
    text-decoration: underline;
}

@media (600px <= width) {
    footer .auth-container {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

.brand-title p {
    color: var(--ds-primary, #4A7C28);
}

.divider {
    border: 1px solid var(--ds-border-default, #e0e0e0);
    height: 36px;
}

.home {
    display: flex;
    flex-direction: column;
    padding: 0;
    /* Clip the sideways spread of the section-edge ellipses (they run to -20%
       left/right plus an 80px box-shadow) so they never add a horizontal
       scrollbar. `clip` leaves the vertical axis visible, so the Supporter's
       closing ellipse can still reach down into the FAQ. */
    overflow-x: clip;
}

.home section {
    background: #F9F8F8;
    display: flex;
    flex-direction: column;
    padding-block-end: var(--ds-spacing-1600);
}

.home section[id] {
    scroll-margin-top: 24px;
}

.home .btn-actions {
    display: flex;
    flex-direction: column;
    gap: var(--ds-spacing-300);
    align-self: center;
    width: 100%;
}

@media (600px <= width) {
    .home .btn-actions {
        max-width: 400px;
    }
}

/* Section-edge curves alternate down the page: this first one opens DOWNWARD
   (the white hero sags into the grey proof strip at the centre), and every
   curve after it flips against the previous one — up into the grey band
   (.home .benefits:after), down into the dark articles block, up into the
   Supporter, down into the FAQ, up into the footer. */
.custom-shape-divider-top {
    /* White above the path so the hero's surface runs down to the curve;
       the grey path fill below belongs to the proof strip. */
    background: #fff;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.custom-shape-divider-top svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 20px;
}

.custom-shape-divider-top .shape-fill {
    fill: #F9F8F8;
}

.custom-shape-divider-bottom {
    /* Rotated so the footer's cream domes UP into the grey contact section —
       opposite of the sage-into-FAQ curve above it (the alternating rhythm). */
    background: var(--ds-surface-base, #F5F5F0);
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}

.custom-shape-divider-bottom svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 20px;
}

.custom-shape-divider-bottom .shape-fill {
    fill: #F9F8F8;
}

@media (1024px <= width) {
    .custom-shape-divider-top svg,
    .custom-shape-divider-bottom svg {
        height: 40px;
    }
}

@media (1280px <= width) {
    .custom-shape-divider-top svg,
    .custom-shape-divider-bottom svg {
        height: 60px;
    }
}


.home .intro {
    padding-inline: 1rem;
    padding-block-start: 40px;
    background: #fff;
}

@media (1024px <= width) {
    .home .intro {
        padding-inline: 60px;
    }
}

.home .intro .hero-logo {
    display: block;
    margin: 0 auto;
    height: 48px;
    width: auto;
}

@media (600px <= width) {
    .home .intro .hero-logo {
        height: 72px;
    }
}

@media (1024px <= width) {
    .home .intro .hero-logo {
        height: 96px;
    }
}

.home .intro .description {
    margin-block-start: var(--ds-spacing-600);
    margin-block-end: var(--ds-spacing-800);
    font: var(--ds-headline-m);
    text-align: center;
    text-wrap: balance;
}

@media (600px <= width) {
    .home .intro .description {
        font: var(--ds-headline-l);
    }
}

@media (1024px <= width) {
    .home .intro .description {
        max-width: 720px;
        align-self: center;
    }
}

.home .intro .hero-sub {
    margin-block-start: var(--ds-spacing-600);
    margin-block-end: var(--ds-spacing-400);
    font: var(--ds-body-m);
    text-align: center;
    color: var(--ds-text-secondary, #5A5A50);
}

.home .intro .hero-actions {
    margin-block-start: var(--ds-spacing-800);
}

/* Sits under the assurance line while the CTA opens a test programme. Quieter
   than the assurance row on purpose: it qualifies the offer, it is not part of
   the pitch. Disappears on its own once the public listings go live. */
.home .intro .hero-beta-note {
    max-width: 620px;
    margin: var(--ds-spacing-300) auto 0;
    color: var(--ds-text-tertiary, #7E726A);
    font: var(--ds-body-s);
    line-height: 1.7;
    text-align: center;
    text-wrap: balance;
}

.home .intro .hero-assurance {
    max-width: 720px;
    margin: var(--ds-spacing-400) auto 0;
    color: var(--ds-text-tertiary, #786F67);
    font: var(--ds-body-s);
    line-height: 1.7;
    text-align: center;
    text-wrap: balance;
}

@media (600px <= width) {
    .home .intro .hero-actions {
        flex-direction: row;
        max-width: 560px;
    }

    .home .intro .hero-actions .btn {
        flex: 1;
    }
}

@media (600px <= width) {
    .home .intro .hero-sub {
        font: var(--ds-body-l);
    }
}

@media (1024px <= width) {
    .home .intro .hero-sub {
        max-width: 640px;
        align-self: center;
    }
}

.home .proof-strip {
    background: #F9F8F8;
    padding-block: var(--ds-spacing-800);
    padding-inline: 1rem;
    text-align: center;
}

.home .proof-strip > div {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--ds-spacing-300) var(--ds-spacing-600);
    font: var(--ds-title-m);
    color: var(--ds-text-secondary, #5A5A50);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.75rem;
    /* Share the 1220px column the rest of the band uses, so the strip's edges
       line up with the heading and steps below it instead of spanning wider. */
    max-width: 1220px;
    margin-inline: auto;
}

.home .proof-strip .proof-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--ds-text-secondary, #5A5A50);
    display: none;
}

.home .proof-strip .proof-number {
    color: #A53B6A;
    font-style: normal;
    font-weight: 700;
}

@media (600px <= width) {
    .home .proof-strip .proof-dot {
        display: inline-block;
    }

    .home .proof-strip > div {
        font: var(--ds-title-m);
    }
}

/* The photograph IS the brand metaphor — a tree whose roots are exposed. The image
   is 3:2 while this box is much wider, so `cover` throws away most of the height:
   anchoring it to the bottom keeps the trunk and the root system in frame instead
   of cropping to canopy and fog.

   The white veil only has to make the statement readable, so it stays fully
   transparent over the top half and ramps up under the text. The previous ramp
   started at 40% and reached opaque white by 85%, which erased the roots the whole
   image exists to show. Text is anchored to the bottom (where the veil is near
   opaque) rather than centred over the darkest part of the photo. */
.home .intro .hero-section {
    position: relative;
    width: 100%;
    max-width: 343px;
    margin: 0 auto;
    border-radius: 32px;
    overflow: hidden;
    background:
            linear-gradient(180deg,
                rgba(255, 255, 255, 0) 0%,
                rgba(255, 255, 255, 0.08) 40%,
                rgba(255, 255, 255, 0.7) 60%,
                rgba(255, 255, 255, 0.95) 76%,
                rgba(255, 255, 255, 1) 90%),
            url('/images/hero-bg-mobile-d2f9f83ec6faf065f50cf3d5f00525ae.webp') 50% 100%/cover no-repeat #ffffff;
    min-height: 230px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

@media (600px <= width) {
    .home .intro .hero-section {
        max-width: 1000px;
        min-height: 320px;
        background-image:
                linear-gradient(180deg,
                    rgba(255, 255, 255, 0) 0%,
                    rgba(255, 255, 255, 0.08) 40%,
                    rgba(255, 255, 255, 0.7) 60%,
                    rgba(255, 255, 255, 0.95) 76%,
                    rgba(255, 255, 255, 1) 90%),
                url('/images/hero-bg-f66b543a45b8445cfd3abc80adcd849e.webp');
    }
}

@media (1024px <= width) {
    .home .intro .hero-section {
        min-height: 420px;
    }
}

@media (1280px <= width) {
    .home .intro .hero-section {
        min-height: 440px;
    }
}


.home .intro  .hero-content {
    position: relative;
    z-index: 2;
    padding: 1rem;
    text-align: center;
    width: 100%;
    max-width: 860px;
}

@media (600px <= width) {
    .home .intro  .hero-content {
        padding: 2rem;
    }
}

/* Bottom-anchored over the photo, the statement needs more clearance than the
   symmetric 2rem or its descenders sit on the frame edge. */
@media (1024px <= width) {
    .home .intro  .hero-content {
        padding-block-end: 3.5rem;
    }
}

.home .intro .hero-content .hero-statement {
    color: #222;
    margin: 0;
    font: var(--ds-headline-m);
    text-align: center;
    text-wrap: balance;
}

@media (600px <= width) {
    .home .intro .hero-content .hero-statement {
        font: var(--ds-display-s);
    }
}

@media (1024px <= width) {
    .home .intro .hero-content .hero-statement {
        font: var(--ds-display-m);
    }
}

/* ==========================================================================
   App Preview (phone carousel)
   ========================================================================== */

/* White, and its own section: the screenshots sit AFTER the grey band (the
   proof strip, the ritual steps, and what they change). The curved edge
   between the two is drawn by the benefits section above (.home
   .benefits:after — the white dome rising into the grey), so this section
   starts flat; its top padding is pure breathing room under that curve. */
.home .app-preview {
    background: #fff;
    padding-inline: 1rem;
    padding-block: 50px var(--ds-spacing-1600);
    position: relative;
    overflow: hidden;
}

@media (1024px <= width) {
    .home .app-preview {
        padding-inline: 60px;
    }
}

@media (1280px <= width) {
    .home .app-preview > div {
        max-width: 1220px;
        margin: 0 auto;
        width: 100%;
    }
}

.home .app-preview h2 {
    font: var(--ds-headline-m);
    text-align: center;
    margin-block-end: var(--ds-spacing-300);
    text-wrap: balance;
}

@media (600px <= width) {
    .home .app-preview h2 {
        font: var(--ds-headline-l);
    }
}

.home .section-kicker {
    margin-block-end: var(--ds-spacing-300);
    color: var(--ds-primary, #4A7C28);
    font: var(--ds-title-m);
    letter-spacing: 0.08em;
    text-align: center;
    text-transform: uppercase;
}

.home .section-lede {
    max-width: 620px;
    margin: 0 auto var(--ds-spacing-800);
    color: var(--ds-text-secondary, #5A5A50);
    font: var(--ds-body-m);
    line-height: 1.7;
    text-align: center;
    text-wrap: balance;
}

.home .app-preview-description {
    text-align: center;
    max-width: 500px;
    margin: 0 auto;
}

.home .app-preview-description h3 {
    font: var(--ds-title-l);
    margin-block-end: var(--ds-spacing-200);
}

.home .app-preview-description p {
    font: var(--ds-body-m);
    color: var(--ds-text-secondary, #5A5A50);
}

@media (600px <= width) {
    .home .app-preview-description h3 {
        font: var(--ds-headline-s);
    }
    .home .app-preview-description p {
        font: var(--ds-body-l);
    }
}

.home .for-whom {
    padding-inline: 1rem;
    /* Grey, continuing the band the proof strip opens: the claims, then how the
       ritual works, then what it changes, all read as one section before the
       screenshots stand on their own white surface below. */
    background: #F9F8F8;
}

@media (600px <= width) {
    .home .for-whom {
        padding-block-start: var(--ds-spacing-1600);
    }
}

@media (1024px <= width) {
    .home .for-whom {
        padding-inline: 60px;
    }
}

@media (1280px <= width) {
    .home .for-whom > div {
        max-width: 1220px;
        margin: 0 auto;
        width: 100%;
    }
}

.home .for-whom h2 {
    margin-block-end: var(--ds-spacing-1600);
}

@media (600px <= width) {
    .home .for-whom h2 {
        font: var(--ds-display-s);
    }
}

/* Centred on wide screens to match the benefits heading in the same band; the
   steps and cards below stay left-aligned in their columns. */
@media (1024px <= width) {
    .home .for-whom h2 {
        text-align: center;
    }
}

.home .for-whom .list-container {
    display: flex;
    align-items: baseline;
    flex-direction: column;
    gap: var(--ds-spacing-1200);
}

.home .for-whom .list-container .list-item {
    display: flex;
    flex-direction: row;
    gap: var(--ds-spacing-600);
}

.home .for-whom .list-container .list-item .number {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
    color: #667F53;
    min-width: 3.5rem;
}

@media (600px <= width) {
    .home .for-whom .list-container .list-item {
        flex-direction: column;
    }

    /* Once the number stacks above its step, a short sage rule turns it into a
       clear step marker and gives each column a consistent visual anchor. */
    .home .for-whom .list-container .list-item .number {
        width: fit-content;
        padding-block-end: var(--ds-spacing-300);
        border-bottom: 2px solid rgba(102, 127, 83, 0.3);
    }
}

@media (1024px <= width) {
    .home .for-whom .list-container {
        flex-direction: row;
    }

    .home .for-whom .list-container .list-item {
        flex: 1;
    }
}

.home .for-whom .list-container .list-item h3 {
    font: var(--ds-title-l);
}

@media (600px <= width) {
    .home .for-whom .list-container .list-item h3 {
        font: var(--ds-headline-s);
    }
}

.home .for-whom .list-container .list-item .list-item-description {
    font: var(--ds-body-m);
}

@media (600px <= width) {
    .home .for-whom .list-container .list-item .list-item-description {
        font: var(--ds-body-l);
    }
}

.home .benefits {
    background: #F9F8F8;
    padding-inline: 1rem;
    /* Closes the grey band with the page's curve flipped UPWARD: the white
       ellipse below (:after) straddles this section's bottom edge, so its top
       half domes up into the grey — the opposite direction of the hero curve
       above and the articles curve below (the alternating rhythm). Extra
       bottom padding keeps the last cards clear of the dome (half the
       ellipse height per breakpoint); overflow clips the ellipse's lower
       half and its -20% sideways overhang. */
    position: relative;
    overflow: hidden;
    padding-block-end: calc(var(--ds-spacing-1600, 4rem) + 30px);
}

.home .benefits:after {
    content: '';
    position: absolute;
    left: -20%;
    right: -20%;
    bottom: 0;
    height: 60px;
    transform: translateY(50%);
    border-radius: 100%;
    background: #fff;
}

@media (1024px <= width) {
    .home .benefits {
        padding-inline: 60px;
        padding-block-end: calc(var(--ds-spacing-1600, 4rem) + 50px);
    }
    .home .benefits:after { height: 100px; }
}

@media (1280px <= width) {
    .home .benefits > div {
        max-width: 1220px;
        margin: 0 auto;
        width: 100%;
    }
    .home .benefits { padding-block-end: calc(var(--ds-spacing-1600, 4rem) + 75px); }
    .home .benefits:after { height: 150px; }
}

.home .benefits > div > h2 {
    font: var(--ds-headline-m);
    margin-block-end: var(--ds-spacing-1200);
}

@media (600px <= width) {
    .home .benefits > div > h2 {
        font: var(--ds-headline-l);
    }
}

@media (1024px <= width) {
    .home .benefits > div > h2 {
        text-align: center;
    }
}

.home .benefits .benefit-item {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.home .benefits .benefit-header {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.home .benefits .benefit-header i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    min-height: 1.5rem;
    margin-top: 0.25rem;
}

.home .benefits .benefit-header h3 {
    font: var(--ds-headline-s);
}

@media (600px <= width) {
    .home .benefits .benefit-header h3 {
        font: var(--ds-headline-m);
    }
}

.home .benefits .benefit-description {
}

.home .benefits .benefit-description p {
    margin-inline-start: 3rem;
    font: var(--ds-body-s);
}

@media (600px <= width) {
    .home .benefits .benefit-description p {
        font: var(--ds-body-m);
    }
}

@media (1024px <= width) {
    .home .benefits .benefits-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
    }

    .home .benefits .benefits-container .benefit-item {
        padding: 32px;
    }
}

@media (1280px <= width) {
    .home .benefits .benefits-container {
        max-width: 1220px;
        margin: 0 auto;
        width: 100%;
    }
}

/* Supporter — mission + pricing. Mirrors the app paywall: yearly is the hero
   (emphasized primary border), monthly a visible lower-weight decoy. */
.home .supporter {
    padding: 60px 1rem;
    /* Warm sage tint (not the neutral tones the other sections share) so the
       "support" ask reads as its own moment. Same sage as the product preview, so
       the two "QuietRoots talking about itself" moments match. Shared with the
       articles section so the dark block's ellipses curve into it;
       position:relative anchors the closing ellipse (:after). */
    background: #EEF2EA;
    position: relative;
}

/* Sage-tint legibility is handled at each text rule below (primary ink for the
   lede and includes, secondary for the small notes) so it wins by cascade
   order — an override block here loses to those later rules. */

/* Every curved section edge on the page is the same shape: the border-radius:100%
   box-shadow ellipse used by the dark articles block (.home .articles-inner
   :before/:after). The articles block keeps its native symmetric top/bottom
   ellipses (its bottom padding is restored — see .home .articles — so the
   :before bottom curve is not clipped) and floats on the sage it shares with the
   Supporter. The FAQ then opens with the same ellipse inverted, carrying the
   Supporter's sage down into the cream. It is attached to the FAQ (not the
   Supporter) and clipped by the FAQ's overflow, so ONLY the single downward curve
   shows — no stray second edge from the box-shadow — and it never covers the
   heading below (which the FAQ's top padding clears). */
.home .faq:before {
    content: '';
    position: absolute;
    left: -20%;
    right: -20%;
    bottom: 100%;                     /* the ellipse sits just above the FAQ; its
                                         80px box-shadow dips into the cream below */
    height: 60px;
    border-radius: 100%;
    box-shadow: 0 0 0 80px #EEF2EA;   /* sage, continuing the Supporter above */
}

@media (1024px <= width) {
    .home .faq:before { height: 100px; }
}

@media (1280px <= width) {
    .home .faq:before { height: 150px; }
}

/* App-preview lightbox — tap the centre phone to see the app screen full-size. */
.app-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(20, 18, 16, 0.86);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4vh 4vw;
    cursor: zoom-out;
}

.app-lightbox[hidden] { display: none; }

.app-lightbox img {
    max-width: 100%;
    max-height: 92vh;
    width: auto;
    height: auto;
    border-radius: 20px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
    cursor: default;
}

.app-lightbox-close {
    position: absolute;
    top: 16px;
    right: 20px;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 1.7rem;
    line-height: 1;
    cursor: pointer;
}

.app-lightbox-close:hover { background: rgba(255, 255, 255, 0.26); }

@media (1024px <= width) {
    .home .supporter {
        padding-inline: 60px;
    }
}

@media (1280px <= width) {
    .home .supporter > div {
        max-width: 1220px;
        margin: 0 auto;
        width: 100%;
    }
}

.home .supporter h2 {
    font: var(--ds-headline-m);
    margin-block-end: var(--ds-spacing-800);
}

@media (600px <= width) {
    .home .supporter h2 {
        font: var(--ds-headline-l);
    }
}

.home .supporter .supporter-lede {
    font: var(--ds-body-m);
    color: var(--ds-text-primary);
    max-width: 46ch;
    margin-block-end: var(--ds-spacing-1200);
}

.home .supporter .plans {
    display: grid;
    gap: 1rem;
    margin-block-end: var(--ds-spacing-1200);
}

@media (600px <= width) {
    .home .supporter .plans {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }
}

.home .supporter .plan {
    background: #FFFFFF;
    border: 1px solid var(--ds-border-default, #e0e0e0);
    border-radius: var(--ds-radius-lg);
    padding: 1.5rem;
}

.home .supporter .plan-hero {
    border: 2px solid var(--ds-primary, #4A7C28);
}

.home .supporter .plan-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-block-end: 0.75rem;
}

.home .supporter .plan-name {
    font: var(--ds-headline-s);
}

.home .supporter .plan-badge {
    font: var(--ds-body-s);
    font-weight: 600;
    color: var(--ds-primary, #4A7C28);
    background: rgba(74, 124, 40, 0.12);
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    white-space: nowrap;
}

.home .supporter .plan-price {
    font: var(--ds-headline-m);
    margin: 0 0 0.4rem;
}

.home .supporter .plan-price span {
    font: var(--ds-body-s);
    color: var(--ds-text-tertiary);
}

.home .supporter .plan-trial {
    font: var(--ds-body-s);
    font-weight: 600;
    color: var(--ds-primary, #4A7C28);
    margin: 0;
}

.home .supporter .plan-note {
    font: var(--ds-body-s);
    color: var(--ds-text-secondary);
    margin: 0;
}

.home .supporter .supporter-includes {
    font: var(--ds-body-m);
    /* Primary ink, not the muted secondary: on the sage tint the value line
       must read clearly next to the pricing. */
    color: var(--ds-text-primary);
    max-width: 54ch;
    margin-block-end: 0.6rem;
}

.home .articles {
    padding-inline: 1rem;
    position: relative;
    overflow: hidden;
    padding: 50px 0;
    /* White at the top so the dark block's :after top ellipse curves into the
       white app-preview above (no green sliver there); sage at the bottom so its
       :before bottom ellipse curves into the sage Supporter. The hard split sits
       at 50%, hidden behind the full-bleed dark block. */
    background: linear-gradient(to bottom, #fff 50%, #EEF2EA 50%);
}

.home .articles-inner {
    padding-block: 120px;
    padding-inline: 1rem;
    position: relative;
    background: #1E1B19;
    height: 100%;
}

@media (1024px <= width) {
    .home .articles-inner {
        padding-inline: 60px;
    }
}

@media (1280px <= width) {
    .home .articles .articles-inner > div {
        max-width: 1220px;
        margin: 0 auto;
        width: 100%;
    }
}

.home .articles-inner .articles-headline,
.home .articles-inner .articles-description {
    max-width: 720px;
    margin: 0 auto;
}

.home .articles-inner .articles-headline {
    font: var(--ds-headline-l);
    color: #fff;
    margin-block-end: var(--ds-spacing-800);
}

@media (600px <= width) {
    .home .articles-inner .articles-headline {
        font: var(--ds-display-s);
    }
}

.home .articles-inner .articles-description {
    font: var(--ds-body-m);
    text-align: right;
    margin-block-end: 120px;
}

.home .articles-inner p {
    color: #fff;
}

.home .articles-inner:before,
.home .articles-inner:after {
    box-shadow: 0 0 0 80px #1E1B19;
    border-radius: 100%;
    position: absolute;
    height: 60px;
    content: '';
    right: -20%;
    left: -20%;
    top: 100%;
}

@media (1024px <= width) {
    .home .articles-inner:before,
    .home .articles-inner:after {
        height: 100px;
    }
}

@media (1280px <= width) {
    .home .articles-inner:before,
    .home .articles-inner:after {
        height: 150px;
    }
}

.home .articles-inner:after {
    bottom: 100%;
    top: auto;
}

.home .articles .articles-inner .link {
    color: var(--ds-primary-light, #E8F0E0);
}

.home .articles .articles-inner .article-items {
    display: flex;
    flex-direction: column;
    margin-block-start: var(--ds-spacing-1600);
    gap: var(--ds-spacing-600);
}

@media (1024px <= width) {
    .home .articles .articles-inner .article-items {
        flex-direction: row;
    }
}

.home .articles .article-card {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    border-radius: 32px;
    overflow: hidden;
    background: #1E1B19;
    min-height: 320px;
    display: flex;
    align-items: end;
    justify-content: center;
}

@media (1280px <= width) {
    .home .articles .article-card {
        min-height: 530px;
    }
}

.home .articles .article-card:after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(30, 27, 25, 0) 10%, rgba(30, 27, 25, 0.6) 60%, rgba(30, 27, 25, 1) 85%);
    pointer-events: none;
}

.home .articles .article-card-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home .articles .article-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: relative;
    z-index: 2;
    padding: 12px;
    text-align: left;
}

.home .articles .article-content blockquote {
    color: #fff;
    margin: 0;
    quotes: "“" "”";
    font: var(--ds-title-l);
}

@media (600px <= width) {
    .home .articles .article-content blockquote {
        font: var(--ds-headline-s);
    }
}

.home .articles .article-content p {
    color: #fff;
    font: var(--ds-body-m);
}

@media (600px <= width) {
    .home .articles .article-content p {
        font: var(--ds-body-l);
    }
}

.home .faq {
    padding-inline: 1rem;
    /* Empty gap above "Questions people ask": clears the sage cap that dips in
       from the Supporter (its 80px box-shadow) and keeps clean breathing room
       above the heading. overflow:hidden clips that cap to a single downward
       curve (no stray second edge). */
    padding-block-start: 130px;
    position: relative;
    overflow: hidden;
    background: #F9F8F8;
}

@media (1024px <= width) {
    .home .faq {
        padding-inline: 60px;
    }
}

@media (1024px <= width) {
    .home .faq > div {
        max-width: 670px;
        margin: 0 auto;
        width: 100%;
    }
}

.home .faq h2 {
    margin-block-end: 2rem;
    text-align: center;
    font: var(--ds-headline-l);
}

@media (600px <= width) {
    .home .faq h2 {
        font: var(--ds-display-s);
    }
}

.home .contact-us {
    background: #F9F8F8;
    padding-inline: 1rem;
    padding-block-end: var(--ds-spacing-1600);
}

@media (1024px <= width) {
    .home .contact-us {
        padding-inline: 60px;
    }
}

.home .contact-us h2 {
    margin-block-end: var(--ds-spacing-800);
    font: var(--ds-headline-l);
}

@media (600px <= width) {
    .home .contact-us h2 {
        font: var(--ds-display-s);
    }
}

@media (1024px <= width) {
    .home .contact-us h2 {
        max-width: 700px;
        margin: 0 auto;
        margin-block-end: var(--ds-spacing-800);
    }
}

.phone-carousel-container {
    text-align: center;
    padding-block-end: 40px;
    position: relative;
}

.phones-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-bottom: 24px;
    position: relative;
    height: auto;
    touch-action: pan-y;
}

.phone-container {
    position: relative;
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.phone-mockup {
    width: 286px;
    aspect-ratio: 750 / 1673;
    position: relative;
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: pointer;
}

.phone-screen {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.screen-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: bold;
    color: white;
    position: relative;
}

/* Stan środkowego telefonu (aktywny) */
.phone-container.active {
    transform: scale(1);
    z-index: 10;
}

.phone-container.active .phone-mockup {
    opacity: 1;
    filter: blur(0px);
    transform: translateY(0);
}

/* Stan bocznych telefonów */
.phone-container.side {
    transform: scale(0.8);
    z-index: 5;
}

.phone-container.side .phone-mockup {
    opacity: 0.74;
    transform: translateY(20px);
}

.phone-container.side:hover .phone-mockup {
    opacity: 0.92;
    transform: translateY(12px);
}

/* Kontrolki nawigacji */
.phone-carousel-container .nav-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    max-width: 560px;
    margin: 0 auto;
}

.phone-carousel-container .screen-count {
    min-width: 48px;
    color: #665D57;
    font: var(--ds-body-s);
    font-variant-numeric: tabular-nums;
}

footer .dropdown .btn {
    color: #665D57;
}

.phone-carousel-container .nav-button {
    opacity: 0.72;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    color: var(--ds-text-primary, #1E1B19);
    background: var(--ds-surface-overlay, #fff);
    border: 1px solid var(--ds-border-default, #e0e0e0);
    border-radius: 50%;
    cursor: pointer;
    transition: opacity .15s ease, box-shadow .15s ease;
    box-shadow: var(--ds-shadow-sm);
}

.phone-carousel-container .nav-button:hover {
    opacity: 1;
    box-shadow: var(--ds-shadow-md);
}

.phone-carousel-container .nav-button.nav-next {
    right: -8px;
}

.phone-carousel-container .nav-button.nav-prev {
    left: -8px;
}

@media (600px <= width) {
    .phone-carousel-container .nav-button.nav-next {
        right: -24px;
    }
    .phone-carousel-container .nav-button.nav-prev {
        left: -24px;
    }
}

/* Wskaźniki */
.phone-carousel-container .indicators {
    width: 100%;
    display: flex;
    gap: 2px;
    align-items: center;
    justify-content: center;
}

.phone-carousel-container .indicator {
    padding: 0;
    border: 0;
    cursor: pointer;
    background: transparent;
    margin: 0;
    height: 28px;
    width: 100%;
    position: relative;
}

.phone-carousel-container .indicator:before {
    content: '';
    position: absolute;
    inset: 11px 3px;
    border-radius: 4px;
    background-color: var(--ds-surface-hover, #DDDCD7);
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.phone-carousel-container .indicator.active:before {
    background-color: var(--ds-primary, #4A7C28);
    transform: scaleY(1.6);
}

@media (600px <= width) {
    .phone-carousel-container .indicators {
        margin: 0 auto;
    }
}

/* The section claims "the real app, not a mock-up", so the centre screenshot has to
   be readable enough to back that up. At 286px a 750px-wide capture renders at 0.38x
   and the app's own body text drops under 6px. The 1220px display box has room for
   320px centre + two 256px sides + gaps (~1088px), so the widest breakpoint buys the
   screenshots ~12% more pixel without pushing the carousel past one viewport. */
@media (1280px <= width) {
    .phone-carousel-container .phone-mockup {
        width: 320px;
    }
}

/* Responsive */
@media (max-width: 1024px) {
    .phone-carousel-container .phones-display {
        gap: 16px;
    }

    .phone-carousel-container .phone-mockup {
        width: 230px;
    }
}

@media (max-width: 720px) {
    .phone-carousel-container .phone-container.side {
        display: none;
    }

    .phone-carousel-container .phone-mockup {
        width: min(68vw, 260px);
    }

    .phone-carousel-container .nav-button.nav-next {
        right: 0;
    }

    .phone-carousel-container .nav-button.nav-prev {
        left: 0;
    }
}

/* ============================================================
   Invitation preview page — brand-consistent, platform-aware CTA
   ============================================================ */
.invite-page {
    max-width: 560px;
    margin: 0 auto;
    padding: var(--ds-spacing-1200) var(--ds-spacing-400);
}

.invite-card {
    background: #fff;
    border: 1px solid var(--ds-border-default);
    border-radius: var(--ds-radius-lg);
    padding: var(--ds-spacing-1200) var(--ds-spacing-800);
    text-align: center;
}

.invite-kicker {
    color: var(--ds-text-secondary);
    font: var(--ds-body-s);
    margin: 0 0 var(--ds-spacing-200);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.invite-title {
    color: var(--ds-text-primary);
    font: var(--ds-headline-m);
    font-weight: 500;
    line-height: 1.25;
    margin: 0 0 var(--ds-spacing-400);
    word-wrap: break-word;
}

.invite-from {
    color: var(--ds-text-secondary);
    font: var(--ds-body-m);
    margin: 0 0 var(--ds-spacing-800);
}

.invite-from strong {
    color: var(--ds-text-primary);
    font-weight: 500;
}

.invite-lead {
    color: var(--ds-text-primary);
    font: var(--ds-body-l);
    line-height: 1.6;
    margin: 0 0 var(--ds-spacing-800);
}

.invite-cta-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ds-spacing-400);
    margin-block-end: var(--ds-spacing-600);
}

.invite-desktop-hint {
    color: var(--ds-text-secondary);
    font: var(--ds-body-m);
    margin: 0 0 var(--ds-spacing-200);
}

.invite-store-row {
    display: flex;
    gap: var(--ds-spacing-400);
    flex-wrap: wrap;
    justify-content: center;
}

.btn-cta {
    min-width: 260px;
    min-height: 52px;
    padding: var(--ds-spacing-400) var(--ds-spacing-800);
    font: var(--ds-body-l);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ds-spacing-200);
}

.invite-hint {
    color: var(--ds-text-tertiary);
    font: var(--ds-body-s);
    margin: 0 0 var(--ds-spacing-600);
}

.invite-expiry {
    color: var(--ds-text-secondary);
    font: var(--ds-body-s);
    margin: var(--ds-spacing-400) 0 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.invite-expiry.is-urgent {
    color: var(--ds-pink-600);
    font-weight: 500;
}

.invite-alert {
    display: inline-block;
    padding: var(--ds-spacing-200) var(--ds-spacing-400);
    border-radius: var(--ds-radius-md);
    font: var(--ds-body-m);
    font-weight: 500;
    margin-block-end: var(--ds-spacing-400);
}

.invite-alert-warn {
    background: #F5E9D0;
    color: #8A5A1E;
}

.invite-alert-error {
    background: #F5D9D9;
    color: #9A2A2A;
}

.invite-secondary {
    margin-block-start: var(--ds-spacing-800);
    display: flex;
    gap: var(--ds-spacing-600);
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.invite-about {
    margin-block-start: var(--ds-spacing-800);
    padding: var(--ds-spacing-800) var(--ds-spacing-400);
    text-align: center;
}

.invite-about-title {
    font: var(--ds-title-m);
    color: var(--ds-text-primary);
    margin: 0 0 var(--ds-spacing-200);
    font-weight: 500;
}

.invite-about p {
    color: var(--ds-text-secondary);
    font: var(--ds-body-m);
    line-height: 1.6;
    margin: 0 0 var(--ds-spacing-300);
}

@media (max-width: 600px) {
    .invite-page {
        padding: var(--ds-spacing-600) var(--ds-spacing-200);
    }
    .invite-card {
        padding: var(--ds-spacing-800) var(--ds-spacing-400);
    }
    .btn-cta {
        min-width: 100%;
    }
}

/* ============================================================
   Passage poster — shown on /read/* fallback pages when the
   share URL carried the passage payload (text, attribution,
   author, tradition). Mirrors the in-app PassageShareCardScreen
   styling so the recipient sees the same quote framing whether
   they land in the app or in the browser.
   ============================================================ */
.passage-poster {
    margin: 0 auto var(--ds-spacing-800);
    max-width: 480px;
    padding: var(--ds-spacing-1200) var(--ds-spacing-600);
    border-radius: var(--ds-radius-lg);
    background:
        linear-gradient(135deg,
            rgba(125, 91, 255, 0.16) 0%,
            #fff 55%,
            rgba(125, 91, 255, 0.08) 100%);
    border: 1px solid rgba(125, 91, 255, 0.22);
    text-align: center;
}

.passage-poster-mark {
    display: block;
    font-size: 32px;
    line-height: 1;
    color: rgba(125, 91, 255, 0.7);
    margin-bottom: var(--ds-spacing-600);
}

.passage-poster-text {
    color: var(--ds-text-primary);
    font: var(--ds-body-l);
    font-style: italic;
    line-height: 1.6;
    letter-spacing: 0.2px;
    margin: 0 0 var(--ds-spacing-600);
    word-wrap: break-word;
}

.passage-poster-divider {
    width: 32px;
    height: 1px;
    margin: 0 auto var(--ds-spacing-300);
    background: rgba(125, 91, 255, 0.45);
}

.passage-poster-attribution {
    color: var(--ds-text-secondary);
    font: var(--ds-body-s);
    font-weight: 500;
    margin: 0 0 var(--ds-spacing-800);
}

.passage-poster-watermark {
    color: rgba(125, 91, 255, 0.7);
    font: var(--ds-body-s);
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin: 0;
}

@media (max-width: 600px) {
    .passage-poster {
        padding: var(--ds-spacing-800) var(--ds-spacing-400);
    }
    .passage-poster-text {
        font: var(--ds-body-m);
        font-style: italic;
    }
}

/* ============================================================
   Journey poster — variant of the passage poster used by the
   /journey/{code} share-link landing. Same gradient + watermark
   vocabulary, but tuned for a multi-passage thread (title +
   hook + traditions + length signal) rather than a single quote.
   ============================================================ */
.journey-poster {
    margin: 0 auto var(--ds-spacing-800);
    max-width: 480px;
    padding: var(--ds-spacing-1200) var(--ds-spacing-600);
    border-radius: var(--ds-radius-lg);
    background:
        linear-gradient(135deg,
            rgba(125, 91, 255, 0.16) 0%,
            #fff 55%,
            rgba(125, 91, 255, 0.08) 100%);
    border: 1px solid rgba(125, 91, 255, 0.22);
    text-align: center;
}

.journey-poster-mark {
    display: block;
    font-size: 28px;
    line-height: 1;
    color: rgba(125, 91, 255, 0.7);
    margin-bottom: var(--ds-spacing-600);
}

.journey-poster-title {
    color: var(--ds-text-primary);
    font: var(--ds-headline-m);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0.2px;
    margin: 0 0 var(--ds-spacing-400);
    word-wrap: break-word;
}

.journey-poster-hook {
    color: var(--ds-text-secondary);
    font: var(--ds-body-m);
    font-style: italic;
    line-height: 1.55;
    margin: 0 0 var(--ds-spacing-600);
}

.journey-traditions {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--ds-spacing-400);
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-spacing-200);
    justify-content: center;
}

.journey-traditions li {
    color: rgba(125, 91, 255, 0.85);
    font: var(--ds-body-s);
    font-weight: 600;
    letter-spacing: 0.4px;
    padding: 4px 10px;
    background: rgba(125, 91, 255, 0.08);
    border-radius: 16px;
}

.journey-meta {
    color: var(--ds-text-secondary);
    font: var(--ds-body-s);
    margin: 0 0 var(--ds-spacing-800);
}

.journey-poster-watermark {
    color: rgba(125, 91, 255, 0.7);
    font: var(--ds-body-s);
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin: 0;
}

.journey-benefits {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--ds-spacing-800);
    text-align: left;
}

.journey-benefits li {
    color: var(--ds-text-primary);
    font: var(--ds-body-m);
    line-height: 1.55;
    padding: var(--ds-spacing-200) 0 var(--ds-spacing-200) 28px;
    position: relative;
}

.journey-benefits li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: var(--ds-spacing-200);
    color: rgba(125, 91, 255, 0.85);
    font-weight: 700;
}

@media (max-width: 600px) {
    .journey-poster {
        padding: var(--ds-spacing-800) var(--ds-spacing-400);
    }
    .journey-poster-title {
        font: var(--ds-body-l);
        font-weight: 600;
    }
}

/* ============================================================
   Share-link card v3 — aligned with the rest of QR landing's
   visual language (atmospheric photography hero + soft 32px
   rounded surfaces + cream/sage palette). Used by
   /read /dailyPassage /journey fallbacks.

   The v2 paper-noise + bookplate + emboss aesthetic was
   stylistically off from the homepage hero (which uses a
   real photographic background with white fade overlay,
   border-radius: 32px, no texture). v3 matches that.

   Imagery strategy: every card opens with a hero image area
   sourced via Thymeleaf based on tradition / work code.
   Defaults to /images/hero-bg.webp (same asset homepage uses)
   when the work or tradition has no dedicated image. Drop a
   /images/share-<tradition>.webp into static/images/ and the
   controller picks it up — pure asset-pipeline upgrade, no
   code change needed for the n+1 tradition.
   ============================================================ */
.share-page {
    background: var(--ds-surface-base, #FAFAF7);
    min-height: 100vh;
    padding: clamp(24px, 6vw, 64px) clamp(16px, 4vw, 32px);
}

.share-page > .share-card {
    max-width: 640px;
    margin: 0 auto;
}

.share-card {
    position: relative;
    background: var(--ds-surface-overlay, #fff);
    border: 1px solid var(--ds-border-default, #D8CDB8);
    border-radius: 32px;
    overflow: hidden;
    /* Soft modern card shadow — matches the floating-card register
       used elsewhere on landing without the hard "vellum drop" of
       the v2 manuscript take. */
    box-shadow:
        0 12px 32px -12px rgba(46, 38, 28, 0.12),
        0 4px 12px -6px rgba(46, 38, 28, 0.06);
}

/* Hero image — atmospheric photo with a strong fade-to-card-bg
   gradient at the bottom so the title/quote underneath reads
   cleanly on its surface, not floating on the photo. Same
   gradient pattern as homepage .hero-section. */
.share-hero {
    width: 100%;
    height: clamp(160px, 28vw, 260px);
    background-color: var(--ds-surface-base, #FAFAF7);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    /* Bottom fade — passes the photo into the card surface so the
       boundary disappears. Mask + ::after layered overlay are
       both options; ::after kept simple for browser support. */
    position: relative;
}

.share-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.05) 35%,
        rgba(255, 255, 255, 0.55) 75%,
        var(--ds-surface-overlay, #fff) 100%
    );
}

.share-card-body {
    padding: clamp(24px, 5vw, 56px) clamp(24px, 5vw, 56px) clamp(32px, 6vw, 56px);
    text-align: center;
    /* Lift the card body slightly into the hero so the fade reads
       continuous, not stacked layers. */
    margin-top: clamp(-32px, -4vw, -16px);
    position: relative;
}

/* Quote — Cormorant Garamond italic, much larger than v2 to
   carry the desktop card. Pull-quote scale from editorial
   magazines (The Paris Review, Aperture). */
.share-quote {
    margin: 0;
    padding: 0;
    border: 0;
}

.share-quote p {
    color: var(--ds-text-primary, #1E1B19);
    font: italic 400 clamp(22px, 2.8vw, 32px) / 1.45 "Cormorant Garamond", Georgia, "Iowan Old Style", serif;
    letter-spacing: 0.003em;
    margin: 0;
    text-wrap: pretty;
    word-wrap: break-word;
}

/* Single hairline rule — short, centered, sage-tinted to tie
   the divider into the brand palette. */
.share-divider {
    width: 36px;
    height: 1px;
    margin: clamp(24px, 4vw, 36px) auto clamp(16px, 2.5vw, 24px);
    background: var(--ds-border-default, #C8BBA1);
}

/* Attribution — small caps tracked, sepia-toned, body-sans
   (Montserrat from --ds-font-family-primary). */
.share-attribution {
    color: var(--ds-text-secondary, #6E5F4A);
    font: 500 13px/1.4 var(--ds-font-family-primary, system-ui);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin: 0 0 clamp(32px, 5vw, 48px);
}

/* CTA — sage pill, scaled up from v2 (min-width 280, min-height
   56) so it reads as a confident primary action on desktop.
   Sage gradient + travelling arrow + focus ring kept from v2. */
.share-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 280px;
    min-height: 56px;
    padding: 16px 32px;
    font: 500 17px/1 var(--ds-font-family-primary, system-ui);
    letter-spacing: 0.01em;
    color: #fff;
    background: linear-gradient(180deg, #3A7A50 0%, var(--ds-primary, #2D5F3F) 100%);
    border: 0;
    border-radius: var(--ds-radius-lg, 16px);
    text-decoration: none;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.18) inset,
        0 8px 20px -6px rgba(45, 95, 63, 0.34),
        0 1px 2px rgba(46, 38, 28, 0.08);
    transition: transform 180ms ease, box-shadow 180ms ease,
                background 180ms ease;
}

.share-cta:hover {
    background: linear-gradient(180deg, #2F6A42 0%, var(--ds-primary-dark, #1E4A2E) 100%);
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.22) inset,
        0 14px 28px -8px rgba(45, 95, 63, 0.38),
        0 2px 4px rgba(46, 38, 28, 0.1);
}

.share-cta:hover .share-cta-arrow {
    transform: translateX(3px);
}

.share-cta:focus-visible {
    outline: 0;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.18) inset,
        0 0 0 4px rgba(45, 95, 63, 0.18),
        0 8px 20px -6px rgba(45, 95, 63, 0.34);
}

.share-cta:active {
    transform: translateY(0);
}

.share-cta-arrow {
    flex: 0 0 auto;
    transition: transform 180ms ease;
}

/* Microcopy — body sans, scaled up from v2 (16px not 14px) so
   it doesn't feel ribbon-tiny under the CTA on desktop. */
.share-microcopy {
    max-width: 460px;
    margin: clamp(20px, 3vw, 28px) auto 0;
    color: var(--ds-text-secondary, #6E5F4A);
    font: 400 16px/1.55 var(--ds-font-family-primary, system-ui);
}

.share-microcopy-warn {
    color: var(--ds-text-tertiary, #A89B85);
    font-style: italic;
}

/* Store row — separated from the primary CTA by a hairline, sits
   below as a muted text-link aisle. Slightly larger type than v2
   so it doesn't disappear visually but still reads as secondary. */
.share-store-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: clamp(40px, 6vw, 56px);
    padding-top: clamp(24px, 4vw, 32px);
    border-top: 1px solid var(--ds-border-default, rgba(216, 205, 184, 0.7));
}

.share-store-label {
    margin: 0;
    color: var(--ds-text-tertiary, #A89B85);
    font: 400 13px/1.4 var(--ds-font-family-primary, system-ui);
    letter-spacing: 0.04em;
}

.share-store-links {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    font: 500 15px/1 var(--ds-font-family-primary, system-ui);
}

.share-store-links a {
    color: var(--ds-primary-dark, #1E4A2E);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
    transition: border-color 160ms ease, color 160ms ease;
}

.share-store-links a:hover {
    color: var(--ds-primary, #2D5F3F);
    border-bottom-color: var(--ds-primary, #2D5F3F);
}

.share-store-sep {
    color: var(--ds-text-tertiary, #A89B85);
    font-size: 0.9em;
}

/* Journey hero — Cormorant title + Montserrat italic hook +
   tradition pills in soft sage tint + length-signal meta tag.
   Same scale-up as the quote: title clamp(30px, 5vw, 44px). */
.share-journey-title {
    color: var(--ds-text-primary, #1E1B19);
    font: 500 clamp(30px, 4.8vw, 44px) / 1.15 "Cormorant Garamond", Georgia, serif;
    letter-spacing: -0.01em;
    margin: 0 0 16px;
    text-wrap: balance;
}

.share-journey-hook {
    color: var(--ds-text-secondary, #6E5F4A);
    font: italic 400 17px/1.55 var(--ds-font-family-primary, system-ui);
    margin: 0 auto 28px;
    max-width: 480px;
}

.share-journey-traditions {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.share-journey-traditions li {
    color: var(--ds-primary-dark, #1E4A2E);
    font: 500 12px/1 var(--ds-font-family-primary, system-ui);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 6px 14px;
    background: var(--ds-primary-light, rgba(45, 95, 63, 0.08));
    border: 1px solid rgba(45, 95, 63, 0.16);
    border-radius: 999px;
}

.share-journey-meta {
    color: var(--ds-text-tertiary, #A89B85);
    font: 400 13px/1 var(--ds-font-family-primary, system-ui);
    letter-spacing: 0.06em;
    margin: 0;
}

@media (max-width: 600px) {
    .share-cta {
        min-width: 100%;
    }
}

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

    .phone-container,
    .phone-mockup,
    .phone-carousel-container .indicator:before,
    .share-cta,
    .share-cta-arrow,
    .share-store-links a {
        transition: none;
    }
    .share-cta:hover {
        transform: none;
    }
    .share-cta:hover .share-cta-arrow {
        transform: none;
    }
}