/* ImpulseShield — Resources hub + article styles.
   Chrome (nav, switcher, footer, tokens, buttons, badge) lives in site.css,
   which every Resources page links first. This file owns only what's unique to
   the hub and the article reading experience. */

/* ============================== hub hero ============================== */
.hub-hero{position:relative;text-align:center;padding:clamp(30px,6vw,64px) 0 clamp(24px,4vw,40px);overflow:hidden}
.hub-hero::before{content:"";position:absolute;inset:-140px 0 auto;height:520px;z-index:-1;
  background:radial-gradient(760px 340px at 72% 4%,rgba(21,168,107,.16),transparent 60%),
             radial-gradient(640px 360px at 16% 0%,rgba(14,124,123,.14),transparent 62%)}
.hub-hero .badge{margin-bottom:18px}
.hub-hero h1{font-size:clamp(32px,6vw,54px);line-height:1.05;letter-spacing:-.03em;
  margin:0 auto 16px;max-width:16ch}
.hub-hero .lead{max-width:600px;margin:0 auto 26px}

/* hub stat row */
.hub-stats{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(20px,5vw,48px);
  margin:26px auto 0;padding:0}
.hub-stats li{display:flex;flex-direction:column;align-items:center;gap:2px}
.hub-stats b{font-size:clamp(22px,3vw,30px);font-weight:800;letter-spacing:-.02em;color:var(--brand-deep);
  font-variant-numeric:tabular-nums}
.hub-stats span{font-size:12.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;
  color:var(--ink-faint)}

/* ---------- hub search (guide-scoped, in the hero) ---------- */
.rsearch{position:relative;max-width:560px;margin:0 auto}
.rsearch-ic{position:absolute;left:16px;top:26px;transform:translateY(-50%);width:20px;height:20px;
  color:var(--ink-soft);pointer-events:none}
.rsearch input{width:100%;border:1px solid var(--line);border-radius:14px;padding:15px 18px 15px 46px;
  font-size:16px;font-family:inherit;color:var(--ink);background:#fff;box-shadow:var(--shadow-soft);
  transition:border-color .15s ease,box-shadow .15s ease}
.rsearch input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(14,124,123,.14)}
.rsearch-results{position:absolute;left:0;right:0;top:calc(100% + 10px);text-align:left;background:#fff;
  border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);overflow:hidden;z-index:40}
.rsearch-results a{display:block;padding:13px 18px;text-decoration:none;color:var(--ink);
  border-bottom:1px solid var(--line-soft)}
.rsearch-results a:last-child{border-bottom:none}
.rsearch-results a:hover,.rsearch-results a.active{background:var(--bg-tint)}
.rsearch-results .rr-title{font-weight:600;font-size:15.5px;letter-spacing:-.01em}
.rsearch-results .rr-title mark{background:rgba(21,168,107,.22);color:inherit;border-radius:3px;padding:0 1px}
.rsearch-results .rr-meta{font-size:13px;color:var(--ink-soft);margin-top:2px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.rsearch-results .rr-empty{padding:16px 18px;color:var(--ink-soft);font-size:14.5px}

/* ======================= hub: pillars & cards ======================== */
.res-hub #hubBody{padding:clamp(12px,3vw,28px) 0 0}
.browse-label{font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:20px}

.pillar{margin:0 0 clamp(34px,5vw,58px);scroll-margin-top:90px}
.pillar-head{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;
  padding-bottom:18px;margin-bottom:22px;border-bottom:1px solid var(--line)}
.pillar-ic{grid-row:span 1;width:52px;height:52px;border-radius:15px;display:flex;align-items:center;
  justify-content:center;color:#fff;flex:none;
  background:linear-gradient(145deg,var(--brand-bright),var(--brand-deep));
  box-shadow:0 10px 22px rgba(14,124,123,.30)}
.pillar-ic svg{width:26px;height:26px}
.pillar-heading h2{font-size:clamp(21px,3vw,28px);letter-spacing:-.02em;line-height:1.15}
.pillar-lead{color:var(--ink-soft);font-size:15px;margin-top:3px;max-width:56ch}
.pillar-head .count{align-self:center;font-size:13px;font-weight:600;color:var(--ink-faint);
  letter-spacing:.02em;flex:none;white-space:nowrap}

.cluster{margin:26px 0 0}
.cluster h3{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:14px}

.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px}
.card{position:relative;display:flex;flex-direction:column;gap:8px;background:var(--card);
  border:1px solid var(--line);border-radius:18px;padding:22px 22px 20px;box-shadow:var(--shadow-soft);
  text-decoration:none;color:var(--ink);overflow:hidden;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(var(--brand-bright),var(--brand-deep));opacity:0;transition:opacity .16s ease}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:rgba(14,124,123,.35)}
