/* ════════════════════════════════════════════════════════════════════
 * AutoViral Cloner — terminal/CRT theme
 * Layers on top of /assets/css/main.css and /assets/css/auth.css
 * (which already define .crt-overlay, .crt-scanline, .site-header,
 * .terminal-box/.terminal-header, .terminal-form/.terminal-input,
 * .terminal-btn, .terminal-prompt, etc.).
 *
 * What this file adds:
 *   1. Page-level layout for landing / dashboard (the existing site is
 *      single-screen splash + auth-only; we need scrolling pages)
 *   2. Pricing grid + how-it-works + FAQ components in terminal tone
 *   3. Dashboard sidebar + stat cards + tables, all monospaced
 *   4. Cloning illustration animations
 * ════════════════════════════════════════════════════════════════════
 */

/* ── Tokens (mirror homepage palette) ────────────────────────────── */
:root {
  --cn-bg: #000;
  --cn-bg-2: #0a0a0a;
  --cn-bg-3: #111;
  --cn-text: #fff;
  --cn-text-2: rgba(255,255,255,0.65);
  --cn-text-3: rgba(255,255,255,0.4);
  --cn-text-4: rgba(255,255,255,0.25);
  --cn-border: rgba(255,255,255,0.2);
  --cn-border-hi: rgba(255,255,255,0.45);
  --cn-blue: #35e57a;                  /* clonely signature terminal green (own identity) */
  --cn-blue-dim: rgba(53,229,122,0.4);
  --cn-green: #5eff5e;
  --cn-yellow: #ffeb6e;
  --cn-amber: #ffbd2e;                 /* terminal y-dot amber — used for Enterprise / API highlight */
  --cn-red: #ff6e6e;
  --cn-mono: 'Nimbus Mono', 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;
  /* ── Spacing scale (8px base) — consistent rhythm across the landing ── */
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;   --sp-7: 3rem;     --sp-8: 4.5rem; --sp-9: 6rem;
  --section-py: clamp(5rem, 13vh, 9rem);  /* 56→104px section padding */
  --section-gap: var(--sp-7);                /* 48px section header → body */
  --grid-gap: var(--sp-4);                   /* 16px card-grid gap */
  --card-pad: var(--sp-5);                   /* 24px card padding */
  --cn-glow-strong: 0 0 2px rgba(255,255,255,0.6), 0 0 10px rgba(255,255,255,0.3), 0 0 30px rgba(255,255,255,0.15);
  --cn-glow-blue:   0 0 2px var(--cn-blue), 0 0 10px rgba(53,229,122,0.3), 0 0 30px rgba(53,229,122,0.1);
  /* Layered ambient shadow for cards/blocks/stats. Three offsets:
   * tight contact + mid drop + wide diffuse — gives panels real lift
   * against the video backdrop without competing with the CRT vignette. */
  --cn-shadow-card:
    0 1px 0 rgba(255,255,255,0.05) inset,
    0 0 0 1px rgba(0,0,0,0.4),
    0 2px 4px rgba(0,0,0,0.6),
    0 12px 28px -8px rgba(0,0,0,0.7),
    0 24px 60px -12px rgba(0,0,0,0.5);
  --cn-shadow-card-hover:
    0 1px 0 rgba(255,255,255,0.07) inset,
    0 0 0 1px rgba(53,229,122,0.18),
    0 2px 4px rgba(0,0,0,0.6),
    0 16px 36px -10px rgba(0,0,0,0.75),
    0 32px 80px -16px rgba(0,0,0,0.6),
    0 0 32px rgba(53,229,122,0.08);
  --cn-shadow-featured:
    0 1px 0 rgba(53,229,122,0.2) inset,
    0 0 0 1px rgba(53,229,122,0.4),
    0 12px 32px -8px rgba(0,0,0,0.7),
    0 32px 80px -16px rgba(0,0,0,0.6),
    0 0 48px rgba(53,229,122,0.25);
}

/* ── Base — allow scrolling pages (homepage is fixed splash, ours scrolls) */
html, body {
  margin: 0;
  padding: 0;
  background: var(--cn-bg);
  color: var(--cn-text);
  font-family: var(--cn-mono);
  min-height: 100vh;
  overflow-x: hidden;
}
/* Override the homepage's `body { overflow: hidden }` for our scrollable pages */
body.cn-page { overflow-y: auto; height: auto; }

/* ── CRT overlay + scanline (ported from autoviralapp.com/) ────── */
.crt-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  /* Stacking order: video (0) < scanline (1) < overlay (2) < content (10+).
   * Content sits ABOVE the CRT effects so cards/text/buttons aren't
   * darkened by the vignette or striped by the scanline sweep. */
  z-index: 2;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.4),
    rgba(0, 0, 0, 0.4) clamp(1px, 0.2vw, 2px),
    transparent clamp(1px, 0.2vw, 2px),
    transparent clamp(3px, 0.4vw, 5px)
  );
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}
.crt-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 0%, transparent 50%,
    rgba(0,0,0,0.15) 70%, rgba(0,0,0,0.40) 85%, rgba(0,0,0,0.70) 100%
  );
}
.crt-overlay::after {
  content: '';
  position: absolute;
  top: -2%; left: -2%; width: 104%; height: 104%;
  border-radius: 50% / 8%;
  box-shadow:
    inset 0 0 80px 20px rgba(0,0,0,0.5),
    inset 0 0 20px 5px  rgba(0,0,0,0.3);
}
.crt-scanline {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 350px;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0),
    rgba(255,255,255,0.005),
    rgba(255,255,255,0.025)
  );
  z-index: 1;            /* between video (0) and content (10+) */
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.crt-scanline.active {
  opacity: 1; visibility: visible;
  animation: scanlineSweep 10s linear infinite;
}
@keyframes scanlineSweep {
  0%   { transform: translate3d(0, -350px, 0); opacity: 1; }
  12%  { transform: translate3d(0, 100vh,  0); opacity: 1; }
  20%  { opacity: 0; }
  20.001%, 100% { transform: translate3d(0, -350px, 0); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .crt-scanline.active { animation: none; opacity: 0; }
}

/* ── Background hero video (plays once, then holds last frame) ─── */
.cn-bg-video {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: #000;
  pointer-events: none;
  overflow: hidden;
}
.cn-bg-video video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%) translate3d(0, 0, 0);
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease;
  backface-visibility: hidden;
  will-change: opacity;
}
.cn-bg-video video.ready { opacity: 0.55; }    /* dimmed so content reads on top */
.cn-bg-video::after {
  /* extra vignette + dark veil so the white text + CRT overlay still pop */
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 0%, rgba(0,0,0,0.6) 80%, rgba(0,0,0,0.85) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.35) 40%, rgba(0,0,0,0.7) 100%);
  pointer-events: none;
}

* { box-sizing: border-box; font-family: var(--cn-mono) !important; }
a { color: inherit; }
button { font: inherit; }

/* Make body background transparent so the fixed bg-video shows through.
 * html stays black as the final fallback. */
body.cn-page { background: transparent; }

/* ── Top-level containers must layer above the bg video (z:0) ───── */
.cn-wrap, .cn-auth-wrap, .cn-dash, .cn-site-footer { position: relative; z-index: 10; }

/* ── Site header — minimal: logo left, single CTA right ─────────── */
.cn-site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem clamp(1rem, 3vw, 2rem);
  /* Solid-ish background instead of backdrop-blur: the sticky header sits
   * over the playing video, and re-blurring every video frame is a major
   * cause of intermittent jank. Higher opacity preserves the "frosted" feel. */
  background: rgba(0,0,0,0.92);
  box-shadow: 0 8px 24px -8px rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.04) inset;
}
.cn-site-header .cn-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--cn-text);
}
.cn-site-header .cn-logo img {
  height: 20px;
  width: auto;
  filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 3px rgba(255,255,255,0.5));
  animation: textFlicker 6s infinite;
}
/* Clonely text wordmark (replaces the old AV image mark) */
.cn-wordmark {
  font-family: var(--cn-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 1px;
  text-transform: lowercase;
  text-decoration: none;
  text-shadow: 0 0 1px #fff, 0 0 6px rgba(255,255,255,0.45);
}
.cn-wordmark .cn-wordmark-cursor {
  color: var(--cn-blue, #35e57a);
  margin-left: 1px;
  animation: cnCursorBlink 1.1s steps(1) infinite;
}
@keyframes cnCursorBlink { 0%,50% { opacity: 1; } 50.01%,100% { opacity: 0; } }
.cn-header-actions { display: flex; align-items: center; gap: 10px; }
.cn-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 999px;
  border: 1px solid var(--cn-border);
  background: rgba(255,255,255,0.04);
  color: var(--cn-text);
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.cn-icon-btn svg { width: 18px; height: 18px; display: block; }
.cn-icon-btn:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.35);
  color: var(--cn-blue);
  box-shadow: 0 0 0 1px rgba(53,229,122,0.25), 0 0 14px rgba(53,229,122,0.25);
}

@keyframes textFlicker {
  0%, 100% { opacity: 1; }
  2% { opacity: 0.8; }
  4% { opacity: 1; }
  20% { opacity: 1; }
  22% { opacity: 0.7; }
  24% { opacity: 1; }
}

/* ── Layout wrappers ─────────────────────────────────────────────── */
.cn-wrap { max-width: 1100px; margin: 0 auto; padding: 0 clamp(1rem, 3vw, 2rem); }
.cn-section { padding: clamp(40px, 8vh, 80px) 0; }
/* Skip rendering long sections that are off-screen — browser reclaims
 * paint/layout cost when they scroll into view. Hero is excluded so its
 * animations + ticker animate without LCP regression. */
.cn-section:not(.cn-hero) {
  content-visibility: auto;
  contain-intrinsic-size: 1px 600px;
}

.cn-prompt-line {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--cn-text-3);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 1rem;
}
.cn-prompt-line::before { content: '>'; color: var(--cn-blue); text-shadow: 0 0 4px var(--cn-blue); }

