@font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/Archivo-Regular.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;
  src:url(/fonts/Archivo-Medium.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;
  src:url(/fonts/Archivo-SemiBold.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;
  src:url(/fonts/Archivo-Bold.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/IBMPlexMono-Regular.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url(/fonts/IBMPlexMono-Medium.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;
  src:url(/fonts/IBMPlexMono-SemiBold.woff2) format('woff2')}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/SourceSerif4-Regular.woff2) format('woff2')}
@font-face{font-family:'Source Serif 4';font-style:italic;font-weight:400;font-display:swap;
  src:url(/fonts/SourceSerif4-Italic.woff2) format('woff2')}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:600;font-display:swap;
  src:url(/fonts/SourceSerif4-SemiBold.woff2) format('woff2')}

:root{
  --tarmac:#0D1214;--tarmac-2:#151C1F;--paper:#F7F5F0;--paper-2:#E8E4DB;--card:#FFFFFF;
  --rule:#0D1214;--hair:#DDD8CE;--hair-d:#2C3538;--bord-d:#3A4448;--bord-d2:#5A6468;
  --ink-h:#14191B;--ink:#33383A;--ink-m:#6B6455;--ink-d:#C3C9C9;--ink-dm:#9BA5A8;--rev:#F7F5F0;
  --open:#0B5C42;--open-d:#4FA37E;--shut:#C0281B;
  --ui:Archivo,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --serif:"Source Serif 4",Georgia,serif;
}
:root{--a-fill:#1E4B5A;--a-on-fill:#F7F5F1;--a-on-dark:#8FC6D4;--a-on-paper:#16414E;--a-on-fill-muted:#CBDDE2}
:root[data-accent="amber"]{--a-fill:#FF6A13;--a-on-fill:#0D1215;--a-on-dark:#FF6A14;--a-on-paper:#9C3C05;--a-on-fill-muted:#2B1A0C}
:root[data-accent="cyan"]{--a-fill:#2FB8E8;--a-on-fill:#0D1217;--a-on-dark:#2FB8E9;--a-on-paper:#0A5A75;--a-on-fill-muted:#06283A}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--ui);font-size:16px;
  line-height:1.5;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
a{color:var(--a-on-paper);text-decoration:none}
a:hover{color:var(--ink-h)}
h1,h2,h3,p{margin:0}
h1{font:700 clamp(38px,5.2vw,62px)/1.02 var(--ui);letter-spacing:-.028em;color:var(--ink-h);text-wrap:pretty}
h2{font:700 clamp(28px,3.6vw,40px)/1.06 var(--ui);letter-spacing:-.024em;color:var(--ink-h);text-wrap:pretty}
h3{font:600 20px/1.25 var(--ui);letter-spacing:-.016em;color:var(--ink-h)}
.serif{font-family:var(--serif);font-size:18px;line-height:1.6;color:var(--ink)}
.serif.lg{font-size:19px}
.serif.sm{font-size:15.5px;line-height:1.55}
.mono{font-family:var(--mono)}
.lb{font:600 11px/1.7 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-m);margin:0}
.micro{font:400 11px/1.7 var(--mono);color:var(--ink-m)}
.wrap{max-width:1192px;margin:0 auto}
:focus-visible{outline:2px solid var(--a-fill);outline-offset:2px}
/* The teal ring measures 1.0 to 2.1:1 on the dark and teal grounds these
   components sit on (11 Oct 2026 audit), so it takes the light accent there. */
.sticky a:focus-visible,.crumb a:focus-visible,.arrives a:focus-visible,.bkpick a:focus-visible,.on-dark a:focus-visible,
.sec.fill a:focus-visible{outline-color:var(--a-on-dark)}
/* A link inside a sentence differs from its sentence by colour alone, at 1.25
   to 1.5:1; the underline is what says it is a link. */
.micro a:not(.btn),.doc a,.crumb a{text-decoration:underline;text-underline-offset:.15em}
summary::-webkit-details-marker{display:none}
a.en::after{content:"EN";font:600 8px/1 var(--mono);margin-left:4px;color:var(--a-on-paper);vertical-align:super;letter-spacing:.06em}
.sec.tarmac a.en::after,.sec.raised a.en::after,.ft a.en::after,.sec.fill a.en::after{color:var(--a-on-dark)}

/* ---- grounds. A section is a full-bleed ground with the 1180 grid inside. */
.sec{padding:52px 40px;border-bottom:2px solid var(--rule)}
.sec.paper{background:var(--paper)}
.sec.sunk{background:var(--paper-2)}
.sec.tarmac{background:var(--tarmac);color:var(--ink-d)}
.sec.tarmac h1,.sec.tarmac h2,.sec.tarmac h3{color:var(--rev)}
.sec.tarmac .serif{color:var(--ink-d)}
.sec.tarmac .lb{color:var(--ink-dm)}
.sec.tarmac .micro{color:var(--ink-dm)}
.sec.raised{background:var(--tarmac-2);color:var(--ink-d)}
.sec.raised h2,.sec.raised h3{color:var(--rev)}
.sec.raised .serif{color:var(--ink-d)}
.sec.raised .lb,.sec.raised .micro{color:var(--ink-dm)}
.sec.fill{background:var(--a-fill);color:var(--a-on-fill-muted);border-bottom:0}
.sec.fill h2,.sec.fill .lb{color:var(--a-on-fill)}
.sec.fill .serif,.sec.fill .micro{color:var(--a-on-fill-muted)}
/* A card surface keeps paper ink inside a tarmac section (finding 9b). */
.sec.tarmac .mailcard .serif,.sec.raised .mailcard .serif,.sec.tarmac .file .serif,.sec.raised .file .serif,
.sec.tarmac .p01 .serif,.sec.raised .p01 .serif,.sec.tarmac .cardp .serif,.sec.raised .cardp .serif{color:var(--ink)}
.sec.tarmac .mailcard .micro,.sec.raised .mailcard .micro,.sec.tarmac .file .micro,.sec.raised .file .micro,
.sec.tarmac .cardp .micro,.sec.raised .cardp .micro{color:var(--ink-m)}
.sec.tarmac .mailcard .lb,.sec.raised .mailcard .lb,.sec.tarmac .mailcard label,.sec.raised .mailcard label,
.sec.tarmac .cardp .lb,.sec.raised .cardp .lb{color:var(--ink-m)}
.stack{display:flex;flex-direction:column;gap:18px}
.g2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start}
.g-hero{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:52px;align-items:start}
.g-hero .livecard,.g-hero .livecard+.micro{max-width:400px}
.g-shelf{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:52px;align-items:end}
.g-pack{display:grid;grid-template-columns:minmax(0,1fr) 390px;gap:52px;align-items:start}
.g-400{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:48px;align-items:start}
.g-430{display:grid;grid-template-columns:minmax(0,1fr) 430px;gap:48px;align-items:start}
.g-380{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:48px;align-items:start}
.g-115{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:48px;align-items:start}
.g-close{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:52px;align-items:end}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.g-files{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:48px;align-items:start}
.g-files .g3.files{grid-template-columns:repeat(3,minmax(0,1fr))}
.plate.page{border-color:var(--rule)}
.plate.page .bar{background:var(--tarmac)}
.plate.page .cap{border-top:2px solid var(--rule)}
.gg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px}
.g-offer{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,.86fr);gap:22px;align-items:stretch}
.kick{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.tag{font:600 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;padding:5px 9px;
  background:var(--tarmac);color:var(--rev)}
.tag.a{background:var(--a-fill);color:var(--a-on-fill);font-weight:700}
.tag.ghost{background:transparent;color:var(--ink-d);border:1px dashed var(--bord-d2);
  letter-spacing:.12em;padding:4px 8px}
.on-dark{color:var(--a-on-dark)}
.on-paper{color:var(--a-on-paper)}

/* ---- actions. A fill button carries onFill ink; hover is accent-agnostic. */
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 20px;font:700 16px/1.2 var(--ui);
  letter-spacing:-.01em;text-decoration:none;border:2px solid var(--a-fill);background:var(--a-fill);
  color:var(--a-on-fill);border-radius:0;cursor:pointer;min-height:45px}
.btn:hover{filter:brightness(1.1);color:var(--a-on-fill)}
.btn.two{flex-direction:column;align-items:flex-start;gap:2px;padding:14px 24px}
.btn.two .l1{font-size:18px;font-weight:700}
.btn.two .l2{font:600 11px/1.4 var(--mono);letter-spacing:.04em;text-transform:uppercase}
.btn.ghost{background:transparent;border-color:var(--bord-d2);color:var(--rev);font-weight:600}
.btn.ghost:hover{border-color:var(--rev);filter:none;color:var(--rev)}
.btn.ghost-paper{background:transparent;border-color:var(--tarmac);color:var(--ink-h);font-weight:600}
.btn.ghost-paper:hover{background:var(--tarmac);color:var(--rev);filter:none}
.btn.ghost-fill{background:transparent;border-color:var(--a-on-fill);color:var(--a-on-fill);font-weight:600}
.btn.ghost-fill:hover{background:rgba(13,18,20,.1);filter:none;color:var(--a-on-fill)}
.btn.dark{background:var(--tarmac);border-color:var(--tarmac);color:var(--a-on-dark)}
.btn.dark:hover{filter:none;background:#000;border-color:#000;color:var(--a-on-dark)}
.btn.sm{font-size:14px;font-weight:600;padding:10px 18px}
.btn.block{display:flex;width:100%;text-align:left}
.btn[aria-disabled=true]{opacity:.7;cursor:default}
/* .btn sets display, which beats the hidden attribute's own rule. */
.btn[hidden]{display:none}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px;align-items:stretch}
.reassure{font:400 12px/1.85 var(--mono);color:var(--ink-dm)}
/* What arrives, in three lines, directly under the headline: the one thing
   a first-time reader has to understand before a price means anything
   (18 Sep 2026). It replaced a single mono run of seven items separated by
   middots, which read as chrome rather than as a list of what you get. */
/* The reason somebody buys, in one line, under the brand headline. The page
   was excellent at why the product is credible and silent on why you would
   want it (18 Sep 2026). */
.outcome{font:400 21px/1.45 var(--serif);color:var(--a-on-dark);max-width:40ch;margin:-4px 0 2px}
.gets{list-style:none;margin:-4px 0 0;padding:0;display:flex;flex-direction:column;gap:7px;max-width:46ch}
.gets li{position:relative;padding-left:26px;font:500 15px/1.45 var(--ui);color:var(--rev)}
.gets li::before{content:"";position:absolute;left:0;top:.55em;width:13px;height:2px;background:var(--a-on-dark)}
/* The free sample as a section (18 Sep 2026): the five roads by name, so a
   reader can see they are real roads and not a teaser. */
.fivelist{border:2px solid var(--rule);background:var(--card)}
.fivelist .h{padding:10px 16px;background:var(--tarmac);font:600 10px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--a-on-dark)}
.fivelist ul{list-style:none;margin:0;padding:0}
.fivelist li{display:flex;align-items:baseline;gap:12px;padding:10px 16px;border-bottom:1px solid var(--hair);font:600 15px/1.3 var(--ui);color:var(--ink-h)}
.fivelist li:last-child{border-bottom:0}
.fivelist li .n{font:600 11px/1.4 var(--mono);color:var(--a-on-paper);flex:none}
.fivelist li .k{margin-left:auto;font:400 12px/1.4 var(--mono);color:var(--ink-m);flex:none}
/* The bodies the research reads, beside the limits it states. */
.evstat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--bord);margin-top:4px}
.evstat .c{padding:14px 16px;border-right:1px solid var(--hair);display:flex;flex-direction:column;gap:4px}
.evstat .c:last-child{border-right:0}
.evstat .v{font:700 24px/1.1 var(--ui);letter-spacing:-.02em;color:var(--ink-h)}
.evstat .l{font:600 10px/1.45 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--ink-m)}
.sec.fill .reassure{color:var(--a-on-fill-muted)}
.tlink{font:600 15.5px/1.3 var(--ui);color:var(--a-on-paper);border-bottom:1px solid var(--hair);
  padding-bottom:2px;align-self:flex-start}
