:root {
    --bg-color: #000000;
    --surface-color: rgba(28, 28, 30, 0.65);
    --surface-border: rgba(255, 255, 255, 0.1);
    --text-primary: rgba(255, 255, 255, 0.95);
    --text-secondary: #8E8E93;
    --accent: #D6FD51;
    --accent-hover: #C2E93E;
    --accent-foreground: #151515;
    --brand-mint: #0BFC91;
    --font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* No `scroll-behavior: smooth` here on purpose — Lenis drives scrolling and the
   native smooth-scroll fights it. script.js routes in-page anchors through
   `lenis.scrollTo`, and re-enables this rule via `.no-lenis` when Lenis is
   unavailable or the visitor asked for reduced motion. */
html.no-lenis {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family);
    background-color: var(--bg-color);
    color: var(--text-primary);
    line-height: 1.5;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Typography & Utilities */
h1, h2, h3 {
    line-height: 1.1;
    letter-spacing: -0.03em;
    font-weight: 700;
}

a {
    color: var(--accent);
    text-decoration: none;
    transition: opacity 0.2s;
}

a:hover {
    opacity: 0.8;
}

.glass-panel {
    background: var(--surface-color);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border: 1px solid var(--surface-border);
    border-radius: 24px;
}

/* Product Tour — cropped UI fragments (assets/crop-*.png) */
.tour {
    max-width: 1200px;
    margin: 0 auto;
    padding: 8rem 2rem;
    background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(214,253,81,0.05) 0%, transparent 70%);
}

.tour-head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 5.5rem;
}

.tour-eyebrow {
    display: inline-block;
    color: var(--accent);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 1.1rem;
}

.tour-head h2 {
    font-size: clamp(2.2rem, 4vw, 3.25rem);
    line-height: 1.08;
    margin-bottom: 1rem;
}

.tour-head > p {
    color: var(--text-secondary);
    font-size: 1.1rem;
}

/* The fragments are already rounded cards on pure black, so they sit
   directly on the page — no extra frame or panel around them. */
.tour-shot img,
.tour-tile img,
.tour-strip img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 20px;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.tour-shot,
.tour-tile {
    margin: 0;
}

.tour-shot:hover img,
.tour-tile:hover img {
    transform: translateY(-6px);
}

/* Capability group header — splits the tour into named sections (Income,
   Spending, Wealth) so the page reads as a narrative rather than a gallery.
   Monarch and Origin both give every capability its own heading + copy +
   visual; this is the structural piece that was missing here. */
.tour-group {
    max-width: 640px;
    margin: 0 auto 3.5rem;
    text-align: center;
}

.tour-group h3 {
    font-size: clamp(1.9rem, 3vw, 2.6rem);
    line-height: 1.12;
    letter-spacing: -0.03em;
    margin-bottom: 0.85rem;
}

.tour-group > p {
    color: var(--text-secondary);
    font-size: 1.08rem;
    line-height: 1.6;
}

/* Alternating the image side stops four stacked feature rows from reading
   as one long left-hand column of text. */
.tour-feature--reverse .tour-copy {
    order: 2;
}

.tour-feature--reverse .tour-shot {
    order: 1;
}

/* Honesty note under a claim that is an estimate, not a filing. */
.tour-note {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--surface-border);
    color: rgba(255, 255, 255, 0.38);
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Signature feature: copy beside one large fragment */
.tour-feature {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 4rem;
    align-items: center;
    margin-bottom: 6.5rem;
}

.tour-copy h3 {
    font-size: clamp(1.8rem, 2.6vw, 2.4rem);
    letter-spacing: -0.03em;
    margin-bottom: 1rem;
}

.tour-copy p {
    color: var(--text-secondary);
    font-size: 1.08rem;
    line-height: 1.6;
    max-width: 40ch;
}

/* Grids — grouped by aspect ratio so rows stay visually even */
.tour-grid-3,
.tour-grid-2 {
    display: grid;
    margin-bottom: 6.5rem;
}

.tour-grid-3 {
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
}

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

/* The crops have different native aspect ratios, which left the captions
   in a row starting at different heights. Fitting each into a uniform box
   with object-fit:contain squares the rows up; the letterboxing is
   invisible because the crops' own padding and the page are both #000. */
.tour-grid-3 .tour-tile img,
.tour-grid-2 .tour-tile img {
    object-fit: contain;
    /* Anchor to the top so the card edges line up across a row; centring
       would leave the shorter cards floating at different heights. */
    object-position: center top;
}

.tour-grid-3 .tour-tile img {
    aspect-ratio: 1 / 1;
}

