/* TW Leads blog: the Insights index, the single post, the 404 page and the posts section. Loaded after tw.css and
   built on its tokens (colours, radii, shadows) and base classes (.wrap, .btn, .eyebrow, .sec-head, .crumb, .toc,
   .gbody, .mi). Card grids: one column under 640px, two under 1000px, three above. The careers role page uses the
   hero band from here too. */

.tw-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.bl-main{display:block}
.bl-main :is(a,button,input):focus-visible{outline:3px solid var(--brand);outline-offset:2px}

/* ---------- hero band: the hero's navy inset without the photo ---------- */
.bl-hero{position:relative;margin:14px 16px 0;border-radius:var(--r-xl);background:var(--ink);color:#fff;overflow:hidden;isolation:isolate;padding-block:52px 56px}
.bl-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(680px 380px at 90% 0%,rgba(6,106,171,.6),transparent 65%),radial-gradient(460px 280px at 0% 115%,rgba(143,205,240,.2),transparent 60%)}
.bl-hero::after{content:"";position:absolute;z-index:-1;width:560px;height:560px;right:-220px;bottom:-320px;border-radius:50%;background:repeating-radial-gradient(circle at center,transparent 0 42px,rgba(255,255,255,.07) 42px 43.5px);pointer-events:none}
.bl-hero h1{color:#fff;margin-top:16px;max-width:22ch;overflow-wrap:break-word}
.bl-hero .eyebrow{color:var(--sky)}
.bl-hero .eyebrow+h1{margin-top:12px}
.bl-hero .bl-sub{color:var(--on-navy-soft);font-size:18px;line-height:1.5;max-width:40rem;margin-top:14px}
.bl-hero .crumb a,.bl-hero .crumb span{min-height:24px;display:inline-flex;align-items:center}
.bl-hero .crumb span{color:var(--on-navy-soft)}
@media (max-width:700px){.bl-hero{margin:8px 8px 0;border-radius:24px;padding-block:34px 36px}.bl-hero .bl-sub{font-size:16.5px}}

/* search box: a white pill with the button inside */
.bl-search{display:flex;align-items:center;gap:8px;max-width:560px;margin-top:26px;padding:5px 5px 5px 18px;background:#fff;border-radius:999px;box-shadow:0 24px 44px -26px rgba(0,0,0,.6);transition:box-shadow .2s}
.bl-search:focus-within{box-shadow:0 0 0 4px rgba(143,205,240,.6),0 24px 44px -26px rgba(0,0,0,.6)}
.bl-search>svg{width:20px;height:20px;flex:none;color:var(--muted)}
.bl-search input{flex:1;min-width:0;min-height:44px;padding:8px 4px;border:0;background:transparent;color:var(--ink);font:inherit;font-size:16px}
.bl-search input:focus,.bl-search input:focus-visible{outline:none}
.bl-search input::placeholder{color:var(--muted)}
.bl-search .btn{min-height:46px;padding:10px 22px;font-size:15px}
.bl-search .btn:focus-visible{outline-offset:-4px;outline-color:#fff}
@media (max-width:400px){.bl-search{padding-left:14px}.bl-search>svg{display:none}.bl-search .btn{padding:10px 16px}}

/* ---------- category chips ---------- */
.bl-bar{padding-top:28px}
.bl-chips ul{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.bl-chip{display:inline-flex;align-items:center;min-height:44px;padding:8px 18px;border-radius:999px;border:1.5px solid var(--line);background:var(--paper);color:var(--ink);font-size:15px;font-weight:600;text-decoration:none;white-space:nowrap;transition:border-color .15s,background .15s,color .15s}
.bl-chip:hover{border-color:var(--brand);background:var(--brand-soft)}
.bl-chip[aria-current]{background:var(--ink);border-color:var(--ink);color:#fff}
@media (max-width:639px){
  .bl-chips ul{flex-wrap:nowrap;overflow-x:auto;margin-inline:-20px;padding:2px 20px 6px;scroll-padding-inline:20px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .bl-chips ul::-webkit-scrollbar{display:none}
  .bl-chips li{flex:none}
}

/* ---------- section heads ---------- */
.bl-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 24px;flex-wrap:wrap;margin-bottom:28px}
.bl-head .sec-head{gap:8px}
.bl-head .btn{min-height:46px;padding:10px 20px;font-size:15px}
.bl-head-sub{color:var(--ink-soft);font-size:17px}
.bl-list-h{font-size:clamp(24px,2.6vw,30px);margin-bottom:24px}
.bl-list-h span{color:var(--muted);font-weight:600}

/* ---------- key guides: a row of the plugin's guide pages that scrolls sideways ---------- */
.bl-kg-sec{padding-block:44px 4px}
.bl-kg-nav{display:flex;gap:8px}
.bl-kg-btn{width:46px;height:46px;border-radius:50%;border:1.5px solid var(--line);background:var(--paper);color:var(--ink);display:inline-grid;place-items:center;cursor:pointer;transition:background .15s,color .15s,border-color .15s,opacity .15s}
.bl-kg-btn svg{width:20px;height:20px}
.bl-kg-btn:hover:not(:disabled){background:var(--brand);border-color:var(--brand);color:#fff}
.bl-kg-btn:disabled{opacity:.35;cursor:default}
.bl-kg{display:flex;gap:16px;list-style:none;margin:0 -20px;padding:4px 20px 22px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:20px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.bl-kg::-webkit-scrollbar{display:none}
.bl-kg>li{display:flex;flex:0 0 clamp(236px,calc((100% - 48px) / 4),300px);scroll-snap-align:start}
@media (max-width:999px){.bl-kg>li{flex-basis:clamp(236px,calc((100% - 32px) / 3),300px)}}
@media (max-width:639px){.bl-kg>li{flex-basis:78%}}
.bl-kgc{display:flex;flex-direction:column;gap:10px;width:100%;padding:22px 22px 20px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-soft);color:var(--ink);text-decoration:none;transition:transform .25s,box-shadow .25s,border-color .2s}
.bl-kgc:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover);border-color:var(--brand)}
.bl-kgc .mi{width:46px;height:46px;border-radius:14px;margin-bottom:4px}
.bl-kgc .mi svg{width:22px;height:22px}
.bl-kgc small{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.bl-kgc b{font-size:17.5px;font-weight:800;line-height:1.25;letter-spacing:-.012em}
.bl-kgc .d{font-size:15px;color:var(--ink-soft);line-height:1.45}
.bl-kgc .go{margin-top:auto;padding-top:6px;display:inline-flex;align-items:center;gap:6px;font-size:14.5px;font-weight:700;color:var(--brand)}
.bl-kgc .go svg{width:16px;height:16px;transition:transform .2s}
.bl-kgc:hover .go svg{transform:translateX(3px)}

/* ---------- post grid and cards ---------- */
.bl-list{padding-block:40px 64px}
.bl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
@media (max-width:999px){.bl-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}}
@media (max-width:639px){.bl-grid{grid-template-columns:minmax(0,1fr);gap:18px}}
.bl-card{position:relative;display:flex;flex-direction:column;min-width:0;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-soft);transition:transform .25s,box-shadow .25s}
.bl-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}
.bl-card-img{aspect-ratio:16/10;overflow:hidden;background:var(--tint-2)}
.bl-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.bl-card:hover .bl-card-img img{transform:scale(1.04)}
.bl-card-b{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:18px 20px 20px}
.bl-card-cat{display:inline-flex;padding:4px 10px;border-radius:999px;background:var(--brand-soft);color:var(--brand);font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.bl-card-t{margin:2px 0 0;font-size:19px;font-weight:800;line-height:1.25;letter-spacing:-.015em;overflow-wrap:break-word;max-width:100%}
.bl-card-t a{color:var(--ink);text-decoration:none}
.bl-card-t a::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
.bl-card:hover .bl-card-t a{color:var(--brand)}
.bl-main .bl-card-t a:focus-visible,.bl-card-t a:focus-visible{outline:none}
.bl-card-t a:focus-visible::after{outline:3px solid var(--brand);outline-offset:-3px;border-radius:var(--r-lg)}
.bl-card-x{color:var(--ink-soft);font-size:15.5px;line-height:1.5}
.bl-card-m{margin-top:auto;padding-top:6px;display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:13px;font-weight:600;color:var(--muted)}
.bl-card-m time::before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.6;margin-right:10px;vertical-align:middle}

/* pagination */
.bl-pag{margin-top:40px}
.bl-pag ul{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;list-style:none;margin:0;padding:0}
.bl-pag :is(a,span).page-numbers{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:46px;min-height:46px;padding:8px 14px;border-radius:999px;border:1.5px solid var(--line);background:var(--paper);color:var(--ink);font-size:15px;font-weight:700;text-decoration:none;transition:border-color .15s,color .15s}
.bl-pag a.page-numbers:hover{border-color:var(--brand);color:var(--brand)}
.bl-pag .page-numbers.current{background:var(--ink);border-color:var(--ink);color:#fff}
.bl-pag .page-numbers.dots{border:0;background:none;min-width:24px;padding-inline:2px}
.bl-pag-in{margin-top:24px}
.bl-pag-in p{display:flex;flex-wrap:wrap;gap:8px;align-items:center}

.bl-empty{display:grid;justify-items:center;gap:16px;padding:40px 24px;text-align:center;background:var(--paper);border:1.5px dashed var(--tint-2);border-radius:var(--r-lg);color:var(--ink-soft);font-size:17px}

/* ---------- single post ---------- */
/* the hero text and the article share one measure: the contents column plus 68ch, centred */
.bl-in{max-width:calc(220px + 56px + 68ch);margin-inline:auto;font-size:17px}
.bl-in.no-toc{max-width:68ch}
.bl-hero-post h1{max-width:26ch;font-size:clamp(32px,4.2vw,52px)}
.bl-tag{display:inline-flex;align-items:center;min-height:36px;margin-top:20px;padding:6px 14px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);color:#fff;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;transition:background .15s}
.bl-tag:hover{background:rgba(255,255,255,.22)}
.bl-tag+h1{margin-top:14px}
.bl-meta{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:20px;color:var(--on-navy-soft);font-size:15px;font-weight:600}
.bl-meta>span{display:inline-flex;align-items:center;gap:7px}
.bl-meta svg{width:16px;height:16px;color:var(--sky);flex:none}

.bl-art-sec{padding-block:0 64px}
.bl-prog{position:sticky;top:var(--hdr-h,79px);z-index:6;height:3px;margin-bottom:-3px;pointer-events:none}
.admin-bar .bl-prog{top:calc(var(--hdr-h,79px) + 32px)}
@media (max-width:782px){.admin-bar .bl-prog{top:calc(var(--hdr-h,64px) + 46px)}}
.bl-prog i{display:block;height:100%;background:linear-gradient(90deg,var(--brand),var(--sky));transform:scaleX(0);transform-origin:0 50%}
.bl-art-grid{display:grid;grid-template-columns:220px minmax(0,1fr);gap:56px;align-items:start;padding-top:44px}
.bl-art-grid.no-toc{grid-template-columns:minmax(0,1fr)}
.bl-art{min-width:0}
.bl-toc nav a{overflow-wrap:break-word}
.bl-toc nav a:focus-visible{outline-offset:-2px}
@media (max-width:1080px){
  .bl-in{max-width:68ch}
  .bl-art-grid{grid-template-columns:minmax(0,1fr);gap:22px;padding-top:24px}
  .bl-toc{top:var(--hdr-h,64px)}
  .admin-bar .bl-toc{top:calc(var(--hdr-h,64px) + 32px)}
}
@media (max-width:782px){.admin-bar .bl-toc{top:calc(var(--hdr-h,64px) + 46px)}}

.bl-feat{margin:0 0 32px;border-radius:var(--r-lg);overflow:hidden;background:var(--tint-2);box-shadow:var(--shadow-soft)}
.bl-feat img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}

/* the article body: .gbody from tw.css plus what WordPress content brings */
.bl-body{max-width:none;overflow-wrap:break-word}
.bl-body>:first-child{margin-top:0}
.bl-body h2{margin-top:44px}
.bl-body h4{color:var(--ink);font-size:18px;margin:24px 0 8px}
.bl-body img{height:auto;border-radius:16px}
.bl-body figure{margin:28px 0;max-width:100%}
.bl-body figcaption,.bl-body .wp-element-caption{margin-top:8px;font-size:14px;color:var(--muted);text-align:center}
.bl-body :is(iframe,video,embed,object){max-width:100%}
.bl-body .wp-block-embed__wrapper iframe{width:100%}
.bl-body pre{overflow:auto;padding:16px;border-radius:12px;background:var(--tint-1);font-size:14px;white-space:pre-wrap}
.bl-body code{font-size:.9em;background:var(--tint-1);padding:1px 6px;border-radius:6px}
.bl-body pre code{background:none;padding:0}
.bl-body hr{border:0;border-top:1px solid var(--line);margin:36px 0}
.bl-body .alignleft{float:left;max-width:50%;margin:6px 22px 12px 0}
.bl-body .alignright{float:right;max-width:50%;margin:6px 0 12px 22px}
.bl-body .aligncenter{margin-inline:auto;text-align:center}
.bl-body .alignwide,.bl-body .alignfull{max-width:100%;margin-inline:0}
.bl-body::after{content:"";display:table;clear:both}
.bl-body .wp-block-button__link,.bl-body .wp-element-button{border-radius:999px;font-weight:700;text-decoration:none}
/* tables: tw-site.js wraps each in a scroller and turns wide ones into cards on phones */
.bl-body .wp-block-table{margin:24px 0;overflow:visible}
.bl-body table{width:100%;border-collapse:collapse;font-size:15.5px;background:var(--paper);border:1px solid var(--line);border-radius:16px;overflow:hidden;font-variant-numeric:tabular-nums}
.bl-body :is(th,td){padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);line-height:1.45}
.bl-body thead th{background:var(--tint-1);color:var(--ink);font-weight:700}
.bl-body tbody tr:last-child :is(th,td){border-bottom:0}
.bl-body .tscroll{border-radius:16px}
@media (max-width:639px){.bl-body .alignleft,.bl-body .alignright{float:none;max-width:100%;margin:0 0 16px}}

/* author */
.bl-author{display:flex;align-items:center;gap:16px;margin-top:44px;padding:20px 22px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-soft)}
.bl-av{position:relative;flex:none;width:56px;height:56px;border-radius:50%;overflow:hidden;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-size:18px;font-weight:800}
.bl-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bl-author b{display:block;font-size:16px;font-weight:800}
.bl-author p{margin-top:2px;font-size:14.5px;color:var(--muted);line-height:1.45}

/* related posts on the tinted panel */
.bl-related{margin:0 16px;border-radius:var(--r-xl);background:var(--tint)}
@media (max-width:700px){.bl-related{margin:0 8px;border-radius:24px}}

/* the posts section (home page and elsewhere) */
.bl-posts-sec .bl-head .sec-head{max-width:62ch}

/* ---------- 404 ---------- */
.bl-404-links{padding-block:48px 64px}
.bl-hubs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;list-style:none;margin:0;padding:0}
.bl-hubs>li{display:flex}
@media (max-width:999px){.bl-hubs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:639px){.bl-hubs{grid-template-columns:minmax(0,1fr)}}

@media (prefers-reduced-motion:reduce){.bl-card,.bl-card-img img,.bl-kgc,.bl-kgc .go svg{transition:none!important}.bl-card:hover,.bl-kgc:hover{transform:none}.bl-card:hover .bl-card-img img{transform:none}}
