/* 21Snaps Landing Page Styles — vintage Kodak edition */

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

:root {
    /* Legacy variable names retained for privacy / terms pages */
    --cream: #f5e6d3;
    --light-cream: #faf3e3;
    --brown: #3a2317;
    --dark-brown: #1a0f08;
    --gold: #d4a574;
    --teal: #4a7c59;
    --shadow: rgba(20, 10, 0, 0.18);

    /* Vintage Kodak palette */
    --kodak-yellow: #ffb000;
    --kodak-yellow-dark: #f59e00;
    --kodak-amber: #ffc107;
    --vintage-red: #b71c1c;
    --vintage-red-deep: #6e0000;
    --vintage-cream: #fffdd0;
    --vintage-beige: #f5e6d3;
    --paper: #efe1c4;
    --ink: #2a160a;
    --ink-soft: #4a2a14;
    --ink-faded: rgba(42, 22, 10, 0.55);
    --rule: rgba(42, 22, 10, 0.16);

    /* Type stacks */
    --type-display: 'Bebas Neue', 'Space Grotesk', sans-serif;
    --type-mono: 'Courier Prime', 'Courier New', monospace;
    --type-typewriter: 'Special Elite', 'Courier Prime', monospace;
    --type-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --type-grotesk: 'Space Grotesk', sans-serif;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--type-body);
    background: var(--light-cream);
    color: var(--brown);
    overflow-x: hidden;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Subtle paper grain on every page */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 0.18 0 0 0 0 0.10 0 0 0 0 0.05 0 0 0 0.45 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/></svg>");
    background-size: 220px 220px;
    mix-blend-mode: multiply;
    opacity: 0.28;
}

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

/* ---------- Typography ---------- */
h1, h2, h3 {
    font-family: var(--type-grotesk);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.eyebrow {
    display: inline-block;
    font-family: var(--type-typewriter);
    font-size: 13px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-soft);
    background: var(--kodak-yellow);
    padding: 6px 12px 4px;
    border-radius: 3px;
    transform: rotate(-1.2deg);
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.15);
    margin-bottom: 22px;
}

.kicker {
    color: var(--kodak-yellow-dark);
    background: linear-gradient(180deg, var(--kodak-yellow-dark) 0%, var(--vintage-red) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
    display: inline-block;
}
.kicker::after {
    content: "";
    position: absolute;
    left: 2%;
    right: 2%;
    bottom: 0.05em;
    height: 4px;
    background: linear-gradient(90deg, transparent 0%, var(--kodak-yellow) 12%, var(--kodak-yellow) 88%, transparent 100%);
    transform: skewX(-12deg);
    border-radius: 2px;
    opacity: 0.55;
    z-index: -1;
}

/* ---------- Navigation ---------- */
nav {
    position: fixed;
    top: 0;
    width: 100%;
    background: rgba(250, 243, 227, 0.85);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid transparent;
    z-index: 100;
    padding: 20px 0;
    transition: padding 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
nav.scrolled {
    padding: 14px 0;
    border-bottom-color: var(--rule);
    background: rgba(250, 243, 227, 0.95);
}
.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.logo {
    font-family: var(--type-display);
    font-size: 28px;
    letter-spacing: 0.04em;
    color: var(--brown);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
}
.logo img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.06));
}
.logo--mark img {
    width: auto;
    height: 56px;
}
.nav-links {
    display: flex;
    gap: 32px;
    list-style: none;
    align-items: center;
}
.nav-links a {
    color: var(--brown);
    text-decoration: none;
    font-weight: 500;
    font-size: 15px;
    position: relative;
    padding: 4px 0;
    transition: color 0.2s ease;
}
.nav-links a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -2px;
    height: 2px;
    background: var(--kodak-yellow);
    transition: right 280ms cubic-bezier(.6,.01,.05,1);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { right: 0; }
.nav-cta {
    background: var(--ink);
    color: var(--vintage-cream) !important;
    padding: 8px 14px !important;
    border-radius: 4px;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
}
.nav-cta::after { display: none; }
.nav-cta:hover { background: var(--vintage-red); color: var(--vintage-cream) !important; }

/* Language switcher */
.nav-lang { position: relative; }
.lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid rgba(74, 42, 20, 0.18);
    color: var(--brown);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.lang-switch i { font-size: 12px; opacity: 0.75; }
.lang-switch-caret { font-size: 14px; line-height: 1; transform: translateY(-1px); opacity: 0.7; }
.lang-switch:hover {
    background: rgba(255, 176, 0, 0.18);
    border-color: var(--kodak-yellow);
    color: var(--ink);
}
.lang-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 180px;
    background: var(--vintage-cream);
    border: 1px solid var(--rule);
    border-radius: 8px;
    list-style: none;
    padding: 6px;
    margin: 0;
    box-shadow: 0 12px 28px rgba(20, 10, 0, 0.18);
    display: none;
    z-index: 200;
    max-height: 70vh;
    overflow-y: auto;
}
.nav-lang.is-open .lang-menu { display: block; }
.lang-menu li { list-style: none; }
.lang-menu a {
    display: block;
    padding: 8px 10px;
    border-radius: 4px;
    font-size: 14px;
    color: var(--brown);
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}
.lang-menu a:hover { background: rgba(255, 176, 0, 0.18); color: var(--ink); }
.lang-menu a.is-active {
    background: var(--ink);
    color: var(--vintage-cream);
}
.lang-menu a::after { display: none; }

