/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Design tokens: generated from the app's asset-catalog values (light appearance) */
:root {
    color-scheme: light dark;
    --mist: #F3F6F6;
    --card: #FFFFFF;
    --fill: #E9EEEF;
    --hairline: #E5E9EA;
    --ink: #3A4A50;
    --ink-muted: #5E6E74;
    --sea-glass: #5E93A0;
    --teal-deep: #457585;
    --on-teal-deep: #FFFFFF;
    --teal-text: #3E6B7A;
    --sage: #7FA98F;
    --sage-text: #4E7A5F;
    --amber: #D9A461;
    --amber-text: #8A5E20;
    --terracotta: #C46F5F;
    --terracotta-text: #A14F3D;
    --brick: #9E4A44;
    --brick-text: #9E4A44;

    /* Legacy names kept as aliases for page-embedded styles */
    --primary-color: var(--teal-deep);
    --primary-deep: #3A6270;
    --secondary-color: var(--sea-glass);
    --dark-color: var(--ink);
    --light-color: var(--mist);
    --text-color: var(--ink-muted);
    --border-color: var(--hairline);
    --success-color: var(--sage-text);
    --mist-dark: #1A1D1E;
    --card-dark: #222629;
    --sea-glass-dark: #8FBECB;

    /* Hero/CTA band keeps its deep-teal surface in both themes (white text on top) */
    --gradient: linear-gradient(135deg, #457585, #3A6270);
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
}

/* Design tokens: dark appearance */
@media (prefers-color-scheme: dark) {
    :root {
        --mist: #1A1D1E;
        --card: #222629;
        --fill: #2A2F33;
        --hairline: #2E3438;
        --ink: #D3D8DA;
        --ink-muted: #8A969B;
        --sea-glass: #8FBECB;
        --teal-deep: #8FBECB;
        --on-teal-deep: #1A1D1E;
        --teal-text: #8FBECB;
        --sage: #6E9880;
        --sage-text: #A9C9B4;
        --amber: #C29655;
        --amber-text: #E0BC86;
        --terracotta: #B0705F;
        --terracotta-text: #D8A89A;
        --brick: #A86058;
        --brick-text: #D39A93;
    }
}

/* Forced-dark scope: renders its subtree with the dark tokens in both themes.
   In dark theme its background equals the page background, so the boundary
   comes from elevation: hairline border, card inner surfaces, soft shadow. */
.theme-dark {
    color-scheme: dark;
    --mist: #1A1D1E;
    --card: #222629;
    --fill: #2A2F33;
    --hairline: #2E3438;
    --ink: #D3D8DA;
    --ink-muted: #8A969B;
    --sea-glass: #8FBECB;
    --teal-deep: #8FBECB;
    --on-teal-deep: #1A1D1E;
    --teal-text: #8FBECB;
    --sage: #6E9880;
    --sage-text: #A9C9B4;
    --amber: #C29655;
    --amber-text: #E0BC86;
    --terracotta: #B0705F;
    --terracotta-text: #D8A89A;
    --brick: #A86058;
    --brick-text: #D39A93;
    background: var(--mist);
    color: var(--ink-muted);
    border: 1px solid var(--hairline);
    box-shadow: 0 24px 48px -16px rgb(0 0 0 / 0.35);
}

/* Tinted chip: 16% surface tint over the card color, text in the matching *Text token */
.tinted-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 600;
    background: color-mix(in srgb, var(--chip-surface, var(--sea-glass)) 16%, var(--card));
    color: var(--chip-text, var(--teal-text));
}

.tinted-chip--teal { --chip-surface: var(--sea-glass); --chip-text: var(--teal-text); }
.tinted-chip--sage { --chip-surface: var(--sage); --chip-text: var(--sage-text); }
.tinted-chip--amber { --chip-surface: var(--amber); --chip-text: var(--amber-text); }
.tinted-chip--terracotta { --chip-surface: var(--terracotta); --chip-text: var(--terracotta-text); }
.tinted-chip--brick { --chip-surface: var(--brick); --chip-text: var(--brick-text); }

/* Vendored Fluent flat icons (assets/icons/); sized by the surrounding font size */
.icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
}

