:root{
    --paper:#fff7ec; --paper2:#ffeed8; --card:#ffffff; --ink:#1d1a2e; --ink2:#454058; --muted:#7d7690; --line:#efe1cc;
    --pink:#ff4f7b; --pink2:#e23a65; --violet:#6d4aff; --teal:#12b5a5; --sun:#ffc23d;
    --serif: "Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
    --sans: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  }
  *{box-sizing:border-box} html{scroll-behavior:smooth}
  body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
  a{color:inherit}
  .wrap{max-width:1140px;margin:0 auto;padding:0 20px}
  .sr{position:absolute;left:-9999px}

  nav{position:sticky;top:0;z-index:40;background:rgba(255,247,236,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
  nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
  .logo{font:800 21px/1 var(--sans);letter-spacing:-.02em;text-decoration:none;display:flex;align-items:center;gap:10px}
  .logo .mk{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--pink),var(--violet));display:grid;place-items:center;color:#fff;font:700 16px var(--serif)}
  .logo small{font:500 12px var(--sans);color:var(--muted)}

  .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;text-decoration:none;
    font:800 16px/1 var(--sans);padding:16px 24px;border-radius:14px;background:var(--pink);color:#fff;
    box-shadow:0 4px 0 var(--pink2);transition:transform .12s,box-shadow .12s,background .2s}
  .btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--pink2)}
  .btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--pink2)}
  .btn:focus-visible,input:focus-visible,.opt:focus-visible{outline:3px solid var(--violet);outline-offset:2px}
  .btn.sm{padding:11px 16px;font-size:14px;box-shadow:0 3px 0 var(--pink2)}
  .btn.v{background:var(--violet);box-shadow:0 4px 0 #4f30d6}

  /* hero */
  .hero{padding:60px 0 70px;position:relative;overflow:hidden}
  .hero::before,.hero::after{content:"";position:absolute;border-radius:50%;filter:blur(60px);opacity:.35;pointer-events:none}
  .hero::before{width:420px;height:420px;background:var(--pink);right:-120px;top:-120px}
  .hero::after{width:360px;height:360px;background:var(--violet);right:260px;bottom:-200px;opacity:.2}
  .hero .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center;position:relative;z-index:1}
  .tag{display:inline-flex;gap:8px;align-items:center;font:700 13px var(--sans);color:var(--violet);background:rgba(109,74,255,.1);padding:7px 14px;border-radius:999px}
  .tag i{width:8px;height:8px;border-radius:50%;background:var(--pink);animation:pulse 1.6s infinite}
  @keyframes pulse{50%{opacity:.3}}
  h1{font:800 clamp(42px,6.3vw,80px)/.98 var(--sans);letter-spacing:-.04em;margin:20px 0 20px}
  h1 .q{font-family:var(--serif);font-style:italic;font-weight:600;letter-spacing:-.02em;
    background:linear-gradient(90deg,var(--pink),var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent}
  .lede{font-size:clamp(18px,2vw,21px);color:var(--ink2);max-width:540px;margin:0 0 28px}
  .signup{display:flex;gap:10px;max-width:520px;flex-wrap:wrap}
  .signup input{flex:1 1 230px;min-width:0;background:var(--card);border:2px solid var(--line);color:var(--ink);font:16px var(--sans);padding:14px 16px;border-radius:14px}
  .signup input:focus{border-color:var(--violet)}
  .micro{font-size:14px;color:var(--muted);margin-top:14px;display:flex;gap:18px;flex-wrap:wrap}
  .micro span::before{content:"✓ ";color:var(--teal);font-weight:800}

  /* live story card */
  .story{background:var(--card);border-radius:24px;border:1px solid var(--line);box-shadow:0 30px 70px -30px rgba(29,26,46,.45);overflow:hidden;transform:rotate(1deg)}
  .sh{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line);font-size:13px}
  .sh b{font-size:14px}
  .live{font:700 12px var(--sans);color:var(--pink);display:flex;gap:6px;align-items:center}
  .live::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--pink);animation:pulse 1.2s infinite}
  .sb{padding:18px 20px 8px;font:17px/1.65 var(--serif);color:var(--ink2);max-height:230px;overflow:auto}
  .line{margin:0 0 10px;display:flex;gap:10px;align-items:flex-start}
  .line .who{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:700 11px var(--sans);color:#fff;margin-top:2px}
  .line.new{animation:pop .5s ease-out}
  @keyframes pop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
  .prog{padding:10px 18px 12px;border-bottom:1px solid var(--line);font:600 13px var(--sans);color:var(--muted)}
  .prog .row{display:flex;justify-content:space-between;margin-bottom:6px}
  .prog b{color:var(--ink);font-variant-numeric:tabular-nums}
  .meter{height:8px;border-radius:99px;background:var(--paper2);overflow:hidden}
  .meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--pink),var(--violet));border-radius:99px;transition:width .5s}
  .gap{font:italic 14px var(--sans);color:var(--muted);margin:0 0 10px 36px}
  .turn{padding:14px 18px 18px;background:var(--paper2);border-top:1px dashed #e6cfae}
  .turn h4{margin:0 0 10px;font:800 13px var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);display:flex;justify-content:space-between;gap:10px}
  .turn h4 span{color:var(--violet);letter-spacing:0;text-transform:none;font-weight:700}
  .add{display:flex;gap:8px;flex-wrap:wrap}
  .add input{flex:1 1 200px;min-width:0;background:var(--card);border:2px solid var(--line);color:var(--ink);font:15px var(--serif);padding:11px 12px;border-radius:12px}
  .add input:focus{border-color:var(--violet)}
  .add input:disabled{opacity:.55}
  .add .btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
  .rule{display:inline-block;font:700 12px var(--sans);color:var(--pink2);background:rgba(255,79,123,.1);padding:5px 10px;border-radius:999px;margin-top:10px}
  .hint{font-size:13px;color:var(--muted);margin:8px 0 0}
  .hint.wait::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--sun);margin-right:6px;animation:pulse 1s infinite}
  .endcta{display:none;text-align:center;padding:4px 0 2px}
  .endcta .theend{font:italic 700 30px var(--serif);color:var(--ink);margin:0 0 4px}
  .endcta p{margin:0 0 10px;font:600 15px var(--sans)}
  .credits{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:0 0 14px;padding:0;list-style:none}
  .credits li{font:700 12px var(--sans);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:4px 10px}
  .credits li.me{background:var(--violet);color:#fff;border-color:var(--violet)}
  .endcta.on{display:block;animation:pop .4s}

  .lens{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:44px}
  .ln{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:24px}
  .ln .num{font:800 40px/1 var(--sans);letter-spacing:-.03em;color:var(--violet)}
  .ln .num small{font:600 14px var(--sans);color:var(--muted);margin-left:4px}
  .ln h3{margin:10px 0 4px;font-size:19px}
  .ln p{margin:0;color:var(--ink2);font-size:15px}
  .gen{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:30px}
  .gen span{font:700 14px var(--sans);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:8px 14px}
  .gen span.m{background:var(--ink);color:#fff;border-color:var(--ink)}

  section{padding:92px 0}
  .kicker{font:800 12px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--pink);margin-bottom:12px}
  h2{font:800 clamp(32px,4.4vw,52px)/1.04 var(--sans);letter-spacing:-.03em;margin:0 0 16px}
  h2 em{font-family:var(--serif);font-weight:600;color:var(--violet)}
  .sub{color:var(--ink2);font-size:19px;max-width:640px;margin:0}
  .center{text-align:center}.center .sub{margin:0 auto}

  /* how it plays */
  .loop{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:52px;position:relative}
  .lp{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:26px;position:relative}
  .lp .n{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font:800 20px var(--sans);color:#fff;margin-bottom:16px}
  .lp h3{margin:0 0 6px;font-size:20px;letter-spacing:-.01em}
  .lp p{margin:0;color:var(--ink2);font-size:16px}
  .lp:not(:last-child)::after{content:"→";position:absolute;right:-16px;top:40px;font:800 20px var(--sans);color:#d8c5a8;z-index:1}

  /* twist band */
  .band{background:var(--ink);color:#fff;overflow:hidden;padding:26px 0;transform:rotate(-1.2deg) scale(1.04);margin:0}
  .bandwrap{overflow:hidden;padding:18px 0}
  .band .track{display:inline-block;white-space:nowrap;animation:tk 40s linear infinite;font:italic 600 clamp(22px,3vw,34px) var(--serif)}
  .band span{margin-right:48px}.band span:nth-child(odd){color:var(--sun)}
  @keyframes tk{from{transform:translateX(0)}to{transform:translateX(-50%)}}

  /* why fun */
  .fun{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:48px}
  .fc{border-radius:22px;padding:30px;color:#fff}
  .fc h3{margin:0 0 8px;font-size:22px;letter-spacing:-.01em}
  .fc p{margin:0;opacity:.92}
  .fc .e{font-size:34px;margin-bottom:12px;display:block}
  .c1{background:var(--pink)}.c2{background:var(--violet)}.c3{background:var(--teal)}
  .c4{background:var(--ink)}.c5{background:#ff8a3d}.c6{background:#2f7cf6}

  /* objection */
  .obj{background:var(--paper2);border-block:1px solid var(--line)}
  .obj .grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
  .quote{background:var(--card);border-radius:22px;padding:30px;border:1px solid var(--line);font:22px/1.5 var(--serif);color:var(--ink)}
  .quote small{display:block;margin-top:14px;font:600 14px var(--sans);color:var(--muted)}
  .ticks{list-style:none;padding:0;margin:20px 0 0}
  .ticks li{padding:8px 0 8px 32px;position:relative;color:var(--ink2)}
  .ticks li::before{content:"✓";position:absolute;left:0;top:8px;width:22px;height:22px;border-radius:50%;background:var(--teal);color:#fff;font:800 12px/22px var(--sans);text-align:center}

  .promise{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
  .pc{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px}
  .pc b{display:block;font-size:17px;margin-bottom:4px}
  .pc span{color:var(--muted);font-size:15px}

  .faq{max-width:780px;margin:44px auto 0}
  details{border-bottom:2px solid var(--line);padding:20px 0}
  summary{cursor:pointer;list-style:none;font:700 19px var(--sans);display:flex;justify-content:space-between;gap:16px}
  summary::-webkit-details-marker{display:none}
  summary::after{content:"+";font:800 24px/1 var(--sans);color:var(--pink);transition:transform .2s}
  details[open] summary::after{transform:rotate(45deg)}
  details p{color:var(--ink2);margin:12px 0 0}

  .final{text-align:center;background:linear-gradient(135deg,var(--pink),var(--violet));color:#fff;border-radius:32px;margin:0 20px 40px;padding:96px 20px;position:relative;overflow:hidden}
  .final h2{color:#fff;font-size:clamp(38px,5.8vw,70px)}
  .final h2 em{color:var(--sun)}
  .final .sub{color:#fff;opacity:.92;margin:0 auto}
  .final .signup{margin:32px auto 0;justify-content:center}
  .final .signup input{border-color:transparent}
  .final .btn{background:var(--ink);box-shadow:0 4px 0 #000}
  .final .micro{justify-content:center;color:#fff}
  .final .micro span::before{color:var(--sun)}
  .final .kicker{color:var(--sun)}

  footer{padding:24px 0 100px;color:var(--muted);font-size:14px}
  footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
  footer a{text-decoration:none;margin-left:18px} footer a:hover{color:var(--ink)}

  .mcta{position:fixed;left:12px;right:12px;bottom:12px;z-index:45;display:none;transform:translateY(140%);transition:transform .3s}
  .mcta.show{transform:none} .mcta .btn{width:100%;padding:17px}

  .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s,transform .6s}
  .reveal.on{opacity:1;transform:none}

  @media (max-width:960px){
    .hero .grid,.obj .grid{grid-template-columns:1fr}
    .loop{grid-template-columns:1fr 1fr}.lp::after{display:none}
    .fun{grid-template-columns:1fr 1fr}
    .promise,.lens{grid-template-columns:1fr 1fr}
    .story{transform:none}
    section{padding:64px 0}
    .mcta{display:block}
    nav .btn{display:none}
    .final{margin:0 12px 30px;padding:70px 18px;border-radius:24px}
  }
  @media (max-width:560px){ .loop,.fun,.promise,.lens{grid-template-columns:1fr} .signup .btn{width:100%} }
  @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}