/* ============================================================================
   Case study pages (Figma file 4Nxjk8ziL6tA6zlt05ZfzO, node 834:1670)
   Dark only. One normal-scrolling column, 1440px wide at most, 24px gutters.
   Rhythm: a narrow 682px text column (heading, body, optional serif note,
   a tab strip) followed by a full-width "scene" (a grey slab with three
   phones side by side, arrows at the edges). Tabs swap which set of phones
   the next scene shows. Ends with a divider, a closing line and a 2-up grid
   of gallery tiles.
   Tokens are the same Figma variable set the homepage uses (home-v5.1.css).
   ============================================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg:                #000000;   /* Background/Primary   */
  --bg-secondary:      #2a2a2a;   /* Background/Secondary */
  --content-primary:   #eeeeee;   /* Content/Primary      */
  --content-tertiary:  #c6c6c6;   /* Content/Tertiary, a notch lighter than the homepage's #b4b4b4 (her call) */
  --border-primary:    #1f1f1f;   /* Border/Primary       */
  --label:             rgba(255, 255, 255, 0.64);
  --rule:              rgba(255, 255, 255, 0.16);
  --chip-teal:         rgba(13, 255, 224, 0.24);
  --chip-orange:       rgba(240, 161, 69, 0.24);   /* same as the homepage Ops card */
  --chip-violet:       rgba(167, 139, 250, 0.24);  /* Phi: third chip colour, next to teal and Claude orange */
  --chip-rose:         rgba(255, 128, 160, 0.24);
  --chip-sand:         rgba(228, 200, 150, 0.24);
  --chip-edge:         rgba(255, 255, 255, 0.24);
  --scene:             #494949;   /* grey slab behind the phones */
  --arrow:             #d9d9d9;
  --phone-shadow:      0 16px 24px -12px rgba(0, 0, 0, 0.2);

  --page-max:    1440px;
  --content-max: 1392px;           /* same width as the hero: scenes are full content width, like the Figma frame */
  --pad-x:       24px;
  --col:         682px;            /* text column */

  --font-body:    "Geist", system-ui, -apple-system, sans-serif;
  --font-display: "Manrope", "Geist", system-ui, -apple-system, sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-serif:   "Instrument Serif", Georgia, "Times New Roman", serif;
}

html { scroll-behavior: smooth; color-scheme: dark; overflow-anchor: none; }   /* no scroll anchoring: lazy images loading above the viewport must not move the page */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--bg);
  color: var(--content-primary);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.icon { display: block; flex-shrink: 0; }

/* ============ shell ============ */
.cs {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--pad-x) 24px;
}

.cs-bar {
  position: sticky;              /* stays at the top while the page scrolls (her call) */
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  height: 52px;                  /* 64 in Figma, 52 her call */
  margin: 0 calc(-1 * var(--pad-x));
  padding: 0 var(--pad-x);
  background: var(--bg);
}
.cs-back {
  font-family: var(--font-body);   /* Geist, tertiary (her call 2026-10-12; was mono) */
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.006em;
  color: var(--content-tertiary);
  transition: color 0.2s ease;
}
.cs-back:hover { color: var(--content-primary); }
.cs-bar-nav { margin-left: auto; display: flex; gap: 24px; }   /* previous / next project on the right, same type as the back link */
@media (max-width: 600px) { .cs-bar-nav { gap: 16px; } .cs-bar-nav .cs-back { font-size: 13px; } }

/* ============ hero: the reel, cropped to a 1392×560 band ============ */
/* hero: the reel in the column, 1392×626, radius 8, under a vignette that sinks it into the page
   (Figma 834:1673: clear centre, black edges) */
.cs-hero {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  aspect-ratio: 1392 / 543;
  max-height: 543px;
}
/* edge fade: strong from the bottom so the reel sinks into the page, lighter from the top
   and the sides (a soft blob was tried on 2026-10-08 and she went back to this) */
.cs-hero-fade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 64%, rgba(0, 0, 0, 0.55) 90%, #000 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.18) 10%, rgba(0, 0, 0, 0) 28%, rgba(0, 0, 0, 0) 72%, rgba(0, 0, 0, 0.18) 90%, rgba(0, 0, 0, 0.55) 100%);
  pointer-events: none;
}
/* progressive blur: four backdrop-blur layers masked to the edges, each reaching further in
   with a stronger blur, so the reel is sharp in the middle and softens towards every edge */
