/* =========================================================
   VKML Books — business portal, "liquid glass" design system
   Navy + gold from the VKML Group logo. Frosted, translucent
   surfaces float over a slowly moving colour field; light
   follows the pointer across the glass (--mx / --my from core.js).
   ========================================================= */
:root{
  --navy:#1f2a4d; --navy-2:#151c38; --navy-3:#2f3d6c;
  --navy-50:rgba(31,42,77,.06); --navy-100:rgba(31,42,77,.12);
  --gold:#b48a4a; --gold-2:#94703a; --gold-50:rgba(180,138,74,.12); --gold-100:rgba(180,138,74,.3);
  --ivory:#f6f3ee; --ink:#1b2133; --text:#3a4154; --muted:#5f6679;
  --line:rgba(31,42,77,.1); --line-2:rgba(31,42,77,.18);
  --ok:#1d7a4e; --ok-50:rgba(29,122,78,.11); --warn:#8f620a; --warn-50:rgba(201,140,20,.12); --err:#b42318; --err-50:rgba(180,35,24,.08);
  /* glass */
  --glass:rgba(255,255,255,.56); --glass-hi:rgba(255,255,255,.74);
  --glass-edge:rgba(255,255,255,.62);
  --blur:saturate(180%) blur(22px);
  --rim:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -1px 0 rgba(255,255,255,.22);
  --lift:0 1px 2px rgba(21,28,56,.05),0 10px 30px rgba(21,28,56,.09);
  --lift-2:0 2px 6px rgba(21,28,56,.06),0 22px 54px rgba(21,28,56,.16);
  --r-sm:12px; --r:18px; --r-lg:26px; --pill:999px;
  --f-serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --f-sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1); --spring:cubic-bezier(.34,1.45,.64,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:104px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;font-family:var(--f-sans);font-size:16px;line-height:1.6;color:var(--text);background:var(--ivory);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3,h4,h5{color:var(--ink);margin:0;line-height:1.2;font-weight:600}
h1,h2{font-family:var(--f-serif);letter-spacing:-.005em}
h1,h2,h3,b,.yr,.n{font-variant-numeric:lining-nums}
h1{font-size:clamp(36px,5vw,58px);line-height:1.08}
h2{font-size:clamp(30px,3.6vw,42px)}
h3{font-size:19px;letter-spacing:-.01em}
h4{font-size:16px}
p{margin:0}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:8px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 24px}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--navy);color:#fff;padding:10px 16px;border-radius:var(--pill)}
.skip:focus{top:12px}
.ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- The moving colour field behind the glass ---------- */
.liquid-bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:
  radial-gradient(1200px 700px at 85% -10%,rgba(232,206,160,.55),transparent 60%),
  radial-gradient(900px 600px at -10% 30%,rgba(176,196,240,.5),transparent 60%),
  linear-gradient(180deg,#f8f5ef,#f1eee8)}
.liquid-bg i{position:absolute;display:block;border-radius:42% 58% 63% 37% / 41% 44% 56% 59%;filter:blur(64px);opacity:.75;will-change:transform}
.liquid-bg .b1{width:46vmax;height:46vmax;right:-12vmax;top:-14vmax;background:radial-gradient(circle at 40% 40%,rgba(223,186,120,.9),rgba(223,186,120,0) 70%);animation:drift1 28s ease-in-out infinite alternate,morph 18s ease-in-out infinite}
.liquid-bg .b2{width:40vmax;height:40vmax;left:-14vmax;top:22vh;background:radial-gradient(circle at 50% 50%,rgba(140,170,236,.8),rgba(140,170,236,0) 70%);animation:drift2 32s ease-in-out infinite alternate,morph 22s ease-in-out infinite reverse}
.liquid-bg .b3{width:38vmax;height:38vmax;right:-8vmax;bottom:-16vmax;background:radial-gradient(circle at 50% 50%,rgba(108,120,200,.55),rgba(108,120,200,0) 70%);animation:drift3 30s ease-in-out infinite alternate,morph 20s ease-in-out infinite}
.liquid-bg .b4{width:30vmax;height:30vmax;left:30vw;top:-8vmax;background:radial-gradient(circle at 50% 50%,rgba(255,214,176,.85),rgba(255,214,176,0) 70%);animation:drift4 26s ease-in-out infinite alternate,morph 16s ease-in-out infinite reverse}
@keyframes drift1{to{transform:translate(-14vw,18vh) rotate(40deg)}}
@keyframes drift2{to{transform:translate(18vw,-10vh) rotate(-30deg)}}
@keyframes drift3{to{transform:translate(-20vw,-24vh) rotate(25deg)}}
@keyframes drift4{to{transform:translate(-12vw,30vh) rotate(-45deg)}}
@keyframes morph{0%,100%{border-radius:42% 58% 63% 37% / 41% 44% 56% 59%}33%{border-radius:61% 39% 45% 55% / 52% 62% 38% 48%}66%{border-radius:37% 63% 52% 48% / 63% 36% 64% 37%}}

/* ---------- Glass surfaces ----------
   Large surfaces get a real backdrop blur, a bright rim and a pointer-led highlight;
   repeated cards get a lighter frosted fill so long pages stay smooth. */
:is(header.site .nav,.finder,.panel,.hv-card,.kit-preview,.support,.ask-card,.drawer,.menu.open,.receipt,.kv,body.has-mbar .mobile-bar){
  background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--glass-edge);box-shadow:var(--rim),var(--lift)}
:is(a.cls,.offer,.trust-item,.branch,.info,.value,.kid-card,.order-row,.branch-list li,.choice,.faq details,.pub-grid span,.step .num,.empty-state .ring,.drawer-empty .ring){
  background:linear-gradient(160deg,rgba(255,255,255,.78),rgba(255,255,255,.5));
  border:1px solid var(--glass-edge);box-shadow:var(--rim),0 1px 2px rgba(21,28,56,.04),0 8px 22px rgba(21,28,56,.06)}
/* pointer-led specular highlight + light rim on the edge */
:is(header.site .nav,.finder,.panel,.hv-card,.kit-preview,.support,.ask-card,a.cls,.offer,.trust-item,.branch,.value,.kid-card,.order-row,.btn,.info){position:relative;isolation:isolate}
:is(header.site .nav,.finder,.panel,.hv-card,.kit-preview,.support,.ask-card,a.cls,.offer,.trust-item,.branch,.value,.kid-card,.order-row,.btn,.info)::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,22%) var(--my,0%),rgba(255,255,255,.55),transparent 55%);
  opacity:.55;transition:opacity .4s var(--ease)}
:is(header.site .nav,.finder,.panel,.hv-card,.kit-preview,.support,.ask-card,a.cls,.offer,.trust-item,.branch,.value,.kid-card,.order-row,.btn,.info):hover::before{opacity:1}
:is(header.site .nav,.finder,.panel,.hv-card,.kit-preview,.support,.ask-card)::after{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;padding:1px;
  background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(255,255,255,.08) 38%,rgba(255,255,255,0) 62%,rgba(255,255,255,.7));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :is(header.site .nav,.finder,.panel,.hv-card,.kit-preview,.support,.ask-card,.drawer,.menu.open,.receipt,.kv,body.has-mbar .mobile-bar){background:rgba(255,255,255,.92)}
}

