/* ==========================================================================
   Orgscale — landing page
   Layout is authored against a 1440px reference width; the decorative
   stages are fixed-width centred boxes so the scattered art keeps its
   exact relationship to the copy, then collapse away on small screens.
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------- */

/* Static per-weight files, not a variable font: interpolating a variable
   Manrope to 400 renders visibly heavier than the static 400 master. */
@font-face {
  font-family: "Manrope";
  src: url("../assets/fonts/manrope-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../assets/fonts/manrope-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../assets/fonts/manrope-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lora";
  src: url("../assets/fonts/lora-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --- Tokens --------------------------------------------------------------- */

:root {
  --ink: #13161d;
  --black: #000;
  --white: #fff;
  --tan: #ac9173;                    /* the serif accent colour */
  --purple: #b693ff;
  --grey-050: #f7f7f7;
  --grey-400: #a0a0a0;
  --grey-500: #6d6d6d;

  --good: #49ae5f;
  --good-to: #7de794;
  --bad: #c23f3d;
  --bad-to: #ff9488;
  --warn: #c6950f;
  --warn-to: #ffbe5e;
  --meta: #535357;

  --serif: "Lora", "Times New Roman", serif;
  --sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Type scale, kept at the source's computed values */
  --fs-nav: 14.08px;
  --fs-body: 18.08px;
  --lh-body: 23.504px;
  --fs-h1: 72px;
  --fs-h2: 48px;
  --fs-verdict: 40px;

  --shell: 1200px;                   /* nav + copy column */
  --panel: 1360px;                   /* full-bleed dark panels */
  --radius-panel: 40px;
  --radius-btn: 8px;

  --ease: cubic-bezier(0.44, 0, 0.56, 1);
}

/* --- Reset / base -------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
ul { margin: 0; padding: 0; list-style: none; }
p, h1, h2 { margin: 0; }
a { color: inherit; text-decoration: none; }

.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus {
  left: 16px; top: 16px; z-index: 100;
  padding: 10px 16px; border-radius: var(--radius-btn);
  background: var(--ink); color: var(--white);
}

:where(a, button):focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 3px;
}

/* --- Shared type --------------------------------------------------------- */

.h2 {
  max-width: 670px;
  font-family: var(--serif);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -1.584px;
}
.h2--onDark { color: var(--white); }

.accent { color: var(--tan); }

.kicker {
  width: 100%;
  max-width: 670px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
}

.lede {
  max-width: 670px;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.lede--narrow { max-width: 464px; }

.pill p { margin: 0; }
.pill {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 24px;
  font-size: var(--fs-nav);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.2816px;
}
.pill--onDark {
  color: var(--grey-050);
  background: rgba(255, 255, 255, 0.08);
}

/* --- Buttons + the two-copy hover swap ---------------------------------- */

.btn {
  --swap-h: 23px;
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  border-radius: var(--radius-btn);
  font-size: var(--fs-body);
  line-height: 23px;
  white-space: nowrap;
}
.btn--dark  { background: var(--ink);   color: var(--white); }
.btn--light { background: var(--white); color: var(--black); }

/* The source ships every label twice and slides the pair on hover.
   The track is clipped to exactly one line (--swap-h) so only the first
   copy shows; on hover both copies shift up by their own height. */
.swap__inner {
  display: block;
  height: var(--swap-h);
  overflow: hidden;
}
.swap__inner > span {
  display: block;
  transition: transform 0.32s var(--ease);
}
.swap:hover .swap__inner > span,
.swap:focus-visible .swap__inner > span { transform: translateY(-100%); }

/* --- Header / nav ------------------------------------------------------- */

/* Pinned bar. Once the page scrolls it contracts around its contents —
   1200px wide at the top, 626px once scrolled — staying at y24 throughout,
   and picks up a deeper shadow. The wrapper stays click-through so it does
   not swallow presses on the hero behind it. */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  display: flex;
  justify-content: center;
  padding: 24px 16px;
  pointer-events: none;
}
.site-header > * { pointer-events: auto; }

.nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--shell);
  padding: 12px;
  border-radius: 12px;
  background: var(--white);
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.07);
  /* The original animates this with a spring rather than a CSS transition,
     and it settles fast. A short back-out curve gives the same snap. */
  transition: max-width 0.26s cubic-bezier(0.34, 1.45, 0.64, 1),
              box-shadow 0.26s ease-out;
}
.is-compact .nav {
  max-width: 626px;
  box-shadow: 0 1px 30px rgba(0, 0, 0, 0.12);
}

