/* StylSensei site (plan site-1). Every colour and font lives in this one :root block.
   Copy: verbatim. Every word on the pages comes from site.json, the owner's copy deck; the builder may not cut or reword it.
   Review 3 (2026-11-14): spacing and type from plans/assets/site-1/refs/mobbin_premium.md (stepped gaps, tight display
   type, grey sub text, small pill, one-colour logos, white bordered cards).
   Review 4 (2026-11-14): the ruled frame and the logo cells (the owner's Growth Today reference), headings at weight
   500, the mint button with an ink edge, graphs drawn from the deck's own numbers (dataviz rules: thin marks, 2px gaps,
   text in ink), the workflow strip, and motion that only runs when motion.js sets .js. */
:root {
  --ink: #071713;
  --ink-soft: #55665f;
  --paper: #fbfdfc;
  --card: #fefffe;
  --tint: #eef8f5;
  --green: #217561;
  --green-deep: #17584a;
  --mint: #38c4a2;
  --star: #a16207;
  --line: #dfe8e4;
  --dark: #0b211c;
  --on-dark: #f1f9f6;
  --on-dark-soft: #b3c8c0;
  --font-head: "Outfit", system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", system-ui, sans-serif;
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s8: 32px;
  --s10: 40px;
  --s12: 48px;
  --s16: 64px;
  --s20: 80px;
  --s24: 96px;
  --s28: 112px;
  --radius: 12px;
  --radius-lg: 24px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(7, 23, 19, 0.05);
  --shadow-menu: 0 12px 32px rgba(7, 23, 19, 0.08);
  --rule-on-dark: rgba(241, 249, 246, 0.16);
  --mint-line: rgba(56, 196, 162, 0.4);
  --mint-wash: rgba(56, 196, 162, 0.16);
  --container: 1160px;
  --frame: 1280px;
  --series-a: #217561;
  --series-b: #9aa8a3;
  --line-strong: #b9c9c3;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scroll-padding-top: var(--s24); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 500;
  color: inherit;
  overflow-wrap: break-word;
  min-width: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(36px, 5vw, 64px); line-height: 1.05; letter-spacing: -0.025em; }
