/* ThyNaqsh — Refined editorial luxury */

:root {
    --font-display: 'Cormorant Garamond', Georgia, serif;
    --font-body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Inter', 'Segoe UI', system-ui, 'DM Sans', sans-serif;

    --gold: #b8962e;
    --gold-light: #c9a962;
    --gold-muted: #a88b4a;
    --gold-glow: rgba(184, 150, 46, 0.15);
    --accent-o: #e86533;
    --accent-o-hover: #d4552a;
    --accent-o-glow: rgba(232, 101, 51, 0.18);

    --success: #059669;
    --success-tint: rgba(5, 150, 105, 0.04);
    --danger: #dc2626;
    --danger-tint: rgba(220, 38, 38, 0.04);

    --bg: #ffffff;
    --bg-alt: #faf9f7;
    --bg-warm: #f7f5f2;
    --text: #1d1d1f;
    --text-secondary: #6e6e73;
    --text-tertiary: #86868b;
    --border: rgba(0, 0, 0, 0.08);
    --card-bg: #ffffff;
    --card-border: rgba(20, 20, 30, 0.045);
    --card-shadow: 0 1px 1px rgba(20, 20, 30, 0.03), 0 12px 32px -14px rgba(20, 20, 30, 0.10);
    --card-shadow-hover: 0 1px 1px rgba(20, 20, 30, 0.04), 0 18px 44px -16px rgba(20, 20, 30, 0.14);
    --nav-bg: rgba(255, 255, 255, 0.72);
    --nav-shadow: 0 1px 0 rgba(20, 20, 30, 0.06), 0 8px 24px -12px rgba(20, 20, 30, 0.10);

    --section-padding: 120px;
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-color-scheme: dark) {
    :root {
        --gold: #dfc88a;
        --gold-light: #e9d49e;
        --gold-muted: #c9a962;
        --gold-glow: rgba(223, 200, 138, 0.15);
        --accent-o: #f09060;
        --accent-o-hover: #e07e4d;
        --accent-o-glow: rgba(240, 144, 96, 0.22);

        --success: #34d399;
        --success-tint: rgba(52, 211, 153, 0.06);
        --danger: #f87171;
        --danger-tint: rgba(248, 113, 113, 0.06);

        --bg: #000000;
        --bg-alt: #0e0e0f;
        --bg-warm: #0a0a0a;
        --text: #f5f5f7;
        --text-secondary: #a1a1a6;
        --text-tertiary: #9a9aa0;
        --border: rgba(255, 255, 255, 0.08);
        --card-bg: rgba(28, 28, 30, 0.72);
        --card-border: rgba(255, 255, 255, 0.06);
        --card-shadow: 0 1px 0 rgba(255, 255, 255, 0.025), 0 16px 36px -18px rgba(0, 0, 0, 0.6);
        --card-shadow-hover: 0 1px 0 rgba(255, 255, 255, 0.035), 0 24px 48px -18px rgba(0, 0, 0, 0.7);
        --nav-bg: rgba(0, 0, 0, 0.72);
        --nav-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 24px -12px rgba(0, 0, 0, 0.6);
    }
}

/* Reset & Base */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    overflow-x: clip;
}

body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
    margin: 0;
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection {
    background-color: rgba(201, 169, 98, 0.25);
}

/* Navigation */
nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--nav-bg);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid transparent;
    transition: border-color 0.25s var(--ease-out-expo), box-shadow 0.25s var(--ease-out-expo);
}

body[data-scrolled] nav {
    border-bottom-color: var(--border);
    box-shadow: var(--nav-shadow);
}

.nav-inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48px;
}

.nav-logo-link {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text);
}

.nav-icon {
    width: 32px;
    height: auto;
}

.nav-wordmark {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.accent-o {
    color: var(--accent-o);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 28px;
}

.nav-links a {
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.2s;
}

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

.nav-cta {
    background: var(--accent-o);
    color: #ffffff !important;
    padding: 6px 16px;
    border-radius: 980px;
    font-weight: 500 !important;
    transition: background-color 0.2s !important;
}

.nav-cta:hover {
    background: var(--accent-o-hover);
    color: #ffffff !important;
}

/* Mobile menu */
.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    padding: 4px;
    color: var(--text);
    cursor: pointer;
}

.mobile-menu {
    display: none;
}

.mobile-menu a {
    display: block;
    padding: 10px 0;
    font-size: 0.9375rem;
    color: var(--text-secondary);
    text-decoration: none;
    border-bottom: 1px solid var(--border);
}

.mobile-menu a:last-child {
    border-bottom: none;
    color: var(--accent-o);
    font-weight: 500;
}

.hidden {
    display: none;
}

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

@media (max-width: 734px) {
    .nav-links { display: none; }
    .mobile-menu-btn { display: block; }

    .mobile-menu {
        display: block;
        padding: 0 22px;
        border-top: 1px solid transparent;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transition:
            max-height 0.28s var(--ease-out-expo),
            opacity 0.22s var(--ease-out-expo),
            padding 0.28s var(--ease-out-expo),
            border-color 0.22s var(--ease-out-expo);
    }

    .mobile-menu:not(.hidden) {
        max-height: 320px;
        opacity: 1;
        padding: 8px 22px 16px;
        border-top-color: var(--border);
    }
}

/* Hero */
.hero {
    text-align: center;
    padding: 160px 22px 72px;
    max-width: 720px;
    margin: 0 auto;
}

.hero-copy {
    display: contents;
}

@media (min-width: 1024px) {
    .hero {
        max-width: 980px;
        padding: 160px 32px 96px;
    }

    .hero-visual {
        margin-top: 72px;
        max-width: 880px;
    }
}

.hero h1 {
    font-family: var(--font-display);
    font-size: 4rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.05;
    margin: 0 0 18px;
}

.hero-tagline {
    font-family: var(--font-body);
    font-size: 1.375rem;
    color: var(--text);
    font-weight: 500;
    letter-spacing: -0.01em;
    margin: 0 0 14px;
}

.hero-sub {
    font-size: 1.0625rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 18px;
}

.hero-sub--note {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 0.9375rem;
    color: var(--text-tertiary);
    margin: 0 0 40px;
}

.hero-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.hero-fineprint {
    margin: 14px 0 0;
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-tertiary);
    letter-spacing: 0.02em;
}

.hero-visual {
    margin: 64px auto 0;
    max-width: 760px;
}


/* === Demo stage — two-phone Bump flow (9s loop) === */

.demo-stage {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: visible;
    border: none;
    background: transparent;
}

.demo-stage::before {
    content: "";
    position: absolute;
    inset: -12% -8%;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 48% 44% at 50% 56%, rgba(184, 150, 46, 0.07), transparent 60%),
        radial-gradient(ellipse 32% 28% at 50% 52%, rgba(255, 244, 214, 0.10), transparent 65%);
}

@media (prefers-color-scheme: dark) {
    .demo-stage::before {
        background:
            radial-gradient(ellipse 48% 44% at 50% 56%, rgba(223, 200, 138, 0.08), transparent 60%),
            radial-gradient(ellipse 32% 28% at 50% 52%, rgba(255, 244, 214, 0.04), transparent 65%);
    }
}

.demo-stage-grain { display: none; }

/* Bump effects — gold ripples + sparks at top contact point */
.demo-bump-spark,
.demo-bump-ring {
    position: absolute;
    top: 6%;
    left: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    z-index: 5;
}

