/* Piggy Budget — site styles
 * Goals: matches the iOS PiggyFaceView character exactly, fully
 * responsive from 320px iPhone SE up to large desktops, mobile-first
 * with safe-area handling, no layout shifts during the chat-bubble
 * cycle, animations driven through CSS keyframes + JS-set custom
 * properties (--look-x, --look-y, --tilt, --hop) so steady idle
 * loops compose with stochastic events cleanly.
 */

:root {
    /* Light mode (default) — soft pastel gradient backdrop. */
    --bg: #F5F7FB;
    --bg-gradient-top: #F8F0F2;
    --bg-gradient-bottom: #EAF1FA;
    --text-primary: #1F2937;
    --text-secondary: #6B7280;
    --text-tertiary: #9CA3AF;
    --accent: #14B8A6;

    /* Surface colors used by content cards (privacy page, future
       cards). Defined here so dark mode can override cleanly. */
    --surface-card: #FFFFFF;
    --surface-card-border: rgba(31, 41, 55, 0.08);
    --surface-pill: rgba(31, 41, 55, 0.06);
    --surface-pill-border: rgba(31, 41, 55, 0.10);
    --bubble-bg: #FFFFFF;
    --bubble-border: rgba(31, 41, 55, 0.08);
    --bubble-shadow: 0 12px 28px rgba(31, 41, 55, 0.14);
    --piggy-shadow: 0 16px 32px rgba(31, 41, 55, 0.10);
    --cta-bg: #1F2937;
    --cta-text: #FFFFFF;
    --cta-shadow: 0 8px 22px rgba(31, 41, 55, 0.18);
    --cta-shadow-hover: 0 14px 30px rgba(31, 41, 55, 0.22);

    /* Piggy character palette (matches iOS PiggyFaceView) */
    --piggy-face: #EEACB2;
    --piggy-eye: #1F2937;
    --piggy-nose: #E26583;
    --piggy-nostril: #8B3A4D;
    --piggy-sparkle: rgba(255, 255, 255, 0.9);

    --max-content: 720px;

    /* Live-character signals (driven from JS) */
    --look-x: 0px;
    --look-y: 0px;
    --tilt: 0deg;
    --hop: 0px;
    /* Short-lived tilt set during a body hop. Composed with --tilt
       in the .piggy-face transform so it stacks ON TOP of the slow
       head-tilt cadence instead of fighting it. */
    --hop-tilt: 0deg;

    /* Fluid Piggy size — head WIDTH. Stage width is 2× this since
       the SVG viewBox now extends horizontally to fit the hat's
       wide brim without cropping. */
    --piggy-size: clamp(112px, 18vw, 168px);
    /* SVG viewBox is now 480 wide × 340 tall (-120 to 360
       horizontally, -100 to 240 vertically), so:
         stage-w-factor = 480/240 = 2 (stage width = piggy-size × 2)
         stage aspect h/w = 340/480 = 0.708 (stage height = stage_w × 0.708)
    */
    --stage-w-factor: 2;
    --stage-aspect: calc(340 / 480);
    /* Reserved overflow space ABOVE the stage for the bubble.
       Small because the bubble lands close to the visible hat top
       (no empty viewBox padding above the hat anymore). */
    --bubble-reserve: clamp(40px, 6vw, 60px);
}

