/*
 * =========================================================
 * OLYTIC SOLUTIONS - Your Roadmap Page Styles
 * roadmap.css
 *
 * Conversion-focused layout: hero that sells the Roadmap,
 * three-step "how it works" strip, then the intake form.
 * Form reuses contact.css f-* classes for consistency.
 *
 * Requires: tokens.css, typography.css, buttons.css,
 *           nav.css, footer.css, layout.css, contact.css
 * =========================================================
 */


/* ─────────────────────────────────────────────────────── */
/* HERO                                                    */
/* ─────────────────────────────────────────────────────── */

.roadmap-hero {
  padding-top: var(--space-20);
  padding-bottom: var(--space-16);
  text-align: center;
}

.roadmap-hero__inner {
  max-width: 720px;
  margin: 0 auto;
}

.roadmap-hero__accent-rule {
  width: 48px;
  height: 2px;
  background-color: var(--color-gold);
  margin: 0 auto var(--space-6);
}

.roadmap-hero__headline {
  font-size: clamp(var(--text-2xl), 3.5vw, var(--text-4xl));
  font-weight: var(--weight-bold);
  color: var(--color-obsidian);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-5);
}

.roadmap-hero__sub {
  font-size: var(--text-md);
  color: var(--color-body-steel);
  line-height: var(--leading-body);
  max-width: 560px;
  margin: 0 auto var(--space-10);
}

/* ─── Trust Signals (reuse pattern from contact) ─────── */

.roadmap-trust {
  display: flex;
  justify-content: center;
  gap: var(--space-8);
  flex-wrap: wrap;
}

.roadmap-trust__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--weight-medium);
  color: var(--color-navy);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.roadmap-trust__icon {
  color: var(--color-gold);
  flex-shrink: 0;
}


/* ─────────────────────────────────────────────────────── */
/* HOW IT WORKS - THREE STEPS                              */
/* ─────────────────────────────────────────────────────── */

.roadmap-steps {
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
}

.roadmap-steps__header {
  text-align: center;
  margin-bottom: var(--space-12);
}

.roadmap-steps__header h2 {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-obsidian);
  letter-spacing: var(--tracking-tight);
  max-width: none;
}

.roadmap-steps__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  max-width: 900px;
  margin: 0 auto;
}

.roadmap-step {
  text-align: center;
}

.roadmap-step__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 2px solid var(--color-gold);
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-gold);
  margin-bottom: var(--space-4);
}

.roadmap-step h3 {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--color-obsidian);
  margin-bottom: var(--space-2);
}

.roadmap-step p {
  font-size: var(--text-sm);
  color: var(--color-body-steel);
  line-height: var(--leading-body);
  max-width: 260px;
  margin: 0 auto;
}


/* ─────────────────────────────────────────────────────── */
/* FORM SECTION                                            */
/*                                                         */
/* Reuses f-* classes from contact.css. Only adds the      */
/* wrapper and any roadmap-specific tweaks.                 */
/* ─────────────────────────────────────────────────────── */

.roadmap-form-section {
  padding-top: var(--space-16);
  padding-bottom: var(--space-20);
}

.roadmap-form-wrapper {
  max-width: 900px;
  margin: 0 auto;
}

/* ─── Placeholder container for future LLM guided form ── */
/* When the guided form is ready, replace #roadmapForm     */
/* with the new component. The wrapper stays.              */

.roadmap-form-box {
  background: #FFFFFF;
  border: var(--border-default);
  border-top: 3px solid var(--color-gold);
  padding: var(--space-10);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.roadmap-form-box__head {
  margin-bottom: var(--space-8);
}

.roadmap-form-box__head h2 {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-obsidian);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-2);
  max-width: none;
}

.roadmap-form-box__head p {
  font-size: var(--text-sm);
  color: var(--color-muted);
  line-height: var(--leading-body);
  margin: 0;
}


/* ─── Textarea override for roadmap (taller) ────────────── */

.roadmap-form-box .f-textarea {
  min-height: 160px;
}


/* ─── Role/industry select ──────────────────────────────── */

.f-select {
  width: 100%;
  background: var(--color-surface);
  border: var(--border-default);
  color: var(--color-obsidian);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  padding: var(--space-3) var(--space-4);
  outline: none;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition:
    border-color var(--transition-fast),
    box-shadow   var(--transition-fast);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

.f-select:focus {
  border-color: rgba(200, 169, 110, 0.55);
  box-shadow: 0 0 0 3px rgba(200, 169, 110, 0.10);
}

/* Placeholder-style first option */
.f-select option[value=""] {
  color: var(--color-muted);
}


/* ─────────────────────────────────────────────────────── */
/* TYWIN CHAT UI                                           */
/* ─────────────────────────────────────────────────────── */

/* ─── Outer shell ─────────────────────────────────────── */

.tywin-chat {
  width: 100%;
}

/* ─── Start screen ────────────────────────────────────── */

.tywin-start {
  background: #FFFFFF;
  border: var(--border-default);
  border-top: 3px solid var(--color-gold);
  padding: var(--space-10);
}

.tywin-start__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-teal);
  margin-bottom: var(--space-4);
}

.tywin-start__headline {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-obsidian);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-3);
  max-width: none;
}

.tywin-start__sub {
  font-size: var(--text-sm);
  color: var(--color-muted);
  line-height: var(--leading-body);
  margin-bottom: var(--space-8);
}

/* ─── Chat panel ──────────────────────────────────────── */

.tywin-panel {
  background: #FFFFFF;
  border: var(--border-default);
  border-top: 3px solid var(--color-gold);
  display: flex;
  flex-direction: column;
  min-height: 480px;
}

/* ─── Progress bar ────────────────────────────────────── */

.tywin-progress {
  height: 3px;
  background: #E4E4E2;
  flex-shrink: 0;
}

.tywin-progress__bar {
  height: 100%;
  background: var(--color-gold);
  transition: width 600ms ease;
}

/* ─── Message thread ──────────────────────────────────── */

.tywin-messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-6) var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  scroll-behavior: smooth;
}

/* Agent bubble */
.tywin-bubble {
  max-width: 88%;
  align-self: flex-start;
}

.tywin-bubble__inner {
  background: var(--color-surface);
  border: var(--border-default);
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--color-body-steel);
  white-space: pre-wrap;
}

/* Context teaching moment — gold left border */
.tywin-bubble__inner.is-context {
  border-left: 3px solid var(--color-gold);
  background: #FDFCF8;
  font-size: 13px;
  color: var(--color-muted);
}