.demo-bump-spark {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(232, 187, 73, 0.7), rgba(184, 150, 46, 0.22) 40%, transparent 70%);
    filter: blur(1px);
}

.demo-bump-ring {
    width: 5%;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1.5px solid var(--gold);
    filter: drop-shadow(0 0 6px rgba(184, 150, 46, 0.35));
}

@media (prefers-color-scheme: dark) {
    .demo-bump-ring {
        filter: drop-shadow(0 0 7px rgba(223, 200, 138, 0.32));
    }
}

.demo-bump-spark--1 { animation: bumpSparkA 13s ease-out 1s infinite; }
.demo-bump-spark--2 { animation: bumpSparkB 13s ease-out 1s infinite; }
.demo-bump-ring--1  { animation: bumpRingA  13s ease-out 1s infinite; }
.demo-bump-ring--3  { animation: bumpRingB  13s ease-out 1s infinite; }

@keyframes bumpSparkA {
    0%, 13% { opacity: 0; transform: translate(-50%, -50%) scale(0); }
    14.2%   { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
    18%     { opacity: 0; transform: translate(-50%, -50%) scale(1.4); }
    100%    { opacity: 0; transform: translate(-50%, -50%) scale(1.4); }
}

@keyframes bumpSparkB {
    0%, 63% { opacity: 0; transform: translate(-50%, -50%) scale(0); }
    64.2%   { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
    68%     { opacity: 0; transform: translate(-50%, -50%) scale(1.4); }
    100%    { opacity: 0; transform: translate(-50%, -50%) scale(1.4); }
}

@keyframes bumpRingA {
    0%, 13% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
    14.2%   { opacity: 0.9; transform: translate(-50%, -50%) scale(0.7); }
    23%     { opacity: 0; transform: translate(-50%, -50%) scale(3.4); }
    100%    { opacity: 0; transform: translate(-50%, -50%) scale(3.4); }
}

@keyframes bumpRingB {
    0%, 63% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
    64.2%   { opacity: 0.9; transform: translate(-50%, -50%) scale(0.7); }
    73%     { opacity: 0; transform: translate(-50%, -50%) scale(3.4); }
    100%    { opacity: 0; transform: translate(-50%, -50%) scale(3.4); }
}

/* Phones */
.demo-phone {
    position: absolute;
    top: 5%;
    height: 76%;
    /* iPhone 17 Pro Max aspect — matches the keepsake walkthrough phone
       so the two phone visuals on the page share the same proportions. */
    aspect-ratio: 1 / 2.0949;
    transform-origin: 50% 100%;
}

.demo-phone--owner {
    left: 17%;
    transform: rotate(0);
    animation: phoneOwner 13s ease-in-out 1s infinite;
}

.demo-phone--signer {
    right: 17%;
    transform: rotate(0);
    animation: phoneSigner 13s ease-in-out 1s infinite;
}

/* Bump physics: phones lean to ±11° around bottom-center → top corners just kiss at apex (no overlap). */
/* Bump motion: accelerate into the lean (ease-in), spring at contact, then
   ease-out smoothly back to rest. Per-keyframe animation-timing-function
   controls the segment that follows each keyframe. */
@keyframes phoneOwner {
    0%   { transform: translateX(-40%) rotate(-4deg); opacity: 0; animation-timing-function: ease-out; }
    7%   { opacity: 0; }                                                                                          /* hold invisible while tagline fades out */
    11%  { transform: rotate(0);     opacity: 1; animation-timing-function: cubic-bezier(0.45, 0, 0.7, 0.2); }    /* lean: ease-in */
    14%  { transform: rotate(11deg); opacity: 1; animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }  /* contact: spring overshoot */
    16%  { transform: rotate(7deg);  opacity: 1; animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1); }   /* recoil: ease-out */
    23%  { transform: rotate(0);     opacity: 1; }
    60%  { transform: rotate(0);     opacity: 1; animation-timing-function: cubic-bezier(0.45, 0, 0.7, 0.2); }
    64%  { transform: rotate(11deg); opacity: 1; animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }
    66%  { transform: rotate(7deg);  opacity: 1; animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1); }
    73%  { transform: rotate(0);     opacity: 1; }                                                                /* settled — received page visible */
    88%  { transform: rotate(0);     opacity: 1; animation-timing-function: ease-out; }                           /* hold ~1.5s+ for viewer to read "Signed & Sealed" */
    91%  { transform: rotate(0);     opacity: 0; }                                                                /* fade out */
    100% { transform: rotate(0);     opacity: 0; }
}

@keyframes phoneSigner {
    0%   { transform: translateX(40%) rotate(4deg); opacity: 0; animation-timing-function: ease-out; }
    7%   { opacity: 0; }
    11%  { transform: rotate(0);      opacity: 1; animation-timing-function: cubic-bezier(0.45, 0, 0.7, 0.2); }
    14%  { transform: rotate(-11deg); opacity: 1; animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }
    16%  { transform: rotate(-7deg);  opacity: 1; animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1); }
    23%  { transform: rotate(0);      opacity: 1; }
    60%  { transform: rotate(0);      opacity: 1; animation-timing-function: cubic-bezier(0.45, 0, 0.7, 0.2); }
    64%  { transform: rotate(-11deg); opacity: 1; animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }
    66%  { transform: rotate(-7deg);  opacity: 1; animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1); }
    73%  { transform: rotate(0);      opacity: 1; }
    88%  { transform: rotate(0);      opacity: 1; animation-timing-function: ease-out; }
    91%  { transform: rotate(0);      opacity: 0; }
    100% { transform: rotate(0);      opacity: 0; }
}

.demo-phone-frame {
    position: relative;
    width: 100%;
    height: 100%;
    /* Corner radius and padding match the keepsake walkthrough iPhone:
       14.9% of short-edge for the device radius, 2% of short-edge for the
       bezel — translated to the (x / y) percentage form so the corner
       stays a proper square in pixels regardless of aspect. */
    border-radius: 14.9% / 7.11%;
    padding: 2%;
    /* Natural-titanium gradient — same eight-stop ramp used for the
       keepsake phone's body. */
    background: linear-gradient(135deg,
        #a89f91 0%, #c5beb3 15%, #8a8174 30%,
        #a89f91 45%, #e8e2d6 55%, #a89f91 65%,
        #8a8174 80%, #c5beb3 100%);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.16),
        inset 0 1px 1px rgba(255, 255, 255, 0.40),
        inset 0 -1px 1px rgba(0, 0, 0, 0.20),
        0 2px 6px rgba(40, 28, 6, 0.10),
        0 14px 30px rgba(40, 28, 6, 0.18);
}

/* Subtle diagonal scratch pattern on the titanium body — same trick as
   the keepsake phone, just barely visible but breaks the flat gradient. */
.demo-phone-frame::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: repeating-linear-gradient(135deg,
        transparent 0px, rgba(255, 255, 255, 0.03) 1px,
        transparent 2px, rgba(0, 0, 0, 0.02) 3px);
    pointer-events: none;
}


.demo-phone-island {
    position: absolute;
    top: 3.2%;
    left: 50%;
    transform: translateX(-50%);
    width: 31%;
    height: 3.4%;
    background: #040405;
    border-radius: 999px;
    z-index: 3;
    box-shadow:
        inset 0 0 0 0.5px rgba(255, 255, 255, 0.06),
        inset 0 0.5px 0 rgba(255, 255, 255, 0.04);
}

