/* ---------- Fonts ---------- */
@font-face {
  font-family: "Maven Pro";
  src: url("/assets/fonts/mavenpro.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --green-900: #1b433f;
  --green-800: #22524d;
  --green-700: #2b6a63;
  --green-500: #3dbb55;
  --green-badge: #00a76f;
  --green-300: #8fe0a0;
  --green-100: #dff3e2;
  --sand-50: #faf7f1;
  --sand-100: #f4efe6;
  --sand-200: #e9e1d2;
  --sand-300: #d8cdb8;
  --ink: #10261e;
  --muted: #51645c;
  --white: #fff;

  --radius-sm: 12px;
  --radius: 20px;
  --radius-lg: 28px;
  --radius-pill: 999px; /* buttons, tabs and labels: fully round */
  --shadow: 0 1px 2px rgba(27, 67, 63, .06), 0 12px 32px rgba(27, 67, 63, .08);

  --font-head: "Maven Pro", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --container: 1240px;
  --gutter: clamp(20px, 4vw, 40px);
}

/* The colours, fonts and text sizes above can be changed in the text editor ("Side
   settings"); the build then writes the changed ones into the head of every page (see
   themeCss in build.mjs). --head-scale, set there, makes all headings larger or smaller. */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--sand-50);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 {
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.015em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: calc(clamp(2.5rem, 5.4vw, 4.5rem) * var(--head-scale, 1)); }
h2 { font-size: calc(clamp(1.8rem, 3.4vw, 2.75rem) * var(--head-scale, 1)); }
h3 { font-size: calc(clamp(1.4rem, 2.2vw, 1.8rem) * var(--head-scale, 1)); }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }
[id] { scroll-margin-top: 96px; }
:focus-visible { outline: 3px solid var(--green-500); outline-offset: 3px; border-radius: 6px; }

.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.skip-link { position: absolute; left: -999px; top: 8px; background: var(--white); padding: 10px 16px; border-radius: 8px; z-index: 100; }
.skip-link:focus { left: 8px; }

.eyebrow {
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--green-700);
  margin-bottom: 1rem;
}
.lead { font-size: clamp(1.1rem, 1.5vw, 1.3rem); color: var(--muted); max-width: 34em; }
.icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.arrow { display: inline-block; transition: transform .2s ease; }

/* the name keeps its own case in labels set in capitals (see brandCase in build.mjs) */
.brandname { text-transform: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: .7em 1.4em;
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  font: 600 .98rem/1.2 var(--font-body);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s;
}
.btn--lg { padding: .95em 1.8em; font-size: 1.05rem; }
.btn--primary { background: var(--green-900); color: var(--white); }
.btn--primary:hover { background: var(--green-700); }
.btn--ghost { color: var(--green-900); padding-inline: 1em; }
.btn--ghost:hover { background: var(--sand-200); }
.btn--outline { border-color: var(--green-900); color: var(--green-900); }
.btn--outline:hover { background: var(--green-900); color: var(--white); }
.btn--text { padding-inline: .4em; color: var(--green-900); }
.btn--text:hover .arrow, a:hover > .tile__more .arrow { transform: translateX(4px); }

/* ---------- Header ---------- */
/* One green bar: logo, the pages, language, login and the way in. It stays at the top and
   turns a shade darker once the page is scrolled (main.js sets .is-scrolled). */
.header {
  position: sticky; top: 0; z-index: 50;
  background: var(--green-900); color: var(--white);
  transition: background-color .25s, box-shadow .25s;
}
.header.is-scrolled { background: #143430; box-shadow: 0 10px 28px rgba(16, 38, 30, .18); }
.header__inner { display: flex; align-items: center; gap: 32px; min-height: 80px; }
.header__logo img { width: 112px; height: auto; }
.nav { display: flex; gap: 6px; margin-right: auto; }
.nav a {
  position: relative;
  padding: 10px 14px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  font-weight: 500;
  color: rgba(255, 255, 255, .82);
  transition: color .2s, background-color .2s;
}
.nav a:hover { color: var(--white); background: rgba(255, 255, 255, .08); }
/* the page you are on: white, with a short mint line under it */
.nav a.is-active { color: var(--white); font-weight: 600; }
.nav a.is-active::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--green-300); }
.nav__mobile-only { display: none; }
.header__actions { display: flex; align-items: center; gap: 10px; }
.header .lang { margin-right: 6px; }
.header__login { color: var(--white); border-color: rgba(255, 255, 255, .35); padding-inline: 1.1em; }
.header__login:hover { border-color: var(--white); background: rgba(255, 255, 255, .08); }
.header__cta { background: var(--green-300); color: var(--green-900); }
.header__cta:hover { background: var(--white); }
.header .btn:focus-visible, .nav a:focus-visible { outline: 2px solid var(--green-300); outline-offset: 2px; }
.burger { display: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); cursor: pointer; padding: 0; position: relative; }
.burger span { position: absolute; left: 13px; right: 13px; height: 2px; background: var(--white); border-radius: 2px; transition: transform .2s, opacity .2s; }
.burger span:nth-child(1) { top: 15px; }
.burger span:nth-child(2) { top: 21px; }
.burger span:nth-child(3) { top: 27px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Language switcher ---------- */
.lang { position: relative; display: flex; align-items: center; }
.lang__btn {
  -webkit-appearance: none; appearance: none;
  display: block; width: 24px; height: 24px; padding: 0; margin: 0;
  border: 0; border-radius: 50%;
  background: none; cursor: pointer;
  overflow: hidden;
  line-height: 0;
  transition: box-shadow .2s;
}
.lang__btn:hover, .lang__btn[aria-expanded="true"] { box-shadow: 0 0 0 2px rgba(255, 255, 255, .7); }
.lang__btn:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; border-radius: 50%; }
.lang__btn img, .lang__menu img { display: block; border-radius: 50%; object-fit: cover; }
.lang__btn img { width: 24px; height: 24px; }
.lang__menu {
  position: absolute; right: 0; top: calc(100% + 6px);
  min-width: 170px; padding: 6px;
  background: var(--white); color: var(--ink);
  border: 1px solid var(--sand-200);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}
.lang__menu a {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 500;
  color: var(--ink);
}
.lang__menu img { width: 20px; height: 20px; flex: none; }
.lang__menu a:hover { background: var(--sand-100); color: var(--ink); text-decoration: none; }
.lang__menu a[aria-current] { font-weight: 600; color: var(--green-900); }
.lang__menu a[aria-current]::after {
  content: ""; width: 18px; height: 18px; margin-left: auto;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232b6a63' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Hero ---------- */
/* the same air above the text as on the other pages (.page-hero) */
.hero { padding: clamp(48px, 7vw, 104px) 0 clamp(32px, 4vw, 56px); }
.hero h1 { font-size: calc(clamp(2rem, 3.5vw, 3rem) * var(--head-scale, 1)); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: clamp(24px, 2.6vw, 36px) clamp(32px, 5vw, 72px); align-items: stretch; }
.hero__content { align-self: center; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 1.5rem; }
/* the image is as tall as the text beside it */
.hero__media { position: relative; margin: 0; min-height: 300px; border-radius: var(--radius-lg); overflow: hidden; background: var(--green-900); }
.hero__media img, .hero__video, .hero__stage { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* the video of the niche being pointed at, shown on top of the image */
.hero__stage { opacity: 0; transition: opacity .35s ease; }
.hero__label, .hero__stage-label {
  position: absolute; left: 20px; bottom: 20px;
  padding: .45em 1em; border-radius: var(--radius-pill);
  background: var(--white); color: var(--green-900);
  font: 600 .95rem/1.2 var(--font-head);
  opacity: 0; transform: translateY(6px); transition: opacity .35s ease, transform .35s ease;
}
.hero__media.is-playing .hero__stage { opacity: 1; }
.hero__media.is-playing .hero__stage-label { opacity: 1; transform: none; }
/* name and icon of the niche whose video fills the large image; they give way to the one being pointed at */
.hero__label { margin: 0; transform: none; }
.hero__icon, .hero__stage-icon { position: absolute; left: 10px; top: 10px; opacity: 0; transition: opacity .35s ease; }
.hero__icon, .hero__stage-icon .icon {
  display: block; width: 30px; height: 30px; padding: 6px;
  border-radius: 9px; background: var(--green-badge); color: var(--white);
  stroke-width: 2;
}
.hero--video .hero__label, .hero--video .hero__icon { opacity: 1; }
.hero--video .hero__media.is-playing .hero__label, .hero--video .hero__media.is-playing .hero__icon { opacity: 0; }
.hero__media.is-playing .hero__stage-icon { opacity: 1; }

/* ---------- Niches ---------- */
/* A row across the whole content width, below the hero text and image. The squares are
   never narrower than 200px, so the row scrolls sideways when they do not all fit. */
.niches { grid-column: 1 / -1; min-width: 0; }
.niches__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: .75rem; }
.niches .eyebrow { margin: 0; }
.niches__nav { display: flex; gap: 8px; }
.niches__nav[hidden] { display: none; }
.niches__arrow {
  width: 36px; height: 36px; padding: 0;
  border: 1.5px solid var(--green-900); border-radius: 50%;
  background: transparent; color: var(--green-900);
  font: 600 1rem/1 var(--font-body); cursor: pointer;
  transition: background-color .2s, color .2s, opacity .2s;
}
.niches__arrow:hover { background: var(--green-900); color: var(--white); }
.niches__arrow:disabled { opacity: .3; cursor: default; background: transparent; color: var(--green-900); }
.niches__list {
  --niche-gap: 16px;
  display: grid; grid-auto-flow: column; gap: var(--niche-gap);
  /* a little of the next square shows at the edge as a hint that there are more */
  grid-auto-columns: max(200px, calc((100% - 5 * var(--niche-gap)) / 5.4));
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scrollbar-width: none;
  /* room above for the lift of the active square, which would otherwise be cut off */
  margin-block: -8px; padding-block: 8px;
}
.niches__list::-webkit-scrollbar { display: none; }
.niches__list li { position: relative; scroll-snap-align: start; }
/* the niche in the large image is left out of the row while that image is visible */
@media (min-width: 1021px) {
  .hero--video .niches__featured { display: none; }
}
.niche {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;
  width: 100%; aspect-ratio: 1; padding: 18px;
  border: 0; border-radius: var(--radius); overflow: hidden;
  background: var(--green-900); color: var(--white);
  font: inherit; text-align: left;
  transition: transform .2s ease;
}
/* the niche icon sits in a small green badge in the top corner, on top of the video as well */
.niche .icon {
  position: absolute; z-index: 1; left: 8px; top: 8px;
  width: 25px; height: 25px; padding: 5px;
  border-radius: 8px; background: var(--green-badge); color: var(--white);
  stroke-width: 2;
}
.niche__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* darkens the lower part of a video so the label stays readable */
.niche__video + .niche__label::before {
  content: ""; position: absolute; z-index: -1; left: -18px; right: -18px; bottom: -18px; height: 96px;
  background: linear-gradient(to top, rgba(16, 38, 30, .85), rgba(16, 38, 30, 0));
}
.niche__label { position: relative; z-index: 1; margin-top: auto; align-self: stretch; font: 600 1.1rem/1.2 var(--font-head); overflow-wrap: anywhere; }
.niche:has(.niche__video) { cursor: pointer; }
.niche:has(.niche__video):hover, .niche.is-active { transform: translateY(-4px); }
.niche.is-active { outline: 3px solid var(--green-500); outline-offset: -3px; }
/* Niche squares that are only shown, not pressed: a grid of them stands beside the text of
   a page hero, three across and two down. */
.niche.niche--still, .niche.niche--still:hover { cursor: default; transform: none; }
.vgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.vgrid .niche { padding: 14px; }
.vgrid .niche__label { font-size: 1rem; }
@media (max-width: 640px) {
  .vgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ---------- Added elements ---------- */
/* headings, buttons, images and videos put on a page through the text editor ("Elementer") */
.section.added { padding: clamp(32px, 5vw, 64px) 0; }
.added__list { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(16px, 2.4vw, 28px); }
.added__item { max-width: 100%; }
.added__heading { margin: 0; }
.added__media { display: block; max-width: 100%; height: auto; border-radius: var(--radius); }
/* inside a block of the page, below one of its texts */
.added__item--inside { margin-block: clamp(16px, 2.4vw, 28px); }
.added__item--inside:last-child { margin-bottom: 0; }

/* ---------- Large screens ---------- */
/* On big monitors the whole site is enlarged, the same way zooming in with the browser
   does, so it does not sit small in the middle of the screen. The steps start where the
   window is tall enough that the enlarged first screen still fits.
   Zoom enlarges viewport units as well, so --svh holds 1% of the window height as it is
   seen from inside the zoomed page; use it instead of svh. */
:root { --svh: 1svh; }
@media (min-width: 1600px) and (min-height: 986px) {
  :root { zoom: 1.25; --svh: calc(1svh / 1.25); }
}
@media (min-width: 2100px) and (min-height: 1200px) {
  :root { zoom: 1.5; --svh: calc(1svh / 1.5); }
}

/* ---------- First screen (desktop) ---------- */
/* Hero, niche row and logo bar share the first screen. Spacing and sizes follow the height
   of the window, so the logo bar sits at its bottom edge on normal laptop and desktop
   screens. On very low windows the content no longer fits and the bar just follows after
   it; on very tall ones the block stops growing so the content is not spread out.
   80px is the header. */
@media (min-width: 1021px) {
  .fold { display: flex; flex-direction: column; min-height: min(calc(calc(100 * var(--svh)) - 80px), 860px); }
  .fold .hero { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-block: clamp(10px, calc(calc(8 * var(--svh)) - 42px), 48px); }
  /* above the text there is as much air as on the other pages; it gives a little on low windows */
  .fold .hero { padding-top: clamp(48px, min(7vw, calc(12 * var(--svh))), 104px); }
  .fold .hero__grid { width: 100%; row-gap: clamp(12px, calc(calc(8 * var(--svh)) - 42px), 36px); }
  .fold .hero h1 { font-size: calc(clamp(2rem, min(3.5vw, calc(5 * var(--svh))), 3rem) * var(--head-scale, 1)); }
  .fold .hero__media { min-height: clamp(200px, calc(30 * var(--svh)), 300px); }
  .fold .hero__actions { margin-top: clamp(1rem, calc(2.6 * var(--svh)), 1.5rem); }
  /* the squares keep their width and give up some height on low windows */
  .fold .niche { aspect-ratio: auto; height: clamp(130px, calc(calc(40 * var(--svh)) - 142px), 200px); }
  .fold .brandbar .brands { padding-block: clamp(10px, calc(calc(6 * var(--svh)) - 30px), 40px); }
}
.brands {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px;
  margin-top: clamp(32px, 4vw, 56px); padding: 28px clamp(24px, 4vw, 48px);
  background: var(--sand-200);
  border-radius: var(--radius);
}
/* same air above the logos (below the hairline) as below them (to the end of the hero) */
.page-hero.page-hero--brands { --brands-gap: clamp(32px, 3.4vw, 48px); padding-bottom: var(--brands-gap); }
/* on sub pages the logos sit on the page itself, set off by a hairline instead of a box */
.page-hero .brands {
  margin-top: clamp(32px, 4vw, 48px); padding: var(--brands-gap) 0 0;
  background: none; border-radius: 0;
  border-top: 1px solid rgba(216, 205, 184, .5);
}
.brands img { display: block; height: 50px; width: auto; max-width: 100%; object-fit: contain; }
/* front page: the logos fill the full-width white band below the hero */
.brandbar { border-block: 1px solid var(--sand-200); background: var(--white); }
.brandbar .brands { margin-top: 0; padding: clamp(24px, 3vw, 40px) 0; background: none; border-radius: 0; }

/* ---------- Tiles ---------- */
.tiles { padding-bottom: clamp(40px, 5vw, 72px); }
.tiles__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.tile {
  display: flex; flex-direction: column;
  min-height: 280px;
  padding: clamp(24px, 2.6vw, 36px);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease;
}
.tile:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.tile h2 { font-size: calc(clamp(1.5rem, 2.2vw, 2rem) * var(--head-scale, 1)); margin-bottom: .5em; }
.tile p { margin-bottom: 1.5em; opacity: .85; }
.tile__tag { font-size: .8rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; margin-bottom: 2.5rem; opacity: .8; }
.tile__more { margin-top: auto; font-weight: 600; display: inline-flex; gap: .5em; }
/* Share the rows (tag, heading, text, link) between the tiles so each part lines up
   across them, even when one heading or text runs a line longer than the other. */
@supports (grid-template-rows: subgrid) {
  .tile { display: grid; grid-template-rows: subgrid; grid-row: span 4; row-gap: 0; min-height: 0; align-items: start; }
  .tile__more { align-self: end; }
}
/* Browsers without subgrid: reserve three heading lines so the text below still lines up. */
@supports not (grid-template-rows: subgrid) {
  @media (min-width: 1021px) {
    .tile h2 { min-height: 3.3em; }
  }
}
.tile--dark { background: var(--green-900); color: var(--white); }
.tile--dark .tile__tag { color: var(--green-300); opacity: 1; }
.tile--green { background: var(--green-100); color: var(--green-900); }

/* ---------- Figures ---------- */
.figures { border-block: 1px solid var(--sand-200); background: var(--white); }
.figures__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.figure { padding: clamp(24px, 3vw, 40px) 24px; border-left: 1px solid var(--sand-200); }
.figure:first-child { border-left: 0; padding-left: 0; }
.figure strong { display: block; font: 600 clamp(2.2rem, 4vw, 3.4rem)/1 var(--font-head); color: var(--green-900); letter-spacing: -.02em; margin-bottom: .25em; }
.figure span { color: var(--muted); font-size: .95rem; }

/* ---------- Sections ---------- */
.section { padding: clamp(56px, 8vw, 112px) 0; }
.section--sand { background: var(--sand-100); }
.section--dark { background: var(--green-900); color: var(--white); }
.section--white { background: var(--white); }
.section--dark .eyebrow { color: var(--green-300); }
.section__head { max-width: 760px; margin-bottom: clamp(28px, 4vw, 48px); }
.section__intro { font-size: 1.1rem; opacity: .8; margin: 0; }

/* ---------- Tabs ---------- */
.tabs__list {
  display: inline-flex; gap: 4px;
  padding: 5px;
  background: var(--sand-200);
  border-radius: var(--radius-pill);
  margin-bottom: 24px;
  max-width: 100%;
  overflow-x: auto;
}
.tabs__tab {
  border: 0; background: transparent; cursor: pointer;
  padding: .7em 1.5em;
  border-radius: var(--radius-pill);
  font: 600 1rem/1.2 var(--font-body);
  color: var(--ink);
  white-space: nowrap;
  transition: background-color .2s, color .2s;
}
.tabs__tab:hover { background: rgba(255, 255, 255, .6); }
.tabs__tab.is-active { background: var(--green-900); color: var(--white); }
.panel {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px);
  padding: clamp(24px, 4vw, 56px);
  background: var(--white);
  border: 1px solid var(--sand-200);
  border-radius: var(--radius-lg);
}
.panel[hidden] { display: none; }
.panel__text p { color: var(--muted); }
.panel__text .btn { margin-top: .75rem; }
.panel__list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: center; }
.panel__list li {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px;
  background: var(--sand-50);
  border-radius: var(--radius-sm);
  font-weight: 500;
  line-height: 1.3;
}
.steplist { display: grid; gap: 10px; align-content: center; margin: 0; padding: 0; list-style: none; }
.steplist li {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 18px;
  background: var(--sand-50);
  border-radius: var(--radius-sm);
  font-weight: 500;
  line-height: 1.3;
}
.steplist__num {
  flex: none; display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--green-900); color: var(--white);
  font: 600 .95rem/1 var(--font-head);
}
.check {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--green-500) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6.5 12.5 3.5 3.500 7.500-8'/%3E%3C/svg%3E") center / 14px no-repeat;
}

