/* Everything below the hero (loaded asynchronously).
   Sections declare a surface (dark/paper); signature scenes are synergy and
   themes; everything else is a calm chapter with one reveal recipe. */

/* ── Shared section scaffolding ───────────────────────────────────────── */

.section {
    position: relative;
    padding: clamp(96px, 13vw, 176px) var(--gutter);
    overflow: clip;
}

.section-head {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.eyebrow {
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: var(--track-label);
    color: var(--orange);
}

[data-surface="paper"] .eyebrow {
    color: var(--orange-on-paper);
}

.section-title {
    margin-top: 10px;
    font-size: clamp(2.2rem, 1.25rem + 3.7vw, 4.35rem);
    line-height: 1.03;
    letter-spacing: -0.032em;
    font-weight: 600;
}

.section-body {
    margin: 22px auto 0;
    max-width: 36ch;
    font-size: clamp(1.06rem, 0.98rem + 0.42vw, 1.32rem);
    line-height: 1.5;
    color: var(--on-dark-2);
}

[data-surface="paper"] .section-body {
    color: var(--on-paper-2);
}

.stage {
    position: relative;
    margin: clamp(48px, 7vw, 88px) auto 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: clamp(20px, 4vw, 56px);
}

/* ── Reveal: the app's LiquidGlassEntrance, scroll-linked where supported ── */
@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        .reveal {
            animation: reveal-rise linear both;
            animation-timeline: view();
            animation-range: entry calc(var(--i, 0) * 6%) entry calc(85% + var(--i, 0) * 6%);
        }
    }

    @supports not (animation-timeline: view()) {
        .js .reveal {
            opacity: 0;
            translate: 0 36px;
            transition: opacity 650ms var(--ease-out-cubic), translate 800ms var(--ease-out-back);
            transition-delay: calc(var(--i, 0) * 150ms);
        }

        .js .reveal.is-in {
            opacity: 1;
            translate: 0 0;
        }
    }
}

@keyframes reveal-rise {
    0% { opacity: 0; translate: 0 44px; animation-timing-function: var(--ease-out-cubic); }
    65% { opacity: 1; }
    100% { opacity: 1; translate: 0 0; }
}

/* ── Synergy (signature 2): SVG + CSS, scrubbed by js/synergy.js ─────── */
.synergy {
    --tier: #ff6347;
    padding: 0;
}

.synergy__runway {
    position: relative;
}

.js:not(.motion-reduced) .synergy__runway {
    height: 230svh;
}

.synergy__stage {
    position: relative;
    min-height: 100svh;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: clamp(18px, 3.2svh, 34px);
    padding: calc(var(--nav-h) + 36px) var(--gutter) 40px;
    overflow: clip;
}

.js:not(.motion-reduced) .synergy__stage {
    position: sticky;
    top: 0;
    height: 100svh;
}

.synergy__tint {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(55% 48% at 50% 54%, color-mix(in srgb, var(--tier) 18%, transparent), transparent 72%);
    transition: background 300ms linear;
}

.synergy .section-head {
    position: relative;
}

.synergy .section-title {
    font-size: clamp(2.1rem, 1.2rem + 3.4vw, 4rem);
}

.synergy .section-body {
    margin-top: 14px;
}

.meter {
    position: relative;
    width: clamp(200px, 30svh, 300px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
}

.meter svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.meter__track,
.meter__fill {
    fill: none;
    stroke-width: 8;
    stroke-linecap: round;
    transform: rotate(135deg);
    transform-origin: 100px 100px;
}

.meter__track {
    stroke: rgba(244, 123, 37, 0.15);
    stroke-dasharray: 75 100;
}

.meter__fill {
    stroke: var(--tier);
    stroke-dasharray: 73.5 100;
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--tier) 60%, transparent));
}

.meter__readout {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 4px;
    text-align: center;
}