.cn-h1 {
  font-size: clamp(1.6rem, 5vw, 2.6rem);
  text-transform: uppercase;
  letter-spacing: clamp(1px, 0.3vw, 3px);
  line-height: 1.2;
  margin: 0 0 1rem;
  color: var(--cn-text);
  text-shadow:
    0 0 2px #fff,
    0 0 10px rgba(255,255,255,0.35),
    0 0 24px rgba(53,229,122,0.18),
    0 4px 16px rgba(0,0,0,0.7);
}
.cn-h2 {
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  text-transform: uppercase;
  letter-spacing: clamp(1px, 0.25vw, 2.5px);
  margin: 0 0 0.5rem;
  color: var(--cn-text);
  text-shadow: 0 0 2px #fff, 0 0 6px rgba(255,255,255,0.25);
}
.cn-h3 {
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin: 0 0 0.5rem;
  color: var(--cn-text);
}
.cn-lead {
  color: var(--cn-text-2);
  font-size: clamp(0.9rem, 1.5vw, 1rem);
  line-height: 1.7;
  max-width: 640px;
  margin: 0 auto 2rem;
}
.cn-mut { color: var(--cn-text-3); }

/* ── Terminal box (variant of the homepage's .terminal-box) ─────── */
.cn-box {
  background: rgba(5, 5, 5, 0.93);
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 2px;
  /* backdrop-filter removed for perf (was re-blurring on every video frame) */
  box-shadow:
    0 0 2px rgba(255,255,255,0.6),
    0 0 10px rgba(255,255,255,0.25),
    0 0 30px rgba(255,255,255,0.1),
    0 16px 40px -8px rgba(0,0,0,0.75),
    0 36px 90px -16px rgba(0,0,0,0.6),
    inset 0 0 60px rgba(0,0,0,0.9),
    inset 0 0 2px rgba(255,255,255,0.05);
  overflow: hidden;
}
.cn-box-head {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.02);
  /* 3-column grid keeps the title visually centered regardless of dots width */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.cn-box-title {
  color: var(--cn-text);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-shadow: 0 0 2px #fff, 0 0 6px rgba(255,255,255,0.4);
  text-align: center;
  justify-self: center;
}
.cn-box-body { padding: 1.25rem; }

/* ── Buttons (terminal style, matching auth.css's .terminal-btn) ── */
.cn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0.7rem 1.3rem;
  background: rgba(255,255,255,0.04);
  color: var(--cn-text);
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 2px;
  font-family: var(--cn-mono) !important;
  font-size: 0.8rem;
  text-transform: lowercase;
  letter-spacing: 1.5px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, color 0.15s;
}
.cn-btn {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 2px 4px rgba(0,0,0,0.4),
    0 6px 16px -4px rgba(0,0,0,0.5);
}
.cn-btn:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.7);
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.08) inset,
    0 4px 8px rgba(0,0,0,0.5),
    0 10px 28px -6px rgba(0,0,0,0.6),
    0 0 18px rgba(255,255,255,0.12);
}
.cn-btn:active { transform: translateY(0); }
.cn-btn-primary {
  background: rgba(53,229,122,0.08);
  border-color: var(--cn-blue);
  color: var(--cn-blue);
  text-shadow: 0 0 4px rgba(53,229,122,0.6);
  box-shadow:
    0 1px 0 rgba(53,229,122,0.18) inset,
    0 2px 4px rgba(0,0,0,0.4),
    0 6px 16px -4px rgba(0,0,0,0.5),
    0 0 16px rgba(53,229,122,0.12);
}
.cn-btn-primary:hover {
  background: rgba(53,229,122,0.18);
  color: #fff;
  box-shadow:
    0 1px 0 rgba(53,229,122,0.25) inset,
    0 4px 8px rgba(0,0,0,0.5),
    0 10px 28px -6px rgba(0,0,0,0.65),
    0 0 26px rgba(53,229,122,0.35);
}
.cn-btn-danger {
  background: rgba(255,110,110,0.06);
  border-color: rgba(255,110,110,0.5);
  color: var(--cn-red);
}
.cn-btn-danger:hover {
  background: rgba(255,110,110,0.12);
  box-shadow: 0 0 12px rgba(255,110,110,0.3);
}
.cn-btn-lg { padding: 0.9rem 1.6rem; font-size: 0.85rem; }
/* When used as a block-level button (in pricing cards, auth forms),
 * switch from inline-flex to block-level flex. Inline-flex on an
 * <a> element gets treated as an inline box by flex parents, which
 * was leaving the <a> "start free" button mis-aligned vs the
 * <button> "subscribe" buttons in the same column. Also normalize
 * text-align as a belt-and-suspenders. */
.cn-btn-block { display: flex; width: 100%; text-align: center; }
.cn-btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.cn-btn .arr { color: var(--cn-blue); text-shadow: 0 0 4px var(--cn-blue); margin-left: 2px; font-weight: 700; animation: cnCursorBlink 1.1s steps(1) infinite; }

/* Pill-style start-free button (in the header) — tighter than .cn-btn */
.cn-btn-pill {
  height: 38px;             /* match .cn-icon-btn so they line up in the header */
  padding: 0 1rem;
  font-size: 0.72rem;
  letter-spacing: 1.2px;
  border-radius: 999px;
}

/* ── Hero ────────────────────────────────────────────────────────── */
.cn-hero { text-align: center; padding-top: clamp(40px, 6vh, 64px); }
.cn-hero .cn-cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 1.5rem; }

/* Hero visual = row of 3 iPhones illustrating "one phone, many clones".
 * Flex row with the middle phone lifted up + the outer two tilted out
 * slightly — looks like a small product display, no motion required. */
.cn-hero-visual {
  position: relative;
  margin: 3rem auto 0;
  max-width: 720px;
  aspect-ratio: 18 / 5;          /* container ~200px tall at 720px wide → cuts phones near midline */
  max-height: 240px;
  /* Crop the BOTTOM only (hard emergence line) while letting the middle phone's
   * glow breathe ABOVE the box. overflow:hidden was clipping the top glow flat;
   * clip-path with a negative top inset keeps the bottom crop but reveals the
   * upward glow. */
  overflow: visible;
  clip-path: inset(-40px 0 0 0);
  display: flex;
  align-items: flex-start;       /* anchor tops; bottoms extend below + get clipped by clip-path */
  justify-content: center;
  gap: 0;
  padding: 0 clamp(0.5rem, 2vw, 1rem);
}
/* Glowing emergence line — sits flush with the crop edge */
.cn-hero-visual::after {
  content: '';
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 0;
  height: 1px;
  background: linear-gradient(to right,
    transparent 0%,
    rgba(53,229,122,0.0) 5%,
    rgba(53,229,122,0.85) 35%,
    rgba(255,255,255,0.95) 50%,
    rgba(53,229,122,0.85) 65%,
    rgba(53,229,122,0.0) 95%,
    transparent 100%);
  box-shadow: 0 0 6px rgba(53,229,122,0.55), 0 0 14px rgba(53,229,122,0.35);
  pointer-events: none;
  z-index: 3;
}
/* Each phone is a `slot` (gets float + glow + drop shadow + cropping container)
 * containing 10 stacked frames (img tags) that crossfade via opacity keyframes. */
.cn-hero-phone-slot {
  position: relative;
  width: 34%;
  max-width: 240px;
  aspect-ratio: 800 / 1338;     /* match phone PNG aspect so slot height = image height */
  flex-shrink: 0;
  filter:
    drop-shadow(0 0 1px rgba(255,255,255,0.4))
    drop-shadow(0 4px 12px rgba(0,0,0,0.6))
    drop-shadow(0 20px 40px rgba(0,0,0,0.5));
  will-change: transform, filter;
}
.cn-phone-slot-1 { margin-right: -3%; animation: cnPhoneFloatL 5.4s ease-in-out infinite; z-index: 1; --slot: 0s; }
.cn-phone-slot-2 { animation: cnPhoneGlow 3.2s ease-in-out infinite, cnPhoneFloatC 4.6s ease-in-out infinite; z-index: 2; --slot: -5s; }
.cn-phone-slot-3 { margin-left:  -3%; animation: cnPhoneFloatR 5.1s ease-in-out infinite; z-index: 1; --slot: -10s; }
@media (max-width: 600px) {
  .cn-phone-slot-1 { margin-right: -2%; }
  .cn-phone-slot-3 { margin-left:  -2%; }
}

/* Build-up screen: a static base + 8 overlays that fade in one at a time and
 * persist. After ~8s of stacking, all overlays fade out together then loop. */
.cn-phone-base,
.cn-phone-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: opacity;
}
.cn-phone-base { opacity: 1; z-index: 0; }
.cn-phone-overlay {
  opacity: 0;
  /* Each layer shares duration but has its own keyframe with a shifted fade-in
   * window. All 8 fade out together at the end of the cycle. `--slot` offset
   * gives each phone slot a different reset moment. */
  animation-duration: 12s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-delay: var(--slot, 0s);
}
.cn-phone-overlay.layer-1 { animation-name: cnLayer1; z-index: 1; }
.cn-phone-overlay.layer-2 { animation-name: cnLayer2; z-index: 2; }
.cn-phone-overlay.layer-3 { animation-name: cnLayer3; z-index: 3; }
.cn-phone-overlay.layer-4 { animation-name: cnLayer4; z-index: 4; }
.cn-phone-overlay.layer-5 { animation-name: cnLayer5; z-index: 5; }
.cn-phone-overlay.layer-6 { animation-name: cnLayer6; z-index: 6; }
.cn-phone-overlay.layer-7 { animation-name: cnLayer7; z-index: 7; }
.cn-phone-overlay.layer-8 { animation-name: cnLayer8; z-index: 8; }

/* Each layer: hidden until its fade-in window, fade in 0.4s, hold,
 * then all fade out together 11s–12s of the 12s cycle. */
@keyframes cnLayer1 {  0%, 8.3%  { opacity: 0; } 11.7%, 91.7% { opacity: 1; } 100% { opacity: 0; } }
@keyframes cnLayer2 {  0%, 16.7% { opacity: 0; } 20%,   91.7% { opacity: 1; } 100% { opacity: 0; } }
@keyframes cnLayer3 {  0%, 25%   { opacity: 0; } 28.3%, 91.7% { opacity: 1; } 100% { opacity: 0; } }
@keyframes cnLayer4 {  0%, 33.3% { opacity: 0; } 36.7%, 91.7% { opacity: 1; } 100% { opacity: 0; } }
@keyframes cnLayer5 {  0%, 41.7% { opacity: 0; } 45%,   91.7% { opacity: 1; } 100% { opacity: 0; } }
@keyframes cnLayer6 {  0%, 50%   { opacity: 0; } 53.3%, 91.7% { opacity: 1; } 100% { opacity: 0; } }
@keyframes cnLayer7 {  0%, 58.3% { opacity: 0; } 61.7%, 91.7% { opacity: 1; } 100% { opacity: 0; } }
@keyframes cnLayer8 {  0%, 66.7% { opacity: 0; } 70%,   91.7% { opacity: 1; } 100% { opacity: 0; } }

