/* ==========================================================================
   Unfolded — shared brand stylesheet
   --------------------------------------------------------------------------
   Loaded by:
     - templates/index.html      (after index.css, BEFORE landing.css)
     - every brand page via templates/partials/head_brand.html
       (about, how-it-works, product, for-you, for-founders,
        for-organisations, privacy, terms) — those pages do NOT load
        index.css at all, so this file is their complete style sheet.

   Ownership note: the landing hero, the hero header and the
   "We remember less than we think" memory section are styled in
   static/landing.css. Nothing in this file targets them.

   Palette (only these values + alpha variations):
     paper        #F8F2E6
     warm-neutral #EEE2D6
     terracotta   #A15F4C   (CTAs, active states, line motifs, small labels)
     deep-rust    #7C4A38
     dark-brown   #2C2622
   Type: Newsreader (editorial display) · Instrument Sans (everything else)
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   --------------------------------------------------------------------------
   Declared on the two body classes rather than :root so they can never
   collide with the unrelated :root palette in index.css (which the landing
   page still loads). landing.css re-declares the same values for
   .landing-page — identical, so load order does not matter.
   ========================================================================== */

.brand-page,
.landing-page {
    --font-display: "Newsreader", serif;
    --font-body: "Instrument Sans", sans-serif;

    --paper: #f8f2e6;
    --paper-rgb: 248, 242, 230;
    --warm-neutral: #eee2d6;
    --warm-neutral-rgb: 238, 226, 214;
    --terracotta: #a15f4c;
    --terracotta-rgb: 161, 95, 76;
    --deep-rust: #7c4a38;
    --deep-rust-rgb: 124, 74, 56;
    --ink: #2c2622;
    --ink-rgb: 44, 38, 34;

    --rule: rgb(var(--ink-rgb) / 0.14);
    --rule-soft: rgb(var(--ink-rgb) / 0.08);
    --nav-h: 66px;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);

    /* Universal editorial page grid. Every marketing surface uses the same
       outer guides; individual sections only choose column spans. */
    --page-max-width: 1480px;
    --page-gutter: 64px;
    --grid-columns: 12;
    --grid-gap: 24px;
    --section-space: 120px;
    --section-space-compact: 80px;
    --content-measure: 34rem;
}

/* Shared browser chrome: selection + scrollbar use the Unfolded palette
   globally. Tokens fall back to the closed palette hex values so pages that
   do not mount `.landing-page` / `.brand-page` still resolve correctly. */
