/* ============================================================
   BLOG — the list, the categories and the articles
   House style throughout: black type, the brand blue for links
   and the active state, the one red for labels and markers,
   square corners. Articles read at about 70 characters a line.
   ============================================================ */
:root{
  --blue: #1C2473;
  --blue-soft: #eef0f9;
  --muted: rgba(0,0,0,.62);
}

.bl-wrap{
  max-width:var(--work-cap, 1630px);
  margin:0 auto;
  padding:0 clamp(18px,3.4vw,55px);
}
.bl-wrap--narrow{ max-width:var(--work-cap, 1630px); }
.bl-wrap--narrow > *{ max-width:980px; }

/* small labels: the kicker above a heading, and the category chip */
.bl-kicker{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 16px;
  font-family:var(--font-mono);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent);
}
.bl-kicker::before{ content:""; width:28px; height:2px; background:currentColor; }
.bl-kicker--light{ color:#fff; }

.bl-chip{
  display:inline-block;
  padding:6px 10px 5px;
  background:var(--accent);
  color:#fff;
  font-family:var(--font-mono);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  text-decoration:none;
  line-height:1;
  transition:background .25s var(--ease);
}
.bl-chip:hover{ background:var(--blue); color:#fff; }

.bl-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin:0;
  font-size:13.5px;
  color:var(--muted);
}

/* ---------- the head of the blog and of a category ---------- */
.bl-head{
  padding:clamp(18px,2.4vw,36px) 0 clamp(30px,3.4vw,52px);
  border-bottom:1px solid var(--line);
}
.bl-title{
  margin:0;
  max-width:18ch;
  font-size:clamp(36px,5.2vw,72px);
  font-weight:600;
  line-height:1.03;
  letter-spacing:-.025em;
}
.bl-lede{
  max-width:62ch;
  margin:20px 0 0;
  font-size:clamp(16px,1.25vw,19px);
  line-height:1.6;
  color:var(--muted);
}
.bl-filters{ display:flex; flex-wrap:wrap; gap:8px; margin-top:clamp(24px,2.6vw,36px); }
.bl-filter{
  padding:10px 16px;
  border:1px solid var(--line-strong);
  font-family:var(--font-display);
  font-size:14px;
  font-weight:500;
  color:var(--ink);
  text-decoration:none;
  transition:border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease);
}
.bl-filter:hover{ border-color:var(--blue); color:var(--blue); }
.bl-filter.is-on{ background:var(--blue); border-color:var(--blue); color:#fff; }

/* ---------- the list ---------- */
.bl-list{ padding:clamp(32px,4vw,64px) 0 var(--sec-pad); }

.bl-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(28px,3vw,48px) clamp(20px,2.4vw,36px);
}

.bl-card{ display:flex; flex-direction:column; }
.bl-card-shot{
  display:block;
  aspect-ratio:16 / 10;
  overflow:hidden;
  background:var(--blue-soft);
}
.bl-card-shot img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .8s var(--ease-soft);
}
.bl-card:hover .bl-card-shot img{ transform:scale(1.045); }
.bl-card-body{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; padding-top:20px; }
.bl-card-title{
  margin:0;
  font-size:clamp(19px,1.5vw,22px);
  font-weight:600;
  line-height:1.25;
  letter-spacing:-.01em;
}
.bl-card-title a{ color:var(--ink); text-decoration:none; background:linear-gradient(var(--blue),var(--blue)) 0 100% / 0 1px no-repeat; transition:background-size .4s var(--ease), color .25s var(--ease); }
.bl-card:hover .bl-card-title a{ color:var(--blue); background-size:100% 1px; }
.bl-card-text{ margin:0; font-size:15px; line-height:1.6; color:var(--muted); }

/* the newest article, large, across the top */
.bl-card--feature{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:clamp(24px,3.4vw,56px);
  align-items:center;
  margin-bottom:clamp(40px,4.6vw,72px);
  padding-bottom:clamp(40px,4.6vw,72px);
  border-bottom:1px solid var(--line);
}
.bl-card--feature .bl-card-body{ padding-top:0; gap:16px; }
.bl-card--feature .bl-card-title{ font-size:clamp(26px,2.8vw,42px); line-height:1.12; letter-spacing:-.02em; }
.bl-card--feature .bl-card-text{ font-size:16.5px; }

.bl-empty{ font-size:18px; color:var(--muted); }

