/*
 * THE PAGE'S VALUES — every number and colour the page draws lives here, and nowhere else (parts.css holds none).
 *
 * --kit-*  are the app's own values, copied from src/kit/tokens.ts under the same path (--kit-color-brandBlue is
 *          kit.color.brandBlue); tests/site-kit.test.mjs is red when one of them differs from the app's. Change them in
 *          the app (design/tokens/tokens.json, `npm run tokens`), then here.
 * --site-* are the page's own, from the approved mock (Desktop\cnanny-context folder\landing\index.html); the app has
 *          no such value. A translucent colour is mixed from a kit colour wherever the mock's was one.
 *
 * The phone (980 px and narrower) changes values, never parts: the block at the end.
 */

@font-face {
  font-family: "Sofia Sans";
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/sofia-sans-cyrillic-700-normal.woff2) format("woff2");
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Sofia Sans";
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/sofia-sans-latin-700-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+2000-206F, U+20AC;
}
@font-face {
  font-family: "Sofia Sans";
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/sofia-sans-cyrillic-800-normal.woff2) format("woff2");
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Sofia Sans";
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/sofia-sans-latin-800-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+2000-206F, U+20AC;
}
@font-face {
  font-family: "Open Sans";
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/open-sans-cyrillic-400-normal.woff2) format("woff2");
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Open Sans";
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/open-sans-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+2000-206F, U+20AC;
}
@font-face {
  font-family: "Open Sans";
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/open-sans-cyrillic-600-normal.woff2) format("woff2");
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Open Sans";
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/open-sans-latin-600-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+2000-206F, U+20AC;
}

