/* =========================================================
   OOR Case Study — foundation
   Vanilla HTML/CSS/JS, desktop-first, same responsive
   contract as Spend: breakpoints 1024 / 720 / 480.
   Unlike Spend (black shell + floating white panels), OOR
   is a continuous WHITE page; soft panels are the exception.
   ========================================================= */

:root {
  /* surfaces */
  --page-bg: #ffffff;
  --surface: #ffffff;
  --panel-warm: #f5f3f0;   /* 4-5 Checkout+Flowopt panel */
  --panel-pink: #fff5f8;   /* 7 Closing Jobs panel */
  --panel-soft: #fafafa;   /* inner cards (Adapting / Lifecycle) */
  --panel-plain: #fcfcfc;

  /* text */
  --text: #000000;
  --text-body: #232323;
  --text-soft: #9e9e9e;
  --eyebrow: #9c9289;
  --eyebrow-warm: #8b6c50;
  --note: #9c9289;

  /* lines */
  --border: #e6e6e6;
  --border-soft: #ebebeb;
  --border-hair: #f0f0f0;

  /* bar tints — Data / Research */
  --bar-pink-1: #fff6fc;
  --bar-pink-2: #fff2fa;
  --bar-pink-3: #ffeef9;
  --bar-pink-4: #ffeaf7;
  --bar-orange-1: #fffbf6;
  --bar-orange-2: #fff9f2;
  --bar-orange-3: #fff7ed;
  --bar-orange-4: #fff4e7;
  --bar-lavender-1: #f7f6ff;
  --bar-lavender-2: #f2f0ff;
  --bar-lavender-3: #ece9ff;
  --bar-lavender-4: #e6e1ff;

  /* shadows (from Figma variables) */
  --shadow-ui: 0 2px 4px rgba(0, 0, 0, 0.04), 0 1px 1px rgba(0, 0, 0, 0.02);
  --shadow-floating: 0 16px 48px rgba(0, 0, 0, 0.16);
  --shadow-floating-soft: 0 16px 24px rgba(0, 0, 0, 0.08);

  /* layout */
  --content-width: 1190px;
  --content-width-wide: 1362px;
  --copy-width: 375px;         /* header/copy column in most sections */
  --page-padding: 24px;
  --section-pad-y: 72px;
  --panel-radius-lg: 64px;     /* 4-5 warm panel */
  --panel-radius-md: 44px;     /* 7 pink panel */
  --media-radius: 28px;        /* screens / mockups inside */
  --card-radius: 16px;

  --inter-tight-tracking: 0; /* Geist default tracking, same as Spend */
}

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

html,
body {
  margin: 0;
  padding: 0;
}