/* ---------- Shortcuts ---------- */
.shortcuts__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.shortcut {
  display: flex; align-items: center; gap: 16px;
  padding: 22px 24px;
  background: var(--white);
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 600;
  transition: background-color .2s, color .2s, transform .2s;
}
.shortcut .icon { width: 28px; height: 28px; color: var(--green-700); transition: color .2s; }
.shortcut::after { content: "→"; margin-left: auto; transition: transform .2s; }
.shortcut:hover { background: var(--green-900); color: var(--white); }
.shortcut:hover .icon { color: var(--green-300); }
.shortcut:hover::after { transform: translateX(4px); }

/* ---------- About ---------- */
.about__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
/* the advertiser / partner tabs directly below the About text */
.about__tabs { margin-top: clamp(40px, 5vw, 72px); }
.about__media { margin: 0; }
.about__media img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; object-position: 78% center; border-radius: var(--radius-lg); }
.about__media--wide img { aspect-ratio: 3 / 2; object-position: center; }
.about__text h2 { font-size: calc(clamp(1.6rem, 2.55vw, 2.3rem) * var(--head-scale, 1)); }
.about__text > p:not(.eyebrow) { color: var(--muted); font-size: 1.1rem; }
.values { margin-top: 2rem; border-top: 1px solid var(--sand-200); }
.values li { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--sand-200); }
.values strong { font-family: var(--font-head); font-size: 1.1rem; color: var(--green-900); }
.values span { color: var(--muted); }

/* ---------- Sites ---------- */
.sites__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sites__grid a {
  display: flex; flex-direction: column; gap: 4px;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--radius);
  text-decoration: none;
  transition: background-color .2s, border-color .2s;
}
.sites__grid a:hover { background: var(--green-800); border-color: var(--green-500); }
.sites__grid span { font: 600 1.2rem/1.3 var(--font-head); overflow-wrap: anywhere; }
.sites__grid small { color: var(--green-300); font-size: .88rem; }

/* ---------- Sub pages ---------- */
.page-hero { padding: clamp(48px, 7vw, 104px) 0 clamp(48px, 6vw, 88px); }
.page-hero h1 { font-size: calc(clamp(2.2rem, 4.6vw, 3.75rem) * var(--head-scale, 1)); max-width: 17em; }
.page-hero .lead { max-width: 40em; }
.page-hero__text { max-width: 46em; color: var(--muted); }
.page-hero__text:last-of-type { margin-bottom: 0; }
/* a page hero can have an image beside its text */
.page-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: clamp(28px, 3.4vw, 56px); align-items: center; }
.page-hero__grid h1 { font-size: calc(clamp(2.2rem, 3.6vw, 3rem) * var(--head-scale, 1)); }
.page-hero__grid--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
/* World map made of dots; the markets we are live in are green and pulse gently */
.map { margin: 0; padding: clamp(14px, 1.6vw, 24px); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow); }
.map__world { display: block; width: 100%; height: auto; overflow: visible; }
.map__land { fill: none; stroke: var(--sand-300); stroke-width: 5.6; stroke-linecap: round; }
.map__dot { fill: var(--green-badge); stroke: var(--white); stroke-width: 2; }
.map__pulse { fill: var(--green-badge); opacity: 0; transform-box: fill-box; transform-origin: center; animation: map-pulse 2.4s ease-out infinite; }
.map__mark:nth-of-type(3n+1) .map__pulse { animation-delay: .8s; }
.map__mark:nth-of-type(3n+2) .map__pulse { animation-delay: 1.6s; }
.map__label { display: flex; align-items: center; gap: 8px; margin-top: 12px; color: var(--green-900); font: 600 .9rem/1.2 var(--font-head); }
.map__key { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--green-badge); }
/* the niches as a row of labels under the map, each with its icon in a green badge */
.nichelist__title { margin: clamp(18px, 2vw, 26px) 0 .75rem; }
.nichelist { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.nichelist li { display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border: 1px solid var(--sand-200); border-radius: var(--radius-pill); background: var(--white); color: var(--green-900); font: 600 .95rem/1.2 var(--font-head); }
.nichelist .icon { width: 28px; height: 28px; padding: 6px; border-radius: 50%; background: var(--green-badge); color: var(--white); stroke-width: 2; }
@keyframes map-pulse { 0% { opacity: .5; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(3); } }
@media (prefers-reduced-motion: reduce) {
  .map__pulse { animation: none; }
}
@media (max-width: 1020px) {
  .page-hero__grid { grid-template-columns: 1fr; }
}
.about__text h2 + p { margin-top: 1rem; }

.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.card { padding: clamp(22px, 2.4vw, 32px); background: var(--sand-50); border: 1px solid var(--sand-200); border-radius: var(--radius); }
/* a channel card can carry its icon in a green badge, like the niche squares; the title stands beside it */
.card:has(> .icon) { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px 12px; align-content: start; }
.card .icon { display: block; width: 36px; height: 36px; padding: 8px; border-radius: 10px; background: var(--green-badge); color: var(--white); }
.card:has(> .icon) h3 { margin: 0; }
.card:has(> .icon) p { grid-column: 1 / -1; }
.card h3 { font-size: calc(1.3rem * var(--head-scale, 1)); color: var(--green-900); }
.card p { margin: 0; color: var(--muted); }

.split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 88px); align-items: center; }
.split__text { color: var(--muted); font-size: 1.1rem; margin: 0; }
/* The affiliate model: partner, Spudo and advertiser side by side in one panel. Traffic runs to
   the right (green), the money runs back to the left (dark); the dashes move the way it flows. */