:root {
  /* ---- THE APP'S (src/kit/tokens.ts) ---- */
  --kit-color-brandBlue: #0444b4;
  --kit-color-brandBlueLight: #0a52c9;
  --kit-color-brandBlueDark: #032d7d;
  --kit-color-brandYellow: #fbc600;
  --kit-color-ink: #0f172a;
  --kit-color-ink2: #475569;
  --kit-color-ink3: #5d6b81;
  --kit-color-inkOnBlue: #dce9ff;
  --kit-color-white: #ffffff;
  --kit-color-page: #eef2f8;
  --kit-color-line: #e2e8f0;
  --kit-color-surfaceBlue: #e8f0fd;
  --kit-color-greenInk: #166534;
  --kit-color-greenGround: #dcfce7;
  --kit-color-amberInk: #76500d;
  --kit-color-amberSoft: #fff7e0;
  --kit-color-redWeb: #b91c1c;
  --kit-color-redSoft: #fae9e9;
  --kit-gradient-blue-angle: 140deg;
  --kit-gradient-blue-midAt: 50%;
  --kit-gradient-blue-railAngle: 180deg;
  --kit-font-family-display: "Sofia Sans";
  --kit-font-family-body: "Open Sans";
  --kit-font-tracking-display: -0.03em;
  --kit-font-tracking-caps: 0.08em;
  --kit-radius-control: 10px;
  --kit-radius-phoneCard: 18px;
  --kit-radius-round: 999px;
  --kit-shadow-card: 0px 8px 18px -16px rgba(15, 23, 42, 0.6);
  --kit-alpha-selected: 14%;
  --kit-line-edge: 4px;
  --kit-icon-row: 20px;
  --kit-icon-tile: 24px;
  --kit-icon-calendar: 32px;

  /* ---- THE PAGE'S OWN (the approved mock) ---- */
  /* type */
  --site-font-display: var(--kit-font-family-display), system-ui, sans-serif;
  --site-font-body: var(--kit-font-family-body), system-ui, sans-serif;
  --site-weight-body: 400;
  --site-weight-label: 600;
  --site-weight-bold: 700;
  --site-weight-heavy: 800;
  --site-leading-body: 1.55;
  --site-leading-head: 1.05;
  --site-leading-tight: 1.3;
  --site-tracking-brand: -0.02em;
  --site-text-hero: 64px;
  --site-text-section: 44px;
  --site-text-lead: 19px;
  --site-text-head-lead: 18px;
  --site-text-card-title: 24px;
  --site-text-who-title: 22px;
  --site-text-step-title: 20px;
  --site-text-list-title: 19px;
  --site-text-brand: 20px;
  --site-text-button: 17px;
  --site-text-row: 16px;
  --site-text-body: 15px;
  --site-text-footer: 14.5px;
  --site-text-step: 14.5px;
  --site-text-small: 14px;
  --site-text-caps: 13px;
  --site-text-label: 16px;
  --site-label: 34px;
  --site-label-side: 16px;
  --site-text-fine: 13px;
  --site-text-top: 15px;

  /* colours the app has not */
  --site-color-device: #0b1530;
  --site-color-footer: #06163d;
  --site-color-footer-ink: #b9c6dd;
  --site-color-legal-ink: #8796b3;
  --site-color-stand-top: #cfd8e6;
  --site-color-stand-bottom: #9aa8bf;
  --site-color-float-shadow: rgba(3, 20, 60, 0.6);
  --site-glass-ghost: color-mix(in srgb, var(--kit-color-white) 10%, transparent);
  --site-glass-ghost-line: color-mix(in srgb, var(--kit-color-white) 35%, transparent);
  --site-glass-contact: color-mix(in srgb, var(--kit-color-white) 12%, transparent);
  --site-glass-note: color-mix(in srgb, var(--kit-color-white) 8%, transparent);
  --site-glass-rule: color-mix(in srgb, var(--kit-color-white) 10%, transparent);
  --site-top-solid: color-mix(in srgb, var(--kit-color-brandBlueDark) 92%, transparent);
  --site-top-clear: color-mix(in srgb, var(--kit-color-brandBlueDark) 0%, transparent);
  --site-focus: color-mix(
    in srgb,
    var(--kit-color-brandBlue) var(--kit-alpha-selected),
    transparent
  );

  /* the blue gradient of the band, as the app draws it */
  --site-band: linear-gradient(
    var(--kit-gradient-blue-angle),
    var(--kit-color-brandBlueLight) 0%,
    var(--kit-color-brandBlue) var(--kit-gradient-blue-midAt),
    var(--kit-color-brandBlueDark) 100%
  );
  --site-fade: linear-gradient(
    var(--kit-gradient-blue-railAngle),
    var(--kit-color-white) 0,
    var(--kit-color-page) 100%
  );
  --site-stand: linear-gradient(var(--site-color-stand-top), var(--site-color-stand-bottom));

  /* shadows */
  --site-shadow-big: 0 30px 60px -30px
    color-mix(in srgb, var(--kit-color-brandBlueDark) 55%, transparent);
  --site-shadow-float: 0 18px 40px -20px var(--site-color-float-shadow);
  --site-shadow-dot: 0 12px 24px -14px
    color-mix(in srgb, var(--kit-color-brandBlue) 90%, transparent);
  --site-ring: 0 0 0 3px var(--site-focus);

  /* lines and corners */
  --site-line-thin: 1px;
  --site-line-ghost: 1.5px;
  --site-line-ring: 2px;
  --site-dash: 14px;
  --site-dash-gap: 24px;
  --site-radius-tile: 14px;
  --site-radius-icon: 12px;
  --site-radius-form: 22px;
  --site-radius-laptop: 14px;
  --site-radius-screen: 6px;
  --site-radius-phone: 34px;
  --site-radius-phone-screen: 26px;
  --site-round: 50%;

  /* the frame */
  --site-wrap: 1180px;
  --site-gutter: 20px;
  --site-section: 96px;
  --site-section-who-top: 40px;
  --site-zero: 0;
  --site-scroll: smooth;
  --site-full: 1 / -1;
  --site-whole: 100%;
  --site-layer-top: 20;
  --site-motion: 0.15s;
  --site-motion-top: 0.2s;
  --site-lift: translateY(-1px);
  --site-blur: blur(10px);

  /* the top bar */
  --site-top: 68px;
  --site-top-up: -68px;
  --site-top-gap: 22px;
  --site-top-button: 40px;
  --site-top-button-side: 16px;
  --site-nav: flex;
  --site-nav-gap: 24px;
  --site-signin: inline;
  --site-mark: 40px;
  --site-brand-gap: 10px;
  --site-lang: 34px;
  --site-lang-side: 12px;

  /* buttons */
  --site-button: 48px;
  --site-button-side: 22px;
  --site-button-gap: 8px;
  --site-button-form: 52px;

  /* the hero */
  --site-hero-top: 120px;
  --site-hero-cols: 1.02fr 1fr;
  --site-hero-gap: 40px;
  --site-hero-copy-top: 36px;
  --site-hero-copy-bottom: 64px;
  --site-hero-title-top: 14px;
  --site-hero-title-bottom: 18px;
  --site-hero-lead: 520px;
  --site-hero-note: 480px;
  --site-hero-note-fade: 0.85;
  --site-hero-acts-top: 28px;
  --site-hero-acts-bottom: 14px;
  --site-hero-acts-gap: 12px;
  --site-stage: 500px;
  --site-stage-side: 0;
  --site-laptop: 620px;
  --site-laptop-right: -60px;
  --site-laptop-top: 20px;
  --site-laptop-pad: 10px;
  --site-stand-side: -30px;
  --site-stand-height: 14px;
  --site-stand-down: -14px;
  --site-phone: 220px;
  --site-phone-pad: 9px;
  --site-hero-phone: 220px;
  --site-hero-phone-left: 10px;
  --site-hero-phone-top: 70px;
  --site-float-pad: 11px 14px;
  --site-float-gap: 10px;
  --site-float-icon: 34px;
  --site-float-glyph: 18px;
  --site-float-1-left: 180px;
  --site-float-1-top: 20px;
  --site-float-2-right: 10px;
  --site-float-2-bottom: 70px;

  /* section heads */
  --site-head: 640px;
  --site-head-bottom: 44px;
  --site-head-title-top: 10px;
  --site-head-title-bottom: 12px;
  --site-head-ask-bottom: 14px;
  --site-head-app-bottom: 22px;

  /* cards and tiles */
  --site-grid-gap: 18px;
  --site-card-pad: 26px;
  --site-save-cols: repeat(4, 1fr);
  --site-save-gap: 18px;
  --site-save-pad: 26px;
  --site-save-title: 24px;
  --site-save-text: 15.5px;
  --site-tile: 52px;
  --site-tile-glyph: 28px;
  --site-tile-bottom: 18px;
  --site-card-title-bottom: 8px;
  --site-do-cols: repeat(3, 1fr);
  --site-do-gap: 16px;
  --site-do-tile: 44px;
  --site-do-title-bottom: 4px;
  --site-who-cols: repeat(3, 1fr);
  --site-who-title-top: 14px;
  --site-who-title-bottom: 12px;
  --site-tag: 28px;
  --site-tag-side: 12px;
  --site-who-list-gap: 9px;
  --site-who-row-gap: 10px;
  --site-tick: 18px;
  --site-tick-top: 3px;
  --site-tick-glyph: 12px;

  /* the five steps */
  --site-steps-cols: repeat(5, 1fr);
  --site-steps-gap: 16px;
  --site-steps-line-left: 8%;
  --site-steps-line-right: 8%;
  --site-steps-line-top: 38px;
  --site-steps-line-bottom: auto;
  --site-steps-line-width: auto;
  --site-steps-line-height: 3px;
  --site-steps-line-turn: 90deg;
  --site-step: block;
  --site-step-cols: none;
  --site-step-gap: 0;
  --site-step-align: center;
  --site-step-side: 6px;
  --site-dot: 78px;
  --site-dot-centre: 0 auto 18px;
  --site-dot-number: 26px;
  --site-dot-number-out: -4px;
  --site-step-title-bottom: 6px;

  /* the app */
  --site-app-cols: 1fr 1fr;
  --site-app-gap: 56px;
  --site-app-list-gap: 16px;
  --site-app-list-top: 8px;
  --site-app-row-gap: 14px;
  --site-app-icon: 36px;
  --site-phones: 560px;
  --site-phones-phone: 250px;
  --site-phone-1-left: 20px;
  --site-phone-1-top: 0px;
  --site-phone-2-right: 20px;
  --site-phone-2-top: 60px;
  --site-tilt-left: rotate(-4deg);
  --site-tilt-right: rotate(4deg);

  /* the enquiry */
  --site-ask-cols: 1fr 1.05fr;
  --site-contact-gap: 12px;
  --site-contact-top: 28px;
  --site-contact-icon: 40px;
  --site-already-top: 28px;
  --site-already-pad: 16px 18px;
  --site-form-pad: 28px;
  --site-form-cols: 1fr 1fr;
  --site-form-gap: 14px;
  --site-label-gap: 6px;
  --site-field: 48px;
  --site-field-side: 14px;
  --site-field-text: 16px;
  --site-note-field: 84px;
  --site-note-field-top: 12px;

  /* the footer */
  --site-footer-top: 56px;
  --site-footer-bottom: 28px;
  --site-footer-cols: 1.3fr 1fr 1fr 1fr;
  --site-footer-gap: 28px;
  --site-footer-head-bottom: 12px;
  --site-footer-line-bottom: 6px;
  --site-legal-top: 36px;
  --site-legal-pad: 20px;
  --site-legal-flow: row;
  --site-legal-gap: 0;
}