.mobile-menu {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
}
.mobile-menu span {
    display: block;
    width: 25px;
    height: 3px;
    background: var(--brown);
    margin: 5px 0;
    transition: 0.3s;
}

/* ---------- Hero ---------- */
.hero {
    margin-top: 0;
    padding-top: 142px; /* room for top film border */
    padding-bottom: 112px; /* room for bottom film border */
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 22%, rgba(255, 176, 0, 0.12), transparent 30%),
        radial-gradient(circle at 90% 90%, rgba(74, 42, 20, 0.06), transparent 40%),
        radial-gradient(ellipse 80% 60% at 78% 18%, rgba(255, 176, 0, 0.30), transparent 60%),
        radial-gradient(ellipse 60% 70% at 12% 80%, rgba(255, 192, 80, 0.18), transparent 55%),
        linear-gradient(135deg, var(--vintage-beige) 0%, var(--light-cream) 50%, #fff5d8 100%);
}
/* Film-strip borders with square sprocket holes — top + bottom */
.hero::before,
.hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 34px;
    background:
        linear-gradient(90deg,
            transparent 0 10px,
            var(--vintage-beige) 10px 24px,
            transparent 24px 34px) center / 34px 14px repeat-x,
        linear-gradient(180deg, #0e0805 0%, #1a0f08 50%, #0e0805 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        inset 0 -1px 0 rgba(0, 0, 0, 0.6);
    z-index: 3;
    pointer-events: none;
}
.hero::before { top: 64px; } /* sits flush under the fixed nav */
.hero::after  { bottom: 0; }

.hero-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 2;
}

.hero-content h1 {
    font-family: var(--type-display);
    font-weight: 400;
    letter-spacing: 0.005em;
    line-height: 0.92;
    font-size: clamp(48px, 6.6vw, 96px);
    margin-bottom: 22px;
    color: var(--ink);
    text-shadow: 0 1px 0 rgba(255, 253, 208, 0.6);
}
.hero-content h1 span { color: inherit; }
.hero-content h1 .h-line { display: block; }

.hero-tagline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--type-typewriter);
    font-size: 17px;
    color: var(--ink-soft);
    margin-bottom: 18px;
    letter-spacing: 0.02em;
    background: rgba(255, 253, 208, 0.7);
    padding: 6px 12px;
    border-radius: 3px;
    border-left: 3px solid var(--vintage-red);
    white-space: normal;
}
.hero-tagline i { color: var(--vintage-red); }

.hero-description {
    font-size: 17px;
    color: var(--ink-soft);
    margin-bottom: 32px;
    max-width: 520px;
    line-height: 1.65;
}

.hero-stats {
    display: flex;
    gap: 28px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}
.hero-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.hero-stat-num {
    font-family: var(--type-display);
    font-size: 36px;
    line-height: 1;
    color: var(--vintage-red);
    letter-spacing: 0.02em;
}
.hero-stat-label {
    font-family: var(--type-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-faded);
}

.download-buttons {
    display: flex;
    gap: 14px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}
.download-btn {
    padding: 13px 22px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.25s ease;
    border: none;
    cursor: pointer;
    letter-spacing: 0.01em;
}
.hero .download-btn {
    flex: 1 1 0;
    min-width: 0;
}
.btn-primary {
    background: var(--ink);
    color: var(--vintage-cream);
    box-shadow:
        0 4px 0 rgba(0, 0, 0, 0.35),
        0 12px 24px -8px rgba(20, 10, 0, 0.45);
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow:
        0 6px 0 rgba(0, 0, 0, 0.35),
        0 18px 30px -8px rgba(20, 10, 0, 0.55);
    background: var(--vintage-red);
}
.btn-primary:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
}
.btn-secondary {
    background: transparent;
    color: var(--ink);
    border: 2px solid var(--ink);
    padding: 11px 20px;
}
.btn-secondary:hover {
    background: var(--ink);
    color: var(--vintage-cream);
    transform: translateY(-2px);
}

.hero-microcopy {
    font-family: var(--type-typewriter);
    font-size: 13px;
    color: var(--ink-faded);
    letter-spacing: 0.02em;
}
.hero-microcopy strong {
    color: var(--vintage-red);
    font-weight: 700;
}

/* ---------- Hero phone (PORTRAIT — recreates the real app camera view) ---------- */
.hero-visual {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    min-height: 560px;
}