::selection {
    background: var(--terracotta, #a15f4c);
    color: var(--paper, #f8f2e6);
}
::-moz-selection {
    background: var(--terracotta, #a15f4c);
    color: var(--paper, #f8f2e6);
}

html {
    scrollbar-width: thin;
    scrollbar-color: var(--terracotta, #a15f4c) var(--paper, #f8f2e6);
}
html::-webkit-scrollbar {
    width: 10px;
}
html::-webkit-scrollbar-track {
    background: var(--paper, #f8f2e6);
}
html::-webkit-scrollbar-thumb {
    border: 2px solid var(--paper, #f8f2e6);
    border-radius: 999px;
    background: var(--terracotta, #a15f4c);
}
html::-webkit-scrollbar-thumb:hover {
    background: var(--deep-rust, #7c4a38);
}

@media (max-width: 1050px) {
    .brand-page,
    .landing-page {
        --page-gutter: 32px;
        --grid-columns: 8;
        --grid-gap: 20px;
        --section-space: 96px;
        --section-space-compact: 64px;
    }
}
@media (max-width: 760px) {
    .brand-page,
    .landing-page {
        --page-gutter: clamp(20px, 6vw, 28px);
        --grid-columns: 4;
        --grid-gap: 16px;
        --section-space: clamp(72px, 14vw, 104px);
        --section-space-compact: clamp(56px, 10vw, 80px);
        --stack-gap: 20px;
        --copy-cta-gap: 32px;
        font-size: 17px;
        line-height: 1.55;
    }

    /* Mobile display: ~44–64px fluid; body measure stays readable */
    .u-h1 {
        font-size: clamp(2.75rem, 10vw, 4rem);
        line-height: 1.08;
        letter-spacing: -0.03em;
        max-width: 100%;
        overflow-wrap: break-word;
        text-wrap: pretty;
        margin-bottom: 0;
    }
    .u-h2 {
        font-size: clamp(2.1rem, 8vw, 3rem);
        line-height: 1.1;
        letter-spacing: -0.028em;
        max-width: 100%;
        overflow-wrap: break-word;
        text-wrap: pretty;
    }
    .u-lede,
    .u-body {
        font-size: clamp(1.05rem, 3.6vw, 1.1875rem);
        line-height: 1.55;
        max-width: 38ch;
    }
    .u-h1 + .u-lede,
    .u-h2 + .u-lede,
    .u-h1 + .u-body,
    .u-h2 + .u-body,
    .page-head__title + .page-head__lede {
        margin-top: clamp(20px, 4vw, 28px);
    }
    .page-head__lede + .page-head__actions,
    .u-lede + .u-actions,
    .u-body + .u-actions {
        margin-top: clamp(28px, 5vw, 36px);
    }
    .u-section {
        padding-block: var(--section-space);
    }
    .page-head {
        padding-block: clamp(48px, 10vw, 72px) clamp(40px, 8vw, 56px);
    }
    .page-head__title {
        max-width: 100%;
    }
    .site-nav {
        padding: 18px var(--page-gutter);
    }
    .site-nav__burger {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
    }
    .u-actions {
        width: 100%;
        gap: 12px 16px;
    }
    .u-actions .u-btn {
        justify-content: center;
    }
    .legaldoc__toc a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 6px 0;
    }
    .flow {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .flow__step:not(:last-child)::after {
        margin-left: 4px;
    }
}

/* ==========================================================================
   2. BRAND PAGE BASE
   --------------------------------------------------------------------------
   Only applies to pages carrying class="brand-page" — the landing page is
   unaffected by anything in this block.
   ========================================================================== */

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

html:has(.brand-page) {
    scroll-behavior: smooth;
}

.brand-page {
    margin: 0;
    padding-top: var(--nav-h);
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Landing body: kill default UA margin (otherwise ~8px white gutters
   frame the full-bleed hero) and match brand paper under the fold. */
html:has(.landing-page) {
    background: var(--paper, #f8f2e6);
    margin: 0;
}
.landing-page {
    margin: 0;
    padding: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
.landing-page *,
.landing-page *::before,
.landing-page *::after {
    box-sizing: border-box;
}

.skip-to-main {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 200;
    padding: 10px 14px;
    border-radius: 4px;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 500;
    text-decoration: none;
    transform: translateY(-160%);
    transition: transform 0.18s var(--ease);
}
.skip-to-main:focus {
    transform: translateY(0);
    outline: 2px solid var(--terracotta);
    outline-offset: 2px;
}

.brand-page main [id] {
    scroll-margin-top: calc(var(--nav-h) + 24px);
}
.landing-page main [id] {
    scroll-margin-top: 88px;
}

.brand-page img {
    display: block;
    max-width: 100%;
}

.brand-page a {
    color: inherit;
}

.brand-page h1,
.brand-page h2,
.brand-page h3,
.brand-page h4,
.brand-page p,
.brand-page ul,
.brand-page ol,
.brand-page figure,
.brand-page blockquote {
    margin: 0;
}

.brand-page ul,
.brand-page ol {
    padding: 0;
    list-style: none;
}

/* ==========================================================================
   3. SHARED PRIMITIVES  (used by the landing page and every brand page)
   ========================================================================== */

.u-wrap {
    width: min(calc(100% - 2 * var(--page-gutter)), var(--page-max-width));
    margin-inline: auto;
}
.u-grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
    gap: var(--grid-gap);
}
.u-wrap--narrow {
    width: min(calc(100% - 2 * var(--page-gutter)), var(--content-measure));
}
.u-wrap--wide {
    width: min(calc(100% - 2 * var(--page-gutter)), var(--page-max-width));
}

/* Shared full-width mobile content guide. Full-bleed media may opt out, but
   copy, controls, and interactive tracks always start on this safe edge. */
.mobile-page-container {
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
    padding-inline: clamp(20px, 5vw, 24px);
}

.u-section {
    position: relative;
    padding-block: var(--section-space);
}
.u-section--paper {
    background: var(--paper);
    color: var(--ink);
}
.u-section--sand {
    background: var(--warm-neutral);
    color: var(--ink);
}
.u-section--dark {
    background: var(--ink);
    color: var(--paper);
}
.u-section--rust {
    background: var(--deep-rust);
    color: var(--paper);
}
.u-section--tight {
    padding-block: var(--section-space-compact);
}

/* Small terracotta section label ----------------------------------------- */
.u-label {
    display: block;
    margin: 0 0 clamp(20px, 2.4vw, 32px);
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--terracotta);
}
.u-section--dark .u-label,
.u-section--rust .u-label {
    color: rgb(var(--paper-rgb) / 0.62);
}

/* Editorial headings ------------------------------------------------------ */
.u-h1 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(3rem, 6vw, 5.6rem);
    line-height: 0.98;
    letter-spacing: -0.035em;
}
.u-h2 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(2.4rem, 4.4vw, 4.1rem);
    line-height: 1.02;
    letter-spacing: -0.032em;
}
.u-h3 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.5rem, 2.1vw, 2.05rem);
    line-height: 1.14;
    letter-spacing: -0.02em;
}
.u-h1 em,
.u-h2 em,
.u-h3 em {
    font-style: italic;
    font-weight: 500;
}
.u-h2--quiet {
    color: rgb(var(--ink-rgb) / 0.42);
}

.u-lede {
    font-family: var(--font-body);
    font-size: clamp(1.02rem, 1.25vw, 1.22rem);
    line-height: 1.55;
    color: rgb(var(--ink-rgb) / 0.78);
    max-width: 62ch;
}
.u-section--dark .u-lede,
.u-section--rust .u-lede {
    color: rgb(var(--paper-rgb) / 0.76);
}

.u-body {
    font-size: 1rem;
    line-height: 1.68;
    color: rgb(var(--ink-rgb) / 0.76);
    max-width: 66ch;
}
.u-body + .u-body {
    margin-top: 1.1em;
}

/* Hairline rule ----------------------------------------------------------- */
.u-rule {
    height: 1px;
    border: 0;
    background: var(--rule);
}

/* Arrow link -------------------------------------------------------------- */
.u-link {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--terracotta);
}
.u-link svg {
    display: block;
    width: 34px;
    height: 10px;
    transition: transform 0.2s var(--ease);
}
.u-link:hover svg,
.u-link:focus-visible svg {
    transform: translateX(5px);
}
.u-section--dark .u-link,
.u-section--rust .u-link {
    color: var(--paper);
}

/* Buttons ----------------------------------------------------------------- */
/* ─── Buttons: Apple-style ghost pill (matches navbar JOIN WAITLIST CTA) ──
   Every CTA on the site is a transparent pill with a 1.5px ink border —
   same language across landing, brand pages, and the nav. Sits on top of
   whatever Liquid Glass surface it lives on (the nav's own capsule, or
   nothing) without competing with it. */
.u-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 0;
    padding: 10px 22px;
    border: 1.5px solid var(--ink);
    border-radius: 100px;
    background: transparent;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition:
        background 0.2s var(--ease),
        border-color 0.2s var(--ease),
        color 0.2s var(--ease),
        transform 0.2s var(--ease);
}
.u-btn:hover {
    background: rgb(var(--ink-rgb) / 0.06);
    border-color: var(--ink);
    color: var(--ink);
    transform: translateY(-1px);
}
.u-btn svg {
    width: 20px;
    height: 9px;
    transition: transform 0.2s var(--ease);
}
.u-btn:hover svg {
    transform: translateX(4px);
}

/* Restore ink color on brand-page anchors (beats .brand-page a { color: inherit }) */
.brand-page a.u-btn {
    color: var(--ink);
}
.brand-page a.u-btn:hover {
    color: var(--ink);
}

/* Ghost variant — same look now, kept as alias for existing markup */
.u-btn--ghost {
    background: transparent;
    border-color: var(--ink);
    color: var(--ink);
}
.u-btn--ghost:hover {
    background: rgb(var(--ink-rgb) / 0.06);
    border-color: var(--ink);
    color: var(--ink);
}

/* Dark section / dark-hero — Liquid Glass pill with visible cream fill.
   Cream (paper) at 0.30 + saturate boost = warm golden tint on any warm
   photo behind, matches "START WITH A MEMORY" reference. */
.u-section--dark .u-btn,
.u-section--rust .u-btn,
.u-section--dark .u-btn--ghost,
.u-section--rust .u-btn--ghost,
[data-header-theme="light"] .u-btn,
[data-header-theme="light"] .u-btn--ghost {
    background: rgba(180, 130, 70, 0.35);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    backdrop-filter: blur(22px) saturate(180%);
    border-color: rgba(255, 255, 255, 0.65);
    color: var(--paper);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 -1px 2px rgba(255, 255, 255, 0.14),
        0 8px 22px -6px rgba(0, 0, 0, 0.30),
        0 2px 6px -1px rgba(0, 0, 0, 0.18);
}
.u-section--dark .u-btn:hover,
.u-section--rust .u-btn:hover,
.u-section--dark .u-btn--ghost:hover,
.u-section--rust .u-btn--ghost:hover,
[data-header-theme="light"] .u-btn:hover,
[data-header-theme="light"] .u-btn--ghost:hover {
    background: rgba(180, 130, 70, 0.50);
    border-color: rgba(255, 255, 255, 0.90);
    color: var(--paper);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        inset 0 -1px 2px rgba(255, 255, 255, 0.18),
        0 12px 28px -6px rgba(0, 0, 0, 0.40),
        0 4px 10px -2px rgba(0, 0, 0, 0.22);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .u-section--dark .u-btn,
    .u-section--rust .u-btn,
    [data-header-theme="light"] .u-btn { background: rgba(var(--paper-rgb), 0.50); }
}
.brand-page .u-section--dark a.u-btn,
.brand-page .u-section--rust a.u-btn,
.brand-page .u-section--dark a.u-btn:hover,
.brand-page .u-section--rust a.u-btn:hover,
.brand-page [data-header-theme="light"] a.u-btn,
.brand-page [data-header-theme="light"] a.u-btn:hover {
    color: var(--paper);
}
.brand-page a.u-btn--ghost {
    color: var(--ink);
}
.brand-page a.u-btn--ghost:hover {
    color: var(--ink);
}
.u-section--dark .u-btn--ghost,
.u-section--rust .u-btn--ghost {
    color: var(--paper);
    border-color: rgb(var(--paper-rgb) / 0.34);
}
.u-section--dark .u-btn--ghost:hover,
.u-section--rust .u-btn--ghost:hover {
    background: rgb(var(--paper-rgb) / 0.09);
    border-color: rgb(var(--paper-rgb) / 0.6);
}
.brand-page .u-section--dark a.u-btn--ghost,
.brand-page .u-section--rust a.u-btn--ghost,
.brand-page .u-section--dark a.u-btn--ghost:hover,
.brand-page .u-section--rust a.u-btn--ghost:hover {
    color: var(--paper);
}

.u-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(14px, 2vw, 24px);
}

/* Focus — one consistent, always-visible ring ----------------------------- */
.brand-page a:focus-visible,
.brand-page button:focus-visible,
.brand-page input:focus-visible,
.brand-page select:focus-visible,
.brand-page textarea:focus-visible,
.landing-page .site-nav a:focus-visible,
.landing-page .site-nav button:focus-visible,
.landing-page .site-menu a:focus-visible,
.landing-page .site-menu button:focus-visible,
.landing-page .site-footer a:focus-visible,
.landing-page .u-btn:focus-visible,
.landing-page .u-link:focus-visible,
.landing-page input:focus-visible,
.landing-page button:focus-visible {
    outline: 2px solid var(--terracotta);
    outline-offset: 3px;
    border-radius: 3px;
}
.u-section--dark a:focus-visible,
.u-section--dark button:focus-visible,
.u-section--dark input:focus-visible,
.u-section--rust a:focus-visible,
.u-section--rust button:focus-visible,
.site-footer a:focus-visible {
    outline-color: var(--paper);
}

.u-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Caption used under illustrative (non-screenshot) compositions ----------- */
.u-caption {
    margin-top: 18px;
    font-size: 0.74rem;
    letter-spacing: 0.06em;
    color: rgb(var(--ink-rgb) / 0.45);
}
.u-section--dark .u-caption {
    color: rgb(var(--paper-rgb) / 0.5);
}

/* ==========================================================================
   4. REVEALS
   --------------------------------------------------------------------------
   Same "armed" contract as landing.js: the hidden start state only exists
   once site.js adds .reveal-on to <html>, so no-JS and reduced-motion
   visitors always see the finished layout.
   ========================================================================== */

.reveal-on [data-u-reveal] {
    opacity: 0;
    transform: translateY(14px);
    transition:
        opacity 0.6s var(--ease),
        transform 0.6s var(--ease);
}
.reveal-on [data-u-reveal].is-in {
    opacity: 1;
    transform: none;
}

/* Line-drawing motif: a 1px terracotta rule that draws itself in view */
.reveal-on [data-u-draw] {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.7s var(--ease);
}
.reveal-on [data-u-draw].is-in {
    transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
    .reveal-on [data-u-reveal],
    .reveal-on [data-u-draw] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ==========================================================================
   5. SITE NAV  (sticky, cream — shared by every page)
   --------------------------------------------------------------------------
   On brand pages it is always visible. On the landing page it starts hidden
   and site.js reveals it once the hero has scrolled away, so the minimal
   hero header (styled in landing.css) is never disturbed.
   ========================================================================== */

.site-nav {
    position: fixed;
    inset: 0 0 auto;
    /* Above brand heroes / HIW bird rail (z≤9) so logo never paints under imagery */
    z-index: 300;
    display: flex;
    align-items: center;
    /* Same outer left/right guide as .u-wrap (not a separate vw clamp). */
    padding: clamp(20px, 2.1vw, 32px)
        max(var(--page-gutter), calc((100% - var(--page-max-width)) / 2));
    color: var(--ink);
    background: transparent;
    border: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transition: color 0.22s ease;
}

/* Site-nav is now the landing header too — always visible, no is-stuck gating. */

.site-nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

.site-nav__brand {
    display: inline-flex;
    align-items: center;
    gap: 0;
    color: currentColor;
    text-decoration: none;
    flex: 0 0 auto;
    position: relative;
}
.site-nav__mark {
    width: 34px;
    height: auto;
    display: block;
    overflow: visible;
}
.site-nav__mark--cream {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
}
.site-nav[data-theme="light"] {
    color: var(--paper);
}
.site-nav[data-theme="light"] .site-nav__mark--ink {
    opacity: 0;
}
.site-nav[data-theme="light"] .site-nav__mark--cream {
    opacity: 1;
}
.site-nav[data-theme="light"] .site-nav__mark:not(.site-nav__mark--ink):not(.site-nav__mark--cream) {
    filter: brightness(0) invert(1);
}
.site-nav__wordmark {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.16rem;
    line-height: 1;
    letter-spacing: -0.01em;
    /* Nudge down to align optically with mark + nav links (serif baseline sits high) */
    transform: translateY(3px);
}
.site-nav > .site-nav__inner .site-nav__wordmark {
    display: none;
}

.site-nav__links {
    display: none;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    gap: clamp(18px, 2.2vw, 34px);
    min-width: 0;
}
.site-nav__links a {
    position: relative;
    font-family: var(--font-body);
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    white-space: nowrap;
    text-decoration: none;
    color: rgb(var(--ink-rgb) / 0.66);
    transition: color 0.18s var(--ease);
}
.site-nav__links a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.32em;
    height: 1px;
    background: var(--ink);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.34s var(--ease);
    pointer-events: none;
}
.site-nav__links a:hover {
    color: var(--ink);
}
.site-nav__links a:hover::after,
.site-nav__links a:focus-visible::after {
    transform: scaleX(1);
}
.site-nav__links a[aria-current="page"] {
    color: var(--terracotta);
}
.site-nav__links a[aria-current="page"]::after {
    transform: scaleX(1);
    background: var(--terracotta);
}

.site-nav__cta {
    display: none;
    flex: 0 0 auto;
}

.site-nav__burger {
    position: relative;
    display: block;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--ink);
}
/* Closed burger follows header theme: ink on light/cream bg, cream on dark bg.
   (data-theme="dark" = dark chrome for light sections; "light" = cream chrome for dark.) */
.site-nav__burger span {
    position: absolute;
    left: 8px;
    width: 26px;
    height: 2px;
    border-radius: 999px;
    background: var(--ink);
    transition: background 0.18s var(--ease);
}
.site-nav__burger span:first-child {
    top: 16px;
}
.site-nav__burger span:last-child {
    top: 25px;
}
.site-nav[data-theme="light"] .site-nav__burger span {
    background: var(--paper);
}

/* Desktop: restore primary links + waitlist CTA; burger stays mobile-only */
@media (min-width: 901px) {
    .site-nav__links {
        display: flex;
    }
    .site-nav__cta {
        display: inline-flex;
    }
    .site-nav__burger {
        display: none;
    }
}

.site-nav[data-theme="light"] .site-nav__links a {
    color: var(--paper);
}
.site-nav[data-theme="light"] .site-nav__links a::after {
    background: var(--paper);
}
.site-nav[data-theme="light"] .site-nav__links a:hover {
    color: var(--paper);
}
.site-nav[data-theme="light"] .site-nav__links a[aria-current="page"] {
    color: rgb(var(--paper-rgb) / 0.95);
}
.site-nav[data-theme="light"] .site-nav__links a[aria-current="page"]::after {
    background: rgb(var(--paper-rgb) / 0.95);
}

@media (max-width: 700px) {
    .site-nav {
        /* Same outer guide as .u-wrap / --page-gutter. */
        padding: 18px var(--page-gutter);
    }
    .site-nav__inner {
        min-height: 44px;
    }
}

/* Full-screen menu panel --------------------------------------------------
   Homepage (.hero-menu) = truth. Brand pages (.site-menu) share identical
   deep warm brown + cream treatment. No page-level menu overrides.
   --------------------------------------------------------------------- */
.hero-menu,
.site-menu {
    --menu-bg: #4d3329;
    --menu-fg: #f8f2e6;
    --menu-fg-muted: rgba(248, 242, 230, 0.66);
    --menu-pad: 24px;

    position: fixed;
    inset: 0;
    z-index: 400;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: var(--menu-pad);
    padding-top: 102px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--menu-bg);
    color: var(--menu-fg);
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0.3s;
}
@media (min-width: 480px) {
    .hero-menu,
    .site-menu {
        --menu-pad: 32px;
    }
}
.hero-menu.is-open,
.site-menu.is-open {
    opacity: 1;
    visibility: visible;
}
.hero-menu[hidden],
.site-menu[hidden] {
    display: none;
}

.hero-menu__top,
.site-menu__top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: var(--menu-pad);
    border: 0;
}

