/* Tested in China — v3: calm neo-brutalist, multilingual (en / ko / ja / de)

   LOUDNESS DIALS
   Everything that decides how "loud" the page feels is a custom property in the
   block below. The default values are the calm set. The second block,
   html[data-loud="1"], is roughly the v2-b intensity. Compare by toggling that one
   attribute on <html> (or open any page with ?loud=1).

   --tilt            rotation of the answer block; stamps and tags use a fraction of it
   --shadow-offset   hard-shadow offset of boxes (answer box x1.33, buttons x0.67)
   --border-width    outline weight everywhere
   --accent-area     fill of large highlight surfaces (partner card, selected filter)
   --btn-bg          primary button fill (calm: jade; loud: ink)
   --panel-bg        table head, step cards, current nav item
   --ok-bg/--warn-bg/--down-bg   status stamp fill in list rows (soft tint vs solid)
   --label-*         small labels: sentence-case sans (calm) vs all-caps mono (loud)
   --num-font        figures in the list: sans (calm) vs mono (loud)
   --weight          heading weight
   --grid            dot texture in the answer box
*/
:root{
  --tilt:0deg;
  --shadow-offset:3px;
  --border-width:2px;
  --accent-area:var(--sf); --accent-area-fg:var(--ink);
  --btn-bg:var(--jade); --btn-fg:var(--on);
  --panel-bg:var(--bg); --panel-fg:var(--mut); --panel-sh:var(--sh);
  --cur-bg:var(--ink); --cur-fg:var(--bg);
  --ok-bg:var(--jade-s); --warn-bg:var(--amber-s); --down-bg:var(--red-s);
  --ok-ic:var(--ok-d); --warn-ic:var(--warn-d); --down-ic:var(--down-d);
  --live-bg:var(--sf); --live-dot:var(--down-d);
  --label-font:var(--sans); --label-case:none; --label-track:0; --label-size:12px;
  --num-font:var(--sans);
  --weight:800;
  --grid:transparent;
  --sp1:var(--nd); --sp2:var(--nd); --sp3:var(--nd);
  --sh-dark:#000;
  --ease-out:cubic-bezier(.16,1,.3,1);
}
html[data-loud="1"]{
  --tilt:-2deg;
  --shadow-offset:6px;
  --border-width:2.5px;
  --accent-area:var(--jade); --accent-area-fg:var(--on);
  --btn-bg:var(--blk); --btn-fg:var(--blk-fg);
  --panel-bg:var(--blk); --panel-fg:var(--blk-fg); --panel-sh:var(--jade);
  --cur-bg:var(--jade); --cur-fg:var(--on);
  --ok-bg:var(--jade); --warn-bg:var(--amber); --down-bg:var(--red);
  --ok-ic:var(--on); --warn-ic:var(--on); --down-ic:var(--on);
  --live-bg:var(--red); --live-dot:var(--on);
  --label-font:var(--mono); --label-case:uppercase; --label-track:.1em; --label-size:10.5px;
  --num-font:var(--mono);
  --weight:900;
  --grid:var(--grid-c);
  --sp1:#8fd3ff; --sp2:#ffb4a2; --sp3:#d9c2ff;
  --sh-dark:var(--jade);
}

/* palette */
:root{
  --bg:#f4f1e8; --sf:#fffdf7; --ink:#14211b; --mut:#4a5850; --line:#14211b; --sh:#14211b;
  --jade:#19c08a; --amber:#ffc23d; --red:#ff6a4d; --on:#12201a;
  --jade-s:#d3f0e3; --amber-s:#ffeec4; --red-s:#ffe0d8; --nd:#e9e4d6;
  --ok-d:#0a7753; --warn-d:#8f5600; --down-d:#c23218;
  --blk:#14211b; --blk-fg:#fffdf7;
  --grid-c:rgba(18,32,26,.07); --hd-sh:rgba(20,33,27,.16);
  --cjk:"Apple SD Gothic Neo","Hiragino Sans","Malgun Gothic","Yu Gothic UI","Noto Sans CJK KR","Noto Sans CJK JP";
  --display:"Avenir Next","Segoe UI Variable Display","Inter Display","Inter","Helvetica Neue",ui-sans-serif,system-ui,var(--cjk),sans-serif;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI","Inter","Helvetica Neue",Arial,var(--cjk),sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono","JetBrains Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --tight:-.035em; --tighter:-.055em;
  --wrap:896px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --bg:#0e1612; --sf:#17221d; --ink:#f4f1e8; --mut:#a9b6ae; --line:#f4f1e8; --sh:var(--sh-dark);
  --jade-s:#123d2e; --amber-s:#463408; --red-s:#4a1d14; --nd:#25322c;
  --ok-d:#35d9a3; --warn-d:#ffc23d; --down-d:#ff8067;
  --blk:#f4f1e8; --blk-fg:#14211b;
  --grid-c:rgba(243,238,225,.06); --hd-sh:rgba(0,0,0,.55); color-scheme:dark}}
:root[data-theme=dark]{
  --bg:#0e1612; --sf:#17221d; --ink:#f4f1e8; --mut:#a9b6ae; --line:#f4f1e8; --sh:var(--sh-dark);
  --jade-s:#123d2e; --amber-s:#463408; --red-s:#4a1d14; --nd:#25322c;
  --ok-d:#35d9a3; --warn-d:#ffc23d; --down-d:#ff8067;
  --blk:#f4f1e8; --blk-fg:#14211b;
  --grid-c:rgba(243,238,225,.06); --hd-sh:rgba(0,0,0,.55); color-scheme:dark}

/* per-language type: CJK gets its own fallback chain, looser tracking, smaller connecting words */
html:lang(ko){--cjk:"Apple SD Gothic Neo","Pretendard","Malgun Gothic","Noto Sans KR","Noto Sans CJK KR";--tight:-.02em;--tighter:-.03em;word-break:keep-all}
html:lang(ja){--cjk:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Meiryo","Noto Sans JP","Noto Sans CJK JP";--tight:0em;--tighter:-.01em;line-break:strict}
html:lang(ja) :is(h2,h3,.btn,.sp b,.incident,.answer,.src,.steps p){word-break:auto-phrase}
html:lang(ja) :is(h1,.rest,.doc-h){word-break:keep-all;overflow-wrap:anywhere}
html:lang(de) :is(p,.sp-c,h2){hyphens:auto}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.45 var(--sans);overflow-x:hidden;overflow-wrap:break-word}
html:lang(ko) body,html:lang(ja) body{line-height:1.55}
a{color:inherit}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0;padding:0}
ul,ol{list-style:none}
svg{display:block;flex:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.pg-vpn{--wrap:1040px}
.mut{color:var(--mut)}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--jade);outline-offset:2px}