.phone-stage {
    position: relative;
    width: 100%;
    max-width: 560px;
    height: 620px;
    margin: 0 auto;
}
.phone-mockup {
    background: linear-gradient(135deg, #2a2a2a 0%, #0a0a0a 50%, #1a1a1a 100%);
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.08),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05),
        0 36px 60px -20px rgba(20, 10, 0, 0.5),
        0 14px 28px -10px rgba(20, 10, 0, 0.4);
}
.phone-mockup--portrait {
    position: absolute;
    width: 290px;
    aspect-ratio: 9 / 16.8;
    left: 0;
    top: 50%;
    border-radius: 44px;
    padding: 9px;
    transform: translateY(-50%) rotate(-3deg);
    animation: float-left 7s ease-in-out infinite;
    z-index: 8;  /* phone on top of polaroids and filmstrip */
}
@keyframes float-left {
    0%, 100% { transform: translateY(-50%) rotate(-3deg); }
    50%      { transform: translateY(calc(-50% - 8px)) rotate(-3deg); }
}
.phone-island {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 16px;
    background: #050505;
    border-radius: 9px;
    z-index: 5;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.phone-side-button {
    position: absolute;
    background: #1a1a1a;
    border-radius: 1px 0 0 1px;
    z-index: 1;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.08);
}
.phone-side-button.power {
    right: -2px;
    top: 22%;
    width: 4px;
    height: 70px;
}
.phone-side-button.volume-up {
    left: -2px;
    top: 18%;
    width: 4px;
    height: 36px;
    border-radius: 0 1px 1px 0;
}
.phone-side-button.volume-dn {
    left: -2px;
    top: 28%;
    width: 4px;
    height: 60px;
    border-radius: 0 1px 1px 0;
}
@keyframes float {
    0%, 100% { transform: rotate(-2deg) translateY(0px); }
    50%      { transform: rotate(-2deg) translateY(-14px); }
}

.phone-screen {
    width: 100%;
    height: 100%;
    background: #000;
    border-radius: 24px;
    position: relative;
    overflow: hidden;
}

/* In-app camera view — faithful rebuild of CameraView.swift */
.app-view {
    position: absolute;
    inset: 0;
    background: var(--kodak-yellow);
    overflow: hidden;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
}
.app-bg {
    /* Cardboard texture */
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(ellipse at 30% 20%, rgba(255, 220, 130, 0.4), transparent 40%),
        radial-gradient(ellipse at 70% 90%, rgba(180, 110, 0, 0.25), transparent 50%),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.3 0 0 0 0 0.05 0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/></svg>");
    background-size: cover, cover, 200px 200px;
    background-blend-mode: normal, normal, multiply;
    mix-blend-mode: normal;
    pointer-events: none;
}
.app-view::after {
    /* Top vignette so dynamic island doesn't kiss the logo */
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 70px;
    background: linear-gradient(180deg, rgba(20, 10, 0, 0.18), transparent);
    pointer-events: none;
}

.app-topbar {
    position: relative;
    padding: 46px 14px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    z-index: 2;
    height: 86px;
    flex-shrink: 0;
}
.app-back {
    position: absolute;
    left: 10px;
    top: 46px;
    width: 28px;
    height: 28px;
    background: var(--ink);
    color: var(--kodak-yellow);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 11px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.app-logo {
    width: 120px;
    height: auto;
    object-fit: contain;
    position: relative;
    z-index: 1;
    /* Layered shadow: a soft ambient pool + a tighter contact shadow so the
       logo lifts off the camera viewfinder regardless of scene brightness. */
    filter:
        drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35))
        drop-shadow(0 8px 18px rgba(0, 0, 0, 0.45));
}
/* Halation glow behind the logo — mirrors LogoHalation.swift in the iOS
   app: warm radial bloom, plus-lighter blend, gentle breathing. */