/* Token-tinted monochrome icons (Fluent System, assets/icons/system/):
   the SVG is applied as a CSS mask so the glyph takes any token color and
   follows the theme. Usage: <span class="sysicon" style="--icon:url(/assets/icons/system/pill.svg)"></span> */
.sysicon {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    background-color: var(--teal-text);
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    line-height: 1.6;
    color: var(--ink-muted);
    background: var(--mist);
    overflow-x: hidden;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Navigation */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: color-mix(in srgb, var(--card) 95%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--hairline);
    z-index: 1000;
    padding: 1rem 0;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
}

.navbar.scrolled {
    padding: 0.5rem 0;
    box-shadow: var(--shadow-md);
}

.nav-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ink);
    text-decoration: none;
}

.logo-icon {
    width: 36px;
    height: 36px;
    object-fit: contain;
    border-radius: 8px;
}

.nav-links {
    display: flex;
    gap: 2rem;
    align-items: center;
}

.nav-links a {
    color: var(--ink-muted);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.nav-links a:hover {
    color: var(--teal-text);
}

.nav-links a.btn-primary,
.nav-links a.btn-primary:hover {
    color: var(--on-teal-deep);
}

.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}

.mobile-menu-toggle span {
    width: 24px;
    height: 2px;
    background: var(--ink);
    transition: all 0.3s ease;
}

/* Buttons */
.btn-primary {
    background: var(--teal-deep);
    color: var(--on-teal-deep);
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    text-decoration: none;
    font-weight: 600;
    display: inline-block;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-md);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-secondary {
    background: rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(10px);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    text-decoration: none;
    font-weight: 600;
    border: 2px solid rgba(255, 255, 255, 0.3);
    display: inline-block;
    transition: all 0.3s ease;
}

.btn-secondary:hover {
    background: rgba(0, 0, 0, 0.38);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
}

.btn-outline {
    background: transparent;
    color: var(--teal-text);
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    text-decoration: none;
    font-weight: 600;
    border: 2px solid var(--teal-text);
    display: inline-block;
    transition: all 0.3s ease;
}

.btn-outline:hover {
    background: var(--teal-deep);
    border-color: var(--teal-deep);
    color: var(--on-teal-deep);
}

/* Screenshot crop presented as a CephaloCard surface (app radius, hairline, soft shadow) */
.cephalo-card {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 1rem;
    border: 1px solid var(--hairline);
    background: var(--card);
    box-shadow: 0 12px 32px -12px rgb(0 0 0 / 0.25);
}

/* Small decorative dot in the intensity scale; always redundant with adjacent text */
.chip-dot {
    display: inline-block;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.chip-dot--sage { background: var(--sage); }
.chip-dot--amber { background: var(--amber); }
.chip-dot--terracotta { background: var(--terracotta); }
.chip-dot--brick { background: var(--brick); }
.chip-dot--teal { background: var(--sea-glass); }

/* Hero Section: mist surface, ink type, sea-glass accent */
.hero {
    padding: clamp(7rem, 14vw, 9.5rem) 0 clamp(3.5rem, 7vw, 5.5rem);
    background: var(--mist);
}

.hero-content {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(2.5rem, 6vw, 5rem);
    align-items: center;
}

.hero-text h1 {
    font-size: clamp(2.5rem, 5.5vw, 3.75rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin-bottom: 1.5rem;
    max-width: 14ch;
}

.accent-underline {
    text-decoration: underline;
    text-decoration-color: var(--sea-glass);
    text-decoration-thickness: 0.12em;
    text-underline-offset: 0.12em;
}

.hero-subtitle {
    font-size: clamp(1.05rem, 1.6vw, 1.2rem);
    color: var(--ink-muted);
    line-height: 1.7;
    max-width: 52ch;
    margin-bottom: 2rem;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 1.75rem;
}

.store-badge-link {
    display: inline-flex;
    transition: transform 0.3s ease;
}

.store-badge-link:hover {
    transform: translateY(-2px);
}

.store-badge-link img {
    display: block;
    height: 52px;
    width: auto;
}

.trust-chips {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 0;
}

.trust-chips .tinted-chip {
    border: 1px solid var(--hairline);
}

.hero-media {
    display: flex;
    justify-content: center;
    padding: 1.5rem 0;
}

.hero-crop {
    max-width: min(400px, 86%);
    transform: rotate(-4deg);
    box-shadow: 0 24px 48px -16px rgb(0 0 0 / 0.28);
}


.step h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 1rem;
}

.step p {
    color: var(--ink-muted);
    line-height: 1.6;
}

/* Clinical block: margin-notes treatment (main prose left, thin-ruled annotation column right) */
.clinical {
    padding: clamp(4rem, 8vw, 6rem) 0;
    background: var(--card);
}

.margin-notes {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(220px, 0.7fr);
    gap: clamp(2.5rem, 6vw, 5rem);
    max-width: 1020px;
    margin: 0 auto;
}

.margin-notes-main h2 {
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 1.25rem;
}

.clinical-intro {
    font-size: 1.05rem;
    color: var(--ink-muted);
    line-height: 1.7;
    max-width: 62ch;
    margin-bottom: 1.75rem;
}

.clinical-list {
    list-style: none;
    padding: 0;
    margin-bottom: 1.75rem;
}

.clinical-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.875rem;
    color: var(--ink-muted);
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Decorative intensity-scale bullets, cycling sage, amber, terracotta, brick */
.clinical-list li::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--sage);
    flex-shrink: 0;
    margin-top: 0.5rem;
}

