/* ============================================================================
   Clockworth — landing page styles.
   Aesthetic: Swiss horology meets CFO ledger. Midnight dial, gold hands,
   ivory subdials. Fraunces for display + numbers (the product's own serif),
   Libre Franklin for body, JetBrains Mono for the command layer.

   RULES LEARNED THE HARD WAY:
   - never put overflow:hidden on an ancestor of position:sticky (use clip)
   - pinned frames get fixed widths, not w-full inside shrink-wrapped parents
   ============================================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  font-family: var(--cw-sans);
  font-size: var(--cw-fs-body);
  line-height: 1.65;
  color: var(--cw-ivory);
  background: var(--cw-midnight);
  overflow-x: clip; /* clip, NOT hidden — keeps position:sticky alive */
  -webkit-font-smoothing: antialiased;
}

/* global cinematic backdrop — one dataflow video behind the whole page.
   Poster doubles as the static fallback (save-data / reduced motion). */
.cw-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: var(--cw-midnight) url('assets/dataflow-poster.jpg') center / cover no-repeat;
}
.cw-bg video {
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.4s ease;
}
.cw-bg video.cw-vid-in { opacity: 0.45; }
.cw-bg .veil {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(10,19,48,0.62) 0%, rgba(10,19,48,0.42) 28%,
    rgba(10,19,48,0.55) 62%, rgba(10,19,48,0.82) 100%);
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--cw-gold); color: var(--cw-midnight); }

.cw-container { max-width: var(--cw-max); margin: 0 auto; padding: 0 24px; }

h1, h2, h3, .cw-serif {
  font-family: var(--cw-serif);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--cw-ivory);
}
h2 { font-size: var(--cw-fs-headline); line-height: var(--cw-lh-headline); }

.cw-label {
  font-size: var(--cw-fs-label);
  font-weight: 700;
  letter-spacing: var(--cw-track-label);
  text-transform: uppercase;
  color: var(--cw-gold);
}
.cw-lede { font-size: var(--cw-fs-sub); color: var(--cw-star-dim); max-width: 620px; }

/* ---------------------------------------------------------------- sections
   All sections are transparent — the fixed dataflow backdrop shows through.
   Light "paper" lives in the cards/windows, not in section backgrounds. */
.cw-section { padding: var(--cw-s-9) 0; position: relative; }
.cw-section--dark { color: var(--cw-ivory); }
.cw-section--dark h2, .cw-section--dark h3 { color: var(--cw-ivory); }
.cw-section--dark .cw-lede { color: var(--cw-star-dim); }
.cw-section-head { max-width: 720px; margin-bottom: var(--cw-s-8); }
.cw-section-head .cw-label { display: inline-block; margin-bottom: var(--cw-s-4); }
.cw-section-head h2 { margin-bottom: var(--cw-s-4); }
.cw-section-head h2 em { font-style: italic; color: var(--cw-gold); }

/* Fine tick texture for dark sections (watch-dial DNA) */
.cw-ticks {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image: repeating-linear-gradient(
    90deg, rgba(246,244,238,0.035) 0 1px, transparent 1px 96px);
}

/* ------------------------------------------------------------------ buttons */
.cw-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 30px; border-radius: 999px;
  font-family: var(--cw-sans); font-weight: 700; font-size: 15px;
  cursor: pointer; border: 0; transition: background 0.2s ease, color 0.2s ease, box-shadow 0.25s ease;
  will-change: transform;
}
.cw-btn--gold { background: var(--cw-gold); color: var(--cw-midnight); box-shadow: var(--cw-shadow-gold); }
.cw-btn--gold:hover { background: var(--cw-gold-light); }
.cw-btn--ghost-dark { background: transparent; color: var(--cw-ivory); box-shadow: inset 0 0 0 1.5px var(--cw-night-line); }
.cw-btn--ghost-dark:hover { box-shadow: inset 0 0 0 1.5px var(--cw-gold-line); color: var(--cw-gold-light); }
.cw-btn--ghost-light { background: transparent; color: var(--cw-midnight); box-shadow: inset 0 0 0 1.5px var(--cw-paper-line); }
.cw-btn--ghost-light:hover { box-shadow: inset 0 0 0 1.5px var(--cw-gold); }

/* -------------------------------------------------------------- scroll gauge
   The brand dial doubles as the scroll-progress indicator: a gold arc that
   fills as you descend. Fixed bottom-right, desktop only. */
.cw-gauge-progress {
  position: fixed; right: 26px; bottom: 26px; z-index: 70;
  width: 54px; height: 54px; pointer-events: none;
}
.cw-gauge-progress svg { width: 100%; height: 100%; }
.cw-gauge-progress .track { stroke: rgba(212,160,23,0.18); }
.cw-gauge-progress .fill  { stroke: var(--cw-gold); stroke-linecap: round; transition: stroke-dashoffset 0.1s linear; }
@media (max-width: 900px) { .cw-gauge-progress { display: none; } }