/* page numbers */
.bl-pages{ margin-top:clamp(40px,4vw,64px); }
.bl-pages .nav-links{ display:flex; flex-wrap:wrap; gap:8px; }
.bl-pages .page-numbers{
  min-width:44px;
  padding:10px 14px;
  border:1px solid var(--line-strong);
  text-align:center;
  font-family:var(--font-display);
  font-size:14px;
  color:var(--ink);
  text-decoration:none;
}
.bl-pages .page-numbers.current{ background:var(--blue); border-color:var(--blue); color:#fff; }
.bl-pages a.page-numbers:hover{ border-color:var(--blue); color:var(--blue); }

/* ---------- an article ---------- */
.bl-post-head{ padding:clamp(18px,2.4vw,34px) 0 clamp(26px,3vw,44px); }
.bl-post-head .bl-chip{ margin-bottom:20px; }
.bl-post-title{
  margin:0;
  font-size:clamp(34px,4.6vw,64px);
  font-weight:600;
  line-height:1.05;
  letter-spacing:-.025em;
}
.bl-post-lede{
  max-width:62ch;
  margin:22px 0 0;
  font-size:clamp(17px,1.35vw,21px);
  line-height:1.55;
  color:var(--muted);
}
.bl-meta--post{ margin-top:24px; padding-top:20px; border-top:1px solid var(--line); }
.bl-by{ color:var(--ink); font-weight:500; }

.bl-post-shot{ margin:0 0 clamp(36px,4.4vw,72px); }
.bl-post-shot img{
  display:block;
  width:100%;
  height:auto;
  max-height:560px;
  aspect-ratio:16 / 7;
  object-fit:cover;
  background:var(--blue-soft);
}

.bl-post-layout{
  display:grid;
  grid-template-columns:280px minmax(0,1fr);
  gap:clamp(36px,5vw,80px);
  align-items:start;
  padding-bottom:var(--sec-pad);
}
.bl-post-layout--solo{ grid-template-columns:minmax(0,1fr); }
.bl-post-main{ min-width:0; max-width:820px; }
.bl-post-layout--solo .bl-post-main{ margin:0 auto; }

/* the contents list, following the reader down the page */
.bl-toc{ position:sticky; top:calc(var(--header-h) + 28px); }
.bl-toc-head{
  margin-bottom:14px;
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent);
  list-style:none;
  cursor:pointer;
}
.bl-toc-head::-webkit-details-marker{ display:none; }
.bl-toc-list{ margin:0; padding:0; list-style:none; counter-reset:toc; border-left:1px solid var(--line); }
.bl-toc-list li{ counter-increment:toc; }
.bl-toc-list a{
  position:relative;
  display:block;
  padding:8px 0 8px 18px;
  font-size:14px;
  line-height:1.4;
  color:var(--muted);
  text-decoration:none;
  transition:color .2s var(--ease);
}
.bl-toc-list a::before{
  content:counter(toc, decimal-leading-zero);
  margin-right:8px;
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--line-strong);
}
.bl-toc-list a::after{
  content:"";
  position:absolute;
  left:-1px;
  top:8px;
  bottom:8px;
  width:2px;
  background:var(--accent);
  transform:scaleY(0);
  transition:transform .25s var(--ease);
}
.bl-toc-list a:hover{ color:var(--blue); }
.bl-toc-list a.is-on{ color:var(--ink); font-weight:500; }
.bl-toc-list a.is-on::after{ transform:scaleY(1); }

/* the text itself */
.bl-prose{ font-size:18px; line-height:1.75; }
.bl-prose > :first-child{ margin-top:0; }
.bl-prose p{ margin:0 0 1.25em; }
.bl-prose h2{
  margin:2.1em 0 .65em;
  font-size:clamp(26px,2.3vw,34px);
  font-weight:600;
  line-height:1.15;
  letter-spacing:-.02em;
  scroll-margin-top:calc(var(--header-h) + 24px);
}
.bl-prose h3{
  margin:1.7em 0 .5em;
  font-size:clamp(20px,1.6vw,23px);
  font-weight:600;
  line-height:1.3;
  scroll-margin-top:calc(var(--header-h) + 24px);
}
.bl-prose a{
  color:var(--blue);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  transition:color .2s var(--ease);
}
.bl-prose a:hover{ color:var(--accent); }
.bl-prose strong{ font-weight:600; }
.bl-prose ul,
.bl-prose ol{ margin:0 0 1.35em; padding-left:1.25em; }
.bl-prose li{ margin:.45em 0; padding-left:.25em; }
.bl-prose ul li::marker{ color:var(--accent); }
.bl-prose ol li::marker{ color:var(--accent); font-family:var(--font-mono); font-weight:600; }
.bl-prose blockquote{
  margin:1.8em 0;
  padding:4px 0 4px 24px;
  border-left:3px solid var(--accent);
  font-family:var(--font-display);
  font-size:clamp(20px,1.7vw,24px);
  line-height:1.4;
}
.bl-prose blockquote p{ margin:0; }
.bl-prose figure{ margin:2em 0; }
.bl-prose figure img,
.bl-prose > p > img{ display:block; width:100%; height:auto; border:1px solid var(--line); }
.bl-prose figcaption{ margin-top:10px; font-size:13.5px; line-height:1.5; color:var(--muted); }
.bl-prose hr{ margin:2.4em 0; border:0; border-top:1px solid var(--line); }