.model__head { max-width: 720px; margin: 0 auto clamp(28px, 4vw, 48px); text-align: center; }
.model__head h2 { margin-bottom: .4em; }
.model__intro { margin: 0; color: var(--muted); font-size: 1.1rem; }
.model__chain { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(170px, 1fr) minmax(0, 1.15fr) minmax(170px, 1fr) minmax(0, 1.15fr); align-items: center; padding: clamp(20px, 3vw, 44px); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow); }
.model__node { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: clamp(22px, 2.4vw, 34px) clamp(16px, 2vw, 26px); border-radius: var(--radius); background: var(--sand-50); text-align: center; }
.model__node .icon { width: 48px; height: 48px; padding: 11px; margin-bottom: 6px; border-radius: 14px; background: var(--green-badge); color: var(--white); }
.model__name { font: 600 1.2rem/1.25 var(--font-head); color: var(--green-900); }
.model__text { color: var(--muted); font-size: .95rem; line-height: 1.45; }
/* Spudo stands out in the middle: taller, dark and with a soft ring around it */
.model__node--spudo { padding-block: clamp(34px, 4vw, 56px); background: linear-gradient(150deg, var(--green-700), var(--green-900) 70%); box-shadow: 0 0 0 8px rgba(0, 167, 111, .12), 0 18px 40px rgba(27, 67, 63, .28); }
.model__node--spudo img { width: auto; height: 38px; margin-bottom: 6px; }
.model__node--spudo .model__text { color: var(--white); opacity: .85; }
.model__link { display: grid; gap: 18px; padding: 0 14px; }
.model__flow { position: relative; display: flex; justify-content: center; color: var(--green-badge); }
.model__flow i { position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: linear-gradient(90deg, currentColor 50%, transparent 50%) 0 0 / 14px 2px repeat-x; animation: model-flow .9s linear infinite; }
.model__flow i::after { content: ""; position: absolute; right: 0; top: 50%; width: 9px; height: 9px; border-top: 2px solid; border-right: 2px solid; transform: translateY(-50%) rotate(45deg); }
.model__tag { position: relative; z-index: 1; padding: .45em 1em; border-radius: var(--radius-pill); background: var(--green-100); color: var(--green-700); font: 600 .85rem/1.2 var(--font-head); text-align: center; }
.model__flow--pay { color: var(--green-900); }
.model__flow--pay i { animation-direction: reverse; }
.model__flow--pay i::after { right: auto; left: 0; transform: translateY(-50%) rotate(-135deg); }
.model__flow--pay .model__tag { background: var(--green-900); color: var(--white); }
@keyframes model-flow { to { background-position-x: 14px; } }
@media (prefers-reduced-motion: reduce) {
  .model__flow i { animation: none; }
}
@media (max-width: 900px) {
  /* the three stand on top of each other, with the arrows pointing down and up */
  .model__chain { grid-template-columns: 1fr; padding: 16px; }
  .model__link { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; padding: 16px 0; }
  .model__flow i { display: none; }
  .model__tag::before { content: "↓"; margin-right: .4em; }
  .model__flow--pay .model__tag::before { content: "↑"; }
}
.checklist { display: grid; gap: 12px; }
.checklist li { display: flex; align-items: center; gap: 14px; padding: 18px 20px; background: var(--white); border-radius: var(--radius-sm); font-weight: 500; }

.deflist { margin: 0; border-top: 1px solid var(--sand-200); }
.deflist > div { display: grid; grid-template-columns: 220px 1fr; gap: 8px 24px; padding: 20px 0; border-bottom: 1px solid var(--sand-200); }
.deflist dt { font: 600 1.1rem/1.4 var(--font-head); color: var(--green-900); }
.deflist dd { margin: 0; color: var(--muted); }

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding: 0; counter-reset: step; list-style: none; }
.steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* steps with a title: the title stands beside the number, the text below them */
.steps--titled li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; align-content: start; gap: 14px 12px; }
.steps--titled li::before { margin-bottom: 0; }
.steps__title { margin: 0; font-size: calc(1.15rem * var(--head-scale, 1)); line-height: 1.2; }
.steps--titled p { grid-column: 1 / -1; margin: 0; opacity: .85; }
@media (min-width: 1021px) {
  /* room for two lines, so the texts start level across the row */
  .steps__title { display: flex; align-items: center; min-height: 2.4em; }
}
.steps li { counter-increment: step; padding: 24px; border: 1px solid rgba(255, 255, 255, .18); border-radius: var(--radius); }
.steps li::before { content: counter(step); display: block; font: 600 2.2rem/1 var(--font-head); color: var(--green-300); margin-bottom: 16px; }
.steps__note { margin: 28px 0 0; opacity: .8; }

.compare { overflow-x: auto; background: var(--white); border-radius: var(--radius); border: 1px solid var(--sand-200); }
.compare table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: .96rem; }
.compare th, .compare td { padding: 14px 20px; text-align: left; border-bottom: 1px solid var(--sand-200); }
.compare thead th { font: 600 1rem/1.3 var(--font-head); color: var(--green-900); }
.compare thead th:last-child, .compare td:last-child { background: var(--green-100); }
.compare tbody th { font-weight: 500; }
.compare tbody tr:last-child > * { border-bottom: 0; }
.compare__group th { padding-top: 22px; font-size: .78rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--green-700); background: var(--sand-50); }
.level { display: inline-flex; align-items: center; gap: 8px; }
.level::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--sand-300); }
.level--medium::before { background: #e0a72e; }
.level--high::before { background: var(--green-500); }

.team { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.team li { display: flex; flex-direction: column; gap: 4px; padding: 22px 24px; background: var(--white); border-radius: var(--radius); }
.team strong { font: 600 1.15rem/1.3 var(--font-head); color: var(--green-900); }
.team span { color: var(--muted); font-size: .93rem; }

.timeline { padding: 0; list-style: none; border-top: 1px solid var(--sand-200); }
.timeline li { display: grid; grid-template-columns: 160px 1fr; gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--sand-200); }
.timeline__year { font: 600 2.2rem/1 var(--font-head); color: var(--green-700); }
.timeline h3 { font-size: calc(1.35rem * var(--head-scale, 1)); }
.timeline p { margin: 0; color: var(--muted); max-width: 46em; }

/* ---------- Process pages (Bliv annoncør, Bliv partner) ---------- */
/* hero: text on the left, the four phases as a small map on the right */
.process-hero__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.process-hero h1 { font-size: calc(clamp(2.2rem, 4vw, 3.25rem) * var(--head-scale, 1)); }
.process-hero .lead { color: var(--green-900); font-family: var(--font-head); font-weight: 600; font-size: clamp(1.25rem, 1.9vw, 1.6rem); line-height: 1.25; }
.roadmap { padding: clamp(20px, 2.4vw, 32px); background: var(--white); border: 1px solid var(--sand-200); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.roadmap__title { margin-bottom: 1rem; font: 600 .82rem/1.2 var(--font-body); letter-spacing: .09em; text-transform: uppercase; color: var(--green-700); }
.roadmap ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.roadmap li { position: relative; }
/* the line that joins the phase numbers */
.roadmap li + li::before { content: ""; position: absolute; left: 37px; top: -12px; height: 16px; width: 2px; background: var(--sand-300); }
.roadmap a { display: flex; align-items: center; gap: 16px; padding: 14px 16px; border-radius: var(--radius-sm); text-decoration: none; transition: background-color .2s; }
.roadmap a:hover { background: var(--sand-100); }
.roadmap a:hover .arrow { transform: translateX(4px); }
.roadmap__num { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--green-900); color: var(--white); font: 600 1.15rem/1 var(--font-head); }
.roadmap__text { display: grid; gap: 2px; margin-right: auto; }
.roadmap__text strong { font: 600 1.1rem/1.25 var(--font-head); color: var(--green-900); }
.roadmap__text small { color: var(--muted); font-size: .88rem; }

/* the steps of a phase: numbers joined by a line on the left, a card per step on the right */
.process .section__head { margin-bottom: clamp(24px, 3vw, 40px); }
.psteps { margin: 0; padding: 0; list-style: none; display: grid; gap: 20px; }
.pstep { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: clamp(12px, 2vw, 28px); }
.pstep:not(:last-child)::before { content: ""; position: absolute; left: 27px; top: 56px; bottom: -20px; width: 2px; background: var(--sand-300); }
.pstep__num { position: relative; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--green-900); color: var(--white); font: 600 1.35rem/1 var(--font-head); }
.pstep__body { padding: clamp(20px, 2.6vw, 36px); background: var(--white); border: 1px solid var(--sand-200); border-radius: var(--radius-lg); }
.pstep__body > :last-child { margin-bottom: 0; }
.pstep__body h3 { color: var(--green-900); }
.pstep__body > p { max-width: 46em; color: var(--muted); }
.pstep__body > .pstep__lead { margin-bottom: .75em; color: var(--ink); font-weight: 600; }
.pstep__note { padding: 14px 18px; border-left: 4px solid var(--green-badge); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--green-100); }
.pstep__body > .pstep__note { max-width: none; color: var(--green-900); font-weight: 500; }

.chips, .checks, .defs, .flow, .questions { margin: 0 0 1.25em; padding: 0; list-style: none; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { padding: 8px 14px; border: 1px solid var(--sand-200); border-radius: var(--radius-pill); background: var(--sand-50); font-size: .95rem; font-weight: 500; }
.checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.checks li, .questions li { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--sand-50); font-weight: 500; line-height: 1.35; }
.defs { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.def { padding: 18px 20px; border-radius: var(--radius-sm); background: var(--sand-50); border-top: 3px solid var(--green-badge); }
.def strong { display: block; margin-bottom: 4px; font: 600 1.05rem/1.3 var(--font-head); color: var(--green-900); }
.def p { margin: 0; color: var(--muted); font-size: .95rem; }
.questions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.questions__mark { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--green-badge); color: var(--white); font: 600 1.1rem/1 var(--font-head); }
/* a chain of boxes with an arrow between each */
.flow { display: flex; align-items: stretch; gap: 36px; }
.flow li { position: relative; flex: 1 1 0; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 16px 14px; border-radius: var(--radius-sm); background: var(--green-900); color: var(--white); text-align: center; }
.flow strong { font: 600 1.02rem/1.25 var(--font-head); }
.flow span { font-size: .85rem; line-height: 1.35; opacity: .85; }
.flow li + li::before { content: "→"; position: absolute; left: -36px; top: 50%; width: 36px; transform: translateY(-50%); color: var(--green-badge); font-size: 1.3rem; font-weight: 700; text-align: center; }

/* the short version of the process: numbered cards */
.howto { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; counter-reset: howto; }
.howto li { counter-increment: howto; padding: clamp(20px, 2.2vw, 28px); border: 1px solid var(--sand-200); border-radius: var(--radius); background: var(--sand-50); }
.howto li::before { content: counter(howto); display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 16px; border-radius: 50%; background: var(--green-badge); color: var(--white); font: 600 1.15rem/1 var(--font-head); }
.howto h3 { font-size: calc(1.25rem * var(--head-scale, 1)); color: var(--green-900); margin-bottom: .35em; }
.howto p { margin: 0; color: var(--muted); }

/* closing section: what can be documented at any time */
.proof__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 6vw, 88px); align-items: center; }
.proof__grid p { opacity: .85; font-size: 1.1rem; }
.proof__grid .eyebrow { opacity: 1; font-size: .82rem; }
.proof__grid .proof__lead { opacity: 1; font-weight: 600; }
.proof__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 1.5em; }
.proof__list li { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border: 1px solid rgba(255, 255, 255, .18); border-radius: var(--radius-sm); font-weight: 600; line-height: 1.3; }
.proof__grid .proof__note { margin: 0; font-size: 1rem; }

/* ---------- Policy pages (Privatlivspolitik, Vilkår og betingelser) ---------- */
.policy-hero { padding-bottom: clamp(40px, 5vw, 72px); }
.policy-hero h1 { font-size: calc(clamp(2.1rem, 4vw, 3.25rem) * var(--head-scale, 1)); max-width: 18em; }
.policy-hero__date { display: inline-block; margin: .5rem 0 0; padding: 6px 14px; border-radius: var(--radius-pill); background: var(--sand-200); font-size: .9rem; font-weight: 600; color: var(--green-900); }
/* the policy in four points */
.keyfacts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: clamp(28px, 4vw, 48px); }
.keyfacts li { display: grid; gap: 6px; align-content: start; padding: clamp(18px, 2vw, 26px); border: 1px solid var(--sand-200); border-radius: var(--radius); background: var(--white); }
.keyfacts .icon, .defs--icons .icon { width: 44px; height: 44px; padding: 10px; margin-bottom: 8px; border-radius: 12px; background: var(--green-badge); color: var(--white); }
.keyfacts strong { font: 600 1.1rem/1.25 var(--font-head); color: var(--green-900); }
.keyfacts span { color: var(--muted); font-size: .95rem; line-height: 1.5; }