@keyframes cnPhoneFloatL {
  0%, 100% { transform: rotate(-5deg) translateY(0); }
  50%      { transform: rotate(-7deg) translateY(10px); }
}
@keyframes cnPhoneFloatC {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(14px); }
}
@keyframes cnPhoneFloatR {
  0%, 100% { transform: rotate(5deg)  translateY(0); }
  50%      { transform: rotate(7deg)  translateY(10px); }
}

@keyframes cnPhoneGlow {
  0%, 100% {
    filter:
      drop-shadow(0 0 2px  rgba(53,229,122,0.30))
      drop-shadow(0 0 14px rgba(53,229,122,0.18))
      drop-shadow(0 6px 14px rgba(0,0,0,0.7))
      drop-shadow(0 28px 56px rgba(0,0,0,0.55));
  }
  50% {
    filter:
      drop-shadow(0 0 4px  rgba(53,229,122,0.55))
      drop-shadow(0 0 28px rgba(53,229,122,0.38))
      drop-shadow(0 6px 14px rgba(0,0,0,0.7))
      drop-shadow(0 28px 56px rgba(0,0,0,0.55));
  }
}
@media (prefers-reduced-motion: reduce) {
  .cn-phone-slot-1,
  .cn-phone-slot-2,
  .cn-phone-slot-3 { animation: none; }
  .cn-phone-slot-1 { transform: rotate(-5deg); }
  .cn-phone-slot-3 { transform: rotate(5deg); }
  /* Reduced-motion users see the final built-up state: base + all overlays */
  .cn-phone-overlay { animation: none; opacity: 1; }
}
@media (max-width: 600px) {
  .cn-hero-visual { max-width: 100%; }
}

/* Cloning illustration: source phone pulses, clones fan out + return */
.clone-source { animation: cloneSrc 4s ease-in-out infinite; transform-origin: center; }
.clone-target { opacity: 0; animation: cloneTgt 4s ease-in-out infinite; transform-origin: center; }
.clone-target:nth-child(2) { animation-delay: 0.4s; }
.clone-target:nth-child(3) { animation-delay: 0.6s; }
.clone-target:nth-child(4) { animation-delay: 0.8s; }
.clone-target:nth-child(5) { animation-delay: 1.0s; }
.clone-target:nth-child(6) { animation-delay: 1.2s; }
.clone-target:nth-child(7) { animation-delay: 1.4s; }
.clone-link { stroke-dasharray: 4 4; animation: dashMove 2.4s linear infinite; }
@keyframes dashMove { to { stroke-dashoffset: -32; } }
@keyframes cloneSrc {
  0%, 100% { transform: translateY(0); filter: drop-shadow(0 0 6px rgba(53,229,122,0.5)); }
  50% { transform: translateY(-2px); filter: drop-shadow(0 0 14px rgba(53,229,122,0.8)); }
}
@keyframes cloneTgt {
  0%      { opacity: 0; transform: scale(0.7); }
  30%, 70%{ opacity: 1; transform: scale(1); }
  100%    { opacity: 0; transform: scale(0.7); }
}

/* ── Trust strip ─────────────────────────────────────────────────── */
/* Trust strip = horizontal "breaking news" ticker, sits flush below the
 * phone-divider line. Two duplicated tracks scroll infinitely; mask
 * fades at the edges hide the wrap seam. */
.cn-trust {
  margin-top: -1px;                                /* meet the phone divider */
  padding: 0.55rem 0;
  font-size: 0.7rem; letter-spacing: 2px; text-transform: uppercase;
  color: var(--cn-text-3);
  background: linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.4));
  border-top: 1px solid rgba(53, 229, 122, 0.18);
  border-bottom: 1px solid rgba(53, 229, 122, 0.18);
  box-shadow:
    inset 0 0 14px rgba(53, 229, 122, 0.06),
    0 6px 20px -8px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.cn-trust-track {
  display: inline-flex;
  align-items: center;
  gap: 2.5rem;
  white-space: nowrap;
  animation: cnTickerScroll 28s linear infinite;
  will-change: transform;
  padding-right: 2.5rem;       /* keep gap consistent across the seam */
}
.cn-trust-track > span { display: inline-flex; align-items: center; gap: 6px; }
.cn-trust-track > span::before {
  content: '[ok]';
  color: var(--cn-green);
  text-shadow: 0 0 4px var(--cn-green);
}
@keyframes cnTickerScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .cn-trust-track { animation: none; }
}

/* ── Pricing grid ────────────────────────────────────────────────── */
/* Fixed 3 columns × 2 rows on wide viewports for the 6-tier layout.
 * Falls back to 2 columns < 900px and 1 column < 600px. */
.cn-pricing {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 2.5rem;
}
@media (max-width: 900px) {
  .cn-pricing { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .cn-pricing { grid-template-columns: 1fr; }
}
.cn-price {
  background: rgba(10, 10, 10, 0.92);    /* bumped opacity since backdrop-blur removed */
  border: 1px solid var(--cn-border);
  border-radius: 2px;
  padding: 1.5rem 1.4rem;
  display: flex; flex-direction: column;
  position: relative;
  /* backdrop-filter removed for perf — pricing cards sit over the playing
   * video and re-blurring on every frame caused intermittent jank. */
  box-shadow: var(--cn-shadow-card);
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.cn-price:hover {
  border-color: rgba(255,255,255,0.45);
  transform: translateY(-4px);
  box-shadow: var(--cn-shadow-card-hover);
}
.cn-price.featured {
  border-color: var(--cn-blue);
  box-shadow: var(--cn-shadow-featured);
}
.cn-price.featured::before {
  content: '[ MOST POPULAR ]';
  position: absolute;
  top: -10px; left: 50%; transform: translateX(-50%);
  padding: 3px 14px;
  background: var(--cn-bg);
  color: var(--cn-blue);
  font-size: 0.6rem;
  letter-spacing: 2px;
  text-shadow: 0 0 4px var(--cn-blue);
  white-space: nowrap;
  border: 1px solid var(--cn-blue-dim);
  border-radius: 999px;
  z-index: 1;
}
.cn-price h3 {
  font-size: 0.7rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--cn-text-3);
  margin: 0 0 1rem;
}
.cn-price .cn-amount {
  font-size: 1.8rem;
  text-shadow: 0 0 4px rgba(255,255,255,0.4);
  margin: 0 0 0.25rem;
}
.cn-price .cn-amount .cn-per { color: var(--cn-text-3); font-size: 0.8rem; margin-left: 2px; }
.cn-price .cn-cap {
  color: var(--cn-blue);
  font-size: 0.75rem;
  letter-spacing: 1px;
  margin-bottom: 1rem;
  text-shadow: 0 0 4px rgba(53,229,122,0.4);
}
.cn-price ul { list-style: none; padding: 0; margin: 0 0 1.25rem; flex: 1; }
.cn-price li {
  font-size: 0.78rem;
  padding: 0.35rem 0;
  color: var(--cn-text-2);
  display: flex; gap: 8px;
}
.cn-price li::before { content: '>'; color: var(--cn-blue); text-shadow: 0 0 3px var(--cn-blue); }
.cn-price .cn-cta { margin-top: auto; }

/* Enterprise card: restrained amber accenting — premium feel without
 * shouting. Subtle warm gradient base, amber border + outer glow, an
 * [ ENTERPRISE ] badge (parallels MOST POPULAR), title + cap + CTA pick
 * up amber; price stays neutral so "custom" reads clean. */
.cn-price.enterprise {
  background:
    linear-gradient(180deg,
      rgba(40, 28, 6, 0.85) 0%,
      rgba(14, 10, 5, 0.92) 100%);
  border-color: rgba(255, 189, 46, 0.55);
  box-shadow:
    0 0 0 1px rgba(255, 189, 46, 0.12),
    0 0 28px -4px rgba(255, 145, 0, 0.25),
    0 18px 36px -10px rgba(0, 0, 0, 0.7);
}
.cn-price.enterprise:hover {
  border-color: var(--cn-amber);
  transform: translateY(-4px);
  box-shadow:
    0 0 0 1px rgba(255, 189, 46, 0.35),
    0 0 36px -4px rgba(255, 145, 0, 0.4),
    0 22px 48px -10px rgba(0, 0, 0, 0.8);
}
.cn-price.enterprise::before {
  content: '[ ENTERPRISE ]';
  position: absolute;
  top: -10px; left: 50%; transform: translateX(-50%);
  padding: 3px 14px;
  background: var(--cn-bg);
  color: var(--cn-amber);
  font-size: 0.6rem;
  letter-spacing: 2px;
  text-shadow: 0 0 4px rgba(255, 189, 46, 0.7);
  white-space: nowrap;
  border: 1px solid rgba(255, 189, 46, 0.6);
  border-radius: 999px;
  z-index: 1;
}
.cn-price.enterprise h3 {
  color: var(--cn-amber);
  text-shadow: 0 0 6px rgba(255, 189, 46, 0.4);
}
.cn-price.enterprise .cn-amount {
  color: var(--cn-text);
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.3);
}
.cn-price.enterprise .cn-amount .cn-per { color: var(--cn-text-3); }
.cn-price.enterprise .cn-cap {
  color: rgba(255, 189, 46, 0.85);
}
.cn-price.enterprise .cn-cta {
  border-color: var(--cn-amber);
  color: var(--cn-amber);
  background: transparent;
  text-shadow: 0 0 4px rgba(255, 189, 46, 0.5);
  box-shadow:
    0 1px 0 rgba(255, 189, 46, 0.12) inset,
    0 2px 4px rgba(0, 0, 0, 0.4),
    0 0 16px -4px rgba(255, 145, 0, 0.4);
}
.cn-price.enterprise .cn-cta:hover {
  background: rgba(255, 189, 46, 0.16);
  color: #fff5d0;
  border-color: #ffd270;
  box-shadow:
    0 1px 0 rgba(255, 189, 46, 0.25) inset,
    0 6px 18px -4px rgba(255, 145, 0, 0.45),
    0 0 22px rgba(255, 189, 46, 0.4);
}

/* Amber highlight on the "api access" feature line of higher tiers,
 * marking it as the premium feature (REST API quota/throughput). */
