/* MIT Technology Review Insights report landing page (atlan.com/resources/mit-report-ai-business-value/).
   Ported from the approved prototype (adhoc-analysis/creative/mit-tr-landing-page/version-l.html in the marketing repo);
   class names the site also styles carry an mr- prefix. */
/* ---- atlan.com's global stylesheet, undone for this page: these zero-specificity rules beat the site's layered
   resets (unlayered wins over any layer) and lose to every rule below ---- */
/* the barrel sets Inter on every div/p/span and optimizeLegibility on everything; here they inherit, as in a browser */
:where(#main-content) :where(div, p, span) {
  font-family: inherit;
}
:where(#main-content, #main-content *) {
  text-rendering: auto;
}
/* Tailwind's preflight zeroes margins, paddings and borders, blocks and shrinks images and svgs, and makes form controls
   inherit their font; the browser's own defaults come back (SVG content keeps its presentation attributes) */
:where(#main-content) :where(*:not(svg, svg *)) {
  margin: revert;
  padding: revert;
  border: revert;
}
:where(#main-content) :where(img, svg, video, canvas) {
  display: revert;
  vertical-align: revert;
  max-width: revert;
}
:where(#main-content) :where(button, input, select, textarea) {
  font: revert;
  color: revert;
  letter-spacing: revert;
  background-color: revert;
  border-radius: revert;
  opacity: revert;
  appearance: revert;
}
:where(#main-content) :where(input, textarea)::placeholder {
  color: revert;
  opacity: revert;
}
:where(#main-content) :where(a) {
  text-decoration: revert;
}
/* preflight's box model reaches ::before and ::after too, which the prototype's own * rule never did */
:where(#main-content, #main-content *)::before,
:where(#main-content, #main-content *)::after {
  box-sizing: revert;
  margin: revert;
  padding: revert;
  border: revert;
}
/* Geist Mono is not in the site's global FontLoader; the conference page self-hosts it, so this page uses the same
   files (Context26HeroPage.vue declares these two faces). Inter, Funnel Display and Gilroy come from FontLoader. */
@font-face {
  font-family: "Geist Mono";
  src: url("/context26-v2/fonts/GeistMono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/context26-v2/fonts/GeistMono-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
:root {
  --u: min(calc(100vw / 1920), 1px);
  --ink: #252530;
  --slate: #555572;
  --soft: #6b6b82;
  --body: #3b3b4c;
  --grey: #6c6c6c;
  --mute: #989898;
  --line: #eceaf4;
  --tint: #f8f8fd;
  --pink: #fab8c9;
  --peri: #797de4;
  --peri-deep: #5b5fd2;
  --persian: #2026d2;
  --cool: #5f97f6;
  --cool-deep: #2f66c4;
  --warm: #fd8550;
  --red: #bf1b1b;
  --p-blue: #8daef3;
  --p-coral: #f7a695;
  /* the conference page's button, exactly (kit/c26.css, from Context26HeroPage.vue) */
  --cta: var(--c26-2temp);
  --ease-settle: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-move: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-arrive: 600ms;
  --pending: #f5b83d;
  /* the type scale: six sizes for every word on the page (numerals apart), each with a floor for small screens */
  --t-48: max(28px, calc(48 * var(--u)));
  --t-40: max(26px, calc(40 * var(--u)));
  --t-24: max(16px, calc(24 * var(--u)));
  --t-20: max(15px, calc(20 * var(--u)));
  --t-16: max(13px, calc(16 * var(--u)));
  --t-13: max(12px, calc(13 * var(--u)));
  /* the Figma's card stroke: #FAB8C9 (top right) to #D2D4F6 (bottom left) at 49% */
  --edge: linear-gradient(to bottom left, #fddce4, #e9eafb);
}
* {
  box-sizing: border-box;
}
html {
  background: #f9f9fc;
  scrollbar-gutter: stable;
}
body {
  margin: 0;
  overflow-x: clip;
  background: #f9f9fc;
  color: var(--ink);
  font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1,
h2,
h3,
h4 {
  font-family: "Funnel Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--ink);
  margin: 0;
}
h1,
h2 {
  text-wrap: balance;
}
p,
h3,
blockquote,
li {
  text-wrap: pretty;
}
a {
  color: inherit;
}
button {
  font: inherit;
  cursor: pointer;
}
img {
  display: block;
}
.frame {
  position: relative;
  width: calc(1920 * var(--u));
  margin: 0 auto;
}
.mr-container {
  max-width: 1264px;
  margin: 0 auto;
  padding: 0 32px;
}
.kicker {
  margin: 0;
  font: 600 var(--t-13) / 1.6 Inter, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--peri);
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--cool-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Section heads, centred as in the Figma: kicker, then heading */
.shead {
  text-align: center;
}
.shead h2 {
  margin: calc(15 * var(--u)) auto 0;
  max-width: calc(1273 * var(--u));
  font-size: var(--t-48);
  line-height: 1.104;
  font-weight: 600;
  letter-spacing: -.02em;
  color: #000;
}
.shead .sub {
  margin: calc(18 * var(--u)) auto 0;
  max-width: calc(760 * var(--u));
  font-size: var(--t-20);
  line-height: 1.5;
  color: var(--slate);
  text-wrap: pretty;
}

/* The conference CTA: two-temperature fill, pointer-tracked ember, ASCII shimmer, pixel arrow */
@property --ember {
  syntax: "<number>";
  initial-value: 0;
  inherits: false;
}
.mr-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45em;
  height: 56px;
  padding: 0 26px;
  border: 0;
  border-radius: 8px;
  color: #fff;
  background: radial-gradient(
      90px circle at var(--mx, 50%) var(--my, 50%),
      rgba(255, 255, 255, calc(0.26 * var(--ember, 0))) 0%,
      rgba(253, 110, 56, calc(0.42 * var(--ember, 0))) 32%,
      rgba(253, 133, 80, calc(0.14 * var(--ember, 0))) 58%,
      transparent 72%
    ), var(--cta);
  font-family: "Funnel Display", sans-serif;
  font-weight: 700;
  font-size: 17px;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 180ms var(--ease-settle), box-shadow 420ms
    cubic-bezier(0.65, 0, 0.35, 1), --ember 420ms cubic-bezier(0.65, 0, 0.35, 1);
}
.mr-btn:hover {
  --ember: 1;
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(253, 133, 80, 0.26);
}
.mr-btn:active {
  transform: translateY(-1px) scale(0.975);
}
.mr-btn:focus-visible {
  outline: 2px solid var(--cool-deep);
  outline-offset: 3px;
  border-radius: 8px;
}
.mr-btn > * {
  position: relative;
  z-index: 1;
}
.mr-btn .fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.mr-btn .ar {
  width: .7em;
  height: .7em;
  display: inline-block;
  transition: transform .2s;
}
.mr-btn:hover .ar {
  transform: translateX(5px);
}
/* Email row */
.signup {
  display: flex;
  gap: 10px;
  max-width: 540px;
}
.signup input {
  flex: 1;
  min-width: 0;
  height: 56px;
  border: 1px solid #e2e2ea;
  border-radius: 8px;
  padding: 0 16px;
  font: inherit;
  font-size: 16px;
  background: #f7f7fa;
  color: var(--ink);
}
.signup input::placeholder {
  color: #75758c;
}
.signup input:focus {
  outline: none;
  background: #fff;
  border-color: var(--cool-deep);
  box-shadow: 0 0 0 4px rgba(95, 151, 246, 0.18);
}
.signup.err input {
  border-color: var(--red);
}
.msg {
  font-size: var(--t-13);
  color: var(--red);
  margin-top: 8px;
  max-width: 540px;
}
/* round 45: while HubSpot answers, the button stays as designed, a little quieter, and can't be pressed twice */
.signup[aria-busy="true"] .mr-btn {
  opacity: 0.72;
  cursor: progress;
}
.msg:empty {
  display: none;
}
.thanks {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: var(--t-20);
  font-weight: 500;
  max-width: 540px;
  animation: rise .5s var(--ease-settle);
}
.thanks small {
  display: block;
  font-size: var(--t-16);
  font-weight: 400;
  color: var(--slate);
  margin-top: 2px;
}
.tick {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--cta);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* the conference form skin (Context26HeroPage .c26v1-hs): white field, hairline, a lift so it holds on paper */
.skin input {
  border: 1.5px solid #e6e6f0;
  border-radius: 8px;
  background: #fff;
  font-weight: 500;
  letter-spacing: -.2px;
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(37, 37, 48, 0.03), 0 4px 14px
    rgba(37, 37, 48, 0.04);
  transition: border-color 180ms var(--ease-settle), box-shadow 180ms
    var(--ease-settle);
}
.skin input::placeholder {
  color: #9a9ab3;
}
.skin input:focus {
  outline: none;
  background: #fff;
  border-color: #5f97f6;
  box-shadow: 0 0 0 3px rgba(95, 151, 246, 0.18), 0 4px 14px
    rgba(37, 37, 48, 0.04);
}
.skin.err input {
  border-color: #b4232b;
}
.optin {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-top: 4px;
  font-size: 13.5px;
  color: var(--slate);
  cursor: pointer;
  user-select: none;
}
.optin input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border-radius: 5px;
  border: 1.5px solid #bdbfd3;
  background: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.optin input:checked {
  background: var(--persian);
  border-color: var(--persian);
}
.optin input:checked::after {
  content: "";
  width: 9px;
  height: 5px;
  border: 2px solid #fff;
  border-top: 0;
  border-right: 0;
  transform: translateY(-1px) rotate(-45deg);
}
.optin input:focus-visible {
  outline: 2px solid var(--cool-deep);
  outline-offset: 2px;
}

/* ================= 1. HERO: the fan, the lockup, the copy and the report ================= */
/* Saloni's two frames (2026-10-14). Frame one: the book's fan hangs from the top of the screen, opened, its
   pages' feet meeting in a point at the spine, with the lockup below it. The rest: the fan and the lockup rise
   together by 405, so only the feet of the pages show at the top, and the copy, the form and the report (her
   two-copy mockup, Hero-mock.png) come up beneath. No card. The fan is the same ten glass pages, drawn upside
   down (scaleY(-1)) under a flatter camera, so their feet make the frame's silhouette. */
.hero {
  --rise: calc(-405 * var(--u));
  position: relative;
  padding: calc(336 * var(--u)) 0 calc(24 * var(--u));
  overflow-x: clip;
}
/* the rest of the page waits, hidden, while the intro plays, and fades in once it has settled, so nothing below
   the hero shows or moves during it */
.mr-main {
  transition: opacity 600ms ease;
}
.js:not(.intro-done):not(.intro-skip) .mr-main {
  opacity: 0;
}
.hero-band {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: calc(600 * var(--u));
  overflow: hidden;
  pointer-events: none;
  transform: translateY(var(--rise));
  transition: transform 1000ms var(--ease-move);
}
.hero-band .frame {
  height: 100%;
}
/* the book (Banner Fan Reveal): ten glass pages hinged on the spine at the centre, five a wing, the covers in
   blue and the inner pages in coral. Each page is half the frame wide. Flipped, the stage's foot (the spine's
   foot) sits at 461 in frame one, the pages' outer corners about 70 below it. */
.bk-stage {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-116 * var(--u));
  height: calc(577 * var(--u));
  perspective: calc(6000 * var(--u));
  perspective-origin: 50% -20%;
  transform: scaleY(-1);
}
.bk-tilt {
  position: absolute;
  left: 50%;
  top: 0;
  width: 0;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(5deg);
  transform-origin: 50% 100%;
}
.bk-wing {
  position: absolute;
  left: calc(-960 * var(--u));
  top: 0;
  width: calc(1920 * var(--u));
  height: 100%;
  transform-style: preserve-3d;
}
.bk-pg {
  position: absolute;
  left: 50%;
  top: 0;
  width: 50%;
  height: 100%;
  transform-origin: 0% 50%;
  transform-style: preserve-3d;
  will-change: transform;
  transform: rotateY(-90deg);
}
.bk-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55), inset 0 1px 0
    rgba(255, 255, 255, 0.8), inset 0 -24px 40px -30px rgba(255, 255, 255, 0.6);
}
.bk-face.back {
  transform: rotateY(180deg);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55), inset 0 1px 0
    rgba(255, 255, 255, 0.8);
}
.bk-face i {
  position: absolute;
  inset: 0;
}
.bk-face .gr {
  background-image: var(--bkgrain);
  background-repeat: repeat;
  background-size: 160px 160px;
  opacity: 0.35;
}
.bk-face .hl {
  background: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.45),
    rgba(255, 255, 255, 0) 38%,
    rgba(255, 255, 255, 0) 70%,
    rgba(255, 255, 255, 0.18)
  );
}
.bk-face.back .hl {
  background: linear-gradient(
    195deg,
    rgba(255, 255, 255, 0.45),
    rgba(255, 255, 255, 0) 38%,
    rgba(255, 255, 255, 0) 70%,
    rgba(255, 255, 255, 0.18)
  );
}
/* the lockup at rest, from the second frame: the MIT mark 90 tall at 276, the association line on its centre */
.lockup {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  top: calc(172 * var(--u));
  height: calc(90 * var(--u));
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 calc(267 * var(--u)) 0 calc(242 * var(--u));
  transition: transform 1000ms var(--ease-move), opacity 700ms ease;
}
.lk-mit {
  height: calc(90 * var(--u));
  width: auto;
  transform-origin: 0 50%;
  transition: scale 1000ms var(--ease-move);
}
.lk-assoc {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--u));
  margin: 0;
  font-size: var(--t-16);
  line-height: 1.5;
  color: #000;
}
/* optical: the "l" makes the wordmark's box taller than its body, so centring the box sat the body low; lift it so the
   body's centre meets the text's x-height centre, halfway to the baselines meeting */
