/* ============================================================================
   ChromaLayer — landing page
   ----------------------------------------------------------------------------
   Loaded only by index.html. Everything here is namespaced `cl-` so it can
   never collide with the inline styles in blog.html / blog-post-*.html, which
   share index.css with this page.

   Design reference is the ChromaLayer Display Studio window itself: deep navy
   ground, hairline borders, one blue accent, restrained depth.
   ========================================================================== */

:root {
  /* Dark is the only theme — light mode and the toggle have been removed. */
  --cl-bg:            #070a11;
  /* Lighter than the base, not darker: a raised chapter panel reads as a
     deliberate break, where a near-black one just looked like a seam. */
  --cl-bg-sunken:     #0e1526;
  --cl-surface:       #0c1119;
  --cl-surface-2:     #121824;
  --cl-line:          #1c2431;
  --cl-line-strong:   #2b3547;
  --cl-ink:           #f1f5fb;
  --cl-ink-2:         #a7b3c6;
  --cl-ink-3:         #76839a;
  --cl-brand:         #3b9eff;
  --cl-brand-ink:     #04101f;
  --cl-brand-soft:    rgba(59, 158, 255, 0.12);
  --cl-brand-line:    rgba(59, 158, 255, 0.30);
  --cl-violet:        #9d7bff;
  --cl-good:          #3ddc9a;
  --cl-warn:          #f0b429;
  --cl-shadow-sm:     0 1px 2px rgba(0, 0, 0, .5), 0 4px 14px rgba(0, 0, 0, .35);
  --cl-shadow-lg:     0 2px 6px rgba(0, 0, 0, .5), 0 32px 72px rgba(0, 0, 0, .55);
  --cl-inset:         inset 0 1px 0 rgba(255, 255, 255, .06);
  --cl-glow:          rgba(59, 158, 255, .16);

  --cl-max:      1280px;
  --cl-gutter:   20px;
  --cl-r-sm:     8px;
  --cl-r-md:     12px;
  --cl-r-lg:     18px;
  --cl-r-xl:     26px;
  --cl-ease:     cubic-bezier(.16, 1, .3, 1);
}

/* ---------------------------------------------------------------- primitives */

/* index.css already forces scroll-behavior back to auto under
   prefers-reduced-motion, so this is safe to set unconditionally. */
html { scroll-behavior: smooth; }

.cl-page { background: var(--cl-bg); color: var(--cl-ink-2); }
/* Keeps anchored sections clear of the sticky header. */
.cl-page [id] { scroll-margin-top: 80px; }
.cl-page *, .cl-page *::before, .cl-page *::after { box-sizing: border-box; }
.cl-page img, .cl-page video, .cl-page svg { display: block; max-width: 100%; }
.cl-page img, .cl-page video { height: auto; }

.cl-shell {
  width: 100%;
  max-width: var(--cl-max);
  margin-inline: auto;
  padding-inline: var(--cl-gutter);
}

.cl-section { padding-block: clamp(72px, 9vw, 120px); position: relative; }
.cl-section--tight { padding-block: clamp(56px, 7vw, 88px); }
.cl-section--sunken { background: var(--cl-bg-sunken); border-block: 1px solid var(--cl-line); }

.cl-skip {
  position: absolute; left: 12px; top: 12px; z-index: 200;
  padding: 10px 18px; border-radius: var(--cl-r-sm);
  background: var(--cl-brand); color: var(--cl-brand-ink);
  font-weight: 600; font-size: 14px; text-decoration: none;
  transform: translateY(-200%);
  transition: transform .2s var(--cl-ease);
}
.cl-skip:focus { transform: none; text-decoration: none; }

/* Typography */
.cl-page h1, .cl-page h2, .cl-page h3, .cl-page h4 {
  margin: 0; color: var(--cl-ink); font-weight: 650;
  letter-spacing: -0.025em; text-wrap: balance;
}
/* Display sizes are deliberately large and tightly set: at these sizes Inter
   wants less weight and much less leading than body copy, so weight drops to
   ~620 and line-height goes under 1. */
/* Capped at 72px rather than the ~88px of the reference: that headline is 32
   characters and sets in three lines, this one is 54 and would run to five,
   pushing both CTAs below the fold. */
.cl-h1 { font-size: clamp(2.5rem, 5vw, 4.5rem); line-height: .96; letter-spacing: -0.036em; font-weight: 640; }
.cl-h2 { font-size: clamp(1.95rem, 4.2vw, 3.4rem); line-height: .98;  letter-spacing: -0.034em; font-weight: 640; }
.cl-h3 { font-size: 1.0625rem; line-height: 1.35; letter-spacing: -0.015em; font-weight: 620; }

.cl-lead {
  font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
  line-height: 1.6; color: var(--cl-ink-2);
  max-width: 62ch; text-wrap: pretty; margin: 18px 0 0;
}
.cl-body { font-size: .9375rem; line-height: 1.65; color: var(--cl-ink-2); margin: 0; text-wrap: pretty; }
.cl-small { font-size: .8125rem; line-height: 1.55; color: var(--cl-ink-3); margin: 0; }
.cl-em { color: var(--cl-brand); font-style: normal; }

.cl-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .6875rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--cl-brand); margin-bottom: 18px;
}
.cl-eyebrow::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; box-shadow: 0 0 0 3px var(--cl-brand-soft);
}

.cl-head { max-width: 46rem; margin-bottom: clamp(40px, 5vw, 64px); }
.cl-head--center { margin-inline: auto; text-align: center; }
.cl-head--center .cl-lead { margin-inline: auto; }