.cn-price .cn-feat-api {
  color: var(--cn-amber);
  text-shadow: 0 0 4px rgba(255, 189, 46, 0.45);
  position: relative;
  padding-left: 0;
}
.cn-price .cn-feat-api::marker { color: var(--cn-amber); }

/* ── How-it-works ───────────────────────────────────────────────── */
.cn-how { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.75rem; margin-top: 2.5rem; }
.cn-step {
  background: rgba(10, 10, 10, 0.78);
  border: 1px solid var(--cn-border);
  padding: 1.25rem;
  border-radius: 2px;
  backdrop-filter: blur(6px) saturate(140%);
  -webkit-backdrop-filter: blur(6px) saturate(140%);
  box-shadow: var(--cn-shadow-card);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.cn-step:hover {
  border-color: rgba(255,255,255,0.45);
  transform: translateY(-2px);
  box-shadow: var(--cn-shadow-card-hover);
}
.cn-step-num {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid var(--cn-blue);
  border-radius: 2px;
  color: var(--cn-blue);
  font-size: 0.65rem;
  letter-spacing: 2px;
  margin-bottom: 0.75rem;
  text-shadow: 0 0 4px var(--cn-blue);
}
.cn-step h4 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1.5px; margin: 0 0 0.5rem; }
.cn-step p { color: var(--cn-text-2); font-size: 0.78rem; line-height: 1.6; margin: 0; }

/* ── FAQ ─────────────────────────────────────────────────────────── */
.cn-faq { margin-top: 1.5rem; max-width: 760px; margin-left: auto; margin-right: auto; }
.cn-faq details {
  border-bottom: 1px solid var(--cn-border);
  padding: 1rem 0.5rem;
}
.cn-faq summary {
  list-style: none;
  cursor: pointer;
  font-size: 0.85rem;
  text-transform: lowercase;
  letter-spacing: 0.5px;
  color: var(--cn-text);
  /* Center the question text; pin the > and + glyphs to the edges
   * via absolute positioning so they don't shift the centering. */
  text-align: center;
  position: relative;
  padding: 0 2.25rem;
}
.cn-faq summary::-webkit-details-marker { display: none; }
.cn-faq summary::before {
  content: '>';
  position: absolute; left: 0.25rem; top: 50%; transform: translateY(-50%);
  color: var(--cn-blue); text-shadow: 0 0 4px var(--cn-blue);
}
.cn-faq summary::after {
  content: '+';
  position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%);
  color: var(--cn-blue); font-size: 1.1rem;
  transition: transform 0.3s;
}
.cn-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.cn-faq details[open] summary { color: var(--cn-blue); }
.cn-faq p { color: var(--cn-text-2); font-size: 0.8rem; line-height: 1.7; margin: 0.75rem 0 0; padding-left: 1.5rem; }

/* ── Footer ──────────────────────────────────────────────────────── */
/* ── Cloner footer — multi-column, distinct from the minimal main site ── */
.cn-site-footer {
  margin-top: 5rem;
  padding: 3rem clamp(1.25rem, 5vw, 4rem) 1.75rem;
  border-top: 1px solid var(--cn-border);
  background:
    linear-gradient(180deg, rgba(53,229,122,0.04), transparent 40%),
    rgba(6, 6, 6, 0.6);
}
.cn-foot-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 2rem;
  max-width: 1100px;
  margin: 0 auto;
  align-items: start;
}
.cn-foot-brand .cn-wordmark { font-size: 1.05rem; }
.cn-foot-brand p {
  margin: 0.9rem 0 0.9rem;
  font-family: var(--cn-mono);
  font-size: 0.76rem;
  line-height: 1.6;
  color: var(--cn-text-2);
  max-width: 30ch;
}
.cn-foot-pay {
  display: inline-block;
  font-family: var(--cn-mono);
  font-size: 0.66rem;
  letter-spacing: 0.5px;
  color: var(--cn-blue);
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--cn-blue-dim);
  border-radius: 2px;
}
.cn-foot-col { display: flex; flex-direction: column; }
.cn-foot-col h5 {
  margin: 0 0 0.9rem;
  font-family: var(--cn-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cn-text-4);
}
.cn-foot-col a {
  font-family: var(--cn-mono);
  font-size: 0.8rem;
  color: var(--cn-text-2);
  text-decoration: none;
  padding: 0.32rem 0;
  transition: color 0.18s, text-shadow 0.18s, padding-left 0.18s;
}
.cn-foot-col a:hover {
  color: var(--cn-blue);
  text-shadow: 0 0 6px var(--cn-blue-dim);
  padding-left: 4px;
}
.cn-foot-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem;
  max-width: 1100px;
  margin: 2.5rem auto 0;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(255,255,255,0.07);
  font-family: var(--cn-mono);
  font-size: 0.68rem;
  color: var(--cn-text-4);
  letter-spacing: 0.5px;
}
.cn-foot-host { color: var(--cn-text-3); }
@media (max-width: 820px) {
  .cn-foot-grid { grid-template-columns: 1fr 1fr; gap: 1.75rem; }
  .cn-foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .cn-foot-grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════
 * AUTH (login / free-signup / welcome / verify)
 * No-scroll layout: the auth pages always fit the viewport. Header,
 * centered card, and footer share the screen in a flex column. Used
 * `100dvh` so the mobile URL bar contracting doesn't cause overflow.
 * ════════════════════════════════════════════════════════════════════
 */
body:has(.cn-auth-wrap) {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
body:has(.cn-auth-wrap) .cn-site-header {
  position: static;       /* no sticky needed; flex pins it */
  flex: 0 0 auto;
}
body:has(.cn-auth-wrap) .cn-site-footer {
  flex: 0 0 auto;
  margin-top: 0;
  padding: 0.7rem 1rem;
}
.cn-auth-wrap {
  flex: 1 1 auto;
  min-height: 0;          /* let flex shrink it past content height if needed */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 1.5rem;
  overflow: hidden;
}
.cn-auth { width: 100%; max-width: 460px; }
.cn-auth .cn-box-body { padding: 1.75rem 1.5rem; }
.cn-auth h1 {
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-align: center;
  margin: 0 0 0.5rem;
  text-shadow: 0 0 4px rgba(255,255,255,0.4);
}
.cn-auth-sub {
  text-align: center;
  color: var(--cn-text-2);
  font-size: 0.78rem;
  margin: 0 0 1.5rem;
  line-height: 1.5;
}
.cn-field { margin-bottom: 1rem; }
.cn-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.7rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cn-text-3);
  margin-bottom: 0.4rem;
}
.cn-label::before { content: '>'; color: var(--cn-blue); text-shadow: 0 0 3px var(--cn-blue); }
.cn-input, .cn-select {
  width: 100%;
  padding: 0.7rem 0.85rem;
  background: rgba(0,0,0,0.6);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 2px;
  color: var(--cn-text);
  font-family: var(--cn-mono) !important;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.cn-input::placeholder { color: var(--cn-text-4); }
.cn-input:focus, .cn-select:focus {
  outline: none;
  background: rgba(0,0,0,0.8);
  border-color: var(--cn-blue);
  box-shadow: 0 0 0 1px var(--cn-blue-dim), 0 0 12px rgba(53,229,122,0.15);
}
.cn-select { appearance: none; padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 8L2 4h8z' fill='%23ffffff' opacity='0.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 12px;
}
.cn-msg { margin-top: 0.75rem; font-size: 0.78rem; line-height: 1.5; }
.cn-error { color: var(--cn-red); text-shadow: 0 0 4px rgba(255,110,110,0.3); }
.cn-success { color: var(--cn-green); text-shadow: 0 0 4px rgba(94,255,94,0.3); }
.cn-auth-foot { margin-top: 1.25rem; text-align: center; font-size: 0.72rem; color: var(--cn-text-3); }
.cn-auth-foot a { color: var(--cn-blue); text-decoration: none; text-shadow: 0 0 3px rgba(53,229,122,0.5); }

/* ════════════════════════════════════════════════════════════════════
 * DASHBOARD
 * ════════════════════════════════════════════════════════════════════
 */
.cn-dash {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: 100vh;
}

.cn-side {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 1.25rem 1rem;
  background: rgba(0,0,0,0.82);
  border-right: 1px solid var(--cn-border);
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow:
    8px 0 24px -12px rgba(0,0,0,0.6),
    1px 0 0 rgba(255,255,255,0.03) inset,
    0 0 80px rgba(255,255,255,0.02) inset;
}
.cn-side .cn-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.5rem;
  margin: 0.25rem 0 1.5rem;
}
.cn-side .cn-logo img {
  height: 34px;
  width: auto;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.45));
  transition: filter 0.2s;
}
.cn-side .cn-logo:hover img { filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.75)); }

.cn-side nav { display: flex; flex-direction: column; gap: 2px; }
.cn-side nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 0.55rem 0.75rem;
  color: var(--cn-text-2);
  font-size: 0.78rem;
  letter-spacing: 1px;
  text-transform: lowercase;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 2px;
  transition: all 0.15s;
}
.cn-side nav a::before { content: '>'; color: var(--cn-text-4); }
.cn-side nav a:hover { background: rgba(255,255,255,0.04); color: var(--cn-text); }
.cn-side nav a:hover::before { color: var(--cn-blue); text-shadow: 0 0 3px var(--cn-blue); }
.cn-side nav a.active {
  background: rgba(53,229,122,0.06);
  border-color: var(--cn-blue-dim);
  color: var(--cn-blue);
  text-shadow: 0 0 4px rgba(53,229,122,0.4);
  box-shadow: inset 0 0 16px rgba(53,229,122,0.06);
}
.cn-side nav a.active::before { color: var(--cn-blue); text-shadow: 0 0 4px var(--cn-blue); }
/* Sidebar footer — wraps the tier pill + user block as a unit so the
 * whole group sticks to the bottom of the sidebar's flex column via
 * margin-top:auto. Internal layout: pill (centered), then divider line
 * (drawn by .cn-side-user's border-top), then email + sign out. */
