/* EduMalawi marketing site.
 *
 * Hand authored rather than Bootstrap. The brief allows either; the
 * goal was visual consistency with the app, and consuming the app's
 * own tokens achieves that directly, while keeping the page to a few
 * files that open from disk with no network call and no build step.
 */

/* Poppins, the same family the application uses, at the same four
   weights. Self hosted rather than pulled from Google Fonts, so the page
   makes no third-party request. The latin subset is enough here and
   keeps all four faces to about 40KB together. */
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  }

img { max-width: 100%; }

a { color: var(--color-primary); text-decoration-thickness: 1px; text-underline-offset: 3px; }

:where(a, button, input, select, [tabindex]):focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

.skip-link {
  position: absolute; left: var(--space-4); top: -60px;
  background: var(--color-primary); color: var(--color-on-primary);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm); z-index: 100;
  transition: top var(--dur-sm) var(--ease-out);
}
.skip-link:focus { top: var(--space-4); }

/* ---------------------------------------------------------- layout */

.wrap {
  width: 100%;
  max-width: 1160px;
  margin-inline: auto;
  padding-inline: var(--space-6);
}
@media (max-width: 600px) { .wrap { padding-inline: var(--space-4); } }

.section { padding-block: var(--space-24); }
@media (max-width: 900px) { .section { padding-block: var(--space-16); } }

.section--ink {
  background: var(--color-ink);
  color: var(--color-on-ink);
}
.section--ink .lede, .section--ink .eyebrow { color: var(--color-on-ink-muted); }
.section--alt { background: var(--color-surface-alt); }

.cols { display: flex; flex-wrap: wrap; gap: var(--space-12); }
.cols > * { flex: 1 1 340px; min-width: 0; }
.cols--tight { gap: var(--space-6); }
.cols--narrow > * { flex: 1 1 240px; }

/* ------------------------------------------------------ typography */

h1, h2, h3, h4 { line-height: 1.15; margin: 0 0 var(--space-4); font-weight: var(--weight-semibold); letter-spacing: -0.02em; }

.display  { font-size: clamp(2.4rem, 5.6vw, 4rem); font-weight: var(--weight-bold); letter-spacing: -0.035em; }
.h-large  { font-size: clamp(1.9rem, 3.6vw, 2.75rem); letter-spacing: -0.03em; }
.h-medium { font-size: clamp(1.35rem, 2.2vw, 1.75rem); }

.eyebrow {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-4);
}

.lede { font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--color-text-muted); max-width: 62ch; margin: 0 0 var(--space-6); }
.prose { max-width: 66ch; }
.prose p { margin: 0 0 var(--space-4); color: var(--color-text-muted); }
.prose strong { color: var(--color-text); font-weight: var(--weight-semibold); }
.section--ink .prose p { color: var(--color-on-ink-muted); }
.section--ink .prose strong { color: var(--color-on-ink); }

.note {
  font-size: var(--text-md);
  color: var(--color-text-muted);
  border-left: 2px solid var(--color-border-strong);
  padding-left: var(--space-4);
  margin-top: var(--space-6);
  max-width: 60ch;
}

/* --------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-lg); font-weight: var(--weight-medium);
  border-radius: var(--radius-sm); border: 1px solid transparent;
  /* A <button> keeps the browser's own buttonface background unless it
     is told otherwise, which showed the theme toggle as a grey block in
     dark mode. Anchors styled as buttons never had the problem, so it
     was invisible until a real button used this class. */
  background: transparent; color: inherit; font-family: inherit;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--dur-sm) var(--ease-out), border-color var(--dur-sm) var(--ease-out), color var(--dur-sm) var(--ease-out);
}
.btn--primary { background: var(--color-primary); color: var(--color-on-primary); }
.btn--primary:hover { background: var(--color-primary-hover); }
.btn--ghost { border-color: var(--color-border-strong); color: var(--color-text); background: transparent; }
.btn--ghost:hover { border-color: var(--color-text-muted); }
.btn--quiet { color: var(--color-text-muted); padding-inline: var(--space-3); }
.btn--quiet:hover { color: var(--color-text); }
.btn--on-ink { border-color: rgba(255,255,255,.28); color: var(--color-on-ink); }
.btn--on-ink:hover { border-color: rgba(255,255,255,.55); }
.btn--sm { padding: var(--space-2) var(--space-4); font-size: var(--text-md); }

