/* ScyAI — hero
   Figma: ScyAI Website + ID, frame 557:2081 (1408 × 790)
   Spec values below are the raw Figma numbers, kept as custom properties. */

:root {
  --frame-w: 1408px;   /* design frame width */
  --gutter: 209px;     /* content inset in the design */
  --container: 990px;  /* 1408 - 2 × 209 */
  --page-pad: 24px;

  /* Full-height hairlines follow the shared content column. */
  --frame-line: rgba(140, 140, 140, .13);   /* the page frame's side strokes */
  --frame-gut: clamp(24px, 3.5vw, 56px);   /* text keeps this clear of the strokes */

  --ink: #1f1f1f;
  --orange: #ff7a00;    /* the accent: drift, flags — one orange everywhere */
  --ask-blue: #0a6cff;  /* the ask field's accent: caret + send orb */
  --white: #fff;
  --accent: #00e0ef;
  --surface: #f5f5f7;   /* the policy-audit panel */

  --ease-out-cubic: cubic-bezier(.215, .61, .355, 1);
  --ease-out-quint: cubic-bezier(.23, 1, .32, 1);

  /* The two black bands ("a flawed system", "the consequences") are the same
     Figma frame: 1510 wide, padding 128 / 108, 1294 content column. */
  --band-pad-y: 128px;
  --band-pad-x: 24px;
  --band-inner: 1440px;
  --band-air: clamp(80px, 16vh, 200px);   /* white air after the last band. The
                                             hero runs straight into the first
                                             one and the two bands butt together,
                                             so this is the only gap. */
}

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

/* readable by AT, invisible on screen */
.u-hide {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;   /* the nowrap text must not widen the page */
  clip-path: inset(50%);
  white-space: nowrap;
}

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

/* The page frame: every section is a padded wrapper; inside it, .frame caps
   the content at the site max-width and draws the side strokes. */
.frame {
  max-width: calc(var(--band-inner) + 2px);   /* account for the frame borders */
  margin-inline: auto;
  border-inline: 1px solid var(--frame-line);
}

@media (max-width: 900px) {
  :root { --band-pad-x: 0px; }
  .frame { border-inline: 0; }
  .hiw-scene--grid { overflow: clip; }
}

.hero > .frame {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  min-height: 0;
}

.stakes > .frame,
.band > .frame { padding-block: var(--band-pad-y); }

/* Text columns keep clear of the strokes; visuals may still run to them. */
.stakes__inner,
.band__inner,
.model__head,
.biz__copy { padding-inline: var(--frame-gut); }
.model > .frame {
  padding-block: 0 100px;
  border-inline: 0;
}
/* the how-it-works band brings its own 128px above; no extra foot on the twin */
#model > .frame { padding-bottom: 0; }
.stories > .frame {
  max-width: var(--band-inner);
  padding-block: var(--band-pad-y);
  border: 0;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--white);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--page-pad);
}

/* The house lede voice: one block, ink opening, dim continuation.
   Components add posture only — measure, colour, alignment. */
.lede {
  margin: 0;
  max-width: 560px;
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: -.6px;
  color: rgba(0, 0, 0, .85);
  text-wrap: pretty;
}

.lede span { color: rgba(0, 0, 0, .35); }

.lede strong {
  color: rgba(0, 0, 0, .85);
  font-weight: inherit;   /* colour shift, not weight — house style */
}

/* ---------------------------------------------------------------- hero */

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  padding-inline: var(--band-pad-x);
  min-height: 790px;
  height: 100svh;
  max-height: 940px;
  overflow: hidden;
  color: var(--white);
  text-align: center;

  /* Ash plume over a ridge — the whole hero is the photograph. */
  background: #17181a url(assets/hero-ridge.webp) center / cover no-repeat;
}

/* Scrim: the sky burns out top-right and the plume is mid-tone behind the
   headline, so the type needs its own ground. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10, 10, 12, .5) 0%, rgba(10, 10, 12, 0) 24%),
    radial-gradient(58% 42% at 50% 44%, rgba(10, 10, 12, .38), rgba(10, 10, 12, 0) 72%);
}

/* -------------------------------------------------------- navigation 01 */

.navigation-01-header {
  --font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --ease-out-quad: cubic-bezier(.25, .46, .45, .94);
  --ease-out-cubic: cubic-bezier(.215, .61, .355, 1);
  --ease-dropdown: linear(0, .005, .02 2.1%, .081 4.7%, .467 15.7%, .563, .645, .717, .778 28.5%, .829 32%, .872 35.8%, .909 40.1%, .938 44.9%, .961 50.3%, .977 56.5%, .987 63.6%, .994 72.3%, 1);
  --duration-dropdown: .5s;
  --nav-surface: rgba(14, 16, 24, .82);
  --nav-hover-surface: rgba(199, 199, 209, .06);
  --nav-pressed-surface: rgba(199, 199, 209, .12);
  --clr-light: var(--nav-surface);
  --corner-shape: superellipse(1.2);
  --box-shadow:
    0 0 0 1px rgba(51, 51, 51, .04),
    0 1px 1px .5px rgba(51, 51, 51, .04),
    0 3px 3px -1.5px rgba(51, 51, 51, .02),
    0 6px 6px -3px rgba(51, 51, 51, .04),
    0 12px 12px -6px rgba(51, 51, 51, .04),
    0 24px 24px -12px rgba(51, 51, 51, .04),
    0 48px 48px -24px rgba(51, 51, 51, .04);

  position: fixed;
  top: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  width: 100%;
  padding-block: 16px;
  overflow: visible;
  background: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, .08);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 450;

  --nav-hover-surface: rgba(14, 16, 24, .06);
  --nav-pressed-surface: rgba(14, 16, 24, .12);
}

.navigation-01-header.is-on-light {
  --nav-hover-surface: rgba(14, 16, 24, .06);
  --nav-pressed-surface: rgba(14, 16, 24, .12);
  color: var(--ink);
}

.navigation-01-header *,
.navigation-01-header *::before,
.navigation-01-header *::after { box-sizing: border-box; }

.navigation-01-header a { color: inherit; text-decoration: none; }
.navigation-01-header ul,
.navigation-01-header li { padding: 0; margin: 0; list-style: none; }

.navigation-01-header button {
  padding: 0;
  border: 0;
  color: inherit;
  font: inherit;
  background: none;
  cursor: pointer;
  touch-action: manipulation;
}

.navigation-01-header img,
.navigation-01-header svg { display: block; max-width: 100%; }

.navigation-01-header .cta {
  position: relative;
  grid-column: 3;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 6px 18px;
  color: var(--white);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  background-color: var(--ink);
  border-radius: 999px;   /* the one control left in the bar: a pill */
  transition: background-color 150ms ease, opacity 150ms ease, transform 150ms ease;
}

.navigation-01-header .cta:active { background-color: rgba(31, 31, 31, .82); transform: scale(.96); }

.navigation-01-header .header-shell {
  --header-shell-expanded-max: 1024px;
  position: relative;
  width: 100%;
  max-width: var(--header-shell-expanded-max);
}

.navigation-01-header .header-bar {
  display: none;
}

.navigation-01-header .header-content {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  min-height: 40px;
  padding: 6px 12px 6px 16px;
  overflow: visible;
}

.navigation-01-header :where(a, button):focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
  box-shadow: none;
}

.navigation-01-header .logo {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  width: auto;
  min-height: 40px;
  border-radius: 9999px;
}

.navigation-01-header .logo img {
  width: auto;
  height: 100%;
  transition: filter 180ms ease-out;
}

.navigation-01-header.is-on-light .logo img { filter: brightness(0); }

.navigation-01 {
  grid-column: 2;
  justify-self: center;
  position: relative;
  overflow: visible;
  padding-inline: 8px;
  border-radius: 9999px;
  corner-shape: var(--corner-shape);
}

.navigation-01 .nav-list {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  padding: 3px;
}

.navigation-01 .nav-flyout {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  left: -4px;
  z-index: 10;
  visibility: hidden;
  pointer-events: none;
  color: white;
  transition: visibility 0ms linear 180ms;
}

.navigation-01 .nav-flyout[hidden] { display: block; }
.navigation-01 .nav-flyout::before { content: ""; position: absolute; top: -12px; left: 0; width: 100%; height: 12px; pointer-events: none; }
.navigation-01 .nav-flyout.is-open { visibility: visible; pointer-events: auto; transition: visibility 0ms; }
.navigation-01 .nav-flyout.is-open::before { pointer-events: auto; }

.navigation-01 .nav-flyout.is-open .nav-flyout__bg,
.navigation-01 .nav-flyout.is-open .nav-flyout__viewport { --flyout-y: 0px; --flyout-scale: 1; }

.navigation-01 .nav-flyout.is-open .nav-flyout__bg {
  background-color: var(--clr-light);
  -webkit-backdrop-filter: blur(25px);
  backdrop-filter: blur(25px);
}

.navigation-01 .nav-flyout__bg,
.navigation-01 .nav-flyout__viewport {
  --flyout-y: -4px;
  --flyout-scale: .98;
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-radius: 16px;
  corner-shape: var(--corner-shape);
  transform: translate3d(var(--flyout-x, 0), var(--flyout-y), 0) scale(var(--flyout-scale));
  transition: transform var(--duration-dropdown) var(--ease-dropdown), width var(--duration-dropdown) var(--ease-dropdown), height var(--duration-dropdown) var(--ease-dropdown);
}

.navigation-01 .nav-flyout__bg {
  z-index: 0;
  background-color: transparent;
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
  box-shadow: var(--box-shadow);
  transition: transform var(--duration-dropdown) var(--ease-dropdown), width var(--duration-dropdown) var(--ease-dropdown), height var(--duration-dropdown) var(--ease-dropdown), background-color 180ms var(--ease-out-quad), -webkit-backdrop-filter 180ms var(--ease-out-quad), backdrop-filter 180ms var(--ease-out-quad);
}

.navigation-01 .nav-flyout__viewport { z-index: 1; overflow: hidden; }
.navigation-01 .nav-flyout__bg.is-instant,
.navigation-01 .nav-flyout__viewport.is-instant { transition: transform 0s, width 0s, height 0s; }

.navigation-01 .nav-flyout__panel {
  position: absolute;
  top: 0;
  left: 0;
  width: max-content;
  padding: 10px;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  transition: transform var(--duration-dropdown) var(--ease-dropdown), opacity 180ms var(--ease-out-quad);
}

.navigation-01 .nav-flyout__panel.is-active { opacity: 1; pointer-events: auto; transform: translate3d(0, 0, 0); }
.navigation-01 .nav-flyout__panel.is-leaving-left,
.navigation-01 .nav-flyout__panel.is-enter-left { opacity: 0; transform: translate3d(-200px, 0, 0); }
.navigation-01 .nav-flyout__panel.is-leaving-right,
.navigation-01 .nav-flyout__panel.is-enter-right { opacity: 0; transform: translate3d(200px, 0, 0); }

.navigation-01 .nav-dropdown__inner { position: relative; }
.navigation-01 .nav-dropdown__list { position: relative; z-index: 1; display: flex; flex-direction: column; }

.navigation-01 .nav-dropdown__pill {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: 13px;
  corner-shape: var(--corner-shape);
  opacity: 0;
  background: rgba(255, 255, 255, .09);
  transform: translate3d(0, 0, 0);
  transition: transform 200ms var(--ease-out-cubic), height 200ms var(--ease-out-cubic), opacity 150ms ease;
}

.navigation-01 .nav-dropdown__pill.is-instant { transition: opacity 150ms ease; }
.navigation-01 .nav-dropdown__pill.is-visible { opacity: 1; }

.navigation-01 .nav-dropdown__item {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  corner-shape: var(--corner-shape);
  text-align: start;
  background-color: transparent;
  transition: background-color 150ms ease;
}

.navigation-01 .nav-dropdown__title { font-weight: 500; line-height: 1.2; text-wrap: balance; }
.navigation-01 .nav-dropdown__description { color: rgba(255, 255, 255, .65); font-size: 12px; line-height: 1.4; text-wrap: pretty; }

.navigation-01 .nav-flyout__panel--mega .nav-dropdown__inner { display: flex; align-items: stretch; gap: 10px; width: 640px; }
.navigation-01 .nav-flyout__panel--mega .nav-dropdown__sidebar { position: relative; flex: 0 0 42%; padding: 0; }
.navigation-01 .nav-flyout__panel--mega .nav-dropdown__item { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }

.navigation-01 .nav-dropdown__preview {
  position: relative;
  flex: 1;
  min-height: 296px;
  margin: 0;
  overflow: hidden;
  border-radius: 8px;
  corner-shape: var(--corner-shape);
  background: #101113;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}

.navigation-01 .nav-dropdown__preview-panel { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity 200ms var(--ease-out-quad); }
.navigation-01 .nav-dropdown__preview-panel.is-active,
.navigation-01 .nav-dropdown__preview-panel.is-entering.is-entering-active { opacity: 1; }
.navigation-01 .nav-dropdown__preview-panel.is-entering { opacity: 0; }
.navigation-01 .nav-dropdown__placeholder { width: 100%; height: 100%; overflow: hidden; border-radius: 8px; corner-shape: var(--corner-shape); }
.navigation-01 .nav-dropdown__placeholder img { width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: .9; transform: scale(1.06); outline: 1px solid rgba(255, 255, 255, .08); outline-offset: -1px; transition: transform 600ms var(--ease-out-cubic); }
.navigation-01 .nav-dropdown__preview-panel.is-active img,
.navigation-01 .nav-dropdown__preview-panel.is-entering.is-entering-active img { transform: scale(1); }

.navigation-01 .nav-flyout__panel--simple .nav-dropdown__inner { width: max-content; min-width: 230px; padding: 0; }
.navigation-01 .nav-flyout__panel--simple .nav-dropdown__title { white-space: nowrap; }
.navigation-01 .nav-flyout__panel--featured .nav-dropdown__inner { display: flex; gap: 10px; padding: 0; }

.navigation-01 .nav-featured__card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 220px;
  height: 280px;
  padding: 16px;
  overflow: hidden;
  isolation: isolate;
  border-radius: 8px;
  corner-shape: var(--corner-shape);
  background: #18191b;
}

.navigation-01 .nav-featured__card::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(0, 0, 0, .9), rgba(0, 0, 0, .48) 38%, transparent 68%); }
.navigation-01 .nav-featured__image { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; opacity: .9; transform: scale(1.06); outline: 1px solid rgba(255, 255, 255, .08); outline-offset: -1px; transition: transform 500ms var(--ease-out-cubic); }
.navigation-01 .nav-featured__content { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 5px; }

.navigation-01 .nav-list > li > .nav-item { opacity: 1; transition: background-color 150ms ease, transform 150ms ease; }

.navigation-01 .nav-item {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 5px 12px;
  border-radius: 8px;
  white-space: nowrap;
  background-color: transparent;
}

.navigation-01 .nav-list > li > .nav-item:is(:focus-visible, [aria-expanded="true"]) { background-color: var(--nav-hover-surface); }
.navigation-01 .nav-list > li > .nav-item:active { background-color: var(--nav-pressed-surface); transform: scale(.96); }

.navigation-01 .nav-item:hover .nav-chevron,
.navigation-01 .nav-item:active .nav-chevron,
.navigation-01 .nav-item[aria-expanded="true"] .nav-chevron { transform: rotate(180deg); }
.navigation-01 .nav-chevron { width: 9px; height: 9px; transition: transform 150ms ease-out; }

.navigation-01 .nav-hover-bg {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: 9999px;
  corner-shape: var(--corner-shape);
  opacity: 0;
  background: rgba(255, 255, 255, .1);
  transform: translate3d(0, 0, 0);
  transition: transform 200ms var(--ease-out-cubic), width 200ms var(--ease-out-cubic), opacity 150ms ease;
}

.navigation-01 .nav-hover-bg.is-instant { transition: opacity 150ms ease; }
.navigation-01 .nav-hover-bg.is-visible { opacity: 1; }
.navigation-01 .nav-accordion { display: none; }

.navigation-01-header .nav-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  corner-shape: var(--corner-shape);
  color: inherit;
  transition: background-color 150ms ease, transform 150ms ease;
}

.navigation-01-header .nav-menu-toggle:active { background-color: var(--nav-pressed-surface); transform: scale(.96); }

.navigation-01-header .nav-menu-toggle__icon { position: relative; width: 16px; height: 10px; }
.navigation-01-header .nav-menu-toggle__icon span { position: absolute; top: 50%; left: 0; width: 100%; height: 1.5px; border-radius: 999px; background: currentColor; transform-origin: center; transition: transform .35s var(--ease-out-cubic), top .35s var(--ease-out-cubic); }
.navigation-01-header .nav-menu-toggle__icon span:first-child { transform: translateY(calc(-50% - 3.25px)); }
.navigation-01-header .nav-menu-toggle__icon span:last-child { transform: translateY(calc(-50% + 3.25px)); }
.navigation-01-header.is-mobile-nav-open .nav-menu-toggle__icon span:first-child { top: 50%; transform: translateY(-50%) rotate(45deg); }
.navigation-01-header.is-mobile-nav-open .nav-menu-toggle__icon span:last-child { top: 50%; transform: translateY(-50%) rotate(-45deg); }

@media (hover: hover) and (pointer: fine) {
  .navigation-01-header .logo:hover { opacity: .72; }
  .navigation-01-header .cta:hover { background-color: rgba(31, 31, 31, .86); }
  .navigation-01-header .nav-menu-toggle:hover,
  .navigation-01 .nav-list > li > .nav-item:hover { background-color: var(--nav-hover-surface); }
  .navigation-01 .nav-dropdown__item:hover,
  .navigation-01 .nav-dropdown__item:focus-visible { background-color: rgba(199, 199, 209, .06); }
  .navigation-01 .nav-featured__card:hover .nav-featured__image { transform: scale(1); }
}

@media (max-width: 900px) {
  .navigation-01-header { padding-inline: 16px; }
  .navigation-01-header .header-shell { max-width: none; }
  .navigation-01-header .header-content { display: flex; align-items: center; gap: 8px; padding-inline: 10px 8px; }
  .navigation-01-header .logo { flex: none; margin-inline-end: auto; }
  .navigation-01-header .cta { min-height: 36px; padding-inline: 14px; font-size: 12px; }
  .navigation-01-header .nav-menu-toggle { display: inline-flex; }

  .navigation-01 {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    left: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    grid-column: unset;
    justify-self: unset;
    max-height: calc(100dvh - 110px);
    padding: 10px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 16px;
    corner-shape: var(--corner-shape);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background-color: var(--clr-light);
    color: white;
    -webkit-backdrop-filter: blur(25px);
    backdrop-filter: blur(25px);
    box-shadow: var(--box-shadow);
    clip-path: inset(0 0 100% 0 round 16px);
    transition: clip-path .55s var(--ease-dropdown), opacity .25s var(--ease-out-quad), visibility 0s linear .55s;
  }

  .navigation-01 .nav-list { flex-direction: column; align-items: stretch; width: 100%; padding: 0; }
  .navigation-01 .nav-list > li { display: block; opacity: 1 !important; }
  .navigation-01 .nav-list > li > .nav-item { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 52px; padding: 12px 16px; border-radius: 8px; font-size: 16px; opacity: 1 !important; transition: background-color 150ms ease; }
  .navigation-01 .nav-list > li.is-expanded > .nav-item { background-color: rgba(199, 199, 209, .06); }
  .navigation-01 .nav-chevron { width: 11px; height: 11px; }
  .navigation-01 .nav-item:hover .nav-chevron,
  .navigation-01 .nav-item:active .nav-chevron { transform: none; }
  .navigation-01 .nav-item[aria-expanded="true"] .nav-chevron { transform: rotate(180deg); }
  .navigation-01 .nav-flyout,
  .navigation-01 .nav-flyout[hidden],
  .navigation-01 .nav-flyout__bg,
  .navigation-01 .nav-flyout__viewport { display: none; }
  .navigation-01 .nav-accordion { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease-dropdown); }
  .navigation-01 .nav-list > li.is-expanded > .nav-accordion { grid-template-rows: 1fr; }
  .navigation-01 .nav-accordion__inner { min-height: 0; overflow: hidden; }
  .navigation-01 .nav-flyout__panel.is-accordion { position: static; display: block; width: 100%; padding: 2px 0 10px; opacity: 1; pointer-events: auto; transform: none; transition: none; }
  .navigation-01 .nav-flyout__panel--mega .nav-dropdown__inner { width: 100%; flex-direction: column; }
  .navigation-01 .nav-flyout__panel--mega .nav-dropdown__sidebar { flex: none; width: 100%; padding: 0; }
  .navigation-01 .nav-flyout__panel--mega .nav-dropdown__preview { display: none; }
  .navigation-01 .nav-flyout__panel--simple .nav-dropdown__inner,
  .navigation-01 .nav-flyout__panel--featured .nav-dropdown__inner { width: 100%; padding: 0; }
  .navigation-01 .nav-flyout__panel--featured .nav-dropdown__inner { flex-direction: column; gap: 0; }
  .navigation-01 .nav-featured__card { width: 100%; height: auto; min-height: 52px; padding: 11px 16px; border-radius: 8px; background: transparent; transition: background-color 150ms ease; }
  .navigation-01 .nav-featured__card::after,
  .navigation-01 .nav-featured__image { display: none; }
  .navigation-01 .nav-featured__content { gap: 4px; }
  .navigation-01 .nav-dropdown__item { min-height: 48px; padding: 10px 16px; border-radius: 8px; transition: background-color 150ms ease; }
  .navigation-01-header.is-mobile-nav-open { z-index: 200; }
  .navigation-01-header.is-mobile-nav-open .navigation-01 { opacity: 1; visibility: visible; translate: 0 0; pointer-events: auto; clip-path: inset(0 0 0 0 round 16px); transition: clip-path .55s var(--ease-dropdown), opacity .2s var(--ease-out-quad), visibility 0s; }
}