.cn-side-foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
}
.cn-tier-pill {
  align-self: center;
  margin: 0.25rem auto 1.5rem;     /* more breathing room before the divider */
  padding: 3px 10px;
  background: rgba(53,229,122,0.08);
  border: 1px solid var(--cn-blue-dim);
  border-radius: 2px;
  color: var(--cn-blue);
  font-size: 0.6rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-shadow: 0 0 3px rgba(53,229,122,0.4);
}
.cn-side-user {
  padding: 0.85rem 0.75rem 0.65rem;
  border-top: 1px solid var(--cn-border);
  font-size: 0.7rem;
  color: var(--cn-text-3);
  word-break: break-all;
  letter-spacing: 0.5px;
}
.cn-side-user a { display: block; margin-top: 10px; color: var(--cn-text-4); text-decoration: none; font-size: 0.65rem; }
.cn-side-user a:hover { color: var(--cn-red); text-shadow: 0 0 4px rgba(255,110,110,0.3); }

.cn-main { padding: 2rem 2.5rem 4rem; max-width: 1100px; }
.cn-main h1 {
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin: 0 0 0.25rem;
  text-shadow: 0 0 4px rgba(255,255,255,0.4);
}
.cn-main .cn-page-sub { color: var(--cn-text-2); font-size: 0.8rem; margin: 0 0 1.75rem; }
.cn-main h1 .cn-mut { color: var(--cn-text-3); text-shadow: none; letter-spacing: 1px; text-transform: lowercase; }

/* Stat cards */
.cn-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.75rem; margin-bottom: 1.25rem; }
.cn-stat {
  background: rgba(10, 10, 10, 0.78);
  border: 1px solid var(--cn-border);
  border-radius: 2px;
  padding: 1rem 1.1rem;
  position: relative;
  backdrop-filter: blur(6px) saturate(140%);
  -webkit-backdrop-filter: blur(6px) saturate(140%);
  box-shadow: var(--cn-shadow-card);
}
.cn-stat::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(135deg, rgba(53,229,122,0.04) 0%, transparent 60%);
  pointer-events: none;
}
.cn-stat-label {
  font-size: 0.65rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cn-text-3);
  margin-bottom: 0.4rem;
}
.cn-stat-value {
  font-size: 1.5rem;
  text-shadow: 0 0 4px rgba(255,255,255,0.4);
  font-feature-settings: 'tnum';
}
.cn-stat-value .cn-suffix { color: var(--cn-text-3); font-size: 0.85rem; margin-left: 2px; }
.cn-stat-meta { color: var(--cn-text-3); font-size: 0.7rem; margin-top: 0.25rem; letter-spacing: 0.5px; }
.cn-progress {
  position: relative;
  height: 6px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--cn-border);
  margin-top: 0.5rem;
  overflow: hidden;
}
.cn-progress-fill {
  height: 100%;
  background: var(--cn-blue);
  box-shadow: 0 0 8px var(--cn-blue);
  transition: width 0.5s ease;
}

/* New-batch live progress bar (drives off /api/cloner/status/:jobId). */
.cn-progress-fill.cn-good { background: var(--cn-green, #5eff5e); box-shadow: 0 0 8px var(--cn-green, #5eff5e); }
.cn-progress-fill.cn-bad  { background: var(--cn-red, #ff6e6e);  box-shadow: 0 0 8px var(--cn-red, #ff6e6e); }
.cn-batch-progress { margin-top: 1rem; }
.cn-batch-prog-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--cn-mono); font-size: 0.78rem; color: var(--cn-text-2);
  margin-bottom: 0.35rem;
}
.cn-batch-prog-bar { height: 10px; margin-top: 0; }

/* Block */
.cn-block {
  background: rgba(10, 10, 10, 0.78);
  border: 1px solid var(--cn-border);
  border-radius: 2px;
  padding: 1.25rem;
  margin-bottom: 1.25rem;
  backdrop-filter: blur(6px) saturate(140%);
  -webkit-backdrop-filter: blur(6px) saturate(140%);
  box-shadow: var(--cn-shadow-card);
}
.cn-block-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.cn-block-head h2 {
  font-size: 0.75rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--cn-text);
  margin: 0;
  text-shadow: 0 0 2px #fff;
}
.cn-block-head h2::before { content: '>'; color: var(--cn-blue); text-shadow: 0 0 4px var(--cn-blue); margin-right: 6px; }
.cn-block-head .cn-meta {
  color: var(--cn-text-3);
  font-size: 0.7rem;
  letter-spacing: 1px;
  text-decoration: none;
}
.cn-block-head .cn-meta:hover { color: var(--cn-blue); text-shadow: 0 0 4px var(--cn-blue); }

/* Tables */
.cn-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.cn-table th, .cn-table td {
  text-align: left;
  padding: 0.7rem 0.8rem;
  border-bottom: 1px solid var(--cn-border);
}
.cn-table th {
  color: var(--cn-text-3);
  font-size: 0.65rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.cn-table td { color: var(--cn-text); }
.cn-table tr:last-child td { border-bottom: none; }
.cn-table tr:hover td { background: rgba(255,255,255,0.02); }
.cn-table .cn-row-actions { text-align: right; }

/* Status pills */
.cn-status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 8px;
  border-radius: 2px;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}
.cn-status::before {
  content: ''; width: 6px; height: 6px;
}
.cn-status.completed  { color: var(--cn-green); border: 1px solid rgba(94,255,94,0.3); }
.cn-status.completed::before { background: var(--cn-green); box-shadow: 0 0 6px var(--cn-green); }
.cn-status.processing { color: var(--cn-blue);  border: 1px solid var(--cn-blue-dim); }
.cn-status.processing::before { background: var(--cn-blue); box-shadow: 0 0 6px var(--cn-blue); animation: blink 1.2s infinite; }
.cn-status.queued     { color: var(--cn-yellow);border: 1px solid rgba(255,235,110,0.3); }
.cn-status.queued::before { background: var(--cn-yellow); box-shadow: 0 0 6px var(--cn-yellow); }
.cn-status.failed     { color: var(--cn-red);   border: 1px solid rgba(255,110,110,0.3); }
.cn-status.failed::before { background: var(--cn-red); box-shadow: 0 0 6px var(--cn-red); }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }

/* Empty state */
.cn-empty { text-align: center; padding: 2.5rem 1.5rem; color: var(--cn-text-3); }
.cn-empty .cn-empty-prompt { color: var(--cn-blue); text-shadow: 0 0 4px var(--cn-blue); letter-spacing: 2px; margin-bottom: 0.5rem; }
.cn-empty h3 { color: var(--cn-text); margin: 0 0 0.4rem; text-transform: uppercase; letter-spacing: 1.5px; font-size: 0.85rem; }
.cn-empty p { margin: 0 0 1rem; font-size: 0.78rem; line-height: 1.6; }

/* App picker */
.cn-apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 0.6rem; margin-bottom: 1rem; }
.cn-app {
  background: rgba(10, 10, 10, 0.78);
  border: 1px solid var(--cn-border);
  border-radius: 2px;
  padding: 0.9rem 0.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.7rem;
  letter-spacing: 1px;
  text-transform: lowercase;
  color: var(--cn-text-2);
  position: relative;
  backdrop-filter: blur(6px) saturate(140%);
  -webkit-backdrop-filter: blur(6px) saturate(140%);
  box-shadow: 0 4px 12px -4px rgba(0,0,0,0.6), 0 8px 24px -8px rgba(0,0,0,0.4);
  transition: all 0.15s;
}
.cn-app:hover {
  border-color: rgba(255,255,255,0.45);
  background: rgba(20, 20, 20, 0.85);
  color: var(--cn-text);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -4px rgba(0,0,0,0.7), 0 16px 40px -8px rgba(0,0,0,0.5);
}
.cn-app.selected {
  border-color: var(--cn-blue);
  background: rgba(53,229,122,0.06);
  color: var(--cn-blue);
  text-shadow: 0 0 4px var(--cn-blue);
  box-shadow: 0 0 0 1px var(--cn-blue-dim), 0 0 12px rgba(53,229,122,0.15);
}
.cn-app.selected::after {
  content: '[X]'; position: absolute; top: 6px; right: 6px;
  font-size: 0.6rem; color: var(--cn-blue); letter-spacing: 1px;
}
.cn-app-icon {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 2px;
  color: var(--cn-text);
  font-size: 0.95rem;
  text-shadow: 0 0 4px rgba(255,255,255,0.4);
}
.cn-app.selected .cn-app-icon { border-color: var(--cn-blue); color: var(--cn-blue); text-shadow: 0 0 4px var(--cn-blue); }

/* Counter spinner */
.cn-count-row { display: flex; gap: 0.5rem; align-items: center; }
.cn-count-btn {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--cn-border);
  border-radius: 2px;
  color: var(--cn-text);
  font-family: var(--cn-mono) !important;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.15s;
}
.cn-count-btn:hover { background: rgba(255,255,255,0.08); border-color: var(--cn-blue); color: var(--cn-blue); text-shadow: 0 0 4px var(--cn-blue); }
.cn-count-input { flex: 1; max-width: 100px; text-align: center; font-size: 1rem !important; padding: 0.5rem !important; }
/* Hide the native number-input spinner — we have explicit +/- buttons. */
.cn-count-input::-webkit-outer-spin-button,
.cn-count-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cn-count-input { -moz-appearance: textfield; appearance: textfield; }

/* Code block */
.cn-pre {
  background: var(--cn-bg);
  border: 1px solid var(--cn-border);
  border-radius: 2px;
  padding: 0.85rem 1rem;
  font-family: var(--cn-mono) !important;
  font-size: 0.75rem;
  line-height: 1.7;
  color: var(--cn-text-2);
  overflow-x: auto;
  white-space: pre;
  margin: 0;
}
.cn-pre .cn-pre-key { color: var(--cn-blue); text-shadow: 0 0 3px rgba(53,229,122,0.4); }
.cn-pre .cn-pre-str { color: var(--cn-green); }
.cn-pre .cn-pre-com { color: var(--cn-text-3); font-style: italic; }

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 880px) {
  .cn-dash { grid-template-columns: 1fr; }
  .cn-side {
    position: static; height: auto;
    flex-direction: row; align-items: center;
    overflow-x: auto; padding: 0.75rem 1rem; gap: 8px;
  }
  .cn-side .cn-logo, .cn-side-foot { display: none; }
  .cn-side nav { flex-direction: row; flex: 1; flex-wrap: nowrap; }
  .cn-side nav a { white-space: nowrap; }
  .cn-main { padding: 1.5rem; }
}

@media (max-width: 600px) {
  .cn-section { padding: 2.5rem 0; }
}

/* ════════════════════════ DOCS PAGE ════════════════════════════════
 * Sticky left nav + scrolling main pane. Same terminal aesthetic as
 * the rest of the cloner site. Used by /cloner/docs/. */