/* Open-menu mark: small signature (~90–110px), shared by hero + site menus */
.hero-menu__mark,
.site-menu__mark,
.landing-page .hero-menu__mark,
.brand-page .site-menu__mark {
    width: clamp(52px, 8vw, 68px);
    max-width: 68px;
    height: auto;
    display: block;
    margin: 0;
    flex: 0 0 auto;
}

.hero-menu__close,
.site-menu__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    margin-right: -4px;
    padding: 0;
    background: none;
    border: 0;
    color: var(--menu-fg);
    cursor: pointer;
    opacity: 0.9;
    transition: opacity 0.22s ease;
    flex: 0 0 auto;
}
.hero-menu__close:hover,
.site-menu__close:hover {
    opacity: 1;
}
.hero-menu__close svg,
.site-menu__close svg {
    width: 22px;
    height: 22px;
}

.hero-menu__links,
.site-menu__links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    text-align: left;
    margin: 0;
    padding: 0;
}

.hero-menu__links a,
.site-menu__links a {
    position: relative;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(42px, 5vw, 64px);
    line-height: 1.22;
    letter-spacing: -0.035em;
    color: var(--menu-fg);
    text-decoration: none;
    opacity: 1;
    transition: color 0.22s ease;
}
.hero-menu__links a::after,
.site-menu__links a::after,
.hero-menu__secondary a::after,
.site-menu__secondary a::after,
.hero-menu__waitlist::after,
.site-menu__waitlist::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -0.08em;
    left: 0;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.24s var(--ease);
}
/* Beat .brand-page a { color: inherit } — panel stays cream everywhere */
.brand-page .site-menu__links a,
.landing-page .hero-menu__links a {
    color: var(--menu-fg);
}
.brand-page .site-menu__secondary a,
.landing-page .hero-menu__secondary a {
    color: var(--menu-fg-muted);
}
.hero-menu__links a:hover,
.hero-menu__links a:focus-visible,
.site-menu__links a:hover,
.site-menu__links a:focus-visible {
    color: var(--menu-fg);
}
.hero-menu__links a:hover::after,
.hero-menu__links a:focus-visible::after,
.site-menu__links a:hover::after,
.site-menu__links a:focus-visible::after,
.hero-menu__secondary a:hover::after,
.hero-menu__secondary a:focus-visible::after,
.site-menu__secondary a:hover::after,
.site-menu__secondary a:focus-visible::after,
.hero-menu__waitlist:hover::after,
.hero-menu__waitlist:focus-visible::after,
.site-menu__waitlist:hover::after,
.site-menu__waitlist:focus-visible::after {
    transform: scaleX(1);
}

/* ponytail: bare <nav><a> inline-flows as one row if grid loses — lock both selectors */
.hero-menu__secondary,
.site-menu__secondary,
.landing-page .hero-menu__secondary,
.brand-page .site-menu__secondary {
    display: flex;
    gap: 8px 24px;
    margin-top: 38px;
    padding: 0;
    flex-wrap: wrap;
}
.hero-menu__secondary a,
.site-menu__secondary a {
    font-family: var(--font-body);
    font-weight: 500;
    position: relative;
    min-height: 0;
    font-size: 0.9rem;
    line-height: 1.25;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--menu-fg-muted);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: color 0.18s ease;
}
.hero-menu__secondary a:hover,
.hero-menu__secondary a:focus-visible,
.site-menu__secondary a:hover,
.site-menu__secondary a:focus-visible {
    color: var(--menu-fg);
}
.hero-menu__secondary a[aria-current="page"],
.site-menu__secondary a[aria-current="page"] {
    color: var(--menu-fg-muted);
}

.hero-menu__foot,
.site-menu__foot {
    margin-top: 44px;
    margin-bottom: 8px;
}
.hero-menu__waitlist,
.site-menu__waitlist {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 26px;
    width: auto;
    max-width: 100%;
    padding: 0;
    color: var(--menu-fg);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.01em;
    text-decoration: none;
}
.hero-menu__waitlist > span:last-child,
.site-menu__waitlist > span:last-child {
    font-family: sans-serif;
    font-size: 2rem;
    font-weight: 200;
    line-height: 0.7;
}

.hero-menu__close:focus-visible,
.hero-menu__links a:focus-visible,
.hero-menu__secondary a:focus-visible,
.hero-menu__waitlist:focus-visible,
.site-menu__close:focus-visible,
.site-menu__links a:focus-visible,
.site-menu__secondary a:focus-visible,
.site-menu__waitlist:focus-visible {
    outline: 2px solid rgba(248, 242, 230, 0.9);
    outline-offset: 4px;
    border-radius: 8px;
}

/* The menu is deliberately a roomy desktop composition rather than a
   stretched mobile sheet. Both navigation partials use these same guides. */
@media (min-width: 701px) {
    .hero-menu,
    .site-menu {
        --menu-pad: 24px;
        padding-top: 102px;
        padding-left: 70px;
    }
    .hero-menu__secondary,
    .site-menu__secondary {
        max-width: 720px;
    }
}

@media (max-width: 700px) {
    .hero-menu,
    .site-menu {
        padding-top: 88px;
    }
    .hero-menu__links,
    .site-menu__links {
        gap: 6px;
    }
    .hero-menu__secondary,
    .site-menu__secondary {
        margin-top: 30px;
        gap: 10px 18px;
    }
    .hero-menu__foot,
    .site-menu__foot {
        margin-top: 36px;
    }
}

body.menu-open,
body.hero-menu-open {
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .hero-menu,
    .site-menu,
    .hero-menu__links a,
    .site-menu__links a,
    .hero-menu__close,
    .site-menu__close {
        transition: none !important;
    }
}

/* ==========================================================================
   6. PRODUCT FRAME  (.pf)
   --------------------------------------------------------------------------
   One repeated rectangular frame, reused across the landing transformation
   section, /product and /how-it-works. Structural consistency is the point:
   same border, same header bar, same body padding everywhere.
   ========================================================================== */

.pf {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--paper);
    border: 1px solid rgb(var(--ink-rgb) / 0.13);
    border-radius: 4px;
    box-shadow: 0 18px 44px rgb(var(--ink-rgb) / 0.05);
}
.pf__bar {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 16px 22px;
    border-bottom: 1px solid rgb(var(--ink-rgb) / 0.09);
}
.pf__step {
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    color: var(--terracotta);
}
.pf__name {
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgb(var(--ink-rgb) / 0.6);
}
.pf__body {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: clamp(22px, 2.4vw, 30px);
    flex: 1;
}
.pf__meta {
    font-size: 0.76rem;
    letter-spacing: 0.05em;
    color: rgb(var(--ink-rgb) / 0.45);
}
.pf__quote {
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 1.5vw, 1.4rem);
    line-height: 1.36;
    color: var(--ink);
}
.pf__answer {
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.55;
    color: rgb(var(--ink-rgb) / 0.72);
}

/* Mic + waveform (Speak) -------------------------------------------------- */
.pf__mic-row {
    display: flex;
    align-items: center;
    gap: 16px;
}
.pf__mic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgb(var(--terracotta-rgb) / 0.1);
    border: 1px solid rgb(var(--terracotta-rgb) / 0.35);
    color: var(--terracotta);
}
.pf__mic svg {
    width: 16px;
    height: 20px;
}
.pf__wave {
    flex: 1 1 auto;
    min-width: 0;
    height: 26px;
    color: var(--terracotta);
}
.pf__wave svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}
.pf__listening {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgb(var(--ink-rgb) / 0.5);
}
.pf__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--terracotta);
    animation: pf-pulse 2.2s ease-in-out infinite;
}
@keyframes pf-pulse {
    0%,
    100% {
        opacity: 0.35;
    }
    50% {
        opacity: 1;
    }
}

/* Connector (Reflect) ----------------------------------------------------- */
.pf__connector {
    display: block;
    width: 46px;
    height: 1px;
    background: var(--terracotta);
    margin: 2px 0;
}

/* Story rule + margin (Review) -------------------------------------------- */
.pf__story {
    border-left: 1px solid var(--terracotta);
    padding-left: 18px;
}
.pf__story-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.18rem;
    line-height: 1.2;
    margin-bottom: 10px;
}
.pf__story-body {
    font-size: 0.92rem;
    line-height: 1.62;
    color: rgb(var(--ink-rgb) / 0.72);
}
.pf__controls {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: auto;
    padding-top: 6px;
}
.pf__control {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid rgb(var(--ink-rgb) / 0.18);
    border-radius: 4px;
    background: transparent;
    font-family: var(--font-body);
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: rgb(var(--ink-rgb) / 0.7);
}
.pf__control--primary {
    border-color: var(--terracotta);
    background: rgb(var(--terracotta-rgb) / 0.08);
    color: var(--terracotta);
}

