/* "AI engineered for a changing world" (CJ, 2026-11-01, after clickup.com's "AI designed to be your unfair
   advantage"): the dark panel after the white agent wall (build.py changing_world, content/changing-world.json).
   Wide screens with motion allowed: the panel opens as a rounded card inset from the page edges, white above its
   top, and widens to full bleed while its top climbs the screen; it narrows again as its bottom leaves, over the dark
   page. A line under the title fills toward the next part. A frame pins under the header while four steps pass (each
   a decorative visual and its tab, site.js), with a progress line between them and a short line under the card that
   fills toward the closing butterfly. A close with the butterfly, its title and Get Ready over a dithered spectral
   glow ends it.

   CSS first: the motion is native scroll-driven CSS (view timelines, named ranges). Where a browser has none
   (Firefox), site.js writes the same states as custom properties from one passive, rAF-throttled scroll handler that
   listens only while the section is near (an IntersectionObserver); without either the panel rests at full bleed
   with its lines filled. Chromium attaches no scroll listener here. The properties site.js writes:
     --cw-vw                       the viewport's width without a classic scrollbar (on the section; every browser)
     --cw-eco-scale                the Earth ecosystem's scale in its card, from both measured sizes (every browser)
     --cw-room                     half the pinned frame's leftover height on screens 1000px tall and more, else 0px
                                   (on the section; the closing line grows by it)
     --cw-clip-x, --cw-clip-r      the panel's side inset from the viewport edge and its corner radius (fallback)
     --cw-fill                     how far a line has filled, 0..1 (on each .cw-line; fallback)
   Phones, reduced motion, no JavaScript and a step list too tall for the screen (site.js checks the tallest, so
   large text or text spacing never cuts a tab off) show the four steps stacked and static. Nothing moves on a timer
   (the Earth globe turns on its own, as on Investors, with the owner's exemption). ASCII only. */

.changing-world {
  --cw-top: 64px;
  --cw-lead: 64px;
  --cw-tail: 60px;
  --cw-step: 500px;
  --cw-dim: rgb(221 208 242 / 17%);
  --cw-tab: #19171f;
  /* The viewport's width (measured by site.js, so a classic scrollbar is left out; 100vw until then), the card's side
     gap from its edge (20px, wider screens a 1480px card), and how far the panel reaches past its own box to that
     edge: clip-path insets, so 100% is the panel's own width. */
  --cw-vp: var(--cw-vw, 100vw);
  --cw-x: max(20px, (var(--cw-vp) - 1480px) / 2);
  --cw-out: max(0px, (var(--cw-vp) - 100%) / 2);
  --cw-card: inset(0 calc(var(--cw-x) - var(--cw-out)) round 32px);
  --cw-bleed: inset(0 calc(0px - var(--cw-out)) round 0px);
  position: relative;
  /* Once measured, the section spans the viewport (out of the 1440px shell), so the close glow can fill the card at
     any width; the clip keeps every overhang inside it, so the page never scrolls sideways. */
  margin-inline: calc(50% - var(--cw-vw, 100%) / 2);
  overflow-x: clip;
}

/* The panel: the brand black, painted to the viewport edges by its spread shadow (no scrollable overflow), shown
   through the clip-path. It is data-opaque-band: the stardust's Pause hides and the field rests while it covers that
   corner (site.js); the header ignores it and stays glass over the dark. */
.cw-panel {
  position: relative;
  z-index: 1;
  background: var(--bg);
  box-shadow: 0 0 0 100vmax var(--bg);
  clip-path: var(--cw-bleed);
  color: var(--ink);
}

/* The white strip above the card (wide screens with motion): an invisible light band, so the header goes solid over
   it (reading-navigation.js) as over the wall, and only there. */