.cs-hero-blur {
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent var(--a), transparent var(--b), #000 100%), linear-gradient(90deg, #000 0%, transparent var(--c), transparent var(--d), #000 100%);
          mask-image: linear-gradient(180deg, #000 0%, transparent var(--a), transparent var(--b), #000 100%), linear-gradient(90deg, #000 0%, transparent var(--c), transparent var(--d), #000 100%);
}
.cs-hero-blur:nth-of-type(1) { --a: 26%; --b: 60%; --c: 30%; --d: 70%; -webkit-backdrop-filter: blur(4px);  backdrop-filter: blur(4px); }
.cs-hero-blur:nth-of-type(2) { --a: 17%; --b: 70%; --c: 22%; --d: 78%; -webkit-backdrop-filter: blur(8px);  backdrop-filter: blur(8px); }
.cs-hero-blur:nth-of-type(3) { --a: 10%; --b: 79%; --c: 14%; --d: 86%; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.cs-hero-blur:nth-of-type(4) { --a: 4%;  --b: 88%; --c: 6%;  --d: 94%; -webkit-backdrop-filter: blur(32px); backdrop-filter: blur(32px); }
.cs-hero img,
.cs-hero video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 31%;        /* same crop as the Figma frame (image sits 39px above the box) */
}

/* dashed frame with corner ticks around the hero, the same device as the logo strip on the
   homepage (Figma frame 900:2553): 5px inside the reel's edges, running 55px below it */
.cs-frame { position: relative; margin-top: 8px; padding-bottom: 55px; }   /* 8px under the bar (her call) */

/* CRT power-on, the same move as the terminal box on the homepage: a small glowing square in
   the middle, it stretches into a horizontal line, the line snaps open into the full window,
   the glow burns off and the reel is there; the dashed frame draws last. */
.cs-hero {
  animation:
    hero-open 0.75s cubic-bezier(0.22, 1, 0.36, 1) both,
    hero-flicker 1.15s steps(1, end) both,
    hero-idle 6.3s steps(1, end) 1.3s infinite;    /* …and now and then a hologram blink, like the terminal on the homepage */
}
.cs-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  box-shadow: 0 0 60px rgba(255, 255, 255, 0.8);
  pointer-events: none;
  animation: hero-glow 0.95s ease-out both;
}
.cs-frame-box {
  animation: hero-open 0.75s cubic-bezier(0.22, 1, 0.36, 1) backwards;   /* unfolds with the window; no clip left behind, so the ticks (which sit just outside the box) stay */
}
@keyframes hero-open {
  0%   { clip-path: inset(calc(50% - 4px) calc(50% - 4px) round 2px); }
  18%  { clip-path: inset(calc(50% - 4px) calc(50% - 4px) round 2px); }   /* the square holds for a beat */
  40%  { clip-path: inset(calc(50% - 1px) 0 round 1px); }                  /* …stretches into a line */
  58%  { clip-path: inset(calc(50% - 1px) 0 round 1px); }
  100% { clip-path: inset(0 0 round 8px); }                                /* …and snaps open */
}
/* hologram flicker while it powers on: uneven dips in brightness, a brighter blink, then steady */
@keyframes hero-flicker {
  0%, 30%  { opacity: 1; filter: none; }
  34%      { opacity: 0.55; }
  37%      { opacity: 1; filter: brightness(1.35); }
  40%      { opacity: 0.8; filter: none; }
  43%      { opacity: 1; }
  52%      { opacity: 0.7; filter: brightness(1.2); }
  55%      { opacity: 1; filter: none; }
  66%      { opacity: 0.85; }
  69%      { opacity: 1; }
  80%      { opacity: 0.92; filter: brightness(1.1); }
  83%, 100%{ opacity: 1; filter: none; }
}
@keyframes hero-glow {
  0%, 55% { opacity: 1; }
  100%    { opacity: 0; }
}
/* the idle glitch: twice per cycle the window tears sideways with a slight skew, a brightness
   pop and a drop in opacity; clearly a hologram, not a dropped frame */
@keyframes hero-idle {
  0%, 100% { transform: none; filter: none; opacity: 1; }
  40%   { transform: translateX(-5px) skewX(-1deg); filter: brightness(1.18); opacity: 0.92; }
  40.4% { transform: translateX(3px);               filter: none; opacity: 1; }
  40.8% { transform: none; opacity: 0.82; }
  41.2% { transform: none; opacity: 1; }
  77%   { transform: translateX(-3px);              filter: brightness(1.1); opacity: 0.88; }
  77.3% { transform: none; filter: none; opacity: 1; }
}
/* cyan / magenta tear lines and a scan band that show only during the glitch (the homepage's
   glitch colours) */
.cs-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(180deg, transparent 0 118px, rgba(0, 255, 224, 0.22) 118px 119px, transparent 119px 236px, rgba(255, 0, 170, 0.22) 236px 237px, transparent 237px 360px),
    linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.08) 48%, rgba(255, 255, 255, 0.08) 52%, transparent 100%);
  background-size: 100% 360px, 100% 60px;
  background-repeat: repeat, no-repeat;
  mix-blend-mode: screen;
  animation: hero-tear 6.3s steps(1, end) 1.3s infinite;
}
@keyframes hero-tear {
  0%, 100% { opacity: 0; }
  40%   { opacity: 1; background-position: 0 0, 0 -60px; }
  40.4% { opacity: 0.7; background-position: 0 14px, 0 200px; }
  40.8% { opacity: 0.4; background-position: 0 -8px, 0 420px; }
  41.2% { opacity: 0; }
  77%   { opacity: 0.6; background-position: 0 6px, 0 100px; }
  77.3% { opacity: 0; }
}
/* the intro follows the reel: each line rises 8px and fades in, one after another, the same
   enter-up move the homepage uses, starting once the window has opened */
.cs-intro > .cs-col > *,
.cs-intro > .cs-rule,
.cs-intro > .cs-facts { animation: enter-up 0.55s cubic-bezier(0.22, 1, 0.36, 1) both; }
.cs-intro > .cs-col > :nth-child(1) { animation-delay: 0.95s; }   /* chip  */
.cs-intro > .cs-col > :nth-child(2) { animation-delay: 1.03s; }   /* title */
.cs-intro > .cs-col > :nth-child(3) { animation-delay: 1.11s; }   /* lead  */
.cs-intro > .cs-rule:nth-of-type(1) { animation-delay: 1.19s; }
.cs-intro > .cs-facts              { animation-delay: 1.27s; }
.cs-intro > .cs-rule:nth-of-type(2) { animation-delay: 1.35s; }
/* Composabl's overview has more above the fold on a big screen: the cards, the quote and the last rule rise too */
.cs-intro > .cs-kpis,
.cs-intro > .cs-quote { animation: enter-up 0.55s cubic-bezier(0.22, 1, 0.36, 1) both; }
.cs-intro > .cs-kpis               { animation-delay: 1.43s; }
.cs-intro > .cs-quote              { animation-delay: 1.51s; }
.cs-intro > .cs-rule:nth-of-type(3) { animation-delay: 1.59s; }
@keyframes enter-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cs-hero, .cs-hero::after, .cs-hero::before, .cs-frame-box { animation: none; opacity: 1; filter: none; clip-path: none; transform: none; }
  .cs-hero::before { display: none; }
  .cs-intro > .cs-col > *, .cs-intro > .cs-rule, .cs-intro > .cs-facts, .cs-intro > .cs-kpis, .cs-intro > .cs-quote { animation: none; opacity: 1; transform: none; }
  .is-composabl .cs-quote-box { animation: none; transform: none; }
  .is-composabl .cs-quote-box::after { animation: none; }
  .cs-hero::after { display: none; }
  .cs-frame-box { opacity: 1; }
}
.cs-frame-box {
  position: absolute;
  inset: 0 5px 0 5px;
  border: 1px dashed rgba(255, 255, 255, 0.24);
  pointer-events: none;
}
.cs-frame-box i {
  position: absolute;
  width: 6px; height: 6px;
  border: 0 solid #fff;
}
.cs-frame-box i:nth-child(1) { top: -1px;    left: -1px;  border-top-width: 1px;    border-left-width: 1px; }
.cs-frame-box i:nth-child(2) { top: -1px;    right: -1px; border-top-width: 1px;    border-right-width: 1px; }
.cs-frame-box i:nth-child(3) { bottom: -1px; left: -1px;  border-bottom-width: 1px; border-left-width: 1px; }
.cs-frame-box i:nth-child(4) { bottom: -1px; right: -1px; border-bottom-width: 1px; border-right-width: 1px; }