.app-topbar::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 220px;
    height: 100px;
    transform: translate(-50%, -50%) scale(0.95);
    background: radial-gradient(
        ellipse at center,
        rgba(255, 235, 153, 0.55) 0%,
        rgba(255, 235, 153, 0.18) 40%,
        rgba(255, 235, 153, 0) 70%);
    filter: blur(14px);
    mix-blend-mode: plus-lighter;
    pointer-events: none;
    z-index: 0;
    animation: app-logo-halation 2.6s ease-in-out infinite alternate;
}
@keyframes app-logo-halation {
    from { transform: translate(-50%, -50%) scale(0.95); opacity: 0.7; }
    to   { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .app-topbar::after { animation: none; }
}
.app-shot-counter {
    display: none;
    position: absolute;
    right: 8px;
    top: 36px;
    width: 30px;
    height: 24px;
    background: var(--ink);
    border-radius: 6px;
    display: grid;
    place-items: center;
    box-shadow:
        inset 0 0 0 1px rgba(255, 176, 0, 0.18),
        0 2px 4px rgba(0, 0, 0, 0.4);
    font-family: 'Courier Prime', monospace;
    font-weight: 700;
    color: var(--kodak-yellow);
    font-size: 12px;
    text-shadow: 0 0 8px rgba(255, 176, 0, 0.5);
}
.asc-num {
    transition: opacity 280ms ease;
}

.app-viewfinder {
    flex: 0 0 auto;
    padding: 4px 18px 0;
    display: grid;
    place-items: center;
    z-index: 2;
}
.vf-housing {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    background:
        linear-gradient(180deg, #38393a 0%, #1a1a1a 30%, #050505 100%);
    border-radius: 12px;
    padding: 8px;
    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.12),
        inset 0 -8px 16px rgba(0, 0, 0, 0.7),
        0 6px 14px rgba(0, 0, 0, 0.4);
}
.vf-window {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 6px;
    overflow: hidden;
    background: #050505;
    box-shadow:
        inset 0 0 0 2px rgba(0, 0, 0, 0.85),
        inset 0 0 12px rgba(0, 0, 0, 0.95);
}
.vf-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: contrast(1.05) saturate(0.85);
    transition: opacity 380ms ease;
}
.vf-frame-marks {
    position: absolute;
    inset: 6px;
    pointer-events: none;
}
.vf-frame-marks span {
    position: absolute;
    width: 14px;
    height: 14px;
    border-color: rgba(255, 253, 208, 0.85);
    border-style: solid;
    border-width: 0;
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.6));
}
.vf-frame-marks span:nth-child(1) { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
.vf-frame-marks span:nth-child(2) { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; }
.vf-frame-marks span:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; }
.vf-frame-marks span:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }

.app-film-counter {
    margin-top: 14px;
    display: grid;
    place-items: center;
    z-index: 2;
}
.fc-rim {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, #0d0d0d, #050505);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 2px 4px rgba(0, 0, 0, 0.4);
    display: grid;
    place-items: center;
    position: relative;
}
.fc-rim::before {
    /* chrome rim */
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px solid rgba(220, 220, 220, 0.4);
    background: conic-gradient(
        from 200deg,
        rgba(255,255,255,0.45),
        rgba(120,120,120,0.15) 25%,
        rgba(60,60,60,0.1) 50%,
        rgba(180,180,180,0.4) 75%,
        rgba(255,255,255,0.45)
    );
    -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    padding: 1.5px;
    pointer-events: none;
}
.fc-well {
    position: relative;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 30%, #2a2a2a 0%, #050505 70%, #000 100%);
    box-shadow:
        inset 0 0 0 2px rgba(0, 0, 0, 0.95),
        inset 0 2px 4px rgba(0, 0, 0, 0.85);
    display: grid;
    place-items: center;
    overflow: hidden;
}
.fc-num {
    font-family: 'Courier Prime', monospace;
    font-weight: 900;
    font-size: 20px;
    color: rgba(255, 253, 208, 0.92);
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.85);
    transition: opacity 280ms;
}
.fc-glare {
    position: absolute;
    width: 70%;
    height: 30%;
    top: 8%;
    left: 12%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.04));
    border-radius: 50%;
    filter: blur(1px);
    pointer-events: none;
}

.app-shutter {
    margin-top: auto;
    margin-bottom: 36px;
    display: grid;
    place-items: center;
    padding: 14px 0 0;
    z-index: 2;
}
.shutter-btn {
    width: 76px;
    height: 76px;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: default;
    pointer-events: none;
    position: relative;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.5));
}
.shutter-btn img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.shutter-btn.firing img {
    animation: shutter-fire 380ms cubic-bezier(.36,.07,.19,.97);
}
@keyframes shutter-fire {
    0%   { transform: translateY(0) scale(1); }
    20%  { transform: translateY(4px) scale(0.88); filter: brightness(0.85); }
    60%  { transform: translateY(-2px) scale(1.02); filter: brightness(1.1); }
    100% { transform: translateY(0) scale(1); filter: brightness(1); }
}

.app-home-bar {
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 32%;
    height: 2.5px;
    background: var(--ink);
    border-radius: 2px;
    opacity: 0.45;
    z-index: 6;
}

/* Live overlay (flash) */
.phone-live {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    border-radius: 36px;
    overflow: hidden;
}
.phone-flash {
    position: absolute;
    inset: 0;
    background: #fff;
    opacity: 0;
}
.phone-flash.firing {
    animation: phone-flash-once 420ms ease-out;
}
@keyframes phone-flash-once {
    0%   { opacity: 0; }
    8%   { opacity: 0.92; }
    40%  { opacity: 0.4; }
    100% { opacity: 0; }
}

/* Floating sticker accents */
.sticker {
    position: absolute;
    background: var(--vintage-cream);
    color: var(--ink);
    font-family: var(--type-typewriter);
    font-size: 12px;
    letter-spacing: 0.12em;
    padding: 8px 14px 6px;
    border-radius: 3px;
    box-shadow:
        0 8px 18px -8px rgba(20, 10, 0, 0.4),
        0 2px 4px rgba(20, 10, 0, 0.2);
    z-index: 5;
    line-height: 1.2;
    transform: rotate(var(--rot, 0deg));
}
.sticker strong {
    display: block;
    font-family: var(--type-display);
    font-size: 22px;
    letter-spacing: 0.04em;
    color: var(--vintage-red);
    line-height: 1;
}
.sticker--shots {
    top: -12px;
    right: -6px;
    --rot: 5deg;
    background: var(--ink);
    color: var(--kodak-yellow);
    z-index: 6;
}
.sticker--shots strong { color: var(--kodak-yellow); }

