/* Replix app case study: dark and technical. */
:root {
  --bg: #0b0b0c;
  --grid: rgba(255, 255, 255, 0.03);
  --text: #ececec;
  --text-2: #b8b8bd;
  --meta: #8a8a8f;
  --rule: rgba(255, 255, 255, 0.12);
  --accent: #9b3fef;
  --accent-hover: #8c34e3;
  --sans: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --read: 720px;
  --wide: 960px;
  --gutter: 24px;
  --section: 110px;
  --screen: 96px;
  color-scheme: dark;

  /* Replix app tokens (replix/src/styles/tokens.css), for the mockups only. */
  --rx-bg: #0f0f10;
  --rx-surface: #171718;
  --rx-surface-muted: #202022;
  --rx-surface-sunken: #2a2a2d;
  --rx-border: rgba(255, 255, 255, 0.07);
  --rx-border-strong: rgba(255, 255, 255, 0.14);
  --rx-text: #f2f2f2;
  --rx-text-muted: rgba(242, 242, 242, 0.6);
  --rx-active: #f2f2f2;
  --rx-on-active: #0f0f10;
  --rx-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background-color: var(--bg);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 40px 40px;
  color: var(--text);
  font: 400 18px/1.7 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
img, video, svg { display: block; max-width: 100%; }
.mono { font-family: var(--mono); font-size: 12px; line-height: 1.6; letter-spacing: 0.04em; font-weight: 400; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; border-radius: 4px; }

.col { width: min(var(--read), calc(100% - 2 * var(--gutter))); margin-inline: auto; }
.wide { width: min(var(--wide), calc(100% - 2 * var(--gutter))); margin-inline: auto; }

h1 { font-size: 46px; line-height: 1.1; font-weight: 600; letter-spacing: -0.025em; }
h2 { font-size: 32px; line-height: 1.2; font-weight: 600; letter-spacing: -0.015em; }
h3 { font-size: 20px; line-height: 1.35; font-weight: 500; }
h4 { font-size: 20px; line-height: 1.35; font-weight: 500; }
.label { color: var(--meta); margin-bottom: 14px; }

/* ---- Top ---- */
.top { padding-top: 56px; }
.back { display: inline-block; color: var(--meta); text-decoration: none; margin-bottom: 64px; }
.back:hover { color: var(--text); }
.top h1 { margin-bottom: 22px; }
.lede { font-size: 21px; line-height: 1.6; color: var(--text-2); }
.meta { color: var(--meta); word-spacing: 0.15em; margin: 32px 0; padding: 14px 0; border-block: 1px solid var(--rule); }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 22px; border-radius: 999px;
  background: var(--accent); color: #fff; text-decoration: none;
  font: 500 16px/1 var(--sans);
  transition: background-color 0.15s;
}
.btn:hover { background: var(--accent-hover); }

/* ---- Sections ---- */
.section { margin-top: var(--section); }
.section > h2, .section .col > h2 { margin-bottom: 20px; }
.section p + p { margin-top: 18px; }

/* Story beats */
.beats { margin-top: 40px; border-top: 1px solid var(--rule); }
.beat { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--rule); }
.beat-label { color: var(--meta); padding-top: 5px; }
.moments { display: grid; gap: 12px; }
.moments li { padding-left: 16px; border-left: 1px solid var(--rule); color: var(--text); }
.large-line { font-size: 26px; line-height: 1.4; font-weight: 500; letter-spacing: -0.01em; margin: 32px 0 20px; }
.secondary { color: var(--text-2); }

/* Screens */
.screen { margin-top: var(--screen); }
.screen h3 { margin-bottom: 18px; }
.sam { margin-bottom: 28px; }
.sam-label { color: var(--meta); margin-bottom: 4px; }
.sam p:not(.sam-label) { color: var(--text-2); }
.clip .frame { position: relative; aspect-ratio: 16 / 10; border-radius: 12px; border: 1px solid var(--rule); overflow: hidden; background: #0f0f10; }
.clip video { width: 100%; height: 100%; object-fit: cover; }
.marker-list { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 14px; color: var(--text-2); }
.marker-list li { display: inline-flex; align-items: center; gap: 8px; }
.marker-list .n, .co-marker {
  display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; color: #0b0b0c; font: 500 11px/1 var(--mono); letter-spacing: 0;
}
.co-layer { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.2s; }
.co-layer.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .co-layer { transition: none; } }
.co-marker { position: absolute; transform: translate(-50%, -50%); box-shadow: 0 0 0 2px rgba(11, 11, 12, 0.55), 0 2px 8px rgba(0, 0, 0, 0.5); }
.play {
  position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; border-radius: 50%;
  border: 1px solid var(--rule); background: rgba(11, 11, 12, 0.72); color: #fff; cursor: pointer;
  display: none; place-items: center;
}
.play svg { width: 22px; height: 22px; margin-left: 3px; }
.clip.still-mode .play { display: grid; }
.clip.still-mode.playing .play { display: none; }