/* ============ main column ============ */
.cs-main {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 65px;               /* 120 from the reel's bottom edge to the chip (was 168), minus the frame's 55 */
  container-type: inline-size;     /* scenes and tiles measure themselves against this column */
}
/* one "mockup pixel": the Figma scene is 1392px wide, so every scene dimension is
   expressed as a share of the column width and the proportions never change */
.cs-main > * { --u: calc(100cqw / 1392); }


.cs-col {
  width: 100%;
  max-width: var(--col);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.cs-col--center { align-items: center; text-align: center; gap: 24px; }

/* ---------- intro ---------- */
.cs-intro {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding-bottom: 24px;
}

.chip {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 2px 4px;
  border-left: 1px solid var(--chip-edge);
  border-right: 1px solid var(--chip-edge);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.006em;
  color: #fff;
  white-space: nowrap;
}
.chip--teal { background: var(--chip-teal); }
.chip--orange { background: var(--chip-orange); }
.chip--violet { background: var(--chip-violet); }
.chip--rose   { background: var(--chip-rose); }
.chip--sand   { background: var(--chip-sand); }
.chip .icon { width: 14px; height: 14px; margin-right: 6px; flex: none; color: #fb8c3d; }   /* Claude orange, as on the homepage card */

.cs-title {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 550;             /* Manrope 550, between Medium and Semibold (her call; variable font, range 500..600 loaded) */
  line-height: 44px;
  letter-spacing: -0.026em;
  color: var(--content-primary);
  text-wrap: balance;
}
.cs-lead {
  font-size: 16px;
  line-height: 28px;
  letter-spacing: -0.006em;
  color: var(--content-tertiary);
}

.cs-facts {
  width: 100%;
  max-width: var(--col);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.cs-facts--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cs-facts--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* Composabl: two descriptive columns (Figma 912:1855) */
.cs-intro > .cs-facts { margin: -16px 0; }   /* 24px to the rules above and below, not the column's 40 (her call) */
.cs-facts > div { display: flex; flex-direction: column; gap: 4px; }
.cs-facts dt {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.002em;
  color: var(--label);
}
.cs-facts dd {
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.006em;
  color: #fff;
}

.cs-rule {
  width: 100%;
  height: 0;
  border: 0;
  border-top: 1px solid var(--rule);
}
.cs-rule--narrow { max-width: 693px; }

/* ---------- text blocks ---------- */
.cs-block {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 104px 0 40px;         /* Figma 871:2284 had 160 above a section; she asked for less twice (128, then 104 on 2026-10-13). 40 between text and scene */
}
/* section text is centred like the intro: heading, one paragraph, serif line (her call, 2026-10-07) */
.cs-block .cs-col { align-items: center; text-align: center; }
.cs-block .cs-h2 { text-wrap: balance; }

/* variant (her call): the 682px column stays centred, text inside it is left-aligned,
   tab strip and caption centred under the scene. Intro stays centred. */
.cs-main.is-left .cs-block .cs-col { align-items: flex-start; text-align: left; }
/* tabs and the caption under them stay centred (her call) */
.cs-intro + .cs-block { padding-top: 40px; }

.cs-h2 {
  margin-bottom: 8px;              /* 16px column gap + 8 = 24px between a heading and its text (her call, Figma has 16) */
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 550;
  line-height: 32px;
  letter-spacing: -0.026em;
  color: var(--content-primary);
}
.cs-body {
  font-size: 16px;              /* body copy as in the mockup: 16/26 grey (18px and #eee tried 2026-10-07, both dropped) */
  line-height: 26px;
  letter-spacing: -0.006em;
  color: var(--content-tertiary);
}

/* serif note: a one-liner or the scope formula */
.cs-formula {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 12px 0;               /* no card, no border: just air around the maths (her call; 24 → 16 → 12) */
  font-family: var(--font-serif);
  font-style: italic;            /* maths set in italic, like a textbook (her ask) */
  font-size: 16px;
  line-height: 26px;
  letter-spacing: 0.02em;
  color: var(--content-primary);
}
.cs-fraction {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.cs-fraction-top {
  padding: 0 12px 2px;
  border-bottom: 1px solid var(--content-primary);
}
.cs-fraction-bottom { padding: 2px 12px 0; }

/* captions: one short paragraph per tab, shown under the strip for the active tab */
.scene-captions {
  width: 100%;
  max-width: 662px;
  padding-top: 24px;
}
.cs-caption {
  font-size: 16px;
  line-height: 26px;
  letter-spacing: -0.006em;
  color: var(--content-tertiary);
  text-align: center;
}
.cs-caption[hidden] { display: none; }

/* ---------- tabs: a segmented strip under the scene, centred; the active tab is a black pill ---------- */
.scene-tabs {
  width: 100%;
  display: flex;
  justify-content: center;
  padding-top: 24px;
}

.tabs {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 36px;
  padding: 2px;
  border-radius: 10px;
  background: var(--bg-secondary);
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 100%;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 14px;               /* 16 in Figma, 14 her call */
  line-height: 20px;
  letter-spacing: -0.006em;
  color: var(--content-tertiary);
  white-space: nowrap;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.tab:hover { color: var(--content-primary); }
.tab.is-active {
  background: var(--bg);
  border-color: var(--border-primary);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.12);
  font-weight: 500;
  color: var(--content-primary);
}
.tab:focus-visible { outline: 2px solid var(--content-tertiary); outline-offset: 2px; }

/* pulse on the tab an arrow just switched to */
@keyframes tab-flash {
  0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.45); }
  100% { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0); }
}
.tab.is-flash { animation: tab-flash 0.6s ease-out; }
@media (prefers-reduced-motion: reduce) { .tab.is-flash { animation: none; } }

/* ============ scenes: the grey slabs ============ */
.scene {
  position: relative;
  width: calc(1254 * var(--u));    /* Figma 871:2284: the scene is a touch narrower than the column (1254 of 1392) */
  margin: 0 auto;
  border-radius: 8px;
  background: var(--scene);
  overflow: hidden;
  container-type: inline-size;     /* children measure against the scene, so the whole scene scales as one */
}
.scene > * { --u: calc(100cqw / 1392); }
.scene--board,
.scene--phones { aspect-ratio: 1392 / 724; }
.scene--board { padding: calc(24 * var(--u)); }

.shots {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(48 * var(--u));
  height: 100%;
}
.shots[hidden] { display: none !important; }

/* flat scenes: one image exported from Figma per tab, the scene is just its frame */
.scene .shots.shots--flat { position: absolute; inset: 0; display: block; height: 100%; padding: 0; margin: 0; }   /* beats .scene .shots { position: relative } below */
.shot--flat { width: 100%; height: 100%; margin: 0; }
.shot--flat img { display: block; width: 100%; height: 100%; object-fit: cover; }   /* wins over the collage / split display rules */

/* phones sit centred; a scene never scrolls, the arrows switch the tab */
.scene--phones .shots { padding: 0 calc(96 * var(--u)); }
.scene--phones .shot--wide { max-height: calc(100% - 2 * 24 * var(--u)); }

.shot { flex: none; }
.shot--wide {
  width: 100%;
  max-width: calc(1100 * var(--u));
  max-height: 100%;
  margin: 0 auto;
  border-radius: 8px;
  overflow: hidden;
}
.shot--wide img { width: 100%; height: 100%; object-fit: contain; }
.shot--phone {
  width: calc(280 * var(--u));
  height: calc(607 * var(--u));
  border-radius: calc(40 * var(--u));
  overflow: hidden;
  box-shadow: var(--phone-shadow);
}
.shot--phone img { width: 100%; height: 100%; object-fit: cover; }
.shot--sm { width: calc(210 * var(--u)); height: calc(455 * var(--u)); }

/* scene backgrounds from the Figma frames (section 03). The scene takes the
   background of its visible panel: JS copies the panel's data-bg onto the scene. */
.scene--light,
.scene[data-bg="light"] { background: radial-gradient(74.3% 74.3% at 50% 25.7%, #fafafa 0%, #d5d5d5 50%, #afafaf 100%); }
.scene[data-bg="dusk"]  { background: radial-gradient(80% 80% at 50% 20%, #9c9c9c 0%, #797979 50%, #565656 100%); }
.scene[data-bg="steel"] { background: linear-gradient(180deg, #9bacc0 0%, #555661 100%); }
.scene[data-bg="sky"]   { background: linear-gradient(180deg, #fafafa 0%, #afafaf 100%); }
.scene[data-bg="charcoal"] { background: radial-gradient(100% 100% at 50% 0%, #717171 0%, #5c5c5c 50%, #474747 100%); }
.scene[data-bg="ash"]      { background: radial-gradient(100% 100% at 50% 0%, #afafaf 0%, #939393 50%, #767676 100%); }
.scene[data-bg="graphite"] { background: linear-gradient(180deg, #2d2d2d 0%, #363636 100%); }
.scene--phones .shots--wide-gap { gap: calc(64 * var(--u)); }
.shot--deep { box-shadow: 0 16px 24px -12px rgba(0, 0, 0, 0.32); }
.shot--mid  { box-shadow: 0 16px 24px -12px rgba(0, 0, 0, 0.24); }
.scene[data-bg="silver"] { background: radial-gradient(74.3% 74.3% at 50% 25.7%, #cecfd6 0%, #a8a9ac 50%, #828282 100%); }
.scene[data-bg="slate"]  { background: radial-gradient(74.3% 74.3% at 50% 25.7%, #cecfd6 0%, #aeaeb5 25%, #8e8d93 50%, #6f6d72 75%, #4f4c50 100%); }

/* split scene: two halves, each with one phone 48px from the centre line; the right half is lit */
.scene--phones .shots--split { display: flex; align-items: stretch; gap: 0; padding: 0; }   /* halves run edge to edge */
.shot--half {
  flex: 1 0 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: calc(48 * var(--u));
}
.shot--half + .shot--half {
  justify-content: flex-start;
  padding-right: 0;
  padding-left: calc(48 * var(--u));
}
.shot--half-light {
  border-radius: 0;                /* the scene clips the corners */
  background: radial-gradient(90% 90% at 0% 24%, #fafafa 0%, #d5d5d5 50%, #afafaf 100%);
}
.shot--raised-lg { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25), 0 16px 64px -12px rgba(0, 0, 0, 0.48); }
.shot--wide-soft { box-shadow: 0 16px 24px -12px rgba(0, 0, 0, 0.08); }
.scene-photo {
  position: absolute;
  inset: 0;
  display: none;
  pointer-events: none;
}
.scene[data-bg="sky"] .scene-photo { display: block; }
.scene-photo img { width: 100%; height: 100%; object-fit: cover; opacity: 0.32; }
.scene-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(50% 50% at 50% 50%, rgba(247, 247, 247, 0) 0%, rgba(247, 247, 247, 1) 100%);
}
.scene .shots { position: relative; z-index: 1; }
.scene-photo { z-index: 0; }
.scene--light .shots,
.scene[data-bg] .shots { height: 100%; }
.shot--soft { box-shadow: 0 16px 24px -12px rgba(0, 0, 0, 0.16); }
.shot--wide-lg { max-width: calc(1126 * var(--u)); }

/* collage: cards placed by mockup coordinates (--x/--y/--w/--h in mockup px), overlapping like in Figma */
.shots--collage { position: relative; display: block; }
.shot--card {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
  border-radius: calc(var(--r, 8) * 1px);
  border: 1px solid #000;
  overflow: hidden;
}
.shot--card img { width: 100%; height: 100%; object-fit: cover; }
.shot--card-raised { box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25); }
.shot--clean { border: 0; border-radius: calc(var(--r, 40) * var(--u)); }
.shot--raised-xl { box-shadow: 0 24px 88px -12px rgba(0, 0, 0, 0.48); }
.shots--collage .shot--card { z-index: 1; }

/* arrows: 40px discs at the edges (mockup had 50), hidden when the scene has a single set */
.scene-arrow {
  position: absolute;
  top: 50%;
  z-index: 3;                      /* above the shots list, which fills the scene */
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
  border-radius: 10px;           /* rounded square, not a disc (her call) */
  background: rgba(16, 16, 16, 0.62);           /* glass, not a light slab (her audit 2026-10-13) */
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  transition: opacity 0.2s ease, transform 0.16s ease-out, background-color 0.2s ease, border-color 0.2s ease;
}
.scene-arrow--prev { left: calc(28 * var(--u)); }
.scene-arrow--prev .icon { transform: rotate(180deg); }
.scene-arrow--next { right: calc(28 * var(--u)); }
.scene-arrow:hover { transform: translateY(-50%) scale(1.04); background: rgba(32, 32, 32, 0.8); border-color: rgba(255, 255, 255, 0.28); }
.scene-arrow:active { transform: translateY(-50%) scale(0.96); }
.scene-arrow:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.scene-arrow[disabled] { opacity: 0.35; cursor: default; transform: translateY(-50%); }
.scene.is-single .scene-arrow { display: none; }

/* ============ outro ============ */
/* takeaway (Figma 834:1670, frame 845:2094): a narrow rule 80 above the text,
   heading + paragraph in the text column, the role / scope / goals grid 40 below */
.cs-outro {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 80px 0 40px;
}
.cs-outro .cs-rule--narrow { margin-bottom: 40px; }   /* 40 gap + 40 = 80 between the rule and the heading */
.cs-outro .cs-col { align-items: flex-start; text-align: left; }
.cs-outro .cs-facts { padding-bottom: 0; }

/* full-width rule between the takeaway and the gallery: 80 above, gallery starts 60 below */
.cs-rule--gallery { margin-top: 40px; margin-bottom: 32px; }   /* label row sits close under the rule (her call) */

/* ============ gallery: 2-up tiles ============ */
.cs-gallery-label {
  width: 100%;
  display: flex;
  justify-content: space-between;   /* one label left, one right */
  margin-bottom: 24px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.002em;
  color: var(--label);
}
.cs-gallery {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(24 * var(--u));
}
.tile {
  height: calc(503 * var(--u));
  border-radius: 8px;
  background: var(--scene);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(48 * var(--u));
  padding: calc(24 * var(--u)) 0;
}
.tile--triple .shot--phone { flex: none; }     /* overflows the tile on purpose, the tile clips it */
.tile--flat { height: auto; aspect-ratio: 1600 / 1100; padding: 0; display: block; }   /* one Figma export per tile */
.tile--flat img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* marquee: the gallery is one slow strip, full viewport width, drifting left to right; it never stops (hover pause dropped, her call) */
.cs-marquee {
  position: relative;
  display: block;
  width: 100vw;
  align-self: center;              /* the column is centred on the page, so a 100vw item centred in it starts at x = 0 */
  overflow: hidden;
}
/* both edges sink into black with a blur, so the strip never collides with the rail on the right */
.cs-marquee::before,
.cs-marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 260px;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg, var(--bg) 0%, var(--fade-strong, rgba(0, 0, 0, 0.75)) 30%, var(--fade-weak, rgba(0, 0, 0, 0.3)) 65%, rgba(0, 0, 0, 0) 100%);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 35%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 35%, rgba(0, 0, 0, 0) 100%);
}
.cs-marquee::before { left: 0; }
.cs-marquee::after  { right: 0; transform: scaleX(-1); }
.marquee-track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: marquee 140s linear infinite;
}
.marquee-group {
  display: flex;
  flex: none;
  gap: calc(24 * var(--u));
  padding-right: calc(24 * var(--u));
}
.marquee-group .tile--flat { width: calc(684 * var(--u)); flex: none; }
@keyframes marquee {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .cs-marquee { overflow-x: auto; }
}

/* ============ rail: section progress on the right ============
   One segment per [data-nav] element, height proportional to the section,
   filled white as the section is read. Labels show on hover. */
.rail {
  position: fixed;
  top: 50%;
  right: 24px;
  z-index: 15;
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: min(60vh, 640px);
  transform: translateY(-50%);
}
.rail-item {
  position: relative;
  display: block;
  width: 3px;
  min-height: 16px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.18);
  overflow: visible;
  cursor: pointer;
}
/* the hit area reaches left over the label, so each word can be hovered and clicked on its own */
.rail-item::before {
  content: "";
  position: absolute;
  top: -4px; bottom: -4px;
  left: -160px; right: -8px;
}
.rail-item:hover .rail-label { color: #fff; }
.rail-item:hover { background: rgba(255, 255, 255, 0.32); }
.rail-fill {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 0;
  border-radius: 2px;
  background: #fff;
}
.rail-label {
  position: absolute;
  top: -2px;
  right: 28px;                   /* twice the first gap (her call) */
  font-family: var(--font-mono); /* mono, like the bar link and the intro labels (her call) */
  font-size: 12px;               /* one step down from 14 (her call) */
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.002em;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.4);
  opacity: 0;
  transform: translateX(4px);
  transition: opacity 0.18s ease, transform 0.18s ease, color 0.18s ease;
}
.rail-item.is-reached .rail-label { color: var(--content-primary); }
.rail:hover .rail-label,
.rail:focus-within .rail-label { opacity: 1; transform: none; }
.rail-item:focus-visible { outline: 2px solid var(--content-secondary); outline-offset: 4px; }
@media (max-width: 1100px) { .rail { display: none; } }
@media (prefers-reduced-motion: reduce) { .rail-label { transition: none; } }

/* ============ responsive ============
   Scenes, phones and tiles scale with the column on their own (see --u),
   so only type, spacing and the hero crop change here. */
@media (max-width: 900px) {
  .cs-main { padding-top: 64px; }
  .cs-block { padding: 56px 0 32px; }
  .cs-outro { padding-top: 80px; }
  .scene-arrow .icon { width: 12px; height: 12px; }
}

@media (max-width: 600px) {
  :root { --pad-x: 16px; }
  .cs-hero { aspect-ratio: 4 / 3; }
  .cs-facts--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-title { font-size: 28px; line-height: 36px; }
  .cs-h2 { font-size: 22px; line-height: 30px; }
  .cs-facts { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .cs-formula { font-size: 16px; }
}

/* ============ Composabl page: no reel, KPI cards and a terminal quote in the overview ============ */
.cs-main--nohero { padding-top: 168px; }   /* Figma 912:1846: chip 168 under the bar when there is no reel */
.cs-kpis {
  width: 100%;
  max-width: var(--col);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;                       /* Figma 924:1406 */
}
.kpi {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  border-radius: 8px;
  background: #191919;             /* Radix gray/2 dark */
}
.kpi-value {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 32px;
  font-weight: 550;
  letter-spacing: -0.02em;
  color: var(--content-primary);
}
.kpi-label {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 20px;
  font-weight: 500;
  color: var(--content-tertiary);
}
.cs-quote {
  margin-top: -8px;                /* 32 under the cards, not the intro's 40 */
  width: 100%;
  max-width: var(--col);
  display: flex;
  align-items: flex-end;
  gap: 24px;
}
.cs-quote-mark { flex: none; width: 48px; height: 48px; margin-bottom: -24px; border-radius: 8px; background: #fff; }   /* its middle sits on the box's bottom line (Figma 923:1397) */
.cs-quote-box {
  flex: 1;
  min-height: 182px;
  padding: 24px;
  background: #141414;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 20px;
  font-weight: 500;
  color: var(--content-primary);
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.35);   /* faint hologram glow, like the homepage terminal */
}
.cs-quote-box p { margin: 0; }
.cs-quote-by { margin-top: 16px !important; color: var(--content-tertiary); }
/* product screens are 1200:825, so they sit inside the scene instead of filling it */
.scene .shots--fit .shot--flat { padding: calc(40 * var(--u)); box-sizing: border-box; }
.scene .shots--fit img { object-fit: contain; }
.tile--screen { aspect-ratio: 1200 / 825; }


/* ============ Composabl: tokens mirror her Figma "Colors" collection (dark mode values), so light mode is a value swap later ============ */
.is-composabl {
  --fig-bg-primary:        #000000;   /* Background/Primary   (dark stays pure black, her call) */
  --fig-bg-secondary:      #2a2a2a;   /* Background/Secondary = gray/4  */
  --fig-bg-content:        #b4b4b4;   /* Background/Content   = gray/11 */
  --fig-border-primary:    #222222;   /* Border/Primary       = gray/3  */
  --fig-content-primary:   #eeeeee;   /* Content/Primary      = gray/12 */
  --fig-content-secondary: #b4b4b4;   /* Content/Secondary    = gray/11 */
  --fig-content-tertiary:  #b4b4b4;   /* Content/Tertiary     = gray/11 */
  --fig-content-contrast:  #000000;   /* Content/Contrast */
}
/* ============ Composabl typography, from her Figma frame 912:1846 (her call 2026-10-12: "używaj mojej nowej") ============ */
.is-composabl .cs-title { font-weight: 600; letter-spacing: -0.024em; }                    /* Manrope SemiBold 36/44 */
.is-composabl .cs-lead  { font-weight: 500; line-height: 28px; color: #fcfcfc; letter-spacing: -0.006em; }   /* Geist Medium 16/28 */
.is-composabl .cs-lead a { text-decoration: underline; text-underline-offset: 2px; }
.is-composabl .cs-facts dt { color: var(--fig-content-tertiary); letter-spacing: 0.002em; }                   /* Geist Mono Medium 12/20, content/tertiary */
.is-composabl .cs-facts dd { line-height: 24px; letter-spacing: -0.006em; }               /* Geist Regular 16/24 */
.is-composabl .kpi { background: var(--fig-bg-secondary); }                                   /* background/secondary */
.is-composabl .kpi-value { font-size: 20px; line-height: 32px; font-weight: 600; letter-spacing: -0.024em; }   /* Manrope SemiBold 20/32 */
.is-composabl .kpi-label { color: var(--fig-content-tertiary); letter-spacing: 0.002em; }
.is-composabl .cs-quote-box {
  gap: 4px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 12px;
  line-height: 16px;
  color: var(--fig-content-tertiary);
  text-shadow: 0 2px 4px rgba(255, 255, 255, 0.25);
}
.is-composabl .cs-quote-by { margin-top: 12px !important; font-weight: 400; color: var(--fig-content-tertiary); }

/* hero without a reel: a grey slab in the same frame (Composabl, until there is a video) */
.cs-hero-slab { position: absolute; inset: 0; background: radial-gradient(80% 80% at 50% 20%, #5a5a5a 0%, #494949 50%, #3a3a3a 100%); }

/* section headings, from her Figma 912:1870: Manrope SemiBold 28/36, 16 to the body; body in content/tertiary */
.is-composabl .cs-h2 { font-size: 28px; line-height: 36px; font-weight: 600; letter-spacing: -0.026em; margin-bottom: 0; }
.is-composabl .cs-body { color: var(--fig-content-tertiary); letter-spacing: -0.006em; }

/* the quote as a hologram pane, like the terminal on the homepage but quieter: faint scanlines,
   light on the edges, a slow brightness drift, a hint of tilt; no boot sequence (her call) */
.is-composabl .cs-quote-box {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 24%, rgba(255, 255, 255, 0) 76%, rgba(255, 255, 255, 0.08) 100%),
    rgba(255, 255, 255, 0.06);
  box-shadow:
    0 0 32px -12px rgba(255, 255, 255, 0.18),
    0 0 1px rgba(255, 255, 255, 0.30),
    inset 0 0 24px -12px rgba(255, 255, 255, 0.16);
  transform: rotate(-1.5deg) skewX(-1deg);
  transform-origin: 50% 50%;
  animation: holo-drift 7.4s steps(1, end) infinite;
}
.is-composabl .cs-quote-box::after {
  content: "";
  position: absolute;
  inset: -3px 0 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.14) 0 1px, transparent 1px 3px);
  animation: holo-scan-soft 0.9s linear infinite;
}
@keyframes holo-scan-soft { to { transform: translateY(3px); } }
@keyframes holo-drift {
  0%, 100% { filter: brightness(1); }
  9%   { filter: brightness(1.04); }
  11%  { filter: brightness(0.98); }
  13%  { filter: brightness(1); }
  47%  { filter: brightness(0.96); }
  49%  { filter: brightness(1.02); }
  51%  { filter: brightness(1); }
  80%  { filter: brightness(1.03); }
  82%  { filter: brightness(1); }
}

/* Composabl marquee: slightly smaller tiles (her call) */
.is-composabl .marquee-group .tile--flat { width: calc(560 * var(--u)); }

/* quote box: the Composabl mark in the white square, the quote in white, a dashed rule, then the author (her call 2026-10-12) */
.cs-quote-mark { display: flex; align-items: center; justify-content: center; }
.cs-quote-mark svg { width: 26px; height: 26px; color: #000; }   /* viewBox cropped to the mark itself, so it fills the square */
.is-composabl .cs-quote-text { color: var(--fig-content-primary); }
.is-composabl .cs-quote-rule { margin-top: 12px; color: var(--fig-content-tertiary); letter-spacing: 0.04em; opacity: 0.7; }
.is-composabl .cs-quote-by { margin-top: 8px !important; }

.is-composabl .cs-quote-text { font-size: 14px; line-height: 20px; }   /* review text one step up (her call) */

/* Composabl hero (her call 2026-10-12): the dashed frame is the form, the reel fills it exactly
   (stretched if the ratio differs, prototype), no darkening anywhere, a narrower blur on the sides */
.is-composabl .cs-frame { padding: 6px 0; }   /* 6px of black above and below the reel inside the dashed line (a margin on the hero would collapse through the frame) */
.is-composabl .cs-frame-box { z-index: 2; }
.is-composabl .cs-hero { margin: 0 11px; aspect-ratio: 1382 / 598; max-height: none; }   /* the frame's proportion (Figma 900:2553); the reel sits 6px inside the dashed line, so the white lineart and ticks stay on black, not on the light reel */
.is-composabl .cs-hero video,
.is-composabl .cs-hero img { object-fit: fill; object-position: 50% 50%; }
.is-composabl .cs-hero-fade { display: none; }
.is-composabl .cs-hero-blur { display: none; }   /* the edge blur is baked into the reel itself (ffmpeg), so playback stays smooth and nothing darkens */

/* Composabl hero: square corners (the frame has none), the hologram glitch every 21 s instead of 6.3 s,
   and the reel plays at its own speed (data-rate="1"), so no frame-doubling judder */
.is-composabl .cs-hero {
  border-radius: 0;
  animation:
    hero-open-square 0.75s cubic-bezier(0.22, 1, 0.36, 1) both,
    hero-flicker-soft 1.15s steps(1, end) both,
    hero-idle-soft 21s steps(1, end) 1.3s infinite;
}
.is-composabl .cs-hero::before { animation-duration: 21s; opacity: 0; }
.is-composabl .cs-hero::after { background: rgba(255, 255, 255, 0.45); box-shadow: 0 0 40px rgba(255, 255, 255, 0.35); animation-duration: 0.7s; }   /* a soft glow, not a white flash */
/* gentler power-on for a light reel: two shallow dips, no brightness pops, no deep blackouts */
@keyframes hero-flicker-soft {
  0%, 30%   { opacity: 1; transform: none; }
  36%       { opacity: 0.86; }
  42%       { opacity: 1; }
  58%       { opacity: 0.9; }
  64%       { opacity: 1; transform: none; }
  70%       { opacity: 0.95; transform: translateX(-2px); }   /* a light glitch right after the frame opens, half the idle one */
  70.6%     { opacity: 1; transform: translateX(1px); }
  71.2%, 100% { opacity: 1; transform: none; }
}
/* the idle glitch, toned down: a small sideways tear with a mild dip, once per cycle */
@keyframes hero-idle-soft {
  0%, 100% { transform: none; opacity: 1; }
  40%      { transform: translateX(-3px); opacity: 0.94; }
  40.5%    { transform: translateX(2px); opacity: 1; }
  41%      { transform: none; }
}
.is-composabl .cs-frame-box { animation-name: hero-open-square; }
@keyframes hero-open-square {
  0%   { clip-path: inset(calc(50% - 4px) calc(50% - 4px)); }
  18%  { clip-path: inset(calc(50% - 4px) calc(50% - 4px)); }
  40%  { clip-path: inset(calc(50% - 1px) 0); }
  58%  { clip-path: inset(calc(50% - 1px) 0); }
  100% { clip-path: inset(0 0); }
}


/* ============ light mode preview (her Figma "Colors" collection, Light Mode values, 2026-10-12) ============
   Switched on with ?theme=light (js sets html[data-theme="light"]). Values are the gray/* primitives her tokens alias to. */
html[data-theme="light"] { color-scheme: light; }
html[data-theme="light"] body {
  --bg:               #fcfcfc;   /* Background/Primary   = gray/1  */
  --bg-secondary:     #f0f0f0;   /* Background/Secondary = gray/3  */
  --content-primary:  #202020;   /* Content/Primary      = gray/12 */
  --content-tertiary: #646464;   /* Content/Tertiary     = gray/11 */
  --border-primary:   #e8e8e8;   /* Border/Primary       = gray/4  */
  --label:            rgba(0, 0, 0, 0.64);
  --rule:             rgba(0, 0, 0, 0.12);
  --chip-edge:        rgba(0, 0, 0, 0.24);
  --scene:            #e8e8e8;   /* gray/4 light: the slab behind screens */
  --arrow:            #202020;
  --fade-strong:      rgba(252, 252, 252, 0.75);
  --fade-weak:        rgba(252, 252, 252, 0.3);
  --fig-bg-primary:        #fcfcfc;
  --fig-bg-secondary:      #f0f0f0;
  --fig-bg-content:        #f0f0f0;
  --fig-border-primary:    #e8e8e8;
  --fig-content-primary:   #202020;
  --fig-content-secondary: #646464;
  --fig-content-tertiary:  #646464;
  --fig-content-contrast:  #ffffff;
  background: var(--bg);
  color: var(--content-primary);
}
html[data-theme="light"] .chip { color: #202020; }
html[data-theme="light"] .cs-lead { color: #202020; }                     /* Figma has #fcfcfc hardcoded on the lead; in light it maps to Content/Primary */
html[data-theme="light"] .cs-frame-box { border-color: rgba(0, 0, 0, 0.24); }
html[data-theme="light"] .cs-frame-box i { border-color: #202020; }
html[data-theme="light"] .cs-hero::after { background: rgba(0, 0, 0, 0.12); box-shadow: none; }
html[data-theme="light"] .tabs { background: rgba(0, 0, 0, 0.06); }
html[data-theme="light"] .tab { color: #646464; }
html[data-theme="light"] .rail-item { background: rgba(0, 0, 0, 0.14); }
html[data-theme="light"] .rail-fill { background: #202020; }
html[data-theme="light"] .rail-item:hover .rail-label { color: #202020; }
html[data-theme="light"] .rail-label { color: #646464; }
html[data-theme="light"] .scene-arrow { background: rgba(255, 255, 255, 0.72); color: #202020; border-color: rgba(0, 0, 0, 0.12); }
html[data-theme="light"] .cs-quote-mark { background: #202020; }
html[data-theme="light"] .cs-quote-mark svg { color: #fcfcfc; }
html[data-theme="light"] .cs-quote-box {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 24%, rgba(0, 0, 0, 0) 76%, rgba(0, 0, 0, 0.05) 100%), rgba(0, 0, 0, 0.03);
  border-color: #202020;
  box-shadow: 0 0 32px -12px rgba(0, 0, 0, 0.12), 0 0 1px rgba(0, 0, 0, 0.2), inset 0 0 24px -12px rgba(0, 0, 0, 0.08);
  text-shadow: none;
}
html[data-theme="light"] .cs-quote-box::after { background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.05) 0 1px, transparent 1px 3px); }
html[data-theme="light"] .cs-rule { border-color: var(--rule); background: var(--rule); }
html[data-theme="light"] .cs-facts dd, html[data-theme="light"] .cs-caption, html[data-theme="light"] .cs-h2, html[data-theme="light"] .cs-title, html[data-theme="light"] .cs-formula, html[data-theme="light"] .kpi-value { color: #202020; }

/* grey placeholders while a page waits for its Figma exports */
.shot--placeholder { position: absolute; inset: 0; background: var(--scene); }
.tile--placeholder { background: #2a2a2a; }

/* a clip placed inside a flat scene at mockup coordinates (same --x/--y/--w/--h/--r units as .shot--card) */
.scene .shot--video {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
  border-radius: calc(var(--r, 8) * var(--u));
  overflow: hidden;
  z-index: 2;
  margin: 0;
}
.scene .shot--video video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* a flat scene is the image itself: black behind it, so a sub-pixel gap never shows the grey slab as a light line */
.scene:has(> .shots--flat) { background: #000; }

/* ============ Ops hero: a static screen in the frame until there is a reel ============ */
.cs-hero--static > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* Ops: the quote box holds a one-line note until the real quote arrives, so it hugs its content */
.is-ops .cs-quote-box { min-height: 0; }

/* Ops: the quote box shows a pending review as a status line, not as a quote */
.cs-quote-status { margin: 0 0 10px; font-family: var(--font-mono, "Geist Mono", monospace); font-size: 11px; line-height: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fig-content-tertiary, #8a8a8a); display: flex; align-items: center; gap: 8px; }
/* "thinking": a 3x3 square of dots that light up in a wave, the way a model thinks */
.cs-thinking { display: grid; grid-template-columns: repeat(3, 2px); gap: 2px; width: 10px; height: 10px; }
.cs-thinking b { width: 2px; height: 2px; border-radius: 1px; background: currentColor; opacity: 0.25; animation: think-wave 1.8s ease-in-out infinite; }
.cs-thinking b:nth-child(1) { animation-delay: 0s; }    .cs-thinking b:nth-child(2) { animation-delay: .12s; } .cs-thinking b:nth-child(3) { animation-delay: .24s; }
.cs-thinking b:nth-child(4) { animation-delay: .12s; }  .cs-thinking b:nth-child(5) { animation-delay: .24s; } .cs-thinking b:nth-child(6) { animation-delay: .36s; }
.cs-thinking b:nth-child(7) { animation-delay: .24s; }  .cs-thinking b:nth-child(8) { animation-delay: .36s; } .cs-thinking b:nth-child(9) { animation-delay: .48s; }
@keyframes think-wave { 0%, 60%, 100% { opacity: 0.25; } 20% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cs-thinking b { animation: none; opacity: 0.6; } }
.is-composabl .cs-quote-box .cs-quote-status { margin: 0 0 12px; }   /* beats the box's p reset */

/* ============ tab switch: the new set slides in from the side you stepped toward ============ */
.shots.is-slide-right { animation: shots-in-right 0.46s cubic-bezier(0.22, 1, 0.36, 1) both; }
.shots.is-slide-left  { animation: shots-in-left  0.46s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes shots-in-right { from { opacity: 0; transform: translateX(calc(40 * var(--u))); } to { opacity: 1; transform: none; } }
@keyframes shots-in-left  { from { opacity: 0; transform: translateX(calc(-40 * var(--u))); } to { opacity: 1; transform: none; } }
.cs-caption.is-slide-right, .cs-caption.is-slide-left { animation: caption-in 0.4s ease-out both; }
@keyframes caption-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .shots.is-slide-right, .shots.is-slide-left, .cs-caption.is-slide-right, .cs-caption.is-slide-left { animation: none; } }


/* ============ reel pause control: bottom right of the frame, quiet until hovered ============ */
.cs-reel-toggle {
  position: absolute;
  right: 12px;
  bottom: calc(55px + 12px);        /* 12px above the reel's bottom edge; the frame keeps 55px under the reel */
  z-index: 4;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(16, 16, 16, 0.62);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.55;
  cursor: pointer;
  transition: opacity 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.cs-reel-toggle svg { fill: currentColor; display: block; }
.cs-reel-toggle:hover, .cs-reel-toggle:focus-visible, .cs-reel-toggle.is-paused { opacity: 1; background: rgba(32, 32, 32, 0.8); border-color: rgba(255, 255, 255, 0.28); }
.cs-reel-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.is-composabl .cs-reel-toggle { right: 11px; }   /* inside the dashed frame's 11px side margin */
html[data-theme="light"] .cs-reel-toggle { background: rgba(255, 255, 255, 0.72); color: #202020; border-color: rgba(0, 0, 0, 0.12); }

/* ============ [SND] toggle in the bar, same look as the homepage ============ */
.cs-bar .snd {
  height: 28px;
  padding: 0 8px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: -0.072px;
  color: var(--content-primary);
  background: transparent;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.cs-bar .snd .dim { color: var(--content-tertiary); }
.cs-bar .snd:hover { background: rgba(255, 255, 255, 0.06); }
.cs-bar .snd[aria-pressed="false"] { color: var(--content-tertiary); }
.cs-bar .snd:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cs-bar .snd.is-wait .snd-state { animation: snd-blink 0.9s steps(2, end) infinite; }
@keyframes snd-blink { 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .cs-bar .snd.is-wait .snd-state { animation: none; } }
.cs-bar-nav { align-items: center; }