/* icon masks and tiles: inline data URIs */
:root{--m-phone:url("data:image/svg+xml,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.2 2.8h7.6a2.7 2.7 0 0 1 2.7 2.7v13a2.7 2.7 0 0 1-2.7 2.7H8.2a2.7 2.7 0 0 1-2.7-2.7v-13a2.7 2.7 0 0 1 2.7-2.7zM10.7 5.7h2.6'/%3E%3C/svg%3E");--m-android:url("data:image/svg+xml,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.4 2.8h9.2a1.1 1.1 0 0 1 1.1 1.1v16.2a1.1 1.1 0 0 1-1.1 1.1H7.4a1.1 1.1 0 0 1-1.1-1.1V3.9a1.1 1.1 0 0 1 1.1-1.1zM12 5.5h.01M9.3 18.3h.01M12 18.3h.01M14.7 18.3h.01'/%3E%3C/svg%3E");--m-monitor:url("data:image/svg+xml,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4.5h16a1 1 0 0 1 1 1V15a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V5.5a1 1 0 0 1 1-1zM12 16v3.5M8 19.5h8'/%3E%3C/svg%3E");--m-laptop:url("data:image/svg+xml,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 5.5h12a1 1 0 0 1 1 1V15H5V6.5a1 1 0 0 1 1-1zM3 15h18l-1.2 3H4.2z'/%3E%3C/svg%3E");--m-grid:url("data:image/svg+xml,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1zM15 4h4a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1zM5 14h4a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1zM15 14h4a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");--m-window:url("data:image/svg+xml,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 4.5h15a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-15a1 1 0 0 1-1-1v-13a1 1 0 0 1 1-1zM3.5 8.5h17M6.5 6.5h.01M8.8 6.5h.01'/%3E%3C/svg%3E");--l-phone:url("data:image/svg+xml,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2395F400' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.2 2.8h7.6a2.7 2.7 0 0 1 2.7 2.7v13a2.7 2.7 0 0 1-2.7 2.7H8.2a2.7 2.7 0 0 1-2.7-2.7v-13a2.7 2.7 0 0 1 2.7-2.7zM10.7 5.7h2.6'/%3E%3C/svg%3E");--l-android:url("data:image/svg+xml,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2395F400' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.4 2.8h9.2a1.1 1.1 0 0 1 1.1 1.1v16.2a1.1 1.1 0 0 1-1.1 1.1H7.4a1.1 1.1 0 0 1-1.1-1.1V3.9a1.1 1.1 0 0 1 1.1-1.1zM12 5.5h.01M9.3 18.3h.01M12 18.3h.01M14.7 18.3h.01'/%3E%3C/svg%3E");--l-monitor:url("data:image/svg+xml,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2395F400' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4.5h16a1 1 0 0 1 1 1V15a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V5.5a1 1 0 0 1 1-1zM12 16v3.5M8 19.5h8'/%3E%3C/svg%3E");--l-laptop:url("data:image/svg+xml,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2395F400' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 5.5h12a1 1 0 0 1 1 1V15H5V6.5a1 1 0 0 1 1-1zM3 15h18l-1.2 3H4.2z'/%3E%3C/svg%3E");--l-shield:url("data:image/svg+xml,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2395F400' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5.2c0 4.4-3 8.2-7 9.8-4-1.6-7-5.4-7-9.8V6zM8.8 12l2.3 2.3 4.2-4.3'/%3E%3C/svg%3E");--l-chev:url("data:image/svg+xml,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2395F400' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 9.5l5.5 5.5 5.5-5.5'/%3E%3C/svg%3E");--k-check:url("data:image/svg+xml,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2311110F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");--y-tip:url("data:image/svg+xml,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFDD2A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5a5.8 5.8 0 0 0-3.5 10.4c.7.6 1 1.3 1 2.1v.5h5V16c0-.8.4-1.5 1-2.1A5.8 5.8 0 0 0 12 3.5zM9.8 19.5h4.4'/%3E%3C/svg%3E");}