/* THE PHONE — the mock's one breakpoint */
@media (max-width: 980px) {
  :root {
    --site-nav: none;
    --site-signin: none;
    --site-hero-top: 100px;
    --site-hero-copy-bottom: 8px;
    --site-hero-cols: 1fr;
    --site-app-cols: 1fr;
    --site-ask-cols: 1fr;
    --site-text-hero: 44px;
    --site-text-label: 15px;
    --site-text-lead: 17px;
    --site-stage: 420px;
    --site-stage-side: -20px;
    --site-laptop: 520px;
    --site-laptop-right: -170px;
    --site-laptop-top: 30px;
    --site-hero-phone: 190px;
    --site-hero-phone-left: 20px;
    --site-hero-phone-top: 40px;
    --site-float-1-left: 150px;
    --site-float-1-top: 0px;
    --site-float-2-right: 14px;
    --site-float-2-bottom: 40px;
    --site-section: 64px;
    --site-text-section: 34px;
    --site-save-cols: 1fr 1fr;
    --site-save-gap: 12px;
    --site-save-pad: 18px;
    --site-save-title: 20px;
    --site-save-text: 14px;
    --site-steps-cols: 1fr;
    --site-steps-gap: 22px;
    --site-steps-line-left: 38px;
    --site-steps-line-right: auto;
    --site-steps-line-top: 20px;
    --site-steps-line-bottom: 20px;
    --site-steps-line-width: 3px;
    --site-steps-line-height: auto;
    --site-steps-line-turn: 180deg;
    --site-step: grid;
    --site-step-cols: 78px 1fr;
    --site-step-gap: 16px;
    --site-step-align: left;
    --site-step-side: 0px;
    --site-dot-centre: 0;
    --site-do-cols: 1fr;
    --site-who-cols: 1fr;
    --site-phones: 420px;
    --site-phones-phone: 172px;
    --site-phone-1-left: 2%;
    --site-phone-1-top: 10px;
    --site-phone-2-right: 2%;
    --site-phone-2-top: 50px;
    --site-form-cols: 1fr;
    --site-form-pad: 22px;
    --site-footer-cols: 1fr 1fr;
    --site-legal-flow: column;
    --site-legal-gap: 6px;
  }
}