.nav__logo { display: flex; align-items: center; }
.nav__logo img { width: 118px; height: 25px; }

.nav__links {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 24px;
}
.nav__link {
  --swap-h: 16.896px;
  display: block;
  font-size: var(--fs-nav);
  font-weight: 600;
  line-height: 16.896px;
  letter-spacing: -0.2816px;
}

/* --- Hero -------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 743px;
  padding: 186px 20px 0;
  overflow: hidden;
}

.hero__lines {
  position: absolute;
  top: -133px;
  left: 50%;
  width: 1486px;
  height: 1112px;
  margin-left: -743px;
  background: url("../assets/svg/hero-lines.svg") center / contain no-repeat;
  opacity: 0.75;
  pointer-events: none;
}

/* Fixed-width centred stage: keeps the scattered art exactly where the
   design puts it relative to the headline, at any viewport width. */
.hero__decor {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1440px;
  height: 743px;
  margin-left: -720px;
  pointer-events: none;
}
.hero__art { position: absolute; }
.hero__art--a { left: 59px;   top: 153px; width: 286px; }
.hero__art--b { left: 15px;   top: 326px; width: 200px; }
.hero__art--c { left: 179px;  top: 474px; width: 102px; }
.hero__art--d { left: 920px;  top: 583px; width: 263px; }
.hero__art--e { left: 1298px; top: 463px; width: 197px; }
.hero__art--f { left: 1168px; top: 316px; width: 313px; }

.hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  text-align: center;
}

.pill-ai {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 12px 4px 4px;
  border-radius: 44px;
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 0 0 0 1px rgba(19, 22, 29, 0.06);
  font-size: var(--fs-nav);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.2816px;
  color: var(--black);
}
.pill-ai__tag {
  padding: 4px 11px 5px 10px;
  border-radius: 24px;
  background: linear-gradient(rgb(221, 129, 255), rgb(134, 91, 225));
  color: var(--white);
}

.hero__title {
  max-width: 720px;
  margin-top: 24px;
  font-family: var(--serif);
  font-size: var(--fs-h1);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -2.376px;
}

.hero__lede {
  max-width: 720px;
  margin-top: 20px;
}

.hero__inner .btn { margin-top: 56px; }

/* --- Score badges (hero + diagram) ------------------------------------- */

.score {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 3px 20px 3px 3px;
  border-radius: 850px;
  background: var(--white);
  box-shadow: 15px 15px 20px -5px rgba(13, 19, 34, 0.05);
  white-space: nowrap;
}
.score--hero-a,
.score--hero-b { position: absolute; }
.score--hero-a { left: 1046px; top: 136px; }
.score--hero-b { left: 317px;  top: 602px; }

.score__dial {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 60px;
  height: 60px;
  border-radius: 64px;
  background: linear-gradient(var(--good), var(--good-to));
}
/* Progress ring. The arc length encodes the score itself — a full circle is
   100 — so the dash is derived from --pct rather than baked into fixed art.
   r=24.5 in a 53-unit box gives a circumference of 153.94. */
.ring {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 88.4%;                      /* 53 of the 60px dial */
  height: 88.4%;
  overflow: visible;
  transform: rotate(-90deg);         /* start the sweep at 12 o'clock */
}
.ring circle {
  fill: none;
  stroke-width: 4;
}
.ring__track { stroke: rgba(255, 255, 255, 0.25); }
.ring__arc {
  stroke: rgba(255, 255, 255, 0.95);
  stroke-linecap: round;
  stroke-dasharray: calc(var(--pct) * 1.5394) 153.94;
}
.score__dial--bad  { background: linear-gradient(var(--bad),  var(--bad-to)); }
.score__dial--warn { background: linear-gradient(var(--warn), var(--warn-to)); }