.clinical-list li:nth-child(4n + 2)::before { background: var(--amber); }
.clinical-list li:nth-child(4n + 3)::before { background: var(--terracotta); }
.clinical-list li:nth-child(4n + 4)::before { background: var(--brick); }

.clinical-disclaimer {
    padding: 1rem 1.25rem;
    background: color-mix(in srgb, var(--sea-glass) 10%, var(--card));
    border: 1px solid var(--hairline);
    border-radius: 0.75rem;
    color: var(--ink);
    font-size: 0.9rem;
    line-height: 1.6;
}

.clinical-disclaimer .icon {
    margin-right: 0.25rem;
}

.margin-notes-aside {
    align-self: start;
    border-left: 1px solid var(--hairline);
    padding-left: clamp(1.5rem, 3vw, 2.5rem);
}

.margin-note + .margin-note {
    margin-top: 2rem;
}

.margin-note-label {
    font-variant-caps: small-caps;
    letter-spacing: 0.08em;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--teal-text);
    border-top: 1px solid var(--hairline);
    padding-top: 0.75rem;
    margin-bottom: 0.4rem;
}

.margin-note p {
    font-size: 0.9rem;
    color: var(--ink-muted);
    line-height: 1.6;
}

/* Week-strip story: the diary narrative that replaces the old feature grid */
.story {
    padding: clamp(4.5rem, 9vw, 6.5rem) 0;
    background: var(--card);
}

.story .section-header {
    margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.week-strip {
    display: flex;
    justify-content: center;
    gap: clamp(0.4rem, 1.5vw, 0.75rem);
    max-width: 560px;
    margin: 0 auto;
}

.week-day {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.week-day-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--ink-muted);
}

.week-cell {
    position: relative;
    width: 100%;
    max-width: 56px;
    aspect-ratio: 1;
    border-radius: 0.9rem;
    background: var(--fill);
    border: 1px solid var(--hairline);
    transition: background-color 0.6s ease, border-color 0.6s ease;
}

.week-cell--sage { background: var(--sage); border-color: var(--sage); }
.week-cell--amber { background: var(--amber); border-color: var(--amber); }
.week-cell--terracotta { background: var(--terracotta); border-color: var(--terracotta); }

.week-cell--aura::after {
    content: "";
    position: absolute;
    top: 7px;
    right: 7px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 2px solid var(--card);
    transition: opacity 0.6s ease;
}

/* JS-armed strip: colored cells start neutral and light up as beats scroll in.
   Without JS (or under reduced motion, where JS never arms it) the strip
   stays fully colored. */
html.js .week-strip--animate .week-cell[data-step]:not(.lit) {
    background: var(--fill);
    border-color: var(--hairline);
}