h2 { font-size: clamp(30px, 3.6vw, 48px); line-height: 1.1; letter-spacing: -0.02em; }
h3 { font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
p, figure, blockquote { margin: 0; }
img { display: block; max-width: 100%; height: auto; }

a { color: var(--green); text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color 150ms ease; }
a:hover { color: var(--green-deep); }
a:active { color: var(--ink); }
:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.dark :focus-visible, .case :focus-visible { outline-color: var(--mint); }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--s4); }
.section { padding-block: var(--s16); }
main > section + section { border-top: 1px solid var(--line); }
.tint { background: var(--tint); }
.dark { background: var(--dark); color: var(--on-dark); }
.section-head { display: grid; gap: var(--s4); justify-items: center; max-width: 720px; margin: 0 auto var(--s12); text-align: center; }
.lead { font-size: 18px; color: var(--ink-soft); max-width: 36em; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: var(--s3) var(--s6);
  border: 1px solid var(--ink);
  border-radius: var(--radius-sm);
  background: var(--mint);
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn:active { transform: translateY(1px); background: var(--ink); color: var(--paper); }
.dark .btn, .btn-mint { border-color: var(--mint); }
.dark .btn:hover, .dark .btn:active, .btn-mint:hover, .btn-mint:active { background: var(--on-dark); border-color: var(--on-dark); color: var(--ink); }
.text-link { font-size: 16px; font-weight: 600; }

/* Nav: brand left, links centre, one button right */
.site-header { position: sticky; top: 0; z-index: 10; background: var(--paper); border-bottom: 1px solid var(--line); }
.nav-bar { display: flex; align-items: center; gap: var(--s3); min-height: 72px; }
.wordmark { margin-right: auto; font-family: var(--font-head); font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; }
.wordmark:hover { color: var(--green); }
.nav-links { display: none; gap: var(--s8); margin: 0; padding: 0; list-style: none; }
.nav-links a, .nav-menu a { color: var(--ink-soft); font-size: 15px; font-weight: 500; text-decoration: none; }
.nav-links a:hover, .nav-menu a:hover { color: var(--ink); }
.nav-menu { position: relative; }
.nav-menu summary {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 var(--s3);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu ul {
  position: absolute;
  top: calc(100% + var(--s2));
  right: 0;
  min-width: 240px;
  margin: 0;
  padding: var(--s2);
  list-style: none;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-menu);
}
.nav-menu:not([open]) ul { display: none; }
.nav-menu li a { display: block; padding: var(--s3); font-size: 16px; color: var(--ink); }
.nav-bar .btn { padding-inline: var(--s4); }

/* Hero: Matt Larsen's standard above the fold. Brand (the header), rating, the call-out, headline, sub headline, one
   button with its friction line, then the client logos with their count. Stepped gaps, not one gap for everything. */
.hero-center { display: grid; justify-items: center; padding-block: var(--s6) var(--s12); text-align: center; }
.rating { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s2); font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--ink-soft); }
.stars { font-size: 16px; letter-spacing: 1px; color: var(--star); }
.callout { margin-top: var(--s3); padding: var(--s1) var(--s4); border-radius: 999px; border: 1px solid var(--ink); color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1.6; }
.hero h1 { max-width: 14em; margin-top: var(--s4); }
.hero-sub { max-width: 34em; margin-top: var(--s4); font-size: 17px; line-height: 1.55; color: var(--ink-soft); }
.btn-lg { width: min(100%, 340px); min-height: 52px; margin-top: var(--s6); font-size: 17px; }
.cta-note { display: flex; align-items: center; justify-content: center; gap: var(--s3); margin-top: var(--s4); font-size: 14px; line-height: 1.4; color: var(--ink-soft); text-align: left; }
.cta-note .avatar { width: 36px; height: 36px; }
.logo-band { display: grid; gap: var(--s4); justify-items: center; width: 100%; margin-top: var(--s10); }
.logos-h { font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--ink-soft); }
.logo-cells { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.logo-cells li { display: flex; align-items: center; justify-content: center; height: 64px; padding: var(--s4) var(--s5); background: var(--card); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.logo-cells img { width: auto; max-width: min(100%, 132px); max-height: 100%; opacity: 0.8; }
.actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s4) var(--s6); margin-top: var(--s12); }

.big { font-family: var(--font-head); font-weight: 600; line-height: 0.95; letter-spacing: -0.03em; color: var(--green); }
.who { font-size: 14px; line-height: 1.4; color: var(--ink-soft); }
.person { display: flex; align-items: center; gap: var(--s3); text-align: left; }
.person strong { display: block; font-size: 16px; font-weight: 600; line-height: 1.4; }
.avatar { width: 44px; height: 44px; flex: none; border-radius: 50%; object-fit: cover; }

