:root{--bg:#e9d2b6;--accent:#a4521f}
body{background:#e9d2b6}
.site-header,.site-footer,.compare th{background:#2a1a10}
.disclosure-bar{background:color-mix(in srgb,#2a1a10 80%,#000)}
.logo{color:#ffd9a8}
.hero{background:radial-gradient(1200px 400px at 20% 0%,#7a3e1c 0%,transparent 60%),radial-gradient(900px 400px at 90% 100%,#c0642b 0%,transparent 55%),#2a1a10;color:#fff5ea}
.hero h1{color:#fff5ea}
.hero .lead{color:#f1d9c2}
.hero-in{display:grid;grid-template-columns:1.3fr 1fr;gap:32px;align-items:center;text-align:left;max-width:1100px}
.hero .lead{margin-left:0}
.hero-actions{justify-content:flex-start}
.hero-art{width:100%;max-width:340px;justify-self:center;filter:drop-shadow(0 20px 40px rgba(0,0,0,.25))}
.kicker{color:#ffd27a;border-color:currentColor;background:rgba(255,255,255,.12)}
.btn{background:linear-gradient(180deg,#ffc94d,#ffa41c);color:#1d1208;border-color:#ffa41c;box-shadow:0 4px 14px color-mix(in srgb,#ffa41c 40%,transparent)}
.btn-ghost{background:transparent;color:#fff5ea;border:1px solid color-mix(in srgb,#fff5ea 50%,transparent);box-shadow:none}
h2::after{background:linear-gradient(90deg,#ffc94d,#a4521f)}
.compare tbody tr:nth-child(even){background:#fbf0e2}
.site-footer a{color:#ffd9a8}

body{background:linear-gradient(180deg,#e9d2b6 0%,#dcbf9d 100%)}
#picks{margin:0 calc(50% - 50vw);padding:40px calc(50vw - 50%) 48px;background:linear-gradient(180deg,#e9d2b6,#e3c7a6)}
#picks h2,#faq h2{color:#2a1a10}
.card{background:#fffaf3}
#compare{margin:0 calc(50% - 50vw);padding:48px calc(50vw - 50%) 56px;background:radial-gradient(900px 300px at 10% 0%,#6b3818 0%,transparent 60%),#3b2416}
#compare h2{color:#fff5ea}
#compare .note{color:#e8cfb4}
table.compare{background:#fffaf3}
#guide,#faq{background:#fbf1e4;border:1px solid #d9b994}
#guide h3{color:#7a3e1c}
.note{color:#6a4a33}
details{background:#fffaf3}

@media (max-width:720px){.hero-in{grid-template-columns:1fr;text-align:center}.hero-actions{justify-content:center}.hero-art{max-width:220px;grid-row:1}}

@font-face{font-family:'Fredoka';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/fredoka-latin-ext.woff2) format('woff2');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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Fredoka';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/fredoka-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Nunito';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/nunito-latin-ext.woff2) format('woff2');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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Nunito';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/nunito-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* v20 bright theme (loaded after theme.css) */
:root{--bg:var(--t-bg);--card:#fff;--ink:#3a2a22;--muted:#7a6558;--line:var(--t-line);--accent:var(--t-acc)}
body{background:var(--t-bg);color:var(--ink);font-family:"Nunito",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
h1,h2,h3{font-family:"Fredoka","Nunito",system-ui,sans-serif;font-weight:600;letter-spacing:0;color:var(--ink)}
h2::after{background:linear-gradient(90deg,var(--t-acc),var(--t-acc2))}
a{color:var(--t-acc-ink)}
.disclosure-bar{background:var(--t-acc-ink);color:#fff}.disclosure-bar a{color:#fff}
.site-header{background:#fff;box-shadow:0 2px 14px rgba(120,70,40,.10)}
.logo{color:var(--ink)}nav a{color:var(--muted)}nav a:hover{color:var(--t-acc-ink)}
.lang-pick summary{color:var(--ink);border-color:var(--t-line)}.lang-pick[open] summary{color:var(--ink);background:var(--t-bg)}
.hero{background:radial-gradient(700px 360px at 85% 10%,var(--t-hero2) 0%,transparent 65%),radial-gradient(900px 420px at 0% 100%,var(--t-hero3) 0%,transparent 60%),var(--t-hero1);color:var(--ink)}
.hero h1{color:var(--ink)}.hero .lead{color:var(--muted)}
.kicker{background:#fff;color:var(--t-acc-ink);border:1px solid var(--t-line);box-shadow:0 2px 8px rgba(120,70,40,.08)}
.hero-art{filter:drop-shadow(0 18px 30px rgba(120,70,40,.18))}
.btn{background:var(--t-btn);color:var(--t-btn-ink);border:0;box-shadow:0 6px 16px color-mix(in srgb,var(--t-btn) 45%,transparent)}
.btn:hover{box-shadow:0 10px 22px color-mix(in srgb,var(--t-btn) 55%,transparent)}
.btn-ghost{background:#fff;color:var(--ink);border:1px solid var(--t-line);box-shadow:0 2px 8px rgba(120,70,40,.08)}
.btn-ghost:hover{background:#fff}
#picks{background:var(--t-bg2)}#picks h2,#faq h2{color:var(--ink)}
.card{background:#fff;border-radius:22px}
#compare{background:var(--t-bg)}#compare h2{color:var(--ink)}#compare .note{color:var(--muted)}
.compare th{background:var(--t-acc-ink);color:#fff}
table.compare{background:#fff}.compare tbody tr:nth-child(even){background:var(--t-bg2)}.compare tbody tr:hover{background:var(--t-line)}
#guide,#faq{background:#fff;border:1px solid var(--t-line)}#guide h3{color:var(--t-acc-ink)}
.note{color:var(--muted)}details{background:#fff}
.site-footer{background:var(--t-foot);color:var(--muted)}.site-footer a{color:var(--t-acc-ink)}
.specs th{background:var(--t-bg2)}.aff-note{background:var(--t-bg2);border-color:var(--t-btn)}
.crumbs,.crumbs a{color:var(--muted)}
.to-top{background:#fff;color:var(--t-acc-ink);border-color:var(--t-btn)}
.quiz{background:#fff;border-color:var(--t-line)}.qz label{border-color:var(--t-line)}
.qz label:has(input:checked){border-color:var(--t-acc);background:var(--t-bg2)}.qz input{accent-color:var(--t-acc)}
.qz-k,.qz-again{color:var(--t-acc-ink)}.method-box{background:var(--t-bg2);border-color:var(--t-acc)}
.badge{background:var(--t-bg2);color:var(--t-acc-ink)}
.hero-art>circle:first-of-type{fill:var(--t-hero2)}.hero-art>ellipse:first-of-type{fill:var(--t-line)}
.card-art{background:radial-gradient(circle at 50% 60%,#fff,transparent 65%),linear-gradient(135deg,color-mix(in srgb,var(--c) 10%,#fff),color-mix(in srgb,var(--c) 22%,#fff))}
:root{--t-bg:#fffaf3;--t-bg2:#fff1e2;--t-line:#f6dcc4;--t-acc:#ff7a59;--t-acc2:#ffc93c;--t-acc-ink:#d8502f;--t-btn:#ffc93c;--t-btn-ink:#3a2a22;--t-hero1:#fff4e6;--t-hero2:#ffd9c2;--t-hero3:#ffeaa8;--t-foot:#fff1e2}

/* v21 modern theme (loaded last) */
:root{--bg:var(--m-bg);--card:var(--m-surface);--ink:var(--m-ink);--muted:var(--m-muted);--line:var(--m-line);--accent:var(--m-acc);--buy:var(--m-btn);--buy-ink:var(--m-btn-ink);--bg2:var(--m-band);
--t-bg:var(--m-bg);--t-bg2:var(--m-band);--t-line:var(--m-line);--t-acc:var(--m-acc);--t-acc2:var(--m-btn);--t-acc-ink:var(--m-link);--t-btn:var(--m-btn);--t-btn-ink:var(--m-btn-ink);--t-foot:var(--m-dark-band);
--m-font:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Noto Sans Hebrew","Noto Sans Arabic",sans-serif;
--m-r:14px;--m-sh:0 1px 2px rgba(0,0,0,.04),0 6px 20px rgba(0,0,0,.06);--m-sh2:0 2px 4px rgba(0,0,0,.05),0 16px 40px rgba(0,0,0,.10)}
html{-webkit-text-size-adjust:100%}
body{background:var(--m-bg);color:var(--m-ink);font-family:var(--m-font);-webkit-font-smoothing:antialiased;line-height:1.6}
h1,h2,h3{font-family:var(--m-font);color:var(--m-ink);font-weight:800;letter-spacing:-.022em;line-height:1.15}
h2{font-size:clamp(1.5rem,3.2vw,2.1rem)}
h2::after{display:none}
h3{letter-spacing:-.012em;font-weight:700}
[dir=rtl] h1,[dir=rtl] h2,[dir=rtl] h3,:lang(ja) h1,:lang(zh) h1,:lang(ko) h1,:lang(hi) h1,:lang(ja) h2,:lang(zh) h2,:lang(ko) h2,:lang(hi) h2{letter-spacing:0}
a{color:var(--m-link)}
/* bars */
.disclosure-bar{background:#0d0b0a;color:#d9d2cc;font-size:.76rem;padding:5px 16px}.disclosure-bar a{color:#fff}
.site-header{background:var(--m-head);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);box-shadow:0 1px 0 rgba(127,127,127,.18);border:0}
.logo{color:var(--m-head-ink);font-weight:800;letter-spacing:-.02em}
nav a{color:var(--m-head-muted);font-weight:500}nav a:hover{color:var(--m-head-ink)}
.lang-pick summary{color:var(--m-head-ink);border:1px solid color-mix(in srgb,var(--m-head-ink) 25%,transparent);background:transparent}
.lang-pick[open] summary{color:var(--m-head-ink);background:color-mix(in srgb,var(--m-head-ink) 10%,transparent)}
.nav-tog{background:transparent;color:var(--m-head-ink);border:1px solid color-mix(in srgb,var(--m-head-ink) 25%,transparent)}
.hdr-search{filter:none}
/* hero */
.hero{background:radial-gradient(60% 70% at 85% 15%,var(--m-glow1),transparent 70%),radial-gradient(50% 60% at 5% 100%,var(--m-glow2),transparent 70%),var(--m-hero);color:var(--m-hero-ink)}
.hero h1{color:var(--m-hero-ink);font-size:clamp(2.1rem,5.6vw,3.8rem);letter-spacing:-.035em;line-height:1.05}
.hero .lead{color:var(--m-hero-muted);font-size:clamp(1.02rem,1.6vw,1.2rem)}
.kicker{background:color-mix(in srgb,var(--m-hero-ink) 8%,transparent);color:var(--m-hero-ink);border:1px solid color-mix(in srgb,var(--m-hero-ink) 18%,transparent);box-shadow:none;font-weight:600;letter-spacing:.01em}
.hero-art{filter:drop-shadow(0 24px 40px rgba(0,0,0,.35))}
.hero-art>circle:first-of-type{fill:color-mix(in srgb,var(--m-acc) 35%,var(--m-hero))}.hero-art>ellipse:first-of-type{fill:rgba(0,0,0,.18)}
/* buttons */
.btn{background:var(--m-btn);color:var(--m-btn-ink);border:0;border-radius:999px;font-weight:700;box-shadow:none;letter-spacing:-.005em;transition:transform .15s,box-shadow .15s,filter .15s}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px color-mix(in srgb,var(--m-btn) 35%,transparent);filter:brightness(1.04)}
.btn-ghost{background:var(--m-surface);color:var(--m-ink);border:1px solid var(--m-line);box-shadow:none}
.btn-ghost:hover{background:var(--m-surface);box-shadow:var(--m-sh)}
.hero .btn-ghost{background:color-mix(in srgb,var(--m-hero-ink) 8%,transparent);color:var(--m-hero-ink);border:1px solid color-mix(in srgb,var(--m-hero-ink) 24%,transparent)}
/* surfaces */
.card{background:var(--m-surface);border:1px solid var(--m-line);border-radius:18px;box-shadow:var(--m-sh)}
.card:hover{box-shadow:var(--m-sh2);transform:translateY(-3px)}
.card-art{background:linear-gradient(180deg,color-mix(in srgb,var(--c) 7%,var(--m-band)),color-mix(in srgb,var(--c) 14%,var(--m-band)))}
.badge{background:color-mix(in srgb,var(--m-acc) 12%,#fff);color:var(--m-link);letter-spacing:.06em;font-size:.7rem;border-radius:6px}
.card p,.note{color:var(--m-muted)}
#picks{background:var(--m-band)}#compare{background:var(--m-bg)}
#picks h2,#faq h2,#compare h2{color:var(--m-ink)}#compare .note{color:var(--m-muted)}
.who,.exp,.mini,.chip,details,details.tb,.quiz,.tool-box,.qz-res,.qz label{background:var(--m-surface);border:1px solid var(--m-line);border-radius:var(--m-r);box-shadow:none}
.who,.exp{font-weight:600;color:var(--m-ink);transition:border-color .15s,box-shadow .15s,transform .15s}
.who:hover,.exp:hover,.mini:hover{border-color:color-mix(in srgb,var(--m-acc) 55%,var(--m-line));box-shadow:var(--m-sh);transform:translateY(-1px)}
.mini small{color:var(--m-link)}
.chip{color:var(--m-ink);font-weight:600}
.all-banner{background:var(--m-dark-band);color:#fff;border-radius:20px;box-shadow:var(--m-sh2)}
.qz label:has(input:checked){border-color:var(--m-acc);background:color-mix(in srgb,var(--m-acc) 8%,#fff)}.qz input{accent-color:var(--m-acc)}
.qz-k,.qz-again{color:var(--m-link)}
.method-box,.aff-note{background:var(--m-band);border-color:var(--m-acc)}
#guide,#faq{background:var(--m-surface);border:1px solid var(--m-line);border-radius:20px;box-shadow:none}
#guide h3{color:var(--m-ink)}
table.compare{background:var(--m-surface);border:1px solid var(--m-line);box-shadow:none;border-radius:16px}
.compare th{background:var(--m-dark-band);color:#fff}
.compare tbody tr:nth-child(even){background:color-mix(in srgb,var(--m-band) 55%,#fff)}.compare tbody tr:hover{background:var(--m-band)}
.specs th{background:var(--m-band)}
.crumbs,.crumbs a{color:var(--m-muted)}
.to-top{background:var(--m-surface);color:var(--m-ink);border:1px solid var(--m-line);box-shadow:var(--m-sh)}
#cc-help{background:var(--m-dark-band);border-color:#fff;box-shadow:var(--m-sh2)}
.h-head{background:var(--m-dark-band)}
/* footer */
.site-footer{background:var(--m-dark-band);color:#bdb4ac}.site-footer a{color:#fff}
.site-footer,.site-footer p{color:color-mix(in srgb,#fff 68%,transparent)}
@media (max-width:720px){.hero-in,[dir=rtl] .hero-in{text-align:center}.hero .lead,[dir=rtl] .hero .lead{margin-inline:auto}.hero-actions,[dir=rtl] .hero-actions{justify-content:center}.hero-art{max-width:150px}}
/* hero video (only when hero/hero.mp4 is shipped) */
.hero.has-hv{position:relative;overflow:hidden;isolation:isolate;--m-hero-ink:#fff;--m-hero-muted:#e9e2dc;color:#fff}
.hero.has-hv .hero-art{display:none}.hero.has-hv .hero-in{grid-template-columns:1fr;text-align:center;max-width:860px}
.hero.has-hv .lead{margin-inline:auto}.hero.has-hv .hero-actions{justify-content:center}
.hv{position:absolute;inset:0;z-index:-1;background:#14100d center/cover no-repeat}
.hv video{width:100%;height:100%;object-fit:cover;display:block}
.hv::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,8,6,.55),rgba(10,8,6,.45) 45%,rgba(10,8,6,.78))}
.hv-snd{position:absolute;z-index:2;inset-inline-end:14px;bottom:14px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.45);background:rgba(0,0,0,.35);color:#fff;font-size:1.1rem;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hero.has-hv h1,.hero.has-hv .lead{text-shadow:0 2px 18px rgba(0,0,0,.35)}
@media (min-width:1100px){.site-header .wrap{flex-wrap:nowrap;gap:18px}.site-header .logo{white-space:nowrap;flex:0 0 auto}.site-header nav{width:auto;order:2;margin-inline-start:auto;column-gap:16px;font-size:.9rem;flex-wrap:nowrap;white-space:nowrap}.site-header .lang-pick{order:3}}
/* QA 2026-11-06: helper bubble sits above the back-to-top button (same side), never over text; shorter phone hero */
#cc-help{left:auto;right:16px;bottom:76px;width:46px;height:46px}
[dir=rtl] #cc-help{right:auto;left:16px}
.h-box{left:auto;right:16px}[dir=rtl] .h-box{right:auto;left:16px}
@media (max-width:720px){.hero-art{display:none}.hero{padding-top:44px;padding-bottom:48px}}
:root{--m-bg:#f6f4f1;--m-surface:#fff;--m-ink:#1b1613;--m-muted:#625850;--m-line:#e6e0d9;--m-band:#eeeae4;
--m-btn:#f0a93b;--m-btn-ink:#1b1613;--m-link:#9c531c;--m-acc:#c8742c;
--m-hero:#14100d;--m-hero-ink:#fff;--m-hero-muted:#c9bdb2;--m-glow1:rgba(200,116,44,.38);--m-glow2:rgba(240,169,59,.16);
--m-head:rgba(20,16,13,.92);--m-head-ink:#f3ece5;--m-head-muted:#cbbfb4;--m-dark-band:#1d1714}