.tlink:hover{color:var(--ink-h)}

/* ---- season bar, header, phone nav, sticky bar, breadcrumb ------------- */
.season{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:10px 40px;
  background:var(--a-fill);color:var(--a-on-fill);font:600 11px/1.5 var(--mono);letter-spacing:.13em;
  text-transform:uppercase;flex-wrap:wrap}
.season .l{display:flex;align-items:center;gap:10px}
.season .l::before{content:"";width:8px;height:8px;background:currentColor;display:block;flex:none}
.season a{color:inherit;border-bottom:1px solid currentColor}
.hd{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:16px 40px;
  background:var(--tarmac);flex-wrap:wrap}
.hd .l{display:flex;align-items:center;gap:40px;flex-wrap:wrap}
.hd nav{display:flex;gap:26px;font:600 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;flex-wrap:wrap}
.hd nav a{color:var(--ink-dm);padding-bottom:2px;border-bottom:2px solid transparent}
.hd nav a:hover{color:var(--rev)}
.hd nav a.on{color:var(--rev);border-bottom-color:var(--a-on-dark)}
.hd nav .dd{position:relative}
.hd nav .dd .menu{display:none;position:absolute;top:100%;left:-16px;padding-top:14px;z-index:60}
.hd nav .dd:hover .menu,.hd nav .dd:focus-within .menu{display:block}
.hd nav .menu .in{background:var(--tarmac-2);border:1px solid var(--bord-d);min-width:300px;padding:6px 0;
  box-shadow:0 12px 32px rgba(0,0,0,.35)}
.hd nav .menu a{display:flex;justify-content:space-between;gap:18px;padding:10px 16px;border:0;
  font:600 14px/1.3 var(--ui);letter-spacing:0;text-transform:none;color:var(--rev)}
.hd nav .menu a span{font:400 11px/1.6 var(--mono);color:var(--ink-dm);white-space:nowrap}
.hd nav .menu a:hover{background:var(--tarmac)}
.hd nav .menu a.all{border-top:1px solid var(--bord-d);margin-top:6px;padding-top:12px;color:var(--a-on-dark)}
.hd .r{display:flex;align-items:center;gap:16px}
.langs{display:flex;border:1px solid var(--bord-d);font:600 11px/1 var(--mono);letter-spacing:.12em}
.langs a{padding:7px 10px;color:var(--ink-dm)}
.langs a.on{background:var(--paper);color:var(--tarmac)}
.brand{display:block;text-decoration:none;color:var(--rev)}
.wm{display:flex;align-items:flex-end;gap:10px}.wm-stack{display:flex;flex-direction:column;align-items:flex-start;gap:3px}.wm-label{font:600 9.5px/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--ink-dm)}.wm-word{font:700 34px/1 var(--ui);letter-spacing:-.022em;color:var(--rev)}.wm-bar{width:3px;background:var(--a-on-dark);align-self:stretch;margin:6px 0 5px}.wm-suffix{font:600 9.5px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dm);padding-bottom:4px}
.brand .wm-word{color:var(--rev)}
.brand .wm-label,.brand .wm-suffix{color:var(--ink-dm)}
.brand .wm-bar{background:var(--a-on-dark)}
.tabs{display:none;background:var(--tarmac-2);border-bottom:1px solid var(--hair-d)}
.tabs a{flex:1;text-align:center;padding:13px 4px;font:600 10px/1 var(--mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-dm);border-bottom:2px solid transparent}
.tabs a.on{color:var(--rev);border-bottom-color:var(--a-on-dark)}
.sticky{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:0 40px;height:56px;background:var(--tarmac);border-top:1px solid var(--hair-d);border-bottom:2px solid var(--rule)}
.sticky .who{display:flex;align-items:baseline;gap:14px;min-width:0;flex:1 1 auto}
.sticky .who b{font:700 15px/1 var(--ui);letter-spacing:-.012em;color:var(--rev);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sticky .who span{font:400 11px/1.6 var(--mono);color:var(--ink-dm);white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.sticky .act{display:flex;align-items:center;gap:14px;flex:none}
.sticky .act .p{font:700 17px/1 var(--ui);letter-spacing:-.02em;color:var(--a-on-dark)}
.crumb{padding:14px 40px;background:var(--tarmac);border-bottom:1px solid var(--hair-d);
  font:600 11px/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dm)}
.crumb a{color:var(--ink-dm)}
.crumb b{color:var(--rev);font-weight:600}

/* ---- the hero's plate, the proof strip --------------------------------- */
.plate{display:flex;flex-direction:column;border:2px solid var(--a-on-dark)}
.plate .bar{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:12px 16px;
  background:var(--a-fill);color:var(--a-on-fill);font:600 11px/1.5 var(--mono);letter-spacing:.14em;
  text-transform:uppercase}
.plate img{display:block;width:100%;height:auto;background:var(--paper)}
.plate .cap{padding:12px 16px;background:var(--tarmac-2);font:400 11px/1.7 var(--mono);color:var(--ink-dm)}
.plate.pk .cap{border-top:2px solid var(--a-on-dark)}
.strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--tarmac-2);border-bottom:2px solid var(--rule)}
.strip .c{padding:22px 26px;border-right:1px solid var(--hair-d);display:flex;flex-direction:column;gap:6px}
.strip .c:last-child{border-right:0}
.strip .v{font:700 30px/1.1 var(--ui);letter-spacing:-.024em;color:var(--a-on-dark)}
.strip .l{font:600 10.5px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dm)}
.counter{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--hair-d)}
.counter .c{padding:18px 20px;border-right:1px solid var(--hair-d);display:flex;flex-direction:column;gap:5px}
.counter .c:last-child{border-right:0}
.counter .v{font:700 27px/1.1 var(--ui);letter-spacing:-.022em;color:var(--a-on-dark)}
.counter .l{font:600 10.5px/1.5 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-dm)}
.audit{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--hair);background:var(--card);margin-top:6px}
.audit .c{padding:16px 18px;border-right:1px solid var(--hair);display:flex;flex-direction:column;gap:4px}
.audit .c:last-child{border-right:0}
.audit .l{font:600 10px/1.5 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-m)}
.audit .v{font:600 20px/1.2 var(--ui);color:var(--ink-h)}

/* ---- page 01 as it prints ----------------------------------------------- */
.p01{border:2px solid var(--rule);background:var(--card)}
.p01 .top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px;border-bottom:1px solid var(--hair)}
.p01 .state{display:flex;align-items:center;gap:7px;font:600 11px/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.p01 .state::before{content:"";width:8px;height:8px;background:currentColor;display:block}
.p01 .state.shut{color:var(--shut)}
.p01 .state.open{color:var(--open)}
.p01 .nm{font:700 25px/1.15 var(--ui);letter-spacing:-.02em;color:var(--ink-h)}
.p01 .sub{font:400 11.5px/1.6 var(--mono);color:var(--ink-m)}
.p01 .band{margin:14px 18px 0;padding:11px 14px;background:var(--shut);color:var(--rev);
  font:600 11.5px/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase}
/* A status, not a button: green for open, never the action teal. */
.p01 .band.open{background:var(--open);color:var(--card)}
/* The card is white inside a tarmac section, and the section's greys are
   1.6 to 2.2:1 on it (11 Oct 2026). */
.sec.tarmac .p01 .lb,.sec.raised .p01 .lb{color:var(--ink-m)}
.p01 .state{color:var(--ink-m)}
.p01 .rows{padding:16px 18px 0}
.p01 .row{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-top:1px solid var(--hair);
  font:400 12px/1.5 var(--mono);color:var(--ink)}
.p01 .row:last-child{border-bottom:1px solid var(--hair)}
.p01 .row span:first-child{color:var(--ink-m)}
.p01 .go{margin:16px 18px 0;padding:12px 14px;border:2px solid var(--open);font:600 15px/1.35 var(--ui);color:var(--open)}
/* A source cell holds bare paths with no break point in them; Kaunertal's
   pushed the whole page to 394 px on a 360 px phone. */
.p01 .src{padding:16px 18px 20px;font:400 10.5px/1.7 var(--mono);color:var(--ink-m);overflow-wrap:anywhere}

/* ---- named files, delivery steps ---------------------------------------- */
.file{border:2px solid var(--rule);background:var(--card);display:flex;flex-direction:column}
.file .h{padding:12px 16px;background:var(--tarmac);font:600 13px/1.5 var(--mono);color:var(--a-on-dark)}
.file .b{padding:20px 18px;display:flex;flex-direction:column;gap:9px}
.file .t{font:600 18px/1.25 var(--ui);color:var(--ink-h)}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:22px;border:2px solid var(--rule);background:var(--card)}
.steps .s{display:flex;gap:14px;padding:18px 20px;border-right:1px solid var(--hair);font:500 15px/1.45 var(--ui);color:var(--ink-h)}
.steps .s:last-child{border-right:0}
.steps .s .i{font:700 12px/1.7 var(--mono);color:var(--a-on-paper)}

/* ---- the artefact: price panel, the live card, the photograph ----------- */
.pricebox{margin-top:8px;border:2px solid var(--rule);background:var(--card)}
.pricebox .top{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 22px;border-bottom:1px solid var(--hair);flex-wrap:wrap}
.pricebox .big{font:700 32px/1.1 var(--ui);letter-spacing:-.024em;color:var(--ink-h)}
.pricebox .ticks{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 22px;padding:16px 22px;font:400 11.5px/1.6 var(--mono);color:var(--ink)}
.livecard{border:2px solid var(--rule);background:var(--tarmac)}
.livecard .h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;
  font:600 11px/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--rev)}
.livecard .h .a{color:var(--a-on-dark)}
.livecard iframe{display:block;width:100%;border:0;background:var(--paper)}
.photo{border:2px solid var(--rule);background:var(--card)}
.photo .h{padding:12px 16px;background:var(--tarmac);font:600 11.5px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--a-on-dark)}
.photo img{display:block;width:100%;height:auto}
.photo .ph{min-height:380px;text-transform:none;letter-spacing:0;display:flex;align-items:center;justify-content:center;text-align:center;margin:12px;padding:24px;
  border:1px dashed var(--bord-d2);background:var(--paper-2);font:400 12px/1.8 var(--mono);color:var(--ink-m);max-width:none}
.photo .cap{padding:12px 16px;font:400 11px/1.7 var(--mono);color:var(--ink-m)}
.cardp{border:2px solid var(--rule);background:var(--card);padding:18px 20px}
.cmp{border:2px solid var(--rule);background:var(--card)}
.cmp .h,.cmp .r{display:grid;grid-template-columns:minmax(0,1fr) 74px 74px;gap:0 10px;padding:10px 18px;align-items:baseline}
.cmp .h{background:var(--tarmac);font:600 10px/1.5 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-dm)}
.cmp .h span:not(:first-child),.cmp .r span:not(:first-child){text-align:center}
.cmp .r{border-bottom:1px solid var(--hair);font:400 12.5px/1.5 var(--mono);color:var(--ink)}
.cmp .r .y{color:var(--a-on-paper);font-weight:700}
.cmp .r .n{color:var(--ink-dm)}
.cmp .f{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;font:600 14px/1.4 var(--ui);color:var(--ink-h)}