/* Theme toggle. One button, two glyphs; the theme decides which one is
   shown, so there is no text to translate and no width shift. */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  background: transparent; color: var(--color-text-muted);
  cursor: pointer;
  transition: background var(--dur-sm) var(--ease-out), color var(--dur-sm) var(--ease-out), border-color var(--dur-sm) var(--ease-out);
}
.icon-btn:hover { color: var(--color-text); border-color: var(--color-border-strong); }
.icon-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn__sun { display: none; }
.icon-btn__moon { display: block; }
[data-theme="dark"] .icon-btn__sun { display: block; }
[data-theme="dark"] .icon-btn__moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icon-btn__sun { display: block; }
  :root:not([data-theme="light"]) .icon-btn__moon { display: none; }
}

.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

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

.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
}
.nav__inner { display: flex; align-items: center; gap: var(--space-6); min-height: 64px; }
.nav__links { display: flex; gap: var(--space-5); margin-left: auto; }
.nav__links a { color: var(--color-text-muted); text-decoration: none; font-size: var(--text-lg); }
.nav__links a:hover { color: var(--color-text); }
.nav__actions { display: flex; align-items: center; gap: var(--space-2); }
.nav__toggle { display: none; background: none; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); color: var(--color-text); cursor: pointer; }

.wordmark {
  font-weight: var(--weight-bold); font-size: 1.35rem;
  letter-spacing: -0.03em; color: var(--color-text); text-decoration: none;
}
.wordmark span { color: var(--color-primary); }
.section--ink .wordmark { color: var(--color-on-ink); }

@media (max-width: 900px) {
  .nav__toggle { display: inline-flex; margin-left: auto; }
  .nav__links, .nav__actions { display: none; }
  .nav.is-open .nav__links,
  .nav.is-open .nav__actions {
    display: flex; flex-direction: column; align-items: stretch;
    flex-basis: 100%; gap: var(--space-3); padding-bottom: var(--space-5);
  }
  .nav.is-open .nav__inner { flex-wrap: wrap; }
  .nav.is-open .nav__links { margin-left: 0; }
}

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

.hero { background: var(--color-ink); color: var(--color-on-ink); padding-block: var(--space-20) var(--space-24); }
.hero__inner { display: flex; flex-wrap: wrap; gap: var(--space-12); align-items: center; }
.hero__text { flex: 1 1 420px; min-width: 0; }
.hero__art  { flex: 1 1 520px; min-width: 0; }
.hero .display { color: var(--color-on-ink); }
.hero .lede { color: var(--color-on-ink-muted); }
.hero__meta { margin-top: var(--space-8); font-size: var(--text-md); color: var(--color-on-ink-muted); }

/* ------------------------------------------------------ app frames */

/* A product preview. Everything inside is built from the app tokens so
   it reads as the real interface rather than an illustration. */
.app {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  color: var(--color-text);
  font-size: var(--text-md);
  line-height: 1.45;
}
.app__bar {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-alt);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-sm); color: var(--color-text-muted);
}
.app__dots { display: flex; gap: 6px; }
.app__dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--color-border-strong); display: block; }
.app__body { padding: var(--space-5); }
.app__title { font-size: var(--text-xl); font-weight: var(--weight-semibold); margin: 0 0 2px; }
.app__sub { color: var(--color-text-muted); font-size: var(--text-md); margin: 0 0 var(--space-5); }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px var(--space-3);
  border-radius: 999px; font-size: var(--text-xs); font-weight: var(--weight-medium);
  background: var(--color-surface-alt); color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}
.chip--ok   { background: var(--color-success-soft); color: var(--color-success-ink); border-color: transparent; }
.chip--warn { background: var(--color-warning-soft); color: var(--color-warning-ink); border-color: transparent; }
.chip--info { background: var(--color-info-soft);    color: var(--color-info-ink);    border-color: transparent; }
.chip--bad  { background: var(--color-danger-soft);  color: var(--color-danger-ink);  border-color: transparent; }