html.js .week-strip--animate .week-cell--aura:not(.lit)::after {
    opacity: 0;
}

.week-caption {
    text-align: center;
    margin-top: 1rem;
    font-size: 0.85rem;
    color: var(--ink-muted);
}

.beats {
    display: flex;
    flex-direction: column;
    gap: clamp(4rem, 8vw, 6.5rem);
    max-width: 1020px;
    margin: clamp(3.5rem, 7vw, 5.5rem) auto 0;
}

.beat {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}

.beat:nth-of-type(even) .beat-copy {
    order: 2;
}

.beat-kicker {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--ink-muted);
    margin-bottom: 0.6rem;
}

.beat h3 {
    font-size: clamp(1.4rem, 2.4vw, 1.75rem);
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 0.75rem;
}

.beat-copy > p:last-child {
    color: var(--ink-muted);
    line-height: 1.7;
    max-width: 48ch;
}

.beat-media {
    display: flex;
    justify-content: center;
}

.beat-media img {
    max-width: 480px;
}

.section-header {
    text-align: center;
    margin-bottom: 4rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.section-header h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 1rem;
}

.section-header p {
    font-size: 1.125rem;
    color: var(--ink-muted);
    line-height: 1.6;
}

/* Framed screenshot strip (full-phone sets) */
.screens-strip {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 4rem;
    margin-top: 4rem;
    flex-wrap: wrap;
}

.screens-figure {
    margin: 0;
    text-align: center;
    max-width: 300px;
}

.screens-figure .device-frame {
    width: 220px;
}

.screens-figure figcaption {
    margin-top: 1.25rem;
    color: var(--ink-muted);
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Full-phone screenshot section wrapper on the features page */
.screens {
    padding: clamp(4rem, 8vw, 6rem) 0;
    background: var(--mist);
}

.screens .screens-strip {
    margin-top: 0;
    gap: clamp(2rem, 4vw, 3rem);
}

.screens .screens-figure {
    max-width: 250px;
}

.screens .screens-figure .device-frame {
    width: 200px;
}

/* Inner-page hero: mist intro shared by /features and /privacy */
.page-hero {
    padding: clamp(7rem, 14vw, 9rem) 0 clamp(2.5rem, 5vw, 3.5rem);
    background: var(--mist);
    text-align: center;
}

.page-hero h1 {
    font-size: clamp(2.25rem, 4.5vw, 3.25rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0 auto 1.25rem;
    max-width: 24ch;
}

.page-lede {
    font-size: clamp(1.05rem, 1.6vw, 1.2rem);
    color: var(--ink-muted);
    line-height: 1.7;
    max-width: 58ch;
    margin-left: auto;
    margin-right: auto;
}

/* Everything-list: the complete feature inventory as a compact two-column
   hairline-ruled list, one Fluent icon and one line per feature */
.everything {
    padding: clamp(3.5rem, 7vw, 5rem) 0 clamp(4rem, 8vw, 5.5rem);
    background: var(--card);
}

.everything-list {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 clamp(2rem, 5vw, 4rem);
    max-width: 940px;
    margin: 0 auto;
}

.everything-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.7rem 0.25rem;
    border-top: 1px solid var(--hairline);
    color: var(--ink-muted);
    font-size: 0.95rem;
    line-height: 1.5;
}

.everything-list strong {
    display: block;
    font-size: 1.08rem;
    color: var(--ink);
    margin-bottom: 0.2rem;
}

.everything-list .sysicon {
    margin-top: 0.15rem;
}

.everything-list strong {
    color: var(--ink);
    font-weight: 600;
}

/* Component-crop gallery: app surfaces up close as CephaloCards */
.crop-gallery-section {
    padding: clamp(4rem, 8vw, 6rem) 0;
    background: var(--mist);
}

.crop-gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(2rem, 4vw, 3rem);
    max-width: 1020px;
    margin: 0 auto;
}

.crop-figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.crop-figure img {
    max-width: 440px;
}

.crop-figure figcaption {
    margin-top: 1rem;
    font-size: 0.9rem;
    color: var(--ink-muted);
    text-align: center;
    max-width: 44ch;
}