/* ---- the offer: two book cards, the mapped panel, the bundle band -------- */
.book{border:2px solid var(--a-on-dark);background:var(--tarmac);display:flex;flex-direction:column}
.book .h{padding:10px 20px;background:var(--a-fill);color:var(--a-on-fill);font:700 11px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.book .h.soon{background:var(--tarmac-2);color:var(--ink-dm);font-weight:600}
.book .t{padding:20px 20px 0;display:flex;flex-direction:column;gap:8px}
.book .t .n{font:700 24px/1.14 var(--ui);letter-spacing:-.022em;color:var(--rev)}
.book .t .r{font:400 11px/1.6 var(--mono);color:var(--ink-dm)}
.book .rows{padding:16px 20px 0}
.book .row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--hair-d);font:400 11.5px/1.5 var(--mono);color:var(--ink-d)}
.book .row:last-child{border-bottom:1px solid var(--hair-d)}
.book .row span:first-child{color:var(--ink-dm)}
.book .row span:last-child{color:var(--a-on-dark)}
.book .row.near span:last-child{color:var(--rev);font-weight:600}
.frombox{border:1px solid var(--bord-d);background:var(--tarmac);padding:18px 20px;margin:0 0 22px;display:grid;grid-template-columns:150px minmax(0,1fr);gap:8px 22px;align-items:center}
.frombox .lb{color:var(--ink-dm)}
.frombox .r{display:flex;gap:10px;flex-wrap:wrap}
.frombox input{flex:1 1 220px;padding:12px 14px;background:var(--paper);border:1px solid var(--tarmac);font:500 15px/1.3 var(--ui);color:var(--ink-h)}
.frombox .micro{grid-column:1 / -1;margin:0;max-width:70ch}
.book .why{margin:16px 20px 0;font:400 15.5px/1.55 var(--serif);color:var(--ink-d)}
.book .f{padding:18px 20px 20px;margin-top:auto;display:flex;flex-direction:column;gap:12px}
.book .p{font:700 30px/1.1 var(--ui);letter-spacing:-.024em;color:var(--a-on-dark)}
.mapped{border:1px solid var(--bord-d);background:var(--tarmac);display:flex;flex-direction:column}
.mapped .h{padding:10px 20px;border-bottom:1px solid var(--hair-d);font:600 11px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dm)}
.mapped .b{padding:20px;display:flex;flex-direction:column;gap:14px;height:100%}
.mapped .b .btn{margin-top:auto;align-self:flex-start}
.mapped .t{font:600 20px/1.25 var(--ui);letter-spacing:-.016em;color:var(--rev)}
.mapped .serif{font-size:15px;color:var(--ink-d)}
.bundle{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,280px);gap:32px;align-items:center;margin-top:22px;padding:24px 26px;
  background:var(--tarmac-2);border:2px solid var(--a-on-dark)}
.bundle .head{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px}
.bundle .t{font:700 25px/1.15 var(--ui);letter-spacing:-.022em;color:var(--rev)}
.bundle .serif{font-size:17px;color:var(--ink-d);max-width:68ch}
.bundle .r{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.bundle .p{display:flex;align-items:baseline;gap:10px}
.bundle .p b{font:700 42px/1 var(--ui);letter-spacing:-.028em;color:var(--a-on-dark)}
.bundle .p s{font:400 14px/1 var(--mono);color:var(--ink-dm)}
.bundle .save{font:600 11px/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--a-on-dark)}
.bundle .micro{color:var(--ink-dm)}

/* ---- disclosures, the questions ----------------------------------------- */
.disc{border-top:2px solid var(--rule)}
.disc details{border-bottom:1px solid var(--hair)}
.disc summary{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding:18px 0;cursor:pointer;list-style:none}
.disc summary .q{display:flex;gap:16px}
.disc summary .i{font:600 11px/1.7 var(--mono);color:var(--ink-m);padding-top:4px}
.disc summary .c{font:600 19px/1.3 var(--ui);letter-spacing:-.012em;color:var(--ink-h)}
.disc summary .m{font:400 16px/1.7 var(--mono);color:var(--a-on-paper)}
.disc details[open] summary .m::before{content:"–"}
.disc details:not([open]) summary .m::before{content:"+"}
.disc p{margin:0 0 20px 27px;font:400 16px/1.6 var(--serif);color:var(--ink)}
.faq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 48px}

/* ---- the ballot, the email card ------------------------------------------ */
.ballot{display:none;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:4px}
.has-js .ballot{display:grid}
.has-js .nojs{display:none}
.ballot label{display:flex;align-items:center;gap:11px;padding:15px;background:var(--paper);border:1px solid var(--hair);
  cursor:pointer;font:500 14.5px/1.3 var(--ui);color:var(--ink-h)}
.ballot label:hover{border-color:var(--tarmac)}
.ballot input{width:15px;height:15px;margin:0;accent-color:var(--tarmac);flex:none}
.ballot label:has(input:checked){background:var(--tarmac);color:var(--rev)}
.ballot label:focus-within{outline:2px solid var(--a-fill);outline-offset:2px}
.mailcard{border:2px solid var(--rule);background:var(--card)}
.mailcard .h{padding:14px 20px;background:var(--tarmac);font:600 11px/1.5 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--a-on-dark)}
.mailcard .b{padding:22px 20px;display:flex;flex-direction:column;gap:14px}
.mailcard .serif{font-size:16px}
.mailcard label{font:600 10.5px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-m)}
.mailcard input[type=email]{width:100%;padding:14px;background:var(--paper);border:1px solid var(--tarmac);
  font:400 13px/1.4 var(--mono);color:var(--ink-h);border-radius:0;min-height:48px}
.mailcard form{display:flex;flex-direction:column;gap:14px}
.mailcard .fld{display:flex;flex-direction:column;gap:7px}
.sec.tarmac .mailcard{border-color:var(--bord-d)}

/* ---- tables: coverage, the index, the seven things ----------------------- */
.tbl{border:2px solid var(--rule);background:var(--card)}
.tbl .h,.tbl .r{display:grid;gap:0 14px;padding:13px 20px;align-items:baseline}
.tbl .h{background:var(--tarmac);font:600 10px/1.5 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-dm);padding:12px 20px}
.tbl .r{border-bottom:1px solid var(--hair)}
.tbl .r:last-of-type{border-bottom:0}
.tbl .r.end{border-bottom:2px solid var(--rule)}
.tbl .nm{font:600 16px/1.3 var(--ui);color:var(--ink-h)}
.tbl .num{font:600 15px/1.4 var(--mono);text-align:right;color:var(--ink-h)}
.tbl .num.good{color:var(--open)}
.tbl .num.none{color:var(--shut)}
.tbl .m{font:400 12px/1.5 var(--mono);color:var(--ink-m)}
.tbl .m.r{text-align:right;padding:0;border:0;display:block}
.tbl .foot{padding:14px 20px;background:var(--paper-2);border-top:1px solid var(--hair);font:400 10.5px/1.7 var(--mono);color:var(--ink-m)}
.tbl .cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;padding:20px}
.tbl .gh{padding:14px 20px 6px;font:600 11px/1.7 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-m);border-bottom:1px solid var(--hair)}
.cov .h,.cov .r{grid-template-columns:minmax(0,1fr) 120px 130px}
/* The state column holds "Shut in winter" and "Mit Wintersperre" on one
   line at 12.5 px (12 Oct 2026); at 110 px it wrapped on 36 of 44 rows. */
.idx .h,.idx .r{grid-template-columns:54px minmax(0,1fr) 130px 66px 50px 124px}
/* The roads index withholds the score (decision 57), so its rows have five
   cells. This lived in v2pages.py as an append to CSS, which the V3 sheet is
   composed before, so on V3 the index ran five cells in six tracks. */
.idx.five .h,.idx.five .r{grid-template-columns:54px minmax(0,1fr) 160px 76px 124px}
/* The dot and the name as two columns, so a name that wraps does not leave
   the dot alone on the line above it. Desktop only: the phone row has its
   own grid and a second line under the name. */
@media(min-width:861px){
  .idx .r > span:has(> .dot){display:grid;grid-template-columns:7px minmax(0,1fr);column-gap:10px;align-items:baseline}
  .idx .r > span > .dot{margin:0}
  .idx .r .st{font-size:12.5px}
}
/* Between the phone layout and a wide window the index sat in the narrow
   column of a two-column page: its fixed tracks add up to about 530 px, the
   name track went to 0 and names printed over the region (1024 px, an iPad
   in landscape; 1093 px, a 1366 laptop at 125 %). There the page stacks and
   the table takes the width (12 Oct 2026). */
@media(min-width:861px) and (max-width:1239px){
  .g-430:has(.idx),.g-400:has(.idx.five){grid-template-columns:minmax(0,1fr)}
  .g-430:has(.idx) > .plate{max-width:560px}
}
.idx .dot{display:inline-block;width:7px;height:7px;margin-right:10px;vertical-align:middle}
.idx .dot.open{background:var(--open)}
.idx .dot.shut{background:var(--shut)}
.idx .right{text-align:right}
.idx .sub{display:none}
.jump{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0 0 16px;font:600 11px/1.7 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.jump a{color:var(--ink-m);border-bottom:1px solid var(--hair)}
.jump a:hover{color:var(--ink-h)}
.seven{border-top:2px solid var(--rule)}
.seven .r{display:grid;grid-template-columns:34px 190px minmax(0,1fr);gap:0 18px;padding:13px 0;border-bottom:1px solid var(--hair);align-items:baseline}
.seven .r:last-child{border-bottom:2px solid var(--rule)}
.seven .i{font:600 11px/1.7 var(--mono);color:var(--a-on-paper)}
.seven .t{font:600 16px/1.3 var(--ui);color:var(--ink-h)}
.seven .d{font:400 15.5px/1.5 var(--serif);color:var(--ink)}

/* ---- the book switcher on the roads page (radio + :has, no script) ------- */
.bkpick{display:block;position:relative;border:2px solid var(--rule);background:var(--tarmac);padding:20px 22px;cursor:pointer}
.bkpick input{position:absolute;opacity:0;width:0;height:0}
/* The price stays top right whatever the meta line's length; with wrap on,
   four cards set it there and three under the meta. */
.bkpick .top{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:nowrap}
.bkpick .top>div{min-width:0}
.bkpick .top .p{white-space:nowrap}
.bkpick .k{font:600 11px/1.7 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dm)}
.bkpick .n{font:700 24px/1.15 var(--ui);letter-spacing:-.022em;color:var(--rev);margin-top:8px}
.bkpick .mt{font:400 11.5px/1.7 var(--mono);color:var(--ink-dm);margin-top:4px}
.bkpick .p{font:700 26px/1 var(--ui);letter-spacing:-.024em;color:var(--a-on-dark)}
.bkpick .acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.bkpick:not(:has(input:checked)){border-color:var(--bord-d);background:var(--tarmac-2)}
.bkpick:not(:has(input:checked)) .p{color:var(--ink-dm)}
.bkpick:not(:has(input:checked)) .k::before{content:attr(data-off)}
.bkpick:has(input:checked) .k::before{content:attr(data-on)}
.bkpick:focus-within{outline:2px solid var(--a-fill);outline-offset:2px}
.bk{display:none}
/* The rules that show the picked book's list and bar are written by
   v2pages.roads() for every radio it draws. Three were typed here, and from
   the fourth book on, picking it showed nothing (11 Oct 2026). */