/* User bubble */
.tywin-bubble--user {
  align-self: flex-end;
}

.tywin-bubble--user .tywin-bubble__inner {
  background: var(--color-navy);
  border-color: var(--color-navy);
  color: #ffffff;
}

/* ─── Typing indicator ────────────────────────────────── */

.tywin-typing {
  padding: var(--space-4) var(--space-8);
  flex-shrink: 0;
}

.tywin-typing__dots {
  display: flex;
  gap: 5px;
  align-items: center;
}

.tywin-typing__dots span {
  width: 6px;
  height: 6px;
  background: var(--color-muted);
  border-radius: 50%;
  animation: tywin-dot 1.2s ease-in-out infinite;
}

.tywin-typing__dots span:nth-child(2) { animation-delay: 0.2s; }
.tywin-typing__dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes tywin-dot {
  0%, 80%, 100% { transform: scale(0.7); opacity: 0.4; }
  40%           { transform: scale(1);   opacity: 1;   }
}

/* ─── Research phase animation ────────────────────────── */

.tywin-research {
  padding: var(--space-3) var(--space-8);
  flex-shrink: 0;
}

.tywin-research__inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-teal);
}

.tywin-research__pulse {
  width: 8px;
  height: 8px;
  background: var(--color-teal);
  border-radius: 50%;
  animation: tywin-pulse 1.5s ease-in-out infinite;
}

@keyframes tywin-pulse {
  0%, 100% { opacity: 1;   transform: scale(1);    }
  50%       { opacity: 0.3; transform: scale(0.75); }
}

/* ─── Input area ──────────────────────────────────────── */

.tywin-input-area {
  border-top: var(--border-default);
  padding: var(--space-5) var(--space-8);
  flex-shrink: 0;
  background: #FAFAFA;
}

/* MCQ option buttons */
.tywin-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.tywin-option-btn {
  text-align: left;
  background: #FFFFFF;
  border: var(--border-default);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-body-steel);
  cursor: pointer;
  transition:
    border-color var(--transition-fast),
    background   var(--transition-fast),
    color        var(--transition-fast);
  line-height: var(--leading-normal);
}

.tywin-option-btn:hover {
  border-color: var(--color-gold);
  background: #FDFCF8;
  color: var(--color-obsidian);
}

.tywin-option-btn.is-selected {
  background: var(--color-navy);
  border-color: var(--color-navy);
  color: #ffffff;
}

/* Multi-select checkboxes */
.tywin-multiselect {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.tywin-multi-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  background: #FFFFFF;
  border: var(--border-default);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  transition:
    border-color var(--transition-fast),
    background   var(--transition-fast);
}

.tywin-multi-item:hover {
  border-color: var(--color-gold);
  background: #FDFCF8;
}

.tywin-multi-item.is-checked {
  background: #F0F4FA;
  border-color: var(--color-navy);
}

.tywin-multi-item input[type="checkbox"] {
  margin-top: 2px;
  accent-color: var(--color-navy);
  flex-shrink: 0;
}

.tywin-multi-item label {
  font-size: var(--text-sm);
  color: var(--color-body-steel);
  line-height: var(--leading-normal);
  cursor: pointer;
}

.tywin-multiselect-confirm {
  margin-top: var(--space-3);
}

/* Free text input */
.tywin-text-input {
  display: flex;
  gap: var(--space-3);
  align-items: flex-end;
}

.tywin-textarea {
  flex: 1;
  background: #FFFFFF;
  border: var(--border-default);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-obsidian);
  padding: var(--space-3) var(--space-4);
  resize: none;
  outline: none;
  line-height: var(--leading-body);
  transition:
    border-color var(--transition-fast),
    box-shadow   var(--transition-fast);
}

.tywin-textarea:focus {
  border-color: rgba(200, 169, 110, 0.6);
  box-shadow: 0 0 0 3px rgba(200, 169, 110, 0.10);
}

.tywin-textarea::placeholder {
  color: var(--color-muted);
}

.tywin-send-btn {
  background: var(--color-navy);
  border: none;
  color: #ffffff;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition-fast);
}

.tywin-send-btn:hover:not(:disabled) {
  background: var(--color-obsidian);
}

.tywin-send-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Mic / dictation button (hidden on unsupported browsers) */
.tywin-mic-btn {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-muted);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.tywin-mic-btn:hover {
  border-color: var(--color-navy);
  color: var(--color-navy);
}

/* ─── Preview card (post-conversation) ───────────────── */

.tywin-preview {
  background: #FFFFFF;
  border: var(--border-default);
  border-top: 3px solid var(--color-gold);
  padding: var(--space-10);
}

.tywin-preview__tier-block {
  background: var(--color-navy);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
}

.tywin-preview__tier-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-2);
}

.tywin-preview__tier-name {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: #ffffff;
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-1);
}

.tywin-preview__tier-tagline {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.55);
}

.tywin-preview__leverage-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: var(--space-2);
}

.tywin-preview__leverage-text {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--color-obsidian);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-8);
  border-left: 3px solid var(--color-gold);
  padding-left: var(--space-4);
}

/* Email gate */
.tywin-gate__heading {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--color-obsidian);
  margin-bottom: var(--space-2);
}

.tywin-gate__sub {
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin-bottom: var(--space-5);
  line-height: var(--leading-body);
}

.tywin-gate__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.tywin-gate__input {
  width: 100%;
  background: var(--color-surface);
  border: var(--border-default);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-obsidian);
  padding: var(--space-3) var(--space-4);
  outline: none;
  transition:
    border-color var(--transition-fast),
    box-shadow   var(--transition-fast);
  box-sizing: border-box;
}

.tywin-gate__input:focus {
  border-color: rgba(200, 169, 110, 0.6);
  box-shadow: 0 0 0 3px rgba(200, 169, 110, 0.10);
}

.tywin-gate__input::placeholder {
  color: var(--color-muted);
}

.tywin-gate__input.has-error {
  border-color: var(--color-danger);
}

.tywin-gate__error {
  font-size: var(--text-xs);
  color: var(--color-danger);
  margin-top: var(--space-1);
  display: none;
}

.tywin-gate__error.visible {
  display: block;
}

.tywin-gate__submit {
  width: 100%;
  margin-top: var(--space-2);
}