/* shared pieces */
.box{background:var(--sf);border:var(--border-width) solid var(--line);border-radius:12px;box-shadow:var(--shadow-offset) var(--shadow-offset) 0 var(--sh)}
.btn{--o:calc(var(--shadow-offset)*.67);display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:7px 16px;border:var(--border-width) solid var(--line);border-radius:999px;
  background:var(--btn-bg);color:var(--btn-fg);font:var(--weight) 14px/1.15 var(--display);letter-spacing:-.01em;text-decoration:none;text-align:center;cursor:pointer;
  box-shadow:var(--o) var(--o) 0 var(--sh);transition:transform .14s var(--ease-out)}
@media (hover:hover){.btn:hover{transform:translate(1px,1px);box-shadow:calc(var(--o) - 1px) calc(var(--o) - 1px) 0 var(--sh)}}
.btn:active{transform:translate(var(--o),var(--o));box-shadow:none;transition-duration:0s}
.btn.quiet{background:none;color:var(--ink);box-shadow:none;border-style:dashed;font-weight:700}
.btn.quiet:active{transform:translateY(1px)}
@media (hover:hover){.btn.quiet:hover{transform:none;background:var(--nd)}}
.btn:disabled{background:var(--nd);color:var(--ink);transform:none;box-shadow:none;cursor:default}
.tag{display:inline-block;padding:2px 6px;border:1.5px solid var(--mut);border-radius:5px;color:var(--mut);font:600 var(--label-size)/1.2 var(--label-font);text-transform:var(--label-case);letter-spacing:var(--label-track);white-space:nowrap}
.stamp{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 9px 0 7px;border:var(--border-width) solid var(--line);border-radius:8px;color:var(--ink);
  font:700 12.5px/1 var(--label-font);letter-spacing:var(--label-track);text-transform:var(--label-case);white-space:nowrap;transform:rotate(calc(var(--tilt)*.75))}
html[data-loud="1"] .stamp{color:var(--on)}
.stamp.ok{background:var(--ok-bg);--k:var(--ok-bg)}.stamp.ok svg{color:var(--ok-ic)}
.stamp.warn{background:var(--warn-bg);--k:var(--warn-bg)}.stamp.warn svg{color:var(--warn-ic)}
.stamp.down{background:var(--down-bg);--k:var(--down-bg)}.stamp.down svg{color:var(--down-ic)}
.stamp.nd{background:none;border-style:dashed}
.stamp.solid{color:var(--on);min-height:32px;font-size:13.5px}
.stamp.solid.ok{background:var(--jade);--k:var(--jade)}.stamp.solid.warn{background:var(--amber);--k:var(--amber)}.stamp.solid.down{background:var(--red);--k:var(--red)}
.stamp.solid svg{color:var(--on)}
.bar-ok{fill:var(--jade);background:var(--jade)}.bar-warn{fill:var(--amber);background:var(--amber)}.bar-down{fill:var(--red);background:var(--red)}.bar-nd{fill:var(--mut);opacity:.5}

/* language suggestion bar: one line, shown only when the browser language differs (set before paint) */
.sug{display:none;background:var(--ink);color:var(--bg)}
html[data-sug] .sug{display:block}
.sug .wrap{display:flex;align-items:center;gap:8px;min-height:44px}
.sug a{display:none;align-items:center;min-height:44px;margin-right:auto;font:700 14px/1.2 var(--sans);text-underline-offset:3px}
html[data-sug=en] .sug a[lang=en],html[data-sug=ko] .sug a[lang=ko],html[data-sug=ja] .sug a[lang=ja],html[data-sug=de] .sug a[lang=de]{display:inline-flex}
.sug button{display:grid;place-items:center;width:44px;height:44px;margin-right:-12px;border:0;background:none;color:inherit;cursor:pointer}

/* header */
.hd{position:sticky;top:0;z-index:3;border-bottom:var(--border-width) solid var(--line);background:var(--bg);transition:box-shadow .16s var(--ease-out)}
.hd.stuck{box-shadow:0 var(--shadow-offset) 0 var(--hd-sh)}
.hd-s{height:1px;margin-bottom:-1px}
[id]{scroll-margin-top:76px}
.hd .wrap{display:flex;align-items:center;gap:8px;min-height:60px}
.logo{display:flex;align-items:center;gap:9px;min-height:44px;text-decoration:none;font:var(--weight) 19px/1 var(--display);letter-spacing:-.03em;margin-right:auto;white-space:nowrap}
.lg-b{fill:var(--jade);stroke:var(--line);stroke-width:2.5}
.lg-s{stroke:var(--on);stroke-width:3.4;fill:none}
.nav{display:flex;gap:2px}
.nav a{display:flex;align-items:center;min-height:44px;padding:0 12px;font:700 14px/1.1 var(--display);text-decoration:none;white-space:nowrap;border-radius:999px;border:var(--border-width) solid transparent}
@media (hover:hover){.nav a:hover{border-color:var(--line)}}
.nav a[aria-current]{border-color:var(--line);background:var(--sf)}
html[data-loud="1"] .nav a[aria-current]{background:var(--blk);color:var(--blk-fg)}
.tbtn{width:44px;height:44px;display:grid;place-items:center;border:var(--border-width) solid var(--line);border-radius:50%;background:var(--sf);color:var(--ink);cursor:pointer}
@media (hover:hover){.tbtn:hover,.lang summary:hover{background:var(--nd)}}
.lang{position:relative}
.lang summary{display:flex;align-items:center;gap:6px;height:44px;padding:0 12px 0 10px;border:var(--border-width) solid var(--line);border-radius:999px;background:var(--sf);font:700 13px/1 var(--display);letter-spacing:.02em;cursor:pointer;list-style:none;user-select:none}
.lang summary::-webkit-details-marker{display:none}
.lang ul{position:absolute;right:0;top:calc(100% + 8px);min-width:168px;padding:4px;background:var(--sf);border:var(--border-width) solid var(--line);border-radius:12px;box-shadow:var(--shadow-offset) var(--shadow-offset) 0 var(--sh)}
.lang li a{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;padding:0 12px;border-radius:8px;font:600 15px/1.2 var(--sans);text-decoration:none;white-space:nowrap}
@media (hover:hover){.lang li a:hover{background:var(--nd)}}
.lang li a[aria-current]{font-weight:800}
.lang li a[aria-current]::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--ink)}