.tiles { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.tile {
  flex: 1 1 120px; min-width: 0;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  /* Labels of different lengths wrap onto two lines at some widths, and
     a wrapped label would otherwise push its number down out of line
     with the rest of the row. Pinning the value to the bottom keeps the
     numbers on one baseline whatever the labels do. */
  display: flex; flex-direction: column; justify-content: space-between;
  gap: var(--space-2);
}
.tile__label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-muted); }
.tile__value { font-size: var(--text-3xl); font-weight: var(--weight-semibold); letter-spacing: -0.02em; line-height: 1.1; }

.panel {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  background: var(--color-surface);
}
.panel__head { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: var(--space-3); }

.rows { display: flex; flex-direction: column; gap: var(--space-2); }
.row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}
.row:last-child { border-bottom: 0; }
.row__main { min-width: 0; }
.row__title { font-weight: var(--weight-medium); }
.row__meta { font-size: var(--text-sm); color: var(--color-text-muted); }

table.data { width: 100%; border-collapse: collapse; font-size: var(--text-md); }
table.data th {
  text-align: left; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em;
  color: var(--color-text-muted); font-weight: var(--weight-medium);
  padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border);
}
table.data td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border); }
table.data tr:last-child td { border-bottom: 0; }
table.data .num { text-align: right; font-variant-numeric: tabular-nums; }
.scroll-x { overflow-x: auto; }

/* ----------------------------------------------------------- cards */

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}
.card h3 { font-size: var(--text-xl); margin-bottom: var(--space-2); }
.card p { margin: 0; color: var(--color-text-muted); font-size: var(--text-lg); }
.section--ink .card { background: var(--color-ink-soft); border-color: rgba(255,255,255,.1); }
.section--ink .card h3 { color: var(--color-on-ink); }
.section--ink .card p { color: var(--color-on-ink-muted); }

/* Coverage list: typographic, not eight icon cards. */
.coverage { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0; }
.coverage li {
  flex: 1 1 260px;
  padding: var(--space-5) var(--space-6) var(--space-5) 0;
  border-top: 1px solid var(--color-border);
}
.coverage b { display: block; font-weight: var(--weight-semibold); font-size: var(--text-xl); letter-spacing: -0.01em; }
.coverage span { color: var(--color-text-muted); font-size: var(--text-md); }
.section--ink .coverage li { border-color: rgba(255,255,255,.12); }
.section--ink .coverage b { color: var(--color-on-ink); }
.section--ink .coverage span { color: var(--color-on-ink-muted); }

/* --------------------------------------------------------- flows */

.flow { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--space-2); list-style: none; margin: 0; padding: 0; counter-reset: step; }
.flow li {
  flex: 1 1 150px; min-width: 0;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-size: var(--text-md); font-weight: var(--weight-medium);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.flow li::before {
  counter-increment: step; content: counter(step);
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}
.section--ink .flow li { background: var(--color-ink-soft); border-color: rgba(255,255,255,.12); color: var(--color-on-ink); }
.section--ink .flow li::before { color: var(--color-accent); }

/* The review chain. A numbered vertical stepper with a rail down the
   left, which holds its shape at every width. It was a wrapping row of
   boxes separated by arrow list items, and on a phone the arrows wrapped
   to the starts of lines and the boxes came out ragged. */
.chain {
  list-style: none; padding: 0;
  margin: 0 0 var(--space-5);
  counter-reset: chain;
  max-width: 44rem;
}
.chain li {
  counter-increment: chain;
  position: relative;
  padding: var(--space-3) 0 var(--space-6) var(--space-12);
  font-size: var(--text-lg); font-weight: var(--weight-medium);
}
.chain li::before {
  content: counter(chain);
  position: absolute; left: 0; top: 0;
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  font-size: var(--text-sm); font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
}
/* The rail connecting one step to the next. The last step has none. */
.chain li::after {
  content: ""; position: absolute;
  left: 15px; top: 34px; bottom: 4px;
  border-left: 1px solid var(--color-border);
}
.chain li:last-child { padding-bottom: 0; }
.chain li:last-child::after { display: none; }
.chain li[data-optional="true"] { color: var(--color-text-muted); }
.chain li[data-optional="true"]::before { border-style: dashed; }

.section--ink .chain li { color: var(--color-on-ink); }
.section--ink .chain li[data-optional="true"] { color: var(--color-on-ink-muted); }
.section--ink .chain li::before {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .26);
  color: var(--color-on-ink);
}
.section--ink .chain li::after { border-left-color: rgba(255, 255, 255, .18); }