/* Film strip on the right side of the hero — negative-look frames */
.film-strip {
    position: absolute;
    top: 19%;
    right: -3%;
    transform: rotate(8deg);
    width: 110px;
    /* 6 frames + sprockets — ~430px tall */
    height: 430px;
    background: #0a0500;
    z-index: 2;
    box-shadow:
        0 24px 44px rgba(0, 0, 0, 0.45),
        0 10px 20px rgba(0, 0, 0, 0.3);
    border-radius: 3px;
    overflow: hidden;
    animation: film-drift 14s ease-in-out infinite;
}
@keyframes film-drift {
    0%, 100% { transform: rotate(8deg) translateY(0); }
    50%      { transform: rotate(8deg) translateY(-10px); }
}
.film-strip::before,
.film-strip::after {
    content: "";
    position: absolute;
    top: 6px;
    bottom: 6px;
    width: 10px;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent 5px,
        #ffeac2 5px,
        #ffeac2 18px,
        transparent 18px,
        transparent 23px);
    z-index: 4;
}
.film-strip::before { left: 6px; }
.film-strip::after  { right: 6px; }
.film-strip-frames {
    position: absolute;
    inset: 6px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.film-strip-frame {
    flex: 1 1 0; /* fill the entire strip height evenly */
    width: 100%;
    background-size: cover;
    background-position: center;
    position: relative;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6);
    /* NEGATIVE FILM LOOK */
    filter: invert(1) hue-rotate(180deg) saturate(1.6) contrast(0.9) brightness(0.78);
}
.film-strip-frame::after {
    /* Orange film-base cast — characteristic colour-negative warm bias */
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 110, 30, 0.42), rgba(190, 50, 20, 0.28));
    mix-blend-mode: multiply;
    pointer-events: none;
}
.film-strip::before,
.film-strip::after { filter: drop-shadow(0 1px 1px rgba(0,0,0,0.4)); }

/* Hero polaroid samples (white photo-paper polaroids near phone) */
.hero-polaroid {
    position: absolute;
    width: 138px;
    background: #fff;
    padding: 9px 9px 18px;
    border-radius: 3px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.7),
        0 18px 36px -14px rgba(20, 10, 0, 0.45),
        0 6px 12px -6px rgba(20, 10, 0, 0.3);
    z-index: 4;
}
.hero-polaroid .hp-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    background-size: cover;
    background-position: center;
    filter: contrast(1.04) saturate(0.94) brightness(1.02);
    border-radius: 1px;
}
.hero-polaroid .hp-cap { display: none; }
.hero-polaroid {
    width: 210px;
    z-index: 5; /* between phone (8) and filmstrip (2) */
}
/* Both polaroids fanned like a hand of cards in the gap between the phone
   and the filmstrip. They start AFTER the phone's right edge (no phone
   overlap) and may slightly overlap the filmstrip on the far right. */
.hero-polaroid--top {
    top: 14%;
    left: 51%;
    transform: rotate(8deg);
    animation: hp-bob-a 8s ease-in-out infinite;
}
.hero-polaroid--bottom {
    top: 38%;
    left: 53%;
    transform: rotate(18deg);
    animation: hp-bob-b 9.2s ease-in-out infinite;
}
@keyframes hp-bob-a {
    0%, 100% { transform: rotate(8deg) translateY(0); }
    50%      { transform: rotate(8deg) translateY(-5px); }
}
@keyframes hp-bob-b {
    0%, 100% { transform: rotate(18deg) translateY(0); }
    50%      { transform: rotate(18deg) translateY(-5px); }
}

