/* Mobile — Figma v4 390px frames (Home 2093:1835, For CROs 2108:2647,
   For Heads of Sales 2108:2833, blog 2109:3591, blog post 2109:3342,
   events 2109:3428, claysino 2109:3655, menu 2109:4495).

   The desktop build is a 1440 frame scaled to the viewport. Mobile is the same
   trick with a 390 frame: --page-width switches, the script reads it back from
   CSS, and the rules below restack each section into the single column the
   mobile frames draw. Sections keep their markup; only their layout changes.

   Loaded last on every page so these overrides win without !important. */

/* ---- Chrome that only exists on one side of the breakpoint ---- */

/* The home shows the wordmark large inside its hero; every other page carries
   it in the nav. On mobile there is no large wordmark anywhere, so the home's
   nav copy comes back. */
.h3__hero .nav__logo { display: none; }
.nav__burger { display: none; }
.mnav { display: none; }

@media (max-width: 1023px) {

:root {
  --page-width: 390px;
  --gutter: 24px;
}

/* ---- Navigation (26:290) — 390 x 88, 24px gutter ---- */
.h3__nav {
  height: 60px;
  padding: 0 24px;
  justify-content: space-between;
  gap: 8px;
}

/* The links, the language row and the CTA are three separate children of
   .nav__links on desktop; display:contents lifts them into the nav's own flex
   row so the language pill can sit next to the burger. */
.h3__nav .nav__links { display: contents; }
.h3__nav .nav__link,
.h3__nav .nav__actions { display: none; }

.h3__hero .nav__logo,
.h3__nav .nav__logo { display: block; }

/* Figma crops the wordmark to its monogram here (image 3, 53 x 41). Same crop,
   same asset, rather than a second logo file: brand-logo.png is 1008 x 240 and
   its monogram occupies x 9..272, y 9..222, so scaling by 41/214 puts the
   monogram at 50.6 x 41 inside the 53 x 41 box. */
.nav__logo,
.mnav__logo {
  position: relative;
  width: 53px;
  height: 41px;
  overflow: hidden;
  flex: none;
}

.nav__logo img,
.mnav__logo img {
  position: absolute;
  left: -0.5px;
  top: -1.7px;
  width: 193.1px;
  height: 46px;
  max-width: none;
}

/* Figma draws a single "ES v" dropdown. Three tap targets in the same pill do
   the same job without a menu to open. */
.h3__nav .lang {
  position: static;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border: 1px solid var(--muted);
  border-radius: 999px;
}

.h3__nav .lang a {
  font-family: var(--font-inter);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--muted);
  text-decoration: none;
}

.h3__nav .lang a[aria-current] { color: var(--obsidian); font-weight: 700; }

/* Menu Icon (26:294) — three 20 x 2 bars at 6 / 11 / 16 */
.nav__burger {
  display: block;
  position: relative;
  flex: none;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.nav__burger i { position: absolute; left: 2px; width: 20px; height: 2px; background: var(--obsidian); }
.nav__burger i:nth-child(1) { top: 6px; }
.nav__burger i:nth-child(2) { top: 11px; }
.nav__burger i:nth-child(3) { top: 16px; }

/* ---- Menu overlay (2109:4495) ----
   Lives outside .fit: a transformed ancestor would make position:fixed resolve
   against .page instead of the viewport, and the overlay would scroll away. It
   is therefore drawn at 1:1 device pixels, not at the page scale. */
.mnav {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: flex;
  flex-direction: column;
  background: var(--off-white);
}

.mnav[hidden] { display: none; }

.mnav__bar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  padding: 0 24px;
  border-bottom: 2px solid var(--obsidian);
}

.mnav__close {
  width: 24px; height: 24px; padding: 0;
  border: 0; background: none; cursor: pointer;
}

.mnav__close img { width: 24px; height: 24px; }

.mnav__list {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0 31px;
  min-height: 0;
}

.mnav__list a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--obsidian);
  border-top: 0;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  color: var(--obsidian);
  text-decoration: none;
}

.mnav__list a:first-child { border-top: 2px solid var(--obsidian); }
/* .mnav__list a sets the colour, so the CTA has to match that specificity */
.mnav__list a.mnav__cta { background: var(--white); color: var(--orange); }

/* ---- Footer (2109:3249) — stacked, 24px padding, 32px gap ---- */
.foot {
  height: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}

/* The mobile frame drops the promise line: at 390 it would eat half the screen
   and it already opens the closing band directly above. */
.foot__statement { display: none; }

.foot__nav {
  position: static;
  flex-wrap: wrap;
  gap: 12px 24px;
  width: 100%;
}

.foot__logo { position: static; width: 180px; height: 43px; }

.foot__legal {
  position: static;
  white-space: normal;
  line-height: 1.6;
}

/* ---- Home hero (2093:1836) — 390 x 1111 ----
   Hero 0..454 (nav 60 + grid 392), lede 454..703, proof bar 703..1111. The
   desktop section is absolutely positioned inside a fixed 1576px box; here the
   same elements stack in flow and the box grows to fit. */
.h3 { height: auto; }

.h3__hero {
  position: static;
  padding-bottom: 0;
  /* the 2px rule the desktop hero carries stays: on mobile it lands right
     under the diagram, closing the block before the lede */
}

/* The hero shows the wordmark large on desktop only; mobile has it in the nav. */
.h3__logo { display: none; }

/* Headline band (2093:1842) — two 80px rows, 2px rules, 28px type */
.h3__band {
  position: static;
  width: auto;
  height: auto;
  margin-top: 32px;
  border-top: 2px solid var(--obsidian);
}

.h3__band::before { display: none; }
.h3__hl { position: static; width: auto; height: auto; }

.h3__row {
  height: 80px;
  padding: 0 16px;
  gap: 12px;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.15;
  border-bottom: 2px solid var(--obsidian);
}