.cl-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Buttons */
.cl-btn {
  --_bg: transparent; --_fg: var(--cl-ink); --_line: var(--cl-line-strong);
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 11px 18px; border-radius: var(--cl-r-sm);
  border: 1px solid var(--_line); background: var(--_bg); color: var(--_fg);
  font: inherit; font-size: .875rem; font-weight: 600; letter-spacing: -.005em;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: transform .18s var(--cl-ease), background-color .18s var(--cl-ease),
              border-color .18s var(--cl-ease), box-shadow .18s var(--cl-ease), color .18s var(--cl-ease);
}
.cl-btn:hover { text-decoration: none; }
.cl-btn:active { transform: translateY(1px); }

.cl-btn--primary {
  --_bg: var(--cl-brand); --_fg: var(--cl-brand-ink); --_line: transparent;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18), 0 6px 20px var(--cl-glow);
}
.cl-btn--primary:hover { filter: brightness(1.08); box-shadow: 0 2px 4px rgba(0, 0, 0, .2), 0 10px 28px var(--cl-glow); }

.cl-btn--ghost { --_bg: var(--cl-surface); --_fg: var(--cl-ink); }
.cl-btn--ghost:hover { background: var(--cl-surface-2); border-color: var(--cl-line-strong); }

.cl-btn--quiet { --_line: transparent; --_fg: var(--cl-ink-2); padding-inline: 12px; }
.cl-btn--quiet:hover { color: var(--cl-ink); background: var(--cl-surface-2); }

.cl-btn--lg { padding: 14px 24px; font-size: .9375rem; border-radius: var(--cl-r-md); }
.cl-btn--block { width: 100%; }

/* Surface card */
.cl-card {
  background: var(--cl-surface);
  border: 1px solid var(--cl-line);
  border-radius: var(--cl-r-lg);
  box-shadow: var(--cl-inset);
}

/* ------------------------------------------------------------------- header */

.cl-header {
  position: sticky; top: 0; z-index: 60;
  border-bottom: 1px solid transparent;
  background: color-mix(in srgb, var(--cl-bg) 72%, transparent);
  backdrop-filter: blur(14px) saturate(1.6);
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
  transition: border-color .25s ease, background-color .25s ease;
}
.cl-header.is-stuck {
  border-bottom-color: var(--cl-line);
  background: color-mix(in srgb, var(--cl-bg) 92%, transparent);
}
@supports not (backdrop-filter: blur(1px)) { .cl-header { background: var(--cl-bg); } }

.cl-nav {
  display: flex; align-items: center; gap: 20px;
  height: 62px;
}
.cl-brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--cl-ink); font-weight: 650; font-size: .9375rem; letter-spacing: -.015em;
  text-decoration: none; margin-right: auto;
}
.cl-brand:hover { text-decoration: none; opacity: .85; }
.cl-brand img { width: 26px; height: 26px; border-radius: 6px; }

.cl-nav__links { display: flex; align-items: center; gap: 4px; }
.cl-nav__links a {
  padding: 7px 11px; border-radius: 7px;
  font-size: .84375rem; font-weight: 520; color: var(--cl-ink-2);
  text-decoration: none; transition: color .18s ease, background-color .18s ease;
}
.cl-nav__links a:hover { color: var(--cl-ink); background: var(--cl-surface-2); text-decoration: none; }
.cl-nav__links a[aria-current="true"] { color: var(--cl-ink); }

.cl-nav__actions { display: flex; align-items: center; gap: 10px; }
.cl-nav__price { color: color-mix(in srgb, currentColor 72%, transparent); font-weight: 550; }

.cl-nav__toggle {
  display: none; width: 40px; height: 40px; padding: 0;
  align-items: center; justify-content: center;
  border: 1px solid var(--cl-line); border-radius: var(--cl-r-sm);
  background: var(--cl-surface); color: var(--cl-ink); cursor: pointer;
}
.cl-nav__toggle svg { width: 18px; height: 18px; }
.cl-nav__toggle .cl-x, .cl-nav__toggle[aria-expanded="true"] .cl-burger { display: none; }
.cl-nav__toggle[aria-expanded="true"] .cl-x { display: block; }

/* Never present above the nav breakpoint, so it cannot contribute height to
   the desktop header under any circumstances. */
.cl-drawer { display: none; background: var(--cl-bg); }
@media (max-width: 1080px) {
  .cl-drawer { display: block; }
  .cl-drawer[data-open="true"] { border-top: 1px solid var(--cl-line); }
}
/* Padding lives on the inner wrapper — on the drawer itself it would still
   show while collapsed. */
.cl-drawer__inner { padding: 12px var(--cl-gutter) 22px; }
/* :not(.cl-btn) matters. At (0,1,1) this rule outranked .cl-btn's (0,1,0)
   display:inline-flex, so the drawer's buy button rendered as a plain block
   link — text left-aligned and the arrow pushed onto a second line. */
.cl-drawer a:not(.cl-btn) {
  display: block; padding: 13px 4px;
  border-bottom: 1px solid var(--cl-line);
  color: var(--cl-ink); font-size: .9375rem; font-weight: 550; text-decoration: none;
}
.cl-drawer a:not(.cl-btn):hover { text-decoration: none; color: var(--cl-brand); }
.cl-drawer .cl-btn { margin-top: 18px; }

/* --------------------------------------------------------------------- hero */

