/* peppr. v2 — one stylesheet, mobile-first.
   Two inks on white paper: ink (#0B0C0E) and peppr cyan (#00AFF1).
   Cyan never carries small text on white (2.5:1); it is a fill, with ink on top (7.8:1). */

/* ---------- Fonts (self-hosted, variable 400–900) ---------- */
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fonts/schibsted-grotesk-latin-ext.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fonts/schibsted-grotesk-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */
:root {
  color-scheme: light; /* light-only by design; stops auto dark modes from inverting it */
  --paper: #ffffff;
  --ink: #0b0c0e;          /* 19.6:1 on paper */
  --ink-2: #4f5051;        /* secondary text, 8.1:1 */
  --ink-3: #6d6d6e;        /* meta text, 5.2:1 */
  --ink-hint: #717273;     /* placeholders, 4.8:1 */
  --edge: #919293;         /* control borders, 3.1:1 (WCAG 1.4.11) */
  --line: rgba(11, 12, 14, 0.12);
  --line-2: rgba(11, 12, 14, 0.2);
  --wash: #f4f5f6;
  --canvas: #f6f8fa;       /* design-board background */
  /* Sections are rounded panels on the white page, alternating grey and cyan, with a thin white gap
     between them, so the space around each section belongs to a colour instead of hanging empty. */
  --panel-gap: clamp(6px, 1vw, 14px);
  --panel-r: clamp(22px, 2.6vw, 36px);
  --panel: radial-gradient(rgba(11, 12, 14, 0.06) 1px, transparent 1.3px) 0 0 / 22px 22px, #f2f4f7;
  --panel-cyan: radial-gradient(rgba(0, 175, 241, 0.2) 1.2px, transparent 1.5px) 0 0 / 22px 22px, #ecf7fd;
  --cyan: #00aff1;         /* the one colour */
  --cyan-glow: rgba(0, 175, 241, 0.38);
  --error: #b42318;        /* validation only, 6.6:1 */

  --font: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  /* --display-scale: heading sizes are multiplied by it. 1 here; unbounded.css (the heading font) sets its own. */
  --r-control: 12px;
  --r-box: 24px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --wrap: 1320px;
  --gutter: clamp(16px, 4vw, 40px);
  --header-h: 64px;
}
@media (min-width: 900px) {
  :root { --header-h: 76px; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
@media (max-width: 899px) {
  html { scroll-padding-top: 12px; } /* the header doesn't stick on phones */
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, figure, dl, dd { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
::selection { background: var(--cyan); color: var(--ink); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
[hidden] { display: none !important; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.skip {
  position: absolute; left: 12px; top: -100px; z-index: 100;
  padding: 12px 16px; border-radius: 10px;
  background: var(--ink); color: #fff; font-weight: 600; text-decoration: none;
}
.skip:focus { top: 12px; }

/* Inline text links: ink text, cyan underline. */
.faq__more a, .done__small a, .check a, .apply__noscript a, .apply__alert a, .doc a {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--cyan);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.faq__more a:hover, .done__small a:hover, .check a:hover, .doc a:hover { text-decoration-color: var(--ink); }

/* ---------- Type ---------- */
.display {
  font-weight: 900;
  font-size: calc(clamp(2.4rem, 1.3rem + 4.6vw, 5.25rem) * var(--display-scale, 1));
  /* Sized to its column, so the headline keeps the same three-line shape on every screen. */
  font-size: calc(clamp(2.3rem, 12.6cqi, 5.4rem) * var(--display-scale, 1));
  line-height: 0.96;
  letter-spacing: -0.038em;
  text-wrap: balance;
}
.h2 {
  font-weight: 800;
  font-size: calc(clamp(2rem, 1.2rem + 2.1vw, 3rem) * var(--display-scale, 1));
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.lede {
  font-size: clamp(1.0625rem, 0.98rem + 0.45vw, 1.3125rem);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 34em;
  text-wrap: pretty;
}

/* ---------- Logo ---------- */
.logo {
  font-weight: 800;
  font-size: 1.75rem;
  line-height: 1;
  letter-spacing: -0.05em;
  text-decoration: none;
  padding: 4px 2px;
  margin-left: -2px;
}
.logo { display: inline-flex; align-items: center; }
/* The pepper mark: an SVG mask filled with the brand cyan. */
.logo::before {
  content: "";
  flex: none;
  width: 0.8em;
  height: 1.08em;
  margin: -0.1em 0.14em 0 0;
  background: var(--cyan);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='9 3 44 60'%3E%3Cpath d='M27 27C33 23.5 43 23.5 49 27C51 40 45 52 33 57C26 60 18 61 11 60C19 56 26 50 29 41C31 35 29 31 27 27ZM26 23C32 19.5 44 19.5 50 23C49 18 44 15 38 15C32 15 27 18 26 23Z'/%3E%3Cpath d='M38 16C38 10 41 7 46 5.5' fill='none' stroke='black' stroke-width='3.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='9 3 44 60'%3E%3Cpath d='M27 27C33 23.5 43 23.5 49 27C51 40 45 52 33 57C26 60 18 61 11 60C19 56 26 50 29 41C31 35 29 31 27 27ZM26 23C32 19.5 44 19.5 50 23C49 18 44 15 38 15C32 15 27 18 26 23Z'/%3E%3Cpath d='M38 16C38 10 41 7 46 5.5' fill='none' stroke='black' stroke-width='3.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.logo__dot { color: var(--cyan); }
.logo--sm { font-size: 1.5rem; }

/* ---------- Buttons ---------- */
.btn {
  --h: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--h);
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  font-weight: 650;
  font-size: 1.0625rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.16s, color 0.16s, transform 0.1s;
}
.btn:active { transform: translateY(1px); }
.btn--cyan { background: var(--cyan); color: var(--ink); }
.btn--ink { background: var(--ink); color: #fff; }
@media (hover: hover) {
  .btn--cyan:hover { background: var(--ink); color: #fff; }
  .btn--ink:hover { background: var(--cyan); color: var(--ink); }
}
.btn--sm { --h: 40px; padding: 0 18px; font-size: 0.9375rem; }
.btn--lg { --h: 58px; padding: 0 30px; font-size: 1.125rem; }
.btn--block { display: flex; width: 100%; }
.btn[aria-busy="true"] { cursor: progress; }

/* ---------- Header ---------- */
.top {
  position: relative;
  z-index: 20;
  background: var(--paper);
  transition: box-shadow 0.2s;
}
.top__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  height: var(--header-h);
}
.top__nav { display: none; }
.top__cta { margin-left: auto; }
@media (min-width: 900px) {
  .top { position: sticky; top: 0; }
  .top.is-scrolled { box-shadow: 0 1px 0 var(--line); }
  .top__nav { display: flex; gap: 28px; margin-left: auto; }
  .top__nav a {
    font-size: 0.9375rem;
    font-weight: 550;
    color: var(--ink-2);
    text-decoration: none;
    padding: 6px 0;
  }
  .top__nav a:hover {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--cyan);
    text-decoration-thickness: 2px;
    text-underline-offset: 7px;
  }
  .top__cta { margin-left: 8px; }
}

/* ---------- 1 · Hero ----------
   Phone: status, headline, text, button, photo, and the facts card overlapping the photo.
   Desktop: text column (facts under the button) next to the photo. */
.hero {
  padding-block: clamp(8px, 2.5vw, 40px) clamp(56px, 8vw, 104px);
  background: radial-gradient(ellipse 70% 55% at 76% 60%, rgba(0, 175, 241, 0.14), transparent 72%);
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "status" "title" "lede" "cta" "photo" "facts";
  container-type: inline-size;
}
.hero__status { grid-area: status; }
.hero .display { grid-area: title; }
.hero__lede { grid-area: lede; }
.hero__cta { grid-area: cta; }
.hero__photo { grid-area: photo; }
.hero__facts { grid-area: facts; }
.hero__status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink-2);
}
.hero__dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cyan);
}
.hero__lede {
  margin-top: 20px;
  max-width: 25em;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  line-height: 1.5;
}
.hero__lede strong { display: block; margin-top: 4px; color: var(--ink); font-weight: 600; }
/* Phones: a bigger headline (it wraps to four lines instead of three; 16cqi is the limit before a word
   overflows on a 320px screen) and a smaller lede under it. Later rules still win on tablets and desktop. */
@media (max-width: 699px) {
  .hero .display { font-size: calc(clamp(2.3rem, 15.5cqi, 5.4rem) * var(--display-scale, 1)); }
  .hero__lede { font-size: 0.96875rem; }
}
.hero__cta { margin-top: 30px; }
.hero__cta .btn { width: 100%; }
.hero__photo { position: relative; min-width: 0; margin-top: 32px; }
.hero__photo img {
  box-shadow: rgba(14, 42, 64, 0.22) 3px 5px 30px 0; /* the only shadow on the page, tinted to the cool canvas */
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r-box);
  background: var(--wash);
}
/* On phones the facts sit on a white card that overlaps the bottom of the photo. */
.hero__facts {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: -56px 10px 0;
  padding: 16px 6px 16px 16px;
  border: 1px solid var(--line-2);
  border-radius: 18px;
  background: var(--paper);
}
.hero__fact { padding-right: 8px; }
.hero__fact + .hero__fact { padding-left: 12px; border-left: 1px solid var(--line); }
.hero__fact dt {
  font-weight: 800;
  font-size: calc(clamp(1.25rem, 1.05rem + 1vw, 1.875rem) * var(--display-scale, 1));
  line-height: 1.05;
  letter-spacing: -0.03em;
  white-space: nowrap;
}
.hero__fact dd { margin-top: 4px; font-size: 0.8125rem; line-height: 1.35; color: var(--ink-2); }
@media (min-width: 480px) {
  .hero__fact dd { font-size: 0.875rem; }
}
@media (min-width: 560px) {
  .hero__cta .btn { width: auto; min-width: 260px; }
}
@media (min-width: 700px), (min-width: 560px) and (max-height: 540px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    grid-template-rows: 1fr auto auto auto auto auto 1fr;
    grid-template-areas:
      ".      photo"
      "status photo"
      "title  photo"
      "lede   photo"
      "cta    photo"
      "facts  photo"
      ".      photo";
    column-gap: clamp(40px, 5vw, 80px);
  }
  .hero .display { font-size: calc(clamp(2.3rem, 4.8cqi, 4.25rem) * var(--display-scale, 1)); } /* two lines on desktop */
  .hero__status { margin-bottom: 24px; }
  .hero__lede { margin-top: 26px; }
  .hero__cta { margin-top: 36px; }
  .hero__photo { margin-top: 0; align-self: center; }
  .hero__facts {
    max-width: 520px;
    margin: 30px 0 0;
    padding: 16px 0 0;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    background: none;
  }
  .hero__fact { padding-right: 10px; }
  .hero__fact + .hero__fact { padding-left: 16px; }
}
/* Phones in landscape: size by height so the button stays on the first screen. */
@media (min-width: 560px) and (max-height: 540px) {
  .hero .display { font-size: calc(clamp(1.9rem, 9.5svh, 3.4rem) * var(--display-scale, 1)); }
  .hero__status { margin-bottom: 10px; }
  .hero__lede { margin-top: 12px; font-size: 1rem; }
  .hero__cta { margin-top: 16px; }
  .hero__facts { margin-top: 18px; }
  .hero__photo { justify-self: end; }
  .hero__photo img { width: auto; max-height: calc(100svh - var(--header-h) - 24px); }
}
@media (min-width: 560px) and (max-height: 420px) {
  .hero__lede { display: none; } /* said again in "Ki mit csinál?" */
}
/* Desktop: the hero fills the first screen, with a bigger photo and a three-line headline
   that is clearly the largest type on the page. */
@media (min-width: 1000px) and (min-height: 600px) {
  .hero {
    display: grid;
    align-content: center;
    min-height: min(calc(100svh - var(--header-h)), 1000px);
    padding-block: 24px 64px;
  }
  .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.84fr); column-gap: clamp(48px, 5vw, 88px); }
  .hero .display { font-size: calc(clamp(3rem, min(5.5vw, 9.6svh), 5.5rem) * var(--display-scale, 1)); line-height: 0.94; }
  .hero__lede { max-width: 24em; font-size: 1.3125rem; }
  .hero__photo img { max-height: calc(100svh - var(--header-h) - 88px); }
  /* Desktop only: the three facts sit side by side in one dark bar. Phones keep the light strip. */
  .hero__facts {
    max-width: 600px;
    margin-top: 36px;
    padding: 10px;
    border-radius: 24px;
    background: var(--ink);
    color: #fff;
  }
  .hero__fact { padding: 16px 18px; }
  .hero__fact + .hero__fact { padding-left: 22px; border-left-color: rgba(255, 255, 255, 0.16); }
  .hero__fact:first-child dt { color: var(--cyan); }
  .hero__fact dt { font-size: calc(1.75rem * var(--display-scale, 1) * 1.15); }
  .hero__fact dd { margin-top: 6px; color: rgba(255, 255, 255, 0.72); }
}