/* ==========================================================================
   7. LANDING — SECTION 3: PRODUCT TRANSFORMATION
   --------------------------------------------------------------------------
   Title + copy, one screenshot placeholder, CTA to /how-it-works.
   The earlier Speak/Reflect/Review cards are removed until a real screenshot
   ships.
   ========================================================================== */

.tx {
    overflow: hidden;
}
.tx__head {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(260px, 0.7fr);
    gap: clamp(28px, 4vw, 64px);
    align-items: end;
    margin-bottom: 0;
}
.tx__title,
.how-intro-title {
    font-family: var(--font-display);
    font-style: normal;
    font-weight: 500;
    font-size: clamp(3.6rem, 4.9vw, 5.7rem);
    line-height: 0.94;
    letter-spacing: -0.04em;
    max-width: 900px;
    text-wrap: balance;
}
.tx__title em,
.how-intro-title em {
    font-style: normal;
}
.tx__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
    padding-bottom: 6px;
}
.how-intro-copy {
    max-width: 580px;
    font-size: clamp(1.08rem, 1.35vw, 1.35rem);
    line-height: 1.45;
}
.tx__cta {
    margin-top: 0;
}

/* How / archive preview stages — phones as separate floating entities;
   no enclosing chrome box / gradient mat. */
.how-product-preview,
.archive-product-preview {
    position: relative;
    width: 100%;
    max-width: 1180px;
    margin: clamp(48px, 5vw, 72px) auto 0;
    min-height: clamp(380px, 52vw, 560px);
    aspect-ratio: auto;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
    display: grid;
    place-items: center;
}
.how-product-preview::before,
.archive-product-preview::before {
    content: none;
}
.how-product-preview img,
.archive-product-preview img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.how-product-preview__slot,
.archive-product-preview__slot {
    display: none;
}

/* Portrait phone cluster — Quiet Archive product proof */
.product-phone-stage {
    display: grid;
    grid-template-columns: 1fr;
    place-items: end center;
    justify-items: center;
}
.product-phone {
    margin: 0;
    position: relative;
    width: min(42%, 280px);
    aspect-ratio: 473 / 1024;
    border-radius: 18px;
    overflow: hidden;
    background: transparent;
    border: 0;
    outline: 0;
    box-shadow: 0 18px 44px rgb(var(--ink-rgb) / 0.14);
}
.product-phone--primary {
    width: min(46%, 320px);
    z-index: 3;
    grid-area: 1 / 1;
}
.product-phone--support {
    width: min(34%, 230px);
    z-index: 1;
    opacity: 0.96;
    box-shadow: 0 14px 34px rgb(var(--ink-rgb) / 0.1);
}
.product-phone--left {
    grid-area: 1 / 1;
    justify-self: start;
    align-self: end;
    transform: translate(4%, -6%) rotate(-4deg);
}
.product-phone--right {
    grid-area: 1 / 1;
    justify-self: end;
    align-self: end;
    transform: translate(-4%, -6%) rotate(4deg);
    z-index: 2;
}
.product-phone img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

@media (max-width: 1050px) {
    .tx__title,
    .how-intro-title {
        font-size: clamp(3.4rem, 6vw, 5.2rem);
    }
}
@media (max-width: 1000px) {
    .tx__head {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 28px;
    }
}
@media (max-width: 760px) {
    .tx__title,
    .how-intro-title {
        font-size: clamp(2.75rem, 9.5vw, 4rem);
        line-height: 1.05;
        max-width: 100%;
        overflow-wrap: break-word;
        text-wrap: pretty;
    }
    .how-intro-title br {
        display: none;
    }
    .how-product-preview,
    .archive-product-preview {
        min-height: 0;
        margin-top: 40px;
        padding: 0;
        justify-content: center;
    }
    .product-phone--primary {
        width: min(72vw, 280px);
        max-width: 280px;
        transform: none;
    }
    .product-phone--support {
        display: none;
    }
    .product-phone--left,
    .product-phone--right {
        transform: none;
    }
}

/* ==========================================================================
   8. LANDING — SECTION 4: THE LIVING ARCHIVE
   --------------------------------------------------------------------------
   Heading + intro + phone cluster of the private living archive.
   ========================================================================== */

.ar__head {
    max-width: 920px;
    margin-bottom: 0;
}
.ar__head .u-h2,
.archive-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(3.8rem, 5.1vw, 6rem);
    line-height: 0.94;
    letter-spacing: -0.04em;
    max-width: 920px;
    text-wrap: balance;
}
.ar__head .u-lede {
    margin-top: 22px;
    max-width: 62ch;
}

/* archive-product-preview shell styles live with .how-product-preview above */

.ar__statement,
.archive-closing-statement {
    margin: clamp(64px, 7vw, 110px) auto 0;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(2.8rem, 4vw, 4.8rem);
    line-height: 1;
    letter-spacing: -0.03em;
    max-width: 900px;
    text-align: center;
    color: rgb(var(--ink-rgb) / 0.82);
    text-wrap: balance;
}

@media (max-width: 1050px) {
    .ar__head .u-h2,
    .archive-title {
        font-size: clamp(3.4rem, 6vw, 5.2rem);
    }
}
@media (max-width: 760px) {
    .ar__head .u-h2,
    .archive-title {
        font-size: clamp(2.75rem, 9.5vw, 4rem);
        line-height: 1.05;
        max-width: 100%;
        overflow-wrap: break-word;
        text-wrap: pretty;
    }
    .archive-title br {
        display: none;
    }
    .ar__statement,
    .archive-closing-statement {
        font-size: clamp(1.85rem, 8vw, 2.6rem);
        line-height: 1.08;
        margin-top: 48px;
        max-width: 100%;
        overflow-wrap: break-word;
    }
}

/* ==========================================================================
   9. LANDING — SECTION 5: CAPABILITIES
   --------------------------------------------------------------------------
   Single CSS grid: intro + supporting image on row 1, six numbered items
   below. On mobile the image moves between items 03 and 04.
   ========================================================================== */

.u-wrap.cap {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(48px, 6vw, 100px);
    row-gap: clamp(28px, 3vw, 40px);
    align-items: end;
}
.cap__intro {
    grid-column: 1 / 3;
    grid-row: 1;
    align-self: end;
    padding-right: clamp(24px, 4vw, 64px);
}
.cap__intro .u-label {
    margin-bottom: clamp(18px, 2vw, 26px);
}
.capabilities-title,
.cap__intro .u-h2 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(3.8rem, 5.2vw, 6rem);
    line-height: 0.94;
    letter-spacing: -0.04em;
    max-width: 900px;
    text-wrap: balance;
}
.cap__visual,
.capabilities-image {
    grid-column: 3;
    grid-row: 1;
    position: relative;
    width: 100%;
    max-width: 560px;
    aspect-ratio: 1.35 / 1;
    justify-self: end;
    margin: 0;
    border-radius: 10px;
    overflow: hidden;
}
.cap__visual img,
.capabilities-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.cap__item {
    margin-top: clamp(36px, 4vw, 64px);
    padding: 0;
    border-top: 1px solid var(--rule);
    padding-top: clamp(22px, 2.2vw, 28px);
    align-self: start;
}
.cap__num {
    display: block;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    color: var(--terracotta);
    margin-bottom: 14px;
}
.capability-title,
.cap__item h3 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.65rem, 2vw, 2.2rem);
    line-height: 1.1;
    letter-spacing: -0.015em;
    margin-bottom: 12px;
}
.capability-copy,
.cap__item p {
    max-width: 390px;
    font-size: clamp(1rem, 1.2vw, 1.2rem);
    line-height: 1.48;
    color: rgb(var(--ink-rgb) / 0.68);
}

/* Tablet only — 2-col intro|visual must not apply on phones. */
@media (max-width: 1050px) and (min-width: 761px) {
    .u-wrap.cap {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: clamp(32px, 4vw, 56px);
    }
    .cap__intro {
        grid-column: 1;
        grid-row: 1;
        padding-right: 0;
    }
    .cap__visual,
    .capabilities-image {
        grid-column: 2;
        grid-row: 1;
        max-width: none;
    }
    .capabilities-title,
    .cap__intro .u-h2 {
        font-size: clamp(3.4rem, 6vw, 5.2rem);
    }
}
@media (max-width: 760px) {
    .u-wrap.cap {
        grid-template-columns: 1fr;
        width: 100%;
        max-width: none;
        column-gap: 0;
        row-gap: 0;
        align-items: stretch;
    }
    .cap__intro {
        grid-column: 1;
        grid-row: 1;
        width: 100%;
        max-width: none;
        padding-right: 0;
    }
    .capabilities-title,
    .cap__intro .u-h2 {
        font-size: clamp(2.75rem, 9.5vw, 4rem);
        line-height: 1.05;
        max-width: 100%;
        overflow-wrap: break-word;
        text-wrap: pretty;
    }
    .capabilities-title br {
        display: none;
    }
    .cap__item {
        grid-column: 1;
        width: 100%;
        max-width: none;
        margin-top: 0;
        padding-block: 28px;
    }
    .cap__item:nth-of-type(1) {
        grid-row: 2;
        margin-top: 40px;
    }
    .cap__item:nth-of-type(2) {
        grid-row: 3;
    }
    .cap__item:nth-of-type(3) {
        grid-row: 4;
    }
    /* Full-width image between 03 and 04 — not a right-column float */
    .cap__visual,
    .capabilities-image {
        grid-column: 1;
        grid-row: 5;
        position: relative;
        inset: auto;
        transform: none;
        max-width: none;
        width: 100%;
        aspect-ratio: 16 / 10;
        margin: 12px 0 20px;
        justify-self: stretch;
    }
    .cap__item:nth-of-type(4) {
        grid-row: 6;
    }
    .cap__item:nth-of-type(5) {
        grid-row: 7;
    }
    .cap__item:nth-of-type(6) {
        grid-row: 8;
    }
    .capability-copy,
    .cap__item p {
        max-width: none;
    }
}

/* ==========================================================================
   10. LANDING — SECTION 6: STORY MODES AND AUDIENCES
   --------------------------------------------------------------------------
   Personal ("For you") is primary. Founder + organisation are quieter
   extensions of the same conversation — not equal modes.
   ========================================================================== */