@media (max-width: 460px) {
  .navigation-01-header { padding-inline: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .navigation-01-header *,
  .navigation-01-header *::before,
  .navigation-01-header *::after { scroll-behavior: auto; transition-duration: .001ms !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}

:where(#model, #atlas-title, #sim-title, #gaps-title, #rep-title, #how, #outcomes, #usecases, #usecase-renewal, #usecase-lender, #usecase-claim, #usecase-acquisition, #usecase-rate, #usecase-mitigation, #stories) { scroll-margin-top: 96px; }

/* ------------------------------------------------------------- problem */
.problem {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
.problem > .frame { width: 100%; padding: 96px 0 72px; border-inline: 0; }
.problem__title {
  max-width: 27ch;
  margin: 0 auto 64px;
  text-align: center;
  font-size: 48px;
  line-height: 56px;
  font-weight: 500;
  letter-spacing: -1.44px;
  text-wrap: balance;
}
/* three cards on the white band: limit, modelled loss, and the gap in blue */
.problem__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.problem__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  padding: 40px 36px 44px;
  border-radius: 20px;
  background: #f8f9fd;   /* the panel grey the other cards use */
  text-align: center;
}
.problem__icon { display: block; width: 36px; height: 36px; margin-bottom: 32px; color: var(--ink); }
.problem__icon svg { width: 100%; height: 100%; }
.problem__number, .problem__claim, .problem__note { margin: 0; }
.problem__number {
  font-size: 44px;
  line-height: 48px;
  letter-spacing: -1.76px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.problem__claim {
  max-width: 22ch;
  margin-top: 20px;
  font-size: 22px;
  line-height: 28px;
  font-weight: 500;
  letter-spacing: -.44px;
  text-wrap: balance;
}
.problem__note {
  max-width: 30ch;
  margin-top: 10px;
  font-size: 15px;
  line-height: 22px;
  color: #606066;
  text-wrap: pretty;
}
.problem__card--gap { background: var(--ask-blue); color: var(--white); }
.problem__card--gap .problem__icon { color: var(--white); }
.problem__card--gap .problem__note { color: rgba(255, 255, 255, .8); }
/* fine-print source under a stat, pushed to the card foot */
.problem__source {
  margin: auto 0 0;
  padding-top: 14px;
  font-size: 12px;
  line-height: 16px;
  color: #9a9aa0;
}
.problem__card--gap .problem__source { color: rgba(255, 255, 255, .55); }

@media (max-width: 900px) {
  .problem > .frame { padding-inline: var(--frame-gut); }
  .problem__cards { grid-template-columns: 1fr; }
  .problem__card { padding: 32px 28px 36px; }
}
@media (max-width: 700px) {
  .problem > .frame { padding-block: 96px 48px; }
  .problem__title { font-size: 26px; line-height: 33px; letter-spacing: -.78px; margin-bottom: 28px; }
  .problem__number { font-size: 36px; line-height: 40px; letter-spacing: -1.44px; }
}
@media (max-width: 360px) {
  .problem__number { font-size: 28px; line-height: 34px; }
}

/* Parked financing-risk cards. */
.stakes__trio .stake-card {
  position: relative;
  overflow: hidden;
  min-height: 216px;
  padding: 28px;
  padding-right: min(45%, 170px);   /* reserved zone: the chart lives here */
}


/* Reference grammar: numeral top-left, caption under it, the chart as a
   graphic anchored bottom-right. */
.stakes__trio .stake-card__fact,
.stakes__trio .stake-card__source {
  position: relative;
  z-index: 1;                       /* text always above the graphic */
}

/* Rings anchored past the corner, but scaled so most of the circle —
   including the empty gap — stays visible; a cropped full-side reads
   as 100%. */
.stakes__trio .stake-card__chart {
  position: absolute;
  margin: 0;
}

.stake-card__chart.stake-card__chart--ring {
  right: -11%;
  bottom: -16%;
  width: 56%;
  max-width: 180px;
  transform: rotate(24deg);
}

.stake-card__chart.stake-card__chart--bars {
  right: -7%;
  bottom: -16%;
  width: 62%;
  max-width: 200px;
}

.stake-card__chart.stake-card__chart--dots {
  right: 24px;
  bottom: 32px;
  width: 56%;
  max-width: 192px;
}

.stake-card__chart.stake-card__chart--pills {
  right: 24px;
  bottom: 24px;
  width: 42%;
  max-width: 136px;
}

.stakes__trio .stake-card__fact { color: rgba(0, 0, 0, .65); }

/* The banner's grammar, reused: grey track, orange drawn value */
.scard__track {
  fill: none;
  stroke: rgba(0, 0, 0, .08);
  stroke-width: 14;
}

.scard__arc {
  fill: none;
  stroke: var(--orange);
  stroke-width: 14;
  stroke-linecap: round;
}

/* 4/5: four lit, one waiting */
.scard__dots circle { fill: var(--orange); }
.scard__dots circle:nth-child(2) { opacity: .85; }
.scard__dots circle:nth-child(3) { opacity: .7; }
.scard__dots circle:nth-child(4) { opacity: .55; }
.scard__dots circle:last-child { fill: rgba(0, 0, 0, .12); opacity: 1; }

/* €4.2T: magnitude stacking up */
.scard__pills rect { fill: var(--orange); }
.scard__pills rect:nth-child(1) { opacity: .35; }
.scard__pills rect:nth-child(2) { opacity: .55; }
.scard__pills rect:nth-child(3) { opacity: .78; }
.scard__pills rect:nth-child(4) { opacity: 1; }

/* Bars tell the cycle: rising years orange (ramping), falling years grey */
.scard__bars rect { rx: 5px; fill: var(--orange); }
.scard__bars rect:nth-child(1)  { fill: rgba(0, 0, 0, .15); }
.scard__bars rect:nth-child(2)  { opacity: .35; }
.scard__bars rect:nth-child(3)  { opacity: .45; }
.scard__bars rect:nth-child(4)  { opacity: .55; }
.scard__bars rect:nth-child(5)  { opacity: .65; }
.scard__bars rect:nth-child(6)  { opacity: .78; }
.scard__bars rect:nth-child(7)  { opacity: .9; }
.scard__bars rect:nth-child(8)  { opacity: 1; }
.scard__bars rect:nth-child(9)  { fill: rgba(0, 0, 0, .22); }
.scard__bars rect:nth-child(10) { fill: rgba(0, 0, 0, .16); }



/* ------------------------------------------- generic bands (spine 5–7) */

.band {
  padding-inline: var(--band-pad-x);
  color: #000;
}

.band--grey  { background: var(--surface); }

#how { background: var(--white); }
#how > .frame { max-width: var(--band-inner); padding-block: 240px; border: 0; }   /* 240 above and below the story card */
@media (max-width: 700px) {
  #how > .frame { padding-block: 96px; }
  /* the twin's state line wraps at phone width instead of running off the card */
  .scan__line { font-size: 16px; line-height: 22px; letter-spacing: -.3px; }
  .scan__line .t-think { display: block; }
  .scan__line .t-think-sizer,
  .scan__line .t-think-text { white-space: normal; }
  /* the gap cards let their values wrap rather than clipping mid-word */
  .gapl .gap h4 { white-space: normal; overflow: visible; text-overflow: clip; }
  .gapl .gap header { height: auto; min-height: 48px; padding-block: 10px; flex-wrap: wrap; row-gap: 2px; }
  .gapl .gap dl > div { align-items: flex-start; flex-wrap: wrap; }
  .gapl .gap__v { display: block; white-space: normal; overflow: visible; text-overflow: clip; }
}
@media (min-width: 901px) {
  #how .band__inner { padding-inline: 0; }
}
#usecases { background: var(--white); }
#outcomes { background: #f8f9fd; }   /* the panel grey used across sections */
#usecases > .frame { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; border: 0; }
.band--white { background: var(--white); }

.band__inner {
  max-width: var(--band-inner);
  margin-inline: auto;
}

/* --------------------------------------------------- §5 · how it works
   One story, one card, four beats. hiw.js moves .is-active / aria-selected;
   everything visual hangs off those. The whole block arrives via appear.js. */

.hiw {
  text-align: center;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s var(--ease-out-quint), transform .7s var(--ease-out-quint);
}

.hiw.is-here { opacity: 1; transform: none; }

.hiw-story {
  --story-pad-y: 40px;
  margin-top: 40px;
  padding: var(--story-pad-y) 24px;
  border-radius: 24px;
  background: #f8f9fd;
  overflow: clip;
}

.hiw-story .hiw-stage { margin-top: 0; }

/* the gap findings — the Find gaps cards on an endless belt, both ends
   dissolving. The track holds two identical sets and scrolls exactly one
   set (half its height, plus half the gap between sets). */

.gapl {
  position: absolute;
  inset: 0;
  padding: 0 24px;
  overflow: hidden;
  text-align: left;
  mask: linear-gradient(transparent, #000 14%, #000 72%, transparent 96%) no-repeat;
  mask-size: 100% 100%;
}

.gapl__track {
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: gapl-belt 32s linear infinite;
}

.hiw-panel:not(.is-active) .gapl__track { animation-play-state: paused; }

@keyframes gapl-belt {
  to { translate: 0 calc(-50% - 4px); }
}

/* the cards slide in one after another with the beat, and slide back out
   in the same order as it leaves (only the visible six get a delay) */
.gapl .gap {
  opacity: 0;
  translate: 0 14px;
  transition: opacity .3s var(--ease-out-quint), translate .3s var(--ease-out-quint);
}
.gapl .gap:nth-child(1) { transition-delay: 0s; }
.gapl .gap:nth-child(2) { transition-delay: .05s; }
.gapl .gap:nth-child(3) { transition-delay: .1s; }
.gapl .gap:nth-child(4) { transition-delay: .15s; }
.gapl .gap:nth-child(5) { transition-delay: .2s; }
.gapl .gap:nth-child(6) { transition-delay: .25s; }

.hiw-panel.is-active .gapl .gap {
  opacity: 1;
  translate: 0 0;
  transition-duration: .5s;
}
.hiw-panel.is-active .gapl .gap:nth-child(1) { transition-delay: .15s; }
.hiw-panel.is-active .gapl .gap:nth-child(2) { transition-delay: .25s; }
.hiw-panel.is-active .gapl .gap:nth-child(3) { transition-delay: .35s; }
.hiw-panel.is-active .gapl .gap:nth-child(4) { transition-delay: .45s; }
.hiw-panel.is-active .gapl .gap:nth-child(5) { transition-delay: .55s; }
.hiw-panel.is-active .gapl .gap:nth-child(6) { transition-delay: .65s; }

@media (prefers-reduced-motion: reduce) {
  .gapl__track { animation: none; }
  .gapl .gap { transition: none; translate: none; }
}

/* --------------------------------------------- the renewal pack (§4) */

.pack {
  position: absolute;
  inset: 0;
}

.pack__page {
  position: absolute;
  left: 50%;
  top: 46%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 16px;
  border-radius: 10px;
  background: linear-gradient(180deg, #fff, #fafafa);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 16px 36px rgba(0, 0, 0, .08), 0 0 0 1px rgba(0, 0, 0, .03);

  /* the documents move WITH the pill: forward travel = rightward motion,
     so they start on the exit side and slide along the travel vector.
     Placement and rotation live in `transform`; `translate` is the entrance. */
  opacity: 0;
  translate: var(--exit-x, -36px) 0;
  filter: blur(6px);
  transition:
    opacity .5s var(--ease-out-quint),
    translate .5s var(--ease-out-quint),
    filter .5s var(--ease-out-quint);
}

.pack__page.is-in { opacity: 1; translate: 0 0; filter: none; }

.pack__page--l,
.pack__page--r {
  z-index: 1;
  width: 148px;
  height: 204px;
  padding-top: 44px;
}

.pack__page--l { transform: translate(-105%, -32%) rotate(-13deg); }
.pack__page--r { transform: translate(5%, -32%) rotate(13deg); }

.pack__page--c {
  z-index: 2;
  width: 172px;
  height: 228px;
  transform: translate(-50%, -50%);
  /* the sheet is an SVG path: rounded corners, the cut, a real stroke */
  background: none;
  box-shadow: none;
}

.pack__paper {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .05)) drop-shadow(0 12px 22px rgba(0, 0, 0, .08));
}

.pack__mark { display: block; width: 20px; height: 19px; margin-bottom: 47px; }

/* the flap folded over the cut corner */
.pack__fold {
  position: absolute;
  top: 0;
  right: 0;
  width: 30px;
  height: 30px;
  background: linear-gradient(225deg, transparent 50%, #f2f2f4 50.5%, #e7e7ea 100%);
  border-radius: 0 0 0 8px;
  filter: drop-shadow(-1px 1px 2px rgba(0, 0, 0, .08));
}

.pack__bar {
  flex: none;
  width: 118px;
  height: 12px;
  border-radius: 6px;
  background: rgba(0, 0, 0, .06);
}

.pack__bar--strong { width: 96px; background: rgba(0, 0, 0, .14); }
.pack__bar--wide { width: 124px; }
.pack__bar--short { width: 72px; }

.pack__page--l .pack__bar,
.pack__page--r .pack__bar { background: rgba(0, 0, 0, .045); }

/* the contents fill in once the pages are up */
.pack__page--c .pack__bar {
  opacity: 0;
  translate: 0 4px;
  transition: opacity .35s var(--ease-out-quint), translate .35s var(--ease-out-quint);
}

.pack.is-filled .pack__page--c .pack__bar { opacity: 1; translate: 0 0; }
.pack.is-filled .pack__page--c .pack__bar--wide { transition-delay: .09s; }
.pack.is-filled .pack__page--c .pack__bar--short { transition-delay: .18s; }

/* headline: the house lede, except the ink strong moves with the story */

/* the morphing demo card */

.hiw-stage {
  position: relative;
  max-width: 620px;
  height: 430px;
  margin: 36px auto 0;
}

/* no card chrome: each beat floats directly on the band */
/* Panels slide the way the tab pill travels: forward = out left, in from
   the right; backward mirrors. The resting (hidden) state is the EXIT
   target; the enter-from side is staged by .is-prep for one frame. */
.hiw-panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  text-align: left;

  /* direction only ever flips these variables — the transform is declared
     once, so .is-active always outranks the directional resting state */
  --slide: 36px;
  --exit-x: calc(var(--slide) * -1);
  --enter-x: var(--slide);
  opacity: 0;
  transform: translateX(var(--exit-x)) scale(.985);
  filter: blur(5px);
  pointer-events: none;
  transition:
    opacity .35s var(--ease-out-quint),
    transform .35s var(--ease-out-quint),
    filter .35s var(--ease-out-quint);
}

[data-hiw][data-dir="back"] .hiw-panel {
  --exit-x: var(--slide);
  --enter-x: calc(var(--slide) * -1);
}

.hiw-panel.is-prep {
  transform: translateX(var(--enter-x)) scale(.985);
  transition: none !important;
}

.hiw-panel.is-active {
  opacity: 1;
  transform: none;
  filter: none;
  pointer-events: auto;
  transition-delay: .04s;
}


/* same voice as the headline above the tabs, in its dim register */
.hiw-panel__caption {
  margin: 0 auto;
  max-width: 560px;
  padding: 20px 28px 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: -.6px;
  color: rgba(0, 0, 0, .35);
  text-align: center;
  text-wrap: balance;
}

/* ------------------------------------------------------- the mini scenes */

.hiw-scene {
  position: relative;
  flex: 1;
  user-select: none;
}

/* the upload modal — Figma 738:10001/10040/10087/10134, four states on
   one card. data-upl="1|2|3|4|5" (hiw.js) = empty, one, two, three files, busy. */

.upl {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: min(430px, calc(100% - 48px));
  border-radius: 16px;
  background: rgba(14, 16, 24, .92);
  color: #fff;
  text-align: left;
  box-shadow:
    0 0 0 1px rgba(51, 51, 51, .04),
    0 1px 1px .5px rgba(51, 51, 51, .04),
    0 6px 6px -3px rgba(51, 51, 51, .04),
    0 12px 12px -6px rgba(51, 51, 51, .04),
    0 24px 24px -12px rgba(51, 51, 51, .04),
    0 48px 48px -24px rgba(51, 51, 51, .04);
}

.upl__head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 16px 16px 12px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.15px;
  line-height: 20px;
}

.upl__text {
  margin: 4px 0 0;
  padding: 0 16px;
  font-size: 13px;
  line-height: 19px;
  letter-spacing: -.08px;
  color: rgba(255, 255, 255, .65);
}

.upl__link { text-decoration: underline; text-underline-position: from-font; }

.upl__zone {
  position: relative;
  height: 138px;   /* two rows; the list scrolls inside it for the third */
  margin: 18px 16px 0;
}

.upl__list {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;   /* hiw.js scrolls it to the row being dropped */
}

.upl__drop {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed rgba(199, 199, 209, .12);
  border-radius: 8px;
  background: rgba(255, 255, 255, .04);
  padding: 0 24px;
  font-size: 13px;
  letter-spacing: -.08px;
  color: #6e6e73;
  text-align: center;   /* stays centred when it wraps on phones */
  text-wrap: balance;
}

.upl__file {
  position: relative;
  flex: none;   /* keep full height; the list scrolls rather than squashing rows */
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 15px 8px 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .04);
  overflow: hidden;
}

.upl__preview {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 4px;
  background: rgba(110, 110, 115, .4);
}

.upl__preview img {
  width: 31px;
  height: 44px;
  border-radius: 1px;
  outline: .5px solid rgba(0, 0, 0, .08);
  rotate: -.38deg;
}

.upl__details { display: flex; flex-direction: column; gap: 6px; }
.upl__details strong { font-size: 13px; font-weight: 400; letter-spacing: -.08px; line-height: 14px; }
.upl__details em { font-style: normal; font-size: 13px; letter-spacing: -.08px; line-height: 14px; color: rgba(255, 255, 255, .65); }

/* each row carries its own upload: bar below, count at the right,
   the close only once its upload has finished */

/* sits on the "Document" line, in its exact style */
.upl__pct {
  position: absolute;
  right: 15px;
  bottom: 16px;
  font-size: 13px;
  line-height: 14px;
  letter-spacing: -.08px;
  color: rgba(255, 255, 255, .65);
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transition: opacity .25s ease;
}

.upl__close {
  position: absolute;
  right: 9px;
  top: 8px;
  opacity: 1;
  transition: opacity .25s ease;
}

.upl__bar {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4px;
  border-radius: 0 1px 1px 0;
  background: #0595f5;
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
  transition: opacity .25s ease;
}

.upl__file.is-loading .upl__pct,
.upl__file.is-done .upl__pct,
.upl__file.is-loading .upl__bar { opacity: 1; }
.upl__file.is-loading .upl__close { opacity: 0; }

.upl__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  padding: 12px 16px 16px;
  border-top: 1px solid rgba(199, 199, 209, .06);
}

.upl__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  padding: 0 24px;
  border-radius: 8px;
  font-size: 13px;
  letter-spacing: -.08px;
  color: #fff;
}

.upl__btn--back { background: rgba(255, 255, 255, .06); }

/* one button, two faces: Submit morphs into Uploading — content crossfades
   under a little blur, the width and background ride along */
.upl__btn--submit {
  display: grid;
  place-items: center;
  padding: 0;
  width: var(--w-idle, 84px);
  background: #6e6e73;
  opacity: .35;
  transition:
    width .35s var(--ease-out-quint),
    background-color .35s ease,
    opacity .35s ease,
    scale 150ms var(--ease-out-cubic);
}
.upl__btn--submit.is-pressed { scale: .94; }

.upl__btn-face {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: opacity .25s ease, filter .25s ease, scale .25s var(--ease-out-quint);
}

.upl__btn-face--busy {
  color: rgba(255, 255, 255, .65);
  opacity: 0;
  filter: blur(4px);
  scale: .9;
}

/* state switching: fade the zone contents, swap the footer verdict.
   1 = empty, 2 = SoV in, 3 = claims in too, 4 = uploading. hiw.js walks. */

/* documents arrive by scaling up — from a shape, never from nothing */
.upl__file {
  opacity: 0;
  visibility: hidden;
  transform: scale(.95);
  transition: opacity .35s var(--ease-out-quint), transform .35s var(--ease-out-quint), visibility 0s .35s;
}

.upl__drop {
  transition:
    opacity .3s ease, filter .3s ease, visibility 0s .3s,
    transform .25s var(--ease-out-quint),
    border-color .25s ease, background-color .25s ease, color .25s ease;
}

/* the cursor hovering a file over the zone */
.upl.is-over .upl__drop {
  border-color: rgba(5, 149, 245, .55);
  background: rgba(5, 149, 245, .08);
  color: rgba(255, 255, 255, .55);
}

/* the drop lands: the field takes the press, then leaves under blur */
.upl:not([data-upl="1"]) .upl__drop {
  opacity: 0;
  visibility: hidden;
  filter: blur(4px);
  transform: scale(.97);
}

.upl[data-upl="2"] .upl__file--1,
.upl[data-upl="3"] .upl__file--1,
.upl[data-upl="4"] .upl__file--1,
.upl[data-upl="5"] .upl__file--1,
.upl[data-upl="3"] .upl__file--2,
.upl[data-upl="4"] .upl__file--2,
.upl[data-upl="5"] .upl__file--2,
.upl[data-upl="4"] .upl__file--3,
.upl[data-upl="5"] .upl__file--3 {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .35s var(--ease-out-quint), transform .35s var(--ease-out-quint);
}


.upl[data-upl="2"] .upl__btn--submit,
.upl[data-upl="3"] .upl__btn--submit,
.upl[data-upl="4"] .upl__btn--submit { background: #0595f5; opacity: 1; }

.upl[data-upl="5"] .upl__btn--submit {
  background: rgba(255, 255, 255, .06);
  opacity: 1;
  width: var(--w-busy, 128px);
}

.upl[data-upl="5"] .upl__btn-face--idle { opacity: 0; filter: blur(4px); scale: .9; }
.upl[data-upl="5"] .upl__btn-face--busy { opacity: 1; filter: none; scale: 1; }

/* --------------------------------------------- the multiplayer cursor */

/* The cursor materialises rather than just fading: it grows from the
   arrow tip and sharpens as it arrives, and leaves the same way.
   `scale`/`filter` stay independent of `transform`, which the script
   owns for position. */
.cur {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  opacity: 0;
  scale: .6;
  filter: blur(6px);
  transform-origin: 4px 4px;   /* the arrow tip */
  pointer-events: none;
  will-change: transform;
  transition:
    opacity .3s var(--ease-out-quint),
    scale .3s var(--ease-out-quint),
    filter .3s var(--ease-out-quint);
}

.cur.is-on {
  opacity: 1;
  scale: 1;
  filter: none;
}

.cur__arrow {
  display: block;
  fill: var(--orange);
  stroke: #fff;
  stroke-width: 1.4;
  stroke-linejoin: round;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .35));
  transition: scale 120ms var(--ease-out-cubic);
}

/* picking a file or pressing a button: the pointer dips toward its tip —
   the tag and the carried chip hold steady */
.cur.is-pressing .cur__arrow {
  scale: .8;
  transform-origin: 2px 2px;
}

.cur__tag {
  position: absolute;
  left: 13px;
  top: 17px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--orange);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: -.11px;
  white-space: nowrap;
}

/* outer: position + the drop morph. inner: the chip itself, swinging
   from the cursor tip like it's actually held there */
.cur__ghost {
  position: absolute;
  left: 20px;
  top: 40px;
  opacity: 0;
  scale: .9;
  transition: opacity .25s var(--ease-out-quint), scale .25s var(--ease-out-quint);
}

.cur.is-carrying .cur__ghost { opacity: 1; scale: 1; }

.cur__ghostin {
  display: block;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--white);
  color: rgba(0, 0, 0, .75);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -.24px;
  white-space: nowrap;
  rotate: 3deg;
  transform-origin: -20px -40px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .12), 0 12px 32px rgba(0, 0, 0, .22);
}

@media (prefers-reduced-motion: no-preference) {
  .upl__btn-face--busy img { animation: upl-spin .8s linear infinite; }
}

@media (prefers-reduced-motion: reduce) {
  .cur { display: none; }
  .upl__btn--submit { transition: background-color .35s ease, opacity .35s ease; }
  .upl__btn-face { transition: opacity .25s ease; filter: none; scale: 1; }
}

@keyframes upl-spin { to { rotate: 360deg; } }

/* the scan queue — the twin builds itself, item after item. Above it, a
   grid field: one tile per subject, lit while its item is being scanned. */

/* the globe's field: inside the scene so it shares the line's centre,
   bleeding evenly past it (the story clips the rest) */
.sonar {
  position: absolute;
  z-index: 0;
  inset: -120px;
  overflow: hidden;
  pointer-events: none;
}

#hiw-panel-2 > .hiw-scene,
#hiw-panel-2 > .hiw-panel__caption {
  position: relative;
  z-index: 1;
}

/* the twin's globe, centred behind the line: it starts small and grows a
   step per finished state (--done, set by hiw.js). Drawn by orb.js into
   this echo of .tw__orb, fill/stroke inherited from the small orb. */
.sonar__globe {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 760px;
  height: 760px;
  translate: -50% -50%;
  scale: calc(.1 + var(--done, 0) * .125);   /* .1 on appear → .6 when ready */
  overflow: visible;
  opacity: .55;
  transition: scale .9s var(--ease-out-quint);
}

/* the echo is ~2.6x the orb: hairlines stay hairlines */
.sonar__globe path,
.sonar__globe circle { stroke-width: .45; }

/* its regions start absent and pop in from their own centres, a batch per
   finished state (hiw.js toggles .is-in); depth opacity stays orb.js's */
.sonar__globe path {
  transform-box: fill-box;
  transform-origin: center;
  scale: 0;
  transition: scale .7s var(--ease-out-quint);
}
.sonar__globe path.is-in { scale: 1; }

/* Transitions.dev — Thinking states. One line holds a state under a
   shimmer; hiw.js swaps lines (exit up, enter from below). The hidden
   sizer holds the longest state so the box never resizes mid-swap. */
:root {
  --think-swap: 150ms;
  --think-gap: 50ms;
  --think-distance: 8px;
  --think-blur: 2px;
  --think-shimmer: 2000ms;
  --think-base: #7c7c7c;
  --think-highlight: #0d0d0d;
  --think-ease: ease-in-out;
}

/* Transitions.dev — Icon swap. data-state="a" | "b" on .t-icon-swap; the
   matching .t-icon fades in, the other leaves with blur and scale. */
:root {
  --icon-swap-dur: 250ms;
  --icon-swap-blur: 2px;
  --icon-swap-start-scale: 0.25;
  --icon-swap-ease: ease-in-out;
}

.t-icon-swap {
  position: relative;
  display: inline-grid;
}
.t-icon-swap .t-icon {
  grid-area: 1 / 1;
  display: grid;
  place-items: center;
  transition:
    opacity   var(--icon-swap-dur) var(--icon-swap-ease),
    filter    var(--icon-swap-dur) var(--icon-swap-ease),
    transform var(--icon-swap-dur) var(--icon-swap-ease);
  will-change: opacity, filter, transform;
}
.t-icon-swap[data-state="a"] .t-icon[data-icon="a"],
.t-icon-swap[data-state="b"] .t-icon[data-icon="b"] {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
}
.t-icon-swap[data-state="a"] .t-icon[data-icon="b"],
.t-icon-swap[data-state="b"] .t-icon[data-icon="a"] {
  opacity: 0;
  filter: blur(var(--icon-swap-blur));
  transform: scale(var(--icon-swap-start-scale));
}

@media (prefers-reduced-motion: reduce) {
  .t-icon-swap .t-icon { transition: none !important; }
}

.t-think { position: relative; display: inline-block; text-align: left; }
.t-think-sizer { display: block; visibility: hidden; white-space: nowrap; }
.t-think-text {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: block;
  color: var(--think-base);
  white-space: nowrap;
  transform: translateY(0);
  filter: blur(0);
  opacity: 1;
  transition:
    transform var(--think-swap) var(--think-ease),
    filter var(--think-swap) var(--think-ease),
    opacity var(--think-swap) var(--think-ease),
    color .25s ease;
  will-change: transform, filter, opacity;
}
.t-think-text::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(90deg,
    transparent 0%, transparent 40%,
    var(--think-highlight) 50%,
    transparent 60%, transparent 100%);
  background-size: 400% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: t-think-shimmer var(--think-shimmer) linear infinite;
}
@keyframes t-think-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: 0% 0; }
}
.t-think-text.is-exit {
  transform: translateY(calc(var(--think-distance) * -1));
  filter: blur(var(--think-blur));
  opacity: 0;
}
.t-think-text.is-enter-start {
  transition: none;
  transform: translateY(var(--think-distance));
  filter: blur(var(--think-blur));
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .t-think-text { transition: none !important; transform: none !important; filter: none !important; }
  .t-think-text::before { display: none !important; }
}

.scan {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 24px;
}

/* the one line: a state under a shimmer, centred; Done settles it dark */
.scan__line {
  --think-base: rgba(0, 0, 0, .38);
  --think-highlight: #1b1b1b;
  margin: 0;
  text-align: center;
  font-size: 20px;
  line-height: 28px;
  font-weight: 500;
  letter-spacing: -.4px;
  text-wrap: balance;

  opacity: 0;
  translate: 0 8px;
  transition:
    opacity .35s var(--ease-out-quint),
    translate .35s var(--ease-out-quint);
}
.scan__line.is-on { opacity: 1; translate: 0 0; }
.scan__line .t-think { max-width: 100%; text-align: center; }
.scan__line.is-done .t-think-text { color: #1b1b1b; }
.scan__line.is-done .t-think-text::before { display: none; }



/* idle life, kept off for reduced motion */

@media (prefers-reduced-motion: no-preference) {
}

@keyframes hiw-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 122, 0, .35); }
  60%      { box-shadow: 0 0 0 6px rgba(255, 122, 0, 0); }
}

/* ------------------------------------------------------- §6 · outcomes */

/* Todoist-style stack: centered title, dim sub, three rounded cards */
.outcomes__title {
  margin: -.22em auto 0;   /* cap height, not line box, meets the band's top pad */
  max-width: 720px;
  font-size: 48px;
  font-weight: 500;
  line-height: 56px;
  letter-spacing: -1.44px;
  text-align: center;
  color: rgba(0, 0, 0, .85);
  text-wrap: balance;
}

.outcomes__sub {
  margin: 14px auto 0;
  max-width: 620px;
  font-size: 17px;
  line-height: 24px;
  letter-spacing: -.34px;
  text-align: center;
  color: rgba(0, 0, 0, .55);
  text-wrap: balance;
}

.outcards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 64px;
}

.outcard {
  padding: 40px 28px;
  border-radius: 24px;
  background: var(--white);
  text-align: center;
}

.outcard__orb {
  display: block;
  width: 72px;
  height: 72px;
  margin: 0 auto 22px;
  border-radius: 50%;
  outline: 1px solid rgba(0, 0, 0, .06);
  outline-offset: -1px;
}

.outcard__title {
  margin: 0;
  font-size: 17px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: -.34px;
  text-wrap: balance;
}

.outcard__body {
  max-width: 320px;
  margin: 10px auto 0;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -.28px;
  color: rgba(0, 0, 0, .55);
  text-wrap: pretty;
}

/* ------------------------------------------------------ §7 · use cases */

#usecases > .frame,
#usecases .band__inner { padding: 0; }

@media (max-width: 900px) {
  #usecases .uctiles,
  .computed__bento { margin-inline: var(--page-pad); }
}

@media (max-width: 600px) {
  #usecases .uctiles,
  .computed__bento { margin-inline: 12px; }
}

#usecases .lede {
  margin: 0 auto;
  max-width: none;
  padding: clamp(64px, 11vw, 128px) var(--frame-gut) 64px;
  font-size: 48px;
  line-height: 56px;
  letter-spacing: -1.44px;
  text-align: center;
}

/* two lines: the opening, then the dim continuation */
@media (min-width: 1000px) {
  #usecases .lede strong,
  #usecases .lede span { white-space: nowrap; }
}

/* the dim continuation drops to its own line under the opening */
#usecases .lede span { display: block; }

/* -------- tiles variant: six Figma "Recent projects" cards, no field -------- */

.uctiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0 0 16px;
  list-style: none;
}

/* the li is a stable grid slot; the card inside is what morphs to a modal */
.uctile {
  position: relative;
  min-width: 0;
  width: 100%;
  aspect-ratio: 16 / 9;   /* two rows + lede fit a laptop viewport */
  min-height: 280px;      /* room for a two-line caption over "Learn more" */
}

.uctile:not(.is-open) .uctile__head { padding-right: 44px; }

.uctile__card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px;
  border-radius: 24px;
  background: var(--surface);
  transition: border-radius 160ms var(--ease-out-quint);
}

/* Keep the live card visually identical to the transition overlay for its
   final frame, then ease it into the rounded resting card after handoff. */
.uctile.is-closing .uctile__card {
  border-radius: 12px;
}

.uctile__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.uctile__title {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -.32px;
  color: rgba(0, 0, 0, .85);
  text-wrap: balance;
}

/* Closed tiles read as a folder with its caption, rather than a header
   separated from the illustration. The open document keeps its title in
   the page letterhead via the existing .is-open rules below. */
.uctile:not(.is-open) .uctile__title {
  position: absolute;
  left: 16px;
  right: 16px;
  top: calc(50% + 58px);
  text-align: center;
}

.uctile__more {
  align-self: center;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: -.06px;
  color: rgba(0, 0, 0, .4);
  /* hidden at rest; rises, sharpens and fades in when the tile is hovered or focused */
  opacity: 0;
  translate: 0 8px;
  filter: blur(4px);
  transition: opacity 220ms var(--ease-out-quint), translate 220ms var(--ease-out-quint), filter 220ms var(--ease-out-quint);
}

.uctile:hover .uctile__more,
.uctile:has(.uctile__hit:focus-visible) .uctile__more {
  opacity: 1;
  translate: 0 0;
  filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
  .uctile__more { transition: opacity 220ms ease; translate: none; filter: none; }
}

/* whole card is the trigger; the u-hide span inside carries the name */
.uctile__hit {
  position: absolute;
  inset: 0;
  border: 0;
  border-radius: inherit;
  background: none;
  cursor: pointer;
}


.uctile__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 1;
  pointer-events: none;   /* ornament while closed; the hit button opens */
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .05);
  color: rgba(0, 0, 0, .6);
  cursor: pointer;
  transition: background-color 150ms ease, transform 160ms var(--ease-out-cubic);
}

.uctile__close::before {   /* 44px hit area on a 32px control */
  content: "";
  position: absolute;
  inset: -6px;
}

@media (hover: hover) and (pointer: fine) {
  .uctile__close:hover { background: rgba(0, 0, 0, .09); }
}

.uctile__close:active { transform: scale(.96); }

.uctile__close svg { transition: rotate 320ms var(--ease-out-quint); }
/* the plus grows a touch when the tile is hovered, so it reads as openable;
   a transition, not keyframes, so quick in-and-out hovers retarget cleanly */
@media (hover: hover) and (pointer: fine) {
  .uctile:not(.is-open):hover .uctile__close { transform: scale(1.12); background: rgba(0, 0, 0, .08); }
}

.uctile.is-open .uctile__close { pointer-events: auto; }
.uctile.is-open .uctile__close svg { rotate: 45deg; }

/* ---- open: the card morphs front and center as a modal; the folder
   shrinks into a left column and the write-up opens. Its grid slot stays
   behind, so nothing else reflows. */
/* ---- open: a mini A4 page. Portrait proportions, page margins, and the
   article's own whitespace at the foot — the card reads as a document,
   not a dialog. */
.uctile.is-open .uctile__card {
  position: fixed;
  inset: auto;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  z-index: 70;
  width: min(480px, calc(100vw - 40px));
  aspect-ratio: 210 / 297;
  max-height: min(88vh, 700px);
  overflow: auto;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  align-content: start;
  padding: 44px 44px 40px;   /* ~20mm page margins at this scale */
  border-radius: 12px;
}

/* the letterhead: the icon marks the page top on its own; the title
   opens the article below it */