.demo-phone-screen {
    position: relative;
    width: 100%;
    height: 100%;
    /* Screen radius matches the keepsake phone's --screen-radius (13% of
       short-edge), translated to the (x / y) percentage form. */
    border-radius: 13% / 6.21%;
    background: linear-gradient(180deg, #f8f5e6 0%, #f6f1e0 48%, #f3edd8 100%);
    overflow: hidden;
    box-shadow:
        inset 0 0 0 1px rgba(60, 40, 12, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        inset 0 -12px 22px -8px rgba(60, 40, 12, 0.07);
}

/* Page (full-screen content layer) */
.demo-page {
    position: absolute;
    inset: 14% 7% 7%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #2a2018;
    will-change: opacity, transform;
}

/* --- Owner: request letter --- */
.demo-page--request {
    gap: 9px;
    align-items: stretch;
    text-align: left;
    opacity: 0;
    animation: ownerRequest 13s ease-in-out 1s infinite;
}

.demo-letter {
    margin: 0;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.3;
    letter-spacing: -0.005em;
    color: #2a2018;
}

.demo-letter--ask {
    margin-top: 6px;
    color: #8a6b1a;
    font-weight: 500;
}

/* Scan-to-sign block: a clean square with diagonal corner brackets,
   evoking a QR-code finder pattern. */
.demo-scan {
    position: relative;
    align-self: center;
    margin: 12px auto 0;
    width: 70%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.demo-scan-corner {
    position: absolute;
    width: 14px;
    height: 14px;
    border-color: rgba(40, 28, 8, 0.7);
    border-style: solid;
    border-width: 0;
}

.demo-scan-corner--tl {
    top: 0;
    left: 0;
    border-top-width: 1.5px;
    border-left-width: 1.5px;
}

.demo-scan-corner--br {
    bottom: 0;
    right: 0;
    border-bottom-width: 1.5px;
    border-right-width: 1.5px;
}

.demo-scan-text {
    font-family: var(--font-body);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(40, 28, 8, 0.85);
    white-space: nowrap;
}

@keyframes ownerRequest {
    0%, 6%   { opacity: 0; }
    9%       { opacity: 1; }
    13%      { opacity: 1; }                       /* held through bump 1 lean */
    16%      { opacity: 0.6; }                     /* dims at contact */
    24%      { opacity: 0; }                       /* gone after recoil */
    100%     { opacity: 0; }
}

/* --- Owner: waiting --- */
.demo-page--waiting {
    opacity: 0;
    animation: ownerWaiting 13s ease-in-out 1s infinite;
}

.demo-waiting-line {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: 1.05rem;
    line-height: 1.3;
    color: rgba(60, 40, 12, 0.78);
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    text-align: center;
    letter-spacing: -0.005em;
}

.demo-dots {
    display: inline-flex;
    gap: 2px;
    margin-left: 2px;
    vertical-align: baseline;
}

.demo-dots span {
    width: 2.5px;
    height: 2.5px;
    border-radius: 50%;
    background: #b8962e;
    opacity: 0.45;
    animation: dotPulse 1.05s ease-in-out infinite;
}

.demo-dots span:nth-child(2) { animation-delay: 0.18s; }
.demo-dots span:nth-child(3) { animation-delay: 0.36s; }

@keyframes dotPulse {
    0%, 100% { opacity: 0.3; transform: scale(0.85); }
    50%      { opacity: 1;   transform: scale(1); }
}

@keyframes ownerWaiting {
    0%, 24%  { opacity: 0; transform: translateX(0); }
    28%      { opacity: 1; transform: translateX(0); }
    68%      { opacity: 1; transform: translateX(0); }
    72%      { opacity: 0; transform: translateX(-40%); }
    100%     { opacity: 0; transform: translateX(-40%); }
}

/* --- Owner: received (slides in from right after bump 2) --- */
.demo-page--received {
    gap: 2px;
    opacity: 0;
    transform: translateX(100%);
    animation: ownerReceived 13s ease-out 1s infinite;
}

@keyframes ownerReceived {
    0%, 69% { opacity: 0; transform: translateX(100%); }
    71%     { opacity: 1; transform: translateX(60%); }
    73%     { opacity: 1; transform: translateX(0); }   /* received page settled */
    91%     { opacity: 1; transform: translateX(0); }   /* hold (parent phone fades 88-91) */
    94%     { opacity: 0; transform: translateX(0); }
    100%    { opacity: 0; transform: translateX(0); }
}

/* --- Signer: blank (dark page) --- */
.demo-page--blank {
    opacity: 1;
    animation: signerBlank 13s ease-in-out 1s infinite;
}

@keyframes signerBlank {
    0%, 22%  { opacity: 1; }
    26%      { opacity: 0; }
    100%     { opacity: 0; }
}

/* --- Signer: signed page --- */
.demo-page--signed {
    gap: 2px;
    opacity: 0;
    animation: signerPage 13s ease-out 1s infinite;
}

@keyframes signerPage {
    0%, 22%  { opacity: 0; }
    25%      { opacity: 1; }
    91%      { opacity: 1; }
    94%      { opacity: 0; }
    100%     { opacity: 0; }
}

/* --- Shared signed/received page typography (matches sample.png aesthetic) --- */
/* Strokes are the hero of the demo. Text around them is intentionally small
   so the signature reads as the focal element with breathing room. */
.demo-page-inscription {
    margin: 0;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: 0.85rem;
    line-height: 1.3;
    letter-spacing: -0.005em;
    color: #2a2018;
    max-width: 94%;
}

.demo-signature,
.demo-final-sig {
    width: 94%;
    height: 52px;
    flex: none;
    margin: 2px auto;
    display: block;
    fill: none;
    stroke: #221610;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 2;
}

.demo-signature {
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    animation: demoSig 13s ease-in-out 1s infinite;
}

.demo-final-sig { stroke-dashoffset: 0; }

@keyframes demoSig {
    0%, 38%  { stroke-dashoffset: 600; }
    52%      { stroke-dashoffset: 0; }
    100%     { stroke-dashoffset: 0; }
}

.demo-page-signer {
    margin: 2px 0 0;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: -0.005em;
    color: #1a1410;
}

.demo-page-date {
    margin: 0;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 0.5rem;
    color: rgba(60, 40, 12, 0.78);
    letter-spacing: 0.02em;
    line-height: 1.4;
    white-space: nowrap;
}

/* Name appears BEFORE strokes draw — sets context "Taylor is signing".
   Date appears AFTER strokes (~50ms post-signature, alongside the check). */
.demo-page--signed .demo-page-signer {
    opacity: 0;
    animation: signerName 13s ease-out 1s infinite;
}

.demo-page--signed .demo-page-date {
    opacity: 0;
    animation: signerDate 13s ease-out 1s infinite;
}

/* Signer name + date appear together with the page so the keepsake reads as
   a complete card before the icons + strokes fill in over it. */
@keyframes signerName {
    0%, 22%  { opacity: 0; }
    25%      { opacity: 1; }
    91%      { opacity: 1; }
    94%      { opacity: 0; }
    100%     { opacity: 0; }
}

@keyframes signerDate {
    0%, 22%  { opacity: 0; }
    25%      { opacity: 1; }
    91%      { opacity: 1; }
    94%      { opacity: 0; }
    100%     { opacity: 0; }
}

.demo-page-check {
    margin-top: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px 3px 6px;
    border-radius: 999px;
    background: color-mix(in oklab, var(--success) 9%, transparent);
    border: 1px solid color-mix(in oklab, var(--success) 22%, transparent);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 -0.5px 0 color-mix(in oklab, var(--success) 14%, transparent);
    color: #036348;
    font-family: var(--font-body);
    font-size: 0.5rem;
    font-weight: 650;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    backdrop-filter: blur(6px) saturate(140%);
    -webkit-backdrop-filter: blur(6px) saturate(140%);
}

.demo-page-check svg { width: 8px; height: 8px; }

/* "Signed & Sealed" is wider than "Signed" — compress letter-spacing further
   so it sits comfortably inside the owner phone bezel. */
.demo-page-check--sealed {
    letter-spacing: 0.035em;
}

.demo-page--signed .demo-page-check {
    opacity: 0;
    transform: translateY(4px);
    animation: signerCheck 13s ease-out 1s infinite;
}

@keyframes signerCheck {
    0%, 53%  { opacity: 0; transform: translateY(4px); }
    55%      { opacity: 1; transform: translateY(0); }
    91%      { opacity: 1; transform: translateY(0); }
    94%      { opacity: 0; transform: translateY(0); }
    100%     { opacity: 0; transform: translateY(0); }
}


/* Beat strip below the phones */
.demo-beats {
    position: absolute;
    left: 50%;
    bottom: 5%;
    transform: translateX(-50%);
    display: flex;
    gap: 26px;
    z-index: 4;
    padding-bottom: 8px;
}

.demo-beats::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--border);
    opacity: 0.7;
}

.demo-beat {
    position: relative;
    font-family: var(--font-body);
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.demo-beat-label { display: inline-block; }

.demo-beat--1 .demo-beat-label { animation: beatLabel1 13s ease-in-out 1s infinite; }
.demo-beat--2 .demo-beat-label { animation: beatLabel2 13s ease-in-out 1s infinite; }
.demo-beat--3 .demo-beat-label { animation: beatLabel3 13s ease-in-out 1s infinite; }
.demo-beat--4 .demo-beat-label { animation: beatLabel4 13s ease-in-out 1s infinite; }

@keyframes beatLabel1 {
    0%, 5%, 25%, 100% { color: var(--text-tertiary); }
    8%, 22%           { color: var(--gold); }
}

@keyframes beatLabel2 {
    0%, 24%, 54%, 100% { color: var(--text-tertiary); }
    26%, 52%           { color: var(--gold); }
}

@keyframes beatLabel3 {
    0%, 53%, 63%, 100% { color: var(--text-tertiary); }
    55%, 61%           { color: var(--gold); }
}

@keyframes beatLabel4 {
    0%, 62%, 99%, 100% { color: var(--text-tertiary); }
    64%, 96%           { color: var(--gold); }
}

/* === Icon row (signer animates; owner inherits the same row statically) === */
.demo-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    height: 16px;
    margin: 4px 0 3px;
    position: relative;
    flex: none;
}

.demo-icon {
    /* position: static so labels position relative to .demo-page--signed below */
    position: static;
    width: 16px;
    height: 16px;
    display: inline-block;
    color: rgba(40, 28, 8, 0.85);
    will-change: transform, opacity;
}

.demo-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Labels are ALL positioned at the bottom-center of the phone page;
   only one is visible at a time, sliding up from below the screen edge. */
.demo-icon-label {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-body);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(40, 28, 8, 0.92);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
}