.aud__head {
    max-width: 980px;
    margin-bottom: clamp(24px, 3vw, 40px);
}
.audiences-title,
.aud__head .u-h2 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(3.8rem, 5.2vw, 6rem);
    line-height: 0.94;
    letter-spacing: -0.04em;
    max-width: 980px;
    text-wrap: balance;
}
.aud__grid,
.audience-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(24px, 3vw, 44px);
    margin-top: clamp(64px, 7vw, 100px);
}

.aud__grid--personal-first,
.audience-grid.aud__grid--personal-first {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(28px, 3.5vw, 52px);
    row-gap: clamp(28px, 3.5vw, 40px);
    align-items: start;
}

.aud__panel,
.audience-panel {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr;
    min-width: 0;
    overflow: hidden;
    border-radius: 0;
    background: transparent;
    border: 0;
    text-decoration: none;
    color: inherit;
}
.aud__panel--lead {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
    padding-bottom: clamp(8px, 1.5vw, 16px);
    border-bottom: 1px solid rgb(var(--ink-rgb) / 0.1);
    margin-bottom: clamp(4px, 1vw, 8px);
}
.aud__extensions-label {
    grid-column: 1 / -1;
    margin: clamp(8px, 1.5vw, 16px) 0 0;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgb(var(--ink-rgb) / 0.48);
}

.aud__media,
.audience-panel-image {
    position: relative;
    width: 100%;
    overflow: hidden;
    aspect-ratio: 1.28 / 1;
    border-radius: 9px;
    margin-bottom: 26px;
}
.aud__panel--lead .aud__media {
    aspect-ratio: 16 / 10;
    margin-bottom: 0;
}
.aud__panel--extension .aud__media {
    aspect-ratio: 16 / 10;
    margin-bottom: 16px;
    max-height: 220px;
}
.aud__panel--extension {
    max-width: 520px;
}
.aud__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--ease);
}
@media (hover: hover) {
    .aud__panel:hover .aud__media img {
        transform: scale(1.015);
    }
}
.aud__body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 0;
}
.audience-panel-title,
.aud__panel h3 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(2rem, 2.5vw, 3rem);
    line-height: 1;
    letter-spacing: -0.025em;
    margin-bottom: 4px;
}
.aud__panel--lead h3 {
    font-size: clamp(2.6rem, 3.4vw, 4rem);
    letter-spacing: -0.03em;
}
.aud__panel--extension h3 {
    font-size: clamp(1.55rem, 1.9vw, 2.1rem);
    color: rgb(var(--ink-rgb) / 0.88);
}
.audience-panel-copy,
.aud__panel p {
    max-width: 440px;
    font-size: clamp(1rem, 1.15vw, 1.2rem);
    line-height: 1.48;
    color: rgb(var(--ink-rgb) / 0.72);
}
.aud__panel--lead .audience-panel-copy,
.aud__panel--lead p {
    max-width: 46ch;
    font-size: clamp(1.05rem, 1.25vw, 1.28rem);
    color: rgb(var(--ink-rgb) / 0.78);
}
.aud__panel--extension .audience-panel-copy,
.aud__panel--extension p {
    max-width: 40ch;
    font-size: clamp(0.95rem, 1.05vw, 1.08rem);
    color: rgb(var(--ink-rgb) / 0.62);
}
.aud__examples {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    font-size: 0.8rem;
    color: rgb(var(--ink-rgb) / 0.55);
}
.aud__panel--extension .aud__examples {
    font-size: 0.74rem;
    color: rgb(var(--ink-rgb) / 0.48);
}
.aud__examples li {
    display: inline-flex;
    align-items: center;
}
.aud__examples li + li::before {
    content: "";
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgb(var(--terracotta-rgb) / 0.6);
    margin-right: 10px;
}
.aud__cta {
    margin-top: 6px;
}
.aud__panel--extension .aud__cta {
    color: rgb(var(--ink-rgb) / 0.7);
}

@media (max-width: 1050px) {
    .aud__grid,
    .audience-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .aud__grid--personal-first,
    .audience-grid.aud__grid--personal-first {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .aud__panel--lead {
        grid-template-columns: 1fr;
        gap: 22px;
    }
    .aud__grid .aud__panel:last-child,
    .audience-grid .aud__panel:last-child {
        grid-column: auto;
        max-width: none;
    }
    .audiences-title,
    .aud__head .u-h2 {
        font-size: clamp(3.4rem, 6vw, 5.2rem);
    }
}
@media (max-width: 760px) {
    .audiences-title,
    .aud__head .u-h2 {
        font-size: clamp(2.75rem, 9.5vw, 4rem);
        line-height: 1.05;
        max-width: 100%;
        overflow-wrap: break-word;
        text-wrap: pretty;
    }
    .audiences-title br {
        display: none;
    }
    .aud__grid,
    .audience-grid,
    .aud__grid--personal-first,
    .audience-grid.aud__grid--personal-first {
        grid-template-columns: 1fr;
        gap: 40px;
        margin-top: 48px;
    }
    .aud__panel--lead {
        grid-column: 1;
        padding-bottom: 28px;
        margin-bottom: 0;
    }
    .aud__extensions-label {
        margin-top: 0;
    }
    .aud__grid .aud__panel:last-child,
    .audience-grid .aud__panel:last-child {
        max-width: none;
    }
    .aud__media,
    .audience-panel-image,
    .aud__panel--lead .aud__media,
    .aud__panel--extension .aud__media {
        aspect-ratio: 16 / 10;
        margin-bottom: 22px;
    }
    .aud__panel--lead .aud__media {
        margin-bottom: 0;
    }
}

/* ==========================================================================
   11. LANDING — SECTION 7: PRIVACY AND AUTHORSHIP  (dark shift)
   ========================================================================== */

.priv__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(40px, 6vw, 110px);
    align-items: start;
}
.priv__mark {
    width: 46px;
    height: 46px;
    margin-bottom: clamp(26px, 3vw, 40px);
    color: rgb(var(--paper-rgb) / 0.6);
}
.priv__title {
    color: var(--paper);
}
.priv__support {
    margin-top: clamp(26px, 3vw, 40px);
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 1.5vw, 1.4rem);
    line-height: 1.42;
    color: rgb(var(--paper-rgb) / 0.72);
    max-width: 34ch;
}
.priv__list {
    display: flex;
    flex-direction: column;
}
.priv__item {
    padding: clamp(24px, 2.6vw, 34px) 0;
    border-top: 1px solid rgb(var(--paper-rgb) / 0.16);
}
.priv__item:last-child {
    border-bottom: 1px solid rgb(var(--paper-rgb) / 0.16);
}
.priv__item h3 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.25rem, 1.7vw, 1.6rem);
    line-height: 1.12;
    color: var(--paper);
    margin-bottom: 10px;
}
.priv__item p {
    font-size: 0.98rem;
    line-height: 1.62;
    color: rgb(var(--paper-rgb) / 0.7);
    max-width: 46ch;
}

@media (max-width: 900px) {
    .priv__inner {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   12. LANDING — SECTION 8: INTERACTIVE DEMO PREVIEW
   ========================================================================== */

.try__inner {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
    gap: clamp(36px, 5vw, 88px);
    align-items: center;
}
.try__prompt {
    margin-top: clamp(22px, 2.6vw, 34px);
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 1.9vw, 1.7rem);
    line-height: 1.32;
    color: rgb(var(--ink-rgb) / 0.72);
    max-width: 26ch;
}
.try__actions {
    margin-top: clamp(28px, 3vw, 42px);
}
.try__note {
    margin-top: 20px;
    font-size: 0.8rem;
    line-height: 1.5;
    color: rgb(var(--ink-rgb) / 0.5);
    max-width: 38ch;
}

/* transcript inside the repeated product frame */
.try__thread {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.try__turn {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 92%;
}
.try__turn--you {
    align-self: flex-end;
    align-items: flex-end;
    text-align: right;
}
.try__who {
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgb(var(--ink-rgb) / 0.42);
}
.try__turn--unfolded .try__who {
    color: var(--terracotta);
}
.try__text {
    font-size: 0.98rem;
    line-height: 1.55;
    color: rgb(var(--ink-rgb) / 0.82);
}
.try__turn--unfolded .try__text {
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 1.4vw, 1.24rem);
    color: var(--ink);
}
.try__result {
    margin-top: 4px;
    padding-top: 20px;
    border-top: 1px solid rgb(var(--ink-rgb) / 0.1);
}

@media (max-width: 900px) {
    .try__inner {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   13. LANDING — SECTION 9: FOUNDER NOTE
   ========================================================================== */

.fnote__inner {
    display: grid;
    grid-template-columns: minmax(0, 0.55fr) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 90px);
    align-items: start;
}
.fnote__quote {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.45rem, 2.5vw, 2.25rem);
    line-height: 1.28;
    letter-spacing: -0.02em;
    color: var(--ink);
    max-width: 26ch;
}
.fnote__sign {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: clamp(28px, 3vw, 40px);
}
.fnote__avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    overflow: hidden;
    flex: 0 0 auto;
}
.fnote__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.fnote__name {
    font-family: var(--font-display);
    font-size: 1.05rem;
    line-height: 1.2;
}
.fnote__role {
    font-size: 0.8rem;
    color: rgb(var(--ink-rgb) / 0.55);
}

@media (max-width: 820px) {
    .fnote__inner {
        grid-template-columns: 1fr;
        width: 100%;
        max-width: none;
        gap: 26px;
    }
    .fnote__quote {
        max-width: 34rem;
        width: 100%;
        font-size: clamp(1.2rem, 4.6vw, 1.45rem);
        line-height: 1.35;
    }
    .fnote__sign {
        min-width: 0;
        width: 100%;
        max-width: 34rem;
    }
}

/* ==========================================================================
   14. LANDING — SECTION 10: WAITLIST
   ========================================================================== */

