/* ═══════════════════════════════════════════
   BINARY.LY / SKILLS — page-specific styles
   Reuses tokens from ../styles.css
   ═══════════════════════════════════════════ */

/* Syntax-highlight colors — swap with theme so code blocks stay readable. */
:root {
  --syntax-key: #C0D8FF;   /* light blue on dark code bg */
  --syntax-num: #D9B56A;   /* warm amber */
  --syntax-em:  #F0D896;   /* soft gold italic */
}
[data-theme="light"] {
  --syntax-key: #1463B8;   /* deep blue on cream code bg (6.6:1) */
  --syntax-num: #8C5A1E;   /* deep amber (5.2:1) */
  --syntax-em:  #7A5F1E;   /* dark gold italic (5.2:1) */
}

.sk-body { background: var(--bg); color: var(--text); }

/* ─── TOP NAV (matches /analytics/ pattern) ─────────── */
.top-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 52px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 2.5rem;
  border-bottom: 1px solid var(--border);
  background: rgba(var(--bg-rgb), 0.86);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 100;
}
.nav-back {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: 'Space Mono', monospace;
  font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted); text-decoration: none;
  transition: color 0.2s;
}
.nav-back:hover { color: var(--text); }
.nav-center {
  position: absolute;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-family: 'Space Mono', monospace;
  font-size: 0.62rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--text); pointer-events: none;
}
.nav-github {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  color: var(--muted);
  border: 1px solid transparent;
  border-radius: 2px;
  transition: color 0.2s, border-color 0.2s;
}
.nav-github:hover { color: var(--text); border-color: var(--border-2); }
.nav-right { display: inline-flex; align-items: center; gap: 0.85rem; }

/* ═════════════════════════════════════════════
   SHARED ELEMENTS
═════════════════════════════════════════════ */

.sk-eyebrow {
  font-family: 'Space Mono', monospace;
  font-size: 0.55rem; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--gold);
  display: inline-flex; align-items: center; gap: 0.85rem;
  margin-bottom: 1.5rem;
}
.sk-eyebrow-rule {
  display: inline-block; width: 28px; height: 1px;
  background: var(--gold);
}

.sk-h2 {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(2rem, 4.4vw, 3.7rem);
  font-weight: 400; letter-spacing: -0.02em; line-height: 1.05;
  color: var(--text);
}
.sk-h2 em {
  font-style: italic; color: var(--gold);
}

.sk-section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 3rem; flex-wrap: wrap;
  padding: 0 5vw 3.5rem;
}
.sk-section-aside {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.85rem; line-height: 1.7;
  color: var(--muted); max-width: 32ch;
  font-weight: 300;
}
.sk-aside-note {
  display: block;
  margin-top: 1rem; padding-top: 1rem;
  border-top: 1px dashed var(--border);
  font-size: 0.72rem; line-height: 1.65;
  color: var(--dim);
}
.sk-aside-note code {
  font-family: 'Space Mono', monospace;
  font-size: 0.85em; color: var(--gold);
  background: var(--gold-dim);
  padding: 0.05em 0.35em;
  border-radius: 2px;
}
.sk-aside-note em { font-style: italic; color: var(--muted); }

/* ═════════════════════════════════════════════
   HERO
═════════════════════════════════════════════ */

.sk-hero {
  position: relative; min-height: 100vh;
  display: grid;
  grid-template-columns: 50% 50%;
  align-items: center;
  padding-top: 72px;
  background: var(--bg);
  overflow: hidden;
}
.sk-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(circle, rgba(var(--fg-rgb), 0.06) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: radial-gradient(ellipse 75% 80% at 75% 50%, black 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 75% 80% at 75% 50%, black 20%, transparent 75%);
}
.sk-hero::after {
  content: ''; position: absolute;
  top: 0; right: 0; width: 1px; height: 100%;
  background: linear-gradient(to bottom, transparent, var(--border) 20%, var(--border) 80%, transparent);
  display: none; /* enable when needed */
}