.lk-assoc img {
  height: calc(27.1 * var(--u));
  width: auto;
  transform: translateY(calc(-2.5 * var(--u)));
}
/* the copy and the report, on the page (the card is gone); the copy on the lockup's left edge */
.hero-card {
  position: relative;
  z-index: 2;
  width: calc(1920 * var(--u));
  min-height: calc(540 * var(--u));
  margin: 0 auto;
} /* the book's foot (round 23: was 664, which left 130u of air) */
.hc-copy {
  position: relative;
  z-index: 1;
  padding: 0 0 0 calc(242 * var(--u));
  width: calc(1002 * var(--u));
}
/* every element under the lockup enters the same way, a short lift and a fade, top to bottom, once the logos have landed */
.hc-copy > *,
.hc-book {
  transition: opacity 700ms cubic-bezier(0.33, 0, 0.2, 1) var(--hd, 0ms),
    transform 800ms var(--ease-settle) var(--hd, 0ms);
}
.hc-copy > h1 {
  --hd: 90ms;
}
.hc-copy > .lede {
  --hd: 180ms;
}
.hc-copy > .gate {
  --hd: 270ms;
}
.hc-book {
  --hd: 360ms;
}
html[data-launch="live"] .pre-only,
html:not([data-launch="live"]) .live-only {
  display: none !important;
}
.thx-link {
  all: unset;
  display: block;
  margin-top: 4px;
  font-size: var(--t-16);
  font-weight: 500;
  color: var(--persian);
  cursor: pointer;
}
.thx-link:hover {
  text-decoration: underline;
}
.thx-link:focus-visible {
  outline: 2px solid var(--cool-deep);
  outline-offset: 2px;
  border-radius: 3px;
}
.hc-pre {
  margin: 0 0 max(10px, calc(14 * var(--u)));
  font: 600 var(--t-13) / 1.4 Inter, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--peri);
}
.hero h1 {
  max-width: calc(673 * var(--u));
  font-size: var(--t-48);
  line-height: 1.104;
  font-weight: 600;
  letter-spacing: -.02em;
  color: #000;
}
.lede {
  margin: calc(33 * var(--u)) 0 0;
  max-width: calc(680 * var(--u));
  font-size: var(--t-20);
  line-height: 1.6;
  color: #252530;
} /* neutrals-700 */
.hero .gate {
  margin-top: calc(62 * var(--u));
}
/* the report's two forms, one size: the hero's (Figma 2892:1957) */
.hero .signup,
.inside .signup {
  gap: calc(12 * var(--u));
  max-width: none;
}
.hero .signup input,
.inside .signup input {
  flex: none;
  width: calc(352 * var(--u));
  min-width: 220px;
  height: max(48px, calc(58 * var(--u)));
  font-size: var(--t-20);
  padding: 0 calc(20 * var(--u));
}
.hero .signup .mr-btn,
.inside .signup .mr-btn {
  min-width: calc(200 * var(--u));
  height: max(48px, calc(58 * var(--u)));
  padding: 0 calc(22 * var(--u));
  font-size: var(--t-20);
}
.hero .msg {
  max-width: calc(606 * var(--u));
}
.hero .optin {
  margin-top: 11px;
  min-height: 0;
  line-height: max(16px, calc(18 * var(--u)));
  font-size: var(--t-16);
  gap: max(8px, calc(8 * var(--u)));
}
.hero .optin input {
  width: max(16px, calc(18 * var(--u)));
  height: max(16px, calc(18 * var(--u)));
}
.hero .thanks {
  max-width: calc(606 * var(--u));
}
/* the report: one copy, larger (review 2026-10-14: two books read busier than one). Saloni's Hero-mock-new: the
   book upright, its own soft shadow falling to the right; the book stands 640 tall from 300 */
.hc-book {
  position: absolute;
  left: calc(1222 * var(--u));
  top: calc(4 * var(--u));
  width: calc(596 * var(--u));
  pointer-events: none;
}
.hc-book img {
  display: block;
  width: 100%;
  height: auto;
}

/* the intro (gated on .js): frame one, then the rest. While .is-low, the fan hangs at the top (no rise) and the
   lockup waits 408 lower, its MIT mark a touch larger; the script opens the pages and lifts the logos in. Removing
   .is-low lifts both into place; removing .card-hidden brings the copy, the form and the report up, one after
   another. The hero sits over the next section until the intro is done. */
.js .hero.is-low .hero-band {
  transform: none;
}
.js:not(.intro-done):not(.intro-skip) .hero.is-low .lockup > * {
  opacity: 0;
}
.js .hero.is-low .lockup {
  transform: translateY(calc(512 * var(--u)));
}
.js .hero.is-low .lk-mit {
  scale: 1.15;
}
.js:not(.intro-done) .hero,
.js .hero.intro-fast {
  z-index: 3;
}
html.js:not(.intro-done):not(.intro-skip),
html.js:not(.intro-done):not(.intro-skip) body {
  overflow: hidden;
}
.js .hero.card-hidden .hc-copy > *,
.js .hero.card-hidden .hc-book {
  opacity: 0;
  transform: translateY(calc(32 * var(--u)));
}
.hero.intro-fast .lockup,
.hero.intro-fast .hero-band,
.hero.intro-fast .lk-mit,
.hero.intro-fast .hc-copy > *,
.hero.intro-fast .hc-book {
  transition-duration: 300ms !important;
  transition-delay: 0ms !important;
}
.intro-skip .hero .hero-band {
  transform: translateY(var(--rise)) !important;
}
.intro-skip .hero .lockup,
.intro-skip .hero .hc-copy > *,
.intro-skip .hero .hc-book {
  transform: none !important;
  opacity: 1 !important;
}
.intro-skip .hero .lk-mit {
  scale: 1 !important;
}