/* ---------- Buttons, chips, eyebrows ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 24px;border-radius:var(--pill);border:1px solid transparent;font-weight:600;font-size:15px;letter-spacing:.005em;white-space:nowrap;overflow:hidden;transition:transform .35s var(--spring),box-shadow .3s,background-color .2s,border-color .2s,color .2s}
.btn .ic{width:18px;height:18px}
.btn:hover:not(:disabled){transform:translateY(-1px)}
.btn:active:not(:disabled){transform:scale(.97);transition-duration:.12s}
.btn-primary{background:linear-gradient(180deg,#34437a,#1f2a4d 70%);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.2),0 8px 22px rgba(31,42,77,.28)}
.btn-primary:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.32),inset 0 -1px 0 rgba(0,0,0,.2),0 12px 28px rgba(31,42,77,.34)}
.btn-gold{background:linear-gradient(180deg,#c9a265,#a67c3f 75%);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(0,0,0,.15),0 8px 22px rgba(166,124,63,.32)}
.btn-outline{background:rgba(255,255,255,.55);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border-color:var(--glass-edge);color:var(--navy);box-shadow:var(--rim),0 4px 14px rgba(21,28,56,.08)}
.btn-outline:hover{background:rgba(255,255,255,.78)}
.btn-light{background:rgba(255,255,255,.1);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-color:rgba(255,255,255,.28);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.btn-light:hover{background:rgba(255,255,255,.18)}
.btn-light::before,.btn-primary::before,.btn-gold::before{opacity:.14!important}
.btn-primary:hover::before,.btn-gold:hover::before{opacity:.3!important}
.btn-sm{height:38px;padding:0 16px;font-size:14px}
.btn-lg{height:54px;padding:0 30px;font-size:16px}
.btn-block{width:100%}
.btn:disabled{opacity:.65;cursor:not-allowed}
.link{color:var(--navy);font-weight:600;border-bottom:1px solid var(--gold-100);transition:border-color .2s}
.link:hover{border-color:var(--gold)}
.chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:var(--pill);font-size:12.5px;font-weight:600;background:rgba(255,255,255,.6);color:var(--navy);white-space:nowrap;border:1px solid var(--glass-edge);box-shadow:inset 0 1px 0 rgba(255,255,255,.8);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.chip.ok{background:rgba(232,245,237,.75);color:var(--ok)}
.chip.ok::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px rgba(29,122,78,.15)}
.chip.gold{background:rgba(249,240,224,.8);color:var(--gold-2)}
.chip.muted{background:rgba(255,255,255,.55);color:var(--muted)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-2)}
.eyebrow::before{content:"";width:24px;height:1px;background:var(--gold)}
.center .eyebrow::after{content:"";width:24px;height:1px;background:var(--gold)}
.lead{font-size:18px;color:var(--muted);line-height:1.65}

/* ---------- Sections ---------- */
.section{padding:96px 0}
.section.alt{background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,.16));border-top:1px solid rgba(255,255,255,.7);border-bottom:1px solid rgba(255,255,255,.7)}
.section-head{max-width:720px;margin-bottom:48px}
.section-head h2{margin:14px 0 14px}
.section-head p{color:var(--muted);font-size:17px}
.section-head.center{text-align:center;margin-left:auto;margin-right:auto}
.section-head.row{max-width:none;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.section-head.row > div{max-width:680px}

/* ---------- Utility bar + floating glass header ---------- */
.utility{background:var(--navy-2);color:rgba(255,255,255,.78);font-size:13px}
.utility .container{display:flex;align-items:center;gap:14px;min-height:38px}
.utility .ic{width:16px;height:16px;color:var(--gold)}
.utility p{flex:1;margin:0}
.utility b{color:#fff;font-weight:600}
.utility nav{display:flex;gap:20px}
.utility nav a:hover{color:#fff}
.utility .x{background:none;border:0;color:inherit;font-size:18px;line-height:1;padding:4px;opacity:.7}
.utility .x:hover{opacity:1}
header.site{position:sticky;top:0;z-index:50;padding:12px 16px 0}
header.site .nav{display:flex;align-items:center;gap:24px;height:66px;max-width:1168px;margin:0 auto;padding:0 10px 0 18px;border-radius:var(--pill);transition:box-shadow .3s,background-color .3s}
header.site.scrolled .nav{background:var(--glass-hi);box-shadow:var(--rim),var(--lift-2)}
.brand{display:flex;align-items:center;gap:11px;flex:none}
.brand img{width:44px;height:auto}
.brand .wm{display:flex;flex-direction:column;line-height:1}
.brand .wm b{font-family:var(--f-serif);font-size:25px;font-weight:700;color:var(--navy);letter-spacing:.01em}
.brand .wm small{font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-2);margin-top:5px}
.menu{position:relative;display:flex;align-items:center;gap:2px;margin-left:auto}
.menu a{position:relative;z-index:1;padding:9px 16px;font-size:15px;font-weight:500;color:var(--text);border-radius:var(--pill);transition:color .2s}
.menu a:hover,.menu a.active{color:var(--navy)}
.menu a.active{font-weight:600}
.menu .m-only{display:none}
.thumb{position:absolute;left:0;top:0;z-index:0;border-radius:var(--pill);pointer-events:none;opacity:0;
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.62));border:1px solid rgba(255,255,255,.9);
  box-shadow:inset 0 1px 0 #fff,0 2px 6px rgba(21,28,56,.08),0 6px 16px rgba(21,28,56,.08);
  transition:transform .55s var(--spring),width .55s var(--spring),height .3s var(--ease),opacity .25s}
