/* ============================================================
   ClipForge — Design tokens & components
   ------------------------------------------------------------
   Port-to-Tailwind: every var(--*) maps to theme.extend.colors
   or theme.extend.spacing in tailwind.config.
   ============================================================ */

:root {
  /* --- surfaces (cool bluer dark, per teal palette) */
  --page: #0A0E13;
  --panel: #121821;
  --panel-2: #1A2330;
  --panel-3: #1F2A38;
  --inset: #060A0F;

  /* --- brand · teal (3-stop gradient — gives surfaces depth instead of flat tint) */
  --brand-1: #14B8A6;          /* primary  */
  --brand-2: #0D9488;          /* pressed  */
  --brand-hover: #2DD4BF;      /* hover    */
  --brand-glow: #5EEAD4;       /* highlight / mint mid-stop in gradients */
  --brand-grad: linear-gradient(135deg, #2DD4BF 0%, #14B8A6 50%, #0D9488 100%);
  --brand-grad-soft: linear-gradient(135deg, rgba(94,234,212,.18) 0%, rgba(20,184,166,.08) 60%, transparent 100%);
  --text-shimmer: linear-gradient(120deg, #EEF2F6 0%, #5EEAD4 45%, #14B8A6 100%);
  --on-primary: #04342C;       /* text on teal surfaces */
  --accent-soft: rgba(20, 184, 166, .16);
  --accent-line: rgba(20, 184, 166, .42);
  --accent-glow: rgba(94, 234, 212, .55);
  --focus-ring: rgba(20, 184, 166, .35);

  /* --- accent yellow / amber (warnings + arrow-tip spark in mark) */
  --hook: #FFD60A;
  --hook-ink: #0A0E13;

  /* --- type (3-step + intermediate) */
  --ink:   #EEF2F6;            /* primary text */
  --ink-2: #C8CED6;            /* between primary + secondary */
  --ink-3: #9BA7B4;            /* secondary text */
  --ink-4: #66707C;            /* tertiary / hint text */

  /* --- lines (slightly cooler whites — sit naturally on bluer dark) */
  --hair: rgba(232, 240, 252, .07);
  --hair-2: rgba(232, 240, 252, .12);
  --hair-3: rgba(232, 240, 252, .18);

  /* --- semantic (state) */
  --ok: #34D399;               /* approved · score ≥85 */
  --warn: #F59E0B;             /* degraded · score 70–84 (same hue as logo spark) */
  --risk: #F87171;             /* rejected · score <70 */

  /* --- radii / shadow */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 14px;
  --r-xl: 20px;
  --shadow-soft: 0 1px 0 rgba(255,255,255,.05) inset, 0 24px 60px -24px rgba(0,0,0,.6);
  --shadow-card: 0 1px 0 rgba(255,255,255,.06) inset, 0 30px 80px -30px rgba(0,0,0,.7);
  --shadow-lift: 0 1px 0 rgba(255,255,255,.08) inset, 0 60px 120px -40px rgba(0,0,0,.8);

  /* --- type families */
  --sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'SF Pro Text', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

/* =========== reset =========== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--page);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  font-feature-settings: 'ss01', 'cv11';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
img, svg { display: block; }
::selection { background: var(--brand-1); color: var(--on-primary); }

/* =========== layout =========== */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}
.section { padding: 120px 0; position: relative; }
.section--tight { padding: 80px 0; }
.section--first { padding-top: 56px; }

.eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-1);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: '';
  width: 18px; height: 1px;
  background: var(--accent-line);
}

h1, h2, h3, h4 {
  font-family: var(--sans);
  letter-spacing: -0.025em;
  font-weight: 600;
  margin: 0;
  text-wrap: balance;
  color: var(--ink);
}
h1 {
  font-size: clamp(40px, 5.4vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 600;
}
h2 {
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.08;
}
h3 { font-size: 19px; line-height: 1.35; font-weight: 600; }
p { margin: 0; color: var(--ink-2); }
p.lead {
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 620px;
  text-wrap: pretty;
}
.mono { font-family: var(--mono); font-feature-settings: 'zero', 'ss01'; }
.tnum { font-variant-numeric: tabular-nums; }

/* =========== buttons =========== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 20px;
  border-radius: var(--r-md);
  font-weight: 500;
  font-size: 15px;
  border: 1px solid transparent;
  transition: transform .15s ease, box-shadow .25s ease, background .2s ease, border-color .2s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary {
  background: var(--brand-grad);
  color: var(--on-primary);
  font-weight: 600;
  box-shadow:
    0 1px 0 rgba(255,255,255,.30) inset,
    0 -1px 0 rgba(0,0,0,.20) inset,
    0 12px 32px -6px rgba(20,184,166,.55),
    0 0 0 1px rgba(94,234,212,.30);
  position: relative;
}
.btn--primary::before {
  /* outer halo ring — makes the CTA feel illuminated */
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: calc(var(--r-md) + 6px);
  background: radial-gradient(closest-side, rgba(94,234,212,.35), transparent 70%);
  filter: blur(8px);
  z-index: -1;
  opacity: .55;
  transition: opacity .25s ease;
  pointer-events: none;
}
.btn--primary:hover::before { opacity: 1; }
.btn--primary::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset;
  pointer-events: none;
}
.btn--primary:hover {
  box-shadow:
    0 1px 0 rgba(255,255,255,.32) inset,
    0 -1px 0 rgba(0,0,0,.20) inset,
    0 18px 44px -6px rgba(20,184,166,.7),
    0 0 0 1px rgba(94,234,212,.45);
}
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--hair-2);
}
.btn--ghost:hover { border-color: var(--hair-3); background: rgba(255,255,255,.02); }
.btn--lg { height: 56px; padding: 0 26px; font-size: 16px; border-radius: 14px; }
.btn .dot {
  display: none;
}

.fineprint {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--ink-3);
}

/* =========== nav =========== */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  background: rgba(15, 14, 16, .68);
  border-bottom: 1px solid var(--hair);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  gap: 24px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
}
.brand__wordmark {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.025em;
  display: inline-flex;
  align-items: baseline;
}
.brand__ship { color: var(--ink); }
.brand__reel {
  background: var(--text-shimmer);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.nav__links {
  display: flex; gap: 28px; align-items: center;
  font-size: 14px;
  color: var(--ink-2);
}
.nav__links a { transition: color .15s ease; }
.nav__links a:hover { color: var(--ink); }
.nav__cta { display: flex; align-items: center; gap: 16px; }
.nav__cta .btn { height: 38px; padding: 0 16px; font-size: 13.5px; }
.nav__cta .triallink {
  font-size: 13.5px;
  color: var(--ink-2);
  border-bottom: 1px solid var(--hair-2);
  padding-bottom: 1px;
  transition: color .15s, border-color .15s;
}
.nav__cta .triallink:hover { color: var(--ink); border-color: var(--brand-1); }

/* =========== hero =========== */
.hero {
  padding-top: 88px;
  padding-bottom: 110px;
  position: relative;
  overflow: hidden;
}
/* ===== hero atmosphere — multi-source teal lighting + top edge ===== */
.hero__glow {
  position: absolute;
  inset: -25% -15% auto auto;
  width: 1100px; height: 1100px;
  background:
    radial-gradient(closest-side, rgba(94,234,212,.32), rgba(20,184,166,.10) 40%, transparent 70%);
  filter: blur(10px);
  pointer-events: none;
  z-index: 0;
  animation: drift-glow 18s ease-in-out infinite alternate;
}
.hero__glow--2 {
  position: absolute;
  inset: 28% auto auto -15%;
  width: 720px; height: 720px;
  background:
    radial-gradient(closest-side, rgba(13,148,136,.38), rgba(13,148,136,.05) 50%, transparent 75%);
  filter: blur(20px);
  pointer-events: none;
  z-index: 0;
  animation: drift-glow 22s ease-in-out infinite alternate-reverse;
}
.hero::after {
  /* mint streak across the top: gives the page a 'lit' top edge */
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(94,234,212,.55) 30%, rgba(94,234,212,.55) 70%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}
@keyframes drift-glow {
  from { transform: translate(0,0) scale(1); opacity: 1; }
  to   { transform: translate(-30px, 20px) scale(1.06); opacity: .85; }
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 72px;
  align-items: start;
  position: relative;
  z-index: 1;
}
.hero__copy {
  padding-top: 12px;
  display: flex;
  flex-direction: column;
}
.hero__copy > .eyebrow { margin-bottom: 28px; }
.hero__copy h1 strong {
  font-weight: 600;
  background: var(--text-shimmer);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__copy .lead { margin-top: 28px; }
.hero__ctas {
  margin-top: 40px;
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
}
.hero__fine {
  margin-top: 20px;
  display: flex; flex-wrap: wrap; gap: 10px 18px;
}
.hero__fine span {
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--ink-3);
  letter-spacing: 0;
}
.hero__fine span + span::before {
  content: '·';
  margin-right: 18px;
  color: var(--ink-4);
}
.hero__trust {
  margin-top: 56px;
  display: flex; gap: 32px; flex-wrap: wrap;
  padding-top: 28px;
  border-top: 1px solid var(--hair);
}
.hero__trust .badge {
  display: inline-flex; gap: 10px; align-items: center;
  font-size: 13.5px; color: var(--ink-2);
}
.hero__trust .badge svg { color: var(--brand-1); }

/* hero visual: single Mac window as anchor + a small analysis attachment */
.hero__visual {
  position: relative;
  padding-top: 184px;           /* analysis callout sits fully clear above the window title bar */
  padding-right: 12px;
}
.hero__board { position: relative; z-index: 1; }
.hero__analysis {
  position: absolute;
  top: 0;
  right: 24px;
  width: 284px;
  z-index: 5;
  filter: drop-shadow(0 24px 40px rgba(0,0,0,.55));
}

/* =========== mac window =========== */
/* ===== mac window — top highlight gives the surface a 'lit' edge ===== */
.macwin {
  background: linear-gradient(180deg, var(--panel-2) 0%, var(--panel) 100%);
  border: 1px solid var(--hair-2);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  position: relative;
}
.macwin::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(94,234,212,.4) 50%, transparent 100%);
  z-index: 3;
  pointer-events: none;
}
.macwin__bar {
  height: 34px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  border-bottom: 1px solid var(--hair);
  background: linear-gradient(180deg, rgba(255,255,255,.025), transparent);
  gap: 12px;
}
.macwin__lights { display: flex; gap: 6px; }
.macwin__lights i {
  width: 11px; height: 11px; border-radius: 50%;
  display: block;
  box-shadow: 0 0 0 .5px rgba(0,0,0,.35) inset;
}
.macwin__lights i:nth-child(1) { background: #FF5F57; }
.macwin__lights i:nth-child(2) { background: #FEBC2E; }
.macwin__lights i:nth-child(3) { background: #28C840; }
.macwin__title {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-3);
  letter-spacing: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
}
.macwin__app {
  color: var(--ink-3);
  flex-shrink: 0;
}
.macwin__sep {
  color: var(--ink-4);
  flex-shrink: 0;
}
.macwin__file {
  color: var(--ink-2);
  font-weight: 500;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px;
}
.macwin__chip {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink-3);
  padding: 3px 9px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  background: var(--inset);
  white-space: nowrap;
  flex-shrink: 0;
}
.macwin__body { padding: 18px; }

/* =========== candidate board (used in hero + product preview) =========== */
.board {}
.board__head {
  display: grid;
  grid-template-columns: minmax(0,1fr) 56px 160px 78px 110px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-4);
  padding: 0 4px 12px;
  border-bottom: 1px solid var(--hair);
  gap: 14px;
}
.board__row {
  display: grid;
  grid-template-columns: minmax(0,1fr) 56px 160px 78px 110px;
  align-items: center;
  gap: 14px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--hair);
  transition: background .15s ease;
}