.tywin-gate__escape {
  display: block;
  text-align: center;
  margin-top: var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.tywin-gate__escape:hover {
  color: var(--color-teal);
}

/* ─── Success state ───────────────────────────────────── */

.tywin-success {
  background: #FFFFFF;
  border: var(--border-default);
  border-top: 3px solid var(--color-gold);
  padding: var(--space-10);
  text-align: center;
}

.tywin-success__icon {
  width: 48px;
  height: 48px;
  background: var(--color-navy);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-5);
  color: var(--color-gold);
}

.tywin-success__heading {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-obsidian);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-3);
}

.tywin-success__body {
  font-size: var(--text-sm);
  color: var(--color-muted);
  line-height: var(--leading-body);
  max-width: 400px;
  margin: 0 auto;
}

/* ─── Bad-faith exit state ───────────────────────────── */

.tywin-exit {
  background: #FFFFFF;
  border: var(--border-default);
  border-top: 3px solid var(--color-muted);
  padding: var(--space-10);
  text-align: center;
}

.tywin-exit__message {
  font-size: var(--text-base);
  color: var(--color-muted);
  line-height: var(--leading-body);
  max-width: 400px;
  margin: 0 auto var(--space-5);
}

.tywin-exit__restart {
  font-size: var(--text-sm);
  color: var(--color-teal);
  text-decoration: none;
}

.tywin-exit__restart:hover {
  text-decoration: underline;
}

/* ─── Error banner ────────────────────────────────────── */

.tywin-error-banner {
  background: #FEF2F2;
  border: 1px solid #FECACA;
  color: var(--color-danger);
  font-size: var(--text-sm);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  display: none;
}

.tywin-error-banner.visible {
  display: block;
}

/* ─── Responsive ──────────────────────────────────────── */

@media (max-width: 640px) {
  .tywin-messages {
    padding: var(--space-4) var(--space-5);
  }

  .tywin-input-area {
    padding: var(--space-4) var(--space-5);
  }

  .tywin-gate__fields {
    grid-template-columns: 1fr;
  }

  .tywin-start,
  .tywin-preview,
  .tywin-success {
    padding: var(--space-6) var(--space-5);
  }
}


/* ═════════════════════════════════════════════════════════ */
/* DARK HERO OVERRIDE — Disney ride / deep-space treatment  */
/* Overrides section--surface with a navy starfield look.   */
/* ═════════════════════════════════════════════════════════ */

.roadmap-hero {
  position: relative;
  overflow: hidden;
  background: #0C0C0C !important;
  border-bottom: 1px solid rgba(200, 169, 110, 0.15) !important;
  padding-top: var(--space-20);
  padding-bottom: var(--space-20);
}

/* Depth radial gradients — gold bloom at base, teal at corner */
.roadmap-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 55% at 50% 110%, rgba(200, 169, 110, 0.09) 0%, transparent 65%),
    radial-gradient(ellipse 45% 55% at 10% -5%,  rgba(13, 107, 110, 0.07) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* Shimmer sweep — slow diagonal gold streak */
.roadmap-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    118deg,
    transparent   0%,
    transparent  38%,
    rgba(200, 169, 110, 0.028) 50%,
    transparent  62%,
    transparent 100%
  );
  animation: hero-shimmer 11s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes hero-shimmer {
  0%        { transform: translateX(-120%) skewX(-12deg); }
  40%, 100% { transform: translateX(320%)  skewX(-12deg); }
}

/* All inner content above the bg layers */
.roadmap-hero .container {
  position: relative;
  z-index: 1;
}

/* ─── Text color overrides for dark background ──────────── */

.roadmap-hero .eyebrow {
  color: var(--color-gold);
  opacity: 0.9;
}

.roadmap-hero .roadmap-hero__headline {
  color: #FFFFFF;
}

.roadmap-hero .roadmap-hero__sub {
  color: rgba(255, 255, 255, 0.62);
}

.roadmap-hero .roadmap-hero__accent-rule {
  opacity: 0.55;
}

/* ─── Trust signals on dark bg ──────────────────────────── */

.roadmap-hero .roadmap-trust__item {
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.08em;
}

.roadmap-hero .roadmap-trust__icon {
  color: rgba(200, 169, 110, 0.7);
}


/* ─────────────────────────────────────────────────────── */
/* HERO STARDUST — golden + white dot starfield            */
/* CSS layers twinkle; JS canvas adds 500+ static stars.  */
/* ─────────────────────────────────────────────────────── */

.roadmap-hero__stars,
.roadmap-hero__stars::before,
.roadmap-hero__stars::after {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 1px;
  height: 1px;
  background: transparent;
  z-index: 0;
  pointer-events: none;
}

