/* Silver Suits AI — the blog: blog.html and one blog-<slug>.html per post,
   built by tools/build_blog.py from content/blog/*.md. Loaded after
   styles.css (nav, Let's talk, footer, and the shared post card .bpc and
   its drawn cover .bcv), usecase.css (crumbs, eyebrow .uc-k, reveals) and
   product.css (hero frame .pdh, buttons .pov). Silver + navy only; Plus
   Jakarta Sans only. */

/* ---- blog.html ------------------------------------------------------------------------- */
.bgh{ padding-bottom:clamp(28px, 4vh, 44px); }
.bgh__copy{ margin-top:clamp(28px, 4vh, 44px); }
.bgl{ padding:0 clamp(16px, 4vw, 72px) clamp(56px, 9vh, 104px); }
.bgl__in{ max-width:1240px; margin:0 auto; }
.bgl__k{
  display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0 0 20px; padding-bottom:14px;
  border-bottom:1px solid var(--line);
  font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--navy-l);
}
.bgl__k span{ color:var(--ink-4); letter-spacing:.1em; }
.bgl__grid{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; margin-top:16px; }
.bmore .bgl__grid{ margin-top:24px; }
/* with two posts both cards are wide, the second with its cover on the right */
.bgl__more{ margin-top:16px; }
.bgl__more > .bgl__grid{ margin-top:0; }
.bmore .bpc--flip{ margin-top:24px; }

