/* Shared shell: reset, base type, skip link, focus, buttons, header, bottom tab bar, footer, section rhythm. */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;accent-color:var(--orange);scrollbar-color:var(--teal) var(--night)}
::selection{background:var(--orange);color:var(--night)}
input,textarea{caret-color:var(--teal)}
.toolbar .input{caret-color:var(--orange)}
body{margin:0;font:400 var(--fs-body)/1.55 var(--font-body);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3{font-family:var(--font-head);margin:0;letter-spacing:-.025em;text-wrap:balance}
p{margin:0}
a{color:inherit}
img,svg{display:block;max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-80px;display:inline-flex;align-items:center;min-height:44px;background:var(--orange);color:var(--night);padding:0 20px;border-radius:var(--r-pill);font-weight:700;text-decoration:none;z-index:20}
.skip:focus{top:12px}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}
main:focus{outline:none}
.pix{image-rendering:pixelated;shape-rendering:crispEdges}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;border-radius:var(--r-pill);font:700 1rem/1 var(--font-body);text-decoration:none;border:0;cursor:pointer;
  transition:transform var(--t-fast) var(--ease-out),background-color var(--t-fast) var(--ease-out)}
.btn-primary{background:var(--orange);color:var(--night)}
.btn-white{background:var(--paper);color:var(--night)}
.btn-dark{background:var(--night);color:var(--ink-inv)}
.btn-soft{background:var(--mint-tint);color:var(--ink)}
.btn-soft[aria-pressed="true"]{background:var(--rust-text);color:var(--paper)}
/* Hover lift only where a pointer can hover (no sticky hover on touch). The hard ledge snaps in like a sprite frame: box-shadow is never tweened. */
@media (hover:hover) and (pointer:fine){
  .btn:hover{transform:translateY(-2px)}
  .btn-primary:hover{box-shadow:0 8px 0 -2px var(--rust)}
  .btn-white:hover{box-shadow:0 8px 0 -2px var(--mint)}
  .btn-dark:hover{box-shadow:0 8px 0 -2px var(--teal)}
  .btn-soft:hover{box-shadow:0 8px 0 -2px var(--mint)}
}
.btn:active{transform:translateY(1px) scale(.98);transition-duration:var(--t-press)}
.btn-primary:active{background:var(--orange-press);box-shadow:0 2px 0 0 var(--rust)}
.btn-white:active{box-shadow:0 2px 0 0 var(--mint)}
.btn-dark:active{box-shadow:0 2px 0 0 var(--teal)}
.btn-soft:active{box-shadow:0 2px 0 0 var(--mint)}
.btn[aria-disabled="true"],.btn:disabled{background:var(--sold);color:var(--ink-2);cursor:not-allowed;transform:none;box-shadow:none}
.btn-sm{min-height:44px;padding:0 20px;font-size:.9375rem}