/* The desktop rules are seven absolutely positioned hairlines drawing the
   Figma grid. The mobile frame has none of them: just the two row borders. */
.h3__band > i { display: none; }

.h3__mark { width: auto; height: 32px; }
.h3__mark::before { top: 6px; width: 100%; height: 26px; }

/* Diagram (2093:2496) — 390 x 198, the desktop tree redrawn for the column */
.h3__diagram {
  position: relative;
  top: auto;
  left: auto;
  width: 390px;
  height: 198px;
}

/* The <img> in the markup is the 1440 drawing, a different shape entirely, and
   CSS cannot swap an img's src. It is hidden and the mobile vector is painted
   behind the diagram instead. */
.h3__tree { display: none; }

.h3__diagram::before {
  content: "";
  position: absolute;
  top: 0;
  left: 5px;
  width: 380px;
  height: 198px;
  background: url(../assets/hero-tree-m.svg) no-repeat;
  background-size: 380px 198px;
  pointer-events: none;
}

/* Line 3 / Line 4 — 44.448px stubs at both edges, on the tree's baseline */
.h3__diagram > i,
.h3__diagram::after {
  position: absolute;
  top: 119px;
  width: 44.448px;
  height: 1px;
  background: var(--obsidian);
}

.h3__diagram > i { left: 0; }
.h3__diagram::after { content: ""; right: 0; }

.node {
  height: 24px;
  padding: 0 16px;
  font-size: 10px;
  line-height: 1.5;
}

.node--data    { top: 43px;  left: 22px;  width: 57px; }
.node--process { top: 24px;  left: 265px; width: 75px; }
.node--growth  { top: 135px; left: 172px; width: 69px; }
.node--q       { top: 87px;  left: 193px; width: 32px; height: 24px; }
.node--q img   { width: 10px; height: 16px; }

/* Lede (2093:1883) — 390 x 249. Same absolute idiom as the desktop band,
   re-pointed at the mobile coordinates. */
.h3__lede {
  position: relative;
  top: auto;
  left: auto;
  width: auto;
  height: 249px;
}

.h3__lede::after { display: none; }   /* no vertical divider at 390 */

.h3__lede p {
  top: 40px;
  left: 16px;
  width: 358px;
  font-size: 15px;
  line-height: 1.5;
}

.h3__lede .btn { top: 164px; left: 16px; }

/* Hidden in the mobile frame (2093:1888): the badge repeats what the Clay band
   says twenty pixels further down the page. */
.h3__badge { display: none; }

/* Proof bar (2093:1901) — four 327 x 102 cells, stacked and centred.
   Listed twice so it also outranks the home's own `.h3 .proof`, which is where
   the desktop absolute box comes from; the Clay page uses the bare class. */
.proof,
.h3 .proof {
  position: static;
  width: auto;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  box-shadow: none;
}

.proof__cell,
.proof__cell:nth-child(1),
.proof__cell:nth-child(2),
.proof__cell:nth-child(3),
.proof__cell:nth-child(4) {
  position: static;
  left: auto;
  width: 327px;
  height: 102px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0;
  border: 1px solid var(--obsidian);
  border-top: 0;
}

.proof__cell:first-child { border-top: 1px solid var(--obsidian); }
.proof__num { font-size: 28px; line-height: 1.15; }
.proof__label { font-size: 12px; line-height: 1.2; }
.proof__rule { display: none; }

/* ---- Clay band (2093:1914) — 390 x 246, lockup stacked ---- */
.clay-band { height: 246px; }

.clay-band__cred {
  flex-direction: column;
  gap: 24px;
  width: 299px;
  text-align: center;
}

.clay-band__logo { width: 150px; height: 47.5px; }

.clay-band__claim {
  white-space: normal;
  font-size: 22px;
  line-height: 1.15;
}

/* ---- Client logo strip (2093:1928) — 390 x 124 ----
   The marquee track keeps its 1515px rhythm; only the band gets shorter. */
.logo-strip { height: 124px; }
.logo-strip__set { height: 124px; }
.logo-strip__set img { top: 47px; }
.logo-strip__set img:nth-child(7) { top: 30px; }

/* ---- Role cards (2093:1937) — 390 x 824.7, cards stacked ---- */
/* padding, not a margin on the cards: a top margin on the first in-flow child
   collapses through the section and the cards land at y=0 */
.roles { height: auto; padding: 160px 0 40px; }

.roles__title {
  top: 40px;
  left: 16px;
  width: 358px;
  font-size: 28px;
  line-height: 1.15;
}

.roles__cards {
  position: relative;
  top: auto;
  left: auto;
  margin: 0 16px;
  width: 358px;
  height: auto;
}

.role-card {
  /* the desktop rule blockifies it with position:absolute; in flow an <a> is
     still inline unless it is told otherwise */
  display: block;
  position: relative;
  left: auto;
  width: auto;
  height: auto;
  padding: 24px;
}

/* The pair divider runs between the stacked cards instead of down the middle */
.role-card--a { box-shadow: inset 0 -2px 0 var(--muted); }

.role-card__lede { font-size: 18px; line-height: 1.5; }
.role-card ul { margin-top: 32px; }

/* Figma moves the arrow under the copy on mobile (Frame 16 at x24, y240) */
.role-card__go {
  position: relative;
  top: auto;
  right: auto;
  margin-top: 32px;
}

/* ---- Stack orbit (2093:1961) — 390 x 734 ---- */
/* overflow: the orbit's box carries a wide transparent margin (see below) that
   reaches past both edges; .fit already clips it, this keeps it local */
.stack { height: 734px; overflow: hidden; }

.stack__header {
  width: 390px;
  height: auto;
  box-shadow: none;   /* no second column to divide from */
}

.stack__title {
  top: 80px;
  left: 16px;
  width: 358px;
  font-size: 28px;
  line-height: 1.15;
}