/* ================= 2. WHO ANSWERED ================= */
.sec-who {
  padding-top: calc(72 * var(--u));
}
.who-grid {
  display: grid;
  width: calc(1403 * var(--u));
  margin: calc(57 * var(--u)) auto 0;
  grid-template-columns: calc(462 * var(--u)) calc(446 * var(--u)) calc(
      463 *
      var(--u)
    );
  grid-template-rows: minmax(calc(188 * var(--u)), auto) minmax(
      calc(188 * var(--u)),
      auto
    );
  gap: calc(25 * var(--u)) calc(16 * var(--u));
}
/* the outline is the Figma's stroke: #FAB8C9 (top right) to #D2D4F6 (bottom left) at 49%, inside, 1.75 */
.wcard,
.xcard {
  border: max(1px, calc(1.751 * var(--u))) solid transparent;
  background: linear-gradient(#fff, #fff) padding-box, var(--edge) border-box;
}
.wcard {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: calc(10 * var(--u));
}
.wcard > h3,
.wcard > p,
.wcard > .wc-head {
  position: relative;
  z-index: 1;
}
.wc-senior {
  grid-column: 1 / 3;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: calc(32 * var(--u));
  padding: calc(34 * var(--u)) calc(48 * var(--u)) calc(30 * var(--u));
  /* a faint two-temperature wash, the one hook for the eye in the grid */
  background: linear-gradient(120deg, #f0f4fe 0%, #ffffff 46%, #fff2ee 100%)
    padding-box, var(--edge) border-box;
}
.wc-senior > div:first-child {
  flex: 1 1 auto;
  min-width: 0;
}
.wc-senior > div > p {
  max-width: calc(560 * var(--u));
}
.wc-senior .gtext {
  white-space: nowrap;
}
/* the one stat that leads: the poll's 250, in ink, at display size */
/* scratch D (2026-10-15): senior leaders and revenue across the top, the twelve industries wide under them, the map bottom right */
.wc-rev {
  grid-column: 3;
  grid-row: 1;
  padding: calc(41 * var(--u)) calc(48 * var(--u)) calc(34 * var(--u));
}
.wc-ind {
  grid-column: 1 / 3;
  grid-row: 2;
  padding: calc(34 * var(--u)) calc(40 * var(--u)) calc(34 * var(--u));
}
.wc-regions {
  grid-column: 3;
  grid-row: 2;
  min-height: calc(320 * var(--u));
  container-type: inline-size;
}
/* card headings a step under the section's 48, in one solid periwinkle */
.gtext {
  margin: 0;
  font-size: var(--t-40);
  line-height: 1.104;
  font-weight: 700;
  letter-spacing: -.02em;
  color: #4d51db;
  transition: opacity .6s ease, transform .9s var(--ease-settle);
  transition-delay: var(--hd, 0ms);
}
/* the card headings float up as the section arrives, one after another */
.js .sec-who:not(.in) .gtext {
  opacity: 0;
  transform: translateY(calc(22 * var(--u)));
}
.wcard p {
  margin: calc(15 * var(--u)) 0 0;
  font-size: var(--t-24);
  line-height: 1.5;
  color: #000;
}
/* the three interviewees, labelled so they never read as the respondents: overlapping circles, each arriving in turn */
.wc-int {
  flex: none;
  display: grid;
  justify-items: start;
  gap: max(6px, calc(10 * var(--u)));
  padding-top: calc(6 * var(--u));
}
.wcard .wc-int-l {
  margin: 0;
  max-width: 13em;
  font-size: var(--t-16);
  line-height: 1.4;
  color: var(--slate);
}
.wc-int-l a {
  color: var(--persian);
  text-decoration: none;
  font-weight: 600;
}
.wc-int-l a:hover {
  text-decoration: underline;
}
.faces {
  display: flex;
  padding-left: max(8px, calc(14 * var(--u)));
}
.face {
  position: relative;
  flex: none;
  width: max(40px, calc(58 * var(--u)));
  height: max(40px, calc(58 * var(--u)));
  margin-left: min(-8px, calc(-14 * var(--u)));
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(
    61deg,
    rgba(141, 174, 243, 0.45),
    rgba(247, 166, 149, 0.45)
  );
  box-shadow: 0 0 0 max(2px, calc(3 * var(--u))) #fff;
  transition: transform .7s var(--ease-settle), opacity .5s ease;
  transition-delay: var(--d, 0ms);
}
.face img {
  position: absolute;
  width: 100%;
  height: auto;
  left: 0;
}
.js .wc-senior:not(.in) .face {
  opacity: 0;
  transform: translateX(calc(-18 * var(--u))) scale(0.8);
}
/* twelve industries, all in the open: three rows of four, grouped so each row runs about the same length */
.ind-pills {
  display: grid;
  gap: max(6px, calc(10 * var(--u)));
  margin-top: max(18px, calc(26 * var(--u)));
}
.ind-pills ul {
  display: flex;
  flex-wrap: wrap;
  gap: max(6px, calc(10 * var(--u)));
  margin: 0;
  padding: 0;
  list-style: none;
}
.ind li {
  display: inline-flex;
  align-items: center;
  height: max(30px, calc(36 * var(--u)));
  padding: 0 max(12px, calc(16 * var(--u)));
  border: max(1px, calc(1.5 * var(--u))) solid transparent;
  border-radius: 999px;
  background: linear-gradient(#fff, #fff) padding-box, var(--edge) border-box;
  font: 400 var(--t-13) / 1 Inter, sans-serif;
  color: #4c4c4c;
  white-space: nowrap;
}
.ind li svg {
  flex: none;
  width: max(12px, calc(15 * var(--u)));
  height: max(12px, calc(15 * var(--u)));
  margin-right: max(6px, calc(8 * var(--u)));
  fill: none;
  stroke: var(--peri);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}
.ind li svg * {
  vector-effect: non-scaling-stroke;
}
/* four regions: the dot map, sized to its card; a soft blue-to-coral gradient flows across the surveyed regions without stopping */
.wr-in {
  position: absolute;
  inset: 0;
  --c: calc(100cqw / 463);
}
.wr-in .gtext {
  position: absolute;
  left: calc(29 * var(--c));
  top: calc(38 * var(--c));
  font-size: var(--t-40);
}
/* the map at 1.2 times the Figma's, filling the card under its heading; labels sit in the map's own percentages */
.map {
  --mw: 440;
  position: absolute;
  left: calc((463 - var(--mw)) / 2 * var(--c));
  bottom: calc(30 * var(--c));
  width: calc(var(--mw) * var(--c));
  aspect-ratio: 532.5 / 220.2;
}
/* drawn dot by dot: the blue-to-coral wave crosses the surveyed regions without stopping, and the dots it
   warms swell a little, so the wave reads as movement rather than tint */
.map-cv {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.map-l {
  position: absolute;
  transform: translateY(-50%);
  font: 600 var(--t-13) / 1.25 Inter, sans-serif;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.9);
  padding: calc(2 * var(--c)) calc(5 * var(--c));
  border-radius: calc(4 * var(--c));
  white-space: nowrap;
}

/* ================= 3. WHO WE INTERVIEWED: the gradient behind each portrait floats up on arrival ================= */
.sec-xp {
  padding-top: calc(169 * var(--u));
}
.xp-grid {
  display: grid;
  grid-template-columns: repeat(3, calc(515 * var(--u)));
  gap: calc(30 * var(--u));
  justify-content: center;
  margin-top: calc(57 * var(--u));
}
/* scratch E: the name, role, logo and description at the top; the cutout standing on its pane in the lower right.
   The picture block is pinned to the card's foot, so the three cutouts line up across the row. */
.xcard {
  position: relative;
  display: flex;
  flex-direction: column;
  container-type: inline-size;
  border-radius: calc(18 * var(--u));
  overflow: hidden;
  isolation: isolate;
}
.xc-tx,
.xc-in {
  --c: calc(100cqw / 515);
}
.xc-tx {
  padding: calc(38 * var(--c)) calc(50 * var(--c)) calc(8 * var(--c));
}
.xc-tx h3 {
  font-size: var(--t-24);
  line-height: 1.16;
  font-weight: 700;
  letter-spacing: -.02em;
  color: #000;
}
.xc-role {
  margin: calc(8 * var(--c)) 0 0;
  font-size: var(--t-20);
  line-height: 1.5;
  font-weight: 600;
  color: var(--slate);
}
.xc-logo {
  display: block;
  height: max(20px, calc(28 * var(--c)));
  width: auto;
  margin: calc(16 * var(--c)) 0 calc(28 * var(--c));
}
.xc-say {
  margin: 0;
  max-width: calc(415 * var(--c));
  font: 500 var(--t-20) / 1.6 Gilroy, Inter, sans-serif;
  letter-spacing: -.02em;
  color: var(--slate);
  text-wrap: pretty;
}
/* their words from the poll section (round 25): the poll cards' faint two-temperature mark, the quote in ink */
.xc-q {
  position: relative;
  padding-top: max(20px, calc(30 * var(--c)));
  color: var(--ink);
}
.xc-q::before {
  content: "\201C";
  position: absolute;
  left: max(-3px, calc(-4 * var(--c)));
  top: -4px;
  font: 700 max(40px, calc(60 * var(--c))) / 0.86 "Funnel Display", Georgia,
    serif;
  letter-spacing: 0;
  background: linear-gradient(74deg, #5f97f6 20%, #fd8550 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0.28;
  pointer-events: none;
}
.xc-top {
  position: relative;
  margin-top: auto;
  aspect-ratio: 515 / 292;
  overflow: hidden;
}
.xc-in {
  position: absolute;
  inset: 0;
}
.xc-pane {
  position: absolute;
  left: calc(172 * var(--c));
  top: calc(96 * var(--c));
  width: calc(362 * var(--c));
  height: calc(1017 * var(--c));
  transition: transform 1200ms var(--ease-settle), opacity 900ms ease;
  transition-delay: var(--d, 0ms);
}
.xc-pane svg {
  display: block;
  width: 100%;
  height: 100%;
  transform: rotate(180deg);
}
.js .xcard:not(.in) .xc-pane {
  opacity: 0;
  transform: translateY(calc(230 * var(--c)));
}
.xc-photo {
  position: absolute;
  z-index: 1;
}
.xc-clip {
  position: absolute;
  z-index: 1;
  overflow: hidden;
}
.xc-clip img {
  position: absolute;
  left: 0;
  width: 100%;
}

/* ================= 4. WHAT THE POLL FOUND ================= */
/* the finding cards (scratch layout B): each finding one card in the who-answered outline. The chart's subject
   above its number, the number and its sentence beside the chart, the voice across the card's foot */
.sec-poll {
  padding-top: calc(223 * var(--u));
}
.fd-list {
  display: grid;
  gap: calc(52 * var(--u));
  width: calc(1403 * var(--u));
  margin: calc(96 * var(--u)) auto 0;
}
/* one column (review 2026-10-14): the finding's number and line first, then its picture below, then the voice. The
   68% keeps its staircase as the card's hero; the other two are one pair of numbers each. Everything plays once and stays. */
.fcard {
  display: flex;
  flex-direction: column;
  padding: calc(64 * var(--u)) calc(72 * var(--u)) calc(56 * var(--u));
  border: max(1px, calc(1.751 * var(--u))) solid transparent;
  border-radius: calc(10 * var(--u));
  overflow: hidden;
  background: linear-gradient(
      160deg,
      rgba(141, 174, 243, 0.1) 0%,
      rgba(255, 255, 255, 0) 34%,
      rgba(255, 255, 255, 0) 70%,
      rgba(247, 166, 149, 0.1) 100%
    )
    padding-box, linear-gradient(#fff, #fff) padding-box, var(--edge) border-box;
}
.fo-lead {
  display: flex;
  align-items: center;
  gap: calc(32 * var(--u));
  margin-top: calc(12 * var(--u));
}
.fo-lead .fd-num,
.fo-lead .fd-say {
  margin: 0;
}
.fo-lead .fd-say {
  max-width: calc(640 * var(--u));
}
.fo-head .fd-lead {
  max-width: calc(940 * var(--u));
}
.fo-vis {
  margin: calc(44 * var(--u)) 0 0;
}
.fo-vis .fig-name {
  margin: calc(16 * var(--u)) 0 0;
  text-align: left;
  font: 500 var(--t-13) / 1.5 Inter, sans-serif;
  color: #a9a9b4;
}
.fo-graph .fd-plot {
  width: 100%;
}
/* the pair: the finding's number in ink on the gradient bar, its comparison in grey; bars to scale, filled once */
.fo-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, calc(520 * var(--u))));
  column-gap: calc(96 * var(--u));
}
.fo-pair .fig-name {
  grid-column: 1 / -1;
  margin-top: calc(28 * var(--u));
}
.fo-stat .n {
  margin: 0;
  font: 600 max(40px, calc(72 * var(--u))) / 1 "Funnel Display", sans-serif;
  letter-spacing: -.02em;
  color: #9c9caa;
  font-variant-numeric: tabular-nums;
}
.fo-stat.on .n {
  color: #000;
}
.fo-stat .bar {
  display: block;
  height: max(6px, calc(10 * var(--u)));
  margin: calc(20 * var(--u)) 0 calc(16 * var(--u));
  border-radius: 99px;
  background: #ececf2;
  overflow: hidden;
}
.fo-stat .bar i {
  display: block;
  height: 100%;
  width: calc(var(--v) * 1%);
  border-radius: inherit;
  background: #c9c9d2;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 1100ms var(--ease-settle) 250ms;
}
.fo-stat.on .bar i {
  background: linear-gradient(90deg, #8daef3, #f7a695);
}
.fo-pair.run .bar i {
  transform: none;
}
.fo-stat .l {
  margin: 0;
  max-width: calc(440 * var(--u));
  font: 400 var(--t-20) / 1.45 Inter, sans-serif;
  color: var(--body);
}
.fd-eye {
  margin: 0;
  font: 600 var(--t-13) / 1.4 Inter, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--peri);
}
.fd-num {
  margin: calc(12 * var(--u)) 0 0;
  font: 600 max(44px, calc(72 * var(--u))) / 1.111 "Funnel Display", sans-serif;
  letter-spacing: -.02em;
  color: #000;
  white-space: nowrap;
}
.fd-pre {
  font-size: .5em;
  letter-spacing: -.01em;
  margin-right: .18em;
}
.fd-say {
  margin: calc(12 * var(--u)) 0 0;
  max-width: calc(470 * var(--u));
  font: 400 var(--t-24) / 1.5 Inter, sans-serif;
  color: #000;
}
.fd-say b {
  font-weight: 600;
}
/* the voice (H3) sits in the story column's blank space, at its foot */
/* the quote carries more weight than its speaker; a large opening mark in the CTA's two temperatures, very
   faint, sits over it (scratch B, finding-cards) */
.fd-quote {
  margin: calc(40 * var(--u)) 0 0;
  padding-top: 0;
  max-width: calc(820 * var(--u));
}
.fd-quote blockquote {
  position: relative;
  margin: 0;
  padding-top: max(20px, calc(30 * var(--u)));
  font: 500 var(--t-20) / 1.5 Gilroy, Inter, sans-serif;
  letter-spacing: -.02em;
  color: var(--ink);
  text-wrap: pretty;
}
.fd-quote blockquote::before {
  content: "\201C";
  position: absolute;
  left: max(-3px, calc(-4 * var(--u)));
  top: -4px;
  font: 700 max(40px, calc(60 * var(--u))) / 0.86 "Funnel Display", Georgia,
    serif;
  letter-spacing: 0;
  background: linear-gradient(74deg, #5f97f6 20%, #fd8550 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0.28;
  pointer-events: none;
}
/* a finding without a headline number leads with its statement at display size */
.fd-say.fd-lead {
  margin-top: calc(14 * var(--u));
  font: 600 var(--t-40) / 1.15 "Funnel Display", sans-serif;
  letter-spacing: -.02em;
  color: var(--grey);
}
.fd-say.fd-lead b {
  color: #000;
}
.att {
  display: flex;
  align-items: center;
  gap: max(8px, calc(10 * var(--u)));
  margin: max(10px, calc(14 * var(--u))) 0 0;
}
.av {
  position: relative;
  flex: none;
  width: max(28px, calc(34 * var(--u)));
  height: max(28px, calc(34 * var(--u)));
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(
    61deg,
    rgba(141, 174, 243, 0.31),
    rgba(247, 166, 149, 0.31)
  );
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}
.av img {
  position: absolute;
  left: 0;
  width: 100%;
  height: auto;
}
.att-t {
  display: grid;
  gap: max(5px, calc(7 * var(--u)));
}
.att-t b {
  font: 500 var(--t-13) / 1.2 Inter, sans-serif;
  color: var(--slate);
}
.att-logo {
  height: max(10px, calc(13 * var(--u)));
  width: auto;
  opacity: 0.75;
}
.att-logo.wd {
  height: max(18px, calc(21 * var(--u)));
  margin-top: -3px;
}

/* ================= 5. WHAT'S INSIDE, from the Figma (node 2892:1692, a 1824 frame centred in ours) =================
   A white sheet cut on the slash, its edge in the Figma's blue-to-pink stroke, laid over the rendered
   glass room with the report standing in it. The question in focus is ink, with the gradient bar beside it. */
/* the frame is the Figma's 905 tall, and grows with the copy when the type sits on its floors (narrow desktops) */
.inside {
  position: relative;
  margin-top: calc(150 * var(--u));
  overflow: hidden;
}
.inside > .frame {
  min-height: calc(905 * var(--u));
}
/* the art (review 2026-10-14: the rendered book's spine read squeezed, with a reflection under it): the glass room's
   own left side, which has no book in it, as the backdrop, and the hero's single copy standing in front, its shadow below */
.in-art {
  position: absolute;
  z-index: 0;
  left: calc(811 * var(--u));
  top: calc(68 * var(--u));
  width: calc(1109 * var(--u));
  height: calc(789 * var(--u));
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 86%, transparent 98%);
  mask-image: linear-gradient(180deg, #000 86%, transparent 98%);
}
/* round 26: Saloni's Secondarymock, the report standing in the glass room, as one photograph. The book is the middle
   quarter of the frame (its centre at 51%); the image is set so the book sits in the room's visible right side, clear
   of the sheet's slanted edge, and the picture covers the art box top to bottom */
.in-shot {
  position: absolute;
  left: calc(-77 * var(--u));
  top: calc(-80 * var(--u));
  width: calc(1680 * var(--u));
  max-width: none;
  height: auto;
}
.in-sheet {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.in-copy {
  position: relative;
  z-index: 2;
  width: calc(948 * var(--u));
  padding: calc(159 * var(--u)) 0 calc(120 * var(--u)) calc(208 * var(--u));
}
.in-copy h2 {
  margin-top: calc(15 * var(--u));
  font-size: var(--t-48);
  line-height: 1.104;
  font-weight: 600;
  letter-spacing: -.02em;
  color: #000;
}
.in-listwrap {
  position: relative;
  margin-top: calc(46 * var(--u));
  padding-left: calc(27 * var(--u));
}
.in-list {
  display: grid;
  gap: calc(29 * var(--u));
  max-width: calc(663 * var(--u));
  margin: 0;
  padding: 0;
  list-style: none;
}
.in-list li {
  font-size: var(--t-20);
  line-height: 1.6;
  color: #787878;
  cursor: default;
  transition: color .35s ease;
}
.in-list li.on {
  color: #000;
}
.in-list li:focus-visible {
  outline: 2px solid var(--cool-deep);
  outline-offset: 4px;
  border-radius: 4px;
}
/* the bar beside the question in focus is a timer: its gradient fills down the track over the wait, and the
   next question takes the focus when it is full. Held (pointer or focus), it stays full. */
.in-bar {
  position: absolute;
  left: 0;
  top: 0;
  width: max(4px, calc(5 * var(--u)));
  height: 40px;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(141, 174, 243, 0.2);
  transition: transform .55s var(--ease-settle), height .55s var(--ease-settle);
}
.in-fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transform-origin: 50% 0;
  background: linear-gradient(180deg, #8daef3 0%, #d5b4d6 55%, #f58c74 100%);
}
@keyframes infill {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}
.in-lede {
  margin: calc(40 * var(--u)) 0 0;
  max-width: calc(620 * var(--u));
  font-size: var(--t-20);
  line-height: 1.55;
  color: var(--slate);
  text-wrap: pretty;
}
.inside .gate {
  margin-top: calc(48 * var(--u));
}

/* ================= 4. WHAT THE POLL FOUND, round 28: scratch poll-annotated B ("Spread") =================
   The 68% leads as one annotated bar (the three answers in glass, a bracket over them, names hung beneath); return
   on AI is Figure 2 made static and vertical, the agents-in-production column in focus; who owns AI is the ownership
   figure as vertical pairs. Every number is PollCharts.DATA. Scoped to #findings: the scratch page's class names are
   generic (.card, .bar, .pane, .key), so nothing here can reach the rest of the page. */
/* the panes' white-speck grain, as on the scratch page (the page's own --grain is the hero glass's, darker) */
#findings {
  --grey: #6c6c6c;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 7 -4.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
#findings .pa-panel {
  width: calc(1403 * var(--u));
  margin: calc(64 * var(--u)) auto 0;
}
/* round 29: every finding is a full-width card like the 68% one; the two column charts get the room to stand taller */
#findings .flead .stk {
  --ch: max(180px, calc(280 * var(--u)));
}
#findings .flead .own {
  --ch: max(150px, calc(260 * var(--u)));
}
/* round 31: the third card's sentence in the same type as the first two cards' sentences (Inter 24u, the key
   phrase bold), as Saloni asked */
#findings .top .say.lead {
  margin-top: calc(12 * var(--u));
  font: 400 var(--t-24) / 1.42 Inter, sans-serif;
  letter-spacing: normal;
  color: #000;
}
#findings .top .say.lead b {
  font-weight: 600;
  color: #000;
}
/* L's card: the outline and faint wash */
#findings .card {
  position: relative;
  border: max(1px, calc(1.5 * var(--u))) solid transparent;
  border-radius: calc(10 * var(--u));
  background: linear-gradient(
      160deg,
      rgba(141, 174, 243, 0.1) 0%,
      rgba(255, 255, 255, 0) 34%,
      rgba(255, 255, 255, 0) 70%,
      rgba(247, 166, 149, 0.1) 100%
    )
    padding-box, linear-gradient(#fff, #fff) padding-box, var(--edge) border-box;
}

