/* =========================================================================
   base2 Blog — refresh styles
   Drop this in as a linked stylesheet on the blog listing + post templates.
   Header, footer and the Open Sans webfont are already provided by the shared
   site templates, so nothing for those is included here.
   EVERYTHING is scoped under .b2blog so it can't clash with existing site CSS.
   Brand palette: #03343b (dark teal) · #00adbb (teal) · #007388/#008792 (deep)
   ========================================================================= */

.b2blog{font-family:"Open Sans",Arial,sans-serif;color:#28383a;line-height:1.5}
.b2blog *{box-sizing:border-box}
.b2blog a:not(.back-link){text-decoration:none;color:inherit}
.b2blog img{display:block;max-width:100%}
.b2blog h1,.b2blog h2,.b2blog h3,.b2blog h4,.b2blog p{margin:0}

/* ---------- dark hero ---------- */
.b2blog .hero{background:#03343b;position:relative;overflow:hidden}
.b2blog .hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(125,206,204,.10) 1px,transparent 1px);background-size:22px 22px;opacity:.7}
.b2blog .hero::after{content:"";position:absolute;top:-120px;right:-80px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(0,173,187,.35),transparent 65%);filter:blur(10px)}
.b2blog .hero-in{position:relative;z-index:1;max-width:1120px;margin:0 auto;padding:76px 40px 70px}
.b2blog .eyebrow{font-size:.72rem;text-transform:uppercase;letter-spacing:.24em;color:#7ccdcc;font-weight:700;margin-bottom:20px}
.b2blog .hero h1{font-size:clamp(2.2rem,4.2vw,3.4rem);font-weight:800;line-height:1.08;letter-spacing:-.03em;color:#fff;max-width:760px}
.b2blog .hero-sub{margin-top:20px;font-size:1.08rem;line-height:1.6;color:rgba(255,255,255,.62);max-width:560px}
.b2blog .sub-note{margin-top:12px;font-size:.82rem;color:rgba(255,255,255,.45)}

/* inline subscribe — styled static markup */
.b2blog .sub-inline{display:flex;gap:10px;margin-top:34px;max-width:480px}
.b2blog .sub-inline input{flex:1;height:50px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);border-radius:8px;padding:0 16px;color:#fff;font-size:.95rem;font-family:inherit}
.b2blog .sub-inline input::placeholder{color:rgba(255,255,255,.5)}
.b2blog .sub-inline button{height:50px;padding:0 26px;border:0;border-radius:8px;background:#00adbb;color:#fff;font-weight:700;font-size:.95rem;font-family:inherit;cursor:pointer;transition:background .15s}
.b2blog .sub-inline button:hover{background:#008792}

/* If you drop a real HubSpot subscription form into .sub-inline instead of the
   static markup, these overrides restyle its default output to match. */
.b2blog .sub-inline .hs-form{display:flex;gap:10px;width:100%;flex-wrap:nowrap}
.b2blog .sub-inline .hs-form .hs-form-field{flex:1;margin:0}
.b2blog .sub-inline .hs-form .hs-input{width:100%;height:50px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);border-radius:8px;padding:0 16px;color:#fff;font-size:.95rem}
.b2blog .sub-inline .hs-form .hs-input::placeholder{color:rgba(255,255,255,.5)}
.b2blog .sub-inline .hs-form .hs-button{height:50px;padding:0 26px;border:0;border-radius:8px;background:#00adbb;color:#fff;font-weight:700;font-size:.95rem;cursor:pointer}
.b2blog .sub-inline .hs-form .hs-button:hover{background:#008792}
.b2blog .sub-inline .hs-form .hs-error-msgs{display:none}

/* ---------- tag / topic bar ---------- */
.b2blog .tagbar{background:#f4f8f9;border-bottom:1px solid #e4ecec}
.b2blog .tagbar-in{max-width:1120px;margin:0 auto;padding:18px 40px;display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.b2blog .tagbar-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.16em;font-weight:700;color:#8aa0a1;margin-right:6px}
.b2blog .tag{display:inline-flex;align-items:center;gap:6px;padding:7px 15px;border-radius:40px;border:1px solid #d5e0e0;background:#fff;font-size:.82rem;font-weight:600;color:#3d5254;transition:all .15s;cursor:pointer}
.b2blog .tag em{font-style:normal;font-weight:600;color:#9aabac;font-size:.75rem}
.b2blog .tag:hover{border-color:#00adbb;color:#007388}
.b2blog .tag.is-on{background:#03343b;border-color:#03343b;color:#fff}
.b2blog .tag.is-on em{color:rgba(255,255,255,.55)}

/* ---------- branded thumbnail ---------- */
.b2blog .bthumb{position:relative;overflow:hidden;background:linear-gradient(135deg,#03343b 0%,#075863 100%);display:flex;align-items:flex-end;padding:16px}
.b2blog .bthumb::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.055) 1px,transparent 1px);background-size:13px 13px}
.b2blog .bthumb::after{content:"";position:absolute;top:16px;right:16px;width:76px;height:70px;background:
  radial-gradient(circle at 18% 34%, #40C6EC 0 4.5px, transparent 5.5px),
  radial-gradient(circle at 55% 16%, #7DCECC 0 4px, transparent 5px),
  radial-gradient(circle at 84% 44%, #ABD6A3 0 3px, transparent 4px),
  radial-gradient(circle at 42% 62%, #FCEE21 0 3px, transparent 4px),
  radial-gradient(circle at 74% 74%, #D5E277 0 2.5px, transparent 3.5px);opacity:.95}
.b2blog .bthumb-wm{position:relative;z-index:1;font-weight:800;font-size:2.5rem;line-height:.9;letter-spacing:-.03em;color:rgba(255,255,255,.13);text-transform:lowercase}
.b2blog .bthumb-chip{position:absolute;left:16px;top:16px;z-index:2;font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:#c9ecea;background:rgba(0,0,0,.28);padding:5px 10px;border-radius:5px;backdrop-filter:blur(3px)}
.b2blog .bthumb--ai{background:linear-gradient(135deg,#04303a 0%,#0a6d7a 100%)}
.b2blog .bthumb--sec{background:linear-gradient(135deg,#052a30 0%,#0d4f52 100%)}
.b2blog .bthumb--tools{background:linear-gradient(135deg,#0a3f3a 0%,#12766a 100%)}
.b2blog .bthumb--cloud{background:linear-gradient(135deg,#053640 0%,#0a7f96 100%)}
.b2blog .bthumb--devops{background:linear-gradient(135deg,#03343b 0%,#075863 100%)}
/* real featured_image layered over the branded gradient fallback */
.b2blog .bthumb.has-img{background-size:cover;background-position:center;background-repeat:no-repeat}
.b2blog .bthumb.has-img::before{opacity:0}
.b2blog .bthumb.has-img::after{display:none}
.b2blog .bthumb.has-img .bthumb-wm{display:none}

/* ---------- cats + byline ---------- */
.b2blog .cats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:13px}
.b2blog .cats a{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#00909b}
.b2blog .byline{display:flex;align-items:center;gap:10px;margin-top:18px;font-size:.82rem;color:#6a7c7d}
.b2blog .avatar{width:32px;height:32px;border-radius:50%;background:#03343b;color:#fff;display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:700;letter-spacing:.02em;flex:none;object-fit:cover}
.b2blog .byline .nm{font-weight:600;color:#3d5254}
.b2blog .byline .sep{color:#c2cfcf}

/* ---------- listing: featured + rows ---------- */
.b2blog .wrapA{max-width:1000px;margin:0 auto;padding:56px 40px 70px}
.b2blog .feat{display:grid;grid-template-columns:1.05fr 1fr;gap:36px;align-items:center;padding-bottom:44px;margin-bottom:8px;border-bottom:1px solid #ebf0f0}
.b2blog .feat-flag{grid-column:1/-1;display:flex;align-items:center;gap:12px;margin-bottom:4px}
.b2blog .feat-flag span{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.18em;color:#00909b}
.b2blog .feat-flag i{flex:1;height:1px;background:#e4ecec}
.b2blog .feat-thumb{border-radius:14px;aspect-ratio:16/11;min-height:0}
.b2blog .feat-thumb .bthumb-wm{font-size:3.4rem}
.b2blog .feat h2{font-size:2rem;font-weight:800;line-height:1.14;letter-spacing:-.02em;color:#0d2a2e}
.b2blog .feat h2 a{transition:color .15s}
.b2blog .feat:hover h2 a{color:#007388}
.b2blog .feat .excerpt{margin-top:16px;font-size:1rem;line-height:1.62;color:#54686a}
.b2blog .listA{display:flex;flex-direction:column}
.b2blog .rowA{display:grid;grid-template-columns:300px 1fr;gap:32px;padding:34px 0;border-bottom:1px solid #ebf0f0}
.b2blog .rowA:last-child{border-bottom:0}
.b2blog .rowA-thumb{border-radius:12px;aspect-ratio:16/10}
.b2blog .rowA h3{font-size:1.4rem;font-weight:700;line-height:1.2;letter-spacing:-.015em;color:#12292c;transition:color .15s}
.b2blog .rowA:hover h3{color:#007388}
.b2blog .rowA .excerpt{margin-top:12px;font-size:.95rem;line-height:1.6;color:#5a6d6f}
.b2blog .loadmore{display:flex;justify-content:center;margin-top:48px}
.b2blog .loadmore a{padding:15px 40px;border-radius:8px;border:1px solid #03343b;color:#03343b;font-weight:700;font-size:.9rem;transition:all .15s}
.b2blog .loadmore a:hover{background:#03343b;color:#fff}

/* ---------- post ---------- */
.b2blog .art-hero{background:#03343b;position:relative;overflow:hidden}
.b2blog .art-hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(125,206,204,.09) 1px,transparent 1px);background-size:22px 22px}
.b2blog .art-hero-in{position:relative;z-index:1;max-width:1080px;margin:0 auto;padding:60px 40px 56px}
.b2blog .art-hero a.back-link{display:inline-flex;align-items:center;gap:10px;margin-bottom:24px;font-size:.88rem;font-weight:600;color:#c9ecea;text-decoration:none;transition:color .15s}
.b2blog .art-hero a.back-link:hover{color:#fff}
.b2blog .art-hero a.back-link .back-arrow{width:8px;height:8px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);flex:none;margin-right:-2px}
.b2blog .art-cats{display:flex;gap:10px;margin-bottom:18px;flex-wrap:wrap}
.b2blog .art-cats a{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:#8fd6d3;background:rgba(0,173,187,.16);padding:5px 11px;border-radius:5px}
.b2blog .art-hero h1{font-size:clamp(1.9rem,3.4vw,2.7rem);font-weight:800;line-height:1.14;letter-spacing:-.02em;color:#fff;max-width:820px}
.b2blog .art-byline{display:flex;align-items:center;gap:12px;margin-top:26px;color:rgba(255,255,255,.7);font-size:.88rem}
.b2blog .art-byline .avatar{width:42px;height:42px;background:#00adbb;font-size:.82rem}
.b2blog .art-byline .nm{color:#fff;font-weight:700}
.b2blog .art-byline .sep{color:rgba(255,255,255,.3)}
.b2blog .art-cover{max-width:1000px;margin:-40px auto 0;padding:0 40px;position:relative;z-index:2}
.b2blog .art-cover .bthumb{border-radius:16px;aspect-ratio:21/8;box-shadow:0 24px 50px -18px rgba(3,52,59,.5)}
.b2blog .art-cover .bthumb-wm{font-size:4rem}
.b2blog .art-wrapB{max-width:1080px;margin:0 auto;padding:52px 40px 20px;display:grid;grid-template-columns:64px 1fr 260px;gap:40px}
.b2blog .share{display:flex;flex-direction:column;gap:12px;position:sticky;top:20px;align-self:start}
.b2blog .share span{font-size:.6rem;text-transform:uppercase;letter-spacing:.12em;color:#9aabac;font-weight:700;margin-bottom:2px}
.b2blog .share a{width:44px;height:44px;border-radius:10px;border:1px solid #e4ecec;display:flex;align-items:center;justify-content:center;color:#4a5f61;font-weight:700;font-size:.8rem;transition:all .15s}
.b2blog .share a:hover{border-color:#00adbb;color:#00adbb}

/* rich-text article body (renders {{ content.post_body }}) */
.b2blog .art-body{min-width:0;max-width:660px}
.b2blog .art-body p{font-size:1.06rem;line-height:1.75;color:#37484a;margin-bottom:1.4rem}
.b2blog .art-body p:first-of-type{font-size:1.22rem;color:#1c3336;line-height:1.6}
.b2blog .art-body h2{font-size:1.45rem;font-weight:800;color:#0d2a2e;margin:2.2rem 0 .9rem;letter-spacing:-.015em}
.b2blog .art-body h3{font-size:1.2rem;font-weight:700;color:#12292c;margin:1.8rem 0 .7rem}
.b2blog .art-body ul,.b2blog .art-body ol{margin:0 0 1.4rem;padding-left:1.2rem;color:#37484a;font-size:1.05rem;line-height:1.7}
.b2blog .art-body li{margin-bottom:.5rem}
.b2blog .art-body img{border-radius:12px;margin:1.6rem 0}
.b2blog .art-body a{color:#007388;text-decoration:underline;text-underline-offset:2px}
.b2blog .art-body blockquote{border-left:3px solid #00adbb;padding:6px 0 6px 26px;margin:2.2rem 0;font-size:1.4rem;line-height:1.4;font-weight:700;letter-spacing:-.01em;color:#0d2a2e}
.b2blog .art-body blockquote p{font-size:inherit;color:inherit;margin:0}

.b2blog .tocB{position:sticky;top:20px;align-self:start;display:flex;flex-direction:column;gap:24px}
.b2blog .scard{border:1px solid #e4ecec;border-radius:14px;padding:22px}
.b2blog .scard h4{font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;color:#8aa0a1;font-weight:700;margin-bottom:14px}
.b2blog .authbox{display:flex;gap:14px;align-items:center}
.b2blog .authbox .avatar{width:52px;height:52px;font-size:.95rem}
.b2blog .authbox .nm{font-weight:700;color:#1c3336;font-size:.95rem}
.b2blog .authbox .rl{font-size:.8rem;color:#7c8e8f}

/* related */
.b2blog .related{background:#f4f8f9;border-top:1px solid #e4ecec;margin-top:40px}
.b2blog .related-in{max-width:1000px;margin:0 auto;padding:52px 40px 60px}
.b2blog .related h3{font-size:.72rem;text-transform:uppercase;letter-spacing:.16em;color:#8aa0a1;font-weight:700;margin-bottom:24px}
.b2blog .related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.b2blog .rcard .bthumb{border-radius:12px;aspect-ratio:16/10;margin-bottom:16px}
.b2blog .rcard .bthumb-wm{font-size:1.7rem}
.b2blog .rcard .c{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#00909b}
.b2blog .rcard h4{font-size:1.05rem;font-weight:700;line-height:1.28;color:#12292c;margin-top:8px;transition:color .15s}
.b2blog .rcard:hover h4{color:#007388}

/* ---------- responsive ---------- */
@media (max-width:780px){
  .b2blog .hero-in{padding:46px 22px 42px}
  .b2blog .hero h1{font-size:1.95rem;letter-spacing:-.02em}
  .b2blog .hero-sub{font-size:1rem;margin-top:16px}
  .b2blog .sub-inline{flex-direction:column;max-width:none;margin-top:26px}
  .b2blog .sub-inline button{padding:0}
  .b2blog .sub-inline .hs-form{flex-direction:column}
  .b2blog .tagbar-in{padding:14px 22px;gap:8px}
  .b2blog .wrapA{padding:32px 22px 44px}
  .b2blog .feat{grid-template-columns:1fr;gap:20px;padding-bottom:32px}
  .b2blog .feat-thumb{aspect-ratio:16/10}
  .b2blog .feat h2{font-size:1.45rem}
  .b2blog .rowA{grid-template-columns:1fr;gap:16px;padding:26px 0}
  .b2blog .rowA-thumb{aspect-ratio:16/9}
  .b2blog .rowA h3{font-size:1.22rem}
  .b2blog .art-hero-in{padding:40px 22px 40px}
  .b2blog .art-hero h1{font-size:1.6rem}
  .b2blog .art-cover{padding:0 22px}
  .b2blog .art-cover .bthumb{aspect-ratio:16/10}
  .b2blog .art-wrapB{grid-template-columns:1fr;gap:26px;padding:32px 22px 6px}
  .b2blog .share{flex-direction:row;position:static;gap:10px}
  .b2blog .share span{display:none}
  .b2blog .art-body{max-width:none}
  .b2blog .related-in{padding:34px 22px 44px}
  .b2blog .related-grid{grid-template-columns:1fr;gap:20px}
}