/* ===== BRAND VALUES: design/tokens.css v1.0, direction Akrab (locked by Rafsi 4 Nov 2026). Change in tokens.css first, then copy here. =====
   Every colour, font and radius below comes from these variables. Light only: no dark mode at launch (brand v1.0). */
:root{
  --bg:#FFFFFF;--soft:#F2F5F8;--ink:#1E202A;--muted:#525A6B;--line:#DDE4EB;--field-line:#6C7A8E;
  --primary:#345680;--primary-deep:#28446A;--on:#FFFFFF;--tint:#E5EBF0;
  --accent:#DC6C17;--accent-soft:#FBE9DC;--accent-text:#B4530E; /* bright orange for fills and sparks; orange words use accent-text (5.0:1) */
  --sky:#E3F1FB;--sky-ink:#1F5A8A;--mint:#E3F5EC;--mint-ink:#1E6B4A;--peach:#FDEBDD;--peach-ink:#9A4A12;--lilac:#ECE8FA;--lilac-ink:#4D3F8F;--sun:#FFF3CC;--sun-ink:#7A5A00;
  --good:#1F7A5C;--warn:#B22E06;--warnbg:#FBE9E2;
  --fd:"Poppins","Segoe UI",sans-serif;--fb:"Inter","Segoe UI",Roboto,sans-serif;
  --r:20px;--rs:12px;
  --gut:clamp(16px,4vw,32px);--sec:clamp(40px,6vw,72px);--ease:cubic-bezier(.23,1,.32,1);--nav:60px;
}
/* ===== end brand values ===== */

*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav) + 56px);-webkit-text-size-adjust:100%}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--fb);font-size:clamp(1rem,.96rem + .2vw,1.075rem);line-height:1.6;overflow-x:clip}
h1,h2,h3,p,ul,ol,figure,blockquote,fieldset{margin:0}ul,ol{padding:0;list-style:none}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:var(--fd);font-weight:600;letter-spacing:-.025em;line-height:1.1;text-wrap:balance}
h1{font-size:clamp(2.5rem,1.7rem + 4vw,4.6rem)}
h2{font-size:clamp(1.7rem,1.3rem + 2vw,2.7rem)}
h3{font-size:clamp(1.08rem,1rem + .4vw,1.3rem);line-height:1.3}
h1 em,h2 em{font-style:normal;color:var(--accent-text);background:linear-gradient(transparent 70%,var(--accent-soft) 70%);padding:0 .05em;border-radius:4px}
a{color:var(--primary)}
:focus-visible{outline:3px solid var(--primary);outline-offset:3px;border-radius:4px}
.wrap{max-width:1180px;margin-inline:auto;padding-left:max(var(--gut),env(safe-area-inset-left,0px));padding-right:max(var(--gut),env(safe-area-inset-right,0px))}
.sec{padding-block:var(--sec)}.soft{background:var(--soft)}
.muted{color:var(--muted)}.small{font-size:.88rem}.strong{font-weight:600}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:8px;top:-60px;z-index:50;background:var(--ink);color:var(--on);padding:10px 14px;border-radius:8px}.skip:focus{top:8px}
.eyebrow{display:inline-flex;font-size:.8rem;font-weight:600;color:var(--primary);background:var(--tint);border-radius:999px;padding:4px 12px;margin-bottom:12px}
.sub{color:var(--muted);margin-top:12px;max-width:34em}
.k{font-size:.78rem;color:var(--muted)}
.tag{display:inline-block;background:var(--sun);color:var(--sun-ink);border-radius:999px;padding:2px 10px;font-size:.74rem;font-weight:600;line-height:1.6;white-space:nowrap}
.card{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:clamp(18px,2.5vw,24px)}
.sky{background:var(--sky);color:var(--sky-ink)}.mint{background:var(--mint);color:var(--mint-ink)}.peach{background:var(--peach);color:var(--peach-ink)}.lilac{background:var(--lilac);color:var(--lilac-ink)}.sun{background:var(--sun);color:var(--sun-ink)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 24px;border-radius:999px;background:var(--primary);color:var(--on);border:1.5px solid var(--primary);font:600 1rem var(--fb);text-decoration:none;cursor:pointer;transition:transform .18s var(--ease),background-color .18s,box-shadow .18s;text-align:center}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px -12px var(--primary);background:var(--primary-deep)}.btn:active{transform:none}
.btn[disabled]{opacity:.7;cursor:progress;transform:none}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}.btn.ghost:hover{background:var(--soft);box-shadow:none}
.btn.sm{min-height:42px;padding:0 18px;font-size:.92rem}
.btn.block{width:100%}

@keyframes rise{from{transform:translateY(14px)}}

/* nav */
.nav{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.92);border-bottom:1px solid var(--line)}
@supports(backdrop-filter:blur(8px)){.nav{background:rgba(255,255,255,.8);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}}
.nav-in{display:flex;align-items:center;gap:12px;height:var(--nav)}
.wm{display:inline-flex;align-items:center;gap:8px;font-family:var(--fd);font-weight:600;font-size:1.3rem;letter-spacing:-.03em;text-decoration:none;color:var(--ink);padding:6px 0;margin-right:auto}
.wm b{font-weight:600;color:var(--primary)}.wm svg{flex:none}
.links{display:none;gap:24px;font-size:.95rem;font-weight:500}.links a{color:var(--muted);text-decoration:none;padding:10px 0}.links a:hover{color:var(--ink)}
@media(min-width:800px){.links{display:flex;margin-right:12px}}