/* the story, in reading order: eyebrow, number and statement, the graphic, then what the graphic measures */
#findings .fd {
  position: relative;
  min-width: 0;
}
#findings .eye {
  margin: 0;
  font: 600 var(--t-13) / 1.4 Inter, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--peri);
}
#findings .num {
  margin: calc(12 * var(--u)) 0 0;
  font: 600 max(44px, calc(72 * var(--u))) / 1 "Funnel Display", sans-serif;
  letter-spacing: -.02em;
  color: #000;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
#findings .pre {
  font-size: .5em;
  letter-spacing: -.01em;
  margin-right: .18em;
}
#findings .say {
  margin: calc(12 * var(--u)) 0 0;
  font: 400 var(--t-24) / 1.42 Inter, sans-serif;
  color: #000;
}
#findings .say b {
  font-weight: 600;
}
/* the finding without a number leads with its statement in the display face, at the same size */
#findings .say.lead {
  margin-top: calc(14 * var(--u));
  font: 600 var(--t-24) / 1.3 "Funnel Display", sans-serif;
  letter-spacing: -.01em;
  color: var(--grey);
}
#findings .say.lead b {
  font-weight: 600;
  color: #000;
}
#findings .top + .gw {
  margin-top: calc(36 * var(--u));
}
#findings .fig {
  margin: calc(24 * var(--u)) 0 0;
  font: 500 var(--t-13) / 1.45 Inter, sans-serif;
  color: #8e8e9a;
}

/* ================= the graphics =================
   Everything is laid out in percent of the graphic's width, so the notes reflow with it rather than collide.
   --bh a bar's height, --in a note's inset. */