/* ---------- Sections ---------- */
.section,
.closer {
  margin: var(--panel-gap) var(--panel-gap) 0;
  border-radius: var(--panel-r);
}
.section { padding-block: clamp(48px, 6vw, 88px); background: var(--panel); }
.section--tint { background: var(--panel-cyan); }
.section__head {
  display: grid;
  gap: 16px;
  max-width: 46rem;
  margin-bottom: clamp(28px, 4vw, 48px);
}
/* Desktop: a heading with an intro line uses the width, heading left and text right. */
@media (min-width: 1000px) {
  .section__head:has(> .lede) {
    max-width: none;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
    column-gap: clamp(40px, 5vw, 88px);
  }
  .section__head:has(> .lede) .lede { max-width: 30em; }
}

/* ---------- 2 · Who does what ----------
   Phones: the tiles stack like a deck while scrolling (see "Deck" below the timeline).
   Desktop: the white "Te" panel and the cyan team panel side by side, with their rows lined up. */
#mit-csinalunk { background: var(--panel-cyan); }
.who { display: grid; gap: 12px; }
.who__side {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(18px, 3vw, 32px);
  border-radius: var(--r-box);
}
.who__side--te { background: var(--paper); }
.who__side--mi { background: var(--cyan); }
.who__label {
  display: flex;
  align-items: center;
  gap: 14px;
  font-weight: 800;
  font-size: calc(clamp(1.875rem, 1.5rem + 1.3vw, 2.5rem) * var(--display-scale, 1));
  line-height: 0.95;
  letter-spacing: -0.045em;
}
/* Avatars: the creator (photo, eyes covered) and the team (the pepper). */
.who__label::before {
  content: "";
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
}
.who__side--te .who__label::before { background: url("../img/av-kitti.jpg") center / cover no-repeat; }
.who__side--mi .who__label::before { background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='9 3 44 60'%3E%3Cpath fill='%2300AFF1' d='M27 27C33 23.5 43 23.5 49 27C51 40 45 52 33 57C26 60 18 61 11 60C19 56 26 50 29 41C31 35 29 31 27 27ZM26 23C32 19.5 44 19.5 50 23C49 18 44 15 38 15C32 15 27 18 26 23Z'/%3E%3Cpath d='M38 16C38 10 41 7 46 5.5' fill='none' stroke='%2300AFF1' stroke-width='3.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 24px auto no-repeat; }
.who__list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.who__side--te .who__list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 16px;
  background: var(--wash);
  font-size: 1.0625rem;
  line-height: 1.45;
}
.who__side--te .who__list li::before {
  content: "";
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--cyan) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3.2 3.2L17 8.8' fill='none' stroke='%230B0C0E' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
}
/* Tiles wrap and the last row stretches, so any number of services fills the panel. */
.who__list--rows { display: flex; flex-wrap: wrap; gap: 10px; }
.who__list--rows li {
  flex: 1 1 100%;
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 16px 18px 18px;
  border-radius: 16px;
  background: var(--paper);
}
.who__list--rows strong { font-weight: 750; font-size: 1.0625rem; letter-spacing: -0.01em; }
.who__list--rows span { font-size: 0.9375rem; line-height: 1.45; color: var(--ink-2); }
@media (min-width: 900px) {
  .who { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 16px; align-items: stretch; }
  .who__side { gap: 22px; }
  .who__side .who__list { flex: 1; }
  .who__side--te .who__list { grid-auto-rows: 1fr; }
  .who__side--te .who__list li { align-items: center; padding: 18px 20px; }
  .who__list--rows { align-content: stretch; }
  .who__list--rows li { flex-basis: calc(50% - 10px); align-content: center; padding: 18px 20px 20px; }
}