/* THE NARROW DESK (design R1 of step site): between the phone and 1200 px the laptop moved right, so it never covers the
   hero's own headline or lead — the hero's overflow crops it */
@media (min-width: 981px) and (max-width: 1200px) {
  :root {
    --site-laptop-right: -175px;
  }
}

/* THE NARROW PHONE (design R2): at 360-400 px the mark, the language and the button fit in one row */
@media (max-width: 400px) {
  :root {
    --site-mark: 34px;
    --site-text-brand: 18px;
    --site-brand-gap: 8px;
    --site-top-gap: 10px;
    --site-top-button-side: 12px;
  }
}

/* a visitor who asked for less motion gets the jumps without the glide */
@media (prefers-reduced-motion: reduce) {
  :root {
    --site-scroll: auto;
  }
}

/*
 * THE PAGE'S PARTS — each part has a name, and index.html builds every section from these parts alone.
 * No value is written here: every number and colour is a token of tokens.css (tests/site-kit.test.mjs is red on a
 * digit in a value here). To change how a part looks, change its token; to change a part, change it here once.
 */

/* ---- the ground ---- */
* {
  box-sizing: border-box;
  margin: var(--site-zero);
  padding: var(--site-zero);
}
html {
  scroll-behavior: var(--site-scroll);
  scroll-padding-top: var(--site-top);
}
html,
body {
  overflow-x: clip;
}
body {
  font-family: var(--site-font-body);
  color: var(--kit-color-ink);
  background: var(--kit-color-page);
  line-height: var(--site-leading-body);
  -webkit-font-smoothing: antialiased;
}
img {
  display: block;
  max-width: var(--site-whole);
  height: auto;
}
a {
  color: inherit;
  text-decoration: none;
}
h1,
h2,
h3 {
  font-family: var(--site-font-display);
  letter-spacing: var(--kit-font-tracking-display);
  line-height: var(--site-leading-head);
}
.wrap {
  max-width: var(--site-wrap);
  margin: var(--site-zero) auto;
  padding: var(--site-zero) var(--site-gutter);
}
.icon {
  width: var(--kit-icon-row);
  height: var(--kit-icon-row);
  flex: none;
}

/* ---- the label above a title: one yellow pill, the same on the light ground and on the band (block 53eb926a5637 point 3) ---- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: var(--site-label);
  padding: var(--site-zero) var(--site-label-side);
  border-radius: var(--kit-radius-round);
  background: var(--kit-color-brandYellow);
  color: var(--kit-color-ink);
  font-family: var(--site-font-display);
  font-weight: var(--site-weight-bold);
  font-size: var(--site-text-label);
  line-height: var(--site-leading-tight);
}

/* ---- the button: yellow, or ghost on the blue ---- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--site-button-gap);
  height: var(--site-button);
  padding: var(--site-zero) var(--site-button-side);
  border-radius: var(--kit-radius-round);
  font-family: var(--site-font-display);
  font-weight: var(--site-weight-bold);
  font-size: var(--site-text-button);
  border: var(--site-zero);
  cursor: pointer;
  transition:
    transform var(--site-motion),
    box-shadow var(--site-motion);
}
.button:hover {
  transform: var(--site-lift);
}
.button--yellow {
  background: var(--kit-color-brandYellow);
  color: var(--kit-color-ink);
}
.button--ghost {
  background: var(--site-glass-ghost);
  color: var(--kit-color-white);
  border: var(--site-line-ghost) solid var(--site-glass-ghost-line);
}
.button--small {
  height: var(--site-top-button);
  font-size: var(--site-text-top);
  padding: var(--site-zero) var(--site-top-button-side);
}
.button--wide {
  grid-column: var(--site-full);
  height: var(--site-button-form);
  width: var(--site-whole);
}
.button[disabled] {
  cursor: progress;
  transform: none;
}

/* ---- the top bar ---- */
.top {
  position: sticky;
  top: var(--site-zero);
  z-index: var(--site-layer-top);
  background: var(--site-top-clear);
  transition: background var(--site-motion-top);
}
.top--solid {
  background: var(--site-top-solid);
  backdrop-filter: var(--site-blur);
}
.top .wrap {
  display: flex;
  align-items: center;
  gap: var(--site-top-gap);
  height: var(--site-top);
}
.brand {
  display: flex;
  align-items: center;
  gap: var(--site-brand-gap);
  color: var(--kit-color-white);
  font-family: var(--site-font-display);
  font-weight: var(--site-weight-heavy);
  font-size: var(--site-text-brand);
  letter-spacing: var(--site-tracking-brand);
}
.brand__mark {
  width: var(--site-mark);
  height: var(--site-mark);
}
.brand b {
  color: var(--kit-color-brandYellow);
  font-weight: var(--site-weight-heavy);
}
.nav {
  display: var(--site-nav);
  gap: var(--site-nav-gap);
  margin-left: auto;
}
.nav a {
  color: var(--kit-color-inkOnBlue);
  font-weight: var(--site-weight-label);
  font-size: var(--site-text-top);
}
.nav a:hover {
  color: var(--kit-color-white);
}
.lang {
  display: inline-flex;
  align-items: center;
  color: var(--kit-color-white);
  font-family: var(--site-font-display);
  font-weight: var(--site-weight-bold);
  font-size: var(--site-text-small);
  border: var(--site-line-ghost) solid var(--site-glass-ghost-line);
  border-radius: var(--kit-radius-round);
  height: var(--site-lang);
  padding: var(--site-zero) var(--site-lang-side);
}
.signin {
  display: var(--site-signin);
  color: var(--kit-color-white);
  font-family: var(--site-font-display);
  font-weight: var(--site-weight-bold);
  font-size: var(--site-text-top);
}

