:root{
    --cream:#fff8f0; --cream2:#fff1e2; --card:#ffffff; --ink:#1b2440; --ink2:#434c68; --muted:#6c7390; --line:#f1e2d2;
    --coral:#ff6b57; --coral2:#e0503d; --sky:#3aa7f0; --sky2:#1f86d1; --sun:#ffc93c; --peach:#ffb38a; --mint:#23b58a;
    --round: ui-rounded,"SF Pro Rounded",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    --sans: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    --hand: "Bradley Hand","Segoe Print","Comic Sans MS","Chalkboard SE",cursive;
  }
  *{box-sizing:border-box} html{scroll-behavior:smooth}
  body{margin:0;background:var(--cream);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;width:1px;height:1px;overflow:hidden}

  nav{position:sticky;top:0;z-index:40;background:rgba(255,248,240,.88);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(--round);letter-spacing:-.02em;text-decoration:none;display:flex;align-items:center;gap:10px}
  .logo .mk{width:32px;height:32px;border-radius:50%;background:radial-gradient(circle at 50% 75%,var(--sun) 0 34%,transparent 35%),linear-gradient(180deg,var(--coral),var(--peach) 60%,var(--sky));display:grid;place-items:center;box-shadow:inset 0 0 0 2px rgba(255,255,255,.6)}
  .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(--round);padding:16px 24px;border-radius:999px;background:var(--coral);color:#fff;
    box-shadow:0 4px 0 var(--coral2),0 12px 24px -10px rgba(255,107,87,.7);transition:transform .12s,box-shadow .12s,background .2s}
  .btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--coral2),0 16px 28px -10px rgba(255,107,87,.7)}
  .btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--coral2)}
  .btn:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,a:focus-visible,.addbtn:focus-visible{outline:3px solid var(--sky2);outline-offset:3px}
  .btn.sm{padding:11px 18px;font-size:14px;box-shadow:0 3px 0 var(--coral2)}

  /* hero */
  .hero{padding:58px 0 80px;position:relative;overflow:hidden;
    background:linear-gradient(180deg,#ffe3cf 0%,#ffd6c4 22%,#ffe9d6 48%,#e4f3ff 100%)}
  .hero::before{content:"";position:absolute;left:50%;bottom:-340px;width:760px;height:760px;margin-left:-380px;border-radius:50%;
    background:radial-gradient(circle,rgba(255,201,60,.55) 0 30%,rgba(255,179,138,.35) 45%,transparent 68%);pointer-events:none}
  .hero::after{content:"";position:absolute;inset:auto 0 0 0;height:90px;background:linear-gradient(180deg,transparent,var(--cream));pointer-events:none}
  .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(--ink);background:rgba(255,255,255,.7);padding:7px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.9)}
  .tag i{width:10px;height:10px;border-radius:50%;background:var(--sun);box-shadow:0 0 0 3px rgba(255,201,60,.35)}
  h1{font:800 clamp(40px,6.2vw,78px)/1 var(--round);letter-spacing:-.035em;margin:20px 0 20px}
  h1 .q{background:linear-gradient(90deg,var(--coral2),#ff7a3d 50%,#e8527a);-webkit-background-clip:text;background-clip:text;color:transparent}
  .strike{position:relative;white-space:nowrap;color:var(--muted)}
  .strike::after{content:"";position:absolute;left:-2%;right:-2%;top:54%;height:.09em;background:var(--coral);border-radius:4px;transform:rotate(-3deg)}
  .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 #f0d6c2;color:var(--ink);font:16px var(--sans);padding:14px 18px;border-radius:999px}
  .signup input:focus{border-color:var(--sky)}
  .micro{font-size:14px;color:var(--ink2);margin-top:14px;display:flex;gap:18px;flex-wrap:wrap}
  .micro span::before{content:"✓ ";color:var(--mint);font-weight:800}

  /* demo vision board */
  .demo{position:relative}
  .hero .grid>*{min-width:0}
  .board{z-index:1;background:var(--card);border-radius:22px;box-shadow:0 30px 70px -30px rgba(27,36,64,.45),0 0 0 1px rgba(27,36,64,.05);overflow:hidden;transform:rotate(-1deg);position:relative}
  .board .pin{position:absolute;top:10px;left:50%;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ff9c8f,var(--coral2));box-shadow:0 2px 3px rgba(0,0,0,.25);z-index:2}
  .bh{padding:26px 22px 14px;background:linear-gradient(135deg,#fff3c9,#ffe0d4);display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
  .bh h3{margin:0;font:800 22px/1.1 var(--round);letter-spacing:-.01em}
  .bh .lbl{font:700 11px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--coral2);display:block;margin-bottom:4px}
  .count{text-align:right;flex:none}
  .count b{font:800 26px/1 var(--round);font-variant-numeric:tabular-nums;display:block}
  .count span{font-size:12px;color:var(--ink2)}
  .prog{height:8px;background:rgba(27,36,64,.08);margin:0}
  .prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--sun),var(--coral));transition:width .5s cubic-bezier(.2,.8,.2,1)}
  .mscroll{max-height:400px;overflow:auto;background:var(--cream)}
  .mason{columns:2;column-gap:10px;padding:12px 12px 2px}
  .gc{break-inside:avoid;margin:0 0 10px;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 6px 16px -10px rgba(27,36,64,.4);border:1px solid var(--line);display:inline-block;width:100%;transition:box-shadow .2s}
  .gc.new{animation:pop .45s ease-out}
  @keyframes pop{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
  .gc .ph{position:relative;height:var(--h,110px);overflow:hidden;display:grid;place-items:center}
  .gc .ph svg{position:absolute;left:0;right:0;bottom:0;width:100%;height:55%;display:block}
  .gc .ph .em{position:relative;font-size:30px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.25))}
  .gc .tro{position:absolute;top:8px;right:8px;width:34px;height:34px;border-radius:50%;background:var(--sun);display:grid;place-items:center;font-size:18px;box-shadow:0 3px 8px rgba(0,0,0,.3);transform:scale(0);transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
  .gc.done .tro{transform:scale(1)}
  .gc.done .ph::after{content:"Completed";position:absolute;left:8px;bottom:8px;z-index:1;font:800 10.5px var(--sans);letter-spacing:.08em;text-transform:uppercase;background:rgba(27,36,64,.78);color:#fff;padding:3px 8px;border-radius:999px}
  .gc .bd{padding:9px 10px 10px}
  .gc .ct{font:700 10.5px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
  .gc h4{margin:2px 0 4px;font:800 14.5px/1.25 var(--round);overflow-wrap:anywhere}
  .gc .nt{font-size:12px;line-height:1.35;color:var(--ink2);margin:0 0 6px;overflow-wrap:anywhere}
  .gc .nt a{color:var(--sky2);font-weight:600}
  .gc .ac{display:flex;gap:6px;align-items:center}
  .gc .ac button{border:1.5px solid var(--line);background:#fff;border-radius:999px;cursor:pointer;font:700 12px var(--sans);color:var(--ink2);padding:5px 9px;line-height:1}
  .gc .ac .done{flex:1;border-color:var(--mint);color:#137a5c}
  .gc .ac .done[aria-pressed="true"]{background:var(--mint);color:#fff}
  .gc .tools{position:absolute;top:8px;left:8px;display:flex;gap:5px}
  .gc .ic2{width:28px;height:28px;border-radius:50%;border:0;background:rgba(255,255,255,.88);color:var(--ink);font:800 13px/1 var(--sans);cursor:pointer;padding:0;box-shadow:0 2px 6px rgba(0,0,0,.2)}
  .gc .ic2:hover{background:#fff}
  .gc button:focus-visible{outline:3px solid var(--sky2);outline-offset:2px}
  .gc .ac button:hover{border-color:var(--sky)}
  .adder{display:flex;gap:8px;padding:10px 14px 12px;border-top:1px dashed var(--line);flex-wrap:wrap}
  .adder input{flex:1 1 100%;min-width:0;border:2px solid var(--line);border-radius:999px;padding:11px 16px;font:15px var(--sans);color:var(--ink);background:var(--cream)}
  .adder select{flex:1 1 auto;min-width:0;border:2px solid var(--line);border-radius:999px;padding:10px 12px;font:600 14px var(--sans);color:var(--ink);background:#fff}
  .adder input:focus,.adder select:focus{border-color:var(--sky);outline:none}
  .addbtn{flex:none;border:0;border-radius:999px;background:var(--sky2);color:#fff;font:800 15px var(--round);padding:0 18px;cursor:pointer;transition:background .2s;min-height:44px}
  .addbtn:hover{background:#176fb0}
  .dnote{font-size:12.5px;color:var(--muted);text-align:center;padding:0 16px 14px;margin:0}
  .toast{position:absolute;left:50%;bottom:112px;transform:translate(-50%,-6px);background:var(--ink);color:#fff;font:700 14px var(--round);padding:9px 16px;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;white-space:nowrap;z-index:3}
  .toast.on{opacity:1;transform:translate(-50%,0)}
  .confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:4}
  .confetti i{position:absolute;width:8px;height:12px;border-radius:2px;opacity:0;animation:burst .95s cubic-bezier(.15,.7,.3,1) forwards}
  @keyframes burst{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--r))}}
  .polaroid{position:absolute;background:#fff;padding:8px 8px 26px;box-shadow:0 12px 30px -12px rgba(27,36,64,.45);border-radius:4px;font:15px var(--hand);text-align:center;color:var(--ink2);z-index:0}
  .polaroid .ph{width:92px;height:74px;border-radius:2px;display:grid;place-items:center;font-size:34px}
  .polaroid span{position:absolute;left:0;right:0;bottom:5px}
  .p1{left:-58px;top:-70px;transform:rotate(-10deg)} .p1 .ph{background:linear-gradient(160deg,#8fd3ff,#3aa7f0)}
  .p2{right:-56px;bottom:-54px;transform:rotate(8deg)} .p2 .ph{background:linear-gradient(160deg,#ffe082,#ffb38a)}

  section{padding:92px 0}
  .kicker{font:800 12px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--coral2);margin-bottom:12px}
  h2{font:800 clamp(32px,4.4vw,52px)/1.05 var(--round);letter-spacing:-.03em;margin:0 0 16px}
  h2 em{font-style:normal;color:var(--sky2)}
  .sub{color:var(--ink2);font-size:19px;max-width:660px;margin:0}
  .center{text-align:center}.center .sub{margin:0 auto}

  /* built for strip */
  .for{padding:26px 0 30px;border-bottom:1px solid var(--line)}
  .for .wrap{display:flex;align-items:center;gap:14px 12px;flex-wrap:wrap;justify-content:center}
  .for b{font:800 13px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-right:6px}
  .chip{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:8px 16px;font:600 15px var(--sans);color:var(--ink2)}

  /* problem */
  .prob .grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
  .someday{background:var(--card);border-radius:22px;padding:28px 26px;border:1px solid var(--line);box-shadow:0 20px 50px -30px rgba(27,36,64,.35);font:19px/1.5 var(--hand);color:var(--ink2);transform:rotate(1deg)}
  .someday p{margin:0 0 10px;padding-left:28px;position:relative}
  .someday p::before{content:"";position:absolute;left:0;top:7px;width:16px;height:16px;border:2px solid #d9c9b8;border-radius:4px}
  .someday small{display:block;margin-top:14px;font:600 13px var(--sans);color:var(--muted)}
  .ticks{list-style:none;padding:0;margin:22px 0 0}
  .ticks li{padding:8px 0 8px 34px;position:relative;color:var(--ink2)}
  .ticks li::before{content:"✗";position:absolute;left:0;top:9px;width:22px;height:22px;border-radius:50%;background:#ffe1dc;color:var(--coral2);font:800 12px/22px var(--sans);text-align:center}

  /* features */
  .feats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:48px}
  .fc{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:28px;position:relative;overflow:hidden}
  .fc .ic{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:26px;margin-bottom:16px}
  .fc h3{margin:0 0 8px;font:800 21px/1.2 var(--round);letter-spacing:-.01em}
  .fc p{margin:0;color:var(--ink2);font-size:16px}
  .i1{background:#ffe7e2}.i2{background:#dff1ff}.i3{background:#fff4cc}.i4{background:#dcf5ec}.i5{background:#ffe8d6}.i6{background:#ece8ff}

  /* steps */
  .how{background:linear-gradient(180deg,var(--cream2),var(--cream))}
  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:52px;counter-reset:s}
  .st{background:#fff;padding:12px 12px 22px;border-radius:6px;box-shadow:0 16px 40px -24px rgba(27,36,64,.45);position:relative}
  .st:nth-child(1){transform:rotate(-1.5deg)}.st:nth-child(2){transform:rotate(1deg)}.st:nth-child(3){transform:rotate(-.6deg)}
  .st .ph{height:130px;border-radius:3px;display:grid;place-items:center;font-size:48px;margin-bottom:16px;position:relative}
  .st .ph b{position:absolute;left:12px;top:10px;width:34px;height:34px;border-radius:50%;background:#fff;color:var(--ink);font:800 17px/34px var(--round);text-align:center}
  .st h3{margin:0 8px 6px;font:800 21px var(--round)}
  .st p{margin:0 8px;color:var(--ink2);font-size:16px}
  .st::before{content:"";position:absolute;top:-9px;left:50%;width:70px;height:20px;margin-left:-35px;background:rgba(255,201,60,.6);transform:rotate(-3deg)}

  /* categories */
  .choice{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
  .ch{border-radius:24px;padding:30px;color:#fff}
  .ch h3{margin:0 0 8px;font:800 23px var(--round)}
  .ch p{margin:0;opacity:.95}
  .ch.c1{background:linear-gradient(135deg,var(--sky2),#5bb9f5)}
  .ch.c2{background:linear-gradient(135deg,#7a5cf0,#a98bff)}
  .ch.c3{background:var(--ink)}

  .promise{display:grid;grid-template-columns:repeat(4,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:800 17px var(--round);margin-bottom:4px}
  .pc span{color:var(--muted);font-size:15px}
  .pc .d{width:10px;height:10px;border-radius:50%;display:block;margin-bottom:12px}

  .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(--coral);transition:transform .2s;flex:none}
  details[open] summary::after{transform:rotate(45deg)}
  details p{color:var(--ink2);margin:12px 0 0}

  .final{text-align:center;background:linear-gradient(160deg,#ff8a5c 0%,var(--coral) 35%,#ff7fa0 60%,var(--sky) 100%);color:#fff;border-radius:32px;margin:0 20px 40px;padding:96px 20px;position:relative;overflow:hidden}
  .final::before{content:"";position:absolute;left:50%;bottom:-260px;width:520px;height:520px;margin-left:-260px;border-radius:50%;background:radial-gradient(circle,rgba(255,201,60,.55),transparent 65%);pointer-events:none}
  .final>*{position:relative}
  .final h2{color:#fff;font-size:clamp(38px,5.8vw,70px)}
  .final h2 em{color:var(--ink)}
  .final .sub{color:#fff;opacity:.95;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 #0b1024}
  .final .micro{justify-content:center;color:#fff}
  .final .micro span::before{color:#fff6c9}
  .final .kicker{color:#fff6c9}

  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)}
  footer a:first-child{margin-left:0}

  .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,.prob .grid{grid-template-columns:1fr}
    .feats{grid-template-columns:1fr 1fr}
    .promise{grid-template-columns:1fr 1fr}
    .steps{grid-template-columns:1fr;max-width:460px;margin-left:auto;margin-right:auto}
    .board{transform:none}
    .demo{max-width:520px;margin:10px auto 0;width:100%}
    .demo{margin-top:60px}.p1{left:-6px;top:-66px}.p2{right:-8px;bottom:-50px}
    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:860px){ .choice{grid-template-columns:1fr} }
  @media (max-width:560px){
    .feats,.promise{grid-template-columns:1fr} .signup .btn{width:100%}
    .polaroid{display:none} .demo{margin-top:0}
    .bh{padding:22px 16px 12px}.mason{padding:10px 8px 2px;column-gap:8px}.adder{padding:10px 10px 12px}.adder select{flex:1 1 auto}
    .ch{padding:24px}
  }
  @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}.gc .tro{transition:none}}