@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Barlow:wght@400;500;600;700&display=swap');
/* ===== Skin: BEACON — ustime.now. Civic/transit board: deep navy, signal red,
   condensed grotesque headings, zone-strip header, flat departure-board rows. ===== */
:root{--c:#0b4da2}
body.skin-beacon{--c:#0b4da2;--c-d:#083a7c;--c-l:#e6eefa;--navy:#0d1b33;--navy-2:#16294a;--red:#c8202e;
  --ink:#0d1b33;--mut:#4d596e;--faint:#8e98aa;--line:#dfe4ec;--line2:#c3cbd8;--bg:#f2f5f9;--card:#ffffff;
  --shadow:0 1px 2px rgba(13,27,51,.06),0 6px 18px rgba(13,27,51,.08);
  margin:0;font-family:'Barlow',-apple-system,BlinkMacSystemFont,sans-serif;color:var(--ink);background:var(--bg);
  font-size:15.5px;line-height:1.6;-webkit-font-smoothing:antialiased}
body.skin-beacon *{box-sizing:border-box}
body.skin-beacon h1,body.skin-beacon h2,body.skin-beacon h3,body.skin-beacon h4{font-family:'Barlow Condensed',sans-serif;
  font-weight:700;line-height:1.1;letter-spacing:.005em;text-transform:uppercase;color:var(--navy)}
body.skin-beacon a{color:var(--c);text-decoration:none;font-weight:600}
body.skin-beacon a:hover{color:var(--red);text-decoration:underline}

/* ---- Chrome: a six-zone strip runs under the bar ---- */
body.skin-beacon .g-header{background:var(--navy);position:sticky;top:0;z-index:20}
body.skin-beacon .g-header::after{content:"";display:block;height:5px;
  background:linear-gradient(90deg,var(--red) 0 16.6%,#e06a1b 16.6% 33.2%,#d8a416 33.2% 49.8%,#2f8f4e 49.8% 66.4%,var(--c) 66.4% 83%,#5b3a9e 83% 100%)}
body.skin-beacon .g-bar{max-width:1160px;margin:0 auto;display:flex;align-items:center;gap:16px;padding:13px 24px;flex-wrap:wrap}
body.skin-beacon .g-brand{color:#fff;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:23px;
  letter-spacing:.05em;text-transform:uppercase;display:flex;align-items:center;gap:10px}
body.skin-beacon .g-brand b{color:#7fb0f5}
body.skin-beacon .g-brand::before{content:"";width:22px;height:16px;border-radius:2px;
  background:linear-gradient(180deg,var(--red) 0 33%,#fff 33% 66%,var(--c) 66% 100%)}
body.skin-beacon .g-nav{display:flex;gap:2px;flex-wrap:wrap;margin-left:auto}
body.skin-beacon .g-nav a{color:#a9b7cd;font-family:'Barlow Condensed',sans-serif;font-size:15px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;padding:7px 12px;border-radius:3px}
body.skin-beacon .g-nav a:hover{background:var(--navy-2);color:#fff;text-decoration:none}
body.skin-beacon .g-nav a.is-main{color:#fff;background:var(--c)}
body.skin-beacon .g-cta{background:var(--red);color:#fff;padding:8px 18px;border-radius:3px;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:15px;letter-spacing:.06em;text-transform:uppercase}
body.skin-beacon .g-cta:hover{background:#e0303e;text-decoration:none}
body.skin-beacon .g-main{max-width:1160px;margin:0 auto;padding:30px 24px 64px}

/* ---- Hero ---- */
body.skin-beacon .hero{display:grid;grid-template-columns:.9fr 1.1fr;gap:34px;align-items:center;background:var(--card);
  border:1px solid var(--line2);border-radius:4px;padding:36px;margin-bottom:32px;box-shadow:var(--shadow)}
body.skin-beacon .hero-h1{font-size:46px;margin:0 0 12px;letter-spacing:.01em}
body.skin-beacon .hero-lead{font-size:17px;color:var(--mut);margin:0 0 18px}
body.skin-beacon .hero-badges{list-style:none;display:flex;flex-wrap:wrap;gap:7px;padding:0;margin:0}
body.skin-beacon .hero-badges li{background:var(--navy);color:#fff;font-family:'Barlow Condensed',sans-serif;font-size:13px;
  font-weight:600;letter-spacing:.07em;text-transform:uppercase;padding:4px 11px;border-radius:2px}
body.skin-beacon .hero-steps{margin:18px 0 0;padding-left:20px;color:var(--mut);font-size:14.5px}
body.skin-beacon .hero-widget{display:flex;justify-content:center;align-items:center;padding:24px;background:var(--navy);
  border-radius:4px;box-shadow:inset 0 0 50px rgba(0,0,0,.3)}
body.skin-beacon .wc-stage{border-radius:3px;background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)}

/* ---- Sections & cards ---- */
body.skin-beacon .section-h{font-size:28px;margin:0 0 16px;padding-bottom:8px;border-bottom:3px solid var(--navy)}
body.skin-beacon .toolgrid-wrap,body.skin-beacon .content-body,body.skin-beacon .articles-strip,
body.skin-beacon .other-tools,body.skin-beacon .faq{margin:44px 0}
body.skin-beacon .toolgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(224px,1fr));gap:12px}
body.skin-beacon .tool-card{display:flex;flex-direction:column;gap:4px;background:var(--card);border:1px solid var(--line2);
  border-radius:4px;padding:18px;transition:.14s;border-left:5px solid var(--c)}
body.skin-beacon .tool-card:nth-child(2n){border-left-color:var(--red)}
body.skin-beacon .tool-card:nth-child(3n){border-left-color:#2f8f4e}
body.skin-beacon .tool-card:hover{text-decoration:none;box-shadow:var(--shadow);transform:translateX(2px)}
body.skin-beacon .tool-card-label{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:19px;
  text-transform:uppercase;letter-spacing:.03em;color:var(--navy)}
body.skin-beacon .tool-card-short{font-size:10.5px;font-weight:700;color:var(--c);text-transform:uppercase;letter-spacing:.13em}
body.skin-beacon .tool-card-lead{font-size:13px;color:var(--mut)}

/* ---- Longform ---- */
body.skin-beacon .longform{max-width:780px;background:var(--card);border:1px solid var(--line2);border-radius:4px;padding:34px;box-shadow:var(--shadow)}
body.skin-beacon .longform .lead-copy p:first-child{font-size:18px;color:var(--navy)}
body.skin-beacon .longform h2{font-size:25px;margin:28px 0 11px}
body.skin-beacon .longform p{margin:0 0 15px;color:var(--mut)}

/* ---- Articles ---- */
body.skin-beacon .art-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(256px,1fr));gap:14px}
body.skin-beacon .art-card{display:flex;flex-direction:column;gap:6px;background:var(--card);border:1px solid var(--line2);
  border-radius:4px;padding:19px;transition:.14s;border-top:4px solid var(--navy)}
body.skin-beacon .art-card:hover{text-decoration:none;box-shadow:var(--shadow);border-top-color:var(--red)}
body.skin-beacon .art-cluster{font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:700;color:var(--red);
  text-transform:uppercase;letter-spacing:.13em}
body.skin-beacon .art-title{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:20px;line-height:1.14;
  text-transform:uppercase;color:var(--navy)}
body.skin-beacon .art-excerpt{font-size:13px;color:var(--mut)}
body.skin-beacon .art-meta{font-size:11px;color:var(--faint);margin-top:auto;letter-spacing:.06em;text-transform:uppercase}

/* ---- FAQ ---- */
body.skin-beacon .faq-item{border:1px solid var(--line2);border-radius:4px;margin-bottom:8px;background:var(--card)}
body.skin-beacon .faq-q{cursor:pointer;padding:14px 18px;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:19px;
  text-transform:uppercase;letter-spacing:.02em;color:var(--navy);list-style:none}
body.skin-beacon .faq-q::-webkit-details-marker{display:none}
body.skin-beacon .faq-q::after{content:"\25BE";float:right;color:var(--c);font-size:15px}
body.skin-beacon .faq-item[open]{border-color:var(--c);box-shadow:inset 4px 0 0 var(--c)}
body.skin-beacon .faq-item[open] .faq-q::after{content:"\25B4"}
body.skin-beacon .faq-a{padding:0 18px 16px;color:var(--mut)}

/* ---- Article page ---- */
body.skin-beacon .crumbs{font-size:12px;color:var(--faint);margin:22px 0 14px;text-transform:uppercase;letter-spacing:.08em}
body.skin-beacon .crumbs span{margin:0 7px;color:var(--line2)}
body.skin-beacon .article{max-width:750px;background:var(--card);border:1px solid var(--line2);border-radius:4px;padding:40px;box-shadow:var(--shadow)}
body.skin-beacon .article-head h1{font-size:40px;margin:8px 0;line-height:1.06}
body.skin-beacon .article-meta{color:var(--faint);font-size:12.5px;text-transform:uppercase;letter-spacing:.07em}
body.skin-beacon .tool-cta,body.skin-beacon .tool-cta-foot{background:var(--navy);color:#c9d5e6;border-radius:4px;padding:20px 24px;
  display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin:24px 0}
body.skin-beacon .tool-cta h3,body.skin-beacon .tool-cta-foot h3{color:#fff}
body.skin-beacon .cta-btn{background:var(--red);color:#fff;padding:11px 22px;border-radius:3px;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:16px;text-transform:uppercase;letter-spacing:.06em}
body.skin-beacon .cta-btn:hover{background:#e0303e;color:#fff;text-decoration:none}
body.skin-beacon .article-body{color:var(--mut);font-size:16.5px}
body.skin-beacon .article-body h2{font-size:28px;margin:32px 0 11px}
body.skin-beacon .article-body h3{font-size:21px;margin:25px 0 9px;color:var(--c)}
body.skin-beacon .article-body p{margin:0 0 15px}
body.skin-beacon .article-body ul,body.skin-beacon .article-body ol{margin:0 0 15px 22px}
body.skin-beacon .article-body li{margin:6px 0}
body.skin-beacon .article-body strong{color:var(--navy)}

/* ---- Index, error, footer ---- */
body.skin-beacon .page-head h1{font-size:42px}
body.skin-beacon .cluster-block{margin:44px 0}
body.skin-beacon .error-page{text-align:center;padding:88px 0}
body.skin-beacon .error-page h1{font-size:110px;color:var(--red)}
body.skin-beacon .g-footer{background:var(--navy);margin-top:56px;padding:46px 24px 24px;color:#a9b7cd}
body.skin-beacon .g-footer::before{content:"";display:block;height:4px;margin:-46px -24px 40px;
  background:linear-gradient(90deg,var(--red) 0 16.6%,#e06a1b 16.6% 33.2%,#d8a416 33.2% 49.8%,#2f8f4e 49.8% 66.4%,var(--c) 66.4% 83%,#5b3a9e 83% 100%)}
body.skin-beacon .g-foot-grid{max-width:1160px;margin:0 auto;display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:30px}
body.skin-beacon .g-foot-grid h4{color:#fff;font-family:'Barlow Condensed',sans-serif;font-size:14px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;margin:0 0 11px}
body.skin-beacon .g-foot-grid a{display:block;color:#a9b7cd;font-size:13.5px;padding:4px 0;font-weight:500}
body.skin-beacon .g-foot-grid a:hover{color:#fff}
body.skin-beacon .g-foot-brand .g-brand{color:#fff}
body.skin-beacon .g-copy{max-width:1160px;margin:28px auto 0;border-top:1px solid rgba(255,255,255,.13);padding-top:18px;font-size:12.5px;color:#7d8ba3}

/* ---- Supplementary ---- */
body.skin-beacon .hero-copy{min-width:0}
body.skin-beacon .hero-tool,body.skin-beacon .hero-tool-page{min-width:0;align-self:center}
body.skin-beacon .hero-tool-page{max-width:860px;margin:0 auto 32px}
body.skin-beacon .lf-section{margin:8px 0}
body.skin-beacon .articles-strip-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}
body.skin-beacon .more-link{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;text-transform:uppercase;color:var(--red)}
body.skin-beacon .faq-title{font-size:28px;margin:0 0 16px;padding-bottom:8px;border-bottom:3px solid var(--navy)}
body.skin-beacon .faq-list{max-width:780px;display:flex;flex-direction:column;gap:8px}
body.skin-beacon .page-head{margin-bottom:16px;border-bottom:3px solid var(--navy);padding-bottom:16px}
body.skin-beacon .page-head-lead{font-size:17px;color:var(--mut);max-width:640px;margin-top:9px}
body.skin-beacon .article-head{margin-bottom:16px;border-bottom:1px solid var(--line);padding-bottom:14px}
body.skin-beacon .empty-note{color:var(--faint);background:var(--card);border:1px dashed var(--line2);border-radius:4px;padding:24px;text-align:center}

/* ---- Widgets on the navy hero ---- */
body.skin-beacon .hero-widget .wc-time,body.skin-beacon .hero-widget .tw-ustime{color:#ffd23f}
body.skin-beacon .hero-widget .wc-date,body.skin-beacon .hero-widget .wc-label,body.skin-beacon .hero-widget .tw-note,
body.skin-beacon .hero-widget .tw-usdate,body.skin-beacon .hero-widget .tw-usoff{color:#a9b7cd}
body.skin-beacon .hero-widget .tw-usname{color:#fff}
body.skin-beacon .hero-widget .tw-usrow:nth-child(odd){background:rgba(255,255,255,.07)}
body.skin-beacon .hero-widget .hero-h1{color:#fff}
body.skin-beacon .hero-widget .hero-lead,body.skin-beacon .hero-widget .hero-steps li{color:#c9d5e6}
body.skin-beacon .hero-widget .wc-input,body.skin-beacon .hero-widget .wc-select{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.28)}

/* ---- Widget flourishes: departure-board rows ---- */
body.skin-beacon .tw-usrow{border-radius:3px;border-bottom:1px solid var(--line)}
body.skin-beacon .tw-usrow:nth-child(odd){background:var(--c-l)}
body.skin-beacon .tw-usname{font-family:'Barlow Condensed',sans-serif;font-size:19px;text-transform:uppercase;letter-spacing:.03em}
body.skin-beacon .tw-ustime{color:var(--c-d)}
body.skin-beacon .tw-dstrow.is-next{outline-color:var(--red);background:rgba(200,32,46,.06)}
body.skin-beacon .wc-input,body.skin-beacon .wc-select{border-radius:3px;background:#fff}
body.skin-beacon .wc-fbtn{border-radius:3px;background:var(--c);text-transform:uppercase;letter-spacing:.06em;font-family:'Barlow Condensed',sans-serif;font-size:15px}

@media(max-width:760px){
  body.skin-beacon .hero{grid-template-columns:1fr;gap:24px;padding:24px}
  body.skin-beacon .hero-h1{font-size:34px}
  body.skin-beacon .toolgrid{grid-template-columns:1fr}
  body.skin-beacon .g-foot-grid{grid-template-columns:1fr 1fr}
}