/* Fonts: the app's own faces (demo/fonts/fonts.css, served at /app/fonts/), font-display: optional. Generated by research/build_site.py. */
@font-face { font-family: 'Overpass'; font-style: normal; font-weight: 600; font-display: optional; src: url(/app/fonts/Overpass-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Overpass'; font-style: normal; font-weight: 600; font-display: optional; src: url(/app/fonts/Overpass-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Overpass'; font-style: normal; font-weight: 600; font-display: optional; src: url(/app/fonts/Overpass-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Overpass'; font-style: normal; font-weight: 600; font-display: optional; src: url(/app/fonts/Overpass-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Overpass'; font-style: normal; font-weight: 600; font-display: optional; src: url(/app/fonts/Overpass-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Overpass'; font-style: normal; font-weight: 700; font-display: optional; src: url(/app/fonts/Overpass-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Overpass'; font-style: normal; font-weight: 700; font-display: optional; src: url(/app/fonts/Overpass-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Overpass'; font-style: normal; font-weight: 700; font-display: optional; src: url(/app/fonts/Overpass-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Overpass'; font-style: normal; font-weight: 700; font-display: optional; src: url(/app/fonts/Overpass-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Overpass'; font-style: normal; font-weight: 700; font-display: optional; src: url(/app/fonts/Overpass-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Overpass'; font-style: normal; font-weight: 800; font-display: optional; src: url(/app/fonts/Overpass-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Overpass'; font-style: normal; font-weight: 800; font-display: optional; src: url(/app/fonts/Overpass-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Overpass'; font-style: normal; font-weight: 800; font-display: optional; src: url(/app/fonts/Overpass-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Overpass'; font-style: normal; font-weight: 800; font-display: optional; src: url(/app/fonts/Overpass-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Overpass'; font-style: normal; font-weight: 800; font-display: optional; src: url(/app/fonts/Overpass-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Overpass'; font-style: normal; font-weight: 900; font-display: optional; src: url(/app/fonts/Overpass-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Overpass'; font-style: normal; font-weight: 900; font-display: optional; src: url(/app/fonts/Overpass-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Overpass'; font-style: normal; font-weight: 900; font-display: optional; src: url(/app/fonts/Overpass-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Overpass'; font-style: normal; font-weight: 900; font-display: optional; src: url(/app/fonts/Overpass-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Overpass'; font-style: normal; font-weight: 900; font-display: optional; src: url(/app/fonts/Overpass-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 400; font-display: optional; src: url(/app/fonts/PublicSans-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 400; font-display: optional; src: url(/app/fonts/PublicSans-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 400; font-display: optional; src: url(/app/fonts/PublicSans-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 500; font-display: optional; src: url(/app/fonts/PublicSans-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 500; font-display: optional; src: url(/app/fonts/PublicSans-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 500; font-display: optional; src: url(/app/fonts/PublicSans-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 700; font-display: optional; src: url(/app/fonts/PublicSans-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 700; font-display: optional; src: url(/app/fonts/PublicSans-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 700; font-display: optional; src: url(/app/fonts/PublicSans-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'RS Mark'; font-style: normal; font-weight: 400; font-display: optional; src: url(/app/fonts/NotoSansSC-a.woff2) format('woff2'); unicode-range: U+8DEF, U+611F; }
@font-face { font-family: 'RS Mark'; font-style: normal; font-weight: 700; font-display: optional; src: url(/app/fonts/NotoSansSC-a.woff2) format('woff2'); unicode-range: U+8DEF, U+611F; }
@font-face { font-family: 'RS Mark'; font-style: normal; font-weight: 900; font-display: optional; src: url(/app/fonts/NotoSansSC-a.woff2) format('woff2'); unicode-range: U+8DEF, U+611F; }
/* 路感 Roadfeel · public site styles. Color tokens and type copied from demo/styles.css (the app); the @font-face
   rules above this comment are the app's own (PX-01). Mobile first (390 px, checked at 375), one readable column. site.js
   only adds: answer checking on sample questions, the phone sticky bar and the section nav's scroll position; every page
   reads and links the same without it. */
/* The app's middle dot and Chinese dashes (demo/styles.css "RS Dot", "RS Zh Punct"): system faces only, nothing to
   download. "——" and "……" in Chinese text come from a CJK face, not as Latin dashes and dots. */
@font-face{font-family:"RS Dot";src:local("Helvetica Neue"),local("HelveticaNeue"),local("Helvetica"),local("Arial"),local("Roboto");unicode-range:U+00B7}
@font-face{font-family:"RS Zh Punct";font-weight:100 900;src:local("PingFang SC Regular"),local("PingFangSC-Regular"),local("Noto Sans CJK SC Regular"),local("NotoSansCJKsc-Regular"),local("Microsoft YaHei");unicode-range:U+2014,U+2026}
:root{--bg:#e9eeeb;--surface:#ffffff;--surface-2:#dde4e0;--fg:#14191c;--muted:#56626a;--line:#ccd5d0;
--sign:#006b45;--sign-fg:#ffffff;--sign-edge:#e8f0ec;--sign-text:#006b45;--lane:#f2be1a;--lane-ink:#3a2c00;
--focus:#14191c;--warn:#c98a00;--bad:#c8102e;--ok:#11734d;--asphalt:#30363c;--on-ok:#ffffff;--on-bad:#ffffff;--chip:#e7ece9;
--sel-bg:var(--fg);--sel-fg:var(--bg);--sel-line:var(--fg);
--r-c:12px;--r-m:14px;--r-l:22px;
--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;
--f-display:"RS Dot","Overpass","PingFang SC","Noto Sans SC",system-ui,sans-serif;
--f-body:"Public Sans","PingFang SC","Noto Sans SC",system-ui,sans-serif;
--f-mark:"RS Mark","Noto Sans SC","PingFang SC",system-ui,sans-serif;
--fw-heavy:800;
color-scheme:light}
/* PA-02 (site part, as in the app): in dark mode "selected" is a raised slate, not a near-white block */
@media (prefers-color-scheme:dark){:root{--bg:#101416;--surface:#182024;--surface-2:#212a2f;--fg:#e7eeea;--muted:#94a3a0;
--line:#2a3439;--sign:#0b8457;--sign-fg:#ffffff;--sign-edge:#cfe3d9;--sign-text:#4fd19a;--lane:#f5c83a;--lane-ink:#2a2000;
--focus:#f5c83a;--warn:#e3a92a;--bad:#f0607a;--ok:#35b27c;--asphalt:#262c31;--on-ok:#0d1114;--on-bad:#0d1114;--chip:#1f282d;
--sel-bg:#3a4852;--sel-fg:var(--fg);--sel-line:color-mix(in srgb,var(--fg) 25%,transparent);color-scheme:dark}}
/* Chinese pages: the dashes from a CJK face, and display weight 700 so Overpass digits sit with PingFang Semibold (600,
   its heaviest) instead of a weight above them (the app's PA-06) */
html[lang="zh-Hans"]{--f-body:"RS Zh Punct","Public Sans","PingFang SC","Noto Sans SC",system-ui,sans-serif;
--f-display:"RS Dot","RS Zh Punct","Overpass","PingFang SC","Noto Sans SC",system-ui,sans-serif;--fw-heavy:700}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.6 var(--f-body);-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
html[lang="zh-Hans"] body{line-height:1.75}
html[lang="zh-Hans"] h1,html[lang="zh-Hans"] h2,html[lang="zh-Hans"] .ap-t,html[lang="zh-Hans"] .ftile b{word-break:keep-all}
h1,h2,h3,h4,.kicker,.btn,.hbtn,.fact b,.kf b,.ap-k,.ap-t,.card b,.stop b,.ftile b,.more-go,.sb-go,.sb-t b,.idea-k,.cta-k,.opt .ol,.kp-list b{font-family:var(--f-display)}
html[lang="zh-Hans"] :is(h1,h2,h3,h4,.btn,.hbtn,.fact b,.kf b,.ap-t,.card b,.stop b,.ftile b,.more-go,.sb-go,.kp-list b){font-weight:var(--fw-heavy)}
a{color:var(--sign-text);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}
h1,h2,h3{line-height:1.25;margin:0;text-wrap:balance}
h2{font-size:22px;font-weight:800;letter-spacing:-.01em;margin:34px 0 12px}
h3{font-size:17px;font-weight:750;margin:18px 0 6px}
p{margin:0 0 10px}
.wrap{max-width:760px;margin:0 auto;padding:0 max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left))}
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:8px;top:8px;background:var(--surface);padding:8px 12px;z-index:10;border-radius:8px}
.top{background:var(--surface);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:60px}
.top-act{display:flex;align-items:center;gap:8px;flex:none}
.brand{display:flex;align-items:center;gap:10px;color:var(--fg);text-decoration:none;min-width:0;min-height:44px}
.brand svg{border-radius:9px;display:block;flex:none;box-shadow:0 1px 2px rgba(0,0,0,.15)}
.bn{display:grid;line-height:1.1;min-width:0}
/* PX-02: the app's one-line wordmark (demo/styles.css .brand-name): 路感 in the app's logo face, Roadfeel in Overpass,
   on one baseline. Under 360 px only 路感 stays, as in the app's narrow top bar. */
.bn>span{display:flex;align-items:baseline;gap:7px}
.bn b{font-family:var(--f-mark);font-weight:var(--fw-heavy);font-size:20px;letter-spacing:.02em}
.bn .be{font-family:var(--f-display);font-weight:var(--fw-heavy);font-size:13px;color:var(--muted);letter-spacing:.01em}
.bn small{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lang{flex:none;border:1px solid var(--line);border-radius:999px;padding:0 13px;font-size:14px;font-weight:700;color:var(--fg);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.gate-tag{display:inline-block;margin-inline-start:.5em;padding:0 .5em;border:1px solid var(--line);border-radius:999px;font-size:12px;font-weight:700;line-height:1.6;color:var(--muted);background:var(--surface);vertical-align:middle;white-space:nowrap}
.gate-tag .gt-lock{vertical-align:-1px;margin-inline-end:.25em}
@media (max-width:520px){.top .gate-tag{padding:0 .35em}.top .gate-tag .gt-lock{margin:0}.top .gate-tag .gt-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
.hbtn{flex:none;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 15px;border-radius:999px;background:var(--surface);color:var(--sign-text);border:1.5px solid var(--sign);font-size:14.5px;font-weight:850;text-decoration:none;white-space:nowrap}
.hbtn:hover{text-decoration:underline}
.snav{border-top:1px solid var(--line)}
.snav ul{position:relative;display:flex;gap:6px;list-style:none;margin:0;padding:8px 0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.snav ul::-webkit-scrollbar{display:none}
.snav a{display:inline-flex;align-items:center;min-height:36px;white-space:nowrap;padding:0 12px;border-radius:999px;font-size:14px;font-weight:650;color:var(--fg);text-decoration:none;background:var(--surface-2);position:relative}
.snav a::after{content:"";position:absolute;left:0;right:0;top:-4px;bottom:-4px}
.snav a[aria-current=page]{background:var(--sel-bg);color:var(--sel-fg);box-shadow:inset 0 0 0 1px var(--sel-line)}
/* PW-01: site.js scrolls the current section into view and fades the edge that has more past it */
.snav ul.more-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
.snav ul.more-l{-webkit-mask-image:linear-gradient(270deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(270deg,#000 calc(100% - 28px),transparent)}
.snav ul.more-l.more-r{-webkit-mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;margin:2px 0 0;padding:0;font-size:13px;color:var(--muted);line-height:44px}
.crumbs li+li::before{content:"›";margin:0 6px;color:var(--muted)}
.crumbs a{color:var(--muted);display:inline-block;padding:6px 0;margin:-6px 0}
.hero{background:var(--sign);color:var(--sign-fg);border-radius:var(--r-m);padding:16px 18px 14px;box-shadow:inset 0 0 0 2px var(--sign),inset 0 0 0 4px var(--sign-edge);margin:4px 0 8px}
.kicker{font-size:13px;font-weight:800;letter-spacing:.04em;margin:0 0 6px;color:#e3f1ea}
html[lang="zh-Hans"] .kicker{letter-spacing:.01em}
.hero h1{font-size:26px;font-weight:900;letter-spacing:-.015em;margin:0 0 8px;color:#fff}
.hero .lede{font-size:16px;line-height:1.55;margin:0 0 8px;color:#eef7f2}
html[lang="zh-Hans"] .hero .lede{line-height:1.7}
.hero .meta{font-size:13px;margin:0;color:#cde6d9}
.scope-note{font-size:13.5px;line-height:1.55;color:var(--muted);border-left:3px solid var(--line);padding:2px 0 2px 10px;margin:12px 0 0}
@media (prefers-color-scheme:dark){.hero{background:#006b45;box-shadow:inset 0 0 0 2px #006b45,inset 0 0 0 4px var(--sign-edge)}.upd a.src{color:var(--fg)}}
.ans-first{margin:0 0 8px}
.ans-first strong{font-weight:750;font-size:16.5px}
.ans-s strong{font-size:16px}
.ans-more{color:var(--fg)}
.qa-sec .srcs,.faq-item .srcs{margin:0 0 6px}
.beta{display:inline-block;background:var(--lane);color:var(--lane-ink);border-radius:999px;padding:0 8px;font-size:12px;font-weight:800;line-height:20px;vertical-align:1px}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.fact{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);padding:12px 14px;display:grid;gap:4px;align-content:start}
.fact b{font-size:22px;font-weight:900;color:var(--sign-text);line-height:1.15}
.fact span{font-size:14px}
.cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.card{display:grid;gap:2px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);padding:12px 14px;text-decoration:none;color:var(--fg);min-height:64px}
.card b{color:var(--sign-text);font-size:16px}
.card span{font-size:13.5px;color:var(--muted)}
.card:hover{border-color:var(--sign)}
.state-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.state-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:16px}
.state-card h3{margin:-6px 0 2px;font-size:20px}
.state-card h3 a{color:var(--fg);text-decoration:none;display:inline-flex;align-items:center;gap:6px;min-height:44px}
.plan h3{margin:0 0 2px}
.price{margin:0 0 8px;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px}
.price b{font-size:28px;font-weight:800;line-height:1.2;font-variant-numeric:tabular-nums}
.price span{font-size:14px;color:var(--muted);font-weight:650}
.plan .note{margin:0}
.ticks{margin:0 0 10px;padding-left:20px}
.ticks li{margin:5px 0}
.links{font-size:14.5px;font-weight:650;margin:0}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.steps>li{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--sign);border-radius:var(--r-c);padding:12px 14px}
.steps h3{margin:0 0 6px;font-size:16.5px}
.steps p{margin:0 0 6px}
.steps-plain{padding-left:22px}
.steps-plain li{margin:6px 0}
.rules{list-style:none;margin:0;padding:0;display:grid;gap:10px;counter-reset:r}
.rule{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-c);padding:12px 14px 10px 46px;position:relative;counter-increment:r;scroll-margin-top:12px}
.rule::before{content:counter(r);position:absolute;left:12px;top:13px;width:24px;height:24px;border-radius:6px;background:var(--surface-2);color:var(--muted);font-size:12px;font-weight:800;display:grid;place-items:center}
.rule:target,.term:target{border-color:var(--sign);box-shadow:0 0 0 3px color-mix(in srgb,var(--sign) 25%,transparent)}
.rule p{margin:0 0 8px}
.rule-meta{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;margin:0}
.tag{font-size:11.5px;font-weight:700;border-radius:6px;padding:2px 7px;background:var(--surface-2);color:var(--muted);white-space:nowrap}
.tag-test{background:color-mix(in srgb,var(--sign) 13%,var(--surface));color:var(--sign-text)}
.tag-warn{background:color-mix(in srgb,var(--lane) 32%,var(--surface));color:var(--fg)}
.upd{background:color-mix(in srgb,var(--lane) 16%,var(--surface));border-radius:8px;padding:8px 10px;font-size:14px}
.xs{border-left:3px solid var(--line);padding-left:10px;font-size:14px}
.srcs{font-size:12px;color:var(--muted);line-height:2.2}
a.src{display:inline-block;max-width:100%;font-size:11.5px;font-weight:500;line-height:1.4;padding:4px 7px;margin:1px 0;border-radius:6px;background:var(--chip);color:var(--muted);text-decoration:none;vertical-align:1px}
a.src:hover{color:var(--fg);text-decoration:underline}
a.src::before{content:"↗\00a0"}
.idea{background:var(--asphalt);color:#eef3f0;border-radius:var(--r-m);padding:14px 16px 24px;position:relative;overflow:hidden}
.idea::after{content:"";position:absolute;left:0;right:0;bottom:10px;height:3px;background:repeating-linear-gradient(90deg,var(--lane) 0 22px,transparent 22px 40px);opacity:.85}
.idea-k{font-size:12px;font-weight:800;letter-spacing:.06em;color:#b9c7c1;margin:0 0 6px}
.idea ul{margin:0;padding-left:18px}
.idea li{margin:4px 0}
.idea b{color:#fff}
.q{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:16px;margin:0 0 12px}
.q-meta{font-size:12.5px;color:var(--muted);margin:0 0 6px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.q h3{font-size:17px;margin:0 0 10px;line-height:1.45}
.opts{margin:0 0 12px;padding-left:26px}
.opts li{margin:7px 0;padding-left:2px}
.ans summary{cursor:pointer;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:var(--r-c);background:var(--surface);color:var(--sign-text);border:1.5px solid var(--line);font-weight:800;list-style:none}
.ans summary::-webkit-details-marker{display:none}
.ans[open] summary{background:var(--surface-2);border-color:var(--surface-2);color:var(--fg)}
.ans p{margin:10px 0 0}
.road{list-style:none;margin:0;padding:0 0 0 34px;position:relative;display:grid;gap:8px}
.road::before{content:"";position:absolute;left:8px;top:4px;bottom:4px;width:14px;border-radius:7px;background:var(--asphalt)}
.road::after{content:"";position:absolute;left:14px;top:12px;bottom:12px;width:2px;background:repeating-linear-gradient(180deg,var(--lane) 0 9px,transparent 9px 17px)}
.stop{display:grid;gap:2px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);padding:10px 14px;text-decoration:none;color:var(--fg);position:relative}
.stop::before{content:"";position:absolute;left:-31px;top:50%;width:16px;height:16px;margin-top:-8px;border-radius:50%;background:var(--surface);border:3px solid var(--line);z-index:1}
.stop b{color:var(--sign-text)}
.stop span{font-size:13px;color:var(--muted)}
.table-wrap{overflow-x:auto;margin:10px 0;border:1px solid var(--line);border-radius:var(--r-c);background:var(--surface)}
.tbl{border-collapse:collapse;width:100%;font-size:14px}
.tbl th,.tbl td{padding:8px 10px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.tbl thead th{font-size:12.5px;color:var(--muted);font-weight:700;background:var(--surface-2)}
.tbl tbody th{font-weight:650;min-width:110px}
.tbl tr:last-child th,.tbl tr:last-child td{border-bottom:0}
.note{font-size:14px;color:var(--muted)}
.meta-line{font-size:14px;color:var(--muted);margin:0}
.callout{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-c);padding:12px 14px;font-size:14.5px}
.beta-note{border-left:4px solid var(--lane)}
.flag{display:inline-block;font-size:11.5px;font-weight:800;border-radius:6px;padding:0 6px;margin-right:2px;background:color-mix(in srgb,var(--warn) 24%,var(--surface));color:var(--fg)}
.flag-conflict{background:color-mix(in srgb,var(--bad) 16%,var(--surface))}
.changes{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.changes li{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-c);padding:10px 14px}
.changes p{margin:0 0 4px}
.when{font-size:12.5px;color:var(--muted);white-space:nowrap}
details.more summary{cursor:pointer;margin:6px 0;font-weight:700;color:var(--sign-text);min-height:44px;display:flex;align-items:center}
.maneuvers{padding-left:22px}
.maneuvers h3{font-size:16px;margin:12px 0 4px}
.crit{padding-left:20px}
.crit li{margin:8px 0}
.crit p{margin:0 0 4px}
.ex{font-size:14px;color:var(--muted)}
.cmd-tbl{table-layout:fixed}
.cmd-tbl thead th:first-child{width:42%}
.cmd-tbl tbody th{font-weight:700;overflow-wrap:break-word}
.cmd-tbl td .ex,.cmd-tbl td .srcs{display:block}
.cmd-tbl td .srcs{line-height:1.9;margin-top:2px}
.cmd-n{display:inline-block;min-width:20px;height:20px;line-height:20px;border-radius:6px;background:var(--surface-2);color:var(--muted);font-size:12px;font-weight:800;text-align:center;margin-right:5px;vertical-align:1px}
.intu{background:color-mix(in srgb,var(--lane) 13%,var(--surface));border:1px solid color-mix(in srgb,var(--lane) 45%,var(--line));border-radius:var(--r-c);padding:10px 14px;margin:12px 0;font-size:14.5px}
.intu p{margin:0}
.intu .intu-k{font-size:12px;font-weight:800;letter-spacing:.04em;color:var(--muted);margin:0 0 4px}
.diffs{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.diff{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-c);padding:12px 14px}
.diff h3{margin:0 0 6px;font-size:16px}
.diff p{margin:0 0 6px}
details.topic{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-c);margin:8px 0}
details.topic>summary{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:48px;padding:10px 14px;cursor:pointer;list-style:none}
details.topic>summary::-webkit-details-marker{display:none}
details.topic>summary h3{margin:0;font-size:16px}
details.topic>summary::after{content:"+";font-weight:800;color:var(--muted)}
details.topic[open]>summary::after{content:"−"}
details.topic>summary .count{margin-left:auto;font-size:12.5px;font-weight:700;color:var(--muted);background:var(--surface-2);border-radius:999px;padding:0 8px}
details.topic .diffs{padding:0 10px 10px}
details.topic .diff{background:var(--bg)}
.gloss{margin:0;display:grid;gap:10px}
.term{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-c);padding:12px 14px}
.term dt{font-weight:800;font-size:16.5px}
.t-alt{font-weight:600;font-size:14px;color:var(--muted);margin-left:4px}
.term dd{margin:6px 0 0}
.term dd p{margin:0 0 4px}
.regions{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.region{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-c);padding:12px 14px;font-size:14.5px}
.region h4{margin:0 0 6px;font-size:16px}
.region p{margin:0 0 6px}
.offices{display:grid;gap:12px}
.office{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:14px 16px}
.office h3{margin:0 0 6px;font-size:18px}
.badge-line,.badge{display:inline-block;font-size:12px;font-weight:700;background:var(--surface-2);border-radius:6px;padding:2px 8px;margin:0 0 8px}
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;margin:8px 0 0}
.kv div{background:var(--bg);border-radius:8px;padding:8px 10px}
.kv dt{font-size:12px;color:var(--muted)}
.kv dd{margin:0;font-weight:800}
.pn{display:flex;justify-content:space-between;gap:12px;margin:24px 0 0;flex-wrap:wrap}
.pn a{font-weight:700;min-height:44px;display:inline-flex;align-items:center}
.src-list{padding-left:18px}
.src-list li{margin:4px 0}
.src-list a.src{display:inline;background:none;padding:0;font-size:14px;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--muted) 50%,transparent)}
.cta{background:var(--asphalt);color:#f1f4f2;border-radius:var(--r-l);padding:18px 18px 30px;margin:36px 0 8px;position:relative;overflow:hidden}
/* b40 (WCAG 1.4.11): controls on the green hero and the asphalt card get the yellow focus ring (3.6:1, 7:1); the
   near-black one was 2.7:1 and 1.45:1 there */
.hero,.cta:not(.cta-board){--focus:var(--lane)}
.cta::after{content:"";position:absolute;left:0;right:0;bottom:12px;height:4px;background:repeating-linear-gradient(90deg,var(--lane) 0 26px,transparent 26px 46px);opacity:.9}
.cta h2{color:#fff;margin:0 0 8px;font-size:21px}
.cta p{color:#cad5d0}
.cta-k{font-size:12px;font-weight:800;letter-spacing:.06em;color:#a5b6af;margin:0 0 6px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;border-radius:var(--r-c);background:var(--lane);color:var(--lane-ink);font-weight:900;text-decoration:none;box-shadow:0 3px 0 #8a6a00;margin:4px 0 6px}
/* PW-02: the label and its arrow are one run of text, so the arrow stays with the last word; a label that must wrap
   splits evenly */
.btn .bl{text-wrap:balance;text-align:center}
.foot{margin-top:40px;border-top:1px solid var(--line);background:var(--surface);padding:22px 0 30px;font-size:13.5px;color:var(--muted)}
.foot p{margin:0 0 10px}
.foot .disc{color:var(--fg)}
.foot ul{list-style:none;display:flex;flex-wrap:wrap;gap:0 16px;padding:0;margin:0 0 12px}
.foot li a{display:inline-flex;align-items:center;min-height:44px}
.foot a{color:var(--fg)}
/* --- the app, on every page ------------------------------------------------------------------ */
.app-card{position:relative;display:grid;grid-template-columns:88px minmax(0,1fr);gap:14px;align-items:start;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:12px 14px 12px 12px;margin:10px 0 4px}
.app-card:hover{border-color:var(--sign)}
.ap-shot{border-radius:15px;padding:3px;background:#14191c;box-shadow:0 4px 12px rgba(0,0,0,.16)}
.ap-shot img{display:block;width:100%;height:auto;border-radius:12px;background:#e9eeeb}
.ap-body{min-width:0;display:flex;flex-direction:column;min-height:100%}
.ap-k{font-size:12px;font-weight:800;color:var(--sign-text);margin:0 0 2px;letter-spacing:.01em}
.ap-t{font-size:16.5px;font-weight:850;line-height:1.3;margin:0 0 4px}
.ap-s{font-size:13.5px;line-height:1.45;color:var(--muted);margin:0 0 8px}
.ap-note{position:relative;font-size:12px;line-height:1.45;margin:8px 0 0;padding:4px 8px;border-radius:6px;background:color-mix(in srgb,var(--lane) 22%,var(--surface));color:var(--fg)}
.btn.ap-btn{margin:auto 0 0;align-self:flex-start;min-height:44px;padding:0 16px;font-size:15px}
.ap-btn::after{content:"";position:absolute;inset:0;border-radius:var(--r-l)}
.btn:hover{filter:brightness(1.04)}
.btn-line{background:var(--surface);color:var(--sign-text);border:1.5px solid var(--sign);box-shadow:none}
.btn-sm{min-height:44px;padding:0 14px;font-size:14px;margin:12px 0 0}
.kfs{margin:12px 0 4px}
.kfs ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.kf{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);padding:10px 12px 8px;display:flex;flex-direction:column;gap:2px;min-width:0}
.kf b{font-size:25px;font-weight:900;line-height:1.15;color:var(--sign-text);letter-spacing:-.01em}
.kf>span{font-size:13px;line-height:1.4}
.kf small{margin-top:auto;padding-top:4px;line-height:1.3}
.more-qs{margin:6px 0 0}
.more-a{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2px 12px;min-height:52px;padding:10px 16px;border-radius:var(--r-m);background:var(--asphalt);color:#f1f4f2;text-decoration:none}
.more-n{font-size:14px;font-weight:700;color:#cfd8d4}
.more-go{font-weight:900;color:var(--lane)}
.more-a:hover .more-go{text-decoration:underline}
/* b84: the in-page entry into the app (mid_cta_html), after the part a reader just finished. The whole card is the link. */
.mid-cta{margin:var(--sp-5) 0}
.mc{display:grid;gap:var(--sp-1);padding:var(--sp-4);border-radius:var(--r-m);background:var(--surface);border:1px solid var(--line);border-inline-start:4px solid var(--sign);color:var(--fg);text-decoration:none}
.mc:hover{border-color:var(--sign)}
.mc-k{font-size:12.5px;font-weight:800;letter-spacing:.01em;color:var(--sign-text)}
.mc-t{font-family:var(--f-display);font-size:18px;font-weight:850;line-height:1.3}
.mc-s{font-size:14.5px;line-height:1.45;color:var(--muted)}
.mc-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-2) var(--sp-3);margin-top:var(--sp-2)}
.mc-f{font-size:13px;font-weight:700;color:var(--muted)}
.mc-go{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--sp-4);border-radius:var(--r-c);background:var(--lane);color:var(--lane-ink);font-weight:900;box-shadow:0 3px 0 #8a6a00;margin-inline-start:auto}
.mc:hover .mc-go{filter:brightness(1.04)}
/* sample questions, once site.js has turned the options into buttons */
.q-live .opts{list-style:none;padding:0;margin:0 0 10px;display:grid;gap:8px}
.q-live .opts li{margin:0;padding:0}
.opt{display:flex;align-items:flex-start;gap:10px;width:100%;min-height:48px;padding:10px 12px;margin:0;text-align:left;font:inherit;font-size:15.5px;line-height:1.45;color:var(--fg);background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r-c);cursor:pointer;-webkit-tap-highlight-color:transparent}
.opt .ol{flex:none;display:grid;place-items:center;width:26px;height:26px;margin-top:-1px;border-radius:7px;background:var(--surface-2);color:var(--muted);font-size:13px;font-weight:800}
.opt .ot{min-width:0}
.opt:hover{border-color:var(--sign)}
.q-done .opt{cursor:default}
.q-done .opt:hover{border-color:var(--line)}
.opt.is-right,.q-done .opt.is-right:hover{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,var(--surface))}
.opt.is-right .ol{background:var(--ok);color:var(--on-ok)}
.opt.is-wrong,.q-done .opt.is-wrong:hover{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 9%,var(--surface))}
.opt.is-wrong .ol{background:var(--bad);color:var(--on-bad)}
.q-fb{margin:0 0 10px;padding:8px 12px;border-radius:var(--r-c);font-weight:800;border-left:4px solid var(--ok);background:color-mix(in srgb,var(--ok) 10%,var(--surface))}
.q-fb.no{border-left-color:var(--bad);background:color-mix(in srgb,var(--bad) 8%,var(--surface))}
/* folded secondary lists */
details.fold{margin:10px 0 12px;border:1px solid var(--line);border-radius:var(--r-c);background:var(--surface)}
details.fold>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:10px 14px;cursor:pointer;list-style:none;font-weight:750;color:var(--sign-text)}
details.fold>summary::-webkit-details-marker{display:none}
details.fold>summary::after{content:"+";font-weight:800;color:var(--muted)}
details.fold[open]>summary::after{content:"\2212"}
details.fold>:not(summary){margin-left:14px;margin-right:14px}
details.fold>:last-child{margin-bottom:12px}
details.fold>.table-wrap{margin:0 10px 10px}
.topic-in{padding:0 14px 10px}
.topic-in .crit{margin:0}
.sources .note{margin:0 0 4px}
/* phone sticky bar (site.js shows it after the first screen) */
.sbar{position:fixed;left:0;right:0;bottom:0;z-index:20;padding:8px max(12px,env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));background:color-mix(in srgb,var(--bg) 86%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--line);transform:translateY(110%);visibility:hidden;transition:transform .22s ease,visibility 0s linear .22s}
.sbar.on{transform:none;visibility:visible;transition:transform .22s ease}
.sbar a{display:flex;align-items:center;gap:10px;max-width:728px;margin:0 auto;min-height:52px;padding:6px 6px 6px 10px;border-radius:16px;background:var(--asphalt);color:#fff;text-decoration:none}
.sbar svg{flex:none;border-radius:8px}
.sb-t{display:grid;flex:1;min-width:0;line-height:1.25}
.sb-t b{font-size:11.5px;font-weight:800;color:#b9c7c1}
.sb-t span{font-size:15px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-go{flex:none;display:inline-flex;align-items:center;min-height:42px;padding:0 16px;border-radius:12px;background:var(--lane);color:var(--lane-ink);font-weight:900}
@media (min-width:720px){.sbar{display:none}}
@media (prefers-reduced-motion:reduce){.sbar,.sbar.on{transition:none}}
/* home: hero with the app in a phone, then what the app does */
.hero-home{padding-bottom:0;overflow:hidden}
.hero-home h1{font-size:30px;margin-bottom:6px}
.hh-cta{margin:12px 0 8px}
.btn-hero{min-height:50px;padding:0 20px;font-size:16px;margin:0}
.hh-phone{width:204px;height:236px;margin:16px auto 0;border:5px solid #0d1114;border-bottom:0;border-radius:28px 28px 0 0;overflow:hidden;background:#0d1114;box-shadow:0 -2px 24px rgba(0,0,0,.25)}
.hh-phone img{display:block;width:100%;height:auto;border-radius:23px 23px 0 0}
.features h2{margin-top:26px}
.ftiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ftile{display:flex;flex-direction:column;height:100%;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;text-decoration:none;color:var(--fg)}
.ftile:hover{border-color:var(--sign)}
.ftile img{display:block;width:100%;height:auto;background:var(--surface-2);border-bottom:1px solid var(--line)}
.ftile b{font-size:15px;line-height:1.3;padding:10px 12px 3px;color:var(--sign-text)}
.ftile span{font-size:12.5px;line-height:1.45;color:var(--muted);padding:0 12px 12px}
.features .note{margin:10px 0 0;font-size:12.5px}
.state-card .btn-sm{margin-top:12px}
/* 3D drives near DMV offices */
.ta-list{list-style:none;margin:12px 0 6px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:8px}
.ta-a{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 12px 8px 8px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-c);text-decoration:none;color:var(--fg)}
.ta-a:hover{border-color:var(--sign)}
.ta-a img{flex:none;width:56px;height:auto;border-radius:9px;border:2px solid #14191c;background:#e9eeeb}
.ta-a b{display:block;font-size:14.5px;line-height:1.35}
.ta-a span span{font-size:13px;font-weight:700;color:var(--sign-text)}
.office-app{margin:10px 0 0}
@media (max-width:419px){.bn small{display:none}.top-in{gap:8px}.lang{padding:0 11px}.hbtn{padding:0 13px}
.crumbs li[aria-current]{display:none}
.hero{padding:14px 16px 12px}.hero h1{font-size:23px;line-height:1.2;margin-bottom:6px}.hero .lede{font-size:15px;line-height:1.5;margin-bottom:6px}html[lang="zh-Hans"] .hero .lede{line-height:1.6}
.hero-home{padding-bottom:0}.hero-home h1{font-size:29px}
.app-card{grid-template-columns:76px minmax(0,1fr);gap:12px;padding:10px 12px 10px 10px;margin-top:8px}
.ap-t{font-size:16px;margin-bottom:2px}.ap-s{margin-bottom:6px}}
@media (max-width:359px){.bn .be{display:none}}
@media (min-width:720px){.hero{padding:26px 26px 22px}.hero h1{font-size:36px}h2{font-size:25px}
.kfs ul{grid-template-columns:repeat(4,minmax(0,1fr))}.ftiles{grid-template-columns:repeat(4,minmax(0,1fr))}
.app-card{grid-template-columns:104px minmax(0,1fr);padding:14px 18px 14px 14px}
.hero-home{display:grid;grid-template-columns:minmax(0,1fr) 236px;gap:28px;align-items:end;padding:28px 28px 0}
.hero-home .hh-text{padding-bottom:24px}.hero-home h1{font-size:40px}
.hh-phone{width:236px;height:300px;margin:0}}

/* help and support: the email as a secondary button (the app card keeps the one primary button), and standalone links
   tall enough to tap */
.btn.mail{font-size:15.5px;padding:0 18px;margin:2px 0 8px;max-width:100%;overflow-wrap:anywhere;text-align:center}
a.go{display:inline-block;padding:10px 0;font-weight:700}

/* the privacy policy's advance notice (footer, until 2026-11-17) */
.policy-notice{font-size:13px;color:var(--muted);border:1px solid var(--line);border-radius:10px;padding:8px 12px;margin:10px 0}
.policy-notice b{color:var(--fg)}
.policy-notice a{display:inline-flex;align-items:center;min-height:44px;padding:0 2px;font-weight:700;vertical-align:middle}

/* SEO-A12: a chapter's key points, at the top: one card, a line each, the number to spot in bold */
.kp h2{margin:24px 0 10px}
.kp-list{list-style:none;margin:0;padding:2px 14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m)}
.kp-list li{padding:10px 0 9px;border-top:1px solid var(--line);line-height:1.5}
.kp-list li:first-child{border-top:0}
.kp-list b{font-weight:800;color:var(--sign-text)}
.kp-list .srcs{line-height:1.4;margin-left:2px}
/* SEO-A3: the error report, at the end of the sources or of the content */
.report{margin:16px 0 0;font-size:14px}
.report a{display:inline-flex;align-items:center;min-height:44px;font-weight:700}
.sources .report{margin-top:6px}
/* PW-03: a readable measure on wide screens: about 70 Latin characters, about 40 Chinese ones (WCAG 1.4.8 asks for at most
   80, or 40 CJK). Boxes, cards and tables keep the column's full width; only their running text is held in. */
main :is(p,.ticks li,.steps-plain li,.crit li,.kp-list li,.opts li){max-width:34em}
html[lang="zh-Hans"] main :is(p,.ticks li,.steps-plain li,.crit li,.kp-list li,.opts li){max-width:39em}
/* PW-05: from 720 px the app card shows its screenshot at its own size (readable), the top of the screen in view, with
   the words and the button beside it as one block. The section nav fits the column there without scrolling. */
@media (min-width:720px){.app-card{grid-template-columns:200px minmax(0,1fr);gap:20px;align-items:center}
.ap-shot img{height:220px;object-fit:cover;object-position:top}
.ap-body{min-height:0}.btn.ap-btn{margin-top:10px}
.snav ul{gap:5px}.snav a{padding:0 11px}}
/* Boards (board_html): one selling point per page type at the bottom, from ads/tools/site-boards.cjs. The whole board is
   one link; it animates once and is done by 2.5 s; the base styles are the end frame, so reduced motion shows it at once. */
@font-face{font-family:"RF Overpass";src:url(/assets/fonts/overpass-sub.woff2) format("woff2");font-weight:600 900;font-style:normal;font-display:swap}
.cta.cta-board{background:none;padding:0;border-radius:0;overflow:visible}
.cta.cta-board::after{content:none}
.rb{--rb-disp:"RF Overpass",var(--f-display);display:block;position:relative;overflow:hidden;isolation:isolate;border-radius:16px;text-decoration:none;color:#fff;font-size:14px;line-height:1.4;-webkit-tap-highlight-color:transparent;container-type:inline-size}
.rb span{display:block}
.rb svg{display:block}
.rb:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.rb .rb-in{position:relative;z-index:1;display:flex;flex-direction:column;gap:14px;padding:20px}
.rb .rb-brand{display:inline-flex;align-items:center;gap:7px;font-family:var(--rb-disp);font-weight:800;font-size:14px;line-height:1;white-space:nowrap}
.rb .rb-brand .rb-mark{width:20px;height:20px;flex:none;border-radius:5px}
.rb .rb-brand .rb-en{display:inline;font-weight:600;font-size:12px;opacity:.75}
.rb .rb-kick{font-weight:700;font-size:13px;line-height:1.2;opacity:.82}
.rb .rb-h{font-family:var(--rb-disp);font-weight:800;font-size:27px;line-height:1.2;letter-spacing:-.01em}
.rb[lang=zh-Hans] .rb-h{font-family:inherit;font-weight:700;font-size:26px;line-height:1.28;letter-spacing:0}
.rb .rb-s{font-size:14.5px;line-height:1.55;opacity:.84}
.rb .rb-head{display:flex;flex-direction:column;gap:6px}
.rb .rb-act{display:flex;flex-direction:column;align-items:stretch;gap:10px}
.rb .rb-key{display:flex;align-items:center;justify-content:center;gap:8px;height:46px;margin-bottom:3px;padding:0 18px;border-radius:12px;background:var(--lane);color:var(--lane-ink);box-shadow:0 3px 0 #b58a0a;font-family:var(--rb-disp);font-weight:800;font-size:16px;line-height:1;white-space:nowrap}
.rb[lang=zh-Hans] .rb-key{font-family:inherit;font-weight:700}
.rb .rb-arr{width:16px;height:16px;transition:transform .15s ease-out}
.rb:hover .rb-arr,.rb:focus-visible .rb-arr{transform:translateX(3px)}
.rb .rb-trust{font-size:12.5px;line-height:1.45;opacity:.72;text-align:center;text-wrap:balance}
.rb-sign .rb-txt,.rb-asph .rb-txt{display:contents}
:is(.rb-sign,.rb-asph) .rb-brand{order:1}:is(.rb-sign,.rb-asph) .rb-head{order:2}:is(.rb-sign,.rb-asph) .rb-vis{order:3}:is(.rb-sign,.rb-asph) .rb-s{order:4}:is(.rb-sign,.rb-asph) .rb-facts{order:4}:is(.rb-sign,.rb-asph) .rb-act{order:5}
@keyframes rb-pop{0%{opacity:0;transform:scale(.7)}70%{opacity:1;transform:scale(1.03)}}
@keyframes rb-fill{from{background:transparent}}
@keyframes rb-lane{from{background-position:84px 50%}}
@keyframes rb-zoom{from{transform:scale(1.1)}}
@container (min-width:600px){
.rb .rb-in{flex-direction:row;align-items:stretch;gap:24px;padding:24px}
.rb .rb-txt,.rb-sign .rb-txt,.rb-asph .rb-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:14px;order:0}
.rb-sign .rb-vis,.rb-asph .rb-vis{order:1}
.rb .rb-act{margin-top:auto;align-items:flex-start}
.rb .rb-key{min-width:220px}
.rb .rb-trust{text-align:left}}
@media (prefers-reduced-motion:reduce){.rb *{animation:none!important;transition:none!important}}
/* a board that starts off screen waits until half of it is in view (site.js; the same rule as ads/tools/site-boards.cjs) */
[data-rb-wait]:not([data-rb-inview]) *{animation-play-state:paused!important}
.rb-sign{background:var(--sign)}
/* b40 (WCAG 1.4.3): on green the faded secondary lines were 4.2:1 (light) and 3.2:1 (dark); full white is 6.6:1 and 4.7:1 */
.rb-sign .rb-brand .rb-en,.rb-sign .rb-kick,.rb-sign .rb-s,.rb-sign .rb-trust{opacity:1}
.rb-sign .rb-who span:not(:first-child){background:rgba(0,0,0,.18);box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)} /* b40: white on 16% white over green was 3.6:1 (dark) */
.rb-sign::after{content:"";position:absolute;inset:5px;border:2px solid rgba(255,255,255,.92);border-radius:12px;pointer-events:none;z-index:2}
.rb-sign .rb-in{padding:22px 22px 20px}
.rb-sign .rb-puz{display:grid;grid-template-columns:repeat(24,1fr);gap:3px;padding:12px;border-radius:12px;background:rgba(0,0,0,.18)}
.rb-sign .rb-puz span{aspect-ratio:1;border-radius:2.5px;background:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55);animation:rb-fill .35s ease-out both}
.rb-sign .rb-cap{display:flex;justify-content:space-between;gap:8px;margin-top:8px;font-size:12px;font-weight:600;opacity:.8}
@container (min-width:600px){.rb-sign .rb-vis{flex:0 0 46%;display:flex;flex-direction:column;justify-content:center}}
.rb-asph{background:var(--asphalt)}
.rb-asph .rb-in{padding:20px 20px 40px}
.rb-asph .rb-bub{position:relative;padding:14px 16px 15px;border-radius:16px;background:#fff;color:#14191c;transform-origin:20% 100%;animation:rb-pop .45s ease-out .4s both}
.rb-asph .rb-bub::after{content:"";position:absolute;left:28px;bottom:-7px;width:14px;height:14px;background:#fff;transform:rotate(45deg);border-radius:2px}
.rb-asph .rb-line{display:flex;align-items:flex-start;gap:10px}
.rb-asph .rb-play{width:24px;height:24px;flex:none;margin-top:1px}
.rb-asph .rb-say{font-family:var(--rb-disp);font-weight:800;font-size:18px;line-height:1.3}
.rb-asph .rb-mean{margin:6px 0 0 34px;font-size:14px;color:#56626a}
.rb-asph .rb-note{margin:14px 0 0 2px;font-size:11.5px;opacity:.72}
.rb-asph .rb-lane{position:absolute;left:0;right:0;bottom:0;height:24px;background:repeating-linear-gradient(90deg,var(--lane) 0 26px,transparent 26px 42px) 0 50%/42px 4px repeat-x;animation:rb-lane 1.4s cubic-bezier(.3,.6,.3,1) .3s both}
@container (min-width:600px){.rb-asph .rb-vis{flex:0 0 44%;display:flex;flex-direction:column;justify-content:center}}
.rb-asph .rb-facts{display:flex;flex-wrap:wrap;gap:6px}
.rb-asph .rb-facts span{display:inline-flex;align-items:center;gap:5px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.1);font-size:12.5px;font-weight:600;line-height:1.2}
.rb-asph .rb-facts svg{width:13px;height:13px;color:#17c07f}
.rb-feat,.rb-cab{background:var(--surface);color:var(--fg);box-shadow:inset 0 0 0 1px var(--line)}
:is(.rb-feat,.rb-cab) .rb-in{padding:0;gap:0}
:is(.rb-feat,.rb-cab) .rb-txt{display:flex;flex-direction:column;gap:14px;padding:18px 20px 20px}
:is(.rb-feat,.rb-cab) :is(.rb-s,.rb-trust){color:var(--muted);opacity:1}
.rb-feat .rb-vis{position:relative;height:190px;overflow:hidden;background:#5d666d}
.rb .rb-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rb-feat .rb-photo{object-position:50% 60%;animation:rb-zoom 2.2s cubic-bezier(.2,.7,.2,1) both}
.rb-feat .rb-tag{position:absolute;left:12px;top:12px;display:inline-flex;align-items:center;gap:6px;padding:6px 9px 6px 7px;border-radius:9px;background:rgba(255,255,255,.94);color:#14191c;font-family:var(--rb-disp);font-weight:800;font-size:12.5px;line-height:1}
.rb-feat .rb-tag .rb-mark{width:16px;height:16px}
.rb-feat .rb-chip{position:absolute;right:12px;top:12px;padding:6px 9px;border-radius:999px;background:rgba(20,25,28,.78);color:#fff;font-size:12px;font-weight:700;line-height:1}
.rb-feat .rb-osm{position:absolute;right:8px;bottom:6px;left:8px;text-align:right;font-size:9px;line-height:1.2;color:#fff;opacity:.9;text-shadow:0 1px 2px rgba(0,0,0,.7)}
.rb-feat .rb-places{display:flex;flex-wrap:wrap;gap:6px}
.rb-feat .rb-places span{padding:5px 9px;border-radius:999px;background:var(--chip);font-size:12.5px;font-weight:600;line-height:1.2}
@container (min-width:600px){:is(.rb-feat,.rb-cab) .rb-vis{flex:0 0 44%;height:auto;min-height:300px}:is(.rb-feat,.rb-cab) .rb-txt{padding:24px}}
.rb-cab .rb-vis{position:relative;height:200px;overflow:hidden;background:#1c2226}
.rb-cab .rb-photo{object-position:50% 34%}
.rb-cab .rb-bub{position:absolute;right:14px;top:16px;max-width:76%;padding:10px 13px 11px;border-radius:14px;background:#fff;color:#14191c;box-shadow:0 2px 10px rgba(0,0,0,.18);font-weight:700;font-size:15px;line-height:1.38;transform-origin:85% 100%;animation:rb-pop .45s ease-out .5s both}
.rb-cab .rb-bub::after{content:"";position:absolute;right:40px;bottom:-7px;width:14px;height:14px;background:#fff;transform:rotate(45deg);border-radius:2px}
.rb-cab[lang=en] .rb-bub{font-family:var(--rb-disp);font-weight:800}
.rb-sign .rb-jv{display:flex;flex-direction:column;justify-content:center;gap:12px}
.rb-sign .rb-tabs{display:flex;gap:8px}
.rb-sign .rb-tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:74px;padding:8px 4px;border-radius:9px;background:#fff;color:#006b45;font-family:var(--rb-disp);font-weight:800;font-size:20px;line-height:1;text-align:center;animation:rb-pop .4s ease-out both}
.rb-sign .rb-tab i{font-style:normal;font-family:inherit;font-weight:700;font-size:12.5px;line-height:1.25;color:#14191c}
html[lang="zh-Hans"] .rb-sign .rb-tab i,.rb[lang=zh-Hans] .rb-tab i{font-family:system-ui,"PingFang SC","Noto Sans SC",sans-serif}
.rb-sign .rb-who{display:flex;flex-wrap:wrap;gap:6px}
.rb-sign .rb-who span{padding:5px 9px;border-radius:999px;background:rgba(255,255,255,.16);font-size:12.5px;font-weight:600;line-height:1.2}
.rb-sign .rb-who span:first-child{background:#fff;color:#006b45}