/* Layer 1 — gold stardust (twinkling, ~100 dots) */
.roadmap-hero__stars {
  box-shadow:
     40px   15px 0 0 rgba(200,169,110,0.55),  115px   65px 0 0 rgba(200,169,110,0.48),
    200px   30px 0 0 rgba(200,169,110,0.62),  290px   80px 0 0 rgba(200,169,110,0.44),
    380px   20px 0 0 rgba(200,169,110,0.70),  455px   70px 0 0 rgba(200,169,110,0.50),
    540px   40px 0 0 rgba(200,169,110,0.58),  630px   85px 0 0 rgba(200,169,110,0.42),
    720px   25px 0 0 rgba(200,169,110,0.66),  810px   75px 0 0 rgba(200,169,110,0.54),
    900px   10px 0 0 rgba(200,169,110,0.60),  995px   60px 0 0 rgba(200,169,110,0.46),
   1085px   35px 0 0 rgba(200,169,110,0.68),  1185px   80px 0 0 rgba(200,169,110,0.52),
   1305px   45px 0 0 rgba(200,169,110,0.58),  1410px   20px 0 0 rgba(200,169,110,0.44),
     55px  120px 0 0 rgba(200,169,110,0.65),   145px  165px 0 0 rgba(200,169,110,0.48),
    235px  140px 0 0 rgba(200,169,110,0.56),   325px  190px 0 0 rgba(200,169,110,0.40),
    415px  115px 0 0 rgba(200,169,110,0.72),   510px  175px 0 0 rgba(200,169,110,0.50),
    595px  130px 0 0 rgba(200,169,110,0.60),   680px  180px 0 0 rgba(200,169,110,0.44),
    770px  110px 0 0 rgba(200,169,110,0.66),   860px  170px 0 0 rgba(200,169,110,0.52),
    950px  145px 0 0 rgba(200,169,110,0.58),  1040px  195px 0 0 rgba(200,169,110,0.46),
   1130px  125px 0 0 rgba(200,169,110,0.64),  1230px  175px 0 0 rgba(200,169,110,0.54),
   1340px  155px 0 0 rgba(200,169,110,0.48),    70px  215px 0 0 rgba(200,169,110,0.60),
    160px  260px 0 0 rgba(200,169,110,0.44),   255px  235px 0 0 rgba(200,169,110,0.56),
    345px  285px 0 0 rgba(200,169,110,0.38),   435px  210px 0 0 rgba(200,169,110,0.68),
    520px  275px 0 0 rgba(200,169,110,0.50),   610px  230px 0 0 rgba(200,169,110,0.62),
    695px  280px 0 0 rgba(200,169,110,0.42),   785px  225px 0 0 rgba(200,169,110,0.58),
    875px  265px 0 0 rgba(200,169,110,0.46),   965px  240px 0 0 rgba(200,169,110,0.64),
   1055px  290px 0 0 rgba(200,169,110,0.52),  1145px  215px 0 0 rgba(200,169,110,0.60),
   1245px  270px 0 0 rgba(200,169,110,0.44),  1350px  245px 0 0 rgba(200,169,110,0.56),
     25px  315px 0 0 rgba(200,169,110,0.66),   130px  370px 0 0 rgba(200,169,110,0.48),
    220px  335px 0 0 rgba(200,169,110,0.58),   310px  385px 0 0 rgba(200,169,110,0.42),
    400px  310px 0 0 rgba(200,169,110,0.70),   490px  375px 0 0 rgba(200,169,110,0.54),
    580px  330px 0 0 rgba(200,169,110,0.62),   670px  380px 0 0 rgba(200,169,110,0.44),
    760px  320px 0 0 rgba(200,169,110,0.66),   850px  365px 0 0 rgba(200,169,110,0.50),
    940px  340px 0 0 rgba(200,169,110,0.60),  1030px  395px 0 0 rgba(200,169,110,0.46),
   1120px  315px 0 0 rgba(200,169,110,0.64),  1220px  370px 0 0 rgba(200,169,110,0.52),
   1360px  345px 0 0 rgba(200,169,110,0.58),    45px  415px 0 0 rgba(200,169,110,0.48),
    140px  470px 0 0 rgba(200,169,110,0.62),   230px  435px 0 0 rgba(200,169,110,0.54),
    320px  485px 0 0 rgba(200,169,110,0.40),   410px  410px 0 0 rgba(200,169,110,0.68),
    500px  475px 0 0 rgba(200,169,110,0.52),   590px  430px 0 0 rgba(200,169,110,0.60),
    680px  480px 0 0 rgba(200,169,110,0.44),   775px  420px 0 0 rgba(200,169,110,0.64),
    865px  465px 0 0 rgba(200,169,110,0.50),   955px  440px 0 0 rgba(200,169,110,0.58),
   1045px  495px 0 0 rgba(200,169,110,0.46),  1135px  415px 0 0 rgba(200,169,110,0.66),
   1235px  470px 0 0 rgba(200,169,110,0.52),  1345px  445px 0 0 rgba(200,169,110,0.60),
     60px  515px 0 0 rgba(200,169,110,0.50),   155px  570px 0 0 rgba(200,169,110,0.64),
    245px  535px 0 0 rgba(200,169,110,0.44),   335px  585px 0 0 rgba(200,169,110,0.56),
    425px  510px 0 0 rgba(200,169,110,0.68),   515px  575px 0 0 rgba(200,169,110,0.48),
    605px  530px 0 0 rgba(200,169,110,0.60),   695px  580px 0 0 rgba(200,169,110,0.42),
    790px  520px 0 0 rgba(200,169,110,0.66),   880px  565px 0 0 rgba(200,169,110,0.52),
    970px  540px 0 0 rgba(200,169,110,0.58),  1060px  595px 0 0 rgba(200,169,110,0.44),
   1150px  515px 0 0 rgba(200,169,110,0.62),  1250px  570px 0 0 rgba(200,169,110,0.50),
   1355px  545px 0 0 rgba(200,169,110,0.56),    35px  615px 0 0 rgba(200,169,110,0.60),
    150px  660px 0 0 rgba(200,169,110,0.46),   280px  635px 0 0 rgba(200,169,110,0.54),
    420px  685px 0 0 rgba(200,169,110,0.40),   560px  610px 0 0 rgba(200,169,110,0.64),
    700px  670px 0 0 rgba(200,169,110,0.50),   840px  640px 0 0 rgba(200,169,110,0.58),
    980px  690px 0 0 rgba(200,169,110,0.44),  1120px  625px 0 0 rgba(200,169,110,0.62),
   1270px  665px 0 0 rgba(200,169,110,0.52);
  animation: star-twinkle-a 6s ease-in-out infinite alternate;
}