@font-face{font-family:"Urbanist";src:url("assets/fonts/urbanist-latin.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap;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:"Urbanist";src:url("assets/fonts/urbanist-latin-ext.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap;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:"Karla";src:url("assets/fonts/karla-latin.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap;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:"Karla";src:url("assets/fonts/karla-latin-ext.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap;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}

:root{
  --vb-bg:#11110F;--vb-surface:#131313;--vb-surface-2:#181916;--vb-surface-3:#1E1D1D;--vb-text:#EAEAEA;
  --vb-text-body:rgba(255,255,255,.6);--vb-text-muted:#BCBCC0;--vb-brand:#95F400;--vb-on-brand:#11110F;
  --vb-border:#3C3C3D;--vb-accent:#FFDD2A;--vb-error:#FE0000;color-scheme:dark;
  --f-head:"Urbanist","Trebuchet MS",system-ui,sans-serif;
  --f-text:"Karla",system-ui,"Segoe UI",Arial,sans-serif;
  --gutter:16px;--wrap:1232px;--lane:52ch;--spec:880px;--group:72px;
  --f-ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  --r-panel:16px;--r-card:12px;--r-btn:7px;--bw:1px;
  --hair:color-mix(in srgb,var(--vb-border) 70%,transparent);
  --glow:color-mix(in srgb,var(--vb-brand) 10%,transparent);
}
@media (min-width:720px){:root{--gutter:24px}}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--vb-bg);-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:16px;-webkit-tap-highlight-color:color-mix(in srgb,var(--vb-brand) 16%,transparent)}
body{margin:0;padding-inline:env(safe-area-inset-left,0px) env(safe-area-inset-right,0px);background:var(--vb-bg);color:var(--vb-text-muted);font:400 17px/28px var(--f-text);font-synthesis:none;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
p,li,dd,td{text-wrap:pretty}
h1,h2,h3{text-wrap:balance}
a{color:var(--vb-text);text-decoration-line:underline;text-decoration-color:color-mix(in srgb,var(--vb-brand) 75%,transparent);text-decoration-thickness:1.5px;text-underline-offset:3px}
a:hover{color:var(--vb-brand)}
:focus-visible{outline:2px solid var(--vb-text);outline-offset:2px;box-shadow:0 0 0 2px var(--vb-bg)}
a,button,summary{touch-action:manipulation}
q{quotes:"\201C" "\201D" "\2018" "\2019";color:var(--vb-text)}
.ic{display:block;width:20px;height:20px;flex:none}
.wrap{width:100%;max-width:calc(var(--wrap) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}

/* app bar */
.appbar{background:var(--vb-bg);border-bottom:var(--bw) solid var(--vb-border)}
.status{background:var(--vb-surface);border-bottom:var(--bw) solid var(--hair)}
.status-in{display:flex;align-items:flex-start;gap:8px;padding-block:6px}
.status-ic .ic{width:14px;height:14px;margin-top:1px;color:var(--vb-brand)}
.status-tag{margin:0;font:500 14px/19px var(--f-text);color:var(--vb-text-muted)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px}
.mark{display:inline-flex;align-items:center;gap:8px;min-height:44px;font:800 21px/1 var(--f-head);letter-spacing:-.02em;color:var(--vb-text);text-decoration:none}
.mark:hover{color:var(--vb-text)}
.mark-ic .ic{width:22px;height:22px;color:var(--vb-brand)}
.mark-a{margin-left:1px;font-weight:500;letter-spacing:0;color:var(--vb-brand)}
.about{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:var(--bw) solid var(--vb-border);border-radius:var(--r-btn);font:700 15px/1 var(--f-head);color:var(--vb-text);text-decoration:none}
.about .ic{width:18px;height:18px;color:var(--vb-brand)}
.about:hover{border-color:var(--vb-brand);color:var(--vb-text)}
.about[aria-current="page"]{background:var(--vb-surface-3)}
.util{display:flex;flex:none}
/* phones: the independence strip stays on the first screen (it may wrap to two lines) and the app bar is one row */
@media (max-width:879px){.bar{min-height:48px}}

/* segmented control */
.segment{display:flex;gap:4px;padding:4px;background:var(--vb-surface-2);border:var(--bw) solid var(--vb-border);border-radius:var(--r-card)}
.seg{flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 18px;border-radius:8px;font:700 15px/1 var(--f-head);color:var(--vb-text-muted);text-decoration:none;white-space:nowrap}
.seg .ic{width:18px;height:18px}
.seg:hover{background:var(--vb-surface-3);color:var(--vb-text)}
.seg[aria-current="page"]{background:var(--vb-brand);color:var(--vb-on-brand)}
.segment-top{display:none}
.segment-row{padding:3px}
main > .segment-row{width:calc(100% - 2 * var(--gutter));margin:16px auto 0}
.segment-row .seg{min-height:44px;padding:0 6px;font-size:14px;gap:6px}
.segment-row .seg::after{content:"";flex:none;width:12px;height:12px;margin-left:-2px;background:var(--l-chev) center/12px no-repeat;rotate:-90deg;opacity:.75}
.segment-row .seg[aria-current="page"]::after{content:none}
@media (max-width:379px){.segment-row .seg::after{content:none}}
@media (min-width:880px){
  .bar{display:grid;grid-template-columns:1fr auto 1fr;min-height:68px}
  .bar .util{justify-self:end}
  .segment-top{display:flex}
  .segment-row{display:none}
  .status-in{align-items:center;padding-block:7px}
  .status-tag{font-size:14px;line-height:20px}
}

/* device stage */
.stage{display:grid;gap:10px;padding-block:10px 0}
/* the name row reads like an app title: centred, the Velobet plate first */
.hero-name{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 12px}
.stage h1{margin:0;font:800 36px/40px var(--f-head);letter-spacing:-.025em;color:var(--vb-text)}
.hero-name .plate{order:-1}
.plate{display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 12px;background:var(--vb-surface-3);border:var(--bw) solid var(--vb-border);border-radius:10px}
.plate img{width:88px;aspect-ratio:480/85}
.lede{margin:6px 0 0;font:600 15px/20px var(--f-head);text-align:center;color:var(--vb-text)}
/* the answer sits on its own panel, like the description block of a store listing */
.intro{margin:10px 0 0;padding:10px 12px 11px;background:var(--vb-surface-2);border:var(--bw) solid var(--vb-border);border-radius:var(--r-panel);font-size:16px;line-height:24px}
@media (min-width:380px){.intro{padding:12px 18px 13px;font-size:17px;line-height:27px}.lede{font-size:16px;line-height:22px}}
.stage .deal{margin-top:0}

/* website listing (the deal) */
.listing{padding:10px 14px 14px;background:var(--vb-surface-2);border:var(--bw) solid var(--vb-border);border-radius:var(--r-panel)}
/* app-listing row: a rounded icon tile, then the site line */
.listing-head{display:flex;align-items:center;gap:12px}
.listing-tile{flex:none;display:flex;align-items:center;justify-content:center;width:112px;height:48px;background:var(--vb-bg);border:var(--bw) solid var(--vb-border);border-radius:14px}
.listing-tile img{width:92px;aspect-ratio:480/85}
.listing-site{display:flex;align-items:flex-start;gap:6px;margin:0;font:500 14px/20px var(--f-text);color:var(--vb-text-muted)}
.listing-ic .ic{width:16px;height:16px;margin-top:1px;color:var(--vb-brand)}
.listing-offer{margin:12px 0 0;font:800 22px/26px var(--f-head);letter-spacing:-.01em;color:var(--vb-text)}
.listing-terms{display:grid;gap:4px;margin:8px 0 0;padding:0;list-style:none;font-size:16px;line-height:24px;color:var(--vb-text-muted)}
.listing-terms li{position:relative;padding-left:16px}
.listing-terms li::before{content:"";position:absolute;left:1px;top:10px;width:5px;height:5px;border-radius:1px;background:var(--vb-text-muted);opacity:.55}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border-radius:var(--r-btn);background:var(--vb-brand);color:var(--vb-on-brand);font:800 15px/1 var(--f-head);letter-spacing:.04em;text-transform:uppercase;text-decoration:none}
.btn:hover{background:color-mix(in srgb,var(--vb-brand) 86%,#EAEAEA);color:var(--vb-on-brand)}
.btn .ic{width:18px;height:18px}
.listing-btn{margin-top:14px}
.listing-fine{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:12px;font-size:14px;line-height:21px;color:var(--vb-text-muted)}
.listing-fine p{flex-basis:100%;margin:0;font-size:16px;line-height:24px}
.listing-ad{font-weight:700}
.age{display:inline-flex;align-items:center;justify-content:center;flex:none;min-width:42px;height:26px;padding:0 7px;border:2px solid var(--vb-error);border-radius:13px;font:800 14px/1 var(--f-head);color:var(--vb-text)}

/* the capture in a desktop frame */
.frame{margin:4px 0 0;padding:12px 10px 12px;background:radial-gradient(110% 80% at 50% 100%,var(--glow),transparent 62%),var(--vb-surface);border:var(--bw) solid var(--vb-border);border-radius:var(--r-panel)}
.frame-screen{position:relative;margin-bottom:30px;padding:6px;background:var(--vb-bg);border:var(--bw) solid var(--vb-border);border-radius:10px;box-shadow:0 0 0 3px var(--vb-surface-3)}
.frame-screen img{width:100%;border-radius:3px}
.frame-screen::before{content:"";position:absolute;left:50%;top:calc(100% + 4px);width:16%;height:18px;translate:-50% 0;background:linear-gradient(var(--vb-border),var(--vb-surface-3));clip-path:polygon(22% 0,78% 0,100% 100%,0 100%)}
.frame-screen::after{content:"";position:absolute;left:50%;top:calc(100% + 22px);width:30%;height:6px;translate:-50% 0;border-radius:3px 3px 6px 6px;background:var(--vb-surface-3);border:var(--bw) solid var(--vb-border)}
.frame figcaption{font:500 14px/21px var(--f-text);text-align:center;color:var(--vb-text-muted)}

@media (min-width:1024px){
  .stage{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:32px;row-gap:28px;align-items:start;padding-block:56px 0}
  /* store-page split: title and description at left, the listing card at right, the capture under both */
  .hero{grid-column:1/span 7;grid-row:1}
  .stage .deal{grid-column:8/span 5;grid-row:1;margin-top:0}
  .stage .frame{grid-column:3/span 8;grid-row:2;margin:12px 0 0;padding:28px 0 0;background:radial-gradient(58% 46% at 50% 52%,var(--glow),transparent 72%);border:0;border-radius:0}
  .stage h1{font-size:68px;line-height:68px}
  .hero-name{justify-content:flex-start;gap:16px 20px}
  .plate{height:48px;padding:0 16px;border-radius:12px}
  .plate img{width:116px}
  .lede{margin:18px 0 0;font:500 21px/30px var(--f-head);text-align:left}
  .intro{margin-top:16px;padding:16px 20px 17px;font-size:17px;line-height:28px}
  .listing{padding:20px 22px 20px}
  .listing-tile{width:150px;height:56px;border-radius:16px}
  .listing-tile img{width:124px}
  .listing-site{font-size:14px;line-height:20px;padding-top:2px}
  .listing-offer{margin-top:16px;font-size:28px;line-height:32px}
  .listing-terms{margin-top:10px;font-size:17px;line-height:26px}
  .listing-terms li::before{top:11px}
  /* from 1024 the button is sized to its label (a full-width lime bar reads as a band on a desktop card) */
  .listing-btn{width:fit-content;max-width:100%;margin-top:18px;padding-inline:24px}
  .frame-screen{margin-bottom:46px;padding:10px;border-radius:14px;box-shadow:0 0 0 4px var(--vb-surface-3)}
  .frame-screen::before{top:calc(100% + 5px);height:28px}
  .frame-screen::after{top:calc(100% + 32px);height:9px}
}

/* chapters and the 52ch lane */
main > section,main > .chapter{margin-top:var(--group);padding-inline:var(--gutter)}
main > section > h2{max-width:30ch;margin:0 auto;font:800 27px/32px var(--f-head);letter-spacing:-.015em;text-align:center;color:var(--vb-text)}
main > section > :is(p,ul,ol:not(.steps)),.chapter-copy{max-width:var(--lane);margin-inline:auto}
main > section > h2 + :is(p,ul,ol,.chapter-copy){margin-top:24px}
.chapter-copy > p,main > section > p{margin-block:0 18px}
.chapter-copy > p:last-child{margin-bottom:0}
@media (min-width:1024px){main > section > h2{font-size:34px;line-height:40px}}
.chapter-copy h3,main > section > h3{max-width:var(--lane);margin:32px auto 10px;font:700 20px/26px var(--f-head);color:var(--vb-text)}
.chapter-copy :is(ul,ol){margin:0 0 18px;padding-left:1.25em}
.chapter-copy li{margin-top:6px}
.chapter-copy li::marker{color:var(--vb-brand)}
/* phones: the selector lead-in reads as an instruction card above the settings list */
@media (max-width:719px){[data-tool] > .chapter-copy{padding:14px 18px 15px;background:var(--vb-surface-2);border-radius:var(--r-panel)}}
@media (min-width:1024px){.chapter-copy h3,main > section > h3{font-size:24px;line-height:30px}}

/* callout */
.tip{position:relative;margin-top:24px;padding:2px 0 0 44px;font-size:17px;line-height:27px;color:var(--vb-text-muted)}
.tip::before{content:"";position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;background:var(--y-tip) center/17px no-repeat,color-mix(in srgb,var(--vb-accent) 13%,transparent)}

/* caution: the one warning a reader must not miss (fake files and store pages) */
.caution{position:relative;margin-block:0 18px;padding:14px 16px 16px 54px;background:var(--vb-surface-2);border:var(--bw) solid color-mix(in srgb,var(--vb-error) 32%,var(--vb-border));border-radius:var(--r-card);color:var(--vb-text)}
.caution::before{content:"!";content:"!" / "";position:absolute;left:14px;top:16px;display:grid;place-items:center;width:26px;height:26px;border:2px solid var(--vb-error);border-radius:50%;font:800 15px/1 var(--f-head);color:var(--vb-text)}
@media (min-width:720px){.caution{padding:18px 22px 18px 64px}.caution::before{left:20px;top:20px;width:30px;height:30px}}

/* device selector (the tool): four device keys, then one pane per device */
.selector .pick-bar{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-width:var(--spec);margin:28px auto 0}
.pick-bar button{display:flex;align-items:center;gap:10px;min-height:56px;padding:8px 12px 8px 8px;border:var(--bw) solid var(--vb-border);border-radius:var(--r-card);background:var(--vb-surface-2);font:700 14px/18px var(--f-head);text-align:left;color:var(--vb-text-muted);cursor:pointer;-webkit-tap-highlight-color:transparent}
.pick-bar button::before{content:"";flex:none;width:26px;height:26px;margin-left:4px;background:var(--vb-text-muted);-webkit-mask:var(--m-android) center/contain no-repeat;mask:var(--m-android) center/contain no-repeat}
.pick-bar button:nth-child(2)::before{-webkit-mask-image:var(--m-phone);mask-image:var(--m-phone)}
.pick-bar button:nth-child(3)::before{-webkit-mask-image:var(--m-monitor);mask-image:var(--m-monitor)}
.pick-bar button:nth-child(4)::before{-webkit-mask-image:var(--m-laptop);mask-image:var(--m-laptop)}
.pick-bar button:hover{border-color:color-mix(in srgb,var(--vb-brand) 55%,var(--vb-border));color:var(--vb-text)}
.pick-bar button[aria-pressed="true"]{border-color:var(--vb-brand);background:var(--vb-surface-3);box-shadow:inset 0 0 0 1px var(--vb-brand);color:var(--vb-text)}
.pick-bar button[aria-pressed="true"]::before{background:var(--vb-brand)}
.pane{max-width:var(--spec);margin:32px auto 0}
.pane h3{display:flex;align-items:center;gap:12px;margin:0;font:700 20px/26px var(--f-head);color:var(--vb-text)}
.pane h3::before{content:"";flex:none;width:44px;height:44px;border-radius:var(--r-card);background:var(--l-android) center/24px no-repeat,var(--vb-surface-3)}
.dv-iphone h3::before{background-image:var(--l-phone)}
.dv-windows h3::before{background-image:var(--l-monitor)}
.dv-mac h3::before{background-image:var(--l-laptop)}
.pane .steps{display:grid;gap:10px;margin:16px 0 0;padding:0;list-style:none;counter-reset:step}
.pane .steps li{counter-increment:step;display:block;padding:14px 16px 16px;background:var(--vb-surface-2);border:var(--bw) solid var(--vb-border);border-radius:var(--r-card);font-size:17px;line-height:26px;color:var(--vb-text)}
.pane .steps li::before{content:counter(step);display:block;margin-bottom:10px;font:800 30px/1 var(--f-head);color:var(--vb-brand)}
/* alternative routes (either one works): a choice ring instead of a number */
.pane .routes li::before{content:"";width:22px;height:22px;margin-bottom:12px;border:2px solid var(--vb-brand);border-radius:50%}
.steps q{white-space:nowrap;quotes:none;padding:1px 7px 2px;border:var(--bw) solid var(--vb-border);border-radius:6px;background:var(--vb-bg);font:600 .9em/1.5 var(--f-ui);color:var(--vb-text);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.pane-result,.pane-note{display:flex;align-items:flex-start;gap:10px;margin:16px 0 0;font-size:16px;line-height:25px;color:var(--vb-text-muted)}
.pane-result::before,.pane-note::before{content:"";flex:none;width:22px;height:22px;border-radius:50%;background:var(--k-check) center/13px no-repeat,var(--vb-brand)}
.pane-note::before{background:var(--y-tip) center/15px no-repeat,color-mix(in srgb,var(--vb-accent) 14%,transparent)}
@media (max-width:719px){
  .pane .steps{grid-template-columns:minmax(0,1fr);gap:8px}
  .pane .steps li{position:relative;padding:14px 16px 14px 56px}
  .pane .steps li::before{position:absolute;left:18px;top:13px;margin:0;font-size:26px}
  .pane .routes li::before{top:16px;width:20px;height:20px}
}
@media (min-width:720px){
  .selector .pick-bar{grid-template-columns:repeat(4,1fr);gap:10px}
  .pick-bar button{flex-direction:column;justify-content:center;gap:10px;min-height:104px;padding:14px 10px;font-size:15px;line-height:19px;text-align:center}
  .pick-bar button::before{width:30px;height:30px;margin-left:0}
  .pane .steps{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:22px}
  .pane .steps li{padding:18px 20px 20px}
  .pane .steps li::before{font-size:38px}
}
.selector:not(:has(.pick-bar)) .pane + .pane{margin-top:48px}
/* phones: the four device keys read as one settings list with a choice ring */
@media (max-width:719px){
  .selector .pick-bar{grid-template-columns:1fr;gap:0;background:var(--vb-surface-2);border:var(--bw) solid var(--vb-border);border-radius:var(--r-panel);overflow:hidden}
  .pick-bar button{min-height:56px;padding:8px 16px 8px 10px;border:0;border-top:var(--bw) solid var(--hair);border-radius:0;background:transparent;font-size:16px}
  .pick-bar button:first-child{border-top:0}
  .pick-bar button::after{content:"";flex:none;width:20px;height:20px;margin-left:auto;border:2px solid var(--vb-border);border-radius:50%}
  .pick-bar button[aria-pressed="true"]{border-color:var(--hair);background:var(--vb-surface-3);box-shadow:inset 3px 0 0 var(--vb-brand)}
  .pick-bar button[aria-pressed="true"]::after{border:6px solid var(--vb-brand)}
}
@media (prefers-reduced-motion:no-preference){
  .selector:is(:focus-within,:hover) .pane{transition:opacity .24s ease,translate .24s ease}
  @starting-style{.selector:is(:focus-within,:hover) .pane{opacity:0;translate:0 6px}}
  .pick-bar button{transition:border-color .15s ease,color .15s ease}
}

/* device feature matrix */
.feature-matrix{max-width:var(--spec);margin:28px auto;overflow-x:auto;background:var(--vb-surface);border:var(--bw) solid var(--vb-border);border-radius:var(--r-panel)}
.feature-matrix table{width:100%;border-collapse:collapse}
.feature-matrix caption{padding:14px 20px;text-align:left;font:700 15px/21px var(--f-head);color:var(--vb-text);background:var(--vb-surface-2);border-bottom:var(--bw) solid var(--vb-border)}
.feature-matrix th,.feature-matrix td{padding:16px 20px;text-align:left;vertical-align:top;border-bottom:var(--bw) solid var(--hair)}
.feature-matrix tbody tr:last-child > *{border-bottom:0}
.feature-matrix thead th{padding-block:12px;font:600 14px/20px var(--f-text);color:var(--vb-text-muted)}
.feature-matrix tbody th{font:700 17px/24px var(--f-head);color:var(--vb-text);white-space:nowrap}
.feature-matrix tbody th.dv::before{content:"";display:inline-block;width:30px;height:30px;margin-right:12px;vertical-align:-8px;border-radius:9px;background:var(--l-android) center/18px no-repeat,var(--vb-surface-3)}
.feature-matrix tbody th.dv-iphone::before{background-image:var(--l-phone)}
.feature-matrix tbody th.dv-windows::before{background-image:var(--l-monitor)}
.feature-matrix tbody th.dv-mac::before{background-image:var(--l-laptop)}
.feature-matrix td{font-size:15px;line-height:22px;color:var(--vb-text)}
.feature-matrix:not(.devices) table{min-width:560px}
@media (max-width:719.98px){.feature-matrix:not(.devices) table{min-width:0}.feature-matrix tbody th{white-space:normal}.feature-matrix th,.feature-matrix td{padding:14px 16px}}
@media (max-width:719px){
  .feature-matrix.devices{overflow:visible;background:none;border:0;border-radius:0}
  .feature-matrix.devices :is(table,tbody,tr,th,td){display:block}
  .feature-matrix.devices thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .feature-matrix.devices caption{display:block;padding:0 0 4px;text-align:center;background:none;border:0}
  .feature-matrix.devices tbody tr{margin-top:8px;padding:14px 16px;background:var(--vb-surface-2);border-radius:var(--r-card)}
  .feature-matrix.devices :is(th,td),.feature-matrix.devices tbody tr:last-child > *{padding:0;border:0}
  .feature-matrix.devices td{margin-top:10px}
  .feature-matrix.devices td::before{content:attr(data-label);display:block;font:600 14px/19px var(--f-text);color:var(--vb-text-muted)}
}

/* timeline: what happens, in order, from the browser to the icon */
.install-line{max-width:var(--lane);margin:28px auto;padding:0;list-style:none}
.install-line li{position:relative;padding:0 0 22px 36px}
.install-line li::before{content:"";position:absolute;left:4px;top:6px;width:14px;height:14px;border-radius:50%;background:var(--vb-bg);border:2px solid var(--vb-brand)}
.install-line li::after{content:"";position:absolute;left:10px;top:24px;bottom:4px;width:2px;border-radius:1px;background:var(--vb-border)}
.install-line li:last-child{padding-bottom:0}
.install-line li:last-child::before{background:var(--vb-brand)}
.install-line li:last-child::after{content:none}
.install-line strong{display:block;font:700 17px/24px var(--f-head);color:var(--vb-text)}
.install-line p{margin:4px 0 0;font-size:17px;line-height:27px}

/* checklist: what to have ready before installing */
.ready-list{display:grid;gap:12px;max-width:var(--lane);margin:24px auto;padding:18px 18px 18px 20px;list-style:none;background:var(--vb-surface);border:var(--bw) solid var(--vb-border);border-radius:var(--r-panel)}
.ready-list li{position:relative;padding-left:36px;font-size:17px;line-height:26px;color:var(--vb-text)}
.ready-list li::before{content:"";position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:6px;background:var(--k-check) center/13px no-repeat,var(--vb-brand)}

/* callout and steps when they sit directly in a chapter */
main > section > .tip{max-width:var(--lane);margin-inline:auto}

/* contents box: device chapter cards after the selector (pages of 2,500+ words only) */
main > .chapters{width:min(var(--spec),calc(100% - 2 * var(--gutter)));margin:40px auto 0}
.chapters ol{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px;margin:0;padding:0;list-style:none;counter-reset:chapter}
.chapters li{counter-increment:chapter}
.chapters a{display:flex;align-items:center;gap:12px;min-height:52px;height:100%;padding:10px 14px;background:var(--vb-surface-2);border:var(--bw) solid var(--vb-border);border-radius:var(--r-card);font:700 15px/20px var(--f-head);color:var(--vb-text);text-decoration:none}
.chapters a::before{content:counter(chapter);flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:var(--vb-surface-3);font:800 14px/1 var(--f-head);color:var(--vb-brand)}
.chapters a:hover{border-color:var(--vb-brand);color:var(--vb-text)}

/* operator card */
main > .opbox{width:min(var(--spec),calc(100% - 2 * var(--gutter)));margin:var(--group) auto 0}
.opbox{border:var(--bw) solid var(--vb-border);border-radius:var(--r-panel);overflow:hidden;background:var(--vb-surface-2)}
.opbox-cap{margin:0;padding:12px 18px;font:700 15px/21px var(--f-head);color:var(--vb-text);background:var(--vb-surface-3);border-bottom:var(--bw) solid var(--vb-border)}
.opbox dl{display:grid;gap:1px;margin:0;background:var(--hair)}
.opbox dl > div{padding:16px 18px;background:var(--vb-surface-2)}
.opbox dt{font:600 14px/20px var(--f-text);color:var(--vb-text-muted)}
.opbox dd{margin:4px 0 0;font-size:16px;line-height:25px;color:var(--vb-text);overflow-wrap:anywhere}
@media (min-width:720px){.opbox dl{grid-template-columns:1fr 1fr}.opbox dl > div{padding:18px 22px}}

/* centred narrow accordion */
main > .faq{width:min(calc(var(--lane) + 2 * var(--gutter) + 36px),100%);margin-inline:auto}
.faq > h2{max-width:none}
.faq details{margin-top:8px;background:var(--vb-surface-2);border:var(--bw) solid var(--vb-border);border-radius:var(--r-card)}
.faq h2 + details{margin-top:28px}
.faq details[open]{border-color:color-mix(in srgb,var(--vb-brand) 40%,var(--vb-border))}
.faq details:not([open]):hover{border-color:color-mix(in srgb,var(--vb-brand) 28%,var(--vb-border))}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:56px;padding:12px 14px 12px 18px;border-radius:var(--r-card);list-style:none;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary h3{margin:0;font:700 20px/26px var(--f-head);color:var(--vb-text)}
.faq summary::after{content:"";flex:none;width:30px;height:30px;border-radius:50%;background:var(--l-chev) center/16px no-repeat,var(--vb-surface-3)}
.faq details[open] summary::after{rotate:180deg}
.faq details > p{margin:0;padding:0 18px 18px;font-size:17px;line-height:27px}
@media (prefers-reduced-motion:no-preference){.faq summary::after{transition:rotate .2s ease}}
@media (min-width:1024px){.faq summary h3{font-size:19px;line-height:25px}}

/* RG close: centred panel */
main > .rg{width:min(var(--spec),calc(100% - 2 * var(--gutter)));margin:var(--group) auto 0;padding:26px 20px 24px;background:var(--vb-surface);border:var(--bw) solid var(--vb-border);border-radius:var(--r-panel)}
main > .rg > h2{max-width:none;font-size:24px;line-height:30px;text-align:left}
main > .rg > p{margin:16px auto 0;max-width:52ch;color:var(--vb-text-muted)}
@media (min-width:720px){main > .rg{text-align:center}main > .rg > h2{text-align:center}}
@media (min-width:1024px){main > .rg{padding:36px 40px 34px}main > .rg > h2{font-size:28px;line-height:34px}}

/* byline */
.byline{display:flex;align-items:flex-start;gap:14px;width:min(var(--lane),calc(100% - 2 * var(--gutter)));margin:40px auto var(--group);padding-top:20px;border-top:var(--bw) solid var(--hair)}
.byline-ic{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--vb-surface-3);color:var(--vb-brand)}
.byline-ic .ic{width:22px;height:22px}
.byline-tx p{margin:0}
.byline-name{font:700 16px/22px var(--f-head);color:var(--vb-text)}
.byline-note{margin-top:4px!important;font-size:15px;line-height:23px}
.byline-up{margin-top:6px!important;font-size:14px;line-height:20px;color:var(--vb-text-muted)}

/* footer: device appendix, read like a manual's back page: the safety label first, then the device index, the contents, the imprint */
.appendix{padding-block:44px calc(40px + env(safe-area-inset-bottom,0px));background:var(--vb-surface);border-top:var(--bw) solid var(--vb-border)}
/* the RG line as a printed label: ring on top, text under it, inside a dashed box */
.appendix-rg{display:grid;justify-items:start;gap:10px;padding:16px 18px 18px;border:var(--bw) dashed var(--vb-border);border-radius:var(--r-panel)}
.appendix-rg p{margin:0;font-size:14px;line-height:21px}
.appendix-nav{margin-top:28px}
.appendix-devices{display:grid;grid-template-columns:1fr;gap:10px;margin:0;padding:0;list-style:none}
.appendix-devices li{display:flex}
.appendix-devices .dev-tile{flex:1}
/* phones: each device is an index row, icon left */
.dev-tile{display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;align-items:center;column-gap:14px;min-height:76px;padding:14px 16px;background:var(--vb-surface-2);border:var(--bw) solid var(--vb-border);border-radius:var(--r-panel);color:var(--vb-text);text-decoration:none}
.dev-tile:hover{border-color:var(--vb-brand);color:var(--vb-text)}
.dev-tile[aria-current="page"]{border-color:var(--vb-brand)}
.dev-tile-ic{grid-row:1/span 2;display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-card);background:var(--vb-surface-3);color:var(--vb-brand)}
.dev-tile-ic .ic{width:24px;height:24px}
.dev-tile-name{font:700 17px/22px var(--f-head)}
.dev-tile-note{font-size:14px;line-height:20px;color:var(--vb-text-muted)}
/* the contents: one column of link groups on phones */
.appendix-cols{display:grid;grid-template-columns:1fr;gap:20px;margin-top:28px}
.appendix-head{margin:0 0 2px;font:700 14px/18px var(--f-head);letter-spacing:.06em;color:var(--vb-brand)}
.appendix-col ul{margin:0;padding:0;list-style:none}
.appendix-col li{font-size:14px;line-height:20px;color:var(--vb-text-muted)}
.appendix-col :is(a,span){display:inline-flex;align-items:center;min-height:44px}
.appendix-col a{color:var(--vb-text-muted);text-decoration-color:var(--vb-border)}
.appendix-col a:hover{color:var(--vb-brand);text-decoration-color:var(--vb-brand)}
/* the imprint closes the page */
.appendix-notes{max-width:34rem;margin-top:28px}
.appendix-indep{display:flex;align-items:flex-start;gap:10px;margin:0;font:700 17px/24px var(--f-head);color:var(--vb-text)}
.appendix-indep .ic{flex:none;width:22px;height:22px;margin-top:1px;color:var(--vb-brand)}
.appendix-pub{margin:10px 0 0 32px;font-size:14px;line-height:21px;color:var(--vb-text-muted)}
/* phones: compact device rows and wider breaks between the footer blocks */
@media (max-width:719px){
  .appendix-nav,.appendix-cols,.appendix-notes{margin-top:40px}
  .appendix-devices{gap:8px}
  .dev-tile{min-height:0;padding:10px 14px}
  .dev-tile-ic{width:40px;height:40px}
}
/* tablet and up: three device cards side by side, centred */
@media (min-width:720px){
  .appendix-devices{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .dev-tile{grid-template-columns:none;grid-template-rows:auto auto 1fr;justify-items:center;align-content:start;row-gap:8px;padding:20px 16px 18px;text-align:center}
  .dev-tile-ic{grid-row:auto;border-radius:50%}
  .appendix-rg{max-width:34rem}
  .appendix-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* desktop: the label runs as one strip across the top (ring left), the device row under it, contents left, imprint right */
@media (min-width:1024px){
  .appendix{padding-block:72px calc(56px + env(safe-area-inset-bottom,0px))}
  .appendix > .wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:32px;row-gap:32px;align-items:start}
  .appendix-rg{grid-column:1/-1;grid-row:1;justify-self:start;max-width:44rem;grid-template-columns:auto 1fr;align-items:start;column-gap:16px}
  .appendix-nav{grid-column:1/-1;grid-row:2;margin-top:0}
  .appendix-notes{grid-column:1/-1;grid-row:3;margin-top:0}
  .appendix-cols{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:32px}
  .appendix-rg p{max-width:30rem}
  .appendix-indep{font-size:20px;line-height:28px}
  .appendix-pub{max-width:30rem}
}
@supports (grid-template-columns:subgrid){
  @media (min-width:1024px){
    .appendix-nav{grid-row:2/span 2;display:grid;grid-template-columns:subgrid;grid-template-rows:subgrid}
    .appendix-devices{grid-column:1/-1;grid-row:1}
    .appendix-cols{grid-column:1/span 6;grid-row:2;margin-top:0}
    .appendix-notes{grid-column:7/span 6;grid-row:3;max-width:none}
  }
}

/* inner pages (not redesigned this round: readable with the same parts) */
main > .hero{width:min(var(--lane),calc(100% - 2 * var(--gutter)));margin:0 auto;padding-top:32px}
main > .hero .plate{margin-bottom:14px}
main > .hero h1{margin:0;font:800 32px/38px var(--f-head);letter-spacing:-.02em;color:var(--vb-text)}
main > .hero .lede{font-size:16px;line-height:24px}
main > .hero p:not(.lede){margin:12px 0 0;font-size:16px;line-height:26px}
main > .deal{width:min(var(--lane),calc(100% - 2 * var(--gutter)));margin:20px auto 0}
main > section > .steps{max-width:var(--lane);margin:20px auto;padding:0;list-style:none;counter-reset:step;display:grid;gap:10px}
main > section > .steps li{counter-increment:step;position:relative;padding:14px 16px 14px 58px;background:var(--vb-surface-2);border:var(--bw) solid var(--vb-border);border-radius:var(--r-card);color:var(--vb-text);font-size:17px;line-height:26px}
main > section > .steps li::before{content:counter(step);position:absolute;left:18px;top:12px;font:800 26px/1 var(--f-head);color:var(--vb-brand)}
.tbl{max-width:var(--spec);margin:24px auto;overflow-x:auto;border:var(--bw) solid var(--vb-border);border-radius:var(--r-panel);background:var(--vb-surface)}
.tbl table{width:100%;min-width:520px;border-collapse:collapse}
.tbl caption{padding:14px 18px;text-align:left;font:700 15px/21px var(--f-head);color:var(--vb-text);background:var(--vb-surface-2);border-bottom:var(--bw) solid var(--vb-border)}
.tbl :is(th,td){padding:12px 18px;text-align:left;vertical-align:top;font-size:15px;line-height:22px;border-bottom:var(--bw) solid var(--hair)}
.tbl th{color:var(--vb-text);font-weight:700}
.tbl thead th{font-size:14px;color:var(--vb-text-muted);background:var(--vb-surface-2)}
.tbl tbody tr:last-child > *{border-bottom:0}
@media (min-width:1024px){main > .hero{padding-top:56px}main > .hero h1{font-size:48px;line-height:54px}main > .hero .lede{font-size:19px;line-height:27px}main > .hero p:not(.lede){font-size:17px;line-height:28px}}

/* design-time placeholder for sections still being written */
.v5-pending{max-width:var(--lane);margin:16px auto;padding:12px 16px;border:2px dashed var(--vb-accent);border-radius:8px;font:600 14px/20px var(--f-text);color:var(--vb-accent)}

/* phones (22.10 comparative critique: casino.com read alike with vip in the FAQ and RG close, and with brazil on the first
   screen): the FAQ is one grouped settings list with inset
   dividers, the RG close is a full-width band, and the byline icon is an app-icon square */
@media (max-width:639.98px){
.faq details{margin-top:0;border:var(--bw) solid var(--vb-border);border-top:0;border-radius:0}
.faq h2 + details{margin-top:28px;border-top:var(--bw) solid var(--vb-border);border-radius:var(--r-card) var(--r-card) 0 0}
.faq details:last-of-type{border-radius:0 0 var(--r-card) var(--r-card)}
.faq details + details{background-image:linear-gradient(var(--hair),var(--hair));background-size:calc(100% - 18px) 1px;background-position:18px 0;background-repeat:no-repeat}
.faq details[open]{border-color:var(--vb-border)}
.faq summary{border-radius:0}
.faq summary::after{width:20px;height:20px;background:var(--l-chev) center/16px no-repeat}
main > .rg{width:100%;margin-inline:0;border-radius:0;border-width:1px 0;padding:28px var(--gutter) 26px;background:var(--vb-surface-2)}
main > .rg > h2{text-align:center}
.byline-ic{border-radius:12px}
}

/* v6 (22.10): running text at 17px from 1024 */
@media (min-width:1024px){
  .listing-fine p,.opbox dd,.pane-result,.pane-note{font-size:17px;line-height:26px}
}

/* v6 (22.10, owner 07:49Z): wide screens read as a manual page. Hanging heads | the lane | the device rail, in one
   container that grows with the screen; above 1440 the whole page grows with zoom, so type and container grow together */
/* zoom rounds a 1px rule down to one device pixel; the rules grow with the page so they stay drawn at 2 device pixels */
@media (min-width:1800px){body{zoom:1.25}:root{--bw:1.6px}}
@media (min-width:2400px){body{zoom:1.5}}
@media (min-width:1280px){
  :root{--edge:48px;--cmax:1640px}
  .wrap{max-width:calc(var(--cmax) + 2 * var(--edge));padding-inline:var(--edge)}
  main{display:grid;width:min(100% - 2 * var(--edge),var(--cmax));margin-inline:auto;align-items:start;
    grid-template-columns:[hang-start] minmax(180px,5fr) [hang-end] minmax(32px,1.4fr) [lane-start] minmax(0,510px) [lane-end] minmax(40px,2fr) [rail-start] minmax(280px,6fr) [rail-end]}
  main > *{grid-column:hang-start/lane-end;min-width:0}

  /* home: the stage keeps its store split across the whole container, with a stage glow behind the capture */
  main > .stage{grid-column:hang-start/rail-end;max-width:none;margin:0;padding:56px 0 8px;column-gap:40px;
    background:radial-gradient(52% 42% at 58% 74%,var(--glow),transparent 74%)}
  .stage .frame{grid-column:2/span 10}
  /* store split 6/6 so the boxed intro keeps a 70-75 character line at every width (zoom included) */
  main > .stage .hero{grid-column:1/span 6}
  main > .stage .deal{grid-column:7/span 6}
  main > .stage .intro{max-width:35em;font-size:18px;line-height:29px}
  main > .deal .listing-fine p,main > .stage .listing-fine p{max-width:35em}
  main > .stage .lede{max-width:34em}

  /* chapters: a ruled block, the H2 hangs in the left column and runs with the chapter, everything else in the lane */
  main > section{display:grid;grid-template-columns:subgrid;margin-top:var(--group);padding:32px 0 0;border-top:var(--bw) solid var(--hair)}
  main > section > :is(*,.v6){grid-column:3;max-width:none;margin-inline:0}
  main > section > h2:not(.v6){grid-column:1;grid-row:1/span 40;position:sticky;top:24px;align-self:start;max-width:none;margin:0;padding-right:8px;font-size:30px;line-height:36px;text-align:left}
  main > section > h2 + :is(*,.v6){margin-top:0}
  main > .selector > .pick-bar{max-width:none;margin:28px 0 0}
  /* tables bleed into the right gutter (never under the rail: the gutter is 93px+ from 1280) */
  main > section > :is(.feature-matrix,.tbl){grid-column:3;margin:28px -64px 28px 0}
  main > section > :is(.feature-matrix,.tbl):not(.v6) table{min-width:0}
  main > section > .feature-matrix tbody th{white-space:normal}
  main > .faq{width:auto;margin-inline:0}
  main > .faq > h2 + details{margin-top:0}
  .faq summary h3{font-size:20px;line-height:26px}
  /* the selector's steps read as one numbered column in the lane (no lonely third card) */
  .pane .steps{grid-template-columns:1fr;gap:8px}
  .pane .steps li{position:relative;padding:14px 18px 14px 60px}
  .pane .steps li::before{position:absolute;left:20px;top:13px;margin:0;font-size:28px}
  .pane .routes li::before{top:16px;width:20px;height:20px}

  /* the RG close: the same ruled block on a quiet panel */
  main > section.rg{width:auto;margin:var(--group) 0 0;padding:36px 32px 34px;background:var(--vb-surface);border:var(--bw) solid var(--vb-border);border-radius:var(--r-panel);text-align:left}
  main > .rg > h2{font-size:26px;line-height:32px;text-align:left}
  main > .rg > p{margin:0;max-width:none}

  /* byline: the icon in the hanging column, the note in the lane */
  main > .byline{display:grid;grid-template-columns:subgrid;column-gap:0;width:auto;margin:48px 0 var(--group);padding-top:24px}
  main > .byline .byline-ic{grid-column:2;justify-self:center}
  main > .byline .byline-tx{grid-column:3}

  /* home rail: the contents list runs beside the selector and the chapters */
  main > .chapters{grid-column:rail-start/rail-end;grid-row:2/span 40;position:sticky;top:24px;align-self:start;width:auto;margin:var(--group) 0 0;padding:8px;background:var(--vb-surface);border:var(--bw) solid var(--vb-border);border-radius:var(--r-panel)}
  main > .chapters ol{grid-template-columns:1fr;gap:2px}
  main > .chapters a{min-height:48px;padding:8px 12px 8px 8px;background:transparent;border-color:transparent;font-size:16px;line-height:21px}
  main > .chapters a:hover{background:var(--vb-surface-2);border-color:var(--vb-border)}

  /* inner and utility pages: a title block, then the website listing row */
  main > .hero{grid-column:hang-start/lane-end;grid-row:1;align-self:stretch;display:grid;grid-template-columns:subgrid;align-content:start;width:auto;margin:0;padding:56px 0 8px}
  main > .hero > *{grid-column:3}
  main > .hero .plate{grid-column:1;grid-row:1;justify-self:start;align-self:start;margin:4px 0 0}
  main > .hero h1{font-size:52px;line-height:58px}
  main > .hero .lede{margin-top:16px;font-size:21px;line-height:31px}
  main > .hero p:not(.lede){margin-top:20px}
  /* the website listing row stays in the flow after the title block (v5 archetype), laid out as a store row:
     tile | kicker and offer | button, the terms in two columns under the offer, the disclosure under the row */
  main > .deal{grid-column:hang-start/lane-end;width:auto;margin:36px 0 0;display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:28px;align-items:start;padding:24px 26px 22px}
  main > .deal .listing-head{display:contents}
  main > .deal .listing-tile{grid-column:1;grid-row:1/span 2}
  main > .deal .listing-site{grid-column:2;grid-row:1;padding-top:0}
  main > .deal .listing-offer{grid-column:2;grid-row:2;margin-top:8px}
  main > .deal .listing-terms{grid-column:2/span 2;grid-row:3;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;row-gap:6px;margin-top:16px}
  main > .deal .listing-btn{grid-column:3;grid-row:1/span 2;align-self:center;margin:0}
  main > .deal .listing-fine{grid-column:2/span 2;grid-row:4;margin-top:16px;padding-top:14px;border-top:var(--bw) solid var(--hair)}

  /* inner and utility pages have no captures to pair with their text, so they read as a narrower manual page:
     hanging heads | the lane | a short bleed track for tables, with no rail (the header carries the device switcher,
     so the phone segment row stays hidden here as it is from 880). Every block spans the whole page width.
     r2: the page grows with the window (62% of it, 976-1120px), so each side margin stays near 19-21% from 1600 to 2560;
     the growth goes to the hanging heads (55%) and the table bleed (45%), the lane stays 510px (60-75 characters). */
  main:has(> .hero){width:min(100% - 2 * var(--edge),clamp(976px,62%,1120px));
    grid-template-columns:[hang-start] minmax(200px,calc(320px + (100% - 976px) * .55)) [hang-end] minmax(32px,72px) [lane-start] minmax(0,510px) [lane-end rail-start] minmax(0,calc(72px + (100% - 976px) * .45)) [rail-end]}
  main:has(> .hero) > *,main:has(> .hero) > .hero,main:has(> .hero) > .deal{grid-column:hang-start/rail-end}
  main:has(> .hero) > section > :is(.feature-matrix,.tbl){grid-column:3/span 2;margin:28px 0}
  /* r2: the title block reads as a manual's title page, with no empty hanging column beside it: the plate, then the
     title across the hanging column and the lane, then the standfirst hanging left and the intro in the lane */
  main:has(> .hero) > .hero .plate{grid-column:1;grid-row:1;margin:0}
  main:has(> .hero) > .hero h1{grid-column:1/span 3;grid-row:2;margin-top:24px;font-size:54px;line-height:60px}
  main:has(> .hero) > .hero .lede{grid-column:1;grid-row:3;margin-top:24px;padding-right:4px;font-size:20px;line-height:30px;color:var(--vb-text)}
  main:has(> .hero) > .hero p:not(.lede){grid-column:3;grid-row:3;margin-top:25px}
}
/* v6: the back page as a 2x2 plate from 1280 (safety label | device index, contents | imprint), DOM order kept */
@supports (grid-template-columns:subgrid){
  @media (min-width:1280px){
    .appendix-rg{grid-column:1/span 6;grid-row:1;justify-self:stretch;align-self:stretch;align-content:center;max-width:none;padding:20px 24px}
    .appendix-rg p{max-width:none;font-size:15px;line-height:23px}
    .appendix-nav{grid-row:1/span 2}
    .appendix-devices{grid-column:7/span 6;grid-row:1}
    .appendix-cols{grid-column:1/span 6;grid-row:2}
    .appendix-notes{grid-column:7/span 6;grid-row:2}
  }
}
/* v6: 16px intro on the smallest phones; the space comes back from the strip, the bar and the hero rhythm (deal logo stays on the 360x640 first screen) */
@media (max-width:379.98px){
  .status .status-in{padding-block:4px}
  .bar{min-height:44px}
  .stage{gap:8px;padding-top:6px}
  .lede{margin-top:4px}
  .intro{margin-top:8px;padding:8px 10px 9px}
}