.sk-hero-body {
  position: relative; z-index: 2;
  padding: 4rem 4rem 4rem 5vw;
  display: flex; flex-direction: column;
}

.sk-display {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(5rem, 11vw, 13rem);
  font-weight: 400; letter-spacing: -0.04em; line-height: 0.88;
  color: var(--text);
  margin: 0 0 1.8rem; padding-bottom: 0.04em;
}
.sk-display-line { display: block; overflow: hidden; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.sk-display-inner { display: block; }
.sk-display em {
  font-style: italic; color: var(--gold);
  font-feature-settings: 'ss01';
}

.sk-lead {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  line-height: 1.55; font-weight: 300;
  color: var(--muted); max-width: 38ch;
  margin-bottom: 2.2rem;
}
.sk-lead-mark {
  color: var(--text); white-space: nowrap;
  border-bottom: 1px dotted rgba(var(--fg-rgb), 0.25);
  padding-bottom: 1px;
}
.sk-rotator {
  display: block; position: relative; height: 1.55em;
  margin-top: 0.4rem;
  color: var(--gold);
  font-style: italic;
}
.sk-rotator-word {
  position: absolute; left: 0; top: 0;
  transition: opacity 0.55s ease;
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 1.05em;
  letter-spacing: -0.005em;
}

.sk-hero-meta {
  display: flex; align-items: center; gap: 1.4rem;
}
.sk-hero-link {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: 'Space Mono', monospace;
  font-size: 0.58rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text);
  padding: 0.85rem 1.2rem;
  border: 1px solid var(--border-2);
  background: rgba(var(--fg-rgb), 0.015);
  transition: border-color 0.25s, color 0.25s, background 0.25s;
}
.sk-hero-link:hover {
  border-color: var(--gold); color: var(--gold);
  background: var(--gold-dim);
}
.sk-hero-link--quiet {
  border: none; padding: 0.85rem 0;
  background: none; color: var(--muted);
}
.sk-hero-link--quiet:hover { background: none; color: var(--text); border-color: transparent; }
.sk-hero-divider {
  width: 1px; height: 18px; background: var(--border-2); display: inline-block;
}

/* ── Manifest panel ── */
.sk-hero-manifest {
  position: relative; z-index: 2;
  padding: 4rem 5vw 4rem 0;
  display: flex; align-items: center; justify-content: center;
}
.sk-manifest-frame {
  position: relative;
  width: 100%; max-width: 480px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(var(--fg-rgb), 0.04) inset,
    0 30px 60px -20px rgba(0,0,0,0.6),
    0 0 0 1px rgba(var(--gold-rgb), 0.04);
}
.sk-manifest-glow {
  position: absolute;
  inset: -40px;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(var(--gold-rgb), 0.08), transparent 60%);
  filter: blur(40px);
  z-index: 0;
}
.sk-manifest-bar {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.sk-manifest-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(var(--fg-rgb), 0.12);
}
.sk-manifest-dot:nth-child(1) { background: rgba(255,90,80,0.55); }
.sk-manifest-dot:nth-child(2) { background: rgba(255,180,60,0.55); }
.sk-manifest-dot:nth-child(3) { background: rgba(80,200,120,0.55); }
.sk-manifest-path {
  font-family: 'Space Mono', monospace;
  font-size: 0.5rem; letter-spacing: 0.14em; text-transform: lowercase;
  color: var(--dim); margin-left: 0.75rem;
}
.sk-manifest-live {
  margin-left: auto;
  font-family: 'Space Mono', monospace;
  font-size: 0.46rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold);
  display: inline-flex; align-items: center; gap: 0.4rem;
}
.sk-manifest-live-pulse {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 0 rgba(var(--gold-rgb), 0.7);
  animation: sk-pulse 2.2s cubic-bezier(0.4,0,0.6,1) infinite;
}
@keyframes sk-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(var(--gold-rgb), 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(var(--gold-rgb), 0);    }
  100% { box-shadow: 0 0 0 0   rgba(var(--gold-rgb), 0);    }
}

