@font-face{font-family:"Overpass";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/overpass-700.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Overpass";font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/overpass-800.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-400.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-500.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-600.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Overpass Fallback";src:local("Arial Bold"),local("Arial-BoldMT");font-weight:700 800;size-adjust:98.7%;ascent-override:89.4%;descent-override:38.8%;line-gap-override:0.0%}
@font-face{font-family:"IBM Plex Sans Fallback";src:local("Arial"),local("ArialMT");font-weight:400 600;size-adjust:100.5%;ascent-override:101.9%;descent-override:27.4%;line-gap-override:0.0%}

/* TAByte brand v1.0: Nila listrik, Malam, Sinyal, Putih; Overpass and IBM Plex Sans */
:root{
  color-scheme:light;
  --nila:#3326F5;--malam:#100C47;--sinyal:#FFD60A;--putih:#FFFFFF;
  --bg:#FFFFFF;--bg-2:#F1F2F8;--surface:#FFFFFF;--surface-2:#F1F2F8;--surface-3:#E5E7F2;
  --ink:#100C47;--ink-2:#2A2763;--muted:#4A4D63;--line:#E1E3EE;--line-2:#C7CADB;
  --accent:#3326F5;--accent-ink:#3326F5;--accent-soft:#E8E6FE;--accent-line:#C4BFFB;--on-accent:#FFFFFF;
  --flow-1:#3326F5;--flow-2:#100C47;
  --bad:#C3343A;--bad-soft:#FBE6E7;--warn:#8A5A00;--warn-soft:#FFF4C2;--ok:#007A33;--ok-soft:#E1F1E7;
  --band:#100C47;--band-ink:#FFFFFF;--band-muted:rgba(255,255,255,.74);--band-line:rgba(255,255,255,.32);
  --head:"Overpass","Overpass Fallback","IBM Plex Sans",system-ui,sans-serif;
  --sans:"IBM Plex Sans","IBM Plex Sans Fallback",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --wrap:1120px;--pad:clamp(18px,4vw,40px);--r:10px;--r-sm:6px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  color-scheme:dark;
  --bg:#100C47;--bg-2:#151052;--surface:#1A155E;--surface-2:#211B6B;--surface-3:#2A2479;
  --ink:#FFFFFF;--ink-2:#E3E2F6;--muted:#B5B3D8;--line:#2E2880;--line-2:#433D99;
  --accent:#3326F5;--accent-ink:#A7A1FF;--accent-soft:#272090;--accent-line:#4A42C9;--on-accent:#FFFFFF;
  --flow-1:#FFD60A;--flow-2:#FFFFFF;
  --bad:#FF8A8A;--bad-soft:#3D1838;--warn:#FFD60A;--warn-soft:#3A3315;--ok:#62D394;--ok-soft:#143A39;
  --band:#0A0731;--band-ink:#FFFFFF;--band-muted:rgba(255,255,255,.74);--band-line:rgba(255,255,255,.3);
}}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#100C47;--bg-2:#151052;--surface:#1A155E;--surface-2:#211B6B;--surface-3:#2A2479;
  --ink:#FFFFFF;--ink-2:#E3E2F6;--muted:#B5B3D8;--line:#2E2880;--line-2:#433D99;
  --accent:#3326F5;--accent-ink:#A7A1FF;--accent-soft:#272090;--accent-line:#4A42C9;--on-accent:#FFFFFF;
  --flow-1:#FFD60A;--flow-2:#FFFFFF;
  --bad:#FF8A8A;--bad-soft:#3D1838;--warn:#FFD60A;--warn-soft:#3A3315;--ok:#62D394;--ok-soft:#143A39;
  --band:#0A0731;--band-ink:#FFFFFF;--band-muted:rgba(255,255,255,.74);--band-line:rgba(255,255,255,.3);
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 76px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1rem/1.5 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
h1,h2,h3,h4{margin:0;font-family:var(--head);color:var(--ink);text-wrap:balance}
h1,h2{font-weight:800;letter-spacing:-.01em}
h3,h4{font-weight:700}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit}
svg{max-width:100%}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
.ico{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.num{font-variant-numeric:tabular-nums}

/* logo: colour on light, white on dark */
.logo{display:inline-flex;align-items:center;text-decoration:none;flex:none}
.logo-img{display:block;height:28px;width:auto}
.logo-w{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .top .logo-c{display:none}:root:not([data-theme="light"]) .top .logo-w{display:block}}
:root[data-theme="dark"] .top .logo-c{display:none}
:root[data-theme="dark"] .top .logo-w{display:block}

/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--bg);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;gap:32px;height:68px}
.nav{display:flex;gap:26px}
.nav a{font:500 .95rem/1 var(--sans);color:var(--ink-2);text-decoration:none}
.nav a:hover{color:var(--accent-ink)}
.top .btn{margin-left:auto}
@media (max-width:880px){.nav{display:none}}