/* Signer's icons slide UP from below sequentially, each ~420ms (3% of 9s loop). */
.demo-page--signed .demo-icon {
    opacity: 0;
    transform: translateY(12px);
}

.demo-page--signed .demo-icon--1 { animation: iconDrop1 13s ease-out 1s infinite; }
.demo-page--signed .demo-icon--2 { animation: iconDrop2 13s ease-out 1s infinite; }
.demo-page--signed .demo-icon--3 { animation: iconDrop3 13s ease-out 1s infinite; }
.demo-page--signed .demo-icon--4 { animation: iconDrop4 13s ease-out 1s infinite; }
.demo-page--signed .demo-icon--5 { animation: iconDrop5 13s ease-out 1s infinite; }
.demo-page--signed .demo-icon--6 { animation: iconDrop6 13s ease-out 1s infinite; }

.demo-page--signed .demo-icon-label--1 { animation: iconLabel1 13s ease-in-out 1s infinite; }
.demo-page--signed .demo-icon-label--2 { animation: iconLabel2 13s ease-in-out 1s infinite; }
.demo-page--signed .demo-icon-label--3 { animation: iconLabel3 13s ease-in-out 1s infinite; }
.demo-page--signed .demo-icon-label--4 { animation: iconLabel4 13s ease-in-out 1s infinite; }
.demo-page--signed .demo-icon-label--5 { animation: iconLabel5 13s ease-in-out 1s infinite; }
.demo-page--signed .demo-icon-label--6 { animation: iconLabel6 13s ease-in-out 1s infinite; }

/* Owner's received page: icons render statically (transferred with the page). */
.demo-page--received .demo-icon { opacity: 1; transform: translateY(0); }
.demo-page--received .demo-icon-label { display: none; }

/* Icons drop sequentially after the page text is already visible.
   6 icons span 26% → 36% of the loop (~10% / 900ms total), then signature
   strokes draw 38% → 52%, badge appears at 55%. */
@keyframes iconDrop1 {
    0%, 25%   { opacity: 0; transform: translateY(12px); }
    27%       { opacity: 0.85; transform: translateY(2px); }
    28%       { opacity: 1; transform: translateY(0); }
    91%       { opacity: 1; transform: translateY(0); }
    94%, 100% { opacity: 0; transform: translateY(0); }
}
@keyframes iconDrop2 {
    0%, 27%   { opacity: 0; transform: translateY(12px); }
    29%       { opacity: 0.85; transform: translateY(2px); }
    30%       { opacity: 1; transform: translateY(0); }
    91%       { opacity: 1; transform: translateY(0); }
    94%, 100% { opacity: 0; transform: translateY(0); }
}
@keyframes iconDrop3 {
    0%, 29%   { opacity: 0; transform: translateY(12px); }
    31%       { opacity: 0.85; transform: translateY(2px); }
    32%       { opacity: 1; transform: translateY(0); }
    91%       { opacity: 1; transform: translateY(0); }
    94%, 100% { opacity: 0; transform: translateY(0); }
}
@keyframes iconDrop4 {
    0%, 31%   { opacity: 0; transform: translateY(12px); }
    33%       { opacity: 0.85; transform: translateY(2px); }
    34%       { opacity: 1; transform: translateY(0); }
    91%       { opacity: 1; transform: translateY(0); }
    94%, 100% { opacity: 0; transform: translateY(0); }
}
@keyframes iconDrop5 {
    0%, 33%   { opacity: 0; transform: translateY(12px); }
    35%       { opacity: 0.85; transform: translateY(2px); }
    36%       { opacity: 1; transform: translateY(0); }
    91%       { opacity: 1; transform: translateY(0); }
    94%, 100% { opacity: 0; transform: translateY(0); }
}
@keyframes iconDrop6 {
    0%, 35%   { opacity: 0; transform: translateY(12px); }
    37%       { opacity: 0.85; transform: translateY(2px); }
    38%       { opacity: 1; transform: translateY(0); }
    91%       { opacity: 1; transform: translateY(0); }
    94%, 100% { opacity: 0; transform: translateY(0); }
}