/* wide board variant — used in the product preview big window where horizontal space is plenty */
.board--wide .board__head,
.board--wide .board__row {
  grid-template-columns: minmax(0,1fr) 56px 130px 60px 104px;
  gap: 14px;
}
.macwin__body--board { padding: 12px 20px 8px; }

/* compact board variant — used inside the hero where horizontal space is tight */
.board--compact .board__head,
.board--compact .board__row {
  grid-template-columns: minmax(0,1fr) 56px 90px;
  gap: 12px;
}
.board--compact .board__head > div:nth-child(3),
.board--compact .board__row > div:nth-child(3),
.board--compact .board__head > div:nth-child(4),
.board--compact .board__row > div:nth-child(4) { display: none; }
.board--compact .board__head > div:last-child,
.board--compact .board__row > div:last-child { justify-self: end; }
.board__row:last-child { border-bottom: 0; }
.board__row:hover { background: rgba(255,255,255,.02); }
.board__title {
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0;
}
.board__title strong {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: -0.01em;
}
.board__time {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: .02em;
  white-space: nowrap;
}
.board__score {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink);
}
.board__score b { font-weight: 600; }
.board__scorebars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.board__platforms {
  display: flex; gap: 4px;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--ink-3);
}
.board__platforms span {
  padding: 3px 6px;
  border: 1px solid var(--hair);
  border-radius: 4px;
}
.board__status {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--hair-2);
  text-align: center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-self: start;
  white-space: nowrap;
  color: var(--ink-2);
  background: transparent;
}
.board__status::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: .9;
}
.status--ready { color: var(--ink); }
.status--ready::before { background: var(--ink-2); }
.status--intro { color: var(--ink-3); }
.status--intro::before { background: var(--ink-4); box-shadow: inset 0 0 0 1px var(--ink-3); background: transparent; }
.status--missing { color: var(--ink-3); }
.status--missing::before { background: var(--risk); opacity: .7; }

/* scorebar mini */
.sb {
  height: 5px; border-radius: 2px;
  background: rgba(255,255,255,.06);
  position: relative; overflow: hidden;
}
.sb i {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--brand-grad);
  border-radius: 2px;
}
.sb--ok i { background: linear-gradient(90deg, #34D399, #10B981); }
.sb--warn i { background: linear-gradient(90deg, #F59E0B, #D97706); }

/* =========== clip card (9:16) =========== */
.clip {
  width: 100%;
  aspect-ratio: 9 / 16;
  background: #1b1820;
  border-radius: 14px;
  border: 1px solid var(--hair-2);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* clip thumbnail bg — intentionally NEUTRAL (no teal tint).
   Video frames are real imagery; tinting them feels fake. */
.clip__bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(at 30% 25%, rgba(255,255,255,.10), transparent 55%),
    radial-gradient(at 80% 80%, rgba(255,255,255,.05), transparent 60%),
    linear-gradient(180deg, #2A2E36, #0E1116);
}
.clip__bg::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 6px 6px, 13px 13px;
  background-position: 0 0, 3px 3px;
  mix-blend-mode: overlay;
  opacity: .5;
}
.clip__hook {
  position: relative;
  margin: 16px;
  background: var(--hook);
  color: var(--hook-ink);
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  align-self: flex-start;
  max-width: 80%;
  box-shadow: 0 8px 18px -4px rgba(255,214,10,.35);
  transform: rotate(-1.5deg);
}
.clip__hook::after {
  content: '';
  position: absolute;
  left: 14px; bottom: -4px;
  width: 10px; height: 10px;
  background: var(--hook);
  transform: rotate(45deg);
}
.clip__caption {
  margin-top: auto;
  padding: 0 14px 16px;
  position: relative;
  display: flex; flex-direction: column; gap: 4px;
  align-items: center;
}
.clip__caption b {
  font-size: 11px;
  background: rgba(0,0,0,.7);
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  text-align: center;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.3;
}
.clip__caption b em {
  font-style: normal;
  background: var(--hook);
  color: var(--hook-ink);
  padding: 1px 4px;
  border-radius: 2px;
}
.clip__chrome {
  position: absolute;
  top: 10px; right: 10px;
  display: flex; align-items: center; gap: 5px;
  font-family: var(--mono);
  font-size: 9px;
  color: rgba(255,255,255,.75);
  background: rgba(0,0,0,.4);
  padding: 3px 6px;
  border-radius: 3px;
  letter-spacing: .04em;
}
.clip__chrome i {
  width: 5px; height: 5px; border-radius: 50%;
  background: #FF5F57;
  box-shadow: 0 0 6px #FF5F57;
}
.clip__avatar {
  position: absolute;
  left: 50%; top: 38%;
  transform: translateX(-50%);
  width: 64px; height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3A4250, #1A2028);
  border: 1px solid var(--hair-2);
  display: grid; place-items: center;
  color: rgba(255,255,255,.75);
  font-family: var(--mono);
  font-size: 13px;
}
.clip__waveform {
  position: absolute;
  left: 10px; right: 10px;
  bottom: 56px;
  display: flex; gap: 2px; align-items: flex-end;
  height: 20px;
  opacity: .6;
}
.clip__waveform i {
  flex: 1;
  background: rgba(255,255,255,.5);
  border-radius: 1px;
}

/* clip review variant — hook + caption only */
.clip--review { aspect-ratio: 9 / 15; }
.clip--review .clip__hook { margin: 14px 14px 0; }
.clip--review .clip__caption b { font-size: 10.5px; padding: 3px 7px; }

.controls__export {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--ink-2);
}

/* =========== analysis card (compact, hero attachment) =========== */
.analysis {
  background: var(--panel-2);
  border: 1px solid var(--hair-2);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
  position: relative;
}
.analysis::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: var(--brand-grad);
  opacity: .8;
}
.analysis__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 16px 10px;
  gap: 12px;
  white-space: nowrap;
}
.analysis__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-1);
  white-space: nowrap;
}
.analysis__eyebrow i {
  width: 6px; height: 6px;
  background: var(--brand-1);
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--accent-soft);
  animation: pulse-dot 2.2s ease-in-out infinite;
}
.analysis__candidate {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-4);
  letter-spacing: .04em;
  white-space: nowrap;
}
.analysis__score {
  display: flex; align-items: center; gap: 14px;
  padding: 2px 18px 14px;
  border-bottom: 1px solid var(--hair);
}
.analysis__num {
  font-size: 38px;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  font-family: var(--mono);
  color: var(--ink);
  background: var(--text-shimmer);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.analysis__scoremeta {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
}
.analysis__label {
  font-size: 13px;
  color: var(--ink);
  font-weight: 500;
}
.analysis__delta {
  font-family: var(--sans);
  font-size: 11.5px;
  color: var(--ink-3);
}
.analysis__detail {
  padding: 10px 18px 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.analysis__detail > div {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12.5px;
  gap: 12px;
  white-space: nowrap;
}
.analysis__detail > div > span:first-child { color: var(--ink-3); }
.analysis__detail > div > span:last-child { color: var(--ink); }
.analysis__detail .ok { color: var(--ok); font-weight: 500; }
.analysis__detail .mono { font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); letter-spacing: .02em; }

/* =========== privacy mac diagram =========== */
.privacy {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 72px;
  align-items: center;
}
.privacy__copy h2 strong {
  background: var(--text-shimmer);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.privacy__points {
  margin-top: 24px;
  display: flex; flex-direction: column; gap: 14px;
}
.privacy__points li {
  display: flex; align-items: flex-start; gap: 12px;
  list-style: none;
  font-size: 14.5px;
  color: var(--ink-2);
}
.privacy__points li svg {
  flex: 0 0 18px;
  margin-top: 3px;
  color: var(--brand-1);
}
.privacy__points {  padding: 0; }

.macdiagram {
  position: relative;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(20,184,166,.10), transparent 60%),
    var(--panel);
  border: 1px solid var(--hair-2);
  border-radius: 18px;
  padding: 28px 28px 36px;
  overflow: hidden;
}
.macdiagram::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}
.macdiagram__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 18px;
  position: relative;
  z-index: 2;
}
.macdiagram__label::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand-1);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* horizontal 3-card flow */
.flowdiagram {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  position: relative;
  z-index: 2;
}
.flowcard {
  background: var(--panel-2);
  border: 1px solid var(--hair-2);
  border-radius: 12px;
  padding: 18px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  min-width: 0;
}
.flowcard__tag-wrap {
  margin-top: auto;
  padding-top: 12px;
}
.flowcard__icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  display: grid;
  place-items: center;
  color: var(--brand-1);
  margin-bottom: 6px;
}
.flowcard__step {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.flowcard__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.flowcard__sub {
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.45;
  margin-top: 2px;
}
.flowcard__tag {
  margin-top: auto;
  align-self: flex-start;
  font-size: 10.5px;
  letter-spacing: 0.05em;
  font-weight: 500;
  color: var(--brand-1);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  padding: 3px 8px;
  border-radius: 999px;
}

/* arrow connectors between cards */
.flowdiagram > .flowcard:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -11px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-top: 1.5px solid var(--accent-line);
  border-right: 1.5px solid var(--accent-line);
  transform: translateY(-50%) rotate(45deg);
  z-index: 3;
}