.cw-white { display: none; }
.cw-hero { padding: clamp(88px, 30vh, 300px) var(--pad) 0; text-align: center; }
.cw-title {
  max-width: 1000px;
  margin: 0 auto;
  font-family: Manrope, sans-serif;
  font-size: clamp(30px, 5.6vw, 84px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.055em;
  text-wrap: balance;
}
.cw-title .spectral { display: block; width: fit-content; margin-inline: auto; padding-bottom: .1em; }

/* The thin lines: a dim rail and its bright fill (filled unless a scroll timeline or the fallback drives it). */
.cw-line { position: relative; display: block; width: 1px; background: var(--cw-dim); }
.cw-line-fill { position: absolute; inset: 0; background: linear-gradient(180deg, #fff, var(--spectral-1) 72%, var(--spectral-2)); transform-origin: 50% 0; }
.cw-connector { height: 120px; margin: 28px auto 0; view-timeline: --cw-connector block; view-timeline-inset: 0px; }
.cw-progress { display: none; }
.cw-closer { display: none; }

.cw-track { position: relative; padding: 24px var(--pad) 0; }
.cw-head { display: flex; flex-direction: column; align-items: center; text-align: center; }
/* The grey lines under the hero title and under the showcase title (ClickUp: about 18px and 16px, two lines). */
.cw-lede { max-width: 620px; margin: clamp(18px, 2.4vh, 26px) auto 0; color: var(--muted); font-size: clamp(16px, 1.25vw, 19px); line-height: 1.5; text-wrap: balance; }
.cw-description { max-width: 680px; margin-top: clamp(8px, 1.4vh, 14px); color: var(--muted); font-size: clamp(14px, min(1.1vw, 2vh), 16px); line-height: 1.55; text-wrap: balance; }
.cw-mark { width: 90px; mix-blend-mode: lighten; }
.cw-wordmark { width: 240px; max-width: 72%; margin-top: 16px; }
.cw-subtitle {
  max-width: 820px;
  margin-top: 18px;
  font-family: Manrope, sans-serif;
  font-size: clamp(26px, 3.3vw, 48px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.cw-marks { display: none; }

/* The steps, stacked (phones, reduced motion, no JavaScript): each its visual, title and description. */
.cw-showcase { max-width: 640px; margin: 48px auto 0; }
.cw-steps { display: grid; gap: 56px; margin: 0; padding: 0; list-style: none; }
.cw-step { display: grid; gap: 22px; }
.cw-step-copy { position: relative; }
.cw-step-title { margin: 0; font-family: Manrope, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; letter-spacing: -.02em; }
.cw-step-text { margin-top: 10px; color: var(--muted); font-size: 16px; line-height: 1.55; }

/* A step title becomes this button where the steps are tabs (site.js; the current one carries aria-current); its
   ::after makes the whole panel the target and carries the focus ring. */
.cw-tab { display: block; width: 100%; min-height: 28px; padding: 0; text-align: left; font: inherit; letter-spacing: inherit; color: #c9c5d3; transition: color .2s ease; }
.cw-tab::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 16px; }
.cw-tab:hover, .cw-tab[aria-current="true"] { color: #fff; }
.cw-tab:focus-visible { outline: none; }
.cw-tab:focus-visible::after { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The visual cards: a grained spectral gradient (the site's hues, deepened) around a copy of existing artwork. */
.cw-visual {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  aspect-ratio: 6 / 5;
  border-radius: 24px;
  background: #211c30;
}
.cw-visual::before { content: ""; position: absolute; inset: 0; z-index: 0; background: url("assets/changing-world/grain-1.png") 0 0 / 128px; mix-blend-mode: overlay; opacity: .55; pointer-events: none; }
.cw-visual--maker { background: radial-gradient(85% 70% at 6% 0%, #b596d8 0%, rgb(181 150 216 / 0%) 62%), radial-gradient(80% 75% at 100% 12%, #d7a3d0 0%, rgb(215 163 208 / 0%) 60%), radial-gradient(110% 85% at 30% 104%, #4d67b2 0%, rgb(77 103 178 / 0%) 66%), #2a2240; }
.cw-visual--evolution { background: radial-gradient(80% 70% at 0% 6%, #cdb57e 0%, rgb(205 181 126 / 0%) 58%), radial-gradient(90% 80% at 62% 0%, #a888cc 0%, rgb(168 136 204 / 0%) 64%), radial-gradient(100% 90% at 100% 100%, #5675bf 0%, rgb(86 117 191 / 0%) 66%), #261f39; }
.cw-visual--organization { background: radial-gradient(90% 75% at 0% 0%, #5c7fc8 0%, rgb(92 127 200 / 0%) 62%), radial-gradient(80% 80% at 100% 30%, #5ea893 0%, rgb(94 168 147 / 0%) 60%), radial-gradient(100% 80% at 40% 108%, #a382c8 0%, rgb(163 130 200 / 0%) 64%), #1f2236; }
.cw-visual--ecosystem { aspect-ratio: auto; background: radial-gradient(70% 60% at 0% 0%, #5ea893 0%, rgb(94 168 147 / 0%) 64%), radial-gradient(70% 60% at 100% 0%, #a382c8 0%, rgb(163 130 200 / 0%) 64%), radial-gradient(90% 70% at 50% 108%, #5675bf 0%, rgb(86 117 191 / 0%) 66%), #1c1a2b; }

/* A crop of Maker's design at a scale where its text reads; on a short card it shows the crop's top. */
.cw-maker { position: absolute; z-index: 1; left: 8%; right: 8%; top: 50%; max-height: 84%; overflow: hidden; border: 1px solid rgb(255 255 255 / 38%); border-radius: 12px; background: #f4f3f6; box-shadow: 0 30px 60px -22px rgb(10 6 22 / 75%); transform: translateY(-50%); }
.cw-maker img { width: 100%; }

.cw-evolution { position: absolute; z-index: 1; left: 50%; top: 50%; height: 86%; aspect-ratio: 10 / 8; container-type: inline-size; transform: translate(-50%, -50%); perspective: 1600px; }
.cw-evolution-curve { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; max-width: none; filter: drop-shadow(0 2px 3px rgb(0 0 0 / 55%)); }
.cw-evolution-picture { position: absolute; width: 70%; overflow: hidden; border: 1px solid rgb(232 221 246 / 38%); border-radius: 10px; background: #17151d; box-shadow: 1px 3px 0 #292432, 3px 6px 0 #151219, 0 22px 40px -12px rgb(0 0 0 / 80%); transform: rotateX(7deg) rotateY(-12deg) rotateZ(-4deg); }
.cw-evolution-picture--1 { z-index: 1; left: 4%; top: 1%; opacity: .9; }
.cw-evolution-picture--2 { z-index: 2; left: 13%; top: 12%; opacity: .97; }
.cw-evolution-picture--3 { z-index: 3; left: 22%; top: 23%; border-color: rgb(232 221 246 / 58%); }
.cw-evolution-caption { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 1.4cqw 2.2cqw; color: #cdc9d6; font-size: clamp(8px, 2.3cqw, 12px); line-height: 1.3; white-space: nowrap; }
.cw-evolution-badge { display: inline-flex; align-items: center; gap: 5px; color: #bdb3cc; font-size: .9em; font-weight: 500; }
.cw-evolution-badge i { width: 5px; height: 5px; border-radius: 50%; background: #b5a0dc; box-shadow: 0 0 10px rgb(181 160 220 / 30%); }
.cw-evolution-frame { display: block; overflow: hidden; }
.cw-evolution-frame img { max-width: none; }
.cw-evolution-picture--1 .cw-evolution-frame { aspect-ratio: 1466 / 610; }
.cw-evolution-picture--1 img { width: 130.968622%; transform: translateY(-12.916667%); }
.cw-evolution-picture--2 .cw-evolution-frame { aspect-ratio: 1320 / 575; }
.cw-evolution-picture--2 img { width: 145.454545%; transform: translateY(-12.916667%); }
.cw-evolution-picture--3 .cw-evolution-frame { aspect-ratio: 800 / 584; }
.cw-evolution-picture--3 img { width: 240%; transform: translate(-26.041667%, -32.12963%); }

.cw-org { position: absolute; z-index: 1; left: 50%; top: 50%; width: min(78%, 400px); overflow: hidden; border: 1px solid rgb(255 255 255 / 22%); border-radius: 16px; background: var(--bg); box-shadow: 0 30px 70px -24px rgb(6 4 14 / 82%); transform: translate(-50%, -50%); }
.cw-org-bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.cw-org-bar svg { width: 15px; height: 15px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.6; }
.cw-org-bar b { color: var(--quiet); font-weight: 400; }
.cw-org-body { padding: 36px 22px 32px; text-align: center; }
.cw-org-name { color: var(--ink); font-size: 22px; line-height: 1.3; letter-spacing: -.02em; }
.cw-org-line { margin-top: 8px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.cw-org-action { display: inline-flex; align-items: center; min-height: 40px; margin-top: 20px; padding: 0 22px; border-radius: 999px; background: var(--ink); color: var(--bg); font-size: 14px; font-weight: 500; }

/* The Earth ecosystem keeps its own drawing (investor-ecosystem.css/js); here it sits on a black inner panel. */
.cw-ecosystem { position: relative; z-index: 1; width: auto; margin: 20px; padding: 24px 0 18px; border: 1px solid rgb(255 255 255 / 14%); border-radius: 20px; background: var(--bg); box-shadow: 0 30px 70px -24px rgb(6 4 14 / 82%); }

/* The close: the butterfly, the title and Get Ready over a dithered spectral glow. */
.cw-close { position: relative; isolation: isolate; margin-top: 112px; padding: 40px var(--pad) clamp(240px, 36vh, 340px); text-align: center; }
.cw-close-mark { width: 90px; margin: 0 auto; mix-blend-mode: lighten; }
.cw-close-title { margin-top: 22px; font-family: Manrope, sans-serif; font-size: clamp(36px, 5vw, 72px); font-weight: 700; line-height: 1.05; letter-spacing: -.05em; text-wrap: balance; }
/* Get Ready is the homepage's one solid button (.primary-link: the pill, its colours and type); this places it and
   adds a soft glow. */
.cw-close-action { margin-top: 34px; box-shadow: 0 12px 44px -12px rgb(223 201 232 / 55%); transition: transform .2s ease, box-shadow .2s ease; }
.cw-close-action:hover { box-shadow: 0 16px 54px -10px rgb(223 201 232 / 75%); transform: translateY(-1px); }
/* The glow spans the close, which spans the viewport once the section is measured, so the card's rounded corners
   clip it as the panel narrows on the way out. Its hues and ramp were matched to ClickUp's at 1:1 (1440x900, Get Ready
   where their Get Started sits): magenta, violet, blue and azure rising from the foot into a deep navy that reaches
   up to the title, Get Ready sitting on dark blue. */
.cw-glow {
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: 0;
  height: 80%;
  pointer-events: none;
  background:
    url("assets/changing-world/grain-1.png") 0 0 / 128px,
    radial-gradient(52% 70% at 6% 100%, rgb(212 56 204) 0%, rgb(212 56 204 / 0%) 100%),
    radial-gradient(52% 80% at 38% 100%, rgb(128 120 255) 0%, rgb(128 120 255 / 0%) 100%),
    radial-gradient(54% 82% at 68% 100%, rgb(78 130 252) 0%, rgb(78 130 252 / 0%) 100%),
    radial-gradient(44% 72% at 99% 100%, rgb(40 128 236) 0%, rgb(40 128 236 / 0%) 100%),
    linear-gradient(180deg, var(--bg) 0%, #0f1d5c 35%, #2a4fc0 100%);
  background-blend-mode: soft-light, normal, normal, normal, normal, normal;
}
/* The dither: half-opaque grey noise at 1px over a navy-to-white ramp, lifted by a mild contrast() into fine tonal
   grain that multiplies faintly into the glow (white keeps the glow), so its colour darkens into a deep blue toward the
   top rather than breaking into black specks (after ClickUp's). Over it, a short fade from the panel's black and three
   rows of faint ASCII glyphs, as in ClickUp's glow (decorative: the glow is aria-hidden). */
.cw-glow::before { content: ""; position: absolute; inset: 0; background: url("assets/changing-world/grain-1.png") 0 0 / 128px, linear-gradient(180deg, #0b1236 0%, #fff 46%); filter: contrast(2); mix-blend-mode: multiply; opacity: .4; }
.cw-glow::after {
  content: ". - - : . - . . : - - . - : . . - - . : - . - . . : - . - - : . - . : . . - - : . - . . - - : . - . : - - . . : - . - - . : . - . - - : . . - . : - - . -\A- : = - - = : - = = - : = - - : = = - : - = - : = - = = : - - = : - = - = : = - - : = - = : = - - = : - = = - : = - : = - = - : = = - : - = - - = : - =\A= + = = + * + = + + * = + = + * + + = = + * + = + = * + + = + = = * + + = + * = + = + + * = + + = * + = + = * + + = = + * + = + * = + + = + = * + = +";
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
  padding-bottom: 3%;
  background: linear-gradient(180deg, var(--bg) 0%, rgb(7 7 10 / 0%) 18%);
  color: rgb(255 255 255 / 36%);
  font: 700 14px/3.2 ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: 16px;
  white-space: pre;
}
/* Without the measurement (no JavaScript) the glow ends at the 1440px shell: past it, it fades out at its sides
   rather than ending on an edge. */
@media screen and (min-width: 1500px) {
  .changing-world:not([data-cw-measured]) .cw-glow { -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
}

/* Fluid cards from 960px. The frame is a size container, so the cards follow its width: the showcase is at most
   1168px (wider screens 72% of the viewport), never wider than the header's shell (so at 1920 and 2560 its edges
   meet the header's), each card half of it less the gap, its height 0.84 of its width within what the screen leaves.
   site.js scales the Earth to its card from both measured sizes (--cw-eco-scale), so nothing jumps and a change to
   the Earth's markup can't overflow its card. */
@media screen and (min-width: 960px) {
  .changing-world { --cw-show: min(100cqw, max(1168px, 72vw), var(--shell) - 2 * var(--pad)); --cw-card-w: calc((var(--cw-show) - 48px) / 2); --cw-card-h: clamp(260px, min(var(--cw-card-w) * .84, 100vh - 340px), 720px); }
  .cw-frame { container-type: inline-size; }
  .cw-mark { width: clamp(64px, 10vh, 90px); }
  .cw-wordmark { margin-top: clamp(10px, 1.8vh, 16px); }
  /* One line, as ClickUp's (it fits from 960px: about 23em at 3.3vw), which also keeps the showcase high. */
  .cw-subtitle { max-width: none; margin-top: clamp(12px, 2vh, 18px); font-size: clamp(26px, min(3.3vw, 5.3vh), 48px); }
  .cw-showcase { max-width: var(--cw-show); }
  .cw-step { grid-template-columns: var(--cw-card-w) minmax(0, 1fr); align-items: center; gap: 64px; }
  .cw-visual { width: var(--cw-card-w); }
  [data-cw-measured] .cw-visual--ecosystem { aspect-ratio: 6 / 5; }
  [data-cw-measured] .cw-ecosystem { position: absolute; left: 50%; top: 50%; width: 720px; margin: 0; padding: 26px 0 18px; border-radius: 30px; transform: translate(-50%, -50%) scale(var(--cw-eco-scale, .5)); }
  /* The sign-in card grows with a card wider than 1440's (560px), in proportion. */
  .cw-org { width: min(78%, max(400px, var(--cw-card-w) * .714)); }
}

/* The expansion, wide screens with motion allowed: white above the card's top (the wall continues), the page's dark
   beside its bottom. */
@media screen and (min-width: 960px) and (prefers-reduced-motion: no-preference) {
  .changing-world { padding-top: var(--cw-lead); }
  .cw-white { position: absolute; top: 0; left: 0; display: block; width: 100%; height: var(--cw-lead); pointer-events: none; }
  /* 2px above the section: the wall's white and this one meet on a fractional pixel, which left a grey seam. */
  .changing-world::before { content: ""; position: absolute; top: -2px; left: 0; right: 0; height: calc(50% + 2px); background: #fff; box-shadow: 0 0 0 100vmax #fff; clip-path: inset(0 -100vmax); }
  .cw-connector { height: 280px; margin-top: 40px; }
  @supports (animation-timeline: view()) {
    /* The timeline's view starts under the header (an explicit inset: the default follows the page's scroll-padding). */
    .cw-panel { clip-path: var(--cw-card); view-timeline: --cw-panel block; view-timeline-inset: var(--cw-top) 0px; animation: cw-panel linear both; animation-timeline: --cw-panel; }
    .cw-connector .cw-line-fill { animation: cw-fill linear both; animation-timeline: --cw-connector; animation-range: cover 0% cover calc(100vh - var(--cw-top)); }
  }
  /* No scroll timelines (Firefox): the same states from site.js's custom properties; until it writes them, full bleed
     and filled lines. */
  @supports not (animation-timeline: view()) {
    .cw-panel { clip-path: inset(0 calc(var(--cw-clip-x, 0px) - var(--cw-out)) round var(--cw-clip-r, 0px)); }
    .cw-line-fill { transform: scaleY(var(--cw-fill, 1)); }
  }
}
/* Opens while its top climbs from about the middle of the screen to near the header; closes as its bottom leaves.
   site.js's fallback follows these same ranges and curves. */
@keyframes cw-panel {
  entry 50% { clip-path: var(--cw-card); animation-timing-function: cubic-bezier(.3, .55, .3, 1); }
  entry 90% { clip-path: var(--cw-bleed); }
  exit 23% { clip-path: var(--cw-bleed); animation-timing-function: cubic-bezier(.62, 0, .42, 1); }
  exit 100% { clip-path: var(--cw-card); }
}
@keyframes cw-fill { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* The tabs (site.js sets data-cw-tabs under this same query, while the tallest step list fits the screen): the
   frame pins under the header for four steps of scrolling, its content at the bottom so the card ends --cw-tail above
   the frame's foot (the closing line's length) and the close's butterfly follows 50px below it; the active step's
   visual shows in the card and its description opens in a dark panel. On screens 1000px tall and more, site.js
   writes --cw-room, half the frame's leftover height: the line grows by it, so the content sits centred under the
   header instead of at the foot of a tall screen. The tab column keeps 1440's proportions as the card grows; near
   960px its gutter and titles narrow, so every title stays on one line. */
@media screen and (min-width: 960px) and (min-height: 640px) and (prefers-reduced-motion: no-preference) {
  [data-cw-tabs] .cw-track { height: calc(100vh - var(--cw-top) + 4 * var(--cw-step)); margin-top: -40px; padding: 0 var(--pad); view-timeline: --cw-track block; view-timeline-inset: var(--cw-top) 0px; }
  [data-cw-tabs] .cw-frame { position: sticky; top: var(--cw-top); display: flex; flex-direction: column; justify-content: flex-end; justify-content: safe flex-end; height: calc(100vh - var(--cw-top)); padding-bottom: calc(var(--cw-tail) + var(--cw-room, 0px)); }
  [data-cw-tabs] .cw-showcase { position: relative; display: grid; grid-template-columns: var(--cw-card-w) minmax(0, 1fr); align-items: center; width: 100%; height: var(--cw-card-h); margin-top: clamp(24px, 4.4vh, 48px); }
  [data-cw-tabs] .cw-progress { display: block; position: absolute; top: 0; bottom: 0; left: calc(var(--cw-card-w) + 24px); }
  [data-cw-tabs] .cw-closer { display: block; position: absolute; top: 100%; left: calc(var(--cw-card-w) + 24px); height: calc(var(--cw-tail) + var(--cw-room, 0px)); }
  [data-cw-tabs] .cw-steps { grid-column: 2; display: flex; flex-direction: column; gap: 4px; max-width: max(520px, var(--cw-card-w) - 40px); padding-left: clamp(48px, 9vw - 40px, 88px); }
  [data-cw-tabs] .cw-step { display: block; }
  /* The new visual fades in over the old, which leaves once covered. Skipping the hidden ones' rendering also lets the
     Earth's own observer stop its globe while another step shows. */
  [data-cw-tabs] .cw-visual { position: absolute; top: 0; left: 0; z-index: 0; height: var(--cw-card-h); aspect-ratio: auto; opacity: 0; visibility: hidden; content-visibility: hidden; transition: opacity 0s linear .5s, visibility 0s linear .5s, content-visibility 0s linear .5s allow-discrete; }
  [data-cw-tabs] [data-active] > .cw-visual { z-index: 1; opacity: 1; visibility: visible; content-visibility: visible; transition: opacity .5s ease; }
  [data-cw-tabs] .cw-step-copy { display: grid; grid-template-rows: auto 0fr; padding: 16px 22px; border-radius: 16px; transition: grid-template-rows .45s cubic-bezier(.2, .7, .2, 1), background-color .3s ease; }
  [data-cw-tabs] [data-active] > .cw-step-copy { grid-template-rows: auto 1fr; background: var(--cw-tab); }
  [data-cw-tabs] .cw-step-title { font-size: clamp(18px, 1.6vw + 3px, 20px); }
  [data-cw-tabs] .cw-step-more { min-height: 0; overflow: hidden; }
  [data-cw-tabs] .cw-step-text { margin-top: 0; padding-top: 8px; font-size: 15px; line-height: 1.5; opacity: 0; transition: opacity .25s ease; }
  [data-cw-tabs] [data-active] .cw-step-text { opacity: 1; transition: opacity .35s ease .12s; }
  /* Four markers, one step of scrolling each, placed so the one under the middle of the screen is the active step;
     a screen-tall sentinel before and after them, so a jump across all four still crosses one. */
  [data-cw-tabs] .cw-marks { position: absolute; left: 0; top: calc(-50vh - var(--cw-top)); display: grid; grid-template-rows: 100vh repeat(4, 1fr) 100vh; width: 1px; height: calc(4 * var(--cw-step) + 200vh); pointer-events: none; }
  [data-cw-tabs] .cw-close { margin-top: 0; padding-top: 50px; }
  @supports (animation-timeline: view()) {
    [data-cw-tabs] .cw-progress .cw-line-fill { animation: cw-fill linear both; animation-timeline: --cw-track; animation-range: contain 0% contain 100%; }
    /* The closing line fills over the first 80px of scrolling after the frame lets go (and the room it grew by). */
    [data-cw-tabs] .cw-closer .cw-line-fill { animation: cw-fill linear both; animation-timeline: --cw-track; animation-range: exit 0% exit calc(80px + var(--cw-room, 0px)); }
  }
}

/* Phones */
@media (max-width: 639.98px) {
  .cw-title { font-size: clamp(28px, 8.4vw, 40px); }
  .cw-subtitle { font-size: clamp(25px, 7vw, 32px); }
  .cw-wordmark { width: 200px; }
  .cw-showcase { margin-top: 40px; }
  .cw-steps { gap: 48px; }
  .cw-step { gap: 18px; }
  .cw-step-title { font-size: 20px; }
  .cw-step-text { font-size: 15px; }
  .cw-visual { border-radius: 20px; }
  .cw-org { width: 86%; }
  .cw-org-bar { padding: 10px 12px; font-size: 13px; }
  .cw-org-body { padding: 26px 16px 24px; }
  .cw-org-name { font-size: 19px; }
  .cw-ecosystem { margin: 14px; }
  .cw-close { margin-top: 88px; padding-bottom: 220px; }
}

/* Forced colours: the white wordmark on its dark plate (as styles.css's .wordmark), and the butterflies unblended,
   since lightening over a light Canvas washes them out. Get Ready takes .primary-link's forced colours. */
@media (forced-colors: active) {
  .cw-line-fill, .cw-glow { display: none; }
  .cw-line { background: CanvasText; }
  .cw-visual, .cw-step-copy { border: 1px solid CanvasText; }
  .cw-tab:focus-visible::after { outline-color: Highlight; }
  .cw-wordmark { forced-color-adjust: none; background: #07070a; padding: 5px; }
  .cw-mark, .cw-close-mark { mix-blend-mode: normal; }
}
/* Print: the panel is no stacking context (one cut its content off at the page break), the wordmark prints black (as
   styles.css's .wordmark) and the butterflies, lightened onto the dark only, are left out (as Investors' are). */
@media print {
  /* The page, not the screen's measured width. */
  .changing-world { margin-inline: 0; }
  .changing-world::before, .cw-line, .cw-visual, .cw-marks, .cw-glow, .cw-mark, .cw-close-mark { display: none; }
  .cw-panel { z-index: auto; box-shadow: none; clip-path: none; background: none; }
  .cw-wordmark { filter: brightness(0); }
  .cw-close { margin-top: 32px; padding-bottom: 24px; }
  .cw-close-action { box-shadow: none; }
}