/* contents on the left (stays in view while reading), numbered sections on the right */
.policy__grid { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.policy__toc { position: sticky; top: 104px; max-height: calc(100vh - 128px); overflow-y: auto; padding: 22px; border: 1px solid var(--sand-200); border-radius: var(--radius); background: var(--sand-50); }
.policy__toc-title { margin-bottom: .75rem; font: 600 .82rem/1.2 var(--font-body); letter-spacing: .09em; text-transform: uppercase; color: var(--green-700); }
.policy__toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; display: grid; gap: 2px; }
.policy__toc li { counter-increment: toc; }
.policy__toc a { display: flex; gap: 10px; padding: 7px 8px; border-radius: 8px; text-decoration: none; font-size: .95rem; line-height: 1.35; }
.policy__toc a::before { content: counter(toc); flex: none; width: 1.4em; color: var(--green-700); font-weight: 600; }
.policy__toc a:hover { background: var(--sand-200); }
.policy__body { display: grid; gap: clamp(36px, 5vw, 64px); min-width: 0; }
.psec h2 { display: flex; align-items: center; gap: 16px; font-size: calc(clamp(1.5rem, 2.4vw, 2rem) * var(--head-scale, 1)); margin-bottom: .8em; }
.psec__num { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--green-900); color: var(--white); font: 600 1.1rem/1 var(--font-head); }
.psec > p { max-width: 48em; color: var(--muted); }
.psec > :last-child { margin-bottom: 0; }
.psec > .psec__lead { margin-bottom: .75em; color: var(--ink); font-weight: 600; }
/* things that are not allowed: a red cross instead of the green tick */
.check--no { background: #c2452d url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7 7 17'/%3E%3C/svg%3E") center / 14px no-repeat; }
/* key figures: the value large, what it is underneath */
.defs--tiles .def strong { font-size: 1.25rem; }
.psec .defs--icons { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.psec .def { background: var(--sand-50); }
.defs--icons .def { border-top: 0; }
.defs--icons .icon { display: block; }
.callout { max-width: none; padding: 14px 18px; border-left: 4px solid var(--green-badge); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--green-100); font-weight: 500; }
.psec > .callout { max-width: none; color: var(--green-900); }
.policy__address { margin: 0 0 1.25em; padding: 18px 22px; border-radius: var(--radius-sm); background: var(--sand-50); border: 1px solid var(--sand-200); font-style: normal; line-height: 1.6; max-width: 26em; }
.policy__address strong { font: 600 1.1rem/1.4 var(--font-head); color: var(--green-900); }
/* tables: purpose in the first column; on phones every row becomes a card */
.ptable { margin: 0 0 1.25em; border: 1px solid var(--sand-200); border-radius: var(--radius); overflow: hidden; }
.ptable table { width: 100%; border-collapse: collapse; font-size: .95rem; line-height: 1.5; }
.ptable thead th { padding: 12px 16px; background: var(--green-900); color: var(--white); text-align: left; font: 600 .82rem/1.2 var(--font-body); letter-spacing: .06em; text-transform: uppercase; }
.ptable tbody th, .ptable td { padding: 16px; border-top: 1px solid var(--sand-200); text-align: left; vertical-align: top; }
.ptable tbody th { width: 21%; font: 600 1rem/1.35 var(--font-head); color: var(--green-900); background: var(--sand-50); }
.ptable td { color: var(--muted); }
.ptable code { padding: 2px 8px; border-radius: 6px; background: var(--sand-200); font-size: .95em; }
.contacts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.contacts__card { display: grid; gap: 10px; justify-items: start; align-content: start; padding: clamp(20px, 2.4vw, 30px); border: 1px solid var(--sand-200); border-radius: var(--radius); background: var(--sand-50); }
.contacts__card strong { font: 600 1.2rem/1.3 var(--font-head); color: var(--green-900); }
.contacts__card p { margin: 0 0 6px; color: var(--muted); }
.contacts__card--dark { background: var(--green-100); border-color: transparent; }

/* ---------- Partner page ---------- */
/* buttons on the dark green sections */
.btn--light { background: var(--white); color: var(--green-900); }
.btn--light:hover { background: var(--green-100); }
.btn--outline-light { border-color: rgba(255, 255, 255, .5); color: var(--white); }
.btn--outline-light:hover { border-color: var(--white); background: var(--white); color: var(--green-900); }

/* Parts marked data-reveal fade in as they come into view. main.js sets .reveal-on on <html>
   only when it can watch them and motion is not reduced, so without it all is just shown.
   They move with `translate`, which leaves `transform` free for the hover effects. */
.reveal-on [data-reveal] { opacity: 0; translate: 0 18px; }
.reveal-on [data-reveal].is-in {
  opacity: 1; translate: none;
  transition: opacity .6s ease var(--reveal-delay, 0s), translate .7s cubic-bezier(.2, .7, .2, 1) var(--reveal-delay, 0s),
    transform .25s ease, border-color .25s ease, background-color .25s ease, box-shadow .25s ease;
}

/* the niche squares in the hero lift a little when pointed at, and their video zooms in */
.vgrid--lift .niche { transition: transform .25s ease, box-shadow .25s ease; }
.vgrid--lift .niche.niche--still:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(27, 67, 63, .22); }
.vgrid--lift .niche__video { transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.vgrid--lift .niche:hover .niche__video { transform: scale(1.06); }

/* cards that lift and turn white when pointed at */
.cards--lift .card { transition: transform .25s ease, border-color .25s ease, background-color .25s ease, box-shadow .25s ease; }
.cards--lift .card:hover { transform: translateY(-4px); border-color: var(--green-300); background: var(--white); box-shadow: var(--shadow); }
.cards--lift .card .icon { transition: transform .3s ease; }
.cards--lift .card:hover .icon { transform: rotate(-6deg) scale(1.08); }

/* traffic channels: a numbered image per channel with its name on a dark fade, the text below */
.channels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3vw, 40px) clamp(16px, 2vw, 24px); margin: 0; padding: 0; list-style: none; counter-reset: channel; }
.channel { counter-increment: channel; display: flex; flex-direction: column; gap: 14px; }
.channel__media { position: relative; isolation: isolate; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden; background: var(--green-900); transition: box-shadow .3s ease; }
.channel__media .niche__video { transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.channel:hover .channel__media .niche__video { transform: scale(1.05); }
.channel__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.channel__media::before {
  content: counter(channel, decimal-leading-zero); position: absolute; z-index: 1; left: 16px; top: 16px;
  padding: .35em .8em; border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22); backdrop-filter: blur(6px);
  color: var(--white); font: 600 .78rem/1 var(--font-head); letter-spacing: .06em;
}
.channel__media::after { content: ""; position: absolute; inset: 35% 0 0; background: linear-gradient(to top, rgba(16, 38, 30, .94), rgba(16, 38, 30, .6) 45%, rgba(16, 38, 30, 0)); pointer-events: none; }
.channel__title { position: absolute; z-index: 1; left: clamp(18px, 2vw, 26px); right: clamp(18px, 2vw, 26px); bottom: clamp(16px, 1.8vw, 22px); margin: 0; color: var(--white); font-size: calc(clamp(1.3rem, 1.8vw, 1.55rem) * var(--head-scale, 1)); }
.channel > p { margin: 0; padding-inline: 4px; color: var(--muted); }
.channel:hover .channel__media { box-shadow: 0 18px 40px rgba(27, 67, 63, .22); }
.channel:hover .channel__media img { transform: scale(1.05); }
.channels__note { display: flex; align-items: center; gap: 12px; margin: clamp(32px, 4vw, 48px) 0 0; padding: 14px 18px; border-radius: var(--radius-sm); background: var(--sand-100); color: var(--green-900); font-size: .95rem; font-weight: 500; }
.channels__note::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--green-badge); box-shadow: 0 0 0 4px rgba(0, 167, 111, .18); }

/* From application to earnings: four steps on a line that is drawn when it comes into view */
.journey-section { background-image: radial-gradient(60% 90% at 100% 0%, rgba(61, 187, 85, .16), transparent 60%); }
.journey { --gap: clamp(20px, 2.6vw, 36px); position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); margin: 0; padding: 0; list-style: none; }
/* the line runs from the first marker to the last */
.journey::before, .journey::after { content: ""; position: absolute; top: 10px; left: 11px; right: calc((100% - 3 * var(--gap)) / 4 - 11px); height: 2px; border-radius: 2px; }
.journey::before { background: rgba(255, 255, 255, .16); }
.journey::after { background: linear-gradient(90deg, var(--green-500), var(--green-300)); transform-origin: left; }
.journey__step { position: relative; padding-top: 50px; }
.journey__step::before { content: ""; position: absolute; z-index: 1; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--green-900); border: 3px solid var(--green-500); box-shadow: 0 0 0 6px rgba(61, 187, 85, .16); }
.journey__num { display: block; margin-bottom: 18px; font: 600 clamp(2.8rem, 4.4vw, 3.75rem)/1 var(--font-head); letter-spacing: -.03em; color: var(--green-300); transition: color .3s ease; }
@supports (-webkit-text-stroke: 1px) {
  .journey__num { color: transparent; -webkit-text-stroke: 1.5px var(--green-300); }
  .journey__step:hover .journey__num { color: var(--green-300); }
}
.journey__step h3 { font-size: calc(1.3rem * var(--head-scale, 1)); margin-bottom: .4em; }
.journey__step p { margin: 0; opacity: .8; }
@media (min-width: 901px) {
  /* room for two lines, so the texts start level across the row */
  .journey__step h3 { display: flex; align-items: flex-end; min-height: 2.4em; }
}
.journey__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(40px, 5vw, 64px); }
/* the steps come in one after the other while the line is drawn */
.reveal-on .journey[data-reveal] { opacity: 1; translate: none; }
.reveal-on .journey[data-reveal]::after { transform: scaleX(0); }
.reveal-on .journey[data-reveal].is-in::after { transform: none; transition: transform 1.3s cubic-bezier(.6, 0, .2, 1) .1s; }
.reveal-on .journey[data-reveal] .journey__step { opacity: 0; translate: 0 18px; }
.reveal-on .journey[data-reveal].is-in .journey__step { opacity: 1; translate: none; transition: opacity .6s ease var(--step-delay), translate .7s cubic-bezier(.2, .7, .2, 1) var(--step-delay); }
.journey__step:nth-child(1) { --step-delay: .1s; }
.journey__step:nth-child(2) { --step-delay: .45s; }
.journey__step:nth-child(3) { --step-delay: .8s; }
.journey__step:nth-child(4) { --step-delay: 1.15s; }

/* The partner platform: text and features beside a dashboard in a browser frame. The
   dashboard is drawn in HTML as a stand-in until there is a real screenshot. */
.platform { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(36px, 5vw, 80px); align-items: center; }
.platform__text > p { color: var(--muted); }
.platform__text > .platform__lead { color: var(--green-900); font: 600 clamp(1.15rem, 1.6vw, 1.35rem)/1.35 var(--font-head); }
.platform__text > .eyebrow { color: var(--green-700); }
.features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 1.75rem; }
.features li { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 18px 20px; border: 1px solid var(--sand-200); border-radius: var(--radius); background: var(--white); transition: border-color .25s ease, transform .25s ease; }
.features li:hover { border-color: var(--green-300); transform: translateY(-2px); }
.features .icon { width: 40px; height: 40px; padding: 9px; border-radius: 11px; background: var(--green-badge); color: var(--white); }
.features h3 { margin: 2px 0 .25em; font-size: calc(1.05rem * var(--head-scale, 1)); color: var(--green-900); }
.features p { margin: 0; color: var(--muted); font-size: .93rem; line-height: 1.45; }

.platform__shot { position: relative; margin: 0; }
.platform__shot::before { content: ""; position: absolute; inset: 6% 0 -8% 8%; border-radius: 50%; background: radial-gradient(closest-side, rgba(61, 187, 85, .3), transparent); filter: blur(12px); }
.platform__shot figcaption { position: relative; margin-top: 16px; color: var(--muted); font-size: .85rem; text-align: center; }
.browser { position: relative; overflow: hidden; border: 1px solid var(--sand-200); border-radius: 16px; background: var(--white); box-shadow: 0 2px 4px rgba(27, 67, 63, .06), 0 32px 64px -16px rgba(27, 67, 63, .32); transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
@media (min-width: 1021px) {
  .browser { transform: perspective(1800px) rotateY(-7deg) rotateX(2deg); }
  .platform__shot:hover .browser { transform: none; }
}
.browser__bar { display: flex; align-items: center; gap: 14px; height: 40px; padding: 0 14px; border-bottom: 1px solid var(--sand-200); background: var(--sand-100); }
.browser__dots { display: flex; gap: 6px; }
.browser__dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--sand-300); }
.browser__url { display: flex; flex: 1; align-items: center; gap: 6px; max-width: 280px; height: 24px; margin-right: auto; margin-left: auto; padding: 0 10px; border-radius: var(--radius-pill); background: var(--white); }
.browser__url .icon { width: 12px; height: 12px; color: var(--muted); stroke-width: 2.4; }
.browser__url i { width: 55%; height: 6px; border-radius: 3px; background: var(--sand-200); }