.cn-docs-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 2.5rem;
  max-width: 1180px;
  margin: 2.5rem auto 0;
  padding: 0 clamp(1rem, 3vw, 2rem) 4rem;
}
.cn-docs-nav {
  position: sticky;
  top: 80px;
  align-self: start;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  padding: 0.5rem 0;
  border-right: 1px solid var(--cn-border);
}
.cn-docs-nav-group {
  margin-bottom: 1.25rem;
}
.cn-docs-nav-group h4 {
  color: var(--cn-text-3);
  font-size: 0.65rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin: 0 0 0.5rem;
  padding: 0 0.6rem;
}
.cn-docs-nav a {
  display: block;
  padding: 0.4rem 0.75rem;
  margin-right: 0.5rem;
  color: var(--cn-text-2);
  text-decoration: none;
  font-size: 0.75rem;
  letter-spacing: 0.5px;
  border-left: 2px solid transparent;
  transition: color 0.15s, background 0.15s, border-left-color 0.15s;
}
.cn-docs-nav a:hover {
  color: var(--cn-blue);
  background: rgba(53, 229, 122, 0.04);
}
.cn-docs-nav a.active {
  color: var(--cn-blue);
  background: rgba(53, 229, 122, 0.08);
  border-left-color: var(--cn-blue);
  text-shadow: 0 0 4px rgba(53, 229, 122, 0.5);
}
.cn-docs-main { min-width: 0; }
.cn-docs-main > .cn-doc-section,
.cn-docs-main > .cn-endpoint {
  margin-bottom: 3.5rem;
  scroll-margin-top: 90px;
}
.cn-docs-main h2 {
  font-size: 1.6rem;
  margin: 0 0 0.5rem;
  letter-spacing: 1px;
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.3);
}
.cn-docs-main h3 {
  font-size: 1.1rem;
  margin: 0 0 0.75rem;
  letter-spacing: 0.5px;
  display: flex; align-items: center; gap: 0.75rem;
  flex-wrap: wrap;
}
.cn-docs-main p {
  color: var(--cn-text-2);
  font-size: 0.85rem;
  line-height: 1.7;
  margin: 0 0 0.75rem;
}
.cn-docs-main h4 {
  font-size: 0.7rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--cn-text-3);
  margin: 1.25rem 0 0.5rem;
}
.cn-method {
  display: inline-block;
  padding: 2px 8px;
  font-size: 0.7rem;
  font-weight: bold;
  letter-spacing: 1.5px;
  border-radius: 2px;
  font-family: var(--cn-mono);
}
.cn-method-GET    { background: rgba(110,207,255,0.12); color: #6ecfff; border: 1px solid #6ecfff; }
.cn-method-POST   { background: rgba(94,255,94,0.12); color: #5eff5e; border: 1px solid #5eff5e; }
.cn-method-DELETE { background: rgba(255,110,110,0.10); color: #ff6e6e; border: 1px solid #ff6e6e; }
.cn-path {
  color: var(--cn-text);
  font-family: var(--cn-mono);
  font-size: 0.95rem;
  word-break: break-all;
}
.cn-code-block {
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid var(--cn-border);
  border-left: 3px solid var(--cn-blue-dim);
  padding: 0.9rem 1rem;
  border-radius: 2px;
  overflow-x: auto;
  font-size: 0.75rem;
  line-height: 1.65;
  margin: 0.5rem 0 1rem;
}
.cn-code-block code { color: var(--cn-text); white-space: pre; font-family: var(--cn-mono); }
.cn-table-params {
  width: 100%;
  font-size: 0.75rem;
  margin: 0.5rem 0 1rem;
  border-collapse: collapse;
}
.cn-table-params th, .cn-table-params td {
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--cn-border);
  vertical-align: top;
}
.cn-table-params th {
  color: var(--cn-text-3);
  font-size: 0.65rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: normal;
}
.cn-table-params td:first-child {
  color: var(--cn-blue);
  font-family: var(--cn-mono);
  white-space: nowrap;
}
.cn-table-params .cn-type { color: var(--cn-amber); font-family: var(--cn-mono); }
.cn-required { color: #ff8a82; font-size: 0.65rem; letter-spacing: 1px; margin-left: 4px; }

@media (max-width: 800px) {
  .cn-docs-layout { grid-template-columns: 1fr; gap: 1.5rem; }
  .cn-docs-nav {
    position: static; max-height: none; overflow: visible;
    border-right: none; border-bottom: 1px solid var(--cn-border);
    padding-bottom: 1rem;
  }
}

/* ════════════ INLINE API REFERENCE BLOCK ═════════════════════════
 * Two-column section reused on landing + dashboard. Left = prose
 * (auth, base URL). Right = tabbed code panel with per-endpoint
 * cURL examples. Tab switching is plain JS at the bottom of the page. */
.cn-docs-inline {
  display: grid;
  grid-template-columns: minmax(0, 0.74fr) minmax(0, 1.6fr);
  gap: 2rem;
  margin-top: 2.5rem;
  align-items: start;
}
.cn-docs-prose { color: var(--cn-text-2); font-size: 0.85rem; line-height: 1.7; }
.cn-docs-prose h4 {
  color: var(--cn-text-3);
  font-size: 0.65rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 1.25rem 0 0.4rem;
}
.cn-docs-prose h4:first-child { margin-top: 0; }
.cn-docs-prose .cn-inline-code,
.cn-docs-prose code {
  display: inline-block;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid var(--cn-border);
  border-radius: 2px;
  padding: 0.25rem 0.5rem;
  font-family: var(--cn-mono);
  font-size: 0.75rem;
  color: var(--cn-blue);
  word-break: break-all;
}
.cn-docs-prose p { margin: 0 0 0.5rem; }

/* Tabbed code block — fully opaque so the code reads clean over the
 * playing video. Drop shadow lifts it off the page. */
.cn-docs-code {
  min-width: 0;
  border: 1px solid var(--cn-border);
  border-radius: 2px;
  background: #050505;
  /* `position: relative` so the LLM-context tag positions against this
   * container. `overflow: visible` so the tag can hang above the top
   * border without being clipped — interior content still wraps because
   * the panels have their own padding. */
  position: relative;
  overflow: visible;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.5),
    0 14px 30px -8px rgba(0,0,0,0.75);
}
.cn-docs-tabs {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.cn-docs-tabs::-webkit-scrollbar { display: none; }
.cn-docs-tab {
  flex: 1 0 120px;
  min-width: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
  background: transparent;
  border: none;
  color: var(--cn-text-3);
  padding: 0.45rem 0.7rem;
  font: inherit;
  font-family: var(--cn-mono);
  font-size: 0.6rem;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 2px 2px 0 0;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.cn-docs-tab:hover { color: var(--cn-text-2); background: rgba(255,255,255,0.03); }
.cn-docs-tab.active {
  color: #fff;
  background: rgba(255,255,255,0.06);
  border-bottom-color: #fff;
  text-shadow: none;
}
.cn-docs-tab .cn-method {
  margin-right: 0;
  font-size: 0.55rem;
  padding: 1px 4px;
}
/* All panels share one grid cell so the container auto-sizes to the
 * tallest one. Inactive panels stay laid out (visibility:hidden) instead
 * of display:none so the panel height never shifts when switching tabs. */
.cn-docs-panels {
  padding: 1.1rem 1.2rem;
  display: grid;
  grid-template-areas: "panel";
  min-height: 460px;                /* taller, more substantial panel */
  overflow: hidden;                 /* no horizontal scroll — lines wrap */
}
.cn-docs-panel {
  grid-area: panel;
  font-size: 0.72rem;
  line-height: 1.7;
  visibility: hidden;
  pointer-events: none;
}
.cn-docs-panel.active {
  visibility: visible;
  pointer-events: auto;
}
.cn-docs-panel code {
  /* Keep source line breaks. Only wrap at whitespace if a line ever
   * overflows — never mid-token. Examples are formatted short by hand
   * so wrapping is essentially never triggered. */
  white-space: pre-wrap;
  word-break: normal;
  overflow-wrap: normal;
  font-family: var(--cn-mono);
  color: var(--cn-text);
}
.cn-docs-panel .cn-c-cmd { color: #5eff5e; }       /* curl, $ */
.cn-docs-panel .cn-c-flag { color: #ffbd2e; }       /* -H, -X, -d */
.cn-docs-panel .cn-c-str { color: #6ecfff; }         /* strings */
.cn-docs-panel .cn-c-cmt { color: var(--cn-text-3); }       /* # comments */

@media (max-width: 800px) {
  .cn-docs-inline { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ════════════ Text legibility ═══════════════════════════════════════
 * Subtle drop shadows on body copy so prose stays readable when the
 * dim background video moves under it. Headings already have shadows;
 * this targets paragraphs, list items, FAQ, step descriptions, prose.
 * Excluded: anything monospace (code blocks, terminal box bodies). */
.cn-page .cn-lead,
.cn-page .cn-step h4,
.cn-page .cn-step p,
.cn-page .cn-faq summary,
.cn-page .cn-faq p,
.cn-page .cn-price h3,
.cn-page .cn-price .cn-cap,
.cn-page .cn-price ul li,
.cn-page .cn-docs-prose p,
.cn-page .cn-docs-prose h4,
.cn-page .cn-trust-track > span {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}
/* Keep mono blocks crisp — no shadow blur on code. */
.cn-page .cn-docs-panel code,
.cn-page .cn-docs-prose code {
  text-shadow: none;
}

/* Section labels inside each tab panel — split REQUEST and RESPONSE
 * into clearly-divided sub-blocks so users can scan one or the other. */
/* Section header — clearer divider between REQUEST and RESPONSE,
 * and between separate endpoints in tabs that have multiple. */
.cn-docs-panel .cn-c-section {
  display: block;
  font-family: var(--cn-mono);
  font-size: 0.68rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #6ecfff;
  text-shadow: 0 0 4px rgba(110,207,255,0.4);
  margin: 0 0 0.85rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid rgba(110,207,255,0.35);
}
.cn-docs-panel .cn-c-section.response {
  margin-top: 1.75rem;
  color: #5eff5e;
  text-shadow: 0 0 4px rgba(94,255,94,0.4);
  border-bottom-color: rgba(94,255,94,0.35);
}
/* Fresh REQUEST that follows a previous RESPONSE (2nd endpoint in tab) */
.cn-docs-panel code + .cn-c-section:not(.response) {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px dashed rgba(255, 255, 255, 0.18);
}

/* Code block: tinted track + colored left rule keys it visually to
 * the section header above (amber for request, green for response). */
.cn-docs-panel code {
  display: block;
  margin: 0;
  padding: 0.85rem 1rem;
  background: rgba(255, 255, 255, 0.025);
  border-left: 2px solid rgba(110,207,255,0.35);
  border-radius: 0 2px 2px 0;
}
.cn-docs-panel .cn-c-section.response + code {
  border-left-color: rgba(94,255,94,0.35);
}
.cn-docs-panel .cn-c-section:not(.response) + code {
  border-left-color: rgba(110,207,255,0.35);
}

/* ─── "copy context for LLM" — a tag hanging off the top edge of the
 * api-reference dialog, flush right. Sits ABOVE the dialog's top border
 * and visually clips the border (no bottom-border on the tag itself, and
 * the dialog's overflow:visible lets it escape). */
.cn-docs-action {
  position: absolute;
  top: 0;
  right: 12px;
  transform: translateY(-100%);
  z-index: 2;
  background: #050505;
  border: 1px solid var(--cn-border);
  border-bottom: 1px solid #050505;     /* fakes a "joined to dialog" look */
  color: var(--cn-blue);
  padding: 0.42rem 0.85rem 0.5rem;
  font: inherit;
  font-family: var(--cn-mono);
  font-size: 0.62rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 2px 2px 0 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.cn-docs-action:hover {
  background: rgba(53, 229, 122, 0.08);
  border-color: rgba(53, 229, 122, 0.6);
  border-bottom-color: rgba(53, 229, 122, 0.08);
  box-shadow: 0 -4px 12px -2px rgba(53, 229, 122, 0.25);
  transform: translateY(calc(-100% - 2px));
}
.cn-docs-action.copied {
  color: var(--cn-green, #5eff5e);
  border-color: rgba(94, 255, 94, 0.55);
  background: rgba(94, 255, 94, 0.08);
  border-bottom-color: rgba(94, 255, 94, 0.08);
}
.cn-docs-action.copied:hover {
  box-shadow: 0 -4px 12px -2px rgba(94, 255, 94, 0.3);
}

/* ─── Auth no-scroll: responsive trims ────────────────────────────────
 * When the viewport gets short (laptops with browser chrome, mobile in
 * landscape) or narrow (phones), tighten the auth card so it never
 * needs to scroll within its locked-height container. */
@media (max-height: 760px) {
  body:has(.cn-auth-wrap) .cn-auth .cn-box-body { padding: 1.1rem 1.25rem 1.25rem; }
  body:has(.cn-auth-wrap) .cn-auth h1 { font-size: 1.05rem; margin-bottom: 0.4rem; }
  body:has(.cn-auth-wrap) .cn-auth-sub { font-size: 0.74rem; margin-bottom: 1rem; }
  body:has(.cn-auth-wrap) .cn-field { margin-bottom: 0.7rem; }
  body:has(.cn-auth-wrap) .cn-auth-foot { margin-top: 0.9rem; }
}

@media (max-width: 480px) {
  body:has(.cn-auth-wrap) .cn-site-header { padding: 0.7rem 1rem; }
  body:has(.cn-auth-wrap) .cn-site-footer { padding: 0.55rem 0.75rem; font-size: 0.62rem; }
  body:has(.cn-auth-wrap) .cn-auth-wrap { padding: 0.5rem 0.75rem; }
  body:has(.cn-auth-wrap) .cn-auth .cn-box-body { padding: 1rem 1.1rem 1.1rem; }
  body:has(.cn-auth-wrap) .cn-auth h1 { font-size: 0.95rem; letter-spacing: 1.5px; }
  body:has(.cn-auth-wrap) .cn-input { padding: 0.6rem 0.7rem; font-size: 0.8rem; }
  body:has(.cn-auth-wrap) .cn-btn-lg { padding: 0.7rem 0.9rem; }
}

/* Very short viewports (phone landscape, ultra-short laptops). Trim
 * aggressively so the auth card still fits without clipping. */
@media (max-height: 500px) {
  body:has(.cn-auth-wrap) .cn-site-header { padding: 0.45rem 1rem; }
  body:has(.cn-auth-wrap) .cn-site-footer { padding: 0.35rem 1rem; font-size: 0.6rem; }
  body:has(.cn-auth-wrap) .cn-auth-wrap { padding: 0.3rem 1rem; }
  body:has(.cn-auth-wrap) .cn-auth .cn-box-body { padding: 0.7rem 1rem 0.9rem; }
  body:has(.cn-auth-wrap) .cn-auth h1 { font-size: 0.9rem; margin-bottom: 0.3rem; }
  body:has(.cn-auth-wrap) .cn-auth-sub { font-size: 0.7rem; margin-bottom: 0.75rem; }
  body:has(.cn-auth-wrap) .cn-field { margin-bottom: 0.55rem; }
  body:has(.cn-auth-wrap) .cn-input { padding: 0.5rem 0.7rem; font-size: 0.78rem; }
  body:has(.cn-auth-wrap) .cn-btn-lg { padding: 0.55rem 0.8rem; font-size: 0.85rem; }
  body:has(.cn-auth-wrap) .cn-auth-foot { margin-top: 0.6rem; font-size: 0.65rem; }
}

/* ════════════════════════════════════════════════════════════════════
 * TOASTS — bottom-right notification stack
 *
 * Persistent: shown until the user dismisses (or until an explicit
 * timeout per call). Stacks newest-on-top. Animates in from the right.
 * z-index above the header so it shows even when the sticky nav is up.
 * ════════════════════════════════════════════════════════════════════ */
.cn-toast-container {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  display: flex;
  flex-direction: column-reverse;          /* newest at the bottom of the stack visually */
  gap: 0.6rem;
  z-index: 9999;
  pointer-events: none;                    /* container doesn't catch clicks; children do */
  max-width: min(420px, calc(100vw - 2rem));
}
.cn-toast {
  pointer-events: auto;
  position: relative;
  background: #050505;
  border: 1px solid var(--cn-border);
  border-left-width: 3px;
  border-radius: 2px;
  padding: 0.8rem 2.2rem 0.85rem 0.95rem;
  font-family: var(--cn-mono);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--cn-text);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.5),
    0 12px 28px -6px rgba(0,0,0,0.75);
  animation: cnToastIn 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.0);
  transform-origin: right center;
}
.cn-toast.cn-toast-success { border-left-color: var(--cn-green, #5eff5e); color: var(--cn-green, #5eff5e); text-shadow: 0 0 4px rgba(94, 255, 94, 0.25); }
.cn-toast.cn-toast-error   { border-left-color: var(--cn-red,   #ff6e6e); color: var(--cn-red,   #ff6e6e); text-shadow: 0 0 4px rgba(255, 110, 110, 0.25); }
.cn-toast.cn-toast-info    { border-left-color: var(--cn-blue,  #35e57a); color: var(--cn-blue,  #35e57a); text-shadow: 0 0 4px rgba(53, 229, 122, 0.25); }
.cn-toast a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.cn-toast .cn-toast-close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 2px;
  color: var(--cn-text-3);
  font: inherit;
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.cn-toast .cn-toast-close:hover {
  color: var(--cn-text);
  border-color: var(--cn-border);
  background: rgba(255,255,255,0.04);
}
.cn-toast.cn-toast-leaving { animation: cnToastOut 0.2s ease-in forwards; }

@keyframes cnToastIn {
  from { opacity: 0; transform: translateX(120%); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes cnToastOut {
  to { opacity: 0; transform: translateX(120%); }
}

@media (max-width: 480px) {
  .cn-toast-container { right: 0.5rem; bottom: 0.5rem; left: 0.5rem; max-width: none; }
}

/* ════════════ SUPPORTED APPS section ════════════ */
.cn-apps-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-top: 2.5rem;
}
.cn-apps-col {
  background: rgba(10, 10, 10, 0.92);
  border: 1px solid var(--cn-border);
  border-radius: 2px;
  padding: 1.5rem 1.4rem 1.3rem;
  position: relative;
  box-shadow: var(--cn-shadow-card);
}
.cn-apps-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.9rem;
  margin-bottom: 1.2rem;
  border-bottom: 1px solid var(--cn-border);
}
.cn-apps-os {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--cn-mono);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 1px;
  color: var(--cn-text);
  text-shadow: var(--cn-glow-strong);
}
.cn-apps-os svg { width: 20px; height: 20px; }
.cn-apps-badge {
  font-family: var(--cn-mono);
  font-size: 0.6rem;
  letter-spacing: 1.5px;
  padding: 0.3rem 0.55rem;
  border-radius: 2px;
  border: 1px solid currentColor;
  white-space: nowrap;
}
.cn-apps-badge.ok { color: var(--cn-green); text-shadow: 0 0 8px rgba(94,255,94,0.4); }
.cn-apps-badge.soon { color: var(--cn-amber); text-shadow: 0 0 8px rgba(255,189,46,0.4); }
.cn-app-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
}
.cn-app {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.02);
  transition: border-color 0.18s, background 0.18s, transform 0.18s;
}
.cn-app:hover {
  border-color: var(--cn-border-hi);
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(-1px);
}
.cn-app-ico {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: var(--b);
  background: color-mix(in srgb, var(--b) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--b) 38%, transparent);
}
.cn-app-ico svg { width: 19px; height: 19px; }
.cn-app-meta { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.cn-app-name {
  font-family: var(--cn-mono);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--cn-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cn-app-builds { font-family: var(--cn-mono); font-size: 0.62rem; color: var(--cn-text-3); }
.cn-apps-foot {
  margin-top: 1.1rem;
  font-family: var(--cn-mono);
  font-size: 0.68rem;
  color: var(--cn-text-3);
}
/* iOS coming-soon treatment */
.cn-apps-col.soon .cn-app-list { opacity: 0.32; filter: grayscale(0.5); pointer-events: none; }
.cn-apps-col.soon .cn-app:hover { transform: none; }
.cn-apps-soon-overlay {
  position: absolute;
  left: 1.4rem; right: 1.4rem;
  bottom: 1.3rem;
  top: 5.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  text-align: center;
  background: radial-gradient(ellipse at center, rgba(10,10,10,0.55), rgba(10,10,10,0.9) 75%);
}
.cn-apps-soon-pill {
  font-family: var(--cn-mono);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--cn-amber);
  padding: 0.5rem 1rem;
  border: 1px solid var(--cn-amber);
  border-radius: 2px;
  background: rgba(255, 189, 46, 0.06);
  text-shadow: 0 0 10px rgba(255,189,46,0.4);
}
.cn-apps-col.soon .cn-apps-foot { margin-top: 0; }
@media (max-width: 760px) {
  .cn-apps-grid { grid-template-columns: 1fr; }
}

/* ════════════ WHY / VALUE section + hero/pricing micro-copy ════════════ */
.cn-hero-who {
  margin-top: 0.9rem;
  font-family: var(--cn-mono);
  font-size: 0.72rem;
  letter-spacing: 0.5px;
  color: var(--cn-text-3);
}
.cn-pricing-pay {
  margin-top: 0.8rem;
  font-family: var(--cn-mono);
  font-size: 0.72rem;
  color: var(--cn-blue);
  opacity: 0.85;
}
.cn-why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.1rem;
  margin-top: 2.5rem;
}
.cn-why {
  background: rgba(10, 10, 10, 0.92);
  border: 1px solid var(--cn-border);
  border-radius: 2px;
  padding: 1.5rem 1.3rem;
  box-shadow: var(--cn-shadow-card);
  transition: border-color 0.2s, transform 0.2s;
}
.cn-why:hover { border-color: var(--cn-border-hi); transform: translateY(-2px); }
.cn-why-ico {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  margin-bottom: 1rem;
  color: var(--b);
  background: color-mix(in srgb, var(--b) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--b) 34%, transparent);
}
.cn-why-ico svg { width: 23px; height: 23px; }
.cn-why h4 {
  font-family: var(--cn-mono);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--cn-text);
  margin: 0 0 0.55rem;
  letter-spacing: 0.3px;
}
.cn-why p {
  font-family: var(--cn-mono);
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--cn-text-2);
  margin: 0;
}
@media (max-width: 980px) { .cn-why-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .cn-why-grid { grid-template-columns: 1fr; } }

/* ════════════ install help / video guides ════════════ */
.cn-help {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin-top: 2.2rem;
  padding: 1.3rem 1.5rem;
  background: rgba(10, 10, 10, 0.92);
  border: 1px solid var(--cn-border);
  border-left: 2px solid var(--cn-blue);
  border-radius: 2px;
  box-shadow: var(--cn-shadow-card);
}
.cn-help-text { display: flex; flex-direction: column; gap: 0.3rem; }
.cn-help-title {
  font-family: var(--cn-mono);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--cn-blue);
  text-shadow: var(--cn-glow-blue);
}
.cn-help-sub { font-family: var(--cn-mono); font-size: 0.76rem; color: var(--cn-text-2); }
.cn-help-actions { display: flex; gap: 0.7rem; flex-wrap: wrap; }
.cn-help-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}
.cn-help-btn svg { width: 15px; height: 15px; flex: 0 0 15px; }
@media (max-width: 620px) {
  .cn-help { flex-direction: column; align-items: flex-start; }
  .cn-help-actions { width: 100%; }
  .cn-help-btn { flex: 1 1 auto; justify-content: center; }
}

/* ── API docs edge scroll arrows (overlay the tab strip on each edge) ── */

/* ════════════ Buttons — clipped "tactical" corners (site-wide) ════════════
   Cut on the top-right + bottom-left. A background-fill ::before (inset 1px)
   gives every cut edge a clean 1px border on any button variant. The element
   background IS the border colour; ::before is the dark button face. */
.cn-btn, .cn-icon-btn {
  position: relative;
  z-index: 0;
  border: none !important;
  border-radius: 0 !important;
  background: rgba(255,255,255,0.34) !important;     /* shows as the 1px edge */
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
.cn-btn::before, .cn-icon-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #0b0c11;                                /* dark button face */
  /* inner shape = outer inset 1px PERPENDICULAR on every edge (incl. the 45°
     chops, which need +0.41px so the diagonal border is a true 1px, not ~0.7px) */
  clip-path: polygon(1.5px 1.5px, calc(100% - 8.62px) 1.5px, calc(100% - 1.5px) 8.62px, calc(100% - 1.5px) calc(100% - 1.5px), 8.62px calc(100% - 1.5px), 1.5px calc(100% - 8.62px));
  transition: background 0.16s ease;
}
.cn-btn:hover, .cn-icon-btn:hover {
  background: rgba(255,255,255,0.6) !important;
  transform: none !important;
  box-shadow: none !important;
}
.cn-btn:hover::before, .cn-icon-btn:hover::before { background: #16181f; }
.cn-icon-btn:hover { color: var(--cn-blue) !important; }

/* primary — aqua edge + dark teal face, inverts on hover */
.cn-btn-primary {
  background: var(--cn-blue) !important;
  color: var(--cn-blue) !important;
  text-shadow: 0 0 6px rgba(53,229,122,0.45) !important;
}
.cn-btn-primary::before { background: #06140f; }
.cn-btn-primary:hover { background: var(--cn-blue) !important; color: #04130f !important; }
.cn-btn-primary:hover::before { background: var(--cn-blue); }

/* danger — red edge */
.cn-btn-danger { background: rgba(255,110,110,0.7) !important; color: var(--cn-red) !important; }
.cn-btn-danger::before { background: #150a0a; }
.cn-btn-danger:hover::before { background: rgba(255,110,110,0.16); }

/* header start-free + sign-in icon stay 38px tall and aligned */
.cn-site-header .cn-btn-pill { height: 38px; padding: 0 1.2rem; }
.cn-site-header .cn-icon-btn { width: 38px; height: 38px; }

/* ════════════ Background — plain dark, no gradient ════════════ */
body.cn-page { background: #06070d !important; }

/* ════════════ Status chips/pills — clipped corners to match buttons ════════════
   AVAILABLE / COMING SOON badges, the "iOS cloning in the works" pill, and the
   footer crypto chip. Element background = the chip's own colour (the 1px edge);
   ::before (inset 1px) is the dark face — same technique as the buttons. */
.cn-apps-badge, .cn-apps-soon-pill, .cn-foot-pay {
  position: relative;
  z-index: 0;
  border: none !important;
  border-radius: 0 !important;
  background: currentColor !important;              /* edge takes the chip colour */
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
.cn-apps-badge::before, .cn-apps-soon-pill::before, .cn-foot-pay::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #0b0c11;                              /* dark face */
  /* identical 8px chop + true-1px perpendicular inset as the buttons */
  clip-path: polygon(1.5px 1.5px, calc(100% - 8.62px) 1.5px, calc(100% - 1.5px) 8.62px, calc(100% - 1.5px) calc(100% - 1.5px), 8.62px calc(100% - 1.5px), 1.5px calc(100% - 8.62px));
}
.cn-apps-soon-pill::before { background: #120d04; } /* warm dark behind amber */

/* ════════════ API docs header — equal-width tabs + edge scroll arrows ════════════
   Tabs fill the row evenly when they fit; when too narrow they overflow
   horizontally and the edge arrows fade in only in the scrollable direction. */
.cn-docs-tabbar { position: relative; background: #0a0a0a; border-bottom: 1px solid var(--cn-border); }
.cn-docs-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; }
.cn-docs-tabs::-webkit-scrollbar { display: none; }
.cn-docs-tab { flex: 1 0 120px; min-width: 120px; display: flex; align-items: center; justify-content: center; gap: 9px; white-space: nowrap; }
.cn-docs-arrow { position: absolute; top: 0; bottom: 1px; width: 42px; display: flex; align-items: center; justify-content: center; z-index: 4; border: none; cursor: pointer; padding: 0; font-family: var(--cn-mono); font-size: 1.25rem; line-height: 1; color: var(--cn-blue); opacity: 0; pointer-events: none; transition: opacity .15s ease; }
.cn-docs-arrow.prev { left: 0; background: linear-gradient(90deg, #0a0a0a 60%, rgba(10,10,10,0)); }
.cn-docs-arrow.next { right: 0; background: linear-gradient(270deg, #0a0a0a 60%, rgba(10,10,10,0)); }
.cn-docs-arrow:hover { color: #fff; }
.cn-docs-tabbar.can-prev .cn-docs-arrow.prev { opacity: 1; pointer-events: auto; }
.cn-docs-tabbar.can-next .cn-docs-arrow.next { opacity: 1; pointer-events: auto; }

.cn-hero .cn-lead { margin-bottom: 1.1rem; line-height: 1.55; }


/* ════════════ Unified landing spacing system — consistent rhythm + breathing room ════════════
   Token scale in :root (--sp-1..9). One section padding, one header→body gap (48px),
   one grid gap (16px), one card padding (24px). Overrides the older ad-hoc values. */
.cn-section { padding: var(--section-py) 0; }
.cn-prompt-line { margin-bottom: var(--sp-3); }
.cn-h1 { margin: 0 0 var(--sp-4); }
.cn-h2 { margin: 0 0 var(--sp-3); }
.cn-lead { margin-bottom: var(--sp-5); }
.cn-hero .cn-lead { margin-bottom: var(--sp-5); line-height: 1.6; }
.cn-hero .cn-cta-row { margin-top: var(--sp-6); }
.cn-hero-who { margin-top: var(--sp-4); }
.cn-hero-visual { margin-top: var(--sp-8); }

/* One consistent section-header → body gap (48px) on every section's first content block */
.cn-why-grid, .cn-apps-grid, .cn-pricing, .cn-how, .cn-docs-inline, .cn-faq { margin-top: var(--section-gap); }

/* One grid gap (16px) across all card grids */
.cn-why-grid, .cn-apps-grid, .cn-pricing, .cn-how { gap: var(--grid-gap); }
.cn-app-list { gap: var(--sp-3); }
.cn-docs-inline { gap: var(--sp-6); }

/* One card padding (24px) */
.cn-why, .cn-apps-col, .cn-price, .cn-step { padding: var(--card-pad); }
.cn-app { padding: var(--sp-3); }
.cn-help { padding: var(--sp-5); margin-top: var(--sp-7); }

/* FAQ breathing room */
.cn-faq details { padding: var(--sp-5) var(--sp-2); }
.cn-faq p { margin: var(--sp-3) 0 0; }

/* Footer rhythm */
.cn-site-footer { margin-top: var(--sp-9); padding-top: var(--sp-7); padding-bottom: var(--sp-6); }
.cn-foot-grid { gap: var(--sp-6); }
.cn-foot-bottom { margin-top: var(--sp-7); padding-top: var(--sp-5); }