/* opt-in cloud branch */
.cloudbranch {
  margin-top: 28px;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 0;
  align-items: stretch;
  max-width: 460px;
  margin-left: auto;
  margin-right: 0;
}
.cloudbranch__line {
  width: 100%;
  height: 100%;
  min-height: 76px;
  align-self: stretch;
  overflow: visible;
}
.cloudbranch__card {
  background: var(--inset);
  border: 1px dashed var(--accent-line);
  border-radius: 12px;
  padding: 14px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cloudbranch__head {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.cloudbranch__head svg { color: var(--brand-1); }
.cloudbranch__tag {
  display: inline-flex;
  align-self: flex-start;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--brand-1);
  background: var(--accent-soft);
  padding: 2px 8px;
  border-radius: 999px;
  margin-bottom: 4px;
}
.cloudbranch__note {
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.5;
}
.cloudbranch__note--strong {
  color: var(--ink);
  font-weight: 500;
}

@media (max-width: 720px) {
  .macdiagram { padding: 22px 18px 28px; }
  .flowdiagram { grid-template-columns: 1fr; gap: 12px; }
  .flowdiagram > .flowcard:not(:last-child)::after {
    right: 50%;
    top: auto;
    bottom: -12px;
    transform: translateX(50%) rotate(135deg);
  }
  .cloudbranch { grid-template-columns: 40px 1fr; max-width: none; }
  .cloudbranch__line { height: 60px; }
}

/* =========== pain points =========== */
.pains {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 56px;
}
.pain {
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  padding: 28px;
  position: relative;
  overflow: hidden;
}
.pain__num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--ink-4);
  text-transform: uppercase;
  margin-bottom: 16px;
}
.pain h3 { margin-bottom: 10px; }
.pain p { font-size: 14px; line-height: 1.5; }
.pain__viz {
  margin-top: 22px;
  height: 156px;
  border-radius: 10px;
  background: var(--inset);
  border: 1px solid var(--hair);
  position: relative;
  overflow: hidden;
}

/* viz: missing setup — podcast quote with dimmed prior context (no red strikethrough) */
.viz-context {
  padding: 14px;
  font-family: var(--sans);
  font-size: 11.5px;
  line-height: 1.65;
  color: var(--ink-3);
  letter-spacing: -0.005em;
}
.viz-context .fade {
  color: var(--ink-4);
  opacity: .55;
}
.viz-context .keep {
  color: var(--ink);
  background: rgba(20,184,166,.10);
  padding: 1px 4px;
  border-radius: 3px;
  font-style: italic;
}
.viz-context__note {
  margin-top: 8px;
  font-family: var(--sans);
  font-size: 10.5px;
  color: var(--ink-4);
  letter-spacing: 0.03em;
}

/* viz: weak hooks — retention plummet */
.viz-retention { padding: 14px; }
.viz-retention svg { width: 100%; height: 100%; display: block; }

/* viz: manual review */
.viz-review {
  padding: 14px;
  display: flex; flex-direction: column; gap: 5px;
  font-family: var(--mono);
  font-size: 10.5px;
}
.viz-review > div {
  display: flex; justify-content: space-between; align-items: center;
  padding: 5px 8px;
  border: 1px solid var(--hair);
  border-radius: 4px;
  color: var(--ink-3);
  background: rgba(255,255,255,.015);
}
.viz-review > div span:last-child { color: var(--ink-4); }
.viz-review > div:nth-child(2) { color: var(--ink-2); border-color: var(--hair-2); }
.viz-review .tag {
  font-size: 9px;
  padding: 2px 5px;
  border-radius: 3px;
  background: var(--inset);
  border: 1px solid var(--hair);
}

/* =========== workflow pipeline =========== */
.pipeline {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  position: relative;
}
.pipeline__step {
  padding: 20px 18px 22px;
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: var(--r-md);
  position: relative;
  display: flex; flex-direction: column; gap: 6px;
  margin-right: -1px;
  z-index: 1;
}
.pipeline__step:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -10px; top: 50%;
  width: 20px; height: 20px;
  background: var(--page);
  border: 1px solid var(--hair-2);
  border-radius: 50%;
  transform: translateY(-50%);
  z-index: 2;
  background-image:
    linear-gradient(45deg, transparent 47%, var(--brand-1) 47% 53%, transparent 53%),
    linear-gradient(-45deg, transparent 47%, var(--brand-1) 47% 53%, transparent 53%);
  background-size: 60% 60%, 60% 60%;
  background-position: 60% 50%, 60% 50%;
  background-repeat: no-repeat;
}
.pipeline__step .num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--brand-1);
}
.pipeline__step h4 {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.pipeline__step p {
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.5;
}
.pipeline__step .chip {
  margin-top: 4px;
  display: inline-flex; align-self: flex-start;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .04em;
  padding: 3px 7px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--brand-1);
  border-radius: 999px;
}
.pipeline__summary {
  margin-top: 32px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink-2);
  letter-spacing: .01em;
  text-align: center;
  padding: 14px 20px;
  background: var(--inset);
  border: 1px solid var(--hair);
  border-radius: 999px;
  display: inline-block;
  margin: 32px auto 0;
}
.pipeline__summary b { color: var(--ink); font-weight: 600; }
.pipeline__summary-wrap { text-align: center; }

/* =========== product preview windows =========== */
.preview {
  margin-top: 56px;
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 24px;
  align-items: start;
}
.preview__import { grid-column: 1 / -1; min-width: 0; }
.preview__cands  { grid-column: 1; min-width: 0; }
/* the clip editor is naturally tall — give it the full-height right column */
.preview__clipx {
  grid-column: 2;
  align-self: stretch;
  display: flex; flex-direction: column;
}
.preview__clipx .macwin__body--clipx { flex: 1 1 auto; display: flex; flex-direction: column; }
.preview__clipx .clipx { flex: 1; }
.preview__clipx .clipx__body { flex: 1; }