/* price tables and comparisons */
.bl-table{ margin:1.8em 0; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.bl-prose table{ width:100%; min-width:520px; border-collapse:collapse; font-size:15.5px; line-height:1.5; }
.bl-prose th{
  padding:13px 16px;
  background:var(--blue);
  color:#fff;
  font-family:var(--font-display);
  font-weight:600;
  text-align:left;
  vertical-align:bottom;
}
.bl-prose td{ padding:13px 16px; border-bottom:1px solid var(--line); vertical-align:top; }
.bl-prose tbody tr:nth-child(even) td{ background:#f7f8fc; }
.bl-prose td strong{ white-space:nowrap; }

/* boxes: a quick answer at the top, a tip, a warning */
.bl-summary,
.bl-note,
.bl-tip{ margin:1.8em 0; padding:22px 26px; font-size:16.5px; line-height:1.65; }
.bl-summary{ border:2px solid var(--ink); }
.bl-summary > :last-child,
.bl-note > :last-child,
.bl-tip > :last-child{ margin-bottom:0; }
.bl-summary-title,
.bl-note-title,
.bl-tip-title{
  display:block;
  margin-bottom:10px;
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.bl-summary-title{ color:var(--accent); }
.bl-note{ background:var(--blue-soft); border-left:4px solid var(--blue); }
.bl-note-title{ color:var(--blue); }
.bl-tip{ background:#fff3f5; border-left:4px solid var(--accent); }
.bl-tip-title{ color:var(--accent); }

/* questions and answers */
.bl-faq{ margin-top:clamp(40px,4vw,64px); }
.bl-faq h2{
  margin:0 0 18px;
  font-size:clamp(26px,2.3vw,34px);
  font-weight:600;
  letter-spacing:-.02em;
  scroll-margin-top:calc(var(--header-h) + 24px);
}
.bl-faq-item{ border-top:1px solid var(--line); }
.bl-faq-item:last-child{ border-bottom:1px solid var(--line); }
.bl-faq-item summary{
  position:relative;
  padding:20px 44px 20px 0;
  font-family:var(--font-display);
  font-size:clamp(17px,1.3vw,19px);
  font-weight:600;
  line-height:1.35;
  list-style:none;
  cursor:pointer;
}
.bl-faq-item summary::-webkit-details-marker{ display:none; }
.bl-faq-item summary::after{
  content:"+";
  position:absolute;
  right:4px;
  top:50%;
  transform:translateY(-50%);
  font-size:26px;
  font-weight:400;
  color:var(--accent);
  transition:transform .3s var(--ease);
}
.bl-faq-item[open] summary::after{ transform:translateY(-50%) rotate(45deg); }
.bl-faq-item summary:hover{ color:var(--blue); }
.bl-faq-a{ padding:0 0 22px; font-size:16.5px; line-height:1.7; }
.bl-faq-a p{ margin:0 0 .8em; }
.bl-faq-a a{ color:var(--blue); }

/* sharing, tags and the word about us */
.bl-post-foot{ margin-top:clamp(40px,4vw,60px); display:flex; flex-direction:column; gap:28px; }
.bl-share-row{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 20px; padding:22px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.bl-share-label{ font-family:var(--font-mono); font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; }
.bl-share-list{ display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none; }
.bl-share{
  position:relative;
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border:1px solid var(--ink);
  background:#fff;
  color:var(--ink);
  cursor:pointer;
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.bl-share:hover{ background:var(--blue); border-color:var(--blue); color:#fff; }
.bl-share--whatsapp:hover{ background:#25D366; border-color:#25D366; }
.bl-copied{
  position:absolute;
  bottom:calc(100% + 8px);
  left:50%;
  transform:translateX(-50%);
  padding:5px 9px;
  background:var(--ink);
  color:#fff;
  font-size:12px;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s;
}
.bl-copied.is-on{ opacity:1; }

.bl-tags{ display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none; }
.bl-tags li{ padding:6px 10px; background:var(--band); font-size:13px; }

.bl-author{ display:flex; gap:18px; align-items:flex-start; padding:24px; border:1px solid var(--line); }
.bl-author img{ flex:none; width:56px; height:56px; padding:8px; border:1px solid var(--line); background:#fff; object-fit:contain; }
.bl-author-name{ margin:0 0 4px; font-family:var(--font-display); font-weight:600; font-size:17px; }
.bl-author-text{ margin:0; font-size:15px; line-height:1.6; color:var(--muted); }
.bl-author-text a{ color:var(--blue); }

/* what to read next */
.bl-related{ padding:var(--sec-pad) 0; background:var(--band); }
.bl-related-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:clamp(26px,3vw,44px); }
.bl-related-title{ margin:0; font-size:clamp(28px,3vw,44px); font-weight:600; letter-spacing:-.02em; }
.bl-more{ font-family:var(--font-display); font-weight:600; color:var(--ink); text-decoration:none; border-bottom:1px solid currentColor; }
.bl-more:hover{ color:var(--blue); }

/* ---------- the band at the foot ---------- */
.bl-cta{ padding:clamp(56px,6vw,96px) 0; background:var(--blue); color:#fff; }
.bl-cta-inner{ display:grid; grid-template-columns:minmax(0,1.4fr) auto; gap:clamp(28px,4vw,64px); align-items:center; }
.bl-cta-title{ margin:0; max-width:22ch; font-size:clamp(28px,3.2vw,46px); font-weight:600; line-height:1.1; letter-spacing:-.02em; color:#fff; }
.bl-cta-text{ max-width:56ch; margin:16px 0 0; font-size:17px; line-height:1.6; color:rgba(255,255,255,.82); }
.bl-cta-actions{ display:flex; flex-wrap:wrap; gap:12px; }
.bl-cta .pill--solid{ background:#fff; color:var(--ink); border-color:#fff; }
.bl-cta .pill--solid .pill-arrow{ background:var(--ink); color:#fff; }
.bl-cta .pill--solid:hover{ background:var(--accent); border-color:var(--accent); color:#fff; }
.bl-cta .pill--outline{ background:transparent; color:#fff; border-color:rgba(255,255,255,.6); }
.bl-cta .pill--outline .pill-arrow{ background:#fff; color:var(--ink); }
.bl-cta .pill--outline:hover{ border-color:#fff; background:rgba(255,255,255,.08); color:#fff; }

/* ---------- smaller screens ---------- */
@media (max-width:1100px){
  .bl-post-layout{ grid-template-columns:minmax(0,1fr); gap:0; }
  .bl-post-main{ max-width:none; }
  .bl-toc{ position:static; margin-bottom:36px; padding:18px 20px; background:var(--band); }
  .bl-toc-head{ margin-bottom:0; display:flex; justify-content:space-between; align-items:center; }
  .bl-toc-head::after{ content:"+"; font-size:22px; font-weight:400; line-height:1; }
  .bl-toc-box[open] .bl-toc-head{ margin-bottom:12px; }
  .bl-toc-box[open] .bl-toc-head::after{ content:"−"; }
}
@media (max-width:1024px){
  .bl-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .bl-card--feature{ grid-template-columns:minmax(0,1fr); }
  .bl-cta-inner{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:640px){
  .bl-grid{ grid-template-columns:minmax(0,1fr); }
  .bl-prose{ font-size:17px; }
  .bl-summary, .bl-note, .bl-tip{ padding:18px 18px; }
  .bl-author{ flex-direction:column; }
  .bl-related-head{ flex-direction:column; align-items:flex-start; }
}
@media (prefers-reduced-motion:reduce){
  .bl-card-shot img{ transition:none; }
  .bl-card:hover .bl-card-shot img{ transform:none; }
}

/* on a phone, each table row becomes a small card, every value labelled */
@media (max-width:640px){
  .bl-table{ overflow:visible; }
  .bl-prose table{ min-width:0; font-size:15px; }
  .bl-prose thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .bl-prose table,
  .bl-prose tbody,
  .bl-prose tr,
  .bl-prose td{ display:block; width:100%; }
  .bl-prose tr{ margin-bottom:12px; border:1px solid var(--line); border-top:3px solid var(--blue); }
  .bl-prose tbody tr:nth-child(even) td{ background:none; }
  .bl-prose td{ display:flex; gap:12px; justify-content:space-between; padding:10px 14px; border-bottom:1px solid var(--line); text-align:right; }
  .bl-prose td:last-child{ border-bottom:0; }
  .bl-prose td::before{ content:attr(data-label); flex:none; max-width:45%; font-family:var(--font-display); font-weight:600; font-size:13px; text-align:left; color:var(--muted); }
  .bl-prose td[data-label=""]::before{ content:none; }
  .bl-prose td:first-child{ background:var(--blue-soft); font-family:var(--font-display); font-weight:600; text-align:left; }
  .bl-prose td:first-child::before{ content:none; }
  .bl-prose td strong{ white-space:normal; }
}