/* STEP 1 — desktop article width only.
   Content spans from the left edge of the CX logo to the right edge of "Schedule a Call"
   (the header's inner width). "In This Article" sits in the left margin when there is
   room (>= 1610px), otherwise inside the span on the left. Desktop only (>= 1060px). */

@media (min-width: 1060px) {
  body.insight-standard-reader {
    --cx-hpad: clamp(22px, 2.2vw, 42px);
    --cx-span: calc(100vw - 17px - 2 * var(--cx-hpad));
    --cx-rail: 236px;
    --cx-rail-gap: 32px;
  }
}
@media (min-width: 1230px) {
  body.insight-standard-reader { --cx-span: calc(1160px - 2 * var(--cx-hpad)); }
}

@media (min-width: 1060px) {
  body.insight-standard-reader .insight-opening,
  body.insight-standard-reader .insight-guide-intro,
  body.insight-standard-reader .insight-author-wrap {
    width: var(--cx-span);
    max-width: none;
    margin-left: calc(50% - var(--cx-span) / 2);
    margin-right: 0;
  }
  /* opening row keeps its original two-column design, just wider */
  body.insight-standard-reader .insight-opening-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 40px;
    align-items: center;
  }
  body.insight-standard-reader .insight-opening-copy > p {
    max-width: 44ch;
    font-size: clamp(17px, 1.3vw, 19.5px);
  }

  body.insight-standard-reader .insight-reading-shell {
    width: var(--cx-span);
    max-width: none;
    margin-left: calc(50% - var(--cx-span) / 2);
    margin-right: 0;
    grid-template-columns: var(--cx-rail) minmax(0, 1fr);
    gap: var(--cx-rail-gap);
    align-items: start;
  }
  body.insight-standard-reader .insight-reader-nav {
    grid-column: 1;
    width: 100%;
    justify-self: stretch;
  }
  body.insight-standard-reader .insight-topic-stack {
    grid-column: 2;
    width: 100%;
    max-width: none;
  }
}

@media (min-width: 1610px) {
  body.insight-standard-reader {
    --cx-rail-gap: 24px;
    --cx-rail: min(280px, calc((100vw - 17px - var(--cx-span)) / 2 - var(--cx-rail-gap) - 20px));
  }
  body.insight-standard-reader .insight-reading-shell {
    width: calc(var(--cx-span) + var(--cx-rail) + var(--cx-rail-gap));
    margin-left: calc(50% - var(--cx-span) / 2 - var(--cx-rail) - var(--cx-rail-gap));
  }
}

/* STEP 2 — hero: compact centred masthead (option B, chosen by Ritwik 3 Oct).
   Revised: breadcrumb and category tag sit centred directly above the title they label. */
@media (min-width: 1060px) {
  body.insight-standard-reader .art-hero { padding-top: 112px; }
  body.insight-standard-reader .art-hero > .wrap {
    max-width: var(--cx-span);
    padding: 0;
    text-align: center;
  }
  body.insight-standard-reader .art-hero .crumbs {
    justify-content: center;
    margin: 0 0 18px;
  }
  body.insight-standard-reader .art-hero .art-hero-in {
    max-width: none;
    width: 100%;
    margin-top: 0 !important;
    text-align: center;
  }
  body.insight-standard-reader .art-hero .art-kicker {
    margin: 0 auto 16px;
  }
  body.insight-standard-reader .art-hero h1 {
    margin: 0 auto !important;
    max-width: none;
    width: 100%;
    font-size: clamp(36px, 2.75vw, 44px);
    line-height: 1.12;
    letter-spacing: -.03em;
  }
  body.insight-standard-reader .art-hero .lead {
    max-width: 920px !important;
    margin: 16px auto 0 !important;
    font-size: 19px;
    line-height: 1.6;
    color: #BCC8D9;
  }
  body.insight-standard-reader .art-hero .art-meta {
    max-width: none;
    width: 100%;
    margin: 28px 0 0;
    padding-top: 18px;
    border-top: 1px solid #263244;
    justify-content: center;
    gap: 14px;
    font-size: 12.5px;
    color: #91A3BD;
  }
}