#findings .gw {
  position: relative;
  min-width: 0;
}
#findings .gx {
  position: relative;
  --bh: max(44px, calc(64 * var(--u)));
  --in: max(8px, calc(12 * var(--u)));
  --gap: 3px;
  --r: max(5px, calc(8 * var(--u)));
}
/* a note on the graphic: plain words, the number in it bold */
#findings .an {
  margin: 0;
  font: 500 var(--t-16) / 1.35 Inter, sans-serif;
  color: var(--body);
}
#findings .an b {
  font-weight: 700;
  color: #000;
}
/* a label: what a mark is, in the mono face */
#findings .ml {
  margin: 0;
  font: 400 var(--t-13) / 1.35 "Geist Mono", ui-monospace, Menlo, monospace;
  letter-spacing: -.01em;
  color: var(--slate);
}

/* bars of glass panes: one span of the cover's gradient across the panes in focus, a sheen and grain over it */
#findings .bar {
  position: relative;
  z-index: 1;
  height: var(--bh);
}
#findings .pane {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--x) * 1%);
  width: calc(var(--w) * 1% - var(--gap));
  border-radius: var(--r);
  transform-origin: 0 50%;
}
#findings .pane.end {
  width: calc(var(--w) * 1%);
}
#findings .pane.on {
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.7), 0 calc(14 * var(--u))
    calc(28 * var(--u)) calc(-14 * var(--u)) rgba(95, 151, 246, 0.38);
}
#findings .pane.on {
  background-image: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.42),
      rgba(255, 255, 255, 0) 55%
    ), linear-gradient(90deg, #8daef3, #d5b4d6 52%, #f7a695);
  background-size: 100% 100%, var(--bs, 100%) 100%;
  background-position: 0 0, var(--bp, 0%) 0;
  background-repeat: no-repeat;
}
/* the cover's grain, softened so the panes read as frosted rather than speckled */
#findings .pane.on::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--grain) 0 0 / 140px 140px;
  opacity: 0.55;
  pointer-events: none;
}
#findings .pane.off {
  background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.66),
      rgba(255, 255, 255, 0) 60%
    ), #e8e8ef;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.85);
}
#findings .pane .ml {
  position: absolute;
  right: var(--in);
  bottom: calc(var(--in) * 0.7);
  max-width: calc(100% - 2 * var(--in));
  text-align: right;
  color: #8e8e9a;
}

/* a callout: the note, and a bracket over exactly the span it names. Round 48: the start is --ca, not --a. atlan.com's
   stylesheet registers --a as an angle (@property), so on the site "--a:0" became 0deg, the width sum broke, and the
   bracket fell back to the full width of the bar */
#findings .co {
  position: relative;
}
#findings .co > .an,
#findings .co > .hl {
  margin-left: calc(var(--ca, 0) * 1%);
}
#findings .co > .an {
  position: relative;
  top: -3px;
} /* round 48: the stat 3px clear of its bracket */
#findings .brk {
  display: block;
  width: calc((var(--b) - var(--ca, 0)) * 1% - var(--gap));
  margin: max(8px, calc(10 * var(--u))) 0 max(6px, calc(8 * var(--u)))
    calc(var(--ca, 0) * 1%);
  height: max(8px, calc(11 * var(--u)));
  transform-origin: 0 50%;
  background:
    linear-gradient(90deg, #5f97f6, #fd8550) 0 0 / 100% 1.5px no-repeat, linear-gradient(
      #5f97f6,
      #5f97f6
    ) 0 0 / 1.5px 100% no-repeat, linear-gradient(#fd8550, #fd8550) 100% 0 / 1.5px 100% no-repeat;
}

/* names hung under their panes on thin poles. The rightmost pane's name sits on the top row and each name to its
   left one row lower, so no pole ever crosses a name, at any width. Each pole starts at a dot halfway up its pane
   (--hb is the height of the bar it hangs from), and the whole layer sits above the bars, so the dot and the line
   are always drawn over the glass, never behind it. */
#findings .hang {
  position: relative;
  z-index: 2;
  --hb: var(--bh);
}
#findings .lv {
  position: relative;
}
#findings .lv::before {
  content: "";
  position: absolute;
  left: calc(var(--x) * 1% + var(--in));
  top: calc(var(--hb) * -0.5);
  bottom: .3em;
  width: 1px;
  background: rgba(37, 37, 48, 0.45);
  transform-origin: 50% 0;
}
#findings .lv::after {
  content: "";
  position: absolute;
  left: calc(var(--x) * 1% + var(--in) - 2.5px);
  top: calc(var(--hb) * -0.5 - 3px);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.9);
}
#findings .lt {
  margin: 0 0 0 calc(var(--x) * 1% + var(--in));
  padding: max(12px, calc(16 * var(--u))) 0 0 max(10px, calc(12 * var(--u)));
}
#findings .lt .say {
  margin: 0;
}
#findings .lt.ml b {
  margin-right: .45em;
  font: 600 var(--t-16) / 1 "Funnel Display", sans-serif;
  letter-spacing: -.01em;
  color: #000;
  font-variant-numeric: tabular-nums;
}

/* labels under columns: in Inter, which is narrower than the mono, so five stage names fit under five columns on
   a phone; each may use the gap beside its column */
#findings .cn {
  padding: max(8px, calc(12 * var(--u))) 3px 0 0;
  font: 500 var(--t-13) / 1.3 Inter, sans-serif;
  letter-spacing: -.01em;
  color: #8e8e9a;
}
#findings .cn.on {
  color: var(--ink);
}
#findings .cbrk {
  width: auto;
  margin: max(8px, calc(10 * var(--u))) 0 max(8px, calc(10 * var(--u)));
}

/* return on AI: one stacked column per stage, each split into the four returns as one ordered scale, from the
   warmest (transformational, on top, so every column's strongest return hangs from one shared top line) through
   the page's two temperatures down to the quietest grey. The column the sentence is about is in full colour, its
   transformational share labelled; the others are quieter. */
#findings .key {
  display: flex;
  flex-wrap: wrap;
  gap: max(4px, calc(6 * var(--u))) max(12px, calc(18 * var(--u)));
  margin: 0 0 max(16px, calc(22 * var(--u)));
  padding: 0;
  list-style: none;
}
#findings .key li {
  display: inline-flex;
  align-items: center;
  gap: max(6px, calc(8 * var(--u)));
}
#findings .key i {
  flex: none;
  width: max(10px, calc(12 * var(--u)));
  height: max(10px, calc(12 * var(--u)));
  border-radius: 3px;
  background: var(--c);
}
#findings .stk {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: var(--cg);
  --cg: max(4px, calc(12 * var(--u)));
  --ch: max(180px, calc(260 * var(--u)));
}
#findings .stk .cn {
  grid-row: 4;
  margin-right: calc(-1 * var(--cg));
}
#findings .stk .cn:last-child {
  margin-right: 0;
}
#findings .stk .cno {
  grid-row: 1;
  text-align: right;
}
/* the focus column's size, folded into its label as one short line */
#findings .cnn {
  display: block;
  margin-top: max(2px, calc(3 * var(--u)));
  font-weight: 400;
  color: var(--slate);
}
#findings .stk .cbrk {
  grid-row: 2;
}
#findings .stc {
  grid-row: 3;
  position: relative;
  height: var(--ch);
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-radius: var(--r);
  overflow: hidden;
  transform-origin: 50% 100%;
}
/* the other columns stay readable but calm, so the focus column carries the colour */
#findings .stc.q {
  filter: saturate(0.55);
}
#findings .stc.q > .sg {
  opacity: 0.3;
}
#findings .sg {
  position: relative;
  flex: var(--p) 1 0;
  min-height: 0;
  background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.34),
      rgba(255, 255, 255, 0) 60%
    ), var(--c);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}
#findings .sgv {
  position: absolute;
  left: max(6px, calc(10 * var(--u)));
  top: max(6px, calc(10 * var(--u)));
  font: 600 var(--t-24) / 1 "Funnel Display", sans-serif;
  letter-spacing: -.02em;
  color: #000;
  font-variant-numeric: tabular-nums;
}

/* who owns AI: Ritik's ownership figure made vertical. For each stage a pair of columns side by side, no formal
   owner in grey and a dedicated AI team in the gradient, each with its value on top, the stage named under the pair.
   The two agent stages are at full strength, on one gradient base under one bracket; the other two are quieter. */
#findings .own {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--gg);
  --gg: max(10px, calc(28 * var(--u)));
  --pg: max(3px, calc(4 * var(--u)));
  --ch: max(150px, calc(220 * var(--u)));
}
#findings .own .gn {
  grid-column: 3 / 5;
  grid-row: 1;
  align-self: end;
}
#findings .own .cbrk {
  grid-column: 3 / 5;
  grid-row: 2;
}
#findings .og {
  grid-row: 3;
  align-self: end;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--pg);
  align-items: end;
}
#findings .og.q {
  opacity: 0.5;
}
#findings .oc {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
#findings .ov {
  margin-bottom: max(5px, calc(7 * var(--u)));
  font: 600 var(--t-16) / 1 "Funnel Display", sans-serif;
  letter-spacing: -.01em;
  text-align: center;
  white-space: nowrap;
  color: #7a7a88;
  font-variant-numeric: tabular-nums;
}
#findings .oc.b .ov {
  color: #000;
}
#findings .oc .pane {
  position: relative;
  left: auto;
  top: auto;
  bottom: auto;
  width: 100%;
  height: calc(var(--ch) * var(--v) / var(--max));
  border-radius: var(--r) var(--r) 0 0;
  transform-origin: 50% 100%;
}
#findings .oc .pane.on {
  background-image: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.36),
      rgba(255, 255, 255, 0) 55%
    ), linear-gradient(165deg, #f7a695 0%, #d5b4d6 40%, #8daef3 88%);
  background-size: 100% 100%;
}
#findings .oc .pane.off {
  background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.5),
      rgba(255, 255, 255, 0) 60%
    ), #d6d6df;
}
#findings .own .base {
  grid-column: 1 / -1;
  grid-row: 3;
  align-self: end;
  position: relative;
  height: 1px;
  background: rgba(37, 37, 48, 0.2);
}
#findings .own .base.on {
  grid-column: 3 / 5;
  height: 2px;
  background: linear-gradient(90deg, #5f97f6, #fd8550);
}
#findings .own .cn {
  grid-row: 4;
  margin-right: calc(-1 * var(--gg));
}
#findings .own .cn:last-child {
  margin-right: 0;
}
#findings .hl3 {
  margin-bottom: calc(30 * var(--u));
}
#findings .hl3 .say {
  max-width: calc(820 * var(--u));
}
#findings .hl3 .say.lead {
  margin: 0;
}

/* drawing, once, as the graphic comes into view: panes and brackets grow, poles drop, notes follow */
#findings .grow-x,
#findings .grow-y,
#findings .lv::before {
  transition: transform 900ms var(--ease-settle) var(--d, 0ms);
}
#findings .fx,
#findings .lv::after {
  transition: opacity .5s ease var(--d, 0ms);
}
.js #findings .fd:not(.go) .grow-x {
  transform: scaleX(0);
}
.js #findings .fd:not(.go) .grow-y,
.js #findings .fd:not(.go) .lv::before {
  transform: scaleY(0);
}
.js #findings .fd:not(.go) .fx,
.js #findings .fd:not(.go) .lv::after {
  opacity: 0;
}