.stack__sub {
  top: 160px;
  left: 16px;
  width: 358px;
  font-size: 15px;
  line-height: 1.5;
}

.stack__cta { top: 268px; left: 16px; }

/* The export is 2405 x 1085 with the diagram sitting in its right-hand third:
   at 1440 it is placed beside the intro column, so a third of the file is empty
   canvas. Sized to 346 and pinned by that empty margin the diagram lands
   centred; sizing the file itself to 346 x 241 squashed it and pushed it right.
   Ink measured at x 814..2195, y 22..1027 of the export. */
.stack__orbit {
  top: 437.5px;
  left: -181.8px;
  width: 602.2px;
  height: 271.6px;
}

/* ---- Diagnosis table (2093:2060) — 390 x 685 ----
   The structural-fix column is hidden in the mobile frame: two columns and the
   funnel are what fit. The funnel keeps its exact widths and is re-anchored to
   the 390 edge (every desktop offset minus 1050). */
.diag { height: 685px; }

.diag__title {
  top: 40px;
  left: 16px;
  width: 358px;
  font-size: 28px;
  line-height: 1.15;
}

.diag__sub {
  top: 120px;
  left: 16px;
  width: 358px;
  font-size: 15px;
  line-height: 1.5;
}

.diag__head {
  top: 223px;
  width: 390px;
  font-size: 12px;
  line-height: 1.5;
}

.diag__head span:nth-child(1) { left: 10px; }
.diag__head span:nth-child(2) { left: 119px; }
.diag__head span:nth-child(3) { display: none; }

.diag__table { top: 261px; width: 390px; height: 415px; }
.diag__table::after { top: 415px; width: 390px; }
.diag__table::before { height: 416px; }

.diag__row { width: 390px; height: 83px; }
.diag__row::before { width: 390px; }
.diag__row:nth-child(1) { top: 0; }
.diag__row:nth-child(2) { top: 83px; }
.diag__row:nth-child(3) { top: 166px; }
.diag__row:nth-child(4) { top: 249px; }
.diag__row:nth-child(5) { top: 332px; }

.diag__stage,
.diag__symptom { top: 30px; }

.diag__stage   { left: 16px; width: 90px; font-size: 16px; line-height: 1.2; }
.diag__symptom { left: 106px; font-size: 15px; line-height: 1.5; }

/* Each row's symptom runs up to that row's funnel block, which steps in as the
   funnel narrows, so the column widens row by row. */
.diag__row:nth-child(1) .diag__symptom { width: 127px; }
.diag__row:nth-child(2) .diag__symptom { width: 129px; }
.diag__row:nth-child(3) .diag__symptom { width: 199px; }
.diag__row:nth-child(4) .diag__symptom { width: 202px; }
.diag__row:nth-child(5) .diag__symptom { width: 262px; }
.diag__fix     { display: none; }

.diag__vis { height: 83px; }
.diag__vis--1 { left: 233px; }
.diag__vis--3 { left: 305px; }
.diag__vis--5 { left: 368px; }
.diag__vis--2 { left: 230.86px; height: 87px; }
.diag__vis--4 { left: 304.24px; height: 87.07px; }

/* ---- Case studies (2093:2101) — 390 x 2203 ----
   Desktop crops a two-column card; mobile runs the feature and the index one
   after the other and lets the section grow. */
.cases {
  height: auto;
  overflow: visible;
  padding-top: 270px;
}

.cases__title {
  top: 40px;
  left: 16px;
  width: 358px;
  font-size: 28px;
  line-height: 1.15;
}

.cases__intro {
  top: 122px;
  left: 16px;
  width: 358px;
  font-size: 15px;
  line-height: 1.5;
}

.cases__card {
  position: relative;
  top: auto;
  left: auto;
  width: 390px;
  height: auto;
}

.feature {
  position: relative;
  width: 390px;
  height: 808px;
}

.feature__marker { width: 346px; }
.feature__thumb { width: 346px; }
.feature__quote { top: 305.6px; left: 146px; }

.feature__headline {
  top: 383px;
  width: 346px;
  font-size: 28px;
  line-height: 1.15;
}

.feature__context {
  top: 463px;
  width: 346px;
  font-size: 15px;
  line-height: 1.5;
}

.feature__outcome { top: 695px; width: 346px; }
.feature__cta { top: 741px; }

/* Study index — filter row then one row per case, each sized by its title */
.index {
  position: relative;
  top: auto;
  left: auto;
  width: 390px;
  height: auto;
  box-shadow: none;
}

.index__filters { position: relative; top: auto; left: auto; width: 390px; height: 118px; }

.chip { top: 12px; height: 30px; font-size: 12px; line-height: 1.2; }
.chip--1 { left: 12px;  width: 46px; }
.chip--2 { left: 54px;  width: 95px; }
.chip--3 { left: 157px; width: 97px; }
.chip--4 { left: 262px; width: 101px; }

.index__search { top: 58px; left: 12px; }

/* The desktop rows are absolutely placed by an inline style="top:Npx"; in flow
   that inline value is inert, so the rows stack without touching the markup. */
.index__row {
  /* static, not relative: the rows carry an inline style="top:Npx" from the
     desktop layout, and a relative box would still shift by it. */
  position: static;
  left: auto;
  width: 390px;
  height: auto;
  padding: 10px 18px 16px;
}

.index__row .marker {
  position: relative;
  top: auto;
  left: auto;
  width: auto;
}

.index__row h3 {
  position: relative;
  top: auto;
  left: auto;
  width: 354px;
  height: auto;
  margin: 15px 0 0;
  display: block;
}

.index__row img {
  position: relative;
  top: auto;
  left: auto;
  margin-top: 15px;
}

.cases__track { display: none; }