/* ---- a band: the blue gradient with the yellow edge ---- */
.band {
  background: var(--site-band);
  color: var(--kit-color-white);
}

/* ---- the hero ---- */
.hero {
  margin-top: var(--site-top-up);
  padding: var(--site-hero-top) var(--site-zero) var(--site-zero);
  position: relative;
  overflow: hidden;
  border-bottom: var(--kit-line-edge) solid var(--kit-color-brandYellow);
}
.hero .wrap {
  display: grid;
  grid-template-columns: var(--site-hero-cols);
  gap: var(--site-hero-gap);
  align-items: center;
  position: relative;
}
.hero__copy {
  padding: var(--site-hero-copy-top) var(--site-zero) var(--site-hero-copy-bottom);
}
.hero h1 {
  font-size: var(--site-text-hero);
  font-weight: var(--site-weight-heavy);
  margin: var(--site-hero-title-top) var(--site-zero) var(--site-hero-title-bottom);
}
.hero h1 .accent {
  color: var(--kit-color-brandYellow);
}
.hero h1 .plain {
  color: var(--kit-color-white);
}
.hero__lead {
  font-size: var(--site-text-lead);
  color: var(--kit-color-inkOnBlue);
  max-width: var(--site-hero-lead);
}
.hero__acts {
  display: flex;
  gap: var(--site-hero-acts-gap);
  margin: var(--site-hero-acts-top) var(--site-zero) var(--site-hero-acts-bottom);
  flex-wrap: wrap;
}
.hero__note {
  font-size: var(--site-text-small);
  color: var(--kit-color-inkOnBlue);
  opacity: var(--site-hero-note-fade);
  max-width: var(--site-hero-note);
}
.stage {
  position: relative;
  height: var(--site-stage);
  margin: var(--site-zero) var(--site-stage-side);
}
.stage .laptop {
  position: absolute;
  right: var(--site-laptop-right);
  top: var(--site-laptop-top);
}
.stage .phone {
  position: absolute;
  width: var(--site-hero-phone);
  left: var(--site-hero-phone-left);
  top: var(--site-hero-phone-top);
}

/* ---- the laptop and the phone, each holding a picture of the app ---- */
.laptop {
  width: var(--site-laptop);
  border-radius: var(--site-radius-laptop) var(--site-radius-laptop) var(--site-zero)
    var(--site-zero);
  background: var(--site-color-device);
  padding: var(--site-laptop-pad) var(--site-laptop-pad) var(--site-zero);
  box-shadow: var(--site-shadow-big);
}
.laptop img {
  border-radius: var(--site-radius-screen) var(--site-radius-screen) var(--site-zero)
    var(--site-zero);
}
.laptop::after {
  content: "";
  position: absolute;
  left: var(--site-stand-side);
  right: var(--site-stand-side);
  bottom: var(--site-stand-down);
  height: var(--site-stand-height);
  border-radius: var(--site-zero) var(--site-zero) var(--site-radius-laptop)
    var(--site-radius-laptop);
  background: var(--site-stand);
}
.phone {
  position: absolute;
  width: var(--site-phone);
  border-radius: var(--site-radius-phone);
  background: var(--site-color-device);
  padding: var(--site-phone-pad);
  box-shadow: var(--site-shadow-big);
}
.phone img {
  border-radius: var(--site-radius-phone-screen);
}