/* answer block */
.hero{position:relative;margin-top:24px;padding:26px 28px 22px;background-color:var(--sf);
  background-image:radial-gradient(var(--grid) 1.2px,transparent 1.3px);background-size:14px 14px;
  border:var(--border-width) solid var(--line);border-radius:16px;box-shadow:calc(var(--shadow-offset)*1.33) calc(var(--shadow-offset)*1.33) 0 var(--sh)}
.live{position:absolute;top:-14px;right:22px;display:flex;align-items:center;gap:7px;height:28px;padding:0 12px;background:var(--live-bg);color:var(--ink);
  border:var(--border-width) solid var(--line);border-radius:999px;font:700 12px/1 var(--label-font);letter-spacing:var(--label-track);text-transform:var(--label-case);transform:rotate(calc(var(--tilt)*-1))}
html[data-loud="1"] .live{color:var(--on)}
.live i{width:8px;height:8px;border-radius:50%;background:var(--live-dot);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.25}}
h1{display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px;font-family:var(--display);color:var(--ink)}
.big{flex:none;display:block;padding:.06em .2em .1em;background:var(--jade);color:var(--on);border:var(--border-width) solid var(--line);border-radius:14px;
  box-shadow:var(--shadow-offset) var(--shadow-offset) 0 var(--sh);transform:rotate(var(--tilt));font-weight:900;font-size:108px;line-height:1;letter-spacing:-.06em;white-space:nowrap}
.big b{font-weight:900}
.big i{font-style:normal}
:lang(ko) .big,:lang(ja) .big{letter-spacing:-.02em;padding:.08em .2em .12em}
:lang(ko) .big i,:lang(ja) .big i{font-size:.42em;font-weight:800;letter-spacing:0;margin:0 .1em}
.rest{flex:1 1 6em;min-width:0;max-width:9.5em;font-weight:var(--weight);font-size:50px;line-height:1.05;letter-spacing:var(--tight);text-wrap:balance}
:lang(de) .rest{font-size:42px;max-width:none}
:lang(ko) .rest,:lang(ja) .rest{font-size:38px;line-height:1.2;max-width:none}
.tally{display:flex;gap:6px;margin-top:24px}
.tally li{flex:1 1 auto;display:flex;align-items:center;justify-content:center;gap:5px;height:30px;padding:0 6px;border:var(--border-width) solid var(--line);border-radius:7px;overflow:hidden;
  color:var(--on);font:700 11px/1 var(--sans);white-space:nowrap}
.tally span{overflow:hidden;text-overflow:ellipsis}
.tally .ok{background:var(--jade);--k:var(--jade)}
.tally .warn{background:var(--amber);--k:var(--amber)}
.tally .down{background:var(--red);--k:var(--red)}
.tally .nd{background:none;color:var(--ink);border-style:dashed}
.src{margin-top:14px;font:500 13.5px/1.5 var(--sans);color:var(--mut)}
.src b{color:var(--ink);font-weight:700}
.src .last{white-space:nowrap}

/* incident */
.top{display:flex;align-items:center;gap:12px;margin:24px 0 14px}
.incident{flex:1;min-width:0;display:flex;align-items:center;gap:9px;min-height:44px;padding:0 14px;background:var(--red-s);border:var(--border-width) solid var(--line);border-radius:999px;
  font:700 14px/1.2 var(--sans);--k:var(--red-s)}
.incident svg{color:var(--down-d)}
.incident a{display:flex;align-items:center;min-height:44px;margin:-2px 0;text-underline-offset:3px}

/* status list */
.list{overflow:hidden}
.st{width:100%;border-collapse:collapse}
.st thead th{padding:9px 7px;text-align:left;vertical-align:bottom;font:600 var(--label-size)/1.25 var(--label-font);letter-spacing:var(--label-track);text-transform:var(--label-case);color:var(--panel-fg);background:var(--panel-bg);border-bottom:var(--border-width) solid var(--line)}
.st th:first-child,.st td:first-child{padding-left:18px}
.st th:last-child,.st td:last-child{padding-right:14px}
.st .num{text-align:right}
.st tbody tr{border-top:var(--border-width) solid var(--line)}
.st tbody tr:first-child{border-top:0}
.st tbody tr[hidden]{display:none}
.st td,.st tbody th{padding:7px 7px;vertical-align:middle;text-align:left;font-weight:400}
.c-name{white-space:nowrap}
.nm{display:inline-block;padding:13px 0;margin:-13px 0;font:var(--weight) 17px/1.1 var(--display);letter-spacing:-.03em;text-decoration:none;white-space:nowrap}
@media (hover:hover){.nm:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}}
.c-name .tag{margin-left:7px;vertical-align:2px}
tr:nth-child(even) .stamp{transform:rotate(calc(var(--tilt)*-.5))}
.c-succ,.c-speed{font:700 14px/1.2 var(--num-font);white-space:nowrap;font-variant-numeric:tabular-nums}
.c-succ .u{display:none}
.c-time{font:500 13px/1.2 var(--sans);color:var(--mut);white-space:nowrap}
.c-act{text-align:right!important;width:1%}
.c-act .btn{width:max-content;max-width:176px}
.r-down .nm,.r-nd .nm{color:var(--mut)}

