/*
 * Our Family Album - public marketing/support site styles.
 * Design system v4.1 "Vibrant": warm gradient canvas, vibrant coral accent
 * (#E83F46) with golden pollen, and leaf/sky/grape touches kept to small
 * decorations. Heart photo collage, phone screenshot showcases with motion.
 */

:root {
    --bg: #FAF1EA;         /* page canvas: warm cream so white cards clearly lift */
    --white: #FFFFFF;      /* cards */
    --inset: #F7F0EE;      /* recessed fills: inputs, icon tiles */
    --pink: #E83F46;       /* primary: buttons, links, accents (the icon's deep red) */
    --pink-dark: #C92F38;  /* primary hover/press */
    --pink-soft: rgba(232,63,70,.12);
    --ink: #1C1C1E;        /* secondary button fill (near-black pill) */
    --ink-hover: #3A3A3C;  /* secondary hover */
    --green: #8AC926;      /* success */
    --charcoal: #1C1C1E;   /* primary text */
    --muted: #86868A;      /* secondary text */
    --line: #EFE4E1;       /* borders / dividers */
    --red: #FF383C;        /* errors / destructive */

    /* the vibrant supporting cast — decorations only, never whole surfaces */
    --sun: #FFCA3A;        /* golden pollen */
    --leaf: #8AC926;       /* yellow green */
    --sky: #1982C4;        /* steel blue */
    --grape: #6A4C93;      /* dusty grape */

    /* warm gradient, nudged toward coral and golden pollen */
    --warm-1: #F5D6D8;     /* the heart's soft pink */
    --warm-2: #FFF1DA;     /* golden cream */
    --warm-3: #FEF6F9;     /* blush white */
    --warm-4: #F2EDFA;     /* grape whisper */

    --radius-card: 20px;
    --radius-field: 12px;
    --radius-pill: 999px;
    --shadow-card: 0 1px 2px rgba(90,50,45,.04), 0 10px 30px rgba(90,50,45,.07);
    --shadow-pop: 0 2px 6px rgba(90,50,45,.08), 0 22px 50px rgba(90,50,45,.14);
    --maxw: 1200px;
}

* { box-sizing: border-box; }

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

