:root{
    --bg:#FFFFFF;
    --bg-soft:#F7F7F4;
    --line:#E8E8E3;
    --ink:#101317;
    --text:#3A404A;
    --muted:#6E7581;
    --amber:#F59E2D;
    --amber-deep:#C97C15;
    --amber-tint:#FEF3E0;
    --green:#2F9E5C;
    --blue:#4E8DF5;
    --pink:#F06292;
    --violet:#8B5CF6;
    --rainbow:linear-gradient(90deg,#F59E2D,#F06292,#8B5CF6,#4E8DF5,#2F9E5C);
    --wrap:1140px;
    --shadow-card:0 1px 2px rgba(16,19,23,.05), 0 16px 40px -20px rgba(16,19,23,.18);
    --shadow-shot:0 2px 4px rgba(16,19,23,.06), 0 40px 80px -32px rgba(16,19,23,.28);
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0; background:var(--bg); color:var(--text);
    font-family:'Inter',sans-serif; font-size:16px; line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3{ font-family:'Space Grotesk',sans-serif; color:var(--ink); line-height:1.08; margin:0; letter-spacing:-.015em; }
  a{ color:inherit; }
  img,svg{ display:block; max-width:100%; }
  .wrap{ max-width:var(--wrap); margin:0 auto; padding:0 28px; position:relative; z-index:2; }
  section{ padding:104px 0; position:relative; }
  ::selection{ background:var(--amber); color:#fff; }
  a:focus-visible, button:focus-visible, input:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; border-radius:4px; }

  /* ---------- NAV ---------- */
  .nav{
    position:sticky; top:0; z-index:60;
    background:rgba(255,255,255,.85); backdrop-filter:blur(12px);
    border-bottom:1px solid var(--line);
  }
  .nav .wrap{ display:flex; align-items:center; justify-content:space-between; height:70px; }
  .logo{
    display:flex; align-items:center; gap:9px;
    font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:19px; color:var(--ink);
    text-decoration:none;
  }
  .logo-mark{ width:28px; height:28px; flex:none; }
  .nav-links{ display:flex; gap:30px; font-size:14.5px; font-weight:500; }
  .nav-links a{ text-decoration:none; color:var(--muted); transition:color .15s; }
  .nav-links a:hover{ color:var(--ink); }
  .nav-cta{
    display:inline-flex; align-items:center; gap:7px;
    background:var(--ink); color:#fff; font-weight:600; font-size:14px;
    padding:10px 18px; border-radius:999px; text-decoration:none; white-space:nowrap;
    transition:opacity .15s, transform .15s;
  }
  .nav-cta:hover{ opacity:.88; transform:translateY(-1px); }

  /* ---------- HERO (centered, 1up-style) ---------- */
  .hero{ padding:96px 0 0; text-align:center; overflow:hidden; }
  .hero-bg{
    position:absolute; inset:0; z-index:0; pointer-events:none;
    background:
      radial-gradient(52% 44% at 50% 0%, rgba(245,158,45,.09), transparent 70%),
      radial-gradient(30% 30% at 88% 20%, rgba(78,141,245,.06), transparent 70%),
      radial-gradient(30% 30% at 10% 26%, rgba(240,98,146,.05), transparent 70%);
  }
  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:600; letter-spacing:.05em;
    color:var(--amber-deep); background:var(--amber-tint); border:1px solid #F5DCB0;
    padding:7px 14px; border-radius:999px; margin-bottom:26px;
  }
  .hero h1{
    font-size:clamp(34px,4.8vw,58px);
    max-width:900px; margin:0 auto 22px; line-height:1.1;
  }
  .hl-lead{ display:block; color:#e7643b; }
  .hl-tail{
    display:block; white-space:nowrap;
    font-size:.66em; color:var(--ink); margin-top:6px;
  }
  .hl-not{
    position:relative; white-space:nowrap;
    font-style:italic;
  }
  .hl-not::after{
    content:""; position:absolute; left:-2px; right:-2px; bottom:.06em;
    height:.16em; border-radius:999px;
    background:var(--amber);
    z-index:-1;
  }
  .hero .tagline{
    font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:17px;
    color:#e7643b; margin:0 auto 18px; letter-spacing:-.01em;
  }
  .hero p.lead{
    font-size:19px; color:var(--muted); max-width:560px; margin:0 auto 34px;
  }
  .cta-row{ display:flex; justify-content:center; gap:16px; flex-wrap:wrap; margin-bottom:14px; }
  .btn-primary{
    background:var(--ink); color:#fff; font-weight:600; font-size:15.5px;
    padding:15px 28px; border-radius:12px; text-decoration:none; border:none; cursor:pointer;
    display:inline-flex; align-items:center; gap:8px;
    box-shadow:0 1px 2px rgba(16,19,23,.2), 0 12px 28px -14px rgba(16,19,23,.4);
    transition:transform .15s, box-shadow .15s;
  }
  .btn-primary:hover{ transform:translateY(-2px); box-shadow:0 2px 4px rgba(16,19,23,.2), 0 18px 36px -14px rgba(16,19,23,.45); }
  .btn-secondary{
    background:#fff; color:var(--ink); font-weight:600; font-size:15.5px;
    padding:15px 28px; border-radius:12px; text-decoration:none;
    border:1px solid var(--line); display:inline-flex; align-items:center; gap:8px;
    transition:border-color .15s, transform .15s;
  }
  .btn-secondary:hover{ border-color:#c9c9c2; transform:translateY(-2px); }
  .fine-print{ font-size:13px; color:var(--muted); margin-bottom:56px; }
  .fine-print b{ color:var(--text); }

  /* Hero product shot: mini dashboard mockup */
  .shot-frame{
    max-width:940px; margin:0 auto; position:relative; z-index:2;
    background:#fff; border:1px solid var(--line); border-radius:18px 18px 0 0; border-bottom:none;
    box-shadow:var(--shadow-shot);
    overflow:hidden; text-align:left;
  }
  .shot-frame::before{
    content:""; display:block; height:4px; background:var(--rainbow);
  }
  .shot-bar{
    display:flex; align-items:center; gap:7px; padding:12px 16px; border-bottom:1px solid var(--line);
    background:var(--bg-soft);
  }
  .shot-bar i{ width:10px; height:10px; border-radius:50%; background:#DEDED8; }
  .shot-bar .url{
    margin-left:10px; font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--muted);
    background:#fff; border:1px solid var(--line); border-radius:6px; padding:4px 10px;
  }
  .shot-body{ display:grid; grid-template-columns:200px 1fr 300px; min-height:340px; }
  .shot-side{ border-right:1px solid var(--line); padding:16px 12px; background:var(--bg-soft); }
  .shot-side .sect{ font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.06em; color:var(--muted); margin:10px 6px 6px; }
  .shot-side .item{
    font-size:12.5px; font-weight:500; color:var(--text); padding:7px 9px; border-radius:7px; margin-bottom:2px;
    display:flex; align-items:center; gap:8px;
  }
  .shot-side .item.active{ background:#fff; border:1px solid var(--line); color:var(--ink); font-weight:600; }
  .shot-side .item .pd{ width:7px; height:7px; border-radius:50%; flex:none; }
  .shot-main{ padding:18px 20px; }
  .shot-main .crumb{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--muted); margin-bottom:12px; }
  .task-line{
    display:flex; align-items:center; gap:10px; padding:11px 12px;
    border:1px solid var(--line); border-radius:9px; margin-bottom:8px; background:#fff;
    font-size:13px; color:var(--text);
  }
  .task-line .st{ font-family:'IBM Plex Mono',monospace; font-size:10px; font-weight:600; padding:3px 8px; border-radius:999px; margin-left:auto; flex:none; }
  .st.doing{ background:var(--amber-tint); color:var(--amber-deep); }
  .st.done{ background:#E2F4E9; color:#237347; }
  .st.new{ background:#E8F0FE; color:#2D62C4; }
  .task-line .cb{ width:14px; height:14px; border-radius:4px; border:1.5px solid #C9CDD4; flex:none; }
  .task-line .cb.on{ background:var(--green); border-color:var(--green); position:relative; }
  .task-line .cb.on::after{ content:"✓"; color:#fff; font-size:9px; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
  .task-line.sub{ margin-left:24px; }
  .shot-chat{ border-left:1px solid var(--line); padding:16px; display:flex; flex-direction:column; gap:10px; background:#fff; }
  .shot-chat .ch-h{ font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.06em; color:var(--muted); }
  .bubble{ border-radius:11px; padding:9px 11px; font-size:12px; line-height:1.45; max-width:92%; }
  .bubble.client{ background:var(--bg-soft); border:1px solid var(--line); color:var(--text); align-self:flex-start; }
  .bubble.me{ background:var(--ink); color:#fff; align-self:flex-end; }
  .bubble .who{ display:block; font-family:'IBM Plex Mono',monospace; font-size:9.5px; opacity:.65; margin-bottom:3px; }
  .via{ font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--muted); display:flex; align-items:center; gap:6px; }
  .via::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--green); }
  .shot-time{
    margin-top:auto; display:flex; justify-content:space-between; align-items:center;
    border-top:1px dashed var(--line); padding-top:10px;
    font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--muted);
  }
  .shot-time b{ color:var(--ink); }

  /* ---------- LOGO/NICHE STRIP ---------- */
  .strip{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg-soft); padding:30px 0; }
  .strip .wrap{ display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; }
  .strip p{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.06em; color:var(--muted); margin:0 10px 0 0; }
  .strip .tag{ font-size:13.5px; font-weight:600; color:var(--muted); }
  .strip .tag:not(:last-child)::after{ content:"·"; margin-left:14px; color:#C9CDD4; }

  /* ---------- SECTION LABELS (PROBLEM / SOLUTION) ---------- */
  .sec-label{
    display:inline-flex; align-items:center; gap:8px;
    font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:600; letter-spacing:.08em;
    padding:6px 14px; border-radius:999px; margin-bottom:22px;
  }
  .sec-label.prob{ color:#C2415B; background:#FCE9EE; border:1px solid #F5CBD6; }
  .sec-label.sol{ color:#237347; background:#E2F4E9; border:1px solid #BFE5CD; }

  /* ---------- PROBLEM: 3 CARDS ---------- */
  .problem{ text-align:center; }
  .problem h2{ font-size:clamp(28px,3.4vw,42px); max-width:640px; margin:0 auto 16px; }
  .problem p.sub{ color:var(--muted); font-size:17px; max-width:560px; margin:0 auto 52px; }
  .problem p.sub b{ color:var(--text); }
  .prob-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; text-align:left; }
  .prob-card{
    background:#fff; border:1px solid var(--line); border-radius:16px; padding:28px 26px;
    box-shadow:0 1px 2px rgba(16,19,23,.04);
  }
  .prob-ico{
    width:44px; height:44px; border-radius:12px; margin-bottom:18px;
    display:flex; align-items:center; justify-content:center; font-size:19px;
  }
  .prob-ico.a{ background:var(--amber-tint); }
  .prob-ico.b{ background:#E8F0FE; }
  .prob-ico.c{ background:#FCE7EF; }
  .prob-card h3{ font-size:17.5px; margin-bottom:8px; }
  .prob-card p{ font-size:14.5px; color:var(--muted); margin:0; }

  /* ---------- ALTERNATING FEATURES ---------- */
  .feature{ padding:64px 0; }
  .feature .wrap{ display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; }
  .feature.flip .wrap > .f-copy{ order:2; }
  .feature.flip .wrap > .f-visual{ order:1; }
  .f-copy h2{ font-size:clamp(26px,3vw,38px); margin-bottom:16px; }
  .f-copy p{ color:var(--muted); font-size:16.5px; max-width:440px; margin:0 0 26px; }
  .f-link{
    display:inline-flex; align-items:center; gap:8px;
    font-weight:600; font-size:15px; color:var(--ink); text-decoration:none;
    border-bottom:2px solid var(--amber); padding-bottom:2px;
  }
  .inline-link{
    color:var(--ink); font-weight:600; text-decoration:none;
    border-bottom:2px solid var(--amber); padding-bottom:1px;
  }
  .inline-link:hover{ border-bottom-color:var(--amber-deep); }
  .two-paths{ display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; }
  .path-chip{
    display:inline-flex; align-items:center; gap:8px;
    font-size:13.5px; font-weight:600; color:var(--ink);
    background:var(--bg-soft); border:1px solid var(--line); border-radius:999px; padding:9px 15px;
  }
  .f-stat{
    margin-top:28px; display:inline-flex; align-items:center; gap:12px;
    border:1px solid var(--line); border-radius:12px; padding:12px 16px; background:var(--bg-soft);
    font-size:13.5px; color:var(--muted);
  }
  .f-stat b{ font-family:'Space Grotesk',sans-serif; font-size:22px; color:var(--ink); }
  .f-visual{
    background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden;
    box-shadow:var(--shadow-card);
  }
  .f-visual::before{ content:""; display:block; height:3px; background:var(--rainbow); }
  .f-visual .inner{ padding:22px; }
  /* form mock */
  .mock-label{ font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.06em; color:var(--muted); margin-bottom:6px; }
  .mock-input{ border:1px solid var(--line); border-radius:8px; padding:10px 12px; font-size:13px; color:var(--text); margin-bottom:14px; background:var(--bg-soft); }
  .mock-select{ display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
  .mock-pill{ font-size:12px; font-weight:500; border:1px solid var(--line); border-radius:999px; padding:6px 12px; color:var(--muted); }
  .mock-pill.on{ background:var(--amber-tint); border-color:#F5DCB0; color:var(--amber-deep); font-weight:600; }
  .mock-btn{ background:var(--ink); color:#fff; font-size:13px; font-weight:600; border-radius:8px; padding:10px 16px; display:inline-block; }
  /* email mock */
  .mail-mock{ display:flex; flex-direction:column; gap:10px; }
  .mail-row{ border:1px solid var(--line); border-radius:10px; padding:12px 14px; background:#fff; }
  .mail-row .from{ font-size:12.5px; font-weight:600; color:var(--ink); display:flex; justify-content:space-between; }
  .mail-row .from span{ font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--muted); font-weight:500; }
  .mail-row .body{ font-size:12.5px; color:var(--muted); margin-top:4px; }
  .mail-row.client{ background:var(--amber-tint); border-color:#F5DCB0; }
  .mail-row.client .body{ color:var(--text); }
  .mail-sync{
    align-self:center; font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--green);
    display:flex; align-items:center; gap:6px;
  }
  /* invoice mock */
  .inv-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
  .inv-head b{ font-family:'Space Grotesk',sans-serif; font-size:16px; color:var(--ink); }
  .inv-head span{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--muted); }
  .inv-row{ display:flex; justify-content:space-between; font-size:12.5px; padding:8px 0; border-top:1px solid var(--line); color:var(--text); }
  .inv-row span:last-child{ font-family:'IBM Plex Mono',monospace; }
  .inv-total{ display:flex; justify-content:space-between; padding-top:12px; margin-top:4px; border-top:2px solid var(--ink); font-weight:700; color:var(--ink); }
  .inv-actions{ display:flex; gap:8px; margin-top:14px; }
  .inv-act{ flex:1; text-align:center; font-size:12px; font-weight:600; border-radius:8px; padding:8px 10px; }
  .inv-act.free{ background:var(--green-tint); color:var(--green-deep); border:1px solid #BFE5CD; }
  .inv-act.paid{ background:#fff; color:var(--ink); border:1px solid var(--line); }
  .inv-total span:last-child{ font-family:'IBM Plex Mono',monospace; }

  /* ---------- STATS ROW ---------- */
  .stats{ background:var(--ink); color:#fff; padding:72px 0; }
  .stats .wrap{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; text-align:center; }
  .stat b{ font-family:'Space Grotesk',sans-serif; font-size:clamp(34px,4vw,48px); display:block; color:#fff; }
  .stat span{ font-size:14px; color:#9BA3B0; }
  .stat b em{ font-style:normal; background:var(--rainbow); -webkit-background-clip:text; background-clip:text; color:transparent; }

  /* ---------- PRICING ---------- */
  .pricing{ background:var(--bg-soft); }
  .pricing .section-head{ text-align:center; max-width:560px; margin:0 auto 52px; }
  .pricing h2{ font-size:clamp(28px,3.2vw,40px); margin-bottom:14px; }
  .pricing p.sub{ color:var(--muted); font-size:16.5px; }
  .price-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
  .price-card{
    background:#fff; border:1px solid var(--line); border-radius:16px;
    padding:26px 22px; display:flex; flex-direction:column; gap:18px;
    box-shadow:0 1px 2px rgba(16,19,23,.04);
  }
  .price-card.featured{ border-color:transparent; position:relative; box-shadow:var(--shadow-card); }
  .price-card.featured::before{
    content:""; position:absolute; inset:-1px; border-radius:17px; padding:2px;
    background:var(--rainbow);
    -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
    pointer-events:none;
  }
  .price-card .plan{ font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.05em; color:var(--amber-deep); font-weight:600; }
  .price-card .amount{ font-family:'Space Grotesk',sans-serif; font-size:32px; font-weight:700; color:var(--ink); }
  .price-card .amount span{ font-size:14px; color:var(--muted); font-weight:500; font-family:'Inter',sans-serif; }
  .price-card ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; flex:1; }
  .price-card li{ font-size:13.5px; color:var(--text); display:flex; gap:8px; }
  .price-card li::before{ content:"✓"; color:var(--green); font-weight:700; flex:none; }
  .price-btn{
    text-align:center; padding:11px; border-radius:9px; text-decoration:none;
    font-weight:600; font-size:14px; border:1px solid var(--line); color:var(--ink); background:#fff;
    transition:border-color .15s;
  }
  .price-btn:hover{ border-color:#b9b9b1; }
  .price-card.featured .price-btn{ background:var(--ink); color:#fff; border-color:var(--ink); }

  /* ---------- FINAL CTA with mascot ---------- */
  .final{ text-align:center; overflow:hidden; padding:120px 0 130px; }
  .final-bg{
    position:absolute; inset:0; z-index:0; pointer-events:none;
    background:radial-gradient(48% 52% at 50% 100%, rgba(245,158,45,.12), transparent 72%);
  }
  .final h2{ font-size:clamp(30px,4vw,48px); max-width:640px; margin:0 auto 16px; }
  .final p{ color:var(--muted); font-size:17px; margin:0 auto 34px; max-width:520px; }
  .signup-form{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:14px; }
  .signup-form input{
    flex:1; min-width:250px; max-width:330px;
    background:#fff; border:1px solid var(--line); color:var(--ink);
    padding:14px 16px; border-radius:12px; font-size:15px; font-family:'Inter',sans-serif;
    box-shadow:0 1px 2px rgba(16,19,23,.04);
  }
  .signup-form input::placeholder{ color:#A6ADB8; }
  .maker-note{
    margin-top:56px; padding-top:36px; border-top:1px solid var(--line);
    font-size:13.5px; color:var(--muted); max-width:480px; margin-left:auto; margin-right:auto;
  }

  footer{ border-top:1px solid var(--line); padding:32px 0; background:var(--bg-soft); }
  footer .wrap{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; }
  footer .logo{ font-size:16px; }
  footer .links{ display:flex; gap:22px; font-size:13.5px; color:var(--muted); }
  footer .links a{ text-decoration:none; }
  footer .links a:hover{ color:var(--ink); }

  /* ============ FLOW REEL ("video") ============ */
  .reel-wrap{ max-width:960px; margin:8px auto 0; }
  .reel-stage{ position:relative; width:900px; max-width:100%; margin:0 auto; }
  .reel-stage .reel{ width:100%; }
  /* mascot peeks out from behind the right edge of the chrome */
  .mascot-col{
    position:absolute; left:auto; right:-150px; bottom:-90px; z-index:1;
    width:250px; height:263px;
    animation:mBob 3.4s ease-in-out infinite;
  }
  .mascot{ width:250px; height:263px; display:block; overflow:visible; }
  @keyframes mBob{
    0%,100%{ transform:rotate(10deg) translateY(0); }
    50%{ transform:rotate(10deg) translateY(-6px); }
  }
  @keyframes mBobUpright{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(-6px); }
  }
  .mascot-bubble{
    position:absolute; right:-40px; bottom:110px; left:auto; z-index:4;
    transform:translateY(4px);
    background:var(--ink); color:#fff; font-size:12px; font-weight:600;
    padding:7px 12px; border-radius:12px 12px 3px 12px;
    white-space:nowrap; opacity:0; transition:opacity .3s, transform .3s;
  }
  .mascot-bubble.show{ opacity:1; transform:translateY(0); }
  .mascot-bubble::after{
    content:""; position:absolute; right:34px; left:auto; bottom:-6px;
    border-width:7px 0 0 7px; border-style:solid; border-color:var(--ink) transparent transparent transparent;
  }
  /* arm waving */
  #mArm{ transform-origin:148px 118px; opacity:0; }
  /* wave once, then rotate the arm down (hand to side) and only then fade out */
  .mascot-col.waving #mArm{ animation:mWave 1.6s ease-in-out 1 forwards; }
  @keyframes mWave{
    0%{ transform:rotate(-4deg); opacity:1; }
    12%{ transform:rotate(-4deg); opacity:1; }
    26%{ transform:rotate(-22deg); opacity:1; }
    40%{ transform:rotate(-6deg); opacity:1; }
    54%{ transform:rotate(-22deg); opacity:1; }
    68%{ transform:rotate(0deg); opacity:1; }
    88%{ transform:rotate(40deg); opacity:1; }
    100%{ transform:rotate(46deg); opacity:0; }
  }
  /* exit: duck down and rotate away, then gone */
  .mascot-col.duck{ animation:mDuck .5s cubic-bezier(.5,0,.75,0) forwards !important; }
  @keyframes mDuck{
    0%{ transform:translateY(0) rotate(0deg); opacity:1; }
    100%{ transform:translateY(80px) rotate(26deg); opacity:0; }
  }
  /* pupils shift by mood */
  #mPupils{ transition:transform .4s ease; }
  /* blink */
  .mascot-col.blink #mPupils{ display:none; }
  .mascot-col.blink #mEyesClosed{ display:block !important; }
  .finale .shot-frame{ transition:max-width .5s ease, margin .5s ease; }
  .finale.peeked .shot-frame{ margin-left:auto; margin-right:auto; }
  /* when the chrome nears full viewport width, pull the peek inward so it stays on screen */
  /* as soon as the mascot would sit over the chrome, use the upright over-the-corner version with the bubble above */
  @media (max-width:1400px){
    .mascot-col{
      left:auto; right:16px; bottom:30px; z-index:8;
      width:82px; height:96px;
      animation:mBobUpright 3.2s ease-in-out infinite;
    }
    .mascot{ width:82px; height:86px; }
    .mascot-bubble{
      left:auto; right:8px; bottom:118px; z-index:9;
      font-size:10px; padding:5px 9px;
      transform:translateY(4px); border-radius:12px 12px 12px 3px;
    }
    .mascot-bubble.show{ transform:translateY(0); }
    .mascot-bubble::after{
      right:14px; left:auto; bottom:-5px;
      border-width:6px 6px 0 0; border-style:solid; border-color:var(--ink) transparent transparent transparent;
    }
  }

  .reel{
    position:relative; z-index:2;
    border-radius:16px 16px 0 0; overflow:hidden;
    background:#0E1116; border:1px solid #23272E; border-bottom:none;
    box-shadow:0 2px 6px rgba(16,19,23,.14), 0 40px 90px -40px rgba(16,19,23,.55);
  }
  .reel-chrome{
    display:flex; align-items:center; gap:12px; padding:10px 14px;
    background:#161A20; border-bottom:1px solid #23272E;
  }
  .rc-dots{ display:flex; gap:6px; }
  .rc-dots i{ width:10px; height:10px; border-radius:50%; background:#333A44; }
  .rc-dots i:nth-child(1){ background:#E5695B; } .rc-dots i:nth-child(2){ background:#E5B567; } .rc-dots i:nth-child(3){ background:#8FBF9F; }
  .rc-title{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:#8A929E; letter-spacing:.03em; }
  .rc-rec{ margin-left:auto; display:flex; align-items:center; gap:6px; font-family:'IBM Plex Mono',monospace; font-size:10px; color:#8A929E; letter-spacing:.06em; }
  .rec-dot{ width:7px; height:7px; border-radius:50%; background:#E5695B; }
  .reel.run .rec-dot{ animation:recPulse 1.6s ease-in-out infinite; }
  @keyframes recPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }

  .reel-view{ position:relative; overflow:hidden; background:var(--bg-soft); aspect-ratio:2/1; }
  /* 5 half-width screens -> track = 250% of viewport, each screen = 50% viewport */
  .reel-track{ display:flex; width:250%; height:100%; align-items:stretch; }
  .screen{
    width:20%; height:100%; flex:none; padding:34px 18px 22px;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    position:relative; opacity:0; transition:opacity .4s;
  }
  .reel.run .screen{ opacity:1; }
  .scr-cap{
    width:100%; max-width:320px; text-align:left; margin-bottom:10px;
    font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.02em; color:var(--muted);
  }
  .mini-card{
    width:100%; max-width:320px; background:#fff; border:1px solid var(--line); border-radius:12px;
    overflow:hidden; box-shadow:var(--shadow-card); text-align:left;
  }
  .mini-bar{ height:3px; background:var(--rainbow); }

  /* animated cursor - fades in/out in place, no edge slide */
  .cursor{
    position:absolute; z-index:20; width:22px; height:22px; left:0; top:0;
    opacity:0; pointer-events:none; filter:drop-shadow(0 2px 3px rgba(0,0,0,.3));
    transform:translate(-100px,-100px) scale(.9);
    transition:opacity .3s ease;
  }
  .cursor svg{ width:100%; height:100%; fill:#fff; stroke:#101317; stroke-width:1.4; }
  .cursor.press{ animation:curPress .25s ease; }
  @keyframes curPress{ 40%{ transform:translate(var(--cx),calc(var(--cy) + 3px)) scale(.82); } }

  /* clicked-button feedback: hover look + pixel press */
  .clicked{ filter:brightness(1.12); transform:translateY(2px) !important; }
  .msubmit.clicked, .mt-send.clicked{ background:var(--amber-deep) !important; }
  .gm-send.clicked{ background:#1557b0 !important; }

  /* form */
  .mini-steps{ display:flex; align-items:center; gap:5px; padding:11px 13px 3px; }
  .ms{ display:flex; align-items:center; gap:4px; font-family:'IBM Plex Mono',monospace; font-size:8.5px; font-weight:600; color:var(--faint); transition:color .25s; }
  .ms i{ width:15px; height:15px; border-radius:50%; font-style:normal; border:1.5px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:7.5px; background:#fff; transition:.25s; }
  .ms-sep{ width:10px; height:1.5px; background:var(--line); }
  .ms.s1{ color:var(--ink); } .ms.s1 i{ background:var(--ink); border-color:var(--ink); color:#fff; }
  .mini-body{ padding:8px 13px 14px; position:relative; min-height:158px; }
  .mpane{ position:absolute; left:13px; right:13px; opacity:0; }
  .ml{ font-family:'IBM Plex Mono',monospace; font-size:8px; letter-spacing:.05em; color:var(--muted); margin-bottom:5px; }
  .mfield{ border:1px solid var(--line); border-radius:7px; padding:8px 10px; background:var(--bg-soft); min-height:32px; font-size:11.5px; color:var(--ink); margin-bottom:10px; display:flex; align-items:center; }
  .mfield.sm{ min-height:28px; margin-bottom:8px; }
  .mtype{ display:inline-block; white-space:nowrap; overflow:hidden; max-width:0; vertical-align:bottom; }
  .t-email::before{ content:"sarah@acme.com"; }
  .t-need::before{ content:"Homepage banner needs a refresh"; }
  .t-reply::before{ content:"Pushed a taller version to staging"; }
  .t-cli::before{ content:"Looks great, thank you!"; }
  .mopt{ border:1px solid var(--line); border-radius:7px; padding:7px 10px; font-size:11.5px; color:var(--muted); margin-bottom:6px; }
  .mopt.on{ border-color:var(--amber); background:var(--amber-tint); color:var(--amber-deep); font-weight:600; }
  .mpills{ display:flex; gap:6px; margin-bottom:11px; }
  .mpill{ font-size:10.5px; border:1px solid var(--line); border-radius:999px; padding:4px 9px; color:var(--muted); }
  .mpill.on{ background:var(--amber-tint); border-color:#F0DCB4; color:var(--amber-deep); font-weight:600; }
  .msubmit{ display:inline-block; background:var(--ink); color:#fff; font-size:11px; font-weight:600; border-radius:7px; padding:7px 12px; }

  /* dashboard mini */
  .mini-dash{ padding:11px 14px; }
  .md-crumb{ font-family:'IBM Plex Mono',monospace; font-size:8.5px; color:var(--faint); margin-bottom:8px; }
  .md-line{ display:flex; align-items:center; gap:7px; padding:7px 0; border-bottom:1px solid var(--line-soft); font-size:11.5px; color:var(--ink); }
  .md-line:last-child{ border-bottom:none; }
  .md-cb{ width:12px; height:12px; border-radius:4px; border:1.5px solid #C9CDD4; flex:none; }
  .md-cb.on{ background:var(--green); border-color:var(--green); position:relative; }
  .md-cb.on::after{ content:"\2713"; color:#fff; font-size:7px; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
  .md-st{ margin-left:auto; font-family:'IBM Plex Mono',monospace; font-size:7.5px; font-weight:600; padding:2px 6px; border-radius:999px; }
  .md-st.done{ background:var(--green-tint); color:var(--green-deep); } .md-st.new{ background:var(--blue-tint); color:var(--blue-deep); }
  .md-st.doing{ background:var(--amber-tint); color:var(--amber-deep); }
  .md-line.fresh{ background:var(--amber-tint); margin:0 -14px; padding:7px 14px; opacity:0; }

  /* task */
  .mini-task{ padding:12px 14px; }
  .mt-title{ font-size:11.5px; font-weight:600; color:var(--ink); margin-bottom:9px; }
  .mt-id{ font-family:'IBM Plex Mono',monospace; font-size:8.5px; color:var(--faint); font-weight:500; margin-left:3px; }
  .mt-thread{ display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }
  .mt-bubble{ font-size:11px; border-radius:4px 9px 9px 9px; padding:7px 10px; max-width:94%; line-height:1.4; }
  .mt-bubble.client{ background:var(--amber-tint); border:1px solid #F0DCB4; color:var(--text); align-self:flex-start; }
  .mt-bubble.me{ background:#fff; border:1px solid var(--line); color:var(--text); align-self:flex-end; border-radius:9px 4px 9px 9px; }
  .mt-bubble.land{ opacity:0; }
  .mt-thumb{ margin-left:3px; }
  .mt-via{ font-family:'IBM Plex Mono',monospace; font-size:7.5px; color:var(--green-deep); background:var(--green-tint); border-radius:999px; padding:1px 6px; margin-left:3px; }
  .mt-composer.col{ border:1px solid var(--line); border-radius:9px; padding:8px 10px; background:var(--bg-soft); display:flex; flex-direction:column; gap:7px; }
  .mt-typerow{ min-height:16px; font-size:11px; color:var(--ink); }
  .mt-attach{ display:inline-flex; align-items:center; gap:5px; align-self:flex-start; font-size:9px; font-weight:500; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:6px; padding:3px 8px; opacity:0; transform:translateY(4px); }
  .mt-attach .mt-x{ color:var(--faint); }
  .mt-cfoot{ display:flex; align-items:center; justify-content:space-between; }
  .mt-hint{ font-size:8px; color:var(--green-deep); font-family:'IBM Plex Mono',monospace; }
  .mt-send{ font-size:9.5px; font-weight:600; color:#fff; background:var(--ink); border-radius:6px; padding:4px 9px; }

  /* gmail */
  .mini-gmail{ width:100%; max-width:320px; background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden; box-shadow:var(--shadow-card); text-align:left; }
  .gm-h{ display:flex; align-items:center; gap:8px; padding:9px 13px; background:var(--bg-soft); border-bottom:1px solid var(--line); font-size:11px; font-weight:600; color:var(--ink); }
  .gm-logo{ width:18px; height:18px; border-radius:5px; background:#EA4335; color:#fff; display:flex; align-items:center; justify-content:center; font-size:10px; }
  .gm-acct{ margin-left:auto; font-family:'IBM Plex Mono',monospace; font-size:8.5px; color:var(--muted); font-weight:400; }
  .gm-open{ padding:12px 14px; }
  .gm-subj{ font-size:12.5px; font-weight:600; color:var(--ink); margin-bottom:9px; }
  .gm-from{ display:flex; align-items:center; gap:8px; margin-bottom:9px; }
  .gm-av{ width:24px; height:24px; border-radius:50%; background:var(--ink); color:#fff; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; font-family:'Space Grotesk',sans-serif; }
  .gm-from b{ display:block; font-size:11px; color:var(--ink); }
  .gm-from span{ font-size:9.5px; color:var(--muted); }
  .gm-msg{ font-size:11px; color:var(--text); line-height:1.45; margin-bottom:10px; }
  .gm-replybox{ border:1px solid var(--line); border-radius:9px; padding:9px 11px; min-height:36px; }
  .gm-replybox .mtype{ font-size:11px; color:var(--ink); }
  .gm-actions{ display:flex; margin-top:7px; }
  .gm-send{ font-size:10px; font-weight:600; color:#fff; background:#1A73E8; border-radius:14px; padding:5px 15px; }

  .reel-progress{ height:4px; background:#161A20; }
  .reel-progress i{ display:block; height:100%; width:0; background:var(--rainbow); }

  /* ---------- FINALE (exact dashboard shot) + REPLAY ---------- */
  .finale{ display:none; text-align:center; position:relative; }
  .finale.show{ display:block; animation:finaleUp .5s ease-out; }
  /* big Chomp peeking from behind the right edge of the dashboard */
  .peek{
    position:absolute;     
    right: -110px;
    bottom: -41px;
    width: 273px;
    z-index:1;
    transform:translateX(-50px) rotate(12deg) scale(.6);
    opacity:0; transform-origin:bottom left; pointer-events:none;
  }
  .peek svg{ width:100%; height:auto; overflow:visible; display:block; }
  #peekArm{ transform-origin:150px 96px; opacity:0; }
  #peekPupils{ transition:transform .45s ease; }
  .finale.peeked .peek{
    animation:peekPop .55s cubic-bezier(.34,1.45,.5,1) forwards;
    animation-delay:.45s;
  }
  .finale.peeked #peekArm{ opacity:1; }
  /* wave: same gentle motion as the side mascot, repeated in bursts */
  #peekArm.waving{ animation:peekWave .55s ease-in-out 1 forwards; }
  #peekArm.arm-rest{ transform:rotate(6deg); transition:transform .35s ease; }
  @keyframes peekPop{
    from{ opacity:0; transform:translateX(-50px) rotate(12deg) scale(.6); }
    to{ opacity:1; transform:translateX(0) rotate(12deg) scale(1); }
  }
  @keyframes peekWave{
    0%{ transform:rotate(-4deg); }
    50%{ transform:rotate(-20deg); }
    100%{ transform:rotate(6deg); }
  }
  @keyframes finaleUp{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none;} }
  .replay-btn{
    display:inline-flex; align-items:center; gap:7px; margin:0 auto 20px;
    font-size:13px; font-weight:600; color:var(--ink);
    border:1px solid var(--line); background:#fff; border-radius:999px; padding:8px 18px;
    box-shadow:var(--shadow-card); cursor:pointer; transition:border-color .15s, transform .12s;
  }
  .replay-btn:hover{ border-color:#c9c9c2; transform:translateY(-1px); }

  @media (prefers-reduced-motion: reduce){
    .reel .reel-track{ animation:none !important; }
    .reel *, .cursor{ animation:none !important; }
    .screen{ opacity:1 !important; }
    .reel-progress i{ width:100%; }
  }

  @media (max-width:920px){
    .feature .wrap{ grid-template-columns:1fr; gap:36px; }
    .feature.flip .wrap > .f-copy{ order:1; }
    .feature.flip .wrap > .f-visual{ order:2; }
    .prob-grid{ grid-template-columns:1fr; }
    .price-grid{ grid-template-columns:repeat(2,1fr); }
    .stats .wrap{ grid-template-columns:1fr; gap:36px; }
    .nav-links{ display:none; }
    .shot-body{ grid-template-columns:1fr; }
    .shot-side{ display:none; }
    .shot-chat{ border-left:none; border-top:1px solid var(--line); }
  }
  @media (max-width:600px){
    section{ padding:64px 0; }
    .price-grid{ grid-template-columns:1fr; }
    .hl-tail{ white-space:normal; font-size:.72em; }
    /* mascot overlays the bottom-right of the video, smaller, upright (no rotation) */
    .reel-stage{ position:relative; display:block; }
    .mascot-col{
      position:absolute; left:auto; right:16px; bottom:30px; z-index:8;
      width:82px; height:96px; padding:0; margin:0;
      animation:mBobUpright 3.2s ease-in-out infinite;
    }
    .mascot{ width:82px; height:86px; }
    .mascot-bubble{ left:auto; right:8px; bottom:118px; transform:translateY(4px); font-size:10px; padding:5px 9px; border-radius:12px 12px 12px 3px; z-index:9; }
    .mascot-bubble.show{ transform:translateY(0); }
    .mascot-bubble::after{ right:14px; left:auto; bottom:-5px; border-width:6px 6px 0 0; border-style:solid; border-color:var(--ink) transparent transparent transparent; }
    /* reel: one screen per view (two columns too narrow on phones) */
    .reel-track{ width:500%; }
    .screen{ width:20%; padding:34px 14px 20px; }
    .reel-view{ aspect-ratio:3/4; }
    .mini-card, .mini-gmail{ max-width:100%; }
    .scr-cap{ max-width:100%; }
  }