/* sponsors */
.ads{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:26px}
.sp-row,.sp-left{grid-column:1/-1}
.sp-row{display:flex;align-items:center;gap:12px;height:72px;padding:0 16px;background:var(--sf);border:var(--border-width) solid var(--line);border-radius:12px;box-shadow:calc(var(--shadow-offset)*.67) calc(var(--shadow-offset)*.67) 0 var(--sh);text-decoration:none;overflow:hidden}
.sp-logo{flex:none;display:grid;place-items:center;width:44px;height:44px;border:var(--border-width) solid var(--line);border-radius:12px;color:var(--ink);background:var(--nd)}
.sp-logo.c1{background:var(--sp1)}.sp-logo.c2{background:var(--sp2)}.sp-logo.c3{background:var(--sp3)}
html[data-loud="1"] .sp-logo[class*=" c"]{color:var(--on)}
.open .sp-logo{background:none;color:var(--ink);border-style:dashed}
.sp-t{display:flex;flex-direction:column;gap:4px;flex:none}
.sp-t b,.sp b{font:var(--weight) 16px/1.15 var(--display);letter-spacing:-.02em}
.ads small{font:600 11px/1 var(--label-font);letter-spacing:var(--label-track);text-transform:var(--label-case);color:var(--mut)}
html[data-loud="1"] .ads small{font-size:9.5px}
.sp-c{font:500 12.5px/1.35 var(--sans);color:var(--mut);text-wrap:balance}
.sp-row .sp-c{flex:1;min-width:0;font-size:14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sp-go{font:900 20px/1 var(--display)}
.gut{display:contents}
.sp{display:flex;flex-direction:column;align-items:center;gap:7px;height:172px;padding:12px 10px 10px;text-align:center;text-decoration:none;overflow:hidden;
  background:var(--sf);border:var(--border-width) solid var(--line);border-radius:12px;box-shadow:calc(var(--shadow-offset)*.67) calc(var(--shadow-offset)*.67) 0 var(--sh)}
.sp small{align-self:flex-start}
.sp.open{background:none;border-style:dashed;box-shadow:none}
@media (hover:hover){.sp.open:hover{background:var(--sf)}}
.sp-left{font:600 13px/1.2 var(--sans);text-align:right;margin-top:-4px}
.sp-left a{display:inline-flex;align-items:center;min-height:44px;text-underline-offset:3px}

/* sections */
.sec{margin-top:40px}
.sec>h2,.rail-sec h2{font:var(--weight) 25px/1.15 var(--display);letter-spacing:var(--tight);margin-bottom:14px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.steps li{position:relative;padding:16px 16px 18px;background:var(--sf);color:var(--ink);border:var(--border-width) solid var(--line);border-radius:12px;box-shadow:var(--shadow-offset) var(--shadow-offset) 0 var(--panel-sh)}
html[data-loud="1"] .steps li{background:var(--blk);color:var(--blk-fg)}
.steps .n{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:28px;height:28px;border:var(--border-width) solid currentColor;border-radius:50%;font:700 13px/1 var(--mono)}
html[data-loud="1"] .steps .n{background:var(--jade);color:var(--on);border:0}
.steps h3{padding-right:34px;font:700 14px/1.2 var(--label-font);letter-spacing:var(--label-track);text-transform:var(--label-case)}
html[data-loud="1"] .steps h3{font-size:11px}
.fig{display:block;margin:10px 0 6px;font:900 48px/1 var(--display);letter-spacing:-.05em}
.fig small{font-size:20px;letter-spacing:-.02em;font-weight:800}
.steps p{font-size:13.5px;line-height:1.4;color:var(--mut)}
html[data-loud="1"] .steps p{color:inherit;opacity:.9}
.more{display:inline-flex;align-items:center;min-height:44px;margin-top:10px;font:700 14px/1.2 var(--display);text-underline-offset:4px;text-decoration-thickness:2px}
.partner{position:relative;display:grid;grid-template-columns:1fr auto;gap:6px 20px;align-items:center;padding:24px 22px 22px;background:var(--accent-area);color:var(--accent-area-fg)}
.lbl{position:absolute;top:-12px;left:18px;padding:4px 9px;background:var(--sf);color:var(--ink);border:var(--border-width) solid var(--line);border-radius:6px;font:700 11.5px/1 var(--label-font);letter-spacing:var(--label-track);text-transform:var(--label-case)}
.partner h2{font:var(--weight) 25px/1.12 var(--display);letter-spacing:var(--tight)}
.partner p{grid-column:1;font-size:14px;max-width:56ch}
.partner .btn{grid-column:2;grid-row:1/3;max-width:200px}
html[data-loud="1"] .partner .btn{background:#12201a;color:#fffcf4;border-color:#12201a;box-shadow:3px 3px 0 #fffcf4}
.alerts{padding:18px 20px}
.alerts form{display:flex;align-items:center;gap:12px}
.alerts label{font:700 14px/1 var(--label-font);letter-spacing:var(--label-track);text-transform:var(--label-case)}
.alerts input{flex:1;min-width:0;height:46px;padding:0 14px;border:var(--border-width) solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);font:500 15px/1 var(--sans)}
.alerts input::placeholder{color:var(--mut);opacity:1}
.alerts p{margin-top:10px;font-size:13.5px;color:var(--mut)}

/* footer */
.ft{margin-top:52px;padding:24px 0 40px;border-top:var(--border-width) solid var(--line)}
.ft ul{display:flex;flex-wrap:wrap;gap:0 18px;font:700 14px/1.1 var(--display)}
.ft li a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;text-underline-offset:3px}
.ft p{max-width:68ch;margin-top:6px;font-size:13px;color:var(--mut)}
.sample{display:inline-block;margin-top:16px;padding:6px 10px;border:var(--border-width) dashed var(--line);border-radius:6px;font:700 12px/1.2 var(--label-font);letter-spacing:var(--label-track);text-transform:var(--label-case);transform:rotate(calc(var(--tilt)*.75))}

/* ---------- vpn detail ---------- */
.crumb{margin-top:10px;font:600 13.5px/1 var(--sans);color:var(--mut)}
.crumb ol{display:flex;flex-wrap:wrap;align-items:center}
.crumb li+li::before{content:"/";margin:0 7px}
.crumb a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);text-underline-offset:3px}
.cols{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:36px;align-items:start}
.ans{margin-top:8px}
.vh{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.vh h1{font-weight:900;font-size:52px;line-height:1;letter-spacing:var(--tighter)}
.answer{margin-top:16px;font-size:16px;line-height:1.5;max-width:62ch}
.answer b{display:block;margin-bottom:6px;font:var(--weight) 24px/1.2 var(--display);letter-spacing:var(--tight)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:20px;overflow:hidden}
.stats div{padding:14px 16px;border-left:var(--border-width) solid var(--line)}
.stats div:first-child{border-left:0}
.stats dt{font:600 12.5px/1.25 var(--label-font);letter-spacing:var(--label-track);text-transform:var(--label-case);color:var(--mut)}
.stats dd{margin-top:6px;font:900 30px/1.05 var(--display);letter-spacing:-.04em}
.stats dd.txt{font-size:21px;letter-spacing:-.02em;line-height:1.2}
.stats dd.txt small{display:block;margin-top:2px}
.stats dd small{display:inline-block;font:600 13px/1.2 var(--sans);letter-spacing:0;color:var(--mut)}
.buy{display:grid;grid-template-columns:1fr auto;gap:4px 20px;align-items:center;margin-top:20px;padding:18px 20px}
.price{font-size:15px}
.price b{font:900 26px/1 var(--display);letter-spacing:-.03em}
.buy .btn{grid-column:2;grid-row:1/3;min-height:52px;padding:8px 24px;font-size:16px;max-width:220px}
.cons{grid-column:1;font-size:13px;color:var(--mut)}
.note{grid-column:1/-1;display:flex;align-items:flex-start;gap:8px;margin-top:10px;padding-top:12px;border-top:1.5px dashed var(--mut);font-weight:700;font-size:14px;--k:var(--sf)}
.note svg{margin-top:2px;color:var(--warn-d)}
.set{padding:16px 20px}
.set dl{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;align-items:baseline}
.set dt{font:600 13px/1.3 var(--sans);color:var(--mut)}
.set dd{font:var(--weight) 18px/1.25 var(--display);letter-spacing:-.02em}
.set p{margin-top:10px;font-size:14px;color:var(--mut)}
.vsteps li{display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:center;padding:14px 18px;border-top:var(--border-width) solid var(--line)}
.vsteps li:first-child{border-top:0}
.vsteps h3{display:flex;align-items:center;gap:10px;font:var(--weight) 17px/1.2 var(--display);letter-spacing:-.02em}
.vsteps h3 span{flex:none;display:grid;place-items:center;width:26px;height:26px;border:var(--border-width) solid var(--line);border-radius:50%;font:700 12px/1 var(--mono);letter-spacing:0}
.vsteps p{grid-column:1/-1;font-size:14px;color:var(--mut)}
.vsteps .stamp,.vsteps li:nth-child(even) .stamp{transform:none}
.charts{display:grid;gap:14px}
.chart{padding:14px 16px 12px}
.chart figcaption{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font:600 13.5px/1.2 var(--sans);color:var(--mut)}
.chart figcaption b{font:900 22px/1 var(--display);letter-spacing:-.03em;color:var(--ink)}
.plot{display:grid;grid-template-columns:auto 1fr;gap:4px 8px;margin-top:10px}
.plot svg{width:100%;height:96px}
.plot .y{display:flex;flex-direction:column;justify-content:space-between;text-align:right}
.plot .x{grid-column:2;display:flex;justify-content:space-between}
.plot span{font:500 11px/1 var(--mono);color:var(--mut);white-space:nowrap}
:lang(ko) .plot span,:lang(ja) .plot span{font-family:var(--sans)}
.grid{stroke:var(--mut);stroke-opacity:.3;stroke-width:1}
.legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:12px;font-size:13px;color:var(--mut)}
.legend span{display:flex;align-items:center;gap:6px}
.legend i{width:12px;height:12px;border:1.5px solid var(--line);border-radius:3px}
.works li{display:grid;grid-template-columns:minmax(90px,1fr) auto minmax(84px,1fr);gap:10px;align-items:center;min-height:46px;padding:6px 18px;border-top:1.5px solid var(--nd)}
.works li:first-child{border-top:0}
.works b{font:var(--weight) 15.5px/1.2 var(--display);letter-spacing:-.02em}
.wk{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:14px;white-space:nowrap;--k:var(--sf)}
.wk.ok svg{color:var(--ok-d)}.wk.warn svg{color:var(--warn-d)}.wk.down svg{color:var(--down-d)}
.works small{text-align:right;font-size:13px;color:var(--mut)}
.tl{padding:6px 18px}
.tl li{position:relative;padding:10px 0 10px 22px;border-top:1.5px solid var(--nd);font-weight:600}
.tl li:first-child{border-top:0}
.tl li::before{content:"";position:absolute;left:0;top:15px;width:10px;height:10px;border:1.5px solid var(--line);border-radius:50%;background:var(--nd)}
.tl .e-ok::before{background:var(--jade)}
.tl .e-warn::before{background:var(--amber);border-radius:0;clip-path:polygon(50% 0,100% 100%,0 100%);border:0;width:12px;height:11px}
.tl .e-down::before{background:var(--red);border-radius:2px}
.tl time{display:block;font:500 12.5px/1.3 var(--sans);color:var(--mut)}
.disc,.fine{margin-top:14px;font-size:13px;color:var(--mut)}
.rail{position:sticky;top:76px;margin-top:8px;display:grid;gap:22px}
.rail-sec h2{font-size:19px;margin-bottom:10px}
.alt li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 14px;border-top:1.5px solid var(--nd)}
.alt li:first-child{border-top:0}
.alt a{display:flex;align-items:center;min-height:44px;font:var(--weight) 15.5px/1.1 var(--display);letter-spacing:-.02em;text-underline-offset:3px}
.alt span{font:600 12.5px/1 var(--mono);color:var(--mut);white-space:nowrap}
.ad300{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:300px;height:250px;border:var(--border-width) dashed var(--mut);border-radius:12px;color:var(--mut);font-size:13px}
.ad300 b{font:700 13px/1 var(--sans)}
.ad300 span{font:500 12px/1 var(--mono)}

