/* Compact landing-page journey. Its diagram uses the existing two-pixel bridge art. */
#crossing.journey-section { background:var(--paper); }
#crossing .journey-heading { margin-bottom:32px; }
#crossing .journey-heading > p { max-width:400px; }
#crossing .journey-toolbar { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:16px; }
#crossing .journey-tabs { display:flex; flex-wrap:wrap; gap:8px; }
#crossing .journey-tabs button { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:44px; padding:12px 20px; border:1px solid var(--line); border-radius:9999px; background:transparent; color:var(--ink); font:600 14px/20px var(--font-sans); transition:background-color 200ms var(--ease),color 200ms var(--ease),border-color 200ms var(--ease); }
#crossing .journey-tabs button:hover { border-color:var(--ink); }
#crossing .journey-tabs button[aria-selected="true"] { background:var(--ink); border-color:var(--ink); color:var(--paper); }
#crossing .journey-motion { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; gap:8px; min-height:44px; padding:8px 0 8px 16px; border:0; background:transparent; color:var(--muted); font:600 14px/20px var(--font-sans); }
#crossing .journey-motion-icon { font-size:16px; width:16px; text-align:center; }
#crossing .journey-motion:disabled { cursor:default; }
#crossing .journey-scene { position:relative; height:360px; overflow:hidden; background:var(--paper); }
#crossing .journey-canvas { display:block; image-rendering:pixelated; }
#crossing .journey-labels { position:absolute; inset:0; pointer-events:none; }
#crossing .journey-scene-label { position:absolute; top:calc(var(--journey-deck, 50%) - 70px); left:10%; display:flex; align-items:center; justify-content:center; width:18%; max-width:132px; height:34px; padding:6px 4px; border:1px solid var(--mineral); border-radius:6px; background:var(--paper); color:var(--ink); font:600 14px/20px var(--font-sans); transform:translateX(-50%); transition:background-color 200ms var(--ease),color 200ms var(--ease),border-color 200ms var(--ease); }
#crossing .journey-scene-label::after { content:""; position:absolute; top:100%; left:50%; width:1px; height:22px; background:var(--mineral); }
#crossing .journey-scene-label.is-complete { border-color:var(--ink); }
#crossing .journey-scene-label.is-current { background:var(--ink); border-color:var(--ink); color:var(--paper); }
#crossing .journey-scene-label.is-current::after, #crossing .journey-scene-label.is-complete::after { background:var(--ink); }
#crossing .journey-shores { position:absolute; inset:24px 24px auto; display:flex; justify-content:space-between; gap:24px; color:var(--ink); font-size:14px; line-height:24px; font-weight:600; pointer-events:none; }
#crossing .journey-shores > span { display:flex; align-items:center; gap:8px; }
#crossing .journey-pearl { display:block; width:20px; height:20px; border:2px solid var(--ink); border-radius:50%; background:var(--mineral); box-shadow:inset -4px -2px var(--paper); }
#crossing .journey-ethereum { font-size:24px; font-style:normal; }
#crossing .journey-route { outline-offset:8px; }
#crossing .journey-route-title { margin:24px 0 16px; font-size:24px; line-height:32px; font-weight:500; letter-spacing:-.025em; }
#crossing .journey-stages { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); list-style:none; padding:0; margin:0; border-top:1px solid var(--line); }
#crossing .journey-stage { position:relative; min-width:0; padding:0 16px; border-left:1px solid var(--line); }
#crossing .journey-stage:first-child { border-left:0; padding-left:0; }
#crossing .journey-stage:last-child { padding-right:0; }
#crossing .journey-stage-trigger { position:relative; display:flex; align-items:flex-start; gap:8px; width:100%; min-height:88px; padding:28px 0 20px; border:0; background:transparent; text-align:left; color:var(--ink); font:600 17px/24px var(--font-sans); }
#crossing .journey-stage-trigger > span:nth-child(2) { min-width:0; flex:1; }
#crossing .journey-stage-trigger > svg { display:block; flex:none; width:16px; height:16px; margin-top:4px; fill:none; stroke:var(--muted); stroke-width:1.5; stroke-linecap:square; transition:transform 240ms var(--ease); }
#crossing .journey-stage-trigger[aria-expanded="true"] > svg { transform:rotate(45deg); }
#crossing .journey-stage-marker { position:absolute; left:0; top:-4px; width:7px; height:7px; background:var(--mineral); box-shadow:0 0 0 4px var(--paper); transition:background-color 240ms var(--ease),transform 240ms var(--ease); }
#crossing .journey-stage.is-current .journey-stage-marker { background:var(--ink); transform:scale(1.4); }
#crossing .journey-detail { display:grid; grid-template-rows:1fr; opacity:1; transition:grid-template-rows 300ms var(--ease),opacity 220ms var(--ease); }
#crossing .journey-detail-inner { min-height:0; overflow:hidden; }
#crossing .journey-detail p { margin:0; padding:0 0 24px; color:var(--muted); font-size:14px; line-height:22px; text-wrap:pretty; }
#crossing.journey-ready .journey-stage:not(.is-open) .journey-detail { grid-template-rows:0fr; opacity:0; visibility:hidden; transition:grid-template-rows 300ms var(--ease),opacity 220ms var(--ease),visibility 0s 300ms; }
#crossing.journey-ready .journey-route-title { display:none; }
#crossing .journey-foot { display:flex; justify-content:space-between; align-items:baseline; gap:24px; padding-top:24px; margin-top:8px; border-top:1px solid var(--line); font-size:14px; line-height:24px; }
#crossing .journey-foot p { margin:0; color:var(--muted); }
#crossing .journey-foot a { color:var(--ink); font-weight:600; text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1px; white-space:nowrap; }
#crossing .journey-foot a span { margin-left:8px; }
#crossing .journey-foot a:hover { text-decoration-thickness:2px; }
#crossing:not(.journey-ready) .journey-route + .journey-route { margin-top:40px; }
#crossing [hidden] { display:none!important; }
@media (min-width:1600px) { #crossing .journey-scene { height:400px; } }
@media (max-width:1100px) {
  #crossing .journey-stage { padding-inline:12px; }
  #crossing .journey-stage-trigger { font-size:15px; line-height:22px; gap:4px; }
}
@media (max-width:760px) {
  #crossing .journey-heading { margin-bottom:24px; }
  #crossing .journey-toolbar { gap:8px; flex-wrap:wrap; }
  #crossing .journey-tabs { flex:1; gap:8px; }
  #crossing .journey-tabs button { flex:1; padding:10px 12px; gap:8px; white-space:nowrap; }
  #crossing .journey-motion { margin-left:auto; padding-left:8px; }
  #crossing .journey-scene { height:280px; }
  #crossing .journey-shores { inset:16px 16px auto; }
  #crossing .journey-scene-label { font-size:12px; }
  #crossing .journey-stages { display:block; }
  #crossing .journey-stage, #crossing .journey-stage:first-child, #crossing .journey-stage:last-child { padding:0 0 0 24px; border-left:0; border-bottom:1px solid var(--line); }
  #crossing .journey-stage-trigger { min-height:60px; padding:18px 0; align-items:center; font-size:16px; line-height:24px; }
  #crossing .journey-stage-marker { left:-24px; top:27px; box-shadow:none; }
  #crossing .journey-stage-trigger > svg { margin:0 8px 0 12px; }
  #crossing .journey-detail p { max-width:520px; padding-bottom:20px; font-size:14px; line-height:22px; }
  #crossing .journey-foot { display:block; margin-top:24px; padding-top:0; border:0; }
  #crossing .journey-foot a { display:inline-block; margin-top:12px; }
}
@media (max-width:480px) {
  #crossing .journey-tabs { width:100%; flex:none; }
  #crossing .journey-tabs button { padding-inline:8px; font-size:13px; }
  #crossing .journey-motion { margin-top:-4px; margin-bottom:-8px; min-height:36px; }
  #crossing .journey-scene { height:240px; }
  #crossing .journey-shores { inset:12px 12px auto; font-size:13px; }
  #crossing .journey-scene-label { top:calc(var(--journey-deck, 50%) - 60px); height:28px; padding-inline:2px; font-size:11px; line-height:14px; border-radius:4px; }
  #crossing .journey-scene-label::after { height:18px; }
}
@media (prefers-reduced-motion:reduce) {
  #crossing .journey-detail, #crossing .journey-stage:not(.is-open) .journey-detail, #crossing .journey-stage-marker, #crossing .journey-stage-trigger > svg, #crossing .journey-scene-label { transition:none!important; }
}