.uctile.is-open .uctile__head {
  padding-top: 59px;   /* 39px icon + 20 air */
  padding-right: 34px;
}
.uctile.is-open .uctile__title { font-size: 20px; line-height: 25px; letter-spacing: -.4px; }
.uctile.is-open .uctile__more { display: none; }

/* the folder steps back to an icon on the title line, scaled from its
   top-left corner so it stays seated at the page's content origin */
.uctile.is-open .uctile__folder {
  left: 44px;
  top: 44px;
  translate: 0 0;
  scale: .35;
  transform-origin: 0 0;
}

/* The scrim stays OUT of the view transition: unnamed, it lives in the
   page layer, so the morphing card (a named group, always painted above
   the page) glides over the dim instead of through it — and its
   backdrop blur never gets re-rendered inside the transition overlay. */
.uctiles__scrim {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(0, 0, 0, .35);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 320ms ease, visibility 0s linear 320ms;
}

.uctiles__scrim.is-on {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 320ms ease, visibility 0s;
}

/* the tint is the scrim's; the blur lives on what sits behind the card, as
   a plain filter transition: a backdrop-filter on the scrim went to full
   strength on the first frame in Safari's view transition */
.uctile,
#usecases .lede,
#outcomes > .frame,
#stories > .frame { transition: filter 320ms ease; }
.uctiles.has-open .uctile:not(.is-open),
body:has(.uctiles.has-open) :is(#usecases .lede, #outcomes > .frame, #stories > .frame) { filter: blur(8px); }

.uctile__body { grid-column: 1; }

/* the page's footer CTA: the body fills the A4 whitespace and the pill
   pins to its foot, clear of the copy above */
.uctile.is-open .uctile__body {
  display: flex;
  flex-direction: column;
}

.uctile__body p:last-of-type { margin-bottom: 28px; }

.uctile__cta {
  margin-top: auto;
  align-self: center;
}

/* doubled class outweighs .btn's own rules, which come later in the file */
.btn.uctile__cta {
  appearance: none;
  border: 0;
  box-shadow: none;
  font-family: inherit;
  cursor: pointer;
  background: #000;   /* solid on the page; the hero's translucent plate
                         reads grey over white */
  font-size: 15px;    /* body scale — this is a page, not the hero */
  letter-spacing: -.3px;
}

.btn.uctile__cta:hover { background: rgba(0, 0, 0, .82); }

.uctile__cta-note {
  display: block;
  align-self: center;
  margin-top: 12px;
  font-size: 13px;
  line-height: 18px;
  letter-spacing: -.26px;
  color: rgba(0, 0, 0, .45);
  text-align: center;
}

.uctile__cta:focus-visible {
  outline: 2px solid #0071e3;   /* the dark hero's white ring vanishes here */
  outline-offset: 3px;
}

/* essay voice: a short thesis in ink, then grey paragraphs with a blank
   line's worth of air between them */
.uctile__body p {
  margin: 17px 0 0;
  max-width: 60ch;
  font-size: 15px;
  line-height: 23px;
  letter-spacing: -.3px;
  color: rgba(0, 0, 0, .65);
  text-wrap: pretty;
}

/* page to page (home ↔ article) the header morphs into its new width */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
.navigation-01-header { view-transition-name: site-header; }
.navigation-01-header .logo { view-transition-name: site-logo; }
.navigation-01-header .cta { view-transition-name: site-cta; }

/* until the frame has a margin of its own the stat cards keep the page
   gutter; the padding hands over to the margin without a jump */
@media (min-width: 901px) and (max-width: 1490px) {
  #problem > .frame { padding-inline: clamp(0px, (1490px - 100vw) / 2, var(--page-pad)); }
}

/* the showcase's closing curtains (driven by --close from appear.js):
   white, full height, wide enough to reach the content frame, with a
   24px inverted corner on the inner edge so the block ends rounded */
.model__block--portfolio { --close: 0; }
.model__block--portfolio::before,
.model__block--portfolio::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 30;
  width: calc(max(0px, (100% - var(--band-inner)) / 2) + 24px);
  pointer-events: none;
  will-change: transform;
}
.model__block--portfolio::before {
  left: 0;
  transform: translateX(calc(-100% * (1 - var(--close))));
  background:
    linear-gradient(#fff, #fff) 0 0 / calc(100% - 24px) 100% no-repeat,
    radial-gradient(circle at 100% 100%, transparent 23.5px, #fff 24.5px) 100% 0 / 24px 24px no-repeat,
    radial-gradient(circle at 100% 0, transparent 23.5px, #fff 24.5px) 100% 100% / 24px 24px no-repeat;
}
.model__block--portfolio::after {
  right: 0;
  transform: translateX(calc(100% * (1 - var(--close))));
  background:
    linear-gradient(#fff, #fff) 100% 0 / calc(100% - 24px) 100% no-repeat,
    radial-gradient(circle at 0 100%, transparent 23.5px, #fff 24.5px) 0 0 / 24px 24px no-repeat,
    radial-gradient(circle at 0 0, transparent 23.5px, #fff 24.5px) 0 100% / 24px 24px no-repeat;
}

/* the shared-layout morph: one timing across box motion AND crossfades —
   desynced defaults (250ms fades under a longer box morph) look smeared.
   Ease-out: the card leaps on click and settles, never lags it. */
::view-transition-group(*),
::view-transition-image-pair(*),
::view-transition-old(*),
::view-transition-new(*) {
  animation-duration: var(--uctile-320, 320ms);
  animation-timing-function: var(--ease-out-quint);
}

/* the groups carry the box morph (transform + size every frame) */
::view-transition-group(*) { will-change: transform; }

/* snapshots keep the box covered instead of stretching with the aspect
   change (UA default is width 100% / height auto → smear + overflow) */
::view-transition-old(*),
::view-transition-new(*) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

/* ---- the card is a container transform, not a crossfade. The card
   surface lives on the GROUP, so the one thing that visibly resizes is the
   card itself; the snapshots inside carry only content. Scaling them with
   the box (cover) zoomed the old card up 2× through the morph — a photo
   dissolve. Natural scale, anchored where the card's content anchors, and
   the growing box reveals instead of zooms. */
:root[data-uctile-morph] .uctile__card[style*="uctile-card"] {
  background: transparent;
  box-shadow: none;
  transition: none;
}

::view-transition-group(uctile-card),
::view-transition-group(uctile-card-prev) {
  background: var(--surface);
  border-radius: 12px;
  box-shadow: none;
}

}

::view-transition-image-pair(uctile-card),
::view-transition-image-pair(uctile-card-prev) {
  overflow: clip;
  border-radius: inherit;
}

::view-transition-old(uctile-card),
::view-transition-new(uctile-card),
::view-transition-old(uctile-card-prev),
::view-transition-new(uctile-card-prev) {
  object-fit: none;
  object-position: top left;
}

/* fade-through: the leaving layout gets out early, the arriving one settles
   in behind it — the mid-morph frame is mostly clean surface, so the eye
   reads one card changing shape rather than two layouts overlapping. */
::view-transition-old(uctile-card),
::view-transition-old(uctile-card-prev) {
  animation-duration: var(--uctile-120, 120ms);
  animation-timing-function: ease-out;
}

::view-transition-new(uctile-card),
::view-transition-new(uctile-card-prev) {
  animation-delay: var(--uctile-60, 60ms);
  animation-duration: var(--uctile-260, 260ms);
  animation-fill-mode: both;
}

/* the page behind doesn't move — never crossfade or smear it */
::view-transition-old(uctile-title),
::view-transition-old(uctile-title-prev) { display: none; }

::view-transition-new(uctile-title),
::view-transition-new(uctile-title-prev) {
  animation: none;
  mix-blend-mode: normal;
  object-fit: none;
  object-position: top left;
}

::view-transition-old(root),
::view-transition-new(root) { animation: none; }

/* the folder illustration at Figma scale: shell SVG, three papers, glass */
.uctile__folder {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 135px;
  height: 112px;
  translate: -50% -62%;
  filter: drop-shadow(0 .65px .33px rgba(0, 0, 0, .25)) drop-shadow(0 2.6px 3.25px rgba(0, 0, 0, .05));
}

.uctile__shell {
  position: absolute;
  inset: 0;
  width: 135px;
  height: 112px;
}

.uctile__paper {
  position: absolute;
  box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
}

.uctile__paper--y { left: 8px; top: 10px; width: 119px; height: 87px; background: #ffd900; rotate: -1.37deg; }
.uctile__paper--w { left: 9px; top: 16px; width: 118px; height: 82px; background: #fff; rotate: 1.38deg; }
.uctile__paper--t { left: 58px; top: 16px; width: 65px; height: 88px; background: #d6c583; rotate: -1.39deg; }

.uctile__glass {
  position: absolute;
  left: 0;
  top: 19px;
  width: 135px;
  height: 94px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow:
    0 -2.6px 13px rgba(0, 0, 0, .1),
    inset 0 .5px .5px rgba(0, 0, 0, .1),
    inset 0 1px .5px rgba(255, 255, 255, .3),
    inset 0 -3.25px 39px -13px rgba(0, 0, 0, .25);
}
/* the frost is a blurred copy of the papers clipped to the glass, under its
   tint: a backdrop-filter here stopped rendering in Safari once a tile had
   opened and closed under the page scrim. The crisp papers only show above
   the glass line. */
.uctile__papers { position: absolute; inset: 0; clip-path: inset(0 0 93px 0); }
.uctile__frost {
  position: absolute;
  left: 0;
  top: -19px;
  width: 135px;
  height: 112px;
  filter: blur(5px);
}
.uctile__glass::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(217, 217, 217, .5);
}

@media (prefers-reduced-motion: reduce) {
  .uctile__close svg { transition: none; }
  /* panels keep the fade, lose the travel */
  .hiw-panel,
  .hiw-panel.is-prep { transform: none; filter: none; transition: opacity .3s ease; }
  /* scan rows: fade stays, the rise and grow go */
  .scan__line { translate: none; }
  /* pack documents: fade stays, the slide and blur go */
  .pack__page { translate: none; filter: none; }
}

@media (max-width: 900px) {
  .band > .frame { padding-block: clamp(64px, 11vw, 128px); }
  .lede { font-size: 17px; line-height: 24px; letter-spacing: -.34px; }
  .outcards { grid-template-columns: 1fr; gap: 12px; margin-top: 44px; }
  .outcard { padding: 32px 24px; }
  .uctiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .uctile.is-open .uctile__card {
    width: calc(100vw - 32px);
    padding: 32px 28px;   /* full page margins would eat the measure here */
  }
  .uctile.is-open .uctile__folder { left: 28px; top: 32px; }
  .uctile.is-open .uctile__head { padding-top: 55px; }
  .uctile__cta { margin-top: 0; align-self: flex-start; }
}

@media (max-width: 600px) {
  .uctiles { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 700px) {
  .hiw-stage { height: 470px; }
}

/* -------------------------------------------------------------- stakes */

.stakes {
  padding-inline: var(--band-pad-x);
  background: var(--surface);
  color: #000;
}

.stakes__inner {
  max-width: var(--band-inner);
  margin-inline: auto;
}

.stakes__head {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 640px;
}

/* Chart cards: the flawed-system wedges, recoloured to ink, one per fact.
   The €4.2T card is a magnitude, not a share — the numeral is its chart. */
.stakes__trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 72px;
}

.stake-card {
  display: flex;
  flex-direction: column;
  padding: 24px;
  background: var(--white);
}

.stake-card__chart {
  width: 96px;
  margin-bottom: 28px;
}

.scard__wedge { fill: rgba(0, 0, 0, .85); }

.scard__ring {
  fill: none;
  stroke: rgba(0, 0, 0, .15);
  stroke-width: 3;              /* ≈1px at the 96px render size */
}

.stake-card__value {
  margin: 0;
  font-size: 40px;
  font-weight: 500;
  line-height: 46px;
  letter-spacing: -1.2px;
  font-variant-numeric: tabular-nums;
}

.stake-card__fact {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 18px;
  letter-spacing: -.26px;
  color: rgba(0, 0, 0, .55);
  text-wrap: pretty;
}

.stake-card__source {
  margin: 0;
  margin-top: auto;             /* pins to the card foot */
  padding-top: 20px;
  font-size: 11px;
  line-height: 16px;
  letter-spacing: -.11px;
  color: rgba(0, 0, 0, .55);
}

@media (max-width: 900px) {
  .stakes > .frame { padding-block: clamp(64px, 11vw, 128px); }
  .stakes__trio { margin-top: 48px; grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------- content */

.hero__body {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hero__title {
  margin: 0;
  max-width: 640px;
  font-size: 48px;
  font-weight: 500;
  line-height: 56px;
  letter-spacing: -1.44px;
  text-wrap: balance;
}

.hero__sub {
  margin: 14px 0 0;
  max-width: 591px;
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: -.6px;
  color: rgba(255, 255, 255, .85);
  text-wrap: pretty;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;                    /* Figma: frame 2147226511, gap 12 */
  height: 44px;
  padding-inline: 22px;
  border: 0;
  border-radius: 33px;
  background: rgba(0, 0, 0, .67);
  color: var(--white);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -.34px;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}

.btn:hover { background: rgba(0, 0, 0, .82); }
.btn:active { transform: scale(.96); }

.btn:focus-visible {
  outline: 2px solid rgba(255, 255, 255, .9);
  outline-offset: 3px;
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 31px;
}

.btn--ghost {
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .38);
  transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.btn--ghost:hover {
  background: rgba(255, 255, 255, .12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55);
}

/* --------------------------------------------------------- social proof */

.hero__proof { padding-bottom: 74px; }

.proof__label {
  margin: 0 0 11px;
  font-size: 12px;
  font-weight: 400;
  line-height: 28px;
  color: rgba(255, 255, 255, .5);
}

.proof__logos {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 45px;                    /* Figma: frame 2147226514, gap 45 */
  height: 24px;
  opacity: .65;
}

/* Each mark is white artwork, so the row's own opacity is the only tint. They
   are set to a common cap height rather than a common width — matching widths
   would make the long wordmarks (Porsche, AstraZeneca) read as shouting. */
.proof__logos img {
  display: block;
  width: auto;
  height: 11px;
}

.proof__logos li:nth-child(3) img { height: 19px; }   /* engie carries a mark */
.proof__logos li:nth-child(4) img { height: 9px; }    /* Porsche is a thin rule */
.proof__logos li:nth-child(6) img { height: 23px; }   /* AstraZeneca's mark
                                                          sits above the wordmark */







/* ================================================== horizontal card rail
   Shared primitives — the scroll region, the track and the prev/next buttons.
   rail.js drives every [data-rail] on the page; see "The consequences". */

.rail {
  overflow-x: auto;
  overscroll-behavior-x: contain;     /* don't trigger back-swipe navigation */
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--rail-inset);
  scrollbar-width: none;
  cursor: grab;
}

.rail::-webkit-scrollbar { display: none; }
.rail:focus-visible { outline: 2px solid #0071e3; outline-offset: 4px; border-radius: 8px; }

/* While a pointer drag or a spring is driving scrollLeft, snapping has to be
   off — the snap engine fights any programmatic scroll. rail.js toggles this. */
.rail.is-animating { scroll-snap-type: none; }
.rail.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.rail.is-dragging * { pointer-events: none; }

.rail__track {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding-inline: var(--rail-inset);
  width: max-content;
}

.rail__nav {
  display: flex;
  flex: none;
  gap: 10px;
}

.rail__btn {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: rgba(0, 0, 0, .72);
  background: rgba(0, 0, 0, .06);
  backdrop-filter: blur(12px) saturate(160%);
  transition: background .18s ease, opacity .18s ease, transform .12s ease-out;
}

.rail__btn svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rail__btn:hover:not(:disabled) { background: rgba(0, 0, 0, .11); }
.rail__btn:active:not(:disabled) { transform: scale(.94); }  /* feedback on press, not release */

.rail__btn:disabled {
  opacity: .32;
  cursor: default;
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 1040px) {
  .proof__logos { gap: 32px; }
}

@media (max-width: 780px) {
  .hero {
    min-height: 640px;
    max-height: none;
  }

  /* The ridge sits right of frame; hold it there as the crop narrows. */
  .hero { background-position: 68% center; }

  /* The narrow crop pushes the bright plume up behind the copy. */
  .hero::after {
    background:
      linear-gradient(180deg, rgba(10, 10, 12, .5) 0%, rgba(10, 10, 12, 0) 24%),
      radial-gradient(92% 52% at 50% 45%, rgba(10, 10, 12, .62), rgba(10, 10, 12, 0) 80%);
  }

  .hero__title {
    font-size: 28px;
    line-height: 34px;
    letter-spacing: -.84px;
  }

  .hero__title br,
  .hero__sub br { display: none; }

  .hero__sub {
    font-size: 18px;
    line-height: 26px;
    letter-spacing: -.4px;
  }

  /* Two labels of different length read as a mistake side by side; stack them
     to one width instead. */
  .hero__ctas {
    flex-direction: column;
    align-items: stretch;
    width: min(100%, 280px);
    margin-top: 26px;
  }

  .hero__proof { padding-bottom: 48px; }

  .proof__logos {
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px 32px;
    height: auto;
  }

  .rail__nav { display: none; }   /* touch drags the rail directly */

}


/* ========================================================= a flawed system
   Figma: node 651:24738 ("Wireframe - 19"), frame 1510 × 1002, bg #000,
   padding 128 / 108, inner 1294 × 746, chart 347 square at the right.

   The motion is Vercel's "Every modality you need". Every entry in the list is
   sticky at the same line. The one you're on has arrived there and holds;
   the next one climbs the page normally until it reaches that same line, at
   which point it lands exactly on top of the one before it. Later entries
   paint over earlier ones by document order, and each carries the band's own
   black, so the hand-over reads as a replace, not a pile-up.

   Nothing here is scroll-linked. Reaching the line is a *state* — stack.js
   only decides which entry owns it, and every bit of motion is a CSS
   transition off that class. Transitions are interruptible, so a fast scroll
   through three entries retargets instead of queueing three animations. */

.flaw {
  /* Where an entry comes to rest, measured from the top of the viewport. Below
     the sticky heading, with air between the two. */
  --stack-top: clamp(224px, 30vh, 320px);

  /* Scroll distance between one entry landing and the next — the dwell. */
  --stage: 58vh;

  --chart: 347px;         /* Figma: frame 2147229193 */

  background: #000;
  color: var(--white);
}

.flaw__panel {
  padding: var(--band-pad-y) var(--band-pad-x);
  background: #000;
}

/* Releasing together means the chart is still hanging below the last entry
   when the band ends, so the band has to be deep enough to hold it. --art-drop
   is that overhang, measured; the comp's 128 wins whenever it's already
   enough. */
.flaw--v2 .flaw__panel {
  padding-bottom: max(var(--band-pad-y), calc(var(--art-drop, 0px) + 24px));
}

.flaw__inner {
  margin-inline: auto;
  max-width: var(--band-inner);   /* Figma's 1294 */
}

/* ---------------------------------------------------------------- heading */

/* Holds the top for the whole run, the way Vercel's does — it is the thing the
   entries below are all answering. It releases with the section because it
   sticks inside .flaw__inner, which ends with the stack. */
/* The heading and the stack are the same two columns, declared once, so the
   chart can't drift out of line with the paragraph above it. Figma's inner row
   is 1294 with two 514 columns pushed apart, which `space-between` gives us
   without hard-coding the gutter. */
.flaw--v2 .flaw__head,
.stack {
  display: grid;
  grid-template-columns: 514px 514px;
  justify-content: space-between;
  align-items: start;
}

/* The tail is measured by stack.js — see syncRelease(). It reaches the heading's
   margin box down to where the last entry's bottom sits when pinned, which is
   what makes the two let go of the screen in the same frame and leave
   together. The stack gives back the same distance, so adding it doesn't push
   the first entry down. */
.flaw__head {
  position: sticky;
  top: clamp(32px, 7vh, 72px);
  z-index: 5;   /* entries pass behind the heading, never over it */
  margin-bottom: var(--head-tail, 0px);
  padding-bottom: 24px;
  background: #000;               /* entries pass *behind* it, not through it */
}

.flaw--v2 .flaw__intro { width: 514px; }

.intro__eyebrow {
  margin: 0;
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: -.14px;
}

.intro__title {
  margin: 8px 0 0;
  font-size: 36px;
  font-weight: 500;
  line-height: 40px;
  letter-spacing: -1.08px;
}

.flaw--v2 .intro__body {
  margin: 0;
  color: rgba(255, 255, 255, .65);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -.16px;
}

/* ------------------------------------------------------------- the stack */

.stack { padding-top: max(0px, calc(12vh - var(--head-tail, 0px))); }

.stack__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* An entry is held by its parent's *content* box, so the room the last one
   needs to hold the line has to be real in-flow height — padding on the list
   grows its padding box and changes nothing. Hence an empty entry rather than
   a padding value. It is also what the chart well stretches to, so the chart
   and the entries release together. */
.stack__tail {
  height: var(--stage);
  pointer-events: none;
}

.stack__row {
  position: sticky;
  top: var(--stack-top);
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 470px;
  padding-block: 4px 28px;   /* the tail is what the entry behind is hidden by */
  background: #000;
}

/* The dimming has to live on the *contents*, not on the entry. Opacity on the
   entry would take its black down with it, and a see-through entry can't cover
   the one it is replacing — you get both sets of type at once. */
.stack__row > * {
  opacity: .26;
  transition: opacity 320ms var(--ease-out, cubic-bezier(.23, 1, .32, 1));
}

.stack__row.is-on > * { opacity: 1; }

/* Later entries land on top of earlier ones. Without this the first would
   paint over the second at the moment they coincide. */
.stack__row:nth-child(2) { z-index: 1; }
.stack__row:nth-child(3) { z-index: 2; }

.stack__row + .stack__row { margin-top: var(--stage); }

.stack__value {
  margin: 0;
  font-size: 42px;
  font-weight: 400;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;   /* so the count-up doesn't jitter */
  font-variation-settings: "opsz" 32;
  font-feature-settings: "salt" 1;
}

/* The last entry is a sentence, not a number — 28/30 in the comp. */
.stack__value--words { font-size: 28px; line-height: 34px; }

.stack__label {
  margin: 0;
  color: rgba(255, 255, 255, .8);
  font-size: 17px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -.34px;
}

.stack__value sup,
.stack__label sup {
  font-size: .55em;
  font-weight: inherit;
  vertical-align: super;
  line-height: 0;
}

/* ------------------------------------------------------------ chart well */

/* One well holding all three charts stacked, as in the comp — the entry that
   owns the line owns the chart.

   `stretch` is load-bearing: a sticky box can only travel inside its
   containing block, so a well sized to the chart would release it after 347px.
   Stretched to the grid row, it travels the whole list. */
.stack__well { align-self: stretch; }

/* Nudged above the entry's line so the chart reads as centred against it,
   the way the comp balances them — as far up as clears the heading.

   The negative tail is measured by stack.js, and it is what stops the chart
   leaving on its own. It sticks in the same box the entries do, but it is
   taller than they are, so its bottom reached that box's end 158px of scroll
   earlier — it slipped up behind the heading and out of the band while the
   text was still pinned. Pulling its margin box up to the entries' bottom
   edge makes all three let go in the same frame. */
.stack__art {
  position: sticky;
  top: calc(var(--stack-top) - 64px);
  width: var(--chart);
  height: var(--chart);
  margin-bottom: var(--art-tail, 0px);
}

.stack__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;

  /* The whole chart grows 95% → 100% as it arrives. Never from nothing: it
     deflates, it doesn't vanish. Timed to the wedge's sweep (820ms, same
     ease-out) so the growth and the slice land together rather than the frame
     settling while its contents are still moving. */
  scale: .95;
  transition: opacity 260ms var(--ease-out, cubic-bezier(.23, 1, .32, 1)),
              scale   820ms cubic-bezier(.22, 1, .36, 1);
}

.stack__svg.is-on {
  opacity: 1;
  scale: 1;
}

/* The wedge grows as a wedge — 0% opening out to its share — so its `d` is
   rebuilt by stack.js. Drawing it as a dash along the finished 57% outline
   looked like a pen tracing a shape that was already decided; a slice that
   sweeps open is the thing the number actually means. Figma strokes it inside
   the shape and insets it 11px from the ring. */
.flaw--v2 .pie__wedge {
  fill: var(--accent);
  fill-opacity: .1;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linejoin: round;
}

/* The ring is the chart's frame, so it is simply there — it doesn't draw
   itself. Two things sweeping clockwise from 12 o'clock at once made the ring
   read as the animation and the wedge as its shadow; with the ring whole, the
   only thing moving is the share it is measuring. */
.flaw--v2 .pie__ring {
  fill: none;
  stroke: var(--white);
  stroke-width: 2;
}

/* Every bar is grounded at y + height = 127, so one scaleY off its own box
   rises all of them from the baseline.

   The bars transition their own `scale` between two flat values. They used to
   read an inherited `--grow` that was itself transitioning on the parent, and
   then chase it with a second transition of their own — two curves compounding
   on one value, which is why they crawled and never landed. One transition,
   one property.

   The delay lives on the `.is-on` rule so it applies on the way in only: a
   transition takes its timing from the style it is going *to*. Ten bars
   arriving at once reads as one shape, not ten; ten bars leaving in sequence
   just holds up the hand-over. */
.flaw--v2 .bars rect {
  fill: var(--accent);
  fill-opacity: .1;
  stroke: var(--accent);
  stroke-width: 1;
  transform-box: fill-box;
  transform-origin: 50% 100%;
  scale: 1 .08;   /* a sliver, not nothing — an empty baseline reads as a
                     missing chart */
  transition: scale 560ms cubic-bezier(.22, 1, .36, 1);
}

.stack__svg.is-on .bars rect {
  scale: 1 1;
  transition-delay: calc(var(--i) * 34ms);
}

/* ------------------------------------------------------------- responsive */

@media (max-width: 1180px) {
  .flaw,
  .conseq {
    --band-pad-y: clamp(64px, 11vw, 128px);
  }

  .flaw { --chart: clamp(200px, 30vw, 300px); }

  .flaw--v2 .flaw__head,
  .stack {
    grid-template-columns: minmax(0, 1fr) var(--chart);
    justify-content: normal;
    gap: 32px;
  }

  .flaw--v2 .flaw__head { grid-template-columns: minmax(0, 1fr); }
  .flaw--v2 .flaw__intro,
  .flaw--v2 .intro__body { width: 100%; max-width: 560px; }
}

/* Too narrow for a column of type beside a chart. The chart leads each entry
   instead, and the whole thing keeps sticking exactly as before. */
@media (max-width: 860px) {
  /* One column. The well and the list share it, so the chart can keep sticking
     for the whole run instead of being trapped in a one-row grid area; the
     list's padding is what keeps the entries clear of it. */
  .stack {
    --stack-top: calc(clamp(32px, 7vh, 72px) + var(--chart) + 32px);
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .stack__well,
  .stack__list { grid-area: 1 / 1; }

  .stack__list { padding-top: calc(var(--chart) + 32px); }
  .stack__art { top: clamp(32px, 7vh, 72px); margin-inline: auto; }
  .stack__row { max-width: none; }
}

@media (max-width: 640px) {
  .flaw { --chart: min(240px, 62vw); --stage: 46vh; }

  .intro__title {
    font-size: 28px;
    line-height: 34px;
    letter-spacing: -.84px;
  }

  .intro__title br { display: none; }

  .stack__value { font-size: 32px; }
  .stack__value--words { font-size: 22px; line-height: 28px; }
  .stack__label { font-size: 15px; line-height: 21px; }
}

/* ------------------------------------------------- V1: grow into focus ----
   Figma: node 605:23752 ("Wireframe - 17"), frame 1510 × 1144, inner row 1294
   space-between, left column 514, right column 613 with rows gapped 100, each
   row padding 24 and a 42px gap between chart and text.

   The comp draws two states of the same row and that is the whole
   interaction: the arrived stat's chart is 254 with the cyan at full strength,
   the ones still on their way up are 127 — exactly half — with the cyan at 50%
   and the row dimmed. flaw.js writes `--f` (0 = waiting, 1 = arrived) and
   `--draw` (the chart drawing itself) from one number: how far the row has
   climbed the screen. Climbing only ever grows a stat; the only way to shrink
   one is to send it back down.

   Only the chart resizes; the type stays 42px in both states, as in the comp.
   The chart's *layout box* is always the focused size and the SVG is scaled
   inside it, so nothing reflows as you scroll — a row that changed height
   would shove every row below it and fight the scroll position. */

.flaw--v1 {
  --flaw-gap: 100px;      /* Figma: right column, gap 100 */
  --stat-pad: 24px;       /* Figma: stat row padding. Also what aligns the
                             heading's release with the chart's foot */
  --chart: 254px;         /* the arrived size */

  /* Where a chart starts before it grows, as a fraction of arrived. The comp
     draws its waiting charts at exactly half, but in motion that reads as too
     small a thing becoming too big a thing — the eye follows the scale change
     instead of the chart. .72 keeps the two states clearly different without
     the jump. */
  --chart-min: .72;
}

.flaw--v1 .flaw__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}

/* Scrolls with the page like any other block until it reaches the top of the
   viewport, and holds there while the stats keep going.

   The margin-bottom is what decides when it lets go. A sticky box holds until
   its *margin* box reaches the bottom of the sticky container — here the stats
   column, which ends flush with the last stat's row. That row is the chart
   plus --stat-pad top and bottom, so setting this margin to exactly --stat-pad
   puts the heading's bottom edge on the chart's bottom edge at the instant it
   releases. */
.flaw--v1 .flaw__intro {
  position: sticky;
  top: clamp(32px, 11vh, 120px);
  margin-bottom: var(--stat-pad);
  width: 514px;
  flex: none;
}

.flaw--v1 .intro__body {
  margin: 24px 0 0;                     /* Figma: frame 2147229131, gap 24 */
  max-width: 514px;
}

/* The lead-in gives the heading time to reach the top and settle before the
   first stat takes over. No tail on purpose: this column is what the heading
   sticks inside, so ending it flush with the last stat is what makes the two
   leave together. The scroll room the last stat needs to reach the middle of
   the screen comes from the band below, which butts straight onto this one. */
.flaw__stats {
  display: flex;
  flex-direction: column;
  gap: var(--flaw-gap);
  width: 627px;   /* Figma's 613, plus the 14 the widest caption needs once
                     every chart reserves the focused 254 slot */
  flex: none;
  margin: 0;
  padding: 20vh 0 0;
  list-style: none;
}

.stat {
  --f: 0;                               /* 0 = waiting, 1 = arrived */
  --in: 1;                              /* entry fade — nothing appears from
                                           nothing, and it hides the count
                                           starting from zero off the bottom */
  --exit: 1;                            /* 1 → .9 on the way from the middle
                                           to the top: a stat that has handed
                                           over steps back a little */
  --draw: 1;                            /* chart draw-on; 1 so no-JS is the
                                           finished chart, flaw.js drives it */
  --grow: 1;

  display: flex;
  align-items: center;
  gap: 42px;
  padding: var(--stat-pad);
  opacity: calc(var(--in) * var(--exit) * (.5 + .5 * var(--f)));
}

/* Scaled from its own centre, so the row's baseline and the text beside it
   hold still while the chart opens out around them. */
.stat__art {
  width: var(--chart);
  height: var(--chart);
  flex: none;
  scale: calc(var(--chart-min) + (1 - var(--chart-min)) * var(--f));
  will-change: transform;
}

/* Widths are the comp's, so each caption breaks where Figma breaks it. */
.stat__text {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.stat:nth-child(1) .stat__text { width: 269px; }
.stat:nth-child(2) .stat__text { width: 283px; }
.stat:nth-child(3) .stat__text { width: 258px; }

.stat__value {
  margin: 0;
  font-size: 42px;
  font-weight: 400;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;   /* so the count-up doesn't jitter */
  font-variation-settings: "opsz" 32;
  font-feature-settings: "salt" 1;
}

/* The last stat is a sentence, not a number. */
.stat:nth-child(3) .stat__value {
  font-size: 28px;
  line-height: 34px;
}

.stat__label {
  margin: 0;
  color: rgba(255, 255, 255, .8);
  font-size: 17px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -.34px;
}

.stat__value sup,
.stat__label sup {
  font-size: .55em;
  font-weight: inherit;
  vertical-align: super;
  line-height: 0;
}

/* Stroke widths are in viewBox units, so they land at 2px focused and 1px
   waiting, which is what the comp draws. The wedge's `d` is rebuilt per frame
   by flaw.js — a pie slice is a path, not a dash offset. */
.flaw--v1 .pie__wedge {
  fill: var(--accent);
  fill-opacity: .1;
  stroke: var(--accent);
  stroke-opacity: calc(.5 + .5 * var(--f));
  stroke-width: 2;
  stroke-linejoin: round;
}

.flaw--v1 .pie__ring {
  fill: none;
  stroke: var(--white);
  stroke-width: 2;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--draw));
}

/* The two small charts are drawn in a 128 viewBox, so their strokes are
   already half as wide in user units. */
.stat__art[viewBox^="0 0 12"] .pie__wedge,
.stat__art[viewBox^="0 0 12"] .pie__ring { stroke-width: 1; }

/* Every bar is grounded at y + height = 127, so one scaleY off its own box
   rises all of them from the baseline. flaw.js staggers them left to right,
   per rect — so no transition here, or it would fight the scrub. */
.flaw--v1 .bars rect {
  fill: var(--accent);
  fill-opacity: .1;
  stroke: var(--accent);
  stroke-opacity: calc(.5 + .5 * var(--f));
  stroke-width: 1;
  transform-box: fill-box;
  transform-origin: 50% 100%;
  scale: 1 var(--grow);
}

@media (max-width: 1180px) {
  .flaw--v1 { --flaw-gap: 64px; }

  .flaw--v1 .flaw__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(40px, 7vh, 80px);
  }

  .flaw--v1 .flaw__intro {
    position: static;
    width: 100%;
    max-width: 560px;
  }

  .flaw__stats {
    width: 100%;
    /* Nothing sticks here, so the last stat needs its own room to reach the
       middle of the screen. */
    padding-block: clamp(40px, 8vh, 96px) 32vh;
  }

  .stat { padding-inline: 0; }
  .stat:nth-child(n) .stat__text { width: auto; max-width: 340px; }
}

@media (max-width: 640px) {
  .flaw--v1 { --chart: 168px; }

  .stat {
    align-items: flex-start;
    gap: 20px;
    padding-block: 0;
  }

  .stat__value { font-size: 32px; }
  .stat:nth-child(3) .stat__value { font-size: 22px; line-height: 28px; }
  .stat__label { font-size: 15px; line-height: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  /* No scroll-driven anything — every stat sits finished, and the heading
     scrolls with the rest instead of pinning. */
  .flaw--v1 .flaw__intro { position: static; }
  .flaw__stats { padding-block: clamp(48px, 8vh, 128px); }
  .stat { --f: 1; }
}


/* --------------------------------------------------------- the V1/V2 switch
   A comparison control, not part of the design. It shows only while one of the
   two takes is on screen, so it can't be mistaken for site furniture. Centred,
   which is free: the peril legend is the only other thing that floats down
   there and it belongs to a different section, so the two are never up at the
   same time. The right is taken by the consequences rail's arrows, and the
   left sat on the entries' own column. */

.vswitch {
  position: fixed;
  left: 50%;
  bottom: clamp(16px, 3vh, 28px);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 6px 6px 14px;
  border: .5px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  background: rgba(20, 20, 24, .72);
  backdrop-filter: blur(20px);
  color: rgba(255, 255, 255, .55);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -.12px;

  /* Same shape as the legend: it comes up from the foot of the screen. */
  opacity: 0;
  translate: -50% 14px;
  pointer-events: none;
  transition: opacity 200ms ease-out, translate 340ms cubic-bezier(.23, 1, .32, 1);
}

.vswitch.is-up {
  opacity: 1;
  translate: -50% 0;
  pointer-events: auto;
}

.vswitch__seg {
  display: flex;
  gap: 2px;
  padding: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
}

.vswitch__seg button {
  min-width: 34px;
  padding: 5px 8px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: rgba(255, 255, 255, .6);
  font: inherit;
  cursor: pointer;
  transition: background 160ms ease-out, color 160ms ease-out, transform 160ms ease-out;
}

.vswitch__seg button:hover { color: var(--white); }
.vswitch__seg button:active { transform: scale(.97); }

.vswitch__seg button[aria-pressed="true"] {
  background: var(--white);
  color: #16161a;
}

@media (max-width: 640px) {
  .vswitch__label { display: none; }
  .vswitch { padding-left: 6px; }
}


/* ====================================================== the consequences
   Figma: node 605:23829 ("Wireframe - 18"). The same black frame as the
   section above, so it takes the same --band-* tokens. Heading column 447
   wide, 100 down to the card row; cards 696 × 454, radius 31, gap 20, text
   pinned 36 from the top of the card.

   The row is 2128 wide inside a 1294 column, so it overflows the frame in the
   comp too — on the page that's the same drag/momentum rail as the stats
   section, reusing .rail / .rail__track and rail.js. */

.conseq {
  background: var(--white);
  padding-bottom: var(--band-air);   /* the band above already supplies the
                                        white air between the two */
  color: var(--white);

  /* Left edge of the centred content column, measured from the viewport edge,
     so card 1 lines up with the heading. Deliberately left unregistered: the
     100% must resolve against each *using* element, not here. */
  --rail-inset: max(var(--band-pad-x), calc((100% - var(--band-inner)) / 2));
}

.conseq__panel {
  padding-block: var(--band-pad-y);
  background: #000;
}

.conseq__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  /* The 1294 column *inside* the frame's 108 gutters — same left edge as
     --rail-inset, so the heading and card 1 share an edge. */
  width: min(var(--band-inner), 100% - 2 * var(--band-pad-x));
  margin-inline: auto;
  margin-bottom: 100px;              /* Figma: content column, gap 100 */
}

.conseq__intro { max-width: 480px; } /* Figma hugs at 447; the <br>s do the work */

/* ------------------------------------------------------------- the cards */

.cons-card {
  scroll-snap-align: start;
  position: relative;
  isolation: isolate;
  display: flex;
  flex: none;
  align-items: flex-start;
  width: 696px;
  height: 454px;
  padding: 36px;                     /* Figma pins the text 36 from the top and
                                        29 / 41 / 38 from the left — three
                                        hand-placed values, squared off to 36 */
  border-radius: 31px;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

.cons-card p {
  margin: 0;
  max-width: 520px;
  color: rgba(255, 255, 255, .8);
  font-size: 17px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -.34px;
}

.cons-card--tint { background: rgba(0, 224, 239, .06); }   /* accent at 6% */
.cons-card--ink { background: #000d0e; }

/* Photo stand-in, same approach as the stats cards: the comp uses a bitmap of
   a night city with a fire on the shoreline. Rebuilt as soft gradients so it
   scales to any card with no asset — replace `--card-photo` with
   `url(...) center / cover` when the image is exported. */
.cons-card--photo {
  --card-photo:
    radial-gradient(9% 5% at 40% 72%, rgba(255, 178, 92, .95), rgba(255, 122, 36, .45) 60%, transparent 100%),
    radial-gradient(26% 15% at 40% 74%, rgba(226, 96, 24, .35), transparent 75%),
    radial-gradient(40% 30% at 38% 52%, rgba(14, 16, 22, .9), transparent 78%),
    radial-gradient(70% 34% at 62% 96%, rgba(190, 150, 105, .22), transparent 74%),
    radial-gradient(90% 55% at 92% 6%, rgba(126, 152, 182, .5), transparent 70%),
    linear-gradient(180deg, #46556b 0%, #2b3442 30%, #161c25 62%, #080a0e 100%);
}

.cons-card--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--card-photo);
}

/* scrim, so the caption keeps its contrast wherever the photo lands */
.cons-card--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .42) 0%, transparent 34%);
}

/* ------------------------------------------------- rail controls on black */

.rail__nav--on-dark .rail__btn {
  color: rgba(255, 255, 255, .82);
  background: rgba(255, 255, 255, .08);
}

.rail__nav--on-dark .rail__btn:hover:not(:disabled) { background: rgba(255, 255, 255, .15); }

/* ------------------------------------------------------------ responsive */

@media (max-width: 1180px) {
  .conseq__head {
    display: block;
    margin-bottom: clamp(40px, 7vh, 80px);
  }

  .rail__nav--on-dark { display: none; }
}

@media (max-width: 900px) {
  .cons-card {
    width: min(696px, 82vw);
    height: auto;
    aspect-ratio: 696 / 454;
    padding: clamp(22px, 4vw, 36px);
    border-radius: 22px;
  }

  .cons-card p { font-size: 15px; line-height: 21px; }
}

/* ==================================================== model / audit
   Figma: node 599:22347 (frame 2147229173). White frame 1510 wide, padding
   100 / 42, 1300 content column, two blocks 100 apart. Each block is a
   label + lede with 28 down to its artefact.

   Type is the same in both heads: label Inter 14/24 -0.42 at #000, lede
   Inter 20/28 -0.6 with the lead clause at 85% black and the rest at 35%. */

.model {
  padding-inline: var(--band-pad-x);   /* on the band grid, so the frame lines run straight */
  background: var(--white);
  color: #000;
  overflow-x: clip;   /* the portfolio window bleeds past the right edge */
}

.model__inner {
  --model-block-gap: clamp(120px, 13vw, 200px);
  display: flex;
  flex-direction: column;
  align-items: center;
  /* each block is a full product window; they need room to read as separate
     moments rather than one long scroll */
  gap: var(--model-block-gap);
  max-width: var(--band-inner);
  margin-inline: auto;
}

.model__block {
  display: flex;
  flex-direction: column;
  gap: 28px;
  width: 100%;
  max-width: var(--band-inner);
}

.model__head {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.model__lede { text-wrap: balance; }

/* one size class below the lede, on its own line beneath it */
.model__sub {
  margin: 6px 0 0;
  max-width: 560px;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -.16px;
  color: rgba(0, 0, 0, .35);
  text-wrap: pretty;
}

.model__label,
.biz__feats-label {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -.42px;
}

.model__lede {
  max-width: none;   /* the lede's 560px cap yields to the model column */
  color: rgba(0, 0, 0, .35);
}

.model__lede strong {
  color: rgba(0, 0, 0, .85);
  font-weight: inherit;   /* the comp shifts colour, not weight */
}

/* ---------------------------------- twin anatomy (Figma 886:8060) --------
   The comp's 1034 × 327 stage, coordinates transcribed. Chips are CSS
   circles (the export is a 78px circle at 10% black); the sphere's regions
   are drawn live into .tw__orb by orb.js, which also sets --tw-scale so the
   fixed-size stage fits any column width. */

/* The introduction sits above the rounded illustration and caption surface. */
.model__block--anatomy {
  width: 100%;
  max-width: var(--band-inner);
  gap: 16px;
}

.model__block--anatomy > .sphere {
  background: #f8f9fd;
  border-radius: 24px;
  padding: 56px 0 40px;
  overflow: clip;
}

/* Its head: centred, at the section-title scale. */
.model__block--anatomy .model__head {
  margin-bottom: 24px;
  align-items: center;
  text-align: center;
}

.model__block--anatomy .model__label { color: var(--ask-blue); }

.model__block--anatomy .model__lede {
  max-width: 26em;
  font-size: 48px;
  line-height: 56px;
  letter-spacing: -1.44px;
}

/* the 48px section headings step down together on small screens */
@media (max-width: 680px) {
  .hero__title,
  .outcomes__title,
  #usecases .lede,
  .portfolio__title,
  .model__block--anatomy .model__lede {
    font-size: 32px;
    line-height: 40px;
    letter-spacing: -.96px;
  }
}

.sphere {
  position: relative;
  display: grid;
  justify-items: center;
  margin: 0;
  padding: 28px 0 0;   /* no clip: the rim columns ride over the frame strokes */
}

.sphere::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to right, #f8f9fd, transparent) left / 160px 100% no-repeat,
    linear-gradient(to left, #f8f9fd, transparent) right / 160px 100% no-repeat,
    linear-gradient(to bottom, #f8f9fd, transparent) top / 100% 100px no-repeat;
}

.sphere__fit {
  width: calc(1034px * var(--tw-scale, 1));
  height: calc(327px * var(--tw-scale, 1));
}

.tw {
  position: relative;
  width: 1034px;
  height: 327px;
  transform: scale(var(--tw-scale, 1));
  transform-origin: 0 0;
}
.tw * { position: absolute; }

.tw .chip {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  border: .5px solid rgba(0, 0, 0, .1);
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 20px rgba(0, 0, 0, .04);
}
.tw .chip img { position: absolute; inset: 0; margin: auto; opacity: .35; }

/* the dashed halo, vector now — same stroke as the chip outlines
   (it used to be baked into the sphere plate bitmap) */
.tw .tw__halo {
  left: 355px;
  top: 0;
  width: 326px;
  height: 326px;
}


/* ----------------------------------------------- sphere: the info layer
   One caption per zone. The five tracks are the stage's own geometry —
   left grid 244, wire span 101, sphere 296, wire span 139, right grid 254 —
   so each caption sits under the thing it names at every scale. */

.sphere__captions {
  display: grid;
  grid-template-columns: 244fr 125fr 296fr 115fr 254fr;
  width: calc(1034px * var(--tw-scale, 1));
  margin: 48px 0 0;
}

.sphere__caption { text-align: center; }
.sphere__icon {
  display: block;
  width: 26px;
  height: 26px;
  margin: 0 auto 16px;
  color: #1f1f1f;
}
.sphere__caption:nth-child(1) { grid-column: 1; }
.sphere__caption:nth-child(2) { grid-column: 3; }
.sphere__caption:nth-child(3) { grid-column: 5; }

.sphere__caption h3 {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -.28px;
  color: rgba(0, 0, 0, .85);
  text-wrap: balance;
}

.sphere__caption p {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -.28px;
  color: rgba(0, 0, 0, .75);
  text-wrap: pretty;
}

@media (max-width: 700px) {
  .sphere__captions {
    grid-template-columns: 1fr;
    gap: 36px;
    padding-inline: 24px;
  }
  .sphere__caption:nth-child(n) { grid-column: 1; }
}

/* -------------------------------------------------- sphere: the wires */

.tw .tw__wires { pointer-events: none; }
/* connectors share the chip outlines' stroke style — opaque, so overlaps
   and terminals never stack darker */
.tw__wires .wire { fill: none; stroke: rgb(230, 230, 230); stroke-width: .5; }
.tw__wires .wire--dash { stroke-dasharray: 4 4; }
.tw__wires .dot { fill: rgb(230, 230, 230); }

/* trace-in: the tracer strokes each wire's mask on; round cap + width 8
   cover the dot terminals as the tip passes them */
.tw__wires .tracer {
  fill: none;
  stroke: #fff;
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dashoffset: var(--len, 0);
  transition: stroke-dashoffset 1s cubic-bezier(.23, 1, .32, 1);
}
.tw__wires .g--in  .tracer { transition-delay: .45s; }   /* evidence connects first */
.tw__wires .g--out .tracer { transition-delay: .7s; }    /* then the outputs */
[data-appear].sphere.is-here .tw__wires .tracer { stroke-dashoffset: 0; }

/* the machinery's travelling dots — driven step by step from orb.js, so
   the only CSS is their look */
.tw__wires .pulse {
  fill: rgba(0, 0, 0, .5);
  offset-rotate: 0deg;
  transform-box: fill-box;      /* scale about the dot's own centre */
  transform-origin: center;
}

/* ---------------------------------------------- sphere: choreography */

/* text never animates in this section; the illustration sweeps in left to
   right — orb.js writes each piece's transition-delay from its x position */
[data-appear].sphere .chip,
[data-appear].sphere .tw__art {
  opacity: 0;
  transition: opacity .45s ease, transform .45s ease;
}
[data-appear].sphere .chip { transform: translateY(8px); }

[data-appear].sphere.is-here .chip { opacity: 1; transform: none; }
[data-appear].sphere.is-here .tw__art { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  [data-appear].sphere .chip,
  [data-appear].sphere .tw__art { transition: none; }
  .tw__wires .tracer { transition: none; }
}

/* ------------------------------------------------------- the digital twin */

.twin {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;   /* the render and the atlas are both absolute,
                                  so this only places the legend */
  align-items: center;
  margin: 0;
  height: 648px;
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: 8px;
}

/* ------------------------------------------------- portfolio: copy + app
   Copy on the left, the Locations screen (Figma 740:22369) on the right.
   The window is built at design size — 1340 wide — and bleeds off the page
   edge; the section clips it. Chrome (rail, top bar) is exported from the
   file; all typeset UI uses the file's exact tokens. */

.model__block--atlas { max-width: var(--band-inner); }

.biz {
  display: grid;
  grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
  gap: clamp(48px, 6vw, 88px);
  align-items: stretch;
}

/* the title's cap sits on the same line as "Acme" inside the window — the
   window's own 12 + 40 + 40 inset, scaled, less the two cap-height offsets */
.biz__copy {
  display: flex;
  flex-direction: column;
  padding-top: 80px;
}

/* the page's lede voice: the claim in ink, what follows it stepped back —
   same treatment as .model__lede */
.biz__body {
  max-width: 26em;
  color: rgba(0, 0, 0, .35);
}

.biz__body strong {
  color: rgba(0, 0, 0, .85);
  font-weight: inherit;   /* colour shift, not weight */
}

/* pinned to the foot of the column, level with the window's fade */
.biz__feats { margin-top: auto; padding-top: 40px; }

.biz__feats-label {
  margin-bottom: 16px;
  color: rgba(0, 0, 0, .85);
}

/* One left-aligned column, split by hairlines — the same spec-list rhythm the
   product's own Informations panel uses. */
.biz__list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(0, 0, 0, .12);
}

/* title on its own line, the sentence under it at the same size — the page's
   lede pattern, shifting colour rather than scale */
.biz__list li {
  padding: 13px 0;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -.28px;
}

.biz__list strong {
  display: block;
  margin-bottom: 3px;
  color: rgba(0, 0, 0, .85);
  font-weight: 500;
  text-wrap: balance;
}

.biz__list span {
  display: block;
  color: rgba(0, 0, 0, .55);
  text-wrap: pretty;
}

.biz__list li + li { border-top: .5px solid rgba(0, 0, 0, .06); }

/* the arrival: copy splits in, the window rises a beat later */
[data-appear].biz .biz__body,
[data-appear].biz .biz__feats {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity .45s var(--ease-out-cubic),
    transform .45s var(--ease-out-cubic);
}

[data-appear].biz .biz__feats { transition-delay: 90ms; }

[data-appear].biz .app,
[data-appear].biz .simwin {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity .6s var(--ease-out-cubic),
    transform .6s var(--ease-out-cubic);
}

/* the sim window ships in place — no entry travel */
[data-appear].biz--stack .simwin {
  opacity: 1;
  transform: none;
  transition: none;
  transition-delay: 160ms;
}

[data-appear].biz.is-here .biz__body,
[data-appear].biz.is-here .biz__feats,
[data-appear].biz.is-here .app,
[data-appear].biz.is-here .simwin {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-appear].biz .biz__body,
  [data-appear].biz .biz__feats,
  [data-appear].biz .app,
[data-appear].biz .simwin { transition: none; }
}

/* Without a list to pin to the foot, the copy centres against the window
   instead of hanging from the top of it. */
.biz--center .biz__copy {
  justify-content: center;
  padding-top: 0;
}

/* Mirrored: the window bleeds off the left edge, the copy sits right. */
.biz--flip { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); }
.biz--flip .app,
.biz--flip .simwin {
  justify-self: end;
  width: calc(100% + var(--frame-gut));       /* grows leftward, past the frame stroke */
  margin-left: calc(-1 * var(--frame-gut));
}

/* ------------------------------------------------------------ the window
   Figma tokens: Fill/Secondary #f5f5f7, Fill/Primary #fff, stroke/soft-200
   #ebebeb, Label Primary #1b1b1b / Secondary #6e6e73 / Tertiary #999.
   Inter throughout with the file's feature settings. */

.app {
  position: relative;
  margin: 0;
  flex: none;
  width: 1340px;
  height: 860px;
  /* built at design size, presented at 80% — zoom keeps every internal
     measurement 1:1 with the file */
  zoom: .8;
  /* larger than the expanded window nested inside it (12), so the corners
     step inward rather than fighting each other */
  border-radius: 16px;
  background: #f7f8fb;   /* the rail's chrome tint — must match the export */
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .06);
  overflow: hidden;
  font-feature-settings: "ss11" 1, "calt" 0, "liga" 0;
  /* the screen continues below the fold — it fades out rather than ending */
  -webkit-mask-image: linear-gradient(#000 calc(100% - 110px), transparent);
  mask-image: linear-gradient(#000 calc(100% - 110px), transparent);
}

/* Figma 753:7356. Built in code so the chip's shadow and the chrome tint are
   real CSS, not baked pixels. Named `side`, not `rail` — that one is the
   horizontal card carousel above, and this would inherit its drag cursor. */
.side {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 80px;
  height: 100%;
  padding: 12px 8px;
}

/* the product's mark: a plate, with the comp's stacked shadows */
.side__logo {
  flex: none;
  width: 26px;
  height: 26px;
  margin: 9px 0 16px;
  border: .5px solid rgba(0, 0, 0, .19);
  border-radius: 5px;
  background: #e5e5e5;
  box-shadow:
    0 4px 8px rgba(51, 51, 51, .06),
    0 2px 4px rgba(51, 51, 51, .04),
    0 1px 2px rgba(51, 51, 51, .04),
    inset 0 -1px 1px rgba(51, 51, 51, .06);
}

.side__group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 64px;
}

.side__group--foot { margin-top: auto; }

.side__sep {
  height: .5px;
  margin: 4px 0;
  background: rgba(0, 0, 0, .06);
}

.side__item {
  display: grid;
  place-items: center;
  height: 42px;
  border-radius: 8px;
}

.side__item.is-on { background: var(--white); }

.side__item--cta {
  margin-bottom: 8px;
  background: #0595f5;   /* Buttons/Blue */
}

.side__item img { display: block; }

.side__avatar { border-radius: 999px; }

.app__main {
  position: absolute;
  inset: 12px 0 0 84px;   /* Figma: Main at 84 / 12, 1256 wide */
  background: var(--white);
  /* The export bakes an 8px arc on the left and a square right edge (it butts
     the screen in Figma). Left keeps 8 so CSS sits on the baked arc; right is
     flush with the window, so it takes the window's own 16. */
  border-radius: 8px 16px 0 0;
  box-shadow: 0 0 0 .5px #c7c7d1;
  overflow: clip;
}

.app__bar {
  display: block;
  width: 1256px;
  height: 40px;
}

.app__page {
  position: relative;   /* the hover card seats against this, not the map */
  padding: 40px 120px 0;
}

.app__crumb {
  margin: 0;
  color: #999;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: -.072px;
}

.app__title {
  margin: 0;
  color: #1b1b1b;
  font-size: 24px;
  font-weight: 500;
  line-height: 36px;
  letter-spacing: -.24px;
}

.app__tabs {
  display: flex;
  gap: 24px;
  margin-top: 12px;
  padding: 14px 0;
  border-bottom: 1px solid #ebebeb;
  font-size: 14px;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: -.084px;
  color: #6e6e73;
}

.app__tabs .is-on {
  position: relative;
  color: #1b1b1b;
}

.app__tabs .is-on::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -14px;
  height: 2px;
  background: #1b1b1b;
}

/* Unread dot, Apple-style: small, optically aligned to the cap height rather
   than the line box, and set off the label's end with its own air. */
.app__tab--dot {
  position: relative;
  padding-right: 8px;   /* 5px dot + 3px of air — it hugs the word */
}

.app__tab--dot::after {
  content: "";
  position: absolute;
  top: 1px;
  right: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #0595f5;   /* Figma Buttons/Blue */
}

.app__mapbox {
  position: relative;
  margin-top: 32px;
  height: 369px;
  border-radius: 12px;
  overflow: hidden;
}

.app__mapbox .atlas { border-radius: 12px; }

/* the design's tiles are 14px stickers; ours stay a touch larger so they
   remain hoverable, with the same proportions */
.app .pin {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  font-size: 11.5px;
}

.app .pin::after { inset: -10px; }
.app .pin__type img { width: 16px; height: 16px; }

/* --------------------------------------------------------------- facilities
   Figma 740:22440: white card on stroke/soft-200, header 16, search 300,
   pill buttons, 40px column row in caps 12, 52px data rows. */

.app__panel {
  margin: 32px 0 0;
  border: 1px solid #ebebeb;
  border-radius: 12px;
  background: var(--white);
}

.app__panel-head {
  padding: 16px;
  border-bottom: .5px solid #ebebeb;
  box-shadow: 0 4px 17px rgba(0, 0, 0, .02);
}

.app__panel-label {
  margin: 0 0 11px;
  color: #999;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: -.072px;
}

.app__tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.app__search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 300px;
  height: 36px;
  padding: 8px 8px 8px 10px;
  border: 1px solid #ebebeb;
  border-radius: 8px;
  background: var(--white);
  box-shadow: 0 1px 2px rgba(10, 13, 20, .03);
  color: #999;
  font-size: 14px;
  line-height: 14px;
  letter-spacing: -.084px;
}

.app__search svg { flex: none; margin: 0 2px; }

.app__search:focus-within { border-color: #d5d5d8; }

.app__search input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: none;
  color: #1b1b1b;
  font: inherit;
  letter-spacing: inherit;
}

.app__search input::placeholder { color: #999; }
.app__search input::-webkit-search-cancel-button { display: none; }

/* the window is scaled down on small screens; 16px keeps iOS from zooming
   the whole page when the field takes focus */
@media (max-width: 900px) {
  .app__search input { font-size: 16px; }
}

.loc.is-out { display: none; }

.app__empty {
  margin: 0;
  min-height: 52px;
  padding: 12px 16px;
  color: #999;
  font-size: 14px;
  letter-spacing: -.084px;
}

.app__tools-right { display: flex; gap: 8px; }

.app__chip {
  display: flex;
  align-items: center;
  height: 36px;
  padding: 8px 18px 8px 8px;   /* the glyph carries its own lead-in; the label needs the room on the right */
  border: 1px solid #ebebeb;
  border-radius: 999px;
  background: var(--white);
  color: #6e6e73;
  font-size: 14px;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: -.084px;
}

.app__chip svg { flex: none; margin: 0 7.5px 0 3.5px; }

.app__chip--dark {
  border: 0;
  /* Figma: white washed with rgba(14,16,24,.35) */
  background: linear-gradient(rgba(14, 16, 24, .35), rgba(14, 16, 24, .35)), #fff;
  color: #fff;
}

.app__chip--dark svg { margin: 0 9px 0 5px; }

/* the list is a grid, not a table: each facility is one article holding its
   line and its detail panel, so the two open and close as one block */
.app__table {
  --cols: 280px repeat(4, minmax(0, 1fr));
  width: calc(100% - 24px);
  margin: 0 12px 12px;
}

.app__thead,
.loc__head { display: grid; grid-template-columns: var(--cols); align-items: center; }

.app__th {
  position: relative;
  display: flex;
  align-items: center;
  height: 40px;
  padding: 12px 16px;
  gap: 6px;
  color: #999;   /* Label/Tertiary, same as the FACILITIES label */
  font-size: 12px;
  font-weight: 400;
  line-height: 14px;
  letter-spacing: -.072px;
  text-align: left;
  white-space: nowrap;
}

.app__th[aria-sort] {
  cursor: pointer;
  user-select: none;
  transition: color .2s ease-out;
}

.app__th[aria-sort]:not([aria-sort="none"]) { color: #6e6e73; }

@media (hover: hover) and (pointer: fine) {
  .app__th[aria-sort]:hover { color: #6e6e73; }
}

.app__th:focus-visible {
  outline: 2px solid #0071e3;
  outline-offset: -2px;
}

.app__th svg { flex: none; color: currentColor; }   /* hugs the label */

/* the file's two-way chevron rests; a single chevron takes over once the
   column is actually carrying the sort */
.app__th .sort__idle { rotate: 90deg; }
.app__th[aria-sort="none"] .sort__dir { display: none; }
.app__th:not([aria-sort="none"]) .sort__idle { display: none; }
.app__th[aria-sort="descending"] .sort__dir { rotate: 180deg; }

.app__td {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 12px 16px;
  color: #6e6e73;
  font-size: 14px;
  line-height: 14px;
  letter-spacing: -.084px;
  white-space: nowrap;
}

.app__td:first-child {
  color: #1b1b1b;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -.16px;
}

.app__td:nth-child(2) { padding: 12px 20px 12px 12px; }
.app__td:last-child { color: #999; }

.app__td img {
  margin-right: 8px;
}

.app__score {
  display: inline-flex;
  justify-content: center;
  width: 36px;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: -.084px;
}

/* ------------------------------------------------------ expanded location
   Figma (production file, 1143:18573): the open row and its panel are one
   Fill/Secondary card, radius 12. Sections 42 apart, list rows split by the
   0.5px Strokes-on-light hairline. */

/* One plate for the line and its panel: the article paints it and rounds it,
   the panel's grid track opens 0fr -> 1fr underneath. Open is the deliberate
   act (300ms), close the response (200ms). Hover is instant. */
/* One surface, one colour: the article carries the plate for every state
   (rest, hover, open, closing) so nothing stacks. Open paints at once and the
   panel edge reveals it; close fades over the collapse; hover is a tint of
   the same plate, so a close under the pointer settles there with no step. */
.loc {
  border-radius: 12px;
  background: rgba(0, 0, 0, 0);
  transition: background-color .2s ease-out;
}
.loc__head { cursor: pointer; border-radius: 12px; }
/* one row ships in the hover look until the first pointer arrives (locations.js) */
.loc.is-preset:not(.is-open) { background: rgba(0, 0, 0, .022); }
@media (hover: hover) and (pointer: fine) {
  .loc:not(.is-open):hover { background: rgba(0, 0, 0, .022); }
}
.loc__head:focus-visible { outline: 2px solid #0071e3; outline-offset: -2px; }
.loc.is-open { background: #f5f5f7; transition: background-color 0s; }

.loc__wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .2s cubic-bezier(.23, 1, .32, 1);
}
.loc.is-open .loc__wrap { grid-template-rows: 1fr; transition: grid-template-rows .3s cubic-bezier(.4, 0, .2, 1); }
@media (prefers-reduced-motion: reduce) {
  .loc, .loc.is-open, .loc__wrap, .loc.is-open .loc__wrap { transition: none; }
}

.loc__inner { min-height: 0; overflow: clip; }

.loc__sec { padding: 0 16px; }
.loc__sec:first-child { padding-top: 8px; }
.loc__sec:last-child { padding-bottom: 12px; }
.loc__sec + .loc__sec { margin-top: 42px; }

.loc__h {
  margin: 0 0 10px;
  color: #1b1b1b;
  font-size: 14px;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: -.084px;
}

.loc__h--info { margin-bottom: 16px; }   /* the comp's extra 6 under this one */

.loc__sum {
  margin: 0;
  color: #6e6e73;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -.084px;
  text-wrap: pretty;
}

.loc__list { margin: 0; }

.loc__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-top: .5px solid rgba(0, 0, 0, .06);
  font-size: 14px;
  line-height: 14px;
  letter-spacing: -.084px;
}

.loc__row:first-child { border-top: 0; padding-top: 0; }
.loc__row--pill { padding: 0 0 10px; }

.loc__row dt { color: #6e6e73; }
.loc__row dd { margin: 0; color: #1b1b1b; }

.loc__pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 6px 6px 8px;
  border-radius: 100px;
  background: #e8e8ed;   /* Fill/Tertiary */
  color: #1b1b1b;
}

.loc__pill svg { display: block; }

@media (prefers-reduced-motion: reduce) {
  .loc__wrap,
  .loc__inner { transition: none; }
}

.app__score--good  { background: rgba(210, 245, 168, .6); color: #0a9e0c; }
.app__score--watch { background: #e6f4fe; color: #0af; }
.app__score--alert { background: rgba(241, 131, 5, .1); color: #f18305; }

/* ==================================================== peril simulation
   Production file 1145:21181 — the expanded window on its own, no product
   chrome behind it: 12px radius, a hairline, a 4px ring and a soft drop. */

.simwin {
  position: relative;
  margin: 0;
  width: 100%;
  aspect-ratio: 1298 / 820;      /* the comp's window proportions */
  border: .5px solid rgba(0, 0, 0, .12);
  border-radius: 12px;
  background: var(--white);
  box-shadow: 0 0 0 4px rgba(0, 0, 0, .06), 0 4px 7px rgba(0, 0, 0, .06);
  overflow: hidden;
}

/* the run itself, filling the window */
.sim__plate {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 52% 46%;
}

.sim__risk-map {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--white);
}

/* Figma 772:57934 adapted as a simulation inspector: same dark translucent
   material, 16px shell, compact metadata rows, outputs, and summary hierarchy. */
.simdetail {
  --simdetail-material: rgba(14, 16, 24, .82);
  --simdetail-shadow:
    0 0 0 1px rgba(51, 51, 51, .04),
    0 1px 1px .5px rgba(51, 51, 51, .04),
    0 6px 6px -3px rgba(51, 51, 51, .08),
    0 24px 24px -12px rgba(51, 51, 51, .14),
    0 48px 48px -24px rgba(51, 51, 51, .14);

  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  width: clamp(238px, 37%, 292px);
  height: calc(100% - 24px);
  padding: 10px;
  overflow: hidden;
  color: #fff;
  background: var(--simdetail-material);
  border-radius: 16px;
  box-shadow: var(--simdetail-shadow);
  transition: height 220ms cubic-bezier(.645, .045, .355, 1);
  -webkit-backdrop-filter: blur(25px);
  backdrop-filter: blur(25px);
}

.simdetail__head {
  flex: none;
}

.simdetail__head::after {
  content: "";
  display: block;
  height: 1px;
  margin-block: 2px;
  background: rgba(199, 199, 209, .12);
  transition: background-color 180ms ease;
}

.simdetail__toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 58px;
  padding: 10px 8px 10px 10px;
  color: inherit;
  font: inherit;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 150ms ease, transform 150ms ease-out;
}

@media (hover: hover) and (pointer: fine) {
  .simdetail__toggle:hover { background: rgba(255, 255, 255, .06); }
}

.simdetail__toggle:active { transform: scale(.98); }

.simdetail__toggle:focus-visible {
  outline: 2px solid rgba(255, 255, 255, .86);
  outline-offset: 2px;
}

.simdetail__orb {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  outline: 1px solid rgba(255, 255, 255, .12);
  object-fit: cover;
}

.simdetail__head-copy {
  display: block;
  flex: 1;
  min-width: 0;
}

.simdetail__chevron {
  display: grid;
  flex: none;
  width: 28px;
  height: 28px;
  place-items: center;
  color: rgba(255, 255, 255, .62);
  transform: rotate(180deg);
  transition: transform 200ms cubic-bezier(.215, .61, .355, 1), color 150ms ease;
}

.simdetail[data-collapsed="true"] .simdetail__chevron {
  transform: rotate(0deg);
  transition: transform 180ms cubic-bezier(.645, .045, .355, 1), color 150ms ease;
}

.simdetail[data-collapsed="true"] {
  height: 78px;
  transition-duration: 180ms;
}

.simdetail[data-collapsed="true"] .simdetail__head::after {
  background-color: transparent;
}

.simdetail__kicker,
.simdetail__title,
.simdetail__section-label,
.simdetail__meta-row,
.simdetail__output,
.simdetail__summary p,
.simdetail__summary ul {
  margin: 0;
}

.simdetail__kicker {
  display: block;
  overflow: hidden;
  color: rgba(255, 255, 255, .55);
  font-size: 9px;
  line-height: 13px;
  letter-spacing: .04em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.simdetail__title {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -.14px;
  line-height: 17px;
  text-overflow: ellipsis;
  text-wrap: balance;
  white-space: nowrap;
}

.simdetail__body {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.simdetail__orb,
.simdetail__head-copy,
.simdetail__body {
  opacity: 1;
  transform: translateX(0);
  transition:
    opacity 170ms cubic-bezier(.215, .61, .355, 1),
    transform 170ms cubic-bezier(.215, .61, .355, 1);
}

.simdetail.is-risk-changing .simdetail__orb,
.simdetail.is-risk-changing .simdetail__head-copy,
.simdetail.is-risk-changing .simdetail__body {
  will-change: opacity, transform;
}

.simdetail.is-risk-leaving .simdetail__orb,
.simdetail.is-risk-leaving .simdetail__head-copy,
.simdetail.is-risk-leaving .simdetail__body {
  opacity: 0;
  transform: translateX(-6px);
  transition-duration: 100ms;
  transition-timing-function: ease-in;
}

.simdetail.is-risk-entering .simdetail__orb,
.simdetail.is-risk-entering .simdetail__head-copy,
.simdetail.is-risk-entering .simdetail__body {
  opacity: 0;
  transform: translateX(6px);
  transition: none;
}

.simdetail__body::-webkit-scrollbar { display: none; }

.simdetail__section {
  padding: 10px 4px;
  border-bottom: 1px solid rgba(199, 199, 209, .12);
}

.simdetail__meta {
  padding-block: 8px;
}

.simdetail__meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 34px;
  padding-inline: 10px;
  font-size: 11px;
  line-height: 14px;
}

.simdetail__meta-row span,
.simdetail__section-label {
  color: rgba(255, 255, 255, .55);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.simdetail__meta-row strong {
  color: rgba(255, 255, 255, .94);
  font-weight: 400;
  text-align: right;
}

.simdetail__section-label {
  padding: 2px 10px 7px;
}

.simdetail__outputs {
  display: flex;
  flex-direction: column;
}

.simdetail__output {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 44px;
  padding: 7px 10px;
  border-radius: 8px;
}

.simdetail__output i {
  width: 5px;
  height: 5px;
  border: 1px solid rgba(255, 255, 255, .58);
  border-radius: 50%;
}

.simdetail__output span {
  min-width: 0;
}

.simdetail__output strong,
.simdetail__output small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.simdetail__output strong {
  color: rgba(255, 255, 255, .96);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: -.12px;
  line-height: 16px;
}

.simdetail__output small {
  color: rgba(255, 255, 255, .55);
  font-size: 10px;
  font-weight: 400;
  line-height: 14px;
}

.simdetail__summary {
  padding: 10px 4px 4px;
  border-bottom: 0;
}

.simdetail__summary > p:not(.simdetail__section-label),
.simdetail__summary li {
  color: rgba(255, 255, 255, .9);
  font-size: 11px;
  letter-spacing: -.07px;
  line-height: 16px;
}

.simdetail__summary > p:not(.simdetail__section-label) {
  padding: 0 10px;
}

.simdetail__summary ul {
  padding: 8px 10px 0 24px;
}

.simdetail__summary li + li { margin-top: 5px; }

@media (prefers-reduced-motion: reduce) {
  .simdetail,
  .simdetail__toggle,
  .simdetail__head::after,
  .simdetail__chevron,
  .simdetail__orb,
  .simdetail__head-copy,
  .simdetail__body { transition: none; }
}

.simdetail.is-instant,
.simdetail.is-instant .simdetail__head::after,
.simdetail.is-instant .simdetail__chevron,
.simdetail.is-instant .simdetail__orb,
.simdetail.is-instant .simdetail__head-copy,
.simdetail.is-instant .simdetail__body { transition: none; }

@media (max-width: 640px) {
  .simdetail {
    top: 8px;
    right: 8px;
    height: calc(100% - 16px);
    width: min(244px, calc(100% - 16px));
  }

  .simdetail[data-collapsed="true"] { height: 78px; }
}

/* ================================================= radial peril selector
   Four choices travel on an eight-position ellipse so the populated arc stays
   in the upper half. Selection always occupies twelve o'clock. */

/* The hazard heading, map and picker share one rounded container. */
.biz--stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding-block: 0;
  border-radius: 24px;
  background: #f8f9fd;
  overflow: clip;
}
/* Keep the hazard container one card gutter below the feature grid. */
.model__block:has(> .biz--stack) {
  margin-top: calc(16px - var(--model-block-gap));
}
.model__block > .simcard {
  padding: 48px 24px 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  text-align: center;
}
.model__block > .simcard .feats__lede {
  max-width: 30em;
  margin-inline: auto;
  text-wrap: balance;
}

/* The map and controls fill the bottom of the hazard container. */
.simrow {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  width: 100%;
}
.biz--stack .simrow .simwin {
  /* the window's chrome goes; the sheet floats inside the map as before.
     Also undoes .biz--flip's off-the-frame bleed — the sim stays in its
     column between the strokes. */
  width: 100%;
  height: clamp(440px, calc((100vw - 396px) * .632), 700px);
  aspect-ratio: auto;
  margin-left: 0;
  justify-self: stretch;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
.simrow .sim__risk-map {
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 48%, rgba(0, 0, 0, .45) 65%, transparent 82%);
  mask-image: linear-gradient(to right, #000 0%, #000 48%, rgba(0, 0, 0, .45) 65%, transparent 82%);
}

.simrow .simdetail { left: 12px; right: auto; }

/* The orbit faces inward from the map's right edge. */
.simrow .peril-radial__orbit {
  position: absolute;
  inset: 0;
  height: auto;
  margin-top: 0;
  -webkit-mask-image: linear-gradient(to left, transparent 0, #000 64px, #000 100%);
  mask-image: linear-gradient(to left, transparent 0, #000 64px, #000 100%);
}
.simrow .peril-radial__option { top: 50%; left: 100%; width: 80px; height: 80px; }

/* The selection slot sits 118px in from the right edge, mid-height;
   sized for the 80px orbs */
.simrow .peril-radial__orbit::before {
  left: calc(100% - 118px);
  top: 50%;
  width: 108px;
  height: 108px;
}
.simrow .peril-radial__option img { width: 80px; height: 80px; }
.simrow .peril-radial__option--more { font-size: 15px; }
.simrow .peril-radial__label {
  position: absolute;
  z-index: 2;
  top: 50%;
  height: 56px;
  left: auto;
  right: 196px;
  width: 260px;
  margin: 0;
  translate: 0 -50%;
  text-align: right;
  font-size: 18px;
  letter-spacing: -.36px;
}
.simrow .peril-radial__label span {
  top: 50%;
  left: auto;
  right: 0;
  translate: 0 -50%;   /* separate from transform, so the swap animation's
                          translateY still composes on top */
  width: max-content;
  height: auto;
  line-height: 24px;
}

.biz--stack .simrow .peril-radial {
  position: absolute;
  align-self: stretch;
  inset: 0 0 0 auto;
  z-index: 5;
  width: min(460px, 40%);
  margin: 0;
  overflow: clip;
  pointer-events: none;
}

.simrow .peril-radial__option { pointer-events: auto; }

/* with the feats sheet gone, the lede centres on the window */
.biz--ruled .biz__copy {
  justify-content: center;
  padding-top: 0;
}

/* the same dashed rule above a section, without restacking it */
.biz--ruled {
  position: relative;
  padding-top: clamp(56px, 6vw, 84px);
}
.biz--ruled::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: repeating-linear-gradient(90deg,
    var(--frame-line) 0 6px, transparent 6px 16px);
}

.peril-radial {
  width: min(100%, 340px);
  margin-top: clamp(30px, 4.4vw, 54px);
  margin-bottom: -88px;
  align-self: center;
}

.peril-radial__label {
  position: relative;
  z-index: 2;
  height: 52px;
  margin: -16px 0;
  overflow: visible;
  color: rgba(0, 0, 0, .82);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -.14px;
  line-height: 20px;
  text-align: center;
  text-wrap: balance;
  transform: translateX(calc(var(--orbit-label-x, 0px) + 4px));   /* optical: 4px right */
  transition: transform 260ms var(--ease-out-cubic);
}

.peril-radial__label span {
  position: absolute;
  top: 16px;
  right: 0;
  left: 0;
  height: 20px;
  display: block;
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
  transition:
    transform 220ms var(--ease-out-cubic),
    opacity 180ms ease-out,
    filter 180ms ease-out;
}

.peril-radial__label span.is-entering {
  opacity: 0;
  filter: blur(5px);
  transform: translateY(55%);
}

.peril-radial__label span.is-leaving {
  opacity: 0;
  filter: blur(4px);
  transform: translateY(-40%);
}

.peril-radial__label span.is-entering,
.peril-radial__label span.is-leaving {
  will-change: transform, opacity, filter;
}

.peril-radial__orbit {
  position: relative;
  width: 100%;
  height: 258px;
  margin-top: 2px;
}

.peril-radial.is-instant .peril-radial__option,
.peril-radial.is-instant .peril-radial__label,
.peril-radial.is-instant .peril-radial__label span {
  transition: none;
}

.peril-radial__option {
  position: absolute;
  top: 140px;
  left: 50%;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  opacity: 1;
  transform: translate3d(calc(-50% + var(--orbit-x, 0px)), calc(-50% + var(--orbit-y, -84px)), 0);
  transition: opacity 180ms ease-out;
}

.peril-radial__option--more {
  color: rgba(0, 0, 0, .54);
  background: #ededf0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -.14px;
  line-height: 1;
  transition: opacity 180ms ease-out, scale 140ms var(--ease-out-cubic);
}

.peril-radial__option--more:active { scale: .96; }

/* the selection ring is the orbit's own: it stays at twelve o'clock while
   orbs slide beneath it, pinching to 2px mid-slide and springing back */
.peril-radial__orbit::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 56px;               /* the selection slot's centre */
  width: 92px;
  height: 92px;
  translate: -50% -50%;
  border: var(--ring-w, 8px) solid var(--frame-line);
  border-radius: 50%;
  pointer-events: none;
  transition: border-width 300ms cubic-bezier(.34, 1.56, .64, 1);
}

/* the per-option ring remains only as the keyboard focus indicator */
.peril-radial__option::after {
  content: "";
  position: absolute;
  inset: -14px;
  border: 8px solid var(--frame-line);
  border-radius: 50%;
  opacity: 0;
  scale: .94;
  pointer-events: none;
  transition:
    opacity 180ms ease-out,
    scale 220ms var(--ease-out-cubic),
    border-color 180ms ease-out;
}

.peril-radial__option img {
  display: block;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  outline: 1px solid rgba(0, 0, 0, .06);
  object-fit: cover;
  transition: scale 140ms var(--ease-out-cubic);
}

.peril-radial__option[aria-checked="true"] {
  z-index: 3;
  opacity: 1;
}

.peril-radial__option:focus-visible::after {
  opacity: 1;
  scale: 1;
}

.peril-radial__option:focus-visible {
  outline: none;
}

.peril-radial__option:focus-visible::after {
  inset: -4px;
  border-width: 3px;
  border-color: #0071e3;
}

.peril-radial__option:active img {
  scale: .9;
}

@media (hover: hover) and (pointer: fine) {
  .peril-radial__option:hover img { scale: .94; }
  .peril-radial__option:active img { scale: .9; }
}

[data-appear].biz .peril-radial {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity .45s var(--ease-out-cubic),
    transform .45s var(--ease-out-cubic);
  transition-delay: 90ms;
}

[data-appear].biz.is-here .peril-radial {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .peril-radial,
  .peril-radial__option,
  .peril-radial__option::after,
  .peril-radial__option img,
  .peril-radial__label,
  .peril-radial__label span {
    transition: none;
  }
}

@media (max-width: 1100px) {
  .peril-radial {
    align-self: start;
    margin-top: 32px;
    margin-bottom: -88px;
  }
}

@media (max-width: 1320px) {
  .biz.biz--stack { gap: 0; }
  .model__block > .simcard { padding-inline: var(--frame-gut); }
  .simrow { grid-template-columns: minmax(0, 1fr); }

  .biz--stack .simrow .simwin { min-height: 440px; }
  .simrow .simdetail { width: min(292px, calc(100% - 24px)); }
  .simrow .simdetail[data-collapsed="true"] { height: 92px; }
  .simrow .simdetail__toggle { min-height: 72px; }
  .simrow .simdetail__title { white-space: normal; }
}

/* below 900 the study sheet goes and the ring sits at the foot of the map:
   selected orb top-centre under its label, the rest arcing down and fading
   out at the bottom edge */
@media (max-width: 900px) {
  .simrow .simdetail { display: none; }

  .biz--stack .simrow .peril-radial {
    inset: auto 0 0 0;
    width: auto;
    height: 232px;
    margin: 0;
    overflow: clip;
    border-left: 0;
    border-bottom: 0;
  }

  .simrow .peril-radial__label {
    position: absolute;
    inset: 12px 0 auto 0;
    width: auto;
    height: 24px;
    margin: 0;
    translate: none;
    text-align: center;
    font-size: 16px;
  }
  .simrow .peril-radial__label span {
    inset: 0;
    width: auto;
    height: 24px;
    line-height: 24px;
    translate: none;
  }

  .simrow .peril-radial__orbit {
    position: absolute;
    inset: 0;
    height: auto;
    margin: 0;
    -webkit-mask-image: linear-gradient(to top, transparent 0, #000 56px, #000 100%);
    mask-image: linear-gradient(to top, transparent 0, #000 56px, #000 100%);
  }
  .simrow .peril-radial__orbit::before { left: 50%; top: 92px; width: 92px; height: 92px; }
  .simrow .peril-radial__option { top: 176px; left: 50%; width: 64px; height: 64px; }
  .simrow .peril-radial__option img { width: 64px; height: 64px; }
  .simrow .peril-radial__option--more { font-size: 14px; }
}

@media (max-width: 640px) {
  .biz--stack .simrow .simwin {
    --map-height: 320px;
    height: auto;
    aspect-ratio: auto;
    min-height: 0;
    padding-top: var(--map-height);
  }

  .simrow .sim__risk-map { height: var(--map-height); }

  .simrow .simdetail {
    position: relative;
    inset: auto;
    width: calc(100% - 24px);
    height: 380px;
    margin: 12px;
  }
}

/* ============================================================= the reports
   No product chrome here — the pages themselves are the illustration, one
   forward with the other two tucked behind it. */



/* Feature cards continue directly below the digital twin. */
.feats {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: 16px;
  width: 100%;
  margin-top: 0;
  overflow: visible;
}

.feats__grid li {
  background: #f8f9fd;
  border-radius: 24px;
}

.feats__grid { display: contents; }

.feats__grid li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  padding: 48px var(--frame-gut);
}


.feats__eyebrow {
  display: flex;
  flex-direction: column;   /* icon stacked above the eyebrow text */
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  color: var(--acc, rgba(0, 0, 0, .6));
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -.2px;
}

/* icons recoloured through a mask; each shown at natural size × .7 so the
   stroke weight matches across the set */
.feats__ico {
  flex: none;
  background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
}

.feats__lede { max-width: 30em; margin-inline: auto; text-wrap: balance; }

.feats__grid li { text-align: center; }

@media (max-width: 780px) {
  .feats { grid-template-columns: 1fr; }
}

/* Reports: a centred column under a dashed rule */
.model__block--reports {
  /* the site's dashed rule, as above the other stacks */
  background: repeating-linear-gradient(90deg,
    var(--frame-line) 0 6px, transparent 6px 16px) top / 100% 1px no-repeat;
  padding-top: clamp(72px, 9vw, 120px);
}

.model__block--reports .biz {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.model__block--reports .biz__copy {
  order: -1;
  max-width: 640px;
  padding-top: 0;
  align-items: center;
}

.model__block--reports .biz__body { text-wrap: balance; }
.rep { margin-top: 32px; }

.rep__eyebrow {
  margin: 0;
  color: #999;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: -.072px;
}

.rep__title {
  margin: 8px 0 0;
  color: #1b1b1b;
  font-size: 24px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.24px;
}

.rep__map {
  display: block;
  width: 100%;
  height: 300px;
  margin-top: 20px;
  border-radius: 8px;
  object-fit: cover;
  background-size: cover;
}

/* stand-in plates until there is a render per peril */
.rep__map--flood {
  background-image:
    radial-gradient(64% 58% at 42% 56%, rgba(28, 92, 214, .8), rgba(30, 64, 175, .4) 55%, transparent 76%),
    radial-gradient(36% 40% at 68% 38%, rgba(14, 116, 233, .55), transparent 70%),
    linear-gradient(160deg, #e6e4dd 0%, #d6d3c9 50%, #c6c3ba 100%);
}

.rep__map--fire {
  background-image:
    radial-gradient(56% 64% at 52% 46%, rgba(233, 106, 22, .85), rgba(196, 74, 14, .45) 54%, transparent 75%),
    radial-gradient(34% 44% at 32% 64%, rgba(140, 44, 10, .6), transparent 68%),
    linear-gradient(160deg, #e9e3d6 0%, #dccfba 48%, #cec0aa 100%);
}

.rep__body { margin-top: 24px; max-width: 780px; }

.rep__body h5 {
  margin: 0 0 10px;
  color: #1b1b1b;
  font-size: 14px;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: -.084px;
}

.rep__body p {
  margin: 0 0 10px;
  color: #6e6e73;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -.084px;
  text-wrap: pretty;
}

.rep__body sup { font-size: 9px; vertical-align: super; }

.rep__body mark {
  background: none;
  color: #ec486c;      /* the figure the report is really about */
}

/* ---- Act: the report as a modal over the dimmed product (Figma 2897:67383).
   The window is a real .app, so it enters like the other products; the
   modal runs past the foot, as an open scrolling sheet does. */
.app--act { color: #1b1b1b; }

.repmodal__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, .24);
}

.app--act .repmodal { z-index: 2; }

/* the Overlay frame: 16 in from the window's top and sides */
.repmodal {
  position: absolute;
  left: 16px;
  right: 16px;
  top: 16px;
  bottom: -180px;
  padding: 14px 0 0;
  border-radius: 16px;
  background: var(--white);
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .06), 0 24px 64px rgba(0, 0, 0, .22);
  overflow: hidden;
}

.repmodal__page { width: 600px; margin: 0 auto; padding-top: 14px; }

/* sheet chrome, ornamental here: Back on dark glass, the actions on the right */
.repmodal__back,
.repmodal__more,
.repmodal__resolve {
  position: absolute;
  top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  border-radius: 8px;
  color: var(--white);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: .07px;
}

.repmodal__back {
  left: 9px;
  gap: 6px;
  padding: 0 12px;
  background: rgba(0, 0, 0, .32);
  -webkit-backdrop-filter: blur(50px);
  backdrop-filter: blur(50px);
}

.repmodal__more {
  right: 110px;
  width: 36px;
  background: #e8e8ed;   /* Fill/Tertiary */
}

.repmodal__resolve {
  right: 8px;
  width: 96px;
  background: rgba(14, 16, 24, .82);   /* Fill/Dark */
}

.repmodal .rep__title { margin-top: 6px; }

/* the plate is the comp's image fill, pre-cropped to its frame at 2× */
.rep__map--plate {
  height: 276px;
  margin-top: 38px;
  outline: .5px solid #f5f5f7;
  outline-offset: -.5px;
}

.rep__cards {
  display: grid;
  gap: 12px;
  margin-top: 24px;
}

.rep__card {
  margin: 0;
  max-width: none;
  padding: 16px;
  border: .5px solid #ebebeb;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(10, 13, 20, .03);
}

.rep__card h5 {
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: -.16px;
}

.rep__card p:last-child { margin-bottom: 0; }
.rep__card sup { color: #5856d6; }
.rep__card mark { font-weight: 500; }

.rep__sources {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: #6e6e73;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -.084px;
}

.rep__sources li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 16px;
}

.rep__ref { font-variant-numeric: tabular-nums; }
.rep__ref b { font-weight: 400; color: #5856d6; }
.rep__sources strong { font-weight: 500; }

/* ======================================================== policy gaps
   Figma 740:15841. The nav is expanded here (209), so Main starts at 213.
   Counts are Label M emphasized over Heading 24; the cards are Label S
   throughout on white, 12 radius, in a Fill/Secondary panel. */

.pane {
  position: absolute;
  inset: 40px 0 0;
  padding: 0 120px;
  overflow: hidden;
}

.pane__crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  margin: 0;
  color: #999;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: -.072px;
}

.pane__crumb svg { flex: none; }
.pane__crumb i { font-style: normal; }
.pane__crumb b { color: #1b1b1b; font-weight: 400; }

.pane__title,
.gaps__h {
  margin: 0;
  color: #1b1b1b;
  font-size: 24px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.24px;
}

.pane__title { margin-top: 20px; }

.pane__tabs {
  display: flex;
  gap: 24px;
  margin-top: 24px;
  padding: 14px 0;
  border-bottom: 1px solid #ebebeb;
  color: #6e6e73;
  font-size: 14px;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: -.084px;
}

.pane__tabs .is-on { position: relative; color: #1b1b1b; }

.pane__tabs .is-on::after {
  content: "";
  position: absolute;
  inset: auto 0 -14px;
  height: 2px;
  background: #1b1b1b;
}

.gaps__h { margin-top: 32px; }

.gaps__sub {
  margin: 8px 0 0;
  color: #6e6e73;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -.084px;
}

/* the four classed counts */
.gaps__counts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 24px;
}

.gaps__count { border-radius: 12px; }

/* each pill filters to its class, so the whole pill is the target */
.gaps__count button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 48px;
  padding: 8px 16px;
  border: 0;
  border-radius: inherit;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: opacity .18s ease-out, transform .16s var(--ease-out-quint);
}

.gaps__count button:active { transform: scale(.985); }
.gaps__count button:focus-visible { outline: 2px solid #0071e3; outline-offset: 2px; }

/* unselected classes step back rather than change colour — the tint is the
   identity of the class and has to stay readable */
.gaps__counts:has(.is-on) .gaps__count:not(.is-on) button { opacity: .55; }

@media (hover: hover) and (pointer: fine) {
  .gaps__counts:has(.is-on) .gaps__count:not(.is-on) button:hover { opacity: .8; }
}

.gaps__count span { font-size: 14px; letter-spacing: -.084px; }
.gaps__count b { font-size: 24px; line-height: 1; letter-spacing: -.24px; font-variant-numeric: tabular-nums; }

.gaps__count--all  { background: #999; color: var(--white); }
.gaps__count--crit { background: rgba(236, 72, 108, .1); color: #ec486c; }
.gaps__count--mis  { background: rgba(241, 131, 5, .1); color: #f18305; }
.gaps__count--opp  { background: rgba(0, 170, 255, .1); color: #0af; }

.gaps__panel {
  position: relative;   /* the overlays are placed against this */
  margin-top: 16px;
  padding: 24px;
  border-radius: 12px;
  background: var(--surface);
}

.gaps__filters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
}

/* One pill; the selected segment is the white one, the rest sit on the grey
   ground. (The comp shows this the other way up — its first segment is the
   unselected one.) */
.gaps__seg {
  display: flex;
  border-radius: 999px;
  background: #e6e6e8;
  overflow: hidden;
}

.gaps__seg > button {
  padding: 8px 14px;
  border: 0;
  background: none;
  color: #999;
  font: inherit;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: -.072px;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .18s ease-out, color .18s ease-out;
}

.gaps__seg > button b { font-weight: 400; font-variant-numeric: tabular-nums; }

@media (hover: hover) and (pointer: fine) {
  .gaps__seg > button:hover { color: #6e6e73; }
}

.gaps__seg > .is-on {
  background: var(--white);
  color: #6e6e73;
}

.gaps__seg > button:focus-visible { outline: 2px solid #0071e3; outline-offset: -2px; }

.gaps__empty {
  margin: 0;
  padding: 40px 0;
  color: #999;
  font-size: 14px;
  letter-spacing: -.084px;
  text-align: center;
}

.gaps__empty[hidden] { display: none; }

.gaps__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}

.gaps__col { display: flex; flex-direction: column; gap: 12px; }

.gap {
  padding-bottom: 16px;
  border-radius: 12px;
  background: var(--white);
}

.gap header {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 48px;
  padding: 0 12px 0 16px;
}

.gap h4 {
  margin: 0;
  color: #1b1b1b;
  font-size: 14px;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: -.084px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gap header i {
  color: #999;
  font-size: 11px;
  font-style: normal;
}

.gap time {
  flex: 1;
  color: #999;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: -.072px;
  white-space: nowrap;
}

/* ------------------------------------------------- the card's six states
   Figma 740:16875. Resting shows the class dot; hovering the card swaps it
   for the ••• trigger; the trigger tints on hover and opens the menu; a value
   opens the clause it came from. */

/* 26 × 26 at radius 5, per the comp's marker frame */
.gap__act {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: none;
  cursor: pointer;
  transition: background-color .18s ease-out;
}

.gap__act > * { grid-area: 1 / 1; }

/* The dot and the ••• are two objects trading places in one 26px slot. A
   straight crossfade reads as exactly that — two things overlapping — so each
   also scales and blurs through the swap: the blur bridges the gap and the eye
   reads one mark transforming. Neither starts from nothing. */
.gap__dot,
.gap__dots {
  transition:
    opacity .16s ease-out,
    scale .16s var(--ease-out-quint),
    filter .16s ease-out;
}

.gap__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.gap__dot--crit { background: #ec486c; }
.gap__dot--mis  { background: #f18305; }
.gap__dot--opp  { background: #0af; }

.gap__dots {
  color: #ec486c;
  font-size: 9px;
  line-height: 1;
  letter-spacing: 1px;
  opacity: 0;
  scale: .82;
  filter: blur(2px);
}

/* the swap */
@media (hover: hover) and (pointer: fine) {
  .gap:hover .gap__dot { opacity: 0; scale: .82; filter: blur(2px); }
  .gap:hover .gap__dots { opacity: 1; scale: 1; filter: blur(0); }
  .gap__act:hover { background: rgba(236, 72, 108, .1); }
}

.gap__act[aria-expanded="true"] { background: rgba(236, 72, 108, .1); }
.gap__act[aria-expanded="true"] .gap__dot { opacity: 0; scale: .82; filter: blur(2px); }
.gap__act[aria-expanded="true"] .gap__dots { opacity: 1; scale: 1; filter: blur(0); }

@media (prefers-reduced-motion: reduce) {
  .gap__dot,
  .gap__dots { transition: opacity .16s ease-out; filter: none; scale: 1; }
}

.gap__act:focus-visible,
.gap__v:focus-visible {
  outline: 2px solid #0071e3;
  outline-offset: 1px;
}

.gap dl {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0;
  padding: 0 16px;
}

.gap dl > div { display: flex; align-items: center; gap: 8px; }

.gap dt {
  color: #6e6e73;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: -.072px;
  white-space: nowrap;
}

.gap dd { margin: 0; min-width: 0; }

.gap__v {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 4px;
  border: 0;
  border-radius: 4px;
  background: none;
  color: #1b1b1b;
  font: inherit;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: -.072px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: background-color .18s ease-out;
}

.gap__v em { font-style: normal; color: #999; font-size: 11px; }

@media (hover: hover) and (pointer: fine) {
  .gap__v:hover { background: var(--surface); }
}

.gap__v[aria-expanded="true"] { background: var(--surface); }

/* ------------------------------------------------ the source, and the menu
   Both are Fill/Dark at 82% on a 25px blur, carrying the comp's seven-stop
   shadow stack. Positioned against the panel by gaps.js. */


.gaptip,
.gapmenu {
  position: absolute;
  z-index: 6;
  background: rgba(14, 16, 24, .82);
  backdrop-filter: blur(25px);
  box-shadow:
    0 0 0 1px rgba(51, 51, 51, .04),
    0 1px 1px .5px rgba(51, 51, 51, .04),
    0 3px 3px -1.5px rgba(51, 51, 51, .02),
    0 6px 6px -3px rgba(51, 51, 51, .04),
    0 12px 12px -6px rgba(51, 51, 51, .04),
    0 24px 24px -12px rgba(51, 51, 51, .04),
    0 48px 48px -24px rgba(51, 51, 51, .04);
  opacity: 0;
  scale: .97;
  transition: opacity .16s ease-out, scale .16s var(--ease-out-quint);
}

.gaptip[hidden],
.gapmenu[hidden] { display: none; }

.gaptip.is-on,
.gapmenu.is-on { opacity: 1; scale: 1; }

/* the clause it came from */
.gaptip {
  width: 303px;
  padding: 10px;
  border-radius: 16px;
  transform-origin: 50% 0;
}

.gaptip__file {
  margin: 0 0 8px;
  color: var(--white);
  font-size: 14px;
  line-height: 14px;
  letter-spacing: -.084px;
}

.gaptip__file span { color: rgba(255, 255, 255, .65); }

.gaptip__quote {
  margin: 0;
  color: rgba(255, 255, 255, .65);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -.084px;
}

/* the matched phrase: highlight plate under, citrus ink over */
.gaptip__quote mark {
  border-radius: 4px;
  background: rgba(210, 245, 168, .1);
  color: rgba(250, 255, 104, .9);
  box-shadow: 0 0 0 2px rgba(210, 245, 168, .1);
}

.gapmenu {
  display: flex;
  flex-direction: column;
  width: 235px;
  padding: 4px;
  border-radius: 14px;
  transform-origin: 100% 0;
}

.gapmenu__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--white);
  font: inherit;
  font-size: 14px;
  line-height: 14px;
  letter-spacing: -.084px;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  /* the highlight lands the instant you arrive and lingers on the way out, so
     tracking down the list never flickers */
  transition: background-color .3s ease-out, color .3s ease-out;
}

.gapmenu__item:hover { transition-duration: 0s; }

.gapmenu__item img { flex: none; }

/* the comp hides this icon; the slot stays so the labels line up */
.gapmenu__item i { flex: none; width: 14px; height: 14px; }

.gapmenu__item--stop { color: #fb3748; }

@media (hover: hover) and (pointer: fine) {
  .gapmenu__item:hover { background: rgba(255, 255, 255, .08); }
  .gapmenu__item--stop:hover { background: rgba(251, 55, 72, .6); color: var(--white); }
}

.gapmenu__item:focus-visible { outline: 2px solid #0071e3; outline-offset: -2px; }

/* an ignored card leaves before the others close the space */
.gap.is-out {
  opacity: 0;
  scale: .97;
  pointer-events: none;
  transition: opacity .18s ease-out, scale .18s var(--ease-out-quint);
}

@media (prefers-reduced-motion: reduce) {
  .gap,
  .gaptip,
  .gapmenu { transition: none; }
}

@media (max-width: 1100px) {
  .biz,
  .biz--flip { grid-template-columns: 1fr; gap: 48px; }
  .biz__copy { padding-top: 0; }   /* stacked: nothing left to align to */
  .biz__feats { margin-top: 40px; }
  .biz--flip .app,
  .biz--flip .simwin { justify-self: start; }
  .biz--flip .biz__copy { order: -1; }   /* copy leads when stacked */
}

@media (max-width: 900px) {
  .app { zoom: .62; }
}

/* Figma inset the render 32 left / 82.2 right inside the card; the export is
   1186 × 646, exactly that content box, so it needs no fitting. */
.twin__map {
  position: absolute;
  inset: 0 6.3% 0 2.5%;
  width: auto;
  height: 100%;
  object-fit: contain;

  /* `--plate` is a stand-in until there is a render per peril: today it is a
     grey wash so the switch is visibly doing something. When the real exports
     land this becomes two stacked imgs crossfading on opacity; today the
     "crossfade" is the filter itself interpolating — same picture, morphing
     between washes, with no dip to blank in the middle. */
  filter: var(--plate, none);
  transition: filter .34s ease;
}

/* Pinned slightly above the foot of the viewport — the same spot for as long
   as the twin is on screen. It does not travel with the frame: it appears
   there, and it leaves from there, sinking back to rest below the fold the
   same way it came. twin.js owns the when.

   Everything inside travels too — less, and a little later — so the group and
   its parts read as separate planes rather than one rigid block. */
.twin__legend {
  position: fixed;
  inset-inline: 0;
  margin-inline: auto;    /* centred without a transform, so translate and
                             scale stay free for the motion */
  bottom: 30px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
  width: 370px;

  /* A real underdamped spring sampled into linear(), rather than a
     cubic-bezier guessing at one. ζ .62: one ~9% overshoot, then straight to
     rest — it lands, it doesn't wobble. */
  --spring: linear(0, 0.0137, 0.0508, 0.1058, 0.174, 0.2509, 0.3328, 0.4167, 0.4999,
    0.5804, 0.6565, 0.7272, 0.7915, 0.849, 0.8995, 0.943, 0.9796, 1.0098,
    1.0339, 1.0526, 1.0662, 1.0755, 1.081, 1.0834, 1.0831, 1.0806, 1.0765,
    1.0711, 1.0649, 1.0582, 1.0512, 1.0442, 1.0374, 1.0309, 1.0248,
    1.0193, 1.0143, 1.0098, 1.006, 1.0027, 1.0, 0.9978, 0.9961, 0.9948,
    0.9939, 0.9934, 0.9931, 0.993, 1);

  /* The size runs a touch looser (ζ .52, ~13% over): the boing lives in the
     scale, but one bounce and done — the back-and-forth is gone. */
  --spring-boing: linear(0, 0.0166, 0.0619, 0.1293, 0.2127, 0.3066, 0.4061, 0.507, 0.6058,
    0.6996, 0.7865, 0.8647, 0.9334, 0.992, 1.0404, 1.0789, 1.108, 1.1284,
    1.1411, 1.147, 1.1471, 1.1425, 1.1341, 1.1228, 1.1097, 1.0953, 1.0804,
    1.0656, 1.0514, 1.038, 1.0257, 1.0149, 1.0054, 0.9975, 0.9911, 0.9861,
    0.9824, 0.98, 0.9786, 0.9782, 0.9785, 0.9795, 0.981, 0.9828, 0.9848,
    0.987, 0.9892, 0.9913, 1);

  translate: 0 calc(100% + 30px);
  scale: .28 .88;         /* the growth is the width: Y arrives nearly full
                             and X draws out from just over a quarter, so the
                             whole thing visibly stretches open sideways */
  transform-origin: 50% 100%;
  opacity: 0;
  pointer-events: none;
  transition: translate .6s var(--spring),
              scale .6s var(--spring-boing),
              opacity .16s ease-out;
}

/* Leaving is not the spring played backwards: it accelerates away — eases in,
   sinks, gone. Quicker than arriving, and the opacity hangs on just long
   enough for the sink to be seen. */
.twin__legend:not(.is-up) {
  transition: translate .32s cubic-bezier(.5, 0, .75, .35),
              scale .32s cubic-bezier(.5, 0, .75, .35),
              opacity .2s ease-in;
}

.twin__legend.is-up {
  translate: 0 0;
  scale: 1;
  opacity: 1;
  pointer-events: auto;
}

/* Same wash as the pill, and the same reasoning — no border, no shadow, but it
   has to hold over the render. Least travel, longest delay: the outermost
   thing on the innermost plane. */
.twin__hazard {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 14px;
  border-radius: 999px;
  background:
    linear-gradient(rgba(70, 70, 105, .05) 0 100%),
    rgba(255, 255, 255, .6);
  backdrop-filter: blur(20px);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -.2px;
  opacity: 0;
  translate: 0 12px;
  transition: opacity .26s ease-out .12s, translate .5s var(--spring) .12s;
}

.twin__legend.is-up .twin__hazard {
  opacity: 1;
  translate: 0 0;
}

/* Figma: padding 14, radius 1000, a 0.5px hairline and a barely-there frosted
   wash — no drop shadow at all. Row gap 16. */
.twin__perils {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 28px 14px 14px;   /* 65 tall either way; the extra right is for
                                     the label, which has no round edge of its
                                     own to sit inside */
  border: .5px solid rgba(0, 0, 0, .06);
  border-radius: 1000px;

  /* Two fills over a 20px blur: 60% white, then #464669 at 5% on top. The
     cool grey veil is what stops the render's greens and blues tinting the
     plate — without it, a blur this soft lets saturated colour through in
     blotches.

     The lift in the backdrop is the other half of that. 60% white is a
     transparency, so the plate inherits whatever is under it: over the bright
     render it lands where the comp puts it, but over a dark frame it sank to a
     grey slab and the #EBEBEB circles ended up *lighter* than their own plate —
     a darkening blend has nothing to bite on once the plate is already dark.
     Lifting the backdrop before the fills go on normalises that, so the pill
     is the same material whatever it happens to be sitting over. */
  background:
    linear-gradient(rgba(70, 70, 105, .05) 0 100%),
    rgba(255, 255, 255, .6);
  backdrop-filter: blur(20px) brightness(1.32) saturate(.72);

  /* Grows left to right. clip-path rather than a width or scaleX, so the
     circles inside never squash and nothing reflows. */
  clip-path: inset(0 100% 0 0 round 999px);

  /* Squash and stretch. It arrives drawn out tall, and because the spring
     overshoots, the scale carries *past* 1 and compresses to ~0.96 before
     settling — the landing squish, out of the same curve rather than a second
     keyframe. Vertical only: the horizontal axis is busy unmasking.

     The extra 22px of travel is the parallax: the group is already flying up,
     and the pill lags it by a fraction and moves less, so the two read as
     separate planes rather than one rigid block. */
  scale: 1 1.24;
  transform-origin: 50% 100%;
  translate: 0 22px;
  transition:
    clip-path .5s var(--spring) .03s,
    scale .58s var(--spring),
    translate .6s var(--spring) .07s;
}

.twin__legend.is-up .twin__perils {
  clip-path: inset(0 0 0 0 round 999px);
  scale: 1 1;
  translate: 0 0;
}

/* Figma: 36 × 36, 8 padding, 1px #EBEBEB hairline — every one of them ringed,
   not just the selected one. */
.peril {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;               /* the glyph is centred by the grid, not by padding
                               — border-box would have eaten 2px of the 20 */
  /* Figma strokes these #EBEBEB and burns them in with `plus darker`, so they
     darken against whatever is behind them. A blend mode can't do that here:
     `mix-blend-mode` only reaches the nearest ancestor stacking context, and
     the pill creates one three times over (backdrop-filter, clip-path, and its
     transform). The icons could only ever blend with the pill's own plate — so
     over the render they came out untouched, near-white.

     Written as blacks with alpha instead, which is the same arithmetic:
     multiplying by a constant *is* a black overlay at 1 − that constant.
     #EBEBEB is .92, so rgba(0,0,0,.08); #8A8A8F is .54, so rgba(0,0,0,.46).
     Identical result, except alpha composites *through* the plate's own
     transparency to the render underneath — which is the thing the blend was
     for and the thing it couldn't do. */
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 999px;
  background: none;
  color: rgba(0, 0, 0, .46);
  font: inherit;
  cursor: pointer;
  -webkit-appearance: none;

  /* Each circle lands just behind the sweep passing over it, and carries its
     own shorter parallax hop — smallest travel, longest delay, so it reads as
     the innermost plane. */
  scale: .3;
  opacity: 0;
  translate: 0 9px;
  transition:
    scale .5s var(--spring) calc(.12s + var(--i) * .045s),
    translate .5s var(--spring) calc(.12s + var(--i) * .045s),
    opacity .16s ease-out calc(.12s + var(--i) * .045s);
}

.twin__legend.is-up .peril {
  scale: 1;
  opacity: 1;
  translate: 0 0;
}

/* Each glyph at the size it was drawn — the globe is a 16 box and the rest
   are 20, so a single width would have scaled it wrong. Stroke width, caps and
   joins are left to the artwork; overriding them re-weighted every icon. */
.peril svg {
  display: block;
  width: 20px;
  height: 20px;
  fill: none;
}

.peril svg[viewBox="0 0 16 16"] {
  width: 16px;
  height: 16px;
}

/* The icon files ship a fixed grey each, but the selection moves — so they are
   inlined and take their tone from the button instead.
   Selected: filled white, and ringed twice (a white halo, then a dark ring).
   Not transitioned — it lands the instant the mouse comes up. The frame it
   drives is the thing that fades; the control you pressed shouldn't lag. */
/* Fill at 60% white — the same strength as the plate it sits on, so the active
   circle reads as a lift out of the pill rather than a hole punched in it. Its
   own 1px edge goes transparent: the ring outside is the edge now.

   The ring is an outline, not a pseudo-element: outline-offset is literally
   "gap between the box and the ring", so the 1.5 + 1.5 is stated rather than
   derived from an inset. And an outline rides transforms, so when the button
   pops the ring pops with it — one animation moves both. */
.peril.is-on {
  border-color: transparent;
  background: rgba(255, 255, 255, .6);
  color: rgba(29, 29, 29, .85);
  outline: 1.5px solid rgba(0, 0, 0, .5);
  outline-offset: 1.5px;
}


/* The hand-over boings. A keyframe rather than a transition on purpose — the
   value doesn't change (scale rests at 1 either side), the *event* is the
   animation, and re-adding the class restarts it. The spring easing carries it
   through .72 → past 1 → back, so the squash and the overshoot both fall out
   of one curve. Scoped to .is-up so it can't fire invisibly while the legend
   is away, and so the active one gives an extra boing as the legend arrives. */
@keyframes peril-pop {
  from { scale: .72; }
  to   { scale: 1; }
}

.twin__legend.is-up .peril.is-on {
  animation: peril-pop .6s var(--spring-boing);
}

@media (hover: hover) and (pointer: fine) {
  .peril:hover:not(.is-on) { border-color: rgba(0, 0, 0, .22); color: rgba(0, 0, 0, .78); }
}

/* Press feedback on the glyph rather than the button: the button's own `scale`
   is already carrying the entry stagger, and the two would fight. */
.peril:active svg { scale: .9; }
.peril svg { transition: scale .12s ease-out; }

.peril:focus-visible {
  outline: 2px solid #0071e3;
  outline-offset: 3px;
}

.twin__more {
  margin-left: 2px;
  color: rgba(0, 0, 0, .45);
  font-size: 12px;
  letter-spacing: -.24px;
  white-space: nowrap;
  opacity: 0;
  translate: 0 9px;
  transition:
    opacity .2s ease-out calc(.12s + var(--i) * .045s),
    translate .5s var(--spring) calc(.12s + var(--i) * .045s);
}

.twin__legend.is-up .twin__more { opacity: 1; translate: 0 0; }

/* Leaving: no stagger, no spring, and quicker than arriving. */
.twin__legend:not(.is-up) .twin__hazard,
.twin__legend:not(.is-up) .twin__perils,
.twin__legend:not(.is-up) .peril,
.twin__legend:not(.is-up) .peril svg,
.twin__legend:not(.is-up) .twin__more {
  transition-duration: .18s;
  transition-delay: 0s;
  transition-timing-function: ease-out;
}

/* ---------------------------------------------------------- policy audit */

.audit {
  display: flex;
  justify-content: center;
  height: 646px;
  padding-inline: 42px;
  border-radius: 8px;
  background: var(--surface);
  overflow: hidden;
}

/* Deliberately taller than the panel — the comp clips it. The mask is what
   turns "cut off" into "carries on past the fold". */
.audit__stack {
  translate: 0 var(--py, 0px);   /* the parallax plane — appear.js writes --py */
  display: flex;
  flex-direction: column;
  gap: 19.2px;
  width: 100%;
  max-width: 700px;
  padding-top: 42px;
  mask-image: linear-gradient(to bottom, #000 46%, rgba(0, 0, 0, .15) 88%, transparent 100%);
}

.audit__card {
  flex: none;
  padding: 24px;
  border-radius: 8px;
  background: var(--white);
}

/* The stack arrives card by card, top to bottom, as it scrolls into view —
   appear.js flips .is-here on the list; everything else is transitions.
   Never from nothing: each card rises 14px and firms up from .97. */
[data-appear] .audit__card {
  opacity: 0;
  translate: 0 14px;
  scale: .97;
  transition:
    opacity .3s ease-out,
    translate .55s cubic-bezier(.23, 1, .32, 1),
    scale .55s cubic-bezier(.23, 1, .32, 1);
}

[data-appear].is-here .audit__card {
  opacity: 1;
  translate: 0 0;
  scale: 1;
}

[data-appear].is-here .audit__card:nth-child(1) { transition-delay: 0s; }
[data-appear].is-here .audit__card:nth-child(2) { transition-delay: 90ms; }
[data-appear].is-here .audit__card:nth-child(3) { transition-delay: 180ms; }
[data-appear].is-here .audit__card:nth-child(4) { transition-delay: 270ms; }
[data-appear].is-here .audit__card:nth-child(5) { transition-delay: 360ms; }

.audit__top {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 16px;
}

.audit__title {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.3px;
}

.audit__due {
  color: rgba(0, 0, 0, .4);
  font-size: 13px;
  letter-spacing: -.26px;
}

.audit__flag {
  width: 8px;
  height: 8px;
  margin-left: auto;
  align-self: center;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 3px rgba(255, 122, 0, .18);
}

/* The comp marks the first card differently — three dots rather than one. */
.audit__flag--open {
  width: 18px;
  background: none;
  box-shadow: none;
  background-image: radial-gradient(circle, #e2564f 1.6px, transparent 1.7px);
  background-size: 6px 8px;
}

.audit__rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  font-size: 13px;
  line-height: 18px;
  letter-spacing: -.26px;
}

.audit__rows > div {
  display: flex;
  gap: 10px;
}

.audit__rows dt {
  flex: none;
  width: 104px;
  color: rgba(0, 0, 0, .4);
}

.audit__rows dd {
  margin: 0;
  color: rgba(0, 0, 0, .85);
}

.audit__ref {
  color: rgba(0, 0, 0, .35);
  font-size: 11px;
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 1180px) {
  .model > .frame { padding-block: 0 clamp(64px, 11vw, 100px); }

  .model__inner { --model-block-gap: clamp(72px, 11vw, 120px); }
  .twin { height: clamp(320px, 46vw, 648px); }
  .audit { height: clamp(420px, 56vw, 646px); padding-inline: clamp(16px, 3vw, 42px); }
}

@media (max-width: 640px) {
  .twin__legend { width: min(370px, 92vw); }
  .twin__perils { padding-right: 10px; }
  .audit__card { padding: 16px; }
  .audit__rows > div { flex-direction: column; gap: 2px; }
  .audit__rows dt { width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }

  /* The legend still appears and disappears, it just doesn't travel. */
  .twin__legend { translate: 0 0; scale: 1; }
  .twin__legend .peril,
  .twin__legend .twin__more,
  .twin__legend .twin__hazard { scale: 1; translate: 0 0; }
  .twin__perils { clip-path: none; scale: 1 1; translate: 0 0; }
}

/* ------------------------------------------------------ decision-ready reports
   Figma: node 713:29137. A 1300 × 646 surface stage, radius 8, holding a
   700-wide report page: white, top-padded 42, taller than the stage on
   purpose — the crop at the stage's foot is what says "page one of a
   document" rather than "card". Its neighbours peek at the edges at the same
   scale. Content: eyebrow / title / client logo, a full-bleed risk map, then
   an executive summary in 12px document type with the money line marked in
   red — page typography, deliberately smaller than anything else on the
   site, because it is an artefact being shown, not site copy.

   The maps are gradient stand-ins keyed by report (--report-plate); swap for
   real exports per report when they land. */

.reports {
  position: relative;
}

.reports__stage {
  height: 646px;
  padding-top: 42px;
  border-radius: 8px;
  background: var(--surface);
  overflow: hidden;
}

/* A real strip: every page rendered in full, side by side, and the strip
   slides. The neighbours at the edges are the actual next and previous
   pages, so what peeks is what arrives. The left margin is what centres the
   live page — the track's translate is then simply minus that page's
   offsetLeft, which reports.js reads off layout instead of re-deriving
   widths. */
.reports__track {
  /* The parallax plane. It rides on `top`, not translate, because translate
     is the slide and is transitioned — folding --py into it would put the
     scroll drift on the drawer curve and make it lag. */
  position: relative;
  top: var(--py, 0px);
  display: flex;
  align-items: flex-start;
  gap: 10px;                /* fallback — reports.js sets the real spacing so
                               the waiting page peeks exactly 36px past the
                               stage edge, the comp's sliver, at any width */
  width: max-content;
  margin-left: calc((100% - min(700px, 82vw)) / 2);
  transition: translate 640ms cubic-bezier(.32, .72, 0, 1);   /* iOS drawer */
}

/* ------------------------------------------------------------- the page */

.report {
  flex: none;
  width: min(700px, 82vw);
  min-height: 830px;
  /* Only the page on stage speaks at full strength — the neighbours wait at
     35%, brightening as they slide in and dimming as they leave, on the same
     clock as the travel. */
  opacity: .35;
  transition: opacity 640ms ease;   /* taller than the stage on purpose — the crop at the
                          stage's foot is the "page one of a document" cue.
                          Comp: an 872 page in a 646 stage. */
  margin: 0;
  padding: 42px 60px;
  border-radius: 6px 6px 0 0;
  background: var(--white);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 8px 32px rgba(0, 0, 0, .06);
}

.report.is-live { opacity: 1; }

/* During the loop's clone hand-over the strip is repositioned with the same
   pixels on screen — the pages' fades must be as silent as the track's
   slide, or the real page arrives at 35% and fades itself up on stage. */
.reports__track.is-jumping .report { transition: none; }

.report__head { margin-bottom: 18px; }

.report__eyebrow {
  margin: 0 0 6px;
  color: rgba(0, 0, 0, .45);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .8px;
  text-transform: uppercase;
}

.report__title {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.33px;
  line-height: 1.2;
}

/* Full width of the page's text column, as in the comp (521.74 × 240 in the
   content box — proportions kept, size fluid). */
.report__map {
  aspect-ratio: 521.74 / 240;
  border-radius: 7px;
  border: .5px solid rgba(0, 0, 0, .12);
  background-size: cover;
  background-position: center;
}

/* Gradient stand-ins for the two maps that have no export yet. */
.report__map--flood {
  background-image:
    radial-gradient(64% 58% at 42% 56%, rgba(28, 92, 214, .8), rgba(30, 64, 175, .4) 55%, transparent 76%),
    radial-gradient(36% 40% at 68% 38%, rgba(14, 116, 233, .55), transparent 70%),
    linear-gradient(160deg, #e6e4dd 0%, #d6d3c9 50%, #c6c3ba 100%);
}

.report__map--fire {
  background-image:
    radial-gradient(56% 64% at 52% 46%, rgba(233, 106, 22, .85), rgba(196, 74, 14, .45) 54%, transparent 75%),
    radial-gradient(34% 44% at 32% 64%, rgba(140, 44, 10, .6), transparent 68%),
    linear-gradient(160deg, #e9e3d6 0%, #dccfba 48%, #cec0aa 100%);
}

.report__body { margin-top: 22px; }

.report__body h4 {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.13px;
}

.report__body p {
  margin: 0 0 10px;
  color: rgba(0, 0, 0, .62);
  font-size: 12px;
  font-weight: 450;
  line-height: 18px;
  letter-spacing: -.06px;
}

.report__body sup { font-size: .7em; line-height: 0; }

.report__body mark {
  background: none;
  color: #d0342c;
}

/* ------------------------------------------------------------ the arrows */

/* Circled chevrons as everywhere else, floated over the stage's sides. */
.reports__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  translate: 0 -50%;
  background: rgba(255, 255, 255, .8);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
}

.reports__arrow:hover:not(:disabled) { background: #fff; }

.reports__arrow--prev { left: 18px; }
.reports__arrow--next { right: 18px; }

/* ------------------------------------------------------------ responsive */

@media (max-width: 900px) {
  .reports__stage { height: clamp(420px, 78vw, 646px); padding-top: 28px; }
  .report { padding: 28px clamp(20px, 5vw, 60px); }
  .reports__arrow--prev { left: 10px; }
  .reports__arrow--next { right: 10px; }
}

/* --------------------------------------------------- atlas view toggle
   Figma 740:22434: a two-segment button group over the top of the map.
   Labels 12/400 −0.072; the active half is white on Label/Secondary, the
   waiting half #e6e6e8 on Label/Tertiary. Soft 10px drop shadow. */
.atlas__views {
  position: absolute;
  top: 16px;
  left: 50%;
  translate: -50% 0;
  z-index: 4;
  display: flex;
  border-radius: 999px;
  overflow: hidden;
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, .05));
}

.atlas__views button {
  min-width: 98px;
  padding: 8px 14px;
  border: 0;
  background: #e6e6e8;
  color: #999;
  font: 400 12px/14px inherit;
  letter-spacing: -.072px;
  font-feature-settings: "ss11" 1, "calt" 0, "liga" 0;
  cursor: pointer;
  transition:
    background-color .2s ease-out,
    color .2s ease-out,
    transform .16s var(--ease-out-quint);
}

.atlas__views button:active { transform: scale(.96); }

.atlas__views button[aria-pressed="true"] {
  background: var(--white);
  color: #6e6e73;
}

/* ============================================================== the atlas
   Figma: node 638:24176. The Overview state of the twin card — frame
   1404 × 676 on #F5F5F7 with a 0.5px hairline, the world map centred in it,
   a numbered pin per site, and a 207px dark card naming the current one. */

.atlas {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 8px;
  background: var(--surface);
}

.atlas[hidden] { display: none; }

/* The atlas sits on top of the render, so fading *it* is the crossfade: on
   the way in the map fades up over the render, on the way out it thins until
   the render is back. hidden lands only after the fade is done — twin.js
   holds it back — because display: none and a transition can't overlap. */
.atlas {
  opacity: 0;
  transition: opacity .3s ease;
}

.atlas.is-in { opacity: 1; }

/* The map letterboxes inside the frame, so pins can't be positioned against
   the frame — they'd drift off their countries at every other width. This box
   *is* the map: same aspect, centred, and everything positions inside it. */
.atlas__inner {
  position: absolute;
  top: 50%;
  left: 50%;
  /* One translate does two jobs: the -50%s centre the box, and --dx/--dy are
     the rubber band — twin.js feeds them scaled-down pointer deltas while you
     hold the map and zeroes them on release. The snap-back is the transition,
     disabled during the drag itself so the map tracks the hand with no lag. */
  translate: calc(-50% + var(--dx, 0px)) calc(-50% + var(--dy, 0px) + var(--py, 0px));
  /* The snap-back must not chase the parallax: only the rubber band is
     transitioned, and --py rides along raw. Registering the vars is what
     lets the transition tell them apart. */
  transition: --dx .5s var(--spring, cubic-bezier(.23, 1, .32, 1)),
              --dy .5s var(--spring, cubic-bezier(.23, 1, .32, 1));
  /* twin.js sets the exact fit size — CSS can express "fit this aspect
     inside that box" only awkwardly, and getting it wrong puts every pin in
     the sea. */
  width: 100%;
  height: 100%;
}

.atlas__map {
  -webkit-user-drag: none;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.atlas__pins {
  position: absolute;
  inset: 0;
}

/* Each pin is placed as a percentage of the frame, so it stays on its country
   at any width. --x/--y come from the data in twin.js. */
/* The production comp's stickers, sized up on request: 24px squares, radius
   5, the band's tint at high opacity over a 2px backdrop blur — the map's
   coastlines swim softly behind every tile — lifted by the comp's odd upward
   shadow. The number is 13/500 in the band's full-strength ink. */
.pin {
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  translate: -50% -50%;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: var(--pin-bg);
  backdrop-filter: blur(2px);
  box-shadow: 0 -2.6px 13px rgba(0, 0, 0, .08);
  color: var(--pin-ink);
  /* The comp draws these medium in a tile the number nearly fills; at this
     size medium rendered thin, so the ink does the talking: semibold. */
  font: 600 15px/1 inherit;
  letter-spacing: -.1px;
  font-variant-numeric: tabular-nums;
  cursor: default;

  /* Waiting to arrive: each tile scales in on its own spot, west to east —
     twin.js deals the .is-in classes left to right. Arrives with visible
     mass, not from nothing. The entrance owns `scale`; hover and press live
     on `transform`, so their timings never contaminate each other. */
  scale: .45;
  opacity: 0;
  transition:
    scale .38s var(--spring, ease-out),
    opacity .18s ease-out,
    transform .18s var(--ease-out-quint);
}

.pin.is-in { scale: 1; opacity: 1; }

.pin::after {
  content: "";
  position: absolute;
  inset: -6px;
}

/* Two readings of the same square, stacked in one cell. Switching views
   cross-scales them — the leaving one shrinks away as the arriving one grows
   in, each tile a beat behind its neighbour, so the map turns over like a
   crowd rather than a cut. */
.pin > span {
  grid-area: 1 / 1;
  display: grid;
  place-items: center;
  transition:
    scale .34s var(--spring, ease-out),
    opacity .2s ease-out;
  transition-delay: calc(var(--i, 0) * 16ms);
}

.atlas--index .pin .pin__type,
.atlas--type .pin .pin__num {
  scale: .6;
  opacity: 0;
}

.pin__type img { display: block; width: 20px; height: 20px; }

/* The tile you're on opens out and the card pops beside it — grown, not
   ballooned: the card does the announcing, the tile only leans in. */
.pin.is-current { transform: scale(1.28); z-index: 3; }

/* The tint carries the band, the number carries the reading — so the ink is
   fully saturated and only the plate behind it is soft. Dialling the ink back
   to match the plate is what made these read dull. */
/* Band tints, matched to the comp's tiles: near-solid pastels so the number
   reads, translucent enough that the blur underneath still shows. */
.pin--good  { --pin-bg: rgba(231, 246, 234, .86); --pin-ink: #1f9e32; }
.pin--watch { --pin-bg: rgba(230, 244, 254, .86); --pin-ink: #00a2f5; }
.pin--alert { --pin-bg: rgba(253, 240, 222, .88); --pin-ink: #ee8b00; }

@media (hover: hover) and (pointer: fine) {
  .pin:hover { transform: scale(1.14); }
  .pin.is-current:hover { transform: scale(1.28); }
}

.pin:active { transform: scale(1.08); }

.pin:focus-visible { outline: 2px solid #0071e3; outline-offset: 2px; }

@media (max-width: 900px) { .pin { min-width: 18px; font-size: 11px; } }

/* ------------------------------------------------------------- map zoom
   Two quiet controls in the corner; wheel-pinch and double-click zoom
   toward the cursor. Grabbing pans only once there is overflow to pan. */

.atlas__zoom {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.atlas__zoom button {
  position: relative;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid #ebebeb;
  border-radius: 999px;
  background: var(--white);
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, .05));
  cursor: pointer;
  transition:
    background-color .2s ease-out,
    transform .16s var(--ease-out-quint);
}

/* the 28px face stays; the touchable area doesn't */
.atlas__zoom button::after {
  content: "";
  position: absolute;
  inset: -6px;
}

.atlas__zoom button:active { transform: scale(.96); }

@media (hover: hover) and (pointer: fine) {
  .atlas__zoom button:hover { background: #fafafa; }
}

/* programmatic zoom glides; pinch and drag track the hand raw */
.atlas.is-zooming .atlas__inner {
  transition:
    width .4s var(--ease-out-cubic),
    height .4s var(--ease-out-cubic),
    margin-left .4s var(--ease-out-cubic),
    margin-top .4s var(--ease-out-cubic),
    --dx .5s var(--spring, cubic-bezier(.23, 1, .32, 1)),
    --dy .5s var(--spring, cubic-bezier(.23, 1, .32, 1));
}

.atlas.is-zoomed { cursor: grab; }
.atlas.is-zoomed.is-dragging { cursor: grabbing; }

@media (prefers-reduced-motion: reduce) {
  .stack__row > *,
  .stack__svg,
  .flaw--v2 .bars rect { transition: none; }
}

/* ================================================== trusted / case studies
   Figma: node 599:22239. Surface band, padding-block 91, heading 36/40 at the
   content column's left edge. Each story is its own rail item — the header
   row belongs to its card and travels with it, as in the comp, where the
   second story's header is already entering from the right. Cards 1284 × 676,
   radius 8, gapped 20; the rail is the same drag/momentum primitive as the
   consequences band. */

.stories {
  padding-inline: var(--band-pad-x);
  background: var(--white);
  color: #000;                /* the body's default is the dark bands' white */

  --rail-inset: max(var(--band-pad-x), calc((100vw - var(--band-inner)) / 2));
}

/* The heading stays on the content grid; the rail reaches the viewport. */
.stories__head {
  margin: 0 0 64px;
  padding-inline: 32px;   /* matches .story__row so the title sits on the card text line */
}

.stories__title {
  margin: 0;
  text-align: center;
  font-size: 48px;
  font-weight: 500;
  line-height: 56px;
  letter-spacing: -1.44px;
}


/* Match the rounded feature containers above. */
.stories__rail {
  width: 100vw;
  margin-inline: calc((100% - 100vw) / 2);
  scroll-padding-inline: 0;
}
/* cards rest centred, one peeking either side; the track pads so the ends can centre too */
.stories__rail .rail__track { gap: 16px; padding-inline: calc((100% - min(1027px, 69vw)) / 2); }
.story {
  scroll-snap-align: center;
  flex: none;
  width: min(1027px, 69vw);
  border-radius: 24px;
  overflow: hidden;
  background: #f8f9fd;
  user-select: none;
  -webkit-user-select: none;
}

/* 20/40 500 −0.6 across the whole row — the name full black, the sentence at
   50%, the action black again. One line of type, three voices. */
.story__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 0;
  min-height: 64px;
  padding: 32px;
  background: transparent;
  font-size: 20px;
  font-weight: 500;
  line-height: 40px;
  letter-spacing: -.6px;
}

.story__who {
  display: flex;
  align-self: center;
  align-items: center;
  gap: 17px;
  min-width: 0;
}

/* Logo chip: 41 square, radius 7.7, black. The marks are stand-ins until the
   real logos are exported — a drawn star for Mercedes, a set glyph for the
   factory. Swap the contents, keep the chip. */
.story__mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: #000;
  color: var(--white);
}

.story__mark svg { width: 26px; height: 26px; }

.story__mark--type {
  font-size: 22px;
  font-weight: 600;
  font-family: Georgia, 'Times New Roman', serif;
}

.story__line {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: 1.4;
  text-wrap: balance;
}

.story__line strong { font-weight: 500; color: #000; }
.story__line span { color: rgba(0, 0, 0, .5); }

.story__cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #000;
  text-decoration: none;
}

.story__cta span {
  display: inline-block;
  margin-left: 2px;
  transition: translate 200ms cubic-bezier(.23, 1, .32, 1);
}

@media (hover: hover) and (pointer: fine) {
  .story__cta:hover span,
  .story:hover .story__cta span { translate: 3px 0; }
}

/* Photo stand-ins, the consequences approach: soft gradients that scale to
   any card with no asset. Replace with `background: url(...) center / cover`
   per card when the photos are exported. */
.story__card {
  aspect-ratio: 1284 / 676;
  background: var(--story-photo);
}

.story__cta:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 4px; }
/* the whole card is the link; the visible CTA is where it says so */
.story { position: relative; }
.story__cta::after { content: ""; position: absolute; inset: 0; }

/* container terminal at dusk: steel water under a pale, cooling sky */
.story__card--terminal {
  --story-photo:
    radial-gradient(110% 50% at 50% 0%, rgba(228, 222, 232, .7), transparent 60%),
    radial-gradient(70% 45% at 80% 30%, rgba(255, 209, 170, .35), transparent 68%),
    radial-gradient(90% 50% at 20% 92%, rgba(20, 34, 48, .6), transparent 72%),
    linear-gradient(180deg, #c9cfd8 0%, #93a4b3 38%, #5f7386 66%, #3a4756 100%);
}

/* the article's cover: storm cloud from above, title set in it */
.story__card--campus { --story-photo: url(assets/story-honest-risk.webp?v=q92) center / cover no-repeat; }

/* production line: cool interior, skylight from the left */
.story__card--plant {
  --story-photo:
    radial-gradient(70% 80% at 22% 12%, rgba(214, 228, 240, .8), transparent 64%),
    radial-gradient(90% 60% at 78% 88%, rgba(38, 48, 60, .55), transparent 72%),
    linear-gradient(160deg, #9fb0bf 0%, #7c8b99 42%, #55626e 74%, #3c4650 100%);
}

@media (max-width: 900px) {
  .stories { --rail-inset: var(--frame-gut); }
  .stories__head { margin-inline: var(--frame-gut); padding-inline: 24px; }
  .stories > .frame { padding-block: clamp(64px, 11vw, 128px); }

  .stories__title {
    font-size: 28px;
    line-height: 34px;
    letter-spacing: -.84px;
  }

  .story { width: 86vw; }

  .story__row {
    flex-wrap: wrap;
    gap: 12px;
    padding: 24px;
    font-size: 16px;
    line-height: 28px;
    letter-spacing: -.32px;
  }

  .story__mark { width: 32px; height: 32px; border-radius: 6px; }
  .story__mark svg { width: 20px; height: 20px; }
  .story__mark--type { font-size: 17px; }
}


@property --dx { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --dy { syntax: '<length>'; inherits: false; initial-value: 0px; }

/* The same measured spring the legend and card use, local to the atlas so
   the snap-back and the tile pop can reach it. The cursor stays the plain
   arrow everywhere on the map — the give is discoverable by touch, and a
   grab hand promised more panning than the rubber band delivers. Nothing on
   it is selectable: pulling the map must never start a selection sweep. */
.atlas {
  user-select: none;
  -webkit-user-select: none;
  --spring: linear(0, 0.0233, 0.0858, 0.1768, 0.2864, 0.4061, 0.5284, 0.6473,
    0.7582, 0.8576, 0.9434, 1.0145, 1.0707, 1.1124, 1.1407, 1.157, 1.1629,
    1.1604, 1.1511, 1.1369, 1.1194, 1.1001, 1.0802, 1.0606, 1.0423, 1.0258,
    1.0114, 0.9994, 0.9898, 0.9826, 0.9777, 0.9747, 0.9735, 0.9737, 0.9751,
    0.9772, 0.98, 0.9831, 0.9864, 0.9896, 0.9926, 0.9954, 0.9978, 0.9998,
    1.0014, 1.0027, 1.0035, 1.0041, 1);
}
.atlas.is-dragging .atlas__inner { transition: none; }


/* Equipment selection uses the same risk summary card. */
.pdbi-back {
  display: block; width: calc(100% - 24px); min-height: 40px; margin: 0 12px; padding: 0;
  color: #e4e5e8; text-align: left; font: inherit; font-size: 11px; background: none; border: 0;
  cursor: pointer; transition: color 150ms ease, scale 150ms ease;
}
.pdbi-back[hidden] { display: none; }
.pdbi-back:active { scale: .96; }
.pdbi-back:focus-visible { outline: 2px solid white; outline-offset: 2px; }
.simdetail[data-risk="pdbi"]:not([data-area="0"]) .simdetail__output strong,
.simdetail[data-risk="pdbi"]:not([data-area="0"]) .simdetail__output small { white-space: normal; overflow: visible; }
@media (hover: hover) { .pdbi-back:hover { color: white; } }
@media (prefers-reduced-motion: reduce) { .pdbi-back { transition: none; } }
.simdetail__section[hidden] { display: none; }

/* Full-bleed portfolio showcase. */
.model__block--portfolio {
  position: relative;
  isolation: isolate;
  width: 100vw;
  max-width: none;
  height: 100vh;
  overflow: clip;   /* clip, not hidden: no scroll container, so the player can stick */
  background: #667f8b url(assets/hero-ridge.webp) center / cover no-repeat;
}
.biz--portfolio {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 5vw;
  background: linear-gradient(180deg, rgb(13 29 39 / 24%), transparent 65%);
}
.biz--portfolio .biz__copy {
  flex: none;
  width: 24vw;
  padding: 0;
  text-align: left;
}
.portfolio__title {
  margin: 0;
  color: #fff;
  font-size: 48px;
  font-weight: 500;
  line-height: 56px;
  letter-spacing: -1.44px;
  text-wrap: balance;
}
/* the window is the comp's 1340 × 860, scaled by --s, framed against the
   block and bleeding off its foot; the stage is a grouping wrapper only */
.biz--portfolio {
  /* never past native size, and never taller than the room under its top offset:
     on ultrawides the mock stayed inside the 1440 frame the section closes to */
  --s: min(calc(68vw / 1340px), calc(.82 + (100vw - 1616px) / 4000px));   /* sized by width, as on main: the window bleeds off the foot */
}
.portfolio__stage { position: relative; flex: 1; align-self: stretch; min-height: 0; margin-top: 64px; }   /* the window fills what is left under the player and bleeds off the foot */
.biz--portfolio .app {
  position: absolute;
  zoom: 1;
  width: 1340px;
  max-width: none;
  flex-shrink: 0;
  -webkit-mask-image: none;
  mask-image: none;
}
.biz--portfolio .app { box-shadow: 0 0 0 1px rgb(255 255 255 / 25%), 0 24px 80px rgb(17 34 43 / 24%); }
@media (max-width: 900px) {
  /* the window is sized to the phone: the comp's 1340 fits the width less
     the gutters, centred; the player docks below the copy, compact */
  /* the block sits in from the edge like the other phone cards; the window
     keeps 12px inside it, so it lands on the page gutter */
  .model__block--portfolio { --inset: var(--page-pad); align-self: stretch; width: auto; margin-inline: var(--inset); border-radius: 24px; }
  .model__block--portfolio .biz--portfolio { --s: calc((100vw - 2 * var(--inset) - 24px) / 1340px); padding: 64px 12px 24px; }
  .biz--portfolio .biz__copy { width: min(100%, 420px); margin-inline: auto; }
  /* the block wraps its content instead of filling the screen: the stage
     takes the window's scaled height and the player sits in flow below */
  .model__block--portfolio { height: auto; min-height: 0; }
  .portfolio__stage { flex: none; height: calc(860px * var(--s)); margin: 32px 0 16px; }
  .model .portfolio__player { position: static; margin-top: 24px; margin-bottom: 0; padding: 4px; gap: 2px; border-radius: 12px; }
  .model .portfolio__choice button { min-height: 36px; padding: 6px 14px; font-size: 14px; border-radius: 8px; }
  .model .portfolio__pause { width: 36px; height: 36px; border-radius: 8px; }
  .model .portfolio__thumb { border-radius: 8px; }
}
@media (max-width: 600px) {
  .model__block--portfolio { --inset: 12px; }
}
/* narrow desktops: the block sits inside the page gutter like the cards
   around it, full bleed only once the frame has room to close into */
@media (min-width: 901px) and (max-width: 1488px) {
  .model__block--portfolio { align-self: stretch; width: auto; border-radius: 24px; }
}

/* Frost the product surface, leaving its contents crisp. */
.biz--portfolio .app {
  background: rgb(247 248 251 / 62%);
  -webkit-backdrop-filter: blur(24px) saturate(1.15);
  backdrop-filter: blur(24px) saturate(1.15);
}
.biz--portfolio .app__main { border-top-right-radius: 0; }


/* Centered showcase copy; the player docks at the foot of the viewport,
   over the window, on dark glass so its labels read on the light app. */
.biz--portfolio { display: flex; flex-direction: column; gap: 0; padding: clamp(48px, 8vh, 88px) 24px 24px; }
.biz--portfolio .biz__copy { width: 100%; text-align: center; }
/* the dock: sticky at the viewport foot while the block scrolls past, resting
   at the block's foot; contained, no entrance */
.model .portfolio__player {
  position: sticky;
  bottom: 24px;
  z-index: 20;
  align-self: center;
  margin-top: auto;
  gap: 4px;
  padding: 6px;
  border-radius: 16px;   /* the card's radius; the pills inside sit 6px in, so 10px */
  /* the map tooltip's material: Fill-Dark at 92% on a 12px blur, flat */
  background: rgba(20, 20, 22, .92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.model .portfolio__choice button,
.model .portfolio__pause { border-radius: 10px; }

/* the active pill is one backdrop that travels to the chosen step
   (portfolio.js measures it); the progress fill still paints inside the button */
.model .portfolio__choice.is-active button { background: transparent; color: var(--pill-ink); transition-property: color, transform; }
/* each step's pill is the map tooltip badge, exactly: the band's ink over
   the same 26% mix into the badge's dark (atlas-card.css .atlas__thumb) */
.portfolio__player { --pill-ink: #00a2f5; --pill: color-mix(in srgb, var(--pill-ink) 26%, #1c1c1e); }
.portfolio__player[data-step="gaps"] { --pill-ink: #ee8b00; }
.portfolio__player[data-step="act"] { --pill-ink: #1f9e32; }
.portfolio__thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-radius: 10px;
  overflow: hidden;   /* the progress fill inside is clipped by the pill */
  background: var(--pill);
  transform-origin: left top;
  pointer-events: none;
  transition: background-color .35s var(--ease-out-quint);
}
.portfolio__thumb-fill {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--pill-ink) 22%, transparent);
  transform: scaleX(0);
  transform-origin: left;
}
/* the per-button progress is retired: the fill lives in the travelling pill */
.model .portfolio__progress { display: none; }
.portfolio__player[data-ready] .portfolio__thumb {
  transition: transform .35s var(--ease-out-quint), width .35s var(--ease-out-quint), height .35s var(--ease-out-quint), background-color .35s var(--ease-out-quint);
}
@media (prefers-reduced-motion: reduce) { .portfolio__player[data-ready] .portfolio__thumb { transition: none; } }
.portfolio__player { display: flex; align-items: center; justify-content: center; gap: 12px; }
.portfolio__choice button { position: relative; isolation: isolate; overflow: hidden; min-height: 44px; padding: 10px 22px; border: 0; border-radius: 999px; background: transparent; color: white; font: inherit; font-size: 16px; font-weight: 500; cursor: pointer; transition: background-color 180ms ease, color 180ms ease, transform 180ms ease; }
.portfolio__choice.is-active button { background: rgb(255 255 255 / 65%); color: #17181a; }
.portfolio__progress { position: absolute; inset: 0; z-index: -1; background: white; transform: scaleX(0); transform-origin: left; pointer-events: none; opacity: 0; transition: opacity 180ms ease; }
.portfolio__choice.is-active .portfolio__progress { opacity: 1; }
.portfolio__pause { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgb(255 255 255 / 8%); color: #fff; cursor: pointer; transition: transform 180ms ease; }
.portfolio__player button:focus-visible { outline: 2px solid white; outline-offset: 4px; }
.portfolio__player button:active { transform: scale(.96); }
.portfolio__title { max-width: 880px; min-height: 56px; margin: 30px auto 0; }
.biz--portfolio .app { top: 0; bottom: auto; right: 50%; transform: translateX(50%) scale(var(--s)); transform-origin: top center; }
/* step changes are direction-aware: the window leaves to the exit side and
   the next arrives from the enter side, behind the copy's stagger */
.model__block--portfolio { --slide: 40px; --exit-x: calc(var(--slide) * -1); --enter-x: var(--slide); }
.model__block--portfolio[data-dir="back"] { --exit-x: var(--slide); --enter-x: calc(var(--slide) * -1); }
.biz--portfolio [data-product] {
  opacity: 0;
  visibility: hidden;
  translate: var(--exit-x) 0;
  filter: blur(8px);
  pointer-events: none;
  transition: opacity .3s var(--ease-out-cubic), translate .3s var(--ease-out-cubic), filter .3s var(--ease-out-cubic), visibility .3s;
}
.biz--portfolio [data-product].is-prep { transition: none; translate: var(--enter-x) 0; }
.biz--portfolio [data-product].is-active {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
  filter: none;
  pointer-events: auto;
  transition-duration: .5s;
  transition-timing-function: var(--ease-out-quint);
  transition-delay: .16s;
}
@media (max-width: 600px) {
  .portfolio__player { gap: 6px; }
  .portfolio__choice button { padding-inline: 14px; font-size: 14px; }
  .portfolio__title { font-size: 32px; line-height: 40px; }
    .biz--portfolio .app { top: 0; transform: translateX(50%) scale(var(--s)); }
}
@media (prefers-reduced-motion: reduce) { .biz--portfolio [data-product] { transition: none; translate: none; filter: none; } }

.portfolio__title { min-height: 40px; }
.portfolio__description {
  max-width: 640px;
  margin: 12px auto 0;
  color: rgb(255 255 255 / 80%);
  font-size: 16px;
  line-height: 24px;
  text-wrap: pretty;
}
@media (max-width: 600px) {
  .portfolio__description { font-size: 14px; line-height: 21px; }
}

@media (max-width: 600px) {
  .portfolio__player { gap: 4px; }
  .portfolio__choice button { padding-inline: 12px; }
}

.model__block--computed { gap: 64px; }
.model__block--anatomy { gap: 40px; }   /* + the head’s 24px margin = 64 */
.computed__head { padding-inline: 24px; text-align: center; }
.computed__head h3 { margin: 0; color: rgb(0 0 0 / 85%); font-size: 48px; line-height: 56px; font-weight: 500; letter-spacing: -1.44px; text-wrap: balance; }
@media (max-width: 680px) { .computed__head h3 { font-size: 32px; line-height: 40px; letter-spacing: -.96px; } }

.model__block--computed .feats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.model__block--computed .feats__grid li { padding: 40px 24px; }
@media (max-width: 1000px) {
  .model__block--computed .feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .model__block--computed .feats { grid-template-columns: 1fr; }
}

/* A large live risk tile and four computed-output tiles share one grid. */
.computed__bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.computed__risk { grid-column: span 2; grid-row: span 2; min-width: 0; overflow: hidden; border-radius: 24px; background: #f8f9fd; }
.computed__risk .simcard { padding: 24px; text-align: center; }
.computed__risk .simcard .feats__eyebrow { display: none; }
.computed__risk .biz--stack { border-radius: 0; }
.computed__risk .biz--stack .simwin { height: 560px; }
.model__block--computed .computed__bento .feats { display: contents; }
.model__block--computed .computed__bento .feats__grid li { min-width: 0; padding: 24px; text-align: left; }
.computed__bento .coverage-gap-card { order: 1; }   /* shown last; DOM order stays so the nth-child spans hold */
.computed__bento .feats__lede { text-wrap: pretty; }
@media (max-width: 1100px) {
  .computed__bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .computed__risk { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 600px) {
  .computed__bento { grid-template-columns: minmax(0, 1fr); }
  .computed__risk .simcard { padding: 24px; }
}

.computed__bento .feats__grid li:nth-child(3) { min-height: 240px; }
.computed__bento .feats__grid li:nth-child(4) { grid-column: span 2; min-height: 240px; }
@media (max-width: 1100px) {
  .computed__bento .feats__grid li:nth-child(4) { grid-column: auto; }
}
@media (max-width: 600px) {
  .computed__bento .feats__grid li:nth-child(3),
  .computed__bento .feats__grid li:nth-child(4) { min-height: 180px; }
}

.model__block--computed .computed__bento .feats__grid li {
  justify-content: flex-start;
  align-items: flex-start;
  text-align: left;
}
.computed__bento .feats__lede { margin-inline: 0; }
.computed__risk .simcard { text-align: left; }

.computed__head { text-align: left; }   /* 24px inline pad lines the title up with the card text */

/* Risk map fills the tile; its top fades beneath the heading. */
.computed__risk { position: relative; min-height: 680px; }
.computed__risk .simcard { position: relative; z-index: 2; pointer-events: none; }
.computed__risk .biz--stack { position: absolute; inset: 0; }
.computed__risk .simrow { height: 100%; }
.computed__risk .biz--stack .simrow .simwin { height: 100%; padding-top: 0; }
.computed__risk .simrow .sim__risk-map {
  height: 100%;
  -webkit-mask-image: none;
  mask-image: none;
}
/* Bottom-anchor the study details, preserving the peril selector. */
.computed__risk .simrow .simdetail {
  position: absolute;
  top: auto;
  bottom: 12px;
  left: 12px;
  right: auto;
  margin: 0;
  max-height: calc(100% - 160px);
}
.computed__risk .simrow .simdetail[data-collapsed="false"] {
  height: min(500px, calc(100% - 160px));
}

/* How it works: scene and editorial selector. */
#how .hiw {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(40px, 7vw, 140px);
  text-align: left;
}
#how .hiw-story {
  margin: 0;
  min-width: 0;
  display: flex;
  align-items: center;
  padding: var(--story-pad-y) 16px 16px;
}
#how .hiw-stage { width: 100%; height: 430px; }
#how .hiw-copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-width: 0; padding: 45px 0; }
#how .hiw-head { margin: 0; font-size: 32px; line-height: 40px; letter-spacing: -.96px; text-align: left; }
/* each caption sits inside its card, under the illustration */
#how .hiw-panel__caption {
  margin: 20px auto 0;
  max-width: 100%;
  padding: 0 16px;
  width: 100%;
  flex-shrink: 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: -.28px;
  color: rgba(0, 0, 0, .45);
  text-align: center;
  white-space: normal;
  overflow-wrap: break-word;
}
@media (max-width: 900px) {
  #how .hiw { gap: 32px; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); }
  #how .hiw-story { padding-inline: 0; }
}
@media (max-width: 680px) {
  #how .hiw { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  #how .hiw-stage { height: 480px; }   /* the upload modal runs ~365px at this width, plus the caption */
  #how .hiw-copy { padding: 0; }
  #how .hiw-head { margin-bottom: 20px; font-size: 28px; line-height: 36px; letter-spacing: -.84px; }
}

#how .hiw-phrase {
  display: inline;
  max-width: 100%;
  padding: 0;
  text-decoration: none;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: rgba(0, 0, 0, .35);
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: pointer;
  transition: color 180ms ease, background-color 180ms ease;
}
#how .hiw-phrase[aria-pressed="true"] { color: rgba(0, 0, 0, .85); }
#how .hiw-phrase:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
@media (hover: hover) {
  #how .hiw-phrase:hover { color: rgba(0, 0, 0, .85); background-color: rgba(0, 0, 0, .035); }
}
@media (prefers-reduced-motion: reduce) {
  #how .hiw-phrase { transition: none; }
}

/* One tall companion to the risk panel, then a 2:1:1 lower row. */
.computed__risk { grid-row: auto; }
.computed__bento .feats__grid li:first-child { grid-column: 3; grid-row: 1; }
.computed__bento .feats__grid li:nth-child(n + 2) {
  grid-column: auto;
  grid-row: 2;
}
@media (max-width: 1100px) {
  .computed__bento .feats__grid li:first-child { grid-column: auto; grid-row: auto; }
  .computed__bento .feats__grid li:nth-child(n + 2) { grid-row: auto; }
  .computed__bento .feats__grid li { min-height: 360px; }
}
@media (max-width: 600px) {
  .computed__bento .feats__grid li:nth-child(n) { min-height: 280px; }
}

@media (min-width: 1101px) {
  .computed__bento { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .computed__risk { grid-column: span 8; }
  .computed__bento .feats__grid li:first-child { grid-column: span 4; }
  .computed__bento .feats__grid li:nth-child(2),
  .computed__bento .feats__grid li:nth-child(3) { grid-column: span 3; }
  .computed__bento .feats__grid li:nth-child(4) { grid-column: span 6; }
}

/* Closing invitation and company perspective. */
/* Lenis: the only bits of its stylesheet we need (its iframe rule would kill the map) */
html.lenis, html.lenis body { height: auto; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }

.closing {
  padding: var(--band-pad-y) var(--band-pad-x);
  background: var(--white);
  color: rgba(0, 0, 0, .85);
  scroll-margin-top: 112px;
}
.closing__inner { max-width: var(--band-inner); margin-inline: auto; }
/* one viewport tall on desktop: the panel takes whatever the head leaves */
@media (min-width: 901px) {
  .closing { display: flex; flex-direction: column; height: 100vh; padding-block: 64px; }
  .closing__inner { display: flex; flex-direction: column; justify-content: center; flex: 1; min-height: 0; width: 100%; }
  .closing__head { padding-bottom: 56px; }
  .closing .closing__panel { flex: 1; min-height: 0; max-height: 46vh; }
}
.closing__head { padding: 0 24px clamp(64px, 8vw, 104px); text-align: center; }
.closing__eyebrow { margin: 0 0 12px; font-size: 16px; line-height: 24px; font-weight: 500; letter-spacing: -.32px; color: var(--ask-blue); }
.closing__head h2 { max-width: 1000px; margin: 0 auto 28px; font-size: clamp(36px, 4.4vw, 64px); line-height: 1.08; font-weight: 500; letter-spacing: -.04em; text-wrap: balance; }
.closing__cta { appearance: none; border: 0; box-shadow: none; background: #000; font-family: inherit; cursor: pointer; }
.closing__cta:focus-visible { outline-color: #000; }
.closing__panel { display: grid; grid-template-columns: 1.1fr 1fr; min-height: 620px; border-radius: 24px; overflow: hidden; background: #f8f9fd; }
.closing__image { position: relative; min-width: 0; overflow: hidden; }
.closing__image img { display: block; width: 100%; height: 100%; position: absolute; inset: 0; object-fit: contain; object-position: center; mix-blend-mode: multiply; border: 0; outline: none; transform: translateX(24px) scaleX(-1); }
.closing__copy { align-self: center; padding: clamp(32px, 5vw, 80px); font-size: clamp(20px, 1.8vw, 28px); line-height: 1.3; letter-spacing: -.025em; font-weight: 500; }
.closing__copy p { margin: 0; text-wrap: pretty; }
.closing__copy p + p { margin-top: 28px; }
@media (max-width: 900px) {
  .closing { padding-inline: var(--frame-gut); }
  .closing__panel { min-height: 520px; }
  .closing__copy { padding: 32px; }
}
@media (max-width: 680px) {
  .closing__head { padding-inline: 0; }
  .closing__panel { grid-template-columns: minmax(0, 1fr); }
  .closing__image { aspect-ratio: 1.15; }
  .closing__copy { padding: 32px 24px 40px; }
}


/* Keep player feedback still when motion is reduced. */
@media (hover: hover) and (pointer: fine) {
  .portfolio__choice:not(.is-active) button:hover { background: rgb(255 255 255 / 15%); }
}
@media (max-width: 600px) {
  .portfolio__title { min-height: 80px; }
}
@media (prefers-reduced-motion: reduce) {
  .portfolio__player button, .portfolio__progress,
  .portfolio__player button:active { transform: none; }
  .portfolio__progress { visibility: hidden; }
}

#outcomes > .frame { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; border-inline: 0; }

/* Facilities UI illustration, adapted from the product's safety-level table. */
.computed__bento .feats__grid .safety-card { overflow: clip; position: relative; }
.safety-card .feats__lede { position: relative; z-index: 1; }
.site-index { width: calc(100% + 24px); margin-top: auto; padding-top: 60px; transform: translateY(64px); flex-shrink: 0; }
.site-index__window { width: max(100%, 540px); padding: 0 12px 24px; overflow: clip; border-radius: 16px; background: rgba(253,253,254,.72); -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px); box-shadow: 0 0 0 1px rgba(27,27,27,.045), 0 8px 24px rgba(27,27,27,.04), 0 32px 64px rgba(27,27,27,.045); }
.site-index__title { margin: 0; padding: 24px 16px; color: #999; font-size: 12px; line-height: 16px; letter-spacing: -.072px; }
.site-index__table { width: calc(100% - 24px); margin: 0 12px; }
.site-index__table { --cols: minmax(0, 1.5fr) minmax(0, 1fr); }   /* site name, then its location */
.site-index__table .app__th { height: 48px; padding: 17px 16px; color: #6e6e73; font-size: 11px; line-height: 14px; }
.site-index__table .app__td { height: 72px; padding: 0 16px; color: #6e6e73; font-size: 13px; line-height: 20px; letter-spacing: -.14px; }
.site-index__table .app__td:first-child { color: #1b1b1b; font-size: 14px; letter-spacing: -.14px; }
.site-index__table .app__td:nth-child(2) { padding: 0 16px; }
.site-index__table .app__td:last-child { color: #6e6e73; }
.site-index__table .app__td img { margin-right: 8px; }
.site-index__score { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 5px 8px; border-radius: 8px; font-size: 14px; font-weight: 500; line-height: 16px; font-variant-numeric: tabular-nums; }
.site-index__score--high { color: #0a9e0c; background: rgba(210,245,168,.6); }
.site-index__score--good { color: #00aaff; background: #e6f4fe; }
.site-index__score--moderate { color: #f18305; background: rgba(241,131,5,.1); }
@media (max-width: 1100px) {
  .site-index { padding-top: 24px; }
  .site-index__table .app__td { height: 60px; }
}
@media (max-width: 600px) {
  .site-index__table .app__td { padding-inline: 12px; font-size: 12px; }
  .site-index__window { width: 100%; }   /* the desktop bleed past the card edge would hide the location column */
  .site-index__table { --cols: minmax(0, 1.7fr) minmax(0, 1fr); }
  .site-index__table .app__td:first-child { white-space: normal; overflow: visible; text-overflow: clip; line-height: 17px; font-size: 13px; }
}

/* Claims: source documents assembled into a prepared claim file. */
.computed__bento .claims-card { overflow: hidden; }
/* Coverage drift orbs: the four counts as tinted discs scattered across the
   card, sized by weight, each labelled beneath. Colours are the class pills'. */
.driftorbs { position: relative; width: 100%; height: 300px; margin: auto 0 0; }
.driftorb { position: absolute; left: var(--x); top: var(--y); display: flex; flex-direction: column; align-items: center; gap: 8px; width: var(--d); }
.driftorb b { display: grid; place-items: center; width: var(--d); height: var(--d); border-radius: 50%; font-size: var(--n, 24px); line-height: 1; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.driftorb span { font-size: 12px; line-height: 14px; font-weight: 500; letter-spacing: -.072px; white-space: nowrap; }
/* the total sits centre; the three classes orbit it at roughly 120° apart */
.driftorb--all { --x: calc(50% - 72px); --y: 83px; --d: 112px; --n: 32px; }   /* 16px left so its label clears the Opportunity disc */
.driftorb--critical { --x: calc(100% - 88px); --y: 0; --d: 84px; }
.driftorb--mismatch { --x: 0; --y: 100px; --d: 72px; --n: 22px; }
.driftorb--opportunity { --x: calc(100% - 84px); --y: 190px; --d: 84px; }
.driftorb--all b { background: #ebebeb; }
.driftorb--all { color: #333333; }
.driftorb--critical b { background: #fdecf1; }
.driftorb--critical { color: #ff3b6b; }
.driftorb--mismatch b { background: #fdf2e6; }
.driftorb--mismatch { color: #ff8000; }
.driftorb--opportunity b { background: #e3f6fe; }
.driftorb--opportunity { color: #00aaff; }
.computed__bento .reports-card { overflow: hidden; }
.report-crop { position: relative; flex: 1; align-self: stretch; min-height: 332px; margin: 0 -24px -24px; overflow: hidden; }
.report-crop__page { position: absolute; top: 0; left: 0; width: 3000px; padding: 60px 0 0 80px; color: #1b1b1b; transform: scale(.3); transform-origin: 0 0; }
.report-crop__table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; text-align: left; color: #1b1b1b; font-size: 14px; line-height: 20px; letter-spacing: -.14px; font-variant-numeric: tabular-nums; }
.report-crop__option-col { width: 156px; }
.report-crop__premium-col { width: 100px; }
.report-crop__limit-col { width: 64px; }
.report-crop__deductible-col { width: 100px; }
.report-crop__difference-col { width: auto; }
.report-crop__table th, .report-crop__table td { padding: 0 12px 0 0; text-align: left; vertical-align: middle; white-space: nowrap; border: 0; color: #1b1b1b; }
.report-crop__table th:first-child { padding-left: 16px; }
.report-crop__table thead th { height: 48px; color: #6e6e73; font-size: 11px; font-weight: 400; line-height: 14px; text-transform: uppercase; }
.report-crop__table tbody tr { height: 72px; }
.report-crop__table tbody tr:nth-child(even) { background: #f5f5f7; }
.report-crop__table tbody th { font-weight: 400; border-radius: 12px 0 0 12px; }
.report-crop__table tbody td:last-child { border-radius: 0 12px 12px 0; color: #6e6e73; font-size: 13px; }
.report-crop__table tbody th span { display: block; margin-top: 3px; color: #6e6e73; font-size: 11px; line-height: 14px; }
.report-crop__tradeoff { display: inline-flex; margin-left: -8px; padding: 5px 8px; border-radius: 8px; color: #f18305; background: rgba(241,131,5,.1); font-weight: 500; line-height: 16px; }
/* The package: A4 sheets fanned left to right, each tucked under the one before. */
.report-page__stack { display: flex; align-items: flex-start; isolation: isolate; }
.report-page__doc { position: relative; flex: 0 0 880px; aspect-ratio: 1 / 1.4142; padding: 40px 80px 48px; border-radius: 6px; background: #fdfdfe; box-shadow: 0 0 0 1px rgba(27,27,27,.06), 0 1px 2px rgba(27,27,27,.04), 0 12px 32px rgba(27,27,27,.06); }
.report-page__doc > * { zoom: 1.25; }
.report-page__doc + .report-page__doc { margin-left: -320px; }
.report-page__doc:nth-child(1) { z-index: 4; }
.report-page__doc:nth-child(2) { z-index: 3; margin-top: 24px; --fade: .25; }
.report-page__doc:nth-child(3) { z-index: 2; margin-top: 48px; --fade: .45; }
.report-page__doc:nth-child(4) { z-index: 1; margin-top: 72px; --fade: .65; }
/* Fade as a tint in the card colour, not opacity: opacity groups defeat the backdrop blur. */
.report-page__doc::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; background: rgba(248, 249, 253, var(--fade, 0)); pointer-events: none; }
/* Only the overlapped strip is translucent and blurred, so scrolling re-samples four
   narrow seams rather than four whole sheets. */
.report-page__doc:not(:last-child) { background: transparent; }
.report-page__doc:not(:last-child)::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(90deg, #fdfdfe 0, #fdfdfe calc(100% - 320px), rgba(253,253,254,.72) calc(100% - 320px)); -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px); }
.report-page__doc-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid rgba(27,27,27,.1); color: #6e6e73; font-size: 11px; line-height: 14px; font-variant-numeric: tabular-nums; }
.report-page__doc-head i { display: block; width: 44px; height: 12px; background: #1b1b1b; mask: url("assets/logo-scyai.svg") center / contain no-repeat; -webkit-mask: url("assets/logo-scyai.svg") center / contain no-repeat; }
.report-page__eyebrow { margin: 36px 0 6px; color: #6e6e73; font-size: 11px; line-height: 14px; }
.report-page__title { margin: 0; font-size: 30px; line-height: 36px; font-weight: 600; letter-spacing: -.9px; }
.report-page__body { margin: 30px 0 0; font-size: 13px; line-height: 20px; letter-spacing: -.08px; text-align: justify; hyphens: auto; }
.report-page__body + .report-page__body { margin-top: 12px; }
.report-page__body--note { margin-top: 32px; }
.report-page__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 16px 0 12px; padding: 0 4px; }
.report-page__stats div { padding: 12px 12px 10px; border-radius: 12px; background: #f5f5f7; }
.report-page__stats dt { color: #6e6e73; font-size: 11px; line-height: 14px; }
.report-page__stats dd { margin: 4px 0 0; font-size: 18px; line-height: 22px; font-weight: 500; letter-spacing: -.3px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.report-page__stats dd small { color: #6e6e73; font-size: 12px; font-weight: 400; }
.report-page__stat--accent { color: #f18305; }
.report-page__doc-label { margin: 20px -16px 0; padding: 16px 16px 0; color: #999; font-size: 12px; line-height: 16px; letter-spacing: -.072px; text-transform: uppercase; }
.report-page__actions { margin: 8px 0 0; padding: 0 16px; font-size: 14px; line-height: 20px; letter-spacing: -.14px; }
.report-page__actions p { margin: 0; padding: 8px 0; }
.report-page__findings { display: grid; gap: 4px; margin: 12px 0 0; padding: 0 4px; }
.report-page__finding { display: grid; grid-template-columns: 96px 1fr auto; align-items: center; gap: 12px; min-height: 56px; padding: 0 12px; border-radius: 12px; font-size: 14px; line-height: 20px; letter-spacing: -.14px; }
.report-page__finding:nth-child(even) { background: #f5f5f7; }
.report-page__finding em { display: inline-flex; justify-content: center; padding: 3px 8px; border-radius: 8px; font-style: normal; font-size: 12px; font-weight: 500; line-height: 16px; }
.report-page__finding--critical em { color: #ff3b6b; background: #fdecf1; }
.report-page__finding--mismatch em { color: #ff8000; background: #fdf2e6; }
.report-page__finding--opportunity em { color: #00aaff; background: #e3f6fe; }
.report-page__finding span { color: #6e6e73; font-size: 13px; white-space: nowrap; }
.report-page__bars { display: grid; gap: 14px; margin: 12px 0 0; padding: 0 16px; }
.report-page__bar { display: grid; grid-template-columns: 148px 1fr 64px; align-items: center; gap: 12px; font-size: 13px; line-height: 18px; letter-spacing: -.1px; }
.report-page__bar i { position: relative; display: block; height: 8px; border-radius: 4px; background: #ebebeb; overflow: hidden; }
.report-page__bar i::after { content: ""; position: absolute; inset: 0; width: var(--fill); border-radius: 4px; background: #1b1b1b; }
.report-page__bar--over i::after { background: #ff3b6b; }
.report-page__bar span:last-child { text-align: right; color: #6e6e73; font-variant-numeric: tabular-nums; }
.report-page__doc .report-crop__table { width: calc(100% + 32px); margin: 0 -16px; }
.report-page__doc .report-crop__option-col { width: 148px; }
.report-page__doc .report-crop__premium-col { width: 84px; }
.report-page__doc .report-crop__limit-col { width: 56px; }
.report-page__doc .report-crop__deductible-col { width: 88px; }
.report-page__doc .report-crop__table tbody td:last-child { white-space: normal; }
.report-page__sites { table-layout: auto; }
.report-page__sites th:first-child { padding-left: 16px; }
.report-page__sites tbody tr { height: 60px; }
.report-page__sites tbody th { font-size: 13px; }
.claims-schematic { width: 100%; margin-top: auto; flex-shrink: 0; user-select: none; pointer-events: none; }   /* sits at the card's foot */
.claims-schematic .pill-schematic__canvas { position: relative; width: 100%; height: 282px; }
.claims-schematic .pill-schematic__links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.claims-schematic path { stroke: #cbd5e2; stroke-width: 1; vector-effect: non-scaling-stroke; }
.claims-schematic circle { fill: #aabbd0; stroke: #f8f9fd; stroke-width: 3; }
.claims-schematic .flow-pill { position: absolute; display: flex; align-items: center; justify-content: center; gap: 8px; width: max-content; max-width: 100%; height: 44px; padding: 0 14px; border-radius: 12px; background: #ebebeb; color: #333333; font-size: 12px; font-weight: 600; line-height: 1.2; letter-spacing: -.15px; white-space: nowrap; }
.claims-schematic .flow-pill:has(.flow-icon) { padding: 0 16px 0 11px; }   /* glyph edge at 13px, same as top and bottom */
.claims-schematic .flow-icon { width: 20px; height: 20px; flex-shrink: 0; background: currentColor; mask: url("assets/anatomy/ico-doc.svg") center / contain no-repeat; -webkit-mask: url("assets/anatomy/ico-doc.svg") center / contain no-repeat; }
/* one centred column: the three files, a spine down to the evidence, then the claim */
.claims-schematic .flow-pill { left: 50%; translate: -50% 0; }
.claims-schematic .flow-pill--incident { top: 0; }
.claims-schematic .flow-pill--records { top: 54px; }
.claims-schematic .flow-pill--policy { top: 108px; }
.claims-schematic .flow-pill--assembled { top: 180px; padding-right: 16px; background: #e3f6fe; color: #00aaff; }
.claims-schematic .flow-pill--assembled i { width: 6px; height: 6px; flex-shrink: 0; border-radius: 50%; background: currentColor; }
.claims-schematic .flow-pill--claim { top: 238px; background: #e3faf2; color: #00c781; }
@container (max-width: 340px) {
  .claims-schematic .flow-pill { font-size: 11px; gap: 6px; padding-inline: 12px; }
  .claims-schematic .flow-pill:has(.flow-icon) { padding: 0 14px 0 12px; }   /* glyph edge at 14px, same as top and bottom */
  .claims-schematic .flow-pill--assembled { padding-right: 14px; }
  .claims-schematic .flow-icon { width: 16px; height: 16px; }
}

.claims-schematic { container-type: inline-size; }
@container (min-width: 480px) {
  .claims-schematic .pill-schematic__canvas { display: grid; height: auto; grid-template-columns: max-content 1fr max-content 1fr max-content; grid-template-rows: repeat(3, 38px); row-gap: 12px; }
  .claims-schematic .flow-pill { position: static; max-width: none; justify-self: start; }
  .claims-schematic .flow-pill--incident { grid-column: 1; grid-row: 1; }
  .claims-schematic .flow-pill--records { grid-column: 1; grid-row: 2; }
  .claims-schematic .flow-pill--policy { grid-column: 1; grid-row: 3; }
  .claims-schematic .flow-pill--assembled { grid-column: 3; grid-row: 2; }
  .claims-schematic .flow-pill--claim { grid-column: 5; grid-row: 2; }
}



@media (prefers-reduced-motion: no-preference) {
  .driftorb:not(.driftorb--all) {
    animation: driftorb-float 7s ease-in-out infinite;
    animation-play-state: paused;
  }
  .driftorbs .driftorb--mismatch { animation-duration: 8.5s; animation-delay: -2.5s; }
  .driftorbs .driftorb--opportunity { animation-duration: 9s; animation-delay: -5s; }
  .driftorbs.is-here .driftorb:not(.driftorb--all) { animation-play-state: running; }
}
@keyframes driftorb-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* ------------------------------------------------ phone type: Apple's scale
   Sizes, line heights and tracking from the iOS HIG at the default Dynamic
   Type size, mapped role by role. Large Title 34/41, Title 1 28/34,
   Title 2 22/28, Headline and Body 17/22, Callout 16/21, Subheadline 15/20,
   Footnote 13/18. */
@media (max-width: 600px) {
  /* Large Title: the section heads */
  .coverage-hero .hero__title,
  #problem .problem__title,
  .model .portfolio__title,
  .model__block--anatomy .model__lede,
  #computed-title,
  #outcomes .outcomes__title,
  #usecases .lede,
  #closing-title,
  .problem__number {
    font-size: 34px; line-height: 41px; letter-spacing: .4px;
  }
  /* Title 1: the secondary heads */
  #how .hiw-head,
  .stories__title { font-size: 28px; line-height: 34px; letter-spacing: .38px; }
  /* Title 2: card headings */
  .problem__claim { font-size: 22px; line-height: 28px; letter-spacing: -.26px; }
  /* Headline: small titles, emphasised */
  .sphere__caption h3,
  .outcards h3,
  .feats__lede strong,
  .story__line { font-size: 17px; line-height: 22px; font-weight: 600; letter-spacing: -.43px; }
  /* Body */
  .coverage-hero .coverage-copy .hero__sub,
  .model__block--anatomy .model__sub,
  .feats__lede,
  #outcomes .outcomes__sub,
  .site-footer__invitation p,
  .site-footer nav > a,
  .btn { font-size: 17px; line-height: 22px; letter-spacing: -.43px; }
  /* Callout */
  .uctile h3, .uctile__title,
  .sphere__caption p { font-size: 16px; line-height: 21px; letter-spacing: -.31px; }
  /* Subheadline: running captions */
  .problem__note,
  .portfolio__description,
  #how .hiw-panel__caption,
  .outcards p { font-size: 15px; line-height: 20px; letter-spacing: -.23px; }
  /* Footnote: the nav pill and fine print */
  .navigation-01-header .cta,
  .site-footer__bottom { font-size: 13px; line-height: 18px; letter-spacing: -.08px; }
}

/* ------------------------------------------------ phone spacing: Apple's rhythm
   Measured on apple.com at 375px: 8–12 between a heading and its subline,
   16–20 from copy to a CTA, 40–48 from a heading down to cards or product,
   24 card padding. Words pull together; visuals sit off the group. */
@media (max-width: 600px) {
  /* heading → subline: 10 */
  .coverage-hero .coverage-copy .hero__sub { margin-top: 10px; }
  .model .portfolio__description { margin-top: 10px; }
  .model__block--anatomy .model__head { gap: 10px; }
  .model__block--anatomy .model__sub { margin-top: 0; }
  #outcomes .outcomes__sub { margin-top: 10px; }
  .closing__head .closing__eyebrow { margin-bottom: 8px; }
  /* subline → CTA: 18 */
  .coverage-hero .coverage-copy .hero__ctas { margin-top: 18px; }
  .closing__head h2 { margin-bottom: 18px; }
  /* heading or copy → cards / product: 44 */
  .coverage-hero .coverage-site { margin-top: 44px; }
  #problem .problem__title { margin-bottom: 44px; }
  .model .portfolio__stage { margin-top: 44px; }
  .model__block--anatomy { gap: 16px; }
  .model__block--anatomy .model__head { margin-bottom: 28px; }   /* + the block gap = 44 */
  #outcomes .outcards { margin-top: 44px; }
  .closing__head { padding-bottom: 44px; }
  /* cards: 24 */
  .problem__card { padding: 24px; }
  .outcards > * { padding: 24px; }
}