/* roadrulesabroad.com
   Wayfinding: the visual language of real road signs. Flat colour panels with the white inset border every sign
   has, black gantry bands, hairline rules, numbered lists, plates for buttons. Headings, buttons and labels are set
   in Overpass, drawn from the US highway sign alphabet; anything people read at length is set in Inter, which is
   easier on the eye in paragraphs. Sign and camera drawings keep their own colours. */

@font-face{font-family:"Overpass";font-style:normal;font-weight:100 900;font-display:swap;src:url("/fonts/overpass-latin-wght-normal.woff2") format("woff2-variations");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:100 900;font-display:swap;src:url("/fonts/overpass-latin-ext-wght-normal.woff2") format("woff2-variations");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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url("/fonts/inter-latin-wght-normal.woff2") format("woff2-variations");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:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url("/fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations");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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url("/fonts/inter-greek-wght-normal.woff2") format("woff2-variations");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
/* Sign lettering inside the drawings */
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/barlow-condensed-latin-700-normal.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:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/barlow-condensed-latin-ext-700-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --paper:#FFFFFF; --ink:#101215; --grey:#5C626A; --faint:#8D939A; --rule:#DCDFE3; --rule-2:#C3C8CE; --tint:#F2F3F4;
  --blue:#0B4C9C; --blue-2:#083D7E; --green:#00663B; --yellow:#FFC400; --red:#D11F2D; --amber:#D96F00;
  --band:#101215; --band-fg:#FFFFFF; --band-muted:rgba(255,255,255,.72); --band-rule:rgba(255,255,255,.22);
  --link:#0B4C9C;
  /* names the scripts and drawings use */
  --bg:var(--paper); --fg:var(--ink); --muted:var(--grey); --line:var(--rule); --line-2:var(--rule-2);
  --surface:#FFFFFF; --surface-2:var(--tint); --surface-3:#E6E8EB; --accent:var(--blue); --accent-fg:#FFFFFF;
  --ok:var(--green); --warn:var(--amber); --bad:var(--red); --yellow-fg:#101215;
  --ok-soft:#E3F1EA; --warn-soft:#FBEEDF; --bad-soft:#FBE4E6; --yellow-soft:#FFF4CC; --accent-soft:#E4ECF7;
  --asphalt:#4A515B; --verge:#C8D3BC; --island:#A7BC97; --paint:#F7F8F9; --water:#9FC2E0; --rail:#8A6A44; --track-c:#9AA3AE;
  --car-you:#0B4C9C; --car-other:#E0542A; --car-glass:#C9DCF4; --car-edge:#101215; --walker:#FFC400; --bus:#F2B705;
  --housing:#1B1F25; --lamp-off:#3A3F47; --lamp-red:#E5323B; --lamp-amber:#F2A900; --lamp-green:#20B26A;
  --font:"Overpass","Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-display:var(--font); --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0D0F12; --ink:#F1F3F5; --grey:#A2A8B0; --faint:#79808A; --rule:rgba(255,255,255,.13); --rule-2:rgba(255,255,255,.24); --tint:#181B20;
    --band:#000000; --surface:#15181C; --surface-3:#22262C; --link:#8DB8FF;
    --ok-soft:#0F2A1D; --warn-soft:#2E2010; --bad-soft:#33161A; --yellow-soft:#2E2708; --accent-soft:#14233A;
    --asphalt:#353C46; --verge:#1B2620; --island:#2A3B2C; --paint:#DCE2E9; --water:#1F3A52; --track-c:#56606C; --car-glass:#22344F; --car-edge:#0D0F12;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#0D0F12; --ink:#F1F3F5; --grey:#A2A8B0; --faint:#79808A; --rule:rgba(255,255,255,.13); --rule-2:rgba(255,255,255,.24); --tint:#181B20;
  --band:#000000; --surface:#15181C; --surface-3:#22262C; --link:#8DB8FF;
  --ok-soft:#0F2A1D; --warn-soft:#2E2010; --bad-soft:#33161A; --yellow-soft:#2E2708; --accent-soft:#14233A;
  --asphalt:#353C46; --verge:#1B2620; --island:#2A3B2C; --paint:#DCE2E9; --water:#1F3A52; --track-c:#56606C; --car-glass:#22344F; --car-edge:#0D0F12;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--paper);-webkit-text-size-adjust:100%;scroll-padding-top:80px;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:17px;line-height:1.6;letter-spacing:-.006em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
img,svg{max-width:100%}
a{color:var(--link);font-weight:700;text-underline-offset:3px;text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
.wrap{max-width:1200px;margin-inline:auto;padding-inline:24px}
.narrow{max-width:740px;margin-inline:auto;padding-inline:20px}
@media (max-width:600px){.wrap,.narrow{padding-inline:16px}}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--paper);padding:8px 12px}
.skip:focus{left:8px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none !important}
h1,h2,h3{font-family:var(--font-display);font-weight:850;line-height:1;letter-spacing:-.025em;text-wrap:balance;margin:0}
/* The sign alphabet for anything that works like a sign: names, labels, numbers and buttons. */
.logo,.nav,.btn,.eyebrow,.tag,.badge,.crumbs,.page-band .meta,.fact b,.trust b,.board,.board-label,.sign-lede,.for-you,.plan .amount,.big-score,.quiz-q,.cam-tile-text b,.screens figcaption b,.links a,.country b,.sign b,.ltitle,.bar-label,.split-box p,.price,.near,.faq summary,.checklist b,.licence-pick b,.scene-status,.cta h2{font-family:var(--font-display)}
h1{font-size:clamp(40px,6vw,72px);line-height:.98}
h2{font-size:clamp(30px,4vw,48px);line-height:1}
h3{font-size:21px;line-height:1.15;letter-spacing:-.015em}
p{margin:0}
.lede{color:var(--grey);font-size:clamp(17px,1.9vw,19.5px);line-height:1.6;max-width:62ch}
.eyebrow{font-size:14px;font-weight:800;color:var(--grey);letter-spacing:0}
.muted{color:var(--grey)}
.small{font-size:14.5px}
.num{font-variant-numeric:tabular-nums}
.sticker{display:inline-block;vertical-align:middle;flex:none}

