/* =============================================================
   Blog — /blog and /blog/<article>
   Loaded on top of styles.css. Deliberately built from parts the
   marketing pages already use: the #f9f9f9 card with a hairline
   border, the tab-bar segmented control, the orange price band and
   the same Mulish / Satoshi pairing. Nothing new is invented here.
   ============================================================= */

/* ---------------- top bar ----------------
   styles.css positions .nav absolutely inside the hero; the blog has no hero,
   so it gets its own relatively-positioned bar of the same height to sit in. */
.blog-top{
  position:relative;
  height:92px;
  background:var(--white);
  border-bottom:1px solid var(--hairline);
}
.blog-top .nav{top:25px}
.nav__links a.is-current{color:var(--orange);background-size:100% 1.5px}

@media (max-width:1024px){
  .blog-top{height:72px}
  .blog-top .nav{top:15px}
}

/* ---------------- shared page head ---------------- */
.blog-hero{padding:74px 0 0}
.blog-eyebrow{
  font-size:14px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--orange);
}
.blog-hero h1{
  margin-top:12px;
  max-width:16ch;
  font-size:60px;
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.01em;
}
.blog-hero p{
  margin-top:20px;
  max-width:62ch;
  font-size:18.5px;
  font-weight:500;
  line-height:1.6;
  color:var(--grey);
}

/* ---------------- category filter ----------------
   Same segmented control as the plan tabs, sized down. */
.blog-filters{
  position:relative;
  margin-top:44px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.chip{
  padding:10px 22px;
  border:1px solid var(--hairline);
  border-radius:65px;
  background:var(--card);
  font-family:var(--f-satoshi);
  font-size:16px;
  font-weight:500;
  letter-spacing:-.01em;
  color:var(--black);
  transition:background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.chip:hover{border-color:rgba(201,94,12,.5);color:var(--orange)}
.chip[aria-pressed="true"]{
  background:var(--orange);
  border-color:var(--orange);
  color:#fcfcfc;
}

/* ---------------- post cards ---------------- */
.posts{margin-top:28px}
.post-grid{
  margin-top:22px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
.post{
  display:flex;
  flex-direction:column;
  background:var(--card);
  border:1px solid var(--hairline);
  border-radius:10.274px;
  overflow:hidden;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);
}
.post:hover{
  transform:translateY(-4px);
  border-color:rgba(201,94,12,.55);
  box-shadow:0 18px 40px -28px rgba(32,32,32,.55);
}
.post__body{
  display:flex;
  flex-direction:column;
  flex:1;
  gap:12px;
  padding:28px 30px 30px;
}
.post__cat{
  font-size:13px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--orange);
}
.post__title{
  font-size:22px;
  font-weight:700;
  line-height:1.28;
  color:var(--black);
}
.post__excerpt{
  font-size:16px;
  font-weight:500;
  line-height:1.5;
  color:var(--grey);
}
.post__meta{
  margin-top:auto;
  padding-top:8px;
  font-size:14px;
  font-weight:600;
  color:var(--black);
  opacity:.55;
}

/* the lead post: a wide card whose left panel is typography, not a photo —
   the site has no spare imagery and stock would undercut the tone */
.post--featured{
  display:grid;
  grid-template-columns:551fr 666fr;
  gap:0;
}
.post--featured .post__plate{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:30px;
  padding:44px;
  background:var(--orange);
  color:var(--white);
}
.post__plate-tag{
  font-size:13px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  opacity:.85;
}
.post__plate-title{
  font-size:38px;
  font-weight:700;
  line-height:1.16;
  letter-spacing:-.01em;
}
.post__plate-foot{
  font-size:14px;
  font-weight:600;
  opacity:.85;
}
.post--featured .post__body{padding:44px;justify-content:center;gap:16px}
/* the plate already carries the headline — the body is the summary only */
.post__excerpt--lead{font-size:20px;line-height:1.5;color:var(--black)}
.post--featured:hover{transform:none}

.post__link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:4px;
  font-size:15px;
  font-weight:700;
  color:var(--orange);
}
.post__link span{transition:transform .3s var(--ease)}
.post:hover .post__link span{transform:translateX(4px)}

.posts-empty{
  margin-top:22px;
  padding:40px;
  text-align:center;
  color:var(--grey);
  font-size:17px;
  border:1px dashed var(--rule);
  border-radius:10.274px;
}

/* ---------------- mid-page CTA band ----------------
   The pricing bar's treatment, reused. */
