/* Propsoon: shared tokens, base, header and footer. Page styles live in their own files. */
:root{
  --bg:#EDF1F6; --surface:#FFFFFF; --tint:#F4F7FB; --tint-2:#E9EEF5;
  --ink:#132238; --ink-2:#44546A; --ink-3:#5F6E84; --rule:#D7DEE8; --rule-2:#B6C1D0;
  --accent:#1E5BD6; --accent-hover:#1747A8; --accent-soft:#E2EBFC; --on-ink:#FFFFFF;
  --money:#1BAF7A; --money-ink:#0E7A54; --money-soft:#E3F5EE;
  --lane-allowed:#13866F; --lane-approval:#5B47CF; --lane-banned:#B9460F;
  --ok:#7C9DCB; --warn:#C98A12; --warn-soft:#FBF1DC; --bad:#C23B2E; --bad-soft:#FBE7E4;
  --foot-bg:#0C1524; --foot-ink:#B5C1D3; --foot-head:#E7EDF6; --foot-rule:#24344E; --foot-small:#93A2B8;
  --f-display:'Barlow Condensed','Arial Narrow',Arial,sans-serif;
  --f-ui:'Barlow Semi Condensed','Arial Narrow',Arial,sans-serif;
  --f-body:'Barlow','Segoe UI',Arial,sans-serif;
  --w:1260px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0C1524; --surface:#121E31; --tint:#16243A; --tint-2:#1C2C45;
    --ink:#E7EDF6; --ink-2:#B5C1D3; --ink-3:#93A2B8; --rule:#24344E; --rule-2:#3A4D6B;
    --accent:#7FA6FF; --accent-hover:#A9C3FF; --accent-soft:#1E3256; --on-ink:#0C1524;
    --money:#2FCB90; --money-ink:#5BDDA8; --money-soft:#123A2E;
    --lane-allowed:#3CC7A9; --lane-approval:#A193F5; --lane-banned:#F08C52;
    --ok:#6E93CC; --warn:#E0A63A; --warn-soft:#3A2E14; --bad:#F06A5C; --bad-soft:#3E1D1A;
    --foot-bg:#080F1B; --foot-rule:#1F2E47;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0C1524; --surface:#121E31; --tint:#16243A; --tint-2:#1C2C45;
  --ink:#E7EDF6; --ink-2:#B5C1D3; --ink-3:#93A2B8; --rule:#24344E; --rule-2:#3A4D6B;
  --accent:#7FA6FF; --accent-hover:#A9C3FF; --accent-soft:#1E3256; --on-ink:#0C1524;
  --money:#2FCB90; --money-ink:#5BDDA8; --money-soft:#123A2E;
  --lane-allowed:#3CC7A9; --lane-approval:#A193F5; --lane-banned:#F08C52;
  --ok:#6E93CC; --warn:#E0A63A; --warn-soft:#3A2E14; --bad:#F06A5C; --bad-soft:#3E1D1A;
  --foot-bg:#080F1B; --foot-rule:#1F2E47;
  color-scheme:dark;
}