.sk-manifest-code {
  font-family: 'Space Mono', monospace;
  font-size: 0.78rem; line-height: 1.65;
  color: var(--text);
  padding: 1.4rem 1.6rem 1.4rem 1.6rem;
  margin: 0;
  min-height: 290px;
  white-space: pre;
  overflow: hidden;
  position: relative;
}
.mc-k { color: var(--syntax-key); }
.mc-s { color: var(--gold); }
.mc-p { color: rgba(var(--fg-rgb), 0.55); }
.mc-cur {
  display: inline-block;
  color: var(--gold);
  animation: sk-cur 0.9s steps(2) infinite;
  margin-left: 1px;
}
@keyframes sk-cur {
  0%, 50%  { opacity: 1; }
  51%, 100% { opacity: 0; }
}
.mc-done .mc-cur { animation: none; opacity: 0.4; }

.sk-manifest-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.7rem 1.1rem;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  font-family: 'Space Mono', monospace;
  font-size: 0.48rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--dim);
}
.sk-manifest-updated { color: var(--gold); }

/* ═════════════════════════════════════════════
   INSTALL
═════════════════════════════════════════════ */

.sk-install {
  padding: 8rem 0 7rem;
  position: relative;
  border-top: 1px solid var(--border);
  background: var(--bg);
}
.sk-install::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, var(--border) 1px, transparent 1px),
    linear-gradient(to bottom, var(--border) 1px, transparent 1px);
  background-size: 80px 80px;
  background-position: 5vw 50%;
  mask-image: radial-gradient(ellipse 65% 50% at 50% 50%, black 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 65% 50% at 50% 50%, black 20%, transparent 70%);
  opacity: 0.4;
}

.sk-terminal {
  position: relative; z-index: 1;
  margin: 0 5vw;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  max-width: 1100px;
  margin-left: auto; margin-right: auto;
  box-shadow:
    0 1px 0 rgba(var(--fg-rgb), 0.03) inset,
    0 40px 80px -30px rgba(0,0,0,0.7);
}

.sk-cmd {
  display: grid;
  grid-template-columns: 4rem auto 1fr auto;
  align-items: center;
  gap: 1.2rem;
  width: 100%;
  padding: 1.5rem 2rem;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  text-align: left;
  color: var(--text);
  font: inherit;
  position: relative;
  transition: background 0.25s;
}
.sk-cmd:last-child { border-bottom: none; }
.sk-cmd::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--gold);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
}
.sk-cmd:hover { background: var(--surface-2); }
.sk-cmd:hover::before { transform: scaleY(1); }
.sk-cmd.sk-copied { background: rgba(var(--gold-rgb), 0.06); }
.sk-cmd.sk-copied::before { transform: scaleY(1); }

.sk-cmd-num {
  font-family: 'Space Mono', monospace;
  font-size: 0.5rem; letter-spacing: 0.14em; color: var(--dim);
}
.sk-cmd-prompt {
  font-family: 'Space Mono', monospace;
  color: var(--gold);
  font-size: 1.05rem;
  font-weight: 700;
}
.sk-cmd-text {
  font-family: 'Space Mono', monospace;
  font-size: clamp(0.85rem, 1.4vw, 1.05rem);
  letter-spacing: -0.005em;
  display: inline-flex; align-items: baseline; gap: 0.5rem;
  flex-wrap: wrap;
  color: var(--text);
}
.sk-cmd-bin { color: var(--text); font-weight: 700; }
.sk-cmd-sub { color: var(--muted); }
.sk-cmd-arg { color: var(--gold); }
.sk-cmd-label {
  font-family: 'Space Mono', monospace;
  font-size: 0.52rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--dim);
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--border-2);
  border-radius: 2px;
  transition: color 0.25s, border-color 0.25s, background 0.25s;
}
.sk-cmd:hover .sk-cmd-label {
  color: var(--text); border-color: var(--border-2);
}
.sk-cmd.sk-copied .sk-cmd-label {
  color: var(--gold); border-color: var(--gold);
  background: var(--gold-dim);
}

