/* Quiet Instrument Panel: communicate Chicago’s route logic with compact readouts, deliberate map geometry, and signal-chartreuse actions. */
:root { --ink:#101a2b; --ink2:#0b1423; --paper:#f4f2e9; --lime:#b9f227; --line:rgba(244,242,233,.13); --muted:#aeb8c8; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; background:var(--ink); color:var(--paper); font-family:"IBM Plex Sans",system-ui,sans-serif; }
button,input { font:inherit; } button,a { -webkit-tap-highlight-color:transparent; } a { color:inherit; text-decoration:none; }
.site-header { position:absolute; z-index:5; top:0; left:50%; display:flex; width:min(1440px,100%); transform:translateX(-50%); align-items:center; justify-content:space-between; padding:21px clamp(20px,5vw,52px); }
.brand { display:flex; align-items:center; gap:9px; font-family:"Space Grotesk",sans-serif; font-size:20px; font-weight:600; letter-spacing:-.07em; white-space:nowrap; }.route-mark { width:19px; height:19px; display:inline-block; background:var(--lime); clip-path:polygon(0 88%,45% 0,59% 0,31% 71%,100% 71%,100% 100%,0 100%); }.brand-rule { width:29px; height:1px; margin:7px 0 0 2px; background:var(--lime); }.site-header nav { display:flex; gap:26px; font-size:12px; color:rgba(255,255,255,.68); }.site-header nav a:hover,.text-action:hover { color:var(--lime); }.header-action { border:1px solid rgba(255,255,255,.25); border-radius:100px; background:transparent; padding:9px 14px; color:#fff; font-size:11px; font-weight:600; cursor:pointer; }.header-action:hover { border-color:var(--lime); color:var(--lime); }
main { position:relative; overflow:hidden; }.route-spine { position:absolute; z-index:3; left:clamp(20px,5vw,52px); top:0; width:1px; height:100%; background:linear-gradient(var(--lime),rgba(185,242,39,.18) 58%,transparent); pointer-events:none; }
.hero { position:relative; min-height:790px; isolation:isolate; overflow:hidden; border-bottom:1px solid var(--line); background:radial-gradient(circle at 80% 0%,#1f3954 0%,var(--ink) 50%,#08111e 100%); }.hero:before { position:absolute; z-index:-1; inset:0; content:""; background:linear-gradient(90deg,var(--ink) 0%,rgba(16,26,43,.96) 31%,rgba(16,26,43,.52) 57%,rgba(16,26,43,.78) 100%); }.map-grid { position:absolute; z-index:-2; right:-5%; top:-10%; width:63%; height:118%; opacity:.5; transform:rotate(-9deg); background-image:linear-gradient(115deg,transparent 49%,rgba(169,196,221,.16) 50%,transparent 51%),linear-gradient(26deg,transparent 49%,rgba(169,196,221,.14) 50%,transparent 51%),radial-gradient(circle at 30% 25%,rgba(213,174,84,.5) 0 2px,transparent 3px); background-size:61px 37px,73px 53px,45px 45px; }.route { position:absolute; height:3px; transform-origin:left; background:var(--lime); box-shadow:0 0 16px rgba(185,242,39,.65); }.route-one { top:36%; left:8%; width:72%; transform:rotate(27deg); }.route-two { top:71%; left:13%; width:56%; transform:rotate(-35deg); }.route-node { position:absolute; width:12px; height:12px; border:3px solid var(--ink); border-radius:50%; background:var(--lime); }.route-node.one { top:31%; left:14%; }.route-node.two { top:68%; right:8%; }
.hero-content { display:flex; min-height:790px; width:min(1440px,100%); margin:auto; padding:155px clamp(20px,5vw,52px) 62px; flex-direction:column; justify-content:flex-end; }.signal-label { display:flex; align-items:center; gap:12px; margin:0; color:#d4deeb; font-size:10px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; }.signal-label span { display:inline-block; width:38px; height:1px; background:var(--lime); }.signal-label.ink { color:#59687c; }.signal-label.ink span { background:#637920; }.signal-label.center { justify-content:center; color:var(--lime); }.hero h1,.section h2,.beta-section h2 { max-width:930px; margin:21px 0 0; font-family:"Space Grotesk",sans-serif; font-size:clamp(54px,8vw,102px); font-weight:600; letter-spacing:-.07em; line-height:.93; }.hero h1 em { color:var(--lime); font-style:normal; }.hero-copy { max-width:615px; margin:28px 0 0; color:#d3dbea; font-size:18px; line-height:1.65; }.hero-actions { display:flex; align-items:center; gap:20px; margin-top:31px; }.primary-action { display:inline-flex; align-items:center; gap:9px; border:0; border-radius:100px; background:var(--lime); padding:14px 19px; color:#0d1727; font-size:13px; font-weight:700; cursor:pointer; transition:transform .16s cubic-bezier(.23,1,.32,1); }.primary-action:hover { transform:translateY(-2px); }.primary-action:active { transform:scale(.97); }.primary-action span { font-size:19px; line-height:11px; }.text-action { color:#f4f2e9; font-size:13px; font-weight:600; }.readout-strip,.instrument-grid,.beta-readouts { display:grid; grid-template-columns:repeat(3,1fr); max-width:790px; margin-top:57px; border:1px solid var(--line); background:rgba(13,23,40,.74); backdrop-filter:blur(7px); }.readout-strip article,.instrument-grid article,.beta-readouts article { min-height:92px; padding:14px 17px; border-right:1px solid var(--line); border-left:2px solid transparent; }.readout-strip article:last-child,.instrument-grid article:last-child,.beta-readouts article:last-child { border-right:0; }.readout-strip article { border-left-color:var(--lime); }.readout-strip small,.mini-readouts small,.instrument-grid small,.beta-readouts small { display:block; color:rgba(255,255,255,.55); font-size:10px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; }.readout-strip strong,.mini-readouts strong,.instrument-grid strong,.beta-readouts strong { display:block; margin-top:4px; font-family:"Space Grotesk",sans-serif; font-size:18px; letter-spacing:-.04em; text-transform:uppercase; }.readout-strip p,.mini-readouts p,.instrument-grid p,.beta-readouts p { margin:4px 0 0; color:rgba(255,255,255,.57); font-size:12px; line-height:1.35; }
.section { position:relative; display:grid; grid-template-columns:.9fr 1.1fr; gap:64px; padding:112px clamp(20px,5vw,52px); }.paper-section { color:var(--ink); background:var(--paper); }.section h2 { font-size:clamp(46px,5.3vw,74px); }.paper-section h2 i { color:#647286; font-style:normal; }.mini-readouts { display:grid; grid-template-columns:repeat(2,1fr); max-width:430px; margin-top:43px; border-top:1px solid #c9c7bf; border-bottom:1px solid #c9c7bf; }.mini-readouts article { padding:13px 14px; border-right:1px solid #c9c7bf; border-left:2px solid #708421; }.mini-readouts article:last-child { border-right:0; }.mini-readouts small { color:#68788c; }.mini-readouts p { color:#536174; }.proof-list { border-top:1px solid #c9c7bf; }.proof-list article { display:grid; grid-template-columns:72px 1fr; gap:13px; padding:26px 0; border-bottom:1px solid #c9c7bf; }.proof-list b { color:#7a8c29; font-family:"Space Grotesk",sans-serif; font-size:13px; }.proof-list h3 { margin:0; font-family:"Space Grotesk",sans-serif; font-size:25px; letter-spacing:-.05em; }.proof-list p { max-width:530px; margin:7px 0 0; color:#526174; font-size:15px; line-height:1.55; }
.briefing-section { align-items:center; color:var(--paper); background:var(--ink); }.briefing-section:after { position:absolute; z-index:0; top:0; right:-16%; width:61%; height:100%; content:""; opacity:.22; background-image:linear-gradient(130deg,rgba(221,240,237,.18) 1px,transparent 1px),linear-gradient(40deg,rgba(221,240,237,.18) 1px,transparent 1px); background-size:42px 42px; }.briefing-copy,.phone-stage { position:relative; z-index:1; }.body-copy { max-width:620px; color:#c3cede; font-size:18px; line-height:1.65; }.instrument-grid { max-width:610px; margin-top:34px; }.instrument-grid article { min-height:145px; padding:16px; }.instrument-grid .instrument-icon { color:var(--lime); font-size:18px; }.instrument-grid strong { color:#fff; font-size:16px; text-transform:none; }.phone-stage { display:flex; justify-content:center; }.phone { width:min(300px,78vw); padding:6px; border:7px solid #27364f; border-radius:33px; background:#07101f; box-shadow:0 27px 82px rgba(0,0,0,.6); }.phone img { display:block; width:100%; border-radius:20px; }.phone-callout { position:absolute; top:86px; left:3%; color:var(--lime); font-size:10px; font-weight:600; letter-spacing:.17em; text-transform:uppercase; }.phone-callout:after { position:absolute; top:7px; left:66px; width:56px; height:1px; content:""; background:var(--lime); }
.chicago-section { align-items:center; color:var(--ink); background:var(--mist); }.windshield { position:relative; min-height:330px; overflow:hidden; background:linear-gradient(#d5dde3 0%,#9fb0bf 42%,#525f71 43%,#303b4a 100%); }.windshield:before { position:absolute; inset:0; content:""; background:linear-gradient(90deg,rgba(12,21,34,.74) 0 9%,transparent 9% 91%,rgba(12,21,34,.74) 91%),linear-gradient(0deg,rgba(10,18,31,.55),transparent 45%); }.skyline { position:absolute; bottom:30%; left:17%; width:65%; height:35%; background:linear-gradient(90deg,#475363 0 6%,transparent 6% 10%,#3c4858 10% 16%,transparent 16% 19%,#576373 19% 26%,transparent 26% 31%,#343f4d 31% 39%,transparent 39% 45%,#465261 45% 57%,transparent 57% 61%,#3a4553 61% 70%,transparent 70% 75%,#4d5968 75%); clip-path:polygon(0 100%,0 50%,8% 50%,8% 12%,17% 12%,17% 65%,25% 65%,25% 0,31% 0,31% 36%,41% 36%,41% 11%,51% 11%,51% 68%,60% 68%,60% 29%,72% 29%,72% 52%,82% 52%,82% 18%,91% 18%,91% 63%,100% 63%,100% 100%); }.road { position:absolute; bottom:-18%; left:26%; width:46%; height:57%; transform:perspective(120px) rotateX(40deg); background:linear-gradient(90deg,transparent 48%,rgba(244,242,233,.7) 48% 52%,transparent 52%),#243040; }.windshield-note { position:absolute; right:18px; bottom:17px; left:18px; border-left:2px solid var(--lime); background:rgba(11,20,35,.88); padding:12px 14px; color:#fff; font-size:13px; }.windshield-note span { color:var(--lime); font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; }.chicago-copy .body-copy { color:#47566a; }.mini-readouts.wide { max-width:610px; }
.beta-section { position:relative; overflow:hidden; padding:104px clamp(20px,5vw,52px) 92px; border-block:1px solid var(--line); text-align:center; background:var(--ink2); }.section-rule { position:absolute; top:0; left:0; width:100%; height:1px; background:linear-gradient(90deg,transparent,var(--lime) 18% 82%,transparent); }.beta-section h2 { max-width:790px; margin:19px auto 0; font-size:clamp(46px,5.3vw,74px); }.beta-section>p:not(.signal-label) { max-width:600px; margin:20px auto 0; color:#c3cede; font-size:17px; line-height:1.65; }.beta-readouts { margin:34px auto 0; text-align:left; }.beta-readouts article { border-left:2px solid var(--lime); }.beta-section .primary-action { margin-top:31px; }.privacy-note { display:block; margin-top:15px; color:rgba(255,255,255,.46); font-size:11px; }
footer { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:25px clamp(20px,5vw,52px); background:#09111e; color:rgba(255,255,255,.5); font-size:12px; }footer .brand { color:#fff; font-size:16px; }footer .route-mark { width:15px; height:15px; }
dialog { width:min(520px,calc(100vw - 30px)); border:1px solid rgba(255,255,255,.15); border-radius:18px; background:#121d31; padding:30px; color:#fff; box-shadow:0 24px 90px rgba(0,0,0,.65); }dialog::backdrop { background:rgba(7,16,31,.82); backdrop-filter:blur(5px); }dialog h2 { margin:16px 0 0; font-family:"Space Grotesk",sans-serif; font-size:34px; letter-spacing:-.06em; line-height:1; }dialog>p:not(.signal-label) { margin:13px 0 0; color:#b4bfd0; font-size:14px; line-height:1.55; }dialog form { display:grid; gap:13px; margin-top:22px; }dialog label { display:grid; gap:6px; color:#b9c4d4; font-size:12px; }dialog input { width:100%; border:1px solid rgba(255,255,255,.15); border-radius:9px; outline:0; background:#0d1728; padding:11px 12px; color:#fff; }dialog input:focus { border-color:var(--lime); }dialog .primary-action { justify-content:center; margin-top:5px; }.close-dialog { position:absolute; top:11px; right:13px; border:0; background:transparent; color:#b9c4d4; font-size:26px; cursor:pointer; }
@media (max-width:760px) { .site-header nav { display:none; }.hero,.hero-content { min-height:740px; }.hero-content { padding-top:130px; }.hero h1 { font-size:58px; }.hero-copy { font-size:16px; }.hero-actions { align-items:flex-start; flex-direction:column; }.readout-strip,.instrument-grid,.beta-readouts { grid-template-columns:1fr; }.readout-strip article,.instrument-grid article,.beta-readouts article { border-right:0; border-bottom:1px solid var(--line); }.readout-strip article:last-child,.instrument-grid article:last-child,.beta-readouts article:last-child { border-bottom:0; }.section { grid-template-columns:1fr; gap:46px; padding-block:80px; }.section h2 { font-size:48px; }.phone-stage { order:-1; }.phone-callout { left:0; }.windshield { min-height:300px; } footer { align-items:flex-start; flex-direction:column; } }
@media (prefers-reduced-motion: no-preference) { button,a { transition:color .16s cubic-bezier(.23,1,.32,1),border-color .16s cubic-bezier(.23,1,.32,1),transform .16s cubic-bezier(.23,1,.32,1); } }
.comparison-section { align-items:start; color:var(--paper); background:#16243a; }.comparison-section:before { position:absolute; inset:0; content:""; opacity:.22; background-image:linear-gradient(90deg,transparent 0 49%,rgba(185,242,39,.22) 49% 49.1%,transparent 49.1%),linear-gradient(0deg,transparent 0 49%,rgba(255,255,255,.09) 49% 49.2%,transparent 49.2%); background-size:100% 88px,100% 88px; pointer-events:none; }.comparison-intro,.comparison-table { position:relative; z-index:1; }.comparison-intro h2 { font-size:clamp(44px,4.7vw,68px); }.comparison-intro h2 i,.map-copy h2 i { color:var(--lime); font-style:normal; }.comparison-intro>p:not(.signal-label) { max-width:540px; margin:22px 0 0; color:#c3cede; font-size:17px; line-height:1.65; }.comparison-table { border-top:1px solid rgba(255,255,255,.25); }.comparison-head,.comparison-row { display:grid; grid-template-columns:.65fr 1fr 1fr; }.comparison-head { align-items:end; min-height:86px; border-bottom:1px solid rgba(255,255,255,.25); }.comparison-head span,.comparison-row span { padding:16px 17px; color:#aebbd0; font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; }.comparison-head strong { padding:16px 17px; color:#fff; font-family:"Space Grotesk",sans-serif; font-size:17px; line-height:1.05; letter-spacing:-.05em; }.comparison-head strong:last-child { border-left:2px solid var(--lime); color:var(--lime); }.comparison-row { border-bottom:1px solid rgba(255,255,255,.16); }.comparison-row p { min-height:74px; margin:0; padding:16px 17px; color:#c4cfde; font-size:14px; line-height:1.5; }.comparison-row p:last-child { border-left:2px solid rgba(185,242,39,.54); color:#fff; }
.chicago-map-section { align-items:center; color:var(--ink); background:var(--paper); }.city-map { position:relative; min-height:535px; overflow:hidden; border:1px solid #bac1bb; background:linear-gradient(160deg,#f4f2e9 0%,#e5e6dd 100%); box-shadow:14px 14px 0 #c8d1c9; }.city-map:before { position:absolute; inset:0; content:""; opacity:.65; background-image:linear-gradient(90deg,transparent 0 49px,rgba(80,99,111,.11) 50px,transparent 51px),linear-gradient(0deg,transparent 0 49px,rgba(80,99,111,.09) 50px,transparent 51px); background-size:51px 51px; }.map-topline { position:absolute; z-index:2; top:16px; right:17px; left:17px; display:flex; justify-content:space-between; border-bottom:1px solid rgba(16,26,43,.25); padding-bottom:9px; color:#4b596a; font-size:9px; font-weight:700; letter-spacing:.15em; }.lake { position:absolute; z-index:0; top:-12%; right:-19%; width:53%; height:127%; transform:rotate(-7deg); background:linear-gradient(90deg,#b8d4de,#d7e6e5 70%,rgba(215,230,229,.2)); clip-path:polygon(40% 0,100% 0,100% 100%,7% 100%,0 82%,31% 69%,11% 56%,37% 41%,22% 29%); }.city-map svg { position:absolute; z-index:1; inset:44px 17px 17px; width:calc(100% - 34px); height:calc(100% - 61px); }.roadline { fill:none; stroke:#536171; stroke-width:3; stroke-dasharray:2 6; }.roadline.primary { stroke:#26364a; stroke-width:5; }.roadline.faint { stroke:#95a49e; }.route-arrow { fill:none; stroke:var(--lime); stroke-width:4; stroke-linecap:round; stroke-dasharray:11 8; filter:drop-shadow(0 0 5px rgba(185,242,39,.7)); }.map-pin { position:absolute; z-index:3; display:grid; gap:2px; padding:7px 9px; border:1px solid rgba(16,26,43,.2); border-left:3px solid var(--lime); background:rgba(244,242,233,.9); box-shadow:0 5px 14px rgba(27,42,57,.12); }.map-pin b { color:#24364d; font-family:"Space Grotesk",sans-serif; font-size:13px; letter-spacing:-.04em; }.map-pin small { color:#617084; font-size:9px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }.ord { top:19%; left:9%; }.wrigley { top:20%; left:52%; }.fulton { top:41%; left:46%; }.loop { top:52%; left:66%; }.mccormick { top:68%; left:64%; }.midway { bottom:10%; left:32%; }.map-cursor { position:absolute; z-index:4; right:15px; bottom:15px; display:flex; max-width:235px; gap:9px; border:1px solid rgba(16,26,43,.23); background:#101a2b; padding:10px; color:#fff; }.map-cursor span { flex:0 0 11px; width:11px; height:11px; margin-top:4px; border:2px solid var(--lime); border-radius:50%; box-shadow:0 0 0 4px rgba(185,242,39,.14); }.map-cursor p { margin:0; color:#c8d3df; font-size:11px; line-height:1.45; }.map-cursor b { color:var(--lime); }.map-copy h2 { font-family:"Space Grotesk",sans-serif; font-size:clamp(46px,5.3vw,74px); line-height:.96; letter-spacing:-.07em; }.map-copy .body-copy { color:#465568; }.scenario-stack { margin-top:29px; border-top:1px solid #c4c9c4; }.scenario-stack article { display:grid; grid-template-columns:36px 1fr; gap:12px; padding:15px 0; border-bottom:1px solid #c4c9c4; }.scenario-stack>article>span { color:#718527; font-family:"Space Grotesk",sans-serif; font-size:11px; font-weight:700; }.scenario-stack small { color:#657487; font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }.scenario-stack h3 { margin:4px 0 0; font-family:"Space Grotesk",sans-serif; font-size:21px; letter-spacing:-.05em; }.scenario-stack p { margin:6px 0 0; color:#536174; font-size:13px; line-height:1.48; }.map-disclaimer { margin:17px 0 0; color:#708090; font-size:10px; line-height:1.5; }
@media (max-width:760px) { .comparison-head,.comparison-row { grid-template-columns:1fr 1fr; }.comparison-head span,.comparison-row span { display:none; }.comparison-head { min-height:65px; }.comparison-head strong,.comparison-row p { padding:13px 12px; font-size:12px; }.comparison-row p { min-height:0; }.city-map { min-height:445px; box-shadow:8px 8px 0 #c8d1c9; }.map-pin { padding:5px 6px; }.map-pin small { display:none; }.ord { top:20%; left:5%; }.wrigley { top:18%; left:49%; }.fulton { top:43%; left:36%; }.loop { top:53%; left:62%; }.mccormick { top:68%; left:56%; }.midway { bottom:13%; left:24%; }.map-cursor { max-width:191px; } }