body {
  min-width: 320px;
  background: var(--page-bg);
  color: var(--text);
  font-family: "Geist", sans-serif;
  font-optical-sizing: auto;
  font-kerning: normal;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  text-rendering: optimizeLegibility;
  /* grayscale AA to match Figma, same as Spend */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* self-hosted fonts (Google Fonts files, OFL); one variable file covers 400–600 */
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("Fonts/geist-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("Fonts/geist-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("Fonts/caveat-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("Fonts/caveat-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

img,
video {
  display: block;
  width: 100%;
  height: 100%;
}

img {
  max-width: 100%;
}

/* <picture> only picks the format; the <img> keeps its original layout */
picture {
  display: contents;
}

/* Chrome renders <source> inline: inside a flex parent it becomes an empty
   flex item and adds an extra gap */
picture > source {
  display: none;
}

p,
h1,
h2,
h3,
figure {
  margin: 0;
}

/* ---------- page shell ---------- */

.page {
  padding: 72px var(--page-padding) 96px;
  overflow-x: clip; /* full-bleed media may run past the viewport without side scroll */
}

.page__inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--content-width-wide);
  margin: 0 auto;
}

/* ---------- case header (Spend macro 2942:12355): byline back to the main page ---------- */
.case-header {
  position: relative;
  display: flex;
  justify-content: center;
  width: min(100%, var(--content-width-wide));
  margin: -40px auto 44px; /* page top 72 − 40 → byline at 32; 44 to the content */
}

/* Spend macro 2942:12356: "↩ Home" on the byline's line, 186px into the 1362
   frame — the same column as the main page timeline */
.case-header__home {
  position: absolute;
  top: 0;
  left: clamp(0px, 13.583%, 185px);
}

.case-header__link {
  font-size: 13px;
  line-height: 15px;
  font-weight: 400;
  color: #999999; /* same grey as the footer */
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.case-header__link:hover {
  opacity: 0.6;
}

@media (max-width: 1024px) {
  .case-header {
    margin: -16px auto 32px;
  }
}

@media (max-width: 720px) {
  .case-header {
    justify-content: space-between;
    margin: 0 auto 28px;
  }

  .case-header__home {
    position: static;
  }
}

/* ---------- site footer (Main page macro 68:1644) ----------
   "↩ Home", 86px, then a 679px row with "Cuttin' In" left and the year at its
   right end; the 812px group starts at the content's left edge */
.page:has(> .site-footer) {
  padding-bottom: 30px; /* macro: footer sits 30px above the bottom */
}

.site-footer {
  display: flex;
  align-items: baseline;
  gap: 86px;
  width: min(100%, 1190px);
  margin: 300px auto 0; /* about a section's worth of air before the footer */
  font-size: 13px;
  line-height: 15px;
  color: #999999;
}

.site-footer p {
  margin: 0;
}

.site-footer__home {
  flex: none;
  color: inherit;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.site-footer__home:hover {
  opacity: 0.6;
}

.site-footer__row {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex: 0 1 679px;
  min-width: 0;
}

@media (max-width: 1024px) {
  .site-footer {
    margin-top: 200px;
  }
}

@media (max-width: 720px) {
  .site-footer {
    gap: 40px;
    margin-top: 140px;
  }

  .page:has(> .site-footer) {
    padding-bottom: 24px;
  }
}

/* a normal section: centered content column, no card */
.section {
  width: 100%;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: var(--section-pad-y) 0;
}

/* a panelled section: soft background, wider bound, inner padding */
.section--panel {
  max-width: var(--content-width-wide);
  border-radius: var(--panel-radius-lg);
  padding: 72px 86px;
}

.section--warm {
  background: var(--panel-warm);
}

.section--pink {
  background: var(--panel-pink);
  border-radius: var(--panel-radius-md);
}

/* section header block (eyebrow + title + optional lead) */
.section-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 553px;
}

.section-head__lead {
  margin-top: 12px;
}

/* ---------- utility layer (kept small, from Spend) ---------- */

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

.gap-2 { gap: 2px; }
.gap-4 { gap: 4px; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-20 { gap: 20px; }
.gap-24 { gap: 24px; }
.gap-28 { gap: 28px; }
.gap-32 { gap: 32px; }
.gap-44 { gap: 44px; }

/* ---------- typography tokens ---------- */

.t-eyebrow {
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.66px;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--eyebrow);
}

.t-eyebrow--warm {
  color: var(--eyebrow-warm);
}

.t-eyebrow--pink {
  color: #d02f60;
}

.t-section-title {
  font-size: 28px;
  line-height: 32px;
  font-weight: 600;
  letter-spacing: var(--inter-tight-tracking);
  color: var(--text);
}

.t-body {
  font-size: 15px;
  line-height: 21px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--text);
}

.t-body--soft {
  color: var(--text-soft);
}

.t-caption {
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
  color: var(--text-soft);
}

.t-meta-label {
  font-size: 13.5px;
  line-height: 18.9px;
  font-weight: 600;
  letter-spacing: -0.135px;
  color: var(--text);
}

.t-meta-value {
  font-size: 13.5px;
  line-height: 18px;
  font-weight: 400;
  color: var(--text);
}

/* handwritten accent — used only in the closing quote */
.t-note {
  font-family: "Caveat", cursive;
  font-size: 24px;
  line-height: 1;
  color: var(--note);
}

/* ---------- media / video asset wrappers (from Spend) ---------- */

.asset {
  position: relative;
  overflow: hidden;
}

.asset img,
.asset video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.asset__placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.asset video {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.asset.is-ready video {
  opacity: 1;
  position: relative;
}

.asset.is-ready .asset__placeholder {
  opacity: 0;
}

/* =========================================================
   Section styles are appended below as each section is built.
   ========================================================= */

/* ---------- 0 · Feature ---------- */

.section-feature {
  padding-top: 40px;
}

.feature-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  max-width: 742px;
  margin: 0 auto;
}

.feature-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 347px;
  flex: none;
  /* copy starts 49px below the phone top, matching Figma (copy y=50, phone y=1) */
  padding-top: 49px;
}

.feature-lead {
  margin-top: 20px;
}

/* hero type — OOR V3 macro (node 1337:70408) */
.feature-title {
  font-size: 32px;
  line-height: 36px;
}

.feature-lead .t-body {
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.17px;
}

.feature-cred {
  margin-top: 44px;
  width: 274px;
  gap: 14px;
  padding-top: 4px;
  padding-right: 32px;
}

/* team names stay on one line, as in the macro (whitespace-nowrap) */
.feature-cred .t-meta-value > p {
  white-space: nowrap;
}

.feature-phone {
  position: relative;
  width: min(100%, 331px);
  aspect-ratio: 331 / 652.2;
  flex: none;
  /* shadow values from the OOR V3 macro (node 1418:13257) */
  filter: drop-shadow(108.333px 100.833px 20.833px rgba(0, 0, 0, 0.01))
    drop-shadow(69.167px 64.167px 18.75px rgba(0, 0, 0, 0.04))
    drop-shadow(39.167px 35.833px 15.833px rgba(0, 0, 0, 0.14))
    drop-shadow(17.5px 15.833px 11.667px rgba(0, 0, 0, 0.25))
    drop-shadow(4.167px 4.167px 6.667px rgba(0, 0, 0, 0.28));
}

.feature-phone__screen {
  position: absolute;
  top: 4.29%;
  left: 50%;
  transform: translateX(-50%);
  width: 83.4%;
  aspect-ratio: 276 / 600;
  border-radius: 13.78% / 6.34%; /* 38px on the 276×600 screen */
  overflow: hidden;
  background: #101114;
  z-index: 1;
}

