/* Habit Starter Kit sales page: dark ink, paper workbook mockups. DM Serif Display + DM Sans + Caveat. */
:root{--ink:#17120f;--ink2:#221b16;--paper:#fcf6e8;--cream:#f3ead8;--mute:#c9bda6;--red:#ff5a3c;--red-d:#c93a1f;--gold:#f2bd4b;--line:rgba(252,246,232,.16);--r:18px}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'DM Sans',system-ui,sans-serif;background:var(--ink);color:var(--cream);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{font-family:'DM Serif Display',Georgia,serif;font-weight:400;line-height:1.04;letter-spacing:-.005em;color:var(--paper)}
a{color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}
.hand{font-family:'Caveat',cursive}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}
.knav{position:sticky;top:0;z-index:50;background:rgba(23,18,15,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.knav .in{max-width:1180px;margin:0 auto;padding:10px 22px;display:flex;align-items:center;gap:14px}
.knav .mark{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--paper);font-family:'DM Serif Display',serif;font-size:21px}
.knav .mark img{width:36px;height:36px;border-radius:50%;object-fit:cover;object-position:50% 18%;border:2px solid var(--gold)}
.knav .back{margin-left:auto;font-size:14px;font-weight:700;color:var(--mute);text-decoration:none;white-space:nowrap}
.knav .back:hover{color:var(--paper);text-decoration:underline}
.knav .soc{display:flex;gap:6px}
.knav .soc a{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:var(--cream);background:rgba(252,246,232,.08);transition:transform .25s cubic-bezier(.34,1.56,.64,1),background .2s,color .2s}
.knav .soc a:hover{background:var(--gold);color:var(--ink);transform:translateY(-2px) rotate(6deg)}
.knav .soc svg{width:17px;height:17px;fill:currentColor}
.knav .soc .g{display:none}
@media(max-width:560px){.knav .back{display:none}.knav .soc{margin-left:auto}}
.kbtn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:700 17px/1 'DM Sans',sans-serif;padding:17px 26px;border-radius:14px;border:0;cursor:pointer;text-decoration:none;min-height:54px;transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s,background .2s}
.kbtn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.kbtn.buy{background:var(--red);color:var(--ink);box-shadow:5px 5px 0 var(--gold)}
.kbtn.buy:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--gold)}
.kbtn.buy:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--gold)}
.kbtn.buy:hover svg{transform:translateX(4px)}
.kbtn.line{background:transparent;color:var(--paper);box-shadow:inset 0 0 0 2px var(--line)}
.kbtn.line:hover{box-shadow:inset 0 0 0 2px var(--gold)}
.kbtn[disabled]{opacity:.7;cursor:wait}
[hidden]{display:none!important}