.gallery-caption {
    text-align: center;
    margin-top: clamp(2rem, 4vw, 2.75rem);
    font-size: 0.85rem;
    color: var(--ink-muted);
}

/* Feature detail blocks (MIDAS, medication, weather): claim-fact texture */
.feature-details {
    padding: clamp(4rem, 8vw, 6rem) 0;
    background: var(--card);
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.5rem, 4vw, 3rem);
    max-width: 1020px;
    margin: 0 auto;
}

.detail-block {
    border-top: 1px solid var(--hairline);
    padding-top: 1.25rem;
}

.detail-block-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.detail-block .sysicon {
    width: 1.35rem;
    height: 1.35rem;
}

.detail-block h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 0.5rem;
}

.detail-block p {
    font-size: 0.95rem;
    color: var(--ink-muted);
    line-height: 1.6;
}

/* Privacy page prose: margin-notes blocks stacked with breathing room */
.privacy-prose {
    padding: clamp(3.5rem, 7vw, 5rem) 0;
    background: var(--card);
}

.privacy-prose + .privacy-prose {
    padding-top: 0;
}

.privacy-prose .margin-notes-main h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ink);
    margin: 1.75rem 0 0.5rem;
}

.privacy-prose .margin-notes-main p {
    color: var(--ink-muted);
    line-height: 1.7;
    max-width: 62ch;
    margin-bottom: 1rem;
}

.privacy-prose .claim-verify {
    margin-top: 0.5rem;
}

.prose-cta {
    margin-top: 2.25rem;
}

/* Pricing Section: hairline borders, amber highlight on the optional tier */
.pricing {
    padding: clamp(4.5rem, 9vw, 6.5rem) 0;
    background: var(--mist);
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
    max-width: 800px;
    margin: 0 auto;
}

.pricing-card {
    background: var(--card);
    border: 1px solid var(--hairline);
    border-radius: 1rem;
    padding: 2.5rem;
    text-align: center;
    position: relative;
    box-shadow: var(--shadow-sm);
    transition: border-color 0.3s ease;
}

.pricing-card:hover {
    border-color: color-mix(in srgb, var(--ink-muted) 35%, var(--hairline));
}

.pricing-card.featured {
    border-color: color-mix(in srgb, var(--amber) 55%, var(--hairline));
}

.pricing-card.featured:hover {
    border-color: var(--amber);
}

/* The honest "Optional" badge as an amber tinted chip */
.pricing-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: color-mix(in srgb, var(--amber) 16%, var(--card));
    color: var(--amber-text);
    border: 1px solid color-mix(in srgb, var(--amber) 45%, var(--hairline));
    padding: 0.25rem 1rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
}

.pricing-tier {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 1rem;
}

.pricing-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}

.pricing-price .currency {
    font-size: 1.5rem;
    color: var(--ink-muted);
}

.pricing-price .amount {
    font-size: 3rem;
    font-weight: 700;
    color: var(--ink);
}

.pricing-price .period {
    font-size: 1.125rem;
    color: var(--ink-muted);
}

.pricing-annual {
    color: var(--sage-text);
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 2rem;
}

.pricing-features {
    list-style: none;
    text-align: left;
    margin-bottom: 2rem;
}

.pricing-features li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.5rem 0;
    color: var(--ink-muted);
}

.pricing-features li strong {
    color: var(--ink);
    font-weight: 600;
}

.pricing-features .check {
    color: var(--sage-text);
    font-weight: 700;
    flex-shrink: 0;
}

.pricing-features .muted {
    color: color-mix(in srgb, var(--ink-muted) 50%, transparent);
    font-weight: 700;
    flex-shrink: 0;
}

.pricing-card .btn-outline,
.pricing-card .btn-primary {
    width: 100%;
    padding: 0.875rem 2rem;
}

.pricing-note {
    text-align: center;
    margin-top: 3rem;
    color: var(--ink-muted);
    font-size: 0.875rem;
}

.check {
    color: var(--sage-text);
    font-weight: 700;
    font-size: 1.25rem;
}

