:root{--lab-ink:var(--ac-ink);--lab-surface:var(--ac-ink-soft);--lab-cyan:var(--ac-lime);--lab-violet:var(--ac-mint);--lab-lime:var(--ac-lime);--lab-paper:var(--color-bg);--lab-line:var(--color-border);--lab-muted:var(--color-text-muted)}
.blog-page{max-width:min(1280px,96vw);padding-top:22px}
.blog-page .topnav{margin-bottom:30px}
.blog-hero{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:42px;align-items:end;padding:clamp(30px,6vw,70px);overflow:hidden;border:1px solid rgba(167,255,79,.2);border-radius:24px;background:radial-gradient(circle at 86% 12%,rgba(239,255,227,.24),transparent 30%),radial-gradient(circle at 7% 88%,rgba(167,255,79,.13),transparent 30%),linear-gradient(145deg,var(--lab-ink),var(--lab-surface) 65%,var(--lab-ink));color:#fff;box-shadow:0 26px 70px rgba(12,23,20,.2)}
.blog-hero:after{content:"";position:absolute;z-index:-1;right:-90px;bottom:-170px;width:360px;height:360px;border-radius:50%;background:linear-gradient(135deg,var(--lab-cyan),var(--lab-violet));filter:blur(70px);opacity:.18}
.blog-kicker{display:inline-flex;align-items:center;gap:8px;color:#b9d2df;font-size:11px;font-weight:850;letter-spacing:.11em;text-transform:uppercase}.blog-kicker:before{content:"";width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,var(--lab-cyan),var(--lab-violet));box-shadow:0 0 0 5px rgba(167,255,79,.1)}
.blog-hero h1{max-width:800px;margin:15px 0 18px;color:#fff;font-size:clamp(44px,6vw,78px);line-height:.96;letter-spacing:-.06em}.blog-hero h1 em{font-style:normal;background:linear-gradient(90deg,var(--lab-cyan),var(--lab-violet),var(--lab-lime));-webkit-background-clip:text;background-clip:text;color:transparent}
.blog-hero p{max-width:760px;color:#b7cad6;font-size:17px;line-height:1.65}
.blog-search{display:grid;gap:9px;padding:18px;border:1px solid rgba(255,255,255,.16);border-radius:16px;background:rgba(255,255,255,.065);backdrop-filter:blur(14px)}.blog-search label{font-size:12px;font-weight:850;letter-spacing:.06em;text-transform:uppercase}.blog-search>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}.blog-search input{min-width:0;min-height:48px;padding:10px 13px;border:1px solid rgba(255,255,255,.22);border-radius:10px;background:#fff;color:var(--lab-ink);font:inherit}.blog-search small{color:#9fb4c1}
.blog-topics{display:flex;gap:8px;overflow:auto;margin:22px 0;padding:2px 0;scrollbar-width:none}.blog-topics::-webkit-scrollbar{display:none}.blog-topics a{flex:0 0 auto;padding:9px 12px;border:1px solid var(--lab-line);border-radius:999px;background:#fff;color:#40514a;font-size:12px;font-weight:750;text-decoration:none}.blog-topics a.active,.blog-topics a:hover{border-color:#1f6948;background:#efffe3;color:#17452f}
.blog-results-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin:30px 0 16px}.blog-results-head div{display:grid;gap:3px}.blog-results-head span{color:#62716b;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.blog-results-head strong{font-size:clamp(24px,3vw,34px);letter-spacing:-.035em}.blog-results-head a{font-size:13px;font-weight:750;text-decoration:none}
.blog-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.blog-card{display:grid;grid-template-columns:minmax(180px,.72fr) minmax(0,1.28fr);min-width:0;overflow:hidden;border:1px solid var(--lab-line);border-radius:18px;background:#fff;box-shadow:0 10px 30px rgba(12,23,20,.055);transition:transform .2s ease,box-shadow .2s ease}.blog-card:hover{transform:translateY(-3px);box-shadow:0 18px 42px rgba(12,23,20,.1)}
.blog-card-art{position:relative;isolation:isolate;display:block;min-height:260px;overflow:hidden;background:linear-gradient(145deg,var(--lab-ink),var(--lab-surface));text-decoration:none}.blog-card-art:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);background-size:30px 30px}.blog-card-art span{position:absolute;z-index:2;left:16px;top:16px;padding:6px 8px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(12,23,20,.72);color:#dff7ff;font-size:10px;font-weight:850;letter-spacing:.06em;text-transform:uppercase}.blog-card-art i{position:absolute;border-radius:50%;background:linear-gradient(135deg,var(--lab-cyan),var(--lab-violet));opacity:.8;filter:blur(.2px)}.blog-card-art i:nth-of-type(1){width:110px;height:110px;right:-22px;top:60px}.blog-card-art i:nth-of-type(2){width:42px;height:42px;left:24px;bottom:38px;background:var(--lab-lime)}.blog-card-art i:nth-of-type(3){width:170px;height:8px;left:52px;bottom:56px;border-radius:999px;transform:rotate(-38deg);background:linear-gradient(90deg,var(--lab-cyan),transparent)}
.blog-card-copy{display:flex;flex-direction:column;min-width:0;padding:22px}.blog-card-meta{display:flex;gap:10px;flex-wrap:wrap;color:#6a7771;font-size:10px;font-weight:750;text-transform:uppercase;letter-spacing:.045em}.blog-card h2{margin:12px 0 10px;font-size:clamp(22px,2.4vw,30px);line-height:1.05;letter-spacing:-.04em}.blog-card h2 a{color:var(--lab-ink);text-decoration:none}.blog-card-copy>p{color:#596963;font-size:14px;line-height:1.55}.blog-card-tags,.article-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}.blog-card-tags span,.article-tags span{padding:5px 7px;border-radius:999px;background:#f2f5f2;color:#52615a;font-size:10px;font-weight:700}.blog-card-link{margin-top:auto;padding-top:18px;font-size:12px;font-weight:850;text-decoration:none}
.blog-empty{grid-column:1/-1;padding:38px;border:1px dashed #aab2ae;border-radius:18px;background:#fff;text-align:center}.blog-empty strong{display:block;font-size:24px}.blog-empty p{margin:8px auto 18px;max-width:600px;color:#5d6b65}
.blog-tool-bridge{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:center;margin:54px 0 30px;padding:clamp(26px,5vw,52px);border:1px solid #173d31;border-radius:20px;background:linear-gradient(135deg,#efffe3,#fff)}.blog-tool-bridge h2{margin:9px 0 10px;font-size:clamp(30px,4vw,48px);letter-spacing:-.045em}.blog-tool-bridge p{max-width:760px;color:#5c6964}
.reading-progress{position:fixed;z-index:90;left:0;right:0;top:0;height:3px;background:transparent}.reading-progress i{display:block;width:100%;height:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--lab-cyan),var(--lab-violet),var(--lab-lime))}
.article-page{max-width:min(1180px,96vw)}.article-hero{max-width:980px;margin:34px auto 24px;padding:clamp(28px,5vw,62px);border:1px solid #1b2c38;border-radius:22px;background:radial-gradient(circle at 85% 12%,rgba(167,255,79,.16),transparent 28%),linear-gradient(145deg,var(--lab-ink),var(--lab-surface));color:#fff;box-shadow:0 22px 60px rgba(12,23,20,.18)}.article-back{display:inline-block;margin-bottom:28px;color:#b7cbd7;font-size:12px;font-weight:750;text-decoration:none}.article-hero h1{max-width:900px;margin:15px 0 18px;color:#fff;font-size:clamp(42px,6vw,72px);line-height:.97;letter-spacing:-.055em}.article-hero>p{max-width:760px;color:#bad0dc;font-size:18px;line-height:1.6}.article-meta{display:flex;gap:13px;flex-wrap:wrap;margin-top:20px;color:#9fb4c1;font-size:11px}.article-tags span{background:rgba(255,255,255,.09);color:#d7e7ee}
.article-layout{display:grid;grid-template-columns:220px minmax(0,760px);gap:46px;justify-content:center;align-items:start}.article-rail{position:sticky;top:96px;display:grid;gap:8px;padding:16px;border-left:3px solid #58b77f;color:#5a6862;font-size:12px}.article-rail strong{color:#12211c;font-size:13px}.article-rail a{font-weight:750;text-decoration:none}
.article-body{min-width:0;padding:14px 0 60px;color:#192621;font-size:17px;line-height:1.75}.article-body h1,.article-body h2,.article-body h3{scroll-margin-top:100px;color:var(--lab-ink);letter-spacing:-.04em}.article-body h2{margin:44px 0 14px;font-size:34px}.article-body h3{margin:30px 0 10px;font-size:24px}.article-body p{margin:0 0 18px}.article-body ul,.article-body ol{margin:0 0 22px;padding-left:24px}.article-body li{margin:7px 0}.article-body blockquote{margin:28px 0;padding:18px 22px;border-left:4px solid #54a471;background:#f3f8f1;color:#31443b}.article-body pre{max-width:100%;overflow:auto;margin:26px 0;padding:18px;border-radius:13px;background:var(--lab-ink);color:#dff8ed;font-size:13px;line-height:1.55}.article-body code{padding:2px 5px;border-radius:5px;background:#edf7e8;color:#1f5232;font-size:.9em}.article-body pre code{padding:0;background:transparent;color:inherit}.article-body a{font-weight:700}
.article-callout{margin:28px 0;padding:20px;border:1px solid #b4d2a7;border-radius:14px;background:linear-gradient(135deg,#efffe3,#fff)}.article-callout strong{display:block;margin-bottom:6px;font-size:16px}.article-callout p{margin:0;color:#4f6157}
.article-cta{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center;margin:34px 0;padding:22px;border-radius:16px;background:var(--lab-ink);color:#fff}.article-cta span{display:block;color:#92b0a3;font-size:10px;font-weight:850;letter-spacing:.09em;text-transform:uppercase}.article-cta strong{display:block;margin:5px 0;color:#fff;font-size:22px}.article-cta p{margin:0;color:#b9cbc4;font-size:14px}.article-cta .button.primary{border-color:var(--lab-lime);background:var(--lab-lime);color:var(--lab-ink)}
.related-articles{margin:54px 0}.related-articles .blog-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.related-articles .blog-card{grid-template-columns:1fr}.related-articles .blog-card-art{min-height:150px}.related-articles .blog-card h2{font-size:22px}.article-muted{color:#68766f}
@media(max-width:980px){.blog-grid{grid-template-columns:1fr}.related-articles .blog-grid{grid-template-columns:1fr 1fr}.article-layout{grid-template-columns:1fr}.article-rail{position:static;max-width:760px;margin:0 auto;width:100%}.article-body{max-width:760px;margin:0 auto}}
@media(max-width:760px){.blog-page{max-width:100%;padding:14px}.blog-hero{grid-template-columns:1fr;gap:24px;padding:28px 22px}.blog-hero h1{font-size:clamp(42px,13vw,58px)}.blog-search>div{grid-template-columns:1fr}.blog-search button{width:100%}.blog-card{grid-template-columns:1fr}.blog-card-art{min-height:165px}.blog-tool-bridge{grid-template-columns:1fr}.blog-tool-bridge .action-row{display:grid}.blog-results-head{align-items:flex-start;flex-direction:column;gap:6px}.article-page{padding-inline:14px}.article-hero{margin-top:20px;padding:28px 22px}.article-hero h1{font-size:clamp(38px,11vw,54px)}.article-body{font-size:16px}.article-body h2{font-size:29px}.article-cta{grid-template-columns:1fr}.article-cta .button{width:100%}.related-articles .blog-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.blog-card{transition:none}.reading-progress{display:none}}

/* Launch article visual treatment */
.blog-card-art.has-image{background:var(--lab-ink)}
.blog-card-art.has-image:before{z-index:1;background:linear-gradient(180deg,rgba(12,23,20,.08),rgba(12,23,20,.38))}
.blog-card-art.has-image:after{content:"";position:absolute;z-index:1;inset:auto 0 0;height:42%;background:linear-gradient(180deg,transparent,rgba(12,23,20,.34));pointer-events:none}
.blog-card-art.has-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.blog-card-art.has-image span{z-index:3}

.article-hero-media{max-width:1080px;margin:-8px auto 44px;overflow:hidden;border:1px solid #cad5d0;border-radius:22px;background:var(--lab-ink);box-shadow:0 24px 60px rgba(12,23,20,.12)}
.article-hero-media img{display:block;width:100%;height:auto;aspect-ratio:12/7;object-fit:cover}
.article-visual{margin:38px -68px 42px;overflow:hidden;border:1px solid #d2d9d4;border-radius:20px;background:#fff;box-shadow:0 18px 48px rgba(12,23,20,.08)}
.article-visual img{display:block;width:100%;height:auto}
.article-visual+ h2{margin-top:54px}
.article-body>p:first-of-type{font-size:19px;line-height:1.72;color:#31423a}
.article-body h2:before{content:"";display:block;width:34px;height:4px;margin-bottom:14px;border-radius:999px;background:linear-gradient(90deg,var(--lab-cyan),var(--lab-violet))}
.article-body blockquote{border-radius:0 14px 14px 0}
.article-callout{box-shadow:0 12px 32px rgba(50,91,67,.07)}

@media(max-width:980px){
  .article-hero-media{margin:0 auto 34px;max-width:760px}
  .article-visual{margin:30px 0 36px}
}
@media(max-width:760px){
  .article-hero-media{margin:0 0 28px;border-radius:16px}
  .article-visual{margin:26px 0 32px;border-radius:14px}
  .article-body>p:first-of-type{font-size:17px}
}