.cl-hero { position: relative; overflow: hidden; padding-block: clamp(40px, 5vw, 68px) clamp(56px, 7vw, 96px); }
.cl-hero::before {
  content: ""; position: absolute; inset: -30% 0 auto 0; height: 720px;
  background:
    radial-gradient(680px 420px at 22% 0%, var(--cl-glow), transparent 68%),
    radial-gradient(520px 380px at 82% 6%, color-mix(in srgb, var(--cl-violet) 14%, transparent), transparent 70%);
  pointer-events: none; z-index: 0;
}
.cl-hero > * { position: relative; z-index: 1; }

.cl-hero__grid {
  display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  gap: clamp(32px, 5vw, 56px); align-items: start;
}

/* Bento cluster: the video is the anchor tile, with four fact tiles around it.
   Every figure here is stated elsewhere on the page — this is a scannable
   summary, not a second set of claims. */
.cl-bento {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.cl-bento__video { grid-column: 1 / -1; }
.cl-tile {
  display: flex; flex-direction: column; justify-content: space-between; gap: 10px;
  min-height: 104px; padding: 16px 18px;
  border: 1px solid var(--cl-line); border-radius: var(--cl-r-md);
  background: var(--cl-surface); box-shadow: var(--cl-inset);
  /* Literal duration: this sheet must stand alone without motion.css. */
  transition: border-color .24s ease;
}
.cl-tile:hover { border-color: var(--cl-line-strong); }
.cl-tile__k {
  display: flex; align-items: center; gap: 7px;
  font-size: .625rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--cl-ink-3);
}
.cl-tile__k svg { width: 13px; height: 13px; color: var(--cl-brand); flex: none; }
.cl-tile__v {
  font-size: 1.5rem; font-weight: 650; line-height: 1.05; letter-spacing: -.03em;
  color: var(--cl-ink); font-variant-numeric: tabular-nums;
}
.cl-tile__v small { display: block; margin-top: 4px; font-size: .75rem; font-weight: 500; letter-spacing: 0; color: var(--cl-ink-3); }
.cl-tile--brand { border-color: var(--cl-brand-line); background: linear-gradient(160deg, var(--cl-brand-soft), transparent 62%), var(--cl-surface); }
.cl-tile--brand .cl-tile__v { color: var(--cl-brand); }

/* ------------------------------------------------------------------ ticker */
/* The seven real control names, running between the hero and the problem. */
.cl-ticker {
  position: relative; overflow: hidden;
  border-block: 1px solid var(--cl-line);
  background: var(--cl-bg-sunken);
  padding-block: 13px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.cl-ticker__track { display: flex; width: max-content; }
.cl-ticker__seq { display: flex; align-items: center; flex: none; }
.cl-ticker__seq span {
  padding-inline: 22px;
  font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--cl-ink-2); white-space: nowrap;
}
.cl-ticker__seq i { color: var(--cl-brand); font-style: normal; font-size: .625rem; opacity: .8; }

.cl-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.cl-hero__note { margin-top: 14px; font-size: .8125rem; color: var(--cl-ink-3); }

.cl-facts {
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  margin: 28px 0 0; padding: 0; list-style: none;
}
.cl-facts li {
  display: flex; align-items: center; gap: 7px;
  font-size: .8125rem; font-weight: 520; color: var(--cl-ink-2);
}
.cl-facts svg { width: 15px; height: 15px; color: var(--cl-brand); flex: none; }

/* Video / screenshot plinth */
.cl-frame {
  position: relative; padding: 8px;
  border: 1px solid var(--cl-line); border-radius: var(--cl-r-xl);
  background: linear-gradient(160deg, var(--cl-surface-2), var(--cl-surface));
  box-shadow: var(--cl-shadow-lg), var(--cl-inset);
}
.cl-frame > video, .cl-frame > img {
  width: 100%; border-radius: calc(var(--cl-r-xl) - 8px);
  background: var(--cl-bg-sunken);
}
.cl-frame__cap {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 6px 3px; font-size: .75rem; color: var(--cl-ink-3);
}
.cl-frame__cap svg { width: 13px; height: 13px; flex: none; }

/* ------------------------------------------------------------------ problem */

.cl-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.cl-step {
  padding: 28px 26px 30px; border-radius: var(--cl-r-lg);
  border: 1px solid var(--cl-line); background: var(--cl-surface);
  box-shadow: var(--cl-inset);
  transition: transform .3s var(--cl-ease), border-color .3s ease;
}
.cl-step:hover { transform: translateY(-3px); border-color: var(--cl-line-strong); }
.cl-step__n {
  display: inline-grid; place-items: center; width: 30px; height: 30px; margin-bottom: 20px;
  border-radius: 9px; border: 1px solid var(--cl-line);
  background: var(--cl-surface-2);
  font-size: .75rem; font-weight: 700; color: var(--cl-ink-3);
  font-variant-numeric: tabular-nums;
}
.cl-step--key { border-color: var(--cl-brand-line); background: linear-gradient(165deg, var(--cl-brand-soft), transparent 62%), var(--cl-surface); }
.cl-step--key .cl-step__n { color: var(--cl-brand); border-color: var(--cl-brand-line); background: var(--cl-brand-soft); }
.cl-step h3 { margin-bottom: 9px; }

/* ----------------------------------------------------------------- showcase */

.cl-showcase { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 64px); align-items: start; }
.cl-showcase__list { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 20px; }
.cl-showcase__list li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px; align-items: start; }
.cl-showcase__ico {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px;
  border: 1px solid var(--cl-brand-line); background: var(--cl-brand-soft); color: var(--cl-brand);
}
.cl-showcase__ico svg { width: 15px; height: 15px; }
.cl-showcase__list b { display: block; color: var(--cl-ink); font-size: .9375rem; font-weight: 620; margin-bottom: 3px; }