.explain { margin-top: 36px; border-top: 1px solid var(--rule); }
.explain > div, .tried > div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--rule); }
.explain dt, .tried dt { color: var(--meta); padding-top: 5px; }
.explain dd { margin: 0; }

/* ---- Section 03: collapsible rows ---- */
.folds { margin-top: 8px; border-bottom: 1px solid var(--rule); }
.fold-h { border-top: 1px solid var(--rule); font: inherit; }
.fold-btn {
  display: grid; grid-template-columns: minmax(0, 1fr) 24px; align-items: start; gap: 24px;
  width: 100%; padding: 28px 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; font: inherit;
}
.fold-title { display: block; font-size: 22px; line-height: 1.35; font-weight: 500; }
.fold-sum { display: block; margin-top: 6px; font-size: 17px; line-height: 1.6; color: var(--meta); }
.fold-icon { font-size: 22px; line-height: 30px; color: var(--text-2); text-align: right; }
.fold-icon::before { content: "+"; }
.fold.open .fold-icon::before { content: "−"; }
.fold-btn:hover .fold-title { text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 5px; }
.fold-body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.2s ease; }
.js .fold:not(.open) .fold-body { grid-template-rows: 0fr; }
.fold-inner { min-height: 0; overflow: hidden; }
.fold.open .fold-inner { padding-bottom: 72px; }
.js .fold:not(.open) .fold-inner { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .fold-body { transition: none; } }
.fold-inner h4 { margin: 40px 0 18px; }
.fold-inner > .col:first-child h4 { margin-top: 8px; }
.attempt { margin-bottom: 48px; }
.attempt .visual, .attempt .clip { margin-bottom: 8px; }
.tried { margin-top: 8px; margin-bottom: 32px; border-top: 1px solid var(--rule); }
.tried dd { margin: 0; }
.points { display: grid; gap: 14px; margin-top: 28px; }
.points li { position: relative; padding-left: 20px; }
.points li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 8px; height: 1px; background: var(--meta); }
.lead-in { font-weight: 500; }
.fold-inner.col > p:first-child { margin-top: 8px; }