.meter__score {
    font-size: clamp(3.4rem, 2rem + 4svh, 5.2rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
    min-width: 2.2ch;
}

.meter__tier {
    font-size: 1.12rem;
    font-weight: 600;
    min-width: 11ch;
}

.meter__tagline {
    font-size: 0.9rem;
    color: var(--on-dark-3);
    min-width: 22ch;
}

.tiers {
    position: relative;
    list-style: none;
    padding: 0;
    display: flex;
    gap: clamp(4px, 1.1vw, 14px);
}

.tiers li {
    --c: #8b7355;
    display: grid;
    justify-items: center;
    gap: 8px;
    width: clamp(30px, 6.2vw, 74px);
}

.tiers__dot {
    display: grid;
    place-items: center;
    width: clamp(30px, 3.4vw, 44px);
    aspect-ratio: 1;
    border-radius: 50%;
    font-size: clamp(0.85rem, 1.2vw, 1.15rem);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    filter: grayscale(1) opacity(0.5);
    transition: filter 300ms var(--ease-out-cubic), box-shadow 300ms var(--ease-out-cubic),
        background-color 300ms var(--ease-out-cubic), scale 300ms var(--ease-out-back);
}

.tiers li.is-lit .tiers__dot {
    filter: none;
    background: color-mix(in srgb, var(--c) 22%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent);
}

.tiers li.is-current .tiers__dot {
    scale: 1.16;
    box-shadow: inset 0 0 0 1.5px var(--c), 0 0 15px color-mix(in srgb, var(--c) 45%, transparent);
}

.tiers__name {
    font-size: 0.74rem;
    font-weight: 500;
    color: var(--on-dark-3);
    white-space: nowrap;
}

.tiers li.is-lit .tiers__name {
    color: var(--on-dark-2);
}

.rules {
    position: relative;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 22px;
    padding: 14px 22px;
    border-radius: var(--r-panel);
    font-size: 0.93rem;
    color: var(--on-dark-2);
}

.rules b {
    color: var(--on-dark);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.synergy__line {
    position: relative;
    font-size: 0.98rem;
    color: var(--on-dark-3);
    text-align: center;
}

@media (max-width: 899px) {
    /* ten names don't fit in a row on a phone (the readout names each tier as
       the score climbs); screen readers still get the whole list */
    .tiers__name {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .rules {
        font-size: 0.85rem;
        padding: 12px 16px;
        gap: 6px 14px;
    }

    .synergy__line {
        display: none;
    }

    /* ...and it follows the stage instead (js/boot.js addCodas) */
    .js .synergy > .coda {
        display: block;
        color: var(--on-dark-3);
    }
}

/* Household: the app's invite card, recreated. */
.house {
    width: min(400px, 92vw);
    padding: 24px;
    border-radius: var(--r-sheet);
    color: var(--on-paper);
    box-shadow: 0 30px 60px -36px rgba(60, 40, 20, 0.45);
}

.house__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.house__name {
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.house__code {
    padding: 8px 14px;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.05);
    font-weight: 700;
    letter-spacing: 0.25em;
    font-variant-numeric: tabular-nums;
}

.house__label {
    margin-top: 22px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--on-paper-2);
}

.house__members {
    margin-top: 10px;
    display: flex;
    gap: 14px;
}

.member {
    display: grid;
    justify-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--on-paper-2);
}

.member__avatar {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.06);
    font-weight: 600;
    color: var(--on-paper);
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.08);
}

.member--admin .member__avatar {
    box-shadow: inset 0 0 0 2px #13c8ec;
}

.member__avatar svg {
    width: 22px;
    height: 22px;
    fill: var(--on-paper-3);
}

.house__qr {
    margin-top: 20px;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 16px;
}

.qr-plate {
    width: 112px;
    padding: 12px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.house__qr p {
    font-size: 0.9rem;
    color: var(--on-paper-2);
}

/* Features that reach iPhone with 1.1.1 say so (data-until="ios-1.1.1").
   Delete those notes once 1.1.1 is on the App Store. */
.avail {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 16px 0 0;
    padding: 7px 14px 7px 12px;
    border-radius: var(--r-pill);
    background: rgba(0, 0, 0, 0.045);
    font-size: 0.86rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--on-paper-2);
    text-align: left;
}

.avail::before {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #3ddc84;
}

/* ── Themes (signature 3): the app's Home, rendered live in any theme ── */
.themes {
    --t-bg: #0a0705;
    --t-surface: #1e293b;
    --t-glass: rgba(255, 255, 255, 0.078);
    --t-border: rgba(255, 255, 255, 0.149);
    --t-text: #ffffff;
    --t-text2: rgba(255, 255, 255, 0.702);
    --t-text3: rgba(255, 255, 255, 0.6);
    --t-glow1: rgba(245, 158, 11, 0.149);
    --t-glow2: rgba(225, 29, 72, 0.149);
    background: var(--t-bg);
    color: var(--t-text);
    transition: background-color var(--dur-4) var(--ease-out-cubic), color var(--dur-4) var(--ease-out-cubic);
}

.themes::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(40vmax 40vmax at 88% 8%, var(--t-glow1), transparent 70%),
        radial-gradient(36vmax 36vmax at 8% 92%, var(--t-glow2), transparent 70%);
}

.themes .section-body {
    color: var(--t-text2);
}

.themes__stage {
    position: relative;
    margin-top: clamp(40px, 6vw, 72px);
    display: grid;
    /* one column, never wider than the stage (the dock scrolls instead) */
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 28px;
}

.dock {
    display: flex;
    gap: 10px;
    max-width: min(100%, 980px);
    padding: 10px;
    border-radius: var(--r-pill);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    --fill: var(--t-glass);
    --border: var(--t-border);
}

.dock::-webkit-scrollbar {
    display: none;
}

.swatch {
    flex: none;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    scroll-snap-align: center;
    background: linear-gradient(135deg, var(--a) 50%, var(--b) 50%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25), 0 0 0 0 transparent;
    transition: box-shadow var(--dur-2) var(--ease-out-cubic), scale var(--dur-2) var(--ease-out-back);
}

.swatch[aria-checked="true"] {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25), 0 0 0 3px var(--t-bg), 0 0 0 5px var(--orange);
}

.swatch:active {
    scale: 0.94;
}

.themes__meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 8px 0 18px;
    border-radius: var(--r-pill);
    font-size: 0.95rem;
    --fill: var(--t-glass);
    --border: var(--t-border);
}

.themes__meta b {
    font-weight: 600;
}

.themes__tier {
    padding: 2px 10px;
    border-radius: var(--r-pill);
    font-size: 0.78rem;
    font-weight: 600;
    background: color-mix(in srgb, var(--t-text) 12%, transparent);
    color: var(--t-text2);
}

/* picking a theme re-tints the whole site: the new look grows out of the swatch */
html.vt-themes::view-transition-old(root),
html.vt-themes::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}