.card:hover::before{opacity:1}
.card .c-title{font-weight:650;font-weight:600;font-size:17px;letter-spacing:-.01em;line-height:1.32}
.card .c-desc{font-size:14px;color:var(--ink-soft);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card .c-more{margin-top:auto;color:var(--brand);font-weight:600;font-size:13.5px;
  display:inline-flex;align-items:center;gap:6px;padding-top:6px}
.card .c-more svg{width:15px;height:15px;transition:transform .16s ease}
.card:hover .c-more svg{transform:translateX(3px)}

/* Featured (flagship) card — spans wider, tinted, with a kicker. */
.card-featured{grid-column:1 / -1;flex-direction:column;gap:10px;padding:26px 28px;
  background:linear-gradient(145deg,#fff,var(--bg-tint));border-color:rgba(14,124,123,.22)}
.card-featured .c-kicker{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brand)}
.card-featured .c-title{font-size:clamp(20px,2.6vw,24px);max-width:30ch}
.card-featured .c-desc{font-size:15px;-webkit-line-clamp:2;max-width:70ch}
@media(min-width:720px){
  .card-featured{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:28px}
  .card-featured .c-kicker,.card-featured .c-title,.card-featured .c-desc{grid-column:1}
  .card-featured .c-more{grid-column:2;grid-row:1 / span 3;margin-top:0;padding-top:0;
    background:var(--brand);color:#fff;padding:11px 18px;border-radius:11px;
    box-shadow:0 8px 18px rgba(14,124,123,.28)}
  .card-featured:hover .c-more{background:var(--brand-deep)}
}
.empty{color:var(--ink-soft);text-align:center;padding:48px 0}

/* ---------- hub → product CTA ---------- */
.hub-cta{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  margin:clamp(20px,4vw,36px) 0 8px;padding:clamp(26px,4vw,40px);border-radius:var(--radius-lg);
  background:linear-gradient(140deg,#0e3b3a,#0a5b5a 55%,#0e7c7b);color:#fff;box-shadow:var(--shadow-lg)}
.hub-cta .hc-copy{max-width:60ch}
.hub-cta h2{font-size:clamp(20px,2.8vw,27px);letter-spacing:-.02em;line-height:1.2}
.hub-cta p{color:rgba(255,255,255,.85);margin-top:8px;font-size:15.5px}
.hub-cta .cta{background:#fff;color:var(--brand-deep);box-shadow:0 10px 24px rgba(0,0,0,.22);flex:none}
.hub-cta .cta:hover{color:var(--brand-deep);background:#f2fbfa}

/* ============================== article ============================== */
.res-article .crumb{font-size:13.5px;color:var(--ink-soft);padding:clamp(14px,3vw,24px) 0 0;
  display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.res-article .crumb a{color:var(--brand);text-decoration:none;font-weight:500}
.res-article .crumb a:hover{text-decoration:underline}
.res-article .crumb .sep{opacity:.5}
.res-article .crumb .cur{color:var(--ink-soft)}

/* reading-progress bar (fixed sliver at the very top of the viewport) */
.reading-bar{position:fixed;left:0;top:0;height:3px;width:100%;z-index:200;background:transparent;pointer-events:none}
.reading-bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--brand-bright),var(--accent));
  box-shadow:0 0 8px rgba(21,168,107,.5);transition:width .1s linear}

/* Article layout: a readable 720px measure with a sticky "On this page" rail
   on wide screens; the rail collapses to a card above the text on narrow ones. */
.article-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:0;max-width:720px;margin:0 auto;
  padding-top:clamp(10px,2vw,20px)}
.article{min-width:0}
.toc-rail{margin:0 0 22px}

.article-head{margin-bottom:26px}
.article-kicker{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--brand);margin-bottom:12px}
.article-head h1{font-size:clamp(29px,5vw,44px);line-height:1.08;letter-spacing:-.03em}
.article-meta{display:flex;align-items:center;gap:8px;margin-top:14px;color:var(--ink-faint);
  font-size:14px;font-weight:500}
.article-meta .am-dot{width:6px;height:6px;border-radius:50%;background:var(--accent)}

/* Table of contents */
.toc{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:8px 6px}
.toc-label{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-faint);padding:8px 12px 6px;cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px}
.toc-label::-webkit-details-marker{display:none}
.toc-label::before{content:"";width:16px;height:16px;flex:none;
  background:currentColor;-webkit-mask:center/contain no-repeat;mask:center/contain no-repeat;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01'/%3E%3C/svg%3E")}
.toc-list{list-style:none;margin:0;padding:2px 0 4px;counter-reset:toc}
.toc-list li{margin:0}
.toc-list a{display:block;padding:7px 12px 7px 14px;font-size:14px;line-height:1.35;color:var(--ink-soft);
  text-decoration:none;border-left:2px solid transparent;transition:color .12s ease,border-color .12s ease}
.toc-list a:hover{color:var(--brand)}
.toc-list li.is-cur a{color:var(--brand-deep);font-weight:600;border-left-color:var(--brand)}

/* TL;DR box */
.tldr{position:relative;background:linear-gradient(145deg,var(--bg-tint),#fff);border:1px solid var(--line);
  border-left:4px solid var(--brand);border-radius:16px;padding:20px 24px;margin:0 0 34px}
.tldr-tag{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--brand-deep);margin-bottom:8px}
.tldr-tag svg{width:15px;height:15px}
.tldr p{color:var(--ink);font-size:16px;margin:0}
.tldr ul{margin:0;padding-left:1.15em;color:var(--ink);font-size:15.5px}
.tldr li{margin:0}
.tldr li+li{margin-top:.4em}

/* Wide screens: sticky "On this page" rail to the right of the reading column. */
@media(min-width:1080px){
  .article-grid{grid-template-columns:minmax(0,720px) 232px;column-gap:56px;max-width:1008px}
  .toc-rail{grid-column:2;grid-row:1;margin:0}
  .article{grid-column:1;grid-row:1}
  .toc{position:sticky;top:96px;max-height:calc(100vh - 120px);overflow:auto}
  .toc-label{cursor:default}
  /* keep Related aligned under the reading column, not centred in the wrap */
  .res-article .related{max-width:1008px;padding-right:288px}
}

/* prose (rendered markdown) */
.prose{font-size:17.5px;line-height:1.72;color:var(--ink);overflow-wrap:break-word}
.prose>*+*{margin-top:1.1em}
.prose>p:first-of-type{font-size:19px;color:var(--ink);line-height:1.6}
/* Drop cap on the opening paragraph — a small editorial signal. */
.prose>p:first-of-type::first-letter{float:left;font-size:3.1em;line-height:.82;font-weight:800;
  color:var(--brand-deep);margin:.05em .12em 0 0;font-family:Georgia,"Times New Roman",serif}
.prose h2{font-size:clamp(22px,3vw,29px);letter-spacing:-.02em;margin-top:1.8em;line-height:1.2;
  padding-top:.9em;border-top:1px solid var(--line-soft);scroll-margin-top:96px}
.prose h2:first-child{border-top:none;padding-top:0;margin-top:0}
.prose h3{scroll-margin-top:96px}
.prose h3{font-size:clamp(18px,2.4vw,22px);letter-spacing:-.01em;margin-top:1.5em}
.prose h4{font-size:17px;font-weight:700;margin-top:1.3em}
.prose a{color:var(--brand);font-weight:500;text-decoration:underline;text-underline-offset:2px;
  text-decoration-color:rgba(14,124,123,.35);transition:text-decoration-color .15s ease;overflow-wrap:anywhere}
.prose a:hover{color:var(--brand-deep);text-decoration-color:var(--brand)}
.prose ul,.prose ol{padding-left:1.4em;color:var(--ink)}
.prose li+li{margin-top:.45em}
.prose li::marker{color:var(--brand)}
.prose blockquote{position:relative;border-left:3px solid var(--brand);
  background:linear-gradient(145deg,var(--bg-tint),#fff);border-radius:0 14px 14px 0;
  padding:18px 22px;margin:1.6em 0;color:var(--ink);font-size:18.5px;font-style:normal;font-weight:500;
  line-height:1.5;box-shadow:var(--shadow-soft)}
.prose blockquote p{margin:0}
.prose blockquote p+p{margin-top:.5em}
.prose code{background:var(--bg-tint);border:1px solid var(--line);border-radius:6px;padding:1px 6px;
  font-size:.9em;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.prose pre{background:#0f2433;color:#eaf1f4;border-radius:12px;padding:16px 18px;overflow:auto}
.prose pre code{background:none;border:none;padding:0;color:inherit}
.prose img{max-width:100%;height:auto;border-radius:12px}
.prose table{width:100%;border-collapse:collapse;font-size:15px;border:1px solid var(--line);
  border-radius:12px;overflow:hidden}
.prose th,.prose td{text-align:left;padding:11px 15px;border-bottom:1px solid var(--line)}
.prose th{background:#fbfdfd;font-size:12.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-soft)}
.prose hr{border:none;border-top:1px solid var(--line);margin:2.2em 0}

/* references */
.refs{margin:40px 0 0;border-top:1px solid var(--line);padding-top:26px}
.refs h2{font-size:18px;letter-spacing:-.01em;margin-bottom:12px}
.refs ol{padding-left:1.3em;color:var(--ink-soft);font-size:15px}
.refs li+li{margin-top:.5em}
.refs a{color:var(--brand);text-decoration:underline;text-underline-offset:2px;word-break:break-word}

/* ---------- end-of-article product CTA ---------- */
.article-cta{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px;
  margin:clamp(38px,5vw,52px) 0 0;padding:24px 26px;border-radius:var(--radius-lg);
  background:linear-gradient(145deg,var(--bg-tint),#fff);border:1px solid rgba(14,124,123,.2);
  box-shadow:var(--shadow-soft)}
.article-cta .ac-mark .brandmark{width:46px;height:46px}
.article-cta h2{font-size:19px;letter-spacing:-.01em;line-height:1.25}
.article-cta p{color:var(--ink-soft);font-size:14.5px;margin-top:4px;max-width:52ch}
.article-cta .cta{flex:none;font-size:15px;padding:12px 22px}
@media(max-width:620px){
  .article-cta{grid-template-columns:auto 1fr;row-gap:14px}
  .article-cta .cta{grid-column:1 / -1;justify-content:center}
}

/* ---------- related module ---------- */
.related{max-width:720px;margin:clamp(40px,6vw,60px) auto 0;padding-top:clamp(28px,4vw,40px);
  border-top:1px solid var(--line)}
.related h2{font-size:clamp(20px,2.6vw,26px);letter-spacing:-.02em;margin-bottom:4px}
.related .rel-sub{color:var(--ink-soft);font-size:15px;margin-bottom:20px}
.related .cards{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}