/* ---------- not tested yet (home, rankings) ---------- */
.stamp.nt{background:none;border-style:dashed}
.ntl li{display:grid;grid-template-columns:minmax(110px,170px) 1fr;gap:6px 14px;align-items:center;padding:10px 18px;border-top:1.5px solid var(--nd)}
.ntl li:first-child{border-top:0}
.ntl .nm{display:flex;align-items:center;min-height:44px;margin:0;padding:0}
.ntl dl{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px 20px}
.ntl dl div{display:flex;align-items:center;gap:8px}
.ntl dt{font:600 12.5px/1.2 var(--sans);color:var(--mut)}
.ntl .wk{font-size:13.5px}
.list+.more{margin-top:8px}

/* ---------- rankings ---------- */
.rtabs{display:flex;margin-top:18px;border:var(--border-width) solid var(--line);border-radius:999px;overflow:hidden;background:var(--sf)}
.rtabs a{flex:1 1 auto;display:flex;align-items:center;justify-content:center;min-height:44px;padding:4px 12px;border-left:var(--border-width) solid var(--line);font:700 13.5px/1.15 var(--display);text-align:center;text-decoration:none}
.rtabs a:first-child{border-left:0}
.rtabs a[aria-current]{background:var(--cur-bg);color:var(--cur-fg)}
@media (hover:hover){.rtabs a:not([aria-current]):hover{background:var(--nd)}}
.pg-rank .hero,.pg-cmp .hero{margin-top:24px}
.pg-rank .doc-h,.pg-cmp .doc-h{font-size:40px;line-height:1.08;max-width:22em;text-wrap:balance}
.pg-rank .answer,.pg-cmp .answer{font-size:17px;line-height:1.5}
.answer a{text-underline-offset:3px;text-decoration-thickness:1.5px}
.pg-rank .list,.pg-cmp .list{margin-top:20px}
.pg-cmp .sec .list{margin-top:0}
.rk .c-rk{width:1%;padding-right:2px;font:900 20px/1 var(--display);letter-spacing:-.03em;text-align:center}
.rk th.c-rk{font:600 var(--label-size)/1.25 var(--label-font)}
.rk td{font:700 14px/1.2 var(--num-font);font-variant-numeric:tabular-nums;white-space:nowrap}
.rk td small{display:block;margin-top:3px;font:500 12px/1 var(--sans);color:var(--mut)}
.rk .key{background:var(--bg)}
.rk thead .key{color:var(--ink)}
.rk .sub th{padding:10px 18px 8px;background:var(--panel-bg);color:var(--mut);font:700 13px/1.2 var(--sans);text-align:left}
.rk .sub span{font-weight:500}
.rule-f{font-weight:700;color:var(--ink)!important;margin:0!important}
.set p+p{margin-top:6px}
.cmpl a{gap:.35em}
.cmpl a span,.rail .cmpl a span{font:600 12.5px/1 var(--sans);color:var(--mut)}
.alt.cmpl li{padding:0 14px}