*{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{ margin:0; min-height:100vh; display:flex; flex-direction:column; background:var(--bg); color:var(--ink); font:400 15px/1.5 var(--f-body); }
body > main{ flex:1 0 auto; }
a{ color:var(--accent); text-underline-offset:2px; }
a:hover{ color:var(--accent-hover); }
button,input,select,textarea{ font-family:inherit; }
img{ max-width:100%; height:auto; }
:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }
.wrap{ max-width:var(--w); margin:0 auto; padding-left:24px; padding-right:24px; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip{ position:absolute; left:12px; top:-60px; z-index:50; padding:10px 14px; border-radius:8px; background:var(--ink); color:var(--surface); font:600 15px/1 var(--f-ui); text-decoration:none; }
.skip:focus{ top:12px; color:var(--surface); }
.num{ font-variant-numeric:tabular-nums lining-nums; }

/* header */
.site-head{ background:var(--surface); border-bottom:1px solid var(--rule); }
.site-head .in{ max-width:var(--w); margin:0 auto; padding:12px 24px; min-height:68px; display:flex; flex-wrap:wrap; align-items:center; gap:10px 28px; }
.brand{ flex:none; display:flex; align-items:center; text-decoration:none; color:var(--ink); }
.brand:hover{ color:var(--ink); }
.brand svg{ display:block; margin-top:4px; height:30px; width:auto; }
.nav{ flex:1 1 auto; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:2px; }
.nav a{ font:500 15.5px/1 var(--f-ui); color:var(--ink-2); text-decoration:none; padding:14px 12px; border-radius:8px; }
.nav a:hover{ color:var(--ink); background:var(--tint); }
.nav a[aria-current="page"]{ font-weight:600; color:var(--ink); background:var(--tint-2); }

/* page head shared by inner pages */
.page-head{ max-width:var(--w); margin:0 auto; padding:30px 24px 10px; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:12px 40px; }
.page-head .intro{ max-width:640px; }
.page-head h1{ margin:0 0 10px; font:600 52px/1 var(--f-display); color:var(--ink); text-wrap:balance; }
.page-head .lede{ margin:0; font:400 17px/1.5 var(--f-body); color:var(--ink-2); text-wrap:pretty; }
.fresh{ margin:0; display:inline-flex; flex-wrap:wrap; align-items:center; gap:7px; font:500 14px/1.4 var(--f-ui); color:var(--ink-3); }
.fresh::before{ content:""; display:inline-block; flex:none; width:8px; height:8px; border-radius:50%; background:var(--money); }
.fresh time{ color:var(--ink-2); font-weight:600; }

/* footer */
.site-foot{ background:var(--foot-bg); color:var(--foot-ink); margin-top:56px; }
.site-foot .cols{ max-width:var(--w); margin:0 auto; padding:48px 24px 32px; display:grid; grid-template-columns:repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap:30px 40px; }
.site-foot .about{ display:flex; flex-direction:column; gap:14px; }
.site-foot .about .brand{ color:var(--foot-head); }
.site-foot .about .brand svg{ height:28px; margin-top:0; }
.site-foot .about p{ margin:0; font:400 15px/1.5 var(--f-body); max-width:38ch; }
.site-foot nav{ display:flex; flex-direction:column; gap:2px; }
.site-foot h2{ margin:0 0 8px; font:600 14px/1.2 var(--f-ui); color:var(--foot-head); }
.site-foot nav a{ color:var(--foot-ink); text-decoration:none; font:400 15px/1 var(--f-ui); padding:8px 0; }
.site-foot nav a:hover{ color:var(--foot-head); text-decoration:underline; }
.site-foot .fresh-note{ display:flex; flex-direction:column; gap:8px; }
.site-foot .fresh-note p{ margin:0; font:400 15px/1.5 var(--f-ui); }
.site-foot .legal{ border-top:1px solid var(--foot-rule); }
.site-foot .legal .in{ max-width:var(--w); margin:0 auto; padding:16px 24px 30px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px; font:400 13.5px/1.5 var(--f-ui); color:var(--foot-small); }
.site-foot :focus-visible{ outline-color:var(--foot-head); }

.hd-r{ display:none; }
.hd-finder{ display:inline-flex; align-items:center; min-height:44px; padding:0 14px; border-radius:10px; background:var(--accent); color:var(--on-ink); text-decoration:none; font:600 15px/1 var(--f-ui); }
.hd-finder:hover{ color:var(--on-ink); background:var(--accent-hover); }
.hd-menu{ width:44px; height:44px; border-radius:10px; border:1px solid var(--rule); background:var(--surface); color:var(--ink); display:grid; place-items:center; padding:0; cursor:pointer; }
.hd-menu:hover{ border-color:var(--rule-2); }
.foot-m{ display:none; }

@media (max-width: 760px){
  .site-head{ position:relative; }
  .site-head .in{ padding:0 12px 0 16px; min-height:60px; gap:10px; }
  .brand svg{ height:26px; margin-top:3px; }
  .wrap{ padding-left:16px; padding-right:16px; }
  html.js .site-head .in{ height:60px; flex-wrap:nowrap; justify-content:space-between; }
  html.js .hd-r{ display:flex; align-items:center; gap:6px; }
  html.js .nav{ display:none; }
  html.js .site-head.open .nav{ display:flex; flex-direction:column; flex-wrap:nowrap; position:absolute; z-index:60; top:60px; left:0; right:0; margin:0; padding:6px 8px 10px; gap:0; background:var(--surface); border-bottom:1px solid var(--rule); box-shadow:0 14px 24px -18px rgba(10,20,40,.5); }
  html.js .site-head.open .nav a{ display:flex; align-items:center; min-height:48px; padding:0 12px; font:500 15.5px/1 var(--f-ui); }
  html:not(.js) .nav{ flex:1 1 100%; justify-content:flex-start; margin:0 -8px; }
  html:not(.js) .nav a{ padding:12px 8px; font-size:15px; }
  .page-head{ padding:22px 16px 8px; }
  .page-head h1{ font-size:40px; }
  .page-head .lede{ font-size:16px; }
  .site-foot{ margin-top:40px; }
  .site-foot .cols, .site-foot .legal{ display:none; }
  .foot-m{ display:block; padding:28px 16px 26px; }
  .foot-m .brand{ color:var(--foot-head); }
  .foot-m .brand svg{ height:26px; margin-top:0; }
  .site-foot .fm-links{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:16px; gap:0 16px; margin:12px 0 0; }
  .site-foot .fm-links a{ color:var(--foot-ink); text-decoration:none; font:400 15.5px/1 var(--f-ui); padding:14px 0; }
  .site-foot .fm-links a:hover{ color:var(--foot-head); text-decoration:underline; }
  .foot-m p{ margin:10px 0 0; padding-top:16px; border-top:1px solid var(--foot-rule); font:400 13.5px/1.5 var(--f-ui); color:var(--foot-small); }
}
@media print{
  .site-head .nav, .site-foot nav, .skip{ display:none; }
  .site-foot{ background:none; color:#000; }
}