/* clip review window */
.review {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 18px;
  align-items: stretch;
}
.review__player {
  background: var(--inset);
  border-radius: 12px;
  border: 1px solid var(--hair);
  padding: 12px;
  display: flex; flex-direction: column; gap: 10px;
  min-height: 280px;
}
.review__player .clip { aspect-ratio: 9 / 16; }
.review__player .controls {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-3);
}
.review__player .controls .play {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--brand-grad);
  display: grid; place-items: center;
  color: #fff;
}
.review__why {
  display: flex; flex-direction: column; gap: 12px;
}
.review__why h4 {
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-family: var(--mono);
  font-weight: 500;
  color: var(--brand-1);
  margin-bottom: 4px;
}
.review__why p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-2);
}
.review__why .fact {
  display: flex; gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  background: var(--inset);
  border-radius: 8px;
  border: 1px solid var(--hair);
}
.review__why .fact svg { color: var(--brand-1); margin-top: 2px; flex: 0 0 14px; }
.review__why .fact span { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.review__why .fact .mono { color: var(--ink-3); font-size: 11.5px; }

/* style memory window */
.memory {
  display: flex; flex-direction: column; gap: 10px;
  font-size: 12.5px;
}
.memory__row {
  display: grid;
  grid-template-columns: 130px 1fr;
  align-items: center;
  padding: 10px 12px;
  background: var(--inset);
  border: 1px solid var(--hair);
  border-radius: 8px;
  gap: 12px;
}
.memory__row .label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .04em;
  color: var(--ink-3);
  text-transform: uppercase;
}
.memory__row .val {
  display: flex; gap: 6px; align-items: center;
  color: var(--ink);
  font-size: 13px;
}
.memory__row .val .pip {
  display: inline-block;
  padding: 2px 7px;
  font-size: 11px;
  border: 1px solid var(--hair-2);
  border-radius: 999px;
  font-family: var(--mono);
  color: var(--ink-2);
}
.memory__row .val .pip--on {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--brand-1);
}
.memory__head {
  padding: 12px 14px;
  background: linear-gradient(180deg, var(--panel-3), transparent);
  border-bottom: 1px solid var(--hair);
  margin: -18px -18px 14px;
}
.memory__head .small {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-3);
  letter-spacing: .04em;
}
.memory__head b {
  display: block;
  font-size: 14px;
  color: var(--ink);
  margin-top: 2px;
  font-weight: 500;
}

/* =========== compare table =========== */
.compare {
  margin-top: 56px;
  background: var(--panel);
  border: 1px solid var(--hair-2);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.compare__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 22px 32px;
  border-bottom: 1px solid var(--hair);
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent);
}
.compare__head > div {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.compare__head > div:last-child {
  color: var(--brand-1);
  display: flex; align-items: center; gap: 8px;
}
.compare__head > div:last-child::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--brand-1);
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.compare__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--hair);
}
.compare__row:last-child { border-bottom: 0; }
.compare__row > div {
  padding: 22px 32px;
  font-size: 14.5px;
  display: flex; align-items: flex-start; gap: 12px;
  line-height: 1.45;
}
.compare__row > div:first-child {
  color: var(--ink-3);
  border-right: 1px solid var(--hair);
  position: relative;
}
.compare__row > div:first-child::before {
  content: '';
  width: 14px; height: 14px;
  margin-top: 4px;
  flex-shrink: 0;
  background: var(--inset);
  border: 1px solid var(--hair-2);
  border-radius: 50%;
}
.compare__row > div:last-child {
  color: var(--ink);
}
.compare__row > div:last-child::before {
  content: '';
  width: 14px; height: 14px;
  margin-top: 4px;
  flex-shrink: 0;
  background: var(--brand-grad);
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* =========== pricing =========== */
.pricing {
  margin-top: 56px;
  display: grid;
  grid-template-columns: 1fr;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.pricing__card {
  position: relative;
  background:
    radial-gradient(at 100% 0%, rgba(20,184,166,.16), transparent 50%),
    var(--panel-2);
  border: 1px solid var(--hair-2);
  border-radius: 20px;
  padding: 40px 44px;
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}
.pricing__card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(20,184,166,.4), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.pricing__head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
}
.pricing__head h3 {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.pricing__head p {
  font-size: 14px;
  color: var(--ink-3);
  margin-top: 6px;
}
.pricing__price {
  display: flex; align-items: baseline; gap: 6px;
  font-family: var(--mono);
  color: var(--ink);
}
.pricing__price .currency { font-size: 18px; color: var(--ink-2); }
.pricing__price .amount {
  font-size: 56px;
  font-weight: 600;
  letter-spacing: -0.04em;
  background: var(--text-shimmer);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pricing__price .unit {
  font-size: 12px;
  color: var(--ink-3);
  letter-spacing: .04em;
}
.pricing__features {
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 32px;
}
.pricing__features li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.5;
}
.pricing__features svg { color: var(--brand-1); margin-top: 2px; flex: 0 0 16px; }
.pricing__cta {
  margin-top: 32px;
  display: flex; flex-direction: column; gap: 10px;
  border-top: 1px solid var(--hair);
  padding-top: 28px;
}
.pricing__cta .btn { align-self: flex-start; }
.pricing__seal {
  position: absolute;
  top: 32px; right: 32px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 6px 10px;
  border: 1px solid var(--accent-line);
  background: var(--accent-soft);
  color: var(--brand-1);
  border-radius: 6px;
}

/* =========== byok / cloud enhance =========== */
.byok {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 64px;
  align-items: center;
}
.byok__copy h2 strong {
  background: var(--text-shimmer);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.byok__notes {
  margin-top: 24px;
  display: grid;
  gap: 14px;
}
.byok__notes div {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 14px;
  color: var(--ink-2);
}
.byok__notes svg { flex: 0 0 18px; color: var(--brand-1); margin-top: 2px; }

.byokcard__body { padding: 22px 22px 24px; }
.byokcard__row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px;
  background: var(--inset);
  border: 1px solid var(--hair);
  border-radius: 10px;
  margin-bottom: 8px;
}
.byokcard__row.is-selected {
  border-color: var(--accent-line);
  background: var(--accent-soft);
}
.byokcard__row .left { display: flex; align-items: center; gap: 12px; }
.byokcard__row .pname { font-size: 14px; color: var(--ink); font-weight: 500; }
.byokcard__row .pmodel { font-family: var(--mono); font-size: 11px; color: var(--ink-3); display: block; margin-top: 2px; }
.byokcard__row .radio {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 1px solid var(--hair-3);
  position: relative;
  flex-shrink: 0;
}
.byokcard__row.is-selected .radio { border-color: var(--brand-1); }
.byokcard__row.is-selected .radio::after {
  content: '';
  position: absolute; inset: 3px;
  border-radius: 50%;
  background: var(--brand-grad);
}
.byokcard__row .keystatus {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ok);
  letter-spacing: .04em;
}
.byokcard__row .keystatus--off { color: var(--ink-4); }
.byokcard__budget {
  margin-top: 16px;
  padding: 18px;
  background: var(--inset);
  border: 1px solid var(--hair);
  border-radius: 12px;
}
.byokcard__budget .top {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 12px;
}
.byokcard__budget .top b {
  font-size: 13px; color: var(--ink); font-weight: 500;
}
.byokcard__budget .top .nums {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink);
}
.byokcard__budget .top .nums .total { color: var(--ink-3); }
.byokcard__budget .bar {
  height: 6px;
  background: rgba(255,255,255,.06);
  border-radius: 3px;
  overflow: hidden;
}
.byokcard__budget .bar i {
  display: block;
  height: 100%;
  width: 36%;
  background: var(--brand-grad);
  border-radius: 3px;
}
.byokcard__budget .foot {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-3);
  letter-spacing: .04em;
  display: flex; justify-content: space-between;
}
.byokcard__note {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-4);
  letter-spacing: .03em;
  display: flex; align-items: center; gap: 8px;
}
.byokcard__note svg { color: var(--brand-1); }

/* =========== use cases =========== */
.cases {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.case {
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: 14px;
  padding: 28px;
  position: relative;
  overflow: hidden;
}
.case__icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  display: grid; place-items: center;
  color: var(--brand-1);
  margin-bottom: 18px;
}
.case h3 { font-size: 18px; font-weight: 600; }
.case p { margin-top: 10px; font-size: 14px; color: var(--ink-2); }
.case .stat {
  margin-top: 22px;
  display: flex; gap: 16px;
  padding-top: 18px;
  border-top: 1px dashed var(--hair-2);
}
.case .stat div { display: flex; flex-direction: column; }
.case .stat b {
  font-family: var(--mono);
  font-size: 18px;
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.case .stat span {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-4);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-top: 2px;
}