/* ===== hero: motion cloned from 1609sat (.reanimate/1609sat/spec.md H1 to H4, B1, D1) =====
   Words: opacity 0, 28 px down, blur 10 px, to rest in 750 ms ease-out cubic, 71 ms apart, first at 488 ms after
   navigation (CSS delays run from when this stylesheet applies, about 250 ms in, hence .238 s).
   Paragraph then buttons: 16 px, blur 6 px, same curve. Product window: present at rest. */
.hero{padding-top:clamp(36px,6vw,88px);padding-bottom:clamp(36px,5vw,64px)}
.hero-col{display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(18px,2.4vw,30px);max-width:920px}
.hero h1{font-size:clamp(2.6rem,1.5rem + 4.6vw,4.4rem);letter-spacing:-.035em;line-height:1.08}
.hero h1 .w{display:inline-block;white-space:pre}
.hero .lead{max-width:40em;color:var(--muted);font-size:clamp(1.02rem,.98rem + .3vw,1.15rem)}
.acts{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
@media(max-width:519px){.acts{width:100%}.acts .btn{flex:1 1 100%}}
@media(prefers-reduced-motion:no-preference){
  .hero h1 .w{animation:wIn .75s cubic-bezier(.33,1,.68,1) both}
  .hero h1 .w:nth-child(1){animation-delay:.238s}.hero h1 .w:nth-child(2){animation-delay:.309s}
  .hero h1 .w:nth-child(3){animation-delay:.380s}.hero h1 .w:nth-child(4){animation-delay:.451s}
  .in-p{animation:pIn .75s cubic-bezier(.33,1,.68,1) .613s both}
  .in-b{animation:pIn .75s cubic-bezier(.33,1,.68,1) .705s both}
  @keyframes wIn{from{opacity:0;transform:translateY(28px);filter:blur(10px)}}
  @keyframes pIn{from{opacity:0;transform:translateY(16px);filter:blur(6px)}}
}
/* sheen on the primary button: a skewed light band crosses in the first 55% of a 4.5 s cycle (B1) */
.btn.shine{position:relative;overflow:hidden;isolation:isolate}
.btn.shine::after{content:"";position:absolute;top:0;bottom:0;left:-100%;width:34%;transform:skewX(-12deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent);pointer-events:none}
@media(prefers-reduced-motion:no-preference){
  .btn.shine::after{animation:sheen 4.5s linear infinite}
  @keyframes sheen{0%{left:-100%;animation-timing-function:ease-in-out}55%{left:160%}100%{left:160%}}
}

/* product window: built from the real project screens (app/src/app/proyek/[id], messages/id.json), at rest from the first frame (H4).
   Kak Pilot holds the top edge: body layer behind the window, hands layer in front of it. */
.app{--kp:clamp(96px,11vw,128px);position:relative;max-width:1152px;margin:clamp(24px,4vw,40px) auto 0;padding-top:calc(var(--kp) * .8)}
.kp{position:absolute;top:0;left:7%;width:var(--kp);height:auto}
.kp-body{z-index:1}.kp-hands{z-index:3;pointer-events:none}
.app-win{position:relative;z-index:2;display:grid;grid-template-columns:220px minmax(0,1fr);background:var(--bg);border:1px solid var(--line);border-radius:20px;box-shadow:0 18px 15.5px rgba(10,13,21,.05),0 40px 70px -50px rgba(30,32,42,.45);overflow:hidden;text-align:left;font-size:.84rem;line-height:1.45}
.app-side{background:var(--soft);border-right:1px solid var(--line);padding:16px 12px;display:flex;flex-direction:column;gap:6px}
.app-brand{font:600 1rem var(--fd);letter-spacing:-.02em;margin:0 4px 10px}.app-brand b{color:var(--primary);font-weight:600}
.side-h{font-size:.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin:8px 6px 2px}
.plist{display:grid;gap:4px}.plist li{padding:8px 10px;border-radius:10px;display:grid;gap:1px}
.plist li.on{background:var(--bg);box-shadow:0 1px 2px rgba(10,13,21,.06)}
.plist b{font-weight:600;font-size:.82rem}.plist small{color:var(--muted);font-size:.74rem;display:flex;align-items:center;gap:6px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--line);flex:none}.dot.ok{background:var(--good)}.dot.wait{background:var(--accent)}
.snav li{padding:5px 10px;color:var(--muted)}
.keep{margin-top:auto;font-size:.72rem;color:var(--muted);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.app-main{padding:16px 18px 18px;display:grid;gap:12px;align-content:start;min-width:0}
.app-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.ptitle{font:600 1.02rem var(--fd);letter-spacing:-.015em;line-height:1.3}
.track{display:flex;gap:4px}.track li{flex:1;font-size:.7rem;font-weight:600;color:var(--muted);padding-top:7px;border-top:4px solid var(--tint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.track li.d{border-color:var(--primary);color:var(--ink)}.track li.c{border-color:var(--accent);color:var(--accent-text)}
.panels{display:grid;gap:10px;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.35fr);grid-template-areas:"health map res" "note nav res"}
.pn{border:1px solid var(--line);border-radius:12px;padding:11px 12px;display:grid;gap:6px;align-content:start;min-width:0}
.pn-h{font-weight:600;font-size:.82rem;display:flex;align-items:center;gap:8px}
.p-health{grid-area:health}.p-map{grid-area:map}.p-res{grid-area:res}.p-note{grid-area:note;background:var(--sky);border-color:transparent}.p-nav{grid-area:nav}
.mini{display:grid;gap:5px}.mini li{display:flex;gap:7px;align-items:center;font-size:.76rem}
.pill{border-radius:999px;padding:1px 7px;font-size:.66rem;font-weight:600;white-space:nowrap;flex:none}
.pill.ok{background:var(--mint);color:var(--mint-ink)}.pill.dec{background:var(--sun);color:var(--sun-ink)}.pill.off{background:var(--lilac);color:var(--lilac-ink)}
.vmap{display:grid;gap:6px}.vmap li{display:flex;align-items:center;gap:7px;font-size:.78rem;white-space:nowrap}
.vmap .v{background:var(--sky);color:var(--sky-ink);font-weight:700;font-size:.68rem;border-radius:6px;padding:2px 6px;min-width:26px;text-align:center}.vmap .v.y{background:var(--peach);color:var(--peach-ink)}
.vmap em{margin-left:auto;font-style:normal;color:var(--muted);font-size:.72rem}
.lock{margin-left:auto;font-size:.66rem;font-weight:600;color:var(--mint-ink);background:var(--mint);border-radius:999px;padding:1px 8px}
.p-res table{font-size:.76rem}.p-res th{padding:4px 6px 4px 0;font-size:.7rem}.p-res td{padding:5px 6px 5px 0}
.rs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.rs span{background:var(--soft);border-radius:8px;padding:6px 8px;font-size:.68rem;color:var(--muted);display:grid}
.rs b{font:600 .92rem var(--fd);color:var(--ink);font-variant-numeric:tabular-nums}
.dlb{justify-self:start;background:var(--primary);color:var(--on);border-radius:999px;padding:5px 12px;font-weight:600;font-size:.74rem}
.p-note p:last-child{font-size:.78rem}
.chips2{display:flex;flex-wrap:wrap;gap:4px}.chips2 span{border:1px solid var(--line);border-radius:999px;padding:2px 8px;font-size:.7rem;background:var(--bg)}
@media(max-width:959px){.app-win{grid-template-columns:minmax(0,1fr)}.app-side{display:none}}
@media(max-width:759px){
  .app-main{padding:12px}.panels{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"res res" "health map"}
  .p-note,.p-nav{display:none}.track li{font-size:0;padding-top:0;height:4px}.track li.c{font-size:.68rem;padding-top:6px;height:auto;overflow:visible}
  .ptitle{font-size:.92rem}
}
@media(max-width:420px){.panels{grid-template-areas:"res res" "health health"}.p-map{display:none}}


/* who it is for: three equal cards */
.three{display:grid;gap:16px;margin-top:clamp(28px,3.5vw,40px);grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.pain{border-radius:16px;padding:18px;display:grid;grid-template-columns:64px minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:14px;row-gap:4px;align-items:start}
.pain img{grid-row:1/3;width:64px}
.pain b{font-family:var(--fd);font-weight:600;font-size:1.1rem;letter-spacing:-.01em;line-height:1.3}
.pain span{color:var(--ink);opacity:.86;font-size:.96rem}
@media(max-width:600px){.pain{grid-template-columns:minmax(0,1fr);grid-template-rows:auto}.pain img{grid-row:auto;width:52px;margin-bottom:4px}}

/* ===== how it works: pinned steps cloned from 1609sat (.reanimate/1609sat/spec.md S1 to S7) =====
   Base (no JS): the five steps stack, each screen visible at rest.
   .how.on and 960 px or wider: 656 px stage sticky at 104 px,    titles 0.18 to 1 in 300 ms (ease), screens crossfade in 450 ms (ease-out), a step every 380 px, incoming content slides 66 px in 800 ms.
   .how.on below 960 px: list above, screen below, auto-advance every 5.2 s (app.js). */
.how{padding-block:var(--sec)}
.how-head{margin-bottom:clamp(8px,2vw,20px)}
.how-in{display:grid;gap:16px;width:min(1058px,100% - 2 * var(--gut));margin-inline:auto}
.how-list{display:grid;gap:10px;counter-reset:none}
.how-list button{display:flex;gap:16px;align-items:baseline;width:100%;text-align:left;background:none;border:0;padding:0;margin:0;cursor:pointer;color:var(--ink);font:600 clamp(1.05rem,.8rem + 1.8vw,2.2rem)/1.3 var(--fd);letter-spacing:-.025em}
.how-list .hn{flex:none;color:var(--accent-text);min-width:.7em}
.how-screens{display:grid;gap:16px}
.how:not(.on) .how-list{display:none}
.scr{position:relative}
.scr-in{position:relative;height:100%;background:var(--bg);border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 15.5px rgba(10,13,21,.05);overflow:hidden;display:flex;flex-direction:column}
.scr-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;border-bottom:1px solid var(--line);font-size:.84rem;font-weight:600;color:var(--muted)}
.scr-bar i{width:9px;height:9px;border-radius:50%;background:var(--line)}.scr-bar span:first-of-type{margin-left:4px}
.scr-bar .tag{margin-left:auto}
.scr-body{padding:16px 18px;display:flex;flex-direction:column;gap:12px;font-size:.95rem;flex:1}
.scr-cap{color:var(--muted);font-size:.88rem;margin-top:auto}

/* JS on, laptop: pinned stage */
@media(min-width:960px){
  .how.on .how-track{height:calc(656px + 5 * 380px)}
  .how.on .how-stage{position:sticky;top:104px;height:656px;display:flex;align-items:center}
  .how.on .how-in{grid-template-columns:362px 647px;justify-content:space-between;align-items:center;gap:32px}
  .how.on .how-list button{opacity:.18;transition:opacity .3s ease}
  .how.on .how-list button[aria-current="step"]{opacity:1}
  .how.on .how-list button:focus-visible{opacity:1}
  .how.on .how-screens{position:relative;display:block;width:647px;height:556px;border-radius:20px;overflow:clip;background:linear-gradient(160deg,var(--soft),var(--tint))}
  .how.on .scr{position:absolute;inset:0;padding:32px 0 0 32px;opacity:0;visibility:hidden;transition:opacity .45s ease-out,visibility 0s .45s}
  .how.on .scr .scr-in{border-radius:16px 0 0 0;border-right:0;border-bottom:0}
  .how.on .scr.cur{opacity:1;visibility:visible;transition:opacity .45s ease-out,visibility 0s}
  .how.on .scr-body{padding:22px 24px;font-size:1rem}
}
/* JS on, phone and tablet: list on top, one screen below that changes (no pinning, like 1609sat on phones) */
@media(max-width:959px){
  .how.on .how-list{gap:2px}
  .how.on .how-list button{font-size:1.02rem;padding:7px 0;min-height:44px;align-items:center;opacity:.32;transition:opacity .4s cubic-bezier(0,0,.2,1)}
  .how.on .how-list button[aria-current="step"]{opacity:1}
  .how.on .how-screens{display:grid}
  .how.on .scr{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .45s ease-out,visibility 0s .45s}
  .how.on .scr.cur{opacity:1;visibility:visible;transition:opacity .45s ease-out,visibility 0s}
}
@media(prefers-reduced-motion:no-preference){
  .how.on .scr.run .scr-in{animation:slideIn .8s cubic-bezier(.16,1,.3,1) both}
  @keyframes slideIn{from{transform:translate(66px,9px)}}
}
@media(prefers-reduced-motion:reduce){.how .scr,.how .how-list button{transition:none!important}}

/* screen contents (final state is the rest state; .play only animates towards it) */
.drop{position:relative;border:1.5px dashed var(--field-line);border-radius:12px;min-height:86px;display:grid;place-items:center;background:var(--mint);border-color:var(--mint-ink);text-align:center;padding:10px}
.drop-empty{display:none;color:var(--muted)}
.drop-done b{display:block;font-weight:600}.drop-done small{color:var(--mint-ink);font-weight:600}
.facts{display:grid}.facts li{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--line)}.facts li:last-child{border-bottom:0}
.facts span{color:var(--muted)}.facts b{font-weight:600;text-align:right}
.health{display:grid;gap:7px}.health li{display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:10px;background:var(--soft)}
.health .tk{flex:none;width:18px;height:18px;border-radius:50%;background:var(--good);position:relative}
.health .tk::after{content:"";position:absolute;left:6px;top:3px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.health .flag .tk{background:var(--accent)}.health .flag .tk::after{content:"!";border:0;transform:none;left:0;right:0;top:0;width:auto;height:auto;color:#fff;font:700 .72rem/18px var(--fb);text-align:center}
.health em{margin-left:auto;font-style:normal;font-size:.74rem;font-weight:600;background:var(--peach);color:var(--peach-ink);border-radius:999px;padding:2px 9px;white-space:nowrap}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
th{text-align:left;color:var(--muted);font-weight:600;padding:6px 8px 6px 0;border-bottom:1px solid var(--line)}
td{padding:7px 8px 7px 0;border-bottom:1px solid var(--line)}tbody tr:last-child td,tbody tr:last-child th{border-bottom:0}
tbody th{color:var(--ink);font-weight:500}
.ok{color:var(--good);font-weight:600}.wr{color:var(--warn);font-weight:600}
tr.hl th,tr.hl td{background:var(--sun)}
.roll{display:inline-flex;font-variant-numeric:tabular-nums}
.roll .col{display:inline-block;height:1.5em;line-height:1.5em;overflow:hidden;vertical-align:bottom}
.roll .strip{display:block}.roll .strip b{display:block;font-weight:inherit}
.bub{display:grid;grid-template-columns:44px minmax(0,1fr);gap:10px;align-items:start}.bub img{width:44px}
.bub p{background:var(--sky);border-radius:16px 16px 16px 4px;padding:9px 12px;min-height:2.6em}
.doc-wrap{position:relative}
.doc{background:var(--soft);border-radius:12px;padding:14px;display:grid;gap:9px}
.doc-h{text-align:center;font-weight:700;font-size:.8rem;letter-spacing:.04em}
.lines{display:grid;gap:6px}.lines i{height:7px;border-radius:4px;background:var(--line)}.lines i.s{width:62%}
.doc-tab{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px;display:grid;gap:6px}
.doc-tab p{font-size:.8rem;font-weight:600;text-align:center}
.doc-tab div{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px}.doc-tab div i{height:12px;border:1px solid var(--line)}.doc-tab div i:nth-child(-n+3){background:var(--tint)}
.slot{border:1.5px dashed var(--accent);background:var(--accent-soft);color:var(--accent-text);border-radius:10px;padding:10px;font-weight:600;text-align:center;font-size:.88rem}
.dl{justify-self:end;background:var(--primary);color:var(--on);border-radius:999px;padding:7px 16px;font-weight:600;font-size:.86rem;position:relative}
.q{font-family:var(--fd);font-weight:600;font-size:1.1rem;line-height:1.35;letter-spacing:-.01em}
.outline{display:grid;gap:7px;counter-reset:o}.outline li{counter-increment:o;display:flex;gap:9px;align-items:baseline}
.outline li::before{content:counter(o);flex:none;width:20px;height:20px;border-radius:50%;background:var(--lilac);color:var(--lilac-ink);display:grid;place-items:center;font-size:.72rem;font-weight:700}
.answer{border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;min-height:3.2em}
.caret{display:inline-block;width:2px;height:1.1em;background:var(--ink);vertical-align:-.2em;margin-left:2px}
.cursor,.chipf{display:none;position:absolute;z-index:5;pointer-events:none}
.cursor{width:18px;height:22px;background:var(--ink);clip-path:polygon(0 0,0 100%,28% 76%,46% 100%,60% 94%,43% 70%,78% 70%);filter:drop-shadow(0 0 0 #fff)}
.chipf{background:var(--mint);color:var(--mint-ink);font-weight:700;font-size:.72rem;border-radius:8px;padding:8px 10px;box-shadow:0 10px 18px -10px rgba(0,0,0,.45)}

/* scenes (S5 to S7). Only with motion allowed; every animation ends on the rest state above. */
@media(prefers-reduced-motion:no-preference){
  /* 1: cursor carries the file into the drop zone, the zone fills, facts follow */
  #scr1.run .cursor{display:block;animation:cur1 1.5s cubic-bezier(.33,1,.68,1) .35s both}
  #scr1.run .chipf{display:block;animation:chip1 1.5s cubic-bezier(.33,1,.68,1) .35s both}
  @keyframes cur1{0%{left:86%;top:86%;opacity:0}12%{opacity:1}62%{left:52%;top:30%}72%{left:52%;top:30%;transform:scale(.85)}82%{transform:scale(1)}100%{left:58%;top:40%;opacity:0}}
  @keyframes chip1{0%{left:80%;top:80%;opacity:0}12%{opacity:1}62%{left:46%;top:24%;opacity:1}74%{left:46%;top:24%;opacity:0}100%{left:46%;top:24%;opacity:0}}
  .scr.run .drop{animation:dropOn .35s ease-out 1.3s both}
  .scr.run .drop-done{animation:fadeUp .4s cubic-bezier(.33,1,.68,1) 1.35s both}
  @keyframes dropOn{from{background:var(--soft);border-color:var(--field-line)}}
  .scr.run .facts li{animation:nudge .5s cubic-bezier(.33,1,.68,1) both}
  .scr.run .facts li:nth-child(1){animation-delay:1.55s}.scr.run .facts li:nth-child(2){animation-delay:1.67s}.scr.run .facts li:nth-child(3){animation-delay:1.79s}
  /* 2: rows tick one after another, flags pop */
  .scr.run .health .tk{animation:tick .35s cubic-bezier(.33,1,.68,1) both}
  .scr.run .health li:nth-child(1) .tk{animation-delay:.45s}.scr.run .health li:nth-child(2) .tk{animation-delay:.63s}.scr.run .health li:nth-child(3) .tk{animation-delay:.81s}
  .scr.run .health li:nth-child(4) .tk{animation-delay:.99s}.scr.run .health li:nth-child(5) .tk{animation-delay:1.17s}
  .scr.run .health em{animation:pop .4s cubic-bezier(.34,1.56,.64,1) both}
  .scr.run .health li:nth-child(3) em{animation-delay:.95s}.scr.run .health li:nth-child(4) em{animation-delay:1.13s}
  @keyframes tick{from{background:var(--bg);box-shadow:inset 0 0 0 1.5px var(--line);transform:scale(.6)}}
  /* 3: highlight and note after the digits settle (digits and typing run in app.js) */
  .scr.run tr.hl th,.scr.run tr.hl td{animation:hlOn .4s ease-out 1.5s both}
  @keyframes hlOn{from{background:transparent}}
  /* 4: the table card lands in the page, the slot pulses, the cursor clicks Unduh */
  .scr.run .doc-tab{animation:land .7s cubic-bezier(.16,1,.3,1) .3s both}
  @keyframes land{from{opacity:0;transform:translate(70px,-10px) rotate(3deg)}}
  .scr.run .slot{animation:pulse 1.4s ease-in-out 1s 2}
  #scr4.run .cursor{display:block;animation:cur4 1.6s cubic-bezier(.33,1,.68,1) .35s both}
  @keyframes cur4{0%{left:30%;top:60%;opacity:0}15%{opacity:1}65%{left:84%;top:80%}75%{left:84%;top:80%;transform:scale(.85)}85%{transform:scale(1)}100%{left:84%;top:80%;opacity:0}}
  .scr.run .dl{animation:press .5s ease-out 1.65s both}
  @keyframes press{40%{transform:scale(.94);box-shadow:0 0 0 6px var(--tint)}}
  /* 5: question pops, outline points appear (answer typing runs in app.js) */
  .scr.run .q{animation:pop .5s cubic-bezier(.34,1.56,.64,1) .25s both}
  .scr.run .outline li{animation:nudge .5s cubic-bezier(.33,1,.68,1) both}
  .scr.run .outline li:nth-child(1){animation-delay:.6s}.scr.run .outline li:nth-child(2){animation-delay:.75s}.scr.run .outline li:nth-child(3){animation-delay:.9s}
  .caret{animation:blink 1s steps(1) infinite}
  @keyframes nudge{from{opacity:0;transform:translateX(-10px)}}
  @keyframes fadeUp{from{opacity:0;transform:translateY(8px)}}
  @keyframes pop{from{opacity:0;transform:scale(.92)}}
  @keyframes pulse{50%{transform:scale(1.025)}}
  @keyframes blink{50%{opacity:0}}
}
/* scene 1 starting picture: an empty drop zone (only while the scene runs) */
@media(prefers-reduced-motion:no-preference){.scr.run .drop-empty{display:block;position:absolute;animation:fadeOut .2s linear 1.3s both}@keyframes fadeOut{to{opacity:0}}}

/* marquee of majors (M1): 70 s per loop, linear; static wrap when motion is reduced */
.marquee{overflow:hidden;display:flex;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);flex:1;min-width:0}
.mq-row{display:flex;gap:8px;padding-right:8px;flex:none}
.mq-row li{border:1px solid var(--line);border-radius:999px;padding:5px 14px;font-size:.9rem;background:var(--bg);white-space:nowrap}
@media(prefers-reduced-motion:no-preference){.mq-row{animation:mq 70s linear infinite}@keyframes mq{to{transform:translateX(-100%)}}}
@media(prefers-reduced-motion:reduce){.marquee{-webkit-mask-image:none;mask-image:none}.mq-row{flex-wrap:wrap}.mq-row[aria-hidden]{display:none}}


/* demo embed slot (hidden until app.js finds data-src) */
.demo-slot{margin-top:clamp(28px,4vw,48px);border-radius:var(--r);background:var(--ink);color:var(--on);aspect-ratio:16/9;max-height:560px;width:100%;display:grid;place-items:center;overflow:hidden;position:relative;background-size:cover;background-position:center}
.demo-slot video,.demo-slot iframe{width:100%;height:100%;border:0;display:block}
.demo-poster{display:flex;gap:16px;align-items:center;padding:20px}
.play{flex:none;width:56px;height:56px;border-radius:50%;background:var(--accent);position:relative}
.play::after{content:"";position:absolute;left:22px;top:17px;border-left:16px solid var(--ink);border-top:11px solid transparent;border-bottom:11px solid transparent}
button.demo-poster{appearance:none;border:0;background:rgba(30,32,42,.35);color:inherit;font:inherit;text-align:left;cursor:pointer;width:100%;height:100%;justify-content:center}

/* numbers: three visual tiles */
.pillars{display:grid;gap:16px;margin-top:clamp(28px,3.5vw,40px);grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.pillars .card{display:grid;gap:6px;align-content:start}.pillars p{color:var(--muted)}
.viz{height:96px;border-radius:var(--rs);background:var(--soft);margin-bottom:8px;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;font-size:.82rem}
.twice span{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:6px 10px;color:var(--muted);display:grid;text-align:center}
.twice b{font-family:var(--fd);font-weight:600;color:var(--ink);font-size:1rem}
.twice em{font-style:normal;background:var(--mint);color:var(--mint-ink);font-weight:600;border-radius:999px;padding:3px 10px}
.cell span{width:44px;height:40px;border-radius:9px;background:var(--bg);border:1px solid var(--line);display:grid;place-items:center;font-weight:600;position:relative}
.cell .flag{background:var(--peach);border-color:var(--peach-ink);color:var(--peach-ink)}
.cell .flag i{position:absolute;top:-22px;left:50%;transform:translateX(-50%);font-style:normal;font-size:.68rem;background:var(--peach-ink);color:var(--on);border-radius:999px;padding:1px 8px;white-space:nowrap}
.say{justify-content:flex-start}.say p{background:var(--sky);color:var(--ink);border-radius:14px 14px 14px 4px;padding:8px 12px;max-width:100%;line-height:1.4}

/* analyses */
/* phones: pills that keep each name on one line; wider: a 4 x 2 grid of tiles */
.tests{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(28px,3.5vw,40px)}
.tests li{background:var(--sky);color:var(--sky-ink);border-radius:999px;padding:8px 14px 8px 8px;font-weight:600;display:flex;align-items:center;gap:8px;line-height:1.3;white-space:nowrap}
@media(min-width:760px){.tests{display:grid;gap:16px;grid-template-columns:repeat(4,minmax(0,1fr))}.tests li{border-radius:14px;padding:16px 18px;min-height:62px}}
.tests li::before{content:"✓";flex:none;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.75);display:grid;place-items:center;font-size:.8rem}
.soon{margin-top:14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:var(--muted)}
.fit{margin-top:clamp(32px,4vw,48px);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fit .k{font-size:.86rem;font-weight:600}
.fit-chips{display:flex;flex-wrap:wrap;gap:6px}.fit-chips li{border:1px solid var(--line);border-radius:999px;padding:4px 12px;font-size:.88rem;background:var(--bg)}

/* two-column sections */
.two{display:grid;gap:clamp(20px,4vw,48px);grid-template-columns:minmax(0,1fr)}
@media(min-width:880px){.two{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center}}
.does{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.does li{display:flex;align-items:center;gap:12px;background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:12px 14px;font-weight:500}
.ico{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-family:var(--fd);font-weight:600}
.mascot-side{width:clamp(120px,20vw,180px);margin-top:16px}
.two.form-two{align-items:start}
@media(max-width:879px){.form-two .mascot-side{display:none}}
.plain{display:grid;gap:8px;color:var(--ink)}.plain li{padding-left:1.6em;position:relative}
.plain li::before{content:"✓";position:absolute;left:0;color:var(--good);font-weight:700}

/* Perintis boarding pass (rest state: plane at Paham, stamp on) */
.pass{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 190px;background:var(--bg);border:1px solid var(--line);border-radius:20px;box-shadow:0 18px 15.5px rgba(10,13,21,.05),0 30px 60px -40px rgba(30,32,42,.4)}
.pass-main{padding:clamp(18px,2.6vw,26px);display:grid;gap:16px;min-width:0}
.pass-top{display:flex;justify-content:space-between;align-items:center;font-size:.78rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.pass-brand{font:600 1.05rem var(--fd);letter-spacing:-.02em;text-transform:none;color:var(--ink)}.pass-brand b{color:var(--primary);font-weight:600}
.pass-route{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px}
.pass-route small{display:block;font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.pass-route b{font:600 clamp(1.5rem,1.2rem + 1.2vw,2rem) var(--fd);letter-spacing:-.03em}
.pass-route .to{text-align:right}.pass-route .to b{color:var(--accent-text)}
.route{position:relative;height:28px}
.route .dash{position:absolute;left:0;right:0;top:50%;border-top:2px dashed var(--field-line)}
.route .plane{position:absolute;top:50%;left:100%;width:26px;height:26px;transform:translate(-100%,-50%) rotate(90deg);fill:var(--primary)}
.pass-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0;padding:12px 0;border-block:1px solid var(--line)}
.pass-meta dd{white-space:nowrap}
.pass-meta dt{font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}.pass-meta dd{margin:2px 0 0;font-weight:600}
.pass-stub{position:relative;border-left:2px dashed var(--line);padding:22px 18px;display:grid;gap:22px;align-content:center;justify-items:center;text-align:center;background:var(--soft);border-radius:0 20px 20px 0}
.pass-stub::before,.pass-stub::after{content:"";position:absolute;left:-12px;width:22px;height:22px;border-radius:50%;background:var(--bg);border:1px solid var(--line)}
.pass-stub::before{top:-12px}.pass-stub::after{bottom:-12px}
.pass-stub .btn{width:100%;padding:0 12px;font-size:.92rem}
.stamp{display:inline-block;font:700 1rem var(--fd);letter-spacing:.14em;color:var(--accent-text);border:3px solid var(--accent-text);border-radius:10px;padding:6px 12px;transform:rotate(-10deg);margin-top:8px;mix-blend-mode:multiply}
.barcode{display:block;width:100%;height:40px;background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 4px,var(--ink) 4px 5px,transparent 5px 9px,var(--ink) 9px 12px,transparent 12px 14px);opacity:.8;border-radius:2px}
@media(max-width:600px){
  .pass{grid-template-columns:minmax(0,1fr)}
  .pass-stub{border-left:0;border-top:2px dashed var(--line);border-radius:0 0 20px 20px;grid-template-columns:auto minmax(0,1fr);align-items:center}
  .pass-stub::before,.pass-stub::after{top:-12px;left:auto}.pass-stub::before{left:-12px}.pass-stub::after{right:-12px;bottom:auto}
  .pass-stub .barcode{grid-column:1/-1;height:28px}.stamp{margin:0}
  .pass-meta{grid-template-columns:repeat(2,minmax(0,1fr))}.pass-meta div:last-child{grid-column:1/-1}
}
/* ===== scroll-scrubbed sections (Rafsi's picks K2 and P2, 4 Nov) =====
   Base = the finished picture (no JS, reduced motion). .scrub (app.js) pins the stage and lets the scroll drive it, both ways. */
.scrub .pin-track{position:relative}
.scrub .pin-stage{position:sticky;top:60px;min-height:calc(100vh - 60px);display:flex;align-items:center}
.scrub .pin-stage>.wrap{flex:1}
.help-sec.scrub,.perintis-sec.scrub{padding-block:0}
.help-sec.scrub .pin-track{height:230vh}
.perintis-sec.scrub .pin-track{height:210vh}

/* K2: the pile and StatPilot's column */
.hand{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,28px);margin-top:clamp(28px,3.5vw,40px)}
.box{border-radius:20px;padding:20px;min-height:330px;display:grid;align-content:start;gap:10px;position:relative}
.box-h{font:600 1.05rem var(--fd);letter-spacing:-.01em;display:flex;align-items:center;gap:10px}
.box.mess{background:var(--peach);color:var(--peach-ink)}
.box.help{background:var(--bg);border:1px solid var(--line)}
.count{font:600 .95rem var(--fd);color:var(--primary);margin-left:auto}
.tasks{display:grid;gap:10px}
.task{display:flex;align-items:center;gap:12px;background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:12px 14px;min-height:54px;font-weight:500;color:var(--ink)}
.task .tk{width:22px;height:22px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--good);border:1.5px solid var(--good);color:#fff;font-size:.75rem;transition:background-color .2s,border-color .2s}
.task .tk::after{content:"✓"}
.lega{position:absolute;inset:56px 24px 24px;display:grid;place-content:center;text-align:center;font:600 clamp(1.5rem,1.15rem + 1.3vw,2.1rem)/1.25 var(--fd);letter-spacing:-.02em;color:var(--peach-ink);text-wrap:balance;max-width:13em;margin-inline:auto}
.scrub .tasks{min-height:calc(4 * 54px + 3 * 10px)}
.scrub .task{position:absolute;left:0;top:0;will-change:transform;box-shadow:0 10px 22px -16px rgba(30,32,42,.5)}
.scrub .task:not(.moved) .tk{background:var(--bg);border-color:var(--field-line)}
.scrub .task:not(.moved) .tk::after{content:none}
.scrub .lega{opacity:0;transform:scale(.85);transition:opacity .35s ease-out,transform .5s cubic-bezier(.34,1.56,.64,1)}
.scrub .mess.clear .lega{opacity:1;transform:none}
@media(max-width:759px){.hand{grid-template-columns:minmax(0,1fr)}.box{min-height:290px}.help-sec.scrub .pin-track{height:260vh}.scrub .pin-stage{align-items:flex-start;padding-top:16px}}

/* P2: printer slot and paper */
.printer{width:100%;max-width:620px;justify-self:center}
.slotbar{height:30px;background:var(--ink);border-radius:14px;position:relative;z-index:2;display:flex;align-items:center;justify-content:center;color:#fff;font:600 .78rem var(--fd);letter-spacing:.08em}
.paper{overflow:hidden;margin:-12px 14px 0;position:relative;z-index:1;padding-bottom:28px}
.paper .pass{border-radius:0 0 20px 20px}
.scrub .paper .pass{transform:translateY(calc(-100% + var(--print,1) * 100%))}
.unstamped .stamp{display:none}
.scrub .stamp{opacity:var(--stamp,1);transform:scale(calc(2.4 - 1.4 * var(--stamp,1))) rotate(calc(-22deg + 12deg * var(--stamp,1)))}
@media(max-width:759px){.perintis-sec.scrub .two{gap:16px}.perintis-sec.scrub .two .sub{display:none}.perintis-sec.scrub .pin-stage{align-items:flex-start;padding-top:12px}}

.scrub .box.help,.scrub .tasks{position:static}

/* faq */
.topics{display:flex;gap:6px;flex-wrap:wrap;margin:20px 0 14px}
.topics button{appearance:none;border:1.5px solid var(--line);background:var(--bg);color:var(--ink);border-radius:999px;min-height:42px;padding:0 18px;font:600 .94rem var(--fb);cursor:pointer;transition:background-color .15s,border-color .15s,color .15s}
.topics button:hover{border-color:var(--primary)}
@media(max-width:520px){.topics{flex-wrap:nowrap;gap:4px}.topics button{flex:1;padding:0 6px}}
.topics button[aria-selected="true"]{background:var(--primary);border-color:var(--primary);color:var(--on)}
.qa{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));margin-top:20px}
.topic-h{grid-column:1/-1;font-size:1rem;color:var(--primary)}
.tabbed .qa{margin-top:0}.tabbed .topic-h{display:none}
.qa-card{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:18px}
.qa-card .q{font-weight:600}.qa-card .a{color:var(--muted);margin-top:6px}
@media(prefers-reduced-motion:no-preference){.tabbed .qa:not([hidden]) .qa-card{animation:rise .35s var(--ease) both}.tabbed .qa:not([hidden]) .qa-card+.qa-card{animation-delay:.05s}}
details{background:var(--bg);border:1px solid var(--line);border-radius:var(--rs);padding:0 18px}
summary{cursor:pointer;min-height:54px;display:flex;align-items:center;gap:12px;font-weight:600;list-style:none;padding:12px 0}
summary::-webkit-details-marker{display:none}summary::after{content:"+";margin-left:auto;font-size:1.4rem;color:var(--primary);transition:transform .2s;flex:none}
details[open] summary::after{transform:rotate(45deg)}details p{padding:0 0 16px;color:var(--muted)}

/* form */
.form{display:grid;gap:16px}
.field{display:grid;gap:6px;border:0;padding:0;min-width:0}
.field>label,legend{font-weight:600}
legend{padding:0;margin-bottom:2px}
.opt{font-weight:400;color:var(--muted)}
.help{font-size:.86rem;color:var(--muted)}
input[type=email],input[type=text],input[type=tel],select,textarea{width:100%;min-height:50px;padding:10px 14px;border:1.5px solid var(--field-line);border-radius:12px;background:var(--bg);color:var(--ink);font:400 1rem var(--fb)}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 20px) 52%,calc(100% - 14px) 52%;background-size:6px 6px;background-repeat:no-repeat;padding-right:40px}
input:focus,select:focus,textarea:focus{border-color:var(--primary);outline:3px solid var(--tint);outline-offset:0}
input[readonly],textarea[readonly]{background:var(--soft)}
textarea{resize:vertical;line-height:1.5}
.field.bad input,.field.bad select{border-color:var(--warn)}
.err{color:var(--warn);font-size:.88rem;font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;display:inline-flex}
.chip input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.chip span{display:inline-flex;align-items:center;min-height:42px;padding:8px 14px;border:1.5px solid var(--line);border-radius:999px;font-size:.92rem;font-weight:500;background:var(--bg);transition:border-color .15s,background-color .15s}
.chip input:checked+span{border-color:var(--primary);background:var(--tint);color:var(--primary-deep);font-weight:600}
.chip input:checked+span::before{content:"✓";margin-right:6px}
.chip input:focus-visible+span{outline:3px solid var(--primary);outline-offset:2px}
#w-an-other{margin-top:6px}
.status-note{background:var(--sun);color:var(--ink);border-radius:10px;padding:10px 12px;font-size:.9rem;margin-top:6px}
.check{grid-template-columns:24px minmax(0,1fr);align-items:start;column-gap:10px}
.check input{width:22px;height:22px;margin:2px 0 0;accent-color:var(--primary)}
.check label{font-weight:400;font-size:.94rem}
.check .err{grid-column:2}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-err{background:var(--warnbg);color:var(--warn);border-radius:12px;padding:12px 14px;font-weight:600}
.demo-banner{background:var(--sun);color:var(--ink);border-radius:12px;padding:12px 14px;margin-bottom:12px;font-size:.92rem}
.data-note{border:0;padding:0;background:none;text-align:center}
.data-note summary{min-height:40px;justify-content:center;font-weight:500;font-size:.88rem;color:var(--primary);padding:6px 0;text-decoration:underline;text-underline-offset:3px}
.data-note summary::after{content:none}
.data-note p{text-align:left;font-size:.88rem;background:var(--soft);border-radius:10px;padding:12px 14px}
.done{display:grid;gap:12px}.done:focus{outline:none}
.mas-done{width:110px}
.done label{font-weight:600;font-size:.92rem;margin-top:4px}
.copyrow{display:flex;gap:8px}.copyrow input{flex:1;min-width:0}
.share-row{display:flex;gap:10px;flex-wrap:wrap}.share-row .btn{flex:1 1 auto}

/* footer */
.foot{padding-block:clamp(32px,5vw,56px) 32px;border-top:1px solid var(--line)}
.foot-in{display:grid;gap:8px;position:relative}
.foot a{color:inherit}.foot .wm{margin:0;justify-self:start}
.mas-foot{width:88px;position:absolute;right:var(--gut);top:0}
@media(max-width:560px){.mas-foot{width:72px}}