/* STEP 3 — Design Context + Key points (approved by Ritwik 3 Oct).
   Design Context starts level with the top of the photo, in the site's body text size
   (15.5px, as on the homepage). An optional "Key points" box fills the space beneath it;
   its bottom edge lines up with the bottom of the photo. */
.cx-keypoints {
  margin: 18px 0 0;
  padding: 18px 20px;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(130, 180, 255, .07), rgba(130, 180, 255, .02));
}
.cx-keypoints-label {
  display: block;
  margin: 0 0 10px;
  color: var(--acc);
  font-family: var(--font-m);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.cx-keypoints ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cx-keypoints li {
  position: relative;
  margin: 0;
  padding-left: 20px;
  color: var(--tx-2);
  font-family: var(--font-b);
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.6;
}
.cx-keypoints li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: calc((15.5px * 1.6 - 6px) / 2);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--acc);
}

@media (min-width: 1060px) {
  body.insight-standard-reader .insight-opening-row {
    align-items: start;
  }
  body.insight-standard-reader .insight-opening-copy > p {
    max-width: none;
    color: var(--tx-2);
    font-size: 15.5px;
    font-weight: 500;
    line-height: 1.75;
    letter-spacing: 0;
  }
  body.insight-standard-reader .insight-opening-copy > p strong { color: var(--tx); }
  body.insight-standard-reader .insight-opening-row.has-keypoints {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    grid-template-rows: auto 1fr;
    column-gap: 40px;
    row-gap: 0;
  }
  body.insight-standard-reader .insight-opening-row.has-keypoints > .insight-opening-copy { grid-column: 1; grid-row: 1; }
  body.insight-standard-reader .insight-opening-row.has-keypoints > .cx-keypoints {
    grid-column: 1; grid-row: 2; align-self: end; margin-top: 22px;
  }
  body.insight-standard-reader .insight-opening-row.has-keypoints > .insight-opening-media {
    grid-column: 2; grid-row: 1 / 3; align-self: stretch; height: 100%; aspect-ratio: auto; min-height: 0;
  }
  body.insight-standard-reader .insight-opening-row.has-keypoints > .insight-opening-media img {
    height: 100%; object-fit: cover;
  }
}

/* STEP 3b — one text system for the opening block (Ritwik 3 Oct: heights/styles must match).
   Labels:  JetBrains Mono 12px / 18px, 700, .16em, uppercase, blue, plain (no pill), 12px below.
   Text:    Manrope 15.5px / 25.1px (1.62 — same as the article sections), 500, #C3CFE2.
   Boxes:   Key points and Short answer share one box: 1px border, 3px blue left edge,
            14px radius, 20px 24px padding. Design Context uses the same 3px blue left edge. */
body.insight-standard-reader .insight-opening-kicker,
body.insight-standard-reader .cx-keypoints-label,
body.insight-standard-reader .insight-opening-answer .art-callout-label {
  display: block;
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--acc);
  font-family: var(--font-m);
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: 1;
}
body.insight-standard-reader .insight-opening-copy > p,
body.insight-standard-reader .cx-keypoints li,
body.insight-standard-reader .insight-opening-answer .art-callout p {
  color: var(--tx-2);
  font-family: var(--font-b);
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.62;
  letter-spacing: 0;
}
body.insight-standard-reader .insight-opening-copy > p strong { color: var(--tx); font-weight: 700; }
body.insight-standard-reader .insight-opening-answer .art-callout p > strong:first-child { color: var(--acc); font-weight: 700; }
body.insight-standard-reader .cx-keypoints li::before { top: calc((15.5px * 1.62 - 6px) / 2); }
body.insight-standard-reader .cx-keypoints ul { gap: 8px; }