.sk-install-foot {
  margin: 2rem 5vw 0;
  text-align: center;
  font-family: 'Space Mono', monospace;
  font-size: 0.52rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--dim);
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  flex-wrap: wrap;
}
.sk-install-foot a { color: var(--muted); transition: color 0.2s; }
.sk-install-foot a:hover { color: var(--gold); }
.sk-dot-sep { color: var(--border-2); }

/* ═════════════════════════════════════════════
   ARCHIVE
═════════════════════════════════════════════ */

.sk-archive {
  padding: 7rem 0 6rem;
  border-top: 1px solid var(--border);
  background: var(--bg);
}
.sk-archive-head { align-items: flex-end; }

.sk-archive-tally {
  display: inline-flex; align-items: baseline; gap: 0.6rem;
  font-family: 'Space Mono', monospace;
  color: var(--dim);
}
.sk-tally-num {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 2.4rem; line-height: 1;
  color: var(--gold); letter-spacing: -0.02em;
}
.sk-tally-num:nth-of-type(2) { color: var(--dim); font-style: italic; }
.sk-tally-lbl {
  font-size: 0.52rem; letter-spacing: 0.2em; text-transform: uppercase;
}
.sk-tally-lbl--em {
  color: var(--gold);
  font-style: italic;
}
.sk-tally-sep {
  display: inline-block; width: 16px; height: 1px;
  background: var(--border-2); margin: 0 0.4rem;
  transform: translateY(-0.4em);
}

.sk-rows {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.sk-row {
  position: relative;
  border-bottom: 1px solid var(--border);
}
.sk-row:last-child { border-bottom: none; }

.sk-row-head {
  display: grid;
  grid-template-columns: 4rem 1fr auto;
  align-items: center;
  gap: 2rem;
  padding: 2rem 5vw;
  width: 100%;
  background: none; border: none;
  text-align: left;
  color: var(--text);
  font: inherit;
  position: relative;
  transition: background 0.3s;
}
.sk-row-head::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--gold);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
}
.sk-row--live .sk-row-head:hover { background: var(--surface); }
.sk-row--live .sk-row-head:hover::before { transform: scaleY(1); }
.sk-row--live.sk-row--open .sk-row-head { background: var(--surface); }
.sk-row--live.sk-row--open .sk-row-head::before { transform: scaleY(1); }

.sk-row-head--static { cursor: default; }

.sk-row-num {
  font-family: 'Space Mono', monospace;
  font-size: 0.55rem; letter-spacing: 0.16em; color: var(--dim);
  align-self: start; padding-top: 0.7rem;
}

.sk-row-body { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.sk-row-name {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  font-weight: 400; letter-spacing: -0.02em; line-height: 1;
  color: var(--text);
}
.sk-row-name em { font-style: italic; color: var(--gold); }
.sk-row-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.86rem; line-height: 1.55; font-weight: 300;
  color: var(--muted); max-width: 70ch;
}

.sk-row-meta {
  display: flex; align-items: center; gap: 1.5rem;
  flex-shrink: 0;
}
.sk-row-stat {
  display: flex; flex-direction: column; gap: 0.25rem;
  text-align: right;
}
.sk-row-stat-lbl {
  font-family: 'Space Mono', monospace;
  font-size: 0.42rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--dim);
}
.sk-row-stat-val {
  font-family: 'Space Mono', monospace;
  font-size: 0.78rem; letter-spacing: 0.04em;
  color: var(--text);
}
.sk-row-stat--quiet .sk-row-stat-val { color: var(--muted); }