/* Cards */
.card-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
.card {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: var(--s6);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card h3 { font-size: 19px; }
.card > p { font-size: 16px; line-height: 1.55; color: var(--ink-soft); }
a.card { color: var(--ink); text-decoration: none; transition: border-color 150ms ease, transform 150ms ease; }
a.card:hover { border-color: var(--green); transform: translateY(-2px); color: var(--ink); }
a.card:active { transform: translateY(0); }
.card-more { margin-top: auto; padding-top: var(--s3); font-size: 15px; font-weight: 600; color: var(--green); text-decoration: underline; text-underline-offset: 3px; }

/* Proof: one featured case on a dark card (the number beside the client's words), then one quote and the two reviews */
.case { display: grid; gap: var(--s8); padding: var(--s10) var(--s6); background: var(--dark); color: var(--on-dark); border-radius: var(--radius-lg); }
.case-panel { display: grid; gap: var(--s3); align-content: center; }
.case-panel .big { font-size: clamp(104px, 13vw, 176px); color: var(--mint); }
.case-line { font-family: var(--font-head); font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
.case-sub, .case-what { font-size: 16px; color: var(--on-dark-soft); }

.case-body { display: grid; gap: var(--s4); align-content: center; }
.case-body h3 { font-size: 20px; }
.case-body figure { display: grid; gap: var(--s6); margin-top: var(--s4); padding-top: var(--s8); border-top: 1px solid var(--rule-on-dark); }
.case-body blockquote { font-family: var(--font-head); font-size: clamp(24px, 2.6vw, 32px); font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; }
.case .who { color: var(--on-dark-soft); }
.proof-grid { display: grid; gap: var(--s4); margin-top: var(--s4); }
.quote { justify-content: space-between; gap: var(--s8); padding: var(--s8); }
.quote blockquote { font-family: var(--font-head); font-size: clamp(22px, 2.2vw, 28px); font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; }
.reviews { gap: var(--s4); padding: var(--s8); }
.reviews a { display: block; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; transition: border-color 150ms ease; }
.reviews a:hover { border-color: var(--green); }

/* One campaign as a graph: three totals, then the replies split in two. Marks are thin, with a 2px gap; text stays ink. */
.campaign { grid-column: 1 / -1; gap: var(--s8); padding: var(--s8); }
.campaign-head { display: grid; gap: var(--s6); align-content: center; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
.stat { display: grid; gap: var(--s1); align-content: start; padding: var(--s4) var(--s3); background: var(--tint); border-radius: var(--radius-sm); }
.stat strong { font-family: var(--font-head); font-size: clamp(24px, 3vw, 40px); font-weight: 600; line-height: 1; letter-spacing: -0.02em; }
.stat span { font-size: 14px; line-height: 1.3; color: var(--ink-soft); }
.campaign-plot { display: grid; gap: var(--s3); align-content: center; min-width: 0; }
.splitbar { display: flex; gap: 2px; height: 28px; }
.seg { min-width: var(--s1); border-radius: var(--s1); }
.seg-a, .key-a { background: var(--series-a); }
.seg-b, .key-b { background: var(--series-b); }
.legend { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6); margin: 0; padding: 0; list-style: none; font-size: 15px; line-height: 1.4; }
.legend li { display: flex; align-items: center; gap: var(--s2); }
.key { width: 10px; height: 10px; flex: none; border-radius: 2px; }
.shot-label { margin-top: var(--s4); font-size: 14px; color: var(--ink-soft); }
.shot-link { display: block; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; transition: border-color 150ms ease; }
.shot-link:hover { border-color: var(--green); }

/* Why now: the text beside a year drawn two ways (an illustration; its caption says so) */
.why-grid { display: grid; gap: var(--s10); align-items: center; }
.why-text { display: grid; gap: var(--s5); justify-items: start; }
.yr { display: grid; gap: var(--s8); }
.yr-row { display: grid; gap: var(--s3); }
.yr-name strong { display: block; font-size: 16px; font-weight: 600; line-height: 1.4; }
.yr-name span { font-size: 14px; line-height: 1.4; color: var(--ink-soft); }
.yr-track { position: relative; height: 32px; border-bottom: 1px solid var(--line-strong); }
.yr-track i { position: absolute; bottom: var(--s2); width: 12px; height: 12px; border-radius: 50%; background: var(--ink); transform: translateX(-50%); }
.yr-row:first-child .yr-track { height: 52px; }
/* the label rides above the bracket, so it never runs into the dots on a narrow screen */
.yr-gap { position: absolute; bottom: var(--s1); display: flex; flex-direction: column; align-items: center; justify-content: space-between; height: 44px; font-size: 13px; line-height: 1.2; color: var(--ink-soft); white-space: nowrap; }
.yr-gap::after { content: ""; width: 100%; height: 20px; border: 1px dashed var(--line-strong); border-radius: var(--s1); }
.yr-run b { position: absolute; left: 4%; right: 0; bottom: var(--s2); height: 12px; background: repeating-linear-gradient(90deg, var(--series-a) 0 3px, transparent 3px 9px); }

/* The workflow strip: one lead from the first sign to the booked call */
.pipe-wrap { display: grid; gap: var(--s8); overflow: hidden; margin-bottom: var(--s5); padding: var(--s8) var(--s6); background: var(--dark); color: var(--on-dark); border-radius: var(--radius-lg); }
.pipe-label { font-size: 15px; font-weight: 500; color: var(--on-dark-soft); }
.pipe { position: relative; display: grid; gap: var(--s6); margin: 0; padding: 0; list-style: none; }
.pipe li { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: var(--s4); align-items: start; align-content: start; }
.pipe-ico { position: relative; z-index: 1; grid-row: span 2; display: grid; place-items: center; width: 48px; height: 48px; background: var(--dark); border: 1px solid var(--mint-line); border-radius: var(--radius); color: var(--mint); }
.pipe strong { font-family: var(--font-head); font-size: 18px; font-weight: 600; line-height: 1.3; }
.pipe p { font-size: 15px; line-height: 1.5; color: var(--on-dark-soft); }
.pipe::before { content: ""; position: absolute; top: 24px; bottom: 24px; left: 23px; width: 2px; background: var(--rule-on-dark); }
.pipe::after { content: ""; position: absolute; z-index: 2; top: 19px; bottom: 29px; left: 19px; width: 10px; background: radial-gradient(circle at 5px 5px, var(--mint) 4.5px, transparent 5px) no-repeat; opacity: 0; pointer-events: none; }

/* Wall of wins: screenshots in their original form, each at its own height. Two columns at most: they are images of
   text, and a third column would make the words too small to read. */
.wall { columns: 1; column-gap: var(--s4); max-width: 960px; margin: 0 auto; padding: 0; list-style: none; }
.wall li { break-inside: avoid; margin-bottom: var(--s4); }
.wall a { display: block; padding: var(--s4); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); transition: border-color 150ms ease; }
.wall a:hover { border-color: var(--green); }
.wall img { margin-inline: auto; }

/* How: alternating rows, the text on one side and a real piece of the work on the other */
.how-rows { display: grid; gap: var(--s5); }
.how-row { display: grid; gap: var(--s8); align-items: center; padding: var(--s6); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.how-row .panel { background: var(--tint); border: 0; box-shadow: none; }
.how-row .chip { background: var(--card); }
.how-text { display: grid; gap: var(--s4); align-content: start; justify-items: start; }
.how-text h3 { font-size: clamp(24px, 2.4vw, 30px); line-height: 1.2; letter-spacing: -0.015em; }
.how-text .body { color: var(--ink-soft); }
.visual { display: grid; gap: var(--s3); }
.visual figcaption { font-size: 14px; color: var(--ink-soft); }
.panel { padding: var(--s6); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.panel-label { margin-bottom: var(--s4); font-size: 14px; font-weight: 600; color: var(--green); }
.signals { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.5; }
.signals th, .signals td { padding: var(--s3) 0; text-align: left; vertical-align: top; border-top: 1px solid var(--line); }
.signals tr:first-child th, .signals tr:first-child td { border-top: 0; }
.signals th { width: 55%; padding-right: var(--s6); font-weight: 600; }
.signals td { color: var(--ink-soft); }
.mail-subject { margin-bottom: var(--s4); padding-bottom: var(--s4); border-bottom: 1px solid var(--line); font-size: 16px; font-weight: 600; }
.mail-subject span { margin-right: var(--s2); font-weight: 400; color: var(--ink-soft); }
.mail-body { display: grid; gap: var(--s3); font-size: 16px; line-height: 1.6; }
.chip { padding: 0 var(--s1); border-radius: var(--s1); background: var(--tint); color: var(--green-deep); font-weight: 600; }
.timeline { display: grid; gap: var(--s4); margin: 0; padding: 0; list-style: none; }
.timeline li { display: grid; gap: var(--s1); align-content: start; padding-left: var(--s4); border-left: 2px solid var(--series-a); }
.ramp { display: block; height: var(--s2); margin-bottom: var(--s1); }
.ramp b { display: block; width: calc(var(--v) * 100%); min-width: var(--s1); height: 100%; background: var(--series-a); border-radius: var(--s1); transform-origin: left bottom; }
.day { font-family: var(--font-head); font-size: 20px; font-weight: 600; color: var(--green); }
.timeline p { font-size: 15px; line-height: 1.5; color: var(--ink-soft); }
.own { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin: 0; font-size: 16px; line-height: 1.5; }
.own dt, .own dd { margin: 0; padding: var(--s3) 0; border-top: 1px solid var(--line); }
.own dt { padding-right: var(--s4); font-weight: 600; }
.own dd { color: var(--ink-soft); }
.own dt:first-of-type, .own dd:first-of-type { border-top: 0; }

/* What you get */
.get-card { display: grid; overflow: hidden; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.get-left { display: grid; gap: var(--s6); align-content: center; justify-items: start; padding: var(--s10) var(--s6); }
.get-right { display: grid; gap: var(--s6); align-content: center; padding: var(--s10) var(--s6); background: var(--tint); }
.get-right h3 { font-size: 20px; }
.ticks { display: grid; gap: var(--s4); margin: 0; padding: 0; list-style: none; font-size: 16px; line-height: 1.5; }
.ticks li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--s3); align-items: start; }
.tick { width: 24px; height: 24px; padding: var(--s1); border-radius: 50%; background: var(--card); color: var(--green); }

/* Note and FAQ */
.split { display: grid; gap: var(--s8); }
.letter { display: grid; gap: var(--s6); max-width: 640px; }
.pull { font-family: var(--font-head); font-size: clamp(24px, 2.6vw, 30px); font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; color: var(--green-deep); }
.signoff { display: flex; align-items: center; gap: var(--s5); margin-top: var(--s4); }
.signoff img { width: 96px; height: 96px; border-radius: var(--radius); object-fit: cover; }
.signoff strong { display: block; font-family: var(--font-head); font-size: 20px; font-weight: 600; }
.signoff span { font-size: 15px; color: var(--ink-soft); }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s6);
  padding: var(--s6) 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: ""; flex: none; width: 9px; height: 9px; margin: 0 var(--s1) var(--s1); border-right: 2px solid var(--ink-soft); border-bottom: 2px solid var(--ink-soft); transform: rotate(45deg); transition: transform 150ms ease; }