/* Privacy claim block: typographic, no cards, three verify-linked facts */
.privacy-claim {
    padding: clamp(4.5rem, 9vw, 7rem) 0;
    background: var(--mist);
}

.claim-inner {
    max-width: 940px;
    margin: 0 auto;
}

.claim-statement {
    font-size: clamp(1.75rem, 3.8vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -0.015em;
    line-height: 1.2;
    color: var(--ink);
    margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.claim-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.5rem, 4vw, 3rem);
}

.claim-fact {
    border-top: 1px solid var(--hairline);
    padding-top: 1.25rem;
}

.claim-fact h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 0.5rem;
}

.claim-fact p {
    font-size: 0.95rem;
    color: var(--ink-muted);
    line-height: 1.6;
}

.claim-verify {
    margin-top: 0.75rem;
    font-size: 0.875rem;
}

.claim-verify a {
    color: var(--teal-text);
    font-weight: 600;
}

.claim-cta {
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

/* Self-demonstrating dark section: a forced-dark panel inside the light page */
.dark-demo {
    padding: clamp(4rem, 8vw, 6rem) 0;
    background: var(--mist);
}

.dark-panel {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
    border-radius: 1.5rem;
    padding: clamp(2rem, 5vw, 4rem);
}

.dark-panel-text h2 {
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 1.25rem;
}

.dark-panel-text > p {
    font-size: 1.05rem;
    color: var(--ink-muted);
    line-height: 1.75;
    margin-bottom: 1.75rem;
    max-width: 56ch;
}

.dark-panel-list {
    list-style: none;
    padding: 0;
}

.dark-panel-list li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 0.875rem;
    color: var(--ink-muted);
    line-height: 1.65;
}

.dark-panel-list li::before {
    content: "✓";
    color: var(--teal-text);
    font-weight: 700;
    margin-right: 0.75rem;
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.dark-panel-media {
    display: flex;
    justify-content: center;
}

.dark-panel-media img {
    max-width: 300px;
}

.dark-panel :focus-visible {
    outline-color: var(--teal-text);
}

/* FAQ Section: native details/summary accordions with intensity-dot markers */
.faq {
    padding: clamp(4.5rem, 9vw, 6.5rem) 0;
    background: var(--card);
}

.faq .section-header {
    margin-bottom: 3rem;
}

.faq-list {
    max-width: 760px;
    margin: 0 auto;
}

.faq-entry {
    border-top: 1px solid var(--hairline);
}

.faq-entry:last-child {
    border-bottom: 1px solid var(--hairline);
}

.faq-entry summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1.25rem 0.25rem;
    cursor: pointer;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ink);
}

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

.faq-entry summary::after {
    content: "+";
    margin-left: auto;
    color: var(--ink-muted);
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1;
    transition: transform 0.3s ease;
}

.faq-entry[open] summary::after {
    transform: rotate(45deg);
}

.faq-dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.faq-dot--sage { background: var(--sage); }
.faq-dot--amber { background: var(--amber); }
.faq-dot--terracotta { background: var(--terracotta); }
.faq-dot--brick { background: var(--brick); }

.faq-answer {
    padding: 0 2.5rem 1.5rem 1.45rem;
}

.faq-answer p {
    font-size: 0.95rem;
    color: var(--ink-muted);
    line-height: 1.7;
    max-width: 65ch;
}

/* CTA Section */
.cta {
    padding: 80px 0;
    background: var(--gradient);
    text-align: center;
}

.cta-content {
    max-width: 700px;
    margin: 0 auto;
}

.cta-content h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: white;
    margin-bottom: 1rem;
}

.cta-content p {
    font-size: 1.25rem;
    color: #ffffff;
    margin-bottom: 2rem;
    line-height: 1.6;
}

.cta-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1.5rem;
}

.cta-buttons .btn-primary {
    background: transparent;
    padding: 0;
    border: none;
    box-shadow: none;
    display: inline-flex;
    transition: transform 0.3s ease;
}

.cta-buttons .btn-primary:hover {
    transform: translateY(-2px);
}

.cta-buttons .btn-primary img {
    display: block;
    height: 56px;
    width: auto;
    filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.25));
}

