/* Clean maps-app look: system font, grouped light background, white rounded cards, one accent per brand.
   Model A (Calmer Roads) is blue, model B (Calm Roads) is teal; set by <html data-model>. */
:root{
  --bg:#F2F2F7;--surface:#FFFFFF;--fill:#F2F2F7;--fill2:#E5E5EA;--ink:#1C1C1E;--muted:#6C6C70;--line:rgba(60,60,67,.14);
  --accent:#0071E3;--accent-ink:#FFFFFF;--accent-soft:rgba(0,113,227,.1);
  --ok:#1E8E3E;--ok-soft:#E6F4EA;--warn:#B25E00;--warn-soft:#FFF3E0;--hard:#D70015;--hard-soft:#FDE7E9;
  --line-ok:#34C759;--line-warn:#FF9500;--line-hard:#FF3B30;
  --shadow:0 1px 2px rgba(0,0,0,.04),0 4px 16px rgba(0,0,0,.05);
  --r:16px;--r-sm:12px;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
[data-model="b"]{--accent:#00838F;--accent-soft:rgba(0,131,143,.1)}
@media (prefers-color-scheme:dark){
  :root{--bg:#000000;--surface:#1C1C1E;--fill:#2C2C2E;--fill2:#3A3A3C;--ink:#F5F5F7;--muted:#98989D;--line:rgba(84,84,88,.55);
    --accent:#0A84FF;--accent-soft:rgba(10,132,255,.18);
    --ok:#30D158;--ok-soft:rgba(48,209,88,.16);--warn:#FF9F0A;--warn-soft:rgba(255,159,10,.16);--hard:#FF453A;--hard-soft:rgba(255,69,58,.16);
    --shadow:none;color-scheme:dark}
  [data-model="b"]{--accent:#4DD0E1;--accent-ink:#00363C;--accent-soft:rgba(77,208,225,.16)}
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:110px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.12;letter-spacing:-.02em;text-wrap:balance;margin:0}
h1{font-size:clamp(1.9rem,6vw,2.6rem)} h2{font-size:1.35rem} h3{font-size:1.1rem}
p{margin:0}
.lede{color:var(--muted);font-size:1.05rem;max-width:58ch}
.eyebrow{font-weight:600;font-size:.8rem;color:var(--accent)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--accent-soft);outline-offset:1px;box-shadow:0 0 0 1px var(--accent)}
.wrap{max-width:880px;margin:0 auto;padding:20px 16px 56px;display:flex;flex-direction:column;gap:24px;min-width:0}

/* header: translucent bar, brand left, languages right, nav scrolls sideways on phones */
.top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 78%,transparent);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--line)}
.top-in{max-width:880px;margin:0 auto;padding:10px 16px 0;display:flex;flex-direction:column;gap:6px}
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);font-weight:700;font-size:1.08rem;letter-spacing:-.01em}
.brand:hover{text-decoration:none}
.brand small{color:var(--muted);font-weight:500;font-size:.85rem}
.logo{width:30px;height:30px;border-radius:8px;background:var(--accent);display:grid;place-items:center;flex-shrink:0}
.logo svg{width:20px;height:20px}
.nav{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:2px 16px 8px;white-space:nowrap}
.nav::-webkit-scrollbar{display:none}
.nav a{color:var(--ink);font-weight:500;font-size:.93rem;padding:6px 12px;border-radius:999px}
.nav a:hover{background:var(--fill2);text-decoration:none}
.nav .cta{background:var(--accent);color:var(--accent-ink);font-weight:600}
.nav .cta:hover{background:var(--accent);filter:brightness(1.08)}
.langs{display:flex;background:var(--fill2);border-radius:9px;padding:2px;font-size:.8rem;font-weight:600}
.langs a{color:var(--muted);padding:4px 9px;border-radius:7px}
.langs a:hover{text-decoration:none;color:var(--ink)}
.langs a[aria-current]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.crumbs{font-size:.85rem;color:var(--muted)} .crumbs a{color:var(--muted)}

/* surfaces */
.panel{background:var(--surface);border-radius:var(--r);padding:20px 18px;display:flex;flex-direction:column;gap:16px;box-shadow:var(--shadow);min-width:0;max-width:100%}
.hero{display:flex;flex-direction:column;gap:8px;padding-top:6px}