.cl-shots { display: grid; gap: 16px; }
.cl-shots__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cl-shot { background: none; border: none; box-shadow: none; }
.cl-shot img { width: 100%; background: transparent; }

/* ------------------------------------------------------------ compare slider */

.cl-compare {
  position: relative; margin-inline: auto; max-width: 1000px;
  border: 1px solid var(--cl-line); border-radius: var(--cl-r-lg);
  overflow: hidden; background: var(--cl-bg-sunken);
  box-shadow: var(--cl-shadow-lg);
  --_split: 50%;
}
.cl-compare__stage { position: relative; display: block; width: 100%; }
.cl-compare__stage > img { width: 100%; display: block; }
/* Clip from the LEFT by the divider position, so the filtered layer occupies
   the right-hand side and sits under the AFTER tag. Clipping from the right
   instead puts the processed image beneath the BEFORE label. */
.cl-compare__after {
  position: absolute; inset: 0;
  clip-path: inset(0 0 0 var(--_split));
  will-change: clip-path;
}
.cl-compare__after img { width: 100%; height: 100%; object-fit: cover; filter: url(#clAfterFilter); }

/* The divider spans the full width and is moved by transform, with the visible
   line drawn on its trailing edge. Positioning it with `left: var(--_split)`
   would be simpler to read but relayouts on every frame of a drag; a
   percentage translate resolves against the element's own width, which is why
   it is stretched to 100% and pulled back by that same amount. */
.cl-compare__divider {
  position: absolute; top: 0; bottom: 0; left: 0;
  width: 100%; pointer-events: none; z-index: 3;
  transform: translate3d(calc(var(--_split) - 100%), 0, 0);
}
.cl-compare__divider::before {
  content: ""; position: absolute; top: 0; bottom: 0; right: -1px; width: 2px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .28);
}
.cl-compare__grip {
  position: absolute; top: 50%; right: -1px; transform: translate(50%, -50%);
  width: 42px; height: 42px; border-radius: 50%;
  background: #fff; color: #0a1020;
  display: grid; place-items: center;
  box-shadow: 0 3px 14px rgba(0, 0, 0, .45);
}
.cl-compare__grip svg { width: 19px; height: 19px; }

/* An invisible range stretched over the whole photo: it is the drag surface,
   the keyboard control and the screen-reader control all at once.
   NOTE: the Studio panel's `.cl-page input[type="range"]` rules further down
   this file carry higher specificity and would otherwise clamp this to a 20px
   strip along the top edge — they are explicitly scoped off it with
   :not(.cl-compare__range). Keep that exclusion if either rule set moves. */
.cl-compare__range {
  position: absolute; inset: 0; z-index: 4;
  width: 100%; height: 100%; margin: 0; padding: 0;
  -webkit-appearance: none; appearance: none;
  background: transparent; cursor: ew-resize; opacity: 0;
  touch-action: pan-y;
}
/* A 2px thumb keeps value→pixel mapping honest; the whole track is the hit
   area anyway, so there is nothing to grab visually. The track is stretched to
   the full height so a press anywhere over the photo counts. */
.cl-compare__range::-webkit-slider-runnable-track { height: 100%; background: transparent; border-radius: 0; }
.cl-compare__range::-moz-range-track { height: 100%; background: transparent; border-radius: 0; }
.cl-compare__range::-webkit-slider-thumb { -webkit-appearance: none; margin-top: 0; width: 2px; height: 100%; border: 0; box-shadow: none; }
.cl-compare__range::-moz-range-thumb { width: 2px; height: 100%; border: 0; border-radius: 0; box-shadow: none; }
.cl-compare__range:focus-visible { outline: none; }
.cl-compare:has(.cl-compare__range:focus-visible) { outline: 2px solid var(--cl-brand); outline-offset: 3px; }
.cl-compare:has(.cl-compare__range:focus-visible) .cl-compare__grip { box-shadow: 0 0 0 4px var(--cl-brand), 0 3px 14px rgba(0, 0, 0, .45); }

.cl-compare__tag {
  position: absolute; top: 16px; z-index: 3;
  padding: 6px 11px; border-radius: 7px;
  background: rgba(6, 10, 18, .74); border: 1px solid rgba(255, 255, 255, .2);
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  color: #fff; font-size: .6875rem; font-weight: 650; letter-spacing: .1em;
}
.cl-compare__tag--a { left: 16px; }
.cl-compare__tag--b { right: 16px; }

.cl-compare__bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px; max-width: 1000px; margin: 18px auto 0;
}
.cl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cl-chip {
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--cl-line); background: var(--cl-surface);
  color: var(--cl-ink-2); font: inherit; font-size: .8125rem; font-weight: 550;
  cursor: pointer; transition: all .18s var(--cl-ease);
}
.cl-chip:hover { border-color: var(--cl-line-strong); color: var(--cl-ink); }
.cl-chip[aria-pressed="true"] {
  background: var(--cl-brand-soft); border-color: var(--cl-brand-line); color: var(--cl-brand);
}

.cl-disclaimer {
  display: flex; gap: 10px; align-items: flex-start;
  max-width: 1000px; margin: 20px auto 0; padding: 14px 16px;
  border: 1px solid var(--cl-line); border-radius: var(--cl-r-md);
  background: var(--cl-surface-2);
  font-size: .8125rem; line-height: 1.6; color: var(--cl-ink-3);
}
.cl-disclaimer svg { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--cl-ink-3); }
.cl-disclaimer b { color: var(--cl-ink-2); font-weight: 620; }