/* ============================================================
 *  Dark mode
 *  Honors the user's OS-level `prefers-color-scheme` preference.
 *  Background surface colors mirror the iOS app's Theme.swift so
 *  the website feels like the same product:
 *    screenBg    →  #0B1120
 *    modalBg     →  #0F1525
 *    cardBg      →  #1A2235
 *    cardBorder  →  #2A3550
 *  Piggy character colors stay the same (the brand pink reads on
 *  both backgrounds), but the catch-light sparkle gets dimmed
 *  slightly so it doesn't feel blown out on the dark face.
 * ============================================================ */

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0B1120;
        /* Subtle gradient top + bottom — keeps the page from
           feeling like a flat black field, just like the iOS app's
           soft modalBg / screenBg layering. */
        --bg-gradient-top: #131A2E;
        --bg-gradient-bottom: #080D18;

        --text-primary: #F1F4FA;
        --text-secondary: #9CA8C2;
        --text-tertiary: #6B7896;
        --accent: #5EEAD4;

        --surface-card: #1A2235;
        --surface-card-border: #2A3550;
        --surface-pill: rgba(255, 255, 255, 0.06);
        --surface-pill-border: rgba(255, 255, 255, 0.10);

        --bubble-bg: #1A2235;
        --bubble-border: #2A3550;
        --bubble-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
        --piggy-shadow: 0 16px 32px rgba(0, 0, 0, 0.45);

        --cta-bg: #F1F4FA;
        --cta-text: #0B1120;
        --cta-shadow: 0 8px 22px rgba(0, 0, 0, 0.40);
        --cta-shadow-hover: 0 14px 30px rgba(0, 0, 0, 0.55);

        /* Piggy palette unchanged — pink reads cleanly on both
           backgrounds. Sparkle intensity untouched (the white
           catch-light is still the right call against a dark
           eye even when surrounding background is dark). */
    }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Rounded', 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;
    color: var(--text-primary);
    background:
        radial-gradient(ellipse at top, var(--bg-gradient-top) 0%, transparent 60%),
        linear-gradient(180deg, var(--bg) 0%, var(--bg-gradient-bottom) 100%);
    background-attachment: fixed;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Home page locks itself to one viewport (no scroll); content
   pages (privacy, 404) scroll normally. The class is applied on
   index.html's <body> only. */
body.home-body {
    height: 100dvh;
    overflow: hidden;
}

/* Tap targets / iOS UX polish */
a, button {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* Visually hidden but indexable + accessible. SEO content + screen
   reader labels use this so Google can read keyword-rich copy
   without us cluttering the visible UI. */
.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;
}

/* ============================================================
 *  Page layout
 * ============================================================ */

.page {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Tight padding so the page fits without scroll. The top
       padding still respects the iOS notch / status bar. */
    padding:
        max(20px, env(safe-area-inset-top)) clamp(16px, 4vw, 32px)
        clamp(12px, 2vw, 20px);
    min-height: 0;
}

.hero {
    width: 100%;
    max-width: var(--max-content);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: clamp(8px, 1.4vw, 14px);
}

/* ============================================================
 *  Piggy stage + chat bubble
 * ============================================================ */

.piggy-stage {
    position: relative;
    /* Stage matches the SVG's viewBox aspect. Width is now 2×
       piggy-size because the viewBox extends horizontally so the
       hat's wide brim fits without cropping. */
    width: calc(var(--piggy-size) * var(--stage-w-factor));
    height: calc(var(--piggy-size) * var(--stage-w-factor) * var(--stage-aspect));
    /* Cap stage width to viewport so it never overflows on narrow
       screens (320px iPhone SE etc.). */
    max-width: calc(100vw - 32px);
    margin-top: var(--bubble-reserve);
    margin-bottom: clamp(4px, 1vw, 12px);
}

.piggy {
    width: 100%;
    height: 100%;
    filter: drop-shadow(var(--piggy-shadow));
    transform: translateY(var(--hop)) scale(1);
    animation: breathe 3s ease-in-out infinite alternate;
    transform-origin: center center;
    /* Soft, natural ease for the hop. The previous overshoot
       cubic-bezier read as too dramatic — the hop felt like a
       startled jump. Plain ease-in-out gives a gentle rise + fall. */
    transition: transform 0.36s ease-in-out;
    will-change: transform;
}

.piggy-face {
    /* Slow head tilt + short-lived hop tilt are composed here. The
       head-tilt scheduler updates --tilt every few seconds; a body
       hop temporarily layers --hop-tilt on top for a quick lean.
       Plain ease-in-out keeps the tilt feeling natural. */
    transform: rotate(calc(var(--tilt) + var(--hop-tilt)));
    transform-origin: 120px 130px;
    transition: transform 0.6s ease-in-out;
}

.piggy-body { fill: var(--piggy-face); }

.eyes-group {
    transform: translate(var(--look-x), var(--look-y));
    transition: transform 0.45s ease-in-out;
}