/* buttons: one filled primary per screen */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:0 20px;border-radius:999px;font:600 1rem/1.25 var(--sans);text-decoration:none;border:1.5px solid transparent;cursor:pointer;white-space:nowrap;transition:background-color .15s,border-color .15s,color .15s}
.btn svg{width:18px;height:18px;flex:none}
.btn-primary{background:var(--nila);color:#fff}
.btn-primary:hover{background:#2419d6}
.btn-line{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-line:hover{border-color:var(--ink)}
.btn-on-dark{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.btn-on-dark:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.tlink{display:inline-flex;align-items:center;gap:6px;font:600 .95rem/1.3 var(--sans);color:var(--accent-ink);text-decoration:none}
.tlink svg{width:16px;height:16px;flex:none}
.tlink:hover{text-decoration:underline;text-underline-offset:3px}

/* hero: Nila listrik field, the network running by itself */
.hero{background:var(--nila);color:#fff;overflow:hidden}
.hero-in{display:grid;gap:clamp(28px,4vw,48px);align-items:center;padding-block:clamp(56px,8vw,104px)}
@media (min-width:980px){.hero-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.hero h1{color:#fff;font-size:clamp(2.1rem,1.3rem + 2.6vw,2.75rem);line-height:1.14;max-width:21ch}
.hero .lead{margin-top:20px;max-width:44ch;font-size:clamp(1.06rem,1rem + .3vw,1.125rem);line-height:1.56;color:rgba(255,255,255,.86)}
.hero .cta-row{margin-top:30px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hero .tlink{color:#fff}
.map{width:100%;height:auto;display:block}
.map .bar{fill:none;stroke:#fff;stroke-width:10;stroke-linecap:round;stroke-linejoin:round}
.map .stem{fill:none;stroke:var(--sinyal);stroke-width:10;stroke-linecap:round;stroke-linejoin:round}
.map .st{fill:var(--nila);stroke:#fff;stroke-width:4}
.map .st.y{stroke:var(--sinyal)}
.map .xc{fill:#fff;stroke:var(--malam);stroke-width:5}
.map .lb{font:700 14px var(--head);fill:#fff}
.map .pulse{fill:var(--malam);stroke:#fff;stroke-width:2.5}
.map .chip rect{fill:var(--sinyal)}
.map .chip text{font:600 12.5px var(--sans);fill:var(--malam)}

/* sections */
.sec{padding-block:clamp(64px,8.5vw,112px)}
.sec.tint{background:var(--bg-2)}
.sec-h{display:grid;gap:14px;margin-bottom:clamp(28px,4vw,48px)}
@media (min-width:960px){.sec-h{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:end;gap:56px}}
.sec-h h2,.qa h2{font-size:clamp(1.85rem,1.25rem + 1.7vw,2.75rem);line-height:1.14;max-width:20ch}
.lead{max-width:52ch;font-size:1.125rem;line-height:1.56;color:var(--muted)}
.cap{margin-top:14px;font:500 .875rem/1.43 var(--sans);color:var(--muted)}

/* problems: pick one, see the fix working */
.pick{display:grid;gap:16px}
@media (min-width:900px){.pick{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:28px;align-items:start}}
.pick-list{display:grid;gap:6px}
.pick-btn{display:grid;grid-template-columns:14px minmax(0,1fr);gap:14px;align-items:center;width:100%;padding:14px 16px;border:1.5px solid transparent;border-radius:var(--r);background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.pick-btn:hover{background:var(--surface-2)}
.pick-btn[aria-selected="true"]{background:var(--surface-2);border-color:var(--accent-line)}
.pick-btn .node{width:14px;height:14px;border:3px solid var(--line-2);border-radius:50%;background:var(--surface)}
.pick-btn[aria-selected="true"] .node{border-color:var(--nila);background:var(--surface)}
.pick-btn b{display:block;font:700 1.125rem/1.3 var(--head)}
.pick-btn small{display:block;margin-top:2px;font:500 .875rem/1.43 var(--sans);color:var(--muted)}
.fix-panel{min-width:0;padding:clamp(16px,2.4vw,26px);background:var(--surface);border:1.5px solid var(--line);border-radius:14px}
.fix-k{margin-bottom:10px;font:500 .875rem/1.4 var(--sans);color:var(--muted)}
.fix-ba{display:grid;grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr);gap:8px;align-items:stretch;margin-top:16px}
.fix-ba .arr{display:grid;place-items:center;color:var(--muted)}
.fix-ba .arr svg{width:18px;height:18px}
.fix-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
@media (max-width:560px){.fix-ba{grid-template-columns:minmax(0,1fr)}.fix-ba .arr{transform:rotate(90deg)}}
.ba-row{padding:10px 12px;border-radius:var(--r-sm);font-size:.95rem;line-height:1.4}
.ba-row .k{display:block;margin-bottom:2px;font:600 .8rem/1.2 var(--sans)}
.ba-row.before{background:var(--surface-2);color:var(--ink-2)}
.ba-row.before .k{color:var(--bad)}
.ba-row.after{background:var(--accent-soft);color:var(--ink)}
.ba-row.after .k{color:var(--accent-ink)}
.tag{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:var(--surface-2);font:500 .8rem/1 var(--sans);color:var(--ink-2);white-space:nowrap}
.tag svg{width:14px;height:14px}
.tag.custom{background:var(--accent-soft);color:var(--accent-ink)}
.mock{overflow:hidden;border:1px solid var(--line);border-radius:var(--r);background:var(--bg)}
.mock-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 12px;border-bottom:1px solid var(--line);background:var(--surface-2);font:600 .8rem/1.2 var(--sans);color:var(--ink-2)}
.mock-body{display:grid;gap:10px;padding:14px;font-size:.9rem;line-height:1.4}
.badge{display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border-radius:999px;font:600 .72rem/1 var(--sans);white-space:nowrap}
.badge svg{width:12px;height:12px}
.badge.ok{background:var(--ok-soft);color:var(--ok)}
.badge.warn{background:var(--warn-soft);color:var(--warn)}
.badge.bad{background:var(--bad-soft);color:var(--bad)}
.badge.ac{background:var(--accent-soft);color:var(--accent-ink)}
.kpi{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.kpi small{display:block;color:var(--muted);font-size:.8rem}
.kpi b{display:block;font:800 1.6rem/1.1 var(--head);font-variant-numeric:tabular-nums}
.spark{display:flex;align-items:flex-end;gap:4px;width:120px;height:42px}
.spark i{flex:1;border-radius:2px;background:var(--accent-line)}
.spark i:last-child{background:var(--nila)}
.mrow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:9px;border-top:1px solid var(--line);font-variant-numeric:tabular-nums}
.mrow > span:first-child{min-width:0}
.mock-body > .mrow:first-child{border-top:0;padding-top:0}
.mrow small{display:block;color:var(--muted);font-size:.78rem}
.meter{flex:none;width:84px;height:6px;border-radius:3px;background:var(--surface-3);overflow:hidden}
.meter i{display:block;height:100%;background:var(--ink-2)}
.wave{display:flex;align-items:center;gap:2px;height:26px}
.wave i{width:3px;border-radius:2px;background:var(--nila)}
.todo{display:flex;align-items:flex-start;gap:9px}
.todo::before{content:"";flex:none;width:14px;height:14px;margin-top:2px;border:1.5px solid var(--line-2);border-radius:4px}
.av{flex:none;display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--surface-3);color:var(--ink-2);font:600 .66rem/1 var(--sans)}
.bub{max-width:88%;padding:9px 12px;border-radius:12px;font-size:.9rem;line-height:1.45}
.bub.q{justify-self:end;background:var(--surface-3);border-radius:12px 12px 3px 12px}
.bub.a{justify-self:start;background:var(--accent-soft);border-radius:12px 12px 12px 3px}
.bub.a small{display:block;margin-top:4px;font:500 .75rem/1.3 var(--sans);color:var(--accent-ink)}
.mock-note{margin-top:8px;font:500 .78rem/1.4 var(--sans);color:var(--muted)}

/* results: two case studies, people, time, result */
.cases{display:grid;gap:clamp(16px,2.4vw,24px)}
.case{min-width:0;padding:clamp(18px,2.8vw,34px);background:var(--surface);border:1.5px solid var(--line);border-radius:16px}
.case-k{margin-bottom:10px;font:600 .875rem/1.3 var(--sans);color:var(--accent-ink)}
.case-h{font-size:clamp(1.35rem,1.05rem + .95vw,1.75rem);line-height:1.22;max-width:40ch}
.case-h .hl{color:var(--accent-ink)}
.case-sub{margin-top:10px;max-width:58ch;color:var(--muted)}
.cmp{display:grid;grid-template-columns:104px minmax(0,1fr) minmax(0,1fr);gap:10px;margin-top:clamp(18px,2.4vw,28px)}
.cmp-row{display:contents}
.cmp-hd{padding:0 2px;font:600 .875rem/1.2 var(--sans);color:var(--muted)}
.cmp-hd.new{color:var(--accent-ink)}
.cmp-k{display:flex;flex-direction:column;gap:6px;padding-top:14px;font:700 1rem/1.2 var(--head);color:var(--ink-2)}
.cmp-k svg{width:20px;height:20px}
.cmp-c{min-width:0;padding:14px 16px;border-radius:var(--r);font-size:.95rem;line-height:1.45}
.cmp-c.old{background:var(--surface-2)}
.cmp-c.new{background:var(--accent-soft)}
.cmp-c small{display:block;margin-top:4px;font-size:.875rem;line-height:1.43;color:var(--muted)}
.cmp-c.new small{color:var(--accent-ink)}
.cmp-c small svg{width:14px;height:14px;margin-right:5px;vertical-align:-2px}
.cmp-v{display:block;font:800 clamp(1.45rem,1.15rem + .9vw,1.95rem)/1.1 var(--head);font-variant-numeric:tabular-nums}
.cmp-c.new .cmp-v{color:var(--accent-ink)}
.cmp .bad{color:var(--bad)}
.ppl{display:flex;align-items:center;gap:3px;margin-bottom:8px;color:var(--ink-2)}
.ppl svg{width:22px;height:22px}
.ppl .gone{color:var(--bad)}
.ppl .more{margin-left:2px;color:var(--muted)}
.cmp-c.new .ppl{color:var(--accent-ink)}
.mt{display:flex;justify-content:space-between;gap:8px;font-size:.875rem;font-variant-numeric:tabular-nums}
.bar + .mt{margin-top:10px}
.mt b{font-weight:600}
.bar{position:relative;height:8px;margin-top:6px;overflow:hidden;border-radius:4px;background:var(--surface-3)}
.bar i{position:absolute;top:0;bottom:0;left:0;border-radius:4px;background:var(--muted)}
.bar i.part{background:repeating-linear-gradient(135deg,var(--line-2) 0 4px,transparent 4px 8px)}
.cmp-c.new .bar{background:color-mix(in srgb,var(--nila) 16%,var(--surface))}
.cmp-c.new .bar i{background:var(--nila)}
.cmp-c.new .bar i.range{background:color-mix(in srgb,var(--nila) 34%,transparent)}
@media (max-width:640px){
  .cmp{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .cmp-hd.k{display:none}
  .cmp-k{grid-column:1/-1;flex-direction:row;align-items:center;gap:8px;padding-top:8px}
  .cmp-c{padding:12px}
}

/* company brain: the ring */
.isl{display:grid;gap:14px}
@media (min-width:860px){.isl{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.isl-p{min-width:0;padding:clamp(14px,2vw,22px);border:1.5px solid var(--line);border-radius:16px;background:var(--surface-2)}
.isl-p.new{background:var(--surface);border-color:var(--accent-line)}
.isl-k{margin-bottom:6px;font:700 1rem/1.2 var(--head);color:var(--muted)}
.isl-p.new .isl-k{color:var(--accent-ink)}
.isl-p > svg{display:block;width:100%;height:auto}
.ra .ra-c{fill:var(--surface);stroke:var(--line-2);stroke-width:3}
.ra.on .ra-c{stroke:var(--nila)}
.ra .ra-g{fill:var(--ink-2)}
.rn-t{font:700 14px var(--head);fill:var(--ink)}
.xd circle{fill:var(--surface);stroke:var(--bad);stroke-width:1.6}
.xd path{fill:none;stroke:var(--bad);stroke-width:2;stroke-linecap:round}
.hb-e{fill:none;stroke:var(--muted);stroke-width:1.6;stroke-dasharray:5 5;opacity:.7}
.hb-er{fill:none;stroke:var(--line-2);stroke-width:1.1;stroke-dasharray:3 4}
.hb-f{fill:#fff;stroke:var(--malam);stroke-width:5}
.hb-r{fill:#F1F2F8;stroke:none}
.hb-t{font:600 10.5px var(--sans);fill:var(--malam)}
.ki{fill:none;stroke:var(--ink-2);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ki.on{stroke:var(--nila)}
.kt{font:600 11.5px var(--sans);fill:var(--ink)}
.qb{font:800 18px var(--head);fill:var(--bad)}
.cl path,.cl circle{fill:var(--surface);stroke:var(--line-2);stroke-width:1.4}
.cl.red path,.cl.red circle{fill:var(--bad-soft);stroke:var(--bad)}
.dl{fill:none;stroke:var(--muted);stroke-width:4;stroke-linecap:round;stroke-dasharray:0 10}
.dl.fade{opacity:.3}
.dl.on{stroke:var(--flow-1)}
.dl.run{animation:dots2 10s linear infinite}
@keyframes dots2{0%{stroke-dashoffset:0;stroke:var(--flow-1)}44%{stroke:var(--flow-1)}50%{stroke-dashoffset:-80;stroke:var(--flow-2)}94%{stroke:var(--flow-2)}100%{stroke-dashoffset:0;stroke:var(--flow-1)}}
.rok circle{fill:var(--nila)}
.rok path{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.flow-key{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:6px;font:500 .875rem/1.3 var(--sans);color:var(--muted)}
.flow-key span{display:inline-flex;align-items:center;gap:7px}
.flow-key i{width:10px;height:10px;border-radius:50%;background:var(--flow-1)}
.flow-key i.out{background:var(--flow-2)}

/* how we work: the plan in weeks */
.fig{margin:0;padding:clamp(16px,2.8vw,32px);background:var(--surface);border:1.5px solid var(--line);border-radius:16px}
.plan{display:grid;grid-template-columns:minmax(150px,220px) repeat(7,minmax(0,1fr));row-gap:12px;align-items:center}
.plan-sc{grid-row:1;align-self:end;box-sizing:content-box;height:.8rem;padding-bottom:8px;border-bottom:1px solid var(--line);font:500 .8rem/1 var(--sans);color:var(--muted);white-space:nowrap}
.plan-l{grid-column:1;padding-right:18px}
.plan-l b{display:block;font:700 1.125rem/1.2 var(--head)}
.plan-l small{display:block;margin-top:3px;font-size:.875rem;line-height:1.43;color:var(--muted)}
.plan-l .wk{display:none}
.plan-bar{display:flex;align-items:center;height:32px;padding:0 12px;overflow:hidden;border-radius:999px;background:var(--accent-soft);font:600 .8rem/1 var(--sans);color:var(--accent-ink);white-space:nowrap}
.plan-bar.go{background:repeating-linear-gradient(135deg,var(--accent-soft) 0 6px,transparent 6px 12px);box-shadow:inset 0 0 0 1.5px var(--accent-line)}
.w1{grid-column:2/3}.w12{grid-column:2/4}.w26{grid-column:3/8}.wgo{grid-column:8/9}
.plan .r1{grid-row:2}.plan .r2{grid-row:3}.plan .r3{grid-row:4}.plan .r4{grid-row:5}
@media (max-width:720px){
  .plan{grid-template-columns:repeat(7,minmax(0,1fr));row-gap:8px}
  .plan-sc{display:none}
  .plan-l{grid-column:1/-1;padding:10px 0 0}
  .plan-l .wk{display:inline;margin-left:8px;font:600 .8rem/1 var(--sans);color:var(--accent-ink)}
  .plan-bar{height:10px;padding:0;font-size:0}
  .w1{grid-column:1/2}.w12{grid-column:1/3}.w26{grid-column:2/7}.wgo{grid-column:7/8}
  .plan .plan-l.r1{grid-row:2}.plan .plan-bar.r1{grid-row:3}.plan .plan-l.r2{grid-row:4}.plan .plan-bar.r2{grid-row:5}
  .plan .plan-l.r3{grid-row:6}.plan .plan-bar.r3{grid-row:7}.plan .plan-l.r4{grid-row:8}.plan .plan-bar.r4{grid-row:9}
}

/* questions */
.qa{display:grid;gap:28px}
@media (min-width:960px){.qa{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px}}
.qa .lead{margin-top:14px;max-width:40ch}
.qa-list details{border-top:1px solid var(--line)}
.qa-list details:last-child{border-bottom:1px solid var(--line)}
.qa-list summary{display:flex;justify-content:space-between;gap:16px;padding:18px 0;font:700 1.125rem/1.35 var(--head);list-style:none;cursor:pointer}
.qa-list summary::-webkit-details-marker{display:none}
.qa-list summary::after{content:"+";flex:none;font:700 1.3rem/1 var(--head);color:var(--accent-ink)}
.qa-list details[open] summary::after{content:"\2212"}
.qa-list p{max-width:62ch;padding:0 0 18px;color:var(--ink-2)}

/* closing on Malam */
.close{background:var(--band);color:var(--band-ink)}
.close-in{display:grid;gap:30px;padding-block:clamp(64px,9vw,120px)}
@media (min-width:900px){.close-in{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:end}}
.close .logo-img{height:30px;margin-bottom:26px}
.close .logo-w{display:block}
.close h2{max-width:17ch;font-size:clamp(2rem,1.3rem + 2.2vw,3rem);line-height:1.1;color:#fff}
.close p{margin-top:16px;max-width:50ch;font-size:1.125rem;line-height:1.56;color:var(--band-muted)}
.close-mail{margin-top:14px;color:var(--band-muted)}
.close-mail a{color:#fff;text-underline-offset:3px}

/* more from TAByte */
.more-sec{padding-block:clamp(48px,6vw,80px);background:var(--bg-2)}
.more-sec h2{font-size:clamp(1.5rem,1.1rem + 1.2vw,2rem);margin-bottom:22px}
.more-grid{display:grid;gap:14px}
@media (min-width:900px){.more-grid{grid-template-columns:minmax(0,2.1fr) minmax(0,1fr)}}
.media{display:grid;gap:18px;padding:24px;background:var(--surface);border:1.5px solid var(--line);border-radius:16px}
.media-h{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px 24px}
.media h3{font-size:1.25rem;line-height:1.3}
.media-h p{margin-top:6px;max-width:46ch;color:var(--muted)}
.chan{display:flex;flex-wrap:wrap;gap:8px}
.chan-b{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border:1.5px solid var(--line-2);border-radius:999px;font:600 .875rem/1 var(--sans);color:var(--ink)}
.chan-b svg{width:17px;height:17px}
.posts{display:grid;gap:12px;grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:640px){.posts{grid-template-columns:minmax(0,1fr)}}
.post{display:grid;gap:6px;align-content:start}
.post b{font:700 1rem/1.3 var(--head);color:var(--ink)}
.kind{font:600 .8rem/1.2 var(--sans);color:var(--accent-ink)}
.thumb{position:relative;display:grid;place-items:center;aspect-ratio:16/10;margin-bottom:4px;overflow:hidden;border-radius:12px}
.thumb.t1{background:var(--nila)}
.thumb.t2{background:var(--malam)}
.thumb.t3{background:var(--accent-soft)}
.thumb::before{content:"";position:absolute;left:-10%;right:-10%;top:38%;height:12px;border-radius:6px;background:rgba(255,255,255,.18)}
.thumb.t3::before{background:rgba(51,38,245,.14)}
.play{position:relative;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#fff;color:var(--malam)}
.play svg{width:20px;height:20px;margin-left:3px}
.plat{position:absolute;left:10px;top:10px;display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border-radius:999px;background:rgba(255,255,255,.92);font:600 .72rem/1 var(--sans);color:var(--malam)}
.plat svg{width:13px;height:13px}
.media-note{font:500 .8rem/1.4 var(--sans);color:var(--muted)}
.prod-k{font:600 .8rem/1.2 var(--sans);color:var(--accent-ink)}
.prod{display:flex;flex-direction:column;gap:10px;padding:24px;background:var(--surface);border:1.5px solid var(--line);border-radius:16px}
.prod h3{font-size:1.25rem;line-height:1.3}
.prod p{color:var(--muted)}
.prod .tlink{margin-top:auto}
.ext{width:14px;height:14px}

/* footer */
.foot{padding-block:44px 28px;background:var(--bg)}
.foot-in{display:grid;gap:24px}
@media (min-width:760px){.foot-in{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}}
.foot p{max-width:42ch;margin-top:14px;color:var(--muted)}
.foot-c{display:grid;gap:6px;color:var(--ink-2)}
.foot-c a{text-decoration:none}
.foot-soc{display:flex;gap:12px;margin-top:6px;color:var(--ink-2)}
.foot-soc svg{width:20px;height:20px}
.foot-c a:hover{color:var(--accent-ink)}
.legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:32px;padding-top:18px;border-top:1px solid var(--line);font:500 .875rem/1.4 var(--sans);color:var(--muted)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .foot .logo-c{display:none}:root:not([data-theme="light"]) .foot .logo-w{display:block}}
:root[data-theme="dark"] .foot .logo-c{display:none}
:root[data-theme="dark"] .foot .logo-w{display:block}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}.dl.run{animation:none}}

/* mock-up options inside a problem panel (temporary, for choosing) */
.mopt{display:flex;align-items:center;gap:6px;margin-bottom:10px;font:500 .8rem/1 var(--sans);color:var(--muted)}
.mopt span{margin-right:4px}
.mopt button{appearance:none;min-width:30px;padding:6px 9px;border:1px solid var(--line-2);border-radius:999px;background:var(--surface);color:var(--ink-2);font:600 .78rem/1 var(--sans);cursor:pointer}
.mopt button[aria-pressed="true"]{background:var(--malam);border-color:var(--malam);color:#fff}
.mock-opts .mo{display:none}
.mock-opts[data-mopt="a"] .mo-a,.mock-opts[data-mopt="b"] .mo-b,.mock-opts[data-mopt="c"] .mo-c{display:block}
.mock-std{font:500 .8rem/1.4 var(--sans);color:var(--muted)}
.chk{display:flex;align-items:center;gap:9px;font-size:.9rem}
.chk svg{width:18px;height:18px;flex:none;color:var(--ok)}
.ktri{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ktri div{padding:10px;border-radius:8px;background:var(--surface-2)}
.ktri b{display:block;font:800 1.25rem/1.1 var(--head);font-variant-numeric:tabular-nums}
.ktri small{display:block;margin-top:4px;font-size:.75rem;line-height:1.3;color:var(--muted)}

/* "reports are always late": visit monitoring mock-ups */
.vc{display:inline-block;width:20px;height:20px;border-radius:5px;flex:none}
.vc.ok{background:#1FA463}
.vc.low{background:#F2B705}
.vc.miss{background:transparent;box-shadow:inset 0 0 0 2px var(--bad);background-image:linear-gradient(45deg,transparent 45%,var(--bad) 45%,var(--bad) 55%,transparent 55%)}
.vsum{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:.88rem;color:var(--ink-2)}
.vsum span{display:inline-flex;align-items:center;gap:7px}
.vsum b{font:800 1.05rem/1 var(--head);color:var(--ink)}
.vsum .vc{width:12px;height:12px;border-radius:3px}
.vgrid{display:grid;gap:7px;padding-top:4px}
.vrow{display:grid;grid-template-columns:118px minmax(0,1fr);gap:10px;align-items:center;font-size:.88rem}
.vcells{display:flex;flex-wrap:wrap;gap:5px}
.okline{display:flex;align-items:center;gap:9px;padding:10px 12px;border-radius:8px;background:var(--ok-soft);color:var(--ok);font:600 .88rem/1.35 var(--sans)}
.okline svg{width:18px;height:18px;flex:none}
.alert{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 12px;border-radius:8px;border-left:4px solid var(--bad);background:var(--surface-2)}
.alert.low{border-left-color:#F2B705}
.alert b{display:block;font:600 .88rem/1.3 var(--sans)}
.alert small{display:block;margin-top:2px;font-size:.8rem;line-height:1.35;color:var(--ink-2)}
.alert code{font:500 .75rem/1 var(--sans);color:var(--muted)}
.alert .vc{width:14px;height:14px;border-radius:4px}
.rec{display:grid;gap:8px;padding:12px;border-radius:10px;background:var(--surface-2)}
.rec.low{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--bad) 45%,transparent)}
.rec-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.rec-h b{display:block;font:600 .88rem/1.3 var(--sans)}
.rec-h small{display:block;font-size:.75rem;color:var(--muted)}
.std{display:grid;grid-template-columns:54px minmax(0,1fr) 48px;gap:10px;align-items:center;font-size:.8rem}
.std-k{color:var(--muted)}
.std-bar{position:relative;height:10px;border-radius:5px;background:var(--surface-3)}
.std-bar i{position:absolute;inset:0 auto 0 0;border-radius:5px;background:#1FA463}
.rec.low .std-bar i{background:var(--bad)}
.std-bar em{position:absolute;top:-4px;bottom:-4px;width:2px;margin-left:-1px;border-radius:1px;background:var(--ink)}
.std code{font:600 .8rem/1 var(--sans);text-align:right;font-variant-numeric:tabular-nums}
.std-mark{display:inline-block;width:2px;height:12px;margin-right:6px;vertical-align:-2px;background:var(--ink)}

/* ---------- language and design switches ---------- */
:root[data-lang="id"] .l-en{display:none!important}
:root:not([data-lang="id"]) .l-id{display:none!important}
.chip-t{font:600 12.5px var(--sans);fill:var(--malam)}

/* preview switch, bottom left */
.pv{position:fixed;left:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:40;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:7px 8px 7px 12px;border-radius:12px;background:var(--malam);color:#fff;box-shadow:0 8px 24px rgba(16,12,71,.28);font:500 .78rem/1 var(--sans)}
.pv-k{color:rgba(255,255,255,.66)}
.pv-g{display:inline-flex;padding:2px;border-radius:8px;background:rgba(255,255,255,.1)}
.pv-g button{appearance:none;border:0;border-radius:6px;padding:7px 10px;background:transparent;color:#fff;font:600 .78rem/1 var(--sans);cursor:pointer}
.pv-g button[aria-pressed="true"]{background:#fff;color:var(--malam)}
@media (max-width:520px){.pv{left:8px;right:8px;justify-content:center}.pv-k{display:none}}


/* hero: what hurts, the app for it, one company brain */
.hero-vis{position:relative;min-width:0}
@keyframes gflow{to{stroke-dashoffset:-22}}
@keyframes tilepop{from{opacity:0;transform:scale(.85)}}
.hp{display:flex;align-items:center;gap:9px;appearance:none;text-align:left;cursor:pointer;font:500 .85rem/1.25 var(--sans);transition:background-color .2s,border-color .2s,color .2s}
.hp i{flex:none;width:16px;height:16px;border:1.5px solid currentColor;border-radius:5px;opacity:.8}
.hp[aria-pressed="true"]{background:#fff;border-color:#fff;color:var(--malam)}
.hp[aria-pressed="true"] i{opacity:1;border-color:var(--nila);background:var(--nila) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 8.3 2.6 2.5L12 5.4' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
/* H: wiring */
.hb-n .hb-one{display:none}.hb-n.is-1 .hb-one{display:inline}.hb-n.is-1 .hb-many{display:none}
.hw-heads span{white-space:nowrap}
.hw-heads{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) 136px;gap:28px;margin-bottom:10px;font:600 .78rem/1 var(--sans);color:rgba(255,255,255,.7)}
.hw{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) 136px;gap:28px;align-items:center}
.hw-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.hw-lines .pa{fill:none;stroke:rgba(255,255,255,.7);stroke-width:1.6}
.hw-lines .ab{fill:none;stroke:var(--sinyal);stroke-width:2.4;stroke-dasharray:5 6;animation:gflow 1.1s linear infinite}
.hw-p{position:relative;display:grid;gap:8px}
.hp{padding:10px 12px;border:1px solid rgba(255,255,255,.35);border-radius:11px;background:rgba(16,12,71,.18);color:#fff;font-size:.86rem}
.hw-a{position:relative;display:grid;gap:10px;align-content:center;min-height:120px}
.ha{display:none;align-items:center;gap:10px;padding:11px 12px;border-radius:13px;background:#fff;color:var(--malam)}
.ha.on{display:flex;animation:tilepop .4s cubic-bezier(.2,.8,.2,1.2)}
.ha-ic{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:9px;background:#E8E6FE;color:var(--nila)}
.ha-ic svg{width:17px;height:17px}
.ha b{display:block;font:700 .92rem/1.2 var(--head)}
.ha small{display:block;margin-top:2px;font-size:.76rem;line-height:1.3;color:#4A4D63}
.hw-empty{font-size:.85rem;color:rgba(255,255,255,.65)}
.hv-wire.has .hw-empty{display:none}
.hw-b{position:relative}
.hb{display:grid;justify-items:center;gap:8px;padding:18px 12px;border-radius:16px;background:#fff;border:5px solid var(--malam);color:var(--malam);text-align:center}
.hb .logo-mark{width:38px;height:38px}
.hb b{font:800 .95rem/1.2 var(--head)}
.hb small{font-size:.74rem;line-height:1.35;color:#4A4D63}
.hb-n{margin-top:4px;padding:5px 9px;border-radius:999px;background:var(--sinyal);font:600 .75rem/1 var(--sans)}
.hb-n b{font:800 .9rem/1 var(--head)}
@media (max-width:640px){.hw,.hw-heads{grid-template-columns:minmax(0,1fr);gap:12px}.hw-heads{display:none}.hw-lines{display:none}}

@media (prefers-reduced-motion:reduce){.hw-lines .ab,.ha.on{animation:none}}

/* problem panels: three visual options each */
.vcard{display:grid;gap:12px;padding:14px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg)}
.vcard-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.vcard-h b{font:700 .95rem/1.25 var(--head)}
.pflow{display:flex;align-items:center;gap:6px}
.pflow.col3 > *{flex:1 1 0}
.pflow > .parr{flex:none}
.pstack{display:grid;gap:6px}
.pf{flex:1 1 0;min-width:0;display:grid;justify-items:center;gap:5px;padding:10px 6px;border-radius:10px;background:var(--surface-2);text-align:center;font-size:.76rem;line-height:1.3;color:var(--ink-2)}
.pf svg{width:20px;height:20px;color:var(--accent-ink)}
.pf.key{background:var(--accent-soft);color:var(--ink);font-weight:600}
.parr{display:grid;place-items:center;color:var(--muted)}
.parr svg{width:16px;height:16px}
@media (max-width:620px){.pflow{flex-direction:column;align-items:stretch}.parr{transform:rotate(90deg)}}
.lanes{display:grid;gap:8px}
.lane{display:grid;grid-template-columns:minmax(0,1fr) 92px 34px;gap:10px;align-items:center;font-size:.82rem}
.lane b{font:800 .95rem/1 var(--head);text-align:right;font-variant-numeric:tabular-nums}
.lbar{height:8px;border-radius:4px;background:var(--surface-3);overflow:hidden}
.lbar i{display:block;height:100%;width:100%;background:var(--nila);transform-origin:left;animation:lfill 2.2s cubic-bezier(.3,.7,.2,1) both;animation-delay:var(--d)}
@keyframes lfill{from{transform:scaleX(0)}}
.bav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.bav-c{display:grid;gap:8px;align-content:start;padding:12px;border-radius:var(--r)}
.bav-c.old{background:var(--surface-2)}
.bav-c.new{background:var(--accent-soft)}
.bav-k{font:600 .78rem/1 var(--sans);color:var(--bad)}
.bav-c.new .bav-k{color:var(--accent-ink)}
.bav-t{font-size:.82rem;line-height:1.35;color:var(--ink-2)}
@media (max-width:520px){.bav{grid-template-columns:minmax(0,1fr)}}
.cov{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:3px}
.cov i{aspect-ratio:1;border-radius:2px;background:var(--surface-3)}
.cov i.on{background:var(--nila)}
.rw{display:grid;grid-template-columns:minmax(0,1fr) 120px 78px;gap:10px;align-items:center;padding-top:9px;border-top:1px solid var(--line);font-size:.88rem}
.rw small{display:block;color:var(--muted);font-size:.76rem}
.rw .badge{justify-self:end}
.rw-t{position:relative;height:10px;border-radius:5px;background:var(--surface-3)}
.rw-band{position:absolute;top:0;bottom:0;left:22%;width:46%;background:var(--ok-soft);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ok) 50%,transparent);border-radius:3px}
.rw-m{position:absolute;top:-4px;width:4px;height:18px;margin-left:-2px;border-radius:2px;background:var(--ok)}
.rw-m.low{background:var(--bad)}.rw-m.high{background:var(--nila)}
.rw-key{display:inline-block;width:18px;height:9px;margin-right:6px;vertical-align:-1px;border-radius:2px;background:var(--ok-soft);box-shadow:inset 0 0 0 1px var(--ok)}
.lc{display:block;width:100%;height:auto}
.lc-band{fill:var(--ok-soft)}
.lc-0{stroke:var(--line-2);stroke-width:1}
.lc-line{fill:none;stroke:var(--ink-2);stroke-width:2.2;stroke-linejoin:round}
.bav-c.new .lc-line{stroke:var(--nila)}
.lc-bad{fill:var(--bad)}
.pr{font-variant-numeric:tabular-nums;font-weight:600}
.pr s{color:var(--muted);font-weight:400;margin-right:4px}
.tl-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.tl{padding:6px 8px;border-radius:6px;background:var(--surface);border:1px solid var(--line-2);font-size:.72rem;transform:rotate(var(--r));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl.lost{border-style:dashed;color:var(--ink-2)}
.one{display:grid;justify-items:center;gap:4px;padding:16px 10px;border-radius:10px;background:var(--surface);text-align:center}
.one svg{width:28px;height:28px;color:var(--ok)}
.one b{font:700 .95rem/1.2 var(--head)}
.one small{font-size:.78rem;color:var(--muted)}
.badge .ico,.mock-std .ico{width:13px;height:13px;vertical-align:-2px;margin-right:4px}
.crowd{display:flex;flex-wrap:wrap;align-items:center;gap:5px}
.avt{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--surface);border:1.5px solid var(--line-2);font:700 .78rem/1 var(--sans);color:var(--ink-2)}
.avt.busy{width:40px;height:40px;border-color:var(--bad);color:var(--bad);box-shadow:0 0 0 4px var(--bad-soft)}
.avt.ok{border-color:var(--ok);color:var(--ok)}
.avt.ai{width:40px;height:40px;background:var(--nila);border-color:var(--nila);color:#fff}
.avt.ai svg{width:20px;height:20px}
.crowd-to{display:grid;place-items:center;color:var(--muted)}
.crowd-to svg{width:16px;height:16px}
.todo-panel,.tp-mini{display:grid;gap:6px;padding:10px;border-radius:10px;background:var(--surface-2)}
.tp-h{display:flex;align-items:center;gap:7px;font:600 .85rem/1.2 var(--sans)}
.tp-h svg{width:16px;height:16px;color:var(--accent-ink)}
.tp-h b{margin-left:auto;padding:2px 7px;border-radius:999px;background:var(--nila);color:#fff;font-size:.72rem}
.tp-i{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 9px;border-radius:7px;background:var(--surface);font-size:.82rem}
.tp-i::before{content:"";flex:none;width:13px;height:13px;border:1.5px solid var(--line-2);border-radius:4px}
.tp-i span:first-of-type{flex:1;min-width:0}
.src{flex:none;padding:2px 7px;border-radius:999px;background:var(--accent-soft);color:var(--accent-ink);font:600 .68rem/1.2 var(--sans)}
.hub{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:14px;align-items:center}
.hub-c{display:grid;justify-items:center;gap:4px;padding:16px 10px;border-radius:12px;background:var(--accent-soft);text-align:center}
.hub-c svg{width:24px;height:24px;color:var(--accent-ink)}
.hub-c b{font:700 .95rem/1.2 var(--head)}
.hub-c small{font-size:.78rem;color:var(--accent-ink)}
.hub-ss{display:grid;gap:6px;position:relative;padding-left:16px;border-left:2px dashed var(--accent-line)}
.hub-s{position:relative;display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border-radius:8px;background:var(--surface-2);font-size:.82rem}
.hub-s::before{content:"";position:absolute;left:-17px;top:50%;width:15px;border-top:2px dashed var(--accent-line)}
.hub-s b{font:800 .9rem/1 var(--head);color:var(--accent-ink)}
.hm{display:grid;grid-template-columns:44px repeat(4,minmax(0,1fr));gap:4px;align-items:center;font-size:.72rem}
.hm-k{text-align:center;color:var(--muted);line-height:1.15}
.hm-n{font-weight:600;color:var(--ink-2)}
.hm i{height:20px;border-radius:4px}
.hm i.g{background:#1FA463}.hm i.y{background:#F2B705}.hm i.r{background:#E06464}
.loop-back{display:flex;align-items:center;gap:7px;font:500 .82rem/1.3 var(--sans);color:var(--accent-ink)}
.loop-back svg{width:16px;height:16px}
.noscore{display:grid;place-items:center;height:96px;border-radius:10px;border:2px dashed var(--line-2);font:800 2rem/1 var(--head);color:var(--muted)}
.sbars{display:flex;align-items:flex-end;gap:10px;height:110px}
.sbars div{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px;height:100%}
.sbars i{width:100%;border-radius:5px 5px 0 0;background:var(--accent-line)}
.sbars div:last-child i{background:var(--nila)}
.sbars b{font:800 .9rem/1 var(--head);font-variant-numeric:tabular-nums}
.sbars span{font-size:.72rem;color:var(--muted)}
@media (prefers-reduced-motion:reduce){.lbar i{animation:none}}

.mock-opts[data-mopt="b1"] .mo-b1,.mock-opts[data-mopt="b2"] .mo-b2,.mock-opts[data-mopt="b3"] .mo-b3{display:block}
.mopt button{min-width:30px}
/* B2: live log */
.plog{display:grid;gap:6px}
.plog li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:baseline;padding:7px 10px;border-radius:8px;background:var(--surface-2);font-size:.84rem;line-height:1.35;opacity:0;animation:logIn .4s ease forwards;animation-delay:var(--d)}
.plog code{font:600 .72rem/1.2 var(--sans);color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.plog li.done{background:var(--accent-soft);font-weight:600}
.plog li.done code{color:var(--accent-ink)}
@keyframes logIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
/* B3: counters and the top finding */
.ktiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.ktile{display:grid;gap:4px;align-content:start;padding:11px 10px;border-radius:10px;background:var(--surface-2)}
.ktile b{font:800 1.45rem/1 var(--head);color:var(--ink);font-variant-numeric:tabular-nums}
.ktile small{font-size:.74rem;line-height:1.3;color:var(--muted)}
.ktile.bad b{color:var(--bad)}.ktile.warn b{color:#B07800}.ktile.ok b{color:var(--ok)}.ktile.ac b{color:var(--accent-ink)}
.khl{display:flex;gap:8px;align-items:flex-start;padding:10px 12px;border-radius:10px;background:var(--accent-soft);font-size:.88rem;line-height:1.4}
.khl svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--accent-ink)}
@media (max-width:620px){.ktiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){.plog li{animation:none;opacity:1}}

.mock-opts[data-mopt="n1"] .mo-n1,.mock-opts[data-mopt="n2"] .mo-n2,.mock-opts[data-mopt="n3"] .mo-n3{display:block}
/* ask 1: same question, two answers */
.twoa-q{justify-self:end}
.twoa{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.twoa-c{display:grid;gap:8px;align-content:start;padding:12px;border-radius:10px}
.twoa-c.pub{background:var(--surface-2)}
.twoa-c.own{background:var(--accent-soft)}
.twoa-k{font:700 .8rem/1.2 var(--sans);color:var(--muted)}
.twoa-c.own .twoa-k{color:var(--accent-ink)}
.twoa-a{font-size:.88rem;line-height:1.45}
.twoa-c.pub .twoa-a{color:var(--ink-2)}
.twoa-l{display:grid;gap:5px}
.twoa-l li{display:flex;gap:6px;align-items:flex-start;font-size:.78rem;line-height:1.3}
.twoa-l svg{width:14px;height:14px;flex:none;margin-top:1px}
.twoa-l .no{color:var(--bad)}.twoa-l .no svg{stroke:currentColor;stroke-width:2.4;fill:none}
.twoa-l .yes{color:var(--ok)}
@media (max-width:520px){.twoa{grid-template-columns:minmax(0,1fr)}}
/* ask 2: the load on senior people */
.sload{display:grid;gap:9px}
.sl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) 62px;gap:10px;align-items:center;font-size:.86rem}
.sl small{display:block;font-size:.72rem;color:var(--muted)}
.sl-bar{position:relative;height:10px;border-radius:5px;background:transparent}
.sl-bar i{position:absolute;inset:0 auto 0 0;border-radius:5px}
.sl-bar .was{background:var(--surface-3)}
.sl-bar .now{background:var(--nila);animation:slshrink 1.4s cubic-bezier(.3,.7,.2,1) both .3s}
@keyframes slshrink{from{width:var(--w0,100%)}}
.sl b{font:800 .88rem/1 var(--head);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.sl-key{display:flex;align-items:center;gap:6px;font-size:.74rem;color:var(--muted)}
.sl-key .k{display:inline-block;width:14px;height:8px;border-radius:3px}
.sl-key .k.was{background:var(--surface-3)}.sl-key .k.now{background:var(--nila);margin-left:8px}
.privl{display:flex;align-items:center;gap:8px;padding:8px 11px;border-radius:8px;background:var(--ok-soft);color:var(--ok);font:600 .8rem/1.35 var(--sans)}
.privl svg{width:15px;height:15px;flex:none}
/* ask 3: you set how it thinks */
.rules{display:grid;gap:6px;padding:10px;border-radius:10px;background:var(--surface-2)}
.rules-h{font:700 .82rem/1.2 var(--sans);color:var(--muted)}
.rule{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:9px;align-items:center;padding:7px 9px;border-radius:8px;background:var(--surface);font-size:.84rem}
.rn{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink);font:700 .7rem/1 var(--sans)}
.rn svg{width:12px;height:12px}
.lockr .rn{background:var(--ok-soft);color:var(--ok)}
.sw{position:relative;width:30px;height:17px;border-radius:9px;background:var(--surface-3)}
.sw::after{content:"";position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.sw.on{background:var(--nila)}.sw.on::after{transform:translateX(13px)}
.rtags{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.rtags span{padding:2px 7px;border-radius:999px;background:var(--surface);color:var(--accent-ink);font:600 .68rem/1.3 var(--sans)}
@media (prefers-reduced-motion:reduce){.sl-bar .now{animation:none}}

/* ---------- menu ---------- */
.nav{align-items:center}
.dd{position:relative}
.dd-b{appearance:none;display:inline-flex;align-items:center;gap:4px;padding:0;border:0;background:none;font:500 .95rem/1 var(--sans);color:var(--ink-2);cursor:pointer}
.dd-b:hover,.dd-b[aria-expanded="true"]{color:var(--accent-ink)}
.chev{width:16px;height:16px;transition:transform .2s}
.dd-b[aria-expanded="true"] .chev{transform:rotate(180deg)}
.dd-p{position:absolute;top:calc(100% + 22px);left:-18px;width:400px;display:grid;gap:4px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:0 24px 48px -24px rgba(16,12,71,.35);z-index:30}
.dd-p[hidden]{display:none}
.dd-g{display:grid;gap:2px;padding-bottom:6px}
.dd-gl{padding:6px 10px 2px;font:600 .74rem/1.2 var(--sans);color:var(--muted)}
.dd-i{display:grid;gap:2px;padding:8px 10px;border-radius:8px;text-decoration:none;color:var(--ink)}
.dd-i:hover,.dd-i:focus-visible{background:var(--surface-2)}
.dd-i b{display:block;font:600 .92rem/1.3 var(--sans)}
.dd-i small{display:block;font-size:.78rem;color:var(--muted)}
.dd-f{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:4px;padding:10px 10px 2px;border-top:1px solid var(--line)}
.dd-f a{display:inline-flex;align-items:center;gap:6px;font:600 .85rem/1 var(--sans);color:var(--accent-ink);text-decoration:none}
.dd-f svg{width:15px;height:15px}
.menu-b{display:none;appearance:none;width:44px;height:44px;margin-left:8px;padding:12px 10px;border:1px solid var(--line-2);border-radius:10px;background:var(--surface);cursor:pointer;flex-direction:column;justify-content:space-between}
.menu-b span{display:block;height:2px;border-radius:1px;background:var(--ink);transition:transform .2s,opacity .2s}
.menu-b[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-b[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-b[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mnav{border-top:1px solid var(--line);background:var(--bg);max-height:calc(100vh - 68px);overflow-y:auto}
.mnav[hidden]{display:none}
.mnav .wrap{display:grid;gap:4px;padding-top:10px;padding-bottom:18px}
.mnav summary{display:flex;align-items:center;justify-content:space-between;padding:12px 4px;font:600 1rem/1 var(--sans);cursor:pointer;list-style:none}
.mnav summary::-webkit-details-marker{display:none}
.mnav details[open] .chev{transform:rotate(180deg)}
.mn-l{padding:12px 4px;font:600 1rem/1 var(--sans);color:var(--ink);text-decoration:none;border-top:1px solid var(--line)}
.mnav details{border-top:1px solid var(--line)}
.mnav details:first-child{border-top:0}
.mn-cta{margin-top:10px}
@media (max-width:880px){.menu-b{display:flex}.top .hdr-cta{margin-left:auto}}
@media (max-width:520px){.top .hdr-cta{display:none}.menu-b{margin-left:auto}}
@media (min-width:881px){.mnav{display:none!important}}

/* ---------- views: the consultation page lives at #konsultasi ---------- */
#konsultasi{display:none}
body[data-view="konsultasi"] #konsultasi{display:block}
body[data-view="konsultasi"] #top,body[data-view="konsultasi"] .close,body[data-view="konsultasi"] .more-sec,body[data-view="konsultasi"] .top .hdr-cta{display:none}

/* ---------- consultation page ---------- */
.kons{padding-top:clamp(28px,5vw,56px)}
.kons-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,5vw,64px);align-items:start}
.back{display:inline-flex;align-items:center;gap:8px;margin-bottom:22px;font:600 .9rem/1 var(--sans);color:var(--accent-ink);text-decoration:none}
.back-ic svg{width:16px;height:16px;transform:rotate(180deg)}
.eyebrow{margin-bottom:10px;font:700 .85rem/1 var(--sans);color:var(--accent-ink)}
.kons-copy h1{font:800 clamp(1.9rem,3.6vw,2.8rem)/1.12 var(--head);letter-spacing:-.01em}
.kons-copy .lead{margin-top:14px}
.ksteps{display:grid;gap:16px;margin:28px 0 30px}
.ksteps li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:14px;align-items:start}
.ks-n{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink);font:800 .95rem/1 var(--head)}
.ksteps b{display:block;font:700 1.02rem/1.3 var(--head)}
.ksteps small{display:block;margin-top:3px;font-size:.92rem;line-height:1.45;color:var(--muted)}
.kcard{padding:clamp(20px,3vw,32px);border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:0 30px 60px -40px rgba(16,12,71,.4)}
.kform{display:grid;gap:16px}
.kform h2,.kdone h2{font:800 1.35rem/1.2 var(--head)}
.kf{display:grid;gap:7px;border:0;padding:0;margin:0;min-width:0}
.kf > span,.kf legend{font:600 .9rem/1.3 var(--sans);color:var(--ink)}
.kf legend{margin-bottom:7px}
.kf em{font-style:normal;font-weight:400;color:var(--muted)}
.kf input:not([type="checkbox"]):not([type="radio"]),.kf textarea{width:100%;padding:12px 14px;border:1.5px solid var(--line-2);border-radius:10px;background:var(--bg);color:var(--ink);font:400 1rem/1.4 var(--sans)}
.kf input:focus,.kf textarea:focus{outline:none;border-color:var(--nila);box-shadow:0 0 0 3px var(--accent-soft)}
.kf.bad input{border-color:var(--bad)}
.kerr{font-size:.82rem;color:var(--bad)}
.kchips{display:flex;flex-wrap:wrap;gap:7px}
.kchip{position:relative;cursor:pointer}
.kchip input{position:absolute;opacity:0;pointer-events:none}
.kchip > span{display:inline-block;padding:9px 13px;border:1.5px solid var(--line-2);border-radius:999px;font:500 .86rem/1.2 var(--sans);color:var(--ink-2);background:var(--bg);transition:background-color .15s,border-color .15s,color .15s}
.kchip input:checked + span{border-color:var(--nila);background:var(--nila);color:#fff}
.kchip input:focus-visible + span{box-shadow:0 0 0 3px var(--accent-soft)}
.ksend{justify-self:start;margin-top:4px}
.knote{font-size:.82rem;line-height:1.45;color:var(--muted)}
.kdone{display:grid;gap:12px;justify-items:start;padding:10px 0}
.kdone[hidden]{display:none}
.kdone-ic svg{width:44px;height:44px;color:var(--ok)}
.kdone p{color:var(--ink-2)}
@media (max-width:860px){.kons-in{grid-template-columns:minmax(0,1fr)}}

/* ---------- full-width menu panels ---------- */
.nav .dd{position:static}
.mm{position:absolute;left:0;right:0;top:100%;z-index:30;max-height:calc(100vh - 68px);overflow-y:auto;background:var(--surface);border-bottom:1px solid var(--line);box-shadow:0 30px 60px -30px rgba(16,12,71,.35);animation:mmIn .18s ease}
.mm[hidden]{display:none}
@keyframes mmIn{from{opacity:0;transform:translateY(-6px)}}
.mm-in{max-width:var(--wrap);margin:0 auto;padding:22px var(--pad) 16px}
.mi{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:11px;background:var(--accent-soft);color:var(--accent-ink);transition:background-color .15s,color .15s}
.mi svg{width:20px;height:20px}
.mm a{text-decoration:none;color:var(--ink)}
.mm-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:.9rem;color:var(--muted)}
.mm-foot a{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--accent-ink)!important}
.mm-foot svg{width:15px;height:15px}
/* A: columns and a featured card */
.mmv-a{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:stretch}
.mma-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 18px;align-content:start}
.mma-i{display:flex;gap:14px;align-items:center;padding:12px;border-radius:12px;transition:background-color .15s}
.mma-i:hover,.mma-i:focus-visible{background:var(--surface-2)}
.mma-i:hover .mi{background:var(--nila);color:#fff}
.mma-i b{display:block;font:700 .98rem/1.3 var(--head)}
.mma-i small{display:block;margin-top:3px;font-size:.8rem;color:var(--muted)}
.mm-feat{display:flex;flex-direction:column;gap:12px;padding:20px;border-radius:16px;background:var(--malam);color:#fff!important}
.mf-k{font:700 .76rem/1 var(--sans);color:var(--sinyal)}
.mm-feat b{font:800 1.2rem/1.25 var(--head);color:#fff}
.mf-bars{display:grid;gap:10px}
.mf-bars span{display:grid;gap:5px}
.mf-bars i{display:block;height:10px;border-radius:5px}
.mf-bars .was{width:100%;background:rgba(255,255,255,.28)}
.mf-bars .now{width:6%;background:var(--sinyal)}
.mf-bars small{font-size:.76rem;color:rgba(255,255,255,.72)}
.mf-l{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font:600 .88rem/1 var(--sans);color:var(--sinyal)}
.mf-l svg{width:15px;height:15px}
.mf-hub{width:100%;max-width:200px;height:auto;align-self:center}
.mf-hub line{stroke:var(--sinyal);stroke-width:2;stroke-dasharray:3 4}
.mf-hub .n{fill:var(--malam);stroke:#fff;stroke-width:2.5}
.mf-hub .c{fill:#fff}
.mf-hub .t{fill:none;stroke:var(--nila);stroke-width:5;stroke-linecap:round}
/* mobile menu items get the same icon tiles */
.mnav .dd-i{display:flex;gap:12px;align-items:center}
.mnav .dd-i .mi{width:34px;height:34px;border-radius:9px}
.mnav .dd-i .mi svg{width:17px;height:17px}
@media (max-width:1060px){.mmv-a{grid-template-columns:minmax(0,1fr) 260px}}
@media (prefers-reduced-motion:reduce){.mm{animation:none}}

/* ---------- solution and case study pages ---------- */
body[data-view] #top,body[data-view] .close:not(.pg-close),body[data-view] .more-sec{display:none}
.pgv{display:none}
body[data-view="solusi-peluang-toko"] #solusi-peluang-toko{display:block}
.pg-hero{padding:clamp(28px,5vw,56px) 0 clamp(36px,6vw,72px)}
.pg-hero h1{font:800 clamp(2.1rem,4.6vw,3.6rem)/1.06 var(--head);letter-spacing:-.015em;color:var(--ink)}
.pg-hero .lead{margin-top:16px;max-width:620px}
.pg-hero .cta-row{margin-top:26px}
.pg-narrow{max-width:860px}
.pg-hero.a{text-align:left}
.pg-band{padding:0 0 clamp(28px,5vw,48px)}
.pg-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.pg-stats div{display:grid;gap:6px;padding:20px;border-radius:16px;background:var(--accent-soft)}
.pg-stats b{font:800 clamp(1.5rem,2.6vw,2.1rem)/1.05 var(--head);color:var(--accent-ink)}
.pg-stats .d{font-size:.9rem;line-height:1.4;color:var(--ink-2)}
.pg-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.pg-facts div{display:grid;gap:6px;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.pg-facts small{font:600 .78rem/1 var(--sans);color:var(--muted)}
.pg-facts b{font:800 1.3rem/1.1 var(--head)}
/* A: the story with a sticky contents list */
.pg-story{display:grid;grid-template-columns:200px minmax(0,1fr);gap:clamp(24px,5vw,64px);align-items:start;padding-bottom:clamp(40px,6vw,80px)}
.pg-toc{position:sticky;top:96px;display:grid;gap:2px;padding-left:14px;border-left:2px solid var(--line)}
.pg-toc a{padding:7px 0;font:500 .9rem/1.3 var(--sans);color:var(--muted);text-decoration:none}
.pg-toc a:hover{color:var(--accent-ink)}
.pg-story-b{display:grid;gap:clamp(40px,6vw,72px)}
.pg-st{display:grid;gap:18px;scroll-margin-top:90px}
.pg-st > h2{font:800 clamp(1.5rem,2.6vw,2rem)/1.15 var(--head)}
/* sections for B and C */
.pg-sec{padding:clamp(44px,7vw,88px) 0;scroll-margin-top:70px}
.pg-sec.tint{background:var(--bg-2)}
.pg-h{display:grid;gap:10px;max-width:720px;margin-bottom:clamp(22px,3vw,34px)}
.pg-h h2{font:800 clamp(1.6rem,3vw,2.3rem)/1.12 var(--head)}
.pg-gap{margin-top:18px}
/* blocks */
.pg-calc{display:flex;flex-wrap:wrap;align-items:stretch;gap:10px}
.pg-calc > div{display:grid;gap:4px;align-content:center;min-width:130px;padding:16px 18px;border-radius:14px;background:var(--surface-2)}
.pg-calc b{font:800 1.6rem/1 var(--head)}
.pg-calc small{font-size:.82rem;color:var(--muted)}
.pg-calc .res{background:var(--bad-soft)}
.pg-calc .res b{color:var(--bad)}
.pg-calc .op{align-self:center;font:800 1.4rem/1 var(--head);color:var(--muted)}
.pg-pains{display:grid;gap:8px;margin-top:4px}
.pg-pains li{display:flex;gap:10px;align-items:flex-start;font-size:1rem;line-height:1.45}
.pg-pains svg{width:18px;height:18px;flex:none;margin-top:3px;color:var(--bad)}
.pg-p{font-size:1.05rem;line-height:1.6;color:var(--ink-2);max-width:680px}
.pg-how{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(20px,4vw,40px);align-items:start}
.pg-steps{margin:0}
.pg-agents{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.pg-agents.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.pg-agent{display:grid;gap:10px;align-content:start;padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.pg-agent b{font:700 1.02rem/1.3 var(--head)}
.pg-ex{font-size:.86rem;line-height:1.45;color:var(--muted)}
.pg-apps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.pg-app{display:flex;gap:14px;align-items:center;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.pg-app b{display:block;font:700 1rem/1.3 var(--head)}
.pg-app small{display:block;margin-top:3px;font-size:.84rem;color:var(--muted)}
.pg-rel{display:grid;gap:10px;max-width:560px;padding:22px;border-radius:16px;background:var(--malam);color:#fff;text-decoration:none}
.pg-rel .eyebrow{color:var(--sinyal);margin:0}
.pg-rel b{font:800 1.35rem/1.2 var(--head)}
.pg-rel-l{display:inline-flex;align-items:center;gap:6px;font:600 .92rem/1 var(--sans);color:var(--sinyal)}
.pg-rel-l svg{width:16px;height:16px}
.pg-case{margin:0}
/* how it works: night to morning */
.pg-night{--g:clamp(14px,2.4vw,28px);position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--g)}
.pg-night li:not(:last-child)::after{content:"";position:absolute;left:56px;right:calc(-1 * var(--g));top:27px;height:3px;border-radius:2px}
.pg-night .n0::after{background:linear-gradient(90deg,var(--malam),#2419A8)}.pg-night .n1::after{background:linear-gradient(90deg,#2419A8,var(--nila))}
.pg-night .n2::after{background:linear-gradient(90deg,var(--nila),var(--sinyal))}
.pg-night li{position:relative;display:grid;gap:8px;align-content:start}
.pg-node{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;color:#fff;box-shadow:0 0 0 6px var(--bg-2)}
.pg-node svg{width:24px;height:24px}
.n0 .pg-node{background:var(--malam)}.n1 .pg-node{background:#2419A8}.n2 .pg-node{background:var(--nila)}.n3 .pg-node{background:var(--sinyal);color:var(--malam)}
.pg-night .eyebrow{margin:6px 0 0}
.pg-night b{font:800 1.1rem/1.25 var(--head)}
.pg-night .d{font-size:.95rem;line-height:1.5;color:var(--ink-2)}
/* the AI Agents, with what each found last night */
.pg-agents.ai .eyebrow{margin:0;font-size:.74rem}
.pg-agents.ai .pg-agent{grid-template-rows:auto auto auto 1fr auto}
.pg-found{display:grid;gap:6px;margin-top:auto;padding-top:12px;border-top:1px solid var(--line)}
.pg-fb{height:6px;border-radius:3px;background:var(--surface-3);overflow:hidden}
.pg-fb i{display:block;height:100%;border-radius:3px;background:var(--nila)}
.pg-fn{font-size:.82rem;color:var(--muted)}
.pg-fn b{font:800 1rem/1 var(--head);color:var(--ink)}
@media (max-width:760px){.pg-night{grid-template-columns:minmax(0,1fr);gap:22px;padding-left:72px}
  .pg-night li:not(:last-child)::after{display:none}
  .pg-night::before{content:"";position:absolute;left:27px;top:28px;bottom:28px;width:3px;border-radius:2px;background:linear-gradient(180deg,var(--malam),var(--nila) 55%,var(--sinyal))}
  .pg-node{position:absolute;left:-72px;top:0}}
/* the phone */
.pg-phone-row{display:flex;justify-content:center}
.phone{width:min(320px,100%);padding:10px;border-radius:34px;background:var(--malam);box-shadow:0 40px 70px -40px rgba(16,12,71,.55)}
.ph-s{display:grid;gap:10px;padding:16px 14px 18px;border-radius:26px;background:var(--bg)}
.ph-top{display:flex;justify-content:space-between;align-items:baseline;font:600 .82rem/1 var(--sans);color:var(--muted)}
.ph-top b{font:800 1rem/1 var(--head);color:var(--ink)}
.ph-k{display:flex;align-items:center;gap:6px;padding:8px 10px;border-radius:10px;background:var(--accent-soft);font:600 .8rem/1.3 var(--sans);color:var(--accent-ink)}
.ph-k svg{width:14px;height:14px}
.ph-i{display:grid;gap:6px;padding:11px 12px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.ph-r{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.ph-r b{font:700 .92rem/1.2 var(--head)}
.ph-v{font:700 .8rem/1 var(--sans);color:var(--accent-ink);white-space:nowrap}
.ph-c{justify-self:start;padding:3px 8px;border-radius:999px;font:600 .7rem/1.3 var(--sans)}
.ph-c.bad{background:var(--bad-soft);color:var(--bad)}.ph-c.ac{background:var(--accent-soft);color:var(--accent-ink)}.ph-c.ok{background:var(--ok-soft);color:var(--ok)}
.ph-a{font-size:.8rem;color:var(--ink-2)}
/* B: split hero */
.pg-split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,5vw,64px);align-items:center}
.pg-split .pg-stats,.pg-split .pg-facts{margin-top:28px}
.pg-split .pg-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
.pg-split .pg-stats div{padding:14px}
.pg-split .pg-stats b{font-size:1.3rem}
.pg-split .pg-stats .d{font-size:.8rem}
.pg-split .pg-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
.pg-hero-vis{position:relative;display:flex;justify-content:center}
.pg-hero-vis.res{display:block}
.co{position:absolute;padding:8px 12px;border-radius:999px;background:var(--sinyal);color:var(--malam);font:700 .8rem/1.2 var(--sans);box-shadow:0 10px 24px -12px rgba(16,12,71,.5);white-space:nowrap}
.ph-wrap{position:relative}
.co1{top:118px;right:calc(100% - 16px)}
.co2{bottom:64px;right:calc(100% - 16px)}
/* B: the result card in the case study hero */
.pg-res{display:grid;gap:4px;padding:clamp(20px,3vw,30px);border-radius:22px;background:var(--malam);color:#fff;box-shadow:0 40px 70px -40px rgba(16,12,71,.6)}
.pg-res .eyebrow{color:var(--sinyal);margin-bottom:8px}
.pg-res-r{display:grid;grid-template-columns:minmax(0,1fr) auto 20px auto;gap:12px;align-items:center;padding:14px 0;border-top:1px solid rgba(255,255,255,.14)}
.pg-res-r .k{font-size:.9rem;color:rgba(255,255,255,.75)}
.pg-res-r .o{font:700 1rem/1 var(--head);color:rgba(255,255,255,.55);text-decoration:line-through}
.pg-res-r .a svg{width:18px;height:18px;color:var(--sinyal)}
.pg-res-r b{font:800 clamp(1.5rem,2.6vw,2rem)/1 var(--head);color:var(--sinyal);text-align:right}
/* C: before and after */
.pg-c-head{max-width:820px;margin-bottom:28px}
.pg-big{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:16px;align-items:stretch}
.pg-big > div{display:grid;gap:8px;align-content:start;padding:clamp(20px,3vw,30px);border-radius:20px}
.pg-big .old{background:var(--surface-2)}
.pg-big .new{background:var(--nila);color:#fff}
.pg-big p{font:700 .85rem/1 var(--sans);color:var(--bad)}
.pg-big .new p{color:var(--sinyal)}
.pg-big b{font:800 clamp(2.6rem,6vw,4.4rem)/1 var(--head)}
.pg-big .old b{color:var(--bad)}
.pg-big .d{font-size:1rem;line-height:1.45}
.pg-big .old .d{color:var(--ink-2)}
.pg-big-arr{align-self:center;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--surface);border:1px solid var(--line);color:var(--ink)}
.pg-big-arr svg{width:20px;height:20px}
.pg-c-cta{margin-top:22px}
.pg-hero.c .pg-facts{margin-top:16px}
.pg-ba{display:grid;gap:10px}
.pg-ba-hd,.pg-ba-r{display:grid;grid-template-columns:200px minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:stretch}
.pg-ba-hd span{font:700 .9rem/1 var(--sans);color:var(--muted);padding:0 4px}
.pg-ba-hd .new{color:var(--accent-ink)}
.pg-ba-k{display:flex;gap:10px;align-items:center;font:700 1rem/1.3 var(--head)}
.pg-ba-k svg{width:20px;height:20px;flex:none;color:var(--accent-ink)}
.pg-ba-r > div{display:grid;gap:6px;align-content:center;padding:16px 18px;border-radius:14px;font-size:1rem;line-height:1.4}
.pg-ba-r .old{background:var(--surface)}
.pg-ba-r .new{background:var(--accent-soft)}
.pg-ba-r small{font-size:.84rem;color:var(--muted)}
.pg-ba-r .new small{color:var(--accent-ink)}
.mk{display:none;font:700 .74rem/1 var(--sans);color:var(--muted)}.pg-ba-r .new .mk{color:var(--accent-ink)}
.pg-ba .cov{grid-template-columns:repeat(16,minmax(0,1fr));gap:2px}
@media (max-width:980px){.pg-agents{grid-template-columns:repeat(2,minmax(0,1fr))}.pg-split,.pg-how{grid-template-columns:minmax(0,1fr)}.co{display:none}}
@media (max-width:760px){.pg-story{grid-template-columns:minmax(0,1fr)}.pg-toc{display:none}.pg-stats,.pg-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pg-agents,.pg-agents.three,.pg-apps{grid-template-columns:minmax(0,1fr)}.pg-big{grid-template-columns:minmax(0,1fr)}.pg-big-arr{transform:rotate(90deg);justify-self:center}
  .pg-stats,.pg-split .pg-stats{grid-template-columns:minmax(0,1fr)}.pg-stats div{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:14px}
  .pg-ba-hd{display:none}.pg-ba-r{grid-template-columns:minmax(0,1fr)}.pg-ba-r .mk{display:block}}

/* ---------- the app, shown on the pages ---------- */
.shot{position:relative;overflow:hidden;border-radius:14px;border:1px solid var(--line-2);background:#fff;box-shadow:0 30px 60px -36px rgba(16,12,71,.45)}
.shot-in{transform-origin:top left}
/* the app itself (always light, like a real screenshot) */
.ap{--a:#3326F5;--ink0:#151642;--mut0:#5B5F78;--ln0:#E4E6EF;--bg0:#F5F6FA;--pk:#8E24AA;--pks:#F7EAFB;font:400 13px/1.45 "IBM Plex Sans",system-ui,sans-serif;color:var(--ink0);background:#fff}
.ap b,.ap h4{font-weight:600}
.ap-bar{display:flex;align-items:center;gap:12px;height:30px;padding:0 12px;background:#EDEEF4;border-bottom:1px solid var(--ln0)}
.ap-dots{display:flex;gap:5px}.ap-dots i{width:9px;height:9px;border-radius:50%;background:#C9CCDA}
.ap-url{flex:1;max-width:420px;margin:0 auto;padding:3px 10px;border-radius:6px;background:#fff;font-size:11px;color:var(--mut0);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ap-top{display:flex;align-items:center;gap:18px;height:46px;padding:0 18px;border-bottom:1px solid var(--ln0)}
.ap-logo{display:inline-flex;align-items:center;gap:6px;font:700 14px/1 "Overpass",sans-serif;color:var(--a)}
.ap-logo svg{width:16px;height:16px}
.ap-nav{font-weight:600}
.ap-user{margin-left:auto;display:inline-flex;align-items:center;gap:8px;font-weight:600}
.ap-user i{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#E8E6FE;color:var(--a);font-style:normal;font-size:11px}
.ap-body{display:grid;gap:12px;padding:16px 18px 18px;background:var(--bg0)}
.ap-head h4{font:700 20px/1.2 "Overpass",sans-serif}
.ap-head p{font-size:12px;color:var(--mut0)}
.ap-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.ap-kpi{display:grid;gap:2px;padding:10px 12px;border:1px solid var(--ln0);border-radius:10px;background:#fff}
.ap-kpi small{font-size:10px;font-weight:600;color:var(--mut0);text-transform:uppercase;letter-spacing:.03em}
.ap-kpi b{font:700 17px/1.2 "Overpass",sans-serif}
.ap-kpi .s{font-size:11px;color:var(--mut0)}
.ap-kpi.acc{background:var(--pks);border-color:#EBC8F3}.ap-kpi.acc b{color:var(--pk)}
.ap-tabs{display:flex;gap:6px;padding:6px;border:1px solid var(--ln0);border-radius:10px;background:#fff}
.ap-tabs > span{padding:6px 12px;border-radius:7px;font-weight:600;color:var(--mut0)}
.ap-tabs > span.on{background:#E8E6FE;color:var(--a)}
.ap-tabs em{font-style:normal;padding:1px 6px;border-radius:999px;background:#fff;font-size:11px}
.ap-card{border:1px solid var(--ln0);border-radius:12px;background:#fff;overflow:hidden}
.ap-card.pad{display:grid;gap:12px;padding:16px}
.ap-ch{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:12px 14px}
.ap-card.pad .ap-ch{padding:0}
.ap-ch b{font-size:13px}.ap-ch p{font-size:12px;color:var(--mut0)}
.ap-pill{flex:none;padding:4px 10px;border-radius:7px;background:var(--pk);color:#fff;font-weight:600;font-size:12px}
.ap-pill.ghost{background:var(--bg0);color:var(--ink0)}
.ap-grp{display:flex;justify-content:space-between;padding:8px 14px;border-top:1px solid var(--ln0);background:var(--bg0);font-size:11px}
.ap-grp b{letter-spacing:.04em}.ap-grp > span{color:var(--mut0)}
.ap-it{display:flex;justify-content:space-between;gap:14px;padding:10px 14px;border-top:1px solid var(--ln0)}
.ap-tag{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:600}
.ap-tag svg{width:12px;height:12px;color:#1B8A5A}
.ap-it b{display:block;font-size:14px;margin-top:2px}
.ap-it small{display:block;font-size:11px;color:var(--mut0);text-transform:uppercase}
.ap-meta{font-size:12px;margin:4px 0 6px}
.ap-mon{display:grid;grid-template-columns:repeat(12,26px);gap:3px}
.ap-mon i{height:5px;border-radius:2px;background:var(--ln0)}.ap-mon i.on{background:#93AEE9}
.ap-val{text-align:right}.ap-val b{font-size:15px;color:var(--pk)}.ap-val small{font-size:11px;color:var(--mut0)}
.ap-back{font-weight:600;color:var(--a)}
.ap-dh{display:flex;justify-content:space-between;gap:14px;padding:14px;border:1px solid var(--ln0);border-radius:12px;background:#fff}
.ap-dh h4{font:700 20px/1.2 "Overpass",sans-serif;margin-top:2px}
.ap-dh small{font-size:11px;color:var(--mut0)}
.ap-dv{text-align:right}.ap-dv b{display:block;font:700 22px/1.1 "Overpass",sans-serif;color:var(--pk)}.ap-dv small{font-size:11px}
.ap-sec{display:grid;gap:8px;padding:14px;border:1px solid var(--ln0);border-radius:12px;background:#fff}
.ap-st{font-size:13px}
.ap-st2{display:flex;justify-content:space-between}.ap-st2 > span{font-size:12px;font-weight:600}
.ap-cmp{display:grid;grid-template-columns:200px minmax(0,1fr) 96px;gap:12px;align-items:center}
.ap-cmp > span b{display:block;font-size:12px}.ap-cmp > span small{font-size:11px;color:var(--mut0)}
.ap-cmp > b{text-align:right;font-size:12px}.ap-cmp > b.acc{color:var(--pk)}
.ap-cmp i{height:12px;border-radius:4px}
.ap-cmp i.full{background:#8A90A6}
.ap-cmp i.hatch{border:1.5px solid #C77DD8;background:repeating-linear-gradient(-45deg,#F3D7F8 0 4px,#fff 4px 8px)}
.ap-chart{position:relative;display:grid;grid-template-columns:repeat(18,minmax(0,1fr));gap:6px;align-items:end;height:150px;padding-top:16px}
.ap-b{position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%}
.ap-b i{display:block;width:100%;border-radius:3px 3px 0 0;background:#93AEE9}
.ap-b .v{font-size:10px;color:var(--mut0);margin-bottom:2px}
.ap-b small{position:absolute;bottom:-16px;font-size:9px;color:var(--mut0)}
.ap-avg{position:absolute;left:0;right:0;bottom:50%;border-top:1.5px dashed #6B6F86;z-index:1}
.ap-avg em{position:absolute;left:2px;top:-15px;padding:0 4px;background:#fff;font-style:normal;font-size:10px;font-weight:600;color:var(--mut0)}
.ap-shade{position:absolute;right:0;top:0;bottom:0;width:22.4%;background:rgba(142,36,170,.06);border-left:1px dashed #C77DD8}
.ap-shade em{position:absolute;top:0;left:6px;font-style:normal;font-size:10px;color:var(--pk);white-space:nowrap}
.ap-chart{margin-bottom:14px}
.ap-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--ln0);border-radius:12px;background:#fff;font-size:12px}
.ap-btn{display:inline-flex;align-items:center;justify-content:center;padding:8px 14px;border-radius:999px;background:var(--a);color:#fff;font-weight:600;font-size:12px;white-space:nowrap}
.ap-btn.wide{width:100%;margin-top:4px}
.ap-split{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:0;margin:-16px -18px -18px}
.ap-dim{display:grid;gap:10px;align-content:start;padding:16px 18px;opacity:.45}
.ap-dim h4{font:700 20px/1.2 "Overpass",sans-serif}
.ap-ghost{height:80px;border-radius:12px;background:#fff;border:1px solid var(--ln0)}.ap-ghost.s{height:140px}
.ap-drawer{display:grid;gap:8px;align-content:start;padding:16px;background:#fff;border-left:1px solid var(--ln0);box-shadow:-20px 0 40px -30px rgba(16,12,71,.4)}
.ap-dt{display:flex;justify-content:space-between;font-weight:700;font-size:14px}
.ap-sum{display:grid;gap:3px;padding:10px 12px;border:1px solid var(--ln0);border-radius:10px;background:var(--bg0)}
.ap-sum b{font-size:13px}.ap-sum b em{font-style:normal;color:var(--pk);margin-left:4px}
.ap-sum small{font-size:11px;color:var(--mut0)}
.ap-drawer label{font-size:11px;font-weight:600;color:var(--mut0);margin-top:4px}
.ap-in{padding:8px 10px;border:1px solid var(--ln0);border-radius:8px;font-size:12px}
.ap-seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.ap-seg > span{display:grid;justify-items:center;padding:6px;border:1px solid var(--ln0);border-radius:8px;font-size:10px;color:var(--mut0)}
.ap-seg b{font-size:14px;color:var(--ink0)}
.ap-seg > span.on{border-color:var(--a);background:#E8E6FE}.ap-seg > span.on b{color:var(--a)}
.ap-calc{font-size:12px}
.ap-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ap-two > div{display:grid;gap:4px}
.ap-skip{text-align:center;font-size:12px;color:var(--a);font-weight:600}
.ap-sh{display:grid;grid-template-columns:170px minmax(0,1fr);gap:12px;align-items:center}
.ap-sh b{display:block;font-size:13px}.ap-sh small{font-size:11px;color:var(--mut0)}
.ap-track{position:relative;height:28px;border-radius:6px;background:var(--bg0)}
.ap-track i{position:absolute;left:0;top:0;bottom:0;display:flex;align-items:center;padding-left:9px;border-radius:6px;font-style:normal;font-size:12px;font-weight:600;white-space:nowrap}
.ap-track i.comp{background:#8A90A6;color:#fff}.ap-track i.ours{background:#93AEE9;color:var(--ink0)}
.ap-gap{position:absolute;top:0;bottom:0;display:flex;align-items:center;padding-left:8px;border:1.5px dashed #C77DD8;border-left:0;border-radius:0 6px 6px 0;font-size:11px;font-weight:600;color:var(--pk);white-space:nowrap;overflow:visible}
.ap-tgt{position:absolute;top:-4px;bottom:-4px;border-left:2px dashed var(--ink0)}
.ap-note{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--mut0)}
.ap-tgtk{display:inline-block;height:12px;border-left:2px dashed var(--ink0)}
.ap-ins{display:flex;gap:8px;align-items:flex-start;padding:10px 12px;border-radius:10px;background:#E8E6FE;font-size:12px}
.ap-ins svg{width:14px;height:14px;flex:none;margin-top:2px;color:var(--a)}
/* option 2: one screen with numbered notes */
.as-notes b{display:block;font:700 1rem/1.25 var(--head)}
.as-notes small{display:block;margin-top:3px;font-size:.86rem;line-height:1.4;color:var(--muted)}
.as-o2{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);gap:clamp(18px,3vw,34px);align-items:center}
.as-pinwrap{position:relative}
.as-pin{position:absolute;z-index:2;display:grid;place-items:center;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:var(--sinyal);color:var(--malam);font:800 .9rem/1 var(--head);box-shadow:0 0 0 5px rgba(255,214,10,.35),0 6px 14px -6px rgba(16,12,71,.5)}
.as-notes{display:grid;gap:16px}
.as-notes li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;align-items:start}
.as-pn{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--sinyal);color:var(--malam);font:800 .9rem/1 var(--head)}
@media (max-width:980px){.as-o2{grid-template-columns:minmax(0,1fr)}}

body[data-view="solusi-order-pabrik"] #solusi-order-pabrik{display:block}body[data-view="solusi-price-list"] #solusi-price-list{display:block}body[data-view="solusi-to-do"] #solusi-to-do{display:block}body[data-view="solusi-pelatihan"] #solusi-pelatihan{display:block}body[data-view="solusi-ai-perusahaan"] #solusi-ai-perusahaan{display:block}
/* hero visual as a card, with the callouts on its edge */
.hv-wrap{width:min(460px,100%)}
.as-pin.anch{visibility:hidden}
.hv-card{display:grid;gap:10px;padding:18px;border:1px solid var(--line);border-radius:20px;background:var(--surface);box-shadow:0 40px 70px -40px rgba(16,12,71,.5)}
.hv-h{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:2px}
.hv-h b{font:700 1rem/1.25 var(--head)}
.hv-card .rw:first-of-type{border-top:0;padding-top:0}
.hv-card .badge .ico{width:12px;height:12px;margin-right:4px;vertical-align:-1px}
.hv-wrap .co1{top:-40px;right:22px;left:auto;bottom:auto}
.hv-wrap .co2{bottom:-40px;left:22px;right:auto;top:auto}
.hv-wrap{margin:48px 0}
.hv-wrap .co::after{content:"";position:absolute;left:50%;width:2px;height:12px;margin-left:-1px;background:var(--sinyal)}
.hv-wrap .co1::after{top:100%}.hv-wrap .co2::after{bottom:100%}
/* common questions */
.pg-faq{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.pg-faq > div{display:grid;gap:8px;align-content:start;padding:20px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.pg-faq b{font:700 1.05rem/1.3 var(--head)}
.pg-faq p{font-size:.95rem;line-height:1.5;color:var(--ink-2)}
@media (max-width:860px){.pg-faq{grid-template-columns:minmax(0,1fr)}}
/* app screens: order projection */
.op-chips{display:flex;flex-wrap:wrap;gap:6px}
.op-chips span{padding:5px 10px;border:1px solid var(--ln0);border-radius:999px;background:#fff;font-size:12px;font-weight:600;color:var(--mut0)}
.op-chips span.on{border-color:var(--a);background:#E8E6FE;color:var(--a)}
.op-chips span.red{color:#C3343A}
.op-chips em{font-style:normal;margin-left:3px;opacity:.75}
.op-r{display:grid;grid-template-columns:minmax(0,1.6fr) 48px 64px 66px minmax(0,1fr) 64px;gap:12px;align-items:center;padding:10px 14px;border-top:1px solid var(--ln0);font-size:12px}
.op-r b{display:block;font-size:13px}.op-r small{font-size:10px;color:var(--mut0)}
.op-hd{border-top:0;background:var(--bg0);font-size:10px;font-weight:700;color:var(--mut0);text-transform:uppercase;letter-spacing:.03em}
.op-r .num{text-align:right;font-variant-numeric:tabular-nums}
.op-r .num.bad{color:#C3343A;font-weight:700}.op-r .num.hi{color:var(--a);font-weight:700}
.op-r .num em{font-style:normal;color:#B07800;font-size:10px}
.op-r .rw-t{height:8px}
.op-q{justify-self:end;min-width:52px;padding:5px 8px;border:1.5px solid var(--a);border-radius:7px;text-align:right;font-weight:700;color:var(--a);font-variant-numeric:tabular-nums}
.op-q.hold{border-color:var(--ln0);color:var(--mut0);text-align:center}
/* pricing */
.pr-r{display:grid;grid-template-columns:minmax(0,1.3fr) 104px 80px 80px 80px 64px 84px;gap:8px;align-items:center;padding:10px 14px;border-top:1px solid var(--ln0);font-size:12px}
.pr-r b{font-size:13px}
.pr-hd{border-top:0;background:var(--bg0);font-size:10px;font-weight:700;color:var(--mut0);text-transform:uppercase;letter-spacing:.03em}
.pr-r .num{text-align:right;font-variant-numeric:tabular-nums}
.pr-r .num s{display:block;font-size:10px;color:var(--mut0)}
.pr-r .badge{justify-self:end;font-size:10px}
/* to-do */
.td-main{display:grid;gap:8px;align-content:start;padding:16px 18px}
.td-main h4{font:700 20px/1.2 "Overpass",sans-serif}
.td-sub{font-size:12px;color:#C3343A;font-weight:600}
.td-inv{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border:1px solid var(--ln0);border-radius:10px;background:#fff;font-size:12px}
.td-inv b{display:block;font-size:12px}.td-inv small{font-size:11px;color:var(--mut0)}
.td-n{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--a);color:#fff;font-size:11px}
.td-i{display:grid;grid-template-columns:14px minmax(0,1fr) auto;gap:9px;align-items:center;padding:9px 10px;border:1px solid var(--ln0);border-radius:9px;background:#fff;font-size:12px}
.td-i b{display:block;font-size:12px}.td-i small{font-size:11px;color:var(--mut0)}
.td-c{width:13px;height:13px;border:1.5px solid #C9CCDA;border-radius:4px}
.td-i.late{border-color:#F0C5C7;box-shadow:inset 3px 0 0 #C3343A}.td-i.late small{color:#C3343A;font-weight:600}
.td-foot{font-size:11px;color:var(--mut0)}
.hv-card .td-i{font-size:.82rem}.hv-card .td-i b{font-size:.86rem}.hv-card .td-i small{font-size:.74rem}
.hv-card .src,.td-i .src{flex:none;padding:2px 7px;border-radius:999px;background:#E8E6FE;color:var(--a);font:600 10px/1.3 "IBM Plex Sans",sans-serif}
.hv-card .td-i{border-color:var(--line);background:var(--surface)}
/* LMS */
.lm-g{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:12px}
.lm-h{display:grid;grid-template-columns:44px repeat(4,minmax(0,1fr));gap:4px;align-items:center;font-size:11px}
.lm-h .k{text-align:center;color:var(--mut0);font-size:10px;line-height:1.2}
.lm-h .n{font-weight:600}
.lm-h i{display:grid;place-items:center;height:26px;border-radius:5px;font-style:normal;font-weight:700;font-size:11px;color:#fff}
.lm-h i.g{background:#1FA463}.lm-h i.y{background:#F2B705;color:#3D2A00}.lm-h i.r{background:#E06464}
.hv-card .lm-h{font-size:.8rem}.hv-card .lm-h .k{font-size:.7rem;color:var(--muted)}
.lm-m{display:grid;grid-template-columns:minmax(0,1fr) 64px 28px;gap:8px;align-items:center;padding:8px 0;border-top:1px solid var(--ln0);font-size:12px}
.lm-m b{display:block;font-size:12px}.lm-m small{font-size:11px;color:var(--mut0)}
.lm-p{height:6px;border-radius:3px;background:var(--ln0);overflow:hidden}.lm-p i{display:block;height:100%;background:var(--a)}
.lm-m em{font-style:normal;font-size:11px;color:var(--mut0);text-align:right}
.lm-res{display:flex;align-items:center;gap:8px;margin-top:4px;padding:10px 12px;border-radius:10px;background:#E8E6FE;font-size:12px}
.lm-res b{margin-left:auto;font:700 15px/1 "Overpass",sans-serif}
/* AI chat */
.srcs{display:flex;flex-wrap:wrap;gap:6px}
.srcp{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;border:1px solid #9FD9BC;background:#E7F6EE;color:#1B8A5A;font:600 11px/1.2 "IBM Plex Sans",sans-serif}
.srcp svg{width:12px;height:12px}
.ai-g{display:grid;grid-template-columns:190px minmax(0,1fr);margin:-16px -18px -18px;min-height:360px}
.ai-side{display:grid;gap:4px;align-content:start;padding:14px 10px;border-right:1px solid var(--ln0);background:#fff}
.ai-new{padding:8px 10px;border-radius:8px;background:var(--a);color:#fff;font-weight:600;font-size:12px}
.ai-th{padding:8px 10px;border-radius:8px;font-size:12px;color:var(--mut0);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ai-th.on{background:#E8E6FE;color:var(--ink0);font-weight:600}
.ai-main{display:grid;gap:10px;align-content:start;padding:14px 18px}
.ai-priv{display:flex;align-items:center;gap:6px;justify-self:center;padding:5px 10px;border-radius:999px;background:#E7F6EE;color:#1B8A5A;font-size:11px;font-weight:600}
.ai-priv svg{width:12px;height:12px}
.ai-main .bub{font-size:13px}
.ai-main .srcs{margin-top:8px}
.ai-sty{display:inline-block;margin-top:8px;padding:2px 8px;border-radius:999px;background:#fff;border:1px solid var(--ln0);font-size:10px;font-weight:600;color:var(--mut0)}
.ai-in{display:flex;justify-content:space-between;align-items:center;margin-top:6px;padding:10px 12px;border:1px solid var(--ln0);border-radius:999px;background:#fff;font-size:12px;color:var(--mut0)}
.ai-in span{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--a);color:#fff}
.ai-in svg{width:14px;height:14px}
body[data-view="aplikasi-sales-app"] #aplikasi-sales-app{display:block}body[data-view="aplikasi-order-projection"] #aplikasi-order-projection{display:block}body[data-view="aplikasi-pricing"] #aplikasi-pricing{display:block}body[data-view="aplikasi-to-do"] #aplikasi-to-do{display:block}body[data-view="aplikasi-lms"] #aplikasi-lms{display:block}body[data-view="aplikasi-ai-chat"] #aplikasi-ai-chat{display:block}
.apx-id{display:flex;align-items:center;gap:16px;margin-bottom:10px}
.apx-id .eyebrow{margin:0 0 4px}
.apx-id h1{font:800 clamp(2.2rem,4.6vw,3.4rem)/1 var(--head)}
.mi.big{width:64px;height:64px;border-radius:18px;background:var(--nila);color:#fff}
.mi.big svg{width:32px;height:32px}
.apx-tag{font:700 clamp(1.25rem,2.2vw,1.6rem)/1.3 var(--head);color:var(--ink);margin:8px 0 4px;max-width:640px}
.apx-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.apx-u{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);font:600 .86rem/1.2 var(--sans)}
.apx-u svg{width:15px;height:15px;color:var(--accent-ink)}
.apx-live{display:inline-flex;align-items:center;gap:8px;font:600 .88rem/1.2 var(--sans);color:var(--ok)}
.apx-live i{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px var(--ok-soft)}
.apx-ha{padding-bottom:0}
.apx-center{display:grid;justify-items:center;text-align:center;max-width:880px}
.apx-center .apx-id{flex-direction:column;gap:12px}
.apx-center .lead{margin-left:auto;margin-right:auto}
.apx-center .apx-meta,.apx-center .cta-row{justify-content:center}
.apx-center .back{justify-self:start}
.apx-bigshot{max-width:1040px;margin-top:clamp(28px,4vw,48px);padding-bottom:clamp(40px,6vw,72px)}
.apx-fs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.apx-f{display:grid;gap:10px;align-content:start;padding:20px;border:1px solid var(--line);border-radius:18px;background:var(--surface)}
.apx-f b{font:700 1.05rem/1.3 var(--head)}
.apx-f span{font-size:.92rem;line-height:1.5;color:var(--ink-2)}
.apx-spec{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);border-radius:16px;background:var(--surface);overflow:hidden}
.apx-spec > div{display:grid;gap:4px;padding:16px 18px;border-left:1px solid var(--line)}
.apx-spec > div:first-child{border-left:0}
.apx-spec small{font:600 .76rem/1 var(--sans);color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.apx-spec b{font:700 1rem/1.3 var(--head)}
.apx-conn{display:grid;grid-template-columns:minmax(0,1fr) 60px minmax(0,1fr) 60px minmax(0,1.1fr);align-items:center}
.apx-cn{display:grid;gap:8px;justify-items:start;padding:20px;border:1px solid var(--line);border-radius:18px;background:var(--surface)}
.apx-cn b{font:700 1.02rem/1.25 var(--head)}.apx-cn small{font-size:.84rem;color:var(--muted)}
.apx-cn.hub{justify-items:center;text-align:center;border-color:var(--nila);box-shadow:0 0 0 4px var(--accent-soft)}
.apx-cn.two{gap:14px}
.apx-cn.two > div{display:grid;gap:6px}
.apx-cn.two > div + div{padding-top:14px;border-top:1px solid var(--line)}
.apx-cl{position:relative;height:3px}
.apx-cl i{position:absolute;inset:0;background:repeating-linear-gradient(90deg,var(--nila) 0 8px,transparent 8px 14px);animation:apxflow 1s linear infinite}
@keyframes apxflow{to{background-position:14px 0}}
.apx-stack{position:relative;min-width:0;padding-bottom:30%}
.apx-s1{width:90%}
.apx-s2{position:absolute;right:0;bottom:0;width:56%;box-shadow:0 40px 70px -30px rgba(16,12,71,.55);border-radius:14px}
.apx-s1,.apx-s2,.apx-pane,.apx-view,.apx-bigshot,.apx-rs,.apx-role{min-width:0}
.apx-tour{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:clamp(18px,3vw,34px);align-items:start}
.apx-tabs{display:grid;gap:6px}
.apx-tab{appearance:none;display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid transparent;border-radius:14px;background:transparent;text-align:left;cursor:pointer;color:var(--ink);font:inherit}
.apx-tab:hover{background:var(--surface)}
.apx-tab.on{background:var(--surface);border-color:var(--line);box-shadow:0 14px 30px -22px rgba(16,12,71,.4)}
.apx-tab.on .as-n{background:var(--nila);color:#fff}
.apx-tab b{display:block;font:700 1rem/1.25 var(--head)}
.apx-tab small{display:block;margin-top:3px;font-size:.86rem;line-height:1.4;color:var(--muted)}
.apx-tab:not(.on) small{display:none}
.as-n{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink);font:800 .85rem/1 var(--head)}
.apx-pane{display:none}.apx-pane.on{display:block;animation:feedin .3s ease}
@keyframes feedin{from{opacity:0;transform:translateY(-4px)}}
.apx-who{display:grid;gap:10px;padding:20px;border:1px solid var(--line);border-radius:20px;background:var(--surface);box-shadow:0 40px 70px -40px rgba(16,12,71,.45)}
.apx-whoh{font:700 .8rem/1 var(--sans);color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.apx-wr,.apx-rh{display:flex;gap:14px;align-items:center}
.apx-wr{padding:12px 0;border-top:1px solid var(--line)}
.apx-wr b,.apx-rh b{display:block;font:700 1.05rem/1.25 var(--head)}.apx-wr small,.apx-rh small{display:block;font-size:.86rem;color:var(--muted)}
.apx-roles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.apx-roles.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.apx-role{display:grid;grid-template-rows:auto auto 1fr;gap:14px;padding:20px;border:1px solid var(--line);border-radius:20px;background:var(--surface)}
.apx-role ul{display:grid;gap:8px}
.apx-role li{display:flex;gap:8px;align-items:flex-start;font-size:.92rem;line-height:1.4}
.apx-role li svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--ok)}
.apx-rs{align-self:end}
/* new app screens */
.op-ch{display:block;width:100%;height:120px}
.op-ch .band{fill:#E7F6EE}
.op-ch polyline{fill:none;stroke:var(--a);stroke-width:2.5;vector-effect:non-scaling-stroke}
.op-ch .arr{stroke:#C77DD8;stroke-width:1.5;stroke-dasharray:4 4;vector-effect:non-scaling-stroke}
.op-ax{display:flex;justify-content:space-between;font-size:10px;color:var(--mut0)}
.op-arr{display:flex;gap:10px}
.op-arr span{padding:6px 10px;border-radius:8px;background:#F7EAFB;font-size:11px;color:var(--pk)}
.op-arr b{margin-right:6px}
.op-set{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--ln0);border-radius:12px;background:#fff;font-size:12px}
.op-set .ap-btn{margin-left:auto}
.op-ap{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:12px 14px;border-top:1px solid var(--ln0);font-size:12px}
.op-ap:first-child{border-top:0}
.op-ap b{display:block;font-size:13px}.op-ap small{font-size:11px;color:var(--mut0)}
.op-ed{font-weight:600;color:var(--a)}
.pl-r{display:grid;grid-template-columns:100px minmax(0,1fr) 110px;gap:12px;align-items:center;padding:10px 14px;border-top:1px solid var(--ln0);font-size:12px}
.pl-hd{border-top:0;background:var(--bg0);font-size:10px;font-weight:700;color:var(--mut0);text-transform:uppercase}
.pl-t{font-weight:700}
.pl-r .num{text-align:right;font-variant-numeric:tabular-nums}
.ai-rules{display:grid;gap:6px}
.ai-rule{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--ln0);border-radius:10px;background:#fff;font-size:12px}
.ai-rule > span:first-child{display:inline-flex;align-items:center;gap:6px}
.ai-rule svg{width:13px;height:13px;color:#1B8A5A}
.ai-rule .sw{flex:none;position:relative;width:30px;height:17px;border-radius:9px;background:#C9CCDA}
.ai-rule .sw::after{content:"";position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;background:#fff}
.ai-rule .sw.on{background:var(--a)}.ai-rule .sw.on::after{transform:translateX(13px)}
.ai-rule.lockr{background:#E7F6EE;border-color:#9FD9BC}
.cp-r{display:grid;grid-template-columns:90px minmax(0,1fr);gap:12px;align-items:center;font-size:12px;font-weight:600}
.td-g{margin-top:4px;font-size:10px;font-weight:700;color:var(--mut0);text-transform:uppercase;letter-spacing:.04em}
.tt-r{display:grid;grid-template-columns:120px minmax(0,1fr) 54px 54px;gap:12px;align-items:center;padding:10px 14px;border-top:1px solid var(--ln0);font-size:12px}
.tt-hd{border-top:0;background:var(--bg0);font-size:10px;font-weight:700;color:var(--mut0);text-transform:uppercase}
.tt-r b{display:block;font-size:13px}.tt-r small{font-size:11px;color:var(--mut0)}
.tt-b{display:flex;height:10px;border-radius:5px;background:var(--bg0);overflow:hidden}
.tt-b i{display:block;height:100%;background:#93AEE9}.tt-b i.late{background:#E06464}
.tt-r .num{text-align:right;font-weight:700}.tt-r .num.bad{color:#C3343A}
.lm-pg{display:block;width:120px;height:8px;border-radius:4px;background:var(--ln0);overflow:hidden}.lm-pg i{display:block;height:100%;background:var(--a)}
.lm-tx{font-size:13px;line-height:1.5}
.lm-q{font-size:13px;font-weight:600}
.lm-o{padding:9px 12px;border:1.5px solid var(--ln0);border-radius:9px;font-size:12px}
.lm-o.on{border-color:var(--a);background:#E8E6FE;font-weight:600}
.lr-bars{display:flex;align-items:flex-end;gap:14px;height:110px}
.lr-bars div{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px;height:100%}
.lr-bars i{width:100%;border-radius:5px 5px 0 0;background:#C4BFFB}.lr-bars div:last-child i{background:var(--a)}
.lr-bars b{font-size:12px}.lr-bars span{font-size:10px;color:var(--mut0)}
.lr-r{display:grid;grid-template-columns:minmax(0,1fr) 40px 18px 40px 50px;gap:10px;align-items:center;padding:10px 14px;border-top:1px solid var(--ln0);font-size:12px}
.lr-r:first-child{border-top:0}
.lr-a svg{width:13px;height:13px;color:var(--mut0)}
.lr-r .num{text-align:right}.lr-r .badge{justify-self:end}
@media (max-width:980px){.apx-fs{grid-template-columns:repeat(2,minmax(0,1fr))}.apx-spec{grid-template-columns:repeat(2,minmax(0,1fr))}.apx-spec > div:nth-child(3){border-left:0}
  .apx-spec > div:nth-child(n+3){border-top:1px solid var(--line)}.apx-conn{grid-template-columns:minmax(0,1fr)}.apx-cl{height:24px;width:3px;justify-self:center}
  .apx-cl i{background:repeating-linear-gradient(180deg,var(--nila) 0 8px,transparent 8px 14px)}.apx-tour{grid-template-columns:minmax(0,1fr)}.apx-roles,.apx-roles.two{grid-template-columns:minmax(0,1fr)}
  .apx-tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px}.apx-tab{flex:0 0 auto;align-items:center;padding:8px 12px 8px 8px;white-space:nowrap;border-color:var(--line)}.apx-tab small{display:none!important}}
@media (max-width:620px){.apx-fs{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.apx-cl i{animation:none}}

/* pricing: the margin board */
.mb-grid{display:grid;grid-template-columns:64px minmax(0,1fr);min-height:100%}
.mb-rail{display:grid;align-content:start;gap:10px;padding:12px 8px;background:#F5F6FA;border-right:1px solid var(--ln0)}
.mb-rail span{display:grid;justify-items:center;gap:4px;padding:8px 4px;border-radius:10px;color:var(--mut0)}
.mb-rail span.on{background:var(--a);color:#fff}
.mb-rail svg{width:18px;height:18px}.mb-rail small{font-size:9px;font-weight:600}
.mb-main{display:grid;gap:10px;padding:16px 18px 18px;background:#fff}
.mb-crumb{font-size:12px;color:var(--mut0)}.mb-crumb b{color:var(--ink0)}
.mb-h{font:700 20px/1.2 "Overpass",sans-serif}
.mb-sub{font-size:11px;color:var(--mut0);margin-top:-4px}
.mb-fl{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12px}
.mb-seg{display:inline-flex;gap:4px}.mb-seg i{font-style:normal;padding:5px 12px;border:1px solid var(--ln0);border-radius:999px}.mb-seg i.on{border-color:var(--a);background:#E8E6FE;color:var(--a);font-weight:600}
.mb-sel{padding:6px 12px;border:1px solid var(--ln0);border-radius:8px;min-width:120px}
.mb-cnt{color:var(--mut0)}
.mb-rate{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:18px;align-items:center;padding:14px 16px;border:1px solid var(--ln0);border-radius:14px}
.mb-rv0 small,.mb-st small{display:block;font-size:10px;font-weight:700;color:var(--mut0);text-transform:uppercase;letter-spacing:.04em}
.mb-rn{display:block;font:800 34px/1 "Overpass",sans-serif;font-variant-numeric:tabular-nums}
.mb-dl{display:block;margin-top:4px;font-size:11px;color:#C3343A}
.mb-sw p{font-size:11px;color:var(--mut0);margin-bottom:6px}
.mb-sl{width:100%;accent-color:var(--a);cursor:pointer}
.mb-prs{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.mb-pr{appearance:none;padding:4px 9px;border:1px solid var(--ln0);border-radius:999px;background:#fff;font:600 11px/1 "IBM Plex Sans",sans-serif;color:var(--ink0);cursor:pointer}
.mb-pr.on{border-color:var(--a);background:#E8E6FE;color:var(--a)}
.mb-st b{display:block;font:800 22px/1.1 "Overpass",sans-serif;font-variant-numeric:tabular-nums}
.mb-st b.bad{color:#C3343A}
.mb-g{border:1px solid var(--ln0);border-radius:14px;overflow:hidden}
.mb-gh{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#F5F6FA;font-size:12px}
.mb-gh b{font-size:13px}.mb-gh > span:not(.mb-gb){color:var(--mut0)}
.mb-gh em{font-style:normal}
.mb-gb{margin-left:auto;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:600}
.mb-gb.bad{background:#FBE6E7;color:#C3343A}.mb-gb.ok{background:#E7F6EE;color:#1B8A5A}
.mb-r{display:grid;grid-template-columns:minmax(0,1.35fr) 70px 90px 74px minmax(0,1.6fr) 56px minmax(0,1.05fr);gap:10px;align-items:center;padding:8px 14px;border-top:1px solid var(--ln0);font-size:11px}
.mb-hd{font-size:9px;font-weight:700;color:var(--mut0);text-transform:uppercase;letter-spacing:.03em}
.mb-hd span:nth-child(n+2):nth-child(-n+4),.mb-hd span:nth-child(n+6){text-align:right}
.ap-body.flush{padding:0;display:block}
.mb-dl em{font-style:normal}.mb-dl.dn{color:#1B8A5A}
.mb-p b{display:block;font-size:12px;color:var(--a)}.mb-p small{font-size:10px;color:var(--mut0)}
.mb-r .num{text-align:right;font-variant-numeric:tabular-nums}
.mb-spc{display:block;font-size:9.5px;color:#B5651D}
.mb-m{display:grid;grid-template-columns:minmax(0,1fr) 58px;gap:8px;align-items:center}
.mb-bar{position:relative;height:9px;border-radius:5px;background:var(--bg0)}
.mb-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:5px;transition:width .15s}
.mb-bar i.ok{background:#2F8F4E}.mb-bar i.mid{background:#E08A2C}.mb-bar i.bad{background:#C3343A}
.mb-tick{position:absolute;left:33.3%;top:-3px;bottom:-3px;width:2px;background:var(--ink0)}
.mb-chip{display:inline-block;padding:3px 6px;border:1.5px solid;border-radius:6px;text-align:center;font-weight:700;font-size:11px;font-variant-numeric:tabular-nums}
.mb-chip.ok{border-color:#9FD9BC;background:#E7F6EE;color:#1B6B3A}.mb-chip.mid{border-color:#F2D28A;background:#FFF6DC;color:#8A5A00}
.mb-chip.bad{border-color:#F0B7BA;background:#FBE6E7;color:#B4282E}.mb-chip.none{border-color:var(--ln0);color:var(--mut0);font-weight:600}
.mb-vs{text-align:right;color:#C3343A;font-variant-numeric:tabular-nums}
.mb-rv{text-align:right}.mb-rv b{display:block;font-weight:600;font-size:11px}
.mb-rv small{font-size:10px;font-weight:700}.mb-rv small.dear{color:#B5651D}.mb-rv small.cheap{color:#1B8A5A}
.mb-add{text-align:right;color:var(--a);font-weight:600}
.mb-leg{font-size:10px;color:var(--mut0)}
/* the product peek */
.pk-cost{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--ln0);border-radius:12px;background:#fff;font-size:12px;color:var(--mut0)}
.pk-cost span small{display:block;font-size:10px}.pk-cost span b{display:block;font-size:14px;color:var(--ink0)}
.pk-cost .r{padding:4px 10px;border-radius:8px;background:#F5F6FA}
.pk-r{display:grid;grid-template-columns:minmax(0,1fr) 90px 60px;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--ln0);font-size:12px}
.pk-r b{display:block;font-size:12px}.pk-r small{font-size:10px;color:var(--mut0)}
.pk-r .num{text-align:right;font-variant-numeric:tabular-nums}
/* the small card in the hero */
.mb-r.mini{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);padding:9px 0;border-top:1px solid var(--line);font-size:.82rem}
.mb-r.mini:first-of-type{border-top:0}
.mb-r.mini .mb-p b{color:var(--ink);font-size:.88rem}.mb-r.mini .mb-p small{color:var(--muted)}
.mb-r.mini .mb-bar{background:var(--surface-2)}.mb-r.mini .mb-tick{background:var(--ink)}
.mb-mrate{font-size:.84rem!important;font-weight:500!important;color:var(--muted)!important}.mb-mrate b{font:800 1.1rem/1 var(--head);color:var(--ink)}.mb-mrate span{color:var(--bad);font-weight:600}
.mb-tk{display:inline-block;width:2px;height:12px;margin-right:6px;vertical-align:-2px;background:var(--ink)}

body[data-view="kebijakan-privasi"] #kebijakan-privasi{display:block}
.pv-pv{display:none!important}
body[data-view="kebijakan-privasi"] .pv-pv{display:inline-flex!important}
.pv-l{display:none}
.pv-wrap[data-v="a"] .pv-la,.pv-wrap[data-v="b"] .pv-lb,.pv-wrap[data-v="c"] .pv-lc{display:block}
.pv-hero{padding-bottom:clamp(24px,4vw,40px)}
.pv-hero h1{max-width:760px}
.pv-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.pv-meta > *{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:var(--surface);font:600 .88rem/1.2 var(--sans);color:var(--ink-2)}
.pv-meta a{color:var(--accent-ink)}
.pv-meta svg{width:16px;height:16px;color:var(--accent-ink)}
.pv-body{padding-bottom:clamp(48px,7vw,88px)}
.pv-txt{display:grid;gap:clamp(28px,3.5vw,40px);max-width:720px}
.pv-s h2{display:flex;align-items:center;gap:12px;font:800 clamp(1.3rem,2.2vw,1.6rem)/1.25 var(--head);margin-bottom:10px;scroll-margin-top:96px}
.pv-s p{font-size:1.02rem;line-height:1.7;color:var(--ink-2)}
.pv-s p + p{margin-top:10px}
.pv-n{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:10px;background:var(--accent-soft);color:var(--accent-ink);font:800 .9rem/1 var(--head)}
/* A */
.pv-doc{display:grid;grid-template-columns:260px minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start}
.pv-toc{position:sticky;top:96px;display:grid;gap:2px;padding:16px;border:1px solid var(--line);border-radius:18px;background:var(--surface)}
.pv-toc p{font:700 .76rem/1 var(--sans);color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin:0 0 8px 8px}
.pv-toc a{display:flex;gap:10px;align-items:center;padding:8px;border-radius:10px;font:600 .92rem/1.3 var(--sans);color:var(--ink-2);text-decoration:none}
.pv-toc a:hover{background:var(--surface-2);color:var(--ink)}
.pv-tn{display:grid;place-items:center;flex:none;width:22px;height:22px;border-radius:7px;background:var(--surface-2);font-style:normal;font:800 .72rem/1 var(--head)}
/* B */
.pv-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:12px 0 clamp(36px,5vw,56px)}
.pv-c{display:grid;gap:10px;align-content:start;padding:20px;border:1px solid var(--line);border-radius:18px;background:var(--surface)}
.pv-c b{font:700 1.05rem/1.3 var(--head)}.pv-c > span:not(.mi){font-size:.94rem;line-height:1.5;color:var(--ink-2)}
.pv-c:nth-child(3) .mi{background:var(--sinyal);color:var(--malam)}
.pv-full{margin-bottom:16px}
.pv-one{max-width:760px;padding:clamp(22px,3vw,36px);border:1px solid var(--line);border-radius:22px;background:var(--surface)}
/* C */
.pv-accw{max-width:860px}
.pv-acc{display:grid;gap:10px}
.pv-d{border:1px solid var(--line);border-radius:18px;background:var(--surface);overflow:hidden}
.pv-d summary{display:flex;align-items:center;gap:14px;padding:16px 18px;cursor:pointer;list-style:none}
.pv-d summary::-webkit-details-marker{display:none}
.pv-d summary b{flex:1;font:700 1.08rem/1.3 var(--head)}
.pv-chev{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--surface-2);font:700 1.1rem/1 var(--sans);color:var(--accent-ink);transition:transform .2s}
.pv-d[open] .pv-chev{transform:rotate(45deg)}
.pv-d[open]{border-color:var(--accent-line)}
.pv-d > div{padding:0 18px 18px 72px}
.pv-d p{font-size:1rem;line-height:1.65;color:var(--ink-2)}.pv-d p + p{margin-top:8px}
/* closing */
.pv-ask{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.pv-ask > div{flex:1;min-width:220px}.pv-ask b{display:block;font:700 1.15rem/1.3 var(--head)}.pv-ask > div > span{color:var(--muted)}
/* consent under the consultation form */
.kc-consent{margin-top:10px;font-size:.86rem;line-height:1.5;color:var(--muted)}
.kc-consent a{color:var(--accent-ink);font-weight:600}
@media (max-width:980px){.pv-doc{grid-template-columns:minmax(0,1fr)}.pv-toc{position:static}.pv-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.pv-cards{grid-template-columns:minmax(0,1fr)}.pv-d > div{padding-left:18px}}

/* ===== phones ===== */
.mcta{display:none}
@media (max-width:520px){
  .mcta{display:block;position:fixed;left:0;right:0;bottom:0;z-index:60;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));
    background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--line);
    transform:translateY(110%);transition:transform .25s ease}
  .mcta .btn{width:100%;justify-content:center}
  body.mcta-on .mcta{transform:none}
  body[data-view="konsultasi"] .mcta{display:none}
  body.mcta-on .foot{padding-bottom:84px}
}
@media (max-width:899px){
  /* 3 problems: the panel opens under the problem */
  .pick{display:flex;flex-direction:column;gap:6px}
  .pick-list,.pick > div:last-child{display:contents}
  #tab-revenue{order:0}#pan-revenue{order:1}#tab-stock{order:2}#pan-stock{order:3}#tab-price{order:4}#pan-price{order:5}#tab-todo{order:6}#pan-todo{order:7}#tab-training{order:8}#pan-training{order:9}#tab-ask{order:10}#pan-ask{order:11}
  .pick-btn{scroll-margin-top:76px}
  .fix-panel{margin:2px 0 14px}
}
@media (max-width:640px){
  /* 1 hero wiring, compact */
  .hw{gap:10px}
  .hw-p{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .hp{padding:9px 10px;font-size:.8rem;line-height:1.25}
  .hw-p::after,.hw-a::after{content:"";grid-column:1/-1;flex:0 0 100%;width:100%;height:16px;margin-top:2px;
    background:repeating-linear-gradient(180deg,var(--sinyal) 0 4px,transparent 4px 8px) center/2px 100% no-repeat}
  .hw-a{display:flex;flex-wrap:wrap;gap:6px;min-height:0}
  .ha.on{flex:1 1 0;min-width:0;flex-direction:column;align-items:flex-start;padding:9px 10px;gap:6px}
  .ha small{display:none}
  .ha b{font-size:.82rem}
  .ha-ic{width:26px;height:26px;border-radius:8px}.ha-ic svg{width:15px;height:15px}
  .hw-empty{flex:0 0 100%;text-align:center}
  .hb{grid-template-columns:auto minmax(0,1fr) auto;justify-items:start;align-items:center;column-gap:12px;row-gap:2px;padding:12px 14px;border-width:4px;text-align:left}
  .hb > svg,.hb .logo-mark{grid-row:1/3;width:32px;height:32px}
  .hb b{grid-column:2;font-size:.95rem}
  .hb small{grid-column:2}
  .hb-n{grid-column:3;grid-row:1/3;margin:0}
  /* the "ask us" link keeps its arrow beside the words */
  a.case-more{display:inline-block!important;line-height:1.5!important}a.case-more svg{display:inline-block;vertical-align:-3px;margin-left:4px}
  /* 4 rings side by side, swiped */
  .isl{display:flex!important;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:16px;margin-inline:-16px;padding:0 16px 6px;scrollbar-width:none}
  .isl::-webkit-scrollbar{display:none}
  .isl-p{flex:0 0 86%;scroll-snap-align:center}
  #brain .sec-h::after,#more .media-h::after{display:block;margin-top:10px;font:600 .82rem/1.3 var(--sans);color:var(--accent-ink)}
  html[data-lang="id"] #brain .sec-h::after{content:"Geser untuk membandingkan →"}
  html[data-lang="en"] #brain .sec-h::after{content:"Swipe to compare →"}
  .posts{display:flex!important;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:20px;margin-inline:-20px;padding:0 20px 6px;scrollbar-width:none}
  .posts::-webkit-scrollbar{display:none}
  .post{flex:0 0 78%;scroll-snap-align:start}
  /* 5 Cara kerja as a numbered timeline */
  .plan{display:block!important;counter-reset:st}
  .plan-bar{display:none!important}
  .plan-l{position:relative;counter-increment:st;padding:0 0 20px 44px!important}
  .plan-l::before{content:counter(st);position:absolute;left:0;top:-2px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--nila);color:#fff;font:800 .85rem/1 var(--head)}
  .plan-l:nth-of-type(4)::before{background:var(--sinyal);color:var(--malam)}
  .plan-l::after{content:"";position:absolute;left:14px;top:32px;bottom:2px;width:2px;background:var(--accent-line)}
  .plan-l:last-of-type::after{display:none}
  .plan-l .wk{display:inline-block!important;margin:0 0 4px 8px;padding:3px 8px;border-radius:999px;background:var(--accent-soft);font:600 .76rem/1.2 var(--sans)}
  /* closing buttons: full width, easy to tap */
  .close .cta-row{display:grid;width:100%}.close .cta-row .btn{width:100%;justify-content:center}
  /* 6 app screens big enough to read, swiped sideways */
  .as-big,.apx-view{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
  .as-pinwrap,.apx-pane{width:max-content;min-width:100%}
  .as-big::before,.apx-view::before{display:block;position:sticky;left:0;margin-bottom:8px;font:600 .82rem/1.3 var(--sans);color:var(--accent-ink)}
  html[data-lang="id"] .as-big::before,html[data-lang="id"] .apx-view::before{content:"Geser untuk melihat seluruh layar →"}
  html[data-lang="en"] .as-big::before,html[data-lang="en"] .apx-view::before{content:"Swipe to see the whole screen →"}
  /* 7 solution and app pages */
  .pg-hero-vis .ph-wrap{margin-inline:auto;max-width:320px}
  .pg-agent{padding:16px;gap:8px}
  .apx-stack{display:none}
  .apx-id .mi.big{width:52px;height:52px;border-radius:15px}.apx-id .mi.big svg{width:26px;height:26px}
  .apx-f{grid-template-columns:auto minmax(0,1fr);column-gap:14px;row-gap:2px;padding:14px 16px}
  .apx-f .mi{grid-row:1/3}
  .apx-cn,.apx-cn.two > div{grid-template-columns:auto minmax(0,1fr);justify-items:start;text-align:left;column-gap:14px;row-gap:2px;align-items:center}
  .apx-cn > .mi,.apx-cn.two > div > .mi{grid-row:1/3}
  .apx-cn.hub{justify-items:start;text-align:left}
  .apx-cn .mi.big{width:44px;height:44px;border-radius:13px}.apx-cn .mi.big svg{width:22px;height:22px}
  .apx-cn.two{display:grid}
  /* 8 consultation: form first */
  .kons-copy{display:contents}
  .kons-in{display:flex!important;flex-direction:column;gap:18px}
  .kons-in .kcard{order:2}.kons-in .ksteps{order:3;margin-top:6px}
  .kform input,.kform textarea,.kform select{font-size:16px}
  .ksend{width:100%;justify-content:center}
}

/* language switch */
.lsw{flex:none}
.lsw-a{display:inline-flex;padding:3px;border:1px solid var(--line);border-radius:999px;background:var(--surface)}
.lsw-a .lsw-btn{appearance:none;padding:6px 11px;border:0;border-radius:999px;background:transparent;font:700 .8rem/1 var(--sans);color:var(--muted);cursor:pointer;text-decoration:none}
html[data-lang="id"] .lsw-a [lang="id"],html[data-lang="en"] .lsw-a [lang="en"]{background:var(--accent-soft);color:var(--accent-ink)}
.lsw-a .lsw-btn:hover{color:var(--ink)}
.lsw-b{appearance:none;display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);
  font:600 .86rem/1 var(--sans);color:var(--ink-2);cursor:pointer;text-decoration:none}
.lsw-b:hover{border-color:var(--accent-line);color:var(--ink)}
.lsw-b svg,.foot-lang svg{width:16px;height:16px;color:var(--accent-ink)}
.top-in .lsw{margin-left:auto;margin-right:12px}
.top-in .lsw + .lsw{margin-left:0}
/* which design shows */
.top[data-lsw="a"] .lsw-b,.top[data-lsw="b"] .lsw-a.lsw,.top[data-lsw="c"] .lsw{display:none!important}
.top[data-lsw="c"] .mn-lang{display:none}
html[data-lang="id"] .lsw-b.l-en,html[data-lang="en"] .lsw-b.l-id,html[data-lang="id"] .foot-lang.l-en,html[data-lang="en"] .foot-lang.l-id{display:none!important}
.mn-lang{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;border-top:1px solid var(--line);font:600 .95rem/1.2 var(--sans);color:var(--ink-2)}
.mn-lang .lsw-btn{padding:8px 14px;font-size:.86rem}
.foot-lang{appearance:none;display:inline-flex;align-items:center;gap:6px;padding:0;border:0;background:none;font:inherit;color:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
@media (max-width:880px){.top-in .lsw{display:none!important}}

.case-more{display:inline-flex;align-items:center;gap:6px;margin-top:18px;font:600 .95rem/1 var(--sans);color:var(--accent-ink);text-decoration:none}.case-more svg{width:16px;height:16px}
/* breadcrumb on every inner page */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-bottom:18px;font:600 .9rem/1.3 var(--sans);color:var(--muted)}
.crumbs .back{margin:0}
.crumbs .cr-sep{color:var(--line-2)}
.crumbs [aria-current]{color:var(--ink-2)}