/* ---------- How-it-works strip ---------- */
.how {
    padding: 90px 20px 70px;
    background: var(--ink);
    color: var(--vintage-cream);
    position: relative;
    overflow: hidden;
}
.how::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 30%, rgba(255, 176, 0, 0.12), transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(183, 28, 28, 0.18), transparent 40%);
    pointer-events: none;
}
.how-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}
.how h2 {
    font-family: var(--type-display);
    font-weight: 400;
    font-size: clamp(36px, 4.5vw, 56px);
    letter-spacing: 0.005em;
    margin-bottom: 12px;
    text-align: center;
    color: var(--kodak-yellow);
}
.how-sub {
    text-align: center;
    color: rgba(255, 253, 208, 0.7);
    font-family: var(--type-typewriter);
    font-size: 14px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 60px;
}
.how-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: stretch;
}
.how-step {
    background: rgba(255, 253, 208, 0.04);
    border: 1px solid rgba(255, 176, 0, 0.18);
    border-radius: 14px;
    padding: 32px 28px;
    position: relative;
    transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
.how-step:hover {
    transform: translateY(-4px);
    border-color: var(--kodak-yellow);
    background: rgba(255, 176, 0, 0.06);
}
.how-step-num {
    font-family: var(--type-display);
    font-size: 64px;
    line-height: 0.9;
    color: var(--kodak-yellow);
    letter-spacing: 0.02em;
    margin-bottom: 14px;
    text-shadow: 0 0 20px rgba(255, 176, 0, 0.35);
}
.how-step h3 {
    font-family: var(--type-display);
    font-weight: 400;
    font-size: 28px;
    letter-spacing: 0.01em;
    color: var(--vintage-cream);
    margin-bottom: 10px;
}
.how-step p {
    color: rgba(255, 253, 208, 0.78);
    font-size: 15px;
    line-height: 1.6;
}
.how-step::after {
    content: "";
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    width: 24px; /* exactly the grid gap — sits flush between cards without overlapping */
    height: 2px;
    background: var(--kodak-yellow);
    opacity: 0.4;
}
.how-step:last-child::after { display: none; }

/* ---------- Features ---------- */
.features {
    padding: 100px 20px;
    background: var(--light-cream);
    position: relative;
}
.features-container { max-width: 1200px; margin: 0 auto; }
.section-title {
    font-family: var(--type-display);
    font-weight: 400;
    font-size: clamp(36px, 5vw, 64px);
    letter-spacing: 0.005em;
    text-align: center;
    margin-bottom: 14px;
    color: var(--ink);
}
.section-sub {
    text-align: center;
    font-family: var(--type-typewriter);
    font-size: 14px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-faded);
    margin-bottom: 56px;
}
.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
.feature-card {
    padding: 32px 28px;
    background: #fff;
    border-radius: 12px;
    text-align: left;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    border: 1px solid var(--rule);
    position: relative;
    overflow: hidden;
}
.feature-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--kodak-yellow);
    transform: scaleY(0.2);
    transform-origin: top;
    transition: transform 0.4s cubic-bezier(.6,.01,.05,1);
}
.feature-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px -12px var(--shadow);
    border-color: rgba(255, 176, 0, 0.3);
}
.feature-card:hover::before { transform: scaleY(1); }
.feature-icon {
    font-size: 28px;
    margin-bottom: 18px;
    color: var(--vintage-red);
    display: inline-flex;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: rgba(255, 176, 0, 0.18);
    align-items: center;
    justify-content: center;
}
.feature-title {
    font-family: var(--type-grotesk);
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--ink);
    letter-spacing: -0.01em;
}
.feature-description {
    font-size: 15px;
    color: var(--ink-soft);
    line-height: 1.6;
}

/* ---------- Prints showcase (NEW) ---------- */
.prints {
    padding: 100px 20px 110px;
    background:
        radial-gradient(ellipse 70% 60% at 50% 0%, rgba(255, 176, 0, 0.25), transparent 60%),
        linear-gradient(180deg, var(--vintage-beige) 0%, #fbe9c3 100%);
    position: relative;
    overflow: hidden;
}
.prints-container { max-width: 1200px; margin: 0 auto; position: relative; z-index: 2; }
.prints-strip {
    position: relative;
    margin-top: 40px;
    height: 320px;
    overflow: hidden;
    mask: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
    -webkit-mask: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.prints-track {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    display: flex;
    gap: 26px;
    animation: prints-drift 60s linear infinite;
    will-change: transform;
}
@keyframes prints-drift {
    from { transform: translate(0, -50%); }
    to   { transform: translate(-50%, -50%); }
}
.print {
    flex: 0 0 auto;
    width: 220px;
    background: #fff;
    padding: 12px 12px 36px;
    border-radius: 3px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.7),
        0 18px 36px -16px rgba(20, 10, 0, 0.4),
        0 6px 12px -6px rgba(20, 10, 0, 0.25);
    transform: rotate(var(--rot, -1.5deg));
    position: relative;
    transition: transform 0.4s cubic-bezier(.6,.01,.05,1);
}
.print-caption { display: none; }
.print:hover { transform: rotate(0deg) translateY(-8px) scale(1.05); }

.print-img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 6 / 5; /* squarer than 4:3, still taller than 1:1 */
    overflow: hidden;
    background: #f5e8c8;
    border-radius: 1px;
    isolation: isolate;
}
.print-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Print look — gentle warmth & contrast */
    filter: contrast(1.04) saturate(0.94) brightness(1.02);
}
.print-img-wrap::after {
    /* Subtle paper grain on print surface */
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.0' numOctaves='2' seed='6'/><feColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.2 0 0 0 0 0.1 0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.3'/></svg>");
    background-size: 160px 160px;
    mix-blend-mode: multiply;
    opacity: 0.3;
    pointer-events: none;
    z-index: 2;
}
.print-caption {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 8px;
    font-family: var(--type-typewriter);
    font-size: 11px;
    color: var(--ink-faded);
    letter-spacing: 0.04em;
    text-align: center;
}
.print:nth-child(odd)  { --rot: -2deg; }
.print:nth-child(even) { --rot: 1.6deg; }
.print:nth-child(3n)   { --rot: -3deg; }
.print:nth-child(5n)   { --rot: 2.4deg; }