/* planner: two stacked fields like a maps app */
.ab{display:grid;grid-template-columns:20px minmax(0,1fr) 40px;gap:10px;align-items:center}
.ab-marks{display:flex;flex-direction:column;align-items:center;gap:3px;align-self:stretch;justify-content:center;padding-block:18px}
.mk-a{width:12px;height:12px;border-radius:50%;border:3px solid var(--muted)}
.mk-line{flex:1;width:0;border-left:2px dotted var(--fill2);min-height:18px}
.mk-b{width:13px;height:13px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--hard)}
.ab-fields{display:flex;flex-direction:column;gap:8px;min-width:0}
.in{width:100%;font:400 1.02rem var(--font);padding:12px 14px;border-radius:var(--r-sm);border:1px solid transparent;background:var(--fill);color:var(--ink);-webkit-appearance:none;appearance:none}
.in::placeholder{color:var(--muted)}
.in:focus{outline:none;border-color:var(--accent);background:var(--surface)}
.swap{width:40px;height:40px;border-radius:50%;border:none;background:var(--fill);color:var(--ink);font-size:1.15rem;cursor:pointer}
.swap:hover{background:var(--fill2)}
.ab-bottom{grid-column:1 / 4;display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center}
.ticks{display:flex;flex-wrap:wrap;gap:8px}
.tick{display:inline-flex;gap:7px;align-items:center;font-size:.88rem;color:var(--ink);background:var(--fill);padding:7px 12px;border-radius:999px;cursor:pointer;user-select:none}
.tick input{accent-color:var(--accent);margin:0;width:16px;height:16px}
.btn{font:600 1rem var(--font);padding:12px 20px;border-radius:var(--r-sm);border:none;background:var(--accent);color:var(--accent-ink);cursor:pointer;display:inline-block;text-align:center;line-height:1.2}
.btn:hover{text-decoration:none;filter:brightness(1.08)}
.btn.ghost{background:var(--accent-soft);color:var(--accent)}
.err{color:var(--hard);font-weight:600}