html.vt-themes::view-transition-new(root) {
    animation: theme-reveal 700ms var(--ease-out-cubic) both;
}

@keyframes theme-reveal {
    from { clip-path: circle(0 at var(--vt-x, 50%) var(--vt-y, 80%)); }
    to { clip-path: circle(150% at var(--vt-x, 50%) var(--vt-y, 80%)); }
}

/* ── Promises (privacy) ───────────────────────────────────────────────── */
.promises {
    margin: clamp(48px, 7vw, 88px) auto 0;
    max-width: 1080px;
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 56px;
}

.promise {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 18px;
    padding: 28px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.promise svg {
    width: 44px;
    height: 44px;
    padding: 10px;
    border-radius: 50%;
    fill: var(--orange);
    background: rgba(244, 123, 37, 0.1);
    box-shadow: inset 0 0 0 1px rgba(244, 123, 37, 0.22);
}

.promise h3 {
    font-size: 1.3rem;
    letter-spacing: -0.012em;
}

.promise p {
    margin-top: 6px;
    color: var(--on-dark-2);
}

.promise--story p {
    color: var(--on-dark);
}

.strip {
    margin: 40px auto 0;
    max-width: 1080px;
    padding: 16px 24px;
    border-radius: var(--r-pill);
    text-align: center;
    font-size: 0.95rem;
    color: var(--on-dark-2);
}

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

    .strip {
        border-radius: var(--r-panel);
    }
}

/* ── Plans: what's free, and what Plus and Pro add ─────────────────────── */
.plans__grid {
    margin: clamp(48px, 7vw, 80px) auto 0;
    max-width: 1080px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.plan {
    padding: 28px 26px 30px;
    border-radius: var(--r-panel);
    color: var(--on-paper);
    box-shadow: 0 24px 48px -34px rgba(60, 40, 20, 0.4);
}

.plan__name {
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: var(--track-label);
}

.plan--paid .plan__name {
    color: var(--orange-on-paper);
}

.plan__price {
    margin-top: 10px;
    font-size: 1rem;
    color: var(--on-paper-2);
}

.plan__price b {
    margin-right: 6px;
    font-size: 2.3rem;
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--on-paper);
}

.plan__price span {
    display: block;
    margin-top: 2px;
    font-size: 0.95rem;
}

.plan__lead {
    margin-top: 22px;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--on-paper-2);
}

.plan__list {
    margin: 14px 0 0;
    padding: 18px 0 0;
    list-style: none;
    display: grid;
    gap: 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    font-size: 0.98rem;
    line-height: 1.45;
}

.plan__lead + .plan__list {
    margin-top: 10px;
    padding-top: 0;
    border-top: 0;
}

.plan:not(.plan--paid) .plan__list {
    margin-top: 22px;
}

.plan__list li {
    position: relative;
    padding-left: 26px;
}

/* a check: two strokes of a rotated box */
.plan__list li::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 0.32em;
    width: 6px;
    height: 11px;
    border: solid var(--orange-on-paper);
    border-width: 0 2.25px 2.25px 0;
    border-radius: 1px;
    rotate: 40deg;
}

.plans__note {
    margin: 28px auto 0;
    max-width: 68ch;
    text-align: center;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--on-paper-2);
}

@media (max-width: 899px) {
    .plans__grid {
        grid-template-columns: minmax(0, 1fr);
        max-width: 520px;
    }
}

/* ── Finale ───────────────────────────────────────────────────────────── */
.finale {
    text-align: center;
    background:
        radial-gradient(60vmax 45vmax at 50% 0%, rgba(244, 123, 37, 0.2), transparent 70%),
        var(--dark);
}

.finale__mascot {
    width: clamp(150px, 20vw, 230px);
    margin: 0 auto 8px;
}

.finale__mascot.is-live {
    animation: mascot-float 3000ms var(--ease-in-out) infinite alternate;
}

@keyframes mascot-float {
    from { translate: 0 2%; }
    to { translate: 0 -2%; }
}

.finale .section-title {
    font-size: clamp(2.6rem, 1.4rem + 4.6vw, 5.4rem);
}

.finale__actions {
    margin-top: 34px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 14px 18px;
}

.finale__qr {
    margin: 36px auto 0;
    display: none;
    align-items: center;
    gap: 18px;
    width: max-content;
    padding: 14px 22px 14px 14px;
    border-radius: var(--r-sheet);
    text-align: left;
    font-size: 0.95rem;
    color: var(--on-dark-2);
}

.finale__qr b {
    display: block;
    color: var(--on-dark);
    font-weight: 600;
}

@media (min-width: 900px) and (hover: hover) {
    .finale__qr {
        display: flex;
    }
}

@media (prefers-reduced-motion: reduce) {
    .finale__mascot,
    .capsule__spark,
    .capsule__phrases span,
    .aurora,
    .cam__beam::before {
        animation: none !important;
    }
}

/* A theme switch animates only the themes section; the name exists only during the switch. */
/* Household: the shared timeline and the invite card side by side. */
.stage--house {
    align-items: center;
}

@media (max-width: 899px) {
    .stage--house {
        flex-direction: column-reverse;
    }
}

/* ── Themes: the device switch (iPhone · iPad · Both) ── */
.themes__devices {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
}