.score__num {
  position: relative;
  z-index: 1;
  font-size: 20px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: -0.4px;
  color: var(--white);
}

.score__body { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.score__label {
  font-size: 17.5px;
  font-weight: 600;
  line-height: 21px;
  letter-spacing: -0.35px;
  color: var(--ink);
}
.score__meta {
  display: flex;
  gap: 4px;
  font-size: 15px;
  font-weight: 600;
  line-height: 18px;
  letter-spacing: -0.3px;
  color: var(--meta);
}
.score__meta .is-good { color: var(--good); font-weight: 600; }
.score__meta .is-bad  { color: var(--bad);  font-weight: 600; }
.score__meta .is-settled { color: #3ca353; font-weight: 600; }

/* Smaller variant used inside the diagram */
.score--sm {
  position: absolute;
  gap: 8px;
  padding: 2px 14px 2px 2px;
  border-radius: 816px;
  box-shadow: 14.4px 14.4px 16px -4.8px rgba(13, 19, 34, 0.05);
}
.score--sm .score__dial { width: 41px; height: 41px; border-radius: 61px; }
.score--sm .score--sm .score__num   { font-size: 13.3px; line-height: 16px;   letter-spacing: -0.27px; }
.score--sm .score__label { font-size: 11.9px; line-height: 14.3px; letter-spacing: -0.24px; }
.score--sm .score__meta  { font-size: 9.8px;  line-height: 11.8px; letter-spacing: -0.2px;  }

/* --- Panels ------------------------------------------------------------ */

.panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: var(--panel);
  margin: 0 auto;
  padding: 80px;
  border-radius: var(--radius-panel);
  overflow: hidden;
  text-align: left;
}
.panel--centred {
  align-items: center;
  text-align: center;
}
.panel--dark {
  background:
    radial-gradient(103% 100% at 50% 28.4%,
      rgb(0, 0, 0) 58.4248%,
      rgb(180, 145, 253) 89%,
      rgb(255, 255, 255) 91.6362%);
}
.panel--flush {
  padding-bottom: 0;
  border-radius: var(--radius-panel) var(--radius-panel) 0 0;
  background:
    radial-gradient(103% 100% at 46.7% 71%,
      rgb(0, 0, 0) 58.4248%,
      rgb(180, 145, 253) 89%,
      rgb(255, 255, 255) 91.6362%);
}

/* --- Problem ----------------------------------------------------------- */

.problem { padding: 42px 40px 80px; }

.problem__glow {
  position: absolute;
  left: 50%;
  top: 479px;
  width: 2847px;
  max-width: none;
  margin-left: -1423px;
  pointer-events: none;
}

.problem .pill { position: relative; z-index: 2; }
.problem .h2   { position: relative; z-index: 2; max-width: 610px; margin-top: 24px; }

.problem__ask {
  position: relative;
  z-index: 2;
  width: 100%;
  margin-top: 48px;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--grey-050);
}

.cards {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 291px);
  gap: 12px;
  margin-top: 24px;
}
.card {
  display: flex;
  flex-direction: column;
  /* Fixed height with the copy pinned to the bottom: the third card runs to
     three lines and must not make the row taller, exactly as in the source. */
  height: 304px;
  border-radius: 12px;
  background: var(--black);
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.1);
  overflow: hidden;
  text-align: left;
}
.card img { width: 100%; height: auto; }
.card p {
  margin: 0 20px 20px;
  margin-top: auto;
  color: var(--grey-050);
}

.problem .btn--light {
  position: relative;
  z-index: 2;
  margin-top: 24px;
}