.menu .thumb{background:linear-gradient(180deg,rgba(31,42,77,.1),rgba(31,42,77,.05));border-color:rgba(31,42,77,.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.actions{display:flex;align-items:center;gap:4px}
.icon-btn{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid transparent;background:none;color:var(--navy);transition:background .2s,border-color .2s,transform .35s var(--spring)}
.icon-btn:hover,.icon-btn.on{background:rgba(255,255,255,.7);border-color:var(--glass-edge);box-shadow:var(--rim)}
.icon-btn:active{transform:scale(.92)}
.badge{position:absolute;top:2px;right:0;min-width:19px;height:19px;padding:0 5px;border-radius:var(--pill);background:linear-gradient(180deg,#c9a265,#a67c3f);color:#fff;font-size:11px;font-weight:700;line-height:19px;text-align:center;box-shadow:0 0 0 2px rgba(255,255,255,.9),0 3px 8px rgba(166,124,63,.35);transition:transform .45s var(--spring)}
.badge.zero{transform:scale(0)}
.burger{display:none}
@media (max-width:980px){
  header.site{padding:8px 10px 0}
  header.site .nav{height:60px;gap:10px;padding:0 6px 0 14px}
  .brand img{width:40px}
  .brand .wm b{font-size:22px}
  .menu{position:absolute;left:10px;right:10px;top:calc(100% + 8px);flex-direction:column;align-items:stretch;gap:2px;padding:10px;border-radius:var(--r-lg);display:none}
  /* the menu sits inside the blurred header, so it can't blur the page itself: keep it nearly opaque */
  .menu.open{display:flex;animation:sheet .4s var(--spring);background:linear-gradient(180deg,#fff,#fbf9f5)!important;box-shadow:var(--rim),var(--lift-2)!important}
  .menu a{padding:14px 16px;border-radius:var(--r-sm)}
  .menu a.active{background:var(--navy-50)}
  .menu .thumb{display:none}
  .menu .m-only{display:block}
  .actions{margin-left:auto}
  .burger{display:grid}
  .hide-sm{display:none}
  .utility nav{display:none}
}
@keyframes sheet{from{opacity:0;transform:translateY(-8px) scale(.98)}}
@media (max-width:520px){
  .utility .long{display:none}
  .brand .wm small{display:none}
  .container{padding:0 18px}
}
@media (min-width:521px){.utility .short{display:none}}

/* ---------- Footer ---------- */
footer.site{position:relative;overflow:hidden;background:var(--navy-2);color:rgba(255,255,255,.7);font-size:14.5px}
footer.site::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(600px 360px at 90% 0%,rgba(180,138,74,.28),transparent 70%),radial-gradient(700px 420px at 0% 100%,rgba(92,118,200,.28),transparent 70%)}
footer.site .container{position:relative}
footer.site .top{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:48px;padding:72px 0 48px}
footer.site .fbrand img{width:210px;margin:-8px 0 18px -6px}
footer.site .fbrand p{max-width:340px}
footer.site h5{font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:6px 0 18px}
footer.site ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
footer.site ul a:hover{color:#fff}
footer.site .pay{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}
footer.site .pay span{border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);border-radius:var(--pill);padding:5px 12px;font-size:12px;font-weight:600;color:rgba(255,255,255,.85);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
footer.site .safe{display:flex;gap:12px;align-items:flex-start;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-radius:var(--r);padding:16px 20px;color:rgba(255,255,255,.82);box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
footer.site .safe .ic{color:var(--gold);margin-top:2px}
footer.site .bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:24px 0 30px;margin-top:32px;border-top:1px solid rgba(255,255,255,.1);font-size:13.5px}
footer.site .bottom nav{display:flex;gap:20px;flex-wrap:wrap}
footer.site .bottom a:hover{color:#fff}
@media (max-width:900px){footer.site .top{grid-template-columns:1fr 1fr;gap:36px}footer.site .fbrand{grid-column:1/-1}}
@media (max-width:520px){footer.site .top{grid-template-columns:1fr;padding-top:56px}}

/* ---------- Cart drawer, toast ---------- */
.scrim{position:fixed;inset:0;z-index:80;background:rgba(21,28,56,.22);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .3s}
.scrim.show{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:10px;right:10px;bottom:10px;z-index:90;width:min(420px,calc(100% - 20px));display:flex;flex-direction:column;border-radius:var(--r-lg);background:rgba(255,255,255,.72)!important;transform:translateX(calc(100% + 24px));transition:transform .55s var(--spring);box-shadow:var(--rim),0 30px 80px rgba(21,28,56,.3)!important}
.drawer.open{transform:none}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:18px 18px 16px 24px;border-bottom:1px solid var(--line)}
.drawer-head h3{font-family:var(--f-serif);font-size:26px}
.drawer-body{flex:1;overflow:auto;padding:6px 24px}
.drawer-foot{border-top:1px solid var(--line);padding:18px 22px 22px;display:grid;gap:10px}
.drawer-foot[hidden]{display:none}
.drawer-foot .row{display:flex;justify-content:space-between;font-weight:600;color:var(--ink);font-size:17px;margin-bottom:4px}
.cart-item{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--line)}
.cart-item > div{flex:1;min-width:0}
.cart-item b{display:block;color:var(--ink);font-weight:600}
.cart-item small{color:var(--muted);font-size:13.5px;line-height:1.5}
.cart-item button{background:none;border:0;color:var(--muted);font-size:13px;font-weight:600;padding:2px 0}
.cart-item button:hover{color:var(--err)}
.drawer-empty{text-align:center;padding:56px 12px}
.drawer-empty .ring{width:68px;height:68px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;color:var(--gold-2)}
.drawer-empty .ring .ic{width:28px;height:28px}
.drawer-empty p{color:var(--muted);margin:6px 0 18px}
.crest{position:relative;flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:14px;color:#fff;font-weight:700;font-size:15px;letter-spacing:.02em;background:var(--navy);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -8px 16px rgba(0,0,0,.12),0 4px 12px rgba(21,28,56,.14);overflow:hidden}
.crest::after{content:"";position:absolute;left:0;right:0;top:0;height:50%;background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0))}
.toast{position:fixed;left:50%;bottom:28px;z-index:95;transform:translate(-50%,24px) scale(.96);opacity:0;pointer-events:none;background:rgba(21,28,56,.82);-webkit-backdrop-filter:saturate(160%) blur(18px);backdrop-filter:saturate(160%) blur(18px);color:#fff;font-size:14.5px;font-weight:500;padding:13px 22px;border-radius:var(--pill);border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 18px 40px rgba(21,28,56,.3);transition:opacity .25s,transform .5s var(--spring);max-width:calc(100% - 32px)}
.toast.show{opacity:1;transform:translate(-50%,0) scale(1)}
body.has-mbar .toast{bottom:104px}

/* ---------- Reveal ---------- */
/* an animation (not a transition) so cards keep their own hover transitions; "backwards" hands
   control back to the normal styles once it ends */
.reveal{opacity:0}
.reveal.in{opacity:1;animation:rise .9s var(--spring) var(--d,0s) backwards}
@keyframes rise{from{opacity:0;transform:translateY(18px) scale(.985)}}
@media (prefers-reduced-motion:reduce){
  .reveal,.reveal.in{opacity:1;animation:none}
  *{scroll-behavior:auto!important}
  .liquid-bg i{animation:none}
  .thumb,.btn,.drawer,.toast{transition-duration:.01s!important}
}

/* ---------- Home: hero ---------- */
.hero{position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;right:-180px;top:-160px;width:640px;height:640px;border:1px solid rgba(180,138,74,.25);transform:rotate(45deg);pointer-events:none}
.hero::after{content:"";position:absolute;right:-60px;top:-40px;width:400px;height:400px;border:1px solid rgba(180,138,74,.22);transform:rotate(45deg);pointer-events:none}
.hero .container{position:relative;z-index:1;display:grid;grid-template-columns:1.08fr .92fr;gap:64px;align-items:center;padding-top:72px;padding-bottom:88px}
.hero h1{margin:20px 0 20px}
.hero h1 em{font-style:italic;color:var(--gold-2)}
.hero .lead{max-width:560px}
.finder{margin-top:32px;border-radius:var(--r-lg);padding:10px}
.finder-row{display:flex;gap:8px}
.field{position:relative;flex:1;min-width:0}
.field > .ic{position:absolute;left:18px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.field input{width:100%;height:56px;padding:0 18px 0 48px;border:1px solid rgba(31,42,77,.12);border-radius:var(--pill);background:rgba(255,255,255,.75);font-size:16px;box-shadow:inset 0 1px 2px rgba(21,28,56,.05);transition:border-color .2s,box-shadow .25s,background .2s}
.field input:focus{outline:none;background:#fff;border-color:rgba(31,42,77,.35);box-shadow:0 0 0 4px rgba(31,42,77,.08),0 8px 20px rgba(21,28,56,.08)}
.finder-row .btn{height:56px}
.finder .field input:not(:placeholder-shown){text-transform:uppercase;letter-spacing:.06em}
.field input.bad{border-color:var(--err);box-shadow:0 0 0 4px var(--err-50)}
.id-match{display:none;align-items:center;gap:12px;margin:10px 4px 2px;padding:10px 14px;border-radius:var(--r);font-size:14px;animation:sheet .35s var(--spring)}
.id-match.ok,.id-match.err{display:flex}
.id-match.ok{background:rgba(232,245,237,.8);border:1px solid rgba(29,122,78,.18);color:var(--ok)}
.id-match.ok .crest{width:36px;height:36px;font-size:12.5px;border-radius:11px}
.id-match > span:not(.crest){flex:1;min-width:0}
.id-match b{display:block;color:var(--ink);font-size:15px}
.id-match small{color:var(--muted);font-size:13px}
.id-match.err{background:var(--err-50);border:1px solid rgba(180,35,24,.16);color:var(--err)}
.id-match.err > span:not(.crest){color:var(--text)}
.finder-help{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 10px 4px;font-size:13.5px;color:var(--muted)}
.finder-help a{color:var(--navy);font-weight:600}
.finder-help button{background:none;border:0;padding:0;color:var(--navy);font-weight:600;font-size:13.5px;text-decoration:underline;text-decoration-color:var(--gold-100);text-underline-offset:3px}
.idtip{display:none;margin:8px 4px 6px;padding:14px 16px;background:rgba(255,255,255,.6);border:1px solid var(--glass-edge);border-radius:var(--r);font-size:14px}
.idtip.show{display:block;animation:sheet .35s var(--spring)}
.idtip ol{margin:8px 0 0;padding-left:20px;color:var(--muted)}
.trust-row{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:26px;font-size:14px;font-weight:500;color:var(--text)}
.trust-row span{display:inline-flex;align-items:center;gap:8px}
.trust-row .ic{width:18px;height:18px;color:var(--ok)}
.hero-visual{position:relative;display:flex;flex-direction:column;padding:0 0 0 4%}
.hv-card{border-radius:var(--r-lg)}
.hv-kit{padding:22px 22px 52px;box-shadow:var(--rim),var(--lift-2)!important;animation:float 9s ease-in-out infinite}
.hv-kit header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.hv-kit header b{font-family:var(--f-serif);font-size:24px;color:var(--ink);line-height:1.1}
.hv-kit header small{display:block;color:var(--muted);font-size:13px;margin-top:4px}
.hv-line{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid rgba(31,42,77,.07);font-size:14.5px}
.hv-line .sw{width:30px;height:38px;border-radius:4px 6px 6px 4px;flex:none;box-shadow:inset 4px 0 0 rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.3)}
.hv-line .t{flex:1;color:var(--ink)}
.hv-line em{font-style:normal;color:var(--muted);font-size:13px}
.hv-line .ic{width:18px;height:18px;color:var(--ok)}
.hv-kit footer{display:flex;justify-content:space-between;align-items:center;padding-top:14px}
.hv-kit footer small{color:var(--muted);font-size:13px}
.hv-kit footer b{font-size:22px;color:var(--ink)}
.hv-row{position:relative;z-index:2;display:flex;gap:14px;align-items:stretch;margin:-32px 22px 0 -6%}
.hv-badge{flex:1;display:flex;gap:12px;align-items:center;padding:14px 18px;background:var(--glass-hi)!important;animation:float 9s ease-in-out -3s infinite}
.hv-badge .ring{width:42px;height:42px;flex:none;border-radius:50%;display:grid;place-items:center;background:rgba(249,240,224,.9);color:var(--gold-2);box-shadow:inset 0 1px 0 #fff}
.hv-badge b{display:block;color:var(--ink);font-size:15px}
.hv-badge small{color:var(--muted);font-size:12.5px}
.hv-stat{flex:none;padding:14px 22px;background:linear-gradient(160deg,rgba(47,61,108,.88),rgba(21,28,56,.9))!important;border-color:rgba(255,255,255,.2)!important;color:#fff;animation:float 9s ease-in-out -6s infinite}
.hv-stat::before{opacity:.25!important}
.hv-stat b{display:block;font-family:var(--f-serif);font-size:36px;line-height:1;color:#fff}
.hv-stat small{color:rgba(255,255,255,.75);font-size:13px}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){.hv-kit,.hv-badge,.hv-stat,.about-hero .seal{animation:none}}
@media (max-width:980px){
  .hero .container{grid-template-columns:1fr;gap:44px;padding-top:48px;padding-bottom:64px}
  .hero-visual{max-width:560px;width:100%;margin:0 auto;padding:0}
  .hv-row{margin-left:-10px}
}
@media (max-width:520px){
  .finder{padding:8px}
  .finder-row{flex-direction:column}
  .finder-row .btn{width:100%}
  .hv-kit{padding:18px 16px 48px}
  .hv-row{margin:-32px 10px 0}
  .hv-stat{display:none}
  .hv-line{font-size:13.5px}
}

/* ---------- Home: open schools, steps, stats, offers ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;counter-reset:step;position:relative}
.steps::before{content:"";position:absolute;top:33px;left:12%;right:12%;height:1px;background:repeating-linear-gradient(90deg,var(--gold-100) 0 8px,transparent 8px 14px)}
.step{position:relative;text-align:center;padding:0 8px}
.step .num{position:relative;width:66px;height:66px;margin:0 auto 22px;border-radius:50%;display:grid;place-items:center;color:var(--navy);transition:transform .5s var(--spring)}
.step:hover .num{transform:translateY(-4px) scale(1.04)}
.step .num .ic{width:24px;height:24px}
.step .num::after{counter-increment:step;content:counter(step);position:absolute;top:-4px;right:-4px;width:24px;height:24px;border-radius:50%;background:linear-gradient(180deg,#c9a265,#a67c3f);color:#fff;font-size:12px;font-weight:700;display:grid;place-items:center;box-shadow:0 0 0 2px rgba(255,255,255,.9),0 3px 8px rgba(166,124,63,.3)}
.step h4{font-size:17px;margin-bottom:8px}
.step p{color:var(--muted);font-size:14.5px}
@media (max-width:860px){.steps{grid-template-columns:1fr 1fr;row-gap:40px}.steps::before{display:none}}
@media (max-width:480px){.steps{grid-template-columns:1fr}}
.stats{position:relative;overflow:hidden;background:var(--navy-2);color:#fff}
.stats::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(520px 380px at 15% 110%,rgba(180,138,74,.35),transparent 70%),radial-gradient(640px 420px at 95% -10%,rgba(92,118,200,.4),transparent 70%)}
.stats::after{content:"";position:absolute;left:-120px;bottom:-200px;width:420px;height:420px;border:1px solid rgba(180,138,74,.25);transform:rotate(45deg)}
.stats .container{position:relative;z-index:1;display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center;padding-top:88px;padding-bottom:88px}
.stats h2{color:#fff;margin:14px 0 16px}
.stats p{color:rgba(255,255,255,.72)}
.stats .eyebrow{color:var(--gold)}
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.stat{padding:22px;border-radius:var(--r);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 10px 30px rgba(0,0,0,.15)}
.stat b{display:block;font-family:var(--f-serif);font-size:46px;font-weight:600;line-height:1;color:#fff}
.stat b em{font-style:normal;color:var(--gold)}
.stat > span{display:block;margin-top:8px;font-size:13.5px;color:rgba(255,255,255,.7)}
@media (max-width:980px){.stats .container{grid-template-columns:1fr;gap:40px}}
@media (max-width:520px){.stat-grid{grid-template-columns:1fr 1fr}.stat{padding:18px 16px}.stat b{font-size:38px}}
.offer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.offer{padding:28px;border-radius:var(--r-lg);transition:transform .5s var(--spring),box-shadow .45s var(--ease),border-color .45s,color .45s}
.offer:hover{transform:translateY(-3px);box-shadow:var(--rim),var(--lift-2)}
/* The highlighted card is warm champagne glass (the logo's gold), kept as its own layer so it
   fades in and out as the pointer moves between cards (index.html moves the .featured class;
   it rests on the first card) */
.offer::after{content:"";position:absolute;inset:0;z-index:-2;border-radius:inherit;pointer-events:none;background:linear-gradient(160deg,rgba(253,246,232,.98),rgba(244,228,197,.9) 55%,rgba(236,214,174,.85));opacity:0;transition:opacity .45s var(--ease)}
.offer .ib{width:50px;height:50px;border-radius:16px;display:grid;place-items:center;background:rgba(31,42,77,.07);color:var(--navy);margin-bottom:20px;box-shadow:inset 0 1px 0 rgba(255,255,255,.8);transition:background-color .45s,color .45s,box-shadow .45s}
.offer .ib .ic{width:22px;height:22px}
.offer h3{margin-bottom:8px;transition:color .45s}
.offer p{color:var(--muted);font-size:15px;transition:color .45s}
.offer ul{list-style:none;margin:16px 0 0;padding:16px 0 0;border-top:1px solid rgba(31,42,77,.08);display:grid;gap:8px;font-size:14px;transition:border-color .45s}
.offer li{display:flex;gap:8px;align-items:center}
.offer li .ic{width:16px;height:16px;color:var(--gold)}
.offer.featured{border-color:rgba(214,178,116,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(201,162,101,.3),0 18px 44px rgba(166,124,63,.2)}
.offer.featured::after{opacity:1}
.offer-grid .offer.featured::before,.offer-grid .offer.featured:hover::before{opacity:.75}
.offer.featured p{color:#5b5242}
.offer.featured .ib{background-color:#b18744;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -6px 12px rgba(120,84,30,.18),0 6px 14px rgba(166,124,63,.3)}
.offer.featured ul{border-color:rgba(166,124,63,.22)}
.offer.featured li .ic{color:var(--gold-2)}
@media (max-width:980px){.offer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.offer-grid{grid-template-columns:1fr}}

/* ---------- Home: trust + sample kit ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.split h2{margin:14px 0 16px}
.trust-list{display:grid;gap:14px;margin-top:30px}
.trust-item{display:flex;gap:16px;align-items:flex-start;padding:18px;border-radius:var(--r)}
.trust-item .ib{width:44px;height:44px;flex:none;border-radius:14px;display:grid;place-items:center;background:rgba(249,240,224,.9);color:var(--gold-2);box-shadow:inset 0 1px 0 #fff}
.trust-item h4{margin-bottom:4px}
.trust-item p{color:var(--muted);font-size:14.5px}
.kit-preview{border-radius:var(--r-lg);overflow:hidden}
.kit-preview header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:20px 22px;background:rgba(255,255,255,.35);border-bottom:1px solid var(--line)}
.kit-preview header b{display:block;font-family:var(--f-serif);font-size:24px;color:var(--ink);line-height:1.1}
.kit-preview header small{color:var(--muted);font-size:13px}
.kit-line{display:flex;align-items:center;gap:14px;padding:13px 22px;border-bottom:1px solid rgba(31,42,77,.07);cursor:pointer;font-size:15px;transition:background .15s}
.kit-line:hover{background:rgba(255,255,255,.45)}
.kit-line .sw{width:8px;height:30px;border-radius:4px;flex:none}
.kit-line > span:nth-child(2){flex:1;color:var(--ink)}
.kit-line em{font-style:normal;font-size:12.5px;color:var(--muted)}
.kit-line input,.item input[type=checkbox],.terms input{appearance:none;-webkit-appearance:none;flex:none;width:22px;height:22px;margin:0;border:1.5px solid rgba(31,42,77,.25);border-radius:7px;background:rgba(255,255,255,.8) center/14px no-repeat;cursor:pointer;box-shadow:inset 0 1px 2px rgba(21,28,56,.06);transition:background-color .2s,border-color .2s,transform .35s var(--spring)}
.kit-line input:active,.item input[type=checkbox]:active,.terms input:active:active{transform:scale(.88)}
.kit-line input:checked,.item input[type=checkbox]:checked,.terms input:checked:checked{background-color:var(--navy);border-color:var(--navy);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 3px 8px rgba(31,42,77,.25);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
.item input[type=checkbox]:disabled{opacity:.5;cursor:not-allowed}
.kit-total{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 22px;flex-wrap:wrap}
.kit-total small{display:block;color:var(--muted);font-size:13px}
.kit-total b{font-size:24px;color:var(--ink)}
@media (max-width:980px){.split{grid-template-columns:1fr;gap:44px}}

/* ---------- Home: publishers, branches, partner CTA, help ---------- */
.pub-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.pub-grid span{display:grid;place-items:center;min-height:84px;padding:14px;text-align:center;border-radius:var(--r);font-family:var(--f-serif);font-size:20px;font-weight:600;color:var(--navy);transition:transform .45s var(--spring)}
.pub-grid span:hover{transform:translateY(-3px)}
.pub-grid span.lead-pub{color:var(--gold-2)}
@media (max-width:860px){.pub-grid{grid-template-columns:1fr 1fr}.pub-grid span{font-size:17px;min-height:68px}}
.branch-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.branch{display:flex;flex-direction:column;gap:12px;padding:26px;border-radius:var(--r-lg);transition:transform .5s var(--spring),box-shadow .3s}
.branch:hover{transform:translateY(-3px);box-shadow:var(--rim),var(--lift-2)}
.branch.hq{background:linear-gradient(160deg,rgba(249,240,224,.9),rgba(255,255,255,.55))}
.branch .city{display:flex;justify-content:space-between;align-items:center;gap:10px}
.branch h3{font-family:var(--f-serif);font-size:26px}
.branch address{font-style:normal;color:var(--muted);font-size:14.5px;flex:1}
.branch .meta{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--text)}
.branch .meta .ic{width:16px;height:16px;color:var(--gold-2)}
.branch .dir{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:14px;color:var(--navy);padding-top:12px;border-top:1px solid rgba(31,42,77,.08)}
.branch .dir .ic{width:16px;height:16px}
.branch.more{background:linear-gradient(160deg,rgba(255,255,255,.5),rgba(255,255,255,.28));justify-content:center;text-align:center;align-items:center}
@media (max-width:980px){.branch-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.branch-grid{grid-template-columns:1fr}}
.cta-band{position:relative;overflow:hidden;display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:center;padding:56px;border-radius:32px;background:linear-gradient(150deg,#2b386a,#151c38 70%);color:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 30px 70px rgba(21,28,56,.28)}
.cta-band::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(420px 300px at 90% 0%,rgba(201,162,101,.45),transparent 70%),radial-gradient(520px 340px at 0% 120%,rgba(110,140,230,.4),transparent 70%)}
.cta-band::after{content:"";position:absolute;right:-90px;top:-90px;width:300px;height:300px;border:1px solid rgba(201,162,101,.45);transform:rotate(45deg);pointer-events:none}
.cta-band > *{position:relative;z-index:1}
.cta-band h2{color:#fff;margin:14px 0 14px}
.cta-band .eyebrow{color:var(--gold)}
.cta-band ul{list-style:none;padding:0;margin:22px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:10px 20px;font-size:14.5px;color:#fff}
.cta-band li{display:flex;gap:8px;align-items:center}
.cta-band li .ic{width:16px;height:16px;color:var(--gold)}
.cta-actions{display:flex;flex-direction:column;gap:12px;align-items:stretch}
@media (max-width:860px){.cta-band{grid-template-columns:1fr;padding:36px 26px;border-radius:var(--r-lg)}.cta-band ul{grid-template-columns:1fr}}
.help-wrap{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.faq{display:grid;gap:10px}
.faq details{border-radius:var(--r);overflow:hidden;transition:box-shadow .3s}
.faq details[open]{box-shadow:var(--rim),var(--lift)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 20px;cursor:pointer;list-style:none;font-weight:600;color:var(--ink);font-size:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ic{width:18px;height:18px;color:var(--gold-2);transition:transform .45s var(--spring)}
.faq details[open] summary .ic{transform:rotate(180deg)}
.faq details p{padding:0 20px 20px;color:var(--muted);font-size:15px}
.support{border-radius:var(--r-lg);padding:30px}
.support h3{font-family:var(--f-serif);font-size:28px}
.support > p{color:var(--muted);font-size:14px;margin:4px 0 20px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-grid .full{grid-column:1/-1}
.form-grid label,.flabel{display:flex;flex-direction:column;gap:6px;font-size:13.5px;font-weight:600;color:var(--ink)}
.form-grid label > span,.flabel > span:first-child{display:block}
.form-grid i,.flabel i{color:var(--err);font-style:normal}
.form-grid input,.form-grid select,.form-grid textarea,.flabel input,.flabel select{height:48px;padding:0 16px;border:1px solid rgba(31,42,77,.13);border-radius:14px;background:rgba(255,255,255,.72);font-size:15px;font-weight:400;color:var(--ink);box-shadow:inset 0 1px 2px rgba(21,28,56,.05);transition:border-color .2s,box-shadow .25s,background .2s}
.form-grid textarea{height:110px;padding:12px 16px;resize:vertical}
.form-grid input[type=file]{height:auto;padding:10px}
.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus,.flabel input:focus,.flabel select:focus{outline:none;background:#fff;border-color:rgba(31,42,77,.35);box-shadow:0 0 0 4px rgba(31,42,77,.08)}
.form-grid .bad{border-color:var(--err)!important;box-shadow:0 0 0 4px var(--err-50)!important}
.issue-pills{display:flex;flex-wrap:wrap;gap:8px}
.issue-pills input{position:absolute;opacity:0;pointer-events:none}
.issue-pills label{display:inline-flex;height:38px;align-items:center;padding:0 16px;border:1px solid var(--glass-edge);border-radius:var(--pill);background:rgba(255,255,255,.62);font-size:13.5px;font-weight:500;color:var(--text);cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.8);transition:all .25s var(--spring)}
.issue-pills label:active{transform:scale(.95)}
.issue-pills input:checked + label{background:linear-gradient(180deg,#34437a,#1f2a4d);border-color:transparent;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 6px 16px rgba(31,42,77,.25)}
.issue-pills input:focus-visible + label{outline:2px solid var(--gold);outline-offset:2px}
.form-note{font-size:13px;color:var(--muted);text-align:center;margin-top:10px}
@media (max-width:900px){.help-wrap{grid-template-columns:1fr}}
@media (max-width:520px){.form-grid{grid-template-columns:1fr}.support{padding:22px 18px}}

/* ---------- Inner pages: page head, crumbs, steps ---------- */
.page-head{position:relative;overflow:hidden}
.page-head::after{content:"";position:absolute;right:-120px;top:-180px;width:420px;height:420px;border:1px solid rgba(180,138,74,.25);transform:rotate(45deg);pointer-events:none}
.page-head .container{position:relative;z-index:1;padding-top:30px;padding-bottom:40px}
.page-head h1{font-size:clamp(34px,4.4vw,50px);margin:14px 0 10px}
.page-head .lead{max-width:640px;font-size:17px}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:13.5px;color:var(--muted)}
.crumbs a{color:var(--navy);font-weight:500}
.crumbs a:hover{text-decoration:underline}
.crumbs span[aria-hidden]{color:var(--line-2)}
.flow{display:flex;list-style:none;padding:6px 8px;margin:22px 0 0;max-width:720px;border-radius:var(--pill);background:rgba(255,255,255,.45);border:1px solid var(--glass-edge);box-shadow:var(--rim);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.flow li{flex:1;display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--muted)}
.flow li:not(:last-child)::after{content:"";flex:1;height:2px;border-radius:2px;background:rgba(31,42,77,.12);margin:0 12px}
.flow li a,.flow li > span:first-child{display:flex;align-items:center;gap:10px}
.flow .dot{width:30px;height:30px;flex:none;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(31,42,77,.14);background:rgba(255,255,255,.8);font-size:13px;box-shadow:inset 0 1px 0 #fff}
.flow .dot .ic{width:14px;height:14px}
.flow li.done{color:var(--ok)}
.flow li.done .dot{background:linear-gradient(180deg,#2a9563,#1d7a4e);border-color:transparent;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.flow li.done::after{background:linear-gradient(90deg,#2a9563,rgba(29,122,78,.4))}
.flow li.now{color:var(--navy)}
.flow li.now .dot{background:linear-gradient(180deg,#34437a,#1f2a4d);border-color:transparent;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 0 4px rgba(31,42,77,.1)}
.flow a:hover .lbl{text-decoration:underline}
.flow .lbl{white-space:nowrap}
@media (max-width:640px){.flow li .lbl{display:none}.flow li.now .lbl{display:inline}}

/* ---------- Help card and empty states ---------- */
.ask-card{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;margin:40px 0 96px;padding:28px 30px;border-radius:var(--r-lg);background:linear-gradient(160deg,rgba(249,240,224,.85),rgba(255,255,255,.55))!important}
.ask-card > div{display:flex;gap:18px;align-items:center}
.ask-card .ring{width:54px;height:54px;flex:none;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.85);color:var(--gold-2);box-shadow:var(--rim),0 4px 12px rgba(21,28,56,.08)}
.ask-card h3{font-family:var(--f-serif);font-size:26px}
.ask-card p{color:var(--muted);font-size:15px}
.empty-state{max-width:560px;margin:0 auto;padding:80px 16px;text-align:center}
.empty-state .ring{width:76px;height:76px;margin:0 auto 22px;border-radius:50%;display:grid;place-items:center;color:var(--gold-2)}
.empty-state .ring .ic{width:30px;height:30px}
.empty-state h1{font-size:clamp(30px,4vw,40px);margin-bottom:10px}
.empty-state p{color:var(--muted);margin-bottom:24px}

/* ---------- School page ---------- */
.sbanner{display:flex;gap:22px;align-items:center;margin-top:28px}
.sbanner .crest{width:78px;height:78px;font-size:24px;border-radius:24px}
.sbanner h1{font-size:clamp(30px,4vw,44px);margin:10px 0 8px}
.sbanner .sub{display:flex;flex-wrap:wrap;gap:8px 22px;color:var(--muted);font-size:14.5px}
.sbanner .sub span{display:inline-flex;align-items:center;gap:7px}
.sbanner .sub .ic{width:16px;height:16px;color:var(--gold-2)}
.infobar{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px}
.info{display:flex;gap:14px;padding:18px;border-radius:var(--r)}
.info .ib{width:42px;height:42px;flex:none;border-radius:14px;display:grid;place-items:center;background:rgba(31,42,77,.07);color:var(--navy);box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
.info b{display:block;color:var(--ink);font-size:15px}
.info small{color:var(--muted);font-size:13.5px;line-height:1.5}
@media (max-width:860px){.infobar{grid-template-columns:1fr}}
.class-group{margin-top:40px}
.class-group h2{display:flex;align-items:center;gap:12px;font-family:var(--f-sans);font-size:18px;font-weight:600;padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:18px}
.class-group h2 .ib{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:rgba(249,240,224,.9);color:var(--gold-2);box-shadow:inset 0 1px 0 #fff}
.class-group h2 .ib .ic{width:18px;height:18px}
.class-group h2 small{font-weight:500;color:var(--muted);font-size:14px}
.class-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
a.cls{display:flex;flex-direction:column;gap:6px;padding:18px 18px 16px;border-radius:var(--r);transition:transform .5s var(--spring),box-shadow .3s}
a.cls:hover{transform:translateY(-4px);box-shadow:var(--rim),var(--lift-2)}
a.cls .n{font-family:var(--f-serif);font-size:30px;font-weight:600;color:var(--ink);line-height:1.05}
a.cls .n small{display:block;font-family:var(--f-sans);font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-2);margin-bottom:4px}
a.cls .meta{font-size:13px;color:var(--muted)}
a.cls .price{display:flex;justify-content:space-between;align-items:center;margin-top:10px;padding-top:12px;border-top:1px solid rgba(31,42,77,.08);font-size:13.5px;color:var(--muted)}
a.cls .price em{font-style:normal;font-weight:700;color:var(--ink)}
a.cls .price .ic{width:16px;height:16px;color:var(--navy);transition:transform .35s var(--spring)}
a.cls:hover .price .ic{transform:translateX(4px)}
.notify{display:flex;gap:8px;max-width:440px;margin:0 auto}
.notify input{flex:1;min-width:0;height:52px;padding:0 18px;border:1px solid rgba(31,42,77,.13);border-radius:var(--pill);background:rgba(255,255,255,.75);font-size:15px}
.notify input:focus{outline:none;background:#fff;border-color:rgba(31,42,77,.35);box-shadow:0 0 0 4px rgba(31,42,77,.08)}
.notify .btn{height:52px}

/* ---------- Kit + checkout layout ---------- */
.two-col{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:24px;align-items:start;padding-top:28px;padding-bottom:96px}
.two-col > div{display:grid;gap:20px;min-width:0}
.panel{border-radius:var(--r-lg);padding:26px}
.panel h2{display:flex;align-items:center;gap:12px;font-family:var(--f-sans);font-size:19px;font-weight:600}
.panel h2 .num{width:32px;height:32px;flex:none;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,#34437a,#1f2a4d);color:#fff;font-size:14px;font-weight:600;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 4px 10px rgba(31,42,77,.2);transition:background .3s,transform .45s var(--spring)}
.panel h2 .num.ok{background:linear-gradient(180deg,#2a9563,#1d7a4e);transform:scale(1.06)}
.panel h2 .num .ic{width:15px;height:15px}
.hint{color:var(--muted);font-size:14px;margin:6px 0 18px}
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.fgrid .two{grid-column:span 2}
.fgrid .full{grid-column:1/-1}
.flabel .msg{display:none;color:var(--err);font-size:12.5px;font-weight:500}
.flabel.err input,.flabel.err select{border-color:var(--err);box-shadow:0 0 0 4px var(--err-50)}
.flabel.err .msg{display:block}
.seg{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label{display:inline-flex;align-items:center;height:42px;padding:0 20px;border:1px solid var(--glass-edge);border-radius:var(--pill);background:rgba(255,255,255,.62);font-weight:500;font-size:14.5px;color:var(--text);cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.8);transition:all .3s var(--spring)}
.seg label:active{transform:scale(.95)}
.seg input:checked + label{background:linear-gradient(180deg,#34437a,#1f2a4d);border-color:transparent;color:#fff;font-weight:600;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 6px 16px rgba(31,42,77,.25)}
.seg input:focus-visible + label{outline:2px solid var(--gold);outline-offset:2px}
@media (max-width:700px){.fgrid{grid-template-columns:1fr}.fgrid .two{grid-column:auto}}
.kit-tools{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.tabs{position:relative;display:flex;gap:2px;padding:4px;border-radius:var(--pill);background:rgba(31,42,77,.06);box-shadow:inset 0 1px 2px rgba(21,28,56,.06);flex-wrap:wrap}
.tabs button{position:relative;z-index:1;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border:0;border-radius:var(--pill);background:none;font-size:13.5px;font-weight:600;color:var(--muted);transition:color .2s}
.tabs button[aria-selected=true]{color:var(--navy)}
.tabs .c{font-size:12px;color:var(--muted);font-weight:500}
@media (max-width:640px){.tabs{border-radius:20px}}
.lnk{background:none;border:0;padding:0;font-size:13.5px;font-weight:600;color:var(--navy);text-decoration:underline;text-decoration-color:var(--gold-100);text-underline-offset:3px}
.items{border-top:1px solid var(--line);margin-top:12px}
.item{display:grid;grid-template-columns:22px 40px minmax(0,1fr) auto 90px;gap:14px;align-items:center;padding:14px 6px;border-bottom:1px solid rgba(31,42,77,.07);border-radius:12px;cursor:pointer;transition:background .2s,opacity .3s}
.item:hover{background:rgba(255,255,255,.45)}
.item.off{opacity:.5}
.item.off .nm{text-decoration:line-through;text-decoration-color:var(--line-2)}
.item .cover{width:34px;height:44px;border-radius:3px 6px 6px 3px;display:grid;place-items:center;color:#fff;font-size:8px;font-weight:700;letter-spacing:.04em;box-shadow:inset 4px 0 0 rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.3),0 3px 8px rgba(21,28,56,.15)}
.item .cover.nb{background:rgba(31,42,77,.07);color:var(--navy);box-shadow:inset 0 1px 0 #fff;border:1px solid rgba(31,42,77,.1)}
.item .cover.st{background:rgba(249,240,224,.9);color:var(--gold-2);box-shadow:inset 0 1px 0 #fff;border:1px solid var(--gold-100)}
.item .cover .ic{width:18px;height:18px}
.item .nm{color:var(--ink);font-weight:500;font-size:15px}
.item .pb{font-size:13px;color:var(--muted)}
.item .lock{display:inline-flex;align-items:center;gap:4px;margin-left:8px;font-size:12px;font-weight:600;color:var(--ok)}
.item .lock .ic{width:12px;height:12px}
.qty{display:inline-flex;align-items:center;border:1px solid var(--glass-edge);border-radius:var(--pill);overflow:hidden;background:rgba(255,255,255,.7);box-shadow:var(--rim),0 2px 6px rgba(21,28,56,.06)}
.qty button{width:32px;height:32px;border:0;background:none;font-size:16px;color:var(--navy);transition:background .15s}
.qty button:hover:not(:disabled){background:rgba(31,42,77,.07)}
.qty button:disabled{color:var(--line-2);cursor:not-allowed}
.qty span{min-width:26px;text-align:center;font-size:14px;font-weight:600}
.qty-ph{width:1px}
.item .pr{text-align:right;font-weight:600;color:var(--ink);font-size:15px}
.item .pr small{display:block;font-weight:400;font-size:12px;color:var(--muted)}
@media (max-width:640px){
  .item{grid-template-columns:22px 34px minmax(0,1fr) auto;gap:10px}
  .item .qty,.item .qty-ph{grid-column:3;grid-row:2;justify-self:start}
  .item .pr{grid-column:4;grid-row:1/3}
  .item .cover{width:30px;height:40px}
}
.summary{position:sticky;top:104px}
.summary h3{font-family:var(--f-serif);font-size:28px}
.summary .for{color:var(--muted);font-size:14px;margin:2px 0 14px}
.progress{margin:0 0 18px;padding:14px 16px;border-radius:var(--r);background:rgba(255,255,255,.5);border:1px solid var(--glass-edge);box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
.progress .top{display:flex;justify-content:space-between;font-size:13.5px;font-weight:600;color:var(--ink)}
.progress .bar{height:8px;margin-top:10px;border-radius:var(--pill);background:rgba(31,42,77,.08);overflow:hidden;box-shadow:inset 0 1px 2px rgba(21,28,56,.08)}
.progress .bar i{display:block;height:100%;width:var(--p,0%);border-radius:inherit;background:linear-gradient(90deg,#2f3d6c,#4b62a8);box-shadow:inset 0 1px 0 rgba(255,255,255,.35);transition:width .7s var(--spring)}
.progress p{font-size:13px;color:var(--muted);margin-top:8px}
.sumrows{display:grid;gap:10px;padding:16px 0;border-top:1px solid var(--line);font-size:14.5px}
.sumrows > div{display:flex;justify-content:space-between;gap:12px}
.sumrows > div span:last-child{color:var(--ink);font-weight:500;text-align:right}
.sumrows .save{color:var(--ok)}
.sumrows .save span:last-child{color:var(--ok)}
.sumrows .note{font-size:13px;color:var(--warn);background:var(--warn-50);padding:8px 12px;border-radius:12px}
.sumrows .total{padding-top:14px;margin-top:4px;border-top:1px solid var(--line);font-size:16px;font-weight:600;color:var(--ink)}
.sumrows .total span:last-child{font-size:22px;font-weight:700}
.summary .btn{width:100%;margin-top:8px}
.assure{display:grid;gap:8px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.assure span{display:flex;gap:8px;align-items:flex-start}
.assure .ic{width:16px;height:16px;color:var(--ok);margin-top:2px}
.mobile-bar{display:none}
@media (max-width:980px){
  .two-col{grid-template-columns:1fr;padding-bottom:130px}
  .summary{position:static}
  body.has-mbar .mobile-bar{display:flex;position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:60;align-items:center;justify-content:space-between;gap:12px;padding:10px 10px 10px 22px;border-radius:var(--pill);background:var(--glass-hi);box-shadow:var(--rim),0 16px 40px rgba(21,28,56,.22)}
  .mobile-bar small{display:block;font-size:12.5px;color:var(--muted)}
  .mobile-bar b{font-size:20px;color:var(--ink)}
}

/* ---------- Checkout ---------- */
.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.choice{position:relative;display:flex;gap:14px;align-items:flex-start;padding:16px;border-radius:var(--r);cursor:pointer;transition:box-shadow .3s,transform .45s var(--spring),background .2s}
.choice:active{transform:scale(.98)}
.choice input{position:absolute;opacity:0;pointer-events:none}
.choice .ib{width:42px;height:42px;flex:none;border-radius:14px;display:grid;place-items:center;background:rgba(31,42,77,.07);color:var(--navy);box-shadow:inset 0 1px 0 rgba(255,255,255,.8);transition:background .3s,color .3s}
.choice b{display:block;color:var(--ink);font-size:15px}
.choice small{display:block;color:var(--muted);font-size:13px;line-height:1.5}
.choice .radio{margin-left:auto;width:22px;height:22px;flex:none;border-radius:50%;border:1.5px solid rgba(31,42,77,.25);background:rgba(255,255,255,.8);transition:all .35s var(--spring)}
.choice:has(input:checked){background:linear-gradient(160deg,rgba(255,255,255,.95),rgba(255,255,255,.72));box-shadow:inset 0 0 0 1.5px var(--navy),0 10px 26px rgba(31,42,77,.14)}
.choice:has(input:checked) .radio{border:6px solid var(--navy);background:#fff}
.choice:has(input:checked) .ib{background:linear-gradient(180deg,#34437a,#1f2a4d);color:#fff}
.choice:has(input:disabled){opacity:.5;cursor:not-allowed}
.choice:has(input:focus-visible){outline:2px solid var(--gold);outline-offset:2px}
@media (max-width:640px){.choice-grid{grid-template-columns:1fr}}
.secure-note{display:flex;gap:10px;align-items:flex-start;margin-top:16px;padding:12px 16px;border-radius:var(--r);background:rgba(249,240,224,.75);border:1px solid var(--gold-100);color:var(--gold-2);font-size:13.5px}
.secure-note .ic{width:18px;height:18px;margin-top:1px}
.order-lines{display:grid}
.oline{display:flex;gap:12px;align-items:flex-start;padding:14px 0;border-bottom:1px solid rgba(31,42,77,.07)}
.oline:first-child{border-top:1px solid var(--line)}
.oline .crest{width:38px;height:38px;font-size:13px;border-radius:12px}
.oline > div{flex:1;min-width:0}
.oline b{display:block;color:var(--ink);font-weight:600;font-size:14.5px}
.oline small{color:var(--muted);font-size:13px}
.oline details{margin-top:6px;font-size:13px}
.oline summary{cursor:pointer;color:var(--navy);font-weight:600}
.oline details ul{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:4px;color:var(--muted)}
.oline details li{display:flex;justify-content:space-between;gap:8px}
.oline .rm{background:none;border:0;padding:0;margin-top:6px;font-size:12.5px;font-weight:600;color:var(--muted)}
.oline .rm:hover{color:var(--err)}
.oline .p{font-weight:600;color:var(--ink);font-size:14.5px}
.add-more{display:inline-flex;align-items:center;gap:6px;margin:14px 0 4px;font-size:14px;font-weight:600;color:var(--navy)}
.terms{display:flex;gap:10px;align-items:flex-start;margin:4px 0 6px;font-size:13.5px;color:var(--muted);cursor:pointer}
.terms input{margin-top:1px}
.terms a{color:var(--navy);font-weight:600;text-decoration:underline;text-decoration-color:var(--gold-100);text-underline-offset:2px}
.spin{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.done-card{max-width:760px;margin:0 auto;padding:56px 0 96px;text-align:center}
.done-ic{width:84px;height:84px;margin:0 auto 22px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,#2a9563,#1d7a4e);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 0 0 10px rgba(29,122,78,.1),0 16px 36px rgba(29,122,78,.3);animation:pop .7s var(--spring)}
.done-ic .ic{width:36px;height:36px;stroke-width:2.4}
@keyframes pop{from{transform:scale(.4);opacity:0}}
.done-card h1{font-size:clamp(34px,4.6vw,48px)}
.done-card > p{color:var(--muted);margin:10px 0 0}
.receipt{display:grid;grid-template-columns:repeat(3,1fr);margin:30px 0;border-radius:var(--r-lg);overflow:hidden;text-align:left}
.receipt div{padding:18px 22px;border-right:1px solid var(--line)}
.receipt div:last-child{border-right:0}
.receipt small{display:block;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.receipt b{font-size:19px;color:var(--ink)}
@media (max-width:560px){.receipt{grid-template-columns:1fr}.receipt div{border-right:0;border-bottom:1px solid var(--line)}}
.done-card .panel{text-align:left;margin-top:18px}
.done-card .panel h2{margin-bottom:14px}
.timeline{list-style:none;margin:0;padding:0;display:grid}
.timeline li{position:relative;display:flex;gap:16px;padding-bottom:22px}
.timeline li:last-child{padding-bottom:0}
.timeline li:not(:last-child)::before{content:"";position:absolute;left:18px;top:40px;bottom:2px;width:2px;border-radius:2px;background:rgba(31,42,77,.1)}
.timeline .d{width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center;border:1px solid var(--glass-edge);background:rgba(255,255,255,.75);color:var(--muted);box-shadow:var(--rim)}
.timeline .d .ic{width:17px;height:17px}
.timeline li.on .d{background:linear-gradient(180deg,#2a9563,#1d7a4e);border-color:transparent;color:#fff}
.timeline b{display:block;color:var(--ink);font-size:15px;padding-top:6px}
.timeline small{color:var(--muted);font-size:13.5px}
.done-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:28px}

/* ---------- Track ---------- */
.track-card{max-width:820px;margin:0 auto;padding:36px 0 96px}
.track-form{display:grid;grid-template-columns:1.4fr 1fr auto;gap:14px;align-items:end}
.track-form .btn{height:48px}
@media (max-width:700px){.track-form{grid-template-columns:1fr}}
.track-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;padding-bottom:20px;border-bottom:1px solid var(--line)}
.track-head h2{font-family:var(--f-serif);font-size:30px;display:flex;align-items:center;gap:10px}
.status-pill{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 16px;border-radius:var(--pill);background:rgba(255,255,255,.7);border:1px solid var(--glass-edge);color:var(--navy);font-size:14px;font-weight:600;box-shadow:var(--rim)}
.status-pill.ok{background:rgba(232,245,237,.85);color:var(--ok)}
.status-pill .ic{width:16px;height:16px}
.stepper{display:grid;grid-template-columns:repeat(4,1fr);margin:30px 0 8px;padding:0;position:relative}
.stepper::before{content:"";position:absolute;top:22px;left:12.5%;right:12.5%;height:4px;border-radius:4px;background:rgba(31,42,77,.08);box-shadow:inset 0 1px 2px rgba(21,28,56,.08)}
.stepper .fill{position:absolute;top:22px;left:12.5%;height:4px;width:0;border-radius:4px;background:linear-gradient(90deg,#2a9563,#3bb27a);box-shadow:0 0 12px rgba(29,122,78,.35);transition:width 1.2s var(--spring)}
.stepper li{list-style:none;position:relative;text-align:center;font-size:13.5px;font-weight:500;color:var(--muted);padding:0 6px}
.stepper .d{position:relative;z-index:1;width:48px;height:48px;margin:0 auto 10px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.85);border:1px solid var(--glass-edge);color:var(--muted);box-shadow:var(--rim),0 4px 12px rgba(21,28,56,.08);transition:all .5s var(--spring)}
.stepper .d .ic{width:19px;height:19px}
.stepper li.on{color:var(--ink);font-weight:600}
.stepper li.on .d{background:linear-gradient(180deg,#2a9563,#1d7a4e);border-color:transparent;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 6px 16px rgba(29,122,78,.3)}
.stepper li.now .d{box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 0 7px rgba(29,122,78,.14),0 6px 16px rgba(29,122,78,.3)}
.kv{display:grid;grid-template-columns:repeat(3,1fr);margin-top:26px;border-radius:var(--r);overflow:hidden}
.kv div{padding:14px 18px;border-right:1px solid var(--line)}
.kv div:last-child{border-right:0}
.kv small{display:block;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.kv b{color:var(--ink);font-size:15px}
.kv a{color:var(--navy)}
@media (max-width:600px){.kv{grid-template-columns:1fr}.kv div{border-right:0;border-bottom:1px solid var(--line)}.stepper li{font-size:12px}}

/* ---------- Account ---------- */
.login-card{max-width:440px;margin:0 auto;text-align:center;padding:38px 32px}
.login-card .seal{width:86px;margin:0 auto 16px}
.login-card h1{font-size:34px}
.login-card .flabel{text-align:left}
.otp{display:flex;justify-content:center;gap:10px;margin:16px 0 8px}
.otp input{width:58px;height:62px;text-align:center;font-size:24px;font-weight:600;border:1px solid rgba(31,42,77,.13);border-radius:16px;background:rgba(255,255,255,.75);box-shadow:inset 0 1px 2px rgba(21,28,56,.05);transition:all .3s var(--spring)}
.otp input:focus{outline:none;background:#fff;border-color:rgba(31,42,77,.35);box-shadow:0 0 0 4px rgba(31,42,77,.08);transform:translateY(-2px)}
.proto-note{margin-top:18px;font-size:12.5px;color:var(--muted);background:rgba(255,255,255,.5);border:1px dashed var(--line-2);border-radius:12px;padding:8px 10px}
.dash-head{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:22px}
.dash-head .avatar{width:66px;height:66px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,#34437a,#1f2a4d);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 0 6px rgba(255,255,255,.6),0 10px 24px rgba(31,42,77,.25)}
.dash-head .avatar .ic{width:28px;height:28px}
.dash-head .grow{flex:1}
.dash-head h1{font-size:clamp(30px,4vw,42px);margin:0}
.dash-head p{color:var(--muted)}
.dash-section{padding-top:40px}
.dash-section > h2{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;font-size:30px;margin-bottom:18px}
.dash-section > h2 small{font-family:var(--f-sans);font-size:14px;font-weight:500;color:var(--muted)}
.kids-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.kid-card{position:relative;padding:22px;border-radius:var(--r-lg);transition:transform .5s var(--spring),box-shadow .3s}
.kid-card:hover{transform:translateY(-3px);box-shadow:var(--rim),var(--lift-2)}
.kid-card .face{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-serif);font-size:22px;font-weight:700;color:#fff;margin-bottom:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 6px 14px rgba(21,28,56,.18)}
.kid-card h3{display:flex;align-items:center;gap:8px}
.kid-card p{color:var(--muted);font-size:14px;margin:4px 0 16px}
.kid-card .promo{position:absolute;top:18px;right:18px}
.order-row{display:grid;grid-template-columns:44px minmax(0,1fr) auto auto;gap:16px;align-items:center;padding:16px 18px;border-radius:var(--r);margin-bottom:10px}
.order-row .ib{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:rgba(31,42,77,.07);color:var(--navy);box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
.order-row b{color:var(--ink)}
.order-row small{display:block;color:var(--muted);font-size:13.5px}
.order-row .amt{font-weight:600;color:var(--ink)}
.stage{display:inline-block;margin-top:2px;font-size:12.5px;font-weight:600;color:var(--navy)}
.stage.s3{color:var(--ok)}
@media (max-width:600px){.order-row{grid-template-columns:44px minmax(0,1fr)}.order-row > div:nth-child(3){grid-column:2}.order-row .btn{grid-column:1/-1}}

/* ---------- About ---------- */
.about-hero .container{display:grid;grid-template-columns:1.2fr .8fr;gap:56px;align-items:center;padding-top:30px;padding-bottom:56px}
.about-hero .seal{width:min(280px,70%);margin:0 auto;filter:drop-shadow(0 18px 30px rgba(21,28,56,.12));animation:float 10s ease-in-out infinite}
.about-hero h1{font-size:clamp(36px,4.8vw,56px);margin:16px 0 16px}
@media (max-width:860px){.about-hero .container{grid-template-columns:1fr}.about-hero .seal{display:none}}
.story{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.story article{position:relative;padding:28px 24px 24px;border-radius:var(--r-lg);background:linear-gradient(160deg,rgba(255,255,255,.72),rgba(255,255,255,.42));border:1px solid var(--glass-edge);box-shadow:var(--rim),0 8px 22px rgba(21,28,56,.06)}
.story article::before{content:"";position:absolute;top:-6px;left:26px;width:12px;height:12px;background:linear-gradient(180deg,#c9a265,#a67c3f);transform:rotate(45deg);border-radius:2px;box-shadow:0 0 0 3px rgba(255,255,255,.9)}
.story .yr{font-family:var(--f-serif);font-size:34px;font-weight:600;color:var(--gold-2);line-height:1}
.story h3{margin:12px 0 8px}
.story p{color:var(--muted);font-size:15px}
@media (max-width:900px){.story{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.story{grid-template-columns:1fr}}
.leader{display:grid;grid-template-columns:400px 1fr;gap:64px;align-items:center}
.leader figure{margin:0}
.leader .frame{position:relative;isolation:isolate;padding:10px;border-radius:32px;background:linear-gradient(160deg,rgba(255,255,255,.75),rgba(255,255,255,.4));border:1px solid var(--glass-edge);box-shadow:var(--rim),var(--lift-2)}
.leader .frame img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:24px}
.leader .frame::before{content:"";position:absolute;inset:26px -16px -16px 26px;border:1px solid var(--gold);border-radius:32px;z-index:-1}
.leader figcaption{margin-top:30px;padding-left:4px}
.leader figcaption b{display:block;font-family:var(--f-serif);font-size:24px;color:var(--ink)}
.leader figcaption small{color:var(--gold-2);font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.leader h2{margin:14px 0 18px}
.leader .big{font-size:20px;color:var(--ink);font-family:var(--f-serif);font-style:italic;line-height:1.5;margin-bottom:16px}
.leader p + p{margin-top:14px}
.leader p{color:var(--text)}
@media (max-width:900px){.leader{grid-template-columns:1fr;gap:48px}.leader figure{max-width:380px}}
.values{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.value{padding:26px;border-radius:var(--r-lg);transition:transform .5s var(--spring),box-shadow .3s}
.value:hover{transform:translateY(-3px);box-shadow:var(--rim),var(--lift-2)}
.value .ib{width:46px;height:46px;border-radius:16px;display:grid;place-items:center;background:rgba(249,240,224,.9);color:var(--gold-2);margin-bottom:18px;box-shadow:inset 0 1px 0 #fff}
.value h3{margin-bottom:6px}
.value p{color:var(--muted);font-size:14.5px}
@media (max-width:980px){.values{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.values{grid-template-columns:1fr}}
.branch-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;padding:0;margin:0}
.branch-list li{list-style:none;display:flex;gap:14px;padding:18px;border-radius:var(--r)}
.branch-list .ib{width:40px;height:40px;flex:none;border-radius:50%;display:grid;place-items:center;background:rgba(31,42,77,.07);color:var(--navy);box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
.branch-list .ib .ic{width:18px;height:18px}
.branch-list b{display:block;color:var(--ink)}
.branch-list small{color:var(--muted);font-size:13.5px}