.themes .app--home {
    --w: min(320px, 76vw, max(200px, calc((100svh - 230px) * 390 / 844)));
}

.themes .app--ipad {
    --w: min(860px, 92vw, max(420px, calc((100svh - 230px) * 4 / 3)));
    display: none;
}

.themes__devices[data-device="ipad"] .app--home {
    display: none;
}

.themes__devices[data-device="ipad"] .app--ipad {
    display: block;
}

.themes__devices[data-device="both"] {
    padding: 0 0 clamp(40px, 6vw, 80px);
}

.themes__devices[data-device="both"] .app--ipad {
    --w: min(760px, 84vw, max(380px, calc((100svh - 300px) * 4 / 3)));
    display: block;
}

.themes__devices[data-device="both"] .app--home {
    --w: min(240px, 26vw, max(120px, calc((100svh - 300px) * 0.42)));
    position: absolute;
    right: max(0px, calc(50% - min(760px, 84vw, max(380px, calc((100svh - 300px) * 4 / 3))) / 2 - 56px));
    bottom: 0;
    box-shadow: 0 40px 70px -30px rgba(0, 0, 0, 0.8), 0 0 0 1px color-mix(in srgb, var(--t-text) 12%, transparent);
}

.themes .app {
    box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.7), 0 0 0 1px color-mix(in srgb, var(--t-text) 10%, transparent);
    /* only the theme picker re-tints a screen; elsewhere a late stylesheet
       must not fade every recreation in from transparent */
    transition: background-color var(--dur-4) var(--ease-out-cubic), color var(--dur-4) var(--ease-out-cubic);
}

/* The switch and the swatches float at the bottom of the screen while the
   devices are in view, so a tap and its result are always on screen together. */
.themes__controls {
    position: sticky;
    bottom: max(14px, env(safe-area-inset-bottom));
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px 12px;
    max-width: 100%;
}

/* floating over the devices, the pills need a thicker material than the
   section's glass: the theme's own background at 72%, then the blur */
.themes__controls > .glass-chrome {
    --fill: color-mix(in srgb, var(--t-bg) 72%, transparent);
}

html:not(.js) .themes__controls {
    display: none;
}

.devsw {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border-radius: var(--r-pill);
    --fill: var(--t-glass);
    --border: var(--t-border);
}

.devsw button {
    min-height: 40px;
    padding: 0 18px;
    border: 0;
    border-radius: var(--r-pill);
    background: transparent;
    font: 600 0.92rem/1 var(--font);
    color: var(--t-text2);
    cursor: pointer;
    transition: background-color var(--dur-2) var(--ease-out-cubic), color var(--dur-2) var(--ease-out-cubic);
}

.devsw button[aria-checked="true"] {
    background: color-mix(in srgb, var(--t-text) 14%, transparent);
    color: var(--t-text);
}

html:not(.js) .devsw {
    display: none;
}

.vt-devices .themes .app--home {
    view-transition-name: dev-iphone;
}

.vt-devices .themes .app--ipad {
    view-transition-name: dev-ipad;
}

::view-transition-group(dev-iphone),
::view-transition-group(dev-ipad) {
    animation-duration: 520ms;
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (max-width: 560px) {
    .themes__devices[data-device="both"] .app--home {
        --w: min(150px, 38vw);
        right: 4px;
    }

    /* name and switch share one row above the swatches */
    .themes__controls {
        gap: 8px;
    }

    .themes__meta {
        padding: 0 6px 0 14px;
        font-size: 0.9rem;
    }

    .devsw button {
        padding: 0 13px;
    }
}

/* ── The details, v2: thirteen tiles, mixed surfaces, each with a real visual ── */
.bx {
    margin: clamp(48px, 7vw, 88px) auto 0;
    max-width: 1180px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-areas:
        "ins ins wid off"
        "care snap wid lock"
        "gal gal lang hand"
        "wt heat jour port";
    gap: 14px;
}

.bx-t {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 236px;
    padding: 24px;
    border-radius: var(--r-sheet);
    overflow: hidden;
    background: #fff;
    color: var(--on-paper);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.055), 0 18px 40px -26px rgba(60, 40, 20, 0.35);
}

.bx-t[data-area="ins"] { grid-area: ins; }
.bx-t[data-area="wid"] { grid-area: wid; }
.bx-t[data-area="off"] { grid-area: off; }
.bx-t[data-area="care"] { grid-area: care; }
.bx-t[data-area="snap"] { grid-area: snap; }
.bx-t[data-area="lock"] { grid-area: lock; }
.bx-t[data-area="gal"] { grid-area: gal; }
.bx-t[data-area="lang"] { grid-area: lang; }
.bx-t[data-area="hand"] { grid-area: hand; }
.bx-t[data-area="wt"] { grid-area: wt; }
.bx-t[data-area="heat"] { grid-area: heat; }
.bx-t[data-area="jour"] { grid-area: jour; }
.bx-t[data-area="port"] { grid-area: port; }