.cta-note {
    color: #ffffff;
    font-size: 1rem;
}

/* Footer: fixed deep-ink surface in light theme, card surface in dark */
.footer {
    background: #3A4A50;
    color: white;
    padding: 60px 0 20px;
}

@media (prefers-color-scheme: dark) {
    .footer {
        background: var(--card);
        border-top: 1px solid var(--hairline);
    }
}

.footer-content {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 4rem;
    margin-bottom: 3rem;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.footer-brand h3 {
    margin: 0;
    color: white;
}

.footer-logo {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

.footer-brand .logo {
    color: white;
    margin-bottom: 1rem;
}

.footer-brand p {
    color: rgba(255, 255, 255, 0.7);
}

.footer-section h4 {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1rem;
    color: rgba(255, 255, 255, 0.9);
}

.footer-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-section li {
    margin-bottom: 0.5rem;
}

.footer-section a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-section a:hover {
    color: white;
}

.footer-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.footer-column h4 {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1rem;
    color: rgba(255, 255, 255, 0.9);
}

.footer-column a {
    display: block;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    margin-bottom: 0.5rem;
    transition: color 0.3s ease;
}

.footer-column a:hover {
    color: white;
}

.footer-bottom {
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
}

/* Responsive Design */
@media (max-width: 768px) {
    /* Without JS the navbar leaves the viewport edge and the links render
       as a static stacked list, so every page stays navigable. */
    html:not(.js) .navbar {
        position: static;
    }

    .nav-content {
        flex-wrap: wrap;
    }

    .nav-links {
        flex-basis: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        padding-top: 1rem;
    }

    html.js .nav-links {
        display: none;
    }

    html.js .nav-links.active {
        display: flex;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-basis: auto;
        background: var(--card);
        padding: 1rem 20px 1.5rem;
        border-top: 1px solid var(--hairline);
        border-bottom: 1px solid var(--hairline);
        box-shadow: var(--shadow-md);
    }

    html.js .mobile-menu-toggle {
        display: flex;
    }

    .mobile-menu-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    .mobile-menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -6px);
    }

    .hero-content {
        grid-template-columns: 1fr;
    }

    .hero-media {
        padding: 0.5rem 0 0;
    }

    .hero-crop {
        max-width: min(320px, 82%);
    }

    .screens-strip {
        gap: 2.5rem;
    }

    .week-cell {
        border-radius: 0.7rem;
    }

    .beat {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .beat:nth-of-type(even) .beat-copy {
        order: 0;
    }

    .beat-media img {
        max-width: 420px;
    }

    .claim-facts {
        grid-template-columns: 1fr;
    }

    .dark-panel {
        grid-template-columns: 1fr;
    }

    .dark-panel-media img {
        max-width: 260px;
    }

    .margin-notes {
        grid-template-columns: 1fr;
    }

    /* Margin notes collapse into bordered asides on mobile */
    .margin-notes-aside {
        border-left: none;
        padding-left: 0;
    }

    .margin-note {
        border: 1px solid var(--hairline);
        border-radius: 0.75rem;
        padding: 1rem 1.25rem;
    }

    .margin-note + .margin-note {
        margin-top: 1rem;
    }

    .margin-note-label {
        border-top: none;
        padding-top: 0;
    }

    .everything-list {
        grid-template-columns: 1fr;
    }

    .crop-gallery {
        grid-template-columns: 1fr;
    }

    .detail-grid {
        grid-template-columns: 1fr;
    }

    .pricing-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .footer-content {
        grid-template-columns: 1fr;
    }

    .footer-links {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}
/* Legal Pages Styles */
.legal-container {
    padding: 120px 0 80px;
    background: var(--card);
    min-height: 100vh;
}

.legal-content {
    max-width: 800px;
    margin: 0 auto;
}

.legal-content h1 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 1rem;
}

.legal-content h2 {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--ink);
    margin-top: 3rem;
    margin-bottom: 1rem;
    padding-top: 2rem;
    border-top: 1px solid var(--hairline);
}

.legal-content h2:first-of-type {
    border-top: none;
    padding-top: 0;
}

