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

    :root {
      --bg: #000b1f;
      --card: #0d1b2e;
      --elevated: #152336;
      --teal: #0ebec6;
      --teal-bright: #1ad4dc;
      --amber: #ffc74d;
      --orange: #f59f2d;
      --coral: #fe6154;
      --green: #2ecc71;
      --purple: #9b59b6;
      --text: #ffffff;
      --muted: rgba(255, 255, 255, 0.72);
      --soft: rgba(255, 255, 255, 0.5);
      --faint: rgba(255, 255, 255, 0.3);
      --border: rgba(255, 255, 255, 0.1);
      --border-strong: rgba(255, 255, 255, 0.2);
    }

    html { scroll-behavior: smooth; }

    body {
      background: var(--bg);
      color: var(--text);
      font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      line-height: 1.6;
      overflow-x: hidden;
    }

    .wrap { max-width: 1120px; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2.5rem); }

    a { color: var(--teal); }

    /* ------------------------------------------------------------------ nav */
    nav {
      position: sticky; top: 0; z-index: 50;
      background: rgba(0, 11, 31, 0.82);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border-bottom: 1px solid var(--border);
    }
    .nav-inner {
      display: flex; align-items: center; justify-content: space-between;
      padding-top: 0.55rem; padding-bottom: 0.55rem;
    }
    /* Mark-to-wordmark proportion mirrors the app's top bar (44px mark beside
       28px text): the PNG carries transparent padding, so it runs larger than
       the text on purpose. Tight gap — the padding supplies the visual gap. */
    .nav-brand { display: flex; align-items: center; gap: 0.15rem; text-decoration: none; color: var(--text); }
    .nav-brand img { width: 54px; height: 54px; }
    .nav-brand span { font-weight: 800; font-size: 1.35rem; letter-spacing: -0.03em; }
    .nav-links { display: flex; align-items: center; gap: 1.4rem; }
    .nav-links a { color: var(--muted); text-decoration: none; font-weight: 600; font-size: 0.95rem; }
    .nav-links a:hover { color: var(--text); }
    .nav-cta {
      color: var(--bg) !important; background: var(--teal);
      padding: 0.45rem 1rem; border-radius: 999px; font-weight: 800 !important;
    }
    /* Mobile: the whole link row goes, CTA included - it visually competed
       with the hero's email CTA right below it. */
    @media (max-width: 700px) {
      .nav-links a { display: none; }
    }

    /* ----------------------------------------------------------------- hero */
    .hero {
      position: relative;
      /* Top gap mirrors the kicker's own 1.1rem gap down to the H1, so the
         kicker sits evenly between the nav line and the headline. */
      padding: 1.1rem 0 clamp(3rem, 6vw, 5rem);
      overflow: hidden;
    }
    /* One soft glow, top-right only. The old lower-left coral glow clipped
       against the section edge and read as a hard line. */
    .hero::before {
      content: ""; position: absolute; inset: 0; pointer-events: none;
      background:
        radial-gradient(560px 420px at 78% 18%, rgba(14, 190, 198, 0.13), transparent 70%);
    }
    .hero-grid {
      position: relative;
      display: grid; grid-template-columns: 1.08fr 0.92fr;
      /* start, not center: centering against the taller phone demo floated
         the copy down and broke the kicker's even top spacing on desktop. */
      gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
    }
    .kicker {
      display: inline-flex; align-items: center; gap: 0.5rem;
      color: var(--teal); font-weight: 800; font-size: 0.85rem;
      letter-spacing: 0.22em; text-transform: uppercase;
      margin-bottom: 1.1rem;
    }
    .kicker::before { content: ""; width: 26px; height: 2px; background: var(--teal); border-radius: 2px; }
    h1 {
      font-size: clamp(2.5rem, 5.6vw, 4.2rem);
      font-weight: 900; line-height: 1.04; letter-spacing: -0.03em;
    }
    h1 .pop { color: var(--coral); }
    .hero-sub {
      color: var(--muted); font-size: clamp(1.05rem, 1.6vw, 1.25rem);
      max-width: 33em; margin-top: 1.3rem;
    }
    .hero-sub strong { color: var(--text); }
    .hero-wink {
      color: var(--soft); font-size: 0.95rem; font-weight: 600;
      margin-top: 0.9rem; max-width: 36em;
    }

    .notify { margin-top: 1.8rem; max-width: 30rem; }
    .notify-row { display: flex; gap: 0.6rem; }
    .notify input[type="email"] {
      flex: 1; min-width: 0;
      background: var(--card); border: 1px solid var(--border-strong);
      color: var(--text); font: inherit; font-weight: 600;
      padding: 0.85rem 1.1rem; border-radius: 999px; outline: none;
    }
    .notify input[type="email"]::placeholder { color: var(--soft); }
    .notify input[type="email"]:focus { border-color: var(--teal); }
    .notify button {
      background: var(--teal); color: var(--bg);
      font: inherit; font-weight: 800; border: 0; cursor: pointer;
      padding: 0.85rem 1.5rem; border-radius: 999px;
      transition: transform 0.15s ease, background 0.15s ease;
      white-space: nowrap;
    }
    .notify button:hover { background: var(--teal-bright); transform: translateY(-1px); }
    .notify-note { color: var(--soft); font-size: 0.85rem; margin-top: 0.7rem; }
    .notify-done { display: none; color: var(--green); font-weight: 700; padding: 0.85rem 0; }
    .notify.sent .notify-row, .notify.sent .notify-note { display: none; }
    .notify.sent .notify-done { display: block; }
    @media (max-width: 480px) {
      .notify-row { flex-direction: column; }
      .notify button { width: 100%; }
    }

    /* ----------------------------------------------------- hero phone demo */
    .demo { position: relative; display: flex; flex-direction: column; align-items: center; }
    .phone {
      position: relative; width: min(310px, 78vw);
      border-radius: 44px; padding: 12px;
      background: #060f22;
      border: 1px solid var(--border-strong);
      box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.4);
      animation: floaty 7.2s ease-in-out infinite;
    }
    @keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
    /* Rounded clipping of GPU-transformed children leaks 1px rings in
       Chrome/Safari with plain overflow:hidden — clip-path + an isolated
       compositing layer make the clip stick. Background matches the bezel
       so any residual subpixel ring is invisible. */
    .screen {
      position: relative; border-radius: 34px; overflow: hidden;
      clip-path: inset(0 round 34px);
      isolation: isolate; transform: translateZ(0);
      background: #060f22; aspect-ratio: 9 / 17.5;
    }
    /* Bezel ring above EVERYTHING in the screen: the floating phone passes
       through fractional pixel offsets, so the clip edge and the content
       re-round differently per frame. A 2px opaque ring in the bezel color
       masks that junction permanently, match overlay included. */
    .screen::after {
      content: ""; position: absolute; inset: 0; z-index: 9;
      border-radius: 34px;
      box-shadow: inset 0 0 0 2px #060f22;
      pointer-events: none;
    }
    /* The demo reel: one 12s timeline shared by every animation so the
       scroll, the pins and the match stay in sync.
       0.0-1.9s  card 1 holds          1.9-2.6s scroll
       2.6-4.6s  card 2 holds          4.6-5.3s scroll
       5.3s-     card 3 (the winner)   6.0-7.8s four pins land
       8.4-11.5s match overlay         11.5-12s fade, loop            */
    .reel-track {
      position: absolute; inset: 0; height: 300%;
      will-change: transform;
      animation: reelScroll 12s cubic-bezier(0.65, 0, 0.35, 1) infinite;
    }
    @keyframes reelScroll {
      0%, 16% { transform: translateY(0); }
      22%, 38% { transform: translateY(-33.3333%); }
      44%, 100% { transform: translateY(-66.6667%); }
    }
    /* Each image bleeds 2px on the sides and DOWNWARD only. The downward
       overhang covers the seam to the next card at any fractional scroll
       position; bleeding upward is forbidden — the next card (painted on
       top, later in DOM) would poke 2px into the bottom of the screen while
       the current card holds. Cards are NOT clipped, so the bleed survives. */
    .stay { position: relative; width: 100%; height: 33.3333%; background: #060f22; }
    .stay img {
      position: absolute; top: 0; left: -2px;
      width: calc(100% + 4px); height: calc(100% + 2px);
      object-fit: cover; display: block;
    }
    /* Bottom shade mirrors the app reel's legibility gradient. */
    .stay-shade {
      position: absolute; left: 0; right: 0; bottom: 0; height: 46%;
      background: linear-gradient(180deg, transparent, rgba(0, 11, 31, 0.55) 45%, rgba(0, 11, 31, 0.92));
    }
    .stay-meta { position: absolute; left: 16px; right: 76px; bottom: 18px; }
    .stay-name { font-weight: 800; font-size: 1.12rem; letter-spacing: -0.01em; text-shadow: 0 1px 8px rgba(0,0,0,0.4); }
    .stay-loc { color: rgba(255,255,255,0.85); font-size: 0.8rem; margin-top: 0.1rem; }
    .stay-price { color: var(--amber); font-weight: 800; font-size: 0.92rem; margin-top: 0.35rem; }
    .stay-price span { color: rgba(255,255,255,0.6); font-weight: 600; font-size: 0.76rem; }
    /* Lives in the fixed right rail (flex child, no own positioning). */
    .pin-fab {
      width: 50px; height: 50px; border-radius: 50%;
      display: grid; place-items: center;
      background: rgba(0, 11, 31, 0.55); border: 1.5px solid rgba(255,255,255,0.35);
      backdrop-filter: blur(4px);
    }
    .pin-fab svg { width: 23px; height: 23px; }
    /* Only the winning card's pin fills, just before the pins land. */
    .fab-final { animation: fabFill 12s ease infinite; }
    @keyframes fabFill {
      0%, 47% { background: rgba(0, 11, 31, 0.55); border-color: rgba(255,255,255,0.35); transform: scale(1); }
      50% { transform: scale(1.16); }
      53%, 95% { background: var(--coral); border-color: var(--coral); transform: scale(1); }
      99%, 100% { background: rgba(0, 11, 31, 0.55); border-color: rgba(255,255,255,0.35); }
    }
    /* Members' pins, scattered across the winning stay. */
    .pinmark { position: absolute; opacity: 0; transform: scale(0); }
    .pm-face {
      display: grid; place-items: center;
      width: 34px; height: 34px; border-radius: 50%;
      font-weight: 800; font-size: 0.68rem; letter-spacing: 0.02em; color: #00131f;
      border: 2px solid rgba(255, 255, 255, 0.9);
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    }
    /* Classic CSS teardrop map pin, pointing down. */
    .pm-pin {
      position: absolute; top: -7px; right: -7px;
      width: 14px; height: 14px;
      background: var(--coral);
      border: 2px solid var(--bg);
      border-radius: 50% 50% 50% 0;
      transform: rotate(-45deg);
    }
    .pm-1 { left: 12%; top: 16%; animation: pmPop1 12s ease infinite; }
    .pm-2 { right: 13%; top: 27%; animation: pmPop2 12s ease infinite; }
    .pm-3 { left: 19%; top: 45%; animation: pmPop3 12s ease infinite; }
    .pm-4 { right: 21%; top: 54%; animation: pmPop4 12s ease infinite; }
    @keyframes pmPop1 { 0%, 50% { opacity: 0; transform: scale(0); } 54%, 96% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0); } }
    @keyframes pmPop2 { 0%, 55% { opacity: 0; transform: scale(0); } 59%, 96% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0); } }
    @keyframes pmPop3 { 0%, 60% { opacity: 0; transform: scale(0); } 64%, 96% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0); } }
    @keyframes pmPop4 { 0%, 65% { opacity: 0; transform: scale(0); } 69%, 96% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0); } }
    /* The match: scrim, the logo, bold words. The app's moment, simplified. */
    /* Overhangs the screen by 2px and carries its own radius: elements with
       backdrop-filter escape ancestor corner clipping in some engines, which
       showed as an edge ring while the overlay was up. */
    .match-overlay {
      position: absolute; inset: -2px; z-index: 5;
      border-radius: 36px;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 0.55rem; text-align: center;
      background: rgba(0, 11, 31, 0.82);
      backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
      opacity: 0; animation: matchShow 12s cubic-bezier(0.2, 1.2, 0.4, 1) infinite;
    }
    .match-overlay img { width: 78px; height: 78px; }
    .match-title { font-weight: 900; font-size: 1.4rem; letter-spacing: 0.05em; }
    .match-stay { color: var(--teal); font-weight: 700; font-size: 0.92rem; }
    @keyframes matchShow {
      0%, 70% { opacity: 0; transform: scale(0.92); }
      75%, 95% { opacity: 1; transform: scale(1); }
      99%, 100% { opacity: 0; transform: scale(0.97); }
    }
    /* The app reel's fixed chrome inside the phone: mark left, filter right. */
    .reel-topbar {
      position: absolute; top: 12px; left: 12px; right: 12px; z-index: 4;
      display: flex; align-items: center; justify-content: space-between;
      pointer-events: none;
    }
    .reel-topbar img { width: 34px; height: 34px; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.35)); }
    .reel-filter {
      display: grid; place-items: center;
      width: 36px; height: 36px; border-radius: 50%;
      background: rgba(0, 11, 31, 0.45); border: 1.5px solid rgba(255,255,255,0.4);
      backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    }
    .reel-filter svg { width: 18px; height: 18px; }
    /* Right action rail, fixed over the scroll — chat, map, pin. */
    .reel-rail {
      position: absolute; right: 12px; bottom: 16px; z-index: 4;
      display: flex; flex-direction: column; align-items: center; gap: 10px;
      pointer-events: none;
    }
    .rail-btn {
      display: grid; place-items: center;
      width: 42px; height: 42px; border-radius: 50%;
      background: rgba(0, 11, 31, 0.45); border: 1.5px solid rgba(255,255,255,0.35);
      backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    }
    .rail-btn svg { width: 19px; height: 19px; opacity: 0.95; }
    /* Photo-carousel dots, per card, under the top bar. */
    .dots {
      position: absolute; top: 58px; left: 0; right: 0;
      display: flex; justify-content: center; gap: 5px;
    }
    .dots span {
      width: 4px; height: 4px; border-radius: 999px;
      background: rgba(255, 255, 255, 0.45);
    }
    .dots span.on { width: 14px; background: rgba(255, 255, 255, 0.95); }
    /* The group, under the phone. */
    .crew { display: flex; gap: 0.8rem; margin-top: 1.3rem; }
    .crew-face {
      display: grid; place-items: center;
      width: 44px; height: 44px; border-radius: 50%;
      font-weight: 800; font-size: 0.82rem; letter-spacing: 0.02em; color: #00131f;
      border: 2px solid var(--bg);
    }
    .crew-caption { color: var(--soft); font-size: 0.82rem; margin-top: 0.8rem; font-weight: 600; }

    @media (max-width: 880px) {
      .hero-grid { grid-template-columns: 1fr; }
      .demo { order: 2; margin-top: 1rem; }
    }

    /* ------------------------------------------------------------- sections */
    section { padding: clamp(3.2rem, 7vw, 5.5rem) 0; }
    .sec-kicker {
      color: var(--teal); font-weight: 800; font-size: 0.8rem;
      letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 0.7rem;
    }
    h2 {
      font-size: clamp(1.8rem, 3.6vw, 2.7rem);
      font-weight: 900; letter-spacing: -0.025em; line-height: 1.12;
    }
    .sec-sub { color: var(--muted); max-width: 38em; margin-top: 0.8rem; font-size: 1.05rem; }

    /* reveal-on-scroll */
    .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.6s ease, transform 0.6s ease; }
    .reveal.in { opacity: 1; transform: none; }

    /* -------------------------------------------------------- chat (pain) */
    .pain-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
    .chat {
      background: var(--card); border: 1px solid var(--border);
      border-radius: 22px; padding: 1.3rem; max-width: 420px;
      display: flex; flex-direction: column; gap: 0.55rem;
    }
    .chat-title { color: var(--soft); font-size: 0.8rem; font-weight: 700; text-align: center; margin-bottom: 0.4rem; }
    .bubble {
      max-width: 85%; padding: 0.55rem 0.9rem; border-radius: 16px;
      font-size: 0.92rem; line-height: 1.45;
    }
    .bubble.them { background: var(--elevated); color: var(--muted); border-bottom-left-radius: 5px; align-self: flex-start; }
    .bubble.you { background: #0a4a52; color: #e8feff; border-bottom-right-radius: 5px; align-self: flex-end; }
    .chat-stat {
      margin-top: 0.7rem; text-align: center;
      color: var(--coral); font-weight: 800; font-size: 0.9rem; letter-spacing: 0.04em;
    }
    .pain-copy h2 .pop { color: var(--teal); }
    .pain-points { margin-top: 1.4rem; display: flex; flex-direction: column; gap: 0.9rem; }
    .pain-points li { list-style: none; color: var(--muted); display: flex; gap: 0.7rem; }
    .pain-points li::before { content: "·"; color: var(--teal); font-weight: 900; font-size: 1.4rem; line-height: 1.1; }
    .pain-points strong { color: var(--text); }
    @media (max-width: 880px) { .pain-grid { grid-template-columns: 1fr; } .chat { margin: 0 auto; } }

    /* ----------------------------------------------------- ticket steps */
    .tickets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 2.4rem; }
    .ticket {
      position: relative; background: var(--card);
      border: 1px solid var(--border); border-radius: 18px;
      padding: 1.5rem 1.3rem 1.4rem;
      /* no overflow:hidden — it clipped the notches at the padding box (1px
         short of the border), so the card outline ran through the cutout */
    }
    /* boarding-pass perforation: the notches ride the tear itself, centered
       on its dashed line whatever the font metrics. clip-path keeps only the
       inner half of each disc, and since children paint above their parent's
       border, the disc's own arc replaces the card outline at the cutout. */
    .ticket .tear {
      position: relative;
      border-bottom: 2px dashed var(--border-strong);
      margin: 0 -1.3rem 1.1rem; padding: 0 1.3rem 0.9rem;
      display: flex; align-items: baseline; justify-content: space-between;
    }
    .ticket .tear::before, .ticket .tear::after {
      content: ""; position: absolute; bottom: -7px;
      width: 16px; height: 16px; border-radius: 50%; box-sizing: border-box;
      background: var(--bg); border: 1px solid var(--border);
    }
    .ticket .tear::before { left: -9px; clip-path: inset(-2px -2px -2px 50%); }
    .ticket .tear::after { right: -9px; clip-path: inset(-2px 50% -2px -2px); }
    .ticket .step { font-weight: 900; font-size: 0.78rem; letter-spacing: 0.18em; }
    .ticket .no { color: var(--faint); font-weight: 900; font-size: 1.6rem; letter-spacing: -0.02em; }
    .ticket h3 { font-size: 1.18rem; font-weight: 800; letter-spacing: -0.01em; }
    .ticket p { color: var(--muted); font-size: 0.93rem; margin-top: 0.45rem; }
    .t-teal .step { color: var(--teal); }
    .t-amber .step { color: var(--amber); }
    .t-coral .step { color: var(--coral); }
    .t-green .step { color: var(--green); }
    @media (max-width: 980px) { .tickets { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 540px) { .tickets { grid-template-columns: 1fr; } }

    /* -------------------------------------------------------- feature grid */
    .features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2.4rem; }
    .feat {
      background: var(--card); border: 1px solid var(--border);
      border-radius: 18px; padding: 1.4rem 1.3rem;
    }
    .feat .dot {
      width: 42px; height: 42px; border-radius: 50%;
      display: grid; place-items: center; margin-bottom: 0.9rem;
    }
    .feat .dot svg { width: 20px; height: 20px; }
    .feat h3 { font-size: 1.05rem; font-weight: 800; }
    .feat p { color: var(--muted); font-size: 0.92rem; margin-top: 0.35rem; }
    .d-teal { background: rgba(14, 190, 198, 0.14); }
    .d-amber { background: rgba(255, 199, 77, 0.14); }
    .d-coral { background: rgba(254, 97, 84, 0.14); }
    .d-green { background: rgba(46, 204, 113, 0.14); }
    .d-purple { background: rgba(155, 89, 182, 0.16); }
    .d-white { background: rgba(255, 255, 255, 0.1); }
    @media (max-width: 880px) { .features { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 540px) { .features { grid-template-columns: 1fr; } }

    /* ------------------------------------------------------------ audience */
    .who { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2.4rem; }
    .who-card {
      border-radius: 20px; padding: 1.6rem 1.4rem;
      border: 1px solid var(--border);
      background: linear-gradient(170deg, var(--elevated), var(--card) 65%);
    }
    .who-card .tag { font-weight: 900; font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; }
    .who-card h3 { font-size: 1.25rem; font-weight: 800; margin-top: 0.5rem; letter-spacing: -0.01em; }
    .who-card p { color: var(--muted); font-size: 0.95rem; margin-top: 0.5rem; }
    .who-friends .tag { color: var(--teal); }
    .who-couples .tag { color: var(--coral); }
    .who-solo .tag { color: var(--amber); }
    @media (max-width: 880px) { .who { grid-template-columns: 1fr; } }

    /* --------------------------------------------------------------- trust */
    .trust {
      border: 1px solid var(--border); border-radius: 22px;
      background: var(--card);
      padding: clamp(1.6rem, 4vw, 2.6rem);
      display: grid; grid-template-columns: 1.1fr 1fr; gap: 2rem; align-items: center;
    }
    .trust h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); }
    .trust h2 .pop { color: var(--green); }
    .trust p { color: var(--muted); margin-top: 0.7rem; }
    .trust ul { list-style: none; display: flex; flex-direction: column; gap: 0.7rem; }
    .trust li { color: var(--muted); display: flex; gap: 0.6rem; align-items: flex-start; }
    .trust li svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 0.2rem; }
    .trust li strong { color: var(--text); }
    @media (max-width: 760px) { .trust { grid-template-columns: 1fr; } }

    /* ------------------------------------------------------------ final cta */
    .finale { text-align: center; }
    .finale img { width: 96px; height: 96px; margin-bottom: 1.2rem; }
    .finale h2 { font-size: clamp(2rem, 4.5vw, 3.2rem); }
    .finale .sec-sub { margin-left: auto; margin-right: auto; }
    .finale .notify { margin: 1.8rem auto 0; }

    /* ---------------------------------------------------------------- footer */
    footer { border-top: 1px solid var(--border); padding: 2rem 0 2.6rem; }
    .foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
    .foot-brand { display: flex; align-items: center; gap: 0.5rem; color: var(--soft); font-weight: 800; }
    .foot-brand img { width: 24px; height: 24px; }
    .foot-links { display: flex; gap: 1.2rem; flex-wrap: wrap; }
    .foot-links a { color: var(--soft); text-decoration: none; font-size: 0.9rem; }
    .foot-links a:hover { color: var(--text); }
    .foot-fine { width: 100%; color: var(--faint); font-size: 0.8rem; margin-top: 0.6rem; }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      .phone, .reel-track, .fab-final, .pinmark, .match-overlay { animation: none !important; }
      /* Static frame: the winning card, pinned by everyone, matched. */
      .reel-track { transform: translateY(-66.6667%); }
      .pinmark { opacity: 1; transform: scale(1); }
      .fab-final { background: var(--coral); border-color: var(--coral); }
      .match-overlay { opacity: 1; transform: none; }
      .reveal { opacity: 1; transform: none; transition: none; }
    }