.sk-row-badge {
  font-family: 'Space Mono', monospace;
  font-size: 0.46rem; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border-radius: 2px;
  display: inline-flex; align-items: center; gap: 0.45rem;
}
.sk-row-badge--live {
  color: var(--gold);
  background: var(--gold-dim);
  border: 1px solid rgba(var(--gold-rgb), 0.22);
}
.sk-row-badge-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 6px rgba(var(--gold-rgb), 0.7);
  animation: sk-pulse 2.2s infinite;
}
.sk-row-badge--soon {
  color: var(--muted);
  background: rgba(var(--fg-rgb), 0.02);
  border: 1px solid var(--border);
}
.sk-row-badge--idea {
  color: var(--dim);
  background: rgba(var(--fg-rgb), 0.01);
  border: 1px dashed var(--border);
}
.sk-row-badge--call {
  color: var(--gold);
  background: transparent;
  border: 1px solid rgba(var(--gold-rgb), 0.3);
}

.sk-row-chev {
  width: 36px; height: 36px;
  border: 1px solid var(--border-2);
  display: flex; align-items: center; justify-content: center;
  color: var(--dim);
  transition: border-color 0.25s, color 0.25s, transform 0.4s cubic-bezier(0.4,0,0.2,1);
}
.sk-row--live .sk-row-head:hover .sk-row-chev,
.sk-row--call:hover .sk-row-chev {
  border-color: var(--gold); color: var(--gold);
}
.sk-row--call:hover .sk-row-chev { transform: rotate(-45deg); }
.sk-row--open .sk-row-chev { transform: rotate(180deg); border-color: var(--gold); color: var(--gold); }
.sk-row-chev--locked {
  border-color: var(--border); color: var(--dim);
  background: rgba(0,0,0,0.2);
}

/* Ghost rows */
.sk-row--ghost .sk-row-name { color: var(--muted); }
.sk-row--ghost .sk-row-desc { color: var(--dim); }
.sk-row--ghost .sk-row-head { opacity: 0.78; }

/* Open call row */
.sk-row--call .sk-row-head--call {
  display: grid;
  grid-template-columns: 4rem 1fr auto;
  align-items: center; gap: 2rem;
  padding: 2rem 5vw;
  color: var(--text);
}
.sk-row--call .sk-row-head--call:hover { background: var(--surface); }
.sk-row--call .sk-row-head--call::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--gold);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
}
.sk-row--call .sk-row-head--call:hover::before { transform: scaleY(1); }

/* ── Row detail (expandable) ── */
.sk-row-detail {
  padding: 0 5vw 2.5rem;
  background: var(--surface);
  border-top: 1px dashed var(--border);
  animation: sk-slide 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.sk-row-detail[hidden] { display: none; }
@keyframes sk-slide {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.sk-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3rem;
  padding: 2.5rem 0 1.5rem;
}
.sk-detail-col { min-width: 0; }
.sk-detail-lbl {
  font-family: 'Space Mono', monospace;
  font-size: 0.5rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--gold);
  display: inline-flex; align-items: center; gap: 0.7rem;
  margin-bottom: 1rem;
}
.sk-detail-lbl-rule {
  display: inline-block; width: 18px; height: 1px;
  background: var(--gold);
}
.sk-detail-lbl--gap { margin-top: 1.6rem; }

.sk-yaml {
  font-family: 'Space Mono', monospace;
  font-size: 0.78rem; line-height: 1.7;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1.1rem 1.3rem;
  white-space: pre-wrap;
}
.y-key { color: var(--syntax-key); }
.y-str { color: var(--gold); }
.y-dim { color: var(--dim); }
.y-num { color: var(--syntax-num); }
.y-em  { font-style: italic; color: var(--gold); }
.y-h1  { color: var(--text); font-weight: 700; }

.sk-triggers {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 0.55rem;
}
.sk-triggers li {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.92rem; line-height: 1.5;
  color: var(--text);
  font-style: italic;
  padding-left: 1.2rem;
  position: relative;
}
.sk-triggers li::before {
  content: '›'; position: absolute; left: 0; top: 0;
  color: var(--gold); font-style: normal; font-weight: 700;
}
.sk-trigger-q { color: var(--dim); font-style: normal; font-weight: 400; }