.bx-t--dark {
    background:
        radial-gradient(120% 90% at 100% 0%, rgba(244, 123, 37, 0.16), transparent 60%),
        linear-gradient(180deg, #1b1510, #0f0b08);
    color: #fff;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 22px 44px -26px rgba(20, 12, 6, 0.6);
}

.bx-t--warm {
    background: linear-gradient(160deg, #fff4ea, #ffe2c9);
}

.bx-copy h3 {
    font-size: 1.18rem;
    line-height: 1.22;
    letter-spacing: -0.012em;
}

.bx-copy p {
    margin-top: 6px;
    font-size: 0.95rem;
    line-height: 1.45;
    color: var(--on-paper-2);
}

.bx-t--dark .bx-copy p {
    color: var(--on-dark-2);
}

.bx-t svg {
    fill: currentColor;
}

/* digest */
.bx-digest {
    margin-top: auto;
    display: grid;
    gap: 10px;
    padding: 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.bx-digest > b {
    font-size: 1rem;
}

.bx-dl {
    display: grid;
    grid-template-columns: 100px 1fr auto;
    align-items: center;
    gap: 10px;
    font-size: 0.86rem;
}

.bx-dl span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

.bx-dl span svg {
    width: 18px;
    height: 18px;
    fill: var(--orange);
}

.bx-dl small {
    color: var(--on-dark-2);
    font-size: 0.84rem;
}

.bx-spark {
    width: 120px;
    height: 28px;
    fill: none !important;
    stroke: var(--orange);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 160;
    stroke-dashoffset: 160;
    transition: stroke-dashoffset 1.4s var(--ease-out-cubic) 0.2s;
}

.is-live .bx-spark,
.motion-reduced .bx-spark,
html:not(.js) .bx-spark {
    stroke-dashoffset: 0;
}

.bx-bar {
    width: 120px;
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--orange) var(--f), rgba(255, 255, 255, 0.12) 0);
}

/* widgets */
.bx-widgets {
    margin-top: auto;
    display: grid;
    gap: 12px;
    justify-items: center;
}

.bx-w1,
.bx-w2 {
    width: min(100%, 220px);
    padding: 16px;
    border-radius: 26px;
    background: #15100c;
    color: #fff;
    box-shadow: 0 20px 36px -22px rgba(120, 60, 20, 0.6);
}

.bx-w1 {
    display: grid;
    justify-items: start;
    gap: 2px;
    aspect-ratio: 1;
    width: 150px;
}

.bx-ring {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin-bottom: auto;
    border-radius: 50%;
    background: conic-gradient(#ff6347 var(--f), rgba(255, 255, 255, 0.14) 0);
}

.bx-ring img {
    width: 54px;
    height: 54px;
    border-radius: 50%;
}

.bx-w1 b {
    font-size: 1rem;
}

.bx-w1 small {
    font-size: 0.78rem;
    color: var(--on-dark-2);
}

.bx-w2 {
    display: grid;
    gap: 8px;
}

.bx-w2 small {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--orange);
}

.bx-w2 span {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    font-size: 0.82rem;
}

.bx-w2 i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c);
}

.bx-w2 em {
    margin-left: auto;
    font-style: normal;
    font-size: 0.74rem;
    color: var(--on-dark-3);
}

/* offline */
.bx-off {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    align-self: flex-start;
    padding: 10px 14px;
    border-radius: var(--r-pill);
    background: #f2efeb;
    font-size: 0.88rem;
    font-weight: 600;
}

.bx-off svg {
    width: 20px;
    height: 20px;
    fill: var(--orange-on-paper);
}

/* care plan: the generating steps tick through */
.bx-steps {
    list-style: none;
    margin: auto 0 0;
    padding: 0;
    display: grid;
    gap: 8px;
    font-size: 0.86rem;
    color: var(--on-paper-2);
}

.bx-steps li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bx-steps li::before {
    content: "";
    flex: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(0, 0, 0, 0.14);
    transition: background-color 300ms, border-color 300ms;
    transition-delay: calc(var(--n, 0) * 450ms + 200ms);
}

.bx-steps li:nth-child(1) { --n: 0; }
.bx-steps li:nth-child(2) { --n: 1; }
.bx-steps li:nth-child(3) { --n: 2; }
.bx-steps li:nth-child(4) { --n: 3; }

.is-live .bx-steps li::before,
.motion-reduced .bx-steps li::before,
html:not(.js) .bx-steps li::before {
    border-color: var(--orange);
    background: var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2l2.6 2.6L12 5.4' fill='none' stroke='%231a0e05' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}

.bx-cta {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border-radius: 12px;
    background: rgba(244, 123, 37, 0.12);
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--orange-on-paper);
}

.bx-cta svg {
    width: 16px;
    height: 16px;
}

/* snap to log */
.bx-snap {
    margin-top: auto;
    display: grid;
    grid-template-columns: 76px 1fr;
    gap: 12px;
    align-items: center;
}

.bx-snap picture,
.bx-snap img {
    display: block;
    width: 76px;
    height: 76px;
    border-radius: 16px;
    object-fit: cover;
}

.bx-snap small {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--orange-on-paper);
}

.bx-snap b {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 2px 0;
    font-size: 1rem;
}

.bx-snap b svg {
    width: 18px;
    height: 18px;
    fill: #009688;
}

.bx-snap span {
    font-size: 0.82rem;
    color: var(--on-paper-2);
}