.feature-phone__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feature-phone__frame {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  object-fit: contain;
}

@media (max-width: 720px) {
  .feature-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
  }

  .feature-copy {
    width: 100%;
    padding-top: 0;
  }

  .feature-phone {
    width: min(100%, 331px);
    margin: 0 auto;
  }
}

/* ---------- 1 · Data ---------- */

.data-grid {
  display: flex;
  gap: 33px;
  margin-top: 72px;
}

.metric {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.metric__head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 103px;
}

.metric__value {
  display: flex;
  align-items: baseline;
  line-height: 1;
  color: #000;
}

.metric__num {
  font-size: 80px;
  line-height: 1;
  letter-spacing: -2.4px;
}

.metric__unit {
  font-size: 40px;
  line-height: 1;
}

.metric__caption {
  font-size: 15px;
  line-height: 18.9px;
  color: #000;
  padding-left: 4px;
}

.metric__chart {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: 100%;
  max-width: 308px;
}

.metric__row {
  position: relative;
  display: flex;
  align-items: center;
  height: 36px;
}

.metric__row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: var(--w);
  background: var(--bar, #f5f5f5);
  z-index: 0;
}

.metric__year {
  position: relative;
  z-index: 1;
  margin-left: 8px;
  font-size: 13px;
  line-height: 17px;
  color: #3d3a37;
}

.metric__pct {
  position: relative;
  z-index: 1;
  margin-left: auto;
  margin-right: 8px;
  font-size: 13px;
  line-height: 17px;
  color: #000;
}

.metric__pct--base {
  color: #828282;
  font-weight: 500;
}

/* per-row bar tints */
.metric__chart--pink .metric__row:nth-child(1)::before { background: var(--bar-pink-1); }
.metric__chart--pink .metric__row:nth-child(2)::before { background: var(--bar-pink-2); }
.metric__chart--pink .metric__row:nth-child(3)::before { background: var(--bar-pink-3); }
.metric__chart--pink .metric__row:nth-child(4)::before { background: var(--bar-pink-4); }

.metric__chart--orange .metric__row:nth-child(1)::before { background: var(--bar-orange-1); }
.metric__chart--orange .metric__row:nth-child(2)::before { background: var(--bar-orange-2); }
.metric__chart--orange .metric__row:nth-child(3)::before { background: var(--bar-orange-3); }
.metric__chart--orange .metric__row:nth-child(4)::before { background: var(--bar-orange-4); }

.metric__chart--lavender .metric__row:nth-child(1)::before { background: rgba(229, 224, 255, 0.24); }
.metric__chart--lavender .metric__row:nth-child(2)::before { background: rgba(219, 212, 255, 0.36); }
.metric__chart--lavender .metric__row:nth-child(3)::before { background: rgba(204, 194, 255, 0.33); }
.metric__chart--lavender .metric__row:nth-child(4)::before { background: rgba(191, 178, 255, 0.4); }

@media (max-width: 1024px) {
  .data-grid {
    gap: 20px;
  }
}

@media (max-width: 720px) {
  .data-grid {
    flex-direction: column;
    gap: 40px;
    margin-top: 48px;
  }

  .metric__head {
    min-height: 0;
  }

  .metric__chart {
    max-width: 60%; /* stacked metrics: chart takes 60% of the container */
  }
}

@media (max-width: 480px) {
  .metric__num {
    font-size: 56px;
    letter-spacing: -1.6px;
  }

  .metric__unit {
    font-size: 30px;
  }
}

/* ---------- 2 · Progress ---------- */

.progress-body {
  display: flex;
  flex-direction: column;
  gap: 92px;
  margin-top: 64px;
  width: 100%;
}

.progress-phases {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  width: 100%;
}

.progress-phase {
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
}

.progress-phase--1 {
  flex: 507 1 0;
}

.progress-phase--2 {
  flex: 643 1 0;
}

.progress-note {
  font-size: 13.5px;
  line-height: 18px;
  color: #000;
  max-width: 511px;
}

.progress-note strong {
  font-weight: 600;
}

/* marked section: horizontal phase labels shrink with the viewport,
   capped at the macro 13.5/18 label size */
.progress-phases .progress-note {
  font-size: clamp(10px, 1.1vw, 13.5px);
  line-height: 1.333;
}

.progress-note--center {
  text-align: center;
  max-width: 461px;
  margin: 0 auto;
}

.progress-card {
  position: relative;
  width: 100%;
  background: var(--panel-plain);
  border: 1px solid var(--border-hair);
  border-radius: 12px;
  overflow: hidden;
}

/* cards keep the desktop proportions (507×341 / 643×341) at every width —
   a fixed 341px height left tiny images in tall empty cards on mobile */
.progress-phase--1 .progress-card {
  aspect-ratio: 507 / 341;
}

.progress-phase--2 .progress-card {
  aspect-ratio: 643 / 341;
}

.progress-card__img {
  position: absolute;
  height: auto;
  object-fit: contain;
}