.eye-wrap {
    transform-box: fill-box;
    transform-origin: center;
}

.eye {
    fill: var(--piggy-eye);
    transform-box: fill-box;
    transform-origin: center;
    animation: blink 5.2s ease-in-out infinite;
}

.sparkle {
    fill: var(--piggy-sparkle);
    animation: sparkleBlink 5.2s linear infinite;
}

/* Wink: SVG-level class so we can both run the wink on the left
   eye AND freeze the right eye's blink loop for the duration. */
.piggy.is-winking .eye-wrap-left .eye {
    animation: winkOnce 380ms ease-in-out;
}
.piggy.is-winking .eye-wrap-left .sparkle {
    animation: winkSparkleOnce 380ms ease-in-out;
}
.piggy.is-winking .eye-wrap-right .eye,
.piggy.is-winking .eye-wrap-right .sparkle {
    animation: none;
}

.nose      { fill: var(--piggy-nose); }
.nostril   { fill: var(--piggy-nostril); }

.nose-group {
    transform-box: fill-box;
    transform-origin: center;
    animation: noseWiggle 7s ease-in-out infinite;
}

/* ----------------------------------------------------------
 *  Chat bubble
 * ---------------------------------------------------------- */

.chat-bubble {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translate(-50%, 8px) scale(0.6);
    transform-origin: 50% 100%;
    background: var(--bubble-bg);
    color: var(--text-primary);
    border: 1px solid var(--bubble-border);
    border-radius: 14px;
    /* Smaller all around so the bubble doesn't dominate the layout. */
    padding: clamp(7px, 1.1vw, 10px) clamp(11px, 1.6vw, 14px);
    font-size: clamp(11px, 1.4vw, 13px);
    font-weight: 600;
    line-height: 1.35;
    width: max-content;
    max-width: min(260px, calc(100vw - 32px));
    text-align: center;
    box-shadow: var(--bubble-shadow);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.4s cubic-bezier(0.32, 1.5, 0.45, 1.0),
                opacity 0.32s ease-out;
    /* Slight gap above the helmet so the bubble doesn't feel stuck
       to the hat. Adds a few extra px so the bubble reads as
       floating just above. */
    margin-bottom: clamp(10px, 1.4vw, 16px);
}

.chat-bubble::after {
    content: "";
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid var(--bubble-bg);
    filter: drop-shadow(0 1px 0 var(--bubble-border));
}

.chat-bubble.is-visible {
    transform: translate(-50%, 0) scale(1);
    opacity: 1;
}

/* ============================================================
 *  Typography + CTA
 * ============================================================ */

.title {
    font-size: clamp(28px, 4.8vw, 44px);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin-top: clamp(4px, 1vw, 10px);
    line-height: 1.05;
}

.tagline {
    font-size: clamp(11px, 1.4vw, 14px);
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.18em;
}

/* App Store CTA */
.cta-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    /* Hit area meets Apple's 44pt touch-target minimum. */
    min-height: 48px;
    padding: 10px clamp(14px, 2.4vw, 20px);
    background: var(--cta-bg);
    color: var(--cta-text);
    border-radius: 12px;
    text-decoration: none;
    box-shadow: var(--cta-shadow);
    transition: transform 160ms ease-out, box-shadow 160ms ease-out;
    margin-top: clamp(2px, 0.6vw, 6px);
}

@media (hover: hover) {
    .cta-button:hover {
        transform: translateY(-2px);
        box-shadow: var(--cta-shadow-hover);
    }
}

.cta-button:active {
    transform: translateY(0);
}

.cta-apple {
    width: clamp(20px, 3vw, 26px);
    height: clamp(20px, 3vw, 26px);
}

.cta-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.1;
}

.cta-eyebrow {
    font-size: clamp(9px, 1.2vw, 11px);
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    opacity: 0.85;
}

.cta-store {
    font-size: clamp(15px, 2.2vw, 18px);
    font-weight: 700;
}

/* ============================================================
 *  Feature strip — gives Google + visitors actual content
 * ============================================================ */

.features {
    margin-top: clamp(8px, 1.5vw, 16px);
    width: 100%;
    max-width: 560px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(6px, 1vw, 10px);
    list-style: none;
}