.dash { display: grid; grid-template-columns: 64px minmax(0, 1fr); }
.dash i, .dash b { display: block; }
.dash small { display: block; overflow: hidden; color: var(--muted); font: 600 10px/1.2 var(--font-body); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; text-overflow: ellipsis; }
.dash__side { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 12px; background: var(--green-900); }
.dash__side img { width: 40px; margin-bottom: 10px; }
.dash__side i { width: 34px; height: 30px; border-radius: 8px; background: rgba(255, 255, 255, .08); }
.dash__side i.is-on { background: var(--green-badge); }
.dash__main { display: grid; gap: 12px; padding: 16px; background: var(--sand-50); }
.dash__head { display: flex; align-items: center; justify-content: space-between; }
.dash__head i { width: 120px; height: 10px; border-radius: 5px; background: var(--green-900); opacity: .85; }
.dash__pill { width: 74px; height: 22px; border: 1px solid var(--sand-200); border-radius: var(--radius-pill); background: var(--white); }
.dash__kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.dash__kpi, .dash__chart, .dash__table { border: 1px solid var(--sand-200); border-radius: 10px; background: var(--white); }
.dash__kpi { display: grid; gap: 7px; padding: 10px 12px; }
.dash__kpi i { width: 60%; height: 14px; border-radius: 4px; background: var(--green-900); opacity: .85; }
.dash__kpi svg { width: 100%; height: 18px; }
.dash__kpi path { fill: none; stroke: var(--green-500); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.dash__chart { padding: 12px; }
.dash__chart svg { display: block; width: 100%; height: clamp(90px, 11vw, 140px); }
.dash__grid { fill: none; stroke: var(--sand-200); stroke-width: 1; vector-effect: non-scaling-stroke; }
.dash__area { fill: var(--green-100); opacity: .8; }
.dash__line { fill: none; stroke: var(--green-badge); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.reveal-on .platform__shot[data-reveal] .dash__line { stroke-dashoffset: 1; }
.reveal-on .platform__shot[data-reveal].is-in .dash__line { stroke-dashoffset: 0; transition: stroke-dashoffset 1.8s cubic-bezier(.4, 0, .2, 1) .3s; }
.dash__table { display: grid; gap: 9px; padding: 10px 12px; }
.dash__row { display: grid; grid-template-columns: 22px minmax(0, 1fr) 54px; align-items: center; gap: 10px; }
.dash__row b { width: 22px; height: 22px; border-radius: 6px; background: var(--green-100); }
.dash__row i { width: 70%; height: 8px; border-radius: 4px; background: var(--sand-200); }
.dash__row:nth-child(3) i { width: 52%; }
.dash__row:nth-child(4) i { width: 80%; }
.dash__row span { height: 16px; border-radius: var(--radius-pill); background: var(--green-100); }

/* Compliance and trust: the text beside three points on a sand panel with a shield in its corner */
.trust { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.trust__text > p:not(.eyebrow) { max-width: 36em; color: var(--muted); font-size: 1.05rem; }
.trust__text > .trust__lead { color: var(--ink); font-size: 1.2rem; }
.trust__text .btn { margin-top: .75rem; }
.trust__points {
  display: grid; gap: 14px; padding: clamp(20px, 2.6vw, 36px); border-radius: var(--radius-lg);
  background: var(--sand-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b433f' stroke-opacity='.07' stroke-width='1' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E") right -60px bottom -70px / 320px no-repeat;
}
.trust__points li { display: flex; align-items: flex-start; gap: 16px; padding: 20px 22px; border: 1px solid var(--sand-200); border-radius: var(--radius); background: var(--white); transition: transform .25s ease, border-color .25s ease; }
.trust__points li:hover { transform: translateX(4px); border-color: var(--green-300); }
.trust__points .icon { width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: var(--green-badge); color: var(--white); }
.trust__points h3 { margin: 2px 0 .3em; font-size: calc(1.15rem * var(--head-scale, 1)); color: var(--green-900); }
.trust__points p { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.5; }

/* the closing call to action: dark green, with a glow and faint rings rising from below */
.closing__box {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(48px, 7vw, 104px) clamp(24px, 6vw, 80px);
  border-radius: var(--radius-lg); background: var(--green-900); color: var(--white); text-align: center;
}
.closing__box::before, .closing__box::after { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; }
.closing__box::before { background: radial-gradient(55% 75% at 50% 0%, rgba(61, 187, 85, .32), transparent 70%), radial-gradient(40% 60% at 100% 100%, rgba(0, 167, 111, .22), transparent 70%); }
.closing__box::after {
  background: repeating-radial-gradient(circle at 50% 130%, rgba(255, 255, 255, .07) 0 1px, transparent 1px 46px);
  -webkit-mask-image: linear-gradient(to top, #000, transparent 80%); mask-image: linear-gradient(to top, #000, transparent 80%);
}
.closing__box h2 { max-width: 16em; margin-inline: auto; font-size: calc(clamp(2rem, 4.2vw, 3.25rem) * var(--head-scale, 1)); }
.closing__box > p { max-width: 36em; margin: 0 auto; opacity: .85; font-size: 1.15rem; }
.closing__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 2rem; }
.closing__box > .closing__login { margin-top: 1.5rem; font-size: .95rem; opacity: .8; }
.closing__login a { color: var(--green-300); font-weight: 600; text-decoration: none; }
.closing__login a:hover { color: var(--white); }
.closing__login a:hover .arrow { transform: translateX(4px); }

@media (max-width: 1020px) {
  .channels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .platform, .trust { grid-template-columns: 1fr; }
  .platform__shot { max-width: 680px; }
  /* advertiser page: on narrow screens the picture comes right after the text, before the
     feature boxes (the text column is opened up so its parts can be put in order) */
  .platform--shot-first { row-gap: 0; }
  .platform--shot-first .platform__text { display: contents; }
  .platform--shot-first .platform__shot { order: 1; margin: 12px 0 8px; }
  .platform--shot-first .features { order: 2; }
}
@media (max-width: 900px) {
  /* the steps stand on top of each other, joined by a line down the left */
  .journey { grid-template-columns: 1fr; gap: 0; }
  .journey::before, .journey::after { display: none; }
  .journey__step { padding: 0 0 36px 52px; }
  .journey__step:last-child { padding-bottom: 0; }
  .journey__step:not(:last-child)::after { content: ""; position: absolute; left: 10px; top: 30px; bottom: 6px; width: 2px; border-radius: 2px; background: linear-gradient(var(--green-500), rgba(255, 255, 255, .16)); }
  .journey__num { margin-bottom: 10px; font-size: 2.6rem; }
}
@media (max-width: 640px) {
  .channels, .features { grid-template-columns: 1fr; }
  .closing__actions .btn, .journey__actions .btn { width: 100%; }
  .dash { grid-template-columns: 44px minmax(0, 1fr); }
  .dash__side { padding-inline: 8px; }
  .dash__side img { width: 30px; }
  .dash__side i { width: 26px; height: 24px; }
  .dash__main { padding: 12px; gap: 10px; }
  .dash__kpis { gap: 6px; }
  .dash__kpi { padding: 8px; }
  .dash small { font-size: 9px; letter-spacing: .03em; }
}

/* ---------- Advertiser page ---------- */
/* The world map comes alive: the markers pop in one after another and breathe slowly. They
   mark the markets we work with, not live activity. */
.map--lively .map__dot { transform-box: fill-box; transform-origin: center; animation: map-pop .7s cubic-bezier(.2, .9, .3, 1.4) both; }
.map--lively .map__mark:nth-of-type(4n+2) .map__dot { animation-delay: .15s; }
.map--lively .map__mark:nth-of-type(4n+3) .map__dot { animation-delay: .3s; }
.map--lively .map__mark:nth-of-type(4n) .map__dot { animation-delay: .45s; }
.map--lively .map__pulse { animation: map-breathe 4.8s ease-out infinite; }
.map--lively .map__mark:nth-of-type(5n+1) .map__pulse { animation-delay: .6s; }
.map--lively .map__mark:nth-of-type(5n+2) .map__pulse { animation-delay: 1.6s; }
.map--lively .map__mark:nth-of-type(5n+3) .map__pulse { animation-delay: 2.6s; }
.map--lively .map__mark:nth-of-type(5n+4) .map__pulse { animation-delay: 3.6s; }
@keyframes map-pop { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: none; } }
@keyframes map-breathe { 0% { opacity: .35; transform: scale(1); } 60%, 100% { opacity: 0; transform: scale(2.6); } }
@media (prefers-reduced-motion: reduce) {
  .map--lively .map__dot, .map--lively .map__pulse { animation: none; }
}

/* why affiliate marketing: the argument beside four cards, two by two */
.why { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.why__text > p:not(.eyebrow) { max-width: 34em; color: var(--muted); font-size: 1.05rem; }
.why__text > .why__lead { color: var(--ink); font-size: 1.2rem; }
.why__text > :last-child { margin-bottom: 0; }
.why__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
/* in the narrow two-by-two cards the icon stands above the title */
.why__cards .card:has(> .icon) { grid-template-columns: minmax(0, 1fr); }
.why__cards .card .icon { margin-bottom: 4px; }
.section__intro + .section__intro { margin-top: .75em; }
/* cards on a sand or cream section stand out in white */
.cards--white .card { background: var(--white); }

/* the business model: a key to the two flows and a note on what payment is based on */
.model__chain { transition: box-shadow .3s ease; }
.model__node:not(.model__node--spudo) { transition: transform .25s ease, background-color .25s ease; }
.model__node:not(.model__node--spudo):hover { transform: translateY(-4px); background: var(--green-100); }
.model__legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; margin-top: 24px; }
.model__key { display: inline-flex; align-items: center; gap: 10px; color: var(--green-900); font: 600 .92rem/1.2 var(--font-head); }
.model__key i { width: 28px; height: 2px; background: linear-gradient(90deg, var(--green-badge) 50%, transparent 50%) 0 0 / 8px 2px repeat-x; }
.model__key--pay i { background-image: linear-gradient(90deg, var(--green-900) 50%, transparent 50%); }
.model__note { max-width: 40em; margin: 14px auto 0; color: var(--muted); font-size: .92rem; text-align: center; }

/* partner management: the text and four points beside a photo with a small badge on it */
.manage { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.manage__text > p:not(.eyebrow) { max-width: 36em; color: var(--muted); font-size: 1.05rem; }
.manage__text > .manage__lead { color: var(--ink); font-size: 1.2rem; }
.manage__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 1.75rem; }
.manage__list li { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; border: 1px solid var(--sand-200); border-radius: var(--radius-sm); background: var(--sand-50); transition: border-color .25s ease, background-color .25s ease; }
.manage__list li:hover { border-color: var(--green-300); background: var(--white); }
.manage__list .check { margin-top: 1px; }
.manage__list h3 { margin: 0 0 .25em; font-size: calc(1.02rem * var(--head-scale, 1)); color: var(--green-900); }
.manage__list p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.45; }
.manage__media { position: relative; margin: 0; }
.manage__media::before { content: ""; position: absolute; inset: 24px -16px -16px 24px; border-radius: var(--radius-lg); background: var(--green-100); }
.manage__media img { position: relative; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.manage__badge { position: absolute; left: 20px; bottom: 20px; display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: var(--radius-pill); background: var(--white); box-shadow: var(--shadow); color: var(--green-900); font: 600 .9rem/1.2 var(--font-head); }
.manage__dots { display: flex; }
.manage__dots i { width: 24px; height: 24px; border: 2px solid var(--white); border-radius: 50%; background: var(--green-300); }
.manage__dots i + i { margin-left: -8px; background: var(--green-badge); }
.manage__dots i:last-child { background: var(--green-900); }

/* the bars of the demo dashboard grow up when it comes into view */
.dash__bars rect { fill: var(--green-300); transform-box: fill-box; transform-origin: bottom; }
.dash__bars rect.is-on { fill: var(--green-badge); }
.reveal-on .platform__shot[data-reveal] .dash__bars rect { transform: scaleY(0); }
.reveal-on .platform__shot[data-reveal].is-in .dash__bars rect { transform: none; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.dash__bars rect:nth-child(2) { transition-delay: .08s !important; }
.dash__bars rect:nth-child(3) { transition-delay: .16s !important; }
.dash__bars rect:nth-child(4) { transition-delay: .24s !important; }
.dash__bars rect:nth-child(5) { transition-delay: .32s !important; }
.dash__bars rect:nth-child(6) { transition-delay: .4s !important; }
.dash__bars rect:nth-child(7) { transition-delay: .48s !important; }
.dash__bars rect:nth-child(8) { transition-delay: .56s !important; }

/* quality, compliance and security: four cards and a closing line */
.assure { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.assure li { position: relative; overflow: hidden; padding: clamp(22px, 2.2vw, 28px); border: 1px solid var(--sand-200); border-radius: var(--radius); background: var(--sand-50); transition: transform .25s ease, border-color .25s ease, background-color .25s ease, box-shadow .25s ease; }
.assure li::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--green-badge); transform: scaleX(0); transform-origin: left; transition: transform .35s ease; }
.assure li:hover { transform: translateY(-4px); border-color: var(--green-300); background: var(--white); box-shadow: var(--shadow); }
.assure li:hover::after { transform: none; }
.assure .icon { display: block; width: 44px; height: 44px; margin-bottom: 18px; padding: 10px; border-radius: 12px; background: var(--green-900); color: var(--white); }
.assure h3 { margin-bottom: .4em; font-size: calc(1.15rem * var(--head-scale, 1)); color: var(--green-900); }
.assure p { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.5; }
.assure__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: clamp(24px, 3vw, 36px); padding: 18px 22px; border-radius: var(--radius); background: var(--green-100); }
.assure__foot .icon { width: 40px; height: 40px; padding: 9px; border-radius: 50%; background: var(--white); color: var(--green-badge); }
.assure__foot p { flex: 1 1 280px; margin: 0; color: var(--green-900); font-weight: 500; }

/* getting started: the steps of the journey as cards, with large green numbers */
.journey--cards::before, .journey--cards::after { left: 35px; right: calc((100% - 3 * var(--gap)) / 4 - 35px); }
.journey--cards .journey__step { margin-top: 36px; padding: clamp(22px, 2.2vw, 28px); border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--radius); background: rgba(255, 255, 255, .04); transition: transform .25s ease, border-color .25s ease, background-color .25s ease; }
.journey--cards .journey__step::before { left: 24px; top: -36px; }
.journey--cards .journey__step:hover { transform: translateY(-4px); border-color: var(--green-500); background: rgba(255, 255, 255, .07); }
.journey--cards .journey__num { color: var(--green-500); -webkit-text-stroke: 0; }
.reveal-on .journey--cards[data-reveal].is-in .journey__step {
  transition: opacity .6s ease var(--step-delay), translate .7s cubic-bezier(.2, .7, .2, 1) var(--step-delay),
    transform .25s ease, border-color .25s ease, background-color .25s ease;
}

/* frequently asked questions: the heading on the left, an accordion on the right */
.faq { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.faq__head { position: sticky; top: 112px; }
/* a dark card under the heading for anyone whose question is not on the list */
.faq__help { margin-top: clamp(20px, 2.4vw, 32px); padding: clamp(22px, 2.4vw, 30px); border-radius: var(--radius-lg); background: var(--green-900); color: var(--white); }
.faq__help .icon { width: 44px; height: 44px; padding: 10px; margin-bottom: 14px; border-radius: 12px; background: rgba(255, 255, 255, .1); color: var(--green-300); }
.faq__help p { margin: 0 0 1.2rem; color: rgba(255, 255, 255, .85); font-size: 1.02rem; line-height: 1.55; }
/* the questions as one numbered panel, divided by hairlines */
.faq__list { counter-reset: faq; margin: 0; border: 1px solid var(--sand-200); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow); overflow: hidden; interpolate-size: allow-keywords; }
.faq__list details { counter-increment: faq; position: relative; border-top: 1px solid var(--sand-200); transition: background-color .25s ease; }
.faq__list details:first-child { border-top: 0; }
.faq__list details::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--green-500); opacity: 0; transition: opacity .25s ease; }
.faq__list details[open] { background: var(--sand-50); }
.faq__list details[open]::before { opacity: 1; }
.faq__list summary { display: flex; align-items: center; gap: 18px; padding: 22px clamp(20px, 2.4vw, 30px); cursor: pointer; list-style: none; }
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary::before { content: counter(faq, decimal-leading-zero); flex: none; min-width: 2ch; color: var(--green-700); font: 600 .85rem/1 var(--font-head); letter-spacing: .04em; }
.faq__list summary::after {
  content: ""; flex: none; margin-left: auto; width: 32px; height: 32px; border-radius: 50%;
  background: var(--sand-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b433f' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 16px no-repeat;
  transition: transform .3s ease, background-color .3s ease;
}
.faq__list details[open] summary::after { transform: rotate(45deg); background-color: var(--green-100); }
.faq__list summary:hover h3 { color: var(--green-700); }
.faq__list h3 { margin: 0; font-size: calc(clamp(1.08rem, 1.3vw, 1.22rem) * var(--head-scale, 1)); line-height: 1.35; color: var(--green-900); transition: color .2s ease; }
.faq__list details > p { margin: 0; padding: 0 clamp(20px, 2.4vw, 30px) 24px calc(clamp(20px, 2.4vw, 30px) + 2ch + 18px); max-width: 44em; color: var(--muted); font-size: .98rem; line-height: 1.65; }
.faq__list details::details-content { block-size: 0; overflow: hidden; transition: block-size .35s ease, content-visibility .35s allow-discrete; }
.faq__list details[open]::details-content { block-size: auto; }

@media (max-width: 1020px) {
  .why, .manage, .faq { grid-template-columns: 1fr; }
  .faq__head { position: static; }
  /* the questions come first, the contact card after them */
  .faq { row-gap: 0; }
  .faq__head { display: contents; }
  .faq__list { order: 2; margin-top: 8px; }
  .faq__help { order: 3; margin-top: 24px; }
  .assure { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .manage__media { max-width: 640px; }
}
@media (max-width: 900px) {
  /* the step cards stand on top of each other, their markers on a line down the left */
  .journey--cards .journey__step { margin: 0 0 16px 40px; padding: 22px; }
  .journey--cards .journey__step:last-child { margin-bottom: 0; }
  .journey--cards .journey__step::before { left: -40px; top: 22px; }
  .journey--cards .journey__step:not(:last-child)::after { left: -30px; top: 50px; bottom: -38px; }
}
@media (max-width: 640px) {
  .why__cards, .manage__list, .assure { grid-template-columns: 1fr; }
  .assure__foot .btn { width: 100%; }
  .manage__media::before { inset: 14px -8px -10px 14px; }
  .manage__badge { left: 12px; bottom: 12px; font-size: .8rem; }
  .faq__list summary { gap: 14px; padding: 18px; }
  .faq__list details > p { padding: 0 18px 20px; }
}

/* Advertiser hero: the traffic channels as squares beside the text, like the niche videos on
   the partner page; each is a link to the channel descriptions. Markets: text and industries
   beside the world map. */
.chgrid { margin: 0; padding: 0; list-style: none; }
.chgrid li { position: relative; }
a.niche { text-decoration: none; }
/* long channel names hyphenate instead of breaking anywhere */
.chgrid .niche__label { overflow-wrap: normal; -webkit-hyphens: auto; hyphens: auto; }
.niche__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.niche__img ~ .niche__label::before {
  content: ""; position: absolute; z-index: -1; left: -18px; right: -18px; bottom: -18px; height: 110px;
  background: linear-gradient(to top, rgba(16, 38, 30, .92), rgba(16, 38, 30, 0));
}
.vgrid--lift a.niche:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(27, 67, 63, .22); }
.vgrid--lift a.niche:hover .niche__img { transform: scale(1.06); }
.markets { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(28px, 4.4vw, 72px); align-items: center; }
.markets .section__intro { margin-bottom: 0; }
@media (max-width: 1020px) {
  .markets { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .chgrid .niche__label { font-size: .92rem; }
}

/* Markets (advertiser page): a large dotted map on dark green beside the text and figures,
   with the markets grouped by region below. A market pointed at in the list or on the map
   lights up in both (main.js, "Markets"). */
.markets-section .markets { grid-template-columns: minmax(0, .8fr) minmax(0, 1.45fr); grid-template-areas: "text map" "regions regions"; row-gap: clamp(32px, 4vw, 56px); }
.markets__text { grid-area: text; }
.markets__map { grid-area: map; }
.markets-section .section__intro { opacity: 1; color: rgba(255, 255, 255, .78); }
.markets__stats { display: flex; flex-wrap: wrap; gap: 18px 36px; margin: clamp(24px, 3vw, 36px) 0 0; }
.markets__stats div { min-width: 0; max-width: 12em; }
.markets__stats dt { color: var(--green-300); font: 600 calc(clamp(2rem, 3.4vw, 2.75rem) * var(--head-scale, 1))/1 var(--font-head); letter-spacing: -.02em; }
.markets__stats dd { margin: 6px 0 0; color: rgba(255, 255, 255, .72); font-size: .92rem; line-height: 1.35; }
.map--dark { padding: 0; background: none; box-shadow: none; }
.map--dark .map__land { stroke: rgba(255, 255, 255, .16); }
/* the map of Europe has a finer grid of dots than the world map */
.map--europe .map__land { stroke-width: 7.5; }
/* With only Europe the section is kept compact: text, figures and markets on the left, a map
   of limited height on the right */
.markets-section:has(.map--europe) { padding-block: clamp(48px, 6vw, 88px); }
.markets:has(.map--europe) .regions { display: block; padding-top: 0; border-top: 0; }
.markets:has(.map--europe) .markets__stats { margin-top: clamp(16px, 2vw, 24px); }
.map--europe .map__world { width: 100%; max-width: 440px; height: auto; margin-inline: auto; }
.map--europe .map__label { justify-content: center; }
@media (min-width: 1021px) {
  .markets-section .markets:has(.map--europe) { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-areas: "text map" "regions map"; row-gap: 24px; align-items: start; }
  .markets:has(.map--europe) .markets__map { align-self: center; }
}
@media (max-width: 1020px) {
  .map--europe .map__world { max-width: 340px; }
}
.map--dark .map__dot { fill: var(--green-300); stroke: var(--green-900); transition: fill .2s ease, transform .25s ease; }
.map--dark .map__pulse { fill: var(--green-300); }
.map--dark .map__label { color: rgba(255, 255, 255, .78); }
.map--dark .map__key { background: var(--green-300); }
.map--dark .map__mark { cursor: default; }
.map--dark .map__mark.is-hot .map__dot { fill: var(--white); transform: scale(1.7); animation: none; }
.regions { grid-area: regions; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 32px; padding-top: clamp(24px, 3vw, 36px); border-top: 1px solid rgba(255, 255, 255, .14); }
/* Europe has the most markets, so it takes a whole row above the other regions */
.regions__row--wide { grid-column: 1 / -1; }
.regions__name { margin: 0 0 .8rem; color: var(--green-300); font: 600 .78rem/1.2 var(--font-body); letter-spacing: .09em; text-transform: uppercase; }
.regions__list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.regions__list li { padding: 5px 11px; border: 1px solid rgba(255, 255, 255, .2); border-radius: var(--radius-pill); color: rgba(255, 255, 255, .88); font-size: .86rem; line-height: 1.2; cursor: default; transition: background-color .2s, color .2s, border-color .2s; }
.regions__list li:hover, .regions__list li.is-hot { background: var(--white); border-color: var(--white); color: var(--green-900); }
@media (max-width: 1020px) {
  .markets-section .markets { grid-template-columns: 1fr; grid-template-areas: "text" "map" "regions"; }
  .regions { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .regions { grid-template-columns: 1fr; }
}

/* About page. The roadmap: outlined years above a glowing line with a dot per year, and a
   card per year below it. On large screens the stops scroll sideways (arrows and a bar follow
   the scrolling, main.js "Roadmap"); on small ones they stand upright along a line. */
.about__media--hero img { aspect-ratio: 4 / 3; box-shadow: var(--shadow); }
.roadmap2-section { overflow: hidden; }
.roadmap2__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(28px, 3.4vw, 48px); }
.roadmap2__head .section__intro { opacity: 1; color: rgba(255, 255, 255, .75); }
.roadmap2__nav { display: flex; gap: 10px; }
.roadmap2__nav[hidden] { display: none; }
.roadmap2__arrow { width: 46px; height: 46px; padding: 0; border: 1px solid rgba(255, 255, 255, .3); border-radius: 50%; background: transparent; color: var(--white); font: 600 1.1rem/1 var(--font-body); cursor: pointer; transition: background-color .2s, color .2s, border-color .2s, opacity .2s; }
.roadmap2__arrow:hover { background: var(--green-300); border-color: var(--green-300); color: var(--green-900); }
.roadmap2__arrow:disabled { opacity: .3; cursor: default; background: transparent; color: var(--white); border-color: rgba(255, 255, 255, .3); }
.roadmap2__viewport {
  --edge: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--edge); scrollbar-width: none;
  padding-inline: var(--edge);
}
.roadmap2__viewport::-webkit-scrollbar { display: none; }
.roadmap2 { position: relative; display: flex; gap: 20px; width: max-content; margin: 0; padding: 4px 0 28px; list-style: none; }
.roadmap2::before { content: ""; position: absolute; left: 0; right: 0; top: 74px; height: 2px; background: linear-gradient(90deg, var(--green-500), var(--green-300) 70%, rgba(143, 224, 160, .2)); }
.roadmap2__stop { position: relative; display: flex; flex-direction: column; width: clamp(270px, 27vw, 330px); scroll-snap-align: start; }
.roadmap2__year { display: block; height: 56px; color: transparent; -webkit-text-stroke: 1.2px rgba(143, 224, 160, .75); font: 700 clamp(2.8rem, 4.2vw, 3.6rem)/56px var(--font-head); letter-spacing: -.02em; }
.roadmap2__dot { position: relative; z-index: 1; width: 18px; height: 18px; margin: 10px 0 24px; border-radius: 50%; background: var(--green-300); box-shadow: 0 0 0 6px rgba(143, 224, 160, .15), 0 0 24px rgba(61, 187, 85, .6); }
.roadmap2__card { flex: 1; overflow: hidden; padding: 0; border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--radius-lg); background: rgba(255, 255, 255, .05); transition: transform .25s ease, border-color .25s ease, background-color .25s ease; }
.roadmap2__stop:hover .roadmap2__card { transform: translateY(-4px); border-color: rgba(143, 224, 160, .5); background: rgba(255, 255, 255, .08); }
/* the photo of the year, with the milestone on it */
.roadmap2__media { position: relative; margin: 0; aspect-ratio: 3 / 2; overflow: hidden; background: rgba(255, 255, 255, .06); }
.roadmap2__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.roadmap2__media::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(to top, rgba(16, 38, 30, .55), transparent); pointer-events: none; }
.roadmap2__stop:hover .roadmap2__media img { transform: scale(1.05); }
.roadmap2__media .roadmap2__chip { position: absolute; z-index: 1; left: 14px; bottom: 14px; margin: 0; box-shadow: 0 4px 14px rgba(16, 38, 30, .3); }
.roadmap2__body { padding: clamp(18px, 2vw, 24px); }
.roadmap2__chip { display: inline-block; margin-bottom: 14px; padding: .4em .9em; border-radius: var(--radius-pill); background: var(--green-300); color: var(--green-900); font: 600 .8rem/1.2 var(--font-head); }
.roadmap2__card h3 { margin-bottom: .4em; color: var(--white); font-size: calc(1.2rem * var(--head-scale, 1)); }
.roadmap2__card p { margin: 0; color: rgba(255, 255, 255, .75); font-size: .95rem; line-height: 1.55; }
/* today: a filled year, a pulsing dot and a lit card */
.roadmap2__stop--now .roadmap2__year { color: var(--green-300); -webkit-text-stroke: 0; }
.roadmap2__stop--now .roadmap2__dot { animation: roadmap-pulse 2.4s ease-out infinite; }
.roadmap2__stop--now .roadmap2__card { border-color: rgba(143, 224, 160, .55); background: rgba(143, 224, 160, .08); }
@keyframes roadmap-pulse { 0% { box-shadow: 0 0 0 0 rgba(143, 224, 160, .55), 0 0 24px rgba(61, 187, 85, .6); } 70%, 100% { box-shadow: 0 0 0 16px rgba(143, 224, 160, 0), 0 0 24px rgba(61, 187, 85, .6); } }
@media (prefers-reduced-motion: reduce) { .roadmap2__stop--now .roadmap2__dot { animation: none; } }
.roadmap2__progress { height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.roadmap2__progress span { display: block; width: var(--roadmap-size, 30%); height: 100%; border-radius: 3px; background: var(--green-300); transform: translateX(var(--roadmap-pos, 0%)); transition: transform .15s linear; }
@media (max-width: 760px) {
  .roadmap2__nav, .roadmap2__progress { display: none; }
  .roadmap2__viewport { overflow: visible; padding-inline: var(--gutter); }
  .roadmap2 { flex-direction: column; gap: 28px; width: auto; padding: 0; }
  .roadmap2::before { left: 8px; right: auto; top: 10px; bottom: 10px; width: 2px; height: auto; background: linear-gradient(180deg, var(--green-500), var(--green-300) 70%, rgba(143, 224, 160, .2)); }
  .roadmap2__stop { width: auto; padding-left: 40px; }
  .roadmap2__year { height: auto; font-size: 2.4rem; line-height: 1.1; margin-bottom: 12px; }
  .roadmap2__dot { position: absolute; left: 0; top: 12px; margin: 0; }
}

/* ---------- Front page ---------- */

/* Hero: the text beside a large video stage. Two video layers cross-fade when the niche
   changes; the label at the bottom names the niche on screen. */
.home-hero { padding: clamp(40px, 6vw, 88px) 0 clamp(32px, 4vw, 56px); }
.home-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(28px, 4.4vw, 72px); align-items: center; }
.home-hero h1 { font-size: calc(clamp(2.4rem, 4.6vw, 3.9rem) * var(--head-scale, 1)); }
.home-hero .lead { color: var(--ink); }
.home-hero__more { max-width: 34em; color: var(--muted); }
.stage { position: relative; isolation: isolate; margin: 0; aspect-ratio: 5 / 4; border-radius: var(--radius-lg); overflow: hidden; background: var(--green-900); box-shadow: 0 2px 4px rgba(27, 67, 63, .06), 0 32px 64px -20px rgba(27, 67, 63, .38); }
.stage__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s ease; }
.stage__video.is-on { opacity: 1; }
.stage::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(to top, rgba(16, 38, 30, .7), rgba(16, 38, 30, 0)); pointer-events: none; }
.stage__label {
  position: absolute; z-index: 1; left: 20px; bottom: 20px; display: flex; align-items: center; gap: 10px;
  padding: 6px 16px 6px 6px; border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .94); color: var(--green-900); font: 600 1rem/1.2 var(--font-head);
  backdrop-filter: blur(6px);
}
.stage__icon .icon { display: block; width: 32px; height: 32px; padding: 7px; border-radius: 50%; background: var(--green-badge); color: var(--white); stroke-width: 2; }

