/* Tabner site. Fonts: Bricolage Grotesque + Inter (SIL OFL, self-hosted). */
@font-face{font-family:"Bricolage";src:url(../fonts/bricolage.woff2) format("woff2");font-weight:200 800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:"Inter";src:url(../fonts/inter.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
:root{
  --paper:#f6f4ee;--paper-2:#efece4;--card:#fffefb;--ink:#111715;--ink-2:#29312e;--muted:#565e5a;
  --line:rgba(17,23,21,.1);--line-2:rgba(17,23,21,.16);
  --teal:#0f766e;--teal-ink:#0b5a53;--teal-soft:#d9efe9;--mint:#99f6e4;--amber:#f2a516;
  --night:#0d1513;--night-2:#15201d;--night-line:rgba(233,239,236,.12);--night-text:#e9efec;--night-muted:#a7b3ae;
  --r:22px;--r-sm:14px;--wrap:1180px;
  --display:"Bricolage",ui-sans-serif,system-ui,sans-serif;--body:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.2,.7,.1,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:650;letter-spacing:-.025em;line-height:1.05;margin:0;text-wrap:balance}
p{margin:0;text-wrap:pretty}
::selection{background:var(--mint);color:var(--ink)}
:focus-visible{outline:2.5px solid var(--teal);outline-offset:3px;border-radius:8px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.skip{position:absolute;left:12px;top:-60px;background:var(--ink);color:#fff;padding:10px 16px;border-radius:10px;z-index:100;text-decoration:none}
.skip:focus{top:12px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Header */
.top{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 82%,transparent);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent;transition:border-color .3s}
.top.scrolled{border-bottom-color:var(--line)}
.top .wrap{display:flex;align-items:center;gap:28px;height:68px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:700 21px/1 var(--display);letter-spacing:-.03em}
.brand img{width:30px;height:30px}
.nav{display:flex;gap:4px;margin-right:auto}
.nav a{text-decoration:none;font-size:15px;color:var(--ink-2);padding:8px 12px;border-radius:999px;transition:background .2s}
.nav a:hover{background:var(--paper-2)}
.tools{display:flex;align-items:center;gap:10px}
.lang{position:relative}
.lang summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;font-size:14px;font-weight:550;padding:8px 12px;border-radius:999px;border:1px solid var(--line-2);color:var(--ink-2)}
.lang summary::-webkit-details-marker{display:none}
.lang summary svg{width:16px;height:16px}
.lang ul{position:absolute;right:0;top:calc(100% + 8px);list-style:none;margin:0;padding:6px;min-width:200px;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 50px -12px rgba(17,23,21,.25)}
.lang li a{display:flex;justify-content:space-between;padding:9px 12px;border-radius:10px;text-decoration:none;font-size:15px}
.lang li a:hover{background:var(--paper-2)}
.lang li a[aria-current]{font-weight:650;color:var(--teal-ink)}
.lang li a span{color:var(--muted);font-size:12.5px;text-transform:uppercase;letter-spacing:.06em}

/* Buttons */
.btn{--bg:var(--ink);--fg:#fff;--bd:var(--ink);display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:999px;background:var(--bg);color:var(--fg);border:1.5px solid var(--bd);font:600 16px/1 var(--body);text-decoration:none;white-space:nowrap;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px -12px rgba(17,23,21,.45)}
.btn svg{width:20px;height:20px;flex:none}
.btn .tag{font-size:12px;font-weight:600;padding:4px 8px;border-radius:999px;background:rgba(255,255,255,.14);letter-spacing:.01em}
.btn-ghost,.is-firefox .btn-chrome{--bg:transparent;--fg:var(--ink);--bd:var(--line-2)}
.btn-ghost .tag,.is-firefox .btn-chrome .tag{background:var(--paper-2)}
.is-firefox .btn-firefox{--bg:var(--ink);--fg:#fff;--bd:var(--ink);order:-1}
.is-firefox .btn-firefox .tag{background:rgba(255,255,255,.14)}
.btn-firefox{--bg:transparent;--fg:var(--ink);--bd:var(--line-2)}
.btn-firefox .tag{background:var(--paper-2)}
.btn-sm{min-height:40px;padding:0 16px;font-size:14.5px}
.ctas{display:flex;flex-wrap:wrap;gap:12px}

/* Hero */
.hero{position:relative;padding:76px 0 0;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0 0 auto;height:720px;background-image:radial-gradient(rgba(17,23,21,.13) 1px,transparent 1.2px);background-size:22px 22px;-webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 0%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse 70% 70% at 50% 0%,#000 30%,transparent 75%);pointer-events:none}
.hero .wrap{position:relative}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:550;color:var(--ink-2);padding:7px 14px 7px 8px;border:1px solid var(--line-2);border-radius:999px;background:var(--card)}
.eyebrow b{display:inline-block;padding:3px 9px;border-radius:999px;background:var(--teal-soft);color:var(--teal-ink);font-size:12.5px;font-weight:650}
.hero h1{font-size:clamp(46px,8.2vw,108px);margin-top:26px;max-width:12.5em;letter-spacing:-.045em;line-height:.98}
.hero h1 .l2{display:block;color:var(--teal)}
.hero .sub{margin-top:28px;max-width:600px;font-size:clamp(17px,1.6vw,20px);color:var(--muted);line-height:1.55}
.hero .ctas{margin-top:36px}
.hero .note{margin-top:16px;font-size:14px;color:var(--muted);display:flex;align-items:center;gap:8px}
.hero .note::before{content:"";width:7px;height:7px;border-radius:50%;background:#22a06b;box-shadow:0 0 0 4px rgba(34,160,107,.15)}

/* Browser frame */
.stage{margin-top:72px;perspective:1800px}
.frame{position:relative;border-radius:18px 18px 0 0;background:#dfe3e1;border:1px solid var(--line-2);border-bottom:0;box-shadow:0 50px 120px -40px rgba(13,40,34,.45),0 0 0 8px rgba(255,255,255,.5);overflow:hidden;transform-origin:50% 0}
.chrome{display:flex;align-items:flex-end;gap:14px;height:46px;padding:0 14px}
.dots{display:flex;gap:7px;align-self:center}
.dots i{width:11px;height:11px;border-radius:50%;background:#c7cdca}
.tabs{flex:1;display:flex;gap:2px;list-style:none;margin:0;padding:0;min-width:0;height:36px}
.tab{display:flex;align-items:center;gap:7px;min-width:0;flex:1 1 0;max-width:180px;padding:0 10px;border-radius:9px 9px 0 0;font-size:12px;color:#4a524e;white-space:nowrap;overflow:hidden;position:relative}
.tab::after{content:"";position:absolute;right:0;top:10px;bottom:10px;width:1px;background:rgba(17,23,21,.14)}
.tab span{overflow:hidden;text-overflow:ellipsis}
.fav{flex:none;width:14px;height:14px;border-radius:4px;background:var(--c,#888);color:#fff;font:700 9px/14px var(--body);text-align:center}
.tab.keep{flex:0 0 200px;max-width:none;background:#fbfbfa;color:var(--ink);font-weight:550}
.tab.keep::after{display:none}
.tab.keep img{width:14px;height:14px}
.bar{display:flex;align-items:center;gap:10px;height:42px;padding:0 14px;background:#fbfbfa;border-bottom:1px solid var(--line)}
.omni{flex:1;max-width:560px;height:28px;border-radius:999px;background:#eef0ef;display:flex;align-items:center;gap:8px;padding:0 12px;font-size:12.5px;color:#5d6561}
.omni img{width:13px;height:13px}
.shot{background:#fff}
.shot img{width:100%}
@media (prefers-reduced-motion:no-preference){
  .js .tab.go{animation:tabgo .7s var(--ease) both;animation-delay:calc(1.1s + var(--i) * 70ms)}
  @keyframes tabgo{to{flex-basis:0;max-width:0;padding:0;opacity:0;margin:0}}
  @supports (animation-timeline:view()){
    .frame{animation:tilt linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
    @keyframes tilt{from{transform:rotateX(16deg) scale(.95)}to{transform:none}}
  }
  .js .rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
  .js .rv.in{opacity:1;transform:none}
}

/* Sections */
section{padding:128px 0}
.kicker{display:inline-block;font:600 13px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--teal);margin-bottom:18px}
.h2{font-size:clamp(36px,5vw,64px);max-width:15em}
.lede{margin-top:20px;font-size:19px;color:var(--muted);max-width:620px}
.head{margin-bottom:56px}
.center{text-align:center}.center .h2,.center .lede{margin-left:auto;margin-right:auto}
.after-hero{border-top:1px solid var(--line);background:var(--paper)}

/* Bento */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.cell{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:30px;overflow:hidden;display:flex;flex-direction:column;gap:12px;min-height:280px}
.cell h3{font-size:25px}
.cell p{color:var(--muted);font-size:16px;max-width:34em}
.s2{grid-column:span 2}.s3{grid-column:span 3}.s4{grid-column:span 4}
.cell .pic{margin:14px -30px -30px;padding:0 0 0 30px;flex:1;display:flex;align-items:flex-end}
.cell .pic img{border-radius:14px 0 0 0;border:1px solid var(--line);border-right:0;border-bottom:0;box-shadow:0 20px 50px -20px rgba(17,23,21,.3)}
.cell.tint{background:linear-gradient(180deg,#e6f3ef 0%,var(--card) 70%)}
.cell.dark{background:var(--night);border-color:var(--night);color:var(--night-text)}
.cell.dark p{color:var(--night-muted)}
.cell.dark .pic img{border-color:var(--night-line)}
.pal .pic{padding:0 30px;justify-content:center}
.pal .pic img{border-radius:16px 16px 0 0;border-right:1px solid var(--line);max-width:620px}
/* Mini UI */
.mini{margin-top:auto;padding-top:18px}
.addr{display:flex;align-items:center;gap:8px;height:44px;border-radius:999px;background:var(--paper-2);padding:0 8px 0 14px;font-size:15px}
.addr kbd{font:600 13px/1 var(--body);background:var(--ink);color:#fff;padding:6px 9px;border-radius:8px}
.addr .q{overflow:hidden;white-space:nowrap;border-right:2px solid var(--teal);padding-right:2px}
@media (prefers-reduced-motion:no-preference){.js .in .addr .q{animation:type 1.6s steps(14) .4s both,caret 1s step-end infinite}@keyframes type{from{max-width:0}to{max-width:14ch}}@keyframes caret{50%{border-color:transparent}}}
.sugg{list-style:none;margin:10px 0 0;padding:6px;border:1px solid var(--line);border-radius:16px;background:#fff}
.sugg li{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;font-size:14px}
.sugg li:first-child{background:var(--teal-soft)}
.sugg li small{margin-left:auto;color:var(--muted);font-size:12px}
.card-ui{border:1px solid var(--line);border-radius:16px;padding:16px;background:#fff}
.card-ui .t{display:flex;gap:10px;align-items:center;font-weight:600;font-size:14.5px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}
.chip{font-size:12.5px;font-weight:550;padding:4px 10px;border-radius:999px;background:var(--teal-soft);color:var(--teal-ink)}
.chip.a{background:#fdf0d5;color:#7a4c00}.chip.b{background:#ece6fb;color:#4b2e9b}
.note-ui{font-size:13.5px;color:var(--ink-2);padding:10px 12px;border-radius:10px;background:var(--paper);border-left:3px solid var(--amber)}
.rule{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:14.5px;font-weight:550}
.arrow{width:34px;height:2px;background:var(--ink);position:relative}
.arrow::after{content:"";position:absolute;right:-1px;top:-4px;border:5px solid transparent;border-left:7px solid var(--ink);border-right:0}
.dot{width:10px;height:10px;border-radius:50%;background:var(--c)}
.roles{display:grid;gap:8px}
.role{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-radius:12px;background:#fff;border:1px solid var(--line);font-size:14.5px}
.role b{font-weight:600}
.live{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--teal-ink);font-weight:600}
.live::before{content:"";width:7px;height:7px;border-radius:50%;background:#22a06b}
.sw{width:34px;height:20px;border-radius:999px;background:var(--teal);position:relative}
.sw::after{content:"";position:absolute;right:3px;top:3px;width:14px;height:14px;border-radius:50%;background:#fff}

/* Steps */
.how{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.steps{list-style:none;margin:40px 0 0;padding:0;counter-reset:s;display:grid;gap:8px}
.steps li{counter-increment:s;display:grid;grid-template-columns:56px 1fr;gap:4px 18px;padding:22px 0;border-top:1px solid var(--line)}
.steps li::before{content:counter(s,decimal-leading-zero);grid-row:span 2;font:600 15px/1 var(--display);color:var(--teal);padding-top:6px}
.steps h3{font-size:23px}
.steps p{color:var(--muted)}
.panel{border-radius:var(--r);background:linear-gradient(160deg,#dcefe9,#efece4);padding:40px;border:1px solid var(--line)}
.panel img{border-radius:16px;border:1px solid var(--line);box-shadow:0 30px 60px -25px rgba(17,23,21,.35)}

/* Import */
.imp{display:grid;grid-template-columns:1.25fr 1fr;gap:18px}
.imp .cell{min-height:0}
.imp ol{margin:6px 0 0;padding:0;list-style:none;counter-reset:i;display:grid;gap:12px}
.imp ol li{counter-increment:i;display:flex;gap:14px;align-items:baseline;font-size:16.5px}
.imp ol li::before{content:counter(i);flex:none;width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;font:600 13px/28px var(--body);text-align:center}
.imp .pic{margin-top:18px}
.imp .pic img{border-radius:14px;border:1px solid var(--line)}
.more{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--teal-ink);text-decoration:none;margin-top:6px}
.more:hover{text-decoration:underline;text-underline-offset:4px}
.more::after{content:"\2192";transition:transform .2s}
.more:hover::after{transform:translateX(3px)}

/* Privacy */
.night{background:var(--night);color:var(--night-text)}
.night .kicker{color:var(--mint)}
.night .lede{color:var(--night-muted)}
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--night-line)}
.pgrid div{padding:32px 28px 8px 0}
.pgrid div+div{padding-left:28px;border-left:1px solid var(--night-line)}
.pgrid svg{width:26px;height:26px;color:var(--mint);margin-bottom:18px}
.pgrid h3{font-size:21px;margin-bottom:10px}
.pgrid p{color:var(--night-muted);font-size:15.5px}
.night .more{color:var(--mint);margin-top:44px}

/* FAQ */
.faq{display:grid;grid-template-columns:1fr 1.6fr;gap:72px}
.qa{border-top:1px solid var(--line)}
.qa details{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;padding:24px 0;font:600 19px/1.35 var(--display);letter-spacing:-.01em}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";flex:none;width:14px;height:14px;margin-top:6px;background:linear-gradient(var(--ink),var(--ink)) center/14px 2px no-repeat,linear-gradient(var(--ink),var(--ink)) center/2px 14px no-repeat;transition:transform .3s var(--ease)}
.qa details[open] summary::after{transform:rotate(45deg)}
.qa p{padding:0 40px 24px 0;color:var(--muted)}
.qa a{color:var(--teal-ink)}

/* End CTA */
.end{padding:40px 0 128px}
.endbox{position:relative;border-radius:32px;background:var(--ink);color:#fff;padding:96px 32px;text-align:center;overflow:hidden}
.endbox::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1.2px);background-size:22px 22px;-webkit-mask-image:radial-gradient(ellipse 60% 80% at 50% 100%,#000,transparent 70%);mask-image:radial-gradient(ellipse 60% 80% at 50% 100%,#000,transparent 70%)}
.endbox>*{position:relative}
.endbox img{width:72px;height:72px;margin:0 auto 28px}
.endbox h2{font-size:clamp(36px,5.4vw,68px);max-width:12em;margin:0 auto}
.endbox p{margin:20px auto 0;color:#b9c2be;font-size:19px;max-width:520px}
.endbox .ctas{justify-content:center;margin-top:36px}
.endbox .btn-chrome{--bg:#fff;--fg:var(--ink);--bd:#fff}
.endbox .btn-chrome .tag{background:var(--paper-2)}
.endbox .btn-firefox{--bg:transparent;--fg:#fff;--bd:rgba(255,255,255,.3)}
.endbox .btn-firefox .tag{background:rgba(255,255,255,.12)}
.is-firefox .endbox .btn-firefox{--bg:#fff;--fg:var(--ink);--bd:#fff}
.is-firefox .endbox .btn-firefox .tag{background:var(--paper-2)}
.is-firefox .endbox .btn-chrome{--bg:transparent;--fg:#fff;--bd:rgba(255,255,255,.3)}
.is-firefox .endbox .btn-chrome .tag{background:rgba(255,255,255,.12)}

/* Footer */
footer{border-top:1px solid var(--line);padding:64px 0 48px;font-size:15px}
.fgrid{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:32px}
.fgrid p{color:var(--muted);margin-top:14px;max-width:280px}
.fgrid h2{font:600 13px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.fgrid ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.fgrid a{text-decoration:none}
.fgrid a:hover{text-decoration:underline;text-underline-offset:4px}
.legal{margin-top:56px;padding-top:24px;border-top:1px solid var(--line);color:var(--muted);font-size:13.5px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* Language suggestion */
.suggest{position:fixed;left:50%;bottom:20px;transform:translate(-50%,140%);z-index:60;display:flex;align-items:center;gap:14px;padding:10px 10px 10px 20px;border-radius:999px;background:var(--ink);color:#fff;font-size:14.5px;box-shadow:0 20px 50px -15px rgba(0,0,0,.5);transition:transform .5s var(--ease);max-width:calc(100% - 24px)}
.suggest.on{transform:translate(-50%,0)}
.suggest a{background:#fff;color:var(--ink);padding:8px 14px;border-radius:999px;text-decoration:none;font-weight:600;white-space:nowrap}
.suggest button{background:none;border:0;color:#b9c2be;font-size:20px;line-height:1;cursor:pointer;padding:6px 8px;border-radius:50%}

/* Article pages (alternatives, faq, privacy) */
.page-hero{padding:88px 0 48px}
.page-hero h1{font-size:clamp(40px,6.4vw,80px);letter-spacing:-.04em;max-width:13em;margin-top:18px}
.page-hero .sub{margin-top:22px;max-width:640px;font-size:clamp(17px,1.6vw,20px);color:var(--muted)}
.page-hero .ctas{margin-top:32px}
.crumbs{font-size:14px;color:var(--muted)}
.crumbs a{color:var(--muted)}
.prose{max-width:720px}
.prose h2{font-size:clamp(28px,3.4vw,40px);margin:72px 0 18px}
.prose h3{font-size:21px;margin:32px 0 10px}
.prose p,.prose li{color:var(--ink-2);font-size:17.5px}
.prose p+p{margin-top:14px}
.prose ul,.prose ol{padding-left:22px;margin:14px 0 0;display:grid;gap:8px}
.prose a{color:var(--teal-ink);text-underline-offset:3px}
.prose .box{margin-top:8px;padding:22px 24px;border-radius:var(--r-sm);background:var(--card);border:1px solid var(--line)}
.prose .muted{color:var(--muted)}
.updated{margin-top:14px;color:var(--muted);font-size:15px}
.compare{margin-top:28px;width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;background:var(--card);font-size:16px}
.compare th,.compare td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--line);vertical-align:top}
.compare tr:last-child td{border-bottom:0}
.compare thead th{font:600 13px/1.2 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:var(--paper-2)}
.compare td:first-child{font-weight:600;width:34%}
.source{margin-top:12px;font-size:13.5px;color:var(--muted)}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:28px}
.cols .cell{min-height:0}
.related{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.related a{display:block;padding:24px;border-radius:var(--r-sm);background:var(--card);border:1px solid var(--line);text-decoration:none;transition:transform .25s var(--ease)}
.related a:hover{transform:translateY(-3px)}
.related b{font:650 20px/1.2 var(--display);display:block;margin-bottom:6px}
.related span{color:var(--muted);font-size:15px}
.related.four{grid-template-columns:repeat(2,1fr)}
.nf{list-style:none;padding:0;margin:0}
.nf li{margin:0}

@media (max-width:1020px){
  .nav{display:none}
  .bento{grid-template-columns:1fr 1fr}
  .s2,.s3,.s4{grid-column:span 2}
  .how,.faq,.imp,.cols{grid-template-columns:1fr;gap:40px}
  .pgrid{grid-template-columns:1fr 1fr}
  .pgrid div:nth-child(3){padding-left:0;border-left:0}
  .fgrid{grid-template-columns:1fr 1fr}
  .fgrid>div:first-child{grid-column:span 2}
  .related,.related.four{grid-template-columns:1fr}
}
@media (max-width:640px){
  body{font-size:16px}
  section{padding:88px 0}
  .wrap{padding:0 18px}
  .top .wrap{gap:12px;height:62px}
  .top .btn-sm{display:none}
  .hero{padding-top:44px}
  .hero .ctas .btn{width:100%}
  .stage{margin-top:48px;margin-right:-60%}
  .chrome .tab{font-size:11px}
  .cell{padding:24px;min-height:0}
  .cell .pic{margin:14px -24px -24px;padding-left:24px}
  .pal .pic{padding:0 24px}
  .pgrid{grid-template-columns:1fr}
  .pgrid div,.pgrid div+div{padding:28px 0 4px;border-left:0}
  .pgrid div+div{border-top:1px solid var(--night-line)}
  .panel{padding:20px}
  .endbox{padding:64px 22px;border-radius:24px}
  .endbox .btn{width:100%}
  .compare{font-size:14.5px}.compare th,.compare td{padding:12px}
  .suggest{left:12px;right:12px;transform:translateY(140%);border-radius:18px;padding:10px 8px 10px 16px;gap:10px;font-size:14px;max-width:none}
  .suggest.on{transform:none}
  .suggest span{flex:1}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.imp .pic{flex:none}.imp .more{margin-top:14px}
.prose>p+p,.prose ol+p,.prose ul+p,.prose table+p{margin-top:16px}

/* CJK: system fonts, no tracking tricks */
html[lang^=zh]{--cjk:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Noto Sans CJK SC","Source Han Sans SC"}
html[lang=ja]{--cjk:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic","Meiryo","Noto Sans JP","Noto Sans CJK JP"}
html[lang=ko]{--cjk:"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR","Noto Sans CJK KR"}
html[lang^=zh],html[lang=ja],html[lang=ko]{--display:"Bricolage",var(--cjk),system-ui,sans-serif;--body:"Inter",var(--cjk),system-ui,sans-serif;line-break:strict}
html[lang=ko]{word-break:keep-all}
html[lang^=zh] :is(h1,h2,h3),html[lang=ja] :is(h1,h2,h3),html[lang=ko] :is(h1,h2,h3){letter-spacing:0;line-height:1.25}
html[lang^=zh] .hero h1,html[lang=ja] .hero h1,html[lang=ko] .hero h1{letter-spacing:-.01em;line-height:1.14;font-size:clamp(38px,6.2vw,84px)}
html[lang^=zh] .page-hero h1,html[lang=ja] .page-hero h1,html[lang=ko] .page-hero h1{letter-spacing:0;line-height:1.2}
html[lang=ja] :is(h1,h2,h3){word-break:auto-phrase}