/* Labels fade in/out fixed in place (no slide), one at a time as each icon lands. */
@keyframes iconLabel1 {
    0%, 26%  { opacity: 0; }
    27%      { opacity: 0.95; }
    29%      { opacity: 0; }
    100%     { opacity: 0; }
}
@keyframes iconLabel2 {
    0%, 28%  { opacity: 0; }
    29%      { opacity: 0.95; }
    31%      { opacity: 0; }
    100%     { opacity: 0; }
}
@keyframes iconLabel3 {
    0%, 30%  { opacity: 0; }
    31%      { opacity: 0.95; }
    33%      { opacity: 0; }
    100%     { opacity: 0; }
}
@keyframes iconLabel4 {
    0%, 32%  { opacity: 0; }
    33%      { opacity: 0.95; }
    35%      { opacity: 0; }
    100%     { opacity: 0; }
}
@keyframes iconLabel5 {
    0%, 34%  { opacity: 0; }
    35%      { opacity: 0.95; }
    37%      { opacity: 0; }
    100%     { opacity: 0; }
}
@keyframes iconLabel6 {
    0%, 36%  { opacity: 0; }
    37%      { opacity: 0.95; }
    39%      { opacity: 0; }
    100%     { opacity: 0; }
}

/* === Tagline overlay — the demo's closing message. Zooms in over the empty
   stage after the phones fade out (94% of loop), holds ~1.3s, then fades
   for the next loop's phone re-entrance. === */
.demo-tagline {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 86%;
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: none;
    z-index: 10;
}

.demo-tagline-primary {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 600;
    font-size: 2.5rem;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--text);
    margin: 0 0 10px;
    opacity: 0;
    transform: scale(0.86);
    animation: taglinePrimary 13s ease-out 1s infinite;
}

.demo-tagline-secondary {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--text-secondary);
    margin: 0;
    letter-spacing: 0.01em;
    opacity: 0;
    transform: scale(0.92);
    animation: taglineSecondary 13s ease-out 1s infinite;
}

.demo-tagline-dot {
    display: inline-block;
    margin: 0 0.5em;
    color: var(--accent-o);
    font-style: normal;
    font-weight: 700;
    transform: translateY(-0.08em);
}

/* Tagline timing inside 13s loop — received page held ~1s, then tagline:
   83-88% → received page fully visible inside owner phone (≈1s read time)
   88-91% → phones fade out (clear stage)
   92-95% → tagline fades in + scales up (after stage is empty)
   95% → 100% → 0% → 6% → held visible ≈ 2s across loop wrap
   6-7% → tagline fades out (before phones begin re-entry at 7-11%) */
@keyframes taglinePrimary {
    0%      { opacity: 1; transform: scale(1); }
    6%      { opacity: 0; transform: scale(0.94); }
    91%     { opacity: 0; transform: scale(0.86); }
    95%     { opacity: 1; transform: scale(1); }
    100%    { opacity: 1; transform: scale(1); }
}

@keyframes taglineSecondary {
    0%      { opacity: 1; transform: scale(1); }
    7%      { opacity: 0; transform: scale(0.92); }
    92%     { opacity: 0; transform: scale(0.92); }
    97%     { opacity: 1; transform: scale(1); }
    100%    { opacity: 1; transform: scale(1); }
}

/* Dark mode keeps the same titanium body (the keepsake phone does too —
   it's a fixed material in both themes). Only the surrounding shadow
   needs to lift: a brighter outer hairline so the bezel separates from
   the dark page, and a deeper ambient drop so the phone reads as
   floating rather than sinking. */
@media (prefers-color-scheme: dark) {
    .demo-phone-frame {
        box-shadow:
            0 0 0 1px rgba(255, 255, 255, 0.10),
            inset 0 1px 1px rgba(255, 255, 255, 0.40),
            inset 0 -1px 1px rgba(0, 0, 0, 0.20),
            0 2px 8px rgba(0, 0, 0, 0.45),
            0 18px 36px rgba(0, 0, 0, 0.55);
    }
}

/* Responsive — mobile reorchestrates as single-phone-at-a-time with side-bump */
@media (max-width: 734px) {
    /* Mobile keyframes slide phones to left:-30% / left:130% (fully off-stage).
       overflow:hidden clips them so the document doesn't widen past the viewport
       during animation, which on iOS Safari causes the page to zoom/scroll.
       Stage is intentionally taller than the phone so there's breathing room
       above and below — the phone stays crisp and the mask only catches the
       shadow tail (not the phone body). */
    .demo-stage           {
        aspect-ratio: 2 / 3;
        overflow: hidden;
        -webkit-mask-image: linear-gradient(to bottom, black 0, black 95%, transparent 100%);
        mask-image: linear-gradient(to bottom, black 0, black 95%, transparent 100%);
    }

    /* Re-tune the warm backdrop for the mobile aspect (3:4) and the new clip:
       inset:0 pins the gradient to the stage box, broader ellipse + later
       transparent stop spreads the falloff so the warm tint dissolves
       imperceptibly into the page bg instead of stopping at a visible edge. */
    .demo-stage::before {
        inset: 0;
        background:
            radial-gradient(ellipse 70% 55% at 50% 50%, rgba(184, 150, 46, 0.05), transparent 80%),
            radial-gradient(ellipse 46% 34% at 50% 48%, rgba(255, 244, 214, 0.07), transparent 85%);
    }

    /* Beat strip removed on mobile (the slide-in/out choreography conveys the beats). */
    .demo-beats           { display: none; }

    /* Bump effects move from top contact (desktop) to side-edge contact (mobile). */
    .demo-bump-spark,
    .demo-bump-ring       { top: 50%; }

    /* Phones are large but sit inside the taller stage with ~5% breathing room
       above and ~10% below — leaving the mask zone (95%–100%) clear for the
       shadow tail to dissolve into the page without softening the phone body.
       Drop-shadow is soft + diffuse; mobile keyframes animate `left` to slide
       phones on and off. */
    .demo-phone {
        height: 84%;
        top: 5%;
        right: auto;
        transform: translateX(-50%);
        transform-origin: 50% 50%;
        filter: drop-shadow(0 6px 26px rgba(40, 28, 6, 0.18));
    }

    .demo-phone--owner {
        left: 50%;
        animation: phoneOwnerMobile 13s ease-in-out 1s infinite;
    }

    .demo-phone--signer {
        left: 50%;
        animation: phoneSignerMobile 13s ease-in-out 1s infinite;
    }

    /* Owner has no use for a "Waiting…" page on mobile (it's off-stage during signing). */
    .demo-page--waiting   { display: none; }

    /* Bigger phone → bigger, more legible typography. */
    .demo-page            { inset: 14% 8% 8%; }
    .demo-letter          { font-size: 1.1rem; line-height: 1.32; }
    .demo-scan            { width: 60%; margin-top: 14px; }
    .demo-scan-corner     { width: 18px; height: 18px; border-width: 0; }
    .demo-scan-corner--tl { border-top-width: 2px; border-left-width: 2px; }
    .demo-scan-corner--br { border-bottom-width: 2px; border-right-width: 2px; }
    .demo-scan-text       { font-size: 0.78rem; letter-spacing: 0.12em; }
    .demo-page-inscription { font-size: 0.95rem; line-height: 1.3; }
    .demo-page-signer     { font-size: 1.05rem; }
    .demo-page-date       { font-size: 0.56rem; letter-spacing: 0.02em; }
    .demo-page-check      { font-size: 0.56rem; padding: 3px 9px 3px 7px; }
    .demo-page-check svg  { width: 9px; height: 9px; }
    .demo-page-check--sealed { letter-spacing: 0.03em; }
    .demo-signature, .demo-final-sig { height: 64px; width: 94%; }

    /* Icon row uses tighter gap on mobile so 6 fit comfortably. */
    .demo-icons           { gap: 9px; height: 18px; margin: 5px 0 3px; }
    .demo-icon            { width: 18px; height: 18px; }
    .demo-icon-label      { font-size: 0.62rem; }

    .demo-tagline-primary  { font-size: 1.85rem; margin-bottom: 8px; }
    .demo-tagline-secondary { font-size: 0.875rem; }
    .demo-tagline-dot      { margin: 0 0.4em; }
}