/* ---- the note that floats over the pictures ---- */
.note {
  position: absolute;
  background: var(--kit-color-white);
  color: var(--kit-color-ink);
  border-radius: var(--site-radius-tile);
  padding: var(--site-float-pad);
  box-shadow: var(--site-shadow-float);
  display: flex;
  gap: var(--site-float-gap);
  align-items: center;
  font-size: var(--site-text-small);
  line-height: var(--site-leading-tight);
}
.note b {
  font-family: var(--site-font-display);
  font-weight: var(--site-weight-bold);
  font-size: var(--site-text-body);
  display: block;
}
.note small {
  color: var(--kit-color-ink3);
}
.note .tile {
  width: var(--site-float-icon);
  height: var(--site-float-icon);
  border-radius: var(--kit-radius-control);
}
.note .icon {
  width: var(--site-float-glyph);
  height: var(--site-float-glyph);
}
.note--amber .tile {
  background: var(--kit-color-amberSoft);
  color: var(--kit-color-amberInk);
}
.note--green .tile {
  background: var(--kit-color-greenGround);
  color: var(--kit-color-greenInk);
}
.note--first {
  left: var(--site-float-1-left);
  top: var(--site-float-1-top);
}
.note--second {
  right: var(--site-float-2-right);
  bottom: var(--site-float-2-bottom);
}

/* ---- a section and its head ---- */
.section {
  padding: var(--site-section) var(--site-zero);
}
.section--white {
  background: var(--kit-color-white);
}
.section--fade {
  background: var(--site-fade);
  overflow: hidden;
}
.section--who {
  padding-top: var(--site-section-who-top);
}
.head {
  max-width: var(--site-head);
  margin-bottom: var(--site-head-bottom);
}
.head h2 {
  font-size: var(--site-text-section);
  font-weight: var(--site-weight-heavy);
  margin: var(--site-head-title-top) var(--site-zero) var(--site-head-title-bottom);
}
.head p {
  color: var(--kit-color-ink2);
  font-size: var(--site-text-head-lead);
}
.head--center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.head--app {
  margin-bottom: var(--site-head-app-bottom);
}
.band .head {
  margin-bottom: var(--site-zero);
}
.band .head h2 {
  margin-bottom: var(--site-head-ask-bottom);
}
.band .head p {
  color: var(--kit-color-inkOnBlue);
}

/* ---- the card ---- */
.card {
  background: var(--kit-color-white);
  border-radius: var(--kit-radius-phoneCard);
  padding: var(--site-card-pad);
  box-shadow: var(--kit-shadow-card);
}
.card h3 {
  font-weight: var(--site-weight-heavy);
}
.card p {
  color: var(--kit-color-ink2);
}

/* ---- the tile that holds an icon ---- */
.tile {
  display: grid;
  place-items: center;
  flex: none;
}
.tile--blue {
  width: var(--site-tile);
  height: var(--site-tile);
  border-radius: var(--site-radius-tile);
  background: var(--kit-color-surfaceBlue);
  color: var(--kit-color-brandBlue);
  margin-bottom: var(--site-tile-bottom);
}
.tile--blue .icon {
  width: var(--site-tile-glyph);
  height: var(--site-tile-glyph);
}
.tile--yellow {
  width: var(--site-do-tile);
  height: var(--site-do-tile);
  border-radius: var(--site-radius-icon);
  background: var(--kit-color-brandYellow);
  color: var(--kit-color-ink);
}
.tile--yellow .icon {
  width: var(--kit-icon-tile);
  height: var(--kit-icon-tile);
}
.tile--small {
  width: var(--site-app-icon);
  height: var(--site-app-icon);
  border-radius: var(--kit-radius-control);
  background: var(--kit-color-surfaceBlue);
  color: var(--kit-color-brandBlue);
}
.tile--glass {
  width: var(--site-contact-icon);
  height: var(--site-contact-icon);
  border-radius: var(--site-radius-icon);
  background: var(--site-glass-contact);
}

/* ---- the grids the cards stand in ---- */
.grid {
  display: grid;
  gap: var(--site-grid-gap);
}
.grid--save {
  grid-template-columns: var(--site-save-cols);
  gap: var(--site-save-gap);
}
.grid--save .card {
  padding: var(--site-save-pad);
}
.grid--save h3 {
  font-size: var(--site-save-title);
  margin-bottom: var(--site-card-title-bottom);
}
.grid--save p {
  font-size: var(--site-save-text);
}
.grid--do {
  grid-template-columns: var(--site-do-cols);
}
.grid--do .card {
  display: flex;
  gap: var(--site-do-gap);
}
.grid--do h3 {
  font-size: var(--site-text-step-title);
  margin-bottom: var(--site-do-title-bottom);
}
.grid--do p {
  font-size: var(--site-text-body);
}
.grid--who {
  grid-template-columns: var(--site-who-cols);
}
.grid--who h3 {
  font-size: var(--site-text-who-title);
  margin: var(--site-who-title-top) var(--site-zero) var(--site-who-title-bottom);
}