.blog-cta{
  margin-top:70px;
  padding:52px 60px;
  background:var(--orange);
  border-radius:10.274px;
  color:var(--white);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
}
.blog-cta h2{
  font-size:32px;
  font-weight:700;
  line-height:1.24;
  max-width:20ch;
}
.blog-cta p{
  margin-top:10px;
  font-size:17px;
  font-weight:500;
  line-height:1.5;
  opacity:.92;
  max-width:52ch;
}
.blog-cta .btn{
  background:var(--white);
  color:var(--orange);
  flex:0 0 auto;
}
.blog-cta .btn:hover{box-shadow:0 12px 26px -12px rgba(0,0,0,.45)}

/* =============================================================
   Article
   ============================================================= */
.article{
  display:grid;
  grid-template-columns:minmax(0,1fr) 250px;
  gap:64px;
  align-items:start;
  padding-bottom:100px;
}
.crumbs{
  padding-top:44px;
  font-size:15px;
  font-weight:600;
  color:var(--grey);
}
.crumbs a{color:var(--orange)}
.crumbs span{margin:0 8px;opacity:.5}

.article__head{margin-top:26px}
.article__cat{
  font-size:13px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--orange);
}
.article h1{
  margin-top:12px;
  font-size:46px;
  font-weight:700;
  line-height:1.14;
  letter-spacing:-.012em;
  max-width:20ch;
}
.article__meta{
  margin-top:16px;
  font-size:15px;
  font-weight:600;
  color:var(--black);
  opacity:.55;
}
.article__lede{
  margin-top:26px;
  max-width:68ch;
  font-size:20px;
  font-weight:500;
  line-height:1.58;
  color:var(--black);
}

.article__body{margin-top:12px;max-width:68ch}
.article__body h2{
  margin-top:46px;
  font-size:27px;
  font-weight:700;
  line-height:1.28;
  color:var(--black);
  scroll-margin-top:40px;
}
.article__body p{
  margin-top:14px;
  font-size:17.5px;
  font-weight:500;
  line-height:1.66;
  color:#2b2b2b;
}
.article__body a{
  color:var(--orange);
  text-decoration:underline;
  text-underline-offset:2px;
}

/* FAQ */
.faq{margin-top:56px;max-width:68ch}
.faq h2{
  font-size:27px;
  font-weight:700;
  color:var(--black);
  scroll-margin-top:40px;
}
.faq dl{margin-top:20px;border-top:1px solid var(--rule)}
.faq dt{
  padding-top:22px;
  font-size:19px;
  font-weight:700;
  line-height:1.35;
  color:var(--black);
}
.faq dd{
  margin:8px 0 0;
  padding-bottom:22px;
  border-bottom:1px solid var(--rule);
  font-size:17px;
  font-weight:500;
  line-height:1.62;
  color:#2b2b2b;
}

/* closing CTA inside an article */
.article-cta{
  margin-top:52px;
  max-width:68ch;
  padding:36px 40px;
  background:var(--card);
  border:1px solid var(--hairline);
  border-left:3px solid var(--orange);
  border-radius:0 10.274px 10.274px 0;
}
.article-cta p{
  font-size:18px;
  font-weight:600;
  line-height:1.5;
  color:var(--black);
}
.article-cta .btn{margin-top:18px}

/* ---------------- sticky contents rail ---------------- */
.toc{
  position:sticky;
  top:32px;
  align-self:start;
  margin-top:44px;
  padding-left:24px;
  border-left:1px solid var(--rule);
}
.toc__title{
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--grey);
}
.toc ol{margin-top:14px;display:flex;flex-direction:column;gap:2px}
.toc a{
  display:block;
  padding:6px 0;
  font-size:14.5px;
  font-weight:500;
  line-height:1.4;
  color:var(--grey);
  transition:color .25s var(--ease);
}
.toc a:hover{color:var(--orange)}
.toc a[aria-current="true"]{color:var(--orange);font-weight:700}

/* ---------------- related ---------------- */
.related{
  margin-top:80px;
  padding-top:34px;
  border-top:1px solid var(--rule);
}
.related h2{
  font-size:14px;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--grey);
}
.related ul{
  margin-top:20px;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
}

/* =============================================================
   Responsive
   ============================================================= */
@media (max-width:1280px){
  .blog-hero h1{font-size:50px}
  .article h1{font-size:40px}
  .article{grid-template-columns:minmax(0,1fr) 220px;gap:44px}
}