/* ---------- comparison ---------- */
.vs th,.vs td{padding:11px 12px;border-top:1.5px solid var(--nd);text-align:left;vertical-align:middle}
.vs thead th{border-top:0;font:var(--weight) 17px/1.15 var(--display);letter-spacing:-.02em;color:var(--ink)}
.vs thead a{display:inline-flex;align-items:center;min-height:44px;text-underline-offset:3px}
.vs thead th{padding-top:2px;padding-bottom:2px}
.vs tbody tr:first-child :is(th,td){border-top:0}
.vs tbody tr{border-top:0}
.vs tbody th{width:32%;font:600 13.5px/1.3 var(--sans);color:var(--mut)}
.vs td{width:34%;font:700 14.5px/1.25 var(--num-font);font-variant-numeric:tabular-nums}
.vs td small{font:500 12.5px/1 var(--sans);color:var(--mut)}
.vs td.win{background:var(--jade-s);box-shadow:inset 3px 0 0 var(--ok-d)}
.vs td.win .wk{--k:var(--jade-s)}
.vs td .stamp{transform:none}
.cmpgs{display:grid;grid-template-columns:1fr 1fr;gap:10px 28px;margin-top:28px}
.cmpg h2{font:var(--weight) 19px/1.2 var(--display);letter-spacing:-.02em;margin:14px 0 10px}
.pg-nt{--wrap:896px}
.solo .hero .src{margin-top:12px}

/* ---------- advertise ---------- */
.eyebrow{margin-bottom:12px;font:700 15px/1.2 var(--display)}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:18px;font-size:13.5px;color:var(--mut)}
.cta .btn{min-height:50px;padding:8px 22px;font-size:15.5px}
.mapbox{padding:18px}
.map{width:100%;height:auto;max-width:720px;margin:0 auto}
.d-frame rect{fill:var(--bg);stroke:var(--line);stroke-width:2}
.d-frame path{stroke:var(--line);stroke-width:2}
.d-page rect{fill:var(--sf);stroke:var(--mut);stroke-width:1.2}
.d-page path{stroke:var(--mut);stroke-width:1;opacity:.6}
.d-ans{fill:var(--jade);stroke:var(--line);stroke-width:1.5}
.d-slot rect{fill:var(--ink)}
.d-slot text{fill:var(--bg)}
.d-open rect{fill:var(--sf);stroke:var(--line);stroke-width:1.8;stroke-dasharray:4 3}
.d-open text{fill:var(--ink)}
.map text{font:800 14px/1 var(--display);text-anchor:middle}
.map .d-cap{font:600 13px/1 var(--sans);fill:var(--mut)}
.slots td,.slots tbody th{padding:12px 7px}
.slots tbody th{font:var(--weight) 15.5px/1.2 var(--display);letter-spacing:-.02em;white-space:nowrap}
.slots td.num{font:700 14px/1.2 var(--mono);white-space:nowrap}
.dot{display:inline-grid;place-items:center;width:24px;height:24px;margin-right:10px;border-radius:6px;background:var(--ink);color:var(--bg);font:800 13px/1 var(--display);letter-spacing:0;vertical-align:1px}
.dot.free{background:none;color:var(--ink);outline:1.8px dashed var(--line);outline-offset:-2px}
.taken{color:var(--mut)}
.open-tag{display:inline-block;padding:3px 9px;border:var(--border-width) solid var(--line);border-radius:6px;font-weight:800}
.rules{padding:6px 20px}
.rules li{position:relative;padding:13px 0 13px 26px;border-top:1.5px solid var(--nd);font-weight:600;font-size:15.5px}
.rules li:first-child{border-top:0}
.rules li::before{content:"";position:absolute;left:2px;top:19px;width:10px;height:10px;background:var(--ink);border-radius:2px}

/* ---------- facts lists (How we test, per-VPN facts, method page) ---------- */
.facts div{display:grid;grid-template-columns:minmax(120px,210px) 1fr;gap:4px 18px;align-items:baseline;padding:12px 18px;border-top:1.5px solid var(--nd)}
.facts div:first-child{border-top:0}
.facts dt{font:600 13.5px/1.35 var(--sans);color:var(--mut)}
.facts dd{font:600 15px/1.45 var(--sans)}
.facts dt .stamp{transform:none}
.facts a{text-underline-offset:3px}
.copy{display:flex;margin-top:8px;min-height:44px}
.doc-h{font:900 48px/1.02 var(--display);letter-spacing:var(--tighter)}
.pg-doc .answer{font-size:17px}
.prose{max-width:66ch;font-size:15.5px;line-height:1.55}
.prose+.prose{margin-top:10px}
.pg-404 .cta{margin-top:20px}
ol.rules{counter-reset:r}
ol.rules li{counter-increment:r;padding-left:34px}
ol.rules li::before{content:counter(r);top:12px;left:0;width:22px;height:22px;display:grid;place-items:center;color:var(--bg);font:700 12px/1 var(--mono);border-radius:5px}

