@charset "UTF-8";
@font-face {
  font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
:root {
  --petrol:#003b43; --ink:#072b39; --muted:#395764; --lime:#90c500;
  --orange:#ff6715; --line:#d9e5e9; --max:1480px;
  --shadow:0 5px 15px #063d4910,0 1px 2px #063d4907;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:76px; }
body { margin:0; color:var(--ink); background:linear-gradient(110deg,#fbfdfc,#f4fafb 55%,#fbfdfd); font-family:Inter,Arial,sans-serif; font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased; }
button,input,select,textarea { font:inherit; color:inherit; }
button,a,input,select,textarea { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
h1,h2,h3,p { margin:0; }
h1,h2,h3 { line-height:1.13; letter-spacing:-.045em; }
h2 { font-size:28px; font-weight:780; }
h3 { font-weight:750; }
p { color:var(--muted); }
[hidden] { display:none!important; }
:focus-visible { outline:3px solid #007f9c; outline-offset:4px; }
.container { width:min(var(--max),calc(100% - 88px)); margin-inline:auto; }
.icon { width:22px; height:22px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.icon-library { position:absolute; width:0; height:0; overflow:hidden; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:fixed; top:8px; left:8px; z-index:100; padding:10px 18px; border-radius:9px; color:#fff; background:var(--petrol); transform:translateY(-160%); }
.skip-link:focus { transform:translateY(0); }
.button { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:43px; padding:10px 16px; border:1px solid transparent; border-radius:10px; font-size:14px; font-weight:650; line-height:1.25; text-align:center; transition:background .18s,box-shadow .18s,transform .18s; }
.button:hover { transform:translateY(-1px); }
.button-primary { color:#082c35; background:linear-gradient(145deg,#ff7c24,#ff650f); border-color:#ff650f; box-shadow:0 5px 14px #ff671523,inset 0 1px #ffffff42; }
.button-primary:hover { background:#ff842b; box-shadow:0 7px 18px #ff671534; }
.button-secondary { background:#ffffffb8; border-color:#91aeb9; }
.button-secondary:hover { background:#ecf6f8; }
.button-small { min-height:36px; padding:7px 14px; font-size:13px; }
.button .icon { width:20px; height:20px; }
.underlined { position:relative; display:inline-block; isolation:isolate; }
.underlined:after { content:""; position:absolute; left:0; right:-5px; bottom:-5px; height:5px; background:var(--lime); border-radius:80% 80% 60% 60%; transform:rotate(-2deg); z-index:-1; }
.site-header { height:58px; position:sticky; top:0; z-index:30; background:#ffffffed; border-bottom:1px solid #e3ecef; backdrop-filter:blur(15px); }
.header-inner { height:100%; display:flex; align-items:center; justify-content:space-between; gap:25px; }
.brand { display:inline-flex; flex:0 0 auto; }
.brand img { width:142px; height:auto; mix-blend-mode:multiply; }
.main-navigation { display:flex; align-items:center; gap:7px; font-weight:650; font-size:14px; }
.header-nav-link { position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:11px 12px; border-radius:10px; white-space:nowrap; transition:background 180ms,color 180ms; }
.header-nav-icon { display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; transition:transform 180ms,color 180ms; }
.header-nav-icon .icon { width:19px; height:19px; stroke-width:1.8; }
.header-nav-link:hover,.header-nav-link:focus-visible { background:#edf6f4; }
.header-nav-link:hover .header-nav-icon,.header-nav-link:focus-visible .header-nav-icon { color:#5a8000; transform:translateY(-1.5px); }
.header-nav-link:after { content:""; position:absolute; height:7px; left:11px; right:11px; bottom:-1px; border-radius:70% 45% 65% 40% / 80% 70% 40% 35%; clip-path:polygon(0 62%,5% 35%,16% 20%,36% 11%,58% 18%,80% 39%,94% 59%,100% 76%,96% 87%,78% 75%,58% 54%,36% 48%,16% 57%,5% 76%,0 80%); background:#9acb1c; transform:scaleX(0) rotate(-1.4deg); transform-origin:center; transition:transform 180ms; pointer-events:none; }
.header-nav-link:before { content:""; position:absolute; height:7px; left:11px; right:11px; top:-1px; border-radius:65% 50% 60% 45% / 75% 80% 35% 40%; clip-path:polygon(0 69%,6% 40%,21% 25%,43% 16%,64% 24%,83% 39%,96% 59%,100% 76%,94% 84%,80% 74%,61% 57%,42% 52%,22% 60%,7% 78%,0 86%); background:var(--orange); transform:scaleX(0) rotate(1.1deg); transform-origin:center; transition:transform 180ms; pointer-events:none; }
.header-nav-link.is-active:after,.header-nav-link:focus-visible:after { transform:scaleX(1) rotate(-1.4deg); }
.header-nav-link.is-active:before,.header-nav-link:focus-visible:before { transform:scaleX(1) rotate(1.1deg); }
.main-navigation:has(.header-nav-link:focus-visible) .header-nav-link.is-active:not(:focus-visible):not(:hover):after { transform:scaleX(0) rotate(-1.4deg); }
.main-navigation:has(.header-nav-link:focus-visible) .header-nav-link.is-active:not(:focus-visible):not(:hover):before { transform:scaleX(0) rotate(1.1deg); }
@media(hover:hover) and (pointer:fine) {
  .header-nav-link:hover:after { transform:scaleX(1) rotate(-1.4deg); }
  .header-nav-link:hover:before { transform:scaleX(1) rotate(1.1deg); }
  .main-navigation:has(.header-nav-link:hover) .header-nav-link:not(:hover):after { transform:scaleX(0) rotate(-1.4deg); }
  .main-navigation:has(.header-nav-link:hover) .header-nav-link:not(:hover):before { transform:scaleX(0) rotate(1.1deg); }
}
.login-link { margin-left:14px; min-width:100px; min-height:38px; }
.main-navigation .login-link:hover,.main-navigation .login-link:focus-visible { background:var(--petrol); color:#fff; border-color:var(--petrol); transform:none; }
.login-link:hover .header-nav-icon,.login-link:focus-visible .header-nav-icon { transform:translateX(1.5px); }
.site-header.is-scrolled { border-bottom-color:#d3e4e8; box-shadow:0 5px 20px #123d4912; }
.nav-toggle { display:none; border:1px solid var(--line); background:#fff; width:42px; height:42px; border-radius:9px; align-items:center; justify-content:center; }
.hero { overflow:hidden; background:radial-gradient(ellipse at 74% 58%,#e6f4e9a8,transparent 54%),linear-gradient(110deg,#f9fcfd,#f0f8fa 52%,#f6fbf6); }
.hero-grid { position:relative; display:grid; grid-template-columns:.39fr .61fr; align-items:center; gap:18px; min-height:400px; }
.hero-copy { position:relative; z-index:2; padding-block:24px; }
.audience-switch { position:absolute; top:13px; left:39%; right:0; z-index:3; display:flex; gap:4px; width:max-content; margin-inline:auto; padding:4px; background:#e6eeebe8; border:1px solid #d8e5df; border-radius:30px; box-shadow:inset 0 1px 3px #003b4305; }
.audience-switch button { display:flex; align-items:center; justify-content:center; gap:7px; border:1px solid transparent; border-radius:24px; padding:8px 15px; background:transparent; color:#45616a; font-size:12px; font-weight:650; line-height:1.3; transition:background 180ms,box-shadow 180ms,color 180ms; }
.audience-switch .icon { width:17px; height:17px; }
.audience-switch button[aria-selected="true"] { color:var(--petrol); background:#fff; border-color:#d5e2df; box-shadow:0 2px 5px #003b4310; }
.audience-switch button[aria-selected="true"] .icon { color:#638900; }
.audience-switch button:hover { color:var(--petrol); background:#ffffff91; }
.audience-switch button[aria-selected="true"]:hover { background:#fff; }
.audience-panel { outline-offset:8px; }
.hero h1 { font-size:48px; line-height:1; font-weight:800; letter-spacing:-.055em; }
.hero-description { font-size:18px; line-height:1.4; color:#153e4c; margin-top:23px; min-height:4.2em; max-width:460px; }
.hero-actions { display:flex; gap:10px; margin-top:21px; flex-wrap:wrap; }
.hero-actions .button { padding-inline:13px; }
.hero-actions .button-secondary { font-size:13px; }
.hero-visual { height:395px; position:relative; isolation:isolate; }
.visual-halo { position:absolute; inset:12px -20px 15px -15px; border-radius:50%; transform:rotate(-12deg); background:linear-gradient(135deg,#daedb0bd,#e2f1c9a6 45%,#e7f5ee80 75%); z-index:-1; }
.candidate-visual { position:absolute; inset:39px 0 0; }
.product-hero { width:calc(100% + 30px); max-width:none; height:100%; margin-left:-10px; object-fit:contain; object-position:center; }
.school-visual { display:none; position:absolute; inset:59px 0 0; padding:0 21px; }
.hero[data-audience="school"] .candidate-visual { display:none; }
.hero[data-audience="school"] .school-visual { display:block; }
.hero[data-audience="school"] .visual-halo { background:linear-gradient(135deg,#e1edb5bd,#e2f1c9a6 45%,#d5eeec9c 75%); }
.hero-laptop { width:min(100%,var(--laptop-width,445px)); margin:auto; padding-bottom:14px; perspective:1000px; filter:drop-shadow(0 15px 13px #123d4920); }
.hero-laptop-screen { position:relative; width:96%; margin:auto; padding:8px 7px 10px; border:2px solid #687571; border-radius:12px 12px 5px 5px; background:#192925; transform:rotate(-2deg); transform-origin:50% 100%; box-shadow:inset 0 0 0 1px #c4d0cb; }
.hero-laptop-screen:before { content:""; display:block; position:absolute; width:3px; height:3px; top:2px; left:50%; background:#9ba6a4; border-radius:50%; }
.hero-laptop-screen img { display:block; width:100%; height:auto; border-radius:3px; }
.hero-laptop-base { position:relative; width:106%; height:13px; margin:-2px -3% 0; border-radius:2px 2px 50% 50% / 2px 2px 12px 12px; background:linear-gradient(#dde5e3,#a5b2ae 55%,#6e7e79 70%,#c8d0cc); transform:rotate(-2deg); box-shadow:0 3px 3px #173e3920; }
.hero-laptop-base:after { content:""; position:absolute; width:17%; height:5px; left:41.5%; top:0; background:#869591; border-radius:0 0 7px 7px; }
.hero-product-note { position:absolute; right:0; bottom:25px; display:flex; align-items:center; gap:10px; padding:11px 17px 11px 11px; border:1px solid #dce7df; border-radius:13px; background:#ffffffed; box-shadow:0 6px 22px #123d4914; }
.hero-product-note .feature-icon { width:35px; height:37px; border-radius:10px; }
.hero-product-note .icon { width:21px; height:21px; }
.hero-product-note strong,.hero-product-note span:not(.feature-icon) { display:block; }
.hero-product-note strong { font-size:12px; }
.hero-product-note div>span { font-size:10px; color:#56716f; margin-top:2px; }
.hero-demo-caption { position:absolute; bottom:3px; right:2px; font-size:9px; color:#6b8585; }
.search-container { position:relative; z-index:3; }
.school-search { padding:18px 20px 20px; display:grid; grid-template-columns:1.15fr 1fr auto; align-items:end; column-gap:20px; row-gap:15px; border:1px solid #dce7eb; border-radius:17px; background:#ffffffed; box-shadow:0 7px 22px #1749540c; }
.search-intro { grid-column:1/-1; display:flex; align-items:center; gap:10px; }
.search-step { display:grid; place-items:center; width:25px; height:25px; border-radius:50%; background:#fff0e3; color:#a54205; font-size:12px; font-weight:750; }
.search-intro h2 { font-size:18px; letter-spacing:-.035em; }
.search-intro p { margin-left:auto; font-size:11px; color:#6b8188; }
.location-field { position:relative; min-width:0; }
.search-field-label { display:block; margin:0 0 7px 1px; font-size:10px; color:#536e78; font-weight:600; line-height:1.4; }
.search-field { display:flex; align-items:center; gap:12px; border:1px solid #d2e0e6; border-radius:9px; min-height:46px; padding:6px 13px; min-width:0; background:#fbfdfd; transition:border-color 180ms,box-shadow 180ms; }
.search-field:focus-within { border-color:#6e969e; box-shadow:0 0 0 3px #b4d7d129; }
.search-field .icon { width:19px; height:19px; }
.search-field label { flex:1; min-width:0; }
.search-field label>span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.search-field input,.search-field select { width:100%; min-width:0; border:0; background:transparent; padding:3px 0; outline-offset:4px; border-radius:2px; font-size:14px; }
.search-field input:focus-visible { outline:0; }
.search-field input::placeholder { color:#31515f; opacity:1; }
.category-picker { min-width:0; }
.category-choices { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; }
.category-choice { min-height:46px; display:flex; justify-content:center; align-items:center; gap:7px; padding:7px 10px; font-size:13px; font-weight:650; border:1px solid #d2e0e6; border-radius:9px; background:#fbfdfd; transition:background 180ms,border-color 180ms,color 180ms; }
.category-choice .icon { width:21px; height:21px; }
.category-choice[aria-pressed="true"] { color:#426600; border-color:#a9ce56; background:#eff8db; box-shadow:inset 0 0 0 1px #cde49f55; }
.category-choice:hover { background:#f0f6e6; border-color:#a9c886; }
.search-submit { min-width:177px; min-height:46px; }
.location-suggestions { position:absolute; z-index:10; top:calc(100% + 7px); left:0; right:0; list-style:none; padding:5px; margin:0; max-height:280px; overflow:auto; border:1px solid #d5e4e6; border-radius:12px; background:#fff; box-shadow:0 14px 30px #123d4921; overscroll-behavior:contain; }
.location-suggestions [role="option"] { position:relative; padding:10px 12px 10px 34px; border-radius:7px; cursor:pointer; }
.location-suggestions [role="option"]:before { content:""; position:absolute; left:14px; top:17px; width:7px; height:7px; border:1.5px solid #5a7e7c; border-radius:50% 50% 50% 0; transform:rotate(-45deg); }
.location-suggestions [role="option"]:hover,.location-suggestions [aria-selected="true"] { background:#f0f7e6; }
.suggestion-title { display:block; font-size:13px; font-weight:650; }
.suggestion-detail { display:block; margin-top:2px; font-size:10px; color:#637e85; }
.schools-section { padding-block:28px 29px; }
.section-heading { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:17px; }
.demo-badge { font-size:11px; font-style:italic; color:#587181; white-space:nowrap; }
.school-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.school-card { background:linear-gradient(#fff,#fcfefe); border:1px solid #d7e4ea; border-radius:15px; box-shadow:var(--shadow); overflow:hidden; transition:box-shadow .2s,transform .2s; }
.school-card:hover { transform:translateY(-3px); box-shadow:0 9px 25px #063d491c; }
.school-photo { height:auto; width:100%; aspect-ratio:2/1; object-fit:cover; filter:saturate(1.14) contrast(1.02) brightness(1.03); }
.school-card-body { padding:10px 15px 14px; }
.school-card h3 { font-size:21px; line-height:1.2; letter-spacing:-.04em; }
.school-location { display:flex; align-items:center; gap:5px; margin-top:3px; font-size:12px; color:#214553; }
.school-location .icon { width:14px; height:14px; }
.school-tags { display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-top:9px; }
.category-tag { display:inline-flex; align-items:center; gap:5px; padding:4px 8px; background:#eff8d9; border-radius:20px; color:#426900; font-size:10px; font-weight:650; line-height:1.35; }
.category-tag .icon { width:16px; height:16px; }
.school-description { font-size:12px; line-height:1.5; margin-top:9px; min-height:18px; }
.button-card { width:100%; min-height:33px; margin-top:10px; padding:6px 12px; border-color:#b9cdd7; border-radius:8px; font-size:12px; background:linear-gradient(#fff,#f6fafc); }
.button-card:hover { background:#eaf5f8; transform:none; }
.button-card .icon { width:17px; height:17px; }
.empty-state { padding:30px; text-align:center; border:1px dashed #b8d1ce; border-radius:14px; background:#f6faf3; }
.empty-state .feature-icon { margin:0 auto 15px; }
.empty-state h3 { font-size:23px; }
.empty-state p { margin:12px 0 18px; }
.noscript-note { font-size:12px; padding:12px; background:#fff1d8; }
.features-section { padding-bottom:12px; }
.features-section h2 { margin-bottom:16px; font-size:28px; }
.features-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.feature-card { padding:14px; border:1px solid #dce7ec; background:linear-gradient(135deg,#fff,#f9fcfd); box-shadow:var(--shadow); border-radius:16px; min-width:0; }
.feature-heading { display:flex; gap:12px; align-items:flex-start; }
.feature-icon { width:46px; height:48px; border-radius:12px; display:grid; place-items:center; flex:0 0 auto; }
.feature-icon .icon { width:27px; height:27px; }
.lime { background:#f0f7df; color:#729d00; }
.blue { background:#e5f5ff; color:#008bbf; }
.orange { background:#fff0e3; color:#ff6816; }
.feature-heading h3 { font-size:17px; line-height:1.2; letter-spacing:-.04em; margin-top:1px; }
.feature-heading p { font-size:11px; line-height:1.5; margin-top:5px; color:#2e4c5c; }
.portal-preview,.cpp-question { margin-top:12px; background:#fff; border:1px solid #e4edf0; border-radius:10px; padding:10px; box-shadow:0 3px 8px #1645520b; }
.portal-preview { min-height:105px; }
.preview-progress-label { display:flex; align-items:center; justify-content:space-between; font-size:12px; }
.preview-progress-label span { font-size:11px; color:#678289; }
.progress-track { background:#e3edf0; height:8px; border-radius:10px; overflow:hidden; margin-top:7px; }
.progress-track>span { display:block; height:100%; width:67%; background:linear-gradient(90deg,#83b900,#aad200); border-radius:10px; }
.preview-row { display:flex; align-items:center; gap:9px; margin-top:11px; }
.preview-row>.icon:first-child { color:#008ec5; width:21px; height:21px; }
.preview-row>div { flex:1; min-width:0; }
.preview-row strong { display:block; font-size:11px; line-height:1.4; }
.preview-row span { font-size:10px; line-height:1.4; display:block; margin-top:2px; }
.preview-row>.icon:last-child { width:14px; height:14px; transform:rotate(-90deg); }
.message-preview { padding-block:1px 9px; }
.message-preview .preview-row { margin-top:9px; }
.message-preview .preview-row+.preview-row { border-top:1px solid #e9eff1; padding-top:9px; }
.message-preview .preview-row>.icon:first-child { color:var(--ink); }
.cpp-question { padding:9px 10px; }
.cpp-question fieldset { margin:0; padding:0; border:0; }
.cpp-question legend { font-size:10px; font-weight:700; line-height:1.4; margin-bottom:6px; }
.cpp-question label { display:flex; align-items:center; gap:6px; padding:2px 0; font-size:9px; line-height:1.4; cursor:pointer; }
.cpp-question label:has(input:checked) { color:#416800; font-weight:650; }
.cpp-question input { width:12px; height:12px; accent-color:#78ad00; margin:0; flex:0 0 auto; }
.cpp-actions { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:5px; }
.cpp-actions button { display:inline-flex; align-items:center; gap:5px; background:#ecf6d9; border:1px solid #d3e6ab; color:#375c00; border-radius:5px; padding:4px 7px; font-size:9px; font-weight:650; }
.cpp-actions .icon { width:12px; height:12px; }
.cpp-actions a { font-size:9px; text-decoration:underline; text-underline-offset:2px; }
.cpp-feedback:empty { display:none; }
.cpp-feedback { font-size:11px; line-height:1.5; margin-top:8px; padding-top:7px; border-top:1px solid #d6e6c0; color:#456818; }
.cpp-feedback.is-incorrect { color:#a34006; }
.warm-note { margin-top:17px; display:flex; align-items:center; gap:16px; border:1px solid #e3e8db; border-radius:12px; overflow:hidden; min-height:67px; background:linear-gradient(90deg,#fffaf2,#f4f8ee); padding-right:18px; }
.warm-note>img { width:103px; height:67px; object-fit:cover; object-position:65% 36%; flex:0 0 auto; }
.warm-note>div { flex:1; }
.warm-note strong { display:block; font-size:13px; line-height:1.4; letter-spacing:-.025em; }
.warm-note p { font-size:11px; margin-top:3px; color:#69725f; }
.warm-note>a { display:flex; align-items:center; gap:7px; font-size:11px; font-weight:650; white-space:nowrap; }
.warm-note>a .icon { width:17px; height:17px; }
@media(min-width:1200px) {
  .site-header { height:70px; }
  .brand img { width:166px; }
  .hero-grid { min-height:410px; gap:35px; }
  .hero h1 { font-size:62px; }
  .hero-description { font-size:20px; }
  .hero-visual { height:448px; --laptop-width:510px; }
  .hero-actions .button { min-height:48px; font-size:15px; }
  .schools-section { padding-top:33px; }
  .school-card h3 { font-size:24px; }
  .school-card-body { padding:14px 20px 17px; }
  .school-location,.school-description { font-size:14px; }
  .category-tag { font-size:12px; }
  .button-card { font-size:14px; min-height:38px; }
  .feature-card { padding:20px; }
  .feature-heading h3 { font-size:20px; }
  .feature-heading p { font-size:13px; }
  .portal-preview { min-height:125px; }
  .cpp-question { min-height:125px; }
  .cpp-question legend { font-size:12px; }
  .cpp-question label,.cpp-actions button,.cpp-actions a { font-size:11px; }
  .preview-row strong { font-size:13px; }
  .preview-row span { font-size:12px; }
  .preview-row { margin-top:14px; }
  .warm-note strong { font-size:15px; }
  .warm-note p,.warm-note>a { font-size:12px; }
}
@media(min-width:1600px) {
  .hero-grid { min-height:490px; }
  .hero h1 { font-size:68px; }
  .hero-visual { height:485px; --laptop-width:560px; }
  h2,.features-section h2 { font-size:32px; }
}
@media(max-width:900px) and (min-width:641px) {
  .container { width:calc(100% - 48px); }
  .main-navigation { gap:3px; font-size:12px; }
  .header-nav-link { gap:6px; padding-inline:9px; }
  .header-inner { gap:18px; }
  .main-navigation .login-link { font-size:12px; padding-inline:10px; gap:6px; }
  .login-link { margin-left:0; min-width:85px; }
  .hero-grid { gap:12px; grid-template-columns:.42fr .58fr; min-height:370px; }
  .audience-switch { left:42%; top:9px; }
  .audience-switch button { padding:7px 12px; font-size:11px; }
  .hero h1 { font-size:43px; }
  .hero-description { font-size:15px; margin-top:20px; }
  .hero-actions { gap:8px; margin-top:19px; }
  .hero-actions .button { font-size:11px; padding-inline:10px; min-height:38px; gap:6px; }
  .hero-actions .button .icon { width:17px; height:17px; }
  .hero-visual { height:365px; }
  .school-visual { top:51px; padding-inline:8px; }
  .hero-product-note { bottom:15px; padding:8px; gap:7px; }
  .hero-product-note strong { font-size:10px; }
  .hero-product-note div>span { font-size:9px; }
  .school-search { gap:10px; padding:12px; }
  .search-field { padding-inline:10px; gap:8px; }
  .search-field input,.search-field select { font-size:12px; }
  .search-submit { min-width:145px; font-size:12px; }
  .category-choice { padding-inline:6px; gap:5px; font-size:12px; }
  .category-choice .icon { width:18px; height:18px; }
  h2,.features-section h2 { font-size:25px; }
  .school-list,.features-grid { gap:12px; }
  .school-card-body { padding:10px 12px 12px; }
  .school-card h3 { font-size:17px; }
  .category-tag { font-size:8px; padding:3px 5px; }
  .category-tag .icon { width:13px; height:13px; }
  .school-description { font-size:10px; }
  .school-location { font-size:10px; }
  .feature-card { padding:11px; }
  .feature-heading { gap:8px; }
  .feature-heading .feature-icon { width:34px; height:38px; border-radius:9px; }
  .feature-heading .feature-icon .icon { width:22px; height:22px; }
  .feature-heading h3 { font-size:14px; }
  .feature-heading p { font-size:10px; }
  .cpp-question { padding:8px; }
  .cpp-question legend { font-size:9px; }
  .cpp-question label { font-size:8px; }
  .cpp-actions button,.cpp-actions a { font-size:8px; }
  .portal-preview { padding:8px; }
  .preview-row { gap:7px; }
  .preview-row strong { font-size:10px; }
  .preview-row span { font-size:8px; }
  .warm-note { gap:12px; }
  .warm-note strong { font-size:12px; }
  .warm-note p { font-size:10px; }
}
@media(max-width:760px) {
  html { scroll-padding-top:79px; }
  .site-header { height:63px; }
  .brand img { width:140px; }
  .nav-toggle { display:flex; }
  .main-navigation { display:none; position:absolute; left:0; right:0; top:62px; background:#fff; padding:12px 20px 20px; border-bottom:1px solid var(--line); box-shadow:0 12px 24px #003b4317; flex-direction:column; gap:0; align-items:stretch; max-height:calc(100dvh - 63px); overflow:auto; font-size:14px; }
  .main-navigation.is-open { display:flex; }
  .main-navigation>.header-nav-link { align-self:flex-start; justify-content:flex-start; min-height:46px; margin-block:3px; padding:12px 13px; }
  .main-navigation .login-link { margin-top:14px; margin-left:0; min-height:43px; font-size:13px; }
  body.menu-open { overflow:hidden; }
}
@media(max-width:640px) {
  .container { width:calc(100% - 34px); }
  .hero-grid { grid-template-columns:1fr; gap:0; min-height:0; }
  .audience-switch { position:static; margin:18px auto 0; max-width:100%; }
  .audience-switch button { padding:9px 14px; }
  .hero-copy { text-align:center; padding:21px 0 9px; }
  .hero h1 { font-size:44px; line-height:1.04; }
  .hero h1 [data-audience-title="candidate"]>br:first-of-type { display:none; }
  .hero-description { font-size:15px; margin:19px auto 0; min-height:4.2em; max-width:345px; }
  .hero-actions { justify-content:center; margin-top:18px; gap:10px; }
  .hero-actions .button { padding-inline:13px; font-size:12px; min-height:42px; }
  .hero-actions .button-secondary { font-size:12px; }
  .hero-visual { height:auto; aspect-ratio:1.5; margin-top:8px; margin-bottom:12px; }
  .candidate-visual { inset:0; }
  .school-visual { inset:3px 0 0; padding-inline:12px; }
  .hero-laptop { width:92%; }
  .hero-laptop-screen { padding:6px 4px 6px; border-width:1px; border-radius:8px 8px 3px 3px; }
  .hero-laptop-base { height:9px; }
  .hero-product-note { bottom:4px; right:7px; padding:7px 10px 7px 7px; gap:7px; border-radius:10px; }
  .hero-product-note .feature-icon { width:28px; height:30px; border-radius:8px; }
  .hero-product-note .icon { width:18px; height:18px; }
  .hero-product-note strong { font-size:10px; }
  .hero-product-note div>span { font-size:9px; }
  .hero-demo-caption { right:7px; bottom:-13px; font-size:8px; }
  .visual-halo { inset:7px -10px 10px; }
  .product-hero { width:100%; margin-left:0; }
  .school-search { grid-template-columns:1fr; gap:13px; padding:16px; min-height:0; border-radius:14px; }
  .search-intro { gap:9px; align-items:center; }
  .search-intro h2 { font-size:18px; }
  .search-intro p { display:none; }
  .search-step { width:24px; height:24px; flex:0 0 auto; }
  .search-field-label { font-size:10px; margin-bottom:6px; }
  .search-field { min-height:43px; }
  .search-field:first-child { grid-column:1/-1; }
  .search-field input,.search-field select { font-size:16px; }
  .search-submit { width:100%; min-height:46px; padding-inline:10px; font-size:14px; }
  .category-choice { min-height:44px; padding:8px 6px; font-size:13px; gap:6px; }
  .category-choice .icon { width:20px; height:20px; }
  .search-submit .icon { width:17px; height:17px; }
  .schools-section { padding:25px 0 27px; }
  .section-heading { margin-bottom:13px; gap:10px; }
  h2,.features-section h2 { font-size:24px; }
  .demo-badge { font-size:9px; }
  .school-list { grid-template-columns:1fr; gap:17px; }
  .school-photo { aspect-ratio:2.1; }
  .school-card-body { padding:13px 16px 15px; }
  .school-card h3 { font-size:23px; }
  .school-location { font-size:13px; }
  .school-tags { margin-top:8px; }
  .category-tag { font-size:11px; }
  .school-description { font-size:13px; margin-top:9px; }
  .button-card { min-height:39px; font-size:13px; margin-top:11px; }
  .features-grid { grid-template-columns:1fr; gap:14px; }
  .features-section h2 { font-size:25px; line-height:1.2; margin-bottom:14px; }
  .feature-card { padding:17px; }
  .feature-heading h3 { font-size:19px; }
  .feature-heading p { font-size:13px; }
  .feature-icon { width:48px; height:49px; }
  .cpp-question,.portal-preview { margin-top:13px; padding:12px; min-height:0; }
  .cpp-question legend { font-size:13px; }
  .cpp-question label { font-size:12px; padding:4px 0; }
  .cpp-question input { width:15px; height:15px; }
  .cpp-actions { margin-top:9px; }
  .cpp-actions button,.cpp-actions a { font-size:12px; }
  .cpp-actions button { padding:7px 10px; }
  .preview-progress-label { font-size:14px; }
  .preview-row { margin-top:13px; }
  .preview-row strong { font-size:13px; }
  .preview-row span { font-size:12px; }
  .warm-note { gap:12px; padding:0 10px 0 0; min-height:83px; margin-top:17px; }
  .warm-note>img { width:83px; height:96px; object-position:63% 40%; }
  .warm-note strong { font-size:12px; }
  .warm-note p { font-size:10px; line-height:1.5; }
  .warm-note>a { display:none; }
  .demo-enquiry-input { font-size:16px!important; }
}
@media(max-width:360px) {
  .container { width:calc(100% - 28px); }
  .hero h1 { font-size:38px; }
  .hero-actions { gap:8px; }
  .hero-actions .button { font-size:11px; padding-inline:11px; }
  .hero-description { font-size:14px; }
  .section-heading h2 { font-size:21px; }
  .demo-badge { font-size:8px; }
  .school-search { padding:14px; }
  .search-intro h2 { font-size:16px; }
  .category-choice { gap:4px; padding-inline:4px; font-size:12px; }
  .category-choice .icon { width:18px; height:18px; }
  .search-field { padding-inline:9px; gap:8px; }
  .search-field input,.search-field select { font-size:16px; }
  .feature-heading h3 { font-size:18px; }
}
/* Installment options and provider information. */
.installment-section { padding-top:30px; padding-bottom:2px; }
.installment-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:21px; }
.installment-eyebrow { margin-bottom:7px; color:#8b541e; font-size:9px; line-height:1.4; font-weight:700; text-transform:uppercase; letter-spacing:.12em; }
.installment-heading h2 { font-size:28px; line-height:1.2; }
.installment-heading .section-intro { margin-top:10px; }
.payment-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.payment-option { display:flex; flex-direction:column; min-width:0; padding:19px 21px 18px; border:1px solid #d7e4e4; border-radius:16px; box-shadow:var(--shadow); background:#fff; transition:border-color 180ms,box-shadow 180ms,transform 180ms; }
.payment-provider { display:flex; align-items:center; min-height:61px; }
.payment-provider>div { min-width:0; max-width:100%; }
.payment-provider h3 { display:flex; align-items:center; gap:9px; min-height:40px; font-size:19px; line-height:1; letter-spacing:-.035em; }
.payment-logo { display:block; height:32px; width:auto; max-width:135px; object-fit:contain; object-position:left center; }
.payment-logo-mark { height:36px; width:36px; max-width:36px; flex:0 0 auto; }
.payment-logo-diners { height:40px; width:55px; max-width:55px; flex:0 0 auto; }
.payment-provider p { font-size:10px; color:#6a7d83; margin-top:5px; }
.payment-count { display:flex; gap:8px; align-items:baseline; margin-top:17px; color:var(--ink); line-height:1; }
.payment-count strong { font-size:43px; font-weight:780; letter-spacing:-.055em; }
.payment-count>span { font-size:12px; color:#5a7379; }
.payment-count .payment-up-to { font-size:15px; color:#3b5e64; }
.payment-description { max-width:340px; min-height:36px; font-size:12px; line-height:1.5; color:#536e76; margin-top:12px; margin-bottom:17px; }
.payment-link { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; padding-top:12px; border-top:1px solid #e6edeb; color:var(--petrol); font-size:12px; font-weight:650; }
.payment-link .icon { width:17px; height:17px; transform:rotate(-35deg); transition:transform 180ms; }
.payment-option:focus-within { border-color:#94b9b0; box-shadow:0 8px 24px #003b4317; }
.payment-link:focus-visible { outline-offset:3px; border-radius:3px; }
.provider-nlb { background:linear-gradient(140deg,#fbf9ff,#fff 65%); }
.provider-leanpay { background:linear-gradient(140deg,#f6faee,#fff 65%); border-color:#d7e5c6; }
.provider-diners { background:linear-gradient(140deg,#f3f9fc,#fff 65%); }
.installment-note { margin-top:13px; color:#6d8083; font-size:10px; line-height:1.55; }
@media(hover:hover) and (pointer:fine) {
  .payment-option:hover { border-color:#a4c3b8; box-shadow:0 9px 24px #003b4314; transform:translateY(-2px); }
  .payment-link:hover .icon { transform:translate(2px,-2px) rotate(-35deg); }
}
@media(min-width:1400px) {
  .installment-heading h2 { font-size:32px; }
  .payment-option { padding:21px 24px; }
  .payment-provider h3 { font-size:21px; }
  .payment-count strong { font-size:48px; }
  .payment-description { font-size:13px; min-height:39px; }
  .payment-provider p,.installment-note { font-size:11px; }
  .payment-link { font-size:13px; }
}
@media(max-width:900px) and (min-width:641px) {
  .payment-options { gap:12px; }
  .payment-option { padding:17px 15px; }
  .payment-provider h3 { font-size:17px; }
  .payment-logo { max-width:125px; height:30px; }
  .payment-count strong { font-size:38px; }
  .payment-description { font-size:11px; min-height:50px; }
  .payment-link { font-size:11px; }
}
@media(max-width:640px) {
  .installment-section { padding-top:25px; }
  .installment-heading { align-items:flex-start; gap:12px; margin-bottom:18px; }
  .installment-heading h2 { font-size:26px; }
  .installment-heading .demo-badge { margin-top:4px; }
  .installment-eyebrow { font-size:9px; }
  .installment-heading .section-intro { font-size:12px; }
  .payment-options { grid-template-columns:1fr; gap:12px; }
  .payment-option { position:relative; padding:18px; }
  .payment-provider { padding-right:95px; }
  .payment-provider h3 { font-size:19px; }
  .payment-logo { max-width:min(135px,100%); height:30px; }
  .payment-logo-mark { width:32px; max-width:32px; height:32px; }
  .payment-logo-diners { width:44px; max-width:44px; height:32px; }
  .payment-count { position:absolute; right:18px; top:18px; margin:0; flex-wrap:wrap; justify-content:flex-end; gap:4px; width:95px; }
  .payment-count strong { font-size:34px; }
  .payment-count>span:last-child { flex-basis:100%; text-align:right; font-size:10px; }
  .payment-count .payment-up-to { font-size:12px; }
  .payment-description { min-height:0; max-width:none; font-size:12px; margin-top:16px; margin-bottom:15px; }
  .payment-link { min-height:35px; padding-top:11px; font-size:12px; }
  .installment-note { font-size:10px; }
}
@media(max-width:360px) {
  .installment-heading { flex-direction:column; gap:12px; }
  .installment-heading .demo-badge { margin:0; }
  .installment-heading h2 { font-size:25px; }
  .payment-option { padding:16px; }
  .payment-provider h3 { font-size:17px; }
  .payment-logo { max-width:min(122px,100%); height:29px; }
  .payment-logo-mark { width:30px; max-width:30px; height:30px; }
  .payment-logo-diners { width:42px; max-width:42px; height:31px; }
  .payment-count { right:16px; top:18px; width:82px; }
  .payment-count strong { font-size:31px; }
}
/* School profiles and the audience-specific product preview. */
.section-intro { margin-top:10px; color:#5a737c; font-size:13px; line-height:1.5; }
.schools-section .section-heading { align-items:center; margin-bottom:21px; }
.school-list .school-card { display:flex; flex-direction:column; background:#fff; border-color:#d5e4e8; border-radius:17px; transition:transform 220ms,box-shadow 220ms,border-color 220ms; }
.school-photo-wrap { overflow:hidden; background:#e7efeb; }
.school-card .school-photo { display:block; aspect-ratio:2.4; object-position:center 64%; transition:transform 450ms; }
.school-card .school-card-body { flex:1; display:flex; flex-direction:column; padding:17px 18px 18px; }
.school-card-heading { display:flex; align-items:center; gap:12px; }
.school-card-heading>div { min-width:0; }
.school-mark { display:grid; place-items:center; width:44px; height:46px; flex:0 0 auto; border-radius:12px; font-size:27px; font-weight:800; font-style:italic; line-height:1; letter-spacing:-.08em; border:1px solid #cde0d6; }
.mark-sever { color:#185d47; background:linear-gradient(135deg,#eff7eb,#dcefe3); }
.mark-horizont { color:#0a7094; background:linear-gradient(135deg,#eff9fb,#dceef6); border-color:#cce2ec; }
.mark-korak { color:#b75b18; background:linear-gradient(135deg,#fff8e9,#fcead7); border-color:#eddbc4; }
.school-card .school-card-heading h3 { font-size:clamp(18px,1.55vw,23px); line-height:1.2; letter-spacing:-.04em; }
.school-card .school-location { font-size:12px; margin-top:4px; }
.school-card .school-tags { margin-top:14px; gap:6px; }
.school-card .category-tag { font-size:10px; padding:4px 8px; }
.school-card .category-tag .icon { width:16px; height:16px; }
.school-highlight { display:flex; gap:9px; align-items:flex-start; margin-block:15px 17px; padding-top:14px; border-top:1px solid #edf1ef; }
.school-highlight>.icon { width:19px; height:19px; margin-top:1px; color:#6c9209; }
.school-highlight strong { display:block; font-size:12px; font-weight:650; line-height:1.45; }
.school-highlight small { display:block; font-size:11px; line-height:1.5; color:#607780; margin-top:2px; }
.school-card .button-card { min-height:39px; margin-top:auto; border-color:#b9cdd1; background:#f9fcfc; font-size:12px; }
.school-card .button-card .icon { transition:transform 200ms; }
.school-card:focus-within { border-color:#8db5ad; box-shadow:0 8px 25px #063d491c; }
.school-card:focus-within .button-card { background:var(--petrol); border-color:var(--petrol); color:#fff; }
@media(hover:hover) and (pointer:fine) {
  .school-list .school-card:hover { transform:translateY(-4px); border-color:#9bbfb5; box-shadow:0 13px 29px #063d491c; }
  .school-card:hover .school-photo { transform:scale(1.035); }
  .school-card:hover .button-card { background:var(--petrol); border-color:var(--petrol); color:#fff; }
  .school-card:hover .button-card .icon { transform:translateX(3px); }
}
.features-section .feature-section-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:7px 0 24px; }
.features-section .feature-section-heading h2 { font-size:clamp(25px,2.1vw,32px); margin:0; line-height:1.25; }
.product-showcase { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:18px; align-items:stretch; }
.product-showcase .feature-card { padding:22px; border-radius:18px; }
.product-showcase .feature-heading { gap:12px; align-items:center; }
.product-showcase .feature-heading h3 { font-size:19px; margin:0; letter-spacing:-.035em; line-height:1.25; }
.product-showcase .feature-heading p { font-size:12px; margin-top:5px; line-height:1.5; }
.product-showcase .feature-icon { width:43px; height:45px; border-radius:12px; }
.product-showcase .feature-icon .icon { width:25px; height:25px; }
.feature-side { display:grid; grid-template-rows:repeat(2,1fr); gap:18px; min-width:0; }
.product-showcase .cpp-feature { display:flex; flex-direction:column; background:linear-gradient(145deg,#f4f9ec,#fff 65%); border-color:#dce7cc; }
.cpp-demo-layout { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:20px; align-items:center; flex:1; margin-top:20px; }
.cpp-scene { display:block; width:100%; height:100%; min-height:245px; object-fit:contain; border:1px solid #e1e9d9; border-radius:14px; background:#eef4e9; }
.cpp-feature .cpp-question { margin:0; padding:0; border:0; border-radius:0; box-shadow:none; background:transparent; }
.cpp-feature .cpp-question fieldset { display:grid; gap:8px; min-width:0; }
.cpp-feature .cpp-question legend { font-size:17px; line-height:1.35; font-weight:750; margin-bottom:14px; }
.cpp-feature .cpp-question label { position:relative; display:flex; gap:9px; align-items:center; padding:11px; border:1px solid #d7e2df; border-radius:10px; background:#ffffffdf; color:#294c58; font-size:12px; line-height:1.45; min-height:49px; transition:background 180ms,border-color 180ms; }
.cpp-feature .cpp-question input { position:absolute; opacity:0; width:1px; height:1px; }
.answer-letter { display:grid; place-items:center; flex:0 0 auto; width:25px; height:25px; border:1px solid #cbdad9; border-radius:7px; color:#53716e; background:#f8fbfa; font-size:11px; font-weight:700; }
.cpp-feature .cpp-question label:has(input:checked) { background:#eef7dc; border-color:#a6c857; font-weight:500; }
.cpp-feature .cpp-question label:has(input:checked) .answer-letter { color:#fff; background:#6c9404; border-color:#6c9404; }
.cpp-feature .cpp-question label:has(input:focus-visible) { outline:3px solid #007f9c; outline-offset:3px; }
.cpp-feature .cpp-question label[data-answer-state="correct"] { border-color:#8cb73b; background:#eef7df; color:#355b0b; }
.cpp-feature .cpp-question label[data-answer-state="incorrect"]:has(input:checked) { border-color:#e7a27b; background:#fff1e8; color:#8a3b13; }
.cpp-feature .cpp-question label[data-answer-state="incorrect"]:has(input:checked) .answer-letter { color:#fff; background:#ac592d; border-color:#ac592d; }
.cpp-feature .cpp-actions { justify-content:flex-start; flex-wrap:wrap; gap:13px; margin-top:16px; }
.cpp-feature .cpp-actions button[type="submit"] { min-height:40px; padding:9px 12px; font-size:12px; background:linear-gradient(145deg,#ff7c24,#ff650f); border-color:#ff650f; color:#082c35; border-radius:9px; }
.cpp-feature .cpp-actions .icon { width:16px; height:16px; }
.cpp-feature #cpp-retry { padding:6px 0; border:0; border-radius:0; background:none; color:#526e76; font-size:11px; text-decoration:underline; text-underline-offset:3px; }
.cpp-feature .cpp-feedback { border:0; border-radius:9px; padding:11px 13px; margin-top:13px; font-size:12px; line-height:1.55; background:#eaf4d8; color:#385c16; }
.cpp-feature .cpp-feedback.is-incorrect { background:#fff0e5; color:#8b461e; }
.cpp-more,.showcase-link { display:inline-flex; align-items:center; gap:8px; align-self:flex-start; padding:0; margin-top:20px; border:0; background:none; font-size:12px; line-height:1.5; color:var(--petrol); font-weight:650; }
.cpp-more .icon,.showcase-link .icon { width:17px; height:17px; transition:transform 180ms; }
.cpp-more:hover .icon,.showcase-link:hover .icon { transform:translateX(3px); }
.product-showcase .progress-feature { background:linear-gradient(130deg,#f4faff,#fff); border-color:#d8e8ef; }
.progress-feature .portal-preview { background:none; border:0; box-shadow:none; padding:0; min-height:0; margin-top:19px; }
.progress-feature .preview-progress-label { font-size:12px; }
.progress-feature .preview-progress-label span { font-size:12px; font-weight:650; color:#456a77; }
.progress-feature .progress-track { height:9px; margin-top:9px; }
.progress-feature .preview-row { padding:12px; margin-top:15px; border:1px solid #e0eaed; background:#fff; border-radius:10px; gap:10px; }
.progress-feature .preview-row strong { font-size:12px; }
.progress-feature .preview-row span { font-size:11px; margin-top:3px; }
.product-showcase .connection-feature { background:linear-gradient(130deg,#fff9f1,#fff); border-color:#eee2d6; }
.message-bubble { padding:13px 15px; background:#fff; border:1px solid #eaddcc; border-radius:12px 12px 12px 3px; margin-top:18px; }
.message-bubble small { font-size:10px; color:#7b775f; font-weight:600; }
.message-bubble p { margin-top:5px; font-size:12px; line-height:1.55; color:#34535a; }
.message-note,.finance-note { display:flex; align-items:center; gap:7px; margin-top:12px; font-size:10px; color:#617869; }
.message-note .icon,.finance-note .icon { width:15px; height:15px; color:#789e20; }
.product-showcase .schedule-feature { display:flex; flex-direction:column; background:linear-gradient(140deg,#f1f8f5,#fff 60%); border-color:#d2e4dd; }
.schedule-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:24px; margin-bottom:12px; }
.schedule-toolbar>strong { font-size:13px; }
.day-switch { display:flex; gap:3px; padding:3px; border:1px solid #d6e3dd; border-radius:9px; background:#edf4f1; }
.day-switch button { min-height:33px; padding:6px 11px; border:1px solid transparent; border-radius:6px; background:none; font-size:11px; font-weight:650; }
.day-switch button[aria-pressed="true"] { background:var(--petrol); color:#fff; box-shadow:0 2px 4px #003b4312; }
#schedule-entries { list-style:none; padding:0; margin:0; display:grid; grid-template-rows:repeat(3,1fr); flex:1; }
.schedule-entry { display:grid; grid-template-columns:44px minmax(0,1.05fr) minmax(0,.85fr) auto; gap:11px; align-items:center; padding:16px 0; border-top:1px solid #e0eae5; }
.schedule-time { font-size:14px; color:var(--ink); font-weight:750; }
.schedule-person { min-width:0; }
.schedule-person strong { display:block; font-size:12px; line-height:1.35; }
.schedule-person>span { display:block; font-size:10px; color:#637d81; margin-top:4px; }
.schedule-vehicle { color:#506d72; font-size:10px; }
.schedule-state { padding:4px 7px; font-size:9px; color:#2a739b; background:#e9f4fb; border-radius:6px; white-space:nowrap; }
.schedule-state.is-live { background:#edf6db; color:#5c7e0e; }
.schedule-feature .showcase-link { margin-top:auto; padding-top:18px; border-top:1px solid #e0eae5; width:100%; }
.product-showcase .instructors-feature { background:linear-gradient(130deg,#f7faef,#fff); }
.instructor-row { margin-top:16px; }
.instructor-label { display:flex; gap:8px; align-items:center; font-size:11px; }
.instructor-avatar { width:25px; height:25px; display:grid; place-items:center; border-radius:8px; color:#547b08; background:#eaf3d6; font-size:9px; font-weight:750; }
.instructor-label>strong { font-weight:650; }
.instructor-label>span:last-child { margin-left:auto; color:#597277; font-size:10px; white-space:nowrap; }
.load-track { height:6px; margin-top:7px; border-radius:10px; background:#e1e9e2; overflow:hidden; }
.load-track>span { display:block; height:100%; border-radius:10px; background:linear-gradient(90deg,#89b816,#accf33); }
.product-showcase .finance-feature { background:linear-gradient(130deg,#fff8ef,#fff); border-color:#eadfce; }
.business-metrics { display:grid; grid-template-columns:1fr 1fr; gap:13px; margin-top:22px; }
.business-metrics>div { padding:12px 14px; background:#fff; border:1px solid #eee4d7; border-radius:10px; }
.business-metrics strong { display:block; font-size:27px; color:var(--ink); line-height:1.2; letter-spacing:-.045em; }
.business-metrics span { display:block; margin-top:5px; font-size:10px; color:#627a7b; }
.features-section .warm-note { margin-top:19px; }
@media(min-width:1400px) {
  .product-showcase .feature-card { padding:25px; }
  .product-showcase .feature-heading h3 { font-size:21px; }
  .product-showcase .feature-heading p { font-size:13px; }
  .cpp-feature .cpp-question label { font-size:13px; min-height:53px; padding:12px; }
  .cpp-feature .cpp-question legend { font-size:19px; }
  .schedule-entry { padding-block:19px; }
  .schedule-person strong { font-size:14px; }
  .schedule-vehicle,.schedule-person>span { font-size:12px; }
  .schedule-state { font-size:10px; }
}
@media(max-width:1100px) and (min-width:761px) {
  .product-showcase { grid-template-columns:1fr; gap:14px; }
  .product-showcase .feature-card { padding:17px; }
  .product-showcase .feature-heading h3 { font-size:18px; }
  .product-showcase .feature-heading p { font-size:11px; }
  .cpp-demo-layout { grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:20px; }
  .cpp-feature .cpp-question legend { font-size:18px; }
  .cpp-feature .cpp-question label { font-size:12px; padding:11px; gap:9px; }
  .cpp-feature .cpp-actions { gap:10px; }
  .cpp-feature .cpp-actions button[type="submit"] { font-size:12px; padding-inline:12px; }
  .feature-side { grid-template-columns:1fr 1fr; grid-template-rows:auto; gap:14px; }
  .schedule-entry { padding-block:14px; }
}
@media(max-width:760px) {
  .school-list { gap:12px; }
  .school-card .school-card-body { padding:14px; }
  .school-card-heading { gap:9px; }
  .school-mark { width:36px; height:39px; border-radius:10px; font-size:23px; }
  .school-card .school-card-heading h3 { font-size:18px; }
  .school-card .school-location { font-size:11px; }
  .features-section .feature-section-heading { align-items:flex-start; margin-bottom:21px; gap:12px; }
  .feature-section-heading .demo-badge { margin-top:5px; }
  .product-showcase { grid-template-columns:1fr; gap:14px; }
  .product-showcase .feature-card { padding:20px; }
  .feature-side { grid-template-columns:1fr 1fr; grid-template-rows:auto; gap:14px; }
  .cpp-demo-layout { grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:18px; }
  .product-showcase .feature-heading h3 { font-size:18px; }
  .product-showcase .feature-heading p { font-size:12px; }
}
@media(max-width:640px) {
  .section-intro { font-size:12px; margin-top:9px; }
  .schools-section .section-heading { gap:12px; align-items:flex-start; }
  .schools-section .section-heading .demo-badge { margin-top:5px; }
  .school-card .school-card-body { padding:16px; }
  .school-card .school-photo { aspect-ratio:2.4; }
  .school-card .school-card-heading h3 { font-size:21px; }
  .school-mark { width:42px; height:44px; font-size:25px; }
  .school-card .school-location { font-size:12px; }
  .school-card .category-tag { font-size:11px; }
  .school-highlight strong { font-size:13px; }
  .school-highlight small { font-size:12px; }
  .school-card .button-card { min-height:43px; font-size:13px; }
  .features-section .feature-section-heading { flex-direction:column; gap:12px; }
  .feature-section-heading .demo-badge { margin-top:0; }
  .features-section .feature-section-heading h2 { font-size:26px; }
  .product-showcase .feature-card { padding:18px; }
  .product-showcase .feature-heading h3 { font-size:19px; }
  .product-showcase .feature-heading p { font-size:12px; }
  .cpp-demo-layout { grid-template-columns:1fr; gap:19px; margin-top:18px; }
  .cpp-scene { height:auto; min-height:0; aspect-ratio:1.95; object-fit:cover; }
  .cpp-feature .cpp-question legend { font-size:18px; margin-bottom:13px; }
  .cpp-feature .cpp-question label { font-size:13px; padding:12px 10px; min-height:51px; }
  .cpp-feature .cpp-question input { width:1px; height:1px; }
  .cpp-feature .cpp-actions { justify-content:space-between; }
  .cpp-feature .cpp-actions button[type="submit"] { font-size:12px; min-height:43px; }
  .cpp-feature #cpp-retry { font-size:12px; }
  .cpp-more,.showcase-link { font-size:13px; }
  .feature-side { grid-template-columns:1fr; gap:14px; }
  .progress-feature .preview-row strong { font-size:13px; }
  .progress-feature .preview-row span,.message-bubble p { font-size:12px; }
  .schedule-toolbar { margin-top:21px; gap:7px; }
  .schedule-toolbar>strong { font-size:12px; }
  .day-switch button { min-height:40px; padding:7px 10px; font-size:11px; }
  .schedule-entry { grid-template-columns:42px minmax(0,1fr) auto; gap:9px; padding-block:15px; }
  .schedule-person strong { font-size:12px; }
  .schedule-person>span { font-size:10px; }
  .schedule-vehicle { display:none; }
  .schedule-state { font-size:10px; padding:4px 6px; }
  .instructor-label { font-size:12px; }
  .instructor-label>span:last-child { font-size:11px; }
  .business-metrics strong { font-size:29px; }
}
@media(max-width:360px) {
  .school-card .school-card-heading h3 { font-size:19px; }
  .product-showcase .feature-card { padding:15px; }
  .product-showcase .feature-heading { gap:9px; }
  .product-showcase .feature-heading h3 { font-size:17px; }
  .product-showcase .feature-icon { width:36px; height:39px; border-radius:10px; }
  .product-showcase .feature-icon .icon { width:22px; height:22px; }
  .schedule-entry { grid-template-columns:38px minmax(0,1fr) auto; gap:7px; }
  .schedule-time { font-size:13px; }
  .schedule-person strong { font-size:12px; }
  .schedule-state { font-size:9px; padding:4px 5px; }
  .schedule-toolbar>strong { font-size:11px; }
  .day-switch button { padding:6px 8px; }
}
/* Steps, closing calls to action, and footer. */
.journey-section { padding:20px 0 30px; }
.journey-section h2 { font-size:clamp(24px,2.1vw,32px); }
.journey-list {
  --step-gap:24px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--step-gap);
  list-style:none;
  margin:32px 0 0;
  padding:0;
}
.journey-list>li {
  position:relative;
  min-width:0;
  padding:29px 19px 17px;
  border:1px solid #dce8e1;
  border-radius:13px;
  background:#fff;
  transition:background-color 180ms,border-color 180ms;
}
.journey-list>li:not(:last-child)::after {
  content:"";
  position:absolute;
  top:-1px;
  left:35px;
  width:calc(100% + var(--step-gap) + 2px);
  height:9px;
  border-top:2px solid #8aaf33;
  border-radius:48% 55% 0 0;
  pointer-events:none;
}
.journey-list>li:not(:last-child)::before {
  content:"";
  position:absolute;
  z-index:1;
  top:-3px;
  right:calc(-.5 * var(--step-gap) - 3px);
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--orange);
}
.step-number {
  position:absolute;
  top:-17px;
  left:18px;
  z-index:2;
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border:2px solid #f5faf4;
  border-radius:50%;
  background:#eaf3d3;
  color:#4d700a;
  font-size:15px;
  font-weight:750;
  transition:background-color 180ms,color 180ms;
}
.journey-list h3 {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:clamp(14px,1.25vw,18px);
  line-height:1.25;
}
.journey-icon { width:22px; height:22px; color:#31716a; }
.journey-list p { margin-top:7px; font-size:13px; line-height:1.45; }
@media(hover:hover) and (pointer:fine) {
  .journey-list>li:hover { background:#f7faee; border-color:#bdd193; }
  .journey-list>li:hover .step-number { background:#ffe8d4; color:#974003; }
}
.closing-section { padding-bottom:32px; }
.closing-panel {
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr);
  align-items:center;
  gap:24px;
  overflow:hidden;
  padding:30px clamp(22px,4vw,60px);
  border:1px solid #1a6065;
  border-radius:19px;
  background:linear-gradient(115deg,#07565c,#003741 72%);
  color:#fff;
}
.closing-copy h2 { font-size:clamp(29px,3.15vw,49px); }
.closing-copy p {
  margin-top:10px;
  color:#e0eeee;
  font-size:clamp(14px,1.25vw,19px);
  line-height:1.5;
}
.closing-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.closing-actions .button { min-height:45px; }
.closing-actions .button-secondary {
  border-color:#8faeaf;
  background:#ffffff0e;
  color:#fff;
}
.closing-actions .button-secondary:hover { background:#ffffff24; }
.closing-actions :focus-visible { outline-color:#d9eea1; }
.closing-product {
  position:relative;
  isolation:isolate;
  display:grid;
  place-items:center;
  min-width:0;
}
.closing-product::before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:12% 0;
  border:1px solid #bbdf7a44;
  border-radius:50%;
  background:radial-gradient(ellipse at center,#8cba3377,#75a13b24 70%);
  transform:rotate(-11deg);
}
.closing-phone {
  width:clamp(112px,10.2vw,148px);
  aspect-ratio:526 / 923;
  border-radius:20% / 11%;
  /* Show the phone from the existing product image. */
  background:url("/assets/landing/product-hero-v2.webp") 5.94% 49.5% / 292% auto no-repeat;
  transform:rotate(-8deg);
  filter:drop-shadow(0 12px 16px #001f2a75);
}
.closing-laptop { width:min(94%,390px); padding-bottom:0; }
.site-footer {
  padding:32px 0 16px;
  border-top:1px solid #dbe5dd;
  background:#f8f9f3;
}
.footer-main {
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr) minmax(0,1fr);
  gap:clamp(20px,4vw,58px);
  padding-bottom:25px;
}
.site-footer .brand img { width:134px; }
.footer-tagline { margin-top:8px; font-size:13px; }
.footer-heading { margin:3px 0 9px; font-size:15px; letter-spacing:0; }
.footer-links,.footer-legal-links {
  list-style:none;
  margin:0;
  padding:0;
}
.footer-links { display:grid; gap:6px; }
.site-footer a,.site-footer button { color:#244a52; }
.site-footer button {
  padding:0;
  border:0;
  background:none;
  text-align:left;
  font:inherit;
}
.site-footer a:not(.brand):hover,.site-footer button:hover {
  color:var(--petrol);
  text-decoration:underline;
  text-underline-offset:3px;
}
.footer-column,.footer-contact { font-size:13px; }
.site-footer .footer-contact {
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top:12px;
  font-size:13px;
  font-weight:650;
}
.footer-contact .icon { width:16px; height:16px; }
.footer-bottom {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding-top:14px;
  border-top:1px solid #dce5db;
  font-size:11px;
}
.footer-meta,.footer-legal-links { display:flex; flex-wrap:wrap; gap:14px; }
.footer-copyright { color:#456066; }
.footer-demo { color:#647773; }
@media(max-width:760px) {
  .journey-list {
    --step-gap:13px;
    grid-template-columns:1fr;
    margin-top:17px;
    padding-left:43px;
  }
  .journey-list>li { padding:14px 15px; }
  .journey-list>li:not(:last-child)::after {
    top:31px;
    left:-27px;
    width:5px;
    height:calc(100% + var(--step-gap) + 2px);
    border-top:0;
    border-left:2px solid #8aaf33;
    border-radius:50%;
  }
  .journey-list>li:not(:last-child)::before {
    top:calc(100% + 4px);
    left:-29px;
    right:auto;
  }
  .step-number { top:12px; left:-43px; }
  .journey-list h3 { font-size:16px; }
  .closing-panel { gap:19px; }
}
@media(max-width:640px) {
  .journey-section { padding-bottom:23px; }
  .closing-section { padding-bottom:25px; }
  .closing-panel { grid-template-columns:1fr; padding:23px 20px; }
  .closing-actions { margin-top:16px; }
  .closing-actions .button { min-height:42px; font-size:12px; padding-inline:11px; }
  .closing-product { width:min(100%,350px); margin-inline:auto; padding-block:7px; }
  .closing-laptop { width:90%; }
  .site-footer { padding-top:24px; }
  .footer-main { grid-template-columns:1fr 1fr; gap:19px 12px; }
  .footer-brand { grid-column:1/-1; }
  .footer-column { font-size:12px; }
  .footer-bottom { flex-wrap:wrap; gap:10px; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*:before,*:after { transition:none!important; animation:none!important; }
}

/* Shared school and information dialogs. */
.site-dialog{width:min(650px,calc(100% - 32px));max-height:min(90dvh,900px);padding:0;border:1px solid #e0e8e8;border-radius:20px;color:var(--ink);box-shadow:0 25px 100px #002d4350;overscroll-behavior:contain}.site-dialog::backdrop{background:#002b38a6;backdrop-filter:blur(5px)}body:has(.site-dialog[open]){overflow:hidden}.dialog-close{position:absolute;right:15px;top:15px;z-index:2;background:#fffffff2;border:1px solid #dbe6e6;border-radius:50%;width:38px;height:38px;display:grid;place-items:center}.dialog-close:hover{background:#eaf3f2}.dialog-close .icon{width:19px;height:19px}.school-detail-image{width:100%;height:230px;object-fit:cover}.school-detail-heading,.school-detail-location,.school-detail-tags,.school-detail-copy,.school-offers,.school-dialog-note,.school-enquiry-toggle{margin-inline:30px}.school-detail-eyebrow{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:#7a9192;margin:25px 30px 10px}.school-detail-heading{font-size:32px;padding-right:20px}.school-detail-location{color:#70858b;font-size:13px;margin-top:8px}.school-detail-tags{display:flex;gap:7px;margin-top:15px}.school-detail-copy{font-size:14px;line-height:1.85;margin-top:18px}.school-offers{margin-block:24px;display:grid;gap:9px}.school-offer{background:#f3f7f6;border:1px solid #e6edeb;border-radius:10px;padding:14px 16px}.school-offer-title{font-size:14px;font-weight:700;color:var(--ink);line-height:1.4}.school-offer-copy{font-size:12px;margin-top:4px}.school-dialog-note{font-size:11px;border-left:3px solid #a0ba5e;padding:9px 13px;background:#f5f8ed;color:#62724a;margin-block:20px}.school-enquiry-toggle{margin-bottom:27px}.demo-enquiry{display:grid;gap:14px;margin:20px 30px 30px}.demo-enquiry-label{font-size:12px;font-weight:600;display:grid;gap:6px;color:var(--ink)}.demo-enquiry-input{width:100%;padding:10px 12px;border:1px solid #ccd9dc;border-radius:8px;background:#fff;color:var(--ink);font-size:14px;resize:vertical}.demo-enquiry-note{font-size:11px;color:#76888f}.demo-enquiry-success{padding:16px;background:#f0f6df;color:#4a6f15;border-radius:9px;font-size:13px;line-height:1.8}.info-dialog{padding:34px 30px 30px;max-width:570px}.info-dialog h2{font-size:29px;padding-right:35px;margin-bottom:18px}.info-dialog-copy{font-size:14px;line-height:1.85}.info-dialog-copy p{margin-block:13px}.info-dialog-copy ul{padding-left:20px;color:var(--muted)}.info-dialog-links{display:flex;gap:11px;flex-wrap:wrap;margin-top:22px}.info-dialog .demo-enquiry{margin-inline:0;margin-bottom:0}.info-dialog .eyebrow{margin-bottom:12px}.info-dialog a:not(.button){text-decoration:underline;text-underline-offset:3px}
.school-detail-heading{margin:0;padding:26px 30px 0;font-size:inherit}.school-detail-heading h2{font-size:32px}.school-detail-heading .school-detail-eyebrow{display:block;margin:0 0 10px}.school-detail-heading .school-detail-location{margin:8px 0 0}.school-detail-heading .school-detail-tags{margin:15px 0 0}#school-dialog-content>h3{font-size:18px;margin:25px 30px 0}.info-dialog .school-offers,.info-dialog .school-dialog-note,.info-dialog .school-enquiry-toggle{margin-inline:0}.school-detail-tags{flex-wrap:wrap}
@media(max-width:640px){.site-dialog{max-height:92dvh;border-radius:15px}.school-detail-heading{padding:23px 22px 0}.school-detail-heading h2{font-size:27px}.school-detail-copy,.school-offers,.school-dialog-note,.school-enquiry-toggle,.demo-enquiry{margin-inline:22px}#school-dialog-content>h3{margin-inline:22px}.school-detail-image{height:190px}.info-dialog{padding:30px 22px 24px}.info-dialog h2{font-size:25px}}