/* =========================================================================
   Vahan — Blog Post (individual article)
   Figma: JmFGyR5BxquecSttAjGEsh  ·  node 1595:424  ·  1920 × 8035

   Loads on top of styles.css. The nav, hero glows, header wave, CTA card and
   footer are the shared site pieces; everything below is the article layout —
   a 986 px content column at x=244 with a 398 px sticky-feeling rail at
   x=1282, exactly as the design places them.

   The masthead (title, hero image, byline, rail) keeps the design's absolute
   coordinates because it is identical on every article. Everything from the
   Key Takeaways card down lives inside `.bp-flow`, a normal-flow column, so
   articles of any length lay out correctly — a page of baked `top` values
   only ever describes one article.
   ========================================================================= */

.page{ height:auto; }

/* ===================== HERO ===================== */
.bp-title{
  position:absolute;
  left:374px; top:176px;
  width:1173px; height:142px;
  display:flex; flex-direction:column; justify-content:center;
  font-family:var(--display);
  font-weight:500;
  font-size:58px;
  line-height:normal;
  text-align:center;
  color:#000;
}

.bp-hero-img{
  position:absolute;
  left:242px; top:361px;
  width:1437px; height:869px;
  border-radius:16px;
  overflow:hidden;
}
.bp-hero-img img{ width:100%; height:100%; object-fit:cover; }

