@font-face{font-family:Nunito;src:url("assets/fonts/nunito/nunito-latin.woff2") format("woff2");font-style:normal;font-weight:200 1000;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("assets/fonts/ibm-plex-sans/ibm-plex-sans-latin.woff2") format("woff2");font-style:normal;font-weight:100 700;font-display:swap}
@font-face{font-family:Amiri;src:url("assets/fonts/amiri/amiri-arabic.woff2") format("woff2");font-style:normal;font-weight:400 700;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-089F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:Amiri;src:url("assets/fonts/amiri/amiri-bold-arabic.woff2") format("woff2");font-style:normal;font-weight:700;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-089F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}

:root{
  --navy-950:#061c32;
  --navy-900:#0a2847;
  --navy-800:#103b64;
  --blue-700:#185fa5;
  --blue-600:#1b6ca8;
  --blue-100:#deeffa;
  --green-800:#0f6e56;
  --green-700:#138565;
  --green-600:#1d9e75;
  --green-game:#2eaf73;
  --green-100:#e1f5ee;
  --yellow-500:#f5c518;
  --yellow-100:#fff6c7;
  --paper:#fafaf8;
  --surface:#fff;
  --ink:#1a1a18;
  --ink-2:#4a4945;
  --muted:#686760;
  --line:#d8d5cc;
  --line-strong:#a9a69d;
  --pale-sky:#f2f8fb;
  --sky:#bbdff5;
  --cream:#f8f4e9;
  --info:#185fa5;
  --info-soft:#e8f2fb;
  --success:#0f7a59;
  --success-soft:#e1f5ee;
  --warning:#8a5d00;
  --warning-soft:#fff8dc;
  --danger:#a32d2d;
  --danger-soft:#fdeaea;
  --focus:#185fa5;
  --scrim:rgb(6 28 50 / 68%);
  --font-heading:Nunito,"Arial Rounded MT Bold",system-ui,sans-serif;
  --font-body:Nunito,"Segoe UI",system-ui,sans-serif;
  --font-arabic:Amiri,"Noto Naskh Arabic",serif;
  --radius-xs:.35rem;
  --radius-sm:.65rem;
  --radius-md:.85rem;
  --radius-lg:1.15rem;
  --radius-xl:1.65rem;
  --radius-round:999px;
  --shadow-1:0 1px 2px rgb(6 28 50 / 8%);
  --shadow-2:0 12px 28px rgb(6 28 50 / 11%);
  --shadow-raised:0 5px 0 var(--green-800);
  --shadow-raised-navy:0 5px 0 var(--navy-950);
  --shadow-dialog:0 24px 60px rgb(6 28 50 / 24%);
  --target:2.75rem;
  --focus-ring:0 0 0 3px #fff,0 0 0 6px var(--focus);
  --motion-fast:120ms;
  --motion-base:180ms;
  --motion-slow:280ms;
  --ease:cubic-bezier(.2,0,0,1);
  --content:77.5rem;
  --reading:44rem;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:8.6rem}