@media (max-width: 480px) {
    .demo-stage           { aspect-ratio: 3 / 4; }
    .demo-page            { inset: 13% 8% 8%; }
    .demo-letter          { font-size: 0.95rem; }
    .demo-page-inscription { font-size: 0.88rem; }
    .demo-page-signer     { font-size: 0.98rem; }
    .demo-icons           { gap: 8px; height: 17px; }
    .demo-icon            { width: 17px; height: 17px; }
    .demo-tagline-primary  { font-size: 1.45rem; }
    .demo-tagline-secondary { font-size: 0.78rem; }
}

/* Dark-mode mobile backdrop — must come AFTER both the desktop dark rule
   and the mobile light rule to win source-order for dark phones. */
@media (max-width: 734px) and (prefers-color-scheme: dark) {
    .demo-stage::before {
        background:
            radial-gradient(ellipse 70% 55% at 50% 50%, rgba(223, 200, 138, 0.06), transparent 80%),
            radial-gradient(ellipse 46% 34% at 50% 48%, rgba(255, 244, 214, 0.04), transparent 85%);
    }
    .demo-phone {
        filter: drop-shadow(0 6px 26px rgba(0, 0, 0, 0.4));
    }
}

/* Mobile phone choreography — slide-in → centered → bump → exit, mirrored for
   the second pass. Bump moments hit at 16 % and 75 % so the existing bump-ring
   and bump-spark keyframes (which fire at those marks) reuse unchanged. */
@keyframes phoneOwnerMobile {
    0%   { left: -30%; opacity: 0; }
    7%   { left: -30%; opacity: 0; }    /* hold off-stage while tagline fades out */
    11%  { left: 50%;  opacity: 1; }    /* slid in to center */
    13%  { left: 50%;  opacity: 1; }    /* hold, request shown */
    16%  { left: 23%;  opacity: 1; }    /* BUMP 1 position */
    20%  { left: -30%; opacity: 0; }    /* exit left */
    62%  { left: -30%; opacity: 0; }    /* off-stage during signing */
    65%  { left: 23%;  opacity: 1; }    /* BUMP 2 position */
    68%  { left: 50%;  opacity: 1; }    /* slid back to center — received page begins to show */
    88%  { left: 50%;  opacity: 1; }    /* hold so viewer reads "Signed & Sealed" */
    91%  { left: 50%;  opacity: 0; }    /* phones cleared before tagline fades in */
    100% { left: 50%;  opacity: 0; }
}

@keyframes phoneSignerMobile {
    0%   { left: 130%; opacity: 0; }
    13%  { left: 130%; opacity: 0; }
    16%  { left: 77%;  opacity: 1; }    /* BUMP 1 position */
    22%  { left: 50%;  opacity: 1; }    /* slid to center */
    62%  { left: 50%;  opacity: 1; }    /* hold (signing happens within) */
    65%  { left: 77%;  opacity: 1; }    /* BUMP 2 position */
    70%  { left: 130%; opacity: 0; }    /* exit right */
    100% { left: 130%; opacity: 0; }
}

/* Reduced motion: render the resolved final state */
@media (prefers-reduced-motion: reduce) {
    .demo-phone--owner  { animation: none; transform: rotate(0); opacity: 1; }
    .demo-phone--signer { animation: none; transform: rotate(0); opacity: 1; }
    .demo-bump-spark, .demo-bump-ring { display: none; }
    .demo-page--request, .demo-page--waiting, .demo-page--blank { display: none; }
    .demo-page--received { opacity: 1; transform: translateX(0); animation: none; }
    .demo-page--signed   { opacity: 1; animation: none; }
    .demo-page--signed .demo-page-signer,
    .demo-page--signed .demo-page-date,
    .demo-page--signed .demo-page-check { opacity: 1; transform: none; animation: none; }
    .demo-signature      { stroke-dashoffset: 0; animation: none; }
    .demo-beat-label     { animation: none; color: var(--text-tertiary); }
    .demo-page--signed .demo-icon { opacity: 1; transform: translateY(0); animation: none; }
    .demo-icon-label     { display: none; }
    .demo-tagline        { display: none; }
}

/* Hero Entrance Animations */
@keyframes heroFadeUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-anim {
    opacity: 0;
    animation: heroFadeUp 0.8s var(--ease-out-expo) forwards;
}

.hero-anim-1 { animation-delay: 0.1s; }
.hero-anim-2 { animation-delay: 0.25s; }
.hero-anim-3 { animation-delay: 0.4s; }
.hero-anim-4 { animation-delay: 0.55s; }
.hero-anim-5 { animation-delay: 0.7s; }
.hero-anim-6 { animation-delay: 0.85s; }
.hero-anim-7 { animation-delay: 1.05s; }

@media (max-width: 734px) {
    .hero { padding: 120px 22px 48px; }
    .hero h1 { font-size: 2.75rem; }
    .hero-tagline { font-size: 1.1875rem; }
    .hero-sub { font-size: 1rem; }
    .hero-fineprint { font-size: 0.6875rem; letter-spacing: 0; white-space: nowrap; }
    .hero-visual { margin-top: 40px; }
}

@media (max-width: 480px) {
    .hero h1 { font-size: 2.25rem; }
    .hero-fineprint { font-size: 0.5625rem; }
}

/* Buttons */
.btn-primary {
    display: inline-block;
    background: var(--accent-o);
    color: #ffffff;
    padding: 12px 28px;
    border-radius: 980px;
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.2s, transform 0.2s var(--ease-out-expo), box-shadow 0.25s;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 6px 16px -6px var(--accent-o-glow);
}

.btn-primary:hover {
    background: var(--accent-o-hover);
    transform: translateY(-1px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 10px 24px -8px var(--accent-o-glow);
}

.btn-secondary {
    display: inline-block;
    color: var(--accent-o);
    padding: 12px 28px;
    border-radius: 980px;
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s;
}

.btn-secondary:hover { color: var(--accent-o-hover); }

.btn-large {
    padding: 16px 40px;
    font-size: 1.0625rem;
}

/* Section Divider */
.section-divider {
    width: 48px;
    height: 1px;
    background: var(--border);
    margin: 0 auto 0;
}

/* Scroll Reveal Animations */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Sections */
.section {
    padding: var(--section-padding) 22px;
}

.section-alt {
    background: var(--bg-alt);
    position: relative;
}

/* Glass hairline at section-alt boundaries — a soft horizontal fade that gives
   each tonal break a subtle edge instead of a hard color change. */
.section-alt::before,
.section.about-name::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(680px, 80%);
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border), transparent);
    opacity: 0.7;
    pointer-events: none;
}

.section.about-name {
    position: relative;
}

.section-inner {
    max-width: 1080px;
    margin: 0 auto;
}

.section-inner-narrow {
    max-width: 680px;
}

.section-headline {
    font-family: var(--font-display);
    font-size: 2.75rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    text-align: center;
    margin: 0 0 14px;
    line-height: 1.15;
}