.faq-list details[open] summary::after { margin-bottom: -4px; transform: rotate(-135deg); }
.faq-list details p { max-width: 620px; padding-bottom: var(--s6); color: var(--ink-soft); }

/* Closing and footer */
.closing-grid { display: grid; gap: var(--s12); align-items: center; }
.closing-text { display: grid; gap: var(--s6); }
.closing-text h2 { font-size: clamp(32px, 4vw, 48px); }
.closing-text p { max-width: 34em; color: var(--on-dark-soft); }
.closing .mail { font-weight: 600; color: var(--mint); }
.closing .mail:hover, .closing .mail:active { color: var(--on-dark); }
.book-card { display: grid; gap: var(--s8); padding: var(--s8); background: var(--ink); border: 1px solid var(--mint-line); border-radius: var(--radius-lg); color: var(--on-dark); }
.book-card .ticks { font-size: 17px; }
.book-card .tick { background: var(--mint-wash); color: var(--mint); }
.site-footer { padding-block: var(--s12) var(--s8); border-top: 1px solid var(--line); font-size: 15px; }
.footer-grid { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--s6) var(--s12); }
.site-footer .wordmark { margin-right: 0; }
.footer-links, .contact { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6); margin: 0; padding: 0; list-style: none; }
.site-footer a { color: var(--ink-soft); text-decoration: none; }
.site-footer a:hover { color: var(--ink); text-decoration: underline; }
.site-footer a.wordmark { color: var(--ink); }
.footer-brand { display: grid; gap: var(--s2); }
.footer-brand .rating { justify-content: flex-start; }
.disclaimer { flex-basis: 100%; max-width: 760px; font-size: 14px; color: var(--ink-soft); }
.legal-row { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6); padding-top: var(--s6); border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-soft); }

