/* penerus.com v12 (2026-10-11). Soft and fluid: every block is a rounded island, the menu floats as a pill, nothing is
   cut by a hairline grid, shapes are round, motion is slow. Vincent: v11 felt "terlalu rigid, engga smooth, clunky".
   References rendered first: Awwwards Site of the Month MindMarket (floating pill menu, organic blobs, big radii),
   Mobbin: Phantom, Mercury, Wix, Luffu. One serif for headlines and figures, one sans for everything else. */
:root{
  --ink:#0B1020;--ink-2:#151C36;--bone:#F4F1EA;--card:#FFFFFF;--tint:#E9EEF8;--sand:#EDE8DC;
  --gold:#E9B44C;--gold-ink:#7A5A0C;--air:#86AEF7;
  --t:#EEF1F7;--t-mute:#A6AFC2;--k:#141826;--k-mute:#565D6D;
  --line-d:rgba(238,241,247,.14);--line-l:rgba(20,24,38,.09);
  --serif:"Newsreader",Georgia,"Times New Roman",serif;--num:var(--serif);
  --sans:"Geist",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --g:clamp(20px,4.4vw,56px);--r:clamp(26px,3.2vw,40px);--r-s:clamp(18px,2vw,24px);--gap:clamp(8px,1vw,12px);
  --ease:cubic-bezier(.22,1,.36,1)
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bone);color:var(--k);font:400 17px/1.55 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,p,ul,ol,blockquote{margin:0}
a{color:inherit;text-decoration:none}
img,svg{display:block}
:focus-visible{outline:2px solid var(--k);outline-offset:3px;border-radius:10px}
.dark :focus-visible,.top :focus-visible{outline-color:var(--gold)}
::selection{background:var(--gold);color:var(--ink)}
.wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 var(--g)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ic{width:18px;height:18px;flex:none}
section[id],form[id],main[id]{scroll-margin-top:104px}
.skip{position:absolute;left:-9999px;top:8px;z-index:99;background:var(--card);color:var(--ink);padding:12px 16px;border-radius:14px}
.skip:focus{left:8px}