/* app lock */
.bx-lock {
    margin-top: auto;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.bx-lock__ic {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(244, 123, 37, 0.18);
}

.bx-lock__ic svg {
    width: 22px;
    height: 22px;
    fill: var(--orange);
}

.bx-lock b {
    display: block;
    font-size: 0.95rem;
}

.bx-lock small {
    font-size: 0.8rem;
    color: var(--on-dark-3);
}

.bx-toggle {
    position: relative;
    width: 44px;
    height: 26px;
    border-radius: 999px;
    background: var(--orange);
}

.bx-toggle::after {
    content: "";
    position: absolute;
    right: 3px;
    top: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
}

/* gallery */
.bx-gal {
    margin-top: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.bx-gal picture,
.bx-gal img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 14px;
    object-fit: cover;
}

/* languages: the greeting, in turn */
/* A one-line window the greetings slide through, like a departure board:
   always full ink (never half-faded), only ever clipped by the window. */
.bx-lang {
    margin-top: auto;
    display: grid;
    height: 1.6em;
    overflow: hidden;
    line-height: 1.6;
    white-space: nowrap;
    font-size: clamp(1.25rem, 1rem + 0.6vw, 1.5rem);
    font-weight: 600;
    letter-spacing: -0.01em;
}

.bx-lang span {
    grid-area: 1 / 1;
    translate: 0 105%;
    animation: bx-lang 12.5s var(--ease-in-out) infinite;
}

.bx-lang span:nth-child(2) { animation-delay: 2.5s; }
.bx-lang span:nth-child(3) { animation-delay: 5s; }
.bx-lang span:nth-child(4) { animation-delay: 7.5s; }
.bx-lang span:nth-child(5) { animation-delay: 10s; text-align: right; }

@keyframes bx-lang {
    0% { translate: 0 105%; }
    4%, 18% { translate: 0 0; }
    22%, 100% { translate: 0 -105%; }
}

.motion-reduced .bx-lang span,
html:not(.js) .bx-lang span {
    animation: none;
}

.motion-reduced .bx-lang span:first-child,
html:not(.js) .bx-lang span:first-child {
    translate: 0 0;
}

/* the hand-off code, as two rows of four (it never wraps by accident) */
.bx-code {
    margin-top: auto;
    display: grid;
    grid-template-columns: repeat(4, 34px);
    gap: 6px;
}

.bx-code span {
    display: grid;
    place-items: center;
    height: 40px;
    border-radius: 9px;
    background: #f2efeb;
    font-weight: 700;
}

.bx-tag {
    align-self: flex-start;
    padding: 3px 10px;
    border-radius: var(--r-pill);
    font-size: 0.75rem;
    font-weight: 600;
    background: rgba(139, 92, 246, 0.12);
    color: #6d28d9;
}

/* weight */
.bx-wt {
    margin-top: auto;
}

.bx-wt b {
    font-size: 2.2rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: #db2777;
}

.bx-wt em {
    font-style: normal;
    font-size: 0.9rem;
    color: var(--on-paper-2);
}

.bx-wt svg {
    display: block;
    width: 100%;
    height: 56px;
    fill: none !important;
}

.bx-wt__l {
    stroke: #db2777;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: 260;
    stroke-dashoffset: 260;
    transition: stroke-dashoffset 1.6s var(--ease-out-cubic) 0.2s;
}

.is-live .bx-wt__l,
.motion-reduced .bx-wt__l,
html:not(.js) .bx-wt__l {
    stroke-dashoffset: 0;
}

/* heatmap */
.bx-heat {
    margin-top: auto;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 4px;
}

.bx-heat i {
    aspect-ratio: 1;
    border-radius: 4px;
    background: rgba(217, 70, 239, calc(0.15 + var(--o) * 0.75));
}

/* journal */
.bx-quote {
    margin-top: auto;
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.bx-quote img {
    width: 34px;
    height: auto;
}

.bx-quote span {
    padding: 12px 14px;
    border-radius: 18px 18px 18px 6px;
    background: #f2efeb;
    font-size: 0.92rem;
    font-style: italic;
}

/* portraits: the four styles to pick from */
.bx-port {
    margin-top: auto;
    display: grid;
    grid-template-columns: 84px 1fr;
    gap: 12px;
    align-items: center;
}

.bx-port picture,
.bx-port img {
    display: block;
    width: 84px;
    height: 84px;
    border-radius: 18px;
    object-fit: cover;
}

.bx-port div {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.bx-port span {
    padding: 5px 10px;
    border-radius: var(--r-pill);
    background: #f2efeb;
    font-size: 0.78rem;
    font-weight: 600;
}

.bx-port span.is-on {
    background: var(--orange);
    color: var(--orange-ink);
}

@media (max-width: 1023px) {
    .bx {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            "ins ins"
            "wid off"
            "wid lock"
            "care snap"
            "gal gal"
            "lang hand"
            "wt heat"
            "jour port";
    }
}

@media (max-width: 560px) {
    .bx {
        grid-template-columns: 1fr;
        grid-template-areas: none;
    }

    .bx .bx-t[data-area] {
        grid-area: auto;
        min-height: 0;
    }

    .bx-dl {
        grid-template-columns: 90px 1fr;
    }

    .bx-dl .bx-spark,
    .bx-dl .bx-bar {
        display: none;
    }
}

/* ── Household: Mango's day, recreated (activity_log_screen) ── */
.app--tl {
    --w: min(300px, 72vw);
}

.tl-title {
    margin-right: auto;
    font-size: calc(17 * var(--u));
    font-weight: 600;
}

.c-head .tl-title {
    margin-left: calc(54 * var(--u));
}

.tl-av {
    width: calc(34 * var(--u));
    height: calc(34 * var(--u));
    border-radius: 50%;
    box-shadow: 0 0 0 calc(2 * var(--u)) #ff6347;
}

.tl-list {
    position: absolute;
    top: calc(104 * var(--u));
    left: calc(14 * var(--u));
    right: calc(14 * var(--u));
    display: grid;
    gap: calc(10 * var(--u));
}

.tl-day {
    font-size: calc(12 * var(--u));
    font-weight: 600;
    color: var(--t-text2);
}

.tl-row {
    position: relative;
    display: grid;
    grid-template-columns: calc(22 * var(--u)) 1fr;
    align-items: center;
}

.tl-row::before {
    content: "";
    position: absolute;
    left: calc(5 * var(--u));
    top: 50%;
    height: calc(100% + 10 * var(--u));
    width: calc(2 * var(--u));
    background: linear-gradient(var(--c), transparent);
    opacity: 0.5;
}

.tl-row:last-child::before {
    display: none;
}

.tl-row i {
    width: calc(12 * var(--u));
    height: calc(12 * var(--u));
    border-radius: 50%;
    border: calc(2 * var(--u)) solid var(--c);
    background: color-mix(in srgb, var(--c) 30%, #120c22);
}

.tl-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: calc(10 * var(--u));
    padding: calc(10 * var(--u)) calc(12 * var(--u));
    border-radius: calc(16 * var(--u));
    background: var(--t-glass);
    border: 1px solid var(--t-border);
    font-size: calc(12.5 * var(--u));
}

.tl-ic {
    display: grid;
    place-items: center;
    width: calc(32 * var(--u));
    height: calc(32 * var(--u));
    border-radius: 50%;
    background: color-mix(in srgb, var(--c) 18%, transparent);
    color: var(--c);
}

.tl-ic svg {
    width: calc(16 * var(--u));
    height: calc(16 * var(--u));
}

.tl-card b {
    display: block;
    font-weight: 600;
}

.tl-card small {
    display: block;
    font-size: calc(10.5 * var(--u));
    color: var(--t-text3);
}

.tl-card time {
    font-size: calc(10 * var(--u));
    color: var(--t-text3);
}

/* ── Finale: the weekends return, and one is lit ── */
.finale {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.finale__weeks {
    --cols: 30;
    --rows: 20;
    --cell: min(calc(92vw / var(--cols)), 30px);
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 50%;
    width: calc(var(--cell) * var(--cols));
    height: calc(var(--cell) * var(--rows));
    translate: -50% -50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03));
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='11' y='11' width='78' height='78' rx='14'/%3E%3C/svg%3E") 0 0 / var(--cell) var(--cell) repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='11' y='11' width='78' height='78' rx='14'/%3E%3C/svg%3E") 0 0 / var(--cell) var(--cell) repeat;
    opacity: 0.9;
}

.finale__weeks::after {
    /* a vignette so the edges dissolve into the page */
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(60% 60% at 50% 50%, transparent 40%, var(--dark) 100%);
}

.finale__sil {
    position: absolute;
    inset: 0;
    background: rgba(180, 72, 12, 0.32);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M84.8 22.7L84.2 24.8L82.6 27.5L81.2 30.1L80.0 31.7L78.0 33.6L77.2 35.7L77.4 40.0L77.8 45.3L78.0 52.0L77.6 58.7L76.8 65.3L76.0 70.7L76.6 74.7L77.2 76.7L76.0 78.1L72.0 78.1L69.0 77.3L62.0 77.9L54.0 78.7L47.0 79.5L40.0 80.0L33.0 79.7L29.6 79.2L25.0 78.7L18.0 77.6L12.0 76.0L7.2 74.7L6.2 73.1L8.0 71.5L14.0 71.2L22.0 72.0L30.0 70.9L32.8 68.3L34.0 62.7L36.0 56.0L39.2 49.6L43.0 44.0L47.0 39.7L51.0 35.7L54.8 32.0L58.0 27.5L59.8 22.7L61.0 18.7L62.8 15.5L65.2 12.8L67.6 11.2L70.4 10.4L72.8 11.2L74.8 13.1L77.2 14.9L80.0 16.8L82.6 19.2L84.2 21.1Z'/%3E%3C/svg%3E") calc(var(--cell) * 0.412) calc(var(--cell) * -0.269) / calc(var(--cell) * 32.061) calc(var(--cell) * 24.046) no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M84.8 22.7L84.2 24.8L82.6 27.5L81.2 30.1L80.0 31.7L78.0 33.6L77.2 35.7L77.4 40.0L77.8 45.3L78.0 52.0L77.6 58.7L76.8 65.3L76.0 70.7L76.6 74.7L77.2 76.7L76.0 78.1L72.0 78.1L69.0 77.3L62.0 77.9L54.0 78.7L47.0 79.5L40.0 80.0L33.0 79.7L29.6 79.2L25.0 78.7L18.0 77.6L12.0 76.0L7.2 74.7L6.2 73.1L8.0 71.5L14.0 71.2L22.0 72.0L30.0 70.9L32.8 68.3L34.0 62.7L36.0 56.0L39.2 49.6L43.0 44.0L47.0 39.7L51.0 35.7L54.8 32.0L58.0 27.5L59.8 22.7L61.0 18.7L62.8 15.5L65.2 12.8L67.6 11.2L70.4 10.4L72.8 11.2L74.8 13.1L77.2 14.9L80.0 16.8L82.6 19.2L84.2 21.1Z'/%3E%3C/svg%3E") calc(var(--cell) * 0.412) calc(var(--cell) * -0.269) / calc(var(--cell) * 32.061) calc(var(--cell) * 24.046) no-repeat;
}

/* "this weekend": the tile at Mango's heart, lit and breathing */
.finale__now {
    position: absolute;
    z-index: 1;
    left: calc(var(--cell) * 21);
    top: calc(var(--cell) * 12);
    width: var(--cell);
    height: var(--cell);
    background: radial-gradient(120% 90% at 70% 25%, #ffb27a, var(--orange) 45%, #b4480c 100%);
    box-shadow: 0 0 calc(var(--cell) * 1.4) rgba(244, 123, 37, 0.85);
    animation: finale-now 2.6s var(--ease-in-out) infinite;
}

@keyframes finale-now {
    50% { opacity: 0.55; box-shadow: 0 0 calc(var(--cell) * 0.6) rgba(244, 123, 37, 0.5); }
}

@media (max-width: 899px) {
    .finale__weeks {
        --cols: 20;
        --rows: 30;
        --cell: min(calc(96vw / var(--cols)), 26px);
    }

    .finale__sil {
        -webkit-mask-position: calc(var(--cell) * -1.114) calc(var(--cell) * 8.519);
        mask-position: calc(var(--cell) * -1.114) calc(var(--cell) * 8.519);
        -webkit-mask-size: calc(var(--cell) * 24.427) calc(var(--cell) * 18.32);
        mask-size: calc(var(--cell) * 24.427) calc(var(--cell) * 18.32);
    }

    .finale__now {
        left: calc(var(--cell) * 15);
        top: calc(var(--cell) * 18);
    }
}

@media (prefers-reduced-motion: reduce) {
    .finale__now {
        animation: none;
    }
}

/* With a mouse, a soft light follows the pointer across the tiles (glass catching
   a lamp), warm on the dark ones. Touch devices never pay for it. */
@media (hover: hover) and (pointer: fine) {
    .bx-t::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
        opacity: 0;
        transition: opacity 360ms var(--ease-out-cubic);
        background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 196, 150, 0.28), transparent 62%);
    }

    .bx-t--dark::after {
        background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 178, 122, 0.16), transparent 60%);
    }

    .bx-t:hover::after {
        opacity: 1;
    }
}