.tour-grid-2 .tour-tile img {
    aspect-ratio: 3 / 2;
}

.tour-tile figcaption {
    padding-top: 1.5rem;
}

.tour-tile h4 {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    letter-spacing: -0.01em;
}

.tour-tile p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.55;
}

/* Wide strip (the 3.3:1 YTD bar) */
.tour-strip {
    text-align: center;
}

.tour-strip h4 {
    font-size: 1.5rem;
    margin-bottom: 0.6rem;
    letter-spacing: -0.02em;
}

.tour-strip > p {
    color: var(--text-secondary);
    font-size: 1rem;
    max-width: 46ch;
    margin: 0 auto 2.25rem;
    line-height: 1.55;
}

.tour-strip img {
    max-width: 920px;
    margin: 0 auto;
}

/* Scroll reveal — the no-JS / no-GSAP path: a one-shot CSS transition driven by
   script.js adding .is-visible. */
[data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

/* When GSAP is driving, the container is shown immediately and its contents are
   scrubbed against scroll position instead. The transition has to go or it
   fights the per-frame inline writes and the scrub turns to mush. */
html.gsap-reveal [data-reveal] {
    transition: none;
}

@media (prefers-reduced-motion: reduce) {
    [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .tour-shot:hover img,
    .tour-tile:hover img {
        transform: none;
    }
}

@media (max-width: 900px) {
    .tour {
        padding: 5rem 1.25rem;
    }

    .tour-head {
        margin-bottom: 3.5rem;
    }

    .tour-feature {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        margin-bottom: 4.5rem;
    }

    /* One column: copy always leads, whatever side it takes on desktop. */
    .tour-feature--reverse .tour-copy,
    .tour-feature--reverse .tour-shot {
        order: 0;
    }

    .tour-group {
        margin-bottom: 2.5rem;
    }

    .tour-grid-3,
    .tour-grid-2 {
        grid-template-columns: 1fr;
        gap: 3rem;
        margin-bottom: 4.5rem;
    }

    .tour-copy p {
        max-width: none;
    }
}

/* Slogan — background video (assets/bg-feature-summary-chart.mp4) */
.slogan-section {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: 150px 20px;
    background: radial-gradient(circle at center, rgba(214,253,81,0.1) 0%, transparent 60%);
    display: flex;
    justify-content: center;
    align-items: center;
}

.slogan-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.42;
    z-index: 0;
}

.slogan-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 60% 60% at 50% 50%,
            rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.35) 60%, transparent 88%),
        linear-gradient(to bottom,
            var(--bg-color) 0%, rgba(0, 0, 0, 0.2) 22%,
            rgba(0, 0, 0, 0.2) 78%, var(--bg-color) 100%);
}

.slogan-container {
    text-align: center;
    position: relative;
    z-index: 5;
    max-width: 1000px;
}

.slogan-container h2 {
    font-size: 3.5rem;
    font-weight: 700;
    font-style: italic;
    line-height: 1.3;
    background: linear-gradient(135deg, #fff 0%, var(--accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

@media (max-width: 900px) {
    .slogan-container h2 {
        font-size: 2.5rem;
    }
}
/* The nav has no permanent plate. `--nav-solid` runs 0 → 1 and script.js scrubs
   it against hero scroll position, so the bar is invisible over the hero film
   and resolves into a surface only once there is content behind it. It defaults
   to 1 so that with JS off the nav is opaque and legible, as it was before. */
@property --nav-solid {
    syntax: "<number>";
    inherits: false;
    initial-value: 1;
}

.navbar {
    --nav-solid: 1;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
    background: rgba(8, 8, 8, calc(var(--nav-solid) * 0.88));
    border-bottom: 1px solid rgba(255, 255, 255, calc(var(--nav-solid) * 0.1));
}

.nav-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 600;
    font-size: 1.25rem;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

.logo-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    object-fit: cover;
}

.logo-icon.small {
    width: 24px;
    height: 24px;
}

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

.nav-links a:not(.btn-primary) {
    color: var(--text-secondary);
    font-size: 0.95rem;
    font-weight: 500;
    transition: color 0.2s;
}

.nav-links a:not(.btn-primary):hover {
    color: var(--text-primary);
}

/* Buttons */
.btn-primary {
    display: inline-block;
    background: var(--accent);
    color: var(--accent-foreground);
    padding: 0.7rem 1.4rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.95rem;
    border: none;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
    text-align: center;
}

.btn-primary:hover {
    background: var(--accent-hover);
    transform: scale(1.02);
    opacity: 1;
}

.btn-secondary {
    display: inline-block;
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    padding: 0.7rem 1.4rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.95rem;
    border: none;
    transition: background 0.2s;
    text-align: center;
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
}

.large {
    padding: 1rem 2rem;
    font-size: 1.05rem;
}

.full-width {
    width: 100%;
}

/* Hero background video (assets/bg-hero-loop.mp4) */
.hero-wrap {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    /* Held back so it reads as atmosphere, not as content competing
       with the headline and the lime CTA button. */
    opacity: 0.5;
}

/* Darkens the left side (where the copy sits) and the bottom edge, so
   white text keeps its contrast and the section blends into the page. */
.hero-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 70% 90% at 25% 50%,
            rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.6) 45%, transparent 78%),
        linear-gradient(to bottom,
            rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.15) 25%,
            rgba(0, 0, 0, 0.55) 80%, var(--bg-color) 100%);
}