/* round 41: return on AI as a hundred squares, and who owns AI as one ring. --c is one square's side, worked out
   from the graphic's own width (a container), so the poles find the blocks' centres at any width. */
#findings .g2w {
  container-type: inline-size;
  --wg: max(3px, calc(5 * var(--u)));
  --c: calc((100cqw - 19 * var(--wg)) / 20);
  --py: calc(3.5 * var(--c) + 3 * var(--wg));
}
#findings .g2w .co .brk {
  width: calc(var(--b) * 1% + var(--b) * var(--wg) / 100 - var(--wg));
}
#findings .wf {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(20, minmax(0, 1fr));
  gap: var(--wg);
}
#findings .wf i {
  aspect-ratio: 1;
  border-radius: max(2px, calc(4 * var(--u)));
  background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.42),
      rgba(255, 255, 255, 0) 60%
    )
    #ececf2;
  transition: background-color .45s ease var(--d, 0ms);
}
#findings .wf i.t {
  background-color: #fb926c;
}
#findings .wf i.p {
  background-color: #aac2f6;
}
.js #findings .fd:not(.go) .wf i.lit {
  background-color: #ececf2;
}
/* the poles start at a dot in the middle of each half's lower row */
#findings .wh .lv {
  --px: calc((var(--m) * (var(--c) + var(--wg)) + var(--c)) / 2);
}
#findings .wh .lv::before {
  left: var(--px);
  top: calc(-1 * var(--py));
}
#findings .wh .lv::after {
  left: calc(var(--px) - 2.5px);
  top: calc(-1 * var(--py) - 3px);
}
#findings .wh .lt {
  margin-left: var(--px);
}
#findings .wr {
  position: absolute;
  right: 0;
  top: 0;
  margin: 0;
  padding-top: max(12px, calc(16 * var(--u)));
  color: #8e8e9a;
  text-align: right;
}
#findings .wr b {
  margin-right: .45em;
  font: 600 var(--t-16) / 1 "Funnel Display", sans-serif;
  letter-spacing: -.01em;
  color: #000;
  font-variant-numeric: tabular-nums;
}
#findings .wr b {
  color: #7a7a88;
}

/* who owns AI, round 43: a dial of a hundred ticks, each 1% of the organizations running AI agents. The 93 with a
   named owner light up around the dial in the cover's ramp (blue through lilac to coral); the 7 with no formal owner
   stay as short pale stubs, just before twelve o'clock. The middle is left open. The two shares hang off the dial on
   the page's dot-and-pole notes: the 93% straight out from three o'clock, the 7% up from its ticks and across.
   --rs the dial's size, --lg the run from the dial's edge to a note, --lift how far above the dial the 7% note sits. */
#findings .g3r {
  --rs: max(170px, calc(320 * var(--u)));
  --lg: max(24px, calc(40 * var(--u)));
  --lift: max(18px, calc(26 * var(--u)));
  padding-top: calc(var(--lift) + max(10px, calc(12 * var(--u))));
}
#findings .dial {
  position: relative;
  height: var(--rs);
}
/* round 48: .dial-ring, not .ring: atlan.com's stylesheet has Tailwind's .ring utility, which drew a blue box round the dial */
#findings .dial-ring {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--rs);
  height: var(--rs);
}
#findings .dial-ring svg {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
#findings .dial-ring .tk {
  stroke: var(--k);
  stroke-width: 3.6;
  stroke-linecap: round;
  transition: stroke .5s ease var(--d, 0ms);
}
.js #findings .fd:not(.go) .dial-ring .tk {
  stroke: #ececf2;
}
#findings .dial-ring .lit {
  filter: drop-shadow(0 3px 6px rgba(95, 151, 246, 0.22));
}
#findings .rin {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  text-align: center;
  color: var(--slate);
}
/* the notes: a dot on the ticks and a thin line out to the words, drawn over the dial */
#findings .ann {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
#findings .ann .ld {
  position: absolute;
  border: 0 solid rgba(37, 37, 48, 0.45);
}
#findings .ann .ld::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.9);
}
#findings .ann p {
  position: absolute;
  left: calc(var(--rs) + var(--lg) + max(8px, calc(10 * var(--u))));
  right: 0;
  margin: 0;
  transform: translateY(-50%);
}
#findings .ann b {
  margin-right: .45em;
  font: 600 var(--t-16) / 1 "Funnel Display", sans-serif;
  letter-spacing: -.01em;
  color: #000;
  font-variant-numeric: tabular-nums;
}
#findings .a93 .ld {
  left: calc(var(--rs) * var(--x));
  top: calc(var(--rs) * var(--y));
  width: calc(var(--rs) * (1 - var(--x)) + var(--lg));
  border-top-width: 1px;
}
#findings .a93 .ld::after {
  left: -3px;
  top: -3.5px;
}
#findings .a93 p {
  top: calc(var(--rs) * var(--y));
}
#findings .a7 .ld {
  left: calc(var(--rs) * var(--x));
  top: calc(-1 * var(--lift));
  width: calc(var(--rs) * (1 - var(--x)) + var(--lg));
  height: calc(var(--rs) * var(--y) + var(--lift));
  border-left-width: 1px;
  border-top-width: 1px;
}
#findings .a7 .ld::after {
  left: -3.5px;
  bottom: -3px;
}
#findings .a7 p {
  top: calc(-1 * var(--lift));
}
#findings .a7 p b {
  color: #7a7a88;
}
/* a narrow chart has no room for the grey share beside the top label: it takes its own line under the labels */
@container (max-width: 560px) {
  #findings .wr {
    position: static;
    padding-top: 12px;
  }
}
/* round 44, desktop: the dial blown up to most of the column and pushed to the card's right edge, a little into its
   padding; the notes hang off its left side, so they sit in the space between the sentence and the dial rather than
   leaving that space empty. The sentence centres on the dial. --bleed is how far the dial reaches into the padding;
   a note's box runs from the column's left edge to its line, so a long note wraps rather than meets the sentence. */
@media (min-width: 961px) {
  #findings .g3r {
    container-type: inline-size;
    --rs: min(58cqw, max(230px, calc(360 * var(--u))));
    --lg: max(36px, calc(96 * var(--u)));
    --bleed: calc(28 * var(--u));
    padding-top: calc(var(--lift) + max(6px, calc(8 * var(--u))));
  }
  #findings .dial {
    width: var(--rs);
    margin: 0 calc(-1 * var(--bleed)) 0 auto;
  }
  #findings .flead:has(.g3r) > .top {
    align-self: center;
    padding-top: 0;
  }
  /* round 49 (Saloni): this card's sentence gets a wider column (5 of 12, was 4), so less of the card's middle is empty */
  #findings .spread .flead:has(.g3r) {
    grid-template-columns: minmax(0, 5.5fr) minmax(0, 6.5fr);
  } /* round 50: 5.5, as the dial got smaller */
  #findings .ann p {
    left: calc(var(--rs) - 100cqw - var(--bleed));
    right: calc(100% + var(--lg) + max(8px, calc(10 * var(--u))));
    text-align: right;
  }
  #findings .a93 .ld {
    left: calc(-1 * var(--lg));
    width: calc(var(--rs) * var(--xl) + var(--lg));
  }
  #findings .a93 .ld::after {
    left: auto;
    right: -3px;
  }
  #findings .a7 .ld {
    left: calc(-1 * var(--lg));
    width: calc(var(--rs) * var(--x) + var(--lg));
    border-left-width: 0;
    border-right-width: 1px;
  }
  #findings .a7 .ld::after {
    left: auto;
    right: -3.5px;
  }
  #findings .rin {
    font: 500 var(--t-16) / 1.4 Inter, sans-serif;
    letter-spacing: normal;
  }
}
/* small desktops: the notes need the room more than the sentence does, so a narrower sentence and a shorter run */
@media (min-width: 961px) and (max-width: 1199px) {
  #findings .spread .flead:has(.g3r) {
    grid-template-columns: minmax(0, 4.6fr) minmax(0, 7.4fr);
  }
  #findings .g3r {
    --lg: 30px;
  }
}
/* phones: a smaller dial and a shorter run, so the notes keep their room beside it */
@media (max-width: 600px) {
  #findings .g3r {
    --rs: 132px;
    --lg: 16px;
  }
}

/* ================= B · Spread: the 68% leads at two thirds, the other two beneath ================= */
#findings .spread {
  display: grid;
  row-gap: calc(24 * var(--u));
}
#findings .spread .flead {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  column-gap: calc(88 * var(--u));
  padding: calc(68 * var(--u)) calc(72 * var(--u)) calc(60 * var(--u));
}
#findings .flead > .top {
  grid-column: 1;
  grid-row: 1 / 3;
  align-self: start;
  padding-top: calc(4 * var(--u));
}
#findings .flead > :not(.top) {
  grid-column: 2;
}
#findings .flead > .gw {
  margin-top: 0;
}
/* the 12% bar is the 68% bar's height, so the two read as one family */
#findings .flead .gx {
  --bh: max(48px, calc(108 * var(--u)));
}
#findings .pair .own {
  --ch: max(150px, calc(290 * var(--u)));
}
/* without the quotes, the two cards balance on their own: equal widths, each card's story at its top and its
   graphic at its foot, any spare height between the two, so neither card ends in an empty band */
#findings .pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: calc(24 * var(--u));
}
#findings .pair .fd {
  display: flex;
  flex-direction: column;
  padding: calc(52 * var(--u)) calc(56 * var(--u)) calc(56 * var(--u));
}
#findings .pair .top {
  margin-bottom: auto;
}

@media (max-width: 1180px) and (min-width: 961px) {
  #findings .pair {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    row-gap: 16px;
  }
}
@media (max-width: 960px) {
  #findings .pa-panel {
    width: auto;
    margin: 36px 16px 0;
  }
  #findings .top + .gw,
  #findings .flead > .gw {
    margin-top: 24px;
  }
  #findings .fig {
    margin: 18px 0 0;
  }
  #findings .spread {
    row-gap: 16px;
  }
  #findings .spread .flead {
    grid-template-columns: minmax(0, 1fr);
    padding: 28px 20px 24px;
  }
  #findings .flead > .top,
  #findings .flead > :not(.top) {
    grid-column: 1;
    grid-row: auto;
  }
  #findings .pair {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    row-gap: 16px;
  }
  #findings .pair .fd {
    padding: 28px 20px 24px;
  }
  /* five stage names under five columns on a phone: a size smaller, so the longest word keeps clear of its neighbour */
  #findings .stk {
    --cg: 5px;
  }
  #findings .stk .cn {
    font-size: 11px;
    letter-spacing: -.02em;
  }
}
@media (prefers-reduced-motion: reduce) {
  #findings *,
  #findings *::before,
  #findings *::after {
    transition: none !important;
  }
}