/* hero */
.khero{position:relative;padding:56px 0 70px;overflow:hidden;background:radial-gradient(900px 500px at 78% 30%,rgba(255,90,60,.2),transparent 60%),radial-gradient(700px 400px at 5% 0,rgba(242,189,75,.12),transparent 60%),var(--ink)}
.kgrid{display:grid;gap:40px;grid-template-columns:1fr;align-items:center}
@media(min-width:960px){.kgrid{grid-template-columns:1.02fr .98fr;gap:30px}.khero{padding:84px 0 96px}}
.kick{display:inline-block;font-weight:700;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--red)}
.khero h1{font-size:clamp(46px,8.4vw,92px);margin:14px 0 18px}
.khero h1 u{text-decoration:none;background:linear-gradient(transparent 62%,rgba(242,189,75,.85) 62% 92%,transparent 92%);color:var(--paper);padding:0 .06em}
.khero .sub{font-size:clamp(17px,2.1vw,20px);max-width:33em;color:var(--cream)}
.hbtns{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.knote{font-size:13.5px;color:var(--mute);margin-top:18px;max-width:34em}
.by{display:flex;align-items:center;gap:12px;margin-top:26px;font-size:14px;color:var(--mute)}
.by img{width:50px;height:50px;border-radius:50%;object-fit:cover;object-position:50% 18%;border:3px solid var(--gold)}
.stack{position:relative;height:430px;width:100%;max-width:520px;margin:0 auto}
.stack img{position:absolute;width:56%;height:auto;border-radius:6px;box-shadow:0 40px 60px -20px rgba(0,0,0,.8),0 0 0 1px rgba(0,0,0,.25);background:var(--paper);transform:translateY(var(--py,0px)) rotate(var(--r,0deg));transition:transform .15s linear}
.stack .a{left:0;top:40px;--r:-9deg;z-index:1}
.stack .b{left:24%;top:0;--r:3deg;z-index:3}
.stack .c{right:0;top:62px;--r:11deg;z-index:2}
.stack .tag{position:absolute;left:4%;bottom:4px;z-index:5;font-size:30px;color:var(--gold);transform:rotate(-4deg)}
@media(min-width:960px){.stack{height:560px;max-width:none}}
@media(max-width:420px){.stack{height:360px}}

/* sections */
.ksec{padding:84px 0}
.ksec h2{font-size:clamp(36px,6vw,64px);margin:10px 0 14px}
.klead{font-size:18px;color:var(--mute);max-width:36em}
.paper{background:var(--paper);color:var(--ink)}
.paper h2,.paper h3{color:var(--ink)}
.paper .klead{color:#6b5f50}
.paper .kick{color:#d4452a}

/* flip */
.flipwrap{display:grid;gap:40px;grid-template-columns:1fr;align-items:center}
@media(min-width:900px){.flipwrap{grid-template-columns:.9fr 1.1fr}}
.stage{perspective:1700px;display:flex;flex-direction:column;align-items:center;gap:18px}
.flip{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;width:100%}
@media(min-width:700px){.flip{grid-template-columns:repeat(4,1fr)}}
.flip figure img{width:100%;height:auto;border-radius:4px;box-shadow:0 14px 28px -14px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.12)}
.flip figcaption{font-size:13px;margin-top:6px;color:#6b5f50}
.js .flip{display:block;position:relative;width:min(100%,360px);aspect-ratio:816/1056;transform-style:preserve-3d}
.js .flip figure{position:absolute;inset:0;transform-origin:0 50%;transition:transform 1s cubic-bezier(.5,.05,.2,1),opacity .6s,box-shadow .6s;backface-visibility:hidden}
.js .flip figure img{height:100%;object-fit:cover;box-shadow:0 30px 50px -22px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.15)}
.js .flip figcaption{display:none}
.js .flip figure.past{transform:rotateY(-160deg);opacity:0;pointer-events:none}
.js .flip figure.cur{z-index:9}
.js .flip figure.nxt{transform:translate(calc(var(--d)*12px),calc(var(--d)*8px)) rotate(calc(var(--d)*1.4deg));z-index:calc(9 - var(--d))}
.js .flip figure.far{opacity:0;transform:translate(36px,24px)}
.ctrl{display:none;align-items:center;gap:14px}
.js .ctrl{display:flex}
.ctrl button{width:48px;height:48px;border-radius:50%;border:2px solid #241d17;background:#fff;color:#241d17;cursor:pointer;display:grid;place-items:center;transition:transform .2s cubic-bezier(.34,1.56,.64,1),background .2s}
.ctrl button:hover{background:var(--gold);transform:scale(1.08)}
.ctrl svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.ctrl .cap{font-size:15px;font-weight:700;min-width:15em;text-align:center;color:#241d17}
@media(max-width:480px){.ctrl .cap{min-width:0;flex:1;font-size:14px}}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.chip{font-size:14px;font-weight:700;padding:9px 15px;border-radius:999px;border:2px solid #241d17;background:#fff;color:#241d17}
.chip:nth-child(3n+1){background:var(--gold)}
.chip:nth-child(3n+2){background:#fff}
.chip:nth-child(3n){background:#ffd9cf}

/* features */
.feats{display:grid;gap:16px;grid-template-columns:1fr;margin-top:44px}
@media(min-width:640px){.feats{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.feats{grid-template-columns:repeat(4,1fr)}}
.feat{background:var(--ink2);border:1px solid var(--line);border-radius:var(--r);padding:22px 20px;transition:transform .3s cubic-bezier(.34,1.56,.64,1),border-color .3s}
.feat:hover{transform:translateY(-6px) rotate(-.6deg);border-color:var(--gold)}
.feat .ic{width:52px;height:52px;border-radius:14px;background:var(--gold);color:var(--ink);display:grid;place-items:center;margin-bottom:14px;transform:rotate(-4deg)}
.feat .ic svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.feat h3{font-size:23px;margin-bottom:6px}
.feat p{font-size:15px;color:var(--mute)}

/* streak grid */
.sg{display:grid;gap:34px;grid-template-columns:1fr;align-items:center}
@media(min-width:900px){.sg{grid-template-columns:1fr 1fr}}
.grid30{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;max-width:440px}
.grid30 svg{width:100%;height:auto;display:block;overflow:visible}
.grid30 circle.o{fill:#fffdf6;stroke:#241d17;stroke-width:1.9}
.grid30 path.k{fill:none;stroke:#d4452a;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:0}
.grid30 text{font:700 9px 'Caveat',cursive;font-size:10px;fill:#241d17;text-anchor:middle}
.js .grid30 circle.o{stroke-dasharray:70;stroke-dashoffset:70;transition:stroke-dashoffset .8s calc(var(--i)*55ms) ease}
.js .grid30 path.k{stroke-dashoffset:24;transition:stroke-dashoffset .5s calc(var(--i)*55ms + .6s) ease}
.js .grid30 text{opacity:0;transition:opacity .4s calc(var(--i)*55ms + .3s)}
.js .grid30.in circle.o,.js .grid30.in path.k{stroke-dashoffset:0}
.js .grid30.in text{opacity:1}

/* price */
.price{display:grid;gap:30px;grid-template-columns:1fr;align-items:center}
@media(min-width:900px){.price{grid-template-columns:1fr 1fr;gap:56px}}
.pb{display:flex;align-items:baseline;gap:14px;margin:6px 0 10px}
.pb b{font:400 clamp(90px,16vw,150px)/.9 'DM Serif Display',serif;color:var(--paper)}
.pb span{font-size:18px;color:var(--mute)}
.buybox{background:var(--paper);color:#241d17;border-radius:var(--r);padding:28px 24px;box-shadow:10px 10px 0 var(--red);border:3px solid #241d17;transform:rotate(-.8deg)}
.buybox h3{font-size:30px;color:#241d17;margin-bottom:6px}
.buybox .note{font-size:13px;color:#6b5f50;margin-top:14px}
.buybox .kbtn{width:100%}
.buybox .kbtn.buy{background:var(--red);box-shadow:4px 4px 0 #241d17}
.fg{margin-bottom:14px}
.fg label{display:block;font-weight:700;font-size:14px;margin-bottom:6px}
.fg input{width:100%;font:500 17px 'DM Sans',sans-serif;padding:14px 16px;border-radius:12px;border:2px solid #241d17;background:#fff;color:#241d17;min-height:50px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.err{margin-top:12px;padding:12px 14px;border-radius:12px;background:#ffe4df;color:#8a1a0c;font-weight:600;font-size:14px}
.done h3{margin:10px 0 6px}
.done .ico{width:48px;height:48px;border-radius:50%;background:var(--gold);display:grid;place-items:center}
.done .ico svg{width:26px;height:26px;fill:none;stroke:#241d17;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.buybox a.t{text-decoration:underline;font-weight:700}

/* two + faq */
.two{display:grid;gap:18px;grid-template-columns:1fr;margin-top:30px}
@media(min-width:800px){.two{grid-template-columns:1fr 1fr}}
.kcard{border:1px solid var(--line);border-radius:var(--r);padding:26px 24px;background:var(--ink2)}
.kcard h3{font-size:28px;margin-bottom:8px}
.kcard p{color:var(--mute)}
.faq{margin-top:30px;display:grid;gap:12px;max-width:820px}
.faq details{border:1px solid var(--line);border-radius:14px;background:var(--ink2);overflow:hidden}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:18px 20px;font:400 22px 'DM Serif Display',serif;color:var(--paper);min-height:56px}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{flex:none;width:22px;height:22px;fill:none;stroke:var(--gold);stroke-width:2.6;stroke-linecap:round;transition:transform .3s}
.faq details[open] summary svg{transform:rotate(45deg)}
.faq details p{padding:0 20px 20px;color:var(--mute)}
.faq details p a{color:var(--gold);font-weight:700}
.disc{font-size:12.5px;color:var(--mute);margin-top:30px;max-width:60em}
.kfoot{background:#0e0b09;color:var(--mute);padding:44px 0;font-size:14px;border-top:1px solid var(--line)}
.kfoot .fl{display:flex;flex-wrap:wrap;gap:8px 22px;margin-bottom:16px;font-weight:700}
.kfoot a{color:var(--cream)}
.kfoot p{max-width:60em;margin-top:8px}

/* reveals, a different move per section */
.js .rl{opacity:0;transform:translateX(-46px);transition:opacity .7s,transform .8s cubic-bezier(.2,.8,.2,1)}
.js .rr{opacity:0;transform:translateX(46px);transition:opacity .7s,transform .8s cubic-bezier(.2,.8,.2,1)}
.js .ru{opacity:0;transform:translateY(40px);transition:opacity .7s,transform .8s cubic-bezier(.2,.8,.2,1)}
.js .rp{opacity:0;transform:scale(.7) rotate(-6deg);transition:opacity .5s,transform .6s cubic-bezier(.34,1.56,.64,1)}
.js .in.rl,.js .in.rr,.js .in.ru,.js .in.rp{opacity:1;transform:none}
.js .rp:nth-child(2){transition-delay:.05s}.js .rp:nth-child(3){transition-delay:.1s}.js .rp:nth-child(4){transition-delay:.15s}.js .rp:nth-child(5){transition-delay:.2s}.js .rp:nth-child(6){transition-delay:.25s}.js .rp:nth-child(7){transition-delay:.3s}.js .rp:nth-child(8){transition-delay:.35s}.js .rp:nth-child(9){transition-delay:.4s}.js .rp:nth-child(10){transition-delay:.45s}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .rl,.js .rr,.js .ru,.js .rp{opacity:1;transform:none}
  .js .grid30 circle.o,.js .grid30 path.k{stroke-dashoffset:0}.js .grid30 text{opacity:1}
}
.ksec,.khero{overflow-x:clip}
html{overflow-x:hidden}
@media(max-width:480px){.js .flip{width:min(100%,310px)}}
.js .ctrl{margin-top:64px}