/* ── the menu: one floating pill ── */
.top{position:sticky;top:10px;z-index:50;margin:10px var(--gap) 0;border-radius:999px;background:rgba(11,16,32,.9);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);color:var(--t);box-shadow:0 14px 40px -18px rgba(11,16,32,.55)}
.top-in{display:flex;align-items:center;gap:14px;min-height:60px;max-width:none;padding:0 8px 0 20px}
.brand{display:inline-flex;align-items:center;gap:10px;font:600 1.1rem/1 var(--sans);letter-spacing:-.01em;color:var(--t);min-height:44px}
.logo{width:30px;height:30px}
.tabs{margin-left:auto;min-width:0}
.tabs-in{position:relative;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.tabs-in::-webkit-scrollbar{display:none}
.tabs a{position:relative;z-index:1;display:inline-flex;align-items:center;min-height:44px;font:500 .9rem/1 var(--sans);color:var(--t-mute);padding:14px 14px;border-radius:999px;white-space:nowrap;transition:color .25s,background .25s}
.tabs a:hover{color:var(--t)}
.tabs a[aria-current]{color:var(--ink);background:var(--bone)}
.btn.top-cta{min-height:44px;padding:0 6px 0 18px;font-size:.92rem}
.top-in>.top-cta:nth-child(2){margin-left:auto}
.sb{position:absolute;left:28px;right:28px;bottom:4px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--gold),#F6D992);transform-origin:left center;transform:scaleX(0);transition:transform .2s linear;pointer-events:none}

/* ── type ── */
.kick,.idx{display:inline-flex;align-items:center;gap:8px;font:500 .84rem/1 var(--sans);padding:9px 14px 9px 12px;border-radius:999px}
.kick{color:var(--t);background:rgba(238,241,247,.09)}
.idx{color:var(--k-mute);background:rgba(20,24,38,.06)}
.kick i,.idx::before{content:"";width:8px;height:8px;flex:none;background:var(--gold);border-radius:0 50% 50% 50%;transform:rotate(45deg)}
.h-mega{font:400 clamp(2.6rem,10vw,4.6rem)/1.04 var(--serif);letter-spacing:-.022em;margin-top:22px}
.h-mega.sm{font-size:clamp(2.5rem,8.6vw,4.3rem)}
@media(min-width:901px){.hero-grid .h-mega{font-size:clamp(3rem,5.3vw,4.6rem)}}
.h2{font:400 clamp(1.95rem,3.8vw,3.1rem)/1.1 var(--serif);letter-spacing:-.02em;margin-top:18px}
.h-mega em,.h2 em{font-style:normal}
.h-mega em{color:var(--gold-ink)}.dark .h-mega em{color:var(--gold)}
.final .h-mega em,.h2 em{color:inherit}
.l{display:block;overflow:hidden;padding:.04em .1em .16em 0;margin-bottom:-.16em}
.l>span{display:block}
.js .l>span{animation:rise 1.2s var(--ease) both}
.js .l+.l>span{animation-delay:.1s}.js .l+.l+.l>span{animation-delay:.2s}
@keyframes rise{from{transform:translateY(108%)}to{transform:none}}
.lead{font-size:clamp(1.08rem,1.5vw,1.28rem);line-height:1.5;max-width:30em;color:var(--k-mute)}
.dark .lead{color:var(--t)}
.stmt{font:400 clamp(1.6rem,3.2vw,2.6rem)/1.2 var(--serif);letter-spacing:-.018em;max-width:22em;margin-top:22px}
.stmt span{color:#77756C}

/* ── buttons: pills with a round arrow badge ── */
.btn{display:inline-flex;align-items:center;gap:12px;min-height:56px;padding:0 8px 0 26px;border-radius:999px;border:0;font:500 1rem/1 var(--sans);cursor:pointer;white-space:nowrap;transition:transform .45s var(--ease),box-shadow .45s var(--ease),background .3s}
.btn:hover{transform:translateY(-2px)}
.btn .arrow{width:40px;height:40px;padding:11px;border-radius:50%;background:rgba(11,16,32,.12);transition:transform .5s var(--ease)}
.btn:hover .arrow{transform:rotate(-45deg)}
.btn-gold{background:var(--gold);color:#17120A;box-shadow:0 14px 30px -16px rgba(233,180,76,.9)}
.btn-bone{background:var(--bone);color:var(--ink)}
.btn-primary{background:var(--ink);color:var(--bone)}.btn-primary .arrow{background:rgba(238,241,247,.14)}
.btn-line{padding:0 26px;background:rgba(238,241,247,.09);color:var(--t)}
.top-cta .arrow{width:32px;height:32px;padding:8px}

/* ── sections are islands ── */
.sec{padding:clamp(64px,8.5vw,120px) 0}
.alt{background:var(--sand);margin:0 var(--gap);border-radius:var(--r)}
.dark{background:var(--ink);color:var(--t)}
.sec.dark,.hero.dark{margin:0 var(--gap);border-radius:var(--r);position:relative;overflow:hidden}
.sec.dark::before,.hero::before{content:"";position:absolute;pointer-events:none;border-radius:50%;filter:blur(70px);opacity:.55;width:52vw;height:52vw;max-width:760px;max-height:760px;right:-12vw;top:-18vw;background:radial-gradient(closest-side,#2C4DA8,transparent 72%);animation:float 16s ease-in-out infinite alternate}
.sec.dark::after,.hero::after{content:"";position:absolute;pointer-events:none;border-radius:50%;filter:blur(80px);opacity:.38;width:40vw;height:40vw;max-width:560px;max-height:560px;left:-12vw;bottom:-16vw;background:radial-gradient(closest-side,#C9952F,transparent 70%);animation:float 20s ease-in-out infinite alternate-reverse}
@keyframes float{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-5vw,4vw,0) scale(1.14)}}
.sec.dark>.wrap,.hero>.wrap{position:relative;z-index:1}
.js .rv{opacity:0;transform:translateY(28px) scale(.985);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.js .rv.in{opacity:1;transform:none}

/* ── hero ── */
.hero{margin-top:var(--gap)!important;padding:clamp(40px,6vw,88px) 0 clamp(48px,7vw,96px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(28px,5vw,80px);align-items:center}
.hero-grid .lead,.phero .lead{margin-top:clamp(20px,2.6vw,30px)}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}

.stream{margin-top:clamp(30px,4vw,46px);max-width:560px}
.stream-cap{display:flex;justify-content:space-between;font:500 .84rem/1 var(--sans);color:var(--t-mute);margin-bottom:12px}
.stream-body{position:relative;padding-bottom:112px}
.stream-body svg{width:100%;height:56px;overflow:visible}
.glint{stroke-dasharray:60 540;animation:glint 5.5s linear infinite}
.stream.live .glint{animation:none;stroke-dasharray:46 254}
@keyframes glint{from{stroke-dashoffset:600}to{stroke-dashoffset:0}}
/* each leak is a pill you can tap: closed = gold, its drip stops, the ribbon after it stays thick */
.leak{box-shadow:inset 0 0 0 1.5px rgba(233,180,76,.6);position:absolute;left:var(--x);top:92px;transform:translateX(-50%);display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:0;border-radius:999px;background:rgba(238,241,247,.1);color:var(--t);font:500 .84rem/1 var(--sans);white-space:nowrap;cursor:pointer;transition:background .5s var(--ease),color .5s var(--ease),transform .5s var(--ease),box-shadow .5s var(--ease)}
@media(hover:hover){.leak:hover{transform:translateX(-50%) translateY(-3px)}}
.leak::before{content:"";position:absolute;left:50%;top:-34px;width:12px;height:12px;margin-left:-6px;background:var(--gold);border-radius:0 50% 50% 50%;transform:rotate(45deg);animation:drip 3.2s cubic-bezier(.5,0,.85,.5) infinite;animation-delay:calc(var(--i)*.7s)}
.leak[aria-pressed="true"]{background:var(--gold);color:#17120A;box-shadow:0 12px 24px -14px rgba(233,180,76,.9)}
.leak[aria-pressed="true"]::before{animation:none;opacity:0}
.stream-note{display:none;margin-top:4px;font:400 .9rem/1.4 var(--sans);color:var(--t-mute)}
.js .stream-note{display:block}
@keyframes drip{0%{transform:translateY(-6px) rotate(45deg) scale(.2);opacity:0}18%{transform:translateY(0) rotate(45deg) scale(1);opacity:1}75%{opacity:1}100%{transform:translateY(40px) rotate(45deg) scale(.7);opacity:0}}

/* ── form (always on ink) ── */
.lead-card{position:relative;border-radius:var(--r);padding:clamp(22px,2.8vw,34px);background:rgba(238,241,247,.07);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:var(--t);box-shadow:inset 0 0 0 1px var(--line-d)}
.lead-card h2{font:400 1.6rem/1.15 var(--serif);letter-spacing:-.012em;margin-bottom:6px}
.fld{display:block;margin-top:14px;font:500 .84rem/1 var(--sans);color:var(--t-mute)}
.fld input{display:block;width:100%;min-height:52px;margin-top:8px;padding:0 18px;background:rgba(238,241,247,.08);border:1px solid transparent;border-radius:16px;color:var(--t);font:400 1.05rem/1.2 var(--sans);outline:0;transition:border-color .25s,background .25s}
.fld input::placeholder{color:#A6AFC2}
.fld input:focus{border-color:var(--gold);background:rgba(238,241,247,.12)}
.fld input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.fld input:-webkit-autofill{-webkit-text-fill-color:var(--t);-webkit-box-shadow:0 0 0 60px var(--ink-2) inset;caret-color:var(--t)}
.ck{display:flex;gap:12px;align-items:flex-start;margin:18px 0;font-size:.86rem;line-height:1.45;color:var(--t-mute);cursor:pointer}
.ck input{flex:none;width:22px;height:22px;margin:0;accent-color:var(--gold)}
.ck a{color:var(--t);text-decoration:underline;text-underline-offset:3px}
.lead-card .btn{width:100%;justify-content:space-between}
.fine{font:400 .82rem/1.5 var(--sans);color:var(--t-mute);margin-top:14px;text-align:center}
.hp{position:absolute;left:-9999px}

/* ── sample result ── */
.sample{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,6vw,96px);align-items:center}
.num{font:400 clamp(2.9rem,6.6vw,5.2rem)/.96 var(--num);font-variant-numeric:lining-nums;letter-spacing:-.025em;color:var(--gold);margin-top:clamp(22px,3vw,38px);white-space:nowrap}
.num small{font-size:.38em;letter-spacing:0}
.num-jam{font:500 1.05rem/1.3 var(--sans);color:var(--gold);margin-top:10px}
.num-jam[hidden]{display:none}
.num-cap{font:400 .9rem/1.5 var(--sans);color:var(--t-mute);margin:12px 0 28px}
.sheet{background:var(--card);color:var(--k);border-radius:var(--r);padding:clamp(22px,3vw,38px);transform:rotate(-1.4deg);box-shadow:0 50px 90px -40px rgba(0,0,0,.7)}
.sheet .lbl{display:inline-block;font:500 .8rem/1 var(--sans);color:var(--gold-ink);background:#F6EBCF;padding:8px 12px;border-radius:999px}
.sheet h3{font:400 clamp(1.3rem,2vw,1.6rem)/1.2 var(--serif);letter-spacing:-.012em;margin:16px 0 20px}
.meter{height:14px;border-radius:99px;background:#EEEAE0;overflow:hidden}
.meter i{display:block;height:100%;width:6%;margin-left:94%;border-radius:99px;background:var(--gold-ink)}
.meter-l{display:flex;justify-content:space-between;gap:12px;font:400 .84rem/1.4 var(--sans);color:var(--k-mute);margin:10px 0 18px}
.mini{list-style:none;padding:0;counter-reset:m;display:grid;gap:8px}
.mini li{counter-increment:m;display:flex;gap:14px;align-items:center;padding:12px 16px;border-radius:16px;background:#F6F3EC}
.mini li::before{content:counter(m);flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:500 .86rem/1 var(--sans);background:var(--ink);color:var(--bone)}
.fine2{font-size:.82rem;line-height:1.5;color:var(--k-mute);margin-top:14px}
.only-m{display:none}

/* ── four places: soft cards ── */
.four{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);margin-top:clamp(30px,4.4vw,56px)}
.four>div{padding:24px 24px 28px;border-radius:var(--r);background:var(--card);transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.four>div:hover{transform:translateY(-6px);box-shadow:0 30px 50px -34px rgba(20,24,38,.45)}
.four .n{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--tint);font:500 .86rem/1 var(--sans);color:var(--k)}
.four h3{font:400 clamp(1.4rem,2vw,1.75rem)/1.1 var(--serif);letter-spacing:-.015em;margin:clamp(34px,5vw,64px) 0 8px}
.four div>span:last-child{color:var(--k-mute)}

/* ── three steps ── */
.steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);margin-top:clamp(30px,4.4vw,56px)}
.steps li{padding:24px;border-radius:var(--r);background:rgba(255,255,255,.62)}
.steps .big{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--ink);color:var(--gold);font:400 1.5rem/1 var(--num)}
.steps h3{font:500 1.2rem/1.25 var(--sans);letter-spacing:-.01em;margin-top:22px}
.steps li>span:last-child{display:block;color:var(--k-mute);margin-top:6px}

/* ── Penerus OS ── */
.os{display:flex;justify-content:space-between;align-items:flex-end;gap:20px 60px;flex-wrap:wrap}
.chips{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(26px,4vw,44px)}
.chips li{padding:14px 22px;border-radius:999px;background:var(--card);font:400 clamp(1.15rem,1.9vw,1.5rem)/1 var(--serif);letter-spacing:-.01em;transition:transform .5s var(--ease),background .3s}
.chips li:nth-child(3n+1){background:var(--tint)}
.chips li:nth-child(3n+2){background:#F6EBCF}
.chips li:hover{transform:translateY(-4px) rotate(-1.5deg)}

/* ── packages: three soft cards ── */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);margin-top:clamp(30px,4.4vw,56px);align-items:stretch}
.plan{display:flex;flex-direction:column;padding:clamp(24px,2.8vw,36px);border-radius:var(--r);background:rgba(238,241,247,.07);box-shadow:inset 0 0 0 1px var(--line-d)}
.plan.best{background:var(--bone);color:var(--k);box-shadow:0 40px 70px -40px rgba(0,0,0,.8)}
.pn{min-height:3.4em;font:500 1rem/1.4 var(--sans);color:var(--t)}
.best .pn{color:var(--k)}
.flag{display:flex;width:max-content;align-items:center;gap:8px;margin-bottom:10px;padding:7px 12px;border-radius:999px;background:#F6EBCF;color:var(--gold-ink);font:500 .8rem/1 var(--sans)}
.flag::before{content:"";width:8px;height:8px;background:var(--gold);border-radius:0 50% 50% 50%;transform:rotate(45deg)}
.pp{font:400 clamp(2.2rem,3.4vw,3rem)/1 var(--num);font-variant-numeric:lining-nums;letter-spacing:-.02em;margin:clamp(18px,2.6vw,34px) 0 10px;white-space:nowrap}
.pp small{font:400 .9rem/1 var(--sans);letter-spacing:0;color:var(--t-mute);margin:0 .35em}
.pp small:first-child{margin-left:0}
.best .pp small{color:var(--k-mute)}
.ps{font:400 .9rem/1.4 var(--sans);color:var(--t-mute)}.best .ps{color:var(--k-mute)}
.plan ul{list-style:none;padding:0;margin-top:24px;display:grid;gap:12px}
.plan li,.pts li{display:flex;gap:12px;align-items:baseline;line-height:1.4}
.plan li::before,.pts li::before{content:"";flex:none;width:8px;height:8px;background:var(--gold);border-radius:0 50% 50% 50%;transform:translateY(-2px) rotate(45deg)}
.filt{margin-top:auto;padding-top:24px;font:400 .86rem/1.55 var(--sans);color:var(--gold)}
.price-foot{font:400 .9rem/1.6 var(--sans);color:var(--t-mute);margin-top:22px;max-width:60em}

/* ── founder, faq, final ── */
.quote{font:400 clamp(1.45rem,2.7vw,2.1rem)/1.34 var(--serif);letter-spacing:-.015em;max-width:24em;margin-top:22px}
.sig{margin-top:26px;font:500 1.02rem/1.3 var(--sans)}
.sig span{display:block;font:400 .9rem/1.5 var(--sans);color:var(--k-mute);margin-top:2px}
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,6vw,90px);align-items:start}
.faq{display:grid;gap:10px}
.qa{border-radius:var(--r-s);background:var(--card);transition:background .3s}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 22px;font:500 1.06rem/1.3 var(--sans);letter-spacing:-.005em}
.qa summary::-webkit-details-marker{display:none}
.pm{position:relative;flex:none;width:34px;height:34px;border-radius:50%;background:var(--tint)}
.pm::before,.pm::after{content:"";position:absolute;left:10px;right:10px;top:16.25px;height:1.5px;border-radius:2px;background:currentColor;transition:transform .5s var(--ease)}
.pm::after{transform:rotate(90deg)}.qa[open] .pm::after{transform:none}
.ans{padding:0 22px 22px;color:var(--k-mute);max-width:44em}
.final .h-mega{margin-top:0}
.final-row{display:flex;justify-content:space-between;align-items:center;gap:22px 40px;flex-wrap:wrap;margin-top:clamp(26px,4vw,48px)}

/* ── footer: one more island ── */
footer{margin:var(--gap);border-radius:var(--r);padding:clamp(40px,5vw,72px) 0 0;overflow:hidden;position:relative}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:34px}
.foot-brand p{color:var(--t-mute);max-width:26em;margin-top:14px;font-size:.95rem}
.foot-col{display:flex;flex-direction:column;align-items:flex-start}
.fh{font:500 .84rem/1 var(--sans);color:var(--t-mute);margin-bottom:8px}
.foot-col a{display:inline-flex;align-items:center;min-height:44px;color:var(--t);transition:color .25s,transform .4s var(--ease)}
.foot-col a:hover{color:var(--gold);transform:translateX(4px)}
.foot-legal{margin-top:34px;padding:22px 0 0;border-top:1px solid var(--line-d);color:var(--t-mute);font-size:.84rem;line-height:1.55}
.foot-legal p{max-width:64em}
.cp{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px 20px;margin-top:10px}
.mega{font:400 clamp(5rem,24vw,22rem)/.86 var(--serif);letter-spacing:-.04em;text-align:center;color:rgba(238,241,247,.06);margin:clamp(14px,2vw,28px) 0 -.12em;user-select:none;white-space:nowrap}

/* ── pilates page ── */
.phero{display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(28px,5vw,80px);align-items:center}
.phone{width:min(292px,74vw);margin-inline:auto;padding:9px;border-radius:46px;background:#05070B;box-shadow:0 50px 90px -40px rgba(11,16,32,.6),inset 0 0 0 1px rgba(255,255,255,.14)}
.phone img{width:100%;height:auto;border-radius:37px}
.hero-phone .phone{transform:rotate(4deg);animation:bob 9s ease-in-out infinite alternate}
@keyframes bob{from{transform:rotate(4deg) translateY(0)}to{transform:rotate(2.5deg) translateY(-12px)}}
.fns{display:grid;gap:var(--gap);margin-top:clamp(30px,4.4vw,56px)}
.fn{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,6vw,96px);align-items:center;padding:clamp(28px,4.5vw,64px);border-radius:var(--r);background:var(--card)}
.fn:nth-child(even){background:var(--tint)}
.fn.flip>div:last-child{order:-1}
.fn h3{font:400 clamp(1.7rem,3.1vw,2.5rem)/1.12 var(--serif);letter-spacing:-.018em;margin:18px 0 22px;max-width:13em}
.fn p{font-size:1.1rem;line-height:1.5;color:var(--k-mute);max-width:26em}
.fn.solo{background:none;padding:0 var(--g)}
.fn.solo p{margin-top:20px}
.pts{list-style:none;padding:0;display:grid;gap:10px;max-width:30em}
.pts li{padding:14px 18px;border-radius:16px;background:rgba(20,24,38,.045);color:var(--k)}

/* ── small pages ── */
.doc{max-width:780px;margin:0 auto;padding:clamp(48px,7vw,96px) var(--g) clamp(64px,8vw,110px)}
.doc h1{font:400 clamp(2rem,4.6vw,3rem)/1.08 var(--serif);letter-spacing:-.02em;margin-bottom:16px}
.doc .upd{font:400 .86rem/1.5 var(--sans);color:var(--k-mute);margin-bottom:10px}
.doc h2{font:500 1.16rem/1.3 var(--sans);margin:34px 0 8px}
.doc h4{font:500 1rem/1.3 var(--sans);margin:20px 0 6px}
.doc p,.doc li{color:#3A3F4B}
.doc p+p{margin-top:10px}
.doc ul{padding-left:20px;margin:8px 0}
.doc a{text-decoration:underline;text-underline-offset:3px}
.doc .btn{text-decoration:none;padding:0 26px}

/* ── narrow ── */
@media(max-width:900px){
  .top{border-radius:28px}
  .top-in{flex-wrap:wrap;gap:0 10px;min-height:0;padding:6px 6px 0 16px}
  .top-in>.top-cta{margin-left:auto}
  .tabs{order:3;width:100%;margin:4px 0 6px}
  .tabs a{padding:13px 13px;font-size:.88rem}
  .top-in:not(:has(.tabs)){padding-bottom:6px}
  section[id],form[id],main[id]{scroll-margin-top:132px}
  .hero-grid,.sample,.phero,.fn,.faq-grid{grid-template-columns:1fr}
  .stream{max-width:none}
  .leak{font-size:.8rem;padding:0 11px}
  .four{grid-template-columns:1fr 1fr}
  .four h3{margin-top:28px}
  .steps,.plans{grid-template-columns:1fr}
  .steps li{display:grid;grid-template-columns:auto 1fr;column-gap:18px;align-items:center}
  .steps .big{grid-row:span 2}
  .steps h3{margin-top:0;align-self:end}
  .steps li>span:last-child{margin-top:2px;align-self:start}
  .pn{min-height:0}
  .fn.flip>div:last-child{order:0}
  .fn .phone img{aspect-ratio:560/880;object-fit:cover;object-position:top}
  .hide-m{display:none}
  .only-m{display:inline-flex;margin-top:30px}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1/-1}
}
@media(max-height:560px){.top{position:static}}
@media print{.js .rv{opacity:1;transform:none}.top{position:static}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rv{opacity:1;transform:none}
  .leak::before{opacity:1;transform:translateY(8px) rotate(45deg)}
}

/* ── the example you can touch: close a leak, the total grows (invented konveksi case, hq/outreach/contoh-audit-bocor.md) ── */
.sim{background:var(--card);color:var(--k);border-radius:var(--r);padding:clamp(18px,2.4vw,28px);box-shadow:0 50px 90px -40px rgba(0,0,0,.7)}
.sim .lbl{display:inline-block;font:500 .8rem/1 var(--sans);color:var(--gold-ink);background:#F6EBCF;padding:8px 12px;border-radius:999px}
.sim-rows{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:8px}
.sim-row{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:6px 14px;width:100%;padding:14px 16px;border:0;border-radius:20px;background:#F6F3EC;color:inherit;font:inherit;text-align:left;cursor:pointer;transition:background .5s var(--ease),transform .5s var(--ease)}
@media(hover:hover){.sim-row:hover{transform:translateY(-2px)}}
.sim-t{display:grid;gap:2px;min-width:0}
.sim-t b{font:500 1.02rem/1.25 var(--sans)}
.sim-t>span{color:var(--k-mute);font-size:.92rem;line-height:1.35}
.sim-t em{font-style:normal;font-size:.92rem;line-height:1.35;color:var(--gold-ink);display:block;max-height:0;overflow:hidden;opacity:0;transition:max-height .6s var(--ease),opacity .6s var(--ease),margin .6s var(--ease)}
.sim-r{font:400 1.12rem/1 var(--num);font-variant-numeric:lining-nums;white-space:nowrap;color:var(--k-mute);transition:color .4s}
.sw{position:relative;flex:none;width:46px;height:28px;border-radius:99px;background:#D9D4C7;transition:background .45s var(--ease)}
.sw::after{content:"";position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(20,24,38,.25);transition:transform .45s var(--ease)}
.sim-row[aria-checked="true"]{background:#F6EBCF}
.sim-row[aria-checked="true"] .sim-r{color:var(--k)}
.sim-row[aria-checked="true"] .sw{background:var(--gold-ink)}
.sim-row[aria-checked="true"] .sw::after{transform:translateX(18px)}
.sim-row[aria-checked="true"] .sim-t em{max-height:4.4em;opacity:1;margin-top:4px}
#sim-count{font-weight:500;color:var(--t)}
/* on a phone the big total scrolls away while she taps: the same figure rides at the foot of the card */
.sim-sum{display:none}
@media(max-width:900px){.sim-sum{display:flex;justify-content:space-between;align-items:center;gap:12px;position:sticky;bottom:12px;z-index:2;margin-top:12px;padding:14px 20px;border-radius:999px;background:var(--ink);color:var(--t);font:500 .92rem/1 var(--sans);box-shadow:0 18px 30px -18px rgba(11,16,32,.7)}.sim-sum b{font:400 1.2rem/1 var(--num);font-variant-numeric:lining-nums;color:var(--gold);white-space:nowrap}.sim-sum small{font-size:.8em}}
@media(max-width:520px){.sim-row{grid-template-columns:1fr auto}.sim-r{grid-column:1;grid-row:2}.sw{grid-column:2;grid-row:1 / span 2}}

/* three example businesses; the page never adds leaks together (they overlap): it shows the largest one closed */
.num-lbl{font:500 .9rem/1 var(--sans);color:var(--t-mute);margin-top:clamp(20px,3vw,34px)}
.num-lbl+.num{margin-top:8px}
.keep{display:flex;align-items:center;gap:14px;margin:0 0 28px;font:500 .84rem/1 var(--sans);color:var(--t-mute)}
.keep i{flex:1;max-width:260px;height:calc(6px + var(--n,1)*7px);border-radius:99px;background:linear-gradient(90deg,var(--gold),#F6D992);transition:height .8s var(--ease)}
.sim-tabs{display:none;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.js .sim-tabs{display:flex}
.sim-tabs button{min-height:44px;border:0;cursor:pointer;font:500 .9rem/1 var(--sans);padding:12px 16px;border-radius:999px;background:#F6F3EC;color:var(--k-mute);transition:background .3s,color .3s}
.sim-tabs button[aria-pressed="true"]{background:var(--ink);color:var(--bone)}
.sim-rows[hidden]{display:none}
.sim .sim-rows{margin-top:0}
.sim .lbl{display:none}
.sim-row.none{cursor:default;background:none;box-shadow:inset 0 0 0 1px var(--line-l)}
.sim-row.none:hover{transform:none}
.sim-row.none .sim-r{font:400 .9rem/1 var(--sans)}
.sim-r{display:grid;justify-items:end;gap:4px}
.nk{font:400 .74rem/1.2 var(--sans);font-style:normal;color:var(--k-mute);white-space:nowrap}
@media(max-width:520px){.sim-r{justify-items:start}}

/* review 2026-10-12: focus ring that shows on the white card; the big figure fits 360px; on a phone the plans read
   small to large, so "Semua isi Siap Pakai" comes after Siap Pakai */
.sim :focus-visible{outline-color:var(--k)}
@media(max-width:400px){.num{font-size:2.5rem}}
/* 13 Okt: the plans are a ladder (gratis, Kejelasan, + Sistem): same order at every width, so no reordering on phones */

/* review nits 2026-10-12: a hidden field scrolls clear of the floating menu when the browser points at it; without
   the script the pills and switches are not controls and the ribbon holds still */
.fld input{scroll-margin-top:140px}
html:not(.js) .leak,html:not(.js) button.sim-row{pointer-events:none;cursor:default}
html:not(.js) .glint{animation:none}

/* 2026-10-12 (Vincent: smooth between sections; the tapped item lit; a line in the bar that moves with the scroll).
   The lit item is one pill that slides; without the script the item's own background (above) still marks it. */
.ink{position:absolute;left:0;top:0;width:0;height:0;border-radius:999px;background:var(--bone);opacity:0;pointer-events:none;transition:transform .55s var(--ease),width .55s var(--ease),opacity .3s}
.has-ink a[aria-current]{background:none}
@media(max-width:900px){.sb{left:22px;right:22px;bottom:3px}}
@keyframes sec-in{from{opacity:.35;transform:translateY(46px) scale(.97)}to{opacity:1;transform:none}}
@supports (animation-timeline:view()){
  @media(prefers-reduced-motion:no-preference){
    .sec{animation:sec-in linear both;animation-timeline:view();animation-range:entry 0% entry 62%}
  }
}
@media(prefers-reduced-motion:reduce){.ink,.sb{transition:none}}
@media print{.sb,.ink{display:none}}

/* samples by scale (13 Okt): the package that fits the sample, and a label for the scale chips */
.num-pkt{margin:10px 0 14px;font-size:.95rem;color:var(--t-mute)}
.num-pkt b{color:var(--gold);font-weight:500}
/* v23: the package line sits under the button, on wide screens and on phones */
.btn+.num-pkt{margin-top:14px}
@media(max-width:900px){.num-pkt.only-m{display:block;margin-top:14px}}
.plans+.kick{margin-top:clamp(40px,5vw,64px)}
.sim-tl{align-self:center;margin-right:2px;font-size:.8rem;color:var(--k-mute);white-space:nowrap}
/* phone: the scale label takes its own line so the three chips sit on one row (13 Okt) */
@media (max-width:520px){.sim-tl{flex-basis:100%;margin:0 0 2px 4px}}
/* pause for everything that moves by itself (13 Okt, WCAG 2.2.2): icon only, beside the ribbon's note */
.stream{position:relative}
.jeda{position:absolute;right:0;bottom:-10px;width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:var(--t-mute);cursor:pointer}
.jeda[hidden]{display:none}
.jeda:hover{color:var(--bone)}
.jeda:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.jeda .j1,.jeda[aria-pressed="true"] .j0{display:none}
.jeda[aria-pressed="true"] .j1{display:block}
.jeda-on *,.jeda-on *::before,.jeda-on *::after{animation:none!important}
.hero-phone{position:relative}
.hero-phone .jeda{right:4px;bottom:4px}
.price-foot a{color:var(--gold);text-underline-offset:3px}
/* Paket (13 Okt): four stages and four plans; four across on wide screens, two by two between, one column on phones */
@media(min-width:1101px){.steps.empat,.plans.empat{grid-template-columns:repeat(4,1fr)}}
@media(min-width:701px) and (max-width:1100px){.steps.empat,.plans.empat{grid-template-columns:repeat(2,1fr)}}
#syarat .os{gap:40px 60px}
/* 14 Okt: the "Intinya" flag no longer pushes its price below the neighbours'; cards without a price lose the empty
   band under the name; a group label sits with its own cards; the price notes read as one block; the link is underlined */
@media(min-width:701px){.plans.empat .pn{min-height:3.75em}}
@media(min-width:901px){.plans:not(.empat) .pn{min-height:2.8em}}
.kick+.plans{margin-top:clamp(16px,2vw,24px)}
.plans+.price-foot{margin-top:28px}
.price-foot+.price-foot{margin-top:8px}
.price-foot a{text-decoration:underline}

/* v23 mobbin pass */
.l{padding-bottom:.24em;margin-bottom:-.24em}
.plan-cta{margin-top:auto;align-self:stretch;justify-content:center;min-height:48px;padding:0 20px;background:rgba(238,241,247,.09);color:var(--t);box-shadow:inset 0 0 0 1px var(--line-d);font-size:.95rem}
.plan ul+.plan-cta{margin-top:auto}
.plan>ul{margin-bottom:24px}
.plan.best .plan-cta{background:var(--gold);color:#17120A;box-shadow:0 14px 30px -16px rgba(233,180,76,.9)}
.plan.best{box-shadow:0 0 0 2px var(--gold),0 40px 70px -40px rgba(0,0,0,.8)}
@media(min-width:901px){.plan.best{transform:translateY(-8px)}}
@media(max-width:700px){.plan-cta{white-space:normal;text-align:center}}
@media(prefers-reduced-motion:reduce){.plan.best{transform:none}}

/* v23b empat bocor */
.urut-lead{margin-top:18px;max-width:46em}
.urut{list-style:none;padding:0;margin:clamp(24px,3.4vw,40px) 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.urut li{display:flex;flex-direction:column;gap:10px;padding:clamp(20px,2.4vw,30px);border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line,rgba(11,16,32,.12))}
.urut .n{font:500 .85rem/1 var(--sans);opacity:.6}
.urut p{line-height:1.45;flex:1}
.urut .kapan{align-self:flex-start;padding:7px 12px;border-radius:999px;background:#F6EBCF;color:var(--gold-ink);font:500 .82rem/1.3 var(--sans)}
.urut-foot{margin:24px 0 20px}
@media(max-width:1100px){.urut{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.urut{grid-template-columns:1fr}}

/* v23c: headings scroll normally, solid nav (Vin 14 Okt) */
.js .h2.rv,.js .idx.rv,.js .kick.rv,.js .rv>.h2,.js .rv>.idx,.js .rv>.kick{transform:none!important}
.js .h2.rv,.js .idx.rv,.js .kick.rv{transition:opacity .6s var(--ease)}
.top{top:0;margin:0;border-radius:0;background:#0B1020;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 1px 0 rgba(238,241,247,.08)}
@media(max-width:900px){.top{border-radius:0}}

/* v24 */
.paket-lead{margin-top:16px;max-width:44em;color:var(--t)}
.pita{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:24px}
.pita-l{font:500 .92rem/1.2 var(--sans);color:var(--t-mute);margin-right:6px}
.pita button{min-height:44px;padding:0 18px;border-radius:999px;border:0;cursor:pointer;font:500 .92rem/1 var(--sans);background:rgba(238,241,247,.09);color:var(--t);box-shadow:inset 0 0 0 1px var(--line-d)}
.pita button[aria-pressed="true"]{background:var(--gold);color:#17120A;box-shadow:none}
.pita-note{margin-top:12px;color:var(--gold)}
#paket[data-pita="3"] .plan .pp{font-size:1.6rem}
.more{margin:0 0 18px;border-top:1px solid var(--line-d);padding-top:12px}
.best .more{border-top-color:rgba(11,16,32,.12)}
.more summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font:500 .92rem/1 var(--sans);color:var(--gold);list-style:none}
.best .more summary{color:var(--gold-ink)}
.more summary::-webkit-details-marker{display:none}
.more summary::after{content:"+";margin-left:auto;font-size:1.2rem}
.more[open] summary::after{content:"\2212"}
.more dl{display:grid;gap:4px;font-size:.9rem;line-height:1.45}
.more dt{font-weight:600;margin-top:8px}
.more dd{margin:0;opacity:.85}
.plan>ul{margin-bottom:16px}
@media(max-width:700px){.tabs-in{justify-content:space-between}.tabs a{padding:12px 8px;font-size:.8rem}}

/* v24b omzet */
.pita-l small{font-size:.82rem;opacity:.8}
.pita-hint{margin-top:8px;font-size:.85rem;color:var(--t-mute)}

/* v24c terbit: teks dekoratif .mega lewat pseudo-elemen */
.mega::before{content:attr(data-t)}
/* v26 */
.fld select{display:block;width:100%;min-height:52px;margin-top:8px;padding:0 18px;background:rgba(238,241,247,.08);border:1px solid transparent;border-radius:16px;color:var(--t);font:400 1.05rem/1.2 var(--sans);outline:0;appearance:none}
.fld select:focus{border-color:var(--gold)}
.fld select option{color:#0B0F17}
@media(min-width:1101px){.urut.tiga{grid-template-columns:repeat(3,1fr)}}
/* v27 river: three kinds of leak, then a new branch (the flow carried on) */
.stream-body{padding-bottom:58px}
.stream-body svg{height:96px}
.leak{top:104px}
.leak:not([data-k="hilang"])::before{display:none}
.murk{transition:opacity .7s cubic-bezier(.2,.7,.2,1);animation:keruh 4.8s ease-in-out infinite alternate}
@keyframes keruh{from{opacity:.82}to{opacity:.96}}
.stream.t-tak .murk{opacity:0;animation:none}
.drain{stroke-dasharray:5 9;animation:alir 1.1s linear infinite;transition:opacity .6s}
@keyframes alir{to{stroke-dashoffset:-28}}
.pool{transition:opacity .6s}
.stream.t-buang .drain,.stream.t-buang .pool{opacity:0}
.branch{stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s cubic-bezier(.2,.7,.2,1)}
.stream.penuh .branch{stroke-dashoffset:0}
.cabang{position:absolute;right:0;top:-36px;font:500 .78rem/1 var(--sans);color:var(--gold);opacity:0;transform:translateY(6px);transition:opacity .5s .7s,transform .5s .7s}
.stream.penuh .cabang{opacity:1;transform:none}
.stream.penuh .stream-cap .sisa{visibility:hidden}
html.jeda-on .murk,html.jeda-on .drain{animation:none}
@media (prefers-reduced-motion:reduce){.murk,.drain{animation:none}.branch,.cabang{transition:none}}
/* v27 form: reasons beside labels, business type as tap chips (no dropdown), WhatsApp beside the form */
.mikro{margin:-4px 0 18px;font:500 .85rem/1.4 var(--sans);color:var(--t-mute)}
.fld small,.pilih small{font-weight:400;opacity:.75;margin-left:6px}
.fld input{font-size:max(16px,1.05rem)}
.pilih{border:0;padding:0;margin:14px 0 0;min-width:0}
.pilih legend{padding:0;margin-bottom:8px;font:500 .84rem/1 var(--sans);color:var(--t-mute)}
.pilih label{display:inline-block;margin:0 6px 8px 0;cursor:pointer}
.pilih input{position:absolute;opacity:0;width:1px;height:1px}
.pilih span{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:999px;background:rgba(238,241,247,.08);color:var(--t);font:500 .9rem/1 var(--sans);transition:background .2s,color .2s}
.pilih input:checked+span{background:var(--gold);color:#17120A}
.pilih input:focus-visible+span{outline:2px solid var(--gold);outline-offset:2px}
.wa-alt{display:block;margin-top:14px;text-align:center;font:500 .9rem/1.4 var(--sans);color:var(--t-mute);text-decoration:underline;text-underline-offset:3px}
.wa-alt:hover{color:var(--t)}
.tipe{display:block;font:600 .68rem/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--gold);font-style:normal;margin-bottom:4px}
/* v27 three leaks: a list with a tag per row and one owner row at the end (Mobbin: Beside "three jobs") */
.tiga-bocor{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:start}
.tiga-bocor .lead{margin-top:16px;max-width:30em}
.baris{list-style:none;margin:0;padding:0}
.baris li{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:14px;align-items:start;padding:22px 0;border-bottom:1px solid var(--line,rgba(11,16,32,.12))}
.baris li:first-child{padding-top:4px}
.baris .bn{font:500 .9rem/1.6 var(--sans);opacity:.55}
.baris h3{font:500 1.08rem/1.3 var(--sans);margin-bottom:4px}
.baris p{line-height:1.5;opacity:.82}
.baris .tag{font:500 .74rem/1 var(--sans);padding:7px 10px;border-radius:999px;background:rgba(11,16,32,.06);white-space:nowrap;margin-top:2px}
.baris li.milik{margin-top:14px;border:0;border-radius:var(--r);padding:20px 18px;background:var(--k,#141826);color:var(--t,#EEF1F7)}
.baris li.milik .bn{color:var(--gold);opacity:1}
.baris li.milik .tag{background:var(--gold);color:#17120A}
@media(max-width:900px){.tiga-bocor{grid-template-columns:1fr}.baris li{grid-template-columns:22px minmax(0,1fr)}.baris .tag{grid-column:2;justify-self:start}}
/* v27b: hero = one message + one button; the river is its picture. The form lives once, at the end (#audit). */
@media(min-width:901px){.hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}}
.hero .cta{margin-top:30px}
.hero .mikro{margin:14px 0 0}
.hero-river .stream{margin-top:0;max-width:none}
.akhir-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,80px);align-items:start}
.lalu{list-style:none;padding:0;margin:clamp(26px,4vw,44px) 0 0;max-width:30em}
.lalu li{display:grid;grid-template-columns:112px minmax(0,1fr);gap:14px;padding:14px 0;border-top:1px solid var(--line-d,rgba(238,241,247,.14));font:400 1rem/1.45 var(--sans)}
.lalu b{font-weight:500;color:var(--gold)}
.lalu span{color:var(--t-mute)}
.bar-cta{display:none}
@media(max-width:900px){
  .akhir-grid{grid-template-columns:1fr}
  .hero-river{margin-top:8px}
  .bar-cta{display:flex;position:fixed;z-index:60;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));min-height:54px;padding:0 10px 0 22px;align-items:center;justify-content:space-between;border-radius:999px;background:var(--gold);color:#17120A;font:600 1rem/1 var(--sans);text-decoration:none;box-shadow:0 14px 30px -12px rgba(0,0,0,.55);transform:translateY(160%);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
  .bar-cta.on{transform:none}
  .bar-cta[hidden]{display:none}
  .bar-cta .ic{width:36px;height:36px;padding:9px;border-radius:50%;background:rgba(23,18,10,.12)}
  footer{padding-bottom:84px}
}
@media (prefers-reduced-motion:reduce){.bar-cta{transition:none}}
@media(max-width:420px){.lalu li{grid-template-columns:1fr;gap:2px}}
/* v27b audit: every tap target ≥44px, no text under 12px */
.sim-tabs button,.pita button,details.more summary{min-height:44px}
.pilih span{min-height:46px}
.baris .tag{font-size:.78rem}
.tipe{font-size:.76rem}
.fld small,.pilih small{font-size:.78rem}
.wa-alt{display:flex;align-items:center;justify-content:center;min-height:44px;margin-top:8px}
.ck{min-height:44px}
/* v27b audit: facts are not buttons. A static fact reads as a checked line, not a tappable pill. */
.chips{gap:10px 26px}
.chips li,.chips li:nth-child(3n+1),.chips li:nth-child(3n+2){background:none;padding:0;border-radius:0;font:500 1rem/1.4 var(--sans);letter-spacing:0;display:flex;align-items:center;gap:10px}
.chips li::before{content:"";flex:none;width:18px;height:18px;border-radius:50%;background:var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317120A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat}
.chips li:hover{transform:none}
.sample>*{min-width:0}
.lnk{display:inline-flex;align-items:center;min-height:44px;color:var(--gold);text-underline-offset:3px}
/* v28: the point first, details on demand (one dropdown style everywhere) */
.contoh,.anggapan,.aturan{margin-top:6px}
.contoh summary,.anggapan summary,.aturan summary{display:inline-flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;list-style:none;font:500 .9rem/1 var(--sans);color:var(--gold-ink,#8A6418)}
.contoh summary::-webkit-details-marker,.anggapan summary::-webkit-details-marker,.aturan summary::-webkit-details-marker{display:none}
.contoh summary::after,.anggapan summary::after,.aturan summary::after{content:"+";font-size:1.15rem;line-height:1;transition:transform .25s}
.contoh[open] summary::after,.anggapan[open] summary::after,.aturan[open] summary::after{transform:rotate(45deg)}
.contoh p,.anggapan p{margin:0 0 6px;line-height:1.5;opacity:.8}
.aturan summary{color:var(--gold)}
.aturan ul{margin:4px 0 0;padding-left:18px;color:var(--t-mute);line-height:1.55;max-width:46em}
.anggapan{margin-top:14px}
.anggapan summary{font-size:.84rem;color:var(--k-mute)}
.anggapan p{font-size:.84rem}
.baris li{padding:18px 0}
.janji{list-style:none;padding:0;margin:clamp(24px,3.4vw,40px) 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 var(--gap)}
.janji li{padding:18px 0 6px;border-top:1px solid var(--line,rgba(11,16,32,.14))}
.janji h3{font:500 1.08rem/1.3 var(--sans);margin-bottom:4px}
.janji p{line-height:1.5}
@media(max-width:900px){.janji{grid-template-columns:1fr}}