/* Vendored verbatim from /workspace/blog-mockups/build_b.py (Option B, chosen by Dan). */
body{background:#fff}
.ph{padding-top:48px;padding-bottom:26px;display:grid;grid-template-columns:1fr auto;gap:30px;align-items:end}
.ph h1{font-size:clamp(52px,7vw,104px);letter-spacing:-.05em;line-height:.92}
.ph h1 span{display:inline-block;width:.55em;height:.55em;background:var(--lime);border-radius:.14em;margin-left:.08em;vertical-align:baseline}
.ph p{font-size:18px;max-width:560px;margin-top:16px;color:var(--k60)}
.ph .btn{align-self:end}
.tabs-wrap{position:sticky;top:76px;z-index:20;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--k12);margin-bottom:24px}
.tabs{display:flex;gap:8px;padding-top:12px;padding-bottom:12px;overflow-x:auto;scrollbar-width:none}
.tabs button{flex:none;font:700 15px var(--body);border:1.5px solid var(--ink);background:#fff;color:var(--ink);border-radius:999px;padding:9px 16px;cursor:pointer}
.tabs button:hover{background:var(--k06)}
.tabs button[aria-selected=true]{background:var(--ink);color:var(--lime)}
.bento{--g:16px;--c:calc((min(100vw,1280px) - 56px - 3*var(--g))/4);display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:var(--c);grid-auto-flow:dense;gap:var(--g);padding-bottom:72px}
.t{position:relative;border-radius:22px;overflow:hidden;display:flex;background:#fff;box-shadow:inset 0 0 0 1.5px var(--k12);transition:transform .3s var(--ease),box-shadow .3s}
.t:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1.5px var(--ink)}
.t img{object-fit:cover;flex:none}
.t .tx{padding:22px 22px 20px;display:flex;flex-direction:column;min-width:0}
.t small{font-family:var(--disp);font-weight:700;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase}
.t small i{font-style:normal;background:var(--lime);padding:3px 8px;border-radius:999px}
.t h3{font-size:22px;letter-spacing:-.02em;line-height:1.1;margin-top:10px}
.t p{font-size:15px;color:var(--k60);margin-top:10px}
.t .go{margin-top:auto;font-weight:700;font-size:14px;display:flex;align-items:center;gap:8px;padding-top:12px}
.t .go b{width:34px;height:34px;border-radius:50%;background:var(--ink);color:var(--lime);display:grid;place-items:center;font-size:16px}
/* hero 4x2 */
.hero{grid-column:span 4;grid-row:span 2;background:var(--ink);color:#fff;box-shadow:none}
.hero img{height:100%;aspect-ratio:1}
.hero .tx{padding:44px 48px;justify-content:center}
.hero h3{font-size:clamp(34px,3.6vw,54px);letter-spacing:-.035em;line-height:1.02;margin-top:18px}
.hero p{color:var(--w80);font-size:18px;max-width:520px;margin-top:18px}
.hero small{color:var(--lime)}.hero small i{color:var(--ink);margin-right:10px}
.hero .go{margin-top:30px;padding:0}.hero .go b{background:var(--lime);color:var(--ink)}
.hero .cap{font-size:12.5px;color:var(--w60);margin-top:28px}
/* tall 1x2: square image + text */
.tall{grid-row:span 2;flex-direction:column}
.tall img{width:100%;aspect-ratio:1}
.tall .tx{flex:1}
/* wide 2x1: square image left + text */
.wide{grid-column:span 2}
.wide img{height:100%;aspect-ratio:1}
.wide h3{font-size:24px}
/* text-only 1x1 */
.sq{flex-direction:column}
.sq .tx{flex:1}
.sq.lime{background:var(--lime);box-shadow:none}.sq.lime p{color:var(--ink)}.sq.lime small i{background:var(--ink);color:var(--lime)}
.sq.ink{background:var(--ink);color:#fff;box-shadow:none}.sq.ink p{color:var(--w60)}.sq.ink .go b{background:var(--lime);color:var(--ink)}
.sq h3{font-size:21px}
/* big 2x2: big image + strip */
.big{grid-column:span 2;grid-row:span 2;flex-direction:column;background:var(--lime);box-shadow:none}
.big .im{flex:1;min-height:0;display:flex;justify-content:center;background:var(--ink);padding:0}
.big .im img{height:100%;aspect-ratio:1}
.big .tx{flex:none;padding:20px 24px 22px}
.big h3{font-size:28px;margin-top:8px}.big small i{background:var(--ink);color:var(--lime)}
/* cta 2x1 */
.cta{grid-column:span 2;background:var(--ink);color:#fff;box-shadow:none;padding:34px 36px;flex-direction:column;justify-content:space-between;
 background-image:radial-gradient(circle at 100% 0,rgba(184,246,59,.22),transparent 55%)}
.cta h3{font-size:34px;letter-spacing:-.03em;line-height:1.02;max-width:460px;margin-top:0}
.cta p{color:var(--w80);font-size:16px;max-width:470px;margin-top:10px}
.cta .btn{align-self:flex-start}
.cta:hover{transform:none}
.topics{grid-column:span 2}.topics:hover{transform:none}.topics h3{font-size:26px}
.tl{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}.tl a{font-weight:700;font-size:14px;border:1.5px solid var(--ink);border-radius:999px;padding:7px 13px}.tl a:hover{background:var(--lime)}
.t.hide{display:none}
.empty{display:none;grid-column:1/-1;font-size:18px;padding:40px 0;color:var(--k60)}
@media (max-width:1080px){.bento{--c:calc((100vw - 56px - 3*var(--g))/4)}.t h3{font-size:19px}.t p{display:none}.hero p,.cta p{display:block}.wide h3{font-size:20px}}
@media (max-width:820px){
 .ph{grid-template-columns:1fr;padding-top:32px}.ph .btn{justify-self:start}.tabs-wrap{top:64px}
 .bento{--c:auto;grid-template-columns:1fr 1fr;grid-auto-rows:auto;--g:12px}
 .t{grid-row:auto!important}
 .hero,.big,.cta,.wide,.topics{grid-column:1/-1}
 .hero,.big{flex-direction:column}.hero img,.big .im img{width:100%;height:auto}.hero .tx{padding:22px 22px 26px}
 .hero h3{font-size:32px}.hero p{font-size:16px}
 .tall{grid-column:span 1}.tall .tx{padding:14px 14px 16px}.tall h3{font-size:17px}
 .wide img{width:42%;height:auto;aspect-ratio:1;align-self:flex-start}.wide .tx{padding:16px}.wide h3{font-size:18px}
 .sq{grid-column:span 1;min-height:200px}.sq .tx{padding:16px}.sq h3{font-size:18px}
 .big .tx{padding:16px 18px 20px}.big h3{font-size:22px}
 .cta{padding:26px 22px;gap:18px}.cta h3{font-size:28px}
 .t .go b{width:30px;height:30px}
}