/* The single student record, shown as three branches under one head. */
.record { text-align: center; }
.record__head {
  display: inline-block; padding: var(--space-4) var(--space-8);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-md);
  background: var(--color-surface); font-weight: var(--weight-semibold); font-size: var(--text-xl);
}
.record__stem { width: 1px; height: var(--space-8); background: var(--color-border-strong); margin: 0 auto; }
.record__branches { display: flex; flex-wrap: wrap; gap: var(--space-4); text-align: left; }
.record__branches > * { flex: 1 1 240px; }
.record__branches h3 { font-size: var(--text-lg); text-transform: uppercase; letter-spacing: .08em; color: var(--color-text-muted); margin-bottom: var(--space-3); }
.record__branches ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.record__branches li { font-size: var(--text-lg); padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-border); }
.section--ink .record__head { background: var(--color-ink-soft); border-color: rgba(255,255,255,.2); color: var(--color-on-ink); }
.section--ink .record__stem { background: rgba(255,255,255,.2); }
.section--ink .record__branches li { border-color: rgba(255,255,255,.12); color: var(--color-on-ink); }
.section--ink .record__branches h3 { color: var(--color-on-ink-muted); }

/* --------------------------------------------------------- gallery */

.gallery { display: flex; gap: var(--space-6); overflow-x: auto; padding-bottom: var(--space-5); scroll-snap-type: x mandatory; }
.gallery > figure { flex: 0 0 min(560px, 86vw); scroll-snap-align: start; margin: 0; }
.gallery figcaption { margin-top: var(--space-4); }
.gallery figcaption b { display: block; font-size: var(--text-xl); font-weight: var(--weight-semibold); }
.gallery figcaption span { color: var(--color-text-muted); font-size: var(--text-md); }

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

.footer { background: var(--color-ink); color: var(--color-on-ink-muted); padding-block: var(--space-16) var(--space-10); }
/* Link columns are narrow by nature. Without a smaller basis than the
   page default they do not all fit on one row and the last one drops
   underneath on its own, which reads as a mistake rather than a layout. */
.footer .cols > * { flex: 1 1 170px; }
.footer .cols > .footer__brand { flex: 1.8 1 240px; }
.footer a { color: var(--color-on-ink-muted); text-decoration: none; }
.footer a:hover { color: var(--color-on-ink); }
.footer h4 { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: .08em; color: var(--color-on-ink); margin-bottom: var(--space-4); }
.footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); font-size: var(--text-md); }
.footer__base {
  margin-top: var(--space-12); padding-top: var(--space-6);
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between;
  font-size: var(--text-md);
}

/* --------------------------------------------------------- motion */

.reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--dur-lg) var(--ease-out), transform var(--dur-lg) var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------- product shots
   Frames for real screenshots of the system. The markup lands with the
   image files; these rules are here so dropping them in is one step. */
.shots { display: flex; flex-wrap: wrap; gap: var(--space-6); }
.shot { flex: 1 1 380px; margin: 0; }
.shot img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}
.shot figcaption {
  margin-top: var(--space-3);
  font-size: var(--text-md); color: var(--color-text-muted);
}
.shot--wide { flex-basis: 100%; }

/* ------------------------------------------------------- capabilities */
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-5); }
.card--lift { transition: transform var(--dur-md, .25s) var(--ease-out), box-shadow var(--dur-md, .25s) var(--ease-out), border-color .25s; position: relative; overflow: hidden; }
.card--lift::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--color-accent), transparent); opacity: .0; transition: opacity .25s; }
.card--lift:hover { transform: translateY(-4px); box-shadow: 0 14px 30px -18px rgba(14,19,25,.45); border-color: var(--color-accent); }
.card--lift:hover::before { opacity: 1; }
.stagger.reveal > * { opacity: 0; transform: translateY(12px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms); }
.stagger.reveal.is-in > * { opacity: 1; transform: none; }
.stagger.reveal { opacity: 1; transform: none; }