/* the niche cards below: a still each; the one on stage is outlined, and a thin bar fills up
   until the stage moves on */
.nicherow { margin-top: clamp(28px, 3.4vw, 44px); }
.nicherow .eyebrow { margin-bottom: .75rem; }
.nicherow__list {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none;
}
/* six traffic channels on the advertiser page; the editor's video buttons sit on a card's corner */
.nicherow__list--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.nicherow__list li { position: relative; }
.stage--channels .stage__video { object-position: center 30%; }
.nicherow__list--6 .nichecard__label { overflow-wrap: normal; -webkit-hyphens: auto; hyphens: auto; }
.nichecard {
  position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0;
  border: 0; border-radius: var(--radius); overflow: hidden; background: var(--green-900); color: var(--white);
  font: inherit; text-align: left; cursor: pointer; transition: transform .25s ease, box-shadow .25s ease;
}
.nichecard__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nichecard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.nichecard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(16, 38, 30, .85), rgba(16, 38, 30, .05) 60%); }
.nichecard .icon { position: absolute; z-index: 1; left: 8px; top: 8px; width: 25px; height: 25px; padding: 5px; border-radius: 8px; background: var(--green-badge); color: var(--white); stroke-width: 2; }
.nichecard__label { position: absolute; z-index: 1; left: 10px; right: 10px; bottom: 12px; font: 600 .95rem/1.2 var(--font-head); overflow-wrap: anywhere; }
.nichecard__bar { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 3px; background: var(--green-500); transform: scaleX(0); transform-origin: left; }
.nichecard:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(27, 67, 63, .2); }
.nichecard:hover img { transform: scale(1.06); }
.nichecard.is-on { box-shadow: 0 0 0 3px var(--green-500); }
.is-timing .nichecard.is-on .nichecard__bar { animation: niche-timer var(--stage-time, 7s) linear forwards; }
@keyframes niche-timer { to { transform: none; } }