/* Respect users who ask for less motion: freeze to the poster frame. */
@media (prefers-reduced-motion: reduce) {
    .hero-bg {
        display: none;
    }
    .hero-wrap {
        background-image: url("assets/bg-hero-loop-poster.jpg");
        background-size: cover;
        background-position: center;
    }
}

/* Hero Section */
.hero {
    position: relative;
    z-index: 2;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8rem 2rem 4rem;
    max-width: 1200px;
    margin: 0 auto;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.hero-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
}

.beta-badge {
    background: rgba(214, 253, 81, 0.15);
    color: var(--accent);
    padding: 0.4rem 1rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
}

.hero h1 {
    font-size: clamp(3rem, 5vw, 4.5rem);
    font-weight: 800;
    color: var(--text-primary);
}

.hero p {
    font-size: clamp(1.1rem, 2vw, 1.3rem);
    color: var(--text-secondary);
    max-width: 500px;
    line-height: 1.4;
}

.hero-actions {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.hero-mockup {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    perspective: 1000px;
}

.iphone-frame {
    position: relative;
    width: 280px;
    height: 580px;
    border: 12px solid #1c1c1e;
    border-radius: 40px;
    background-color: #000;
    box-shadow: 0 20px 60px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.1);
    overflow: hidden;
    transform: rotateY(-15deg) rotateX(5deg);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.iphone-frame:hover {
    transform: rotateY(0deg) rotateX(0deg) scale(1.02);
}

.iphone-notch {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 110px;
    height: 25px;
    background-color: #1c1c1e;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    z-index: 10;
}

.carousel-container {
    width: 100%;
    height: 100%;
    position: relative;
}

.carousel-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.carousel-slide.active {
    opacity: 1;
}

.carousel-nav {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    transform: translateY(-50%);
    z-index: 10;
    opacity: 0;
    transition: opacity 0.3s;
}

.iphone-frame:hover .carousel-nav {
    opacity: 1;
}

.carousel-nav button {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    cursor: pointer;
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.carousel-nav button:hover {
    background: rgba(255, 255, 255, 0.4);
}

.carousel-indicators {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}

.dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
    cursor: pointer;
    transition: background 0.3s;
}

.dot.active {
    background: white;
}

/* Features — flat. The particle clip that used to run here was generic stock
   texture sitting at 48% behind body copy; removing it is the single biggest
   legibility win on the page. What replaces it is one very low-contrast wash
   to stop the section reading as a dead black rectangle. */
.features-wrap {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%,
            rgba(214, 253, 81, 0.045) 0%, transparent 68%),
        var(--bg-color);
}

.features {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding: 7rem 2rem;
}

/* The frosted variant of these cards existed only to survive the video behind
   them. With the section flat there is nothing to blur, so they fall back to
   the plain fill defined on .feature-card — one less blur surface on the page. */

.section-header {
    text-align: center;
    margin-bottom: 4rem;
}

.section-header h2 {
    font-size: clamp(2.2rem, 4vw, 3.25rem);
    font-weight: 700;
    line-height: 1.08;
    margin-bottom: 0.75rem;
}

.section-header p {
    color: var(--text-secondary);
    font-size: 1.15rem;
}

/* Two columns, so four cards form an even 2x2 block. The old
   auto-fit/minmax rule dropped the fourth card onto a row by itself. */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

.feature-card {
    display: flex;
    flex-direction: column;
    padding: 2.5rem;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.028);
    border: 1px solid var(--surface-border);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.35s ease,
                background 0.35s ease;
}

.feature-card:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, 0.045);
    border-color: rgba(214, 253, 81, 0.28);
}

/* Wealth card — live progress ring (assets/bg-feature-wealth-ring.mp4).
   The clip is a lime ring on pure black, so it is composited with
   mix-blend-mode: screen instead of being masked: black contributes
   nothing and only the glow lands on the card. `isolation` keeps that
   blend inside the card rather than reaching the features video behind it. */
