/* Shared design tokens + base styles for every page under landing/ (index.html,
   privacy.html, terms.html) — pulled out of index.html's old inline <style> block
   so the legal pages actually look like the same product instead of a bare
   unstyled document. Token values are copied 1:1 from frontend/src/index.css
   (the real app's own theme file) — same brand palette, spacing/radius scale,
   and easing curve, not a separate "marketing site" palette that happens to be
   similar. */

:root {
    --bg: #181A15;
    --surface: #22251D;
    --text: rgba(244, 243, 237, 0.6);
    --text-h: #F4F3ED;
    --border: rgba(244, 243, 237, 0.1);
    --code-bg: #22251D;
    --accent: #968B55;
    --accent-2: #C9BE8A;
    --accent-bg: rgba(150, 139, 85, 0.16);
    --accent-border: rgba(150, 139, 85, 0.5);
    --gradient: linear-gradient(135deg, #515719 0%, #968B55 100%);
    --gradient-bg: linear-gradient(135deg, rgba(81,87,25,0.12), rgba(150,139,85,0.12));
    --glass-bg: rgba(244, 243, 237, 0.03);
    --glass-border: rgba(244, 243, 237, 0.08);
    --shadow: rgba(0,0,0,0.4) 0 10px 15px -3px, rgba(0,0,0,0.25) 0 4px 6px -2px;
    /* Brighter/more opaque on the dark theme — against --bg's near-black, a
       faint glow disappears entirely; the light theme needs much less to
       read as "a glow" rather than "a smudge". */
    --cursor-glow-color: rgba(201, 190, 138, 0.14);

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;

    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 24px;
    --radius-full: 999px;

    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: 0.15s var(--ease);
    --transition: 0.2s var(--ease);
}

@media (prefers-color-scheme: light) {
    :root {
        --bg: #F4F3ED;
        --surface: #ffffff;
        --text: rgba(34, 37, 29, 0.6);
        --text-h: #22251D;
        --border: rgba(34, 37, 29, 0.12);
        --code-bg: #EAE9E1;
        --accent: #515719;
        --accent-2: #968B55;
        --accent-bg: rgba(81, 87, 25, 0.1);
        --accent-border: rgba(81, 87, 25, 0.35);
        --glass-bg: rgba(255, 255, 255, 0.5);
        --glass-border: rgba(255, 255, 255, 0.3);
        --shadow: rgba(34,37,29,0.1) 0 10px 15px -3px, rgba(34,37,29,0.05) 0 4px 6px -2px;
        --cursor-glow-color: rgba(81, 87, 25, 0.14);
    }
}

/* Anchors nav clicks land below the fixed header instead of half-hidden under
   it — paired with `scroll-behavior: smooth` below. Needed on every section a
   nav link points at (see index.html's own header for the #anchors). */
html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

body {
    background:
        radial-gradient(circle at 15% -10%, rgba(81,87,25,0.16), transparent 45%),
        radial-gradient(circle at 100% 15%, rgba(150,139,85,0.12), transparent 40%),
        var(--bg);
    background-attachment: fixed;
    color: var(--text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.45;
    letter-spacing: 0.18px;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    margin: 0;
    overflow-x: hidden;
}

@media (min-width: 1024px) {
    body { font-size: 18px; }
}

/* !important throughout this block: the Tailwind CDN <script> injects its own
   <style> tag into <head> AFTER this stylesheet loads (confirmed by
   inspecting document.head's actual child order at runtime) — its preflight
   reset (`h1,h2,h3{font-size:inherit}`) has the exact same CSS specificity as
   a plain `h1{...}` rule here, so being LATER in the DOM wins the tie and was
   silently collapsing every heading on the page down to the body's 16px, no
   matter what size was set here. This is the same category of conflict the
   rest of this page already works around with Tailwind's own `!` prefix
   (`!py-2 !px-4` etc.) — same fix, applied on the plain-CSS side instead. */
h1, h2, h3, .font-display {
    font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
    color: var(--text-h);
    /* 700, not 800 — matches the real app's own heading weight (see
       frontend/src/index.css's --heading font stack + the Google Fonts
       weights it actually loads, 600/700). The old value here was 800,
       which the app's own Google Fonts import never even loads, so it
       silently fell back to a browser-synthesized bold — a real, visible
       mismatch between this page and the dashboard it's selling. */
    font-weight: 700 !important;
}

h1 {
    font-size: 36px !important;
    line-height: 1.1 !important;
    letter-spacing: -1.68px;
}

h2 {
    font-size: 20px !important;
    line-height: 1.18 !important;
    letter-spacing: -0.24px;
}

@media (min-width: 1024px) {
    h1 { font-size: 56px !important; }
    h2 { font-size: 24px !important; }
}

code, .font-mono {
    font-family: ui-monospace, 'SF Mono', Consolas, monospace;
}

.glass-card {
    background-color: var(--glass-bg);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

/* A little life on hover — only on devices with a real pointer (a touchscreen
   has no hover state to "release" from, so this would otherwise stick a card
   mid-lift after a tap). */
@media (hover: hover) and (pointer: fine) {
    .glass-card:hover {
        transform: translateY(-4px);
        border-color: var(--accent-border);
        box-shadow: var(--shadow), 0 0 0 1px var(--accent-border);
    }
}

/* Soft light that tracks the cursor across the whole page — position set by
   index.html's own script (transform, not left/top, so the browser can move
   it on the compositor thread instead of relayouting on every mousemove).
   Fixed + pointer-events:none so it sits above everything visually but never
   intercepts a click; mix-blend-mode makes it read as *light* rather than a
   flat colored circle painted over the content underneath it. */
.cursor-glow {
    position: fixed;
    top: 0;
    left: 0;
    width: 500px;
    height: 500px;
    margin: -250px 0 0 -250px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--cursor-glow-color) 0%, transparent 70%);
    pointer-events: none;
    z-index: 40;
    opacity: 0;
    transition: opacity var(--transition);
    will-change: transform;
}

.cursor-glow.is-active {
    opacity: 1;
}

@media (hover: none), (pointer: coarse) {
    /* Touch devices have no real cursor to spotlight — never show it, and
       skip index.html's own mousemove listener too (see that script). */
    .cursor-glow { display: none; }
}

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

/* Fade-and-rise entrance for sections as they scroll into view — index.html's
   IntersectionObserver adds .is-visible once each .reveal element's top edge
   crosses into the viewport; the pre-visible state is the ONLY thing that
   needs prefers-reduced-motion guarded (an element stuck at opacity:0 for a
   reduced-motion visitor would be a real regression, not just a missing
   flourish), so that guard sets the post-visible state immediately instead
   of skipping the class entirely. */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

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

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

.glass-pill {
    background-color: var(--glass-bg);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-full);
    font-weight: 500;
    transition: transform var(--transition-fast), opacity var(--transition-fast), box-shadow var(--transition-fast);
    cursor: pointer;
    text-decoration: none;
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(0.97); }