/* --------------------------------------------------------------- the studio */

/* Two independent cards rather than one fused window. The control column is
   ~1200px of content — taller than any sensible viewport — so the previous
   fused layout had to scroll internally, which clipped rows mid-control. Here
   the panel takes its natural height and the preview sticks alongside it, so
   you can see what every slider is doing without a nested scrollbar.
   NOTE: no `overflow: hidden` on this grid — it would kill the sticky. */
.cl-studio {
  display: grid; grid-template-columns: minmax(0, 1fr) 420px;
  gap: 20px; align-items: start;
}

.cl-viewport-track { position: relative; height: 100%; }

.cl-viewport {
  position: sticky; top: 72px;
  display: flex; flex-direction: column;
  aspect-ratio: 16 / 11; max-height: 620px;
  background: #05070d; overflow: hidden;
  border: 1px solid var(--cl-line); border-radius: var(--cl-r-lg);
  box-shadow: var(--cl-shadow-lg);
}
.cl-viewport__stage { position: relative; flex: 1; overflow: hidden; }
.cl-viewport__stage svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cl-viewport__bar {
  position: absolute; left: 0; right: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px;
  background: linear-gradient(to bottom, rgba(5, 7, 13, .82), rgba(5, 7, 13, 0));
  font-size: .6875rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: rgba(255, 255, 255, .68);
}
.cl-viewport__bar--btm {
  bottom: 0; top: auto; text-transform: none; letter-spacing: 0; font-weight: 500;
  background: linear-gradient(to top, rgba(5, 7, 13, .88), rgba(5, 7, 13, 0));
}
.cl-live { display: inline-flex; align-items: center; gap: 6px; color: var(--cl-brand); }
.cl-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Compare control lives on the preview, not in the panel, so it stays with the
   thing it affects while the preview is pinned. */
.cl-vp-btn {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  padding: 7px 13px; border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, .24);
  background: rgba(255, 255, 255, .1);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  color: #fff; font: inherit; font-size: .75rem; font-weight: 600;
  cursor: pointer; transition: background-color .18s var(--cl-ease), border-color .18s var(--cl-ease);
}
.cl-vp-btn svg { width: 14px; height: 14px; }
.cl-vp-btn:hover { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .38); }
.cl-vp-btn[aria-pressed="true"] { background: #fff; border-color: #fff; color: #0a1020; }
.cl-vp-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Fixed height matching viewport, with sleek internal scrolling. */
.cl-panel {
  border: 1px solid var(--cl-line); border-radius: var(--cl-r-lg);
  background: var(--cl-surface);
  display: flex; flex-direction: column;
  box-shadow: var(--cl-inset);
  max-height: 620px;
}
.cl-panel__head {
  flex: none;
  padding: 20px 22px; border-bottom: 1px solid var(--cl-line);
}
.cl-panel__head h3 { font-size: 1rem; }
.cl-panel__head p { margin: 3px 0 0; font-size: .75rem; color: var(--cl-ink-3); }
.cl-panel__body { 
  flex: 1; padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 10px; 
  overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}
.cl-panel__body::-webkit-scrollbar { width: 6px; }
.cl-panel__body::-webkit-scrollbar-track { background: transparent; }
.cl-panel__body::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.2); border-radius: 10px; }
.cl-panel__body::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, 0.3); }
.cl-panel__label {
  font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--cl-ink-3); margin: 20px 0 12px;
}
.cl-panel__label:first-child { margin-top: 4px; }

/* Collapsible control groups: each of Color & Chromaticity / Tonal Range /
   Spectrum can fold away, so the panel isn't a fixed ~1200px wall of sliders. */
.cl-group-toggle > .cl-panel__label {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; list-style: none;
}
.cl-group-toggle > .cl-panel__label::-webkit-details-marker { display: none; }
.cl-group-toggle > .cl-panel__label::after {
  content: ""; width: 7px; height: 7px; flex: none;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform .25s var(--cl-ease);
}
.cl-group-toggle[open] > .cl-panel__label::after { transform: rotate(-135deg); }
.cl-group-toggle:not([open]) { margin-bottom: 20px; }
.cl-panel__foot {
  flex: none;
  display: flex; gap: 10px; padding: 16px 22px;
  border-top: 1px solid var(--cl-line);
}
.cl-panel__foot .cl-btn { flex: 1; font-size: .8125rem; padding-inline: 10px; }

/* A control row, laid out like the Display Studio's own */
/* Named areas rather than auto-placement: rows with no content (the scale
   line only exists on temperature) collapse to zero instead of shifting
   everything below them into the wrong cell. */