/* two ways to work with Spudo: a light card for advertisers, a dark one for partners */
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.duo__card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--sand-200); border-radius: var(--radius-lg); background: var(--sand-100); transition: transform .3s ease, box-shadow .3s ease; }
.duo__card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.duo__media { margin: clamp(14px, 1.6vw, 20px) clamp(14px, 1.6vw, 20px) 0; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 7; }
.duo__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.duo__card:hover .duo__media img { transform: scale(1.04); }
.duo__body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: clamp(22px, 3vw, 40px); }
.duo__body h3 { font-size: calc(clamp(1.5rem, 2.4vw, 2rem) * var(--head-scale, 1)); color: var(--green-900); }
.duo__body > p:not(.eyebrow) { color: var(--muted); }
.duo__list { display: grid; gap: 10px; margin: .5rem 0 1.75rem; }
.duo__list li { display: flex; align-items: center; gap: 12px; font-weight: 500; }
.duo__body .btn { margin-top: auto; }
.duo__card--dark { border-color: transparent; background: var(--green-900); color: var(--white); }
.duo__card--dark h3 { color: var(--white); }
.duo__card--dark .eyebrow { color: var(--green-300); }
.duo__card--dark .duo__body > p:not(.eyebrow) { color: rgba(255, 255, 255, .8); }

/* four cards in one row on wide screens */
.cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cards--4 .card:has(> .icon) { grid-template-columns: minmax(0, 1fr); }
.cards--4 .card .icon { margin-bottom: 6px; }

/* the industries: an uneven grid of stills with the name on a dark fade */
.ind { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 15vw, 220px); gap: clamp(12px, 1.4vw, 18px); margin: 0; padding: 0; list-style: none; }
.ind__item { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--radius-lg); background: var(--green-900); }
.ind__item--big { grid-column: span 2; grid-row: span 2; }
.ind__item--wide { grid-column: span 2; }
.ind__item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.ind__item::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(to top, rgba(16, 38, 30, .9), rgba(16, 38, 30, 0)); }
.ind__item:hover img { transform: scale(1.06); }
.ind__label { position: absolute; z-index: 1; left: clamp(14px, 1.6vw, 22px); right: 14px; bottom: clamp(14px, 1.6vw, 20px); display: flex; align-items: center; gap: 10px; color: var(--white); }
.ind__label .icon { width: 32px; height: 32px; padding: 7px; border-radius: 9px; background: var(--green-badge); color: var(--white); stroke-width: 2; }
.ind__label h3 { margin: 0; font-size: calc(clamp(1.1rem, 1.5vw, 1.35rem) * var(--head-scale, 1)); }
.ind__item--big .ind__label h3 { font-size: calc(clamp(1.4rem, 2.2vw, 2rem) * var(--head-scale, 1)); }

/* about Spudo: the award photo beside the story, with a few plain facts */
.story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5.5vw, 88px); align-items: center; }
.story__media { position: relative; margin: 0; }
.story__media::before { content: ""; position: absolute; inset: 24px 24px -16px -16px; border-radius: var(--radius-lg); background: var(--green-100); }
.story__media img { position: relative; width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; object-position: 55% 60%; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.story__badge { position: absolute; right: 20px; top: 20px; padding: .5em 1em; border-radius: var(--radius-pill); background: var(--green-900); color: var(--white); font: 600 .9rem/1.2 var(--font-head); box-shadow: var(--shadow); }
.story__text > p:not(.eyebrow) { max-width: 34em; margin-bottom: 1.15em; color: var(--muted); font-size: 1.05rem; line-height: 1.65; }
/* the two sentences of the heading on a line each */
.story__text h2 { max-width: 13em; }
.story__text > .story__lead { color: var(--ink); font-size: 1.2rem; }
.story__facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 1.5rem 0 2rem; }
.story__facts li { display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px; border: 1px solid var(--sand-200); border-radius: var(--radius-pill); background: var(--sand-50); color: var(--green-900); font: 600 .9rem/1.2 var(--font-head); }
.story__facts .icon { width: 20px; height: 20px; color: var(--green-badge); }

/* the features in one column (three of them) */
.features--list { grid-template-columns: minmax(0, 1fr); }
.features--list li { flex-direction: row; }

/* getting started: one large link card per audience */
.choose { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.choose__card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: clamp(24px, 3.4vw, 44px); border: 1px solid var(--sand-200); border-radius: var(--radius-lg);
  background: var(--white); text-decoration: none; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.choose__card > .icon { width: 52px; height: 52px; margin-bottom: 8px; padding: 12px; border-radius: 14px; background: var(--green-badge); color: var(--white); }
.choose__tag { color: var(--green-700); font: 600 .82rem/1.2 var(--font-body); letter-spacing: .09em; text-transform: uppercase; }
.choose__quote { margin-bottom: 1rem; color: var(--green-900); font: 600 calc(clamp(1.5rem, 2.4vw, 2.1rem) * var(--head-scale, 1))/1.15 var(--font-head); letter-spacing: -.015em; }
.choose__card .btn { margin-top: auto; }
.choose__card:hover { transform: translateY(-4px); border-color: var(--green-300); box-shadow: var(--shadow); }
.choose__card:hover .arrow { transform: translateX(4px); }
.choose__card--dark { border-color: transparent; background: var(--green-900); }
.choose__card--dark .choose__tag { color: var(--green-300); }
.choose__card--dark .choose__quote { color: var(--white); }

@media (max-width: 1200px) {
  .nicherow__list { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter); scroll-padding-inline: var(--gutter); }
  .nicherow__list::-webkit-scrollbar { display: none; }
  .nicherow__list li { scroll-snap-align: start; }
  .cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1020px) {
  .home-hero__grid, .story { grid-template-columns: 1fr; }
  .stage { aspect-ratio: 16 / 10; }
  .duo, .choose { grid-template-columns: 1fr; }
  .ind { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(140px, 26vw, 220px); }
  .ind__item--big { grid-row: span 1; }
  .ind__item--wide { grid-column: span 1; }
  .story__media { max-width: 640px; }
}
@media (max-width: 640px) {
  .cards--4 { grid-template-columns: 1fr; }
  .stage__label { left: 12px; bottom: 12px; font-size: .9rem; }
  .ind { grid-auto-rows: 130px; gap: 10px; }
  .ind__label .icon { width: 26px; height: 26px; padding: 5px; }
  .ind__label h3 { font-size: 1rem; }
  .story__media::before { inset: 14px 14px -10px -8px; }
  .choose__card .btn { width: 100%; }
}

