.pb{--ink:#171717;--txt:#5C5C5C;--mute:#6B6B6B;--or:#EB600E;--or-t:#C94E09;--or-d:#B94808;--or-h:#F27A33;--tint:#FFF3EA;--soft:#F6F6F5;--line:#ECECEC;
  background:#fff;color:var(--txt);font-family:"Instrument Sans",-apple-system,"Segoe UI",Arial,sans-serif;font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
.pb *,.pb *::before,.pb *::after{box-sizing:border-box;margin:0;padding:0}
.pb a{color:inherit;text-decoration:none}
.pb a:visited{color:inherit}
.pb img{display:block;max-width:100%}
.pb svg{display:block}
.pb button,.pb input{font:inherit;color:inherit}
.pb button{background:none;border:0;cursor:pointer}
.pb .wrap{max-width:1320px;margin:0 auto;padding:0 clamp(20px,4vw,40px)}
.pb h1,.pb h2,.pb h3{font-family:"Instrument Sans",-apple-system,"Segoe UI",Arial,sans-serif;color:var(--ink);letter-spacing:-.04em}
.pb em{font-style:normal;color:var(--or)}
.pb .eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:"JetBrains Mono",monospace;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--or-t)}
.pb .eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--or);box-shadow:0 0 0 5px rgba(235,96,14,.14)}
.pb :focus-visible{outline:2px solid var(--or);outline-offset:3px;border-radius:8px}