/* ---- the five steps ---- */
.steps {
  display: grid;
  grid-template-columns: var(--site-steps-cols);
  gap: var(--site-steps-gap);
  position: relative;
  list-style: none;
}
.steps::before {
  content: "";
  position: absolute;
  left: var(--site-steps-line-left);
  right: var(--site-steps-line-right);
  top: var(--site-steps-line-top);
  bottom: var(--site-steps-line-bottom);
  width: var(--site-steps-line-width);
  height: var(--site-steps-line-height);
  background: repeating-linear-gradient(
    var(--site-steps-line-turn),
    var(--kit-color-brandYellow) var(--site-zero) var(--site-dash),
    transparent var(--site-dash) var(--site-dash-gap)
  );
}
.step {
  position: relative;
  display: var(--site-step);
  grid-template-columns: var(--site-step-cols);
  gap: var(--site-step-gap);
  align-items: center;
  text-align: var(--site-step-align);
  padding: var(--site-zero) var(--site-step-side);
}
.step__dot {
  width: var(--site-dot);
  height: var(--site-dot);
  border-radius: var(--site-round);
  margin: var(--site-dot-centre);
  background: var(--site-band);
  color: var(--kit-color-white);
  display: grid;
  place-items: center;
  box-shadow: var(--site-shadow-dot);
  position: relative;
  border: var(--kit-line-edge) solid var(--kit-color-white);
  outline: var(--site-line-ring) solid var(--kit-color-surfaceBlue);
}
.step__dot .icon {
  width: var(--kit-icon-calendar);
  height: var(--kit-icon-calendar);
}
.step__number {
  position: absolute;
  right: var(--site-dot-number-out);
  top: var(--site-dot-number-out);
  width: var(--site-dot-number);
  height: var(--site-dot-number);
  border-radius: var(--site-round);
  background: var(--kit-color-brandYellow);
  color: var(--kit-color-ink);
  font-family: var(--site-font-display);
  font-weight: var(--site-weight-heavy);
  font-size: var(--site-text-small);
  display: grid;
  place-items: center;
}
.step h3 {
  font-size: var(--site-text-step-title);
  font-weight: var(--site-weight-heavy);
  margin-bottom: var(--site-step-title-bottom);
}
.step p {
  color: var(--kit-color-ink2);
  font-size: var(--site-text-step);
}

/* ---- the app: the list beside the two phones ---- */
.split {
  display: grid;
  grid-template-columns: var(--site-app-cols);
  gap: var(--site-app-gap);
  align-items: center;
}
.split--ask {
  grid-template-columns: var(--site-ask-cols);
  align-items: start;
}
.points {
  list-style: none;
  display: grid;
  gap: var(--site-app-list-gap);
  margin-top: var(--site-app-list-top);
}
.points li {
  display: flex;
  gap: var(--site-app-row-gap);
  align-items: flex-start;
  font-size: var(--site-text-row);
  color: var(--kit-color-ink2);
}
.points b {
  display: block;
  color: var(--kit-color-ink);
  font-family: var(--site-font-display);
  font-size: var(--site-text-list-title);
  font-weight: var(--site-weight-heavy);
}
.phones {
  position: relative;
  height: var(--site-phones);
}
.phones .phone {
  width: var(--site-phones-phone);
}
.phone--left {
  left: var(--site-phone-1-left);
  top: var(--site-phone-1-top);
  transform: var(--site-tilt-left);
}
.phone--right {
  right: var(--site-phone-2-right);
  top: var(--site-phone-2-top);
  transform: var(--site-tilt-right);
}

/* ---- the tag on a card, and its list of ticks ---- */
.tag {
  display: inline-flex;
  height: var(--site-tag);
  align-items: center;
  padding: var(--site-zero) var(--site-tag-side);
  border-radius: var(--kit-radius-round);
  font-family: var(--site-font-display);
  font-weight: var(--site-weight-bold);
  font-size: var(--site-text-caps);
  background: var(--kit-color-surfaceBlue);
  color: var(--kit-color-brandBlue);
}
.tag--yellow {
  background: var(--kit-color-brandYellow);
  color: var(--kit-color-ink);
}
.ticks {
  list-style: none;
  display: grid;
  gap: var(--site-who-list-gap);
}
.ticks li {
  display: flex;
  gap: var(--site-who-row-gap);
  color: var(--kit-color-ink2);
  font-size: var(--site-text-body);
}
.ticks .tick {
  width: var(--site-tick);
  height: var(--site-tick);
  margin-top: var(--site-tick-top);
  border-radius: var(--site-round);
  background: var(--kit-color-greenGround);
  color: var(--kit-color-greenInk);
  display: grid;
  place-items: center;
  flex: none;
}
.ticks .tick .icon {
  width: var(--site-tick-glyph);
  height: var(--site-tick-glyph);
}