/* =========== receipt (before/after) =========== */
.receipt {
  margin: 56px auto 0;
  max-width: 720px;
  background: var(--panel-2);
  border: 1px solid var(--hair-2);
  border-radius: 14px;
  padding: 36px 40px;
  font-family: var(--mono);
  position: relative;
  box-shadow: var(--shadow-card);
  background-image: linear-gradient(180deg, transparent 24px, rgba(255,255,255,.015) 24px 25px, transparent 25px);
  background-size: 100% 28px;
}
.receipt::before, .receipt::after {
  content: '';
  position: absolute; left: 0; right: 0; height: 12px;
  background-image: radial-gradient(circle at 6px 6px, var(--page) 5px, transparent 5px);
  background-size: 16px 12px;
  background-repeat: repeat-x;
}
.receipt::before { top: -1px; }
.receipt::after { bottom: -1px; transform: scaleY(-1); }
.receipt__brand {
  text-align: center;
  font-size: 11px;
  letter-spacing: .3em;
  color: var(--ink-3);
  text-transform: uppercase;
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--hair-2);
  margin-bottom: 18px;
}
.receipt__brand b { color: var(--ink); }
.receipt__group { margin-bottom: 24px; }
.receipt__group:last-child { margin-bottom: 0; }
.receipt__label {
  font-size: 10.5px;
  letter-spacing: .14em;
  color: var(--brand-1);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.receipt__line {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 4px 0;
  font-size: 13px;
  color: var(--ink-2);
  border-bottom: 1px dotted rgba(255,255,255,.06);
}
.receipt__line:last-child { border-bottom: 0; }
.receipt__line b { color: var(--ink); font-weight: 600; }
.receipt__line .tot { color: var(--ok); }
.receipt__rule {
  border: 0;
  border-top: 1px dashed var(--hair-2);
  margin: 18px 0;
}

/* =========== system requirements =========== */
.sysreq {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  margin-top: 56px;
  align-items: start;
}
.sysreq__list { display: flex; flex-direction: column; gap: 0; }
.sysreq__list > div {
  display: grid;
  grid-template-columns: 160px 1fr;
  padding: 16px 0;
  border-bottom: 1px solid var(--hair);
  gap: 24px;
  align-items: center;
}
.sysreq__list > div:last-child { border-bottom: 0; }
.sysreq__list .key {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.sysreq__list .val { font-size: 14px; color: var(--ink); }

.models {
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: 12px;
  padding: 22px 24px;
}
.models h4 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 14px;
  font-weight: 500;
}
.models__row {
  display: grid;
  grid-template-columns: 1fr 70px 70px 100px;
  align-items: center;
  padding: 9px 0;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-2);
  border-bottom: 1px dashed var(--hair);
}
.models__row:last-child { border-bottom: 0; }
.models__row .name { color: var(--ink); }
.models__row .name.highlight { color: var(--brand-1); }
.models__row .size, .models__row .ram, .models__row .wer { text-align: right; }
.models__row.head {
  color: var(--ink-4);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--hair-2);
  padding-bottom: 8px;
  margin-bottom: 4px;
}

/* =========== FAQ =========== */
.faq {
  margin-top: 56px;
  display: flex; flex-direction: column;
  border-top: 1px solid var(--hair);
}
.faq details {
  border-bottom: 1px solid var(--hair);
}
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 24px 0;
  display: flex; justify-content: space-between; align-items: center;
  gap: 24px;
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid var(--hair-2);
  display: grid; place-items: center;
  color: var(--ink-2);
  flex-shrink: 0;
  transition: transform .25s ease, border-color .2s, color .2s;
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1;
}
.faq details[open] summary .icon {
  transform: rotate(45deg);
  border-color: var(--brand-1);
  color: var(--brand-1);
}
.faq__body {
  padding: 0 0 28px;
  max-width: 760px;
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.65;
}
.faq__body p + p { margin-top: 10px; }

/* =========== final CTA =========== */
.endcta {
  margin-top: 0;
  position: relative;
  text-align: center;
  padding: 140px 0 160px;
  overflow: hidden;
}
.endcta__glow {
  position: absolute;
  inset: 0 auto auto 50%;
  transform: translateX(-50%);
  width: 1400px; height: 800px;
  background:
    radial-gradient(ellipse at 50% 35%, rgba(94,234,212,.40) 0%, rgba(20,184,166,.18) 25%, rgba(13,148,136,.06) 50%, transparent 70%);
  filter: blur(10px);
  pointer-events: none;
}
.endcta__inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; }
.endcta h2 {
  font-size: clamp(36px, 4.4vw, 56px);
}
.endcta p { margin-top: 18px; font-size: 17px; color: var(--ink-2); }
.endcta .btn { margin-top: 36px; }
.endcta .fine { margin-top: 14px; }

/* =========== footer =========== */
.footer {
  border-top: 1px solid var(--hair);
  padding: 56px 0 72px;
  background: var(--inset);
}
.footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}
.footer__pitch { color: var(--ink-3); font-size: 13.5px; line-height: 1.6; max-width: 360px; margin-top: 14px; }
.footer__col h5 {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin: 0 0 18px;
  font-weight: 500;
}
.footer__col a {
  display: block;
  font-size: 13.5px;
  color: var(--ink-2);
  padding: 5px 0;
  transition: color .15s;
}
.footer__col a:hover { color: var(--ink); }
.footer__col a.is-emphasis {
  color: var(--brand-1);
  font-weight: 500;
}
.footer__bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding-top: 28px;
  border-top: 1px solid var(--hair);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-4);
  letter-spacing: .04em;
}

/* =========== hero stack overrides (must beat .analysis position:relative) =========== */
.hero__visual { position: relative; }
.hero__analysis.analysis {
  position: absolute;
  top: 0;
  right: 24px;
  width: 284px;
  z-index: 5;
  filter: drop-shadow(0 24px 40px rgba(0,0,0,.55));
}

/* leader pointer: drops from the callout, through the gap, toward candidate 03's column */
.hero__pointer {
  position: absolute;
  z-index: 6;
  top: 150px;
  right: 74px;
  width: 18px; height: 30px;
  color: var(--brand-glow);
  pointer-events: none;
  opacity: .9;
  filter: drop-shadow(0 2px 7px rgba(20,184,166,.55));
}

/* candidate 03 — selected/highlighted to anchor "candidate 03 / 10" */
.cands--hero .ct--sel .ct__thumb {
  border-color: var(--brand-1);
  box-shadow: 0 0 0 2px rgba(20,184,166,.6), 0 0 20px rgba(20,184,166,.3);
}
.cands--hero .ct--sel .ct__title { color: var(--brand-glow); }

/* =========== entrance =========== */
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
.rise {
  opacity: 1;
  animation: rise .9s cubic-bezier(.2,.7,.2,1) both;
}
.rise.d1 { animation-delay: .05s; }
.rise.d2 { animation-delay: .15s; }
.rise.d3 { animation-delay: .25s; }
.rise.d4 { animation-delay: .35s; }
.rise.d5 { animation-delay: .45s; }
.rise.d6 { animation-delay: .55s; }

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .55; transform: scale(.85); }
}
.pulse { animation: pulse-dot 2.2s ease-in-out infinite; }

@keyframes dash-move {
  to { background-position: 28px 0; }
}

/* =========== responsive =========== */
/* desktop container has extra side padding so the right edge of the main visual stays >= 48px from the viewport edge at narrow desktops */
@media (min-width: 960px) and (max-width: 1296px) {
  .container { padding: 0 48px; }
}

@media (max-width: 1280px) {
  .board__head, .board__row {
    grid-template-columns: minmax(0,1fr) 60px 140px 90px;
    gap: 12px;
  }
  .board__platforms { display: none; }
  .board__head > div:nth-of-type(4),
  .board__row > div:nth-of-type(4) { display: none; }
}
@media (max-width: 1180px) {
  .hero__grid { gap: 40px; }
}