.progress-card__img--2020 {
  width: 87.8%;
  left: 50%;
  transform: translateX(-50%);
  top: 7.92%;
}

.progress-card__img--2021 {
  width: 108.9%;
  left: 4.35%;
  top: 7.92%;
}

.progress-current {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  width: 100%;
}

.progress-modern {
  position: relative;
  width: 100%;
  aspect-ratio: 1190 / 820;
}

.progress-modern__pan {
  position: absolute;
  width: 93.7%;
  right: 7.4%;
  top: 1.7%;
  height: auto;
}

.progress-ft {
  position: absolute;
  left: 75.8%;
  top: 24.4%;
  width: 23.5%;
  aspect-ratio: 280 / 272;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 19px;
  box-shadow: var(--shadow-floating);
  overflow: hidden;
  background: #ffffff;
}

.progress-ft__card {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 0;
}

.progress-ft__video {
  position: absolute;
  top: 7.35%;
  left: 0;
  width: 100%;
  height: 50.7%;
  object-fit: contain;
  z-index: 1;
}

@media (max-width: 1024px) {
  .progress-body {
    gap: 64px;
  }

  .progress-phases {
    gap: 24px;
  }
}

@media (max-width: 720px) {
  /* phases stack on mobile */
  .progress-phases {
    flex-direction: column;
    gap: 40px;
  }

  .progress-phase--1,
  .progress-phase--2 {
    flex: none;
    width: 100%;
  }

  .progress-phases .progress-note {
    font-size: 13.5px;
    line-height: 18px;
  }

  /* the modern panorama grows 40% and bleeds past both viewport edges
     (clipped by .page) */
  .progress-modern {
    flex: none;
    width: 140%;
    max-width: none;
  }

  /* keep the FastTrack card inside the content edge: the panorama overhangs
     20% of the content per side, i.e. its right 14.286% is off-screen */
  .progress-ft {
    left: calc(85.714% - 23.5%);
  }
}

/* ---------- 4-5 · Checkout + Flowopt (warm panel) ---------- */

.section-cx {
  width: 100%;
  max-width: var(--content-width-wide);
  margin: 72px auto;
  background: var(--panel-warm);
  border-radius: var(--panel-radius-lg);
  overflow: hidden;
  padding-top: 82px;
}

.cx-checkout {
  max-width: 778px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 72px;
}

.cx-head {
  max-width: 515px;
}

/* MARKED section — phone + callouts kept horizontal on every viewport.
   The 778×632 canvas is a query container; all offsets, lines and fonts
   are expressed in cqw (1cqw = 1% of container width, design base 778px),
   so the whole composition shrinks fluidly with the container — no scale
   transform, fonts get smaller but stay crisp. 1px ≈ 0.12853cqw. */
.cx-content {
  position: relative;
  width: min(778px, 100%);
  aspect-ratio: 778 / 632;
  margin: 0 auto;
  container-type: inline-size;
}

.cx-phone {
  position: absolute;
  left: 0;
  top: 0;
  width: 43.70cqw;
  height: 100%;
  border: 1px solid var(--border-soft);
  border-radius: 3.6cqw;
  box-shadow: var(--shadow-floating-soft);
  overflow: hidden;
}

.cx-phone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cx-anno {
  position: absolute;
}

/* macro (1418:13412): 0.5px #FF3AA6 line, 6px #FF77C2 dot, whole callout at 80% */
.cx-anno__line {
  position: absolute;
  height: 0.5px;
  background: #ff3aa6;
  opacity: 0.8;
}

.cx-anno__line::before {
  content: "";
  position: absolute;
  left: 0;
  top: -2.75px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff77c2;
}

.cx-anno__text {
  font-size: 1.542cqw;
  line-height: 2.057cqw;
  color: #000;
}

.cx-anno--1 {
  left: 35.67cqw;
  top: 1.514cqw;
  width: 62.15cqw;
}
.cx-anno--1 .cx-anno__line {
  left: 0;
  top: 0.771cqw;
  width: 23.01cqw;
}
.cx-anno--1 .cx-anno__text {
  position: absolute;
  left: 24.10cqw;
  top: 0;
  width: 38.05cqw;
}

.cx-anno--2 {
  left: 40.30cqw;
  top: 29.92cqw;
  width: 57.52cqw;
}
.cx-anno--2 .cx-anno__line {
  left: 0;
  top: 0.900cqw;
  width: 17.48cqw;
}
.cx-anno--2 .cx-anno__text {
  position: absolute;
  left: 19.47cqw;
  top: 0;
  width: 38.05cqw;
}

.cx-anno--3 {
  left: 41.07cqw;
  top: 45.76cqw;
  width: 56.94cqw;
}
.cx-anno--3 .cx-anno__line {
  left: 0;
  top: 20.54cqw;
  width: 17.87cqw;
}
.cx-anno__stack {
  position: absolute;
  left: 18.70cqw;
  top: 0;
  width: 38.24cqw;
  display: flex;
  flex-direction: column;
  gap: 1.542cqw;
}