body {
    margin: 0;
    color: var(--charcoal);
    background: #faf1ea00;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Ambient warmth: oversized, soft brand-tinted washes fixed behind all content
   so the page never reads as flat. Warm (sun/pink) up top, a cool sky wash
   through the middle, grape down low, for gentle aurora depth. Drifts very
   slowly so it feels alive. Sits below everything and never intercepts clicks;
   raise the alphas to make it bolder. */
body::before {
    content: "";
    position: fixed;
    inset: -8%;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(46rem 46rem at 5% 2%,    rgba(255,202,58,.20), transparent 60%),
        radial-gradient(48rem 48rem at 97% 12%,  rgba(232,63,70,.14),  transparent 60%),
        radial-gradient(52rem 52rem at 0% 55%,   rgba(25,130,196,.13), transparent 58%),
        radial-gradient(58rem 58rem at 64% 104%, rgba(106,76,147,.17), transparent 60%);
    animation: ofa-drift 42s ease-in-out infinite;
}
/* Film grain: a barely-there grayscale noise over the whole page for a tactile,
   premium finish that also hides gradient banding. Generated inline (no asset),
   sits above content but is click-through. Bump opacity for more tooth. */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: .1;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='200'%20height='200'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.8'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 200px 200px;
}
@keyframes ofa-drift {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(-1.4%, 1.1%, 0) scale(1.06); }
    100% { transform: translate3d(0, 0, 0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    body::before { animation: none; }
}

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

a { color: var(--pink); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { color: var(--charcoal); }

.wrap {
    width: 100%;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* ---- nav bar ------------------------------------------------------------- */

/* Two states: at the very top the bar sits flush and full-width; once the
   page scrolls it condenses into a floating capsule with air above it
   (js toggles .nav-floating). */
.nav {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(255,250,248,0.8);
    backdrop-filter: saturate(180%) blur(18px);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    border-bottom: 1px solid rgba(232,63,70,.12);
    transition: background .35s ease, border-color .35s ease, padding .38s ease;
}
.nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    height: 84px;
    border: 1px solid transparent;
    transition: max-width .38s cubic-bezier(.3, .8, .3, 1), height .38s cubic-bezier(.3, .8, .3, 1),
                margin .38s ease, padding .38s ease, background .35s ease,
                border-radius .38s ease, box-shadow .35s ease, border-color .35s ease;
}
.nav.nav-floating {
    background: transparent;
    border-bottom-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    /* The air above the capsule: padding on the stuck bar itself — a
       margin on the inner collapses straight through the sticky parent
       and vanishes. */
    padding-top: 16px;
}
.nav-floating .nav-inner {
    max-width: min(1180px, calc(100% - 2rem));
    height: 72px;
    margin: 0 auto;
    padding: 0 .6rem 0 1rem;
    background: rgba(255,250,248,.82);
    backdrop-filter: saturate(180%) blur(18px);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    border-radius: var(--radius-pill);
    border-color: rgba(232,63,70,.16);
    box-shadow: 0 10px 32px rgba(90,50,45,.16);
}
.nav-floating .brand-mark { width: 38px; height: 38px; }
.brand {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    font-weight: 800;
    font-size: 1.28rem;
    color: var(--charcoal);
    letter-spacing: -0.01em;
}
.brand:hover { text-decoration: none; }
.brand-mark {
    width: 44px;
    height: 44px;
    display: block;
}
.nav-links {
    display: inline-flex;
    align-items: center;
}
.nav-links a {
    color: #3A3A3C;
    font-weight: 600;
    font-size: .98rem;
    margin-left: .9rem;
    padding: .45rem .75rem;
    border-radius: var(--radius-pill);
    transition: background .15s ease, color .15s ease;
}
.nav-links a:hover { color: var(--pink); background: var(--pink-soft); text-decoration: none; }
/* The page you are on keeps its pill lit. */
.nav-links a.nav-active { color: var(--pink); background: var(--pink-soft); }
/* The Download pill keeps its own ink look; the soft wash is for the links. */
.nav-links a.nav-cta:hover { background: var(--ink-hover); color: #fff !important; }

.nav-cta {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}
/* The Apple glyph's mass sits low in its box; a small lift centres it
   optically against the label. */
.nav-cta svg { flex: none; display: block; margin-top: -2px; }
.nav-cta {
    background: var(--ink);
    color: #fff !important;
    padding: 14px 20px 14px 15px !important;
    /* A tall, fully rounded pill (the emailmeapp.net look): the big radius
       and extra height give the Download button real presence. Equal
       left/right padding keeps the glyph+label pair centred. */
    justify-content: center;
    border-radius: var(--radius-pill);
    font-weight: 700 !important;
    font-size: 1rem !important;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(28,28,30,.28);
    transition: background .15s ease, transform .12s ease;
}
.nav-cta:hover { background: var(--ink-hover); color: #fff !important; text-decoration: none; transform: translateY(-1px); }

/* hamburger — hidden on desktop, the menu control on phones/tablets */
.nav-inner { position: relative; }
.nav-toggle {
    display: none;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--charcoal);
    border-radius: 12px;
    cursor: pointer;
}
.nav-toggle svg { display: block; }
.nav-toggle .bar { transition: transform .25s ease, opacity .2s ease; transform-box: fill-box; transform-origin: center; }
.nav-open .nav-toggle .bar-1 { transform: translateY(5px) rotate(45deg); }
.nav-open .nav-toggle .bar-2 { opacity: 0; }
.nav-open .nav-toggle .bar-3 { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 780px) {
    /* The three links collapse into a dropdown under the bar; the logo and
       the hamburger are all that stay on the row, so it always fits. */
    .nav-toggle { display: inline-flex; }
    .nav-links {
        position: absolute;
        top: calc(100% + 12px);
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: .1rem;
        padding: .5rem;
        background: rgba(255,250,248,.98);
        backdrop-filter: saturate(180%) blur(18px);
        -webkit-backdrop-filter: saturate(180%) blur(18px);
        border: 1px solid rgba(232,63,70,.16);
        border-radius: 20px;
        box-shadow: 0 18px 44px rgba(90,50,45,.20);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: opacity .22s ease, transform .22s ease, visibility .22s;
    }
    .nav-open .nav-links { opacity: 1; visibility: visible; transform: none; }
    .nav-links a {
        margin: 0;
        padding: .85rem 1rem;
        border-radius: 12px;
        font-size: 1.02rem;
    }
    .nav-links a:hover { background: var(--pink-soft); }
    .nav-links .nav-cta { justify-content: center; margin-top: .35rem; }
}

@media (max-width: 540px) {
    .brand .name { display: none; }
}

/* ---- buttons ------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .85em 1.7em;
    border-radius: var(--radius-pill);
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background .15s ease, transform .12s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
    line-height: 1.2;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(.98); }

.btn-primary {
    /* the app icon's own gradient, top-lit to deep red */
    background: linear-gradient(180deg, #EF5B68 0%, #E83F46 100%);
    color: #fff;
    box-shadow: 0 6px 18px rgba(232,63,70,.35);
}
.btn-primary:hover { background: linear-gradient(180deg, #E83F46 0%, #C92F38 100%); color: #fff; box-shadow: 0 8px 22px rgba(232,63,70,.4); }

.btn-secondary {
    background: var(--ink);
    color: #fff;
}
.btn-secondary:hover { background: var(--ink-hover); color: #fff; }

.btn-outline {
    background: rgba(255,255,255,.6);
    border: 1.5px solid var(--pink);
    color: var(--pink);
}
.btn-outline:hover { background: var(--pink-soft); color: var(--pink); }

.btn-block {
    display: flex;
    width: 100%;
    max-width: 360px;
}

.btn-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--pink);
    font-weight: 700;
    font-size: 1rem;
}
.btn-link:hover { color: var(--pink-dark); }

/* ---- store buttons ------------------------------------------------------- */

.store-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .8rem;
    margin-top: 2rem;
}
.store-row.center-row { justify-content: center; }
/* Apple's official App Store badge. No CSS border-radius — the badge carries
   its own rounded corner + light border, and clipping it (the old 13px radius)
   cut into that border. The shadow uses drop-shadow so it follows the badge's
   own rounded shape rather than a square box. */
.store-link { display: inline-block; line-height: 0; }
.store-badge {
    display: block;
    height: 54px;
    width: auto;
    /* The artwork's own corners are tight; a friendlier radius clips it to
       match the site's pills and cards. */
    border-radius: 13px;
    transition: transform .15s ease, filter .15s ease;
}
.store-link:hover .store-badge { transform: translateY(-2px) scale(1.02); filter: drop-shadow(0 8px 18px rgba(28,28,30,.30)); }
.store-link:active .store-badge { transform: scale(.98); }

/* ---- hero (warm gradient + heart collage) -------------------------------- */

.hero-warm {
    background:
        radial-gradient(58% 46% at 10% 6%, var(--warm-1) 0%, rgba(250,223,217,0) 70%),
        radial-gradient(52% 42% at 92% 10%, var(--warm-2) 0%, rgba(253,240,229,0) 70%),
        radial-gradient(60% 55% at 88% 92%, var(--warm-4) 0%, rgba(244,240,250,0) 72%),
        linear-gradient(180deg, #FFE3DD 0%, #FFF2E3 55%, var(--bg) 100%);
}

.hero-split {
    display: grid;
    grid-template-columns: 1.02fr .98fr;
    align-items: center;
    gap: 3rem;
    padding: 2rem 1.5rem 3rem;
    /* fill the viewport below the sticky nav (76px) */
    min-height: calc(100vh - 76px);
    min-height: calc(100svh - 76px);
}
.hero-eyebrow {
    color: var(--pink);
    font-weight: 800;
    font-size: .95rem;
    letter-spacing: .32em;
    text-transform: uppercase;
    margin: 0 0 1.1rem;
}
.hero-copy h1 {
    font-size: clamp(2.9rem, 6.4vw, 5rem);
    line-height: 1.03;
    letter-spacing: -0.028em;
    font-weight: 800;
    margin: 0;
    max-width: 13ch;
}
.hero-copy .sub {
    color: #6E6E73;
    font-size: clamp(1.3rem, 2.4vw, 1.7rem);
    margin: 1.5rem 0 0;
    max-width: 42ch;
    font-weight: 600;
}
.hero-proof {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 1.4rem;
    padding: 0;
    margin: 1.7rem 0 0;
}
.hero-proof li {
    color: var(--charcoal);
    font-weight: 600;
    font-size: .95rem;
    display: inline-flex;
    align-items: center;
}
.hero-proof li::before {
    content: "✓";
    color: var(--green);
    font-weight: 900;
    margin-right: .45rem;
}

/* heart photo collage, recreated from the app onboarding */
.heart-collage {
    position: relative;
    width: min(100%, 460px);
    aspect-ratio: 100 / 94;
    margin: 0 auto;
    container-type: size;
    transition: transform .3s ease-out;
    transform-style: preserve-3d;
}
.heart-glow {
    position: absolute;
    inset: -6%;
    background: radial-gradient(50% 46% at 50% 46%, rgba(232,63,70,.24), rgba(255,202,58,.16) 55%, transparent 74%);
    filter: blur(26px);
    z-index: 0;
    pointer-events: none;
}
.hc-tile {
    position: absolute;
    left: calc(var(--x) * 1%);
    top: calc(var(--y) * 1%);
    width: calc(var(--s) * 1%);
    z-index: 1;
    transform: translate(-50%, -50%) rotate(var(--r)) scale(1);
    opacity: 0;
    animation: hcIn .7s cubic-bezier(.2, 1.4, .4, 1) forwards;
    animation-delay: var(--d);
    /* cursor repulsion (set by site.js) rides the separate `translate`
       property so it composes with the entrance/float transforms */
    transition: translate .3s cubic-bezier(.2, .8, .3, 1.4);
}
/* the curtain: while .hc-hold is on (server-rendered), the entrance and the
   float loop wait for site.js to confirm the photos have decoded, so the
   heart assembles from real pictures, never white frames. site.js lifts it
   (decode or a short timeout), and a <noscript> override runs it without JS. */
.heart-collage.hc-hold .hc-tile,
.heart-collage.hc-hold .hc-ph {
    animation-play-state: paused;
}
/* framed photo wrapper: carries the float loop and hosts crossfade layers */
.hc-ph {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 22%;
    border: 3px solid #fff;
    box-shadow: 0 6px 16px rgba(90,50,45,.18);
    overflow: hidden;
    background: #fff;
    animation: hcFloat var(--fd, 5s) ease-in-out var(--d) infinite alternate;
}
.hc-ph img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.hc-ph img.hc-next {
    opacity: 0;
    transition: opacity 1.1s ease;
}
@keyframes hcIn {
    from { opacity: 0; transform: translate(-50%, -50%) rotate(var(--r)) scale(.2); }
    60%  { opacity: 1; }
    to   { opacity: 1; transform: translate(-50%, -50%) rotate(var(--r)) scale(1); }
}
/* cinematic entrance where container units exist: tiles fly from centre
   stage into their heart slot along a slight arc, like the app onboarding */
@supports (width: 1cqw) {
    .hc-tile { animation-name: hcFly; animation-duration: 1s; animation-timing-function: cubic-bezier(.22, .9, .32, 1); }
    @keyframes hcFly {
        from {
            opacity: 0;
            transform: translate(calc(-50% + (50 - var(--x)) * 1cqw), calc(-50% + (44 - var(--y)) * 1cqh)) rotate(calc(var(--r) * -.4)) scale(1.5);
        }
        38% { opacity: 1; }
        62% {
            transform: translate(calc(-50% + (50 - var(--x)) * .28cqw), calc(-50% + (44 - var(--y)) * .28cqh - 3cqh)) rotate(calc(var(--r) * .55)) scale(1.14);
        }
        to {
            opacity: 1;
            transform: translate(-50%, -50%) rotate(var(--r)) scale(1);
        }
    }
}
@keyframes hcFloat {
    from { transform: translateY(-3px); }
    to   { transform: translateY(4px); }
}
/* little hearts that pop when the collage is clicked */
.hc-burst {
    position: absolute;
    z-index: 5;
    color: var(--pink);
    font-size: 18px;
    pointer-events: none;
    animation: hcBurst .9s ease-out forwards;
}
@keyframes hcBurst {
    from { opacity: 1; transform: translate(-50%, -50%) scale(.4); }
    to   { opacity: 0; transform: translate(calc(-50% + var(--bx, 0px)), calc(-50% - 70px)) scale(1.2) rotate(var(--br, 0deg)); }
}

/* ---- trust strip ---------------------------------------------------------- */

.trust {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    padding: 3.2rem 1.5rem;
}
.trust-item {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    text-align: left;
}
.trust-ico {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--pink-soft);
}
.trust-ico svg { color: var(--pink); }
.trust-text h3 {
    margin: .2rem 0 .3rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.2;
}
.trust-text p {
    margin: 0;
    font-size: .93rem;
    line-height: 1.5;
    color: #58585C;
}

/* ---- section chrome ------------------------------------------------------ */

/* vertical rhythm only — horizontal gutter is owned by .wrap so cards/content
   don't bleed to the screen edge on mobile (use longhands, not the `padding`
   shorthand, so .wrap's left/right padding survives the cascade). */
.section { padding-top: 5.5rem; padding-bottom: 5.5rem; }
.section h2 {
    font-size: clamp(1.9rem, 4.4vw, 2.7rem);
    letter-spacing: -0.022em;
    font-weight: 800;
    text-align: center;
    margin: 0 0 .5rem;
}
.section .lede {
    color: var(--muted);
    text-align: center;
    max-width: 48ch;
    margin: 0 auto 2.6rem;
    font-size: 1.2rem;
    font-weight: 500;
}
.chip {
    display: inline-block;
    background: var(--pink-soft);
    color: var(--pink-dark);
    font-weight: 700;
    font-size: .78rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: .4rem .9rem;
    border-radius: var(--radius-pill);
    margin: 0 auto 1rem;
}
.center { text-align: center; }

/* ---- app showcase rows (phone screenshots) -------------------------------- */

.showcase { padding: 2rem 0 0; }
.show-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(2rem, 6vw, 5rem);
    padding: 4.8rem 1.5rem;
}
.show-row:nth-child(even) .show-art { order: -1; }
.show-copy .show-title {
    font-size: clamp(2.3rem, 5vw, 3.5rem);
    letter-spacing: -0.022em;
    font-weight: 800;
    margin: .8rem 0 .6rem;
    line-height: 1.1;
}
.show-copy .show-sub {
    color: var(--pink);
    font-weight: 700;
    font-size: clamp(1.35rem, 2.5vw, 1.6rem);
    letter-spacing: .04em;
    margin: 0 0 .9rem;
}
.show-copy p {
    color: var(--muted);
    font-size: 1.32rem;
    font-weight: 500;
    margin: 0;
    max-width: 42ch;
}

.show-art {
    position: relative;
    display: flex;
    justify-content: center;
}
.show-art::before {
    content: "";
    position: absolute;
    inset: 1% 0 0;
    border-radius: 32px;
    background: linear-gradient(160deg, var(--warm-1), var(--warm-2) 55%, var(--warm-4));
    z-index: 0;
}
/* layered device mock: live HTML screen under a shared transparent bezel PNG.
   The bezel's screen cutout is 89.333% x 96.714% at (5.333%, 3.286%); its
   Dynamic Island bottom sits at 12.5% of screen width, so app bars clear it
   with ~15cqi top padding. Type inside scales with container-query units. */
.phone-frame {
    position: relative;
    z-index: 1;
    width: min(100%, 450px);
    aspect-ratio: 1350 / 2100;
    margin-top: 10%;
    filter: drop-shadow(0 24px 40px rgba(90,50,45,.28));
    overflow: hidden;
    isolation: isolate;
}
.phone-frame .bezel {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}
.screen-live {
    position: absolute;
    left: 5.333%;
    top: 3.286%;
    width: 89.333%;
    height: 96.714%;
    background: #fff;
    overflow: hidden;
    /* top corners follow the bezel's 157px screen-cutout radius so no white
       corner pokes past the frame's outer arc */
    border-radius: 13% 13% 0 0 / 7.73% 7.73% 0 0;
    container-type: inline-size;
    z-index: 1;
    font-size: 11px;
    font-size: 4.2cqi;
}

/* shared mini app chrome: compact centered title tucked under the island */
.app-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2cqi;
    padding: 13cqi 5cqi 2.5cqi;
    background: #fff;
    border-bottom: 1px solid #F3ECEA;
    position: relative;
    z-index: 3;
}
.app-bar .abt { font-weight: 800; font-size: 5.2cqi; letter-spacing: -0.01em; color: #1C1C1E; }
.app-bar svg { color: #B9B4B2; position: absolute; bottom: 3.2cqi; }
.app-bar svg:first-child { left: 4.5cqi; }
.app-bar svg:last-child { right: 4.5cqi; }
.app-bar .abt + svg:last-child { right: 4.5cqi; }
@keyframes liveScroll { to { transform: translateY(-50%); } }

/* -- feed: posts scroll by forever ----------------------------------------- */
.feed-clip { position: absolute; inset: 0; padding-top: 21cqi; }
.feed-clip .app-bar { position: absolute; top: 0; left: 0; right: 0; }
.feed-scroll { animation: liveScroll 30s linear infinite; }
.feed-post { padding: 1.4cqi 4cqi; }
.fp-head { display: flex; align-items: center; gap: 2.2cqi; margin: 0 0 1.6cqi; }
.fp-ava {
    width: 8.4cqi; height: 8.4cqi; border-radius: 50%; flex: none;
    background: var(--a, #E83F46); color: #fff;
    font-size: 4.2cqi; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
}
.fp-id { display: flex; flex-direction: column; line-height: 1.18; }
.fp-name { font-weight: 700; font-size: 4.1cqi; color: #1C1C1E; }
.fp-date { color: #E83F46; font-size: 3.4cqi; font-weight: 600; }
.fp-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3.5cqi; display: block; }
.fp-actions { display: flex; align-items: center; gap: 4cqi; padding: 1.4cqi 1cqi 0; color: #86868A; font-size: 3.8cqi; font-weight: 600; }
.fp-actions span { display: inline-flex; align-items: center; gap: 1.2cqi; }
.fp-actions svg { display: block; width: 4cqi; height: 4cqi; }
.fp-actions .hrt { color: #E83F46; }

/* -- comments: one shared 12s cycle. Bubbles arrive in order (Grandma, Jake,
   Aunt Lily), then named reaction chips stack in on the right of the photo;
   everything holds, fades out together, and the cycle restarts. ------------- */
.scr-comments { display: flex; flex-direction: column; }
.cm-hero { position: relative; flex: none; }
.cm-hero img { width: 100%; aspect-ratio: 640 / 560; object-fit: cover; display: block; }
.cm-chip {
    position: absolute;
    right: 3cqi; top: var(--cy);
    display: inline-flex; align-items: center; gap: 1.8cqi;
    background: rgba(255,255,255,.96);
    border-radius: 99px;
    box-shadow: 0 4px 14px rgba(40,20,15,.22);
    padding: 1.6cqi 3.4cqi 1.6cqi 1.8cqi;
    font-size: 3.6cqi; font-weight: 700; color: #1C1C1E;
    white-space: nowrap;
    opacity: 0;
}
.cm-chip .ci {
    width: 6.4cqi; height: 6.4cqi; border-radius: 50%; flex: none;
    background: var(--ic, #E83F46); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
}
.cm-chip .ci svg { width: 60%; height: 60%; }
.cm-chip:nth-of-type(1) { animation: cmChip1 12s ease infinite; }
.cm-chip:nth-of-type(2) { animation: cmChip2 12s ease infinite; }
.cm-chip:nth-of-type(3) { animation: cmChip3 12s ease infinite; }
@keyframes cmChip1 {
    0%, 50%    { opacity: 0; transform: translateX(6cqi) scale(.7); }
    54%        { opacity: 1; transform: none; }
    87%        { opacity: 1; transform: none; }
    93%, 100%  { opacity: 0; transform: scale(.85); }
}
@keyframes cmChip2 {
    0%, 58%    { opacity: 0; transform: translateX(6cqi) scale(.7); }
    62%        { opacity: 1; transform: none; }
    87%        { opacity: 1; transform: none; }
    93%, 100%  { opacity: 0; transform: scale(.85); }
}
@keyframes cmChip3 {
    0%, 66%    { opacity: 0; transform: translateX(6cqi) scale(.7); }
    70%        { opacity: 1; transform: none; }
    87%        { opacity: 1; transform: none; }
    93%, 100%  { opacity: 0; transform: scale(.85); }
}
.cm-thread { padding: 3.5cqi 4cqi; display: flex; flex-direction: column; gap: 2.4cqi; }
.cbubble { display: flex; align-items: flex-start; gap: 2.4cqi; opacity: 0; }
.cbubble:nth-child(1) { animation: cmBub1 12s ease infinite; }
.cbubble:nth-child(2) { animation: cmBub2 12s ease infinite; }
.cbubble:nth-child(3) { animation: cmBub3 12s ease infinite; }
@keyframes cmBub1 {
    0%, 6%     { opacity: 0; transform: translateY(4cqi) scale(.96); }
    11%        { opacity: 1; transform: none; }
    87%        { opacity: 1; transform: none; }
    93%, 100%  { opacity: 0; transform: none; }
}
@keyframes cmBub2 {
    0%, 20%    { opacity: 0; transform: translateY(4cqi) scale(.96); }
    25%        { opacity: 1; transform: none; }
    87%        { opacity: 1; transform: none; }
    93%, 100%  { opacity: 0; transform: none; }
}
@keyframes cmBub3 {
    0%, 34%    { opacity: 0; transform: translateY(4cqi) scale(.96); }
    39%        { opacity: 1; transform: none; }
    87%        { opacity: 1; transform: none; }
    93%, 100%  { opacity: 0; transform: none; }
}
.cbubble .fp-ava { width: 8cqi; height: 8cqi; font-size: 3.8cqi; }
.cb-bub {
    background: #F2F2F7;
    border-radius: 5cqi;
    border-top-left-radius: 1.5cqi;
    padding: 2.2cqi 3.6cqi 2.6cqi;
    font-size: 4.2cqi;
    color: #1C1C1E;
    line-height: 1.35;
}
.cb-bub b { display: block; font-size: 3.3cqi; color: #86868A; font-weight: 700; }
.cm-input {
    margin: auto 4cqi 5cqi;
    background: #F2F2F7;
    border-radius: 99px;
    padding: 2.6cqi 4cqi;
    color: #A9A4A2;
    font-size: 4cqi;
    font-weight: 500;
}

/* -- memories: age-labelled crossfade slideshow ----------------------------- */
.scr-memories { background: #23201F; }
.scr-memories img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; opacity: 0;
    animation: memFade 20s ease-in-out var(--md) infinite;
}
@keyframes memFade {
    0%   { opacity: 0; transform: scale(1.06); }
    5%   { opacity: 1; }
    22%  { opacity: 1; transform: scale(1.13); }
    27%  { opacity: 0; transform: scale(1.14); }
    100% { opacity: 0; transform: scale(1.06); }
}
.mem-label {
    position: absolute; left: 50%; transform: translateX(-50%); bottom: 10cqi;
    white-space: nowrap;
    background: rgba(28,28,30,.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: 6cqi; font-weight: 800;
    letter-spacing: -0.01em;
    padding: 2.6cqi 6cqi;
    border-radius: 99px;
    opacity: 0;
    animation: memLabel 20s ease var(--md) infinite;
}
@keyframes memLabel {
    0%   { opacity: 0; transform: translate(-50%, 3cqi); }
    6%   { opacity: 1; transform: translateX(-50%); }
    21%  { opacity: 1; }
    26%  { opacity: 0; }
    100% { opacity: 0; }
}

/* -- library: endless backup grid with a toast ------------------------------ */
.scr-grid { display: flex; flex-direction: column; }
.grid-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 2cqi;
    padding: 13cqi 4cqi 2.5cqi;
    flex: none;
}
.grid-bar .abt { font-weight: 800; font-size: 4.6cqi; letter-spacing: -0.01em; color: #1C1C1E; }
.grid-pill {
    display: inline-flex; align-items: center; gap: 1.4cqi; flex: none;
    background: rgba(232,63,70,.12); color: #E83F46;
    font-size: 3.3cqi; font-weight: 700;
    padding: 1.3cqi 3.2cqi; border-radius: 99px;
}
.grid-clip { flex: 1; overflow: hidden; position: relative; }
.grid-scroll { animation: liveScroll 34s linear infinite; }
.grid-half { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2cqi; padding: 0 1.2cqi 1.2cqi; }
.grid-half img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 1.6cqi; display: block; }
.grid-toast {
    position: absolute; bottom: 6cqi; left: 50%;
    display: inline-flex; align-items: center; gap: 2cqi;
    background: rgba(255,255,255,.96);
    box-shadow: 0 6px 18px rgba(60,35,30,.22);
    border-radius: 99px;
    padding: 2.4cqi 4.6cqi;
    font-size: 3.9cqi; font-weight: 700; color: #1C1C1E;
    white-space: nowrap;
    opacity: 0;
    animation: toastCycle 9s ease infinite;
    z-index: 2;
}
.grid-toast .tick { color: #8AC926; font-weight: 800; }
@keyframes toastCycle {
    0%   { opacity: 0; transform: translate(-50%, 10cqi); }
    8%   { opacity: 1; transform: translate(-50%, 0); }
    55%  { opacity: 1; transform: translate(-50%, 0); }
    64%  { opacity: 0; transform: translate(-50%, 10cqi); }
    100% { opacity: 0; transform: translate(-50%, 10cqi); }
}

/* ---- showcase: elements that break OUT of the phone frame ----------------- */
/* The frame stops clipping so these can escape; the section clips the X axis
   so nothing ever spills into a horizontal scrollbar. */
.showcase { overflow-x: clip; }
.show-art { overflow: visible; }
.phone-frame { overflow: visible; }
.phone-fx {
    position: absolute;
    inset: 0;
    z-index: 3;               /* above the bezel (z-index 2) */
    pointer-events: none;
}
.phone-fx > * { position: absolute; will-change: transform, opacity; }

/* a floating white pill — a reaction, a name, a status */
.fx-pill {
    display: inline-flex;
    align-items: center;
    gap: .45em;
    background: #fff;
    border-radius: 999px;
    padding: .55em .85em;
    font-size: clamp(.72rem, 1.5vw, .92rem);
    font-weight: 700;
    color: var(--charcoal);
    white-space: nowrap;
    box-shadow: 0 12px 30px rgba(90,50,45,.22);
    opacity: 0;
}
.fx-pill .fx-ava {
    width: 1.55em;
    height: 1.55em;
    border-radius: 50%;
    background: var(--a, var(--pink));
    color: #fff;
    font-size: .82em;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.fx-pill .fx-tick {
    color: var(--leaf);
    font-weight: 900;
}
.fx-pill svg { display: block; }

/* a small filled heart / sparkle that drifts */
.fx-heart, .fx-spark { line-height: 0; opacity: 0; }
.fx-heart svg { display: block; fill: var(--pink); }
.fx-spark svg { display: block; color: var(--sun); }

/* pill entrances: pop in, bob, ease out — a long hold so it reads */
@keyframes fxPill {
    0%      { opacity: 0; transform: translateY(14px) scale(.85); }
    10%     { opacity: 1; transform: translateY(0) scale(1); }
    18%     { transform: translateY(-4px) scale(1); }
    82%     { opacity: 1; transform: translateY(-4px) scale(1); }
    92%,100%{ opacity: 0; transform: translateY(-14px) scale(.9); }
}
/* hearts rise up out of the frame and fade */
@keyframes fxRise {
    0%      { opacity: 0; transform: translateY(0) scale(.6) rotate(-6deg); }
    15%     { opacity: 1; }
    70%     { opacity: .9; }
    100%    { opacity: 0; transform: translateY(-130px) scale(1.1) rotate(8deg); }
}
/* sparkles twinkle in place */
@keyframes fxTwinkle {
    0%, 100% { opacity: 0; transform: scale(.5) rotate(0deg); }
    50%      { opacity: 1; transform: scale(1) rotate(90deg); }
}

/* --- per-screen placement (percentages resolve against the phone frame) --- */
/* feed: a "liked" pill escapes the right edge, hearts rise from the like row */
.fx-feed .fx-pill  { top: 20%; right: -10%; animation: fxPill 7s ease-in-out infinite; }
.fx-feed .fx-h1 { bottom: 30%; right: 4%;  animation: fxRise 4.5s ease-in .2s infinite; }
.fx-feed .fx-h2 { bottom: 30%; right: 16%; animation: fxRise 5.2s ease-in 1.4s infinite; }
.fx-feed .fx-h3 { bottom: 30%; right: 26%; animation: fxRise 4.8s ease-in 2.6s infinite; }
/* comments: a reaction pill escapes the left, a couple hearts float up-left */
.fx-comments .fx-pill { top: 30%; left: -11%; animation: fxPill 7.5s ease-in-out .6s infinite; }
.fx-comments .fx-h1 { top: 26%; left: 2%;  animation: fxRise 5s ease-in .8s infinite; }
.fx-comments .fx-h2 { top: 26%; left: -6%; animation: fxRise 5.6s ease-in 2.2s infinite; }
/* memories: just a few sparkles twinkling around the corners */
.fx-memories .fx-s1 { top: 6%;  right: -6%; animation: fxTwinkle 3.2s ease-in-out .2s infinite; }
.fx-memories .fx-s2 { bottom: 16%; left: -7%; animation: fxTwinkle 3.8s ease-in-out 1.2s infinite; }
.fx-memories .fx-s3 { top: 40%; right: -8%; animation: fxTwinkle 3.5s ease-in-out 2s infinite; }

/* Two-column widths sit the phone close to the viewport edge, so tuck the
   side-escaping pills nearly onto the frame — they'd otherwise be sliced. */
@media (max-width: 1180px) {
    .fx-feed .fx-pill { right: -3%; }
    .fx-comments .fx-pill { left: -3%; }
    .fx-memories .fx-s1, .fx-memories .fx-s3 { right: -2%; }
    .fx-memories .fx-s2 { left: -2%; }
}

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

/* ---- feature grid --------------------------------------------------------- */

.features {
    display: grid;
    /* Always three across on desktop → a tidy 3 × 2 for the six cards. */
    grid-template-columns: repeat(3, 1fr);
    gap: 1.4rem;
}
@media (max-width: 860px) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .features { grid-template-columns: 1fr; } }
.feature {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    padding: 0;
    transition: transform .18s ease, box-shadow .18s ease;
}
.feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-pop); }
/* patterned icon header: --fb fill, --fp pattern, --fi icon color */
.feat-art {
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--fb);
    background-image: var(--fp);
    background-size: var(--fs, auto);
}
.feat-ico {
    width: 76px;
    height: 76px;
    border-radius: 24px;
    /* Inverted: a top-lit tile of the feature's own hue with the icon in
       white. Thin coloured strokes on a flat white square exposed every
       wobble in the hand-drawn paths and read as cheap; the gradient and
       inner highlight speak the same language as the app icon. */
    background: var(--fi);
    background: linear-gradient(180deg, color-mix(in srgb, var(--fi) 72%, #fff) 0%, var(--fi) 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 10px 24px rgba(60,35,30,.18);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 10px 24px color-mix(in srgb, var(--fi) 32%, transparent);
}
.feat-ico svg { width: 36px; height: 36px; }
.f-hearts {
    --fb: #F5D6D8; --fi: #E83F46;
    --fp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cpath d='M18 25s-6-3.9-7.6-7.4C9.1 14.7 10.8 12 13.3 12c1.6 0 2.8.9 3.5 2.1l1.2 1.8 1.2-1.8c.7-1.2 1.9-2.1 3.5-2.1 2.5 0 4.2 2.7 2.9 5.6C24 21.1 18 25 18 25z' fill='%23E83F46' fill-opacity='.18'/%3E%3C/svg%3E");
}
.f-stripes {
    --fb: #DCEDF9; --fi: var(--sky);
    --fp: repeating-linear-gradient(45deg, rgba(25,130,196,.14) 0 10px, transparent 10px 26px);
}
.f-grid {
    --fb: #EAF4DB; --fi: #6DA51C;
    --fp: linear-gradient(rgba(138,201,38,.2) 1.5px, transparent 1.5px), linear-gradient(90deg, rgba(138,201,38,.2) 1.5px, transparent 1.5px);
    --fs: 24px 24px;
}
.f-dots {
    --fb: #ECE7F6; --fi: var(--grape);
    --fp: radial-gradient(circle, rgba(106,76,147,.2) 2.5px, transparent 3px);
    --fs: 20px 20px;
}
.f-rings {
    --fb: #FFF3D1; --fi: #DFA613;
    --fp: radial-gradient(circle, transparent 7px, rgba(255,202,58,.3) 7.5px 9px, transparent 9.5px);
    --fs: 32px 32px;
}
.f-zigzag {
    --fb: #FCE3EE; --fi: #E0548C;
    --fp: repeating-linear-gradient(135deg, rgba(224,84,140,.14) 0 8px, transparent 8px 22px), repeating-linear-gradient(45deg, rgba(224,84,140,.1) 0 8px, transparent 8px 22px);
}
.feat-body { padding: 1.4rem 1.6rem 1.7rem; }
.feature h3 {
    margin: 0 0 .45rem;
    font-size: 1.28rem;
    font-weight: 700;
}
.feature p {
    margin: 0;
    color: var(--muted);
    font-size: 1.08rem;
    font-weight: 500;
}

/* ---- how it works -------------------------------------------------------- */

.steps {
    display: grid;
    /* Short cards — let all three sit together sooner (from ~700px) instead
       of leaving a lone third card orphaned on tablet portrait. */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
}
@media (max-width: 560px) {
    .steps { grid-template-columns: 1fr; }
}
.step { text-align: center; padding: 0 .5rem; }
.step .num {
    width: 52px;
    height: 52px;
    margin: 0 auto 1rem;
    border-radius: var(--radius-pill);
    background: linear-gradient(180deg, #EF5B68 0%, #E83F46 100%);
    color: #fff;
    font-weight: 800;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(232,63,70,.35);
}
.step h3 { margin: 0 0 .4rem; font-size: 1.22rem; font-weight: 700; }
.step p { margin: 0; color: var(--muted); font-size: 1.08rem; font-weight: 500; }

/* ---- founder note --------------------------------------------------------- */

.founder {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    align-items: center;
    gap: 3rem;
    padding: 5rem 1.5rem;
}
.founder-copy h2 { text-align: left; font-size: clamp(1.7rem, 3.6vw, 2.3rem); margin: .6rem 0 1rem; letter-spacing: -0.02em; font-weight: 800; }
.founder-copy p { color: var(--muted); font-size: 1.2rem; font-weight: 500; margin: 0 0 1rem; }
.founder-sign { color: var(--charcoal) !important; }
.founder-sign strong { color: var(--charcoal); }

/* stacked polaroids built from real app photos */
.polaroids {
    position: relative;
    aspect-ratio: 1;
    max-width: 420px;
    margin: 0 auto;
    width: 100%;
}
.polaroid {
    position: absolute;
    background: #fff;
    padding: 10px 10px 34px;
    border-radius: 12px;
    box-shadow: 0 14px 36px rgba(90,50,45,.18);
    width: 58%;
    transition: transform .25s ease;
}
.polaroid img { border-radius: 6px; aspect-ratio: 1; object-fit: cover; }
.polaroid:nth-child(1) { left: 0;   top: 6%;  transform: rotate(-7deg); z-index: 1; }
.polaroid:nth-child(2) { right: 0;  top: 0;   transform: rotate(5deg);  z-index: 2; }
.polaroid:nth-child(3) { left: 18%; top: 38%; transform: rotate(-2deg); z-index: 3; }
.polaroid:hover { transform: rotate(0) scale(1.04); z-index: 5; }

/* ---- testimonials: infinite horizontal marquee ----------------------------- */

.quotes-marquee { overflow: hidden; position: relative; }
.quotes-marquee::before,
.quotes-marquee::after {
    content: "";
    position: absolute; top: 0; bottom: 0; width: 60px; z-index: 2;
    pointer-events: none;
}
.quotes-marquee::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.quotes-marquee::after { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }
.quotes-track {
    display: flex;
    width: max-content;
    animation: marqueeX 60s linear infinite;
}
.quotes-marquee:hover .quotes-track { animation-play-state: paused; }
@keyframes marqueeX { to { transform: translateX(-50%); } }
.quote {
    width: 310px;
    flex: none;
    margin-right: 1.2rem;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 1.4rem 1.5rem;
}
.stars { color: #F5B406; letter-spacing: .1em; font-size: .92rem; margin-bottom: .7rem; }
.quote blockquote {
    margin: 0 0 1rem;
    font-size: 1rem;
    font-weight: 500;
    color: var(--charcoal);
    line-height: 1.5;
}
.quote figcaption {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: var(--muted);
    font-weight: 600;
    font-size: .9rem;
}
.q-avatar {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-pill);
    background: var(--a, var(--pink));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: .95rem;
    flex: none;
}
@media (prefers-reduced-motion: reduce) {
    .quotes-track { animation: none; flex-wrap: wrap; width: auto; }
    .quotes-track .quote { margin-bottom: 1.2rem; }
}

/* ---- FAQ accordion ------------------------------------------------------- */

.faq { max-width: 740px; margin: 0 auto; }
.faq details {
    background: var(--white);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-card);
    border-radius: var(--radius-card);
    padding: 0 1.4rem;
    margin-bottom: .85rem;
}
.faq summary {
    list-style: none;
    cursor: pointer;
    font-weight: 700;
    font-size: 1.05rem;
    padding: 1.15rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    color: var(--charcoal);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: "+";
    color: var(--pink);
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 1;
    transition: transform .2s ease;
}
.faq details[open] summary::after {
    transform: rotate(45deg);
}
.faq details p {
    margin: 0;
    padding: 0 0 1.15rem;
    color: var(--muted);
    font-size: 1rem;
    font-weight: 500;
}

/* ---- contact form -------------------------------------------------------- */

.form-card {
    max-width: 580px;
    margin: 0 auto;
    background: var(--white);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-card);
    border-radius: var(--radius-card);
    padding: 2.2rem;
}
.field { margin-bottom: 1.2rem; }
.field label {
    display: block;
    font-weight: 700;
    font-size: .95rem;
    margin-bottom: .5rem;
    color: var(--charcoal);
}
.field input,
.field textarea {
    width: 100%;
    font: inherit;
    color: var(--charcoal);
    background: var(--inset);
    border: 1px solid var(--line);
    border-radius: var(--radius-field);
    padding: .8rem .95rem;
}
.field input::placeholder,
.field textarea::placeholder { color: var(--muted); }
.field input:focus,
.field textarea:focus {
    outline: none;
    background: var(--white);
    border-color: var(--pink);
    box-shadow: 0 0 0 3px rgba(232,63,70,.18);
}
.field textarea { resize: vertical; min-height: 150px; }

/* honeypot: keep in the DOM but out of sight and off screen readers' path */
.hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.notice {
    border-radius: var(--radius-field);
    padding: .95rem 1.15rem;
    margin: 0 auto 1.5rem;
    max-width: 580px;
    font-size: 1rem;
    font-weight: 600;
}
.notice-ok { background: rgba(52,199,89,.14); color: #248A3D; }
.notice-err { background: rgba(255,56,60,.10); color: var(--red); }

/* ---- article / legal layout --------------------------------------------- */

.article {
    max-width: 740px;
    margin: 0 auto;
    /* side padding restated: .article declares after .wrap and its shorthand
       was zeroing the wrap's 1.5rem, leaving phone text flush to the edge */
    padding: 3rem 1.5rem;
}
.article h1 {
    font-size: clamp(1.9rem, 5vw, 2.6rem);
    letter-spacing: -0.02em;
    font-weight: 800;
    margin: 0 0 .5rem;
}
.article .updated { color: var(--muted); font-size: .95rem; margin-bottom: 2rem; font-weight: 600; }
.article h2 {
    font-size: 1.35rem;
    font-weight: 700;
    margin: 2.2rem 0 .6rem;
}
.article p { margin: 0 0 1rem; color: var(--charcoal); }
.article .placeholder {
    background: var(--inset);
    border: 1px solid var(--line);
    border-radius: var(--radius-field);
    padding: 1rem 1.2rem;
    color: var(--muted);
    font-size: .95rem;
    font-weight: 600;
    margin-bottom: 2rem;
}

/* ---- plain centered hero (support & inner pages) -------------------------- */

.hero {
    text-align: center;
    padding: 4.5rem 0 3rem;
}
.hero .hero-tagline {
    color: var(--pink);
    font-weight: 700;
    font-size: clamp(1rem, 2.4vw, 1.2rem);
    margin: 0 0 1rem;
}
.hero h1 {
    font-size: clamp(2.1rem, 5.6vw, 3.4rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
    font-weight: 800;
    margin: 0 auto;
    max-width: 16ch;
}
.hero p.sub {
    color: var(--muted);
    font-size: clamp(1.1rem, 2.2vw, 1.3rem);
    margin: 1.4rem auto 0;
    max-width: 42ch;
    font-weight: 500;
}
.hero-cta {
    margin-top: 2.4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

/* ---- join page ----------------------------------------------------------- */

.join {
    max-width: 520px;
    margin: 0 auto;
    text-align: center;
    padding: 4rem 0;
}
.join .join-card {
    background: var(--white);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-card);
    border-radius: var(--radius-card);
    padding: 2.75rem 2rem;
}
.join .badge {
    width: 76px;
    height: 76px;
    margin: 0 auto 1.25rem;
    border-radius: var(--radius-pill);
    background: var(--inset);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.4rem;
}
.join h1 {
    font-size: clamp(1.7rem, 5vw, 2.2rem);
    letter-spacing: -0.02em;
    font-weight: 800;
    margin: 0 0 .75rem;
}
.join p { color: var(--muted); font-size: 1.08rem; margin: 0 0 1.5rem; font-weight: 500; }
.code-pill {
    display: inline-block;
    background: var(--pink-soft);
    color: var(--pink-dark);
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: .18em;
    padding: .7rem 1.5rem;
    border-radius: var(--radius-field);
    margin-bottom: 1.75rem;
}
.join-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .9rem;
}

/* ---- blog: tag filter tabs ----------------------------------------------- */

.filter-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .6rem;
    margin-top: 1.6rem;
}
.filter-tab {
    font: inherit;
    font-weight: 600;
    font-size: .92rem;
    color: var(--muted);
    background: var(--inset);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    padding: .5rem 1.1rem;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.filter-tab:hover { color: var(--charcoal); }
.filter-tab.active {
    background: linear-gradient(180deg, #EF5B68 0%, #E83F46 100%);
    color: #fff;
    border-color: var(--pink);
}
.no-posts-message {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem 1rem;
    color: var(--muted);
}
.no-posts-message h3 { margin: 0 0 .4rem; color: var(--charcoal); }
.no-posts-message p { margin: 0; }

/* ---- blog: head, grid, cards --------------------------------------------- */

.blog-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.8rem;
    flex-wrap: wrap;
}
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.2rem;
}
.blog-card {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    color: inherit;
    transition: transform .16s ease, box-shadow .16s ease;
}
.blog-card:hover {
    text-decoration: none;
    transform: translateY(-3px);
    box-shadow: var(--shadow-pop);
}
.blog-cover { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: var(--inset); }
.blog-card-body { padding: 1.1rem 1.2rem 1.3rem; }
.blog-cat, .blog-cat.blog-cat {
    display: inline-block;
    color: var(--pink-dark);
    background: var(--pink-soft);
    font-weight: 700;
    font-size: .72rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .3rem .7rem;
    border-radius: var(--radius-pill);
    margin-bottom: .8rem;
}
.blog-card-body h3 { margin: 0 0 .4rem; font-size: 1.1rem; font-weight: 700; letter-spacing: -0.01em; }
.blog-card-body p { margin: 0 0 .7rem; color: var(--muted); font-size: .95rem; font-weight: 500; }
.blog-meta { color: var(--muted); font-size: .85rem; font-weight: 600; }
.blog-card-feature { grid-column: 1 / -1; }
@media (min-width: 720px) {
    .blog-card-feature { flex-direction: row; align-items: stretch; }
    .blog-card-feature .blog-cover { width: 52%; aspect-ratio: auto; min-height: 260px; }
    .blog-card-feature .blog-card-body { align-self: center; padding: 2rem 2.2rem; }
    .blog-card-feature h3 { font-size: 1.6rem; }
}

/* ---- single post --------------------------------------------------------- */

.post { max-width: 760px; padding: 2.5rem 1.5rem 1rem; }
.back-link { display: inline-block; color: var(--muted); font-weight: 600; margin-bottom: 1.5rem; }
.back-link:hover { color: var(--pink); text-decoration: none; }
.post-head .chip { margin: 0 0 1rem; }
.post-head h1 {
    font-size: clamp(1.9rem, 5vw, 2.7rem);
    letter-spacing: -0.022em;
    font-weight: 800;
    margin: 0 0 .6rem;
    line-height: 1.1;
}
.post-meta { color: var(--muted); font-weight: 600; font-size: .95rem; margin: 0 0 1.8rem; }
.post-cover { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-card); margin-bottom: 2rem; }
.post-body p,
.post-body .post-paragraph { margin: 0 0 1.2rem; color: var(--charcoal); font-size: 1.14rem; line-height: 1.72; }
.post-body h2,
.post-body .post-title { font-size: 1.45rem; font-weight: 800; letter-spacing: -0.01em; margin: 2.2rem 0 .8rem; }
.post-body .post-subtitle { font-size: 1.22rem; font-weight: 700; margin: 1.8rem 0 .6rem; }
.post-body .post-step-title { font-size: 1.08rem; font-weight: 700; margin: 1.4rem 0 .5rem; }
.post-body .post-list { margin: 0 0 1.3rem; padding-left: 1.3rem; }
.post-body .post-list li { margin: 0 0 .5rem; color: var(--charcoal); font-size: 1.1rem; line-height: 1.6; }
.post-body .post-list li::marker { color: var(--pink); }
.post-body a { color: var(--pink); font-weight: 600; }
.post-body code { background: var(--inset); border-radius: 6px; padding: .1em .4em; font-size: .92em; }
.post-body .post-quote {
    margin: 1.6rem 0;
    padding: .4rem 0 .4rem 1.3rem;
    border-left: 4px solid var(--pink);
    color: var(--charcoal);
    font-size: 1.2rem;
    font-style: italic;
}
.post-body .post-figure { width: 100%; margin: 1.8rem 0; }
.post-body .post-figure img { width: 100%; border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.post-body .post-figure figcaption { text-align: center; color: var(--muted); font-size: .92rem; margin-top: .6rem; }
.post-body table { width: 100%; border-collapse: collapse; margin: 1.6rem 0; font-size: 1rem; }
.post-body th, .post-body td { border: 1px solid var(--line); padding: .7rem .9rem; text-align: left; }
.post-body th { background: var(--inset); font-weight: 700; }
.post-cta {
    margin: 2.5rem 0 1rem;
    text-align: center;
    background: linear-gradient(160deg, var(--warm-1), var(--warm-2) 60%, var(--warm-3));
    border-radius: var(--radius-card);
    padding: 2.4rem 1.5rem;
}
.post-cta h3 { margin: 0 0 .5rem; font-size: 1.4rem; font-weight: 800; letter-spacing: -0.01em; }
.post-cta p { margin: 0 0 1.4rem; color: var(--muted); font-weight: 500; }

/* ---- final CTA band ------------------------------------------------------ */

.cta-band {
    position: relative;
    overflow: hidden;
    background: linear-gradient(140deg, #E83F46 0%, #EF5B68 45%, #FFB44E 100%);
    margin-top: 3.5rem;
    padding: 4.5rem 0;
}
.cta-inner { position: relative; text-align: center; z-index: 1; }
.cta-band h2 { color: #fff; font-size: clamp(2.5rem, 5.8vw, 4rem); font-weight: 800; letter-spacing: -0.02em; margin: 0 0 .6rem; }
.cta-band p { color: rgba(255,255,255,.94); font-size: 1.3rem; font-weight: 500; max-width: 44ch; margin: 0 auto 1.8rem; }

/* slow drifting hearts behind the CTA copy */
.cta-heart {
    position: absolute;
    bottom: -40px;
    color: rgba(255,255,255,.28);
    font-size: var(--hs, 28px);
    left: var(--hx, 50%);
    animation: heartRise var(--ht, 14s) linear var(--hd, 0s) infinite;
    pointer-events: none;
    z-index: 0;
}
/* the drift + click-burst hearts are SVG now; size to the font-size, colour
   from currentColor, so the existing --hs / color machinery still drives them */
.cta-heart svg, .hc-burst svg { width: 1em; height: 1em; display: block; fill: currentColor; }
@keyframes heartRise {
    from { transform: translateY(0) scale(.9) rotate(-6deg); opacity: 0; }
    12%  { opacity: 1; }
    80%  { opacity: .7; }
    to   { transform: translateY(-460px) scale(1.15) rotate(8deg); opacity: 0; }
}

/* ---- our story page -------------------------------------------------------- */

.story-intro {
    text-align: center;
    color: var(--muted);
    font-size: 1.3rem;
    font-weight: 500;
    max-width: 52ch;
    margin: 1.2rem auto 2.8rem;
}
.story h2 { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.015em; margin: 2.6rem 0 .8rem; }
.story p { font-size: 1.16rem; line-height: 1.7; color: var(--charcoal); }
.story-figure {
    margin: 2.2rem auto;
    max-width: 430px;
    background: #fff;
    padding: 12px 12px 14px;
    border-radius: 14px;
    box-shadow: var(--shadow-pop);
    transform: rotate(-1.4deg);
}
.story-figure + p + h2 + p + .story-figure,
.story-figure:nth-of-type(even) { transform: rotate(1.4deg); }
.story-figure img { border-radius: 8px; width: 100%; height: auto; }
.story-figure figcaption { text-align: center; color: var(--muted); font-size: .95rem; font-weight: 600; margin-top: .7rem; }

/* ---- footer -------------------------------------------------------------- */

footer.site {
    background: #FAF2EF;
    border-top: 1px solid var(--line);
    padding: 5rem 0 2.2rem;
}
.cta-band + footer.site { margin-top: 0; border-top: none; }
.foot-grid {
    display: grid;
    grid-template-columns: 1.8fr 1fr 1fr 1fr;
    gap: 3rem 2.8rem;
    padding-bottom: 3.5rem;
}
.foot-col h4 {
    margin: 0 0 .9rem;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}
.foot-col a {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: #3A3A3C;
    font-weight: 600;
    font-size: .95rem;
    margin-bottom: .9rem;
}
.foot-col a:hover { color: var(--pink); text-decoration: none; }
.foot-col a svg { flex: none; color: var(--muted); }
.foot-col a:hover svg { color: var(--pink); }
.foot-about p {
    color: var(--muted);
    font-size: .97rem;
    font-weight: 500;
    margin: .9rem 0 1.2rem;
    max-width: 30ch;
}
.foot-brand {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    color: var(--charcoal);
    font-weight: 800;
    font-size: 1.3rem;
    letter-spacing: -0.01em;
}
.foot-brand img { width: 44px; height: 44px; display: block; border-radius: 10px; }
.store-badge-sm { height: 60px; }
.foot-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .6rem 1.5rem;
    border-top: 1px solid rgba(90,50,45,.1);
    padding-top: 1.8rem;
    color: var(--muted);
    font-size: .9rem;
    font-weight: 500;
}
.foot-bottom a { color: #3A3A3C; font-weight: 600; }
.foot-bottom a:hover { color: var(--pink); text-decoration: none; }
.foot-legal { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; }

@media (max-width: 900px) {
    .foot-grid { grid-template-columns: 1fr 1fr 1fr; }
    .foot-about { grid-column: 1 / -1; }
}
@media (max-width: 540px) {
    .foot-grid { grid-template-columns: 1fr 1fr; }
    .foot-bottom { flex-direction: column; align-items: flex-start; }
}

/* ---- scroll reveal -------------------------------------------------------- */

.rv {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .3, 1);
    transition-delay: var(--rvd, 0s);
}
.rv.rv-in { opacity: 1; transform: none; }

/* ---- responsive ----------------------------------------------------------- */

@media (max-width: 880px) {
    .trust { grid-template-columns: repeat(2, 1fr); gap: 1.8rem 2rem; }
    .hero-split { grid-template-columns: 1fr; gap: 2.4rem; text-align: center; padding-top: 2.6rem; min-height: 0; }
    .hero-eyebrow { text-align: center; }
    .hero-copy h1, .hero-copy .sub { max-width: none; margin-left: auto; margin-right: auto; }
    .store-row { justify-content: center; }
    .hero-proof { justify-content: center; }
    .hero-split .hero-art { order: -1; }
    .heart-collage { width: min(88%, 400px); }

    .show-row { grid-template-columns: 1fr; gap: 2rem; text-align: center; padding: 2.4rem 1.5rem; }
    .show-row:nth-child(even) .show-art { order: 0; }
    .show-copy p { margin: 0 auto; }
    .phone-frame { width: min(82%, 360px); }
    /* Tuck the side-escaping pills onto the frame edge so they don't get
       clipped at the screen edge on a narrow phone. */
    .fx-feed .fx-pill { right: -2%; }
    .fx-comments .fx-pill { left: -2%; }

    .founder { grid-template-columns: 1fr; gap: 2.4rem; text-align: center; }
    .founder-copy h2 { text-align: center; }
    .polaroids { max-width: 340px; }
    .blog-head { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 540px) {
    .trust { grid-template-columns: 1fr; gap: 1.5rem; }
    .nav-cta { padding: .8rem 1.3rem; }

}

/* ---- reduced motion ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .hc-tile { animation: none !important; opacity: 1; }
    .hc-ph, .cta-heart { animation: none; }
    .feed-scroll, .grid-scroll { animation: none; }
    .cbubble, .cm-chip { animation: none; opacity: 1; transform: none; }
    .scr-memories img, .mem-label, .grid-toast { animation: none; }
    .scr-memories img:first-of-type, .mem-label:first-of-type { opacity: 1; }
    .cta-heart { display: none; }
    .rv { opacity: 1; transform: none; transition: none; }
}

/* ── Phone corrections ──────────────────────────────────────────────────────
   iOS Safari zooms in on any focused field whose text is under 16px and never
   zooms back out, so tapping the newsletter or contact box left the page
   magnified. The footer links are the page's only navigation and were 24px
   tall. The photo captions rendered at 8.5px, which is not readable on a
   phone. */
@media (max-width: 900px) {
    /* The id and the footer-form selector are both listed because the site's
       own rule for this field (.95rem) is more specific than a bare `input`
       and would otherwise keep winning. */
    input, select, textarea,
    .foot-news input[type=email],
    #ofaSubEmail { font-size: 16px; }
    footer a, .site-footer a { display: inline-flex; align-items: center; min-height: 38px; }
    .fp-name { font-size: 12px; }
    .fp-date { font-size: 11px; }
}