/* Layer 2 — white starlight (twinkling, ~100 dots) */
.roadmap-hero__stars::before {
  content: '';
  box-shadow:
     80px   40px 0 0 rgba(255,255,255,0.40),   170px   15px 0 0 rgba(255,255,255,0.32),
    250px   55px 0 0 rgba(255,255,255,0.50),   340px   10px 0 0 rgba(255,255,255,0.36),
    430px   50px 0 0 rgba(255,255,255,0.44),   520px   25px 0 0 rgba(255,255,255,0.55),
    605px   65px 0 0 rgba(255,255,255,0.38),   690px   30px 0 0 rgba(255,255,255,0.46),
    780px   70px 0 0 rgba(255,255,255,0.34),   870px   20px 0 0 rgba(255,255,255,0.52),
    960px   55px 0 0 rgba(255,255,255,0.42),  1050px   15px 0 0 rgba(255,255,255,0.48),
   1150px   50px 0 0 rgba(255,255,255,0.36),  1270px   35px 0 0 rgba(255,255,255,0.54),
   1405px   70px 0 0 rgba(255,255,255,0.40),    95px  135px 0 0 rgba(255,255,255,0.44),
    185px  110px 0 0 rgba(255,255,255,0.34),   275px  155px 0 0 rgba(255,255,255,0.52),
    365px  120px 0 0 rgba(255,255,255,0.38),   450px  160px 0 0 rgba(255,255,255,0.46),
    545px  105px 0 0 rgba(255,255,255,0.56),   640px  150px 0 0 rgba(255,255,255,0.32),
    730px  115px 0 0 rgba(255,255,255,0.48),   820px  145px 0 0 rgba(255,255,255,0.40),
    910px  125px 0 0 rgba(255,255,255,0.54),  1010px  155px 0 0 rgba(255,255,255,0.36),
   1090px  130px 0 0 rgba(255,255,255,0.44),  1180px  150px 0 0 rgba(255,255,255,0.50),
   1290px  110px 0 0 rgba(255,255,255,0.38),  1395px  135px 0 0 rgba(255,255,255,0.46),
    100px  220px 0 0 rgba(255,255,255,0.42),   190px  255px 0 0 rgba(255,255,255,0.34),
    280px  215px 0 0 rgba(255,255,255,0.52),   370px  250px 0 0 rgba(255,255,255,0.38),
    460px  220px 0 0 rgba(255,255,255,0.48),   550px  255px 0 0 rgba(255,255,255,0.32),
    640px  215px 0 0 rgba(255,255,255,0.56),   730px  250px 0 0 rgba(255,255,255,0.40),
    820px  220px 0 0 rgba(255,255,255,0.44),   910px  255px 0 0 rgba(255,255,255,0.36),
   1000px  215px 0 0 rgba(255,255,255,0.52),  1090px  250px 0 0 rgba(255,255,255,0.42),
   1180px  220px 0 0 rgba(255,255,255,0.48),  1280px  255px 0 0 rgba(255,255,255,0.34),
   1390px  215px 0 0 rgba(255,255,255,0.50),    85px  325px 0 0 rgba(255,255,255,0.44),
    175px  360px 0 0 rgba(255,255,255,0.36),   265px  315px 0 0 rgba(255,255,255,0.54),
    355px  350px 0 0 rgba(255,255,255,0.40),   445px  320px 0 0 rgba(255,255,255,0.46),
    535px  355px 0 0 rgba(255,255,255,0.32),   625px  310px 0 0 rgba(255,255,255,0.52),
    715px  345px 0 0 rgba(255,255,255,0.38),   805px  325px 0 0 rgba(255,255,255,0.48),
    895px  360px 0 0 rgba(255,255,255,0.34),   985px  315px 0 0 rgba(255,255,255,0.54),
   1075px  350px 0 0 rgba(255,255,255,0.40),  1165px  320px 0 0 rgba(255,255,255,0.46),
   1265px  355px 0 0 rgba(255,255,255,0.36),  1375px  340px 0 0 rgba(255,255,255,0.50),
    100px  425px 0 0 rgba(255,255,255,0.42),   190px  460px 0 0 rgba(255,255,255,0.34),
    280px  415px 0 0 rgba(255,255,255,0.52),   370px  450px 0 0 rgba(255,255,255,0.38),
    460px  420px 0 0 rgba(255,255,255,0.46),   550px  455px 0 0 rgba(255,255,255,0.32),
    640px  410px 0 0 rgba(255,255,255,0.56),   730px  445px 0 0 rgba(255,255,255,0.40),
    820px  425px 0 0 rgba(255,255,255,0.44),   910px  460px 0 0 rgba(255,255,255,0.36),
   1000px  415px 0 0 rgba(255,255,255,0.52),  1090px  450px 0 0 rgba(255,255,255,0.42),
   1180px  420px 0 0 rgba(255,255,255,0.48),  1280px  455px 0 0 rgba(255,255,255,0.34),
   1390px  440px 0 0 rgba(255,255,255,0.50),   105px  525px 0 0 rgba(255,255,255,0.44),
    195px  560px 0 0 rgba(255,255,255,0.36),   285px  515px 0 0 rgba(255,255,255,0.54),
    375px  550px 0 0 rgba(255,255,255,0.40),   465px  520px 0 0 rgba(255,255,255,0.46),
    555px  555px 0 0 rgba(255,255,255,0.32),   645px  510px 0 0 rgba(255,255,255,0.52),
    735px  545px 0 0 rgba(255,255,255,0.38),   825px  525px 0 0 rgba(255,255,255,0.48),
    915px  560px 0 0 rgba(255,255,255,0.34),  1005px  515px 0 0 rgba(255,255,255,0.54),
   1095px  550px 0 0 rgba(255,255,255,0.42),  1185px  520px 0 0 rgba(255,255,255,0.46),
   1285px  555px 0 0 rgba(255,255,255,0.36),  1395px  535px 0 0 rgba(255,255,255,0.50),
     90px  625px 0 0 rgba(255,255,255,0.44),   200px  660px 0 0 rgba(255,255,255,0.36),
    340px  645px 0 0 rgba(255,255,255,0.52),   480px  690px 0 0 rgba(255,255,255,0.38),
    620px  620px 0 0 rgba(255,255,255,0.46),   760px  665px 0 0 rgba(255,255,255,0.32),
    900px  635px 0 0 rgba(255,255,255,0.54),  1040px  685px 0 0 rgba(255,255,255,0.40),
   1180px  645px 0 0 rgba(255,255,255,0.48),  1320px  670px 0 0 rgba(255,255,255,0.36);
  animation: star-twinkle-b 8s ease-in-out infinite alternate;
}

/* Layer 3 — bright gold sparkles, slightly larger (twinkling) */
.roadmap-hero__stars::after {
  content: '';
  box-shadow:
    450px  140px 0 1px rgba(200,169,110,0.88),
    280px  180px 0 1px rgba(200,169,110,0.82),
    710px   50px 0 1px rgba(200,169,110,0.90),
   1050px  130px 0 1px rgba(200,169,110,0.85),
    850px  250px 0 1px rgba(200,169,110,0.80),
    180px  350px 0 1px rgba(200,169,110,0.88),
    570px  390px 0 1px rgba(200,169,110,0.84),
   1200px  310px 0 1px rgba(200,169,110,0.78),
    400px  450px 0 1px rgba(200,169,110,0.86),
    750px  490px 0 1px rgba(200,169,110,0.82),
   1100px  430px 0 1px rgba(200,169,110,0.88),
     90px  520px 0 1px rgba(200,169,110,0.80),
    320px  570px 0 1px rgba(200,169,110,0.84),
    680px  540px 0 1px rgba(200,169,110,0.90),
    950px  580px 0 1px rgba(200,169,110,0.78),
   1350px  490px 0 1px rgba(200,169,110,0.86),
    200px  640px 0 1px rgba(200,169,110,0.82),
    520px  670px 0 1px rgba(200,169,110,0.88),
    870px  650px 0 1px rgba(200,169,110,0.80),
   1180px  620px 0 1px rgba(200,169,110,0.84);
  animation: star-twinkle-c 4s ease-in-out infinite alternate;
}

@keyframes star-twinkle-a {
  0%    { opacity: 0.55; }
  40%   { opacity: 1;    }
  100%  { opacity: 0.35; }
}