/* ---------- Gallery: every photo in full (natural shape), the end of "Ki mit csinál" ----------
   2 columns on phones, 3 on tablets, a staggered row on desktop. */
.gallery { margin-top: clamp(28px, 4vw, 48px); }
.gallery__grid { columns: 2; column-gap: 10px; margin: 0; padding: 0; list-style: none; }
.gallery__grid li { break-inside: avoid; margin-bottom: 10px; }
.gallery__grid img {
  width: 100%;
  height: auto;
  border-radius: 18px;
  background: var(--wash);
  box-shadow: rgba(14, 42, 64, 0.12) 2px 4px 20px 0;
}
@media (min-width: 700px) {
  .gallery__grid { columns: 3; column-gap: 14px; }
  .gallery__grid li { margin-bottom: 14px; }
}
@media (min-width: 1000px) {
  /* a grid here, because column layouts drop top margins at column breaks (no stagger) */
  .gallery__grid { columns: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: start; }
  .gallery__grid li { margin-bottom: 0; }
  .gallery__grid li:nth-child(even) { margin-top: 40px; }
}
/* Phones (main.js adds .is-pile): the pile scrolls with the page, right under the team panel, and the photos
   slide in from the right with the scroll, each onto the ones before. A landed photo stays put (--x / --r). */