body.insight-standard-reader .cx-keypoints,
body.insight-standard-reader .insight-opening-answer .art-callout {
  padding: 20px 24px 20px 21px;  /* 3px edge + 21px = text starts where Design Context text starts */
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--acc);
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(130, 180, 255, .07), rgba(130, 180, 255, .02));
  box-shadow: none;
}
body.insight-standard-reader .insight-opening-copy {
  padding-left: 21px;
  border-left: 3px solid var(--acc);
}

/* STEP 4 — "In This Article" rail wider (Ritwik 3 Oct): 236 -> 264px inside the span (1060-1609px),
   up to 300px in the left margin (>=1610px, outer gap 10px, inner gap 18px).
   Mobile: the sticky chapter bar and its dropdown were see-through; now opaque, above content. */
@media (min-width: 1060px) {
  body.insight-standard-reader { --cx-rail: 264px; --cx-rail-gap: 28px; }
}
@media (min-width: 1610px) {
  body.insight-standard-reader {
    --cx-rail-gap: 18px;
    --cx-rail: min(300px, calc((100vw - 17px - var(--cx-span)) / 2 - var(--cx-rail-gap) - 10px));
  }
}
@media (max-width: 1059px) {
  body.insight-standard-reader .insight-reader-nav.is-condensed {
    z-index: 60;
    background: linear-gradient(160deg, #17253F, #0B1426);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
}

/* STEP 5 — "Ready to Price Your Project?" card: same colour as the page background (Ritwik 3 Oct).
   Only the fill changes: no blue tint, no glow, no drop shadow. Border, corners, text and buttons unchanged. */
body.insight-standard-reader .cta-band {
  background: transparent;
  box-shadow: none;
}
body.insight-standard-reader .cta-band::before { display: none; }

/* STEP 6 — "In This Article" menu wider again (Ritwik 3 Oct: "increase it more").
   1060-1609px: 288px inside the span. >= 1610px: 340px; when the left margin is too narrow for it,
   the text column gives up only the missing width (its right edge stays on the Schedule a Call line). */
@media (min-width: 1060px) {
  body.insight-standard-reader { --cx-rail: 288px; --cx-rail-gap: 28px; }
}
@media (min-width: 1610px) {
  body.insight-standard-reader { --cx-rail: 340px; --cx-rail-gap: 24px; }
  body.insight-standard-reader .insight-reading-shell {
    --cx-sl: max(calc(16px - (100vw - 17px) / 2 + 50%), calc(50% - var(--cx-span) / 2 - var(--cx-rail) - var(--cx-rail-gap)));
    margin-left: var(--cx-sl);
    width: calc(50% + var(--cx-span) / 2 - var(--cx-sl));
  }
}

/* STEP 7 — one text system inside the article sections (approved by Ritwik 3 Oct).
   Body 15.5px/1.62/500 everywhere (FAQ answers and callouts included); dense text 14.5px/500 (tables, price cards);
   labels .16em; bold = blue when it opens a bullet/paragraph (strong.cx-lead, set by reader-standard.js), white otherwise. */
@media (min-width: 1060px) {
  body.insight-standard-reader .insight-topic-stack .faq-ai p,
  body.insight-standard-reader .insight-topic-stack .art-callout p {
    font-size: 15.5px; line-height: 1.62; font-weight: 500; color: var(--tx-2);
  }
  body.insight-standard-reader .insight-topic-stack .price-table td { font-weight: 500; }
  body.insight-standard-reader .insight-topic-stack .price-card-desc { font-size: 14.5px; line-height: 1.6; font-weight: 500; }
  body.insight-standard-reader .insight-topic-stack .price-card-when { font-size: 13.5px; line-height: 1.55; }
  body.insight-standard-reader .insight-topic-stack .price-card-label,
  body.insight-standard-reader .insight-topic-stack .price-table th { letter-spacing: .16em; }
}
body.insight-standard-reader .insight-topic-stack strong { color: var(--tx); font-weight: 700; }
body.insight-standard-reader .insight-topic-stack .insight-topic-block strong:not(.cx-lead) { color: var(--tx); }
body.insight-standard-reader .insight-topic-stack strong.cx-lead,
body.insight-standard-reader .insight-topic-stack .insight-topic-block strong.cx-lead { color: var(--acc); }

/* STEP 8 — author box, closing card and Keep Reading (approved by Ritwik 3 Oct). Desktop only.
   Closing card + Keep Reading on the logo / Schedule a Call lines; divider under the card removed;
   author photo 160px centred with the text, role in label style, bio = section text;
   Keep Reading cards = section-box colour and corners, descriptions 14.5px/500. */
@media (min-width: 1060px) {
  body.insight-standard-reader .cta-band,
  body.insight-standard-reader .art-rel {
    box-sizing: border-box; width: var(--cx-span); max-width: none;
    margin-left: calc(50% - var(--cx-span) / 2); margin-right: 0;
  }
  body.insight-standard-reader .art-rel { border-top: 0; }
  body.insight-standard-reader .art-bio-row { align-items: center; }
  body.insight-standard-reader .art-bio-row .art-bio-photo { width: 160px; height: 160px; }
  body.insight-standard-reader .art-bio-role {
    font-family: var(--font-m); font-size: 12px; line-height: 18px; font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase; color: var(--acc);
  }
  body.insight-standard-reader .art-bio-desc { font-size: 15.5px; line-height: 1.62; font-weight: 500; color: var(--tx-2); }
  body.insight-standard-reader .art-bio-link { font-size: 14.5px; }
  body.insight-standard-reader .art-rel-card {
    border-radius: 16px;
    background: linear-gradient(160deg, rgba(255,255,255,.067), rgba(255,255,255,.04));
  }
  body.insight-standard-reader .art-rel-kicker { letter-spacing: .16em; }
  body.insight-standard-reader .art-rel-desc { font-size: 14.5px; line-height: 1.6; font-weight: 500; }
}

/* STEP 9 — article photo on phones and tablets (Ritwik 3 Oct, option A).
   Below 1060px the photo comes first, right under the byline; phones show the full 4:3 photo (no crop);
   corners 14px like the boxes around it. Desktop unchanged. */
@media (max-width: 1059px) {
  body.insight-standard-reader .insight-opening-row { display: flex; flex-direction: column; }
  body.insight-standard-reader .insight-opening-media { order: -1; border-radius: 14px; margin: 0 0 22px; }
  body.insight-standard-reader .insight-opening-media img { width: 100%; height: 100%; object-fit: cover; }
}
@media (max-width: 640px) {
  body.insight-standard-reader .insight-opening-media { aspect-ratio: 4 / 3; }
}

/* STEP 10 — phones (<=639px): "In This Article" is always a one-line dropdown that shows the current chapter;
   tap it to open the full list (Ritwik 5 Oct). A chevron shows it opens; it flips when open. */
@media (max-width: 639px) {
  body.insight-standard-reader .insight-reader-nav.is-condensed .insight-reader-current {
    grid-template-columns: auto minmax(0, 1fr) 14px;
  }
  body.insight-standard-reader .insight-reader-nav.is-condensed .insight-reader-current::after {
    content: "";
    width: 8px;
    height: 8px;
    margin-top: -4px;
    justify-self: end;
    border-right: 2px solid var(--acc);
    border-bottom: 2px solid var(--acc);
    transform: rotate(45deg);
    transition: transform .2s ease, margin .2s ease;
  }
  body.insight-standard-reader .insight-reader-nav.is-condensed.is-expanded .insight-reader-current::after {
    margin-top: 4px;
    transform: rotate(-135deg);
  }
}