.roadmap-page { background: var(--bg-soft); }
.roadmap-breadcrumb { background: #fff; border-bottom: 1px solid var(--border); padding: 12px 0; color: var(--text-muted); font-size: 12px; }
.roadmap-breadcrumb span { margin: 0 9px; color: var(--gold); }

.roadmap-hero { padding: 78px 0; background: var(--navy); color: #fff; }
.roadmap-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 66px; align-items: center; }
.roadmap-kicker, .section-label { display: block; color: var(--gold-light); font-size: 11px; font-weight: 800; letter-spacing: .14em; }
.roadmap-hero h1 { color: #fff; font-size: 43px; line-height: 1.35; margin: 17px 0 20px; }
.roadmap-hero h1 em { display: block; color: var(--gold-light); font-size: .57em; font-style: normal; letter-spacing: .03em; margin-top: 9px; }
.roadmap-hero p { color: rgba(255,255,255,.73); max-width: 650px; font-size: 15px; line-height: 2; }
.roadmap-hero-actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 30px; }
.hero-sub-link { color: #fff; font-size: 13px; font-weight: 700; border-bottom: 1px solid rgba(255,255,255,.35); }

.roadmap-timeline { border: 1px solid rgba(255,255,255,.16); border-radius: 15px; background: rgba(255,255,255,.05); padding: 10px 25px; }
.roadmap-timeline > div { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.roadmap-timeline > div:last-child { border: 0; }
.roadmap-timeline span { color: var(--gold-light); font-size: 11px; font-weight: 800; }
.roadmap-timeline b { font-size: 13px; }
.roadmap-timeline small { color: rgba(255,255,255,.48); font-size: 10px; }
.roadmap-summary { margin-top: 28px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.roadmap-summary div { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 12px; padding: 16px; }
.roadmap-summary span { display: block; color: var(--gold-light); font-size: 10px; font-weight: 800; letter-spacing: .12em; margin-bottom: 7px; }
.roadmap-summary b { display: block; color: #fff; font-size: 15px; line-height: 1.6; }
.roadmap-summary small { display: block; color: rgba(255,255,255,.55); font-size: 11px; line-height: 1.7; margin-top: 5px; }

.roadmap-narrow { max-width: 960px; }
.roadmap-intro { background: #fff; padding: 76px 0 68px; text-align: center; }
.roadmap-intro .section-label, .roadmap-next .section-label { color: var(--gold); }
.roadmap-intro h2 { color: var(--navy); font-size: 29px; line-height: 1.55; margin: 16px 0; }
.roadmap-intro > .wrap > p { color: var(--text-muted); max-width: 780px; margin: 0 auto; font-size: 14px; }
.roadmap-guide-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 36px; text-align: left; }
.roadmap-guide-grid article { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 10px; padding: 19px; }
.roadmap-guide-grid article > span, .step-info-grid span { color: var(--gold); font-size: 9px; font-weight: 800; letter-spacing: .13em; }
.roadmap-guide-grid h3 { color: var(--navy); font-size: 14px; margin: 5px 0 7px; }
.roadmap-guide-grid p { color: var(--text-muted); font-size: 11px; line-height: 1.7; }
.roadmap-overview { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 30px; }
.roadmap-overview a { border: 1px solid var(--border); border-radius: 999px; padding: 7px 11px; color: var(--navy); font-size: 11px; font-weight: 700; }

.roadmap-steps { padding: 35px 0 80px; }
.roadmap-step { padding: 55px 0; border-bottom: 1px solid var(--border); scroll-margin-top: 95px; }
.roadmap-step:last-child { border-bottom: 0; }
.step-heading { display: grid; grid-template-columns: 95px 1fr; gap: 24px; margin-bottom: 27px; }
.step-heading > div:first-child { display: flex; flex-direction: column; color: var(--gold); }
.step-heading > div:first-child span { font-size: 9px; font-weight: 800; letter-spacing: .15em; }
.step-heading > div:first-child strong { font-size: 42px; line-height: 1.1; }
.step-time { color: var(--gold); font-size: 11px; font-weight: 700; }
.step-heading h2 { color: var(--navy); font-size: 27px; margin: 5px 0 8px; }
.step-heading p { color: var(--text-muted); font-size: 14px; }
.step-body { margin-left: 119px; }
.step-panel { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 26px; }
.step-panel h3 { color: var(--navy); font-size: 15px; margin-bottom: 17px; }
.step-panel ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px 22px; list-style: none; }
.step-panel li { position: relative; padding-left: 25px; color: var(--text); font-size: 13px; }
.step-panel li::before { content: "✓"; position: absolute; left: 0; top: 1px; width: 16px; height: 16px; border: 1px solid var(--gold); border-radius: 50%; color: var(--gold); font-size: 9px; line-height: 14px; text-align: center; font-weight: 800; }
.step-info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 12px; }
.step-info-grid > div { background: var(--navy-tint); border-radius: 10px; padding: 19px; }
.step-info-grid h3 { color: var(--navy); font-size: 13px; margin: 5px 0; }
.step-info-grid p { color: var(--text-muted); font-size: 12px; }
.step-caution { margin-top: 12px; border-left: 3px solid var(--gold); padding: 15px 18px; background: #fff; }
.step-caution b { display: block; color: var(--navy); font-size: 12px; margin-bottom: 4px; }
.step-caution p { color: var(--text-muted); font-size: 12px; }
.step-links { display: flex; flex-wrap: wrap; gap: 9px 22px; margin-top: 20px; }
.step-links a { color: var(--navy); font-size: 12px; font-weight: 700; border-bottom: 1px solid var(--gold-light); }
.step-checklist { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 24px; margin-top: 12px; }
.step-checklist h3 { color: var(--navy); font-size: 15px; margin-bottom: 15px; }
.step-checklist ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px 20px; list-style: none; }
.step-checklist li { color: var(--text); font-size: 13px; position: relative; padding-left: 24px; }
.step-checklist li::before { content: "□"; position: absolute; left: 0; color: var(--gold); font-weight: 800; }
.pending-link { display: inline-block; padding: 5px 9px; background: #eee; border-radius: 5px; color: var(--text-muted); font-size: 11px; }
.legal-step { position: relative; }
.review-status { display: flex; gap: 14px; align-items: center; background: var(--gold-tint); border: 1px solid #eadbbd; padding: 13px 16px; border-radius: 9px; margin-bottom: 12px; }
.review-status span { background: var(--gold); color: #fff; border-radius: 99px; padding: 4px 9px; font-size: 10px; font-weight: 700; white-space: nowrap; }
.review-status p { color: #75613d; font-size: 12px; }
.legal-notice { margin-top: 12px; padding: 13px 16px; color: var(--text-muted); background: #f4f4f2; border-radius: 8px; font-size: 11px; }

.roadmap-failure { padding: 72px 0; background: #fff; border-top: 1px solid var(--border); }
.failure-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 28px; }
.failure-grid article { border: 1px solid var(--border); background: var(--bg-soft); border-radius: 12px; padding: 22px; }
.failure-grid h3 { color: var(--navy); font-size: 15px; margin-bottom: 8px; }
.failure-grid p { color: var(--text-muted); font-size: 12px; line-height: 1.8; }

.roadmap-next { padding: 64px 0; background: #fff; border-top: 1px solid var(--border); }
.next-grid { display: grid; grid-template-columns: 1fr auto; gap: 70px; align-items: center; }
.roadmap-next h2 { color: var(--navy); font-size: 25px; margin: 12px 0; }
.roadmap-next p { color: var(--text-muted); font-size: 13px; max-width: 600px; }
.next-actions { display: flex; align-items: center; flex-direction: column; gap: 16px; }

.roadmap-consultation { padding: 80px 0; background: #fff; }
.roadmap-consultation > .wrap > div { background: var(--navy); color: #fff; border-radius: 16px; padding: 48px; text-align: center; }
.roadmap-consultation span { color: var(--gold-light); font-size: 10px; font-weight: 800; letter-spacing: .15em; }
.roadmap-consultation h2 { color: #fff; font-size: 27px; margin: 12px 0; }
.roadmap-consultation p { color: rgba(255,255,255,.72); max-width: 700px; margin: 0 auto 25px; font-size: 13px; }

@media (max-width: 900px) {
  .roadmap-hero-grid { grid-template-columns: 1fr; }
  .roadmap-timeline { max-width: 600px; }
  .roadmap-summary, .failure-grid { grid-template-columns: 1fr; }
  .roadmap-guide-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 680px) {
  .roadmap-hero { padding: 56px 0; }
  .roadmap-hero h1 { font-size: 32px; }
  .roadmap-hero-actions .btn { width: 100%; justify-content: center; }
  .roadmap-intro { padding: 56px 0; }
  .roadmap-intro h2 { font-size: 22px; }
  .roadmap-guide-grid { grid-template-columns: 1fr; }
  .roadmap-step { padding: 40px 0; }
  .step-heading { grid-template-columns: 68px 1fr; gap: 15px; }
  .step-heading > div:first-child strong { font-size: 33px; }
  .step-heading h2 { font-size: 21px; }
  .step-body { margin-left: 0; }
  .step-panel { padding: 21px; }
  .step-panel ul, .step-info-grid, .step-checklist ul { grid-template-columns: 1fr; }
  .review-status { align-items: flex-start; flex-direction: column; }
  .next-grid { grid-template-columns: 1fr; gap: 30px; }
  .next-actions { align-items: flex-start; }
  .roadmap-consultation > .wrap > div { padding: 34px 23px; }
  .roadmap-consultation h2 { font-size: 22px; }
}