/* Potensa Sales Page (/) — direction C "Trusted & Warm" (owner pick 2026-10-18).
   Source of truth: data/design_dirs/C (index.html + c.css + mockup.png). DM Serif Display headings, DM Sans text,
   navy + green on warm cream, white cards, realistic photos, small report data-viz, line icons (1.6px) in soft navy circles.
   One 480px app column; desktop shows a quiet warm surround. Colours come from tokens.css (C); the few C-mockup
   tints not in tokens are declared once below. */
:root{--navy-t:#ECEFF6;--navy-m:#C8CFDF;--track:#EFEAE0;--ring:#3CC37A;--col:480px;--pad:20px;
  --shC1:0 1px 2px rgba(21,36,74,.05);--shC2:0 18px 36px -20px rgba(21,36,74,.35),0 2px 6px rgba(21,36,74,.06);
  --serif:var(--f-display);--sans:var(--f-body)}

.sales{background:var(--bg-2);color:var(--ink);font-size:15px;line-height:1.55;overflow-x:clip}
.app{position:relative;width:100%;max-width:var(--col);margin:0 auto;min-height:100vh;background:var(--bg);padding-bottom:calc(86px + env(safe-area-inset-bottom))}
p,h1,h2,h3,ul,ol,figure,blockquote{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
svg.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.skip{position:absolute;left:8px;top:-60px;z-index:100;background:var(--navy);color:#fff;padding:12px 16px;border-radius:10px;font-weight:600}
.skip:focus{top:8px}
.nw{white-space:nowrap}

/* type */
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--hijau-tua)}
.eyebrow--light{color:var(--ring)}
.h2{font-family:var(--serif);font-weight:400;font-size:31px;line-height:1.12;letter-spacing:-.005em;color:var(--navy);margin-top:10px;text-wrap:balance}
.h2 em,.hero h1 em{font-style:normal;color:var(--hijau-tua)}
.h2--light{color:#fff}
.h2--light em{color:var(--ring)}
.h3{font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.1;color:var(--navy)}
.lede{font-size:16px;line-height:1.58;color:var(--ink-2);margin-top:12px}
.stars{display:inline-flex;gap:1px;color:var(--kuning)}
.stars svg{width:14px;height:14px}

/* CTA — darker C gradient so white text keeps AA at 16.5px */
.cta{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:58px;border:0;border-radius:999px;
  background:linear-gradient(180deg,#1A8A50 0%,#146C40 100%);color:#fff;font:700 16.5px/1 var(--sans);letter-spacing:-.005em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 12px 24px -12px rgba(23,125,74,.75),0 2px 4px rgba(21,36,74,.1);transition:transform .15s var(--ease)}
.cta:active{transform:translateY(1px)}
.cta small{font-weight:500;font-size:15px;color:rgba(255,255,255,.86)}
.cta svg.i{width:19px;height:19px;stroke-width:2}
.cta::after{content:"";position:absolute;top:0;bottom:0;left:-50%;width:32%;transform:skewX(-20deg);
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.22),rgba(255,255,255,0));animation:shine 3.8s ease-in-out infinite}
@keyframes shine{0%{left:-50%}55%,100%{left:135%}}
.cta--light{background:#fff;color:var(--navy);box-shadow:0 12px 24px -12px rgba(0,0,0,.5)}
.cta--light small{color:var(--ink-2)}
.cta--light::after{background:linear-gradient(90deg,rgba(23,125,74,0),rgba(23,125,74,.10),rgba(23,125,74,0))}

/* header */
.hdr{position:sticky;top:0;z-index:40;height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad);background:var(--bg);
  border-bottom:1px solid transparent;transition:border-color .2s}
.hdr.is-scrolled{border-bottom-color:var(--line)}
.logo{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--navy)}
.logo img{width:34px;height:25px}
.logo span{font-family:var(--f-logo);font-weight:600;font-size:22px;line-height:1;letter-spacing:-.01em}
.hdr__link{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;font-size:14px;font-weight:600;color:var(--navy)}

/* mini bar chart (report excerpt) */
.mbars{display:grid;gap:7px}
.mb{display:grid;grid-template-columns:var(--lw,96px) 1fr 24px;align-items:center;gap:8px;font-size:13px;color:var(--ink-2)}
.mb .tr,.lv .tr{height:7px;border-radius:4px;background:var(--track);overflow:hidden}
.mb .tr i,.lv .tr i{display:block;height:100%;width:var(--w);border-radius:4px;background:var(--navy-m);transform-origin:left;transition:transform .9s var(--ease)}
.mb.top{color:var(--ink);font-weight:600}
.mb.top .tr i{background:var(--hijau)}
.mb b{text-align:right;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.grow .tr i{transform:scaleX(0)}

/* 1 · hero */
.photo{position:relative;margin:4px 14px 0;height:290px}
.photo>img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;border-radius:22px}
.photo .tag{position:absolute;left:12px;top:12px;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px 0 8px;border-radius:999px;
  background:rgba(250,246,239,.92);font-size:12px;font-weight:600;color:var(--navy)}