@media (max-width:1024px){
  .blog-hero{padding-top:52px}
  .blog-hero h1{font-size:40px;max-width:none}
  .blog-hero p{font-size:17.5px}
  .post-grid{grid-template-columns:repeat(2,1fr)}
  .post--featured{grid-template-columns:1fr}
  .post--featured .post__plate,.post--featured .post__body{padding:32px}
  .post__plate-title{font-size:30px}
  .blog-cta{
    flex-direction:column;
    align-items:flex-start;
    padding:36px;
    margin-top:52px;
  }
  .blog-cta h2{font-size:27px;max-width:none}

  /* the rail is a desktop affordance; below this the article is a single column */
  .article{grid-template-columns:1fr;gap:0;padding-bottom:64px}
  .toc{display:none}
  .article h1{font-size:34px;max-width:none}
  .article__lede{font-size:18.5px}
  .article__body h2{margin-top:38px;font-size:24px}
  .related ul{grid-template-columns:1fr}
  .related{margin-top:56px}
}

@media (max-width:720px){
  .blog-hero{padding-top:36px}
  .blog-hero h1{font-size:32px}
  .blog-filters{margin-top:28px;gap:6px}
  .chip{padding:8px 16px;font-size:14.5px}
  .post-grid{grid-template-columns:1fr;gap:16px}
  .post__body{padding:24px}
  .post--featured .post__plate,.post--featured .post__body{padding:24px}
  .post__plate-title{font-size:25px}
  .post__title{font-size:20px}
  .blog-cta{padding:28px;margin-top:40px}
  .blog-cta h2{font-size:23px}
  .article h1{font-size:28px}
  .article__lede{font-size:17.5px}
  .article__body p,.faq dd{font-size:16.5px}
  .article__body h2,.faq h2{font-size:21px}
  .article-cta{padding:26px 24px}
  .crumbs{padding-top:28px;font-size:14px}
}

@media (prefers-reduced-motion:reduce){
  .post:hover{transform:none}
  .post:hover .post__link span{transform:none}
}

/* ---------------- byline + share (brief §6) ---------------- */
.article__meta{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline}
.share{
  margin-top:44px;display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;
  padding-top:22px;border-top:1px solid var(--rule);max-width:68ch;
}
.share__label{font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--grey)}
.share a,.share__copy{
  padding:8px 16px;border:1px solid var(--hairline);border-radius:65px;background:var(--card);
  font-family:var(--f-mulish);font-size:14px;font-weight:600;color:var(--black);cursor:pointer;
  transition:border-color .25s var(--ease),color .25s var(--ease);
}
.share a:hover,.share__copy:hover{border-color:var(--orange);color:var(--orange)}
.share__copy[data-done]{border-color:var(--orange);color:var(--orange)}

/* see the "Touch pointers" note in styles.css */
@media (hover:none){
  .post:hover{transform:none;box-shadow:none}
  .post:hover .post__link span{transform:none}
}

/* see the "Touch target sizes" note in styles.css */
@media (max-width:1024px){
  .chip{min-height:44px;display:inline-flex;align-items:center}
  .share a,.share__copy{min-height:44px;display:inline-flex;align-items:center}
}

/* same reasoning as the note at the end of legal.css */
.article__body p,.article__body li{overflow-wrap:break-word}

/* same as the breadcrumb note in pages.css — the blog defines its own .crumbs */
@media (max-width:1024px){
  .crumbs{padding-top:14px}
  .crumbs a{display:inline-block;padding:13px 0}
}

/* The category filter sets `hidden` on each card it filters out, but `.post`
   and `.post--featured` both declare a display, and an author rule beats the
   UA's `[hidden]{display:none}`. The featured article therefore stayed on
   screen under every filter — on a phone it is the first thing below the
   chips, so the filter looked broken rather than subtly wrong. */
.post[hidden],.post--featured[hidden],.post-grid li[hidden]{display:none}

/* Five categories at a 44px tap height wrap to four rows — 194px, a third of
   a 320px phone's viewport, before the first post. Shrinking the chips would
   put the targets back under the minimum, so the row scrolls sideways instead
   and stays one row tall. It bleeds to both screen edges so the cut-off chip
   on the right reads as "there is more", not as a layout error. */
@media (max-width:560px){
  .blog-filters{
    flex-wrap:nowrap;
    gap:6px;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    margin-inline:calc(var(--gutter) * -1);
    padding-inline:var(--gutter);
  }
  .blog-filters::-webkit-scrollbar{display:none}
  .chip{flex:0 0 auto;padding:10px 16px;font-size:14.5px}
}