.btn-primary {
    background: var(--gradient);
    color: #ffffff;
    box-shadow: 0 4px 14px 0 rgba(150, 139, 85, 0.39);
    border: none;
}

.btn-primary:hover {
    box-shadow: 0 6px 20px rgba(150, 139, 85, 0.45);
    opacity: 0.95;
}

.btn-secondary {
    background-color: var(--glass-bg);
    color: var(--text-h);
    border: 1px solid var(--glass-border);
}

.btn-secondary:hover { background-color: var(--border); }

/* Mockup / screenshot frame, with a fake browser chrome bar so even a
   not-yet-replaced placeholder screenshot reads as an intentional product
   shot rather than a random image dropped on the page. */
.mockup-container {
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--glass-border);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    background: var(--surface);
}

.mockup-chrome {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    background: var(--code-bg);
    border-bottom: 1px solid var(--glass-border);
}

.mockup-chrome-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--border);
}

.mockup-chrome-url {
    margin-left: 10px;
    font-size: 12px;
    font-family: ui-monospace, 'SF Mono', Consolas, monospace;
    color: var(--text);
    opacity: 0.7;
}

/* "See it in action" feature showcase (3-up grid in index.html): the three
   screenshots are real captures with different native pixel dimensions — two
   full-page shots (~2482x1187) vs. one tight widget crop for the activity
   heatmap (428x255, a much less "wide" aspect ratio). With plain w-full/h-auto
   sizing, each card's height was driven purely by its own image's intrinsic
   aspect ratio, so the heatmap card rendered visibly shorter/smaller than the
   other two despite sharing the same grid column width. Fixing this with a
   shared aspect-ratio on the container + object-fit: contain (not cover) on
   the image means every card ends up the same box size without cropping any
   screenshot's content — the heatmap just letterboxes within its box (using
   the container's own --surface background, so it reads as intentional
   framing) instead of being stretched or having its edges cut off. */
.showcase-shot {
    aspect-ratio: 2482 / 1187;
}

.showcase-shot img {
    object-fit: contain;
}

/* Shown instead of a broken image icon when a screenshot file hasn't been
   dropped in yet — see index.html's own comments on which files to replace. */
.mockup-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    padding: var(--space-6);
    text-align: center;
    color: var(--text);
    font-size: 14px;
    background:
        repeating-linear-gradient(45deg, var(--glass-bg) 0, var(--glass-bg) 1px, transparent 1px, transparent 12px);
}

/* Driven by JS (see index.html's own script), not a CSS animation — matches
   frontend/src/hooks/useTypewriter.js's actual behavior exactly: a plain
   character-by-character reveal, no blinking cursor bar. The old version here
   used a completely different mechanism (a CSS steps()-width animation with a
   blinking caret border), which is exactly why it looked inconsistent with
   the real dashboard's greeting/onboarding headings. */
.typewriter-text {
    display: inline-block;
    vertical-align: bottom;
    max-width: 100%;
    min-height: 1em;
}

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

/* Legal pages (privacy.html/terms.html) — plain prose content inside the same
   glass-card shell the rest of the site uses, instead of a bare white page. */
.legal-content h2 {
    font-size: 20px;
    margin-top: var(--space-6);
    margin-bottom: var(--space-3);
}

.legal-content h2:first-child { margin-top: 0; }

.legal-content p, .legal-content li {
    color: var(--text);
    font-size: 15px;
    line-height: 1.7;
}

.legal-content ul {
    padding-left: 1.25em;
    margin: var(--space-3) 0;
}

.legal-content li { margin-bottom: var(--space-2); }

.legal-content a {
    color: var(--accent-2);
}

.legal-content strong { color: var(--text-h); }