.section-sub {
    font-size: 1.0625rem;
    color: var(--text-secondary);
    text-align: center;
    margin: 0 0 56px;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

.section-footnote {
    font-family: var(--font-display);
    font-style: italic;
    text-align: center;
    font-size: 0.875rem;
    color: var(--text-tertiary);
    margin-top: 36px;
}

/* Mid-section callout heading — sits between the section sub and a content
   grid (e.g., "Three ways to collect." above the method cards). */
.section-callout {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 1.2;
    letter-spacing: -0.015em;
    text-align: center;
    color: var(--text);
    margin: -24px 0 32px;
}

@media (max-width: 734px) {
    .section-callout { font-size: 1.25rem; margin: -16px 0 24px; }
}

@media (max-width: 734px) {
    :root {
        --section-padding: 80px;
    }

    .section-headline { font-size: 2.25rem; font-weight: 700; letter-spacing: -0.025em; }
    .section-sub { font-size: 1rem; margin-bottom: 40px; }
}

@media (max-width: 480px) {
    .section-headline { font-size: 2rem; }
}

/* Keepsake demo (embedded iPhone flipbook walkthrough) — sits between the
   section sub and the content grid. The container's aspect ratio controls
   the iframe's viewport, which the flipbook reads via @media orientation
   to flip the iPhone upright (portrait) or sideways (landscape). */
.keepsake-demo {
    margin: 0 auto 64px;
    max-width: 940px;
    aspect-ratio: 16 / 10;
    background: transparent;
    position: relative;
}

.keepsake-demo iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: transparent;
}

/* Phone-sized portrait viewports: switch to a tall 9:16 frame so the
   embedded iPhone stands upright and fills the available width. Cap the
   height to the small-viewport-height so it never pushes past the fold
   on short screens. */
@media (max-width: 734px) and (orientation: portrait) {
    .keepsake-demo {
        aspect-ratio: 9 / 16;
        width: min(380px, 86vw);
        max-width: none;
        max-height: 78svh;
        margin-bottom: 48px;
    }
}

/* Phone-sized landscape viewports (short, wide): keep the landscape phone
   but constrain to the viewport so the whole demo is visible without
   scrolling inside the section. */
@media (orientation: landscape) and (max-height: 520px) {
    .keepsake-demo {
        max-width: min(680px, 88vw);
        max-height: 84svh;
        margin-bottom: 36px;
    }
}

/* Content Grid (What's in an Autograph) */
.content-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.content-item {
    padding: 28px;
    border-radius: 18px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow);
    backdrop-filter: saturate(140%) blur(16px);
    -webkit-backdrop-filter: saturate(140%) blur(16px);
    transition: box-shadow 0.35s var(--ease-out-expo), transform 0.35s var(--ease-out-expo);
}

.content-item:hover {
    box-shadow: var(--card-shadow-hover);
    transform: translateY(-4px);
}

.card-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.content-item h3 {
    font-size: 0.9375rem;
    font-weight: 600;
    margin: 0;
}

.content-item p {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin: 8px 0 0;
    line-height: 1.55;
}

.content-icon {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in oklab, var(--text) 6%, transparent);
    color: var(--text);
}

.content-icon svg {
    width: 24px;
    height: 24px;
    display: block;
}

.content-icon.gold,
.content-icon.violet,
.content-icon.blue,
.content-icon.rose,
.content-icon.green,
.content-icon.amber {
    background: color-mix(in oklab, var(--text) 6%, transparent);
    color: var(--text);
}

@media (max-width: 734px) {
    .content-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
    .content-item { padding: 22px; }
}

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

/* Feature Carousel (Apple HIG-style horizontal rail) */
.feature-carousel {
    position: relative;
}

.feature-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 88%;
    gap: 20px;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 8px 4px 28px;
    margin: -8px -4px 0;
}

.feature-track::-webkit-scrollbar {
    display: none;
}

.feature-card {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    min-height: 280px;
    padding: 56px 48px;
    border-radius: 22px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow);
    backdrop-filter: saturate(140%) blur(16px);
    -webkit-backdrop-filter: saturate(140%) blur(16px);
    transition: box-shadow 0.35s var(--ease-out-expo), transform 0.35s var(--ease-out-expo);
}

.feature-card .card-header {
    flex-direction: column;
    align-items: center;
    gap: 18px;
    margin-bottom: 14px;
}

.feature-card:hover {
    box-shadow: var(--card-shadow-hover);
    transform: translateY(-4px);
}

/* Chevron paddles (desktop only) */
.carousel-paddle {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--card-border);
    background: color-mix(in oklab, var(--card-bg) 92%, transparent);
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    transition: opacity 0.25s var(--ease-out-expo), transform 0.25s var(--ease-out-expo), box-shadow 0.25s var(--ease-out-expo);
}

.carousel-paddle:hover {
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
    transform: translateY(-50%) scale(1.05);
}

.carousel-paddle:active {
    transform: translateY(-50%) scale(0.96);
}

.carousel-paddle:focus-visible {
    outline: 2px solid var(--accent, var(--text));
    outline-offset: 3px;
}

.carousel-paddle[hidden] {
    display: none;
}

.carousel-paddle-prev { left: -12px; }
.carousel-paddle-next { right: -12px; }

/* Dot indicators */
.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
}

.carousel-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: 0;
    padding: 0;
    background: color-mix(in oklab, var(--text) 18%, transparent);
    cursor: pointer;
    transition: background 0.2s var(--ease-out-expo), transform 0.2s var(--ease-out-expo), width 0.25s var(--ease-out-expo);
}

.carousel-dot:hover {
    background: color-mix(in oklab, var(--text) 32%, transparent);
}

.carousel-dot.is-active {
    background: var(--text);
    width: 22px;
    border-radius: 4px;
}

.carousel-dot:focus-visible {
    outline: 2px solid var(--accent, var(--text));
    outline-offset: 3px;
}

.feature-card h3 {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0;
}

.feature-card p {
    font-size: 1.0625rem;
    color: var(--text-secondary);
    margin: 0 auto;
    max-width: 52ch;
    line-height: 1.6;
}

.feature-icon-wrap {
    width: 84px;
    height: 84px;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in oklab, var(--text) 5%, transparent);
    color: var(--text);
}

.feature-icon-wrap svg {
    width: 56px;
    height: 56px;
    display: block;
}

.feature-icon-wrap.green,
.feature-icon-wrap.violet,
.feature-icon-wrap.blue,
.feature-icon-wrap.rose,
.feature-icon-wrap.gold,
.feature-icon-wrap.teal {
    background: color-mix(in oklab, var(--text) 6%, transparent);
    color: var(--text);
}

/* Mobile */
@media (max-width: 734px) {
    .feature-track {
        grid-auto-columns: 86%;
        gap: 14px;
        padding: 8px 0 24px;
        margin: -8px 0 0;
    }
    .feature-card {
        min-height: 240px;
        padding: 36px 26px;
        border-radius: 18px;
    }
    .feature-card .card-header { gap: 14px; margin-bottom: 10px; }
    .feature-card h3 {
        font-size: 1.0625rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--text);
    }
    .feature-card p { font-size: 0.9375rem; line-height: 1.55; }
    .feature-icon-wrap { width: 64px; height: 64px; border-radius: 18px; }
    .feature-icon-wrap svg { width: 40px; height: 40px; }
    .carousel-paddle { display: none; }
}

