/* RoadAcademy landing page. The tokens are the app's (apps/mobile/lib/app/theme.dart); the badge's
   navy is the one extra, for the night-time sections. */

@font-face {
  font-family: "RoadAcademy";
  src: url("/assets/fonts/nunito.woff") format("woff");
  font-weight: 200 1000;
  font-display: swap;
}

@font-face {
  font-family: "RoadAcademy";
  src: url("/assets/fonts/noto-sans-armenian.woff") format("woff");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0530-058F, U+FB13-FB17;
}

:root {
  --sky: #DCF0FF;
  --sky-deep: #9DD3FF;
  --navy: #14315C;
  --navy-soft: #52709A;
  --night: #0C2355;
  --yellow: #FFC72C;
  --green: #2FA96B;
  --red: #E5484D;
  --blue: #2F7DE1;
  --asphalt: #434E5F;
  --land: #CFEBD0;
  --line: #E3ECF6;
  --paper: #FFFFFF;

  --font: "RoadAcademy", "Nunito", "Noto Sans Armenian", system-ui, sans-serif;
  --gutter: clamp(16px, 4vw, 32px);
  --max: 1180px;
  --radius: 11px;
  /* The space above and below a section: the 64-96px band marketing pages use on a desktop, 48px on a phone. */
  --section: clamp(40px, 5vw, 64px);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--navy);
  font-family: var(--font);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.6;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
p { margin: 0; }
button { font: inherit; color: inherit; }
a { color: inherit; }

:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 50;
  background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 8px; text-decoration: none;
}
.skip:focus { top: 12px; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

.h2 {
  margin: 0;
  font-size: clamp(2rem, 4.4vw, 3.25rem);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
:lang(hy) .h2 { font-weight: 800; letter-spacing: -0.01em; font-size: clamp(1.8rem, 3.8vw, 2.8rem); }

.h3 {
  margin: 0 0 6px;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.25;
  text-wrap: balance;
}

.lead {
  margin-top: 14px;
  max-width: 34em;
  color: var(--navy-soft);
  font-size: 1.1875rem;
  text-wrap: pretty;
}

/* ---------------------------------------------------------------- nav */

.nav {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--sky) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
}

.nav__inner {
  display: flex; align-items: center; gap: 24px;
  max-width: var(--max); margin: 0 auto; padding: 12px var(--gutter);
}

.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
/* Rounded like the app draws it (BrandMark clips at 23% of its size). */
.brand__mark, .foot__brand img { border-radius: 23%; }
.brand__mark { width: 40px; height: 40px; }
.brand__name { font-size: 1.25rem; font-weight: 900; letter-spacing: -0.02em; }

.nav__links { display: flex; gap: 22px; margin-left: auto; }
.nav__links a { text-decoration: none; font-weight: 700; color: var(--navy-soft); }
.nav__links a:hover { color: var(--navy); }

.lang {
  display: flex; padding: 3px; gap: 2px;
  background: var(--paper); border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--line);
}
.lang__btn {
  padding: 5px 12px; border-radius: 999px; text-decoration: none;
  font-size: .875rem; font-weight: 800; color: var(--navy-soft);
}
.lang__btn:hover { color: var(--navy); }
.lang__btn[aria-current] { background: var(--navy); color: #fff; }

/* The links and the language switch lay out in the bar as if the panel were not there. */
.nav__panel { display: contents; }
.nav__menu { display: none; }

/* On a phone or a tablet the bar has room for the badge and one button: the links and the language switch fold
   into a panel under it, which the script opens and closes. The bar needs about 1100px in Armenian before its
   first link stops wrapping; folding at 760px left a tablet scrolling sideways by up to 140px. */
@media (max-width: 1100px) {
  .brand__name { font-size: 1.125rem; }
  .nav__panel { display: none; }
  .nav.is-open .nav__panel {
    position: absolute; left: 0; right: 0; top: 100%;
    display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
    padding: 4px var(--gutter) 20px;
    background: var(--sky); box-shadow: 0 16px 24px -18px rgba(20, 49, 92, .55);
  }
  .nav.is-open .nav__links { display: flex; flex-direction: column; gap: 0; align-self: stretch; margin: 0; }
  .nav.is-open .nav__links a { padding: 13px 0; border-bottom: 1px solid color-mix(in srgb, var(--navy) 10%, transparent); font-size: 1.0625rem; color: var(--navy); }
  .nav__menu {
    display: grid; place-items: center; width: 42px; height: 42px; margin-left: auto; padding: 0;
    border: 0; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer;
  }
  .nav__menu svg { width: 20px; height: 20px; fill: none; stroke: var(--navy); stroke-width: 2.2; stroke-linecap: round; }
  .nav__close, .nav.is-open .nav__bars { display: none; }
  .nav.is-open .nav__close { display: inline; }
  .nav.is-open { background: var(--sky); }
}

/* ---------------------------------------------------------------- hero */

.hero {
  position: relative;
  background: linear-gradient(180deg, var(--sky) 0%, #EAF6FF 62%, var(--paper) 100%);
  padding: clamp(28px, 5vw, 64px) 0 0;
  overflow: hidden;
}

.hero__clouds { position: absolute; inset: 0 0 auto; width: 100%; height: 400px; pointer-events: none; }

.hero__inner {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: clamp(28px, 5vw, 72px); align-items: center;
  max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter);
}

/* The copy starts level with the top of the game beside it, not centred against its full height. */
.hero__copy { align-self: start; }

.hero__market {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 14px 6px 10px; border-radius: 999px; background: rgba(255, 255, 255, .7);
  font-size: .9375rem; font-weight: 800; color: var(--navy);
}

.hero__langs { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--blue); stroke-width: 2; stroke-linejoin: round; }

