/* Insights 2026 — base + archive + article */

:root{
  --bg:#000;--tile:#141416;--tile-2:#1f1f22;--line:#2a2a2e;
  --text:#f5f5f7;--muted:#a1a1a6;--dim:#86868b;
  --gold:#e9c37b;--gold-ink:#e9c37b;--ink:#0a0a0a;
  --nav-h:52px;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;
  box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bg:#000;--text:#f5f5f7}}
:root[data-theme="dark"]{--bg:#000;--text:#f5f5f7}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + var(--nav-h) + 28px);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0;background:#000;color:var(--text);font-family:var(--font);font-size:17px;line-height:1.47;letter-spacing:-.022em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--gold-ink);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
.wrap{width:min(980px,100% - 44px);margin-inline:auto}
.wide{width:min(1260px,100% - 44px);margin-inline:auto}
.light{--bg:#fff;--tile:#f5f5f7;--tile-2:#e8e8ed;--line:#d2d2d7;--text:#1d1d1f;--muted:#6e6e73;--dim:#86868b;--gold-ink:#8a5a12;color-scheme:light}
.mist{--bg:#f5f5f7;--tile:#fff;--tile-2:#e8e8ed;--line:#d2d2d7;--text:#1d1d1f;--muted:#6e6e73;--dim:#86868b;--gold-ink:#8a5a12;color-scheme:light}
section{position:relative;background:var(--bg);color:var(--text)}
.label{font-size:19px;font-weight:600;color:var(--gold-ink);margin:0 0 14px}
.headline{font-size:clamp(48px,8vw,100px);line-height:1.02;font-weight:700;letter-spacing:-.02em;margin:0}
.h2{font-size:clamp(40px,6.4vw,80px);line-height:1.04;font-weight:700;letter-spacing:-.018em;margin:0}
.h3{font-size:clamp(26px,3vw,36px);line-height:1.1;font-weight:700;letter-spacing:-.012em;margin:0}
.one{font-size:clamp(19px,2.1vw,24px);line-height:1.38;color:var(--muted);font-weight:500;max-width:38ch;margin:22px auto 0}
.sec{padding-block:clamp(110px,15vw,170px);text-align:center;overflow:hidden}
.sec .visual{margin-top:clamp(48px,7vw,80px)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:11px 22px;border-radius:980px;font-size:17px;font-weight:500;border:0;cursor:pointer;font-family:inherit;text-decoration:none;transition:background .2s}
.btn:hover{text-decoration:none}
.btn-gold{background:var(--gold);color:var(--ink)}
.btn-gold:hover{background:#f3d395}
.btn-ghost{color:var(--gold-ink);border:1px solid currentColor;background:transparent}
.btn-sm{min-height:32px;padding:5px 14px;font-size:13px}
.round{width:40px;height:40px;border-radius:50%;border:0;background:var(--tile-2);color:var(--text);display:grid;place-items:center;cursor:pointer}
.round svg{width:12px;height:12px}

.subnav{position:sticky;top:calc(var(--nav-h) + env(safe-area-inset-top,0px));z-index:40;background:rgba(0,0,0,.72);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(255,255,255,.08)}
.subnav .wide{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-block:8px}
.subnav .wide::-webkit-scrollbar{display:none}
.subnav a{flex:none;font-size:13px;color:#a1a1a6;padding:6px 12px;border-radius:980px;white-space:nowrap}
.subnav a:hover{color:#f5f5f7;text-decoration:none;background:rgba(255,255,255,.08)}
.subnav a.on{color:#000;background:#f5f5f7}
.stores{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.store{display:inline-flex;align-items:center;gap:12px;min-height:56px;padding:8px 22px 8px 16px;border-radius:14px;background:#000;border:1px solid #8e8e93;color:#fff;text-decoration:none;text-align:left;transition:border-color .2s}
.store:hover{text-decoration:none;border-color:#fff}
.store svg{width:26px;height:26px;flex:none}
.store small{display:block;font-size:11px;line-height:1.1;color:#d1d1d6}
.store b{display:block;font-size:20px;line-height:1.15;font-weight:600;letter-spacing:-.01em}
.faq{text-align:left}
.faq details{border-top:1px solid var(--line)}
.faq details:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:24px 0;font-size:clamp(19px,2.2vw,24px);font-weight:600;display:flex;justify-content:space-between;gap:20px;align-items:center;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:12px;height:12px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg) translate(-3px,-3px);transition:transform .3s}
.faq details[open] summary::after{transform:rotate(225deg) translate(-3px,-3px)}
.faq details p{margin:0 0 26px;color:var(--muted);max-width:62ch}
.end{background:radial-gradient(60% 60% at 50% 100%,rgba(233,195,123,.16),transparent 70%),#000}
.end .stores{margin-top:40px}
.end .more{margin-top:20px;font-size:15px}
footer{background:#000;border-top:1px solid #2a2a2e;padding-block:30px 40px;color:#86868b;font-size:12px}
footer p{margin:0 0 10px;max-width:90ch}
footer .bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:20px;padding-top:16px;border-top:1px solid #2a2a2e}
footer a{color:#a1a1a6}
.rise{opacity:0;transform:translateY(40px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
.rise.in{opacity:1;transform:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* compare table */
.cmp{width:100%;border-collapse:collapse;text-align:left;font-size:16px}
.cmp-wrap{overflow-x:auto;border-radius:28px;background:var(--tile);padding:8px clamp(14px,3vw,32px) 18px}
.cmp th,.cmp td{padding:16px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.cmp tr:last-child td{border-bottom:0}
.cmp thead th{font-size:15px;color:var(--muted);font-weight:600;padding-top:22px}
.cmp thead th.p{font-size:21px;color:var(--text);font-weight:700;text-align:center;width:22%}
.cmp thead th.p small{display:block;font-size:14px;font-weight:500;color:var(--muted);margin-top:4px}
.cmp tbody th{font-weight:500}
.cmp tbody th span{display:block;font-size:14px;color:var(--muted);font-weight:400;margin-top:2px}
.cmp td{text-align:center;font-weight:600}
.cmp td svg{width:22px;height:22px;color:var(--gold-ink);display:inline-block;vertical-align:middle}
.cmp .no{color:var(--dim);font-weight:400}
.cmp .grp th{padding-top:28px;font-size:13px;color:var(--gold-ink);font-weight:600;border-bottom:0}
.cmp tbody th span.beta,.beta{display:inline-block;font-size:11px;font-weight:700;padding:2px 7px;border-radius:20px;background:rgba(233,195,123,.18);color:var(--gold-ink);margin-left:6px;vertical-align:2px;letter-spacing:0}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important;transition:none!important}.rise{opacity:1;transform:none}}
.skip{position:absolute;left:12px;top:-60px;z-index:300;background:#e9c37b;color:#0a0a0a;padding:10px 16px;border-radius:980px;font-weight:600}.skip:focus{top:10px}


.i-hero{padding-block:clamp(90px,12vw,140px) clamp(50px,7vw,80px);text-align:center;background:radial-gradient(60% 60% at 50% 0%,rgba(233,195,123,.13),transparent 70%),#000}
.feat{display:grid;grid-template-columns:1.2fr 1fr;gap:0;border-radius:36px;overflow:hidden;background:#141416;text-align:left;margin-top:clamp(40px,6vw,64px)}
.feat a{color:inherit}
.feat a:hover{text-decoration:none}
.feat .img{min-height:380px;background-size:cover;background-position:center 18%}
.feat .txt{padding:clamp(28px,4vw,52px);display:flex;flex-direction:column;justify-content:center}
.feat h2{margin:12px 0 0;font-size:clamp(30px,3.6vw,48px);line-height:1.06;letter-spacing:-.018em;color:#f5f5f7}
.feat p{color:#a1a1a6;font-size:19px;margin:16px 0 0}
.meta{font-size:13px;color:#86868b;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.cat{font-size:12px;font-weight:700;letter-spacing:.01em;color:#0a0a0a;background:var(--gold);padding:4px 10px;border-radius:980px}
.light .cat{background:#f3e2bd;color:#6b4610}
.read{margin-top:26px;font-weight:600;color:var(--gold)}
@media (max-width:860px){.feat{grid-template-columns:1fr}.feat .img{min-height:240px}}
.filters{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.filters button{font:inherit;font-size:15px;font-weight:500;min-height:40px;padding:8px 18px;border-radius:980px;border:1px solid var(--line);background:transparent;color:var(--text);cursor:pointer}
.filters button[aria-pressed="true"]{background:var(--text);color:var(--bg);border-color:var(--text)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px;text-align:left}
.card{display:flex;flex-direction:column;border-radius:28px;background:var(--tile);overflow:hidden;color:var(--text);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.card:hover{text-decoration:none;transform:translateY(-4px)}
.card .img{aspect-ratio:16/10;background-size:cover;background-position:center 30%}
.card .b{padding:22px 24px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.card h3{margin:0;font-size:22px;line-height:1.2;letter-spacing:-.012em}
.card p{margin:0;color:var(--muted);font-size:15px}
.card .meta{margin-top:auto;padding-top:6px}
.card[hidden]{display:none}
@media (max-width:960px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.grid{grid-template-columns:1fr}}
.topics2{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;text-align:left}
.topics2 button{all:unset;cursor:pointer;border-radius:24px;padding:24px;background:#141416;border:1px solid #2a2a2e}
.topics2 button:hover{border-color:var(--gold)}
.topics2 button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.topics2 b{display:block;font-size:20px;color:#f5f5f7}
.topics2 span{display:block;color:#a1a1a6;font-size:15px;margin-top:4px}
@media (max-width:760px){.topics2{grid-template-columns:1fr}}
.news{max-width:640px;margin:36px auto 0;display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.news input{flex:1;min-width:220px;min-height:52px;border-radius:980px;border:1px solid var(--line);background:#fff;padding:0 22px;font:inherit;font-size:17px;color:#1d1d1f}
.news input:focus{outline:2px solid var(--gold);outline-offset:2px}
.news button{min-height:52px}
.news-note{font-size:13px;color:var(--muted);margin-top:14px}
.news-ok{display:none;margin-top:18px;font-weight:600;color:var(--gold-ink)}

.prog{position:fixed;left:0;top:0;z-index:70;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:var(--gold);z-index:49}
.p-head{padding-block:clamp(60px,8vw,100px) 0;background:#000;text-align:center}
.crumbs{font-size:13px;color:#86868b;display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.crumbs a{color:#a1a1a6}
.p-head h1{font-size:clamp(40px,6vw,76px);line-height:1.04;letter-spacing:-.02em;margin:22px auto 0;max-width:18ch}
.p-head .dek{font-size:clamp(19px,2.1vw,24px);color:#a1a1a6;max-width:40ch;margin:20px auto 0;line-height:1.4}
.byline{display:flex;align-items:center;gap:12px;justify-content:center;margin-top:30px;font-size:14px;color:#a1a1a6;flex-wrap:wrap}
.av{width:40px;height:40px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff3d6,#e9c37b 45%,#b8893d);flex:none}
.byline b{color:#f5f5f7;font-weight:600}
.cat{font-size:12px;font-weight:700;color:#0a0a0a;background:var(--gold);padding:4px 10px;border-radius:980px}
.hero-img{width:min(1100px,100% - 44px);margin:clamp(40px,6vw,64px) auto 0;aspect-ratio:21/9;border-radius:32px;background-size:cover;background-position:center 18%;position:relative;top:clamp(40px,6vw,70px);margin-top:0;box-shadow:0 40px 80px rgba(0,0,0,.4)}
.p-body{background:#fff;color:#1d1d1f;padding-block:clamp(90px,12vw,140px) clamp(70px,9vw,110px)}
.p-grid{width:min(1100px,100% - 44px);margin-inline:auto;display:grid;grid-template-columns:220px minmax(0,680px);gap:clamp(30px,6vw,90px);justify-content:center}
.toc{position:sticky;top:calc(var(--nav-h) + 30px);align-self:start;font-size:14px}
.toc b{display:block;font-size:13px;color:#8a5a12;margin-bottom:12px}
.toc ol{list-style:none;margin:0;padding:0;display:grid;gap:4px;border-left:2px solid #e8e8ed}
.toc a{display:block;padding:6px 0 6px 14px;margin-left:-2px;border-left:2px solid transparent;color:#6e6e73}
.toc a:hover{color:#1d1d1f;text-decoration:none}
.toc a.on{color:#1d1d1f;border-left-color:#e9c37b;font-weight:600}
.share{margin-top:28px;display:flex;gap:8px;flex-wrap:wrap}
.share a,.share button{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#f5f5f7;color:#1d1d1f;border:0;cursor:pointer}
.share a:hover,.share button:hover{background:#e8e8ed}
.share svg{width:18px;height:18px}
@media (max-width:900px){.p-grid{grid-template-columns:1fr}.toc{position:static;display:none}}
.art{font-size:19px;line-height:1.7;color:#1d1d1f}
.art > p:first-of-type::first-letter{font-size:3.4em;float:left;line-height:.9;margin:.08em .1em 0 0;font-weight:700;color:#8a5a12}
.art p{margin:0 0 1.2em}
.art h2{font-size:clamp(28px,3.2vw,38px);line-height:1.12;letter-spacing:-.015em;margin:2em 0 .6em;scroll-margin-top:90px}
.art h3{font-size:23px;margin:1.6em 0 .4em}
.art ul,.art ol{padding-left:1.2em;margin:0 0 1.2em}
.art li{margin:.4em 0}
.art a{color:#8a5a12;text-decoration:underline;text-underline-offset:3px}
.kt{border-radius:24px;background:#f5f5f7;padding:24px 28px;margin:0 0 2em}
.kt b{display:block;font-size:15px;color:#8a5a12;margin-bottom:8px}
.kt ul{margin:0;font-size:17px}
blockquote.pull{margin:1.8em 0;padding:0 0 0 24px;border-left:3px solid #e9c37b;font-size:clamp(24px,2.6vw,30px);line-height:1.3;font-weight:600;letter-spacing:-.012em;color:#1d1d1f}
.steps-l{counter-reset:s;list-style:none;padding:0!important}
.steps-l li{counter-increment:s;position:relative;padding:18px 20px 18px 66px;border-radius:20px;background:#f5f5f7;margin:0 0 12px!important}
.steps-l li::before{content:counter(s);position:absolute;left:18px;top:18px;width:32px;height:32px;border-radius:50%;background:#e9c37b;color:#0a0a0a;display:grid;place-items:center;font-weight:700;font-size:15px}
.steps-l b{display:block}
.fig{margin:2em 0}
.fig div{aspect-ratio:16/9;border-radius:22px;background-size:cover;background-position:center}
.fig figcaption{font-size:14px;color:#6e6e73;margin-top:10px}
.try{display:grid;grid-template-columns:120px 1fr;gap:20px;align-items:center;border-radius:28px;padding:20px;background:#0b0b0c;color:#f5f5f7;margin:2.2em 0}
.try img{width:120px;aspect-ratio:2/3;object-fit:cover;border-radius:16px}
.try small{font-size:13px;color:#e9c37b;font-weight:600}
.try b{display:block;font-size:22px;margin-top:4px;line-height:1.2}
.try p{margin:6px 0 14px!important;font-size:15px;color:#a1a1a6;line-height:1.45}
.try .btn{color:#0a0a0a!important;text-decoration:none!important;min-height:40px;padding:8px 18px;font-size:15px}
@media (max-width:520px){.try{grid-template-columns:1fr}.try img{width:100%;aspect-ratio:16/9}}
.note-b{border-radius:20px;border:1px solid #e8e8ed;padding:18px 22px;font-size:15px;color:#6e6e73;line-height:1.55;margin:2em 0}
.note-b b{color:#1d1d1f}
.author{display:grid;grid-template-columns:64px 1fr;gap:18px;margin-top:3em;padding-top:2em;border-top:1px solid #e8e8ed}
.author .av{width:64px;height:64px}
.author b{font-size:18px}
.author p{margin:4px 0 0;font-size:15px;color:#6e6e73;line-height:1.5}
.p-faq{margin-top:3em;background:transparent}
.p-faq h2{font-size:clamp(28px,3.2vw,38px);letter-spacing:-.015em;margin:0 0 .4em}
.rel{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;text-align:left}
.rel a{display:block;border-radius:24px;background:#141416;overflow:hidden;color:#f5f5f7}
.rel a:hover{text-decoration:none}
.rel .img{aspect-ratio:16/10;background-size:cover;background-position:center 30%}
.rel .b{padding:18px 20px 22px}
.rel h3{margin:8px 0 0;font-size:19px;line-height:1.25}
.rel span{font-size:13px;color:#86868b}
@media (max-width:860px){.rel{grid-template-columns:1fr}}
.tmpl{position:fixed;right:16px;top:calc(var(--nav-h) + 16px);z-index:60;font-size:12px;font-weight:600;padding:6px 12px;border-radius:980px;background:rgba(233,195,123,.92);color:#0a0a0a}