/* Methods Grid (How It Works) */
.methods-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.method-card {
    text-align: center;
    padding: 36px 24px;
    border-radius: 18px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow);
    backdrop-filter: saturate(140%) blur(16px);
    -webkit-backdrop-filter: saturate(140%) blur(16px);
}

.method-number {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: color-mix(in oklab, var(--accent-o) 12%, transparent);
    color: var(--accent-o);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}

.method-number svg {
    width: 28px;
    height: 28px;
    display: block;
}

.method-card h3 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 4px;
}

.method-label {
    font-size: 0.6875rem;
    color: var(--text-tertiary);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    display: block;
    margin-bottom: 14px;
}

.method-card p {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.55;
}

@media (max-width: 734px) {
    .methods-grid { grid-template-columns: 1fr; gap: 14px; }
    .method-card { padding: 28px 20px; }
}

/* Verify Grid */
.verify-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 600px;
    margin: 0 auto;
}

.verify-card {
    text-align: center;
    padding: 36px 24px;
    border-radius: 18px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow);
    backdrop-filter: saturate(140%) blur(16px);
    -webkit-backdrop-filter: saturate(140%) blur(16px);
}

.verify-card.verified {
    color: var(--success);
    background: linear-gradient(180deg, var(--success-tint) 0%, var(--card-bg) 100%);
}

.verify-card.verified h3 { color: var(--success); }

.verify-card.tampered {
    color: var(--danger);
    background: linear-gradient(180deg, var(--danger-tint) 0%, var(--card-bg) 100%);
}

.verify-card.tampered h3 { color: var(--danger); }

.verify-card h3 {
    font-size: 1rem;
    font-weight: 600;
    margin: 12px 0 8px;
    letter-spacing: -0.005em;
}

.verify-card p {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.55;
}

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

/* Privacy Block */
.privacy-block {
    text-align: center;
}

.privacy-lead {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: 1.375rem;
    line-height: 1.4;
    color: var(--text);
    margin: 0 auto 48px;
    max-width: 580px;
    letter-spacing: -0.005em;
}

.privacy-points {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    text-align: left;
    max-width: 600px;
    margin: 0 auto;
}

@media (max-width: 734px) {
    .privacy-lead { font-size: 1.1875rem; margin: 0 auto 36px; }
}

.privacy-point {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.privacy-point strong {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text);
}

.privacy-point span {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.55;
}

@media (max-width: 480px) {
    .privacy-points { grid-template-columns: 1fr; gap: 20px; }
}

/* About the Name */
.about-name {
    padding-top: 64px;
    padding-bottom: 64px;
}

/* Editorial / Blog Callout */
.editorial-block {
    text-align: center;
    padding: 36px 32px;
    border-radius: 18px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow);
    backdrop-filter: saturate(140%) blur(16px);
    -webkit-backdrop-filter: saturate(140%) blur(16px);
}

.editorial-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in oklab, var(--accent-o) 12%, transparent);
    color: var(--accent-o);
}

.editorial-icon svg {
    width: 32px;
    height: 32px;
    display: block;
}

.editorial-label {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-tertiary);
    font-weight: 500;
    margin: 0 0 10px;
}

.editorial-title {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 600;
    font-style: italic;
    letter-spacing: -0.02em;
    color: var(--text);
    margin: 0 0 10px;
}

.editorial-excerpt {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 18px;
}

.editorial-link {
    display: inline-flex;
    align-items: center;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--accent-o);
    text-decoration: none;
    transition: color 0.25s var(--ease-out-expo);
}

.editorial-link:hover {
    color: var(--accent-o-hover);
}

@media (max-width: 734px) {
    .editorial-block { padding: 28px 22px; }
    .editorial-title { font-size: 1.5rem; }
}

.about-name-block {
    text-align: center;
}

.about-name-label {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-tertiary);
    font-weight: 500;
    margin: 0 0 14px;
}

.about-name-gloss {
    font-family: var(--font-display);
    font-size: 0.9375rem;
    color: var(--text-secondary);
    margin: 0 0 12px;
    opacity: 0.85;
}

.about-name-gloss em {
    font-style: normal;
    font-weight: 600;
}

.about-name-poetic {
    font-family: var(--font-display);
    font-size: 1.125rem;
    color: var(--text);
    font-style: italic;
    line-height: 1.55;
    margin: 0;
    opacity: 0.85;
}

/* Editorial Callout */
.editorial {
    background: var(--bg-warm);
}

.editorial-block {
    text-align: center;
    border-top: 2px solid var(--gold);
    padding-top: 40px;
}

.editorial-label {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-tertiary);
    font-weight: 500;
    margin: 0 0 12px;
}

.editorial-title {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 8px;
    font-style: italic;
}

.editorial-excerpt {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 20px;
}

.editorial-link {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gold);
    text-decoration: none;
    transition: opacity 0.2s;
}

.editorial-link:hover {
    opacity: 0.75;
}

@media (max-width: 734px) {
    .editorial-title { font-size: 1.5rem; }
}

/* CTA Block */
.cta-block {
    text-align: center;
}

.cta-promise {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    margin: 12px 0 0;
}

.cta-footnote {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 0.8125rem;
    color: var(--text-tertiary);
    margin-top: 16px;
}

/* Beta Form */
.beta-form {
    max-width: 440px;
    margin: 0 auto;
}

.beta-input-row {
    display: flex;
    gap: 8px;
}

.beta-input-row input {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: 980px;
    background: var(--card-bg);
    color: var(--text);
    font-size: 0.9375rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.beta-input-row input::placeholder {
    color: var(--text-tertiary);
}

.beta-input-row input:focus {
    border-color: var(--accent-o);
    box-shadow: 0 0 0 3px var(--accent-o-glow);
}

.beta-input-row button {
    flex-shrink: 0;
    border: none;
    cursor: pointer;
    font-family: inherit;
}

.beta-status {
    font-size: 0.8125rem;
    margin: 12px 0 0;
    padding: 0;
}

.beta-status.success {
    color: var(--success);
}

.beta-status.error {
    color: var(--danger);
}

@media (max-width: 480px) {
    .beta-input-row {
        flex-direction: column;
    }

    .beta-input-row button {
        width: 100%;
    }
}

/* Footer */
footer {
    border-top: 1px solid var(--border);
    padding: 40px 22px;
}

.footer-inner {
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
}

.footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1rem;
    color: var(--text);
}

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

.footer-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 24px;
    margin-bottom: 20px;
}

.footer-links a {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.2s;
}

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

.footer-legal {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    margin: 0 0 4px;
}

.footer-disclaimer {
    font-size: 0.6875rem;
    color: var(--text-tertiary);
    margin: 0;
}

/* Legal Pages (Privacy, Terms) */
.legal-page {
    padding-top: 160px;
}

.legal-updated {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
    text-align: center;
    margin: 0 0 48px;
}

.legal-body h2 {
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 36px 0 8px;
}

.legal-body h2:first-of-type {
    margin-top: 0;
}

.legal-body p {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0 0 16px;
}

.legal-body a {
    color: var(--gold);
    text-decoration: none;
    transition: opacity 0.2s;
}

.legal-body a:hover {
    opacity: 0.75;
}

@media (max-width: 734px) {
    .legal-page { padding-top: 120px; }
    .legal-body h2 { font-size: 1.25rem; }
}

/* Accessibility */
*:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

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

    .hero-anim {
        opacity: 1;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }
}

/* Print */
@media print {
    nav, footer { display: none; }
    .section-alt { background: none; }
    body { background: #fff; color: #000; }
}