/* header (loop 7): full-bleed bar, brand at the left edge, Chat admin at the right edge */
.site-head{position:sticky;top:0;z-index:15;background:var(--head);box-shadow:0 4px 0 0 var(--head-edge)}
.head-row{display:flex;align-items:center;gap:clamp(16px,2.5vw,40px);min-height:76px;padding-inline:clamp(0.5rem,2vw,2rem)}
html{scroll-padding-top:calc(var(--head-h) + 12px)}
:target,[id]{scroll-margin-top:calc(var(--head-h) + 12px)}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink-inv);text-decoration:none;font:800 1.25rem/1 var(--font-head);letter-spacing:-.02em;min-height:44px;flex:none}
.zmark{width:36px;height:36px;overflow:visible}
.zmark .z{fill:var(--paper);stroke:var(--paper);stroke-width:2;stroke-linejoin:round;transform-box:fill-box;transform-origin:50% 50%;animation:zin var(--t-reveal) var(--ease-out) both}
.zmark .swoosh{fill:var(--gold);transform-origin:30% 76%;animation:flick var(--t-reveal) var(--t-fast) var(--ease-spring) 1 both}
.brand:focus-visible .zmark .swoosh{animation:flick2 520ms var(--ease-spring) 1}
@media (hover:hover) and (pointer:fine){.brand:hover .zmark .swoosh{animation:flick2 520ms var(--ease-spring) 1}}
/* footer mark: sits below the fold, so an entrance would play unseen; it stays still */
.foot .zmark .z,.foot .zmark .swoosh{animation:none;opacity:1;transform:none}
@keyframes zin{from{opacity:0;transform:translateY(8px) scale(.9)}to{opacity:1;transform:none}}
@keyframes flick{from{opacity:0;transform:translate(-14px,10px) scale(.6)}to{opacity:1;transform:none}}
@keyframes flick2{0%{transform:none}40%{transform:translate(4px,-4px) rotate(-4deg)}100%{transform:none}}
.nav{display:flex;align-items:center;gap:20px;flex:1 1 auto;min-width:0}
.nav ul{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.nav ul a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:var(--r-pill);color:var(--ink-inv-2);text-decoration:none;font-weight:600;font-size:1rem;white-space:nowrap;transition:color var(--t-fast) var(--ease-out),background-color var(--t-fast) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.nav ul a:hover{color:var(--ink-inv);text-decoration:underline;text-underline-offset:4px}}
.nav ul a[aria-current="page"]{color:var(--ink-inv);box-shadow:inset 0 -3px 0 var(--orange);border-radius:6px 6px 0 0}
.nav .head-cta{margin-left:auto;flex:none;white-space:nowrap}