/* ---- the close: what arrives -------------------------------------------- */
.arrives{border:2px solid var(--tarmac);background:var(--tarmac);padding:22px}
.arrives .h{font:600 11px/1.5 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--a-on-dark);margin-bottom:14px}
.arrives .row{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-top:1px solid var(--hair-d);font:400 12.5px/1.5 var(--mono);color:var(--rev)}
.arrives .row:last-of-type{border-bottom:1px solid var(--hair-d)}
.arrives .row span:last-child{color:var(--ink-dm)}
.arrives .btn{margin-top:10px}
.arrives .btn:first-of-type{margin-top:18px}
.sec.tarmac .arrives{border-color:var(--bord-d)}
.sec.tarmac .arrives.two{background:var(--tarmac-2)}
.refund{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--hair-d);font:400 11.5px/1.7 var(--mono);color:var(--ink-dm)}
.refund b{color:var(--a-on-dark);font-weight:600;flex:none}
.outnow{display:flex;align-items:center;gap:10px;font:600 11px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--open-d)}
.outnow::before{content:"";width:8px;height:8px;background:currentColor;display:block}
.txn .state{min-height:64px}
.txn .err{border:2px solid var(--shut);padding:14px 16px;font:400 16px/1.6 var(--serif);color:var(--rev)}
.txn .err a{color:var(--a-on-dark);text-decoration:underline;text-underline-offset:.15em}
.link-card{border:2px solid var(--rule);background:var(--card);padding:18px 20px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.link-card .t{font:600 17px/1.3 var(--ui);color:var(--ink-h)}

/* ---- the accent switcher and the footer --------------------------------- */
.switch{display:grid;grid-template-columns:minmax(0,1fr) repeat(3,auto);gap:16px;align-items:center;padding:14px 40px 22px;background:var(--tarmac);border-top:1px solid var(--hair-d)}
.switch .btns{display:contents}
.switch .t{display:flex;flex-direction:column;gap:3px;margin-right:8px}
.switch .t b{font:600 11px/1.7 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--rev)}
.switch .t span{font:400 11px/1.7 var(--mono);color:var(--ink-dm)}
.switch button{display:flex;align-items:center;gap:9px;padding:12px 15px 12px 11px;min-height:45px;justify-self:end;background:transparent;
  border:2px solid var(--bord-d);cursor:pointer;font:600 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-d);border-radius:0}