.sk-tags {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
}
.sk-tag {
  font-family: 'Space Mono', monospace;
  font-size: 0.5rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
  padding: 0.32rem 0.7rem;
  border: 1px solid var(--border-2);
  border-radius: 2px;
  background: rgba(var(--fg-rgb), 0.015);
}

.sk-detail-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
  padding-top: 1.6rem;
  border-top: 1px dashed var(--border);
}
.sk-detail-link {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: 'Space Mono', monospace;
  font-size: 0.55rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted);
  transition: color 0.2s;
}
.sk-detail-link:hover { color: var(--gold); }

.sk-detail-copy {
  display: inline-flex; align-items: center; gap: 1rem;
  background: var(--bg); border: 1px solid var(--border);
  padding: 0.6rem 0.8rem 0.6rem 1rem;
  border-radius: 2px;
  cursor: pointer; font: inherit;
  transition: border-color 0.25s;
}
.sk-detail-copy:hover { border-color: var(--gold); }
.sk-detail-copy.sk-copied { border-color: var(--gold); background: var(--gold-dim); }
.sk-detail-copy-mono {
  font-family: 'Space Mono', monospace;
  font-size: 0.7rem; color: var(--text);
}
.sk-detail-copy-label {
  font-family: 'Space Mono', monospace;
  font-size: 0.48rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold);
  padding: 0.3rem 0.55rem;
  border: 1px solid rgba(var(--gold-rgb), 0.3);
  border-radius: 2px;
}

/* ═════════════════════════════════════════════
   ANATOMY
═════════════════════════════════════════════ */

.sk-anatomy {
  padding: 7rem 0 7rem;
  border-top: 1px solid var(--border);
  background: var(--bg);
}
.sk-anatomy-doc {
  margin: 0 5vw;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  max-width: 1100px;
  margin-left: auto; margin-right: auto;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,0.5);
}
.sk-anatomy-bar {
  padding: 0.75rem 1.2rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.sk-anatomy-path {
  font-family: 'Space Mono', monospace;
  font-size: 0.52rem; letter-spacing: 0.14em; text-transform: lowercase;
  color: var(--dim);
}
.sk-anatomy-pre {
  font-family: 'Space Mono', monospace;
  font-size: 0.86rem; line-height: 1.75;
  color: var(--text);
  padding: 2rem 2.5rem;
  margin: 0;
  white-space: pre-wrap;
  overflow-x: auto;
}
.sk-anno-row {
  display: block;
  color: var(--gold);
  font-family: 'Space Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  margin-top: 0.4rem;
}
.sk-anno-bracket { color: var(--gold); }
.sk-anno-bracket em { font-style: italic; color: var(--syntax-em); }
.sk-anno-arrow { color: var(--gold); opacity: 0.6; }

/* ═════════════════════════════════════════════
   CTA
═════════════════════════════════════════════ */

.sk-cta {
  padding: 9rem 5vw 7rem;
  border-top: 1px solid var(--border);
  background: var(--bg);
  position: relative; overflow: hidden;
}
.sk-cta::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(var(--gold-rgb), 0.07) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, black 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, black 20%, transparent 75%);
}
.sk-cta-inner {
  position: relative; z-index: 1;
  max-width: 900px; margin: 0 auto;
  text-align: center;
}
.sk-cta-eyebrow {
  display: inline-flex; align-items: center; gap: 1.2rem;
  font-family: 'Space Mono', monospace;
  font-size: 0.52rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 2.5rem;
}
.sk-cta-eyebrow-rule {
  display: inline-block; width: 38px; height: 1px;
  background: var(--gold);
}
.sk-cta-h {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(2.4rem, 5.6vw, 4.8rem);
  font-weight: 400; letter-spacing: -0.02em; line-height: 1.1;
  color: var(--text);
  margin-bottom: 3rem;
}
.sk-cta-h em { font-style: italic; color: var(--gold); }
.sk-cta-actions {
  display: inline-flex; align-items: center; gap: 1rem; flex-wrap: wrap; justify-content: center;
}
.sk-cta-btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: 'Space Mono', monospace;
  font-size: 0.58rem; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 1rem 1.6rem;
  border-radius: 2px;
  transition: all 0.25s;
}
.sk-cta-btn--primary {
  background: var(--text); color: var(--bg);
}
.sk-cta-btn--primary:hover { background: var(--gold); color: var(--bg); }
.sk-cta-btn--quiet {
  background: transparent; color: var(--muted);
  border: 1px solid var(--border-2);
}
.sk-cta-btn--quiet:hover { color: var(--text); border-color: var(--text); }