/* ================= 6. CONTEXT CONFERENCE (version H) ================= */
.conf {
  position: relative;
  margin-top: 40px;
  padding: 120px 0 128px;
  overflow: clip;
}
.conf .c26-swirl {
  height: 100%;
}
/* two columns: the bridge, the wordmark, the line and the form on the left; the two sessions stacked on the right */
/* round 50 (Saloni, at 1920): the block kept the 1264px container while the page around it scales, so at 1920 its left
   edge sat at 360px against What's inside's 208. Now each side is the smaller of the container's inset and 208u: the
   same as before up to about 1440, What's inside's margin above that. */
@media (min-width: 961px) {
  /* round 51: the footer's text on the same left edge as the conference block */
  .conf-grid.mr-container,
  .site-foot > .mr-container {
    max-width: none;
    margin: 0;
    --ci: min(max(32px, calc((100% - 1264px) / 2 + 32px)), calc(208 * var(--u)));
    padding-left: var(--ci);
    padding-right: var(--ci);
  }
}
.conf-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: 1fr 1fr;
  column-gap: 56px;
  row-gap: 0;
  align-items: start;
  text-align: left;
}
/* the left column is one block, centred against the cards: the copy sits on the middle line, the form just under it */
.conf-l {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  padding-right: 24px;
}
.conf-r {
  grid-column: 2;
  grid-row: 1 / 3;
}
.conf-grid .conf-cta {
  grid-column: 1;
  grid-row: 2;
  margin-top: 40px;
}
/* the left column reads top down: the conference's identity small (wordmark, its line, when), then one headline,
   one sentence, the form */
.conf-id {
  margin: 0 0 44px;
}
/* round 30: the wordmark and the date line a step larger (were 150-172px and 13u), so the date reads */
.conf .wm {
  width: clamp(170px, 13vw, 204px);
  height: auto;
}
.conf-meta {
  margin: 12px 0 0;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: max(13px, calc(16 * var(--u)));
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--peri-deep);
}
.conf h2 {
  margin: 0;
  font-size: var(--t-48);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -.02em;
  max-width: 13em;
  text-wrap: pretty;
}
.conf-lede {
  margin: 18px 0 0;
  font-size: var(--t-20);
  line-height: 1.55;
  color: var(--slate);
  max-width: 30em;
  text-wrap: pretty;
}
/* the featured pair (scratch D): a label and the full agenda above two cards side by side, no rail, and the
   day's faces with the agenda again beneath, so two sessions read as a sample of the day */
.conf-feat {
  width: 100%;
  margin: 0;
  text-align: left;
}
.feat-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.feat-head .k {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-weight: 700;
  font-size: var(--t-13);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--peri-deep);
}
.more-link {
  font-size: var(--t-16);
  font-weight: 600;
  color: var(--persian);
  text-decoration: none;
  white-space: nowrap;
}
.more-link:hover {
  text-decoration: underline;
}
/* the featured sessions: scratch session-cards K (2026-10-15). Title first; each speaker a square photo exactly as tall
   as the name, title and logo beside it (fitK sets --ph); the agenda's format label and the time share the foot */
.k-list {
  display: grid;
  gap: 16px;
}
.sc-k {
  position: relative;
  margin: 0;
  padding: 26px 28px 22px;
  border-radius: 12px;
  border: 1.5px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box, var(--edge) border-box;
  transition: transform .42s var(--ease-settle), box-shadow .42s
    cubic-bezier(0.65, 0, 0.35, 1);
}
.sc-k:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(37, 37, 48, 0.07);
}
.sc-title {
  margin: 0;
  font-family: "Funnel Display", sans-serif;
  font-size: max(19px, calc(28 * var(--u)));
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--ink);
  text-wrap: balance;
}
.k-spk {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 20px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.k-spk.one {
  grid-template-columns: minmax(0, 1fr);
}
/* small laptops: the session cards are too narrow for two speakers a line, so names would break; one a line */
@media (min-width: 961px) and (max-width: 1199px) {
  .k-spk {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
}
.k-spk li {
  display: grid;
  grid-template-columns: calc(var(--ph, 84px) * 0.8) minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  column-gap: 14px;
}
.k-spk .pic {
  grid-row: 1 / 4;
  width: calc(var(--ph, 84px) * 0.8);
  height: var(--ph, 84px);
  border-radius: 8px;
  overflow: hidden;
  background: #f4f4fd;
} /* blue 50 */
.k-spk .pic img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
}
.k-spk .nm,
.k-spk .ttl,
.k-spk .lg {
  grid-column: 2;
}
.k-spk .nm {
  font-size: var(--t-16);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}
.k-spk .ttl {
  margin-top: 2px;
  font: 400 var(--t-13) / 1.4 Inter, sans-serif;
  color: var(--slate);
  text-wrap: pretty;
}
.k-spk .lg {
  display: flex;
  align-items: flex-end;
  height: calc(34 * max(.74px, var(--u)));
  margin-top: 4px;
}
.k-spk .co {
  display: block;
  width: auto;
  height: calc(var(--lh) * max(.74px, var(--u)));
}
.sc-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin: 22px 0 0;
  padding-top: 14px;
  border-top: 1px solid #e6e6f0;
}
.sc-kind {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: var(--t-13);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--peri-deep);
}
.sc-time {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: var(--t-13);
  letter-spacing: .06em;
  color: var(--slate);
  white-space: nowrap;
}
.sc-time::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(61deg, #5f97f6, #fd8550);
}
/* the card (scratch H): the who-answered outline, a two-temperature bar down the left, the time and company as one kicker, the glyph small in periwinkle */
.tl-card {
  position: relative;
  margin: 0;
  padding: 26px 28px 26px 34px;
  min-height: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1.5px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box, var(--edge) border-box;
  transition: transform .42s var(--ease-settle), box-shadow .42s
    cubic-bezier(0.65, 0, 0.35, 1);
}
.tl-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22px;
  bottom: 22px;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(180deg, #5f97f6, #fd8550);
}
.tl-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(37, 37, 48, 0.07);
}
.kick {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 10px;
  margin: 0 0 12px;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: var(--t-13);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--peri-deep);
}
.kick .t {
  color: var(--ink);
}
.tl-title {
  position: relative;
  z-index: 1;
  margin: 0 0 14px;
  padding-right: 70px;
  font-size: var(--t-24);
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -.02em;
}
/* who is speaking, and where they are from (review 2026-10-14: names and logos in place of the descriptions) */
.tl-spk {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: max-content max-content;
  align-items: center;
  gap: 12px 18px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}
.tl-spk li {
  display: contents;
}
.tl-spk span {
  font-size: var(--t-16);
  font-weight: 600;
  color: var(--ink);
}
.tl-spk img {
  display: block;
  height: max(13px, calc(17 * var(--u)));
  width: auto;
  opacity: 0.85;
}
.tl-spk img.wd {
  height: max(19px, calc(25 * var(--u)));
  margin: -3px 0;
}
.tl-spk img.at {
  height: max(15px, calc(19 * var(--u)));
}
.tl-who {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
}
.tl-sp {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--t-16);
  font-weight: 500;
  color: var(--ink);
}
.tl-sp img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 1px #e6e6f0;
}
.faces3 {
  display: flex;
  padding-left: 8px;
}
.faces3 img {
  margin-left: -8px;
  box-shadow: 0 0 0 2px #fff;
}
.tl-desc {
  position: relative;
  z-index: 1;
  margin: 16px 0 0;
  font-size: var(--t-20);
  line-height: 1.55;
  color: var(--slate);
  max-width: 52ch;
}
.tl-glyph {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 56px;
  height: 56px;
  color: var(--peri);
  opacity: 0.75;
  z-index: 1;
}
.conf-cta {
  margin-top: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}
/* the conference form is the hero's form, to the pixel */
.cf {
  gap: calc(12 * var(--u));
  max-width: none;
}
.cf input {
  flex: none;
  width: calc(352 * var(--u));
  min-width: 220px;
  height: max(48px, calc(58 * var(--u)));
  padding: 0 calc(20 * var(--u));
  font-size: var(--t-20);
}
.cf .mr-btn {
  min-width: calc(200 * var(--u));
  height: max(48px, calc(58 * var(--u)));
  padding: 0 calc(22 * var(--u));
  font-size: var(--t-20);
}
.cgate .msg {
  text-align: left;
}
.count {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: var(--t-13);
  color: var(--ink);
}
.count:empty {
  display: none;
}
.count .l {
  font-family: "Funnel Display", sans-serif;
  font-weight: 700;
  font-size: var(--t-13);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--slate);
  margin-right: 8px;
}
.count .u {
  color: var(--slate);
  margin-right: 5px;
}

/* Footer */
/* as on the thank-you page: the credits run wider so they take fewer lines, and the padding is tighter */
.site-foot {
  padding: 40px 0 72px;
  background: #f8f8fb;
  font-size: var(--t-13);
  color: var(--slate);
}
.credits {
  display: grid;
  gap: 8px;
  max-width: 150ch;
  font-size: var(--t-13);
}
.credits b {
  color: var(--ink);
  font-weight: 600;
}
.copyline {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 20px;
}
.copyline img {
  height: 16px;
  width: auto;
}

/* Reveal */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s var(--ease-settle);
  transition-delay: var(--rd, 0s);
}
.js .reveal.in {
  opacity: 1;
  transform: none;
}

/* Sticky CTA: secondary while the conference is on screen, so Save Your Spot leads */
.stickybar {
  position: fixed;
  left: 50%;
  bottom: 16px;
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid #e6e6f0;
  border-radius: 14px;
  padding: 8px;
  box-shadow: 0 2px 5px rgba(37, 37, 48, 0.04), 0 22px 52px
    rgba(37, 37, 48, 0.07);
  transform: translate(-50%, 160%);
  transition: transform .45s var(--ease-settle);
  max-width: calc(100% - 32px);
}
.stickybar.show {
  transform: translate(-50%, 0);
}
/* the outline: a hairline with a short run of the CTA's two temperatures travelling round it, so the bar catches
   the eye without shouting; it rests while the conference is on screen, and holds still for reduced motion */