@media (max-width: 960px) {
  .section { padding: 88px 0; }
  .hero { padding-top: 56px; padding-bottom: 80px; }
  .hero__grid {
    grid-template-columns: 1fr;
    gap: 64px;
  }
  .hero__visual { min-height: 480px; max-width: 540px; padding-top: 182px; }
  .hero__analysis { right: 0; width: 260px; }
  .hero__pointer { display: none; }
  .privacy { grid-template-columns: 1fr; gap: 40px; }
  .byok { grid-template-columns: 1fr; gap: 40px; }
  .preview {
    grid-template-columns: 1fr;
  }
  .preview__import, .preview__cands, .preview__clipx {
    grid-column: 1; grid-row: auto;
  }
  .pipeline { grid-template-columns: 1fr 1fr; gap: 12px; }
  .pipeline__step { margin-right: 0; }
  .pipeline__step::after { display: none; }
  .pricing__features { grid-template-columns: 1fr; }
  .sysreq { grid-template-columns: 1fr; gap: 32px; }
  .footer__top { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 720px) {
  .container { padding: 0 20px; }
  .nav__inner { height: 60px; }
  .nav__links { display: none; }
  .nav__cta .triallink { display: none; }
  .section { padding: 72px 0; }
  .hero { padding-top: 40px; padding-bottom: 64px; }
  h1 { font-size: 38px; letter-spacing: -.03em; }
  h2 { font-size: 28px; }
  p.lead { font-size: 16px; }

  .hero__visual { padding-top: 182px; min-height: 0; max-width: none; }
  .hero__analysis { width: 240px; right: 0; top: 0; }
  .hero__trust { margin-top: 36px; gap: 18px; }

  .pains, .cases { grid-template-columns: 1fr; }
  .pipeline { grid-template-columns: 1fr; }
  .pricing__card { padding: 28px 24px; }
  .pricing__seal { top: 20px; right: 20px; }
  .pricing__price .amount { font-size: 46px; }

  .compare__row { grid-template-columns: 1fr; }
  .compare__row > div { padding: 16px 20px; }
  .compare__row > div:first-child { border-right: 0; border-bottom: 1px dashed var(--hair); }
  .compare__head { display: none; }
  .compare__row > div::after {
    position: absolute; right: 20px;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-4);
  }
  .compare__row > div:first-child::after { content: 'Typical'; top: 14px; }
  .compare__row > div:last-child::after { content: 'ShipReel'; color: var(--brand-1); top: 14px; }
  .compare__row > div { position: relative; padding-top: 32px; }

  .review { grid-template-columns: 1fr; }
  .receipt { padding: 28px 24px; }
  .footer__top { grid-template-columns: 1fr; gap: 32px; }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: 12px; }

  .macwin__bar { height: 30px; }
  .macwin__title { font-size: 10.5px; }
  .macwin__chip { font-size: 9.5px; }
  .macwin__body { padding: 14px; }
  .board__head, .board__row { grid-template-columns: 1fr 70px 80px; gap: 8px; }
  .board__head > div:nth-child(3), .board__row > div:nth-child(3) { display: none; }
}

/* =========== the math · credit packs =========== */
.pricing__meter {
  margin: 16px 0 4px;
  padding-top: 16px;
  border-top: 1px dashed var(--hair);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: -0.01em;
  color: var(--brand-1);
}
.creditpacks { padding: 22px 22px 24px; }
.pack {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 16px;
  border: 1px solid var(--hair-2);
  border-radius: 12px;
  background: var(--panel-2);
  margin-bottom: 12px;
  position: relative;
}
.pack--best {
  border-color: var(--accent-line);
  background: var(--accent-soft);
}
.pack__flag {
  position: absolute;
  top: -9px; left: 16px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 600;
  color: #04140f;
  background: var(--brand-grad);
  padding: 3px 9px;
  border-radius: 6px;
}
.pack__left { display: flex; align-items: baseline; gap: 6px; }
.pack__amt { font-size: 22px; font-weight: 700; color: var(--ink); letter-spacing: -.02em; }
.pack__unit { font-size: 12px; color: var(--ink-3); }
.pack__meta {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
}
.pack__price {
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--brand-1);
  min-width: 48px;
  text-align: right;
}
.creditpacks__foot {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-4);
  text-align: center;
}

/* =========== diagram foot + formats panel =========== */
.macdiagram__foot {
  position: relative;
  z-index: 2;
  margin-top: 22px;
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.models .models__row.head { grid-template-columns: 120px 1fr; }
.models__row.fmt { grid-template-columns: 120px 1fr; }
.models__row .fmtval {
  text-align: right;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink);
}
.models__row.head .fmtval { font-size: 10px; color: var(--ink-4); }
.models__row .fmtval.highlight { color: var(--brand-1); }

/* ============================================================
   PRODUCT PREVIEW v2 — real app screens
   (1) Candidates grid  (2) Clip editor  (3) Credits
============================================================ */

/* ---------- shared toolbar in window bodies ---------- */
.appbar {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--hair);
}
.appbar__tabs { display: flex; align-items: center; gap: 18px; }
.appbar__tab {
  font-size: 13px; font-weight: 500; color: var(--ink-4);
  display: inline-flex; align-items: center; gap: 7px;
}
.appbar__tab .n {
  font-family: var(--mono); font-size: 11px; color: var(--ink-4);
}
.appbar__tab--on { color: var(--ink); }
.appbar__tab--on .n { color: var(--ink-3); }
.appbar__tab .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--brand-1);
}
.appbar__spacer { flex: 1; }
.appbtn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 12px; border-radius: 8px;
  font-size: 12.5px; font-weight: 500;
  border: 1px solid var(--hair-2); color: var(--ink-2);
  background: transparent; white-space: nowrap;
}
.appbtn svg { width: 13px; height: 13px; color: var(--ink-3); }
.appbtn--primary {
  background: var(--brand-1); color: var(--on-primary);
  border-color: transparent;
}
.appbtn--primary svg { color: var(--on-primary); }

