/* ===========================================================================
   article.css · Insights article template
   Structural clone of bond.krd/blog/<uid>
   Spec: docs/research/pages/article/ (TOPOLOGY, tokens, components/*)
   Everything is scoped under main.p-article.

   The source drives its whole layout off a fluid root font-size
   (1.1111vw >= 1024, 16px 412-1023, 3.8835vw < 412) with --spacing:.0625rem,
   so every "px-15 / pt-326 / fs-46" utility is really 15/326/46 root units.
   styles.css owns :root, so this page carries its own unit token --u and
   writes every dimension as calc(N * var(--u)).
   At 1440 --u = 1px, which is the source design width.
   At 390 --u = 0.9466px, which is the spec's measured mobile scale factor.
   =========================================================================== */

main.p-article{
  --u: 1px;
  display: block;
  background: var(--paper);
  color: var(--teal);
  overflow: clip;
}
@media (max-width: 411px){ main.p-article{ --u: 0.242718vw; } }   /* 100vw/412 */
@media (min-width: 1024px){ main.p-article{ --u: 0.069444vw; } }  /* 100vw/1440 */

main.p-article section{ padding: 0; }
main.p-article a{ color: inherit; text-decoration: none; }
main.p-article p{ margin: 0; }
main.p-article .sr-only{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* SplitText holders start hidden so the mask reveal has something to do */
body.gsap main.p-article .sp{ opacity: 0; }
@media (prefers-reduced-motion: reduce){
  body.gsap main.p-article .sp{ opacity: 1 !important; }
}

/* --- grid + page padding (source .my-grid / px-15) ---------------------- */
main.p-article .g{
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: calc(10 * var(--u));
}
@media (min-width: 640px){ main.p-article .g{ column-gap: calc(12.5 * var(--u)); } }
@media (min-width: 1024px){
  main.p-article .g{ grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: calc(15 * var(--u)); }
}
main.p-article .px{ padding-left: calc(15 * var(--u)); padding-right: calc(15 * var(--u)); }

/* --- mono label role (source GT America Mono 12/14.4 uppercase) --------- */
main.p-article .m{
  font-family: var(--mono); font-weight: 400;
  font-size: calc(12 * var(--u)); line-height: 1.2;
  letter-spacing: 0; text-transform: uppercase;
}

/* ===========================================================================
   1 · ARTICLE HEAD   (source section:nth-of-type(1), h 1288 @1440)
   =========================================================================== */
main.p-article .ar-head{ padding-top: calc(148 * var(--u)); }
@media (min-width: 1024px){ main.p-article .ar-head{ padding-top: calc(326 * var(--u)); } }

main.p-article .ar-title{
  grid-column: 1 / -1;
  text-align: center;
  font-family: var(--sans); font-weight: 400;
  font-size: calc(36 * var(--u)); line-height: 1;
  /* Instrument Sans sets wider than PP Neue Montreal; pull it back so the
     title still breaks to two lines in the 935u measure */
  letter-spacing: -.02em;
}
@media (min-width: 1024px){
  main.p-article .ar-title{ grid-column: 3 / span 8; font-size: calc(46 * var(--u)); }
}

/* the framed block: 1px rules on the left and right edges only, running the
   full height of the block. The rules disappear below lg. */
main.p-article .ar-frame{
  grid-column: 1 / -1;
  padding-top: calc(20 * var(--u));
}
@media (min-width: 1024px){
  main.p-article .ar-frame{
    grid-column: 2 / -2;
    border-left: 1px solid var(--teal);
    border-right: 1px solid var(--teal);
    padding: calc(20 * var(--u)) calc(20 * var(--u)) calc(88 * var(--u));
  }
}

main.p-article .ar-meta{ display: flex; justify-content: space-between; gap: calc(20 * var(--u)); }

/* the image wrapper is narrower than its own frame and centred inside it
   (64.93vw against a 1173u frame). That inset is the head's signature. */
main.p-article .ar-hero-img{
  position: relative; overflow: hidden;
  width: 100%; aspect-ratio: 380 / 260;
  margin-top: calc(50 * var(--u));
  background: var(--paper);
}
@media (min-width: 1024px){
  main.p-article .ar-hero-img{
    width: 64.93vw; aspect-ratio: 935 / 636; margin-inline: auto;
  }
}
main.p-article canvas[data-dither]{
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; image-rendering: pixelated;
}

/* ===========================================================================
   2 · LEDE   (source section:nth-of-type(2))
   The source's indent-31vw class computes to 0px at every breakpoint, so the
   paragraph is flush left in its column. No indent is implemented here.
   =========================================================================== */
main.p-article .ar-lede{ margin: calc(50 * var(--u)) 0 calc(100 * var(--u)); }
@media (min-width: 1024px){
  main.p-article .ar-lede{ margin: calc(140 * var(--u)) 0 calc(150 * var(--u)); }
}
main.p-article .ar-lede-in{
  grid-column: 1 / -1;
  font-family: var(--sans); font-weight: 400;
  font-size: calc(30 * var(--u)); line-height: 1;
  letter-spacing: -.015em;
}
@media (min-width: 1024px){ main.p-article .ar-lede-in{ grid-column: 3 / span 8; } }

/* ===========================================================================
   3 · PROSE   (source .prose, used by the body and by key points)
   The whole article body sits in grid columns 7-10: a 460u measure at x=727.
   The left half of the page stays empty. That is the page's strongest
   layout decision, so it is reproduced exactly.
   =========================================================================== */
main.p-article .ar-body{ margin: calc(100 * var(--u)) 0; }

main.p-article .prose{
  grid-column: 1 / -1;
  font-family: var(--sans);
}
@media (min-width: 1024px){ main.p-article .prose{ grid-column: 7 / span 4; } }

main.p-article .prose > *:first-child{ margin-top: 0; }

main.p-article .prose h2{
  font-family: var(--sans); font-weight: 500;
  font-size: calc(24 * var(--u)); line-height: 1.2;
  letter-spacing: -.01em; color: var(--teal);
  margin: calc(100 * var(--u)) 0 calc(50 * var(--u));
}

main.p-article .prose p{
  font-weight: 400;
  font-size: calc(18 * var(--u)); line-height: 1.3;
  margin-bottom: 1.25em;
}
@media (min-width: 1024px){
  main.p-article .prose p{ font-size: calc(16 * var(--u)); }
}

/* --- unordered lists: no painted marker, a 9x11 glyph instead ----------- */
main.p-article .prose ul{
  list-style: none; padding: 0;
  margin: calc(20 * var(--u)) 0;
}
main.p-article .prose ul li{
  display: flex; align-items: flex-start; gap: calc(2 * var(--u));
  font-weight: 400;
  font-size: calc(16 * var(--u)); line-height: 1.75;
}
@media (min-width: 412px) and (max-width: 1023px){
  main.p-article .prose ul li,
  main.p-article .prose ol li{ font-size: calc(18 * var(--u)); }
}
main.p-article .ar-mk{
  width: calc(9 * var(--u)); height: calc(11 * var(--u));
  flex-shrink: 0; margin-top: .55em;
}
main.p-article .prose ul li span{ display: block; margin-left: calc(10 * var(--u)); }

/* --- ordered lists: the heavy element. 40u between items --------------- */
main.p-article .prose ol{
  margin: calc(20 * var(--u)) 0;
  padding-left: calc(26 * var(--u));
}
main.p-article .prose ol li{
  font-weight: 400;
  font-size: calc(16 * var(--u)); line-height: 1.75;
  margin: calc(40 * var(--u)) 0 calc(8 * var(--u));
  padding-left: calc(6 * var(--u));
}

/* ===========================================================================
   4 · FULL-BLEED IMAGE
   A direct child of the article wrapper, not a .g section, so it escapes the
   15u page gutter and runs edge to edge. Aspect is 2:1 at every breakpoint.
   =========================================================================== */
main.p-article .ar-wide{
  position: relative; overflow: hidden;
  width: 100%; aspect-ratio: 1440 / 720;
  margin: calc(100 * var(--u)) 0;
  background: var(--paper);
}
@media (min-width: 1024px){ main.p-article .ar-wide{ margin: calc(150 * var(--u)) 0; } }

/* ===========================================================================
   5 · PULL QUOTE   (the page's second display element, same columns as h1)
   =========================================================================== */
main.p-article .ar-quote{ margin: calc(100 * var(--u)) 0; }
@media (min-width: 1024px){
  main.p-article .ar-quote{ margin: calc(150 * var(--u)) 0 calc(100 * var(--u)); }
}
main.p-article .ar-quote blockquote{
  grid-column: 1 / -1;
  margin: 0; text-align: center;
  font-family: var(--sans); font-weight: 400;
  font-size: calc(36 * var(--u)); line-height: 1.1;
  letter-spacing: -.02em;
}
@media (min-width: 1024px){
  main.p-article .ar-quote blockquote{ grid-column: 3 / span 8; font-size: calc(46 * var(--u)); line-height: 1.2; }
}

/* ===========================================================================
   6 · KEY POINTS   (same .prose component, different slot)
   =========================================================================== */
main.p-article .ar-keys{ margin-top: calc(100 * var(--u)); }

/* ===========================================================================
   7 · RELATED   (addition: the source page carries no related block)
   Built in the head frame's language: full-width rows on 1px rules, cols 2-11.
   =========================================================================== */
main.p-article .ar-related{ margin-top: calc(140 * var(--u)); }
main.p-article .ar-related-in{ grid-column: 1 / -1; }
@media (min-width: 1024px){ main.p-article .ar-related-in{ grid-column: 2 / -2; } }

main.p-article .ar-related-h{
  font-family: var(--sans); font-weight: 400;
  font-size: calc(30 * var(--u)); line-height: 1;
  letter-spacing: -.015em;
  margin-bottom: calc(40 * var(--u));
}

main.p-article .ar-rel-list{ list-style: none; margin: 0; padding: 0; }
main.p-article .ar-rel-list li{ border-top: 1px solid var(--teal); }
main.p-article .ar-rel-list li:last-child{ border-bottom: 1px solid var(--teal); }

main.p-article .ar-rel-list a{
  display: grid; gap: calc(8 * var(--u));
  padding: calc(24 * var(--u)) 0;
  transition: opacity .3s cubic-bezier(.4, 0, .2, 1);
}
@media (min-width: 1024px){
  main.p-article .ar-rel-list a{
    grid-template-columns: calc(180 * var(--u)) 1fr calc(120 * var(--u));
    align-items: baseline; gap: calc(20 * var(--u));
  }
}
main.p-article .ar-rel-list a:hover{ opacity: .55; }
main.p-article .ar-rel-t{
  font-family: var(--sans); font-weight: 400;
  font-size: calc(22 * var(--u)); line-height: 1.2; letter-spacing: -.01em;
}
@media (min-width: 1024px){ main.p-article .ar-rel-t{ font-size: calc(24 * var(--u)); } }
@media (min-width: 1024px){ main.p-article .ar-rel-d{ text-align: right; } }

/* ===========================================================================
   8 · CTA   (addition: the source article has no call to action)
   =========================================================================== */
main.p-article .ar-cta{
  margin-top: calc(140 * var(--u));
  padding-bottom: calc(150 * var(--u));
}
main.p-article .ar-cta-in{ grid-column: 1 / -1; }
@media (min-width: 1024px){ main.p-article .ar-cta-in{ grid-column: 3 / span 8; text-align: center; } }

main.p-article .ar-cta-h{
  font-family: var(--sans); font-weight: 400;
  font-size: calc(30 * var(--u)); line-height: 1.1; letter-spacing: -.02em;
}
@media (min-width: 1024px){ main.p-article .ar-cta-h{ font-size: calc(40 * var(--u)); } }

main.p-article .ar-cta-p{
  font-size: calc(18 * var(--u)); line-height: 1.4;
  margin-top: calc(20 * var(--u));
}
@media (min-width: 1024px){
  main.p-article .ar-cta-p{ font-size: calc(16 * var(--u)); max-width: calc(460 * var(--u)); margin-inline: auto; }
}

main.p-article .ar-btn{
  position: relative; z-index: 1; overflow: hidden;
  display: inline-flex; align-items: center; gap: calc(10 * var(--u));
  margin-top: calc(40 * var(--u));
  padding: calc(16 * var(--u)) calc(28 * var(--u));
  border: 1px solid var(--teal);
  font-family: var(--mono); font-size: calc(13 * var(--u));
  letter-spacing: .04em; text-transform: uppercase; line-height: 1;
}
main.p-article .ar-btn .ar-btn-sweep{
  position: absolute; inset: 0; z-index: -1;
  background: var(--teal);
  transform: translateY(101%) scaleY(.5);
  transform-origin: 50% 100%;
  transition: transform .45s var(--e-out);
}
main.p-article .ar-btn:hover{ color: var(--paper); }
main.p-article .ar-btn:hover .ar-btn-sweep{ transform: translateY(0) scaleY(1); }
main.p-article .ar-btn:focus-visible{ outline: 2px solid var(--teal); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce){
  main.p-article .ar-btn .ar-btn-sweep,
  main.p-article .ar-rel-list a{ transition: none; }
}

/* ===========================================================================
   ADDITIONS FOR THE GENERATED INSIGHTS TEMPLATE (insights/_article.html)
   New selectors only. Nothing above this banner is changed.

   What needed rules:
     a. a real photograph in the hero plate (data field "image")
     b. the pillar line under the lede
     c. the FAQ accordion band (.acc markup from styles.css, resized for this page)
     d. the "Related service" line inside the CTA block
     e. body content the data files carry that the reference article did not:
        inline links, comparison tables, and lists written without the .ar-mk glyph
   =========================================================================== */

/* --- a · real image in the hero plate ---------------------------------
   The plate already owns the aspect ratio (380/260, 935/636 at 1024+), so the
   photograph is absolutely filled into it and cropped, exactly like the canvas. */
main.p-article .ar-hero-img img{
  position: absolute; inset: 0; display: block;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}

/* --- b · pillar line, directly under the lede ------------------------- */
main.p-article .ar-pillar{
  margin-top: calc(24 * var(--u));
  font-size: calc(18 * var(--u)); line-height: 1.4; letter-spacing: 0;
}
@media (min-width: 1024px){
  main.p-article .ar-pillar{ font-size: calc(16 * var(--u)); }
}
main.p-article .ar-pillar a{
  text-decoration: underline; text-underline-offset: .18em;
  text-decoration-thickness: 1px;
}
main.p-article .ar-pillar a:hover{ opacity: .6; }

/* --- c · FAQ band ------------------------------------------------------
   Uses .acc / .acc-item / .acc-head / .acc-body from styles.css so app.js
   wires it. styles.css sizes that component for the home page accordion
   (2.4rem heads, mono uppercase bodies), so it is re-sized here for reading,
   the same way css/iso-standard.css and css/page-plain.css do it. */
main.p-article .ar-faq{ margin-top: calc(60 * var(--u)); }
main.p-article .ar-faq-in{ grid-column: 1 / -1; }
@media (min-width: 1024px){ main.p-article .ar-faq-in{ grid-column: 2 / -2; } }

main.p-article .ar-faq-h{
  font-family: var(--sans); font-weight: 400;
  font-size: calc(30 * var(--u)); line-height: 1;
  letter-spacing: -.015em;
  margin: 0 0 calc(40 * var(--u));
}

main.p-article .ar-faq .acc{ border-bottom: 1px solid var(--teal); }
main.p-article .ar-faq .acc-item{ border-top: 1px solid var(--teal); }
main.p-article .ar-faq .acc-head{
  align-items: flex-start;
  padding: calc(22 * var(--u)) 0;
  font-family: var(--sans); font-weight: 500;
  font-size: calc(20 * var(--u)); line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--teal);
}
@media (min-width: 1024px){
  main.p-article .ar-faq .acc-head{ font-size: calc(22 * var(--u)); }
}
main.p-article .ar-faq .acc-plus{
  font-size: calc(16 * var(--u)); line-height: 1; padding-top: .25em;
}
main.p-article .ar-faq .acc-body p{
  font-family: var(--sans); font-weight: 400;
  font-size: calc(18 * var(--u)); line-height: 1.5;
  letter-spacing: 0; text-transform: none;
  max-width: calc(760 * var(--u));
  padding-bottom: calc(24 * var(--u));
}
@media (min-width: 1024px){
  main.p-article .ar-faq .acc-body p{ font-size: calc(16 * var(--u)); }
}