@media (max-width: 699px) {
  .gallery.is-pile {
    --pile-w: min(72vw, 300px, (100svh - 120px) / 1.34); /* fits low screens too */
    height: calc(var(--pile-w) * 1.34 + 72px);
  }
  .is-pile .gallery__stage {
    position: relative;
    height: 100%;
    margin-inline: calc(var(--gutter) * -1); /* full width, so photos come in from the screen edge */
    overflow-x: clip;                        /* and the waiting ones never widen the page */
    touch-action: pan-y pinch-zoom;          /* sideways drags go to the swipe, up/down still scrolls */
  }
  .is-pile .gallery__grid { position: relative; height: 100%; columns: auto; }
  .is-pile .gallery__grid li {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--pile-w);
    margin: 0;
    translate: -50% -50%;
    will-change: transform;
  }
  /* the spots in the pile, bottom (0) to top (3): loose, so the ones underneath peek out */
  .is-pile .gallery__grid li[data-slot="0"] { --x: -20px; --r: -6deg; }
  .is-pile .gallery__grid li[data-slot="1"] { --x: -6px; --r: 3deg; }
  .is-pile .gallery__grid li[data-slot="2"] { --x: 8px; --r: -3deg; }
  .is-pile .gallery__grid li[data-slot="3"] { --x: 18px; --r: 4deg; }
  .is-pile .gallery__grid img {
    box-shadow: rgba(14, 42, 64, 0.26) 0 12px 32px 0;
    -webkit-user-drag: none;
    -webkit-touch-callout: none; /* no "save image" menu in the middle of a swipe */
    user-select: none;
  }
  /* Swipe (see main.js): photos glide to their new spots, the dragged one follows the finger,
     a thrown one leaves fast. */
  .is-pile.is-settled .gallery__grid li { transition: transform 0.45s var(--ease); }
  .is-pile .gallery__grid li.is-dragging { transition: none; }
  .is-pile .gallery__grid li.is-flying { transition: transform 0.3s cubic-bezier(0.4, 0, 1, 1); }
  .is-pile.is-hint .is-top img { animation: pile-hint 1s var(--ease) 0.4s; }
}

/* Phones (main.js adds .is-on): once the last team card has landed on its stack, the team panel and the pile
   stay put together while the photos come in; the track is the scroll that takes (--pile-n = photos). */
@media (max-width: 699px) {
  .who-pin.is-on .who-pin__body { position: sticky; } /* top: set by main.js */
  .who-pin.is-on .who-pin__track { height: calc(var(--pile-n, 4) * 30svh); }
}
@keyframes pile-hint {
  0%, 100% { translate: 0 0; }
  35% { translate: 28px 0; }
  70% { translate: -4px 0; }
}

