/* ── Skale Nova v5 — spec rail, founding offer, contact strip. Loads after v2 + v4 styles. ── */

/* ── One consistent page background (cream) throughout — no alternating dark/light sections.
     Dark elements (prob-card, stack-card, tl-proof, vsl-frame) stay as self-contained accent
     cards; full-width components that used to assume a dark section (hero copy, trust row,
     alt-table, FAQ) are recolored here for the cream ambient. ── */
.hero-wrap .hero { padding-bottom: 96px; }

.hero .subhead,
.hero .quiz-note,
.trust-row { color: var(--ink-sub); }
.bg-cream .kicker { color: var(--amber-dark); }

/* Dark accent cards keep light headings */
.prob-card h3, .stack-card h3 { color: var(--cream); }

/* Alternatives table, now on cream */
.alt-table th, .alt-table td { border-bottom: 1px solid var(--cream-rule); }
.alt-table thead th { border-bottom: 2px solid var(--ink); }
.alt-table td:first-child { color: var(--ink-sub); }
.alt-table td, .alt-table th { color: var(--ink); }
.alt-table td:not(:first-child) { color: var(--ink-sub); }
.alt-table td.col-sprint { color: var(--ink); }

/* FAQ, now on cream */
.faq-list { border-top: 1px solid var(--cream-rule); }
.faq-item { border-bottom: 1px solid var(--cream-rule); }
.faq-q { color: var(--ink); }
.faq-a p { color: var(--ink-sub); }

/* Footer, now on cream */
footer { background: var(--cream); color: var(--ink); }
footer .wordmark { color: var(--ink); }
footer .tagline, footer .legal, .footer-links a { color: var(--ink-sub); }

/* ── Spec rail (croevolution-style carousel of live pages) ── */
.specrail { overflow: hidden; }
.specrail .sub { max-width: 62ch; margin: 0; }
.rail { margin-top: 56px; padding: 6px 0 10px; }
.rail-track {
  display: flex;
  gap: 32px;
  width: max-content;
  animation: rail-scroll 70s linear infinite;
}
.rail:hover .rail-track,
.rail:focus-within .rail-track { animation-play-state: paused; }
@keyframes rail-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .rail-track { animation: none; } }

.rail-card {
  width: 324px;
  flex: none;
  display: block;
  text-decoration: none;
  color: inherit;
}
.rail-card .bf { transition: transform 0.18s ease, box-shadow 0.18s ease; }
.rail-card:hover .bf {
  transform: translateY(-5px);
  box-shadow: 0 18px 40px rgba(26, 26, 26, 0.16);
}
.rc-viewport {
  width: 100%;
  height: 500px;
  overflow: hidden;
  position: relative;
  background: #FFFFFF;
}
.rc-viewport iframe {
  width: 900px;
  height: 1389px;
  transform: scale(0.36);
  transform-origin: 0 0;
  border: 0;
  display: block;
  pointer-events: none;
}
.rail-card .mq-label { margin-top: 14px; }
.rail-card .mq-name { color: var(--ink); }
.rail-card .rc-open {
  display: inline-block;
  margin-top: 8px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-sub);
  border-bottom: 2px solid var(--amber);
  padding-bottom: 2px;
  transition: color 0.12s ease;
}
.rail-card:hover .rc-open { color: var(--amber-dark); }

/* placeholder card on cream */
.rail-card.rc-placeholder { cursor: default; }
.rail-card.rc-placeholder .bf { border-style: dashed; background: transparent; }
.rail-card.rc-placeholder:hover .bf { transform: none; box-shadow: none; }
.rail-card.rc-placeholder .bf-bar { background: transparent; border-bottom-style: dashed; }
.rail-card.rc-placeholder .bf-url { background: transparent; }
.rail-card.rc-placeholder .rc-viewport {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  padding: 24px;
}
.rail-card.rc-placeholder .ph-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-sub);
  text-align: center;
  max-width: 22ch;
  line-height: 1.55;
}
.rail-card.rc-placeholder .ph-text strong {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 17px;
  color: var(--ink);
  margin-bottom: 6px;
}

.rail-hint {
  margin: 26px 0 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-sub);
}

/* ── Founding offer ── */
.founding .price-callout { max-width: 24ch; }
.founding .spots {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--ink);
  color: var(--cream);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 8px 14px;
  margin: 0 0 22px;
}
.founding .spots::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--amber);
  flex: none;
}

/* ── Contact strip (Quo) ── */
.contact-strip {
  margin-top: 30px;
  max-width: 680px;
  background: #FFFFFF;
  border: 1px solid var(--cream-rule);
  border-left: 4px solid var(--amber);
  padding: 20px 26px;
  display: flex;
  align-items: baseline;
  gap: 10px 22px;
  flex-wrap: wrap;
}
.contact-strip .cs-label {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  font-size: 16px;
  color: var(--ink);
}
.contact-strip a {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--amber);
  padding-bottom: 2px;
  white-space: nowrap;
}
.contact-strip a:hover { color: var(--amber-dark); }
.contact-strip .cs-note {
  flex-basis: 100%;
  margin: 2px 0 0;
  font-size: 12.5px;
  color: var(--ink-sub);
}