:root{
  --bg:#f7f2eb; --bg-2:#efe7dc; --card:#fffdfa; --ink:#3a2e29; --ink-d:#241c18; --muted:#7a6a60;
  --rose:#b98474; --rose-d:#9c6a5b; --rose-l:#ecd9d1; --line:#e6dbcf; --olive:#8b977a; --err:#c0533f;
  --serif:'Cormorant Garamond',serif; --sans:'Plus Jakarta Sans',sans-serif;
  /* aliases used by the demo */
  --terra:var(--rose); --terra-s:var(--rose-d); --cream:var(--bg);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);overflow-x:hidden}
a{color:var(--rose-d)}
h1,h2,p{margin:0}
input,button,textarea{font-family:inherit}
button{cursor:pointer}
em{font-style:italic;color:var(--rose)}
img{max-width:100%}

.eyebrow{display:inline-block;font:700 11px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--rose)}
.eyebrow.light{color:#e8c4b8}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;padding:15px 26px;font:700 14px var(--sans);text-decoration:none;border:none;transition:transform .15s,background .15s}
.btn:hover{transform:translateY(-1px)}
.btn-dark{background:var(--ink-d);color:#fff}
.btn-dark:hover{background:var(--rose-d);color:#fff}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--ink);color:var(--ink)}
.btn-rose{background:var(--rose);color:#fff}
.btn-rose:hover{background:var(--rose-d);color:#fff}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}.strip-track{animation:none!important}}

/* nav: floating pill */
.nav{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:40;width:min(1100px,calc(100% - 24px));display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 9px 9px 18px;border-radius:999px;background:rgba(255,253,250,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 10px 30px rgba(60,40,30,.08)}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.logo-mark{display:block;flex-shrink:0}
/* wordmark: wide-tracked serif caps, the I of DETIK is the hourglass */
.wordmark{display:inline-flex;align-items:center;font:400 17px/1 'Marcellus',serif;letter-spacing:.32em;color:#6a4b44;white-space:nowrap;margin-right:-.32em}
.wordmark .hg{width:.62em;height:1em;margin:0 .32em 0 0;display:block;color:#6a4b44}
.foot-logo{display:flex;align-items:center;gap:10px}
.foot-logo .wordmark{font-size:15px}
.nav-links{display:flex;gap:26px}
.nav-links a{font:600 13.5px var(--sans);color:var(--ink);text-decoration:none;opacity:.8}
.nav-links a:hover{opacity:1;color:var(--rose-d)}
.nav-cta{background:var(--ink-d);color:#fff;text-decoration:none;font:700 13px var(--sans);padding:11px 18px;border-radius:999px}
.nav-cta:hover{background:var(--rose-d);color:#fff}
@media (max-width:760px){.nav-links{display:none}.nav .wordmark{font-size:14px;letter-spacing:.24em}}

/* hero */
.hero{min-height:100vh;padding:150px 0 40px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:56px;text-align:center;background:radial-gradient(1200px 520px at 50% 0%,#fbe9e2 0%,rgba(251,233,226,0) 70%),var(--bg)}
.hero-copy{max-width:760px;padding:0 20px;display:flex;flex-direction:column;align-items:center;gap:20px}
h1{font:400 clamp(54px,8vw,104px)/.95 var(--serif);letter-spacing:-.015em}
h1 em{font-weight:400}
.lead{font:400 clamp(16px,1.6vw,18px)/1.65 var(--sans);color:var(--muted);max-width:560px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.ticks{list-style:none;margin:0;padding:0;display:flex;gap:22px;flex-wrap:wrap;justify-content:center;font:600 12.5px var(--sans);color:var(--muted)}
.ticks li::before{content:"✓ ";color:var(--rose)}
.strip{width:100%;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.strip-track{display:flex;gap:18px;width:max-content;animation:drift 60s linear infinite;padding:10px 0 20px}
.strip-track img{width:200px;height:290px;object-fit:cover;border-radius:120px 120px 18px 18px;box-shadow:0 18px 40px rgba(60,40,30,.14)}
.strip-track img:nth-child(even){margin-top:34px;border-radius:18px}
@keyframes drift{to{transform:translateX(-50%)}}
@media (max-width:600px){.strip-track img{width:140px;height:210px}.hero{padding-top:120px;gap:40px}}

/* sections */
.sec{padding:clamp(80px,10vw,130px) clamp(20px,4vw,48px)}
.sec-head{max-width:720px;margin:0 auto 56px;text-align:center;display:flex;flex-direction:column;gap:14px;align-items:center}
.sec-head h2{font:400 clamp(38px,5vw,60px)/1.02 var(--serif);letter-spacing:-.01em}
.sec-head p{font:400 16px/1.6 var(--sans);color:var(--muted);max-width:520px}

/* meaning */
.meaning{padding:clamp(80px,10vw,120px) 20px;background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.meaning-in{max-width:640px;margin:0 auto;text-align:center;display:flex;flex-direction:column;gap:10px;align-items:center}
.word{font:italic 400 clamp(64px,9vw,104px)/.9 var(--serif);color:var(--rose)}
.pron{font:600 12px var(--sans);letter-spacing:.14em;color:var(--muted)}
.def{font:italic 400 clamp(22px,2.6vw,28px)/1.35 var(--serif);margin:10px 0 22px}
.prose{display:flex;flex-direction:column;gap:16px;font:400 16.5px/1.8 var(--sans);color:var(--muted)}
.prose b{color:var(--ink);font-weight:600}

/* how it works */
.how-grid{max-width:1040px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,90px);align-items:center}
.how-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.how-steps li{display:flex;gap:18px;padding:20px 22px;border-radius:20px;cursor:pointer;transition:background .3s,box-shadow .3s;opacity:.55}
.how-steps li.on{background:var(--card);box-shadow:0 12px 30px rgba(60,40,30,.08);opacity:1}
.how-steps .n{font:italic 400 30px/1 var(--serif);color:var(--rose);min-width:38px}
.how-steps b{display:block;font:700 17px var(--sans);margin-bottom:5px}
.how-steps p{font:400 14.5px/1.6 var(--sans);color:var(--muted)}
.how-phone{display:flex;flex-direction:column;align-items:center;gap:18px}
.mini-phone{width:270px;height:540px;border-radius:44px;background:var(--ink-d);padding:10px;box-shadow:0 30px 60px rgba(60,40,30,.22)}
.mini-screen{position:relative;height:100%;border-radius:35px;overflow:hidden;background:#fbf7f1}
.ms{position:absolute;inset:0;padding:46px 18px 22px;display:flex;flex-direction:column;gap:12px;opacity:0;transition:opacity .6s ease}
.ms.on{opacity:1}
.ms-0{align-items:center;justify-content:center;background:linear-gradient(180deg,#fbe9e2,#fbf7f1)}
.qr-card{background:#fff;border-radius:22px;padding:24px 20px;display:flex;flex-direction:column;align-items:center;gap:8px;box-shadow:0 14px 30px rgba(60,40,30,.1)}
.qr-ey{font:700 9px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.qr-names{font:italic 400 26px var(--serif)}
.qr{width:130px;height:130px;margin:6px 0;display:block}
.qr-hint{font:500 11px var(--sans);color:var(--muted)}
.ms-post{position:relative;margin:8px auto 0;background:#fff;padding:7px 7px 24px;box-shadow:0 10px 24px rgba(0,0,0,.12);transform:rotate(-2deg);line-height:0}
.ms-post img{width:170px;height:260px;object-fit:cover;filter:contrast(1.12) saturate(1.35) brightness(1.06)}
.stamp{position:absolute;right:14px;bottom:32px;font:700 11px/1 'Space Mono',monospace;color:#ff8a3d;text-shadow:0 0 5px rgba(255,120,40,.7)}
.ms-chips{display:flex;gap:6px;justify-content:center;margin-top:auto}
.ms-chips span{font:700 10px var(--sans);padding:6px 10px;border-radius:99px;box-shadow:inset 0 0 0 1px var(--line)}
.ms-chips span.on{background:var(--ink-d);color:#fff;box-shadow:none}
.ms-btn{background:var(--rose);color:#fff;border-radius:99px;text-align:center;padding:12px;font:700 13px var(--sans)}
.ms-head{font:italic 400 24px var(--serif);text-align:center}
.ms-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.ms-grid img{width:100%;height:118px;object-fit:cover;border-radius:10px}
.ms-grid img:first-child{animation:rdin .6s ease-out}
.ms-live{align-self:center;margin-top:auto;font:700 11px var(--sans);color:var(--rose-d);background:var(--rose-l);border-radius:99px;padding:7px 12px}
.how-dots{display:flex;gap:8px}
.how-dots button{width:8px;height:8px;border-radius:99px;border:none;background:var(--line);padding:0;transition:width .3s,background .3s}
.how-dots button.on{width:26px;background:var(--rose)}
@media (max-width:820px){.how-grid{grid-template-columns:1fr}.how-phone{order:-1}}

/* moments */
.moments{background:var(--card);border-top:1px solid var(--line)}
.moment-row{max-width:1160px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.moment{margin:0;position:relative;border-radius:22px;overflow:hidden;aspect-ratio:3/4.2;box-shadow:0 14px 34px rgba(60,40,30,.1)}
.moment img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s ease}
.moment:hover img{transform:scale(1.04)}
.moment figcaption{position:absolute;inset:auto 0 0;padding:60px 18px 18px;background:linear-gradient(180deg,transparent,rgba(30,20,16,.72));color:#fff;display:flex;flex-direction:column;gap:3px}
.moment b{font:italic 400 26px/1 var(--serif)}
.moment figcaption span{font:500 12.5px/1.45 var(--sans);opacity:.9}
@media (max-width:900px){.moment-row{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.moment-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -20px;padding:0 20px 6px}.moment{flex:0 0 72%;scroll-snap-align:center}}

/* demo section */
.demo{background:linear-gradient(180deg,var(--bg) 0%,#f3e6df 100%)}
.demo-grid{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:1fr auto;gap:clamp(30px,6vw,80px);align-items:center}
.demo-l{display:flex;flex-direction:column;gap:18px;max-width:440px}
.lbl{font:700 12px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pk-pick{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pk-btn{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;border:none;background:rgba(255,255,255,.55);color:var(--ink);border-radius:16px;padding:11px 13px;box-shadow:inset 0 0 0 1.5px var(--line)}
.pk-btn.on{background:#fff;box-shadow:inset 0 0 0 2px var(--rose),0 8px 20px rgba(60,40,30,.08)}
.pk-btn b{font:700 13px var(--sans)}
.pk-btn span{font:italic 500 22px/1 var(--serif);color:var(--rose-d)}
.pk-sum{font:500 13px/1.5 var(--sans);color:var(--muted);margin-top:-4px}
.pk-sum b{color:var(--ink)}
.guide{list-style:none;margin:0;padding:6px 20px;background:#fff;border-radius:20px;box-shadow:0 10px 28px rgba(60,40,30,.06);display:flex;flex-direction:column}
.guide li{display:flex;gap:12px;align-items:center;padding:12px 0;font:500 14px/1.35 var(--sans);color:var(--muted);opacity:.55}
.guide li+li{border-top:1px solid var(--line)}
.guide li.now{opacity:1;color:var(--ink);font-weight:700}
.guide li.done{opacity:.85}
.guide .gn{width:26px;height:26px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font:700 12px var(--sans);box-shadow:inset 0 0 0 1.5px var(--line)}
.guide li.now .gn{background:var(--rose);color:#fff;box-shadow:none}
.guide li.done .gn{background:var(--olive);color:#fff;box-shadow:none}
.guide-done{font:italic 500 21px/1.3 var(--serif);color:var(--rose-d)}
.demo-cta{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.linkbtn{background:none;border:none;padding:0;color:var(--rose-d);font:700 14px var(--sans);text-decoration:underline}
.phone-wrap{justify-self:center;position:relative}
.phone{width:316px;height:650px;background:var(--ink-d);border-radius:52px;padding:11px;box-shadow:0 34px 70px rgba(60,40,30,.25)}
.screen{height:100%;border-radius:42px;overflow:hidden;position:relative;display:flex;flex-direction:column}
.sbody{height:100%}
.scr{height:100%;display:flex;flex-direction:column;box-sizing:border-box;position:relative}
.screen button{cursor:pointer}
.screen input{outline:none}
.scroller{flex:1;overflow-y:auto;scrollbar-width:none}
.scroller::-webkit-scrollbar{display:none}
@media (max-width:820px){.demo-grid{grid-template-columns:1fr;justify-items:center}.demo-l{order:2;max-width:520px;width:100%}}
@media (max-width:360px){.phone-wrap{zoom:.9}}

/* demo phone pieces */
.toast{position:absolute;top:44px;left:50%;transform:translateX(-50%);animation:rdpop .3s ease-out;background:var(--ink-d);color:#fff;border-radius:12px;padding:10px 14px;font:600 12px var(--sans);white-space:nowrap;box-shadow:0 10px 24px rgba(0,0,0,.25);z-index:6}
.flash{position:absolute;inset:0;background:#fff;z-index:7;animation:rdflash .45s ease-out forwards;pointer-events:none}
.grain{position:absolute;inset:0;pointer-events:none;opacity:.22;mix-blend-mode:overlay;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='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E")}
.nudge{animation:rdnudge 1.6s ease-out infinite}
.upl{position:absolute;inset:0;background:rgba(255,255,255,.35);pointer-events:none}
.upl i{position:absolute;left:0;bottom:0;height:4px;background:var(--rose);animation:rdload 1.4s linear forwards}
.looks{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:4px 2px 2px;flex-shrink:0}
.looks::-webkit-scrollbar{display:none}
.fab{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:3;border:none;border-radius:999px;padding:14px 22px;font:700 14px var(--sans);display:flex;align-items:center;gap:8px;white-space:nowrap;box-shadow:0 10px 24px rgba(0,0,0,.22)}
.fab b{font-size:18px;line-height:1}
.lb{position:absolute;inset:0;z-index:5;background:rgba(14,12,10,.94);color:#fff;display:flex;flex-direction:column;animation:rdfade .2s ease-out}
.lock{position:absolute;inset:0;background:rgba(255,255,255,.55);display:flex;align-items:center;justify-content:center;font-size:14px}
.pop-in{animation:rdin .35s ease-out}
@keyframes rdpop{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes rdflash{from{opacity:1}to{opacity:0}}
@keyframes rdfade{from{opacity:0}to{opacity:1}}
@keyframes rdup{from{transform:translateY(40px)}to{transform:none}}
@keyframes rdin{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
@keyframes rdload{from{width:0}to{width:100%}}
@keyframes rdnudge{0%{outline:3px solid rgba(185,132,116,.9);outline-offset:0}100%{outline:3px solid rgba(185,132,116,0);outline-offset:9px}}

/* features */
.feat-grid{max-width:1040px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.feat{background:var(--card);border-radius:22px;padding:26px;display:flex;flex-direction:column;gap:8px;box-shadow:inset 0 0 0 1px var(--line)}
.feat .ic{width:42px;height:42px;border-radius:14px;background:var(--rose-l);color:var(--rose-d);display:flex;align-items:center;justify-content:center;font-size:19px;margin-bottom:6px}
.feat b{font:700 16px var(--sans)}
.feat p{font:400 14px/1.6 var(--sans);color:var(--muted)}
@media (max-width:820px){.feat-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.feat-grid{grid-template-columns:1fr}}

/* pricing */
.pricing{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pkg-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.pkg{position:relative;background:var(--bg);border-radius:26px;padding:32px 28px;display:flex;flex-direction:column;gap:18px;box-shadow:inset 0 0 0 1px var(--line)}
.pkg.pop{background:var(--ink-d);color:#f5ece6;box-shadow:0 24px 50px rgba(36,28,24,.25);transform:translateY(-10px)}
.pkg .sticker{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--rose);color:#fff;font:700 11px var(--sans);letter-spacing:.08em;text-transform:uppercase;padding:6px 14px;border-radius:99px;white-space:nowrap}
.pkg .tier{font:700 11px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--rose)}
.pkg.pop .tier{color:#e8c4b8}
.pkg .pname{font:italic 400 34px/1.05 var(--serif);margin-top:4px}
.pkg .pdesc{font:400 14px var(--sans);opacity:.75;margin-top:4px}
.pkg .price{display:flex;align-items:baseline;gap:6px}
.pkg .price b{font:500 56px/1 var(--serif)}
.pkg .price span{font:500 13px var(--sans);opacity:.7}
.pkg ul{list-style:none;margin:0;padding:18px 0 0;border-top:1px solid var(--line);display:grid;gap:10px;font:500 14px/1.4 var(--sans)}
.pkg.pop ul{border-top-color:rgba(255,255,255,.14)}
.pkg li::before{content:"✓  ";color:var(--rose);font-weight:800}
.pkg .btns{margin-top:auto;display:flex;flex-direction:column;gap:10px;padding-top:6px}
.pkg .choose{text-align:center;background:var(--ink-d);color:#fff;border-radius:999px;padding:14px;font:700 14px var(--sans);text-decoration:none}
.pkg .choose:hover{background:var(--rose-d);color:#fff}
.pkg.pop .choose{background:var(--rose)}
.pkg.pop .choose:hover{background:#fff;color:var(--ink-d)}
.pkg .try{background:none;border:none;color:inherit;font:600 13px var(--sans);text-decoration:underline;opacity:.8;padding:4px}
.pkg .wide-top{display:contents}
.fine{text-align:center;font:500 12px var(--sans);color:var(--muted);margin-top:28px}
@media (max-width:900px){.pkg-grid{grid-template-columns:1fr;max-width:460px}.pkg.pop{transform:none}}

/* booking */
.book{max-width:1100px;margin:0 auto;background:var(--ink-d);color:#f5ece6;border-radius:34px;padding:clamp(28px,5vw,60px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:clamp(28px,5vw,60px)}
.book-l{display:flex;flex-direction:column;gap:16px}
.book-l h2{font:400 clamp(40px,5vw,58px)/1 var(--serif)}
.book-l p{font:400 15.5px/1.65 var(--sans);color:#cdbdb3;max-width:380px}
.book-img{margin-top:auto;width:100%;max-width:340px;height:260px;object-fit:cover;border-radius:140px 140px 20px 20px}
.form{background:var(--bg);color:var(--ink);border-radius:24px;padding:clamp(22px,3vw,32px);display:flex;flex-direction:column;gap:16px}
.row2{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px}
.fld{display:flex;flex-direction:column;gap:7px}
.fld label,.form .lbl{font:700 12px var(--sans);letter-spacing:.04em;text-transform:none;color:var(--ink)}
.fld input{background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;font:500 15px var(--sans);outline:none;color:var(--ink);width:100%}
.fld input:focus{border-color:var(--rose)}
.fld input.bad{border-color:var(--err)}
.err{font:600 12px var(--sans);color:var(--err)}
.chipset{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1.5px solid var(--line);background:#fff;color:var(--ink);border-radius:999px;padding:8px 14px;font:600 13px var(--sans)}
.chip.on{background:var(--ink-d);border-color:var(--ink-d);color:#fff}
.chip.sq{border-radius:12px}
.form .note{font:500 13px var(--sans);color:var(--muted)}
.submit{background:var(--rose);color:#fff;border:none;border-radius:999px;padding:16px;font:700 15px var(--sans);text-align:center;text-decoration:none}
.submit:hover{background:var(--rose-d);color:#fff}
.ty{font:italic 500 36px var(--serif);color:var(--rose-d)}

/* faq */
.faq-list{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.faq details{background:var(--card);border-radius:18px;box-shadow:inset 0 0 0 1px var(--line);padding:0 22px}
.faq summary{list-style:none;cursor:pointer;padding:20px 30px 20px 0;font:600 15.5px var(--sans);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);font:400 24px var(--sans);color:var(--rose)}
.faq details[open] summary::after{content:"–"}
.faq details p{font:400 14.5px/1.7 var(--sans);color:var(--muted);padding:0 0 20px}

.foot{padding:40px clamp(20px,4vw,48px) 60px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:center;font:500 13px var(--sans);color:var(--muted);border-top:1px solid var(--line)}
.foot a{color:var(--muted)}
.wa-float{position:fixed;right:18px;bottom:18px;z-index:39;width:54px;height:54px;border-radius:50%;background:#25d366;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 26px rgba(0,0,0,.2)}
.wa-float:hover{color:#fff;transform:scale(1.05)}

/* multi-page */
.nav-links a.on{opacity:1;color:var(--rose-d)}
.page-top{padding-top:clamp(130px,14vw,170px)}
.next-band{padding-top:0}
.next-in{max-width:620px;margin:0 auto;text-align:center;display:flex;flex-direction:column;gap:14px;align-items:center;background:var(--card);border-radius:28px;padding:44px 28px;box-shadow:inset 0 0 0 1px var(--line)}
.next-in h2{font:400 clamp(32px,4vw,44px)/1.05 var(--serif)}
.next-in p{font:400 15px/1.6 var(--sans);color:var(--muted)}
.next{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.next-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:20px}
.next-card{display:grid;grid-template-columns:40% 1fr;border-radius:28px;overflow:hidden;background:var(--bg);color:var(--ink);text-decoration:none;box-shadow:inset 0 0 0 1px var(--line);transition:transform .25s,box-shadow .25s}
.next-card:hover{transform:translateY(-3px);box-shadow:0 20px 44px rgba(60,40,30,.12);color:var(--ink)}
.next-card img{width:100%;height:100%;min-height:260px;object-fit:cover;display:block}
.next-card div{padding:30px 28px;display:flex;flex-direction:column;gap:10px;justify-content:center}
.next-card b{font:400 clamp(28px,3vw,36px)/1.05 var(--serif)}
.next-card p{font:400 14.5px/1.6 var(--sans);color:var(--muted)}
.next-card .go{font:700 14px var(--sans);color:var(--rose-d);margin-top:6px}
.next-card.dark{background:var(--ink-d);color:#f5ece6;box-shadow:none}
.next-card.dark:hover{color:#f5ece6}
.next-card.dark p{color:#cdbdb3}
.next-card.dark .go{color:#e8c4b8}
@media (max-width:900px){.next-grid{grid-template-columns:1fr}}
@media (max-width:520px){.next-card{grid-template-columns:1fr}.next-card img{height:220px;min-height:0}}

/* ============ theme v2: warm, playful-professional (Fraunces + Space Mono + Karla) ============ */
:root{
  --bg:#faf6ef; --bg-2:#f1e9dc; --card:#fffdf8; --ink:#2b241f; --ink-d:#2b241f; --muted:#7b6f64;
  --rose:#c4806f; --rose-d:#9a5e50; --rose-l:#f3dfd7; --line:#e7ddcd; --olive:#7f8c6c;
  --serif:'Fraunces',serif; --sans:'Karla',sans-serif; --mono:'Space Mono',monospace;
}
body{font-family:var(--sans);background:var(--bg)}
/* mono labels everywhere: eyebrows, nav, buttons */
.eyebrow{font:400 11px/1.4 var(--mono);letter-spacing:.24em;color:var(--rose-d)}
.eyebrow.light{color:#e9c3b6}
.btn,.nav-cta,.submit,.pkg .choose,.chip,.linkbtn,.demo-cta .btn{font-family:var(--mono)!important;font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:12px}
.btn{padding:15px 24px}
.btn-dark{background:var(--ink);box-shadow:0 10px 22px -8px rgba(43,36,31,.5)}
.btn-ghost{box-shadow:inset 0 0 0 1px var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--bg)}
.nav{background:rgba(250,246,239,.85);box-shadow:0 0 0 1px var(--line),0 12px 30px -12px rgba(43,36,31,.18)}
.nav-links a{font:400 11.5px var(--mono);letter-spacing:.14em;text-transform:uppercase}
.nav-cta{padding:11px 18px;font-size:11px}

/* headings: chunky warm serif, italics for the fun words */
h1{font:400 clamp(52px,7.4vw,96px)/.98 var(--serif);letter-spacing:-.025em;font-variation-settings:"opsz" 144}
h1 em,.sec-head h2 em{font-style:italic;color:var(--rose-d)}
.sec-head h2,.book-l h2,.next-in h2,.next-card b{font-family:var(--serif);font-weight:400;letter-spacing:-.02em}
.sec-head h2{font-size:clamp(36px,4.6vw,56px)}
.lead,.sec-head p,.prose,.feat p,.how-steps p{font-family:var(--sans)}
.ticks{font:400 11px var(--mono);letter-spacing:.1em;text-transform:uppercase}
.ticks li::before{content:"✳ ";color:var(--rose)}

/* ticker band, like a film strip of promises */
.ticker{overflow:hidden;background:var(--ink);color:#efe4d6;border-block:1px solid var(--ink)}
.ticker-track{display:flex;gap:42px;width:max-content;padding:14px 0;animation:drift 40s linear infinite;font:400 12px var(--mono);letter-spacing:.2em;text-transform:uppercase;white-space:nowrap}
.ticker-track span::before{content:"✳";color:var(--rose);margin-right:42px}

/* meaning */
.word{font:italic 400 clamp(70px,10vw,120px)/.9 var(--serif);color:var(--rose-d)}
.pron{font:400 11px var(--mono);letter-spacing:.2em;text-transform:uppercase}
.def{font:italic 400 clamp(21px,2.4vw,26px)/1.4 var(--serif)}

/* how it works: numbered like a checklist with a top rule */
.how-steps li{border-radius:6px;box-shadow:none;border-top:1.5px solid var(--line)}
.how-steps li.on{background:var(--bg-2);box-shadow:none;border-top-color:var(--ink)}
.how-steps .n{font:700 13px/1.6 var(--mono);letter-spacing:.1em;color:var(--rose-d);min-width:30px}
.how-steps b{font:600 19px var(--serif)}

/* moment cards: date-stamped like film */
.moment{border-radius:6px}
.moment b{font:italic 400 26px/1 var(--serif)}
.moment::after{content:"✳ 12 DIS 2026";position:absolute;top:14px;right:14px;font:700 10px var(--mono);letter-spacing:.12em;color:#ffb27a;text-shadow:0 0 6px rgba(255,120,40,.6)}

/* features: stats-style top rules instead of boxes */
.feat{background:transparent;box-shadow:none;border-radius:0;border-top:1.5px solid var(--ink);padding:18px 4px 6px}
.feat .ic{background:transparent;color:var(--rose-d);width:auto;height:auto;margin:0;justify-content:flex-start;font-size:20px}
.feat b{font:600 19px var(--serif)}

/* pricing: two cards + one wide signature card */
.pkg-grid{grid-template-columns:1fr 1fr;max-width:980px;gap:18px}
.pkg{border-radius:8px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);padding:30px 28px;gap:16px}
.pkg.pop{transform:none;background:var(--ink);box-shadow:0 26px 50px -20px rgba(43,36,31,.55)}
.pkg .sticker{left:auto;right:22px;transform:rotate(3deg);background:#fff4c9;color:var(--ink);font:700 10px var(--mono);letter-spacing:.14em;border-radius:3px;padding:7px 12px;box-shadow:0 6px 14px rgba(0,0,0,.15)}
.pkg .tier{font:400 10.5px var(--mono);letter-spacing:.2em;color:var(--rose-d)}
.pkg.pop .tier{color:#e9c3b6}
.pkg .pname{font:600 30px/1.05 var(--serif);font-style:normal;letter-spacing:-.01em}
.pkg .pdesc{font:italic 400 16px var(--serif);opacity:.8}
.pkg .price b{font:600 54px/1 var(--serif);letter-spacing:-.03em}
.pkg .price span{font:400 11px var(--mono);letter-spacing:.12em;text-transform:uppercase}
.pkg ul{border-top:1px solid var(--line);font:500 15px/1.4 var(--sans)}
.pkg li::before{content:"✳  ";color:var(--rose);font-weight:400}
.pkg .try{font:400 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;opacity:.75}
.pkg .try:hover{opacity:1}
.pkg.wide{grid-column:1/-1;display:grid;grid-template-columns:1fr auto;grid-template-areas:"head price" "list list" "addon addon" "btns btns";column-gap:24px}
.pkg.wide .wide-top{display:contents}
.pkg.wide .wide-top>div:first-child{grid-area:head}
.pkg.wide .price{grid-area:price;align-self:start;justify-self:end}
.pkg.wide ul{grid-area:list;grid-template-columns:1fr 1fr;column-gap:30px}
.pkg.wide .addon{grid-area:addon}
.pkg.wide .btns{grid-area:btns;flex-direction:row;align-items:center;gap:20px;max-width:520px}
.pkg.wide .btns .choose{flex:1}
.addon{display:flex;gap:14px;align-items:flex-start;background:var(--bg-2);border-radius:6px;padding:16px 18px;border:1px dashed #d6c6b0}
.addon-ic{font-size:18px;color:var(--rose-d);line-height:1.3}
.addon b{display:block;font:600 16px var(--serif);margin-bottom:3px}
.addon p{font:400 13.5px/1.55 var(--sans);color:var(--muted);margin:0}
@media (max-width:760px){.pkg-grid{grid-template-columns:1fr}.pkg.wide{display:flex}.pkg.wide ul{grid-template-columns:1fr}.pkg.wide .btns{flex-direction:column;align-items:stretch}}

/* demo side panel */
.pk-btn{border-radius:6px;background:var(--card)}
.pk-btn b{font:700 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase}
.pk-btn span{font:600 22px/1.1 var(--serif);font-style:normal}
.guide{border-radius:8px;box-shadow:inset 0 0 0 1px var(--line)}
.guide li{font-family:var(--sans)}
.guide-done{font:italic 400 20px/1.35 var(--serif)}

/* booking, faq, next cards */
.book{border-radius:10px;background:var(--ink)}
.book-img{border-radius:6px}
.form{border-radius:8px}
.chip{font-size:11px;text-transform:none;letter-spacing:.04em}
.chip.on{background:var(--ink);border-color:var(--ink)}
.faq details{border-radius:6px;background:transparent;box-shadow:none;border-top:1px solid var(--line);padding:0 4px}
.faq summary{font:600 18px var(--serif)}
.faq summary::after{font-family:var(--mono)}
.next-card,.next-in{border-radius:10px}
.next-card .go{font:700 11px var(--mono);letter-spacing:.14em;text-transform:uppercase}
.foot{font:400 11px var(--mono);letter-spacing:.08em}

/* ============ theme v3: Ruang Detik's own look ============
   Taken from the logo: deep cocoa brown + peach hourglass, an elegant serif, a clean sans.
   Kept from earlier references only the bits: thin rules, small tracked labels, the moment cards. */
:root{
  --bg:#f9f3ee; --bg-2:#f2e6de; --card:#fffaf7; --ink:#4a322c; --ink-d:#3b2722; --muted:#86716a;
  --rose:#d9a08f; --rose-d:#8f5a4c; --rose-l:#f6e1d9; --line:#ead9cf; --olive:#9aa587;
  --serif:'Cormorant Garamond',serif; --sans:'Plus Jakarta Sans',sans-serif; --mono:'Plus Jakarta Sans',sans-serif;
  --hg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16'%3E%3Cpath d='M0 0h10L5 8z' fill='%236b4a42'/%3E%3Cpath d='M5 8l5 8H0z' fill='%23d9a08f'/%3E%3C/svg%3E");
}
body{font-family:var(--sans)}
/* labels: small tracked sans caps instead of a typewriter font */
.eyebrow{font:700 11px/1.4 var(--sans);letter-spacing:.22em;color:var(--rose-d)}
.nav-links a{font:600 13px var(--sans);letter-spacing:.02em;text-transform:none}
.btn,.nav-cta,.submit,.pkg .choose,.demo-cta .btn{font-family:var(--sans)!important;font-weight:700;letter-spacing:.04em;text-transform:none;font-size:14px}
.chip,.linkbtn{font-family:var(--sans)!important;text-transform:none;letter-spacing:0}
.btn-dark,.pkg .choose,.nav-cta{background:var(--ink-d)}
.btn-dark:hover,.pkg .choose:hover,.nav-cta:hover{background:var(--rose-d);color:#fff}
.btn-ghost{box-shadow:inset 0 0 0 1.5px var(--line)}
.btn-ghost:hover{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.ticks{font:600 12.5px var(--sans);letter-spacing:.01em;text-transform:none}
.ticks li::before{content:"";display:inline-block;width:8px;height:12px;margin-right:7px;vertical-align:-1px;background:var(--hg) center/contain no-repeat}

/* headings: the elegant serif, light weight, italic accent words */
h1{font:400 clamp(56px,8vw,104px)/.95 var(--serif);letter-spacing:-.015em;font-variation-settings:normal}
h1 em,.sec-head h2 em{color:var(--rose-d)}
.sec-head h2,.book-l h2,.next-in h2{font-family:var(--serif);font-weight:500;letter-spacing:-.01em}
.sec-head h2{font-size:clamp(40px,5vw,60px)}
.next-card b{font:500 clamp(30px,3vw,38px)/1.05 var(--serif)}
.how-steps b,.feat b,.addon b,.faq summary{font-family:var(--sans);font-weight:700;letter-spacing:0}
.how-steps b,.feat b{font-size:16.5px}
.faq summary{font-size:15.5px}
.how-steps .n{font:italic 500 28px/1 var(--serif);letter-spacing:0;color:var(--rose)}

/* ticker: soft peach band with hourglass separators, not a dark film strip */
.ticker{background:var(--rose-l);color:var(--ink);border-block:1px solid var(--line)}
.ticker-track{font:italic 500 20px var(--serif);letter-spacing:.01em;text-transform:none;gap:34px;padding:16px 0}
.ticker-track span::before{content:"";display:inline-block;width:9px;height:14px;margin-right:34px;vertical-align:-1px;background:var(--hg) center/contain no-repeat}

.word{font:italic 500 clamp(72px,10vw,120px)/.9 var(--serif);color:var(--rose-d)}
.pron{font:600 12px var(--sans);letter-spacing:.16em}
.def{font:italic 500 clamp(22px,2.6vw,28px)/1.35 var(--serif)}

/* how it works: soft rounded panels */
.how-steps li{border-radius:18px;border-top:none}
.how-steps li.on{background:var(--card);box-shadow:0 14px 32px -14px rgba(74,50,44,.25)}

/* features: keep the thin top rule, warm it up */
.feat{border-top:1.5px solid var(--line)}
.feat .ic{color:var(--rose)}

/* pricing: own colours, hourglass bullets, peach "most popular" pill */
.pkg{border-radius:22px}
.pkg.pop{background:var(--ink-d)}
.pkg .sticker{right:auto;left:50%;transform:translateX(-50%);background:var(--rose);color:#fff;font:700 11px var(--sans);letter-spacing:.1em;border-radius:99px;padding:7px 16px;box-shadow:0 8px 18px -6px rgba(143,90,76,.6)}
.pkg .tier{font:700 11px var(--sans);letter-spacing:.18em;color:var(--rose-d)}
.pkg.pop .tier{color:var(--rose)}
.pkg .pname{font:500 34px/1.05 var(--serif)}
.pkg .pdesc{font:italic 500 18px var(--serif)}
.pkg .price b{font:500 58px/1 var(--serif);letter-spacing:-.01em}
.pkg .price span{font:600 12px var(--sans);letter-spacing:.02em;text-transform:none}
.pkg ul{font:500 14.5px/1.45 var(--sans)}
.pkg li::before{content:"";display:inline-block;width:8px;height:12px;margin-right:9px;vertical-align:-1px;background:var(--hg) center/contain no-repeat}
.pkg.pop li::before{filter:brightness(2.2)}
.pkg .try{font:600 13px var(--sans);letter-spacing:0;text-transform:none;text-decoration:underline}
.pkg.pop .choose{background:var(--rose)}
.addon{border-radius:14px;background:var(--rose-l);border:1px dashed var(--rose)}

/* demo panel, booking, faq */
.pk-btn{border-radius:14px}
.pk-btn b{font:700 12.5px var(--sans);letter-spacing:0;text-transform:none}
.pk-btn span{font:italic 500 22px/1.1 var(--serif)}
.guide{border-radius:18px}
.guide-done{font:italic 500 21px/1.3 var(--serif)}
.book,.form,.next-card,.next-in{border-radius:24px}
.book-img{border-radius:140px 140px 18px 18px}
.faq details{border-top-color:var(--line)}
.foot{font:500 13px var(--sans);letter-spacing:0}
.nav{background:rgba(255,250,247,.82)}
.moment::after{font-family:'Space Mono',monospace}
.pkg.pop .tier{display:none}

/* ============ v4: fewer hourglasses, more play ============ */
:root{ --sage:#dfe8d6; --butter:#fbefc8; --sky:#dfe9f4; --hand:'Caveat',cursive }
/* hourglass now lives only in the logo */
.ticks li::before{content:"✓";width:auto;height:auto;margin-right:6px;background:none;color:var(--rose-d);font-weight:800;vertical-align:0}
.pkg li::before{content:"✓";width:auto;height:auto;margin-right:9px;background:none;color:var(--rose);font-weight:800;vertical-align:0;filter:none}
.pkg.pop li::before{color:var(--rose);filter:none}

/* handwritten aside */
.hero-cta{position:relative}
.scribble{position:absolute;left:calc(100% + 10px);top:-30px;display:flex;align-items:flex-end;gap:2px;white-space:nowrap;font:700 24px/1 var(--hand);color:var(--rose-d);transform:rotate(-6deg)}
.scribble svg{transform:scaleX(-1) rotate(10deg);margin-bottom:-6px}
@media (max-width:900px){.scribble{position:static;transform:rotate(-3deg);margin-top:6px;width:100%;justify-content:center}.scribble svg{display:none}}

/* strip: tilted snapshots that lift on hover */
.strip{position:relative}
.strip-track img{transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.strip-track img:nth-child(4n+1){transform:rotate(-3deg)}
.strip-track img:nth-child(4n+2){transform:rotate(2deg)}
.strip-track img:nth-child(4n+3){transform:rotate(-1.5deg)}
.strip-track img:nth-child(4n){transform:rotate(3deg)}
.strip-track img:hover{transform:rotate(0) scale(1.06);z-index:2}
.live-pop{position:absolute;left:50%;top:6px;transform:translate(-50%,0);display:flex;align-items:center;gap:9px;background:#fff;color:var(--ink);border-radius:999px;padding:10px 16px 10px 12px;font:700 13px var(--sans);box-shadow:0 14px 30px -10px rgba(74,50,44,.35);opacity:0;z-index:3;white-space:nowrap}
.live-pop.show{animation:popin 3.4s ease both}
.lp-dot{width:10px;height:10px;border-radius:50%;background:#45c27a;box-shadow:0 0 0 4px rgba(69,194,122,.18);animation:pulse 1.4s ease infinite}
@keyframes popin{0%{opacity:0;transform:translate(-50%,10px) scale(.92)}10%,85%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,-6px)}}
@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(69,194,122,0)}}

/* ticker: tilted, with hearts and sparkles */
.ticker{transform:rotate(-1.2deg);margin:0 -20px;position:relative;z-index:2;background:var(--rose-l)}
.ticker-track span::before{content:none}
.ticker-track i{font-style:normal;color:var(--rose-d);margin-right:30px}

/* section headings: a hand-drawn squiggle under the italic word */
.sec-head h2 em,h1 em{position:relative;white-space:nowrap}
.sec-head h2 em::after,h1 em::after{content:"";position:absolute;left:2%;right:2%;bottom:-.06em;height:.22em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8c18-6 30 4 48-1s32-6 48 0 16 2 20-2' fill='none' stroke='%23d9a08f' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;opacity:.9}

/* feature icons: emoji on pastel tiles that wiggle on hover */
.feat .ic{width:48px;height:48px;border-radius:16px;font-size:22px;justify-content:center;margin-bottom:8px;transition:transform .3s}
.feat:nth-child(6n+1) .ic{background:var(--rose-l)}
.feat:nth-child(6n+2) .ic{background:var(--butter)}
.feat:nth-child(6n+3) .ic{background:var(--sage)}
.feat:nth-child(6n+4) .ic{background:var(--sky)}
.feat:nth-child(6n+5) .ic{background:var(--butter)}
.feat:nth-child(6n) .ic{background:var(--rose-l)}
.feat:hover .ic{transform:rotate(-8deg) scale(1.1)}

/* how it works numbers in handwriting */
.how-steps .n{font:700 34px/1 var(--hand);color:var(--rose)}
.word{transform:rotate(-3deg)}

/* bouncy buttons + cards */
.btn,.nav-cta,.pkg .choose,.submit{transition:transform .25s cubic-bezier(.3,1.8,.5,1),background .2s}
.btn:hover,.nav-cta:hover,.pkg .choose:hover,.submit:hover{transform:translateY(-2px) scale(1.03)}
.pkg{transition:transform .3s cubic-bezier(.3,1.5,.5,1),box-shadow .3s}
.pkg:hover{transform:translateY(-4px)}
.pkg .sticker{transform:translateX(-50%) rotate(-3deg)}
.next-card:hover{transform:translateY(-4px) rotate(-.4deg)}
.moment{transition:transform .35s cubic-bezier(.3,1.5,.5,1)}
.moment:nth-child(odd):hover{transform:rotate(-1.5deg) translateY(-4px)}
.moment:nth-child(even):hover{transform:rotate(1.5deg) translateY(-4px)}

/* soft colour blobs behind a few sections */
.how,.demo,.pricing{position:relative;overflow:hidden}
.how::before,.pricing::before,.demo::before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;filter:blur(60px);opacity:.55;z-index:0;pointer-events:none}
.how::before{background:var(--butter);left:-140px;top:120px}
.pricing::before{background:var(--sage);right:-160px;top:40px}
.demo::before{background:var(--sky);left:-160px;bottom:40px}
.how>*,.pricing>*,.demo>*{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){.live-pop.show,.lp-dot{animation:none;opacity:1}}
html,body{overflow-x:clip}
#screen [data-act="like"]{white-space:nowrap;flex-shrink:0}

/* ============ colour schemes (html[data-scheme]) ============ */
/* hero glow follows the scheme */
.hero{background:radial-gradient(1200px 520px at 50% 0%,var(--glow,#fbe9e2) 0%,transparent 70%),var(--bg)}
.ms-0{background:linear-gradient(180deg,var(--glow,#fbe9e2),var(--bg))}

/* 1. Pandan & Coral (default): deep pandan green with coral and butter */
html[data-scheme="pandan"]{
  --bg:#f6f3ea; --bg-2:#ecebdc; --card:#fffdf6; --ink:#1f3b33; --ink-d:#183029; --muted:#5f6e66;
  --rose:#ef7f6a; --rose-d:#c4553f; --rose-l:#fde3da; --line:#e2e0cf; --olive:#7fa37a;
  --butter:#ffe6a0; --sage:#cfe3c7; --sky:#d6e7ef; --glow:#fde3da;
}
/* 2. Teh Tarik: the warm cocoa & blush from before */
html[data-scheme="tehtarik"]{ --glow:#fbe9e2 }
/* 3. Senja: indigo dusk with candy pink and lilac */
html[data-scheme="senja"]{
  --bg:#f7f5fb; --bg-2:#eeebf7; --card:#fffeff; --ink:#2c2a5a; --ink-d:#24224d; --muted:#6d6a8c;
  --rose:#f0879a; --rose-d:#c9586e; --rose-l:#fde2e8; --line:#e5e1f0; --olive:#8db59a;
  --butter:#fff0b5; --sage:#dcefe0; --sky:#dde4fb; --glow:#ece4fb;
}
html[data-scheme="pandan"] .pkg.pop .choose,html[data-scheme="senja"] .pkg.pop .choose{color:#fff}
html[data-scheme="pandan"] .ticks li::before{color:var(--rose)}

/* preview-only scheme picker */
.scheme-pick{position:fixed;left:16px;bottom:16px;z-index:45;display:flex;align-items:center;gap:8px;background:#fff;border-radius:999px;padding:7px 10px 7px 14px;box-shadow:0 12px 28px -8px rgba(0,0,0,.25);font:700 11px var(--sans);color:#555}
.scheme-pick button{width:26px;height:26px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.15);padding:0;cursor:pointer}
.scheme-pick button.on{box-shadow:0 0 0 2px #222}

/* ============ hero layout variants (html[data-layout]) ============ */

/* split: words left, a tappable album phone right */
html[data-layout="split"] .hero{display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:40px;max-width:1160px;margin:0 auto;padding:130px clamp(20px,4vw,48px) 70px;min-height:auto;text-align:left}
html[data-layout="split"] .hero-copy{align-items:flex-start;padding:0;max-width:600px}
html[data-layout="split"] .hero-cta,html[data-layout="split"] .ticks{justify-content:flex-start}
html[data-layout="split"] .strip{grid-column:1/-1}
html[data-layout="split"] .hv-split{display:flex;flex-direction:column;align-items:center;gap:14px;text-decoration:none;justify-self:center}
.hvp{transform:rotate(3deg);transition:transform .4s cubic-bezier(.3,1.5,.5,1)}
.hv-split:hover .hvp{transform:rotate(0) scale(1.03)}
.hvp-screen{position:relative;height:100%;border-radius:35px;overflow:hidden;background:var(--card);display:flex;flex-direction:column}
.hvp-cover{position:relative;height:150px}
.hvp-cover img{width:100%;height:100%;object-fit:cover}
.hvp-cover span{position:absolute;left:0;right:0;bottom:8px;text-align:center;font:italic 500 24px var(--serif);color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.4)}
.hvp-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:10px}
.hvp-grid img{width:100%;height:118px;object-fit:cover;border-radius:10px}
.hvp-fab{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);background:var(--ink);color:#fff;border-radius:99px;padding:10px 16px;font:700 12px var(--sans);white-space:nowrap}
.hvp-tag{font:700 22px var(--hand);color:var(--rose-d);transform:rotate(-3deg)}
@media (max-width:860px){html[data-layout="split"] .hero{grid-template-columns:1fr;text-align:center}html[data-layout="split"] .hero-copy{align-items:center}html[data-layout="split"] .hero-cta,html[data-layout="split"] .ticks{justify-content:center}html[data-layout="split"] .scribble{position:static}html[data-layout="split"] .hero-cta{margin-bottom:0}}


@media (max-width:1100px){.sp{width:130px}.sp img{height:140px}.note{display:none}}


/* ============ phone split, tidied ============ */
html[data-layout="split"] .hero{grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(40px,6vw,90px);row-gap:56px;padding-top:140px;padding-bottom:40px}
html[data-layout="split"] h1{font-size:clamp(48px,5.4vw,76px);line-height:1}
html[data-layout="split"] .hero-copy{gap:22px}
html[data-layout="split"] .lead{max-width:500px}
html[data-layout="split"] .scribble{top:-26px;font-size:22px}
html[data-layout="split"] .ticks{margin-top:4px}
.hvp{width:280px;height:560px}
.hvp-cover{height:132px}
.hvp-grid{gap:5px;padding:8px 8px 70px}
.hvp-grid img{height:104px;border-radius:9px}
.hvp-fab{bottom:18px;box-shadow:0 10px 20px -6px rgba(0,0,0,.35)}
.hvp-tag{font-size:21px;margin-top:2px}
@media (max-width:860px){html[data-layout="split"] .hero{grid-template-columns:1fr;padding-top:118px;row-gap:40px}.hvp{width:250px;height:500px}.hvp-grid img{height:90px}}

/* ============ detik: slim band ============ */
.meaning{padding:clamp(36px,5vw,56px) clamp(20px,4vw,48px)}
.meaning-in{max-width:980px;margin:0 auto;display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(24px,5vw,64px);align-items:center;text-align:left}
.m-word{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding-right:clamp(24px,5vw,64px);border-right:1.5px solid var(--line)}
.meaning .word{font-size:clamp(56px,7vw,84px);transform:rotate(-3deg)}
.m-text{display:flex;flex-direction:column;gap:8px}
.meaning .def{margin:0;font-size:clamp(20px,2.2vw,25px);line-height:1.3}
.meaning .prose{display:block;font:400 15.5px/1.65 var(--sans);color:var(--muted);margin:0}
@media (max-width:640px){.meaning-in{grid-template-columns:1fr;gap:14px;text-align:center}.m-word{align-items:center;border-right:none;padding-right:0}.meaning .word{font-size:56px}}
html[data-layout="split"] .hero{background:transparent}
html[data-layout="split"] > body{background:radial-gradient(1200px 600px at 20% 0%,var(--glow) 0%,transparent 65%) no-repeat,var(--bg)}

/* ============ how it works: three compact cards ============ */
.how-cards{list-style:none;margin:0 auto;padding:0;max-width:1060px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.hc{background:var(--card);border-radius:22px;padding:12px;display:flex;flex-direction:column;gap:14px;box-shadow:0 14px 30px -18px rgba(30,50,40,.35);transition:transform .3s cubic-bezier(.3,1.5,.5,1)}
.hc:hover{transform:translateY(-4px)}
.hc-pic{position:relative;height:170px;border-radius:14px;overflow:hidden;background:var(--glow);display:flex;align-items:center;justify-content:center}
.hc-qr .qr-card{padding:12px 14px;gap:4px;border-radius:14px}
.hc-qr .qr-names{font-size:17px}
.hc-qr .qr{width:92px;height:92px;margin:2px 0}
.hc-post{flex-direction:column;gap:10px;background:var(--sage)}
.hc-post .ms-post{margin:0;padding:5px 5px 16px}
.hc-post .ms-post img{width:96px;height:96px;filter:none}
.hc-post .ms-btn{padding:7px 16px;font-size:11px}
.hc-album{flex-direction:column;gap:8px;background:var(--butter)}
.hc-album .ms-grid{grid-template-columns:repeat(4,52px);gap:5px}
.hc-album .ms-grid img{height:70px;border-radius:8px}
.hc-album .ms-live{margin:0}
.hc-text{padding:0 8px 8px;display:flex;flex-direction:column;gap:4px}
.hc-text .n{font:700 26px/1 var(--hand);color:var(--rose)}
.hc-text b{font:700 16px var(--sans)}
.hc-text p{font:400 14px/1.55 var(--sans);color:var(--muted);margin:0}
.how .sec-head{margin-bottom:36px}
.how{padding-top:clamp(56px,7vw,90px);padding-bottom:clamp(56px,7vw,90px)}
@media (max-width:820px){
  .how-cards{grid-template-columns:1fr;gap:12px;max-width:520px}
  .hc{flex-direction:row;align-items:center;padding:10px}
  .hc-pic{width:110px;height:110px;flex-shrink:0}
  .hc-qr .qr-card{padding:8px}.hc-qr .qr-names{display:none}.hc-qr .qr{width:70px;height:70px}
  .hc-post .ms-post img{width:62px;height:62px}.hc-post .ms-btn{display:none}
  .hc-album .ms-grid{grid-template-columns:repeat(2,42px)}.hc-album .ms-grid img{height:42px}.hc-album .ms-live{display:none}
  .hc-text{padding:0 4px}
}

/* nav links jump instantly */
html{scroll-behavior:auto}

/* ============ how it works options (html[data-how]) ============ */
.hw-line,.hw-chat,.hw-photo{display:none}
html[data-how="line"] .how-cards,html[data-how="chat"] .how-cards,html[data-how="photo"] .how-cards{display:none}
html[data-how="line"] .hw-line{display:grid}
html[data-how="chat"] .hw-chat{display:grid}
html[data-how="photo"] .hw-photo{display:block}

/* timeline: one compact row joined by a dashed line */
.hw-line{list-style:none;margin:0 auto;padding:0;max-width:900px;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;position:relative}
.hw-line::before{content:"";position:absolute;left:16%;right:16%;top:34px;border-top:2px dashed var(--rose);opacity:.5}
.hw-line li{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px}
.hw-ic{width:68px;height:68px;border-radius:50%;background:var(--card);display:flex;align-items:center;justify-content:center;font-size:28px;box-shadow:0 10px 24px -12px rgba(30,50,40,.4);margin-bottom:8px;transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.hw-line li:nth-child(1) .hw-ic{background:var(--rose-l)}.hw-line li:nth-child(2) .hw-ic{background:var(--sage)}.hw-line li:nth-child(3) .hw-ic{background:var(--butter)}
.hw-line li:hover .hw-ic{transform:rotate(-8deg) scale(1.08)}
.hw-line .n{font:700 22px/1 var(--hand);color:var(--rose)}
.hw-line b{font:700 16px var(--sans)}
.hw-line p{margin:0;font:400 14px var(--sans);color:var(--muted)}
@media (max-width:640px){.hw-line{grid-template-columns:1fr;gap:14px;max-width:340px}.hw-line::before{left:34px;right:auto;top:34px;bottom:34px;border-top:none;border-left:2px dashed var(--rose)}.hw-line li{display:grid;grid-template-columns:68px 1fr;column-gap:16px;text-align:left;align-items:center}.hw-ic{grid-row:span 3;margin:0}}

/* chat thread: the steps told as a family group chat */
.hw-chat{max-width:900px;margin:0 auto;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:36px;align-items:center}
.chat{background:#e9e4d6;border-radius:24px;padding:20px;display:flex;flex-direction:column;gap:12px;background-image:radial-gradient(rgba(0,0,0,.04) 1px,transparent 1px);background-size:14px 14px}
.msg{position:relative;max-width:82%;padding:10px 14px 12px;border-radius:16px;font:500 14.5px/1.45 var(--sans);color:var(--ink);box-shadow:0 2px 0 rgba(0,0,0,.05)}
.msg.l{align-self:flex-start;background:#fff;border-top-left-radius:4px}
.msg.r{align-self:flex-end;background:#d9f5c9;border-top-right-radius:4px}
.msg .who{display:block;font:700 12px var(--sans);color:var(--rose-d);margin-bottom:3px}
.msg img{display:block;width:180px;height:130px;object-fit:cover;border-radius:10px;margin:2px 0 6px}
.msg .step{position:absolute;top:-10px;width:24px;height:24px;border-radius:50%;background:var(--ink);color:#fff;font:700 12px/24px var(--sans);text-align:center}
.msg.l .step{right:-10px}.msg.r .step{left:-10px}
.chat-key{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.chat-key li{display:flex;gap:12px;align-items:baseline;font:500 15.5px/1.5 var(--sans)}
.chat-key b{flex-shrink:0;width:28px;height:28px;border-radius:50%;background:var(--rose-l);color:var(--rose-d);font:700 13px/28px var(--sans);text-align:center}
@media (max-width:760px){.hw-chat{grid-template-columns:1fr;gap:20px;max-width:440px}.chat-key{display:none}}

/* photo with stickers: one real moment, three sticky labels */
.hw-photo{position:relative;max-width:980px;margin:0 auto;height:380px;border-radius:26px;overflow:hidden;box-shadow:0 24px 50px -24px rgba(30,50,40,.5)}
.hw-photo img{width:100%;height:100%;object-fit:cover;object-position:center 45%}
.hw-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(20,35,30,.35))}
.hw-photo .tag{position:absolute;z-index:2;display:flex;align-items:center;gap:10px;background:#fff;color:var(--ink);font:700 15px var(--sans);padding:10px 16px 10px 10px;border-radius:999px;box-shadow:0 14px 30px -10px rgba(0,0,0,.45)}
.hw-photo .tag b{width:30px;height:30px;border-radius:50%;background:var(--rose);color:#fff;font:700 14px/30px var(--sans);text-align:center}
.hw-photo .t1{left:6%;top:14%;transform:rotate(-4deg)}
.hw-photo .t2{right:7%;top:40%;transform:rotate(3deg);background:var(--butter)}
.hw-photo .t3{left:30%;bottom:10%;transform:rotate(-2deg);background:var(--sage)}
@media (max-width:640px){.hw-photo{height:300px}.hw-photo .tag{font-size:13px}.hw-photo .t1{left:4%}.hw-photo .t2{right:4%}.hw-photo .t3{left:8%}}

/* preview-only picker */
.how-pick{position:fixed;left:16px;bottom:16px;z-index:45;display:flex;gap:4px;align-items:center;background:#fff;border-radius:999px;padding:6px 6px 6px 14px;box-shadow:0 12px 28px -8px rgba(0,0,0,.28);font:700 11px var(--sans);color:#555}
.how-pick button{border:none;background:transparent;border-radius:99px;padding:7px 12px;font:700 12px var(--sans);color:#333;cursor:pointer;white-space:nowrap}
.how-pick button.on{background:var(--ink);color:#fff}
@media (max-width:520px){.how-pick{left:8px;right:72px;bottom:12px;overflow-x:auto}}
.how-pick{white-space:nowrap}

/* ============ how it works options, round 2 ============ */
.hw-line2,.hw-ba,.hw-big,.hw-apps{display:none}
html[data-how]:not([data-how="cards"]) .how-cards{display:none}
html[data-how="clothes"] .hw-line2{display:grid}
html[data-how="ba"] .hw-ba{display:grid}
html[data-how="big"] .hw-big{display:block}
html[data-how="apps"] .hw-apps{display:grid}

/* clothesline */
.hw-line2{position:relative;max-width:980px;margin:0 auto;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;padding-top:26px}
.hw-line2 .string{position:absolute;left:-2%;right:-2%;top:0;width:104%;height:80px;color:#b9ad93}
.cl{position:relative;margin:0;background:#fff;padding:10px 10px 16px;box-shadow:0 18px 34px -16px rgba(30,40,30,.45);transform-origin:50% -20px;animation:sway 5s ease-in-out infinite}
.cl1{transform:rotate(-4deg);margin-top:4px}.cl2{transform:rotate(2deg);margin-top:34px;animation-delay:-1.5s}.cl3{transform:rotate(-2deg);margin-top:4px;animation-delay:-3s}
@keyframes sway{50%{rotate:1.5deg}}
.peg{position:absolute;top:-16px;left:50%;width:12px;height:30px;margin-left:-6px;background:#d8a76a;border-radius:3px;box-shadow:inset 0 0 0 2px rgba(0,0,0,.08)}
.cl-pic{position:relative;height:190px;overflow:hidden}
.cl-pic img{width:100%;height:100%;object-fit:cover}
.cl-qr{position:absolute;right:10px;bottom:10px;width:54px;height:54px;border-radius:8px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h3v3H0zM4 0h3v3H4zM0 4h3v3H0zM4 4h1v1H4zM6 4h1v2H6zM5 6h2v1H5zM4 5h1v1H4z' fill='%231f3b33'/%3E%3C/svg%3E") center/70% no-repeat;box-shadow:0 6px 14px rgba(0,0,0,.25)}
.cl-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.cl figcaption{text-align:center;margin-top:12px;font:700 19px/1.15 var(--hand);color:var(--muted)}
.cl figcaption b{display:block;font-size:24px;color:var(--ink)}
@media (max-width:760px){.hw-line2{grid-template-columns:1fr;max-width:300px;gap:26px}.hw-line2 .string{display:none}.cl{margin-top:0!important}.cl-pic{height:170px}}

/* before & after */
.hw-ba{max-width:1000px;margin:0 auto;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:20px;align-items:stretch}
.ba{position:relative;border-radius:22px;padding:42px 18px 18px;display:flex;flex-direction:column;gap:9px}
.ba-before{background:#e7e3d8;filter:saturate(.7)}
.ba-after{background:var(--card);box-shadow:0 20px 40px -22px rgba(30,50,40,.45)}
.ba-tag{position:absolute;top:14px;left:18px;font:700 11px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#7b7666}
.ba-tag.good{color:var(--rose-d)}
.wa-head{font:700 13px var(--sans);color:#555;padding-bottom:6px;border-bottom:1px solid rgba(0,0,0,.08)}
.wa{max-width:80%;padding:8px 12px;border-radius:12px;font:500 13.5px/1.4 var(--sans);color:#3d3d3d;background:#fff}
.wa.r{align-self:flex-end;background:#d9f0cf}
.wa.blur{display:flex;align-items:center;gap:8px;color:#888}
.thumb{width:34px;height:34px;border-radius:6px;background:url(img/kita-1.jpg) center/cover;filter:blur(3px)}
.ba-arrow{align-self:center;font:400 34px var(--serif);color:var(--rose)}
.ba-album{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.ba-album img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px}
.ba-meta{font:600 13px var(--sans);color:var(--muted);margin-top:4px}
.ba-steps{grid-column:1/-1;list-style:none;margin:10px 0 0;padding:0;display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.ba-steps li{display:flex;align-items:center;gap:9px;background:var(--card);border-radius:999px;padding:8px 16px 8px 8px;font:700 14px var(--sans);box-shadow:0 8px 18px -12px rgba(0,0,0,.3)}
.ba-steps b{width:26px;height:26px;border-radius:50%;background:var(--rose);color:#fff;font:700 12px/26px var(--sans);text-align:center}
@media (max-width:760px){.hw-ba{grid-template-columns:1fr;max-width:440px}.ba-arrow{transform:rotate(90deg);justify-self:center}}

/* big numbers */
.hw-big{list-style:none;margin:0 auto;padding:0;max-width:900px}
.hw-big li{display:grid;grid-template-columns:110px minmax(0,1fr) 96px;gap:28px;align-items:center;padding:20px 0;border-top:1px solid var(--line)}
.hw-big li:last-child{border-bottom:1px solid var(--line)}
.bn{font:italic 400 96px/.8 var(--serif);color:var(--rose)}
.hw-big b{display:block;font:500 28px/1.1 var(--serif);margin-bottom:4px}
.hw-big p{margin:0;font:400 15px/1.6 var(--sans);color:var(--muted);max-width:480px}
.hw-big img{width:96px;height:96px;border-radius:50%;object-fit:cover;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.hw-big li:hover img{transform:scale(1.1) rotate(-4deg)}
@media (max-width:640px){.hw-big li{grid-template-columns:60px minmax(0,1fr);gap:14px}.bn{font-size:64px}.hw-big img{display:none}.hw-big b{font-size:23px}}

/* app screens */
.hw-apps{max-width:900px;margin:0 auto;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;justify-items:center}
.hw-apps figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px}
.hw-apps figure:nth-child(2) .aph{transform:translateY(-14px)}
.aph{width:200px;height:400px;border-radius:34px;background:var(--ink-d);padding:7px;box-shadow:0 24px 44px -22px rgba(20,40,30,.6);transition:transform .35s cubic-bezier(.3,1.5,.5,1)}
.hw-apps figure:hover .aph{transform:translateY(-20px) rotate(-1.5deg)}
.aps{position:relative;height:100%;border-radius:27px;overflow:hidden;background:var(--card);display:flex;flex-direction:column;align-items:center}
.aps1 img{width:100%;height:62%;object-fit:cover}
.ap-name{font:italic 500 24px var(--serif);margin-top:14px}
.ap-btn{position:absolute;bottom:16px;left:14px;right:14px;text-align:center;background:var(--ink);color:#fff;border-radius:99px;padding:9px;font:700 11.5px var(--sans)}
.ap-top{font:700 12px var(--sans);padding:26px 0 10px}
.aps3 .ap-top{font:italic 500 19px var(--serif);padding-bottom:8px}
.ap-pol{background:#fff;padding:6px 6px 20px;box-shadow:0 8px 18px rgba(0,0,0,.15);transform:rotate(-2deg)}
.ap-pol img{width:140px;height:170px;object-fit:cover}
.ap-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:0 8px;width:100%}
.ap-grid img{width:100%;height:92px;object-fit:cover;border-radius:8px}
.ap-live{position:absolute;top:58px;left:50%;transform:translateX(-50%);white-space:nowrap;background:#fff;border-radius:99px;padding:5px 10px;font:700 9.5px var(--sans);box-shadow:0 6px 14px rgba(0,0,0,.2);color:var(--ink)}
.hw-apps figcaption{display:flex;align-items:center;gap:9px;font:700 15px var(--sans)}
.hw-apps figcaption b{width:26px;height:26px;border-radius:50%;background:var(--rose);color:#fff;font:700 12px/26px var(--sans);text-align:center}
@media (max-width:760px){.hw-apps{grid-template-columns:repeat(3,200px);justify-content:start;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -20px;padding:20px 20px 6px}.hw-apps figure{scroll-snap-align:center}.hw-apps figure:nth-child(2) .aph{transform:none}}
@media (max-width:760px){.hw-line2{grid-template-columns:repeat(3,220px);max-width:none;justify-content:start;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -20px;padding:30px 20px 10px;gap:18px}.hw-line2 .cl{scroll-snap-align:center}.cl-pic{height:150px}}

/* ============ how it works: app screens (final) ============ */
.hw-apps{display:grid!important;align-items:end}
.how-pick{display:none}
/* step 1: a printed QR table card */
.qrc{width:220px;height:400px;border-radius:14px;overflow:hidden;background:#fff;display:flex;flex-direction:column;box-shadow:0 24px 44px -22px rgba(20,40,30,.55);transform:rotate(-2deg);transition:transform .35s cubic-bezier(.3,1.5,.5,1)}
.hw-apps figure:hover .qrc{transform:rotate(0) translateY(-6px)}
.qrc-top{position:relative;flex:1;min-height:0}
.qrc-top img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.qrc-top::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,30,25,.6) 0%,rgba(15,30,25,0) 45%)}
.qrc-head{position:absolute;z-index:1;left:0;right:0;top:12px;text-align:center;color:#fff;display:flex;flex-direction:column;gap:2px}
.qrc-ey{font:700 7.5px var(--sans);letter-spacing:.16em;text-transform:uppercase}
.qrc-names{font:italic 400 21px/1.1 'Bodoni Moda',serif}
.qrc-date{font:700 8px var(--sans);letter-spacing:.14em}
.qrc-bot{display:flex;gap:10px;align-items:center;padding:12px;border-top-left-radius:16px;border-top-right-radius:16px;margin-top:-16px;position:relative;background:#fff}
.qrc-bot .qr{width:70px;height:70px;flex-shrink:0;margin:0;padding:4px;border:1px solid #eee;border-radius:8px;box-sizing:border-box}
.qrc-bot b{display:block;font:italic 400 13px/1.15 'Bodoni Moda',serif;color:var(--ink)}
.qrc-bot span{display:block;font:400 8.5px/1.35 var(--sans);color:var(--muted);margin:3px 0}
.qrc-bot i{font:700 9px var(--sans);font-style:normal;color:var(--rose-d)}
@media (max-width:760px){.hw-apps{grid-template-columns:repeat(3,220px)}}
.ap-desc{margin:-6px 0 0;max-width:230px;text-align:center;font:400 14px/1.55 var(--sans);color:var(--muted)}
.qrc-top img{object-position:center 35%}
.hw-apps{align-items:start}
.hw-apps figure:nth-child(2) .aph{transform:none}

/* ============ demo page: compact ============ */
.demo.page-top{padding-top:96px;padding-bottom:40px}
.demo .sec-head{margin-bottom:22px;gap:8px}
.demo .sec-head h2{font-size:clamp(34px,4vw,48px)}
.demo-grid{gap:clamp(24px,4vw,56px)}
.demo-l{gap:14px}
.demo .phone-wrap{zoom:.9}
.next-band{padding-top:0;padding-bottom:48px}
.next-in{padding:28px 24px;gap:10px}
.next-in h2{font-size:clamp(26px,3vw,34px)}
@media (max-width:820px){.demo.page-top{padding-top:84px}.demo .sec-head p{font-size:14.5px}.demo .phone-wrap{zoom:.85}.demo-grid{gap:20px}}

/* ============ tighter section starts ============ */
.sec,.how,.moments,.features,.pricing,.faq,.next,.book-sec{padding-top:clamp(36px,4.5vw,56px)!important;padding-bottom:clamp(40px,5vw,64px)}
.sec-head{margin-bottom:clamp(24px,3vw,36px)}
.page-top{padding-top:clamp(96px,9vw,110px)!important}
.next-band{padding-top:0!important}

/* ============ less empty space: hero + demo ============ */
html[data-layout="split"] .hero{max-width:1100px;grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(32px,5vw,64px);padding-top:104px;padding-bottom:24px;row-gap:36px}
html[data-layout="split"] .hv-split{zoom:.88;gap:10px}
html[data-layout="split"] .hero-copy{gap:18px}
@media (max-width:860px){html[data-layout="split"] .hero{padding-top:100px;row-gap:28px}html[data-layout="split"] .hv-split{zoom:.85}}

.demo-grid{align-items:center;max-width:1000px}
.demo-side{display:flex;flex-direction:column;gap:22px;max-width:460px}
.demo-head{align-items:flex-start;text-align:left;margin:0!important;max-width:none}
.demo-head h2{font-size:clamp(34px,3.8vw,46px)}
.demo-head p{margin:0}
.demo.page-top{padding-top:92px!important;padding-bottom:28px}
@media (max-width:820px){.demo-side{order:2;max-width:520px;width:100%}.demo-head{align-items:center;text-align:center}.demo-side .demo-l{order:0}}
@media (max-width:820px){.demo-side{display:contents}.demo-head{order:0;margin-bottom:-4px!important}.demo-grid .phone-wrap{order:1}.demo-side .demo-l{order:2}}
html[data-layout="split"] .hv-split{zoom:.74}
@media (max-width:860px){html[data-layout="split"] .hv-split{zoom:.72}}
@media (min-width:861px){html[data-layout="split"] .hv-split{position:relative;right:70px}}

/* =====================================================================
   Clean mobile layer (phones). Desktop is untouched above 760px.
   ===================================================================== */
@media (max-width:760px){
  /* rhythm: one side gutter, one section spacing */
  .sec,.how,.moments,.features,.pricing,.faq,.next,.book-sec,.meaning{padding:44px 20px!important}
  .sec-head{margin-bottom:24px!important;gap:10px}
  .sec-head h2{font-size:32px!important;line-height:1.08}
  .sec-head p{font-size:14.5px}
  .eyebrow{font-size:10.5px;letter-spacing:.2em}

  /* nav */
  .nav{top:10px;width:calc(100% - 20px);padding:7px 7px 7px 12px}
  .logo-mark{width:28px;height:28px}
  .nav-cta{padding:10px 16px;font-size:13px}

  /* hero: one centred column, the photo strip carries the visuals */
  html[data-layout="split"] .hero{display:flex!important;flex-direction:column;align-items:center;text-align:center;padding:96px 20px 8px!important;gap:22px;min-height:0}
  html[data-layout="split"] .hero-copy{align-items:center;gap:14px;max-width:none}
  html[data-layout="split"] h1{font-size:44px!important;line-height:1.02}
  html[data-layout="split"] .lead{font-size:15.5px;line-height:1.6}
  html[data-layout="split"] .hero-cta{display:grid;grid-template-columns:1fr 1.25fr;gap:10px;width:100%;margin-top:4px}
  html[data-layout="split"] .hero-cta .btn{padding:14px 10px;font-size:14px}
  html[data-layout="split"] .scribble{grid-column:1/-1;position:static;justify-content:center;transform:rotate(-2deg);font-size:20px;margin-top:2px}
  html[data-layout="split"] .scribble svg{display:none}
  html[data-layout="split"] .ticks{justify-content:center;gap:6px 14px;font-size:12px}
  html[data-layout="split"] .hv-split{display:none!important}
  .strip{margin:0 -20px;width:calc(100% + 40px)}
  .strip-track{gap:12px;padding:30px 0 16px}
  .strip-track img{width:138px!important;height:196px!important}
  .live-pop{top:0;font-size:12px;padding:8px 13px 8px 10px}

  /* detik band */
  .meaning-in{gap:10px!important}
  .meaning .word{font-size:52px!important}
  .meaning .def{font-size:19px!important}
  .meaning .prose{font-size:14.5px!important}

  /* how it works: swipe row, snug */
  .hw-apps{grid-template-columns:repeat(3,220px)!important;gap:16px;margin:0 -20px;padding:4px 20px 8px}
  .hw-apps figure{gap:10px}
  .ap-desc{font-size:13.5px}

  /* moments: swipe row */
  .moment-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:0 -20px;padding:0 20px 6px;scrollbar-width:none}
  .moment-row::-webkit-scrollbar,.hw-apps::-webkit-scrollbar{display:none}
  .moment{flex:0 0 68%;scroll-snap-align:center;aspect-ratio:3/4}

  /* features: two neat columns */
  .feat-grid{grid-template-columns:1fr 1fr!important;gap:18px 14px}
  .feat{padding:14px 0 0}
  .feat .ic{width:38px;height:38px;font-size:18px;border-radius:12px;margin-bottom:4px}
  .feat b{font-size:14.5px}
  .feat p{font-size:13px;line-height:1.5}

  /* demo + pricing cards on the home page: compact rows */
  .next-grid{gap:12px}
  .next-card{grid-template-columns:104px 1fr!important;border-radius:18px}
  .next-card img{height:100%!important;min-height:150px!important}
  .next-card div{padding:16px;gap:5px}
  .next-card b{font-size:22px!important}
  .next-card p{font-size:13px;line-height:1.45}

  /* pricing */
  .pkg-grid{gap:16px;max-width:none}
  .pkg{padding:24px 20px;gap:14px;border-radius:20px}
  .pkg .pname{font-size:28px}
  .pkg .price b{font-size:46px}
  .pkg ul{font-size:14px;gap:8px}
  .addon{padding:12px 14px}

  /* booking: drop the decorative arch photo */
  .book{padding:26px 18px;border-radius:24px;gap:22px}
  .book-l h2{font-size:34px}
  .book-img{display:none}
  .form{padding:18px;border-radius:18px}

  /* faq + footer */
  .faq summary{font-size:15px;padding:16px 28px 16px 0}
  .foot{flex-direction:column;align-items:center;text-align:center;gap:8px;padding:28px 20px 90px}

  /* demo page */
  .demo.page-top{padding-top:88px!important}
  .demo-head h2{font-size:32px!important}
  .pk-pick{gap:6px}
  .pk-btn{padding:9px 10px}
  .pk-btn b{font-size:11.5px}
  .pk-btn span{font-size:19px}
  .next-in{padding:24px 18px}

  /* floating WhatsApp: smaller, out of the way */
  .wa-float{width:48px;height:48px;right:14px;bottom:14px}
}
@media (max-width:760px){.sec.page-top{padding-top:92px!important}}

/* ============ nav menu (phones) ============ */
.nav-right{display:flex;align-items:center;gap:8px}
.menu-btn,.mobile-menu{display:none}
@media (max-width:760px){
  .nav{flex-wrap:wrap}
  .nav .wordmark{display:none}
  .logo-mark{width:34px;height:34px}
  .menu-btn{display:flex;flex-direction:column;justify-content:center;gap:4px;width:40px;height:40px;border-radius:50%;border:none;background:var(--bg-2);padding:0 11px}
  .menu-btn span{display:block;height:2px;border-radius:2px;background:var(--ink);transition:transform .25s,opacity .2s}
  .menu-open .menu-btn span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .menu-open .menu-btn span:nth-child(2){opacity:0}
  .menu-open .menu-btn span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .mobile-menu{display:flex;flex-direction:column;width:100%;max-height:0;overflow:hidden;transition:max-height .3s ease}
  .menu-open .mobile-menu{max-height:260px;padding:6px 4px 6px}
  .mobile-menu a{padding:13px 10px;font:600 15px var(--sans);color:var(--ink);text-decoration:none;border-top:1px solid var(--line)}
  .mobile-menu a.on{color:var(--rose-d)}
  .menu-open{border-radius:22px}

  /* how it works: a clean vertical list, no sideways scroll */
  .hw-apps{display:flex!important;flex-direction:column;gap:12px;margin:0;padding:0;overflow:visible}
  .hw-apps figure{display:grid;grid-template-columns:96px 1fr;grid-template-rows:auto auto;column-gap:16px;row-gap:2px;align-items:center;background:var(--card);border-radius:18px;padding:12px 14px 12px 12px;box-shadow:0 10px 24px -18px rgba(30,50,40,.4)}
  .hw-apps figure>.qrc,.hw-apps figure>.aph{grid-row:1/3;zoom:.44;transform:none!important}
  .hw-apps figcaption{align-self:end;font-size:15px}
  .ap-desc{align-self:start;margin:0;max-width:none;text-align:left;font-size:13px;line-height:1.5}
  .hw-apps figure:hover .qrc,.hw-apps figure:hover .aph{transform:none!important}
}

/* phones: current-step bar above the demo phone */
.guide-mini{display:none}
@media (max-width:820px){
  .guide-mini{order:1;display:flex;align-items:center;gap:10px;width:100%;max-width:340px;margin:0 auto -6px;background:var(--card);border-radius:999px;padding:9px 16px;box-shadow:0 10px 22px -16px rgba(30,50,40,.5);font:500 13px/1.3 var(--sans);color:var(--ink)}
  .guide-mini b{color:var(--rose-d);margin-right:3px}
  .gm-dots{display:flex;gap:4px;flex-shrink:0}
  .gm-dots i{width:7px;height:7px;border-radius:50%;background:var(--line)}
  .gm-dots i.now{width:18px;border-radius:99px;background:var(--rose)}
  .gm-dots i.done{background:var(--olive)}
  .demo-grid .phone-wrap{order:2}
  .demo-side .demo-l{order:3}
  .demo-side .guide{display:none}
}
@media (max-width:820px){.guide-mini{position:sticky;top:76px;z-index:20;margin-bottom:4px}.demo-grid{overflow:visible}.demo{overflow:visible!important}}

/* phones: small wordmark back in the nav, tidier buttons */
@media (max-width:760px){
  .nav{padding:6px 6px 6px 10px;gap:8px}
  .nav .logo{gap:8px;min-width:0}
  .nav .wordmark{display:inline-flex;font-size:12px;letter-spacing:.2em;margin-right:-.2em}
  .logo-mark{width:30px;height:30px}
  .nav-right{gap:6px}
  .nav-cta{padding:9px 13px;font-size:12.5px}
  .menu-btn{width:36px;height:36px;padding:0 10px;background:transparent;box-shadow:inset 0 0 0 1.5px var(--line)}
}
@media (max-width:350px){.nav .wordmark{display:none}}
.scr-up{display:none}
@media (max-width:760px){html[data-layout="split"] .scribble{align-items:flex-end;gap:4px;padding-left:40%}html[data-layout="split"] .scribble .scr-up{display:block;margin-bottom:6px}}

/* phones: inputs at 16px+ so iOS never auto-zooms the page */
@media (max-width:820px){
  #screen input,#screen textarea,.form input{font-size:max(16px,1em)!important}
  #screen input{font-size:19px!important}
}
/* wordmark: even spacing either side of the hourglass "I", sitting on the letters' centre line */
.wordmark .hg{margin:0 .3em 0 0;transform:translateY(-.04em)}

/* date field: iOS gives date inputs their own width; make it fit like the others */
.fld input[type="date"]{-webkit-appearance:none;appearance:none;display:block;min-width:0;max-width:100%;width:100%;min-height:48px;line-height:1.3;text-align:left;background:#fff}
.fld input[type="date"]::-webkit-date-and-time-value{text-align:left}
.fld{min-width:0}

/* nav hides while scrolling down, returns on scroll up */
.nav{transition:transform .35s ease,opacity .35s ease}
html.nav-hidden .nav{transform:translate(-50%,-140%);opacity:0;pointer-events:none}
.guide-mini{transition:top .35s ease}
html.nav-hidden .guide-mini{top:10px!important}

/* iOS: never inflate text sizes on its own (it was breaking the small previews) */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* how it works on phones: scale the previews with transform, which iOS handles reliably */
@media (max-width:760px){
  .hw-apps figure>.qrc,.hw-apps figure>.aph{zoom:1!important;transform:scale(.44)!important;transform-origin:top left;margin:0 -112px -224px 0}
  .hw-apps figure>.qrc{margin-right:-123px}
  .hw-apps figure{grid-template-columns:97px 1fr;overflow:hidden}
}
.logo .wordmark,.foot-logo .wordmark{position:relative;top:.09em}

/* nav: the hidden phone menu no longer adds an empty row under the bar */
.nav{row-gap:0}
.mobile-menu{order:9}
@supports(padding:env(safe-area-inset-top)){.nav{top:calc(10px + env(safe-area-inset-top))}}

/* hero note + arrow, pointing from the note into the demo button */
.scribble .a-desk,.scribble .a-mob{transform:none!important;margin:0!important;flex-shrink:0}
.scribble .a-mob{display:none}
html[data-layout="split"] .scribble{left:calc(100% - 6px);top:-34px;bottom:auto;align-items:flex-start;gap:2px;transform:rotate(-4deg)}
html[data-layout="split"] .scribble .a-desk{display:block;margin-top:10px!important}
@media (max-width:760px){
  html[data-layout="split"] .scribble{position:static;justify-content:flex-end;align-items:flex-start;padding:0 4% 0 0!important;gap:4px;transform:none;margin-top:-4px}
  html[data-layout="split"] .scribble .a-desk,html[data-layout="split"] .scribble .scr-up{display:none!important}
  html[data-layout="split"] .scribble .a-mob{display:block!important;margin-top:-6px!important}
  html[data-layout="split"] .scr-t{display:block;transform:rotate(-3deg);margin-top:12px}
}
@media (min-width:761px){html[data-layout="split"] .scribble{top:-18px;left:calc(100% - 10px)}}
@media (min-width:761px){html[data-layout="split"] .scribble{left:calc(100% + 6px)}}
.hvp-cover{height:150px}.hvp-cover img{object-position:center 12%}