/* ---------------------------------------------------------------- preloader */
.cw-preloader {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 22px;
  background: var(--cw-midnight);
  transition: opacity 0.7s ease, visibility 0.7s ease;
}
.cw-preloader--done { opacity: 0; visibility: hidden; pointer-events: none; }
.cw-preloader .mark {
  width: 78px; height: auto; opacity: 0;
  animation: cwMarkIn 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) 0.15s forwards;
}
.cw-preloader .wm-img {
  height: 28px; width: auto; opacity: 0;
  animation: cwFadeUp 0.8s ease 0.8s forwards;
}
@keyframes cwMarkIn {
  from { opacity: 0; transform: scale(0.78) rotate(-30deg); }
  to   { opacity: 1; transform: none; }
}
@keyframes cwFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------- nav */
.cw-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  border-bottom: 1px solid transparent;
}
.cw-nav--scrolled {
  background: rgba(10,19,48,0.92);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--cw-night-line);
}
.cw-nav-inner {
  max-width: var(--cw-max); margin: 0 auto; padding: 16px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.cw-nav-brand { display: flex; align-items: center; }
.cw-nav-brand .lockup { height: 26px; width: auto; display: block; }
.cw-nav-links { display: flex; align-items: center; gap: 30px; list-style: none; }
.cw-nav-links a {
  font-size: 14px; font-weight: 600; color: var(--cw-star-dim);
  transition: color 0.2s ease;
}
.cw-nav-links a:hover { color: var(--cw-gold-light); }
.cw-nav-cta {
  padding: 10px 22px; border-radius: 999px; font-size: 13.5px; font-weight: 700;
  background: var(--cw-gold); color: var(--cw-midnight);
  transition: background 0.2s ease; will-change: transform;
}
.cw-nav-cta:hover { background: var(--cw-gold-light); }
@media (max-width: 860px) { .cw-nav-links { display: none; } }

/* -------------------------------------------------------------------- hero */
.cw-hero {
  position: relative; min-height: 100vh;
  display: flex; align-items: center;
  padding: 140px 0 90px;
}
/* enormous ghost dial behind everything — the watch face */
.cw-hero-dial {
  position: absolute; top: 50%; left: 50%;
  width: min(150vmin, 1500px); height: min(150vmin, 1500px);
  transform: translate(-50%, -50%);
  pointer-events: none; opacity: 0.5;
}
.cw-hero-glow {
  position: absolute; top: -10%; right: -5%;
  width: 720px; height: 720px; border-radius: 50%;
  background: radial-gradient(circle, rgba(212,160,23,0.13), transparent 62%);
  pointer-events: none;
}
.cw-hero-inner { position: relative; z-index: 2; width: 100%; }
.cw-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--cw-fs-label); font-weight: 700; letter-spacing: var(--cw-track-label);
  text-transform: uppercase; color: var(--cw-gold-light);
  padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--cw-gold-line); background: var(--cw-gold-soft);
  margin-bottom: var(--cw-s-5);
}
.cw-hero h1 {
  font-size: var(--cw-fs-hero); line-height: var(--cw-lh-hero);
  color: var(--cw-ivory); max-width: 21ch;
  margin-bottom: var(--cw-s-5);
}
.cw-hero h1 em { font-style: italic; color: var(--cw-gold); }
.cw-hero-sub { font-size: var(--cw-fs-sub); color: var(--cw-star-dim); max-width: 560px; margin-bottom: var(--cw-s-6); }
.cw-hero-sub strong { color: var(--cw-ivory); font-weight: 600; }
.cw-hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: var(--cw-s-7); }
.cw-hero-try {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14.5px; font-weight: 600; color: var(--cw-gold-light);
  padding: 15px 4px; border-bottom: 1px dashed transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.cw-hero-try:hover { color: var(--cw-gold); border-bottom-color: var(--cw-gold-line); }
.cw-hero-try .arr { transition: transform 0.2s ease; }
.cw-hero-try:hover .arr { transform: translateX(4px); }
.cw-hero-proof {
  display: flex; gap: 26px; flex-wrap: wrap;
  font-size: var(--cw-fs-small); color: var(--cw-star-faint);
}
.cw-hero-proof b { color: var(--cw-gold-light); font-weight: 700; font-family: var(--cw-serif); }

/* hero entrance choreography */
.cw-hero [data-enter] { opacity: 0; transform: translateY(22px); }
.cw-hero.cw-hero--in [data-enter] {
  animation: cwFadeUp 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  animation-delay: calc(var(--enter, 0) * 120ms);
}

/* ----------------------------------------------------------- hero layout */
.cw-hero-grid {
  display: grid; grid-template-columns: 1fr 1.06fr;
  gap: 56px; align-items: center;
}
@media (max-width: 1023px) {
  .cw-hero-grid { grid-template-columns: 1fr; gap: 44px; }
}
.cw-hero-grid h1 { font-size: clamp(38px, 4.2vw, 62px); }

/* --------------------------------------------------------- the worth dial
   A firm's workday played on a watch face. JS (worthDial) drives the hand,
   the progress arc, the digital readout, the complication chips, and the
   closing "Today's worth" counter. Static end-state under reduced motion. */
.cw-dial-stage {
  position: relative; width: min(100%, 540px); aspect-ratio: 1;
  margin: 0 auto; justify-self: center;
}
/* the dial PLATE — a dark glass disc that separates the watch face from
   the busy video behind it (a real dial never floats on raw texture) */
.cw-dial-stage::before {
  content: ''; position: absolute; inset: 6%;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%,
    rgba(19,31,77,0.92) 0%, rgba(10,19,48,0.88) 45%,
    rgba(10,19,48,0.72) 64%, rgba(10,19,48,0.18) 76%, transparent 82%);
  box-shadow: 0 30px 90px rgba(0,0,0,0.5);
}
/* glass sheen — a soft highlight slowly orbiting the plate, like light
   moving across a watch crystal */
.cw-dial-stage::after {
  content: ''; position: absolute; inset: 6%;
  border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 0deg,
    transparent 0deg, rgba(242,193,78,0.06) 38deg, rgba(246,244,238,0.04) 60deg,
    transparent 95deg, transparent 360deg);
  animation: cwSheen 17s linear infinite;
}
@keyframes cwSheen { to { transform: rotate(360deg); } }

/* gold dust drifting inside the plate (spawned by JS, skipped under
   reduced motion) */