.cx-order {
  width: 100%;
  aspect-ratio: 595 / 451;
  border-radius: 1.028cqw;
  box-shadow: var(--shadow-ui);
  overflow: hidden;
}

.cx-order img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cx-flow {
  /* macro: stage ends 67px above the 757px frame bottom */
  padding-bottom: 67px;
}

.cx-flow__head {
  max-width: 778px;
  margin: 96px auto 50px;
  padding: 0 24px;
}

/* 7 → 4 screens stage. Geometry (left/top/width in cqw) and the
   choreography are set in script.js per layout: the macro composition
   from 1025px up; below, the same row scaled so the 4 final screens fit
   the width while the 7 starting screens overflow the panel edges. */
.flow {
  margin: 0;
}

.flow__stage {
  position: relative;
  width: 100%;
  margin: 0 auto;
  aspect-ratio: 1362 / 540;
  container-type: inline-size;
}

.flow__screen,
.flow__connector,
.flow__label {
  position: absolute;
  margin: 0;
}

.flow__screen {
  height: auto;
  object-fit: contain;
  will-change: transform, opacity;
}

.flow__screen[data-removed] {
  z-index: 1;
  transform-origin: 50% 60%;
}

.flow__screen[data-kept] {
  z-index: 2;
  transform-origin: 0 0;
}

.flow__connector {
  z-index: 3;
  height: auto;
}

.flow__stage[data-layout="macro"] .flow__label {
  white-space: nowrap; /* keep the macro's two lines when the 9px floor kicks in */
}

.flow__label {
  z-index: 3;
  display: grid;
  align-content: end; /* text sits on the connector even when it wraps to fewer lines */
  font-size: max(9px, 0.8076cqw); /* 11px at the 1362 base */
  line-height: 1.2;
  color: #523e45;
}

.flow__stage[data-layout="row"] .flow__label {
  font-size: clamp(9px, 2.9333cqw, 13px); /* 11px at the 375 base */
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-width: 720px) {
  .section-cx {
    border-radius: var(--panel-radius-md);
    padding-top: 48px;
  }

  .cx-checkout {
    gap: 48px;
  }

  .cx-flow {
    padding-bottom: 64px;
  }

  .cx-flow__head {
    margin-top: 64px;
    margin-bottom: 32px;
  }

}

/* ---------- 6 · Research ---------- */

.research-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
}