/* ---------- (1) Candidates grid ---------- */
.macwin__body--cands { padding: 0; }
.cands {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding: 18px;
}
.ct { display: flex; flex-direction: column; gap: 9px; }
.ct__thumb {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--hair);
  background: #14110d;
}
/* low-saturation studio-portrait placeholder — warm key light + stylized bust (never a real photo) */
.ct__thumb::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(72% 42% at 50% 25%, rgba(255,236,206,.20), transparent 62%),
    linear-gradient(162deg, #322a20 0%, #20190f 56%, #100b07 100%);
}
.ct__thumb--v2::before { background: radial-gradient(72% 42% at 50% 25%, rgba(190,228,232,.18), transparent 62%), linear-gradient(162deg, #243038 0%, #18222a 56%, #0c1217 100%); }
.ct__thumb--v3::before { background: radial-gradient(72% 42% at 50% 25%, rgba(255,222,192,.18), transparent 62%), linear-gradient(162deg, #34271d 0%, #20160f 56%, #0f0a07 100%); }
.ct__thumb--v4::before { background: radial-gradient(72% 42% at 50% 25%, rgba(255,240,220,.18), transparent 62%), linear-gradient(162deg, #322c25 0%, #201b16 56%, #100d0a 100%); }
.ct__thumb--v5::before { background: radial-gradient(72% 42% at 50% 25%, rgba(214,232,212,.16), transparent 62%), linear-gradient(162deg, #2a322a 0%, #1a211a 56%, #0d110d 100%); }
.ct__thumb--v6::before { background: radial-gradient(72% 42% at 50% 25%, rgba(198,216,238,.16), transparent 62%), linear-gradient(162deg, #283039 0%, #181f27 56%, #0c1015 100%); }
.ct__face {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(22% 20% at 50% 33%, rgba(210,202,194,.6) 0%, rgba(210,202,194,.6) 42%, transparent 72%),
    radial-gradient(86% 66% at 50% 126%, rgba(210,202,194,.52) 0%, rgba(210,202,194,.52) 50%, transparent 74%);
}
.ct__thumb::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(125% 80% at 50% 22%, transparent 52%, rgba(0,0,0,.30) 100%);
}
/* real-portrait thumbnail — pre-cropped to the slot aspect, cover-fit fills the frame */
img.ct__slot {
  position: absolute; inset: 0; z-index: 1;
  display: block; width: 100%; height: 100%;
  object-fit: cover;
}
.ct__badge {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 500; color: var(--ink);
  padding: 3px 9px; border-radius: 999px;
  background: rgba(8,12,17,.72);
  border: 1px solid var(--hair-2);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.ct__badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
.ct__badge--strong {
  color: var(--brand-glow);
  border-color: var(--accent-line);
  background: rgba(20,184,166,.26);
}
.ct__badge--strong i { background: var(--ok); box-shadow: 0 0 6px rgba(52,211,153,.8); }
.ct__tc {
  position: absolute; bottom: 8px; left: 8px; z-index: 2;
  font-family: var(--mono); font-size: 10px; color: rgba(255,255,255,.82);
  letter-spacing: .01em; white-space: nowrap;
  padding: 2px 7px; border-radius: 6px;
  background: rgba(8,12,17,.6);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.ct__dur {
  position: absolute; bottom: 8px; right: 8px; z-index: 2;
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--mono); font-size: 10px; color: rgba(255,255,255,.86);
  padding: 2px 7px; border-radius: 6px;
  background: rgba(8,12,17,.6);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.ct__dur svg { width: 11px; height: 11px; opacity: .85; }
.ct__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(.9); z-index: 2;
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(8,12,17,.5);
  border: 1px solid rgba(255,255,255,.34);
  display: grid; place-items: center; color: #fff;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
}
.ct__play svg { width: 15px; height: 15px; margin-left: 2px; }
.ct__thumb:hover .ct__play { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.ct__title {
  font-size: 13px; font-weight: 500; color: var(--ink);
  line-height: 1.35; letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ct__teaser {
  display: flex; align-items: center; gap: 7px;
  font-size: 11px; color: var(--ink-4);
}
.ct__teaser span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-3); }
.ct__teaser b { font-family: var(--mono); font-weight: 400; color: var(--ink-4); white-space: nowrap; flex: 0 0 auto; }
.ct__teaser svg { width: 12px; height: 12px; color: var(--ink-4); flex: 0 0 12px; }

/* ---------- (2) Clip editor ---------- */
.macwin__body--clipx { padding: 0; }
.clipx { display: flex; flex-direction: column; }
.clipx__hd {
  display: flex; align-items: baseline; gap: 12px;
  padding: 16px 18px 14px;
}
.clipx__hd b { font-size: 16px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; flex: 0 0 auto; }
.clipx__hd .meta { font-family: var(--mono); font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.clipx__body { padding: 0 18px 14px; display: flex; flex-direction: column; gap: 14px; }

.clipx__struct { display: flex; flex-direction: column; gap: 8px; }
.clipx__structhd {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-4);
}
.clipx__structhd > span { white-space: nowrap; }
.clipx__structhd .total { color: var(--ink-2); }
.clipx__bar { display: flex; gap: 8px; }
.clipx__hook {
  flex: 0 0 78px;
  border: 1px dashed var(--hair-2); border-radius: 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 10px 6px; color: var(--ink-3);
}
.clipx__hook svg { width: 16px; height: 16px; color: var(--ink-3); }
.clipx__hook small { font-size: 10px; color: var(--ink-4); }
.clipx__hook b { font-size: 12px; color: var(--ink-2); font-weight: 500; }
.clipx__main {
  flex: 1; border: 1px solid var(--hair-2); border-radius: 8px;
  padding: 10px 12px; display: flex; flex-direction: column; gap: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent);
}
.clipx__mainhd { display: flex; justify-content: space-between; align-items: center; }
.clipx__mainhd b { font-size: 12.5px; color: var(--ink); font-weight: 600; white-space: nowrap; }
.clipx__mainhd .d { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.clipx__tagchip {
  align-self: flex-start;
  font-size: 11px; color: var(--ink-2);
  padding: 2px 9px; border: 1px solid var(--hair-2); border-radius: 6px;
}
.clipx__capbar {
  font-size: 11px; color: var(--ink-3);
  padding: 5px 9px; border: 1px solid var(--hair); border-radius: 6px;
  background: var(--inset);
}

.cx-sec { border: 1px solid var(--hair); border-radius: 12px; padding: 14px; background: rgba(255,255,255,.012); }
.cx-sec__hd { display: flex; align-items: flex-start; gap: 11px; }
.cx-num {
  flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--hair-2); display: grid; place-items: center;
  font-family: var(--mono); font-size: 11px; color: var(--ink-3); margin-top: 1px;
}
.cx-sec__ttl { flex: 1; min-width: 0; }
.cx-sec__ttl b { display: block; font-size: 14px; font-weight: 600; color: var(--ink); }
.cx-sec__ttl span { font-size: 12px; color: var(--ink-4); }
.cx-toggle {
  flex: 0 0 auto; width: 38px; height: 22px; border-radius: 999px;
  background: var(--brand-1); position: relative; margin-top: 1px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.18);
}
.cx-toggle i { position: absolute; top: 2px; left: 18px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.4); }

/* hook section */
.cx-hook { display: flex; gap: 12px; align-items: flex-start; margin-top: 12px; }
.cx-frames { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 0 0 auto; }
.cx-frames .row { display: flex; gap: 4px; }
.cx-frames .fr {
  width: 26px; height: 30px; border-radius: 4px;
  background: linear-gradient(165deg, #20303f, #0e151d);
  border: 1px solid var(--hair);
}
.cx-frames .fr--play { display: grid; place-items: center; color: var(--ink-2); }
.cx-frames .fr--play svg { width: 10px; height: 10px; margin-left: 1px; }
.cx-frames small { font-family: var(--mono); font-size: 10px; color: var(--ink-4); }
.cx-hook__txt { flex: 1; min-width: 0; }
.cx-hook__quote { font-size: 13px; color: var(--ink); line-height: 1.45; }
.cx-hook__src { font-size: 11px; color: var(--ink-4); margin-top: 6px; }

/* trim section */
.cx-trim { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-top: 14px; }
.cx-field { display: flex; align-items: center; gap: 10px; }
.cx-field > label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-4); }
.cx-step { display: inline-flex; align-items: center; border: 1px solid var(--hair-2); border-radius: 8px; overflow: hidden; background: var(--inset); }
.cx-step button { width: 30px; height: 34px; color: var(--ink-3); background: transparent; border: 0; font-size: 17px; line-height: 1; }
.cx-step button:hover { color: var(--ink); }
.cx-step .v { font-family: var(--mono); font-size: 14px; color: var(--ink); padding: 0 10px; min-width: 50px; text-align: center; }
.cx-trim__foot { display: flex; align-items: center; gap: 14px; flex-basis: 100%; }
.cx-playsrc {
  display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 14px; border-radius: 8px;
  border: 1px solid var(--hair-2); color: var(--ink-2); font-size: 12.5px; font-weight: 500;
}
.cx-playsrc svg { width: 11px; height: 11px; }
.cx-hint { font-size: 11.5px; color: var(--ink-4); }

/* tagline section */
.cx-tag { display: flex; gap: 16px; margin-top: 14px; }
.cx-tag__prev { flex: 0 0 96px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cx-tag__card {
  width: 96px; aspect-ratio: 9 / 16; border-radius: 8px;
  background: linear-gradient(170deg, #11161d, #05070a);
  border: 1px solid var(--hair-2);
  display: flex; align-items: flex-start; padding: 12px 10px;
}
.cx-tag__card b { font-size: 12px; font-weight: 700; color: #fff; line-height: 1.25; text-wrap: balance; }
.cx-tag__prev small { font-family: var(--mono); font-size: 10px; color: var(--ink-4); }
.cx-tag__list { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.cx-opt { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border: 1px solid var(--hair); border-radius: 9px; }
.cx-opt .r { flex: 0 0 15px; width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid var(--hair-3); position: relative; }
.cx-opt .ltr { font-family: var(--mono); font-size: 11px; color: var(--ink-4); flex: 0 0 auto; }
.cx-opt .lbl { flex: 1; min-width: 0; font-size: 12.5px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-opt .pen { width: 13px; height: 13px; color: var(--ink-4); flex: 0 0 auto; }
.cx-opt--on { border-color: var(--accent-line); background: var(--accent-soft); }
.cx-opt--on .r { border-color: var(--brand-1); }
.cx-opt--on .r::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--brand-1); }
.cx-opt--on .ltr { color: var(--brand-1); }
.cx-opt--on .lbl { color: var(--ink); font-weight: 500; }
.cx-opt--on .lbl mark { background: rgba(20,184,166,.26); color: var(--ink); border-radius: 2px; }
.cx-tag__foot { font-size: 11px; color: var(--ink-4); margin-top: 2px; }

.clipx__foot {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 18px; border-top: 1px solid var(--hair);
}
.clipx__reset { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-4); }
.clipx__reset svg { width: 13px; height: 13px; }

/* ---------- (3) Credits ---------- */
.macwin__body--credits { padding: 18px; }
.credits { display: flex; flex-direction: column; gap: 16px; }
.cr-balance {
  display: flex; align-items: center; gap: 14px;
  padding: 16px; border: 1px solid var(--hair); border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent);
}
.cr-balance__ic {
  width: 42px; height: 42px; border-radius: 10px;
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  display: grid; place-items: center; color: var(--brand-1);
}
.cr-balance__ic svg { width: 20px; height: 20px; }
.cr-balance__n { flex: 1; }
.cr-balance__n b { font-size: 28px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; line-height: 1; }
.cr-balance__n span { display: block; font-size: 12px; color: var(--ink-4); margin-top: 4px; }
.cr-refresh { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--hair-2); color: var(--ink-2); font-size: 12.5px; }
.cr-refresh svg { width: 13px; height: 13px; }

.cr-how { padding: 14px; border: 1px solid var(--hair); border-radius: 12px; background: var(--inset); }
.cr-how__hd { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink); }
.cr-how__hd svg { width: 14px; height: 14px; color: var(--brand-1); }
.cr-how p { font-size: 12.5px; color: var(--ink-2); margin-top: 7px; }
.cr-chips { display: flex; gap: 8px; margin-top: 11px; flex-wrap: wrap; }
.cr-chip {
  font-family: var(--mono); font-size: 11.5px; color: var(--ink-2);
  padding: 4px 10px; border: 1px solid var(--hair-2); border-radius: 7px; background: rgba(255,255,255,.02);
  white-space: nowrap;
}
.cr-chip b { color: var(--brand-1); font-weight: 600; }
.cr-how__fine { font-size: 11px; color: var(--ink-4); margin-top: 11px; }

.cr-buy__hd { font-size: 14px; font-weight: 600; color: var(--ink); }
.cr-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; }
.cr-tier { border: 1px solid var(--hair-2); border-radius: 12px; padding: 15px 14px; display: flex; flex-direction: column; gap: 4px; }
.cr-tier--best { border-color: var(--accent-line); background: linear-gradient(180deg, rgba(20,184,166,.10), transparent); }
.cr-tier__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cr-tier__qty { font-size: 20px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
.cr-best { font-size: 10px; font-weight: 600; letter-spacing: .04em; color: var(--brand-1); padding: 2px 8px; border: 1px solid var(--accent-line); border-radius: 999px; white-space: nowrap; }
.cr-tier__name { font-size: 12px; color: var(--ink-4); }
.cr-tier__price { font-size: 17px; font-weight: 600; color: var(--ink); margin-top: 6px; }
.cr-tier__rate { font-family: var(--mono); font-size: 10.5px; color: var(--ink-4); display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.cr-tier__rate > span { white-space: nowrap; }
.cr-save { color: var(--ok); font-weight: 600; }
.cr-tier__buy {
  margin-top: 12px; height: 36px; border-radius: 8px;
  font-size: 13px; font-weight: 600; color: var(--ink-2);
  border: 1px solid var(--hair-2); background: transparent; width: 100%;
}
.cr-tier__buy--primary { background: var(--brand-1); color: var(--on-primary); border-color: transparent; }
.cr-fine { font-size: 11px; color: var(--ink-4); }
.cr-recent { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.cr-recent svg { width: 12px; height: 12px; color: var(--ink-4); }

@media (max-width: 1180px) {
  .cands { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
  .cands { grid-template-columns: repeat(2, 1fr); }
  .cr-tiers { grid-template-columns: 1fr; }
  .cx-tag { flex-direction: column; }
  .cx-tag__prev { flex-direction: row; align-items: center; }
}

/* ============================================================
   PRODUCT PREVIEW v3 — Import screen, appbar sort/views, hero cards
============================================================ */

/* ---------- candidates appbar: sort + view switcher ---------- */
.appbar { gap: 10px; flex-wrap: wrap; row-gap: 10px; }
.appbar__sort {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 11px; border-radius: 8px;
  border: 1px solid var(--hair); background: var(--inset);
  font-size: 12px; white-space: nowrap; color: var(--ink-3);
}
.appbar__sortk { color: var(--ink-4); }
.appbar__sortsep { color: var(--ink-4); }
.appbar__sortv { color: var(--ink-2); font-weight: 500; }
.appbar__sort svg { width: 13px; height: 13px; color: var(--ink-4); flex: 0 0 13px; }
.appbar__views {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 2px; border: 1px solid var(--hair-2); border-radius: 8px; background: var(--inset);
}
.appbar__right {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 10px;
  flex-wrap: nowrap; justify-content: flex-end;
}
.appbar__view {
  width: 28px; height: 26px; border-radius: 6px;
  display: grid; place-items: center; color: var(--ink-4);
  background: transparent; border: 0;
}
.appbar__view svg { width: 15px; height: 15px; }
.appbar__view--on { background: var(--panel-3); color: var(--ink); }
.appbar__view:hover { color: var(--ink-2); }

/* hide secondary view switcher only in the cramped 2-col band */
@media (min-width: 961px) and (max-width: 1264px) {
  .appbar__views { display: none; }
}

/* ---------- hero candidate grid ---------- */
.cands--hero { padding: 14px; gap: 12px; }
.cands--hero .ct { gap: 7px; }
.cands--hero .ct__title { font-size: 12px; }
.cands--hero .ct__teaser { font-size: 10px; }

/* ---------- Import window (workflow screen 1) ---------- */
.macwin__body--import { padding: 30px 34px 26px; }
.imp { display: flex; flex-direction: column; }
.imp__badge {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--brand-1);
  padding: 5px 11px; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--accent-line); background: var(--accent-soft);
}
.imp__badge svg { width: 13px; height: 13px; flex: 0 0 13px; }
.imp__title { font-size: 26px; font-weight: 600; letter-spacing: -0.025em; color: var(--ink); margin-top: 16px; }
.imp__sub { font-size: 14.5px; color: var(--ink-3); margin-top: 8px; max-width: 640px; }

.imp__file {
  margin-top: 22px;
  display: grid; grid-template-columns: 248px 1fr; gap: 24px;
  padding: 18px; border: 1px solid var(--hair); border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent);
}
.imp__thumb {
  position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--hair-2);
  background:
    radial-gradient(64% 64% at 62% 40%, rgba(255,236,206,.16), transparent 62%),
    linear-gradient(162deg, #2c322f 0%, #1a211f 56%, #0d1110 100%);
}
.imp__thumb::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(130% 80% at 56% 24%, transparent 50%, rgba(0,0,0,.34) 100%);
}
.imp__thumb .ct__face {
  background:
    radial-gradient(15% 36% at 62% 42%, rgba(210,202,194,.6) 0%, rgba(210,202,194,.6) 42%, transparent 72%),
    radial-gradient(42% 96% at 62% 150%, rgba(210,202,194,.52) 0%, rgba(210,202,194,.52) 50%, transparent 74%);
}
.imp__imported {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .12em;
  color: var(--ink); padding: 3px 8px; border-radius: 5px;
  background: rgba(8,12,17,.66); border: 1px solid var(--hair-2);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.imp__thumb .ct__dur { font-size: 10.5px; }
.imp__fileinfo { display: flex; flex-direction: column; min-width: 0; justify-content: center; }
.imp__name { font-size: 18px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.imp__when { font-size: 12.5px; color: var(--ink-4); margin-top: 3px; }
.imp__metagrid {
  margin-top: 16px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.imp__metagrid > div, .imp__audio { display: flex; flex-direction: column; gap: 4px; }
.imp__metagrid .k, .imp__audio .k {
  font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-4);
}
.imp__metagrid .v, .imp__audio .v { font-family: var(--mono); font-size: 14px; color: var(--ink); white-space: nowrap; }
.imp__audio { margin-top: 14px; }

.imp__opts {
  margin-top: 22px;
  padding: 22px; border: 1px solid var(--hair); border-radius: 14px;
  background: rgba(255,255,255,.012);
}
.imp__optshd { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.imp__optslabel {
  font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--brand-1); white-space: nowrap;
}
.imp__optsnote { font-size: 12px; color: var(--ink-4); }
.imp__optsnote b { color: var(--ink-2); font-weight: 600; }

.imp__selects { margin-top: 18px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.imp__field { display: flex; flex-direction: column; gap: 8px; }
.imp__field > label {
  font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-4);
}
.imp__field small { font-size: 11.5px; color: var(--ink-4); line-height: 1.4; }
.imp-select {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  height: 40px; padding: 0 12px; border-radius: 9px;
  border: 1px solid var(--hair-2); background: var(--inset);
  font-size: 13.5px; color: var(--ink); cursor: pointer;
}
.imp-select:hover { border-color: var(--hair-3); }
.imp-select svg { width: 15px; height: 15px; color: var(--ink-4); flex: 0 0 15px; }

.imp__toggles {
  margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--hair);
  display: grid; grid-template-columns: 1fr 1fr; gap: 28px 40px;
}
.imp__toggle { display: flex; flex-direction: column; gap: 12px; }
.imp__togglehd { display: flex; align-items: center; gap: 11px; }
.imp__togglehd b { font-size: 15px; font-weight: 600; color: var(--ink); }
.imp__toggle p { font-size: 12.5px; color: var(--ink-3); line-height: 1.5; margin: 0; }
.imp__field--inline { margin-top: 2px; }

.imp-seg {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--hair-2); border-radius: 9px; overflow: hidden; background: var(--inset);
}
.imp-seg button {
  height: 38px; border: 0; background: transparent; color: var(--ink-3);
  font-size: 13px; font-weight: 500; border-right: 1px solid var(--hair);
}
.imp-seg button:last-child { border-right: 0; }
.imp-seg button.on { background: var(--panel-3); color: var(--brand-1); font-weight: 600; }

.imp__foot {
  margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--hair);
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
}
.imp__credits { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-4); }
.imp__credits svg { width: 16px; height: 16px; color: var(--brand-1); }
.imp__credits b { color: var(--ink); font-weight: 600; }
.imp__actions { display: inline-flex; align-items: center; gap: 12px; }
.imp__actions .appbtn { height: 40px; padding: 0 20px; font-size: 13.5px; border-radius: 10px; }
.imp__actions .appbtn svg { width: 14px; height: 14px; }
.imp__actions .appbtn--primary svg { color: var(--on-primary); }

@media (max-width: 720px) {
  .macwin__body--import { padding: 22px 20px 20px; }
  .imp__file { grid-template-columns: 1fr; gap: 16px; }
  .imp__metagrid { grid-template-columns: repeat(2, 1fr); }
  .imp__selects { grid-template-columns: 1fr; }
  .imp__toggles { grid-template-columns: 1fr; gap: 22px; }
  .imp__title { font-size: 22px; }
}