.cw-dial-dust {
  position: absolute; inset: 13%; border-radius: 50%;
  overflow: hidden; pointer-events: none;
}
.cw-dial-dust span {
  position: absolute; border-radius: 50%; background: #F2C14E;
  animation-name: cwDust; animation-timing-function: ease-in-out;
  animation-iteration-count: infinite; animation-direction: alternate;
}
@keyframes cwDust {
  from { transform: translate3d(0, 7px, 0); }
  to   { transform: translate3d(3px, -11px, 0); }
}

.cw-dial { position: absolute; inset: 11%; width: 78%; height: 78%; }
.cw-dial-num {
  font-family: var(--cw-serif); font-size: 17px; font-weight: 600;
  fill: rgba(246,244,238,0.42);
}
.cw-dial-ripple {
  fill: none; stroke: #F2C14E; stroke-width: 2;
  animation: cwRipple 0.75s ease-out forwards;
}
@keyframes cwRipple {
  from { r: 8; opacity: 0.9; }
  to   { r: 30; opacity: 0; }
}
/* the day-complete flash: the ring blooms twice when worth appears */
.cw-worth-flash #cwDialProgress { animation: cwRingFlash 1s ease-in-out 2; }
@keyframes cwRingFlash {
  50% { filter: drop-shadow(0 0 18px rgba(242,193,78,0.95)); }
}
#cwDialProgress { filter: drop-shadow(0 0 7px rgba(212,160,23,0.55)); }
#cwDialHand { filter: drop-shadow(0 0 6px rgba(242,193,78,0.6)); }
#cwDialAnchors circle {
  fill: rgba(212,160,23,0.28);
  transition: fill 0.35s ease, filter 0.35s ease;
}
#cwDialAnchors circle.on {
  fill: #F2C14E;
  filter: drop-shadow(0 0 8px rgba(242,193,78,0.9));
}
.cw-dial-center {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  text-align: center; pointer-events: none;
}
.cw-dial-center .time-mode .t {
  font-family: var(--cw-serif); font-weight: 600; font-size: clamp(38px, 3.8vw, 52px);
  color: var(--cw-ivory); line-height: 1; font-variant-numeric: tabular-nums;
  text-shadow: 0 0 28px rgba(212,160,23,0.4);
}
.cw-dial-center .time-mode .l { margin-top: 7px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cw-star-faint); font-weight: 700; }
.cw-dial-center .worth-mode { display: none; }
.cw-dial-center.worth .time-mode { display: none; }
.cw-dial-center.worth .worth-mode { display: block; }
.cw-dial-center .worth-mode .l { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cw-gold-light); font-weight: 700; margin-bottom: 7px; }
.cw-dial-center .worth-mode .w {
  font-family: var(--cw-serif); font-weight: 600; font-size: clamp(34px, 3.4vw, 48px);
  color: var(--cw-gold-light); line-height: 1; font-variant-numeric: tabular-nums;
  text-shadow: 0 0 30px rgba(242,193,78,0.5);
}
.cw-dial-chip {
  position: absolute; transform: translate(-50%, -50%) scale(0.86);
  display: flex; align-items: center; gap: 8px;
  max-width: 218px;
  background: rgba(14,26,64,0.94); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(212,160,23,0.5); border-radius: 11px;
  padding: 9px 13px; font-size: 11.5px; line-height: 1.45; color: rgba(246,244,238,0.85);
  opacity: 0; transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.34, 1.4, 0.45, 1);
  box-shadow: 0 12px 34px rgba(0,0,0,0.5), 0 4px 18px rgba(212,160,23,0.16);
}
.cw-dial-chip.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.cw-dial-chip .ic { color: var(--cw-gold-light); font-size: 13px; flex-shrink: 0; }
.cw-dial-chip b { color: var(--cw-gold-light); font-family: var(--cw-mono); font-weight: 700; font-size: 10px; }
@media (max-width: 1023px) {
  .cw-dial-stage { width: min(92vw, 430px); margin-top: 10px; }
  .cw-dial-chip { max-width: 170px; font-size: 10px; padding: 7px 10px; }
}
@media (max-width: 479px) {
  .cw-dial-chip { max-width: 130px; font-size: 9.5px; padding: 6px 9px; gap: 6px; }
}

/* ------------------------------------------------ the try-it demo section */
.cw-demo-host { max-width: 760px; margin: 0 auto; }

/* ------------------------------------------- the interactive demo window
   Visitor types a command (or taps a chip) and a pre-built screen renders.
   Ivory window on the midnight hero — strong pop, real product language. */
.cw-demo-window {
  background: var(--cw-ivory-warm);
  color: var(--cw-charcoal); /* page text is ivory; this window is light paper */
  border: 1px solid rgba(212,160,23,0.25);
  border-radius: var(--cw-r-lg);
  box-shadow: 0 0 0 1px rgba(212,160,23,0.08), 0 36px 100px -16px rgba(0,0,0,0.6);
  overflow: hidden;
}
.cw-demo-bar {
  height: 42px; background: var(--cw-midnight-2);
  display: flex; align-items: center; gap: 7px; padding: 0 15px;
  border-bottom: 1px solid var(--cw-night-line);
}
.cw-demo-bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(246,244,238,0.18); }
.cw-demo-bar .ttl { margin-left: 10px; font-family: var(--cw-mono); font-size: 11px; color: var(--cw-star-dim); }
.cw-demo-bar .mode {
  margin-left: auto; font-family: var(--cw-mono); font-size: 10.5px; color: var(--cw-star-dim);
  background: rgba(246,244,238,0.07); border: 1px solid var(--cw-night-line);
  padding: 3px 9px; border-radius: 7px;
}
.cw-demo-bar .mode--live {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--cw-gold-light); border-color: var(--cw-gold-line);
  background: rgba(212,160,23,0.10);
}
.cw-demo-bar .mode--live .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--cw-gold);
  animation: cwLivePulse 1.8s ease-in-out infinite;
}
@keyframes cwLivePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212,160,23,0.55); }
  55%      { box-shadow: 0 0 0 6px rgba(212,160,23,0); }
}
.cw-demo-stage { display: flex; flex-direction: column; }
.cw-demo-canvas { position: relative; height: 348px; overflow: hidden; }