.feature {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: clamp(8px, 1.2vw, 12px) clamp(10px, 1.6vw, 14px);
    background: var(--surface-card);
    border: 1px solid var(--surface-card-border);
    border-radius: 12px;
    text-align: left;
}

.feature-emoji {
    font-size: clamp(15px, 1.8vw, 18px);
    line-height: 1;
    flex-shrink: 0;
}

.feature-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.feature-title {
    font-size: clamp(11px, 1.3vw, 13px);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.25;
}

.feature-body {
    font-size: clamp(10px, 1.1vw, 12px);
    color: var(--text-secondary);
    line-height: 1.35;
}

/* ============================================================
 *  Footer
 * ============================================================ */

.site-footer {
    padding:
        clamp(8px, 1.4vw, 14px) clamp(16px, 4vw, 32px)
        max(12px, calc(env(safe-area-inset-bottom) + 8px));
    text-align: center;
    color: var(--text-tertiary);
    flex-shrink: 0;
}

.footer-inner {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    font-size: clamp(11px, 1.3vw, 13px);
}

.footer-link {
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid transparent;
    transition: border-color 160ms ease, color 160ms ease;
    padding: 4px 2px;
}

@media (hover: hover) {
    .footer-link:hover,
    .footer-link:focus-visible {
        color: var(--text-primary);
        border-bottom-color: currentColor;
    }
}

.footer-sep { color: var(--text-tertiary); }

.copy {
    margin-top: 6px;
    font-size: 11px;
    color: var(--text-tertiary);
}

/* ============================================================
 *  Privacy / content pages
 * ============================================================ */

.content-page {
    flex: 1;
    padding:
        max(48px, env(safe-area-inset-top)) clamp(16px, 4vw, 32px)
        clamp(24px, 4vw, 48px);
    display: flex;
    justify-content: center;
}

.content {
    width: 100%;
    max-width: var(--max-content);
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    /* Uses --text-primary so dark mode flips to a light, readable
       color automatically (was hardcoded black, which read as
       invisible on dark backgrounds). */
    color: var(--text-primary);
    background: var(--surface-pill);
    border: 1px solid var(--surface-pill-border);
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 28px;
    padding: 8px 14px;
    border-radius: 999px;
    transition: background 160ms ease, border-color 160ms ease;
}

@media (hover: hover) {
    .back-link:hover {
        background: var(--surface-pill-border);
    }
}

.content h1 {
    font-size: clamp(28px, 4.5vw, 40px);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
    line-height: 1.1;
}

.content .updated {
    color: var(--text-tertiary);
    font-size: 13px;
    margin-bottom: 36px;
}

.content h2 {
    font-size: clamp(18px, 2.4vw, 22px);
    font-weight: 800;
    color: var(--text-primary);
    /* Generous space above each top-level section so they read as
       distinct chapters of the policy. */
    margin-top: 44px;
    margin-bottom: 14px;
    letter-spacing: -0.01em;
    line-height: 1.25;
}

.content h3 {
    font-size: clamp(15px, 1.9vw, 17px);
    font-weight: 700;
    color: var(--text-primary);
    margin-top: 26px;
    margin-bottom: 10px;
    line-height: 1.3;
}

.content p,
.content li {
    color: var(--text-secondary);
    line-height: 1.7;
    font-size: clamp(14px, 1.8vw, 15px);
}

.content p {
    /* Real spacing between paragraphs so the policy reads as
       discrete points instead of a wall of text. */
    margin-bottom: 14px;
}

.content ul {
    padding-left: 22px;
    margin: 12px 0 20px;
}

.content li {
    margin-bottom: 8px;
}

.content li:last-child {
    margin-bottom: 0;
}

/* Strong-tagged lead-ins inside list items get a touch more
   contrast so each bullet has a clear "label: explanation" rhythm. */
.content li strong {
    color: var(--text-primary);
}

.content a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
}

.content a:hover { text-decoration: underline; }

/* Help Center contact card. Selectors are scoped through
   `.contact-card` so they beat `.content h2 { margin-top: 44px }`
   on specificity — without that, the H2 inherits the 44px top
   margin meant for FAQ section headers and creates a giant void
   above the title. */