/* M&A page: the statement panel and the two side cards carry the section */
.statement { display: grid; align-content: center; min-height: 240px; padding: var(--s8); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.statement p { font-family: var(--font-head); font-size: clamp(20px, 2vw, 24px); font-weight: 500; line-height: 1.4; }
.sides .card { min-height: 240px; justify-content: center; padding: var(--s8); }
.sides .card h3 { font-size: 24px; }
.sides .card > p { font-size: 18px; }

/* Thank-you, 404 and the heads of the privacy and terms pages */
.section.hero-page { display: grid; align-items: center; min-height: 690px; padding-block: var(--s28) var(--s16); }
.center { display: grid; gap: var(--s10); justify-items: center; max-width: 760px; text-align: center; }
.center h1 { font-size: clamp(48px, 7.6vw, 110px); }
.center .lead { font-size: 22px; }
.updated { font-size: 15px; color: var(--ink-soft); }
.goto { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s3) var(--s6); margin: 0; padding: 0; list-style: none; font-size: 18px; }
.steps { display: grid; gap: var(--s4); margin: 0; padding: var(--s8) var(--s8) var(--s8) var(--s12); text-align: left; background: var(--tint); border-radius: var(--radius); }
.legal { max-width: 720px; }
.section.legal-top { min-height: 720px; padding-block: var(--s24); }
.legal-head h1 { font-size: clamp(40px, 5vw, 56px); }
.legal-head .goto { font-size: 16px; }
.legal h2 { margin-top: var(--s12); font-size: clamp(26px, 2.8vw, 40px); line-height: 1.15; letter-spacing: -0.02em; scroll-margin-top: var(--s24); }
.legal h2:first-child { margin-top: 0; }
.legal p { margin-top: var(--s4); color: var(--ink-soft); }
.section.legal-body { padding-top: 0; }