/* empty state */
.cw-demo-empty {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; padding: 30px;
  transition: opacity 0.4s ease;
}
.cw-demo-empty .dial { width: 52px; height: auto; margin-bottom: 16px; }
.cw-demo-empty h3 { font-size: 19px; margin-bottom: 6px; color: var(--cw-midnight); }
.cw-demo-empty p { font-size: 13.5px; color: var(--cw-ink-dim); max-width: 280px; }

/* result panels */
.cw-demo-result {
  position: absolute; inset: 0; padding: 18px 22px; overflow: auto;
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.45s ease, transform 0.45s ease;
  pointer-events: none;
}
.cw-demo-result.show { opacity: 1; transform: none; pointer-events: auto; }
.cw-demo-result .rhead { font-family: var(--cw-serif); font-size: 17px; font-weight: 600; color: var(--cw-midnight); }
.cw-demo-result .rsub { font-size: 11.5px; color: var(--cw-ink-dim); margin: 2px 0 14px; }

.cw-demo-stats { display: flex; gap: 10px; margin-bottom: 12px; }
.cw-demo-stats .s { flex: 1; background: var(--cw-white); border: 1px solid var(--cw-paper-line); border-radius: 9px; padding: 9px 12px; }
.cw-demo-stats .l { font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--cw-ink-dim); font-weight: 700; }
.cw-demo-stats .v { font-family: var(--cw-serif); font-size: 20px; font-weight: 600; color: var(--cw-midnight); margin-top: 2px; }
.cw-demo-stats .v small { font-size: 11px; color: var(--cw-danger); }