/* ----------------------------------------------------------- carousel */
.carousel { position: relative; }
.carousel__track { display: flex; gap: var(--space-6); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding: var(--space-4) 8% var(--space-6); outline: none; }
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__slide { flex: 0 0 min(620px, 84%); scroll-snap-align: center; margin: 0; transition: transform .5s var(--ease-out), opacity .5s var(--ease-out); transform: scale(.94); opacity: .5; }
.carousel__slide.is-active { transform: none; opacity: 1; }
/* Real screens are wider than the drawn previews, so they read at a
   useful size. Each has a light and a dark image; the page's theme picks
   one, and a lazy image that is not shown is never fetched. */
.carousel--shots .carousel__slide { flex-basis: min(1000px, 90%); }
.app--shot .shot-img { display: block; width: 100%; height: auto; }
.app--shot .shot-img--dark { display: none; }
[data-theme="dark"] .app--shot .shot-img--light { display: none; }
[data-theme="dark"] .app--shot .shot-img--dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .app--shot .shot-img--light { display: none; }
  :root:not([data-theme="light"]) .app--shot .shot-img--dark { display: block; }
}
.carousel__slide figcaption { margin-top: var(--space-4); }
.carousel__slide figcaption b { display: block; font-size: var(--text-xl); font-weight: var(--weight-semibold); }
.carousel__slide figcaption span { color: var(--color-text-muted); font-size: var(--text-md); }
.carousel__controls { display: flex; align-items: center; justify-content: center; gap: var(--space-4); margin-top: var(--space-2); }
.carousel__btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--color-border); background: var(--color-surface); color: inherit; font-size: 18px; cursor: pointer; transition: background .2s, border-color .2s, transform .2s; }
.carousel__btn:hover { border-color: var(--color-accent); transform: translateY(-1px); }
.carousel__dots { display: flex; gap: 8px; }
.carousel__dots button { width: 8px; height: 8px; border-radius: 99px; border: 0; padding: 0; background: var(--color-border); cursor: pointer; transition: width .3s var(--ease-out), background .3s; }
.carousel__dots button[aria-current="true"] { width: 26px; background: var(--color-accent); }
@media (prefers-reduced-motion: reduce) {
  .carousel__track { scroll-behavior: auto; }
  .carousel__slide, .card--lift, .stagger.reveal > * { transition: none; transform: none; opacity: 1; }
}

/* -------------------------------------------------------- book a demo */
.demo { align-items: flex-start; }
.demo__contacts { margin-top: var(--space-8); }
.demo__contacts-title { font-weight: var(--weight-semibold); margin-bottom: var(--space-3); }
.demo__contacts ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.demo__contacts a { color: var(--color-text-muted); text-decoration: none; font-size: var(--text-lg); }
.demo__contacts a b { color: var(--color-text); font-weight: var(--weight-semibold); margin-right: var(--space-2); }
.demo__contacts a:hover, .demo__contacts a:hover b { color: var(--color-primary); }

.demo-form { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4) var(--space-5); padding: var(--space-6); }
.demo-form .field--wide, .demo-form__status { grid-column: 1 / -1; }
/* .field sets display, which would otherwise beat the hidden attribute
   the script uses to clear the form once a request is in. */
.demo-form [hidden] { display: none !important; }
.field { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.field label { font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--color-text); }
.field__opt { color: var(--color-text-muted); font-weight: var(--weight-regular, 400); }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: var(--text-lg); color: var(--color-text);
  background: var(--color-bg); border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm); padding: var(--space-3);
}
.field textarea { resize: vertical; min-height: 6.5rem; }
.field input::placeholder { color: var(--color-text-subtle); }
.field [aria-invalid="true"] { border-color: var(--color-danger); }
.field__error { color: var(--color-danger-ink); font-size: var(--text-md); }
.demo-form__send { display: flex; justify-content: flex-end; }
.demo-form__send .btn[disabled] { opacity: .6; cursor: progress; }
.demo-form__status { padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); font-size: var(--text-md); }
.demo-form__status[data-tone="ok"] { background: var(--color-success-soft); color: var(--color-success-ink); }
.demo-form__status[data-tone="bad"] { background: var(--color-danger-soft); color: var(--color-danger-ink); }
/* The trap for scripts: off screen rather than display: none, which some
   scripts know to skip. Hidden from assistive technology too. */
.demo-form__trap { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 640px) {
  .demo-form { grid-template-columns: 1fr; padding: var(--space-5); }
  .demo-form__send .btn { width: 100%; justify-content: center; }
}