@font-face{font-family:"Nunito";font-style:normal;font-weight:400 900;font-display:swap;src:url(/fonts/nunito-latin.woff2) format("woff2")}

/* Layout: colour chapters. Every section is one flat brand field, butted edge to edge, one 12-col grid and one pair of margins. */
:root{
  --navy:#1E2A4A; --navy-deep:#16213E; --navy-2:#2C3C66; --navy-3:#3F5384; --navy-4:#51679C;
  --gold:#FFBD17; --gold-soft:#FFF0C4; --paper:#FBF8F1; --paper-2:#F1ECDF; --white:#FFFFFF;
  --ink:#15171D; --muted:#4A5260; --chalk:#AEB8D3;
  --teal:#14A38B; --teal-soft:#C9EDE5; --blue:#3B5BA5; --blue-soft:#D9E2F5; --dot:#D8D0BD;
  --font:"Nunito", "Arial Rounded MT Bold", ui-rounded, system-ui, sans-serif;
  --step-small:clamp(0.8125rem,0.79rem + 0.1vw,0.875rem);
  --step-body:clamp(1.0625rem,1rem + 0.25vw,1.1875rem);
  --step-lead:clamp(1.25rem,1.1rem + 0.7vw,1.625rem);
  --step-title:clamp(1.75rem,1.2rem + 1.2vw,2.5rem);
  --step-head:clamp(2rem,1.3rem + 3.2vw,4rem);
  --step-display:clamp(3.25rem,1rem + 8vw,8.75rem);
  --m:clamp(16px,2.4vw,32px);
  --ease:cubic-bezier(.2,.7,.1,1);
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0}
[hidden]{display:none!important}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--font);font-size:var(--step-body);line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3,p,ol,ul,figure{margin:0}
ol,ul{padding:0;list-style:none}
a{color:inherit}
img{display:block;max-width:100%}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.wrap{padding-left:max(var(--m),env(safe-area-inset-left,0px));padding-right:max(var(--m),env(safe-area-inset-right,0px))}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
h1,h2,h3{text-wrap:balance;font-weight:900;letter-spacing:-0.035em;line-height:.95}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:52px;padding:0 1.6em;border:0;border-radius:999px;background:var(--gold);color:var(--navy-deep);font:800 var(--step-body)/1 var(--font);text-decoration:none;cursor:pointer;transition:transform .18s var(--ease),background-color .18s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(1px) scale(.98)}
.btn.dark{background:var(--navy-deep);color:var(--paper)}
.btn.light{background:var(--paper);color:var(--navy-deep)}