.photo .tag svg.i{width:15px;height:15px;color:var(--hijau-tua);stroke-width:2}
.dcard{position:absolute;right:10px;bottom:-46px;width:184px;padding:13px 14px 14px;border-radius:16px;background:#fff;box-shadow:var(--shC2),0 0 0 1px var(--line-2)}
.dcard>b{display:block;font-size:12.5px;font-weight:700;color:var(--navy)}
.dcard>span{display:block;font-size:11px;color:var(--ink-2);margin-top:1px}
.dcard .mbars{margin-top:10px;gap:6px}
.dcard .mb{--lw:64px;font-size:10.5px;gap:6px;grid-template-columns:var(--lw) 1fr 18px}
.dcard .mb .tr{height:6px}
.hero__txt{padding:58px 22px 0}
.hero h1{font-family:var(--serif);font-weight:400;font-size:38px;line-height:1.06;letter-spacing:-.008em;color:var(--navy);text-wrap:balance}
.hero .lede{margin-top:14px}
#heroCta{margin-top:22px}
.trust{display:flex;align-items:center;gap:12px;margin-top:18px}
.avs{display:flex}
.avs img{width:34px;height:34px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2.5px var(--bg)}
.avs img+img{margin-left:-10px}
.trust .t1{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:700;color:var(--ink)}
.trust .t2{font-size:13px;color:var(--ink-2)}
.feats{display:grid;grid-template-columns:repeat(3,1fr);margin-top:22px;padding-top:16px;border-top:1px solid var(--line)}
.feats li{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;font-size:12.5px;line-height:1.3;font-weight:500;color:var(--ink-2)}
.feats li+li{border-left:1px solid var(--line)}
.feats svg.i{color:var(--navy)}

/* sections */
.sec{padding:52px 22px 0}
.sec--tint{margin-top:52px;padding:48px 22px;background:var(--bg-2)}
.sec--tint+.sec{padding-top:48px}
.sec--tint .ic{background:#fff;box-shadow:0 0 0 1px var(--line)}

/* 2 · pain points */
.pains{margin-top:22px;border-radius:22px;background:#fff;box-shadow:var(--shC1),0 0 0 1px var(--line-2);overflow:hidden}
.pains+.pains{margin-top:14px}
.pains__head{position:relative;height:150px}
.pains__head img{width:100%;height:100%;object-fit:cover;object-position:50% 28%}
.pains__head span{position:absolute;left:14px;bottom:12px;height:28px;display:inline-flex;align-items:center;padding:0 12px;border-radius:999px;background:rgba(250,246,239,.94);
  font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--navy)}
.pains ul{padding:6px 18px 8px}
.pains li{position:relative;padding:14px 0 14px 26px;border-top:1px solid var(--line-2)}
.pains li:first-child{border-top:0}
.pains li::before{content:"";position:absolute;left:2px;top:21px;width:10px;height:10px;border-radius:50%;border:2px solid var(--hijau)}
.pains li b{display:block;font-family:var(--serif);font-weight:400;font-size:20px;line-height:1.2;color:var(--navy)}
.pains li span{display:block;margin-top:4px;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.statcard{display:flex;align-items:center;gap:16px;margin-top:14px;padding:18px;border-radius:20px;background:var(--navy);color:#fff}
.statcard svg{width:76px;height:76px;flex:none}
.statcard .ring{transition:stroke-dasharray 1.1s var(--ease)}
.statcard b{display:block;font-family:var(--serif);font-weight:400;font-size:25px;line-height:1.05}
.statcard p{font-size:14px;line-height:1.45;color:rgba(255,255,255,.86);margin-top:4px}
.statcard small{display:block;font-size:12px;color:rgba(255,255,255,.66);margin-top:6px}

/* 3 · 10 benefits — the bold navy band */
.band{margin-top:52px;padding:48px 22px 44px;background:var(--navy);color:#fff}
.ten{margin-top:24px;display:grid}
.ten li{display:flex;gap:16px;align-items:flex-start;padding:15px 0;border-top:1px solid rgba(255,255,255,.12)}
.ten li:first-child{border-top:0}
.ten .n{flex:none;width:44px;font-family:var(--serif);font-size:30px;line-height:1;color:var(--ring)}
.ten b{display:block;font-size:17px;line-height:1.3;font-weight:700;color:#fff}
.ten span:not(.n){display:block;margin-top:3px;font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.78)}
.band .foot{margin-top:12px;font-size:13px;color:rgba(255,255,255,.7)}
.band__cta{margin-top:24px}

/* 4 · steps */
.steps{margin-top:22px;padding:6px 18px;border-radius:22px;background:#fff;box-shadow:var(--shC1),0 0 0 1px var(--line-2)}
.steps li{position:relative;display:flex;gap:14px;padding:16px 0}
.steps li:not(:last-child)::after{content:"";position:absolute;left:15px;top:52px;bottom:-12px;width:2px;background:var(--line)}
.sn{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;background:var(--navy-t);color:var(--navy);font-weight:700;font-size:14px}
.steps li:first-child .sn{background:var(--hijau-tua);color:#fff}
.steps b{display:block;font-size:16px;line-height:1.35;font-weight:700;color:var(--ink)}
.steps span:not(.sn){display:block;margin-top:3px;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.note{display:flex;gap:10px;align-items:flex-start;margin-top:14px;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.note svg.i{width:18px;height:18px;margin-top:1px;color:var(--navy)}

/* 5 · science */
.sci{margin-top:22px;display:grid;gap:16px}
.sci li{display:flex;gap:14px;align-items:flex-start}
.ic{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;background:var(--navy-t);color:var(--navy)}
.ic svg.i{width:21px;height:21px}
.sci b{display:block;font-size:16px;line-height:1.35;font-weight:700;color:var(--ink)}
.sci span{display:block;margin-top:3px;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.sci small{display:block;margin-top:4px;font-size:12px;line-height:1.4;color:var(--ink-2)}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
.duo>div{padding:16px;border-radius:18px;background:#fff;box-shadow:var(--shC1),0 0 0 1px var(--line-2)}
.duo b{display:block;font-family:var(--serif);font-weight:400;font-size:32px;line-height:1;color:var(--navy)}
.duo p{margin-top:8px;font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.duo small{display:block;margin-top:8px;font-size:12px;line-height:1.35;color:var(--ink-2)}
.roles{margin-top:14px;padding:16px 18px;border-radius:18px;background:var(--mint);display:grid;gap:12px}
.roles p{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.5;color:var(--ink-2)}
.roles b{color:var(--navy)}
.roles svg.i{margin-top:1px;color:var(--hijau-tua);stroke-width:1.8}

/* 6 · report excerpts */
.seg{display:flex;gap:4px;margin-top:20px;padding:4px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px var(--line)}
.seg button{flex:1;min-height:44px;border:0;border-radius:999px;background:transparent;font:600 14.5px/1 var(--sans);color:var(--ink-2);cursor:pointer;transition:background .18s,color .18s}
.seg button.is-on{background:var(--navy);color:#fff}
.rcard{margin-top:16px;border-radius:22px;background:#fff;box-shadow:var(--shC2),0 0 0 1px var(--line-2);overflow:hidden}
.rcard[hidden]{display:none}
.rtop{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line-2);background:#FDFBF7}
.rtop span{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.rtop b{font-size:12px;font-weight:600;color:var(--navy);padding:3px 10px;border-radius:999px;background:var(--navy-t);white-space:nowrap}
.rb{padding:18px}
.rb h3{font-family:var(--serif);font-weight:400;font-size:23px;line-height:1.15;color:var(--navy)}
.rb .mbars{margin-top:16px;gap:9px}
.rb .mb{--lw:108px}
.legend{display:flex;gap:14px;margin-top:12px;font-size:12px;color:var(--ink-2)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px;background:var(--navy-m)}
.legend i.g{background:var(--hijau)}
.insight{margin-top:16px;padding:14px 16px;border-radius:14px;background:var(--mint)}
.insight small{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--hijau-tua)}
.insight b{display:block;font-family:var(--serif);font-weight:400;font-size:21px;line-height:1.2;color:var(--navy);margin-top:3px}
.insight p{font-size:14px;line-height:1.55;color:var(--ink-2);margin-top:6px}
.tries{margin-top:14px}
.tries .k{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.tries li{display:flex;gap:10px;font-size:14px;line-height:1.5;color:var(--ink);margin-top:8px}
.tries svg.i{width:18px;height:18px;color:var(--hijau-tua);stroke-width:2.1;margin-top:2px}
.rfoot{padding:11px 18px;border-top:1px solid var(--line-2);font-size:12px;color:var(--ink-2)}
.rcard--mh{box-shadow:var(--shC1),0 0 0 1px var(--line-2)}
.lv{display:grid;grid-template-columns:96px 1fr 60px;align-items:center;gap:10px;font-size:13.5px;color:var(--ink);padding:6px 0}
.lv .tr i{background:var(--hijau)}
.lv em{font-style:normal;font-size:12.5px;font-weight:600;text-align:right;color:var(--hijau-tua)}
.mh-note{margin-top:10px;font-size:13px;line-height:1.5;color:var(--ink-2)}

/* 7 · testimonials */
.testi-h{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.testi-h>span{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;color:var(--ink)}
.testi{margin-top:16px;display:grid;gap:12px}
.testi li{padding:18px;border-radius:20px;background:#fff;box-shadow:var(--shC1),0 0 0 1px var(--line-2)}
.who{display:flex;align-items:center;gap:12px}
.ava{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none}
.who b{display:block;font-size:14.5px;font-weight:700;color:var(--ink)}
.who span{display:block;font-size:13px;color:var(--ink-2)}
.who .stars{margin-left:auto;align-self:flex-start;margin-top:3px}
.testi blockquote{font-size:15px;line-height:1.58;color:var(--ink);margin-top:12px}

/* 8 · faq */
.faq{margin-top:20px;display:grid;gap:10px}
.faq details{border-radius:18px;background:#fff;box-shadow:var(--shC1),0 0 0 1px var(--line-2)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:60px;padding:14px 16px 14px 18px;list-style:none;cursor:pointer;
  font-size:15.5px;line-height:1.35;font-weight:600;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.pm{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:var(--navy-t);color:var(--navy)}
.pm svg.i{width:16px;height:16px;stroke-width:2;transition:transform .18s var(--ease)}
.faq details[open] .pm svg.i{transform:rotate(45deg)}
.faq details>p{padding:0 18px 16px;font-size:14.5px;line-height:1.55;color:var(--ink-2)}

/* 9 · final — photo on top, text on navy (never text over the photo) */
.final{margin:52px 14px 0;border-radius:24px;overflow:hidden;background:var(--navy)}
.final>img{width:100%;height:230px;object-fit:cover;object-position:50% 38%}
.final__in{padding:24px 20px 22px}
.final .h2{margin-top:0}
.final p{margin-top:10px;font-size:15px;line-height:1.5;color:rgba(255,255,255,.86)}
.final .cta{margin-top:18px}

/* footer */
.ftr{margin-top:44px;padding:28px 22px 12px;border-top:1px solid var(--line);text-align:center}
.ftr .logo{justify-content:center}
.ftr>p{margin-top:4px;font-size:14px;color:var(--ink-2)}
.ftr nav{display:flex;flex-wrap:wrap;justify-content:center;gap:0 18px;margin-top:6px}
.ftr nav a{display:inline-flex;align-items:center;min-height:44px;font-size:13.5px;font-weight:600;color:var(--navy)}
.ftr .small{font-size:12px;line-height:1.5}

/* sticky CTA + buyer pill */
.sticky{position:fixed;z-index:50;left:50%;bottom:0;width:100%;max-width:var(--col);transform:translate(-50%,110%);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(250,246,239,.96);border-top:1px solid var(--line);transition:transform .24s var(--ease)}
.sticky.is-on{transform:translate(-50%,0)}
.sticky .cta{height:54px}
.pill{position:fixed;z-index:49;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:8px;max-width:calc(min(100%, var(--col)) - 40px);
  padding:5px 14px 5px 5px;border-radius:999px;background:#fff;box-shadow:var(--shC2),0 0 0 1px var(--line-2);font-size:13px;line-height:1.3;color:var(--ink);white-space:nowrap;
  pointer-events:none;opacity:0;transform:translate(-50%,8px);transition:opacity .2s,transform .2s var(--ease)}
.pill.is-on{opacity:1;transform:translate(-50%,0)}
.pill img{width:26px;height:26px;border-radius:50%;object-fit:cover}
#pillTxt{overflow:hidden;text-overflow:ellipsis}

/* reveal */
.rv-wait{opacity:0;transform:translateY(12px)}
.rv-go{transition:opacity .3s var(--ease),transform .3s var(--ease)}
@media (prefers-reduced-motion:reduce){.rv-wait{opacity:1;transform:none}.cta::after{animation:none;display:none}.grow .tr i{transform:none}}

@media (max-width:374px){
  .hero h1{font-size:34px}.h2{font-size:28px}.photo{height:262px}
  .dcard{width:170px}.dcard .mb{--lw:58px}
  .duo b{font-size:28px}.feats li{font-size:12px}
}

/* ===== split pages (hub / dewasa / anak, REVISION 2026-10-18b) ===== */
.pains__head{height:170px}
.pains li small{display:block;margin-top:4px;font-size:12px;color:var(--ink-2)}
.mh{margin-top:16px;padding-top:14px;border-top:1px solid var(--line-2)}
.mh .k{margin-bottom:4px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.sci+.rcard{margin-top:22px}
.roles1{display:flex;gap:10px;align-items:flex-start;margin-top:14px;padding:16px 18px;border-radius:18px;background:var(--mint);font-size:14px;line-height:1.5;color:var(--ink-2)}
.roles1 b{color:var(--navy)}
.roles1 svg.i{margin-top:1px;color:var(--hijau-tua);stroke-width:1.8}
.sec .final{margin:40px 0 0}
.final .h2{font-size:29px}
.mini{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;margin-top:16px}
.mini li{display:flex;align-items:center;gap:8px;font-size:14px;line-height:1.3;color:rgba(255,255,255,.9)}
.mini span{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.12);font-size:12.5px;font-weight:700;color:var(--ring)}
.final__note{margin-top:12px!important;font-size:13px!important;color:rgba(255,255,255,.7)!important;text-align:center}
.final>img.pos-top{object-position:50% 12%}

/* ===== real report pages (original report design, unchanged) — framed for the C page ===== */
.pthumb{position:absolute;right:12px;bottom:-44px;width:128px;padding:6px 6px 8px;border:0;border-radius:14px;background:#fff;cursor:zoom-in;
  box-shadow:var(--shC2),0 0 0 1px var(--line-2);transform:rotate(3deg);transition:transform .2s var(--ease)}
.pthumb:hover{transform:rotate(0) translateY(-2px)}
.pthumb img{width:100%;height:auto;border-radius:8px}
.pthumb span{display:block;margin-top:6px;font-size:12px;font-weight:600;line-height:1.2;color:var(--navy);text-align:center}
.rp{margin-top:22px}
.rp__stage{position:relative;height:330px;border-radius:22px;background:var(--bg-2);overflow:hidden}
.rp__pg{position:absolute;top:30px;width:46%;padding:0;border:5px solid #fff;border-radius:10px;background:#fff;cursor:zoom-in;
  box-shadow:0 14px 28px -14px rgba(21,36,74,.45),0 0 0 1px var(--line-2);transition:transform .25s var(--ease)}
.rp__pg img{width:100%;height:auto;border-radius:5px}
.rp__pg--l{left:6%;transform:rotate(-7deg)}
.rp__pg--r{right:6%;transform:rotate(7deg)}
.rp__pg--c{left:50%;top:20px;width:50%;transform:translateX(-50%);z-index:2}
.rp__pg--l:hover{transform:rotate(-4deg) translateY(-4px)}
.rp__pg--r:hover{transform:rotate(4deg) translateY(-4px)}
.rp__hint{position:absolute;left:50%;bottom:12px;z-index:3;transform:translateX(-50%);display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;
  border-radius:999px;background:rgba(250,246,239,.95);box-shadow:0 0 0 1px var(--line);font-size:12.5px;font-weight:600;color:var(--navy);white-space:nowrap;pointer-events:none}
.rp__hint svg.i{width:15px;height:15px;color:var(--hijau-tua);stroke-width:2}
.rp__list{margin-top:12px;border-radius:20px;background:#fff;box-shadow:var(--shC1),0 0 0 1px var(--line-2);padding:4px 16px}
.rp__list li+li{border-top:1px solid var(--line-2)}
.rp__list button{display:flex;align-items:center;gap:14px;width:100%;min-height:64px;padding:10px 0;border:0;background:transparent;text-align:left;cursor:zoom-in;font:inherit;color:inherit}
.rp__list img{width:38px;flex:none;border-radius:4px;box-shadow:0 0 0 1px var(--line)}
.rp__list button>span{flex:1;min-width:0}
.rp__list b{display:block;font-size:15px;line-height:1.3;font-weight:700;color:var(--ink)}
.rp__list button>span>span{display:block;margin-top:2px;font-size:13.5px;line-height:1.4;color:var(--ink-2)}
.rp__list svg.i{width:18px;height:18px;color:var(--hijau-tua)}
.rp__foot{margin-top:10px;font-size:12.5px;color:var(--ink-2);text-align:center}
[data-ex][hidden]{display:none}
.zoom{width:min(100vw - 16px, 620px);max-width:none;max-height:calc(100vh - 16px);padding:0;border:0;border-radius:14px;background:#fff;box-shadow:var(--sh-3);overflow:auto}
.zoom::backdrop{background:rgba(21,36,74,.65)}
.zoom img{width:100%;height:auto;touch-action:pinch-zoom}
.zoom__x{position:sticky;top:8px;float:right;margin:8px 8px -56px 0;z-index:2;display:grid;place-items:center;width:48px;height:48px;border:0;border-radius:50%;
  background:#fff;color:var(--navy);box-shadow:var(--sh-2);cursor:pointer}
.zoom__x svg.i{width:20px;height:20px;stroke-width:2}
@media (max-width:374px){.rp__stage{height:300px}.pthumb{width:116px}}

/* ===== hub (/) — general sales page for everyone (also for investors) ===== */
.is-hub .app{padding-bottom:calc(112px + env(safe-area-inset-bottom))}
.cta--alt{background:#fff;color:var(--navy);box-shadow:0 0 0 1.5px var(--navy-m),0 10px 22px -16px rgba(21,36,74,.5)}
.cta--alt small{color:var(--ink-2)}
.cta--alt::after{display:none}
.cta--sm{height:48px;font-size:15px;gap:6px}
.duo-cta{display:grid;gap:10px}
.hh{display:flex;flex-direction:column}
.hh__vis{position:relative;order:-1;margin:4px 14px 0}
.mosaic{display:grid;grid-template-columns:1.25fr 1fr;gap:8px;height:270px}
.mosaic img{width:100%;height:100%;object-fit:cover;border-radius:20px}
.mosaic__a{object-position:40% 30%}
.mosaic__b{object-position:50% 25%}
.hh .pthumb{right:10px}
.hh__txt{padding:58px 22px 0}
.hh__txt h1{margin-top:10px;font-family:var(--serif);font-weight:400;font-size:38px;line-height:1.06;letter-spacing:-.008em;color:var(--navy);text-wrap:balance}
.hh__txt h1 em{font-style:normal;color:var(--hijau-tua)}
.hh__txt .lede{margin-top:14px}
.hh .duo-cta{margin-top:22px}
.hh .trust .t1{gap:6px;font-size:13.5px}
.hh .trust .t2{display:flex;align-items:center;gap:5px;margin-top:2px}
.hh .trust .t2 svg.i{width:15px;height:15px;color:var(--hijau-tua);stroke-width:2}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
.fact{padding:16px 16px 14px;border-radius:18px;background:#fff;box-shadow:var(--shC1),0 0 0 1px var(--line-2)}
.fact b{display:block;font-family:var(--serif);font-weight:400;font-size:38px;line-height:1;color:var(--navy)}
.fact b i{font-style:normal;font-size:20px;color:var(--hijau-tua);margin-left:2px}
.fact p{margin-top:8px;font-size:13.5px;line-height:1.45;color:var(--ink)}
.fact small{display:block;margin-top:8px;font-size:12px;line-height:1.35;color:var(--ink-2)}
.dims{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.dims li{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 14px 0 10px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px var(--line);font-size:14px;font-weight:600;color:var(--navy)}
.dims li span{font-weight:500;color:var(--ink-2)}
.dims svg.i{width:18px;height:18px;color:var(--hijau-tua)}
.stages{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.stages li{border-radius:18px;background:#fff;box-shadow:var(--shC1),0 0 0 1px var(--line-2);overflow:hidden}
.stages img{width:100%;height:118px;object-fit:cover;object-position:50% 25%}
.stages span{display:block;padding:10px 12px 12px;font-size:12.5px;line-height:1.4;color:var(--ink-2)}
.stages b{display:block;font-family:var(--serif);font-weight:400;font-size:20px;line-height:1.15;color:var(--navy);margin-bottom:2px}
.flow{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
.flow li{position:relative;padding:14px;border-radius:18px;background:#fff;box-shadow:var(--shC1),0 0 0 1px var(--line-2)}
.flow .ic{width:40px;height:40px;margin-bottom:10px}
.flow b{display:block;font-size:15px;line-height:1.3;font-weight:700;color:var(--ink)}
.flow li>span:not(.ic){display:block;margin-top:2px;font-size:13px;line-height:1.4;color:var(--ink-2)}
.flow+.seg{margin-top:24px}
.data{margin-top:20px;padding:18px;border-radius:20px;background:#fff;box-shadow:var(--shC1),0 0 0 1px var(--line-2)}
.data .k{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.data ul{display:grid;grid-template-columns:repeat(3,1fr);margin-top:12px}
.data li+li{border-left:1px solid var(--line);padding-left:12px}
.data b{display:block;font-family:var(--serif);font-weight:400;font-size:30px;line-height:1;color:var(--navy)}
.data li span{display:block;margin-top:6px;font-size:12.5px;line-height:1.35;color:var(--ink-2)}
.data__src{margin-top:14px;padding-top:12px;border-top:1px solid var(--line-2);font-size:12.5px;line-height:1.45;color:var(--ink-2)}
.roles2{margin-top:12px;padding:16px 18px;border-radius:18px;background:var(--mint);display:grid;gap:12px}
.roles2 li{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.5;color:var(--ink-2)}
.roles2 b{color:var(--navy)}
.roles2 svg.i{margin-top:1px;color:var(--hijau-tua);stroke-width:1.8}
.paths{display:grid;gap:14px;margin-top:22px}
.path{display:block;border-radius:22px;background:#fff;box-shadow:var(--shC2),0 0 0 1px var(--line-2);overflow:hidden;transition:transform .18s var(--ease)}
.path:hover{transform:translateY(-2px)}
.path__img{display:block;height:180px}
.path__img img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.path__body{display:block;padding:16px 18px 18px}
.path__top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.path__top b{font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.1;color:var(--navy)}
.path__li{display:flex;gap:10px;align-items:flex-start;padding:5px 0;font-size:14.5px;line-height:1.45;color:var(--ink)}
.path__li svg.i{width:18px;height:18px;margin-top:2px;color:var(--hijau-tua);stroke-width:2.1}
.path__go{display:flex;align-items:center;justify-content:space-between;margin-top:12px;padding:0 18px;height:52px;border-radius:999px;
  background:linear-gradient(180deg,#1A8A50 0%,#146C40 100%);color:#fff;font-weight:700;font-size:16px}
.path__go svg.i{width:19px;height:19px;stroke-width:2}
.final .duo-cta{margin-top:18px}
.final p{margin-top:10px}
.sticky--duo{padding-top:8px}
.sticky__q{margin-bottom:6px;font-size:12.5px;font-weight:600;color:var(--ink-2);text-align:center}
.sticky__row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.is-hub .pill{bottom:calc(108px + env(safe-area-inset-bottom))}
@media (max-width:374px){.hh__txt h1{font-size:34px}.mosaic{height:240px}.fact b{font-size:32px}.data b{font-size:26px}.cta--sm{font-size:14px}}

.chip{flex:none;padding:4px 10px;border-radius:999px;background:var(--navy-t);font-size:12.5px;font-weight:600;color:var(--navy)}
.final .duo-cta .cta{margin-top:0}
.is-hub .sticky{background:var(--bg)}
.hh .pthumb{right:auto;left:50%;bottom:-58px;width:108px;margin-left:-54px}

/* ===== header nav (desktop) ===== */
.hdr__nav,.hdr__cta{display:none}
.hdr__end{display:flex;align-items:center;gap:8px}
.hdr__nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;font-size:15px;font-weight:600;color:var(--ink-2);border-radius:999px;transition:color .15s,background .15s}
.hdr__nav a:hover,.hdr__nav a.is-on{color:var(--navy);background:var(--bg-2)}
.hdr__cta{align-items:center;height:44px;padding:0 20px;border-radius:999px;background:linear-gradient(180deg,#1A8A50 0%,#146C40 100%);color:#fff;font-weight:700;font-size:15px;
  box-shadow:0 8px 18px -10px rgba(23,125,74,.7)}

/* ===== tablet 768–1023: full-width page, centred ~720px content, 2-col grids where they fit ===== */
@media (min-width:768px){
  .sales{--gx:max(40px,calc((100% - 720px)/2));background:var(--bg)}
  .app{max-width:none;box-shadow:none}
  .hdr{padding:0 var(--gx)}
  .hero .photo,.hh__vis{margin:8px var(--gx) 0}
  .hero .photo{height:400px}
  .mosaic{height:400px}
  .hero__txt,.hh__txt{padding-left:var(--gx);padding-right:var(--gx)}
  .sec,.band,.sec--tint{padding-left:var(--gx);padding-right:var(--gx)}
  .sec{padding-top:72px}
  .band,.sec--tint{margin-top:72px;padding-top:64px;padding-bottom:64px}
  .sec--tint+.sec{padding-top:72px}
  .final{margin-left:var(--gx);margin-right:var(--gx)}
  .sec .final{margin:48px 0 0}
  .ftr{padding-left:var(--gx);padding-right:var(--gx)}
  .sticky{max-width:none;left:0;transform:translateY(110%);display:flex;flex-direction:column;align-items:center}
  .sticky.is-on{transform:none}
  .sticky>.cta,.sticky__row,.sticky__q{width:100%;max-width:480px}
  .pill{max-width:440px}
  .h2{font-size:38px}
  .hero h1,.hh__txt h1{font-size:48px}
  .pains{display:grid;grid-template-columns:5fr 7fr}
  .pains__head{height:auto;min-height:100%}
  .pains ul{padding:8px 24px}
  .ten{grid-template-columns:1fr 1fr;column-gap:40px}
  .ten li:nth-child(2){border-top:0}
  .stages,.flow{grid-template-columns:repeat(4,1fr)}
  .paths{grid-template-columns:1fr 1fr}
  .sci{grid-template-columns:1fr 1fr;column-gap:28px}
  .band__cta,.seg{max-width:420px}
  .seg{margin-left:auto;margin-right:auto}
}

/* ===== desktop ≥1024: real web layout, ~1180px container, no phone column ===== */
@media (min-width:1024px){
  .sales{--gx:max(56px,calc((100% - 1180px)/2))}
  .app{padding-bottom:0}
  .sticky,.pill{display:none!important}
  .hdr{height:76px}
  .hdr__nav{display:flex;gap:2px;margin-left:auto;margin-right:12px}
  .hdr__cta{display:inline-flex}
  .hdr__link{font-size:15px;color:var(--ink-2)}
  .sec{padding-top:104px}
  .band,.sec--tint{margin-top:104px;padding-top:88px;padding-bottom:88px}
  .sec--tint+.sec{padding-top:104px}
  .h2{font-size:46px;max-width:17em}
  .lede{font-size:18px;max-width:40em}
  .eyebrow{font-size:13px}
  /* hero: copy left, photo + real report thumb right */
  .hero,.hh{display:grid;grid-template-columns:1fr 1.05fr;gap:64px;align-items:center;padding:56px var(--gx) 0}
  .hero .photo,.hh__vis{order:2;margin:0}
  .hero .photo{height:520px}
  .mosaic{height:520px;gap:12px}
  .hero__txt,.hh__txt{padding:0}
  .hero h1,.hh__txt h1{font-size:62px}
  .hero .lede,.hh__txt .lede{font-size:19px}
  #heroCta{max-width:440px}
  .hh .duo-cta{grid-template-columns:1fr 1fr;max-width:580px}
  .pthumb,.hh .pthumb{width:168px;left:auto;right:-24px;bottom:-36px;margin-left:0}
  .feats{max-width:520px}
  /* pains / lists */
  .pains{grid-template-columns:1fr 1.2fr;margin-top:36px}
  .pains ul{padding:20px 40px}
  .pains li b{font-size:23px}
  .pains li span{font-size:15.5px}
  .statcard{margin-top:20px}
  .ten{column-gap:72px;margin-top:40px}
  .ten b{font-size:18px}
  .band__cta{margin-top:36px}
  .sci{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:32px;margin-top:36px}
  .rp{display:grid;grid-template-columns:1.15fr 1fr;gap:32px;align-items:center;margin-top:32px}
  .rp__stage{height:520px}
  .rp__list{margin-top:0}
  .rp__foot{grid-column:1/-1}
  #ilmiah .statcard,#ilmiah .roles1{display:inline-flex;vertical-align:top;width:calc(50% - 12px);margin-top:24px}
  #ilmiah .statcard{margin-right:16px}
  #ilmiah .data,#ilmiah .roles2{display:inline-grid;vertical-align:top;width:calc(50% - 12px);margin-top:32px}
  #ilmiah .data{margin-right:16px}
  .duo{max-width:760px}
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:8px 12px}
  .steps li{flex-direction:column;padding:20px 16px}
  .steps li:not(:last-child)::after{display:none}
  .facts{grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px}
  .fact{padding:24px}
  .fact b{font-size:50px}
  .fact p{font-size:15px}
  .stages{gap:16px}
  .stages img{height:200px}
  .flow{gap:16px}
  .paths{gap:24px}
  .path__img{height:300px}
  .testi{grid-template-columns:repeat(3,1fr);gap:16px}
  .faq{grid-template-columns:1fr 1fr;align-items:start;gap:12px 16px}
  .final{display:grid;grid-template-columns:1fr 1.1fr;align-items:stretch}
  .final>img{height:100%;min-height:380px}
  .final__in{padding:48px 48px;align-self:center}
  .final .h2{font-size:42px}
  .final .duo-cta{grid-template-columns:1fr;max-width:420px}
  .final .cta{max-width:420px}
  .sec .final{margin-top:64px}
  .ftr{margin-top:96px;padding-top:40px;padding-bottom:24px}
}
/* photos never dictate card height on wide screens */
@media (min-width:768px){
  .pains__head{position:relative;min-height:280px}
  .pains__head img{position:absolute;inset:0;width:100%;height:100%}
}
@media (min-width:1024px){
  .final{display:block;position:relative;padding-left:46%;min-height:440px}
  .final>img{position:absolute;left:0;top:0;width:46%;height:100%;min-height:0}
  .final__in{min-height:440px;display:flex;flex-direction:column;justify-content:center}
}
@media (min-width:1024px) and (max-width:1279px){.testi .who{flex-wrap:wrap}.testi .who .stars{flex-basis:100%;order:3;margin:8px 0 0}}
@media (min-width:1024px){
  .hero,.hh{grid-template-columns:1.1fr 1fr;gap:56px}
  .hero h1,.hh__txt h1{font-size:54px;line-height:1.05}
  .hh .duo-cta{display:flex;flex-wrap:wrap;gap:12px;max-width:none}
  .hh .duo-cta .cta{width:auto;padding:0 26px}
}
@media (min-width:1280px){.hero h1,.hh__txt h1{font-size:60px}}
@media (min-width:1024px){.hh #heroCta{max-width:none}}

/* ===== /anak deep dives + anchor chips (real ORIGINAL report pages) ===== */
.chips-nav{margin:36px 22px 0;padding:14px 16px;border-radius:18px;background:#fff;box-shadow:var(--shC1),0 0 0 1px var(--line-2)}
.chips-nav p{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.chips-nav__row{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chips-nav__row a{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:999px;background:var(--bg-2);font-size:14px;font-weight:600;color:var(--navy);transition:background .15s}
.chips-nav__row a:hover{background:var(--navy-t)}
.deep__pages{position:relative;margin-top:22px;height:400px;border-radius:22px;background:var(--bg-2);overflow:hidden}
.sec--tint .deep__pages{background:#fff;box-shadow:0 0 0 1px var(--line)}
.deep__pg{position:absolute;top:26px;padding:0;border:5px solid #fff;border-radius:10px;background:#fff;cursor:zoom-in;
  box-shadow:0 16px 30px -16px rgba(21,36,74,.5),0 0 0 1px var(--line-2);transition:transform .25s var(--ease)}
.deep__pg img{width:100%;height:auto;border-radius:5px}
.deep__pages--1 .deep__pg{left:50%;width:62%;transform:translateX(-50%)}
.deep__pages--2 .deep__pg:first-child{left:6%;width:60%;z-index:2;transform:rotate(-3deg)}
.deep__pages--2 .deep__pg:nth-child(2){right:5%;top:46px;width:50%;transform:rotate(5deg)}
.deep__pages--3 .deep__pg{width:44%}
.deep__pages--3 .deep__pg:nth-child(1){left:3%;top:40px;transform:rotate(-6deg)}
.deep__pages--3 .deep__pg:nth-child(2){left:50%;z-index:2;transform:translateX(-50%)}
.deep__pages--3 .deep__pg:nth-child(3){right:3%;top:40px;transform:rotate(6deg)}
.deep__pg:hover{z-index:3}
.deep__pages .rp__hint{z-index:4}
.deep__body .ticks{margin-top:20px;padding:0;gap:12px}
.deep__body .ticks li{font-size:15px;line-height:1.5;color:var(--ink-2)}
.deep__body .ticks b{color:var(--navy);font-weight:700}
.deep__body .ticks svg.i{color:var(--hijau-tua);stroke-width:2.2;margin-top:3px}
.deep__note{margin-top:14px;padding:12px 14px;border-radius:14px;background:var(--mint);font-size:13.5px;line-height:1.5;color:var(--ink-2)}
@media (max-width:374px){.deep__pages{height:350px}}
@media (min-width:768px){
  .chips-nav{margin:44px var(--gx) 0;display:flex;align-items:center;gap:16px}
  .chips-nav__row{margin-top:0}
  .deep__pages{height:480px}
}
@media (min-width:1024px){
  .deep{display:grid;grid-template-columns:1fr 1.05fr;grid-template-areas:"head pages" "body pages";column-gap:64px;align-items:start}
  .deep--flip{grid-template-columns:1.05fr 1fr;grid-template-areas:"pages head" "pages body"}
  .deep__head{grid-area:head;align-self:end}
  .deep__body{grid-area:body}
  .deep__pages{grid-area:pages;margin-top:0;height:560px}
  .deep .h2{font-size:42px}
  .deep__body .ticks li{font-size:16px}
  .chips-nav{justify-content:center}
}

/* ===== hub v3: proof bar · tentang · kenapa · layanan per tahap hidup (tabs) ===== */
.hh__free{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:14px;color:var(--ink-2)}
.hh__free svg.i{width:18px;height:18px;color:var(--hijau-tua)}
.pbar{margin:44px 14px 0;padding:6px 8px;border-radius:20px;background:#fff;box-shadow:var(--shC1),0 0 0 1px var(--line-2)}
.pbar ul{display:grid;grid-template-columns:1fr 1fr}
.pbar li{display:flex;flex-direction:column;justify-content:center;gap:4px;padding:12px 10px;font-size:12.5px;line-height:1.35;color:var(--ink-2)}
.pbar li:nth-child(n+3){border-top:1px solid var(--line-2)}
.pbar li:nth-child(even){border-left:1px solid var(--line-2)}
.pbar__k{display:flex;align-items:center;gap:6px;font-family:var(--serif);font-size:26px;line-height:1;color:var(--navy)}
.pbar__k .stars svg{width:18px;height:18px}
.pbar__k svg.i{width:24px;height:24px;color:var(--hijau-tua);stroke-width:1.8}
.k-label{margin-top:28px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.k-label+.facts{margin-top:12px}
.why{display:grid;gap:12px;margin-top:22px}
.why li{display:flex;gap:14px;align-items:flex-start;padding:16px;border-radius:18px;background:#fff;box-shadow:var(--shC1),0 0 0 1px var(--line-2)}
.why .ic{background:var(--mint);color:var(--hijau-tua)}
.why b{display:block;font-size:15.5px;line-height:1.35;font-weight:700;color:var(--ink)}
.why span:not(.ic){display:block;margin-top:3px;font-size:14px;line-height:1.5;color:var(--ink-2)}
.flow--num .ic{font-family:var(--serif);font-size:20px;color:var(--navy)}
.flow--num li:first-child .ic{background:var(--hijau-tua);color:#fff}
.tabs{margin-top:22px}
.tabs__bar{display:flex;gap:6px;overflow-x:auto;padding:4px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px var(--line);scrollbar-width:none}
.tabs__bar::-webkit-scrollbar{display:none}
.tabs__bar button{flex:1 0 auto;min-height:44px;padding:0 14px;border:0;border-radius:999px;background:transparent;font:600 14px/1 var(--sans);color:var(--ink-2);cursor:pointer;white-space:nowrap;transition:background .18s,color .18s}
.tabs__bar button[aria-selected="true"]{background:var(--navy);color:#fff}
.tp{margin-top:14px;border-radius:22px;background:#fff;box-shadow:var(--shC2),0 0 0 1px var(--line-2);overflow:hidden}
.tp[hidden]{display:none}
.tp>img{width:100%;height:200px;object-fit:cover;object-position:50% 30%}
.tp__body{padding:18px 18px 20px}
.tp__age{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--hijau-tua)}
.tp h3{margin-top:6px;font-family:var(--serif);font-weight:400;font-size:24px;line-height:1.15;color:var(--navy)}
.tp .ticks{margin-top:12px;padding:0;gap:8px}
.tp .ticks li{font-size:15px;line-height:1.45;color:var(--ink)}
.tp .ticks svg.i{color:var(--hijau-tua);stroke-width:2.2}
.tp__go{display:flex;align-items:center;justify-content:space-between;margin-top:16px;padding:0 18px;height:52px;border-radius:999px;
  background:linear-gradient(180deg,#1A8A50 0%,#146C40 100%);color:#fff;font-weight:700;font-size:16px}
.tp__go svg.i{width:19px;height:19px;stroke-width:2}
.final .eyebrow{margin-bottom:8px}
@media (min-width:768px){
  .pbar{margin:56px var(--gx) 0}
  .pbar ul{grid-template-columns:repeat(4,1fr)}
  .pbar li:nth-child(n+3){border-top:0}
  .pbar li+li{border-left:1px solid var(--line-2)}
  .pbar li{padding:14px 16px}
  .why{grid-template-columns:1fr 1fr}
  .tp{display:grid;grid-template-columns:1fr 1.1fr}
  .tp>img{height:100%;min-height:340px}
  .tp__body{padding:28px}
}
@media (min-width:1024px){
  .hh__free{font-size:15px}
  .pbar__k{font-size:30px}
  .pbar li{font-size:14px;padding:18px 24px}
  .why{grid-template-columns:repeat(4,1fr);gap:16px;margin-top:36px}
  .why li{flex-direction:column;padding:22px}
  .is-hub #tentang .lede{max-width:46em}
  .tabs__bar{max-width:640px;margin:0 auto}
  .tp{grid-template-columns:1.05fr 1fr;margin-top:24px}
  .tp>img{min-height:420px}
  .tp__body{padding:44px 48px;align-self:center}
  .tp h3{font-size:34px}
  .tp .ticks li{font-size:16px}
  .tp__go{max-width:340px}
}
/* shared tick list + small fixes (hub v3 / anak deep dives) */
.ticks li{display:flex;gap:10px;align-items:flex-start}
.ticks svg.i{width:18px;height:18px;flex:none;margin-top:3px}
.chips-nav__row a{min-height:44px}
.hh__txt{padding-top:78px}
@media (max-width:767px){
  .tabs__bar{flex-wrap:wrap;justify-content:center;overflow:visible;padding:0;border-radius:0;background:transparent;box-shadow:none;gap:8px}
  .tabs__bar button{flex:0 0 auto;background:#fff;box-shadow:0 0 0 1px var(--line)}
}
@media (min-width:1024px){.hh__txt{padding-top:0}}
.sales section[id],.sales .final[id]{scroll-margin-top:68px}@media (min-width:1024px){.sales section[id],.sales .final[id]{scroll-margin-top:84px}}

@media print{.rv-wait{opacity:1!important;transform:none!important}}

/* =====================================================================
   v4 design system (owner: "berantakan, terutama icon check")
   ONE icon system · readable report excerpts in paper frames · mid-page CTAs · consistent rhythm
   ===================================================================== */
/* 1 · checks: 22px solid green circle, white check, aligned to the first text line */
.ticks li,.tries li,.path__li{display:flex;align-items:flex-start;gap:12px}
.ticks svg.i,.tries svg.i,.path__li svg.i,.vs__row--us svg.i{flex:none;box-sizing:border-box;width:22px;height:22px;padding:5px;margin-top:1px;border-radius:50%;
  background:var(--hijau-tua);color:#fff;stroke-width:3.2}
.tp .ticks svg.i,.deep__body .ticks svg.i,.ticks--2 svg.i{margin-top:1px;color:#fff;stroke-width:3.2}
/* 2 · pain marker: calm amber circle with a short line */
.pains li{padding-left:36px}
.pains li::before{left:0;top:15px;width:22px;height:22px;border:0;border-radius:50%;
  background:linear-gradient(#B8661A,#B8661A) center/10px 2.5px no-repeat,#FBEBD9}
/* 3 · feature/science icons: 24px line icon in a 44px tinted rounded square */
.ic{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:12px;background:var(--mint);color:var(--hijau-tua);box-shadow:none}
.ic svg.i{width:24px;height:24px;stroke-width:1.8}
.sec--tint .ic,.tstrip .ic{background:#fff;box-shadow:0 0 0 1px var(--line)}
.why .ic{background:var(--mint)}
.flow--num .ic{font-family:var(--serif);font-size:21px;color:var(--navy);background:var(--bg-2)}
.flow--num li:first-child .ic{background:var(--hijau-tua);color:#fff}
.roles1 svg.i,.roles2 svg.i{box-sizing:border-box;width:28px;height:28px;padding:5px;margin-top:-2px;border-radius:8px;background:#fff;color:var(--hijau-tua)}
/* 4 · FAQ: 28px plus in a bordered circle */
.pm{width:30px;height:30px;background:#fff;border:1.5px solid var(--navy-m);color:var(--navy)}
.pm svg.i{width:16px;height:16px;stroke-width:2.2}
.faq details[open] .pm{background:var(--navy);border-color:var(--navy);color:#fff}
.faq details>p{max-width:65ch}

/* readable report excerpt in a paper frame (tap = full page) */
.deep__fig{margin:22px 0 0}
.paper{display:block;width:100%;padding:0;border:0;border-radius:16px;background:#fff;text-align:left;cursor:zoom-in;overflow:hidden;
  box-shadow:var(--shC2),0 0 0 1px var(--line-2);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.paper:hover{transform:translateY(-3px)}
.paper__bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px 10px 16px;border-bottom:1px solid var(--line-2);background:#FDFBF7;
  font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.paper__bar svg.i{box-sizing:border-box;width:30px;height:30px;padding:6px;border-radius:50%;background:var(--navy-t);color:var(--navy);stroke-width:2}
.paper img{display:block;width:100%;height:auto}
.deep__body .ticks{margin-top:22px;gap:14px}
.deep__body .ticks li{font-size:15.5px;line-height:1.5;color:var(--ink-2);max-width:60ch}
.deep__body .ticks b{color:var(--navy)}

/* mid-page CTA */
.midcta{display:grid;gap:14px;margin-top:28px;padding:20px;border-radius:20px;background:var(--mint)}
.midcta p b{display:block;font-family:var(--serif);font-weight:400;font-size:23px;line-height:1.15;color:var(--navy)}
.midcta p span{display:block;margin-top:4px;font-size:14px;color:var(--ink-2)}
.sec--tight{padding-top:8px}
.micro{margin-top:10px;font-size:13.5px;color:var(--ink-2)}

/* /anak urgency block */
.waktu{margin:44px 14px 0;padding:26px 20px 22px;border-radius:22px;background:var(--navy);color:#fff}
.waktu h2{margin-top:8px;font-family:var(--serif);font-weight:400;font-size:27px;line-height:1.12;color:#fff}
.waktu__tl{margin-top:18px;display:grid;gap:0}
.waktu__tl li{position:relative;padding:0 0 14px 26px;font-size:14.5px;line-height:1.45;color:rgba(255,255,255,.8)}
.waktu__tl li::before{content:"";position:absolute;left:0;top:4px;width:12px;height:12px;border-radius:50%;background:var(--ring)}
.waktu__tl li:not(:last-child)::after{content:"";position:absolute;left:5px;top:18px;bottom:2px;width:2px;background:rgba(255,255,255,.18)}
.waktu__tl b{display:block;color:#fff;font-weight:700}
.waktu__fact{margin-top:6px;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.08);font-size:14.5px;line-height:1.45;color:rgba(255,255,255,.88)}
.waktu__fact b{font-family:var(--serif);font-weight:400;font-size:28px;color:var(--ring);margin-right:4px}
.waktu__fact small{display:block;margin-top:4px;font-size:12px;color:rgba(255,255,255,.6)}
.waktu__small{margin-top:14px;font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.7)}

/* nav: active = underline, no pill */
.hdr__nav a{border-radius:0;background:none!important}
.hdr__nav a:hover{color:var(--navy)}
.hdr__nav a.is-on{color:var(--navy);box-shadow:inset 0 -2px 0 var(--hijau)}

/* rhythm + measure */
.sec{padding-top:48px}
.band,.sec--tint{margin-top:48px;padding-top:48px;padding-bottom:48px}
.sec--tint+.sec{padding-top:48px}
.lede,.sec>p,.fact p{max-width:65ch}

@media (min-width:768px){
  .waktu{margin:56px var(--gx) 0;padding:32px 36px}
  .waktu__tl{grid-template-columns:repeat(3,1fr);gap:16px}
  .waktu__tl li{padding:22px 0 0;border-top:2px solid rgba(255,255,255,.18)}
  .waktu__tl li::before{top:-7px}
  .waktu__tl li::after{display:none}
  .midcta{grid-template-columns:1fr auto;align-items:center;padding:24px 28px}
  .midcta>.cta{width:auto;padding:0 28px}
  .midcta--duo{grid-template-columns:1fr}
  .sec{padding-top:72px}
  .band,.sec--tint{margin-top:72px;padding-top:64px;padding-bottom:64px}
  .sec--tint+.sec{padding-top:72px}
}
@media (min-width:1024px){
  .hero,.hh{min-height:min(calc(100vh - 76px),820px);padding-bottom:48px}
  .sec{padding-top:96px}
  .band,.sec--tint{margin-top:96px;padding-top:80px;padding-bottom:80px}
  .sec--tint+.sec{padding-top:96px}
  .sec--tight{padding-top:24px}
  .deep{grid-template-columns:1fr 1.1fr;grid-template-areas:"head fig" "body fig";column-gap:72px}
  .deep--flip{grid-template-columns:1.1fr 1fr;grid-template-areas:"fig head" "fig body"}
  .deep__fig{grid-area:fig;margin:0;align-self:center}
  .waktu{display:grid;grid-template-columns:1fr 1.3fr;column-gap:48px;align-items:start;padding:44px 48px}
  .waktu .eyebrow,.waktu h2,.waktu__fact{grid-column:1}
  .waktu__tl{grid-column:2;grid-row:1/span 3;margin-top:0;align-self:center}
  .waktu__small{grid-column:1/-1}
  .waktu h2{font-size:36px}
  .midcta{padding:28px 36px}
  .midcta p b{font-size:28px}
  .midcta--duo{grid-template-columns:1fr auto}
  .midcta--duo .duo-cta{display:flex;gap:12px}
  .midcta--duo .cta{width:auto;padding:0 24px}
}
@media (min-width:1024px){.deep__fig{width:100%;max-width:540px;justify-self:center}}
.sci .ic,.flow .ic{display:grid;margin-top:0;color:var(--hijau-tua)}.flow--num .ic{color:var(--navy)}.flow--num li:first-child .ic{color:#fff}

/* =====================================================================
   /anak v5 — warmer, softer, still premium (owner: "jangan terlalu kaku")
   sun/amber accents with the green · rounder shapes · hand-drawn underline · photo collage
   ===================================================================== */
.is-anak{--sun:#F2B544;--sun-d:#9A6412;--sun-t:#FDF1DC;--warm:#FDF4E8;--r-soft:28px}
.is-anak .eyebrow{color:var(--sun-d);display:inline-flex;align-items:center;gap:8px}
.is-anak .eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--sun)}
.is-anak .eyebrow--light{color:var(--sun)}
.is-anak .h2 em,.is-anak h1 em{font-style:normal;color:var(--hijau-tua);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8.5C40 3 90 2.5 198 6.5' fill='none' stroke='%23F2B544' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") left 100%/100% .32em no-repeat;
  padding-bottom:.1em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.is-anak .h2--light em{color:var(--ring)}
.is-anak .sec--tint{background:var(--warm)}
.is-anak .pains,.is-anak .testi li,.is-anak .faq details,.is-anak .paper,.is-anak .rcard,.is-anak .why li{border-radius:var(--r-soft)}
.is-anak .midcta{border-radius:var(--r-soft);background:var(--sun-t)}
.is-anak .waktu{border-radius:32px}
.is-anak .ten .n{color:var(--sun)}
.is-anak .band{border-radius:40px 40px 0 0}
.is-anak .final{border-radius:32px}
.is-anak .chips-nav{border-radius:24px}
.is-anak .chips-nav__row a{background:var(--sun-t)}
.is-anak .chips-nav__row a:hover{background:#FAE3BA}
.is-anak .pains__head img{border-radius:0}

/* hero */
.ahero{display:flex;flex-direction:column;padding:12px 0 0}
.ahero__vis{position:relative;height:330px;margin:0 14px}
.ahero__vis .sun{position:absolute;right:-30px;top:-20px;width:190px;height:190px;border-radius:50%;background:radial-gradient(circle at 40% 40%,#FBD37A,var(--sun));opacity:.55}
.ph{position:absolute;object-fit:cover;box-shadow:0 18px 36px -18px rgba(21,36,74,.45);border:5px solid #fff}
.ph--a{left:0;top:6px;width:58%;height:290px;border-radius:34px 34px 34px 120px;object-position:50% 30%}
.ph--b{right:0;top:22px;width:46%;height:150px;border-radius:28px;object-position:50% 40%;transform:rotate(3deg)}
.ph--c{right:4%;bottom:0;width:38%;height:150px;border-radius:999px 999px 28px 28px;object-position:50% 20%;transform:rotate(-3deg)}
.badge-psi{position:absolute;left:10px;bottom:6px;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px 0 9px;border-radius:999px;background:#fff;
  box-shadow:0 8px 18px -10px rgba(21,36,74,.5);font-size:12px;font-weight:600;color:var(--navy)}
.badge-psi svg.i{width:16px;height:16px;color:var(--hijau-tua);stroke-width:2}
.ahero__txt{padding:30px 22px 0}
.ahero h1{font-family:var(--serif);font-weight:400;font-size:35px;line-height:1.1;letter-spacing:-.008em;color:var(--navy);text-wrap:balance}
.ahero__sub{margin-top:16px;font-size:17px;line-height:1.5;color:var(--navy)}
.ahero .lede{margin-top:10px}
.ahero .lede b{color:var(--navy)}
.ahero__kick{margin-top:14px;padding:12px 16px;border-radius:18px;background:var(--sun-t);font-size:15.5px;line-height:1.45;color:var(--navy)}
.ahero #heroCta{margin-top:20px}
.cta--big{height:62px;font-size:17px;border-radius:999px}
.ahero .trust{margin-top:16px}

/* gallery */
.galeri .lede{margin-top:12px}
.gal{position:relative;margin:20px -22px 0}
.gal__track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 22px 18px;scroll-padding:0 22px;scrollbar-width:none;list-style:none;margin:0}
.gal__track::-webkit-scrollbar{display:none}
.gal__track li{flex:0 0 58%;scroll-snap-align:start}
.gal__item{display:block;width:100%;padding:0;border:0;background:transparent;text-align:left;cursor:zoom-in;font:inherit;color:inherit}
.gal__pg{display:block;padding:7px;border-radius:20px;background:#fff;box-shadow:0 14px 28px -16px rgba(21,36,74,.45),0 0 0 1px var(--line-2);transition:transform .2s var(--ease)}
.gal__pg img{width:100%;height:auto;border-radius:13px}
.gal__item:hover .gal__pg{transform:translateY(-4px) rotate(-.6deg)}
.gal__cap{display:block;margin-top:10px;padding:0 4px}
.gal__cap b{display:block;font-size:14.5px;line-height:1.3;color:var(--navy)}
.tier{display:inline-block;margin-top:5px;padding:3px 9px;border-radius:999px;background:var(--mint);font-size:11.5px;font-weight:700;line-height:1.3;color:var(--hijau-tua)}
.tier--plus{background:#E3E8F6;color:var(--navy)}
.tier--vip{background:var(--sun-t,#FDF1DC);color:#8A5A0E}
.gal__nav{display:none}
.gal__legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:6px;font-size:12.5px;color:var(--ink-2)}
.gal__legend .tier{margin:0}

/* lightbox */
.lb-open,.lb-open body{overflow:hidden}
.lb{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;background:rgba(12,20,40,.95);color:#fff}
.lb[hidden]{display:none}
.lb__top,.lb__bottom{display:flex;align-items:center;gap:10px;padding:10px 12px;padding-top:calc(10px + env(safe-area-inset-top))}
.lb__bottom{padding-bottom:calc(12px + env(safe-area-inset-bottom))}
.lb__count{margin-right:auto;font-size:13.5px;font-weight:600;color:rgba(255,255,255,.8)}
.lb__btn{display:grid;place-items:center;flex:none;width:48px;height:48px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;cursor:pointer}
.lb__btn svg.i{width:22px;height:22px;stroke-width:2}
.lb__flip{transform:rotate(180deg)}
.lb__stage{flex:1;min-height:0;overflow:auto;display:flex;align-items:center;justify-content:center;padding:0 10px;touch-action:pan-x pan-y pinch-zoom}
.lb__stage img{max-width:100%;max-height:100%;width:auto;height:auto;border-radius:8px;background:#fff;cursor:zoom-in;object-fit:contain}
.lb.is-zoom .lb__stage{display:block}
.lb.is-zoom .lb__stage img{max-width:none;max-height:none;width:200%;cursor:zoom-out}
.lb__cap{flex:1;min-width:0;text-align:center;font-size:14px;line-height:1.35}
.lb__cap b{display:block}
.lb__cap span{display:block;font-size:12.5px;color:rgba(255,255,255,.7)}

@media (max-width:374px){.ahero h1{font-size:31px}.ahero__vis{height:300px}.ph--a{height:262px}}
@media (min-width:768px){
  .ahero__vis{height:420px;margin:8px var(--gx) 0}
  .ph--a{height:380px}.ph--b{height:190px}.ph--c{height:190px}
  .ahero__txt{padding:36px var(--gx) 0}
  .ahero h1{font-size:46px}
  .gal{margin:24px calc(-1*var(--gx)) 0}
  .gal__track{padding:6px var(--gx) 20px;scroll-padding:0 var(--gx)}
  .gal__track li{flex-basis:28%}
  .is-anak .band{border-radius:48px 48px 0 0}
}
@media (min-width:1024px){
  .ahero{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center;padding:40px var(--gx) 0;min-height:min(calc(100vh - 76px),860px)}
  .ahero__vis{order:2;margin:0;height:540px}
  .ph--a{height:500px}.ph--b{height:230px}.ph--c{height:230px}
  .ahero__vis .sun{width:280px;height:280px}
  .ahero__txt{padding:0}
  .ahero h1{font-size:52px}
  .ahero__sub{font-size:19px}
  .ahero #heroCta{max-width:480px}
  .gal__track li{flex-basis:calc((100% - 4*14px)/5)}
  .gal__nav{display:grid;place-items:center;position:absolute;top:38%;z-index:2;width:52px;height:52px;border:0;border-radius:50%;background:#fff;color:var(--navy);
    box-shadow:var(--shC2),0 0 0 1px var(--line);cursor:pointer}
  .gal__nav--prev{left:calc(var(--gx) - 26px)}.gal__nav--prev svg{transform:rotate(180deg)}
  .gal__nav--next{right:calc(var(--gx) - 26px)}
  .lb__stage img{max-width:min(100%,900px)}
  .lb.is-zoom .lb__stage img{width:min(1800px,180%)}
}
@media (min-width:1440px){.ahero h1{font-size:58px}}
.cta--big{flex-direction:column;gap:3px;height:auto;min-height:64px;padding:12px 56px 12px 24px;line-height:1.2;text-align:center}
.cta--big small{font-size:14px}
.cta--big svg.i{position:absolute;right:22px;top:50%;margin-top:-10px}
@media (min-width:1024px){.cta--big{flex-direction:row;gap:8px;padding:0 56px 0 28px;height:62px}}

/* ===== /anak showcase (v6): fanned book of real pages + cycling featured page ===== */
.sc{display:grid;gap:26px;margin-top:22px}
.sc__book{position:relative;padding:34px 0 0}
.sc__glow{position:absolute;left:50%;top:44%;width:300px;height:300px;margin:-150px 0 0 -150px;border-radius:50%;background:radial-gradient(circle,#FCE3AE 0%,rgba(252,227,174,0) 70%);pointer-events:none}
.sc__back{position:absolute;top:56px;width:46%;border-radius:10px;border:4px solid #fff;box-shadow:0 18px 30px -18px rgba(21,36,74,.5)}
.sc__back--1{left:2%;transform:rotate(-10deg)}
.sc__back--2{right:2%;transform:rotate(9deg)}
.sc__back--3{left:27%;top:36px;transform:rotate(-2deg);opacity:.9}
.sc__feat{position:relative;display:block;width:68%;margin:0 auto;padding:6px;border:0;border-radius:16px;background:#fff;cursor:zoom-in;z-index:2;
  box-shadow:0 34px 60px -24px rgba(21,36,74,.55),0 0 0 1px var(--line-2);transform:rotate(1deg)}
.sc__feat img{display:block;width:100%;height:auto;border-radius:11px;transition:opacity .35s var(--ease)}
.sc__feat img.is-fade{opacity:.25}
.sc__zoom{position:absolute;right:12px;bottom:12px;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.95);color:var(--navy);box-shadow:var(--shC2)}
.sc__zoom svg.i{width:19px;height:19px;stroke-width:2}
.sc__cap{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:18px;text-align:center}
.sc__cap b{font-family:var(--serif);font-weight:400;font-size:22px;line-height:1.2;color:var(--navy)}
.sc__dots{display:flex;gap:6px}
.sc__dots i{width:8px;height:8px;border-radius:8px;background:var(--navy);opacity:.2;cursor:pointer;transition:width .3s var(--ease),opacity .3s,background .3s}
.sc__dots i.on{width:24px;opacity:1;background:var(--sun,#F2B544)}
.hl{display:none}
.sc__badges{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.sc__badges li{padding:14px 10px;border-radius:20px;background:#fff;box-shadow:var(--shC1),0 0 0 1px var(--line-2);text-align:center}
.sc__badges b{display:block;font-family:var(--serif);font-weight:400;font-size:30px;line-height:1;color:var(--navy)}
.sc__badges span{display:block;margin-top:6px;font-size:12.5px;line-height:1.3;color:var(--ink-2)}
.sc__local{display:flex;align-items:center;gap:10px;margin-top:-10px;padding:12px 16px;border-radius:18px;background:var(--sun-t,#FDF1DC);font-size:14.5px;font-weight:600;color:var(--navy)}
.sc__local svg.i{flex:none;width:22px;height:22px;color:var(--sun-d,#9A6412)}
.sc__cta{display:grid;gap:10px}
.sc__all{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;border:0;border-radius:999px;background:transparent;font:700 15px/1 var(--sans);color:var(--hijau-tua);cursor:pointer}
.sc__all svg.i{width:18px;height:18px;stroke-width:2.2}
.sc__note{margin-top:-6px;font-size:12.5px;color:var(--ink-2);text-align:center}
@media (min-width:768px){
  .sc__book{max-width:520px;margin:0 auto;width:100%}
}
@media (min-width:1024px){
  .sc{grid-template-columns:1.05fr 1fr;gap:64px;align-items:center;margin-top:36px}
  .sc__book{max-width:none;padding-top:40px}
  .sc__glow{width:520px;height:520px;margin:-260px 0 0 -260px}
  .sc__feat{width:62%}
  .sc__back{top:70px;width:42%}
  .sc__back--1{left:4%}.sc__back--2{right:4%}.sc__back--3{left:29%;top:44px}
  .hl{display:grid;gap:4px;margin-bottom:6px}
  .hl__item{display:flex;align-items:center;gap:14px;width:100%;min-height:48px;padding:8px 14px;border:0;border-radius:14px;background:transparent;text-align:left;
    font:600 16px/1.3 var(--sans);color:var(--ink-2);cursor:pointer;transition:background .2s,color .2s}
  .hl__item:hover{background:#fff;color:var(--navy)}
  .hl__item.is-on{background:#fff;color:var(--navy);box-shadow:var(--shC1),0 0 0 1px var(--line-2)}
  .hl__n{font-family:var(--serif);font-size:20px;color:var(--sun,#F2B544);min-width:26px}
  .sc__local{margin-top:0}
  .sc__cta{grid-template-columns:auto auto;justify-content:start;align-items:center}
  .sc__cta .cta{width:auto;padding:0 28px}
  .sc__note{text-align:left}
}
.sc__badges small{display:block;margin-bottom:4px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--sun-d,#9A6412)}
.sc__cta .cta{white-space:nowrap}
.sc__local{margin-top:0}

/* ===== /anak v7 — persuasion flow (✕ pains · ✓ tidak perlu · cocok untuk · numbered isi · bonus stack · bayangkan) ===== */
.xlist,.vlist{display:grid;gap:12px;margin-top:22px}
.xlist li,.vlist li{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:20px;background:#fff;box-shadow:var(--shC1),0 0 0 1px var(--line-2);
  font-size:15.5px;line-height:1.5;color:var(--ink-2)}
.xlist b,.vlist b{color:var(--navy)}
.xlist svg.i{flex:none;box-sizing:border-box;width:24px;height:24px;padding:6px;margin-top:0;border-radius:50%;background:#FCE4DE;color:#C2412D;stroke-width:3}
.vlist svg.i{flex:none;box-sizing:border-box;width:24px;height:24px;padding:5px;border-radius:50%;background:var(--hijau-tua);color:#fff;stroke-width:3.2}
.ifyes{display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:center;margin-top:20px;padding:16px;border-radius:24px;background:var(--sun-t,#FDF1DC)}
.ifyes img{width:96px;height:120px;object-fit:cover;object-position:50% 25%;border-radius:18px}
.ifyes__k{font-family:var(--serif);font-size:21px;line-height:1.2;color:var(--navy)}
.ifyes__k b{color:var(--hijau-tua);font-weight:400}
.ifyes p:not(.ifyes__k){margin-top:6px;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.fits{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
.fits li{padding:16px;border-radius:24px;background:#fff;box-shadow:var(--shC1),0 0 0 1px var(--line-2)}
.fits .ic{margin-bottom:10px;background:var(--sun-t,#FDF1DC);color:var(--sun-d,#9A6412)}
.fits b{display:block;font-size:15px;line-height:1.3;color:var(--navy)}
.fits li>span:not(.ic){display:block;margin-top:4px;font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.deep__num{display:block;font-family:var(--serif);font-size:56px;line-height:.9;color:var(--sun,#F2B544);margin-bottom:6px}
.isi-h+.deep{padding-top:28px}
.bonus{display:grid;gap:12px;margin-top:22px}
.bonus li{display:flex;gap:14px;align-items:flex-start;padding:16px;border-radius:22px;background:#fff;box-shadow:var(--shC1),0 0 0 1.5px #F3D9A4}
.bonus__ic{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:14px;background:var(--sun-t,#FDF1DC);color:var(--sun-d,#9A6412)}
.bonus__ic svg.i{width:22px;height:22px;stroke-width:1.9}
.bonus__tag{display:inline-block;padding:2px 8px;border-radius:6px;background:var(--sun,#F2B544);font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--navy)}
.bonus b{display:block;margin-top:6px;font-size:16px;line-height:1.3;color:var(--navy)}
.bonus li span:not(.bonus__ic):not(.bonus__tag){display:block;margin-top:3px;font-size:14px;line-height:1.45;color:var(--ink-2)}
.bonus__note{margin-top:12px;font-size:13px;color:var(--ink-2)}
.tline{position:relative;display:grid;gap:0;margin-top:24px}
.tline li{position:relative;padding:0 0 22px 34px}
.tline li::before{content:"";position:absolute;left:4px;top:4px;width:16px;height:16px;border-radius:50%;background:#fff;border:4px solid var(--sun,#F2B544)}
.tline li:not(:last-child)::after{content:"";position:absolute;left:11px;top:24px;bottom:2px;width:2px;background:#F3D9A4}
.tline li:last-child::before{border-color:var(--hijau-tua);background:var(--hijau-tua)}
.tline__t{display:block;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--sun-d,#9A6412)}
.tline b{display:block;margin-top:2px;font-family:var(--serif);font-weight:400;font-size:22px;line-height:1.2;color:var(--navy)}
.tline li>span:not(.tline__t){display:block;margin-top:2px;font-size:14.5px;line-height:1.45;color:var(--ink-2)}
@media (max-width:374px){.fits{grid-template-columns:1fr}}
@media (min-width:768px){
  .xlist,.vlist{grid-template-columns:1fr 1fr}
  .fits{grid-template-columns:repeat(4,1fr)}
  .bonus{grid-template-columns:1fr 1fr}
  .tline{grid-template-columns:repeat(4,1fr);gap:16px}
  .tline li{padding:30px 8px 0 0}
  .tline li::before{left:0;top:0}
  .tline li:not(:last-child)::after{left:20px;right:-12px;top:7px;bottom:auto;width:auto;height:2px}
}
@media (min-width:1024px){
  .ifyes{grid-template-columns:140px 1fr;padding:22px 28px;max-width:900px}
  .ifyes img{width:140px;height:160px}
  .ifyes__k{font-size:26px}
  .deep__num{font-size:72px}
  .bonus{grid-template-columns:repeat(3,1fr);gap:16px}
}

/* AI badges (owner 2026-10-20) */
.ai-badges{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.ai-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 12px 6px 10px;border-radius:999px;font-size:12.5px;font-weight:700;letter-spacing:.01em;
  color:#fff;background:linear-gradient(135deg,#177D4A 0%,#1FA45B 55%,#3BB9A0 100%);box-shadow:0 6px 16px rgba(23,125,74,.25)}
.ai-badge .i{width:15px;height:15px;color:#FFE08A}
.ai-badge--soft{color:var(--navy);background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.ai-badge--soft .i{color:var(--green)}
.badge-ai{position:absolute;z-index:3;right:12px;top:14px;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;
  background:rgba(21,36,74,.88);color:#fff;font-size:12px;font-weight:600;backdrop-filter:blur(6px);box-shadow:0 8px 20px rgba(21,36,74,.25)}
.badge-ai b{color:#FFE08A}
.badge-ai .i{width:14px;height:14px;color:#FFE08A}

/* ===== /anak v8 — "Empat jawaban penting": mini sales units + HTML report mockups ===== */
.isi__label{display:inline-flex;margin-top:14px;padding:5px 12px;border-radius:999px;background:var(--navy-t);font-size:12.5px;font-weight:600;color:var(--navy)}
.iu-list{position:relative;margin-top:28px;display:grid;gap:40px}
.iu-list::before{content:"";position:absolute;left:21px;top:22px;bottom:22px;width:2px;background:linear-gradient(var(--sun,#F2B544),var(--hijau-tua))}
.iu{position:relative;display:grid;grid-template-columns:44px 1fr;column-gap:14px;row-gap:18px}
.iu__rail{grid-row:1/span 2;position:relative;z-index:1}
.iu__rail span{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--navy);color:#fff;font-family:var(--serif);font-size:19px;box-shadow:0 0 0 5px var(--bg)}
.iu__h{margin-top:6px;font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.15;color:var(--navy)}
.iu__h em{font-style:normal;color:var(--hijau-tua)}
.iu__why{margin-top:10px;padding:10px 14px;border-radius:16px;background:var(--sun-t,#FDF1DC);font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.iu__why b{color:var(--navy)}
.iu .ticks{margin-top:14px;padding:0;gap:10px}
.iu .ticks li{font-size:15px;line-height:1.5;color:var(--ink-2)}
.iu .ticks b{color:var(--navy)}
.iu__mock{grid-column:2}
.mk{border-radius:22px;background:#fff;box-shadow:var(--shC2),0 0 0 1px var(--line-2);overflow:hidden;font-size:13px;color:var(--ink)}
.mk__top{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 16px;background:#FDFBF7;border-bottom:1px solid var(--line-2)}
.mk__top span{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2)}
.mk__top b{flex:none;padding:3px 10px;border-radius:999px;background:var(--navy-t);font-size:11.5px;font-weight:600;color:var(--navy)}
.mk__body{padding:16px}
.mk-bar{display:grid;grid-template-columns:1fr 70px 52px;align-items:center;gap:8px;padding:5px 0;font-size:12.5px;color:var(--ink-2)}
.mk-bar .tr{height:7px;border-radius:4px;background:var(--track);overflow:hidden}
.mk-bar .tr i{display:block;height:100%;width:var(--w);border-radius:4px;background:var(--navy-m)}
.mk-bar em{font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:.05em;text-align:right;color:var(--ink-2)}
.mk-bar.top{color:var(--navy);font-weight:600}.mk-bar.top .tr i{background:var(--hijau)}.mk-bar.top em{color:var(--hijau-tua)}
.mk-note{margin-top:12px;padding:12px 14px;border-radius:14px;background:var(--mint)}
.mk-note small,.mk-row small{display:block;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--hijau-tua)}
.mk-note b{display:block;margin-top:2px;font-family:var(--serif);font-weight:400;font-size:18px;color:var(--navy)}
.mk-note span{display:block;margin-top:2px;font-size:12.5px;color:var(--ink-2)}
.mk-chip{display:inline-block;padding:2px 8px;border-radius:999px;background:var(--navy-t);font-size:10.5px;font-weight:700;color:var(--navy);white-space:nowrap}
.mk-chip--g{background:var(--mint);color:var(--hijau-tua)}
.mk-chip--r{background:#FCE4DE;color:#B33A25;text-transform:uppercase;letter-spacing:.04em;margin-right:6px}
.mk-sch{display:grid;gap:8px}
.mk-sch li{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:10px 12px;border-radius:12px;box-shadow:0 0 0 1px var(--line-2)}
.mk-sch b{flex-basis:100%;font-size:13px;color:var(--navy)}
.mk-camp{margin-top:12px;padding:12px;border-radius:14px;box-shadow:0 0 0 1.5px var(--line)}
.mk-camp__h{display:flex;justify-content:space-between;align-items:center;gap:8px}
.mk-camp__h b{font-size:14px;color:var(--navy)}
.mk-camp p{margin-top:5px;font-size:12px;line-height:1.4;color:var(--ink-2)}
.mk-ketat{display:flex;align-items:center;flex-wrap:wrap;color:var(--ink)!important}
.mk-small{font-size:12px;line-height:1.45;color:var(--ink-2)}
.mk-wk__t{font-family:var(--serif);font-size:19px;line-height:1.2;color:var(--navy);margin-bottom:6px}
.mk-steps{margin:10px 0 0;padding:0;list-style:none;counter-reset:s;display:grid;gap:6px}
.mk-steps li{counter-increment:s;display:flex;gap:8px;font-size:12.5px;line-height:1.4}
.mk-steps li::before{content:counter(s);display:grid;place-items:center;flex:none;width:20px;height:20px;border-radius:50%;background:var(--sun-t,#FDF1DC);font-size:11px;font-weight:800;color:var(--sun-d,#9A6412)}
.mk-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.mk-row>div{padding:10px 12px;border-radius:12px;background:var(--mint)}
.mk-row b{display:block;margin-top:2px;font-size:12.5px;line-height:1.35;color:var(--navy)}
.mk-tl{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.mk-tl>li{position:relative;padding-left:18px}
.mk-tl>li::before{content:"";position:absolute;left:0;top:5px;width:9px;height:9px;border-radius:50%;background:var(--sun,#F2B544)}
.mk-tl>li>b{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--navy)}
.mk-tl ul{margin-top:6px;display:grid;gap:6px}
.mk-tl ul li{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;line-height:1.4;color:var(--ink-2)}
.mk-cb{flex:none;width:16px;height:16px;margin-top:1px;border-radius:5px;box-shadow:inset 0 0 0 1.5px var(--navy-m)}
.mk-tl li.on .mk-cb{background:var(--hijau-tua) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;box-shadow:none}
.mk-tl li.on{color:var(--navy)}
.isi .midcta{margin-top:40px}
@media (min-width:768px){
  .iu-list::before{left:21px}
  .iu{grid-template-columns:44px 1fr 1fr;column-gap:28px;align-items:center}
  .iu__rail{grid-row:1}
  .iu__mock{grid-column:3}
}
@media (min-width:1024px){
  .iu-list{gap:64px;margin-top:44px}
  .iu-list::before{left:50%;margin-left:-1px}
  .iu{grid-template-columns:1fr 64px 1fr;column-gap:40px}
  .iu__rail{grid-column:2;display:flex;justify-content:center}
  .iu__rail span{width:56px;height:56px;font-size:24px}
  .iu__txt{grid-column:1;grid-row:1}
  .iu__mock{grid-column:3;grid-row:1}
  .iu--flip .iu__txt{grid-column:3}
  .iu--flip .iu__mock{grid-column:1}
  .iu__h{font-size:34px}
  .mk{font-size:14px}
  .mk-bar{grid-template-columns:1fr 120px 56px;font-size:13.5px}
}

/* ===== /anak v9 — scroll-telling report window (refs: Heron AI, Moto Finance, Odyssée, Riotters Lidar, GrowthBook) ===== */
.story__grid{margin-top:28px}
.story__steps{display:grid;gap:44px;list-style:none;margin:0;padding:0}
.st{position:relative}
.st__num{display:block;font-family:var(--serif);font-size:64px;line-height:.85;letter-spacing:-.02em;color:transparent;-webkit-text-stroke:1.5px var(--sun,#F2B544);margin-bottom:8px}
.st__h{margin-top:6px;font-family:var(--serif);font-weight:400;font-size:27px;line-height:1.14;color:var(--navy)}
.st__h em{font-style:normal;color:var(--hijau-tua)}
.st__why{margin-top:12px;padding:10px 14px;border-radius:16px;background:var(--sun-t,#FDF1DC);font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.st__why b{color:var(--navy)}
.st .ticks{margin-top:14px;padding:0;gap:10px}
.st .ticks li{font-size:15px;line-height:1.5;color:var(--ink-2)}
.st .ticks b{color:var(--navy)}
.st__mock{margin-top:20px}
.story__pin{display:none}

/* the report "app window" */
.mx{position:relative;border-radius:26px;background:linear-gradient(160deg,#16264F 0%,#1B2F5E 55%,#20406A 100%);padding:10px;
  box-shadow:0 40px 70px -34px rgba(21,36,74,.65),0 0 0 1px rgba(255,255,255,.06) inset;color:var(--ink);isolation:isolate}
.mx::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;opacity:.35;pointer-events:none;
  background:radial-gradient(120% 80% at 90% 0%,rgba(242,181,68,.35),transparent 55%),radial-gradient(90% 70% at 0% 100%,rgba(60,195,122,.28),transparent 60%)}
.mx-chrome{display:flex;align-items:center;gap:10px;padding:4px 8px 10px}
.mx-dots{display:flex;gap:5px}.mx-dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.25)}
.mx-dots i:first-child{background:#F2B544}
.mx-url{flex:1;height:22px;display:flex;align-items:center;padding:0 10px;border-radius:999px;background:rgba(255,255,255,.08);font-size:11px;color:rgba(255,255,255,.7)}
.mx-badge{padding:3px 8px;border-radius:999px;background:rgba(242,181,68,.18);font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#F7C66A}
.mx-tabs{display:flex;gap:4px;padding:0 4px 10px;overflow:hidden}
.mx-tabs span{flex:1;padding:7px 4px;border-radius:999px;text-align:center;font-size:11.5px;font-weight:600;color:rgba(255,255,255,.6);white-space:nowrap;transition:background .3s,color .3s}
.mx[data-active="1"] [data-t="1"],.mx[data-active="2"] [data-t="2"],.mx[data-active="3"] [data-t="3"],.mx[data-active="4"] [data-t="4"]{background:#fff;color:var(--navy)}
.mx-body{position:relative;border-radius:18px;background:#FBF8F2;padding:14px;overflow:hidden}
.mx--solo .mx-screen{display:block}
.mx-screen{display:grid;gap:10px}
.mx-head{display:flex;align-items:center;gap:10px}
.mx-ava{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#F2B544,#E58F2E);color:#fff;font-weight:800;font-size:14px}
.mx-head>div{flex:1;min-width:0}
.mx-head b{display:block;font-size:14px;line-height:1.25;color:var(--navy)}
.mx-head>div span{display:block;font-size:11.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mx-chip{flex:none;display:inline-flex;align-items:center;padding:3px 9px;border-radius:999px;background:var(--navy-t);font-size:10.5px;font-weight:700;color:var(--navy);white-space:nowrap}
.mx-chip--g{background:#DDF3E5;color:var(--hijau-tua)}
.mx-chip--r{background:#FCE4DE;color:#B33A25}
.mx-chip--a{background:#FDF1DC;color:#8A5A0E}
.mx-card{padding:12px 13px;border-radius:14px;background:#fff;box-shadow:0 1px 2px rgba(21,36,74,.05),0 0 0 1px #EFE9DE;font-size:12.5px;line-height:1.4;color:var(--ink-2)}
.mx-card--mint{background:#E9F5EE;box-shadow:none}
.mx-k{margin-bottom:6px;font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--hijau-tua)}
.mx-big{display:block;font-family:var(--serif);font-weight:400;font-size:17px;line-height:1.15;color:var(--navy)}
.mx-duo{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mx-bar{display:grid;grid-template-columns:1fr 64px 44px;align-items:center;gap:8px;padding:4px 0;font-size:12px;color:var(--ink-2)}
.mx-bar__l small{display:block;font-size:10px;color:var(--ink-3,#878C9C)}
.mx-bar__t{height:7px;border-radius:4px;background:#EFEAE0;overflow:hidden}
.mx-bar__t i{display:block;height:100%;width:var(--w);border-radius:4px;background:#C8CFDF;transform-origin:left;transition:transform .9s var(--ease)}
.mx-bar em{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;text-align:right;color:var(--ink-2)}
.mx-bar.top{color:var(--navy);font-weight:600}.mx-bar.top .mx-bar__t i{background:linear-gradient(90deg,#1FA45B,#3CC37A)}.mx-bar.top em{color:var(--hijau-tua)}
.mx-list{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.mx-list li{display:flex;align-items:center;gap:10px;padding:10px;border-radius:14px;background:#fff;box-shadow:0 0 0 1px #EFE9DE}
.mx-ic{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:10px;background:var(--navy-t);font-size:10px;font-weight:800;color:var(--navy)}
.mx-list li>div{flex:1;min-width:0}
.mx-list b{display:block;font-size:12.5px;line-height:1.3;color:var(--navy)}
.mx-list li>div span{display:block;font-size:11px;color:var(--ink-2)}
.mx-camp__h{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.mx-camp__h b{display:block;font-size:13.5px;color:var(--navy)}
.mx-camp__h span:not(.mx-chip){display:block;font-size:11px;color:var(--ink-2)}
.mx-odds{display:grid;grid-template-columns:62px 1fr auto auto;align-items:center;gap:8px;margin-top:8px;font-size:11px}
.mx-odds b{font-size:12.5px;color:var(--navy);font-variant-numeric:tabular-nums}
.mx-meter{height:6px;border-radius:4px;background:#EFEAE0;overflow:hidden}
.mx-meter i{display:block;height:100%;width:var(--w);background:linear-gradient(90deg,#F2B544,#E0604A);transform-origin:left;transition:transform .9s var(--ease)}
.mx-small{display:block;margin-top:6px;font-size:11px;color:var(--ink-2)}
.mx-week{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.mx-week span{padding:6px 0;border-radius:10px;background:#fff;box-shadow:0 0 0 1px #EFE9DE;text-align:center;font-size:10.5px;font-weight:700;color:var(--ink-2)}
.mx-week span.on{background:var(--navy);color:#fff;box-shadow:none}
.mx-title{display:block;font-family:var(--serif);font-weight:400;font-size:17px;line-height:1.2;color:var(--navy);margin-bottom:4px}
.mx-steps{margin:8px 0 0;padding:0;list-style:none;counter-reset:s;display:grid;gap:6px}
.mx-steps li{counter-increment:s;display:flex;gap:8px;font-size:12px;line-height:1.4;color:var(--ink)}
.mx-steps li::before{content:counter(s);display:grid;place-items:center;flex:none;width:19px;height:19px;border-radius:50%;background:#FDF1DC;font-size:10.5px;font-weight:800;color:#8A5A0E}
.mx-tags{display:flex;flex-wrap:wrap;gap:6px}.mx-tags i{font-style:normal;padding:3px 9px;border-radius:999px;background:#fff;font-size:11px;font-weight:600;color:var(--navy)}
.mx-prog{height:6px;border-radius:4px;background:#EFEAE0;overflow:hidden}
.mx-prog i{display:block;height:100%;width:var(--w);background:linear-gradient(90deg,#1FA45B,#3CC37A);transform-origin:left;transition:transform .9s var(--ease)}
.mx-tl{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.mx-tl>li{padding:10px 12px;border-radius:14px;background:#fff;box-shadow:0 0 0 1px #EFE9DE}
.mx-tl>li>b{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#8A5A0E}
.mx-tl ul{margin-top:6px;display:grid;gap:6px;list-style:none;padding:0}
.mx-tl ul li{display:flex;gap:8px;align-items:flex-start;font-size:12px;line-height:1.4;color:var(--ink-2)}
.mx-cb{flex:none;width:17px;height:17px;margin-top:1px}
.mx-cb rect{fill:#fff;stroke:#C8CFDF;stroke-width:1.5}
.mx-cb path{fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16;stroke-dashoffset:16;transition:stroke-dashoffset .5s .35s var(--ease)}
.mx-tl li.on{color:var(--navy)}
.mx-tl li.on .mx-cb rect{fill:var(--hijau-tua);stroke:var(--hijau-tua)}
/* animation states: elements start "empty" only when JS armed the section */
.story.is-armed .mx-screen:not(.is-in) .mx-bar__t i,.story.is-armed .mx-screen:not(.is-in) .mx-meter i,.story.is-armed .mx-screen:not(.is-in) .mx-prog i{transform:scaleX(0)}
.story.is-armed .mx-screen:not(.is-in) li.on .mx-cb path{stroke-dashoffset:16}
.mx-screen.is-in li.on .mx-cb path,.story:not(.is-armed) li.on .mx-cb path{stroke-dashoffset:0}
.story .midcta{margin-top:40px}

@media (min-width:1024px){
  .story__grid{display:grid;grid-template-columns:1fr 1.08fr;gap:72px;margin-top:20px}
  .story__steps{gap:0}
  .st{min-height:78vh;display:flex;flex-direction:column;justify-content:center;padding:40px 0;opacity:.35;transition:opacity .4s var(--ease)}
  .st.is-on{opacity:1}
  .st__num{font-size:96px}
  .st__h{font-size:38px}
  .st .ticks li{font-size:16px}
  .st__mock{display:none}
  .story__pin{display:block;position:sticky;top:calc(50vh - 290px);height:580px;align-self:start}
  .story__pin .mx{height:100%;display:flex;flex-direction:column;transform:perspective(1400px) rotateY(-4deg) rotateX(2deg);transition:transform .6s var(--ease)}
  .story__pin .mx:hover{transform:perspective(1400px) rotateY(0) rotateX(0)}
  .story__pin .mx-body{flex:1;padding:18px}
  .story__pin .mx-screen{position:absolute;inset:18px;opacity:0;transform:translateY(16px) scale(.985);transition:opacity .45s var(--ease),transform .45s var(--ease);pointer-events:none}
  .story__pin .mx-screen.is-in{opacity:1;transform:none}
  .story__rail{position:absolute;left:-36px;top:40px;bottom:40px;width:3px;border-radius:3px;background:rgba(21,36,74,.1)}
  .story__rail i{display:block;width:100%;height:var(--p,25%);border-radius:3px;background:linear-gradient(var(--sun,#F2B544),var(--hijau-tua));transition:height .5s var(--ease)}
  .mx-bar{grid-template-columns:1fr 130px 54px;font-size:13px;padding:6px 0}
  .mx-head b{font-size:15px}
  .mx-card{font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  .st{opacity:1!important}
  .story__pin .mx{transform:none!important}
  .story__pin .mx-screen{transition:none}
}

/* ===== /anak v10 — tidy rhythm, no dead space, balanced grids ===== */
.is-anak .sec{padding-top:44px}
.is-anak .band,.is-anak .sec--tint{margin-top:44px;padding-top:44px;padding-bottom:44px}
.is-anak .sec--tint+.sec,.is-anak .band+.sec{padding-top:44px}
.is-anak .sec--tint+.sec--tint,.is-anak .band+.sec--tint{margin-top:0}
.is-anak .midcta{margin-top:24px}
.is-anak .waktu{margin-top:40px}
.is-anak .sc{gap:22px}
.is-anak .story .midcta{margin-top:28px}
.is-anak .story__steps{gap:36px}
.is-anak .final{margin-top:32px}
.is-anak .ftr{margin-top:40px}
@media (min-width:768px){
  .is-anak .sec{padding-top:64px}
  .is-anak .band,.is-anak .sec--tint{margin-top:64px;padding-top:56px;padding-bottom:56px}
  .is-anak .sec--tint+.sec,.is-anak .band+.sec{padding-top:64px}
  .is-anak .waktu{margin-top:56px}
  .is-anak .vlist li:last-child:nth-child(odd){grid-column:1/-1}
  .is-anak .bonus li:first-child{grid-column:1/-1}
  .is-anak .faq{grid-template-columns:1fr;max-width:820px}
}
@media (min-width:1024px){
  .is-anak .sec{padding-top:72px}
  .is-anak .band,.is-anak .sec--tint{margin-top:72px;padding-top:64px;padding-bottom:64px}
  .is-anak .sec--tint+.sec,.is-anak .band+.sec{padding-top:72px}
  .is-anak .ahero{min-height:0;padding-top:40px;padding-bottom:8px}
  .is-anak .story__grid{margin-top:8px}
  .is-anak .st{min-height:0;height:600px;padding:0}
  .is-anak .story__pin{top:calc(50vh - 280px);height:560px}
  .is-anak .story__steps{gap:0}
  .is-anak .story .midcta{margin-top:24px}
  .is-anak .final{margin-top:40px}
  .is-anak .ftr{margin-top:56px}
  .is-anak .deep__num{margin-bottom:2px}
}
.is-anak .band,.is-anak .sec--tint{margin-top:36px;padding-top:40px;padding-bottom:40px}
@media (min-width:768px){.is-anak .band,.is-anak .sec--tint{margin-top:48px;padding-top:52px;padding-bottom:52px}}
@media (min-width:1024px){
  .is-anak .sec{padding-top:64px}
  .is-anak .sec--tint+.sec,.is-anak .band+.sec{padding-top:64px}
  .is-anak .band,.is-anak .sec--tint{margin-top:56px;padding-top:56px;padding-bottom:56px}
  .is-anak .st{height:470px}
  .is-anak .story__pin{top:calc(50vh - 270px);height:540px}
}
@media (min-width:1024px){.is-anak .ifyes{max-width:none}}
@media (min-width:768px){.is-anak .faq{grid-template-columns:1fr 1fr;max-width:none}.is-anak .faq details:last-child:nth-child(odd){grid-column:1/-1}}
.is-anak .final>img{object-position:50% 12%}

/* fix 2026-10-20: steps column must not grow past the phone width (text was clipped ~10px) */
.story__steps{grid-template-columns:minmax(0,1fr)}
.story__steps>li{min-width:0;max-width:100%}
.story__steps>li *{max-width:100%}

/* ===== /anak v11 — risk cards (fear → solution) ===== */
.rk{display:grid;gap:12px;margin-top:22px}
.rk__c{position:relative;padding:20px 18px 16px;border-radius:24px;background:#fff;box-shadow:var(--shC1),0 0 0 1px var(--line-2);overflow:hidden}
.rk__c::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(#E0604A,#F2B544)}
.rk__tag{display:inline-block;padding:3px 10px;border-radius:999px;background:#FCE4DE;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#B33A25}
.rk__n{margin-top:10px;font-family:var(--serif);font-size:52px;line-height:1;letter-spacing:-.02em;color:var(--navy)}
.rk__n i{font-style:normal;font-size:26px;color:#C2412D}
.rk__b{display:block;margin-top:8px;font-size:16px;line-height:1.4;font-weight:700;color:var(--navy)}
.rk__x{margin-top:6px;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.rk__src{margin-top:10px;padding-top:10px;border-top:1px solid var(--line-2);font-size:12px;line-height:1.4;color:var(--ink-2)}
.solusi{margin-top:16px;padding:22px 20px;border-radius:26px;background:linear-gradient(150deg,#E6F3EB,#F4FAF6);box-shadow:0 0 0 1px #CFE8D8}
.solusi__h h3{margin-top:6px;font-family:var(--serif);font-weight:400;font-size:24px;line-height:1.18;color:var(--navy)}
.solusi__l{display:grid;gap:10px;margin:14px 0 18px;padding:0;list-style:none}
.solusi__l li{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.5;color:var(--ink-2)}
.solusi__l b{color:var(--navy)}
.solusi__l svg.i{flex:none;box-sizing:border-box;width:22px;height:22px;padding:5px;margin-top:1px;border-radius:50%;background:var(--hijau-tua);color:#fff;stroke-width:3.2}
.is-anak .risiko{padding-top:28px}
@media (min-width:768px){
  .rk{grid-template-columns:repeat(3,1fr)}
  .rk__n{font-size:48px}
  .solusi{display:grid;grid-template-columns:1fr 1.2fr;gap:8px 36px;align-items:center;padding:28px 32px}
  .solusi__h{grid-row:1/span 2}
  .solusi__l{margin:0 0 14px}
  .solusi .cta{width:auto;justify-self:start;padding:0 28px}
}
@media (min-width:1024px){
  .rk{gap:16px;margin-top:32px}
  .rk__c{padding:26px 24px 20px}
  .rk__n{font-size:64px}
  .solusi__h h3{font-size:30px}
}

/* ===== /anak v13 — future outlook panel (inside the risiko block, before Solusinya) ===== */
.ol{margin-top:16px;padding:24px 20px;border-radius:26px;background:linear-gradient(155deg,#15244A 0%,#1D3566 100%);color:#fff;position:relative;overflow:hidden}
.ol::after{content:"";position:absolute;right:-60px;top:-60px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(242,181,68,.35),transparent 70%);pointer-events:none}
.ol__h{margin-top:8px;font-family:var(--serif);font-weight:400;font-size:25px;line-height:1.16;color:#fff}
.ol__h em{font-style:normal;color:#F7C66A}
.ol__g{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0 0;padding:0;list-style:none}
.ol__g li{padding:14px;border-radius:18px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.ol__g b{display:block;font-family:var(--serif);font-weight:400;font-size:34px;line-height:1;color:#fff}
.ol__g b i{font-style:normal;font-size:18px;color:#F7C66A}
.ol__g span{display:block;margin-top:8px;font-size:13px;line-height:1.45;color:rgba(255,255,255,.82)}
.ol__g small{display:block;margin-top:8px;font-size:11px;line-height:1.35;color:rgba(255,255,255,.55)}
.ol__so{margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.12);font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.85)}
.ol__so b{color:#F7C66A}
.solusi__p{margin-top:8px;font-size:14.5px;line-height:1.55;color:var(--ink-2)}
@media (max-width:374px){.ol__g{grid-template-columns:1fr}}
@media (min-width:1024px){
  .ol{padding:36px 40px}
  .ol__h{font-size:34px;max-width:20em}
  .ol__g{grid-template-columns:repeat(4,1fr);gap:14px;margin-top:24px}
  .ol__g b{font-size:44px}
  .ol__g span{font-size:14px}
}

/* ===== /anak v14 — mockup polish: mobile window inset, tabs fit, Peta Langkah as a real timeline ===== */
.st,.st__mock,.story__grid,.story__steps{min-width:0}
.mx{max-width:100%}
.mx-tabs{gap:2px;overflow-x:auto;scrollbar-width:none;-webkit-mask:linear-gradient(90deg,#000 88%,transparent);mask:linear-gradient(90deg,#000 88%,transparent);padding-right:16px}
.mx-tabs::-webkit-scrollbar{display:none}
.mx-tabs span{flex:0 0 auto;padding:7px 11px;font-size:11px}
.mx-screen{gap:12px}
.mx-head{gap:10px;align-items:center}
.mx-head>div span{margin-top:1px}
.mx-prog{margin:0 0 4px}
.mx-road{position:relative;margin:0;padding:0;list-style:none;display:grid;gap:4px}
.mx-road>li{position:relative;padding:10px 10px 10px 40px;border-radius:14px}
.mx-road>li:not(:last-child)::before{content:"";position:absolute;left:19px;top:30px;bottom:-14px;width:2px;background:#E3DED3}
.mx-road>li.is-done:not(:last-child)::before{background:#9FD5B4}
.mx-road>li.is-now{background:#fff;box-shadow:0 1px 2px rgba(21,36,74,.05),0 0 0 1px #F3D9A4}
.mx-node{position:absolute;left:10px;top:11px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px #C8CFDF}
.mx-node svg{width:12px;height:12px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.is-done .mx-node{background:var(--hijau-tua);box-shadow:none}
.is-now .mx-node{box-shadow:inset 0 0 0 5px #F2B544}
.mx-road__h{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:20px}
.mx-road__h b{font-size:12.5px;font-weight:800;letter-spacing:.02em;color:var(--navy)}
.mx-road__h>span:not(.mx-chip){font-size:11px;color:var(--ink-2)}
.mx-road ul{margin:6px 0 0;padding:0;list-style:none;display:grid;gap:6px}
.mx-road ul li{display:flex;gap:8px;align-items:flex-start;font-size:12px;line-height:1.4;color:var(--ink)}
.mx-road ul li.on{color:var(--ink-2);text-decoration:line-through;text-decoration-color:rgba(78,86,109,.35)}
.mx-road .mx-cb{width:15px;height:15px;margin-top:1px}
.mx-road li.on .mx-cb rect{fill:#DDF3E5;stroke:#9FD5B4}
.mx-road li.on .mx-cb path{stroke:var(--hijau-tua)}
.story.is-armed .mx-screen:not(.is-in) .mx-road li.on .mx-cb path{stroke-dashoffset:16}
/* consistent spacing in the other mockups */
.mx-list{gap:8px}
.mx-list li{padding:10px 12px}
.mx-duo{gap:10px}
.mx-card{padding:12px 14px}
.mx-camp .mx-odds:first-of-type{margin-top:10px}
.mx-week{gap:4px}
@media (max-width:1023px){
  .mx{transform:none!important}
  .st__mock{margin-top:18px}
  .mx-body{padding:12px}
  .mx-bar{grid-template-columns:minmax(0,1fr) 56px 44px}
  .mx-odds{grid-template-columns:58px 1fr auto;row-gap:4px}
  .mx-odds .mx-chip{grid-column:2/-1;justify-self:start}
}
@media (min-width:1024px){
  .mx-tabs{-webkit-mask:none;mask:none;padding-right:4px;overflow:hidden}
  .mx-tabs span{flex:1;font-size:11.5px}
  .mx-road ul li{font-size:12.5px}
  .mx-road>li{padding:12px 14px 12px 44px}
  .mx-node{left:12px;top:13px}
  .mx-road>li:not(:last-child)::before{left:21px;top:33px}
}
.mx-head>div span{white-space:normal;overflow:visible;line-height:1.35}
.mx-head .mx-chip{align-self:flex-start;margin-top:2px}
.mx-screen[data-step="4"] .mx-prog{margin:0 0 6px}
.mx-screen[data-step="4"] .mx-road{margin-top:4px}
.mx-screen[data-step="4"]{gap:12px}
.mx--solo .mx-screen{display:grid;gap:12px}.mx--solo .mx-screen[data-step="4"] .mx-prog{margin:0 0 4px}

/* ===== /anak v15 hero — CTA + proof above the fold on mobile, single underline, floating report card ===== */
.ahero--v15{display:flex;flex-direction:column;padding:16px 0 0}
.ahero--v15 .ahero__txt{display:flex;flex-direction:column;padding:6px 20px 0}
.h-o1{order:1}.h-o2{order:2}.h-o3{order:3}.h-o4{order:4}.h-o5{order:5}.h-o6{order:6}.h-o7{order:7}
.ahero--v15 .ai-badges{margin:0 0 12px}
.ahero--v15 h1{font-family:var(--serif);font-weight:400;font-size:30px;line-height:1.13;letter-spacing:-.01em;color:var(--navy);text-wrap:balance}
.is-anak .ahero--v15 h1 em{font-style:normal;color:var(--hijau-tua);background:none;padding:0}
.is-anak .ahero--v15 h1 em.u{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8.5C40 3 90 2.5 198 6.5' fill='none' stroke='%23F2B544' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") left 100%/100% .3em no-repeat;padding-bottom:.08em}
.ahero--v15 .ahero__kick{margin-top:12px;padding:10px 14px;border-radius:14px;border-left:3px solid var(--sun,#F2B544);background:var(--sun-t,#FDF1DC);font-size:14.5px;line-height:1.45}
.ahero--v15 #heroCta{margin-top:16px}
.cta--hero{height:60px;font-size:17px;border-radius:999px;animation:ctaPulse 2.8s ease-in-out infinite}
@keyframes ctaPulse{0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 12px 24px -12px rgba(23,125,74,.75),0 0 0 0 rgba(31,164,91,.35)}
  50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 12px 24px -12px rgba(23,125,74,.75),0 0 0 8px rgba(31,164,91,0)}}
.cta-micro{margin-top:8px;font-size:13px;color:var(--ink-2);text-align:center}
.hproof{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:14px}
.hproof .avs img{width:30px;height:30px}
.hproof p{display:flex;align-items:center;gap:6px;font-size:13.5px;color:var(--ink-2)}
.hproof b{color:var(--navy)}
.hchips{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:12px 0 0;padding:0;list-style:none}
.hchips li{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px var(--line);font-size:11.5px;font-weight:600;color:var(--navy)}
.hchips .i{width:13px;height:13px;color:var(--hijau-tua);stroke-width:2}
.ahero--v15 .lede{margin-top:20px;font-size:15px}
.ahero--v15 .ahero__vis{height:250px;margin:24px 16px 0}
.ahero--v15 .ph--a{height:230px;width:52%}.ahero--v15 .ph--b{height:118px;width:46%}.ahero--v15 .ph--c{height:118px;width:36%}
.hcard{display:none}
@media (max-width:374px){.ahero--v15 h1{font-size:27px}.ahero--v15 .ahero__kick{font-size:14px}.hchips li{font-size:11px}}
@media (prefers-reduced-motion:reduce){.cta--hero{animation:none}}
@media (min-width:768px){
  .ahero--v15 .ahero__txt{padding:16px var(--gx) 0}
  .ahero--v15 h1{font-size:44px}
  .ahero--v15 .ahero__vis{height:400px;margin:28px var(--gx) 0}
  .ahero--v15 .ph--a{height:370px}.ahero--v15 .ph--b,.ahero--v15 .ph--c{height:180px}
}
@media (min-width:1024px){
  .ahero--v15{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center;padding:40px var(--gx) 8px}
  .ahero--v15 .ahero__txt{padding:0}
  .h-o7{order:3}.h-o3{order:4}.h-o4{order:5}.h-o5{order:6}.h-o6{order:7}
  .ahero--v15 h1{font-size:54px;line-height:1.08}
  .ahero--v15 .lede{margin-top:16px;font-size:17px}
  .ahero--v15 #heroCta{max-width:440px}
  .hproof,.hchips{justify-content:flex-start}
  .cta-micro{text-align:left;padding-left:24px}
  .ahero--v15 .ahero__vis{height:540px;margin:0}
  .ahero--v15 .ph--a{height:500px;width:58%}.ahero--v15 .ph--b{height:230px;width:46%}.ahero--v15 .ph--c{height:230px;width:38%}
  .hcard{display:block;position:absolute;z-index:4;left:-36px;bottom:52px;width:248px;padding:14px;border-radius:18px;background:#fff;
    box-shadow:0 24px 48px -20px rgba(21,36,74,.45),0 0 0 1px var(--line-2);animation:floaty 5s ease-in-out infinite}
  .hcard__t{display:flex;align-items:center;gap:10px;margin-bottom:10px}
  .hcard__t small{display:block;font-size:10.5px;color:var(--ink-2)}
  .hcard__t b{display:block;font-size:14px;color:var(--navy)}
  .hcard__r{display:grid;grid-template-columns:88px 1fr 40px;align-items:center;gap:8px;padding:4px 0;font-size:12px;font-weight:600;color:var(--navy)}
  .hcard__r i{height:7px;border-radius:4px;background:linear-gradient(90deg,#1FA45B,#3CC37A) left/var(--w) 100% no-repeat,#EFEAE0}
  .hcard__r em{font-style:normal;font-size:10px;font-weight:800;text-transform:uppercase;color:var(--hijau-tua);text-align:right}
  .hcard__f{display:flex;align-items:center;gap:6px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line-2);font-size:11.5px;font-weight:600;color:var(--hijau-tua)}
  .hcard__f .i{box-sizing:border-box;width:18px;height:18px;padding:4px;border-radius:50%;background:var(--hijau-tua);color:#fff;stroke-width:3.2}
}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){.hcard{animation:none}}
@media (min-width:1440px){.ahero--v15 h1{font-size:56px}}
@media (min-width:1024px){
  .ahero--v15{grid-template-columns:1.2fr 1fr;gap:48px;padding-top:28px}
  .ahero--v15 h1{font-size:48px;line-height:1.07}
  .ahero--v15 .lede{margin-top:12px;font-size:16px}
  .ahero--v15 .ahero__kick{margin-top:12px}
  .ahero--v15 #heroCta{margin-top:14px}
  .ahero--v15 .ahero__vis{height:500px}
  .ahero--v15 .ph--a{height:460px}
}
@media (min-width:1440px){.ahero--v15 h1{font-size:54px}}

/* ===== /anak v16 — step 05 "Tanya Potensa AI" (owner 2026-10-22): chat mockup in the same report window ===== */
.mx[data-active="5"] [data-t="5"]{background:#fff;color:var(--navy)}
.mx-tabs span{padding:7px 2px}
.mx-tab-ai{color:#9FE3BC!important}
.mx[data-active="5"] .mx-tab-ai{color:var(--hijau-tua)!important}
@media (max-width:420px){.mx-tabs{gap:2px}.mx-tabs span{font-size:10.5px}}
.st--ai .eyebrow{display:inline-flex;align-items:center;gap:6px}
.st--ai .eyebrow svg.i{width:15px;height:15px;stroke-width:2}
.st__link{display:inline-flex;align-items:center;gap:6px;margin-top:16px;font-weight:700;font-size:15px;color:var(--hijau-tua);text-decoration:none;
  border-bottom:2px solid rgba(31,164,91,.28);padding-bottom:2px;transition:border-color .2s,gap .2s}
.st__link:hover{border-color:var(--hijau-tua);gap:9px}
.st__link svg.i{width:16px;height:16px;stroke-width:2}
.mx-ava--ai{background:linear-gradient(135deg,#1FA45B,#177D4A)}
.mx-ava--ai svg{width:17px;height:17px;fill:#fff}
.mx-live{display:inline-block;width:6px;height:6px;margin-right:5px;border-radius:50%;background:#1FA45B;box-shadow:0 0 0 0 rgba(31,164,91,.5);animation:mxLive 1.8s infinite}
@keyframes mxLive{0%{box-shadow:0 0 0 0 rgba(31,164,91,.45)}70%{box-shadow:0 0 0 6px rgba(31,164,91,0)}100%{box-shadow:0 0 0 0 rgba(31,164,91,0)}}
.mx-chat,.mx--solo .mx-chat{display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:minmax(0,1fr);gap:10px}
.mx-thread{display:grid;gap:8px;align-content:start}
.mx-msg{margin:0;max-width:88%;padding:9px 12px;border-radius:16px;font-size:12.5px;line-height:1.45;
  transition:opacity .45s var(--ease),transform .45s var(--ease)}
.mx-msg--me{justify-self:end;background:var(--navy);color:#fff;border-bottom-right-radius:6px}
.mx-msg--ai{justify-self:start;background:#fff;color:var(--ink);box-shadow:0 0 0 1px #EFE9DE;border-bottom-left-radius:6px}
.mx-msg--ai p{margin:0}
.mx-msg--ai b{color:var(--navy)}
.mx-cite{display:inline-flex;margin-top:7px;padding:2px 9px;border-radius:999px;background:#DDF3E5;font-size:10.5px;font-weight:700;color:var(--hijau-tua)}
.mx-msg--typing{display:flex;gap:4px;padding:12px 14px}
.mx-msg--typing i{width:6px;height:6px;border-radius:50%;background:#B9C1D3;animation:mxDot 1.2s infinite}
.mx-msg--typing i:nth-child(2){animation-delay:.15s}.mx-msg--typing i:nth-child(3){animation-delay:.3s}
@keyframes mxDot{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-3px);opacity:1}}
.mx-input{display:flex;align-items:center;gap:8px;padding:5px 5px 5px 14px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px #E7DFD0;font-size:12px;color:var(--ink-3)}
.mx-input span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mx-input b{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:var(--hijau-tua)}
.mx-input svg{width:15px;height:15px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.mx-chat .mx-msg:nth-child(1){transition-delay:.1s}.mx-chat .mx-msg:nth-child(2){transition-delay:.55s}
.mx-chat .mx-msg:nth-child(3){transition-delay:1.15s}.mx-chat .mx-msg:nth-child(4){transition-delay:1.6s}
.story.is-armed .mx-chat:not(.is-in) .mx-msg{opacity:0;transform:translateY(10px)}
@media (min-width:1024px){.mx-msg{font-size:13.5px}.mx-input{font-size:13px}}
@media (prefers-reduced-motion:reduce){.mx-live,.mx-msg--typing i{animation:none}.mx-chat .mx-msg{transition:none}}
/* hero sun glow sits at right:-30px; keep it from widening the page on phones */
.ahero--v15,.ahero{overflow-x:clip}

/* ===== /anak v17 (owner 2026-10-22): step 05 explains Tanya AI inline; 5-tab window row no longer crowded ===== */
.st--ai{scroll-margin-top:90px}
.st__how{margin-top:16px;padding:14px 16px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px var(--line-2)}
.st__how-h{margin:0 0 10px;font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--navy)}
.st__how ol{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.st__how li{display:flex;gap:10px;align-items:flex-start}
.st__how li>span{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;background:#E9F5EE;font-size:12px;font-weight:800;color:var(--hijau-tua)}
.st__how li p{margin:1px 0 0;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.st__how li b{color:var(--navy)}
/* window tab row: full labels with room on the wide pinned window; on the per-step phone mockups only the
   current section is labelled and the other four become progress dots */
.mx-tabs{display:flex;gap:6px;padding:0 6px 12px;overflow:hidden;-webkit-mask:none;mask:none}
.mx-tabs span{flex:1 1 auto;padding:8px 12px;font-size:12px}
.mx--solo .mx-tabs{align-items:center;justify-content:center;gap:7px;padding:2px 4px 14px}
.mx--solo .mx-tabs span{flex:none;width:8px;height:8px;padding:0;border-radius:999px;background:rgba(255,255,255,.24);font-size:0;line-height:0;color:transparent!important;overflow:hidden;
  transition:none}
.mx--solo[data-active="1"] [data-t="1"],.mx--solo[data-active="2"] [data-t="2"],.mx--solo[data-active="3"] [data-t="3"],
.mx--solo[data-active="4"] [data-t="4"],.mx--solo[data-active="5"] [data-t="5"]{width:auto;height:auto;padding:6px 14px;font-size:12px;line-height:1.2;
  background:#fff;color:var(--navy)!important}
.mx--solo[data-active="5"] [data-t="5"]{color:var(--hijau-tua)!important}
@media (min-width:1024px){.is-anak .st{height:auto;min-height:470px}.is-anak .st--ai{padding:24px 0 8px}}
/* step 05 trust badges (owner 2026-10-22: "tersertifikasi" + research basis; only verifiable claims) */
.st__trust{display:grid;gap:8px;margin:14px 0 0;padding:12px 14px;border-radius:16px;background:#E9F5EE;list-style:none}
.st__trust li{display:flex;align-items:center;gap:10px;font-size:14px;line-height:1.35;color:var(--ink-2)}
.st__trust b{color:var(--navy)}
.st__trust svg.i{display:block;flex:none;width:28px;height:28px;padding:6px;border-radius:50%;background:#fff;color:var(--hijau-tua);stroke-width:2}
@media (min-width:1024px){
  .st__trust{grid-template-columns:repeat(3,1fr);gap:10px;padding:12px}
  .st__trust li{flex-direction:column;align-items:flex-start;gap:6px;font-size:13px}
}

/* ===== step lists gain "Tanya Potensa AI" (owner 2026-10-22) ===== */
.tline li.is-ai::before{border-color:var(--hijau)}
.tline li.is-ai .tline__t{color:var(--hijau-tua)}
.mini li:last-child:nth-child(odd){grid-column:1/-1}
.mini li.is-ai span{background:var(--ring);color:var(--navy)}
.flow--5 li:last-child:nth-child(odd){grid-column:1/-1}
.flow li.is-ai{box-shadow:var(--shC1),0 0 0 1.5px rgba(31,164,91,.45)}
.flow li.is-ai .ic{background:#E9F5EE;color:var(--hijau-tua)}
@media (min-width:768px) and (max-width:1023px){
  .tline--5{grid-template-columns:1fr;gap:0}
  .tline--5 li{padding:0 0 22px 34px}
  .tline--5 li::before{left:4px;top:4px}
  .tline--5 li:not(:last-child)::after{left:11px;right:auto;top:24px;bottom:2px;width:2px;height:auto}
  .flow--5{grid-template-columns:1fr 1fr}
}
@media (min-width:1024px){
  .tline--5{grid-template-columns:repeat(5,1fr)}
  .tline--5 b{font-size:21px}
  .flow--5{grid-template-columns:repeat(5,1fr)}
  .flow--5 li:last-child:nth-child(odd){grid-column:auto}
}
/* returning buyers: sign in to the Potensa account (2026-10-28) */
.hdr__in{display:inline-flex;align-items:center;height:40px;padding:0 12px;border-radius:999px;font-weight:700;font-size:14px;color:var(--navy);text-decoration:none}
.hdr__in:hover{background:rgba(21,36,74,.06)}

/* ===== 2026-10-28: DEWASA locked ("segera hadir") + a clear way in for people who already have an account ===== */
.hdr__in{gap:6px;height:42px;padding:0 16px 0 12px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--navy-m),0 6px 14px -10px rgba(21,36,74,.45)}
.hdr__in svg.i{width:18px;height:18px;stroke-width:2;color:var(--hijau-tua)}
.hdr__in:hover{background:#fff;box-shadow:inset 0 0 0 1.5px var(--navy),0 8px 18px -10px rgba(21,36,74,.5)}
.hdr__lock{display:inline-flex;align-items:center;gap:6px;color:var(--ink-3);cursor:default}
.hdr__lock i{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:999px;background:var(--navy-t);color:var(--ink-2)}
.cta--lock{cursor:default;pointer-events:none;background:transparent!important;color:var(--ink-3)!important;box-shadow:inset 0 0 0 1.5px var(--line)!important;font-weight:600}
.cta--lock::after{display:none!important}
.cta--lock svg.i{width:17px;height:17px;color:var(--ink-3)}
.cta--lock small{color:var(--ink-3)!important}
.final .cta--lock{color:rgba(255,255,255,.75)!important;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35)!important}
.final .cta--lock svg.i,.final .cta--lock small{color:rgba(255,255,255,.65)!important}
.sticky__row--solo{grid-template-columns:1fr}
.tp__go--lock{justify-content:flex-start;gap:8px;cursor:default;color:var(--ink-3);background:transparent;box-shadow:inset 0 0 0 1.5px var(--line)}
/* returning buyers: tests, analisa, Tanya Potensa AI live in the account */
.akunstrip{display:flex;align-items:center;gap:12px;margin-top:16px;padding:12px 12px 12px 14px;border-radius:18px;background:#fff;
  box-shadow:inset 0 0 0 1.5px var(--navy-m),0 14px 28px -22px rgba(21,36,74,.6);color:var(--navy);text-decoration:none;transition:box-shadow .2s,transform .2s}
.akunstrip:hover{box-shadow:inset 0 0 0 1.5px var(--navy),0 16px 30px -20px rgba(21,36,74,.6);transform:translateY(-1px)}
.akunstrip__ic{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:var(--hijau-muda,#E6F3EB);color:var(--hijau-tua)}
.akunstrip__ic svg.i{width:21px;height:21px;stroke-width:2}
.akunstrip__tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.akunstrip__tx b{font-size:14.5px;line-height:1.25}
.akunstrip__tx small{font-size:12.5px;line-height:1.4;color:var(--ink-2)}
.akunstrip__go{flex:none;display:inline-flex;align-items:center;gap:4px;height:38px;padding:0 14px;border-radius:999px;background:var(--navy);color:#fff;font-size:14px;font-weight:700}
.akunstrip__go svg.i{width:16px;height:16px;stroke-width:2.4}
.akunstrip--light{background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28);color:#fff}
.akunstrip--light .akunstrip__tx small{color:rgba(255,255,255,.78)}
.akunstrip--light .akunstrip__ic{background:rgba(255,255,255,.14);color:#9FE3BC}
.akunstrip--light .akunstrip__go{background:#fff;color:var(--navy)}
@media (max-width:370px){.akunstrip__tx small{display:none}}
@media (min-width:1024px){.hh .akunstrip{max-width:580px}.final .akunstrip{max-width:420px}}

/* ===== 2026-10-28: landing "all animated + emoji" (owner). Hero enters in a stagger, photos ease in and drift,
   floating emoji chips replace the sample-report card that covered the photos. Reduced motion: everything static. ===== */
.emo{display:inline-block;flex:none;vertical-align:middle}
.eyebrow{display:inline-flex;align-items:center;gap:7px}
.eyebrow .emo{margin:-4px 0}
.cta__em{margin:-6px 2px -6px -4px}
.pbar__k .emo{margin-right:2px}
.akunstrip__ic .emo{display:block}
.hh__vis{isolation:isolate}
.hfloat{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:7px;padding:6px 12px 6px 7px;border-radius:999px;background:rgba(255,255,255,.94);
  box-shadow:0 10px 24px -12px rgba(21,36,74,.55),inset 0 0 0 1px rgba(21,36,74,.06);font-size:12.5px;font-weight:700;color:var(--navy);white-space:nowrap;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hfloat--1{left:10px;top:12px}
.hfloat--2{right:10px;top:46%}
.hfloat--3{left:22%;bottom:-16px}
@media (min-width:1024px){
  .hfloat{font-size:14px;padding:8px 16px 8px 9px}
  .hfloat--1{left:-26px;top:40px}
  .hfloat--2{right:-22px;top:42%}
  .hfloat--3{left:12%;bottom:-20px}
}
@media (prefers-reduced-motion:no-preference){
  .hh__txt > *{animation:hhUp .7s var(--ease) both}
  .hh__txt > :nth-child(1){animation-delay:.05s}
  .hh__txt > :nth-child(2){animation-delay:.12s}
  .hh__txt > :nth-child(3){animation-delay:.2s}
  .hh__txt > :nth-child(4){animation-delay:.28s}
  .hh__txt > :nth-child(5){animation-delay:.36s}
  .hh__txt > :nth-child(n+6){animation-delay:.44s}
  .mosaic img{animation:hhIn .9s var(--ease) both}
  .mosaic__b{animation-delay:.15s!important}
  .hfloat{animation:hhPop .55s cubic-bezier(.34,1.56,.64,1) both,hhFloat 4.2s ease-in-out infinite}
  .hfloat--1{animation-delay:.7s,1.3s}
  .hfloat--2{animation-delay:.9s,2.1s}
  .hfloat--3{animation-delay:1.1s,1.7s}
  .pbar li{animation:hhUp .6s var(--ease) both}
  .pbar li:nth-child(2){animation-delay:.08s}.pbar li:nth-child(3){animation-delay:.16s}.pbar li:nth-child(4){animation-delay:.24s}
  .akunstrip__go svg.i{animation:hhNudge 1.8s ease-in-out 2s infinite}
}
@keyframes hhUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes hhIn{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:none}}
@keyframes hhPop{from{opacity:0;transform:scale(.6) translateY(8px)}to{opacity:1;transform:none}}
@keyframes hhFloat{0%,100%{translate:0 0}50%{translate:0 -7px}}
@keyframes hhNudge{0%,70%,100%{transform:none}80%{transform:translateX(3px)}90%{transform:translateX(-1px)}}

/* ===== 2026-10-28 landing (hub) v2: every section its own colour, stacked like cards (rounded tops overlap the
   section above), one consistent vertical rhythm, Lottie stickers that sit on the seam (never over text or photos).
   Palette: mint / warm sand / sky / blush / navy / cool grey / cream / linen / mint. Soft, not a rainbow. ===== */
.is-hub main>.sec,.is-hub main>.band{position:relative;margin-top:-28px;padding-top:68px;padding-bottom:76px;border-radius:32px 32px 0 0;
  box-shadow:0 -16px 32px -26px rgba(21,36,74,.28)}
.is-hub main>.pbar+.sec{margin-top:44px}
.is-hub main>.sec+.sec,.is-hub main>.band+.sec,.is-hub main>.sec--tint+.sec{padding-top:68px}
.is-hub #tentang{background:#EAF6EF}
.is-hub #kenapa{background:#FBF3E4}
.is-hub #cara{background:#EEF4FB}
.is-hub #mulai{background:#FDEEE8}
.is-hub #dapat{background:var(--navy)}
.is-hub #ilmiah{background:#F1F4F8}
.is-hub #testimoni{background:#FFFCF6}
.is-hub #faq{background:#F5F0E6}
.is-hub #kuis-akhir{background:#EAF6EF;padding-bottom:96px}
.is-hub #kenapa .ic,.is-hub #mulai .ic,.is-hub #ilmiah .ic{background:#fff;box-shadow:0 0 0 1px rgba(21,36,74,.08)}
.is-hub .sec .final{margin-top:28px}
/* Lottie stickers */
.lt{position:absolute;z-index:2;right:12px;top:-60px;width:132px;height:122px;pointer-events:none;opacity:0;transition:opacity .6s var(--ease)}
.lt.is-on{opacity:1}
.lt--s{width:96px;height:96px;top:-48px;right:18px}
.lt svg{display:block}
.lt--b{width:140px;height:128px}
@media (min-width:768px){
  .is-hub main>.sec,.is-hub main>.band{margin-top:-40px;padding-top:92px;padding-bottom:108px;border-radius:48px 48px 0 0}
  .is-hub main>.pbar+.sec{margin-top:64px}
  .is-hub main>.sec+.sec,.is-hub main>.band+.sec,.is-hub main>.sec--tint+.sec{padding-top:92px}
  .lt{right:var(--gx);top:-92px;width:220px;height:200px}
  .lt--s{width:150px;height:150px;top:-72px}
}
@media (min-width:1024px){
  .is-hub main>.sec,.is-hub main>.band{padding-top:112px;padding-bottom:124px}
  .is-hub main>.sec+.sec,.is-hub main>.band+.sec,.is-hub main>.sec--tint+.sec{padding-top:112px}
  .lt{width:250px;height:226px;top:-104px}
  .lt--s{width:170px;height:170px;top:-82px}
}
@media (prefers-reduced-motion:reduce){.lt{transition:none}}
.is-hub #kuis-akhir .final{margin-top:0}

/* Lottie stickers v2 (owner: "rapih, sizenya"): ONE size for all, content cropped by lottie_boot.fit(), each inside the
   same round white badge sitting on the seam at the same spot. Overrides the per-type sizes above. */
.lt,.lt--a,.lt--b,.lt--s{width:112px;height:112px;top:-56px;right:18px;padding:14px;border-radius:50%;background:#fff;
  box-shadow:0 14px 30px -18px rgba(21,36,74,.45),0 0 0 6px rgba(255,255,255,.55)}
.lt svg{width:100%!important;height:100%!important}
#dapat .lt{box-shadow:0 14px 30px -14px rgba(0,0,0,.55),0 0 0 6px rgba(255,255,255,.12)}
@media (min-width:768px){.lt,.lt--a,.lt--b,.lt--s{width:156px;height:156px;top:-78px;right:var(--gx);padding:20px}}
@media (min-width:1024px){.lt,.lt--a,.lt--b,.lt--s{width:176px;height:176px;top:-88px;padding:22px}}
@media (prefers-reduced-motion:no-preference){.lt.is-on{animation:ltPop .6s cubic-bezier(.34,1.56,.64,1) both}}
@keyframes ltPop{from{opacity:0;scale:.7}to{opacity:1;scale:1}}
.lt{overflow:hidden}

/* Lottie v3 (owner: "masih ga nyambung, jelek"): ONE icon family (ican "Education - Animation Icons", identical
   500x500 framing) shown as a section icon tile above each heading, in the normal flow (never over text/photos, never
   on the seam). Overrides every .lt rule above. */
.lt,.lt--a,.lt--b,.lt--s{position:relative;top:auto;right:auto;z-index:auto;display:block;width:76px;height:76px;margin:0 0 16px;padding:8px;
  border-radius:24px;background:#fff;overflow:hidden;box-shadow:0 12px 26px -16px rgba(21,36,74,.45),inset 0 0 0 1px rgba(21,36,74,.05)}
#dapat .lt{background:#fff;box-shadow:0 12px 26px -12px rgba(0,0,0,.6)}
.lt svg{width:100%!important;height:100%!important;display:block}
@media (min-width:768px){.lt,.lt--a,.lt--b,.lt--s{width:92px;height:92px;margin-bottom:18px;padding:10px;border-radius:28px;right:auto}}
@media (min-width:1024px){.lt,.lt--a,.lt--b,.lt--s{width:100px;height:100px;top:auto}}
@media (prefers-reduced-motion:no-preference){.lt.is-on{animation:ltIn .7s cubic-bezier(.34,1.56,.64,1) both}}
@keyframes ltIn{from{opacity:0;scale:.6;rotate:-8deg}to{opacity:1;scale:1;rotate:0deg}}
/* the eyebrow sits right under the tile now: no emoji, tighter top padding since the tile adds height */
.is-hub main>.sec,.is-hub main>.band{padding-top:52px}
.is-hub main>.sec+.sec,.is-hub main>.band+.sec,.is-hub main>.sec--tint+.sec{padding-top:52px}
@media (min-width:768px){.is-hub main>.sec,.is-hub main>.band,.is-hub main>.sec+.sec,.is-hub main>.band+.sec,.is-hub main>.sec--tint+.sec{padding-top:76px}}
@media (min-width:1024px){.is-hub main>.sec,.is-hub main>.band,.is-hub main>.sec+.sec,.is-hub main>.band+.sec,.is-hub main>.sec--tint+.sec{padding-top:92px}}