/* ============================================================
   Happy Folders - styles.css
   Light, fun, rounded, happy. Built to launch.
   ============================================================ */

:root{
  --bg:#fff7ee;
  --bg-2:#fff1e0;
  --surface:#ffffff;
  --surface-2:#fff6ea;
  --ink:#2b2118;
  --ink-soft:#6b5d4c;
  --ink-faint:#9c8c76;
  --line:#f0e2cd;
  --line-strong:#e7d4b6;

  --coral:#ff7a4d;
  --amber:#ffb020;
  --tang:#ff5d8f;
  --grape:#8a6cff;
  --sky:#3aa0ff;
  --mint:#1fbd8a;
  --sun:#ffc83d;

  --brand:#ff7a4d;
  --brand-ink:#d8430f;
  --grad:linear-gradient(120deg,#ff7a4d 0%,#ff9d3d 45%,#ffc247 100%);
  --grad-soft:linear-gradient(120deg,#ffd9b0,#ffe7a3);

  --shadow-s:0 2px 8px rgba(120,70,20,.07);
  --shadow:0 14px 36px rgba(120,70,20,.12), 0 3px 10px rgba(120,70,20,.07);
  --shadow-l:0 36px 80px rgba(110,60,15,.20);
  --shadow-pop:0 18px 40px rgba(255,122,77,.30);

  --r:20px; --r-s:14px; --r-l:30px; --r-xl:42px;
  --maxw:1160px;
  --ticker-h:40px;
  --display:"Fredoka",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --body:"Nunito",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --ease-spring:cubic-bezier(.22,1.2,.36,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink); font-family:var(--body);
  font-size:18px; line-height:1.55; font-weight:500;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  background-image:
    radial-gradient(60% 50% at 8% 4%, rgba(255,200,61,.16), transparent 60%),
    radial-gradient(55% 45% at 98% 8%, rgba(138,108,255,.10), transparent 60%),
    radial-gradient(50% 40% at 50% 100%, rgba(255,93,143,.08), transparent 60%);
  background-attachment:fixed;
}
@media (max-width:760px){
  body{background-attachment:scroll}
  .grain{display:none}
}
h1,h2,h3,.brand{font-family:var(--display); font-weight:700; letter-spacing:-.01em; line-height:1.05; margin:0}
h1{font-size:clamp(2.6rem,6.5vw,5rem)}
h2{font-size:clamp(2rem,4.6vw,3.3rem)}
h3{font-size:1.25rem; font-weight:600}
p{margin:0}
a{color:inherit}
img{max-width:100%}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}
.section{padding:clamp(60px,9vw,120px) 0; position:relative}
.center{text-align:center}
.narrow{max-width:640px; margin-left:auto; margin-right:auto}
.muted{color:var(--ink-soft)}
.mt{margin-top:18px}.mt-s{margin-top:8px}.mt-l{margin-top:34px}
.grad-text{background:linear-gradient(105deg,#963c58,#853e26 40%,#8d2358); -webkit-background-clip:text; background-clip:text; color:transparent}
.lead{color:var(--ink-soft); font-size:clamp(1.08rem,2.1vw,1.35rem); font-weight:600}

/* faint paper grain over everything */
.grain{position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.4; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E")}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; cursor:pointer;
  font-family:var(--display); font-weight:600; font-size:1.04rem; border:0; border-radius:999px;
  padding:15px 28px; text-decoration:none; transition:transform .18s var(--ease-spring), box-shadow .25s, filter .25s; white-space:nowrap}
.btn-primary{background:var(--grad); color:#fff; box-shadow:var(--shadow-pop)}
.btn-primary:hover{transform:translateY(-3px) scale(1.02); box-shadow:0 22px 44px rgba(255,122,77,.40)}
.btn-white{background:#fff; color:var(--brand-ink); box-shadow:0 14px 34px rgba(0,0,0,.16)}
.btn-white:hover{transform:translateY(-3px) scale(1.02)}
.btn-lg{padding:18px 34px; font-size:1.14rem}
.btn-block{display:flex; width:100%}
.btn-apple{width:.82em; height:1.1em; flex:0 0 auto; fill:currentColor; margin-top:-.12em}
.btn:active{transform:translateY(-1px) scale(.99)}

.eyebrow{display:inline-flex; align-items:center; gap:8px; font-family:var(--body); font-weight:800; font-size:.84rem;
  color:var(--brand-ink); background:#fff; border:1.5px solid var(--line-strong); padding:8px 15px; border-radius:999px; box-shadow:var(--shadow-s)}
.pop{animation:pop .6s var(--ease-spring) both}
@keyframes pop{from{transform:scale(.6); opacity:0}to{transform:scale(1); opacity:1}}

.tick{width:18px; height:18px; flex:0 0 auto; fill:none; stroke:var(--mint); stroke-width:3.4; stroke-linecap:round; stroke-linejoin:round}

/* critical selling shell: duplicated here so commerce.css can load non-blocking */
.ticker{
  position:fixed; top:0; left:0; right:0; z-index:120; min-height:var(--ticker-h);
  display:flex; align-items:center; background:var(--ink); color:var(--bg);
  font-family:var(--display); font-weight:500; font-size:.95rem;
}
.ticker[hidden]{display:none}
.ticker a{
  flex:1; display:flex; align-items:center; justify-content:center; gap:.6em;
  padding:.6em 2.6em .6em 1em; text-decoration:none; color:inherit; min-width:0;
}
.ticker a span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ticker__arrow{flex:none; transition:transform .2s}
.ticker a:hover .ticker__arrow{transform:translateX(4px)}
.ticker--live{background:linear-gradient(90deg,#7c63f2,#e04580 50%,#f0a818); color:#fff}
.ticker__close{
  position:absolute; right:.4em; top:50%; transform:translateY(-50%);
  background:none; border:none; color:inherit; font-size:1.3rem; line-height:1;
  cursor:pointer; padding:.2em .5em; opacity:.7;
}
.ticker__close:hover{opacity:1}
body.has-ticker .nav{top:var(--ticker-h)}

.nav-sound{
  background:none; border:0; font-size:1.1rem; cursor:pointer; line-height:1;
  padding:.4em; border-radius:50%; color:var(--ink-soft);
  transition:transform .2s var(--ease-spring);
}
.nav-sound:hover{transform:scale(1.15) rotate(-6deg)}
.nav-sound[aria-pressed="false"]{filter:grayscale(1); opacity:.5}
.nav-burger{
  display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px;
  width:42px; height:42px; padding:9px; background:none; border:0;
  border-radius:13px; cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.nav-burger span{display:block; width:100%; height:3px; border-radius:2px; background:var(--ink);
  transition:transform .25s var(--ease-spring), opacity .2s}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.nav-sheet{
  position:absolute; top:calc(100% + 12px); left:8px; right:8px; z-index:49;
  display:grid; gap:2px; padding:12px; pointer-events:auto;
  background:rgba(255,255,255,.86); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.6); border-radius:var(--r); box-shadow:var(--shadow-l);
}
.nav-sheet[hidden]{display:none}
.nav-sheet a{ text-decoration:none; font-family:var(--display); font-weight:500; font-size:1.05rem;
  color:var(--ink); padding:.7em .9em; border-radius:12px; }
.nav-sheet a:hover,.nav-sheet a:active{background:var(--surface-2); color:var(--brand-ink)}
.nav-sheet .sheet-cta{background:var(--grad); color:#fff; text-align:center; box-shadow:var(--shadow-s); margin-bottom:4px}
.nav-sheet .sheet-cta:hover{background:var(--grad); color:#fff}
@media (max-width:900px){.nav-burger{display:flex}}
@media (max-width:560px){.nav-cta .btn-primary{display:none}}
@media (max-width:600px){body .hero{padding-top:138px}}

/* ---------- nav ---------- */
html{scroll-padding-top:88px}
.nav{position:fixed; top:0; left:0; right:0; z-index:50; padding:14px 16px 0; pointer-events:none}
.nav-in{pointer-events:auto; position:relative; isolation:isolate; display:flex; align-items:center; gap:16px; height:56px; padding:0 6px 0 20px; border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.16) 44%, rgba(255,248,240,.34));
  -webkit-backdrop-filter:saturate(200%) brightness(1.08) blur(22px); backdrop-filter:saturate(200%) brightness(1.08) blur(22px);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 16px 40px rgba(120,70,20,.2), 0 4px 12px rgba(120,70,20,.1), inset 0 2px 1px rgba(255,255,255,.95), inset 2px 0 2px rgba(255,255,255,.45), inset -2px 0 2px rgba(255,255,255,.45), inset 0 -16px 28px rgba(255,255,255,.22), inset 0 -2px 5px rgba(150,110,55,.12);
  transition:background .35s, box-shadow .35s, border-color .35s}
/* specular top reflection */
.nav-in::before{content:""; position:absolute; left:8px; right:8px; top:3px; height:44%; border-radius:999px; pointer-events:none; z-index:0;
  background:linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,0)); opacity:.8}
/* diagonal glass reflection streak */
.nav-in::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:0;
  background:linear-gradient(125deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.4) 48%, rgba(255,255,255,0) 56%); opacity:.5}
.nav-in > *{position:relative; z-index:1}
.nav.scrolled .nav-in{background:linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.26) 44%, rgba(255,248,240,.5));
  border-color:rgba(255,255,255,.7);
  box-shadow:0 20px 46px rgba(120,70,20,.24), 0 4px 12px rgba(120,70,20,.12), inset 0 2px 1px rgba(255,255,255,1), inset 2px 0 2px rgba(255,255,255,.5), inset -2px 0 2px rgba(255,255,255,.5), inset 0 -16px 28px rgba(255,255,255,.26), inset 0 -2px 5px rgba(150,110,55,.14)}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); font-size:1.16rem; font-weight:600}
.brand .mark{width:34px; height:34px; border-radius:11px; background:var(--grad); display:grid; place-items:center; font-size:18px; box-shadow:var(--shadow-s); transition:transform .3s var(--ease-spring)}
.brand:hover .mark{transform:rotate(-10deg) scale(1.08)}
.nav-links{display:flex; gap:2px; margin-left:auto}
.nav-links a{padding:8px 12px; border-radius:999px; text-decoration:none; color:var(--ink-soft); font-family:var(--display); font-size:1rem; transition:color .25s; white-space:nowrap}
.nav-links a:hover{color:var(--ink)}
.navch{font-variation-settings:'wght' 360}
.nav-cta{display:flex; align-items:center; gap:14px}
.nav-price{font-weight:800; font-size:.92rem; color:var(--ink-soft); text-decoration:none; transition:color .2s}
.nav-price:hover{color:var(--brand-ink)}
.nav-cta .btn{padding:0 22px; height:42px; font-size:.98rem}
@media (max-width:900px){ .nav-links,.nav-price{display:none} .nav-cta{margin-left:auto} }