.cl-ctrl {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  grid-template-areas:
    "ico name   val"
    "ico desc   desc"
    "ico slider slider"
    "ico scale  scale";
  gap: 5px 13px; align-items: center;
  padding: 15px; border-radius: var(--cl-r-md);
  border: 1px solid var(--cl-line); background: var(--cl-surface-2);
  transition: border-color .18s ease;
}
.cl-ctrl:hover { border-color: var(--cl-line-strong); }
.cl-ctrl__ico {
  grid-area: ico; align-self: start;
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px;
  border: 1px solid var(--cl-line); background: var(--cl-surface); color: var(--cl-ink-3);
}
.cl-ctrl__ico svg { width: 16px; height: 16px; }
.cl-ctrl__name { grid-area: name; font-size: .875rem; font-weight: 620; color: var(--cl-ink); cursor: pointer; }
.cl-ctrl__desc { grid-area: desc; margin: 2px 0 10px; font-size: .75rem; line-height: 1.5; color: var(--cl-ink-3); }
.cl-ctrl__val {
  grid-area: val;
  display: flex; align-items: center; gap: 2px;
  border: 1px solid var(--cl-line); border-radius: 8px; background: var(--cl-surface);
  padding: 2px;
}
.cl-ctrl__val output {
  min-width: 40px; text-align: right; padding-inline: 2px;
  font-size: .8125rem; font-weight: 650; color: var(--cl-brand);
  font-variant-numeric: tabular-nums;
}
.cl-ctrl__val .cl-unit { font-size: .6875rem; color: var(--cl-ink-3); padding-right: 4px; }
.cl-step-btn {
  width: 22px; height: 22px; padding: 0; border: 0; border-radius: 6px;
  background: transparent; color: var(--cl-ink-3); font: inherit; font-size: .875rem; line-height: 1;
  cursor: pointer; display: grid; place-items: center;
}
.cl-step-btn:hover { background: var(--cl-surface-2); color: var(--cl-ink); }

.cl-ctrl input[type="range"] { grid-area: slider; }

/* Range inputs */
.cl-page input[type="range"]:not(.cl-compare__range) {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 20px; margin: 0; padding: 0;
  background: transparent; cursor: pointer; accent-color: var(--cl-brand);
}
.cl-page input[type="range"]:not(.cl-compare__range)::-webkit-slider-runnable-track {
  height: 5px; border-radius: 3px;
  background: var(--_track, linear-gradient(to right, var(--cl-brand) 0%, var(--cl-brand) var(--_fill, 50%), var(--cl-line-strong) var(--_fill, 50%), var(--cl-line-strong) 100%));
}
.cl-page input[type="range"]:not(.cl-compare__range)::-moz-range-track {
  height: 5px; border-radius: 3px;
  background: var(--_track, linear-gradient(to right, var(--cl-brand) 0%, var(--cl-brand) var(--_fill, 50%), var(--cl-line-strong) var(--_fill, 50%), var(--cl-line-strong) 100%));
}
.cl-page input[type="range"]:not(.cl-compare__range)::-webkit-slider-thumb {
  -webkit-appearance: none; width: 15px; height: 15px; margin-top: -5px;
  border-radius: 50%; background: #fff; border: 1px solid rgba(0, 0, 0, .28);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .45); transition: transform .15s var(--cl-ease);
}
.cl-page input[type="range"]:not(.cl-compare__range)::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff; border: 1px solid rgba(0, 0, 0, .28);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
}
.cl-page input[type="range"]:not(.cl-compare__range):hover::-webkit-slider-thumb { transform: scale(1.12); }
.cl-page input[type="range"]:not(.cl-compare__range):focus-visible { outline: none; }
.cl-page input[type="range"]:not(.cl-compare__range):focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--cl-brand-soft), 0 0 0 5px var(--cl-brand); }
.cl-page input[type="range"]:not(.cl-compare__range):focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--cl-brand-soft), 0 0 0 5px var(--cl-brand); }

.cl-scale { grid-area: scale; display: flex; justify-content: space-between; margin-top: 2px; font-size: .6875rem; color: var(--cl-ink-3); }

/* Presets */
.cl-presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cl-preset {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 11px 6px; border-radius: 10px;
  border: 1px solid var(--cl-line); background: var(--cl-surface-2);
  color: var(--cl-ink-2); font: inherit; font-size: .75rem; font-weight: 570;
  cursor: pointer; transition: all .18s var(--cl-ease);
}
.cl-preset svg { width: 16px; height: 16px; opacity: .75; }
.cl-preset:hover { border-color: var(--cl-line-strong); color: var(--cl-ink); }
.cl-preset[aria-pressed="true"] {
  background: var(--cl-brand-soft); border-color: var(--cl-brand-line); color: var(--cl-brand);
}
.cl-preset[aria-pressed="true"] svg { opacity: 1; }
/* The "Your image" chip wraps a visually hidden file input, so the focus ring
   has to be lifted onto the label or keyboard focus lands somewhere invisible. */
.cl-preset:has(input:focus-visible) { outline: 2px solid var(--cl-brand); outline-offset: 2px; }

.cl-segments { display: flex; gap: 6px; padding: 4px; border: 1px solid var(--cl-line); border-radius: 10px; background: var(--cl-surface-2); }
.cl-segments button {
  flex: 1; padding: 7px 8px; border: 0; border-radius: 7px;
  background: transparent; color: var(--cl-ink-3);
  font: inherit; font-size: .75rem; font-weight: 570; cursor: pointer;
  transition: all .18s var(--cl-ease);
}
.cl-segments button:hover { color: var(--cl-ink); }
.cl-segments button[aria-pressed="true"] { background: var(--cl-surface); color: var(--cl-ink); box-shadow: var(--cl-shadow-sm); }

/* ----------------------------------------------------------------- features */