/* account link (loop 12): static "Akun" entry, header only; icon-only when its box is narrow (em container) */
.head-acct{display:flex;justify-content:flex-end;flex:none;min-width:0}
.acct-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;min-width:44px;padding:0 12px;border-radius:var(--r-pill);color:var(--ink-inv);font:600 1rem/1 var(--font-body);text-decoration:none;white-space:nowrap;transition:background-color var(--t-fast) var(--ease-out)}
.acct-link .acct-ic{width:24px;height:24px;flex:none;transition:transform var(--t-fast) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.acct-link:hover{background:var(--night)}}
.acct-link:active .acct-ic{transform:translateY(1px)}
.acct-link:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.acct-link[aria-current]{box-shadow:inset 0 -3px 0 var(--orange);border-radius:6px 6px 0 0}
.head-acct{gap:8px;align-items:center}
@media (max-width:899px){.head-acct{gap:4px}}
.head-acct:has(.saved-link){gap:8px}
.acct-link .acct-lb{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start;vertical-align:middle}
/* nickname (loop 21): from 900px, with the sign-in hint, the label slot keeps a fixed width so "Akun saya" -> nickname swaps in place; phones: see the max-width:899px block (loop 27) */
@media (min-width:900px){.zy-hint .acct-lb{width:7.5em}}
/* Disimpan basket (loop 21): akun-game and apk-premium only; label first, icon last, badge pinned to the icon corner */
.saved-link{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:44px;min-width:44px;padding:0 14px 0 12px;border-radius:var(--r-pill);color:var(--ink-inv);font:600 1rem/1 var(--font-body);text-decoration:none;white-space:nowrap;transition:background-color var(--t-fast) var(--ease-out)}
.saved-link .saved-ic{width:24px;height:24px;flex:none;transition:transform var(--t-fast) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.saved-link:hover{background:var(--night)}}
.saved-link:active .saved-ic{transform:translateY(1px)}
.saved-link:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.saved-badge{position:absolute;top:auto;bottom:calc(50% + 12px);right:0;z-index:1;box-sizing:border-box;min-width:var(--badge-h);max-width:44px;height:var(--badge-h);padding:0 .25em;border-radius:var(--r-pill);border:2px solid var(--paper);background:var(--badge-red);color:var(--paper);display:inline-flex;align-items:center;justify-content:center;font:800 var(--badge-fs)/1 var(--font-body);font-variant-numeric:tabular-nums;letter-spacing:0;pointer-events:none}
.saved-badge[hidden]{display:none}
@media (prefers-reduced-motion:no-preference){
  .saved-badge.is-pop{animation:badgepop var(--t-fast) var(--ease-spring) 1}
}
@keyframes badgepop{from{transform:scale(.8)}to{transform:none}}
@media (max-width:899px){
  .head-row{container:hrow / inline-size}
  /* row too narrow for wordmark + basket + account: the word goes, the Z mark stays */
  @container hrow (max-width:15em){
    .site-head:has(.saved-link) .brand{font-size:0;gap:0}
  }
  .head-acct{flex:1 1 0;container:acct / inline-size}
  /* loop 27: label first, icon last (same as .saved-link), so the icon sits on the right gutter in every state. The label hugs its text
     (no fixed slot, no dead space next to the icon); the cap keeps the old 7.5em slot and never pushes past the container (cqw = .head-acct) */
  .acct-link .acct-lb{order:-1;max-width:min(7.5em,calc(100cqw - 56px))}
  .head-acct:has(.saved-link) .acct-link .acct-lb{max-width:min(7.5em,calc(100cqw - 108px))}
  @media (max-width:374px){.head-row:has(.saved-link){gap:8px}}
  @container acct (max-width:8.5em){
    .acct-link{padding-inline:10px;gap:0}
    .acct-link .acct-lb{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
  }
  /* named label is wider: icon-only below 11em; with the basket in the box icon-only below 13em; the label cap shrinks with the box (cqw) between 13em and 14em; the aria-label keeps the nickname */
  @container acct (max-width:11em){
    .zy-hint .acct-link{padding-inline:10px;gap:0}
    .zy-hint .acct-link .acct-lb{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
  }
  .saved-link{padding-inline:10px;gap:0}
  .saved-link .saved-lb{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
  /* basket in the box: signed out needs the 133px link + 8px gap + the 44px icon-only basket = 185px, so icon-only below 11.6em (was 8.5em, which let the label ellipsise at 320-359px).
     B4 (loop 27 iter 2): at 320-374px the row gap shrinks 16 -> 8px on basket pages so "Akun saya" stays visible from about 355px (360 and 390 included). */
  @container acct (max-width:11.6em){
    .head-acct:has(.saved-link) .acct-link{padding-inline:10px;gap:0}
    .head-acct:has(.saved-link) .acct-link .acct-lb{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
  }
  @container acct (max-width:13em){
    .zy-hint .head-acct:has(.saved-link) .acct-link{padding-inline:10px;gap:0}
    .zy-hint .head-acct:has(.saved-link) .acct-link .acct-lb{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
  }
}
@media (min-width:900px){
  .head-row{container:head / inline-size}
  /* tier 0 (loop 21): full row, only the two account labels go icon-only; names stay for screen readers */
  @container head (max-width:63em){
    .acct-link{padding-inline:10px;gap:0}
    .acct-link .acct-lb,.saved-link .saved-lb{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
    .saved-link{padding-inline:10px;gap:0}
  }
  @container head (max-width:46em){
    .head-row{gap:12px;flex-wrap:wrap;row-gap:4px}
    .saved-link{padding-inline:10px;gap:0}
    .saved-link .saved-lb{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
    .site-head .brand{font-size:0;gap:0}
    .nav{gap:8px;flex-wrap:wrap}
    .nav ul{flex-wrap:wrap;gap:0}
    .nav ul a{padding-inline:10px}
    .acct-link{padding-inline:10px;gap:0}
    .acct-link .acct-lb{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
  }
  /* tighter tier for root text ~200% at 900-999px: links + Chat admin stay on one row */
  @container head (max-width:30em){
    .nav{gap:4px;flex-wrap:nowrap}
    .nav ul{flex-wrap:nowrap}
    .nav ul a{padding-inline:6px;font-size:.9375rem}
    .nav .head-cta{padding-inline:12px}
    .head-row{gap:8px}
    .site-head:has(.saved-link) .nav ul a{padding-inline:4px}
    .site-head:has(.saved-link) .nav .head-cta{padding-inline:10px}
    .site-head:has(.saved-link) .nav{gap:8px}
  }
}
/* bottom tab bar: phones and small tablets only */
.tabbar{display:none}
@media (max-width:899px){
  .head-row{min-height:64px}
  .nav{display:none}
  .tabbar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:16;background:var(--head);box-shadow:0 -4px 0 0 var(--head-edge);padding-bottom:env(safe-area-inset-bottom,0px)}
  .tabbar ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));list-style:none;margin:0;padding:0}
  .tabbar li{display:flex;min-width:0;container:tab / inline-size;font-size:.8125rem}
  .tabbar a{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:60px;padding:6px 1px;min-width:0;color:var(--ink-inv-2);text-decoration:none;font:600 1em/1.15 var(--font-body);text-align:center;overflow-wrap:break-word;hyphens:manual;transition:color var(--t-fast) var(--ease-out)}
  .tabbar .tab-ic{width:24px;height:24px;flex:none;transition:transform var(--t-fast) var(--ease-out)}
  @media (hover:hover) and (pointer:fine){.tabbar a:hover{color:var(--ink-inv)}}
  .tabbar a:active .tab-ic{transform:translateY(1px)}
  .tabbar a[aria-current="page"]{color:var(--ink-inv);box-shadow:inset 0 3px 0 var(--orange)}
  .tabbar a:focus-visible{outline:3px solid var(--focus);outline-offset:-3px;border-radius:0}
  html{--bar-h:calc(var(--tab-h) + env(safe-area-inset-bottom,0px))}
  html body .foot{padding-bottom:calc(32px + var(--bar-h))}
  html{scroll-padding-bottom:calc(var(--bar-h) + 12px)}
}
@media (max-width:300px){
  .tabbar li{font-size:.75rem}
  .tabbar a{letter-spacing:-.045em;padding-inline:0;gap:2px;overflow-wrap:anywhere}
  .tabbar .tab-ic{width:20px;height:20px}
  .site-head .brand{font-size:0;gap:0}
  .btn{max-width:100%;white-space:normal;text-align:center;line-height:1.25;overflow-wrap:anywhere;padding-block:8px}
  .prose li,.prose p,h1,h2,h3{overflow-wrap:anywhere}
  html body .foot-grid{grid-template-columns:minmax(0,1fr)}
  html .field,html .check span,html .terms-line,html .err{overflow-wrap:anywhere;min-width:0}
  .foot .brand{max-width:100%;flex-wrap:wrap;overflow-wrap:normal;row-gap:4px}
}

@media (max-width:180px){
  .tabbar a{gap:0;padding:4px 0;min-height:52px}
  .tabbar a>span:not(.sr-only){position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
  .tabbar .tab-ic{width:24px;height:24px}
}

/* large text: a slot that is narrower than its widest word goes icon-only (container em follows root font-size) */
@media (width > 300px){
  @container tab (max-width:4.3em){
    .tabbar a{gap:0}
    .tabbar a>span:not(.sr-only){position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
    .tabbar .tab-ic{width:24px;height:24px}
  }
}
@media (max-width:300px){
  @container tab (max-width:3.85em){
    .tabbar a{gap:0}
    .tabbar a>span:not(.sr-only){position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
    .tabbar .tab-ic{width:24px;height:24px}
  }
}

/* safety net for large text sizes: long words wrap inside their box instead of widening the page */
h1,h2,h3,p,li,.help-links a{overflow-wrap:break-word}

.tel{display:inline-block;max-width:100%}
z-nb,.nb{white-space:nowrap}
/* when the page box is 12.5em (200px at normal text) or narrower, a nowrap word can be wider than its box: make it an atomic unit that only breaks (break-all keeps the trailing punctuation attached) when the box itself is narrower than the word.
   An em container query follows root font-size and browser text size (300px at 150%, 400px at 200%); an em media query would not. The container is named page, inline-size only, so fixed and sticky parts keep the viewport. */
body{container:page / inline-size}
@container page (max-width:12.5em){
  z-nb,.nb{display:inline-block;max-width:100%;white-space:normal;word-break:break-all;overflow-wrap:normal}
  .terms-line a .nb{text-decoration:underline}
}
@supports not (container-type:inline-size){
  @media (max-width:12.5em){z-nb,.nb{display:inline-block;max-width:100%;white-space:normal;word-break:break-all;overflow-wrap:normal}.terms-line a .nb{text-decoration:underline}}
}

/* section rhythm */
.sec{padding-block:var(--sec-pad)}
.sec-head{display:flex;align-items:flex-end;gap:20px;margin-bottom:clamp(32px,4vw,56px)}
.sec-head>div{min-width:0}
.sec-head h2{font-weight:800;font-size:var(--fs-h2);line-height:1.08}
.sec-head p{margin-top:12px;max-width:35em;font-size:var(--fs-legal)}
.sec-head .pix{width:56px;height:auto;flex:none}
.sec-head .btn{margin-left:auto;flex:none}
@media (max-width:700px){.sec-head{flex-wrap:wrap}.sec-head .btn{margin-left:0}}

/* night ground + pixel cloud edge */
.night{background:var(--night);color:var(--ink-inv);position:relative}
.night .edge{width:100%;height:auto;display:block;fill:var(--paper)}
.night .edge--mint{fill:var(--mint-tint)}
.night .edge--orange{fill:var(--orange-tint)}

/* footer */
.foot{position:relative;padding-block:clamp(56px,7vw,96px) 32px;background:var(--night);color:var(--ink-inv)}
.foot-stars{position:absolute;left:0;top:0;width:100%;height:56px;pointer-events:none}
.foot>.wrap{position:relative;container:foot / inline-size}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,.8fr));gap:40px}
.foot-grid>*{min-width:0}
.foot .brand{font-size:1.375rem}
.foot-about p{margin-top:16px;color:var(--ink-inv-2);max-width:29.28em}
.foot h2{font:700 1rem/1.3 var(--font-head);letter-spacing:-.01em;color:var(--ink-inv)}
.foot ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:2px}
.foot nav ul a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink-inv-2);text-decoration:none;transition:color var(--t-fast) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.foot nav ul a:hover{color:var(--ink-inv);text-decoration:underline;text-underline-offset:4px}}
.foot .social{display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:22px}
.social a{display:flex;align-items:center;gap:12px;min-height:48px;color:var(--ink-inv);text-decoration:none;font-weight:600}
.social .tx small{display:block;font-weight:500;font-size:.875rem;color:var(--ink-inv-2)}
.social .ic{width:44px;height:44px;border-radius:var(--r-tile);background:var(--night-2);display:grid;place-items:center;flex:none;transition:background-color var(--t-fast),transform var(--t-med) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.social a:hover .ic{background:var(--teal);transform:translateY(-2px)}}
.social a:active .ic{transform:translateY(1px);transition-duration:var(--t-press)}
.social .ic svg{width:22px;height:22px}
.foot .legal{margin-top:56px;padding-top:24px;border-top:2px solid var(--night-3);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:.875rem;color:var(--ink-inv-2)}
@media (max-width:900px){.foot-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.foot-about{grid-column:1/-1}}
@media (max-width:520px){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.foot nav ul a{overflow-wrap:break-word}}
@container foot (max-width:30em){
  html body .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  html body .foot-about{grid-column:1/-1}
}
@container foot (max-width:17em){
  html body .foot-grid{grid-template-columns:minmax(0,1fr)}
}


/* AC25 heading fit at <=300px (spec: DESIGN.md section 3 and 8) */
/* AC25 heading fit at <=300px CSS width (a 320-600 phone at 200% zoom). Append at the END of site/css/shell.css.
   Every selector is prefixed `html body` (+0,0,2) so it beats the page rule it overrides whatever file loads later.
   font-size = min(nominal, (100vw - 2x16px gutter - --hpad) / --hl)
   --hl  = longest word of that role in em (tracking included, measured 2026-10-19) x ~1.03, rounded up to .05
   --hpad = extra horizontal padding inside .wrap around that heading at <=300px (both sides together) */
@media (max-width:300px){
  html body :is(h1,h2,h3,summary){--hfit:calc((100vw - 32px - var(--hpad,0px)) / var(--hl,6))}

  /* layout at <=300: side columns stack, inner padding 16 (12 on the two tightest boxes) */
  html body .cta-card{padding:16px}
  html body :is(.contact-box,.panel-state){padding:16px}
  html body .apk-opt{padding:16px 12px}
  html body .zcard__body{padding-inline:16px}
  html body .step{display:block;padding:16px}
  html body .step-top{flex-direction:row;align-items:center;gap:12px;margin-bottom:12px}
  html body .tl-step{grid-template-columns:minmax(0,1fr);row-gap:12px}
  html body .tl-step:not(:last-child)::before{display:none}
  html body .tl-money{grid-column:1}
  html body .tl-body h3{margin-top:0}
  html body .faq summary{padding:44px 12px 12px}
  html body .faq summary::before,html body .faq summary::after{top:24px;right:12px}

  /* h1 */
  html body .hero h1{--hl:4.45;font-size:min(1.875rem,var(--hfit))}                    /* "Akunnya" 4.323 */
  html body .hero--video .hero-copy h1{--hl:4.65;font-size:min(2.125rem,var(--hfit))}  /* "premium" 4.481 */
  html body .pagehead h1{--hl:5.75;font-size:min(1.75rem,var(--hfit))}                 /* "Pertanyaan" 5.545 */
  html body .pagehead-world h1{--hl:5.3;font-size:min(1.875rem,var(--hfit))}           /* "langganan" 5.112 */
  /* h2 */
  html body :is(.sec-head,.why-head,.warn-grid,.proof,.no-sell,.sell-intro) h2{--hl:6;font-size:min(1.75rem,var(--hfit))} /* "bermasalah" 5.840 */
  html body .cta-card h2{--hpad:32px;--hl:3.4;font-size:min(1.75rem,var(--hfit))}      /* "mana?" 3.267 */
  html body .prose h2{--hl:6.35;font-size:min(1.5rem,var(--hfit))}                     /* "Pembayaran" 6.175 */
  html body .contact-box h2{--hpad:32px;--hl:4.45;font-size:min(1.25rem,var(--hfit))}  /* "Hubungi" 4.319 */
  /* h3 + FAQ summary */
  html body .step h3{--hpad:32px;--hl:5.85;font-size:min(1.125rem,var(--hfit))}        /* "Konfirmasi," 5.664 */
  html body .tl-body h3{--hl:5.55;font-size:min(1.25rem,var(--hfit))}                  /* "produknya" 5.366 */
  html body .panel-state h3{--hpad:32px;--hl:6.05;font-size:min(1.375rem,var(--hfit))} /* "JavaScript." (noscript) 5.79 */
  html body .apk-opt h3{--hpad:24px;--hl:7.25;font-size:min(1.125rem,var(--hfit))}     /* "pembeliannya" 7.034 */
  html body .faq summary{--hpad:24px;--hl:7.25;font-size:min(var(--fs-legal),var(--hfit))} /* "menanggung?" 7.024 */

  /* AC24: pagehead mascot drops below the copy so the lead keeps the full width */
  html body .pagehead-world,html body .pagehead-world.has-btn{grid-template-columns:minmax(0,1fr);grid-template-areas:"h1" "lead" "btn" "art"}
  html body .pagehead-world:not(.has-btn){grid-template-areas:"h1" "lead" "art"}
  html body .pagehead-world .band-art{grid-area:art;justify-self:start;width:84px;margin-top:16px}
  html body .terms-line a{max-width:100%;overflow-wrap:anywhere}
  /* AC24: break-word (not anywhere) for running text so a closing period never splits off its word */
  html body :is(p,li,.lead,.check span){overflow-wrap:break-word}
  html body main :is(div,section,article,ul,ol,li,p){min-width:0}
}

.btn{touch-action:manipulation}
.skip:not(:focus){width:1px;padding:0;overflow:hidden;white-space:nowrap;clip-path:inset(50%)}
.skip:focus{max-width:calc(100% - 24px);white-space:normal;outline:3px solid var(--night);outline-offset:3px;box-shadow:0 0 0 3px var(--paper)}
.social li{min-width:0;max-width:100%}
.social a{max-width:100%}
.social .tx{min-width:0;overflow-wrap:anywhere}
.foot .brand>span:not(.sr-only){min-width:0;overflow-wrap:anywhere}

@media (min-width:301px) and (max-width:899px){
  html body .hero--video .hero-copy h1{max-width:none;font-size:min(clamp(2.125rem,1.4rem + 2.6vw,3.25rem),calc((100vw - 32px) / 8.65))}
}

/* ---------- motion mechanics (spec: .zyro/design/pixel-motion-spec.md section 3) ---------- */
/* List reveal. hint.js sets html.zy-motion before first paint only when motion is allowed and JS runs; shell.js adds .is-in once per group. */
html.zy-motion [data-reveal]:not(.is-in)>*{opacity:0}
html.zy-motion [data-reveal]:not(.is-in)>*:nth-child(n+7){opacity:1}
@media print{[data-reveal]>*{opacity:1 !important}}

/* Loops stop when their section is off screen (.is-off, shell.js) and when the tab is hidden (html.zy-hidden). */
[data-pause].is-off,[data-pause].is-off *,svg.vm.is-off,svg.vm.is-off *{animation-play-state:paused !important}
html.zy-hidden,html.zy-hidden *{animation-play-state:paused !important}

/* Pixel sky: twinkling stars and one drifting cloud move in steps(n) on a 2px grid (pixel-motion-spec 4.1 and 5).
   Shared by the hero world (world.css) and the .sky-live strips on faq, syarat, privasi, akun-saya, jadi-penjual, masuk. */
.tw{animation:tw 3.2s steps(3,jump-none) infinite alternate}
.tw2{animation-delay:-1.1s;animation-duration:4s}.tw3{animation-delay:-2.2s;animation-duration:2.6s}
@keyframes tw{from{opacity:.2}to{opacity:1}}
@keyframes skel{from{opacity:1}to{opacity:.55}}
@keyframes drift-s{from{transform:translateX(-96px)}to{transform:translateX(1440px)}}
.sky-live{position:relative;height:2.5rem;overflow:hidden;pointer-events:none;color:var(--ink-inv)}
.sky-live svg{display:block;width:100%;height:100%}
.sky-live .cl{animation:drift-s 90s steps(768,jump-end) infinite}

/* ---------- reduced motion: one blanket rule (keep it LAST in this file) ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
  .bag-run{display:none}
  .sky-live .cl{transform:translateX(640px)}
  .vm--deposit .vm-bag{opacity:0}
}

/* Text link that ends a list item on its own: DESIGN 8 tap target (12px + 21px line + 12px = 45px). */
.link-solo{display:inline-block;padding-block:12px}