.research-head {
  width: 375px;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.research-note {
  flex: none;
  width: 339px;
  margin: 0 120px 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.research-note__img {
  width: 288.5px;
  height: auto;
  aspect-ratio: 288.5 / 142.5;
}

.research-note__cap {
  font-size: 13.5px;
  line-height: 18px;
  color: #000;
  text-align: center;
}

.research-graphs {
  display: flex;
  gap: 32px;
  margin-top: 108px;
  align-items: flex-start;
  width: 100%;
}

.rlist {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* macro 1337:70429: columns are 375 / 376 / 375 wide, but their title and
   bars are only 316 / 320 / 316 — the empty tail is the visual column gap */
.rlist > * {
  width: 84.27%; /* 316 / 375 */
}

.rlist--bad > * {
  width: 85.11%; /* 320 / 376 */
}

.rlist__title {
  font-size: 15px;
  line-height: 21px;
  font-weight: 500;
  color: #000;
}

.rlist__bars {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.rbar {
  position: relative;
  display: flex;
  align-items: center;
  height: 36px;
}

.rbar::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: var(--w);
  background: var(--bar);
  z-index: 0;
}

.rbar__label {
  position: relative;
  z-index: 1;
  margin-left: 12px;
  font-size: 13px;
  line-height: 1.2;
}

.rbar__val {
  position: relative;
  z-index: 1;
  margin-left: auto;
  margin-right: 8px;
  font-size: 15px;
  line-height: 1.2;
}

.rlist--good .rbar__label { color: #3d3339; }
.rlist--good .rbar__val { color: #77596c; }
.rlist--good .rbar:nth-child(1)::before { background: rgba(255, 184, 228, 0.3); }
.rlist--good .rbar:nth-child(2)::before { background: rgba(255, 199, 234, 0.3); }
.rlist--good .rbar:nth-child(3)::before { background: rgba(255, 212, 239, 0.3); }
.rlist--good .rbar:nth-child(4)::before { background: rgba(255, 224, 244, 0.3); }
.rlist--good .rbar:nth-child(5)::before { background: rgba(255, 232, 246, 0.25); }

.rlist--bad .rbar__label { color: #3d3a33; }
.rlist--bad .rbar__val { color: #666156; }
.rlist--bad .rbar:nth-child(1)::before { background: rgba(255, 218, 176, 0.3); }
.rlist--bad .rbar:nth-child(2)::before { background: rgba(255, 228, 196, 0.3); }
.rlist--bad .rbar:nth-child(3)::before { background: rgba(255, 235, 212, 0.3); }
.rlist--bad .rbar:nth-child(4)::before { background: rgba(255, 241, 224, 0.3); }
.rlist--bad .rbar:nth-child(5)::before { background: rgba(255, 246, 235, 0.3); }

.rlist--ugly .rlist__items {
  display: flex;
  flex-direction: column;
}

.ritem {
  padding: 9px 8px;
  font-size: 15px;
  line-height: 1.2;
  color: #1e344a;
  border-bottom: 1px solid var(--border-soft);
}

.ritem:first-child {
  border-top: 1px solid var(--border-soft);
}

@media (max-width: 1024px) {
  .research-note {
    margin-right: 0;
  }

  .research-graphs {
    gap: 20px;
    margin-top: 72px;
  }
}

@media (max-width: 720px) {
  .research-top {
    flex-direction: column;
    gap: 40px;
  }

  .research-head {
    width: 100%;
  }

  .research-note {
    width: 100%;
    max-width: 339px;
    align-items: flex-start;
    margin: 0;
  }

  .research-note__cap {
    text-align: left;
  }

}

/* three columns get too narrow for "label … value" rows below ~880 */
@media (max-width: 880px) {
  .research-graphs {
    flex-direction: column;
    align-items: stretch; /* stacked lists use the full width */
    gap: 40px;
  }

  .rlist > *,
  .rlist--bad > * {
    width: 100%;
  }
}

/* ---------- 7 · Closing Jobs (pink panel) ---------- */

.section-cj {
  width: 100%;
  max-width: var(--content-width-wide);
  margin: 72px auto;
  background: var(--panel-pink);
  border-radius: var(--panel-radius-md);
  overflow: hidden;
  padding: 64px 85px 72px;
}

.cj-head {
  max-width: 515px;
  margin-left: 48px;
}

.cj-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 62px;
}

.cj-row {
  display: flex;
  gap: 32px;
  justify-content: center;
}

.cj-cell {
  position: relative;
  width: 376px;
  height: 420px;
  flex: none;
}

.cj-label {
  position: absolute;
  font-size: 13.5px;
  line-height: 16px;
  color: #000;
}

.cj-card {
  position: absolute;
  background: #fff;
  border: 1px solid var(--border-hair);
  border-radius: 20px;
  box-shadow: 0 16px 24px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.cj-card img,
.cj-card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cj-card--video video {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.cj-card--video.is-ready video {
  opacity: 1;
}

/* staggered per-cell placement */
.cj-cell--web3 .cj-label { left: 60px; top: 0; }
.cj-cell--web3 .cj-card { left: 60px; top: 48px; width: 256px; height: 340px; border-radius: 19.7px; }

.cj-cell--recurring .cj-label { left: 34px; top: 0; }
.cj-cell--recurring .cj-card { left: 18px; top: 49px; width: 340px; height: 340px; border-radius: 18.9px; }

.cj-cell--swap .cj-label { left: 45px; top: 0; }
.cj-cell--swap .cj-card { left: 28px; top: 38px; width: 320px; height: 360px; }

.cj-cell--limits .cj-label { left: 60px; top: 33px; }
.cj-cell--limits .cj-card { left: 38px; top: 81px; width: 300px; height: 232px; }

.cj-cell--trhist .cj-label { left: 34px; top: 33px; }
.cj-cell--trhist .cj-card { left: 28px; top: 71px; width: 320px; height: 261px; }

@media (max-width: 1024px) {
  .section-cj {
    padding: 56px 40px 56px;
  }

  .cj-head {
    margin-left: 0;
  }

  .cj-grid {
    margin-top: 48px;
    gap: 40px;
  }

  .cj-row {
    flex-wrap: wrap;
    gap: 40px 32px;
  }

  .cj-cell {
    position: static;
    width: auto;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .cj-label {
    position: static;
  }

  /* keep the card a containing block so the absolute video stays clipped;
     reset left/top (needs .cj-cell specificity to beat per-cell rules) */
  .cj-cell .cj-card {
    position: relative;
    left: auto;
    top: auto;
  }

  .cj-cell--empty {
    display: none;
  }
}

@media (max-width: 720px) {
  .section-cj {
    padding: 48px 24px;
    border-radius: 28px;
  }

  /* fixed desktop card sizes shrink with the panel, keeping proportions */
  .cj-cell {
    max-width: 100%;
  }

  .cj-cell .cj-card {
    max-width: 100%;
    height: auto;
  }

  .cj-cell--web3 .cj-card { aspect-ratio: 256 / 340; }
  .cj-cell--recurring .cj-card { aspect-ratio: 1 / 1; }
  .cj-cell--swap .cj-card { aspect-ratio: 320 / 360; }
  .cj-cell--limits .cj-card { aspect-ratio: 300 / 232; }
  .cj-cell--trhist .cj-card { aspect-ratio: 320 / 261; }
}

/* ---------- 8 · Adapting ---------- */

.adapting-head {
  max-width: 481px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.adapting-graph {
  display: flex;
  flex-direction: column;
  width: 320px;
  max-width: 100%;
}

.adapting-graph .rbar__label {
  color: #3d3a33;
}

.adapting-graph .rbar__val {
  color: #666156;
}

.adapting-cols {
  display: flex;
  gap: 32px;
  margin-top: 72px; /* macro 1337:75523: graph → columns */
  align-items: flex-start;
  width: 100%;
}

.adapting-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.adapting-col--tokens {
  flex: 511 1 0;
  gap: 26px;
}

.adapting-col--methods {
  flex: 647 1 0;
  gap: 25px;
  container-type: inline-size; /* card content scales from the 647px design width */
}

.adapting-card {
  border-radius: 12px;
  border: 1px solid #f2f2f2;
  overflow: hidden;
  width: 100%;
}

.adapting-card--tokens {
  position: relative;
  aspect-ratio: 1 / 1; /* desktop 511 × 511 */
  background: #fafafa;
}

.adapting-coins {
  position: absolute;
  left: 50%;
  top: 6.067%;     /* 31 / 511 */
  transform: translateX(-50%);
  width: 58.708%;  /* 300 / 511 */
  max-width: none;
  height: auto;
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.06));
}

.adapting-card--methods {
  aspect-ratio: 647 / 512;
  background: #ffffff;
  padding: 6.491cqw 4.791cqw; /* 42px 31px at 647 */
}

.adapting-regions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6.491cqw 5.873cqw; /* 42px 38px at 647 */
}

.adapting-region {
  display: flex;
  flex-direction: column;
  gap: 2.473cqw; /* 16px at 647 */
}

.adapting-region__label {
  padding: 0 1.236cqw;               /* 8px at 647 */
  font-size: max(10px, 1.855cqw);    /* 12px at 647 */
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.264px;
  color: #000;
}

.adapting-region img {
  width: 100%;
  height: auto;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.02), 0 2px 4px rgba(0, 0, 0, 0.04);
}

@media (max-width: 720px) {
  .adapting-cols {
    flex-direction: column;
    gap: 40px;
  }

  .adapting-col--tokens,
  .adapting-col--methods {
    flex: none;
    width: 100%;
  }
}

/* ---------- 9 · Lifecycle (fanned panels) ---------- */

.lifecycle-head {
  gap: 16px;
  max-width: 515px;
}

.lifecycle-head__lead {
  max-width: 481px;
}

/* MARKED section — the fanned panels stay horizontal on every viewport.
   Already %-positioned; the container + cqw label font let it shrink
   fluidly (design base 1188px, 1px ≈ 0.08418cqw). */
.lifecycle-demo {
  position: relative;
  width: 100%;
  aspect-ratio: 1188 / 545;
  margin-top: 64px;
  container-type: inline-size;
}

.lc-item {
  position: absolute;
  top: 0;
  height: 100%;
}

.lc-item--ui {
  left: 0;
  width: 35.35%;
  z-index: 1;
}

.lc-item--scr {
  left: 32.58%;
  width: 35.35%;
  z-index: 2;
}

.lc-item--map {
  left: 61.28%;
  width: 38.72%;
  z-index: 3;
}

.lc-label {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 1.263cqw;
  line-height: 1.768cqw;
  letter-spacing: -0.0278cqw; /* -0.33px at the 1188 base */
  color: #000;
  white-space: nowrap;
}

/* fanned panels: the back ones sit slightly smaller (scaled around their centre,
   labels untouched), a crisp hairline plus a soft left shadow separates each
   panel from the one it overlaps */
.lc-panel {
  position: absolute;
  top: 8.26%;
  left: 0;
  width: 100%;
  height: 91.74%;
  border-radius: 1.508cqw;
  overflow: hidden;
  transform-origin: 50% 50%;
}

/* inside border: drawn over the image so it doesn't add to the panel's size */
.lc-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
  pointer-events: none;
}

.lc-panel--ui {
  background: #ffffff;
  transform: scale(0.97);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.lc-panel--scr {
  background: #fafafa;
  transform: scale(0.985);
  box-shadow: -6px 0 20px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(0, 0, 0, 0.04);
}

.lc-panel--map {
  background: #f0f0f0;
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.09), 0 1px 2px rgba(0, 0, 0, 0.04);
}

.lc-panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 1024px) {
  /* keep the horizontal fan (marked section) — it scales fluidly via
     the container + % positions; only tighten the top gap */
  .lifecycle-demo {
    margin-top: 48px;
  }
}

/* ---------- Footer · Conclusion ---------- */

.section-footer {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-top: 40px;
}

.footer-quote {
  max-width: 515px;
}

@media (max-width: 480px) {
  .footer-quote {
    font-size: 21px;
  }
}

/* =========================================================
   Responsive system — mirrors Spend (1024 / 720 / 480).
   Type follows the OOR macro (1337:70406); only the hero
   title steps down at ≤480.
   Spacing: section rhythm steps down like Spend's panels.
   ========================================================= */

@media (max-width: 1024px) {
  .page {
    padding: 48px var(--page-padding) 64px;
  }

  .page .section {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .page .section-feature {
    padding-top: 24px;
  }

  .section-cx,
  .section-cj {
    margin: 48px auto;
  }
}

@media (max-width: 720px) {
  .page {
    padding: 32px var(--page-padding) 64px;
  }

  .page .section {
    padding-top: 32px;
    padding-bottom: 32px;
  }

  .page .section-feature {
    padding-top: 16px;
  }

  .section-cx,
  .section-cj {
    margin: 32px auto;
    border-radius: 28px;
  }

}

@media (max-width: 480px) {
  .page {
    padding: 24px 20px 64px;
  }

  .page .section {
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .page .section-feature {
    padding-top: 8px;
  }

  .section-cx,
  .section-cj {
    margin: 24px auto;
  }

  .page .feature-title {
    font-size: 24px;
    line-height: 28px;
  }
}

/* ---------- Panels (Checkout warm / Closing Jobs pink) — Spend panel rhythm ---------- */

@media (max-width: 1024px) {
  .section-cx {
    padding-top: 56px;
  }

  .cx-checkout {
    width: min(778px, calc(100% - 80px));
  }

  .cx-flow {
    padding-bottom: 72px;
  }

  .cx-flow__head {
    margin-top: 72px;
  }
}

@media (max-width: 720px) {
  /* Spend geometry: panel edge 8px from the screen, 16px inner inset,
     so panel text lines up with page text (8 + 16 = 24; at ≤480 4 + 16 = 20) */
  .section-cx,
  .section-cj {
    width: auto;
    max-width: none;
    margin-left: -16px;
    margin-right: -16px;
  }

  .section-cx {
    padding-top: 32px;
  }

  .cx-checkout {
    width: auto;
    padding-inline: 16px;
    gap: 40px;
  }

  .cx-flow {
    padding-bottom: 32px;
  }

  .cx-flow__head {
    margin-top: 56px;
    margin-bottom: 24px;
    padding: 0 16px;
  }

  .section-cj {
    padding: 32px 16px;
  }

  .cj-grid {
    margin-top: 32px;
  }
}

@media (max-width: 480px) {
  .section-cx {
    padding-top: 24px;
  }

  .cx-checkout {
    gap: 32px;
  }

  .cx-flow {
    padding-bottom: 24px;
  }

  .cx-flow__head {
    margin-top: 48px;
  }

  .section-cj {
    padding: 24px 16px;
  }
}

/* =========================================================
   Vertical rhythm ramp (below the macro width)
   Desktop proportions kept at every step: gaps inside a section stay
   clearly smaller than the gap between sections, and stacked items
   on mobile get their own step so blocks never blend:
             between     inner   head →     panel   stacked
             sections    block   content    inset   items
     1440    144         92–96   48–108     64–82   —
     ≤1024   96          64      40–72      56      40
     ≤720    96          64      40–56      40      40–56
     ≤480    80          56      32–48      32      32–48
   ========================================================= */

@media (max-width: 1024px) {
  .data-grid { margin-top: 48px; }
  .progress-body { margin-top: 48px; gap: 64px; }
  .cx-checkout { gap: 48px; }
  .cx-flow__head { margin-top: 64px; margin-bottom: 40px; }
  .cx-flow { padding-bottom: 56px; }
  .research-graphs { margin-top: 72px; }
  .adapting-cols { margin-top: 56px; }
  .lifecycle-demo { margin-top: 48px; }
  .page .section-footer { padding-top: 24px; }
}

@media (max-width: 720px) {
  .page .section { padding-top: 48px; padding-bottom: 48px; }
  .page .section-feature { padding-top: 16px; }
  .page .section-footer { padding-top: 24px; }
  .section-cx,
  .section-cj { margin-top: 48px; margin-bottom: 48px; }

  .section-cx { padding-top: 40px; }
  .cx-flow { padding-bottom: 40px; }
  .section-cj { padding-top: 40px; padding-bottom: 40px; }

  .data-grid { margin-top: 48px; gap: 56px; }
  .progress-body { margin-top: 48px; gap: 64px; }
  .progress-phases { gap: 48px; }
  .cx-checkout { gap: 48px; }
  .cx-flow__head { margin-top: 64px; margin-bottom: 40px; }
  .research-graphs { margin-top: 56px; gap: 40px; }
  .cj-grid { margin-top: 40px; gap: 40px; }
  .cj-row { gap: 40px 32px; }
  .adapting-cols { margin-top: 48px; gap: 48px; }
  .lifecycle-demo { margin-top: 48px; }
}

@media (max-width: 480px) {
  .page .section { padding-top: 40px; padding-bottom: 40px; }
  .page .section-feature { padding-top: 8px; }
  .page .section-footer { padding-top: 24px; }
  .section-cx,
  .section-cj { margin-top: 40px; margin-bottom: 40px; }

  .section-cx { padding-top: 32px; }
  .cx-flow { padding-bottom: 32px; }
  .section-cj { padding-top: 32px; padding-bottom: 32px; }

  .data-grid { margin-top: 40px; gap: 48px; }
  .progress-body { margin-top: 40px; gap: 56px; }
  .progress-phases { gap: 40px; }
  .cx-checkout { gap: 40px; }
  .cx-flow__head { margin-top: 56px; margin-bottom: 32px; }
  .research-graphs { margin-top: 48px; gap: 32px; }
  .cj-grid { margin-top: 32px; gap: 32px; }
  .cj-row { gap: 32px; }
  .adapting-cols { margin-top: 40px; gap: 40px; }
  .lifecycle-demo { margin-top: 40px; }
}