.wl {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: var(--paper);
}
.wl__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
}
.wl__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.wl::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        105deg,
        rgb(var(--ink-rgb) / 0.82),
        rgb(var(--ink-rgb) / 0.52)
    );
}
.wl__inner {
    max-width: 720px;
}
.wl__title {
    color: var(--paper);
    max-width: 16ch;
}
.wl__copy {
    margin-top: clamp(20px, 2.4vw, 30px);
    color: rgb(var(--paper-rgb) / 0.8);
    max-width: 48ch;
}
.wl__form {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: clamp(30px, 3.4vw, 44px);
}
.wl__field {
    flex: 1 1 300px;
    min-width: 0;
}
.wl__label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgb(var(--paper-rgb) / 0.66);
}
.wl__input {
    width: 100%;
    min-height: 48px;
    padding: 0 16px;
    border: 1px solid rgb(var(--paper-rgb) / 0.34);
    border-radius: 6px;
    background: rgb(var(--paper-rgb) / 0.08);
    color: var(--paper);
    font-family: var(--font-body);
    font-size: 0.98rem;
    transition: border-color 0.2s var(--ease);
}
.wl__input::placeholder {
    color: rgb(var(--paper-rgb) / 0.5);
}
.wl__input:focus {
    outline: 2px solid var(--paper);
    outline-offset: 2px;
    border-color: transparent;
}
.wl__submit {
    align-self: flex-end;
    flex: 0 0 auto;
}
.wl__fine {
    margin-top: 18px;
    font-size: 0.82rem;
    color: rgb(var(--paper-rgb) / 0.62);
}
.wl__audiences {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    margin-top: clamp(28px, 3vw, 40px);
    padding-top: clamp(22px, 2.4vw, 30px);
    border-top: 1px solid rgb(var(--paper-rgb) / 0.2);
}
.wl__audiences span {
    font-size: 0.76rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgb(var(--paper-rgb) / 0.55);
}
.wl__audiences a {
    font-size: 0.82rem;
    color: rgb(var(--paper-rgb) / 0.9);
    text-decoration: none;
    border-bottom: 1px solid rgb(var(--paper-rgb) / 0.35);
}
.wl__audiences a:hover {
    border-bottom-color: var(--paper);
}

@media (max-width: 620px) {
    .wl__submit {
        width: 100%;
    }
}

/* index.css sets `#waitlist { padding: 10px }` at id level; landing.css owns
   the homepage waitlist rhythm (floor-anchored hoopoe portrait). Keep a soft
   fallback here for non-landing surfaces that reuse #waitlist. */
.landing-page .u-section#waitlist:not(.wl) {
    padding-block: clamp(84px, 10vw, 150px);
}
/* index.css also drops a three-layer shadow on #features — not part of this
   design system. */
.landing-page #features {
    box-shadow: none;
}

/* ==========================================================================
   15. SITE FOOTER  (shared by the landing page and every brand page)
   --------------------------------------------------------------------------
   Dark editorial final chapter: brand + restrained nav, legal row, oversized
   cropped UNFOLDED wordmark. One continuous dark field — no borders, cards,
   or column dividers.

   Selectors are scoped under .site-footer so they cannot collide with the
   legacy .footer-* rules still living in index.css (loaded on the homepage).
   ========================================================================== */

.site-footer {
    position: relative;
    overflow: hidden;
    background: #2c2622;
    color: #f8f2e6;
    min-height: 540px;
    padding: 48px clamp(56px, 4vw, 72px) 0;
    border-top: 0;
}

.site-footer .footer-top {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(40px, 6vw, 80px);
    align-items: start;
}

.site-footer .footer-brand {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.site-footer .footer-logo {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: #f8f2e6;
    text-decoration: none;
    max-width: 210px;
}
.site-footer .footer-logo img {
    width: clamp(34px, 2.8vw, 42px);
    height: auto;
    aspect-ratio: 314 / 144;
    display: block;
}
.site-footer .footer-logo-text {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.6rem, 2vw, 2.25rem);
    line-height: 1;
    letter-spacing: -0.02em;
    color: #f8f2e6;
}
.site-footer .footer-brand .footer-tagline,
.site-footer .footer-brand p {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 400;
    margin-top: 22px;
    font-size: clamp(1rem, 1.15vw, 1.2rem);
    line-height: 1.35;
    color: #9f978a;
    max-width: 270px;
}

.site-footer .footer-top-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.site-footer .footer-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: clamp(36px, 3vw, 48px);
}
.site-footer .footer-nav a {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.92rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: rgba(248, 242, 230, 0.82);
    text-decoration: none;
    transition: color 0.18s var(--ease);
}
.site-footer .footer-nav a:hover {
    color: #f8f2e6;
}
.site-footer .footer-nav--secondary {
    margin-top: 18px;
    gap: clamp(20px, 2.2vw, 32px);
}
.site-footer .footer-nav--secondary a {
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    color: rgba(248, 242, 230, 0.55);
}
.site-footer .footer-nav--secondary a:hover {
    color: rgba(248, 242, 230, 0.9);
}
.site-footer .footer-nav--audience {
    padding-left: 0.4rem;
    border-left: 1px solid rgba(248, 242, 230, 0.14);
}

.site-footer .footer-socials {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 20px;
    margin-top: 30px;
}
.site-footer .footer-socials a {
    display: inline-flex;
    color: rgba(248, 242, 230, 0.82);
    transition: color 0.18s var(--ease);
}
.site-footer .footer-socials a:hover {
    color: #f8f2e6;
}
.site-footer .footer-socials svg {
    width: 23px;
    height: 23px;
    display: block;
}

.site-footer .footer-meta,
.site-footer .footer-legal {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: clamp(24px, 4vw, 52px);
    margin-top: clamp(140px, 11vw, 160px);
    padding: 0;
    border: 0;
    font-family: var(--font-display);
    font-size: clamp(0.95rem, 1.05vw, 1.1rem);
    color: #9f978a;
}
.site-footer .footer-copyright {
    margin: 0;
}
.site-footer .footer-legal-links {
    display: flex;
    gap: 34px;
}
.site-footer .footer-legal-links a {
    color: #9f978a;
    text-decoration: none;
    transition: color 0.18s var(--ease);
}
.site-footer .footer-legal-links a:hover {
    color: #f8f2e6;
}

/* Oversized cropped wordmark — architectural base of the footer */
.site-footer .footer-wordmark {
    position: absolute;
    left: clamp(56px, 4vw, 72px);
    right: clamp(56px, 4vw, 72px);
    bottom: -40px;
    z-index: 1;

    font-family: var(--font-display);
    font-size: clamp(9rem, 15vw, 16rem);
    font-weight: 400;
    line-height: 0.74;
    letter-spacing: -0.06em;
    white-space: nowrap;
    text-align: center;
    text-transform: uppercase;

    color: #756d67;

    pointer-events: none;
    user-select: none;

    opacity: 1;
    transform: none;
}
.site-footer.wm-armed .footer-wordmark {
    opacity: 0;
    transform: translateY(18px);
    transition:
        opacity 0.7s var(--ease),
        transform 0.7s var(--ease);
}
.site-footer.wm-armed .footer-wordmark.is-in {
    opacity: 1;
    transform: none;
}

.site-footer a:focus-visible {
    outline: 2px solid rgba(248, 242, 230, 0.72);
    outline-offset: 4px;
    border-radius: 3px;
}

/* Mobile footer — single column; wordmark is a quiet basement mural AFTER legal.
   Do not keep desktop absolute/bottom/left sizing (it covers Privacy/Terms). */
@media (max-width: 760px) {
    .site-footer {
        position: relative;
        min-height: 0;
        padding: clamp(56px, 12vw, 72px) 24px 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .site-footer .footer-top {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 32px;
        width: 100%;
        max-width: 100%;
        position: relative;
        z-index: 2;
    }

    .site-footer .footer-brand {
        width: 100%;
        max-width: 100%;
    }

    .site-footer .footer-logo {
        max-width: none;
        gap: 12px;
    }

    .site-footer .footer-logo img {
        width: clamp(44px, 12vw, 56px);
        height: auto;
    }

    .site-footer .footer-logo-text {
        font-size: clamp(1.45rem, 5.5vw, 1.75rem);
    }

    .site-footer .footer-brand .footer-tagline,
    .site-footer .footer-brand p {
        margin-top: 14px;
        max-width: 34rem;
        font-size: clamp(0.95rem, 3.6vw, 1.05rem);
    }

    .site-footer .footer-top-right {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        max-width: 100%;
        gap: 32px;
    }

    .site-footer .footer-nav {
        justify-content: flex-start;
        flex-direction: column;
        align-items: flex-start;
        flex-wrap: nowrap;
        gap: clamp(18px, 4vw, 24px);
        margin-top: 0;
        width: 100%;
    }

    .site-footer .footer-nav a {
        font-size: clamp(1.05rem, 4.2vw, 1.25rem); /* ~28–34px */
        letter-spacing: 0.04em;
        line-height: 1.2;
    }

    .site-footer .footer-nav--secondary {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 14px 20px;
        margin-top: 0;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .site-footer .footer-nav--audience {
        padding-left: 0;
        border-left: 0;
    }

    .site-footer .footer-nav--secondary a {
        font-size: 0.72rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }

    .site-footer .footer-socials {
        justify-content: flex-start;
        gap: 24px;
        margin-top: 0;
        width: 100%;
    }

    .site-footer .footer-socials a {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        align-items: center;
        justify-content: center;
    }

    .site-footer .footer-socials svg {
        width: 30px;
        height: 30px;
    }

    .site-footer .footer-meta,
    .site-footer .footer-legal {
        position: relative;
        z-index: 2;
        display: grid;
        grid-template-columns: 1fr;
        justify-content: start;
        align-items: start;
        width: 100%;
        max-width: 100%;
        margin-top: 32px;
        margin-bottom: 24px;
        padding: 0;
        gap: 10px;
        font-size: 0.875rem; /* 14px */
        line-height: 1.4;
    }

    .site-footer .footer-legal-links {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        width: 100%;
    }

    .site-footer .footer-legal-links a {
        display: inline-block;
        max-width: 100%;
    }

    /* Quiet basement mural — in document flow AFTER legal, never absolute */
    .site-footer .footer-wordmark {
        position: relative;
        inset: auto;
        left: auto;
        right: auto;
        bottom: auto;
        top: auto;
        z-index: 1;
        display: block;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin: 20px 0 0;
        padding: 0 0 8px;
        overflow: hidden;
        contain: paint;
        font-size: clamp(64px, 22vw, 96px);
        line-height: 0.78;
        letter-spacing: -0.06em;
        white-space: nowrap;
        text-align: center;
        opacity: 0.16;
        color: #f8f2e6;
        transform: none;
        pointer-events: none;
        user-select: none;
    }

    .site-footer.wm-armed .footer-wordmark {
        opacity: 0;
        transform: none;
    }

    .site-footer.wm-armed .footer-wordmark.is-in {
        opacity: 0.16;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-footer.wm-armed .footer-wordmark {
        opacity: 1;
        transform: none;
        transition: none !important;
    }
}

@media (prefers-reduced-motion: reduce) and (max-width: 760px) {
    .site-footer.wm-armed .footer-wordmark,
    .site-footer.wm-armed .footer-wordmark.is-in {
        opacity: 0.16;
        transform: none;
    }
}

/* ==========================================================================
   16. BRAND PAGE CHROME  (page heroes and page-level compositions)
   ========================================================================== */

.page-head {
    position: relative;
    padding-block: clamp(60px, 8vw, 128px) clamp(48px, 6vw, 92px);
    background: var(--paper);
}
.page-head--sand {
    background: var(--warm-neutral);
}
.page-head__title {
    max-width: 18ch;
}
.page-head__lede {
    margin-top: clamp(22px, 2.6vw, 34px);
}
.page-head__actions {
    margin-top: clamp(28px, 3vw, 40px);
}

/* Image-led page head (used on the audience pages) */
.page-head--media {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
    gap: clamp(32px, 5vw, 80px);
    align-items: center;
}
.page-head--media .page-head__media {
    border-radius: 4px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
}
.page-head--media .page-head__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media (max-width: 860px) {
    .page-head--media {
        grid-template-columns: 1fr;
    }
}

/* Unified “Who it’s for” page styles live in static/for-you.css */
@media (prefers-reduced-motion: no-preference) {
    html:focus-within {
        scroll-behavior: smooth;
    }
}

/* Two-column editorial block (heading left / copy right) ------------------ */
.split {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(28px, 4vw, 80px);
    align-items: start;
}
.split--reverse .split__media {
    order: -1;
}
.split__media {
    border-radius: 4px;
    overflow: hidden;
    aspect-ratio: 3 / 2;
}
.split__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media (max-width: 860px) {
    .split {
        grid-template-columns: 1fr;
    }
    .split--reverse .split__media {
        order: 0;
    }
}

/* Numbered principle list ------------------------------------------------- */
.principles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    column-gap: clamp(28px, 4vw, 64px);
}
.principles__item {
    padding: clamp(24px, 2.6vw, 32px) 0;
    border-top: 1px solid var(--rule);
}
.u-section--dark .principles__item {
    border-top-color: rgb(var(--paper-rgb) / 0.16);
}
.principles__num {
    display: block;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    color: var(--terracotta);
    margin-bottom: 12px;
}
.principles__item h3 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.2rem, 1.6vw, 1.45rem);
    line-height: 1.16;
    margin-bottom: 8px;
}
.principles__item p {
    font-size: 0.94rem;
    line-height: 1.6;
    color: rgb(var(--ink-rgb) / 0.68);
    max-width: 36ch;
}
.u-section--dark .principles__item p {
    color: rgb(var(--paper-rgb) / 0.7);
}