/* ---------- Hero: mosaic masthead, title on axis ---------- */
.hero{background:var(--paper)}
.band{height:clamp(360px,52svh,560px);display:grid;grid-template-rows:56px 1fr}
.bar{display:flex;align-items:stretch}
.mark{display:flex;align-items:center;gap:10px;background:var(--navy-deep);color:var(--paper);padding:0 18px 0 max(var(--m),env(safe-area-inset-left,0px));font-weight:900;font-size:var(--step-body);letter-spacing:-0.01em;text-decoration:none;white-space:nowrap}
.mark img{width:34px;height:34px}
.tab{flex:0 0 auto;width:calc(42% - 210px);min-width:max-content;display:flex;align-items:center;gap:28px;background:var(--gold);padding:0 24px}
.tab a{font-weight:800;text-decoration:none;color:var(--navy-deep);position:relative}
.tab a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:3px;background:var(--navy-deep);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.tab a:hover::after{transform:scaleX(1)}
.bar .act{margin-left:auto;display:flex;align-items:center;padding-right:max(var(--m),env(safe-area-inset-right,0px));padding-left:16px}
.bar .act .btn{min-height:44px;padding:0 1.3em}
.mosaic{display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:1fr 1fr;overflow:hidden}
.mosaic > *{position:relative;overflow:hidden;min-width:0}
.mosaic img.ph{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);animation:drift 22s ease-in-out infinite alternate}
.mosaic .w2{grid-column:span 2}
.mosaic .h2{grid-row:span 2}
.t-gold{background:var(--gold)} .t-navy{background:var(--navy)} .t-teal{background:var(--teal)} .t-blue{background:var(--blue)} .t-deep{background:var(--navy-deep)}
.mosaic .leo{position:absolute;left:50%;bottom:0;width:88%;max-width:280px;height:auto;transform:translateX(-50%);filter:none;animation:none}
.mosaic figcaption{position:absolute;left:10px;bottom:8px;font-size:var(--step-small);font-weight:600;color:var(--white);background:rgba(10,14,28,.62);padding:2px 8px;border-radius:999px}
@keyframes drift{from{transform:scale(1.02)}to{transform:scale(1.1) translate(-1.5%,-1%)}}
.head{display:grid;grid-template-columns:40% 1fr;align-items:end;gap:24px;padding-block:clamp(48px,7vw,104px) clamp(56px,7vw,112px)}
.head .lede{display:grid;gap:28px;align-self:end;max-width:30ch;font-size:var(--step-lead);line-height:1.35;font-weight:600}
.head .lede strong{font-weight:900}
.head h1{font-size:clamp(3rem,1rem + 6.4vw,7.25rem);letter-spacing:-0.05em;line-height:.9;color:var(--navy-deep)}
.mask{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.mask > span{display:block}
.js .mask > span{animation:rise 900ms var(--ease) both}
.js .mask:nth-child(2) > span{animation-delay:110ms}
.js .head .lede{animation:fade 600ms 520ms var(--ease) both}
@keyframes rise{from{transform:translateY(105%)}to{transform:none}}
@keyframes fade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---------- Calculator: the commission as a soal cerita on the chalkboard ---------- */
.board{background:var(--navy-deep);color:var(--paper);--disc:var(--gold);--disc-ink:var(--navy-deep)}
.board[data-pkg="satu"]{--disc:var(--teal);--disc-ink:var(--ink)}
.board[data-pkg="rajin"]{--disc:var(--paper);--disc-ink:var(--navy-deep)}
.board[data-pkg="super"]{--disc:var(--blue);--disc-ink:var(--white)}
.board .grid{display:grid;grid-template-columns:repeat(12,1fr);gap:0 24px;min-height:min(100svh,920px);padding-block:clamp(72px,9vw,140px);align-items:center}
.board .pick{grid-column:1 / span 4;align-self:end;display:grid;gap:28px}
.board h2{font-size:var(--step-head);color:var(--chalk);letter-spacing:-0.03em;line-height:1.05}
.pkgs{display:grid;gap:4px}
.pkgs label{display:flex;align-items:baseline;gap:14px;font-size:var(--step-head);font-weight:900;letter-spacing:-0.03em;line-height:1.1;color:var(--chalk);cursor:pointer;transition:color .2s,transform .25s var(--ease)}
.pkgs label small{font-size:var(--step-body);font-weight:600;letter-spacing:0}
.pkgs label:hover{color:var(--paper);transform:translateX(6px)}
.pkgs input{position:absolute;opacity:0;pointer-events:none}
.pkgs input:checked + label{color:var(--gold)}
.pkgs input:focus-visible + label{outline:3px solid var(--gold);outline-offset:4px;border-radius:6px}
.count{display:grid;gap:10px;font-size:var(--step-body);font-weight:600}
.count .row{display:flex;align-items:center;gap:12px}
.step{width:48px;height:48px;border-radius:50%;border:0;background:var(--navy-2);color:var(--paper);font:900 1.5rem/1 var(--font);cursor:pointer;transition:background-color .15s,transform .15s}
.step:hover{background:var(--navy-3)}
.step:active{transform:scale(.92)}
.count output{min-width:3ch;text-align:center;font-size:var(--step-lead);font-weight:900;font-variant-numeric:tabular-nums}
.count input[type=range]{width:100%;accent-color:var(--gold);height:28px}
.disc-wrap{grid-column:5 / span 5;display:grid;place-items:center;position:relative}
.disc{width:min(64vh,100%,600px);aspect-ratio:1;border-radius:50%;background:var(--disc);color:var(--disc-ink);display:grid;place-content:center;text-align:center;gap:6px;padding:12%;transition:background-color .3s,color .3s}
.disc .amt{font-size:var(--step-head);font-weight:900;letter-spacing:-0.045em;line-height:1;font-variant-numeric:tabular-nums}
.disc .per{font-size:var(--step-lead);font-weight:800}
.disc .how{font-size:var(--step-body);font-weight:600;font-variant-numeric:tabular-nums}
.disc.pop{animation:pop .4s var(--ease)}
@keyframes pop{0%{transform:scale(.97)}60%{transform:scale(1.015)}100%{transform:none}}
.soal{grid-column:10 / span 3;align-self:center;display:grid;gap:18px;font-size:var(--step-body);line-height:1.5}
.soal p:first-child{font-weight:600}
.soal .ans{color:var(--gold);font-weight:800}
.soal .note{font-size:var(--step-small);color:var(--chalk)}

/* ---------- Statements on colour fields ---------- */
.field{min-height:min(76svh,720px);display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:auto 1fr auto;gap:0 24px;padding-block:clamp(40px,5vw,72px) clamp(28px,3vw,44px)}
.field p{grid-column:8 / span 4;grid-row:1;max-width:30ch;font-size:var(--step-lead);line-height:1.4;font-weight:600}
.field h2{grid-column:1 / -1;grid-row:3;font-size:var(--step-display);letter-spacing:-0.055em;line-height:.88}
.field.mirror p{grid-column:2 / span 4}
.field.mirror h2{text-align:right}
.f-gold{background:var(--gold);color:var(--navy-deep)}
.f-teal{background:var(--teal);color:var(--ink)}
.f-blue{background:var(--blue);color:var(--white)}

/* ---------- How it works: accordion of tinted panels ---------- */
.how-sec{background:var(--paper);padding-block:clamp(96px,11vw,180px)}
.how-intro{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:end;margin-bottom:64px}
.how-intro h2{grid-column:1 / span 5;font-size:var(--step-head);color:var(--navy-deep)}
.how-intro p{grid-column:7 / span 5;font-size:var(--step-lead);line-height:1.4;max-width:40ch}
.steps{display:flex;height:540px;color:var(--paper)}
.steps > li{flex:0 0 10.5%;position:relative;overflow:hidden;transition:flex-basis .45s var(--ease);min-width:0}
.steps > li.open{flex-basis:58%}
.steps > li:nth-child(1){background:var(--navy-deep)} .steps > li:nth-child(2){background:var(--navy)} .steps > li:nth-child(3){background:var(--navy-2)} .steps > li:nth-child(4){background:var(--navy-3)} .steps > li:nth-child(5){background:var(--navy-4)}
.steps h3{margin:0}
.steps .tab-btn{all:unset;box-sizing:border-box;position:absolute;inset:0;cursor:pointer;display:flex;align-items:flex-end;padding:24px 20px}
.steps .tab-btn span{writing-mode:vertical-rl;transform:rotate(180deg);font-size:var(--step-body);font-weight:900;letter-spacing:-0.01em;white-space:nowrap;transition:transform .2s}
.steps .tab-btn:hover span{transform:rotate(180deg) translateY(6px)}
.steps .tab-btn:focus-visible{outline:3px solid var(--gold);outline-offset:-6px}
.steps li.open .tab-btn{position:static;cursor:default;padding:32px 32px 0;align-items:flex-start}
.steps li.open .tab-btn span{writing-mode:horizontal-tb;transform:none;font-size:var(--step-title);letter-spacing:-0.03em}
.steps .body{display:none}
.steps li.open .body{display:grid;grid-template-columns:1fr 1fr;gap:24px;position:absolute;inset:96px 32px 32px 32px;align-items:end}
.steps .body p{max-width:36ch;font-size:var(--step-body);line-height:1.5}
.steps .body .pic{align-self:stretch;min-height:0;display:grid;place-items:center}
.steps .body .pic img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.js .steps li.open .body > *{animation:fade .5s .15s var(--ease) both}
.steps .body .pic + p{order:-1}
/* drawn fragments inside the steps */
.qr{width:min(100%,240px);background:var(--white);border-radius:18px;padding:18px;display:grid;gap:10px;color:var(--ink);text-align:center;font-size:var(--step-small);font-weight:700}
.qr svg{width:100%;height:auto}
.saldo{width:min(100%,300px);background:var(--paper);color:var(--ink);border-radius:18px;padding:22px;display:grid;gap:4px}
.saldo .k{font-size:var(--step-small);font-weight:700;color:var(--muted)}
.saldo .v{font-size:var(--step-title);font-weight:900;letter-spacing:-0.03em;font-variant-numeric:tabular-nums}
.saldo .r{display:flex;justify-content:space-between;font-size:var(--step-small);font-weight:600;padding-top:8px;font-variant-numeric:tabular-nums}
.saldo .go{margin-top:12px;background:var(--gold);color:var(--navy-deep);border-radius:999px;text-align:center;font-weight:800;padding:10px}
.form-pre{width:min(100%,300px);background:var(--paper);color:var(--ink);border-radius:18px;padding:22px;display:grid;gap:12px;font-size:var(--step-small);font-weight:700}
.form-pre div{background:var(--white);border-radius:10px;padding:10px 12px}
.form-pre span{display:block;color:var(--muted);font-weight:600}
.badge{width:min(100%,280px);background:var(--paper);color:var(--ink);border-radius:18px;padding:22px;display:grid;gap:8px}
.badge .ok{display:inline-flex;align-items:center;gap:8px;background:var(--teal-soft);color:#0B5F51;font-weight:800;border-radius:999px;padding:6px 12px;width:max-content;font-size:var(--step-small)}
.badge b{font-size:var(--step-lead);font-weight:900;letter-spacing:-0.02em}
.badge span{font-size:var(--step-small);color:var(--muted);font-weight:600}

/* ---------- About: two columns, highlighted words ---------- */
.about{background:var(--blue-soft);padding-block:clamp(96px,10vw,160px)}
.about h2{font-size:var(--step-head);color:var(--navy-deep);margin-bottom:48px;max-width:16ch}
.about .text{columns:2;column-gap:32px;font-size:var(--step-lead);line-height:1.32;font-weight:600;color:var(--ink);text-align:justify;hyphens:auto}
.about .text p + p{margin-top:.8em}
.hl{padding:0 .12em;border-radius:4px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.hl-g{background:var(--gold)} .hl-t{background:var(--teal-soft)} .hl-b{background:var(--white)}
.about .end{display:inline;background:var(--navy-deep);color:var(--paper);font-weight:800;text-decoration:none;padding:0 .2em;border-radius:4px;box-decoration-break:clone;-webkit-box-decoration-break:clone;transition:background-color .2s}
.about .end:hover{background:var(--blue)}
.about figure{margin-top:64px;display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:end}
.about figure img{grid-column:1 / span 7;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.about figcaption{grid-column:8 / span 5;font-size:var(--step-body);line-height:1.5;max-width:38ch}
.about figcaption b{display:block;font-size:var(--step-lead);font-weight:900;letter-spacing:-0.02em;margin-bottom:8px}

/* ---------- Pricing: two plans, two fields ---------- */
.plans{display:grid;grid-template-columns:7fr 5fr}
.plan{min-height:86svh;display:grid;grid-template-rows:auto auto 1fr auto;gap:20px;padding:clamp(32px,4vw,56px)}
.plan:first-child{padding-left:max(var(--m),env(safe-area-inset-left,0px));background:var(--navy);color:var(--paper)}
.plan:last-child{padding-right:max(var(--m),env(safe-area-inset-right,0px));background:var(--gold);color:var(--navy-deep)}
.plan h2,.plan h3{font-size:var(--step-head);letter-spacing:-0.045em}
.plan .who{font-size:var(--step-lead);font-weight:700;line-height:1.3;max-width:26ch}
.plan .inc{align-self:start;max-width:40ch;font-size:var(--step-body);line-height:1.55;padding-top:12px}
.plan .foot{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px}
.plan .price{font-size:var(--step-display);font-weight:900;letter-spacing:-0.055em;line-height:.85}
.plan .price small{display:block;font-size:var(--step-body);font-weight:700;letter-spacing:0;margin-top:14px}

/* ---------- Register: the sign-up as one sentence, and your pin on the map ---------- */
.reg{background:var(--paper);padding-top:clamp(96px,10vw,160px)}
.reg-top{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:end}
.reg-top h2{grid-column:1 / span 6;font-size:var(--step-head);color:var(--navy-deep)}
.reg-top p{grid-column:8 / span 5;font-size:var(--step-lead);line-height:1.4;font-weight:600;max-width:34ch}
.map{position:relative;margin-block:48px 40px}
.map svg{width:100%;height:auto;display:block}
.map .land{fill:var(--dot)}
.map .pin{transition:transform .5s var(--ease),opacity .3s}
.map .pin.off{opacity:0}
.map .pin circle.ring{fill:var(--gold);stroke:var(--navy-deep);stroke-width:5}
.map .pin circle.pulse{fill:none;stroke:var(--gold);stroke-width:4;transform-box:fill-box;transform-origin:center;animation:pulse 1.8s ease-out infinite}
.map .pin text{font:900 30px var(--font);fill:var(--navy-deep);paint-order:stroke;stroke:var(--paper);stroke-width:8px;stroke-linejoin:round}
@keyframes pulse{from{transform:scale(.6);opacity:1}to{transform:scale(2.2);opacity:0}}
.sentence{display:grid;grid-template-columns:minmax(0,1fr)}
.sentence .line{display:flex;align-items:center;flex-wrap:wrap;gap:0 .35em;min-height:clamp(84px,9vw,150px);padding-block:12px;font-size:var(--step-head);font-weight:900;letter-spacing:-0.04em;line-height:1.05;color:var(--navy-deep)}
.sentence .line:nth-child(odd){background:var(--paper-2)}
.sentence label{flex:0 0 auto}
.sentence input{flex:1 1 5em;width:5em;min-width:0;max-width:100%;font:inherit;letter-spacing:inherit;color:var(--blue);background:transparent;border:0;border-bottom:4px solid var(--navy-deep);border-radius:0;padding:0 0 4px;appearance:none;-webkit-appearance:none}
.sentence input::placeholder{color:#9A9483}
.sentence input:focus{outline:none;border-bottom-color:var(--gold)}
.sentence .send{background:var(--gold);justify-content:space-between}
.sentence .send:nth-child(odd){background:var(--gold)}
.go{font-size:inherit;width:.95em;height:.95em;border-radius:50%;border:0;background:var(--navy-deep);color:var(--gold);display:grid;place-items:center;cursor:pointer;flex:0 0 auto;transition:transform .2s var(--ease)}
.go:hover{transform:translateX(6px)}
.go:active{transform:scale(.94)}
.go svg{width:44%;height:44%}
.done{background:var(--teal);color:var(--ink);padding-block:40px;font-size:var(--step-lead);font-weight:700;display:grid;gap:8px}
.done b{font-size:var(--step-head);font-weight:900;letter-spacing:-0.04em;line-height:1}
.done small{font-size:var(--step-small);font-weight:600}
.done a{font-weight:800}

/* ---------- FAQ: accordion of filled tiles ---------- */
.faq{background:var(--navy-deep);color:var(--paper);padding-block:clamp(96px,10vw,160px)}
.faq .grid{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.faq h2{grid-column:1 / span 4;font-size:var(--step-head);align-self:start;position:sticky;top:96px}
.faq .list{grid-column:5 / span 8;display:grid;gap:8px}
.faq details{background:var(--navy-2);border-radius:16px;transition:background-color .2s}
.faq details:hover{background:var(--navy-3)}
.faq details[open]{background:var(--gold);color:var(--navy-deep)}
.faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:72px;padding:18px 24px;font-size:var(--step-body);font-weight:800;cursor:pointer;line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.plus{position:relative;flex:0 0 16px;height:16px}
.plus::before,.plus::after{content:"";position:absolute;left:0;top:6.5px;width:16px;height:3px;border-radius:2px;background:currentColor;transition:transform .25s var(--ease)}
.plus::after{transform:rotate(90deg)}
details[open] .plus::after{transform:rotate(0)}
.faq details p{padding:0 24px 24px;max-width:52ch;font-size:var(--step-body);line-height:1.55}

/* ---------- Footer: name first ---------- */
.foot-sec{background:var(--gold);color:var(--navy-deep);padding-block:clamp(56px,6vw,96px) 32px;overflow:hidden}
.foot-sec .name{font-size:var(--step-display);font-weight:900;letter-spacing:-0.06em;line-height:.9;text-wrap:balance}
.foot-row{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;margin-top:72px}
.places{grid-column:1 / span 5;display:grid;gap:6px}
.places a{font-size:var(--step-title);font-weight:900;letter-spacing:-0.03em;text-decoration:none;width:max-content;max-width:100%;transition:transform .2s var(--ease)}
.places a:hover{transform:translateX(8px)}
.cols{grid-column:7 / span 6;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;font-size:var(--step-small)}
.cols b{display:block;font-weight:900;margin-bottom:10px}
.cols a{display:block;text-decoration:none;font-weight:600;padding:3px 0}
.cols a:hover{text-decoration:underline;text-decoration-thickness:2px}
.legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;margin-top:96px;font-size:var(--step-small);font-weight:600}
.legal a{font-weight:800}

/* ---------- entrances ---------- */
.js .rise{opacity:0;transform:translateY(24px)}
[data-d="70"]{--d:70ms} [data-d="80"]{--d:80ms} [data-d="90"]{--d:90ms} [data-d="120"]{--d:120ms} [data-d="140"]{--d:140ms} [data-d="160"]{--d:160ms}
.js .rise.in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0ms)}

/* ---------- tablet ---------- */
@media (max-width:1080px){
  .board .pick{grid-column:1 / span 5}
  .disc-wrap{grid-column:6 / span 7}
  .soal{grid-column:1 / -1;max-width:60ch;margin-top:40px}
  .field p{grid-column:7 / span 6}
  .field.mirror p{grid-column:1 / span 6}
  .tab{width:auto}
  .tab a:nth-child(3){display:none}
  .pkgs label small{display:none}
  .field{min-height:52svh}
}
/* ---------- phone ---------- */
@media (max-width:760px){
  .band{height:auto;grid-template-rows:56px 38svh}
  .tab{display:none}
  .mark{font-size:1rem}
  .mosaic{grid-template-columns:repeat(3,1fr)}
  .mosaic .hide-s{display:none}
  .mosaic .w2{grid-column:span 1}
  .head{grid-template-columns:1fr;padding-block:40px 64px;gap:24px}
  .head h1{font-size:12.4vw;order:-1}
  .head .lede{max-width:none;font-size:1.125rem}
  .board .grid{display:flex;flex-direction:column;align-items:stretch;gap:32px;min-height:0;padding-block:72px}
  .disc-wrap{order:-1}
  .disc{width:86vw;max-width:420px}
  .board .pick{gap:20px}
  .pkgs{display:flex;overflow-x:auto;gap:24px;padding-bottom:6px;scrollbar-width:none}
  .pkgs label{font-size:1.625rem;white-space:nowrap}
  .pkgs label small{display:none}
  .soal{margin-top:0}
  .field{min-height:64svh;display:flex;flex-direction:column;justify-content:space-between;gap:40px}
  .field p,.field.mirror p{max-width:none;width:85%;font-size:1.125rem}
  .field.mirror p{text-align:right;align-self:flex-end}
  .field h2,.field.mirror h2{text-align:left;font-size:13vw}
  .how-intro{grid-template-columns:1fr;margin-bottom:40px}
  .how-intro h2,.how-intro p{grid-column:1}
  .steps{flex-direction:column;height:auto}
  .steps > li,.steps > li.open{flex:none}
  .steps .tab-btn{position:static;min-height:64px;padding:16px 20px;align-items:center}
  .steps .tab-btn span{writing-mode:horizontal-tb;transform:none;font-size:1.125rem}
  .steps .tab-btn:hover span{transform:none}
  .steps li.open .tab-btn{padding:24px 20px 0}
  .steps li.open .tab-btn span{font-size:1.75rem}
  .steps li.open .body{position:static;grid-template-columns:1fr;padding:16px 20px 24px}
  .steps .body .pic{max-height:260px}
  .steps .body .pic + p{order:0}
  .about .text{columns:1;text-align:left;font-size:1.25rem;line-height:1.35}
  .about figure{grid-template-columns:1fr}
  .about figure img,.about figcaption{grid-column:1}
  .plans{grid-template-columns:1fr}
  .plan{min-height:70svh;padding:32px max(var(--m),env(safe-area-inset-right,0px)) 24px max(var(--m),env(safe-area-inset-left,0px))}
  .plan .price{font-size:20vw}
  .plan .foot .btn{width:100%}
  .reg-top{grid-template-columns:1fr}
  .reg-top h2,.reg-top p{grid-column:1}
  .sentence .line{font-size:9.6vw;min-height:84px}
  .sentence .send{font-size:11vw}
  .go{width:56px;height:56px}
  .faq .grid{grid-template-columns:1fr}
  .faq h2,.faq .list{grid-column:1}
  .faq h2{position:static;font-size:9vw}
  .faq summary{font-size:1.125rem;min-height:64px;padding:16px 20px}
  .faq details p{font-size:1rem;padding:0 20px 20px}
  .foot-row{grid-template-columns:1fr;margin-top:48px}
  .places,.cols{grid-column:1}
  .places a{font-size:1.625rem}
  .cols{grid-template-columns:1fr 1fr}
  .legal{margin-top:56px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rise{opacity:1;transform:none}
  html{scroll-behavior:auto}
}