/* Yappy — https://github.com/OperatingSystem-1/Yappy
   Copyright (C) 2026 ProxialGn. All rights reserved.
   SPDX-License-Identifier: LicenseRef-Proprietary

   This source is proprietary and confidential. Unauthorized copying,
   distribution, or modification of this file, via any medium, is strictly
   prohibited without the express written permission of ProxialGn. */

:root {
    --bg: #0b0b0f;
    --card: rgba(255,255,255,0.035);
    --line: rgba(255,255,255,0.09);
    --text: #f2f1f7;
    --muted: #9b98ab;
    --accent-a: #ff5c8a;
    --accent-b: #ff9b3d;
    --grad: linear-gradient(100deg, var(--accent-a), var(--accent-b));
    --radius: 18px;
  }
  * { margin:0; padding:0; box-sizing:border-box; }
  html { scroll-behavior:smooth; }
  body {
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, sans-serif;
    line-height: 1.65;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
  }
  a { color: var(--text); text-decoration: none; }
  ::selection { background: rgba(255,92,138,.35); }

  .wrap { max-width: 1040px; margin: 0 auto; padding: 0 24px; position: relative; }

  /* twilight wallpaper, pinned behind everything; the gradient on top keeps
     long-scroll content readable over the brighter regions */
  .glow {
    position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
      linear-gradient(180deg, rgba(10,10,16,.3), rgba(10,10,16,.55) 55%, rgba(8,8,13,.78)),
      url("/assets/wallpaper.jpg") center / cover no-repeat #0b0b0f;
  }

  /* == nav ===================================================== */
  nav {
    display:flex; align-items:center; justify-content:space-between;
    padding: 22px 0;
  }
  .logo { font-weight: 800; font-size: 1.15rem; letter-spacing: -0.02em; display:flex; align-items:center; gap:9px; }
  .logo svg, .logo img { width: 24px; height: 24px; display:block; }
  nav .links a { color: var(--muted); margin-left: 28px; font-weight: 500; font-size: .92rem; transition: color .2s; }
  nav .links a:hover { color: var(--text); }

  /* == hero ==================================================== */
  .hero { text-align: center; padding: 88px 0 30px; }

  .title {
    font-size: clamp(3rem, 8.5vw, 5.8rem);
    font-weight: 800; letter-spacing: -0.045em; line-height: 1.02;
    /* The headline slides in but never fades: an entrance that starts at
       opacity 0 leaves anything rendering the page early — a crawler, an
       agent, a screenshot service — looking at a page with no visible H1. */
    animation: rise-solid .8s cubic-bezier(.2,.8,.2,1) .15s both;
  }
  @keyframes rise-solid { from { transform: translateY(22px); } to { transform: none; } }
  .title .yap {
    background: var(--grad);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    /* the negative letter-spacing shrinks the inline box past the "p" glyph,
       clipping the gradient — pad the box back out without moving the text */
    display: inline-block;
    padding: 0 .09em .06em 0;
    margin-right: -.09em; margin-bottom: -.06em;
  }
  @keyframes rise { from { opacity:0; transform: translateY(22px); } to { opacity:1; transform:none; } }

  .hero p.tag {
    margin: 24px auto 0; max-width: 620px;
    color: var(--muted); font-size: 1.13rem; line-height: 1.6;
    /* No lone word on the last line: the browser evens the lines out. */
    text-wrap: balance;
    opacity: 0; animation: rise .8s ease .25s forwards;
  }
  .hero p.tag b { color: var(--text); font-weight: 600; }
  .hero p.tag kbd.tag-key {
    font: inherit; font-weight: 700; color: var(--text); font-size: 1.05em;
    background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.2);
    border-bottom-width: 2px; border-radius: 6px; padding: 0 9px 1px;
  }

  /* the two keys */
  .keys-intro {
    margin-top: 34px; color: var(--muted); font-size: 1rem;
    opacity: 0; animation: rise .8s ease .55s forwards;
  }
  .keys {
    margin: 30px auto 0; display:flex; gap: 56px; justify-content:center; flex-wrap:wrap;
    opacity: 0; animation: rise .8s ease .6s forwards;
  }
  .key { width: 220px; }
  .keycap {
    margin: 0 auto; width: 116px; height: 116px; border-radius: 26px;
    background: linear-gradient(180deg, #1e1d27, #141319);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 9px 0 #050508, 0 22px 40px rgba(0,0,0,.5),
                inset 0 1px 0 rgba(255,255,255,.1);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap: 3px;
    transition: transform .13s ease, box-shadow .13s ease;
  }
  .key:hover .keycap, .key:active .keycap {
    transform: translateY(7px);
    box-shadow: 0 2px 0 #050508, 0 10px 24px rgba(0,0,0,.5),
                inset 0 1px 0 rgba(255,255,255,.1);
  }
  .keycap .sym {
    font-size: 2.7rem; font-weight: 600; line-height: 1;
    background: var(--grad);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  }
  .keycap .name {
    font-size: .68rem; font-weight: 600; letter-spacing: .14em;
    text-transform: uppercase; color: var(--muted);
  }
  .key .does { margin-top: 20px; font-size: 1.12rem; font-weight: 700; letter-spacing: -0.01em; }
  .key .does .yap {
    background: var(--grad);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  }
  .key .how { margin-top: 4px; color: var(--muted); font-size: .86rem; }

  @keyframes bar { from { height: 6px; opacity:.4; } to { height: 36px; opacity:.95; } }

  .cta-row {
    margin-top: 44px; display:flex; justify-content:center;
    opacity: 0; animation: rise .8s ease .5s forwards;
  }
  .cta {
    display:inline-block; font-weight: 700; font-size: 1.15rem; letter-spacing: -0.01em;
    padding: 18px 48px; border-radius: 16px; color: #17090e;
    background: var(--grad);
    box-shadow: 0 10px 34px rgba(255,92,138,.32);
    transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s;
  }
  .cta:hover { transform: translateY(-2px); box-shadow: 0 16px 44px rgba(255,92,138,.45); }

  /* == leaderboard ============================================== */
  .board-frame {
    margin: 72px auto 0; max-width: 720px;
    border-radius: var(--radius); overflow: hidden;
    border: 1px solid var(--line);
    background: #101017;
    box-shadow: 0 30px 90px rgba(0,0,0,.55), 0 0 70px rgba(255,92,138,.13);
    opacity: 0; animation: rise .9s cubic-bezier(.2,.8,.2,1) .7s forwards;
    text-align: left;
  }
  .board-head {
    display:flex; align-items:baseline; justify-content:space-between; gap:12px;
    padding: 22px 26px 16px; border-bottom: 1px solid var(--line);
  }
  .board-title {
    font-weight: 800; font-size: 1.05rem; letter-spacing: -0.01em;
    display:flex; align-items:center; gap:10px;
  }
  .live-dot {
    width:8px; height:8px; border-radius:50%; background: var(--grad);
    box-shadow: 0 0 10px rgba(255,92,138,.8);
    animation: pulse 2s ease-in-out infinite;
  }
  @keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.35; } }
  .board-head .board-sub { color: var(--muted); font-size: .82rem; }
  .board-search {
    flex: 0 1 210px; min-width: 130px;
    background: rgba(255,255,255,.05); color: var(--text);
    border: 1px solid var(--line); border-radius: 10px;
    padding: 7px 12px; font: inherit; font-size: .85rem;
    outline: none; transition: border-color .2s, background .2s;
    -webkit-appearance: none; appearance: none;
  }
  .board-search::placeholder { color: var(--muted); }
  .board-search:focus { border-color: rgba(255,92,138,.55); background: rgba(255,255,255,.07); }
  .board-more {
    display: block; width: 100%; padding: 13px;
    background: none; border: none; border-top: 1px solid rgba(255,255,255,.04);
    color: var(--muted); font: inherit; font-size: .86rem; font-weight: 600;
    cursor: pointer; transition: color .2s, background .2s;
  }
  .board-more:hover { color: var(--text); background: rgba(255,255,255,.02); }
  ol.board { list-style:none; margin:0; padding: 6px 0; min-height: 220px; }
  .board li { display:flex; align-items:center; gap:16px; padding: 11px 26px; font-size: .98rem; }
  .board li + li { border-top: 1px solid rgba(255,255,255,.04); }
  .board .rank { width: 2em; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
  .board .rank.top {
    background: var(--grad);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  }
  .board .handle { flex:1; font-weight: 600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .board .words { font-weight: 700; font-variant-numeric: tabular-nums; }
  .board .words small { color: var(--muted); font-weight: 500; margin-left: 6px; }
  .board li.empty {
    flex-direction: column; justify-content: center; gap: 18px;
    min-height: 220px; color: var(--muted); font-size: .95rem; text-align: center;
    border-top: none;
    background: radial-gradient(ellipse at 50% 30%, rgba(255,92,138,.07), transparent 60%);
  }
  .fake-wave { display:flex; gap:5px; align-items:center; height: 48px; }
  .fake-wave i {
    width: 5px; border-radius: 3px; height: 10px; background: var(--grad); opacity:.8;
    animation: bar 1.4s ease-in-out infinite alternate;
    animation-delay: calc(var(--i) * -0.12s);
  }
  .board-privacy {
    padding: 18px 26px 20px; border-top: 1px solid var(--line);
    color: var(--muted); font-size: .85rem; line-height: 1.65;
    background: linear-gradient(180deg, rgba(255,92,138,.05), transparent);
  }
  .board-privacy b { color: var(--text); }
  .board-cta {
    margin-top: 28px; text-align: center;
    opacity: 0; animation: rise .9s cubic-bezier(.2,.8,.2,1) .95s forwards;
  }
  .board-cta .cta-sm, .section-cta .cta-sm {
    font-size: 1rem; padding: 14px 36px; border-radius: 14px;
    box-shadow: 0 8px 26px rgba(255,92,138,.26);
  }
  .section-cta { margin-top: 36px; text-align: center; }

  /* == sections ================================================= */
  section { padding: 110px 0 0; }
  .kicker {
    text-transform: uppercase; letter-spacing: .14em; font-size: .76rem;
    font-weight: 700; text-align: center;
    background: var(--grad);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  }
  h2 {
    text-align:center; font-size: clamp(1.7rem, 4vw, 2.3rem);
    font-weight: 800; letter-spacing: -0.03em; margin-top: 10px;
  }
  .sub { text-align:center; color: var(--muted); max-width: 540px; margin: 14px auto 0; }

  /* == agent demo (It Learns) — the real flow, recreated in code ==
     A staged mini-desktop: Mail drafts itself while the Yappy card narrates,
     then the cursor pulls up short of Send and the card turns amber. Uses the
     app's real overlay accent (blue) rather than the site gradient. */
  .agent-demo {
    margin: 46px auto 0; max-width: 780px;
    border-radius: var(--radius); overflow: hidden;
    border: 1px solid var(--line);
    box-shadow: 0 30px 90px rgba(0,0,0,.55), 0 0 70px rgba(82,174,255,.08);
  }
  .demo-screen {
    position: relative; aspect-ratio: 16 / 10; overflow: hidden;
    background:
      radial-gradient(60% 55% at 22% 16%, rgba(255,92,138,.10), transparent 70%),
      radial-gradient(70% 60% at 85% 92%, rgba(255,155,61,.07), transparent 70%),
      linear-gradient(135deg, #1b1526, #121019 55%, #0c0a11);
    font-size: 12.5px; line-height: 1.45;
    text-align: left;   /* the demo sits inside the centered hero — don't inherit */
    user-select: none; -webkit-user-select: none;
  }
  @media (max-width: 720px) { .demo-screen { font-size: 9.5px; } }
  @media (max-width: 480px) { .demo-screen { font-size: 7px; } }

  .demo-menubar {
    position: absolute; inset: 0 0 auto 0; height: 2.3em; z-index: 2;
    display: flex; align-items: center; gap: 1.5em; padding: 0 1.4em;
    background: rgba(21,19,28,.92); color: var(--muted); font-size: .95em;
  }
  .demo-menubar .app { color: var(--text); font-weight: 600; }
  .demo-menubar .clock { margin-left: auto; color: #cfcde0; }

  /* The app's screen-edge glow: the brand gradient blooming in from all four
     edges of the display, drifting sideways, shown only while the agent is
     driving a window you can actually see. */
  .demo-glow {
    position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 3;
    transition: opacity .5s;
  }
  .demo-glow.on { opacity: 1; animation: demo-pulse 2.4s ease-in-out infinite; }
  @keyframes demo-pulse { 0%, 100% { opacity: .62; } 50% { opacity: 1; } }
  .demo-glow i {
    position: absolute; display: block;
    background-image: linear-gradient(90deg,#ff5c8a,#ff9b3d,#ff5c8a,#ff9b3d,#ff5c8a);
    background-size: 200% 100%;
    animation: demo-drift 9s linear infinite;
  }
  .demo-glow .g-t { inset: 0 0 auto 0; height: 3.4em;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.5), transparent);
            mask-image: linear-gradient(to bottom, rgba(0,0,0,.5), transparent); }
  .demo-glow .g-b { inset: auto 0 0 0; height: 3.4em;
    -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,.5), transparent);
            mask-image: linear-gradient(to top, rgba(0,0,0,.5), transparent); }
  .demo-glow .g-l { inset: 0 auto 0 0; width: 3.4em;
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,.5), transparent);
            mask-image: linear-gradient(to right, rgba(0,0,0,.5), transparent); }
  .demo-glow .g-r { inset: 0 0 0 auto; width: 3.4em;
    -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,.5), transparent);
            mask-image: linear-gradient(to left, rgba(0,0,0,.5), transparent); }
  @keyframes demo-drift { to { background-position: -200% 0; } }

  /* The notch. It carries work the user *can't* see — a gradient ring around
     the cutout, and the cutout itself grown into a row that names the step.
     While the work is in view the notch stays clean and the edges glow. */
  .demo-notch {
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 11.5em; height: 2.3em; z-index: 6;
    background: #000; border-radius: 0 0 .85em .85em;
    transition: width .42s cubic-bezier(.2,.8,.2,1), height .42s cubic-bezier(.2,.8,.2,1),
                border-radius .42s cubic-bezier(.2,.8,.2,1);
  }
  .demo-notch.ring::before {
    content: ""; position: absolute; inset: -2px; border-radius: inherit; padding: 2px;
    background-image: linear-gradient(90deg,#ff5c8a,#ff9b3d,#ff5c8a,#ff9b3d,#ff5c8a);
    background-size: 200% 100%;
    animation: demo-drift 7s linear infinite;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask-composite: exclude;
  }
  .demo-notch.open { width: 21em; height: 5.4em; border-radius: 0 0 1.25em 1.25em; }
  /* A proactive offer: the same notch, pinned open with the offer on top and
     the answer key underneath. Sparkle, not an app icon — nothing is being
     driven yet, Yappy is asking. */
  .demo-notch.offer { width: 23em; height: 8.1em; border-radius: 0 0 1.25em 1.25em; }
  .demo-notch-offer {
    position: absolute; left: 0; right: 0; bottom: 0;
    opacity: 0; transition: opacity .2s;
  }
  .demo-notch.offer .demo-notch-offer { opacity: 1; transition-delay: .16s; }
  .demo-notch-offer .n-row {
    display: flex; align-items: center; gap: .75em; padding: 0 1.1em; height: 3.1em;
  }
  .demo-notch-offer .n-spark { color: #52aeff; font-size: 1.05em; line-height: 1; flex: none; }
  .demo-notch-offer .n-hint {
    height: 2.7em; display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,.55); font-size: .8em;
  }
  .demo-notch-row {
    position: absolute; left: 0; right: 0; bottom: 0; height: 3.1em;
    display: flex; align-items: center; gap: .75em; padding: 0 1.1em;
    opacity: 0; transition: opacity .2s;
  }
  .demo-notch.open .demo-notch-row { opacity: 1; transition-delay: .16s; }
  .demo-notch-row .n-dot {
    width: .5em; height: .5em; border-radius: 50%; background: #52aeff; flex: none;
    animation: demo-breathe 2.2s ease-in-out infinite;
  }
  .demo-notch-row .n-text { min-width: 0; }
  .demo-notch-row .n-step {
    display: block; color: var(--text); font-size: .92em; font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .demo-notch-row .n-sub { display: block; color: rgba(255,255,255,.55); font-size: .8em; }

  .demo-window {
    position: absolute; left: 6%; top: 12%; width: 55%; height: 80%;
    background: #1d1d23; border: 1px solid rgba(255,255,255,.08);
    border-radius: 1em; box-shadow: 0 2em 5em rgba(0,0,0,.55);
    padding: 0 1.4em;
  }
  .demo-titlebar {
    display: flex; align-items: center; gap: .55em; height: 3.1em;
    color: #8e8b9e; font-size: .95em;
    border-bottom: 1px solid rgba(255,255,255,.07);
    margin: 0 -1.4em; padding: 0 1.4em;
  }
  .demo-titlebar i { width: .95em; height: .95em; border-radius: 50%; }
  .demo-titlebar .t { flex: 1; text-align: center; font-weight: 600; }
  .demo-send svg { width: 1.5em; display: block; }
  .demo-field {
    display: flex; gap: .6em; align-items: center; height: 2.7em;
    border-bottom: 1px solid rgba(255,255,255,.07); font-size: .95em;
  }
  .demo-field label { color: #8e8b9e; min-width: 4.6em; }
  .demo-field span { color: var(--text); white-space: nowrap; overflow: hidden; }
  .demo-attach {
    display: inline-flex; align-items: center; gap: .5em; margin-top: .9em;
    padding: .4em .8em; border-radius: .6em; background: #26262e;
    border: 1px solid rgba(255,255,255,.1); color: #cfcde0; font-size: .9em;
    opacity: 0; transform: translateY(4px); transition: opacity .3s, transform .3s;
  }
  .demo-attach.on { opacity: 1; transform: none; }
  .demo-attach svg { width: 1em; display: block; }
  .demo-bodyline { margin-top: 1.1em; color: #e6e4ee; font-size: .95em; min-height: 1.5em; }
  .demo-caret {
    display: inline-block; width: 1.5px; height: 1.1em; background: #52aeff;
    vertical-align: text-bottom; opacity: 0;
  }
  .demo-caret.on { animation: demo-caret 1.1s steps(1) infinite; }
  @keyframes demo-caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

  .demo-card {
    position: absolute; right: 4%; top: 9%; width: 30%; z-index: 4;
    background: rgba(23,23,29,.97); border: 1px solid rgba(82,174,255,.45);
    border-radius: 1.2em; padding: 1em 1.2em 1.1em;
    box-shadow: 0 1em 2.4em rgba(0,0,0,.5);
    transition: opacity .3s;
  }
  /* No card while the notch is still asking — nothing is running yet. */
  .demo-card.away { opacity: 0; }
  .demo-card-head {
    display: flex; align-items: center; gap: .55em;
    color: var(--muted); font-weight: 600; font-size: .9em;
  }
  .demo-dot { width: .7em; height: .7em; border-radius: 50%; background: #52aeff; flex: none; }
  .demo-dot.listen { animation: demo-blink .9s ease-in-out infinite alternate; }
  .demo-dot.amber { background: #ffb340; animation: demo-breathe 2.2s ease-in-out infinite; }
  @keyframes demo-blink { from { opacity: 1; } to { opacity: .25; } }
  @keyframes demo-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
  .demo-btn {
    margin-left: auto; font: inherit; font-size: .82em; color: var(--text);
    background: rgba(255,255,255,.1); border: 0; border-radius: .5em;
    padding: .25em .9em; visibility: hidden; pointer-events: none;
  }
  .demo-btn.on { visibility: visible; }
  .demo-prompt { color: var(--muted); font-size: .9em; margin-top: .7em; min-height: 1.3em; }
  .demo-status { color: var(--text); font-size: .98em; margin-top: .45em; min-height: 2.7em; }

  .demo-dock {
    position: absolute; left: 50%; bottom: 2.5%; transform: translateX(-50%);
    display: flex; align-items: flex-end; gap: .8em; padding: .55em .7em;
    border-radius: 1.1em;
    background: rgba(255,255,255,.14);
    -webkit-backdrop-filter: blur(14px) saturate(1.7);
    backdrop-filter: blur(14px) saturate(1.7);
    border: 1px solid rgba(255,255,255,.22);
    box-shadow: 0 .6em 1.6em rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.18);
  }
  .demo-dock i {
    width: 2.1em; height: 2.1em; border-radius: .62em; display: block;
    position: relative; overflow: hidden;
    box-shadow: 0 .18em .45em rgba(0,0,0,.35);
  }
  .demo-dock i::after {   /* glassy gloss so the tiles read as app icons */
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,.05) 46%, rgba(0,0,0,.10));
  }

  .demo-cursor {
    position: absolute; left: 52%; top: 58%; width: 1.3em; z-index: 5;
    transition: left 1s cubic-bezier(.45,.05,.35,1), top 1s cubic-bezier(.45,.05,.35,1);
    pointer-events: none;
  }
  .demo-cursor svg { display: block; width: 100%; }
  .demo-ripple {
    position: absolute; width: 2em; height: 2em; border-radius: 50%; z-index: 5;
    border: 2px solid #52aeff; opacity: 0; transform: scale(.4);
    pointer-events: none; margin: -1em 0 0 -1em;
  }
  .demo-ripple.go { animation: demo-ripple .55s ease-out; }
  @keyframes demo-ripple {
    0% { opacity: .55; transform: scale(.4); }
    100% { opacity: 0; transform: scale(1.9); }
  }
  /* reveal on scroll */
  /* Progressive enhancement: the scroll reveal only exists once the script
     that drives it has run. Without JavaScript — which is how most crawlers
     and agents read this page — every section is visible from the start. */
  html.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
  html.js .reveal.in { opacity: 1; transform: none; }

  /* == competitor table ========================================= */
  .grad-text {
    background: var(--grad);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  }
  .compare-wrap {
    margin-top: 48px; overflow-x: auto;
    border-radius: var(--radius);
  }
  table.compare {
    width: 100%; border-collapse: separate; border-spacing: 0; min-width: 720px;
  }
  .compare th, .compare td {
    padding: 18px 20px; text-align: center; vertical-align: top;
    border-bottom: 1px solid var(--line);
    font-size: .95rem;
  }
  .compare thead th { border-bottom: 1px solid rgba(255,255,255,.16); padding-top: 26px; }
  .compare tbody tr:last-child td { border-bottom: none; }
  .compare .row-label {
    text-align: left; font-weight: 600; color: var(--text);
    font-size: .93rem; white-space: nowrap; width: 1%;
  }
  .compare .brand { font-weight: 800; font-size: 1.15rem; letter-spacing: -0.02em; display:block; }
  .compare .brand.them { color: var(--muted); font-weight: 600; font-size: 1rem; }

  /* the hero column */
  .compare .us {
    background: linear-gradient(180deg, rgba(255,92,138,.09), rgba(255,155,61,.05));
    border-left: 1px solid rgba(255,92,138,.35);
    border-right: 1px solid rgba(255,92,138,.35);
    position: relative;
  }
  .compare thead .us {
    border-top: 1px solid rgba(255,92,138,.35);
    border-radius: 14px 14px 0 0;
  }
  .compare tbody tr:last-child .us {
    border-bottom: 1px solid rgba(255,92,138,.35);
    border-radius: 0 0 14px 14px;
  }
  .compare thead .us .brand {
    background: var(--grad);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    font-size: 1.35rem;
  }
  .badge-us {
    display: inline-block; margin-bottom: 8px;
    font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: #17090e; background: var(--grad);
    padding: 3px 10px; border-radius: 999px;
  }

  .compare td small { display: block; margin-top: 5px; color: var(--muted); font-size: .8rem; line-height: 1.45; }
  .compare .yes {
    font-weight: 800; font-size: 1.05rem;
    background: var(--grad);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  }
  .compare .no  { font-weight: 700; color: #6d6a7c; font-size: 1.05rem; }
  .compare .meh { font-weight: 600; color: var(--muted); font-size: 1rem; }
  .compare tbody tr { transition: background .2s; }
  .compare tbody tr:hover td:not(.us) { background: rgba(255,255,255,.02); }
  .footnote { color: var(--muted); font-size: .83rem; text-align: center; margin-top: 18px; }

  /* == personas ================================================= */
  .persona-demo {
    max-width: 720px; margin: 42px auto 0;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 26px 26px 22px;
  }
  .persona-chips { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
  .persona-head {
    font: inherit; font-size: .8rem; font-weight: 600; color: var(--muted);
    background: none; border: none; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 7px;
    transition: color .2s;
  }
  .persona-head:hover { color: var(--text); }
  .persona-head.on { color: var(--text); }
  .persona-head .mj-wrap {
    width: 76px; height: 76px; border-radius: 50%;
    border: 2px solid var(--line);
    background: rgba(255,255,255,.03);
    display: block; position: relative; overflow: hidden;
    transition: transform .25s cubic-bezier(.2,.8,.2,1), border-color .25s, background .25s;
  }
  .persona-head:hover .mj-wrap { border-color: rgba(255,255,255,.25); }
  .persona-head.on .mj-wrap {
    border-color: transparent;
    background:
      linear-gradient(#17121a, #17121a) padding-box,
      var(--grad) border-box;
    transform: scale(1.1);
  }
  .persona-head svg {
    /* explicit centering (absolute + negative margins): the bust overflows the
       circle for the crop, and grid/flex centering of overflowing children is
       inconsistent across engines */
    position: absolute; top: 50%; left: 50%;
    width: 84px; height: 84px; margin: -42px 0 0 -42px;
    display: block; animation: mj-bob 3.4s ease-in-out infinite;
  }
  .persona-head:nth-child(2) svg { animation-delay: .5s; }
  .persona-head:nth-child(3) svg { animation-delay: 1s; }
  .persona-head:nth-child(4) svg { animation-delay: 1.5s; }
  .persona-head:nth-child(5) svg { animation-delay: 2s; }
  @keyframes mj-bob { 0%, 100% { transform: translateY(1px); } 50% { transform: translateY(-2px); } }

  /* memoji life: staggered blinks; the selected head talks */
  .mj-eye { transform-box: fill-box; transform-origin: center; animation: mj-blink 5.2s infinite; }
  .persona-head:nth-child(2) .mj-eye { animation-delay: 1.3s; }
  .persona-head:nth-child(3) .mj-eye { animation-delay: 2.1s; }
  .persona-head:nth-child(4) .mj-eye { animation-delay: 3.4s; }
  .persona-head:nth-child(5) .mj-eye { animation-delay: 4.2s; }
  @keyframes mj-blink { 0%, 91%, 96%, 100% { transform: scaleY(1); } 93.5% { transform: scaleY(.1); } }
  .mj-mouth { transform-box: fill-box; transform-origin: 50% 15%; }
  .persona-head.on .mj-mouth { animation: mj-talk .5s ease-in-out infinite; }
  @keyframes mj-talk { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.5); } }

  /* signature micro-animations */
  .mj-earring { transform-box: fill-box; transform-origin: 50% 8%; animation: mj-swing 2.6s ease-in-out infinite; }
  @keyframes mj-swing { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(11deg); } }
  .persona-head.on .mj-bowtie { transform-box: fill-box; transform-origin: center; animation: mj-wiggle 1.4s ease-in-out infinite; }
  @keyframes mj-wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-7deg); } 75% { transform: rotate(7deg); } }
  .persona-head.on .mj-hat { animation: mj-hat 2.2s ease-in-out infinite; }
  @keyframes mj-hat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.5px); } }
  .persona-io { margin-top: 22px; }
  .persona-io .io-label {
    font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--muted); margin-bottom: 6px;
  }
  .persona-io .io-said { color: var(--muted); font-style: italic; }
  .persona-io .io-typed {
    margin-top: 16px; font-size: 1.08rem; line-height: 1.55;
    transition: opacity .18s ease;
  }
  .persona-io .io-typed.swap { opacity: 0; }
  .persona-mini {
    text-align: center; margin-top: 14px;
    font-size: .95rem; font-weight: 600; color: var(--text);
  }
  .persona-mini span { color: var(--muted); font-weight: 400; margin: 0 10px; }

  /* == footer =================================================== */
  footer {
    margin-top: 130px; padding: 72px 0 56px; text-align:center;
    border-top: 1px solid var(--line);
  }
  footer .sign-off {
    font-size: clamp(1.5rem, 4vw, 2.1rem); font-weight: 800; letter-spacing: -0.03em;
  }
  footer .sign-off .yap {
    background: var(--grad);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    display: inline-block;
    padding: 0 .09em .06em 0;
    margin-right: -.09em; margin-bottom: -.06em;
  }
  footer p { color: var(--muted); margin-top: 14px; font-size: .92rem; }
  footer a.mito { font-weight: 600; position: relative; white-space: nowrap; }
  footer a.mito::after {
    content:""; position:absolute; left:0; right:0; bottom:-2px; height:1.5px;
    background: var(--grad);
    transform: scaleX(0); transform-origin:left; transition: transform .3s;
  }
  footer a.mito:hover::after { transform: scaleX(1); }

  /* footer mascot: idles quietly, leans toward your cursor, yaps on hover,
     and quips in a bubble when clicked */
  .mascot-wrap { position: relative; display: inline-block; margin-bottom: 34px; }
  .mascot {
    display: block; width: 160px; height: 160px; padding: 0;
    background: none; border: none; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transform: rotate(var(--lean, 0deg));
    transition: transform .35s cubic-bezier(.2,.8,.2,1);
  }
  .mascot svg { width: 100%; height: 100%; display: block; overflow: visible; }
  .mascot .m-body { animation: m-bob 3.4s ease-in-out infinite; }
  @keyframes m-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-7px); }
  }
  .mascot .m-mouth { transform-box: fill-box; transform-origin: 50% 12%; }
  .mascot:hover .m-mouth, .mascot.yapping .m-mouth { animation: m-yap .5s ease-in-out infinite; }
  @keyframes m-yap {
    0%, 100% { transform: scaleY(1); }
    50%      { transform: scaleY(0.62); }
  }
  .mascot .m-ray {
    transform-box: fill-box; transform-origin: center;
    opacity: .3; transform: scale(.88);
    transition: opacity .3s, transform .3s;
  }
  .mascot .m-ray2 { animation-delay: .15s; }
  .mascot .m-ray3 { animation-delay: .3s; }
  .mascot:hover .m-ray, .mascot.yapping .m-ray { animation: m-pop 1.2s ease-in-out infinite; }
  @keyframes m-pop {
    0%, 100% { opacity: .3; transform: scale(.88); }
    40%      { opacity: 1;  transform: scale(1.06); }
  }
  .mascot.hop { animation: m-hop .5s cubic-bezier(.2,.8,.2,1); }
  @keyframes m-hop {
    0%   { transform: rotate(var(--lean, 0deg)) translateY(0); }
    35%  { transform: rotate(var(--lean, 0deg)) translateY(-14px) scale(1.04); }
    70%  { transform: rotate(var(--lean, 0deg)) translateY(2px) scale(.98); }
    100% { transform: rotate(var(--lean, 0deg)) translateY(0); }
  }
  .mascot-bubble {
    position: absolute; bottom: calc(100% + 12px); left: 50%;
    transform: translateX(-50%) translateY(6px) scale(.85);
    transform-origin: bottom center;
    background: var(--grad); color: #1b0b14;
    font-weight: 700; font-size: 1.05rem; line-height: 1.3;
    padding: 10px 18px; border-radius: 16px; white-space: nowrap;
    opacity: 0; pointer-events: none; z-index: 2;
    transition: opacity .25s, transform .25s cubic-bezier(.2,.8,.2,1);
  }
  .mascot-bubble::after {
    content: ""; position: absolute; top: 100%; left: 50%; margin-left: -7px;
    border: 7px solid transparent; border-top-color: var(--accent-b);
  }
  .mascot-bubble.show { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }

  /* mini chat bubbles: ephemeral yaps that pop around the mascot while it
     chatters, drift up, and fade. Spawned and removed by JS. */
  .mini-bubble {
    position: absolute; white-space: nowrap; pointer-events: none;
    background: var(--grad); color: #1b0b14;
    font-weight: 700; font-size: .92rem; line-height: 1.25;
    padding: 6px 13px; border-radius: 13px;
    opacity: 0;
    animation: mini-pop 1.6s cubic-bezier(.2,.8,.2,1) forwards;
  }
  @keyframes mini-pop {
    0%   { opacity: 0; transform: scale(0)    translateY(6px); }
    14%  { opacity: 1; transform: scale(1.12) translateY(0); }
    24%  {             transform: scale(1); }
    72%  { opacity: 1; transform: scale(1)    translateY(-12px); }
    100% { opacity: 0; transform: scale(.9)   translateY(-22px); }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .title, .hero p.tag, .keys-intro, .keys, .cta-row, .board-frame, .board-cta { opacity: 1; }
    .reveal { opacity: 1; transform: none; }
  }


/* ===============================================================
   No JavaScript, no theatre.

   The hero's entrance animations all start at opacity: 0 and rely on the
   animation to bring them back. That reads fine in a browser and terribly to
   anything that renders the page without running scripts or waiting for
   animations to settle — a crawler, an agent, a screenshot service — which
   sees an invisible headline and an empty page. So the whole entrance is
   opt-in: it only exists once the inline script at the top of <head> has
   marked the document as scripted.
   =============================================================== */
html:not(.js) .title,
html:not(.js) .hero p.tag,
html:not(.js) .keys-intro,
html:not(.js) .keys,
html:not(.js) .cta-row,
html:not(.js) .board-frame,
html:not(.js) .board-cta,
html:not(.js) .agent-demo,
html:not(.js) .reveal,
html:not(.js) [style*="animation:rise"],
html:not(.js) [style*="animation: rise"] {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}