.legal-content h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--ink);
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.legal-content p {
    font-size: 1.125rem;
    line-height: 1.8;
    color: var(--ink-muted);
    margin-bottom: 1.5rem;
}

.legal-content ul,
.legal-content ol {
    margin-bottom: 1.5rem;
    padding-left: 2rem;
}

.legal-content li {
    font-size: 1.125rem;
    line-height: 1.8;
    color: var(--ink-muted);
    margin-bottom: 0.5rem;
}

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

.last-updated {
    font-style: italic;
    color: var(--ink-muted);
    opacity: 0.8;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--hairline);
}

.warning-box {
    background: color-mix(in srgb, var(--terracotta) 16%, var(--card));
    border: 2px solid var(--terracotta);
    border-radius: 0.5rem;
    padding: 1.5rem;
    margin: 2rem 0;
}

.warning-box p {
    color: var(--terracotta-text);
    margin-bottom: 1rem;
}

.warning-box ul {
    margin-bottom: 0;
}

.warning-box li {
    color: var(--terracotta-text);
}

.privacy-summary {
    background: var(--fill);
    border-radius: 1rem;
    padding: 2rem;
    margin: 3rem 0;
}

.privacy-summary h2 {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
    color: var(--teal-text);
}

.privacy-summary p {
    font-size: 1.25rem;
    color: var(--ink);
    margin-bottom: 0;
}

.legal-footer {
    margin-top: 4rem;
    padding-top: 2rem;
    border-top: 2px solid var(--hairline);
    font-style: italic;
    text-align: center;
    color: var(--ink-muted);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .legal-content h1 {
        font-size: 2rem;
    }

    .legal-content h2 {
        font-size: 1.5rem;
    }

    .legal-content h3 {
        font-size: 1.125rem;
    }

    .legal-content p,
    .legal-content li {
        font-size: 1rem;
    }

    .privacy-summary {
        padding: 1.5rem;
    }

    .privacy-summary p {
        font-size: 1.125rem;
    }
}

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

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    background: var(--teal-deep);
    color: var(--on-teal-deep);
    padding: 0.75rem 1.25rem;
    border-radius: 0 0 0.5rem 0;
    font-weight: 600;
    text-decoration: none;
}

.skip-link:focus {
    left: 0;
}

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

.cta :focus-visible,
.footer :focus-visible {
    outline-color: #fff;
}

/* Anchored sections clear the fixed navbar when jumped to */
section[id] {
    scroll-margin-top: 84px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Shared data / comparison tables */
.data-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    font-size: 0.95rem;
    background: var(--card);
    border: 1px solid var(--hairline);
    border-radius: 0.75rem;
    overflow: hidden;
}

.data-table th,
.data-table td {
    padding: 0.875rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--hairline);
}

.data-table thead th {
    background: var(--mist);
    color: var(--ink);
    font-weight: 600;
}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

.data-table th.center,
.data-table td.center {
    text-align: center;
}

.data-table tbody tr:hover td {
    background: var(--mist);
}

.data-table td .cell-note {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.85rem;
    color: var(--ink-muted);
}

.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-scroll .data-table {
    min-width: 640px;
}

/* Numbered source footnotes on comparison and content pages */
.footnotes {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--hairline);
    font-size: 0.875rem;
    color: var(--ink-muted);
}

.footnotes h2 {
    font-size: 1.1rem;
}

.footnotes ol {
    padding-left: 1.25rem;
}

.footnotes li {
    margin-bottom: 0.5rem;
    overflow-wrap: break-word;
}

.footnote-ref {
    font-size: 0.75em;
    vertical-align: super;
    line-height: 0;
    text-decoration: none;
    color: var(--teal-text);
    font-weight: 600;
}

/* Device frame for app screenshots */
.device-frame {
    position: relative;
    display: inline-block;
    padding: 0.6rem;
    background: linear-gradient(160deg, #3A4A50, #2A353A);
    border-radius: 2rem;
    box-shadow: 0 25px 60px rgba(58, 74, 80, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    max-width: 260px;
}

.device-frame img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 1.6rem;
}