.cl-groups { display: grid; gap: clamp(36px, 4vw, 56px); }
.cl-group { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); padding-top: 32px; border-top: 1px solid var(--cl-line); }
.cl-group__aside h3 { font-size: 1.125rem; margin-bottom: 8px; }
.cl-group__items { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 26px 30px; }
.cl-feat h4 { display: flex; align-items: center; gap: 9px; font-size: .9375rem; font-weight: 620; color: var(--cl-ink); margin-bottom: 7px; }
.cl-feat h4 svg { width: 16px; height: 16px; color: var(--cl-brand); flex: none; }
.cl-feat p { margin: 0; font-size: .8125rem; line-height: 1.6; color: var(--cl-ink-2); }
.cl-feat__range { display: inline-block; margin-top: 8px; padding: 2px 8px; border-radius: 5px; background: var(--cl-surface-2); border: 1px solid var(--cl-line); font-size: .6875rem; color: var(--cl-ink-3); font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------------- trust */

.cl-specs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--cl-line); border: 1px solid var(--cl-line); border-radius: var(--cl-r-lg); overflow: hidden; }
.cl-spec { padding: 26px 22px; background: var(--cl-surface); }
.cl-spec b { display: block; font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 680; color: var(--cl-ink); line-height: 1; letter-spacing: -.03em; margin-bottom: 8px; }
.cl-spec span { display: block; font-size: .8125rem; color: var(--cl-ink-2); line-height: 1.5; }

.cl-notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin-top: 20px; }
.cl-note { padding: 22px 24px; border: 1px solid var(--cl-line); border-radius: var(--cl-r-md); background: var(--cl-surface); }
.cl-note h3 { font-size: .875rem; font-weight: 620; margin-bottom: 7px; color: var(--cl-ink); }
.cl-note p { margin: 0; font-size: .8125rem; line-height: 1.6; color: var(--cl-ink-2); }
.cl-kbd {
  display: inline-block; padding: 1px 6px; border-radius: 5px;
  border: 1px solid var(--cl-line-strong); border-bottom-width: 2px;
  background: var(--cl-surface-2); color: var(--cl-ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .75em; white-space: nowrap;
}

/* ------------------------------------------------------------------ pricing */

.cl-pricing { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); gap: clamp(24px, 4vw, 40px); align-items: start; }

.cl-price {
  position: relative; overflow: hidden;
  padding: clamp(32px, 4vw, 44px);
  border: 1px solid var(--cl-brand-line); border-radius: var(--cl-r-xl);
  background: var(--cl-surface); box-shadow: var(--cl-shadow-lg), var(--cl-inset);
}
.cl-price::before {
  content: ""; position: absolute; inset: -50% -20% auto -20%; height: 340px;
  background: radial-gradient(closest-side, var(--cl-glow), transparent 72%);
  pointer-events: none;
}
.cl-price > * { position: relative; }
.cl-price__amount { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 2px; }
.cl-price__amount b { font-size: clamp(3.25rem, 7vw, 4.5rem); font-weight: 700; color: var(--cl-ink); line-height: 1; letter-spacing: -.04em; }
.cl-price__amount span { font-size: .9375rem; font-weight: 550; color: var(--cl-ink-2); }
.cl-price__sub { margin: 0 0 26px; font-size: .875rem; color: var(--cl-ink-3); }

.cl-included { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 12px; }
.cl-included li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 11px; align-items: start; font-size: .875rem; color: var(--cl-ink-2); }
.cl-included svg { width: 18px; height: 18px; color: var(--cl-brand); margin-top: 1px; }
.cl-included b { color: var(--cl-ink); font-weight: 620; }

.cl-price__actions { display: grid; gap: 12px; }
.cl-price__fine { margin: 16px 0 0; font-size: .75rem; line-height: 1.6; color: var(--cl-ink-3); }

.cl-buyfaq { display: grid; gap: 14px; align-content: start; }
.cl-buyfaq > div { padding: 20px 22px; border: 1px solid var(--cl-line); border-radius: var(--cl-r-md); background: var(--cl-surface-2); }
.cl-buyfaq h3 { font-size: .875rem; font-weight: 620; margin-bottom: 6px; color: var(--cl-ink); }
.cl-buyfaq p { margin: 0; font-size: .8125rem; line-height: 1.6; color: var(--cl-ink-2); }

/* ------------------------------------------------------------ compatibility */

.cl-compat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.cl-compat__col { padding: 26px 24px; border: 1px solid var(--cl-line); border-radius: var(--cl-r-lg); background: var(--cl-surface); }
.cl-compat__col h3 { display: flex; align-items: center; gap: 9px; font-size: .9375rem; margin-bottom: 6px; }
.cl-compat__col > p { margin: 0 0 18px; font-size: .75rem; color: var(--cl-ink-3); }
.cl-compat__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.cl-compat__col li { display: grid; grid-template-columns: 17px minmax(0, 1fr); gap: 10px; font-size: .875rem; color: var(--cl-ink-2); }
.cl-compat__col li svg { width: 17px; height: 17px; margin-top: 1px; flex: none; }
.cl-compat--yes { border-color: var(--cl-brand-line); }
.cl-compat--yes h3 svg, .cl-compat--yes li svg { color: var(--cl-good); }
.cl-compat--maybe h3 svg, .cl-compat--maybe li svg { color: var(--cl-warn); }
.cl-compat--no h3 svg, .cl-compat--no li svg { color: var(--cl-ink-3); }

/* ---------------------------------------------------------------------- faq */