/* ── Hero: petting (js/hero.js) ─────────────────────────────────────────
   The grid takes horizontal strokes; the page keeps vertical scrolling and
   zoom. The hint shows once the glass is live, at rest, until the first heart. */
.js:not(.motion-reduced) .hero__poster {
    touch-action: pan-y pinch-zoom;
    -webkit-user-select: none;
    user-select: none;
}

.gl-ready .hero__poster {
    cursor: grab;
}

.gl-ready .hero__poster:active {
    cursor: grabbing;
}

.hero__pet {
    position: absolute;
    z-index: 3;
    left: var(--count-x, 50%);
    top: var(--count-y, 90%);
    translate: -50% 0;
    margin: 0;
    font-size: 0.86rem;
    letter-spacing: var(--track-label);
    color: var(--on-dark-3);
    white-space: nowrap;
    pointer-events: none;
    animation-name: hero-pet;
}

.gl-ready .hero__pet {
    display: block;
}

.hero__pet-touch,
.is-petted .hero__pet {
    display: none;
}

@media not all and (hover: hover) and (pointer: fine) {
    .hero__pet-fine {
        display: none;
    }

    .hero__pet-touch {
        display: inline;
    }
}

@keyframes hero-pet {
    0%, 1% { opacity: 1; }
    4%, 100% { opacity: 0; }
}