/* ---------- motion: transform and opacity only, all off under reduced motion ---------- */
.live.off i{animation-play-state:paused}
.tbtn,.lang summary{transition:transform .12s var(--ease-out)}
.tbtn:active,.lang summary:active{transform:scale(.95);transition-duration:0s}
.lang[open] ul{transform-origin:top right;animation:drop .18s var(--ease-out)}
@keyframes drop{from{opacity:0;transform:translateY(-6px) scale(.98)}}
.btn.done{animation:pop .2s var(--ease-out)}
@keyframes pop{from{transform:scale(.94)}}
.grow rect{transform-box:fill-box;transform-origin:50% 100%;animation:grow .4s var(--ease-out) both;animation-delay:var(--d,0ms)}
@keyframes grow{from{transform:scaleY(0)}}
.sp,.sp-row,.sp-go,.arr{transition:translate .14s var(--ease-out)}
.arr{display:inline-block;margin-left:.3em}
@media (hover:hover){
  .sp:not(.open):hover,.sp-row:hover{translate:-1px -1px;box-shadow:calc(var(--shadow-offset)*.67 + 1px) calc(var(--shadow-offset)*.67 + 1px) 0 var(--sh)}
  .sp-row:hover .sp-go,.more:hover .arr{translate:3px 0}
}
::view-transition-old(root),::view-transition-new(root){animation-duration:.2s}

/* gutter sponsors: desktop only */
@media (min-width:1280px){
  .pg-home .ads{display:block}
  .pg-home .gut{display:flex;flex-direction:column;gap:16px;position:fixed;top:50%;transform:translateY(-50%);width:168px;z-index:2}
  .gut-l{left:calc((100vw - 896px)/4 - 84px)}
  .gut-r{right:calc((100vw - 896px)/4 - 84px)}
  .gut-l .sp:first-child{transform:rotate(calc(var(--tilt)*.5))}
  .gut-r .sp:first-child{transform:rotate(calc(var(--tilt)*-.5))}
  .sp-left{margin-top:4px}
}
@media (min-width:1280px) and (max-height:459px){.pg-home .gut{position:absolute;top:620px;transform:none}}

/* narrow desktop / tablet */
@media (max-width:1000px){
  .cols{grid-template-columns:minmax(0,1fr)}
  .rail{position:static;margin-top:32px}
  .ad300{display:none}
}
@media (max-width:900px){
  .big{font-size:92px}.rest{font-size:36px}
  :lang(de) .rest,:lang(ko) .rest,:lang(ja) .rest{font-size:32px}
  .tally li{padding:0;flex:1 1 0}.tally span{display:none}
  .c-time,.pg-home .st thead th:nth-child(5){display:none}
}