/* ===================== BYLINE ===================== */
.bp-byline{
  position:absolute;
  left:243px; top:1265px;
  width:415px; height:72.5769px;
  display:flex; align-items:center; gap:16px;
}
.bp-byline-avatar{
  width:65.423px; height:65.423px;
  flex:none;
  border-radius:50%;
  background:#979797;
  object-fit:cover;
}
.bp-byline-text{ display:flex; flex-direction:column; justify-content:center; gap:4px; }
.bp-byline-name{
  width:138px;
  font-size:16px;
  line-height:normal;
  color:#000;
}
.bp-byline-name span{ color:#585858; }
.bp-byline-dates{
  padding-top:3.25px;
  font-size:16px;
  line-height:normal;
  color:#585858;
  white-space:pre;
}

/* ===================== RIGHT RAIL ===================== */
/* the three rail cards stack in flow inside one absolutely-placed column, so
   a contents list that runs to ten entries pushes the promo card down instead
   of being covered by it */
.bp-rail{
  position:absolute;
  left:1282px; top:1267px;
  width:398px;
}

/* ===================== SUMMARIZE WITH ===================== */
.bp-summarize{
  width:398px; height:69px;
  background:rgba(254,126,9,.11);
  border-radius:8px;
  display:flex; align-items:center; justify-content:center; gap:41px;
}
.bp-summarize-label{
  font-size:18px;
  line-height:23.057px;
  color:#000;
  white-space:nowrap;
}
.bp-ai-list{ display:flex; align-items:stretch; gap:12px; }
.bp-ai{
  display:flex;
  padding:.692px;
  border-radius:6.922px;
  background:#ebebeb;
  transition:transform .2s ease;
}
.bp-ai:hover{ transform:translateY(-2px); }
/* ChatGPT's chip carries the multi-stop gradient rim from the design */
.bp-ai-gpt{
  background-image:linear-gradient(127.588deg, rgb(0,209,255) 6.39%, rgb(131,56,236) 29.65%, rgb(251,86,7) 64.76%, rgb(255,190,11) 89.79%);
}
.bp-ai-inner{
  display:flex; align-items:center;
  padding:3.461px 4.845px;
  border-radius:6.23px;
  background:#fff;
}
.bp-ai-inner img{ width:20.766px; height:20.766px; }

/* ===================== TABLE OF CONTENTS ===================== */
.bp-toc{
  margin-top:26px;      /* 1362 - 1336 */
  width:398px;
  border-radius:8px;
}
.bp-toc-head{
  height:55.6px;
  padding:4px 16px;
  background:#fde9d7;
  border-radius:8px;
  display:flex; align-items:center; justify-content:center; gap:148px;
  cursor:pointer;
}
.bp-toc-title{
  font-size:18px;
  line-height:24px;
  color:#000;
  white-space:nowrap;
}
.bp-toc-chev{ width:24px; height:24px; flex:none; transition:transform .3s ease; }
.bp-toc.is-closed .bp-toc-chev{ transform:rotate(180deg); }

/* the design's 408 px box fits the eight-entry contents page; longer articles
   run to ten entries, so the box hugs its list and `max-height` carries the
   collapse animation instead of a fixed height that would clip it */
.bp-toc-body{
  max-height:900px;
  padding:15px 10px 28px;
  border:1px solid #ffdfc3;
  border-radius:0 0 6px 6px;
  display:flex; align-items:flex-start; justify-content:center;
  overflow:hidden;
  transition:max-height .3s ease, padding .3s ease, opacity .3s ease;
}
.bp-toc.is-closed .bp-toc-body{
  max-height:0;
  padding-top:0; padding-bottom:0;
  border-width:0 1px;
  opacity:0;
}
.bp-toc-list{
  width:320px;
  list-style:disc;
  font-family:var(--ui);
  font-size:14px;
  color:#4d4d4d;
}
.bp-toc-list li{ margin-left:21px; line-height:28px; }
.bp-toc-list a{ color:inherit; text-decoration:none; transition:color .2s ease; }
.bp-toc-list a:hover{ color:var(--orange); }

/* ===================== SIDE CTA CARD ===================== */
.bp-side{
  position:relative;
  margin-top:26px;
  width:398px; height:460px;
}
.bp-side-bg{ position:absolute; inset:0; width:398px; height:460px; }
.bp-side-title{
  position:absolute;
  left:81px; top:79px;              /* 1363-1282 · 1933-1854 */
  width:235px; height:187px;
  display:flex; flex-direction:column; justify-content:center;
  font-family:var(--display);
  font-weight:500;
  font-size:36px;
  line-height:46.608px;
  text-align:center;
  color:#fff;
}
.bp-side-title b{ font-weight:700; }
.bp-side-btn{
  position:absolute;
  left:118px; top:308px;            /* 1400-1282 · 2162-1854 */
  width:161px; height:56px;
  display:flex; align-items:center; justify-content:center;
  border-radius:16px;
  background:#fff;
  filter:drop-shadow(0 0 1px rgba(128,115,115,.23));
  font-weight:600;
  font-size:19.192px;
  line-height:normal;
  letter-spacing:-.3646px;
  color:#000;
  text-decoration:none;
  white-space:nowrap;
  transition:transform .2s ease;
}
.bp-side-btn:hover{ transform:translateY(-2px); }

/* ===================== ARTICLE BODY ===================== */
.bp-article{
  margin:44px 0 0 244px;
  width:986px;
}
.bp-article > * + *{ margin-top:40px; }
.bp-article > .bp-h2{ margin-top:64px; }
.bp-article > .bp-h2:first-child{ margin-top:0; }
.bp-article > .bp-h2 + *{ margin-top:36px; }

.bp-h2{
  font-family:var(--display);
  font-weight:500;
  font-size:32px;
  line-height:1.25;
  color:#000;
  scroll-margin-top:110px;
}
.bp-p{
  font-family:var(--ui);
  font-size:18px;
  line-height:32px;
  color:#4d4d4d;
}
.bp-p b{ font-weight:600; color:#000; }
.bp-ul{
  list-style:disc;
  font-family:var(--ui);
  font-size:18px;
  color:#4d4d4d;
}
.bp-ul li{ margin-left:27px; line-height:32px; }
.bp-ul li + li{ margin-top:10px; }
.bp-ul li b{ font-weight:600; color:#000; }

/* numbered how-to steps */
.bp-ol{
  list-style:decimal;
  font-family:var(--ui);
  font-size:18px;
  color:#4d4d4d;
}
.bp-ol li{ margin-left:27px; line-height:32px; }
.bp-ol li + li{ margin-top:10px; }

/* a numbered sub-heading inside a section, e.g. "1. Weather aur Fatigue" */
.bp-h3{
  font-family:var(--body);
  font-weight:600;
  font-size:22px;
  line-height:32px;
  color:#000;
}
.bp-article > .bp-h3{ margin-top:36px; }
.bp-article > .bp-h3 + *{ margin-top:14px; }

/* ---------- key takeaways ---------- */
/* the masthead above is absolutely positioned, so this is the page's first
   in-flow box — the margin drops it onto its Figma coordinate and everything
   after it simply flows */
.bp-takeaways{
  margin:1362px 0 0 244px;
  width:986px; min-height:438px;
  padding:30px 41px;
  border-radius:21px;
  box-shadow:0 4px 0 0 #f97316;
  display:flex; flex-direction:column; justify-content:center;
  background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 986 438' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%25' width='100%25' fill='url(%23g)' opacity='0.24'/><defs><radialGradient id='g' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(0.0000025011 42.35 -95.336 0.0000022333 493 14.5)'><stop stop-color='rgba(249,115,22,0)' offset='0'/><stop stop-color='rgba(251,150,80,0.25)' offset='0.25'/><stop stop-color='rgba(252,185,139,0.5)' offset='0.5'/><stop stop-color='rgba(254,220,197,0.75)' offset='0.75'/><stop stop-color='rgb(255,255,255)' offset='1'/></radialGradient></defs></svg>");
  background-size:100% 100%;
}
.bp-takeaways-inner{ display:flex; flex-direction:column; gap:26px; }
.bp-takeaways-head{ display:flex; align-items:center; gap:20px; }
.bp-takeaways-dot{
  width:9px; height:9px;
  flex:none;
  border-radius:50%;
  background:var(--orange);
}
.bp-takeaways-head p{
  font-family:var(--display);
  font-weight:500;
  font-size:24px;
  line-height:32px;
  color:#000;
  white-space:nowrap;
}
.bp-takeaways-list{
  width:867px;
  list-style:disc;
  font-size:18px;
  color:#4d4d4d;
}
.bp-takeaways-list li{ margin-left:27px; line-height:32px; }
.bp-takeaways-list li + li{ margin-top:32px; }

/* ---------- data tables ---------- */
/* the wrapper is what carries the canvas coordinate; below the breakpoint it
   becomes the horizontal scrollport so the 987 px grid stays readable */
.bp-table-wrap{
  margin-left:-1px;
  width:987px;
}
.bp-table{
  width:987px;
  border-collapse:collapse;
  table-layout:fixed;
  background:#fff;
  text-align:left;
}
.bp-table th,
.bp-table td{
  border:1px solid #c7bcb4;
  padding-left:25px;
  font-family:var(--body);
  font-weight:500;
  line-height:32px;
  vertical-align:middle;
}
.bp-table th{
  height:57px;
  background:#fde9d7;
  font-size:18px;
  color:#000;
}
.bp-table td{
  height:60.2px;
  font-size:16px;
  color:#4d4d4d;
}

/* ===================== FAQs ===================== */
/* copy rail on the left at x=243, accordion on the right at x=603 */
.bp-faq-sec{
  margin:88px 0 0 243px;
  width:987px;
  display:flex; align-items:flex-start;
}
.bp-faq-side{
  flex:none;
  width:360px;          /* 603 - 243 */
  padding-right:15px;
}
.bp-faq-title{
  width:295px;
  font-family:var(--display);
  font-weight:500;
  font-size:32px;
  line-height:39px;
  color:#000;
}
.bp-faq-sub{
  margin-top:30px;
  width:345px;
  font-size:18px;
  line-height:32px;
  color:#4d4d4d;
}

.bp-faqs{
  flex:none;
  width:627px;
  display:flex; flex-direction:column; gap:18px;
}
.bp-faq{
  padding:24px;
  border:1px solid transparent;
  border-radius:8px;
  background:#fff1e4;
  cursor:pointer;
}
.bp-faq.is-open{ border-color:#f97619; }

.bp-faq-q{
  display:flex; align-items:center; gap:20px;
}
.bp-faq-q p{
  flex:1;
  font-weight:500;
  font-size:18px;
  line-height:normal;
  letter-spacing:-.198px;
  color:rgba(0,0,0,.8);
}
.bp-faq.is-open .bp-faq-q p{ font-weight:600; }

/* the design draws the toggle as a 19 × 2 bar — a second, rotated bar makes
   the closed "+" and folds away when the panel opens */
.bp-faq-icon{ position:relative; width:24px; height:24px; flex:none; }
.bp-faq-icon::before,
.bp-faq-icon::after{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:19px; height:2px;
  border-radius:99px;
  background:var(--brown);
  transform:translate(-50%,-50%);
  transition:transform .25s ease, opacity .25s ease;
}
.bp-faq-icon::after{ transform:translate(-50%,-50%) rotate(90deg); }
.bp-faq.is-open .bp-faq-icon::after{ transform:translate(-50%,-50%); opacity:0; }

.bp-faq-a{
  max-height:0;
  overflow:hidden;
  opacity:0;
  transition:max-height .3s ease, opacity .3s ease, margin-top .3s ease;
}
.bp-faq.is-open .bp-faq-a{
  max-height:200px;
  margin-top:31px;
  opacity:1;
}
.bp-faq-a p{
  width:505px;
  font-size:18px;
  line-height:normal;
  letter-spacing:-.198px;
  color:rgba(0,0,0,.8);
}

/* ===================== RELATED BLOGS ===================== */
.bp-related{
  margin:100px 0 0 241px;
  width:1439px;
}
.bp-related-head{
  margin-left:3px;      /* the heading sits on the 244 text column */
  width:1436px;
  display:flex; align-items:center; justify-content:space-between;
}
.bp-related-cards{
  margin-top:44px;
  display:flex; gap:24px;
}
.bp-related-title{
  font-family:var(--display);
  font-weight:500;
  font-size:36px;
  line-height:44px;
  color:#000;
}
.bp-related-all{
  flex:none;
  height:29px;
  display:flex; align-items:center; gap:7px;
  font-family:var(--ui);
  font-size:24px;
  line-height:normal;
  color:#4d4d4d;
  text-decoration:none;
  white-space:nowrap;
  transition:color .2s ease;
}
.bp-related-all:hover{ color:var(--orange); }
.bp-related-all img{ width:21px; height:21px; flex:none; }

/* the related cards are the blog listing's post card, verbatim */
.post-card{
  position:relative;
  flex:none;
  width:463px; height:433.5157px;
  background:var(--peach);
  border-radius:7.336px;
  padding:26.2978px 27.0947px;
  display:block;
  text-decoration:none;
  color:inherit;
  cursor:pointer;
  transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s cubic-bezier(.16,1,.3,1);
}
.post-card:hover{
  transform:translateY(-8px);
  box-shadow:0 16px 36px rgba(249,118,25,.28), 0 4px 14px rgba(255,156,56,.2);
}
.post-card:hover .post-title{ color:#f97316; }
.post-img{
  width:409px; height:223px;
  border-radius:8.006px;
  object-fit:cover;
  transition:transform .3s ease;
}
.post-card:hover .post-img{ transform:scale(1.02); }
.post-text{
  margin-top:19.1263px;
  width:409px; height:94px;
  display:flex; flex-direction:column; justify-content:center; gap:14.673px;
}
.post-title{
  font-family:var(--display);
  font-weight:400;
  font-size:19.126px;
  line-height:normal;
  color:#000;
  transition:color .2s ease;
}
.post-desc{
  font-weight:300;
  font-size:16px;
  line-height:normal;
  color:#000;
}
.post-meta{
  position:absolute;
  left:27.0947px; right:27.0947px; bottom:26.2978px;
  height:24px;
  display:flex; align-items:center; justify-content:space-between;
}
.post-by{ display:flex; align-items:center; gap:7.336px; }
.post-avatar{ width:23.84px; height:23.84px; border-radius:50%; object-fit:cover; }
.post-author{
  font-weight:600;
  font-size:7.336px;
  line-height:normal;
  color:#000;
}
.post-date{
  font-size:10px;
  line-height:normal;
  white-space:nowrap;
  color:#000;
}

/* ===================== CTA ===================== */
/* a centred column, so a CTA line that wraps grows the card instead of
   colliding with the button — the single-line case lands on the design's
   96 / 215 coordinates exactly */
.cta{
  position:relative;
  left:auto; top:auto;
  margin:116px 0 0 243px;
  width:1437px; min-height:393px; height:auto;
  padding:24px 138px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:51px;
}
.cta-glow{
  position:absolute;
  left:236px; top:1px;        /* 479-243 · 6912-6911 */
  width:963px; height:963px;
  pointer-events:none;
}
.cta-bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.cta-text{
  position:relative;
  left:auto; top:auto;
  width:100%; max-width:1161px; height:auto;
}
.cta-btn{
  position:relative;
  left:auto; top:auto;
  flex:none;
  width:228.6363px; height:81.7851px;
}

/* ===================== FOOTER ===================== */
.footer{
  position:relative;
  left:auto; top:auto;
  margin-top:131px;
}