/* ---------- 3 · Timeline: time labels do the work numbers usually do ---------- */
.timeline {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.timeline__item {
  position: relative;
  display: grid; /* the card fills the step, so desktop cards are equally tall */
  padding: 0 0 14px 38px;
}
.timeline__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20px; /* level with the time pill; main.js reads the same offset */
  width: 16px;
  height: 16px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
}
.timeline__item:first-child::before { background: var(--cyan); border-color: var(--cyan); }
.timeline__item::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 42px;
  bottom: -14px; /* down to just above the next dot */
  width: 2px;
  background: var(--line-2);
}
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item:last-child::after { display: none; }
.timeline__card {
  padding: 16px 18px 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--paper);
}
.timeline__when {
  display: inline-block;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--cyan);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.3;
}
.timeline__what {
  margin-top: 10px;
  font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.025em;
}
.timeline__text { margin-top: 6px; max-width: 26em; color: var(--ink-2); }
.timeline__cta { margin-top: clamp(24px, 3.5vw, 40px); }
@media (max-width: 559px) { .timeline__cta .btn { width: 100%; } }
@media (min-width: 900px) {
  .timeline { grid-template-columns: repeat(4, 1fr); gap: 32px; }
  .timeline__item { padding: 38px 0 0; }
  .timeline__item::before { top: 0; }
  .timeline__item::after { left: 24px; right: -24px; top: 7px; bottom: auto; width: auto; height: 2px; }
}

/* Timeline motion (main.js adds .is-live): the line fills with the scroll, each step lights up when reached,
   the current one gets a soft halo. Without JS or with reduced motion the static timeline above stays. */
.timeline.is-live .timeline__item::before {
  border-color: var(--edge);
  background: var(--paper);
  transition: background-color 0.3s, border-color 0.3s, box-shadow 0.35s, transform 0.35s var(--ease);
}
.timeline.is-live .timeline__item.is-on::before { border-color: var(--cyan); background: var(--cyan); }
.timeline.is-live .timeline__item.is-current::before { box-shadow: 0 0 0 7px rgba(0, 175, 241, 0.2); transform: scale(1.12); }
.timeline.is-live .timeline__item::after {
  background: linear-gradient(to bottom, var(--cyan) calc(var(--fill, 0) * 100%), var(--line-2) 0);
}
.timeline.is-live .timeline__card {
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease), border-color 0.3s, box-shadow 0.35s;
}
.timeline.is-live .timeline__item:not(.is-on) .timeline__card { opacity: 0.45; transform: translateY(8px); }
.timeline.is-live .timeline__item.is-current .timeline__card { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(0, 175, 241, 0.16); }
@media (min-width: 900px) {
  .timeline.is-live .timeline__item::after {
    background: linear-gradient(to right, var(--cyan) calc(var(--fill, 0) * 100%), var(--line-2) 0);
  }
}

/* ---------- Vélemények ----------
   Desktop: the heading and every quote on the left; on the right two overlapping photos that stay in view.
   Phones: heading, the quotes (they stack like the "Ki mit csinál" deck), then the photos. */
.fit { display: grid; gap: 32px; }
.fit__col { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.fit__card {
  display: grid;
  gap: 12px;
  padding: 18px 20px 20px;
  border-radius: 18px;
  background: var(--paper);
  border: 1px solid var(--line);
}
.fit__card p { font-size: 0.9375rem; line-height: 1.5; }
#velemenyek { background: radial-gradient(ellipse 40% 55% at 78% 50%, rgba(0, 175, 241, 0.13), transparent 72%), var(--panel); }
.fit__card .quote__earn {
  justify-self: start;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--cyan);
  font-size: 0.875rem;
  line-height: 1.2;
}
.quote__earn strong { font-weight: 800; letter-spacing: -0.01em; }
.quote__who { display: flex; align-items: center; gap: 12px; }
.quote__avatar {
  object-fit: cover;
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--cyan);
  font-weight: 800;
  font-size: 1.0625rem;
}
.quote__name { display: grid; line-height: 1.25; }
.quote__name strong { font-weight: 750; font-size: 1rem; }
.quote__name small { font-size: 0.8125rem; color: var(--ink-3); }
.quote__stars { margin-left: auto; color: var(--cyan); font-size: 0.875rem; letter-spacing: 0.08em; }
.sample-note {
  justify-self: start;
  padding: 6px 12px;
  border: 1px dashed var(--edge);
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-3);
}
/* Two photos in the same frame (rounded, white print edge): one top right, the other overlapping its
   corner bottom left. The box's 5:7 shape holds both (each 64% of its width, 4:5). */
.fit__photos { position: relative; width: min(100%, 440px); aspect-ratio: 5 / 7; margin-inline: auto; }
.fit__photo { position: absolute; width: 64%; margin: 0; }
.fit__photo:first-child { top: 0; right: 0; }
.fit__photo:last-child { bottom: 0; left: 0; }
.fit__photo img {
  box-shadow: 0 0 0 6px var(--paper), rgba(14, 42, 64, 0.22) 3px 5px 30px 0; /* shadow tinted to the cool canvas */
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 24px;
  background: var(--wash);
}
.fit__photo:first-child img { object-position: 50% 20%; }
@media (min-width: 900px) {
  .fit { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: clamp(40px, 5vw, 88px); }
  .fit__col { gap: 14px; }
  .fit__card { padding: 20px 22px 22px; }
  .fit__photos {
    position: sticky;
    top: calc(var(--header-h) + 32px);
    width: min(100%, 520px, (100svh - var(--header-h) - 64px) * 0.69); /* always fits the screen */
    margin: 0 0 0 auto;
  }
}