/* phone: rows become compact cards inside the same outlined box; filter docks onto the list */
@media (max-width:700px){
  .wrap{padding:0 14px}
  .hd{top:calc(-48px - 1.5px)}
  .hd .wrap{flex-wrap:wrap;gap:0 6px;min-height:0;padding-top:4px}
  [id]{scroll-margin-top:60px}
  .logo{font-size:18px}
  .logo svg{width:26px;height:26px}
  .tbtn{border:0;background:none}
  .lang summary{border-color:transparent;background:none;padding:0 6px}
  .nav{order:3;width:calc(100% + 28px);margin:0 -14px;padding:0 6px;border-top:1.5px solid var(--line);justify-content:space-between;gap:0}
  .nav a{flex:1 1 auto;justify-content:center;border-radius:0;border:0;padding:0 3px;font-size:13px;background:none!important;color:var(--mut)!important}
  .nav a[aria-current]{color:var(--ink)!important;box-shadow:inset 0 -3px 0 var(--ink)}
  .hero{margin-top:16px;padding:14px 14px 12px;border-radius:14px}
  .live{top:-13px;right:14px;height:24px;font-size:11px;padding:0 9px}
  h1{gap:8px 14px}
  .big{font-size:clamp(50px,15.5vw,62px);border-radius:12px}
  .rest{font-size:clamp(20px,6.2vw,25px);line-height:1.06;max-width:6.4em;flex-basis:5em}
  :lang(de) .big{font-size:clamp(40px,12.4vw,50px)}
  :lang(de) .rest{font-size:clamp(16px,4.9vw,19.5px);line-height:1.1;max-width:none}
  :lang(ko) .big,:lang(ja) .big{font-size:clamp(46px,14.4vw,58px)}
  :lang(ko) .rest,:lang(ja) .rest{font-size:clamp(17px,5vw,20px);line-height:1.22;max-width:none}
  .tally{gap:4px;margin-top:14px}
  .tally li{height:20px;border-radius:5px;border-width:1.5px}
  .tally svg{width:11px;height:11px}
  .src{margin-top:9px;font-size:12px;line-height:1.4}
  .top{flex-wrap:wrap;gap:8px;margin:12px 0 10px}
  .incident{flex:1 1 100%;font-size:12.5px;line-height:1.15;padding:0 10px;gap:7px}
  .st:not(.vs) thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .st:not(.vs),.st:not(.vs) tbody{display:block}
  .st:not(.vs) tbody tr{display:grid;grid-template-columns:minmax(84px,auto) 1fr auto;grid-template-areas:"name name status" "succ speed act" "spark time act";gap:0 8px;align-items:center;padding:8px 12px 9px;border-top-width:1.5px}
  .st:not(.vs) :is(td,tbody th){padding:0;display:block}
  .c-name{grid-area:name;min-width:0;height:28px;display:flex!important;align-items:center}
  .c-status{grid-area:status;justify-self:end}
  .c-succ{grid-area:succ;margin-top:7px}.c-speed{grid-area:speed;margin-top:7px}
  .c-time{grid-area:time;display:block!important;margin-top:4px;font-size:12px;white-space:normal}
  .c-spark{grid-area:spark;margin-top:4px}
  .c-spark svg{width:84px;height:14px}
  .c-act{grid-area:act;width:auto;align-self:end;margin-top:5px}
  .c-act .btn{max-width:148px;padding:6px 14px;font-size:13.5px}
  .st .num{text-align:left}
  .c-succ,.c-speed{font-size:13px}
  .c-succ .u{display:inline;font:500 12px/1 var(--sans);color:var(--mut)}
  .stamp{min-height:26px;font-size:12px;border-width:1.5px}
  .ads{grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
  .sp-row{height:108px;flex-wrap:wrap;align-content:center;gap:4px 12px;padding:0 12px}
  .sp-t{flex:1}.sp-go{order:2}
  .sp-row .sp-c{order:3;flex:1 1 100%;font-size:12.5px;line-height:1.3}
  .sp-row .sp-logo{width:36px;height:36px;border-radius:10px}
  .sp{height:172px;gap:5px;padding:10px 8px}
  .sp .sp-logo{width:38px;height:38px}
  .sp .sp-c{font-size:12px;line-height:1.3}
  .sec{margin-top:32px}
  .sec>h2,.partner h2{font-size:22px}
  .steps{grid-template-columns:1fr;gap:12px}
  .steps li{display:grid;grid-template-columns:auto 1fr;gap:2px 14px;align-items:center;padding:12px 46px 12px 14px}
  .steps h3{grid-column:2;padding:0}
  .fig{grid-row:1/3;margin:0;font-size:40px;white-space:nowrap}
  .fig small{font-size:16px}
  .steps p{grid-column:2}
  .partner{grid-template-columns:1fr;padding:22px 16px 18px}
  .partner .btn{grid-column:1;grid-row:auto;justify-self:start;margin-top:8px;max-width:100%}
  .alerts{padding:14px}
  .alerts form{flex-wrap:wrap;gap:8px}
  .alerts label{flex:1 1 100%}
  .alerts input{flex:1 1 150px}
  .facts div{grid-template-columns:1fr;gap:2px;padding:10px 14px}
  .doc-h{font-size:36px}
  .pg-doc .answer{font-size:15.5px}
  /* vpn */
  .crumb{margin-top:4px}
  .ans{margin-top:4px}
  .vh h1{font-size:38px}
  .answer{margin-top:12px;font-size:14.5px}
  .answer b{font-size:19.5px}
  .stats{grid-template-columns:1fr 1fr;margin-top:16px}
  .stats div{padding:10px 12px}
  .stats div:nth-child(odd){border-left:0}
  .stats div:nth-child(n+3){border-top:var(--border-width) solid var(--line)}
  .stats dd{font-size:24px}
  .stats dd.txt{font-size:18px}
  .buy{grid-template-columns:1fr;margin-top:16px;padding:14px}
  .buy .btn{grid-column:1;grid-row:auto;width:100%;max-width:none;margin:8px 0 4px}
  .works li{grid-template-columns:minmax(80px,1fr) auto minmax(70px,1fr);padding:6px 14px;gap:8px}
  .vsteps li{padding:12px 14px}
  .tl{padding:4px 14px}
  /* not tested yet */
  .ntl li{grid-template-columns:1fr;gap:0;padding:4px 14px 10px}
  .ntl dl{grid-column:1/-1;justify-content:flex-start;gap:4px 18px}
  /* rankings: rows become cards; every figure keeps its label */
  .rtabs{margin-top:14px;border-radius:12px}
  .rtabs a{padding:4px 4px;font-size:12.5px}
  .pg-rank .hero,.pg-cmp .hero{margin-top:18px}
  .pg-rank .doc-h,.pg-cmp .doc-h{font-size:26px}
  .pg-rank .answer,.pg-cmp .answer{margin-top:10px;font-size:14.5px}
  .st.rk tbody tr{grid-template-columns:26px repeat(3,minmax(0,1fr));grid-template-areas:none;gap:8px 8px;padding:10px 12px 12px}
  .st.rk .c-rk{grid-column:1;grid-row:1;width:auto;font-size:18px;text-align:left}
  .st.rk .c-name{grid-column:2/4;grid-row:1;min-width:0;overflow:hidden}
  .st.rk .c-status{grid-column:4;grid-row:1;justify-self:end}
  .st.rk td:nth-child(3n+4){grid-column:2}.st.rk td:nth-child(3n+5){grid-column:3}.st.rk td:nth-child(3n+6){grid-column:4}
  .st.rk td[data-l]{grid-row:auto}
  .rk td[data-l]:not(.c-status){min-width:0;margin:0!important;white-space:normal}
  .rk td[data-l]:not(.c-status)::before{content:attr(data-l);display:block;margin-bottom:3px;font:600 11.5px/1.2 var(--sans);color:var(--mut)}
  .rk .key{background:none}
  .rk td.key{font-weight:900}
  .rk .sub{display:block!important;padding:0!important}
  .rk .sub th{display:block;padding:9px 12px 7px!important}
  .rk td small{display:inline-block;margin-left:4px;white-space:nowrap}
  .vs th,.vs td{padding:10px 8px}
  .vs tbody th{width:30%;font-size:12.5px}
  .vs thead th{font-size:15px}
  .vs td{font-size:13.5px;white-space:normal}
  .vs td .wk,.vs td .stamp{font-size:12px}
  .cmpgs{grid-template-columns:1fr;margin-top:18px}
  /* advertise */
  .mapbox{padding:10px}
  .slots tbody tr{grid-template-columns:1fr auto;grid-template-areas:"name status" "succ act" "speed act";gap:3px 10px;padding:12px}
  .slots tbody th{grid-area:name;display:flex!important;align-items:center;white-space:normal}
  .slots td:nth-child(2){grid-area:succ;color:var(--mut);font-size:13.5px}
  .slots td:nth-child(3){grid-area:speed;font-size:12px;font-weight:500;color:var(--mut)}
  .slots td:nth-child(4){grid-area:status;justify-self:end;text-align:right}
  .slots td:nth-child(5){grid-area:act;align-self:end;text-align:right}
  .cta .btn{width:100%}
}
@media (max-width:375px){.c-act .btn{max-width:128px;padding:6px 12px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* ---- live site only (states the sample data never has). Fold into v3/styles.css when the mockup gets them. ---- */
.sp-row.open{background:none;border-style:dashed;box-shadow:none}
@media (hover:hover){.sp-row.open:hover{background:var(--sf);translate:none;box-shadow:none}}
.hero+.box.list{margin-top:24px}
@media (max-width:700px){.hero+.box.list{margin-top:12px}}