/* The sign panel: flat colour with the white inset border every road sign has */
.plaque{border-radius:16px;padding:7px;color:#fff;background:var(--blue)}
.plaque > .in{border:3px solid rgba(255,255,255,.96);border-radius:11px;height:100%}
.plaque.green{background:var(--green)}.plaque.red{background:var(--red)}.plaque.ink{background:#101215}
.plaque.yellow{background:var(--yellow);color:#101215}.plaque.yellow > .in{border-color:#101215}
.plaque.white{background:#fff;color:#101215;box-shadow:inset 0 0 0 2px #101215}.plaque.white > .in{border-color:#101215}
.tag{display:inline-block;font-size:12px;font-weight:800;line-height:1;padding:5px 7px 3px;border-radius:5px;color:#fff;background:var(--grey);vertical-align:middle;white-space:nowrap}
.tag.red{background:var(--red)}.tag.amber{background:var(--amber)}.tag.green{background:var(--green)}.tag.blue{background:var(--blue)}

/* Header and footer */
.site-top{position:sticky;top:0;z-index:30;background:var(--band);color:var(--band-fg)}
.site-top .wrap{display:flex;align-items:center;gap:18px;min-height:68px}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit;font-weight:850;font-size:21px;letter-spacing:-.02em;line-height:1;white-space:nowrap}
.nav{display:flex;gap:28px;margin-left:auto;align-items:center}
.nav a{color:var(--band-fg);text-decoration:none;font-weight:700;font-size:15.5px;opacity:.85}
.nav a:hover{opacity:1;text-decoration:underline;text-decoration-color:var(--yellow)}
.nav .btn{opacity:1}
@media (max-width:900px){.nav a:not(.btn){display:none}}
@media (max-width:420px){.logo span{font-size:18px}.site-top .btn{padding:10px 12px 8px;font-size:14px}}
@media (max-width:600px){.site-top .wrap{min-height:58px}}
.site-foot{background:var(--band);color:var(--band-muted);margin-top:96px;padding:56px 0 120px;font-size:15px}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:32px}
@media (max-width:820px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.foot-grid{grid-template-columns:1fr}}
.foot-grid h2{font-size:17px;letter-spacing:-.01em;margin-bottom:12px;padding-top:10px;border-top:3px solid #fff;color:#fff}
.foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.foot-grid a{color:var(--band-muted);font-weight:600;text-decoration:none}
.foot-grid a:hover{color:#fff;text-decoration:underline}
.site-foot .logo{color:#fff}
.disclaimer{margin-top:36px;padding-top:20px;border-top:1px solid var(--band-rule);max-width:90ch;font-size:13.5px;color:rgba(255,255,255,.55)}

/* Buttons are plates */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:0;border-radius:9px;padding:13px 20px 11px;font:inherit;font-weight:850;font-size:16px;line-height:1.1;letter-spacing:-.01em;background:var(--blue);color:#fff;cursor:pointer;white-space:nowrap;text-decoration:none;transition:transform .12s}
.btn:hover{text-decoration:none;filter:brightness(1.06)}
.btn:active{transform:scale(.98)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2.5px var(--ink)}
.btn.glass{background:transparent;color:#fff;box-shadow:inset 0 0 0 2.5px rgba(255,255,255,.9)}
.btn.yellow{background:var(--yellow);color:#101215}
.btn.big{padding:16px 24px 14px;font-size:17px}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.site-top .btn{background:var(--yellow);color:#101215;padding:11px 16px 9px;font-size:15px}

/* Sections: each starts on a heavy rule, like the top of a sign gantry */
section{margin-top:72px}
section.first{margin-top:36px}
@media (max-width:600px){section{margin-top:56px}section.first{margin-top:28px}}
.sec-head{display:grid;gap:10px;margin-bottom:28px;padding-top:18px;border-top:7px solid var(--ink);max-width:none}
.sec-head h2{max-width:20ch}
.sec-head .lede,.sec-head p.muted{max-width:62ch}
.panel{background:var(--tint);border-radius:14px;padding:22px}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:0 28px}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:0 28px}

/* The home hero */
.stage-hero{padding:48px 0 0;margin:0}
.stage-hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:56px;align-items:start}
@media (max-width:980px){.stage-hero .wrap{grid-template-columns:1fr;gap:40px}}
.stage-hero .plaque > .in{padding:34px 36px 30px}
@media (max-width:600px){.stage-hero{padding-top:20px}.stage-hero .plaque > .in{padding:22px 18px 18px}}
.stage-hero h1{font-size:clamp(36px,5.2vw,62px);line-height:1;letter-spacing:-.03em;max-width:13em}
.board{margin-top:30px;border-top:2px solid rgba(255,255,255,.92)}
.board a{display:grid;grid-template-columns:44px minmax(0,1fr) minmax(0,1.3fr) 40px;align-items:center;gap:12px;padding:14px 0 12px;border-bottom:1px solid rgba(255,255,255,.35);color:#fff;text-decoration:none}
.board a:hover b{text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:3px}
.board b{font-size:clamp(20px,2.4vw,27px);font-weight:850;letter-spacing:-.02em;line-height:1.1}
.board span{font-size:clamp(15px,1.6vw,19px);font-weight:500;opacity:.92;line-height:1.25}
.board svg.arr{width:36px;height:36px;justify-self:end}
@media (max-width:520px){.board a{grid-template-columns:36px 1fr 30px;gap:10px}.board span{grid-column:2;grid-row:2;font-size:14.5px}.board svg.arr{grid-row:1/span 2;grid-column:3;width:28px;height:28px}.board .sticker{grid-row:1/span 2}}
.stage-hero .btn-row{margin-top:24px}
/* The trip picker on the home sign */
.pick{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:end;margin-top:28px}
.pick .btn{grid-column:1 / -1}
.pick label{display:grid;gap:7px;font-size:14.5px;font-weight:800;color:rgba(255,255,255,.9)}
.pick select{width:100%;padding:14px 12px 12px;border-radius:9px;border:0;background:#fff;color:#101215;font:inherit;font-weight:800;font-size:17px}
.pick .btn{min-height:50px}
@media (max-width:520px){.pick{grid-template-columns:1fr}}
.sign-lede{margin-top:14px;font-size:clamp(17px,1.9vw,21px);line-height:1.4;font-weight:600;color:rgba(255,255,255,.92);max-width:34em}
.board-label{margin-top:30px;font-size:14.5px;font-weight:800;color:rgba(255,255,255,.85)}
.board-label + .board{margin-top:10px}
.trust-line{margin-top:18px;font-size:15.5px;font-weight:600;color:var(--grey);max-width:62ch}
/* One line for the visitor's own licence, at the top of destination pages */
.for-you{display:flex;align-items:center;gap:12px;margin-top:22px;padding:13px 16px 11px;border-radius:10px;background:var(--yellow);color:#101215;font-weight:850;font-size:17px;line-height:1.3;text-decoration:none;max-width:44em}
.for-you span{flex:1}
.for-you::after{content:"";flex:none;width:20px;height:20px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 12h15M12 5l7 7-7 7' fill='none' stroke='black' stroke-width='3'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 12h15M12 5l7 7-7 7' fill='none' stroke='black' stroke-width='3'/%3E%3C/svg%3E") center/contain no-repeat}
.for-you:hover{filter:brightness(1.05);text-decoration:none}
.trust{display:flex;flex-wrap:wrap;margin-top:30px;border-top:2px solid var(--ink)}
.trust div{padding:14px 24px 0 0;margin-right:24px;border-right:1px solid var(--rule);display:grid;gap:2px}
.trust div:last-child{border-right:0}
.trust b{font-size:clamp(30px,3.6vw,40px);font-weight:850;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.trust span{font-size:14px;font-weight:700;color:var(--grey)}
@media (max-width:600px){.trust div{padding-right:14px;margin-right:14px}}
.hero-copy{min-width:0}
.pill{display:none}

/* Phone */
.phone-wrap{display:grid;place-items:center}
.phone{position:relative;width:100%;max-width:380px;aspect-ratio:390/844;border-radius:56px;background:#0B0C0E;padding:12px;box-shadow:0 0 0 2px #2C3036,0 36px 70px rgba(16,18,21,.25)}
.phone-screen{width:100%;height:100%;border-radius:45px;overflow:hidden;background:#fff}
.phone-screen img{display:block;width:100%;height:100%;object-fit:cover}
@media (max-width:980px){.stage-hero .phone{max-width:300px}}
.float{display:none}

/* The "what's different for you" picker: a black gantry */
.demo-band{margin-top:72px;background:var(--band);color:var(--band-fg);padding:44px 0 50px}
.demo{display:grid;grid-template-columns:.85fr 1.15fr;gap:40px;align-items:start}
@media (max-width:880px){.demo{grid-template-columns:1fr;gap:26px}}
.demo-pick{display:grid;gap:14px;align-content:start}
.demo-pick .eyebrow{color:var(--band-muted)}
.demo-pick h2{font-size:clamp(30px,3.6vw,42px)}
.demo label{display:grid;gap:7px;font-size:14px;font-weight:800;color:var(--band-muted)}
.demo select{width:100%;padding:14px 14px 12px;border-radius:9px;border:0;background:#fff;color:#101215;font:inherit;font-weight:800;font-size:17px;appearance:auto}
.demo-link{color:var(--yellow);font-size:16px}
.demo-out{display:grid;align-content:start;background:var(--paper);color:var(--ink);border-radius:16px;padding:6px 22px 8px;counter-reset:d}
.demo-out .diff{padding:16px 0 17px}

/* Differences: numbered, most important first. The number sits on a small blue plate beside the title, so the
   explanation underneath runs the full width of the column. */
.diffs{list-style:none;margin:0;padding:0;display:grid;counter-reset:d}
.diff{padding:20px 0 22px;border-top:1px solid var(--rule);counter-increment:d}
.diffs .diff:first-child,.demo-out .diff:first-child{border-top:0;padding-top:4px}
.diff h3{display:flex;align-items:flex-start;gap:12px;font-size:21px;line-height:1.22;letter-spacing:-.012em}
.diff h3::before{content:counter(d);flex:none;display:grid;place-items:center;min-width:30px;height:30px;padding:0 6px;margin-top:-3px;border-radius:7px;background:var(--blue);color:#fff;font-size:15.5px;font-weight:850;line-height:1;letter-spacing:0;font-variant-numeric:tabular-nums}
.diff p{margin-top:10px;color:var(--ink);max-width:66ch}
.more-rules{margin-top:30px;padding-top:18px;border-top:2px solid var(--ink)}
.more-rules h3{font-size:19px;letter-spacing:-.01em}
.more-rules .faq{margin-top:6px;border-top:0}
.more-rules .faq summary{font-size:17.5px;line-height:1.3;align-items:center}
.more-rules .faq p{color:var(--ink);max-width:66ch}
.ti{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square;stroke-linejoin:miter}
.badge{display:inline-flex;align-items:center;font-size:12px;font-weight:800;padding:5px 7px 3px;border-radius:5px;white-space:nowrap;line-height:1;vertical-align:middle;color:#fff;background:var(--grey)}
.badge.bad{background:var(--red)}
.badge.warn{background:var(--amber)}
.badge.ok{background:var(--green)}
.badge.plain{background:var(--tint);color:var(--grey)}

/* Country lists: a departure board */
.country-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:0 28px;border-top:2px solid var(--ink)}
.country{display:flex;align-items:center;gap:14px;padding:14px 2px 12px;border-bottom:1px solid var(--rule);color:var(--ink);text-decoration:none}
.country::after{content:"";margin-left:auto;flex:none;width:18px;height:18px;background:currentColor;opacity:.4;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 12h15M12 5l7 7-7 7' fill='none' stroke='black' stroke-width='3'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 12h15M12 5l7 7-7 7' fill='none' stroke='black' stroke-width='3'/%3E%3C/svg%3E") center/contain no-repeat}
.country:hover{color:var(--link)}
.country:hover::after{opacity:1}
.country b{display:block;font-size:18px;font-weight:850;letter-spacing:-.01em;line-height:1.15}
.country small{display:block;font-weight:600;color:var(--grey);font-size:13.5px}
.links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.links a{display:inline-flex;align-items:center;gap:8px;padding:10px 14px 8px;border-radius:9px;box-shadow:inset 0 0 0 2px var(--ink);color:var(--ink);text-decoration:none;font-size:15px;font-weight:800}
.links a:hover{background:var(--ink);color:var(--paper)}
.card{display:grid;gap:8px;align-content:start;padding:16px 0 20px;border-top:4px solid var(--ink);color:var(--ink);text-decoration:none;font-weight:400}
a.card:hover h3{color:var(--link);text-decoration:underline}
.card h3{font-size:23px}
.card p{color:var(--grey);font-size:15.5px}

/* Guide pages: a black band at the top */
.page-band{background:var(--band);color:var(--band-fg);padding:28px 0 44px}
@media (max-width:600px){.page-band{padding:20px 0 34px}}
.page-band .crumbs,.page-band .crumbs a{color:var(--band-muted)}
.page-band h1{font-size:clamp(36px,5.4vw,64px);margin-top:16px;max-width:16em}
.page-band .lede{color:rgba(255,255,255,.92);margin-top:14px}
.page-band .lede + .lede{margin-top:12px}
.page-band .meta{color:var(--band-muted);margin-top:12px;font-size:14px;font-weight:700}
.page-band .stickers{display:flex;gap:10px;align-items:center;margin-top:20px}
.page-band .stickers .to{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:square}
.page-band .facts{margin-top:28px;border-top-color:rgba(255,255,255,.9)}
.page-band .fact{border-color:var(--band-rule)}
.page-band .fact span{color:var(--band-muted)}
.band-eyebrow{color:var(--band-muted);margin-top:18px}
.band-cta{margin-top:24px}
.crumbs{font-size:14px;color:var(--grey);margin:0;font-weight:600}
.crumbs a{color:inherit;font-weight:600;text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.page-head{display:grid;gap:14px;margin-top:22px}
.page-head .meta{font-size:14px;color:var(--grey);font-weight:600}
.prose{display:grid;gap:18px;font-size:17px}
.prose h2{margin-top:36px;font-size:clamp(28px,3.4vw,38px);padding-top:14px;border-top:4px solid var(--ink)}
.prose h3{margin-top:18px}
.prose ul,.prose ol{margin:0;padding-left:22px;display:grid;gap:8px}
.prose blockquote{margin:0;padding:14px 18px;border-left:6px solid var(--yellow);background:var(--tint);border-radius:0 12px 12px 0}
.prose table{border-collapse:collapse;width:100%;font-size:15.5px}
.prose th,.prose td{border-bottom:1px solid var(--rule);padding:10px 12px 9px 0;text-align:left;vertical-align:top}
.prose thead th{border-bottom:2px solid var(--ink)}
.toc{border-top:4px solid var(--ink);padding-top:12px;font-size:15.5px}
.toc ol{margin:8px 0 0;padding-left:22px;display:grid;gap:4px}
.toc a{font-weight:700}

/* Key facts: a strip of numbers, like a distance sign */
.facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));border-top:2px solid var(--ink)}
.fact{display:grid;gap:4px;padding:14px 14px 12px 0;border-bottom:1px solid var(--rule)}
.fact b{font-size:30px;font-weight:850;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.fact span{font-size:13.5px;color:var(--grey);line-height:1.3;font-weight:700}

/* Speed */
.ladder{display:grid;gap:22px}
.lrow{display:grid;grid-template-columns:60px 1fr;gap:16px;align-items:center}
.lrow svg{width:60px;height:60px}
.ltitle{font-weight:800}
.lnote{font-size:14.5px;color:var(--grey)}
.bar{position:relative;height:10px;background:var(--surface-3);border-radius:2px;margin-top:9px}
.bar.has-mark{margin-bottom:22px}
.bar-fill{position:absolute;left:0;top:0;bottom:0;border-radius:2px;background:var(--blue)}
.bar-mark{position:absolute;top:-6px;bottom:-6px;width:4px;margin-left:-2px;background:var(--ink)}
.bar-label{position:absolute;top:15px;font-size:12px;font-weight:800;color:var(--grey);transform:translateX(-50%);white-space:nowrap}

/* Tables */
.table-wrap{position:relative;overflow-x:auto;border-top:2px solid var(--ink)}
table.data{width:100%;border-collapse:collapse;font-size:15.5px}
table.data th,table.data td{padding:12px 14px 10px 0;text-align:left;vertical-align:top;border-bottom:1px solid var(--rule)}
table.data thead th{font-size:13.5px;font-weight:800;color:var(--grey);border-bottom:2px solid var(--ink)}
table.data tbody th{font-weight:800}
table.data td.diff-cell{background:var(--yellow-soft);font-weight:800;padding-left:8px}
table.data.side td{width:34%}
table.data.side tr.is-diff td:first-of-type{background:var(--yellow-soft);font-weight:800;padding-left:10px}
table.data.side tr td:first-of-type{padding-left:10px}
table.data td.num{font-variant-numeric:tabular-nums;white-space:nowrap}
table.data a{text-decoration:none}

/* Signs */
.sign-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));border-top:2px solid var(--ink)}
.sign{padding:20px 12px 18px;display:grid;gap:8px;justify-items:center;text-align:center;align-content:start;border-bottom:1px solid var(--rule);border-right:1px solid var(--rule)}
.sign svg{width:88px;height:88px}
.sign b{font-size:15.5px;line-height:1.25;font-weight:800}
.sign small{font-style:italic;color:var(--grey);font-size:13.5px}
.sign p{font-size:14px;color:var(--grey);line-height:1.45}
.sign-rows{display:grid;border-top:2px solid var(--ink)}
.sign-row{display:grid;grid-template-columns:100px 1fr;gap:20px;align-items:start;padding:18px 0;border-bottom:1px solid var(--rule)}
.sign-row svg{width:100px;height:100px}
.sign-row h3{font-size:22px}
.sign-row .local{font-style:italic;color:var(--grey);font-size:14.5px;margin-top:3px}
.sign-row p{font-size:16px;margin-top:6px}
.vs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.vs figure{margin:0;background:var(--tint);border-radius:12px;padding:14px;display:grid;justify-items:center;gap:8px;text-align:center}
.vs figcaption{font-size:13.5px;font-weight:800;color:var(--grey)}
.vs svg{width:80px;height:80px}
.cmp-row{display:grid;grid-template-columns:1fr 1.2fr;gap:20px;align-items:center;padding:18px 0;border-bottom:1px solid var(--rule)}
.cmp-row h3{font-size:20px}
.cmp-row p{margin-top:6px;font-size:16px;color:var(--grey)}
@media (max-width:600px){.cmp-row{grid-template-columns:1fr}}

/* Cameras: real photos, credited underneath */
.cam-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:40px 28px}
.cam{display:grid;align-content:start;gap:0}
.cam.no-photo{border-top:4px solid var(--ink);padding-top:6px}
.cam-text{padding:12px 0 0;display:grid;gap:7px;align-content:start}
.cam h3{font-size:24px}
.cam .local{font-style:italic;color:var(--grey);font-size:14.5px}
.cam p{font-size:15.5px;line-height:1.55}
.cam-head{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.photo{position:relative;margin:0}
.photo img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:4px;background:var(--tint)}
.photo figcaption{display:flex;flex-wrap:wrap;gap:0 8px;padding:7px 0 0;color:var(--grey);font-size:12.5px;line-height:1.35}
.photo-where{font-weight:700}
.photo-credit{color:var(--grey);text-decoration:none;font-weight:500}
.photo-credit:hover{color:var(--ink);text-decoration:underline}
.cam-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:40px 28px}
.cam-tiles.two{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.cam-tile{margin:0;display:grid;gap:8px;align-content:start}
.cam-tile > a{display:grid;gap:12px;color:var(--ink);text-decoration:none}
.cam-tile img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:4px;background:var(--tint)}
.cam-tile > a:hover b{color:var(--link);text-decoration:underline}
.cam-tile-text{display:grid;gap:5px;justify-items:start}
.cam-tile-text .where{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:800;color:var(--grey)}
.cam-tile-text b{font-size:25px;line-height:1.05;font-weight:850;letter-spacing:-.02em}
.cam-tile-text .sub{font-size:14.5px;color:var(--grey);font-weight:600}
.cam-tile figcaption{font-size:12px}
.cam-tile figcaption a{color:var(--faint);font-weight:500;text-decoration:none}
.cam-tile figcaption a:hover{color:var(--grey);text-decoration:underline}
.more-link{margin-top:26px;font-size:17px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.split-box{border-radius:16px;color:#fff;display:grid;gap:6px;align-content:start;box-shadow:inset 0 0 0 7px var(--split),inset 0 0 0 10px rgba(255,255,255,.95);padding:20px 22px;background:var(--split)}
.split-box.ok{--split:var(--green)}
.split-box.bad{--split:var(--red)}
.split-box.blue{--split:var(--blue)}
.split-box a{color:#fff}
.split-box .eyebrow{color:#fff;opacity:.9}
.split-box p:not(.eyebrow){font-weight:800;font-size:18px;line-height:1.3}
@media (max-width:520px){.split{grid-template-columns:1fr}}

/* Scenes */
.scene{display:grid;gap:12px;max-width:560px}
.scene h3{font-size:22px}
.scene-frame{border-radius:12px;overflow:hidden;background:var(--verge);aspect-ratio:1/1}
.scene-frame > svg{display:block;width:100%;height:auto}
.scene-status{display:flex;gap:11px;align-items:flex-start;font-weight:800;font-size:15.5px;min-height:46px}
.scene-status .dot{flex:none;width:12px;height:12px;border-radius:2px;background:var(--yellow);margin-top:6px;box-shadow:0 0 0 2px var(--ink)}
.scenes{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:36px 28px}
.verge{fill:var(--verge)}.asphalt{fill:var(--asphalt)}.asphalt-s{stroke:var(--asphalt)}.island{fill:var(--island)}
.water{fill:var(--water)}.rail{stroke:var(--rail);stroke-width:3}.track{stroke:var(--track-c);stroke-width:2.5}
.paint{stroke:var(--paint);stroke-width:2.5;fill:none}.paint-fill{fill:var(--paint)}.paint-yellow{stroke:var(--yellow);stroke-width:2.5;fill:none}
.dash{stroke-dasharray:12 10}.gw{stroke-width:4;stroke-dasharray:6 5}
.car-body{stroke:var(--car-edge);stroke-width:1.2}
.car-you{fill:var(--car-you)}.car-other{fill:var(--car-other)}.glass{fill:var(--car-glass)}
.walker{fill:var(--walker);stroke:#141414;stroke-width:1.5}
.bus-body{fill:var(--bus);stroke:#141414;stroke-width:1.2}.stop-arm{fill:#C8102E;stroke:#FFFFFF;stroke-width:1.2}
.hint{fill:none;stroke-width:3;stroke-dasharray:2 7;stroke-linecap:round;opacity:.75}
.hint-you{stroke:var(--car-you)}.hint-other{stroke:var(--car-other)}
.m-you{fill:var(--car-you)}.m-other{fill:var(--car-other)}
.ghost{fill:none;stroke:var(--bad);stroke-width:3;stroke-dasharray:4 6;stroke-linecap:round;opacity:.9}
.ghost-x-bg{fill:var(--bad)}.ghost-x{stroke:#FFFFFF;stroke-width:2.6;stroke-linecap:round}
.lbl-bg{fill:var(--surface);stroke:var(--line-2)}
.lbl-tx{fill:var(--fg);font-family:var(--font);font-weight:800;font-size:10.5px}
.scene-tx{fill:var(--fg);font-family:var(--font);font-weight:800;font-size:10.5px;opacity:.85}
.housing{fill:var(--housing)}.pole-s{stroke:var(--housing)}.lamp-off{fill:var(--lamp-off)}.lamp-r{fill:var(--lamp-red)}.lamp-a{fill:var(--lamp-amber)}.lamp-g{fill:var(--lamp-green)}

/* Product screens strip */
.screens-band{background:var(--tint);padding:48px 0 34px;margin-top:80px}
.screens-band .sec-head{border-top-color:var(--ink)}
.screens{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,1fr);gap:24px;overflow-x:auto;padding:4px 2px 18px;scrollbar-width:none;scroll-snap-type:x mandatory}
.screens::-webkit-scrollbar{display:none}
.screens figure{margin:0;display:grid;gap:14px;scroll-snap-align:start}
.screens .phone{max-width:240px;border-radius:40px;padding:9px;box-shadow:0 0 0 1.5px #2C3036,0 18px 36px rgba(16,18,21,.18)}
.screens .phone-screen{border-radius:32px}
.screens figcaption b{display:block;font-size:19px;font-weight:850;letter-spacing:-.015em;line-height:1.1}
.screens figcaption span{font-size:14.5px;color:var(--grey)}

/* The app pitch: a black sign with the white inset border */
.cta{position:relative;background:#101215;color:#fff;border-radius:16px;display:grid;grid-template-columns:1fr auto;gap:26px;align-items:center;box-shadow:inset 0 0 0 7px #101215,inset 0 0 0 10px rgba(255,255,255,.95);padding:34px 36px}
.cta h2{font-size:clamp(28px,3.6vw,42px)}
.cta p{color:rgba(255,255,255,.8);margin-top:10px;max-width:60ch}
.cta .price{font-weight:850;font-size:20px;color:#fff;opacity:1;letter-spacing:-.01em}
.cta .btn.yellow{color:#101215}
.cta .near{color:var(--yellow);font-weight:800;margin-top:8px}
@media (max-width:760px){.cta{grid-template-columns:1fr;padding:26px 24px}}
.cta-inline{border-radius:12px;padding:16px 18px;display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--tint);border-left:6px solid var(--blue)}
.cta-inline p{max-width:58ch;font-weight:700}
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:34px 28px}
.feature{display:grid;gap:10px;align-content:start;padding-top:16px;border-top:4px solid var(--ink)}
.feature .ico{width:46px;height:46px;border-radius:9px;display:grid;place-items:center;background:var(--blue);color:#fff;box-shadow:inset 0 0 0 3px var(--blue),inset 0 0 0 5px rgba(255,255,255,.9)}
.feature .ti{stroke-width:2.2}
.feature h3{font-size:22px}
.feature p{color:var(--grey);font-size:15.5px}
.pricing{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch}
@media (max-width:820px){.pricing{grid-template-columns:1fr}}
.plan{border-radius:16px;padding:32px 30px;display:grid;gap:16px;align-content:start;background:var(--paper);box-shadow:inset 0 0 0 2.5px var(--ink),inset 0 0 0 8px var(--paper),inset 0 0 0 10.5px var(--ink)}
.plan.paid{background:var(--yellow);color:#101215;box-shadow:inset 0 0 0 8px var(--yellow),inset 0 0 0 10.5px #101215}
.plan .eyebrow{color:inherit;font-size:16px}
.plan .amount{font-weight:850;font-size:clamp(60px,7vw,84px);line-height:.9;letter-spacing:-.04em}
.plan .amount small{font-size:16px;font-weight:700;letter-spacing:0;margin-left:8px;opacity:.75}
.plan .muted,.plan p[style]{color:inherit;opacity:.8}
.plan ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.plan li{display:grid;grid-template-columns:22px 1fr;gap:10px;font-size:16px;font-weight:600}
.plan li svg{width:20px;height:20px;margin-top:2px;fill:none;stroke:var(--green);stroke-width:3;stroke-linecap:square}
.plan.paid li svg{stroke:#101215}
.plan.paid .btn.yellow{background:#101215;color:var(--yellow)}

/* Hire car box */
.hire{border-radius:16px;padding:28px;display:grid;grid-template-columns:1.4fr 1fr;gap:24px;align-items:center;background:var(--paper);box-shadow:inset 0 0 0 2.5px var(--ink)}
.hire h2{font-size:clamp(26px,3.2vw,36px);margin-top:6px}
.hire ul{margin:12px 0 0;padding-left:20px;display:grid;gap:7px;font-size:16px}
.hire-go{display:grid;gap:10px;justify-items:start}
@media (max-width:720px){.hire{grid-template-columns:1fr;padding:22px}}

/* Email capture */
.capture{background:var(--tint);border-radius:16px;padding:28px;display:grid;gap:14px}
.capture form{display:flex;gap:10px;flex-wrap:wrap}
.capture input[type=email]{flex:1 1 260px;min-width:0;padding:14px 14px 12px;border-radius:9px;border:0;box-shadow:inset 0 0 0 2px var(--ink);background:var(--paper);color:var(--ink);font:inherit;font-weight:600}
.capture .hp{position:absolute;left:-9999px}
.capture .trip-date{display:grid;gap:4px;font-size:13px;font-weight:800;color:var(--grey);flex:0 1 190px}
.capture input[type=date]{padding:12px 12px 10px;border-radius:9px;border:0;box-shadow:inset 0 0 0 2px var(--ink);background:var(--paper);color:var(--ink);font:inherit;font-weight:600;min-height:50px}
.capture form{align-items:end}
.form-msg{font-size:15px;margin:0;font-weight:700}
.form-msg.bad{color:var(--red)}
.form-msg.ok{color:var(--green)}

/* Sticky buy bar */
.buybar{position:fixed;left:12px;right:12px;bottom:12px;z-index:40;max-width:640px;margin-inline:auto;background:#101215;color:#fff;border-radius:14px;padding:10px 10px 10px 18px;display:flex;gap:12px;align-items:center;justify-content:space-between;box-shadow:0 0 0 2px rgba(255,255,255,.12),0 18px 40px rgba(0,0,0,.35);transform:translateY(160%);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.buybar.on{transform:none}
.buybar p{font-size:14px;line-height:1.35;margin:0;color:rgba(255,255,255,.75)}
.buybar b{display:block;font-size:15.5px;color:#fff;font-weight:850}
.buybar .btn{background:var(--yellow);color:#101215}

/* FAQ */
.faq{border-top:2px solid var(--ink)}
.faq details{border-bottom:1px solid var(--rule);padding:16px 0}
.faq summary{font-weight:800;cursor:pointer;font-size:18px;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:26px;line-height:.8;font-weight:500}
.faq details[open] summary::after{content:"\2212"}
.faq p{margin-top:10px;color:color-mix(in srgb,var(--ink) 86%,var(--paper))}
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:40px;align-items:start}
.faq-grid .sec-head{margin-bottom:0}
@media (max-width:820px){.faq-grid{grid-template-columns:1fr;gap:0}}

/* Before you drive: a checklist with boxes to tick in your head */
.checklist{list-style:none;margin:0;padding:0;display:grid;border-top:2px solid var(--ink)}
.checklist li{display:grid;grid-template-columns:24px 1fr;gap:3px 14px;padding:15px 0 14px;border-bottom:1px solid var(--rule)}
.checklist li::before{content:"";grid-row:span 2;width:22px;height:22px;margin-top:1px;border-radius:5px;box-shadow:inset 0 0 0 2.5px var(--ink)}
.checklist b{font-weight:800;font-size:17.5px;line-height:1.3}
.checklist span{color:var(--grey);font-size:16px;line-height:1.5}

/* The licence picker on a country guide */
.licence-pick{display:grid;gap:14px;padding:20px;border-radius:14px;background:var(--tint)}
.licence-pick label{display:grid;gap:4px}
.licence-pick label b{font-size:20px;font-weight:850;letter-spacing:-.015em;line-height:1.2}
.licence-pick label span{color:var(--grey);font-size:15.5px;line-height:1.45}
.licence-pick .row{display:flex;gap:10px;flex-wrap:wrap}
.licence-pick select{flex:1 1 200px;min-width:0;padding:13px 12px 11px;border-radius:9px;border:0;box-shadow:inset 0 0 0 2px var(--ink);background:var(--paper);color:var(--ink);font:inherit;font-weight:700;min-height:50px}
.licence-pick .btn{min-height:50px}

/* Quiz */
.quiz{border-radius:16px;padding:26px;display:grid;gap:16px;max-width:680px;box-shadow:inset 0 0 0 2.5px var(--ink)}
.quiz-top{display:flex;justify-content:space-between;gap:12px;font-size:14px;font-weight:800;color:var(--grey);font-variant-numeric:tabular-nums}
.quiz-art{display:grid;place-items:center}
.quiz-art .scene-frame{width:100%;max-width:360px}
.quiz-q{font-weight:850;font-size:27px;line-height:1.15;letter-spacing:-.02em;text-align:left;text-wrap:balance}
.opts{display:grid;gap:9px}
.opt{border:0;box-shadow:inset 0 0 0 2px var(--ink);background:var(--paper);border-radius:9px;padding:14px 16px 12px;text-align:left;font:inherit;font-weight:700;cursor:pointer;color:var(--ink)}
.opt:hover:not(:disabled){background:var(--tint)}
.opt:disabled{cursor:default}
.opt.right{box-shadow:inset 0 0 0 3px var(--green);background:var(--ok-soft)}
.opt.wrong{box-shadow:inset 0 0 0 3px var(--red);background:var(--bad-soft)}
.big-score{font-weight:850;font-size:96px;line-height:.9;letter-spacing:-.04em}
.quiz-home{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:15px;font-weight:800}
.quiz-home select{padding:9px 12px 7px;border-radius:9px;border:0;box-shadow:inset 0 0 0 2px var(--ink);background:var(--paper);color:var(--ink);font:inherit;font-weight:700}

/* Consent */
.consent{position:fixed;left:12px;right:12px;bottom:12px;z-index:60;max-width:640px;margin-inline:auto;background:var(--paper);border-radius:14px;padding:18px;box-shadow:inset 0 0 0 2.5px var(--ink),0 18px 40px rgba(0,0,0,.25);display:grid;gap:12px;font-size:15px;font-weight:600}

/* Photo credits */
.credits{list-style:none;margin:20px 0 0;padding:0;display:grid;border-top:2px solid var(--ink)}
.credit-row{display:grid;grid-template-columns:160px 1fr;gap:18px;align-items:center;padding:14px 0;border-bottom:1px solid var(--rule)}
.credit-row img{width:160px;height:120px;object-fit:cover;border-radius:4px;display:block}
.credit-row p{margin:0}
@media (max-width:520px){.credit-row{grid-template-columns:110px 1fr}.credit-row img{width:110px;height:82px}}

@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}.buybar,.btn{transition:none}}