.switch button:hover{color:var(--rev)}
.switch button[aria-pressed=true]{border-color:var(--rev)}
.switch button i{width:18px;height:18px;display:block;outline:1px solid var(--bord-d2);outline-offset:-1px}
.ft{padding:32px 40px;background:var(--tarmac);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 48px;align-items:start}
.ft .col{display:flex;flex-direction:column;gap:12px}
.ft .brand{align-self:flex-start}
.ft .micro{color:var(--ink-dm);line-height:1.8}
.ft .legal{display:flex;flex-wrap:wrap;gap:20px;font:600 11px/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.ft .legal a{color:var(--rev)}
.ft .legal a:hover{color:var(--a-on-dark)}
.ft .legal a.de::after{content:"DE";font-size:8px;margin-left:5px;color:var(--a-on-dark);vertical-align:super}

/* ---- the legal documents ----------------------------------------------- */
.doc{max-width:72ch}
.doc h2{font-size:clamp(26px,3.4vw,36px);margin-top:28px}
.doc h3{margin-top:24px;font-size:18px}
.doc h4{margin:32px 0 0;font-size:17px}
/* legal() re-levels a document's headings so the outline runs h1, h2, h3;
   lvN keeps the look the heading had at level N. A heading sat as close to
   the paragraph above it as to its own text (12 Oct 2026), so it takes more
   room above than below. */
.doc .lv3{margin:32px 0 0;font:600 18px/1.25 var(--ui);letter-spacing:-.016em}
.doc .lv4{margin:32px 0 0;font:700 17px/1.35 var(--ui);letter-spacing:-.01em}
.doc p,.doc ul{margin-top:10px;font:400 16.5px/1.6 var(--serif);color:var(--ink)}
.doc ul{padding-left:20px}
.doc li{margin-top:5px}
.doc code{font:400 14px/1.4 var(--mono)}
.lgidx{display:flex;flex-direction:column;border:2px solid var(--rule);background:var(--card)}
.lgidx a{display:flex;justify-content:space-between;gap:10px;padding:12px 14px;border-bottom:1px solid var(--hair);color:var(--ink-h);font:600 13px/1.3 var(--ui)}
.lgidx a:last-child{border-bottom:0}
.lgidx a.on{background:var(--tarmac);color:var(--rev)}
.lgidx a .l{font:600 10px/1.4 var(--mono);letter-spacing:.12em;color:var(--ink-m)}
.lgidx a.on .l{color:var(--a-on-dark)}
/* The legal index prints the language in its own column; the superscript
   said it a second time ("Terms of sale EN EN"). */
.lgdocs a.en::after{content:none}
/* Where the marker stays (the 404's list) it is a third flex item; the label
   takes the slack so the path and the marker sit together on the right. */
.lgidx a > span:first-child{margin-right:auto}
.cmp .r .n{color:var(--ink-m)}

/* ---- the road pages (12 Sep 2026): linked names, and the strip ----------
   Moved here from roadpage.py, where it was appended to CSS after the V3
   sheet had already been composed from it, and so reached no page. */
.tbl .r .nm a{color:var(--ink-h);border-bottom:1px solid var(--a-fill)}
.tbl .r .nm a:hover{color:var(--a-fill)}
.roadstrip .jump{margin:0}
.roadstrip .jump a{text-transform:none;letter-spacing:0;font:600 13px/1.7 var(--ui);color:var(--ink-h);border-bottom:1px solid var(--a-fill)}
/* The guide's name in a road page's kicker links to the guide. */
.sec.tarmac .lb a{color:var(--rev);text-decoration:underline;text-underline-offset:3px}

@media print{.sticky,.crumb{display:none!important}}
@media(min-width:861px){
  /* The bar and the crumb are full bleed; their content lines up with the
     header's 1192 px column rather than the window's edge. */
  .sticky,.crumb{padding-left:max(40px,calc(50% - 596px));padding-right:max(40px,calc(50% - 596px))}
}

@media(max-width:1000px){
  .bundle{grid-template-columns:minmax(0,1fr)}
  .switch{grid-template-columns:minmax(0,1fr);gap:12px}
  .switch .btns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
}
@media(max-width:860px){
  .g2,.g-hero,.g-shelf,.g-pack,.g-400,.g-430,.g-380,.g-115,.g-close,.g-files,.g-files .g3.files,.g3,.gg,.g-offer,.faq,.ft{grid-template-columns:minmax(0,1fr)}
  .strip,.counter,.audit,.steps{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .ballot{grid-template-columns:minmax(0,1fr)}
  .sec,.hd,.season,.crumb,.switch,.ft{padding-left:20px;padding-right:20px}
  .hd{padding-top:12px;padding-bottom:12px;gap:14px}
  .hd nav{display:none}
  .hd .r .btn{display:none}
  .tabs{display:flex}
  .brand .wm-word{font-size:26px}
  .sticky{padding:0 20px;height:60px}
  .sticky .who{flex-direction:column;gap:2px}
  .sticky .who b{font-size:13.5px}
  /* The region list is a 650 px string on a 375 px screen: the home page
     and the shelf scrolled sideways on every phone until 18 Sep 2026. The
     bar still says how many books and the price; the names are the cards'. */
  .sticky .who span{display:none}
  /* The button already prints the price; the bare price beside it took the
     German bar to 359 px on a 320 px screen. */
  /* "79,00 € für alle sechs Bücher, einmalig" at 54 px is 343 px of one
     line on a 320 px screen; a heading that cannot break is the last thing
     allowed to scroll the page. */
  .g-close h2,.g-hero h1,.g-shelf h1{font-size:34px!important}
  /* A road page's title at 44 px broke "Gletscherstraße" mid-word on a
     390 px phone, and the sample page's 54 px headline took six lines
     before the form. */
  .g-400 h1,.g-380 h1,.g-430 h1{font-size:34px!important}
  .refund{flex-direction:column;align-items:flex-start;gap:6px}
  /* anywhere broke "Deutschland" as "Deutschlan / d" at 320 px; the pages
     carry their lang, so German hyphenates instead. */
  h1,h2{overflow-wrap:break-word;hyphens:auto}
  /* Under 16 px, iOS Safari zooms the page when the field takes focus, and
     it stays zoomed after the form is sent. */
  .mailcard input[type=email]{font-size:16px}
  /* The bar repeats the form's own button; while the form is on screen it
     stood over it (768 px). v2pages.sample() sets the class. */
  .sticky{transition:transform .2s}
  body.formin .sticky{transform:translateY(110%)}
  /* The hero's own controls come BEFORE its argument on a phone. The
     paragraph is 400 px of type at this width and it sat between the
     headline and the buttons; the argument is still there, one scroll
     down, where somebody who wants it will read it. Desktop is untouched:
     there the whole hero is one screen. */
  /* The hero's own stack is tighter on a phone: five 20 px gaps is a third
     of the room between the title and the button. */
  .g-hero .stack,.g-pack .stack,.g-shelf .stack{gap:14px!important}
  /* Chrome above the hero costs a quarter of a phone fold: the season note
     runs to three lines, the crumb to two, and a book title at 34 px to
     four. None of it is the thing the reader came for. */
  .season{font-size:10px;padding-top:8px;padding-bottom:8px}
  .crumb{padding-top:10px;padding-bottom:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .g-pack h1{font-size:28px!important}
  .g-hero .arg,.g-pack .arg,.g-pack .note{order:1}
  .g-hero .ctas,.g-pack .ctas{margin-top:8px}
  .gets li{font-size:14.5px}
  /* The live card is 760 px of iframe between the hero and the shelf. Half
     that is still the card, still scrollable, and puts the six books a
     screen and a half sooner. */
  .livecard iframe{height:420px!important}
  /* THE BUY BAR IS FIXED TO THE BOTTOM OF A PHONE (18 Sep 2026, Tom).
     Measured at 390 px before this: the first thing a reader could press on
     the home page sat at y=997 against an 844 px fold, and on a pack page at
     y=1332 - a headline and three paragraphs, and nothing to buy with. The
     bar was `position:sticky` and sits MID-DOCUMENT, so it only began
     sticking after two and a half screens and never helped anyone near the
     top. Fixed to the bottom it is on screen from the first pixel, and it
     already carries the right context per page: a road page names its own
     book and page number, a pack page that pack, the home page and the
     shelf the edition. body gets padding so the last section is not hidden
     under it, which is the brief's "do not let the sticky CTA obscure
     content". */
  .sticky{position:fixed;left:0;right:0;bottom:0;top:auto;height:auto;padding:10px 16px;
    z-index:60;border-top:2px solid var(--a-on-dark);border-bottom:0;
    box-shadow:0 -6px 24px rgba(0,0,0,.35)}
  body{padding-bottom:78px}
  .sticky .act{flex:0 1 auto;min-width:0;gap:10px}
  .sticky .act .p{display:none}
  .sticky .act .btn{white-space:normal;text-align:center;padding:9px 12px;font-size:13px;line-height:1.2}
  .frombox{grid-template-columns:minmax(0,1fr)}
  .frombox input{min-width:0;flex-basis:100%}
  .sticky .who span{font-size:10px}
  /* In a column, baseline alignment sized the nowrap label to its whole
     text, so it ran under the button instead of ending in an ellipsis. */
  .sticky .who{align-items:stretch}
  .sticky .who b{max-width:100%;white-space:normal;line-height:1.2}
  .idx .h{display:none}
  .idx .r{grid-template-columns:52px minmax(0,1fr) 62px;gap:4px 10px}
  .idx.five .r{grid-template-columns:52px minmax(0,1fr) 62px}
  .idx .r .rg,.idx .r .num:not(.st){display:none}
  .idx .sub{display:block;font:400 12px/1.5 var(--mono);color:var(--ink-m);margin-left:17px}
  .idx .r .st{display:block;font:600 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;text-align:right}
  .p01 .src{font-size:12px}
  .cov .h,.cov .r{grid-template-columns:minmax(0,1fr) 90px 100px}
  .seven .r{grid-template-columns:34px minmax(0,1fr);gap:4px 14px}
  .seven .d{grid-column:2}
  .bkpick .n{font-size:18px}
  /* Seven cards at full height put the first road four screens down; the
     ones not picked fold to their name. */
  .bkpick{padding:12px 16px}
  .bkpick:not(:has(input:checked)) .mt,.bkpick:not(:has(input:checked)) .p,
  .bkpick:not(:has(input:checked)) .acts{display:none}
  .bkpick .n{margin-top:2px}
  .photo .ph{min-height:220px}
}
/* The phone keeps the wordmark: see header() for what gives, and why. */
@media(max-width:560px){
  .brand .wm{gap:8px}
  .brand .wm-word{font-size:22px}
  .brand .wm-label{font-size:8.5px;letter-spacing:.2em}
  .brand .wm-suffix{font-size:8.5px;letter-spacing:.14em;padding-bottom:3px}
  .brand .wm-bar{width:2px;margin:4px 0 3px}
}
@media(max-width:400px){
  .brand .wm-word{font-size:20px}
}
/* A finger, not a pointer: the region jump links were 20 px tall with 6 px
   between rows. */
@media(pointer:coarse){
  .jump{gap:0 14px}
  .jump a{display:inline-block;padding:10px 0}
  p.micro > a:only-child{display:inline-block;padding:10px 0}
}


:root,:root[data-accent]{
  --tarmac:#16181A;--tarmac-2:#1E2124;--paper:#F4F5F4;--paper-2:#E9EBEA;--card:#FFFFFF;
  --rule:#16181A;--hair:#DEE1E0;--hair-d:#33383D;--bord-d:#3C4146;--bord-d2:#5C6166;
  --ink-h:#16181A;--ink:#33383D;--ink-m:#5C6166;--ink-d:#C6CCD2;--ink-dm:#A9B0B6;--rev:#F4F5F4;
  --open:#1F5C3A;--open-d:#7FBF9A;--shut:#A81F0C;
  --a-fill:#1E4B5A;--a-on-fill:#FFFFFF;--a-on-dark:#7FBF9A;--a-on-paper:#1E4B5A;--a-on-fill-muted:#CBDDE2;
  --plate:#F4F5F4;--ground:#E9EBEA;--sunk:#DEE1E0;--line:#C3C6C4;--teal-h:#163946;--green-h:#174A2E;
}
.switch{display:none}


/* ---- chrome ------------------------------------------------------------ */
/* An in-page jump lands below the sticky header, not under it: 72 px on a
   desktop, 106 with the phone's tabs, 117 with the tablet's (12 Oct 2026). */
html{scroll-padding-top:88px}
body{background:var(--plate);color:var(--ink)}
.v3-wrap{max-width:1240px;margin:0 auto;padding-left:24px;padding-right:24px}
.v3-vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.v3-skip{position:absolute;left:-9999px;top:8px;z-index:60;background:var(--tarmac);color:var(--rev);padding:12px 16px;font:600 15px/1 var(--ui)}
.v3-skip:focus{left:16px}
.v3-bar{background:var(--tarmac);color:var(--ink-d);font:400 12px/1.5 var(--mono);letter-spacing:.08em;
  text-transform:uppercase;padding:10px 24px;display:flex;justify-content:center;gap:12px;flex-wrap:wrap;text-align:center}
.v3-bar b{color:var(--open-d);font-weight:600}
.v3-bar a{color:var(--rev);text-decoration:underline;white-space:nowrap}
.v3-hd{position:sticky;top:0;z-index:20;background:var(--plate);border-bottom:1px solid var(--line)}
/* A re-dressed page carries v2's buy bar, which sticks at the top of the
   window on a desktop. Two bars sticky at top:0 put the bar over the logo,
   the nav and the language switch with a strip of header showing under it;
   so there the header scrolls away and the bar holds the top alone. At
   860 px and below v2 fixes its bar to the foot and the header stays. */
@media (min-width:861px){body:has(.sticky) .v3-hd{position:relative}}
.v3-hd .v3-wrap{display:flex;align-items:center;gap:32px;padding-top:12px;padding-bottom:12px;flex-wrap:wrap}
.v3-hd .brand,.v3-ft .brand{display:block;text-decoration:none}
.v3-hd .brand .wm-word{color:var(--ink-h);font-size:30px}
.v3-hd .brand .wm-label,.v3-hd .brand .wm-suffix{color:var(--ink-m)}
.v3-hd .brand .wm-bar{background:var(--a-fill)}
.v3-nav{display:flex;gap:28px;flex-grow:1;font:500 15px/1 var(--ui)}
.v3-nav a{color:var(--ink-h);text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
.v3-nav a:hover,.v3-nav a.on{border-bottom-color:var(--a-fill)}
.v3-r{display:flex;align-items:center;gap:16px;margin-left:auto}
.v3-hd .langs{display:flex;border:1px solid var(--line);font:400 12px/1 var(--mono);gap:0}
.v3-hd .langs a{padding:7px 9px;color:var(--ink-m);text-decoration:none;border:0}
.v3-hd .langs a.on{background:var(--tarmac);color:var(--rev)}
.v3-tabs{display:none}
/* The desktop nav, the language switch and a priced button do not fit one
   row below about 1000 px, and the header wrapped to 147 px on a tablet;
   the tabs take the nav from there down. */
@media (max-width:1000px){
  html{scroll-padding-top:133px}
  .v3-nav{display:none}
  .v3-tabs{display:flex;border-top:1px solid var(--line);background:var(--plate)}
  .v3-tabs a{flex:1;text-align:center;padding:12px 4px;font:600 14px/1.2 var(--ui);color:var(--ink-h);text-decoration:none;min-height:44px}
  .v3-tabs a.on{box-shadow:inset 0 -2px 0 var(--a-fill)}
}
@media (max-width:760px){
  html{scroll-padding-top:56px}
  .v3-hd .v3-r .v3-btn{display:none}
  .v3-hd .brand .wm-word{font-size:24px}
  /* Only the tabs stick: the mark and the language row scroll away, and the
     header's 116 px plus the buy bar had been a quarter of every screen
     (12 Oct 2026). The brand row is set to 70 px, fine pointer or coarse,
     so the offset is that row and the tabs' top rule, not a measurement. */
  .v3-hd > .v3-wrap{height:70px;padding-top:0;padding-bottom:0;flex-wrap:nowrap}
  .v3-hd{top:-71px}
}
.v3-ft{background:#0B0C0D;color:var(--ink-dm);font:400 13px/1.7 var(--mono)}
.v3-ft .v3-wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:32px;padding-top:52px;padding-bottom:52px}
.v3-ft .brand .wm-word{color:var(--rev)}
.v3-ft .brand .wm-label,.v3-ft .brand .wm-suffix{color:var(--ink-dm)}
.v3-ft .brand .wm-bar{background:var(--open-d)}
.v3-ft nav{display:flex;flex-direction:column;gap:4px}
.v3-ft a{color:var(--ink-d)}
.v3-ft p{margin:0}
/* v2's teal focus ring is 1.0 to 2.1:1 on the dark and teal grounds below;
   the light accent is 4.5 to 9:1 on all of them. Scoped by ground. */
.v3-bar :focus-visible,.v3-ft :focus-visible,.v3-dark :focus-visible,.v3-edition :focus-visible,
.v3-two .v3x-all :focus-visible,.v3-buybar :focus-visible,.v3-skip:focus-visible,
.on-dark a:focus-visible{outline-color:var(--a-on-dark)}
/* A link inside a sentence is underlined: colour alone was 1.3 to 1.9:1
   against the words around it. */
main p a:not([class]),main li a:not([class]),.v3-crumb a,.v3-faq a,.v3-tbl .v3x-t a,.v3-regions a{
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}

/* ---- type and controls ----------------------------------------------- */
.v3-k{font:400 13px/1.5 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-m);margin:0}
.v3-k.v3x-free{color:var(--open)}
.v3-k.v3x-on-dark{color:var(--open-d)}
.v3-h1{margin:0;font:800 clamp(40px,5.4vw,74px)/.98 var(--ui);letter-spacing:-.025em;color:var(--ink-h);text-wrap:balance}
.v3-h2{margin:0;font:800 clamp(30px,3.6vw,50px)/1.03 var(--ui);letter-spacing:-.025em;color:var(--ink-h);text-wrap:balance}
.v3-h3{margin:0;font:700 21px/1.2 var(--ui);color:var(--ink-h)}
/* v2 sets h1,h2{overflow-wrap:anywhere}, which split "Deutschlan" / "d" on
   a 320 px shelf; a heading breaks inside a word only if the word cannot
   fit a line at all, and then with a hyphen (below, at 360 px and under). */
.v3-h1,.v3-h2,.v3-h3{overflow-wrap:break-word}
.v3-lead{margin:0;font:400 20px/1.5 var(--serif);color:var(--ink);max-width:36em;text-wrap:pretty}
.v3-p{margin:0;font:400 17px/1.55 var(--serif);color:var(--ink)}
.v3-small{margin:0;font:400 12px/1.6 var(--mono);color:var(--ink-m)}
.v3-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--a-fill);color:var(--a-on-fill);
  font:700 16px/1.2 var(--ui);text-decoration:none;padding:14px 18px;min-height:46px;border:0;cursor:pointer}
.v3-btn:hover{background:var(--teal-h);color:#fff}
.v3-btn.v3x-lg{font-size:18px;padding:18px 26px}
.v3-btn .v3x-p{font-weight:500;opacity:.85;white-space:nowrap}
.v3x-nw{white-space:nowrap}
/* The free sample is an action like any other, so it is teal (decision 2);
   green stays for labels, tags and open or free status. */
.v3-btn.v3x-free{background:var(--a-fill)}
.v3-btn.v3x-free:hover{background:var(--teal-h)}
/* A priced button's label and price are one run, centred when it wraps. */
.v3-btn > .v3x-l{text-align:center}
.v3-btn.v3x-mint{background:var(--open-d);color:var(--tarmac)}
.v3-btn.v3x-mint:hover{background:#9AD0B1;color:var(--tarmac)}
.v3-btn.v3x-line{background:transparent;color:var(--ink-h);box-shadow:inset 0 0 0 2px var(--ink-h)}
.v3-btn.v3x-line:hover{background:var(--ink-h);color:var(--rev)}
.v3-btn.v3x-white{background:#fff;color:var(--a-fill)}
.v3-link{font:600 16px/1.3 var(--ui);color:var(--a-fill)}
.v3-link.v3x-free{color:var(--a-fill)}
.v3-ticks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:8px 24px;font:400 14px/1.4 var(--ui)}
.v3-ticks li{display:flex;gap:8px;align-items:flex-start}
.v3-ticks svg{flex:none;margin-top:1px}
.v3-tag{display:inline-block;background:var(--open);color:#fff;font:400 11px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:3px 7px}
.v3-tag.v3x-ink{background:var(--tarmac)}
.v3-tag.v3x-grey{background:var(--ink-m)}

/* ---- sections ----------------------------------------------------------- */
.v3-sec{padding-top:88px;padding-bottom:88px}
.v3-band{background:var(--ground);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.v3-dark{background:var(--tarmac);color:var(--ink-d)}
.v3-dark .v3-h2,.v3-dark .v3-h3{color:var(--rev)}
.v3-dark .v3-p,.v3-dark .v3-lead{color:var(--ink-d)}
.v3-dark .v3-small{color:var(--ink-dm)}
.v3-g2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(460px,100%),1fr));gap:56px;align-items:center}
.v3-g2.v3x-top{align-items:start}
.v3-g3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:32px}
.v3-stack{display:flex;flex-direction:column;gap:22px}
.v3-stack.v3x-tight{gap:12px}
.v3-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:44px}
.v3-head > div{display:flex;flex-direction:column;gap:14px;max-width:720px;min-width:0}