/* route options: collapsed rows with time first, details on tap */
.opts{display:flex;flex-direction:column;gap:10px}
.opt{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);min-width:0;overflow:hidden}
.opt.best{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.opt summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px}
.opt summary::-webkit-details-marker{display:none}
.opt summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);margin:0 2px 4px 4px;flex-shrink:0;transition:transform .15s}
.opt[open] summary::after{transform:rotate(-135deg);margin-bottom:-2px}
.opt-main{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.opt-time{font-family:var(--display);font-weight:700;font-size:1.35rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.opt.best .opt-time{color:var(--accent)}
.opt-sub{color:var(--muted);font-size:.88rem}
.opt-body{display:flex;flex-direction:column;gap:10px;padding:0 16px 16px}
.opt-body .btn{align-self:flex-start}
.via{font-size:.9rem;color:var(--muted)}
.ok{font-size:.9rem;color:var(--ok)}
.meta{font-size:.82rem;color:var(--muted);font-variant-numeric:tabular-nums}
.warns{display:flex;flex-direction:column;gap:4px;font-size:.9rem;background:var(--hard-soft);border-radius:10px;padding:10px 12px}
.warns p{color:var(--hard)} .warns p.w{color:var(--warn)}
.segs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.seg{display:grid;grid-template-columns:12px minmax(0,1fr) auto;gap:10px;align-items:center;font-size:.92rem;padding:8px 0;border-top:1px solid var(--line)}
.seg small{display:block;color:var(--muted);font-size:.8rem}
.sd{width:10px;height:10px;border-radius:50%}
.sd.easy{background:var(--line-ok)}.sd.care{background:var(--line-warn)}.sd.hard{background:var(--line-hard)}
.note{font-size:.84rem;color:var(--muted)}
.pill{display:inline-flex;align-items:center;gap:6px;font:600 .78rem var(--font);padding:4px 10px;border-radius:999px;white-space:nowrap;width:fit-content;flex-shrink:0}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.pill.easy{background:var(--ok-soft);color:var(--ok)}.pill.care{background:var(--warn-soft);color:var(--warn)}.pill.hard{background:var(--hard-soft);color:var(--hard)}

/* search + lists (inset grouped rows) */
.search{display:flex;flex-direction:column;gap:12px;min-width:0}
#q{background-color:var(--surface);box-shadow:var(--shadow);padding-left:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238E8E93' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:13px center;background-size:18px}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px}
.chips::-webkit-scrollbar{display:none}
.chip{font:500 .88rem var(--font);padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;white-space:nowrap}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.count{color:var(--muted);font-size:.85rem}
.list{display:grid;grid-template-columns:1fr;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.rcard{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;color:var(--ink);min-width:0;border-top:1px solid var(--line)}
.rcard:first-child{border-top:0}
.rcard:hover{background:var(--fill);text-decoration:none}
.rc-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.rcard b{font-weight:600;font-size:1rem}
.rcard .k{font-size:.85rem;color:var(--muted)}
.rcard::after{content:"";width:7px;height:7px;border-right:2px solid var(--fill2);border-top:2px solid var(--fill2);transform:rotate(45deg);flex-shrink:0}
@media (min-width:760px){.list.two{grid-template-columns:1fr 1fr}.list.two .rcard:nth-child(2){border-top:0}.list.two .rcard:nth-child(even){border-left:1px solid var(--line)}}
.empty{background:var(--surface);border-radius:var(--r);padding:20px;color:var(--muted)}

/* road page */
.road-head{display:flex;flex-direction:column;gap:8px}
.aka{color:var(--muted);font-size:.95rem}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.stat{display:flex;flex-direction:column;gap:6px;min-width:0;background:var(--fill);border-radius:var(--r-sm);padding:10px 12px}
.stat .l{font-size:.75rem;color:var(--muted);font-weight:500}
.stat b{font-weight:600;font-size:.95rem}
.dots{display:flex;gap:3px}
.dots i{width:14px;height:6px;border-radius:3px;background:var(--fill2)}
.dots.d i.on{background:var(--line-hard)}.dots.b i.on{background:var(--accent)}
.warn{color:var(--warn);font-weight:600}
.prose{display:flex;flex-direction:column;gap:10px;max-width:68ch;min-width:0}
.prose ul{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:6px}
.notice{background:var(--warn-soft);border-radius:var(--r-sm);padding:12px 14px;font-size:.95rem}
.box{border-radius:var(--r-sm);padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.box.alts{background:var(--accent-soft)}
.box.camper{background:var(--fill)}
.box h4{font-size:.95rem}
.alt-row{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline;font-size:.95rem}
.alt-row a,.alt-row b{font-weight:600}
.src{font-size:.84rem;color:var(--muted)}
.mapbox{display:flex;flex-direction:column;gap:8px}
.mapbox .btn{align-self:flex-start}
.map{height:380px;border-radius:var(--r);overflow:hidden;background:var(--fill)}

/* premium (model A) */
.premium{position:relative}
.premium-gate{display:none}
.locked .premium-body{filter:blur(6px);user-select:none;pointer-events:none;max-height:220px;overflow:hidden}
.locked .premium-gate{display:flex;flex-direction:column;gap:10px;align-items:flex-start;position:absolute;inset:auto 0 0 0;background:linear-gradient(transparent,var(--surface) 40%);padding:60px 16px 16px}
.prices{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.price{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px;display:flex;flex-direction:column;gap:10px}
.price .amt{font-family:var(--display);font-size:2.2rem;font-weight:700;letter-spacing:-.02em}
.perks{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:6px}
.faq{display:flex;flex-direction:column;gap:8px}
.faq details{background:var(--surface);border-radius:var(--r-sm);padding:14px 16px;box-shadow:var(--shadow)}
.faq summary{font-weight:600;cursor:pointer}

/* affiliates (model B) */
.aff{display:flex;flex-wrap:wrap;gap:8px}
.aff a{background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:8px 14px;color:var(--ink);font-weight:500;font-size:.9rem}
.aff a:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
.packs{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.form-row{display:flex;flex-wrap:wrap;gap:8px}
.form-row .in{flex:1 1 220px;min-width:0}

/* footer */
.foot{border-top:1px solid var(--line)}
.foot .top-in{padding:20px 16px 40px;gap:10px;color:var(--muted);font-size:.82rem}
.foot nav{display:flex;flex-wrap:wrap;gap:6px 14px}
.foot a{color:var(--muted)}
.legal{max-width:72ch;display:flex;flex-direction:column;gap:12px}
.legal h2{font-size:1.1rem;margin-top:10px}

/* guides */
.prose.guide{max-width:none}
.prose.guide>*{min-width:0}
.prose.guide>p,.prose.guide>ul,.prose.guide>h2{max-width:68ch}
.prose.guide h2{margin-top:12px}
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r-sm);background:var(--surface);border:1px solid var(--line);width:100%;max-width:calc(100vw - 32px)}
.gtable{width:100%;border-collapse:collapse;font-size:.9rem}
.gtable th,.gtable td{padding:9px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.gtable th{font-weight:600;font-size:.76rem;color:var(--muted);background:var(--fill);white-space:nowrap}
.gtable tr:last-child td{border-bottom:0}
.gtable td:first-child{font-weight:600;min-width:9em}
article.panel{min-width:0;max-width:100%}
@media (min-width:912px){.tscroll{max-width:100%}}
@media (max-width:600px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.panel{padding:18px 16px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
.road-title{display:flex;flex-direction:column;gap:8px;min-width:0}
#showall{align-self:flex-start}
.opt .locked .premium-gate{position:static;background:none;padding:0 16px 16px}.opt .locked .premium-body{max-height:140px}
.premium.locked{min-height:180px}.opt .premium.locked{min-height:0}
.locked .premium-gate{border-radius:0 0 12px 12px}