/* ---------- hero ---------- */
.hero{position:relative; min-height:clamp(640px,94vh,940px); display:flex; align-items:center; overflow:hidden; isolation:isolate}
#heroCanvas{position:absolute; inset:0; width:100%; height:100%; z-index:1; display:block; pointer-events:none}
body.webgl-on #heroCanvas{pointer-events:auto}
body.webgl-on .hero-blobs{display:none}
.hero::before{content:""; position:absolute; inset:0; z-index:-3;
  background:linear-gradient(160deg,#fff7ee 0%,#ffe9cf 45%,#ffe0ec 100%)}
.hero-blobs{position:absolute; inset:0; z-index:-2; pointer-events:none; filter:blur(40px); opacity:.7}
.hero-blobs i{position:absolute; border-radius:50%; mix-blend-mode:multiply; animation:drift 14s ease-in-out infinite}
.hero-blobs i:nth-child(1){width:420px;height:420px; background:radial-gradient(circle,#ffd089,transparent 70%); top:-60px; left:-40px}
.hero-blobs i:nth-child(2){width:380px;height:380px; background:radial-gradient(circle,#ffb3cf,transparent 70%); bottom:-80px; right:6%; animation-delay:-4s}
.hero-blobs i:nth-child(3){width:300px;height:300px; background:radial-gradient(circle,#bca3ff,transparent 70%); top:30%; right:30%; animation-delay:-8s}
@keyframes drift{0%,100%{transform:translate(0,0)}33%{transform:translate(26px,-22px)}66%{transform:translate(-18px,16px)}}

.hero-in{position:relative; z-index:2; display:grid; grid-template-columns:1.05fr .95fr; gap:30px; align-items:center; width:100%; pointer-events:none}
@media (max-width:900px){ .hero-in{grid-template-columns:1fr} }
.hero-copy{max-width:600px; pointer-events:auto}
.hero-h1{margin:18px 0 0}
.hero .lead{margin-top:20px; max-width:34ch}
.hero-cta{display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:30px}
.play-link{display:inline-flex; align-items:center; gap:10px; font-family:var(--display); font-weight:600; text-decoration:none; color:var(--ink); padding:10px 6px; transition:.2s}
.play-link .tri{width:30px; height:30px; border-radius:50%; background:#fff; display:grid; place-items:center; color:var(--brand); box-shadow:var(--shadow-s); font-size:.7rem; transition:.2s var(--ease-spring)}
.play-link:hover .tri{transform:scale(1.15); background:var(--brand); color:#fff}
.cta-note{margin-top:16px; font-size:.94rem; color:var(--ink-faint)}
.cta-note b{color:var(--ink-soft); font-weight:800}
.trust{display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:26px; padding-top:22px; border-top:1.5px dashed var(--line-strong)}
.tickline{display:inline-flex; align-items:center; gap:8px; font-size:.92rem; color:var(--ink-soft); font-weight:700}

/* hero fallback folders (shown until webgl turns on) */
.hero-fallback{position:relative; height:440px; display:none}
body:not(.webgl-on) .hero-fallback{display:block}
@media (max-width:900px){ body:not(.webgl-on) .hero-fallback{height:320px; margin-top:10px} }
.ff{position:absolute; width:120px; height:104px; border-radius:22px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; box-shadow:var(--shadow); animation:float 6s ease-in-out infinite}
.ff span{font-size:40px} .ff small{font-family:var(--display); font-weight:600; color:#fff; font-size:.8rem; text-shadow:0 1px 3px rgba(0,0,0,.2)}
.ff.f1{background:linear-gradient(135deg,#ff7a4d,#ffb020); top:30px; left:20%; transform:rotate(-8deg)}
.ff.f2{background:linear-gradient(135deg,#8a6cff,#b9a3ff); top:0; right:18%; animation-delay:-1s; transform:rotate(6deg)}
.ff.f3{background:linear-gradient(135deg,#3aa0ff,#7bc6ff); top:160px; left:6%; animation-delay:-2s; transform:rotate(4deg)}
.ff.f4{background:linear-gradient(135deg,#ff5d8f,#ffa3c4); top:190px; right:8%; animation-delay:-3s; transform:rotate(-6deg)}
.ff.f5{background:linear-gradient(135deg,#1fbd8a,#6fe0bd); top:300px; left:38%; animation-delay:-4s; transform:rotate(8deg)}
@keyframes float{0%,100%{transform:translateY(0) rotate(var(--rot,0))}50%{transform:translateY(-16px)}}

.hero-hint{position:absolute; left:50%; bottom:88px; transform:translateX(-50%); z-index:3; font-family:var(--display); font-weight:500; font-size:.84rem; color:var(--ink-faint); background:#fff; padding:6px 14px; border-radius:999px; box-shadow:var(--shadow-s); opacity:0; transition:opacity .4s}
body.webgl-on .hero-hint{opacity:1}
@media (max-width:900px){ .hero-hint{display:none} }
.scroll-cue{position:absolute; left:50%; top:-42px; transform:translateX(-50%); z-index:3; width:42px; height:42px; color:var(--brand); display:grid; place-items:center; text-decoration:none; font-size:1.1rem; animation:bob 1.8s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(7px)}}

/* ---------- section heads ---------- */
.sec-head{max-width:740px; margin:0 auto clamp(20px,3vw,26px)}
.sec-head .eyebrow{margin-bottom:16px}
.sec-head h2{margin-bottom:12px}
.apple-word{display:inline-flex;align-items:baseline;vertical-align:-.04em;margin:0 .04em;color:currentColor}
.apple-word svg{width:.72em;height:.82em;fill:currentColor;display:block}
.band{background:linear-gradient(180deg,var(--surface-2),#fff8ef); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}

/* ---------- gallery ---------- */
.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
@media (max-width:880px){ .gallery{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .gallery{grid-template-columns:1fr} }
.desk-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l); padding:14px; box-shadow:var(--shadow-s);
  transition:transform .3s var(--ease-spring), box-shadow .3s; transform-style:preserve-3d; will-change:transform}
.desk-card:hover{transform:translateY(-8px) rotate(-.6deg); box-shadow:var(--shadow-l)}
.dc-screen{border-radius:var(--r); overflow:hidden; background:linear-gradient(160deg,#fff,#fff3e2); border:1px solid var(--line); box-shadow:inset 0 1px 0 #fff}
.dc-bar{display:flex; align-items:center; gap:6px; padding:10px 13px; background:rgba(255,255,255,.7); border-bottom:1px solid var(--line)}
.dc-bar i{width:9px; height:9px; border-radius:50%}
.dc-bar i:nth-child(1){background:#ff5f57}.dc-bar i:nth-child(2){background:#febc2e}.dc-bar i:nth-child(3){background:#28c840}
.dc-bar b{margin-left:8px; font-family:var(--display); font-weight:500; font-size:.82rem; color:var(--ink-soft)}
.dc-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding:24px 18px}
.desk-card:hover .dt{animation:wiggle 1s ease-in-out}
.dc-foot{display:flex; align-items:flex-end; justify-content:space-between; gap:12px; padding:16px 8px 8px}
.dc-foot h3{font-size:1.12rem}
.dc-foot p{font-size:.86rem; color:var(--ink-soft); margin-top:3px; max-width:24ch}
.chip-btn{flex:0 0 auto; font-family:var(--display); font-weight:500; font-size:.84rem; cursor:pointer; border:0; border-radius:999px;
  padding:10px 16px; color:var(--brand-ink); background:linear-gradient(120deg,#ffe6cf,#ffeccb); transition:.2s var(--ease-spring)}
.chip-btn:hover{transform:scale(1.06); background:var(--grad); color:#fff}
.sell-line{margin-top:38px; font-family:var(--display); font-weight:500; font-size:1.15rem}
.sell-line a{color:var(--brand-ink); text-decoration:none; border-bottom:2.5px solid var(--amber)}
.sell-line a:hover{border-color:var(--brand)}

/* folder tiles (used in gallery, before/after, art wall) */
.dt{aspect-ratio:1/1; display:grid; place-items:center; font-size:26px; box-shadow:var(--shadow-s); border:1px solid rgba(255,255,255,.5)}
.sq{border-radius:24%} .ci{border-radius:50%} .squi{border-radius:38%}
.c1{background:linear-gradient(135deg,#ff7a4d,#ffb020)}
.c2{background:linear-gradient(135deg,#8a6cff,#b9a3ff)}
.c3{background:linear-gradient(135deg,#3aa0ff,#7bc6ff)}
.c4{background:linear-gradient(135deg,#1fbd8a,#6fe0bd)}
.c5{background:linear-gradient(135deg,#ff5d8f,#ffa3c4)}
.c6{background:linear-gradient(135deg,#ffc83d,#ffe08a)}
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-7deg)}75%{transform:rotate(7deg)}}

/* ---------- generic cards / layouts ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:34px; align-items:center; max-width:980px; margin:0 auto}
@media (max-width:820px){ .split{grid-template-columns:1fr; gap:24px} }
.big-line{font-family:var(--display); font-weight:500; font-size:clamp(1.3rem,2.6vw,1.9rem); line-height:1.25}
.cards-4{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.cards-3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.narrow-wide{max-width:980px; margin:0 auto}
@media (max-width:900px){ .cards-4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){ .cards-4,.cards-3{grid-template-columns:1fr} }
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:24px; box-shadow:var(--shadow-s); transition:transform .25s var(--ease-spring), box-shadow .25s}
.card:hover{transform:translateY(-5px); box-shadow:var(--shadow)}
.card h3{margin-bottom:7px}
.card p{color:var(--ink-soft); font-size:.97rem}
.recipe{display:flex; gap:15px; align-items:flex-start}
.chip{flex:0 0 auto; width:52px; height:52px; border-radius:16px; display:grid; place-items:center; font-size:25px; box-shadow:var(--shadow-s); margin-bottom:4px}

.calc h3{font-size:1.16rem}
.range{-webkit-appearance:none; appearance:none; width:100%; height:10px; border-radius:999px; margin-top:16px; outline:none;
  background:linear-gradient(90deg,#ff7a4d,#ffc247)}
.range::-webkit-slider-thumb{-webkit-appearance:none; width:28px; height:28px; border-radius:50%; background:#fff; border:3px solid var(--brand); box-shadow:var(--shadow); cursor:grab}
.range::-moz-range-thumb{width:28px; height:28px; border-radius:50%; background:#fff; border:3px solid var(--brand); box-shadow:var(--shadow); cursor:grab}
.calc-out{margin-top:18px; font-size:1.05rem; font-weight:600}

/* ---------- art wall ---------- */
.artwall{display:grid; grid-template-columns:repeat(6,1fr); gap:18px}
@media (max-width:760px){ .artwall{grid-template-columns:repeat(3,1fr)} }
@media (max-width:440px){ .artwall{grid-template-columns:repeat(2,1fr)} }
.aw{display:flex; flex-direction:column; align-items:center; gap:10px}
.art{width:100%; aspect-ratio:1/1; display:grid; place-items:center; font-size:38px; box-shadow:var(--shadow); border:1px solid rgba(255,255,255,.5); transition:transform .3s var(--ease-spring)}
.aw:hover .art{transform:translateY(-6px) rotate(-5deg) scale(1.04)}
.aw small{font-family:var(--display); font-weight:500; font-size:.86rem; color:var(--ink-soft)}
.soon{font-family:var(--display); font-weight:600; font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:#fff; background:var(--grape); padding:3px 9px; border-radius:999px; margin-right:6px; vertical-align:middle}

/* ---------- before / after ---------- */
.ba{position:relative; max-width:780px; margin:0 auto; border-radius:var(--r-l); overflow:hidden; box-shadow:var(--shadow-l); border:1px solid var(--line); user-select:none; touch-action:pan-y; background:#fff}
.ba-pane{padding:30px; min-height:300px}
.ba-after{background:radial-gradient(120% 120% at 80% 0%, rgba(138,108,255,.10), transparent 60%), #fff}
.ba-folders{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.ba-folders .dt{font-size:30px}
.ba-before{position:absolute; inset:0; width:50%; overflow:hidden; background:#fbf4ea; border-right:3px solid #fff}
.ba-fixed{width:780px; max-width:none}
.ba-folders.gray{}
.gdt{display:flex; flex-direction:column; align-items:center; gap:8px}
.gdt i{width:100%; aspect-ratio:1/1; border-radius:14% 14% 16% 16%; position:relative; background:linear-gradient(180deg,#d3dae1,#bcc6d0); box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.gdt i::before{content:""; position:absolute; top:-9px; left:12%; width:34%; height:12px; border-radius:7px 7px 0 0; background:inherit}
.gdt em{font-style:normal; font-size:.74rem; color:#9aa6b2; font-weight:700}
.ba-tag{position:absolute; top:16px; font-family:var(--display); font-weight:500; font-size:.74rem; letter-spacing:.04em; padding:5px 12px; border-radius:999px; color:#fff}
.ba-tag.b{left:16px; background:#9aa6b2} .ba-tag.a{right:16px; background:var(--brand)}
.ba-handle{position:absolute; top:0; bottom:0; left:50%; width:3px; background:#fff; transform:translateX(-1.5px); z-index:5; pointer-events:none; box-shadow:0 0 0 1px rgba(0,0,0,.04)}
.ba-knob{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:46px; height:46px; border-radius:50%; background:#fff; box-shadow:var(--shadow); display:grid; place-items:center; color:var(--brand); font-weight:800; font-size:1.1rem}
.ba-range{position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:ew-resize; margin:0; z-index:6}

/* ---------- comparison ---------- */
.table-wrap{max-width:840px; margin:0 auto; overflow-x:auto; border-radius:var(--r); box-shadow:var(--shadow); border:1px solid var(--line)}
.cmp{width:100%; table-layout:fixed; border-collapse:separate; border-spacing:0; background:var(--surface)}
.cmp th,.cmp td{padding:15px 18px; text-align:left; border-bottom:1px solid var(--line); font-size:.98rem; word-wrap:break-word; overflow-wrap:break-word}
.cmp thead th{background:var(--surface-2); font-family:var(--display); font-weight:500; font-size:.9rem}
.cmp thead th:last-child{color:var(--brand-ink)}
.cmp td:not(:first-child),.cmp th:not(:first-child){text-align:center; width:21%}
.cmp tr:last-child td{border-bottom:0}
.cmp td:first-child{font-weight:700; color:var(--ink)}
.cmp .yes{color:var(--mint); font-weight:800} .cmp .no{color:var(--ink-faint)}
.cmp .hl{background:linear-gradient(180deg,rgba(255,122,77,.08),rgba(255,194,71,.06))}
@media (max-width:560px){ .cmp th,.cmp td{padding:12px 9px; font-size:.84rem} .cmp td:not(:first-child),.cmp th:not(:first-child){width:22%} }

/* ---------- founder ---------- */
.founder{display:grid; grid-template-columns:auto 1fr; gap:26px; align-items:center; max-width:880px; margin:0 auto;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l); padding:34px; box-shadow:var(--shadow)}
@media (max-width:620px){ .founder{grid-template-columns:1fr; text-align:center; padding:26px} }
.avatar{width:92px; height:92px; border-radius:50%; background:var(--grad); display:grid; place-items:center; font-size:42px; box-shadow:var(--shadow); margin:0 auto}
.founder-quote{color:var(--ink-soft); font-size:1.05rem}
.sig{font-family:var(--display); font-weight:500; color:var(--ink); margin-top:12px; font-size:1.12rem}

/* ---------- steps ---------- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; max-width:920px; margin:0 auto}
@media (max-width:760px){ .steps{grid-template-columns:1fr} }
.step{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:28px 26px; box-shadow:var(--shadow-s); position:relative}
.step .n{width:42px; height:42px; border-radius:13px; background:var(--grad); color:#fff; font-family:var(--display); font-weight:600; font-size:1.2rem; display:grid; place-items:center; margin-bottom:16px}
.step h3{margin-bottom:6px} .step p{color:var(--ink-soft); font-size:.97rem}

/* ---------- pricing ---------- */
.price-card{position:relative; max-width:560px; margin:0 auto; background:var(--surface); border:2px solid var(--line-strong); border-radius:var(--r-xl); box-shadow:var(--shadow-l); overflow:hidden}
.price-glow{position:absolute; inset:-2px; z-index:0; background:conic-gradient(from 0deg,#ff7a4d,#ffc247,#ff5d8f,#8a6cff,#ff7a4d); filter:blur(26px); opacity:.18}
.price-top,.price-body{position:relative; z-index:1}
.price-top{padding:34px 34px 28px; text-align:center; background:linear-gradient(180deg,#fff8ef,#fff); border-bottom:1px solid var(--line)}
.price-name{font-family:var(--display); font-weight:500; color:var(--ink-soft)}
.amt{font-family:var(--display); font-weight:700; font-size:3.6rem; line-height:1; margin:8px 0; color:var(--ink)}
.amt small{font-size:1.05rem; font-weight:500; color:var(--ink-soft)}
.once-pill{display:inline-block; font-family:var(--display); font-weight:500; color:var(--mint); background:rgba(31,189,138,.12); padding:5px 14px; border-radius:999px; font-size:.86rem}
.price-body{padding:28px 34px 34px}
.plist{list-style:none; padding:0; margin:0 0 22px}
.plist li{display:flex; gap:12px; padding:9px 0; font-size:1rem; color:var(--ink-soft); align-items:flex-start}
.plist .tick{margin-top:3px}
.guarantee{margin-top:15px; text-align:center; font-size:.9rem; color:var(--ink-faint)}

/* ---------- quotes ---------- */
.quotes{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
@media (max-width:820px){ .quotes{grid-template-columns:1fr} }
.quote{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:24px; box-shadow:var(--shadow-s)}
.quote p{font-size:1.02rem; color:var(--ink)}
.quote .who{margin-top:14px; font-size:.86rem; color:var(--ink-faint); font-weight:700}
.quote.empty{border-style:dashed; background:transparent; box-shadow:none}
.quote.empty p{color:var(--ink-faint); font-style:italic}

/* ---------- faq ---------- */
.faq{max-width:760px; margin:0 auto}
details{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-s); margin-bottom:12px; box-shadow:var(--shadow-s); overflow:hidden}
details[open]{border-color:var(--line-strong); box-shadow:var(--shadow)}
summary{cursor:pointer; padding:19px 22px; font-family:var(--display); font-weight:500; font-size:1.06rem; list-style:none; display:flex; justify-content:space-between; gap:16px; align-items:center}
summary::-webkit-details-marker{display:none}
summary .pm{flex:0 0 auto; width:28px; height:28px; border-radius:9px; background:var(--surface-2); display:grid; place-items:center; color:var(--brand); font-weight:800; transition:transform .25s var(--ease-spring)}
details[open] summary .pm{transform:rotate(135deg)}
details .ans{padding:0 22px 20px; color:var(--ink-soft); font-size:.99rem}

/* ---------- in short ---------- */
.inshort{max-width:820px; margin:0 auto; background:var(--surface); border:1px solid var(--line); border-left:5px solid var(--brand); border-radius:var(--r); padding:24px 28px; box-shadow:var(--shadow-s)}
.inshort b{font-family:var(--display); font-weight:600; color:var(--ink)}
.inshort p{color:var(--ink-soft); margin-top:6px}

/* ---------- final cta ---------- */
.final-panel{position:relative; max-width:var(--maxw); margin:0 auto; border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow-l); isolation:isolate}
#finalCanvas{position:absolute; inset:0; width:100%; height:100%; z-index:0; display:block}
.final-panel::before{content:""; position:absolute; inset:0; z-index:-1; background:var(--grad)}
.final-inner{position:relative; z-index:1; text-align:center; padding:clamp(48px,7vw,86px) 26px;
  background:linear-gradient(180deg,rgba(255,122,77,.92),rgba(255,157,61,.88))}
.final-inner h2{color:#fff; max-width:17ch; margin:0 auto 12px}
.final-inner p{color:rgba(255,255,255,.95); max-width:40ch; margin:0 auto 26px; font-size:1.15rem; font-weight:600}
.final-inner .note{font-size:.92rem; color:rgba(255,255,255,.9); margin-top:16px}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line); padding:48px 0 70px; color:var(--ink-soft); position:relative; z-index:2}
.foot-grid{display:flex; flex-wrap:wrap; gap:22px; justify-content:space-between; align-items:center}
.foot-links{display:flex; gap:24px; flex-wrap:wrap}
.foot-links a{text-decoration:none; color:var(--ink-soft); font-weight:700; font-size:.94rem}
.foot-links a:hover{color:var(--ink)}
.foot-note{font-size:.85rem; color:var(--ink-faint); margin-top:18px; max-width:64ch}

/* ---------- sticky mobile buy bar ---------- */
.buybar{position:fixed; left:0; right:0; bottom:0; z-index:60; transform:translateY(130%); transition:transform .35s var(--ease-spring);
  background:rgba(255,247,238,.92); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-top:1px solid var(--line);
  padding:11px 16px calc(11px + env(safe-area-inset-bottom)); display:flex; align-items:center; gap:14px; box-shadow:0 -8px 24px rgba(120,70,20,.10)}
.buybar.show{transform:translateY(0)}
.bp{font-family:var(--display); font-weight:600; font-size:1.1rem}
.bp small{font-family:var(--body); font-weight:700; color:var(--ink-soft); font-size:.78rem}
.buybar .btn{margin-left:auto; padding:12px 22px}
@media (min-width:901px){ .buybar{display:none} }

/* ---------- reveal ---------- */
.reveal{opacity:0; transform:translateY(26px)}
.reveal.in{opacity:1; transform:none}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.08s !important}
  html{scroll-behavior:auto}
  .reveal{opacity:1; transform:none}
  .hero-blobs,.scroll-cue{animation:none}
  .sticker{transition:none}
}

/* ============================================================
   HERO EQUATION (reimagined)
   ============================================================ */
#heroCanvas{pointer-events:none}
.hero{min-height:100vh}
.hero-in{display:flex; justify-content:center; align-items:center; pointer-events:auto; grid-template-columns:none}
.equation-fit{position:relative; width:fit-content; max-width:min(780px,92vw); margin:0 auto; pointer-events:auto; padding:14px 0}
.equation-fit::before{content:""; position:absolute; inset:-10% -8%; z-index:-1;
  background:radial-gradient(62% 60% at 42% 46%, rgba(255,255,255,.62), rgba(255,255,255,0) 72%)}

.equation{font-size:20px; line-height:1.16}
.eq-line{display:flex; align-items:center; gap:.5em; white-space:nowrap; margin:0}
.eq-line > *{flex:0 0 auto}
.eq-a{margin-bottom:.18em}
.eq-label{font-family:var(--display); font-weight:300; font-size:1.3em; color:var(--ink-soft)}
.eq-label.big{font-size:2.9em; font-weight:700; color:var(--ink)}
.eq-eq{font-family:var(--display); font-weight:500; font-size:1.4em; color:var(--ink)}
.eq-eq-2{font-family:var(--display); font-weight:300; font-size:1.4em; color:var(--ink-soft)}
.eq-b .eq-eq{font-size:1.85em}
.eq-folder{width:1.7em; height:1.7em; filter:drop-shadow(0 3px 5px rgba(120,80,30,.10))}

.eq-sep{height:2px; width:100%; margin:.5em 0 .62em; border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--line-strong) 14%,var(--line-strong) 86%,transparent)}

.eq-c,.eq-d{margin-top:.5em}
.eq-num{flex:0 0 auto; width:1.5em; height:1.5em; border-radius:50%; background:var(--ink); color:var(--bg);
  font-family:var(--display); font-weight:600; font-size:.92em; display:inline-grid; place-items:center}
.eq-verb{font-family:var(--display); font-weight:600; font-size:1.28em; color:var(--ink)}

.toks{display:inline-flex; align-items:center; gap:.45em; flex:0 0 auto}
.tok{display:inline-flex; align-items:center; gap:.4em; flex:0 0 auto; padding:.32em .62em; border-radius:.66em;
  background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-s); font-size:1.05em; cursor:pointer}
.tok b{font-family:var(--body); font-weight:800; color:var(--ink)}
.tok .ti{width:1.3em; height:1.3em; flex:0 0 auto}
.t-links,.t-auto{border-radius:999px}
.t-apps .ti{color:var(--grape)} .t-files .ti{color:var(--sky)} .t-folders .ti{color:var(--amber)}
.t-links .ti{color:var(--mint)} .t-auto .ti{color:var(--coral)} .t-short .ti{color:var(--tang)}

/* die-cut shuffling stickers */
.stickers{position:relative; display:inline-block; width:2.7em; height:1.5em; vertical-align:middle}
.sticker{position:absolute; top:50%; left:50%; font-size:1.5em; line-height:1; transform:translate(-50%,-50%);
  transition:transform .6s var(--ease-spring), opacity .6s ease;
  filter:drop-shadow(1.6px 0 0 #fff) drop-shadow(-1.6px 0 0 #fff) drop-shadow(0 1.6px 0 #fff) drop-shadow(0 -1.6px 0 #fff)
         drop-shadow(1.2px 1.2px 0 #fff) drop-shadow(-1.2px -1.2px 0 #fff) drop-shadow(0 5px 6px rgba(0,0,0,.22))}

/* line 5 */
.eq-most{display:flex; align-items:center; gap:.7em; white-space:nowrap; margin-top:1.5em}
/* line 5 — handwritten "most importantly" note: tilted, two lines, writes itself on */
.most-note{
  position:relative; display:inline-flex; flex-direction:column; align-items:flex-start; gap:.02em;
  font-family:"Caveat",cursive; font-weight:700; line-height:.8; color:var(--brand-ink);
  font-size:1.15em;
  transform:rotate(-41deg); transform-origin:center;
  align-self:flex-end; margin:-.1em .15em 0 0;
}
.most-note .mw{position:relative; display:block; white-space:nowrap}
.most-note .mw2{margin-left:.55em; font-size:1.06em}
.most-note .inkk{display:inline-block; clip-path:inset(0 0 0 0); animation:handwrite .75s var(--ease-spring) both}
.most-note .mw1 .inkk{animation-delay:.45s}
.most-note .mw2 .inkk{animation-delay:1s}
/* the pen tip that rides along the leading edge as each word appears */
.most-note .mw::after{content:""; position:absolute; top:.06em; bottom:.16em; left:0; width:.07em; border-radius:2px;
  background:var(--brand-ink); box-shadow:0 0 7px rgba(216,67,15,.55); opacity:0; animation:pentip .75s var(--ease-spring) forwards}
.most-note .mw1::after{animation-delay:.45s}
.most-note .mw2::after{animation-delay:1s}
@keyframes handwrite{from{clip-path:inset(0 100% 0 0)} to{clip-path:inset(0 0 0 0)}}
@keyframes pentip{0%{left:0; opacity:1} 85%{opacity:1} 100%{left:100%; opacity:0}}
@media (max-width:600px){
  .most-note .inkk{animation:none}
  .most-note .mw::after{display:none}
}

.most-text{font-family:var(--display); font-weight:700; font-size:clamp(1.5rem,4.8vw,2.5rem)}

.eq-cta{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:1.4em}
.cta-tiny{font-size:.86rem; color:var(--ink-faint); font-weight:700; text-decoration:none; transition:color .2s; border-bottom:1.5px solid transparent}
.cta-tiny:hover{color:var(--brand-ink); border-bottom-color:var(--line-strong)}
@media (max-width:600px){
  /* the hero is the most important section: fill the screen (svh keeps it clear
     of mobile browser chrome) and centre the equation between the floating
     nav/ticker and the scroll cue. min-height (not height) means it still grows
     instead of clipping on very short screens. */
  .hero{min-height:100svh; padding:30px 0 52px}
  .hero-in{align-items:center}
  .equation{font-size:clamp(12px,3.6vw,14px)}
}
@media (max-width:540px){ .eq-cta{gap:12px} }

/* ============================================================
   HERO REFINEMENTS (bigger art, tiny separator, tilted tokens, line 3)
   ============================================================ */
.eq-folder{width:3em; height:3em}
.stickers{--sticker-sz:3.7em; width:6.4em; height:4em; margin-left: 15px;}
.sticker{font-size:var(--sticker-sz)}
.eq-sep{width:2.6em; height:3px; margin:.3em 0 .46em; background:var(--line-strong)}
.tok .ti{width:1.55em; height:1.55em}
.toks .tok{transition:transform .22s var(--ease-spring)}
.toks .tok:nth-child(1){transform:rotate(-2.5deg)}
.toks .tok:nth-child(2){transform:rotate(2deg)}
.toks .tok:nth-child(3){transform:rotate(-1.5deg)}
.toks .tok:nth-child(4){transform:rotate(2deg)}
.toks .tok:hover{transform:rotate(0deg) scale(1.06)}
.eq-e{margin-top:.5em}
.eq-e .most-text{font-size:1.55em}

/* ============================================================
   STORY  (boring folders gather, then become your stickers)
   ============================================================ */
.story{position:relative}
.story-stage{position:relative; height:100vh; min-height:540px; display:grid; place-items:center; overflow:hidden}
.story-words{position:absolute; top:20%; left:0; right:0; display:grid; place-items:center; height:2.6em; pointer-events:none; z-index:3}
.story-line{position:absolute; margin:0; text-align:center; font-size:clamp(1.7rem,5vw,3rem); line-height:1.04}
#storyLine2{opacity:0}
.story-board{position:relative; width:min(520px,84vw); aspect-ratio:4/3}
.story-grid{position:absolute; inset:0; display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(3,1fr); gap:clamp(10px,2.2vw,18px)}
#stickerGrid{opacity:1}
.gtile{position:relative; border-radius:16% 16% 18% 18%; background:linear-gradient(180deg,#d6dce3,#bcc6d0);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), var(--shadow-s)}
.gtile::before{content:""; position:absolute; top:-9%; left:14%; width:34%; height:13%; border-radius:6px 6px 0 0; background:inherit}
.stile{display:grid; place-items:center; font-size:clamp(20px,4.6vw,38px); box-shadow:var(--shadow); border:1px solid rgba(255,255,255,.55)}
.stile.has-img{background:none; border:0; box-shadow:none; border-radius:0}
.stile img{width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 6px 10px rgba(0,0,0,.18))}

/* ============================================================
   PLAY  (drag, scale, rotate with handles)
   ============================================================ */
.play-canvas{position:relative; height:clamp(360px,52vh,470px); margin-top:8px; border-radius:var(--r-l); overflow:hidden;
  background:radial-gradient(120% 120% at 50% 0%, #ffffff, #fdeede 75%); border:1.5px solid var(--line); box-shadow:var(--shadow-s)}
.drag-item{position:absolute; left:50%; top:50%; width:max-content; touch-action:none; cursor:grab; user-select:none; -webkit-user-select:none; will-change:transform}
.drag-item:active{cursor:grabbing}
.dz-art{display:block; line-height:1; font-size:80px; pointer-events:none;
  filter:drop-shadow(1.7px 0 0 #fff) drop-shadow(-1.7px 0 0 #fff) drop-shadow(0 1.7px 0 #fff) drop-shadow(0 -1.7px 0 #fff)
         drop-shadow(1.3px 1.3px 0 #fff) drop-shadow(-1.3px -1.3px 0 #fff) drop-shadow(0 6px 7px rgba(0,0,0,.24))}
.dz-box,.dz-h,.dz-rot{position:absolute; opacity:0; pointer-events:none; transition:opacity .15s}
.drag-item.selected .dz-box{opacity:1}
.drag-item.selected .dz-h,.drag-item.selected .dz-rot{opacity:1; pointer-events:auto}
.dz-box{inset:-9px; border:2px dashed var(--brand); border-radius:9px}
.dz-h{width:15px; height:15px; background:#fff; border:2.5px solid var(--brand); border-radius:4px; touch-action:none; cursor:nwse-resize}
.dz-h.tl{left:-9px; top:-9px; transform:translate(-50%,-50%)}
.dz-h.tr{right:-9px; top:-9px; transform:translate(50%,-50%)}
.dz-h.br{right:-9px; bottom:-9px; transform:translate(50%,50%)}
.dz-h.bl{left:-9px; bottom:-9px; transform:translate(-50%,50%)}
.dz-rot{left:50%; top:-34px; width:15px; height:15px; transform:translate(-50%,-50%); background:var(--brand); border:2.5px solid #fff; border-radius:50%; touch-action:none; cursor:grab}
.dz-rot::after{content:""; position:absolute; left:50%; top:100%; width:2px; height:25px; background:var(--brand); transform:translateX(-50%)}
.play-hint{position:absolute; left:0; right:0; bottom:14px; text-align:center; font-family:var(--display); font-weight:500;
  color:var(--ink-faint); font-size:.92rem; pointer-events:none; transition:opacity .3s}
.play-hint.gone{opacity:0}

@media (prefers-reduced-motion: reduce){ .drag-item{transition:none} }

/* ============================================================
   HERO: custom-image stickers, tear-off canvas, moon curve
   ============================================================ */
/* custom images dropped in /assets/stickers render as die-cut stickers */
img.sticker{width:var(--sticker-sz,3.3em); height:auto; filter:drop-shadow(0 5px 7px rgba(0,0,0,.22)); -webkit-user-drag:none}
.sticker{cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none}
.sticker:active{cursor:grabbing}

/* tear-off layer: drag a hero sticker out to keep an interactive copy */
.tear-layer{position:absolute; inset:0; z-index:5; pointer-events:none; overflow:hidden}
.tear-layer .drag-item{pointer-events:auto}
.drag-item.torn .dz-del{transition:opacity .15s, transform .15s var(--ease-spring)}
.drag-item.torn:hover .dz-box,
.drag-item.torn.selected .dz-box{opacity:1}
.drag-item.torn:hover .dz-h,
.drag-item.torn:hover .dz-rot,
.drag-item.torn:hover .dz-del,
.drag-item.torn.selected .dz-h,
.drag-item.torn.selected .dz-rot,
.drag-item.torn.selected .dz-del{opacity:1; pointer-events:auto}
/* delete icon, tucked just outside the top-right corner so it clears the scale handle */
.dz-del{position:absolute; right:-9px; top:-9px; transform:translate(115%,-115%); width:21px; height:21px; border-radius:50%;
  border:2px solid #fff; background:var(--tang); color:#fff; font-family:var(--body); font-weight:800; font-size:14px; line-height:1;
  display:grid; place-items:center; cursor:pointer; opacity:0; pointer-events:none; box-shadow:var(--shadow-s); padding:0}
.dz-del:hover{transform:translate(115%,-115%) scale(1.14)}

/* gentle float so torn stickers drift inside the hero / moon curve */
@keyframes tbob{0%,100%{translate:0 0}50%{translate:0 -8px}}
.drag-item.torn{animation:tbob 4.6s ease-in-out infinite}
.drag-item.torn.dragging{animation:none}

/* reverse-footer reveal: the hero stays pinned and the story rises up to cover it */
.hero{z-index:0}
#story{position:relative; z-index:2; background:var(--bg)}
/* moon curve = the story's top edge, doming up over the hero as the story rises */
.story-curve{position:absolute; left:0; right:0; bottom:100%; width:100%; height:clamp(60px,9vw,128px); margin-bottom:-1px; z-index:1; pointer-events:none; display:block}
.story-curve path{fill:var(--bg)}
/* image stickers: clean transparent edges, no white die-cut outline */
img.dz-art{filter:drop-shadow(0 6px 9px rgba(0,0,0,.24))}

@media (prefers-reduced-motion: reduce){
  .drag-item.torn{animation:none}
}

/* ============================================================
   REDESIGN: real brand logo, handwritten notes, and the
   interactive "show, don't tell" benefit demos.
   (Light, rounded, happy. Reuses :root tokens + shape/colour classes.)
   ============================================================ */

/* ---------- brand logo ---------- */
.brand{flex-direction:row;flex-wrap:nowrap;white-space:nowrap;direction:ltr}
.brand>.logo{order:0}
.brand>.brand-txt{order:1}
.brand .logo{width:46px;height:46px;flex:0 0 auto;color:var(--brand);display:block;
  transform-box:fill-box;transform-origin:50% 50%;
  transition:transform .4s var(--ease-spring)}
.brand:hover .logo{transform:rotate(-8deg) scale(1.06)}
.nav-in .brand{gap:12px}
.nav-in .brand .logo{filter:drop-shadow(0 2px 5px rgba(216,67,15,.20))}
footer .brand .logo{width:80px;height:80px}
.final-logo{width:160px;height:160px;color:#fff;margin:0 auto 0;display:block;
  transform-box:fill-box;transform-origin:50% 50%;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.20));opacity:.97}

/* ---------- handwritten margin notes (founder voice, used sparingly) ---------- */
.hand{font-family:"Caveat",cursive;font-weight:600;font-size:clamp(1.3rem,3vw,1.7rem);
  color:var(--brand-ink);line-height:1.1;margin-top:26px;transform:rotate(-1.4deg)}
.hand-inline{font-family:"Caveat",cursive;font-weight:600;color:var(--brand-ink);font-size:1.28em}
.maker-cap{text-align:center;margin-top:26px;color:var(--ink-soft);font-size:1.02rem}

/* shared soft button (secondary) */
.btn-soft{background:linear-gradient(120deg,#ffe6cf,#ffeccb);color:var(--brand-ink);box-shadow:var(--shadow-s)}
.btn-soft:hover{transform:translateY(-3px) scale(1.02);box-shadow:var(--shadow)}

/* a touch more breathing room under the canvas hint */
#play .hand{margin-top:22px}

/* ============================================================
   LAUNCH  -  one folder opens a whole mini-desktop
   ============================================================ */
.launch{max-width:860px;margin:0 auto}
/* a real Mac display (dark bezel + camera), not a browser window */
.ls-screen{position:relative;border-radius:18px;background:#16161c;aspect-ratio:16/10;min-height:340px;
  box-shadow:0 28px 60px rgba(80,50,20,.24), inset 0 0 0 1px rgba(255,255,255,.05)}
.ls-screen::before{content:"";position:absolute;top:3.5px;left:50%;transform:translateX(-50%);
  width:5px;height:5px;border-radius:50%;background:#30303a;box-shadow:0 0 0 1px rgba(255,255,255,.06);z-index:5}
/* mobile: keep the Mac screen LANDSCAPE (the faux windows are laid out for a
   wide desk — a portrait screen stretched them and looked wrong) and shrink it
   so the whole demo lands in one phone screen. (The dock + face sizing live in
   the end-of-file mobile block so they win over the base .ls-dock/.ls-face
   rules that are defined further down.) */
@media (max-width:600px){
  .ls-screen{ aspect-ratio:5/4; min-height:0; border-radius:14px; }
}
/* the display itself, inside the bezel */
.ls-disp{position:absolute;inset:8px;border-radius:11px;overflow:hidden;
  background:
    radial-gradient(120% 90% at 15% 0%, rgba(255,200,61,.20), transparent 55%),
    radial-gradient(120% 90% at 95% 10%, rgba(138,108,255,.16), transparent 55%),
    linear-gradient(170deg,#fff,#fff3e2)}
/* macOS menu bar: apple + menus + clock (replaces the browser traffic lights) */
.ls-bar{position:absolute;top:0;left:0;right:0;height:24px;z-index:3;display:flex;align-items:center;gap:13px;
  padding:0 12px;background:rgba(255,255,255,.5);border-bottom:1px solid rgba(255,255,255,.5);backdrop-filter:blur(8px)}
.ls-apple{width:12px;height:13px;flex:0 0 auto;fill:var(--ink-soft)}
.ls-menus{display:flex;align-items:center;gap:13px;font-family:var(--display);font-weight:500;font-size:.72rem;color:var(--ink-soft)}
.ls-menus b{font-weight:700;color:var(--ink)}
@media (max-width:600px){ .ls-menus span{display:none} }
.ls-time{margin-left:auto;font-family:var(--display);font-weight:500;font-size:.78rem;color:var(--ink-soft)}
.ls-reset{flex:0 0 auto;width:18px;height:18px;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer;
  display:grid;place-items:center;color:var(--ink-faint);transition:color .2s,transform .3s var(--ease-spring)}
.ls-reset svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ls-reset:hover{color:var(--brand-ink);transform:rotate(-45deg)}
.ls-reset:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.ls-reset[hidden]{display:none}
.ls-desk{position:absolute;inset:24px 0 0 0;z-index:1}
.ls-empty{position:absolute;left:0;right:0;bottom:18px;z-index:2;text-align:center;pointer-events:none;
  font-family:var(--display);font-weight:500;color:var(--ink-faint);font-size:.95rem;transition:opacity .3s}
.ls-screen.busy .ls-empty{opacity:0}

/* a faux app window that springs open inside the desktop */
.ls-win{position:absolute;border-radius:13px;background:#fff;border:1px solid var(--line);
  box-shadow:0 18px 40px rgba(120,70,20,.18),0 4px 10px rgba(120,70,20,.10);overflow:hidden;
  display:flex;flex-direction:column;
  opacity:0;transform:translateY(14px) scale(.96);transform-origin:50% 50%;
  transition:opacity .45s var(--ease-spring),transform .5s var(--ease-spring)}
.ls-win.show{opacity:1;transform:translateY(0) scale(1)}
.ls-win .wb{display:flex;align-items:center;gap:5px;padding:7px 10px;background:var(--surface-2);border-bottom:1px solid var(--line)}
.ls-win .wb i{width:7px;height:7px;border-radius:50%;background:#e3d7c2}
.ls-win .wb b{margin-left:6px;font-family:var(--display);font-weight:500;font-size:.74rem;color:var(--ink-soft)}
.ls-win .wbody{display:flex;align-items:flex-start;gap:11px;padding:13px;flex:1;min-height:0}
.ls-win .wico{flex:0 0 auto;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-size:22px;
  box-shadow:var(--shadow-s)}
.ls-win .wmeta{flex:1;min-width:0}
.ls-win .wmeta b{display:block;font-family:var(--display);font-weight:600;font-size:.92rem;color:var(--ink);margin-bottom:7px}
.ls-win .wmeta span{display:block;height:6px;border-radius:4px;background:var(--line);margin-top:5px}
.ls-win .wmeta span:nth-child(2){width:88%}.ls-win .wmeta span:nth-child(3){width:62%}
@media (max-width:600px){ .ls-win .wbody{padding:10px;gap:8px} .ls-win .wico{width:32px;height:32px;font-size:19px} .ls-win .wmeta b{font-size:.82rem} }
/* drag a window by its bar, resize from its corner (kept inside the screen) */
.ls-win .wb{cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.ls-win.dragging{transition:none}
.ls-win.dragging .wb{cursor:grabbing}
.ls-win-rz{position:absolute;right:0;bottom:0;width:18px;height:18px;cursor:nwse-resize;touch-action:none;z-index:2}
.ls-win-rz::after{content:"";position:absolute;right:3px;bottom:3px;width:7px;height:7px;
  border-right:2px solid var(--line-strong);border-bottom:2px solid var(--line-strong)}

/* dock of recipe folders */
.ls-dock{display:flex;justify-content:center;gap:clamp(14px,4vw,40px);margin-top:-36px;flex-wrap:wrap}
.ls-folder{appearance:none;border:0;background:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:9px;
  padding:6px;border-radius:18px;transition:transform .25s var(--ease-spring)}
.ls-folder:hover{transform:translateY(-4px)}
.ls-folder:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
.ls-face{width:64px;height:64px;display:grid;place-items:center;font-size:32px;box-shadow:var(--shadow);
  border:1px solid rgba(255,255,255,.55);transition:transform .3s var(--ease-spring),box-shadow .3s}
.ls-folder:hover .ls-face{transform:rotate(-5deg) scale(1.05)}
.ls-folder.active .ls-face{box-shadow:0 0 0 4px rgba(255,122,77,.28),var(--shadow);transform:translateY(-2px)}
.ls-label{font-family:var(--display);font-weight:500;font-size:.92rem;color:var(--ink-soft)}
.ls-folder.active .ls-label{color:var(--brand-ink)}
.ls-cap{text-align:center;margin-top:10px;min-height:1.5em;font-family:var(--display);font-weight:300;
  font-size:clamp(1.02rem,2.2vw,1.22rem);color:var(--ink)}

/* ============================================================
   MAKE  -  build a folder live (face + shape + motion)
   ============================================================ */
.maker{display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:clamp(26px,5vw,56px);
  align-items:center;max-width:920px;margin:0 auto;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(26px,4vw,44px);box-shadow:var(--shadow)}
@media (max-width:720px){ .maker{grid-template-columns:1fr;text-align:center} }
.maker-stage{display:flex;flex-direction:column;align-items:center;gap:16px}
.folder-face{width:min(220px,62vw);aspect-ratio:1/1;display:grid;place-items:center;
  box-shadow:var(--shadow-l);border:1px solid rgba(255,255,255,.5);
  transition:border-radius .5s var(--ease-spring),background .4s ease,transform .4s var(--ease-spring)}
.folder-face .ff-art{font-size:clamp(64px,16vw,104px);line-height:1;
  filter:drop-shadow(0 6px 9px rgba(0,0,0,.18));transition:transform .4s var(--ease-spring)}
.folder-face.pop .ff-art{animation:facepop .55s var(--ease-spring)}
@keyframes facepop{0%{transform:scale(.5) rotate(-12deg)}60%{transform:scale(1.12) rotate(4deg)}100%{transform:scale(1) rotate(0)}}
.folder-face.has-img{background:none !important;border:0;box-shadow:none}
.folder-face.has-img img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 12px rgba(0,0,0,.2))}
.folder-face.moving{animation:facebob 2.6s ease-in-out infinite}
@keyframes facebob{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-10px) rotate(1.5deg)}}
.maker-tag{font-family:var(--display);font-weight:500;color:var(--ink-soft);font-size:1.02rem}

.maker-controls{display:flex;flex-direction:column;gap:22px}
.ctrl-group{display:flex;flex-direction:column;gap:11px}
.ctrl-label{font-family:var(--display);font-weight:500;font-size:.82rem;letter-spacing:.02em;
  text-transform:lowercase;color:var(--ink-faint)}
.swatches{display:flex;flex-wrap:wrap;gap:11px}
@media (max-width:720px){ .swatches,.shape-row{justify-content:center} }
.swatch{appearance:none;border:0;cursor:pointer;width:54px;height:54px;border-radius:38%;font-size:26px;
  display:grid;place-items:center;box-shadow:var(--shadow-s);border:1px solid rgba(255,255,255,.5);
  transition:transform .22s var(--ease-spring),box-shadow .22s}
.swatch:hover{transform:translateY(-3px) scale(1.06)}
.swatch:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
.swatch.active{box-shadow:0 0 0 3px var(--surface),0 0 0 6px var(--brand);transform:translateY(-2px)}
.shape-row{display:flex;flex-wrap:wrap;gap:10px}
.shape-btn{appearance:none;cursor:pointer;display:inline-flex;align-items:center;gap:9px;
  font-family:var(--display);font-weight:500;font-size:.92rem;color:var(--ink-soft);
  background:var(--surface-2);border:1.5px solid var(--line);border-radius:999px;padding:9px 16px 9px 10px;
  transition:.2s var(--ease-spring)}
.shape-btn i{width:22px;height:22px;background:linear-gradient(135deg,#cdb89a,#b7a079);display:inline-block}
.shape-btn:hover{transform:translateY(-2px);border-color:var(--line-strong)}
.shape-btn:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
.shape-btn.active{color:#fff;background:var(--grad);border-color:transparent;box-shadow:var(--shadow-pop)}
.shape-btn.active i{background:rgba(255,255,255,.92)}
.move-toggle{appearance:none;cursor:pointer;display:inline-flex;align-items:center;gap:10px;width:max-content;
  font-family:var(--display);font-weight:500;font-size:.95rem;color:var(--ink-soft);
  background:var(--surface-2);border:1.5px solid var(--line);border-radius:999px;padding:8px 18px 8px 8px;
  transition:.25s var(--ease-spring)}
.move-toggle .mt-dot{width:30px;height:30px;border-radius:50%;background:#fff;box-shadow:var(--shadow-s);transition:.25s var(--ease-spring)}
.move-toggle .mt-on{display:none}
.move-toggle.on{color:#fff;background:var(--grad);border-color:transparent;box-shadow:var(--shadow-pop)}
.move-toggle.on .mt-dot{background:#fff;transform:scale(1.05)}
.move-toggle.on .mt-on{display:inline}.move-toggle.on .mt-off{display:none}

/* ============================================================
   DO  -  tap a folder, watch the routine run
   ============================================================ */
.routine{display:grid;grid-template-columns:minmax(0,360px) 1fr;gap:clamp(22px,4vw,46px);
  align-items:start;max-width:880px;margin:0 auto}
@media (max-width:720px){ .routine{grid-template-columns:1fr} }
.routine-folders{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.rt-folder{appearance:none;cursor:pointer;display:flex;align-items:center;gap:12px;text-align:left;
  background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r);padding:12px 14px;
  box-shadow:var(--shadow-s);transition:.22s var(--ease-spring)}
.rt-folder:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.rt-folder:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
.rt-folder.active{border-color:transparent;box-shadow:0 0 0 2px var(--brand),var(--shadow)}
.rt-face{flex:0 0 auto;width:44px;height:44px;display:grid;place-items:center;font-size:22px;
  box-shadow:var(--shadow-s);border:1px solid rgba(255,255,255,.5)}
.rt-label{font-family:var(--display);font-weight:500;font-size:.98rem;color:var(--ink)}
.rt-panel{position:relative;min-height:230px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-l);padding:26px 28px;box-shadow:var(--shadow);overflow:hidden;
  transition:background .5s ease,color .5s ease}
.rt-hint{position:absolute;inset:0;display:grid;place-items:center;margin:0;text-align:center;
  font-family:var(--display);font-weight:500;color:var(--ink-faint);transition:opacity .3s}
.rt-run[hidden]+.rt-hint,.rt-panel.running .rt-hint{opacity:0}
.rt-title{font-family:var(--display);font-weight:600;font-size:1.2rem;color:var(--ink);margin-bottom:16px;display:flex;align-items:center;gap:9px}
.rt-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px}
.rt-step{display:flex;align-items:center;gap:12px;font-size:1.02rem;color:var(--ink-soft);
  opacity:.35;transform:translateX(-6px);transition:opacity .35s,transform .35s}
.rt-step .box{flex:0 0 auto;width:24px;height:24px;border-radius:8px;border:2px solid var(--line-strong);
  display:grid;place-items:center;background:#fff;transition:.3s var(--ease-spring)}
.rt-step .box svg{width:15px;height:15px;fill:none;stroke:#fff;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:30;stroke-dashoffset:30;transition:stroke-dashoffset .35s ease .05s}
.rt-step.done{opacity:1;transform:none}
.rt-step.done .box{background:var(--mint);border-color:var(--mint);transform:scale(1.06)}
.rt-step.done .box svg{stroke-dashoffset:0}
.rt-done{display:inline-block;margin-top:18px;font-family:var(--display);font-weight:500;color:var(--mint);
  background:rgba(31,189,138,.12);padding:5px 14px;border-radius:999px;font-size:.9rem;
  opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s}
.rt-done.show{opacity:1;transform:none}
/* movie night dims the room */
.rt-panel.dim{background:linear-gradient(160deg,#241c33,#3a2a4a);color:#fff}
.rt-panel.dim .rt-title{color:#fff}
.rt-panel.dim .rt-step{color:rgba(255,255,255,.72)}
.rt-panel.dim .rt-step .box{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3)}
.rt-panel.dim .rt-step.done .box{background:var(--sun);border-color:var(--sun)}
.rt-panel.dim .rt-step.done .box svg{stroke:#241c33}
.rt-panel.dim .rt-done{color:var(--sun);background:rgba(255,200,61,.16)}

/* ============================================================
   FEATURE marquee  -  clear feature list, moving with scroll
   ============================================================ */
.feature-marquee-sec{position:relative;overflow:hidden;padding:clamp(34px,6vw,68px) 0;background:var(--surface-2)}
.feature-marquee{width:112vw;margin-left:-6vw;overflow:hidden;transform:rotate(-2.2deg);
  background:#fff;border-block:1.5px solid var(--line);box-shadow:0 16px 30px rgba(42,33,28,.08)}
.feature-marquee__track{display:flex;width:max-content;will-change:transform;transform:translate3d(0,0,0)}
.feature-marquee__group{display:flex;align-items:center;gap:clamp(18px,3vw,38px);padding:18px clamp(18px,4vw,44px);
  white-space:nowrap}
.feature-marquee__group span{position:relative;font-family:var(--display);font-weight:500;
  font-size:clamp(1.02rem,2vw,1.46rem);line-height:1;color:var(--ink)}
.feature-marquee__group span::after{content:"";position:absolute;right:calc(clamp(18px,3vw,38px) * -.58);top:50%;
  width:6px;height:6px;border-radius:50%;background:var(--brand);transform:translate(50%,-50%)}
.feature-marquee__group span:nth-child(3n){color:var(--brand-ink)}
.feature-marquee__group span:nth-child(4n){color:var(--mint)}
@media (max-width:640px){
  .feature-marquee-sec{padding:28px 0}
  .feature-marquee{width:124vw;margin-left:-12vw;transform:rotate(-2.8deg)}
  .feature-marquee__group{padding:15px 24px}
}
@media (prefers-reduced-motion: reduce){
  .feature-marquee{transform:none}
  .feature-marquee__track{transform:none !important}
}

/* ============================================================
   SHARE export delight
   ============================================================ */
.export{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:34px;flex-wrap:wrap}
.happy-file{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-weight:500;font-size:.92rem;
  color:var(--brand-ink);background:#fff;border:1.5px dashed var(--line-strong);border-radius:12px;padding:9px 14px;
  box-shadow:var(--shadow-s);opacity:0;transform:translateX(-12px) scale(.9);pointer-events:none}
.happy-file::before{content:"📦"}
.happy-file.fly{animation:filefly 1.1s var(--ease-spring) forwards}
@keyframes filefly{0%{opacity:0;transform:translateX(-12px) scale(.9)}
  35%{opacity:1;transform:translateX(0) scale(1)}
  100%{opacity:0;transform:translateX(60px) translateY(-10px) scale(.95) rotate(6deg)}}

/* ============================================================
   COMPARISON  -  rows rise + checks draw in on scroll
   ============================================================ */
.cmp thead th.you{color:var(--brand-ink);position:relative}
.cmp thead th.you::after{content:"";position:absolute;left:8%;right:8%;bottom:6px;height:3px;border-radius:3px;
  background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease-spring) .2s}
.cmp.in thead th.you::after{transform:scaleX(1)}
.cmp td.hl{vertical-align:middle}
.cmp td.hl .tick{width:22px;height:22px}
.cmp td.hl .tick path{stroke-dasharray:40;stroke-dashoffset:0;transition:stroke-dashoffset .5s ease}
.cmp .no{color:var(--ink-faint);font-size:1.2rem;line-height:1}
/* armed = JS is running; hide rows until revealed. No JS -> stays visible. */
.cmp.armed tbody tr{opacity:0;transform:translateY(12px);transition:opacity .45s var(--ease-spring),transform .45s var(--ease-spring)}
.cmp.armed tbody tr.in{opacity:1;transform:none}
.cmp.armed td.hl .tick path{stroke-dashoffset:40}
.cmp.armed tbody tr.in td.hl .tick path{stroke-dashoffset:0}

/* ============================================================
   REDUCED MOTION  -  calm, still end-states for the demos
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .ls-win{transition:none}
  .folder-face,.folder-face .ff-art{transition:none;animation:none}
  .folder-face.moving{animation:none}
  .rt-step,.rt-step .box,.rt-step .box svg,.rt-done{transition:none}
  .happy-file.fly{animation:none;opacity:1;transform:none}
  .cmp.armed tbody tr{opacity:1;transform:none;transition:none}
  .cmp td.hl .tick path{stroke-dashoffset:0}
  .cmp thead th.you::after{transform:scaleX(1);transition:none}
  .brand .logo,.ls-face,.swatch,.rt-folder{transition:none}
}

/* ============================================================
   SCROLL CHOREOGRAPHY  -  GSAP ScrollTrigger drives the scenes.
   These rules set up 3D depth + pinned-scene sizing. Initial
   hidden states + motion are applied by GSAP in interactions.js,
   so with no JS / no GSAP the page is simply visible and complete.
   ============================================================ */
/* (3D depth is applied per-tween via transformPerspective so it never
   interferes with ScrollTrigger pinning or stacking contexts) */
.scene{position:relative}

@supports (content-visibility:auto){
  #pricing,#compare,#reviews,#faq,.final{content-visibility:auto; contain-intrinsic-size:900px}
  .feature-marquee-sec{content-visibility:auto; contain-intrinsic-size:220px}
}

/* pinned sections must be opaque so earlier/later content doesn't
   show through while they're position:fixed during the pin */
#open,#do,#draw,#share{background-color:var(--bg)}

/* give the marquee scenes room to sit centred while pinned (desktop,
   tall screens only -- short screens/mobile fall back to normal flow) */
@media (min-width:761px) and (min-height:700px){
  .pin-scene{min-height:96vh;display:flex;flex-direction:column;justify-content:center}
  .pin-scene > .wrap{width:100%}
  .pin-scene .ls-screen{max-height:54vh}
  .pin-scene .folder-face{width:min(200px,40vh)}
}

/* hint GPUs for the elements we transform a lot, but only on larger screens */
@media (min-width:761px) and (min-height:700px){
  .ls-screen,.folder-face,.price-card,.ba,.table-wrap,.final-panel,.maker,.routine,.cards-3 .card{will-change:transform}
}

/* comparison ticks: visible by default; GSAP re-hides + draws them (no CSS
   transition here so gsap.set is instant and only GSAP animates the draw) */
.cmp td.hl .tick path{stroke-dashoffset:0;transition:none}

/* a softer in-page anchor offset so pinned sections land cleanly */
html{scroll-padding-top:92px}

/* ============================================================
   PRICING (richer) + coming-soon line
   ============================================================ */
.price-badge{display:inline-block;font-family:var(--display);font-weight:500;font-size:.78rem;letter-spacing:.04em;
  color:var(--brand-ink);background:#fff;border:1.5px solid var(--line-strong);border-radius:999px;padding:5px 14px;
  box-shadow:var(--shadow-s);margin-bottom:14px}
.price-card{max-width:680px}
.price-feats{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:22px;text-align:left}
@media (max-width:680px){ .price-feats{grid-template-columns:1fr;gap:18px} }
.pf h4{font-family:var(--display);font-weight:600;font-size:1rem;color:var(--ink);margin:0 0 10px}
.pf ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.pf li{position:relative;padding-left:20px;font-size:.92rem;color:var(--ink-soft);line-height:1.35}
.pf li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;border-radius:50%;
  background:var(--grad);box-shadow:0 1px 3px rgba(255,122,77,.35)}
.price-soon{margin:0 0 20px;padding:12px 16px;border-radius:var(--r-s);background:var(--surface-2);
  border:1px solid var(--line);font-size:.92rem;color:var(--ink-soft);line-height:1.4}
.soon-line{font-size:.96rem}
.soon-line .soon,.price-soon .soon{margin-right:8px}

/* ============================================================
   CANVAS drag hint  -  a little hand that loops a drag gesture
   until you touch the playground
   ============================================================ */
.drag-ghost{position:absolute;left:50%;top:56%;z-index:6;width:40px;height:40px;font-size:36px;pointer-events:none;
  transform:translate(-50%,-50%);opacity:0;transition:opacity .45s;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.22))}
.drag-ghost span{position:absolute;inset:0;display:grid;place-items:center;line-height:1}
.drag-ghost .dg-grab{opacity:0}
.play-canvas.show-hint .drag-ghost{opacity:1;animation:dragGhostMove 3.2s ease-in-out infinite}
.play-canvas.show-hint .drag-ghost .dg-open{animation:dgOpen 3.2s ease-in-out infinite}
.play-canvas.show-hint .drag-ghost .dg-grab{animation:dgGrab 3.2s ease-in-out infinite}
.play-canvas.touched .drag-ghost{opacity:0 !important}
.play-canvas.touched .drag-ghost,
.play-canvas.touched .drag-ghost span{animation:none}
/* a hand that reaches in, closes to grab, drags, then opens and returns */
@keyframes dragGhostMove{
  0%{transform:translate(-50%,-50%) scale(1)}
  8%{transform:translate(-50%,-44%) scale(1)}
  16%{transform:translate(-50%,-48%) scale(.82)}
  22%{transform:translate(-50%,-50%) scale(.82)}
  50%{transform:translate(calc(-50% + 66px),calc(-50% - 28px)) scale(.82)}
  58%{transform:translate(calc(-50% + 66px),calc(-50% - 28px)) scale(1)}
  90%{transform:translate(-50%,-50%) scale(1)}
  100%{transform:translate(-50%,-50%) scale(1)}
}
@keyframes dgOpen{ 0%,14%{opacity:1} 18%,54%{opacity:0} 60%,100%{opacity:1} }
@keyframes dgGrab{ 0%,14%{opacity:0} 18%,54%{opacity:1} 60%,100%{opacity:0} }
@media (prefers-reduced-motion: reduce){ .play-canvas .drag-ghost{display:none} }

/* ============================================================
   DRAW  -  a real little canvas; your own strokes become a folder.
   A Mac-app "studio" window: tools, a paper, a live folder preview,
   and a palette. Reuses :root tokens + shape/colour classes.
   ============================================================ */
.studio{max-width:980px;margin:0 auto;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-l);box-shadow:var(--shadow-l);overflow:hidden}

/* window title bar (same chrome vocabulary as the launch demo) */
.studio-bar{display:flex;align-items:center;gap:8px;height:38px;padding:0 16px;
  background:rgba(255,255,255,.7);border-bottom:1px solid var(--line);backdrop-filter:blur(8px)}
.studio-bar .d{width:11px;height:11px;border-radius:50%}
.studio-bar .d.r{background:#ff5f57}.studio-bar .d.y{background:#febc2e}.studio-bar .d.g{background:#28c840}
.studio-bar b{margin-left:8px;font-family:var(--display);font-weight:500;font-size:.84rem;color:var(--ink-soft)}

/* tool row */
.studio-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:12px 16px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,var(--surface),var(--surface-2))}
.tool-group{display:flex;align-items:center;gap:8px}
.tool-sep{width:1.5px;height:26px;background:var(--line-strong);border-radius:2px;margin:0 2px}
.tool{appearance:none;cursor:pointer;width:42px;height:42px;flex:0 0 auto;display:grid;place-items:center;
  border-radius:13px;background:#fff;border:1.5px solid var(--line);color:var(--ink-soft);
  box-shadow:var(--shadow-s);transition:.2s var(--ease-spring)}
.tool svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tool:hover{transform:translateY(-2px);color:var(--ink);border-color:var(--line-strong)}
.tool:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
.tool.active{color:#fff;background:var(--grad);border-color:transparent;box-shadow:var(--shadow-pop)}
.tool:active{transform:translateY(0) scale(.96)}

/* canvas + live preview */
.studio-main{display:grid;grid-template-columns:1fr minmax(184px,240px)}
.studio-paper{position:relative;height:clamp(300px,46vh,430px);
  background:
    linear-gradient(var(--line) 1px,transparent 1px) 0 0/100% 28px,
    radial-gradient(120% 120% at 50% 0%,#ffffff,#fffaf3 80%);
  border-right:1px solid var(--line)}
#drawCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;
  touch-action:none;cursor:crosshair;border-radius:0}
.draw-hint{position:absolute;left:0;right:0;bottom:16px;margin:0;text-align:center;pointer-events:none;
  font-family:var(--display);font-weight:500;color:var(--ink-faint);font-size:.92rem;transition:opacity .35s}
.draw-hint.gone{opacity:0}
/* delete-this-stroke button, shown at the corner of a selected stroke (move tool) */
.draw-del{position:absolute;z-index:6;width:24px;height:24px;padding:0;border-radius:50%;border:2px solid #fff;
  background:var(--tang);color:#fff;font-family:var(--body);font-weight:800;font-size:15px;line-height:1;
  display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow-s);
  transform:translate(-50%,-50%);transition:transform .15s var(--ease-spring)}
.draw-del:hover{transform:translate(-50%,-50%) scale(1.14)}
.draw-del:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
.draw-del[hidden]{display:none}

.studio-side{display:flex;flex-direction:column;align-items:center;gap:13px;
  padding:22px 20px;background:var(--surface-2)}
.side-label{font-family:var(--display);font-weight:500;font-size:.8rem;letter-spacing:.02em;
  text-transform:lowercase;color:var(--ink-faint)}
/* live folder preview — DEFAULT is die-cut: the folder simply IS your drawing,
   no box forced on it (a folder can be any shape at all). A shape + its own
   background colour are opt-in only. */
.draw-folder{position:relative;width:min(166px,46vw);aspect-ratio:1/1;
  transition:border-radius .45s var(--ease-spring),transform .4s var(--ease-spring),box-shadow .3s}
.draw-folder #drawPreview{position:absolute;inset:0;width:100%;height:100%;display:block}
.draw-folder.shaped{overflow:hidden;border:1px solid rgba(255,255,255,.55);box-shadow:var(--shadow-l)}
.draw-folder.pop{animation:facepop .55s var(--ease-spring)}

/* shape chips ("free" = no shape, the default) */
.shape-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.shape-chip{appearance:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  min-width:38px;height:34px;padding:0 11px;font-family:var(--display);font-weight:500;font-size:.84rem;
  color:var(--ink-soft);background:var(--surface);border:1.5px solid var(--line);border-radius:11px;
  transition:.2s var(--ease-spring)}
.shape-chip i{width:17px;height:17px;background:linear-gradient(135deg,#cdb89a,#b7a079);display:inline-block}
.shape-chip:hover{transform:translateY(-2px);border-color:var(--line-strong)}
.shape-chip:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
.shape-chip.active{color:#fff;background:var(--grad);border-color:transparent;box-shadow:var(--shadow-pop)}
.shape-chip.active i{background:rgba(255,255,255,.92)}

/* background-colour row (only shown once a shape is chosen) */
.bg-row{display:flex;gap:9px;flex-wrap:wrap;justify-content:center}
.bg-row[hidden]{display:none}
.bg-row .ink{width:26px;height:26px}

.studio-side .btn{margin-top:2px}
.draw-saved{font-family:var(--display);font-weight:500;color:var(--mint); display:none;
  background:rgba(31,189,138,.12);padding:5px 14px;border-radius:999px;font-size:.86rem;
  opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s;pointer-events:none}
.draw-saved.show{display:inline-block;opacity:1;transform:none}

/* palette: colours + brush size */
/* colours + brush size now live in the top tool bar (the old bottom palette bar
   is gone). On desktop they sit inline after the tools; on phones the tool bar
   wraps so they form a tidy second row (see the mobile block below). */
.studio-palette{display:flex;align-items:center;gap:12px;flex-wrap:nowrap;flex:1 1 auto}
.studio-tools .ink{width:28px;height:28px}
.studio-tools .ink-row{gap:8px;flex-wrap:nowrap}
.studio-tools .brush-ctrl{flex:1 1 140px;min-width:120px;max-width:260px}
.studio-tools .brush-label{display:none}     /* the slider + growing bead already show the size */
.ink-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ink{appearance:none;cursor:pointer;width:30px;height:30px;border-radius:50%;padding:0;
  background:var(--ink-c,#2b2118);border:2px solid #fff;
  box-shadow:0 0 0 1.5px var(--line-strong),var(--shadow-s);transition:.2s var(--ease-spring)}
.ink:hover{transform:translateY(-2px) scale(1.08)}
.ink:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
.ink.active{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--brand),var(--shadow-s);transform:translateY(-2px) scale(1.08)}
.ink-rainbow{background:conic-gradient(from 0deg,#ff7a4d,#ffc83d,#1fbd8a,#3aa0ff,#8a6cff,#ff5d8f,#ff7a4d)}
/* brush size: a clear label + a bead on the track that grows as you slide */
.brush-ctrl{display:flex;align-items:center;gap:12px;flex:1 1 240px;max-width:340px;min-width:210px}
.brush-label{font-family:var(--display);font-weight:500;font-size:.82rem;color:var(--ink-faint);white-space:nowrap}
.brush-track{position:relative;flex:1 1 auto;height:34px;display:flex;align-items:center}
.brush-track::before{content:"";position:absolute;left:0;right:0;top:50%;height:6px;transform:translateY(-50%);
  border-radius:999px;background:linear-gradient(90deg,#ff7a4d,#ffc247);z-index:0}
.brush-bead{position:absolute;z-index:1;top:50%;left:0;width:8px;height:8px;transform:translate(-50%,-50%);
  border-radius:50%;background:var(--ink);border:2px solid #fff;
  box-shadow:0 0 0 1.5px var(--line-strong),var(--shadow-s);pointer-events:none;transition:width .1s,height .1s}
.brush-track input[type=range]{position:relative;z-index:2;-webkit-appearance:none;appearance:none;
  width:100%;height:34px;margin:0;background:transparent;cursor:pointer}
.brush-track input[type=range]::-webkit-slider-runnable-track{height:34px;background:transparent}
.brush-track input[type=range]::-moz-range-track{height:34px;background:transparent}
.brush-track input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:34px;height:34px;border:0;background:transparent;cursor:grab}
.brush-track input[type=range]::-moz-range-thumb{width:34px;height:34px;border:0;background:transparent;cursor:grab}
.brush-track:focus-within .brush-bead{box-shadow:0 0 0 3px var(--amber)}

/* ---- DRAW studio on phones/tablets — a purpose-built one-screen layout:
   row 1 every tool across the width, row 2 colours + brush size, then the
   drawing board with the live preview pinned in its bottom-right corner (so it
   costs no height and the "Make it my folder" tile pops straight out of it),
   then the shape chips, then the make button. The preview node is relocated
   into the canvas by demos.js (placeFolder); desktop keeps it in the side. ---- */
@media (max-width:720px){
  .studio-bar{display:none}                              /* drop the faux title bar to reclaim height */
  .studio{display:flex;flex-direction:column}

  /* row 1: every tool icon across the width; the colour+brush palette (which now
     lives INSIDE this bar) wraps to a full-width row 2 underneath the tools */
  .studio-tools{order:1;flex-wrap:wrap;justify-content:center;gap:6px;padding:9px 12px}
  .studio-tools .tool-sep{display:none}
  .tool-group{display:contents}                          /* promote the 9 tools to direct flex items */
  .tool{flex:1 1 0;min-width:0;max-width:44px;width:auto;height:34px}
  .tool svg{width:19px;height:19px}

  /* row 2: all colours + the brush size selector together, forced full-width */
  .studio-tools .studio-palette{flex:1 0 100%;flex-wrap:nowrap;justify-content:space-between;gap:10px;margin-top:5px}
  .studio-tools .ink-row{flex-wrap:nowrap;gap:5px}
  .studio-tools .ink{width:22px;height:22px}
  .brush-label{display:none}
  .studio-tools .brush-ctrl{flex:1 1 auto;min-width:84px;max-width:none;gap:6px}

  /* row 3: the drawing board, with the tiny live preview in its bottom corner */
  .studio-main{order:2;grid-template-columns:1fr}
  .studio-paper{position:relative;height:clamp(228px,36vh,320px);border-right:0;border-bottom:1px solid var(--line)}
  .studio-paper .draw-folder{position:absolute;right:9px;bottom:9px;top:auto;width:58px;z-index:6;
    background:rgba(255,255,255,.5);border:1.5px solid var(--line-strong);border-radius:12px;
    box-shadow:var(--shadow-s);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);pointer-events:none}

  /* rows 4 + 5: the shape chips in a row, then the full-width make button */
  .studio-side{flex-direction:column;align-items:stretch;gap:12px;padding:14px}
  .studio-side .side-label{display:none}
  .studio-side .shape-row{justify-content:center}
  .studio-side .btn{width:100%;margin-top:0}
}
@media (prefers-reduced-motion: reduce){
  .tool,.ink,.draw-folder,.draw-saved,.brush-bead{transition:none}
  .draw-folder.pop{animation:none}
}

/* ============================================================
   SHARE  -  "pack & send": your desktop folds into one file that
   flies to a friend / a buyer / from a maker to you. Engaging,
   click-to-watch, in the same voice as the scenes above.
   ============================================================ */
.packer{max-width:1180px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:clamp(12px,2.4vw,12px)}
.pk-modes{display:inline-flex;gap:8px;padding:6px;background:var(--surface);border:1.5px solid var(--line);margin-bottom:8px;
  border-radius:999px;box-shadow:var(--shadow-s);flex-wrap:wrap;justify-content:center}
.pk-mode{appearance:none;cursor:pointer;font-family:var(--display);font-weight:500;font-size:.96rem;
  color:var(--ink-soft);background:transparent;border:0;border-radius:999px;padding:9px 18px;transition:.2s var(--ease-spring)}
.pk-mode:hover{color:var(--ink)}
.pk-mode:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
.pk-mode.active{color:#fff;background:var(--grad);box-shadow:var(--shadow-pop)}

.pk-stage{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end;
  gap:clamp(14px,3vw,42px);width:min(100%,1120px);isolation:isolate}

/* ---- real Mac devices: a MacBook (you) and an iMac (them) ---- */
.mac{position:relative;display:flex;flex-direction:column;align-items:center;width:100%;padding-bottom:calc(11px + 1.15em);
  box-sizing:border-box;--bezel:#16161c}
.mac-book{grid-column:1;justify-self:end;max-width:clamp(280px,29vw,405px)}
.mac-imac{grid-column:2;justify-self:start;max-width:clamp(360px,38vw,540px)}
.mac-screen{position:relative;width:100%;aspect-ratio:16/10;background:var(--bezel);border-radius:13px;padding:6px;
  box-shadow:0 16px 32px rgba(80,50,20,.22), inset 0 0 0 1px rgba(255,255,255,.05)}
.mac-disp{position:absolute;inset:6px;border-radius:7px;overflow:hidden;
  background:radial-gradient(120% 100% at 18% 0%,rgba(255,255,255,.55),transparent 58%),linear-gradient(160deg,#bfe0ff,#d9c6ff 55%,#ffd9ec)}
.mac-imac .mac-disp{background:radial-gradient(120% 100% at 18% 0%,rgba(255,255,255,.55),transparent 58%),linear-gradient(160deg,#ffe1bd,#ffd0d8 55%,#ffe9a8)}
/* MacBook: camera dot + a silver base bar with a trackpad notch */
.mac-book .mac-screen::before{content:"";position:absolute;top:2.5px;left:50%;transform:translateX(-50%);
  width:4px;height:4px;border-radius:50%;background:#3a3a42;box-shadow:0 0 0 1px rgba(255,255,255,.06)}
.mac-base{position:relative;width:116%;height:clamp(13px,1.3vw,17px);margin-top:-1px;border-radius:2px 2px 10px 10px;
  background:linear-gradient(180deg,#eef0f4,#c4c8d1 70%,#b0b4be);
  box-shadow:0 9px 14px rgba(80,50,20,.18), inset 0 1px 0 rgba(255,255,255,.85)}
.mac-book .mac-base{margin-bottom:6px}
.mac-base::after{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:24%;height:5px;border-radius:0 0 7px 7px;background:linear-gradient(180deg,#b0b4be,#ced1d9)}
/* iMac: screen + an aluminium chin (with the apple) + a thin neck + a flat foot */
.mac-imac .mac-screen{border-radius:13px 13px 10px 10px}
.mac-chin{position:relative;width:100%;height:clamp(23px,2.2vw,32px);margin-top:-1px;border-radius:0 0 10px 10px;display:grid;place-items:center;
  background:linear-gradient(180deg,#fbfbfd,#dadde3 60%,#c8cbd3);
  box-shadow:0 7px 12px rgba(80,50,20,.14), inset 0 1px 0 rgba(255,255,255,.9)}
.mac-chin::after{content:"";width:11px;height:13px;background:rgba(120,124,135,.72);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 26'%3E%3Cpath d='M17.5 13.9c0-3.1 2.4-4.5 2.5-4.6-1.4-2-3.5-2.3-4.2-2.3-1.8-.2-3.5 1-4.4 1s-2.3-1-3.8-1c-2 0-3.8 1.2-4.8 3-2 3.5-.5 8.8 1.5 11.6 1 1.4 2.1 3 3.6 2.9 1.4-.1 2-.9 3.7-.9s2.2.9 3.8.9 2.5-1.5 3.5-2.9c1.1-1.6 1.5-3.1 1.6-3.2-.1 0-3-1.2-3-4.5z'/%3E%3Cpath d='M14.6 5c.8-1 1.3-2.3 1.2-3.6-1.1 0-2.5.8-3.3 1.7-.7.8-1.4 2.2-1.2 3.4 1.2.1 2.5-.6 3.3-1.5z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 26'%3E%3Cpath d='M17.5 13.9c0-3.1 2.4-4.5 2.5-4.6-1.4-2-3.5-2.3-4.2-2.3-1.8-.2-3.5 1-4.4 1s-2.3-1-3.8-1c-2 0-3.8 1.2-4.8 3-2 3.5-.5 8.8 1.5 11.6 1 1.4 2.1 3 3.6 2.9 1.4-.1 2-.9 3.7-.9s2.2.9 3.8.9 2.5-1.5 3.5-2.9c1.1-1.6 1.5-3.1 1.6-3.2-.1 0-3-1.2-3-4.5z'/%3E%3Cpath d='M14.6 5c.8-1 1.3-2.3 1.2-3.6-1.1 0-2.5.8-3.3 1.7-.7.8-1.4 2.2-1.2 3.4 1.2.1 2.5-.6 3.3-1.5z'/%3E%3C/svg%3E") center/contain no-repeat}
.mac-neck{width:16%;height:clamp(14px,1.4vw,19px);background:linear-gradient(90deg,#bcc0c8,#dadde3 50%,#bcc0c8)}
.mac-foot{width:44%;height:clamp(8px,.9vw,12px);border-radius:0 0 8px 8px;background:linear-gradient(180deg,#cfd2d9,#aeb2bc);
  box-shadow:0 8px 12px rgba(80,50,20,.16)}
.mac-label{position:absolute;left:0;right:0;bottom:0;margin:0;font-family:var(--display);font-weight:500;
  font-size:.82rem;line-height:1.15;color:var(--ink-soft);text-align:center}

.pk-grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);gap:7px;
  place-content:center;padding:11px 13px}
.pk-grid .dt{width:100%;aspect-ratio:1/1;font-size:clamp(17px,2.7vw,30px);box-shadow:0 2px 5px rgba(0,0,0,.18);will-change:transform,opacity}
.pk-tag{position:absolute;right:10px;bottom:10px;z-index:4;font-family:var(--display);font-weight:700;
  font-size:clamp(1.5rem,3vw,2rem);line-height:1;color:#fff;background:var(--mint);padding:8px 15px;border-radius:999px;
  box-shadow:0 12px 24px rgba(31,189,138,.28), var(--shadow-s);
  opacity:0;transform:scale(.6) translateY(6px);transition:.4s var(--ease-spring)}
.pk-tag.show{opacity:1;transform:none}
.pk-tag[hidden]{display:none}

.pk-route{position:absolute;inset:0;z-index:2;width:100%;height:100%;overflow:visible;pointer-events:none}
.pk-route path{fill:none;stroke:var(--brand);stroke-width:3.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;
  opacity:0;filter:drop-shadow(0 4px 6px rgba(255,122,77,.22))}
.pk-route.is-drawing path{animation:pkRouteDraw 1.05s ease forwards}
@keyframes pkRouteDraw{0%{opacity:0;stroke-dashoffset:1}18%{opacity:.9}82%{opacity:.9}100%{opacity:0;stroke-dashoffset:0}}
.pk-wire{position:absolute;inset:0;z-index:4;display:block;color:var(--ink-faint);pointer-events:none}
.pk-arrow{display:none}
.pk-wire .happy-file{position:absolute;left:50%;top:50%;z-index:4;opacity:0;transform:translate(-50%,-50%) scale(.62);
  pointer-events:none;animation:none;white-space:nowrap}
.pk-wire .happy-file.in{opacity:1;transition:opacity .22s ease}
.pk-wire .happy-file.fly-x{opacity:0}

.pk-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.pk-cap,.pk-status{text-align:center;font-family:var(--display);font-weight:300;
  font-size:clamp(1rem,2.2vw,1.2rem);color:var(--ink);max-width:48ch}
.pk-cap a{color:var(--brand-ink);text-decoration:none;font-weight:500;border-bottom:2px solid var(--amber)}
.pk-ready{display:block}
.pk-status{min-height:1.35em;margin:0;color:var(--ink-soft);font-size:clamp(.96rem,1.9vw,1.14rem)}

@media (max-width:640px){
  .packer{gap:14px}
  .pk-stage{grid-template-columns:1fr;gap:10px;justify-items:center;width:min(100%,390px)}
  .mac,.mac-book,.mac-imac{grid-column:1;justify-self:center;width:100%}
  .mac-book{max-width:300px}
  .mac-imac{max-width:360px}
  .pk-grid{gap:6px;padding:10px 12px}
  .pk-cap{font-size:.98rem}
}
@media (prefers-reduced-motion: reduce){
  .pk-grid .dt,.pk-tag,.pk-wire .happy-file{transition:none !important}
  .pk-route{display:none}
}

/* ============================================================
   MOBILE ONE-SCREEN FIT — the interactive demo sections are the
   heart of the page, so on phones each should be *experienceable*
   in roughly one screen: tighter section padding + headings, and
   compacted controls, so the payload (the running automation, the
   make button, the open windows) is visible without scrolling.
   Desktop is untouched (these only apply at <=600px).
   ============================================================ */
/* #do heading: was an inline 60px gap that pushed the routine panel off-screen;
   now 60px on desktop, tight on phones (the id rule below wins on mobile). */
.sec-head--do{margin-bottom:60px}
@media (max-width:600px){
  /* trim the generous section padding so a demo + its heading fit one screen */
  #open,#do,#draw{padding-top:clamp(30px,7vw,120px);padding-bottom:clamp(26px,6vw,120px)}
  #open .sec-head,#do .sec-head,#draw .sec-head{margin-bottom:clamp(16px,3.2vw,26px)}

  /* #do: smaller routine folders so the running-automation card is in view */
  .routine{gap:16px}
  .routine-folders{gap:10px}
  .rt-folder{padding:9px 11px;gap:9px}
  .rt-face{width:38px;height:38px;font-size:19px}
  .rt-label{font-size:.92rem}
  .rt-panel{min-height:188px;padding:20px}

  /* #open dock: sit the folder row clearly below the Mac (the base .ls-dock
     tucks it -36px under the screen, which hid it on phones) and shrink the
     folder faces so all three fit comfortably. Placed here so it beats the
     base rules defined earlier in the file. */
  .ls-dock{margin-top:12px;gap:clamp(16px,7vw,40px)}
  .ls-face{width:52px;height:52px;font-size:25px}
}