/* The application form inside the class pages (classapply.py, class-apply.js). Moved from the B prototype that
   Genio chose on 2026-10-09 (tools/apply_preview.py). */
.apx{--a-navy:var(--navy,#2f5d34);--a-beige:var(--beige,#e7f1f7);--a-hair:var(--hair,#c6d6e4);
  --a-mute:var(--navy-mute,rgba(47,93,52,.62));color:var(--a-navy);max-width:640px;margin:0 auto;padding:28px 16px 64px;box-sizing:border-box}
.apx *{box-sizing:border-box}
.hpp-popup{display:none!important}   /* no "upcoming classes" pop-up over an application in progress */
.apx-eyebrow{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--a-mute);margin:0;text-align:center}
.apx h1{font-weight:inherit;font-size:26px;letter-spacing:.04em;margin:8px 0 0;text-align:center;line-height:1.4}
.apx-sub{text-align:center;font-size:13.5px;color:var(--a-mute);margin:6px 0 0}
.apx-when{margin:18px auto 0;background:var(--a-beige);padding:14px 18px;font-size:14px}
.apx-when .hpp-when{display:block}
.apx-steps{display:flex;gap:6px;list-style:none;padding:0;margin:26px 0 18px;justify-content:center}
.apx-steps li{flex:1;display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--a-mute);border-top:2px solid var(--a-hair);padding-top:8px}
.apx-steps li span{width:20px;height:20px;border-radius:50%;border:1px solid var(--a-hair);display:inline-flex;align-items:center;justify-content:center;font-size:11px}
.apx-steps li.on{color:var(--a-navy);border-color:var(--a-navy)}
.apx-steps li.on span{background:var(--a-navy);border-color:var(--a-navy);color:#fff}
.apx-card{background:#fff;border:1px solid var(--a-hair);padding:20px 18px;margin:0 0 16px}
.apx-card h2{font-weight:inherit;font-size:17px;letter-spacing:.04em;margin:0 0 14px}
.apx label{display:block;font-size:13px;color:var(--a-mute);margin:0 0 12px}
.apx input:not([type=radio]):not([type=checkbox]),.apx select{display:block;width:100%;margin-top:5px;font:inherit;font-size:16px;
  color:var(--a-navy);padding:10px 12px;border:1px solid var(--a-hair);background:#fff;border-radius:0}
.apx input:focus,.apx select:focus{outline:2px solid var(--a-navy);outline-offset:-1px}
.apx-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 12px}
.apx-opt{display:flex!important;align-items:center;gap:12px;border:1px solid var(--a-hair);padding:14px;margin:0 0 10px!important;cursor:pointer;color:var(--a-navy)!important}
.apx-opt:has(input:checked){border-color:var(--a-navy);background:var(--a-beige)}
.apx-opt input{accent-color:var(--a-navy);width:18px;height:18px;flex:0 0 18px;margin:0}
.apx-opt-main{flex:1;min-width:0}
.apx-opt-main b{font-weight:600;display:block;font-size:15px}
.apx-opt-main small{display:block;font-size:12.5px;color:var(--a-mute);line-height:1.5;margin-top:2px}
.apx-opt-price{text-align:right;font-size:15px;white-space:nowrap}
.apx-local{display:block;font-style:normal;font-size:12px;color:var(--a-mute)}
.apx-fx{font-size:12px;line-height:1.6;color:var(--a-mute);margin:6px 0 0}
.apx-check{display:flex!important;gap:10px;align-items:flex-start;color:var(--a-navy)!important;line-height:1.6}
.apx-check input{accent-color:var(--a-navy);width:18px;height:18px;margin:2px 0 0;flex:0 0 18px}
.apx-cert input[type=file]{font-size:14px;padding:10px;background:#fff;cursor:pointer}
.apx-status{font-size:14px;line-height:1.7;padding:12px 14px;background:var(--a-beige)}
.apx-status.ok{background:#e6f2e3}
.apx-status.ng{background:#fff3e6}
.apx-spin{display:inline-block;width:14px;height:14px;border:2px solid var(--a-hair);border-top-color:var(--a-navy);border-radius:50%;
  animation:apxs .8s linear infinite;vertical-align:-2px;margin-right:8px}
@keyframes apxs{to{transform:rotate(360deg)}}
.apx-note{font-size:13.5px;line-height:1.8;margin:14px 0}
.apx-file span{display:block;font-size:12px;margin-top:4px}
.apx-total{display:flex;justify-content:space-between;align-items:baseline;font-size:15px}
.apx-total b{font-size:22px;font-weight:600}
.apx-local-total{font-size:12.5px;color:var(--a-mute);text-align:right;margin:2px 0 14px;line-height:1.6}
.apx-btn{display:block;width:100%;margin-top:10px;background:var(--a-navy);color:#fff;border:0;font:inherit;font-size:16px;letter-spacing:.04em;padding:15px;cursor:pointer}
.apx-btn:disabled{opacity:.4;cursor:default}
.apx-secure{font-size:12px;line-height:1.7;color:var(--a-mute);margin:10px 0 0;text-align:center}
/* under a grey send button: what it still waits for (class-apply.js tell) */
.apx-need{font-size:13px;line-height:1.7;color:var(--a-mute);margin:10px 0 0;text-align:center}
.apx-pay h2{margin-top:4px}
.apx-paysum{font-size:15px;margin:0 0 14px}
.apx-done{text-align:center;padding:34px 20px}
.apx-tick{width:52px;height:52px;border-radius:50%;background:var(--a-navy);color:#fff;font-size:26px;line-height:52px;margin:0 auto 14px}
.apx-done p{font-size:14px;line-height:1.9;margin:0}
@media (max-width:480px){.apx h1{font-size:22px}.apx-row{grid-template-columns:minmax(0,1fr)}
  /* the price takes its own line under the title: beside it, the title broke one word per line */
  .apx-opt{flex-wrap:wrap;row-gap:6px}.apx-opt-price{flex:1 0 100%;padding-left:30px;text-align:left}}
html{scroll-behavior:smooth}
#apply{scroll-margin-top:72px}
.apx-in{padding-top:56px}
.apx-h{font-weight:inherit;font-size:24px;letter-spacing:.04em;text-align:center;margin:0}
.apb{position:fixed;left:0;right:0;bottom:0;z-index:60;background:rgba(255,255,255,.96);border-top:1px solid var(--hair,#c6d6e4);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:10px 16px calc(10px + env(safe-area-inset-bottom))}
.apb{transition:transform .3s ease}.apb.apb-off{transform:translateY(110%)}
.apb-in{max-width:960px;margin:0 auto;display:flex;align-items:center;gap:14px;color:var(--navy,#2f5d34)}
.apb-txt{flex:1;min-width:0;font-size:13px;line-height:1.45}
.apb-txt b{display:block;font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.apb-btn{flex:0 0 auto;background:var(--navy,#2f5d34);color:#fff!important;text-decoration:none;font-size:15px;letter-spacing:.06em;padding:13px 26px}
body{padding-bottom:76px}
.hpp-popup{display:none!important}
.apx-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.apx-child{display:block;font-style:normal;font-size:12px;color:var(--a-mute)}
.apx-err{font-size:13.5px;line-height:1.7;color:#8a3b12;background:#fff3e6;padding:10px 12px;margin:10px 0 0}
.apx-small{font-size:12.5px;color:var(--a-mute)}
#apxDrop{min-height:120px}
.apx-done a{color:inherit}
/* layout() (classapply.py): instructors as photo + name with the bio behind "Biography"; the class's details as one
   <details> per topic. Cid audit 2026-10-10 B-F4. */
.cls-head{display:flex;align-items:center;gap:var(--s4,16px)}
.cls-face{width:80px;height:80px;flex:none;border-radius:50%;object-fit:cover}
.cls-head .class-person-name{margin:0!important;text-align:left!important}
.cls-more,.cls-topic{border-top:1px solid var(--hair,#c6d6e4)}
.cls-more{margin-top:var(--s4,16px)}
.cls-more>summary,.cls-topic>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;
  align-items:center;gap:var(--s4,16px);padding:var(--s4,16px) 0;color:var(--navy,#2f5d34)}
.cls-more>summary{font-size:15px;letter-spacing:.04em}
.cls-topic>summary{font-size:17px;letter-spacing:.02em}
.cls-more>summary::-webkit-details-marker,.cls-topic>summary::-webkit-details-marker{display:none}
.cls-more>summary::after,.cls-topic>summary::after{content:"+";font-size:20px;line-height:1;flex:none}
.cls-more[open]>summary::after,.cls-topic[open]>summary::after{content:"\2212"}
.cls-topic:last-child{border-bottom:1px solid var(--hair,#c6d6e4)}
.cls-topic-in{padding:0 0 var(--s5,24px)}
.cls-about .service-body-inner{max-width:760px}
#cancellation{scroll-margin-top:96px}
/* the bio preview (previews(), Kohei 1559387923261038714 / 1559404430762315807): the word over the bio's first lines,
   fading out, "more" opening the rest (a checkbox, no script). Three lines of the theme's 2.1 line height, the third
   under the fade, read as about two. */
.cls-bio{margin-top:var(--s4,16px);padding-top:var(--s4,16px);border-top:1px solid var(--hair,#c6d6e4)}
.cls-bio-h{margin:0 0 8px;font-size:13px;letter-spacing:.2em;color:var(--navy-mute);text-align:left}
.cls-bio-t{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.cls-bio-body{max-height:calc(var(--fs-b,16px)*2.1*3);overflow:hidden;
  -webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
.cls-bio-t:checked~.cls-bio-body{max-height:none;-webkit-mask-image:none;mask-image:none}
.cls-bio .class-person-bio>:first-child{margin-top:0!important}
.cls-bio .class-person-bio>:last-child{margin-bottom:0!important}
.cls-bio-more{display:inline-flex;align-items:center;gap:8px;margin:10px 0 0;cursor:pointer;font-size:14px;
  letter-spacing:.1em;color:var(--navy);border-bottom:1px solid var(--navy-thread);padding-bottom:3px}
.cls-bio-more::after{content:"+";font-size:16px;line-height:1}
.cls-bio-t:checked~.cls-bio-more::after{content:"\2212"}
.cls-bio-more .c,.cls-bio-t:checked~.cls-bio-more .o{display:none}
.cls-bio-t:checked~.cls-bio-more .c{display:inline}
.cls-bio-t:focus-visible~.cls-bio-more{outline:2px solid var(--navy);outline-offset:4px}