/* ---- Recent events (2093:2228) — 390 x 1286, cards stacked ----
   The card is 354 tall in both frames, so every offset inside it still holds;
   only the column width and the card positions change. */
.events { height: 1286px; }

.events__title {
  top: 80px;
  left: 16px;
  width: 358px;
  font-size: 28px;
  line-height: 1.15;
}

.event { left: 16px; width: 358px; box-shadow: none; }
.event--1 { top: 144px; }
.event--2 { top: 498px; }
.event--3 { top: 852px; }
.event h3 { width: 326px; }

/* ---- Partner certifications (2093:2260) — 390 x 722, one badge per row ---- */
.certs { height: 722px; }

.certs__head { width: 390px; height: 140px; }
.certs__head h2 { left: 16px; width: 358px; }

.certs__row { top: 140px; width: 390px; height: 582px; }

.certs__cell:not(:last-child) { box-shadow: inset 0 -1px 0 var(--muted); }

.certs__cell:nth-child(1),
.certs__cell:nth-child(2),
.certs__cell:nth-child(3),
.certs__cell:nth-child(4),
.certs__cell:nth-child(5) { left: 2px; width: 386px; height: 115.8px; }

.certs__cell:nth-child(1) { top: 2px; }
.certs__cell:nth-child(2) { top: 117.8px; }
.certs__cell:nth-child(3) { top: 233.6px; }
.certs__cell:nth-child(4) { top: 349.4px; }
.certs__cell:nth-child(5) { top: 465.2px; height: 114.8px; }

/* ---- Our team (2093:2274) — 390 x 523 ---- */
.team { height: 523px; }
.team::before { top: 298px; }

.team__title {
  top: 88px;
  left: 16px;
  width: 129px;
  font-size: 28px;
  line-height: 1.15;
}

.team__nav { top: 80px; }
.team__nav--prev { left: 262px; }
.team__nav--next { left: 326px; }

.team__track { top: 184px; width: 1113px; height: 259px; }

.team__card { width: 192px; height: 259px; }
.team__card:nth-of-type(1) { left: 16px; }
.team__card:nth-of-type(2) { left: 238px; }
.team__card:nth-of-type(3) { left: 460px; }
.team__card:nth-of-type(4) { left: 699px; }
.team__card:nth-of-type(5) { left: 921px; }

.team__card img { width: 160px; height: 160px; }

.team__card h3,
.team__card p { width: 192px; }

.team__card h3 { top: 192px; }
.team__card p  { top: 225px; font-size: 15px; line-height: 1.2; }

/* ---- Modules intro (2093:2311) — 390 x 448 ----
   The two right-aligned notes come down under the intro and align left. */
.modules-intro { height: 448px; }

.modules-intro h2 {
  top: 40px;
  left: 16px;
  width: 358px;
  font-size: 28px;
  line-height: 1.15;
}

.modules-intro__sub {
  top: 156px;
  left: 16px;
  width: 358px;
  font-size: 15px;
  line-height: 1.5;
}

.modules-intro__more,
.modules-intro__ask {
  left: 16px;
  right: auto;
  width: 358px;
  text-align: left;
}

.modules-intro__more { top: 237px; }
.modules-intro__ask  { top: 299px; }
/* pinned to the right gutter rather than the frame's 209px: the Spanish and
   Catalan labels are wider and would run off the edge */
.modules-intro__cta  { top: 361px; left: auto; right: 16px; }

/* ---- Module grid (2093:2321) — 390 x 1776, five full-width rows ----
   The connector pipe is a desktop device: it threads between three columns and
   has nothing to join in a single column, so it is dropped here. */
.mods { height: 1776px; }

.mod { left: 0; width: 390px; }
.mod--1 { top: 0;      height: 366px; box-shadow: none; }
.mod--2 { top: 366px;  height: 363px; box-shadow: none; }
.mod--3 { top: 729px;  height: 363px; box-shadow: none; }
.mod--4 { top: 1094px; height: 314px; box-shadow: inset 0 2px 0 var(--muted); }
.mod--5 { top: 1410px; height: 366px; box-shadow: inset 0 2px 0 var(--muted); }

.mod--1 .mod__n { top: 158px; }
.mod--2 .mod__n { top: 156.5px; }
.mod--3 .mod__n { top: 156.5px; }
.mod--4 .mod__n { top: 132px; }
.mod--5 .mod__n { top: 158px; }

.mod p { font-size: 15px; line-height: 1.5; }

.mod--1 h3 { top: 82.5px; width: 206px; }
.mod--2 h3 { top: 81px;   width: 206px; }
.mod--3 h3 { top: 81px;   width: 233px; }
.mod--4 h3 { top: 70px;   width: 206px; }
.mod--5 h3 { top: 69px;   width: 226px; }

.mod--1 p { top: 148.5px; width: 206px; }
.mod--2 p { top: 147px;   width: 206px; }
.mod--3 p { top: 147px;   width: 233px; }
.mod--4 p { top: 136px;   width: 206px; }
.mod--5 p { top: 135px;   width: 226px; }

/* The desktop pipe threads between three columns and has nothing to join in a
   single one, so its pieces are dropped and the mobile frame's own connector is
   drawn instead: one rule down the edge of each of the first three rows, with a
   semicircular notch bitten out of it, then a bump on the two separators
   below. Geometry from Figma 2093:2321. */
.pipe, .arc { display: none; }

.mod--1::before,
.mod--2::before,
.mod--3::before {
  content: "";
  position: absolute;
  top: 0;
  width: 2px;
  height: 100%;
  background: var(--muted);
}

.mod--1::before,
.mod--3::before { right: 0; }
.mod--2::before { left: 0; }

/* The notch: a half disc filled with the page ground, so it masks the rule it
   interrupts, with the border drawn on its curved side only. */
.mod--1::after,
.mod--2::after,
.mod--3::after {
  content: "";
  position: absolute;
  width: 37px;
  height: 70px;
  background: var(--off-white);
  border: 2px solid var(--muted);
}