/* ---- figure strips (the inner .v/.l pair is what check_site reads) ---- */
.v3-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));border-top:2px solid var(--ink-h);margin-top:48px}
.v3-strip .v3x-c{padding:16px 16px 0 0}
.v3-strip .v{font:800 34px/1.05 var(--ui);color:var(--ink-h);letter-spacing:-.02em}
.v3-strip .l{font:400 11px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-m);margin-top:6px}
.v3-stack .v3-strip{margin-top:8px}

/* ---- the hero composition ------------------------------------------------ */
.v3-hero{padding-top:64px;padding-bottom:72px}
.v3x-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.v3-regions{display:flex;flex-wrap:wrap;gap:4px 18px;font:500 15px/1.6 var(--ui)}
.v3-regions a{color:var(--a-fill)}
.v3-compose{position:relative;width:100%;aspect-ratio:1/.96}
.v3-compose .v3x-bk{position:absolute;left:0;top:7%;width:44%;transform:rotate(-6deg);z-index:1}
/* The page lies over the cover's right third, so the cover's name keeps to
   the left two thirds: "DEUTSCHLAND UND OSTERREICH" lost its last letters
   under the page (12 Oct 2026). */
.v3-compose .v3x-bk .v3x-nm{font-size:max(12px,6.4cqw);max-width:64%}
.v3-compose .v3x-pg{position:absolute;left:30%;top:0;width:50%;margin:0;transform:rotate(2.5deg);z-index:2}
.v3-compose .v3x-pg img{width:100%;height:auto;display:block;border:1px solid var(--line);box-shadow:0 30px 50px -22px rgba(22,24,26,.55)}
.v3-compose .v3x-pg figcaption{position:absolute;left:-8px;top:40%;background:var(--tarmac);color:var(--rev);font:400 11px/1 var(--mono);letter-spacing:.12em;padding:7px 9px;white-space:nowrap}
.v3-compose .v3x-ph{position:absolute;left:71%;top:36%;width:27%;z-index:3}
.v3-compose .v3x-ph p{margin:10px 0 0;font:400 11px/1.3 var(--mono);letter-spacing:.12em;text-align:center;color:var(--ink)}
.v3-compose .v3x-gpx{position:absolute;left:6%;top:83%;z-index:3;background:var(--open);color:#fff;font:400 12px/1 var(--mono);letter-spacing:.1em;padding:10px 14px;display:flex;gap:10px;align-items:center}
/* The phone shows the Start Here card itself, rendered at a phone's width:
   it fills the screen from the top. */
.v3-phone{aspect-ratio:9/19;background:var(--tarmac);border-radius:28px;padding:7px;box-shadow:0 30px 40px -18px rgba(22,24,26,.6)}
.v3-phone > div{width:100%;height:100%;border-radius:22px;overflow:hidden;background:var(--ground)}
.v3-phone picture{display:block;height:100%}
.v3-phone img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 0;display:block;margin:0}

/* ---- the cover: one per guide, drawn from its own key map -------------- */
.v3-cover{aspect-ratio:210/297;background:var(--plate);border:1px solid var(--line);display:flex;flex-direction:column;
  box-shadow:6px 6px 0 -1px var(--sunk),6px 6px 0 0 var(--line),12px 12px 0 -1px var(--ground),12px 12px 0 0 var(--line),0 26px 34px -20px rgba(22,24,26,.45);
  transition:transform .25s ease;container-type:inline-size}
.v3-cover .v3x-band{background:var(--tarmac);height:11%;display:flex;align-items:center;gap:7px;padding:0 8%;border-bottom:3px solid var(--open);overflow:hidden}
.v3-cover .v3x-ofd{background:var(--plate);color:var(--ink-h);font:700 max(9px,4.2cqw)/1 var(--ui);padding:2px 4px}
.v3-cover .v3x-rule{width:2px;height:45%;background:var(--open-d)}
.v3-cover .v3x-ed{font:400 max(7px,3.1cqw)/1 var(--mono);letter-spacing:.14em;color:var(--rev);white-space:nowrap}
.v3-cover .v3x-body{padding:8%;flex:1;display:flex;flex-direction:column;gap:3.5cqw;min-height:0}
.v3-cover .v3x-cc{font:400 max(8px,3.4cqw)/1 var(--mono);letter-spacing:.16em;color:var(--ink-m)}
.v3-cover .v3x-nm{font:800 max(14px,8.2cqw)/1 var(--ui);text-transform:uppercase;letter-spacing:-.01em;color:var(--ink-h);min-height:2em;text-wrap:balance}
.v3-cover .v3x-map{flex:1;min-height:0;border:1px solid var(--line);overflow:hidden;background:var(--plate)}
.v3-cover .v3x-map img{width:100%;height:100%;object-fit:cover;display:block}
.v3-cover .v3x-ft{display:flex;justify-content:space-between;align-items:baseline;font:400 max(8px,3.4cqw)/1 var(--mono);letter-spacing:.1em;color:var(--ink-m)}
.v3-cover .v3x-ft b{font:700 max(16px,8.4cqw)/1 var(--ui);color:var(--ink-h);letter-spacing:0}

/* ---- the shelf ------------------------------------------------------------- */
.v3x-shelfhd{padding-top:56px;padding-bottom:40px}
.v3-shelf{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:56px 32px}
.v3-guide{display:flex;flex-direction:column;gap:18px}
.v3-guide > a{display:block;text-decoration:none;padding:0 12px 12px 0;position:relative}
.v3-guide:hover .v3-cover{transform:translateY(-6px) rotate(-1deg)}
.v3-guide .v3-h3 a{color:inherit;text-decoration:none}
.v3-guide .v3-h3 a:hover{text-decoration:underline}
/* The distance badge sits above the guide's name, not on its cover: on the
   cover's band it hid "DRIVING GUIDE 2027" and hung past the edge. */