.feature-card--ring {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* Geometry, because none of these numbers are arbitrary. In the source the
   ring is dead-centre, the % readout sits inside it at ~0.05x the frame
   height, the lime band runs 0.28–0.33x and the tick marks 0.35–0.38x.
   Parking the element's centre 48px diagonally outside the card's top-right
   corner (offset 220 - 254 = -34px on each axis) puts the readout off-card
   with room to spare, drops the lime arc across the corner, and keeps the
   tick ring above y=135px — clear of the heading at y≈120 and well clear of
   the paragraph. Shrink the box and the arc turns into a smudge; grow it and
   the ticks land on the body copy. Re-derive both if you swap the clip. */
.feature-card--ring .card-ring {
    position: absolute;
    top: -254px;
    right: -254px;
    width: 440px;
    height: 440px;
    z-index: 0;
    pointer-events: none;
    opacity: 0.75;
    mix-blend-mode: screen;
}

.feature-card--ring .card-ring video {
    display: block;
    width: 100%;
    height: 100%;
    /* Square crop of a 16:9 source — trims the sides, keeps the ring whole. */
    object-fit: cover;
}

.feature-card--ring > *:not(.card-ring) {
    position: relative;
    z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
    .feature-card--ring .card-ring video {
        display: none;
    }

    .feature-card--ring .card-ring {
        background-image: url("assets/bg-feature-wealth-ring-poster.jpg");
        background-size: cover;
        background-position: center;
    }
}

.feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 1.75rem;
    border-radius: 15px;
    color: var(--accent);
    background: rgba(214, 253, 81, 0.1);
    border: 1px solid rgba(214, 253, 81, 0.2);
}

.feature-icon svg {
    width: 26px;
    height: 26px;
}

.feature-card h3 {
    font-size: 1.35rem;
    letter-spacing: -0.02em;
    margin-bottom: 0.75rem;
}

.feature-card p {
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.6;
}

/* Pushed to the bottom so the badge/link sits on a common baseline
   even when the cards' body copy differs in length. */
.feature-tag,
.feature-card .card-link {
    margin-top: auto;
    padding-top: 1.75rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.feature-tag {
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.feature-card .card-link {
    color: var(--accent);
}

@media (max-width: 780px) {
    .features {
        padding: 5rem 1.25rem;
    }

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

    .feature-card {
        padding: 2rem;
    }
}

/* Showcase Gallery */
.showcase {
    max-width: 1400px;
    margin: 0 auto;
    padding: 6rem 2rem;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
    padding: 2rem 0;
}

.gallery-img {
    width: 100%;
    border-radius: 24px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.1);
    transition: transform 0.3s;
    object-fit: cover;
}

.gallery-img:hover {
    transform: translateY(-10px) scale(1.02);
}

/* Privacy — flat, for the same reason as the features grid. This is the section
   whose whole job is to read as checkable fact; a shimmering shield loop behind
   the claims worked against that. The wash is cool rather than lime so the two
   flat sections don't read as the same slab. */
.privacy-wrap {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(ellipse 70% 55% at 50% 8%,
            rgba(120, 150, 170, 0.05) 0%, transparent 70%),
        var(--bg-color);
}

/* Privacy Section */
.privacy-section {
    max-width: 1000px;
    margin: 4rem auto;
    padding: 0 2rem;
}

.privacy-section {
    position: relative;
    z-index: 2;
}

/* Over video the flat panel fill turned muddy — same fix as the feature cards. */
.privacy-container {
    background: rgba(16, 17, 18, 0.62);
    backdrop-filter: blur(26px) saturate(150%);
    -webkit-backdrop-filter: blur(26px) saturate(150%);
    /* Grid, not flex: as a flex row the proof list collapsed to a ~150px
       column that wrapped one word per line. */
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    padding: 4rem;
    border-radius: 32px;
    gap: 3.5rem;
}

.privacy-text h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.privacy-text p {
    color: var(--text-secondary);
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 2rem;
}

/* Four checkable claims instead of a stock device render. The AI device clip
   that used to sit here rendered a notched screen on BOTH faces of the phone
   and both were blank — see HANDOFF.md. Claims here are the ones
   privacy-policy.html actually substantiates; don't add one it doesn't. */
.privacy-proof {
    list-style: none;
    display: grid;
    gap: 1.75rem;
    margin: 0;
    padding: 0;
}

.privacy-proof li {
    padding-left: 1.5rem;
    border-left: 2px solid rgba(214, 253, 81, 0.35);
}

.privacy-proof h3 {
    font-size: 1.05rem;
    letter-spacing: -0.01em;
    margin-bottom: 0.4rem;
}

.privacy-proof p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0;
}