.contact-card {
    margin: 4px 0 28px;
    padding: 18px clamp(16px, 2.4vw, 22px);
    background: var(--surface-card);
    border: 1px solid var(--surface-card-border);
    border-radius: 16px;
}

.contact-card .contact-title {
    font-size: clamp(15px, 1.9vw, 17px);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 6px;
    line-height: 1.3;
}

.contact-card .contact-body {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0 0 12px;
}

.contact-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: var(--cta-bg);
    color: var(--cta-text) !important;
    border-radius: 12px;
    font-weight: 700 !important;
    font-size: 14px;
    text-decoration: none !important;
    box-shadow: var(--cta-shadow);
    transition: transform 160ms ease-out, box-shadow 160ms ease-out;
}

.contact-button:hover {
    transform: translateY(-1px);
    box-shadow: var(--cta-shadow-hover);
}

/* SVG envelope icon — color tracks the button's text color via
   `currentColor` so it stays correct in both light and dark mode. */
.contact-mail-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.content ol {
    padding-left: 22px;
    margin: 12px 0 20px;
}

.content ol li {
    margin-bottom: 8px;
}

/* ============================================================
 *  Animations
 * ============================================================ */

@keyframes breathe {
    from { transform: translateY(var(--hop)) scale(1.000); }
    to   { transform: translateY(var(--hop)) scale(1.015); }
}

@keyframes blink {
    0%, 95%, 100% { transform: scaleY(1); }
    95.5%, 97.5%  { transform: scaleY(0.05); }
}

@keyframes sparkleBlink {
    0%, 95%, 100% { opacity: 0.9; }
    95.5%, 97.5%  { opacity: 0; }
}

@keyframes winkOnce {
    0%   { transform: scaleY(1); }
    35%  { transform: scaleY(0.05); }
    65%  { transform: scaleY(0.05); }
    100% { transform: scaleY(1); }
}
@keyframes winkSparkleOnce {
    0%   { opacity: 0.9; }
    35%  { opacity: 0; }
    65%  { opacity: 0; }
    100% { opacity: 0.9; }
}

@keyframes noseWiggle {
    0%, 86%, 100% { transform: scale(1) translateX(0); }
    89%           { transform: scale(1.05) translateX(-1.2px); }
    93%           { transform: scale(1.05) translateX(1.2px); }
    96%           { transform: scale(1) translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .piggy,
    .eye,
    .sparkle,
    .nose-group,
    .chat-bubble,
    .piggy-face,
    .eyes-group {
        animation: none !important;
        transition: none !important;
    }
}

/* ============================================================
 *  Narrow-screen tweaks
 *  (clamp() handles most sizing fluidly, this is just for layout
 *  decisions that don't naturally interpolate.)
 * ============================================================ */

@media (max-width: 480px) {
    /* Tighten bubble width on narrow viewports. */
    .chat-bubble {
        max-width: min(280px, calc(100vw - 24px));
    }
    /* Features stay 2-column on phones so the page still fits in
       one viewport (1-column would force scroll). Reduce padding
       further to keep them readable at 2 columns on narrow screens. */
    .feature {
        padding: 8px 10px;
        gap: 6px;
    }
    .feature-body {
        /* Hide the description on phones — title alone keeps the
           tile compact and still communicates the feature. */
        display: none;
    }
}

@media (max-width: 360px) {
    /* iPhone SE territory. Smaller piggy and gaps so everything
       still fits without scroll. Stage width is 2× piggy-size, so
       a 92px piggy means a 184px stage — fine inside 320–360px. */
    .hero { gap: 6px; }
    :root {
        --piggy-size: clamp(92px, 24vw, 120px);
        --bubble-reserve: 40px;
    }
}

/* On very short viewports (landscape phones / iPad in split view),
   stack tighter so we still fit. */
@media (max-height: 700px) {
    :root {
        --piggy-size: clamp(92px, 12vw, 132px);
        --bubble-reserve: clamp(32px, 5vw, 48px);
    }
    .title { font-size: clamp(22px, 4vw, 32px); }
}