/* --- d · related-service line in the CTA block ------------------------- */
main.p-article .ar-cta-svc{
  margin-top: calc(24 * var(--u));
  font-size: calc(18 * var(--u)); line-height: 1.4;
}
@media (min-width: 1024px){
  main.p-article .ar-cta-svc{ font-size: calc(16 * var(--u)); }
}
main.p-article .ar-cta-svc a{
  text-decoration: underline; text-underline-offset: .18em;
  text-decoration-thickness: 1px;
}
main.p-article .ar-cta-svc a:hover{ opacity: .6; }

/* --- e1 · inline links inside the body --------------------------------
   main.p-article a strips every underline, which leaves the citation links
   the articles carry invisible. Put the underline back inside .prose only. */
main.p-article .prose a{
  text-decoration: underline; text-underline-offset: .18em;
  text-decoration-thickness: 1px;
  transition: opacity .3s cubic-bezier(.4, 0, .2, 1);
}
main.p-article .prose a:hover{ opacity: .6; }

/* --- e2 · comparison tables -------------------------------------------
   The prose column is 460u wide at 1440, narrower than a three-column table,
   so the wrapper scrolls on its own and the page never does. */
main.p-article .prose .table-wrap{
  margin: calc(24 * var(--u)) 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
main.p-article .prose table{
  width: 100%; min-width: calc(320 * var(--u));
  border-collapse: collapse;
  font-size: calc(15 * var(--u)); line-height: 1.4;
}
main.p-article .prose th,
main.p-article .prose td{
  padding: calc(10 * var(--u)) calc(12 * var(--u)) calc(10 * var(--u)) 0;
  text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--line);
}
main.p-article .prose thead th{
  font-family: var(--mono); font-weight: 400;
  font-size: calc(11 * var(--u)); letter-spacing: .04em; text-transform: uppercase;
  border-bottom: 1px solid var(--teal);
}
main.p-article .prose tbody tr:last-child th,
main.p-article .prose tbody tr:last-child td{ border-bottom: 0; }

/* --- e3 · list items written without the .ar-mk glyph -------------------
   .prose ul is list-style:none and its items are flex rows, so a plain
   <li>text</li> would carry no marker at all. Give those items the rule dash. */
main.p-article .prose ul li:not(:has(> .ar-mk)){ gap: calc(10 * var(--u)); }
main.p-article .prose ul li:not(:has(> .ar-mk))::before{
  content: ""; flex: 0 0 auto;
  width: calc(9 * var(--u)); height: 1px;
  margin-top: .85em;
  background: currentColor;
}

@media (max-width:640px){ main .ar-meta + *, main .ar-standfirst{margin-top:3rem !important} }

/* no art, no plate: the empty hero div collapses instead of shipping 650px of blank beige */
main.p-article .ar-hero-img:empty{display:none}