/* Fonts: the homepage v109's own embedded subsets (Articulat CF 500, Inter Display 400/500/600), written out to files.
   seo-v2 change: font-display swap (the SEO plan's performance rule), the two main files are preloaded by each page. */
@font-face { font-family: "Articulat CF"; font-weight: 500; font-style: normal; font-display: swap; src: url(/fonts/licensed/articulat-cf-500.woff2) format("woff2"); }
@font-face { font-family: "Inter Display"; font-weight: 400; font-style: normal; font-display: swap; src: url(/fonts/inter-display-400.woff2) format("woff2"); }
@font-face { font-family: "Inter Display"; font-weight: 500; font-style: normal; font-display: swap; src: url(/fonts/inter-display-500.woff2) format("woff2"); }
@font-face { font-family: "Inter Display"; font-weight: 600; font-style: normal; font-display: swap; src: url(/fonts/inter-display-600.woff2) format("woff2"); }

/* ===================== VERBATIM: homepage-direction-v109.html, first <style> block (lines 842 to 4337) ===================== */

:root {
  /* Artemis neutrals: elevation by tone, one grey step at a time */
  --page: #141414;      /* Artemis sidebar */
  --shell: #191919;     /* Artemis bg: panels */
  --raised: #1f1f1f;    /* Artemis hover: inner cards */
  --track: #232323;
  --selected: #2a2a2a;
  --active: #3a3a3a;

  --text: #ececec;
  --text-2: #c9c9c9;
  --muted: #8f8f8f;
  --faint: #777;

  --line: #262626;
  --line-2: #2e2e2e;
  --line-4: #333;

  --accent: #ff6a1a;    /* the status dot, nothing else */
  --green: #5fd38d;     /* the two uplift numbers */

  --display: "Articulat CF", "Inter Display", Inter, system-ui, sans-serif;
  --serif: ui-serif, "New York", "Iowan Old Style", Georgia, serif;
  --sans: "Inter Display", Inter, system-ui, -apple-system, sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --fast: 180ms ease-out;

  /* 8pt scale */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 40px; --s6: 48px; --s7: 56px; --s8: 64px; --s10: 80px; --s12: 96px;
  --max: 1280px;                          /* content never gets wider than this (Polar's container) */
  --gutter: clamp(24px, 4vw, 80px);       /* 24 on phone, 40 to 80 on desktop */
  --gap: var(--s2);                       /* between panels */
  --r: 16px;                              /* panel corners */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv11", "ss01";
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
svg { display: block; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; border-radius: 6px; }

/* ---------- one centred column, capped, with even gutters */
.wrap { width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- nav */
.nav { position: relative; z-index: 5; }
.nav-in { height: 72px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.brand { display: inline-flex; align-items: center; min-height: 40px; gap: var(--s1); font-weight: 600; font-size: 18px; letter-spacing: -0.015em; justify-self: start; }
.brand svg { width: 24px; height: 24px; }
.nav-links { display: flex; gap: var(--s4); font-size: 15px; color: var(--muted); }
.nav-links a { transition: color var(--fast); }
.nav-links a:hover { color: var(--text); }
.nav-cta { justify-self: end; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s1);
  height: 40px; padding: 0 var(--s2); border-radius: 8px; border: 1px solid var(--line-4);
  background: var(--raised); color: var(--text); font-size: 15px; font-weight: 500; white-space: nowrap; cursor: pointer;
  transition: background-color var(--fast), border-color var(--fast);
}
.btn:hover { background: var(--selected); }

/* ---------- hero: a split of rounded panels */
.hero { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); gap: var(--gap); }
.panel { background: var(--shell); border: 1px solid var(--line); border-radius: var(--r); min-width: 0; }
.col { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }

.lead { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: var(--s6); padding: var(--s5); }
.status { margin: 0; display: inline-flex; align-items: center; gap: var(--s1); font-size: 14px; color: var(--text-2); }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
h1 {
  margin: var(--s4) 0 0;
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(36px, calc(2.4vw + 26px), 64px); line-height: 1.08; letter-spacing: -0.03em;
  font-kerning: normal; font-feature-settings: "kern", "liga";
  color: var(--text);
}
h1 .l { display: block; white-space: nowrap; }
h1 .l2 { color: var(--muted); }
.sub { margin: 0; max-width: 480px; font-size: 18px; line-height: 1.55; color: var(--text-2); letter-spacing: -0.005em; text-wrap: pretty; }

.cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.card { padding: var(--s3); display: flex; flex-direction: column; gap: var(--s2); }
.card-k { margin: 0; font-size: 14px; color: var(--muted); }
.stats { margin: auto 0 0; padding: 0; list-style: none; }
.stats li { padding: var(--s1) 0; border-top: 1px solid var(--line); color: var(--text-2); font-size: 16px; }
.stats li:last-child { padding-bottom: 0; }
.stats .n { color: var(--green); font-weight: 600; }
.card-ic { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line-4); background: var(--raised); display: grid; place-items: center; flex: none; }
.card-ic svg { width: 18px; height: 18px; fill: none; stroke: var(--text-2); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.card-b p { margin: auto 0 0; color: var(--text); font-size: 16px; }
.more { margin: 0 0 calc(var(--s1) * -1); align-self: flex-start; min-height: 40px; display: inline-flex; align-items: center; color: var(--text-2); font-size: 16px;
  text-decoration: underline; text-underline-offset: 4px; text-decoration-color: #555; transition: color var(--fast), text-decoration-color var(--fast); }
.more:hover { color: var(--text); text-decoration-color: var(--text); }

/* the one loud control on the page */
.cta-bar { height: 64px; padding: 0 var(--s3); border-radius: 12px; background: #ededed; color: #111; display: flex; align-items: center; justify-content: space-between;
  font-size: 18px; font-weight: 500; letter-spacing: -0.01em; transition: background-color var(--fast); }
.cta-bar:hover { background: #fff; }
.cta-bar svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); }
.cta-bar:hover svg { transform: translateX(3px); }


/* ---------- below the hero: placeholder logo strip */
.below { padding: var(--s8) 0 var(--s4); }
.logos-h { display: flex; justify-content: center; }
.tag-ph {
  display: inline-flex; align-items: center; height: 24px; padding: 0 var(--s1);
  border: 1px dashed #4a4a4a; border-radius: 6px; color: var(--muted);
  font-size: 14px; font-weight: 500; letter-spacing: .02em; white-space: nowrap; line-height: 1;
}
.logos { margin-top: var(--s3); display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s2); }
.logo { height: 64px; border-radius: 8px; display: flex; align-items: center; justify-content: center; gap: var(--s1); }
.logo i { display: block; height: 8px; border-radius: 4px; background: #3d3d3d; }
.logo svg { width: 20px; height: 20px; fill: #4a4a4a; }
.foot { padding: var(--s4) 0 var(--s6); color: var(--faint); font-size: 14px; text-align: center; }


/* ---------- entrance: a short fade, no blur */
.js .rise { opacity: 0; transform: translateY(8px); }
.js.ready .rise { opacity: 1; transform: none; transition: opacity .3s ease-out, transform .4s var(--ease); transition-delay: calc(var(--d, 0) * 1ms); }
.js .nav { opacity: 0; }
.js.ready .nav { opacity: 1; transition: opacity .3s ease-out; }

/* ---------- laptop and small desktop: same split, tighter panels */
@media (max-width: 1100px) {
  .lead { padding: var(--s4); }
  .nav-links { gap: var(--s3); }
  .logos { gap: var(--s1); }
}
/* ---------- tablet portrait: stack, the phone gets the full width panel */
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-in { grid-template-columns: 1fr auto; }
  .hero { grid-template-columns: 1fr; }
  .lead { gap: var(--s8); }
  .logos { grid-template-columns: repeat(3, 1fr); }
}
/* ---------- phone: everything stacks */
@media (max-width: 600px) {
  :root { --gap: var(--s1); --r: 14px; }
  .nav-in { height: 64px; }
  .lead { padding: var(--s3); gap: var(--s5); }
  h1 { margin-top: var(--s3); font-size: 40px; letter-spacing: -0.035em; }
  .sub { font-size: 16px; }
  .cards { grid-template-columns: 1fr; }
  .card { padding: var(--s3); }
  .cta-bar { height: 56px; font-size: 17px; }
  .below { padding-top: var(--s6); }
}


/* ======================================================================
   v10: the whole hero fits the laptop screen. From 901px wide the hero is
   as tall as the window minus the nav; type, spacing and the phone follow
   the height as well as the width. Spacing snaps to the 8pt grid.
   ====================================================================== */
@media (min-width: 901px) {
  :root {
    --nav: clamp(56px, 9vh, 72px);
    --pad: clamp(24px, 4.5vh, 40px);       /* headline panel */
    --pad-c: clamp(16px, 3vh, 24px);       /* small cards */
    --gap-v: clamp(16px, 3vh, 24px);       /* headline to subline */
    --stage-t: clamp(16px, 3vh, 32px);
    --cap-t: clamp(8px, 1.6vh, 16px);
    --cap-b: clamp(16px, 2.6vh, 24px);
    --cta-h: clamp(48px, 7.5vh, 64px);
    --hero-h: clamp(400px, calc(100svh - var(--nav) - var(--s2)), 800px);
  }
  @supports (width: round(1px, 8px)) {
    :root {
      --nav: round(clamp(56px, 9vh, 72px), 8px);
      --pad: round(clamp(24px, 4.5vh, 40px), 8px);
      --pad-c: round(clamp(16px, 3vh, 24px), 8px);
      --gap-v: round(clamp(16px, 3vh, 24px), 8px);
      --stage-t: round(clamp(16px, 3vh, 32px), 8px);
      --cap-t: round(clamp(8px, 1.6vh, 16px), 8px);
      --cap-b: round(clamp(16px, 2.6vh, 24px), 8px);
      --cta-h: round(clamp(48px, 7.5vh, 64px), 8px);
    }
  }
  .nav-in { height: var(--nav); }
  .hero { height: var(--hero-h); grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .col, .stage { min-height: 0; }

  /* headline panel: one block, subline right under the headline */
  .lead { min-height: 0; padding: var(--pad); justify-content: center; gap: var(--gap-v); }
  h1 { margin-top: var(--gap-v); font-size: clamp(36px, min(2.6vw + 28px, 7.6vh), 72px); }
  .sub { font-size: clamp(16px, 2.2vh, 18px); }

  /* the results feed gets the wider share so each result stays on one line */
  .cards { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .card { padding: var(--pad-c); }
  .cta-bar, .wa { height: var(--cta-h); flex: none; }
  .cta-row .cta-bar { flex: 1; }

}

/* ======================================================================
   v11: split CTA with example times, a trust row, a results feed, a
   resources card, and a two page demo deck that shows a peek of the next page.
   ====================================================================== */
.card-h { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s1); min-height: 24px; }
.card-h .card-k { white-space: nowrap; }

/* recent results: one item at a time. Every item sits in the same grid cell, so the card never changes height. */
.feed { flex: 1; margin: 0; padding: var(--s1) 0 0; list-style: none; display: grid; align-content: center; border-top: 1px solid var(--line); }
.feed li { grid-area: 1 / 1; display: block; line-height: 32px; color: var(--text-2); font-size: 16px; white-space: nowrap;
  opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .3s ease-out, transform .4s var(--ease), visibility 0s linear .4s; }
.feed li.on { opacity: 1; visibility: visible; transform: none; transition: opacity .4s ease-out .12s, transform .5s var(--ease) .12s, visibility 0s; }
.feed li.out { transform: translateY(-8px); }
.feed .n { color: var(--green); font-weight: 600; }
.feed .tag-ph { margin-right: var(--s1); vertical-align: 1px; }
.feed-bars { margin-top: auto; display: flex; gap: 4px; }
.feed-bars i { flex: 1; height: 2px; border-radius: 2px; background: var(--line-4); overflow: hidden; }
.feed-bars i::after { content: ""; display: block; width: 0; height: 100%; background: var(--muted); }
.feed-bars i.done::after { width: 100%; }
.feed-bars i.now::after { animation: feedbar 5s linear forwards; }
.feed-card.paused .feed-bars i.now::after { animation-play-state: paused; }
@keyframes feedbar { to { width: 100%; } }
.feed-pause { width: 32px; height: 32px; margin: -4px 0; flex: none; border: 0; border-radius: 8px; background: none; color: var(--muted); display: grid; place-items: center; cursor: pointer; transition: color var(--fast), background-color var(--fast); }
.feed-pause:hover { color: var(--text); background: var(--raised); }
.feed-pause svg { width: 12px; height: 12px; fill: currentColor; }
.feed-pause .play, .feed-pause[aria-pressed="true"] .pause { display: none; }
.feed-pause[aria-pressed="true"] .play { display: block; }

/* free resources */
.res { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.res li + li { border-top: 1px solid var(--line); }
.res a { display: flex; align-items: center; justify-content: space-between; gap: var(--s1); min-height: 32px; padding: 4px 0; color: var(--text); font-size: 16px; white-space: nowrap; transition: color var(--fast); }
.res a svg { width: 14px; height: 14px; flex: none; fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease), stroke var(--fast); }
.res a:hover svg { transform: translateX(3px); stroke: var(--text); }
.res .all { color: var(--text-2); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: #555; }
.res .all:hover { color: var(--text); text-decoration-color: var(--text); }

/* booking: the loud bar, a quieter WhatsApp button, then example times */
.book { display: flex; flex-direction: column; gap: var(--s1); }
.cta-row { display: flex; gap: var(--s1); min-width: 0; }
.cta-row .cta-bar { flex: 1; min-width: 0; }
.wa { flex: none; height: 64px; padding: 0 12px 0 var(--s2); border-radius: 12px; border: 1px solid var(--line-4); background: var(--raised); color: var(--text);
  display: inline-flex; align-items: center; gap: var(--s1); font-size: 16px; font-weight: 500; white-space: nowrap; transition: background-color var(--fast), border-color var(--fast); }
.wa:hover { background: var(--selected); border-color: #444; }
.wa svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
/* the placeholder tag rides on the button's top edge, so the button stays narrow and the bar stays the loud one */
.wa { position: relative; }
.wa .tag-ph { position: absolute; top: -12px; right: 12px; background: var(--page); }
.times { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s1); font-size: 14px; color: var(--muted); }
.times-k { margin-right: 4px; white-space: nowrap; }
.time { height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-4); background: var(--shell); color: var(--text-2); font-size: 14px; font-weight: 500;
  display: inline-flex; align-items: center; white-space: nowrap; font-feature-settings: "tnum"; transition: color var(--fast), background-color var(--fast), border-color var(--fast); }
.time:hover { color: var(--text); background: var(--raised); border-color: #4a4a4a; }

/* trust row */
.trust { margin: 0; padding: 0; list-style: none; display: flex; align-items: center; flex-wrap: wrap; gap: var(--s1) var(--s3); font-size: 14px; color: var(--text-2); }
.trust li { display: inline-flex; align-items: center; gap: var(--s1); white-space: nowrap; }
.trust li svg { width: 14px; height: 14px; fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* narrow laptops: the cards get 16px padding and the resource arrows go so every line stays on one line */
@media (min-width: 901px) and (max-width: 1100px) {
  .cards { grid-template-columns: minmax(0, 8fr) minmax(0, 5fr); }
  .card { padding: var(--s2); }
  .res a svg { display: none; }
}


@media (min-width: 901px) { .wa { height: var(--cta-h); } }

@media (max-width: 600px) {
  /* phone: the booking block and trust row come straight after the headline, the cards follow */
  .book { order: 1; } .trust { order: 2; } .cards { order: 3; }
  .cta-row { flex-direction: column; }
  .cta-row .cta-bar { flex: none; }
  .wa .tag-ph { position: static; background: none; }
  .wa { height: 56px; justify-content: center; }
  .time { height: 40px; padding: 0 var(--s2); }
  .feed-pause { width: 40px; height: 40px; margin: -8px 0; }
  .res a { min-height: 40px; }
}


/* ======================================================================
   v12: Articulat CF headline, one short subline and three USPs, and a flat
   demo carousel: the phones sit side by side, the next one peeks in at the
   edge, and the track follows the pointer 1:1.
   ====================================================================== */
h1 { font-family: var(--display); font-weight: 500; line-height: 1.04; letter-spacing: -0.025em; font-feature-settings: "kern", "liga", "calt"; }
.sub { max-width: 520px; }
.usp-box { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); }
/* resources: "See all" sits in the header and the placeholder tag rides on the card's top edge, like the WhatsApp one */
.res-card { position: relative; }
.res-card > .tag-ph { position: absolute; top: -12px; right: var(--s2); background: var(--page); }
.res-card .card-h .all { min-height: 24px; display: inline-flex; align-items: center; font-size: 14px; color: var(--text-2); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: #555; transition: color var(--fast); }
.res-card .card-h .all:hover { color: var(--text); text-decoration-color: var(--text); }
.card { gap: var(--s1); }
.usps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--s1); }
.usps li { display: flex; align-items: center; gap: 12px; font-size: 16px; line-height: 24px; color: var(--text); white-space: nowrap; }
.usp-ic { width: 24px; height: 24px; flex: none; border-radius: 6px; border: 1px solid var(--line-4); background: var(--raised); display: grid; place-items: center; }
.usp-ic svg { width: 14px; height: 14px; fill: none; stroke: var(--text-2); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }


@media (min-width: 901px) {
  /* a touch smaller and tighter than v11 so the USPs fit; padding rounds down to the 8pt grid */
  :root { --pad: clamp(24px, 4vh, 40px); }
  @supports (width: round(1px, 8px)) { :root { --pad: round(down, clamp(24px, 4vh, 40px), 8px); --gap-v: round(down, clamp(16px, 3vh, 24px), 8px); } }
  h1 { font-size: clamp(36px, min(2.6vw + 28px, 7vh), 72px); }
  .status + h1 { margin-top: var(--s2); }
}
@media (max-width: 600px) {
  .lead { gap: var(--s4); }
  .res-card .card-h .all { min-height: 40px; }
  .res-card > .tag-ph { background: var(--page); }
}

/* ======================================================================
   v12b: every CTA is a full pill, so it stands apart from the subtly
   rounded panels. The primary pill carries the two founder avatars.
   ====================================================================== */
.cta-bar, .wa, .nav-cta, .time { border-radius: 999px; }
.cta-bar { --av: 40px; position: relative; padding: 0 var(--s3) 0 12px; gap: var(--s2); }
.cta-l { display: inline-flex; align-items: center; gap: 12px; min-width: 0; white-space: nowrap; }
.av { display: inline-flex; flex: none; }
.av img { display: block; width: var(--av); height: var(--av); border-radius: 999px; border: 2px solid #ededed; background: #cfcfcf; object-fit: cover; transition: transform 200ms ease-out, border-color var(--fast); }
.av img + img { margin-left: calc(var(--av) * -.3); }
.cta-bar:hover .av img { border-color: #fff; }
.cta-bar > .tag-ph { position: absolute; top: -12px; left: var(--s3); background: var(--page); }
.wa { padding: 0 var(--s3) 0 20px; }
.wa .tag-ph { right: var(--s3); }
/* times: outlined pills in a row */
.time { background: transparent; border-color: #4a4a4a; color: var(--text); }
.time:hover { background: var(--raised); border-color: #6a6a6a; }
/* hover: a small lift, the avatars part, the arrow slides; 200ms ease-out */
.cta-bar, .wa, .nav-cta, .time { transition: transform 200ms ease-out, background-color 200ms ease-out, border-color 200ms ease-out, color 200ms ease-out; }
.cta-bar svg { transition: transform 200ms ease-out; }
.cta-bar:hover, .wa:hover, .nav-cta:hover, .time:hover { transform: translateY(-2px); }
.cta-bar:hover .av img:first-child { transform: translateX(-2px); }
.cta-bar:hover .av img + img { transform: translateX(3px); }
.cta-bar:hover svg { transform: translateX(4px); }
.cta-bar:active, .wa:active, .nav-cta:active, .time:active { transform: translateY(0); }
.cta-bar:focus-visible, .wa:focus-visible, .nav-cta:focus-visible, .time:focus-visible { border-radius: 999px; outline: 2px solid var(--text); outline-offset: 3px; }
@media (min-width: 901px) {
  .cta-bar { --av: min(40px, calc(var(--cta-h) - 16px)); padding-left: calc((var(--cta-h) - var(--av)) / 2); }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .cta-bar { padding-right: var(--s2); gap: var(--s1); }
  .wa { padding: 0 var(--s2); }
}
@media (max-width: 600px) {
  .cta-bar { padding-left: 8px; }
  .book { margin-top: var(--s1); } /* room for the photo tag on the bar's top edge */
  .cta-bar > .tag-ph { left: var(--s3); }
  .wa .tag-ph { position: static; }
}
@media (prefers-reduced-motion: reduce) {
  .cta-bar:hover, .wa:hover, .nav-cta:hover, .time:hover, .cta-bar:hover svg, .cta-bar:hover .av img, .cta-bar:hover .av img:first-child, .cta-bar:hover .av img + img { transform: none; }
}


/* ======================================================================
   v13: tighter Artemis radii (12px panels, 8px inner cards and controls; CTAs
   and time slots stay full pills), the Artemis login starfield behind the
   panels, clearer hover on the dark pills, and three time slots in one row on the phone.
   ====================================================================== */
:root { --r: 12px; --r-in: 8px; --page: #0b0b0c; }   /* the Artemis login backdrop tone, so the stars read as they do there */
.card-ic, .feed-pause, .btn { border-radius: var(--r-in); }
.nav-cta { border-radius: 999px; }
/* the stage's dotted grid sits on the panel tone, the panel stays opaque so text never sits on stars */
.panel { background-color: var(--shell); }

/* starfield: ported from Artemis' login backdrop (src/components/auth/backdrop.tsx). It sits under
   everything at the top of the page and fades out before the logo strip. */
.sky { position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100vh; height: 100svh; min-height: 560px; display: block; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }

/* dark pills: the lift reads on its own now (brighter fill and edge, a soft shadow under it) */
.wa, .nav-cta, .time { transition: transform 200ms ease-out, background-color 200ms ease-out, border-color 200ms ease-out, color 200ms ease-out, box-shadow 200ms ease-out; }
.wa:hover, .nav-cta:hover { background: #2e2e2e; border-color: #5a5a5a; box-shadow: 0 6px 16px rgba(0, 0, 0, .45); }
.time:hover { color: #fff; background: #262626; border-color: #808080; box-shadow: 0 6px 16px rgba(0, 0, 0, .45); }
.cta-bar:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, .45); }
.wa:active, .nav-cta:active, .time:active, .cta-bar:active { box-shadow: none; }


@media (max-width: 600px) {
  :root { --r: 12px; }
  .book { margin-top: 0; }
  /* "Next open" gets its own line, the three slots share the row below it */
  .times { gap: var(--s1); }
  .times-k { flex: 0 0 100%; margin: 0; }
  .time { flex: 1 1 0; min-width: 0; justify-content: center; padding: 0 12px; }
}

/* height tiers (laptops): what goes when the window gets short. The CTA row always stays,
   then in order of priority: USPs, example times, trust row, results feed, resources. */
@media (min-width: 901px) and (max-height: 760px) { .status { display: none; } h1 { margin-top: 0; } }
@media (min-width: 901px) and (max-height: 760px) { .times-k { display: none; } }
@media (min-width: 901px) and (max-height: 680px) { h1 { font-size: clamp(36px, min(2.6vw + 28px, 6.4vh), 72px); line-height: 1.02; } .trust { margin-top: calc(var(--s1) * -1); } .usps { gap: 4px; } }
@media (min-width: 901px) and (max-height: 620px) { .res-card { display: none; } .cards { grid-template-columns: 1fr; } }
@media (min-width: 901px) and (max-height: 600px) { .cards { display: none; } }
@media (min-width: 901px) and (max-height: 500px) { .trust { display: none; } }
@media (min-width: 901px) and (max-height: 440px) { .times { display: none; } }
@media (min-width: 901px) and (max-height: 380px) { .usp-box { display: none; } }

/* ======================================================================
   v14: glass panels over the Artemis sky, and the Artemis comets back in.
   Panels are a whisper lighter than the page (white at 4%), blurred so the
   stars and comets read softly through them. The demo phone stays opaque.
   ====================================================================== */
.panel {
  background-color: rgba(255, 255, 255, .04);
  -webkit-backdrop-filter: blur(12px) saturate(120%); backdrop-filter: blur(12px) saturate(120%);
  border-color: rgba(255, 255, 255, .07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
/* the sky runs the full height of the hero (JS sets the height), then fades out above the logo strip */
.sky { height: 100vh; height: 100svh; -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 160px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 160px), transparent); }

/* ======================================================================
   v15: the Polar dashboard read. Colours sampled from context/polar-dashboard-ref.png:
   page #0a0a0a, card #111111 (one tone step up), hairline #212121, chart grid #2d2d2d,
   label grey #858585, values #ffffff, no colour accent. Solid cards, no glass, 6px corners,
   hairlines inside the cards do the structure, Geist Mono for the small data.
   ====================================================================== */
:root {
  --page: #0a0a0a;      /* Polar page */
  --shell: #111111;     /* Polar card */
  --raised: #161616;
  --selected: #1c1c1c;
  --line: #212121;      /* Polar hairline */
  --line-2: #2d2d2d;    /* Polar chart grid: control outlines */
  --line-4: #2d2d2d;
  --text: #ffffff;      /* Polar values */
  --text-2: #bdbdbd;
  --muted: #858585;     /* Polar labels */
  --faint: #858585;
  --r: 6px; --r-in: 4px;
}
.panel { background: var(--shell); -webkit-backdrop-filter: none; backdrop-filter: none; border: 1px solid var(--shell); border-radius: var(--r); box-shadow: none; }
.card-ic, .feed-pause, .logo { border-radius: var(--r-in); }

/* small labels and data in mono */
.status, .card-k, .times-k, .usp-n { font-family: var(--sans); font-weight: 400; letter-spacing: 0; font-feature-settings: normal; }
.status { font-size: 14px; color: var(--muted); }
.card-k { font-size: 14px; color: var(--muted); }
h1 .l2 { color: var(--muted); }
.sub { color: var(--text-2); }

/* USPs: numbered rows split by hairlines, no boxes */
.usp-box { display: block; }
.usps { gap: 0; border-top: 1px solid var(--line); }
.usps li { height: 40px; gap: var(--s2); color: var(--text); }
.usps li + li { border-top: 1px solid var(--line); }
.usp-n { width: 24px; flex: none; font-size: 14px; color: var(--muted); }

/* results and resources: one card, two columns split by a hairline */
.cards.panel { gap: 0; }
.cards > .card { padding: var(--s3); min-width: 0; }
.cards > .card + .card { border-left: 1px solid var(--line); }
.feed { border-top-color: var(--line); padding-top: 4px; }
.feed li { display: flex; align-items: baseline; gap: var(--s1); line-height: 40px; color: var(--text-2); }
.feed .n { font-family: var(--sans); font-weight: 300; font-size: 28px; line-height: 40px; letter-spacing: -0.03em; color: var(--text); }
.feed-bars i { height: 1px; background: var(--line); }
.feed-bars i::after { background: var(--muted); }
.feed-pause:hover { background: var(--selected); }
.res { border-top-color: var(--line); }
.res li + li { border-top-color: var(--line); }
.res a { min-height: 40px; color: var(--text); }
.res-card .card-h .all { color: var(--text-2); text-decoration-color: #4a4a4a; }

/* pills: solid fills so the sky never runs through them */
.btn, .nav-cta, .wa { background: var(--shell); border-color: var(--line-2); }
.time { font-family: var(--sans); font-size: 14px; font-weight: 400; letter-spacing: 0; background: var(--page); border-color: var(--line-2); color: var(--text); }
.wa:hover, .nav-cta:hover { background: #222; border-color: #4a4a4a; }
.time:hover { background: #1a1a1a; border-color: #5a5a5a; }
.times-k { color: var(--muted); }
/* solid backings in the open sky: the times row, the trust row, the nav text */
.times, .trust { align-self: flex-start; background: var(--page); }
.trust { color: var(--text-2); }
.trust li svg { stroke: var(--muted); }
.brand, .nav-links { background: var(--page); }
/* the backing runs 4px past the text, so nothing grazes a glyph edge; a shadow, so the layout does not move */
.times, .trust, .brand, .nav-links { box-shadow: 0 0 0 4px var(--page); }


@media (min-width: 901px) {
  :root { --row: 40px; }
  @supports (width: round(1px, 8px)) { :root { --row: round(down, clamp(32px, 4.8vh, 40px), 8px); } }
  .usps li { height: var(--row); }
  .cards > .card { padding: var(--pad-c); }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .cards > .card { padding: var(--s2); }
  .feed .n { font-size: 24px; }
}
@media (min-width: 901px) and (max-height: 680px) { .usps { gap: 0; } }
@media (max-width: 600px) {
  :root { --r: 6px; }
  .cards > .card + .card { border-left: 0; border-top: 1px solid var(--line); }
  .usps li { height: 48px; }
  .feed .n { font-size: 20px; }
  .times, .trust { align-self: stretch; }
}
/* laptops: resources rows at 32, a slightly smaller headline, a shorter feed row on short windows */
@media (min-width: 901px) {
  .res a { min-height: 32px; }
  h1 { font-size: clamp(36px, min(2.6vw + 28px, 6.6vh), 72px); }
}
@media (min-width: 901px) and (max-height: 760px) {
  .feed li, .feed .n { line-height: 32px; }
  .feed .n { font-size: 24px; }
}
@media (min-width: 901px) and (max-height: 680px) {
  h1 { font-size: clamp(36px, min(2.6vw + 28px, 6vh), 72px); }
  .lead { padding-top: var(--s2); padding-bottom: var(--s2); }   /* short windows: the copy is centred, at least 16px clear */
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .js .rise, .js .nav { opacity: 1 !important; transform: none !important; }
  /* the feed becomes a still list of every item */
  .feed { display: block; padding-top: 0; border-top: 0; }
  .feed li { opacity: 1; visibility: visible; transform: none; border-top: 1px solid var(--line); line-height: 32px; }
  .feed li:first-child { border-top: 0; }
  .feed li .n { font-size: 20px; line-height: 32px; }
  .feed-bars, .feed-pause { display: none; }
}

/* ======================================================================
   v16: the primary pill stays put and swaps its label on hover, founder
   name tags on the avatars, WhatsApp green and white nav pill on hover,
   checked USPs, and the real Ecom Landers logo.
   ====================================================================== */
.brand { gap: 0; }
.brand svg.logo-el { display: block; height: 24px; width: calc(24px * 254 / 38); }
@media (max-width: 600px) { .brand svg.logo-el { height: 20px; width: calc(20px * 254 / 38); } }

/* primary pill: no lift, no shadow, the label slides up and a new one slides in */
.cta-bar:hover, .cta-bar:active { transform: none; box-shadow: none; }
.cta-bar:hover .av img, .cta-bar:hover .av img:first-child, .cta-bar:hover .av img + img { transform: none; }
.cta-bar:hover > svg { transform: translateX(2px); }
.cta-t { display: inline-grid; overflow: hidden; vertical-align: top; }
.cta-t > span { grid-area: 1 / 1; transition: transform 220ms ease-out, opacity 220ms ease-out; }
.cta-t2 { transform: translateY(100%); opacity: 0; }
.cta-bar:hover .cta-t1, .cta-bar:focus-visible .cta-t1 { transform: translateY(-100%); opacity: 0; }
.cta-bar:hover .cta-t2, .cta-bar:focus-visible .cta-t2 { transform: none; opacity: 1; }

/* founder name tags: a small dark tag above each avatar, on hover and on keyboard focus */
.avi { position: relative; display: block; flex: none; }
.avi + .avi { margin-left: calc(var(--av) * -.3); }
.av .avi img + img, .av .avi img { margin-left: 0; }
.tip { position: absolute; left: 50%; width: max-content; bottom: calc(100% + 8px); transform: translateX(-50%); padding: 4px 8px; border-radius: 6px; border: 1px solid #2d2d2d; background: #1a1a1a; color: #fff;
  font-size: 14px; line-height: 16px; font-weight: 500; letter-spacing: 0; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 150ms ease-out; z-index: 5; }
.avi:first-child .tip { left: 0; transform: none; }   /* Dylan's tag starts at his avatar's edge, so it never pokes past the column */
.avi:hover .tip, .cta-bar:focus-visible .tip { opacity: 1; }

/* WhatsApp: fills WhatsApp green, dark text and icon */
.wa:hover, .wa:active { transform: none; box-shadow: none; background: #25D366; border-color: #25D366; color: #0a0a0a; }
/* nav pill: goes white, dark text */
.nav-cta:hover, .nav-cta:active { transform: none; box-shadow: none; background: #fff; border-color: #fff; color: #0a0a0a; }

/* USPs: a small check in a quiet circle, no hairlines or numbers */
.usps, .usps li + li { border-top: 0; }
.usps { gap: var(--s1); }
.usps li, .usps li:nth-child(n) { height: auto; min-height: 24px; gap: 12px; }
.usp-ck { width: 20px; height: 20px; flex: none; border-radius: 999px; border: 1px solid #2d2d2d; background: #1a1a1a; display: grid; place-items: center; }
.usp-ck svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 901px) and (max-height: 680px) { .usps { gap: var(--s1); } }

@media (prefers-reduced-motion: reduce) {
  .cta-t > span { transform: none !important; }
  .cta-bar:hover > svg { transform: none; }
}
/* ======================================================================
   v17: Shopify Partner status line, results and resources as two panels,
   a checklist sheet that peeks out of the resources panel, real founder
   photos, and no trust row (its space goes back to the headline panel).
   ====================================================================== */
.status::before { background: #95BF47; }                 /* a plain Shopify green dot, not the Shopify mark */
.status .sp { color: var(--text-2); }
.status .sep { margin: 0 2px; }

/* two solid cards side by side */
.cards { gap: var(--s2); }
.cards > .card, .cards > .card + .card { border: 1px solid var(--shell); }   /* no split line: each card is its own panel */


/* the trust row is gone: the status line now stays down to 680px tall */
@media (min-width: 901px) and (max-height: 760px) { .status { display: inline-flex; } .status + h1 { margin-top: var(--s2); } }
@media (min-width: 901px) and (max-height: 680px) { .status { display: none; } h1, .status + h1 { margin-top: 0; } }

@media (max-width: 600px) {
  .cards { gap: var(--s1); }
}

/* ======================================================================
   v18: quieter, cleaner surfaces (the feel of supercut.ai, not its look).
   Neutral greys: page #0b0b0b, panels three steps up at #0e0e0e, borders do
   the structure. Text is one soft white (#f5f5f3) at three alphas. Geist Mono
   for numbers only. One easing family, 200 to 300ms. Everything on the 8pt grid,
   and the left column shares one inner padding: 32px, 24px on small laptops.
   ====================================================================== */
:root {
  --page: #0b0b0b;
  --shell: #0e0e0e;                          /* panels, a whisper above the page */
  --raised: #151515;                         /* #0b0b0b with white at 4%, solid so the sky never runs through */
  --selected: #1a1a1a;
  --text: #f5f5f3;                           /* primary: headline, values, key labels */
  --text-2: rgba(245, 245, 243, .62);        /* secondary: subline, USPs, body */
  --muted: rgba(245, 245, 243, .5);          /* tertiary: labels and captions (.42 fails AA at 14px on #0e0e0e, so .5) */
  --faint: rgba(245, 245, 243, .42);         /* decoration only */
  --line: rgba(255, 255, 255, .06);          /* inner dividers */
  --line-2: rgba(255, 255, 255, .08);        /* panel edges */
  --line-4: rgba(255, 255, 255, .12);        /* outline pills */
  --hi: inset 0 1px 0 rgba(255, 255, 255, .04);
  --ease: cubic-bezier(.33, 1, .68, 1);      /* UI transitions */
  --ease-io: cubic-bezier(.7, 0, .3, 1);     /* larger moves */
  --fast: 200ms var(--ease);
  --px: 32px;                                /* the left column's one inner padding */
}
@media (min-width: 901px) and (max-width: 1100px), (min-width: 901px) and (max-height: 760px) { :root { --px: 24px; } }
@media (max-width: 900px) { :root { --px: 24px; } }

/* surfaces: barely above the page, a 1px edge and a faint top highlight */
.panel, .cards > .card, .cards > .card + .card { background-color: var(--shell); border: 1px solid var(--line-2); box-shadow: var(--hi); }
.feed, .res, .res li + li { border-top-color: var(--line); }
.feed-bars i { background: var(--line-2); }

/* type */
h1 { font-family: var(--display); font-weight: 500; line-height: 1.08; letter-spacing: -0.02em; color: var(--text); }
h1 .l2 { color: var(--muted); }
.nav-links { font-size: 15px; font-weight: 500; color: var(--text-2); }
.nav-links a { transition: color var(--fast); }
.nav-links a:hover { color: var(--text); }
.sub { font-size: 16px; line-height: 24px; font-weight: 400; color: var(--text-2); letter-spacing: 0; }
.usps li { font-size: 16px; line-height: 24px; color: var(--text-2); }
.usp-ck { border: 1px solid var(--line-4); background: transparent; }
.usp-ck svg { stroke: var(--text); }
/* labels and captions: Inter Display 14 / 500, tertiary, no mono */
.status, .card-k, .times-k { font-family: var(--sans); font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); font-feature-settings: "cv11", "ss01"; }
.status .sp { color: var(--text-2); }
/* mono: numbers only (proof figures, time slots, page counter, the phone's clock) */
.feed .n, .time { font-family: var(--sans); font-feature-settings: normal; }
.feed .n { color: var(--text); }
.feed li { color: var(--text-2); }
.res a { color: var(--text); }
.res a svg { stroke: var(--muted); }
.res-card .card-h .all, .res .all { color: var(--text-2); text-decoration-color: rgba(245, 245, 243, .2); }
.res-card .card-h .all:hover { color: var(--text); text-decoration-color: var(--text); }
.foot { color: var(--muted); }

/* CTAs: full pills, 16 / 500 */
.btn, .nav-cta, .cta-bar, .wa { font-size: 16px; font-weight: 500; letter-spacing: -0.005em; }
.cta-bar { background: #f5f5f3; color: #0b0b0b; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 8px 24px -8px rgba(0, 0, 0, .6); }
.cta-bar:hover, .cta-bar:active { background: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 8px 24px -8px rgba(0, 0, 0, .6); }
.av img { border-color: #f5f5f3; }
.cta-bar:hover .av img { border-color: #fff; }
.wa, .nav-cta, .btn { background: var(--raised); border: 1px solid var(--line-4); box-shadow: var(--hi); color: rgba(245, 245, 243, .85); }
.wa:hover, .wa:active { background: #25D366; border-color: #25D366; color: #0a0a0a; box-shadow: none; }
.nav-cta:hover, .nav-cta:active { background: #f5f5f3; border-color: #f5f5f3; color: #0b0b0b; box-shadow: none; }
.time { background: var(--page); border-color: var(--line-4); color: var(--text); }
.time:hover { background: var(--raised); border-color: rgba(255, 255, 255, .2); color: var(--text); }
.tip { background: #161616; border-color: var(--line-4); color: var(--text); }
.feed-pause { color: var(--muted); }
.feed-pause:hover { color: var(--text); background: var(--selected); }

/* motion: one family, 200 to 300ms */
.cta-bar, .wa, .nav-cta, .time, .btn { transition: transform 200ms var(--ease), background-color 200ms var(--ease), border-color 200ms var(--ease), color 200ms var(--ease), box-shadow 200ms var(--ease); }
.cta-bar svg, .cta-bar > svg { transition: transform 200ms var(--ease); }
.cta-t > span { transition: transform 240ms var(--ease), opacity 240ms var(--ease); }
.tip { transition: opacity 200ms var(--ease); }
.av img { transition: transform 200ms var(--ease), border-color 200ms var(--ease); }
.res a, .res a svg { transition: transform 240ms var(--ease), color 200ms var(--ease), stroke 200ms var(--ease); }
.feed li { transition: opacity 240ms var(--ease), transform 300ms var(--ease-io), visibility 0s linear 300ms; }
.feed li.on { transition: opacity 260ms var(--ease) 100ms, transform 300ms var(--ease-io) 100ms, visibility 0s; }
.js.ready .rise { transition: opacity 300ms var(--ease), transform 300ms var(--ease-io); transition-delay: calc(var(--d, 0) * 1ms); }
.js.ready .nav { transition: opacity 300ms var(--ease); }

/* spacing: one inner padding down the left column, 16px between panels, 16 / 24 / 8 rhythm */
.hero, .col, .cards { gap: var(--s2); }
.lead { gap: 0; padding-left: var(--px); padding-right: var(--px); }
.sub { margin-top: var(--s2); }
.usp-box { margin-top: var(--s3); }
.usps { gap: var(--s1); }
.cards > .card { padding-left: var(--px); padding-right: var(--px); }
@media (min-width: 901px) {
  .sub { font-size: 18px; line-height: 28px; }
  h1 { font-size: clamp(36px, min(2.4vw + 26px, 6.2vh), 64px); }
  .cta-bar { padding-left: var(--px); padding-right: var(--px); gap: var(--s2); }
  .wa { padding-left: var(--s3); padding-right: var(--s3); }
}
@media (min-width: 901px) and (max-height: 760px) { .sub { font-size: 16px; line-height: 24px; } }
@media (min-width: 901px) and (max-height: 680px) { h1 { font-size: clamp(32px, min(2.4vw + 26px, 5.6vh), 64px); line-height: 1.08; } .usps { gap: var(--s1); } }
@media (min-width: 901px) and (max-width: 1100px) { .wa { padding-left: var(--s2); padding-right: var(--s2); } .cta-bar { gap: var(--s1); } }
/* narrow laptops: the card labels keep the 24px left edge; 16px on the right and a 20px figure keep every row on one line */
@media (min-width: 901px) and (max-width: 1100px) { .cards > .card { padding-right: var(--s2); } .feed .n { font-size: 20px; } }
@media (max-width: 600px) { .lead { padding-left: var(--s3); padding-right: var(--s3); } .cards > .card { padding-left: var(--s3); padding-right: var(--s3); } }

/* ======================================================================
   v19: no outlines anywhere. Surfaces separate by fill alone, a step at a time
   (Supercut style): page #0b0b0b, panels #131313, raised pills #1a1a1a, hover #202020.
   List rows separate by spacing, not lines. No inset highlights.
   ====================================================================== */
:root {
  --page: #0b0b0b;
  --shell: #131313;
  --raised: #1a1a1a;
  --selected: #202020;
  --hover: #202020;
  --screen: #1c1c1c;
}
.panel, .cards > .card, .cards > .card + .card { background-color: var(--shell); border: 0; box-shadow: none; }
/* inner rows: spacing, no hairlines */
.feed, .res, .res li + li { border-top: 0; }
.feed { padding-top: 0; }
.res { display: flex; flex-direction: column; gap: 4px; }
.feed-bars i { background: var(--hover); }
/* raised elements: one step up, no edge */
.btn, .nav-cta, .wa { background: var(--raised); border: 0; box-shadow: none; }
.time { background: var(--raised); border: 0; box-shadow: none; color: var(--text); }
.time:hover { background: var(--hover); border: 0; box-shadow: none; color: var(--text); }
.wa:hover, .wa:active { background: #25D366; color: #0a0a0a; box-shadow: none; }
.nav-cta:hover, .nav-cta:active { background: #f5f5f3; color: #0b0b0b; box-shadow: none; }
.usp-ck { border: 0; background: var(--raised); }
.tip { border: 0; background: var(--raised); }
.feed-pause:hover { background: var(--hover); }
.cta-bar, .cta-bar:hover, .cta-bar:active { box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .6); }

/* ======================================================================
   v20: the v18 carousel back on the stage, three blank phones. Flat phones side
   by side, the next one peeks in at the edge, the track follows the pointer 1:1
   and snaps. Frames are fill and shadow only, no outline rings.
   ====================================================================== */
.stage { position: relative; display: flex; flex-direction: column; align-items: center; padding: var(--s4) 0 0; overflow: hidden; }
.slot { align-self: stretch; display: flex; justify-content: center; }
.car { position: relative; width: 100%; touch-action: pan-y; outline: none; cursor: grab; }
.car:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; border-radius: var(--r); }
.car.dragging, .car.dragging * { cursor: grabbing !important; -webkit-user-select: none; user-select: none; }
.track { --cg: var(--s2); width: 100%; display: flex; align-items: center; gap: var(--cg); transform: translate3d(0, 0, 0); }

/* the phone: a dark frame, a blank screen, the island and the home bar */
.device { position: relative; flex: none; width: 388px; height: 726px; padding: 7px; border-radius: 46px; background: #070707; border: 0;
  box-shadow: 0 24px 64px -16px rgba(0, 0, 0, .7); display: flex; flex-direction: column; }
.scr { position: relative; flex: 1; min-height: 0; border-radius: 39px; background: var(--screen); overflow: hidden; }
.isl { position: absolute; left: 50%; top: 12px; width: 30%; aspect-ratio: 30 / 8.5; transform: translateX(-50%); border-radius: 999px; background: #070707; }
.home { position: absolute; left: 50%; bottom: 8px; width: 34%; height: 4px; transform: translateX(-50%); border-radius: 999px; background: rgba(245, 245, 243, .12); }

/* the pages that are not in front: dimmed, their brightness follows the track (JS sets --o), a click brings them in */
.track > .device { transition: opacity 240ms var(--ease); }
.track > .device:not(.on) { opacity: var(--o, .5); }
.track > .device.on { opacity: var(--o, 1); }
.track > .device:not(.on):hover { opacity: min(1, calc(var(--o, .5) + .2)); }
.peek-btn { display: none; border: 0; }
.device:not(.on) .peek-btn { display: block; position: absolute; inset: 0; z-index: 2; padding: 0; border: 0; border-radius: inherit; background: none; cursor: pointer; }
.car a, .car img, .car svg { -webkit-user-drag: none; }

/* captions row: previous, dots, 1 / 3, next */
.stage-cap { width: 100%; margin-top: auto; padding: var(--s2) var(--px) var(--s3); display: flex; align-items: center; justify-content: center; gap: var(--s1); background: var(--shell); font-size: 14px; color: var(--muted); }
.dnav { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.dn-b { width: 32px; height: 32px; padding: 0; border-radius: 999px; border: 0; background: var(--raised); color: var(--text); display: grid; place-items: center; cursor: pointer;
  transition: background-color 200ms var(--ease), opacity 200ms var(--ease); }
.dn-b:hover { background: var(--hover); }
.dn-b:disabled { opacity: .35; cursor: default; background: var(--raised); }
.dn-b svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.dn-n { min-width: 40px; text-align: center; font-family: var(--sans); font-size: 14px; color: var(--text); font-feature-settings: normal; }
.pg-dots { display: inline-flex; align-items: center; }
.pg-dot { width: 20px; height: 32px; padding: 0; border: 0; background: none; display: grid; place-items: center; cursor: pointer; }
.pg-dot::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .16); transition: width 300ms var(--ease-io), background-color 200ms var(--ease); }
.pg-dot[aria-current="true"]::before { width: 16px; background: var(--text-2); }
.pg-dot:hover::before { background: var(--muted); }
.pg-dot[aria-current="true"]:hover::before { background: var(--text); }

@media (min-width: 901px) {
  .stage { padding: var(--stage-t) 0 0; }
  .slot { flex: 1; min-height: 0; container-type: size; align-items: center; }
  .car, .track { height: 100%; }
  /* as tall as the panel allows at 1:2, never wider than 388, and narrow enough that the next phone shows 48px at the edge */
  .track > .device { --dw: min(388px, calc(100cqw - 2 * (var(--cg) + 48px)), max(50cqh, 240px)); width: var(--dw); height: min(100cqh, calc(var(--dw) * 2)); }
  .stage-cap { margin-top: 0; padding: var(--cap-t) var(--px) var(--cap-b); }
}
@media (max-width: 900px) { .stage { padding-top: var(--s5); } }
@media (max-width: 600px) {
  /* phone: the first page sits 16px from the left, the next one shows 40px at the right */
  .stage { padding: var(--s3) 0 0; }
  .track { --cg: 12px; }
  .track > .device { width: calc(100% - 16px - var(--cg) - 40px); height: 520px; padding: 6px; border-radius: 40px; }
  .scr { border-radius: 34px; }
  .stage-cap { padding: var(--s2) var(--s2) var(--s3); }
  .dn-b { width: 40px; height: 40px; }
  .pg-dot { height: 40px; }
  .dn-n { min-width: 36px; }
}

/* ======================================================================
   v21: darker, subtly glass panels. The four big panels (headline, results, resources,
   stage) are white at 2.5% over the #0b0b0b page (reads about #111), blurred 12px so the
   stars and comets show through faintly, with a faint top sheen and a 1px inset highlight
   along the top edge only. No outlines. Pills stay solid #1a1a1a with the same faint sheen.
   Phones stay opaque. Without backdrop-filter the panels fall back to solid #101010.
   ====================================================================== */
:root { --glass: rgba(255, 255, 255, .025); --sheen: linear-gradient(180deg, rgba(255, 255, 255, .03), transparent 40%); }
.panel, .cards > .card, .cards > .card + .card {
  background-color: var(--glass); background-image: var(--sheen);
  -webkit-backdrop-filter: blur(12px) saturate(120%); backdrop-filter: blur(12px) saturate(120%);
  border: 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .panel, .cards > .card, .cards > .card + .card { background-color: #101010; }
}
.stage-cap { background: transparent; }
.btn, .nav-cta, .wa, .time, .dn-b, .dn-b:disabled { background-image: var(--sheen); }

/* ======================================================================
   v22: Dylan's headline and subline, a glass "Shopify Partner" badge (the one
   outline in the design: a slow conic gradient ring), bare orange ticks, and the
   booking block (both CTAs and the open slots) inside the headline panel. Below
   the panel: just the results and resources cards. Panels at white 3%.
   ====================================================================== */
:root { --glass: rgba(255, 255, 255, .03); --tick: #ff6a1a; }

/* the badge: 32px glass pill, Inter Display 14 / 500, Shopify green dot, 1px conic ring */
@property --sp-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.status { position: relative; isolation: isolate; height: 32px; padding: 0 12px; gap: var(--s1); border-radius: 999px;
  font-family: var(--sans); font-size: 14px; font-weight: 500; line-height: 1; color: var(--text);
  background: rgba(255, 255, 255, .03); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.status .sp { color: var(--text); }
.status::before { width: 6px; height: 6px; flex: none; background: #95BF47; box-shadow: 0 0 8px rgba(149, 191, 71, .45); }
.status::after { content: ""; position: absolute; inset: 0; padding: 1px; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--sp-a), rgba(255, 255, 255, .1), rgba(255, 255, 255, .42) 40deg, rgba(149, 191, 71, .5) 72deg,
    rgba(255, 255, 255, .1) 112deg, rgba(255, 255, 255, .05) 180deg, rgba(255, 255, 255, .24) 250deg, rgba(255, 255, 255, .08) 300deg, rgba(255, 255, 255, .1));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  animation: sp-spin 7s linear infinite; }
@keyframes sp-spin { to { --sp-a: 360deg; } }
@media (prefers-reduced-motion: reduce) { .status::after { animation: none; } }

/* the headline: one flowing two tone sentence, balanced over 2 to 4 lines, tight tracking */
h1 { letter-spacing: -0.03em; text-wrap: balance; }
h1 .l { display: inline; white-space: normal; }
.sub { max-width: 560px; text-wrap: pretty; }

/* USPs: a bare 18px orange check, primary white text */
.usps { gap: 12px; }
.usps li, .usps li:nth-child(n) { gap: 12px; color: var(--text); }
.usp-ck { display: block; width: 18px; height: 18px; flex: none; border: 0; border-radius: 0; background: none;
  fill: none; stroke: var(--tick); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* booking, inside the headline panel: the two CTAs side by side, then the open slots */
.lead .book { margin-top: var(--s3); gap: var(--s2); }
.lead .cta-row { flex-direction: row; }
/* founder photos: the left inset equals the top inset */
.cta-bar { padding-left: calc((var(--cta-h, 56px) - var(--av)) / 2); }

@media (min-width: 901px) {
  h1 { font-size: clamp(32px, min(1.5vw + 22px, 5.6vh), 50px); line-height: 1.08; }
}
/* the open slots now sit on the glass: no page coloured backing */
.lead .times { background: none; box-shadow: none; }
/* laptops up to 860px tall: a tighter rhythm and shorter cards so the panel never clips */
@media (min-width: 901px) and (max-height: 860px) {
  h1 { font-size: clamp(32px, min(1.5vw + 22px, 5.2vh), 50px); }
  .usp-box, .lead .book { margin-top: var(--s2); }
  .lead .book { gap: var(--s1); }
  .cards > .card { padding-top: var(--s2); padding-bottom: var(--s2); }
}
/* up to 760px tall: 24px panel padding, 8px rows ("Next open" label already goes here) */
@media (min-width: 901px) and (max-height: 760px) {
  .lead { padding-top: var(--s3); padding-bottom: var(--s3); }
  .usps { gap: var(--s1); } .sub { margin-top: var(--s1); }
}
/* up to 680px tall: the example slots go too (the CTAs never do) */
@media (min-width: 901px) and (max-height: 680px) { .lead { padding-top: var(--s2); padding-bottom: var(--s2); } .lead .times { display: none; } }
@media (max-width: 900px) { :root { --cta-h: 64px; } .cta-bar, .wa { height: var(--cta-h); } }
@media (max-width: 600px) {
  :root { --cta-h: 56px; }
  h1 { font-size: 32px; }
  .lead .cta-row { flex-direction: column; }
  .lead .book { margin-top: var(--s3); }
}
/* ======================================================================
   v23: barely there glass, smaller pills, a calmer hierarchy.
   Panels are white at 1.2% over the #0b0b0b page (reads about #0f0f0f), same blur,
   no borders, a fainter sheen. Pills are 44px (time slots 32px, nav 36px), labels 15px,
   founder photos 32px. The headline is two fixed lines on laptops, sized to the panel
   so neither line wraps from 1024 to 1920. Rhythm 24 / 16 / 24 / 32 / 16.
   ====================================================================== */
:root { --glass: rgba(255, 255, 255, .012); --sheen: linear-gradient(180deg, rgba(255, 255, 255, .015), transparent 40%); --cta-h: 44px; }
.panel, .cards > .card, .cards > .card + .card { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025); }
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .panel, .cards > .card, .cards > .card + .card { background-color: #0f0f0f; }
}

/* pills: 44px, 15px labels, 32px photos (top inset = left inset = 6px), overlap stays 30% */
.cta-bar, .wa, .lead .cta-bar, .lead .wa { height: var(--cta-h); font-size: 15px; }
.cta-bar { --av: 32px; padding-left: calc((var(--cta-h) - var(--av)) / 2); padding-right: calc(var(--px) * .75); gap: 12px; }
.cta-l { gap: 8px; }
.cta-bar > svg { width: 16px; height: 16px; }
.wa { padding-left: 20px; padding-right: 20px; }
.wa svg { width: 16px; height: 16px; }
.nav-cta { height: 36px; padding: 0 var(--s2); font-size: 15px; }
.time { height: 32px; }

/* headline: two lines on laptops, the break is deliberate */
h1 { line-height: 1.1; letter-spacing: -0.02em; }
@media (min-width: 901px) {
  .lead { container-type: inline-size; }
  h1 .l { display: block; white-space: nowrap; }
  h1 { font-size: min(35.2px, calc(100cqi / 20.9), 4.93vh); line-height: 1.1; }
}
/* subline, USPs */
.sub, .lead .sub { font-size: 17px; line-height: 26px; max-width: 44ch; color: var(--text-2); }
.usps { gap: var(--s1); }
.usps li, .usps li:nth-child(n) { font-size: 16px; line-height: 24px; }
.usp-ck { width: 16px; height: 16px; }

/* rhythm: badge 24 headline 16 sub 24 USPs 32 CTAs 16 slots */
.status + h1 { margin-top: var(--s3); }
.sub { margin-top: var(--s2); }
.usp-box { margin-top: var(--s3); }
.lead .book { margin-top: var(--s4); gap: var(--s2); }
@media (min-width: 901px) and (max-height: 860px) {
  .status + h1 { margin-top: var(--s3); }
  .sub { margin-top: var(--s2); }
  .usp-box { margin-top: var(--s3); }
  .lead .book { margin-top: var(--s4); gap: var(--s2); }
  .usps { gap: var(--s1); }
}
/* v22's 760px tier tightened the rhythm; v23 keeps the full rhythm there (it fits) and resets the 8px sub gap */
@media (min-width: 901px) and (max-height: 760px) { .sub { margin-top: var(--s2); } }
/* short laptops (680px and under): the CTA gap tightens first, then the rest */
@media (min-width: 901px) and (max-height: 680px) {
  .lead .book { margin-top: var(--s3); gap: var(--s1); }
  .status + h1 { margin-top: var(--s2); }
  .usp-box { margin-top: var(--s2); }
  .lead .book { margin-top: var(--s2); }
  .sub { margin-top: var(--s1); }
}
@media (max-width: 1100px) { .wa { padding-left: var(--s2); padding-right: var(--s2); } }
@media (max-width: 600px) {
  .lead .book { margin-top: var(--s3); }
  .wa { justify-content: center; }
  .nav-cta, .time { height: 40px; }   /* phone: touch sized */
}
/* ======================================================================
   v24: panels that render as #0e0e0e, quieter carousel controls, CTAs that
   hug their content, lime ticks.
   Panels are near opaque (#0e0e0e at 92% over the #0b0b0b page) with a faint
   4px blur, and the sky is knocked back to 15% under each panel's rect on the
   canvas itself (see the sky script), so stars and comets no longer lift them.
   ====================================================================== */
:root { --glass: rgba(14, 14, 14, .92); --sheen: linear-gradient(180deg, rgba(255, 255, 255, .008), transparent 40%); --tick: #A3E635; }
.panel, .cards > .card, .cards > .card + .card {
  background-color: var(--glass); background-image: var(--sheen);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  border: 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .015);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .panel, .cards > .card, .cards > .card + .card { background-color: #0e0e0e; }
}
.btn, .nav-cta, .wa, .time { background-image: var(--sheen); }

/* the badge dot and its ring highlight: the same lime as the ticks */
.status::before { background: #A3E635; box-shadow: 0 0 8px rgba(163, 230, 53, .4); }
.status::after {
  background: conic-gradient(from var(--sp-a), rgba(255, 255, 255, .1), rgba(255, 255, 255, .42) 40deg, rgba(163, 230, 53, .5) 72deg,
    rgba(255, 255, 255, .1) 112deg, rgba(255, 255, 255, .05) 180deg, rgba(255, 255, 255, .24) 250deg, rgba(255, 255, 255, .08) 300deg, rgba(255, 255, 255, .1)); }

/* CTAs hug their content: natural widths, 12px apart, left aligned */
.lead .cta-row { flex-direction: row; justify-content: flex-start; gap: 12px; }
.lead .cta-row .cta-bar, .lead .cta-row .wa { flex: 0 0 auto; width: auto; }
.lead .cta-row .cta-bar { padding-left: 6px; padding-right: 20px; gap: 12px; justify-content: flex-start; }
.lead .cta-row .wa { padding-left: 20px; padding-right: 20px; justify-content: center; }

/* carousel controls: bare chevrons and three thin lines, no counter */
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.dnav { gap: 8px; }
.dn-b, .dn-b:disabled { width: 28px; height: 28px; border-radius: 999px; background: transparent; background-image: none; color: rgba(255, 255, 255, .4); box-shadow: none; }
.dn-b:hover:not(:disabled) { background: rgba(255, 255, 255, .05); color: rgba(255, 255, 255, .85); }
.dn-b:disabled { opacity: .35; }
.dn-b svg { width: 14px; height: 14px; stroke-width: 1.5; }
.pg-dots { gap: 0; }
.pg-dot { width: 24px; height: 28px; }
.pg-dot::before { width: 16px; height: 2px; border-radius: 1px; background: rgba(255, 255, 255, .14); transition: background-color 200ms var(--ease); }
.pg-dot[aria-current="true"]::before { width: 16px; background: rgba(255, 255, 255, .7); }
.pg-dot:hover::before { background: rgba(255, 255, 255, .4); }
.pg-dot[aria-current="true"]:hover::before { background: rgba(255, 255, 255, .85); }

@media (max-width: 600px) {
  /* phone: the CTAs stack full width; the controls keep a 40px touch target, drawn just as small */
  .lead .cta-row { flex-direction: column; }
  .lead .cta-row .cta-bar, .lead .cta-row .wa { width: 100%; }
  .lead .cta-row .cta-bar { justify-content: space-between; }
  .dn-b, .dn-b:disabled { width: 40px; height: 40px; }
  .pg-dot { height: 40px; }
}
/* ======================================================================
   v25: Polar's width. The container is 1280px (nav, hero, logo strip share the
   edges), gutters run 24 to 80px, so 2560 spans 640..1920 and 1440 spans 80..1360.
   From 1600 wide the extra room goes to both columns at the same 3:2 ratio, the
   headline steps up to 44px (still two lines), the subline to 18px, and the hero
   may grow to 880px tall so the phone grows with the stage height only.
   WhatsApp is the quieter pill: "WhatsApp us", 16px each side, 16px icon.
   ====================================================================== */
.lead .cta-row .wa, .wa { padding-left: var(--s2); padding-right: var(--s2); gap: var(--s1); }
.wa svg { width: 16px; height: 16px; }
@media (min-width: 1600px) and (min-height: 900px) {
  :root { --hero-h: clamp(400px, calc(100svh - var(--nav) - var(--s2)), 880px); }
  h1 { font-size: min(38.72px, calc(100cqi / 20.9), 4.93vh); }
  .sub, .lead .sub { font-size: 18px; line-height: 28px; }
  .track > .device { --dw: min(424px, calc(100cqw - 2 * (var(--cg) + 48px)), max(50cqh, 240px)); }
}
/* ======================================================================
   v26: sliding nav highlight. One shared 8px rectangle sits behind the four nav
   links, sized to the hovered (or keyboard focused) link's 8x12 hit box. Between
   links it slides and resizes in 220ms with no overshoot; leaving the list it fades
   out where it is; entering from outside it fades in at the first link, no slide.
   The link text keeps its colour. Gap trimmed by the 24px of padding, so the
   words sit exactly where they did in v25.
   ====================================================================== */
.nav-links { position: relative; isolation: isolate; gap: calc(var(--s4) - 24px); }
@media (max-width: 1100px) { .nav-links { gap: 0; } }
.nav-links a { position: relative; z-index: 1; padding: 8px 12px; border-radius: 8px; }
.nav-links a:hover { color: inherit; }
.nav-links a:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; border-radius: 8px; }
.nav-hl { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 0; border-radius: 8px; background: rgba(255, 255, 255, .055);
  pointer-events: none; opacity: 0; will-change: transform, width;
  transition: opacity 150ms ease-out, transform 220ms cubic-bezier(.33, 1, .68, 1), width 220ms cubic-bezier(.33, 1, .68, 1); }
.nav-hl.still { transition: opacity 150ms ease-out; }
@media (prefers-reduced-motion: reduce) { .nav-hl, .nav-hl.still { transition: opacity 150ms ease-out; } }
/* ======================================================================
   v27: a tighter headline panel, premium results and resources cards, local
   time slots, a calmer founder photo lift, a white on green WhatsApp pill, and a
   hero that uses more of big screens.
   Laptops: the hero is the window minus the nav; the left column is the headline
   panel (padding 48 to 56 at 1440, less on short windows) plus the two cards; the
   stage spans both, so its top meets the panel top and its bottom the cards' bottom.
   ====================================================================== */
/* Book a call: the two founder photos rise 2px, the second 40ms later; the label still swaps */
.cta-bar .avi { transition: transform 220ms cubic-bezier(.33, 1, .68, 1); }
.cta-bar .avi + .avi { transition-delay: 40ms; }
.cta-bar:hover .avi, .cta-bar:focus-visible .avi { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .cta-bar .avi, .cta-bar:hover .avi, .cta-bar:focus-visible .avi { transform: none !important; } }

/* WhatsApp: white label and icon, at rest and on the green hover */
.wa, .wa:hover, .wa:active, .wa:focus-visible, .lead .cta-row .wa { color: #fff; }
.wa:hover, .wa:active { background: #25D366; border-color: #25D366; color: #fff; }

/* open slots: a dashed 1px outline at rest, a solid ring cross fades in on hover and focus
   (dashed to solid cannot transition, so the solid ring is its own layer). The one deliberate outline besides the badge. */
.time, .lead .time { position: relative; background: transparent; background-image: none; border: 1px dashed rgba(255, 255, 255, .18); box-shadow: none; color: var(--text); }
.time::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 1px solid rgba(255, 255, 255, .32); opacity: 0; pointer-events: none; transition: opacity 180ms var(--ease); }
.time:hover, .time:focus-visible { background: rgba(255, 255, 255, .03); border-color: rgba(255, 255, 255, .18); box-shadow: none; transform: none; color: var(--text); }
.time:hover::after, .time:focus-visible::after { opacity: 1; }
.times-z { font-size: 14px; color: var(--muted); white-space: nowrap; margin-left: 4px; }

/* the two cards: one label row, then the content; equal heights, labels on one baseline */
.cards { align-items: stretch; }
.cards > .card { position: relative; padding: var(--cp, 24px) var(--lpx, var(--px)); gap: 0; justify-content: flex-start; }
.card-h { min-height: 24px; flex-wrap: nowrap; }
.card-k { display: inline-flex; align-items: center; gap: 8px; line-height: 24px; }
.feed-pause { margin: -4px 0; }

/* recent results: a tiny live dot, one big Geist Mono figure, the metric and the brand under it */
.live { width: 6px; height: 6px; border-radius: 50%; background: #A3E635; box-shadow: 0 0 0 3px rgba(163, 230, 53, .14); flex: none; }
.feed-card.paused .live { background: var(--muted); box-shadow: none; }
.feed { flex: 1; display: grid; align-content: end; margin-top: var(--cm, 16px); padding: 0; border: 0; }
.feed li, .feed li.on { display: block; grid-area: 1 / 1; line-height: normal; white-space: nowrap; border: 0; }
.feed li { opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity 260ms var(--ease), transform 320ms var(--ease), visibility 0s linear 320ms; }
.feed li.on { opacity: 1; visibility: visible; transform: none; transition: opacity 300ms var(--ease) 80ms, transform 360ms var(--ease) 80ms, visibility 0s; }
.feed li.out { transform: translateY(-8px); }
.fx { display: grid; grid-template-columns: auto; justify-items: start; }
.feed .n, .feed li .n { display: block; font-family: var(--sans); font-weight: 300; font-size: var(--fig, 44px); line-height: 1.1; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; color: var(--text); }
.fx .m { margin-top: 4px; font-size: 16px; line-height: 24px; color: var(--text-2); }
.fx .b { font-size: 14px; line-height: 20px; color: var(--muted); }
.feed-bars { display: none; }
.feed-prog { margin-top: var(--cm, 16px); height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.feed-prog i { display: block; height: 100%; width: 100%; border-radius: inherit; background: rgba(245, 245, 243, .5); transform: scaleX(0); transform-origin: 0 50%; }
.feed-prog i.run { animation: feedprog 5s linear forwards; }
.feed-card.paused .feed-prog i.run { animation-play-state: paused; }
@keyframes feedprog { to { transform: scaleX(1); } }

/* free resources: a clean list, rows split by spacing, a soft fill on hover, the arrow nudges 2px */
.res-card .card-h .all { font-size: 14px; color: var(--text-2); text-decoration: none; }
.res-card .card-h .all:hover { color: var(--text); }
.res { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; margin: var(--cm, 16px) -12px 0; padding: 0; border: 0; }
.res li + li { border: 0; }
.res a { display: flex; align-items: center; gap: 12px; min-height: var(--rrow, 40px); padding: 0 12px; border-radius: 6px; white-space: nowrap;
  transition: background-color 180ms var(--ease); }
.res a:hover, .res a:focus-visible { background: rgba(255, 255, 255, .03); }
.res .rt { font-size: 16px; line-height: 24px; color: var(--text); overflow: hidden; text-overflow: ellipsis; }
.res .rm { margin-left: auto; font-size: 14px; line-height: 20px; color: var(--muted); }
.res a svg { display: block; width: 14px; height: 14px; flex: none; stroke: var(--muted); transition: transform 220ms var(--ease), stroke 180ms var(--ease); }
.res a:hover svg, .res a:focus-visible svg { transform: translateX(2px); stroke: var(--text); }

@media (min-width: 901px) {
  :root {
    --lp: 48px; --lpx: 40px; --cp: 24px; --fig: 44px; --rrow: 40px; --cm: 16px;
    --r1: 24px; --r2: 16px; --r3: 24px; --r4: 32px; --r5: 16px;
  }
  @supports (width: round(1px, 8px)) {
    :root {
      --lp: round(clamp(24px, 6vh, 56px), 8px);
      --cp: round(clamp(16px, 3vh, 32px), 8px);
      --r1: round(clamp(16px, 3vh, 32px), 8px);
      --r3: round(clamp(16px, 3vh, 40px), 8px);
      --r4: round(clamp(16px, 4vh, 48px), 8px);
    }
  }
  /* the headline panel hugs its content; any slack is split evenly above and below */
  .lead { flex: 1 1 auto; justify-content: center; padding: var(--lp) var(--lpx); }
  .status + h1 { margin-top: var(--r1); }
  .sub, .lead .sub { margin-top: var(--r2); }
  .usp-box { margin-top: var(--r3); }
  .lead .book { margin-top: var(--r4); gap: var(--r5); }
  h1 { font-size: min(38.72px, calc(100cqi / 20.9), 4.93vh); }
  .cards { flex: none; grid-template-columns: 1fr 1fr; }
  /* phones centred in the whole stage: the top inset matches the controls row */
  .stage { padding-top: calc(var(--cap-t) + 28px + var(--cap-b)); }
}
@media (min-width: 901px) and (max-width: 1100px) { :root { --lpx: 24px; --lp: 32px; --fig: 36px; } .res .rm { display: none; } .res a svg { display: block; margin-left: auto; } }
/* up to 860px tall (1440x800, 1512x860): 40px panel padding, two resources, a 40px figure, 8px inner gaps */
@media (min-width: 901px) and (max-height: 860px) {
  :root { --lp: 40px; --cp: 24px; --cm: 8px; --fig: 40px; --rrow: 40px; --r1: 16px; --r3: 24px; --r4: 24px; }
}
@media (min-width: 901px) and (max-height: 830px) { .res li:nth-child(3) { display: none; } }
/* up to 760px tall (1280x720): 16px card padding, tighter rhythm */
@media (min-width: 901px) and (max-height: 760px) { :root { --lp: 24px; --lpx: 32px; --cp: 16px; --fig: 36px; --r1: 16px; --r3: 16px; --r4: 24px; --rrow: 36px; } }
@media (min-width: 901px) and (max-height: 680px) { .stage { padding-top: var(--stage-t); } }
@media (min-width: 901px) and (max-width: 1100px) and (max-height: 760px) { :root { --lpx: 24px; } }
@media (min-width: 901px) and (max-height: 680px) { :root { --lp: 16px; --r1: 16px; --r3: 16px; --r4: 16px; --fig: 32px; --rrow: 32px; } }

/* big screens: the hero takes more of the window, panels grow, type steps up */
@media (min-width: 1600px) and (min-height: 900px) {
  :root { --hero-h: clamp(400px, calc(100svh - var(--nav) - var(--s6)), 1000px); --lp: 48px; --lpx: 40px; --cp: 32px; --fig: 52px; --rrow: 44px; --r5: 24px; }
  @supports (width: round(1px, 8px)) { :root { --lp: round(clamp(40px, 5vh, 64px), 8px); } }
  /* the headline grows with the panel; at Polar's 1280 width the two fixed lines cap it near 40px */
  h1 { font-size: min(45.76px, calc(100cqi / 20.9), 4.93vh); }
  .cards { min-height: calc(var(--hero-h) * .27); }
  .sub, .lead .sub { font-size: 19px; line-height: 30px; }
  .usps li, .usps li:nth-child(n) { font-size: 17px; line-height: 28px; }
  .usps { gap: 12px; }
}

/* reduced motion: no rotation, both results side by side, no progress line */
@media (prefers-reduced-motion: reduce) {
  .feed { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); align-content: end; }
  .feed li, .feed li.on { grid-area: auto; opacity: 1; visibility: visible; transform: none; border: 0; line-height: normal; }
  .feed li .n, .feed .n { font-size: calc(var(--fig, 44px) * .8); line-height: 1.1; }
  .feed-prog, .feed-pause { display: none; }
  .live { box-shadow: none; }
}
@media (max-width: 600px) {
  /* phone: "Next open" and the zone share the first row, the three slots fill the second */
  .times-k { order: -2; flex: 0 0 72px; white-space: nowrap; }
  .times-z { order: -1; flex: 0 0 calc(100% - 80px); margin: 0; text-align: right; }
  .cards > .card { padding: var(--s3); }
  .feed .n, .feed li .n { font-size: 40px; }
  .res a { min-height: 44px; }
}
/* ======================================================================
   v28: a headline about 12% smaller at every laptop width (same two lines, same
   two tones), the rhythm under it rebalanced (headline 16 sub 24 USPs), and the
   founder photos rise one at a time, only the one under the pointer.
   ====================================================================== */
@media (min-width: 901px) { :root { --r2: 16px; --r3: 24px; } }
/* the smaller headline frees height; the CTAs and badge take it so the panel stays tight */
@media (min-width: 901px) and (min-height: 761px) and (max-height: 860px) { :root { --r4: 32px; } }
@media (min-width: 901px) and (max-width: 1599px) and (min-height: 861px) { :root { --r1: 32px; } }
@media (min-width: 901px) and (max-height: 680px) { :root { --r3: 16px; } }
/* Book a call: hovering the pill moves no photos; the photo under the pointer rises 2px with its name tag */
.cta-bar .avi, .cta-bar .avi + .avi { transition: transform 220ms cubic-bezier(.33, 1, .68, 1); transition-delay: 0s; }
.cta-bar:hover .avi, .cta-bar:focus-visible .avi { transform: none; }
.cta-bar .avi:hover, .cta-bar:hover .avi:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .cta-bar .avi, .cta-bar .avi:hover, .cta-bar:hover .avi:hover { transform: none !important; } }
/* ======================================================================
   v29: a quiet ASCII field behind the phones and a softer phone shadow;
   Resources moves to the nav with a lime "Free" tag; the hero's bottom row is
   one wide results panel under the headline panel: the two real results as
   stat columns (brand, figure, metric) and two placeholder visuals at the right.
   ====================================================================== */
.stage > .slot, .stage > .stage-cap { position: relative; z-index: 1; }
.device { box-shadow: 0 12px 32px -12px rgba(0, 0, 0, .45); }

/* nav: Resources with its tag; the sliding highlight covers the whole link, tag included */
.nav-links a.nav-res { display: inline-flex; align-items: center; gap: var(--s1); }
.nav-free { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: 999px; background: rgba(163, 230, 53, .10);
  color: #A3E635; font-family: var(--sans); font-size: 14px; font-weight: 500; line-height: 20px; letter-spacing: 0; white-space: nowrap; }

/* results: one panel, the stats at the left, the visuals at the right */
.cards, .cards:has(> .rs) { grid-template-columns: minmax(0, 1fr); }
.cards > .rs { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: var(--s4); align-items: stretch; }
.rs-l { display: flex; flex-direction: column; justify-content: space-between; gap: var(--cm, 16px); min-width: 0; }
.rs-stats { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, max-content); column-gap: var(--s6); }
.rs-stats li { display: flex; flex-direction: column; align-items: flex-start; white-space: nowrap; }
.rs-stats .b { font-size: 14px; line-height: 20px; font-weight: 500; color: rgba(245, 245, 243, .85); }
.rs-stats .n { margin-top: var(--s1); font-family: var(--sans); font-weight: 300; font-size: var(--fig, 44px); line-height: 1; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; color: var(--text); }
.rs-stats .m { margin-top: var(--s1); font-size: 16px; line-height: 24px; color: var(--text-2); }

/* placeholder visuals: two blank frames with a faint browser bar, one a mini page, one a rising line */
.rs-v { display: flex; justify-content: flex-end; gap: 12px; min-width: 0; }
.shot { flex: 0 1 152px; min-width: 0; display: flex; flex-direction: column; border-radius: 6px; overflow: hidden; background: rgba(255, 255, 255, .025); }
.shot .bar { flex: none; display: flex; align-items: center; gap: 4px; height: 16px; padding: 0 8px; background: rgba(255, 255, 255, .03); }
.shot .bar b { width: 4px; height: 4px; border-radius: 50%; background: rgba(255, 255, 255, .14); }
.shot .pg { flex: 1; display: flex; flex-direction: column; gap: var(--s1); padding: var(--s1); }
.shot .pg i { display: block; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .07); }
.shot .pg i.hb { flex: 1; min-height: 16px; max-height: 48px; border-radius: 3px; background: rgba(255, 255, 255, .045); }
.shot .pg i:nth-child(2) { width: 72%; }
.shot .pg i:nth-child(3) { width: 48%; }
.shot .pg i.bt { width: 40%; height: 12px; border-radius: 999px; background: rgba(255, 255, 255, .09); }
.shot .ch { flex: 1; display: block; width: 100%; min-height: 0; }
.ch .gl { fill: none; stroke: rgba(255, 255, 255, .05); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ch .ar { fill: url(#chG); stroke: none; }
.ch .ln { fill: none; stroke: rgba(163, 230, 53, .6); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }

@media (min-width: 901px) and (max-width: 1100px) { .rs-v .shot:first-child { display: none; } .rs-stats { column-gap: var(--s5); } }
/* the results panel is shorter than v28's two cards; from 821px tall it keeps a 216px floor so the headline panel stays tight (40 to 64 padding) */
@media (min-width: 901px) and (min-height: 821px) { .cards { min-height: 216px; } }
@media (min-width: 1600px) and (min-height: 900px) { .cards { min-height: calc(var(--hero-h) * .27); } }
/* hide order on short laptops: the CTA row never goes; the results panel goes first */
@media (min-width: 901px) and (max-height: 620px) { .cards { display: none; } }
@media (max-width: 600px) {
  .cards > .rs { grid-template-columns: minmax(0, 1fr); }
  .rs-v { display: none; }
  .rs-stats { column-gap: var(--s4); }
  .rs-stats .n { font-size: 36px; }
}

/* ======================================================================
   v32: the headline on three fixed lines from 901px (the same breaks at every laptop size, sized to the panel),
   the subline at the USP size, one tracking value for the headline and one for body text.
   ====================================================================== */
#h1 .r { display: inline; }
#h1, #h1 * { letter-spacing: -0.02em; }
#h1 .l2 { color: var(--muted); }
/* the third line costs height, so the panel's rhythm is one 16px step (12 on short windows) and the padding steps down a notch */
@media (min-width: 901px) {
  #h1 .r { display: block; white-space: nowrap; }
  #h1 { font-size: min(40px, calc(100cqi / 12.8), 4.4vh); line-height: 1.08; }
  :root { --r1: 16px; --r3: 16px; --r4: 16px; }
}
@media (min-width: 1600px) and (min-height: 900px) { #h1 { font-size: min(48px, calc(100cqi / 12.8), 4.4vh); } }
@media (min-width: 901px) and (max-height: 860px) { :root { --lp: 32px; --r1: 16px; --r3: 16px; --r4: 16px; } #h1 { font-size: min(40px, calc(100cqi / 12.8), 4.75vh); } }
@media (min-width: 901px) and (max-height: 799px) {
  :root { --lp: 24px; --r1: 12px; --r2: 12px; --r3: 16px; --r4: 16px; --r5: 12px; }
  #h1 { font-size: min(40px, calc(100cqi / 12.8), 4.45vh); }
}
@media (min-width: 901px) and (max-height: 680px) { :root { --lp: 16px; --r3: 12px; --r4: 12px; } }
/* v36: more air in the headline panel, on the 8pt grid (headline block -> USPs, USPs -> CTA).
   The panel height is set by the hero, so the padding and the CTA -> Next open step give up the room:
   tall windows 32 / 40; 800-860px tall 32 / 32 with 24px padding; up to 799px tall 24 / 24 with 16px padding (16 / 24 below 720px tall). */
@media (min-width: 901px) { :root { --r3: 32px; --r4: 40px; } }
@media (min-width: 901px) and (max-height: 860px) { :root { --lp: 24px; --r1: 16px; --r2: 16px; --r3: 32px; --r4: 32px; --r5: 8px; } }
@media (min-width: 901px) and (max-height: 799px) { :root { --lp: 16px; --r1: 8px; --r2: 16px; --r3: 24px; --r4: 24px; --r5: 8px; } }
@media (min-width: 901px) and (max-height: 719px) { :root { --r3: 16px; --r4: 24px; } }
@media (min-width: 901px) and (max-height: 680px) { :root { --lp: 16px; --r1: 8px; --r2: 8px; --r3: 16px; --r4: 16px; } }
.sub, .lead .sub, .usps li, .usps li:nth-child(n) { font-size: 16px; line-height: 24px; }
.lead, .lead .status, .lead .sub, .lead .usps li, .lead .cta-bar, .lead .wa, .lead .times-k, .lead .times-z { letter-spacing: 0; }

/* v35: the v33 bezel panels are gone; the hero is back on the v32 glass panels above. */

/* Vitamina Lab product page (example work in phone 1): lives in vitamina-pdp.html, loaded into the screen as an iframe. */
.scr.vl-scr .isl, .scr.vl-scr .home { z-index: 5; }
.scr.vl-scr .home { background: rgba(17, 17, 18, .28); }
.vl-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; border-radius: inherit; background: #fff; color-scheme: light; }
/* ======================================================================
   v35: the two sections under the hero, rebuilt to an editorial standard.
   Panels use the hero's v32 panel (#0e0e0e at 92%, faint sheen, 4px blur, top hairline, sky knocked back under it),
   so the page reads as one surface; the v33/v34 bezel frames are gone everywhere.
   Section rhythm on the 8pt grid: 128px above each head on laptops (96 tablets, 80 phones),
   64px from head to content (40 on phones). Heads are an editorial split: eyebrow and
   two tone headline left, the sub (and link) right, bottom aligned.
   ====================================================================== */
/* the hero results panel keeps its two figures; its visuals live in the Results section, a jump link takes their place */
.cards > .rs .rs-go { align-self: end; justify-self: end; display: inline-flex; align-items: center; gap: var(--s1); min-height: 24px;
  font-size: 14px; line-height: 20px; font-weight: 500; color: var(--text-2); white-space: nowrap; transition: color 180ms var(--ease); }
.rs-go svg, .sec-all svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 220ms var(--ease); }
.rs-go:hover, .rs-go:focus-visible, .sec-all:hover, .sec-all:focus-visible { color: var(--text); }
.rs-go:hover svg, .rs-go:focus-visible svg, .sec-all:hover svg, .sec-all:focus-visible svg { transform: translateX(2px); }
@media (max-width: 600px) { .cards > .rs .rs-go { display: none; } }

/* the hero's v32 panel, for the sections: #0e0e0e at 92%, faint sheen, 4px blur, top hairline, the sky knocked back under it */
.pn { position: relative; min-width: 0; border-radius: var(--r); background-color: var(--glass); background-image: var(--sheen);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .015); }
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .pn { background-color: #0e0e0e; } }

/* section heads */
.sec { padding-top: 128px; }
.rv-sec { padding-bottom: 64px; }            /* plus the logo strip's 64 = one 128 step */
.sec-h { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: end; column-gap: var(--s8); margin-bottom: var(--s8); }
.sec-k { margin: 0 0 var(--s3); display: flex; align-items: center; gap: 10px; font-family: var(--sans); font-size: 14px; line-height: 20px; font-weight: 400;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.sec-k::before { content: ""; width: 6px; height: 6px; border-radius: 1px; background: var(--lime, #A3E635); }
.sec h2 { margin: 0; font-family: var(--display); font-weight: 500; font-size: clamp(40px, 3.9vw, 56px); line-height: 1.04; letter-spacing: -0.02em; color: var(--text); text-wrap: balance; }
.sec h2 .g { color: var(--muted); }
.sec-r { justify-self: end; max-width: 440px; padding-bottom: 4px; }
.sec-sub { margin: 0; font-size: 18px; line-height: 28px; letter-spacing: 0; color: var(--muted); text-wrap: pretty; }
.sec .k { color: var(--text); }
.sec-all { margin-top: var(--s2); display: inline-flex; align-items: center; gap: var(--s1); min-height: 40px; font-size: 16px; line-height: 24px; font-weight: 500;
  color: var(--text-2); white-space: nowrap; transition: color 180ms var(--ease); }
@media (min-width: 1024px) { .sec h2 .g.br { display: block; } }

/* Results: v37 emptied; two flat placeholder panels (see the v37 block) */
.rz-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }


/* tablets */
@media (max-width: 1023px) {
  .sec h2 { font-size: 44px; }
  .sec-h { column-gap: var(--s5); }
}
@media (max-width: 900px) {
  .sec { padding-top: 96px; }
  .rv-sec { padding-bottom: 32px; }
  .sec-h { grid-template-columns: minmax(0, 1fr); row-gap: var(--s3); margin-bottom: var(--s6); }
  .sec-r { justify-self: start; max-width: 560px; }
}
@media (max-width: 720px) {
  .rz-grid { grid-template-columns: minmax(0, 1fr); }
}
/* phones: one column, 80px rhythm */
@media (max-width: 600px) {
  .sec { padding-top: 80px; }
  .rv-sec { padding-bottom: 32px; }         /* plus the logo strip's 48 = 80 */
  .sec-h { margin-bottom: var(--s5); }
  .sec-k { margin-bottom: var(--s2); }
  .sec h2 { font-size: 36px; line-height: 1.06; }
  .sec-sub { font-size: 16px; line-height: 24px; }
  .sec-all { min-height: 44px; margin-top: var(--s1); }
}
/* ======================================================================
   v37: a Shopify bag in the badge with a soft shimmer, the open slots folded into a tray
   under the Book a call pill, a flow field behind the phones, flat hero panels, and an
   emptied Results section.
   ====================================================================== */
/* badge: the Shopify bag (Simple Icons path, one colour) as a mask; a narrow soft white band sweeps across it every 5s (800ms pass) */
.status::before { content: none; }
.sp-bag { display: block; flex: none; width: 15px; height: 15px; margin-top: -1px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.337 23.979l7.216-1.561s-2.604-17.613-2.625-17.73c-.018-.116-.114-.192-.211-.192s-1.929-.136-1.929-.136-1.275-1.274-1.439-1.411c-.045-.037-.075-.057-.121-.074l-.914 21.104h.023zM11.71 11.305s-.81-.424-1.774-.424c-1.447 0-1.504.906-1.504 1.141 0 1.232 3.24 1.715 3.24 4.629 0 2.295-1.44 3.76-3.406 3.76-2.354 0-3.54-1.465-3.54-1.465l.646-2.086s1.245 1.066 2.28 1.066c.675 0 .975-.545.975-.932 0-1.619-2.654-1.694-2.654-4.359-.034-2.237 1.571-4.416 4.827-4.416 1.257 0 1.875.361 1.875.361l-.945 2.715-.02.01zM11.17.83c.136 0 .271.038.405.135-.984.465-2.064 1.639-2.508 3.992-.656.213-1.293.405-1.889.578C7.697 3.75 8.951.84 11.17.84V.83zm1.235 2.949v.135c-.754.232-1.583.484-2.394.736.466-1.777 1.333-2.645 2.085-2.971.193.501.309 1.176.309 2.1zm.539-2.234c.694.074 1.141.867 1.429 1.755-.349.114-.735.231-1.158.366v-.252c0-.752-.096-1.371-.271-1.871v.002zm2.992 1.289c-.02 0-.06.021-.078.021s-.289.075-.714.21c-.423-1.233-1.176-2.37-2.508-2.37h-.115C12.135.209 11.669 0 11.265 0 8.159 0 6.675 3.877 6.21 5.846c-1.194.365-2.063.636-2.16.674-.675.213-.694.232-.772.87-.075.462-1.83 14.063-1.83 14.063L15.009 24l.927-21.166z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.337 23.979l7.216-1.561s-2.604-17.613-2.625-17.73c-.018-.116-.114-.192-.211-.192s-1.929-.136-1.929-.136-1.275-1.274-1.439-1.411c-.045-.037-.075-.057-.121-.074l-.914 21.104h.023zM11.71 11.305s-.81-.424-1.774-.424c-1.447 0-1.504.906-1.504 1.141 0 1.232 3.24 1.715 3.24 4.629 0 2.295-1.44 3.76-3.406 3.76-2.354 0-3.54-1.465-3.54-1.465l.646-2.086s1.245 1.066 2.28 1.066c.675 0 .975-.545.975-.932 0-1.619-2.654-1.694-2.654-4.359-.034-2.237 1.571-4.416 4.827-4.416 1.257 0 1.875.361 1.875.361l-.945 2.715-.02.01zM11.17.83c.136 0 .271.038.405.135-.984.465-2.064 1.639-2.508 3.992-.656.213-1.293.405-1.889.578C7.697 3.75 8.951.84 11.17.84V.83zm1.235 2.949v.135c-.754.232-1.583.484-2.394.736.466-1.777 1.333-2.645 2.085-2.971.193.501.309 1.176.309 2.1zm.539-2.234c.694.074 1.141.867 1.429 1.755-.349.114-.735.231-1.158.366v-.252c0-.752-.096-1.371-.271-1.871v.002zm2.992 1.289c-.02 0-.06.021-.078.021s-.289.075-.714.21c-.423-1.233-1.176-2.37-2.508-2.37h-.115C12.135.209 11.669 0 11.265 0 8.159 0 6.675 3.877 6.21 5.846c-1.194.365-2.063.636-2.16.674-.675.213-.694.232-.772.87-.075.462-1.83 14.063-1.83 14.063L15.009 24l.927-21.166z'/%3E%3C/svg%3E") center / contain no-repeat;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .95) 50%, transparent 60%) -50% 0 / 250% 100% no-repeat, rgba(245, 245, 243, .62);
  animation: sp-shine 5s cubic-bezier(.45, 0, .25, 1) 1.2s infinite; }
@keyframes sp-shine { 0% { background-position: -50% 0, 0 0; } 16%, 100% { background-position: 150% 0, 0 0; } }
@media (prefers-reduced-motion: reduce) { .sp-bag { animation: none !important; background-position: -50% 0, 0 0; } }

/* hero panels: completely flat. Plain fill (the same #0e0e0e at 92%), no sheen, no inner or outer shadow, no pseudo layers.
   The sky is still knocked back under each panel on the canvas, so the rendered colour is unchanged. */
.panel, .cards > .card, .cards > .card + .card, .hero .panel, .hero .panel::before, .hero .panel::after { background-image: none; box-shadow: none; }
.hero .panel::before, .hero .panel::after { content: none; }
/* the emptied Results section: two flat placeholder panels */
.rz-sec .rz-h { margin-bottom: var(--s4); }
.rz-sec .sec-k { margin-bottom: 0; }
.rz-c { height: 360px; background-image: none; box-shadow: none; }
@media (max-width: 900px) { .rz-c { height: 280px; } }
@media (max-width: 600px) { .rz-c { height: 200px; } }

/* v45: the Book a call wrapper (the tray is gone; on touch screens and phones the pill is a plain row item as before) */
.lead { position: relative; z-index: 3; }
.cta-wrap { position: relative; display: flex; flex: 0 0 auto; min-width: 0; }
.lead .cta-row .cta-wrap > .cta-bar { flex: 0 0 auto; }
@media (hover: none), (max-width: 600px) { .cta-wrap { display: contents; } }

/* rhythm now the slots row is gone: sub -> USPs 32, USPs -> CTA 40 where it fits, stepping down on short windows */
@media (min-width: 901px) { :root { --r3: 32px; --r4: 40px; } }
@media (min-width: 901px) and (max-height: 860px) { :root { --lp: 32px; --r1: 16px; --r2: 16px; --r3: 32px; --r4: 40px; } }
@media (min-width: 901px) and (max-height: 799px) { :root { --lp: 24px; --r1: 16px; --r2: 16px; --r3: 24px; --r4: 32px; } }
@media (min-width: 901px) and (max-height: 719px) { :root { --lp: 16px; --r1: 8px; --r3: 16px; --r4: 24px; } }
@media (min-width: 901px) and (max-height: 680px) { :root { --lp: 16px; --r1: 8px; --r2: 8px; --r3: 16px; --r4: 16px; } }
/* ======================================================================
   v40: the headline copy out of its panel, onto the page; an open proof strip for the results;
   a slower, softer badge shimmer; opaque phones with the stage overlay running to the panel edges.
   ====================================================================== */
/* v41: the headline copy is back inside its v39 panel (v39 padding, radius, grid and vertical rhythm, all from the rules above). */
/* the proof strip sits in its own flat panel in v39's results slot under the headline panel: the 14px mono label at the top,
   the two results at the bottom, split by a 1px hairline, each read brand, figure, metric */
.cards > .card.proof { justify-content: space-between; gap: var(--cm, 16px); scroll-margin-top: calc(var(--nav, 72px) + 32px); }
.proof-k { margin: 0; font-family: var(--sans); font-weight: 400; font-size: 14px; line-height: 20px; letter-spacing: 0; color: var(--muted); }

/* badge shimmer: a wide soft highlight (about 70% of the glyph, a gaussian-like falloff, peak white .42) glides across in 3s
   with ease-in-out, then rests 7s (10s cycle). The layer is 300% of the glyph: position 100% parks the band left of it, 0% right. */
.sp-bag {
  background: linear-gradient(90deg, transparent 38%, rgba(255, 255, 255, .03) 41%, rgba(255, 255, 255, .12) 44%, rgba(255, 255, 255, .27) 47%,
      rgba(255, 255, 255, .42) 50%, rgba(255, 255, 255, .27) 53%, rgba(255, 255, 255, .12) 56%, rgba(255, 255, 255, .03) 59%, transparent 62%) 100% 0 / 300% 100% no-repeat,
    rgba(245, 245, 243, .62);
  animation: sp-glide 10s cubic-bezier(.45, 0, .55, 1) 1.2s infinite; }
@keyframes sp-glide { 0% { background-position: 100% 0, 0 0; } 30%, 100% { background-position: 0% 0, 0 0; } }
@media (prefers-reduced-motion: reduce) { .sp-bag { animation: none !important; background-position: 100% 0, 0 0; } }

/* phones: fully opaque. The pages not in front are dimmed with brightness (still solid), not opacity, so nothing shows through */
.track > .device, .track > .device.on, .track > .device:not(.on), .track > .device:not(.on):hover { opacity: 1; }
.track > .device { transition: filter 240ms var(--ease); }
.track > .device:not(.on) { filter: brightness(calc(.5 + .5 * var(--o, .5))); }
.track > .device.on { filter: brightness(calc(.5 + .5 * var(--o, 1))); }
.track > .device:not(.on):hover { filter: brightness(min(1, calc(.6 + .5 * var(--o, .5)))); }
/* v41: the stage overlay (contour lines and stars) is gone; the phone panel is the same plain flat grey as the headline panel */
/* ======================================================================
   v42: the full homepage. Hero untouched (v41). Everything below it is on one system:
   flat panels in the hero grey (#0e0e0e at 92%, renders 14,14,14 on the page), the hero radius (var(--r), 6px),
   Articulat CF headings at -0.02em, two tone (white, then grey), Inter Display 16 body in grey with white key phrases,
   a 14px mono eyebrow with a lime square, lime used sparingly, 1280 content width, 8pt spacing.
   Rhythm: 128px between sections on laptops, 96 tablets, 80 phones. 64px head to content (40 on phones).
   ====================================================================== */
html { scroll-padding-top: 0; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
.sec { scroll-margin-top: -56px; }
@media (max-width: 600px) { .sec { scroll-margin-top: -40px; } }
.rv-sec { padding-bottom: 0; }
@media (max-width: 900px) { .rv-sec { padding-bottom: 0; } }
@media (max-width: 600px) { .rv-sec { padding-bottom: 0; } }

/* section panels: the hero panel, flat. No sheen, no shadow, no blur (the page under them is flat, so the colour is the same). */
.pn { background-color: rgba(14, 14, 14, .92); background-image: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; border: 0; border-radius: var(--r); }
.sec h2 { font-family: var(--display); letter-spacing: -0.02em; }
.sec-sub .k, .sec .k { color: var(--text); }

/* scroll reveal: opacity + 10px, 400ms, staggered by --i (70ms), once. Final state is the plain layout. */
.js .sr { opacity: 0; transform: translateY(10px); }
.js .sr.on { opacity: 1; transform: none; transition: opacity 400ms cubic-bezier(.22, 1, .36, 1), transform 400ms cubic-bezier(.22, 1, .36, 1); transition-delay: calc(var(--i, 0) * 70ms); }
@media (prefers-reduced-motion: reduce) { .js .sr, .js .sr.on { opacity: 1 !important; transform: none !important; transition: none !important; } }

/* small card type: a 14px mono index, an Articulat title, one or two sentences */
.cd { padding: var(--s4); display: flex; flex-direction: column; min-width: 0; }
.cd-i { margin: 0 0 var(--s5); font-family: var(--sans); font-size: 14px; line-height: 20px; letter-spacing: 0; color: var(--muted); font-variant-numeric: tabular-nums; }
.cd-t { margin: 0 0 var(--s1); font-family: var(--display); font-weight: 500; font-size: 22px; line-height: 28px; letter-spacing: -0.02em; color: var(--text); }
.cd-p { margin: 0; font-size: 16px; line-height: 24px; color: var(--muted); text-wrap: pretty; }
.cd-p .k { color: var(--text); }

/* 2. pain points: three cards in a row (v49, was four); v62: hover only lifts the card a shade lighter grey (the lime hairline is gone) */
.pp-grid { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
.pp-grid .cd { position: relative; overflow: hidden; transition: background-color 200ms var(--ease); }
.pp-grid .cd:hover { background-color: rgba(20, 20, 20, .92); }
.cd-i { margin-bottom: var(--s8); }
.cd-t { margin-bottom: var(--s1); }

/* v60: the three pain drawings, in the v59 outline set (after context/iso-ref-fig-outline.png): the same true isometric camera,
   1px non-scaling lines in light grey on the card colour, no visible face shading (faces carry the card colour only to hide the
   lines behind them), rounded corners, few details. No sunrise anywhere now.
   01: a row of upright page panels; ours stands alone, then identical panels slide in front of it until only its top peeks.
   02: our rounded cube alone, filled lime (the only big accent); six identical cubes drop in around it and its colour fades out.
   03: a thin jigsaw piece (round knob) lowers over the page's square socket, tries, never drops in.
   Only transforms, opacity and (03) the turning piece's outline animate. Loops pause offscreen and in hidden tabs; reduced motion
   shows one meaningful still. */
.pp-art { position: relative; aspect-ratio: 4 / 3; margin: 0 0 var(--s3); }
.pp-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.pp-svg path, .pp-svg circle { vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.pp-svg .fc { fill: #0e0e0e; stroke: none; transition: fill 200ms var(--ease); }     /* the card colour, hides back lines */
.pp-grid .cd:hover .pp-svg .fc { fill: #141414; }
.pp-svg .o { fill: none; stroke: rgba(255, 255, 255, .32); stroke-width: 1; }         /* outlines */
.pp-svg .on { fill: none; stroke: rgba(255, 255, 255, .40); stroke-width: 1; }        /* near edges, ours, a touch brighter */
.pp-svg .m { fill: none; stroke: rgba(255, 255, 255, .12); stroke-width: 1; }          /* inset lines */
.pp-svg .mo { fill: none; stroke: rgba(255, 255, 255, .42); stroke-width: 1; }         /* our offer print (01) */
.pp-svg .dt { fill: rgba(255, 255, 255, .34); stroke: none; }                         /* tiny top icons */
.pp-sec { --pain-accent: #EE5157; }                                                 /* v63: the problem drawings' accent (muted red) */
.pp-svg .ac { fill: var(--pain-accent); stroke: none; }
.pp-svg .lt, .pp-svg .ll, .pp-svg .lr { fill: var(--pain-accent); stroke: none; }       /* ours, red, shaded by face */
.pp-svg .lt { fill-opacity: .62; } .pp-svg .ll { fill-opacity: .35; } .pp-svg .lr { fill-opacity: .2; }
.pp-svg .lo { fill: none; stroke: var(--pain-accent); stroke-opacity: .9; stroke-width: 1; }
.pp-svg .pm { fill: none; stroke: rgba(255, 255, 255, .78); stroke-width: 1.75; }    /* v63 03: the bold top face prints */
.pp-grid .cd-i { margin-bottom: var(--s2); }

/* 3. process (v43): three feature cards, Polar style. Each is a silk tile (a live, slow monochrome WebGL texture; a static gradient
   underneath as the fallback) with a small dark UI card floating in the middle, then the step number, title and one line below.
   The mini card plays once when the card comes into view; lime is used only for the Winner tick. The v42 scroll line is gone. */
.ps-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); margin: 0; padding: 0; list-style: none; }
.ps-c { min-width: 0; display: flex; flex-direction: column; }
.ps-tile { position: relative; aspect-ratio: 6 / 5; border-radius: var(--r); overflow: hidden; isolation: isolate; container-type: inline-size;
  background: radial-gradient(120% 90% at 85% 10%, #8a8a8a 0%, #4a4a4a 35%, #222 75%, #1a1a1a 100%); }
.ps-c:nth-child(2) .ps-tile { background: radial-gradient(110% 80% at 20% 30%, #6e6e6e 0%, #3a3a3a 40%, #1c1c1c 100%), #1a1a1a; }
.ps-c:nth-child(3) .ps-tile { background: radial-gradient(90% 90% at 40% 40%, #9a9a9a 0%, #555 40%, #222 80%, #1a1a1a 100%); }
.ps-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 600ms var(--ease); }
.ps-cv.on { opacity: 1; }
.ps-tile::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 80px rgba(0, 0, 0, .35); }
.ps-ui { position: absolute; left: 50%; top: 50%; z-index: 1; width: min(78%, 340px); transform: translate(-50%, -50%); }
.ps-m { padding: 4px; border-radius: 12px; background: #0e0e0e; border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .35); font-size: 14px; line-height: 20px; color: var(--text); }
.ps-c.idle .ps-m { animation: psFloat 5s ease-in-out infinite; animation-delay: calc(var(--i) * -1.6s); }
@keyframes psFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
.ps-mh { display: flex; align-items: center; justify-content: space-between; gap: var(--s1); padding: 8px 12px 10px; }
.ps-ml { display: flex; align-items: center; gap: 8px; color: #cfcfcf; white-space: nowrap; }
.ps-ml svg { width: 14px; height: 14px; flex: none; }
.ps-mr { font-family: var(--sans); color: var(--muted); white-space: nowrap; }
.ps-in { padding: 12px; border-radius: 8px; background: #181818; display: grid; gap: 12px; }
.ps-row { display: grid; gap: 6px; }
.ps-row > span { display: flex; justify-content: space-between; color: #e6e6e6; }
.ps-bar { position: relative; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.ps-bar i { position: absolute; inset: 0; border-radius: 2px; background: var(--b, #fff); transform-origin: left; transform: scaleX(0);
  transition: transform 1100ms var(--ease); transition-delay: calc(var(--i) * 200ms + var(--d, 0ms)); }
.ps-c.go .ps-bar i { transform: scaleX(var(--w)); }
.ps-ok { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); }
.ps-tk { display: inline-grid; place-items: center; width: 16px; height: 16px; flex: none; color: #e6e6e6; }
.ps-tk svg { width: 14px; height: 14px; }
.ps-ok .ps-tk, .ps-li .ps-tk, .ps-win, .ps-btn { opacity: 0; transform: scale(.8); transition: opacity 360ms var(--ease), transform 480ms var(--ease);
  transition-delay: calc(var(--i) * 200ms + var(--d, 0ms)); }
.ps-c.go .ps-ok .ps-tk, .ps-c.go .ps-li .ps-tk, .ps-c.go .ps-win, .ps-c.go .ps-btn { opacity: 1; transform: none; }
.ps-ls { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.ps-li { display: flex; align-items: center; gap: 6px; color: #e6e6e6; }
.ps-li .ps-tk { width: 14px; }
.ps-btn { display: block; height: 36px; border-radius: 999px; background: #fff; color: #0c0c0c; font-weight: 500; text-align: center; line-height: 36px; transform: scale(.92); }
.ps-win { display: flex; align-items: center; gap: 8px; color: #e6e6e6; transform: translateY(4px); }
.ps-win .ps-tk { color: #A3E635; }
.ps-cap { padding-top: var(--s3); }
.ps-c .cd-i { margin: 0 0 var(--s1); }
.ps-c .cd-t { margin: 0 0 var(--s1); font-size: 20px; line-height: 28px; }
.ps-c .cd-p { max-width: 400px; }
@media (prefers-reduced-motion: reduce) {
  .ps-bar i, .ps-ok .ps-tk, .ps-li .ps-tk, .ps-win, .ps-btn, .ps-cv { transition: none; }
  .ps-c.idle .ps-m { animation: none; }
}

/* v43b: on desktops the phases scroll past a pinned tile (thatconverts style). The words are the same <ol> as the stacked cards: here it
   is the left column, each phase about 72vh tall; the right column holds ONE sticky silk tile with the three mini cards stacked inside.
   The phase nearest the middle of the viewport is active: its words are bright, the others dim; the tile morphs its texture to that
   phase's variant and swaps in that phase's card, which plays again. Phones, tablets, short screens and reduced motion get the stacked
   cards (below), and the pinned tile is not shown at all. */
.ps-pin { display: none; }
@media (min-width: 1024px) and (min-height: 640px) and (prefers-reduced-motion: no-preference) {
  .ps-bd { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 544px); column-gap: var(--s8); align-items: start; }
  .ps-dk .ps-grid { display: block; }
  .ps-grid > .ps-c { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; }
  .ps-grid > .ps-c > .ps-tile { display: none; }
  .ps-grid .ps-cap { padding: 0; max-width: 480px; }
  .ps-grid .cd-i { margin: 0 0 var(--s2); }
  .ps-grid .cd-t { margin: 0 0 var(--s2); font-size: 32px; line-height: 40px; }
  .ps-grid .cd-p { font-size: 18px; line-height: 28px; max-width: 440px; }
  .ps-pin { --ph: min(calc(100vh - 96px), 600px); display: block; position: sticky; top: calc((100vh - var(--ph)) / 2); height: var(--ph); }
  .ps-pin .ps-tile { aspect-ratio: auto; height: 100%; }
  /* v51c: the words no longer scroll past. The list is ~300vh tall; the words column and the tile both pin for the whole run
     (each 100vh, centred), the phase texts sit stacked in one cell and crossfade by scroll thirds: out fades and rises 16px,
     in fades and rises from 16px below (500ms). 01 02 03 above the words marks the phase (it replaces the tile's bars here). */
  /* v61: the head (label, heading, sub) pins too. One sticky stage (100vh) holds the head and, 48px under it, the words and the
     tile; the tile takes the height that is left (up to 600px), so the whole set fits a 720px tall screen without the old gap. */
  .js .ps-sec { padding-top: 80px; }
  .js .ps-dk { height: 300vh; }
  .js .ps-st { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: var(--s6) 0; }
  .js .ps-st > .sec-h { flex: none; margin-bottom: var(--s6); }
  .js .ps-bd { flex: 1 1 auto; min-height: 0; max-height: 600px; align-items: stretch; }
  .js .ps-tx { min-height: 0; display: flex; flex-direction: column; justify-content: center; }
  .js .ps-pin { position: static; height: auto; min-height: 0; }
  .js .ps-pin .ps-tile { height: 100%; width: 100%; }
  .js .ps-pin .ps-pg { display: none; }
  .js .ps-dk .ps-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
  .js .ps-grid > .ps-c { grid-area: 1 / 1; min-height: 0; }
  .js .ps-grid .ps-cap { opacity: 0; transform: translateY(16px); pointer-events: none;
    transition: opacity 500ms var(--ease), transform 500ms var(--ease); }
  .js .ps-grid > .ps-c.act .ps-cap { opacity: 1; transform: none; pointer-events: auto; }
  .js .ps-grid > .ps-c.out .ps-cap { opacity: 0; transform: translateY(-16px); }
  .js .ps-grid > .ps-c.rs .ps-cap { transition: none; }
  .js .ps-grid .cd-i { display: none; }
  .js .ps-ix { display: flex; gap: var(--s3); margin: 0 0 var(--s4); font-family: var(--sans); font-size: 14px; line-height: 20px; letter-spacing: .02em; }
  .ps-ix span { position: relative; padding-bottom: var(--s1); color: var(--faint); transition: color 300ms var(--ease); }
  .ps-ix span::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: #fff; transform: scaleX(0); transform-origin: left;
    transition: transform 500ms var(--ease); }
  .ps-ix span.on { color: var(--text); }
  .ps-ix span.on::after { transform: none; }
}
.ps-ix { display: none; }
.ps-pf { position: absolute; inset: 0; z-index: 1; will-change: transform; }
.ps-pc { position: absolute; inset: 0; opacity: 0; transform: translateY(8px); transition: opacity 360ms var(--ease), transform 360ms var(--ease); }
.ps-pc.on { opacity: 1; transform: none; }
.ps-pc .ps-ui { width: min(72%, 360px); }
.ps-pc.rs, .ps-pc.rs * { transition: none !important; }
.ps-pg { position: absolute; left: 50%; bottom: var(--s3); z-index: 2; display: flex; gap: 6px; transform: translateX(-50%); }
.ps-pg i { width: 24px; height: 2px; border-radius: 1px; background: rgba(255, 255, 255, .28); transition: background-color 300ms var(--ease); }
.ps-pg i.on { background: #fff; }

/* v51c: the pinned cards loop while their phase is active (about 7.7s each; the script steps them). Every state below is a class
   the script adds (v, then v2/v3 for bars that settle, hl hover, dn press, shm shimmer, lo dimmed) and clears again at the loop end,
   after the card body has faded out, so the loop is seamless. Springy steps use one overshoot curve. Greys; lime only on Winner. */
.ps-pc { --sp: cubic-bezier(.34, 1.56, .64, 1); }
.ps-pc .ps-m { position: relative; }
.ps-pc .ps-in { gap: 10px; transition: opacity 400ms var(--ease); }
.ps-pc.so .ps-in { opacity: 0; }
.ps-pc.so .q-cur { opacity: 0; }
.q-t { opacity: 0; transform: translateY(8px); transition: opacity 360ms var(--ease), transform 600ms var(--sp), background-color 300ms var(--ease), border-color 300ms var(--ease); }
.q-t.v { opacity: 1; transform: none; }
.q-p { opacity: 0; transform: scale(.6); transition: opacity 240ms var(--ease), transform 560ms var(--sp); }
.q-p.v { opacity: 1; transform: none; }
.q-fl { display: inline-grid; height: 20px; overflow: hidden; color: var(--muted); white-space: nowrap; }
.q-fl > span { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; transition: transform 520ms var(--sp), opacity 300ms var(--ease); }
.q-fl > span + span { transform: translateY(100%); opacity: 0; color: #e6e6e6; }
.q-fl.v > span:first-child { transform: translateY(-100%); opacity: 0; }
.q-fl.v > span + span { transform: none; opacity: 1; }
.q-ck { width: 14px; height: 14px; flex: none; }
.q-ck.ps-lime { color: #A3E635; }
.q-bar { position: relative; display: block; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.q-bar i { position: absolute; inset: 0; border-radius: 2px; background: var(--b, #fff); transform-origin: left; transform: scaleX(0); transition: transform 900ms cubic-bezier(.34, 1.3, .64, 1); }
.q-bar i.v { transform: scaleX(var(--w)); }
.q-bar i.v2 { transform: scaleX(var(--w2)); }
.q-bar i.v3 { transform: scaleX(var(--w3)); }
.q-sh { position: relative; overflow: hidden; }
.q-sh::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, .09) 50%, transparent 65%); transform: translateX(-100%); }
.q-sh.shm::after { transform: translateX(100%); transition: transform 1100ms var(--ease); }
.q-cur { position: absolute; left: 0; top: 0; z-index: 3; width: 16px; height: 16px; opacity: 0; pointer-events: none; transition: transform 800ms cubic-bezier(.65, 0, .35, 1), opacity 300ms var(--ease); }
.q-cur.v { opacity: 1; }
.q-cur svg { display: block; width: 16px; height: 16px; transition: transform 140ms var(--ease); }
.q-cur path { fill: #0e0e0e; stroke: #fff; stroke-width: 1.2; stroke-linejoin: round; }
.q-cur.dn svg { transform: scale(.8); }
/* Position: three inputs connect into one angle, then the rows tick in and settle; the pointer picks Your brand */
.q-map { position: relative; aspect-ratio: 300 / 96; }
.q-ln { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.q-ln path { fill: none; stroke-linecap: round; }
.q-l { stroke: rgba(255, 255, 255, .28); stroke-width: 1.2; stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 700ms var(--ease); }
.q-l.v { stroke-dashoffset: 0; }
.q-g { stroke: #fff; stroke-width: 1.4; stroke-dasharray: .14 1.2; stroke-dashoffset: .14; opacity: 0; }
.q-g.v { opacity: .9; animation: qRun 1.8s cubic-bezier(.45, 0, .55, 1) infinite; animation-delay: calc(var(--n, 0) * .2s); }
@keyframes qRun { from { stroke-dashoffset: .14; } to { stroke-dashoffset: -1.06; } }
.q-nd { position: absolute; top: 0; left: var(--x); margin-left: -36px; width: 72px; height: 24px; border-radius: 999px; background: #222; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
  color: #e6e6e6; text-align: center; line-height: 24px; }
.q-nc { position: absolute; left: 50%; bottom: 0; margin-left: -14px; width: 28px; height: 28px; border-radius: 999px; background: #fff; color: #0c0c0c; display: grid; place-items: center; }
.q-nc svg { width: 16px; height: 16px; }
.q-nc::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; box-shadow: 0 0 0 1px rgba(255, 255, 255, .5); opacity: 0; }
.q-nc.v::after { animation: qRing 2.4s var(--ease) infinite; }
@keyframes qRing { 0% { opacity: .8; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.8); } }
.q-r { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: center; gap: 12px; margin: 0 -8px; padding: 4px 8px; border-radius: 6px; color: #e6e6e6; }
.q-r.hl { background: rgba(255, 255, 255, .07); }
.q-r.hl > span:first-child { color: #fff; }
/* Build: the sections tick in, wireframes draw, each flips to Done; the pointer presses Add to cart */
.q-s { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 10px; color: #e6e6e6; }
.q-th { display: grid; align-content: center; gap: 4px; height: 20px; padding: 0 5px; border-radius: 4px; background: #222; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.q-th i { display: block; height: 2px; border-radius: 1px; background: rgba(255, 255, 255, .4); transform: scaleX(0); transform-origin: left; transition: transform 500ms var(--ease); }
.q-th i + i { width: 60%; transition-delay: 120ms; }
.q-th.v i { transform: none; }
.q-btn { margin-top: 2px; }
.q-bi { display: grid; place-items: center; height: 36px; border-radius: 999px; background: #fff; color: #0c0c0c; font-weight: 500;
  transition: transform 420ms var(--sp), background-color 240ms var(--ease); }
.q-bi.hl { background: #e2e2e2; transform: scale(1.02); }
.q-bi.dn { transform: scale(.96); }
.q-bi .q-fl, .q-bi .q-fl > span + span { color: inherit; }
.q-bi .q-fl > span { justify-content: center; }
/* Test: traffic splits, two variants run, their bars wobble and settle; the pointer opens B and the pills flip */
.q-live { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.q-live::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: #e6e6e6; animation: qPulse 1.6s ease-in-out infinite; }
@keyframes qPulse { 50% { opacity: .3; } }
.q-sp { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); }
.q-spb { display: flex; gap: 4px; width: 112px; }
.q-spb i { flex: 1; height: 4px; border-radius: 2px; background: #5c5c5c; transform: scaleX(0); transform-origin: right; transition: transform 700ms var(--sp); }
.q-spb i + i { background: #fff; transform-origin: left; }
.q-spb i.v { transform: none; }
.q-tc { display: grid; gap: 8px; padding: 8px 10px 10px; border-radius: 8px; background: #202020; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); color: #e6e6e6; }
.q-tc.v.hl { transform: translateY(-3px); background: #262626; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 8px 16px rgba(0, 0, 0, .3); }
.q-tc.v.lo { opacity: .55; }
.q-tc { transition: opacity 360ms var(--ease), transform 600ms var(--sp), background-color 300ms var(--ease), box-shadow 300ms var(--ease); }
.q-tr { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.q-pl { display: inline-flex; padding: 0 8px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.q-nx { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.q-dots { display: inline-flex; gap: 3px; }
.q-dots i { width: 3px; height: 3px; border-radius: 999px; background: currentColor; opacity: .3; }
.q-nx.v .q-dots i { animation: qDot 1.2s ease-in-out infinite; animation-delay: calc(var(--n) * .16s); }
@keyframes qDot { 30% { opacity: 1; transform: translateY(-2px); } 60%, 100% { opacity: .3; transform: none; } }
.ps-pc:not(.on) *, .ps-pc:not(.on) *::before, .ps-pc:not(.on) *::after,
.ps-tile.off *, .ps-tile.off *::before, .ps-tile.off *::after { animation-play-state: paused; }
/* v61 Build: a mini product page assembles itself. Dashed wireframe slots draw in, then each resolves into a solid block: the hero
   drops in, the pointer drags the product image into its slot, the buy box fills (lines, variant pills, Add to cart), the reviews
   row lands. A ticker under the page names the step and a thin bar fills (lime: the bar only). The pointer then presses Add to cart. */
.b-pg { display: grid; gap: 8px; }
.b-mid { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 8px; }
.b-sl { position: relative; border-radius: 6px; }
.b-sl::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px dashed rgba(255, 255, 255, .26); opacity: 0; transform: scale(.97);
  transition: opacity 300ms var(--ease), transform 500ms var(--sp); }
.b-sl.v::before { opacity: 1; transform: none; }
.b-hero { height: 44px; }
.b-imgs { height: 104px; }
.b-rev { height: 28px; }
.b-f { position: absolute; inset: 0; border-radius: inherit; background: #242424; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); opacity: 0; transform: translateY(-10px);
  transition: opacity 320ms var(--ease), transform 640ms var(--sp); }
.b-f.v { opacity: 1; transform: none; }
.b-f > i { position: absolute; left: 10px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .5); transform: scaleX(0); transform-origin: left;
  transition: transform 520ms var(--ease) 260ms; }
.b-f.v > i { transform: none; }
.b-hero i:nth-of-type(1) { top: 13px; width: 52%; background: rgba(255, 255, 255, .8); }
.b-hero i:nth-of-type(2) { top: 25px; width: 34%; transition-delay: 380ms; }
.b-cta { position: absolute; right: 10px; top: 13px; width: 56px; height: 16px; border-radius: 999px; background: #e6e6e6; opacity: 0; transform: scale(.7);
  transition: opacity 240ms var(--ease) 480ms, transform 520ms var(--sp) 480ms; }
.b-f.v .b-cta { opacity: 1; transform: none; }
.b-img { background: radial-gradient(80% 70% at 50% 35%, #4a4a4a, #262626 70%); transform: translate(26px, -18px) rotate(-5deg) scale(.94); transform-origin: 50% 50%;
  transition: opacity 320ms var(--ease), transform 800ms cubic-bezier(.65, 0, .35, 1), box-shadow 400ms var(--ease); }
.b-img.v { transform: translate(26px, -18px) rotate(-5deg) scale(.94); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 12px 24px rgba(0, 0, 0, .45); }
.b-img.v.sn { transform: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.b-pk { position: absolute; left: 50%; top: 18px; width: 30px; height: 64px; margin-left: -15px; border-radius: 6px 6px 8px 8px;
  background: linear-gradient(90deg, #8a8a8a, #d6d6d6 45%, #9a9a9a); box-shadow: 0 6px 10px rgba(0, 0, 0, .35); }
.b-pk::before { content: ""; position: absolute; left: 7px; right: 7px; top: -8px; height: 9px; border-radius: 3px 3px 0 0; background: #5a5a5a; }
.b-pk::after { content: ""; position: absolute; left: 5px; right: 5px; top: 24px; height: 16px; border-radius: 2px; background: rgba(14, 14, 14, .55); }
.b-buy .b-f > i:nth-of-type(1) { top: 10px; width: 70%; background: rgba(255, 255, 255, .8); }
.b-buy .b-f > i:nth-of-type(2) { top: 22px; width: 30%; transition-delay: 380ms; }
.b-pl { position: absolute; left: 10px; top: 36px; display: flex; gap: 6px; }
.b-pl b { width: 28px; height: 16px; border-radius: 999px; background: #2e2e2e; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); opacity: 0; transform: scale(.6);
  transition: opacity 240ms var(--ease), transform 520ms var(--sp), box-shadow 240ms var(--ease), background-color 240ms var(--ease); }
.b-pl b:nth-child(1) { transition-delay: 420ms; } .b-pl b:nth-child(2) { transition-delay: 500ms; } .b-pl b:nth-child(3) { transition-delay: 580ms; }
.b-f.v .b-pl b { opacity: 1; transform: none; }
.b-pl b.hl { transition-delay: 0ms; background: #3a3a3a; box-shadow: inset 0 0 0 1.5px #fff; }
.b-atc { position: absolute; left: 10px; right: 10px; bottom: 10px; display: grid; place-items: center; height: 28px; border-radius: 999px; background: #fff; color: #0c0c0c;
  font-weight: 500; opacity: 0; transform: scale(.85); transition: opacity 260ms var(--ease) 640ms, transform 560ms var(--sp) 640ms, background-color 240ms var(--ease); }
.b-f.v .b-atc { opacity: 1; transform: none; }
.b-atc.hl { transition-delay: 0ms; background: #e2e2e2; transform: scale(1.03); }
.b-atc.dn { transform: scale(.95); }
.b-atc .q-fl, .b-atc .q-fl > span + span { color: inherit; }
.b-atc .q-fl > span { justify-content: center; }
.b-st { position: absolute; left: 10px; top: 8px; display: flex; gap: 2px; }
.b-st svg { width: 12px; height: 12px; fill: #d6d6d6; opacity: 0; transform: scale(.4); transition: opacity 200ms var(--ease), transform 480ms var(--sp); }
.b-f.v .b-st svg { opacity: 1; transform: none; }
.b-st svg:nth-child(2) { transition-delay: 70ms; } .b-st svg:nth-child(3) { transition-delay: 140ms; } .b-st svg:nth-child(4) { transition-delay: 210ms; } .b-st svg:nth-child(5) { transition-delay: 280ms; }
.b-rev .b-f > i { left: 84px; top: 12px; width: 40%; background: rgba(255, 255, 255, .32); }
.b-pr { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; color: var(--muted); }
.b-tk { display: block; width: 88px; height: 20px; overflow: hidden; }
.b-tw { display: grid; transition: transform 520ms var(--sp); }
.b-tw > span { height: 20px; white-space: nowrap; }
.b-tk.v .b-tw { transform: translateY(-20px); } .b-tk.v2 .b-tw { transform: translateY(-40px); }
.b-tk.v3 .b-tw { transform: translateY(-60px); } .b-tk.v4 .b-tw { transform: translateY(-80px); }
.b-bar { position: relative; height: 2px; border-radius: 1px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.b-bar i { position: absolute; inset: 0; border-radius: inherit; background: #A3E635; transform: scaleX(0); transform-origin: left; transition: transform 700ms var(--ease); }
.b-bar i.v { transform: scaleX(.25); } .b-bar i.v2 { transform: scaleX(.5); } .b-bar i.v3 { transform: scaleX(.75); } .b-bar i.v4 { transform: none; }
/* v61 Test: visitors split into A and B (dots flow down both paths), the two variants run side by side, their bars climb (no numbers),
   the conversion lines draw and B pulls ahead; the pointer opens B, it lands Winner (lime: the tick only), A dims. */
.t-map { position: relative; aspect-ratio: 304 / 52; }
.t-src { width: 80px; margin-left: -40px; }
.t-dt { fill: none; stroke: #e6e6e6; stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 0 .34; opacity: 0; transition: opacity 400ms var(--ease); }
.t-dt.v { opacity: .9; animation: tFlow 1.1s linear infinite; animation-delay: calc(var(--n, 0) * -.55s); }
@keyframes tFlow { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -.34; } }
.t-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.t-v { display: grid; gap: 8px; padding: 8px 10px 10px; border-radius: 8px; background: #202020; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); color: #e6e6e6;
  transition: opacity 360ms var(--ease), transform 600ms var(--sp), background-color 300ms var(--ease), box-shadow 300ms var(--ease); }
.t-v.v.hl { transform: translateY(-3px); background: #262626; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), 0 8px 16px rgba(0, 0, 0, .3); }
.t-v.v.lo { opacity: .5; }
.t-h { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.t-id { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 999px; background: #2e2e2e; font-weight: 500; }
.t-b .t-id { background: #e6e6e6; color: #0c0c0c; }
.t-v .q-pl { padding: 0 8px; }
.t-pg { position: relative; display: block; height: 22px; }
.t-pg i, .t-pg b { position: absolute; left: 0; display: block; border-radius: 2px; background: rgba(255, 255, 255, .22); }
.t-a .t-pg i:nth-child(1) { top: 2px; width: 70%; height: 4px; } .t-a .t-pg i:nth-child(2) { top: 10px; width: 46%; height: 4px; }
.t-a .t-pg b { top: 17px; width: 30%; height: 5px; }
.t-b .t-pg b { top: 0; width: 44%; height: 9px; border-radius: 999px; background: rgba(255, 255, 255, .6); }
.t-b .t-pg i:nth-child(2) { top: 13px; width: 70%; height: 4px; } .t-b .t-pg i:nth-child(3) { top: 19px; width: 40%; height: 3px; }
.t-ch { display: grid; gap: 6px; }
.t-chh { display: flex; align-items: center; justify-content: space-between; color: var(--muted); }
.t-lg { display: inline-flex; gap: 12px; }
.t-lg > span { display: inline-flex; align-items: center; gap: 6px; }
.t-lg i { width: 10px; height: 2px; border-radius: 1px; background: #5c5c5c; }
.t-lg > span + span i { background: #fff; }
.t-gr { display: block; width: 100%; height: auto; overflow: visible; }
.t-gl { fill: none; stroke: rgba(255, 255, 255, .06); stroke-width: 1; }
.t-ln { fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2600ms cubic-bezier(.45, 0, .55, 1); }
.t-la { stroke: #6a6a6a; } .t-lb { stroke: #fff; stroke-width: 1.8; }
.t-ln.v { stroke-dashoffset: 0; }
.t-ar { fill: url(#tArG); opacity: 0; transition: opacity 600ms var(--ease); }
.t-ar.v { opacity: 1; }
.t-e { transform-box: fill-box; transform-origin: center; opacity: 0; transform: scale(.3); transition: opacity 240ms var(--ease), transform 520ms var(--sp); }
.t-ea { fill: #6a6a6a; } .t-eb { fill: #fff; }
.t-e.v { opacity: 1; transform: none; }
.t-eb.hl { animation: tRing 1.8s var(--ease) infinite; }
@keyframes tRing { 0% { filter: drop-shadow(0 0 0 rgba(255, 255, 255, .8)); } 60%, 100% { filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0)); } }


/* 7. FAQ: the head at the left (it stays in view on laptops), the questions at the right. One open at a time. */
.fq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--s8); align-items: start; }
.fq .sec-h { display: block; margin: 0; position: sticky; top: var(--s5); }
.fq .sec-sub { margin-top: var(--s3); max-width: 400px; }
.fq-ls { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s1); }
.fq-q { margin: 0; }
.fq-b { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 72px; padding: var(--s2) var(--s3) var(--s2) var(--s4);
  border: 0; border-radius: var(--r); background: none; color: var(--text); font: inherit; font-family: var(--display); font-weight: 500; font-size: 20px; line-height: 28px; letter-spacing: -0.02em;
  text-align: left; cursor: pointer; transition: color 200ms var(--ease); }
.fq-b:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.fq-x { position: relative; flex: none; width: 32px; height: 32px; border-radius: 999px; background: var(--raised); transition: background-color 200ms var(--ease); }
.fq-x::before, .fq-x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -.75px 0 0 -6px; border-radius: 1px; background: currentColor; transition: transform 300ms var(--ease); }
.fq-x::after { transform: rotate(90deg); }
.fq-i:hover .fq-x { background: #242424; }
.fq-i.open .fq-x::after { transform: rotate(0deg); }
.fq-i.open .fq-x { background: rgba(163, 230, 53, .14); color: #A3E635; }
.fq-a { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 320ms var(--ease), visibility 0s linear 320ms; }
.fq-i.open .fq-a { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows 320ms var(--ease), visibility 0s; }
.fq-a > div { overflow: hidden; min-height: 0; }
.fq-a p { margin: 0; padding: 0 var(--s8) var(--s3) var(--s4); font-size: 16px; line-height: 24px; color: var(--muted); max-width: 640px; }
.no-js .fq-a, html:not(.js) .fq-a { grid-template-rows: 1fr; visibility: visible; }
@media (prefers-reduced-motion: reduce) { .fq-a, .fq-i.open .fq-a, .fq-x::before, .fq-x::after { transition: none; } }

/* final CTA band: one line, the same Book a call pill as the hero (founder photos), WhatsApp */
.fc-sec { padding-bottom: 128px; }
.fc { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: var(--s8); row-gap: var(--s5); padding: var(--s10, 80px) var(--s8); }
.fc h2 { max-width: 720px; }
.fc .sec-k { margin-bottom: var(--s3); }
.fc .sec-sub { margin-top: var(--s3); max-width: 520px; }
.fc-row { display: flex; align-items: center; gap: 12px; }
.fc-row .cta-wrap > .cta-bar { flex: 0 0 auto; padding-right: 20px; }   /* the hero pill's own right inset */

/* footer: logo, a line, the partner badge; three short columns; the legal line */
.ft { padding: var(--s8) 0 var(--s5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.ft-top { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); column-gap: var(--s4); row-gap: var(--s5); }
.ft-brand .brand { display: inline-flex; }
.ft-brand .logo-el { height: 22px; width: calc(22px * 254 / 38); }
.ft-line { margin: var(--s2) 0 var(--s3); max-width: 320px; font-size: 16px; line-height: 24px; color: var(--muted); }
.ft .status { margin: 0; }
.ft-h { margin: 0 0 var(--s2); font-family: var(--sans); font-size: 14px; line-height: 20px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.ft-ls { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s1); }
.ft-ls a { font-size: 16px; line-height: 24px; color: var(--muted); transition: color 160ms var(--ease); }
.ft-ls a:hover, .ft-ls a:focus-visible { color: var(--text); }
.ft-bot { margin-top: var(--s8); display: flex; justify-content: space-between; gap: var(--s3); font-size: 14px; line-height: 20px; color: var(--faint); }
.ft-bot p { margin: 0; }
.ft-bot a { color: var(--faint); transition: color 160ms var(--ease); }
.ft-bot a:hover, .ft-bot a:focus-visible { color: var(--text); }
.ft-legal { display: flex; gap: var(--s3); }

/* narrow laptops and tablets */
@media (max-width: 1100px) {
  .fq { column-gap: var(--s5); }
  .fc { grid-template-columns: minmax(0, 1fr); padding: var(--s8) var(--s5); }
}
@media (max-width: 900px) {
  /* tablets: one card per row, the tile on the left and the words beside it (pain cards too, v49) */
  .pp-grid { grid-template-columns: minmax(0, 1fr); }
  .pp-grid .cd { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr auto auto auto 1fr; column-gap: var(--s4); }
  .pp-grid .pp-art { grid-column: 1; grid-row: 1 / -1; margin: 0; align-self: center; }
  .pp-grid .cd-i { grid-column: 2; grid-row: 2; } .pp-grid .cd-t { grid-column: 2; grid-row: 3; } .pp-grid .cd-p { grid-column: 2; grid-row: 4; }
  .ps-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .ps-c { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); column-gap: var(--s4); align-items: center; }
  .ps-cap { padding-top: 0; }
  .fq { grid-template-columns: minmax(0, 1fr); row-gap: var(--s6); }
  .fq .sec-h { position: static; }
  .ft-top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ft-brand { grid-column: 1 / -1; }
}
/* phones */
@media (max-width: 600px) {
  .pp-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s1); }
  .pp-grid .cd { display: flex; }
  .pp-grid .pp-art { margin: 0 0 var(--s3); align-self: stretch; }
  .cd-i { margin-bottom: var(--s4); }
  .ps-grid { gap: var(--s5); }
  .ps-c { display: flex; align-items: stretch; }
  .ps-cap { padding-top: var(--s3); }
  .ps-ui { width: min(86%, 340px); }
  .cd { padding: var(--s3); }
  .cd-t { font-size: 20px; line-height: 28px; }
  .fq-b { font-size: 18px; line-height: 26px; padding-left: var(--s3); padding-right: var(--s2); min-height: 64px; }
  .fq-a p { padding: 0 var(--s3) var(--s3); }
  .fc-sec { padding-bottom: 80px; }
  .fc { padding: var(--s5) var(--s3); row-gap: var(--s4); }
  .fc-row { flex-direction: column; align-items: stretch; }
  .fc-row .cta-wrap { display: flex; }
  .fc-row .cta-wrap > .cta-bar { flex: 1 1 auto; }
  .ft { padding-top: var(--s6); }
  .ft-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ft-bot { flex-direction: column; margin-top: var(--s6); }
}

/* ======================================================================
   v50: the v44 margin lines and eyebrow hairlines are removed (Dylan); the opaque panels stay. Original v44 note:
   v44: margin lines (after baked.design). One fixed, click-through layer draws a 1px line on each edge of the 1280 content
   column, from the same CSS as .wrap (max(gutter, 50% - 640px) in from each side of the viewport, scrollbar excluded), so the
   lines run down the panels' outer edges. It sits above the sky canvas (same z-index, later in the page) and under all content.
   Panels are now solid #0e0e0e (they rendered 14,14,14 at 92% anyway) so the lines never show through them.
   Each section's eyebrow row gets a faint hairline across the full content width: the row is 40px (20 text, 20 below, the line
   in its last pixel), then the usual 24 (16 on phones) to the heading. Phones (600 and under) drop the margin lines.
   ====================================================================== */
:root { --glass: #0e0e0e; }
.pn { background-color: #0e0e0e; }
.pp-grid .cd:hover { background-color: #131313; }   /* the old rgba(20,20,20,.92) as it rendered on the page */
.sec { container-type: inline-size; }
/* FAQ: the eyebrow (markup moved out of the sticky head) now runs above both columns; the sticky heading and the questions start under it */

/* ======================================================================
   v45: the Book a call label roll to the next open time, a metallic pill (the badge's shimmer and ring, in silver),
   and the hero's trust logo panel.
   ====================================================================== */
/* the label roll: both labels share one grid cell, so the pill always holds the longer one's width (no jump).
   Old label slides up and fades, the new one rolls in from below: 240ms, ease out. */
.cta-t { justify-items: start; }
.cta-t > span { transition: transform 240ms cubic-bezier(.22, 1, .36, 1), opacity 240ms cubic-bezier(.22, 1, .36, 1); }
.cta-t2 { white-space: nowrap; }
.cta-at { font-variant-numeric: tabular-nums; }
/* touch screens: no hover label (a tap goes straight to booking); the phone line below carries the slot */
@media (hover: none) {
  .cta-bar:hover .cta-t1, .cta-wrap:hover .cta-bar .cta-t1 { transform: none; opacity: 1; }
  .cta-bar:hover .cta-t2, .cta-wrap:hover .cta-bar .cta-t2 { transform: translateY(100%); opacity: 0; }
}

/* the metallic pill: a soft brushed base (#f5f5f3 to #e4e4e2, label stays #0b0b0b, 15:1+), a wide soft white highlight under
   the label that glides across in 3s and rests 7s (10s cycle, started 5s after the badge so they never sync), and a 1px
   silver conic ring just outside the pill, turning slowly like the badge's */
@property --cta-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.cta-bar { isolation: isolate; background: linear-gradient(180deg, #f7f7f5 0%, #e4e4e2 100%); }
.cta-bar:hover, .cta-bar:active, .cta-wrap:hover .cta-bar { background: linear-gradient(180deg, #ffffff 0%, #ececea 100%); }
.cta-bar > * { position: relative; z-index: 1; }
.cta-bar::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, .06) 41%, rgba(255, 255, 255, .25) 44%, rgba(255, 255, 255, .55) 47%,
      rgba(255, 255, 255, .8) 50%, rgba(255, 255, 255, .55) 53%, rgba(255, 255, 255, .25) 56%, rgba(255, 255, 255, .06) 59%, transparent 62%) 100% 0 / 300% 100% no-repeat;
  animation: cta-glide 10s cubic-bezier(.45, 0, .55, 1) 6.2s infinite; }
@keyframes cta-glide { 0% { background-position: 100% 0; } 30%, 100% { background-position: 0% 0; } }
.cta-bar::after { content: ""; position: absolute; inset: -1px; z-index: 0; padding: 1px; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--cta-a), #ffffff, #8a8a8a 60deg, #e6e6e6 130deg, #6b6b6b 200deg, #d4d4d4 270deg, #8a8a8a 320deg, #ffffff);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  animation: cta-spin 9s linear -3.5s infinite; }
@keyframes cta-spin { to { --cta-a: 360deg; } }
@media (prefers-reduced-motion: reduce) {
  .cta-bar::before { animation: none !important; background-position: 100% 0; }
  .cta-bar::after { animation: none !important; }
}

/* trust logos: the old results slot, same flat grey panel. The 14px mono label at the top, five wordmarks in a balanced row
   at the bottom: white at 55%, up to 90% on hover in 200ms */
.lg-s { margin: 0; padding: 0; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.lg-w { flex: none; display: flex; align-items: center; height: 32px; color: rgba(255, 255, 255, .55); white-space: nowrap; transition: color 200ms var(--ease); }
.lg-w:hover { color: rgba(255, 255, 255, .9); }
.lg-pm { font-family: var(--display); font-weight: 500; font-size: 20px; letter-spacing: -0.03em; }
.lg-zm { font-family: var(--sans); font-weight: 600; font-size: 16px; letter-spacing: .18em; text-transform: uppercase; }
.lg-vl { font-family: var(--sans); font-weight: 400; font-size: 18px; letter-spacing: .02em; }
.lg-vl b { font-weight: 600; margin-left: 4px; }
.lg-g svg { display: block; width: 64px; height: 20px; }
/* the row holds the old results strip's height (brand 24 + 8 + one figure line), so the hero grid and the CTA don't move */
@media (min-width: 601px) { .lg-s { min-height: calc(32px + var(--fig, 40px)); align-items: flex-end; } }
@media (min-width: 901px) and (max-width: 1100px) { .lg-g + .lg-g { display: none; } }
@media (max-width: 600px) {
  .lg-s { flex-wrap: wrap; justify-content: flex-start; column-gap: 24px; row-gap: 8px; }
}

/* ======================================================================
   v50b: hero load sequence (after designme.agency). Pure CSS keyframes from the moment the page parses, fill-mode
   backwards only: each element holds its first frame while it waits, then rests on the plain layout (no opacity or
   transform left behind, nothing hidden if JS fails). Text rises (16px, small rows 6px), panels unfold top down.
   Order: nav, badge, headline lines, subline, USPs, CTAs, at 60 to 70ms steps; everything is done by about 1.1s.
   ====================================================================== */
@keyframes hl-rise { 0% { opacity: .01; transform: translate3d(0, 16px, 0); } }
@keyframes hl-rise-s { 0% { opacity: .01; transform: translate3d(0, 6px, 0); } }
@keyframes rv-unfold { 0% { clip-path: inset(0 0 100% 0); opacity: .4; transform: translateY(24px); } 50% { opacity: 1; } to { clip-path: inset(0 0 0 0); opacity: 1; transform: none; } }
/* the old JS-timed fade is retired: the hero and nav are visible at rest */
.js .rise, .js.ready .rise, .js .nav, .js.ready .nav { opacity: 1; transform: none; transition: none; }
.hero .rise, .nav-in, #status, #h1 .r, #sub, .usps li, #bookRow { animation: hl-rise .55s cubic-bezier(.22, 1, .36, 1) backwards; animation-delay: calc(var(--ld, 0) * 1ms); }
.hero .rise { animation-name: rv-unfold; animation-duration: .65s; }
.nav-in, #status, .usps li { animation-name: hl-rise-s; animation-duration: .5s; }
.nav-in { --ld: 0; }
.lead.rise { --ld: 40; }
.cards.rise { --ld: 120; }
.stage.rise { --ld: 200; animation-duration: .7s; }
#status { --ld: 100; }
#h1 .r:nth-child(1) { --ld: 170; }
#h1 .r:nth-child(2) { --ld: 240; }
#h1 .r:nth-child(3) { --ld: 310; }
#sub { --ld: 380; }
.usps li:nth-child(1) { --ld: 440; }
.usps li:nth-child(2) { --ld: 500; }
.usps li:nth-child(3) { --ld: 560; }
#bookRow { --ld: 620; }
/* below 901px the headline lines are inline (a transform would not apply), so the headline rises as one */
@media (max-width: 900px) {
  #h1 .r { animation: none; }
  #h1 { animation: hl-rise .55s cubic-bezier(.22, 1, .36, 1) 170ms backwards; }
}
@media (prefers-reduced-motion: reduce) {
  .hero .rise, .nav-in, #status, #h1, #h1 .r, #sub, .usps li, #bookRow { animation: none !important; }
}

/* ======================================================================
   v50c: the hero is two panels of one height (the trust logo panel is gone, so the headline panel fills the column and
   keeps its copy centred), the phone carousel plays itself (5s, with a fill on the active line), a scroll hint sits in
   phone 1, and the trust logos move to a full width logo wall under the hero.
   ====================================================================== */
/* autoplay progress: the active line is dimmer and a brighter fill runs across it while it plays (JS sets --ap, 0 to 1) */
.pg-dot { position: relative; }
.dnav.ap .pg-dot[aria-current="true"]::before { background: rgba(255, 255, 255, .3); }
.dnav.ap .pg-dot[aria-current="true"]::after { content: ""; position: absolute; left: 4px; top: 50%; width: 16px; height: 2px; margin-top: -1px; border-radius: 1px;
  background: rgba(255, 255, 255, .85); transform-origin: 0 50%; transform: scaleX(var(--ap, 0)); pointer-events: none; }

/* scroll hint: a dark shade rising from the bottom of the screen, a flat grey pill, a chevron that bobs. Never takes a tap. */
.sh { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; height: 136px; display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 28px; pointer-events: none;
  background: linear-gradient(to top, rgba(7, 7, 7, .55), rgba(7, 7, 7, .22) 45%, rgba(7, 7, 7, 0));
  transition: opacity 400ms var(--ease), visibility 0s linear 400ms; }
.sh.off { opacity: 0; visibility: hidden; }
.sh-p { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 14px; border-radius: 999px; background: #2a2a2a;
  font-family: var(--sans); font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: 0; color: #fff; white-space: nowrap; }
.sh-p svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; animation: sh-bob 1.6s ease-in-out infinite; }
@keyframes sh-bob { 0%, 100% { transform: translateY(-1.5px); } 50% { transform: translateY(1.5px); } }
@media (max-width: 600px) { .sh { height: 112px; padding-bottom: 24px; } }

/* logo wall: the 14px mono label, then the wordmarks in a slow seamless marquee, faded at both edges. White at 50%, 90% on
   hover. The marquee stops on hover and is a still, centred row under reduced motion. */
.lw { margin-top: 64px; }
.lw-k { margin: 0 0 24px; text-align: center; font-family: var(--sans); font-weight: 400; font-size: 14px; line-height: 20px; letter-spacing: 0; color: var(--muted); }
.lw-m { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.lw-t { margin: 0; padding: 0; list-style: none; display: flex; align-items: center; width: max-content; animation: lw-run 64s linear infinite; }
.lw-t > li { margin-right: 96px; }
.lw:hover .lw-t { animation-play-state: paused; }
@keyframes lw-run { to { transform: translate3d(-50%, 0, 0); } }
.lw .lg-w { height: 48px; color: rgba(255, 255, 255, .5); }
.lw .lg-w:hover { color: rgba(255, 255, 255, .9); }
@media (max-width: 600px) { .lw { margin-top: 48px; } .lw-k { margin-bottom: 16px; } .lw-t > li { margin-right: 56px; } .lw-m { -webkit-mask: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); mask: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); } }

/* the load sequence goes on to the new pieces: the scroll hint rises with the phone, the logo wall comes in last */
.sh-p, .lw { animation: hl-rise-s .5s cubic-bezier(.22, 1, .36, 1) backwards; animation-delay: calc(var(--ld, 0) * 1ms); }
.sh-p { --ld: 620; }
.lw { --ld: 680; }
@media (prefers-reduced-motion: reduce) {
  .sh-p, .lw, .sh-p svg { animation: none !important; }
  .lw-t { animation: none; width: auto; flex-wrap: wrap; justify-content: center; gap: 8px 56px; }
  .lw-t > li { margin-right: 0; }
  .lw-t > .lw-x { display: none; }
  .lw-m { -webkit-mask: none; mask: none; }
}
/* ======================================================================
   v51a: one loading bar under the phones, reviews in the headline panel, the real logo wall, two fonts only
   (Articulat CF, Inter Display), quieter section heads (text label, one colour heading, the line under it).
   ====================================================================== */
/* 1. the carousel's loading bar: a faint 80px track, a brighter fill that runs over the 5s and holds when autoplay holds */
.pg-bar { position: relative; display: block; width: 80px; height: 2px; margin: 0 8px; border-radius: 1px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.pg-bar > i { position: absolute; inset: 0; border-radius: inherit; background: rgba(255, 255, 255, .7); transform-origin: 0 50%; transform: scaleX(0); }
.dnav.ap .pg-bar > i { transform: scaleX(var(--ap, 0)); }
@media (max-width: 600px) { .pg-bar { width: 64px; } }
@media (prefers-reduced-motion: reduce) { .pg-bar { width: 32px; } .pg-bar > i { display: none; } }

/* 2. the headline panel: copy at the top with even padding, the stats row (v52) anchored to the bottom */
@media (min-width: 901px) {
  .lead { justify-content: flex-start; padding-top: var(--lt, 48px); padding-bottom: var(--lt, 48px); }
}
@media (min-width: 901px) and (max-height: 760px) { :root { --lt: 40px; } }
@media (min-width: 901px) and (max-height: 680px) { :root { --lt: 24px; } }
/* v52: the stats row in place of the reviews strip. One row, bold white number then a grey label, no boxes or lines. Anchored
   to the bottom of the panel (margin-top: auto), left edge = the copy's. Each digit rolls up from below its own clip near the
   end of the hero load-in, landing on the exact text (the live text is the .vh copy; the rolled glyphs are aria-hidden). */
.hs { order: 9; margin: auto 0 0; padding: 32px 0 0; list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 40px; }
.hs li { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 16px; line-height: 24px; white-space: nowrap; }
.hs-n { font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.hs-l { font-weight: 400; color: var(--text-2); }
.hs-r { display: inline-flex; overflow: hidden; vertical-align: top; user-select: none; -webkit-user-select: none; }
.hs-r > i { display: block; font-style: normal; animation: hs-roll .6s cubic-bezier(.22, 1, .36, 1) backwards; animation-delay: calc(700ms + var(--k) * 45ms); }
.hs-st .hs-r { gap: 2px; align-items: center; height: 24px; }
.hs-st svg { display: block; width: 15px; height: 15px; fill: #fff; }
@keyframes hs-roll { 0% { transform: translateY(105%); opacity: 0; } 40% { opacity: 1; } }
@media (min-width: 901px) and (max-height: 620px) { .hs { display: none; } }
@media (max-width: 900px) { .hs { margin-top: 0; padding-top: 40px; } }
@media (max-width: 600px) { .hs { padding-top: 32px; gap: 12px 32px; } }
@media (prefers-reduced-motion: reduce) { .hs-r > i { animation: none !important; } }

/* 3. the logo wall: a static grid of equal cells, logos white at 50%; one pill slides to the hovered cell, its logo goes to 90% */
.lw-k { font-family: var(--sans); font-weight: 500; letter-spacing: .01em; }
.lw-g { position: relative; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; }
.lw-c { position: relative; z-index: 1; height: 80px; display: grid; place-items: center; padding: 0 12px; }
.lw-c img { display: block; max-width: 100%; height: auto; filter: brightness(0) invert(1); opacity: .5; transition: opacity 220ms cubic-bezier(.22, 1, .36, 1); }
.lw-c.on img { opacity: .9; }
.lw-hl { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 0; border-radius: 8px; background: rgba(255, 255, 255, .055);
  pointer-events: none; opacity: 0; will-change: transform, width;
  transition: opacity 150ms ease-out, transform 220ms cubic-bezier(.22, 1, .36, 1), width 220ms cubic-bezier(.22, 1, .36, 1), height 220ms cubic-bezier(.22, 1, .36, 1); }
.lw-hl.still { transition: opacity 150ms ease-out; }
@media (prefers-reduced-motion: reduce) { .lw-hl, .lw-hl.still { transition: opacity 150ms ease-out; } .lw-c img { transition: none; } }
@media (max-width: 1023px) { .lw-g { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lw-c { height: 72px; } }
@media (max-width: 600px) { .lw-c { height: 64px; padding: 0 8px; } .lw-c img { max-width: 88%; } }

/* 4. two fonts: Inter Display takes every former mono use (labels, step and card numbers, figures, footer heads) */
.cd-i, .ps-mr { font-family: var(--sans); font-size: 14px; font-weight: 500; letter-spacing: .01em; }
.pp-svg .lb { font-family: var(--sans); font-weight: 500; letter-spacing: .01em; }
.ft-h { font-family: var(--sans); font-weight: 500; letter-spacing: .01em; text-transform: none; color: #fff; }   /* v85: white */

/* 5. section heads: the label is plain lime text, the heading one colour, the line stacked under it in one grey */
.sec-k { display: block; font-family: var(--sans); font-weight: 500; letter-spacing: .01em; text-transform: none; color: #A3E635; }
.sec-k::before { content: none; display: none; }
.sec-h { display: block; }
.sec-r { justify-self: auto; max-width: 560px; margin-top: var(--s3); padding-bottom: 0; }
.sec h2 .g, .sec h2 .g.br { color: inherit; display: inline; }
.sec-sub .k, .sec .sec-sub .k { color: inherit; }
.fq .sec-sub { margin-top: var(--s3); }
.fc .sec-sub { margin-top: var(--s3); }
/* v51d. 4. results: one flat row per brand, the published figures large in Articulat CF, a thin decorative line under each
   that draws in, brand and metric in grey. Figures roll up once on view; the ghost copy holds the final width so nothing moves. */
.rr-list { display: grid; gap: var(--s1); margin: 0; padding: 0; list-style: none; }
.rr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); column-gap: var(--s5); padding: var(--s5); }
.rr-b { margin: 0; padding-top: 4px; font-family: var(--sans); font-size: 16px; line-height: 24px; font-weight: 500; color: var(--muted); }
.rr-s { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s4); }
.rr-st { margin: 0; min-width: 0; }
.rr-n { display: inline-grid; font-family: var(--display); font-weight: 500; font-size: clamp(40px, 3.4vw, 52px); line-height: 1.08; letter-spacing: -0.03em;
  color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rr-n > * { grid-area: 1 / 1; }
.rr-n .gh { visibility: hidden; }
.rr-ln { display: block; position: relative; height: 2px; margin: var(--s2) 0 var(--s2); border-radius: 2px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.rr-ln::after { content: ""; position: absolute; inset: 0; border-radius: inherit; transform-origin: left center;
  background: linear-gradient(90deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .5) 82%, #A3E635); }
.rr-m { display: block; font-family: var(--sans); font-size: 16px; line-height: 24px; color: var(--muted); }
.rr-js .rr-ln::after { transform: scaleX(0); }
.rr-js .rr.is-go .rr-ln::after { transform: none; transition: transform 1500ms cubic-bezier(.22, 1, .36, 1); transition-delay: calc(var(--j) * 140ms + 120ms); }
@media (max-width: 1023px) { .rr { grid-template-columns: minmax(0, 1fr); row-gap: var(--s3); } }
@media (max-width: 600px) {
  .rr { padding: var(--s3); row-gap: var(--s2); }
  .rr-s { grid-template-columns: minmax(0, 1fr); row-gap: var(--s3); }
  .rr-n { font-size: 40px; }
  .rr-ln { margin: 12px 0; }
}

/* v51d. 5. reviews: a stream of chat bubbles. Each message: a typing bubble (three dots), then the bubble types out letter by
   letter, then its reactions spring in. Every letter is in the flow from the start (only opacity changes), so heights are final. */
.cb { padding: var(--s6) var(--s5); }
.cb-list { display: grid; gap: var(--s3); max-width: 760px; margin: 0 auto; padding: 0; list-style: none; }
.cb-m { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: var(--s2); align-items: start; }
.cb-av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-family: var(--sans); font-size: 14px; line-height: 1; font-weight: 600;
  color: rgba(245, 245, 243, .78); background: linear-gradient(135deg, #2e2e2e, #1b1b1b); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.cb-m[data-t="2"] .cb-av { background: linear-gradient(135deg, #2b2f27, #1a1c19); }
.cb-m[data-t="3"] .cb-av { background: linear-gradient(135deg, #2a2b31, #1a1a1e); }
.cb-m[data-t="4"] .cb-av { background: linear-gradient(135deg, #312c28, #1d1a18); }
.cb-c { min-width: 0; }
.cb-h { margin: 0 0 var(--s1); display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--s1); font-family: var(--sans); line-height: 24px; }
.cb-n { font-size: 16px; font-weight: 600; color: var(--text); }
.cb-r { font-size: 14px; line-height: 20px; color: var(--muted); }
.cb-w { position: relative; display: block; width: fit-content; max-width: 100%; }
.cb-tx { margin: 0; padding: 12px var(--s2); border-radius: 4px 18px 18px 18px; background: #181818; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
  font-family: var(--sans); font-size: 16px; line-height: 24px; color: #c9c9c9; text-wrap: pretty; }
.cb-ty { position: absolute; left: 0; top: 0; display: none; align-items: center; gap: 4px; height: 48px; padding: 0 var(--s2); border-radius: 4px 18px 18px 18px;
  background: #181818; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); }
.cb-ty i { width: 6px; height: 6px; border-radius: 50%; background: #9a9a9a; animation: rvDot 900ms ease-in-out infinite; }
.cb-ty i:nth-child(2) { animation-delay: 150ms; }
.cb-ty i:nth-child(3) { animation-delay: 300ms; }
@keyframes rvDot { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-3px); opacity: 1; } }
.cb-rx { margin: var(--s1) 0 0; display: flex; flex-wrap: wrap; gap: 6px; min-height: 28px; }
.rx { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 8px; border-radius: 999px; background: rgba(255, 255, 255, .04);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); font-family: var(--sans); font-size: 14px; line-height: 20px; font-weight: 600; color: var(--text-2); }
.rx .e { font-size: 15px; line-height: 1; }
.rx .c { display: inline-block; min-width: 1ch; font-variant-numeric: tabular-nums; }
/* the sequence (JS adds .rv-js when it can play it) */
.rv-js .cb-m { opacity: 0; transform: translateY(6px); }
.rv-js .cb-m.is-in { opacity: 1; transform: none; transition: opacity 240ms var(--ease), transform 360ms var(--ease); }
.rv-js .cb-m .cb-tx { opacity: 0; }
.rv-js .cb-m.is-ty .cb-ty { display: flex; }
.rv-js .cb-m.is-tx .cb-tx { opacity: 1; transition: opacity 120ms ease-out; }
.rv-js .cb-tx .ch { opacity: 0; }
.rv-js .cb-tx .ch.on { opacity: 1; }
.rv-js .rx { opacity: 0; transform: scale(0); }
.rv-js .cb-m.is-rx .rx { animation: rxPop 520ms cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: calc(var(--i) * 110ms); }
@keyframes rxPop { from { opacity: 0; transform: scale(0); } 40% { opacity: 1; } to { opacity: 1; transform: scale(1); } }
.cb-tx .wd { white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .cb-ty i { animation: none; } }
@media (max-width: 600px) {
  .cb { padding: var(--s3) var(--s2); }
  .cb-list { gap: var(--s3); }
  .cb-m { grid-template-columns: 32px minmax(0, 1fr); column-gap: 12px; }
  .cb-av { width: 32px; height: 32px; }
}
/* v53: the headline panel's two CTAs stack, Book a call on top, both one fixed width, left aligned with the headline.
   Label left, arrow right; the label's roll grid still sizes to the wider of its two lines inside the fixed width.
   Phones keep the full width stack from above. The final CTA band (.fc-row) has its own layout and is unchanged. */
@media (min-width: 601px) {
  .lead .cta-row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .lead .cta-row .cta-wrap, .lead .cta-row .cta-bar, .lead .cta-row .wa { flex: 0 0 auto; width: 296px; }
  .lead .cta-row .cta-bar { justify-content: space-between; }
}
/* v54: the headline panel's spacing pass. One vertical rhythm on the 8pt grid, measured as the eye sees it: from a line's
   baseline (or a button's edge) to the next line's cap top, so each margin below subtracts the text's own half-leading
   (Articulat CF h1 at 1.08: cap .22em below its box top, baseline .16em above its box bottom; Inter Display 16/24: 6.2px each
   side; 14/20: 4.9px). Tight inside a group, loose between groups:
     badge 24 headline 24 subcopy 32 ticks (12 between) 48 CTAs (12 between), stats row anchored to the bottom, >= 48 clear.
   The panel's left, top and bottom insets are one value (--lt: 48, 40 on shorter windows), the bottom one measured to the
   stats glyphs. CTAs 52px tall, 296px wide; the founder photos 36px with an even 8px inset (left = top). */
@media (min-width: 901px) {
  #top .lead { --cta-h: 52px; --g2: 24px; --g3: 32px; --g4: 48px; gap: 0; padding: var(--lt, 48px) var(--lt, 48px) calc(var(--lt, 48px) - 5px); }
  #top .lead #status { margin: 0; }
  #top .lead #status + h1 { margin-top: calc(24px - .22em); margin-bottom: calc(var(--g2) - .16em - 6.2px); }
  #top .lead #sub { margin-top: 0; }
  #top .lead .usp-box { margin-top: calc(var(--g3) - 12.4px); }
  #top .lead .usps { gap: 12px; }
  #top .lead .book { margin-top: calc(var(--g4) - 6.2px); gap: 0; }
  #top .lead .cta-row { gap: 12px; }
  #top .lead .cta-row .cta-bar, #top .lead .cta-row .wa { height: var(--cta-h); }
  #top .lead .cta-row .cta-bar { --av: 36px; padding-left: calc((var(--cta-h) - var(--av)) / 2); }
  #top .lead .hs { margin-top: auto; padding-top: 40px; }
}
@media (min-width: 901px) and (max-height: 700px) { #top .lead { --g2: 16px; --g3: 24px; --g4: 40px; } }
@media (min-width: 901px) and (max-height: 680px) {
  #top .lead { --g4: 32px; padding-left: 32px; padding-right: 32px; }
  #top .lead #status + h1 { margin-top: calc(-.22em); }
}
@media (max-width: 600px) {
  #top .lead { --cta-h: 52px; gap: 0; padding: 24px 24px 19px; }
  #top .lead #status { margin: 0; }
  #top .lead #status + h1 { margin-top: calc(20px - .23em); margin-bottom: calc(16px - .17em - 6.2px); }
  #top .lead #sub { margin-top: 0; }
  #top .lead .usp-box { margin-top: calc(24px - 12.4px); }
  #top .lead .usps { gap: 12px; }
  #top .lead .book { margin-top: calc(32px - 6.2px); gap: 0; }
  #top .lead .cta-row { gap: 12px; }
  #top .lead .cta-row .cta-bar, #top .lead .cta-row .wa { height: var(--cta-h); }
  #top .lead .cta-row .cta-bar { --av: 36px; padding-left: calc((var(--cta-h) - var(--av)) / 2); }
  #top .lead .hs { margin-top: 0; padding-top: calc(32px - 4.9px - 6.2px); }
}
/* v55: the stacked CTAs get more air, and WhatsApp becomes a calm outline (ghost) button. At rest: no fill, a 1px light
   outline drawn as an inset shadow (no size or layout change), white label and icon. On hover and keyboard focus it eases
   into WhatsApp green over 450ms: a green outline, a soft green tint that sweeps in from the left (its own layer, clipped to
   the pill, so it also sweeps back out on leave), the icon turns green, and a faint green glow. The label stays white.
   Used by both WhatsApp buttons (headline panel and final CTA band); the footer's WhatsApp is a plain text link. */
.wa, .lead .cta-row .wa, .fc-row .wa { position: relative; isolation: isolate; background: transparent; background-image: none; border: 0; color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), 0 0 0 0 rgba(37, 211, 102, 0);
  transition: box-shadow 450ms cubic-bezier(.22, 1, .36, 1), background-color 450ms cubic-bezier(.22, 1, .36, 1), color 450ms cubic-bezier(.22, 1, .36, 1); }
.wa::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: rgba(37, 211, 102, .12); pointer-events: none;
  opacity: 0; clip-path: inset(0 100% 0 0 round 999px);
  transition: clip-path 500ms cubic-bezier(.22, 1, .36, 1), opacity 450ms cubic-bezier(.22, 1, .36, 1); }
.wa svg { color: #fff; transition: color 450ms cubic-bezier(.22, 1, .36, 1); }
.wa:hover, .wa:active, .wa:focus-visible, .lead .cta-row .wa:hover, .lead .cta-row .wa:focus-visible, .fc-row .wa:hover, .fc-row .wa:focus-visible {
  background: transparent; background-image: none; border: 0; color: #fff; transform: none;
  box-shadow: inset 0 0 0 1px rgba(37, 211, 102, .75), 0 0 24px -4px rgba(37, 211, 102, .22); }
.wa:hover::after, .wa:active::after, .wa:focus-visible::after { opacity: 1; clip-path: inset(0 0 0 0 round 999px); }
.wa:hover svg, .wa:active svg, .wa:focus-visible svg { color: #25D366; }
@media (prefers-reduced-motion: reduce) { .wa, .lead .cta-row .wa, .fc-row .wa, .wa::after, .wa svg { transition: none; } }
/* the gap between the stacked CTAs: 12 -> 16 (desktop and phones) */
@media (min-width: 901px) { #top .lead .cta-row { gap: 16px; } }
@media (max-width: 600px) {
  #top .lead .cta-row { gap: 16px; }
  /* phones: headline to subcopy 24, subcopy to ticks 32 (same visual measure as v54) */
  #top .lead #status + h1 { margin-bottom: calc(24px - .17em - 6.2px); }
  #top .lead .usp-box { margin-top: calc(32px - 12.4px); }
}
/* v56 (1): WhatsApp keeps the v55 outline at rest and on hover fills full WhatsApp green. The fill is a duplicate of the label
   (.wa-fx: #25D366 with a #0b0b0b label and icon) clipped from the left, so the sweep edge carries the colour change and the
   label is never light on green or dark on dark mid sweep. #0b0b0b on #25D366 is 9.93:1, white on #25D366 is 1.98:1.
   Same easing, 480ms both ways; the outline turns green and a subtle glow comes in. Reduced motion: instant. */
.wa::after { content: none; }
.wa-fx { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: inherit; gap: inherit; padding: inherit;
  border-radius: inherit; background: #25D366; color: #0b0b0b; pointer-events: none; white-space: nowrap;
  clip-path: inset(0 100% 0 0 round 999px); transition: clip-path 480ms cubic-bezier(.22, 1, .36, 1); }
.wa .wa-fx svg, .wa:hover .wa-fx svg, .wa:focus-visible .wa-fx svg { color: #0b0b0b; }
.wa:hover svg, .wa:active svg, .wa:focus-visible svg { color: #fff; }
.wa:hover .wa-fx, .wa:active .wa-fx, .wa:focus-visible .wa-fx { clip-path: inset(0 0 0 0 round 999px); }
.wa:hover, .wa:active, .wa:focus-visible, .lead .cta-row .wa:hover, .lead .cta-row .wa:focus-visible, .fc-row .wa:hover, .fc-row .wa:focus-visible {
  box-shadow: inset 0 0 0 1px #25D366, 0 0 20px -6px rgba(37, 211, 102, .3); }
@media (prefers-reduced-motion: reduce) { .wa-fx { transition: none; } }

/* v56 (2): the hero right (phone) panel gets the wider share (45/55, was 60/40) so the phones sit closer to the headline.
   Between 901 and 1199 wide the split is 50/50 so the headline keeps its three lines. */
@media (min-width: 901px) { .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 1200px) { .hero { grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); } }

/* v56 (3): the work carousel is an endless ring of six phones. Every phone sits in the same grid cell, centred; JS places
   each one by its wrapped offset from the active page (translateX), so the ring has no ends and never rewinds. The side
   phones are scaled to .9 and dimmed by a dark overlay; phones two or more out are hidden (they sit outside the panel). */
.track { display: grid; place-items: center; transform: none !important; }
.track > .device { grid-area: 1 / 1; transform-origin: 50% 50%; will-change: transform; filter: none !important; opacity: 1 !important; transition: none; }
.track > .device::after { content: ""; position: absolute; inset: 0; z-index: 6; border-radius: inherit; background: #000; opacity: var(--dm, 0); pointer-events: none; }
.track > .device:not(.on):hover::after { opacity: calc(var(--dm, .5) - .15); }
.track > .device .peek-btn { z-index: 7; }
.wk-sc { position: absolute; inset: 0; z-index: 1; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: none; border-radius: inherit; background: #fff; }
.wk-sc::-webkit-scrollbar { display: none; }
.wk-sc img { display: block; width: 100%; height: auto; }
.scr.wk-s .isl, .scr.wk-s .home { z-index: 5; }
.scr.wk-s .home { background: rgba(17, 17, 18, .28); }
@media (max-width: 600px) {
  /* phone: one phone centred, 28px of each neighbour peeking in */
  .track > .device { width: calc(100% - 2 * (var(--cg) + 28px)); }
}
/* v57 (1): the hero stats row stays on one line at every desktop width from 1200. The split is 47/53 from 1280 (50/50 from
   901 to 1279, so 1200 to 1279 has room too), the row is 14px with 28px between items (was 16px, 40px), the stars 12px, and
   each item never breaks. Between 901 and 1199 the row may wrap as whole items (the rating drops to its own line). */
@media (min-width: 1200px) { .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 1280px) { .hero { grid-template-columns: minmax(0, 47fr) minmax(0, 53fr); } }
@media (min-width: 901px) {
  .hs { flex-wrap: wrap; column-gap: 28px; row-gap: 8px; }
  .hs li { flex: none; gap: 6px; font-size: 14px; line-height: 20px; white-space: nowrap; }
  .hs-st .hs-r { gap: 1px; height: 20px; }
  .hs-st svg { width: 12px; height: 12px; }
}
@media (min-width: 1200px) { .hs { flex-wrap: nowrap; } }

/* v57 (2): the work carousel. The centre phone is a touch larger (less air above it and around the controls), the side phones
   sit further out so only a ~92px sliver of each shows inside the panel (JS: PEEK), and each side phone is dimmed by a
   #0b0b0b layer at 52% that eases with the slide itself (its opacity is driven per frame from the same eased position). */
@media (min-width: 1200px) {
  .stage { padding-top: 40px; }
  .stage-cap { padding-top: 8px; padding-bottom: 20px; }
}
@media (min-width: 1200px) and (max-height: 760px) {
  .stage { padding-top: 32px; }
  .stage-cap { padding-bottom: 16px; }
}
.track > .device::after { background: #0b0b0b; }
.track > .device.on::after { pointer-events: none; }

/* v57 (3): no lime text anywhere. Every section label is a grey all caps eyebrow (the subheader grey, Inter Display 14 / 500,
   .08em tracking); the nav's Free tag is a neutral pill; the FAQ open icon is neutral. Lime stays only on small non-text
   accents: the hero ticks, the badge and live dots, the drawing dots, the Winner ticks, the card hover hairline and the tip of
   the results bars. */
.sec-k, .lw-k { font-family: var(--sans); font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(245, 245, 243, .5); }
.nav-free { background: rgba(255, 255, 255, .08); color: rgba(245, 245, 243, .72); }
.fq-i.open .fq-x { background: rgba(255, 255, 255, .08); color: #fff; }
.stats .n, .feed .n { color: #fff; }

/* ======================================================================
   v66: page structure. LocalCan's frame with Altura's hairline grid, on the dark page.
   - The frame: one 1px line colour (--ln). Two side lines run from the nav to the foot of the page, 8px outside the content
     column (the 1280 column at 1440 sits at 80 to 1360; the lines' inner edges at 72 and 1368). Every section starts with a
     line that runs from side line to side line (a clean T at each end), and every heading block ends with one, so each
     section reads as a heading cell over a content cell. Heading text sits 32px in from the side lines.
   - Panels that remain (hero, reviews, work, contact, the pinned process tile) sit exactly 8px inside every line they face,
     #121212, 6px corners: standalone panels are rounded.
   - Hairline grid blocks (logo wall, problem cells, results rows, FAQ rows) take the full frame width: their outer edges ARE
     the side lines, the heading line above and the next section line below, so no line is ever doubled. Inside, cells are
     split by the same hairline; corners are square; tiny #444 squares (5px, odd so they centre on a 1px line) sit on the
     block's four outer corner points. Lines never move: the scroll reveal on grid cells moves the cell's content, not the cell.
   - The sticky nav is the frame's top edge: 80% page colour, blurred, its own bottom line, exactly between the side lines.
   - Phones (under 640): no side lines; section lines run edge to edge; panels keep the 24px gutter; grid blocks run edge
     to edge with their cells padded by the gutter, and the corner squares go (they would sit on the screen edge).
   ====================================================================== */
:root { --ln: #1e1e1e; --sq: #444; --navh: 72px; --fw: calc(min(var(--max), 100% - 2 * var(--gutter)) + 18px); }
@media (min-width: 901px) { :root { --navh: var(--nav); } }
@media (max-width: 600px) { :root { --navh: 64px; } }

/* the frame: nav, main and footer share one width, so their side lines are one line */
header.nav, main.wrap, footer.ft { width: var(--fw); max-width: none; margin-left: auto; margin-right: auto; }
@supports (width: round(down, 1px, 2px)) { header.nav, main.wrap, footer.ft { width: round(down, var(--fw), 2px); } }
main.wrap { padding: 0; border-left: 1px solid var(--ln); border-right: 1px solid var(--ln); }
header.nav { position: sticky; top: 0; z-index: 60; border-left: 1px solid var(--ln); border-right: 1px solid var(--ln);
  background: rgba(11, 11, 11, .8); -webkit-backdrop-filter: blur(16px) saturate(1.1); backdrop-filter: blur(16px) saturate(1.1); box-shadow: inset 0 -1px 0 var(--ln); }
header.nav > .nav-in { max-width: none; padding: 0 var(--s4); }
header.nav .brand, header.nav .nav-links { background: none; box-shadow: none; }   /* the old page-colour backing would show on the glass */
footer.ft { padding: var(--s8) 0 var(--s5); border-left: 1px solid var(--ln); border-right: 1px solid var(--ln); box-shadow: inset 0 1px 0 var(--ln); }
footer.ft > .wrap { max-width: none; padding: 0 var(--s4); }

/* sections: a line at the top (side line to side line), content 8px in from the side lines */
main.wrap > section { margin: 0; padding: 0 8px 8px; border-top: 1px solid var(--ln); scroll-margin-top: calc(var(--navh) - 1px); }
main.wrap > section.hero { border-top: 0; padding-top: 8px; }
@media (min-width: 901px) { main.wrap > section.hero { height: calc(var(--hero-h) + 16px); } }
.sec, .rv-sec, .fc-sec { padding-top: 0; }
.sec { padding-bottom: 8px; }

/* heading cells: the full frame width, text 32px in, a line under them, the content 8px below that line */
.sec h2 { line-height: round(nearest, 1.04em, 1px); }
main.wrap .sec-h { margin: 0 -8px 8px; padding: 96px var(--s4) 56px; border-bottom: 1px solid var(--ln); }
@media (min-width: 1024px) {
  main.wrap .sec-h { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: end; column-gap: var(--s8); }
  main.wrap .sec-r { justify-self: end; max-width: 440px; margin-top: 0; padding-bottom: 4px; }
}
@media (max-width: 900px) { main.wrap .sec-h { padding: 72px var(--s4) 40px; } }

/* hairline grid blocks: full frame width, square corners, the corner squares on the outer corner points */
.lw-g, .pp-grid, .rr-list, .fq-ls { position: relative; margin-left: -8px; margin-right: -8px; }
.lw-g::after, .pp-grid::after, .rr-list::after, .fq-ls::after { content: ""; position: absolute; z-index: 3; inset: -3px; pointer-events: none;
  background: linear-gradient(var(--sq), var(--sq)) left top / 5px 5px no-repeat, linear-gradient(var(--sq), var(--sq)) right top / 5px 5px no-repeat,
    linear-gradient(var(--sq), var(--sq)) left bottom / 5px 5px no-repeat, linear-gradient(var(--sq), var(--sq)) right bottom / 5px 5px no-repeat; }
/* a grid block's bottom edge is the next section's line: the block's section paints over it so the squares stay whole */
main.wrap > .lw, main.wrap > .pp-sec, main.wrap > .rs-sec, main.wrap > .fq-sec { position: relative; z-index: 1; padding-bottom: 0; }
main.wrap > .lw { z-index: 2; }   /* over the problem section, itself a grid block section */
main.wrap .pp-grid, main.wrap .rr-list, main.wrap .fq-ls { margin-top: -8px; }   /* cancels the heading cell's 8px panel seat */
/* grid cells reveal their content; the cell (and its hairline) stays put */
.js .pp-grid > .sr, .js .rr-list > .sr, .js .fq-ls > .sr { opacity: 1; transform: none; }
.js .pp-grid > .sr > *, .js .rr-list > .sr > *, .js .fq-ls > .sr > * { opacity: 0; transform: translateY(10px); }
.js .pp-grid > .sr.on > *, .js .rr-list > .sr.on > *, .js .fq-ls > .sr.on > * { opacity: 1; transform: none;
  transition: opacity 400ms cubic-bezier(.22, 1, .36, 1), transform 400ms cubic-bezier(.22, 1, .36, 1); transition-delay: calc(var(--i, 0) * 70ms); }
@media (prefers-reduced-motion: reduce) { .js .pp-grid > .sr > *, .js .rr-list > .sr > *, .js .fq-ls > .sr > * { opacity: 1 !important; transform: none !important; transition: none !important; } }

/* panels: #121212 so they read against the lines */
.panel, .pn, .stage-cap { background-color: #121212; }

/* hero: 8px under the nav line, 8px over the line below it (the hero still ends at the fold) */

/* logo wall: the label is the heading cell; 7 x 3 cells (3 across under 1024), logos centred, the pill 8px inside the cell */
.lw { animation: none; }
.lw-k { margin: 0 -8px; padding: 40px var(--s4); border-bottom: 1px solid var(--ln); }
.lw-k, .lw-c img { animation: hl-rise-s .5s cubic-bezier(.22, 1, .36, 1) backwards; animation-delay: 680ms; }
.lw-c { height: 96px; border-right: 1px solid var(--ln); border-bottom: 1px solid var(--ln); }
.lw-g > li:nth-of-type(7n) { border-right: 0; }
.lw-g > li:nth-last-of-type(-n+7) { border-bottom: 0; }
.lw-hl { border-radius: 4px; background: rgba(255, 255, 255, .04); }
@media (max-width: 1023px) {
  .lw-c { height: 80px; }
  .lw-g > li:nth-of-type(7n) { border-right: 1px solid var(--ln); }
  .lw-g > li:nth-of-type(3n) { border-right: 0; }
  .lw-g > li:nth-last-of-type(-n+7) { border-bottom: 1px solid var(--ln); }
  .lw-g > li:nth-last-of-type(-n+3) { border-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) { .lw-k, .lw-c img { animation: none !important; } }

/* problem: three cells sharing hairlines; the drawings' fill follows the cell (page colour, a faint tint on hover) */
.pp-grid { gap: 0; }
.pp-grid > .cd { border-radius: 0; background: transparent; }
.pp-grid > .cd + .cd { border-left: 1px solid var(--ln); }
.pp-grid > .cd:hover { background-color: rgba(255, 255, 255, .02); }   /* reads #101010 on the page */
.pp-svg .fc { fill: #0b0b0b; }
.pp-grid .cd:hover .pp-svg .fc { fill: #101010; }
@media (max-width: 900px) { .pp-grid > .cd + .cd { border-left: 0; border-top: 1px solid var(--ln); } }
/* the drawing slot keeps its 4:3 but on a whole pixel, so the lines under it land on whole pixels at every width */
@media (min-width: 901px) { @supports (height: round(down, 1px, 1px)) { .pp-grid .pp-art { aspect-ratio: auto; height: round(down, calc(((100cqi + 16px) / 3 - 64px) * .75), 1px); } } }

/* results: one row per brand, split by hairlines */
.rr-list { gap: 0; }
.rr-list > .rr { border-radius: 0; background: transparent; padding: var(--s5) var(--s4); }
.rr-list > .rr + .rr { border-top: 1px solid var(--ln); }
.rr-n { line-height: round(nearest, 1.08em, 1px); }

/* FAQ: the standard heading cell over the rows; rows split by hairlines */
.fq-ls { gap: 0; }
.fq-ls > .fq-i { border-radius: 0; background: transparent; transition: background-color 200ms var(--ease); }
.fq-ls > .fq-i + .fq-i { border-top: 1px solid var(--ln); }
.fq-ls > .fq-i:hover { background-color: #0f0f0f; }
.fq-b { border-radius: 0; }
.fq-b:focus-visible { outline-offset: -2px; }

/* process: on desktops the head, the words and the tile pin under the nav. The pinned stage is a heading cell, its line, and
   the tile seated 8px under that line, 8px in from the side line and 8px over the stage's foot, which docks on the next
   section's line when the pin lets go. On a pinned screen the head line never moves. Stacked (phones, tablets, short screens,
   reduced motion): the head cell, its line, then the cards with the usual air under the last caption. */
main.wrap > .ps-sec { padding-bottom: 64px; }
@media (min-width: 1024px) and (min-height: 640px) and (prefers-reduced-motion: no-preference) {
  .js main.wrap > .ps-sec { padding-top: 0; padding-bottom: 0; }
  .js .ps-st { top: var(--navh); height: calc(100vh - var(--navh)); justify-content: flex-start; padding: 0 0 8px; }
  .js .ps-st > .sec-h { flex: 1 0 auto; margin-bottom: 8px; padding-top: 56px; padding-bottom: 40px; align-content: end; }
  .js .ps-bd { flex: 0 1 600px; max-height: 600px; }
  .js .ps-tx { padding-left: var(--s3); }
}

/* reviews, contact: panels seated 8px under the head line and 8px over the next line */
main.wrap > .rv-sec { padding-bottom: 8px; }
main.wrap > .fc-sec { padding-top: 8px; padding-bottom: 8px; }

/* phones: no side lines, section lines edge to edge, panels on the gutter, grid blocks edge to edge, no corner squares */
@media (max-width: 639.98px) {
  header.nav, main.wrap, footer.ft { width: 100%; border-left: 0; border-right: 0; }
  header.nav > .nav-in, footer.ft > .wrap { padding: 0 var(--gutter); }
  main.wrap > section { padding-left: var(--gutter); padding-right: var(--gutter); }
  main.wrap .sec-h, .lw-k { margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); padding-left: var(--gutter); padding-right: var(--gutter); }
  main.wrap .sec-h { padding-top: 56px; padding-bottom: 32px; }
  .lw-k { padding-top: 32px; padding-bottom: 32px; }
  .lw-g, .pp-grid, .rr-list, .fq-ls { margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); }
  .lw-g::after, .pp-grid::after, .rr-list::after, .fq-ls::after { content: none; }
  .lw-c { height: 64px; }
  .pp-grid > .cd, .rr-list > .rr { padding-left: var(--gutter); padding-right: var(--gutter); }
  .rr-list > .rr { padding-top: var(--s4); padding-bottom: var(--s4); }
  .fq-b { padding-left: var(--gutter); padding-right: var(--s2); }
  .fq-a p { padding-left: var(--gutter); padding-right: var(--s5); }
  main.wrap > .ps-sec { padding-bottom: 56px; }
}

/* ======================================================================
   v67: the hero gets the Artemis container. One grey container (#1c1c1c, a 6% white 1px inner border, 10px corners) is
   seated 8px inside the frame lines (side lines, the nav line, the line below); inside it, 8px of padding and an 8px gap
   hold the two hero panels, now the page colour (#0b0b0b) with their 6px corners. The section's height is unchanged, so
   the panels give up the 16px (8 top + 8 bottom) and the hero still ends at the fold. The container is a pseudo layer under
   the panels, so the hero DOM and JS are untouched.
   Block corner squares: 6px at #5a5a5a. 6 is even, so on a 1x screen a square can only sit 2px one side of the 1px line
   and 3px the other (0.5px off centre); on 2x screens a half-pixel shift centres it exactly (3px either side of the line).
   ====================================================================== */
:root { --sq: #5a5a5a; --hc: #1c1c1c; }
main.wrap > section.hero { position: relative; padding: 16px; gap: 8px; }
main.wrap > section.hero::before { content: ""; position: absolute; inset: 8px; z-index: 0; border-radius: 10px; pointer-events: none;
  background: var(--hc); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
  animation: hl-rise-s .5s cubic-bezier(.22, 1, .36, 1) backwards; }
main.wrap > section.hero > * { position: relative; z-index: 1; }
main.wrap > section.hero .col { gap: 8px; }
.hero .panel, .hero .stage-cap { background-color: #0b0b0b; }
@media (prefers-reduced-motion: reduce) { main.wrap > section.hero::before { animation: none; } }
@media (max-width: 639.98px) {
  main.wrap > section.hero { padding: 16px calc(var(--gutter) + 8px); }
  main.wrap > section.hero::before { inset: 8px var(--gutter); }
}
.lw-g::after, .pp-grid::after, .rr-list::after, .fq-ls::after { inset: -3px -4px -4px -3px;
  background: linear-gradient(var(--sq), var(--sq)) left top / 6px 6px no-repeat, linear-gradient(var(--sq), var(--sq)) right top / 6px 6px no-repeat,
    linear-gradient(var(--sq), var(--sq)) left bottom / 6px 6px no-repeat, linear-gradient(var(--sq), var(--sq)) right bottom / 6px 6px no-repeat; }
@media (min-resolution: 2dppx) { .lw-g::after, .pp-grid::after, .rr-list::after, .fq-ls::after { transform: translate(-.5px, -.5px); } }

/* ======================================================================
   v68: the hero container fills the hero cell. The grey (#1c1c1c) runs from side line to side line and from the nav's
   line down to the section line under the hero: no dark gap, no border of its own, square corners (it sits on the lines).
   The cell's lines are left as they are (#1e1e1e): against the grey they simply merge into its edge, so the side lines run
   straight past the hero with no step, and the grey reads as the cell itself. No corner squares on the hero cell: the
   squares mark the corners of the open hairline grids, and the hero is a filled cell (none sit on the nav line either).
   Inside, the two panels (#0b0b0b, 6px corners) sit 8px in from every line, 8px apart. The section's height is unchanged,
   so the panels get back the 16px the v67 gap took. Phones: the grey runs edge to edge between the nav line and the section
   line, the panels stay on the 24px gutter.
   ====================================================================== */
main.wrap > section.hero { padding: 8px; }
main.wrap > section.hero::before { inset: 0; border-radius: 0; box-shadow: none; animation-name: hc-in; }   /* a fade only: a rise would open a seam on the lines */
@keyframes hc-in { 0% { opacity: .01; } }
@media (max-width: 639.98px) {
  main.wrap > section.hero { padding: 8px var(--gutter); }
  main.wrap > section.hero::before { inset: 0; }
}

/* ======================================================================
   v69: hero tweaks.
   1. The hero grey is a tad darker: #1c1c1c -> #171717 (still clearly lifted off the #0b0b0b panels inside it).
   2. (JS) The side phones sit 48px from the centre phone (was ~90), and the slide is longer and softer (820ms on the page
      easing; translate, scale and dimming all ride the one eased position, per frame).
   3. The Shopify Partner badge answers the pointer: a soft light sweep crosses the pill under the label, the pill lifts 1px,
      its ring brightens, and the bag tilts a touch and tints Shopify green (icon only; the label stays white). 450ms on the
      page easing. Reduced motion: no sweep, lift or tilt, just the ring, fill and icon colour. The badge is a plain line
      of text (not focusable), so there is no focus state to match.
   ====================================================================== */
:root { --hc: #171717; }
/* ======================================================================
   v70: the Shopify Partner badge stays still on hover (Dylan: "dont make the partner pill move just give it a nice
   shimmer when you hover"). The v69 lift, bag tilt, green icon tint and ring tint are gone; nothing on the pill, bag or
   label transforms. Hover runs one soft light sweep (a narrow white diagonal band, peak 12%) across the pill under the
   label, left to right in 700ms, clipped to the rounded shape. It plays once per hover (no loop) and restarts on the next
   one. The ring brightens a touch, neutral white only. Reduced motion: no sweep, just the neutral ring.
   The side phones' dim layer goes from #0b0b0b at 52% to 60% (JS), still driven per frame from the slide position.
   ====================================================================== */
/* ======================================================================
   v71: the Shopify Partner badge shimmer follows the pointer (Dylan: "i meant something more on the mouse right so its
   kind of attached to the mouse movement?"). The v70 one-shot sweep is gone. A soft radial white highlight (about 80px
   across, 14% white at its centre, falling to 0) sits under the label at the pointer, clipped to the pill, and the 1px ring
   lights up nearest the pointer (.sp-glow: a brighter white ring masked by the same radial at --x --y). The script sets
   --x / --y on the pill from pointermove, eased (lerp .2 per frame, one rAF at a time, stopped once settled), starting at
   the entry point. Both fade in and out over 250ms. Nothing moves or changes colour; the slow lime ring is untouched.
   Mouse / pen with a fine hover pointer only. Reduced motion: no tracking, a static faint neutral brighten.
   ====================================================================== */
.hero .status { --x: 50%; --y: 50%; overflow: hidden; }
.hero .status::before { content: ""; position: absolute; inset: 0; width: auto; height: auto; z-index: -1; border-radius: inherit; box-shadow: none; pointer-events: none;   /* the old 6px dot sizing is reset */
  background: radial-gradient(circle 40px at var(--x) var(--y), rgba(255, 255, 255, .14), rgba(255, 255, 255, .07) 45%, rgba(255, 255, 255, .02) 75%, rgba(255, 255, 255, 0));
  opacity: 0; transition: opacity 250ms cubic-bezier(.22, 1, .36, 1); }
.hero .status .sp-glow { position: absolute; inset: 0; padding: 1px; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(circle 44px at var(--x) var(--y), rgba(255, 255, 255, .6), rgba(255, 255, 255, .22) 50%, rgba(255, 255, 255, 0));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  transition: opacity 250ms cubic-bezier(.22, 1, .36, 1); }
.status .sp-glow { display: none; }
.hero .status .sp-glow { display: block; }
@media (hover: hover) and (pointer: fine) {
  .hero .status:hover::before, .hero .status:hover .sp-glow { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero .status::before { background: radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02) 70%, rgba(255, 255, 255, 0)); transition: none; }
  .hero .status .sp-glow { background: rgba(255, 255, 255, .14); transition: none; }
}
/* ======================================================================
   v72: the problem and process sections take the hero's cell treatment (Dylan: "for the how we work section would it make
   sense to do the same kind of look as the hero? the 2 panels? perhaps the problem section would be grey with those 3
   panels being the inner dark?"). Same approach and variables as the hero (v68/v69): the content cell under the heading
   line is grey (--hc, #171717) from side line to side line and from the heading line down to the next section line,
   square, no border of its own; inside, the panels (#0b0b0b, 6px corners) sit 8px in from every line and 8px apart.
   The heading cells above stay dark, as the hero's nav cell does.
   1. Problem: the v66 hairline cells and the block's corner squares are gone. The three cards are dark panels; their
      content keeps its old place (8px seat + 24px padding = the old 32px), so the drawing slots keep their exact height
      and the drawings their exact size. The drawings' fill (.fc) follows the panel: #0b0b0b, #0f0f0f on hover (the
      panel lightens to #0f0f0f, nothing moves, no lime).
   2. Process, pinned (desktops): the grey is a layer under the words and the tile (.ps-bd::before, 8px out on every side),
      so it rides the sticky stage: from the heading line to the stage's foot, which is the viewport's foot while pinned
      and docks on the results line when the pin lets go. The words sit on a dark panel (48px padding, as the hero's
      headline panel) and the split follows the hero's (47 / 53 from 1280, halves below), 8px apart.
      Stacked (phones, tablets, short screens, reduced motion): the grey cell holds the three cards as dark panels,
      tile on top (8px in) and caption under it, 8px apart, the grey ending on the results line.
   Phones follow the hero: the grey runs edge to edge between the lines, the panels sit on the 24px gutter.
   ====================================================================== */
.pp-grid { padding: 8px; gap: 8px; background: var(--hc); }
.pp-grid::after { content: none; }
.pp-grid > .cd { padding: 24px; border-radius: 6px; background-color: #0b0b0b; }
.pp-grid > .cd + .cd { border-left: 0; border-top: 0; }
.pp-grid > .cd:hover { background-color: #0f0f0f; }
.pp-grid .cd:hover .pp-svg .fc { fill: #0f0f0f; }
@media (max-width: 900px) { .pp-grid > .cd + .cd { border-top: 0; } }

main.wrap > .ps-sec { padding-bottom: 0; }
.ps-bd { position: relative; margin: -8px -8px 0; padding: 8px; background: var(--hc); }
.ps-grid { gap: 8px; }
.ps-grid > .ps-c { padding: 8px; border-radius: 6px; background-color: #0b0b0b; }
.ps-grid .ps-cap { padding: 24px 16px 16px; }
@media (max-width: 900px) and (min-width: 601px) { .ps-grid .ps-cap { padding: 16px 16px 16px 0; } }
@media (min-width: 1024px) and (min-height: 640px) and (prefers-reduced-motion: no-preference) {
  .js .ps-bd { margin: 0; padding: 0; background: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 8px; }
  .js .ps-bd { isolation: isolate; }
  .js .ps-bd::before { content: ""; position: absolute; inset: -8px; z-index: -1; pointer-events: none; background: var(--hc); }
  .js .ps-tx { padding: 48px; border-radius: 6px; background-color: #0b0b0b; }
  .js .ps-grid > .ps-c { padding: 0; border-radius: 0; background: none; }
  .js .ps-grid .ps-cap { padding: 0; }
}
@media (min-width: 1280px) and (min-height: 640px) and (prefers-reduced-motion: no-preference) {
  .js .ps-bd { grid-template-columns: minmax(0, 47fr) minmax(0, 53fr); }
}
@media (max-width: 639.98px) {
  .pp-grid { padding: 8px var(--gutter); }
  .pp-grid > .cd { padding: 20px; }
  .ps-bd { margin: -8px calc(var(--gutter) * -1) 0; padding: 8px var(--gutter); }
}
/* v73: the Shopify Partner badge (hero and footer) and other small UI chips can't be selected, dragged or long-press called out
   (Dylan: "make the shopify badge that shimmers not type because i dont want to be able to highlight"); a plain arrow cursor */
.status, .status *, .nav-free, .stage-cap, .stage-cap *, .ps-ix, .ps-ix *, .cd-i, .ps-ui, .ps-ui *, .ps-pin, .ps-pin * {
  -webkit-user-select: none; user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; }
.status, .status *, .ps-ix, .cd-i, .ps-ui, .ps-ui *, .ps-pin, .ps-pin *, .stage-cap { cursor: default; }
/* ======================================================================
   v74: How we work is ONE full screen cell, like the hero (Dylan: "with the how we work section that the title is in the
   panel too and the section fills the screen like the hero sticky to scroll?"). The separate heading cell and its line are
   gone: the label, heading and sub open the left dark panel. Under them, pushed to the panel's foot, the 01 02 03 index,
   the crossfading phase words and a three segment progress bar that fills with the scroll through each phase (white on a
   faint track, no lime). The words column holds as much as it can, so the split is 45 / 55 from 1280 (halves below).
   Pinned (desktops 1024+ wide, 640+ tall, motion allowed): the sticky stage IS the grey cell (--hc, #171717): from the nav's
   line to the viewport's foot, side line to side line, 8px of grey around and between the two #0b0b0b panels (6px corners),
   so each panel is exactly 100vh - nav - 16px tall. The run is three stage heights (two of scroll for the three phases);
   the stage docks on the results line when the pin lets go. Stacked (phones, tablets, short screens, reduced motion): the
   grey cell runs from the section line to the results line, a dark header panel (label, heading, sub), then the three phase
   panels (tile on top, words under it), 8px apart; phones follow the hero (grey edge to edge, panels on the 24px gutter).
   ====================================================================== */
.ps-bd { margin: 0 -8px; }
.ps-hd { margin: 0 0 8px; padding: 32px 24px; border-radius: 6px; background-color: #0b0b0b; }
.ps-hd .sec-k { margin: 0 0 var(--s2); }
.ps-hd h2 { max-width: 14em; }
.ps-hd .sec-sub { margin: var(--s2) 0 0; max-width: 440px; }
.ps-pr { display: none; }
@media (max-width: 639.98px) {
  .ps-bd { margin: 0 calc(var(--gutter) * -1); }
  .ps-hd { padding: 32px 24px; }
}
@media (min-width: 1024px) and (min-height: 640px) and (prefers-reduced-motion: no-preference) {
  .js main.wrap > .ps-sec { padding: 0; }
  .js .ps-dk { height: calc((100vh - var(--navh)) * 3); }
  .js .ps-st { top: var(--navh); height: calc(100vh - var(--navh)); display: block; padding: 8px; background: var(--hc); }
  .js .ps-bd { height: 100%; max-height: none; margin: 0; isolation: auto; }
  .js .ps-bd::before { content: none; }
  .js .ps-tx { display: flex; flex-direction: column; justify-content: space-between; gap: var(--s4); min-height: 0; padding: 40px; }
  .js .ps-hd { margin: 0; padding: 0; border-radius: 0; background: none; }
  .js .ps-hd h2 { font-size: clamp(36px, 3vw, 44px); }
  .js .ps-hd .sec-sub { margin-top: var(--s3); }
  .js .ps-ph { min-height: 0; }
  .js .ps-ix { margin: 0 0 var(--s3); }
  .js .ps-grid .ps-cap { max-width: 460px; }
  .js .ps-grid .cd-t { margin: 0 0 var(--s1); font-size: 28px; line-height: 36px; }
  .js .ps-grid .cd-p { max-width: 440px; }
  .js .ps-pr { display: flex; gap: 6px; margin-top: var(--s4); }
  .ps-pr i { position: relative; flex: 1; height: 2px; border-radius: 1px; background: rgba(255, 255, 255, .12); overflow: hidden; }
  .ps-pr i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(255, 255, 255, .9);
    transform: scaleX(var(--f, 0)); transform-origin: left; }
  .js .ps-pin .ps-tile { border-radius: 6px; }
}
@media (min-width: 1280px) and (min-height: 640px) and (prefers-reduced-motion: no-preference) {
  .js .ps-bd { grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); }
}
@media (min-width: 1440px) and (min-height: 760px) and (prefers-reduced-motion: no-preference) {
  .js .ps-tx { padding: 48px; }
}
/* ======================================================================
   v75 (Dylan's tweaks on v74):
   1. The step progress bar is driven by the script: each segment holds an inner fill (<b>) that the frame loop scales
      (scaleX, from the left) toward the scroll progress through the pin, eased per frame. No CSS transition on it.
   2. The pinned mock cards scale up to fill more of the full height tile (--pz, set by the script on resize: up to 1.28,
      keeping at least 48px to the tile's sides and 64px top and bottom, which covers the 16px parallax drift). A transform
      on DOM and SVG, so text and lines stay vector sharp.
   3. Sub copy is one colour: the white highlight spans in the section subs and the step copy are gone (markup).
   4. Problem and How we work meet as ONE grey cell: the section line between them is gone and the problem grid drops its
      bottom seat, so the dark panels across the join are one 8px seat apart, as every other pair of panels.
   ====================================================================== */
main.wrap > .ps-sec { border-top: 0; scroll-margin-top: var(--navh); }
main.wrap > .pp-sec .pp-grid { padding-bottom: 0; }
.ps-pr i::after { content: none; }
.ps-pr b { position: absolute; inset: 0; border-radius: inherit; background: rgba(255, 255, 255, .9); transform: scaleX(0); transform-origin: left; }
.ps-pc .ps-ui { transform: translate(-50%, -50%) scale(var(--pz, 1)); }
/* ======================================================================
   v76: Reviews as a Slack window rising out of the grey cell (see R1 at the top of the file).
   - The cell: the hero's grey (--hc) from the heading line to the next section line, side line to side line, square, no
     border; it crops the window (overflow hidden), so the window's foot simply ends at the section line.
   - The window: 84% of the cell (max 1120), centred, 64px under the cell's top, 48px taller than what shows. An 8px #050505
     bezel with 16px top corners holds two panes (sidebar #121212, main #151515, 10px corners, 8px apart).
   - Type is Slack desktop's, scaled so the smallest text is 14px. Greys only (no blue links); accents are non-text.
   - Phones (under 640): the same DOM becomes Slack's phone channel view on a ~340px screen with a 6px bezel.
   ====================================================================== */
main.wrap > .rv-sec { padding-bottom: 0; }
.sk-cell { --vis: 552px; --top: 40px; position: relative; height: calc(var(--top) + var(--vis) + 8px); margin: -8px -8px 0; padding: 8px; overflow: hidden; background: var(--hc); }
/* v77: the process tile's dark silk panel, seated 8px inside the grey cell with 6px corners. The texture is the How we work
   shader (same shared WebGL renderer, variant 0, its clock at 0.6x so the folds drift slower); the gradient is its fallback.
   The window rises out of the panel and the panel's bottom edge crops it. */
.sk-pan { position: relative; height: 100%; border-radius: 6px; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 90% at 85% 10%, #343434 0%, #222 35%, #151515 75%, #111 100%); }
.sk-pan::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 80px rgba(0, 0, 0, .35); }
@media (max-width: 1279.98px) { .sk-cell { --vis: 528px; --top: 40px; } }
/* v78: a tighter heading cell over the window, so the heading and most of the window share one screen */
main.wrap > .rv-sec > .sec-h { padding-top: 40px; padding-bottom: 24px; }
@media (max-width: 900px) { main.wrap > .rv-sec > .sec-h { padding-top: 48px; padding-bottom: 28px; } }
@media (max-width: 639.98px) { main.wrap > .rv-sec > .sec-h { padding-top: 40px; padding-bottom: 24px; } }
.sk-win { position: relative; z-index: 1; width: min(84%, 1120px); height: calc(var(--vis) + 48px); margin: calc(var(--top) - 8px) auto 0; padding: 8px 8px 0;
  display: grid; grid-template-columns: 296px minmax(0, 1fr); gap: 8px; border-radius: 16px 16px 0 0; background: #050505;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .05), 0 -12px 60px rgba(0, 0, 0, .35);
  font-family: var(--sans); color: #d6d6d6; -webkit-user-select: none; user-select: none; cursor: default; }
.sk-win svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sk-win p { margin: 0; }
.sk-win ul, .sk-win ol { margin: 0; padding: 0; list-style: none; }
.sk-win .sk-sb, .sk-win .sk-bk, .sk-win .sk-mc, .sk-win .sk-inf { display: none; }

/* sidebar */
.sk-side { min-height: 0; overflow: hidden; padding: 12px 10px; border-radius: 10px 10px 0 0; background: #121212; color: #a8a8a8; font-size: 15px; line-height: 22px; }
.sk-ws { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 6px 0 4px; margin-bottom: 10px; }
.sk-wsi { flex: none; width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; background: #000; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.sk-wsi svg { width: 20px; height: 20px; }
.sk-wsn { font-size: 17px; font-weight: 700; color: #f2f2f2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-cv { width: 12px; height: 12px; flex: none; color: #8a8a8a; }
.sk-new { margin-left: auto; flex: none; width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; color: #d0d0d0; background: rgba(255, 255, 255, .06); }
.sk-new svg { width: 18px; height: 18px; }
.sk-nav { padding-bottom: 12px; margin-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.sk-nav li, .sk-chs li, .sk-dms li { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 10px; border-radius: 6px; white-space: nowrap; }
.sk-nav svg { width: 18px; height: 18px; flex: none; }
.sk-lb { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 6px; margin-top: 6px !important; font-weight: 600; color: #a8a8a8; }
.sk-lb svg { width: 12px; height: 12px; }
.sk-hs { width: 18px; flex: none; text-align: center; font-size: 17px; color: #8a8a8a; }
.sk-chs li { min-width: 0; }
.sk-chn { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sk-chs li.on { background: rgba(255, 255, 255, .1); color: #f2f2f2; font-weight: 600; }
.sk-chs li.on .sk-hs { color: #d0d0d0; }
.sk-shr { width: 15px; height: 15px; flex: none; color: #8a8a8a; stroke-width: 1.4; }
.sk-chs .sk-shr { margin-left: 2px; }
.sk-da { position: relative; flex: none; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; font-size: 14px; line-height: 1; font-weight: 700; color: #e0e0e0;
  background: linear-gradient(135deg, #3a3a3a, #262626); transform: scale(.9); transform-origin: center; }
.sk-da[data-t="2"] { background: linear-gradient(135deg, #39402f, #24281f); }
.sk-da i { position: absolute; right: -4px; bottom: -4px; width: 10px; height: 10px; border-radius: 50%; box-sizing: border-box; border: 2px solid #121212; background: #121212;
  box-shadow: inset 0 0 0 1.5px #8a8a8a; }
.sk-da i.on { background: #2bac76; box-shadow: none; }
.sk-dms li.un { color: #f2f2f2; font-weight: 700; }
.sk-bd { margin-left: auto; min-width: 22px; height: 20px; padding: 0 7px; border-radius: 10px; display: grid; place-items: center; font-size: 14px; line-height: 1; font-weight: 700;
  color: #111; background: #e6e6e6; }

/* main pane */
.sk-main { min-width: 0; min-height: 0; display: flex; flex-direction: column; border-radius: 10px 10px 0 0; background: #151515; overflow: hidden; }
.sk-hd { flex: none; display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 20px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.sk-ti { min-width: 0; }
.sk-cn { min-width: 0; display: flex; align-items: center; gap: 6px; font-size: 18px; line-height: 24px; font-weight: 700; color: #f2f2f2; white-space: nowrap; }
.sk-cn .sk-hs { width: auto; font-size: 19px; color: #d0d0d0; margin-right: -2px; }
.sk-cn .sk-shr { width: 16px; height: 16px; margin-left: 4px; }
/* v77: four client logos (from the logo wall) in overlapping circles, then +500 more */
.sk-avs { margin-left: auto; flex: none; display: flex; align-items: center; height: 40px; padding: 0 14px 0 4px; border-radius: 20px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.sk-sa { position: relative; width: 32px; height: 32px; margin-right: -5px; border-radius: 50%; display: grid; place-items: center; background: #111;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 0 0 2px #151515; }
.sk-sa:nth-child(1) { z-index: 4; } .sk-sa:nth-child(2) { z-index: 3; } .sk-sa:nth-child(3) { z-index: 2; } .sk-sa:nth-child(4) { z-index: 1; }
.sk-sa img { display: block; max-width: 18px; max-height: 15px; width: auto; height: auto; filter: brightness(0) invert(1); opacity: .92; }
.sk-sn { margin-left: 16px; font-size: 15px; line-height: 20px; font-weight: 600; color: #a8a8a8; white-space: nowrap; }

.sk-scr { --fd: 28px; flex: 1 1 auto; min-height: 0; overflow: hidden auto; scrollbar-width: none; padding: 16px 0 8px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .55) calc(var(--fd) * .4), #000 var(--fd));
          mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .55) calc(var(--fd) * .4), #000 var(--fd)); }
/* v79: the earlier messages that don't fit over the newest one are left out (the script decides), so the divider stays in view */
.sk-win .sk-m.sk-off { display: none; }
.sk-scr::-webkit-scrollbar { display: none; }
.sk-day { position: relative; display: flex; justify-content: center; margin: 12px 0 4px; }
.sk-day::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(255, 255, 255, .08); }
.sk-day span { position: relative; height: 28px; padding: 0 14px; border-radius: 14px; display: grid; place-items: center; font-size: 14px; font-weight: 600; color: #d0d0d0;
  background: #151515; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.sk-m { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; padding: 10px 20px; }
/* v78 easter egg: Slack's hover toolbar (react, reply in thread, more), pointer devices only, on hover only */
.sk-hv { display: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 640px) {
  .sk-hv { position: absolute; z-index: 2; top: 2px; right: 20px; display: flex; gap: 2px; padding: 3px; border-radius: 8px; background: #1d1d1d;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 4px 12px rgba(0, 0, 0, .35); color: #9a9a9a; opacity: 0; transform: translateY(2px);
    transition: opacity 120ms ease-out, transform 120ms ease-out; pointer-events: none; }
  .sk-hv i { width: 30px; height: 28px; border-radius: 6px; display: grid; place-items: center; }
  .sk-hv i:hover { background: rgba(255, 255, 255, .08); color: #d0d0d0; }
  .sk-hv svg { width: 18px; height: 18px; }
  .sk-m:hover { background: rgba(255, 255, 255, .025); }
  .sk-m:hover .sk-hv { opacity: 1; transform: none; pointer-events: auto; }
}
.sk-av { width: 40px; height: 40px; margin-top: 2px; border-radius: 8px; display: grid; place-items: center; font-size: 14px; line-height: 1; font-weight: 700; color: #d8d8d8;
  background: linear-gradient(135deg, #3a3a3a, #262626); }
.sk-m[data-t="2"] .sk-av { background: linear-gradient(135deg, #39402f, #24281f); }
.sk-m[data-t="3"] .sk-av { background: linear-gradient(135deg, #34353d, #212127); }
.sk-m[data-t="4"] .sk-av { background: linear-gradient(135deg, #413831, #2a2420); }
.sk-c { min-width: 0; }
.sk-h { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; line-height: 22px; }
.sk-n { font-size: 16px; font-weight: 700; color: #f2f2f2; }
.sk-r, .sk-tm { font-size: 14px; color: #8f8f8f; }
.sk-tx { font-size: 16px; line-height: 24px; color: #d6d6d6; text-wrap: pretty; }
.sk-rx { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px !important; }
.sk-win .rx { height: 26px; padding: 0 9px 0 7px; gap: 5px; border-radius: 13px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
  font-size: 14px; font-weight: 600; color: #d4d4d4; }
.sk-win .rx.me { background: rgba(255, 255, 255, .09); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); color: #e8e8e8; }
.sk-win .rx .e { display: inline-block; font-size: 15px; }
/* v79: the count sits in a fixed 18px box that clips the roll; tabular figures, so the width only changes with the digit count */
.sk-win .rx .c { position: relative; display: inline-block; height: 18px; line-height: 18px; overflow: hidden; text-align: center; font-variant-numeric: tabular-nums; }
.sk-win .rx .c i { display: block; font-style: normal; }
.sk-win .rx .c i.o { position: absolute; left: 0; right: 0; top: 0; }
.sk-th { display: flex; align-items: center; gap: 8px; margin-top: 6px !important; height: 28px; font-size: 14px; }
.sk-tav { width: 22px; height: 22px; border-radius: 5px; background: linear-gradient(135deg, #3a3a3a, #262626); }
.sk-th b { font-weight: 700; color: #d4d4d4; }
.sk-tl { color: #8f8f8f; }

.sk-typ { flex: none; display: flex; align-items: center; gap: 8px; height: 26px; padding: 0 22px; font-size: 14px; color: #8f8f8f; opacity: 0; transition: opacity 240ms var(--ease); }
.sk-typ b { font-weight: 700; color: #b8b8b8; }
.sk-typ.on { opacity: 1; }
.sk-dots { display: inline-flex; gap: 3px; }
.sk-dots i { width: 5px; height: 5px; border-radius: 50%; background: #a0a0a0; animation: rvDot 900ms ease-in-out infinite; }
.sk-dots i:nth-child(2) { animation-delay: 150ms; }
.sk-dots i:nth-child(3) { animation-delay: 300ms; }
.sk-win.is-paused .sk-dots i, .sk-win.is-done .sk-dots i { animation-play-state: paused; }

.sk-cmp { flex: none; margin: 0 20px 20px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); background: #181818; }
.sk-pp { display: none; }
.sk-in { padding: 14px 16px 6px; font-size: 16px; line-height: 24px; color: #8a8a8a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-tools { display: flex; align-items: center; gap: 14px; height: 44px; padding: 0 10px; color: #8a8a8a; }
.sk-tools svg { width: 18px; height: 18px; }
.sk-plus { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .08); color: #bdbdbd; }
.sk-send { margin-left: auto; width: 34px; height: 30px; border-radius: 6px; display: grid; place-items: center; color: #6f6f6f; }

/* motion: the window rises in, the messages stream (only when the script runs) */
.sk-win.rv-js { opacity: 0; transform: translateY(32px); }
.sk-win.rv-js.in { opacity: 1; transform: none; transition: opacity 700ms cubic-bezier(.22, 1, .36, 1), transform 700ms cubic-bezier(.22, 1, .36, 1); }
/* v77: each message types out (the untyped rest is laid out but hidden, so lines never reflow).
   v78: the earlier messages are already posted (.set: final, no motion). The newest message's reactions pop in on a spring
   (scale 0, 1.15, .96, 1 over 420ms) while the emoji itself hops and tilts, then settles; each count tick bumps its pill
   (1, 1.08, 1 over 180ms, from the script) and the new number slides up into place. Then the thread row fades in. */
.sk-win.rv-js .sk-m:not(.is-in) { display: none; }
.sk-win.rv-js .sk-m.is-in:not(.set) { animation: skIn 520ms cubic-bezier(.22, 1, .36, 1) both; }
.sk-win.rv-js .sk-m.is-out { opacity: 0; transition: opacity 500ms cubic-bezier(.22, 1, .36, 1); }
.sk-tg { visibility: hidden; }
.sk-win.rv-js .rx { opacity: 0; transform: scale(0); }
.sk-win.rv-js .rx.on { opacity: 1; transform: none; animation: skPop 500ms cubic-bezier(.22, 1, .36, 1) both; }   /* v80: was 420ms; each keyframe sets its own curve */
.sk-win.rv-js .rx.on .e { animation: skHop 660ms cubic-bezier(.34, 1.56, .64, 1) 60ms both; }
.sk-win.rv-js .rx.set, .sk-win.rv-js .rx.set .e { opacity: 1; transform: none; animation: none; }
.sk-win.rv-js .rx .c i.o { animation: skRollOut 200ms cubic-bezier(.45, 0, .2, 1) both; }
.sk-win.rv-js .rx .c i.n { animation: skRollIn 200ms cubic-bezier(.45, 0, .2, 1) both; }
.sk-win.rv-js .sk-th { opacity: 0; transition: opacity 400ms cubic-bezier(.22, 1, .36, 1); }
.sk-win.rv-js .sk-m.th-on .sk-th { opacity: 1; }
.sk-win.is-paused .rx.on, .sk-win.is-paused .rx.on .e, .sk-win.is-paused .rx .c i { animation-play-state: paused; }
.sk-scr { transition: opacity 600ms cubic-bezier(.22, 1, .36, 1); }
@keyframes skIn { from { opacity: 0; transform: translateY(6px); } }
@keyframes skPop { 0% { opacity: 0; transform: scale(0); animation-timing-function: cubic-bezier(.3, .9, .5, 1); }
  20% { opacity: 1; animation-timing-function: cubic-bezier(.22, 1, .36, 1); } 55% { transform: scale(1.15); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  78% { transform: scale(.96); animation-timing-function: cubic-bezier(.45, 0, .55, 1); } 100% { opacity: 1; transform: scale(1); } }
@keyframes skHop { 0% { transform: none; } 40% { transform: translateY(-3px) rotate(-9deg); } 70% { transform: translateY(0) rotate(5deg); } 100% { transform: none; } }
@keyframes skRollOut { to { opacity: 0; transform: translateY(-80%); } }
@keyframes skRollIn { from { opacity: 0; transform: translateY(80%); } }
@keyframes skFade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sk-dots i { animation: none; } }

/* narrower desktops and tablets */
@media (max-width: 1023.98px) {
  .sk-win { width: calc(100% - 64px); grid-template-columns: 228px minmax(0, 1fr); }
  .sk-mo { display: none; }
}
@media (max-width: 799.98px) and (min-width: 640px) {
  .sk-win { grid-template-columns: 200px minmax(0, 1fr); }
  .sk-avs { display: none; }
  .sk-side { padding: 12px 6px; }
  .sk-wsn { font-size: 16px; }
}

/* phones: Slack's channel view on a phone screen */
@media (max-width: 639.98px) {
  .sk-cell { --vis: 600px; --top: 48px; margin: -8px calc(var(--gutter) * -1) 0; }
  .sk-win .sk-cn { overflow: hidden; }
  .sk-win { width: min(340px, 100% - 32px); height: calc(var(--vis) + 26px); padding: 6px 6px 0; display: flex; flex-direction: column; gap: 0;
    border-radius: 46px 46px 0 0; background: #050505; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 -12px 50px rgba(0, 0, 0, .35); }
  .sk-side, .sk-avs { display: none; }
  .sk-win .sk-sb { flex: none; display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 6px 26px 0 34px; border-radius: 40px 40px 0 0;
    background: #151515; font-size: 15px; font-weight: 600; color: #f2f2f2; }
  .sk-sb .sk-ic { display: flex; gap: 6px; align-items: center; }
  .sk-sb svg { width: 18px; height: 12px; fill: currentColor; stroke: none; }
  .sk-sb svg + svg { width: 26px; }
  .sk-main { flex: 1; border-radius: 0; }
  .sk-hd { height: 60px; gap: 8px; padding: 0 12px 0 8px; }
  .sk-win .sk-bk { display: block; width: 24px; height: 24px; flex: none; color: #d0d0d0; stroke-width: 2; }
  .sk-cn { font-size: 16px; line-height: 22px; gap: 4px; }
  .sk-cn .sk-hs { font-size: 17px; }
  .sk-win .sk-cn .sk-shr, .sk-win .sk-cn .sk-cv { display: none; }
  .sk-win .sk-mc { display: block; font-size: 14px; line-height: 18px; color: #8f8f8f; }
  .sk-win .sk-inf { display: block; margin-left: auto; width: 24px; height: 24px; flex: none; color: #d0d0d0; }
  .sk-m { grid-template-columns: 36px minmax(0, 1fr); column-gap: 10px; padding: 8px 14px; }
  .sk-av { width: 36px; height: 36px; }
  .sk-r { flex-basis: 100%; order: 3; line-height: 20px; }
  .sk-scr { --fd: 24px; padding-top: 16px; }
  .sk-day { margin: 8px 0 2px; }
  .sk-typ { padding: 0 16px; }
  .sk-cmp { display: flex; align-items: center; gap: 8px; margin: 2px 0 0; padding: 8px 10px 32px; border-radius: 0; background: #151515;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07); }
  .sk-pd { display: none; } .sk-pp { display: inline; }
  .sk-in { order: 2; flex: 1; min-width: 0; height: 38px; padding: 0 14px; border-radius: 19px; line-height: 38px; background: #1f1f1f; }
  .sk-tools { display: contents; }
  .sk-tools > svg { display: none; }
  .sk-plus { order: 1; flex: none; width: 32px; height: 32px; }
  .sk-send { order: 3; flex: none; width: 32px; height: 32px; margin: 0; }
  .sk-send svg { width: 20px; height: 20px; }
}
/* pinned: the card sits centred in the tile at --pz (CSS zoom), each layer on whole pixels */
.ps-pc .ps-ui { left: 0; top: 0; width: 100%; height: 100%; display: grid; place-items: center; transform: none; }
.ps-pc .hw { zoom: var(--pz, 1); }
.ps-pc { transform: translate3d(0, 12px, 0) scale(.985); transition: opacity 420ms var(--ease), transform 720ms var(--ease); }
.ps-pc.on { transform: none; transition-delay: 140ms, 140ms; }
.ps-pc.ex { transform: translate3d(0, -8px, 0) scale(.985); transition-delay: 0ms, 0ms; }
/* stacked (phones, tablets, short screens, reduced motion): the same card, full width up to 384, the tile hugs it */
.js .ps-grid .ps-tile.hw-on { aspect-ratio: auto; display: grid; place-items: center; padding: 24px; }
.js .ps-grid .ps-tile.hw-on .ps-ui { position: relative; left: auto; top: auto; width: 100%; max-width: 384px; transform: none; }
.js .ps-grid .ps-tile.hw-on .hw { width: 100%; }
@media (max-width: 600px) { .js .ps-grid .ps-tile.hw-on { padding: 24px 16px; } }
@media (min-width: 1024px) and (min-height: 640px) and (prefers-reduced-motion: no-preference) { .js .ps-grid > .ps-c > .ps-tile.hw-on { display: none; } }
@media (min-width: 901px) and (max-width: 1279.98px) {
  @media not all and (min-width: 1024px) and (min-height: 640px) and (prefers-reduced-motion: no-preference) {
    .js .ps-grid { grid-template-columns: minmax(0, 1fr); }
    .js .ps-grid > .ps-c { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); column-gap: var(--s4); align-items: center; }
    .js .ps-grid .ps-cap { padding: 16px 16px 16px 0; }
  }
}
/* ======================================================================
   v81b / v82: Results as the five ecomlanders.co case studies, one at a time behind pill tabs (Dylan: "we do a row of 4
   panels 3 are smaller as they are callouts of stats the left is larger as it explains the project"). Brand names, project
   text and every figure and label are verbatim from context/case-studies-live.md.
   - The cell: --hc (#171717) side line to side line. In it the pill tabs and one study's row of dark panels (#0b0b0b, 6px
     corners, 8px seats and gaps): the left panel (28fr: wordmark at the top, the project text at the foot) and the stat
     panels (24fr each; Men's Supplement Brand has two, 36fr each). Every row sits in the same grid cell, so the cell is as
     tall as the tallest study and never jumps.
   - v82 stat panel (after Kevser's "Active Tasks"): ALL CAPS grey label, the big figure, the verbatim label as the context
     line, then at the foot the track: lime gradient bar to a lime indicator with a round node, 1px grey ticks to a taller
     end tick, the figure again in a dark chip at the bar's end. The bar fills the same 70% (--fill) of every track: it is
     not a scale and implies no percentage; no end label.
   - Under 1200: the left panel on top, the stats in a row under it. Under 640: one column; the tabs scroll sideways inside
     their strip (fade edges), never the page.
   - Motion: see v82 A3 at the top. Autoplay: 7s a study, a loading bar in the active tab; it holds on hover, on keyboard
     focus, off screen and in a hidden tab. Reduced motion: no autoplay, no roll, the final state; the tabs still switch
     (instantly). No JS: all five rows stacked.
   ====================================================================== */
main.wrap > .rs-sec > .sec-h { padding-top: 40px; padding-bottom: 24px; }
.cz { --e2: cubic-bezier(.22, 1, .36, 1); --e3: cubic-bezier(.16, 1, .3, 1); --eo: cubic-bezier(.2, 1.25, .36, 1); --fill: 70%;
  margin: -8px -8px 0; padding: 8px; background: var(--hc); }
.cz-tabs { display: none; }
/* v85 tabs: the full width of the grey cell, five equal #0b0b0b panels seated 8px apart (the cell's own seats and gaps, 6px
   corners); the name left aligned, 16px, grey, white when active on a slightly lighter fill; v97: the autoplay is a soft grey
   load across the whole active panel (below). No pills. Phones: a sideways scroll strip of equal panels (snap, fade
   edges), never the page. */
.cz-tb .cz-tabs { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 0 0 8px; }
.cz-tab { position: relative; min-width: 0; min-height: 56px; padding: 12px 20px; border: 0; border-radius: 6px; background: #0b0b0b;
  color: var(--muted); font-family: var(--sans); font-size: 16px; line-height: 20px; font-weight: 500; text-align: left; cursor: pointer; overflow: hidden;
  transition: background-color 420ms var(--e2), color 420ms var(--e2); }
.cz-tab:hover { color: var(--text-2); background: #0f0f0f; }
.cz-tab[aria-selected="true"] { background: #121212; color: #fff; box-shadow: inset 0 0 0 1px #262626; }
.cz-tab:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; border-radius: 6px; }
/* v97: no white line. v98 (Dylan: "not a gradient? just a fill that moves along?"): the autoplay is a flat grey fill (6%
   white, no gradient, no feather) that moves left to right across the active tab over the 12s, with a HARD vertical leading
   edge: a full width layer clipped from the right (clip-path inset, no layout per frame), the JS snapping --ap so the edge
   lands on a whole device pixel (crisp at 1x, 2x and 3x; scaleX was tested and blends a pixel on the fractional width tabs). Clipped to the tab's corners (the left corners follow the radius,
   the moving edge is straight), under the text (z-index -1 in the tab's own stacking context). On a switch the outgoing
   fill fades out (360ms) where it stands and the new tab's starts from empty. It holds where it is while the autoplay
   holds (hover, focus, off screen, hidden). Reduced motion: never shown (.ap is never set). */
.cz-tab { isolation: isolate; }
.cz-ld { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; opacity: 0; transition: opacity 360ms var(--e2); pointer-events: none; }
.cz-ld > i { position: absolute; inset: 0; background: rgba(255, 255, 255, .06); clip-path: inset(0 calc(100% - var(--ap, 0) * 100%) 0 0); }
.cz.ap .cz-tab[aria-selected="true"] .cz-ld { opacity: 1; }
.cz-tabs::-webkit-scrollbar { display: none; }
.cz-rows { display: grid; gap: 8px; }
.cz-tb .cz-rows > .cz-row { grid-area: 1 / 1; }
/* v83 row: the page visual (a phone on a flat dark stage, cropped at the foot) at the left, then the project panel (wordmark,
   the text right under it) over the stat panels */
.cz-row { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 8px; margin: 0; }
.cz-tb .cz-row:not(.on):not(.out) { visibility: hidden; }
.cz-bx { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cz-ss { flex: 1 1 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; }
.cz-p { min-width: 0; padding: 24px; border-radius: 6px; background: #0b0b0b; }
.cz-l { display: flex; flex-direction: column; gap: 16px; padding: 24px 32px 28px; }
.cz-b { margin: 0; font-family: var(--display); font-size: 24px; line-height: 32px; font-weight: 500; letter-spacing: -0.01em; color: #fff; }
.cz-t { margin: 0; max-width: 54em; font-family: var(--sans); font-size: 16px; line-height: 24px; color: #a3a3a3; }
.cz-qf { margin: 0; }
.cz-qf .cz-t p { margin: 0; }
/* the visual: the hero carousel's phone (dark frame, island) at 268px, so the ~266px live site shots show near native size */
.cz-v { position: relative; overflow: hidden; padding: 0; min-height: max(380px, min(440px, calc(100vh - 301px))); }
/* v84: taller screens get a shorter row, so the stat panels hold the label, figure and context with only a little air above the track;
   v88: 440px (the base rule's cap) so the graph under the caption has room (row foot ~751px at 1440x800) */
@media (min-width: 1200px) and (min-height: 721px) { .cz-v { min-height: 440px; } }
/* v91: the wide band (>= 1400 x 721) gets a 460px row (stat panels 280px), so its fixed curve rises 98px under the captions */
@media (min-width: 1400px) and (min-height: 721px) { .cz-v { min-height: 460px; } }
.cz-dv { position: absolute; left: 50%; top: max(28px, calc(50% - 284px)); width: 268px; height: 568px; margin-left: -134px; padding: 6px;
  border-radius: 40px; background: #070707; box-shadow: inset 0 0 0 1px #1e1e1e, 0 24px 64px -16px rgba(0, 0, 0, .7); }
.cz-sc { position: relative; z-index: 0; isolation: isolate; height: 100%; border-radius: 34px; overflow: hidden; clip-path: inset(0 round 34px); background: #f5f5f3; }
.cz-pg { transform: translate3d(0, 0, 0); }
.cz-pg img { display: block; width: 100%; height: auto; }
.cz-isl { position: absolute; z-index: 2; pointer-events: none; left: 50%; top: 16px; width: 30%; aspect-ratio: 30 / 8.5; transform: translateX(-50%); border-radius: 999px; background: #070707; }
/* a stat panel: label, figure and context at the top, the hairline at the foot */
.cz-s { display: flex; flex-direction: column; overflow: hidden; }
.cz-c { margin: 0; font-family: var(--sans); font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cz-k { margin: 12px 0 16px; }   /* v84: the figure sits 12px under the caps label, the context under it; v86: the win chip stays at the foot */
.cz-n { display: inline-grid; font-family: var(--display); font-size: clamp(48px, 4.4vw, 64px); line-height: 1; font-weight: 500; letter-spacing: -0.025em; color: #fff;
  white-space: nowrap; font-variant-numeric: normal; font-feature-settings: normal; align-items: end; }   /* v86: natural Articulat figures, slightly tight */
.cz-n > * { grid-area: 1 / 1; }
.cz-n .gh { visibility: hidden; }
/* v86 odometer: every character of the figure is placed at the x its glyph has in the plain published string (measured
   from the hidden ghost copy with a Range, stored in em), so the landed figure is the plain text, kerning and all. Each
   digit is a 1em tall window as wide as its target glyph (the strip centred in it, so the target lands exactly) holding a strip 0 to 9 twice; the strip
   travels the last three digits up to its target. No motion blur: a soft fade at the window's top and bottom edges only.
   Symbols and commas sit in place and fade in with the digits; the decimals wait until the integer has landed, then fade
   and rise in while the suffix slides out to its place. Once everything has landed the ghost (the real text) is shown. */
.od { position: relative; display: block; height: 1em; white-space: nowrap; }
.od > span { position: absolute; top: 0; left: 0; display: block; height: 1em; line-height: 1; white-space: pre; }
.od-d { width: .6em; overflow: hidden;   /* its target glyph's own width (set by place()), so a passing digit never spills over a neighbour */
  -webkit-mask: linear-gradient(transparent, #000 .08em, #000 .92em, transparent); mask: linear-gradient(transparent, #000 .08em, #000 .92em, transparent); }
.od-r { display: block; margin: 0 -.3em; white-space: pre; text-align: center; line-height: 1.3; transform: translate3d(0, -.15em, 0); }   /* 1.3em pitch: the neighbours stay out of the 1em window */
.od-dc { opacity: 0; }
.cz-n.ld .gh { visibility: visible; }
.cz-n.ld .od { visibility: hidden; }
.cz-m { display: block; margin-top: 8px; font-family: var(--sans); font-size: 16px; line-height: 24px; color: var(--muted); }
/* v86 win (direction A, chosen over the grey tick track and the A/B card: see the notes at the top): a dotted 8px grid
   texture in the panel's lower right that lights up from the foot (a soft white radial glow scaling up from the bottom,
   then the dots fading in under the same mask), and a "Winner" result chip pinned to the panel's foot: a round neutral
   tile with a white up arrow rising into it and a tiny lime dot (the only lime), then the white 14px label. No numbers,
   no scale, nothing that implies data beyond the published figure. Transforms and opacity only. */
.cz-s { position: relative; isolation: isolate; }
.cz-s > * { position: relative; z-index: 1; }
.cz-s > .cz-wx, .cz-s > .cz-gr { position: absolute; z-index: 0; pointer-events: none; }
/* v88 graph (option 1 of three, see the notes at the top; DECORATIVE ONLY, NOT DATA): one SVG per stat panel, its viewBox
   the panel's own px size (rebuilt on resize, never CSS scaled), so the hairlines stay crisp at any DPR. A 12px dot grid on
   whole pixels fills the lower part of the panel under a top fade (nothing behind the label or the figure); one eased S
   curve runs from the panel's left edge (transparent grey) through light grey and white to a short lime tip and a 6px lime
   node (1px darker ring) with a dashed hairline down to a faint baseline. Under the curve a soft white wash (5% at the
   curve, 0 at the base) and brighter dots, so the grid itself shows the shape. The curve's top stays below the caption. */
.cz-s > .cz-gr { left: 0; top: 0; overflow: hidden; border-radius: inherit; }
.cz-gr .gl { fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }   /* v92: one thin line, no fill, no drop, no baseline */
.cz-gr .gn { fill: #A3E635; }
.cz-gr .gp { fill: #A3E635; opacity: 0; }
.cz-gr .gn, .cz-gr .gp { transform-box: fill-box; transform-origin: center; }
.cz-gr .gq { pointer-events: none; }
/* v94 panel: the page's own panel finish on the stat panels (the hero panel's top highlight and sheen, the Slack window's
   faint ring); padding and type rhythm stay as v93 (a wider inset wrapped captions and shrank figures at 1200 to 1440) */
/* v95 edges: the How we work card's edge, as far as the flat grid allows, on every Results cell (phone, project, stat panels),
   so they read as one set. That card: a 1px hairline at 8% white, its top edge at 15%, and a 5% sheen fading out over 64px.
   Here: a 1px inset ring at 8% white and a top highlight that peaks at ~17% in the centre and fades to the ring at the
   corners, drawn on ::after above the content (so the phone can't cover it), plus a faint 3% top sheen. No drop shadow,
   radii, gaps and layout unchanged. */
.cz-p { position: relative; background-image: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, 0) 64px); }
.cz-p::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .08) 50%, rgba(255, 255, 255, 0)) 0 0 / 100% 1px no-repeat; }
/* v88 Winner: once per case study, beside the brand name (rises in after the first stat panel's node lands) */
.cz-hd { display: flex; align-items: center; justify-content: flex-start; gap: 8px 12px; flex-wrap: wrap; }   /* v89: the pill inline, 12px after the name */
.cz-w { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px 0 9px; border-radius: 999px;
  background: rgba(163, 230, 53, .12); box-shadow: inset 0 0 0 1px rgba(163, 230, 53, .4);
  position: relative; top: -2px; }   /* v89: centred on the name's cap height (measured) */
.cz-wa { width: 12px; height: 12px; fill: none; stroke: #A3E635; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cz-wt { font-family: var(--sans); font-size: 14px; line-height: 20px; font-weight: 500; color: #fff; white-space: nowrap; }
/* motion (only while JS runs it: .cz-js): .go plays a row in, .out holds the leaving row's final state while it fades; the
   base state resets instantly. --t: the panel's start (170ms stagger). */
.cz-js .cz-p { --t: calc(var(--d0, 0ms) + var(--i) * 140ms); opacity: 0; transform: translate3d(0, 16px, 0); }
.cz-js .cz-c { opacity: 0; transform: translate3d(0, 6px, 0); }
.cz-js .cz-s { --t: calc(var(--d0, 0ms) + (var(--i) - 2) * 60ms); }   /* v86: the stat panels rise on the tab switch itself, 60ms apart; the roll starts with each */
.cz-js .cz-m { opacity: 0; transform: translate3d(0, 7px, 0); }
.cz-js .cz-w { opacity: 0; transform: translate3d(0, 4px, 0); }
.cz-js .cz-gr .gl { stroke-dasharray: var(--L) 100000px; stroke-dashoffset: calc(var(--L) + 3px); }
.cz-js .cz-gr .gn, .cz-js .cz-gr .gq { opacity: 0; }
.cz-js .go .cz-p { opacity: 1; transform: none; transition: opacity 700ms var(--e2), transform 820ms var(--e2); transition-delay: var(--t); }
.cz-js .go .cz-c { opacity: 1; transform: none; transition: opacity 500ms var(--e2) calc(var(--t) + 100ms), transform 600ms var(--e2) calc(var(--t) + 100ms); }
/* v85: the context line fades up once the figure lands (--tm, set by the script per panel), then the hairline draws left to
   right with the lime node riding its leading end (--tl) and settling at the end */
.cz-js .go .cz-m { opacity: 1; transform: none; transition: opacity 500ms var(--e2) var(--tm, 1400ms), transform 600ms var(--e2) var(--tm, 1400ms); }
/* v92: the figure, its line, the node and the Winner pill are played by the script (Web Animations, one start per panel); see roll() */
.cz-js .out .cz-p { opacity: 0; transform: translate3d(0, -8px, 0); transition: opacity 380ms var(--e2), transform 480ms var(--e2); }
.cz-js .out .cz-c, .cz-js .out .cz-m { opacity: 1; transform: none; }
.cz-sc .cz-pg { transition: opacity 400ms var(--e2); }
.cz-sc.fd .cz-pg { opacity: 0; }
@media (max-width: 1199.98px) {
  .cz-row { grid-template-columns: 300px minmax(0, 1fr); }
  .cz-v { min-height: 440px; }
  .cz-l { padding: 24px; }
  .cz-s { padding-bottom: 104px; }   /* v91: room for the tablet band's fixed curve under the caption (was 24px) */
}
@media (max-width: 639.98px) {
  main.wrap > .rs-sec > .sec-h { padding-top: 48px; padding-bottom: 32px; }
  .cz { margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); padding: 8px var(--gutter); }
  .cz-tb .cz-tabs { display: flex; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; scroll-snap-type: x mandatory;
    margin: 0 calc(var(--gutter) * -1) 8px; padding: 0 var(--gutter); scroll-padding: 0 var(--gutter);
    -webkit-mask: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent);
    mask: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent); }
  .cz-tab { flex: none; width: 176px; scroll-snap-align: start; white-space: nowrap; }
  .cz-row { grid-template-columns: minmax(0, 1fr); }
  .cz-ss { grid-template-columns: minmax(0, 1fr); }
  .cz-v { min-height: 420px; }
  .cz-dv { top: 24px; }
  .cz-n { font-size: 56px; }
  .cz-s { padding-bottom: 120px; }   /* v88: room for the graph under the caption; v91: 120px (was 88) for a generous rise */
}

/* ======================================================================
   v102 RESULTS: v99's panels back (Dylan on v101: "go back to the panels for the results like we had but the feel need to
   be better"), the structure exactly as v99, the MOTION re-timed in the Problem cards' language (RESULTS-NOTES-v100.md):
   one move at a time, calm easing, a long rest. Every move is played by the script (Web Animations, see seq()); these rules
   switch v99's CSS transitions off and hold the row hidden until it is first seen.
   - First play: the three panels' boxes settle together (900ms, 12px), the project text and the Winner pill with them.
     Then the stat panels one after another, 800ms apart: label and dots fade in, the line draws (1.1s to its landing),
     the figure rises 16px and fades in on the SAME curve, landing with the line's head (both within .5px of rest at the same
     ms), the lime tip settles once (no pulse, no loop) with a faint static halo, then the context line.
   - Tab switch: a crossfade, never a blank panel. The incoming row sits underneath, already whole (boxes, project text,
     phone at the top of its page, stat labels, dots); the outgoing row lies on top and fades out (460ms), so the two
     dissolve into each other. Then the incoming lines and figures play in the same sequence.
   - Then the phone makes one slow scroll and everything rests (5s+) until the 13s tab fill hands over.
   - Reduced motion: the final state, no scroll. No JS: all five rows stacked.
   v103 (motion timing only): the boxes, the stat labels and the dots are on screen from the start of every study (and
   on first play); only the text, the phone page, the lines, the lime tips and the figures move. A tab switch is out,
   then in, never both: the old text and figures fade out fully (240ms), the bare old boxes dissolve into the new ones
   (200ms; only visible where the boxes differ, e.g. Men's Supplement Brand's 2 panels), and from 250ms the new text
   and phone page fade in (300ms) while the stat panels play. A label the new study shares at the same spot stays; any
   other label fades out with the text and in with the new text. Each caption lands with its figure (same rise, same frame).
   ====================================================================== */
.cz-js .cz-p, .cz-js .go .cz-p, .cz-js .out .cz-p, .cz-js .cz-c, .cz-js .go .cz-c, .cz-js .out .cz-c, .cz-js .cz-w,
.cz-js .cz-m, .cz-js .go .cz-m, .cz-js .out .cz-m { opacity: 1; transform: none; transition: none; }
.cz-js.cz-pre .cz-row .cz-l > *, .cz-js.cz-pre .cz-row .cz-pg { opacity: 0; }   /* v103: the boxes, the labels and the dots are there from the start; only the text and the phone page wait */
.cz-js .cz-n, .cz-js .cz-m { opacity: 0; }   /* the figure and its context wait for their panel's turn (the script plays them in) */
.cz-js .cz-tb .cz-rows > .cz-row.on, .cz-js.cz-tb .cz-rows > .cz-row.on { z-index: 1; }
.cz-js.cz-tb .cz-rows > .cz-row.out { z-index: 2; pointer-events: none; }   /* the leaving row lies on top and fades out over the new one */
.cz-sc .cz-pg { transition: none; }

/* ======================================================================
   v106 RESULTS: v104's structure, calmer and cleaner (Dylan on v105: "Go back to the v99 stat panels and dot grid, but make
   them calmer and cleaner"). Same tabs, phone, project panel, stat panels, dot grid and one line per panel; less of everything.
   - Edges: every Results cell takes the How we work card's (.hw) edge exactly: 16px corners, a 1px inside border at 8% white
     with its top edge at 15%, and a 5% white sheen fading out over 64px. No centre peaked highlight, no extra ring.
   - Stat panels: 32px padding (24 on phones), the figure (tight, tabular, lining) then the caption 12px under it, then air,
     then the drawing. The caps label above the figure is gone (it repeated the caption) and so is the Winner pill.
   - Motion: one panel at a time (the script's seq()), number and line land together, then everything rests; the phone
     stays still. Reduced motion: the final state.
   ====================================================================== */
/* v87: the same 6px flat edge as every other section panel (as home.css) */
.cz-p { border-radius: 6px; background-color: #0b0b0b; background-image: none; }
.cz-p::after { box-shadow: none; background: none; border: 0; }
.cz-l { gap: 16px; padding: 32px; }
.cz-s { padding: 32px 32px 136px; }
.cz-k { margin: 0; }
.cz-n { letter-spacing: -0.035em; font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; }
.cz-m { margin-top: 12px; }
.cz-gr .gl { stroke-width: 1; }
.cz-gr .gn { fill: #A3E635; }
.cz .cz-tab, .cz .cz-tab:focus-visible { border-radius: 6px; }
.cz-js .cz-sc { background: #0b0b0b; }   /* the phone screen behind the page: dark, so the first fade in never shows a white screen */
@media (max-width: 1199.98px) { .cz-l { padding: 32px; } .cz-s { padding: 32px 32px 128px; } }
/* tablets: the phone and the project panel side by side, the stat panels in one equal row under both (no orphan panel,
   no tall empty phone cell) */
@media (min-width: 640px) and (max-width: 1199.98px) {
  .cz-row > .cz-bx { display: contents; }
  .cz-row > .cz-bx > .cz-l { grid-column: 2; grid-row: 1; }
  .cz-row > .cz-bx > .cz-ss { grid-column: 1 / -1; grid-row: 2; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .cz-v { min-height: 440px; }
  .cz-tb .cz-row { grid-template-rows: auto 1fr; }   /* the phone and project cells keep one height in every study */
}
@media (min-width: 640px) and (max-width: 1023.98px) {
  .cz.cz-tb .cz-tabs { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .cz .cz-tab { padding: 12px; }
}
@media (min-width: 640px) and (max-width: 767.98px) { .cz .cz-tab { padding: 12px 8px; font-size: 14px; } }
@media (max-width: 639.98px) {
  .cz .cz-l { padding: 24px; }
  .cz .cz-s { padding: 24px 24px 112px; }
  .cz-tb .cz-row { grid-template-rows: auto 1fr; }   /* the phone cell keeps one height in every study; a shorter study's spare height goes to its stat panels */
  .cz { padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); }
}

/* ======================================================================
   v107 RESULTS (the Results section only; everything else as v106):
   - Dots: back to v93's strength (a 10px grid of 2x2 px squares at 13% white, so ~13% on screen at 1x and 2x), still on
     whole px (crisp, no moire), v106's long soft fade, nothing behind the text.
   - Lines: each panel's own shape again (v104's six characters) as one smooth 1px grey curve; lime only as the 4px tip.
   - Phone: a little quieter (slightly desaturated and dimmed, the screen only, so the page stays real and legible).
   - Option 5 (one shared stat panel): tried, dropped (see below).
   - Tablets: the tab names stay on at most two lines (14px, balanced, under 900; under 768 the tabs become the phones'
     sideways strip of equal tabs, as five equal tabs cannot hold "Men's Supplement Brand" in two lines there); the phone
     and project cells share one height, the tallest project text of the five (set by the script, --czh), so neither
     cell has an empty block under it.
   ====================================================================== */
.cz-sc { filter: saturate(.8) brightness(.86); }
.cz-dv { box-shadow: inset 0 0 0 1px #1e1e1e, 0 16px 40px -16px rgba(0, 0, 0, .6); }
.cz .cz-tab { text-wrap: balance; }
@media (min-width: 640px) and (max-width: 1199.98px) {
  .cz-tb .cz-v { min-height: var(--czh, 440px); }
  .cz-tb .cz-l { justify-content: space-between; }
}
@media (min-width: 768px) and (max-width: 899.98px) { .cz .cz-tab { padding: 12px 8px; font-size: 14px; line-height: 20px; } }
@media (min-width: 640px) and (max-width: 767.98px) {
  .cz-tb .cz-tabs.cz-tabs { display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; scroll-snap-type: x mandatory;
    margin: 0 calc(var(--gutter) * -1) 8px; padding: 0 var(--gutter); scroll-padding: 0 var(--gutter);
    -webkit-mask: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent);
    mask: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent); }
  .cz .cz-tab { flex: none; width: 240px; padding: 12px 20px; font-size: 16px; scroll-snap-align: start; white-space: nowrap; }
}
/* v107 option 5 (one shared stat panel with hairline dividers and one dot field) was tried and dropped: the three lines
   read as one chart broken at the dividers, and it lost the 8px seats every other Results cell uses. */

/* ======================================================================
   v108 RESULTS (the Results section only; everything else as v107; Dylan on v107: "the panels should be grey right?"):
   - Panels: every Results panel (phone, project, stat) is the How we work card's (.hw) flat fill and border exactly:
     #0e0e0e, a 1px border at 8% white with its top edge at 15%, 16px corners. No sheen, no ::after highlight or ring, no
     background image, no box shadow (and the phone's drop shadow is gone, it darkened the fill). On the fill only the dot grid (faded by a mask on the dot layer), the line, the
     content and the phone.
   - Tablets (640 to 1199): no shared forced height. The project panel is as tall as its text (the name, then the text
     16px under it); the phone and project panels are equal halves, the phone panel takes the text's row height and shows
     the top of its page.
   - Phone: v107's desaturation mostly rolled back (saturate .97, brightness .92).
   - Dots: from just under the caption down (a shorter top fade), so they read as a field rather than a strip.
   ====================================================================== */
.cz .cz-p { background: #0e0e0e; background-image: none; box-shadow: none;
  border: 1px solid rgba(255, 255, 255, .08); border-top-color: rgba(255, 255, 255, .15); }
.cz .cz-p::before, .cz .cz-p::after { content: none; }
.cz-sc { filter: saturate(.97) brightness(.92); }
.cz-dv { box-shadow: inset 0 0 0 1px #1e1e1e; }   /* no drop shadow: it tinted the panel fill under the phone */
@media (min-width: 640px) and (max-width: 1199.98px) {
  .cz-row { grid-template-columns: minmax(300px, 1fr) minmax(0, 1fr); }   /* equal halves (300px floor), so the text wraps to a height the phone can fill */
  .cz-tb .cz-v { min-height: 0; }
  .cz-tb .cz-l { justify-content: flex-start; }
}

/* ======================================================================
   v109 RESULTS (the Results section only; everything else as v108; Dylan on v108: "No outline at all, just flat grey
   panels"): every Results panel (phone, project, stat) and every tab is a flat solid fill and nothing else: no border, no
   outline, no top highlight, no inset or drop shadow, no ::before/::after line, ring or gradient. Same 16px corners. The
   panels part from the grey Results cell by fill alone. Tabs keep their focus-visible outline (keyboard only) and the
   autoplay's hard edge grey fill.
   ====================================================================== */
.cz .cz-p { border: 0; outline: 0; box-shadow: none; background-image: none; }
.cz .cz-p::before, .cz .cz-p::after, .cz .cz-tab::before, .cz .cz-tab::after { content: none; border: 0; outline: 0; box-shadow: none; background: none; }
.cz .cz-tab, .cz .cz-tab[aria-selected="true"] { border: 0; outline: 0; box-shadow: none; }
.cz .cz-tab:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; }

/* ======================================================================
   v82: FAQ + Ask us anything (v85: the Ask block is now the ask row, the list's seventh row). .fq-g carries the corner squares;
   the Ask block is a grey cell (--hc) like the Results cell: the heading at the left, the thread, the input row and the
   suggestion chips at the right (stacked under 900). The answer card is a #0b0b0b panel, 6px corners. Lime: none.
   ====================================================================== */
.fq-g { position: relative; margin: -8px -8px 0; }
main.wrap .fq-g > .fq-ls { margin: 0; }
main.wrap .fq-g > .fq-ls::after { content: none; }
.fq-g::after { content: ""; position: absolute; z-index: 3; pointer-events: none; inset: -3px -4px -4px -3px;
  background: linear-gradient(var(--sq), var(--sq)) left top / 6px 6px no-repeat, linear-gradient(var(--sq), var(--sq)) right top / 6px 6px no-repeat,
    linear-gradient(var(--sq), var(--sq)) left bottom / 6px 6px no-repeat, linear-gradient(var(--sq), var(--sq)) right bottom / 6px 6px no-repeat; }
@media (min-resolution: 2dppx) { .fq-g::after { transform: translate(-.5px, -.5px); } }
.fq-a p + p { margin-top: -8px; }
/* v85: the ask row. The Ask us anything block is gone; a seventh row in the same hairline row style reads as an empty
   question: the input where the question sits (grey placeholder, white typed text) and a send icon in the + circle's place
   (grey while empty, white with text). A question opens the row like the accordion (same grid rows ease) with the typing
   dots, then the answer streams in it. Soft grey focus ring. Lime: none. */
/* v86 ask row refine: a sparkle line icon (grey) leads the row, the placeholder "Can't see your question? Ask it here", a
   quiet return key hint chip (grey, 14px, hidden on touch) and the send button in the + circle's place: grey while empty,
   white with a dark arrow once there is text. A soft white glow (~9%) follows the pointer over the row, like the Shopify
   Partner pill. Focus: a soft grey inner ring and glow, no outline; once the row is open (answering) it reads exactly like
   an open FAQ row: no ring, no extra fill. Lime: none. */
.fq-af { position: relative; overflow: hidden; display: flex; align-items: center; gap: var(--s2); min-height: 72px; margin: 0; padding: var(--s2) var(--s3) var(--s2) var(--s4);
  --x: 50%; --y: 50%; transition: box-shadow 250ms var(--ease); }
.fq-gl { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 250ms var(--ease);
  background: radial-gradient(circle 160px at var(--x) var(--y), rgba(255, 255, 255, .09), rgba(255, 255, 255, .03) 50%, rgba(255, 255, 255, 0)); }
.fq-af.hv .fq-gl { opacity: 1; }
.fq-af > :not(.fq-gl) { position: relative; }
.fq-ai { flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin-right: 4px; color: #8f8f8f; transition: color 250ms var(--ease); }
.fq-ai svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; }
.fq-af:focus-within .fq-ai { color: #c9c9c9; }
.fq-af:focus-within { box-shadow: inset 0 0 0 1px #2a2a2a, inset 0 0 32px rgba(255, 255, 255, .025); }
.fq-ak.open .fq-af:focus-within { box-shadow: none; }
.fq-in { flex: 1 1 auto; min-width: 0; height: 40px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: #fff; caret-color: #fff;
  font-family: var(--sans); font-size: 18px; line-height: 26px; font-weight: 500; letter-spacing: -0.005em; }
.fq-in::placeholder { color: var(--muted); opacity: 1; }
.fq-in:focus { outline: none; }
.fq-go { display: grid; place-items: center; padding: 0; border: 0; color: #8f8f8f; cursor: default; transition: background-color 250ms var(--ease), color 250ms var(--ease), transform 250ms var(--ease); }
.fq-go::before, .fq-go::after { content: none; }
.fq-go svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.fq-go[aria-disabled="false"], .fq-i.fq-ak.open .fq-go[aria-disabled="false"] { color: #0b0b0b; background: #fff; cursor: pointer; }
.fq-i.fq-ak:hover .fq-go[aria-disabled="false"] { background: #e9e9e9; }
.fq-go:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
html:not(.js) .fq-ak { display: none; }
.fq-ak .fq-a { visibility: visible; }   /* keeps the aria-live region announceable while the row is shut (0fr hides it) */
.ak-ty { display: flex; gap: 6px; margin: 0; padding: 4px var(--s4) var(--s3); }
.ak-ty i { width: 6px; height: 6px; border-radius: 999px; background: #8f8f8f; animation: ak-dot 1s var(--ease) infinite; }
.ak-ty i:nth-child(2) { animation-delay: .15s; }
.ak-ty i:nth-child(3) { animation-delay: .3s; }
@keyframes ak-dot { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translate3d(0, -3px, 0); } }
.ak-rl { margin: -8px 0 0; padding: 0 var(--s8) var(--s3) var(--s4); list-style: none; display: grid; gap: 4px; max-width: 640px; font-size: 16px; line-height: 24px; color: var(--muted); }
.ak-rl b { font-weight: 500; color: #f5f5f3; font-variant-numeric: tabular-nums; }
.ak-cp { margin: -8px 0 0; padding: 0 var(--s8) var(--s3) var(--s4); display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--s3); row-gap: 4px; }
.ak-src { font-family: var(--sans); font-size: 14px; line-height: 20px; color: var(--muted); }
.ak-cta { display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; font-family: var(--sans); font-size: 16px; line-height: 24px; font-weight: 500; color: #fff;
  text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .35); text-underline-offset: 4px; transition: text-decoration-color 200ms var(--ease); }
.ak-cta:hover { text-decoration-color: #fff; }
.ak-cta svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ak-cta:focus-visible { outline: 2px solid #f5f5f3; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .ak-ty i { animation: none; } }
@media (max-width: 639.98px) {
  .fq-g { margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); }
  main.wrap .fq-g > .fq-ls { margin: 0; }
  .fq-g::after { content: none; }
  .fq-af { padding-left: var(--gutter); padding-right: var(--s2); min-height: 64px; }
  .fq-in { font-size: 18px; line-height: 26px; }
  .ak-ty, .ak-cp { padding-left: var(--gutter); padding-right: var(--s5); }
  .ak-rl { padding-left: var(--gutter); padding-right: var(--s5); }
}

/* v96: one eyebrow lockup for every section label + heading pair. --eb-gap is the visible gap from the label's text box to
   the top of the heading's capitals. The heading keeps its line height (so heading to sub/content gaps are untouched); its
   line box puts ~.2em of empty space above the caps (1.04 line height; ~.19em at 1.06 on phones), which the negative
   --eb-trim margin takes back, so the gap you see is the gap set here. */
:root { --eb-gap: 16px; --eb-trim: .2em; }
@media (max-width: 600px) { :root { --eb-gap: 12px; --eb-trim: .19em; } }
.sec-k.sec-k { margin-bottom: 0; }
.sec-k + h2 { margin-top: calc(var(--eb-gap) - var(--eb-trim)); }
/* ===================== VERBATIM: homepage-direction-v109.html, second <style> block (lines 4341 to 4915) ===================== */
/* ======================================================================
   v84: BOOK A CALL as an overlay. The booking flow from booking/booking-direction-v1.html (same design and code), namespaced
   .bk-* so nothing clashes with the page (.slot, .rx, .pn, .wa ...). Desktop: a centred grey cell (#171717, the slim info
   panel and the flow panel as #0b0b0b panels seated 8px in), 6px corners, a hairline, max 1120 wide, the page dimmed and
   blurred behind. Phones (<640): a full height bottom sheet. Every "Book a call" CTA opens it; /#book links to it.
   ====================================================================== */
.bk { --bk-hc: #171717; --bk-pn: #0b0b0b; --bk-ln: #1e1e1e; --bk-ln2: #2a2a2a; --bk-text: #f5f5f3; --bk-text2: rgba(245, 245, 243, .78);
  --bk-muted: rgba(245, 245, 243, .5); --bk-faint: rgba(245, 245, 243, .42); --bk-off: rgba(245, 245, 243, .24); --bk-dot: #f5f5f3;
  --bk-ease: cubic-bezier(.22, 1, .36, 1); --bk-ring: 0 0 0 3px rgba(255, 255, 255, .08);
  --bk-display: "Articulat CF", "Inter Display", Inter, system-ui, sans-serif; --bk-sans: "Inter Display", Inter, system-ui, -apple-system, sans-serif;
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; font-family: var(--bk-sans); font-size: 16px; line-height: 1.5; color: var(--bk-text);
  -webkit-font-smoothing: antialiased; font-feature-settings: "cv11", "ss01"; }
.bk[hidden] { display: none !important; }
.bk [hidden] { display: none !important; }
:where(.bk) *, :where(.bk) *::before, :where(.bk) *::after { box-sizing: border-box; }
:where(.bk) :is(h2, h3, p, ol, ul, dl, dd, fieldset) { margin: 0; padding: 0; }
:where(.bk) :is(ol, ul) { list-style: none; }
:where(.bk) fieldset { border: 0; min-width: 0; }
:where(.bk) a { color: inherit; text-decoration: none; }
:where(.bk) :is(button, input, select, textarea) { font: inherit; color: inherit; }
:where(.bk) button { cursor: pointer; background: none; border: 0; padding: 0; }
:where(.bk) svg { display: block; }
.bk :focus { outline: none; }
.bk :focus-visible { outline: 2px solid rgba(245, 245, 243, .34); outline-offset: 2px; }
.bk-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* the page behind: dimmed and blurred; scroll locked (the scrollbar's width goes back as padding, so nothing moves) */
.bk-bd { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); -webkit-backdrop-filter: blur(11px); backdrop-filter: blur(11px); }   /* v85: lighter, so the page shows through */
html.bk-lock { overflow: hidden; }
html.bk-lock body { overflow: hidden; padding-right: var(--bk-sbw, 0px); }
/* heavy page motion pauses while the overlay is open (the scripted loops pause too, see the script) */
html.bk-still main *, html.bk-still header.nav *, html.bk-still footer * { animation-play-state: paused !important; }   /* v-smooth: set once the fold has opened */

/* the dialog: the grey cell */
/* v85: the dialog is as tall as its content (the taller of the info panel and the current step), up to 100vh - 64px; the
   step change animates the stage's height, so the dialog follows with the same easing; shorter steps sit centred */
.bk-dlg { position: relative; display: flex; flex-direction: column; width: min(1120px, calc(100vw - 64px)); height: auto; max-height: calc(100vh - 64px);
  border-radius: 6px; background: var(--bk-hc); box-shadow: inset 0 0 0 1px var(--bk-ln), 0 40px 120px -24px rgba(0, 0, 0, .8); overflow: hidden; overflow: clip;
  transform-origin: 50% 50%; }
/* v-smooth: the dialog and the backdrop sit on their own compositor layers from the moment the overlay shows, so the fold's
   first frame does not wait for a layer to be made (the overlay is display:none when shut, so this costs nothing then) */
.bk-dlg { will-change: transform, opacity; backface-visibility: hidden; }
.bk-bd { will-change: opacity; }
.bk-grab { display: none; }
.bk-x { position: absolute; z-index: 3; top: 28px; right: 28px; width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; color: var(--bk-text2);
  box-shadow: inset 0 0 0 1px var(--bk-ln2); background: #0e0e0e; transition: background-color 200ms var(--bk-ease), box-shadow 200ms var(--bk-ease), color 200ms var(--bk-ease); }
.bk-x:hover { background: #151515; box-shadow: inset 0 0 0 1px #3a3a3a; color: var(--bk-text); }
.bk-x svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.bk-sc { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #2a2a2a transparent; }
.bk-cell { min-height: 100%; padding: 8px; display: grid; grid-template-columns: minmax(0, 344px) minmax(0, 1fr); gap: 8px; align-items: stretch; }
.bk-pn { background: var(--bk-pn); border-radius: 6px; min-width: 0; }

/* ---------- left: the slim info panel */
.bk-info { padding: 28px 28px 24px; display: flex; flex-direction: column; gap: 20px; }
.bk-lbl { font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--bk-muted); }
.bk-t { font-family: var(--bk-display); font-weight: 500; font-size: 28px; line-height: 32px; letter-spacing: -0.02em; color: var(--bk-text); }
.bk-t:focus-visible { outline: none; }
.bk-ts { margin-top: 8px; font-size: 16px; line-height: 24px; color: var(--bk-muted); }
.bk-info .bk-lbl { margin-bottom: 16px; }
.bk-how { display: grid; gap: 12px; }
.bk-how li { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 14px; font-size: 16px; line-height: 24px; color: var(--bk-text2); }
.bk-n { width: 28px; height: 28px; margin-top: -2px; border-radius: 6px; display: grid; place-items: center; font-size: 14px; font-weight: 500; color: var(--bk-text);
  box-shadow: inset 0 0 0 1px var(--bk-ln2); background: #111; font-variant-numeric: tabular-nums; }
.bk-alt { padding-top: 24px; border-top: 1px solid var(--bk-ln); margin-top: auto; }
.bk-alt .bk-lbl { margin-bottom: 8px; }
.bk-alt-p { color: var(--bk-text2); margin-bottom: 16px; }
.bk-wa { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; overflow: hidden;
  border-radius: 999px; color: #fff; font-size: 15px; font-weight: 500; white-space: nowrap; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); transition: box-shadow 450ms var(--bk-ease); }
.bk-wa svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.bk-wa-fx { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; gap: inherit; border-radius: inherit;
  background: #25D366; color: #0b0b0b; pointer-events: none; white-space: nowrap; clip-path: inset(0 100% 0 0 round 999px); transition: clip-path 450ms var(--bk-ease); }
.bk-wa:hover .bk-wa-fx, .bk-wa:focus-visible .bk-wa-fx { clip-path: inset(0 0 0 0 round 999px); }
.bk-wa:hover, .bk-wa:focus-visible { box-shadow: inset 0 0 0 1px rgba(37, 211, 102, .6), 0 0 24px -6px rgba(37, 211, 102, .45); }
.bk-mail { margin-top: 16px; color: var(--bk-muted); font-size: 16px; }
.bk-mail a { color: var(--bk-text); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(245, 245, 243, .3); transition: text-decoration-color 200ms var(--bk-ease); }
.bk-mail a:hover { text-decoration-color: var(--bk-text); }

/* ---------- right: the flow */
.bk-flow { position: relative; padding: 24px 32px 24px; display: flex; flex-direction: column; overflow: hidden; }
.bk-prog { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--bk-ln); }
.bk-prog i { position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--p, 0)); border-radius: 0 1px 1px 0;
  background: linear-gradient(90deg, rgba(212, 212, 212, .3), #d4d4d4 72%, #fff); transition: transform 700ms var(--bk-ease); }   /* v86: no lime, light grey on the #1e1e1e track */
.bk-top { display: flex; align-items: center; justify-content: space-between; min-height: 40px; margin-bottom: 16px; padding-right: 56px; }
.bk-back { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px 0 10px; margin-left: -10px; border-radius: 999px; color: var(--bk-text2); font-size: 15px; font-weight: 500;
  transition: background-color 200ms var(--bk-ease), color 200ms var(--bk-ease), opacity 300ms var(--bk-ease); }
.bk-back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 300ms var(--bk-ease); }
.bk-back:hover { background: rgba(255, 255, 255, .05); color: var(--bk-text); }
.bk-back:hover svg { transform: translateX(-2px); }
.bk-back.off { opacity: 0; visibility: hidden; }
.bk-count { font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--bk-muted); font-variant-numeric: tabular-nums; }

.bk-stage { position: relative; flex: 1 0 auto; display: flex; flex-direction: column; }
.bk-stage.busy { overflow: hidden; transition: height 500ms var(--bk-ease); }
.bk-step { position: relative; }
.bk-step:not(.leaving) { margin-block: auto; }   /* v85: a step shorter than the panel sits centred in it */
.bk-step.leaving { position: absolute; left: 0; right: 0; top: 0; pointer-events: none; }
.bk-step.entering { opacity: 0; transform: translateX(calc(var(--dir, 1) * 28px)); }
.bk-step.entering.in { opacity: 1; transform: none; transition: opacity 360ms ease-out 80ms, transform 520ms var(--bk-ease); }
.bk-step.leaving.out { opacity: 0; transform: translateX(calc(var(--dir, 1) * -28px)); transition: opacity 220ms ease-out, transform 420ms var(--bk-ease); }

.bk-q { font-family: var(--bk-display); font-weight: 500; font-size: 36px; line-height: 40px; letter-spacing: -0.02em; color: var(--bk-text); text-wrap: balance; }
.bk-q:focus-visible { outline: none; }
.bk-qs { margin-top: 16px; font-size: 18px; line-height: 28px; color: var(--bk-muted); max-width: 560px; }

/* quiz options: dark cards, a hairline, a white ring and dot when picked (no cursor glow, no accent colour; Ajay, 28 Oct 2026) */
.bk-opts { margin-top: 32px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.bk-opts > .bk-opt:last-child:nth-child(odd) { grid-column: 1 / -1; }
.bk-opt { display: grid; grid-template-columns: 32px minmax(0, 1fr) 20px; align-items: center; column-gap: 16px; min-height: 76px; padding: 20px 24px; text-align: left;
  border-radius: 6px; background: #0e0e0e; box-shadow: inset 0 0 0 1px var(--bk-ln); transition: box-shadow 250ms var(--bk-ease), background-color 250ms var(--bk-ease), transform 250ms var(--bk-ease); }
.bk-opt:hover { box-shadow: inset 0 0 0 1px var(--bk-ln2); background: #141414; }
/* v85: desktops: the options are one column of larger cards, so the questions fill the panel the info sets; the info panel
   drops the WhatsApp intro line (as short screens already did) */
@media (min-width: 1024px) { .bk-opts { grid-template-columns: minmax(0, 1fr); } .bk-opt { min-height: 84px; } .bk-alt-p { display: none; } }
@media (min-width: 1024px) and (max-height: 760px) { .bk-opt { min-height: 72px; padding-top: 16px; padding-bottom: 16px; } }
.bk-opt:active { transform: scale(.995); }
.bk-opt-k { width: 32px; height: 32px; border-radius: 6px; display: grid; place-items: center; font-size: 14px; font-weight: 500; color: var(--bk-muted); box-shadow: inset 0 0 0 1px var(--bk-ln2);
  font-variant-numeric: tabular-nums; transition: color 250ms var(--bk-ease), box-shadow 250ms var(--bk-ease); }
.bk-opt-t { font-size: 18px; line-height: 26px; font-weight: 500; color: var(--bk-text); letter-spacing: -0.005em; }
.bk-opt-r { position: relative; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1px #3a3a3a; transition: box-shadow 250ms var(--bk-ease); }
.bk-opt-r::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--bk-dot); transform: scale(0); transition: transform 300ms var(--bk-ease); }
.bk-opt[aria-checked="true"] { box-shadow: inset 0 0 0 1px var(--bk-text); background: #111; }
.bk-opt[aria-checked="true"] .bk-opt-k { color: var(--bk-text); box-shadow: inset 0 0 0 1px rgba(245, 245, 243, .4); }
.bk-opt[aria-checked="true"] .bk-opt-r { box-shadow: inset 0 0 0 1px var(--bk-text); }
.bk-opt[aria-checked="true"] .bk-opt-r::after { transform: scale(1); }
.bk-opt:focus-visible { outline-offset: 3px; }
.bk-hint { margin-top: 24px; font-size: 14px; line-height: 20px; color: var(--bk-faint); }
@media (hover: none) { .bk-hint { display: none; } }

/* inputs: 16px text, a soft grey focus ring */
.bk-in { width: 100%; height: 48px; padding: 0 16px; border-radius: 6px; border: 0; background: #0e0e0e; box-shadow: inset 0 0 0 1px var(--bk-ln2); color: var(--bk-text); font-size: 16px;
  transition: box-shadow 200ms var(--bk-ease), background-color 200ms var(--bk-ease); -webkit-appearance: none; appearance: none; }
.bk-in::placeholder { color: var(--bk-faint); }
.bk-in:hover { box-shadow: inset 0 0 0 1px #343434; }
.bk-in:focus, .bk-in:focus-visible { outline: none; background: #111; box-shadow: inset 0 0 0 1px #4a4a4a, var(--bk-ring); }
.bk-in[aria-invalid="true"] { box-shadow: inset 0 0 0 1px rgba(245, 245, 243, .55); }
textarea.bk-in { height: auto; min-height: 0; padding: 10px 16px; line-height: 24px; resize: none; }
.bk-msg { display: flex; align-items: flex-start; gap: 8px; margin-top: 6px; font-size: 14px; line-height: 20px; color: var(--bk-text); }
.bk-msg svg { width: 16px; height: 16px; flex: none; margin-top: 2px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }

/* the one loud control: the light pill */
.bk-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 24px; border-radius: 999px; flex: none;
  background: linear-gradient(#f7f7f5, #e4e4e2); color: #0b0b0b; font-size: 16px; font-weight: 500; letter-spacing: -0.005em; white-space: nowrap;
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .6); transition: filter 200ms var(--bk-ease), transform 200ms var(--bk-ease); }
.bk-btn:hover { filter: brightness(1.04); }
.bk-btn:active { transform: scale(.985); }
.bk-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 300ms var(--bk-ease); }
.bk-btn:hover svg { transform: translateX(3px); }
.bk-btn[disabled] { cursor: progress; filter: none; opacity: .85; }
.bk-gb { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; color: var(--bk-text); font-size: 15px; font-weight: 500;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); white-space: nowrap; transition: box-shadow 200ms var(--bk-ease), background-color 200ms var(--bk-ease); }
.bk-gb:hover { background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.bk-gb svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.bk-lnk { color: var(--bk-text2); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(245, 245, 243, .3); font-size: 16px; font-weight: 500;
  transition: color 200ms var(--bk-ease), text-decoration-color 200ms var(--bk-ease); }
.bk-lnk:hover { color: var(--bk-text); text-decoration-color: var(--bk-text); }

/* ---------- not a fit */
.bk-nf { margin-top: 32px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-width: 640px; }
.bk-nf a { display: flex; flex-direction: column; gap: 8px; padding: 24px; border-radius: 6px; background: #0e0e0e; box-shadow: inset 0 0 0 1px var(--bk-ln); transition: box-shadow 250ms var(--bk-ease); }
.bk-nf a:hover { box-shadow: inset 0 0 0 1px var(--bk-ln2); }
.bk-nf b { font-weight: 500; font-size: 18px; line-height: 26px; }
.bk-nf span { color: var(--bk-muted); font-size: 16px; }
.bk-nf-any { margin-top: 32px; }

/* ---------- calendar */
.bk-cal-hd { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; }
.bk-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bk-tz { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 40px; max-width: 280px; padding: 0 12px 0 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--bk-ln2);
  background: #0e0e0e; color: var(--bk-text); font-size: 15px; font-weight: 500; cursor: pointer; transition: box-shadow 200ms var(--bk-ease), background-color 200ms var(--bk-ease); }
.bk-tz:hover, .bk-tz[aria-expanded="true"] { box-shadow: inset 0 0 0 1px #343434; background: #111; }
.bk-tz:focus-visible { outline: none; box-shadow: inset 0 0 0 1px #4a4a4a, var(--bk-ring); }
.bk-cs svg { flex: none; pointer-events: none; fill: none; stroke: var(--bk-muted); stroke-linecap: round; stroke-linejoin: round; }
.bk-tz .gl { width: 16px; height: 16px; stroke-width: 1.4; }
.bk-cs .cv { width: 12px; height: 12px; stroke-width: 1.6; transition: transform 250ms var(--bk-ease); }
.bk-cs[aria-expanded="true"] .cv { transform: rotate(180deg); }
.bk-cs-v { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* v86: the custom dropdown (time zone, and the two chips on the details step). A dark #0b0b0b panel, #1e1e1e hairline, 6px
   corners, a soft shadow; for the time zone a search field on top and grouped zones under grey caps headers; each row the
   city (white), its current local time and UTC offset (grey) and a tick on the selected one. It opens with a scale from .98
   and a fade on the homepage ease. It lives in the dialog (so nothing clips it), placed under its trigger; on phones (v87)
   it is a panel nested inside the booking sheet with a back arrow header (see the phone block). */
.bk-pop { position: absolute; z-index: 20; left: 0; top: 0; width: 336px; max-width: calc(100% - 32px); display: flex; flex-direction: column; border-radius: 6px; background: #0b0b0b;
  box-shadow: inset 0 0 0 1px var(--bk-ln), 0 24px 64px -16px rgba(0, 0, 0, .85), 0 4px 16px rgba(0, 0, 0, .4); transform-origin: 50% 0; overflow: hidden; }
.bk-pop[hidden] { display: none; }
.bk-pop.sm { width: auto; min-width: 240px; }
.bk-pop-hd { display: none; }
.bk-pop-s { position: relative; flex: none; padding: 8px; border-bottom: 1px solid var(--bk-ln); }
.bk-pop-s svg { position: absolute; left: 22px; top: 50%; width: 16px; height: 16px; margin-top: -8px; fill: none; stroke: var(--bk-muted); stroke-width: 1.5; stroke-linecap: round; pointer-events: none; }
.bk-pop-s input { width: 100%; height: 40px; padding: 0 12px 0 38px; border: 0; border-radius: 6px; background: #111; box-shadow: inset 0 0 0 1px var(--bk-ln2); color: var(--bk-text); font-size: 16px;
  -webkit-appearance: none; appearance: none; transition: box-shadow 200ms var(--bk-ease); }
.bk-pop-s input::placeholder { color: var(--bk-faint); }
.bk-pop-s input:focus { outline: none; box-shadow: inset 0 0 0 1px #3a3a3a; }
.bk-pop-l { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 4px 8px; scrollbar-width: thin; scrollbar-color: #2a2a2a transparent; }
.bk-pop-g { padding: 12px 12px 4px; font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--bk-muted); }
.bk-pop-o { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 12px; border-radius: 6px; cursor: pointer; transition: background-color 150ms var(--bk-ease); }
.bk-pop-o.act { background: #161616; box-shadow: inset 0 0 0 1px #232323; }
.bk-pop-o .on { flex: 1 1 auto; min-width: 0; font-size: 16px; line-height: 24px; font-weight: 500; color: var(--bk-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-pop-o .om { flex: none; font-size: 14px; line-height: 20px; color: var(--bk-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bk-pop-o .ot { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--bk-text); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.bk-pop-o[aria-selected="true"] .ot { opacity: 1; }
.bk-pop-o[hidden], .bk-pop-gr[hidden] { display: none; }
.bk-pop-no { padding: 16px 12px; font-size: 14px; line-height: 20px; color: var(--bk-muted); }
.bk-pop-sc { position: absolute; z-index: 19; inset: 0; background: rgba(0, 0, 0, .55); }
.bk-pop-sc[hidden] { display: none; }
.bk-seg { display: inline-flex; padding: 3px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--bk-ln2); background: #0e0e0e; }
.bk-seg button { height: 34px; min-width: 48px; padding: 0 12px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--bk-muted); transition: background-color 250ms var(--bk-ease), color 250ms var(--bk-ease); }
.bk-seg button[aria-pressed="true"] { background: #232323; color: var(--bk-text); }
.bk-seg button:hover { color: var(--bk-text); }
.bk-seg button:focus-visible { outline-offset: 0; }

.bk-cal-bd { margin-top: 32px; display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); column-gap: 40px; align-items: start; }
.bk-mo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.bk-mo-t { font-family: var(--bk-display); font-size: 22px; line-height: 28px; font-weight: 500; letter-spacing: -0.01em; }
.bk-mo-t.roll { font-size: 20px; white-space: nowrap; }   /* v85: the rolling 5 week label ("October / November 2026") on one line */
.bk-mo-b { display: flex; gap: 4px; }
.bk-ib { width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; color: var(--bk-text2); box-shadow: inset 0 0 0 1px var(--bk-ln2);
  transition: background-color 200ms var(--bk-ease), box-shadow 200ms var(--bk-ease), opacity 200ms var(--bk-ease); }
.bk-ib:hover:not(:disabled) { background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px #3a3a3a; color: var(--bk-text); }
.bk-ib:disabled { opacity: .3; cursor: default; }
.bk-ib svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bk-grid { display: grid; gap: 4px; }
.bk-grid [role="row"] { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.bk-wd { height: 28px; display: grid; place-items: center; font-size: 14px; font-weight: 500; letter-spacing: .06em; color: var(--bk-muted); }
.bk-dc { aspect-ratio: 1; min-height: 40px; }
.bk-day { position: relative; width: 100%; height: 100%; border-radius: 6px; display: grid; place-items: center; font-size: 16px; font-weight: 500; font-variant-numeric: tabular-nums;
  color: var(--bk-off); transition: background-color 200ms var(--bk-ease), box-shadow 200ms var(--bk-ease), color 200ms var(--bk-ease); }
.bk-day.av { color: var(--bk-text); box-shadow: inset 0 0 0 1px var(--bk-ln2); background: #0e0e0e; }
.bk-day.av:hover { box-shadow: inset 0 0 0 1px #4a4a4a; background: #131313; }
.bk-day[aria-disabled="true"] { cursor: default; }
.bk-day.today::after { content: ""; position: absolute; left: 50%; bottom: 6px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--bk-dot); }
.bk-day[aria-selected="true"] { background: linear-gradient(#f7f7f5, #e4e4e2); color: #0b0b0b; box-shadow: none; }
.bk-day:focus-visible { outline-offset: 1px; }

.bk-slots-col { min-width: 0; }
.bk-sl-hd { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; margin-bottom: 12px; }
.bk-sl-t { font-family: var(--bk-display); font-size: 22px; line-height: 28px; font-weight: 500; letter-spacing: -0.01em; }
.bk-sl-n { font-size: 14px; color: var(--bk-muted); white-space: nowrap; }
.bk-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 32px 24px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--bk-ln); color: var(--bk-muted); font-size: 16px; }
.bk-empty svg { width: 20px; height: 20px; fill: none; stroke: var(--bk-muted); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.bk-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
/* a slot: picking one gives it the white ring and a small lime dot; nothing else in the grid moves */
.bk-slot { position: relative; height: 48px; border-radius: 999px; display: grid; place-items: center; font-size: 16px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--bk-text);
  background: #0e0e0e; box-shadow: inset 0 0 0 1px var(--bk-ln2); transition: box-shadow 250ms var(--bk-ease), background-color 250ms var(--bk-ease); }
.bk-slot::after { content: ""; position: absolute; left: 16px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--bk-dot); transform: scale(0); transition: transform 300ms var(--bk-ease); }
.bk-slot:hover { box-shadow: inset 0 0 0 1px #3a3a3a; }
.bk-slot[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--bk-text); background: #111; }
.bk-slot[aria-pressed="true"]::after { transform: scale(1); }
/* the Continue button: its own reserved row under the list, so nothing below jumps; it fades and rises in, opening out from the picked slot */
.bk-go-row { position: relative; height: 48px; margin-top: 16px; }
.bk-go { position: absolute; inset: 0; width: 100%; height: 48px; border-radius: 999px; display: flex; align-items: center; justify-content: center; gap: 10px;
  background: linear-gradient(#f7f7f5, #e4e4e2); color: #0b0b0b; font-size: 16px; font-weight: 500; box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .6); white-space: nowrap;
  opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 300ms var(--bk-ease), transform 420ms var(--bk-ease), visibility 0s linear 420ms; }
.bk-go.on { opacity: 1; visibility: visible; transform: none; transition: opacity 300ms var(--bk-ease), transform 480ms var(--bk-ease), visibility 0s; }
.bk-go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 300ms var(--bk-ease); }
.bk-go:hover svg { transform: translateX(3px); }
.bk-go:focus-visible { outline-offset: 3px; }
.bk-foot { margin-top: 16px; font-size: 14px; line-height: 20px; color: var(--bk-faint); }

/* phone day strip and the sheet's sticky button (hidden on desktop) */
.bk-strip-wrap { display: none; }
.bk-mbar { display: none; }

/* ---------- details: compact, two columns; the quiz answers are small editable chips, not asked again */
.bk-sum { display: flex; align-items: center; gap: 12px; padding: 4px 4px 4px 12px; border-radius: 6px; background: #0e0e0e; box-shadow: inset 0 0 0 1px var(--bk-ln); }
.bk-sum-ic { width: 32px; height: 32px; flex: none; border-radius: 6px; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--bk-ln2); }
.bk-sum-ic svg { width: 16px; height: 16px; fill: none; stroke: var(--bk-text); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.bk-sum-t { flex: 1; min-width: 0; font-size: 16px; line-height: 24px; font-weight: 500; }
.bk-chips { margin-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bk-chip { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px 0 0; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--bk-ln2); background: #0e0e0e;
  font-size: 14px; font-weight: 500; color: var(--bk-text); cursor: pointer; transition: box-shadow 200ms var(--bk-ease); }
.bk-chip:hover { box-shadow: inset 0 0 0 1px #3a3a3a; }
.bk-chip:focus-visible { outline: none; box-shadow: inset 0 0 0 1px #4a4a4a, var(--bk-ring); }
.bk-chip[aria-expanded="true"] { box-shadow: inset 0 0 0 1px #3a3a3a; }
.bk-chip .ck { padding-left: 14px; color: var(--bk-muted); font-weight: 500; white-space: nowrap; }
.bk-form { margin-top: 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.bk-f { min-width: 0; }
.bk-f.w { grid-column: 1 / -1; }
.bk-f > label, .bk-f > legend { display: block; margin-bottom: 6px; padding: 0; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--bk-muted); }
.bk-pair { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px 24px; align-items: start; }
.bk-rad { display: flex; flex-wrap: wrap; gap: 6px; }
.bk-rad label { position: relative; display: inline-flex; }
.bk-rad input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.bk-rad span { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 999px; font-size: 15px; font-weight: 500; color: var(--bk-text2);
  background: #0e0e0e; box-shadow: inset 0 0 0 1px var(--bk-ln2); white-space: nowrap; transition: box-shadow 200ms var(--bk-ease), color 200ms var(--bk-ease), background-color 200ms var(--bk-ease); }
.bk-rad span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--bk-dot); transform: scale(0); margin-right: -12px; transition: transform 300ms var(--bk-ease), margin 300ms var(--bk-ease); }
.bk-rad label:hover span { box-shadow: inset 0 0 0 1px #3a3a3a; color: var(--bk-text); }
.bk-rad input:checked + span { box-shadow: inset 0 0 0 1px var(--bk-text); color: var(--bk-text); background: #111; }
.bk-rad input:checked + span::before { transform: scale(1); margin-right: 0; }
.bk-rad input:focus-visible + span { box-shadow: inset 0 0 0 1px #4a4a4a, var(--bk-ring); }
.bk-rad input:checked:focus-visible + span { box-shadow: inset 0 0 0 1px var(--bk-text), var(--bk-ring); }
.bk-acts { grid-column: 1 / -1; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.bk-note { font-size: 14px; line-height: 20px; color: var(--bk-faint); }

/* ---------- confirmation */
.bk-ok-top { display: flex; align-items: center; gap: 24px; }
.bk-mark { position: relative; width: 48px; height: 48px; flex: none; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--bk-ln2); }
.bk-mark svg { width: 20px; height: 20px; fill: none; stroke: var(--bk-text); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bk-mark .dot { position: absolute; right: 2px; top: 2px; width: 8px; height: 8px; border-radius: 50%; background: var(--bk-dot); box-shadow: 0 0 0 3px var(--bk-pn); }
.bk-mark .ring { position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(245, 245, 243, .5); opacity: 0; pointer-events: none; }
.bk-ok-p { margin-top: 16px; font-size: 18px; line-height: 28px; color: var(--bk-muted); max-width: 620px; }
.bk-ok-p b { color: var(--bk-text); font-weight: 500; overflow-wrap: anywhere; }
.bk-ok-bd { margin-top: 32px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.bk-card { border-radius: 6px; background: #0e0e0e; box-shadow: inset 0 0 0 1px var(--bk-ln); }
.bk-card-hd { display: flex; align-items: center; gap: 12px; padding: 20px 24px; border-bottom: 1px solid var(--bk-ln); }
.bk-meet { width: 40px; height: 40px; border-radius: 6px; flex: none; display: grid; place-items: center; background: #151515; box-shadow: inset 0 0 0 1px var(--bk-ln2); }
.bk-meet svg { width: 22px; height: 22px; }
.bk-card-hd b { display: block; font-weight: 500; font-size: 16px; }
.bk-card-hd span { display: block; font-size: 14px; color: var(--bk-muted); }
.bk-rows { padding: 4px 24px; }
.bk-rows div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; font-size: 16px; }
.bk-rows div + div { border-top: 1px solid var(--bk-ln); }
.bk-rows dt { color: var(--bk-muted); }
.bk-rows dd { margin: 0; text-align: right; font-weight: 500; }
.bk-add { padding: 20px 24px; border-top: 1px solid var(--bk-ln); }
.bk-add .bk-lbl { margin-bottom: 12px; }
.bk-add-l { display: flex; flex-wrap: wrap; gap: 8px; }
.bk-next .bk-lbl { margin-bottom: 16px; }
.bk-next ol { display: grid; }
.bk-next li { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 16px; padding: 16px 0; border-top: 1px solid var(--bk-ln); color: var(--bk-text2); }
.bk-next li:last-child { border-bottom: 1px solid var(--bk-ln); }
.bk-next-wa { margin-top: 24px; }
.done-anim .bk-mark .dot { animation: bkDot 900ms var(--bk-ease) 200ms both; }
.done-anim .bk-mark .ring { animation: bkRing 1100ms var(--bk-ease) 260ms both; }
.done-anim .bk-rise { animation: bkRise 700ms var(--bk-ease) both; animation-delay: calc(var(--d, 0) * 1ms); }
@keyframes bkDot { 0% { transform: scale(0); } 45% { transform: scale(1.6); } 100% { transform: scale(1); } }
@keyframes bkRing { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(2.2); } }
@keyframes bkRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ---------- short laptop screens (1280x720): a little tighter so the details step still fits without scrolling */
@media (min-width: 640px) and (max-height: 760px) {
  .bk-dlg { max-height: calc(100vh - 48px); }
  .bk-x { top: 24px; right: 24px; }
  .bk-info { padding: 24px; gap: 24px; }
  .bk-alt { padding-top: 20px; }
  .bk-alt-p { display: none; }
  .bk-flow { padding: 16px 28px 16px; }
  .bk-top { margin-bottom: 12px; }
  .bk-q { font-size: 32px; line-height: 36px; }
  .bk-opts { margin-top: 24px; }
  .bk-cal-bd { margin-top: 20px; }
  .bk-dc { min-height: 36px; }
  .bk-form { margin-top: 16px; gap: 12px 16px; }
  .bk-in { height: 44px; }
  textarea.bk-in { padding: 8px 16px; line-height: 22px; }
  .bk-ok-bd { margin-top: 24px; }
}
@media (max-width: 1023.98px) and (min-width: 640px) {
  .bk-cell { grid-template-columns: minmax(0, 1fr); }
  .bk-info { order: 2; }
  .bk-alt { margin-top: 0; }
}
@media (max-width: 899.98px) {
  .bk-cal-bd { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .bk-ok-bd { grid-template-columns: minmax(0, 1fr); }
}
/* ---------- phone: a full height bottom sheet; the flow first, the call info under it; Continue pinned to the sheet's foot */
@media (max-width: 639.98px) {
  .bk { place-items: end stretch; }
  .bk-dlg { width: 100%; height: calc(100% - 16px); height: calc(100dvh - 16px); border-radius: 12px 12px 0 0; box-shadow: inset 0 1px 0 var(--bk-ln), 0 -24px 64px -16px rgba(0, 0, 0, .7); }
  .bk-grab { display: block; flex: none; height: 52px; position: relative; }
  .bk-grab::before { content: ""; position: absolute; left: 50%; top: 8px; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: #3a3a3a; }
  .bk-x { top: 8px; right: 12px; }
  .bk-cell { padding: 0 8px 8px; grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .bk-info { order: 2; padding: 24px 20px; gap: 24px; }
  .bk-alt { margin-top: 0; }
  .bk-flow { padding: 16px 16px 24px; }
  .bk-top { margin-bottom: 16px; padding-right: 0; }
  .bk-q { font-size: 28px; line-height: 32px; }
  .bk-qs { font-size: 16px; line-height: 24px; }
  .bk-opts { grid-template-columns: minmax(0, 1fr); margin-top: 24px; }
  .bk-opts > .bk-opt:last-child:nth-child(odd) { grid-column: auto; }
  .bk-opt { min-height: 64px; padding: 16px; }
  .bk-opt-t { font-size: 17px; }
  .bk-nf { grid-template-columns: minmax(0, 1fr); }
  .bk-cal-hd { align-items: stretch; flex-direction: column; }
  .bk-tools { justify-content: space-between; flex-wrap: nowrap; }
  .bk-tz { flex: 1; min-width: 0; }
  .bk-tz { max-width: none; }
  .bk-cs-v { flex: 1 1 auto; text-align: left; }
  /* v87: on phones the time zone list is a panel nested INSIDE the booking sheet (under its one grab handle), sliding in
     from the right over the flow with a back arrow "Time zone" header; no second sheet, no second handle, no dim */
  .bk-pop.bk-sheet { left: 8px !important; right: 8px; top: 52px !important; bottom: 8px; width: auto; max-width: none; max-height: none !important; border-radius: 6px; transform-origin: 50% 50%;
    box-shadow: inset 0 0 0 1px var(--bk-ln); padding-bottom: env(safe-area-inset-bottom); }
  .bk-pop.bk-sheet .bk-pop-hd { display: flex; align-items: center; gap: 8px; padding: 12px 16px 4px 8px; }
  .bk-pop-bk { flex: none; width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; color: var(--bk-text2); }
  .bk-pop-bk svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .bk-pop-hd b { font-family: var(--bk-display); font-size: 20px; line-height: 28px; font-weight: 500; color: var(--bk-text); }
  .bk-pop.bk-sheet .bk-pop-s { padding: 8px 16px 12px; }
  .bk-pop.bk-sheet .bk-pop-s svg { left: 30px; }
  .bk-pop.bk-sheet .bk-pop-s input { height: 48px; }
  .bk-pop.bk-sheet .bk-pop-l { padding: 4px 8px 16px; }
  .bk-pop.bk-sheet .bk-pop-o { min-height: 52px; }
  .bk-cal-bd { margin-top: 24px; }
  .bk-grid-col { display: none; }
  .bk-strip-wrap { display: block; margin: 0 -16px; }
  .bk-strip-mo { padding: 0 16px; margin-bottom: 12px; font-family: var(--bk-display); font-size: 20px; line-height: 28px; font-weight: 500; }
  .bk-strip { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px; padding: 2px 16px 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .bk-strip::-webkit-scrollbar { display: none; }
  .bk-chipd { position: relative; flex: none; width: 60px; height: 76px; border-radius: 6px; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    color: var(--bk-off); transition: background-color 200ms var(--bk-ease), box-shadow 200ms var(--bk-ease), color 200ms var(--bk-ease); }
  .bk-chipd .cdw { font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: .06em; }
  .bk-chipd .cdn { font-size: 20px; line-height: 26px; font-weight: 500; font-variant-numeric: tabular-nums; }
  .bk-chipd.av { color: var(--bk-text); background: #0e0e0e; box-shadow: inset 0 0 0 1px var(--bk-ln2); }
  .bk-chipd.av .cdw { color: var(--bk-muted); }
  .bk-chipd.today::after { content: ""; position: absolute; left: 50%; bottom: 6px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--bk-dot); }
  .bk-chipd[aria-pressed="true"] { background: linear-gradient(#f7f7f5, #e4e4e2); color: #0b0b0b; box-shadow: none; }
  .bk-chipd[aria-pressed="true"] .cdw { color: rgba(11, 11, 11, .6); }
  .bk-chipd:focus-visible { outline-offset: 1px; }
  .bk-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bk-slot { height: 52px; border-radius: 6px; }
  .bk-go-row { display: none; }
  .bk-sl-t { font-size: 20px; }
  .bk-mbar { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; display: block; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: rgba(23, 23, 23, .9); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: inset 0 1px 0 var(--bk-ln);
    transform: translateY(110%); transition: transform 450ms var(--bk-ease); }
  .bk-mbar.on { transform: none; }
  .bk-mbar .bk-btn { width: 100%; height: 52px; }
  .bk-dlg.has-mbar .bk-sc { padding-bottom: 84px; }
  .bk-sum { flex-wrap: wrap; padding: 8px 8px 8px 12px; }
  .bk-sum-t { flex-basis: calc(100% - 48px); }
  .bk-form { grid-template-columns: minmax(0, 1fr); }
  .bk-pair { grid-template-columns: minmax(0, 1fr); }
  .bk-rad { flex-wrap: wrap; }
  .bk-acts .bk-btn { width: 100%; }
  .bk-ok-top { align-items: flex-start; flex-direction: column; gap: 16px; }
  .bk-ok-p { font-size: 16px; line-height: 24px; }
  .bk-rows div { flex-direction: column; gap: 2px; }
  .bk-rows dd { text-align: left; }
}
/* ---------- reduced motion: instant swaps, opacity only, no glow */
@media (prefers-reduced-motion: reduce) {
  .bk *, .bk *::before, .bk *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0ms !important; }
}

/* ======================================================================
   v99: the mobile and tablet pass (Dylan: "a load of sections not optimised for mobile"). Every rule below sits in a
   max-width query under 1024, so desktop (1024 and up) is untouched. The phone rhythm: 24px side gutters, heading cells
   64px over / 32px under (tablet 72 / 40), 24px panel padding, every control at least 44 x 44.
   ====================================================================== */
@media (max-width: 1023.98px) {
  /* the sticky nav clears the notch / rounded corners when the page runs edge to edge (viewport-fit=cover) */
  header.nav { padding-top: env(safe-area-inset-top); }
  header.nav > .nav-in { padding-left: max(var(--s4), env(safe-area-inset-left)); padding-right: max(var(--s4), env(safe-area-inset-right)); }
  footer.ft { padding-bottom: calc(var(--s5) + env(safe-area-inset-bottom)); }
  /* text: balanced headings, no lone last words in paragraphs */
  main.wrap h2, .cd-t, .cz-b, .bk-q, #fcH { text-wrap: balance; }
  .sec-sub, .cd-p, .cz-t, #sub, .ft-line, .fq-a p, .bk-qs { text-wrap: pretty; }
  /* the hero's page arrows: 44px targets */
  .dn-b { width: 44px; height: 44px; }
  /* Results: the 100vh floor of the screenshot panel follows the small viewport (no jump when the URL bar slides) */
  .cz-v { min-height: max(380px, min(440px, calc(100svh - 301px))); }
  /* How we work stacked: the head is a heading cell like every other section (it was a panel, 24px further in) */
  .ps-hd { margin: 0 calc(var(--gutter) * -1) 8px; padding: 72px var(--gutter) 40px; border-radius: 0; background: none; border-bottom: 1px solid var(--ln); }
  .ps-sec .ps-hd .sec-sub { max-width: 440px; }
  /* tablet heading cells: one rhythm (72 over, 40 under) for every section */
  main.wrap > .rs-sec > .sec-h, main.wrap > .rv-sec > .sec-h { padding-top: 72px; padding-bottom: 40px; }
  /* footer links: 44px tall rows */
  .ft-ls a, .ft-legal a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  .ft-ls { gap: 0; }
  .ft-h { margin-bottom: 4px; }
  /* the booking footnote is a sentence: body size */
  .bk-foot { font-size: 16px; line-height: 24px; }
  footer.ft .brand { min-height: 44px; }
  /* booking (sheet on phones, dialog on tablets): every control 44px */
  .bk-x, .bk-pop-bk, .bk-ib { width: 44px; height: 44px; }
  .bk-back, .bk-tz, .bk-gb, .bk-chip, .bk-rad span, .bk-pop-s input { height: 44px; }
  .bk-seg { padding: 0; }
  .bk-seg button { height: 44px; }
  .bk-rad { gap: 8px; }
  .bk-lnk { display: inline-flex; align-items: center; min-height: 44px; }
  .bk-mail a { display: inline-block; padding: 12px 0; margin: -12px 0; }
  /* FAQ ask row: a 44px input and send target (the send dot stays 32px, painted in the content box) */
  .fq-in { height: 44px; }
  .fq-go { width: 44px; height: 44px; margin: -6px; padding: 6px; background-clip: content-box; }
  .ak-cta { min-height: 44px; }
}

/* ---------- the nav menu (under 901, where the links hide): one button opens the links as a panel under the nav */
.nav-mb { display: none; }
@media (max-width: 900px) {
  header.nav .nav-in { grid-template-columns: 1fr auto auto; column-gap: 8px; }
  .nav-mb { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -10px; border: 0; border-radius: 999px; background: none; color: var(--text); cursor: pointer; }
  .nav-mb:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; }
  .nav-mb svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; overflow: visible; }
  .nav-mb path { transition: transform 260ms var(--ease), opacity 200ms var(--ease); transform-origin: 10px 10px; }
  header.nav.mo .nav-mb .t { transform: translateY(3.5px) rotate(45deg); }
  header.nav.mo .nav-mb .b { transform: translateY(-3.5px) rotate(-45deg); }
  header.nav .nav-links { position: absolute; left: -1px; right: -1px; top: 100%; display: none; flex-direction: column; gap: 0; margin: 0;
    padding: 8px var(--gutter) 16px; border: 1px solid var(--ln); border-top: 0;
    background: #0b0b0b; font-size: 18px; color: var(--text); }
  header.nav.mo .nav-links { display: flex; }
  header.nav .nav-links a { display: flex; align-items: center; min-height: 52px; padding: 0; border-radius: 0; color: var(--text); }
  header.nav .nav-links a + a { border-top: 1px solid var(--ln); }
  header.nav .nav-links a:focus-visible { outline-offset: -2px; }
  header.nav .nav-hl { display: none; }
  @media (prefers-reduced-motion: no-preference) {
    header.nav.mo .nav-links { animation: navMo 280ms var(--ease) both; }
  }
}
@keyframes navMo { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) {
  header.nav .nav-cta { height: 44px; }
  header.nav .brand { min-height: 44px; }
}

/* ---------- tablets (601 to 900): the hero's two CTAs sit side by side at the phone's 52px height (they were two narrow
   stacked pills); the Results tabs size to their names so no name breaks over three lines */
@media (min-width: 601px) and (max-width: 900px) {
  #top .lead .cta-row { flex-direction: row; flex-wrap: nowrap; gap: 16px; }
  #top .lead .cta-row .cta-bar, #top .lead .cta-row .wa { height: 52px; width: auto; flex: 0 0 auto; }
  #top .lead .cta-row .cta-bar { --av: 40px; padding-left: 6px; }
}
@media (min-width: 640px) and (max-width: 1023.98px) {
  .cz-tb .cz-tabs { grid-template-columns: repeat(5, auto); }
  .cz-tab { padding: 12px 16px; }
}

/* ---------- small phones (under 375, e.g. 360): the headline at 28px so it sets in five lines, not six, and the Book a call pill
   clears the fold on a 640 tall screen */
@media (max-width: 374.98px) {
  #top .lead #h1 { font-size: 28px; line-height: 31px; }
}

/* ---------- phones (under 640) */
@media (max-width: 639.98px) {
  :root { --navh: calc(64px + env(safe-area-inset-top)); }
  /* heading cells: 64 over, 32 under, in every section */
  main.wrap .sec-h, main.wrap > .rs-sec > .sec-h, main.wrap > .rv-sec > .sec-h, .ps-hd { padding-top: 64px; padding-bottom: 32px; }
  .lw-k { padding-top: 32px; padding-bottom: 32px; }
  /* problem: 24px panel padding like every other panel; the drawing slot is cropped to 16:10 (its empty top and foot go) */
  .pp-grid .cd { padding: 24px; }
  .pp-grid .pp-art { position: relative; aspect-ratio: 16 / 10; overflow: hidden; margin-bottom: 16px; }
  .pp-grid .pp-art .pp-svg { position: absolute; left: 0; top: 50%; width: 100%; height: auto; aspect-ratio: 4 / 3; transform: translateY(-50%); }
  /* Results: tabs as wide as their names (no name cut inside its tab), the strip snaps; stat panels shorter */
  .cz-tab { width: auto; min-width: 136px; }
  .cz-n { font-size: 48px; }
  .cz-s { padding-bottom: 96px; }
  /* FAQ ask row: the prompt fits on one line at 16px (it was cut at 18px) */
  .fq-in { font-size: 16px; }
  /* footer: the legal links get room between them */
  .ft-legal { display: flex; gap: 24px; }
  .bk-x { top: 6px; right: 10px; }
  /* the day strip: five and a half days across, so the half day says "swipe for more" */
  .bk-chipd { width: calc((100% - 40px) / 5.5); min-width: 52px; }
}

/* ======================================================================
   v100 leftovers (v99 review)
   ====================================================================== */
/* a. hero scroll hint: under the phone, never on it. 1280 and up: in the caption row, left of the arrows (vertically
   centred on them). Under 1280: stacked above the arrows, centred, 12px over them. No shade (it no longer sits on a screen). */
.stage-cap { position: relative; }
.stage-cap > .sh { position: absolute; left: var(--px, 24px); right: auto; top: 0; bottom: 0; height: auto; display: flex; align-items: center;
  padding: 0; padding-top: inherit; padding-bottom: inherit; background: none; z-index: 2; }
.stage-cap > .sh.away { opacity: 0; visibility: hidden; }
@media (max-width: 1279.98px) {   /* under 1280 the caption row is too narrow for the pill beside the arrows (they touched at 1024 to 1100) */
  .stage-cap { flex-direction: column; gap: 12px; }
  .stage-cap > .sh { position: static; padding: 0; }
}
/* b. phone menu: while open, the nav and the panel are one solid surface (the 80% glass nav let the logo wall show through
   above the solid panel, and the panel's 6px slide opened a see-through strip under the nav). The panel overlaps the nav
   by 1px (no seam at fractional DPRs) and opens as a solid wipe (no fade, no slide). */
@media (max-width: 900px) {
  header.nav.mo { background: #0b0b0b; -webkit-backdrop-filter: none; backdrop-filter: none; }
  header.nav .nav-links { top: calc(100% - 1px); box-shadow: inset 0 1px 0 var(--ln); }
}
@keyframes navMo { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }   /* a solid wipe down from the nav: never see-through */
/* c. booking sheet: the scroll room under the content covers the Continue bar's full height on any phone (12 + 52 + 12px,
   plus the home bar inset it grows by) and 32px of air, so the footnote and the last panel clear it at the end */
@media (max-width: 639.98px) {
  .bk-dlg.has-mbar .bk-sc { padding-bottom: calc(108px + var(--sab, env(safe-area-inset-bottom, 0px))); }
  .bk-mbar { padding-bottom: calc(12px + var(--sab, env(safe-area-inset-bottom, 0px))); }
}
/* ===================== seo-v2 ADDITIONS (new rules; see CHECKS.md, craft audit) ===================== */
/* Everything below is new for the SEO pages. It only adds components the homepage does not have (breadcrumbs, the hero
   visual panels, the service cards' link, the article layout, the author card) and seats homepage components in new places.
   It uses the homepage's own tokens: the frame lines (--ln), the grey cell (--hc #171717), #0b0b0b panels seated 8px in,
   6px panel corners (16px for Results panels), the 8pt scale, Inter Display / Articulat CF, greys only, lime only as small
   non text accents, the page easing cubic-bezier(.22, 1, .36, 1). No borders, outlines, highlights or gradients on panels. */

/* skip link: off screen until focused */
.skip { position: absolute; left: 16px; top: -120px; z-index: 2000; display: inline-flex; align-items: center; height: 44px; padding: 0 20px; border-radius: 999px;
  background: #f5f5f3; color: #0b0b0b; font-size: 15px; font-weight: 500; }
.skip:focus, .skip:focus-visible { top: 12px; outline: 2px solid #f5f5f3; outline-offset: 3px; }

/* the current nav link (aria-current) reads as hovered */
.nav-links a[aria-current="page"] { color: var(--text); }

/* ---------- breadcrumbs: the first line of the hero's headline panel */
.crumbs { margin: 0 0 24px; }
.crumbs ol { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; row-gap: 0;
  font-family: var(--sans); font-size: 14px; line-height: 20px; font-weight: 500; color: var(--muted); }
.crumbs li { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.crumbs a { color: var(--text-2); transition: color 180ms var(--ease); }
.crumbs a:hover, .crumbs a:focus-visible { color: var(--text); }
.crumbs svg { width: 12px; height: 12px; flex: none; fill: none; stroke: rgba(245, 245, 243, .32); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.crumbs [aria-current] { color: var(--muted); }
.crumbs, .crumbs * { -webkit-user-select: none; user-select: none; }
.crumbs a, .crumbs [aria-current] { -webkit-user-select: text; user-select: text; }
.lead .crumbs { animation: hl-rise-s .5s cubic-bezier(.22, 1, .36, 1) 60ms backwards; }
@media (prefers-reduced-motion: reduce) { .lead .crumbs { animation: none; } }
@media (max-width: 639.98px) {
  .crumbs { margin-bottom: 12px; }
  .crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
  .crumbs [aria-current] { display: inline-flex; align-items: center; min-height: 44px; }
}

/* the headline panel's eyebrow takes the Shopify Partner badge's place (#status keeps the badge's spacing rules) */
.lead .sec-k#status { height: auto; padding: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.lead .sec-k#status::before, .lead .sec-k#status::after { content: none; }

/* the hero stats row: published figures, each with its source */
.hs a { display: inline-flex; align-items: center; gap: 6px; color: inherit; transition: color 180ms var(--ease); }
.hs a:hover .hs-l, .hs a:focus-visible .hs-l { color: var(--text); }
.hs .hs-go { color: var(--text-2); font-weight: 500; }
.hs .hs-go svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform 220ms var(--ease); }
.hs a:hover .hs-go svg { transform: translateX(2px); }
@media (max-width: 639.98px) { .hs a { min-height: 44px; } }

/* case study facts under the headline (client, industry, service, updated) */
.cs-meta { margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); column-gap: 40px; row-gap: 12px; }
.cs-meta div { min-width: 0; }
.cs-meta dt { font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cs-meta dd { margin: 4px 0 0; font-size: 16px; line-height: 24px; color: var(--text); }
.cs-meta a { text-decoration: underline; text-decoration-color: rgba(245, 245, 243, .3); text-underline-offset: 4px; transition: text-decoration-color 180ms var(--ease); }
.cs-meta a:hover { text-decoration-color: var(--text); }
@media (min-width: 901px) and (max-height: 820px) { .cs-meta { margin-top: 16px; row-gap: 8px; } }
@media (max-width: 639.98px) { .cs-meta a { display: inline-flex; align-items: center; min-height: 44px; } }

/* the post byline */
.byl { margin: 24px 0 0; display: flex; align-items: center; gap: 12px; }
.byl img { width: 40px; height: 40px; flex: none; border-radius: 999px; object-fit: cover; background: #cfcfcf; }
.byl p { margin: 0; display: flex; flex-wrap: wrap; column-gap: 16px; row-gap: 2px; font-size: 14px; line-height: 20px; color: var(--muted); }
.byl b { font-weight: 500; color: var(--text); }
.byl a { color: var(--text); text-decoration: underline; text-decoration-color: rgba(245, 245, 243, .3); text-underline-offset: 4px; }
@media (max-width: 639.98px) { .byl a { display: inline-flex; align-items: center; min-height: 44px; } .byl p { align-items: center; } }

/* ---------- hero visual panels (the stage's place): a #0b0b0b panel with the dot grid */
.hero .hx { position: relative; overflow: hidden; isolation: isolate; min-width: 0; }
@media (max-width: 900px) { .hero .hx { min-height: 600px; } }
@media (max-width: 639.98px) { .hero .hx { min-height: 520px; } }

/* the dot grid: the Results stat panels' field (2x2 px squares, 10px pitch, 13% white), fading in from the top and the sides */
.dg::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Crect width='2' height='2' fill='%23fff' fill-opacity='.13'/%3E%3C/svg%3E");
  background-size: 10px 10px; background-position: 4px 4px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 96px, #000 calc(100% - 40px), transparent), linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(180deg, transparent, #000 96px, #000 calc(100% - 40px), transparent), linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent);
  mask-composite: intersect; }
.dg > * { position: relative; z-index: 1; }

/* a phone in a hero panel: the Results phone (.cz-dv) at a larger size */
.hx .cz-dv { position: absolute; z-index: 1; left: auto; top: auto; margin: 0; width: var(--pw); height: calc(var(--pw) * 568 / 268); }
.hx .cz-dv .cz-sc { border-radius: calc(var(--pw) * .127); clip-path: inset(0 round calc(var(--pw) * .127)); }
.hx .cz-dv { border-radius: calc(var(--pw) * .149); }
.hx .cz-pg img { display: block; width: 100%; height: auto; }

/* product page hero: the Hound Nutrition page in a phone, its first published figure in a stat panel beside it */
.hx-pp { --pw: 300px; }
.hx-pp .cz-dv { right: 40px; top: 56px; }
.hx-pp .hx-st { position: absolute; z-index: 2; left: 40px; bottom: 40px; width: calc(100% - var(--pw) - 40px - 40px - 24px); max-width: 340px; }
.hx-cap { position: absolute; z-index: 2; left: 40px; top: 48px; width: calc(100% - var(--pw) - 40px - 40px - 32px); max-width: 320px; }
.hx-cap .sec-k { margin: 0 0 8px; }
.hx-cap p:not(.sec-k) { margin: 0; font-family: var(--display); font-size: 24px; line-height: 32px; font-weight: 500; letter-spacing: -0.01em; color: var(--text); }
.hx-cap a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 8px; font-size: 16px; line-height: 24px; font-weight: 500; color: var(--text-2); transition: color 180ms var(--ease); }
.hx-cap a svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform 220ms var(--ease); }
.hx-cap a:hover { color: var(--text); } .hx-cap a:hover svg { transform: translateX(2px); }
@media (min-width: 901px) and (max-width: 1199.98px) { .hx-pp { --pw: 240px; } .hx-pp .cz-dv { right: 24px; } .hx-pp .hx-st { left: 24px; width: calc(100% - var(--pw) - 24px - 24px - 16px); } .hx-cap { left: 24px; top: 32px; width: calc(100% - var(--pw) - 64px); } }
@media (min-width: 901px) and (max-height: 820px) { .hx-pp { --pw: 270px; } .hx-pp .cz-dv { top: 40px; } }
@media (min-width: 640px) and (max-width: 900px) { .hx-pp .cz-dv { right: 48px; top: 48px; } .hx-pp .hx-st { width: calc(100% - var(--pw) - 48px - 40px - 32px); } .hx-cap { width: calc(100% - var(--pw) - 48px - 40px - 32px); } }
@media (max-width: 639.98px) {
  .hx-pp { --pw: 220px; }
  .hx-pp .cz-dv { right: auto; left: 50%; top: 152px; margin-left: -110px; }
  .hx-pp .hx-st { left: 16px; right: 16px; bottom: 16px; width: auto; max-width: none; }
  .hx-cap { left: 24px; right: 24px; top: 24px; width: auto; max-width: none; }
  .hx-cap p:not(.sec-k) { font-size: 20px; line-height: 28px; }
}

/* case study hero: three phones on the dot grid, the page's top in front, two further screens either side, dimmed and set
   back like the homepage carousel's side phones */
.hx-3 { --pw: 300px; }
.hx-3 .cz-dv { left: 50%; top: 50%; margin: 0; transform: translate(-50%, -50%); }
.hx-3 .cz-dv.sd { transform: translate(calc(-50% + var(--x)), -50%) scale(.9); }
.hx-3 .cz-dv.sd::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; background: #0b0b0b; opacity: .6; pointer-events: none; }
.hx-3 .cz-dv.l { --x: calc(var(--pw) * -.96 - 48px); }
.hx-3 .cz-dv.r { --x: calc(var(--pw) * .96 + 48px); }
.hx-3 .cz-pg { transform: translate3d(0, var(--y, 0px), 0); }
@media (min-width: 901px) and (max-height: 820px) { .hx-3 { --pw: 280px; } }
@media (max-width: 639.98px) { .hx-3 { --pw: 220px; } .hx-3 .cz-dv.l { --x: calc(var(--pw) * -.96 - 24px); } .hx-3 .cz-dv.r { --x: calc(var(--pw) * .96 + 24px); } }

/* post hero: the In short answer card on the dot grid, a drawing above it */
.hx-is { display: flex; flex-direction: column; justify-content: flex-end; padding: 40px; }
.hx-is .pp-art { position: absolute; left: 0; right: 0; top: 0; bottom: 40%; margin: 0; aspect-ratio: auto; z-index: 1; }
.hx-is .pp-art .pp-svg { position: absolute; inset: 0; }
.is { position: relative; z-index: 2; padding: 32px; border-radius: 16px; background: #141414; }
.is .sec-k { margin: 0 0 16px; }
.is p.is-a { margin: 0; font-family: var(--display); font-size: 22px; line-height: 32px; font-weight: 500; letter-spacing: -0.01em; color: var(--text); text-wrap: pretty; }
.is .is-src { margin: 16px 0 0; font-size: 14px; line-height: 20px; color: var(--muted); }
.is .is-src a { display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; color: var(--text-2); text-decoration: underline; text-decoration-color: rgba(245, 245, 243, .3); text-underline-offset: 4px; }
.is .is-src a:hover { color: var(--text); text-decoration-color: var(--text); }
@media (min-width: 901px) and (max-width: 1199.98px) { .hx-is { padding: 24px; } .is { padding: 24px; } .is p.is-a { font-size: 20px; line-height: 28px; } }
@media (min-width: 901px) and (max-height: 820px) { .is p.is-a { font-size: 20px; line-height: 30px; } .hx-is .pp-art { bottom: 46%; } }
@media (max-width: 900px) { .hero .hx-is { min-height: 640px; } }
@media (max-width: 639.98px) { .hx-is { padding: 16px; } .is { padding: 24px; } .is p.is-a { font-size: 18px; line-height: 28px; } .hero .hx-is { min-height: 600px; } .hx-is .pp-art { bottom: 52%; } }

/* Overnight 1A: the service, solution and positive drawings are lit WHITE with one LIME edge. Red (--pain-accent) stays the
   homepage Problem section's own and is not set anywhere on these pages. The lit faces use the homepage red slab's face
   shading (top brightest, left darker, right darkest) in white; lime is a single 1.5px edge, the CRO line and its tip. */
.pp-svg .wt, .pp-svg .wl, .pp-svg .wr { fill: #f5f5f3; stroke: none; }
.pp-svg .wt { fill-opacity: .5; } .pp-svg .wl { fill-opacity: .22; } .pp-svg .wr { fill-opacity: .1; }
.pp-svg .wo { fill: none; stroke: rgba(255, 255, 255, .86); stroke-width: 1; }
.pp-svg .le, .pp-svg .lm { fill: none; stroke: #A3E635; stroke-width: 1.5; }
.pp-svg .lmd { fill: #A3E635; stroke: none; }
.pp-svg .nd { fill: #f5f5f3; stroke: none; }

/* ---------- sections that end in a grey cell run it to the next line (as the homepage's problem section) */
main.wrap > .gc-sec { position: relative; z-index: 1; padding-bottom: 0; }

/* a grey cell holding #0b0b0b panels seated 8px in (the hero, problem and Results cells' recipe) */
.gc { position: relative; margin: -8px -8px 0; padding: 8px; background: var(--hc); display: grid; gap: 8px; }
.gp { position: relative; min-width: 0; padding: 32px; border-radius: 6px; background: #0b0b0b; }
.gc-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gc-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .gc-2, .gc-3 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 639.98px) {
  .gc { margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); padding: 8px var(--gutter); }
  .gp { padding: 24px; }
}
ul.gc, ol.gc { list-style: none; }
.js .gc > .sr { opacity: 1; transform: none; }
.js .gc > .sr > * { opacity: 0; transform: translateY(10px); }
.js .gc > .sr.on > * { opacity: 1; transform: none; transition: opacity 400ms cubic-bezier(.22, 1, .36, 1), transform 400ms cubic-bezier(.22, 1, .36, 1); transition-delay: calc(var(--i, 0) * 70ms); }
@media (prefers-reduced-motion: reduce) { .js .gc > .sr > * { opacity: 1 !important; transform: none !important; transition: none !important; } }

/* ---------- service cards: the Problem card (.pp-grid .cd) with a link at its foot */
main.wrap .sv-grid { margin-top: -8px; }
.cd-go { margin-top: auto; padding-top: 24px; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-size: 16px; line-height: 24px; font-weight: 500; color: var(--text-2); transition: color 180ms var(--ease); }
.cd-go svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform 220ms var(--ease); }
.cd-go:hover, .cd-go:focus-visible { color: var(--text); }
.cd-go:hover svg, .cd-go:focus-visible svg { transform: translateX(2px); }
.cd-go .pl { margin-left: 4px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--muted); }
.pp-grid .cd .cd-p { max-width: 440px; }
/* the wide card (Conversion Rate Optimisation): words at the left, the drawing at the right */
.pp-grid > .sv-wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr auto auto auto auto 1fr; column-gap: 32px; }
.pp-grid > .sv-wide .pp-art { grid-column: 2; grid-row: 1 / -1; margin: 0; align-self: center; }
.pp-grid > .sv-wide .cd-i { grid-column: 1; grid-row: 2; } .pp-grid > .sv-wide .cd-t { grid-column: 1; grid-row: 3; }
.pp-grid > .sv-wide .cd-p { grid-column: 1; grid-row: 4; } .pp-grid > .sv-wide .cd-go { grid-column: 1; grid-row: 5; }
@media (min-width: 901px) { @supports (height: round(down, 1px, 1px)) { .pp-grid > .sv-wide .pp-art { height: 264px; } } }
@media (max-width: 900px) { .pp-grid > .sv-wide { grid-template-rows: 1fr auto auto auto auto 1fr; } }
@media (max-width: 600px) { .pp-grid > .sv-wide { display: flex; } }
@media (min-width: 901px) { .pp-grid.sv-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  @supports (height: round(down, 1px, 1px)) { .pp-grid.sv-2 .pp-art { height: round(down, calc(((100cqi + 16px) / 2 - 64px) * .6), 1px); } } }

/* ---------- How we work cards standing alone in panels (Polar style tiles, flat): the card centred on the dot grid, the
   step under it */
.hwp { display: flex; flex-direction: column; padding: 8px; }
.hwt { position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center; min-height: 440px; padding: 48px 24px; border-radius: 6px; }
.hwt .hwx { width: 100%; max-width: 384px; }
@media (min-width: 640px) { .hwt { height: 520px; } }
.hwt .hw { width: 100%; }
.hwp .hwc { padding: 24px 24px 24px; }
.hwp .cd-i { margin: 0 0 8px; }
.hwp .cd-t { margin: 0 0 8px; font-size: 20px; line-height: 28px; }
.hwp .cd-p { margin: 0; max-width: 440px; }
@media (max-width: 639.98px) { .hwt { min-height: 400px; padding: 32px 8px; } .hwp .hwc { padding: 16px 16px 16px; } }

/* ---------- a statement panel: the question at the left, the answer at the right */
.st-p { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 64px; row-gap: 24px; padding: 48px; }
.st-p .sec-k { margin: 0 0 16px; }
.st-p :is(h2, h3) { margin: 0; font-family: var(--display); font-weight: 500; font-size: 32px; line-height: 40px; letter-spacing: -0.02em; color: var(--text); text-wrap: balance; }
.st-p .st-a p { margin: 0; font-size: 18px; line-height: 30px; color: var(--text-2); text-wrap: pretty; }
.st-p .st-a p + p { margin-top: 16px; }
.st-p .st-a .k { color: var(--text); }
@media (max-width: 1023.98px) { .st-p { grid-template-columns: minmax(0, 1fr); padding: 40px 32px; } }
@media (max-width: 639.98px) { .st-p { padding: 32px 24px; } .st-p :is(h2, h3) { font-size: 26px; line-height: 32px; } .st-p .st-a p { font-size: 16px; line-height: 26px; } }

/* app chips (the apps named in the live FAQ answer) */
.chips { margin: 24px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 999px; background: #1a1a1a; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--text-2); }
.chips li.no { background: transparent; box-shadow: none; color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(245, 245, 243, .35); }

/* a big published figure in a statement panel (the sweet spot) */
.st-n { margin: 0; font-family: var(--display); font-weight: 500; font-size: clamp(48px, 4.4vw, 64px); line-height: 1; letter-spacing: -0.035em; color: #fff; }
.st-nm { margin: 12px 0 0; font-size: 16px; line-height: 24px; color: var(--muted); }

/* ---------- Results: the tabs for 3 studies and for 1 (the case study), and the source links under them */
#czCell.cz-n3 .cz-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#czCell.cz-n1 .cz-tabs { display: none; }
.cz-row.cz-nv { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) and (max-width: 1199.98px) { .cz-row.cz-nv > .cz-bx > .cz-l, .cz-row.cz-nv > .cz-bx > .cz-ss { grid-column: 1 / -1; } }
.cz-lk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; padding: 16px 24px 8px; }
.cz-lk a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 16px; line-height: 24px; font-weight: 500; color: var(--text-2); transition: color 180ms var(--ease); }
.cz-lk a svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform 220ms var(--ease); }
.cz-lk a:hover { color: var(--text); } .cz-lk a:hover svg { transform: translateX(2px); }
.cz-lk .pl { font-size: 14px; color: var(--muted); }
@media (max-width: 639.98px) { .cz-lk { padding: 16px 0 8px; } }

/* standalone stat panels (.czx): the Results panels outside the tabs */
.cz.czx { margin: 0; padding: 0; background: none; }
.czx .cz-ss { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.czx .cz-s { min-height: 0; }
.hx-st .cz-s { padding: 28px 28px 104px; }
@media (max-width: 639.98px) { .hx-st .cz-s { padding: 20px 20px 72px; } .hx-st .cz-n { font-size: 44px; } }
.czg { margin: 32px 0; padding: 8px; border-radius: 12px; background: var(--hc); }

/* ---------- Slack window: the panel behind it is flat (no silk, no vignette), with the dot grid */
.sk-pan.dg { background: #0b0b0b; }
.sk-pan.dg::after { content: none; }
.sk-cap { margin: 0; padding: 16px 24px 8px; font-size: 14px; line-height: 20px; color: var(--muted); }
.sk-cap a { color: var(--text-2); text-decoration: underline; text-decoration-color: rgba(245, 245, 243, .3); text-underline-offset: 4px; }
main.wrap > .rv-sec.rv-cap { padding-bottom: 8px; }
@media (max-width: 639.98px) { .sk-cap { padding: 16px 0 8px; } }
.sk-win .sk-av.sk-ev { font-size: 16px; }

/* ---------- link rows (related pages): the FAQ rows' hairline list, a title, its type, an arrow */
.lk-ls { position: relative; margin: -8px -8px 0; padding: 0; list-style: none; }
.lk-ls > li + li { border-top: 1px solid var(--ln); }
.lk-ls a { display: grid; grid-template-columns: minmax(0, 1fr) auto 32px; align-items: center; column-gap: 24px; min-height: 72px; padding: 16px 24px 16px 32px;
  font-family: var(--display); font-size: 20px; line-height: 28px; font-weight: 500; letter-spacing: -0.02em; color: var(--text); transition: background-color 200ms var(--ease); }
.lk-ls a:hover, .lk-ls a:focus-visible { background-color: #0f0f0f; }
.lk-ls .lk-t { font-family: var(--sans); font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.lk-ls .lk-x { width: 32px; height: 32px; border-radius: 999px; background: var(--raised); display: grid; place-items: center; transition: background-color 200ms var(--ease); }
.lk-ls .lk-x svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform 220ms var(--ease); }
.lk-ls a:hover .lk-x { background: #242424; } .lk-ls a:hover .lk-x svg { transform: translateX(2px); }
.lk-ls a:focus-visible { outline-offset: -2px; }
@media (max-width: 639.98px) {
  .lk-ls { margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); }
  .lk-ls a { grid-template-columns: minmax(0, 1fr) 32px; row-gap: 4px; padding: 16px var(--s2) 16px var(--gutter); font-size: 18px; line-height: 26px; }
  .lk-ls .lk-t { grid-column: 1; grid-row: 2; }
  .lk-ls .lk-x { grid-column: 2; grid-row: 1 / span 2; }
}

/* ---------- more case studies: a phone crop, the brand, one published figure */
.mc { display: flex; flex-direction: column; padding: 8px; overflow: hidden; }
.mc-v { position: relative; height: 280px; border-radius: 6px; overflow: hidden; }
.mc-v .cz-dv { --pw: 220px; left: 50%; top: 32px; margin-left: calc(var(--pw) / -2); }
.mc-v .cz-dv.hx-lg { position: absolute; }
.mc-c { display: flex; flex-direction: column; padding: 24px; flex: 1 1 auto; }
.mc-c .cz-b { margin: 0 0 16px; }
.mc-c .mc-n { margin: 0; font-family: var(--display); font-weight: 500; font-size: 48px; line-height: 1; letter-spacing: -0.035em; color: #fff; }
.mc-c .mc-m { margin: 12px 0 0; font-size: 16px; line-height: 24px; color: var(--muted); }
.mc .cz-dv { position: absolute; width: var(--pw); height: calc(var(--pw) * 568 / 268); margin-top: 0; border-radius: calc(var(--pw) * .149); }
.mc .cz-dv .cz-sc { border-radius: calc(var(--pw) * .127); clip-path: inset(0 round calc(var(--pw) * .127)); }
@media (max-width: 639.98px) { .mc-c { padding: 16px 16px 8px; } .mc-v { height: 240px; } }

/* the page, top to bottom: three phones in one panel */
.pg3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 8px; }
.pg3 figure { margin: 0; display: flex; flex-direction: column; align-items: center; }
.pg3 .pg3-v { position: relative; width: 100%; height: 640px; overflow: hidden; border-radius: 6px; }
.pg3 .cz-dv { --pw: 280px; left: 50%; top: 40px; margin-left: calc(var(--pw) / -2); position: absolute; width: var(--pw); height: calc(var(--pw) * 568 / 268);
  border-radius: calc(var(--pw) * .149); }
.pg3 .cz-dv .cz-sc { border-radius: calc(var(--pw) * .127); clip-path: inset(0 round calc(var(--pw) * .127)); }
.pg3 .cz-pg { transform: translate3d(0, var(--y, 0px), 0); }
.pg3 figcaption { align-self: stretch; padding: 16px 24px 24px; font-size: 16px; line-height: 24px; color: var(--muted); }
.pg3 figcaption b { display: block; margin-bottom: 4px; font-family: var(--display); font-size: 20px; line-height: 28px; font-weight: 500; letter-spacing: -0.02em; color: var(--text); }
@media (min-width: 640px) and (max-width: 1199.98px) { .pg3 .cz-dv { --pw: 220px; } .pg3 .pg3-v { height: 520px; } }
@media (max-width: 899.98px) { .pg3 { grid-template-columns: minmax(0, 1fr); } .pg3 .cz-dv { --pw: 240px; } .pg3 .pg3-v { height: 480px; } }

/* placeholders: plain grey text on a faint tint (no outline) */
.ph { color: var(--muted); }
.ph-b { margin: 0; padding: 16px 20px; border-radius: 8px; background: rgba(255, 255, 255, .035); font-size: 16px; line-height: 24px; color: var(--muted); }
.ph-b + .ph-b { margin-top: 8px; }
.ph-b b { font-weight: 500; color: var(--text-2); }

/* ---------- the post: a sticky table of contents and a refined reading column, in a grey cell */
main.wrap > .bl-sec { padding-bottom: 0; border-top: 0; }
.bl { position: relative; margin: 0 -8px; padding: 8px; background: var(--hc); display: grid; grid-template-columns: minmax(0, 296px) minmax(0, 1fr); gap: 8px; align-items: start; }
.bl-toc { position: sticky; top: calc(var(--navh) + 8px); padding: 24px; border-radius: 6px; background: #0b0b0b; }
.bl-toc > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: default; margin: 0 0 16px; }
.bl-toc > summary::-webkit-details-marker { display: none; }
.bl-toc > summary .sec-k { margin: 0; }
.bl-toc > summary svg { display: none; width: 14px; height: 14px; fill: none; stroke: var(--text-2); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform 300ms var(--ease); }
.bl-toc ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; counter-reset: toc; }
.bl-toc li { counter-increment: toc; }
.bl-toc a { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: start; min-height: 44px; padding: 10px 12px 10px 12px; margin: 0 -12px; border-radius: 6px;
  font-size: 15px; line-height: 22px; color: var(--muted); transition: color 200ms var(--ease), background-color 200ms var(--ease); }
.bl-toc a::before { content: counter(toc, decimal-leading-zero); font-size: 14px; line-height: 22px; color: rgba(245, 245, 243, .32); font-variant-numeric: tabular-nums; transition: color 200ms var(--ease); }
.bl-toc a:hover { color: var(--text-2); background: rgba(255, 255, 255, .03); }
.bl-toc a.on { color: var(--text); background: rgba(255, 255, 255, .05); }
.bl-toc a.on::before { color: var(--text-2); }
.bl-toc .bl-svc { margin: 24px 0 0; padding: 20px 0 0; box-shadow: inset 0 1px 0 var(--ln); }
.bl-toc .bl-svc .sec-k { margin: 0 0 8px; }
.bl-toc .bl-svc a { grid-template-columns: minmax(0, 1fr) 14px; align-items: center; font-family: var(--display); font-size: 18px; line-height: 26px; font-weight: 500; letter-spacing: -0.01em; color: var(--text); }
.bl-toc .bl-svc a::before { content: none; }
.bl-toc .bl-svc svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.bl-art { padding: 64px 48px 72px; border-radius: 6px; background: #0b0b0b; min-width: 0; }
.prose { max-width: 68ch; margin: 0 auto; font-size: 18px; line-height: 30px; color: rgba(245, 245, 243, .78); text-wrap: pretty; }
.prose > :first-child { margin-top: 0; }
.prose h2 { margin: 64px 0 16px; font-family: var(--display); font-weight: 500; font-size: 30px; line-height: 36px; letter-spacing: -0.02em; color: var(--text); text-wrap: balance;
  scroll-margin-top: calc(var(--navh) + 24px); }
.prose p { margin: 0 0 20px; }
.prose a { color: var(--text); text-decoration: underline; text-decoration-color: rgba(245, 245, 243, .35); text-underline-offset: 4px; transition: text-decoration-color 180ms var(--ease); }
.prose a:hover { text-decoration-color: var(--text); }
.prose .ph-b { font-size: 18px; line-height: 30px; }
.prose .ph-b + p, .prose p + .ph-b { margin-top: 20px; }
.prose blockquote { position: relative; margin: 32px 0; padding: 0 0 0 26px; font-family: var(--display); font-size: 24px; line-height: 34px; font-weight: 500; letter-spacing: -0.01em; color: var(--text); }
.prose blockquote p { margin: 0; }
.prose blockquote cite { display: block; margin-top: 12px; font-family: var(--sans); font-style: normal; font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.prose .bl-note { margin: 0 0 40px; }
/* pull stats: a small Results cell breaking out of the measure */
.prose .czg { margin: 40px calc(min(0px, (100% - 100cqi) / 2)) 24px; }
.bl-art { container-type: inline-size; }
@media (min-width: 1024px) { .prose .czg { margin-left: -48px; margin-right: -48px; } }
.prose .czg + p { font-size: 14px; line-height: 20px; color: var(--muted); }
/* the post's FAQ: the homepage rows inside the reading column */
.prose .fq-ls { margin: 0 -32px; }
.prose .fq-ls::after { content: none; }
.prose .fq-b { font-size: 20px; line-height: 28px; padding-left: 32px; }
.prose .fq-a p { padding-left: 32px; font-size: 16px; }
@media (max-width: 1023.98px) {
  .bl { grid-template-columns: minmax(0, 1fr); }
  .bl-toc { position: relative; top: auto; padding: 0 24px; }
  .bl-toc > summary { min-height: 56px; margin: 0; cursor: pointer; }
  .bl-toc > summary svg { display: block; }
  .bl-toc[open] > summary svg { transform: rotate(180deg); }
  .bl-toc ol { padding: 0 0 16px; }
  .bl-toc .bl-svc { margin: 0 0 16px; padding-top: 16px; }
  .bl-art { padding: 48px 32px 56px; }
}
@media (max-width: 639.98px) {
  .bl { margin: 0 calc(var(--gutter) * -1); padding: 8px var(--gutter); }
  .bl-toc { padding: 0 16px; }
  .bl-art { padding: 32px 20px 40px; }
  .prose { font-size: 17px; line-height: 28px; }
  .prose h2 { margin-top: 48px; font-size: 26px; line-height: 32px; }
  .prose .czg { margin-left: -12px; margin-right: -12px; }
  .prose .fq-ls { margin: 0 -20px; }
  .prose .fq-b { padding-left: 20px; font-size: 18px; line-height: 26px; }
  .prose .fq-a p { padding-left: 20px; }
  .prose blockquote { font-size: 20px; line-height: 30px; }
}

/* the author card */
.au { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; column-gap: 32px; row-gap: 16px; padding: 32px; }
.au img { width: 96px; height: 96px; border-radius: 999px; object-fit: cover; background: #cfcfcf; }
.au .sec-k { margin: 0 0 8px; }
.au h3 { margin: 0; font-family: var(--display); font-weight: 500; font-size: 28px; line-height: 36px; letter-spacing: -0.02em; color: var(--text); }
.au .au-r { margin: 8px 0 0; }
.au .au-l { display: flex; flex-wrap: wrap; gap: 8px; }
.au .au-l a { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 999px; background: var(--raised); font-size: 15px; font-weight: 500; color: rgba(245, 245, 243, .85);
  transition: background-color 200ms var(--ease), color 200ms var(--ease); }
.au .au-l a:hover { background: #f5f5f3; color: #0b0b0b; }
@media (max-width: 899.98px) { .au { grid-template-columns: 72px minmax(0, 1fr); } .au img { width: 72px; height: 72px; } .au .au-l { grid-column: 1 / -1; } }
@media (max-width: 639.98px) { .au { padding: 24px; column-gap: 16px; } .au h3 { font-size: 24px; line-height: 32px; } }

/* related posts: the Problem cards with the post's type, title and a link */
.rl-grid .cd-t { font-size: 22px; line-height: 30px; }
.rl-grid .cd-i { margin-bottom: 8px; }

/* small phones: the headline panel's lines are inline below 901, so the H1 wraps freely */
@media (max-width: 374.98px) { #top .lead #h1 { font-size: 28px; line-height: 31px; } }

/* a stats row with three items may wrap as whole items */
#hs.hs-w { flex-wrap: wrap; row-gap: 8px; }

/* the sweet spot pair: the question and the figure in one panel, the answer in the other */
.gp > .sec-k { margin: 0 0 16px; }
.st-h { margin: 0; font-family: var(--display); font-weight: 500; font-size: 32px; line-height: 40px; letter-spacing: -0.02em; color: var(--text); text-wrap: balance; }
.st-f { margin-top: 64px; }
.gp.st-a { display: flex; align-items: flex-end; }
.gp.st-a p { margin: 0; font-size: 18px; line-height: 30px; color: var(--text-2); text-wrap: pretty; }
@media (max-width: 900px) { .st-f { margin-top: 40px; } }
@media (max-width: 639.98px) { .st-h { font-size: 26px; line-height: 32px; } .gp.st-a p { font-size: 16px; line-height: 26px; } }

/* one review in the window: a shorter pane than the homepage's five messages */
.rv-cap .sk-cell { --vis: 420px; }
@media (max-width: 639.98px) { .rv-cap .sk-cell { --vis: 560px; } }

.prose blockquote::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 2px; border-radius: 1px; background: rgba(245, 245, 243, .2); }
/* the post's byline sits at the foot of the headline panel, as the homepage's stats row does */
.lead .byl { margin-top: auto; padding-top: 40px; }
@media (max-width: 900px) { .lead .byl { margin-top: 0; padding-top: 32px; } }
/* the current page in the trail stays on one line */
.crumbs li:last-child { min-width: 0; max-width: 100%; }
.crumbs [aria-current] { display: block; max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 639.98px) { .crumbs [aria-current] { display: inline-flex; max-width: 24ch; } }
/* link rows carry the hairline grids' corner squares (the FAQ block's) */
.lk-ls::after { content: ""; position: absolute; z-index: 3; pointer-events: none; inset: -3px -4px -4px -3px;
  background: linear-gradient(var(--sq), var(--sq)) left top / 6px 6px no-repeat, linear-gradient(var(--sq), var(--sq)) right top / 6px 6px no-repeat,
    linear-gradient(var(--sq), var(--sq)) left bottom / 6px 6px no-repeat, linear-gradient(var(--sq), var(--sq)) right bottom / 6px 6px no-repeat; }
@media (min-resolution: 2dppx) { .lk-ls::after { transform: translate(-.5px, -.5px); } }
@media (max-width: 639.98px) { .lk-ls::after { content: none; } }

.nw { white-space: nowrap; }
@media (max-width: 639.98px) { .hero .hx-pp { min-height: 660px; } }

@media (max-width: 639.98px) { .crumbs a { min-width: 44px; justify-content: center; } .byl a { min-width: 44px; justify-content: center; } }


/* ======================================================================================================================
   Overnight 1A: the signature sections (one per page) and the services hub hero. All in the homepage Problem section's
   recipe: a #171717 grey cell, flat #0b0b0b panels seated 8px in (6px corners), the dot grid, 1px grey line drawings,
   white for ours, lime only as a small non text accent, reveal on scroll (.sr / .on), one move then rest, reduced motion
   shows the final state. No borders, outlines, gradients or shadows on panels (hairlines are drawings, not panel edges).
   ====================================================================================================================== */

/* ---------- services hub hero: the six services as six flat panels in the hero's grey cell (each a link) */
.hero .hb { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 8px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.hb > li { min-width: 0; min-height: 0; }
.hb a { position: relative; isolation: isolate; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: 16px 24px 20px; border-radius: 6px; background: #0b0b0b; overflow: hidden;
  transition: background-color 200ms var(--ease); }
.hb a:hover, .hb a:focus-visible { background-color: #0f0f0f; }
.hb a:hover .pp-svg .fc, .hb a:focus-visible .pp-svg .fc { fill: #0f0f0f; }
.hb .pp-art { position: absolute; z-index: 1; left: 0; right: 0; top: 8px; bottom: 80px; margin: 0; aspect-ratio: auto; }
.hb .pp-art .pp-svg { position: absolute; inset: 0; }
.hb .pp-svg .fc { fill: #0b0b0b; transition: fill 200ms var(--ease); }
.hb .hb-i { position: relative; z-index: 2; margin: 0 0 4px; font-size: 14px; line-height: 20px; color: var(--muted); font-variant-numeric: tabular-nums; }
.hb .hb-n { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-family: var(--display); font-size: 20px; line-height: 28px; font-weight: 500; letter-spacing: -0.01em; color: var(--text); }
.hb .hb-n svg { width: 14px; height: 14px; flex: none; fill: none; stroke: var(--text-2); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform 220ms var(--ease); }
.hb a:hover .hb-n svg, .hb a:focus-visible .hb-n svg { transform: translateX(2px); }
.hb > li { animation: hl-rise .55s cubic-bezier(.22, 1, .36, 1) backwards; animation-delay: calc(180ms + var(--i, 0) * 70ms); }
@media (prefers-reduced-motion: reduce) { .hb > li { animation: none; } }
@media (min-width: 901px) and (max-height: 820px) { .hb .hb-n { font-size: 18px; line-height: 26px; } .hb a { padding: 12px 20px 16px; } .hb .pp-art { bottom: 68px; } }
@media (max-width: 900px) { .hero .hb { grid-template-rows: none; grid-auto-rows: 240px; } }
@media (max-width: 639.98px) {
  .hero .hb { grid-auto-rows: 188px; }
  .hb a { padding: 12px 14px 14px; }
  .hb .pp-art { bottom: 70px; top: 0; }
  .hb .hb-n { font-size: 16px; line-height: 22px; align-items: flex-end; }
}

/* ---------- services hub signature: the services map (one wide drawing) and its legend in three stages */
.sm { display: grid; gap: 8px; }
.sm-v { position: relative; height: 520px; border-radius: 6px; background: #0b0b0b; overflow: hidden; }
.sm-v .pp-art { position: absolute; z-index: 1; inset: 24px 24px 16px; margin: 0; aspect-ratio: auto; }
.sm-v .pp-art .pp-svg { position: absolute; inset: 0; }
.sm-v .pp-svg .fc { fill: #0b0b0b; }
.sm-l { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sm-l > li { display: flex; flex-direction: column; padding: 28px 32px 24px; border-radius: 6px; background: #0b0b0b; min-width: 0; }
.sm-l .sm-k { margin: 0 0 12px; display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sm-l .sm-k i { width: 6px; height: 6px; border-radius: 999px; background: #f5f5f3; flex: none; }
.sm-l h3 { margin: 0 0 8px; font-family: var(--display); font-weight: 500; font-size: 22px; line-height: 30px; letter-spacing: -0.01em; color: var(--text); }
.sm-l p { margin: 0; font-size: 16px; line-height: 26px; color: var(--muted); }
.sm-l .sm-sv { margin: auto 0 0; padding-top: 16px; padding: 0; list-style: none; display: grid; gap: 0; }
.sm-l .sm-sv a, .sm-l > li > .cd-go { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; font-size: 16px; line-height: 24px; font-weight: 500; color: var(--text-2); transition: color 180ms var(--ease); }
.sm-l .sm-sv li + li { box-shadow: inset 0 1px 0 var(--ln); }
.sm-l .sm-sv a:hover, .sm-l .sm-sv a:focus-visible { color: var(--text); }
.sm-l .sm-sv svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform 220ms var(--ease); }
.sm-l .sm-sv a:hover svg { transform: translateX(2px); }
.sm-f { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sm-f > div { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 20px; align-items: start; padding: 24px 32px; border-radius: 6px; background: #0b0b0b; }
.sm-f .sm-sw { margin-top: 13px; height: 14px; position: relative; }
.sm-f .sm-sw::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 1.5px; border-radius: 1px; background: #A3E635; }   /* the lime CRO line, as drawn */
.sm-f .sm-sw.b::before { top: 0; height: 12px; border-radius: 3px; background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4); }   /* the base slab, as drawn */
.sm-f .sm-sw.b::after { content: none; }
.sm-f h3 { margin: 0 0 4px; font-family: var(--display); font-weight: 500; font-size: 20px; line-height: 28px; letter-spacing: -0.01em; color: var(--text); }
.sm-f p { margin: 0; font-size: 16px; line-height: 26px; color: var(--muted); }
.sm-f a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 4px; font-size: 16px; line-height: 24px; font-weight: 500; color: var(--text-2); transition: color 180ms var(--ease); }
.sm-f a svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform 220ms var(--ease); }
.sm-f a:hover { color: var(--text); } .sm-f a:hover svg { transform: translateX(2px); }
.js .sm.sr { opacity: 1; transform: none; }
.js .sm.sr > * { opacity: 0; transform: translateY(10px); }
.js .sm.sr.on > * { opacity: 1; transform: none; transition: opacity 400ms cubic-bezier(.22, 1, .36, 1), transform 400ms cubic-bezier(.22, 1, .36, 1); }
.js .sm.sr.on > :nth-child(2) { transition-delay: 140ms; } .js .sm.sr.on > :nth-child(3) { transition-delay: 210ms; }
@media (prefers-reduced-motion: reduce) { .js .sm.sr > * { opacity: 1 !important; transform: none !important; transition: none !important; } }
@media (min-width: 901px) and (max-width: 1199.98px) { .sm-v { height: 440px; } .sm-l > li { padding: 24px; } }
@media (max-width: 900px) { .sm-v { height: 360px; } .sm-l, .sm-f { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 639.98px) {
  .sm-v { height: 240px; } .sm-v .pp-art { inset: 8px 4px; }
  .sm-l > li { padding: 24px; } .sm-f > div { padding: 20px 24px; grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; }
}

/* ---------- product page signature: the above the fold anatomy. The real Hound Nutrition page in the Results phone, six
   hairline callouts pointing at what sits on its first screen. Each callout: text, a 1px grey hairline to the element, a
   small lime dot where it lands. On view the hairlines draw out from the text in turn (one move), then rest. */
.an { position: relative; padding: 64px 48px 104px; overflow: hidden; }
.an-st { --pw: 300px; --pt: 0px; position: relative; z-index: 1; height: calc(var(--pw) * 568 / 268); }
.an-ph { position: absolute; left: 50%; top: var(--pt); margin-left: calc(var(--pw) / -2); }
.an-ph .cz-dv { position: relative; left: auto; top: auto; margin: 0; width: var(--pw); height: calc(var(--pw) * 568 / 268); border-radius: calc(var(--pw) * .149); }
.an-ph .cz-dv .cz-sc { border-radius: calc(var(--pw) * .127); clip-path: inset(0 round calc(var(--pw) * .127)); }
.an-ls { margin: 0; padding: 0; list-style: none; }
.an-c { --sw: calc(var(--pw) - 12px); --cy: calc(var(--pt) + 6px + var(--sy) * var(--sw) / 568); position: absolute; top: var(--cy); width: calc(50% - var(--pw) / 2 - 64px); max-width: 340px; }
.an-c.l { right: calc(50% + var(--pw) / 2 + 64px); text-align: right; }
.an-c.r { left: calc(50% + var(--pw) / 2 + 64px); }
.an-c .an-tx { position: relative; transform: translateY(-10px); }   /* the index line (20px) is centred on the element's y */
.an-c .an-i { margin: 0 0 4px; font-size: 14px; line-height: 20px; color: var(--muted); font-variant-numeric: tabular-nums; }
.an-c h3 { margin: 0 0 4px; font-family: var(--display); font-weight: 500; font-size: 20px; line-height: 28px; letter-spacing: -0.01em; color: var(--text); }
.an-c p { margin: 0; font-size: 16px; line-height: 24px; color: var(--muted); }
/* the hairline: from the text's inner edge across the gap and into the phone, to the element's x (--ax, 0 to 1 of the screen) */
.an-c .an-ln { position: absolute; top: 10px; height: 1px; background: rgba(255, 255, 255, .34); pointer-events: none; }
.an-c.l .an-ln { left: calc(100% + 16px); width: calc(48px + 6px + var(--ax) * var(--sw)); transform-origin: 0 50%; }
.an-c.r .an-ln { right: calc(100% + 16px); width: calc(48px + 6px + (1 - var(--ax)) * var(--sw)); transform-origin: 100% 50%; }
.an-c .an-ln::after { content: ""; position: absolute; top: -3px; width: 7px; height: 7px; border-radius: 999px; background: #A3E635; }
.an-c.l .an-ln::after { right: -3px; } .an-c.r .an-ln::after { left: -3px; }
.an-c .an-ln::before { content: ""; position: absolute; top: -2px; width: 5px; height: 5px; border-radius: 999px; background: rgba(255, 255, 255, .5); }
.an-c.l .an-ln::before { left: -2px; } .an-c.r .an-ln::before { right: -2px; }
.an-mk { display: none; }
.js .an.sr { opacity: 1; transform: none; }
.js .an.sr .an-tx { opacity: 0; transform: translateY(-2px); }
.js .an.sr .an-ln { transform: scaleX(0); }
.js .an.sr .an-ln::after { opacity: 0; transform: scale(.4); }
.js .an.sr.on .an-tx { opacity: 1; transform: translateY(-10px); transition: opacity 400ms cubic-bezier(.22, 1, .36, 1), transform 400ms cubic-bezier(.22, 1, .36, 1); transition-delay: calc(200ms + var(--i) * 260ms); }
.js .an.sr.on .an-ln { transform: none; transition: transform 900ms cubic-bezier(.22, 1, .36, 1); transition-delay: calc(320ms + var(--i) * 260ms); }
.js .an.sr.on .an-ln::after { opacity: 1; transform: none; transition: opacity 240ms cubic-bezier(.22, 1, .36, 1), transform 360ms cubic-bezier(.22, 1, .36, 1); transition-delay: calc(1000ms + var(--i) * 260ms); }
@media (prefers-reduced-motion: reduce) { .js .an.sr .an-tx, .js .an.sr .an-ln, .js .an.sr .an-ln::after { opacity: 1 !important; transform: none !important; transition: none !important; } .js .an.sr .an-tx { transform: translateY(-10px) !important; } }
@media (min-width: 901px) and (max-width: 1199.98px) { .an { padding: 48px 24px; } .an-st { --pw: 260px; } .an-c { width: calc(50% - var(--pw) / 2 - 40px); } .an-c.l { right: calc(50% + var(--pw) / 2 + 40px); } .an-c.r { left: calc(50% + var(--pw) / 2 + 40px); }
  .an-c.l .an-ln { width: calc(24px + 6px + var(--ax) * var(--sw)); } .an-c.r .an-ln { width: calc(24px + 6px + (1 - var(--ax)) * var(--sw)); } .an-c h3 { font-size: 18px; line-height: 26px; } }
/* phones and tablets: the phone on top with small numbered markers on it, the six notes as a numbered list below */
@media (max-width: 900px) {
  .an { padding: 40px 24px 24px; }
  .an-st { --pw: 280px; height: auto; display: grid; justify-items: center; gap: 32px; }
  .an-ph { position: relative; left: auto; top: auto; margin: 0; }
  .an-ls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px; justify-self: stretch; }
  .an-c { position: static; width: auto; max-width: none; text-align: left; }
  .an-c.l, .an-c.r { left: auto; right: auto; text-align: left; }
  .an-c .an-tx, .js .an.sr.on .an-tx { transform: none; }
  .an-c .an-ln { display: none; }
  .an-c .an-i { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 999px; background: #1f1f1f; color: var(--text); font-size: 14px; line-height: 1; }
  .an-mk { display: block; position: absolute; z-index: 4; left: calc(6px + var(--ax) * (var(--pw) - 12px)); top: calc(6px + var(--sy) * (var(--pw) - 12px) / 568); width: 24px; height: 24px; margin: -12px 0 0 -12px;
    border-radius: 999px; background: #0b0b0b; color: #f5f5f3; font-size: 14px; line-height: 24px; text-align: center; font-variant-numeric: tabular-nums; pointer-events: none; }
  .an-mk::after { content: ""; position: absolute; right: -2px; top: -2px; width: 7px; height: 7px; border-radius: 999px; background: #A3E635; }
  .js .an.sr .an-mk { opacity: 0; transform: scale(.6); }
  .js .an.sr.on .an-mk { opacity: 1; transform: none; transition: opacity 300ms cubic-bezier(.22, 1, .36, 1), transform 400ms cubic-bezier(.22, 1, .36, 1); transition-delay: calc(200ms + var(--i) * 160ms); }
  @media (prefers-reduced-motion: reduce) { .js .an.sr .an-mk { opacity: 1 !important; transform: none !important; transition: none !important; } }
}
@media (max-width: 639.98px) { .an { padding: 32px 16px 24px; } .an-st { --pw: 260px; } .an-ls { grid-template-columns: minmax(0, 1fr); gap: 20px; } }

/* ---------- case study signature: the whole page, end to end. The real Hound Nutrition page (the homepage's full page
   capture, assets/work/hound-nutrition.webp) cut into seven equal 1920px lengths (assets/cases/hound-full-1..7.webp) and laid side by side, in page order. Over them, a numbered hairline: on view a lime
   line runs along it from 01 to 07 once and each station lights as it passes, then everything rests. The dashed line on
   the first length marks a phone's fold. */
.jr { padding: 56px 48px 40px; overflow: hidden; }
.jr-w { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; }
.jr-l { position: relative; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 16px; }
.jr-l > li { min-width: 0; display: flex; flex-direction: column; }
.jr-n { position: relative; height: 40px; margin: 0; display: flex; align-items: flex-start; justify-content: center; }
.jr-n span { font-size: 14px; line-height: 20px; color: var(--muted); font-variant-numeric: tabular-nums; }
.jr-n::after { content: ""; position: absolute; left: 50%; bottom: 6px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 999px; background: #3a3a3a; transition: background-color 300ms var(--ease); }
/* the numbered hairline (::before, grey) and the lime line that runs along it once (::after), from the first station to the last */
.jr-l::before, .jr-l::after { content: ""; position: absolute; z-index: 0; left: calc((100% - 96px) / 14); right: calc((100% - 96px) / 14); top: 30px; height: 1px; pointer-events: none; background: rgba(255, 255, 255, .2); }
.jr-l::after { top: 29.75px; height: 1.5px; background: #A3E635; transform-origin: 0 50%; }
.jr-s { position: relative; aspect-ratio: 400 / 1920; border-radius: 6px; overflow: hidden; background: #f5f5f3; }
.jr-s img { display: block; width: 100%; height: auto; filter: saturate(.97) brightness(.92); }   /* the Results phones' screen tone */
.jr-s .jr-fd { position: absolute; z-index: 2; left: 0; right: 0; top: 45.1%; height: 0; border-top: 1px dashed rgba(11, 11, 11, .7); }
.jr-s .jr-fd::after { content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 1px; border-top: 1px dashed rgba(255, 255, 255, .9); }
.jr-c { margin: 16px 0 0; }
.jr-c b { display: block; margin: 0 0 4px; font-family: var(--display); font-size: 16px; line-height: 22px; font-weight: 500; color: var(--text); }
.jr-c span { display: block; font-size: 14px; line-height: 20px; color: var(--muted); }
.js .jr.sr { opacity: 1; transform: none; }
.js .jr.sr .jr-l > li { opacity: 0; transform: translateY(12px); }
.js .jr.sr .jr-l::after { transform: scaleX(0); }
.js .jr.sr.on .jr-l > li { opacity: 1; transform: none; transition: opacity 500ms cubic-bezier(.22, 1, .36, 1), transform 500ms cubic-bezier(.22, 1, .36, 1); transition-delay: calc(var(--n) * 70ms); }
.js .jr.sr.on .jr-l::after { transform: none; transition: transform 2600ms cubic-bezier(.22, 1, .36, 1) 700ms; }
.jr-l > li .jr-n::after { background: #3a3a3a; }
.js .jr.sr.on .jr-l > li .jr-n::after { background: #f5f5f3; transition-delay: calc(700ms + var(--n) * 260ms); }
.jr-ft { margin: 24px 0 0; font-size: 14px; line-height: 20px; color: var(--muted); text-align: center; }
html:not(.js) .jr-l > li .jr-n::after { background: #f5f5f3; }
@media (prefers-reduced-motion: reduce) { .js .jr.sr .jr-l > li, .js .jr.sr .jr-l::after { opacity: 1 !important; transform: none !important; transition: none !important; } .js .jr.sr .jr-l > li .jr-n::after { background: #f5f5f3 !important; transition: none !important; } }
@media (min-width: 901px) and (max-width: 1199.98px) { .jr { padding: 48px 24px 32px; } .jr-l { gap: 10px; } .jr-l::before, .jr-l::after { left: calc((100% - 60px) / 14); right: calc((100% - 60px) / 14); } }
/* phones and tablets: the seven lengths scroll sideways inside the panel (the page never scrolls sideways) */
@media (max-width: 900px) {
  .jr { padding: 32px 0 24px; }
  .jr-w { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 24px; }
  .jr-w::-webkit-scrollbar { display: none; }
  .jr-l { grid-template-columns: repeat(7, 148px); width: max-content; }
  .jr-l > li { scroll-snap-align: start; scroll-margin-left: 24px; }
  .jr-l::before, .jr-l::after { left: 74px; right: 74px; }
  .jr-ft { padding: 0 24px; text-align: left; }
}
@media (max-width: 639.98px) { .jr-w { padding: 0 16px; } .jr-l > li { scroll-margin-left: 16px; } .jr-ft { padding: 0 16px; } }

/* ---------- post signature: the above the fold anatomy, as a drawing (the sort drawing) with its two lists */
.bd { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 8px; }
.bd-v { position: relative; min-height: 560px; border-radius: 6px; background: #0b0b0b; overflow: hidden; }
.bd-v .pp-art { position: absolute; z-index: 1; inset: 24px; margin: 0; aspect-ratio: auto; }
.bd-v .pp-art .pp-svg { position: absolute; inset: 0; }
.bd-v .pp-svg .fc { fill: #0b0b0b; }
.bd-l { display: grid; grid-template-rows: auto auto; gap: 8px; }
.bd-l > div { padding: 32px; border-radius: 6px; background: #0b0b0b; }
.bd-l .sec-k { margin: 0 0 16px; display: flex; align-items: center; gap: 10px; }
.bd-l .sec-k i { flex: none; width: 24px; height: 0; border-top: 1px dashed rgba(255, 255, 255, .6); }
.bd-l ol { margin: 0; padding: 0; list-style: none; counter-reset: bd; }
.bd-l li { counter-increment: bd; display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 12px; padding: 12px 0; }
.bd-l li + li { box-shadow: inset 0 1px 0 var(--ln); }
.bd-l li::before { content: counter(bd, decimal-leading-zero); font-size: 14px; line-height: 26px; color: var(--muted); font-variant-numeric: tabular-nums; }
.bd-l li b { display: block; font-family: var(--display); font-size: 18px; line-height: 26px; font-weight: 500; color: var(--text); }
.bd-l li span { display: block; font-size: 16px; line-height: 24px; color: var(--muted); }
.bd-l .bd-b li b { color: var(--text-2); }
.js .bd.sr { opacity: 1; transform: none; }
.js .bd.sr > *, .js .bd.sr .bd-l > div { opacity: 0; transform: translateY(10px); }
.js .bd.sr .bd-l { opacity: 1; transform: none; }
.js .bd.sr.on > *, .js .bd.sr.on .bd-l > div { opacity: 1; transform: none; transition: opacity 400ms cubic-bezier(.22, 1, .36, 1), transform 400ms cubic-bezier(.22, 1, .36, 1); }
.js .bd.sr.on .bd-l > div:first-child { transition-delay: 1200ms; } .js .bd.sr.on .bd-l > div + div { transition-delay: 1400ms; }
@media (prefers-reduced-motion: reduce) { .js .bd.sr > *, .js .bd.sr .bd-l > div { opacity: 1 !important; transform: none !important; transition: none !important; } }
@media (max-width: 900px) { .bd { grid-template-columns: minmax(0, 1fr); } .bd-v { min-height: 420px; } }
@media (max-width: 639.98px) { .bd-v { min-height: 360px; } .bd-v .pp-art { inset: 12px; } .bd-l > div { padding: 24px; } }

/* ---------- post hero: the In short card with the published figures under it */
.hx-ia { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 40px; }
@media (min-width: 901px) and (max-height: 820px) { .hx-ia { padding: 24px; } }
@media (min-width: 901px) and (max-width: 1199.98px) { .hx-ia { padding: 24px; } }
@media (max-width: 639.98px) { .hx-ia { padding: 16px; } }
@media (max-width: 900px) { .hero .hx-ia { min-height: 0; } }

/* ---------- the article: checklists and the comparison table */
.prose ul.ck, .prose ol.ck { margin: 0 0 24px; padding: 0; list-style: none; display: grid; gap: 0; }
.prose .ck li { position: relative; padding: 10px 0 10px 36px; }
.prose .ck li + li { box-shadow: inset 0 1px 0 var(--ln); }
.prose ul.ck li::before { content: ""; position: absolute; left: 4px; top: 19px; width: 12px; height: 6px; border-left: 1.5px solid rgba(245, 245, 243, .7); border-bottom: 1.5px solid rgba(245, 245, 243, .7); transform: rotate(-45deg); }
.prose ol.ck { counter-reset: ck; } .prose ol.ck li { counter-increment: ck; }
.prose ol.ck li::before { content: counter(ck, decimal-leading-zero); position: absolute; left: 0; top: 10px; font-size: 14px; line-height: 30px; color: var(--muted); font-variant-numeric: tabular-nums; }
.prose .ck b, .prose p b { font-weight: 500; color: var(--text); }
.prose h3 { margin: 32px 0 8px; font-family: var(--display); font-weight: 500; font-size: 22px; line-height: 30px; letter-spacing: -0.01em; color: var(--text); }
.tb { margin: 8px 0 28px; overflow-x: auto; border-radius: 8px; background: #121212; }
.tb table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 16px; line-height: 24px; }
.tb th, .tb td { padding: 14px 20px; text-align: left; vertical-align: top; }
.tb thead th { font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.tb tbody tr { box-shadow: inset 0 1px 0 var(--ln); }
.tb tbody th { font-weight: 500; color: var(--text); width: 30%; }
.tb td { color: rgba(245, 245, 243, .78); }
.prose .is-in { margin: 0 0 40px; padding: 28px 32px; border-radius: 12px; background: #141414; }
.prose .is-in .sec-k { margin: 0 0 12px; }
.prose .is-in p { margin: 0; font-family: var(--display); font-size: 20px; line-height: 30px; font-weight: 500; letter-spacing: -0.01em; color: var(--text); }
@media (max-width: 639.98px) { .prose .is-in { padding: 24px 20px; } .prose .is-in p { font-size: 18px; line-height: 28px; } .tb th, .tb td { padding: 12px 14px; } }
/* phones: the above/below the fold table stacks, one element per row with both columns labelled, so nothing hides off screen */
@media (max-width: 639.98px) {
  .tb { overflow: visible; }
  .tb table { min-width: 0; }
  .tb thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tb tbody tr { display: grid; gap: 8px; padding: 16px 16px 20px; }
  .tb tbody th, .tb tbody td { display: block; width: auto; padding: 0; }
  .tb tbody td::before { display: block; margin-bottom: 4px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--muted); }
  .tb tbody td:nth-of-type(1)::before { content: "Above the fold"; }
  .tb tbody td:nth-of-type(2)::before { content: "Below the fold"; }
}

/* product page hero: three of our real product pages (the homepage carousel's work captures) on the dot grid */
.hx-wk { --pw: 250px; }
.hx-wk .cz-dv { left: 50%; top: 50%; margin: 0; transform: translate(-50%, -50%); }
.hx-wk .cz-dv.sd { transform: translate(calc(-50% + var(--x)), -50%) scale(.9); }
.hx-wk .cz-dv.sd::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; background: #0b0b0b; opacity: .55; pointer-events: none; }
.hx-wk .cz-dv.l { --x: calc(var(--pw) * -.92 - 24px); } .hx-wk .cz-dv.r { --x: calc(var(--pw) * .92 + 24px); }
.hx-wk .hx-cap2 { position: absolute; z-index: 4; left: 0; right: 0; bottom: 24px; margin: 0; text-align: center; font-size: 14px; line-height: 20px; color: var(--muted); }
@media (min-width: 901px) and (max-height: 820px) { .hx-wk { --pw: 230px; } }
@media (min-width: 901px) and (max-width: 1199.98px) { .hx-wk { --pw: 210px; } }
@media (max-width: 639.98px) { .hx-wk { --pw: 200px; } .hx-wk .cz-dv.l { --x: calc(var(--pw) * -.92 - 12px); } .hx-wk .cz-dv.r { --x: calc(var(--pw) * .92 + 12px); } }

.cs-meta dd.ph { color: var(--muted); }
/* the post hero: the published figures under the In short card (the Results stat panels) */
.hx-ia .czx .cz-ss { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hx-ia .czx .cz-s { padding: 24px 24px 88px; }
@media (min-width: 901px) and (max-height: 820px) { .hx-ia .czx .cz-s { padding: 20px 20px 64px; } }
@media (max-width: 639.98px) { .hx-ia .czx .cz-s { padding: 20px 16px 64px; } .hx-ia .czx .cz-n { font-size: 36px; } }

/* ===================== seo-v2 ADDITIONS, Overnight 1B (new rules, new class names only) ===================== */
/* ======================================================================================================================
   Overnight 1B: the six new pages (about, blog hub, blog category, book a call, case studies hub, how we work). New rules
   only, all on new class names, so the four 1A pages are untouched. The same recipe: a #171717 grey cell, flat #0b0b0b
   panels seated 8px in (6px corners), the dot grid, 1px grey line drawings, white for ours, lime only as a small non text
   accent, reveal on scroll (.sr / .on), one move then rest, reduced motion shows the final state. No borders, outlines,
   gradients or shadows on panels (hairlines are drawings or list rules, not panel edges).
   ====================================================================================================================== */

/* the glass roof (about): white at a whisper, so the three blocks under it still read */
.pp-svg .gt { fill: #f5f5f3; fill-opacity: .07; stroke: none; }
.pp-svg .gs { fill: #f5f5f3; fill-opacity: .04; stroke: none; }

/* a signature cell that reveals as one: the cell stays, its panels rise in turn */
.js .gc.sr.s1 { opacity: 1; transform: none; }
.js .gc.sr.s1 > * { opacity: 0; transform: translateY(10px); }
.js .gc.sr.s1.on > * { opacity: 1; transform: none; transition: opacity 400ms cubic-bezier(.22, 1, .36, 1), transform 400ms cubic-bezier(.22, 1, .36, 1); }
.js .gc.sr.s1.on > :nth-child(2) { transition-delay: 120ms; } .js .gc.sr.s1.on > :nth-child(3) { transition-delay: 200ms; }
@media (prefers-reduced-motion: reduce) { .js .gc.sr.s1 > * { opacity: 1 !important; transform: none !important; transition: none !important; } }

/* a phone (the Results phone) placed in normal flow inside a panel: --pw sets its width */
.ph1 .cz-dv { position: relative; left: auto; top: auto; margin: 0; width: var(--pw); height: calc(var(--pw) * 568 / 268); border-radius: calc(var(--pw) * .149); }
.ph1 .cz-dv .cz-sc { border-radius: calc(var(--pw) * .127); clip-path: inset(0 round calc(var(--pw) * .127)); }
.ph1 .cz-pg img { display: block; width: 100%; height: auto; }

/* the visible last updated line and byline at the foot of a hub's headline panel */
.upd { margin: 0; display: flex; flex-wrap: wrap; column-gap: 16px; row-gap: 2px; font-size: 14px; line-height: 20px; color: var(--muted); }
.upd span + span::before { content: ""; display: inline-block; width: 3px; height: 3px; margin: 0 16px 3px 0; border-radius: 999px; background: rgba(245, 245, 243, .32); vertical-align: middle; }
.lead .upd { order: 10; margin-top: auto; padding-top: 32px; }
.lead .hs + .upd { margin-top: 0; padding-top: 16px; }
@media (max-width: 900px) { .lead .upd { margin-top: 0; padding-top: 24px; } }
.lead .sub-l { margin: 16px 0 0; font-size: 16px; line-height: 24px; color: var(--muted); max-width: 520px; }
.lead .sub-l a { color: var(--text-2); text-decoration: underline; text-decoration-color: rgba(245, 245, 243, .3); text-underline-offset: 4px; }
@media (max-width: 639.98px) { .lead .sub-l a { display: inline-flex; align-items: center; min-height: 44px; } }

/* a caption at the foot of a hero panel (all pages) */
.hx .hx-cap2 { position: absolute; z-index: 4; left: 0; right: 0; bottom: 24px; margin: 0; text-align: center; font-size: 14px; line-height: 20px; color: var(--muted); }
.hx .hx-k { position: absolute; z-index: 4; left: 40px; top: 40px; margin: 0; }
@media (max-width: 639.98px) { .hx .hx-k { left: 24px; top: 24px; } }

/* ---------- about: the hero's team panel (the two people named on the live site, each with a client's own words) */
.hx-ab { display: flex; align-items: center; justify-content: center; padding: 96px 40px 72px; }
.ab-ps { position: relative; z-index: 2; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; max-width: 640px; }
.ab-p { display: flex; flex-direction: column; padding: 32px 28px 28px; border-radius: 6px; background: #141414; animation: hl-rise .55s cubic-bezier(.22, 1, .36, 1) backwards; animation-delay: calc(260ms + var(--i) * 90ms); }
.ab-a { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; color: inherit; }
.ab-a img { width: 88px; height: 88px; margin-bottom: 20px; border-radius: 999px; object-fit: cover; background: #cfcfcf; }
.ab-n { font-family: var(--display); font-size: 28px; line-height: 36px; font-weight: 500; letter-spacing: -0.02em; color: var(--text); }
.ab-r { font-size: 16px; line-height: 24px; color: var(--muted); }
.ab-q { margin: 24px 0 0; padding: 20px 0 0; box-shadow: inset 0 1px 0 var(--ln); }
.ab-q blockquote { margin: 0; }
.ab-q p { margin: 0; font-size: 16px; line-height: 24px; color: var(--text-2); text-wrap: pretty; }
.ab-q figcaption { margin-top: 12px; font-size: 14px; line-height: 20px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .ab-p { animation: none; } }
@media (min-width: 901px) and (max-width: 1199.98px) { .hx-ab { padding: 88px 24px 64px; } .ab-p { padding: 24px 20px; } .ab-n { font-size: 24px; line-height: 32px; } }
@media (min-width: 901px) and (max-height: 820px) { .hx-ab { padding-top: 80px; } .ab-a img { width: 72px; height: 72px; margin-bottom: 16px; } .ab-q { margin-top: 16px; padding-top: 16px; } }
@media (max-width: 639.98px) { .hx-ab { padding: 72px 16px 64px; } .ab-ps { grid-template-columns: minmax(0, 1fr); } .ab-p { padding: 24px; } .ab-a img { width: 64px; height: 64px; margin-bottom: 12px; } }

/* about signature: one roof. The three points on the left, the drawing (a lit glass roof over strategy, design and
   development) on the right with its own labels */
.or { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.or-l { display: flex; flex-direction: column; padding: 40px; border-radius: 6px; background: #0b0b0b; }
.or-l ol { margin: 0; padding: 0; list-style: none; }
.or-l li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; padding: 24px 0; }
.or-l li:first-child { padding-top: 0; }
.or-l li + li { box-shadow: inset 0 1px 0 var(--ln); }
.or-i { margin: 0; font-size: 14px; line-height: 28px; color: var(--muted); font-variant-numeric: tabular-nums; }
.or-l h3 { margin: 0 0 8px; font-family: var(--display); font-weight: 500; font-size: 22px; line-height: 28px; letter-spacing: -0.01em; color: var(--text); }
.or-l li p:not(.or-i) { margin: 0; font-size: 16px; line-height: 26px; color: var(--muted); }
.or-l .cd-go { margin-top: auto; }
.or-v { position: relative; min-height: 560px; border-radius: 6px; background: #0b0b0b; overflow: hidden; }
.or-v .pp-art { position: absolute; z-index: 1; inset: 32px 24px 88px; margin: 0; aspect-ratio: auto; }
.or-v .pp-art .pp-svg { position: absolute; inset: 0; }
.or-v .pp-svg .fc { fill: #0b0b0b; }
.or-k { position: absolute; z-index: 2; left: 32px; right: 32px; bottom: 28px; margin: 0; padding: 0; list-style: none; display: flex; justify-content: center; gap: 32px; }
.or-k li, .or-r { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.or-k li::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: rgba(245, 245, 243, .5); }
.or-r { position: absolute; z-index: 2; right: 32px; top: 28px; margin: 0; }
.or-r i { width: 24px; height: 0; border-top: 1.5px solid #A3E635; }
@media (max-width: 1023.98px) { .or { grid-template-columns: minmax(0, 1fr); } .or-v { min-height: 460px; } }
@media (max-width: 639.98px) { .or-l { padding: 24px; } .or-v { min-height: 360px; } .or-v .pp-art { inset: 48px 8px 72px; } .or-k { gap: 16px; left: 16px; right: 16px; flex-wrap: wrap; } .or-r { right: 20px; top: 20px; } }

/* about: the two people, then the rest of the team */
.tm { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 24px; row-gap: 24px; align-content: start; scroll-margin-top: calc(var(--navh) + 16px); }
.tm > img { width: 96px; height: 96px; border-radius: 999px; object-fit: cover; background: #cfcfcf; }
.tm-t .sec-k { margin: 0 0 8px; }
.tm-t h3 { margin: 0; font-family: var(--display); font-weight: 500; font-size: 28px; line-height: 36px; letter-spacing: -0.02em; color: var(--text); }
.tm-t > p.ph { margin: 4px 0 16px; font-size: 16px; line-height: 24px; }
.tm-t > p.tm-r { margin: 4px 0 16px; font-size: 16px; line-height: 24px; color: var(--muted); }
.tm-t > p.tm-b { margin: 0 0 8px; font-size: 16px; line-height: 24px; color: var(--text-2); text-wrap: pretty; }
.tm-l { display: flex; flex-wrap: wrap; gap: 0 24px; margin: 0; padding: 0; list-style: none; }
.tm-l a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-2); text-decoration: underline; text-decoration-color: rgba(245, 245, 243, .3); text-underline-offset: 4px; }
.tm-l a:hover { color: var(--text); text-decoration-color: var(--text); }
.tm-q { grid-column: 1 / -1; margin: 0; padding: 24px 0 0; box-shadow: inset 0 1px 0 var(--ln); }
.tm-q blockquote { margin: 0; }
.tm-q p { margin: 0; font-family: var(--display); font-size: 20px; line-height: 30px; font-weight: 500; letter-spacing: -0.01em; color: var(--text); text-wrap: pretty; }
.tm-q figcaption { margin-top: 12px; font-size: 14px; line-height: 20px; color: var(--muted); }
.tm-more { grid-column: 1 / -1; }
@media (max-width: 639.98px) { .tm { grid-template-columns: 64px minmax(0, 1fr); column-gap: 16px; } .tm > img { width: 64px; height: 64px; } .tm-t h3 { font-size: 24px; line-height: 32px; } .tm-q p { font-size: 18px; line-height: 28px; } }

/* about: company details */
.co { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 32px; }
.co dt { font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.co dd { margin: 4px 0 0; font-size: 16px; line-height: 24px; color: var(--text); overflow-wrap: anywhere; }
.co a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-2); text-decoration: underline; text-decoration-color: rgba(245, 245, 243, .3); text-underline-offset: 4px; }
.co a:hover { color: var(--text); text-decoration-color: var(--text); }
.co .co-w { grid-column: 1 / -1; padding-top: 16px; box-shadow: inset 0 1px 0 var(--ln); }
@media (max-width: 900px) { .co { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639.98px) { .co { grid-template-columns: minmax(0, 1fr); } }

/* ---------- blog hub hero: the latest article on the dot grid, a drawing above it */
.bh-f h2 { margin: 0; font-family: var(--display); font-size: 28px; line-height: 36px; font-weight: 500; letter-spacing: -0.02em; text-wrap: balance; }
.bh-f h2 a { color: var(--text); }
.bh-f .bh-x { margin: 12px 0 0; font-size: 16px; line-height: 26px; color: var(--text-2); text-wrap: pretty; }
.bh-m { margin: 16px 0 0; display: flex; flex-wrap: wrap; align-items: center; column-gap: 16px; row-gap: 4px; font-size: 14px; line-height: 20px; color: var(--muted); }
.bh-m img { width: 32px; height: 32px; border-radius: 999px; object-fit: cover; margin-right: -4px; }
.bh-f .cd-go { padding-top: 16px; }
@media (min-width: 901px) and (max-height: 820px) { .bh-f h2 { font-size: 24px; line-height: 32px; } .bh-f .bh-x { display: none; } }
@media (max-width: 639.98px) { .bh-f h2 { font-size: 22px; line-height: 30px; } }

/* blog hub signature: the first article, end to end. The real article in a phone (one slow scroll down it as the rail
   runs), its eight questions on a numbered rail; a lime line runs down the rail once and each station lights as it passes */
.ra { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.ra-v { --pw: 300px; position: relative; display: grid; place-items: center; min-height: 760px; padding: 56px 24px; border-radius: 6px; background: #0b0b0b; overflow: hidden; }
.ra-v .cz-dv { position: relative; left: auto; top: auto; margin: 0; width: var(--pw); height: calc(var(--pw) * 568 / 268); border-radius: calc(var(--pw) * .149); }
.ra-v .cz-dv .cz-sc { border-radius: calc(var(--pw) * .127); clip-path: inset(0 round calc(var(--pw) * .127)); }
.ra-v .cz-pg img { display: block; width: 100%; height: auto; }
.ra-r { display: flex; flex-direction: column; padding: 48px 48px 40px; border-radius: 6px; background: #0b0b0b; }
.ra-r > .sec-k { margin: 0 0 24px; }
.ra-l { position: relative; margin: 0; padding: 0; list-style: none; }
.ra-l::before, .ra-l::after { content: ""; position: absolute; left: 15.5px; top: 24px; bottom: 24px; width: 1px; background: rgba(255, 255, 255, .16); pointer-events: none; }
.ra-l::after { width: 1.5px; left: 15.25px; background: #A3E635; transform-origin: 50% 0; }
.ra-l li { position: relative; }
.ra-l a { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 20px; align-items: center; min-height: 56px; padding: 8px 0; color: var(--text-2); transition: color 200ms var(--ease); }
.ra-l a:hover, .ra-l a:focus-visible { color: var(--text); }
.ra-n { position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 999px; background: #1a1a1a; font-size: 14px; line-height: 1; color: var(--muted); font-variant-numeric: tabular-nums; transition: background-color 300ms var(--ease), color 300ms var(--ease); }
.ra-t { font-family: var(--display); font-size: 18px; line-height: 26px; font-weight: 500; letter-spacing: -0.01em; }
.ra-f { margin: 24px 0 0; padding-top: 20px; display: flex; flex-wrap: wrap; column-gap: 16px; font-size: 14px; line-height: 20px; color: var(--muted); box-shadow: inset 0 1px 0 var(--ln); }
.ra-r .cd-go { padding-top: 16px; }
.js .ra.sr .ra-l::after { transform: scaleY(0); }
.js .ra.sr.on .ra-l::after { transform: none; transition: transform 4800ms cubic-bezier(.45, 0, .25, 1) 600ms; }
.js .ra.sr.on .ra-n { background: #f5f5f3; color: #0b0b0b; transition-delay: calc(700ms + var(--i) * 560ms); }
html:not(.js) .ra-n { background: #f5f5f3; color: #0b0b0b; }
.js .ra.sr .ra-ph .cz-pg { transform: translate3d(0, 0, 0); }
.js .ra.sr.on .ra-ph .cz-pg { transform: translate3d(0, calc(var(--pw) * -2.6), 0); transition: transform 5200ms cubic-bezier(.45, 0, .25, 1) 600ms; }
@media (prefers-reduced-motion: reduce) { .js .ra.sr .ra-l::after { transform: none !important; transition: none !important; } .js .ra.sr .ra-n { background: #f5f5f3 !important; color: #0b0b0b !important; transition: none !important; }
  .js .ra.sr.on .ra-ph .cz-pg { transform: none !important; transition: none !important; } }
@media (min-width: 901px) and (max-width: 1199.98px) { .ra-v { --pw: 260px; min-height: 680px; } .ra-r { padding: 32px; } .ra-t { font-size: 17px; line-height: 24px; } }
@media (max-width: 900px) { .ra { grid-template-columns: minmax(0, 1fr); } .ra-v { --pw: 260px; min-height: 0; } }
@media (max-width: 639.98px) { .ra-v { --pw: 240px; padding: 40px 16px; } .ra-r { padding: 24px; } .ra-l a { column-gap: 16px; } .ra-t { font-size: 16px; line-height: 24px; } }

/* blog hub: the five categories (Problem cards), the latest list, the newsletter */
@media (min-width: 901px) { .pp-grid.bh-c { grid-template-columns: repeat(6, minmax(0, 1fr)); } .pp-grid.bh-c > li { grid-column: span 2; } .pp-grid.bh-c > li:nth-child(n + 4) { grid-column: span 3; }
  @supports (height: round(down, 1px, 1px)) { .pp-grid.bh-c > li:nth-child(n + 4) .pp-art { height: round(down, calc(((100cqi + 16px) / 2 - 64px) * .5), 1px); } } }
.bh-pl { margin: 0; padding: 16px 0 8px; font-size: 14px; line-height: 20px; }
.nl { align-items: center; }
.nl h2 { margin-bottom: 16px !important; }
.nl-f label { display: block; margin: 0 0 8px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--muted); }
.nl-r { display: flex; gap: 8px; }
.nl-r input { flex: 1 1 auto; min-width: 0; height: 52px; padding: 0 20px; border: 0; border-radius: 999px; background: #1a1a1a; color: var(--text); font: inherit; font-size: 16px; }
.nl-r input::placeholder { color: var(--muted); }
.nl-r input:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.nl-b { flex: none; height: 52px; padding: 0 24px; border: 0; border-radius: 999px; background: #f5f5f3; color: #0b0b0b; font: inherit; font-size: 16px; font-weight: 500; cursor: pointer; transition: background-color 200ms var(--ease); }
.nl-b:hover { background: #fff; }
@media (max-width: 639.98px) { .nl-r { flex-direction: column; } .nl-b { width: 100%; } }

/* ---------- blog category hero: a real product page in a phone with the fold marked across the panel, the latest article
   below the fold line (what can wait) */
.hx-ct { --pw: 280px; --ft: 40px; }
.hx-ct .cz-dv { right: 48px; top: var(--ft); }
.hx-ct .ct-fd { position: absolute; z-index: 3; left: 40px; right: 24px; top: calc(var(--ft) + var(--pw) * 568 / 268 * .56); height: 0; border-top: 1px dashed rgba(255, 255, 255, .5); pointer-events: none; }
.hx-ct .ct-fd span { position: absolute; left: 0; top: -28px; font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ct-a { position: absolute; z-index: 4; left: 40px; bottom: 64px; width: min(400px, calc(100% - 80px)); padding: 28px; border-radius: 16px; background: #141414; }
.ct-a .sec-k { margin: 0 0 12px; }
.ct-a h2 { margin: 0; font-family: var(--display); font-size: 24px; line-height: 32px; font-weight: 500; letter-spacing: -0.02em; text-wrap: balance; }
.ct-a h2 a { color: var(--text); }
.ct-a .cd-go { padding-top: 12px; }
@media (min-width: 901px) and (max-width: 1199.98px) { .hx-ct { --pw: 230px; } .hx-ct .cz-dv { right: 24px; } .ct-a { left: 24px; width: min(340px, calc(100% - 48px)); padding: 20px; } .ct-a h2 { font-size: 20px; line-height: 28px; } .hx-ct .ct-fd { left: 24px; } }
@media (min-width: 901px) and (max-height: 820px) { .hx-ct { --pw: 270px; --ft: 32px; } }
@media (max-width: 900px) { .hero .hx-ct { min-height: 760px; } }
@media (max-width: 639.98px) { .hx-ct { --pw: 220px; --ft: 32px; } .hx-ct .cz-dv { right: auto; left: 50%; margin-left: calc(var(--pw) / -2); } .hx-ct .ct-fd { left: 16px; right: 16px; }
  .ct-a { left: 16px; right: 16px; bottom: 56px; width: auto; max-width: none; padding: 20px; } .hero .hx-ct { min-height: 820px; } }

/* blog category signature: the product page taken apart (the stack drawing), its five layers listed top to bottom */
.ex { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.ex-v { position: relative; min-height: 640px; border-radius: 6px; background: #0b0b0b; overflow: hidden; }
.ex-v .pp-art { position: absolute; z-index: 1; inset: 24px 24px 64px; margin: 0; aspect-ratio: auto; }
.ex-v .pp-art .pp-svg { position: absolute; inset: 0; }
.ex-v .pp-svg .fc { fill: #0b0b0b; }
.ex-c { position: absolute; z-index: 2; left: 32px; bottom: 28px; margin: 0; display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ex-c i { width: 14px; height: 10px; border-radius: 3px; background: rgba(245, 245, 243, .5); box-shadow: inset 0 -1.5px 0 #A3E635; }
.ex-l { margin: 0; padding: 8px 40px; border-radius: 6px; background: #0b0b0b; list-style: none; display: flex; flex-direction: column; justify-content: center; }
.ex-l li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; padding: 20px 0; }
.ex-l li + li { box-shadow: inset 0 1px 0 var(--ln); }
.ex-i { margin: 0; font-size: 14px; line-height: 28px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ex-l li.on .ex-i { color: var(--text); }
.ex-l h3 { margin: 0 0 4px; font-family: var(--display); font-weight: 500; font-size: 20px; line-height: 28px; letter-spacing: -0.01em; color: var(--text); }
.ex-l li:not(.on) h3 { color: var(--text-2); }
.ex-l p { margin: 0; font-size: 16px; line-height: 24px; color: var(--muted); }
.ex-l .ex-l { padding: 0; }
.ex-l p.ex-l { margin-top: 8px; padding: 0; background: none; display: block; font-size: 14px; line-height: 20px; }
.ex-l p.ex-l a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 16px; line-height: 24px; font-weight: 500; color: var(--text-2); transition: color 180ms var(--ease); }
.ex-l p.ex-l a:hover { color: var(--text); }
.ex-l p.ex-l a svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ex-l p.ex-l .pl { margin-right: 4px; font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 1023.98px) { .ex { grid-template-columns: minmax(0, 1fr); } .ex-v { min-height: 520px; } }
@media (max-width: 639.98px) { .ex-v { min-height: 400px; } .ex-v .pp-art { inset: 12px 8px 56px; } .ex-l { padding: 8px 24px; } .ex-c { left: 24px; bottom: 20px; } }

/* blog category: the article, a wide panel with its two published figures */
.ca { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto 1fr; column-gap: 48px; padding: 40px; }
.ca-t { grid-column: 1; grid-row: 1; }
.ca-t .sec-k { margin: 0 0 12px; }
.ca h3 { margin: 0; font-family: var(--display); font-size: 32px; line-height: 40px; font-weight: 500; letter-spacing: -0.02em; text-wrap: balance; }
.ca h3 a { color: var(--text); }
.ca .ca-x { margin: 16px 0 0; font-size: 18px; line-height: 30px; color: var(--text-2); max-width: 60ch; }
.ca .czx { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.ca .czx .cz-ss { grid-template-columns: minmax(0, 1fr); }
.ca .czx .cz-s { padding: 24px 24px 80px; background: #141414; }
.ca > .cd-go { grid-column: 1; grid-row: 2; align-self: end; }
@media (max-width: 900px) { .ca { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; padding: 32px 24px; } .ca .czx, .ca > .cd-go { grid-column: 1; grid-row: auto; } .ca .czx { margin-top: 24px; } .ca .czx .cz-ss { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639.98px) { .ca h3 { font-size: 24px; line-height: 32px; } .ca .ca-x { font-size: 16px; line-height: 26px; } .ca .czx .cz-ss { grid-template-columns: minmax(0, 1fr); } }
.ct-ch { margin-top: 0; }
.ct-ch li { padding: 0; height: auto; }
.ct-ch a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; color: var(--text-2); transition: background-color 200ms var(--ease), color 200ms var(--ease); }
.ct-ch a:hover { background: #242424; color: var(--text); }
.ct-ch a[aria-current] { background: #f5f5f3; color: #0b0b0b; }

/* ---------- book a call hero: the overlay's own info panel, on the dot grid */
.hx-bc { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 40px; }
.bc-i, .bc-alt { position: relative; z-index: 2; padding: 32px; border-radius: 16px; background: #141414; }
.bc-i .sec-k, .bc-alt .sec-k { margin: 0 0 20px; }
.bc-how { margin: 0; padding: 0; list-style: none; display: grid; gap: 20px; }
.bc-how li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; align-items: start; animation: hl-rise .55s cubic-bezier(.22, 1, .36, 1) backwards; animation-delay: calc(320ms + var(--i) * 110ms); }
.bc-n { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; background: #f5f5f3; color: #0b0b0b; font-family: var(--display); font-size: 18px; font-weight: 500; }
.bc-how p { margin: 0; padding-top: 6px; font-family: var(--display); font-size: 20px; line-height: 28px; font-weight: 500; letter-spacing: -0.01em; color: var(--text); text-wrap: pretty; }
.bc-alt { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 24px; }
.bc-alt .sec-k { margin: 0 0 4px; }
.bc-alt-p { margin: 0; font-size: 16px; line-height: 24px; color: var(--text-2); }
.bc-alt-r { grid-column: 2; grid-row: 1 / span 2; display: grid; justify-items: end; gap: 4px; }
.bc-alt-r .wa { min-width: 200px; }
.bc-mail { margin: 0; font-size: 14px; line-height: 20px; color: var(--muted); }
.bc-mail a, .ow-m { color: var(--text-2); text-decoration: underline; text-decoration-color: rgba(245, 245, 243, .3); text-underline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .bc-how li { animation: none; } }
@media (min-width: 901px) and (max-width: 1199.98px) { .hx-bc { padding: 24px; } .bc-i, .bc-alt { padding: 24px; } .bc-alt { grid-template-columns: minmax(0, 1fr); } .bc-alt-r { grid-column: 1; grid-row: auto; justify-items: start; margin-top: 16px; } .bc-how p { font-size: 18px; line-height: 26px; } }
@media (max-width: 900px) { .hero .hx-bc { min-height: 0; } }
@media (max-width: 639.98px) { .hx-bc { padding: 16px; } .bc-i, .bc-alt { padding: 24px; } .bc-alt { grid-template-columns: minmax(0, 1fr); } .bc-alt-r { grid-column: 1; grid-row: auto; justify-items: stretch; margin-top: 16px; } .bc-how p { font-size: 18px; line-height: 26px; } .bc-mail a { display: inline-flex; align-items: center; min-height: 44px; } }

/* book a call signature: the four steps of the booking flow, each with its drawing (the Problem card's recipe) */
.gc-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1199.98px) { .gc-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639.98px) { .gc-4 { grid-template-columns: minmax(0, 1fr); } }
.bf { display: flex; flex-direction: column; padding: 8px; }
.bf-v { position: relative; height: 240px; border-radius: 6px; overflow: hidden; }
.bf-v .pp-art { position: absolute; z-index: 1; inset: 16px; margin: 0; aspect-ratio: auto; }
.bf-v .pp-art .pp-svg { position: absolute; inset: 0; }
.bf-v .pp-svg .fc { fill: #0b0b0b; }
.bf-t { padding: 16px 20px 20px; }
.bf-t .cd-i { margin: 0 0 8px; }
.bf-t .cd-t { margin: 0 0 12px; font-size: 20px; line-height: 28px; }
.bf-t p { margin: 0; font-size: 16px; line-height: 24px; color: var(--muted); }
.bc-q { margin: 16px 0 8px !important; font-size: 14px !important; line-height: 20px !important; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.bc-ch { margin: 8px 0 0; }
.bc-ch li { height: 32px; padding: 0 12px; }

/* book a call: the calendar placeholder beside an empty month */
.cl { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 8px; padding: 8px; }
.cl-t { padding: 32px; }
.cl-t .sec-k { margin: 0 0 16px; }
.cl-t h2 { margin: 0 0 24px; font-family: var(--display); font-weight: 500; font-size: 32px; line-height: 40px; letter-spacing: -0.02em; color: var(--text); }
.cl-b { margin-top: 24px; }
.cl-b .cta-row { margin: 0; }
.cl-v { position: relative; display: grid; place-items: center; min-height: 360px; padding: 40px; border-radius: 6px; }
.cg { position: relative; z-index: 2; width: 100%; max-width: 380px; padding: 24px; border-radius: 16px; background: #141414; }
.cg-h { display: flex; justify-content: space-between; margin-bottom: 20px; }
.cg-h i { display: block; width: 96px; height: 10px; border-radius: 999px; background: #262626; }
.cg-h i + i { width: 40px; }
.cg-d { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.cg-d i { aspect-ratio: 1; border-radius: 8px; background: #1e1e1e; }
.cg-d i.x { background: transparent; box-shadow: inset 0 0 0 1px #1e1e1e; }
@media (max-width: 900px) { .cl { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 639.98px) { .cl-t { padding: 24px 16px; } .cl-t h2 { font-size: 26px; line-height: 32px; } .cl-v { padding: 24px 16px; min-height: 0; } }

/* book a call: other ways, a quote */
.ow .ow-p { margin: 16px 0 24px; font-size: 18px; line-height: 28px; color: var(--text-2); }
.ow-r { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.ow-r .wa { min-width: 220px; }
.ow-m { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; }
.ow-q, .rq { margin: 0; display: flex; flex-direction: column; justify-content: space-between; }
.ow-q blockquote, .rq blockquote { margin: 0; }
.ow-q p { margin: 0; font-family: var(--display); font-size: clamp(32px, 3vw, 44px); line-height: 1.15; font-weight: 500; letter-spacing: -0.03em; color: var(--text); text-wrap: balance; }
.ow-q figcaption { margin-top: 32px; font-size: 14px; line-height: 20px; color: var(--muted); }

/* ---------- case studies hub hero: the five studies' pages, fanned on the dot grid (the centre one scrolls once) */
.hx-fn { --pw: 232px; }
.hx-fn .fn { position: absolute; left: 50%; top: 50%; }
.hx-fn .fn .cz-dv { position: relative; left: auto; top: auto; margin: 0; width: var(--pw); height: calc(var(--pw) * 568 / 268); border-radius: calc(var(--pw) * .149);
  transform: translate(calc(-50% + var(--p) * var(--pw) * .5), calc(-50% - 12px)) scale(calc(1 - .09 * max(var(--p), -1 * var(--p)))); }
.hx-fn .fn .cz-dv .cz-sc { border-radius: calc(var(--pw) * .127); clip-path: inset(0 round calc(var(--pw) * .127)); }
.hx-fn .fn .cz-pg img { display: block; width: 100%; height: auto; }
.hx-fn .fn:not([style*="--p:0"]) .cz-dv::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; background: #0b0b0b; opacity: .5; pointer-events: none; }
.hx-fn .fn[style*="--p:-2"] .cz-dv::after, .hx-fn .fn[style*="--p:2"] .cz-dv::after { opacity: .68; }
@media (min-width: 901px) and (max-height: 820px) { .hx-fn { --pw: 212px; } }
@media (min-width: 901px) and (max-width: 1199.98px) { .hx-fn { --pw: 190px; } }
@media (max-width: 639.98px) { .hx-fn { --pw: 168px; } }

/* case studies signature: across the journey. The journey drawing over a map of where each study worked (from its own
   published words, quoted in the last column) */
.jm { grid-template-columns: minmax(0, 1fr); }
.jm-v { position: relative; height: 420px; border-radius: 6px; background: #0b0b0b; overflow: hidden; }
.jm-v .pp-art { position: absolute; z-index: 1; inset: 16px 32px 72px; margin: 0; aspect-ratio: auto; }
.jm-v .pp-art .pp-svg { position: absolute; inset: 0; }
.jm-v .pp-svg .fc { fill: #0b0b0b; }
.jm-k { position: absolute; z-index: 2; left: 32px; right: 32px; bottom: 28px; margin: 0; padding: 0; list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 32px; }
.jm-k li { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.jm-k li + li::before { content: ""; width: 16px; height: 0; border-top: 1px solid rgba(255, 255, 255, .3); margin-right: 8px; }
.jm-t { overflow-x: auto; border-radius: 6px; background: #0b0b0b; }
.jm-t table { width: 100%; min-width: 880px; border-collapse: collapse; font-size: 16px; line-height: 24px; }
.jm-t th, .jm-t td { padding: 16px 20px; text-align: left; vertical-align: middle; }
.jm-t thead th { padding-top: 24px; font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.jm-t thead th:not(:first-child):not(:last-child), .jm-t td:not(.jm-e) { text-align: center; width: 11%; }
.jm-t tbody tr { box-shadow: inset 0 1px 0 var(--ln); }
.jm-t tbody th { width: 22%; padding-left: 32px; }
.jm-t thead th:first-child { padding-left: 32px; }
.jm-t tbody th a { display: flex; flex-direction: column; min-height: 44px; justify-content: center; color: var(--text); }
.jm-t tbody th b { font-family: var(--display); font-size: 18px; line-height: 26px; font-weight: 500; }
.jm-t tbody th span { font-size: 14px; line-height: 20px; font-weight: 400; color: var(--muted); }
.jm-t tbody th a:hover b { text-decoration: underline; text-decoration-color: rgba(245, 245, 243, .35); text-underline-offset: 4px; }
.jm-y { display: inline-block; width: 12px; height: 12px; border-radius: 999px; background: #f5f5f3; box-shadow: 0 0 0 4px rgba(163, 230, 53, .0); position: relative; }
.jm-y::after { content: ""; position: absolute; right: -3px; top: -3px; width: 6px; height: 6px; border-radius: 999px; background: #A3E635; }
.jm-n { display: inline-block; width: 16px; height: 0; border-top: 1px solid rgba(255, 255, 255, .18); vertical-align: middle; }
.jm-e { color: var(--muted); font-size: 16px; line-height: 24px; padding-right: 32px; }
.js .jm.sr .jm-t tbody tr { opacity: 0; transform: translateY(8px); }
.js .jm.sr.on .jm-t tbody tr { opacity: 1; transform: none; transition: opacity 400ms cubic-bezier(.22, 1, .36, 1), transform 400ms cubic-bezier(.22, 1, .36, 1); transition-delay: calc(900ms + var(--i) * 140ms); }
@media (prefers-reduced-motion: reduce) { .js .jm.sr .jm-t tbody tr { opacity: 1 !important; transform: none !important; transition: none !important; } }
@media (max-width: 900px) { .jm-v { height: 300px; } .jm-v .pp-art { inset: 12px 12px 72px; } }
@media (max-width: 639.98px) { .jm-v { height: 240px; } .jm-v .pp-art { inset: 8px 4px 80px; } .jm-k { gap: 4px 16px; left: 16px; right: 16px; bottom: 16px; } .jm-k li + li::before { width: 8px; margin-right: 0; } .jm-t th, .jm-t td { padding: 14px 12px; } .jm-t tbody th, .jm-t thead th:first-child { padding-left: 16px; } }

/* case studies: the five studies, each a panel with its page in a phone, the published text and figures */
.csl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cs { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 8px; padding: 8px; scroll-margin-top: calc(var(--navh) + 16px); }
.cs:first-child { grid-column: 1 / -1; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); }
.cs-v { --pw: 180px; position: relative; display: grid; place-items: center; min-height: 440px; border-radius: 6px; overflow: hidden; background: #0b0b0b; }
.cs:first-child .cs-v { --pw: 220px; min-height: 520px; }
.cs-v .cz-dv { position: relative; left: auto; top: auto; margin: 0; width: var(--pw); height: calc(var(--pw) * 568 / 268); border-radius: calc(var(--pw) * .149); }
.cs-v .cz-dv .cz-sc { border-radius: calc(var(--pw) * .127); clip-path: inset(0 round calc(var(--pw) * .127)); }
.cs-v .cz-pg img { display: block; width: 100%; height: auto; }
.cs-c { display: flex; flex-direction: column; padding: 24px 24px 16px; min-width: 0; }
.cs-c .cz-b { margin: 0 0 12px; }
.cs-c .cz-t { margin: 0; font-size: 16px; line-height: 26px; color: var(--muted); }
.cs-qt { margin: 0; }
.cs-qt p { margin: 0; font-size: 16px; line-height: 26px; color: var(--text-2); }
.cs-qt footer { margin-top: 8px; font-size: 14px; line-height: 20px; color: var(--muted); }
.cs-c .czx { margin-top: 20px; }
.cs-c .czx .cz-ss { grid-template-columns: repeat(auto-fit, minmax(176px, 1fr)); }
.cs-c .czx .cz-s { padding: 20px 20px 64px; background: #141414; }
.cs-c .czx .cz-n { font-size: 30px; white-space: nowrap; }
.cs:first-child .cs-c { padding: 32px 32px 24px; }
.cs:first-child .czx .cz-n { font-size: 44px; }
.cs-c .cd-go .pl { margin-left: 8px; }
@media (max-width: 1199.98px) { .csl { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 639.98px) { .cs, .cs:first-child { grid-template-columns: minmax(0, 1fr); } .cs-v, .cs:first-child .cs-v { --pw: 200px; min-height: 0; padding: 32px 0; } .cs-c, .cs:first-child .cs-c { padding: 16px 16px 8px; } .cs-c .czx .cz-n { font-size: 32px; } }

/* case studies: the review */
.rq { padding: 56px 48px 40px; }
.rq p { margin: 0; max-width: 34ch; font-family: var(--display); font-size: clamp(26px, 2.4vw, 34px); line-height: 1.3; font-weight: 500; letter-spacing: -0.02em; color: var(--text); text-wrap: pretty; }
.rq figcaption { margin-top: 40px; display: flex; align-items: center; gap: 12px; font-size: 14px; line-height: 20px; color: var(--muted); }
.rq figcaption b { display: block; font-size: 16px; line-height: 24px; font-weight: 500; color: var(--text); }
.rq-a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; background: #1f1f1f; color: var(--text); font-size: 16px; font-weight: 500; }
@media (max-width: 639.98px) { .rq { padding: 32px 24px 24px; } .rq p { font-size: 22px; line-height: 32px; } }

/* ---------- how we work hero: the four steps in a ring, the In short card under them */
.hx-hw .pp-art { bottom: 44%; }
.hw-k { position: absolute; z-index: 2; left: 40px; right: 40px; top: calc(56% - 40px); margin: 0; padding: 0; list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 24px; }
.hw-k li { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.hw-k li::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: rgba(245, 245, 243, .5); }
.hw-k li:last-child::before { background: #f5f5f3; box-shadow: 4px -4px 0 -1.5px #A3E635; }
@media (min-width: 901px) and (max-height: 820px) { .hx-hw .pp-art { bottom: 48%; } .hw-k { top: calc(52% - 36px); } }
@media (max-width: 639.98px) { .hx-hw .pp-art { bottom: 56%; } .hw-k { left: 16px; right: 16px; top: calc(44% - 36px); gap: 4px 16px; } }

/* how we work: the stage (the homepage How we work section) with flat tiles: no silk, no gradient, no inner shadow, the dot grid */
.ps-flat .ps-tile { background: #0b0b0b !important; }
.ps-flat .ps-tile::after { content: none; }
.ps-flat .ps-tile::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Crect width='2' height='2' fill='%23fff' fill-opacity='.13'/%3E%3C/svg%3E");
  background-size: 10px 10px; background-position: 4px 4px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 96px, #000 calc(100% - 40px), transparent), linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(180deg, transparent, #000 96px, #000 calc(100% - 40px), transparent), linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent);
  mask-composite: intersect; }
.ps-flat .ps-cv { display: none; }

/* how we work: inside each step (four Problem cards, the second line of the two step cards) */
@media (min-width: 901px) { .pp-grid.hw-g { grid-template-columns: repeat(2, minmax(0, 1fr)); } @supports (height: round(down, 1px, 1px)) { .pp-grid.hw-g .pp-art { height: round(down, calc(((100cqi + 16px) / 2 - 64px) * .5), 1px); } } }
.pp-grid .cd .cd-t2 { margin: 20px 0 8px; font-family: var(--display); font-weight: 500; font-size: 18px; line-height: 26px; letter-spacing: -0.01em; color: var(--text); }

/* how we work: timing */
.ti > li { display: flex; flex-direction: column; padding: 8px 32px 32px; }
.ti .pp-art { margin: 0 -24px 8px; aspect-ratio: 16 / 9; }
.ti .pp-art .pp-svg { position: absolute; inset: 0; }
.ti .sec-k { margin: 0 0 12px; }
.ti .st-n { font-size: clamp(40px, 3.6vw, 56px); }
.ti-p { margin: 16px 0 0; font-size: 18px; line-height: 28px; color: var(--text-2); max-width: 46ch; }
.ti-f { margin: 0; padding: 24px 24px 8px; font-size: 16px; line-height: 24px; color: var(--muted); }
.ti-f .k { color: var(--text-2); }
@media (max-width: 639.98px) { .ti > li { padding: 8px 24px 24px; } .ti-p { font-size: 16px; line-height: 26px; } .ti-f { padding: 16px 0 8px; } }

/* how we work: testing, the three thirds and the guarantee */
.te { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
.te-v { position: relative; min-height: 440px; border-radius: 6px; background: #0b0b0b; overflow: hidden; }
.te-v .pp-art { position: absolute; z-index: 1; inset: 24px 24px 72px; margin: 0; aspect-ratio: auto; }
.te-v .pp-art .pp-svg { position: absolute; inset: 0; }
.te-v .pp-svg .fc { fill: #0b0b0b; }
.te-k { position: absolute; z-index: 2; left: 32px; right: 32px; bottom: 28px; margin: 0; padding: 0; list-style: none; display: flex; justify-content: center; gap: 32px; }
.te-k li { font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.te-t { padding: 48px; border-radius: 6px; background: #0b0b0b; }
.te-t p { margin: 0; font-size: 18px; line-height: 30px; color: var(--text-2); text-wrap: pretty; }
.te-t p + p { margin-top: 16px; }
.te-t .k { color: var(--text); }
.te-g { margin-top: 32px; padding-top: 24px; box-shadow: inset 0 1px 0 var(--ln); }
.te-g .sec-k { margin: 0 0 12px; }
@media (max-width: 1023.98px) { .te { grid-template-columns: minmax(0, 1fr); } .te-v { min-height: 360px; } }
@media (max-width: 639.98px) { .te-t { padding: 32px 24px; } .te-t p { font-size: 16px; line-height: 26px; } .te-v { min-height: 300px; } .te-k { gap: 16px; } }

/* how we work: the pricing row (the homepage FAQ row) and its WhatsApp button */
.pr-r { margin-top: 20px !important; }
.pr-r .wa { display: inline-flex; width: auto; min-width: 280px; padding: 0 24px; }
#pricing .fq-ls::after { content: none; }

/* phones: the byline stacks (no separator), the ring's labels give way to the In short card, the fold label goes */
@media (max-width: 639.98px) {
  .upd { flex-direction: column; } .upd span + span::before { content: none; }
  .hw-k { display: none; }
  .hx-ct .ct-fd span { display: none; }
}
/* phones: the journey map becomes one card per study (its marks as chips, its quote under them) */
@media (max-width: 639.98px) {
  .jm-t { overflow: visible; background: none; }
  .jm-t table, .jm-t tbody, .jm-t tr, .jm-t th, .jm-t td { display: block; min-width: 0; width: auto !important; text-align: left !important; }
  .jm-t table { min-width: 0; }
  .jm-t thead { display: none; }
  .jm-t tbody { display: grid; gap: 8px; }
  .jm-t tbody tr { display: flex; flex-wrap: wrap; gap: 8px; padding: 20px 24px 24px; border-radius: 6px; background: #0b0b0b; box-shadow: none; }
  .jm-t tbody th { flex: 1 0 100%; padding: 0 0 4px !important; }
  .jm-t td { padding: 0 !important; }
  .jm-t td:not(.y):not(.jm-e) { display: none; }
  .jm-t td.y { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px 0 10px !important; border-radius: 999px; background: #1a1a1a; font-size: 14px; line-height: 20px; color: var(--text-2); }
  .jm-t td.y::after { content: attr(data-c); }
  .jm-t td.y .jm-y { width: 8px; height: 8px; } .jm-t td.y .jm-y::after { width: 4px; height: 4px; right: -2px; top: -2px; }
  .jm-t td.jm-e { flex: 1 0 100%; padding-top: 8px !important; }
  .jm-v { height: 280px; }
}

/* ===================== seo-v2 ADDITIONS, Overnight 1C (new rules, new class names only) ===================== */
/* ======================================================================================================================
   Overnight 1C: the last six pages (compare x2, contact, faq, glossary hub, glossary term). New rules only, all on new
   class names, so the ten 1A and 1B pages are untouched. The same recipe: a #171717 grey cell, flat #0b0b0b panels seated
   8px in (6px corners), the dot grid, 1px grey line drawings, white for ours, lime only as a small non text accent, reveal
   on scroll (.sr / .on), one move then rest, reduced motion shows the final state. No borders, outlines, gradients or
   shadows on panels (hairlines are table or list rules, not panel edges). Red is not used anywhere on these pages.
   ====================================================================================================================== */

/* shared: a drawing panel with its legend along the foot (compare, best agencies, contact, faq, glossary) */
.dv { position: relative; border-radius: 6px; background: #0b0b0b; overflow: hidden; }
.cm-k, .bs-k, .rp-k, .ln-vk, .rt-k, .bs-vk { position: absolute; z-index: 2; margin: 0; padding: 0; list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 28px; }
.cm-k li, .bs-k li, .rp-k li, .ln-vk li, .rt-k li, .bs-vk li { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cm-k li::before, .bs-k li::before, .rp-k li::before, .rt-k li::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: rgba(245, 245, 243, .5); }
.cm-k li:last-child::before, .rp-k li.us::before, .rt-k li.us::before { background: #f5f5f3; box-shadow: 4px -4px 0 -1.5px #A3E635; }
.cm-k li:last-child, .rp-k li.us, .rt-k li.us { color: var(--text-2); }
.ln-vk li + li::before, .bs-vk li + li::before { content: ""; width: 16px; height: 0; border-top: 1px solid rgba(255, 255, 255, .3); margin-right: 8px; }
.cm-ck { display: inline-block; flex: none; width: 10px; height: 10px; margin-right: 10px; border-radius: 999px; background: #f5f5f3; position: relative; vertical-align: 1px; }
.cm-ck::after { content: ""; position: absolute; right: -3px; top: -3px; width: 5px; height: 5px; border-radius: 999px; background: #A3E635; }

/* hero drawing panels with an In short card under them: the legend sits between the drawing and the card */
.hx-cm .pp-art, .hx-bs .pp-art, .hx-gl .pp-art, .hx-rp .pp-art { bottom: 42%; }
.hx-cm .cm-k, .hx-bs .bs-k, .hx-rp .rp-k { left: 24px; right: 24px; top: calc(58% - 52px); gap: 4px 20px; flex-wrap: nowrap; }
.hx-bs .bs-k { counter-reset: bk; }
.hx-bs .bs-k li { counter-increment: bk; }
.hx-bs .bs-k li::before { content: counter(bk, decimal-leading-zero); width: auto; height: auto; background: none; border-radius: 0; color: var(--muted); }
.bs-d .is-a { font-size: 22px; }
.lead .bs-dl { color: var(--text-2); }
@media (min-width: 901px) and (max-height: 820px) { .hx-cm .pp-art, .hx-bs .pp-art, .hx-gl .pp-art, .hx-rp .pp-art { bottom: 46%; } .hx-cm .cm-k, .hx-bs .bs-k, .hx-rp .rp-k { top: calc(54% - 48px); } }
@media (min-width: 901px) and (max-width: 1199.98px) { .hx-cm .cm-k, .hx-bs .bs-k, .hx-rp .rp-k { gap: 4px 16px; left: 24px; right: 24px; } }
@media (max-width: 639.98px) { .hx-cm .pp-art, .hx-bs .pp-art, .hx-gl .pp-art, .hx-rp .pp-art { bottom: 56%; } .hx-cm .cm-k, .hx-bs .bs-k, .hx-rp .rp-k { display: none; } .bs-d .is-a { font-size: 18px; } }

/* ---------- compare signature: the crafted comparison table. Ours is the last column: white text, a white dot with a lime
   tip on every line, a slightly lighter flat column, and a lime rule drawn down its left edge once on view */
.cm { grid-template-columns: minmax(0, 1fr); }
.cm-t { position: relative; overflow-x: auto; border-radius: 6px; background: #0b0b0b; }
.cm-t table { width: 100%; min-width: 960px; border-collapse: collapse; font-size: 16px; line-height: 24px; }
.cm-t th, .cm-t td { padding: 20px 24px; text-align: left; vertical-align: top; }
.cm-t thead th { padding-top: 32px; padding-bottom: 20px; vertical-align: bottom; font-weight: 400; }
.cm-t thead th.cm-q { font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cm-h { display: flex; flex-direction: column; gap: 2px; }
.cm-h b { font-family: var(--display); font-size: 20px; line-height: 28px; font-weight: 500; letter-spacing: -0.01em; color: var(--text-2); }
.cm-s { font-size: 14px; line-height: 20px; color: var(--muted); }
.cm-av { display: flex; margin-bottom: 10px; }
.cm-av img { width: 28px; height: 28px; border-radius: 999px; object-fit: cover; background: #cfcfcf; box-shadow: 0 0 0 2px #141414; }
.cm-av img + img { margin-left: -6px; }
.cm-t th.cm-us .cm-h b { color: var(--text); }
.cm-t tbody tr { box-shadow: inset 0 1px 0 var(--ln); }
.cm-t tbody th { width: 20%; padding-left: 32px; font-family: var(--display); font-size: 18px; line-height: 26px; font-weight: 500; color: var(--text); }
.cm-t thead th:first-child { padding-left: 32px; }
.cm-t td { width: 16%; color: var(--muted); }
.cm-t .cm-us { position: relative; width: 32%; background: #141414; color: var(--text); padding-right: 32px; }
.cm-t td.cm-us { display: table-cell; }
.cm-t td.cm-us { padding-left: 48px; }
.cm-t td.cm-us .cm-ck { position: absolute; left: 26px; top: 27px; margin: 0; }
.cm-t thead th.cm-us { border-radius: 6px 6px 0 0; }
.cm-t tbody tr:last-child td.cm-us { border-radius: 0 0 6px 0; }
.cm-t .cm-us::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1.5px; background: #A3E635; transform-origin: 50% 0; }
.js .cm.sr .cm-t .cm-us::before { transform: scaleY(0); }
.js .cm.sr.on .cm-t .cm-us::before { transform: none; transition: transform 500ms cubic-bezier(.45, 0, .25, 1); }
.js .cm.sr.on .cm-t thead .cm-us::before { transition-delay: 300ms; }
.js .cm.sr.on .cm-t tbody tr .cm-us::before { transition-delay: calc(560ms + var(--i) * 140ms); }
.js .cm.sr .cm-t tbody tr { opacity: 0; transform: translateY(8px); }
.js .cm.sr.on .cm-t tbody tr { opacity: 1; transform: none; transition: opacity 400ms cubic-bezier(.22, 1, .36, 1), transform 400ms cubic-bezier(.22, 1, .36, 1); transition-delay: calc(500ms + var(--i) * 140ms); }
@media (prefers-reduced-motion: reduce) { .js .cm.sr .cm-t tbody tr { opacity: 1 !important; transform: none !important; transition: none !important; } .js .cm.sr .cm-t .cm-us::before { transform: none !important; transition: none !important; } }
.cm-f { margin: 0; padding: 20px 24px 12px; display: flex; align-items: baseline; font-size: 16px; line-height: 24px; color: var(--muted); }
@media (min-width: 901px) { .pp-grid.cm-g { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pp-grid .cd.cm-c .cd-t { color: var(--text); }
@media (max-width: 900px) {
  .cm-t { overflow: visible; background: none; }
  .cm-t table, .cm-t tbody, .cm-t tr, .cm-t th, .cm-t td { display: block; min-width: 0; width: auto !important; }
  .cm-t thead { display: none; }
  .cm-t tbody { display: grid; gap: 8px; }
  .cm-t tbody tr { display: grid; grid-template-columns: minmax(0, 1fr); padding: 8px; border-radius: 6px; background: #0b0b0b; box-shadow: none; }
  .cm-t tbody th { padding: 16px 16px 12px !important; }
  .cm-t td.cm-us { order: -1; display: block; margin: 0 0 4px; padding: 20px 20px 20px 44px; border-radius: 6px !important; }
  .cm-t td.cm-us .cm-ck { left: 20px; top: 27px; }
  .cm-t tbody th { order: -2; }
  .cm-t td.cm-us::after { content: "Ecom Landers, from ecomlanders.co"; display: block; margin-top: 8px; font-size: 14px; line-height: 20px; color: var(--muted); }
  .cm-t td:not(.cm-us) { display: flex; justify-content: space-between; gap: 16px; padding: 10px 16px; font-size: 16px; }
  .cm-t td:not(.cm-us)::before { content: attr(data-o); color: var(--text-2); }
  .cm-t td:not(.cm-us) + td:not(.cm-us) { box-shadow: inset 0 1px 0 var(--ln); }
  .cm-f { padding: 16px 8px 8px; }
}

/* ---------- best agencies signature: the four criteria, the sift drawing, and the scorecard under both */
.bs { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.bs-l ol { display: flex; flex-direction: column; justify-content: center; height: 100%; }
.bs-v { position: relative; min-height: 520px; border-radius: 6px; background: #0b0b0b; overflow: hidden; }
.bs-v .pp-art { position: absolute; z-index: 1; inset: 24px 24px 80px; margin: 0; aspect-ratio: auto; }
.bs-v .pp-art .pp-svg, .rt-v .pp-art .pp-svg, .ln-v .pp-art .pp-svg { position: absolute; inset: 0; }
.bs-v .pp-svg .fc, .rt-v .pp-svg .fc, .ln-v .pp-svg .fc { fill: #0b0b0b; }
.bs-vk { left: 24px; right: 24px; bottom: 28px; gap: 4px 20px; }
.bs-t { grid-column: 1 / -1; }
@media (min-width: 901px) { .bs-t table { min-width: 900px; } }
.bs-t tbody th { width: 22%; }
.bs-t thead th { font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.bs-t tbody th b { display: block; font-weight: 500; }
.bs-t tbody th b.ph { color: var(--muted); }
.bs-n { display: block; margin-bottom: 4px; font-family: var(--sans); font-size: 14px; line-height: 20px; font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }
.bs-t td { width: 19.5%; }
.bs-t tr.bs-us td, .bs-t tr.bs-us th { background: #141414; color: var(--text); }
.bs-t tr.bs-us td a { color: var(--text); text-decoration: underline; text-decoration-color: rgba(245, 245, 243, .35); text-underline-offset: 4px; }
.bs-t tr.bs-us th { position: relative; }
.bs-t tr.bs-us th::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1.5px; background: #A3E635; transform-origin: 50% 0; }
.js .bs.sr .bs-t tr.bs-us th::before { transform: scaleY(0); }
.js .bs.sr.on .bs-t tr.bs-us th::before { transform: none; transition: transform 600ms cubic-bezier(.45, 0, .25, 1) 1200ms; }
.js .bs.sr .bs-t tbody tr { opacity: 0; transform: translateY(8px); }
.js .bs.sr.on .bs-t tbody tr { opacity: 1; transform: none; transition: opacity 400ms cubic-bezier(.22, 1, .36, 1), transform 400ms cubic-bezier(.22, 1, .36, 1); transition-delay: calc(900ms + var(--i) * 120ms); }
@media (prefers-reduced-motion: reduce) { .js .bs.sr .bs-t tbody tr { opacity: 1 !important; transform: none !important; transition: none !important; } .js .bs.sr .bs-t tr.bs-us th::before { transform: none !important; transition: none !important; } }
@media (max-width: 1023.98px) { .bs { grid-template-columns: minmax(0, 1fr); } .bs-v { min-height: 420px; } }
@media (max-width: 900px) {
  .bs-t td::before { content: attr(data-c) !important; }
  .bs-t tr.bs-us td { order: 0; margin: 0; padding: 10px 16px; border-radius: 0 !important; background: none; display: flex; flex-direction: column; gap: 2px; }
  .bs-t tr.bs-us td::after { content: none; }
  .bs-t tr.bs-us td::before { color: var(--muted); font-size: 14px; line-height: 20px; }
  .bs-t tr.bs-us td .cm-ck { display: none; }
  .bs-t tr.bs-us { background: #141414; }
  .bs-t tr.bs-us th { background: none; }
  .bs-t tr.bs-us td + td { box-shadow: inset 0 1px 0 var(--ln); }
}
@media (max-width: 639.98px) { .bs-v { min-height: 320px; } .bs-v .pp-art { inset: 12px 8px 88px; } .bs-vk { left: 16px; right: 16px; bottom: 16px; gap: 4px 12px; } .bs-vk li + li::before { width: 8px; margin-right: 0; } }

/* best agencies: the shortlist. Ecom Landers first (a 1B case study panel: the real page in a phone, the published
   figures), then four placeholder entries */
.bs-g { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bs-g > .bs-1 { grid-column: 1 / -1; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); }
.bs-1 .cs-v { --pw: 220px; min-height: 520px; }
.bs-1 .cs-c { padding: 32px 32px 24px; }
.bs-1 .cd-i { margin: 0 0 8px; }
.bs-1 .cz-t { max-width: 64ch; }
.bs-bf { margin: 16px 0 0; font-size: 16px; line-height: 24px; color: var(--text-2); }
.bs-bf .sec-k { display: block; margin: 0 0 4px; }
.bs-1 .czx { margin-top: 12px; }
.bs-1 .czx .cz-ss { grid-template-columns: repeat(2, minmax(0, 260px)); }
.bs-1 .czx .cz-s { padding: 20px 20px 64px; background: #141414; }
.bs-1 .czx .cz-n { font-size: 40px; white-space: nowrap; }
.bs-p { display: flex; flex-direction: column; gap: 12px; min-height: 240px; }
.bs-p .cd-i { margin: 0; }
.bs-p h3 { margin: 0; font-family: var(--display); font-size: 22px; line-height: 30px; font-weight: 500; }
.bs-p p.ph { margin: 0; font-size: 16px; line-height: 24px; }
.bs-df { margin: 0; padding: 20px 0 8px; font-size: 16px; line-height: 24px; color: var(--text-2); }
@media (max-width: 1199.98px) { .bs-g { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639.98px) { .bs-g { grid-template-columns: minmax(0, 1fr); } .bs-g > .bs-1 { grid-template-columns: minmax(0, 1fr); } .bs-1 .cs-v { --pw: 200px; min-height: 0; padding: 32px 0; }
  .bs-1 .cs-c { padding: 16px 16px 8px; } .bs-1 .czx .cz-ss { grid-template-columns: minmax(0, 1fr); } .bs-1 .czx .cz-n { font-size: 32px; } .bs-p { min-height: 0; } }

/* ---------- contact hero: the three ways, email first and large, on the dot grid */
.hx-ctc { display: flex; flex-direction: column; justify-content: center; padding: 40px; }
.ctc { position: relative; z-index: 2; padding: 40px; border-radius: 16px; background: #141414; }
.ctc > .sec-k { margin: 0 0 8px; }
.ctc-m { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--display); font-size: clamp(28px, 2.6vw, 40px); line-height: 1.2; font-weight: 500; letter-spacing: -0.02em; color: var(--text); text-decoration: underline; text-decoration-color: rgba(245, 245, 243, .25); text-underline-offset: 8px; text-decoration-thickness: 1px; overflow-wrap: anywhere; }
.ctc-m:hover { text-decoration-color: var(--text); }
.ctc-r { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-top: 32px; padding-top: 32px; box-shadow: inset 0 1px 0 var(--ln); }
.ctc-r > div { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.ctc-r .sec-k { margin: 0; }
.ctc-r p:not(.sec-k) { margin: 0 0 8px; font-size: 16px; line-height: 24px; color: var(--text-2); }
.ctc-r .wa { margin-top: auto; width: 100%; max-width: 260px; }
.ctc-b { margin-top: auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; width: 100%; max-width: 260px; border-radius: 999px; background: #f5f5f3; color: #0b0b0b; font-size: 16px; font-weight: 500; transition: background-color 200ms var(--ease); }
.ctc-b:hover { background: #fff; }
.ctc-b svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 901px) and (max-width: 1199.98px) { .hx-ctc { padding: 24px; } .ctc { padding: 28px; } .ctc-r { grid-template-columns: minmax(0, 1fr); gap: 24px; } }
@media (max-width: 900px) { .hero .hx-ctc { min-height: 0; padding-bottom: 72px; } }
@media (max-width: 639.98px) { .hx-ctc { padding: 16px 16px 64px; } .ctc { padding: 24px; } .ctc-m { font-size: 24px; } .ctc-r { grid-template-columns: minmax(0, 1fr); gap: 24px; } .ctc-r .wa, .ctc-b { max-width: none; } }

/* contact signature: three ways in, one team (the routes drawing), and what each way is for */
.rt { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.rt-v { position: relative; min-height: 600px; border-radius: 6px; background: #0b0b0b; overflow: hidden; }
.rt-v .pp-art { position: absolute; z-index: 1; inset: 24px 24px 80px; margin: 0; aspect-ratio: auto; }
.rt-k { left: 24px; right: 24px; bottom: 28px; }
.rt-l { margin: 0; padding: 8px 40px; border-radius: 6px; background: #0b0b0b; list-style: none; display: flex; flex-direction: column; justify-content: center; }
.ct-w { display: flex; flex-direction: column; padding: 28px 0; }
.ct-w + .ct-w { box-shadow: inset 0 1px 0 var(--ln); }
.ct-i { margin: 0 0 8px; display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 20px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ct-i i { width: 6px; height: 6px; border-radius: 999px; background: rgba(245, 245, 243, .5); }
.ct-w h3 { margin: 0 0 8px; font-family: var(--display); font-weight: 500; font-size: 22px; line-height: 30px; letter-spacing: -0.01em; color: var(--text); }
.ct-w p { margin: 0; font-size: 16px; line-height: 24px; color: var(--text-2); }
.ct-w .ct-x { margin-top: 8px; color: var(--muted); }
.ct-w .ct-p a { color: var(--text-2); text-decoration: underline; text-decoration-color: rgba(245, 245, 243, .3); text-underline-offset: 4px; }
.ct-how { margin: 12px 0 0; padding: 0; list-style: none; counter-reset: ch; display: grid; gap: 8px; }
.ct-how li { counter-increment: ch; display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 8px; font-size: 16px; line-height: 24px; color: var(--muted); }
.ct-how li::before { content: counter(ch); font-size: 14px; color: var(--muted); }
.ct-w .cd-go { padding-top: 12px; }
@media (max-width: 1023.98px) { .rt { grid-template-columns: minmax(0, 1fr); } .rt-v { min-height: 460px; } }
@media (max-width: 639.98px) { .rt-v { min-height: 340px; } .rt-v .pp-art { inset: 12px 8px 72px; } .rt-k { gap: 4px 16px; left: 16px; right: 16px; bottom: 16px; } .rt-l { padding: 8px 24px; } .ct-w .ct-p a { display: inline-flex; align-items: center; min-height: 44px; } }

/* contact: the question form (preview, sends nothing) */
.qf { align-items: start; }
.qf h2 { margin-bottom: 24px !important; }
.qf-f { display: flex; flex-direction: column; }
.qf-f label { display: block; margin: 0 0 8px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--muted); }
.qf-f label + textarea, .qf-f label + input { margin-bottom: 20px; }
.qf-f textarea, .qf-f input { width: 100%; padding: 14px 20px; border: 0; border-radius: 16px; background: #1a1a1a; color: var(--text); font: inherit; font-size: 16px; line-height: 24px; resize: vertical; }
.qf-f input { height: 52px; border-radius: 999px; }
.qf-f textarea::placeholder, .qf-f input::placeholder { color: var(--muted); }
.qf-f textarea:focus-visible, .qf-f input:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.qf-b { align-self: flex-start; min-width: 200px; }
@media (max-width: 900px) { .qf { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 639.98px) { .qf { padding: 24px; } .qf-b { width: 100%; } }

/* ---------- FAQ hero: the twelve questions as a contents panel, in three groups */
.hx-fx { display: flex; align-items: center; padding: 40px; }
.fx { position: relative; z-index: 2; width: 100%; padding: 32px; border-radius: 16px; background: #141414; display: grid; gap: 24px; }
.fx-g .sec-k { margin: 0 0 8px; }
.fx-g ol, .ln-s ul { margin: 0; padding: 0; list-style: none; }
.fx-g a, .ln-s a { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 12px; align-items: baseline; padding: 6px 0; min-height: 44px; align-content: center; font-size: 16px; line-height: 24px; color: var(--text-2); transition: color 180ms var(--ease); }
.fx-g a:hover, .ln-s a:hover, .fx-g a:focus-visible, .ln-s a:focus-visible { color: var(--text); }
.fx-n { font-size: 14px; line-height: 20px; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (min-width: 901px) and (max-height: 820px) { .fx { padding: 24px; gap: 16px; } .fx-g a { padding: 2px 0; min-height: 36px; } }
@media (min-width: 901px) and (max-width: 1199.98px) { .hx-fx { padding: 24px; } .fx { padding: 24px; gap: 16px; } }
@media (max-width: 900px) { .hero .hx-fx { min-height: 0; } }
@media (max-width: 639.98px) { .hx-fx { padding: 16px; } .fx { padding: 20px; } }

/* FAQ signature: how we work, the lane drawing, the short answers under each station */
.ln { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ln-v { grid-column: 1 / -1; position: relative; height: 420px; border-radius: 6px; background: #0b0b0b; overflow: hidden; }
.ln-v .pp-art { position: absolute; z-index: 1; inset: 16px 32px 72px; margin: 0; aspect-ratio: auto; }
.ln-vk { left: 32px; right: 32px; bottom: 28px; gap: 8px 32px; }
.ln-l { display: contents; }
.ln-s { padding: 32px; border-radius: 6px; background: #0b0b0b; list-style: none; }
.ln-k { margin: 0 0 16px; display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ln-k i { width: 6px; height: 6px; border-radius: 999px; background: rgba(245, 245, 243, .5); }
.ln-s li + li a { box-shadow: inset 0 1px 0 var(--ln); }
.ln-t { display: flex; flex-direction: column; gap: 2px; }
.ln-q { font-size: 14px; line-height: 20px; color: var(--muted); }
.ln-a { font-family: var(--display); font-size: 18px; line-height: 26px; font-weight: 500; letter-spacing: -0.01em; color: var(--text); }
.ln-s a { padding: 12px 0; }
.ln-f { grid-column: 1 / -1; margin: 0; padding: 16px 24px 8px; font-size: 16px; line-height: 24px; color: var(--muted); }
.ln-f a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--text-2); }
.ln-f a svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ln-f a:hover { color: var(--text); }
@media (max-width: 1023.98px) { .ln { grid-template-columns: minmax(0, 1fr); } .ln-v { height: 320px; } .ln-v .pp-art { inset: 12px 12px 72px; } }
@media (max-width: 639.98px) { .ln-v { height: 260px; } .ln-v .pp-art { inset: 8px 4px 84px; } .ln-vk { gap: 4px 12px; left: 16px; right: 16px; bottom: 16px; } .ln-vk li + li::before { width: 8px; margin-right: 0; } .ln-s { padding: 24px; } .ln-f { padding: 16px 0 8px; } }
/* every FAQ row can be linked to: keep it clear of the sticky nav */
.fq-i[id] { scroll-margin-top: calc(var(--navh, 72px) + 16px); }
#how-we-work, .gl-t, .gl-l, #terms { scroll-margin-top: calc(var(--navh, 72px) + 16px); }

/* ---------- glossary hero: the drawer of cards, the A to Z jump in the card under it */
.gl-az { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.gl-az a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; background: #1f1f1f; font-family: var(--display); font-size: 18px; font-weight: 500; color: var(--text); transition: background-color 200ms var(--ease), color 200ms var(--ease); }
.gl-az a:hover, .gl-az a:focus-visible { background: #f5f5f3; color: #0b0b0b; }
.hx-gl .is-src a { margin: 0; }

/* glossary signature: where each term sits (the zones drawing over three columns of term chips) */
.zn { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.zn-v { grid-column: 1 / -1; }
.zn-l { display: contents; }
.zn-z { padding: 32px; border-radius: 6px; background: #0b0b0b; list-style: none; }
.zn-x { margin: 0 0 16px; font-size: 16px; line-height: 24px; color: var(--text-2); }
.zn-c { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.zn-c a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; background: #1a1a1a; font-size: 16px; line-height: 24px; color: var(--text-2); transition: background-color 200ms var(--ease), color 200ms var(--ease); }
.zn-c a:hover, .zn-c a:focus-visible { background: #f5f5f3; color: #0b0b0b; }
@media (max-width: 1023.98px) { .zn { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 639.98px) { .zn-z { padding: 24px; } }

/* glossary: all terms, one flat panel each */
.gl-ph { margin: 0 0 16px; }
.gl-g { align-items: stretch; }
.gl-t { display: flex; flex-direction: column; }
.gl-l { position: absolute; right: 32px; top: 28px; font-family: var(--display); font-size: 40px; line-height: 1; font-weight: 500; color: rgba(245, 245, 243, .16); }
.gl-t h3 { margin: 0 64px 12px 0; font-family: var(--display); font-size: 24px; line-height: 32px; font-weight: 500; letter-spacing: -0.02em; color: var(--text); }
.gl-d { margin: 0; font-size: 16px; line-height: 26px; color: var(--text-2); }
.gl-q { margin: 20px 0 0; padding: 16px 0 0; box-shadow: inset 0 1px 0 var(--ln); }
.gl-q blockquote { margin: 0; }
.gl-q p { margin: 0; font-size: 16px; line-height: 24px; color: var(--text); }
.gl-q figcaption { margin-top: 8px; font-size: 14px; line-height: 20px; color: var(--muted); }
.gl-q figcaption a { display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; color: var(--text-2); text-decoration: underline; text-decoration-color: rgba(245, 245, 243, .3); text-underline-offset: 4px; }
.gl-t .cd-go { padding-top: 16px; }
@media (max-width: 900px) { .gl-g { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 639.98px) { .gl-l { right: 24px; top: 24px; font-size: 32px; } .gl-t h3 { font-size: 22px; line-height: 30px; } }

/* ---------- RPV: the formula, set large */
.fm-r { display: flex; flex-direction: column; gap: 12px; }
.fm-e { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; font-family: var(--display); font-size: clamp(28px, 2.6vw, 40px); line-height: 1.2; font-weight: 500; letter-spacing: -0.02em; color: var(--text); }
.fm-o { color: var(--muted); }
.fm-2 { padding-left: 0; color: var(--text-2); }
.fm-2 .fm-t { color: var(--text-2); }
.fm-n { margin: 12px 0 0; font-size: 16px; line-height: 26px; color: var(--muted); max-width: 56ch; }
.fm-r .ph-b { margin-top: 12px; }
@media (max-width: 900px) { .fm.st-p { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 639.98px) { .fm-e { font-size: 24px; gap: 4px 12px; } }

/* RPV signature: the three published RPV lifts, each with its page in a phone and its own figures */
.rvl { align-items: stretch; }
.rv { display: flex; flex-direction: column; padding: 8px; }
.rv-v { --pw: 200px; position: relative; display: grid; place-items: center; height: 520px; border-radius: 6px; overflow: hidden; background: #0b0b0b; }
.rv-v .cz-dv { position: relative; left: auto; top: auto; margin: 0; width: var(--pw); height: calc(var(--pw) * 568 / 268); border-radius: calc(var(--pw) * .149); }
.rv-v .cz-dv .cz-sc { border-radius: calc(var(--pw) * .127); clip-path: inset(0 round calc(var(--pw) * .127)); }
.rv-v .cz-pg img { display: block; width: 100%; height: auto; }
.rv-c { display: flex; flex-direction: column; flex: 1; padding: 20px 16px 8px; }
.rv-c .cz-b { margin: 0 0 12px; }
.rv-c .czx .cz-ss { grid-template-columns: minmax(0, 1fr); }
.rv-c .czx .cz-s { padding: 20px 20px 72px; background: #141414; }
.rv-c .czx .cz-n { font-size: 44px; white-space: nowrap; }
.rv-o { margin: 12px 0 0; padding: 0; list-style: none; }
.rv-o li { padding: 10px 0; font-size: 16px; line-height: 24px; color: var(--muted); }
.rv-o li + li { box-shadow: inset 0 1px 0 var(--ln); }
.rv-o b { font-weight: 500; color: var(--text); margin-right: 6px; }
.rv-c .cd-go .pl { margin-left: 8px; }
@media (min-width: 901px) and (max-width: 1199.98px) { .rv-v { --pw: 170px; height: 440px; } .rv-c .czx .cz-n { font-size: 36px; } }
@media (max-width: 900px) { .rvl.gc-3 { grid-template-columns: minmax(0, 1fr); } .rv-v { height: auto; padding: 32px 0; } }

/* phones: links inside running text in the scorecard and the glossary quotes keep a 44px tap height */
@media (max-width: 900px) { .bs-t tr.bs-us td a { display: inline-block; padding: 10px 0; margin: -10px 0; } }
.gl-q figcaption a { min-width: 44px; justify-content: center; }

/* v110 QA: the phone menu holds the page still while it is open (html only, so the sticky nav keeps its place) */
html.nav-lock { overflow: hidden; }
html.nav-lock body { padding-right: var(--nav-sbw, 0px); }
/* v110 QA: reduced motion on phones and tablets (900 and under) shows the notes at their final place (no lift; the lift is the
   desktop rest position only) */
@media (prefers-reduced-motion: reduce) and (max-width: 900px) { .js .an.sr .an-tx { transform: none !important; } }

/* QA polish pass (21 Oct 2026): visual QA fixes, appended last so they win; see ~/Downloads/ecl-shots/qa/SITE-QA.md */
/* labels: the marker to text gap on the 8pt grid (was 10px) */
.sec-k, .bd-l .sec-k, .ex-c, .ct-i, .ln-k, .sm-k { gap: 8px; }
/* headings: no lone last word (zero specificity, so every heading that already sets text-wrap keeps it) */
:where(h2, h3, h4) { text-wrap: pretty; }
/* hero headings: a hyphenated word never splits across lines */
#h1 .nw { white-space: nowrap; }
/* contact: "Ecom Landers" stays on one line on phones instead of leaving "Landers" alone */
@media (max-width: 600px) { [data-page-slug="/contact/"] #h1 .l2 { white-space: nowrap; } }
/* how we work, inside each step: the second title and line sit under the first on tablets instead of on top of it */
.pp-grid .cd .cd-t2 { margin-top: 24px; }
@media (min-width: 601px) and (max-width: 900px) {
  .pp-grid .cd:has(> .cd-t2) { grid-template-rows: 1fr auto auto auto auto auto 1fr; }
  .pp-grid .cd > .cd-t2 { grid-column: 2; grid-row: 5; }
  .pp-grid .cd > .cd-t2 + .cd-p { grid-column: 2; grid-row: 6; }
}

/* no single word left alone on a line in running copy (README: no orphans) */
main p { text-wrap: pretty; }

/* ---------- QA pass, 26 Oct 2026 (Ajay: fix every desktop, phone and graphic formatting error) ---------- */
/* breadcrumbs stay on one line; a long last crumb ends in an ellipsis instead of wrapping under a stray chevron */
.crumbs { min-width: 0; max-width: 100%; overflow: hidden; }
.crumbs ol { flex-wrap: nowrap; min-width: 0; }
.crumbs li { flex-shrink: 0; }
.crumbs li:last-child { flex: 0 1 auto; min-width: 0; overflow: hidden; }
.crumbs li:last-child > span { display: block; align-self: center; height: auto; min-height: 0; line-height: 20px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* paragraph panels beside a heading panel start at the top, level with the heading (equal heights, content top aligned) */
.gp.st-a { align-items: flex-start; }
@media (max-width: 639.98px) {
  /* text inside the grey frame lines up with the panel text (24px from the screen edge), not 8px */
  .cz-lk { padding: 16px 16px 8px; }
  .cm-f { padding: 16px 16px 8px; }
  .ln-f { padding: 16px 16px 8px; }
  /* diagram legends: whole items, centred, never one item stranded on a line of its own */
  .rt-k { display: grid; grid-template-columns: repeat(2, auto); justify-content: center; gap: 4px 24px; }
  .rt-k li { white-space: nowrap; }
  .ln-vk { flex-direction: column; align-items: center; gap: 4px; }
  .ln-vk li { text-align: center; justify-content: center; }
  .ln-vk li + li::before { display: none; }
  .te-k { left: 12px; right: 12px; gap: 8px; }
  .te-k li { flex: 1 1 0; justify-content: center; text-align: center; white-space: nowrap; letter-spacing: 0; }
}
/* blog category: the planned categories row gets the same gap before the Book a call panel as every other section */
.chips.ct-ch { padding-bottom: 32px; }
@media (max-width: 639.98px) { .chips.ct-ch { padding-bottom: 24px; } }

/* 31 Oct 2026: the Google Calendar booking page (step 3). Google draws it on white, so it sits in a white rounded panel. */
.bk-gc-f { margin-top: 24px; border-radius: 6px; overflow: hidden; background: #fff; }
.bk-gc-f iframe { display: block; width: 100%; height: min(640px, calc(100vh - 260px)); min-height: 420px; border: 0; }
@media (max-width: 767.98px) { .bk-gc-f iframe { height: calc(100vh - 220px); min-height: 480px; } }
.cl-p { margin: 0; font-size: 16px; line-height: 24px; color: var(--muted); }
.cl-gc { display: block; padding: 0; min-height: 0; background: #fff; overflow: hidden; scroll-margin-top: 96px; }
.cl-gc iframe { display: block; width: 100%; height: 680px; border: 0; }
@media (max-width: 639.98px) { .cl-gc { padding: 0; } .cl-gc iframe { height: 760px; } }