/* Chapter section — one dominant product visual per scroll block ---------- */
.chapter {
    display: grid;
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
    gap: clamp(32px, 5vw, 86px);
    align-items: center;
}
.chapter + .chapter {
    margin-top: clamp(64px, 8vw, 130px);
}
.chapter__index {
    display: block;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    color: var(--terracotta);
    margin-bottom: 18px;
}
.chapter__title {
    margin-bottom: 20px;
}
.chapter__sticky {
    position: sticky;
    top: calc(var(--nav-h) + 32px);
}
@media (max-width: 940px) {
    .chapter {
        grid-template-columns: 1fr;
    }
    .chapter__sticky {
        position: static;
    }
}

/* Simple use-case list (audience pages) ----------------------------------- */
.cases {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    column-gap: clamp(28px, 4vw, 64px);
}
.cases__item {
    padding: clamp(22px, 2.4vw, 30px) 0;
    border-top: 1px solid var(--rule);
}
.cases__item h3 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.22rem;
    line-height: 1.18;
    margin-bottom: 8px;
}
.cases__item p {
    font-size: 0.94rem;
    line-height: 1.6;
    color: rgb(var(--ink-rgb) / 0.68);
    max-width: 38ch;
}

/* Full-bleed quiet statement band ---------------------------------------- */
.statement {
    text-align: center;
}
.statement__text {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.9rem, 4vw, 3.4rem);
    line-height: 1.08;
    letter-spacing: -0.03em;
    max-width: 20ch;
    margin-inline: auto;
}

/* Closing CTA band -------------------------------------------------------- */
.endcta {
    text-align: center;
}
.endcta__title {
    max-width: 18ch;
    margin-inline: auto;
}
.endcta__copy {
    margin: 22px auto 0;
    text-align: center;
}
.endcta .u-actions {
    justify-content: center;
    margin-top: clamp(26px, 3vw, 38px);
}

/* Notice for functionality that is described but not yet released --------- */
.notice {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-top: clamp(28px, 3vw, 40px);
    padding: 18px 20px;
    border: 1px solid rgb(var(--terracotta-rgb) / 0.34);
    border-radius: 4px;
    background: rgb(var(--terracotta-rgb) / 0.06);
    font-size: 0.9rem;
    line-height: 1.55;
    color: rgb(var(--ink-rgb) / 0.75);
    max-width: 62ch;
}
.notice strong {
    color: var(--terracotta);
    font-weight: 500;
}

/* ==========================================================================
   17. LEGAL PAGES  (/privacy, /terms)
   ========================================================================== */

.legaldoc {
    display: grid;
    grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 80px);
    align-items: start;
}
.legaldoc__toc {
    position: sticky;
    top: calc(var(--nav-h) + 28px);
}
.legaldoc__toc h2 {
    margin: 0 0 14px;
    font-family: var(--font-body);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--terracotta);
}
.legaldoc__toc ol {
    display: flex;
    flex-direction: column;
    gap: 9px;
    counter-reset: toc;
}
.legaldoc__toc a {
    font-size: 0.88rem;
    line-height: 1.35;
    color: rgb(var(--ink-rgb) / 0.66);
    text-decoration: none;
}
.legaldoc__toc a:hover {
    color: var(--terracotta);
}

.legaldoc__body {
    max-width: 68ch;
}
.legaldoc__updated {
    margin-bottom: clamp(28px, 3vw, 40px);
    padding-bottom: 18px;
    border-bottom: 1px solid var(--rule);
    font-size: 0.84rem;
    letter-spacing: 0.04em;
    color: rgb(var(--ink-rgb) / 0.55);
}
.legaldoc__body h2 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.35rem, 2vw, 1.7rem);
    line-height: 1.18;
    letter-spacing: -0.02em;
    margin: clamp(38px, 4vw, 56px) 0 14px;
    scroll-margin-top: calc(var(--nav-h) + 24px);
}
.legaldoc__body h2:first-of-type {
    margin-top: 0;
}
.legaldoc__body h3 {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 500;
    margin: 26px 0 8px;
    color: var(--ink);
}
.legaldoc__body p,
.legaldoc__body li {
    font-size: 1rem;
    line-height: 1.72;
    color: rgb(var(--ink-rgb) / 0.78);
    margin-bottom: 14px;
}
.legaldoc__body ul {
    list-style: disc;
    padding-left: 22px;
    margin-bottom: 18px;
}
.legaldoc__body a {
    color: var(--terracotta);
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 900px) {
    .legaldoc {
        grid-template-columns: 1fr;
    }
    .legaldoc__toc {
        position: static;
        padding-bottom: 26px;
        border-bottom: 1px solid var(--rule);
    }
    .legaldoc__toc ol {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px 18px;
    }
}

/* ==========================================================================
   18. PAGE UTILITIES (public brand pages)
   ========================================================================== */

.flow {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 8px;
    align-items: center;
    list-style: none;
    margin: 2.4rem 0 0;
    padding: 0;
}
.flow__step {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 2vw, 1.45rem);
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--ink);
}
.flow__step:not(:last-child)::after {
    content: "→";
    margin-left: 8px;
    color: var(--terracotta);
    font-family: var(--font-body);
    font-size: 0.95rem;
}

.tick-list {
    list-style: none;
    margin: 1.6rem 0 0;
    padding: 0;
    display: grid;
    gap: 12px;
    max-width: 36ch;
}
.tick-list--wide {
    max-width: 42ch;
}
.tick-list li {
    position: relative;
    padding-left: 1.35rem;
    font-size: 0.98rem;
    line-height: 1.55;
    color: rgb(var(--ink-rgb) / 0.78);
}
.tick-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--terracotta);
}

.chip-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.chip-grid li {
    padding: 10px 16px;
    border: 1px solid var(--rule);
    background: rgb(var(--paper-rgb) / 0.7);
    font-size: 0.92rem;
    color: rgb(var(--ink-rgb) / 0.82);
}

.wl-page {
    max-width: 28rem;
}
.wl-page__form {
    display: grid;
    gap: 1.25rem;
}

/* Paper-surface waitlist page — ink tokens (do not inherit dark-band .wl__) */
.wl-page .wl__label {
    color: rgb(var(--ink-rgb) / 0.62);
}
.wl-page .wl__input {
    border: 1px solid var(--rule);
    background: #fffef9;
    color: var(--ink);
    border-radius: 6px;
}
.wl-page .wl__input::placeholder {
    color: rgb(var(--ink-rgb) / 0.42);
}
.wl-page .wl__input:hover {
    border-color: rgb(var(--ink-rgb) / 0.28);
}
.wl-page .wl__input:focus {
    outline: 2px solid var(--terracotta);
    outline-offset: 2px;
    border-color: rgb(var(--terracotta-rgb) / 0.55);
}
.wl-page .wl__input:user-invalid {
    border-color: var(--deep-rust);
}
.wl-page .wl__input:user-invalid:focus {
    outline-color: var(--deep-rust);
    border-color: var(--deep-rust);
}
.wl-page .wl__hint {
    margin: 8px 0 0;
    font-size: 0.82rem;
    line-height: 1.4;
    color: rgb(var(--ink-rgb) / 0.55);
}
.wl-page .wl__error {
    display: none;
    margin: 8px 0 0;
    font-size: 0.86rem;
    line-height: 1.4;
    color: var(--deep-rust);
}
.wl-page .wl__input:user-invalid ~ .wl__error {
    display: block;
}
.wl-page .wl__fine {
    color: rgb(var(--ink-rgb) / 0.55);
}
.wl-page__interest {
    border: 0;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}
