/* Shared portal colors, typography and navigation are inherited from the page. */
.nav-row { padding:16px 28px; gap:16px; }
:focus-visible { outline:2px solid var(--mint); outline-offset:5px; }
.about-intro { padding:68px 0 48px; }
.eyebrow { color:var(--pink-soft); font-size:12px; font-weight:700; letter-spacing:2px; }
.about-intro h1 { font-family:var(--font-display); font-size:clamp(30px,4vw,46px); line-height:1.35; margin:16px 0 22px; letter-spacing:-1.5px; }
.about-intro h1 span { color:var(--mint-soft); }
.intro-copy { max-width:720px; color:var(--text-mute); font-size:16px; line-height:1.9; word-break:keep-all; }
.intro-copy + .intro-copy { margin-top:10px; }
.intro-links { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.intro-links a { padding:11px 20px; border:1px solid var(--border); border-radius:999px; font-size:14px; font-weight:700; }
.intro-links a:first-child { background:var(--mint); color:var(--bg); border-color:var(--mint); }
.intro-links a:hover { border-color:var(--mint); }
.roadmap-section { padding-bottom:72px; scroll-margin-top:100px; }
.roadmap-heading { border-top:1px solid var(--border); padding-top:38px; }
.roadmap-heading h2 { font-family:var(--font-display); font-size:28px; margin:10px 0 12px; }
.roadmap-heading p { color:var(--text-mute); font-size:15px; line-height:1.8; word-break:keep-all; }
.scroll-hint { margin:18px 0 12px; color:var(--mint-soft); font-size:13px; }
.roadmap-scroll { overflow-x:auto; overscroll-behavior-x:contain; border:1px solid var(--border); border-radius:20px; background:var(--bg-soft); scrollbar-color:var(--mint) var(--bg-soft2); scrollbar-width:thin; }
/* One grid owns the four world lanes, separate card project and event flow. Each lane's
   flexible connector begins AFTER its card, even when the copy grows. */
.roadmap { min-width:1030px; padding:26px; display:grid; grid-template-columns:minmax(540px,1fr) 104px 310px; grid-template-rows:auto repeat(5,minmax(268px,auto)); column-gap:0; row-gap:18px; }
.stage { padding-bottom:18px; border-bottom:1px solid var(--border); }
.stage small { display:block; font-size:11px; letter-spacing:1.5px; color:var(--text-mute); margin-bottom:7px; }
.stage h3 { font-size:17px; }
.stage p { font-size:12px; color:var(--text-mute); margin-top:5px; }
.stage-event { text-align:center; }
.stage-event h3 { color:var(--pink-soft); }
.stage-unified { padding-left:26px; }
.stage-unified h3 { color:var(--mint-soft); }
.project-lane { grid-column:1; display:flex; align-items:center; --lane-color:var(--mint); }
.project-lane[data-project="love"] { --lane-color:var(--pink-soft); }
.project-lane[data-project="angel"] { --lane-color:#B6ADFF; }
.project-lane[data-project="beast"] { --lane-color:#EDC48A; }
.project-lane.is-offset { padding-left:64px; }
.project-card { width:344px; flex-shrink:0; padding:18px 20px; border:1px solid var(--border); border-left:3px solid var(--lane-color); border-radius:14px; background:var(--bg); }
.project-card h4 { font-family:var(--font-display); font-size:17px; line-height:1.4; margin-bottom:12px; }
.project-card h4 a:hover { color:var(--lane-color); }
.project-image { display:block; width:72px; height:72px; object-fit:cover; border:1px solid var(--border); border-radius:10px; margin-bottom:12px; }
.project-placeholder { width:100%; height:72px; border:1px dashed var(--border); border-radius:10px; display:flex; align-items:center; justify-content:center; gap:10px; color:var(--text-mute); font-size:12px; margin-bottom:12px; }
.project-placeholder span { color:var(--lane-color); font-size:22px; }
.project-card dl { display:grid; gap:7px; }
.project-card dt { font-size:10px; color:var(--lane-color); font-weight:700; letter-spacing:.6px; margin-bottom:2px; }
.project-card dd { color:#C3C1CD; font-size:13px; line-height:1.65; word-break:keep-all; }
.project-line { height:2px; flex:1; position:relative; background:var(--lane-color); }
.project-line::before, .project-line::after { content:""; position:absolute; width:8px; height:8px; top:50%; transform:translateY(-50%); border-radius:50%; background:var(--lane-color); }
.project-line::before { left:-4px; }
.project-line::after { right:-4px; z-index:2; }
.event-bar { grid-column:2; grid-row:2 / 6; display:flex; justify-content:center; align-items:center; text-align:center; border:1px solid rgba(255,124,179,.65); border-radius:16px; background:linear-gradient(180deg,rgba(255,46,136,.08),rgba(255,46,136,.22),rgba(255,46,136,.08)); }
.event-bar strong { display:block; font-size:20px; line-height:1.5; }
.event-bar small { display:block; color:var(--pink-soft); font-size:11px; margin-top:10px; }
.unified-flow { grid-column:3; grid-row:2 / 6; align-self:center; position:relative; display:flex; align-items:center; --lane-color:var(--mint); }
.unified-line { height:2px; background:var(--mint); flex:1; position:relative; }
.unified-line::after { content:""; position:absolute; right:0; top:50%; width:9px; height:9px; border-top:2px solid var(--mint); border-right:2px solid var(--mint); transform:translateY(-50%) rotate(45deg); }
.arena-card { width:260px; }
.unified-projects { width:260px; flex-shrink:0; display:grid; gap:18px; }
.unified-copy { margin-top:6px; }
.parallel-copy { grid-column:2 / 4; grid-row:6; align-self:center; max-width:336px; padding-left:26px; }
.unified-copy strong, .parallel-copy strong { color:var(--mint-soft); font-size:16px; }
.unified-copy p, .parallel-copy p { font-size:13px; line-height:1.85; color:#C3C1CD; margin-top:10px; word-break:keep-all; }
.roadmap-note { font-size:12px; color:var(--text-mute); margin-top:16px; line-height:1.8; }
@media (max-width:600px) {
  .wrap { padding-left:20px; padding-right:20px; }
  .nav-row { gap:8px; }
  .logo-area { gap:8px; }
  .logo-text { font-size:16px; }
  .logo-img { width:36px; height:36px; }
  .auth-area { margin-left:auto; gap:6px; }
  .auth-name { max-width:48px; }
  .btn-google { padding:9px; }
  .menu-toggle { flex-shrink:0; }
  .about-intro { padding:42px 0 34px; }
  .intro-copy { font-size:14px; }
  .roadmap-heading h2 { font-size:24px; }
  .roadmap { padding:20px; }
}