@media (max-width: 900px) {
    .privacy-proof {
        gap: 1.4rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .slogan-bg {
        display: none;
    }
}

@media (max-width: 768px) {
    .privacy-container {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        padding: 2rem;
    }
}

/* Feedback Section */
.feedback {
    max-width: 800px;
    margin: 0 auto;
    padding: 6rem 2rem;
}

.feedback-container {
    padding: 4rem;
    border-radius: 32px;
}

.feedback-text {
    text-align: center;
    margin-bottom: 3rem;
}

.feedback-text h2 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.feedback-text p {
    color: var(--text-secondary);
    font-size: 1.1rem;
}

form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
    padding-left: 0.5rem;
}

input, select, textarea {
    background: rgba(255, 255, 255, 0.05);
    border: none;
    color: var(--text-primary);
    padding: 1rem 1.2rem;
    border-radius: 14px;
    font-family: inherit;
    font-size: 1rem;
    outline: none;
    transition: background 0.2s;
}

input:focus, select:focus, textarea:focus {
    background: rgba(255, 255, 255, 0.1);
}

#form-status {
    margin-top: 1rem;
    font-size: 0.9rem;
    text-align: center;
}

.status-success { color: #34C759; }
.status-error { color: #FF3B30; }

/* Footer */
footer {
    border-top: 1px solid var(--surface-border);
    padding: 4rem 2rem;
    margin-top: 4rem;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
}

.footer-links {
    display: flex;
    gap: 2rem;
}

.footer-links a {
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.copyright {
    color: var(--text-secondary);
    font-size: 0.85rem;
    opacity: 0.6;
}

/* Animations */
.fade-up {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUpAnim 0.8s forwards cubic-bezier(0.16, 1, 0.3, 1);
}

.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }

@keyframes fadeUpAnim {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 900px) {
    .hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 3rem;
        padding-top: 10rem;
    }

    .hero-content {
        align-items: center;
    }

    .hero-actions {
        flex-direction: column;
        width: 100%;
        max-width: 300px;
    }
    
    .nav-links {
        display: none;
    }

    .feedback-container {
        padding: 2rem;
    }
}

/* ------------------------------------------------------------------ *
 * Academy article pages (post-*.html)
 *
 * These rules were duplicated as an inline <style> block in every article.
 * They live here now so a new article is a content file rather than another
 * copy of ninety lines of layout.
 * ------------------------------------------------------------------ */
.post-header {
    padding: 8rem 2rem 4rem;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.post-header .post-tag {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--brand-mint);
    font-weight: 700;
    display: block;
    margin-bottom: 1rem;
}

.post-header h1 {
    font-size: 3rem;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.post-meta {
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.post-body {
    max-width: 700px;
    margin: 0 auto;
    padding: 0 2rem 8rem;
    font-size: 1.15rem;
    line-height: 1.8;
    color: #e5e5ea;
}

.post-body h2 {
    font-size: 2rem;
    color: white;
    margin: 3rem 0 1.5rem;
}

.post-body p {
    margin-bottom: 1.5rem;
}

.post-body ul {
    margin-bottom: 2rem;
    padding-left: 2rem;
}

.post-body li {
    margin-bottom: 0.5rem;
}

.post-hero-image {
    width: 100%;
    height: 400px;
    background: linear-gradient(45deg, #1c1c1e, #2c2c2e);
    border-radius: 24px;
    margin: 2rem 0 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 6rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* Callout for the one honesty caveat each article needs — the app models and
   estimates, it does not file or advise. */
.post-note {
    border-left: 2px solid var(--surface-border);
    padding: 0.25rem 0 0.25rem 1.25rem;
    margin: 0 0 2rem;
    color: rgba(255, 255, 255, 0.45);
    font-size: 1rem;
    line-height: 1.6;
}

.cta-box {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
    margin-top: 4rem;
}

.cta-box h3 {
    margin-bottom: 1rem;
    color: white;
}

@media (max-width: 900px) {
    .post-header {
        padding: 6rem 1.5rem 2.5rem;
    }

    .post-header h1 {
        font-size: 2.1rem;
    }

    .post-body {
        font-size: 1.05rem;
        padding: 0 1.5rem 5rem;
    }

    .post-body h2 {
        font-size: 1.6rem;
        margin: 2.25rem 0 1rem;
    }

    .post-hero-image {
        height: 240px;
        font-size: 4rem;
    }
}