.cw-demo-table { width: 100%; border-collapse: collapse; background: var(--cw-white); border: 1px solid var(--cw-paper-line); border-radius: 10px; overflow: hidden; }
.cw-demo-table th { text-align: left; color: var(--cw-ink-dim); font-weight: 700; padding: 8px 12px; border-bottom: 1px solid var(--cw-paper-line); font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; background: var(--cw-ivory-warm); }
.cw-demo-table td { padding: 9px 12px; border-bottom: 1px solid rgba(27,31,35,0.05); font-size: 12.5px; }
.cw-demo-table tr:last-child td { border-bottom: none; }
.cw-demo-table tr.hl { background: rgba(212,160,23,0.08); }
.cw-demo-table .nm { display: flex; align-items: center; gap: 8px; }
.cw-demo-table .av {
  width: 23px; height: 23px; border-radius: 50%; background: var(--cw-royal); color: #fff;
  font-size: 9px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0;
}
.cw-demo-table .av.gold { background: var(--cw-gold); color: var(--cw-midnight); }
.cw-demo-table .bar { display: block; height: 7px; border-radius: 4px; background: rgba(27,31,35,0.08); position: relative; overflow: hidden; width: 72px; }
.cw-demo-table .bar i { position: absolute; left: 0; top: 0; height: 100%; border-radius: 4px; background: var(--cw-royal); }
.cw-demo-table .pill { font-size: 9px; padding: 2px 9px; border-radius: 20px; font-weight: 700; }
.cw-demo-table .pill.ok { background: rgba(63,166,106,0.13); color: var(--cw-success); }
.cw-demo-table .pill.soft { background: var(--cw-gold-soft); color: #9a6b14; }

.cw-demo-answer {
  background: var(--cw-white); border: 1px solid var(--cw-paper-line);
  border-left: 3px solid var(--cw-gold); border-radius: 9px;
  padding: 13px 15px; font-size: 12.5px; line-height: 1.6;
}
.cw-demo-answer b { color: var(--cw-midnight); }

/* fallback echoes the visitor's own words back */
.cw-demo-echo {
  font-family: var(--cw-mono); font-size: 12px; color: var(--cw-ink-dim);
  background: rgba(10,19,48,0.05); border: 1px dashed rgba(10,19,48,0.18);
  border-radius: 8px; padding: 8px 12px; margin-bottom: 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cw-demo-echo span { color: var(--cw-midnight); font-style: italic; }

/* utilization gauge panel (light surface) */
.cw-demo-gauge { display: flex; gap: 22px; align-items: center; padding-top: 6px; }
.cw-demo-gauge svg { width: 118px; height: 118px; flex-shrink: 0; }
.cw-demo-gauge .t { stroke: rgba(10,19,48,0.08); }
.cw-demo-gauge .f { stroke: var(--cw-gold); stroke-linecap: round; transition: stroke-dashoffset 1.1s cubic-bezier(0.22,0.61,0.36,1); }
.cw-demo-gauge .pct { font-family: var(--cw-serif); font-weight: 600; font-size: 38px; color: var(--cw-midnight); line-height: 1; }
.cw-demo-gauge .cap { font-size: 12px; color: var(--cw-ink-dim); margin-top: 3px; }
.cw-demo-gauge .rows { margin-top: 12px; display: grid; gap: 6px; }
.cw-demo-gauge .r { display: flex; justify-content: space-between; gap: 18px; font-size: 11.5px; color: var(--cw-ink-dim); }
.cw-demo-gauge .r b { color: #9a6b14; font-family: var(--cw-serif); }

.cw-demo-inv { background: var(--cw-white); border: 1px solid var(--cw-paper-line); border-radius: 10px; padding: 3px 0; }
.cw-demo-inv .line { display: flex; justify-content: space-between; padding: 8px 14px; border-bottom: 1px solid rgba(27,31,35,0.05); font-size: 12.5px; }
.cw-demo-inv .line:last-child { border-bottom: none; }
.cw-demo-inv .line.total { font-weight: 700; color: var(--cw-midnight); }
.cw-demo-inv .line.total span:last-child { font-family: var(--cw-serif); font-size: 15px; }
.cw-demo-inv-actions { margin-top: 12px; display: flex; gap: 9px; }
.cw-demo-minibtn {
  display: inline-block; padding: 7px 15px; border-radius: 8px; font-size: 12px; font-weight: 700;
  background: var(--cw-white); color: var(--cw-midnight); border: 1px solid var(--cw-paper-line); cursor: default;
}
.cw-demo-minibtn.gold { background: var(--cw-gold); border-color: var(--cw-gold); color: var(--cw-midnight); }

/* confirmation strip */
.cw-demo-confirm { padding: 0 22px; max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
.cw-demo-confirm.show { max-height: 90px; }
.cw-demo-confirm .inner {
  background: var(--cw-white); border: 1px solid var(--cw-paper-line);
  border-left: 3px solid var(--cw-success); border-radius: 9px;
  padding: 9px 13px; margin-bottom: 12px; font-size: 12.5px;
  display: flex; align-items: center; gap: 10px;
}
.cw-demo-confirm .ok {
  width: 18px; height: 18px; border-radius: 50%; background: var(--cw-success); color: #fff;
  font-size: 10px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.cw-demo-confirm .undo {
  margin-left: auto; color: var(--cw-success); font-weight: 700; cursor: pointer; font-size: 12px;
  background: none; border: 0; font-family: inherit;
}

/* command bar */
.cw-demo-cmdwrap { padding: 13px 16px 16px; border-top: 1px solid var(--cw-paper-line); background: var(--cw-white); }
.cw-demo-suggests { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.cw-demo-suggests .sug {
  background: var(--cw-ivory-warm); border: 1px solid var(--cw-paper-line); color: var(--cw-charcoal);
  font-size: 11.5px; padding: 6px 12px; border-radius: 20px; cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease; font-family: inherit;
}
.cw-demo-suggests .sug:hover { border-color: var(--cw-gold); background: var(--cw-white); color: var(--cw-midnight); }
.cw-demo-cmdbar {
  display: flex; align-items: center; gap: 11px;
  border: 1.6px solid var(--cw-gold); border-radius: 13px; padding: 11px 14px;
  background: var(--cw-white); box-shadow: 0 3px 14px rgba(212,160,23,0.12);
}
/* post-autoplay nudge: "your turn" glow, two beats then quiet */
.cw-demo-cmdbar.cw-nudge { animation: cwNudge 1.1s ease-in-out 2; }
@keyframes cwNudge {
  0%, 100% { box-shadow: 0 3px 14px rgba(212,160,23,0.12); }
  50%      { box-shadow: 0 0 0 5px rgba(212,160,23,0.22), 0 3px 18px rgba(212,160,23,0.3); }
}
.cw-demo-cmdbar .glyph { color: var(--cw-gold); font-family: var(--cw-mono); font-size: 14px; font-weight: 700; flex-shrink: 0; }
.cw-demo-cmdbar .glyph.think { animation: cwThink 0.7s linear infinite; }
@keyframes cwThink { 50% { opacity: 0.25; } }
#cwDemoInput {
  flex: 1; min-width: 0; border: none; outline: none; background: none;
  font-family: var(--cw-mono); font-size: 13.5px; color: var(--cw-charcoal);
}
#cwDemoInput::placeholder { color: var(--cw-ink-dim); }
.cw-demo-cmdbar .send {
  width: 30px; height: 30px; border-radius: 8px; background: var(--cw-midnight); color: var(--cw-gold);
  border: none; cursor: pointer; font-size: 14px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
@media (max-width: 480px) {
  .cw-demo-canvas { height: 330px; }
  .cw-demo-stats { flex-wrap: wrap; }
}

/* ---------------------------------------------------------------- problem */
.cw-problem-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cw-s-8); align-items: center; }
@media (max-width: 960px) { .cw-problem-grid { grid-template-columns: 1fr; } }
.cw-config-hell { position: relative; height: 360px; }
.cw-config-form {
  position: absolute; left: 0; right: 16%;
  background: var(--cw-white); border: 1px solid var(--cw-paper-line);
  border-radius: 10px; padding: 14px 16px;
  box-shadow: var(--cw-shadow-card);
  font-size: 11.5px; color: var(--cw-ink-dim);
}
.cw-config-form .bar { height: 7px; border-radius: 4px; background: rgba(27,31,35,0.10); margin: 7px 0; }
.cw-config-form .bar.w60 { width: 60%; } .cw-config-form .bar.w80 { width: 80%; } .cw-config-form .bar.w45 { width: 45%; }
.cw-config-form b { color: var(--cw-charcoal); font-size: 12px; }
.cw-vs-line {
  margin-top: 22px;
  background: var(--cw-midnight); color: var(--cw-ivory);
  font-family: var(--cw-mono); font-size: 13.5px;
  border-radius: 12px; padding: 15px 18px;
  display: flex; align-items: center; gap: 11px;
  box-shadow: var(--cw-shadow-pop);
}
.cw-vs-line .glyph { color: var(--cw-gold); font-weight: 700; }
.cw-pains { display: grid; gap: 14px; margin-top: var(--cw-s-6); }
.cw-pain { display: flex; gap: 13px; align-items: flex-start; font-size: 15px; color: var(--cw-star-dim); }
.cw-pain .x { color: #e08f8b; font-weight: 800; flex-shrink: 0; }
.cw-pain b { color: var(--cw-ivory); }

/* ------------------------------------------------- signature scrollytelling
   Pinned product window; four shots crossfade as steps pass the centre band. */
.cw-scrolly { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cw-s-8); }
@media (max-width: 1023px) { .cw-scrolly { display: block; } }
.cw-scrolly-pin { position: sticky; top: 90px; align-self: start; height: fit-content; }
@media (max-width: 1023px) { .cw-scrolly-pin { position: static; margin-bottom: var(--cw-s-7); } }
.cw-window {
  position: relative; width: 100%; max-width: 560px;
  aspect-ratio: 16 / 11.4;
  background: var(--cw-ivory-warm);
  color: var(--cw-charcoal);
  border: 1px solid rgba(212,160,23,0.25);
  border-radius: var(--cw-r-lg);
  box-shadow: 0 0 0 1px rgba(212,160,23,0.08), 0 30px 90px rgba(0,0,0,0.55);
  overflow: hidden; /* fine: it's the sticky element's CHILD */
}
.cw-window-chrome {
  display: flex; align-items: center; gap: 7px;
  padding: 11px 15px; background: var(--cw-midnight-2);
}
.cw-window-chrome i { width: 9px; height: 9px; border-radius: 50%; background: rgba(246,244,238,0.18); }
.cw-window-chrome .ttl { margin-left: 8px; font-family: var(--cw-mono); font-size: 10.5px; color: var(--cw-star-faint); }
.cw-shot {
  position: absolute; inset: 42px 0 0 0; padding: 18px 20px;
  opacity: 0; transition: opacity 0.55s ease;
}
.cw-shot.on { opacity: 1; }
.cw-scrolly-step {
  min-height: 64vh; display: flex; flex-direction: column; justify-content: center;
  opacity: 0.32; transform: translateY(6px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.cw-scrolly-step.on { opacity: 1; transform: none; }
@media (max-width: 1023px) { .cw-scrolly-step { min-height: 0; padding: 26px 0; opacity: 1; transform: none; } }
.cw-scrolly-step .k { font-family: var(--cw-mono); font-size: 12px; color: var(--cw-gold-light); letter-spacing: 0.1em; margin-bottom: 12px; }
.cw-scrolly-step h3 { font-size: clamp(24px, 2.6vw, 34px); color: var(--cw-ivory); margin-bottom: 14px; }
.cw-scrolly-step p { color: var(--cw-star-dim); max-width: 430px; font-size: 16px; }
.cw-scrolly-dots { display: flex; gap: 8px; margin-top: 22px; justify-content: center; }
.cw-scrolly-dots span { height: 6px; width: 8px; border-radius: 999px; background: rgba(246,244,238,0.18); transition: all 0.3s ease; }
.cw-scrolly-dots span.on { width: 26px; background: var(--cw-gold); }
@media (max-width: 1023px) { .cw-scrolly-dots { display: none; } }

/* — shot internals: tiny product renders in the real design language — */
.cw-gantt-row { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; }
.cw-gantt-row .lbl { width: 88px; font-size: 10.5px; color: var(--cw-ink-dim); flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-gantt-track { flex: 1; height: 16px; position: relative; }
.cw-gantt-bar {
  position: absolute; top: 0; height: 16px; border-radius: 5px;
  background: rgba(242,193,78,0.32); border: 1px solid rgba(242,193,78,0.45);
  width: 0; transition: width 0.9s cubic-bezier(0.22,0.61,0.36,1);
}
.cw-gantt-bar.crit { background: rgba(212,160,23,0.78); border-color: var(--cw-gold-light); }
.cw-shot.on .cw-gantt-bar { width: var(--w); }
.cw-shot .dep {
  position: absolute; border-left: 1.5px dashed rgba(242,193,78,0.5);
  border-bottom: 1.5px dashed rgba(242,193,78,0.5); border-radius: 0 0 0 6px;
  opacity: 0; transition: opacity 0.4s ease 0.9s;
}
.cw-shot.on .dep { opacity: 1; }

.cw-heat { display: grid; grid-template-columns: 84px repeat(10, 1fr); gap: 4px; align-items: center; }
.cw-heat .nm { font-size: 10px; color: var(--cw-ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-heat .c {
  aspect-ratio: 1; border-radius: 4px; background: rgba(10,19,48,0.06);
  opacity: 0; transform: scale(0.7);
  transition: opacity 0.3s ease, transform 0.3s ease;
  transition-delay: calc(var(--d) * 28ms);
}
.cw-shot.on .cw-heat .c { opacity: 1; transform: none; }
.cw-heat .c.l1 { background: rgba(212,160,23,0.22); }
.cw-heat .c.l2 { background: rgba(212,160,23,0.45); }
.cw-heat .c.l3 { background: rgba(212,160,23,0.75); }
.cw-heat .c.hot { background: rgba(194,84,80,0.8); }

.cw-util { display: flex; gap: 26px; align-items: center; padding-top: 8px; }
.cw-util svg { width: 130px; height: 130px; flex-shrink: 0; }
.cw-util .t { stroke: rgba(10,19,48,0.08); }
.cw-util .f { stroke: var(--cw-gold); stroke-linecap: round; }
.cw-shot.on .cw-util .f { transition: stroke-dashoffset 1.2s cubic-bezier(0.22,0.61,0.36,1) 0.2s; }
.cw-util .big { font-family: var(--cw-serif); font-size: 44px; font-weight: 600; color: var(--cw-midnight); line-height: 1; }
.cw-util .cap { font-size: 12.5px; color: var(--cw-ink-dim); margin-top: 6px; }
.cw-util .rows { margin-top: 14px; display: grid; gap: 7px; }
.cw-util .r { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--cw-ink-dim); gap: 18px; }
.cw-util .r b { color: #9a6b14; font-family: var(--cw-serif); }

.cw-inv { background: var(--cw-white); border: 1px solid var(--cw-paper-line); border-radius: 12px; padding: 16px 18px; color: var(--cw-charcoal); }
.cw-inv .hd { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.cw-inv .hd b { font-family: var(--cw-serif); font-size: 16px; }
.cw-inv .badge { font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: rgba(63,166,106,0.14); color: var(--cw-success); }
.cw-inv-line { display: flex; justify-content: space-between; font-size: 12.5px; padding: 6px 0; border-bottom: 1px solid var(--cw-paper-line); opacity: 0; transform: translateX(-8px); transition: all 0.4s ease; transition-delay: calc(var(--d) * 180ms); }
.cw-shot.on .cw-inv-line { opacity: 1; transform: none; }
.cw-inv-line .num { font-family: var(--cw-serif); font-weight: 600; }
.cw-inv-total { display: flex; justify-content: space-between; padding-top: 10px; font-weight: 700; }
.cw-inv-total .num { font-family: var(--cw-serif); font-size: 24px; }

/* ----------------------------------------------------------------- pillars */
.cw-pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 1100px) { .cw-pillars { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .cw-pillars { grid-template-columns: 1fr; } }
.cw-pillar {
  background: var(--cw-white); border: 1px solid var(--cw-paper-line);
  color: var(--cw-charcoal);
  border-radius: var(--cw-r-xl); padding: 28px 24px;
  box-shadow: var(--cw-shadow-card);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.cw-pillar h3 { color: var(--cw-midnight); }
.cw-pillar:hover { transform: translateY(-5px); box-shadow: var(--cw-shadow-pop); border-color: var(--cw-gold-line); }
.cw-pillar .ico {
  width: 46px; height: 46px; border-radius: 13px;
  background: var(--cw-gold-soft); color: var(--cw-gold);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px; font-size: 20px;
}
.cw-pillar h3 { font-size: 19px; margin-bottom: 9px; }
.cw-pillar p { font-size: 14px; color: var(--cw-ink-dim); margin-bottom: 14px; }
.cw-pillar .mini {
  border-top: 1px dashed var(--cw-paper-line); padding-top: 12px;
  font-family: var(--cw-mono); font-size: 11px; color: var(--cw-ink-dim); line-height: 1.8;
}
.cw-pillar .mini b { color: var(--cw-gold); font-weight: 700; }

/* --------------------------------------------------------------- the fight */
.cw-fight-compare { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-bottom: var(--cw-s-8); }
@media (max-width: 900px) { .cw-fight-compare { grid-template-columns: 1fr; } }
.cw-versus {
  border: 1px solid var(--cw-night-line); border-radius: var(--cw-r-lg);
  padding: 24px;
}
.cw-versus .dim { font-size: var(--cw-fs-label); font-weight: 700; letter-spacing: var(--cw-track-label); text-transform: uppercase; color: var(--cw-star-faint); margin-bottom: 14px; }
.cw-versus .them { color: var(--cw-star-dim); font-size: 14px; padding-bottom: 12px; border-bottom: 1px dashed var(--cw-night-line); margin-bottom: 12px; }
.cw-versus .them s { opacity: 0.75; }
.cw-versus .us { color: var(--cw-ivory); font-size: 15.5px; font-weight: 600; }
.cw-versus .us em { color: var(--cw-gold-light); font-style: normal; }

.cw-parity { margin-top: var(--cw-s-6); }
.cw-parity-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: var(--cw-s-5); }
.cw-parity-head h3 { color: var(--cw-ivory); font-size: 22px; }
.cw-parity-head .meta { font-family: var(--cw-mono); font-size: 12px; color: var(--cw-gold-light); }
.cw-parity-wall { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 1000px) { .cw-parity-wall { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .cw-parity-wall { grid-template-columns: 1fr; } }
.cw-chip {
  display: flex; align-items: center; gap: 10px;
  background: rgba(14,26,64,0.6);
  border: 1px solid rgba(246,244,238,0.16); border-radius: 11px;
  padding: 11px 14px; font-size: 13px; color: rgba(246,244,238,0.92);
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.45s ease, transform 0.45s ease, border-color 0.3s ease;
  transition-delay: calc(var(--d) * 45ms);
}
.cw-chip.on { opacity: 1; transform: none; }
.cw-chip:hover { border-color: var(--cw-gold-line); }
.cw-chip .tick { color: var(--cw-gold); font-weight: 800; flex-shrink: 0; }
.cw-beyond { margin-top: var(--cw-s-8); display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 1000px) { .cw-beyond { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .cw-beyond { grid-template-columns: 1fr; } }
.cw-beyond-card {
  background: linear-gradient(160deg, rgba(212,160,23,0.13), rgba(212,160,23,0.03));
  border: 1px solid var(--cw-gold-line); border-radius: var(--cw-r-lg);
  padding: 22px;
}
.cw-beyond-card .n { font-family: var(--cw-serif); font-size: 15px; color: var(--cw-gold-light); margin-bottom: 8px; }
.cw-beyond-card h4 { color: var(--cw-ivory); font-family: var(--cw-serif); font-weight: 600; font-size: 18px; margin-bottom: 8px; }
.cw-beyond-card p { font-size: 13px; color: var(--cw-star-dim); }

/* ----------------------------------------------------------------- numbers */
.cw-numbers { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--cw-s-7) var(--cw-s-6); }
@media (max-width: 900px) { .cw-numbers { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .cw-numbers { grid-template-columns: 1fr; } }
.cw-stat .num {
  font-family: var(--cw-serif); font-weight: 600;
  font-size: clamp(46px, 5.4vw, 76px); line-height: 1; color: var(--cw-ivory);
}
.cw-stat .num .suffix { color: var(--cw-gold); font-size: 0.55em; }
.cw-stat .cap { margin-top: 10px; font-size: 14px; color: var(--cw-star-dim); max-width: 240px; }

/* -------------------------------------------------------------- cfo strip */
.cw-cfo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 900px) { .cw-cfo-grid { grid-template-columns: 1fr; } }
.cw-cfo-item {
  border: 1px solid var(--cw-night-line); border-radius: var(--cw-r-lg); padding: 20px 22px;
}
.cw-cfo-item h4 { font-family: var(--cw-serif); color: var(--cw-gold-light); font-size: 17px; font-weight: 600; margin-bottom: 7px; }
.cw-cfo-item p { font-size: 13.5px; color: var(--cw-star-dim); }

/* ---------------------------------------------------------------- security */
.cw-sec-strip { display: flex; flex-wrap: wrap; gap: 11px; }
.cw-sec-chip {
  display: inline-flex; align-items: center; gap: 9px;
  border: 1px solid var(--cw-paper-line); background: var(--cw-white);
  border-radius: 999px; padding: 10px 18px;
  font-size: 13.5px; font-weight: 600; color: var(--cw-charcoal);
}
.cw-sec-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cw-gold); }

/* --------------------------------------------------------------------- faq */
.cw-faq { max-width: 760px; }
.cw-faq-item { border-bottom: 1px solid var(--cw-night-line); }
.cw-faq-q {
  width: 100%; background: none; border: 0; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 18px;
  padding: 22px 0; text-align: left;
  font-family: var(--cw-serif); font-size: 18.5px; font-weight: 600; color: var(--cw-ivory);
}
.cw-faq-q .pl { color: var(--cw-gold); font-size: 22px; transition: transform 0.3s ease; flex-shrink: 0; }
.cw-faq-item.open .pl { transform: rotate(45deg); }
.cw-faq-a { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.cw-faq-a p { padding: 0 0 22px; color: var(--cw-star-dim); font-size: 15px; max-width: 640px; }

/* --------------------------------------------------------------- final cta */
.cw-final { text-align: center; padding: calc(var(--cw-s-9) + 20px) 0; }
.cw-final-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; pointer-events: none;
  opacity: 0; transition: opacity 1.4s ease;
}
.cw-final-video.cw-vid-in { opacity: 0.5; }
.cw-final-veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 70% 60% at 50% 45%, rgba(10,19,48,0.4), transparent 70%),
              linear-gradient(to bottom, rgba(10,19,48,0.7), rgba(10,19,48,0.45) 45%, rgba(10,19,48,0.92));
}
.cw-final .cw-container { position: relative; z-index: 2; }
.cw-final-dial {
  width: 110px; height: auto; margin: 0 auto var(--cw-s-6); display: block;
  filter: drop-shadow(0 8px 30px rgba(212,160,23,0.35));
}
.cw-final h2 { color: var(--cw-ivory); font-size: clamp(36px, 5vw, 64px); margin-bottom: var(--cw-s-4); }
.cw-final h2 em { font-style: italic; color: var(--cw-gold); }
.cw-final p { color: var(--cw-star-dim); max-width: 520px; margin: 0 auto var(--cw-s-6); font-size: var(--cw-fs-sub); }
.cw-final .ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.cw-final .micro { margin-top: var(--cw-s-5); font-size: 13px; color: var(--cw-star-faint); }

/* ------------------------------------------------------------------ footer */
.cw-footer {
  position: relative;
  background: rgba(7,13,34,0.92);
  border-top: 1px solid var(--cw-night-line);
  padding: 64px 0 28px;
}
.cw-footer-grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: 40px; margin-bottom: 44px;
}
@media (max-width: 900px) { .cw-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 520px) { .cw-footer-grid { grid-template-columns: 1fr; } }
.cw-footer .fcol h5 {
  font-size: var(--cw-fs-label); font-weight: 700; letter-spacing: var(--cw-track-label);
  text-transform: uppercase; color: var(--cw-gold); margin-bottom: 16px;
}
.cw-footer .fcol a {
  display: block; font-size: 14px; color: var(--cw-star-dim);
  padding: 5px 0; transition: color 0.2s ease;
}
.cw-footer .fcol a:hover { color: var(--cw-gold-light); }
.cw-footer .fbrand .lockup { height: 24px; width: auto; display: block; margin-bottom: 16px; }
.cw-footer .fbrand p { font-size: 13.5px; color: var(--cw-star-dim); max-width: 280px; line-height: 1.7; }
.cw-footer-bottom {
  border-top: 1px solid var(--cw-night-line); padding-top: 22px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 12px; color: var(--cw-star-faint);
}

/* ----------------------------------------------------------- scroll reveal */
.cw-reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.75s cubic-bezier(0.22,0.61,0.36,1), transform 0.75s cubic-bezier(0.22,0.61,0.36,1); transition-delay: var(--rd, 0ms); }
.cw-reveal.cw-in { opacity: 1; transform: none; }

/* ----------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .cw-reveal, .cw-hero [data-enter], .cw-chip, .cw-scrolly-step { opacity: 1 !important; transform: none !important; }
  .cw-preloader { display: none; }
}