/* ========================================================================= Anthropos Blog — Focus v2 Scoped stylesheet. EVERY rule is namespaced under `.apxb` (added to on blog contexts only) so nothing leaks into the rest of anthropos.work. Enqueued AFTER Avada. All type is Work Sans (no serif). Site header/footer are Avada's real chrome (get_header/get_footer); this file styles only the editorial blog content between them. ========================================================================= */ .apxb{ --dark:#071C5D; --blue:#123EC6; --light:#DCE4FF; --lighter:#F7F9FF; --text:#62748E; --icons:#90A1B9; --stroke:#CAD5E2; --green:#1BAB5C; --ink:#16233F; --hairline:#E7ECF6; --serif:'Work Sans',sans-serif; --sans:'Work Sans',sans-serif; } /* Base — constrained to the blog content wrapper */ /* Avada wraps blog content in a display:flex .fusion-row; without min-width:0 the flex item refuses to shrink below its content width and gets clipped on mobile. */ .apxb .fusion-row{min-width:0} .apxb .apxb-main{min-width:0;max-width:100%} .apxb .apxb-main{font-family:var(--sans);color:var(--dark);line-height:1.5;-webkit-font-smoothing:antialiased} .apxb .apxb-main a{color:inherit;text-decoration:none} .apxb .apxb-main img{max-width:100%;display:block} .apxb .apxb-main *{box-sizing:border-box} .apxb .apxb-main ::selection{background:var(--light)} .apxb .col{max-width:1080px;margin:0 auto;padding:0 32px} .apxb .wide{max-width:1080px;margin:0 auto;padding:0 32px} .apxb .measure{max-width:720px;margin:0 auto;padding:0 32px} /* ── grain + mesh cover system ── */ .apxb .cover{position:relative;overflow:hidden;background:var(--dark);isolation:isolate} .apxb .cover::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.5;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:180px 180px} .apxb .cover::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to top,rgba(4,10,30,.5),transparent 46%)} .apxb .cover-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0} .apxb .cover .grid-lines{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.35; background-image:repeating-linear-gradient(115deg,rgba(255,255,255,.06) 0 1px,transparent 1px 22px)} .apxb .m1{background:radial-gradient(at 18% 22%,#2A56E4 0,transparent 50%),radial-gradient(at 82% 26%,#5B7BF5 0,transparent 46%),radial-gradient(at 60% 88%,#071C5D 0,transparent 55%),#0C2C86} .apxb .m2{background:radial-gradient(at 22% 26%,#1EA0E6 0,transparent 48%),radial-gradient(at 78% 20%,#123EC6 0,transparent 46%),radial-gradient(at 55% 90%,#071C5D 0,transparent 52%),#0A2E6B} .apxb .m3{background:radial-gradient(at 25% 20%,#5B34D6 0,transparent 46%),radial-gradient(at 80% 40%,#123EC6 0,transparent 48%),radial-gradient(at 50% 92%,#0A1B4A 0,transparent 55%),#1A1B62} .apxb .m4{background:radial-gradient(at 20% 30%,#123EC6 0,transparent 50%),radial-gradient(at 85% 24%,#2CC7C0 0,transparent 42%),radial-gradient(at 60% 90%,#071C5D 0,transparent 55%),#08245F} .apxb .m5{background:radial-gradient(at 24% 24%,#3556E0 0,transparent 48%),radial-gradient(at 82% 30%,#7B9BFF 0,transparent 44%),radial-gradient(at 55% 88%,#071C5D 0,transparent 55%),#0A1E5A} .apxb .cover .stamp{position:absolute;z-index:3;left:20px;bottom:16px;display:flex;align-items:center;gap:9px;color:rgba(255,255,255,.92)} .apxb .cover .stamp i{font-size:15px;opacity:.95} .apxb .cover .stamp span{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase} .apxb .cover .ghost{position:absolute;z-index:1;right:-6px;top:-14px;font-family:var(--sans);font-weight:800;font-size:120px;line-height:1;color:rgba(255,255,255,.07)} /* ── editorial masthead block (blog index) ── */ .apxb .head{padding:60px 0 34px} .apxb .head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:48px} .apxb .eyebrow{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--blue)} .apxb .head h1{font-size:56px;font-weight:800;letter-spacing:-.035em;line-height:1.02;margin:16px 0 0;max-width:620px} .apxb .head .lede{font-size:20px;line-height:1.5;color:#3A4667;margin-top:18px;max-width:520px} .apxb .sub-card{flex-shrink:0;width:290px;border:1px solid var(--stroke);border-radius:16px;padding:22px;background:var(--lighter)} .apxb .sub-card h4{font-size:15px;font-weight:700;margin-bottom:4px} .apxb .sub-card p{font-size:13px;color:var(--text);margin-bottom:14px;line-height:1.45} .apxb .sub-card .f{display:flex;gap:8px} .apxb .sub-card input{flex:1;min-width:0;font-family:var(--sans);font-size:14px;padding:10px 12px;border:1px solid var(--stroke);border-radius:8px;background:#fff;color:var(--dark)} .apxb .sub-card input:focus{outline:none;border-color:var(--blue)} .apxb .sub-card button{background:var(--dark);color:#fff;border:none;border-radius:8px;width:42px;font-size:15px;cursor:pointer} /* ── filter bar ── */ .apxb .filter{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)} .apxb .filter-in{max-width:1080px;margin:0 auto;padding:0 32px;display:flex;align-items:center;justify-content:space-between;gap:20px} .apxb .tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding:11px 0;min-width:0} .apxb .tabs::-webkit-scrollbar{display:none} .apxb .tab{flex-shrink:0;font-family:var(--sans);font-size:14px;font-weight:600;color:var(--text);padding:7px 14px;border-radius:100px;cursor:pointer;transition:all .12s;white-space:nowrap;border:none;background:none} .apxb .tab:hover{color:var(--dark);background:var(--lighter)} .apxb .tab.active{color:#fff;background:var(--dark)} .apxb .sortby{flex-shrink:0;font-size:13px;color:var(--icons);font-weight:600;display:flex;align-items:center;gap:7px} .apxb .sortby b{color:var(--dark);font-weight:600} /* ── featured lead ── */ .apxb .lead{padding:44px 0 8px} .apxb .lead > a{display:grid;grid-template-columns:1.15fr 1fr;gap:44px;align-items:center} .apxb .lead .cover{aspect-ratio:8/5;border-radius:18px} .apxb .lead-kickers{display:flex;align-items:center;gap:12px;margin-bottom:16px} .apxb .flag{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--green)} .apxb .flag .dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(27,171,92,.18)} .apxb .kicker{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)} .apxb .lead h2{font-size:38px;font-weight:800;letter-spacing:-.028em;line-height:1.08;margin-bottom:16px} .apxb .lead > a:hover h2{color:var(--blue)} .apxb .lead .deck{font-size:19px;line-height:1.55;color:#3A4667;margin-bottom:24px} .apxb .byline{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--text);flex-wrap:wrap} .apxb .avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#123EC6,#071C5D);color:#fff;font-size:13px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0} .apxb .byline .who{font-weight:600;color:var(--dark)} .apxb .byline .sep,.apxb .rfoot .sep{width:3px;height:3px;border-radius:50%;background:var(--icons)} /* ── list ── */ .apxb .list-head{display:flex;align-items:baseline;justify-content:space-between;margin:56px 0 6px;padding-top:26px;border-top:1px solid var(--dark)} .apxb .list-head h3{font-size:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase} .apxb .list-head .cnt{font-size:13px;color:var(--icons);font-weight:600} .apxb .row{display:grid;grid-template-columns:34px 1fr 200px;gap:28px;align-items:center;padding:28px 0;border-bottom:1px solid var(--hairline);cursor:pointer;transition:background .15s} .apxb .row:hover{background:linear-gradient(90deg,var(--lighter),transparent 80%)} .apxb .rnum{font-size:13px;font-weight:700;color:var(--icons);font-variant-numeric:tabular-nums;align-self:start;padding-top:4px} .apxb .rtext{min-width:0} .apxb .rmeta{display:flex;align-items:center;gap:10px;margin-bottom:9px} .apxb .rmeta .date{font-size:12px;font-weight:600;color:var(--text);letter-spacing:.01em} .apxb .row h4{font-size:24px;font-weight:700;letter-spacing:-.018em;line-height:1.2;margin-bottom:9px;transition:color .12s} .apxb .row:hover h4{color:var(--blue)} .apxb .row .deck{font-size:16px;line-height:1.5;color:#4A5675;margin-bottom:14px;max-width:600px} .apxb .rfoot{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--text)} .apxb .rcover{width:200px;height:132px;border-radius:12px;align-self:center;transition:transform .25s} .apxb .row:hover .rcover{transform:scale(1.02)} .apxb .rcover .stamp{left:14px;bottom:11px} .apxb .rcover .stamp i{font-size:13px} .apxb .rcover .stamp span{font-size:10px} .apxb .rcover .ghost{font-size:78px;top:-8px;right:-2px} .apxb .more{display:flex;justify-content:center;padding:44px 0 8px} .apxb .btn-load{background:#fff;border:1px solid var(--stroke);color:var(--dark);font-family:var(--sans);font-weight:600;font-size:15px;padding:13px 30px;border-radius:10px;cursor:pointer;transition:all .15s;text-align:center} .apxb .btn-load:hover{border-color:var(--blue);color:var(--blue);box-shadow:0 8px 24px rgba(7,28,93,.08)} /* ── pagination ── */ .apxb .pager{display:flex;align-items:center;justify-content:center;gap:8px;padding:44px 0 8px;flex-wrap:wrap} .apxb .pager .pg{min-width:42px;height:42px;padding:0 12px;border-radius:10px;border:1px solid var(--stroke);background:#fff;font-family:var(--sans);font-weight:600;font-size:15px;color:var(--text);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:all .12s} .apxb .pager a.pg:hover{border-color:var(--blue);color:var(--blue)} .apxb .pager .pg.active{background:var(--dark);color:#fff;border-color:var(--dark)} .apxb .pager .pg.dots{border:none;pointer-events:none;color:var(--icons)} /* ── category header ── */ .apxb .cat-head{padding:34px 0 30px} .apxb .back{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--text);margin-bottom:24px;transition:color .12s} .apxb .back:hover{color:var(--blue)} .apxb .cat-band{display:flex;align-items:center;gap:24px} .apxb .cat-ico{width:76px;height:76px;border-radius:18px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:30px} .apxb .cat-ico i{position:relative;z-index:3} .apxb .cat-meta .eyebrow{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--blue)} .apxb .cat-meta h1{font-size:44px;font-weight:800;letter-spacing:-.03em;line-height:1.05;margin:10px 0 0} .apxb .cat-desc{font-size:19px;line-height:1.5;color:#3A4667;max-width:640px;margin:18px 0 0} .apxb .cat-count{font-size:13px;font-weight:600;color:var(--icons);margin-top:14px} /* ── tag header ── */ .apxb .t-head{padding:36px 0 26px} .apxb .t-title{display:flex;align-items:center;gap:14px;margin:12px 0 0} .apxb .t-hash{width:56px;height:56px;border-radius:14px;background:var(--light);color:var(--blue);font-size:28px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0} .apxb .t-title h1{font-size:44px;font-weight:800;letter-spacing:-.03em;line-height:1} .apxb .t-count{font-size:14px;color:var(--text);margin-top:16px} .apxb .t-related{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:22px} .apxb .t-related .lbl{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--icons);margin-right:4px} .apxb .chip{font-size:13px;font-weight:600;color:var(--text);background:var(--lighter);border:1px solid var(--stroke);padding:7px 14px;border-radius:100px;cursor:pointer;transition:all .12s} .apxb .chip:hover{border-color:var(--blue);color:var(--blue)} .apxb .chip.on{background:var(--dark);color:#fff;border-color:var(--dark)} /* ── author header (standard) ── */ .apxb .a-head{padding:40px 0 32px;border-bottom:1px solid var(--hairline)} .apxb .a-top{display:flex;align-items:center;gap:26px} .apxb .a-av{width:104px;height:104px;border-radius:50%;flex-shrink:0;background:linear-gradient(135deg,#123EC6,#071C5D);color:#fff;font-size:42px;font-weight:800;display:flex;align-items:center;justify-content:center} .apxb .a-meta .eyebrow{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--blue)} .apxb .a-meta h1{font-size:40px;font-weight:800;letter-spacing:-.03em;line-height:1.05;margin:8px 0 4px} .apxb .a-meta .role{font-size:16px;font-weight:600;color:var(--text)} .apxb .a-bio{font-size:18px;line-height:1.6;color:#3A4667;max-width:660px;margin:22px 0 0} .apxb .a-social{display:flex;align-items:center;gap:16px;margin-top:20px;flex-wrap:wrap} .apxb .a-social .cnt{font-size:13px;font-weight:600;color:var(--icons)} .apxb .a-social .links{display:flex;gap:8px} .apxb .a-social a{width:40px;height:40px;border-radius:10px;border:1px solid var(--stroke);display:flex;align-items:center;justify-content:center;color:var(--text);transition:all .15s} .apxb .a-social a:hover{border-color:var(--blue);color:var(--blue);background:var(--lighter)} /* ── author hero (elevated CEO) ── */ .apxb .a-hero{background:var(--dark);color:#fff;position:relative;overflow:hidden;border-radius:0} .apxb .a-hero::after{content:'';position:absolute;top:-140px;right:-60px;width:600px;height:460px;background:radial-gradient(circle,rgba(18,62,198,.45),transparent 62%);pointer-events:none} .apxb .a-hero::before{content:'';position:absolute;inset:0;opacity:.5;pointer-events:none;background-image:repeating-linear-gradient(115deg,rgba(255,255,255,.03) 0 1px,transparent 1px 26px)} .apxb .a-hero-in{position:relative;z-index:2;max-width:1080px;margin:0 auto;padding:40px 32px 44px} .apxb .a-hero .back{color:rgba(255,255,255,.7)} .apxb .a-hero .back:hover{color:#fff} .apxb .a-hero .a-av{width:120px;height:120px;border-radius:24px;background:linear-gradient(135deg,#2A56E4,#071C5D);font-size:44px;box-shadow:0 16px 40px rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.1)} .apxb .a-hero .a-top{gap:28px} .apxb .a-hero .eyebrow{color:#7B9BFF} .apxb .a-hero .a-meta h1{font-size:44px;margin:10px 0 6px} .apxb .a-hero .a-meta .role{font-size:17px;font-weight:500;color:rgba(255,255,255,.72);display:flex;align-items:center;gap:12px;flex-wrap:wrap} .apxb .a-hero .a-meta .role .loc{color:rgba(255,255,255,.5);font-size:14px;display:inline-flex;align-items:center;gap:6px} .apxb .a-bio.on-dark{font-size:18px;line-height:1.62;color:rgba(255,255,255,.82);max-width:720px;margin:26px 0 0} .apxb .a-quote{margin:24px 0 0;padding-left:20px;border-left:3px solid #7B9BFF;font-size:19px;font-weight:600;color:#fff;max-width:640px;letter-spacing:-.01em} .apxb .ventures{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:30px 0 4px;max-width:760px} .apxb .ventures .v{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:16px 18px} .apxb .ventures .yr{font-size:12px;font-weight:700;letter-spacing:.08em;color:#7B9BFF} .apxb .ventures .nm{font-size:17px;font-weight:800;margin:5px 0 3px} .apxb .ventures .ds{font-size:12.5px;color:rgba(255,255,255,.6);line-height:1.4} .apxb .a-hero .a-social{margin-top:26px} .apxb .a-hero .a-social .cnt{color:rgba(255,255,255,.5)} .apxb .a-hero .a-social a{width:42px;height:42px;border-radius:11px;border:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.82)} .apxb .a-hero .a-social a:hover{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.3)} /* ── search ── */ .apxb .s-head{padding:44px 0 26px} .apxb .s-head h1{font-size:34px;font-weight:800;letter-spacing:-.028em;margin-bottom:22px} .apxb .s-box{position:relative;max-width:640px} .apxb .s-box .mag{position:absolute;left:20px;top:50%;transform:translateY(-50%);color:var(--icons);font-size:17px} .apxb .s-box input{width:100%;font-family:var(--sans);font-size:18px;font-weight:500;padding:17px 52px;border:1.5px solid var(--stroke);border-radius:14px;color:var(--dark);background:var(--lighter);transition:all .15s} .apxb .s-box input:focus{outline:none;border-color:var(--blue);background:#fff;box-shadow:0 0 0 4px rgba(18,62,198,.1)} .apxb .s-box .clear{position:absolute;right:16px;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:8px;border:none;background:var(--light);color:var(--blue);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px} .apxb .s-info{display:flex;align-items:center;gap:14px;margin-top:22px;padding-top:20px;border-top:1px solid var(--hairline);flex-wrap:wrap} .apxb .s-info .rc{font-size:15px;color:var(--text)} .apxb .s-info .rc b{color:var(--dark);font-weight:700} .apxb .apxb-main mark{background:var(--light);color:var(--blue);border-radius:3px;padding:0 3px;font-weight:600} .apxb .search-row{grid-template-columns:1fr 200px} .apxb .search-row .rcover{height:124px} .apxb .s-empty{padding:40px 0 8px;font-size:17px;color:var(--text)} /* ── single article ── */ .apxb .progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:70;background:transparent} .apxb .progress-bar{height:100%;width:0;background:var(--blue)} .apxb .art-head{padding:44px 0 30px;text-align:center} .apxb .crumb{display:flex;align-items:center;justify-content:center;gap:9px;font-size:13px;color:var(--text);margin-bottom:26px;flex-wrap:wrap} .apxb .crumb a:hover{color:var(--blue)} .apxb .crumb i{font-size:9px;color:var(--icons)} .apxb .crumb .c-cat{color:var(--blue);font-weight:600} .apxb .art-head h1{font-size:46px;font-weight:800;letter-spacing:-.032em;line-height:1.08;max-width:760px;margin:0 auto 22px} .apxb .standfirst{font-size:22px;line-height:1.5;color:#3A4667;max-width:660px;margin:0 auto 30px} .apxb .art-by{display:flex;align-items:center;justify-content:center;gap:13px;font-size:14px;color:var(--text);flex-wrap:wrap} .apxb .art-by .avatar{width:38px;height:38px;font-size:14px} .apxb .art-by .who{font-weight:600;color:var(--dark)} .apxb .art-by .role{color:var(--text)} .apxb .art-by .sep{width:3px;height:3px;border-radius:50%;background:var(--icons)} .apxb .art-hero{margin:8px auto 0;max-width:1080px;padding:0 32px} .apxb .art-hero .cover{aspect-ratio:21/9;border-radius:20px} .apxb .art-hero .cover .stamp{left:26px;bottom:22px} .apxb .body{padding:52px 0 20px} .apxb .body p{font-size:18px;line-height:1.72;color:var(--ink);margin-bottom:24px} .apxb .body p a{color:var(--blue);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px} .apxb .body > p:first-of-type::first-letter{float:left;font-family:var(--sans);font-weight:800;font-size:66px;line-height:.82;padding:6px 12px 0 0;color:var(--dark)} .apxb .body h2{font-size:29px;font-weight:800;letter-spacing:-.02em;line-height:1.18;margin:44px 0 16px} .apxb .body h3{font-size:21px;font-weight:700;letter-spacing:-.01em;margin:34px 0 12px} .apxb .body ul{margin:0 0 26px;padding:0;list-style:none} .apxb .body ul li{font-size:18px;line-height:1.7;color:var(--ink);padding-left:30px;position:relative;margin-bottom:12px} .apxb .body ul li::before{content:'';position:absolute;left:6px;top:13px;width:7px;height:7px;border-radius:2px;background:var(--blue);transform:rotate(45deg)} .apxb .body ol{margin:0 0 26px;padding-left:24px} .apxb .body ol li{font-size:18px;line-height:1.7;color:var(--ink);margin-bottom:12px} .apxb .body strong{font-weight:600;color:var(--dark)} .apxb .body img{border-radius:14px;margin:32px auto} .apxb .body blockquote{margin:40px 0;padding:8px 0 8px 30px;border-left:3px solid var(--blue)} .apxb .body blockquote p{font-size:25px;line-height:1.38;color:var(--dark);margin:0;font-weight:600;letter-spacing:-.01em} .apxb .pull{margin:40px 0;padding:8px 0 8px 30px;border-left:3px solid var(--blue)} .apxb .pull p{font-size:25px;line-height:1.38;color:var(--dark);margin:0;font-weight:600;letter-spacing:-.01em} .apxb .pull cite{display:block;font-style:normal;font-size:14px;font-weight:600;color:var(--text);margin-top:14px} .apxb .callout{margin:38px 0;background:var(--lighter);border:1px solid var(--stroke);border-radius:16px;padding:26px 28px} .apxb .callout h4{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);margin-bottom:16px} .apxb figure{margin:40px 0} .apxb figure .cover{aspect-ratio:16/8;border-radius:14px} .apxb figcaption{font-size:13px;color:var(--text);margin-top:12px;text-align:center} .apxb .inline-cta{margin:44px 0;background:var(--dark);border-radius:18px;padding:32px 34px;position:relative;overflow:hidden;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:24px} .apxb .inline-cta::after{content:'';position:absolute;top:-90px;right:-30px;width:280px;height:280px;background:radial-gradient(circle,rgba(18,62,198,.5),transparent 64%);pointer-events:none} .apxb .inline-cta .t{position:relative;z-index:1} .apxb .inline-cta h4{font-size:21px;font-weight:800;letter-spacing:-.01em;margin-bottom:6px} .apxb .inline-cta p{font-size:15px;color:rgba(255,255,255,.7);margin:0;max-width:380px;line-height:1.45} .apxb .inline-cta .btn-w{position:relative;z-index:1;flex-shrink:0;background:#fff;color:var(--dark);font-weight:700;font-size:15px;padding:13px 22px;border-radius:10px} .apxb .art-foot{padding:14px 0 0} .apxb .tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:34px} .apxb .tag{font-size:13px;font-weight:600;color:var(--blue);background:var(--light);padding:6px 13px;border-radius:100px} .apxb .share-row{display:flex;align-items:center;gap:12px;padding:22px 0;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);flex-wrap:wrap} .apxb .share-row .lbl{font-size:13px;font-weight:600;color:var(--text);margin-right:2px} .apxb .share-row a{width:40px;height:40px;border-radius:10px;border:1px solid var(--stroke);display:flex;align-items:center;justify-content:center;color:var(--text);transition:all .15s} .apxb .share-row a:hover{border-color:var(--blue);color:var(--blue);background:var(--lighter)} .apxb .share-row .grow{flex:1} .apxb .bio{display:flex;gap:20px;align-items:flex-start;margin:38px 0 0;padding:28px;border:1px solid var(--stroke);border-radius:18px;background:var(--lighter)} .apxb .bio .avatar{width:60px;height:60px;font-size:22px} .apxb .bio h4{font-size:18px;font-weight:700;margin-bottom:3px} .apxb .bio .role{font-size:13px;font-weight:600;color:var(--blue);margin-bottom:10px} .apxb .bio p{font-size:15px;line-height:1.55;color:var(--text)} .apxb .related{border-top:1px solid var(--dark);margin-top:64px;padding-top:12px} .apxb .related .rh{font-size:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin:24px 0 22px} .apxb .rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px} .apxb .rel-card{cursor:pointer} .apxb .rel-card .cover{aspect-ratio:16/10;border-radius:14px;margin-bottom:16px;transition:transform .25s} .apxb .rel-card:hover .cover{transform:translateY(-3px)} .apxb .rel-card .kicker{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)} .apxb .rel-card h5{font-size:18px;font-weight:700;line-height:1.28;letter-spacing:-.01em;margin:10px 0 8px} .apxb .rel-card:hover h5{color:var(--blue)} .apxb .rel-card .rm{font-size:12.5px;color:var(--text)} .apxb .rel-card .cover .stamp{left:14px;bottom:11px} .apxb .rel-card .cover .stamp i{font-size:12px} .apxb .rel-card .cover .stamp span{font-size:10px} /* ── newsletter band ── */ .apxb .news{margin:68px auto 80px;max-width:1080px;padding:0 32px} .apxb .news-in{background:var(--lighter);border:1px solid var(--stroke);border-radius:22px;padding:48px 40px;text-align:center} .apxb .news-in h3{font-size:28px;font-weight:800;letter-spacing:-.02em;margin-bottom:10px} .apxb .news-in p{font-size:17px;color:var(--text);margin-bottom:24px} .apxb .news-in form{display:flex;gap:10px;max-width:440px;margin:0 auto} .apxb .news-in input{flex:1;min-width:0;font-family:var(--sans);font-size:15px;padding:14px 18px;border-radius:10px;border:1px solid var(--stroke);background:#fff;color:var(--dark)} .apxb .news-in input:focus{outline:none;border-color:var(--blue)} .apxb .news-in button{background:var(--dark);color:#fff;border:none;font-family:var(--sans);font-weight:700;font-size:15px;padding:14px 24px;border-radius:10px;cursor:pointer} /* subscribe result message */ .apxb .apxb-msg{font-size:13px;margin-top:12px;font-weight:600} .apxb .apxb-msg.is-ok{color:var(--green)} .apxb .apxb-msg.is-err{color:#C0392B} /* accessible focus ring across interactive blog elements */ .apxb .apxb-main a:focus-visible, .apxb .apxb-main button:focus-visible, .apxb .apxb-main input:focus-visible{outline:2px solid var(--blue);outline-offset:2px} /* ── responsive ── */ @media(max-width:900px){ .apxb .head-row{flex-direction:column;align-items:stretch;gap:28px} .apxb .head h1{font-size:44px} .apxb .sub-card{width:100%} .apxb .lead > a{grid-template-columns:1fr;gap:24px} .apxb .lead h2{font-size:30px} .apxb .row{grid-template-columns:1fr 150px;gap:20px} .apxb .rnum{display:none} .apxb .rcover{width:150px;height:104px} .apxb .search-row{grid-template-columns:1fr 150px} .apxb .cat-meta h1,.apxb .t-title h1,.apxb .a-meta h1{font-size:36px} .apxb .a-hero .a-meta h1{font-size:36px} .apxb .ventures{grid-template-columns:1fr} .apxb .art-head h1{font-size:38px} .apxb .rel-grid{grid-template-columns:1fr;gap:22px} .apxb .rel-card{display:grid;grid-template-columns:150px 1fr;gap:16px;align-items:center} .apxb .rel-card .cover{margin-bottom:0;aspect-ratio:4/3} } @media(max-width:600px){ .apxb .col,.apxb .wide,.apxb .measure,.apxb .art-hero,.apxb .news{padding:0 20px} .apxb .head{padding:40px 0 26px} .apxb .head h1{font-size:34px;letter-spacing:-.03em} .apxb .head .lede{font-size:17px} .apxb .filter-in{padding:0 20px} .apxb .tabs{padding:10px 0} .apxb .sortby{display:none} .apxb .lead{padding:30px 0 4px} .apxb .lead h2{font-size:26px} .apxb .lead .deck{font-size:17px} .apxb .list-head{margin-top:44px} .apxb .row{grid-template-columns:1fr;gap:16px;padding:24px 0} .apxb .rcover{width:100%;height:180px;order:-1} .apxb .row h4{font-size:21px} .apxb .search-row{grid-template-columns:1fr} .apxb .cat-head{padding:26px 0 22px} .apxb .cat-band{gap:16px} .apxb .cat-ico{width:56px;height:56px;font-size:22px;border-radius:14px} .apxb .cat-meta h1{font-size:28px} .apxb .cat-desc{font-size:17px} .apxb .t-head{padding:26px 0 22px} .apxb .t-hash{width:46px;height:46px;font-size:23px} .apxb .t-title h1{font-size:28px} .apxb .a-head{padding:28px 0 24px} .apxb .a-av{width:76px;height:76px;font-size:30px} .apxb .a-meta h1{font-size:27px} .apxb .a-bio{font-size:16px} .apxb .a-hero-in{padding:28px 22px 32px} .apxb .a-hero .a-top{flex-direction:column;align-items:flex-start;gap:18px} .apxb .a-hero .a-av{width:84px;height:84px;font-size:32px;border-radius:20px} .apxb .a-hero .a-meta h1{font-size:29px} .apxb .a-bio.on-dark{font-size:16px} .apxb .a-quote{font-size:17px} .apxb .s-head{padding:30px 0 22px} .apxb .s-head h1{font-size:26px} .apxb .s-box input{font-size:16px;padding:15px 48px} .apxb .s-info{flex-direction:column;align-items:flex-start;gap:12px} .apxb .art-head{padding:30px 0 24px} .apxb .art-head h1{font-size:30px;letter-spacing:-.028em} .apxb .standfirst{font-size:18px} .apxb .art-hero .cover{aspect-ratio:16/10} .apxb .body{padding:38px 0 16px} .apxb .body h2{font-size:25px} .apxb .body > p:first-of-type::first-letter{font-size:54px} .apxb .pull p,.apxb .body blockquote p{font-size:22px} .apxb .inline-cta{flex-direction:column;align-items:flex-start;padding:26px 24px} .apxb .rel-card{grid-template-columns:1fr} .apxb .rel-card .cover{aspect-ratio:16/10} .apxb .news-in{padding:34px 22px} .apxb .news-in h3{font-size:23px} .apxb .news-in form{flex-direction:column} } /* ===== APXB: beat Avada generic-class collisions + hide page title bar ===== */ body.apxb .fusion-page-title-bar, body.apxb .fusion-page-title-wrapper, body.apxb .fusion-page-title-row, body.apxb .fusion-breadcrumbs{display:none !important} body.apxb .avada-page-titlebar-wrapper{display:none !important} body.apxb .row{display:grid !important;grid-template-columns:34px 1fr 200px !important;gap:28px !important;align-items:center !important;width:auto !important;float:none !important;margin:0 !important} body.apxb .rcover{width:200px !important;height:132px !important;max-width:200px !important;flex:none !important} body.apxb .col,body.apxb .measure,body.apxb .wide{float:none !important;width:auto !important} body.apxb .rtext{width:auto !important} @media(max-width:900px){ body.apxb .row{grid-template-columns:1fr 150px !important} body.apxb .rcover{width:150px !important;height:104px !important;max-width:150px !important} } @media(max-width:600px){ body.apxb .row{grid-template-columns:1fr !important;gap:16px !important} body.apxb .rcover{width:100% !important;height:180px !important;max-width:100% !important} } /* ===== APXB: force explicit row grid placement (fix auto-placement) ===== */ body.apxb .row > .rnum{grid-column:1 !important;grid-row:1 !important} body.apxb .row > .rtext{grid-column:2 !important;grid-row:1 !important} body.apxb .row > .cover,body.apxb .row > .rcover{grid-column:3 !important;grid-row:1 !important} @media(max-width:900px){ body.apxb .row > .rtext{grid-column:1 !important} body.apxb .row > .cover,body.apxb .row > .rcover{grid-column:2 !important} } @media(max-width:600px){ body.apxb .row{grid-template-columns:1fr !important} body.apxb .row > .rtext,body.apxb .row > .cover,body.apxb .row > .rcover{grid-column:1 !important;grid-row:auto !important} body.apxb .row > .cover,body.apxb .row > .rcover{order:-1} } /* ================= APXB polish round 2 ================= */ /* (a) real post-content lists: native bullets, no custom markers, leave TOC/plugin lists alone */ body.apxb .body ul{list-style:disc !important;padding-left:1.5em !important;margin:0 0 24px !important} body.apxb .body ol{list-style:decimal !important;padding-left:1.5em !important;margin:0 0 24px !important} body.apxb .body ul>li,body.apxb .body ol>li{padding-left:0 !important;position:static !important;margin-bottom:8px !important} body.apxb .body ul>li::before,body.apxb .body ol>li::before{content:none !important;display:none !important} body.apxb .body .ez-toc-container ul,body.apxb .body [class*="toc"] ul,body.apxb .body [class*="toc"] ol{list-style:none !important;padding-left:0 !important} body.apxb .body [class*="toc"] li{margin-bottom:4px !important} /* keep the key-takeaways callout checks (they are .callout, not .body>) */ /* (b) author CEO dark hero: readable light bio + kill Avada blockquote white box */ body.apxb .a-hero .a-bio{color:rgba(255,255,255,.85) !important} body.apxb .a-hero .a-bio strong{color:#fff !important} body.apxb .a-hero .a-quote{background:transparent !important;background-color:transparent !important;box-shadow:none !important;border-radius:0 !important;border:0 !important;border-left:3px solid #7B9BFF !important;padding:2px 0 2px 20px !important;color:#fff !important;quotes:none !important} body.apxb .a-hero .a-quote::before,body.apxb .a-hero .a-quote::after{content:none !important;display:none !important} /* (c) breadcrumb: left-aligned, clearer, back navigation */ body.apxb .crumb{justify-content:flex-start !important;font-size:14px !important;margin-bottom:20px !important} body.apxb .crumb a{font-weight:600 !important} body.apxb .crumb a:first-child::before{font-family:"Font Awesome 6 Free";font-weight:900;content:"\f060";font-size:11px;margin-right:7px;color:var(--icons)} /* ================= APXB: top breathing room below Avada header ================= */ body.apxb .head{padding-top:60px !important} body.apxb .art-head{padding-top:56px !important} body.apxb .cat-head{padding-top:56px !important} body.apxb .t-head{padding-top:56px !important} body.apxb .a-head{padding-top:52px !important} body.apxb .a-hero .a-hero-in{padding-top:52px !important} body.apxb .s-head{padding-top:56px !important} @media(max-width:600px){ body.apxb .head,body.apxb .art-head,body.apxb .cat-head,body.apxb .t-head,body.apxb .a-head,body.apxb .s-head{padding-top:36px !important} body.apxb .a-hero .a-hero-in{padding-top:34px !important} } /* ===== APXB: article single-post transparent-header clearance + visible breadcrumb ===== */ body.apxb.single-post .art-head{padding-top:104px !important} body.apxb .crumb{background:transparent;font-size:14px !important;font-weight:600 !important} body.apxb .crumb a{color:var(--blue) !important} body.apxb .crumb .c-cat{color:var(--text) !important} @media(max-width:600px){ body.apxb.single-post .art-head{padding-top:76px !important} } /* ===== APXB: author CEO hero -> white/light + photo avatar ===== */ body.apxb .a-hero{background:#fff !important;color:var(--dark) !important;border-bottom:1px solid var(--hairline) !important} body.apxb .a-hero::before{display:none !important} body.apxb .a-hero::after{background:radial-gradient(circle,rgba(18,62,198,.06),transparent 60%) !important} body.apxb .a-hero .back{color:var(--text) !important} body.apxb .a-hero .back:hover{color:var(--blue) !important} body.apxb .a-hero .eyebrow{color:var(--blue) !important} body.apxb .a-hero h1{color:var(--dark) !important} body.apxb .a-hero .role{color:var(--text) !important} body.apxb .a-hero .a-bio{color:#3A4667 !important} body.apxb .a-hero .a-bio strong{color:var(--dark) !important} body.apxb .a-hero .a-quote{color:var(--dark) !important;border-left:3px solid var(--blue) !important;background:transparent !important} body.apxb .a-hero .ventures .v{background:var(--lighter) !important;border:1px solid var(--stroke) !important} body.apxb .a-hero .v .yr{color:var(--blue) !important} body.apxb .a-hero .v .nm{color:var(--dark) !important} body.apxb .a-hero .v .ds{color:var(--text) !important} body.apxb .a-hero .a-social .cnt{color:var(--icons) !important} body.apxb .a-hero .a-social a{border:1px solid var(--stroke) !important;color:var(--text) !important} body.apxb .a-hero .a-social a:hover{border-color:var(--blue) !important;color:var(--blue) !important;background:var(--lighter) !important} body.apxb .a-hero .a-av{background:none !important;box-shadow:none !important;border:0 !important;padding:0 !important;width:120px !important;height:120px !important;border-radius:50% !important;overflow:hidden !important;flex-shrink:0} body.apxb .a-hero .a-av .a-photo{width:120px !important;height:120px !important;border-radius:50% !important;object-fit:cover !important;display:block} @media(max-width:600px){body.apxb .a-hero .a-av,body.apxb .a-hero .a-av .a-photo{width:88px !important;height:88px !important}} /* ===== APXB: prominent newsletter band (Square One) ===== */ body.apxb .news-in{background:var(--dark) !important;border:0 !important;border-radius:24px !important;padding:60px 44px !important;color:#fff !important;position:relative;overflow:hidden;box-shadow:0 18px 50px rgba(7,28,93,.22)} body.apxb .news-in::after{content:'';position:absolute;top:-120px;right:-40px;width:480px;height:380px;background:radial-gradient(circle,rgba(18,62,198,.55),transparent 62%);pointer-events:none} body.apxb .news-in > *{position:relative;z-index:1} body.apxb .news-in .news-eyebrow{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#7B9BFF;margin-bottom:14px} body.apxb .news-in h3{color:#fff !important;font-size:32px !important;line-height:1.15;max-width:700px;margin:0 auto 12px !important;letter-spacing:-.02em} body.apxb .news-in p{color:rgba(255,255,255,.75) !important;font-size:17px !important;max-width:560px;margin:0 auto 24px} body.apxb .news-in .apxb-subscribe input{background:rgba(255,255,255,.1) !important;border:1px solid rgba(255,255,255,.22) !important;color:#fff !important} body.apxb .news-in .apxb-subscribe input::placeholder{color:rgba(255,255,255,.55)} body.apxb .news-in .apxb-subscribe button{background:#fff !important;color:var(--dark) !important;font-weight:700 !important;border:0 !important} body.apxb .news-in .apxb-subscribe button:hover{background:var(--light) !important} body.apxb .news-in .apxb-msg{color:rgba(255,255,255,.85) !important} @media(max-width:600px){ body.apxb .news-in{padding:40px 24px !important} body.apxb .news-in h3{font-size:24px !important} } /* ===== APXB: newsletter box v2 — editorial, coral-accented (no AI glow) ===== */ body.apxb .news-in{background:var(--dark) !important;border:0 !important;border-radius:20px !important;padding:42px 48px !important;color:#fff !important;text-align:left !important;display:grid !important;grid-template-columns:1.15fr .85fr !important;gap:44px !important;align-items:center !important;box-shadow:0 16px 44px rgba(7,28,93,.20) !important;position:relative;overflow:hidden} body.apxb .news-in::after{display:none !important} body.apxb .news-in::before{content:'' !important;position:absolute !important;left:0;top:0;bottom:0;width:4px;background:#E8523A !important} body.apxb .news-in .news-eyebrow{color:#E8523A !important;margin-bottom:12px !important;letter-spacing:.14em} body.apxb .news-in h3{color:#fff !important;font-size:27px !important;line-height:1.18 !important;max-width:none !important;margin:0 0 10px !important;text-align:left !important;letter-spacing:-.02em} body.apxb .news-in p{color:rgba(255,255,255,.7) !important;font-size:16px !important;max-width:none !important;margin:0 !important;text-align:left !important} body.apxb .news-in .apxb-subscribe{display:flex !important;gap:10px !important;margin:0 !important;justify-content:flex-start} body.apxb .news-in .apxb-subscribe input{flex:1;min-width:0;background:rgba(255,255,255,.08) !important;border:1px solid rgba(255,255,255,.2) !important;color:#fff !important} body.apxb .news-in .apxb-subscribe input::placeholder{color:rgba(255,255,255,.5)} body.apxb .news-in .apxb-subscribe button{background:#E8523A !important;color:#fff !important;border:0 !important;font-weight:700 !important;white-space:nowrap;padding:14px 26px !important} body.apxb .news-in .apxb-subscribe button:hover{background:#d1442e !important} body.apxb .news-in .apxb-msg{grid-column:1/-1 !important;color:rgba(255,255,255,.85) !important;margin-top:6px} @media(max-width:760px){ body.apxb .news-in{grid-template-columns:1fr !important;gap:22px !important;padding:34px 26px !important} body.apxb .news-in h3{font-size:23px !important} body.apxb .news-in .apxb-subscribe{flex-direction:column} body.apxb .news-in .apxb-subscribe button{width:100%} } /* ===== APXB: lighter, more elegant heading weights (was very bold/800) ===== */ body.apxb .head h1, body.apxb .art-head h1, body.apxb .cat-head h1, body.apxb .t-head h1, body.apxb .a-head h1, body.apxb .a-hero h1{font-weight:600 !important;letter-spacing:-.03em !important} body.apxb .lead h2, body.apxb .feat-card h2{font-weight:600 !important;letter-spacing:-.025em !important} body.apxb .body h2{font-weight:700 !important;letter-spacing:-.02em !important} body.apxb .body h3{font-weight:600 !important} body.apxb .row h4, body.apxb .rel-card h5, body.apxb .card h3{font-weight:600 !important} body.apxb .standfirst,body.apxb .head .lede{font-weight:400 !important} /* newsletter box: lighter, more refined headline */ body.apxb .news-in h3{font-weight:600 !important;letter-spacing:-.015em !important} body.apxb .sub-card h4{font-weight:600 !important} body.apxb .news-in .apxb-subscribe button{font-weight:600 !important} /* ===== APXB: smaller home H1 ===== */ body.apxb .head h1{font-size:40px !important;line-height:1.1 !important;max-width:640px !important} @media(max-width:600px){ body.apxb .head h1{font-size:30px !important} } body.apxb .head .lede{font-size:18px !important;max-width:560px !important} /* ===== APXB: newsletter box v3 — light, editorial, elegant ===== */ body.apxb .news-in{background:#fff !important;border:1px solid var(--stroke) !important;border-radius:18px !important;padding:40px 44px !important;color:var(--dark) !important;text-align:left !important;display:grid !important;grid-template-columns:1fr auto !important;gap:48px !important;align-items:center !important;box-shadow:0 10px 30px rgba(7,28,93,.06) !important;overflow:visible !important} body.apxb .news-in::before{display:none !important} body.apxb .news-in::after{display:none !important} body.apxb .news-in .news-eyebrow{color:#E8523A !important;font-size:12px !important;letter-spacing:.14em !important;margin-bottom:10px !important} body.apxb .news-in h3{color:var(--dark) !important;font-weight:600 !important;font-size:24px !important;line-height:1.2 !important;letter-spacing:-.02em !important;margin:0 0 8px !important;text-align:left !important;max-width:none !important} body.apxb .news-in p{color:var(--text) !important;font-size:15px !important;margin:0 !important;text-align:left !important;max-width:440px !important} body.apxb .news-in .apxb-subscribe{display:flex !important;gap:10px !important;margin:0 !important} body.apxb .news-in .apxb-subscribe input{background:#fff !important;border:1px solid var(--stroke) !important;color:var(--dark) !important;min-width:240px !important} body.apxb .news-in .apxb-subscribe input::placeholder{color:var(--icons) !important} body.apxb .news-in .apxb-subscribe button{background:var(--dark) !important;color:#fff !important;border:0 !important;font-weight:600 !important;padding:13px 24px !important} body.apxb .news-in .apxb-subscribe button:hover{background:#0a2a80 !important} body.apxb .news-in .apxb-msg{grid-column:1/-1 !important;color:var(--text) !important} @media(max-width:760px){ body.apxb .news-in{grid-template-columns:1fr !important;gap:20px !important;padding:30px 24px !important} body.apxb .news-in .apxb-subscribe{flex-direction:column} body.apxb .news-in .apxb-subscribe input{min-width:0 !important} body.apxb .news-in .apxb-subscribe button{width:100%} } /* ===== APXB: compact, editorial category/tag headers (drop AI gradient tile) ===== */ body.apxb .cat-ico,body.apxb .t-hash{display:none !important} body.apxb .cat-head,body.apxb .t-head{padding-top:44px !important;padding-bottom:18px !important} body.apxb .cat-band{gap:0 !important;align-items:flex-start !important} body.apxb .cat-meta .eyebrow,body.apxb .t-head .eyebrow{font-size:12px !important;letter-spacing:.14em !important} body.apxb .cat-meta h1,body.apxb .t-title h1{font-size:32px !important;font-weight:600 !important;letter-spacing:-.02em !important;margin-top:8px !important} body.apxb .cat-desc{font-size:15px !important;line-height:1.55 !important;color:var(--text) !important;max-width:640px !important;margin-top:12px !important;display:-webkit-box !important;-webkit-line-clamp:2 !important;-webkit-box-orient:vertical !important;overflow:hidden !important} body.apxb .cat-count,body.apxb .t-count{font-size:13px !important;margin-top:12px !important;color:var(--icons) !important} body.apxb .list-head{margin-top:32px !important} /* ===== APXB: category header v3 — keep all elements, organize as 2 columns ===== */ body.apxb .cat-ico{display:flex !important;width:60px !important;height:60px !important;border-radius:14px !important} body.apxb .cat-head{display:grid !important;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr) !important;column-gap:56px !important;row-gap:8px !important;align-items:start !important;padding-top:44px !important;padding-bottom:24px !important} body.apxb .cat-head .back{grid-column:1 / -1 !important;margin-bottom:6px !important} body.apxb .cat-band{grid-column:1 !important;grid-row:2 !important;align-items:center !important} body.apxb .cat-count{grid-column:1 !important;grid-row:3 !important;margin-top:16px !important} body.apxb .cat-meta h1{font-size:34px !important;font-weight:600 !important} body.apxb .cat-desc{grid-column:2 !important;grid-row:2 / 4 !important;display:block !important;-webkit-line-clamp:unset !important;overflow:visible !important;font-size:16px !important;line-height:1.62 !important;color:var(--text) !important;max-width:none !important;margin:4px 0 0 !important} @media(max-width:820px){ body.apxb .cat-head{grid-template-columns:1fr !important} body.apxb .cat-band,body.apxb .cat-count,body.apxb .cat-desc{grid-column:1 !important} body.apxb .cat-desc{grid-row:auto !important;margin-top:12px !important} body.apxb .cat-count{grid-row:auto !important} } body.apxb .cat-band{gap:16px !important} /* ===== APXB: category header v5 — icon stacked above title so breadcrumb, title, description, count and the article list all share one left edge ===== */ body.apxb .cat-head{display:block !important;padding-top:48px !important;padding-bottom:26px !important} body.apxb .cat-band{display:flex !important;flex-direction:column !important;align-items:flex-start !important;gap:14px !important} /* refined flat icon (no AI gradient/grain) */ body.apxb .cat-ico{display:flex !important;width:52px !important;height:52px !important;border-radius:13px !important;background:var(--dark) !important;box-shadow:none !important;border:none !important;overflow:hidden} body.apxb .cat-ico::after,body.apxb .cat-ico::before,body.apxb .cat-ico .grid-lines{display:none !important} body.apxb .cat-ico i{color:#fff !important;position:relative;z-index:3;font-size:21px !important} body.apxb .cat-meta .eyebrow{font-size:12px !important;letter-spacing:.14em !important} body.apxb .cat-meta h1{font-size:34px !important;font-weight:600 !important;letter-spacing:-.02em !important;margin-top:5px !important} /* full description, elegant readable measure */ body.apxb .cat-desc{grid-column:auto !important;grid-row:auto !important;display:block !important;-webkit-line-clamp:unset !important;overflow:visible !important;max-width:720px !important;font-size:16px !important;line-height:1.65 !important;color:var(--text) !important;margin-top:20px !important} body.apxb .cat-count{grid-column:auto !important;grid-row:auto !important;margin-top:16px !important;font-size:13px !important;color:var(--icons) !important} /* APXB: more breathing room at top of category/tag headers */ body.apxb .cat-head,body.apxb .t-head{padding-top:72px !important} @media(max-width:600px){body.apxb .cat-head,body.apxb .t-head{padding-top:44px !important}} /* APXB: masthead sat too close to the navbar — add air above the blog index hero */ body.apxb .head{padding-top:92px !important} @media(max-width:600px){body.apxb .head{padding-top:54px !important}} /* APXB: blog masthead — centered & balanced (stacked title+subtitle, no lopsided right whitespace) */ body.apxb .head{text-align:center} body.apxb .head-row{flex-direction:column !important;align-items:center !important;gap:0 !important} body.apxb .head-left{max-width:100%} body.apxb .head h1{margin:16px auto 0 !important;max-width:840px !important} body.apxb .head-row .lede{flex:none !important;width:auto !important;max-width:660px !important;margin:20px auto 0 !important} /* ============================================================ APXB FINAL (2026-07-14) — clear the transparent overlay header. Desktop Avada header is position:absolute (~80px) sitting OVER content that starts at y=0, so every blog header needs top padding to land comfortably below the nav (was: breadcrumb tucked under the navbar). Mobile header is in-flow (content already starts below it) — so this is desktop-only and leaves the mobile cascade intact. ============================================================ */ @media(min-width:601px){ body.apxb .head, body.apxb .cat-head, body.apxb .t-head, body.apxb .art-head, body.apxb .a-head, body.apxb .s-head{ padding-top:120px !important; } }