/* ================= HERO: title, search, categories ================= */
.pb .hero{position:relative;padding:clamp(40px,6vw,76px) 0 clamp(28px,4vw,44px);text-align:center}
.pb .hero::before{content:"";position:absolute;left:50%;top:-40%;width:70%;aspect-ratio:1.6;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(235,96,14,.09),rgba(235,96,14,0));pointer-events:none}
.pb .hero .wrap{position:relative}
.pb .hero h1{margin-top:16px;font-size:clamp(2.1rem,4.2vw,3.2rem);font-weight:700;line-height:1.05}
.pb .hero .lead{margin:14px auto 0;max-width:52ch;font-size:1.02rem}
.pb .search{position:relative;max-width:560px;margin:26px auto 0}
.pb .search svg{position:absolute;left:18px;top:50%;width:18px;height:18px;transform:translateY(-50%);fill:none;stroke:var(--mute);stroke-width:2;stroke-linecap:round}
.pb .search input{width:100%;height:56px;border:0;outline:0;border-radius:16px;background:#fff;padding:0 110px 0 48px;font-size:1rem;color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--line),0 18px 40px -30px rgba(0,0,0,.35);transition:box-shadow .2s}
.pb .search input:focus{box-shadow:inset 0 0 0 1.5px var(--or),0 0 0 4px rgba(235,96,14,.12)}
.pb .search input::placeholder{color:#8A8A8A}
.pb .search .count{position:absolute;right:16px;top:50%;transform:translateY(-50%);font-family:"JetBrains Mono",monospace;font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.pb .chips{margin-top:18px;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.pb .chip{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 14px;border-radius:30px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);font-size:.9rem;font-weight:600;color:var(--ink);
  transition:background .2s,color .2s,box-shadow .2s,transform .2s}
.pb .chip:hover{box-shadow:inset 0 0 0 1px rgba(235,96,14,.5);transform:translateY(-1px)}
.pb .chip b{font-size:.72rem;font-weight:600;color:var(--mute);background:var(--soft);border-radius:20px;padding:2px 7px;transition:background .2s,color .2s}
.pb .chip[aria-pressed="true"]{background:var(--or);color:#fff;box-shadow:none}
.pb .chip[aria-pressed="true"] b{background:rgba(255,255,255,.22);color:#fff}

/* shared card bits */
.pb .img{position:relative;overflow:hidden;background:linear-gradient(135deg,#FFF3EA,#F6F6F5)}
.pb .img img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.pb a:hover .img img{transform:scale(1.05)}
.pb .img .ph{position:absolute;inset:0;display:grid;place-items:center}
.pb .img .ph svg{width:22%;max-width:64px;height:auto;fill:rgba(235,96,14,.35)}
.pb .cat{align-self:flex-start;font-family:"JetBrains Mono",monospace;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--or-d);background:var(--tint);border-radius:20px;padding:4px 10px}
.pb .meta{margin-top:auto;padding-top:14px;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.82rem;color:var(--mute)}
.pb .go{display:inline-flex;align-items:center;gap:7px;font-weight:600;color:var(--ink);white-space:nowrap}
.pb .go::after{content:"";width:6px;height:6px;border-top:1.7px solid currentColor;border-right:1.7px solid currentColor;transform:rotate(45deg);transition:transform .2s}
.pb a:hover .go{color:var(--or-d)}
.pb a:hover .go::after{transform:translateX(3px) rotate(45deg)}

/* ================= ALL ARTICLES GRID ================= */
.pb .all{padding:clamp(36px,5vw,56px) 0 clamp(56px,7vw,88px);box-shadow:inset 0 1px 0 #F1F1F1}
.pb .atop{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.pb .atop h2{margin-top:12px;font-size:clamp(1.6rem,2.8vw,2.1rem);font-weight:700;line-height:1.1}
.pb .atop .shown{font-size:.9rem;color:var(--mute)}
.pb .grid{margin-top:clamp(24px,3vw,34px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.pb .card{display:flex;flex-direction:column;border-radius:18px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);overflow:hidden;transition:transform .3s,box-shadow .3s;
  animation:pb-in .55s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 45ms)}
.pb .card:hover{transform:translateY(-5px);box-shadow:inset 0 0 0 1px rgba(235,96,14,.35),0 26px 44px -32px rgba(0,0,0,.35)}
@keyframes pb-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.pb .card .img{aspect-ratio:16/9}
.pb .card .body{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1}
.pb .card h3{margin-top:10px;font-size:1.02rem;font-weight:600;line-height:1.35;letter-spacing:-.015em;transition:color .2s}
.pb .card:hover h3{color:var(--or-d)}
/* the promo card inside the grid */
.pb .btn{display:inline-flex;align-items:center;gap:9px;height:46px;padding:0 20px;border-radius:12px;background:var(--or);color:#fff!important;font-weight:600;font-size:.95rem;
  box-shadow:0 14px 28px -18px rgba(235,96,14,.8);transition:background .18s,transform .18s}
.pb .btn:hover{background:var(--or-h);transform:translateY(-2px)}
.pb .btn svg{width:15px;height:15px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pb .empty{grid-column:1 / -1;text-align:center;padding:40px 20px;border-radius:18px;background:var(--soft)}
.pb .empty b{display:block;font-size:1.1rem;color:var(--ink)}
.pb .empty button{margin-top:12px;font-weight:600;color:var(--or-d);text-decoration:underline}
@media (max-width:980px){.pb .grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.pb .grid{grid-template-columns:minmax(0,1fr)}}



/* ======================= MINIMAL REBUILD ======================= */
.pb{--line:#EEEEEE;--soft:#FAFAFA}
.pb .eyebrow{font-size:.66rem;letter-spacing:.16em;color:var(--mute)}
.pb .eyebrow::before{width:6px;height:6px;box-shadow:none}
.pb .shead h2,.pb .atop h2{font-weight:700}
/* hero: quieter */
.pb .hero{padding:clamp(44px,6vw,84px) 0 clamp(24px,3vw,36px)}
.pb .hero::before{display:none}
.pb .hero h1{font-size:clamp(2rem,3.8vw,2.9rem);letter-spacing:-.045em}
.pb .hero .lead{color:var(--mute)}
.pb .search input{box-shadow:inset 0 0 0 1px var(--line);height:54px}
.pb .chip{background:none;box-shadow:inset 0 0 0 1px var(--line);font-weight:500;color:var(--txt)}
.pb .chip b{background:none;color:#9A9A9A;padding:0 0 0 2px}
.pb .chip:hover{color:var(--ink);box-shadow:inset 0 0 0 1px #D8D8D8;transform:none}
.pb .chip[aria-pressed="true"]{background:var(--ink);color:#fff;box-shadow:none;font-weight:600}
.pb .chip[aria-pressed="true"] b{color:rgba(255,255,255,.6)}
/* search suggestions */
.pb .sugg{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:20;background:#fff;border-radius:14px;padding:6px;text-align:left;
  box-shadow:0 0 0 1px var(--line),0 24px 50px -30px rgba(0,0,0,.4);display:none}
.pb .sugg.on{display:block}
.pb .sugg a{display:block;padding:10px 12px;border-radius:10px;font-size:.92rem;color:var(--ink);line-height:1.35}
.pb .sugg a:hover,.pb .sugg a:focus{background:var(--soft);color:var(--or-d)}
.pb .sugg .sc{display:block;font-family:"JetBrains Mono",monospace;font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-bottom:2px}
/* cards: flat, hairline only */
.pb .cat{background:none;color:var(--mute);padding:0;font-size:.58rem}
.pb .card h3{font-size:1rem}
.pb .card .ex{margin-top:7px;font-size:.9rem;line-height:1.5;color:var(--txt);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pb .meta{font-size:.78rem;border-top:1px solid #F4F4F4;margin-top:14px;padding-top:12px}
.pb .img{background:var(--soft)}
/* promo card: minimal */

/* ================= BOTTOM CTA ================= */
.pb .cta{padding:clamp(20px,3vw,32px) 0 clamp(70px,9vw,110px)}
.pb .cta .box{display:grid;grid-template-columns:minmax(0,1.25fr) auto;gap:clamp(22px,4vw,48px);align-items:center;
  border-radius:22px;padding:clamp(26px,4vw,44px);background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.pb .cta h2{margin-top:10px;font-size:clamp(1.5rem,2.6vw,2rem);font-weight:700;line-height:1.15;max-width:24ch}
.pb .cta p{margin-top:10px;font-size:.98rem;color:var(--mute);max-width:52ch}
.pb .ticks{list-style:none;margin-top:16px;display:flex;flex-wrap:wrap;gap:8px 20px}
.pb .ticks li{display:flex;align-items:center;gap:8px;font-size:.9rem;color:var(--ink)}
.pb .ticks li::before{content:"";width:16px;height:16px;border-radius:50%;background:var(--tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EB600E' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17.5 19 7'/%3E%3C/svg%3E") center/10px no-repeat}
.pb .cta .acts{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
@media (max-width:820px){.pb .cta .box{grid-template-columns:minmax(0,1fr)}}

/* ================= STICKY CALL BAR ================= */
.pb .sbar{position:fixed;left:0;right:0;bottom:0;z-index:60;padding:0 clamp(12px,3vw,24px) clamp(12px,3vw,20px);pointer-events:none;
  transform:translateY(140%);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.pb .sbar.on{transform:none}
.pb.bar-on .cta{padding-bottom:calc(clamp(70px,9vw,110px) + 90px)}
.pb .sin{pointer-events:auto;max-width:1320px;margin:0 auto;display:flex;align-items:center;gap:16px;padding:12px 12px 12px 20px;border-radius:16px;
  background:rgba(255,255,255,.92);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);
  box-shadow:0 0 0 1px var(--line),0 24px 50px -26px rgba(0,0,0,.45)}
.pb .stx{flex:1;min-width:0}
.pb .stx b{display:block;font-size:.98rem;color:var(--ink);letter-spacing:-.02em}
.pb .stx small{display:block;font-size:.82rem;color:var(--mute)}
.pb .sbar .btn{height:44px;font-size:.92rem}
.pb .sx{width:34px;height:34px;border-radius:50%;flex:none;font-size:1.1rem;line-height:1;color:var(--mute);transition:background .2s,color .2s}
.pb .sx:hover{background:var(--soft);color:var(--ink)}
@media (max-width:640px){.pb .sin{padding:10px 10px 10px 14px;gap:10px}.pb .stx small{display:none}.pb .stx b{font-size:.88rem}.pb .sbar .btn{padding:0 14px;font-size:.86rem}}
@media (prefers-reduced-motion:reduce){.pb .sbar{transition:none}}


/* ================= TOPIC SLIDER ================= */
.pb .slid{padding:clamp(6px,1.5vw,14px) 0 clamp(40px,5vw,60px)}
.pb .stop{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:clamp(18px,2.4vw,26px)}
.pb .stop h2{margin-top:10px;font-size:clamp(1.5rem,2.6vw,2rem);font-weight:700;line-height:1.1}
.pb .snav{display:flex;gap:8px}
.pb .sarr{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--line);transition:background .2s,box-shadow .2s,transform .2s,opacity .2s}
.pb .sarr svg{width:17px;height:17px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s}
.pb .sarr:hover{background:var(--ink);box-shadow:none}
.pb .sarr:hover svg{stroke:#fff}
.pb .sarr[disabled]{opacity:.35;pointer-events:none}
.pb .strack{overflow:hidden;cursor:grab;-webkit-mask-image:linear-gradient(90deg,#000 96%,transparent);mask-image:linear-gradient(90deg,#000 96%,transparent)}
.pb .strack:active{cursor:grabbing}
.pb .strack img,.pb .strack a{-webkit-user-drag:none;user-drag:none}
.pb .strack:focus-visible{outline:2px solid var(--or);outline-offset:4px;border-radius:18px}
.pb .slane{display:flex;gap:18px;user-select:none;-webkit-user-select:none;will-change:transform;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.pb .slane.drag{transition:none}
.pb .slide{flex:0 0 calc((100% - 36px) / 3);display:flex;flex-direction:column;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);overflow:hidden;
  transition:box-shadow .25s,transform .25s}
.pb .slide:hover{box-shadow:inset 0 0 0 1px #DCDCDC;transform:translateY(-3px)}
.pb .slide .img{aspect-ratio:16/9}
.pb .slide .body{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1}
.pb .slide h3{margin-top:9px;font-size:1rem;font-weight:600;line-height:1.35;letter-spacing:-.015em;transition:color .2s}
.pb .slide:hover h3{color:var(--or-d)}
.pb .slide .ex{margin-top:7px;font-size:.88rem;line-height:1.5;color:var(--txt);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pb .sbar2{margin-top:20px;height:3px;border-radius:3px;background:#F0F0F0;overflow:hidden}
.pb .sbar2 i{display:block;height:100%;width:33%;border-radius:3px;background:var(--ink);transition:width .5s cubic-bezier(.2,.8,.2,1),margin-left .5s cubic-bezier(.2,.8,.2,1)}
@media (max-width:900px){.pb .slide{flex:0 0 calc((100% - 18px) / 2)}}
@media (max-width:600px){.pb .slide{flex:0 0 86%}.pb .snav{display:none}}

/* ================= PAGINATION ================= */
.pb .grid.turn{animation:pb-turn .45s cubic-bezier(.2,.8,.2,1)}
@keyframes pb-turn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.pb .pager{margin-top:34px;display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap}
.pb .pager button{min-width:42px;height:42px;padding:0 12px;border-radius:12px;font-size:.95rem;font-weight:600;color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--line);transition:background .2s,color .2s,box-shadow .2s,transform .2s}
.pb .pager button:hover{box-shadow:inset 0 0 0 1px #D0D0D0;transform:translateY(-1px)}
.pb .pager button[aria-current="true"]{background:var(--ink);color:#fff;box-shadow:none}
.pb .pager button[disabled]{opacity:.35;pointer-events:none}
.pb .pager .gap{min-width:24px;text-align:center;color:var(--mute);font-size:.95rem}
.pb .pager .nav svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pb .pager .nav{display:inline-flex;align-items:center;gap:8px}
.pb .pcount{margin-top:12px;text-align:center;font-size:.84rem;color:var(--mute)}
@media (max-width:520px){.pb .pager button{min-width:38px;height:38px;padding:0 9px;font-size:.9rem}.pb .pager .nav span{display:none}}
@media (prefers-reduced-motion:reduce){.pb .slane{transition:none}.pb .grid.turn{animation:none}}

@media (prefers-reduced-motion:reduce){.pb *{animation:none!important;transition:none!important}}

/* wider container, but text stays readable */
.pb .wrap p:not([class]),.pb .lead,.pb .lead2{max-width:64ch}


/* ===================== WordPress + brief adaptations (not in the design file) ===================== */
.pb .vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* theme resets that would otherwise bleed in */
.pb h1,.pb h2,.pb h3{text-transform:none;margin:0}
.pb img{height:auto}
.pb .img img{height:100%}
.pb ul{padding:0}

/* contrast, measured to WCAG AA 4.5:1: chip counts (#9A9A9A was 2.8:1), placeholder (#8A8A8A was 3.5:1),
   white button text (on #EB600E it is 3.4:1; on #C94E09 it is 4.6:1, hover #B94808 5.3:1) */
.pb .chip b{color:#6B6B6B}
.pb .search input::placeholder{color:#6B6B6B}
.pb .btn{background:#C94E09}
.pb .btn:hover{background:#B94808}
.pb .lnk{font-weight:600;color:var(--ink);box-shadow:inset 0 -1.5px 0 var(--or);padding:5px 0}
.pb .lnk:hover{color:var(--or-d)}

/* topic pills are tabs (role="tab"), so the selected state follows aria-selected */
.pb .chip[aria-selected="true"]{background:var(--ink);color:#fff;box-shadow:none;font-weight:600}
.pb .chip[aria-selected="true"] b{color:rgba(255,255,255,.72)}

/* search: clear button sits where the article count was */
.pb .search .clr{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;font-size:1.25rem;line-height:1;color:var(--mute)}
.pb .search .clr:hover{background:var(--soft);color:var(--ink)}
.pb .search input{padding-right:118px}
.pb .search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}

/* cards and slides: one link each; hover is a 200ms lift, the soft shadow fades in on a pseudo-element
   (opacity only, box-shadow itself is never animated). The image carries the rounded top corners so the
   shadow is not clipped. */
.pb .card,.pb .slide{position:relative;overflow:visible;animation:none;transition:transform .2s cubic-bezier(.16,1,.3,1)}
.pb .card .img{border-radius:18px 18px 0 0}
.pb .slide .img{border-radius:16px 16px 0 0}
.pb .card::after,.pb .slide::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:0 26px 44px -30px rgba(0,0,0,.32);opacity:0;transition:opacity .2s cubic-bezier(.16,1,.3,1)}
.pb .card:hover,.pb .slide:hover{box-shadow:inset 0 0 0 1px rgba(235,96,14,.35)}
.pb .card:hover{transform:translateY(-4px)}
.pb .slide:hover{transform:translateY(-3px)}
.pb .card:hover::after,.pb .slide:hover::after{opacity:1}
.pb .card:focus-visible,.pb .slide:focus-visible{outline:2px solid var(--or);outline-offset:3px}
.pb .card h3,.pb .slide h3{color:var(--ink)}
.pb .card:hover h3,.pb .slide:hover h3,.pb a.card:visited:hover h3{color:var(--or-d)}
.pb .img img{transition:transform .6s cubic-bezier(.16,1,.3,1)}
.pb .meta time{font:inherit}
.pb .grid.turn{animation:none}
.pb .grid{align-items:stretch}

/* slider: GPU transform only, will-change only while dragging */
.pb .slane{will-change:auto;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.pb .slane.drag{transition:none;will-change:transform}
.pb .strack{touch-action:pan-y}
.pb .slide{user-select:none;-webkit-user-drag:none}
.pb .slide img{-webkit-user-drag:none;pointer-events:none}
.pb .sbar2 i{width:100%;margin-left:0;transform-origin:0 50%;transition:transform .5s cubic-bezier(.16,1,.3,1)}

/* pagination: the server renders real links, filtered views render buttons; both share one look */
.pb .pager a,.pb .pager span.nav{min-width:42px;height:42px;padding:0 12px;border-radius:12px;font-size:.95rem;font-weight:600;color:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;box-shadow:inset 0 0 0 1px var(--line);transition:background .2s,color .2s,transform .2s}
.pb .pager a:hover{box-shadow:inset 0 0 0 1px #D0D0D0;transform:translateY(-1px)}
.pb .pager a[aria-current="page"],.pb .pager button[aria-current="page"]{background:var(--ink);color:#fff;box-shadow:none}
.pb .pager span.nav.dis{opacity:.35}
.pb .pager a svg,.pb .pager span.nav svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:520px){.pb .pager a,.pb .pager span.nav{min-width:38px;height:38px;padding:0 9px;font-size:.9rem}.pb .pager .nav span{display:none}}

/* sticky bar: blurred panel fades in; no bottom padding toggle (that would move the footer) */
.pb .sbar{transition:transform .45s cubic-bezier(.16,1,.3,1)}
.pb .sbar .sin{opacity:0;transition:opacity .4s cubic-bezier(.16,1,.3,1)}
.pb .sbar.on .sin{opacity:1}
.pb.bar-on .cta{padding-bottom:clamp(70px,9vw,110px)}

/* topic archives: breadcrumbs and the intro copy */
.pb .crumbs{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin-bottom:18px;font-size:.84rem;color:var(--mute)}
.pb .crumbs a{color:var(--ink);font-weight:500}
.pb .crumbs a:hover{color:var(--or-d)}
.pb .intro{max-width:720px;margin:30px auto 0;text-align:left;font-size:1rem;line-height:1.75;color:var(--txt)}
.pb .intro p+p{margin-top:14px}
.pb .intro a{color:var(--ink);font-weight:600;box-shadow:inset 0 -1.5px 0 var(--or)}
.pb .intro a:hover{color:var(--or-d)}
.pb .hero.topic .chips{margin-top:22px}

/* CLS: until Instrument Sans arrives the browser used Segoe UI, which is wider, so the hero lead wrapped to an
   extra line and everything below jumped 26px on swap. This fallback is Arial/Liberation resized per weight to
   Instrument Sans' measured width (400: 98.1%, 500: 96.7%, 600: 102.9%, 700: 101.4% of Arial), so the swap
   no longer re-wraps text. The final rendering is unchanged: Instrument Sans still wins once loaded. */
@font-face{font-family:"Instrument Sans Fallback";src:local("Arial"),local("ArialMT"),local("Liberation Sans"),local("Helvetica");font-weight:400;size-adjust:102%}
@font-face{font-family:"Instrument Sans Fallback";src:local("Arial"),local("ArialMT"),local("Liberation Sans"),local("Helvetica");font-weight:500;size-adjust:103.4%}
@font-face{font-family:"Instrument Sans Fallback";src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("Helvetica Bold");font-weight:600;size-adjust:97.2%}
@font-face{font-family:"Instrument Sans Fallback";src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("Helvetica Bold");font-weight:700;size-adjust:98.6%}
.pb,.pb h1,.pb h2,.pb h3{font-family:"Instrument Sans","Instrument Sans Fallback",-apple-system,"Segoe UI",Arial,sans-serif}
/* The hero lead was max-width:52ch. ch is the width of "0", which differs a lot between fonts (9.3px fallback vs 10.9px
   Instrument Sans), so the box itself changed width on swap. 34.63em is the same 565px in Instrument Sans, in any font. */
.pb .hero .lead{max-width:34.63em}

/* CLS: header template 971's own CSS arrives late on these pages, so its logo row grew from 36px to 52px after
   first paint. These are the values that stylesheet applies anyway (measured at 1350, 1024 and 390px). */
@media (min-width:1025px){.elementor-971 .elementor-element-e525e3f{padding-top:8px;padding-bottom:8px}}
@media (max-width:1024px){.elementor-971 .elementor-element-e525e3f{padding-top:14px;padding-bottom:14px}}
@media (max-width:767px){.elementor-971 .elementor-element-fa77a45 > .e-con-inner{padding-top:10px;padding-bottom:10px}}

@media (prefers-reduced-motion:reduce){.pb .card,.pb .slide,.pb .card::after,.pb .slide::after,.pb .sbar,.pb .sbar .sin,.pb .sbar2 i,.pb .slane{transition:none!important}}

/* The "Start with these" slider runs edge to edge; its heading, arrows and progress bar stay in the container.
   The track reaches out to the section's edges (cqw = the section's width, so no scrollbar maths) and pads itself back
   in by the same amount, so the first slide still starts on the container's left edge. */
.pb .slid{container-type:inline-size}
.pb .strack{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}
@supports (width:1cqw){.pb .strack{margin-left:calc(50% - 50cqw);margin-right:calc(50% - 50cqw);padding-left:calc(50cqw - 50%);padding-right:calc(50cqw - 50%)}}