.v3-guide .v3x-near{align-self:flex-start;background:var(--open);color:#fff;font:400 11px/1.3 var(--mono);letter-spacing:.06em;padding:5px 8px}
.v3-guide .v3x-near[hidden]{display:none}
.v3-guide .v3x-meta{margin:0;font:400 12px/1.5 var(--mono);color:var(--ink-m)}
.v3-guide .v3x-act{display:flex;align-items:center;gap:14px;margin-top:auto;flex-wrap:wrap}
.v3-edition{background:var(--tarmac);color:var(--ink-d);padding:28px;display:flex;flex-direction:column;gap:16px}
.v3-edition .v3x-spines{display:flex;gap:6px;height:120px;align-items:flex-end}
.v3-edition .v3x-spines span{flex:1;height:100%;background:var(--plate);border-top:6px solid var(--tarmac);outline:1px solid var(--ink-m);
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px;writing-mode:vertical-rl;transform:rotate(180deg);
  font:400 9px/1 var(--mono);letter-spacing:.14em;color:var(--tarmac);text-transform:uppercase}
.v3-edition .v3-h3{font-size:28px;line-height:1.05;letter-spacing:-.02em;color:var(--rev)}
.v3-edition .v3-p{color:var(--ink-d)}
.v3-edition .v3-small{color:var(--ink-dm)}
.v3-price{display:flex;align-items:baseline;gap:6px 12px;flex-wrap:wrap}
.v3-price b{font:800 46px/1 var(--ui);color:var(--ink-h)}
.v3-dark .v3-price b,.v3-edition .v3-price b{color:var(--rev)}
.v3-price span{font:400 13px/1.3 var(--mono);color:var(--ink-m)}
.v3-edition .v3-price span,.v3-two .v3x-all .v3-price span{color:var(--ink-d)}
.v3-price span + span::before{content:"\00B7\00A0"}
/* The edition's price notes each take a line: in a narrow card the second
   wrapped and began its line with the dot (12 Oct 2026). */
.v3-price.v3x-ed span{flex-basis:100%}
.v3-price.v3x-ed span + span::before{content:none}
.v3-from{display:inline-flex;width:max-content;max-width:100%;align-items:stretch;border:1px solid var(--ink-h);background:#fff}
.v3-from label{font:400 11px/1.2 var(--mono);letter-spacing:.14em;color:var(--ink-m);padding:0 12px;display:flex;align-items:center;border-right:1px solid var(--line)}
.v3-from input{border:0;padding:14px 12px;font:400 16px/1 var(--ui);width:160px;min-width:0;background:transparent;color:var(--ink-h)}
.v3-from button{border:0;background:var(--tarmac);color:var(--rev);font:600 15px/1 var(--ui);padding:0 16px;cursor:pointer;min-height:46px}
.v3-from-note{margin:8px 0 0}
/* Hidden until its script runs: the author display rules above would
   otherwise beat the hidden attribute and draw a box that sorts nothing. */
[data-v3-nearbox][hidden],.v3-from[hidden]{display:none}

/* ---- what you download, inside a page ------------------------------------ */
.v3-way{display:flex;flex-direction:column;gap:14px}
.v3-way .v3x-vis{height:300px;background:var(--hair-d);overflow:hidden;display:flex;justify-content:center;align-items:flex-start;padding-top:28px}
.v3-way .v3x-vis img{width:78%;height:auto;display:block;box-shadow:0 20px 30px -14px rgba(0,0,0,.6)}
/* The picture is the flex item, so it is what takes the 78 % and gets
   centred; the image inside it was flush left with a band beside it. */
.v3-way .v3x-vis > picture{display:block;width:78%}
.v3-way .v3x-vis > picture img{width:100%}
.v3-way .v3x-vis .v3-phone{width:150px}
/* The page rule above (0,2,1) also caught the phone's screen (0,1,1) and
   shrank the card to a shadowed thumbnail in an empty frame. */
.v3-way .v3x-vis .v3-phone img{width:100%;height:100%;box-shadow:none}
.v3-way .v3x-files{padding:28px;display:flex;flex-direction:column;gap:8px;font:400 13px/1.4 var(--mono);color:var(--ink-d);align-items:stretch}
.v3-way .v3x-files .v3x-d{color:var(--open-d)}
.v3-way .v3x-files .v3x-apps{margin-top:auto;display:flex;gap:8px;flex-wrap:wrap}
.v3-way .v3x-files .v3x-apps span{border:1px solid var(--ink-m);padding:4px 8px}
.v3-anat{position:relative;padding-left:22px}
.v3-anat img{width:100%;height:auto;display:block;border:1px solid var(--line);box-shadow:0 30px 50px -26px rgba(22,24,26,.45)}
.v3-anat .v3x-mk{position:absolute;left:0;width:40px;height:40px;background:var(--a-fill);color:#fff;font:700 16px/1 var(--ui);display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 3px var(--plate)}
.v3-marks{list-style:none;margin:0;padding:0}
.v3-marks li{display:grid;grid-template-columns:40px 1fr;gap:16px;padding:16px 0;border-top:1px solid var(--line)}
.v3-marks li > span{width:32px;height:32px;background:var(--a-fill);color:#fff;font:700 14px/1 var(--ui);display:flex;align-items:center;justify-content:center}
.v3-marks strong{display:block;font:700 18px/1.3 var(--ui);color:var(--ink-h);margin-bottom:4px}
.v3-marks p{margin:0;font:400 16px/1.45 var(--serif)}
.v3-sticky{position:sticky;top:110px}

/* ---- lists: the sample five, a guide's contents --------------------------- */
.v3-list{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink-h);background:var(--plate)}
.v3-list li{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:baseline;padding:15px 18px;border-bottom:1px solid var(--sunk)}
.v3-list .v3x-n{font:400 13px/1 var(--mono);color:var(--ink-m)}
.v3-list .v3x-t{font:600 17px/1.3 var(--ui);color:var(--ink-h)}
.v3-list .v3x-s{display:block;font:400 14px/1.4 var(--serif);color:var(--ink-m)}
.v3-list .v3x-v{font:400 13px/1.3 var(--mono);color:var(--ink);text-align:right}
.v3-tbl{width:100%;min-width:720px;border-collapse:collapse;font-family:var(--ui)}
.v3-tbl th{text-align:left;font:400 11px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-m);padding:14px 10px 10px 0;border-bottom:2px solid var(--ink-h)}
.v3-tbl td{padding:11px 10px 11px 0;border-bottom:1px solid var(--sunk);vertical-align:baseline}
.v3-tbl .v3x-n{font:400 13px/1 var(--mono);color:var(--ink-m);width:52px}
.v3-tbl .v3x-t{font:600 16px/1.3 var(--ui);color:var(--ink-h)}
.v3-tbl .v3x-t a{color:var(--a-fill)}
.v3-tbl .v3x-r{font:400 15px/1.4 var(--serif);color:var(--ink-m)}
.v3-tbl .v3x-m{font:400 13px/1.4 var(--mono);color:var(--ink);white-space:nowrap}
.v3-tbl .v3x-m.v3x-good{color:var(--open)}
.v3-scroll{overflow-x:auto}

/* ---- steps, questions, the two prices -------------------------------------- */
.v3-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));border-top:2px solid var(--ink-h)}
.v3-steps > div{padding:24px 28px 8px 0;display:flex;flex-direction:column;gap:10px}
.v3-steps b{font:800 48px/1 var(--ui);color:var(--a-fill)}
.v3-steps strong{font:700 20px/1.25 var(--ui);color:var(--ink-h)}
.v3-faq{border-top:2px solid var(--ink-h)}
.v3-faq details{border-bottom:1px solid var(--line)}
.v3-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;padding:20px 0;font:600 19px/1.3 var(--ui);color:var(--ink-h)}
.v3-faq summary::-webkit-details-marker{display:none}
.v3-faq summary::after{content:"+";font:400 26px/.8 var(--ui);color:var(--a-fill);transition:transform .2s ease}
.v3-faq details[open] summary::after{transform:rotate(45deg)}
.v3-faq p{margin:0 0 22px;font:400 17px/1.55 var(--serif);max-width:40em}
.v3-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr));gap:32px}
.v3-two > div{padding:32px;display:flex;flex-direction:column;gap:14px}
.v3-two .v3x-one{box-shadow:inset 0 0 0 2px var(--ink-h)}
.v3-two .v3x-all{background:var(--a-fill);color:#E9EBEA}
.v3-two .v3x-all .v3-k{color:var(--ink-d)}
.v3-two .v3x-all .v3-p{color:#E9EBEA}
.v3-two .v3x-all .v3-small{color:var(--a-on-fill-muted)}
.v3-two .v3x-all .v3-price b{color:#fff}
.v3-two .v3-btn{margin-top:auto}

/* ---- a guide's own page ------------------------------------------------------ */
.v3-crumb{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font:400 12px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-m);margin:0 0 32px}
.v3-crumb a{color:var(--ink-m)}
.v3-gal{display:flex;flex-direction:column;gap:18px}
.v3-gal .v3x-stage{background:var(--ground);border:1px solid var(--line);aspect-ratio:1/1.08;display:flex;align-items:center;justify-content:center;padding:36px;overflow:hidden}
.v3-gal .v3x-stage > *{height:100%}
.v3-gal [data-pane] > picture > img{max-height:100%;max-width:100%;width:auto;height:auto;display:block;border:1px solid var(--line);box-shadow:0 24px 40px -22px rgba(22,24,26,.5)}
.v3-gal [data-pane]{height:100%;display:flex;align-items:center;justify-content:center}
.v3-gal [data-pane] > picture{height:100%;display:flex;align-items:center}
.v3-gal .v3x-stage [hidden]{display:none}
.v3-gal .v3x-thumbs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
/* Selected is a filled label, focus is the ring: the selected thumb was
   marked by exactly the focus ring, so tabbing onto it changed nothing. */
.v3-gal .v3x-thumbs button{padding:0;border:1px solid var(--line);background:var(--ground);min-height:110px;display:flex;flex-direction:column;overflow:hidden;cursor:pointer}
.v3-gal .v3x-thumbs button[aria-pressed="true"]{border-color:var(--a-fill);box-shadow:inset 0 0 0 1px var(--a-fill)}
.v3-gal .v3x-thumbs button[aria-pressed="true"] span{background:var(--a-fill);color:var(--a-on-fill)}
.v3-gal .v3x-thumbs button:focus-visible{outline:2px solid var(--a-fill);outline-offset:4px}
.v3-gal .v3x-thumbs img{width:100%;height:82px;object-fit:cover;object-position:50% 0;display:block}
.v3-gal .v3x-thumbs span{font:400 11px/1.3 var(--mono);letter-spacing:.12em;color:var(--ink);padding:7px 4px;width:100%;text-transform:uppercase;
  flex:1 0 auto;display:flex;align-items:center;justify-content:center}
.v3-stats{margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:2px solid var(--ink-h);border-bottom:1px solid var(--line)}
.v3-stats > div{padding:14px 10px;border-left:1px solid var(--line)}
.v3-stats > div:first-child{border-left:0;padding-left:0}
.v3-stats dt{font:400 11px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-m)}
.v3-stats dd{margin:4px 0 0;font:700 26px/1.1 var(--ui);color:var(--ink-h);white-space:nowrap}
.v3x-links{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.v3-cov{width:100%;border-collapse:collapse;border-top:2px solid var(--ink-h)}
.v3-cov th,.v3-cov td{text-align:left;padding:10px 0 10px 12px;border-bottom:1px solid var(--line);font:400 14px/1.4 var(--mono);vertical-align:baseline}
.v3-cov th:first-child{padding-left:0}
.v3-cov thead th{font-size:12px;color:var(--ink-m);vertical-align:bottom}
.v3-cov tbody th{font:600 16px/1.3 var(--ui);color:var(--ink-h)}
.v3-cov td,.v3-cov thead th:not(:first-child){text-align:right}
.v3-mapfig{margin:0;background:var(--plate);border:1px solid var(--line);padding:16px}
.v3-mapfig img{width:100%;height:auto;display:block}
.v3-why .v3x-args{margin-top:48px}
/* Four reasons as a row of four (two by two on a tablet), never three and
   one alone beside two empty cells. */
.v3-why .v3x-args:has(> :nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){.v3-why .v3x-args:has(> :nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.v3-why .v3x-args:has(> :nth-child(4):last-child){grid-template-columns:minmax(0,1fr)}}
.v3-why .v3x-note{font-size:15px;color:var(--ink-m)}
.v3-mini{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:24px}
.v3-mini a{text-decoration:none;display:flex;flex-direction:column;gap:12px;font:600 15px/1.3 var(--ui);color:var(--rev)}
/* An aspect-ratio box in a column flex takes its content's height, so a
   three-line German name made a taller cover and a ragged row of captions. */
.v3-mini .v3-cover{box-shadow:none;border:0;min-height:0;overflow:hidden}
.v3-buybar{display:none}
/* The sample and roads tables in a narrow left column between 861 and
   1239 px: six fixed tracks left the name 0 px and printed it over the
   region. Stacked there, the table takes the page's width. */
@media (min-width:861px) and (max-width:1239px){.g-430:has(.idx),.g-400:has(.idx.five){grid-template-columns:minmax(0,1fr)}}

/* ---- the legal documents' tables (build_site.md_to_html) ------------------- */
.doc table{width:100%;border-collapse:collapse;margin:16px 0;font:400 14px/1.5 var(--ui)}
.doc th,.doc td{text-align:left;vertical-align:top;padding:8px 12px 8px 0;border-bottom:1px solid var(--hair)}
.doc th{font:600 12px/1.4 var(--mono);letter-spacing:.06em;color:var(--ink-m);border-bottom:2px solid var(--rule)}
.doc hr{border:0;border-top:1px solid var(--hair);margin:28px 0}

/* The edition bar in one run of text below 1100 px: wrapped as a flex row it
   was three to six lines, up to 134 px over the header (12 Oct 2026). */
@media (max-width:1100px){
  .v3-bar{display:block;line-height:1.45}
  .v3-bar b::after{content:" \00B7\00A0"}
  .v3-bar > span::after{content:" "}
}

/* ---- tablet: the guide page's cover beside its price ------------------------ */
@media (min-width:761px) and (max-width:1100px){
  .v3x-pk{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:32px}
  .v3x-pk .v3-stats dd{font-size:22px}
  /* Four figures in a 375 px column: "Mautstraßen" ran past the box and
     "1.902" / "km" broke. Two by two, as on a phone. */
  .v3x-pk .v3-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .v3x-pk .v3-stats > div:nth-child(3){border-left:0;padding-left:0}
}

/* v2 pads the body for its fixed bar on every page at 860 px and below; a
   page without that bar had a light strip under its dark footer. */
@media (max-width:860px){
  body{padding-bottom:0}
  body:has(.sticky){padding-bottom:78px}
  /* iOS zooms the page into a field set under 16 px on focus. */
  .mailcard input[type=email]{font-size:16px}
}

@media (max-width:760px){
  .v3-sec{padding-top:56px;padding-bottom:56px}
  .v3-hero{padding-top:36px}
  /* The controls before the argument on a phone (v2's rule, 18 Sep 2026):
     the button and the guides' names, then the lead and the ticks. */
  .v3-hero .v3-stack > .v3-lead{order:1}
  .v3-hero .v3-stack > .v3-ticks{order:2}
  .v3-bar{padding:8px 16px;font-size:11px;letter-spacing:.04em}
  .v3-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .v3-stats > div:nth-child(3){border-left:0;padding-left:0}
  .v3-sticky{position:static}
  /* The buy box before the gallery, and its price and button before its
     figures: the first Buy on a guide page was 1.7 screens down. */
  .v3x-pk > .v3-gal{order:2}
  .v3x-box > .v3-stats,.v3x-box > .v3x-gpxn{order:2}
  .v3x-box > .v3-ticks,.v3x-box > .v3x-who{order:3}
  /* The town box keeps its label on a phone (the placeholder vanishes on
     the first keystroke) and wraps rather than running past 320 px. */
  .v3-from{display:flex;flex-wrap:wrap;width:auto}
  .v3-from label{flex:0 0 100%;padding:8px 12px;border-right:0;border-bottom:1px solid var(--line)}
  .v3-from input{flex:1 1 0;width:auto}
  .v3-compose .v3x-ph p{font-size:9px}
  /* The contents as two lines a road: name and season, region and toll.
     As a 720 px table in a 342 px scroller the toll and the season were
     off the screen with nothing to say so. */
  .v3-tbl,.v3-tbl tbody{display:block;min-width:0}
  .v3-tbl{border-top:2px solid var(--ink-h)}
  .v3-tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  /* The right column grows to its longest word: at 103 px German compounds
     split mid-word with no hyphen ("Anhängerverbo" / "t"). */
  .v3-tbl tr{display:grid;grid-template-columns:30px minmax(0,1fr) minmax(min-content,120px);gap:2px 12px;padding:10px 0;border-bottom:1px solid var(--sunk)}
  .v3-tbl td{border:0;padding:0}
  .v3-tbl .v3x-n{width:auto}
  .v3-tbl .v3x-m{white-space:normal;text-align:right;overflow-wrap:normal}
  .v3-tbl td:nth-child(1){grid-column:1;grid-row:1 / span 2}
  .v3-tbl td:nth-child(2){grid-column:2;grid-row:1}
  .v3-tbl td:nth-child(5){grid-column:3;grid-row:1}
  .v3-tbl td:nth-child(3){grid-column:2;grid-row:2;font-size:14px}
  .v3-tbl td:nth-child(4){grid-column:3;grid-row:2}
  .v3-list li{grid-template-columns:36px minmax(0,1fr);padding:14px 12px}
  .v3-list .v3x-v{grid-column:2;text-align:left}
  .v3-mini{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px}
  .v3-gal .v3x-thumbs span{padding:6px 4px}
  /* The A4 page as wide as the phone allows: in the desktop's square stage
     it drew 210 px wide, too small to read a road page. */
  .v3-gal .v3x-stage{aspect-ratio:210/297;padding:12px}
  .v3-buybar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;padding:10px 16px;background:var(--tarmac);
    border-top:2px solid var(--open-d);box-shadow:0 -6px 24px rgba(0,0,0,.25)}
  .v3-buybar .v3-btn{flex:1}
  body:has(.v3-buybar){padding-bottom:78px}
  .v3-buybar{transition:transform .2s ease,visibility 0s}
  body.v3x-inview .v3-buybar{transform:translateY(110%);visibility:hidden;transition:transform .2s ease,visibility 0s .2s}
}
/* A phone shelf: a cover beside its name and its two buttons, so seven
   guides and the edition are three screens and not eight. */
@media (max-width:560px){
  /* The bar keeps its date promise and loses "Buy now and download today". */
  .v3-bar .v3x-long{display:none}
  /* The shelf's first screen shows a guide: the figures and the ticks are
     on every guide page, and the heading already says seven regions. */
  .v3x-shelfhd .v3-strip,.v3x-shelfhd .v3-ticks{display:none}
  .v3x-shelfhd{padding-top:28px;padding-bottom:28px}
  .v3x-shelfhd .v3-lead{font-size:17px}
  .v3x-shelfhd .v3-g2{gap:24px}
  .v3-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .v3-strip:has(> :nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
  .v3-strip .v{font-size:26px}
  .v3-shelf{gap:36px}
  .v3-guide{display:grid;grid-template-columns:132px minmax(0,1fr);gap:10px 20px;align-items:start}
  .v3-guide > a{grid-row:1 / span 2;padding:0 8px 8px 0}
  .v3-guide .v3-p{font-size:15px}
  .v3-guide .v3x-act{grid-column:2}
  /* The price never breaks (v3x-p); the word before it may, or the button
     ran 25 px past a 320 px screen. */
  .v3-guide .v3x-act .v3-btn{flex-wrap:wrap;row-gap:0;padding:12px 14px}
  .v3-guide .v3-cover .v3x-ft > span:last-child{display:none}
  .v3-compose .v3x-pg{left:38%;width:46%}
  .v3-compose .v3x-pg figcaption{top:-12px;left:auto;right:6px;white-space:nowrap;font-size:10px;padding:6px 8px;letter-spacing:.08em}
  .v3-compose .v3x-gpx{white-space:nowrap;font-size:10px;padding:8px 10px;letter-spacing:.06em}
}
/* A finger, not a pointer: the language switch was 35 x 26 px and the
   shelf's Free sample a 21 px strip beside the Buy button. */
@media (pointer:coarse){
  .v3-hd .langs a{display:flex;align-items:center;min-height:44px;padding:0 14px}
  .v3-guide .v3x-act .v3-link,.v3-hero .v3-link,.v3-sticky .v3-link{display:inline-flex;align-items:center;min-height:44px}
  /* The 32 px tap area without the taller line box: the padded link had
     added a line to the bar (12 Oct 2026). */
  .v3-bar a{display:inline-block;padding:8px 4px;margin:-8px 0}
  .v3-ft nav{gap:0}
  .v3-ft nav a{display:block;padding:11px 0}
  .v3-crumb a{display:inline-block;padding:10px 0}
  .v3-regions a{display:inline-block;padding:8px 0}
}
@media (max-width:360px){
  .v3-h1,.v3-h2,.v3-h3{hyphens:auto}
  /* Beside a 132 px cover a 320 px shelf leaves the name 120 px: at 21 px
     "Deutschland" did not fit and split with no hyphen, which a browser
     without a German dictionary cannot add. */
  .v3-guide .v3-h3{font-size:19px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .v3-buybar{transition:none!important}
  .v3-cover,.v3-faq summary::after{transition:none}
  .v3-guide:hover .v3-cover{transform:none}
}
/* What people print is a road's facts and the terms: not the chrome, the
   town box, the gallery's buttons or a buy bar over every sheet. */
@media print{
  .v3-skip,.v3-bar,.v3-tabs,.v3-nav,.v3-hd .v3-r,.v3-buybar,[data-v3-nearbox],.v3-from,.v3x-thumbs,.v3-ft nav,.sticky,.crumb{display:none!important}
  .v3-hd{position:static}
  a[href]{color:inherit;text-decoration:none}
}


:root,:root[data-accent]{
  --dusk:#12313A;--dusk-2:#0C2229;--dusk-3:#1C4450;--dusk-line:#2A5560;
  --dusk-ink:#C9D6D9;--dusk-meta:#A9BEC3;--amber:#E9B04A;--ochre:#7A4F0F;
  --tarmac:#12313A;--tarmac-2:#0F2A32;--hair-d:#24505C;--bord-d:#2A5560;--bord-d2:#4F7682;
  --plate:#F3EFE7;--paper:#F3EFE7;--ground:#E8E1D4;--paper-2:#E8E1D4;
  --sunk:#DDD5C6;--hair:#DDD5C6;--line:#CFC6B5;
}
/* The book's paper, wherever the book is drawn. */
.v3-cover{--plate:#F4F5F4;--ground:#E9EBEA;--sunk:#DEE1E0;--line:#C3C6C4;--tarmac:#16181A}
.v3-mapfig,.v3-gal .v3x-stage{--line:#C3C6C4}

/* ---- the chrome on petrol ---- */
.v3-bar{background:var(--dusk-2);color:var(--dusk-ink)}
.v3-bar b{color:var(--amber)}
.v3-hd{background:var(--dusk);border-bottom-color:var(--dusk-line)}
.v3-hd .brand .wm-word{color:#F4F5F4}
.v3-hd .brand .wm-label,.v3-hd .brand .wm-suffix{color:var(--dusk-meta)}
.v3-hd .brand .wm-bar{background:var(--open-d)}
.v3-nav a{color:#F4F5F4}
.v3-nav a:hover,.v3-nav a.on{border-bottom-color:var(--amber)}
.v3-hd .langs{border-color:var(--dusk-line)}
.v3-hd .langs a{color:var(--dusk-meta)}
.v3-hd .langs a.on{background:#F4F5F4;color:var(--dusk)}
.v3-hd .v3-btn,.v3-hd .btn{background:var(--open-d);color:var(--dusk)}
.v3-hd .v3-btn:hover,.v3-hd .btn:hover{background:#9AD0B1;color:var(--dusk)}
.v3-tabs{background:var(--dusk);border-top-color:var(--dusk-line)}
.v3-tabs a{color:#F4F5F4}
.v3-tabs a.on{box-shadow:inset 0 -2px 0 var(--amber)}
.v3-hd :focus-visible,.v3-tabs :focus-visible{outline-color:var(--amber)}
.v3-ft{background:var(--dusk-2);color:var(--dusk-meta)}
.v3-ft a{color:var(--dusk-ink)}

/* ---- the home hero and the shelf's head: petrol, edge to edge ----
   Both are a max-width wrap; the ground is drawn past its edges with a
   spread shadow and clipped to the viewport's width, so the markup does
   not change. */
.v3-hero,.v3x-shelfhd{background:var(--dusk);box-shadow:0 0 0 100vmax var(--dusk);clip-path:inset(0 -100vmax);color:var(--dusk-ink)}
.v3-hero .v3-h1,.v3-hero .v3-h2,.v3x-shelfhd .v3-h1,.v3x-shelfhd .v3-h2{color:#F4F5F4}
.v3-hero .v3-lead,.v3-hero .v3-p,.v3x-shelfhd .v3-lead,.v3x-shelfhd .v3-p{color:var(--dusk-ink)}
.v3-hero .v3-k,.v3x-shelfhd .v3-k{color:var(--amber)}
.v3-hero .v3-small,.v3x-shelfhd .v3-small{color:var(--dusk-meta)}
.v3-hero .v3-ticks,.v3x-shelfhd .v3-ticks{color:var(--dusk-ink)}
.v3-hero .v3-ticks svg path,.v3x-shelfhd .v3-ticks svg path{stroke:var(--open-d)}
.v3-hero .v3-btn,.v3x-shelfhd .v3-btn{background:var(--open-d);color:var(--dusk)}
.v3-hero .v3-btn:hover,.v3x-shelfhd .v3-btn:hover{background:#9AD0B1;color:var(--dusk)}
.v3-hero .v3-link,.v3x-shelfhd .v3-link,.v3-hero .v3-regions a,.v3x-shelfhd .v3-regions a{color:var(--amber)}
.v3-hero :focus-visible,.v3x-shelfhd :focus-visible{outline-color:var(--amber)}
.v3-hero .v3-compose .v3x-ph p{color:var(--dusk-ink)}
.v3-hero .v3-compose .v3x-pg figcaption{background:var(--dusk-2)}
.v3-hero .v3-compose .v3x-gpx{background:var(--amber);color:var(--dusk)}
.v3-hero .v3-phone,.v3-way .v3-phone{background:#0B0C0D}
.v3x-shelfhd .v3-strip{border-top-color:var(--open-d)}
.v3x-shelfhd .v3-strip .v{color:#F4F5F4}
.v3x-shelfhd .v3-strip .l{color:var(--dusk-meta)}
.v3x-shelfhd .v3-from{border-color:var(--dusk-2)}
.v3x-shelfhd .v3-from button{background:var(--dusk-2)}
.v3-hero + *{margin-top:0}

/* ---- the warm light grounds ---- */
.v3-k{color:var(--ochre)}
.v3-k.v3x-free{color:var(--open)}
.v3-band{border-color:var(--line)}
.v3-dark,.v3-edition{background:var(--dusk);color:var(--dusk-ink)}
.v3-dark .v3-p,.v3-dark .v3-lead,.v3-edition .v3-p{color:var(--dusk-ink)}
.v3-dark .v3-k,.v3-edition .v3-k,.v3-dark .v3-k.v3x-on-dark{color:var(--amber)}
.v3-dark .v3-small,.v3-edition .v3-small{color:var(--dusk-meta)}
.v3-way .v3x-vis{background:var(--dusk-3)}
.v3-way .v3x-files{color:var(--dusk-ink)}
.v3-way .v3x-files .v3x-apps span{border-color:var(--dusk-line)}
.v3-edition .v3x-spines span{border-top-color:var(--dusk);outline-color:var(--dusk-line);color:var(--dusk)}
.v3-edition .v3-price span,.v3-dark .v3-price span{color:var(--dusk-ink)}
.v3-buybar{background:var(--dusk)}
/* v2's buy bar on the re-dressed routes is petrol now, and its teal button
   was 1.4:1 against it: on the bar the action is mint, as everywhere dark. */
.sticky .btn:not(.ghost){background:var(--open-d);color:var(--dusk)}
.sticky .btn:not(.ghost):hover{background:#9AD0B1;color:var(--dusk)}
.v3-two .v3x-all{background:var(--dusk)}
.v3-two .v3x-all .v3-k{color:var(--amber)}
.v3-two .v3x-all .v3-btn.v3x-white{color:var(--dusk)}