@media (max-width: 359px) {
  .nav-bar .btn { display: none; }
}
@media (max-width: 479px) {
  .nav-bar { gap: var(--s2); }
  .wordmark { font-size: 20px; }
  .nav-bar .btn { padding-inline: var(--s3); }
}
@media (min-width: 600px) {
  .card-grid-3, .card-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .container { padding-inline: var(--s6); }
  .section { padding-block: var(--s20); }
  .btn-lg { width: auto; min-width: 220px; padding-inline: var(--s8); }
  .logo-cells { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .logo-cells li { height: 72px; }
  .wall { columns: 2; }
  .case { padding: var(--s12); }
  .proof-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .timeline { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .timeline li { padding-left: 0; border-left: 0; }
  .ramp { display: flex; align-items: flex-end; height: 96px; margin-bottom: var(--s3); border-bottom: 2px solid var(--series-a); }
  .ramp b { width: min(100%, 96px); height: calc(var(--v) * 100%); min-height: var(--s1); border-radius: var(--s1) var(--s1) 0 0; }
}
@media (min-width: 1024px) {
  .section { padding-block: var(--s28); }
  .section-head { margin-bottom: var(--s16); }
  .nav-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--s8); }
  .wordmark { justify-self: start; margin-right: 0; }
  .nav-bar .btn { justify-self: end; padding-inline: var(--s5); }
  .nav-links { display: flex; }
  .nav-menu { display: none; }
  .hero-center { padding-block: var(--s12); }
  .callout { margin-top: var(--s3); }
  .hero h1 { margin-top: var(--s6); }
  .hero-sub { max-width: 32em; margin-top: var(--s6); font-size: 20px; }
  .btn-lg { margin-top: var(--s8); }
  .card-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
  .card { padding: var(--s8); }
  .how-row { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s16); padding: var(--s12); }
  .how-row.wide { grid-template-columns: minmax(0, 1fr); gap: var(--s8); }
  .how-row.wide .how-text { max-width: 720px; }
  .campaign { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s12); padding: var(--s10); }
  .why-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s20); }
  .pipe-wrap { padding: var(--s12); }
  .pipe { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .pipe li { grid-template-columns: minmax(0, 1fr); row-gap: var(--s3); padding-right: var(--s4); }
  .pipe-ico { grid-row: auto; }
  .pipe::before { top: 23px; right: calc((100% - 96px) / 5 - 24px); bottom: auto; left: 24px; width: auto; height: 2px; }
  .pipe::after { right: calc((100% - 96px) / 5 - 19px); bottom: auto; width: auto; height: 10px; }
  .panel { padding: var(--s8); }
  .case { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s16); padding: var(--s20) var(--s16); }
  .case-body figure { margin-top: var(--s6); }
  .proof-grid { gap: var(--s5); margin-top: var(--s5); }
  .quote, .reviews { padding: var(--s10); }
  .get-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .get-left, .get-right { padding: var(--s16); }
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s16); }
  .closing-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s16); }
  .site-footer { padding-block: var(--s16) var(--s12); }
}