@property --sb-a {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
.stickybar {
  border: 2px solid transparent;
  background: linear-gradient(
      rgba(255, 255, 255, 0.97),
      rgba(255, 255, 255, 0.97)
    )
    padding-box,
    conic-gradient(
      from var(--sb-a),
      #e6e6f0 0turn,
      #e6e6f0 .5turn,
      #8daef3 .7turn,
      #f7a695 .86turn,
      #e6e6f0 1turn
    )
    border-box;
  animation: sb-run 4.5s linear infinite;
}
@keyframes sb-run {
  to {
    --sb-a: 360deg;
  }
}
.stickybar.quiet,
.stickybar:not(.show) {
  animation-play-state: paused;
}
.sb-gate {
  position: relative;
}
.sb-form {
  display: flex;
  gap: 8px;
  max-width: none;
}
.sb-form input {
  flex: none;
  width: 240px;
  height: 44px;
  padding: 0 14px;
  font-size: 15px;
}
.sb-gate .msg {
  position: absolute;
  left: 0;
  bottom: calc(100% + 14px);
  width: max-content;
  max-width: min(420px, 80vw);
  margin: 0;
  padding: 8px 12px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(37, 37, 48, 0.12);
}
.stickybar img {
  height: 22px;
  width: auto;
  flex: none;
}
.sb-text {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.stickybar .mr-btn {
  height: 44px;
  min-width: 0;
  padding: 0 16px;
  font-size: 15px;
}
.stickybar.quiet .mr-btn {
  background: #fff;
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px #e6e6f0;
  --ember: 0;
}
.stickybar.quiet .mr-btn:hover {
  box-shadow: inset 0 0 0 1.5px var(--c26-periwinkle);
}
.stickybar.quiet .mr-btn .fx {
  display: none;
}

@media (max-width: 960px) {
  .frame {
    width: 100%;
  }
  .mr-container {
    padding: 0 24px;
  }
  /* hero: the fan's feet at the top, the lockup, the copy and the form, the report below them. Frame one hangs
     the fan to 250 with the lockup 200 lower; the rest lifts both by 190 */
  .hero {
    --rise: -190px;
    padding-top: 180px;
    padding-bottom: 8px;
  } /* round 48: 12px more above the eyebrow (44px under the lockup, was 32) */
  .hero-band {
    height: 300px;
  }
  .bk-stage {
    top: -10px;
    height: 260px;
    perspective: 2400px;
  }
  .bk-wing {
    left: -50vw;
    width: 100vw;
  }
  .lockup {
    top: 92px;
    height: 44px;
    padding: 0 16px;
  }
  .js .hero.is-low .lockup {
    transform: translateY(200px);
  }
  .lk-mit {
    height: 44px;
  }
  .lk-assoc {
    font-size: 11px;
    gap: 7px;
  }
  .lk-assoc img {
    height: 16px;
  }
  .js .hero.card-hidden .hc-copy > *,
  .js .hero.card-hidden .hc-book {
    transform: translateY(16px);
  }
  .hero-card {
    width: auto;
    min-height: 0;
    margin: 0 16px;
  }
  .hc-copy {
    width: auto;
    padding: 0;
  }
  .hero h1 {
    max-width: none;
    font-size: 32px;
  }
  .lede {
    max-width: none;
    font-size: 16px;
    margin-top: 16px;
  }
  .hero .msg,
  .hero .thanks,
  .wc-senior > div > p,
  .shead h2,
  .shead .sub,
  .fd-say,
  .fd-quote,
  .in-list,
  .in-lede {
    max-width: none;
  }
  .shead h2 {
    margin-top: 10px;
    padding: 0 16px;
  }
  .shead .sub {
    margin-top: 12px;
    padding: 0 16px;
  }
  .hero .gate {
    margin-top: 26px;
  }
  .hero .signup {
    flex-direction: column;
    gap: 13px;
  } /* round 48: was 16 */
  /* stacked forms: the field's text centred, like the button under it */
  .hero .signup input,
  .inside .signup input,
  .cf input {
    padding: 0 16px;
    text-align: center;
  }
  .hero .signup input,
  .hero .signup .mr-btn,
  .inside .signup input,
  .inside .signup .mr-btn,
  .cf input,
  .cf .mr-btn {
    width: 100%;
    height: 54px;
    font-size: 16px;
  }
  /* the book is the left 59% of its image (the rest is shadow), its middle 30% across: centre that on the page */
  .hc-book {
    --bw: min(76%, 420px);
    position: relative;
    left: auto;
    top: auto;
    width: var(--bw);
    margin: 24px 0 0 calc(50% - 0.3 * var(--bw));
  } /* capped for tablets */
  /* who answered: one column; the map keeps its proportions */
  .sec-who {
    padding-top: 72px;
  }
  /* touch: the two text links get a 44px tap area without moving */
  .wc-int-l a,
  .more-link {
    display: inline-block;
    padding: 12px 0;
    margin: -12px 0;
  }
  .who-grid {
    width: auto;
    margin: 36px 16px 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    gap: 12px;
  }
  .wc-senior,
  .wc-regions,
  .wc-rev,
  .wc-ind {
    grid-column: auto;
    grid-row: auto;
  }
  .wc-regions {
    min-height: 0;
  }
  .wc-regions {
    aspect-ratio: 463 / 380;
  }
  .map {
    --mw: 560;
    bottom: calc(26 * var(--c));
  }
  .wc-senior,
  .wc-rev {
    padding: 24px 24px 26px;
  }
  .wc-senior {
    flex-direction: column;
    gap: 18px;
  }
  .wcard .wc-int-l {
    max-width: none;
  }
  .wc-ind {
    padding: 24px;
  }
  /* phones: the three rows flow as one cloud, so the pills pack instead of leaving one to a line */
  .ind-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
  }
  .ind-pills ul {
    display: contents;
  }
  .ind-pills li {
    order: var(--o);
    padding: 0 11px;
  } /* paired two to a line at 375 */
  .gtext {
    font-size: 30px;
  }
  .wcard p {
    font-size: 16px;
    margin-top: 10px;
  }
  /* interviews: one card a row, each scaling as a unit */
  .sec-xp {
    padding-top: 96px;
  }
  .xp-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    margin: 36px 16px 0;
  }
  .xcard {
    border-radius: 14px;
  }
  .xc-tx {
    padding: 24px 22px 6px;
  }
  .xc-say {
    max-width: none;
  }
  /* the poll: each card stacks its story, its chart, then its voice */
  .sec-poll {
    padding-top: 104px;
  }
  .fd-list {
    width: auto;
    gap: 20px;
    margin: 36px 16px 0;
  }
  .fcard {
    padding: 28px 22px 26px;
  }
  .fo-lead {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .fo-lead .fd-say,
  .fo-head .fd-lead,
  .fo-stat .l {
    max-width: none;
  }
  .fo-pair {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 28px;
  }
  .fd-quote {
    margin-top: 28px;
  }
  /* what's inside: the copy, then the glass room */
  .inside {
    height: auto;
    margin-top: 96px;
    overflow: visible;
  }
  .inside > .frame {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .in-sheet {
    display: none;
  }
  .in-copy {
    position: static;
    order: 1;
    width: auto;
    padding: 0 16px;
  }
  .inside .gate {
    margin-top: 28px;
  }
  .in-art {
    position: relative;
    order: 2;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3.4;
    margin-top: 36px;
  }
  .in-shot {
    left: -42%;
    top: -17%;
    width: 180%;
  } /* the book centred, under half the box wide, with room above it */
  .in-list li {
    font-size: 16px;
  }
  .inside .signup {
    flex-direction: column;
    gap: 13px;
  }
  .in-listwrap {
    padding-left: 22px;
  } /* clear of the moving line */
  .inside .signup input,
  .inside .signup .mr-btn,
  .hero .signup input {
    width: 100%;
  }
  .cf {
    flex-direction: column;
    width: 100%;
  }
  .conf-cta,
  .cgate {
    width: 100%;
  }
  .conf {
    padding: 96px 0 104px;
  }
  .conf-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    row-gap: 28px;
  }
  .conf-l {
    padding-top: 0;
    padding-right: 0;
    align-self: auto;
    text-align: center;
  }
  .conf .wm {
    margin: 0 auto;
  }
  .conf-meta {
    font-size: 13px;
    letter-spacing: .04em;
  } /* one line at 375 */
  .conf h2,
  .conf-lede {
    margin-left: auto;
    margin-right: auto;
  }
  .conf-cta {
    align-items: center;
  }
  .cf {
    gap: 13px;
  }
  .conf-grid {
    grid-template-rows: none;
    row-gap: 28px;
  }
  .conf-grid .conf-cta {
    margin-top: 0;
  }
  .conf-l,
  .conf-r,
  .conf-grid .conf-cta {
    grid-column: 1;
    grid-row: auto;
  }
  .sc-k {
    padding: 22px 20px 18px;
  }
  .k-spk {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
  .sc-title {
    font-size: 20px;
  }
  .tl-title {
    padding-right: 56px;
  }
  .tl-glyph {
    top: 14px;
    right: 14px;
    width: 44px;
    height: 44px;
  }
}
/* tablets: two columns for who answered, so the map keeps a sane size */
@media (min-width: 640px) and (max-width: 960px) {
  .who-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .map {
    --mw: 440;
    bottom: calc(30 * var(--c));
  } /* the two-column card is narrow: the desktop map size, whole */
  .wc-senior {
    grid-column: 1 / 3;
    flex-direction: row;
  }
  .wc-regions {
    grid-column: 2;
    grid-row: 2;
  }
  .wc-rev {
    grid-column: 1;
    grid-row: 2;
  }
  .wc-ind {
    grid-column: 1 / 3;
    grid-row: 3;
  }
  .xp-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
@media (max-width: 560px) {
  .mr-container {
    padding: 0 16px;
  }
  .signup {
    flex-direction: column;
  }
  .signup input {
    flex: none;
  }
  .signup .mr-btn {
    width: 100%;
  }
  .conf h2 {
    text-wrap: balance;
  }
  .sb-text {
    display: none;
  }
  .stickybar img {
    display: none;
  }
  .stickybar {
    left: 16px;
    right: 16px;
    padding: 6px;
    transform: translate(0, 160%);
    max-width: none;
  }
  .stickybar.show {
    transform: none;
  }
  .sb-gate {
    flex: 1;
    min-width: 0;
  }
  .stickybar .sb-form {
    flex-direction: row;
    width: 100%;
  }
  .stickybar .sb-form input {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    height: 44px;
    font-size: 16px;
  }
  .stickybar .sb-form .mr-btn {
    flex: none;
    width: auto;
    height: 44px;
    padding: 0 14px;
    font-size: 15px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
  .js .hero .lockup,
  .js .hero .hc-copy > *,
  .js .hero .hc-book {
    transform: none !important;
    opacity: 1 !important;
  }
  .js .hero .hero-band {
    transform: translateY(var(--rise)) !important;
  }
  .js .hero .lk-mit {
    scale: 1 !important;
  }
  .js .reveal {
    opacity: 1;
    transform: none;
  }
  .js .xcard .xc-pane,
  .js .wc-senior .face,
  .js .sec-who .gtext {
    opacity: 1;
    transform: none;
  }
  .mq-track {
    transform: none;
    width: auto;
  }
  .mq-track ul[aria-hidden] {
    display: none;
  }
  .marquee ul {
    flex-wrap: wrap;
    row-gap: 8px;
  }
}

/* ---- atlan.com's layout and global stylesheet. The page sits inside GenPageLayout's div > main#main-content, and the
   site's stylesheets style bare elements the prototype left to the browser. These rules put the prototype's
   assumptions back for this page only (the file loads on no other page). ---- */
/* the prototype's body type: a site rule recolours body, and the global barrel sets Inter on every div/p/span */
#main-content {
  color: var(--ink);
  font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
}
/* main's inline overflow-x: hidden would make it a scroll container (overflow-y computes to auto); the prototype's body
   only clipped sideways, so clip here too */
#main-content {
  overflow-x: clip !important;
}