.mod--1::after,
.mod--3::after {
  right: 0;
  border-right: 0;
  border-radius: 35px 0 0 35px;
}

.mod--2::after {
  left: 0;
  border-left: 0;
  border-radius: 0 35px 35px 0;
}

.mod--1::after { top: 261px; }
.mod--2::after { top: 33px; }
.mod--3::after { top: 185px; }

/* The bump on the separator above rows 4 and 5, 2px taller than the arc so its
   fill covers the rule underneath it. */
.mod--4::after,
.mod--5::after {
  content: "";
  position: absolute;
  top: -38px;
  width: 74px;
  height: 40px;
  background: var(--off-white);
  border: 2px solid var(--muted);
  border-bottom: 0;
  border-radius: 37px 37px 0 0;
}

.mod--4::after { left: 58px; }
.mod--5::after { left: 258px; }

/* ---- Founder (2093:2365) — 390 x 979, portrait above the copy ---- */
.founder { height: 979px; }

.founder__card {
  top: 49px;
  left: 16px;
  width: 358px;
  height: 881px;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

.founder__card h2 {
  top: 167px;
  left: 0;
  width: 238px;
  font-size: 28px;
  line-height: 1.15;
}

.founder__lede {
  top: 283px;
  left: 0;
  width: 358px;
  font-size: 20px;
  line-height: 1.5;
}

.founder__body {
  top: 359px;
  left: 0;
  width: 358px;
  font-size: 15px;
  line-height: 1.5;
}

.founder__cta { top: 834px; left: 0; }

.founder__photo { top: 49px; left: 16px; width: 151px; height: 151px; }

/* ---- FAQ (2093:2374) — 390 x 764 ----
   Same rows, narrower list: the question wraps to two lines, so the row height
   comes from its content with the closed 65px row as the floor. */
.faq {
  min-height: 764px;
  padding: 80px 16px;
  gap: 48px;
}

.faq h2 { width: 358px; font-size: 28px; line-height: 1.15; }
.faq__list { width: 358px; }

.faq__item summary { height: auto; min-height: 65px; padding: 16px; gap: 16px; }
.faq__answer { padding: 0 16px 16px; }
.faq__answer p { font-size: 15px; line-height: 1.5; }

/* ---- Closing band (2093:2381) — 390 x 318, CTA under the line ---- */
.closing { height: 318px; }

.closing p {
  top: 64px;
  left: 24px;
  width: 342px;
  font-size: 24px;
  line-height: 1.2;
}

.closing .btn { top: 209px; left: 24px; }

/* ======== For CROs (2108:2647) — 390 x 5842 ======== */

/* Both pages float the nav over a coloured hero at a fixed 1440 */
.cro-page .blog-nav-holder,
.hos-page .blog-nav-holder { width: 390px; }

/* Both mobile frames put the booking band before the FAQ, the reverse of the
   desktop order. A flex column reorders them without touching the markup. */
.page.cro-page,
.page.hos-page { display: flex; flex-direction: column; }

.cro-booking,
.hos-booking { order: 1; }

.cro-faq { order: 2; }

.cro-page .foot,
.hos-page .foot { order: 3; }

/* ---- Hero (2108:2649) — 390 x 844, copy left aligned ---- */
.cro-hero { height: 844px; }

.cro-hero__content {
  top: 83px;
  left: 0;
  width: 390px;
  align-items: flex-start;
  gap: 0;
  padding: 0;
}

.cro-hero__eyebrow { position: absolute; top: 120px; left: 16px; }

.cro-hero h1 {
  position: absolute;
  top: 170px;
  left: 16px;
  width: 358px;
  font-size: 28px;
  line-height: 1.15;
  text-align: left;
}

.cro-hero__sub {
  position: absolute;
  top: 298px;
  left: 16px;
  width: 358px;
  font-size: 18px;
  text-align: left;
}

.cro-hero .btn { position: absolute; top: 384px; left: 16px; }

/* The line art is redrawn for the column (2108:3196), so the desktop export is
   hidden and the mobile one is painted behind the section instead of swapping
   an <img> src, which CSS cannot do. */
.cro-hero__lines { visibility: hidden; }

.cro-hero::after {
  content: "";
  position: absolute;
  top: 471px;
  left: -29px;
  width: 450px;
  height: 373px;
  background: url(../assets/cro/hero-lines-m.svg) no-repeat;
  pointer-events: none;
}

.cro-hero__fade { top: 694px; width: 390px; height: 150px; }

.cro-pill {
  height: 39px;
  font-size: 10px;
  line-height: 1.5;
  z-index: 1;
}

.cro-pill--tools { top: 617px; left: -12px; }
.cro-pill--work  { top: 565px; left: 298px; }

/* ---- Problem cards (2108:2669) — 390 x 1048, one column ---- */
.cro-problems { height: 1048px; padding: 0 16px; }

.cro-problems h2 {
  top: 40px;
  left: 16px;
  font-size: 28px;
  line-height: 1.15;
}

.cro-problems__grid {
  top: 128px;
  left: 16px;
  grid-template-columns: 358px;
  width: 358px;
  height: auto;
}

/* ---- Key points (2108:2684) — 390 x 1274, intro over the nodes ---- */
.cro-changes {
  height: 1274px;
  padding: 80px 16px;
  flex-direction: column;
  gap: 60px;
}

.cro-changes__intro { width: 358px; gap: 16px; }

.cro-changes__intro h2 {
  font-size: 28px;
  line-height: 1.15;
  white-space: normal;
}

.cro-changes__intro p { font-size: 15px; }

.cro-nodes { flex: none; width: 358px; }

.cro-node { height: auto; min-height: 199px; }
.cro-node:last-child { box-shadow: inset 0 -2px 0 var(--obsidian); }

.cro-node__body h3 { font-size: 16px; line-height: 1.2; }
.cro-node__body p { font-size: 15px; }

/* ---- Testimonial (2108:2719) — 390 x 496 ---- */
.cro-quote { height: 496px; padding: 80px 16px; }

.cro-quote blockquote {
  width: 358px;
  font-size: 24px;
  line-height: 1.2;
}

/* ---- Stack (2109:3226) — 390 x 734, same frame as the home's ---- */
.cro-stack {
  height: 734px;
  display: block;
  overflow: hidden;
}

.cro-stack__intro {
  width: 390px;
  padding: 80px 16px 0;
  gap: 16px;
  box-shadow: none;
}

.cro-stack__intro h2 { font-size: 28px; line-height: 1.15; }
.cro-stack__intro p { font-size: 15px; }

/* same export, same correction as the home's */
.cro-stack__orbit {
  top: 437.5px;
  left: -181.8px;
  width: 602.2px;
  height: 271.6px;
}

/* ---- FAQ (2109:3241) — 390 x 641 ---- */
.cro-faq {
  min-height: 641px;
  padding: 80px 16px;
  gap: 48px;
}

.cro-faq h2 { font-size: 28px; line-height: 1.15; }
.cro-faq__item summary { padding: 16px; gap: 16px; }
.cro-faq__answer { padding: 0 16px 16px; }

/* ---- Booking (2108:2824) — 390 x 638, photo below the copy ---- */
.cro-booking {
  height: 638px;
  display: block;
}

.cro-booking__copy {
  width: 390px;
  height: 239px;
  padding: 40px 24px 0;
  gap: 16px;
}

.cro-booking__copy h2 { font-size: 24px; line-height: 1.2; }
.cro-booking__copy p { width: auto; font-size: 18px; }

.cro-booking img {
  width: 390px;
  height: 399px;
  object-fit: cover;
}

/* ======== For Heads of Sales (2108:2833) — 390 x 6436 ======== */

/* ---- Hero (2109:3304) — 390 x 844, sky blue ---- */
.hos-hero { height: 844px; }

.hos-hero__content {
  top: 83px;
  left: 0;
  width: 390px;
  padding: 0;
  gap: 0;
}

.hos-hero__eyebrow { position: absolute; top: 120px; left: 16px; }

.hos-hero h1 {
  position: absolute;
  top: 154px;
  left: 16px;
  width: 358px;
  font-size: 28px;
  line-height: 1.15;
}

/* At 1440 the three lines are set nowrap and allowed to overflow; at 390 they
   wrap. The mobile frame breaks the second line after "systems", which is what
   its 308px text box does, so that line keeps a narrower measure than the
   other two. */
.hos-hero h1 span { white-space: normal; }
.hos-hero h1 span:nth-child(2) { width: 270px; }

.hos-hero h1 span.hos-hero__marker { height: 29px; }
.hos-hero__marker::before { height: 29px; }

.hos-hero__sub {
  position: absolute;
  top: 298px;
  left: 16px;
  width: 358px;
}

.hos-hero .btn { position: absolute; top: 368px; left: 16px; }

/* Same artwork as the desktop export, at the same 2.86 aspect ratio the mobile
   frame gives it (952 x 333 against 1440 x 504), so one file serves both. */
.hos-hero__lines {
  top: 462px;
  left: -399px;
  width: 952px;
  height: 333px;
}

.hos-node { font-size: 10px; }
.hos-node--start { top: 688px; left: 37px; }
.hos-node--q { top: 696px; left: 319px; width: 33px; height: 33px; padding: 0; font-size: 12px; }

/* ---- Pain cards (2108:2863) — 390 x 1181, one column ---- */
.hos-pain { height: 1181px; padding: 80px 16px; gap: 56px; }

.hos-pain__grid {
  grid-template-columns: 358px;
  width: 358px;
  height: auto;
}

/* ---- System diagram (2108:2879) — 390 x 1588 ----
   The hub keeps its card; the two flow pills drop below it and the four
   deliverables stack full width. */
.hos-system {
  height: 1588px;
  padding: 0;
  display: block;
}

.hos-system__head {
  position: absolute;
  top: 80px;
  left: 0;
  width: 390px;
}

.hos-system__body {
  position: absolute;
  top: 188px;
  left: 0;
  width: 390px;
  height: 1400px;
}

.hos-flow { position: static; display: block; }

.hos-hub {
  position: absolute;
  top: 1px;
  left: 32px;
  width: 327px;
  padding: 24px 0;
}

/* The mobile frame rewraps the six tool tiles into two rows of three. That is
   a different raster, and the export is a single strip, so it is scaled to the
   mobile hub width instead: same six logos, same order, one row. */
.hos-hub__rule { width: 279px; }
.hos-hub__tools { width: 279px; height: 41.6px; }

.hos-flow__pill {
  position: absolute;
  top: 280px;
  width: auto;
  padding: 12px;
  font-size: 12px;
}

.hos-flow__pill:first-child { left: 25px; width: 131px; }
.hos-flow__pill:last-child  { left: 286px; width: 68px; }

/* Vector 23 / 24: the hub's two connectors. Drawn as rounded elbows rather
   than exported curves — at 49 x 186 the difference is not visible. */
.hos-flow__wire {
  position: absolute;
  top: 112.5px;
  width: 49px;
  height: 186px;
  background: none;
  border: 0;
  border-top: 1px solid var(--obsidian);
}

/* nth-of-type counts spans, and the first span in the row is a pill, so the
   two wires are spans 2 and 3. */
.hos-flow__wire:nth-of-type(2) {
  left: 66px;
  border-left: 1px solid var(--obsidian);
  border-top-left-radius: 48px;
}

.hos-flow__wire:nth-of-type(3) {
  left: 326px;
  border-right: 1px solid var(--obsidian);
  border-top-right-radius: 48px;
}

.hos-system__drop { top: 242px; left: 195px; width: 1px; height: 145px; }
.hos-system__chip { top: 574px; }

.hos-deliverables {
  top: 400px;
  height: 1000px;
  flex-direction: column;
}

.hos-deliverable {
  flex: none;
  height: 250px;
  box-shadow: inset 0 -2px 0 var(--obsidian);
}

.hos-deliverable:last-child { box-shadow: none; }

/* ---- Testimonial (2108:2922) — 390 x 529 ---- */
.cro-quote.hos-quote { height: 529px; }

/* ---- FAQ (2109:3234) — 390 x 793 ---- */
.hos-page .cro-faq { min-height: 793px; }

/* ---- Booking (2108:3027) — 390 x 600 ---- */
.hos-booking { height: 600px; padding: 80px 16px; }

/* ======== Blog index (2109:3591) — 390 x 3792 ======== */

.bi-hero {
  height: 294px;
  display: block;
  padding: 40px 16px 0;
}

.bi-hero__intro { gap: 16px; }
.bi-hero h1 { font-size: 28px; line-height: 1.15; }
.bi-hero__sub { width: 358px; font-size: 15px; }

/* The line art is a desktop device: at 390 the mobile frame drops it and gives
   the whole width to the intro. */
.bi-hero__art { display: none; }

.bi-featured { padding: 0; }

.bi-card {
  flex-direction: column;
  height: 707px;
  box-shadow: inset 0 -2px 0 var(--obsidian);
}

.bi-card__art { flex: none; width: 390px; height: 355px; }
.bi-card__rule { display: none; }
.bi-card__body { width: 390px; height: 352px; padding: 24px; }
.bi-card__body h2 { font-size: 24px; line-height: 1.2; }
.bi-card__body p { font-size: 15px; }

.bi-grid { grid-template-columns: 1fr; padding: 0; }

/* ======== Blog post (2109:3342) — 390 x 4817 ======== */

.bp-hero { height: 480px; }
.bp-crumbs { padding: 24px 16px; }

.bp-head { padding: 40px 16px; gap: 16px; }
.bp-head h1 { font-size: 28px; line-height: 1.15; }
.bp-head__sub { width: 358px; }

/* The share row no longer fits beside the byline at 390 */
.bp-head__meta { flex-wrap: wrap; gap: 16px; }

.bp-lede { padding: 100px 16px 20px; }
.bp-lede p:first-child { font-size: 36px; line-height: 1.2; }

.bp-body { padding: 20px 16px 40px; }
.bp-body blockquote { font-size: 24px; line-height: 1.2; padding-left: 24px; }
.bp-body h2, .bp-body h3 { font-size: 28px; line-height: 1.15; }

.bp-body .article-step { gap: 12px; }
.bp-body .article-step > b { flex: 0 0 40px; font-size: 32px; }

.bp-related__head { padding: 40px 16px; }
.bp-related__head h2 { width: 358px; }
.bp-related__row { flex-direction: column; padding: 0; }
/* flex:1 0 0 sizes the cards along the main axis; once that axis is vertical
   it collapses them to nothing. */
.bp-related__row .blog-post { flex: none; }

/* ======== Events (2109:3428) — 390 x 6370 ======== */

.ev-hero {
  height: 263px;
  display: block;
  padding: 40px 16px 0;
}

.ev-hero__intro { gap: 24px; }
.ev-hero h1 { font-size: 28px; line-height: 1.15; }
.ev-hero__sub { width: 358px; font-size: 15px; }
.ev-filters { flex-wrap: wrap; gap: 8px; }

/* Same call as the blog index: the line art belongs to the wide frame. */
.ev-hero__lines,
.ev-hero__node { display: none; }

/* ---- Featured event (2109:3446) — 390 x 787, visual over details ---- */
.ev-featured { height: 787px; padding: 0; }

.ev-card {
  flex-direction: column;
  width: 390px;
  height: 787px;
}

.ev-card__visual { flex: none; width: 390px; height: 355px; box-shadow: none; }
.ev-card__visual img { width: 390px; height: 355px; }

.ev-card__body {
  flex: none;
  width: 390px;
  height: 432px;
  padding: 48px 16px;
  box-shadow: none;
}

.ev-card__body h2 { font-size: 24px; line-height: 1.2; }

/* ---- Past events (2109:3458) — 390 x 3312, one card per row ---- */
.ev-past { padding: 0; }
.ev-past__grid { width: 390px; }

.ev-post:nth-child(1),
.ev-post:nth-child(2),
.ev-post:nth-child(3),
.ev-post:nth-child(4),
.ev-post:nth-child(5),
.ev-post:nth-child(6) {
  width: 390px;
  box-shadow: inset 0 -2px 0 var(--obsidian);
}

.ev-post__content { padding: 32px 16px; }

.ev-pager { width: 390px; justify-content: center; padding: 20px 0; }

/* ---- Upcoming (2109:3543) — 390 x 1485, rows stacked ---- */
.ev-next__head { padding: 80px 16px 40px; }
.ev-next__head h2 { width: 358px; }

.ev-next__rows { flex-direction: column; height: auto; padding: 0; }

.ev-row {
  flex: none;
  height: auto;
  min-height: 0;
  padding: 24px 16px;
  box-shadow: inset 0 -2px 0 var(--obsidian);
}

.ev-row:first-child,
.ev-row:last-child { box-shadow: inset 0 -2px 0 var(--obsidian); }

/* flex:1 0 0 gave the stack all the leftover height of a fixed 331px row; with
   the row sized by its content that basis of 0 collapses it instead. */
.ev-row__stack { flex: none; }

/* ---- Newsletter band (2109:3582) — 390 x 268 ---- */
.ev-news {
  height: 268px;
  flex-direction: column;
  gap: 24px;
  padding: 40px 16px;
}

.ev-news__copy h2 { width: 358px; }
.ev-news__copy p { white-space: normal; }

/* ======== Claysino event post (2109:3655) — 390 x 3932 ======== */

.cs-hero { height: 600px; padding: 0 16px 40px; }
.cs-hero__stack { width: 358px; }
.cs-hero h1 { font-size: 36px; line-height: 1.1; }
.cs-hero__sub { width: 358px; font-size: 15px; }

/* ---- Core info (2109:3664) — 390 x 1082, card under the copy ---- */
.cs-core { flex-direction: column; gap: 0; padding: 0; }

.cs-core__about { flex: none; padding: 80px 16px; }
.cs-core__about h2 { font-size: 36px; line-height: 1.2; }

.cs-core__about p:nth-of-type(1),
.cs-core__about p:nth-of-type(n + 2) { font-size: 15px; }

.cs-meta { flex: none; width: 390px; box-shadow: none; }

/* ---- Gallery (2109:3952) — 390 x 960, three tiles stacked ---- */
.cs-gallery { height: auto; flex-direction: column; padding: 0; }

.cs-gallery img.cs-gallery__shot,
.cs-gallery figure,
.cs-gallery__video { flex: none; height: 320px; }

/* ---- Caption band (2109:3703) — the gallery credit line ---- */
.cs-caption { padding: 40px 16px; }

/* ---- CTA (2109:3706) — 390 x 524, form under the copy ---- */
.cs-cta {
  height: 524px;
  flex-direction: column;
  justify-content: center;
  padding: 40px 16px;
  gap: 24px;
}

.cs-cta__copy,
.cs-cta__form { flex: none; width: 358px; }

.cs-cta__form { flex-direction: column; align-items: stretch; }

/* ======== Clay ========
   The v4 file has no 390 frame for this page, so it follows the conventions the
   other mobile frames set: 16px gutters, 80px section padding, the 45/68px
   display sizes stepped down to 28/32. */

.clay-hero { padding: 80px 16px 40px; }
.clay-hero h1 { font-size: 32px; line-height: 1.05; }
.clay-hero p { margin-top: 24px; font-size: 15px; }
.clay-hero .btn { margin-top: 32px; }

.clay-hero__seal {
  position: static;
  margin-top: 40px;
  gap: 12px;
}

.clay-hero__seal img { width: 140px; height: 63px; }

.clay-section { padding: 80px 16px; }
.clay-section > h2 { font-size: 28px; line-height: 1.15; }
.clay-section > .lede { font-size: 15px; }

.clay-mods { grid-template-columns: 1fr; margin-top: 40px; }
.clay-mod { gap: 16px; padding: 24px; }
.clay-mods__note { flex-direction: column; align-items: flex-start; gap: 16px; }

.clay-community { padding: 80px 16px; }
.clay-community h2 { font-size: 28px; line-height: 1.15; }
.clay-community p { font-size: 15px; }

.clay-case { grid-template-columns: 1fr 24px; gap: 16px; padding: 28px 16px; }
.clay-case h2 { font-size: 24px; line-height: 1.2; }

.clay-certs .certs__head { height: auto; }
.clay-certs .certs__head h2 { padding: 40px 16px; }
.clay-certs__row { grid-template-columns: 1fr; }

.clay-diag { padding-bottom: 80px; }

.clay-diag .diag__title,
.clay-diag .diag__sub,
.clay-diag .diag__head { margin-left: 16px; width: 358px; }

.clay-diag .diag__title { padding-top: 80px; font-size: 28px; line-height: 1.15; }
.clay-diag .diag__sub { font-size: 15px; }
.clay-diag .diag__head { grid-template-columns: 90px 1fr; margin-top: 40px; }
.clay-diag .diag__table { width: 390px; }
.clay-diag .diag__row { height: 83px; }
.clay-diag .diag__symptom { width: 120px; }



/* ======== Chopcast case study ========
   Built on the blog-post frame, so it inherits those rules; what changes here
   are the multi-column diagrams the case adds. */

.case-crumbs { padding: 24px 16px; }

.case-proof { grid-template-columns: 1fr 1fr; }
.case-proof__cell { padding: 32px 16px; box-shadow: inset -1px 0 0 var(--muted), inset 0 -1px 0 var(--muted); }
.case-proof__cell b { font-size: 40px; }

/* The architecture diagram is a three-across flow at 1440; stacked, its fan
   connector becomes the single vertical line the stack actually needs. */
.case-arch__row { grid-template-columns: 1fr; gap: 12px; }
.case-arch__row--mid > * { grid-column: 1; }

.case-arch__fan { height: 24px; }
.case-arch__fan i { display: none; }
.case-arch__fan i:nth-child(1) { display: block; top: 0; left: 50%; height: 24px; }

.case-steps { grid-template-columns: 1fr; gap: 24px; }

/* The testimonial's still and its attribution sit side by side at 1440; the
   360px second column leaves nothing for the still at 390. */
.case-video { grid-template-columns: 1fr; }
.case-video__still img { height: 220px; }

.case-panel__row { grid-template-columns: 1fr; gap: 4px; }

.case-results { grid-template-columns: 1fr; }
.case-results div { box-shadow: inset 0 -2px 0 var(--obsidian); }

.case-cta { flex-direction: column; align-items: flex-start; gap: 24px; padding: 40px 16px; }
.case-cta img { flex: none; width: 120px; height: 120px; }

/* ======== Privacy policy and terms ========
   Both sit on the blog-post frame, so only the display size changes. */
.legal-head h1 { font-size: 28px; line-height: 1.15; }

/* The Clay page's closing band puts the CTA beside the copy at 1440 */
.closing--clay {
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding: 40px 16px;
}

.closing--clay > div { max-width: 358px; }
.closing--clay .btn { position: static; width: auto; }

}