.hero__title {
  margin: 18px 0 0;
  font-size: clamp(2.5rem, 5.6vw, 4.5rem);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
:lang(hy) .hero__title { font-size: clamp(2.1rem, 4.1vw, 3.4rem); font-weight: 800; letter-spacing: -0.01em; line-height: 1.1; }
:lang(ru) .hero__title { font-size: clamp(2.3rem, 5vw, 4.1rem); }

.hero__lead {
  margin-top: 20px; max-width: 31em;
  font-size: 1.1875rem; color: var(--navy-soft); text-wrap: pretty;
}

/* The two badges are one width, the wider one's, whatever their words in each language; on a phone too narrow for
   both they stack, still one width. */
.stores { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; width: max-content; max-width: 100%; margin-top: 30px; }
.stores--center { margin-inline: auto; }
@media (max-width: 420px) {
  .stores { grid-template-columns: minmax(0, 1fr); }
}

.store {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 18px 9px 14px; border-radius: 12px;
  background: var(--navy); color: #fff; text-decoration: none;
  cursor: default; user-select: none;
}
.store--light { background: #fff; color: var(--navy); }
.store[href] { cursor: pointer; transition: transform .15s; }
.store[href]:hover { transform: translateY(-2px); }
.store__icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.store__icon--brand { width: 26px; height: 26px; fill: currentColor; stroke: none; }
.store__text { display: flex; flex-direction: column; line-height: 1.15; }
.store__text small { font-size: .75rem; font-weight: 700; opacity: .7; }
.store__text b { font-size: 1.0625rem; font-weight: 900; }

/* ---------------------------------------------------------------- the junction */

.pz {
  position: relative;
  background: var(--paper);
  border-radius: 22px;
  box-shadow: 0 1px 0 rgba(20, 49, 92, .06), 0 24px 60px -24px rgba(20, 49, 92, .35);
  overflow: hidden;
}

.pz__bar {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--line);
  font-size: .875rem; font-weight: 800;
}

.pz__dots { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pz__dots li { width: 22px; height: 6px; border-radius: 3px; background: var(--line); transition: background .3s; }
.pz__dots li.is-current { background: var(--sky-deep); }
.pz__dots li.is-right { background: var(--green); }
.pz__dots li.is-wrong { background: var(--red); }

.pz__round { min-width: 0; margin-right: auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--navy-soft); }

/* The two counters the app's home screen shows, pulsing when they move. */
.pz__pill {
  flex: none; display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px 3px 7px; border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.pz__pill svg { width: 16px; height: 16px; }
.pz__pill--xp { background: #FFF4D1; }
.pz__pill--xp svg { fill: var(--yellow); }
.pz__pill--fuel { background: #E3F5EC; }
.pz__pill--fuel svg { fill: none; stroke: var(--green); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pz__pill--fuel.is-low { background: #FDE7E8; }
.pz__pill--fuel.is-low svg { stroke: var(--red); }
.pz__pill.is-bump b { animation: bump .45s ease; display: inline-block; }
@keyframes bump { 40% { transform: scale(1.3); } }

.pz__stage { background: var(--asphalt); }
.pz__svg { width: 100%; height: auto; aspect-ratio: 1; }
.pz__trees circle { fill: #86C98A; stroke: #6CB472; stroke-width: 4; }

.intent { fill: none; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 2 11; opacity: .95; transition: opacity .3s; }
.pz.is-answered .intent { opacity: 0; }

.car { cursor: pointer; outline: none; }
.pz.is-answered .car { cursor: default; }
.car__ring { fill: none; stroke: #fff; stroke-width: 3; stroke-dasharray: 6 7; opacity: 0; transition: opacity .2s; }
.car:hover .car__ring, .car:focus-visible .car__ring { opacity: .9; }
.pz.is-answered .car__ring { opacity: 0; }
.car.is-right .car__ring { opacity: 1; stroke: var(--green); stroke-dasharray: none; stroke-width: 5; }
.car.is-wrong .car__ring { opacity: 1; stroke: var(--red); stroke-dasharray: none; stroke-width: 5; }

.car__blink { fill: #FFB020; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { fill: transparent; } }

.car__body { transform-box: fill-box; transform-origin: center; }
.car.is-wrong .car__body { animation: shake .45s ease; }
@keyframes shake { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }

.pz__panel { padding: 18px 20px 20px; min-height: 176px; }
.pz__q { font-size: 1.375rem; font-weight: 900; line-height: 1.2; }
.pz__hint { margin-top: 4px; color: var(--navy-soft); font-size: .9375rem; }

.pz__choices { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

.chip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 16px; border: 2px solid var(--line); border-radius: 999px;
  background: var(--paper); font-weight: 800; cursor: pointer;
}
.chip:hover { border-color: var(--sky-deep); }
.chip__dot { width: 14px; height: 14px; border-radius: 50%; }
.chip__dot--red { background: var(--red); }
.chip__dot--blue { background: var(--blue); }

.pz__verdict { font-size: 1.375rem; font-weight: 900; line-height: 1.2; }
.pz__verdict.is-right { color: var(--green); }
.pz__verdict.is-wrong { color: var(--red); }
.pz__why { margin-top: 6px; font-size: .96875rem; text-wrap: pretty; }

.pz__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

.btn {
  border: 0; border-radius: 8px; cursor: pointer;
  padding: 11px 18px; background: var(--navy); color: #fff;
  font-weight: 800;
}
.btn:hover { background: #1C4079; }
.btn--ghost { background: var(--sky); color: var(--navy); }
.btn--ghost:hover { background: #CBE7FF; }

/* A delta that floats up from its pill, as the app's StatusPill does. */
.pz__float {
  position: absolute; top: 44px;
  padding: 4px 10px; border-radius: 999px;
  color: #fff; font-size: .875rem; font-weight: 900;
  opacity: 0; pointer-events: none;
}
.pz__float--xp { right: 18px; background: var(--yellow); color: var(--navy); }
.pz__float--fuel { right: 96px; background: var(--red); }
.pz__float--fuel.is-good { background: var(--green); }
.pz__float.is-up { animation: plus 1.2s ease-out; }
@keyframes plus {
  0% { opacity: 0; transform: translateY(10px) scale(.9); }
  20% { opacity: 1; transform: none; }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-14px); }
}

@media (prefers-reduced-motion: reduce) {
  .car__blink { animation: none; }
  .car.is-wrong .car__body, .pz__float.is-up, .pz__pill.is-bump b { animation: none; }
}

/* ---------------------------------------------------------------- facts */

.facts {
  position: relative;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: var(--max); margin: clamp(40px, 6vw, 72px) auto 0; padding: 0 var(--gutter) 8px;
}
.facts__item { padding: 6px 20px; }
.facts__item + .facts__item { border-left: 3px dashed var(--line); }
.facts dt { font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 900; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
/* A bar that fills under each number while it counts. */
.facts dt::after {
  content: ""; display: block; width: 0; height: 4px; margin: 8px 0 6px; border-radius: 2px;
  background: var(--yellow);
  transition: width 1.6s cubic-bezier(.2, .7, .2, 1) var(--delay, 0ms);
}
.facts.is-on dt::after { width: 44px; }
@media (prefers-reduced-motion: reduce) { .facts dt::after { transition: none; } }
.facts dd { margin: 2px 0 0; color: var(--navy-soft); font-weight: 700; font-size: .9375rem; }

/* ---------------------------------------------------------------- who it is for */

/* No space of its own below: the lesson section's top padding is the gap between the two. */
.who { padding: var(--section) 0 0; }
.who__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); margin-top: 40px; }
.who__card { padding: 26px 26px 28px; border-radius: 16px; background: var(--sky); }
.who__card p { color: var(--navy-soft); font-size: 1rem; text-wrap: pretty; }
.who__icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 16px; border-radius: 50%; background: var(--yellow); }
.who__icon svg { width: 24px; height: 24px; fill: none; stroke: var(--navy); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------------------------------------------------------- how a lesson works */

.how { padding: var(--section) 0; }

.steps {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px;
  margin: 48px 0 0; padding: 0; list-style: none; counter-reset: step;
}
.step { counter-increment: step; }
.step p { color: var(--navy-soft); font-size: 1rem; text-wrap: pretty; }
.step .h3 { display: flex; align-items: flex-start; gap: 10px; }
.step .h3::before {
  content: counter(step);
  display: grid; place-items: center; flex: none;
  width: 28px; height: 28px;
  border-radius: 50%; background: var(--yellow);
  font-size: .9375rem; font-weight: 900;
}

.step__art {
  display: grid; place-items: center;
  height: 176px; margin-bottom: 20px; border-radius: 16px;
  background: var(--sky);
}

.mini-rule {
  display: grid; grid-template-columns: 34px 1fr; gap: 6px 12px; align-items: center;
  width: 78%; padding: 14px; border-radius: var(--radius); background: #fff;
  box-shadow: 0 8px 20px -12px rgba(20, 49, 92, .4);
}
.mini-rule svg { width: 34px; grid-row: span 1; }
.mini-rule b { font-weight: 900; font-size: .9375rem; line-height: 1.2; }
.mini-rule i { grid-column: 1 / -1; height: 7px; border-radius: 4px; background: var(--line); }
.mini-rule i.short { width: 60%; }
.mini-rule span {
  grid-column: 1 / -1; margin-top: 4px; padding: 6px; border-radius: 6px;
  background: var(--navy); color: #fff; text-align: center; font-size: .8125rem; font-weight: 800;
}

.mini-q {
  display: grid; gap: 7px; width: 78%; padding: 14px; border-radius: var(--radius); background: #fff;
  box-shadow: 0 8px 20px -12px rgba(20, 49, 92, .4);
}
.mini-q__stem { height: 8px; border-radius: 4px; background: var(--navy); opacity: .8; }
.mini-q__stem.short { width: 55%; margin-bottom: 4px; }
.mini-q__opt { display: flex; align-items: center; justify-content: flex-end; height: 22px; padding: 0 6px; border-radius: 6px; border: 2px solid var(--line); }
.mini-q__opt--ok { border-color: var(--green); background: #E3F5EC; }
.mini-q__opt svg { width: 14px; fill: none; stroke: var(--green); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }

.mini-scene { width: auto; height: 78%; max-width: 86%; border-radius: 12px; box-shadow: 0 8px 20px -12px rgba(20, 49, 92, .4); }

/* While on screen the two cars drive it out in the numbered order, over and over, with a pause between. */
.mini-scene__car, .mini-scene__intent { animation-duration: 6s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-play-state: paused; }
.mini-scene.is-on .mini-scene__car, .mini-scene.is-on .mini-scene__intent { animation-play-state: running; }
.mini-scene__car--first { animation-name: mini-first; }
.mini-scene__car--second { animation-name: mini-second; }
.mini-scene__intent { animation-name: mini-intent; }
@keyframes mini-first {
  0%, 18% { transform: none; }
  48%, 100% { transform: translateX(-102px); }
}
@keyframes mini-second {
  0%, 45% { transform: none; }
  78%, 100% { transform: translateY(-84px); }
}
@keyframes mini-intent {
  0%, 12% { opacity: 1; }
  22%, 88% { opacity: 0; }
  100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .mini-scene__car, .mini-scene__intent { animation: none; } }

.mini-days {
  position: relative; display: flex; justify-content: space-between; align-items: center;
  width: 82%; height: 64px;
}
.mini-days__road { position: absolute; left: 0; right: 0; top: 50%; height: 14px; margin-top: -7px; border-radius: 7px; background: var(--asphalt); }
.mini-days__road::after { content: ""; position: absolute; left: 8px; right: 8px; top: 6px; border-top: 2px dashed rgba(255, 255, 255, .7); }
.mini-days__stop {
  position: relative; display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px var(--sky-deep);
  font-size: .8125rem;
}
.mini-days__stop:nth-of-type(2) { box-shadow: 0 0 0 3px var(--red); }
.mini-days__stop--end { width: 38px; height: 38px; box-shadow: 0 0 0 3px var(--green); }
.mini-days__stop b { font-weight: 900; }
.mini-days small { position: absolute; left: 0; right: 0; bottom: -26px; text-align: center; color: var(--navy-soft); font-weight: 700; font-size: .8125rem; }

/* ---------------------------------------------------------------- the course */

.course { padding: var(--section) 0; background: var(--land); }

.map { position: relative; margin-top: 40px; }
.map__road { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.map__verge, .map__tarmac, .map__dash { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.map__verge { stroke: #B2D9B4; stroke-width: 56; }
.map__tarmac { stroke: var(--asphalt); stroke-width: 40; }
.map__dash { stroke: var(--yellow); stroke-width: 3; stroke-dasharray: 14 14; }

.map__stops { position: relative; margin: 0; padding: 12px 0; list-style: none; }

.stop {
  display: grid; grid-template-columns: 1fr 64px 1fr; align-items: center; gap: 20px;
  min-height: 116px;
}
.stop__node {
  grid-column: 2; display: grid; place-items: center;
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--c); box-shadow: 0 0 0 5px #fff, 0 10px 22px -8px rgba(20, 49, 92, .55);
}
.stop__node svg { width: 28px; height: 28px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.stop__label {
  justify-self: start; max-width: 22em;
  padding: 10px 16px; border-radius: var(--radius); background: #fff;
  font-weight: 800; line-height: 1.3;
  box-shadow: 0 6px 16px -10px rgba(20, 49, 92, .45);
}
.stop--left .stop__label { grid-column: 3; }
.stop--right .stop__label { grid-column: 1; grid-row: 1; justify-self: end; }

/* On a wide screen the title stays beside the road while it is read, rather than leaving a long column of road
   under a heading that has already scrolled away; the stops sit closer, since the column is narrower. */
@media (min-width: 981px) {
  .course .wrap {
    display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: clamp(32px, 4vw, 64px); align-items: start;
  }
  .course__intro { position: sticky; top: 112px; }
  .course .map { margin-top: 0; }
  .stop { min-height: 100px; }
}

/* The road's column moves between two tracks on wide screens; on a phone it runs down the left edge. Each track is
   padding, not a transform: a moved row keeps its full width and ran past the page's edge wherever the margin beside
   the map was narrower than the move. */
@media (min-width: 761px) {
  .stop--left { padding-right: 24%; }
  .stop--right { padding-left: 24%; }
  /* A label may run into its row's padding, which is empty land, rather than wrap a title into three lines; the
     side columns are pinned so a long label spills over instead of widening its column and moving the node. */
  .stop { grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); }
  .stop__label { width: max-content; max-width: min(20em, 150%); }
}

@media (max-width: 760px) {
  .stop { grid-template-columns: 64px 1fr; gap: 16px; min-height: 84px; }
  .stop__node { grid-column: 1; }
  .stop--left .stop__label, .stop--right .stop__label { grid-column: 2; grid-row: 1; justify-self: start; }
  .stop--right { padding-left: 18px; }
  .map__verge { stroke-width: 54; }
  .map__tarmac { stroke-width: 38; }
}

/* ---------------------------------------------------------------- a rule's drawing */

.drawn { padding: var(--section) 0; background: var(--sky); }
.drawn__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
/* The drawing as the app shows it on a rule's card: on white, with the card's corner. */
.drawn__picture { margin: 0; padding: clamp(12px, 2vw, 20px); background: #fff; border-radius: 16px; box-shadow: 0 24px 50px -28px rgba(20, 49, 92, .5); }
.drawn__picture img { display: block; width: 100%; height: auto; }

/* ---------------------------------------------------------------- dashboard */

.dash {
  padding: var(--section) 0;
  background: radial-gradient(120% 90% at 50% 0%, #17387A 0%, var(--night) 60%);
  color: #fff;
}
.dash .lead { color: #B7C8E6; }

.gauges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); margin-top: 52px; }
.gauge p { color: #B7C8E6; font-size: 1rem; text-wrap: pretty; }

.gauge__dial, .gauge__odo { height: 150px; margin-bottom: 16px; }
.gauge__dial { width: 100%; }

.gauge__fill { stroke-dashoffset: 100; transition: stroke-dashoffset 1.4s cubic-bezier(.2, .7, .2, 1); }
.gauges.is-on .gauge__fill { stroke-dashoffset: var(--to); }

.gauge__needle { transform-origin: 100px 110px; transform: rotate(-90deg); transition: transform 1.4s cubic-bezier(.2, .7, .2, 1); }
.gauges.is-on .gauge__needle { transform: rotate(calc(var(--turn) - 90deg)); }

/* A mechanical counter: each drum is a strip of digits behind a window, rolled by --d. */
.gauge__odo { display: flex; align-items: center; justify-content: center; gap: 6px; }
.odo__col {
  position: relative; width: 54px; height: 76px; overflow: hidden; border-radius: 8px;
  background: linear-gradient(180deg, #08183D, #1B3A78 50%, #08183D);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
  font-size: 2.75rem; font-weight: 900; font-variant-numeric: tabular-nums; text-align: center;
}
.odo__col::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 24, 61, .85), transparent 30%, transparent 70%, rgba(8, 24, 61, .85));
}
.odo__strip {
  display: block; line-height: 76px;
  transform: translateY(calc(var(--d, 0) * -76px));
  transition: transform var(--spin, 1.6s) cubic-bezier(.2, .8, .2, 1);
}
.odo__col.hot { color: #17B9E8; }

@media (prefers-reduced-motion: reduce) {
  .gauge__fill, .gauge__needle, .odo__strip { transition: none; }
}

/* ---------------------------------------------------------------- exam */

.exam { padding: var(--section) 0; background: var(--sky); }
.exam__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }

/* An exam ticket: a stub, a perforation and what the paper holds you to. */
.ticket {
  position: relative; display: grid; grid-template-columns: 64px 1fr;
  background: #fff; border-radius: 16px;
  box-shadow: 0 24px 50px -28px rgba(20, 49, 92, .5);
}
.ticket__stub {
  grid-row: span 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  border-right: 3px dotted var(--line); background: var(--navy); border-radius: 16px 0 0 16px; color: #fff;
}
.ticket__stub span { writing-mode: vertical-rl; transform: rotate(180deg); font-weight: 900; font-size: .9375rem; white-space: nowrap; }

.ticket__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 28px 12px 8px; list-style: none; }
.ticket__facts li { display: flex; flex-direction: column; gap: 4px; padding: 0 14px; }
.ticket__facts li + li { border-left: 2px solid var(--line); }
.ticket__facts b { font-size: 1.125rem; font-weight: 900; line-height: 1.2; text-wrap: balance; }
.ticket__facts li > span:last-child { color: var(--navy-soft); font-size: .9375rem; line-height: 1.4; text-wrap: pretty; }
.ticket__icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 8px; border-radius: 50%; background: var(--yellow); }
.ticket__icon svg { width: 22px; height: 22px; fill: none; stroke: var(--navy); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ticket__note { padding: 12px 26px 24px; color: var(--navy-soft); font-size: .9375rem; }

/* ---------------------------------------------------------------- more */

.more { padding: var(--section) 0; }
.more__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px clamp(32px, 6vw, 96px); }
.feat { display: grid; grid-template-columns: 56px 1fr; column-gap: 20px; }
.feat .h3, .feat p { grid-column: 2; }
.feat p { color: var(--navy-soft); text-wrap: pretty; }

/* An information sign: white glyph on blue, inside a white rule. */
.feat__sign {
  grid-row: span 2; display: grid; place-items: center;
  width: 56px; height: 56px; border-radius: 10px;
  background: var(--blue); box-shadow: inset 0 0 0 3px var(--blue), inset 0 0 0 5px #fff;
}
.feat__sign svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------------------------------------------------------- finale */

.finale {
  position: relative; display: grid; justify-items: center; align-content: start;
  min-height: 820px; padding: clamp(72px, 9vw, 104px) var(--gutter) 400px;
  background: linear-gradient(180deg, #07183C, #17427F 55%, #1E7A4B 55%);
  color: #fff; text-align: center; overflow: hidden;
}
.finale__art { position: absolute; inset: 0; width: 100%; height: 100%; }
.finale__copy { position: relative; max-width: 40em; }
.finale .lead { margin: 14px auto 0; color: #C9D8F0; }
.finale .stores { margin-top: 28px; }
.finale__note { margin-top: 10px; color: #9FB4D8; font-size: .9375rem; text-wrap: balance; }

/* ---------------------------------------------------------------- footer */

.foot { background: #0A1D47; color: #B7C8E6; font-size: .9375rem; }
.foot__grid {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 40px;
  padding-top: 52px; padding-bottom: 40px;
}
.foot__brand {
  display: inline-flex; align-items: center; gap: 12px; text-decoration: none;
  font-size: 1.25rem; font-weight: 900; letter-spacing: -0.02em; color: #fff;
}
.foot__tagline { margin-top: 12px; max-width: 24em; }
.foot__h {
  margin: 0 0 14px; font-size: .8125rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: #fff;
}
:lang(hy) .foot__h { letter-spacing: .02em; }
.foot__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.foot__label { display: block; font-size: .8125rem; color: #7F95BC; }
.foot__link { color: #DCE6F7; text-decoration: none; font-weight: 700; overflow-wrap: anywhere; }
.foot__link:hover, .foot__link[aria-current] { color: var(--yellow); }
.foot__base {
  padding-top: 18px; padding-bottom: 22px; font-size: .875rem; color: #7F95BC;
  /* The rule spans the content, not the gutters around it. */
  background: linear-gradient(rgba(255, 255, 255, .08), rgba(255, 255, 255, .08)) center top / calc(100% - 2 * var(--gutter)) 1px no-repeat;
}

.social { list-style: none; margin: 22px 0 0; padding: 0; display: flex; gap: 10px; }
.social__link {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255, 255, 255, .08); color: #fff; transition: background .2s, color .2s;
}
.social__link svg { width: 20px; height: 20px; }
.social__link:hover { background: var(--yellow); color: var(--navy); }

/* ---------------------------------------------------------------- legal pages */

.brand + .lang { margin-left: auto; }
.legal { background: linear-gradient(180deg, var(--sky), var(--paper) 360px); padding: 56px 0 88px; }
.legal__doc { max-width: 780px; }
.legal__head { margin-bottom: 28px; }
/* A Russian title can hold a word wider than a phone ("конфиденциальности"): the page's lang lets Android and iOS
   hyphenate it, and a browser without a dictionary still breaks it rather than scroll the page sideways. */
.legal__title { hyphens: auto; overflow-wrap: break-word; }

/* The FAQ and legal pages keep the language switch in the bar, which leaves no room for the name on a small phone. */
@media (max-width: 400px) {
  .nav__inner:has(> .lang) .brand__name { display: none; }
}

.legal__title {
  margin: 0; font-size: clamp(2rem, 4.4vw, 3rem); font-weight: 900; line-height: 1.1; letter-spacing: -0.025em;
  text-wrap: balance;
}
:lang(hy) .legal__title { font-weight: 800; letter-spacing: -0.01em; }
.legal__updated { margin-top: 10px; font-size: .9375rem; color: var(--navy-soft); }
.legal__lead { font-size: 1.1875rem; color: var(--navy-soft); text-wrap: pretty; }
.legal__section { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line); }
.legal__h { margin: 0 0 12px; font-size: 1.375rem; font-weight: 800; line-height: 1.25; }
.legal__section p, .legal__section ul, .legal__section ol { margin: 0 0 12px; text-wrap: pretty; }
.legal__section ul, .legal__section ol { padding-left: 1.4em; }
.legal__section li + li { margin-top: 8px; }
.legal__section li::marker { color: var(--blue); font-weight: 800; }
.legal a { color: var(--blue); font-weight: 700; text-underline-offset: 3px; }

/* A gift code's page: the gift over the title, the code on a licence plate and the two steps as stops on a road. The
   plate's band carries the product's mark where a country's would be, so it names none. */
.gift { text-align: center; }
.gift__badge {
  display: inline-grid; place-items: center; width: 68px; height: 68px; margin-bottom: 22px;
  border-radius: 20px; background: var(--yellow); color: var(--navy);
  box-shadow: 0 12px 28px rgba(255, 199, 44, .45); transform: rotate(-6deg);
}
.gift__badge svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gift .legal__lead { max-width: 30em; margin: 16px auto 0; }

.plate {
  position: relative; display: flex; max-width: 560px; margin: 44px auto 0; container-type: inline-size;
  border: 3px solid var(--night); border-radius: 14px;
  background: linear-gradient(180deg, #fff 0%, #fff 55%, #EDF2F8 100%);
  box-shadow: 0 0 0 5px var(--paper), 0 0 0 6px var(--line), 0 22px 40px rgba(12, 35, 85, .18);
}
.plate__band {
  flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  width: clamp(44px, 11%, 62px); border-radius: 10px 0 0 10px; background: var(--night); color: #fff;
}
.plate__band img { width: 26px; height: 26px; border-radius: 6px; }
.plate__band b { font-size: .8125rem; font-weight: 900; letter-spacing: .04em; }
/* A plate's own lettering where the device has it (DIN on Apple's, Bahnschrift on Windows, Roboto Condensed on
   Android), sized from the plate's width so the code fits it in the site's wider face too; one tap selects the whole
   code. */
.plate__code {
  --pad: clamp(16px, 3.4vw, 24px);
  position: relative; flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center;
  padding: var(--pad) clamp(14px, 3vw, 30px);
  font-family: "DIN Alternate", Bahnschrift, sans-serif-condensed, "Roboto Condensed", "Arial Narrow", var(--font);
  font-size: clamp(1.4rem, 7.4vw, 3.6rem); font-size: clamp(1.25rem, 9.2cqi, 3.6rem);
  font-weight: 700; font-stretch: semi-condensed;
  letter-spacing: .05em; line-height: 1; color: var(--night); white-space: nowrap; user-select: all;
}
/* The two bolts that hold a plate on. */
.plate__code::before, .plate__code::after {
  content: ""; position: absolute; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff, #9AA6B8);
}
.plate__code::before { left: 9px; }
.plate__code::after { right: 9px; }
.plate__copy {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 26px; padding: 10px 20px 10px 16px;
  border: 0; border-radius: 999px; background: var(--paper); color: var(--navy);
  font: inherit; font-size: 1rem; font-weight: 800; cursor: pointer;
  box-shadow: 0 0 0 1px var(--line), 0 6px 16px rgba(20, 49, 92, .08); transition: transform .15s, color .15s;
}
.plate__copy:hover { transform: translateY(-1px); }
.plate__copy:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.plate__copy svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.plate__copy.is-copied { color: var(--green); }

.gift__road {
  position: relative; display: grid; gap: 24px; max-width: 32rem;
  margin: 48px auto 0; padding: 0; list-style: none; counter-reset: gift; text-align: left;
}
.gift__stop { position: relative; counter-increment: gift; display: flex; align-items: flex-start; gap: 18px; }
/* The road from each stop to the next, its centre line dashed, however many lines a step's words take. */
.gift__stop:not(:last-child)::before {
  content: ""; position: absolute; left: 22px; top: 53px; bottom: -18px; border-left: 3px dashed var(--sky-deep);
}
/* Each stop is a round blue sign, as the road's information signs are, numbered in the site's yellow. */
.gift__sign {
  position: relative; flex: none; display: grid; place-items: center; width: 47px; height: 47px;
  border-radius: 50%; background: var(--blue); color: #fff; box-shadow: 0 0 0 4px var(--paper);
}
.gift__sign svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gift__sign::after {
  content: counter(gift); position: absolute; top: -6px; right: -7px;
  display: grid; place-items: center; width: 21px; height: 21px; border: 2px solid var(--paper); border-radius: 50%;
  background: var(--yellow); color: var(--night); font-size: .75rem; font-weight: 900;
}
/* The first line sits level with the middle of its sign. */
.gift__stop p { margin: 0; padding-top: 9px; color: var(--navy); font-size: 1.0625rem; text-wrap: pretty; }
.gift .stores { margin-top: 40px; }
/* The badges keep the landing page's colours, not the blue of a link on a legal page. */
.gift .store { color: #fff; font-weight: inherit; }
.gift .whole { white-space: nowrap; }

/* The schools page: a hero beside a class on the road, the content's numbers, what a school gets in two groups, how it
   starts as stops on a road, what schools ask, and the form beside what happens next. It shows no picture of the school
   site, only words, line icons and the road drawing. */
.legal__doc--wide { max-width: 1080px; }
.schools .whole { white-space: nowrap; }
.legal a.btn { color: #fff; }

.schools__head {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: clamp(28px, 4vw, 56px);
}
.schools__badge {
  display: inline-grid; place-items: center; width: 64px; height: 64px; margin-bottom: 22px;
  border-radius: 18px; background: var(--navy); color: #fff; box-shadow: 0 12px 28px rgba(20, 49, 92, .3);
}
.schools__badge svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.schools__head .legal__lead { margin-top: 16px; }
.schools__cta { display: inline-block; margin-top: 26px; padding: 14px 24px; border-radius: 10px; font-size: 1.0625rem; text-decoration: none; }
.convoy { display: block; width: 100%; height: auto; border-radius: 28px; box-shadow: 0 30px 60px -32px rgba(20, 49, 92, .55); }

/* The content's own numbers, as the landing page shows them, its bars already drawn. */
.facts--schools { margin: clamp(36px, 5vw, 56px) 0 0; padding: 0; max-width: none; }
.facts--schools .facts__item:first-child { padding-left: 0; }

.schools__group, .schools__start, .schools__faq { margin-top: clamp(44px, 6vw, 72px); }
.schools__kicker { margin: 0 0 18px; font-size: clamp(1.375rem, 2.4vw, 1.75rem); font-weight: 900; line-height: 1.2; letter-spacing: -0.01em; }
:lang(hy) .schools__kicker { font-weight: 800; letter-spacing: 0; }
.schools__gets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.schools__get {
  display: grid; align-content: start; gap: 8px; padding: 24px;
  border: 1px solid var(--line); border-radius: 18px; background: var(--paper);
  box-shadow: 0 10px 24px -18px rgba(20, 49, 92, .35);
}
/* What the students get stands out on the sky; what the school gets sits on white, two across so Armenian has room. */
.schools__group:first-of-type .schools__get { border-color: transparent; background: var(--sky); box-shadow: none; }
.schools__group:first-of-type .schools__icon { background: var(--paper); }
.schools__icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 6px; border-radius: 12px; background: var(--sky); color: var(--blue); }
.schools__icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.schools__h { margin: 0; font-size: 1.1875rem; font-weight: 800; line-height: 1.3; }
.schools__get p { color: var(--navy-soft); font-size: 1rem; text-wrap: pretty; }

/* How it starts and what schools ask share one layout: the heading in a side column that stays in view, the content
   beside it, each as wide as the rest of the page. */
.schools__start, .schools__faq {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.7fr); align-items: start; gap: clamp(24px, 4vw, 56px);
}
.schools__side { position: sticky; top: 96px; }
.schools__side p { color: var(--navy-soft); text-wrap: pretty; }
.legal .schools__side p a { overflow-wrap: anywhere; }
.schools__side .schools__cta { margin-top: 8px; }

/* The steps as round blue signs down a dashed road, each with its picture and its number on a yellow badge, a line of
   words beside each sign wide enough to read in any language. */
.schools__road { display: grid; gap: 26px; margin: 0; padding: 0; list-style: none; counter-reset: stop; }
.schools__stop { position: relative; counter-increment: stop; display: grid; grid-template-columns: 54px minmax(0, 1fr); align-items: start; gap: 20px; }
.schools__stop > div { padding-top: 4px; }
.schools__stop:not(:last-child)::after {
  content: ""; position: absolute; top: 60px; bottom: -24px; left: 25px; border-left: 3px dashed var(--sky-deep);
}
.schools__sign {
  position: relative; z-index: 1; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%;
  background: var(--blue); color: #fff; box-shadow: 0 0 0 4px var(--paper), 0 10px 20px -10px rgba(47, 125, 225, .8);
}
.schools__sign svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.schools__sign::after {
  content: counter(stop); position: absolute; top: -6px; right: -7px;
  display: grid; place-items: center; width: 22px; height: 22px; border: 2px solid var(--paper); border-radius: 50%;
  background: var(--yellow); color: var(--night); font-size: .75rem; font-weight: 900;
}
/* The last stop is the finish, the students learning: green, where the others are blue. */
.schools__stop:last-child .schools__sign { background: var(--green); box-shadow: 0 0 0 4px var(--paper), 0 10px 20px -10px rgba(47, 169, 107, .8); }
.schools__stop .schools__h { margin-bottom: 4px; }
.schools__stop p { color: var(--navy-soft); text-wrap: pretty; }

/* What schools ask: each answer folded under its question in a card of its own. */
.schools__qas { display: grid; gap: 12px; }
.schools__qa {
  padding: 0 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper);
  transition: border-color .15s, box-shadow .15s;
}
.schools__qa[open] { border-color: var(--sky-deep); box-shadow: 0 14px 30px -22px rgba(20, 49, 92, .4); }
.schools__qa summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0;
  font-size: 1.0625rem; font-weight: 800; cursor: pointer; list-style: none;
}
.schools__qa summary::-webkit-details-marker { display: none; }
.schools__qa summary::after {
  content: "+"; flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--sky); color: var(--blue); font-size: 1.25rem; font-weight: 900; line-height: 1; transition: transform .2s;
}
.schools__qa[open] summary::after { transform: rotate(45deg); }
.schools__qa p { margin: 0; padding: 0 46px 20px 0; color: var(--navy-soft); text-wrap: pretty; }
@media (prefers-reduced-motion: reduce) { .schools__qa, .schools__qa summary::after { transition: none; } }

/* The form beside what happens next: a navy panel and the fields, side by side on a wide screen. */
.enquiry {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); margin-top: clamp(48px, 6vw, 80px);
  scroll-margin-top: 96px; border: 1px solid var(--line); border-radius: 24px; overflow: hidden; background: var(--paper);
  box-shadow: 0 30px 70px -36px rgba(20, 49, 92, .45);
}
/* The panel is a column whose last block, the way to write, sits on its bottom edge in every language, level with the
   form's button, however long the words above it run. */
.enquiry__aside { display: flex; flex-direction: column; padding: clamp(20px, 3vw, 30px); background: var(--navy); color: #fff; }
.enquiry__title { margin: 0; color: #fff; font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 900; line-height: 1.15; letter-spacing: -0.01em; }
:lang(hy) .enquiry__title { font-weight: 800; letter-spacing: 0; }
.enquiry__lead { margin-top: 12px; color: rgba(255, 255, 255, .82); text-wrap: pretty; }
.enquiry__next { margin: 26px 0 14px; color: var(--yellow); font-size: .8125rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.enquiry__list { display: grid; gap: 14px; margin: 0 0 26px; padding: 0; list-style: none; }
.enquiry__list li { display: flex; align-items: flex-start; gap: 12px; color: rgba(255, 255, 255, .92); text-wrap: pretty; }
.enquiry__mark { flex: none; width: 22px; height: 22px; margin-top: 2px; fill: none; stroke: var(--night); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.enquiry__mark circle { fill: var(--yellow); stroke: none; }
/* The way to write: its question a caption, and the address on a row as tall as the form's button, so the address and
   the button share one line across the card in every language. */
.enquiry__mail {
  display: grid; grid-template-rows: auto 48px; align-items: center; justify-items: start;
  margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .16);
  color: rgba(255, 255, 255, .7); font-size: .9375rem;
}
.legal .enquiry__mail a { font-size: 1.0625rem; }
.legal .enquiry__mail a { color: var(--yellow); overflow-wrap: anywhere; }
.enquiry__body { padding: clamp(20px, 3vw, 30px); }
/* The fields of a row stand on one line whatever their labels, every label kept to one line by the hint in the box. */
.enquiry__form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: 2px 18px; }
.field--wide { align-self: stretch; }
/* The form and its thank-you take turns; a display of their own would otherwise outrank the hidden attribute. */
.enquiry__form[hidden], .enquiry__done[hidden] { display: none; }
.field { display: grid; gap: 6px; align-content: start; }
.field--wide, .enquiry__alert, .enquiry__send { grid-column: 1 / -1; }
.field__label { font-size: .9375rem; font-weight: 800; }
.field__input::placeholder { color: #8A9BB5; opacity: 1; }
.field__input {
  width: 100%; padding: 12px 14px; border: 1.5px solid #CBD8E8; border-radius: 10px;
  background: #fff; color: var(--navy); font: inherit; font-size: 1rem;
  transition: border-color .15s, box-shadow .15s;
}
textarea.field__input { resize: vertical; min-height: 110px; }
.field__input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(47, 125, 225, .18); }
.field.is-invalid .field__input { border-color: var(--red); }
.field.is-invalid .field__input:focus { box-shadow: 0 0 0 4px rgba(229, 72, 77, .16); }
/* The line under a field holds its place, so a message appearing never moves the form. */
.field__error { min-height: 1.5em; margin: 0; color: var(--red); font-size: .875rem; font-weight: 700; }
/* Under a box of free text the error sits left and the count right, on one line. */
.field__foot { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.field__count { flex: none; margin: 0; color: var(--navy-soft); font-size: .8125rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.field__count.is-near { color: #B45309; }
.enquiry__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.enquiry__alert { margin: 4px 0 8px; padding: 12px 14px; border-radius: 10px; background: #FDECEC; color: #9B2226; font-weight: 700; }
.enquiry__send { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 8px; }
.enquiry__send .btn { display: inline-flex; align-items: center; align-self: flex-end; height: 48px; padding: 0 26px; border-radius: 10px; font-size: 1rem; }
.enquiry__send .btn:disabled { opacity: .7; cursor: progress; }
.enquiry__note { flex: 1 1 260px; color: var(--navy-soft); font-size: .875rem; text-wrap: pretty; }
.enquiry__done { display: grid; justify-items: center; align-content: center; gap: 10px; padding: 28px 0 8px; text-align: center; }
.enquiry__done:focus { outline: none; }
.enquiry__done p { max-width: 32em; color: var(--navy-soft); text-wrap: pretty; }
.enquiry__tick { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #E3F5EC; color: var(--green); }
.enquiry__tick svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* The bar's own way to the form on the schools page, until the bar is too narrow for it beside the languages. */
.nav__cta { margin-left: auto; padding: 9px 16px; border-radius: 10px; font-size: .9375rem; text-decoration: none; white-space: nowrap; }
.nav__cta + .lang { margin-left: 14px; }

/* Beside the panel the form fills the card's height: the message box takes what the panel leaves, so the button sits
   on the bottom edge, level with the panel's, instead of above an empty space. */
@media (min-width: 981px) {
  .enquiry__body { display: flex; flex-direction: column; }
  .enquiry__form, .enquiry__done { flex: 1; }
  .enquiry__form { grid-template-rows: auto auto auto 1fr; }
  .field--wide { grid-template-rows: auto 1fr auto; align-content: stretch; }
  .field--wide textarea.field__input { height: 100%; }
}
@media (max-width: 980px) {
  .schools__head, .enquiry, .schools__start, .schools__faq { grid-template-columns: minmax(0, 1fr); }
  .schools__art { max-width: 560px; }
  .schools__side { position: static; }
  /* One column: the heading, the road, then the button that starts it. */
  .schools__start .schools__side { display: contents; }
  .schools__start .schools__kicker { margin-bottom: 0; }
  .schools__start .schools__road { order: 1; }
  .schools__start .schools__cta { order: 2; justify-self: start; margin-top: 0; }
}
@media (max-width: 640px) {
  .schools__gets, .enquiry__form { grid-template-columns: minmax(0, 1fr); }
  .facts--schools .facts__item:nth-child(3) { padding-left: 0; }
  .nav__cta { display: none; }
  .nav__cta + .lang { margin-left: auto; }
}

/* ---------------------------------------------------------------- narrow screens */

@media (max-width: 980px) {
  .hero__inner, .exam__grid, .drawn__grid { grid-template-columns: minmax(0, 1fr); }
  .who__grid { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  .foot__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .foot__about { grid-column: 1 / -1; }
  .pz { max-width: 560px; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 28px; }
  .gauges { grid-template-columns: minmax(0, 1fr); max-width: 460px; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; }
  .facts__item:nth-child(3) { border-left: 0; }
}

@media (max-width: 760px) {
  .hero__clouds { opacity: .35; }
}

/* The bar has no room for both the dots and "Situation 1 of 3" beside two pills; the words win. */
@media (max-width: 480px) {
  .pz__dots { display: none; }
  .foot__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}

@media (max-width: 600px) {
  .steps, .more__grid { grid-template-columns: minmax(0, 1fr); }
  .step__art { height: 148px; }
  .ticket { grid-template-columns: 44px 1fr; }
  .ticket__stub span { font-size: .75rem; }
  .ticket__facts { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 22px 8px 4px; }
  .ticket__facts li + li { border-left: 0; }
  .ticket__note { padding: 10px 18px 20px; }
  .finale { min-height: 720px; padding-bottom: 330px; }
}

.map__trees .shade { fill: #9CCB9E; }
.map__trees .crown { fill: #7EC382; }
.map__trees .light { fill: #A6DCA8; }

/* ---------------------------------------------------------------- pricing */

.pricing { padding: var(--section) 0; background: linear-gradient(180deg, var(--paper) 0, #F3F8FF 40%, var(--paper) 100%); }
.pricing[hidden] { display: none; }
.pricing .h2, .pricing .lead { text-align: center; }
.pricing .lead { max-width: none; }
.pricing [hidden] { display: none !important; }
.plans__country { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 28px; font-weight: 800; }
.plans__country select { padding: 8px 12px; border: 2px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--navy); font: inherit; }

.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; margin-top: 56px; }
@media (max-width: 1000px) { .plans { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin-inline: auto; gap: 32px; } }

.plan {
  position: relative; display: flex; flex-direction: column; gap: 18px; min-width: 0; padding: 30px 24px 24px;
  border: 1px solid var(--line); border-radius: 18px; background: var(--paper);
  box-shadow: 0 1px 2px rgba(12, 35, 85, .05), 0 16px 36px -24px rgba(12, 35, 85, .35);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.plan:hover { transform: translateY(-4px); border-color: var(--sky-deep); box-shadow: 0 1px 2px rgba(12, 35, 85, .05), 0 24px 44px -24px rgba(12, 35, 85, .45); }
.plan--recommended { border: 2px solid var(--blue); box-shadow: 0 28px 56px -28px rgba(47, 125, 225, .6); }
@media (min-width: 1001px) {
  .plan--recommended { transform: scale(1.024); z-index: 1; }
  .plan--recommended:hover { transform: scale(1.024) translateY(-4px); }
}
.plan__ribbon {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); padding: 6px 16px; border-radius: 999px;
  background: linear-gradient(90deg, var(--blue), var(--night)); color: #fff; font-size: .8125rem; font-weight: 900; white-space: nowrap;
  box-shadow: 0 8px 18px -8px rgba(47, 125, 225, .8);
}
.plan__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 10px; }
.plan__name { min-width: 0; margin: 0; font-size: 1.5rem; font-weight: 900; line-height: 1.2; overflow-wrap: break-word; }
.plan__badge { padding: 3px 10px; border-radius: 999px; background: var(--yellow); color: var(--night); font-size: .8125rem; font-weight: 800; white-space: nowrap; }
.plan__desc { margin: -8px 0 0; color: var(--navy-soft); font-size: .9375rem; line-height: 1.45; overflow-wrap: break-word; }

.plan__lengths { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; padding: 4px; border-radius: 12px; background: #EDF3FB; }
.plan__lengths label {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 48px; padding: 6px 4px;
  border-radius: 9px; color: var(--navy-soft); font-size: .8125rem; font-weight: 800; line-height: 1.15; text-align: center; cursor: pointer;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.plan__lengths label:hover { color: var(--navy); }
.plan__lengths input:checked + label { background: var(--paper); color: var(--navy); box-shadow: 0 1px 2px rgba(12, 35, 85, .12), 0 6px 14px -8px rgba(12, 35, 85, .45); }
.plan__lengths input:focus-visible + label { outline: 3px solid var(--blue); outline-offset: 1px; }
.plan__off { padding: 1px 6px; border-radius: 6px; background: #DDF3E7; color: #1B7447; font-size: .6875rem; font-weight: 900; }

/* The offer for the checked length; with no :has, the longest option shows and the switch simply does nothing. */
.plan__offer { display: none; }
.plan__offer[data-default] { display: block; }
.plan:has(.plan__lengths input:checked) .plan__offer { display: none; }
.plan:has(input[value="week"]:checked) .plan__offer[data-option="week"],
.plan:has(input[value="week-once"]:checked) .plan__offer[data-option="week-once"],
.plan:has(input[value="twoWeeks-once"]:checked) .plan__offer[data-option="twoWeeks-once"],
.plan:has(input[value="month"]:checked) .plan__offer[data-option="month"],
.plan:has(input[value="month-once"]:checked) .plan__offer[data-option="month-once"],
.plan:has(input[value="twoMonths"]:checked) .plan__offer[data-option="twoMonths"],
.plan:has(input[value="twoMonths-once"]:checked) .plan__offer[data-option="twoMonths-once"],
.plan:has(input[value="threeMonths"]:checked) .plan__offer[data-option="threeMonths"],
.plan:has(input[value="threeMonths-once"]:checked) .plan__offer[data-option="threeMonths-once"],
.plan:has(input[value="sixMonths"]:checked) .plan__offer[data-option="sixMonths"],
.plan:has(input[value="sixMonths-once"]:checked) .plan__offer[data-option="sixMonths-once"],
.plan:has(input[value="year"]:checked) .plan__offer[data-option="year"],
.plan:has(input[value="year-once"]:checked) .plan__offer[data-option="year-once"] { display: block; animation: offer-in .3s ease; }
@keyframes offer-in { from { opacity: 0; transform: translateY(6px); } }

.plan__priceline { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin: 0; }
.plan__now {
  font-size: clamp(2.25rem, 4vw, 2.75rem); font-weight: 900; line-height: 1; letter-spacing: -.02em; white-space: nowrap;
  background: linear-gradient(90deg, var(--night), var(--blue)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.plan__per { color: var(--navy-soft); font-weight: 700; }
.plan__deal { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 10px 0 0; }
.plan__was { color: var(--navy-soft); font-weight: 700; text-decoration-color: var(--red); text-decoration-thickness: 2px; }
.plan__save { padding: 2px 8px; border-radius: 6px; background: #DDF3E7; color: #1B7447; font-size: .8125rem; font-weight: 900; white-space: nowrap; }
.plan__meta { margin: 8px 0 0; color: var(--navy-soft); font-size: .875rem; line-height: 1.4; }

.plan__list { display: grid; gap: 11px; margin: 0; padding: 18px 0 0; border-top: 1px solid var(--line); list-style: none; font-size: .9375rem; line-height: 1.4; }
.plan__item { display: flex; align-items: flex-start; gap: 10px; min-width: 0; overflow-wrap: break-word; }
.plan__item > svg { flex: none; width: 20px; height: 20px; margin: 0; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.plan__item .check-icon { padding: 3px; border-radius: 50%; background: #DDF3E7; stroke: #1B7447; stroke-width: 3; }
.plan__item .limit-icon { stroke: #B77C00; }
.plan__item .soon-icon { display: block; stroke: #9A6B00; }
.plan__item--lead { font-weight: 800; }
.plan__item--soon { color: var(--navy-soft); }
.plan__save-note { margin: -6px 0 0; color: var(--navy-soft); font-size: .75rem; line-height: 1.4; }
.plan__cta { display: block; width: 100%; margin-top: auto; padding: 13px 18px; border-radius: 10px; text-align: center; text-decoration: none; }
.plan__cta.is-off { background: #EEF2F7; color: var(--navy-soft); cursor: default; }

.plan-extras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 48px; }
@media (max-width: 1000px) { .plan-extras { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin-inline: auto; } }
.plan-strip {
  --tint: var(--blue); --tint-soft: #EAF3FF;
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start; gap: 14px 18px; min-width: 0; padding: 24px;
  border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(135deg, var(--tint-soft) 0, var(--paper) 55%);
  box-shadow: 0 1px 2px rgba(12, 35, 85, .05), 0 16px 36px -24px rgba(12, 35, 85, .35);
}
.plan-strip--max { --tint: #6D4AE0; --tint-soft: #F0EBFF; }
.plan-strip__icon {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px;
  background: linear-gradient(135deg, var(--tint), var(--night)); box-shadow: 0 10px 20px -10px var(--tint);
}
.plan-strip__icon svg { width: 26px; height: 26px; fill: #fff; }
.plan-strip__main { display: grid; gap: 10px; min-width: 0; }
.plan-strip__main .plan__desc { margin: 0; }
.plan-strip .plan__head { justify-content: flex-start; }
.plan-strip__side { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.plan-strip__price { margin: 0; font-size: 1.125rem; font-weight: 900; }
.plan-strip .plan__cta { width: auto; min-width: 160px; margin: 0; }
.plan__list--inline { padding-top: 0; border-top: 0; }
@media (max-width: 480px) {
  .plan-strip { grid-template-columns: minmax(0, 1fr); }
  .plan-strip__side { grid-column: 1; }
  .plan-strip .plan__cta { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .plan, .plan__lengths label { transition: none; }
  .plan:hover, .plan--recommended:hover { transform: none; }
  .plan__offer { animation: none !important; }
}
.plans__note { margin-top: 28px; color: var(--navy-soft); font-size: .875rem; text-align: center; }
.plans__table-wrap { margin-top: 48px; overflow-x: auto; }
.plans__table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: .9375rem; }
.plans__table caption { margin-bottom: 12px; text-align: start; font-size: 1.25rem; font-weight: 900; }
.plans__table th, .plans__table td { position: relative; padding: 12px 10px; border-bottom: 1px solid var(--line); text-align: center; }
.plans__table thead th { font-weight: 900; }
.plans__table tbody th { min-width: 150px; text-align: start; font-weight: 700; }
.plans__table .is-live { color: var(--green); font-size: 1.125rem; font-weight: 900; }
.plans__table .is-soon { color: #9A6B00; font-size: .8125rem; font-weight: 800; white-space: nowrap; }
.plans__table .is-no { color: #A9B7CB; }
.soon-icon { display: none; width: 18px; height: 18px; margin: 0 auto; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.plans__legend { display: none; align-items: center; gap: 6px; margin-top: 10px; color: #9A6B00; font-size: .8125rem; font-weight: 800; }
.plans__legend .soon-icon { display: block; margin: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (max-width: 600px) {
  .plans__table { min-width: 0; font-size: .875rem; }
  .plans__table tbody th { min-width: 0; }
  .plans__table th, .plans__table td { padding: 10px 6px; }
  .plans__table .soon-icon { display: block; }
  .plans__table .soon-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .plans__legend { display: flex; }
}