.hero__heart {
    position: absolute;
    width: 46px;
    height: 42px;
    margin: -21px 0 0 -23px;
    background: linear-gradient(160deg, #fff4ea, var(--orange-soft) 45%, var(--orange));
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21.4l-1.5-1.3C5.2 15.4 2 12.5 2 8.9 2 5.9 4.4 3.6 7.4 3.6c1.7 0 3.3.8 4.6 2.1 1.3-1.3 2.9-2.1 4.6-2.1 3 0 5.4 2.3 5.4 5.3 0 3.6-3.2 6.5-8.5 11.2L12 21.4z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21.4l-1.5-1.3C5.2 15.4 2 12.5 2 8.9 2 5.9 4.4 3.6 7.4 3.6c1.7 0 3.3.8 4.6 2.1 1.3-1.3 2.9-2.1 4.6-2.1 3 0 5.4 2.3 5.4 5.3 0 3.6-3.2 6.5-8.5 11.2L12 21.4z'/%3E%3C/svg%3E") center / contain no-repeat;
    filter: drop-shadow(0 0 10px rgba(255, 178, 122, 0.9)) drop-shadow(0 0 26px rgba(244, 123, 37, 0.55));
    animation: hero-heart 1.6s var(--ease-out-cubic) forwards;
}

@keyframes hero-heart {
    0% { opacity: 0; scale: 0.3; translate: 0 6px; }
    14% { opacity: 1; scale: 1.18; }
    28% { scale: 1; translate: 0 -8px; }
    55% { opacity: 1; }
    100% { opacity: 0; scale: 0.92; translate: 0 -120px; }
}