@media (min-width: 1320px) {
  main { max-width: var(--frame); margin-inline: auto; border-inline: 1px solid var(--line); }
}

/* Motion. Text is never faded: a block slides into place and only chart marks animate in, once motion.js has set .js
   and the reader allows motion. The pulse on the workflow line is the one loop. */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { transform: translateY(24px); transition: transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1); }
  .js .reveal.in { transform: none; }
  .js .reveal .seg, .js .reveal .ramp b { transform: scale(0); transform-origin: left bottom; transition: transform 900ms cubic-bezier(0.2, 0.7, 0.2, 1) 250ms; }
  .js .reveal.in .seg, .js .reveal.in .ramp b { transform: none; }
  .js .reveal .yr-track i { opacity: 0; transition: opacity 300ms ease; transition-delay: calc(400ms + var(--i) * 90ms); }
  .js .reveal.in .yr-track i { opacity: 1; }
  .js .reveal .yr-run b { clip-path: inset(0 100% 0 0); transition: clip-path 1400ms ease 500ms; }
  .js .reveal.in .yr-run b { clip-path: inset(0); }
  .js .pipe-wrap.in .pipe::after { animation: pipe-y 6s linear 800ms infinite; }
  .js .pipe-wrap.in .pipe-ico { animation: pipe-lit 6s linear infinite; animation-delay: calc(650ms + var(--i) * 1.5s); }
}
@keyframes pipe-y { 0% { transform: translateY(0); opacity: 0; } 4%, 96% { opacity: 1; } 100% { transform: translateY(100%); opacity: 0; } }
@keyframes pipe-x { 0% { transform: translateX(0); opacity: 0; } 4%, 96% { opacity: 1; } 100% { transform: translateX(100%); opacity: 0; } }
@keyframes pipe-lit { 0%, 12%, 100% { background: var(--dark); color: var(--mint); } 3%, 8% { background: var(--mint); color: var(--ink); } }
@media (prefers-reduced-motion: no-preference) and (min-width: 1024px) {
  .js .pipe-wrap.in .pipe::after { animation-name: pipe-x; }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, a, a.card, .wall a, .reviews a, .shot-link, .faq-list summary::after { transition: none; }
  a.card:hover, .btn:active { transform: none; }
}