@keyframes star-twinkle-b {
  0%    { opacity: 0.35; }
  55%   { opacity: 0.85; }
  100%  { opacity: 0.25; }
}

@keyframes star-twinkle-c {
  0%    { opacity: 0.55; }
  50%   { opacity: 1;    }
  100%  { opacity: 0.65; }
}


/* ─────────────────────────────────────────────────────── */
/* HERO ROADMAP ICON                                       */
/* SVG path-with-nodes illustration above the eyebrow.    */
/* ─────────────────────────────────────────────────────── */

.roadmap-hero__icon-wrap {
  margin: 0 auto var(--space-8);
  width: 72px;
  height: 72px;
  position: relative;
  display: block;
}

/* Ambient glow behind the icon */
.roadmap-hero__icon-wrap::before {
  content: '';
  position: absolute;
  inset: -18px;
  background: radial-gradient(circle, rgba(200, 169, 110, 0.13) 0%, transparent 68%);
  border-radius: 50%;
  animation: icon-glow 4.5s ease-in-out infinite alternate;
}

@keyframes icon-glow {
  0%   { opacity: 0.5; transform: scale(0.88); }
  100% { opacity: 1;   transform: scale(1.12); }
}

/* Subtle vertical float */
.roadmap-hero__icon {
  position: relative;
  z-index: 1;
  animation: icon-float 6.5s ease-in-out infinite;
}

@keyframes icon-float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-5px); }
}


/* ─────────────────────────────────────────────────────── */
/* HERO CTA BUTTONS (dark background variants)            */
/* ─────────────────────────────────────────────────────── */

.roadmap-hero__ctas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-10);
}

/* Primary — gold fill */
.btn--gold-solid {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-gold);
  color: #1A1205;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.025em;
  padding: 13px 26px;
  border: 1px solid var(--color-gold);
  cursor: pointer;
  text-decoration: none;
  transition:
    background   var(--transition-fast),
    box-shadow   var(--transition-fast),
    transform    var(--transition-fast);
}

.btn--gold-solid:hover {
  background: #D4B87A;
  box-shadow: 0 0 24px rgba(200, 169, 110, 0.38);
  transform: translateY(-1px);
  color: #1A1205;
  text-decoration: none;
}

/* Arrow suffix */
.btn--gold-solid.btn-arrow::after {
  content: '→';
  margin-left: var(--space-2);
  transition: transform var(--transition-fast);
}

.btn--gold-solid.btn-arrow:hover::after {
  transform: translateX(3px);
}

/* Secondary — ghost white outline */
.btn--ghost-white {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: transparent;
  color: rgba(255, 255, 255, 0.65);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  padding: 13px 26px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  cursor: pointer;
  text-decoration: none;
  transition:
    border-color var(--transition-fast),
    color        var(--transition-fast),
    background   var(--transition-fast);
}

.btn--ghost-white:hover {
  border-color: rgba(255, 255, 255, 0.45);
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
  text-decoration: none;
}


/* ═════════════════════════════════════════════════════════ */
/* HYPERSPEED OVERLAY                                        */
/* Millennium Falcon warp jump — fires on Start click.      */
/* ═════════════════════════════════════════════════════════ */

.tywin-hyperspeed {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #030912;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
}

.tywin-hyperspeed.is-active {
  opacity: 1;
  pointer-events: all;
}

.tywin-hyperspeed.is-fading {
  opacity: 0;
  transition: opacity 0.55s ease;
  pointer-events: none;
}

/* Conic spoke-streaks — radiate outward */
.tywin-hyperspeed__streaks {
  position: absolute;
  width: 240vmax;
  height: 240vmax;
  background: repeating-conic-gradient(
    from 0deg,
    transparent                 0deg    3.5deg,
    rgba(200, 220, 255, 0.07)   3.5deg  4deg,
    transparent                 4deg    7.5deg,
    rgba(255, 255, 255, 0.035)  7.5deg  8deg,
    transparent                 8deg   11.5deg,
    rgba(200, 169, 110, 0.055) 11.5deg 12deg
  );
  transform: scale(0.12);
  opacity: 0;
}

.tywin-hyperspeed.is-active .tywin-hyperspeed__streaks {
  animation: warp-streaks 3.5s cubic-bezier(0.12, 0, 0.65, 1) forwards;
}

/* Radial amber core */
.tywin-hyperspeed__core {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 35% 35% at center,
    rgba(200, 169, 110, 0.14) 0%,
    rgba(13, 107, 110, 0.07)  45%,
    transparent               72%
  );
  opacity: 0;
}

.tywin-hyperspeed.is-active .tywin-hyperspeed__core {
  animation: warp-core 3.5s ease-in forwards;
}

/* Brief white flash at jump point */
.tywin-hyperspeed__flash {
  position: absolute;
  inset: 0;
  background: #ffffff;
  opacity: 0;
}

.tywin-hyperspeed.is-active .tywin-hyperspeed__flash {
  animation: warp-flash 3.5s forwards;
}

@keyframes warp-streaks {
  0%    { transform: scale(0.12); opacity: 0;    }
  8%    { opacity: 1;                             }
  38%   { transform: scale(2);    opacity: 1;    } /* sustained mid-warp */
  68%   { transform: scale(6);    opacity: 0.95; } /* deep hyperspace     */
  85%   { transform: scale(28);   opacity: 0.5;  } /* acceleration burst  */
  95%   { transform: scale(65);   opacity: 0.08; } /* exit jump           */
  100%  { transform: scale(90);   opacity: 0;    }
}

@keyframes warp-core {
  0%    { opacity: 0;    }
  10%   { opacity: 0.8;  }
  55%   { opacity: 1;    } /* amber peak mid-journey */
  88%   { opacity: 0.5;  }
  100%  { opacity: 0;    }
}

@keyframes warp-flash {
  0%    { opacity: 0;    }
  82%   { opacity: 0;    }
  90%   { opacity: 0.7;  } /* hard white flash at exit */
  100%  { opacity: 0;    }
}


/* ─────────────────────────────────────────────────────── */
/* CHAT PANEL ENTRANCE ANIMATION                           */
/* Pure opacity fade — no slide, no seams.                 */
/* ─────────────────────────────────────────────────────── */

.tywin-panel {
  opacity: 0;
  transition: opacity 1.1s ease;
}
.tywin-panel.is-visible {
  opacity: 1;
}

