:root{
    --red:#D40000; --red-deep:#A10000; --red-glow:rgba(212,0,0,.35);
    --black:#0A0A0A; --panel:#141414; --panel2:#1b1b1b; --line:#2a2a2a;
    --white:#ffffff; --grey:#b9b9b9; --grey-dim:#8a8a8a;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{background:var(--black);color:var(--white);
    font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    line-height:1.6;-webkit-font-smoothing:antialiased}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:1080px;margin:0 auto;padding:0 22px}
  .red{color:var(--red)}

  /* nav */
  header{position:sticky;top:0;z-index:50;background:rgba(10,10,10,.82);
    backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
  .nav{display:flex;align-items:center;justify-content:space-between;height:64px}
  .logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;letter-spacing:-.02em}
  .logo .mark{width:30px;height:30px;border-radius:8px;object-fit:cover;
    box-shadow:0 0 18px var(--red-glow);display:block}
  .nav-links{display:flex;gap:26px;align-items:center;font-size:15px;color:var(--grey)}
  .nav-links a:hover{color:#fff}
  .btn{display:inline-block;background:var(--red);color:#fff;font-weight:700;
    padding:11px 20px;border-radius:10px;font-size:15px;transition:.15s;
    box-shadow:0 6px 22px var(--red-glow)}
  .btn:hover{background:var(--red-deep);transform:translateY(-1px)}
  .btn.ghost{background:transparent;border:1px solid var(--line);box-shadow:none;color:#fff}
  .btn.ghost:hover{border-color:var(--red)}
  /* ---- mobile menu ----
     There was none. Under 720px every nav link except the button was set to display:none with no
     control to bring them back, so Features, Pricing, FAQ and the Toy Run were simply unreachable
     on a phone. The toy run pages get shared into group chats and opened on phones almost
     exclusively, which is how it surfaced.

     CSS only, driven by a hidden checkbox: the same approach the sign-up form uses for its leg
     gating and for the same reason, no script to fail and it works with JavaScript off.
     The Open web app button stays in the bar rather than moving inside the menu, because it is the
     primary call to action and putting it behind a tap would be a worse page than the broken one. */
  .navtoggle{position:absolute;width:1px;height:1px;opacity:0;margin:0}
  .nav-right{display:flex;align-items:center;gap:6px}
  .burger{display:none}
  @media(max-width:720px){
    .burger{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;
      width:44px;height:44px;cursor:pointer;flex:0 0 auto}
    .burger span{display:block;width:22px;height:2px;background:#fff;border-radius:2px;
      transition:transform .2s,opacity .2s}
    .nav-links{display:none;position:absolute;top:64px;left:0;right:0;z-index:60;
      background:#0A0A0A;box-shadow:0 18px 40px rgba(0,0,0,.6);
      border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:0;
      padding:4px 22px 16px}
    .navtoggle:checked ~ .nav-links{display:flex}
    .nav-links a{display:block;padding:15px 2px;border-bottom:1px solid var(--line);
      font-size:16.5px;color:#fff}
    .nav-links a:last-child{border-bottom:0}
    .navtoggle:focus-visible ~ .nav-right .burger span{background:var(--red)}
    .navtoggle:checked ~ .nav-right .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
    .navtoggle:checked ~ .nav-right .burger span:nth-child(2){opacity:0}
    .navtoggle:checked ~ .nav-right .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  }

  /* hero app-icon badge */
  .hero-badge{display:flex;width:fit-content;align-items:center;gap:13px;margin-bottom:20px}
  .hero-badge img{width:60px;height:60px;border-radius:15px;
    box-shadow:0 10px 30px rgba(0,0,0,.5),0 0 34px var(--red-glow)}
  .hero-badge .bt b{display:block;font-size:17px;font-weight:800;letter-spacing:-.01em}
  .hero-badge .bt span{font-size:13px;color:var(--grey-dim)}

  /* hero */
  .hero{position:relative;padding:96px 0 70px;overflow:hidden}
  .hero::before{content:"";position:absolute;inset:0;
    background:radial-gradient(900px 380px at 75% -10%,var(--red-glow),transparent 60%);
    pointer-events:none}
  .hero-grid{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
  @media(max-width:860px){.hero-grid{grid-template-columns:1fr;gap:34px}}
  .eyebrow{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.12em;
    text-transform:uppercase;color:var(--red);border:1px solid var(--red);
    padding:5px 12px;border-radius:999px;margin-bottom:22px}
  h1{font-size:clamp(38px,6vw,62px);line-height:1.03;letter-spacing:-.03em;font-weight:850}
  h1 span{color:var(--red)}
  .sub{margin-top:20px;font-size:19px;color:var(--grey);max-width:34ch}
  .cta-row{margin-top:32px;display:flex;gap:14px;flex-wrap:wrap}
  .stat-row{margin-top:40px;display:flex;gap:26px 34px;flex-wrap:wrap}
  .stat{min-width:104px}
  .stat b{display:block;font-size:26px;font-weight:800}
  .stat span{font-size:13px;color:var(--grey-dim);text-transform:uppercase;letter-spacing:.06em}

  /* phone mock */
  .phone{justify-self:center;width:270px;height:540px;border-radius:38px;
    background:linear-gradient(180deg,#1c1c1c,#0e0e0e);border:1px solid var(--line);
    padding:12px;box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 60px var(--red-glow)}
  .screen{width:100%;height:100%;border-radius:28px;background:#0c0c0e;overflow:hidden;position:relative}
  .screen .map{position:absolute;inset:0;background:
    linear-gradient(0deg,rgba(212,0,0,.06),transparent),
    repeating-linear-gradient(0deg,#15181c 0 38px,#0f1216 38px 40px),
    repeating-linear-gradient(90deg,#15181c 0 38px,#0f1216 38px 40px)}
  .pin{position:absolute;width:26px;height:26px;border-radius:50% 50% 50% 0;
    background:var(--red);transform:rotate(-45deg);box-shadow:0 0 14px var(--red-glow)}
  .pin::after{content:"";position:absolute;inset:7px;background:#fff;border-radius:50%}
  .screen .card{position:absolute;left:14px;right:14px;bottom:14px;background:#17171a;
    border:1px solid #262629;border-radius:16px;padding:14px}
  .screen .card h4{font-size:14px}
  .screen .card p{font-size:12px;color:var(--grey);margin-top:2px}
  .screen .card .go{margin-top:10px;background:var(--red);color:#fff;text-align:center;
    padding:8px;border-radius:9px;font-size:12px;font-weight:700}
  .screen .top{position:absolute;top:14px;left:14px;right:14px;background:#17171a;
    border:1px solid #262629;border-radius:11px;padding:9px 12px;font-size:12px;color:var(--grey)}

  /* sections */
  section{padding:74px 0}
  .kicker{color:var(--red);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:13px}
  h2{font-size:clamp(28px,4vw,40px);line-height:1.1;letter-spacing:-.02em;font-weight:800;margin-top:10px}
  .lead{color:var(--grey);font-size:17px;margin-top:12px;max-width:56ch}

  .features{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
  @media(max-width:820px){.features{grid-template-columns:1fr}}
  .feat{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:24px;transition:.15s}
  .feat:hover{border-color:var(--red);transform:translateY(-3px)}
  .feat .ico{width:44px;height:44px;border-radius:11px;background:rgba(212,0,0,.12);
    display:grid;place-items:center;margin-bottom:16px}
  .feat .ico svg{width:22px;height:22px;stroke:var(--red);fill:none;stroke-width:2}
  .feat h3{font-size:18px;font-weight:750}
  .feat p{color:var(--grey);font-size:15px;margin-top:6px}

  /* steps */
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:44px}
  @media(max-width:820px){.steps{grid-template-columns:1fr 1fr}}
  @media(max-width:480px){.steps{grid-template-columns:1fr}}
  .step{border-top:2px solid var(--red);padding-top:16px}
  .step b{color:var(--red);font-size:14px;font-weight:800}
  .step h4{font-size:17px;margin-top:6px}
  .step p{color:var(--grey);font-size:14px;margin-top:4px}

  /* pricing */
  .plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px;align-items:start}
  @media(max-width:820px){.plans{grid-template-columns:1fr}}
  .plan{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:28px}
  .plan.pro{border-color:var(--red);box-shadow:0 0 40px var(--red-glow)}
  .plan h3{font-size:20px;font-weight:800}
  .plan .price{font-size:34px;font-weight:850;margin:10px 0 4px}
  .plan .price small{font-size:15px;color:var(--grey);font-weight:500}
  .plan ul{list-style:none;margin-top:18px;display:grid;gap:11px}
  .plan li{display:flex;gap:10px;font-size:15px;color:#e6e6e6}
  .plan li svg{width:18px;height:18px;flex:none;margin-top:3px;stroke:var(--red);fill:none;stroke-width:2.5}
  .tag{display:inline-block;background:var(--red);color:#fff;font-size:11px;font-weight:800;
    padding:3px 10px;border-radius:999px;letter-spacing:.06em;text-transform:uppercase}

  /* faq */
  details{border-bottom:1px solid var(--line);padding:18px 0}
  details summary{font-weight:650;font-size:17px;cursor:pointer;list-style:none;
    display:flex;justify-content:space-between;align-items:center}
  details summary::-webkit-details-marker{display:none}
  details summary::after{content:"+";color:var(--red);font-size:24px;font-weight:400}
  details[open] summary::after{content:"–"}
  details p{color:var(--grey);margin-top:12px;font-size:15px}

  /* cta band */
  .band{background:linear-gradient(120deg,var(--red-deep),var(--red));border-radius:22px;
    padding:48px;text-align:center;margin-top:10px}
  .band h2{color:#fff}
  .band p{color:rgba(255,255,255,.9);margin-top:10px;font-size:17px}
  .band .btn{background:#0A0A0A;margin-top:24px;box-shadow:0 8px 26px rgba(0,0,0,.35)}
  .band .btn:hover{background:#000}

  /* footer */
  footer{border-top:1px solid var(--line);padding:44px 0;color:var(--grey-dim);font-size:14px}
  .foot-grid{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center}
  .soc{display:flex;gap:8px;align-items:center}
  .soc a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
    border-radius:11px;border:1px solid var(--line);color:var(--grey);
    transition:color .15s,border-color .15s,background .15s}
  .soc a:hover{color:#fff;border-color:var(--red);background:rgba(212,0,0,.1)}
  .foot-links{display:flex;gap:22px;flex-wrap:wrap}
  .foot-links a:hover{color:#fff}
  .disclaimer{margin-top:22px;font-size:12px;color:#666;max-width:70ch}

  .store{display:inline-flex;align-items:center;gap:9px;background:#151515;border:1px solid var(--line);
    border-radius:11px;padding:9px 16px;font-size:14px}
  .store:hover{border-color:var(--red)}
  .store small{display:block;font-size:10px;color:var(--grey-dim);line-height:1}
  .store b{font-size:15px}
  .store{text-decoration:none;color:#fff}
  .store svg{width:24px;height:24px;flex:0 0 auto}
  .stores{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
  .band .stores{justify-content:center}

  .doc{max-width:760px;margin:0 auto;padding:120px 22px 80px}
  .doc h1{font-size:clamp(30px,5vw,46px);line-height:1.08;letter-spacing:-.02em;margin:0 0 18px}
  .doc .stand{font-size:19px;color:var(--grey);margin:0 0 34px}
  .doc h2{font-size:22px;margin:38px 0 12px;letter-spacing:-.01em}
  .doc p,.doc li{color:var(--grey);font-size:16.5px;line-height:1.65}
  .doc li{margin:6px 0}
  .doc table{width:100%;border-collapse:collapse;margin:18px 0;font-size:15.5px}
  .doc th,.doc td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
  .doc th{color:#fff;font-weight:700}
  .doc td{color:var(--grey)}
  .doc .note{border-left:3px solid var(--red);padding:12px 16px;margin:24px 0;background:rgba(212,0,0,.06);border-radius:0 10px 10px 0}
  .doc .note p{margin:0;color:#e9e9ea}
  .doc .cta{display:inline-block;margin-top:14px;padding:13px 22px;border-radius:12px;background:var(--red);
    color:#fff;font-weight:800;text-decoration:none}
  .doc .stores{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
  .doc .stores a{display:inline-block;padding:11px 16px;border:1px solid var(--line);border-radius:12px;
    color:var(--text);font-weight:700;font-size:14px;text-decoration:none;background:var(--panel2)}
  .doc .src{font-size:13px;color:var(--grey-dim);margin-top:34px;padding-top:14px;border-top:1px solid var(--line)}
  /* tables must not force a sideways scroll on a 375px phone */
  @media(max-width:520px){
    .doc table{font-size:14.5px}
    .doc th,.doc td{padding:9px 8px}
  }