.wl-page__interest .wl__label {
    margin-bottom: 4px;
    padding: 0;
}
.wl-page__option {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid var(--rule);
    border-radius: 6px;
    background: #fffef9;
    color: var(--ink);
    cursor: pointer;
    font-size: 0.95rem;
    transition: border-color 0.18s var(--ease), background 0.18s var(--ease);
}
.wl-page__option:hover {
    border-color: rgb(var(--ink-rgb) / 0.28);
}
.wl-page__option:has(input:checked) {
    border-color: rgb(var(--terracotta-rgb) / 0.55);
    background: rgb(var(--terracotta-rgb) / 0.08);
}
.wl-page__option:focus-within {
    outline: 2px solid var(--terracotta);
    outline-offset: 2px;
}
.wl-page__option input {
    accent-color: var(--terracotta);
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
}
.wl-page__option span {
    min-width: 0;
    overflow-wrap: break-word;
}
.wl-page__submit {
    width: 100%;
    justify-content: center;
}
.wl-page__submit:disabled {
    opacity: 0.62;
    cursor: not-allowed;
    transform: none;
}
@media (max-width: 640px) {
    .wl-page__submit {
        width: 100%;
    }
    .page-head__actions {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }
    .page-head__actions .u-btn {
        width: 100%;
        max-width: 320px;
        justify-content: center;
    }
    .wl-page__option {
        min-height: 48px;
    }
}

/* Demo page shell — brand chrome + existing conversation UI --------------- */
.demo-page {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
}
.demo-page .site-footer {
    margin-top: auto;
}
.demo-shell {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: calc(100svh - var(--nav-h));
    background: var(--paper);
    color: var(--ink);
}
.demo-shell .demo-badge {
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--terracotta);
}

/* ==========================================================================
   19. GLOBAL MOTION OPT-OUT
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    html:has(.brand-page) {
        scroll-behavior: auto;
    }
    .site-nav,
    .site-menu,
    .u-btn,
    .u-btn svg,
    .u-link svg,
    .aud__media img,
    .site-footer__group a,
    .footer-nav a,
    .footer-legal-links a,
    .footer-socials a,
    .site-nav__links a,
    .site-nav__links a::after {
        transition: none !important;
    }
    .pf__dot {
        animation: none !important;
        opacity: 0.8;
    }
}

/* Open-menu cascade lock — protects the shared layout from page CSS. */
.landing-page .hero-menu__mark,
.brand-page .site-menu__mark {
    width: clamp(52px, 8vw, 68px);
    max-width: 68px;
    height: auto;
}
.landing-page .hero-menu__secondary,
.brand-page .site-menu__secondary {
    display: flex;
    grid-template-columns: none;
    gap: 8px 24px;
    flex-wrap: wrap;
}
.site-nav[data-theme="dark"] .site-nav__burger span,
.site-nav:not([data-theme="light"]) .site-nav__burger span {
    background: var(--ink);
}
.site-nav[data-theme="light"] .site-nav__burger span {
    background: var(--paper);
}

/* ═════════════════════════════════════════════════════════════════════
   LIQUID GLASS NAVBAR — Option B (floating capsule, chunkier) — ACTIVE
   Apple-style glass pill with more presence.
   Option A (edge-to-edge) archived below.
   ═════════════════════════════════════════════════════════════════════ */
.site-nav {
    padding: 16px 20px;
    background: transparent;
    pointer-events: none;
}
.site-nav__inner {
    pointer-events: auto;
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px 30px;
    border-radius: 100px;
    gap: 28px;

    background: rgba(245, 241, 232, 0.55);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    backdrop-filter: blur(28px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 12px 44px -8px rgba(60, 50, 80, 0.20),
        0 4px 14px -2px rgba(60, 50, 80, 0.12);
}
.site-nav[data-theme="light"] .site-nav__inner {
    background: rgba(15, 14, 20, 0.45);
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 12px 44px -8px rgba(0, 0, 0, 0.48),
        0 4px 14px -2px rgba(0, 0, 0, 0.28);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .site-nav__inner { background: rgba(245, 241, 232, 0.94); }
    .site-nav[data-theme="light"] .site-nav__inner { background: rgba(15, 14, 20, 0.90); }
}

/* ─── Design parity with landing hero-header ────────────────────────────
   Same layout on every brand page: bird + "Unfolded" wordmark left,
   links pushed right, JOIN WAITLIST as a ghost pill (overrides .u-btn).
   Keeps the site-nav's existing paper/dark tint per data-theme. */
.site-nav > .site-nav__inner .site-nav__wordmark {
    display: inline;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.2rem, 1.8vw, 1.65rem);
    line-height: 1;
    letter-spacing: -0.005em;
    transform: translateY(3px);
}
.site-nav__brand {
    gap: 10px;
}
.site-nav__mark {
    width: 36px;
}
/* Only one mark visible at a time — swap by display, not opacity, so both
   the hidden and the visible mark can't ever paint together. Cream mark also
   comes out of absolute positioning so it lands in the same flex-centered
   spot as the ink mark (was pinned top-left before). */
.site-nav__mark--cream {
    position: static !important;
    inset: auto !important;
    opacity: 1 !important;
    display: none !important;
}
.site-nav[data-theme="light"] .site-nav__mark--ink {
    display: none !important;
}
.site-nav[data-theme="light"] .site-nav__mark--cream {
    display: block !important;
}
/* Push the primary links + CTA over to the right side of the capsule. */
.site-nav__links {
    flex: 0 0 auto;
    justify-content: flex-end;
    margin-left: auto;
    gap: clamp(24px, 3vw, 42px);
}
.site-nav__links a {
    font-size: 0.76rem;
    letter-spacing: 0.07em;
}
/* Ghost pill CTA — overrides .u-btn's filled terracotta on nav only.
   Sizes locked to landing .hero-nav__cta (0.76rem text, 8×18 padding). */
a.u-btn.site-nav__cta,
.site-nav__cta {
    min-height: 0 !important;
    padding: 8px 18px !important;
    border-radius: 100px !important;
    background: transparent !important;
    color: var(--ink) !important;
    border: 1.5px solid var(--ink) !important;
    font-size: 0.76rem !important;
    font-weight: 500;
    letter-spacing: 0.08em;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
a.u-btn.site-nav__cta:hover,
.site-nav__cta:hover,
a.u-btn.site-nav__cta:focus-visible,
.site-nav__cta:focus-visible {
    background: rgb(var(--ink-rgb) / 0.08) !important;
    border-color: var(--ink) !important;
    color: var(--ink) !important;
    transform: none !important;
}
.site-nav[data-theme="light"] a.u-btn.site-nav__cta,
.site-nav[data-theme="light"] .site-nav__cta {
    color: var(--paper) !important;
    border-color: var(--paper) !important;
}
.site-nav[data-theme="light"] a.u-btn.site-nav__cta:hover,
.site-nav[data-theme="light"] .site-nav__cta:hover,
.site-nav[data-theme="light"] a.u-btn.site-nav__cta:focus-visible,
.site-nav[data-theme="light"] .site-nav__cta:focus-visible {
    background: rgba(245, 241, 232, 0.14) !important;
    border-color: var(--paper) !important;
    color: var(--paper) !important;
}

/* ═════════════════════════════════════════════════════════════════════
   Option A (edge-to-edge bar) — ARCHIVED
   To restore: uncomment below and comment Option B above.
   ═════════════════════════════════════════════════════════════════════ */
/*
.site-nav {
    padding: 0;
    pointer-events: auto;
    background: rgba(245, 241, 232, 0.55);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    backdrop-filter: blur(28px) saturate(180%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        0 6px 20px -8px rgba(60, 50, 80, 0.10);
}
.site-nav__inner {
    padding: 14px 24px;
    border-radius: 0;
    gap: 20px;
    background: transparent;
    border: none;
    box-shadow: none;
}
.site-nav[data-theme="light"] {
    background: rgba(15, 14, 20, 0.45);
    border-bottom-color: rgba(255, 255, 255, 0.12);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 6px 20px -8px rgba(0, 0, 0, 0.35);
}
*/

/* ═════════════════════════════════════════════════════════════════════
   CUSTOM LIQUID GLASS CURSOR — Apple-style (desktop only)
   Small ink dot + 38px glass ring that lags. Grows to 52px on links,
   buttons and other interactive targets. Body-level `cursor-on-dark`
   class (JS-driven from site-nav data-theme) brightens fill + edge over
   dark sections. Fallback to native cursor on coarse pointers.
   ═════════════════════════════════════════════════════════════════════ */
@media (pointer: fine) {
    body.has-custom-cursor,
    body.has-custom-cursor a,
    body.has-custom-cursor button,
    body.has-custom-cursor [role="button"],
    body.has-custom-cursor label,
    body.has-custom-cursor summary {
        cursor: none;
    }
    /* Keep the caret in text fields so users can see where they're typing */
    body.has-custom-cursor input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
    body.has-custom-cursor textarea,
    body.has-custom-cursor [contenteditable="true"] {
        cursor: text;
    }

    .cursor-dot {
        position: fixed;
        top: 0;
        left: 0;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--ink, #2c2622);
        pointer-events: none;
        transform: translate(-50%, -50%);
        z-index: 10000;
        opacity: 0;
        transition: opacity 0.15s ease, background 0.2s ease;
    }
    body.cursor-on-dark .cursor-dot {
        background: var(--paper, #f8f2e6);
    }

    .cursor-ring {
        position: fixed;
        top: 0;
        left: 0;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        pointer-events: none;
        transform: translate(-50%, -50%);
        z-index: 9999;
        opacity: 0;

        background: rgba(255, 255, 255, 0.10);
        -webkit-backdrop-filter: blur(2px) saturate(180%) contrast(105%);
        backdrop-filter: blur(2px) saturate(180%) contrast(105%);
        border: 1px solid rgba(255, 255, 255, 0.35);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.55),
            inset 0 -1px 2px rgba(255, 255, 255, 0.15),
            0 6px 18px -4px rgba(0, 0, 0, 0.22),
            0 2px 6px -1px rgba(0, 0, 0, 0.12);

        transition:
            opacity 0.15s ease,
            width 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
            height 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
            background 0.2s ease,
            border-color 0.2s ease;
    }
    body.cursor-on-dark .cursor-ring {
        background: rgba(255, 255, 255, 0.15);
        border-color: rgba(255, 255, 255, 0.5);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.7),
            inset 0 -1px 2px rgba(255, 255, 255, 0.2),
            0 6px 18px -4px rgba(0, 0, 0, 0.35),
            0 2px 6px -1px rgba(0, 0, 0, 0.2);
    }
    .cursor-ring.grow {
        width: 44px;
        height: 44px;
        background: rgba(255, 255, 255, 0.15);
    }
    body.cursor-on-dark .cursor-ring.grow {
        background: rgba(255, 255, 255, 0.20);
    }
}

/* Reduced motion: keep the custom cursor but drop the smooth lag transition */
@media (prefers-reduced-motion: reduce) {
    .cursor-ring {
        transition: opacity 0.15s ease, background 0.2s ease !important;
    }
}