/* ---------- CTA ---------- */
.cta__box {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px 48px;
  padding: clamp(32px, 5vw, 64px);
  background: var(--green-100);
  border-radius: var(--radius-lg);
}
.cta__box h2 { margin-bottom: .3em; }
.cta__box p { margin: 0; color: var(--muted); font-size: 1.1rem; max-width: 30em; }
.cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Footer ---------- */
.footer { background: var(--green-900); color: rgba(255, 255, 255, .8); padding-top: clamp(48px, 6vw, 80px); font-size: .95rem; }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 48px; }
.footer__brand img { width: 112px; margin-bottom: 20px; }
.footer address { font-style: normal; line-height: 1.7; }
.footer h3 { font: 600 .82rem/1.2 var(--font-body); letter-spacing: .09em; text-transform: uppercase; color: var(--green-300); margin-bottom: 1.1rem; }
.footer li { margin-bottom: .6rem; }
.footer a { text-decoration: none; }
.footer a:hover { color: var(--white); text-decoration: underline; }
.footer__bottom { display: flex; justify-content: space-between; gap: 16px; padding-block: 22px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: .88rem; }
.footer__social a { display: inline-flex; align-items: center; gap: 10px; }
.footer__social .icon { width: 18px; height: 18px; color: var(--green-300); }
.footer__legal { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.footer__top { white-space: nowrap; }
/* Tablet: the brand on a row of its own, the three link columns side by side below it */
@media (min-width: 641px) and (max-width: 1020px) {
  .footer .footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; }
  .footer .footer__brand { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 48px; }
  .footer .footer__brand img { margin-bottom: 0; }
}
/* Mobile: the address under the logo, the links in two columns (follow below solutions),
   bigger tap targets and a tidy bottom line */
@media (max-width: 640px) {
  .footer { padding-top: 44px; }
  .footer .footer__grid { grid-template-columns: 1fr 1fr; grid-template-areas: "brand brand" "solutions company" "follow company"; gap: 28px 20px; padding-bottom: 32px; }
  .footer .footer__brand { grid-area: brand; padding-bottom: 28px; border-bottom: 1px solid rgba(255, 255, 255, .14); }
  .footer .footer__brand img { width: 100px; margin-bottom: 16px; }
  .footer address { line-height: 1.6; font-size: .92rem; }
  .footer__col--solutions { grid-area: solutions; }
  .footer__col--company { grid-area: company; }
  .footer__col--follow { grid-area: follow; }
  .footer h3 { margin-bottom: .6rem; }
  .footer li { margin: 0; }
  .footer__col a { display: inline-block; padding: 7px 0; }
  .footer__social a { display: inline-flex; }
  .footer__bottom { flex-direction: column-reverse; align-items: flex-start; gap: 14px; padding-block: 20px 28px; font-size: .84rem; }
  .footer__top { padding: 8px 14px; border: 1px solid rgba(255, 255, 255, .22); border-radius: var(--radius-pill); }
  .footer__top:hover { text-decoration: none; border-color: var(--white); }
}

/* ---------- Responsive ---------- */
@media (max-width: 1020px) {
  .header__inner { gap: 16px; min-height: 68px; }
  .header__actions { margin-left: auto; }
  .burger { display: block; }
  .nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; gap: 0;
    padding: 8px var(--gutter) 20px;
    background: var(--sand-50);
    border-bottom: 1px solid var(--sand-200);
    box-shadow: 0 24px 32px rgba(27, 67, 63, .1);
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 16px 4px; border-radius: 0; border-bottom: 1px solid var(--sand-200); font-size: 1.1rem; color: var(--ink); }
  .nav a:hover { background: transparent; color: var(--green-700); }
  .nav a.is-active { color: var(--green-900); }
  .nav a.is-active::after { left: 4px; right: auto; width: 28px; bottom: 10px; background: var(--green-500); }
  .nav__mobile-only { display: block; }
  .hero__grid, .about__grid, .panel { grid-template-columns: 1fr; }
  .process-hero__grid, .proof__grid { grid-template-columns: 1fr; }
  .keyfacts { grid-template-columns: 1fr 1fr; }
  .policy__grid { grid-template-columns: 1fr; }
  .policy__toc { position: static; max-height: none; }
  .policy__toc ol { grid-template-columns: 1fr 1fr; }
  /* the chains stand upright, with the arrows pointing down */
  .flow { flex-direction: column; gap: 30px; }
  .flow li + li::before { content: "↓"; left: 0; right: 0; top: -30px; width: auto; height: 30px; line-height: 30px; transform: none; }
  .hero__media { aspect-ratio: 3 / 2; min-height: 0; order: 3; }
  .hero__content { order: 1; }
  .niches { order: 2; }
  /* the niche from the large image is the first square here, so the large image goes away */
  .hero--video .hero__media { display: none; }
  .tiles__grid { grid-template-columns: 1fr; }
  .tile { min-height: 0; }
  .tile__tag { margin-bottom: 1.5rem; }
  .figures__grid { grid-template-columns: 1fr 1fr; }
  .figure { border-left: 0; padding-inline: 0 16px; }
  .figure:nth-child(n+3) { border-top: 1px solid var(--sand-200); }
  .shortcuts__grid, .sites__grid, .cards, .team, .howto { grid-template-columns: 1fr 1fr; }
  .split, .steps { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .header__cta { display: none; }
  .header__actions { gap: 6px; }
  .header .lang { margin-right: 4px; }
  .header__login { padding-inline: .9em; }
  .shortcuts__grid, .sites__grid, .panel__list, .cards, .team { grid-template-columns: 1fr; }
  .deflist > div, .timeline li { grid-template-columns: 1fr; gap: 6px; }
  .values li { grid-template-columns: 1fr; gap: 2px; }
  .brands { display: grid; grid-template-columns: repeat(3, auto); gap: 22px 16px; padding: 22px 20px; }
  .brands img { height: 37px; }
  .cta__actions, .cta__actions .btn { width: 100%; }
  .footer__brand { grid-column: 1 / -1; }
  .checks, .questions, .proof__list, .howto, .keyfacts, .contacts, .policy__toc ol { grid-template-columns: 1fr; }
  .ptable thead { display: none; }
  .ptable tr, .ptable tbody th, .ptable td { display: block; width: auto; }
  .ptable td { border-top: 0; padding-top: 0; }
  .ptable td::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--green-700); }
  .pstep { grid-template-columns: 40px minmax(0, 1fr); }
  .pstep__num { width: 40px; height: 40px; font-size: 1.05rem; }
  .pstep:not(:last-child)::before { left: 19px; top: 40px; }
}
/* ---------- Contact (src/pages/contact.html) ---------- */
.people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: clamp(32px, 4vw, 56px); }
.person { display: flex; gap: 20px; align-items: flex-start; padding: clamp(22px, 3vw, 36px); background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.person__avatar { flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--green-100); color: var(--green-900); font: 600 1.3rem/1 var(--font-head); }
.person__body { min-width: 0; }
.person__role { margin: 0 0 .3em; color: var(--green-700); font-size: .82rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }
.person h2 { font-size: calc(clamp(1.4rem, 2.2vw, 1.8rem) * var(--head-scale, 1)); margin-bottom: .4em; }
.person p:not(.person__role) { color: var(--muted); }
.person .btn { white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .people { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .person { flex-direction: column; }
}

/* ---------- Advertiser signup (src/pages/signup.html) ---------- */
.signup__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.signup__intro { position: sticky; top: 120px; }
.signup__points { display: grid; gap: 12px; margin-top: 28px; }
.signup__points li { display: flex; align-items: center; gap: 12px; font-weight: 500; }
.signup__card { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: clamp(22px, 3.4vw, 44px); }

.sform__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0 0 28px; padding: 0; list-style: none; counter-reset: none; }
.sform__steps li { display: flex; align-items: center; gap: 10px; padding-top: 12px; border-top: 3px solid var(--sand-200); color: var(--muted); font-size: .9rem; font-weight: 500; line-height: 1.25; }
.sform__steps .sform__num { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--sand-100); font: 600 .9rem/1 var(--font-head); }
.sform__steps li.is-current { border-color: var(--green-900); color: var(--ink); }
.sform__steps li.is-current .sform__num { background: var(--green-900); color: var(--white); }
.sform__steps li.is-done { border-color: var(--green-500); }
.sform__steps li.is-done .sform__num { background: var(--green-500); color: var(--white); }

.sform__step { border: 0; margin: 0; padding: 0; min-width: 0; }
.sform__step legend { padding: 0; margin-bottom: 4px; font: 600 calc(clamp(1.4rem, 2.2vw, 1.8rem) * var(--head-scale, 1))/1.15 var(--font-head); }
.sform__hint { color: var(--muted); margin: 0 0 4px; }
.sform__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; margin-top: 20px; }
.sform [hidden] { display: none !important; }
/* a label that wraps onto two lines keeps its box level with the one beside it */
.field { display: grid; gap: 6px; align-content: space-between; }
.field--wide { grid-column: 1 / -1; }
.field > span { font-size: .92rem; font-weight: 600; line-height: 1.3; }
.field > span::after { content: " *"; color: var(--green-700); }
.field input, .field select, .field textarea {
  width: 100%; min-width: 0;
  padding: 12px 14px;
  border: 1.5px solid var(--sand-300); border-radius: var(--radius-sm);
  background: var(--sand-50); color: var(--ink);
  font: 400 1rem/1.4 var(--font-body);
  transition: border-color .2s, background-color .2s;
}
.field textarea { resize: vertical; min-height: 64px; }
.field select { appearance: none; padding-right: 40px; background: var(--sand-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b433f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 14px center / 18px no-repeat; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--green-700); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--green-900); background-color: var(--white); box-shadow: 0 0 0 3px var(--green-100); }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: #c2452d; background-color: #fdf3f0; }

/* groups of boxes of which one or more can be ticked (step four) */
.choices { border: 0; margin: 0; padding: 0; min-width: 0; }
.choices legend { padding: 0; font-size: .92rem; font-weight: 600; line-height: 1.3; }
.choices legend::after { content: " *"; color: var(--green-700); }
.choices__hint { margin: 2px 0 10px; color: var(--muted); font-size: .88rem; }
.choices__list { display: flex; flex-wrap: wrap; gap: 8px; }
.choices__list--grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.choice { position: relative; display: flex; cursor: pointer; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice span {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 14px; border: 1.5px solid var(--sand-300); border-radius: var(--radius-sm);
  background: var(--sand-50); font-size: .95rem; font-weight: 500; line-height: 1.25;
  transition: border-color .2s, background-color .2s;
}
.choice span::before {
  content: ""; flex: none; width: 18px; height: 18px; border-radius: 5px;
  border: 1.5px solid var(--sand-300); background: var(--white) center / 12px no-repeat;
}
.choice:hover span { border-color: var(--green-700); }
.choice input:checked + span { border-color: var(--green-900); background: var(--green-100); }
.choice input:checked + span::before { border-color: var(--green-900); background-color: var(--green-900); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.500 4.500 4.500L19 7.500'/%3E%3C/svg%3E"); }
.choice input:focus-visible + span { outline: 3px solid var(--green-500); outline-offset: 2px; }
.choices.is-invalid .choice span { border-color: #c2452d; }
.sform__group { padding-top: 20px; border-top: 1px solid var(--sand-200); }
.sform__group > .sform__grid { margin-top: 12px; }
.sform__group-title { margin: 0; font: 600 1.1rem/1.3 var(--font-head); }
.sform__terms { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--sand-50); font-weight: 500; line-height: 1.4; cursor: pointer; }
.sform__terms input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--green-900); }
.sform__terms a { color: var(--green-700); }
.sform__terms.is-invalid { box-shadow: inset 0 0 0 1.5px #c2452d; background: #fdf3f0; }

.sform__notice { margin: 0 0 20px; padding: 12px 16px; border-radius: var(--radius-sm); background: var(--green-100); color: var(--green-900); font-weight: 500; }
.sform__error { margin: 20px 0 0; padding: 12px 16px; border-radius: var(--radius-sm); background: #fdf3f0; color: #9d3420; font-weight: 500; }
.sform__actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 28px; }
.sform__actions [data-back] { margin-right: auto; }
.sform__actions .btn:disabled { opacity: .65; cursor: progress; }
.sform__done { text-align: center; padding: 24px 0 8px; outline: none; }
.sform__done .check { width: 56px; height: 56px; margin: 0 auto 20px; background-size: 30px; }
.sform__done p { color: var(--muted); max-width: 30em; margin-inline: auto; margin-bottom: 24px; }

@media (max-width: 1020px) {
  .signup__grid { grid-template-columns: 1fr; }
  .signup__intro { position: static; }
}
@media (max-width: 640px) {
  .sform__grid { grid-template-columns: 1fr; }
  .sform__steps .sform__name { display: none; }
  .sform__steps li.is-current .sform__name { display: inline; }
  .sform__steps { grid-template-columns: auto auto auto auto; justify-content: start; gap: 6px; }
  .sform__steps li { padding-right: 6px; }
  .sform__actions .btn--lg { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}