/* ---------- Deck: on phones the "Ki mit csinál" cards stack while scrolling ----------
   Each card sticks a little lower than the one before, so the next slides over it;
   main.js shrinks the covered card slightly. */
@media (max-width: 899px) {
  .who__list > li,
  .fit__col > li {
    position: sticky;
    top: calc(12px + var(--n, 0) * 9px);
    transform-origin: 50% 0;
    box-shadow: 0 -6px 18px rgba(11, 12, 14, 0.07);
    will-change: transform;
  }
  .who__list > li:nth-child(2), .fit__col > li:nth-child(2) { --n: 1; }
  .who__list > li:nth-child(3), .fit__col > li:nth-child(3) { --n: 2; }
  .who__list > li:nth-child(4), .fit__col > li:nth-child(4) { --n: 3; }
  .who__list > li:nth-child(5), .fit__col > li:nth-child(5) { --n: 4; }
  .who__list > li:nth-child(6), .fit__col > li:nth-child(6) { --n: 5; }
}

/* ---------- 4 · Application form ---------- */
.apply-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "intro" "card" "assure";
  gap: 24px;
}
.apply-side { display: contents; }
.apply-intro { grid-area: intro; display: grid; gap: 14px; align-content: start; }
.apply { grid-area: card; }
.assure { grid-area: assure; }
.apply-intro .h2:focus { outline: none; }
.apply-intro .h2:focus-visible { outline: 3px solid var(--ink); outline-offset: 6px; border-radius: 4px; }
.assure {
  display: grid;
  gap: 10px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}
.assure li {
  display: flex;
  gap: 12px;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--ink-2);
}
.assure li::before {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--cyan) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3.2 3.2L17 8.8' fill='none' stroke='%230B0C0E' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat;
}
@media (min-width: 900px) {
  .apply-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas: "side card";
    gap: clamp(40px, 6vw, 96px);
    align-items: start;
  }
  .apply-side {
    grid-area: side;
    display: grid;
    gap: 28px;
    position: sticky;
    top: calc(var(--header-h) + 40px);
  }
  .apply-side > * { grid-area: auto; }
}

.apply {
  border: 1px solid var(--line-2);
  border-radius: var(--r-box);
  background: var(--paper);
  scroll-margin-top: calc(var(--header-h) + 12px);
}
.apply__form { padding: 22px 18px 20px; }
@media (min-width: 480px) { .apply__form { padding: 28px 28px 24px; } }
@media (min-width: 1100px) { .apply__form { padding: 36px 36px 30px; } }
.no-js .apply__form { display: none; }
.apply__noscript { padding: 24px; }

.fields { display: grid; gap: 18px; }
@media (min-width: 640px) {
  .fields { grid-template-columns: 1fr 1fr; gap: 20px 16px; }
  .field--full { grid-column: 1 / -1; }
}
.apply__alert {
  margin-top: 20px;
  padding: 12px 14px;
  border-radius: var(--r-control);
  background: #fdf0ef;
  color: var(--error);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.45;
}
.apply__alert a { color: inherit; }
.apply__submit { margin-top: 24px; }
.apply__meta {
  margin-top: 12px;
  font-size: 0.875rem;
  color: var(--ink-3);
  text-align: center;
}
.hp {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* Fields */
.field { display: grid; gap: 8px; align-content: start; min-width: 0; margin: 0; padding: 0; border: 0; }
.field > label, .field__label {
  font-weight: 650;
  font-size: 0.9375rem;
  line-height: 1.3;
  padding: 0;
}
.opt {
  margin-left: 6px;
  font-weight: 500;
  font-size: 0.8125rem;
  color: var(--ink-3);
}
.input {
  width: 100%;
  height: 54px;
  padding: 0 16px;
  border: 1.5px solid var(--edge);
  border-radius: var(--r-control);
  background: var(--paper);
  font-size: 1.0625rem; /* ≥16px keeps iOS from zooming in */
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.input::placeholder { color: var(--ink-hint); opacity: 1; }
.input:hover { border-color: var(--ink-2); }
.input:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink), 0 0 0 4px var(--cyan-glow);
}
.input[aria-invalid="true"] { border-color: var(--error); }
.input[aria-invalid="true"]:focus { box-shadow: inset 0 0 0 1px var(--error), 0 0 0 4px rgba(180, 35, 24, 0.16); }
.input::-webkit-calendar-picker-indicator { opacity: 0; } /* datalist arrow in Chrome */
.field__hint { font-size: 0.875rem; line-height: 1.4; color: var(--ink-3); }
.field__hint:empty { display: none; }
.field__hint button {
  padding: 0;
  border: 0;
  background: none;
  font-weight: 700;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--cyan);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  cursor: pointer;
}
.field__error {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--error);
}
.field__error:empty { display: none; }
.field__error button {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* Photo picker */
.photo { position: relative; }
.photo__drop {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 68px;
  padding: 12px 14px;
  border: 1.5px dashed var(--edge);
  border-radius: var(--r-control);
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}
.photo__drop:hover, .photo__drop.is-over { border-color: var(--ink); background: var(--wash); }
.photo__input:focus-visible + .photo__drop { outline: 3px solid var(--ink); outline-offset: 3px; }
.photo[aria-invalid="true"] .photo__drop { border-color: var(--error); }
.photo__plus {
  position: relative;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--cyan);
}
.photo__plus::before, .photo__plus::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--ink);
  transform: translate(-50%, -50%);
}
.photo__plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.photo__text { display: grid; gap: 2px; min-width: 0; }
.photo__text strong { font-weight: 650; font-size: 1rem; }
.photo__text small, .photo__meta small { font-size: 0.8125rem; color: var(--ink-3); }
.photo__preview {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border: 1.5px solid var(--line-2);
  border-radius: var(--r-control);
}
.photo__preview img {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--wash);
}
.photo__meta { display: grid; gap: 2px; flex: 1; min-width: 0; }
.photo__meta strong {
  font-weight: 600;
  font-size: 0.9375rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.photo__action {
  flex: none;
  padding: 10px 8px;
  border: 0;
  background: none;
  font-size: 0.875rem;
  font-weight: 650;
  color: var(--ink-2);
  cursor: pointer;
  border-radius: 8px;
}
.photo__action:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.photo.is-busy .photo__drop { cursor: progress; opacity: 0.7; }

/* Channel chips: a 2 × 2 grid on phones, a row from 480 px */
.chips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.chip { position: relative; display: flex; }
.chip input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.chip span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 46px;
  padding: 0 16px;
  border: 1.5px solid var(--edge);
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 600;
  transition: background-color 0.15s, border-color 0.15s;
  pointer-events: none;
}
@media (min-width: 480px) {
  .chips { display: flex; flex-wrap: wrap; }
  .chip span { width: auto; height: 44px; }
}
@media (hover: hover) { .chip:hover span { border-color: var(--ink); } }
.chip input:checked + span { background: var(--cyan); border-color: var(--cyan); }
.chip input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 2px; }

