:root{--blog-ink:var(--ink,#18323c);--blog-muted:var(--muted,#60717a);--blog-line:var(--line,#d7e2e6);--blog-panel:var(--panel,#fff);--blog-accent:var(--brand-primary, #3f7482);--blog-accent-dark:#087f90;--blog-soft:#eaf8fa}
.blog-shell,.blog-article-shell{width:min(100%,1180px);margin:0 auto;padding:clamp(2rem,4vw,4.5rem) clamp(1rem,3vw,2.5rem) clamp(3.5rem,7vw,7rem)}
.blog-shell{position:relative}.blog-shell:before{position:absolute;z-index:-1;top:1.5rem;right:clamp(1rem,4vw,3rem);width:clamp(150px,22vw,280px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgb(var(--brand-primary-rgb, 63 116 130) / .14) 0 40%,transparent 41%);content:""}
.blog-hero{display:grid;grid-template-columns:minmax(0,.82fr) minmax(360px,1.18fr);align-items:stretch;max-width:none;margin-bottom:clamp(2rem,5vw,3.75rem);overflow:hidden;border:1px solid var(--blog-line);border-radius:28px;background:var(--blog-panel);box-shadow:0 18px 48px rgba(24,50,60,.09)}
.blog-hero-copy{display:flex;flex-direction:column;justify-content:center;padding:clamp(1.5rem,4vw,3.5rem)}.blog-hero>img{width:100%;height:100%;min-height:360px;object-fit:cover;object-position:67% center}
.blog-hero>span,.blog-article-shell header>span{display:inline-flex;align-items:center;min-height:30px;padding:.35rem .7rem;border-radius:999px;color:var(--blog-accent-dark);background:var(--blog-soft);font-size:.8rem;font-weight:700;letter-spacing:.12em;line-height:1}
.blog-hero h1,.blog-article-shell h1{max-width:14ch;margin:.75rem 0 1rem;color:var(--blog-ink);font-size:calc(clamp(2.45rem,6vw,4.9rem) - 0.1667rem);line-height:.98;letter-spacing:-.055em;text-wrap:balance}
.blog-hero p,.blog-article-shell header p{max-width:62ch;margin:0;color:var(--blog-muted);font-size:clamp(1.05rem,1.8vw,1.25rem);line-height:1.55}
.blog-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(1rem,2vw,1.5rem)}
.blog-card{position:relative;grid-column:span 4;display:flex;min-width:0;overflow:hidden;border:1px solid var(--blog-line);border-radius:22px;background:var(--blog-panel);box-shadow:0 14px 34px rgba(24,50,60,.07);transition:transform 180ms ease,border-color 180ms ease,box-shadow 180ms ease}
.blog-card:hover,.blog-card:focus-within{border-color:rgb(var(--brand-primary-rgb, 63 116 130) / .7);box-shadow:0 20px 45px rgba(24,50,60,.12);transform:translateY(-3px)}
.blog-card>img{width:38%;min-width:118px;aspect-ratio:4/5;object-fit:cover}.blog-card>div{display:flex;flex:1;flex-direction:column;align-items:flex-start;min-width:0;padding:1.25rem}
.blog-card time,.blog-article-shell time{color:var(--blog-muted);font-size:.85rem;font-weight:750}.blog-card h2{margin:.5rem 0 .65rem;font-size:calc(clamp(1.16rem,1.7vw,1.38rem) - 0.1667rem);line-height:1.2;letter-spacing:-.025em;text-wrap:balance}.blog-card h2 a{color:var(--blog-ink);text-decoration:none}.blog-card h2 a:after{position:absolute;inset:0;content:""}
.blog-card p{display:-webkit-box;margin:0 0 1rem;overflow:hidden;color:var(--blog-muted);font-size:.96rem;line-height:1.5;-webkit-box-orient:vertical;-webkit-line-clamp:3}
.blog-read,.blog-back{display:inline-flex;align-items:center;min-height:44px;color:var(--blog-accent-dark);font-weight:700;text-decoration:none}.blog-read{margin-top:auto}.blog-card h2 a:focus-visible,.blog-read:focus-visible,.blog-back:focus-visible{border-radius:5px;outline:3px solid var(--blog-accent);outline-offset:4px}
.blog-empty{grid-column:1/-1;display:grid;min-height:260px;place-items:center;padding:clamp(2rem,6vw,4rem);border:1px solid var(--blog-line);border-radius:24px;background:linear-gradient(135deg,var(--blog-panel),var(--blog-soft));text-align:center}.blog-empty h2{max-width:28ch;margin:0;color:var(--blog-ink);font-size:calc(clamp(1.5rem,3vw,2.25rem) - 0.1667rem);line-height:1.15;text-wrap:balance}
.blog-article-shell{max-width:940px}.blog-back{margin-bottom:1.25rem}.blog-article-shell>article{overflow:hidden;border:1px solid var(--blog-line);border-radius:28px;background:var(--blog-panel);box-shadow:0 22px 55px rgba(24,50,60,.09)}
.blog-article-shell>article>header,.blog-content{max-width:760px;margin-inline:auto;padding-inline:clamp(1.25rem,5vw,4rem)}.blog-article-shell>article>header{padding-top:clamp(1.75rem,5vw,4rem)}.blog-article-shell h1{max-width:18ch;font-size:calc(clamp(2.25rem,5vw,4.25rem) - 0.1667rem)}
.blog-cover{display:block;width:calc(100% - clamp(2rem,7vw,6rem));max-height:540px;margin:2.25rem auto 0;border-radius:20px;object-fit:cover}.blog-content{padding-top:2.5rem;padding-bottom:clamp(2.5rem,6vw,5rem);color:#273f48;font-size:clamp(1rem,1.4vw,1.1rem);line-height:1.78}
.blog-content h2,.blog-content h3,.blog-content h4{color:var(--blog-ink);line-height:1.2;letter-spacing:-.025em;text-wrap:balance}.blog-content h2{margin:2.5rem 0 .8rem;font-size:calc(clamp(1.55rem,3vw,2rem) - 0.1667rem)}.blog-content h3{margin:2rem 0 .65rem;font-size:calc(clamp(1.25rem,2.4vw,1.5rem) - 0.1667rem)}.blog-content p{margin:0 0 1.2rem}.blog-content li+li{margin-top:.45rem}.blog-content blockquote{margin:1.75rem 0;padding:1rem 1.25rem;border-left:4px solid var(--blog-accent);border-radius:0 14px 14px 0;background:var(--blog-soft)}.blog-content a{color:var(--blog-accent-dark);font-weight:750;text-underline-offset:3px}.blog-content img{max-width:100%;height:auto;border-radius:16px}.blog-content table{display:block;max-width:100%;overflow:auto;border-collapse:collapse}.blog-content th,.blog-content td{padding:.75rem;border:1px solid var(--blog-line);text-align:left}.blog-content th{color:var(--blog-ink);background:var(--blog-soft)}
.blog-product-screenshot{margin:clamp(2rem,5vw,3.5rem) 0}.blog-product-screenshot img{display:block;width:100%;border:1px solid var(--blog-line);border-radius:20px;box-shadow:0 18px 44px rgba(24,50,60,.14)}.blog-product-screenshot figcaption{margin:.75rem auto 0;color:var(--blog-muted);font-size:.92rem;line-height:1.5;text-align:center}
.blog-share{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.55rem 1rem;margin-top:1.25rem;padding:.75rem;border:1px solid var(--blog-line);border-radius:16px;background:var(--blog-soft)}.blog-share>strong{color:var(--blog-ink);font-size:.92rem}.blog-share>div{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.45rem}.blog-share a,.blog-share button{display:inline-flex;align-items:center;justify-content:center;min-width:42px;min-height:42px;margin:0;padding:.6rem;border:1px solid var(--blog-line);border-radius:11px;color:var(--blog-ink);background:var(--blog-panel);box-shadow:none;cursor:pointer;text-decoration:none}.blog-share a:hover,.blog-share button:hover{border-color:var(--blog-accent);background:#fff}.blog-share img{width:18px;height:18px}.blog-share .blog-copy-link{width:auto;padding-inline:.85rem;color:var(--blog-accent-dark);font-weight:800}.blog-share>small{grid-column:1/-1;min-height:1em;color:var(--blog-accent-dark);font-size:.82rem;text-align:right}.blog-share a:focus-visible,.blog-share button:focus-visible{outline:3px solid var(--blog-accent);outline-offset:2px}
[data-theme=dark]{--blog-soft:#132d34}[data-theme=dark] .blog-card,[data-theme=dark] .blog-empty,[data-theme=dark] .blog-article-shell>article{box-shadow:none}[data-theme=dark] .blog-content{color:var(--blog-muted)}
@media(max-width:1020px){.blog-hero{grid-template-columns:1fr}.blog-hero>img{min-height:260px;max-height:390px;order:-1}.blog-card{grid-column:span 6}}
@media(min-width:681px) and (max-width:1500px){.blog-article-shell{max-width:1040px}.blog-article-shell h1{max-width:22ch;font-size:calc(clamp(2.65rem,4vw,3.5rem) - 0.1667rem);line-height:1.02}.blog-share{padding:.65rem .75rem}.blog-cover{margin-top:1.75rem}}
@media(max-width:680px){.blog-shell,.blog-article-shell{padding-top:1.5rem}.blog-shell:before{opacity:.55}.blog-hero{border-radius:20px}.blog-hero>img{min-height:210px}.blog-card{grid-column:1/-1;border-radius:18px}.blog-card>img{width:34%;min-width:104px}.blog-card>div{padding:1rem}.blog-card p{-webkit-line-clamp:2}.blog-article-shell>article{border-radius:20px}.blog-cover{width:calc(100% - 2rem);margin-top:1.5rem;border-radius:14px}}
@media(max-width:680px){.blog-share{grid-template-columns:1fr}.blog-share>div{justify-content:flex-start}.blog-share>small{grid-column:1;text-align:left}}
@media(max-width:430px){.blog-card{display:block}.blog-card>img{width:100%;aspect-ratio:16/8.5}.blog-read{width:100%}}
@media(prefers-reduced-motion:reduce){.blog-card{transition:none}.blog-card:hover,.blog-card:focus-within{transform:none}}