@keyframes chat-enter {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Button CTA — press pulse before hyperspeed */
.btn--gold-solid.is-launching {
  transform: scale(0.95);
  transition: transform 0.12s ease;
}

/* Bubbles are held invisible by JS until full payload arrives, then revealed */
.tywin-bubble {
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.tywin-bubble.is-revealed {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Typing indicator — fade in, not pop in */
.tywin-typing {
  opacity: 0;
  transition: opacity 0.4s ease;
}
.tywin-typing.is-visible {
  opacity: 1;
}

/* Research phase label — fade in */
.tywin-research {
  opacity: 0;
  transition: opacity 0.4s ease;
}
.tywin-research.is-visible {
  opacity: 1;
}


/* ─── Email Fallback (reuse contact pattern) ────────────── */

.roadmap-fallback {
  text-align: center;
  margin-top: var(--space-16);
  padding-top: var(--space-10);
}

.roadmap-fallback p {
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin: 0;
}

.roadmap-fallback a {
  color: var(--color-teal);
  font-weight: var(--weight-medium);
}


/* ─────────────────────────────────────────────────────── */
/* OBSIDIAN EVERYWHERE                                     */
/* Full-page dark mode — body + all page sections         */
/* ─────────────────────────────────────────────────────── */

/* Enforce [hidden] attribute — prevents display:flex/block from overriding */
[hidden] {
  display: none !important;
}

body {
  background-color: #0C0C0C !important;
}

/* Steps strip — fully transparent, no borders, seamless with hero */
.roadmap-steps {
  background: transparent !important;
  border-top: none !important;
  border-bottom: none !important;
}

.roadmap-step__number {
  /* gold ring already correct — keep */
}

.roadmap-step h3 {
  color: #F0EDE8 !important;
}

.roadmap-step p {
  color: rgba(240,237,232,0.6) !important;
}

/* Chat / form section — transparent so the page canvas starfield shows through */
.roadmap-form-section,
.roadmap-form-section .container,
.roadmap-form-wrapper {
  background: transparent !important;
}

/* Any remaining section--white or section--surface overrides */
.section--white,
.section--surface {
  background: transparent !important;
}

/* No dividers between sections — one continuous starfield */
.roadmap-hero {
  border-bottom: none !important;
}


/* ─────────────────────────────────────────────────────── */
/* TYWIN CHAT — IMMERSIVE DARK MODE                        */
/* Ghosted panel on obsidian, gold text, gold inputs      */
/* ─────────────────────────────────────────────────────── */

/* Ghost the panel and start screen completely */
.tywin-panel,
.tywin-start {
  background: transparent !important;
  border: none !important;
  border-top: none !important;
  box-shadow: none !important;
}

/* Progress bar — faint gold track */
.tywin-progress {
  background: rgba(200,169,110,0.12) !important;
}

/* Agent bubbles — no box, gold text, IM Fell DW Pica typeface */
/* Framing/context prose runs smaller so the bold question line carries the visual weight */
.tywin-bubble__inner {
  background: transparent !important;
  border: none !important;
  color: #C8A96E !important;
  font-family: 'IM Fell DW Pica', serif !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1.85 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Italic philosophizing — IM Fell italic variant */
.tywin-bubble__inner em {
  font-style: italic !important;
  color: rgba(224,200,148,0.95) !important;
}

/* Bold question line — white, larger, own line so it punches through the gold prose */
.tywin-bubble__inner strong {
  font-weight: bold !important;
  font-size: 1.2rem !important;
  color: #FFFFFF !important;
  font-style: normal !important;
  display: block !important;
  margin-top: 0.7em !important;
}

/* User bubble stays in the UI sans-serif — IM Fell is Tywin's voice only */
.tywin-bubble--user .tywin-bubble__inner {
  font-family: var(--font-sans) !important;
  font-size: var(--text-sm) !important;
  letter-spacing: normal !important;
  line-height: var(--leading-normal) !important;
}

/* Context / teaching moment — subtle gold left rule */
.tywin-bubble__inner.is-context {
  background: transparent !important;
  border: none !important;
  border-left: 2px solid rgba(200,169,110,0.35) !important;
  color: rgba(200,169,110,0.6) !important;
  padding-left: var(--space-4) !important;
}

/* User bubble — faint gold tint so it reads differently */
.tywin-bubble--user .tywin-bubble__inner {
  background: rgba(200,169,110,0.08) !important;
  border: 1px solid rgba(200,169,110,0.22) !important;
  color: rgba(200,169,110,0.8) !important;
  padding: var(--space-3) var(--space-4) !important;
}

/* Research / thinking observation bubble — streamed live, no opacity reduction */
.tywin-bubble--thinking .tywin-bubble__inner {
  color: rgba(200,169,110,0.85) !important;
  font-style: italic !important;
  font-size: 1rem !important;
  line-height: 1.82 !important;
  letter-spacing: 0.01em !important;
}

/* Thinking bubble label — "analyzing" small-caps above the streamed text */
.tywin-thinking-label {
  font-family: var(--font-sans);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(200,169,110,0.45);
  margin-bottom: 5px;
  padding-left: 1px;
}

/* Typing dots — gold */
.tywin-typing__dots span {
  background: #C8A96E !important;
}

/* Research phase — gold */
.tywin-research__inner {
  color: #C8A96E !important;
}
.tywin-research__pulse {
  background: #C8A96E !important;
}

/* Input area strip — transparent with a faint gold top line */
.tywin-input-area {
  background: transparent !important;
  border-top: 1px solid rgba(200,169,110,0.18) !important;
}

/* MCQ option buttons — gold outline, gold text, obsidian bg */
.tywin-option-btn {
  background: transparent !important;
  border: 1px solid rgba(200,169,110,0.35) !important;
  color: #C8A96E !important;
}
.tywin-option-btn:hover {
  background: rgba(200,169,110,0.08) !important;
  border-color: #C8A96E !important;
  color: #C8A96E !important;
}
.tywin-option-btn.is-selected {
  background: rgba(200,169,110,0.15) !important;
  border-color: #C8A96E !important;
  color: #C8A96E !important;
}

/* Continue button — solid gold, small, centered */
.tywin-option-btn--continue {
  background: #C8A96E !important;
  border-color: #C8A96E !important;
  color: #0C0C0C !important;
  font-weight: 600 !important;
  text-align: center !important;
  letter-spacing: 0.04em !important;
  padding: 12px 40px !important;
  width: auto !important;
  min-width: 160px !important;
  align-self: center !important;
}
.tywin-option-btn--continue:hover {
  background: #d4b97e !important;
  border-color: #d4b97e !important;
  color: #0C0C0C !important;
}
.tywin-option-btn--continue.is-selected {
  background: rgba(200,169,110,0.2) !important;
  border-color: #C8A96E !important;
  color: #C8A96E !important;
}

/* Hint examples — non-clickable prompts below free text input */
.tywin-hints {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(200,169,110,0.12);
}
.tywin-hint-item {
  color: rgba(200,169,110,0.42);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
  padding-left: 16px;
  position: relative;
  cursor: default;
  user-select: none;
}
.tywin-hint-item::before {
  content: '—';
  position: absolute;
  left: 0;
  color: rgba(200,169,110,0.25);
}

/* Multi-select items */
.tywin-multi-item {
  background: transparent !important;
  border: 1px solid rgba(200,169,110,0.3) !important;
}
.tywin-multi-item:hover {
  background: rgba(200,169,110,0.06) !important;
  border-color: #C8A96E !important;
}
.tywin-multi-item.is-checked {
  background: rgba(200,169,110,0.12) !important;
  border-color: #C8A96E !important;
}
.tywin-multi-item input[type="checkbox"] {
  accent-color: #C8A96E !important;
}
.tywin-multi-item label {
  color: #C8A96E !important;
}

/* Free-text textarea — subtle dark bg, cream text (readable on obsidian) */
.tywin-textarea {
  background: rgba(200,169,110,0.07) !important;
  border: 1px solid rgba(200,169,110,0.4) !important;
  color: #F0EDE8 !important;
}
.tywin-textarea:focus {
  background: rgba(200,169,110,0.11) !important;
  border-color: #C8A96E !important;
  box-shadow: 0 0 0 3px rgba(200,169,110,0.12) !important;
  outline: none !important;
}
.tywin-textarea::placeholder {
  color: rgba(200,169,110,0.38) !important;
}

/* Send button — gold fill, obsidian icon */
.tywin-send-btn {
  background: #C8A96E !important;
  border: none !important;
  color: #0C0C0C !important;
}
.tywin-send-btn:hover:not(:disabled) {
  background: #d4b87a !important;
}
.tywin-send-btn svg {
  stroke: #0C0C0C !important;
}

/* Mic / dictation button — dark mode */
.tywin-mic-btn {
  background: transparent !important;
  border: 1px solid rgba(200,169,110,0.35) !important;
  color: rgba(200,169,110,0.55) !important;
}
.tywin-mic-btn:hover {
  border-color: rgba(200,169,110,0.7) !important;
  color: rgba(200,169,110,0.9) !important;
}
.tywin-mic-btn.is-recording {
  background: rgba(200,169,110,0.12) !important;
  border-color: #C8A96E !important;
  color: #C8A96E !important;
  animation: mic-pulse 1.2s ease-in-out infinite !important;
}
@keyframes mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0   rgba(200,169,110,0.45); }
  50%       { box-shadow: 0 0 0 7px rgba(200,169,110,0);    }
}

/* Confirm / submit buttons in multiselect */
.tywin-multiselect-confirm .btn,
.tywin-multiselect-confirm button {
  background: #C8A96E !important;
  color: #0C0C0C !important;
  border-color: #C8A96E !important;
}

/* Error message */
.tywin-error {
  background: transparent !important;
  border: 1px solid rgba(200,169,110,0.3) !important;
  color: rgba(200,169,110,0.7) !important;
}

/* ─────────────────────────────────────────────────────── */
/* EMAIL GATE — dark background so starfield shows through */
/* ─────────────────────────────────────────────────────── */

.tywin-preview {
  background: transparent !important;
  border: none !important;
  border-top: none !important;
}

.tywin-gate__heading {
  color: #F0EDE8 !important;
}

.tywin-gate__sub {
  color: rgba(240,237,232,0.55) !important;
}

.tywin-gate__input {
  background: rgba(200,169,110,0.07) !important;
  border: 1px solid rgba(200,169,110,0.4) !important;
  color: #F0EDE8 !important;
}

.tywin-gate__input:focus {
  border-color: #C8A96E !important;
  box-shadow: 0 0 0 3px rgba(200,169,110,0.12) !important;
}

.tywin-gate__input::placeholder {
  color: rgba(200,169,110,0.35) !important;
}

.tywin-gate__escape {
  color: rgba(200,169,110,0.5) !important;
}

.tywin-gate__escape:hover {
  color: #C8A96E !important;
}

.tywin-error-banner {
  background: rgba(200,169,110,0.08) !important;
  border-color: rgba(200,169,110,0.3) !important;
  color: rgba(240,237,232,0.7) !important;
}

/* ─────────────────────────────────────────────────────── */
/* SUCCESS SCREEN — dark background so starfield shows     */
/* ─────────────────────────────────────────────────────── */

.tywin-success {
  background: transparent !important;
  border: none !important;
  border-top: none !important;
}

.tywin-success__heading {
  color: #F0EDE8 !important;
}

.tywin-success__body {
  color: rgba(240,237,232,0.55) !important;
}

.tywin-success__body a {
  color: #4BBFBF !important;
}

/* ─────────────────────────────────────────────────────── */
/* FALLBACK LINK — centered and styled for dark bg         */
/* ─────────────────────────────────────────────────────── */

.roadmap-fallback {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
  margin-top: var(--space-8) !important;
}

.roadmap-fallback p {
  color: rgba(200,169,110,0.5) !important;
  font-size: var(--text-sm) !important;
}

.roadmap-fallback a {
  color: rgba(200,169,110,0.75) !important;
  text-decoration: none !important;
}

.roadmap-fallback a:hover {
  color: #C8A96E !important;
  text-decoration: underline !important;
}


/* ─────────────────────────────────────────────────────── */
/* RESPONSIVE                                              */
/* ─────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .roadmap-hero {
    padding-top: var(--space-16);
    padding-bottom: var(--space-12);
  }

  .roadmap-steps__grid {
    grid-template-columns: 1fr;
    gap: var(--space-10);
    max-width: 320px;
  }
}

@media (max-width: 640px) {
  .roadmap-hero__headline { font-size: var(--text-2xl); }
  .roadmap-hero__sub      { font-size: var(--text-base); }

  .roadmap-trust {
    gap: var(--space-4) var(--space-6);
  }

  .roadmap-form-section {
    padding-top: var(--space-12);
    padding-bottom: var(--space-12);
  }

  .roadmap-form-box {
    padding: var(--space-6) var(--space-5);
  }

  .f-row-2 {
    grid-template-columns: 1fr;
  }

  .roadmap-steps {
    padding-top: var(--space-12);
    padding-bottom: var(--space-12);
  }
}