/* Checkboxes */
.checks { display: grid; gap: 12px; margin-top: 4px; }
.check-row { display: grid; gap: 6px; }
.check-row .field__error { padding-left: 36px; }
.check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.9375rem;
  line-height: 1.45;
  cursor: pointer;
}
.check input {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 2px solid var(--edge);
  border-radius: 7px;
  background: var(--paper);
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}
.check input::after {
  content: "";
  width: 11px;
  height: 6px;
  margin-top: -3px;
  border: solid var(--ink);
  border-width: 0 0 2.5px 2.5px;
  transform: rotate(-45deg);
  opacity: 0;
}
.check input:checked { background: var(--cyan); border-color: var(--cyan); }
.check input:checked::after { opacity: 1; }
.check input[aria-invalid="true"] { border-color: var(--error); }
.check span { padding-top: 1px; }

/* Success */
.apply__done {
  display: grid;
  gap: 12px;
  justify-items: start;
  padding: 32px 24px 34px;
}
@media (min-width: 480px) { .apply__done { padding: 40px 36px; } }
.done__mark {
  position: relative;
  width: 56px;
  height: 56px;
  margin-bottom: 6px;
  border-radius: 50%;
  background: var(--cyan);
}
.done__mark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: 20px;
  height: 11px;
  border: solid var(--ink);
  border-width: 0 0 3px 3px;
  transform: translate(-50%, -50%) rotate(-45deg);
}
.done__title {
  font-size: calc(clamp(1.625rem, 1.3rem + 1.3vw, 2.125rem) * var(--display-scale, 1));
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.done__title:focus { outline: none; }
.done__text { font-size: 1.0625rem; color: var(--ink-2); }
.done__small { font-size: 0.9375rem; color: var(--ink-3); }

/* ---------- Results (hidden until real numbers exist) ---------- */
.results__list { display: grid; gap: 0; }
.result { padding: 24px 0; border-top: 1px solid var(--line-2); }
.result dt { font-weight: 800; font-size: calc(clamp(2.5rem, 1.6rem + 3.5vw, 4.5rem) * var(--display-scale, 1)); line-height: 1; letter-spacing: -0.045em; }
.result dd { margin-top: 10px; max-width: 22em; color: var(--ink-2); }
@media (min-width: 900px) {
  .results__list { grid-template-columns: repeat(3, 1fr); gap: 32px; }
}

/* ---------- 5 · FAQ ---------- */
.faq { display: grid; gap: 8px; }
@media (min-width: 900px) {
  .faq { grid-template-columns: 5fr 7fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
  .faq__head { position: sticky; top: calc(var(--header-h) + 32px); }
}
.faq__more { color: var(--ink-2); }
.faq__list { border-bottom: 1px solid var(--line-2); }
.qa { border-top: 1px solid var(--line-2); }
.qa summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  font-weight: 700;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:focus-visible { outline-offset: 2px; border-radius: 6px; }
.qa__icon {
  position: relative;
  flex: none;
  width: 30px;
  height: 30px;
  border: 1.5px solid var(--edge);
  border-radius: 50%;
  transition: background-color 0.2s, border-color 0.2s;
}
.qa__icon::before, .qa__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transform: translate(-50%, -50%);
  transition: transform 0.25s var(--ease);
}
.qa__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.qa[open] .qa__icon { background: var(--cyan); border-color: var(--cyan); }
.qa[open] .qa__icon::after { transform: translate(-50%, -50%) rotate(0deg); }
@media (hover: hover) { .qa summary:hover .qa__icon { border-color: var(--ink); } }
.qa__a { padding: 0 48px 22px 0; }
.qa__a p { max-width: 60ch; color: var(--ink-2); }

/* ---------- Closer ---------- */
.closer { background: var(--cyan); }
.closer__inner {
  display: grid;
  gap: 28px;
  justify-items: start;
  padding-block: clamp(56px, 6.5vw, 96px);
}
.closer__title { font-weight: 900; font-size: calc(clamp(2.5rem, 1.2rem + 4.2vw, 4.75rem) * var(--display-scale, 1)); line-height: 0.95; }
.closer__text { margin-top: 14px; max-width: 30em; font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem); }
@media (hover: hover) { .closer .btn--ink:hover { background: var(--paper); color: var(--ink); } }
.closer .btn { width: 100%; }
@media (min-width: 900px) {
  .closer__inner { grid-template-columns: 1fr auto; align-items: end; }
  .closer .btn { width: auto; }
}