.prints-foot {
    margin-top: 30px;
    text-align: center;
    font-family: var(--type-typewriter);
    color: var(--ink-soft);
    font-size: 14px;
    letter-spacing: 0.06em;
}

/* ---------- FAQ ---------- */
.faq {
    padding: 100px 20px;
    background: #fff;
}
.faq-container { max-width: 800px; margin: 0 auto; }
.faq-grid { display: grid; gap: 14px; }
.faq-item {
    background: var(--light-cream);
    border: 1px solid var(--rule);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.3s, box-shadow 0.3s;
}
.faq-item.active {
    border-color: var(--kodak-yellow);
    box-shadow: 0 10px 26px -12px var(--shadow);
}
.faq-question {
    width: 100%;
    padding: 22px 24px;
    background: transparent;
    border: none;
    text-align: left;
    font-size: 17px;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    transition: background 0.3s ease;
    font-family: var(--type-grotesk);
}
.faq-question:hover { background: rgba(255, 176, 0, 0.08); }
.faq-icon {
    font-size: 24px;
    transition: transform 0.3s ease;
    color: var(--vintage-red);
    flex-shrink: 0;
}
.faq-item.active .faq-icon { transform: rotate(180deg); }
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.3s ease;
}
.faq-item.active .faq-answer { max-height: 600px; padding: 0 24px 24px; }
.faq-answer p {
    color: var(--ink-soft);
    line-height: 1.7;
    font-size: 15px;
}

/* ---------- Contact ---------- */
.contact {
    padding: 90px 20px;
    background: linear-gradient(135deg, var(--light-cream) 0%, #fff5d8 100%);
}
.contact-container { max-width: 600px; margin: 0 auto; }
.contact-content { text-align: center; }
.contact-content p { color: var(--ink-soft); }
.contact-email {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 28px;
    background: var(--ink);
    color: var(--vintage-cream);
    text-decoration: none;
    border-radius: 8px;
    font-size: 17px;
    font-weight: 500;
    transition: all 0.25s ease;
    box-shadow:
        0 4px 0 rgba(0, 0, 0, 0.3),
        0 12px 22px -8px rgba(20, 10, 0, 0.4);
    margin-top: 28px;
}
.contact-email:hover {
    transform: translateY(-2px);
    background: var(--vintage-red);
    box-shadow:
        0 6px 0 rgba(0, 0, 0, 0.3),
        0 18px 28px -10px rgba(20, 10, 0, 0.5);
}
.contact-email i { font-size: 20px; }

/* ---------- CTA ---------- */
.cta {
    padding: 110px 20px;
    background:
        radial-gradient(ellipse 80% 70% at 50% 0%, rgba(255, 176, 0, 0.3), transparent 60%),
        linear-gradient(135deg, var(--ink) 0%, #2a160a 100%);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='5'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 0.85 0 0 0 0 0.5 0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/></svg>");
    background-size: 200px;
    pointer-events: none;
}
.cta-container { max-width: 800px; margin: 0 auto; position: relative; z-index: 2; }
.cta h2 {
    font-family: var(--type-display);
    font-weight: 400;
    font-size: clamp(40px, 5.5vw, 76px);
    letter-spacing: 0.005em;
    color: var(--kodak-yellow);
    margin-bottom: 18px;
    line-height: 0.95;
    text-shadow: 0 0 28px rgba(255, 176, 0, 0.3);
}
.cta p {
    font-size: 18px;
    color: rgba(255, 253, 208, 0.85);
    margin-bottom: 36px;
    font-family: var(--type-typewriter);
    letter-spacing: 0.02em;
}
.cta .download-buttons { justify-content: center; }
.cta .btn-primary {
    background: var(--kodak-yellow);
    color: var(--ink);
}
.cta .btn-primary:hover {
    background: #fff;
    color: var(--ink);
}

/* ---------- Footer ---------- */
footer {
    padding: 44px 20px 36px;
    background: #0e0805;
    color: var(--vintage-cream);
    text-align: center;
    position: relative;
}
footer::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 4px;
    background:
        repeating-linear-gradient(
            90deg,
            var(--kodak-yellow) 0 28px,
            var(--ink) 28px 32px);
}
.footer-content { max-width: 1200px; margin: 0 auto; }
.footer-logo {
    font-family: var(--type-display);
    font-size: 22px;
    letter-spacing: 0.04em;
    margin-bottom: 18px;
    color: var(--kodak-yellow);
}
.footer-logo img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
}
.footer-contact {
    max-width: 860px;
    margin: 0 auto 28px;
    padding: 26px 24px 22px;
    border: 1px solid rgba(255, 176, 0, 0.22);
    border-radius: 12px;
    background: rgba(255, 176, 0, 0.04);
    text-align: left;
}
.footer-contact h3 {
    margin: 0 0 18px;
    text-align: center;
    font-family: var(--type-display);
    font-size: 16px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--kodak-yellow);
}
.footer-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px 36px;
    align-items: start;
}
.footer-contact-col { font-style: normal; }
.footer-contact-col strong {
    display: block;
    font-size: 15px;
    color: var(--kodak-yellow);
    letter-spacing: 0.04em;
    margin-bottom: 2px;
}
.footer-contact-col span {
    display: block;
    font-size: 13px;
    line-height: 1.55;
    opacity: 0.85;
}
.footer-contact-sub {
    margin-bottom: 8px;
    font-style: italic;
    opacity: 0.55 !important;
    font-size: 12px !important;
}
.footer-contact-meta {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 14px;
    row-gap: 6px;
    margin: 0;
    font-size: 13px;
}
.footer-contact-meta dt {
    font-family: var(--type-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.55;
    padding-top: 2px;
}
.footer-contact-meta dd {
    margin: 0;
    opacity: 0.9;
    word-break: break-word;
}
.footer-contact-meta dd a {
    color: var(--kodak-yellow);
    text-decoration: none;
    border-bottom: 1px dashed rgba(255, 176, 0, 0.45);
}
.footer-contact-meta dd a:hover { border-bottom-style: solid; }

@media (max-width: 600px) {
    .footer-contact-grid { grid-template-columns: 1fr; }
    .footer-contact { padding: 22px 18px; }
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 28px;
    margin-bottom: 18px;
    list-style: none;
    flex-wrap: wrap;
}
.footer-links a {
    color: var(--vintage-cream);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s ease;
    opacity: 0.8;
}
.footer-links a:hover { color: var(--kodak-yellow); opacity: 1; }
.copyright {
    opacity: 0.55;
    font-size: 13px;
    font-family: var(--type-mono);
    letter-spacing: 0.04em;
}

/* ---------- Mobile ---------- */
@media (max-width: 968px) {
    .hero-container {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: left;
    }
    .hero-visual { order: -1; min-height: 280px; }
    .phone-mockup { transform: rotate(-1deg); }
    .film-strip { display: none; }
    .how-steps { grid-template-columns: 1fr; gap: 16px; }
    .how-step::after { display: none; }
}

@media (max-width: 768px) {
    .nav-links {
        display: none;
        position: fixed;
        top: 64px;
        right: 16px;
        background: var(--vintage-cream);
        flex-direction: column;
        padding: 18px;
        border-radius: 10px;
        box-shadow: 0 16px 32px rgba(20, 10, 0, 0.18);
        gap: 14px;
        align-items: flex-start;
        border: 1px solid var(--rule);
    }
    .nav-links.active { display: flex; }
    .mobile-menu { display: block; }

    .hero {
        padding-top: 90px;
        padding-bottom: 60px;
    }
    .hero-container {
        padding: 30px 18px;
        gap: 32px;
    }
    .hero-content h1 { font-size: clamp(40px, 12vw, 56px); }
    .hero-tagline { font-size: 15px; }
    .hero-stats { gap: 22px; }
    .hero-stat-num { font-size: 28px; }

    .download-buttons {
        flex-direction: column;
        align-items: stretch;
    }
    .download-btn {
        justify-content: center;
        font-size: 14px;
        padding: 12px 18px;
    }

    .features-grid { grid-template-columns: 1fr; gap: 16px; }
    .features, .faq, .contact, .cta { padding: 70px 18px; }
    .prints { padding: 70px 18px 80px; }
    .prints-strip { height: 240px; }
    .print { width: 180px; }

    .footer-links { gap: 16px; }

    .sticker--shots { right: 8px; }
    .sticker--mailed { left: 4px; }
}

@media (max-width: 480px) {
    .logo { font-size: 22px; }
    .logo img { width: 30px; height: 30px; }
    .hero-content h1 { font-size: 40px; }
    .hero-tagline { font-size: 14px; }
    .hero-description { font-size: 15px; margin-bottom: 24px; }
    .section-title { font-size: 32px; }
    .feature-card { padding: 24px 22px; }
    .feature-title { font-size: 18px; }
    .feature-description { font-size: 14px; }
    .faq-question { font-size: 15px; padding: 18px 18px; }
    .faq-answer p { font-size: 14px; }
    .cta h2 { font-size: 38px; }
    .cta p { font-size: 15px; }
    .legal-content { margin: 100px auto 40px; padding: 0 16px; }
    .legal-content h1 { font-size: 28px; }
    .legal-content h2 { font-size: 20px; margin-top: 30px; }
    .legal-content p, .legal-content li { font-size: 14px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .phone-mockup { animation: none; }
    .prints-track { animation: none; }
    .phone-flash { animation: none; opacity: 0; }
    * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.1ms !important;
    }
}