/* ═════════════════════════════════════════════
   RESPONSIVE
═════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .sk-hero { grid-template-columns: 1fr; padding-top: 110px; min-height: auto; }
  .sk-hero-body { padding: 2rem 6vw; }
  .sk-hero-manifest { padding: 1rem 6vw 4rem; }
  .sk-manifest-frame { max-width: 560px; margin: 0 auto; }
  .sk-display { font-size: clamp(4.5rem, 12vw, 8rem); }

  .sk-detail-grid { grid-template-columns: 1fr; gap: 2rem; }
  .sk-section-head { padding: 0 6vw 2.5rem; }
}

@media (max-width: 768px) {
  .sk-hero-body { padding: 2rem 6vw; }
  .sk-eyebrow { font-size: 0.5rem; letter-spacing: 0.24em; }

  .sk-row-head { grid-template-columns: 2.5rem 1fr; gap: 1rem; padding: 1.5rem 6vw; }
  .sk-row-meta { grid-column: 1 / -1; padding-left: 3.5rem; padding-top: 0.5rem; gap: 1rem; flex-wrap: wrap; }
  .sk-row-stat { flex-direction: row; gap: 0.5rem; align-items: baseline; }
  .sk-row-chev { display: none; }
  .sk-row-num { padding-top: 0.4rem; }

  .sk-row--call .sk-row-head--call { grid-template-columns: 2.5rem 1fr; gap: 1rem; padding: 1.5rem 6vw; }

  .sk-row-detail { padding: 0 6vw 2rem; }
  .sk-detail-grid { padding: 2rem 0 1rem; }

  .sk-cmd { grid-template-columns: 2.5rem auto 1fr; padding: 1.2rem 1.4rem; gap: 0.8rem; }
  .sk-cmd-label { grid-column: 3; justify-self: end; }
  .sk-cmd-text { font-size: 0.78rem; }

  .sk-anatomy-pre { padding: 1.4rem 1.5rem; font-size: 0.78rem; }
  .sk-archive-tally { font-size: 0.9em; }
  .sk-tally-num { font-size: 1.8rem; }

  .sk-install { padding: 5rem 0 4rem; }
  .sk-archive { padding: 5rem 0 4rem; }
  .sk-anatomy { padding: 5rem 0 5rem; }
  .sk-cta { padding: 6rem 6vw 5rem; }
}

/* ─── TRADEMARK DISCLAIMER ──────────────── */
.sk-trademark {
  font-family: 'Space Mono', monospace;
  font-size: 0.5rem; line-height: 1.7; letter-spacing: 0.08em;
  color: var(--dim);
  text-align: center;
  padding: 1.25rem 5vw 2rem;
  max-width: 720px; margin: 0 auto;
  border-top: 1px solid var(--border);
}

/* Reduced motion: respect existing override in ../styles.css */
@media (prefers-reduced-motion: reduce) {
  .sk-rotator-word { transition: none; }
  .sk-manifest-live-pulse,
  .sk-row-badge-dot { animation: none; }
  .mc-cur { animation: none; opacity: 0.4; }
}