/* ---- the contact lines on the band ---- */
.contact {
  display: grid;
  gap: var(--site-contact-gap);
  margin-top: var(--site-contact-top);
}
.contact a {
  display: flex;
  gap: var(--site-contact-gap);
  align-items: center;
  font-family: var(--site-font-display);
  font-weight: var(--site-weight-bold);
  font-size: var(--site-text-list-title);
}
.aside {
  margin-top: var(--site-already-top);
  padding: var(--site-already-pad);
  border-radius: var(--site-radius-tile);
  background: var(--site-glass-note);
  font-size: var(--site-text-body);
  color: var(--kit-color-inkOnBlue);
}
.aside b {
  color: var(--kit-color-white);
  font-family: var(--site-font-display);
}
.ask {
  border-top: var(--kit-line-edge) solid var(--kit-color-brandYellow);
}

/* ---- the form and its fields ---- */
.form {
  background: var(--kit-color-white);
  color: var(--kit-color-ink);
  border-radius: var(--site-radius-form);
  padding: var(--site-form-pad);
  box-shadow: var(--site-shadow-big);
  display: grid;
  grid-template-columns: var(--site-form-cols);
  gap: var(--site-form-gap);
}
.form h3 {
  grid-column: var(--site-full);
  font-size: var(--site-text-card-title);
  font-weight: var(--site-weight-heavy);
}
.field {
  display: grid;
  align-content: start;
  gap: var(--site-label-gap);
  font-size: var(--site-text-small);
  font-weight: var(--site-weight-label);
  color: var(--kit-color-ink2);
}
.field--full {
  grid-column: var(--site-full);
}
.field small {
  font-weight: var(--site-weight-body);
  color: var(--kit-color-ink3);
}
.field input,
.field textarea {
  font: inherit;
  font-size: var(--site-field-text);
  font-weight: var(--site-weight-body);
  color: var(--kit-color-ink);
  height: var(--site-field);
  border: var(--site-line-thin) solid var(--kit-color-line);
  border-radius: var(--kit-radius-control);
  padding: var(--site-zero) var(--site-field-side);
  background: var(--kit-color-white);
  outline: none;
}
.field textarea {
  height: var(--site-note-field);
  padding: var(--site-note-field-top) var(--site-field-side);
  resize: vertical;
}
.field input:focus,
.field textarea:focus {
  border-color: var(--kit-color-brandBlue);
  box-shadow: var(--site-ring);
}
.field [aria-invalid="true"] {
  border-color: var(--kit-color-redWeb);
}
.field__error {
  color: var(--kit-color-redWeb);
  font-weight: var(--site-weight-body);
  font-size: var(--site-text-fine);
}
.field__error:empty {
  display: none;
}
.form__fine {
  grid-column: var(--site-full);
  font-size: var(--site-text-fine);
  color: var(--kit-color-ink3);
  text-align: center;
}
.form__said {
  grid-column: var(--site-full);
  font-size: var(--site-text-small);
  color: var(--kit-color-redWeb);
  background: var(--kit-color-redSoft);
  border-radius: var(--kit-radius-control);
  padding: var(--site-float-pad);
}
.form__said:empty {
  display: none;
}
.form__check {
  grid-column: var(--site-full);
}
.form__check:empty {
  display: none;
}
.form--sent {
  display: block;
  text-align: center;
}
.form__thanks {
  grid-column: var(--site-full);
  font-family: var(--site-font-display);
  font-size: var(--site-text-card-title);
  font-weight: var(--site-weight-heavy);
}

/* ---- the footer ---- */
.footer {
  background: var(--site-color-footer);
  color: var(--site-color-footer-ink);
  padding: var(--site-footer-top) var(--site-zero) var(--site-footer-bottom);
  font-size: var(--site-text-footer);
}
.footer .wrap {
  display: grid;
  grid-template-columns: var(--site-footer-cols);
  gap: var(--site-footer-gap);
}
.footer h4 {
  font-family: var(--site-font-display);
  color: var(--kit-color-white);
  font-size: var(--site-text-caps);
  letter-spacing: var(--kit-font-tracking-caps);
  text-transform: uppercase;
  margin-bottom: var(--site-footer-head-bottom);
}
.footer p {
  margin-bottom: var(--site-footer-line-bottom);
}
.footer a:hover {
  color: var(--kit-color-white);
}
.footer .brand {
  margin-bottom: var(--site-footer-head-bottom);
}
.legal {
  max-width: var(--site-wrap);
  margin: var(--site-legal-top) auto var(--site-zero);
  padding: var(--site-legal-pad) var(--site-legal-pad) var(--site-zero);
  border-top: var(--site-line-thin) solid var(--site-glass-rule);
  display: flex;
  flex-direction: var(--site-legal-flow);
  gap: var(--site-legal-gap);
  justify-content: space-between;
  font-size: var(--site-text-fine);
  color: var(--site-color-legal-ink);
}