/* Visuals */
.visual { border: 1px solid var(--rule); border-radius: 12px; background: rgba(15, 15, 16, 0.9); overflow: hidden; }
.v1, .v2 { aspect-ratio: 16 / 10; display: grid; place-items: center; }
.v1-slide { width: 46%; display: grid; justify-items: center; gap: 14px; }
.v1-art { width: 46%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #3a3a40, #1d1d20 70%); display: grid; place-items: center; margin-bottom: 10px; }
.v1-art span { width: 40%; height: 40%; border-radius: 12px; background: #2f2f34; border: 1px solid var(--rx-border-strong); }
.v1-bar { height: 12px; border-radius: 6px; background: #3a3a3f; }
.v1-bar.w60 { width: 64%; }
.v1-bar.w40 { width: 44%; }
.v1-bar.dim { background: #2a2a2e; height: 9px; }
.v1-dots { display: flex; gap: 6px; margin-top: 6px; }
.v1-dots i { width: 6px; height: 6px; border-radius: 50%; background: #3a3a3f; }
.v1-dots i.on { background: #d9d9dc; width: 18px; border-radius: 3px; }
.v1-btn { width: 38%; height: 28px; border-radius: 14px; background: #e6e6e8; margin-top: 4px; }
.sphere { width: 58%; height: auto; }
.accents { padding: 24px; }
.swatch-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.swatch-row li { display: grid; gap: 10px; color: var(--text-2); }
.swatch-row svg { width: 100%; height: auto; border-radius: 10px; }
.swatch-row .final span { color: var(--text); }
.palette { padding: 24px; }
.chips { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.chips li { display: grid; gap: 4px; align-content: start; color: var(--text-2); }
.chips i { display: block; aspect-ratio: 4 / 3; border-radius: 8px; border: 1px solid var(--rule); margin-bottom: 6px; }
.chips .hex { color: var(--meta); }
.system { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); margin-top: 36px; }
.specimen, .ladder { padding: 24px; }
.ladder { border-left: 1px solid var(--rule); }
.cap { color: var(--meta); margin-bottom: 16px; }
.specimen li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 12px; padding: 7px 0; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.specimen .sample { font-family: var(--rx-font); color: var(--rx-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.specimen .val, .ladder .val { color: var(--meta); white-space: nowrap; }
.ladder li { display: grid; grid-template-columns: 44px minmax(0, 1fr) 40px; align-items: center; gap: 10px; padding: 4px 0; }
.ladder .name { color: var(--text-2); }
.ladder .bar { height: 10px; background: var(--rx-text-muted); border-radius: 2px; }

/* Before / after */
.decision { margin-top: 64px; }
.decision:first-child { margin-top: 8px; }
.decision h4 { margin: 0 0 18px; }
.ba { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 32px auto; }
.ba figcaption { color: var(--meta); margin-top: 10px; }
.mock { aspect-ratio: 16 / 10; border-radius: 12px; border: 1px solid var(--rule); overflow: hidden; container-type: inline-size; }
.mock.still img { width: 100%; height: 100%; object-fit: cover; }
.mock.app, .hero-mock { background: var(--rx-bg); font-family: var(--rx-font); color: var(--rx-text); }
.hero-mock { display: grid; place-items: center; padding: 8cqw; text-align: center; }
.hero-line { font-size: 6.6cqw; line-height: 1.12; font-weight: 600; letter-spacing: -0.03em; }
.sk-title { width: 42%; height: 3.4cqw; border-radius: 1.2cqw; background: #3a3a3f; }
.sk-line { width: 58%; height: 1.8cqw; border-radius: 0.9cqw; background: #2a2a2d; margin-top: 1.8cqw; }
.share-mock { padding: 8cqw 12cqw; display: flex; flex-direction: column; }
.url-field { margin-top: 5cqw; height: 9cqw; border-radius: 99px; border: 1px solid var(--rx-border-strong); background: var(--rx-surface); display: flex; align-items: center; padding: 0 3.6cqw; font-size: 2.8cqw; color: var(--rx-text-muted); }
.opt-row { display: flex; align-items: center; gap: 1.6cqw; margin-top: 3cqw; }
.opt-row .opt { font-size: 1.9cqw; color: var(--rx-text-muted); border: 1px solid var(--rx-border-strong); border-radius: 99px; padding: 0.4cqw 1.6cqw; }
.opt-row i { width: 11cqw; height: 4.4cqw; border-radius: 99px; background: var(--rx-surface-muted); }
.mock-actions { margin-top: auto; display: flex; justify-content: flex-end; }
.mock-btn { display: inline-flex; align-items: center; height: 5.6cqw; padding: 0 3cqw; border-radius: 99px; background: var(--rx-active); color: var(--rx-on-active); font-size: 2.4cqw; font-weight: 500; }
.mock-btn.ghost { width: 16cqw; }
.cards-mock { padding: 7cqw 6cqw; }
.scene-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2cqw; margin-top: 6cqw; }
.scene-cards li { display: grid; gap: 1.2cqw; padding: 1.6cqw; border-radius: 1.6cqw; background: var(--rx-surface); border: 1px solid var(--rx-border); }
.scene-cards .thumb { aspect-ratio: 16 / 10; border-radius: 1cqw; background: #e9e9e4; opacity: 0.85; }
.scene-cards .t { font-size: 1.9cqw; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scene-cards i { height: 1.2cqw; border-radius: 0.6cqw; background: #2a2a2d; }
.scene-cards i.s { width: 60%; }
.wizard-mock { display: flex; flex-direction: column; }
.stepper { display: flex; gap: 2cqw; padding: 3cqw 6cqw; border-bottom: 1px solid var(--rx-border); }
.stepper li { flex: 1; display: flex; align-items: center; gap: 1.2cqw; }
.stepper b { display: grid; place-items: center; width: 3.6cqw; height: 3.6cqw; border-radius: 50%; border: 1px solid var(--rx-border-strong); font-size: 1.8cqw; font-weight: 500; color: var(--rx-text-muted); flex: none; }
.stepper i { flex: 1; height: 0.5cqw; border-radius: 0.3cqw; background: #2a2a2d; }
.stepper .done b { background: var(--rx-surface-sunken); color: var(--rx-text); }
.stepper .on b { background: var(--rx-active); color: var(--rx-on-active); border-color: transparent; }
.wizard-mock .page { flex: 1; display: flex; flex-direction: column; padding: 5cqw 10cqw; }
.sk-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2cqw; margin-top: 4cqw; }
.sk-grid i { height: 8cqw; border-radius: 1.6cqw; background: var(--rx-surface); border: 1px solid var(--rx-border); }

/* ---- 04 / footer ---- */
.tryit .btn { margin-top: 28px; }
.footer { margin-top: var(--section); padding: 28px 0 56px; border-top: 1px solid var(--rule); display: grid; gap: 6px; color: var(--meta); }
.footer a { text-decoration: none; color: var(--text-2); }
.footer a:hover { color: var(--text); text-decoration: underline; }
.small { color: var(--meta); }

/* ---- Mobile ---- */
@media (max-width: 720px) {
  :root { --gutter: 20px; --section: 88px; --screen: 72px; }
  body { font-size: 17px; }
  h1 { font-size: 32px; }
  h2 { font-size: 26px; }
  .large-line { font-size: 22px; }
  .lede { font-size: 19px; }
  .back { margin-bottom: 44px; }
  .beat, .explain > div, .tried > div { grid-template-columns: 1fr; gap: 6px; }
  .ba { grid-template-columns: 1fr; }
  .swatch-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .system { grid-template-columns: 1fr; }
  .ladder { border-left: 0; border-top: 1px solid var(--rule); }
  .fold-title { font-size: 20px; }
  .co-marker { width: 18px; height: 18px; font-size: 10px; }
}
.ladder li > span:nth-child(2), .ladder .bar { display: block; }