/* ---------- Footer ---------- */
.foot { padding-block: 40px 48px; }
.foot__grid { display: grid; gap: 20px; }
.foot__about { margin-top: 12px; max-width: 30em; font-size: 0.9375rem; color: var(--ink-2); }
.foot__links {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
  font-weight: 600;
}
.foot__links a { display: inline-block; padding: 6px 0; text-decoration: none; }
.foot__links a:hover { text-decoration: underline; text-decoration-color: var(--cyan); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.foot__legal {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-3);
}
@media (min-width: 900px) {
  .foot__grid { grid-template-columns: 1fr auto; align-items: start; }
  .foot__links { grid-auto-flow: column; gap: 28px; }
}

/* ---------- Phones: everything centred ----------
   Headings, intros and card text sit in the middle. Form fields and the FAQ rows stay left-aligned,
   because they read and fill in more easily that way. */
@media (max-width: 699px) {
  .hero__grid, .section__head, .apply-intro, .closer__inner, .foot__grid { text-align: center; }
  .hero__status, .who__label { justify-content: center; }
  .hero__lede, .section__head .lede, .apply-intro .lede, .foot__about { margin-inline: auto; }
  .section__head, .apply-intro, .closer__inner, .foot__grid, .foot__links { justify-items: center; }
  .section__head { margin-inline: auto; }
  .sample-note { justify-self: center; }

  /* tick lists keep the tick in front of the sentence; the reassurance list sits in the middle as a block */
  .assure { justify-self: center; width: fit-content; }
  .who__list--rows li { justify-items: center; text-align: center; }

  /* testimonials: the name exactly in the middle, the photo just left of it, the stars under them */
  .fit__card { justify-items: center; text-align: center; }
  .fit__card .quote__earn { justify-self: center; }
  .quote__who { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px 12px; justify-self: stretch; }
  .quote__who .quote__avatar { justify-self: end; }
  .quote__stars { grid-column: 1 / -1; justify-self: center; margin-left: 0; }

  /* timeline: the line runs down the middle, each card hangs on its dot */
  .timeline__item { padding: 8px 0 36px; }
  .timeline__item::before { left: 50%; top: 0; margin-left: -8px; z-index: 2; }
  .timeline__item::after { left: 50%; top: 8px; bottom: -8px; margin-left: -1px; }
  .timeline__card { position: relative; z-index: 1; text-align: center; }
  .timeline__text { margin-inline: auto; }
}

/* ---------- Sticky apply bar (phones) ---------- */
.dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.97);
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  visibility: hidden;
  transition: transform 0.28s var(--ease), visibility 0s linear 0.28s;
}
.dock.is-shown {
  transform: none;
  visibility: visible;
  transition: transform 0.28s var(--ease), visibility 0s;
}
.dock__sub { font-weight: 500; }
@media (min-width: 900px) { .dock { display: none; } }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .js [data-enter] {
    animation: enter 0.7s var(--ease) both;
    animation-delay: calc(var(--i, 0) * 90ms + 40ms);
  }
  .js .apply__done:not([hidden]) { animation: enter 0.5s var(--ease) both; }
  .qa::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size 0.3s var(--ease), content-visibility 0.3s allow-discrete;
  }
  .qa[open]::details-content { block-size: auto; }
}
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
}
@keyframes enter { from { opacity: 0; transform: translateY(14px); } }

/* ---------- Document pages (privacy notice) ---------- */
.doc { padding-block: clamp(40px, 7vw, 96px); }
.doc__inner { max-width: 44rem; }
.doc h1 { font-size: clamp(2.25rem, 1.5rem + 3.5vw, 3.75rem); font-weight: 800; line-height: 1; letter-spacing: -0.035em; }
.doc h2 { margin-top: 44px; font-size: 1.375rem; font-weight: 750; letter-spacing: -0.02em; }
.doc p, .doc li { color: var(--ink-2); }
.doc p + p { margin-top: 12px; }
.doc h2 + p, .doc h2 + ul { margin-top: 12px; }
.doc ul { padding-left: 1.2em; }
.doc .doc__lede { margin-top: 20px; font-size: 1.125rem; }
.doc mark { background: #e6f7fe; color: var(--ink); padding: 0 3px; border-radius: 3px; }
.top__back {
  margin-left: auto;
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  color: var(--ink-2);
}
.top__back:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }