.bridge-hero { min-height:640px; display:grid; grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr); gap:70px; align-items:center; padding-block:78px 102px; }
.back-link { display:inline-block; color:var(--accent-strong); font-size:13px; font-weight:800; text-decoration:underline; text-underline-offset:4px; margin-bottom:42px; }
.bridge-heading .tiny-label { margin:0; }
.bridge-heading h1 { margin:21px 0 0; font-size:clamp(60px,6.3vw,91px); font-weight:900; line-height:1.04; letter-spacing:-5.8px; max-width:660px; }
.bridge-heading h1 span { color:var(--accent-strong); }
.bridge-heading h1 .title-period { color:var(--ink); }
.bridge-subhead { margin:23px 0 11px; font-weight:900; font-size:clamp(21px,2.4vw,27px); letter-spacing:-.7px; line-height:1.3; }
.bridge-intro { max-width:550px; color:var(--muted); margin:0 0 27px; font-size:15px; line-height:1.82; }
.bridge-illustration { position:relative; min-width:0; padding:35px 10px 25px 8px; }
.bridge-window { background:var(--window); border:2px solid var(--ink); border-radius:10px; box-shadow:12px 14px 0 var(--shadow); overflow:hidden; transform:rotate(1.4deg); }
.bridge-window-content { padding:26px 38px 20px; }
.bridge-node { display:flex; align-items:center; gap:15px; border:1.5px solid var(--rule); border-radius:8px; padding:14px 16px; background:var(--card); }
.bridge-node-center { background:var(--panel-blue); border-color:var(--accent); }
.bridge-node-icon { display:grid; place-items:center; flex:0 0 43px; height:43px; background:var(--panel-teal); border:1.5px solid var(--ink); border-radius:9px; font-size:22px; font-weight:900; font-family:Arial,sans-serif; }
.bridge-node strong { display:block; font-size:14px; line-height:1.2; font-weight:900; }
.bridge-node small { display:block; margin-top:3px; font-size:11px; color:var(--muted); }
.bridge-connector { height:31px; display:flex; align-items:center; justify-content:center; gap:7px; color:var(--accent-strong); }
.bridge-connector span { border-left:2px dashed var(--accent); height:20px; }
.bridge-connector b { font-size:18px; line-height:1; }
.window-status { border-top:1.5px solid var(--rule); padding:10px 17px; color:var(--muted); font-size:11px; font-family:Consolas,'Courier New',monospace; font-weight:700; display:flex; align-items:center; gap:9px; }
.status-light { height:7px; width:7px; border-radius:50%; background:#7caf94; box-shadow:0 0 0 3px #7caf9424; }
.mini-sticker { position:absolute; z-index:2; top:8px; right:-15px; transform:rotate(8deg); background:var(--panel-teal); border:1.5px solid var(--ink); box-shadow:3px 4px 0 var(--shadow); padding:9px 15px; font-family:Consolas,'Courier New',monospace; font-size:12px; font-weight:800; }
.mini-sticker span { color:var(--accent-strong); }
.tape-tag { position:absolute; bottom:-3px; left:-13px; padding:9px 13px; background:var(--panel-note); border:1.5px solid var(--ink); box-shadow:3px 4px 0 var(--shadow); font-size:11px; font-weight:800; transform:rotate(-5deg); }
.bridge-section { padding-block:107px 112px; }
.bridge-section-intro { margin-bottom:46px; }
.bridge-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.bridge-step { background:var(--card); border:1.5px solid var(--ink); border-radius:9px; padding:23px 22px 27px; box-shadow:5px 6px 0 var(--shadow); }
.bridge-step:nth-child(2) { background:var(--panel-blue); }
.bridge-step:nth-child(3) { background:var(--panel-teal); }
.step-count { display:inline-flex; align-items:center; justify-content:center; width:39px; height:39px; border:1.5px solid var(--ink); border-radius:8px; background:var(--window); font-family:Consolas,'Courier New',monospace; font-size:15px; font-weight:900; }
.bridge-step h3 { margin:35px 0 11px; font-size:23px; line-height:1.2; letter-spacing:-.65px; font-weight:900; }
.bridge-step p { margin:0; font-size:14px; line-height:1.75; color:var(--muted); }
.bridge-details-wrap { background:var(--paper-alt); border-top:1px dashed var(--rule); border-bottom:1px dashed var(--rule); }
.bridge-details { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:90px; padding-block:102px; }
.bridge-details-heading h2 { font-size:clamp(45px,5.4vw,65px); line-height:1.08; letter-spacing:-3.3px; font-weight:900; margin:20px 0; }
.bridge-details-heading h2 em { color:var(--accent-strong); font-style:normal; }
.bridge-details-heading>p { color:var(--muted); margin:0; font-size:14px; }
.bridge-facts { display:grid; gap:0; }
.bridge-fact { border-bottom:1px solid var(--rule); padding:17px 0; display:flex; align-items:flex-start; gap:17px; }
.bridge-fact:first-child { border-top:1px solid var(--rule); }
.bridge-fact>span { color:var(--accent-strong); font-size:22px; font-weight:900; flex:0 0 auto; }
.bridge-fact p { margin:0; line-height:1.7; font-size:14px; color:var(--muted); }
.bridge-fact strong { color:var(--ink); }
.bridge-bottom { display:grid; grid-template-columns:1.25fr .75fr; gap:18px; padding-block:110px 115px; align-items:stretch; }
.bridge-status-card,.bridge-note-card { border:1.5px solid var(--ink); border-radius:9px; padding:31px; }
.bridge-status-card { background:var(--panel-blue); }
.bridge-note-card { background:var(--card); }
.status-tag { display:inline-flex; align-items:center; gap:7px; font-size:11px; font-weight:900; background:var(--card); border:1px solid var(--ink); border-radius:99px; padding:5px 11px; }
.status-tag span { color:var(--accent-strong); font-size:10px; }
.bridge-status-card h2 { font-size:clamp(36px,4vw,49px); line-height:1.12; font-weight:900; letter-spacing:-2px; margin:23px 0 16px; }
.bridge-status-card h2 span { color:var(--accent-strong); }
.bridge-status-card>p:last-child,.bridge-note-card>p:not(.box-kicker) { font-size:14px; line-height:1.85; color:var(--muted); margin:0; }
.bridge-note-card h3 { font-size:26px; font-weight:900; line-height:1.2; letter-spacing:-1px; margin:39px 0 14px; }
.bridge-note-card .plain-link { display:inline-block; color:var(--accent-strong); font-weight:800; margin-top:26px; font-size:13px; }
@media(max-width:980px) {
  .bridge-hero { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:35px; }
  .bridge-heading h1 { font-size:clamp(54px,6vw,75px); letter-spacing:-4px; }
  .bridge-window-content { padding-inline:20px; }
  .bridge-details { gap:48px; }
}
@media(max-width:740px) {
  .bridge-hero { grid-template-columns:1fr; gap:34px; padding-block:43px 93px; }
  .back-link { margin-bottom:32px; }
  .bridge-heading h1 { font-size:clamp(51px,11.5vw,77px); letter-spacing:-3.8px; }
  .bridge-intro { font-size:14px; }
  .bridge-illustration { width:min(500px,100% - 14px); justify-self:center; }
  .bridge-window-content { padding-inline:27px; }
  .bridge-steps { grid-template-columns:1fr; gap:19px; }
  .bridge-section { padding-block:85px; }
  .bridge-step { padding:21px 23px 27px; }
  .bridge-step h3 { margin-top:20px; }
  .bridge-details { grid-template-columns:1fr; gap:33px; padding-block:83px; }
  .bridge-bottom { grid-template-columns:1fr; padding-block:85px; }
}
@media(max-width:375px) {
  .bridge-heading h1 { font-size:48px; }
  .bridge-window-content { padding-inline:17px; }
  .bridge-node { padding:10px; }
  .bridge-node-icon { flex-basis:37px; height:37px; }
  .mini-sticker { right:-12px; }
  .bridge-status-card,.bridge-note-card { padding:24px; }
}