.cl-faq { max-width: 780px; margin-inline: auto; border-top: 1px solid var(--cl-line); }
.cl-q { border-bottom: 1px solid var(--cl-line); }
.cl-q > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 20px 4px; cursor: pointer; list-style: none;
  font-size: .9375rem; font-weight: 620; color: var(--cl-ink);
}
.cl-q > summary::-webkit-details-marker { display: none; }
.cl-q > summary:hover { color: var(--cl-brand); }
.cl-q__plus { position: relative; flex: none; width: 16px; height: 16px; color: var(--cl-brand); }
.cl-q__plus::before, .cl-q__plus::after {
  content: ""; position: absolute; inset: 50% 0 auto 0; height: 1.5px; margin-top: -.75px;
  background: currentColor; border-radius: 2px; transition: transform .28s var(--cl-ease);
}
.cl-q__plus::after { transform: rotate(90deg); }
.cl-q[open] .cl-q__plus::after, .cl-q:hover .cl-q__plus::after { transform: rotate(0deg); }
/* Hover-expand: the [open] attribute still drives click/keyboard access, but
   visibility is driven by CSS so :hover can reveal the answer too. This
   overrides the UA default that hides non-summary children of a closed
   <details> — author rules win over UA ones regardless of specificity, so a
   plain `display: block` here is enough, no !important needed.
   ponytail: max-height is a fixed ceiling (600px) rather than measuring real
   content height — raise it if a future answer runs long enough to clip. */
.cl-q__a {
  display: block; padding: 0 44px 0 4px;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .4s var(--cl-ease), opacity .3s ease, padding-block .4s var(--cl-ease);
}
.cl-q:hover .cl-q__a, .cl-q[open] .cl-q__a {
  max-height: 600px; opacity: 1; padding-block: 0 22px;
}
.cl-q__a p { margin: 0 0 12px; font-size: .875rem; line-height: 1.68; color: var(--cl-ink-2); }
.cl-q__a p:last-child { margin-bottom: 0; }
.cl-q__a a { color: var(--cl-brand); text-decoration: underline; text-underline-offset: 2px; }

/* ------------------------------------------------------------------- footer */

.cl-footer { border-top: 1px solid var(--cl-line); padding-block: 44px 52px; background: var(--cl-bg-sunken); }
.cl-footer__top { display: flex; flex-wrap: wrap; gap: 28px; justify-content: space-between; align-items: flex-start; }
.cl-footer__nav { display: flex; flex-wrap: wrap; gap: 28px; }
.cl-footer__nav div { display: grid; gap: 9px; align-content: start; }
.cl-footer__nav strong { font-size: .6875rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--cl-ink-3); }
.cl-footer__nav a { font-size: .84375rem; color: var(--cl-ink-2); text-decoration: none; }
.cl-footer__nav a:hover { color: var(--cl-ink); text-decoration: none; }
.cl-footer__btm {
  display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between;
  margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--cl-line);
  font-size: .75rem; color: var(--cl-ink-3);
}
.cl-footer p { margin: 10px 0 0; max-width: 34ch; font-size: .8125rem; color: var(--cl-ink-3); }

/* ------------------------------------------------------------------- motion */
/* Entrances, ambient light and micro-interactions live in motion.css, which
   loads after this file. This sheet owns layout and static appearance only —
   the page is complete and correct with the motion layer removed. */

.cl-compare__after { will-change: auto; }

/* --------------------------------------------------------------- responsive */

@media (max-width: 1040px) {
  .cl-studio { grid-template-columns: 1fr; gap: 16px; }
  /* Stacked, the preview pins just under the site header while you work the
     sliders below it — otherwise you would be adjusting something off-screen. */
  .cl-viewport { top: 70px; aspect-ratio: 16 / 10; max-height: 46vh; }
  .cl-viewport-track { min-height: auto; height: auto; }
  .cl-panel { max-height: none; }
  .cl-panel__body { overflow-y: visible; }
  .cl-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The nav collapses earlier than the page layout does: seven links plus two
   buttons stop fitting around 1080px, well before the content needs to stack. */
@media (max-width: 1080px) {
  .cl-nav__links, .cl-nav__actions .cl-btn--ghost { display: none; }
  .cl-nav__toggle { display: inline-flex; }
  /* 48px is the minimum comfortable touch target; the desktop 40px/41px
     sizing measured under 44-48px here since these are the only two
     tappable controls left in the sticky header on mobile. */
  .cl-nav__toggle { width: 48px; height: 48px; }
  .cl-nav__actions .cl-btn--primary { min-height: 48px; }
}

@media (max-width: 900px) {
  .cl-hero__grid { grid-template-columns: 1fr; }
  /* Headline first, then the product. Leading with the video showed a
     screenshot of a Windows app before saying what it was. */
  .cl-showcase { grid-template-columns: 1fr; }
  .cl-steps { grid-template-columns: 1fr; }
  .cl-group { grid-template-columns: 1fr; gap: 22px; }
  .cl-pricing { grid-template-columns: 1fr; }
  .cl-compat { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  :root { --cl-gutter: 18px; }
  /* The nav row is nowrap and cannot shrink, so at ~390px the wordmark plus a
     priced CTA plus the toggle and burger overflow the viewport. Drop the
     wordmark to the logo and the price from the button: both are restated
     immediately below in the hero. */
  .cl-brand span { display: none; }
  .cl-nav__price { display: none; }
  .cl-nav { gap: 12px; }
  .cl-hero__ctas .cl-btn { width: 100%; }
  .cl-shots__pair { grid-template-columns: 1fr; }
  .cl-specs { grid-template-columns: 1fr; }
  .cl-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cl-compare__tag { top: 10px; font-size: .625rem; padding: 5px 9px; }
  .cl-compare__tag--a { left: 10px; }
  .cl-compare__tag--b { right: 10px; }
  .cl-compare__grip { width: 36px; height: 36px; }
  .cl-q__a { padding-right: 8px; }
  .cl-frame { padding: 6px; border-radius: var(--cl-r-lg); }
  .cl-frame > video, .cl-frame > img { border-radius: calc(var(--cl-r-lg) - 6px); }
}