:root {
  --ink: #10231f;
  --muted: #5d706b;
  --line: #dbe5e1;
  --soft: #f2f7f5;
  --teal: #08766e;
  --deep-teal: #0e4e4a;
  --navy: #0b3b62;
  --amber: #c47a16;
  --white: #ffffff;
  --shadow: 0 18px 45px rgba(30, 55, 50, 0.1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: #fff;
  font-family: "Manrope", Arial, sans-serif;
}
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.page-loader {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; align-content: center; gap: 16px;
  color: var(--navy); background: #fff; transition: opacity .45s ease, visibility .45s ease;
}
.page-loader.hide { opacity: 0; visibility: hidden; }
.page-loader img { width: 190px; height: 150px; object-fit: contain; animation: loaderPulse 1.2s ease-in-out infinite; }
.page-loader span { color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; }
@keyframes loaderPulse { 0%, 100% { transform: scale(.94); opacity: .72; } 50% { transform: scale(1.04); opacity: 1; } }

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
  min-height: 72px;
  padding: 0 6vw;
  border-bottom: 1px solid rgba(219, 229, 225, .82);
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(18px);
}
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand span:last-child { display: grid; line-height: 1; }
.brand strong { font-family: "Space Grotesk", sans-serif; font-size: 17px; }
.brand small { margin-top: 4px; color: var(--teal); font-size: 10px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; }
.brand-mark {
  display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: 8px; color: #fff; background: linear-gradient(135deg, var(--teal), var(--navy));
  font-family: "Space Grotesk", sans-serif; font-size: 14px; font-weight: 700;
}
.brand-logo { width: 54px; height: 44px; object-fit: contain; border-radius: 6px; background: #fff; }
.site-nav { display: flex; justify-content: flex-end; gap: 24px; }
.site-nav a { color: #49625d; font-size: 13px; font-weight: 800; }
.site-nav a:hover { color: var(--teal); }
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 16px; border: 1px solid var(--teal); border-radius: 7px;
  color: #fff; background: var(--teal); cursor: pointer; font-weight: 800;
  transition: .2s ease;
}
.button:hover { transform: translateY(-2px); background: var(--deep-teal); box-shadow: 0 12px 28px rgba(8, 118, 110, .22); }
.button svg { width: 18px; height: 18px; }
.button.ghost { border-color: rgba(255, 255, 255, .55); color: #fff; background: rgba(255, 255, 255, .12); }
.button.dark { border-color: var(--ink); background: var(--ink); }
.secondary-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 0 13px;
  border: 1px solid var(--line); border-radius: 7px; color: var(--navy); background: #fff; cursor: pointer; font-weight: 800;
}
.secondary-button svg { width: 17px; height: 17px; }
.header-actions { display: flex; gap: 8px; }
.menu-toggle { display: none; }

.hero {
  position: relative;
  display: grid;
  align-items: center;
  min-height: min(720px, calc(100vh - 72px));
  overflow: hidden;
}
.hero-image, .hero-overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-image { object-fit: cover; object-position: center; }
.hero-overlay { background: linear-gradient(90deg, rgba(6, 36, 43, .95) 0%, rgba(6, 42, 48, .88) 34%, rgba(7, 49, 58, .5) 62%, rgba(6, 32, 42, .18) 100%); }
.hero-content { position: relative; z-index: 1; width: min(680px, 88vw); margin-left: 6vw; padding: 72px 0 94px; color: #fff; }
.eyebrow { margin: 0 0 10px; color: #67d5c9; font-size: 11px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; }
h1, h2, h3 { margin: 0; font-family: "Space Grotesk", sans-serif; letter-spacing: 0; }
h1 { max-width: 620px; font-size: clamp(52px, 7vw, 88px); line-height: .96; }
.hero-copy { max-width: 630px; margin: 22px 0 0; color: rgba(255, 255, 255, .87); font-size: 18px; line-height: 1.65; }
.hero-actions, .hero-proof { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-actions { margin-top: 28px; }
.hero-proof { margin-top: 38px; gap: 18px; }
.hero-proof span { display: inline-flex; align-items: center; gap: 7px; color: rgba(255, 255, 255, .8); font-size: 12px; font-weight: 800; }
.hero-proof svg { width: 17px; height: 17px; color: #7ee5d5; }

.quick-strip {
  position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr);
  width: min(1160px, 88vw); margin: -44px auto 0; padding: 18px;
  border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: var(--shadow);
}
.quick-strip div { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 14px; border-right: 1px solid var(--line); }
.quick-strip div:last-child { border: 0; }
.quick-strip svg { width: 24px; color: var(--teal); }
.quick-strip span { display: grid; gap: 3px; color: var(--muted); font-size: 11px; }
.quick-strip strong { color: var(--ink); font-size: 14px; }

.section { padding: 100px 6vw; }
.section-heading { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, .7fr); gap: 40px; align-items: end; max-width: 1180px; margin: auto; }
.section-heading.compact { grid-template-columns: 1fr; }
h2 { font-size: clamp(34px, 5vw, 56px); line-height: 1.06; }
.section-heading > p, .results-copy > p, .booking-copy > p { margin: 0; color: var(--muted); line-height: 1.75; }

.solution-tabs { display: flex; flex-wrap: wrap; gap: 10px; max-width: 1180px; margin: 38px auto 16px; }
.tab-button {
  display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 7px; color: #49625d; background: #fff; cursor: pointer; font-weight: 800;
}
.tab-button svg { width: 17px; }
.tab-button.active { color: #fff; border-color: var(--teal); background: var(--teal); }
.solution-panel {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 38px; max-width: 1180px; margin: auto; padding: 30px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--soft);
}
.solution-icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 18px; border-radius: 8px; color: #fff; background: var(--navy); }
.solution-icon svg { width: 28px; }
.solution-panel h3 { font-size: 30px; }
.solution-panel p:not(.eyebrow) { color: var(--muted); line-height: 1.7; }
.text-link { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; color: var(--teal); background: transparent; cursor: pointer; font-weight: 800; }
.text-link svg { width: 17px; }
.feature-list { display: grid; gap: 13px; align-content: center; margin: 0; padding: 0; list-style: none; }
.feature-list li { display: flex; gap: 9px; color: #435b55; font-weight: 700; }
.feature-list svg { flex: 0 0 auto; width: 18px; color: var(--teal); }
.service-grid, .testimonial-grid, .process-grid { display: grid; gap: 14px; max-width: 1180px; margin: 18px auto 0; }
.service-grid { grid-template-columns: repeat(4, 1fr); }
.service-card, .process-grid article, .testimonial-grid article { border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.service-card { padding: 20px; }
.service-card svg { width: 26px; color: var(--teal); }
.service-card h3 { margin-top: 18px; font-size: 18px; }
.service-card p { color: var(--muted); font-size: 13px; line-height: 1.65; }

.results { display: grid; grid-template-columns: .9fr 1.1fr; gap: 54px; color: #fff; background: var(--navy); }
.results-copy { align-self: center; }
.results-copy .eyebrow { color: #8cddd6; }
.results-copy > p { margin: 20px 0 24px; color: rgba(255, 255, 255, .76); }
.results-grid { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid rgba(255,255,255,.2); border-left: 1px solid rgba(255,255,255,.2); }
.results-grid article { min-height: 170px; padding: 22px; border-right: 1px solid rgba(255,255,255,.2); border-bottom: 1px solid rgba(255,255,255,.2); }
.results-grid strong, .results-grid span { display: block; }
.results-grid strong { color: #7ee5d5; font-family: "Space Grotesk"; font-size: 32px; }
.results-grid span { margin-top: 26px; color: rgba(255,255,255,.8); font-weight: 700; line-height: 1.5; }
.vision { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; padding-top: 0; padding-bottom: 0; background: var(--line); }
.vision > div { padding: 70px 6vw; background: #fff; }
.vision h2 { max-width: 570px; font-size: 38px; }
.vision p:last-child { max-width: 620px; margin: 16px 0 0; color: var(--muted); line-height: 1.75; }

.process { background: var(--soft); }
.process-grid { grid-template-columns: repeat(4, 1fr); margin-top: 32px; }
.process-grid article { position: relative; padding: 22px; }
.process-grid span { position: absolute; top: 18px; right: 18px; color: #c3d3ce; font-family: "Space Grotesk"; font-size: 20px; }
.process-grid svg { width: 26px; color: var(--teal); }
.process-grid h3 { margin-top: 22px; font-size: 19px; }
.process-grid p { color: var(--muted); font-size: 13px; line-height: 1.7; }

.testimonial-grid { grid-template-columns: repeat(3, 1fr); margin-top: 32px; }
.sample-note { max-width: 620px; margin: 12px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.testimonial-grid article { padding: 22px; }
.stars { color: var(--amber); letter-spacing: 2px; }
blockquote { margin: 20px 0 24px; color: #3f5550; font-size: 15px; line-height: 1.8; }
.testimonial-grid footer { display: flex; align-items: center; gap: 10px; }
.testimonial-grid footer > span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: #fff; background: var(--teal); font-size: 12px; font-weight: 800; }
.testimonial-grid footer div { display: grid; gap: 3px; }
.testimonial-grid small { color: var(--muted); }

.book-call { display: grid; grid-template-columns: .9fr 1.1fr; gap: 54px; background: #eff7f5; }
.booking-copy > p:not(.eyebrow) { margin-top: 18px; }
.contact-links { display: grid; gap: 9px; margin-top: 24px; }
.contact-links a { display: flex; gap: 12px; align-items: center; width: fit-content; color: var(--ink); font-weight: 800; }
.contact-links svg { width: 20px; color: var(--teal); }
.contact-links span { display: grid; gap: 2px; }
.contact-links small { color: var(--muted); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; }
.booking-form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; padding: 24px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: var(--shadow); }
.booking-form div { display: grid; gap: 6px; }
.booking-form .full { grid-column: 1 / -1; }
label { color: #49625d; font-size: 12px; font-weight: 800; }
input, select, textarea { width: 100%; border: 1px solid #ccd9d5; border-radius: 6px; padding: 11px 12px; color: var(--ink); background: #fbfdfc; outline: 0; }
input:focus, select:focus, textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(8, 118, 110, .12); }
.form-note { align-self: center; margin: 0; color: var(--muted); font-size: 11px; }

.site-footer { padding: 46px 6vw 18px; color: #d2e1dd; background: #0c2927; }
.footer-grid { display: grid; grid-template-columns: 1.2fr .7fr 1fr 1fr; gap: 38px; max-width: 1320px; margin: auto; }
.site-footer h3 { margin-bottom: 15px; color: #fff; font-size: 13px; }
.site-footer p { max-width: 330px; margin: 15px 0; color: #a8c1bb; font-size: 13px; line-height: 1.7; }
.footer-about .brand { width: fit-content; color: #fff; }
.footer-demo-link { display: inline-flex; gap: 8px; align-items: center; color: #9ed5cc; font-size: 12px; font-weight: 800; }
.footer-demo-link svg, .footer-links svg { flex: 0 0 auto; width: 16px; }
.footer-links { display: grid; gap: 11px; color: #b9ceca; font-size: 12px; }
.footer-links a, .footer-links span { display: flex; gap: 8px; align-items: flex-start; line-height: 1.55; }
.footer-links a:hover, .footer-demo-link:hover { color: #fff; }
.footer-partners { display: grid; gap: 9px; }
.footer-partners a { display: grid; gap: 3px; padding: 11px; border: 1px solid rgba(255,255,255,.12); border-radius: 6px; background: rgba(255,255,255,.04); }
.footer-partners a:hover { border-color: rgba(158,213,204,.55); background: rgba(255,255,255,.08); }
.footer-partners strong { color: #fff; font-size: 12px; }
.footer-partners small { color: #8fb2ab; font-size: 10px; }
.footer-bottom { display: flex; justify-content: space-between; gap: 16px; max-width: 1320px; margin: 34px auto 0; padding-top: 15px; border-top: 1px solid rgba(255,255,255,.11); color: #76958f; font-size: 11px; }
.footer-bottom a { color: #9ed5cc; font-weight: 800; }
.footer-bottom a:hover { color: #fff; text-decoration: underline; }

.account-dialog { width: min(900px, calc(100vw - 24px)); max-width: none; max-height: calc(100vh - 24px); padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 30px 90px rgba(6, 31, 35, .28); }
.account-dialog::backdrop { background: rgba(4, 24, 30, .58); backdrop-filter: blur(3px); }
.account-close { position: absolute; top: 12px; right: 12px; z-index: 3; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 6px; color: var(--navy); background: #fff; cursor: pointer; }
.account-close svg { width: 17px; }
.account-auth { display: grid; grid-template-columns: .9fr 1.1fr; min-height: 590px; }
.account-intro { padding: 42px; color: #fff; background: linear-gradient(145deg, #0b3b62, #08766e); }
.account-intro img { width: 150px; height: 108px; margin-bottom: 28px; border-radius: 7px; object-fit: contain; background: #fff; }
.account-intro .eyebrow { color: #a5eee5; }
.account-intro h2 { font-size: 38px; }
.account-intro p:last-child { color: rgba(255,255,255,.8); font-size: 13px; line-height: 1.75; }
.account-form-area { padding: 54px 40px 34px; overflow-y: auto; }
.account-tabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; margin-bottom: 20px; }
.account-tabs button { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); background: #fff; cursor: pointer; font-size: 12px; font-weight: 800; }
.account-tabs button.active { border-color: var(--teal); color: var(--teal); background: #eff9f7; }
.account-tabs svg { width: 17px; }
.account-form { display: grid; gap: 13px; }
.account-form div { display: grid; gap: 6px; }
.account-form .button { margin-top: 4px; justify-content: center; }
.account-note, .account-feedback { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.account-feedback { min-height: 18px; margin-top: 11px; color: var(--teal); font-weight: 800; }
.admin-inbox { min-height: 590px; max-height: calc(100vh - 24px); overflow-y: auto; background: #f5f8f7; }
.admin-inbox > header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 54px 18px 24px; border-bottom: 1px solid var(--line); background: #fff; }
.admin-inbox h2 { font-size: 28px; }
.admin-inbox header p:last-child { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.admin-inbox-list { display: grid; gap: 10px; padding: 16px; }
.inbox-empty { padding: 32px; border: 1px dashed #b8cac5; border-radius: 7px; color: var(--muted); background: #fff; text-align: center; }
.inbox-item { padding: 15px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.inbox-item header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.inbox-item h3 { font-size: 14px; }
.inbox-item time { color: var(--muted); font-size: 10px; }
.inbox-details { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.inbox-details div { padding: 8px; border-radius: 5px; background: #f5f8f7; }
.inbox-details span, .inbox-details strong { display: block; }
.inbox-details span { color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.inbox-details strong { margin-top: 4px; overflow-wrap: anywhere; color: #37514b; font-size: 11px; }

.chat-launcher {
  position: fixed; right: 22px; bottom: 22px; z-index: 40; display: grid; place-items: center;
  width: 54px; height: 54px; border: 0; border-radius: 50%; color: #fff; background: var(--teal);
  box-shadow: 0 16px 34px rgba(8, 118, 110, .3); cursor: pointer; transition: .2s ease;
}
.chat-launcher:hover { transform: translateY(-3px); background: var(--deep-teal); }
.chat-launcher svg { width: 25px; height: 25px; }
.chat-box {
  position: fixed; right: 22px; bottom: 88px; z-index: 39; display: none; width: min(360px, calc(100vw - 32px));
  overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 24px 64px rgba(20, 45, 43, .22);
}
.chat-box.open { display: block; animation: chatEnter .22s ease; }
@keyframes chatEnter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.chat-box header { display: flex; align-items: center; justify-content: space-between; padding: 11px 12px; color: #fff; background: var(--navy); }
.chat-box header div { display: flex; align-items: center; gap: 9px; }
.chat-box header img { width: 42px; height: 36px; object-fit: contain; border-radius: 5px; background: #fff; }
.chat-box header span { display: grid; gap: 3px; }
.chat-box header small { color: #a8d6d1; font-size: 10px; }
.chat-box header button { display: grid; place-items: center; width: 32px; height: 32px; border: 0; color: #fff; background: transparent; cursor: pointer; }
.chat-box header svg { width: 18px; }
.chat-messages { display: grid; gap: 8px; max-height: 330px; min-height: 245px; padding: 13px; overflow-y: auto; background: #f7faf9; }
.chat-message { max-width: 86%; padding: 9px 10px; border-radius: 7px; font-size: 13px; line-height: 1.45; }
.chat-message.bot { justify-self: start; border: 1px solid var(--line); color: #49625d; background: #fff; }
.chat-message.user { justify-self: end; color: #fff; background: var(--teal); }
.chat-form { display: grid; grid-template-columns: 1fr 42px; gap: 7px; padding: 10px; border-top: 1px solid var(--line); background: #fff; }
.chat-form input { min-width: 0; padding: 9px 10px; }
.chat-form button { display: grid; place-items: center; border: 0; border-radius: 6px; color: #fff; background: var(--teal); cursor: pointer; }
.chat-form svg { width: 17px; }

.hidden { display: none !important; }
.demo-dialog {
  --demo-accent: #08766e; --demo-accent-soft: rgba(126,229,213,.17); --demo-sidebar: #0d2c2b; --demo-sidebar-text: #bad4cf;
  width: min(1220px, calc(100vw - 24px)); max-width: none; height: min(850px, calc(100vh - 24px)); max-height: none;
  padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 30px 90px rgba(6, 31, 35, .28);
}
.demo-dialog::backdrop { background: rgba(4, 24, 30, .58); backdrop-filter: blur(3px); }
.demo-close { position: absolute; top: 12px; right: 12px; z-index: 5; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 7px; color: var(--navy); background: #fff; cursor: pointer; }
.demo-close svg { width: 18px; }
.demo-onboarding { display: grid; grid-template-columns: .82fr 1.18fr; min-height: 100%; }
.demo-intro { padding: 50px; color: #fff; background: linear-gradient(145deg, #0b3b62, #08766e); }
.demo-intro img { width: 190px; height: 140px; margin-bottom: 34px; object-fit: contain; border-radius: 8px; background: #fff; }
.demo-intro .eyebrow { color: #a5eee5; }
.demo-intro h2 { font-size: 52px; }
.demo-intro p:last-child { color: rgba(255,255,255,.8); line-height: 1.75; }
.demo-booking-form { align-content: center; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; padding: 52px; overflow-y: auto; }
.demo-booking-form > div, .common-demo-fields > div, .school-demo-fields > div { display: grid; gap: 6px; }
.demo-booking-form .full, .demo-form-note, .demo-booking-form > button { grid-column: 1 / -1; }
.common-demo-fields, .school-demo-fields { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.optional-demo-fields { padding: 10px; border: 1px solid var(--line); border-radius: 6px; background: #f8fbfa; }
.optional-demo-fields summary { cursor: pointer; color: var(--teal); font-size: 11px; font-weight: 800; }
.optional-demo-fields summary span { color: var(--muted); font-size: 9px; text-transform: uppercase; }
.optional-demo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding-top: 13px; }
.optional-demo-grid > div { display: grid; gap: 6px; }
.optional-demo-grid .full { grid-column: 1 / -1; }
.demo-form-note { margin: 0; color: var(--muted); font-size: 12px; }
.school-demo { display: grid; grid-template-columns: 230px 1fr; height: 100%; background: #f5f8f7; }
.school-demo-sidebar { overflow-y: auto; color: #d7e9e5; background: var(--demo-sidebar); transition: background .2s ease; }
.school-demo-brand { display: flex; gap: 9px; align-items: center; padding: 14px; border-bottom: 1px solid rgba(255,255,255,.1); }
.school-demo-brand img { width: 46px; height: 38px; object-fit: contain; border-radius: 5px; background: #fff; }
.school-demo-brand span { display: grid; gap: 3px; }
.school-demo-brand strong { font-size: 12px; }
.school-demo-brand small { color: #8bb7b1; font-size: 10px; }
.school-demo-sidebar nav { display: grid; padding: 10px; }
.school-demo-sidebar nav button { display: flex; align-items: center; gap: 8px; min-height: 37px; padding: 0 9px; border: 0; border-radius: 5px; color: var(--demo-sidebar-text); background: transparent; cursor: pointer; font-size: 11px; font-weight: 700; text-align: left; }
.school-demo-sidebar nav button:hover, .school-demo-sidebar nav button.active { color: #fff; background: var(--demo-accent-soft); }
.school-demo-sidebar nav svg { width: 15px; }
.school-demo-main { min-width: 0; overflow-y: auto; }
.school-demo-main > header { display: flex; justify-content: space-between; gap: 18px; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--line); background: #fff; }
.school-demo-main h2 { font-size: 27px; }
.school-demo-actions { display: flex; gap: 8px; }
.school-demo-content { padding: 18px; }
.demo-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.demo-metric, .demo-panel, .demo-document { border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.demo-metric { padding: 14px; }
.demo-metric span, .demo-metric strong { display: block; }
.demo-metric span { color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.demo-metric strong { margin-top: 7px; color: var(--navy); font-size: 22px; }
.demo-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 14px; }
.demo-panel { overflow: hidden; }
.demo-panel h3 { padding: 13px 14px; border-bottom: 1px solid var(--line); font-size: 15px; }
.demo-table { width: 100%; border-collapse: collapse; color: #48615b; font-size: 11px; }
.demo-table th, .demo-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.demo-table th { color: #72847f; background: #f5f8f7; font-size: 9px; text-transform: uppercase; }
.demo-list { display: grid; gap: 8px; padding: 12px; }
.demo-list div { display: flex; justify-content: space-between; gap: 10px; padding: 9px; border: 1px solid var(--line); border-radius: 5px; color: #4b625d; font-size: 11px; }
.organization-profile { display: grid; gap: 7px; padding: 12px; }
.organization-profile div { display: grid; grid-template-columns: 108px 1fr; gap: 9px; color: #4b625d; font-size: 11px; line-height: 1.5; }
.organization-profile span { color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.demo-status { display: inline-flex; padding: 3px 7px; border-radius: 999px; color: #08766e; background: #e8f8f4; font-size: 10px; font-weight: 800; }
.demo-status.warn { color: #9a5a08; background: #fff3df; }
.demo-dialog.theme-blue { --demo-accent: #1d5faa; --demo-accent-soft: rgba(93,166,240,.2); --demo-sidebar: #102e54; --demo-sidebar-text: #bdd8f5; }
.demo-dialog.theme-green { --demo-accent: #28734f; --demo-accent-soft: rgba(111,201,147,.2); --demo-sidebar: #183b2b; --demo-sidebar-text: #c3e6d0; }
.demo-dialog.theme-maroon { --demo-accent: #8c3850; --demo-accent-soft: rgba(225,132,155,.2); --demo-sidebar: #482131; --demo-sidebar-text: #f0c7d1; }
.demo-dialog.light-sidebar { --demo-sidebar: #fff; --demo-sidebar-text: #49625d; }
.demo-dialog.light-sidebar .school-demo-sidebar { border-right: 1px solid var(--line); color: var(--ink); }
.demo-dialog.light-sidebar .school-demo-brand { border-bottom-color: var(--line); }
.demo-dialog.light-sidebar .school-demo-brand small { color: var(--muted); }
.demo-dialog.light-sidebar .school-demo-sidebar nav button:hover, .demo-dialog.light-sidebar .school-demo-sidebar nav button.active { color: var(--demo-accent); }
.demo-dialog.compact-view .school-demo-sidebar nav button { min-height: 31px; }
.demo-dialog.compact-view .school-demo-content { padding: 12px; }
.demo-dialog.compact-view .demo-metric { padding: 10px; }
.demo-dialog.compact-view .demo-table th, .demo-dialog.compact-view .demo-table td { padding: 6px 8px; }
.demo-design-panel { position: absolute; top: 70px; right: 14px; z-index: 6; width: min(330px, calc(100% - 28px)); max-height: calc(100% - 84px); padding: 15px; overflow-y: auto; border: 1px solid var(--line); border-radius: 7px; background: #fff; box-shadow: 0 16px 38px rgba(6, 31, 35, .18); }
.demo-design-panel header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.demo-design-panel h3 { font-size: 17px; }
.demo-design-panel header button { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 5px; color: var(--navy); background: #fff; cursor: pointer; }
.demo-design-panel svg { width: 15px; }
.design-control { display: grid; gap: 9px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.design-control > span, .design-switch strong { color: var(--ink); font-size: 11px; font-weight: 800; }
.design-control label { font-size: 10px; }
.design-control input, .design-control select, .design-control textarea { padding: 8px 9px; font-size: 11px; }
.design-hint { color: var(--muted); font-size: 10px; line-height: 1.5; }
.design-swatches { display: flex; gap: 8px; }
.design-swatches button { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 5px; background: #fff; cursor: pointer; }
.design-swatches button.active { border-color: var(--demo-accent); box-shadow: 0 0 0 2px var(--demo-accent-soft); }
.swatch { width: 20px; height: 20px; border-radius: 4px; }
.swatch.teal { background: #08766e; } .swatch.blue { background: #1d5faa; } .swatch.green { background: #28734f; } .swatch.maroon { background: #8c3850; }
.design-logo-upload { display: grid; grid-template-columns: 62px 1fr; gap: 10px; align-items: center; }
.design-logo-upload img { width: 62px; height: 52px; padding: 3px; border: 1px solid var(--line); border-radius: 5px; object-fit: contain; background: #fff; }
.design-logo-upload div { display: grid; gap: 6px; }
.design-logo-upload label { min-height: 34px; padding: 0 9px; cursor: pointer; font-size: 11px; }
.design-logo-upload button { width: fit-content; padding: 0; border: 0; color: var(--teal); background: transparent; cursor: pointer; font-size: 10px; font-weight: 800; }
.design-switch { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.design-switch span { display: grid; gap: 3px; }
.design-switch small { color: var(--muted); font-size: 10px; }
.design-switch input { width: 17px; height: 17px; accent-color: var(--demo-accent); }
.design-reset { width: 100%; margin-top: 14px; justify-content: center; }
.design-send { width: 100%; margin-top: 14px; justify-content: center; }
.design-confirmation { margin: 10px 0 0; color: var(--teal); font-size: 11px; font-weight: 800; line-height: 1.55; }
.demo-document { max-width: 760px; margin: auto; padding: 28px; }
.demo-doc-head { display: grid; grid-template-columns: 1fr auto; gap: 16px; padding-bottom: 16px; border-bottom: 2px solid var(--navy); }
.demo-doc-head h3 { color: var(--navy); font-size: 24px; }
.demo-doc-assets { display: flex; gap: 10px; align-items: flex-start; }
.demo-doc-brand-logo { width: 94px; height: 60px; object-fit: contain; }
.demo-photo { width: 88px; height: 106px; object-fit: cover; border: 1px solid var(--line); }
.demo-doc-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 16px; }
.demo-doc-meta div { padding: 9px; border: 1px solid var(--line); }
.demo-doc-meta span, .demo-doc-meta strong { display: block; }
.demo-doc-meta span { color: var(--muted); font-size: 9px; text-transform: uppercase; }
.demo-doc-meta strong { margin-top: 5px; font-size: 12px; }
.demo-document .demo-table { margin-top: 16px; border: 1px solid var(--line); }
.demo-certificate-copy { margin: 26px 0 0; color: #49625d; font-size: 14px; line-height: 1.9; }
.demo-signature { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; margin-top: 46px; }
.demo-signature span { padding-top: 8px; border-top: 1px solid #9baea9; color: var(--muted); font-size: 10px; text-align: center; }
.formal-receipt { max-width: 790px; padding: 18px; color: #24352f; border: 1px solid #aab9b5; border-radius: 0; font-family: Arial, sans-serif; }
.formal-receipt.receipt-modern { border-radius: 7px; border-color: var(--demo-accent); }
.receipt-head { display: grid; grid-template-columns: 82px 1fr 82px; gap: 12px; align-items: center; padding-bottom: 12px; text-align: center; }
.receipt-head img { width: 76px; height: 62px; object-fit: contain; }
.receipt-head h3 { color: #1e3430; font-family: "Space Grotesk"; font-size: 22px; }
.receipt-head p { margin: 3px 0 0; color: #52645f; font-size: 10px; }
.receipt-type, .receipt-section-title { padding: 5px 8px; color: #fff; background: var(--demo-accent); font-size: 11px; font-weight: 800; text-align: center; text-transform: uppercase; }
.receipt-meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 18px; padding: 9px 7px; border: 1px solid #c2cecb; border-top: 0; }
.receipt-meta div { display: grid; grid-template-columns: 92px 1fr; gap: 5px; padding: 3px; font-size: 11px; }
.receipt-meta span { font-weight: 800; }
.formal-receipt .demo-table { margin: 0; border: 1px solid #c2cecb; border-top: 0; }
.formal-receipt .demo-table th { color: #263c36; background: #e6ecea; }
.receipt-spacer { min-height: 56px; border-right: 1px solid #c2cecb; border-left: 1px solid #c2cecb; }
.receipt-total { display: flex; justify-content: space-between; gap: 12px; padding: 8px; border: 1px solid #c2cecb; color: #1d3530; font-size: 12px; }
.receipt-footer { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: end; padding: 12px 8px 2px; color: #52645f; font-size: 10px; line-height: 1.55; }
.receipt-qr { display: grid; place-items: center; width: 58px; height: 58px; border: 1px solid #aebdb9; color: #27413b; background: repeating-linear-gradient(45deg, #27413b 0 3px, #fff 3px 6px); font-size: 8px; font-weight: 800; }
.whatsapp-payment-panel, .document-share-panel { display: grid; grid-template-columns: 1fr 220px auto; gap: 10px; align-items: end; max-width: 790px; margin: 12px auto 0; padding: 14px; border: 1px solid #bcded7; border-radius: 7px; background: #f2fbf8; }
.whatsapp-payment-panel div, .document-share-panel div { grid-column: 1 / -1; }
.whatsapp-payment-panel h3, .document-share-panel h3 { display: flex; gap: 7px; align-items: center; color: var(--deep-teal); font-size: 14px; }
.whatsapp-payment-panel h3 svg, .document-share-panel h3 svg { width: 17px; }
.whatsapp-payment-panel p, .document-share-panel p { margin: 5px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.whatsapp-payment-panel label, .document-share-panel label { align-self: center; }
.admit-card { max-width: 920px; padding: 10px; border: 2px solid #7c8986; border-radius: 0; font-family: Arial, sans-serif; }
.admit-card.receipt-modern { border-radius: 7px; border-color: var(--demo-accent); }
.admit-card-head { display: grid; grid-template-columns: 108px 1fr 108px; gap: 10px; align-items: center; min-height: 94px; text-align: center; }
.admit-card-head img { width: 100px; height: 82px; object-fit: contain; }
.admit-card-head h3 { color: #061277; font-family: "Space Grotesk"; font-size: 38px; }
.admit-card-head p { margin: 3px 0 0; color: #24352f; font-size: 11px; font-weight: 800; }
.admit-card-title { padding: 5px; color: #fff; background: #060606; font-size: 15px; font-weight: 800; text-align: center; text-transform: uppercase; }
.admit-card-layout { display: grid; grid-template-columns: .98fr 1.02fr; gap: 8px; padding: 10px 10px 6px; }
.admit-card-student { align-self: stretch; }
.admit-card-identity { display: grid; grid-template-columns: 100px 1fr; gap: 9px; }
.admit-card-identity h4 { color: #132b91; font-size: 18px; }
.admit-card-identity p { margin: 2px 0; color: #172b72; font-size: 13px; font-weight: 700; }
.admit-card-photo { display: grid; place-items: center; width: 98px; height: 124px; border: 2px solid #324bc1; object-fit: cover; color: var(--muted); font-size: 10px; line-height: 1.5; text-align: center; }
.admit-card-id-row { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; color: #1b2e72; font-size: 14px; }
.admit-card-timing { margin-top: 6px; padding: 4px; border: 1px solid #3b4744; color: #2c3a37; background: #f7ffd2; font-size: 12px; font-weight: 800; text-align: center; }
.admit-card-schedule .demo-table { margin: 0; border: 1px solid #74827e; font-size: 11px; }
.admit-card-schedule .demo-table th, .admit-card-schedule .demo-table td { padding: 4px 6px; text-align: center; }
.admit-card-schedule .demo-table th { color: #1d3630; background: #a4f0c5; font-size: 10px; }
.admit-card-schedule .demo-table tbody tr:nth-child(odd) { background: #f4ff9e; }
.admit-card-schedule .demo-table tbody tr:nth-child(even) { background: #aaf3ca; }
.admit-card-signatures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 35px; }
.admit-card-signatures span { padding-top: 7px; border-top: 1px solid #94a29e; color: #334844; font-size: 10px; text-align: center; }
.student-manager { display: grid; gap: 12px; }
.student-manager-form { display: grid; grid-template-columns: 1fr 160px 120px auto; gap: 10px; align-items: end; padding: 13px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.student-manager-form div { display: grid; gap: 5px; }
.student-manager-form input { padding: 8px 9px; }
.table-icon-button { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 5px; color: var(--teal); background: #fff; cursor: pointer; }
.table-icon-button:hover { background: #eff9f7; }
.table-icon-button svg { width: 14px; }
.academic-document { max-width: 850px; padding: 12px; border: 2px solid #687773; border-radius: 0; color: #263934; font-family: Arial, sans-serif; }
.academic-head { display: grid; grid-template-columns: 76px 1fr 76px; gap: 10px; align-items: center; text-align: center; }
.academic-head img { width: 70px; height: 60px; object-fit: contain; }
.academic-head h3 { color: #1e3430; font-size: 20px; }
.academic-head p { margin: 2px 0 0; color: #4e625d; font-size: 9px; }
.academic-title { margin: 8px 0; padding: 5px; border-top: 1px solid #687773; border-bottom: 1px solid #687773; background: #eef3f1; font-size: 12px; font-weight: 800; text-align: center; text-transform: uppercase; }
.academic-profile { display: grid; grid-template-columns: 1fr 1fr 78px; gap: 10px; padding: 7px; border: 1px solid #aab9b5; }
.academic-profile > div:not(.academic-photo) { display: grid; gap: 3px; }
.academic-profile div div, .certificate-grid div, .academic-summary div { display: grid; grid-template-columns: 105px 1fr; gap: 5px; font-size: 10px; }
.academic-profile span, .certificate-grid span, .academic-summary span { font-weight: 800; }
.academic-profile img, .academic-photo { display: grid; place-items: center; width: 74px; height: 88px; border: 1px solid #8b9a96; object-fit: cover; color: var(--muted); font-size: 9px; text-align: center; }
.academic-document .demo-table { margin: 8px 0 0; border: 1px solid #879692; font-size: 10px; }
.academic-document .demo-table th, .academic-document .demo-table td { padding: 5px 6px; border-color: #b6c2bf; }
.academic-document .demo-table th { color: #263934; background: #e8edeb; }
.academic-summary, .certificate-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px 12px; padding: 8px; border: 1px solid #aab9b5; border-top: 0; }
.academic-remark { padding: 8px; border: 1px solid #aab9b5; border-top: 0; font-size: 10px; }
.academic-signatures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 42px; }
.academic-signatures span { padding-top: 6px; border-top: 1px solid #94a29e; color: #435752; font-size: 9px; text-align: center; }
.certificate-document { padding: 22px; }
.certificate-document > p { margin: 24px 6px; color: #405752; font-size: 13px; line-height: 1.9; text-align: center; }
.certificate-number { color: var(--muted) !important; font-size: 10px !important; text-align: right !important; }
.achievement-certificate { border: 4px double var(--demo-accent); }
.achievement-certificate .certificate-lead { margin-bottom: 8px; font-size: 14px; }
.achievement-certificate h4 { color: var(--demo-accent); font-family: "Space Grotesk"; font-size: 30px; text-align: center; }

@media (max-width: 900px) {
  .site-header { grid-template-columns: auto auto 1fr; }
  .menu-toggle { display: grid; place-items: center; width: 40px; height: 40px; margin-left: auto; border: 1px solid var(--line); border-radius: 7px; color: var(--teal); background: #fff; }
  .site-nav { position: absolute; top: 72px; left: 0; right: 0; display: none; padding: 14px 6vw; border-bottom: 1px solid var(--line); background: #fff; }
  .site-nav.open { display: grid; }
  .header-actions { justify-self: end; }
  .quick-strip, .service-grid, .process-grid { grid-template-columns: repeat(2, 1fr); }
  .quick-strip div:nth-child(2) { border-right: 0; }
  .solution-panel, .results, .book-call, .vision { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .account-auth { grid-template-columns: 1fr; }
  .account-intro { padding: 28px; }
  .account-intro img { width: 112px; height: 76px; margin-bottom: 14px; }
  .account-intro h2 { font-size: 30px; }
  .account-form-area { padding: 28px; }
  .demo-onboarding { grid-template-columns: 1fr; }
  .demo-intro { padding: 28px; }
  .demo-intro img { width: 130px; height: 94px; margin-bottom: 16px; }
  .demo-intro h2 { font-size: 36px; }
  .demo-booking-form { padding: 26px; }
}
@media (max-width: 620px) {
  .site-header { padding: 0 18px; gap: 10px; }
  .header-actions .secondary-button { display: none; }
  .header-actions .account-button { display: flex; width: 42px; min-width: 42px; padding: 0; font-size: 0; }
  .header-cta { width: 42px; min-width: 42px; padding: 0; font-size: 0; }
  .hero { min-height: 690px; }
  .hero-content { width: auto; margin: 0; padding: 70px 22px 120px; }
  h1 { font-size: 56px; }
  .hero-copy { font-size: 16px; }
  .quick-strip { grid-template-columns: 1fr; width: calc(100% - 32px); margin-top: -72px; padding: 10px; }
  .quick-strip div, .quick-strip div:nth-child(2) { border-right: 0; border-bottom: 1px solid var(--line); }
  .quick-strip div:last-child { border-bottom: 0; }
  .section { padding: 72px 20px; }
  .section-heading, .service-grid, .process-grid, .testimonial-grid, .booking-form { grid-template-columns: 1fr; }
  .solution-tabs { display: grid; grid-template-columns: 1fr; }
  .solution-panel { padding: 20px; }
  .results { gap: 30px; }
  .results-grid article { min-height: 145px; padding: 16px; }
  .site-footer { padding: 34px 20px 16px; }
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
  .footer-bottom { align-items: flex-start; flex-direction: column; gap: 8px; margin-top: 26px; }
  .account-dialog { width: calc(100vw - 12px); }
  .account-intro { padding: 22px; }
  .account-form-area { padding: 22px; }
  .inbox-details { grid-template-columns: 1fr; }
  .chat-launcher { right: 16px; bottom: 16px; }
  .chat-box { right: 16px; bottom: 80px; }
  .demo-dialog { width: calc(100vw - 12px); height: calc(100vh - 12px); }
  .school-demo { grid-template-columns: 1fr; }
  .school-demo-sidebar { max-height: 142px; }
  .school-demo-brand { display: none; }
  .school-demo-sidebar nav { display: flex; gap: 5px; overflow-x: auto; }
  .school-demo-sidebar nav button { flex: 0 0 auto; }
  .school-demo-main > header { align-items: flex-start; flex-direction: column; }
  .school-demo-actions { flex-wrap: wrap; }
  .demo-metrics, .demo-grid, .demo-doc-meta { grid-template-columns: 1fr 1fr; }
  .whatsapp-payment-panel, .document-share-panel { grid-template-columns: 1fr; }
  .admit-card-head { grid-template-columns: 76px 1fr 0; min-height: 72px; }
  .admit-card-head img { width: 70px; height: 60px; }
  .admit-card-head h3 { font-size: 24px; }
  .admit-card-layout { grid-template-columns: 1fr; }
  .student-manager-form { grid-template-columns: 1fr; }
  .academic-profile { grid-template-columns: 1fr; }
  .academic-summary, .certificate-grid { grid-template-columns: 1fr; }
  .demo-booking-form, .common-demo-fields, .school-demo-fields, .optional-demo-grid { grid-template-columns: 1fr; }
}

@media print {
  body.demo-printing > *:not(.demo-dialog) { display: none !important; }
  body.demo-printing .demo-dialog { position: static; width: 100%; height: auto; border: 0; box-shadow: none; }
  body.demo-printing .demo-close, body.demo-printing .demo-design-panel, body.demo-printing .school-demo-sidebar, body.demo-printing .school-demo-main > header, body.demo-printing .whatsapp-payment-panel, body.demo-printing .document-share-panel { display: none !important; }
  body.demo-printing .school-demo { display: block; }
  body.demo-printing .school-demo-content { padding: 0; }
  body.demo-printing .demo-document { max-width: none; border: 0; }
}