body{margin:0;min-width:20rem;background:var(--pale-sky);color:var(--ink);font-family:var(--font-body);font-size:1rem;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.is-route{background:linear-gradient(165deg,#5dcaa5,#3dba82 45%,#2eaf73)}
body.is-route .truth-strip,body.is-route .site-header,body.is-route .site-footer{display:none}
body.is-route #main-content{min-height:100vh}
img,svg{display:block;max-width:100%}
.route-view svg,.menu-button svg{width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
button,input,textarea,select{font:inherit}
button,a,select,input,textarea{touch-action:manipulation}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p{margin-top:0}
h1,h2,h3,h4{font-family:var(--font-heading);color:var(--navy-900);line-height:1.12}
p{color:var(--muted)}
[hidden]{display:none!important}
.svg-sprite{position:absolute;width:0;height:0;overflow:hidden}
.shell{width:min(calc(100% - 3rem),var(--content));margin-inline:auto}
.skip-link{position:fixed;z-index:1000;top:.75rem;left:.75rem;transform:translateY(-160%);padding:.75rem 1rem;border-radius:var(--radius-sm);background:var(--navy-900);color:#fff;font-weight:700}
.skip-link:focus{transform:none;box-shadow:var(--focus-ring)}
:focus-visible{outline:0;box-shadow:var(--focus-ring)}
.flow-head h1:focus,.arabic-prompt:focus,.feedback:focus,.form-message:focus{box-shadow:none}

.truth-strip{position:relative;z-index:32;background:var(--navy-900);color:#e8eef3;font-size:.79rem}
.truth-strip__inner{min-height:var(--target);display:flex;align-items:center;justify-content:space-between;gap:1rem}
.truth-strip a{min-width:var(--target);min-height:var(--target);display:inline-flex;align-items:center;justify-content:center}
.truth-strip strong{color:#fff}.truth-strip a{color:#aadfd0;font-weight:800;text-decoration:underline;text-underline-offset:.18em}
.site-header{position:sticky;z-index:30;top:0;background:var(--pale-sky);border-bottom:1px solid rgb(10 40 71 / 11%);box-shadow:0 4px 16px rgb(6 28 50 / 5%)}
.header-inner{min-height:4.8rem;display:flex;align-items:center;gap:1.5rem}
.brand{min-width:var(--target);min-height:var(--target);display:inline-flex;align-items:center;gap:.7rem;flex:0 0 auto;border-radius:var(--radius-sm)}
.brand-mark{width:2.35rem;height:2.35rem;display:grid;place-items:center;border:2px solid var(--navy-900);border-radius:.75rem;background:linear-gradient(135deg,#5dcaa5,#f5c518);box-shadow:0 3px 0 rgb(4 44 83 / 25%);color:var(--navy-900)}
.brand-mark svg{width:1.35rem;height:1.35rem}
.brand-name{font-family:var(--font-heading);font-size:1.36rem;font-weight:900;letter-spacing:-.045em;line-height:.85}
.brand-name b{color:var(--blue-600)}.brand-name i{font-style:normal;color:var(--green-600)}
.brand-name small{display:block;margin-top:.38rem;color:var(--navy-900);font:700 .58rem/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase}
.desktop-nav{display:flex;align-items:center;justify-content:center;gap:1.55rem;margin-left:auto}
.desktop-nav a,.text-action{min-width:var(--target);min-height:var(--target);display:inline-flex;align-items:center;justify-content:center;padding-inline:.3rem;border-radius:var(--radius-sm);color:#445f75;font:800 .85rem/1 var(--font-heading)}
.desktop-nav a:hover,.text-action:hover{color:var(--blue-700)}
.header-actions{display:flex;align-items:center;gap:.8rem}
.button{min-height:var(--target);display:inline-flex;align-items:center;justify-content:center;gap:.55rem;padding:.75rem 1.15rem;border:2px solid var(--green-800);border-radius:var(--radius-md);background:var(--green-game);box-shadow:var(--shadow-raised);color:var(--navy-950);font:900 .9rem/1.15 var(--font-heading);text-align:center;transition:transform var(--motion-fast) var(--ease),box-shadow var(--motion-fast) var(--ease),background var(--motion-fast) var(--ease)}
.button svg{width:1.05rem;height:1.05rem}
.button:hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--green-800)}
.button:active{transform:translateY(3px);box-shadow:0 2px 0 var(--green-800)}
.button:focus-visible{box-shadow:var(--focus-ring)}
.button--small{min-height:var(--target);padding:.6rem .95rem;font-size:.8rem}
.button--large{min-height:3.2rem;padding:.85rem 1.3rem;font-size:.96rem}
.button--outline{border-color:var(--navy-900);background:var(--surface);box-shadow:var(--shadow-raised-navy);color:var(--navy-900)}
.button--outline:hover{box-shadow:0 7px 0 var(--navy-950)}.button--outline:active{box-shadow:0 2px 0 var(--navy-950)}
.button--light{border-color:#fff;background:#fff;box-shadow:0 5px 0 rgb(6 28 50 / 28%);color:var(--navy-900)}
.button--light:hover{box-shadow:0 7px 0 rgb(6 28 50 / 28%)}.button--light:active{box-shadow:0 2px 0 rgb(6 28 50 / 28%)}
.button:disabled,.button[aria-disabled="true"]{cursor:not-allowed;transform:none;border-color:#98a9b4;background:#dce6eb;box-shadow:none;color:#596b76}
.menu-button,.icon-button{min-width:var(--target);min-height:var(--target);display:none;place-items:center;padding:0;border:2px solid var(--navy-900);border-radius:var(--radius-md);background:#fff;color:var(--navy-900)}
.mobile-menu{border-top:1px solid #cbdce6;background:var(--pale-sky);box-shadow:0 18px 30px rgb(6 28 50 / 14%)}
.mobile-menu__inner{padding-block:.75rem 1rem;display:grid}
.mobile-menu a{min-height:3.25rem;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #d4e2e9;border-radius:.25rem;color:var(--navy-900);font:850 .95rem var(--font-heading)}
.mobile-menu a:last-child{border-bottom:0}.mobile-menu svg{width:1rem;height:1rem}

.hero{position:relative;min-height:48.5rem;display:flex;align-items:center;overflow:hidden;background:linear-gradient(180deg,var(--sky) 0%,#ddf0fb 55%,var(--pale-sky) 100%)}
.hero::after{content:"";position:absolute;left:50%;bottom:-13rem;width:82rem;height:20rem;transform:translateX(-50%);border-radius:50%;background:rgb(255 255 255 / 38%)}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(30rem,.94fr);gap:3rem;align-items:center;padding-block:5.7rem 6.5rem}
.hero-card{position:relative;z-index:2;max-width:39rem;padding:2.35rem 2.45rem;border:1px solid rgb(10 40 71 / 12%);border-radius:var(--radius-xl);background:var(--paper);box-shadow:0 22px 55px rgb(10 40 71 / 18%)}
.eyebrow,.section-kicker{display:inline-flex;align-items:center;gap:.5rem;margin-bottom:1rem;padding:.38rem .8rem;border:1px solid #a9cadc;border-radius:var(--radius-round);background:#fff;color:var(--blue-700);font:900 .72rem/1 var(--font-heading);letter-spacing:.07em;text-transform:uppercase}
.eyebrow span{width:.55rem;height:.55rem;border-radius:50%;background:var(--yellow-500);box-shadow:inset 0 0 0 1px #9c7900}
.hero h1{max-width:35rem;margin-bottom:1.2rem;font-size:clamp(2.8rem,5vw,4.35rem);line-height:1.01;letter-spacing:-.055em;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--green-700)}
.hero-lead{max-width:34rem;margin-bottom:1.75rem;font-size:1.09rem;color:#4c6a80;text-wrap:pretty}
.hero-actions{display:flex;flex-wrap:wrap;gap:.9rem}
.trust-list{display:flex;flex-wrap:wrap;gap:.7rem 1.1rem;margin:1.6rem 0 0;padding:1.25rem 0 0;border-top:1px solid var(--line);list-style:none;color:#536c7e;font-size:.76rem;font-weight:700}
.trust-list li{display:inline-flex;align-items:center;gap:.35rem}.trust-list svg{width:.95rem;height:.95rem;color:var(--success)}
.hero-world{position:relative;min-height:33rem;display:grid;place-items:center}
.city-art{position:relative;z-index:2;width:min(100%,43rem);aspect-ratio:4/3;object-fit:contain;filter:drop-shadow(0 2rem 1.2rem rgb(10 40 71 / 22%));animation:city-float 6s ease-in-out infinite}
.salim-callout{position:absolute;z-index:4;top:3.5rem;right:.5rem;display:flex;align-items:center;gap:.65rem;padding:.6rem .8rem;border:2px solid var(--navy-900);border-radius:var(--radius-md);background:#fff;box-shadow:0 5px 0 rgb(10 40 71 / 20%);transform:rotate(2deg)}
.salim-callout img{width:3.5rem;height:3.2rem}.salim-callout span{display:grid}.salim-callout b{font:900 .8rem var(--font-heading);color:var(--navy-900)}.salim-callout small{color:var(--muted);font-size:.68rem}
.world-orbit{position:absolute;z-index:3;width:3.2rem;height:3.2rem;display:grid;place-items:center;border:3px solid var(--navy-900);border-radius:1rem;background:var(--yellow-500);box-shadow:0 5px 0 var(--navy-900);font:700 1.7rem/1 var(--font-arabic);color:var(--navy-900);animation:token-float 5s ease-in-out infinite}
.world-orbit--one{left:2%;top:18%;transform:rotate(-8deg)}.world-orbit--two{right:5%;bottom:18%;transform:rotate(7deg);animation-delay:-1.4s}.world-orbit--three{left:17%;bottom:9%;transform:rotate(5deg);animation-delay:-2.7s}
.depth-note{position:absolute;z-index:4;right:1.8rem;bottom:1rem;display:flex;align-items:center;gap:.4rem;margin:0;padding:.45rem .65rem;border:1px solid #a9cadc;border-radius:var(--radius-round);background:#fff;color:#49677b;font-size:.7rem;font-weight:700}.depth-note svg{width:.9rem;height:.9rem}
.hero-cloud{position:absolute;border-radius:50%;background:rgb(255 255 255 / 35%)}.hero-cloud::before,.hero-cloud::after{content:"";position:absolute;border-radius:50%;background:inherit}
.hero-cloud--one{top:8rem;left:4%;width:7rem;height:2.7rem}.hero-cloud--one::before{left:1rem;bottom:.5rem;width:3rem;height:3rem}.hero-cloud--one::after{right:1.2rem;bottom:.45rem;width:2.2rem;height:2.2rem}
.hero-cloud--two{right:6%;bottom:7rem;width:8rem;height:3rem}.hero-cloud--two::before{left:1.2rem;bottom:.5rem;width:3.4rem;height:3.4rem}.hero-cloud--two::after{right:1rem;bottom:.5rem;width:2.6rem;height:2.6rem}
@keyframes city-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-.55rem)}}
@keyframes token-float{0%,100%{margin-top:0}50%{margin-top:-.7rem}}

.journey-bar{position:relative;z-index:4;margin-top:-4rem;padding-bottom:3rem}
.journey-bar>.shell{padding:1.45rem 1.55rem 1.55rem;border:2px solid var(--navy-900);border-radius:var(--radius-xl);background:#fff;box-shadow:0 8px 0 rgb(10 40 71 / 12%)}
.section{padding-block:6.2rem}
.section--paper{background:var(--surface);border-block:1px solid rgb(10 40 71 / 8%)}
.section-heading{max-width:43rem;margin:0 auto 2.8rem}.section-heading--center{text-align:center}.section-heading--row{max-width:none;display:flex;align-items:end;justify-content:space-between;gap:2rem;margin-bottom:2rem}.section-heading--row>p{max-width:31rem;margin-bottom:.2rem;text-align:right}
.section-heading h2,.section-copy h2{margin-bottom:.8rem;font-size:clamp(2rem,4vw,2.9rem);letter-spacing:-.035em;text-wrap:balance}
.section-heading>p,.section-copy>p{font-size:1.03rem;text-wrap:pretty}
.section-kicker{background:var(--blue-100);border-color:transparent}.section-kicker--dark{background:rgb(255 255 255 / 14%);border-color:rgb(255 255 255 / 30%);color:#aadfd0}
.section-copy{max-width:33rem}
.journey-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem;margin:1rem 0 0;padding:0;list-style:none}
.journey-steps li{position:relative;min-height:7.1rem;display:flex;gap:.9rem;padding:1.1rem 1rem;border:1.5px solid #c1dce9;border-radius:var(--radius-lg);background:#f7fbfd}
.journey-steps li>span{width:2rem;height:2rem;flex:0 0 2rem;display:grid;place-items:center;border:2px solid var(--navy-900);border-radius:.65rem;background:var(--yellow-500);box-shadow:0 3px 0 var(--navy-900);font:900 .82rem var(--font-heading)}
.journey-steps b{font:900 .92rem var(--font-heading);color:var(--navy-900)}.journey-steps p{margin:.3rem 0 0;font-size:.77rem}
.section-heading--row h2,.section-heading--row .section-kicker{margin-bottom:.35rem}
.split-layout{display:grid;grid-template-columns:.78fr 1.22fr;gap:5rem;align-items:center}
.truth-card{display:flex;align-items:flex-start;gap:.8rem;margin-top:1.5rem;padding:1rem;border:1.5px solid #acd0e4;border-radius:var(--radius-md);background:var(--info-soft)}
.truth-card>svg{flex:0 0 1.2rem;color:var(--info)}.truth-card b{font:900 .9rem var(--font-heading);color:var(--navy-900)}.truth-card p{margin:.2rem 0 0;font-size:.8rem}
.lesson-card{padding:1.8rem;border:2px solid var(--navy-900);border-radius:var(--radius-xl);background:var(--paper);box-shadow:0 9px 0 rgb(10 40 71 / 12%)}
.lesson-card__top{display:flex;align-items:start;justify-content:space-between;gap:1rem;padding-bottom:1.1rem;border-bottom:1px solid var(--line)}
.lesson-card__top>div{display:grid}.lesson-card__top span{color:var(--blue-700);font:900 .68rem var(--font-heading);letter-spacing:.08em;text-transform:uppercase}.lesson-card__top b{font:900 1rem var(--font-heading);color:var(--navy-900)}
.demo-badge,.demo-label{display:inline-flex;width:max-content;padding:.35rem .55rem;border:1px solid #c9a30c;border-radius:.5rem;background:var(--yellow-100);color:#765900;font:900 .62rem/1 var(--font-heading);letter-spacing:.07em}
.arabic-prompt{margin-block:1.2rem .4rem;padding:1.15rem 1.3rem;border-radius:var(--radius-lg);background:var(--navy-900);color:#fff;font:700 clamp(2rem,5vw,3rem)/2 var(--font-arabic);text-align:center}
.lesson-instruction{margin:.65rem 0;font-size:.85rem}
.answer-list{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.answer{position:relative;min-height:5rem;padding:.6rem 3rem .6rem 1rem;border:2px solid #b3c8d5;border-radius:var(--radius-lg);background:#fff;color:var(--navy-900);font:700 1.55rem/1.8 var(--font-arabic);text-align:right;transition:border var(--motion-fast),background var(--motion-fast),transform var(--motion-fast)}
.answer:hover{border-color:var(--blue-600);transform:translateY(-2px)}.answer[aria-pressed="true"]{border-color:var(--green-700);background:var(--green-100);box-shadow:inset 0 0 0 1px var(--green-700)}
.answer i{position:absolute;right:1rem;top:50%;width:1.5rem;height:1.5rem;transform:translateY(-50%);border:2px solid #9bb0bd;border-radius:50%}.answer[aria-pressed="true"] i{border-color:var(--green-700);box-shadow:inset 0 0 0 4px #fff;background:var(--green-700)}
.answer.is-correct{border-color:var(--success);background:var(--success-soft)}.answer.is-wrong{border-color:var(--danger);background:var(--danger-soft)}
.feedback{margin-top:.9rem;padding:.85rem 1rem;border:1.5px solid var(--success);border-radius:var(--radius-md);background:var(--success-soft);color:var(--navy-900);font-size:.85rem}.feedback.is-error{border-color:var(--danger);background:var(--danger-soft)}
.feedback b{font-family:var(--font-heading)}.feedback [lang="ar"]{font:700 1.25rem/1.8 var(--font-arabic)}
.lesson-actions{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-top:1.2rem}

.modes-section{background:var(--cream)}
.mode-tabs{max-width:66rem;margin-inline:auto}
.tab-list{width:max-content;display:grid;grid-template-columns:1fr 1fr;gap:.35rem;margin:0 auto -1.2rem;padding:.35rem;border:2px solid var(--navy-900);border-radius:var(--radius-lg);background:#fff;box-shadow:0 5px 0 var(--navy-900)}
.tab-list button{min-width:12rem;min-height:3.2rem;display:flex;align-items:center;justify-content:center;gap:.55rem;padding:.7rem 1.1rem;border:0;border-radius:.72rem;background:transparent;color:var(--navy-900);font:900 .92rem var(--font-heading)}
.tab-list button[aria-selected="true"]{background:var(--green-game);color:var(--navy-950)}.tab-list svg{width:1.1rem;height:1.1rem}
.mode-panel{display:grid;grid-template-columns:1.1fr .9fr;gap:2.4rem;padding:3.5rem 2.2rem 2.2rem;border:2px solid var(--navy-900);border-radius:var(--radius-xl);background:#fff;box-shadow:0 9px 0 rgb(10 40 71 / 12%)}
.mode-panel h3{margin:.75rem 0 .45rem;font-size:1.75rem}.mode-panel p{margin-bottom:1rem}
.state-chip{display:inline-flex;padding:.35rem .55rem;border-radius:.45rem;font:900 .62rem var(--font-heading);letter-spacing:.08em}.state-chip--blue{background:var(--blue-100);color:var(--blue-700)}.state-chip--green{background:var(--green-100);color:var(--green-800)}
.check-list{display:grid;gap:.55rem;margin:0;padding:0;list-style:none;color:#435d6f;font-size:.87rem}.check-list li{display:flex;gap:.5rem;align-items:flex-start}.check-list svg{width:1rem;height:1rem;flex:0 0 1rem;margin-top:.2rem;color:var(--success)}
.mode-route{padding:1.4rem;border-radius:var(--radius-lg);background:var(--pale-sky);border:1.5px solid #bdd8e6}.mode-route>span{font:900 .7rem var(--font-heading);letter-spacing:.08em;text-transform:uppercase;color:var(--blue-700)}
.mode-route ol{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem;margin:1.2rem 0 1.4rem;padding:0;list-style:none;counter-reset:route}
.mode-route li{position:relative;padding-top:2.7rem;text-align:center;color:var(--navy-900);font:800 .66rem var(--font-heading)}.mode-route li::before{counter-increment:route;content:counter(route);position:absolute;top:0;left:50%;width:2rem;height:2rem;display:grid;place-items:center;transform:translateX(-50%);border:2px solid var(--navy-900);border-radius:.65rem;background:var(--yellow-500)}.mode-route li:not(:last-child)::after{content:"";position:absolute;top:1rem;left:calc(50% + 1rem);width:calc(100% - 1.5rem);border-top:2px dashed #8cb8d1}
.mode-route .button{width:100%}

.readiness-section{background:var(--navy-900);color:#e8eef3}
.readiness-section h2{color:#fff}.readiness-section p{color:#d8e5ef}.readiness-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:5rem;align-items:center}
.readiness-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:.85rem}.readiness-facts>div{padding:1.25rem;border:1.5px solid rgb(255 255 255 / 24%);border-radius:var(--radius-lg);background:#103b64;text-align:center}.readiness-facts strong{display:block;color:var(--yellow-500);font:900 2.7rem/1 var(--font-heading)}.readiness-facts span{display:block;margin-top:.45rem;color:#d8e5ef;font-size:.76rem}.readiness-facts .readiness-note{grid-column:1/-1;display:flex;align-items:flex-start;gap:.8rem;text-align:left;background:#0d355a}.readiness-note svg{flex:0 0 1.3rem;color:#aadfd0}.readiness-note p{margin:0;font-size:.84rem}.readiness-note b{color:#fff}

.catalog-section{background:#fff}
.catalog-toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.4rem}
.filter-group{display:flex;flex-wrap:wrap;gap:.55rem}.filter{min-height:var(--target);padding:.65rem .9rem;border:1.5px solid #b5c9d5;border-radius:var(--radius-round);background:#fff;color:var(--navy-900);font:850 .77rem var(--font-heading)}.filter:hover{border-color:var(--blue-600)}.filter.is-active{border-color:var(--navy-900);background:var(--navy-900);color:#fff}
#catalog-count{color:var(--muted);font-size:.8rem;font-weight:700}
.module-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.module-card{position:relative;min-height:18rem;display:flex;flex-direction:column;padding:1.3rem;border:1.5px solid rgb(10 40 71 / 16%);border-radius:var(--radius-lg);background:var(--paper);box-shadow:var(--shadow-1);transition:transform var(--motion-base),box-shadow var(--motion-base),border var(--motion-base)}
.module-card:hover{transform:translateY(-3px);border-color:#8fb7ce;box-shadow:var(--shadow-2)}
.module-card.is-owned{border:2px solid var(--green-700);background:#f3fbf7}.module-card.is-not-produced{background:#f1f0eb;color:#5f5e59}
.module-top{display:flex;align-items:flex-start;justify-content:space-between;gap:.8rem}.module-code{width:3.35rem;height:3.35rem;display:grid;place-items:center;border:2px solid var(--navy-900);border-radius:.85rem;background:var(--yellow-500);box-shadow:0 4px 0 var(--navy-900);color:var(--navy-900);font:900 .82rem var(--font-heading)}.module-card.is-not-produced .module-code{background:#deddd7;color:#4a4945;box-shadow:0 4px 0 #76746c}
.module-status{padding:.35rem .55rem;border-radius:.45rem;background:var(--blue-100);color:var(--blue-700);font:900 .59rem var(--font-heading);letter-spacing:.05em;text-transform:uppercase}.module-status.owned{background:var(--green-100);color:var(--green-800)}.module-status.not-produced{background:#e2e0da;color:#56544d}
.module-card h3{margin:1.15rem 0 .25rem;font-size:1.16rem}.module-card>p{margin-bottom:.8rem;font-size:.82rem}.module-meta{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1rem}.module-meta span{padding:.3rem .45rem;border-radius:.4rem;background:#e9f3f8;color:#315d77;font-size:.67rem;font-weight:700}
.module-truth{margin-top:auto;padding-top:.8rem;border-top:1px dashed #adc4d1;font-size:.73rem;color:#5d707b}.module-card .button{width:100%;margin-top:1rem}
.catalog-empty{padding:3rem;text-align:center;border:2px dashed #b7cbd6;border-radius:var(--radius-xl);background:var(--pale-sky)}.catalog-empty svg{width:2rem;height:2rem;margin:0 auto 1rem;color:var(--blue-600)}

.safety-section{background:var(--pale-sky)}
.safety-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}.feature-card{min-height:15.5rem;padding:1.4rem;border:1.5px solid rgb(10 40 71 / 13%);border-radius:var(--radius-lg);background:#fff;box-shadow:var(--shadow-1)}.feature-card h3{margin:1rem 0 .45rem;font-size:1.05rem}.feature-card p{margin:0;font-size:.83rem}
.icon-tile{width:3.25rem;height:3.25rem;display:grid;place-items:center;border-radius:.85rem;background:var(--blue-100);color:var(--blue-700)}.icon-tile--yellow{background:var(--yellow-100);color:var(--warning)}.icon-tile--green{background:var(--green-100);color:var(--green-800)}.icon-tile--blue{background:#dcecf7;color:var(--navy-800)}.icon-tile svg{width:1.45rem;height:1.45rem}
.group-gate{display:grid;grid-template-columns:.8fr 1.2fr;gap:2.8rem;align-items:center;margin-top:1.25rem;padding:2rem;border:2px solid var(--navy-900);border-radius:var(--radius-xl);background:#fff;box-shadow:0 8px 0 rgb(10 40 71 / 12%)}
.group-gate h3{margin:.75rem 0 .45rem;font-size:1.6rem}.group-gate p{margin-bottom:1.2rem}
.group-gate__visual{position:relative;min-height:11rem;display:grid;place-items:center;border-radius:var(--radius-lg);background:linear-gradient(145deg,#e2f5ed,#ddecf5)}.group-gate__visual img{position:absolute;top:.35rem;width:7rem}.gate-code{position:absolute;bottom:1.25rem;display:grid;grid-template-columns:repeat(6,2.55rem);gap:.35rem}.gate-code i{height:2.75rem;display:grid;place-items:center;border:2px solid var(--navy-900);border-radius:.65rem;background:#fff;box-shadow:0 3px 0 var(--navy-900);color:var(--navy-900);font:900 .85rem var(--font-heading);font-style:normal}

.faq-section{background:#fff}.faq-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:5rem;align-items:start}
.search-field{display:grid;gap:.45rem;margin-top:1.4rem;color:var(--navy-900);font:800 .8rem var(--font-heading)}.input-wrap{min-height:3rem;display:flex;align-items:center;gap:.55rem;padding:0 .85rem;border:1.5px solid #aac2d0;border-radius:var(--radius-md);background:#fff}.input-wrap:focus-within{box-shadow:var(--focus-ring)}.input-wrap svg{flex:0 0 1.1rem;color:var(--blue-600)}.input-wrap input{width:100%;min-width:0;min-height:var(--target);border:0;outline:0;background:transparent;color:var(--ink)}
.faq-list{display:grid;gap:.65rem}.faq-list details{border:1.5px solid #c1d4de;border-radius:var(--radius-md);background:var(--paper);overflow:hidden}.faq-list summary{min-height:3.7rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem 1rem;cursor:pointer;color:var(--navy-900);font:900 .92rem var(--font-heading);list-style:none}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary svg{width:1rem;height:1rem;transition:transform var(--motion-base)}.faq-list details[open] summary{background:var(--blue-100)}.faq-list details[open] summary svg{transform:rotate(90deg)}.faq-list details p{margin:0;padding:1rem;border-top:1px solid #c1d4de;font-size:.85rem}
.faq-empty{padding:2rem;border:2px dashed #b7cbd6;border-radius:var(--radius-lg);background:var(--pale-sky);text-align:center}.faq-empty svg{margin:0 auto .8rem}

.help-section{position:relative;overflow:hidden;background:linear-gradient(135deg,#0f6e56,#085041);color:#fff}.help-section::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgb(255 255 255 / 13%) 1.5px,transparent 1.5px);background-size:28px 28px}.help-grid{position:relative;display:grid;grid-template-columns:.9fr 1.1fr;gap:5rem;align-items:center}.help-section h2{color:#fff}.help-section .section-copy>p{color:#d7eee6}
.help-links{display:grid;gap:.65rem;margin-top:1.5rem}.help-links a{min-height:4.5rem;display:flex;align-items:center;gap:.75rem;padding:.75rem;border:1px solid rgb(255 255 255 / 27%);border-radius:var(--radius-md);background:#0d604c;color:#fff}.help-links a>svg:first-child{width:1.35rem;height:1.35rem;color:#f5c518}.help-links a>svg:last-child{margin-left:auto}.help-links span{display:grid}.help-links b{font-family:var(--font-heading)}.help-links small{color:#cfe7df}
.help-form{padding:1.6rem;border-radius:var(--radius-xl);background:#fff;box-shadow:var(--shadow-dialog);color:var(--ink)}.form-head{display:flex;align-items:center;gap:.8rem;margin-bottom:1rem}.form-head h3{margin:0}.form-head p{margin:0;font-size:.75rem}.field{display:grid;gap:.4rem;margin-top:.85rem;color:var(--navy-900);font:800 .8rem var(--font-heading)}.field input,.field select,.field textarea,.field-input{width:100%;min-height:var(--target);padding:.72rem .8rem;border:1.5px solid #a9bfcc;border-radius:var(--radius-md);background:#fff;color:var(--ink);outline:0;font-family:var(--font-body);resize:vertical}.field textarea{min-height:6.7rem}.field input:focus,.field select:focus,.field textarea:focus,.field-input:focus{border-color:var(--focus);box-shadow:var(--focus-ring)}.field [aria-invalid="true"],.field-input[aria-invalid="true"]{border-color:var(--danger);background:var(--danger-soft)}
/* KW-79: kolom yang masih terkunci harus terlihat terkunci, bukan hanya tertulis
   di keterangannya. Warnanya sama dengan tombol yang dimatikan. */
.field input:disabled,.field select:disabled,.field textarea:disabled{cursor:not-allowed;border-color:#98a9b4;background:#dce6eb;color:#596b76}
.field-hint{margin:.35rem 0 0;color:var(--muted);font-size:.73rem}.field-error{display:block;margin:.35rem 0 0;color:var(--danger);font-size:.73rem;font-weight:700}
.secret-control{position:relative;min-width:0}
.field .secret-control input{padding-right:8.6rem}
.secret-toggle{position:absolute;right:4px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:44px;padding:6px 9px;border:0;border-radius:8px;background:transparent;color:#1b6ca8;font:800 .75rem var(--font-heading);cursor:pointer}
.secret-toggle:hover{background:#eef5fa}
.secret-toggle:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.secret-toggle:disabled{opacity:.5;cursor:not-allowed}
/* Satu tombol lihat/sembunyikan: gunakan tombol aplikasi di pinggir kolom. */
.secret-control input::-ms-reveal{display:none}
.form-message{min-height:1.5rem;margin-top:.7rem;color:var(--danger);font-size:.78rem;font-weight:700}.form-message.is-success{color:var(--success)}
.form-actions{display:flex;align-items:center;gap:1rem;margin-top:1rem}.text-button{min-width:var(--target);min-height:var(--target);padding:.6rem;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--blue-700);font-weight:800}.text-button:hover{text-decoration:underline}

.legal-section{background:var(--cream)}.legal-grid{display:grid;grid-template-columns:.85fr 1fr 1fr;gap:1rem;align-items:stretch}.legal-grid>div,.legal-grid>article{padding:1.4rem;border:1.5px solid #d2cab9;border-radius:var(--radius-lg);background:#fff}.legal-grid h2{margin:0;font-size:1.7rem}.legal-grid article{display:flex;gap:.8rem}.legal-grid article>svg{flex:0 0 1.35rem;color:var(--blue-700)}.legal-grid article h3{margin:0 0 .35rem}.legal-grid article p{margin:0 0 .65rem;font-size:.8rem}.legal-grid article a{min-width:var(--target);min-height:var(--target);display:inline-flex;align-items:center;color:var(--blue-700);font-size:.78rem;font-weight:800;text-decoration:underline;text-underline-offset:.18em}

.site-footer{padding:3.7rem 0 1.2rem;background:var(--navy-950);color:#d8e5ef}.brand--light .brand-name b{color:#8dcbed}.brand--light .brand-name i{color:#aadfd0}.footer-grid{display:grid;grid-template-columns:1.2fr .7fr 1fr;gap:2rem;align-items:start}.footer-grid>div>p{max-width:23rem;margin:.8rem 0 0;color:#b8cad8;font-size:.82rem}.footer-grid nav{display:grid;gap:.45rem}.footer-grid nav a{min-width:var(--target);min-height:var(--target);display:inline-flex;align-items:center;color:#cddbe7;font-size:.82rem;font-weight:700}.footer-actions{display:flex;justify-content:flex-end;gap:.8rem}.footer-bottom{display:flex;justify-content:space-between;gap:1rem;margin-top:2.5rem;padding-top:1rem;border-top:1px solid rgb(255 255 255 / 15%);color:#95aabc;font-size:.72rem}

/* Routed prototype surfaces */
.route-view{position:relative;min-height:100vh;overflow:hidden;background:linear-gradient(165deg,#5dcaa5,#3dba82 45%,#2eaf73)}
.route-backdrop{position:absolute;inset:0;overflow:hidden;background-image:radial-gradient(rgb(255 255 255 / 16%) 1.6px,transparent 1.6px);background-size:28px 28px}
.route-backdrop::before,.route-backdrop::after{content:"";position:absolute;border-radius:50%;background:rgb(255 255 255 / 10%)}.route-backdrop::before{top:-7rem;right:-5rem;width:22rem;height:22rem}.route-backdrop::after{left:-5rem;top:32%;width:16rem;height:16rem}
.route-backdrop>img{position:absolute;left:0;right:0;bottom:0;width:100%;height:8.5rem}
.token{position:absolute;width:2.7rem;height:2.7rem;display:grid;place-items:center;border-radius:50%;background:var(--yellow-500);box-shadow:0 4px 0 #c9a30c;color:#754f00;font:900 1rem var(--font-heading);animation:token-float 6s ease-in-out infinite}.token--a{left:5%;top:18%}.token--b{right:6%;top:23%;font-family:var(--font-arabic);animation-delay:-2s}.token--c{left:9%;bottom:19%;font-family:var(--font-arabic);animation-delay:-3.5s}
.route-shell{position:relative;z-index:2;padding-block:1.3rem 9.5rem}
.route-header{min-height:3.2rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.2rem}
.route-card-wrap{min-width:0;display:grid;grid-template-columns:18.5rem minmax(0,1fr);max-width:68rem;margin:auto;border-radius:var(--radius-xl);box-shadow:var(--shadow-dialog);overflow:hidden}
.route-rail{padding:2rem 1.6rem;background:linear-gradient(160deg,var(--navy-900),var(--navy-800));color:#fff}.route-rail>img{width:7rem;height:auto;margin:0 auto 1rem;filter:drop-shadow(0 .7rem .7rem rgb(4 44 83 / 25%));animation:city-float 5s ease-in-out infinite}.route-rail h2{margin:.8rem 0 .5rem;color:#fff;font-size:1.75rem}.route-rail>p{color:#d8e5ef;font-size:.82rem}.route-rail ol{display:grid;gap:.45rem;margin:1.5rem 0 0;padding:0;list-style:none;counter-reset:rail}.route-rail li{position:relative;min-height:2.6rem;padding:.6rem .6rem .6rem 2.65rem;border:1px solid rgb(255 255 255 / 13%);border-radius:.7rem;color:#cddbe7;font-size:.72rem;font-weight:700}.route-rail li::before{counter-increment:rail;content:counter(rail);position:absolute;left:.55rem;top:.45rem;width:1.65rem;height:1.65rem;display:grid;place-items:center;border-radius:.5rem;background:#103b64;color:#aadfd0;font:900 .66rem var(--font-heading)}.route-rail li.is-current{border-color:#aadfd0;background:#103b64;color:#fff}.route-rail li.is-current::before{background:var(--yellow-500);color:var(--navy-900)}
.route-card{min-width:0;min-height:43rem;background:#fff}.prototype-toolbar{min-width:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:.65rem;padding:.8rem 1rem;border-bottom:1px solid #cadce6;background:var(--pale-sky)}.prototype-toolbar label{min-width:0;display:grid;gap:.25rem;color:var(--navy-900);font:900 .62rem var(--font-heading);letter-spacing:.05em;text-transform:uppercase}.prototype-toolbar select{width:100%;min-width:0;min-height:var(--target);max-width:100%;padding:.45rem 2rem .45rem .6rem;border:1.5px solid #9fb9c8;border-radius:.65rem;background:#fff;color:var(--navy-900);font:700 .73rem var(--font-body);text-transform:none;letter-spacing:0}.prototype-toolbar .icon-button{display:grid;align-self:end;min-height:var(--target);min-width:var(--target)}.prototype-toolbar .icon-button svg{transform:rotate(-45deg)}
#route-content{min-width:0;padding:1.7rem 2rem 2.2rem}
.flow-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1.3rem;padding-bottom:1rem;border-bottom:1px solid var(--line)}.flow-head__copy{max-width:37rem}.flow-eyebrow{display:block;margin-bottom:.3rem;color:var(--blue-700);font:900 .65rem var(--font-heading);letter-spacing:.1em;text-transform:uppercase}.flow-head h1{margin:0 0 .35rem;font-size:1.75rem}.flow-head p{margin:0;font-size:.82rem}.state-tag{flex:0 0 auto;padding:.38rem .55rem;border:1px solid #a9cadc;border-radius:var(--radius-round);background:var(--info-soft);color:var(--blue-700);font:900 .6rem var(--font-heading);letter-spacing:.06em;text-transform:uppercase}
.flow-body{max-width:43rem}.flow-body--wide{max-width:none}.flow-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.choice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem}.choice-card{min-height:10.8rem;display:flex;flex-direction:column;align-items:flex-start;padding:1rem;border:2px solid #b8cdd8;border-radius:var(--radius-lg);background:#fff;color:var(--navy-900);text-align:left}.choice-card:hover,.choice-card[aria-pressed="true"]{border-color:var(--green-700);background:var(--green-100)}.choice-card .icon-tile{margin-bottom:.8rem}.choice-card b{font:900 .9rem var(--font-heading)}.choice-card p{margin:.3rem 0 0;font-size:.72rem}.choice-card small{display:block;margin-top:auto;padding-top:.7rem;color:var(--blue-700);font-size:.68rem;font-weight:800}
.form-card{padding:1.1rem;border:1.5px solid #c2d4de;border-radius:var(--radius-lg);background:var(--paper)}.form-card h2,.form-card h3{margin-bottom:.35rem;font-size:1.05rem}.form-card>p{font-size:.76rem}
.input-row{display:grid;grid-template-columns:1fr auto;gap:.65rem;align-items:end}
.segmented{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;margin-bottom:1rem;padding:.3rem;border:2px solid var(--navy-900);border-radius:var(--radius-md);background:#fff}.segmented button{min-width:var(--target);min-height:var(--target);padding:.5rem;border:0;border-radius:.6rem;background:transparent;color:var(--navy-900);font:900 .75rem var(--font-heading)}.segmented button[aria-selected="true"],.segmented button[aria-pressed="true"]{background:var(--green-game)}
.consent{min-height:var(--target);display:flex;align-items:center;gap:.6rem;margin-top:.9rem;color:#53666f;font-size:.73rem}.consent input{width:1.2rem;height:1.2rem;flex:0 0 1.2rem;margin:0;accent-color:var(--green-700)}
.route-actions{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-top:1.2rem}.route-actions--end{justify-content:flex-end}.route-actions .button{min-width:8rem}
.status-panel{display:flex;align-items:flex-start;gap:.8rem;margin:1rem 0;padding:1rem;border:1.5px solid #a9cde0;border-radius:var(--radius-md);background:var(--info-soft)}.status-panel__icon{width:2rem;height:2rem;flex:0 0 2rem;display:grid;place-items:center;border-radius:.65rem;background:var(--info);color:#fff}.status-panel__icon svg{width:1rem;height:1rem}.status-panel h2,.status-panel h3{margin:0;font-size:.92rem}.status-panel p{margin:.2rem 0 0;font-size:.74rem}.status-panel--success{border-color:#add7c6;background:var(--success-soft)}.status-panel--success .status-panel__icon{background:var(--success)}.status-panel--warning{border-color:#dfc65d;background:var(--warning-soft)}.status-panel--warning .status-panel__icon{background:var(--yellow-500);color:var(--navy-900)}.status-panel--danger{border-color:#dda7a7;background:var(--danger-soft)}.status-panel--danger .status-panel__icon{background:var(--danger)}
.code-input{font:900 1.35rem var(--font-heading)!important;letter-spacing:.22em;text-transform:uppercase}.pin-input{font:900 1.2rem var(--font-heading)!important;letter-spacing:.3em}.otp-input{font:800 1.1rem var(--font-body)!important;letter-spacing:.12em}
.privacy-note{margin-top:1rem;padding-top:.8rem;border-top:1px solid var(--line);color:#53666f;font-size:.72rem}.privacy-note strong{color:var(--navy-900)}
.waiting-card{padding:1.3rem;border:2px solid var(--navy-900);border-radius:var(--radius-lg);background:#fff;box-shadow:0 6px 0 rgb(10 40 71 / 12%)}.waiting-top{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}.waiting-top h2{margin:.45rem 0 .25rem;font-size:1.35rem}.waiting-top p{font-size:.75rem}.waiting-code{padding:.4rem .55rem;border-radius:.45rem;background:var(--yellow-100);color:#705500;font:900 .7rem var(--font-heading);letter-spacing:.12em}.sealed-content{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-top:1rem}.sealed-content div{min-height:5rem;padding:.7rem;border:1.5px dashed #bdcbd3;border-radius:.7rem;background:#f1f2ef;color:#6d6c66;text-align:center;font-size:.66rem}.sealed-content svg{margin:.25rem auto .35rem}
.module-detail{display:grid;grid-template-columns:.72fr 1.28fr;gap:1rem}.module-poster{min-height:17rem;display:flex;flex-direction:column;justify-content:space-between;padding:1.2rem;border:2px solid var(--navy-900);border-radius:var(--radius-lg);background:linear-gradient(145deg,var(--yellow-100),#fff)}.module-poster strong{font:900 3rem/1 var(--font-heading);color:var(--navy-900)}.module-poster span{color:var(--warning);font:900 .65rem var(--font-heading);letter-spacing:.08em}.week-list{display:grid;gap:.5rem;margin:.8rem 0 0;padding:0;list-style:none}.week-list li{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.65rem .75rem;border:1px solid #cad8df;border-radius:.7rem;background:#fff;font-size:.73rem}.week-list b{font-family:var(--font-heading);color:var(--navy-900)}
.summary-list{display:grid;gap:.55rem;margin:1rem 0;padding:0;list-style:none}.summary-list li{display:flex;justify-content:space-between;gap:1rem;padding:.65rem 0;border-bottom:1px dashed #b8cad4;color:var(--muted);font-size:.75rem}.summary-list li:last-child{border:0}.summary-list b{color:var(--navy-900);text-align:right}
.payment-methods{display:grid;gap:.65rem;margin-top:1rem}.payment-method{min-height:4.5rem;display:flex;align-items:center;gap:.8rem;padding:.75rem;border:2px solid #b7cbd6;border-radius:var(--radius-md);background:#fff;text-align:left}.payment-method:hover,.payment-method[aria-pressed="true"]{border-color:var(--green-700);background:var(--green-100)}.payment-method svg{width:1.45rem;height:1.45rem;color:var(--blue-700)}.payment-method span{display:grid}.payment-method b{font:900 .82rem var(--font-heading);color:var(--navy-900)}.payment-method small{color:var(--muted);font-size:.68rem}.payment-method i{width:1.15rem;height:1.15rem;margin-left:auto;border:2px solid #93aab8;border-radius:50%}.payment-method[aria-pressed="true"] i{border-color:var(--green-700);box-shadow:inset 0 0 0 3px #fff;background:var(--green-700)}
.payment-stage{padding:1.5rem;border-radius:var(--radius-xl);background:var(--navy-900);color:#fff;text-align:center}.payment-stage h2{margin:.8rem 0 .35rem;color:#fff;font-size:1.5rem}.payment-stage p{max-width:30rem;margin:0 auto;color:#d8e5ef;font-size:.8rem}.status-medallion{width:5.8rem;height:5.8rem;display:grid;place-items:center;margin:auto;border:4px solid #fff;border-radius:50%;background:var(--green-game);box-shadow:0 8px 0 rgb(0 0 0 / 18%)}.status-medallion svg{width:2.6rem;height:2.6rem;stroke-width:3}.status-medallion--warning{background:var(--yellow-500);color:var(--navy-900)}.status-medallion--danger{background:#c94343}.status-medallion--info{background:var(--blue-600)}
.ownership-proof{margin-top:1rem;padding:1rem;border:2px solid var(--green-700);border-radius:var(--radius-md);background:var(--success-soft)}.ownership-proof h3{margin:0 0 .25rem}.ownership-proof p{margin:0;font-size:.73rem}
.loading-dots{display:inline-flex;gap:.3rem}.loading-dots i{width:.42rem;height:.42rem;border-radius:50%;background:currentColor;animation:dot 1s ease-in-out infinite}.loading-dots i:nth-child(2){animation-delay:.15s}.loading-dots i:nth-child(3){animation-delay:.3s}@keyframes dot{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-.25rem)}}
.skeleton{display:grid;gap:.55rem}.skeleton i{height:.8rem;border-radius:.4rem;background:#d9e5eb;animation:pulse 1.4s ease-in-out infinite}.skeleton i:nth-child(2){width:72%}.skeleton i:nth-child(3){width:52%}@keyframes pulse{50%{opacity:.45}}
.system-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem}.system-card{min-height:7.5rem;padding:1rem;border:1.5px solid #c2d4de;border-radius:var(--radius-md);background:var(--paper)}.system-card h3{margin:.65rem 0 .25rem;font-size:.9rem}.system-card p{margin:0;font-size:.7rem}
.icon-flip{transform:rotate(180deg)}
.toast{position:fixed;z-index:80;right:1rem;bottom:1rem;max-width:min(26rem,calc(100% - 2rem));padding:.85rem 1rem;border:2px solid #fff;border-radius:var(--radius-md);background:var(--navy-900);box-shadow:var(--shadow-dialog);color:#fff;font-size:.8rem;font-weight:700}

.reveal{opacity:0;transform:translateY(1.35rem);transition:opacity .6s var(--ease),transform .6s var(--ease)}.reveal.is-visible{opacity:1;transform:none}

@media (max-width:68rem){
  html{scroll-padding-top:7.6rem}
  .desktop-nav{display:none}.menu-button{display:grid}.desktop-only{display:none}
  .hero-grid{grid-template-columns:1fr 1fr;gap:1.5rem}.hero-card{padding:2rem}.hero h1{font-size:3.2rem}
  .split-layout,.faq-grid,.help-grid{gap:2.5rem}.module-grid{grid-template-columns:repeat(2,1fr)}.safety-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:50rem){
  .shell{width:min(calc(100% - 2rem),var(--content))}
  .truth-strip__inner{padding-block:.5rem;line-height:1.35}.truth-strip a{display:none}
  .header-inner{min-height:4.25rem}.header-actions>.button{display:none}
  .hero{min-height:auto}.hero-grid{grid-template-columns:1fr;padding-block:3rem 7rem}.hero-card{max-width:none}.hero-world{min-height:26rem}.city-art{width:min(100%,34rem)}
  .journey-bar{margin-top:-4.5rem}.journey-steps{grid-template-columns:repeat(2,1fr)}
  .section{padding-block:4.5rem}.split-layout,.readiness-grid,.faq-grid,.help-grid,.group-gate,.legal-grid{grid-template-columns:1fr}.split-layout,.faq-grid,.help-grid{gap:2rem}
  .section-heading--row{display:block}.section-heading--row>p{max-width:none;text-align:left}
  .mode-panel{grid-template-columns:1fr}.readiness-grid{gap:2rem}.module-grid{grid-template-columns:repeat(2,1fr)}.legal-grid>div{grid-column:1/-1}
  .footer-grid{grid-template-columns:1fr 1fr}.footer-actions{grid-column:1/-1;justify-content:flex-start}
  .route-card-wrap{grid-template-columns:1fr}.route-rail{display:none}.route-card{min-height:0}.route-shell{padding-bottom:9rem}.route-header{padding-inline:.25rem}
}

@media (max-width:35rem){
  html{scroll-padding-top:6.8rem}.shell{width:min(calc(100% - 2rem),var(--content))}
  .truth-strip{font-size:.69rem}.truth-strip__inner{min-height:2.9rem}
  .header-inner{min-height:4rem}.brand-mark{width:2.1rem;height:2.1rem}.brand-name{font-size:1.16rem}.brand-name small{font-size:.5rem}.header-actions{margin-left:auto}.menu-button{min-width:2.75rem}
  .hero-grid{padding-top:1.35rem}.hero-card{padding:1.35rem;border-radius:1.25rem}.eyebrow{font-size:.61rem}.hero h1{font-size:clamp(2.25rem,12vw,3rem)}.hero-lead{font-size:.95rem}.hero-actions{display:grid}.hero-actions .button{width:100%}.trust-list{display:grid}.hero-world{min-height:20rem;margin-inline:-.5rem}.city-art{width:100%}.salim-callout{top:.5rem;right:.15rem;padding:.45rem}.salim-callout img{width:2.6rem}.salim-callout small{display:none}.world-orbit{width:2.5rem;height:2.5rem;border-radius:.75rem;font-size:1.25rem}.depth-note{right:.5rem;bottom:.25rem}
  .journey-bar{margin-top:-3.2rem}.journey-bar>.shell{padding:1rem}.section-heading--row h2{font-size:1.7rem}.journey-steps{grid-template-columns:1fr}.journey-steps li{min-height:0}
  .section{padding-block:3.6rem}.section-heading{margin-bottom:2rem}.section-heading h2,.section-copy h2{font-size:2rem}
  .lesson-card{padding:1rem}.answer-list{grid-template-columns:1fr}.lesson-actions{display:grid}.lesson-actions .button{width:100%}.arabic-prompt{font-size:2rem}
  .tab-list{width:100%}.tab-list button{min-width:0;padding:.6rem}.mode-panel{padding:3.2rem 1rem 1rem}.mode-route ol{grid-template-columns:repeat(2,1fr);gap:1rem .4rem}.mode-route li:nth-child(2)::after{display:none}
  .readiness-facts{grid-template-columns:1fr}.readiness-facts .readiness-note{grid-column:1}.readiness-facts>div{padding:1rem}.readiness-facts strong{font-size:2.2rem}
  .catalog-toolbar{align-items:flex-start;flex-direction:column}.filter-group{display:grid;grid-template-columns:1fr 1fr;width:100%}.module-grid,.safety-grid{grid-template-columns:1fr}.module-card{min-height:16rem}
  .group-gate{padding:1rem;gap:1.25rem}.gate-code{grid-template-columns:repeat(6,2.2rem)}.gate-code i{height:2.4rem}.group-gate h3{font-size:1.35rem}
  .help-form{padding:1rem}.form-actions{align-items:stretch;flex-direction:column}.form-actions .button{width:100%}
  .footer-grid{grid-template-columns:1fr}.footer-actions{display:grid}.footer-actions .button{width:100%}.footer-bottom{display:grid}
  .route-shell{width:100%;padding-top:.75rem}.route-header{padding-inline:1rem}.route-header .brand-name{display:none}.route-header .button{font-size:.7rem}
  .route-card-wrap{border-radius:1.35rem 1.35rem 0 0}.prototype-toolbar{grid-template-columns:1fr 1fr;padding:.65rem}.prototype-toolbar .icon-button{grid-column:1/-1;width:100%}
  #route-content{padding:1.15rem 1rem 1.8rem}.flow-head{display:block}.state-tag{display:inline-flex;margin-top:.7rem}.flow-head h1{font-size:1.45rem}.choice-grid,.flow-grid,.module-detail,.system-grid{grid-template-columns:1fr}.choice-card{min-height:8rem}
  .input-row{grid-template-columns:1fr}.route-actions{align-items:stretch;flex-direction:column-reverse}.route-actions .button,.route-actions .text-button{width:100%}.route-actions--end{flex-direction:column}.segmented{grid-auto-flow:row;grid-template-columns:1fr 1fr}
  .sealed-content{grid-template-columns:1fr}.payment-stage{padding:1.1rem}.status-medallion{width:4.7rem;height:4.7rem}.toast{left:1rem;right:1rem}
}

@media (max-width:21rem){
  .shell{width:calc(100% - 1.25rem)}.hero-card{padding:1.1rem}.filter-group{grid-template-columns:1fr}.gate-code{grid-template-columns:repeat(6,1fr);width:100%;padding-inline:.4rem}.gate-code i{min-width:0}.prototype-toolbar{grid-template-columns:1fr}.prototype-toolbar .icon-button{grid-column:auto}.header-inner{gap:.45rem}.brand-name small{display:none}
}

@media (prefers-reduced-motion:reduce){
  :root{--motion-fast:1ms;--motion-base:1ms;--motion-slow:1ms}
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important}
  .reveal{opacity:1;transform:none}
}
/* --------------------------------------------------------------------------
   Legacy landing visual language (Work 02 refresh)
   -------------------------------------------------------------------------- */
body{font-family:var(--font-body);background:var(--pale-sky);color:var(--navy-900)}
.legacy-copy-frame{display:none;width:100%;height:100vh;border:0;background:#f2f8fb}
@media (min-width:54.0625rem){
  html.js body:not(.is-route){overflow:hidden}
  html.js body:not(.is-route) .site-header,html.js body:not(.is-route) .site-footer{display:none}
  html.js body:not(.is-route) #main-content,html.js body:not(.is-route) #public-view{height:100vh;min-height:0}
  html.js body:not(.is-route) #public-view>.legacy-copy-frame{display:block}
  html.js body:not(.is-route) #public-view>:not(.legacy-copy-frame){display:none!important}
}
#public-view{font-family:Nunito,"Segoe UI",system-ui,sans-serif}
#public-view h1,#public-view h2,#public-view h3,#public-view p{margin:0}
#public-view p{color:#51718b}
.legacy-shell{width:min(calc(100% - 3rem),71.25rem);margin-inline:auto}
.legacy-nav{position:fixed;inset:0 0 auto;z-index:50;background:rgb(242 248 251 / 86%);border:0;border-bottom:1px solid rgb(10 40 71 / 8%);box-shadow:none;backdrop-filter:blur(12px)}
.legacy-nav__inner{min-height:3.8rem;display:flex;align-items:center;gap:1.75rem}
.legacy-brand{display:inline-flex;align-items:center;min-height:2.75rem;border-radius:.6rem;font:900 1.34rem/1 Nunito,sans-serif;letter-spacing:-.03em}
.legacy-brand span{color:#1b6ca8}.legacy-brand b{color:#2eaf73}
.legacy-brand--light span{color:#b9e6ff}.legacy-brand--light b{color:#8ee4bf}
.legacy-nav__links{display:flex;align-items:center;justify-content:flex-end;gap:1.55rem;margin-left:auto}
.legacy-nav__links a,.legacy-login{min-height:2.75rem;display:inline-flex;align-items:center;border-radius:.5rem;color:#51718b;font-size:.88rem;font-weight:800;transition:color .18s ease,transform .18s ease}
.legacy-nav__links a:hover,.legacy-login:hover{color:#1b6ca8;transform:translateY(-1px)}
.legacy-login{color:#1b6ca8}
.legacy-nav .menu-button{display:none;margin-left:auto}
.legacy-nav .mobile-menu{position:absolute;top:100%;left:0;right:0;border-color:#c9dce7}
.legacy-nav .mobile-menu__inner{padding-block:.6rem 1rem}
.legacy-nav .mobile-menu a{font-family:Nunito,sans-serif}

.legacy-hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;background:linear-gradient(180deg,#bbdff5 0%,#ddf0fb 55%,#f2f8fb 100%)}
.hero-art{position:absolute;inset:0;z-index:1;overflow:hidden;user-select:none}
.hero-art__stage{position:absolute;inset:0;transform-origin:72% 56%;will-change:transform}
.hero-scene{position:absolute;top:3.8rem;right:-2%;width:min(92vw,calc((100vh - 3.8rem)*1.5),96rem);max-width:none;opacity:0;transition:opacity .45s ease;will-change:transform;pointer-events:none;mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 100%)}
.hero-scene.is-loaded{opacity:1}
.legacy-hero__content{position:relative;z-index:2;width:min(calc(100% - 3rem),77.5rem);margin-inline:auto;padding-top:7.5rem;padding-bottom:5.6rem;pointer-events:none}
.legacy-hero__card{width:min(35rem,100%);margin-top:2.5rem;padding:2.15rem 2.4rem;border:1px solid rgb(255 255 255 / 75%);border-radius:1.65rem;background:rgb(248 252 253 / 93%);box-shadow:0 1.4rem 3.4rem rgb(10 40 71 / 18%);backdrop-filter:blur(8px);pointer-events:auto}
.language-pill{width:max-content;max-width:100%;display:flex;align-items:center;gap:.62rem;margin-bottom:1.35rem!important;padding:.42rem .95rem;border:1px solid #f0d26a;border-radius:99px;background:#fff6d6;color:#795d05!important;font-size:.8rem;font-weight:850;white-space:nowrap}
.language-pill span{letter-spacing:.11em}
.legacy-hero h1{max-width:31rem;margin-bottom:1rem!important;color:#0a2847;font-size:clamp(2.55rem,5.6vw,4.15rem);font-weight:950;line-height:1.02;letter-spacing:-.045em;text-wrap:balance}
.legacy-hero h1 span{color:#2eaf73}
.hero-copy{max-width:31.25rem;margin-bottom:1.65rem!important;color:#51718b!important;font-size:1.11rem;line-height:1.65;text-wrap:pretty}
.legacy-trust{display:flex;flex-wrap:wrap;gap:.55rem 1rem;margin:0;padding:0;list-style:none;color:#7890a4;font-size:.8rem;font-weight:750}

.legacy-section{padding:5.5rem 1.5rem;background:#f2f8fb;border-top:1px solid rgb(10 40 71 / 8%);scroll-margin-top:4.5rem}
.legacy-section--white{background:#fff}
.legacy-heading{max-width:43rem;margin:0 auto 3rem;text-align:center}
.legacy-kicker{display:inline-flex;margin-bottom:1rem;padding:.35rem .9rem;border-radius:99px;background:#e3f0f9;color:#1b6ca8;font-size:.72rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.legacy-kicker--green{background:#e1f5ee;color:#085041}
.legacy-kicker--dark{border:1px solid rgb(93 202 165 / 30%);background:rgb(93 202 165 / 12%);color:#8ee4bf}
.legacy-heading h2,#kelompok h2,.game-section h2{margin-bottom:.75rem!important;color:#0a2847;font-size:clamp(2rem,3.6vw,2.65rem);font-weight:950;line-height:1.12;letter-spacing:-.025em;text-wrap:balance}
.legacy-heading>p,.section-lead{font-size:1.05rem;line-height:1.65;text-wrap:pretty}
.proof-row{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1rem;margin-top:1.1rem;color:#51718b;font-size:.78rem;font-weight:850}
.proof-row span::first-letter{color:#2eaf73}.proof-row i{opacity:.35;font-style:normal}

.language-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.language-card,.legacy-card{position:relative;padding:1.65rem 1.45rem;border:1.5px solid rgb(10 40 71 / 10%);border-radius:1.25rem;background:#fff}
.language-card--featured,.mode-card--featured{border:2px solid #2eaf73;background:linear-gradient(180deg,#f0fbf6,#fff 55%)}
.popular{position:absolute;top:-.8rem;left:1.4rem;padding:.3rem .85rem;border-radius:99px;background:#2eaf73;color:#fff;font-size:.68rem;font-weight:900;letter-spacing:.04em;white-space:nowrap}
.glyph{width:3.55rem;height:3.55rem;display:grid;place-items:center;margin-bottom:1rem;border-radius:.9rem;color:#fff;font-size:1.9rem;font-weight:850}
.glyph--en{background:#d6336c}.glyph--jp{background:#8e44ad}.glyph--kr{background:#d35400}.glyph--zh{background:#1e8449}.glyph--ar{background:#2471a3}.glyph--hi{background:#e74c3c}
.language-card h3,.legacy-card h3{margin-bottom:.4rem!important;font-size:1.2rem;font-weight:950}
.language-card p,.legacy-card p{font-size:.9rem;line-height:1.55;text-wrap:pretty}
.language-card small{display:block;margin-top:.8rem;color:#1b6ca8;font-size:.76rem;font-weight:900}

.mode-grid{max-width:58rem;display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin-inline:auto}
.mode-card{padding:2rem 1.9rem}
.mode-card h3{margin-bottom:.15rem!important;font-size:1.35rem}
.card-subtitle{margin-bottom:1.15rem!important;color:#7e96aa!important;font-size:.84rem!important;font-weight:800}
.icon-bubble{width:3.2rem;height:3.2rem;display:grid;place-items:center;margin-bottom:1.15rem;border-radius:.9rem;font-size:1.4rem;font-weight:900}
.icon-bubble--blue{background:#e3f0f9;color:#1b6ca8}.icon-bubble--green{background:#e1f5ee;color:#0f6e56}
.tick-list{display:grid;gap:.72rem;margin:0;padding:0;list-style:none;color:#0a2847;font-size:.9rem;font-weight:750}
.tick-list li{position:relative;padding-left:1.65rem}.tick-list li::before{content:"✓";position:absolute;left:0;color:#2eaf73;font-weight:950}
.soft-note{margin-top:1.3rem!important;padding:.8rem 1rem;border-radius:.75rem;background:#f2f8fb;color:#51718b!important;font-size:.8rem!important;font-weight:750}
.soft-note--green{background:#e1f5ee;color:#0f6e56!important}
.pill-link{display:inline-flex;margin-top:1.15rem;padding:.68rem 1rem;border-radius:99px;background:#1b6ca8;color:#fff;font-size:.82rem;font-weight:900}
.mode-card--featured .pill-link{background:#2eaf73}

.step-grid,.coin-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.step-number{width:2.65rem;height:2.65rem;display:grid;place-items:center;margin-bottom:1.1rem;border-radius:50%;color:#fff;box-shadow:0 3px 0 rgb(10 40 71 / 25%);font-size:1.05rem}
.step-number--blue{background:#1b6ca8}.step-number--green{background:#2eaf73}.step-number--yellow{background:#d9a90c}
.coin-card{overflow:hidden}.coin-card>span{display:block;margin-bottom:1.2rem;color:#cddce6;font-size:2.6rem;font-weight:950;line-height:1}.coin-card:nth-child(2)>span{color:#a9dfcb}.coin-card:nth-child(3)>span{color:#f0d26a}

.practice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.practice-grid article{display:flex;align-items:flex-start;gap:1rem;padding:1.25rem;border:1.5px solid rgb(10 40 71 / 9%);border-radius:1rem;background:#f7fbfd}
.practice-grid article>span{width:2.65rem;height:2.65rem;flex:0 0 2.65rem;display:grid;place-items:center;border-radius:.75rem;background:#e3f0f9;color:#1b6ca8;font-size:1.25rem;font-weight:900}
.practice-grid article:nth-child(3n+2)>span{background:#e1f5ee;color:#0f6e56}.practice-grid article:nth-child(3n)>span{background:#fff1c3;color:#8a6200}
.practice-grid h3{margin-bottom:.2rem!important;font-size:.95rem;font-weight:900}.practice-grid p{font-size:.8rem;line-height:1.5}
.human-copy{margin:1.25rem auto 0!important;padding:1rem 1.2rem;border-radius:.85rem;background:#e1f5ee;color:#0f6e56!important;text-align:center;font-size:.85rem}

.group-layout,.game-layout{display:grid;grid-template-columns:1fr 1fr;gap:4.5rem;align-items:center}
.group-layout>.legacy-kicker{margin-bottom:1rem}
.group-points,.game-points{display:grid;gap:1rem;margin-top:1.7rem}
.group-points article,.game-points article{display:flex;align-items:flex-start;gap:.9rem}
.group-points article>b,.game-points article>b{width:2rem;height:2rem;flex:0 0 2rem;display:grid;place-items:center;border-radius:.65rem;background:#e1f5ee;color:#0f6e56}
.group-points h3,.game-points h3{margin-bottom:.18rem!important;font-size:1rem;font-weight:900}.group-points p,.game-points p{font-size:.84rem;line-height:1.52}
.group-board{padding:1.45rem;border:2px solid #0a2847;border-radius:1.4rem;background:#fff;box-shadow:0 10px 0 rgb(10 40 71 / 10%);transform:rotate(1deg)}
.group-board__head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}.group-board__head small{color:#1b6ca8;font-size:.65rem;font-weight:900;letter-spacing:.1em}.group-board__head h3{font-size:1.35rem}.group-board__head>span{padding:.35rem .55rem;border-radius:99px;background:#e1f5ee;color:#0f6e56;font-size:.68rem;font-weight:900}
.target-progress{height:.72rem;margin:1.2rem 0 .45rem;overflow:hidden;border-radius:99px;background:#dce9ee}.target-progress span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#2eaf73,#5dcaa5)}
.group-board>p{font-size:.75rem}.group-board ul{display:grid;grid-template-columns:1fr 1fr;gap:.55rem;margin:1rem 0;padding:0;list-style:none}.group-board li{display:grid;grid-template-columns:2rem 1fr auto;align-items:center;gap:.55rem;padding:.55rem;border-radius:.75rem;background:#f2f8fb;font-size:.75rem}.group-board li>span{width:2rem;height:2rem;display:grid;place-items:center;border-radius:.6rem;background:#1b6ca8;color:#fff;font-size:.62rem;font-weight:900}.group-board li small{color:#0f6e56;font-weight:900}
.friendly-battle{padding:.85rem;border-radius:.8rem;background:#fff6d6}.friendly-battle b{font-size:.82rem}.friendly-battle p{margin-top:.15rem!important;font-size:.73rem}

.game-section{background:#042c53;color:#fff}
.game-section h2{color:#fff}.game-section .game-lead,.game-section .game-points p{color:rgb(255 255 255 / 66%)}
.game-points article>b{background:rgb(93 202 165 / 16%);color:#8ee4bf}
.game-points h3{color:#fff}
.game-note{margin-top:1.5rem!important;padding:.9rem 1rem;border:1px solid rgb(245 197 24 / 25%);border-radius:.85rem;background:rgb(245 197 24 / 8%);color:#f7df8e!important;font-size:.82rem;font-weight:750}
.game-visual{margin:0;overflow:hidden;border:1px solid rgb(93 202 165 / 24%);border-radius:1.4rem;background:linear-gradient(180deg,#bfe5f7,#83d5bf);box-shadow:0 1.8rem 4rem rgb(0 0 0 / 38%)}
.game-visual img{width:100%;padding:1.25rem 1rem .2rem;filter:drop-shadow(0 1.2rem .8rem rgb(4 44 83 / 24%))}
.game-visual figcaption{padding:.7rem 1rem 1rem;color:rgb(255 255 255 / 70%);font-size:.72rem;text-align:center}

.city-feature-grid,.city-memory-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.city-feature-grid article>span{width:3rem;height:3rem;display:grid;place-items:center;margin-bottom:1rem;border-radius:.8rem;background:#e3f0f9;color:#1b6ca8;font-size:1.35rem;font-weight:900}
.city-feature-grid article:nth-child(2)>span{background:#e1f5ee;color:#0f6e56}.city-feature-grid article:nth-child(3)>span{background:#fbefd3;color:#9a6b0e}
.city-feature-grid article>div{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.85rem}.city-feature-grid i{padding:.22rem .62rem;border:1px solid rgb(10 40 71 / 12%);border-radius:99px;color:#51718b;font-size:.68rem;font-style:normal;font-weight:750}
.city-memory-grid{margin-top:1rem}.city-memory-grid article{padding:1.4rem;border:1.5px solid rgb(10 40 71 / 9%);border-radius:1rem;background:#f2f8fb}.city-memory-grid h3{margin-bottom:.3rem!important;font-size:1rem;font-weight:900}.city-memory-grid p{font-size:.82rem}
.city-unique{margin-top:1.5rem!important;padding:.9rem 1rem;border-radius:.85rem;background:#e1f5ee;color:#0f6e56!important;text-align:center;font-size:.82rem}

.safe-pill{display:inline-flex;margin-top:1rem;padding:.5rem 1rem;border:1px solid rgb(10 40 71 / 10%);border-radius:99px;background:#fff;color:#0a2847;font-size:.78rem;font-weight:850}
.safe-pill::first-letter{color:#2eaf73}
.safety-grid-old{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.safety-grid-old article>span{width:3.2rem;height:3.2rem;display:grid;place-items:center;margin-bottom:1rem;border-radius:.85rem;background:#e3f0f9;color:#1b6ca8;font-size:1.25rem;font-weight:900}.safety-grid-old article:nth-child(2n)>span{background:#e1f5ee;color:#0f6e56}.safety-grid-old article:nth-child(4)>span{background:#fbefd3;color:#9a6b0e}

.school-wrap{padding:0 1.5rem 5.5rem;background:#f2f8fb}
.school-card{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;padding:2.3rem 2.5rem;border-radius:1.45rem;background:linear-gradient(155deg,#0f6e56,#1d9e75);box-shadow:0 1.2rem 2.6rem rgb(15 110 86 / 18%);color:#fff}
.school-card span{font-size:.68rem;font-weight:900;letter-spacing:.12em}.school-card h2{margin:.6rem 0!important;color:#fff;font-size:clamp(1.7rem,3vw,2.2rem);font-weight:950;line-height:1.15}.school-card p{color:#d7f2e7!important}.school-card ul{display:grid;align-content:center;gap:.7rem;margin:0;padding:0;list-style:none;color:#eaf7f1;font-size:.88rem;font-weight:750}

.legacy-faq{max-width:47.5rem;display:grid;gap:.75rem;margin-inline:auto}
.legacy-faq details{padding:0 1.45rem;border:1.5px solid rgb(10 40 71 / 10%);border-radius:1rem;background:#f2f8fb}
.legacy-faq summary{min-height:4rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;cursor:pointer;list-style:none;color:#0a2847;font-size:1rem;font-weight:900}.legacy-faq summary::-webkit-details-marker{display:none}
.legacy-faq summary span{width:1.8rem;height:1.8rem;flex:0 0 1.8rem;display:grid;place-items:center;border-radius:50%;background:#e3f0f9;color:#1b6ca8;font-size:1.15rem}
.legacy-faq details[open] summary span{transform:rotate(45deg);background:#2eaf73;color:#fff}
.legacy-faq details p{padding:0 0 1.2rem;font-size:.9rem;line-height:1.65}

.final-cta{padding:5.5rem 1.5rem;background:#f2f8fb}
.final-cta>div>div{position:relative;overflow:hidden;padding:4.5rem 2rem;border-radius:1.75rem;background:linear-gradient(160deg,#1b6ca8,#15598c);color:#fff;text-align:center}
.final-cta>div>div::before,.final-cta>div>div::after{content:"";position:absolute;border-radius:50%;background:rgb(255 255 255 / 6%)}.final-cta>div>div::before{top:-5rem;right:-4rem;width:16rem;height:16rem}.final-cta>div>div::after{bottom:-7rem;left:-3rem;width:18rem;height:18rem}
.final-cta h2{position:relative;margin-bottom:.6rem!important;color:#fff;font-size:clamp(2rem,3.6vw,2.65rem);font-weight:950}.final-cta p{position:relative;max-width:36rem;margin:0 auto 1.7rem!important;color:rgb(255 255 255 / 72%)!important}.final-cta a{position:relative;display:inline-flex;padding:.9rem 2rem;border-radius:99px;background:#2eaf73;box-shadow:0 4px 0 #1d9e75;color:#fff;font-size:1rem;font-weight:900;transition:transform .18s ease,box-shadow .18s ease}.final-cta a:hover{transform:translateY(-2px);box-shadow:0 6px 0 #1d9e75}
.contact-fab{position:fixed;right:1.25rem;bottom:1.25rem;z-index:45;display:inline-flex;align-items:center;gap:.55rem;padding:.72rem 1.15rem .72rem .85rem;border-radius:99px;background:#25d366;box-shadow:0 .65rem 1.8rem rgb(37 211 102 / 42%);color:#fff;font-size:.86rem;font-weight:900}.contact-fab span{width:1.45rem;height:1.45rem;display:grid;place-items:center;border:2px solid #fff;border-radius:50%}

.site-footer{padding:3.4rem 1.5rem 6rem;background:#f2f8fb;color:#7e96aa}
.legacy-footer{display:grid;justify-items:center;text-align:center}.legacy-footer .legacy-brand{font-size:1.25rem}.footer-glyphs{display:flex;flex-wrap:wrap;justify-content:center;gap:.55rem;margin:1.1rem 0 .65rem}.footer-glyphs span{width:2.15rem;height:2.15rem;display:grid;place-items:center;border-radius:.58rem;background:#d6336c;color:#fff;font-size:1rem;font-weight:850}.footer-glyphs span:nth-child(2){background:#2471a3}.footer-glyphs span:nth-child(3){background:#8e44ad}.footer-glyphs span:nth-child(4){background:#1e8449}.footer-glyphs span:nth-child(5){background:#d35400}.footer-glyphs span:nth-child(6){background:#e74c3c}
.legacy-footer p{margin:0 0 .7rem;color:#9db2c4;font-size:.7rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.legacy-footer small{font-size:.76rem}

@media (max-width:68rem){
  .legacy-nav__links{gap:1rem}.legacy-nav__links a{font-size:.78rem}
  .language-grid{grid-template-columns:repeat(2,1fr)}
  .practice-grid{grid-template-columns:repeat(2,1fr)}
  .safety-grid-old{grid-template-columns:repeat(2,1fr)}
  .group-layout,.game-layout{gap:2.5rem}
}
@media (max-width:54rem){
  html{scroll-padding-top:4.5rem}
  .legacy-section{scroll-margin-top:0}
  .legacy-nav__links{display:none}.legacy-nav .menu-button{display:grid}.legacy-login{margin-left:auto}
  .hero-art{display:none}
  .legacy-hero{min-height:auto;display:block;padding-bottom:0}
  .legacy-hero__content{padding-top:5.4rem;padding-bottom:3rem}
  .legacy-hero__card{width:min(35rem,100%);margin:0 auto}
  .group-layout,.game-layout,.school-card{grid-template-columns:1fr}.group-layout,.game-layout{gap:2rem}
  .school-card{gap:1.5rem}
  .city-feature-grid,.city-memory-grid{grid-template-columns:1fr 1fr}.city-feature-grid article:last-child,.city-memory-grid article:last-child{grid-column:1/-1}
}
@media (max-width:38rem){
  html{scroll-padding-top:4.25rem}
  .legacy-shell,.legacy-hero__content{width:min(calc(100% - 2rem),71.25rem)}
  .legacy-nav__inner{width:calc(100% - 2rem);min-height:3.6rem;gap:.7rem}.legacy-brand{font-size:1.2rem}.legacy-login{font-size:.78rem}
  .legacy-hero{padding-bottom:0}
  .legacy-hero__content{padding-top:4.85rem;padding-bottom:2.25rem}
  .legacy-hero__card{padding:1.5rem 1.35rem;border-radius:1.35rem}
  .language-pill{gap:.4rem;margin-bottom:1rem!important;padding:.35rem .7rem;font-size:.67rem}.language-pill span{letter-spacing:.06em}
  .legacy-hero h1{font-size:clamp(2.35rem,12vw,3.05rem)}
  .hero-copy{font-size:.98rem;line-height:1.58}.legacy-trust{display:grid;gap:.38rem}
  .legacy-section{padding:4.2rem 1rem}.legacy-heading{margin-bottom:2.2rem}.legacy-heading h2,#kelompok h2,.game-section h2{font-size:2rem}
  .proof-row i{display:none}.proof-row{display:grid}
  .language-grid,.mode-grid,.step-grid,.coin-grid,.practice-grid,.safety-grid-old,.city-feature-grid,.city-memory-grid{grid-template-columns:1fr}
  .city-feature-grid article:last-child,.city-memory-grid article:last-child{grid-column:auto}
  .mode-card{padding:1.65rem 1.35rem}
  .group-board{padding:1rem;transform:none}.group-board ul{grid-template-columns:1fr}
  .school-wrap{padding:0 1rem 4.2rem}.school-card{width:100%;padding:1.6rem 1.3rem}
  .legacy-faq details{padding-inline:1rem}.legacy-faq summary{font-size:.9rem}
  .final-cta{padding:4.2rem 1rem}.final-cta>div>div{padding:3.5rem 1.25rem}
  .contact-fab{right:.75rem;bottom:.75rem;padding:.65rem .9rem}
}

/* --------------------------------------------------------------------------
   Minimal account and access flow
   -------------------------------------------------------------------------- */
body.route-access{background:#2eaf73}
.route-access .route-view{min-height:100dvh;background:linear-gradient(155deg,#62cda9 0%,#3fba83 52%,#2eaf73 100%)}
.route-access .route-backdrop,.route-access .route-rail{display:none}
.route-access .route-shell{width:min(calc(100% - 2rem),44rem);min-height:100dvh;display:flex;flex-direction:column;padding:max(1.25rem,env(safe-area-inset-top)) 0 max(3rem,env(safe-area-inset-bottom))}
.route-access .route-header{width:min(100%,31rem);margin:0 auto 1rem}
.route-access[data-route-screen="entry"] .route-header,.route-access[data-route-screen="recovery"] .route-header{width:min(100%,37rem)}
.route-access .legacy-brand--light span,.route-access .legacy-brand--light b{color:#0a2847}
.route-access .route-header .button{min-height:2.65rem;padding:.55rem .2rem;border:0;background:transparent;box-shadow:none;color:#0a2847;font-size:.76rem}
.route-access .route-header .button:hover{background:transparent;box-shadow:none;color:#0a2847;transform:none;text-decoration:underline}
.route-access .route-header .button:focus-visible{box-shadow:var(--focus-ring)}
.route-access .route-card-wrap{display:block;width:100%;max-width:31rem;margin:auto;border:1px solid rgb(10 40 71 / 9%);border-radius:1.45rem;background:#fff;box-shadow:0 1rem 3rem rgb(10 40 71 / 10%);overflow:hidden}
.route-access[data-route-screen="entry"] .route-card-wrap,.route-access[data-route-screen="recovery"] .route-card-wrap{max-width:37rem}
.route-access .route-card{min-height:0;background:#fff}
.route-access .prototype-toolbar{display:none}
.route-access.is-review-mode .prototype-toolbar{display:grid}
.route-access #route-content{padding:2rem 2.15rem 2.2rem}
.route-access .flow-head{display:block;margin:0 0 1.35rem;padding:0;border:0;text-align:center}
.route-access .flow-eyebrow,.route-access .state-tag{display:none}
.route-access .flow-head__copy{max-width:none}
.route-access .flow-head h1{margin-bottom:.45rem;font-size:1.75rem;letter-spacing:-.025em}
.route-access .flow-head p{max-width:25rem;margin-inline:auto;color:#657f91;font-size:.88rem}
.route-access .flow-body{max-width:none}
.route-access .form-card{padding:0;border:0;border-radius:0;background:transparent}
.route-access .field{margin-top:1rem;font-size:.8rem}
.route-access .field input,.route-access .field select,.route-access .field textarea,.route-access .field-input{min-height:3.25rem;border:1px solid #b8ccd7;border-radius:.8rem;background:#fff;font-size:1rem}
.route-access .field input:hover,.route-access .field select:hover,.route-access .field textarea:hover{border-color:#8eacbd}
.route-access .segmented{margin-bottom:.75rem;padding:.25rem;border:0;border-radius:.8rem;background:#edf4f7}
.route-access .segmented button{min-height:2.65rem;border:1px solid transparent;border-radius:.62rem;color:#617b8d;font-size:.78rem}
.route-access .segmented button[aria-pressed="true"]{border-color:rgb(10 40 71 / 7%);background:#fff;box-shadow:0 .2rem .65rem rgb(10 40 71 / 8%);color:#0a2847}
.route-access .segmented--methods{display:flex;justify-content:center;gap:.25rem;margin:0 0 .35rem;background:transparent}
.route-access .segmented--methods button{min-height:2.45rem;padding-inline:.8rem}
.route-access .segmented--methods button[aria-pressed="true"]{border-color:#a9c8d9;box-shadow:none;color:#1b6ca8}
.route-access .segmented button:focus-visible,.route-access .segmented button[aria-pressed="true"]:focus-visible{box-shadow:var(--focus-ring)}
.route-access .flow-form>.route-actions{align-items:stretch;flex-direction:column;gap:.45rem;margin-top:1.2rem}
.route-access .flow-form>.route-actions .button{width:100%;min-height:3.15rem;border:0;border-radius:.82rem;background:#5dcaa5;box-shadow:none;color:#0a2847}
.route-access .flow-form>.route-actions .button:hover{background:#73d4b3;box-shadow:none;transform:none}
.route-access .flow-form>.route-actions .button:focus-visible{box-shadow:var(--focus-ring)}
.route-access .flow-form>.route-actions .text-button{width:100%;min-height:2.6rem;color:#51718b;font-size:.78rem}
.route-access .access-choice-list{grid-template-columns:1fr;gap:.65rem}
.route-access .access-choice-list .choice-card{min-height:0;display:grid;grid-template-columns:2.6rem minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:center;gap:.05rem .85rem;padding:.8rem .85rem;border:1px solid #c6d7df;border-radius:.9rem;background:#fff;box-shadow:none}
.route-access .access-choice-list .choice-card:hover,.route-access .access-choice-list .choice-card:focus-visible{border-color:#75adca;background:#f7fbfd;transform:none}
.route-access .access-choice-list .icon-tile{grid-column:1;grid-row:1 / 3;width:2.6rem;height:2.6rem;margin:0;border-radius:.72rem}
.route-access .access-choice-list .icon-tile svg{width:1.2rem;height:1.2rem}
.route-access .access-choice-list b{grid-column:2;grid-row:1;font-size:.86rem}
.route-access .access-choice-list p{grid-column:2;grid-row:2;margin:0;color:#698293;font-size:.7rem}
.route-access .access-choice-list small{grid-column:3;grid-row:1 / 3;margin:0;padding:0;color:#1b6ca8;font-size:.68rem;white-space:nowrap}
.route-access .privacy-note--quiet{margin-top:1rem;padding:.8rem 1rem;border:0;border-radius:.75rem;background:#f3f8fa;color:#607887;font-size:.7rem;text-align:center}
.route-access .prototype-note{margin:.85rem 0 0;color:#8095a3;font-size:.66rem;text-align:center}
.route-access .reviewer-only{display:none}.route-access.is-review-mode .reviewer-only{display:inline-flex}
.route-access .route-actions--secondary{justify-content:center;margin-top:.55rem}
.route-access .consent{align-items:flex-start;padding:.1rem 0;color:#607887;line-height:1.45}
.route-access .status-panel{border-width:1px;box-shadow:none}

@media (max-width:35rem){
  .route-access .route-shell{width:100%;padding:max(.7rem,env(safe-area-inset-top)) 0 env(safe-area-inset-bottom)}
  .route-access .route-header{width:100%;margin-bottom:.55rem;padding-inline:1rem}
  .route-access .route-card-wrap,.route-access[data-route-screen="entry"] .route-card-wrap,.route-access[data-route-screen="recovery"] .route-card-wrap{max-width:none;margin-top:auto;border-width:1px 0 0;border-radius:1.35rem 1.35rem 0 0;box-shadow:0 -.6rem 2rem rgb(10 40 71 / 7%)}
  .route-access #route-content{padding:1.55rem 1.1rem 2rem}
  .route-access .flow-head{margin-bottom:1.1rem}
  .route-access .flow-head h1{font-size:1.55rem}
  .route-access .prototype-toolbar{grid-template-columns:1fr 1fr}
  .route-access .prototype-toolbar .icon-button{grid-column:1 / -1}
  .route-access .access-choice-list .choice-card{grid-template-columns:2.55rem minmax(0,1fr) auto;padding:.75rem}
  .route-access .access-choice-list small{font-size:0;color:transparent}
  .route-access .access-choice-list small::after{content:"›";color:#1b6ca8;font-size:1.2rem}
}

/* --------------------------------------------------------------------------
   Legacy login shell + familiar account buttons
   -------------------------------------------------------------------------- */
.auth-legacy-banner,.auth-legacy-footer{display:none}
body:not(.route-access) .token--ar,
body:not(.route-access) .token--jp,
body:not(.route-access) .token--zh,
body:not(.route-access) .token--kr,
body:not(.route-access) .token--hi{display:none}
@keyframes auth-token-float{0%,100%{transform:translateY(0)}50%{transform:translateY(var(--auth-token-rise,-6px))}}
@keyframes auth-mascot-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

body.route-access{background:#2eaf73;font-family:Nunito,sans-serif}
.route-access .route-view{min-height:100vh;min-height:100dvh;overflow:auto;background:linear-gradient(165deg,#5dcaa5,#3dba82 45%,#2eaf73)}
.route-access .route-backdrop{position:absolute;inset:0;display:block;background-image:radial-gradient(rgb(255 255 255 / 12.6%) 2px,transparent 2px);background-size:28px 28px}
.route-access .route-backdrop::before{top:-70px;right:-50px;width:230px;height:230px;background:rgb(255 255 255 / 13%)}
.route-access .route-backdrop::after{top:34%;left:-70px;width:180px;height:180px;background:rgb(255 255 255 / 9%)}
.route-access .route-backdrop>.auth-skyline{position:absolute;bottom:0;left:0;width:100%;height:130px;stroke:none}
.route-access .token{display:grid;place-items:center;border-radius:50%;background:#f5c518;box-shadow:0 4px 0 #c9a30c;color:#8c5a08;font-family:Nunito,sans-serif;font-weight:900;line-height:normal;pointer-events:none;animation-name:auth-token-float;animation-timing-function:ease-in-out;animation-iteration-count:infinite;will-change:transform}
.route-access .token--a{top:21%;left:8%;width:40px;height:40px;font-size:17px;--auth-coin-duration:8s;animation-duration:var(--auth-coin-duration);animation-delay:0s}
.route-access .token--ar{top:58%;left:11%;width:34px;height:34px;font-size:15px;--auth-coin-duration:10s;animation-duration:var(--auth-coin-duration);animation-delay:.8s}
.route-access .token--jp{top:40%;left:4%;width:28px;height:28px;font-size:13px;box-shadow:0 3px 0 #c9a30c;--auth-coin-duration:9s;animation-duration:var(--auth-coin-duration);animation-delay:1.4s}
.route-access .token--zh{top:17%;right:10%;width:38px;height:38px;font-size:16px;--auth-coin-duration:10.5s;animation-duration:var(--auth-coin-duration);animation-delay:.4s}
.route-access .token--kr{top:55%;right:7%;width:32px;height:32px;font-size:14px;--auth-coin-duration:8.5s;animation-duration:var(--auth-coin-duration);animation-delay:1.1s}
.route-access .token--hi{top:33%;right:21%;width:24px;height:24px;font-size:12px;box-shadow:0 3px 0 #c9a30c;--auth-coin-duration:11s;animation-duration:var(--auth-coin-duration);animation-delay:1.8s}
@media (prefers-reduced-motion:reduce){
  .route-access .route-backdrop>.token{animation:none!important}
}

.route-access .route-shell{width:100%;min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:max(54px,env(safe-area-inset-top)) 20px max(150px,calc(env(safe-area-inset-bottom) + 130px))}
.route-access .route-header,.route-access[data-route-screen="entry"] .route-header,.route-access[data-route-screen="recovery"] .route-header{display:none}
.route-access .route-card-wrap,.route-access[data-route-screen="entry"] .route-card-wrap,.route-access[data-route-screen="recovery"] .route-card-wrap{width:100%;max-width:474px;margin:0;border:0;border-radius:26px;background:#fff;box-shadow:0 30px 64px rgb(4 44 83 / 30%);overflow:hidden}
.route-access .auth-legacy-banner{position:relative;height:262.859375px;display:block;overflow:hidden;padding:30px 30px 26px;background-image:radial-gradient(circle at calc(100% - 34px) 26px,#f5c518 0 2px,transparent 2.5px),radial-gradient(circle at calc(100% - 62px) 48px,rgb(255 255 255 / 70%) 0 1.5px,transparent 2px),radial-gradient(circle at 40px 70px,#5dcaa5 0 1.5px,transparent 2px),linear-gradient(135deg,#2480c4,#1b6ca8 50%,#15598c);color:#fff;text-align:center}
.route-access .auth-legacy-banner::before,.route-access .auth-legacy-banner::after{content:"";position:absolute;width:130px;height:130px;border-radius:50%}
.route-access .auth-legacy-banner::before{top:-44px;left:-34px;background:rgb(93 202 165 / 18%)}
.route-access .auth-legacy-banner::after{right:-40px;bottom:-50px;background:rgb(255 255 255 / 8%)}
.auth-legacy-brand{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:9px;margin-bottom:16px}
.auth-legacy-mark{width:32px;height:32px;display:grid;place-items:center;border-radius:10px;background:linear-gradient(135deg,#5dcaa5,#f5c518);box-shadow:0 3px 0 rgb(4 44 83 / 22%);color:#042c53}
.auth-legacy-mark svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.auth-legacy-brand strong{color:#fff;font:900 20px/normal Nunito,sans-serif;letter-spacing:-.4px}.auth-legacy-brand em{color:#f5c518;font-style:normal}
.auth-legacy-mascot-wrap{position:relative;z-index:2;width:92px;height:92px;display:block;margin:0 auto;animation:auth-mascot-float 4.5s ease-in-out infinite}
.auth-legacy-mascot{width:92px;height:auto;margin:auto;filter:drop-shadow(0 10px 14px rgb(4 44 83 / 32%))}
.auth-legacy-glyphs{position:relative;z-index:2;display:flex;justify-content:center;gap:7px;margin:13px 0 2px}.auth-legacy-glyphs span{width:27px;height:27px;display:grid;place-items:center;border:1.5px solid rgb(255 255 255 / 42%);border-radius:50%;background:rgb(255 255 255 / 16%);color:#fff;font:800 13px/1 Nunito,sans-serif}
.auth-legacy-banner>p{position:relative;z-index:2;margin:8px 0 0;color:#f5c518;font:800 13.5px/normal Nunito,sans-serif;letter-spacing:.08em}
.route-access .route-card{min-height:0;background:#fff}
.route-access #route-content{padding:18px 30px 22px;font-family:Nunito,sans-serif;line-height:1.55}
.route-access .flow-head{margin-bottom:1.05rem}.route-access .flow-head h1{font-size:1.65rem}.route-access .flow-head p{font-size:.84rem}
.route-access .auth-legacy-footer{display:block;margin:26px auto 0;color:rgb(255 255 255 / 85%);font:700 13px/normal Nunito,sans-serif;text-align:center}

.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 19px;padding-bottom:4px}
.auth-tabs a{min-height:42px;display:flex;align-items:center;justify-content:center;border:1px solid #dce6eb;border-radius:10px;background:#f5f8fa;color:#7e96aa;font-family:Nunito,sans-serif;font-size:14px;font-weight:800;line-height:1.4}
.auth-tabs a:hover{border-color:#aac3d2;color:#1b6ca8}
.auth-tabs a.is-active{border-color:#1b6ca8;background:#1b6ca8;box-shadow:0 4px 0 #134e7c;color:#fff}
.auth-tabs a:focus-visible{box-shadow:var(--focus-ring)}
.auth-plan{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;margin:.25rem 0 .75rem;padding:10px 11px;border:1px solid #b9d9cc;border-radius:11px;background:#eefaf5;color:#0a2847;font-family:Nunito,sans-serif}
.auth-plan>span{padding:4px 7px;border-radius:99px;background:#2eaf73;color:#fff;font-size:10px;font-weight:900;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap}
.auth-plan>div{min-width:0;display:grid;gap:1px}.auth-plan strong{font-size:13px;font-weight:900;line-height:1.3}.auth-plan p{margin:0!important;color:#567565!important;font-size:11px;line-height:1.4}.auth-plan p b{color:#0f6e56;font-size:12px}
.auth-plan>a{min-height:32px;display:inline-flex;align-items:center;padding:0 5px;border-radius:6px;color:#1b6ca8;font-size:11px;font-weight:900}.auth-plan>a:hover{text-decoration:underline}.auth-plan>a:focus-visible{box-shadow:var(--focus-ring)}
.auth-entry-head{margin-bottom:17px;text-align:center}.auth-entry-head h1{margin:0 0 5px;color:#0a2847;font-family:Nunito,sans-serif;font-size:25px;font-weight:900;line-height:1.18;letter-spacing:-.02em}.auth-entry-head h1:focus{outline:0;box-shadow:none}.auth-entry-head p{margin:0;color:#647f91;font-family:Nunito,sans-serif;font-size:13.5px;font-weight:500;line-height:1.5}
.auth-role-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.auth-role-option{min-width:0;min-height:76px;display:grid;grid-template-columns:34px minmax(0,1fr) 15px;align-items:center;gap:8px;padding:10px;border:1px solid #cfdee6;border-radius:12px;background:#fff;color:#0a2847;text-align:left;transition:border-color .16s ease,background .16s ease,box-shadow .16s ease,transform .16s ease}
.auth-role-option:hover{border-color:#83aec5;background:#f8fbfd;box-shadow:0 5px 14px rgb(10 40 71 / 8%);transform:translateY(-1px)}
.auth-role-option__icon{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;background:#e6f1f8;color:#1b6ca8}.auth-role-option__icon svg{width:17px;height:17px}
.auth-role-option__copy{min-width:0;display:grid;gap:2px}.auth-role-option__copy b{font-family:Nunito,sans-serif;font-size:14px;font-weight:800;line-height:1.3}.auth-role-option__copy small{color:#678092;font-family:Nunito,sans-serif;font-size:11.5px;font-weight:500;line-height:1.4}
.auth-role-option__arrow{color:#8097a7}.auth-role-option__arrow svg{width:15px;height:15px}
.auth-role-option--primary{border-color:#1b6ca8;background:#1b6ca8;color:#fff}.auth-role-option--primary:hover{border-color:#15598c;background:#15598c}.auth-role-option--primary .auth-role-option__icon{background:rgb(255 255 255 / 16%);color:#fff}.auth-role-option--primary .auth-role-option__copy small,.auth-role-option--primary .auth-role-option__arrow{color:rgb(255 255 255 / 82%)}
.auth-role-option--student .auth-role-option__icon{background:#e1f5ee;color:#0f6e56}.auth-role-option--teacher .auth-role-option__icon{background:#fff4ca;color:#8a6500}.auth-role-option--staff .auth-role-option__icon{background:#edf0f2;color:#496275}
/* Perbaikan UI 24 Sep 2026 · butir 7 · «Belum/Sudah punya akun?» kontras ≥4,5:1 (#9aabb5 → #526c7d). */
.access-code-links{display:flex;align-items:center;justify-content:center;gap:.55rem;margin-top:14px;color:#526c7d;font-family:Nunito,sans-serif;font-size:12px;line-height:1.4}.access-code-links a{min-height:30px;display:inline-flex;align-items:center;color:#1b6ca8;font-weight:800}.access-code-links a:hover{text-decoration:underline;text-underline-offset:.15rem}
.staff-access-label{margin:0 0 12px;padding:9px 11px;border-radius:9px;background:#f3f6f8;color:#5c7587!important;font-size:11.5px!important;font-weight:800;text-align:center}
.route-access .field{margin-top:.65rem}
.route-access .flow-form>.route-actions{margin-top:.8rem}
.route-access .flow-form>.route-actions .text-button{min-height:2rem}
.route-access .prototype-note{margin-top:.5rem}
.route-access .privacy-note--quiet{margin-top:.6rem;padding:.6rem .75rem;background:#f3f8fa;line-height:1.45}
.route-access .segmented:not(.segmented--methods){gap:10px;margin-bottom:.75rem;padding:0 0 4px;background:transparent}
/* Perbaikan UI 24 Sep 2026 · butir 7 · tab peran yang tidak aktif (Murid/Guru) kontras ≥4,5:1 (#7e96aa → #526c7d). */
.route-access .segmented:not(.segmented--methods) button{border:1px solid #dce6eb;background:#f5f8fa;color:#526c7d}
.route-access .segmented:not(.segmented--methods) button[aria-pressed="true"]{border-color:#1b6ca8;background:#1b6ca8;color:#fff;box-shadow:0 4px 0 #134e7c}
.route-access .field input:focus,.route-access .field select:focus,.route-access .field textarea:focus{border-color:#1b6ca8;outline:0;box-shadow:0 0 0 3px rgb(27 108 168 / 15%)}
.route-access .flow-form>.route-actions .button{border:1px solid #1b6ca8;background:#1b6ca8;color:#fff}
.route-access .flow-form>.route-actions .button:hover{border-color:#15598c;background:#15598c;color:#fff}

@media (max-width:35rem){
  .route-access .route-shell{width:100%;min-height:100vh;min-height:100dvh;align-items:center;justify-content:center;padding:max(54px,env(safe-area-inset-top)) 20px max(150px,calc(env(safe-area-inset-bottom) + 130px))}
  .route-access .route-card-wrap,.route-access[data-route-screen="entry"] .route-card-wrap,.route-access[data-route-screen="recovery"] .route-card-wrap{max-width:474px;margin:0;border-radius:26px;box-shadow:0 30px 64px rgb(4 44 83 / 30%)}
  .route-access .auth-legacy-banner{height:262.859375px;padding:30px 30px 26px}.auth-legacy-brand{margin-bottom:16px}.auth-legacy-mascot-wrap,.auth-legacy-mascot{width:92px}.auth-legacy-mascot-wrap{height:92px}.auth-legacy-glyphs{gap:7px;margin:13px 0 2px}.auth-legacy-glyphs span{width:27px;height:27px;font-size:13px}.auth-legacy-banner>p{font-size:13.5px}
  .route-access #route-content{padding:18px 22px 22px}.route-access .flow-head{margin-bottom:.8rem}.route-access .flow-head h1{font-size:1.5rem}
  .route-access .auth-legacy-footer{max-width:100%;margin-top:26px;padding:0;font-size:13px;line-height:normal}
  .access-code-links{flex-wrap:wrap;gap:0 .45rem}
  .auth-plan{grid-template-columns:1fr auto}.auth-plan>span{grid-column:1/-1;justify-self:start}
  .auth-role-option{grid-template-columns:34px minmax(0,1fr)}.auth-role-option__arrow{display:none}
}

@media (max-width:22rem){
  .auth-role-grid{grid-template-columns:1fr}
}

/* Guardian consent, one-time pairing, and device recovery */
.route-access[data-route-screen="guardian-consent"] .route-card-wrap,
.route-access[data-route-screen="device-pairing"] .route-card-wrap,
.route-access[data-route-screen="device-security"] .route-card-wrap{max-width:46rem}
.route-access[data-route-screen="guardian-consent"] #route-content,
.route-access[data-route-screen="device-pairing"] #route-content,
.route-access[data-route-screen="device-security"] #route-content{padding-inline:2rem}
.guardian-intro{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:1rem;padding:1.05rem;border:1px solid #b8d9cc;border-radius:1rem;background:linear-gradient(135deg,#effaf6,#f9fcfb)}
.guardian-intro__icon{width:3.4rem;height:3.4rem;display:grid;place-items:center;border-radius:1rem;background:#2eaf73;color:#fff;box-shadow:0 5px 0 #16845a}
.guardian-intro__icon svg{width:1.65rem;height:1.65rem}.guardian-intro h2{margin:.35rem 0 .2rem;font-size:1.15rem}.guardian-intro p{margin:0;color:#5d7585;font-size:.76rem}
.guardian-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:.65rem;margin-top:.8rem}
.guardian-facts article,.credential-compare article{min-width:0;display:grid;grid-template-columns:2.4rem minmax(0,1fr);gap:.65rem;padding:.8rem;border:1px solid #cedde4;border-radius:.85rem;background:#fff}
.guardian-facts article>span,.credential-compare article>span{width:2.4rem;height:2.4rem;display:grid;place-items:center;border-radius:.7rem;background:#e8f3f9;color:#1b6ca8}
.guardian-facts svg,.credential-compare svg{width:1.15rem;height:1.15rem}.guardian-facts b,.credential-compare b{display:block;color:#0a2847;font-size:.79rem}.guardian-facts p,.credential-compare p{margin:.12rem 0 0;color:#688090;font-size:.66rem;line-height:1.45}
.guardian-facts small{grid-column:1/-1;justify-self:start;padding:.18rem .38rem;border-radius:99px;background:#eef5f8;color:#557285;font-size:.54rem;font-weight:900;letter-spacing:.05em}
.credential-compare{display:grid;grid-template-columns:1fr 1fr;gap:.65rem;margin-top:.8rem}.credential-compare article{grid-template-columns:2.4rem 1fr;align-items:center;background:#f8fbfc}
.credential-note{display:flex;align-items:flex-start;gap:.75rem;margin-top:.8rem;padding:.85rem;border:1px solid #b5d2e1;border-radius:.85rem;background:#f1f8fc}
.credential-note__icon{width:2.25rem;height:2.25rem;flex:0 0 2.25rem;display:grid;place-items:center;border-radius:.65rem;background:#1b6ca8;color:#fff}.credential-note__icon svg{width:1.1rem;height:1.1rem}.credential-note strong{display:block;font-size:.79rem}.credential-note p{margin:.14rem 0 0;color:#617a8b;font-size:.68rem;line-height:1.45}
.consent-section{display:grid;gap:.55rem;margin:0 0 .8rem;padding:.9rem;border:1px solid #ccdae1;border-radius:.9rem;background:#f9fbfc}.consent-section legend{padding:0 .35rem;color:#0a2847;font-size:.77rem;font-weight:900}.consent-section legend small{color:#6e8594;font-weight:700}
.route-access .consent--boxed{min-height:0;align-items:flex-start;margin:0;padding:.75rem;border:1px solid #d5e0e5;border-radius:.75rem;background:#fff}.consent--boxed span{display:grid;gap:.1rem}.consent--boxed b{color:#0a2847;font-size:.75rem}.consent--boxed small{color:#678090;font-size:.65rem}
.permission-toggle{display:grid;grid-template-columns:auto 2.35rem minmax(0,1fr);align-items:center;gap:.65rem;padding:.7rem;border:1px solid #d5e0e5;border-radius:.75rem;background:#fff;cursor:pointer}.permission-toggle>input{width:1.15rem;height:1.15rem;margin:0;accent-color:#2eaf73}.permission-toggle__icon{width:2.35rem;height:2.35rem;display:grid;place-items:center;border-radius:.65rem;background:#eef6fa;color:#1b6ca8}.permission-toggle__icon svg{width:1.05rem;height:1.05rem}.permission-toggle span:last-child{display:grid}.permission-toggle b{font-size:.74rem}.permission-toggle small{color:#678090;font-size:.64rem;line-height:1.4}
.consent-receipt{overflow:hidden;border:1px solid #bad9cc;border-radius:.95rem;background:#fff}.consent-receipt header{display:flex;align-items:center;gap:.7rem;padding:.85rem;background:#effaf5}.consent-receipt header>span{width:2.4rem;height:2.4rem;display:grid;place-items:center;border-radius:.7rem;background:#2eaf73;color:#fff}.consent-receipt header svg{width:1.2rem;height:1.2rem}.consent-receipt header b{display:block;font-size:.82rem}.consent-receipt header p{margin:.1rem 0 0;color:#617a6d;font-size:.66rem}.consent-receipt ul{margin:0;padding:.55rem .9rem;list-style:none}.consent-receipt li{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;border-bottom:1px dashed #d5e1dc;font-size:.7rem}.consent-receipt li:last-child{border:0}.consent-receipt li span{color:#62798a}.consent-receipt li b{text-align:right}
.pair-path-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.pair-path-card{position:relative;min-width:0;display:grid;grid-template-columns:3rem 1fr;gap:.55rem .75rem;padding:1rem;border:1.5px solid #c5d8e2;border-radius:1rem;background:#fff;color:#0a2847}.pair-path-card:hover{border-color:#2eaf73;background:#f4fbf8}.pair-path-card__number{position:absolute;top:.65rem;right:.65rem;width:1.45rem;height:1.45rem;display:grid;place-items:center;border-radius:50%;background:#f5c518;color:#684f00;font-size:.67rem;font-weight:900}.pair-path-card .icon-tile{grid-row:1/3;width:3rem;height:3rem}.pair-path-card b{font-size:.88rem}.pair-path-card p{margin:.14rem 0 0;color:#647d8e;font-size:.69rem}.pair-path-card small{grid-column:2;color:#1b6ca8;font-size:.66rem;font-weight:900}
.pair-code-layout{display:grid;grid-template-columns:9rem 1fr;gap:1rem;align-items:stretch}.pair-visual{min-height:9rem;display:grid;place-items:center;align-content:center;gap:.3rem;border:2px dashed #88b9d2;border-radius:1rem;background:repeating-linear-gradient(45deg,#f0f8fc 0 8px,#fff 8px 16px);color:#1b6ca8;text-align:center}.pair-visual__mark{width:3.5rem;height:3.5rem;display:grid;place-items:center;border-radius:1rem;background:#1b6ca8;color:#fff}.pair-visual__mark svg{width:1.7rem;height:1.7rem}.pair-visual b{font-size:.7rem;letter-spacing:.08em}.pair-visual small{font-size:.59rem}
.secure-code{padding:.85rem 1rem;border:1.5px solid #accbdc;border-radius:.9rem;background:#f5fafc;text-align:center}.secure-code>span{display:block;color:#607c8e;font-size:.62rem;font-weight:900;letter-spacing:.07em;text-transform:uppercase}.secure-code output{display:block;margin:.4rem 0;color:#0a2847;font:900 clamp(.92rem,2.5vw,1.24rem)/1.4 Nunito,sans-serif;letter-spacing:.075em;overflow-wrap:anywhere}.secure-code p{margin:0;color:#7b909d;font-size:.58rem}.pair-code-meta{display:grid;gap:.35rem;margin:.55rem 0 0;padding:0;list-style:none}.pair-code-meta li{display:flex;align-items:flex-start;gap:.4rem;color:#5c7585;font-size:.65rem}.pair-code-meta svg{width:.85rem;height:.85rem;flex:0 0 .85rem;margin-top:.1rem;color:#2eaf73}.pairing-code-input{font:900 .95rem Nunito,sans-serif!important;letter-spacing:.08em;text-transform:uppercase}
.paired-device,.device-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.75rem;padding:.85rem;border:1px solid #bad9cc;border-radius:.9rem;background:#f5fbf8}.paired-device__icon,.device-row__icon{width:2.75rem;height:2.75rem;display:grid;place-items:center;border-radius:.75rem;background:#2eaf73;color:#fff}.paired-device svg,.device-row svg{width:1.2rem;height:1.2rem}.paired-device b,.device-row b{display:block;font-size:.82rem}.paired-device p,.device-row p{margin:.1rem 0;color:#657e8d;font-size:.67rem}.device-status{padding:.27rem .5rem;border-radius:99px;background:#dff5eb;color:#0f6e56;font-size:.59rem;font-weight:900}
.device-recovery-link{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.7rem;margin-top:1rem;padding:.8rem;border:1px solid #c4d8e2;border-radius:.85rem;background:#f6fafc}.device-recovery-link>span{width:2.35rem;height:2.35rem;display:grid;place-items:center;border-radius:.65rem;background:#1b6ca8;color:#fff}.device-recovery-link svg{width:1.1rem;height:1.1rem}.device-recovery-link b{display:block;font-size:.75rem}.device-recovery-link p{margin:.1rem 0;color:#687f8e;font-size:.64rem}.device-recovery-link a{color:#1b6ca8;font-size:.66rem;font-weight:900}
.device-list-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:.65rem}.device-list-head h2{margin:.3rem 0 .05rem;font-size:1.05rem}.device-list-head p{margin:0;color:#6a8190;font-size:.67rem}.device-row{grid-template-columns:auto minmax(0,1fr) auto auto;background:#fff}.device-row small{display:block;color:#7b909c;font-size:.6rem}.device-row .text-button{min-height:2.2rem}.text-button--danger{color:#a62e2e!important}.device-policy{margin-top:.75rem;padding:.8rem 1rem;border-radius:.85rem;background:#f3f7f9}.device-policy h3{display:flex;align-items:center;gap:.4rem;margin:0;font-size:.76rem}.device-policy h3 svg{width:1rem;height:1rem;color:#1b6ca8}.device-policy ul{display:grid;gap:.25rem;margin:.45rem 0 0;padding-left:1rem;color:#617a8a;font-size:.65rem}
.revoke-card{display:flex;align-items:flex-start;gap:.8rem;padding:1rem;border:1.5px solid #e0b0b0;border-radius:.9rem;background:#fff5f5}.revoke-card>span{width:2.65rem;height:2.65rem;flex:0 0 2.65rem;display:grid;place-items:center;border-radius:.75rem;background:#c94242;color:#fff}.revoke-card svg{width:1.2rem;height:1.2rem}.revoke-card h2{margin:.25rem 0 .15rem;font-size:1rem}.revoke-card p{margin:0;color:#7b6060;font-size:.68rem}.impact-list{display:grid;gap:.4rem;margin:.75rem 0;padding:0;list-style:none}.impact-list li{display:flex;gap:.55rem;align-items:flex-start;padding:.55rem .7rem;border:1px solid #dbe4e8;border-radius:.7rem;background:#fff;color:#617987;font-size:.68rem}.impact-list svg{width:1rem;height:1rem;flex:0 0 1rem;color:#1b6ca8}
.button.button--danger{border-color:#a62e2e!important;background:#b93838!important;color:#fff!important}.button.button--danger:hover{border-color:#842424!important;background:#9e2f2f!important}
.recovery-steps{display:grid;gap:.5rem;margin:0;padding:0;list-style:none;counter-reset:none}.recovery-steps li{display:grid;grid-template-columns:2rem 1fr;gap:.65rem;padding:.7rem;border:1px solid #d3e0e6;border-radius:.75rem;background:#fff}.recovery-steps li>span{width:2rem;height:2rem;display:grid;place-items:center;border-radius:.6rem;background:#e5f3f9;color:#1b6ca8;font-size:.72rem;font-weight:900}.recovery-steps b{font-size:.74rem}.recovery-steps p{margin:.08rem 0 0;color:#697f8e;font-size:.64rem}

@media (max-width:44rem){
  .route-access[data-route-screen="guardian-consent"] .route-card-wrap,
  .route-access[data-route-screen="device-pairing"] .route-card-wrap,
  .route-access[data-route-screen="device-security"] .route-card-wrap{max-width:36rem}
  .guardian-facts{grid-template-columns:1fr}.guardian-facts article{grid-template-columns:2.4rem 1fr auto}.guardian-facts small{grid-column:3;align-self:center}
  .pair-code-layout{grid-template-columns:7rem 1fr}
}
@media (max-width:35rem){
  .route-access[data-route-screen="guardian-consent"] .route-card-wrap,
  .route-access[data-route-screen="device-pairing"] .route-card-wrap,
  .route-access[data-route-screen="device-security"] .route-card-wrap{max-width:474px}
  .route-access[data-route-screen="guardian-consent"] #route-content,
  .route-access[data-route-screen="device-pairing"] #route-content,
  .route-access[data-route-screen="device-security"] #route-content{padding-inline:1.25rem}
  .credential-compare,.pair-path-grid,.pair-code-layout{grid-template-columns:1fr}.pair-visual{min-height:6.5rem}.pair-code-layout{gap:.65rem}
  .guardian-facts article{grid-template-columns:2.4rem 1fr}.guardian-facts small{grid-column:2;justify-self:start}.device-row{grid-template-columns:auto 1fr auto}.device-row .device-status{grid-column:3;grid-row:1}.device-row .text-button{grid-column:2/4;justify-self:start}.device-recovery-link{grid-template-columns:auto 1fr}.device-recovery-link a{grid-column:2}.device-list-head{align-items:flex-start;flex-direction:column}.device-list-head .text-button{padding:0}.permission-toggle{grid-template-columns:auto 2.2rem 1fr}
}

/* 2026-09-05 model tiga peran: tombol Google di bawah tombol utama */
.route-access .flow-form>.route-actions .button--outline{background:#fff;border:1.5px solid #a9bfcc;color:#0a2847}
.route-access .flow-form>.route-actions .button--outline:hover{background:#f3f8fb}
.auth-tabs span.is-disabled{min-height:42px;display:flex;align-items:center;justify-content:center;border:1px dashed #dce6eb;border-radius:10px;color:#b3c2cd;font-family:Nunito,sans-serif;font-size:14px;font-weight:800}
.auth-tabs button{min-height:42px;display:flex;align-items:center;justify-content:center;border:1px solid #dce6eb;border-radius:10px;background:#f5f8fa;color:#7e96aa;font-family:Nunito,sans-serif;font-size:14px;font-weight:800;line-height:1.4;cursor:pointer}
.auth-tabs button:hover{border-color:#aac3d2;color:#1b6ca8}
.auth-tabs button.is-active{border-color:#1b6ca8;background:#1b6ca8;box-shadow:0 4px 0 #134e7c;color:#fff}
.route-access .auth-role-grid--peran{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.route-access .auth-role-grid--peran .auth-role-option{grid-template-columns:1fr;justify-items:center;gap:10px;min-height:150px;padding:16px 10px 14px;border-width:2px;border-radius:16px;text-align:center;box-shadow:0 4px 0 #dbe6ec}
.route-access .auth-role-grid--peran .auth-role-option:hover{transform:translateY(-3px);box-shadow:0 7px 0 #c6d6df,0 12px 22px rgb(10 40 71 / 12%)}
.route-access .auth-role-grid--peran .auth-role-option__icon{width:58px;height:58px;border-radius:18px;box-shadow:inset 0 -4px 0 rgb(0 0 0 / 8%)}
.route-access .auth-role-grid--peran .auth-role-option__icon svg{width:28px;height:28px}
.route-access .auth-role-grid--peran .auth-role-option__copy{justify-items:center}
.route-access .auth-role-grid--peran .auth-role-option__copy b{font-size:16px}
.route-access .auth-role-grid--peran .auth-role-option__copy small{font-size:11px}
.route-access .auth-role-grid--peran .auth-role-option--student{border-color:#9edcc4;background:linear-gradient(180deg,#f3fbf8,#fff)}
.route-access .auth-role-grid--peran .auth-role-option--student .auth-role-option__icon{background:linear-gradient(180deg,#5dcaa5,#2f9f79);color:#fff}
.route-access .auth-role-grid--peran .auth-role-option--teacher{border-color:#f3d77a;background:linear-gradient(180deg,#fffaea,#fff)}
.route-access .auth-role-grid--peran .auth-role-option--teacher .auth-role-option__icon{background:linear-gradient(180deg,#f9c94b,#e0a400);color:#fff}
.route-access .auth-role-grid--peran .auth-role-option--staff{border-color:#b8c9d6;background:linear-gradient(180deg,#f4f7f9,#fff)}
.route-access .auth-role-grid--peran .auth-role-option--staff .auth-role-option__icon{background:linear-gradient(180deg,#5b7a94,#334d63);color:#fff}
@media (max-width:26rem){.route-access .auth-role-grid--peran{grid-template-columns:1fr 1fr}.route-access .auth-role-grid--peran .auth-role-option--staff{grid-column:1 / -1;min-height:auto}}
.route-access .auth-role-grid--peran .auth-role-option__arrow{display:none}


/* Tiga langkah pada pendaftaran guru. Penjelasan, bukan tombol: tipis, mendatar,
   dan diletakkan sebelum borang. */
.nw-langkah{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;align-items:center;
  margin:0 0 1rem;padding:.6rem .7rem;list-style:none;border-radius:.75rem;background:#f2f8fb;
  color:#51718b;font-size:.7rem;font-weight:700}
.nw-langkah li{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;text-align:left}
.nw-langkah b{display:grid;place-items:center;width:1.15rem;height:1.15rem;border-radius:50%;
  background:#1b6ca8;color:#fff;font-size:.62rem;font-weight:900;line-height:1}
@media (max-width:26rem){
  .nw-langkah{grid-template-columns:1fr;justify-items:start;gap:.45rem}
  .nw-langkah li{justify-content:flex-start}
}

/* ---------------------------------------------------------------
   Pagar "nol tombol bohong". Tombol yang jalannya belum bisa dipakai
   ditulis "belum" dan harus TERLIHAT mati, bukan sekadar tidak bisa
   ditekan. Aturan .button:disabled di atas kalah khusus dari beberapa
   penimpa warna di bawahnya, jadi dipertegas di sini.
   --------------------------------------------------------------- */
.button:disabled,
.button[aria-disabled="true"],
.route-access .flow-form>.route-actions .button--outline:disabled,
.route-access .flow-form>.route-actions .button--outline[aria-disabled="true"],
.route-access .flow-form>.route-actions .button:disabled{
  border-color:#c3d0d8;background:#e8eef2;box-shadow:none;color:#788c98;cursor:not-allowed}
.button:disabled:hover,
.button[aria-disabled="true"]:hover,
.route-access .flow-form>.route-actions .button--outline:disabled:hover{
  transform:none;box-shadow:none;background:#e8eef2}
.text-button:disabled,
.text-button[aria-disabled="true"],
.route-access .flow-form>.route-actions .text-button:disabled{
  color:#93a4ae!important;cursor:not-allowed;font-weight:700}
.text-button:disabled:hover,
.text-button[aria-disabled="true"]:hover{text-decoration:none}

/* Geometri banner mengikuti 2.Login&pendaftaran.html; form akun tetap aktif. */
.route-access .auth-reference-banner{height:auto;line-height:normal}
.route-access .auth-reference-banner::before,.route-access .auth-reference-banner::after{display:none}
.route-access .auth-reference-turtle{max-width:none}

/* UI 01: contoh alur akun yang terpisah dari layanan nyata. */
.auth-preview-tools{padding:14px;border:1px solid #e7c16f;border-radius:14px;background:#fffae8;color:#403b28;margin:0 0 20px;font-size:.8rem;line-height:1.55;overflow-wrap:anywhere}
.auth-preview-tools p{margin:6px 0 10px}
.auth-preview-tools summary{cursor:pointer;font-weight:800;padding-block:6px}
.auth-preview-tools .field{margin-top:12px}
.auth-preview-tools select{width:100%;min-width:0;max-width:100%}
.auth-preview-links{display:flex;flex-wrap:wrap;gap:8px 14px;margin-block:14px}
.auth-preview-links a{color:#15598c;text-underline-offset:3px}
.auth-preview-state{display:flex;flex-direction:column;gap:12px}
.auth-preview-state .button{max-width:100%;white-space:normal;text-align:center}
.auth-preview-count{font-weight:800;font-variant-numeric:tabular-nums}
.auth-lock-note{margin-top:12px}
.auth-legacy-footer a{color:inherit;text-underline-offset:3px}
.auth-preview-tools :focus-visible{outline:3px solid #1d9e75;outline-offset:3px}
@media(max-width:480px){.auth-preview-tools{padding:12px}.auth-preview-state .route-actions{align-items:stretch}}
@media(prefers-reduced-motion:reduce){.auth-legacy-banner [style*="animation"],.route-access .token,.route-access .auth-reference-turtle{animation:none!important;transition:none!important}}
/* Tetap tersembunyi sampai fokus, juga ketika aturan gerak mematikan transform. */
.skip-link:not(:focus){clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap;padding:0}
.recovery-contact-value{font-weight:800;overflow-wrap:anywhere;user-select:text}
.recovery-contact .route-actions{flex-wrap:wrap}
.recovery-contact .button{max-width:100%;white-space:normal;text-align:center}

/* 29 September: koin 14px dan kura asli 8px hanya di kedua login; tempo tetap pelan, termasuk saat reduced motion. */
body.route-access:is([data-nw-halaman="publik"],[data-nw-halaman="admin"]) .route-backdrop>.token{--auth-token-rise:-14px}
@keyframes auth-login-mascot-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
body.route-access:is([data-nw-halaman="publik"],[data-nw-halaman="admin"]) .auth-legacy-banner>:is(.auth-legacy-mascot-wrap,div:has(>.auth-reference-turtle)){animation:auth-login-mascot-float 9s ease-in-out infinite!important}
@media (prefers-reduced-motion:reduce){
  body.route-access:is([data-nw-halaman="publik"],[data-nw-halaman="admin"]) .route-backdrop>.token{animation:auth-token-float var(--auth-coin-duration,8s) ease-in-out infinite!important}
  body.route-access:is([data-nw-halaman="publik"],[data-nw-halaman="admin"]) .route-backdrop>.token--ar{animation-delay:.8s!important}
  body.route-access:is([data-nw-halaman="publik"],[data-nw-halaman="admin"]) .route-backdrop>.token--jp{animation-delay:1.4s!important}
  body.route-access:is([data-nw-halaman="publik"],[data-nw-halaman="admin"]) .route-backdrop>.token--zh{animation-delay:.4s!important}
  body.route-access:is([data-nw-halaman="publik"],[data-nw-halaman="admin"]) .route-backdrop>.token--kr{animation-delay:1.1s!important}
  body.route-access:is([data-nw-halaman="publik"],[data-nw-halaman="admin"]) .route-backdrop>.token--hi{animation-delay:1.8s!important}
}

/* ---- Perbaikan audit UI 23 September 2026 (masuk.html · kelola.html) ---- */
/* Huruf minimum 12px untuk galat, petunjuk, panel status dan catatan formulir. */
.field-hint,.consent,.route-access .privacy-note--quiet,.privacy-note{font-size:.78rem}
.field-error{font-size:.8rem}
.status-panel p{font-size:.8rem}
.nw-langkah{font-size:.78rem}.nw-langkah b{font-size:.75rem}
.choice-card p,.route-rail li{font-size:.78rem}
.route-access .prototype-note{font-size:.75rem}
.route-header .button{font-size:.78rem}.flow-eyebrow,.route-rail .demo-label{font-size:.72rem}
/* Target sentuh 44px: tab Murid/Guru, Lupa PIN, tautan Daftar/Masuk, Bantuan masuk. */
.route-access .segmented button,.route-access .segmented--methods button{min-height:2.75rem}
.route-access .flow-form>.route-actions .text-button{min-height:2.75rem}
.access-code-links a{min-height:2.75rem;padding-inline:.35rem}
.auth-help-button{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-height:2.75rem;margin:.35rem auto 0;color:#51718b;font-size:.82rem}
.form-card>.auth-help-button{display:flex}
.auth-help-mark{display:grid;place-items:center;width:1.35rem;height:1.35rem;border:1.5px solid currentColor;border-radius:50%;font-size:.78rem;font-weight:900;line-height:1}
/* Kelola akun: badge "Segera" pada tombol Google yang dimatikan, dan (i) pengganti daftar panjang. */
.akun-segera{margin-left:.35rem;padding:.2rem .5rem;font-size:.75rem;letter-spacing:.04em;vertical-align:middle}
.akun-info-button{display:inline-flex;align-items:center;gap:.45rem;min-height:2.75rem;margin-top:.5rem}
.akun-info-button svg{width:1.1rem;height:1.1rem;fill:none;stroke:currentColor;stroke-width:2}
/* Banner maskot lebih ringkas di HP supaya formulir cepat terlihat. */
@media (max-width:35rem){
  .route-access .auth-reference-banner{padding:18px 20px 16px!important}
  .route-access .auth-reference-banner .auth-banner-brand{margin-bottom:8px!important}
  .route-access .auth-reference-banner .auth-reference-turtle{width:60px!important}
  .route-access .auth-reference-banner .auth-banner-glyphs{display:none!important}
  .route-access .auth-reference-banner>p{margin-top:6px!important;font-size:12px!important}
  .route-access .auth-legacy-banner:not(.auth-reference-banner){height:auto;padding:18px 20px 16px}
  .route-access .auth-legacy-banner:not(.auth-reference-banner) .auth-legacy-brand{margin-bottom:8px}
  .route-access .auth-legacy-banner:not(.auth-reference-banner) .auth-legacy-mascot-wrap{width:60px;height:60px}
  .route-access .auth-legacy-banner:not(.auth-reference-banner) .auth-legacy-mascot{width:60px}
  .route-access .auth-legacy-banner:not(.auth-reference-banner) .auth-legacy-glyphs{display:none}
  .route-access .auth-legacy-banner:not(.auth-reference-banner)>p{margin-top:6px;font-size:12px}
}