/* Education Expo Kuwait — landing page. Palette: ink indigo, deep night, chalk, sky, school-bus sun. One typeface: Cairo. */
@font-face { font-family: Cairo; font-weight: 400; font-display: swap; src: url(fonts/cairo-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
@font-face { font-family: Cairo; font-weight: 600; font-display: swap; src: url(fonts/cairo-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
@font-face { font-family: Cairo; font-weight: 800; font-display: swap; src: url(fonts/cairo-latin-800-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
@font-face { font-family: Cairo; font-weight: 400; font-display: swap; src: url(fonts/cairo-arabic-400-normal.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: Cairo; font-weight: 600; font-display: swap; src: url(fonts/cairo-arabic-600-normal.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: Cairo; font-weight: 800; font-display: swap; src: url(fonts/cairo-arabic-800-normal.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF; }

:root {
  --ink: #151a4a; --night: #0c1033; --chalk: #ffffff; --sky: #cfe6ff; --sun: #ffc533; --paper: #eef2fb; --live: #ff5a4e; --mute: #5b6390;
  --step--1: clamp(.84rem, .8rem + .15vw, .94rem); --step-0: clamp(1rem, .95rem + .25vw, 1.14rem); --step-1: clamp(1.2rem, 1.05rem + .7vw, 1.6rem);
  --step-2: clamp(1.6rem, 1.2rem + 1.9vw, 2.6rem); --step-3: clamp(2.2rem, 1.3rem + 4.4vw, 4.9rem);
  --pad: clamp(18px, 5vw, 72px);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; font: 400 var(--step-0)/1.6 Cairo, 'Segoe UI', Tahoma, sans-serif; color: var(--ink); background: var(--chalk); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; border-radius: 6px; }
.vh, .skip:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.skip:focus { position: fixed; inset: 10px auto auto 10px; z-index: 99; background: var(--sun); color: var(--ink); padding: 10px 14px; border-radius: 8px; }

/* buttons */
.btn { font: 600 var(--step-0)/1.2 inherit; font-family: inherit; border: 2px solid transparent; border-radius: 999px; padding: 15px 24px; cursor: pointer; transition: transform .15s ease, background-color .15s ease; text-align: center; }
.btn:active { transform: translateY(1px) scale(.99); }
.btn.sun { background: var(--sun); color: var(--ink); } .btn.sun:hover { background: #ffd563; }
.btn.ink { background: var(--ink); color: var(--chalk); } .btn.ink:hover { background: #222a6b; }
.btn.line { background: transparent; color: var(--chalk); border-color: rgba(255,255,255,.45); } .btn.line:hover { border-color: var(--chalk); }
.btn.small { padding: 10px 16px; font-size: var(--step--1); }
.btn[disabled] { opacity: .6; cursor: progress; }

/* top bar */
.bar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 20px; padding: 12px var(--pad); background: var(--ink); color: var(--chalk); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; line-height: 1.1; }
.brand b { display: block; font-weight: 800; } .brand i { font-style: normal; font-size: var(--step--1); color: var(--sky); }
.links { display: flex; gap: 22px; margin-inline-start: auto; } .links a { text-decoration: none; font-size: var(--step--1); opacity: .86; } .links a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 5px; }
.barEnd { display: flex; gap: 10px; align-items: center; }
.lang { font: 600 var(--step--1) Cairo, sans-serif; background: transparent; color: var(--chalk); border: 1px solid rgba(255,255,255,.4); border-radius: 999px; padding: 8px 14px; cursor: pointer; }

/* hero */
.hero { background: var(--ink); color: var(--chalk); display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(20px, 4vw, 64px); align-items: center; padding: clamp(28px, 5vw, 70px) var(--pad) clamp(40px, 6vw, 90px); overflow: hidden; }
.when { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--sun); font-size: var(--step-0); }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 0 rgba(255,90,78,.7); animation: pulse 2.2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 12px rgba(255,90,78,0); } 100% { box-shadow: 0 0 0 0 rgba(255,90,78,0); } }
h1 { font-size: var(--step-3); line-height: 1.04; font-weight: 800; letter-spacing: -.02em; margin: 14px 0 20px; text-wrap: balance; }
html[dir=rtl] h1 { letter-spacing: 0; line-height: 1.25; }
.lede { font-size: var(--step-1); line-height: 1.45; color: var(--sky); max-width: 34em; }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 34px; }
.count { display: flex; align-items: baseline; gap: clamp(14px, 2.4vw, 30px); flex-wrap: wrap; }
.count dt { font-size: var(--step-2); font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.count dd { font-size: var(--step--1); color: var(--sky); } .count .note dd { opacity: .8; }

/* the doorway: the one loud thing on the page */
.door { perspective: 1400px; justify-self: center; width: min(100%, 520px); }
.arch { position: relative; aspect-ratio: 4 / 5; border-radius: 999px 999px 18px 18px / 46% 46% 18px 18px; overflow: hidden; background: var(--night); box-shadow: 0 0 0 10px #232b70, 0 0 0 12px var(--sun), 0 40px 80px rgba(0,0,0,.5); transform-style: preserve-3d; }
.arch img { position: absolute; inset: -6%; width: 112%; height: 112%; max-width: none; object-fit: cover; object-position: 50% 62%; will-change: transform; }
.leaf { position: absolute; top: 0; bottom: 0; width: 50.5%; background: linear-gradient(90deg, #1b2260, #2a3384); transition: transform 1.5s cubic-bezier(.7, 0, .2, 1) .35s; }
.leaf::after { content: ''; position: absolute; top: 50%; width: 8px; height: 44px; border-radius: 4px; background: var(--sun); }
.leaf.l { left: 0; transform-origin: left center; } .leaf.l::after { right: 14px; }
.leaf.r { right: 0; transform-origin: right center; } .leaf.r::after { left: 14px; }
.door.open .leaf.l { transform: rotateY(-104deg); } .door.open .leaf.r { transform: rotateY(104deg); }
.sill { position: absolute; inset: auto 0 0; height: 22%; background: linear-gradient(transparent, rgba(12,16,51,.75)); pointer-events: none; }
.cap { text-align: center; font-size: var(--step--1); color: var(--sky); opacity: .8; margin-top: 18px; }

/* strip */
.strip { background: var(--sun); color: var(--ink); padding: 14px var(--pad); }
.strip ul { display: flex; flex-wrap: wrap; gap: 8px 34px; justify-content: center; font-weight: 600; }
.strip li::before { content: '✓'; margin-inline-end: 8px; font-weight: 800; }

/* sections */
h2 { font-size: var(--step-2); line-height: 1.12; font-weight: 800; letter-spacing: -.015em; text-wrap: balance; }
html[dir=rtl] h2 { letter-spacing: 0; line-height: 1.3; }
.big { font-size: var(--step-1); line-height: 1.4; max-width: 30em; margin: 14px 0 22px; }
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); align-items: center; padding: clamp(48px, 8vw, 120px) var(--pad); }
.ticks { display: grid; gap: 12px; margin-bottom: 28px; max-width: 34em; }
.ticks li { padding-inline-start: 34px; position: relative; }
.ticks li::before { content: ''; position: absolute; inset-inline-start: 0; top: .42em; width: 18px; height: 18px; border-radius: 50%; background: var(--sun); box-shadow: inset 0 0 0 5px var(--chalk), 0 0 0 2px var(--ink); }
.shot img { border-radius: 22px; box-shadow: 0 30px 60px rgba(21,26,74,.22); }
.shot figcaption { font-size: var(--step--1); color: var(--mute); margin-top: 12px; }

.schools { background: var(--paper); padding: clamp(48px, 8vw, 120px) var(--pad); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 5vw, 70px); align-items: start; }
.seats { background: var(--ink); color: var(--chalk); border-radius: 26px; padding: clamp(20px, 3vw, 34px); display: grid; gap: 14px; justify-items: start; }
.seatGrid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 7px; width: 100%; }
.seatGrid i { aspect-ratio: 1; border-radius: 6px 6px 2px 2px; background: #2a3384; transition: background-color .5s ease, transform .5s ease; }
.seatGrid i.on { background: var(--sun); transform: translateY(-2px); }
.seatLine { font-size: var(--step-0); } .seatLine b { font-size: var(--step-1); font-weight: 800; color: var(--sun); }
.offer { color: var(--sky); }
.steps { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; counter-reset: s; border-top: 2px solid var(--ink); margin-top: 10px; }
.steps li { counter-increment: s; padding: 22px 22px 6px 0; padding-inline: 0 22px; position: relative; }
.steps li::before { content: counter(s); display: block; font-weight: 800; font-size: var(--step-2); line-height: 1; color: var(--ink); -webkit-text-stroke: 0; margin-bottom: 8px; }
.steps h3 { font-size: var(--step-1); font-weight: 800; } .steps p { color: #2e356e; font-size: var(--step-0); }
.plain { grid-column: 1 / -1; max-width: 46em; color: #2e356e; border-inline-start: 4px solid var(--sun); padding-inline-start: 16px; }

.faq { padding: clamp(48px, 8vw, 110px) var(--pad); display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(20px, 5vw, 70px); align-items: start; }
.qa details { border-bottom: 1px solid #cdd5ee; }
.qa summary { cursor: pointer; padding: 18px 0; font-weight: 600; font-size: var(--step-1); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: '+'; font-weight: 400; color: var(--mute); transition: transform .2s ease; } .qa details[open] summary::after { transform: rotate(45deg); }
.qa p { padding: 0 0 20px; max-width: 40em; color: #2e356e; }

.foot { background: var(--night); color: var(--sky); padding: 34px var(--pad) 110px; display: flex; flex-wrap: wrap; gap: 10px 34px; font-size: var(--step--1); }
.foot b { color: var(--chalk); } .foot a { text-underline-offset: 4px; }

/* assistant */
.ask { position: fixed; inset: auto var(--pad) calc(18px + env(safe-area-inset-bottom)) auto; z-index: 40; display: flex; align-items: center; gap: 10px; font: 600 var(--step-0) Cairo, sans-serif; background: var(--chalk); color: var(--ink); border: 2px solid var(--ink); border-radius: 999px; padding: 13px 20px; cursor: pointer; box-shadow: 6px 6px 0 var(--sun); }
html[dir=rtl] .ask { inset: auto auto calc(18px + env(safe-area-inset-bottom)) var(--pad); box-shadow: -6px 6px 0 var(--sun); }
.chat { position: fixed; z-index: 50; inset: auto var(--pad) calc(18px + env(safe-area-inset-bottom)) auto; width: min(400px, calc(100vw - 24px)); height: min(600px, calc(100dvh - 40px)); background: var(--chalk); border: 2px solid var(--ink); border-radius: 22px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 8px 8px 0 var(--sun); }
html[dir=rtl] .chat { inset: auto auto calc(18px + env(safe-area-inset-bottom)) var(--pad); box-shadow: -8px 8px 0 var(--sun); }
.chat[hidden] { display: none; }
.chat header { background: var(--ink); color: var(--chalk); padding: 12px 16px; display: flex; align-items: baseline; gap: 10px; }
.chat header small { color: var(--sky); font-size: var(--step--1); } .chat header button { margin-inline-start: auto; background: none; border: 0; color: inherit; font-size: 26px; line-height: 1; cursor: pointer; padding: 0 4px; }
.log { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: var(--paper); }
.msg { max-width: 86%; padding: 10px 14px; border-radius: 16px; font-size: .97rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.bot { background: var(--chalk); align-self: flex-start; border-end-start-radius: 4px; } .msg.me { background: var(--ink); color: var(--chalk); align-self: flex-end; border-end-end-radius: 4px; }
.msg.wait { color: var(--mute); font-style: italic; }
.chips { display: flex; gap: 8px; padding: 10px 14px 0; flex-wrap: wrap; } .chips:empty { display: none; }
.chips button { font: 600 .85rem Cairo, sans-serif; background: var(--chalk); border: 1.5px solid var(--ink); color: var(--ink); border-radius: 999px; padding: 7px 12px; cursor: pointer; }
#chatForm { display: flex; gap: 8px; padding: 12px 14px 14px; }
#chatIn { flex: 1; min-width: 0; font: inherit; font-size: 1rem; padding: 11px 14px; border-radius: 999px; border: 1.5px solid #b6bfdf; }

/* booking sheet */
.sheet { border: 0; padding: 0; border-radius: 26px; width: min(620px, calc(100vw - 20px)); max-height: calc(100dvh - 20px); color: var(--ink); box-shadow: 0 40px 100px rgba(12,16,51,.5); }
.sheet::backdrop { background: rgba(12,16,51,.72); }
.sheet form, .done { padding: clamp(18px, 4vw, 34px); }
.sheet header { display: flex; justify-content: space-between; gap: 14px; align-items: start; } .sheet header h2 { font-size: var(--step-1); }
.sheet header button { background: none; border: 0; font-size: 30px; line-height: 1; cursor: pointer; color: var(--mute); }
.sheetLead { color: #2e356e; margin: 8px 0 18px; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.f { display: grid; gap: 6px; font-size: var(--step--1); font-weight: 600; } .f.wide { grid-column: 1 / -1; }
.f input, .f select, .f textarea { font: 400 1rem Cairo, sans-serif; padding: 12px 14px; border-radius: 12px; border: 1.5px solid #b6bfdf; background: var(--chalk); color: var(--ink); width: 100%; }
.f input:focus, .f select:focus, .f textarea:focus, #chatIn:focus { outline: 3px solid var(--sun); outline-offset: 1px; border-color: var(--ink); }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sheet[data-kind=parent] .only-school:not(.only-parent), .sheet[data-kind=school] .only-parent, .sheet[data-kind=call] .only-parent { display: none; }
.check { display: flex; gap: 10px; align-items: start; margin-top: 14px; font-size: var(--step--1); } .check input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--ink); flex: none; }
.err { color: #b3261e; font-weight: 600; min-height: 1.4em; margin-top: 10px; font-size: var(--step--1); }
.wideBtn { width: 100%; margin-top: 6px; }
#ts:not(:empty) { margin-top: 14px; }
.done { text-align: center; display: grid; gap: 12px; justify-items: center; } .done[hidden] { display: none; } .ref { color: var(--mute); font-size: var(--step--1); }

/* language switch uses a cross-fade where the browser supports it */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; }

@media (max-width: 900px) {
  .hero, .two, .schools, .faq { grid-template-columns: minmax(0, 1fr); }
  .door { width: min(62%, 300px); order: -1; }
  .links { display: none; } .barEnd { margin-inline-start: auto; }
  .steps { grid-template-columns: 1fr 1fr; } .fields { grid-template-columns: 1fr; }
  .ask span { display: none; } .ask { padding: 15px; }
  .chat { inset: auto 12px calc(12px + env(safe-area-inset-bottom)) 12px !important; width: auto; }
}
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } .bar .btn.small { display: none; } .ctas .btn { width: 100%; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .leaf { transition: none; } .dot { animation: none; } .btn, .seatGrid i { transition: none; } }

.schoolsHead .plain { margin-top: 26px; }

/* ===== 1.8.1 look: aurora light on deep space, glass panels. Colours: space #05061c, cyan #7cf5ff, violet #7c5cff, pink #ff4fd8 ===== */
/* A — Aurora portal: deep space, aurora light, glass */
:root { --ink:#070a24; --night:#04051a; --sun:#7cf5ff; --sky:#c9d2ff; --paper:#0b0f33; --mute:#8f9ad6; }
body { background:#05061c; color:#e9ecff; }
.bar { background:rgba(8,10,40,.55); backdrop-filter:blur(18px) saturate(1.4); border-bottom:1px solid rgba(255,255,255,.08); }
.brand svg path:last-child { stroke:#7cf5ff; }
.hero { position:relative; background:
  radial-gradient(60% 70% at 78% 40%, rgba(124,92,255,.55), transparent 70%),
  radial-gradient(45% 55% at 95% 85%, rgba(255,79,216,.38), transparent 70%),
  radial-gradient(50% 60% at 10% 100%, rgba(34,211,238,.32), transparent 70%), #05061c; min-height:min(92vh,900px); }
.hero::before { content:''; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.55) 1px, transparent 1.4px); background-size:46px 46px; opacity:.16; mask-image:linear-gradient(#000, transparent 85%); pointer-events:none; }
.heroText, .door { position:relative; }
.when { color:#7cf5ff; background:rgba(124,245,255,.08); border:1px solid rgba(124,245,255,.3); padding:7px 16px; border-radius:999px; }
h1 { background:linear-gradient(100deg,#fff 10%,#9fe9ff 45%,#c7a6ff 70%,#ff9be6 95%); -webkit-background-clip:text; background-clip:text; color:transparent; letter-spacing:-.03em; padding-bottom:.08em; }
.btn.sun { background:linear-gradient(100deg,#22d3ee,#7c5cff 55%,#ff4fd8); color:#fff; box-shadow:0 10px 40px rgba(124,92,255,.55), inset 0 0 0 1px rgba(255,255,255,.25); }
.btn.sun:hover { background:linear-gradient(100deg,#4be0f5,#9079ff 55%,#ff74e0); }
.btn.line { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.25); backdrop-filter:blur(10px); }
.count > div:not(.note) { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:18px; padding:14px 20px 10px; min-width:92px; backdrop-filter:blur(10px); box-shadow:inset 0 1px 0 rgba(255,255,255,.18); }
.count dt { background:linear-gradient(#fff,#9fe9ff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.arch { box-shadow:0 0 0 2px rgba(255,255,255,.9), 0 0 0 10px rgba(124,92,255,.25), 0 0 60px 14px rgba(124,92,255,.75), 0 0 140px 40px rgba(34,211,238,.4), 0 60px 90px rgba(0,0,0,.6); }
.door::after { content:''; position:absolute; left:8%; right:8%; bottom:26px; height:46px; border-radius:50%; background:radial-gradient(closest-side, rgba(124,245,255,.75), transparent); filter:blur(14px); z-index:-1; }
.leaf { background:linear-gradient(90deg,rgba(20,24,80,.92),rgba(60,50,150,.92)); backdrop-filter:blur(6px); } .leaf::after { background:#7cf5ff; box-shadow:0 0 16px #7cf5ff; }
.strip { background:linear-gradient(90deg,#22d3ee,#7c5cff,#ff4fd8); color:#fff; }
.two, .faq { background:#05061c; color:#e9ecff; }
.schools { background:radial-gradient(60% 80% at 100% 0, rgba(124,92,255,.25), transparent 70%), #080a2a; color:#e9ecff; }
.shot img { box-shadow:0 0 0 1px rgba(255,255,255,.2), 0 0 80px rgba(124,92,255,.45); }
.ticks li::before { background:#7cf5ff; box-shadow:inset 0 0 0 5px #05061c, 0 0 0 2px #7cf5ff, 0 0 14px #7cf5ff; }
.btn.ink { background:linear-gradient(100deg,#22d3ee,#7c5cff 55%,#ff4fd8); }
.seats { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.16); backdrop-filter:blur(14px); box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 30px 80px rgba(0,0,0,.4); }
.seatGrid i { background:rgba(255,255,255,.1); } .seatGrid i.on { background:#7cf5ff; box-shadow:0 0 14px #7cf5ff; } .seatLine b { color:#7cf5ff; }
.steps { border-top:1px solid rgba(255,255,255,.2); } .steps li::before { background:linear-gradient(#7cf5ff,#c7a6ff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.steps p, .plain, .qa p, .sheetLead { color:#b9c1f5; } .plain { border-color:#7c5cff; }
.qa details { border-color:rgba(255,255,255,.14); } .shot figcaption { color:#8f9ad6; }
.foot { background:#03041a; border-top:1px solid rgba(255,255,255,.08); }
.ask { background:linear-gradient(100deg,#22d3ee,#7c5cff); color:#fff; border-color:transparent; box-shadow:0 10px 40px rgba(124,92,255,.6); }

html { background:#05061c; }
.sheet[data-kind=sponsor] .only-parent, .sheet[data-kind=sponsor] .only-type { display:none; }
.links a { color:#e9ecff; }
/* hero */
.hero { isolation:isolate; align-items:center; padding-bottom:clamp(70px,8vw,120px); }
.heroBg { display:none; }
.heroBg img { width:100%; height:100%; object-fit:cover; object-position:50% 100%; opacity:.34; filter:blur(3px) saturate(1.3); transform:scale(1.06); mask-image:linear-gradient(90deg,transparent 5%,#000 70%); }
.hero::after { content:''; position:absolute; z-index:-1; width:70vmax; height:70vmax; left:calc(var(--mx,70%) - 35vmax); top:calc(var(--my,40%) - 35vmax); background:radial-gradient(closest-side, rgba(124,92,255,.28), transparent 70%); pointer-events:none; transition:left .5s ease-out, top .5s ease-out; }
@keyframes drift { 0%,100% { background-position:0% 50%; } 50% { background-position:100% 50%; } }
h1 { background-size:220% 100%; animation:drift 9s ease-in-out infinite; }
.reassure { color:#b9c1f5; font-size:var(--step--1); margin:-18px 0 30px; }
.reassure::before { content:''; display:inline-block; width:8px; height:8px; border-radius:50%; background:#7cf5ff; box-shadow:0 0 10px #7cf5ff; margin-inline-end:10px; vertical-align:middle; }
.door { width:min(100%,640px); }
.arch { aspect-ratio:5/4.6; border-radius:999px 999px 26px 26px / 62% 62% 26px 26px; transition:transform .25s ease-out; }
.arch img { object-position:50% 46%; }
.arch::before { content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(124,92,255,.25), transparent 35%, transparent 70%, rgba(5,6,28,.8)), radial-gradient(60% 40% at 50% 40%, rgba(124,245,255,.16), transparent); pointer-events:none; mix-blend-mode:screen; }
.leaf { z-index:2; }
.liveTag { position:absolute; z-index:3; top:22%; inset-inline-start:50%; transform:translateX(-50%); display:inline-flex; gap:8px; align-items:center; font-size:var(--step--1); font-weight:600; color:#fff; background:rgba(5,6,28,.6); border:1px solid rgba(255,255,255,.25); padding:5px 12px; border-radius:999px; backdrop-filter:blur(8px); white-space:nowrap; }
html[dir=rtl] .heroBg img { mask-image:linear-gradient(270deg,transparent 5%,#000 70%); }
html[dir=rtl] .liveTag { transform:translateX(50%); }
.chip { position:absolute; z-index:4; font-size:var(--step--1); font-weight:600; color:#fff; background:rgba(20,22,70,.55); border:1px solid rgba(255,255,255,.22); box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 14px 40px rgba(0,0,0,.45); padding:10px 16px; border-radius:16px; backdrop-filter:blur(14px); animation:bob 6s ease-in-out infinite; }
.chip::before { content:''; display:inline-block; width:8px; height:8px; border-radius:50%; margin-inline-end:9px; background:#7cf5ff; box-shadow:0 0 12px #7cf5ff; }
.chip.c1 { top:30%; inset-inline-start:-9%; } .chip.c2 { top:58%; inset-inline-end:-7%; animation-delay:-2s; } .chip.c2::before { background:#ff4fd8; box-shadow:0 0 12px #ff4fd8; } .chip.c3 { bottom:17%; inset-inline-start:-3%; animation-delay:-4s; } .chip.c3::before { background:#c7a6ff; box-shadow:0 0 12px #c7a6ff; }
@keyframes bob { 50% { transform:translateY(-9px); } }
.runby { position:absolute; inset:auto auto 22px var(--pad); display:flex; align-items:center; gap:10px; font-size:var(--step--1); color:#b9c1f5; margin:0; }
html[dir=rtl] .runby { inset:auto var(--pad) 22px auto; }
.runby b { color:#fff; font-weight:800; letter-spacing:.01em; } .runby.small { position:static; }
.awMark { display:inline-block; height:28px; } .awMark img { height:28px; width:auto; display:block; } .awMark:empty { display:none; }
/* ticker */
.ticker { overflow:hidden; background:#080a2a; border-block:1px solid rgba(255,255,255,.1); padding:14px 0; white-space:nowrap; }
.track { display:inline-flex; animation:slide 38s linear infinite; } .track span { padding-inline-end:3em; font-weight:600; color:#c9d2ff; letter-spacing:.02em; }
@keyframes slide { to { transform:translateX(-50%); } } html[dir=rtl] .track { animation-name:slideR; } @keyframes slideR { to { transform:translateX(50%); } }
/* inside the hall */
.inside { padding:clamp(40px,7vw,100px) var(--pad); background:#05061c; color:#e9ecff; }
.bento { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-top:28px; }
.bento li { position:relative; padding:26px; border-radius:24px; background:linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.14); box-shadow:inset 0 1px 0 rgba(255,255,255,.18); overflow:hidden; min-height:170px; transition:transform .25s ease, border-color .25s ease; }
.bento li::before { content:''; position:absolute; width:220px; height:220px; border-radius:50%; inset:auto -60px -110px auto; background:radial-gradient(closest-side, rgba(124,92,255,.5), transparent); }
.bento li:nth-child(2)::before, .bento li:nth-child(5)::before { background:radial-gradient(closest-side, rgba(34,211,238,.45), transparent); } .bento li:nth-child(3)::before, .bento li:nth-child(6)::before { background:radial-gradient(closest-side, rgba(255,79,216,.4), transparent); }
.bento li:hover { transform:translateY(-4px); border-color:rgba(124,245,255,.6); }
.bento .wide { grid-column:span 2; } .bento h3 { font-size:var(--step-1); font-weight:800; margin-bottom:8px; position:relative; } .bento p { color:#b9c1f5; position:relative; max-width:34em; }
/* schools */
.why { display:grid; gap:14px; margin:6px 0 26px; } .why li { display:grid; gap:2px; padding-inline-start:18px; border-inline-start:2px solid #7cf5ff; } .why b { font-weight:800; color:#fff; } .why span { color:#b9c1f5; }
.price { display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; } .price s { color:#8f9ad6; font-size:var(--step-1); } .price b { font-size:var(--step-3); line-height:1; font-weight:800; background:linear-gradient(100deg,#7cf5ff,#c7a6ff,#ff9be6); -webkit-background-clip:text; background-clip:text; color:transparent; } .price span { color:#c9d2ff; }
.seatGrid i { transition:background-color .4s ease, box-shadow .4s ease, transform .4s ease; } .seatGrid i.next { box-shadow:0 0 0 2px #7cf5ff, 0 0 18px #7cf5ff; animation:beat 1.6s ease-in-out infinite; } @keyframes beat { 50% { transform:scale(1.14); } }
.tiny { font-size:var(--step--1); color:#8f9ad6; }
.versus { grid-column:1/-1; margin-top:26px; } .versus h3 { font-size:var(--step-1); font-weight:800; margin-bottom:14px; }
.versus table { width:100%; border-collapse:separate; border-spacing:0; font-size:var(--step-0); } .versus th, .versus td { text-align:start; padding:14px 16px; border-bottom:1px solid rgba(255,255,255,.1); vertical-align:top; }
.versus thead th { font-weight:600; color:#8f9ad6; } .versus tbody th { font-weight:600; color:#c9d2ff; width:18%; } .versus td:nth-child(2) { color:#8f9ad6; }
.versus td:nth-child(3), .versus thead th:nth-child(3) { background:rgba(124,245,255,.07); color:#fff; font-weight:600; border-inline:1px solid rgba(124,245,255,.35); } .versus thead th:nth-child(3) { border-top:1px solid rgba(124,245,255,.35); border-radius:14px 14px 0 0; color:#7cf5ff; } .versus tbody tr:last-child td:nth-child(3) { border-bottom:1px solid rgba(124,245,255,.35); border-radius:0 0 14px 14px; }
/* sponsors */
.sponsors { padding:clamp(48px,8vw,120px) var(--pad); background:radial-gradient(50% 70% at 0 100%, rgba(255,79,216,.2), transparent 70%), radial-gradient(50% 70% at 100% 0, rgba(34,211,238,.18), transparent 70%), #05061c; color:#e9ecff; }
.tiers { display:grid; grid-template-columns:1.25fr 1fr 1fr; gap:18px; margin:30px 0; }
.tiers li { position:relative; padding:28px; border-radius:26px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.16); box-shadow:inset 0 1px 0 rgba(255,255,255,.2); }
.tiers .top { background:linear-gradient(150deg, rgba(124,92,255,.35), rgba(255,79,216,.18)); border-color:rgba(255,255,255,.4); box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 0 80px rgba(124,92,255,.45); }
.tiers h3 { font-size:var(--step-1); font-weight:800; margin:12px 0 8px; } .tiers p { color:#c9d2ff; }
.tiers .left { display:inline-flex; gap:6px; align-items:baseline; font-size:var(--step--1); color:#7cf5ff; background:rgba(124,245,255,.1); border:1px solid rgba(124,245,255,.35); padding:4px 12px; border-radius:999px; } .tiers .left b { font-weight:800; font-size:var(--step-0); }
.spCta { display:flex; gap:18px; align-items:center; flex-wrap:wrap; }
/* closing band */
.last { position:relative; isolation:isolate; text-align:center; padding:clamp(70px,10vw,150px) var(--pad); color:#fff; overflow:hidden; display:grid; justify-items:center; gap:8px; }
.lastBg { position:absolute; inset:0; z-index:-1; } .lastBg img { width:100%; height:100%; object-fit:cover; object-position:50% 85%; opacity:.5; } .lastBg::after { content:''; position:absolute; inset:0; background:radial-gradient(60% 80% at 50% 50%, rgba(124,92,255,.5), rgba(5,6,28,.92) 75%); }
.last h2 { font-size:var(--step-3); max-width:14em; } .last .big { color:#c9d2ff; margin-inline:auto; } .last .ctas { justify-content:center; margin:14px 0 0; }
/* dark forms and assistant */
.sheet { background:#0b0e36; color:#e9ecff; border:1px solid rgba(255,255,255,.18); box-shadow:0 0 120px rgba(124,92,255,.5), 0 40px 100px rgba(0,0,0,.6); } .sheet::backdrop { background:rgba(3,4,20,.78); backdrop-filter:blur(6px); }
.sheet header button { color:#c9d2ff; } .f input, .f select, .f textarea, #chatIn { background:rgba(255,255,255,.06); color:#fff; border-color:rgba(255,255,255,.22); } .f select option { color:#0b0e36; }
.f input:focus, .f select:focus, .f textarea:focus, #chatIn:focus { outline-color:#7cf5ff; border-color:#7cf5ff; } .check input { accent-color:#7c5cff; } .err { color:#ff9aa8; } .ref { color:#8f9ad6; }
.chat { background:#0b0e36; color:#e9ecff; border:1px solid rgba(255,255,255,.2); box-shadow:0 0 80px rgba(124,92,255,.5); } .chat header { background:linear-gradient(100deg,#22d3ee,#7c5cff); } .chat header small { color:#eaf6ff; }
.log { background:#070a28; } .msg.bot { background:rgba(255,255,255,.08); } .msg.me { background:linear-gradient(100deg,#22d3ee,#7c5cff); } .msg.wait { color:#8f9ad6; }
.chips button { background:transparent; color:#c9d2ff; border-color:rgba(255,255,255,.3); } html[dir=rtl] .ask, html[dir=rtl] .chat { box-shadow:0 0 60px rgba(124,92,255,.5); }
:focus-visible { outline-color:#7cf5ff; } .skip:focus { background:#7cf5ff; color:#05061c; }
.rise { opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; } .rise.in { opacity:1; transform:none; }
@media (max-width:900px) {
  .door { width:min(88%,460px); order:-1; } .chip { font-size:.78rem; padding:7px 11px; } .chip.c1 { inset-inline-start:-6%; } .chip.c2 { inset-inline-end:-6%; } .chip.c3 { inset-inline-start:-4%; }
  .bento { grid-template-columns:1fr 1fr; } .tiers { grid-template-columns:1fr; } .runby { position:static; grid-column:1/-1; }
  .versus th, .versus td { padding:10px 8px; font-size:var(--step--1); } .heroBg img { mask-image:linear-gradient(#000 40%,transparent); }
}
@media (max-width:520px) { .bento { grid-template-columns:1fr; } .bento .wide { grid-column:auto; } }
@media (prefers-reduced-motion: reduce) { h1, .chip, .track, .seatGrid i.next { animation:none; } .rise { opacity:1; transform:none; transition:none; } .hero::after { transition:none; } .arch { transition:none; } }

/* hero picture: a real stand with the visitor's own name on it, shown as a tilted glass window with two smaller views */
.door { width:min(100%,700px); padding:0 0 10px; }
.arch { aspect-ratio:16/10.4; border-radius:28px; box-shadow:0 0 0 1.5px rgba(255,255,255,.85), 0 0 0 9px rgba(124,92,255,.22), 0 0 70px 10px rgba(124,92,255,.65), 0 0 150px 40px rgba(34,211,238,.3), 0 60px 90px rgba(0,0,0,.6); }
.arch img { inset:-3%; width:106%; height:106%; object-position:50% 50%; }
.arch::before { background:linear-gradient(180deg, rgba(124,92,255,.12), transparent 30%, transparent 78%, rgba(5,6,28,.45)); mix-blend-mode:normal; }
.mini { position:absolute; z-index:3; width:31%; height:auto; border-radius:16px; box-shadow:0 0 0 1.5px rgba(255,255,255,.8), 0 20px 50px rgba(0,0,0,.6), 0 0 40px rgba(124,92,255,.5); animation:bob 7s ease-in-out infinite; }
.mini.m1 { inset:auto auto 4% -7%; animation-delay:-3s; } .mini.m2 { inset:-9% -6% auto auto; width:27%; }
html[dir=rtl] .mini.m1 { inset:auto -7% 4% auto; } html[dir=rtl] .mini.m2 { inset:-9% auto auto -6%; }
.chip.c1 { top:38%; inset-inline:auto -8%; } .chip.c2 { top:auto; bottom:22%; inset-inline:auto 4%; } .chip.c3 { top:14%; bottom:auto; inset-inline:-6% auto; }
.cap { margin-top:26px; max-width:34em; margin-inline:auto; }
/* who is reading: the parent view or the school view */
.aud { display:inline-flex; padding:5px; gap:4px; border-radius:999px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); margin-bottom:18px; }
.aud button { font:600 var(--step--1) Cairo, sans-serif; color:#c9d2ff; background:transparent; border:0; border-radius:999px; padding:9px 18px; cursor:pointer; transition:background-color .2s ease, color .2s ease; }
.aud button[aria-pressed=true] { background:linear-gradient(100deg,#22d3ee,#7c5cff); color:#fff; box-shadow:0 6px 24px rgba(124,92,255,.5); }
.when { display:flex; width:fit-content; }
body[data-aud=parent] .forSchool, body[data-aud=school] .forParent { display:none; }
a.btn { text-decoration:none; display:inline-block; }
.lastBg img { object-position:50% 40%; opacity:.6; }
@media (max-width:900px) { .mini.m2 { display:none; } .mini.m1 { width:36%; inset:auto auto -3% -5%; } .chip.c1 { inset-inline:auto -5%; } .chip.c3 { inset-inline:-4% auto; top:8%; } .door { width:min(92%,520px); margin-bottom:10px; } }
@media (prefers-reduced-motion: reduce) { .mini { animation:none; } }
.mini.m1 { inset:auto auto 16% -9%; } html[dir=rtl] .mini.m1 { inset:auto -9% 16% auto; }
.chip.c2 { bottom:-16px; inset-inline:auto 8%; } .chip.c1 { top:30%; }
@media (max-width:900px) { .mini.m1 { display:none; } .chip.c3 { display:none; } .chip.c1 { top:-14px; inset-inline:auto 4%; } .chip.c2 { bottom:-14px; inset-inline:4% auto; } .cap { margin-top:30px; } }
.chip.c2 { top:66%; bottom:auto; inset-inline:auto -7%; }
@media (max-width:900px) { .chip.c2 { display:none; } }
body[data-aud=parent] .chip.c3 { display:none; }

/* ===== the expo's main page and the registration pages ===== */
.hub .hero { grid-template-columns:minmax(0,1fr); text-align:center; justify-items:center; min-height:auto; padding-top:clamp(40px,7vw,90px); }
.hub .hero h1 { max-width:13em; } .hub .hero .lede { margin-inline:auto; } .hub .hero .ctas { justify-content:center; } .hub .hero .count { justify-content:center; }
.halls { padding:clamp(30px,6vw,80px) var(--pad); background:#05061c; color:#e9ecff; }
.hallGrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:16px; margin-top:26px; }
.hall { position:relative; text-align:start; font:inherit; color:inherit; cursor:pointer; padding:22px; border-radius:22px; background:linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.14); box-shadow:inset 0 1px 0 rgba(255,255,255,.18); overflow:hidden; transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease; display:grid; gap:8px; min-height:190px; align-content:start; }
.hall::before { content:''; position:absolute; inset:auto -70px -120px auto; width:230px; height:230px; border-radius:50%; background:radial-gradient(closest-side, hsl(var(--hue) 90% 62% / .55), transparent); transition:transform .4s ease; }
.hall:hover, .hall:focus-visible { transform:translateY(-5px); border-color:hsl(var(--hue) 90% 70%); box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 20px 60px hsl(var(--hue) 90% 50% / .35); } .hall:hover::before { transform:scale(1.35); }
.hall .glyph { width:46px; height:46px; border-radius:14px; display:grid; place-items:center; font-weight:800; font-size:1.2rem; color:#05061c; background:linear-gradient(135deg, hsl(var(--hue) 95% 75%), hsl(calc(var(--hue) + 50) 95% 70%)); box-shadow:0 0 24px hsl(var(--hue) 90% 60% / .6); }
.hall h3 { font-size:var(--step-1); font-weight:800; position:relative; } .hall p { color:#b9c1f5; font-size:var(--step--1); position:relative; } .hall .tag { position:relative; justify-self:start; font-size:.78rem; font-weight:600; padding:3px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.25); color:#c9d2ff; margin-top:auto; } .hall .tag.live { color:#05061c; background:#7cf5ff; border-color:transparent; }
.plans { padding:clamp(40px,7vw,100px) var(--pad); background:#080a2a; color:#e9ecff; }
.planGrid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-top:26px; }
.plan { padding:24px; border-radius:24px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.15); display:grid; gap:8px; align-content:start; } .plan.best { background:linear-gradient(150deg, rgba(124,92,255,.35), rgba(255,79,216,.16)); border-color:rgba(255,255,255,.4); box-shadow:0 0 70px rgba(124,92,255,.4); }
.plan h3 { font-size:var(--step-1); font-weight:800; } .plan .was { color:#8f9ad6; text-decoration:line-through; } .plan .now { font-size:var(--step-2); font-weight:800; line-height:1; background:linear-gradient(100deg,#7cf5ff,#c7a6ff,#ff9be6); -webkit-background-clip:text; background-clip:text; color:transparent; } .plan small { color:#b9c1f5; } .plan ul { display:grid; gap:6px; margin-top:8px; color:#c9d2ff; font-size:var(--step--1); } .plan li::before { content:'✓'; color:#7cf5ff; margin-inline-end:8px; }
.demo { padding:clamp(40px,7vw,100px) var(--pad); background:#05061c; color:#e9ecff; display:grid; grid-template-columns:1fr 1fr; gap:18px; } .demo h2 { grid-column:1/-1; }
.demo .card { padding:28px; border-radius:26px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.16); display:grid; gap:12px; justify-items:start; } .demo .card p { color:#b9c1f5; }
.track5 { display:grid; grid-template-columns:repeat(5,1fr); gap:0; margin-top:26px; counter-reset:s; } .track5 li { position:relative; padding-top:34px; padding-inline-end:14px; color:#b9c1f5; font-size:var(--step--1); } .track5 li b { display:block; color:#fff; font-size:var(--step-0); }
.track5 li::before { content:''; position:absolute; top:10px; inset-inline:0; height:2px; background:rgba(255,255,255,.18); } .track5 li::after { content:''; position:absolute; top:3px; inset-inline-start:0; width:16px; height:16px; border-radius:50%; background:#0b0e36; border:2px solid #7cf5ff; box-shadow:0 0 14px #7cf5ff; }
.track5 li.done::after { background:#7cf5ff; } .track5 li.done::before { background:linear-gradient(90deg,#7cf5ff,#7c5cff); } .track5 li.now::after { animation:beat 1.6s ease-in-out infinite; background:#ff4fd8; border-color:#ff4fd8; box-shadow:0 0 18px #ff4fd8; }
/* registration */
.wiz { max-width:880px; margin:0 auto; padding:clamp(24px,5vw,60px) var(--pad) 120px; color:#e9ecff; }
.wizCard { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.16); border-radius:28px; padding:clamp(18px,4vw,36px); box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 0 90px rgba(124,92,255,.25); backdrop-filter:blur(14px); }
.prog { display:flex; gap:8px; margin:18px 0 26px; } .prog i { flex:1; height:6px; border-radius:6px; background:rgba(255,255,255,.14); transition:background .4s ease; } .prog i.on { background:linear-gradient(90deg,#22d3ee,#7c5cff,#ff4fd8); box-shadow:0 0 14px rgba(124,92,255,.7); }
.stepNo { color:#7cf5ff; font-weight:600; font-size:var(--step--1); } .wiz h1 { font-size:var(--step-2); animation:none; margin:6px 0 8px; } .wiz .lede { font-size:var(--step-0); margin-bottom:22px; }
.pick { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:10px; } .pick label { position:relative; display:grid; gap:2px; padding:14px; border-radius:16px; border:1.5px solid rgba(255,255,255,.2); background:rgba(255,255,255,.04); cursor:pointer; font-weight:600; transition:border-color .2s ease, background .2s ease; } .pick label small { font-weight:400; color:#b9c1f5; }
.pick input { position:absolute; opacity:0; } .pick label:has(input:checked) { border-color:#7cf5ff; background:rgba(124,245,255,.1); box-shadow:0 0 24px rgba(124,245,255,.35); } .pick label:has(input:focus-visible) { outline:3px solid #7cf5ff; outline-offset:2px; }
.wiz h2 { font-size:var(--step-0); margin:22px 0 10px; color:#c9d2ff; font-weight:600; }
.nav { display:flex; justify-content:space-between; gap:12px; margin-top:26px; } .nav .btn.line { background:transparent; }
.drop { border:2px dashed rgba(255,255,255,.3); border-radius:18px; padding:18px; display:grid; gap:6px; justify-items:start; transition:border-color .2s ease, background .2s ease; margin-bottom:12px; } .drop.over { border-color:#7cf5ff; background:rgba(124,245,255,.08); } .drop.ok { border-style:solid; border-color:#7cf5ff; }
.drop b { font-weight:600; } .drop small { color:#b9c1f5; } .drop input { position:absolute; width:1px; height:1px; opacity:0; } .drop .pickFile { font:600 var(--step--1) Cairo, sans-serif; color:#05061c; background:#7cf5ff; border:0; border-radius:999px; padding:8px 16px; cursor:pointer; }
.drop .meter { width:100%; height:6px; border-radius:6px; background:rgba(255,255,255,.14); overflow:hidden; } .drop .meter i { display:block; height:100%; width:0; background:linear-gradient(90deg,#22d3ee,#7c5cff); transition:width .2s linear; } .drop .state { font-size:var(--step--1); color:#7cf5ff; min-height:1.3em; } .drop .state.bad { color:#ff9aa8; }
.sum { display:grid; grid-template-columns:auto 1fr; gap:6px 18px; font-size:var(--step--1); } .sum dt { color:#8f9ad6; } .sum dd { margin:0; overflow-wrap:anywhere; }
.total { display:flex; align-items:baseline; gap:12px; margin-top:18px; padding-top:18px; border-top:1px solid rgba(255,255,255,.15); } .total b { font-size:var(--step-2); font-weight:800; color:#7cf5ff; } .total s { color:#8f9ad6; }
.codeIn { letter-spacing:.5em; font-size:1.4rem !important; text-align:center; max-width:240px; }
@media (max-width:900px) { .planGrid { grid-template-columns:1fr 1fr; } .demo { grid-template-columns:1fr; } .track5 { grid-template-columns:1fr; } .track5 li { padding:0 0 18px 30px; padding-inline:30px 0; } .track5 li::before { inset:0 auto 0 7px; width:2px; height:auto; top:0; } html[dir=rtl] .track5 li::before { inset:0 7px 0 auto; } .track5 li::after { top:2px; } }
@media (max-width:520px) { .planGrid { grid-template-columns:1fr; } }
.full { grid-column:1/-1; } .startW { text-align:start; width:100%; display:flex; justify-content:space-between; gap:14px; } p.startW { display:block; }
.sheet[data-kind=pass] .only-walk { display:none; }
.demo .card .btn.line { background:transparent; }