/* ---- a post: the header ---------------------------------------------------------------- */
.bph{ padding-bottom:0; }
.bph .uch__crumbs [aria-current]{ max-width:32ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bph__copy{ max-width:980px; margin-top:clamp(28px, 4vh, 44px); }
.bph__h{
  margin:18px 0 0; padding-bottom:.06em; max-width:17ch;
  font-family:var(--display); font-weight:800; font-size:clamp(40px, 5.6vw, 84px); line-height:1; letter-spacing:-.05em;
  background:linear-gradient(180deg, #0D4E6D 0%, #0B3D57 60%, #082A3C 100%); -webkit-background-clip:text; background-clip:text; color:transparent;
  text-wrap:balance;
}
/* a long title (a customer's own question) a size down, so it stays a headline */
.bph__h--long{ max-width:23ch; font-size:clamp(34px, 4.3vw, 66px); line-height:1.04; letter-spacing:-.045em; }
.bph__dek{ margin:22px 0 0; max-width:38em; font-size:clamp(17px, 1.4vw, 21px); line-height:1.55; color:var(--ink-2); text-wrap:pretty; }
.bph__by{ display:flex; align-items:center; gap:12px; margin:28px 0 0; }
.bph__av{
  width:42px; height:42px; flex:none; border-radius:13px; display:grid; place-items:center;
  background:linear-gradient(160deg, #1D7BA3, var(--navy) 70%); box-shadow:0 10px 20px -10px rgba(11,71,99,.8);
}
.bph__av img{ width:22px; height:auto; }
.bph__by b{ display:block; font-size:15px; font-weight:750; letter-spacing:-.015em; color:var(--navy); }
.bph__by small{ display:flex; align-items:center; gap:8px; margin-top:3px; font-size:13px; font-weight:550; color:var(--ink-3); }
.bph__by small i{ width:3px; height:3px; border-radius:50%; background:currentColor; opacity:.55; }
.bph__cover{
  margin-top:clamp(32px, 5vh, 52px); border-radius:32px; overflow:hidden; aspect-ratio:3 / 1;
  box-shadow:0 0 0 .5px rgba(11,71,99,.16), 0 50px 90px -56px rgba(8,40,58,.75);
}
/* a post with a thumb: the title on the left, the picture beside it at its own shape (never cropped) */
.bph--thumb .pdh__in{
  display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, clamp(340px, 31vw, 500px));
  column-gap:clamp(40px, 6vw, 112px); align-items:center;
}
.bph--thumb .uch__crumbs{ grid-column:1 / -1; }
.bph--thumb .bph__h{ font-size:clamp(40px, 5vw, 80px); }
.bph__thumb{
  margin:clamp(28px, 4vh, 44px) 0 0; border-radius:28px; overflow:hidden; background:#EEF2F6;
  box-shadow:0 0 0 .5px rgba(11,71,99,.16), 0 50px 90px -56px rgba(8,40,58,.75);
}
.bph__thumb img{ display:block; width:100%; height:auto; }

/* ---- a post: contents and share at the side, the text centred on the page --------------- */
.bpa__wrap{
  display:grid; grid-template-columns:minmax(0, 220px) minmax(0, 700px) minmax(0, 220px); justify-content:center;
  gap:clamp(32px, 5vw, 88px);
  max-width:1400px; margin:0 auto; padding:clamp(48px, 8vh, 88px) clamp(16px, 4vw, 72px) 0;
}
.bpa__side{ position:sticky; top:calc(var(--nav-h) + 40px); align-self:start; display:grid; gap:32px; }
.bpa__k{ margin:0 0 12px; font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-4); }
.bpa__toc{ position:relative; padding-left:18px; }
.bpa__toc .bpa__k{ margin-left:-18px; }
.bpa__toc ol{ margin:0; padding:0; list-style:none; display:grid; gap:2px; }
.bpa__toc a{
  display:grid; grid-template-columns:24px 1fr; padding:7px 0; text-decoration:none;
  font-size:13.5px; font-weight:550; line-height:1.4; letter-spacing:-.005em; color:var(--ink-3);
  transition:color 180ms var(--ease);
}
.bpa__toc a span{ font-size:11px; font-weight:700; letter-spacing:.06em; color:#8A929A; padding-top:2px; font-variant-numeric:tabular-nums; transition:color 180ms var(--ease); }
.bpa__toc a:hover, .bpa__toc a.is-on{ color:var(--navy); }
.bpa__toc a.is-on{ font-weight:650; }
.bpa__toc a.is-on span{ color:var(--navy-l); }
.bpa__toc a:focus-visible{ outline:2px solid var(--navy-l); outline-offset:2px; border-radius:6px; }
/* the reading rail: how far through the article the reader is */
.bpa__prog{ position:absolute; left:0; top:27px; bottom:0; width:2px; border-radius:2px; background:rgba(11,71,99,.10); overflow:hidden; }
.bpa__prog i{ position:absolute; inset:0; border-radius:inherit; background:linear-gradient(180deg, #1D7BA3, var(--navy)); transform-origin:0 0; transform:scaleY(var(--p, 0)); }

.bsh__row{ display:flex; flex-wrap:wrap; gap:8px; }
.bsh__b{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px; width:40px; height:40px; padding:0; border:0; border-radius:999px;
  font:inherit; font-size:13.5px; font-weight:650; color:var(--navy); text-decoration:none; cursor:pointer;
  background:rgba(255,255,255,.72); box-shadow:inset 0 0 0 1px rgba(11,71,99,.14);
  transition:background-color 180ms var(--ease), transform 200ms var(--ease), color 180ms var(--ease);
}
.bsh__b:hover{ background:#fff; transform:translateY(-2px); }
.bsh__b:focus-visible{ outline:2px solid var(--navy-l); outline-offset:3px; }
.bsh__b svg{ width:17px; height:17px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.bsh__b svg .f{ fill:currentColor; stroke:none; }
.bsh__l{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.bsh__b.is-done{ color:#fff; background:var(--navy); }
.bsh__b.is-done .bsh__l{
  position:absolute; left:50%; bottom:calc(100% + 8px); width:auto; height:auto; clip:auto; translate:-50% 0;
  padding:6px 10px; border-radius:8px; font-size:12px; color:#fff; background:var(--ink);
}

/* ---- a post: the text --------------------------------------------------------------------- */
.bpa__body{ min-width:0; font-size:clamp(17px, 1.25vw, 19px); line-height:1.75; letter-spacing:-.006em; color:var(--ink-2); }
.bpa__body > *:first-child{ margin-top:0; }
.bpa__body p{ margin:0 0 1.15em; text-wrap:pretty; }
.bpa__body .bpa__lede{ font-size:1.2em; line-height:1.55; font-weight:500; letter-spacing:-.014em; color:var(--ink); }
.bpa__body h2{
  margin:2.3em 0 .75em; scroll-margin-top:calc(var(--nav-h) + 36px);
  font-family:var(--display); font-weight:800; font-size:clamp(26px, 2.3vw, 34px); line-height:1.12; letter-spacing:-.035em; color:var(--navy);
  text-wrap:balance;
}
.bpa__n{
  display:flex; align-items:center; gap:12px; margin-bottom:14px;
  font-size:12px; font-weight:700; letter-spacing:.14em; color:var(--navy-l);
}
.bpa__n::after{ content:""; width:28px; height:1px; background:linear-gradient(90deg, rgba(20,104,143,.55), rgba(20,104,143,0)); }
.bpa__body a{ color:var(--navy-l); font-weight:600; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; text-decoration-color:rgba(20,104,143,.4); transition:color 180ms var(--ease), text-decoration-color 180ms var(--ease); }
.bpa__body a:hover{ color:var(--navy); text-decoration-color:currentColor; }
.bpa__body a:focus-visible{ outline:2px solid var(--navy-l); outline-offset:2px; border-radius:3px; }
.bpa__body strong{ font-weight:700; color:var(--ink); }

/* the checks a bank should run: one card each, a navy tick */
.bpa__list{ margin:1.5em 0 1.7em; padding:0; list-style:none; display:grid; gap:10px; }
.bpa__list li{
  position:relative; padding:18px 22px 18px 58px; border-radius:20px; font-size:.95em; line-height:1.65;
  background:linear-gradient(170deg, rgba(255,255,255,.88), rgba(255,255,255,.62));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.95), 0 0 0 .5px rgba(11,71,99,.10), 0 22px 40px -32px rgba(11,71,99,.45);
}
.bpa__list li::before{
  content:""; position:absolute; left:20px; top:20px; width:24px; height:24px; border-radius:50%;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat, linear-gradient(160deg, #1D7BA3, var(--navy) 70%);
  box-shadow:0 6px 12px -6px rgba(11,71,99,.8);
}
.bpa__list strong{ color:var(--navy); }

/* steps: the same cards, numbered like the app's own screens */
.bpa__steps{ counter-reset:step; }
.bpa__steps li{ counter-increment:step; }
.bpa__steps li::before{
  content:counter(step); display:grid; place-items:center;
  font-size:13px; font-weight:750; line-height:1; color:#fff; background:linear-gradient(160deg, #1D7BA3, var(--navy) 70%);
}

/* a picture in the text: framed like a card, its caption under it */
.bfig{ margin:2.2em 0 2.4em; }
.bfig img{
  display:block; width:100%; max-width:620px; height:auto; margin:0 auto; border-radius:26px; background:#EEF2F5;
  box-shadow:0 0 0 .5px rgba(11,71,99,.14), 0 40px 80px -48px rgba(8,40,58,.7);
}
.bfig figcaption{
  max-width:520px; margin:16px auto 0; text-align:center;
  font-size:14px; font-weight:550; line-height:1.55; color:var(--ink-3); text-wrap:balance;
}

/* the customer's words, as said out loud: a navy voice card */
.bq{
  display:grid; grid-template-columns:auto minmax(0, 1fr); align-items:center; gap:10px 18px;
  margin:2em 0 2.1em; padding:clamp(22px, 2.6vw, 30px) clamp(22px, 2.8vw, 34px); border-radius:28px; color:#fff;
  background:radial-gradient(110% 90% at 85% 0%, rgba(143,208,238,.2), rgba(143,208,238,0) 60%), linear-gradient(160deg, #11587A 0%, #0B4763 45%, #083348 100%);
  box-shadow:0 34px 60px -38px rgba(8,40,58,.85), inset 0 1px 0 rgba(255,255,255,.14);
}
.bq__mic{
  grid-row:1 / span 2; align-self:start; width:48px; height:48px; border-radius:50%; display:grid; place-items:center; color:#fff;
  background:rgba(255,255,255,.12); box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);
}
.bq__mic svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.bq blockquote{ margin:0; }
.bq blockquote p{ margin:0; font-family:var(--display); font-size:clamp(20px, 1.9vw, 27px); font-weight:700; line-height:1.32; letter-spacing:-.025em; color:#fff; text-wrap:balance; }
.bq__wave{ height:18px; color:rgba(143,208,238,.85); }

/* ---- a post: the end ------------------------------------------------------------------------ */
.bpa__end{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  max-width:700px; margin:clamp(24px, 4vh, 40px) auto 0; padding:28px 0 clamp(56px, 9vh, 104px);
  border-top:1px solid var(--line);
  box-sizing:content-box;
}
.bpa__end .pov{ height:46px; padding:0 20px; font-size:14px; }
.bpa__end .pov svg{ width:15px; height:15px; }
.bsh--end{ display:none; align-items:center; gap:14px; }
.bsh--end .bpa__k{ margin:0; }

/* ---- breakpoints ------------------------------------------------------------------------------ */
@media (max-width:1240px){
  .bpa__wrap{ grid-template-columns:minmax(0, 210px) minmax(0, 700px); justify-content:start; }
}
@media (max-width:1023px){
  .bgl__grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:899px){
  .bpa__wrap{ display:block; padding-top:clamp(36px, 6vh, 56px); }
  .bpa__side{ display:none; }
  .bph__cover{ aspect-ratio:16 / 11; border-radius:24px; }
  .bph--thumb .pdh__in{ display:block; }
  .bph__thumb{ max-width:520px; margin-top:clamp(28px, 5vh, 40px); border-radius:22px; }
  .bph .uch__crumbs [aria-current]{ max-width:18ch; }
  .bpa__end{ margin-inline:clamp(16px, 4vw, 72px); }
  .bsh--end{ display:flex; }
  .bq{ grid-template-columns:1fr; border-radius:24px; }
  .bq__mic{ grid-row:auto; width:40px; height:40px; }
  .bq__mic svg{ width:19px; height:19px; }
  .bpa__list li{ padding:16px 18px 16px 52px; }
  .bpa__list li::before{ left:16px; top:18px; }
  .bfig img{ border-radius:20px; }
}
@media (max-width:640px){
  .bgl__grid{ grid-template-columns:1fr; }
}
@media (min-width:1900px){
  .bgl__in{ max-width:1440px; }
}
@media (prefers-reduced-motion:reduce){
  .bsh__b, .bsh__b:hover{ transition:none; transform:none; }
}