:root {
  --navy: #071b35;
  --navy-2: #102b4d;
  --ink: #17263a;
  --gold: #e8b85f;
  --gold-soft: #f7e5b9;
  --cream: #f7f4ed;
  --white: #fff;
  --line: rgba(23, 38, 58, .16);
  --shadow: 0 24px 70px rgba(7, 27, 53, .13);
  --serif: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  --sans: "Yu Gothic", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
}

[hidden] { display: none !important; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
body { margin: 0; color: var(--ink); background: var(--white); font-family: var(--sans); font-size: 16px; line-height: 1.85; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
.skip-link { position: fixed; z-index: 999; top: 8px; left: 8px; padding: 10px 16px; background: var(--white); color: var(--navy); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
.draft-bar { padding: 7px 16px; background: var(--gold); color: var(--navy); text-align: center; font-size: .78rem; font-weight: 700; letter-spacing: .08em; }
.page-width, .header-inner { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.section { padding: clamp(80px, 10vw, 144px) 0; }
.eyebrow { margin: 0 0 16px; color: #9a681b; font: 700 .76rem/1 var(--sans); letter-spacing: .22em; }
.eyebrow.light { color: var(--gold); }
.section-heading h2 { margin: 0; color: var(--navy); font: 500 clamp(2.1rem, 4.4vw, 4rem)/1.35 var(--serif); letter-spacing: .02em; }
.section-heading > p:last-child { max-width: 660px; margin: 24px 0 0; color: #526073; }
.section-heading.centered { margin-bottom: 64px; text-align: center; }
.section-heading.centered > p:last-child { margin-inline: auto; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; min-height: 58px; padding: 12px 22px; border: 1px solid currentColor; text-decoration: none; font-weight: 700; letter-spacing: .04em; transition: transform .2s ease, background .2s ease, color .2s ease; }
.button:hover { transform: translateY(-2px); }
.button:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid #f4cb79; outline-offset: 4px; }
.button-gold { border-color: var(--gold); background: var(--gold); color: var(--navy); }
.button-gold:hover { background: #f4cb79; }
.button-navy { border-color: var(--navy); background: var(--navy); color: var(--white); }

.site-header { position: sticky; z-index: 50; top: 0; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); backdrop-filter: blur(14px); }
.header-inner { display: flex; min-height: 78px; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--navy); text-decoration: none; line-height: 1.15; }
.brand-mark { display: block; width: 48px; height: 48px; flex: 0 0 auto; object-fit: contain; }
.brand strong { display: block; font-family: var(--serif); font-size: 1.05rem; letter-spacing: .08em; }
.brand small { display: block; margin-top: 5px; font-size: .58rem; letter-spacing: .17em; }
.site-nav { display: flex; align-items: center; gap: clamp(14px, 1.7vw, 26px); }
.site-nav a { font-size: .82rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.site-nav a:not(.nav-cta):hover { color: #9a681b; }
.site-nav .nav-cta { padding: 11px 16px; background: var(--navy); color: var(--white); }
.menu-button { display: none; border: 0; background: transparent; color: var(--navy); cursor: pointer; }

.hero { position: relative; display: grid; min-height: calc(100svh - 109px); align-items: center; overflow: hidden; background: var(--navy); color: var(--white); }
.hero-image, .hero-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-image { object-fit: cover; object-position: 58% center; }
.hero-shade { background: linear-gradient(90deg, rgba(4,15,31,.92) 0%, rgba(5,21,43,.76) 40%, rgba(5,21,43,.14) 72%, rgba(5,21,43,.05)); }
.hero-content { position: relative; z-index: 1; padding-block: 48px 70px; }
.hero h1 { max-width: 760px; margin: 0; font: 500 clamp(2.1rem, 4.5vw, 4.1rem)/1.25 var(--serif); letter-spacing: .025em; text-shadow: 0 2px 28px rgba(0,0,0,.35); }
.hero h1 em { color: var(--gold-soft); font-style: normal; }
.hero-lead { max-width: 630px; margin: 30px 0; color: rgba(255,255,255,.9); font-size: clamp(1rem, 1.5vw, 1.14rem); }
.hero-actions { display: flex; align-items: center; gap: 24px; }
.hero-actions > span { font-size: .78rem; line-height: 1.55; letter-spacing: .08em; }
.hero-actions strong { color: var(--gold-soft); font-size: 1rem; }
.scroll-cue { position: absolute; z-index: 2; right: max(24px, calc((100vw - 1180px)/2)); bottom: 24px; display: flex; align-items: center; gap: 12px; color: var(--white); font-size: .65rem; letter-spacing: .18em; text-decoration: none; }
.scroll-cue i { display: block; width: 64px; height: 1px; background: var(--gold); }

.two-column { display: grid; grid-template-columns: .78fr 1.22fr; gap: clamp(60px, 9vw, 130px); }
.lead-copy { margin: 0 0 42px; font: 500 clamp(1.18rem, 2vw, 1.55rem)/1.9 var(--serif); }
.check-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.check-list li { display: flex; align-items: center; gap: 22px; padding: 18px 0; border-bottom: 1px solid var(--line); font-weight: 700; }
.check-list span { color: #a56f1d; font: 700 .68rem/1 var(--sans); letter-spacing: .16em; }

.trial-section { background: var(--cream); }
.trial-layout { display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: clamp(40px, 6vw, 80px); }
.image-card { margin: 0; box-shadow: var(--shadow); }
.trial-layout .image-card { width: min(100%, 340px); justify-self: center; }
.image-card img { width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; }
.image-card figcaption { padding: 14px 18px; background: var(--white); color: #526073; font-size: .82rem; }
.timeline { counter-reset: step; }
.timeline > div { position: relative; padding: 0 0 30px 84px; }
.timeline > div:not(:last-child)::before { content: ""; position: absolute; left: 30px; top: 36px; bottom: 0; width: 1px; background: #d5c9ad; }
.timeline span { position: absolute; left: 0; top: 0; display: grid; width: 61px; height: 34px; place-items: center; border: 1px solid #b78b3d; border-radius: 99px; color: #795217; font-size: .75rem; font-weight: 700; }
.timeline h3 { margin: 0 0 5px; color: var(--navy); font: 600 1.15rem/1.5 var(--serif); }
.timeline p { margin: 0; color: #586577; font-size: .92rem; line-height: 1.65; }
.trial-duration-note { max-width: 760px; margin: 34px auto 0; padding: 18px 22px; border-left: 3px solid var(--gold); background: #f7f1e7; color: #4f5b6b; font-size: .9rem; }
.trial-duration-note strong { display: block; margin-bottom: 5px; color: var(--navy); }

.feature-section { background: var(--navy); color: var(--white); }
.feature-section .section-heading h2 { color: var(--white); }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 64px; border-top: 1px solid rgba(255,255,255,.24); border-bottom: 1px solid rgba(255,255,255,.24); }
.feature-grid article { position: relative; min-height: 360px; padding: 42px clamp(24px,3vw,42px); }
.feature-grid article + article { border-left: 1px solid rgba(255,255,255,.24); }
.feature-grid span { color: var(--gold); font-size: .7rem; font-weight: 700; letter-spacing: .18em; }
.feature-grid h3 { margin: 54px 0 24px; font: 500 clamp(1.45rem,2.2vw,2rem)/1.55 var(--serif); }
.feature-grid p { margin: 0; color: rgba(255,255,255,.76); font-size: .92rem; }

.profile-section { overflow: hidden; background: #0c2443; color: rgba(255,255,255,.84); }
.profile-layout { display: grid; grid-template-columns: 300px 1fr; gap: clamp(42px,6vw,86px); align-items: start; }
.profile-photo { position: relative; width: min(280px, 100%); margin: 0; justify-self: center; }
.profile-photo::before { content: ""; position: absolute; z-index: 0; top: -34px; right: -34px; width: 72%; height: 55%; border: 1px solid rgba(232,184,95,.6); }
.profile-photo img { position: relative; z-index: 1; display: block; width: 100%; height: auto; object-fit: contain; box-shadow: 0 18px 48px rgba(0,0,0,.18); }
.profile-copy h2 { margin: 0; color: var(--white); font: 500 clamp(2.3rem,4.2vw,4.4rem)/1.2 var(--serif); }
.profile-copy h2 small { display: block; margin-top: 14px; color: var(--gold); font: 700 .68rem/1 var(--sans); letter-spacing: .2em; }
.profile-role { margin: 24px 0; color: var(--gold-soft); font-weight: 700; }
.profile-role span { display: inline-block; margin-top: 5px; color: rgba(255,255,255,.78); font-size: .875rem; font-weight: 500; }
.profile-copy > p:not(.eyebrow):not(.profile-role) { font-size: 1rem; }
.profile-message { margin: 0 0 22px; color: var(--white); font: 500 clamp(1.18rem,2vw,1.5rem)/1.65 var(--serif); }
.profile-highlights { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin-top: 26px; }
.profile-highlights article { padding: 18px; border: 1px solid rgba(232,184,95,.35); background: rgba(255,255,255,.05); }
.profile-highlights span { color: var(--gold); font-size: .75rem; font-weight: 700; letter-spacing: .12em; }
.profile-highlights h3 { margin: 8px 0 5px; color: var(--white); font: 600 .92rem/1.5 var(--serif); }
.profile-highlights p { margin: 0; color: rgba(255,255,255,.7); font-size: .875rem; }
.profile-beginner { margin: 22px 0 0; padding-left: 16px; border-left: 2px solid var(--gold); color: rgba(255,255,255,.9); }
.career-details { margin-top: 30px; border-top: 1px solid rgba(255,255,255,.25); border-bottom: 1px solid rgba(255,255,255,.25); }
.career-details summary { padding: 17px 0; cursor: pointer; color: var(--white); font-weight: 700; }
.career-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; padding: 10px 0 24px; }
.career-columns-three { grid-template-columns: repeat(3, minmax(0,1fr)); }
.career-columns h3 { color: var(--gold); font: 600 1rem/1.5 var(--serif); }
.career-columns ul { margin: 0; padding-left: 1.2em; font-size: .875rem; }
.profile-source { display: inline-block; margin-top: 22px; color: var(--gold-soft); font-size: .875rem; font-weight: 700; text-decoration-thickness: 1px; text-underline-offset: 5px; }

.pricing-section { background: var(--cream); }
.price-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: stretch; }
.price-card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 32px 24px; background: var(--white); border: 1px solid #ded8cb; }
.price-card.recommended { border: 2px solid var(--gold); box-shadow: 0 16px 44px rgba(117,82,23,.12); }
.recommend-badge { position: absolute; top: -15px; right: 18px; margin: 0; padding: 5px 12px; background: var(--gold); color: var(--navy); font-size: .7rem; font-weight: 700; }
.plan-label { margin: 0 0 12px; color: #a06b19; font-size: .72rem; font-weight: 700; letter-spacing: .14em; }
.price-card h3 { margin: 0; color: var(--navy); font: 600 1.2rem/1.5 var(--serif); }
.duration { margin: 4px 0 18px; color: #6a7482; font-size: .82rem; }
.price { margin: 0; color: var(--navy); font: 500 clamp(2rem,3vw,2.8rem)/1 var(--serif); white-space: nowrap; }
.price span { margin-right: 4px; font-size: 1rem; }
.saving { min-height: 26px; margin: 12px 0 0; color: #8b5e19; font-size: .76rem; font-weight: 700; }
.price-card ul { margin: 24px 0; padding: 18px 0 0; border-top: 1px solid var(--line); list-style: none; font-size: .8rem; }
.price-card li::before { content: "・"; color: #a56f1d; }
.price-card .button { margin-top: auto; font-size: .82rem; }
.in-person { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-top: 28px; padding: 26px 32px; background: var(--navy); color: var(--white); }
.in-person h3 { margin: 0; font: 500 1.55rem/1.4 var(--serif); }
.in-person .in-person-location { margin: 4px 0 0; color: rgba(255,255,255,.7); font-size: .82rem; }
.in-person .in-person-travel { max-width: 46rem; margin-top: 10px; color: rgba(255,255,255,.86); font-size: .875rem; line-height: 1.65; }
.in-person-price { display: flex; align-items: baseline; gap: 12px; margin: 0; }
.in-person-price strong { color: var(--gold-soft); font: 500 1.55rem/1 var(--serif); }
.in-person-price span { font-size: .8rem; }
.conditions-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
.conditions-grid > div { padding: 24px 28px; background: rgba(255,255,255,.75); border: 1px solid #ded8cb; }
.conditions-grid h3 { margin: 0 0 8px; color: var(--navy); font: 600 1rem/1.5 var(--serif); }
.conditions-grid p { margin: 0; color: #5e6978; font-size: .82rem; }

.continuing-section { background: #eef2f5; }
.continuing-layout { display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(48px, 8vw, 110px); align-items: start; }
.continuing-panel { padding: clamp(26px, 4vw, 46px); background: var(--white); box-shadow: var(--shadow); }
.continuing-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.continuing-grid article { padding: 26px 22px; }
.continuing-grid article + article { border-left: 1px solid var(--line); }
.continuing-grid span { color: #98661b; font-size: .72rem; font-weight: 700; letter-spacing: .14em; }
.continuing-grid h3 { margin: 24px 0 10px; color: var(--navy); font: 600 1.08rem/1.5 var(--serif); }
.continuing-grid p { margin: 0; color: #5d6978; font-size: .84rem; }
.text-link { display: inline-flex; gap: 24px; align-items: center; margin-top: 28px; color: var(--navy); font-weight: 700; text-decoration-color: var(--gold); text-underline-offset: 6px; }
.preview-note { margin: 14px 0 0; color: #667180; font-size: .76rem; }

.voice-section { background: var(--white); }
.voice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 54px; }
.voice-grid article { padding: clamp(30px,4vw,50px); background: var(--cream); border-top: 3px solid var(--gold); }
.voice-tag { margin: 0 0 25px; color: #8b5e19; font-size: .78rem; font-weight: 700; letter-spacing: .05em; }
.voice-grid blockquote, .voice-summary { margin: 0; color: #334156; font: 500 clamp(1rem,1.5vw,1.12rem)/2 var(--serif); }
.disclaimer { margin: 20px 0 0; color: #697483; font-size: .76rem; }

.setup-section { background: #eef2f5; }
.setup-layout { display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(50px,8vw,100px); }
.setup-content { display: grid; gap: 30px; }
.icon-list { margin: 0; padding: 0; list-style: none; }
.icon-list li { display: grid; grid-template-columns: 58px 1fr; gap: 20px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.icon-list li:first-child { border-top: 1px solid var(--line); }
.icon-list span { display: grid; width: 46px; height: 46px; place-items: center; border: 1px solid #b1843c; border-radius: 50%; color: #956516; font-size: .68rem; font-weight: 700; }
.icon-list h3 { margin: 0 0 5px; color: var(--navy); font: 600 1.08rem/1.5 var(--serif); }
.icon-list p { margin: 0; color: #5d6978; font-size: .85rem; }
.zoom-tip { padding: 30px; background: var(--navy); color: rgba(255,255,255,.76); }
.zoom-tip h3 { margin: 0 0 12px; color: var(--white); font: 500 1.3rem/1.5 var(--serif); }
.zoom-tip p:last-child { margin: 0; font-size: .85rem; }
.zoom-tip .zoom-beginner-note { margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1px solid rgba(255,255,255,.18); }
.zoom-beginner-note a { font-weight: 700; text-decoration: underline; text-underline-offset: .16em; }
.zoom-tip .zoom-beginner-note a { color: var(--gold-soft); }

.faq-layout { display: grid; grid-template-columns: .7fr 1.3fr; gap: clamp(50px,8vw,120px); }
.faq-section .section-heading h2 { font-size: clamp(2rem, 3.5vw, 3.4rem); }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { position: relative; padding: 24px 54px 24px 0; cursor: pointer; color: var(--navy); font-weight: 700; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span, .faq-list summary span::after { position: absolute; top: 50%; right: 8px; width: 20px; height: 1px; background: var(--navy); content: ""; transition: transform .2s ease; }
.faq-list summary span::after { top: 0; right: 0; transform: rotate(90deg); }
.faq-list details[open] summary span::after { transform: rotate(0deg); }
.faq-list details p { margin: -8px 54px 24px 0; color: #586577; font-size: .92rem; }

.booking-section { padding: clamp(90px,12vw,160px) 0; background: linear-gradient(125deg, #071b35, #12335a); color: var(--white); text-align: center; }
.booking-inner { max-width: 820px; }
.booking-inner h2 { margin: 0; font: 500 clamp(2.3rem,5vw,4.8rem)/1.35 var(--serif); }
.booking-inner > p:not(.eyebrow) { margin: 24px 0; color: rgba(255,255,255,.78); }
.booking-placeholder { display: flex; flex-direction: column; gap: 4px; max-width: 610px; margin: 0 auto 24px; padding: 16px 20px; border: 1px solid rgba(255,255,255,.24); background: rgba(255,255,255,.06); }
.booking-placeholder strong { color: var(--gold-soft); }
.booking-placeholder span { font-size: .78rem; }
.booking-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; max-width: 780px; margin: 34px auto 24px; padding: 0; list-style: none; counter-reset: booking-step; }
.booking-steps li { position: relative; padding: 18px 12px; border: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.82); font-size: .78rem; }
.booking-steps li::before { display: block; margin-bottom: 6px; color: var(--gold); font-size: .68rem; font-weight: 700; counter-increment: booking-step; content: "0" counter(booking-step); }
.booking-steps-five { grid-template-columns: repeat(5, 1fr); }
.booking-inner .button { min-width: min(100%, 390px); }
.booking-inner > small { display: block; margin-top: 14px; color: rgba(255,255,255,.55); font-size: .72rem; }

.legal-section { padding: 70px 0; background: #ece9e2; }
.legal-section .section-heading { display: grid; grid-template-columns: .5fr 1fr; column-gap: 40px; align-items: end; }
.legal-section .section-heading .eyebrow { grid-column: 1 / -1; }
.legal-section .section-heading h2 { font-size: clamp(1.8rem,3vw,2.7rem); }
.legal-section .section-heading > p:last-child { margin: 0; }
.legal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 34px; }
.legal-grid article, .legal-grid .legal-card { padding: 24px; background: rgba(255,255,255,.7); border: 1px solid #d5d0c5; }
.legal-grid h3 { margin: 0 0 10px; color: var(--navy); font: 600 1rem/1.5 var(--serif); }
.legal-grid p { margin: 0 0 14px; color: #606b78; font-size: .78rem; }
.legal-grid span { color: #8a5c18; font-size: .7rem; font-weight: 700; letter-spacing: .08em; }

.site-footer { padding: 64px 0 24px; background: #041326; color: rgba(255,255,255,.7); }
.footer-grid { display: grid; grid-template-columns: 1.2fr .8fr 1fr; gap: 60px; }
.footer-brand { color: var(--white); }
.footer-grid > div:first-child p { font-size: .78rem; }
.footer-grid nav { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; }
.footer-grid nav a, .footer-contact a { color: rgba(255,255,255,.74); font-size: .78rem; text-decoration: none; }
.footer-grid nav a:hover, .footer-contact a:hover { color: var(--gold); }
.footer-contact > p:first-child { margin: 0 0 6px; color: var(--gold); font-size: .68rem; font-weight: 700; letter-spacing: .15em; }
.socials { display: flex; gap: 18px; margin-top: 24px; }
.footer-bottom { display: flex; justify-content: space-between; margin-top: 54px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.15); font-size: .7rem; }
.footer-bottom a { text-decoration: none; }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.app-body { background: var(--cream); }
.app-header { background: var(--white); border-bottom: 1px solid var(--line); }
.app-header-inner { display: flex; min-height: 78px; align-items: center; justify-content: space-between; gap: 20px; }
.back-link { color: var(--navy); font-size: .82rem; font-weight: 700; text-underline-offset: 5px; }
.app-main { padding: clamp(54px, 8vw, 100px) 0 110px; }
.app-shell { max-width: 920px; }
.app-intro { margin-bottom: 34px; }
.app-intro h1, .student-welcome h1 { margin: 0; color: var(--navy); font: 500 clamp(2rem, 5vw, 4rem)/1.32 var(--serif); }
.app-intro > p:last-child, .student-welcome > div > p:last-child { margin: 16px 0 0; color: #5a6675; }
.status-strip { display: flex; align-items: center; gap: 18px; margin: 0 0 24px; padding: 15px 18px; background: #fff7df; border: 1px solid #ead39f; color: #624817; font-size: .8rem; }
.status-strip strong { white-space: nowrap; }
.booking-form, .review-panel { display: grid; gap: 18px; }
.form-section, .review-panel { padding: clamp(24px, 4vw, 42px); background: var(--white); border: 1px solid #ded8cb; box-shadow: 0 12px 36px rgba(7,27,53,.06); }
.form-section-title { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 26px; }
.form-section-title > span { display: grid; flex: 0 0 38px; width: 38px; height: 38px; place-items: center; border: 1px solid var(--gold); border-radius: 50%; color: #8a5c18; font-size: .74rem; font-weight: 700; }
.form-section-title h2, .review-panel h2, .view-heading h2 { margin: 0; color: var(--navy); font: 600 clamp(1.35rem, 3vw, 2rem)/1.4 var(--serif); }
.form-section-title p { margin: 5px 0 0; color: #637080; font-size: .82rem; }
.form-section fieldset { margin: 0; padding: 0; border: 0; }
.slot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.slot-choice { position: relative; cursor: pointer; }
.slot-choice input { position: absolute; opacity: 0; }
.slot-choice span { display: grid; min-height: 48px; place-items: center; padding: 9px 12px; border: 1px solid #cdd3db; background: #f8fafb; color: var(--navy); font-size: .82rem; font-weight: 700; text-align: center; transition: .2s ease; }
.slot-choice input:checked + span { border-color: var(--gold); background: #fff6dd; box-shadow: inset 0 0 0 1px var(--gold); }
.slot-choice input:focus-visible + span { outline: 3px solid #f4cb79; outline-offset: 3px; }
.slot-month-picker { display: flex; align-items: center; gap: 10px; margin: 14px 0; color: var(--navy); font-size: .84rem; font-weight: 700; }
.slot-month-picker select { min-height: 42px; padding: 8px 34px 8px 10px; border: 1px solid #c9d0d8; background: var(--white); color: var(--ink); font: inherit; }
.field-note { margin: 14px 0 0; color: #6b7582; font-size: .76rem; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.booking-form label:not(.slot-choice):not(.choice-card) { display: grid; gap: 7px; color: var(--navy); font-size: .84rem; font-weight: 700; }
.booking-form label > span { margin-left: 8px; color: #9a681b; font-size: .67rem; }
.booking-form input:not([type="radio"]):not([type="checkbox"]), .booking-form textarea, .booking-form select, .signin-card input { width: 100%; min-height: 48px; padding: 11px 13px; border: 1px solid #c9d0d8; border-radius: 0; background: var(--white); color: var(--ink); font: inherit; font-size: .92rem; }
.booking-form fieldset > label, .booking-form [data-minor-fields] label:has(input[type="checkbox"]) { display: inline-flex; grid-template-columns: none; align-items: center; gap: 8px; margin: 4px 16px 4px 0; }
.booking-form input[type="radio"], .booking-form input[type="checkbox"] { flex: 0 0 auto; width: 18px; height: 18px; min-height: 0; margin: 0; padding: 0; accent-color: #9a681b; }
.booking-form textarea { resize: vertical; }
.trial-request-intro { text-align: center; }
.trial-request-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 630px; margin: 26px auto 0; padding: 0; list-style: none; }
.trial-request-facts li { display: grid; gap: 4px; padding: 16px 10px; border: 1px solid #d8d1c2; background: rgba(255,255,255,.62); }
.trial-request-facts strong { color: var(--navy); font: 600 1.08rem/1.3 var(--serif); }
.trial-request-facts span { color: #687483; font-size: .72rem; }
.trial-request-status { margin-bottom: 18px; }
.trial-calendar-note { display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; margin-bottom: 18px; padding: clamp(24px,4vw,38px); border: 1px solid #d8d1c2; background: #f5f1e8; }
.trial-calendar-note h2 { margin: 0; color: var(--navy); font: 600 clamp(1.3rem,3vw,1.8rem)/1.4 var(--serif); }
.trial-calendar-note p { margin: 9px 0 0; color: #5e6b79; }
.trial-calendar-note .button[aria-disabled="true"] { min-width: 220px; opacity: .55; cursor: not-allowed; }
.trial-live-calendar { grid-template-columns: 1fr; gap: 18px; }
.trial-live-calendar > .small-action { width: fit-content; }
.trial-live-slot-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.trial-live-slot-list button { display: grid; gap: 3px; padding: 12px; border: 1px solid #b8c4cf; background: #fff; color: var(--navy); text-align: left; cursor: pointer; }
.trial-live-slot-list button:hover, .trial-live-slot-list button:focus-visible { border-color: #9a681b; outline: 2px solid #f4cb79; outline-offset: 2px; }
.trial-live-slot-list button strong { font-size: .82rem; }
.trial-live-slot-list button small { color: #697483; font-size: .67rem; }
.field-full { grid-column: 1 / -1; }
.trial-inline-choices, .check-panel { margin-top: 22px !important; }
.trial-inline-choices legend, .check-panel legend, .form-section fieldset > legend { margin-bottom: 10px; color: var(--navy); font-size: .84rem; font-weight: 700; }
.trial-inline-choices legend span { margin-left: 8px; color: #9a681b; font-size: .67rem; }
.conditional-panel { display: grid; gap: 14px; margin-top: 16px; padding: 18px; border-left: 3px solid var(--gold); background: #f7f4ed; }
.conditional-panel[hidden] { display: none; }
.conditional-panel p { margin: 0; color: #647080; font-size: .77rem; }
.booking-form .conditional-panel .guardian-check { display: flex; grid-template-columns: none; align-items: center; gap: 9px; margin: 0; }
.trial-section-heading { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.trial-section-heading b { padding: 4px 9px; border: 1px solid #d9b76c; background: #fff8e5; color: #7a5719; font-size: .68rem; }
.date-preferences { display: grid; gap: 12px; margin-top: 20px; }
.date-preference { display: grid; grid-template-columns: 130px 1fr 1fr; gap: 14px; align-items: end; padding: 18px; border: 1px solid var(--line); background: #faf9f6; }
.date-preference > strong { align-self: center; color: var(--navy); font: 600 .96rem/1.4 var(--serif); }
.date-preference > strong span { margin-left: 6px; color: #9a681b; font: 700 .66rem/1 sans-serif; }
.date-preference > strong small { margin-left: 6px; color: #6f7985; font: 400 .68rem/1 sans-serif; }
.weekend-note { margin: 16px 0; padding: 13px 15px; border-left: 3px solid #66829d; background: #eef4f7; color: #465d72; font-size: .8rem; }
.card-payment-route { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; padding: 18px; border: 1px solid #d9b76c; background: #fff8e5; }
.card-payment-route > span { flex: 0 0 auto; padding: 4px 8px; background: var(--gold); color: var(--navy); font-size: .65rem; font-weight: 800; }
.card-payment-route strong { color: var(--navy); }
.card-payment-route p { margin: 4px 0 0; color: #5f6874; font-size: .78rem; }
.check-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.booking-form .check-grid label { display: flex; grid-template-columns: none; align-items: center; gap: 8px; padding: 11px 12px; border: 1px solid #d4d9df; background: #fafbfc; font-weight: 600; }
.privacy-note { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--line); color: #687483; font-size: .76rem; }
.form-error { min-height: 1.5em; margin: 0; color: #a12e2e; font-weight: 700; }
.review-status { display: flex; gap: 12px; align-items: center; margin-bottom: 18px; }
.review-status span { padding: 4px 8px; background: #fff0bd; color: #775213; font-size: .68rem; font-weight: 800; }
.review-status strong { color: var(--navy); }
.review-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.review-actions .button[disabled] { opacity: .48; cursor: not-allowed; }
.review-footnote { margin: 14px 0 0; color: #6c7682; font-size: .76rem; }
.send-status { margin: 18px 0 0; padding: 16px; border-left: 3px solid var(--gold); background: #f7f4ed; color: var(--navy); line-height: 1.8; }
.send-status:empty { display: none; }
.payment-options { display: grid; grid-template-columns: 1fr; gap: 10px; }
.choice-card { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; min-height: 60px; padding: 14px 16px; border: 1px solid #cdd3db; cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.choice-card:focus-within { outline: 3px solid #f4cb79; outline-offset: 3px; }
.choice-card-card { min-height: 106px; padding: 20px; border: 2px solid #173657; background: var(--navy); color: var(--white); box-shadow: 0 12px 28px rgba(11,31,54,.16); }
.choice-card-card:has(input:checked) { border-color: var(--gold); background: var(--navy); box-shadow: 0 12px 28px rgba(11,31,54,.2), inset 0 0 0 1px var(--gold); }
.choice-card-card:not(:has(input:checked)) { opacity: .78; }
.choice-card-bank { width: min(100%, 520px); background: #f7f8fa; color: var(--navy); }
.choice-card-bank:has(input:checked) { border-color: #496884; background: #edf3f7; box-shadow: inset 0 0 0 1px #496884; }
.choice-card input { width: 18px; height: 18px; accent-color: #d39a34; }
.choice-card span { display: grid; gap: 3px; margin: 0; }
.choice-card > span { margin-left: 0; color: inherit; font-size: inherit; }
.choice-card strong { color: inherit; }
.choice-card small { color: #697483; font-weight: 400; }
.choice-card-card small { color: rgba(255,255,255,.76); }
.choice-card b { padding: 4px 8px; background: var(--gold); color: var(--navy); font-size: .65rem; }
.payment-note { margin-top: 14px; padding: 14px 16px; background: #eef2f5; color: #536173; font-size: .79rem; }
.purchase-flow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.purchase-flow > div { display: grid; gap: 8px; padding: 18px; border: 1px solid var(--line); }
.purchase-flow strong { color: var(--navy); font-family: var(--serif); }
.purchase-flow span { color: #5f6b79; font-size: .8rem; }
.purchase-flow span + span::before { margin-right: 7px; color: #9a681b; content: "→"; }
.form-submit { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px clamp(24px, 4vw, 42px); background: var(--navy); color: var(--white); }
.form-submit div { display: grid; gap: 4px; }
.form-submit small { color: rgba(255,255,255,.62); }
.review-panel dl { margin: 0; border-top: 1px solid var(--line); }
.review-panel dl div { display: grid; grid-template-columns: 150px 1fr; padding: 14px 0; border-bottom: 1px solid var(--line); }
.review-panel dt { color: #677382; font-size: .8rem; }
.review-panel dd { margin: 0; color: var(--navy); font-weight: 700; }
.review-panel .status-strip { margin: 8px 0; }
.purchase-legal-summary { margin: 22px 0; padding: 20px; background: #f4f1e9; border: 1px solid #ded8cb; }
.purchase-legal-summary h3 { margin: 0 0 10px; color: var(--navy); font: 600 1rem/1.5 var(--serif); }
.purchase-legal-summary ul { margin: 0; padding-left: 1.25em; color: #596676; font-size: .8rem; }
.purchase-legal-summary p { margin: 12px 0 0; font-size: .76rem; }
.schedule-shell { max-width: 820px; }
.purchase-status-card { display: flex; align-items: center; gap: 20px; padding: 26px; background: var(--navy); color: var(--white); }
.state-dot { flex: 0 0 16px; width: 16px; height: 16px; border: 3px solid var(--gold); border-radius: 50%; box-shadow: 0 0 0 6px rgba(232,184,95,.16); }
.purchase-status-card.is-paid .state-dot { background: var(--gold); }
.purchase-status-card p { margin: 0; color: var(--gold-soft); font-size: .72rem; font-weight: 700; letter-spacing: .12em; }
.purchase-status-card h2 { margin: 4px 0; font: 600 clamp(1.35rem, 3vw, 2rem)/1.4 var(--serif); }
.purchase-status-card small { color: rgba(255,255,255,.68); }
.google-booking-card { margin-top: 18px; padding: clamp(26px, 5vw, 46px); background: var(--white); border: 1px solid #ded8cb; }
.google-booking-card h2 { margin: 0; color: var(--navy); font: 600 clamp(1.55rem, 4vw, 2.6rem)/1.45 var(--serif); }
.google-booking-card p { color: #5d6978; }
.google-booking-card .button { width: 100%; margin-top: 16px; opacity: .58; cursor: not-allowed; }
.google-booking-card .button span { font-size: .7rem; }
.google-booking-card .button-receipt { display: flex; width: fit-content; min-width: 190px; margin-top: 12px; border: 1px solid var(--navy); background: transparent; color: var(--navy); opacity: 1; cursor: pointer; }
.google-booking-card .button-receipt[hidden] { display: none; }
.receipt-note { margin: 12px 0 0; color: #667180; font-size: .78rem; }
.schedule-help { margin-top: 18px; }

.online-flow-section { background: #f5f1e8; }
.flow-story-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; width: min(1180px, 100%); margin-inline: auto; gap: clamp(30px, 5vw, 54px); }
.flow-story-layout.flow-text-only { grid-template-columns: 1fr; max-width: 900px; margin-inline: auto; }
.flow-comic { margin: 0; padding: 12px; background: var(--white); box-shadow: 0 18px 50px rgba(7,27,53,.12); }
.flow-comic img { display: block; width: 100%; height: auto; }
.flow-comic figcaption { padding: 12px 6px 2px; color: #697483; font-size: .875rem; line-height: 1.7; text-align: center; }
.flow-story-list { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid #d8d2c5; }
.flow-story-list li { display: grid; grid-template-columns: 58px 1fr; gap: 18px; padding: 22px 0; border-bottom: 1px solid #d8d2c5; }
.flow-story-list li > span { color: #9a681b; font: 600 1.2rem/1 var(--serif); }
.flow-story-list h3 { margin: 0 0 6px; color: var(--navy); font: 600 1.05rem/1.5 var(--serif); }
.flow-story-list p { margin: 0; color: #5f6b79; font-size: 1rem; }
.centered-link { margin: 30px 0 0; text-align: center; }

.survey-shell { max-width: 820px; }
.survey-card { padding: clamp(24px, 5vw, 48px); background: var(--white); border: 1px solid #ded8cb; }
.survey-card fieldset { margin: 0; padding: 24px 0; border: 0; border-top: 1px solid var(--line); }
.survey-card fieldset:first-child { border-top: 0; padding-top: 0; }
.survey-card legend { width: 100%; margin-bottom: 14px; color: var(--navy); font: 600 1.08rem/1.5 var(--serif); }
.survey-card legend small { display: block; margin-top: 3px; color: #7a8490; font: 400 .73rem/1.6 var(--sans); }
.survey-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.survey-option { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 11px 13px; border: 1px solid #cdd3db; color: #485563; font-size: .84rem; cursor: pointer; }
.survey-option:has(input:checked) { border-color: var(--gold); background: #fff9e9; }
.survey-option input { accent-color: #9a681b; }
.survey-input { display: grid; gap: 7px; margin-top: 12px; color: #5f6b79; font-size: .78rem; }
.survey-input input, .survey-input textarea { width: 100%; min-height: 48px; padding: 11px 13px; border: 1px solid #c9d0d8; background: var(--white); color: var(--ink); font: inherit; }
.survey-input textarea { min-height: 100px; resize: vertical; }
.survey-submit { display: grid; gap: 12px; margin-top: 18px; }
.survey-submit p { margin: 0; color: #687484; font-size: .78rem; }
.survey-status { min-height: 1.5em; color: #745620; font-weight: 700; }
.legal-card { display: block; color: inherit; text-decoration: none; }
.legal-card:hover span, .legal-card:focus-visible span { color: var(--navy); }
.legal-document { max-width: 900px; }
.legal-document article { padding: clamp(26px, 5vw, 52px); background: var(--white); border: 1px solid #ded8cb; }
.legal-document h2 { margin: 38px 0 12px; color: var(--navy); font: 600 1.35rem/1.5 var(--serif); }
.legal-document h2:first-child { margin-top: 0; }
.legal-document h3 { margin: 24px 0 8px; color: var(--navy); font: 600 1.05rem/1.5 var(--serif); }
.legal-document p, .legal-document li { color: #566273; font-size: .88rem; line-height: 1.9; }
.legal-document table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.legal-document th, .legal-document td { padding: 12px; border: 1px solid #d8dee5; text-align: left; vertical-align: top; }
.legal-document th { width: 28%; background: #f2f4f6; color: var(--navy); }
.legal-nav { display: flex; flex-wrap: wrap; gap: 14px 22px; margin-top: 24px; }

.student-main { min-height: calc(100vh - 109px); padding: 42px 14px 90px; background: #edf1f4; }
.student-shell { width: min(760px, 100%); margin: 0 auto; }
.student-welcome { display: flex; justify-content: space-between; gap: 22px; align-items: flex-start; padding: 10px 4px 26px; }
.student-welcome h1 { font-size: clamp(2rem, 7vw, 3.3rem); }
.demo-badge { padding: 6px 10px; background: var(--gold); color: var(--navy); font-size: .7rem; font-weight: 700; white-space: nowrap; }
.signin-card { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; padding: 24px; background: var(--navy); color: rgba(255,255,255,.74); }
.signin-card h2 { margin: 0 0 7px; color: var(--white); font: 600 1.12rem/1.5 var(--serif); }
.signin-card p { margin: 0; font-size: .78rem; }
.signin-card form { display: flex; align-items: center; }
.signin-card input { min-width: 0; border: 0; }
.signin-card button { min-height: 48px; padding: 9px 14px; border: 0; background: var(--gold); color: var(--navy); font-weight: 700; white-space: nowrap; cursor: pointer; }
.signin-status { grid-column: 1 / -1; color: var(--gold-soft); }
.owner-test-entry { grid-column: 1 / -1; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.18); }
.owner-test-entry p { margin: 0 0 8px; color: rgba(255,255,255,.74); }
.owner-test-entry button { background: var(--white); color: var(--navy); }
.student-tabs { position: sticky; z-index: 5; top: 0; display: grid; grid-template-columns: repeat(4, 1fr); margin: 18px 0; background: var(--white); box-shadow: 0 6px 22px rgba(7,27,53,.08); }
.student-tabs button { min-height: 58px; padding: 9px 6px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: #687484; font-size: .78rem; font-weight: 700; cursor: pointer; }
.student-tabs button[aria-selected="true"] { border-bottom-color: var(--gold); color: var(--navy); background: #fffaf0; }
.student-view { scroll-margin-top: 80px; }
.summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.summary-grid article { display: grid; min-height: 170px; padding: 24px; background: var(--white); border-top: 3px solid var(--gold); }
.summary-grid p { margin: 0; color: #687484; font-size: .78rem; }
.summary-grid strong { align-self: center; color: var(--navy); font: 600 1.35rem/1.4 var(--serif); }
.summary-grid small { align-self: end; color: #697483; }
.ticket-summary strong span { color: #9a681b; font-size: 2.4rem; }
.quick-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 14px; }
.quick-actions button { display: grid; min-height: 150px; padding: 20px; border: 0; background: var(--white); color: var(--navy); text-align: left; cursor: pointer; }
.quick-actions span { color: #9a681b; font-size: .68rem; font-weight: 700; }
.quick-actions strong { align-self: center; font-family: var(--serif); }
.quick-actions small { color: #687484; }
.view-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; padding: 22px 4px; }
.view-heading > span { color: #687484; font-size: .76rem; }
.empty-card, .sample-slots, .payment-state, .bank-state, .eligibility-note, .pending-booking-card { padding: 24px; background: var(--white); border: 1px solid #dbe0e5; }
.empty-card strong { color: var(--navy); font-family: var(--serif); }
.empty-card p { margin: 8px 0 0; color: #687484; font-size: .82rem; }
.sample-slots { margin-top: 12px; }
.sample-slots h3 { margin: 0 0 15px; color: var(--navy); font: 600 1rem/1.5 var(--serif); }
.sample-slots .button { margin-top: 18px; }
.sample-slots > p { margin: 13px 0 0; color: #745620; font-size: .78rem; }
.eligibility-note { margin-bottom: 12px; border-left: 4px solid var(--gold); }
.eligibility-note strong { color: var(--navy); font-family: var(--serif); }
.eligibility-note p, .slot-intro { margin: 7px 0 0; color: #657182; font-size: .88rem; line-height: 1.75; }
.continuing-reservations { display: grid; gap: 12px; }
.pending-booking-card { display: grid; gap: 17px; border-color: #d8bd77; background: #fffdf7; }
.pending-booking-card h3 { margin: 9px 0 3px; color: var(--navy); font: 600 1.15rem/1.5 var(--serif); }
.booking-timing { margin-top: 8px; padding: 9px 11px; background: #f7f1e7; color: #39485b; font-size: .82rem; line-height: 1.6; }
.pending-booking-card p { margin: 0; color: #596678; }
.booking-status-chip { display: inline-flex; padding: 5px 9px; background: #fff0be; color: #704c12; font-size: .82rem; font-weight: 700; }
.pending-booking-card dl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
.pending-booking-card dl div { padding: 12px; background: var(--white); border: 1px solid #e4ddca; }
.pending-booking-card dt { color: #687484; font-size: .82rem; }
.pending-booking-card dd { margin: 4px 0 0; color: var(--navy); font-weight: 700; }
.pending-booking-card .button { margin: 0; }
.pending-booking-card small { color: #657182; font-size: .82rem; line-height: 1.7; }
.overdue-note { margin-top: 8px !important; color: #8a4b19 !important; font-weight: 700; }
.owner-payment-ops { margin-top: 28px; padding: 26px; border: 2px solid #9a6a20; background: #fffaf0; }
.owner-payment-ops > p { color: #596678; line-height: 1.8; }
.owner-payment-ops [data-owner-payment-list] { display: grid; gap: 16px; }
.owner-followup-card { display: grid; gap: 16px; padding: 20px; border: 1px solid #d8bd77; background: var(--white); }
.owner-followup-card h3 { margin: 8px 0 4px; color: var(--navy); font: 600 1.12rem/1.5 var(--serif); }
.owner-followup-card p { margin: 0; color: #596678; }
.owner-followup-card dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; }
.owner-followup-card dl div { padding: 10px; background: #f6f7f8; }
.owner-followup-card dt { color: #687484; font-size: .82rem; }
.owner-followup-card dd { margin: 4px 0 0; color: var(--navy); font-weight: 700; }
.owner-followup-card details { border-top: 1px solid #e0e3e6; padding-top: 12px; }
.owner-followup-card summary { color: var(--navy); font-weight: 700; cursor: pointer; }
.owner-followup-card pre { overflow-x: auto; white-space: pre-wrap; word-break: break-word; padding: 14px; background: #f5f7f9; color: #334154; font: inherit; font-size: .9rem; line-height: 1.7; }
.owner-followup-card code { overflow-wrap: anywhere; }
.owner-readiness-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.owner-readiness-item { padding: 16px; border: 1px solid #d8dee6; background: var(--white); }
.owner-readiness-item.ready { border-color: #8fb69c; background: #f5fbf7; }
.owner-readiness-item.pending { border-color: #d8bd77; background: #fffaf0; }
.owner-readiness-item span { display: inline-block; margin-bottom: 8px; color: #526273; font-size: .78rem; font-weight: 700; }
.owner-readiness-item h3 { margin: 0 0 6px; color: var(--navy); font: 600 1.05rem/1.45 var(--serif); }
.owner-readiness-item p { margin: 0; color: #596678; line-height: 1.65; }
.operator-event-list { display: grid; gap: 8px; }
.operator-event-list article { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid #d8dee6; background: var(--white); }
.operator-event-list span, .operator-event-list time, .operator-event-list small { color: #596678; font-size: .86rem; }
.operator-reset { border-color: #d7a3a3; background: #fffafa; }
.operator-identity-bind { border-color: #d8bd77; background: #fffdf7; }
.operator-reset .field { max-width: 620px; margin: 16px 0 12px; }
.operator-answer-list { display: grid; gap: 8px; margin-top: 12px; }
.operator-answer-list div { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 12px; }
.operator-answer-list dt { color: #596678; font-weight: 700; }
.operator-answer-list dd { margin: 0; overflow-wrap: anywhere; }
.continuing-choice { display: grid; gap: 12px; margin-top: 18px; }
.continuing-choice .button { margin: 0; }
.new-purchase-choice { display: grid; grid-template-columns: minmax(190px,.7fr) minmax(300px,1.3fr) auto; gap: 12px; align-items: end; padding: 14px; background: #f2f5f7; }
.new-purchase-choice label { display: grid; gap: 5px; color: var(--navy); font-size: .82rem; font-weight: 700; }
.new-purchase-choice .choice-card-card { color: var(--white); }
.new-purchase-choice select { min-height: 44px; padding: 8px 10px; border: 1px solid #c9d0d8; background: var(--white); color: var(--ink); font: inherit; }
.continuing-payment-method { min-width: 0; margin: 0; padding: 0; border: 0; }
.continuing-payment-method legend { margin-bottom: 5px; color: var(--navy); font-size: .82rem; font-weight: 700; }
.payment-options-compact .choice-card-card { min-height: 82px; padding: 14px 16px; }
.payment-options-compact .choice-card-bank { min-height: 56px; }
.student-products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.student-products article { display: grid; padding: 22px 18px; background: var(--white); border: 1px solid #d9dee4; }
.student-products article.featured { border: 2px solid var(--gold); }
.student-products p { margin: 0; color: #996619; font-size: .7rem; font-weight: 700; }
.student-products h3 { margin: 18px 0 3px; color: var(--navy); font: 600 1.08rem/1.4 var(--serif); }
.student-products strong { color: var(--navy); font-size: 1.35rem; }
.student-products small { color: #687484; }
.student-products button { min-height: 42px; margin-top: 20px; border: 1px solid var(--navy); background: var(--navy); color: var(--white); font-weight: 700; cursor: pointer; }
.payment-state { margin-top: 12px; color: #5a6675; font-size: .82rem; }
.bank-state { display: flex; gap: 18px; margin-top: 12px; }
.bank-state > span { align-self: flex-start; padding: 4px 8px; background: #fff1c7; color: #795217; font-size: .7rem; font-weight: 700; white-space: nowrap; }
.bank-state strong { color: var(--navy); }
.bank-state p { margin: 5px 0 0; color: #687484; font-size: .78rem; }
.purchase-history { margin-top: 18px; padding: 24px; background: var(--white); border: 1px solid #d9dee4; }
.purchase-history h3 { margin: 0 0 16px; color: var(--navy); font: 600 1.08rem/1.5 var(--serif); }
.purchase-history [data-purchase-history] { display: grid; gap: 10px; }
.purchase-history [data-purchase-history] > p { margin: 0; color: #687484; font-size: .8rem; }
.purchase-history article { display: grid; grid-template-columns: 1fr auto; gap: 5px 16px; align-items: center; padding: 15px 0; border-top: 1px solid var(--line); }
.purchase-history article strong { color: var(--navy); }
.purchase-history article span, .purchase-history article small { color: #687484; font-size: .76rem; }
.purchase-history article button, .receipt-open-link { grid-column: 2; grid-row: 1 / span 2; min-height: 40px; padding: 9px 13px; border: 1px solid var(--navy); background: transparent; color: var(--navy); font-weight: 700; text-decoration: none; cursor: pointer; }
.purchase-history-status { min-height: 1.5em; margin: 14px 0 0; color: #745620; font-size: .78rem; }
.help-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.help-grid > * { display: grid; min-height: 170px; padding: 22px; background: var(--white); border: 1px solid #d9dee4; color: inherit; text-decoration: none; }
.help-grid span { color: #996619; font-size: .7rem; font-weight: 700; }
.help-grid strong { align-self: center; color: var(--navy); font-family: var(--serif); }
.help-grid small { color: #687484; }
.four-entry-tabs button { font-size: .76rem; }
.private-placeholder { margin: 0; color: #687484; }
.account-bookings, .ticket-list, .preference-history { display: grid; gap: 12px; margin: 14px 0 20px; }
.booking-summary-card, .ticket-detail-card, .preference-history article { padding: 20px; background: var(--white); border: 1px solid #d9dee4; }
.booking-summary-card h3, .ticket-detail-card h3, .preference-history h4 { margin: 8px 0; color: var(--navy); font-family: var(--serif); }
.booking-summary-card p, .ticket-detail-card p, .preference-history p { margin: 5px 0; color: #596678; }
.ticket-detail-card dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 15px 0 0; }
.ticket-detail-card dl div { padding: 11px; background: #f7f8fa; }
.ticket-detail-card dt { color: #687484; font-size: .76rem; }
.ticket-detail-card dd { margin: 4px 0 0; color: var(--navy); font-weight: 700; }
.ticket-detail-card.pending { border-color: #d8bd77; background: #fffdf7; }
.payment-reference { margin-top: 22px; }
.payment-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.bank-review-note { padding: 12px; background: #fff7da; }
.bank-details-card { display: grid; gap: 4px; padding: 18px; background: #fffdf7; border: 1px solid #d8bd77; }
.bank-details-card p { margin: 0; color: #38465a; }
.request-links { grid-template-columns: repeat(4, 1fr); margin-bottom: 18px; }
.lesson-request-form { display: grid; gap: 17px; padding: 24px; background: var(--white); border: 1px solid #d9dee4; }
.lesson-request-form h3, .preference-history h3 { margin: 0; color: var(--navy); font: 600 1.2rem/1.5 var(--serif); }
.lesson-request-form > p, .lesson-request-form fieldset p { margin: 0; color: #687484; }
.lesson-request-form label { display: grid; gap: 7px; color: var(--navy); font-weight: 700; }
.lesson-request-form input, .lesson-request-form select, .lesson-request-form textarea { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid #cbd2da; border-radius: 0; background: var(--white); color: #17263a; font: inherit; }
.lesson-request-form fieldset { display: grid; gap: 10px; margin: 0; padding: 16px; border: 1px solid #d9dee4; }
.lesson-request-form legend { padding: 0 6px; color: var(--navy); font-weight: 700; }
.form-choice-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.event-row { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 8px; margin-bottom: 8px; }
.event-row button, .small-action { min-height: 40px; padding: 8px 12px; border: 1px solid var(--navy); background: transparent; color: var(--navy); font-weight: 700; cursor: pointer; }
.booking-actions, .post-booking-links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.small-action { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.small-action.danger { border-color: #9b2c2c; color: #9b2c2c; }
.small-action:disabled { cursor: not-allowed; opacity: .45; }
.legal-consent { display: flex; align-items: flex-start; gap: 10px; padding: 14px; border: 1px solid #cdd3db; background: #fff; color: #37465a; font-size: .86rem; }
.legal-consent input { margin-top: 3px; accent-color: #9a681b; }
.continuing-review { margin-top: 18px; padding: 20px; border: 2px solid var(--gold); background: #fffaf0; }
.continuing-review h3 { margin-top: 0; color: var(--navy); }
.continuing-review dl { display: grid; gap: 8px; }
.continuing-review dl div { display: grid; grid-template-columns: minmax(90px, .35fr) 1fr; gap: 12px; }
.continuing-review dt { font-weight: 700; color: #536074; }
.continuing-review dd { margin: 0; color: var(--ink); }
.weekend-candidates { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.preference-history { padding-top: 24px; }
.preference-history article { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; }
.preference-history article > span { color: #996619; font-size: .72rem; font-weight: 700; }
.preference-history time { color: #687484; font-size: .76rem; }
.preference-history h4, .preference-history article p { grid-column: 1 / -1; }
.student-view button:disabled { opacity: .5; cursor: not-allowed; }
.student-security { margin: 18px 4px 0; color: #667180; font-size: .74rem; text-align: center; }

@media (max-width: 980px) {
  .page-width, .header-inner { width: min(100% - 36px, 760px); }
  .menu-button { display: flex; align-items: center; gap: 10px; padding: 10px 0; }
  .menu-label { font-size: .7rem; font-weight: 700; letter-spacing: .12em; }
  .menu-lines { position: relative; width: 24px; height: 16px; }
  .menu-lines i { position: absolute; left: 0; width: 24px; height: 1px; background: currentColor; transition: transform .2s ease, top .2s ease; }
  .menu-lines i:first-child { top: 4px; } .menu-lines i:last-child { top: 12px; }
  .menu-button[aria-expanded="true"] .menu-lines i:first-child { top: 8px; transform: rotate(45deg); }
  .menu-button[aria-expanded="true"] .menu-lines i:last-child { top: 8px; transform: rotate(-45deg); }
  .site-nav { position: absolute; top: 78px; right: 0; left: 0; display: grid; max-height: 0; overflow: hidden; gap: 0; padding-inline: 18px; background: var(--white); opacity: 0; pointer-events: none; transition: max-height .25s ease, opacity .2s ease; }
  .site-nav[data-open="true"] { max-height: 520px; padding-bottom: 18px; border-bottom: 1px solid var(--line); opacity: 1; pointer-events: auto; }
  .site-nav a { padding: 12px 4px; border-bottom: 1px solid var(--line); }
  .site-nav .nav-cta { margin-top: 12px; padding: 13px 16px; text-align: center; }
  .two-column, .trial-layout, .profile-layout, .setup-layout, .faq-layout { grid-template-columns: 1fr; }
  .profile-highlights, .career-columns-three { grid-template-columns: 1fr; }
  .flow-story-layout { grid-template-columns: 1fr; }
  .flow-comic { width: min(100%, 760px); margin-inline: auto; }
  .flow-story-list { grid-template-columns: 1fr 1fr; }
  .flow-story-list li:nth-child(even) { padding-left: 22px; border-left: 1px solid #d8d2c5; }
  .trial-layout { align-items: start; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-grid article { min-height: 0; }
  .feature-grid article + article { border-top: 1px solid rgba(255,255,255,.24); border-left: 0; }
  .feature-grid h3 { margin-top: 28px; }
  .profile-photo { width: min(210px, 100%); }
  .price-grid { grid-template-columns: 1fr 1fr; }
  .continuing-layout { grid-template-columns: 1fr; }
  .setup-layout, .faq-layout { gap: 48px; }
  .legal-section .section-heading { grid-template-columns: 1fr; }
  .legal-section .section-heading > p:last-child { margin-top: 16px; }
  .legal-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  html { scroll-padding-top: 84px; }
  body { font-size: 16px; }
  .draft-bar { font-size: .68rem; line-height: 1.45; }
  .page-width, .header-inner { width: min(100% - 28px, 560px); }
  .header-inner { min-height: 68px; }
  .brand strong { font-size: .95rem; }
  .brand-mark { width: 42px; height: 42px; }
  .site-nav { top: 68px; }
  .section { padding: 76px 0; }
  .section-heading h2 { font-size: clamp(2rem, 10vw, 3rem); }
  .hero { min-height: 700px; align-items: end; }
  .hero-image { object-position: 38% center; }
  .hero-shade { background: linear-gradient(0deg, rgba(4,15,31,.97) 0%, rgba(5,21,43,.82) 54%, rgba(5,21,43,.16) 100%); }
  .hero-content { max-width: calc(100% - 28px); padding-block: 140px 40px; overflow-wrap: anywhere; }
  .hero h1 { max-width: 100%; font-size: clamp(1.4rem, 6.6vw, 1.8rem); line-height: 1.4; letter-spacing: 0; }
  .hero-lead { max-width: 100%; margin: 24px 0; font-size: .95rem; }
  .hero-actions { min-width: 0; align-items: stretch; flex-direction: column; gap: 13px; }
  .hero-actions .button { width: 100%; max-width: 100%; white-space: normal; }
  .scroll-cue { display: none; }
  .two-column { gap: 40px; }
  .check-list li { align-items: flex-start; gap: 14px; }
  .trial-section .section-heading { margin-bottom: 42px; }
  .trial-layout { gap: 42px; }
  .trial-layout .image-card { width: min(100%, 260px); }
  .timeline > div { padding-left: 72px; }
  .timeline > div:not(:last-child)::before { left: 27px; }
  .timeline span { width: 54px; }
  .feature-grid { margin-top: 42px; }
  .feature-grid article { padding: 34px 6px; }
  .profile-layout { gap: 36px; }
  .profile-photo { width: min(180px, 100%); }
  .profile-photo::before { top: -18px; right: -14px; }
  .career-columns { grid-template-columns: 1fr; }
  .price-grid { grid-template-columns: 1fr; gap: 18px; }
  .price-card { padding: 30px 26px; }
  .price-card .price { font-size: 2.7rem; }
  .in-person { align-items: flex-start; flex-direction: column; padding: 25px; }
  .in-person-price { align-items: flex-start; flex-direction: column; gap: 7px; }
  .conditions-grid, .voice-grid { grid-template-columns: 1fr; }
  .flow-story-list { grid-template-columns: 1fr; }
  .flow-story-list li:nth-child(even) { padding-left: 0; border-left: 0; }
  .continuing-grid { grid-template-columns: 1fr; }
  .continuing-grid article + article { border-top: 1px solid var(--line); border-left: 0; }
  .booking-steps { grid-template-columns: 1fr 1fr; }
  .booking-steps-five { grid-template-columns: 1fr; }
  .app-header-inner { min-height: 68px; }
  .slot-grid, .field-grid, .payment-options, .trial-request-facts, .check-grid, .trial-live-slot-list { grid-template-columns: 1fr; }
  .field-full { grid-column: auto; }
  .trial-calendar-note { grid-template-columns: 1fr; }
  .trial-calendar-note .button[aria-disabled="true"] { width: 100%; min-width: 0; }
  .date-preference { grid-template-columns: 1fr; align-items: stretch; }
  .survey-options { grid-template-columns: 1fr; }
  .purchase-flow { grid-template-columns: 1fr; }
  .form-submit { align-items: stretch; flex-direction: column; }
  .form-submit .button { width: 100%; }
  .status-strip { align-items: flex-start; flex-direction: column; gap: 4px; }
  .signin-card { grid-template-columns: 1fr; }
  .signin-status { grid-column: auto; }
  .student-tabs { grid-template-columns: 1fr 1fr; }
  .summary-grid, .quick-actions, .student-products, .help-grid, .request-links { grid-template-columns: 1fr; }
  .new-purchase-choice, .pending-booking-card dl, .owner-followup-card dl, .owner-readiness-grid, .operator-event-list article { grid-template-columns: 1fr; }
  .form-choice-row, .ticket-detail-card dl, .weekend-candidates, .event-row { grid-template-columns: 1fr; }
  .quick-actions button { min-height: 115px; }
  .student-welcome { align-items: flex-start; }
  .purchase-history article { grid-template-columns: 1fr; }
  .purchase-history article button, .receipt-open-link { grid-column: auto; grid-row: auto; justify-self: start; margin-top: 6px; }
  .review-panel dl div { grid-template-columns: 1fr; gap: 3px; }
  .voice-grid { margin-top: 40px; }
  .booking-inner h2 { font-size: clamp(2.15rem, 11vw, 3.4rem); }
  .booking-inner .button { gap: 14px; font-size: .9rem; }
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .footer-grid > div:first-child { grid-column: auto; }
  .footer-bottom { align-items: flex-start; flex-direction: column; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

.owner-connect { max-width: 780px; }
.owner-connect-actions { display: grid; gap: 20px; margin: 30px 0; }
.owner-connect-card { padding: 26px; border: 1px solid var(--line); border-radius: 16px; background: var(--white); }
.owner-connect-card h2 { margin-top: 0; color: var(--navy); }
.owner-connect-card .button { margin-top: 8px; }
.owner-connect-result { min-height: 1.5em; margin: 14px 0 0; color: #536074; }
.owner-connect-buttons { display: flex; flex-wrap: wrap; gap: 12px; }