/* The light "misalignment" verdict slab */
.verdict {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: var(--panel);
  margin: 10px auto 0;
  padding: 40px;
  border-radius: var(--radius-panel);
  background: linear-gradient(0deg, rgb(247, 247, 247), rgb(236, 228, 255));
  text-align: center;
}
.verdict__kicker {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.32px;
  color: var(--black);
}
.verdict__line {
  font-family: var(--serif);
  font-size: var(--fs-verdict);
  line-height: 44px;
  letter-spacing: -0.8px;
}
.verdict__line--last {
  display: flex;
  align-items: center;
  gap: 8px;
}
.verdict__chip > span { display: block; line-height: 44px; }
.verdict__chip {
  padding: 12px;
  border-radius: 12px;
  background: linear-gradient(rgba(172, 145, 115, 0.1), rgba(255, 255, 255, 0.1));
}

/* --- Graphic stages ----------------------------------------------------- */

/* Both decorative stages are authored at the size they hold *before* their
   entrance animation, then scale up about their centre to the resting size
   the design settles on — 1/0.7, measured against production. Scaling the
   whole layer carries the type and the badge art with it, so no dimension
   has to be restated at two sizes. */
.stage-zoom {
  position: absolute;
  inset: 0;
  transform: scale(1);
  transform-origin: center center;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .stage-zoom { transform: scale(1.4286) !important; }
}

/* --- Alignment diagram ------------------------------------------------- */

.diagram {
  display: flex;
  justify-content: center;
  padding: 42px 20px 0;
}
.diagram__stage {
  position: relative;
  width: 1200px;
  height: 490px;
  flex: none;
}
.diagram__wire { position: absolute; max-width: none; }
.diagram__wire--1 { left: 182px; top: 48px;  width: 419px; height: 395px; }
.diagram__wire--2 { left: 233px; top: 75px;  width: 368px; height: 344px; }
.diagram__wire--3 { left: 182px; top: 54px;  width: 837px; height: 196px; }
.diagram__wire--4 { left: 182px; top: 150px; width: 837px; height: 99px;  }
.diagram__wire--5 { left: 182px; top: 247px; width: 837px; height: 196px; }
.diagram__wire--6 { left: 182px; top: 247px; width: 837px; height: 99px;  }
.diagram__wire--7 { left: 182px; top: 247px; width: 837px; height: 4px;   }

/* The purple beam that sweeps the scores from red to green */
.beam {
  position: absolute;
  left: 593px;
  top: 163px;
  width: 17px;
  height: 160px;
  border-radius: 120%;
  background: linear-gradient(
    rgba(182, 147, 255, 0.15),
    rgb(138, 82, 255) 29.3269%,
    rgb(138, 83, 255) 70.6731%,
    rgba(182, 147, 255, 0.15));
  filter: blur(0.5px);
}


.dot > span { position: relative; z-index: 1; }
.ring { z-index: 0; }
.dot {
  position: absolute;
  display: grid;
  place-items: center;
  width: 41px;
  height: 41px;
  border-radius: 61px;
  font-size: 13.3px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: -0.27px;
  color: var(--white);
}
.dot--31 { left: 343px; top: 175px; background: linear-gradient(var(--bad),  var(--bad-to)); }
.dot--41 { left: 326px; top: 281px; background: linear-gradient(var(--warn), var(--warn-to)); }
.dot--91 {
  left: 893px; top: 229px;
  background: linear-gradient(var(--good), var(--good-to));
  box-shadow: 0 4.8px 60px 24px rgba(73, 175, 95, 0.15);
}

.score--d-goals  { left: 503px; top: 224px; }
.score--d-lead   { left: 735px; top: 148px; }
.score--d-client { left: 688px; top: 276px; }

.spark {
  position: absolute;
  background: url("../assets/svg/sparkle-md.svg") center / contain no-repeat;
}
.spark--1 { left: 607px; top: 163px; width: 14px; height: 13px; }
.spark--2 { left: 616px; top: 288px; width: 12px; height: 11px; }
.spark--3 { left: 581px; top: 316px; width: 17px; height: 16px; }
.spark--4 { left: 581px; top: 196px; width: 8px;  height: 7px;  }

/* --- Generic centred copy stack ---------------------------------------- */

.stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 32px 20px 0;
  text-align: center;
}
.stack .h2    { margin-top: 16px; }
.stack .lede  { margin-top: 24px; }
.stack .btn   { margin-top: 47px; }
.stack--solo  { padding-bottom: 120px; }

/* --- Report ------------------------------------------------------------ */

.report { padding-top: 42px; }
.report .h2 { max-width: 580px; }

/* The report copy sits tighter than the standalone solution block. */
.report .stack        { padding-bottom: 60px; }
.report .stack .lede  { margin-top: 16px; }
.report .stack .btn   { margin-top: 32px; }

.report__stage {
  position: relative;
  width: 1200px;
  height: 460px;
  margin: 0 auto;
  flex: none;
}
.report__rail {
  position: absolute;
  left: 70px; top: 126px;
  width: 1086px; height: 115px; max-width: none;
}
.report__fade {
  position: absolute;
  top: 63px;
  width: 161px;
  height: 321px;
}
.report__fade--l {
  left: 199px;
  background: linear-gradient(90deg, rgb(255, 255, 255), rgba(255, 255, 255, 0));
}
.report__fade--r {
  left: 840px;
  background: linear-gradient(270deg, rgb(255, 255, 255), rgba(255, 255, 255, 0));
}

.report__plate {
  position: absolute;
  border-radius: 16px;
  background: linear-gradient(179.232deg, rgb(236, 228, 255), rgb(247, 247, 247));
  box-shadow: 0 5.2px 24px rgba(0, 0, 0, 0.1);
}
.report__plate--back { left: 487px; top: 285px; width: 228px; height: 80px; }
.report__plate--mid  { left: 469px; top: 261px; width: 264px; height: 93px; }

.report__card {
  position: absolute;
  left: 443px; top: 163px;
  width: 300px; height: 180px;
  padding: 14px;
  border-radius: 21px;
  overflow: hidden;
  box-shadow: 0 5.2px 24px rgba(0, 0, 0, 0.05);
  background:
    radial-gradient(144.853% 144.853% at 50% 105.987%,
      rgb(0, 0, 0) 65%, rgb(180, 145, 253), rgb(255, 255, 255) 85%);
}
.report__arcs {
  position: absolute;
  left: 139px; top: -3px;
  width: 192px; height: 183px; max-width: none;
}
.report__org {
  position: absolute;
  left: 15px; bottom: 34px;
  font-family: var(--serif);
  font-size: 8.4px;
  line-height: 10.1px;
  letter-spacing: -0.17px;
  color: #a8a8a8;
}
.report__name {
  position: absolute;
  left: 14px; bottom: 16px;
  font-family: var(--serif);
  font-size: 14px;
  line-height: 16.8px;
  letter-spacing: -0.28px;
  color: var(--white);
}

.report__icon { position: absolute; width: 46px; height: 46px; }
.report__icon--bars {
  left: 367px; top: 257px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  padding-bottom: 9px;
  border-radius: 13px;
  overflow: hidden;
  opacity: 0.8;
}
.report__icon--bars img { position: absolute; inset: 0; border-radius: 13px; }
.report__icon--bars i {
  position: relative;
  width: 6px;
  height: var(--h);
  border-radius: 3px;
  background: rgb(235, 230, 230);
}
.report__icon--a { left: 760px; top: 258px; }
.report__icon--b { left: 787px; top: 315px; }
.report__icon--c { left: 390px; top: 314px; }

/* --- Closing CTA + footer ---------------------------------------------- */

.cta { padding: 42px 40px 0; }

.cta .h2 { max-width: 610px; }
.cta__lede {
  max-width: 610px;
  margin-top: 24px;
  color: var(--grey-050);
}
.cta .btn { margin-top: 24px; }

.cta__radar {
  width: 1200px;
  max-width: 100%;
  height: auto;
  margin-top: 48px;
}

.footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 29px;
  max-width: var(--panel);
  margin: 0 auto;
  padding: 20px 12px;
  background: var(--black);
  font-size: var(--fs-nav);
  font-weight: 600;
  line-height: 16.896px;
  letter-spacing: -0.2816px;
  color: var(--grey-050);
}
.footer b { color: var(--white); font-weight: 600; }
.footer__c { color: var(--grey-050); }
.footer a:hover { color: var(--white); }

/* --- Scroll reveal ----------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

/* Nothing should stay hidden if the observer never runs. */
.no-js .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .swap__inner { transition: none; }
}

/* --- Breakpoints ------------------------------------------------------- */

/* Framer's mid tier: 810–1439 */
@media (max-width: 1439px) {
  /* The decorative stages keep their 1440px internal geometry and are
     scaled down. transform does not shrink layout width, so each one needs
     a clipping parent or the page gains a horizontal scrollbar. */
  .hero__decor { transform: scale(0.86); transform-origin: top center; }

  .diagram,
  .report { overflow: hidden; }

  .diagram__stage,
  .report__stage { transform: scale(0.82); transform-origin: top center; }

  .diagram { height: 430px; }
  .report__stage { height: 400px; }

  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 620px; }
}

@media (max-width: 1100px) {
  :root { --fs-h1: 56px; --fs-h2: 40px; --fs-verdict: 32px; }
  .panel { padding: 56px 40px; }
  .problem, .cta { padding-left: 20px; padding-right: 20px; }
}

/* Framer's small tier: ≤809 */
@media (max-width: 809px) {
  :root {
    --fs-h1: 42.4px;
    --fs-h2: 32px;
    --fs-verdict: 26px;
    --radius-panel: 24px;
  }

  .site-header { padding: 12px; }
  .is-compact .nav { max-width: var(--shell); box-shadow: 0 0 12px rgba(0, 0, 0, 0.07); }
  .nav { padding: 8px 8px 8px 12px; }
  .nav__links { display: none; }

  .hero { min-height: 0; padding: 120px 20px 60px; }
  .hero__decor { display: none; }
  .hero__lines { opacity: 0.4; }
  .hero__title { letter-spacing: -1px; }
  .hero__inner .btn { margin-top: 32px; }

  .problem, .cta { padding: 20px 12px 0; }
  .panel { padding: 40px 20px; }
  .problem__glow { top: 60%; }

  .cards { grid-template-columns: minmax(0, 1fr); max-width: 340px; margin-top: 32px; }
  .card { height: auto; }

  .verdict { margin-top: 8px; padding: 28px 20px; }
  .verdict__line--last { flex-direction: column; gap: 4px; }

  /* The design keeps both decorative stages on small screens, clipped to a
     shorter band rather than dropped — 282px for the diagram, 115px for the
     report, measured against production at 390px. */
  .diagram {
    height: 282px;
    padding: 0;
    overflow: hidden;
  }
  .diagram__stage {
    transform: scale(0.575);
    transform-origin: center center;
  }
  .report { padding-top: 20px; }
  .report__stage {
    height: 115px;
    transform: scale(0.25);
    transform-origin: center top;
    overflow: hidden;
  }

  .stack { padding: 48px 20px 0; }
  .cta__radar { margin-top: 32px; }

  .footer { flex-direction: column; gap: 8px; text-align: center; }
}


/* --- Legal pages -------------------------------------------------------- */

.page-legal { background: var(--white); }

.legal {
  max-width: 720px;
  margin: 0 auto;
  padding: 200px 20px 120px;
}
.legal__title {
  margin: 0;
  font-family: var(--serif);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -1.584px;
}
.legal__meta {
  margin-top: 12px;
  font-size: 16px;
  font-weight: 600;
  color: var(--grey-500);
}
.legal__lede { margin-top: 32px; }
.legal h2 {
  margin-top: 48px;
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -0.5px;
}
.legal p { margin-top: 16px; }
.legal__link { color: var(--tan); text-decoration: underline; text-underline-offset: 3px; }

.footer__links a:hover { color: var(--white); }

@media (max-width: 809px) {
  .legal { padding: 140px 20px 80px; }
}