/* Acceptance Path — article template (single post)
   Mirror of wp-content/mu-plugins/apc-article-design/article.css.
   Loaded only on posts in APC_ARTICLE_PILOT_IDS (see apc-article-design.php).

   Tokens are docs/design/DESIGN-SYSTEM.md, same hexes as willowbrook.css,
   renamed --art-*. Two min-width breakpoints only: 768 and 1025 (Elementor treats 1024 as tablet).

   Why so much !important: three separate stylesheets already own this markup.
   1. Customizer "Additional CSS" sets body h1/h2 font-size with !important,
      site-wide. Without !important here the H1 renders at the 60px service-page
      scale, which is wrong for a 58-character article title.
   2. The site-wide mu-plugin CSS sets text-decoration-color on every link inside
      .elementor-widget-theme-post-content with !important.
   3. Each post ships its own post-<id>.css for its own widgets.
   Same reasoning as wb-condition.css. */

/* --- tokens and page ---------------------------------------------------- */
body.apc-article-page{
  --art-teal:#185D60;
  --art-teal-deep:#103E40;
  --art-ink:#4F6665;
  --art-action:#B94F36;
  --art-action-hover:#A9442E;
  --art-clay:#D76446;
  --art-seafoam:#D8EBE7;
  --art-aqua:#A9C9C5;
  --art-parchment:#F7F0E4;
  --art-white:#FFF9F1;
  --art-button-ink:#FFFFFF;
  --art-radius:22px 22px 22px 7px;
  --art-radius-sm:14px 14px 14px 5px;
  --art-rule:rgba(24,93,96,.18);
  background-color:var(--art-parchment)!important;
}

/* Elementor gives every container its own padding, margin and gap from the kit.
   Zero all of it once, then set the few values this layout needs. */
.apc-article,
.apc-article-head,
.apc-article-body,
.apc-article-rail,
.apc-article-main{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  gap:0!important;
  --gap:0px;
  --row-gap:0px;
  --column-gap:0px;
}
.apc-article{display:block!important}

/* --- header band -------------------------------------------------------- */
.apc-article-head{
  display:block!important;
  padding:2rem 20px 1.75rem!important;
  border-bottom:1px solid var(--art-rule);
}
/* !important on max-width because Elementor ships `.e-con>.elementor-widget{max-width:100%}`,
   which is one class heavier than a plain child selector. Without it the header text sits
   hard against the page edge while the article column below is centred. */
/* Below 1024 the head is capped to the article measure, so the H1 starts on the
   same left edge as the body text. At 1024+ it is capped to the whole 932px grid
   (38rem + 64 gap + 260 rail), whose left edge is the main column. Measured: at
   768 a 932px head put the H1 53px left of the first paragraph. */
.apc-article-head>.elementor-element{
  width:100%;
  max-width:38rem!important;
  margin-inline:auto!important;
}
@media(min-width:1025px){
  .apc-article-head{padding:3.5rem 20px 2.25rem!important}
  .apc-article-head>.elementor-element{max-width:932px!important}
}

/* Eyebrow: the matched condition page. inline-flex with a 44px box because the
   audit holds every standalone link to the tap minimum at 375. */
body.apc-article-page .apc-eyebrow{margin:0!important;line-height:1}
body.apc-article-page .apc-eyebrow a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  min-width:44px;
  font:700 12px/1.2 "Onest",sans-serif!important;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--art-action-hover)!important;
  text-decoration:none!important;
}
body.apc-article-page .apc-eyebrow a:hover,
body.apc-article-page .apc-eyebrow a:focus-visible{text-decoration:underline!important}

body.apc-article-page .apc-article-head h1,
body.apc-article-page .apc-article-head .elementor-heading-title{
  font-family:"Merriweather",Georgia,serif!important;
  font-weight:400!important;
  color:var(--art-teal-deep)!important;
  font-size:28px!important;
  line-height:1.15!important;
  letter-spacing:-.02em;
  max-width:26ch;
  margin:.25rem 0 0!important;
}
@media(min-width:768px){
  body.apc-article-page .apc-article-head h1,
  body.apc-article-page .apc-article-head .elementor-heading-title{font-size:36px!important}
}
@media(min-width:1025px){
  body.apc-article-page .apc-article-head h1,
  body.apc-article-page .apc-article-head .elementor-heading-title{font-size:42px!important}
}

body.apc-article-page .apc-byline{
  margin:1.1rem 0 0!important;
  font:400 16px/1.5 "Onest",sans-serif!important;
  color:var(--art-ink)!important;
}
body.apc-article-page .apc-byline a{
  color:var(--art-teal)!important;
  text-decoration:underline!important;
  text-decoration-color:var(--art-aqua)!important;
  text-decoration-thickness:1px!important;
  text-underline-offset:3px;
}
body.apc-article-page .apc-byline a:hover{text-decoration-color:var(--art-teal)!important}
body.apc-article-page .apc-dates{
  margin:.2rem 0 0!important;
  font:400 15px/1.5 "Onest",sans-serif!important;
  color:var(--art-ink)!important;
}
body.apc-article-page .apc-dot{color:var(--art-ink)!important;padding:0 .15rem}

/* Crisis line: set like wb-crisis-top, and only printed for the conditions the
   live condition pages carry 988 on. */
body.apc-article-page .apc-crisis{
  margin-top:1.15rem;
  padding-left:1rem;
  border-left:2px solid var(--art-clay);
  max-width:60ch;
}
body.apc-article-page .apc-crisis p{
  margin:0!important;
  font:400 15px/1.55 "Onest",sans-serif!important;
  color:var(--art-ink)!important;
}
body.apc-article-page .apc-crisis p+p{margin-top:.15rem!important}

/* --- body grid ---------------------------------------------------------- */
/* Phones and tablets: one column, rail (TOC only) on top. */
.apc-article-body{
  display:flex!important;
  flex-direction:column!important;
  padding:1.5rem 20px 3rem!important;
}
.apc-article-body>.elementor-element{
  width:100%;
  max-width:38rem!important;
  margin-inline:auto!important;
}
.apc-article-rail{margin-bottom:1rem!important}

@media(min-width:1025px){
  .apc-article-body{
    display:grid!important;
    grid-template-columns:minmax(0,38rem) 260px;
    column-gap:64px!important;
    justify-content:center;
    align-items:start;
    padding:3rem 20px 4.5rem!important;
  }
  .apc-article-body>.apc-article-main{grid-column:1;grid-row:1;max-width:38rem}
  .apc-article-body>.apc-article-rail{
    grid-column:2;
    grid-row:1;
    max-width:260px;
    margin-bottom:0!important;
    position:sticky;
    top:96px;
  }
}

/* --- table of contents --------------------------------------------------- */
/* Deliberately not a card. The rail already carries one card, and two stacked
   boxes at 1024 made the rail heavier than the article beside it.
   The widget itself ships a 1px #9da5ae border at radius 3px (measured on the
   live page, not in the widget stylesheet's own toc rules), so it is cleared here
   as well as on the header and body. */
.apc-article .elementor-widget-table-of-contents,
.apc-article .elementor-widget-table-of-contents .elementor-widget-container,
.apc-article .elementor-toc__header,
.apc-article .elementor-toc__body{
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  padding:0!important;
  max-height:none!important;
}
.apc-article .elementor-toc__header{
  display:flex!important;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:48px;
  border-top:1px solid var(--art-rule)!important;
  border-bottom:1px solid var(--art-rule)!important;
}
.apc-article .elementor-toc__header-title{
  font:700 12px/1.2 "Onest",sans-serif!important;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--art-teal)!important;
  margin:0!important;
}
/* No display rule here on purpose. Elementor hides whichever of the expand /
   collapse pair does not apply with `display:none`, and a `display:flex!important`
   here showed both chevrons at once. Measured live. */
.apc-article .elementor-toc__toggle-button{
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  color:var(--art-teal)!important;
  cursor:pointer;
}
.apc-article .elementor-toc__toggle-button svg{width:14px;height:14px;fill:currentColor}
.apc-article .elementor-toc__body{padding:.35rem 0 .75rem!important}
.apc-article .elementor-toc__list-wrapper{margin:0!important;padding:0!important;list-style:none!important}
.apc-article .elementor-toc__list-item{margin:0!important}
.apc-article .elementor-toc__list-item-text{
  display:flex!important;
  align-items:center;
  min-height:44px;
  font:400 15px/1.35 "Onest",sans-serif!important;
  color:var(--art-teal)!important;
  text-decoration:none!important;
}
.apc-article .elementor-toc__list-item-text:hover,
.apc-article .elementor-toc__list-item-text.elementor-item-active{
  color:var(--art-teal-deep)!important;
  text-decoration:underline!important;
  text-underline-offset:3px;
}
/* The marker is a ::before on the wrapper. Centred, it floated to the middle of a
   two-line entry; top-aligned it sits on the first line where a number belongs. */
.apc-article .elementor-toc__list-item-text-wrapper{align-items:flex-start!important}
.apc-article .elementor-toc__list-item-text-wrapper:before{padding-top:.1em}
.apc-article .elementor-toc__list-item-text-wrapper>span:first-child,
.apc-article .elementor-toc__list-item-text-wrapper>i{color:var(--art-action-hover)!important}

@media(min-width:1025px){
  .apc-article .elementor-toc__header{
    border-top:0!important;
    border-bottom:1px solid var(--art-rule)!important;
    min-height:0;
    padding-bottom:.5rem!important;
  }
  .apc-article .elementor-toc__toggle-button{display:none!important}
  .apc-article .elementor-toc__body{
    max-height:calc(100vh - 380px)!important;   /* leaves room for the rail card below it */
    overflow-y:auto!important;
    min-height:160px;
    scrollbar-width:thin;
    scrollbar-color:var(--art-aqua) transparent;
  }
  .apc-article .elementor-toc__body::-webkit-scrollbar{width:4px}
  .apc-article .elementor-toc__body::-webkit-scrollbar-thumb{background-color:var(--art-aqua);border-radius:4px}
  .apc-article .elementor-toc__list-item-text{min-height:0;padding:.42rem 0}
}

/* --- rail card (1024 and up only) --------------------------------------- */
.apc-article .apc-railcard{display:none}
@media(min-width:1025px){
  .apc-article .apc-railcard{
    display:block;
    margin-top:1.75rem;
    padding:1.25rem 1.15rem 1.35rem;
    background:var(--art-white);
    border:1px solid var(--art-rule);
    border-radius:var(--art-radius);
  }
  .apc-article .apc-railcard p{
    margin:0 0 1rem!important;
    font:400 15px/1.55 "Onest",sans-serif!important;
    color:var(--art-ink)!important;
  }
}

/* --- buttons ------------------------------------------------------------ */
/* The in-body button carries the post's own rule
   `.elementor-<id> .elementor-element.elementor-element-<id> .elementor-button`,
   which is four classes and paints it kit-accent amber. `body.apc-article-page`
   plus the `a` element take this past it, so one page does not show two CTA
   colours. Measured live: it rendered rgb(230,110,5), from an inline site-wide rule
   `html body .elementor-element.elementor-widget-button .elementor-button.elementor-button-link[href*="/form/"]`
   at (0,5,2). That rule is site-wide and is left alone; this one is one step above it. */
body.apc-article-page .apc-article .apc-btn,
html body.apc-article-page .apc-article .elementor-widget-theme-post-content a.elementor-button.elementor-button-link{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding:.85rem 1.6rem!important;
  border:1px solid var(--art-action)!important;
  border-radius:999px!important;
  background:var(--art-action)!important;
  background-color:var(--art-action)!important;
  color:var(--art-button-ink)!important;
  font:700 16px/1.15 "Onest",sans-serif!important;
  text-align:center;
  text-decoration:none!important;
  box-shadow:none!important;
  transition:background-color .15s,border-color .15s,color .15s;
}
body.apc-article-page .apc-article .apc-btn:hover,
body.apc-article-page .apc-article .apc-btn:focus-visible,
html body.apc-article-page .apc-article .elementor-widget-theme-post-content a.elementor-button.elementor-button-link:hover,
html body.apc-article-page .apc-article .elementor-widget-theme-post-content a.elementor-button.elementor-button-link:focus-visible{
  background:var(--art-action-hover)!important;
  background-color:var(--art-action-hover)!important;
  border-color:var(--art-action-hover)!important;
  color:#FFFFFF!important;
}
/* Secondary action, after .apc-btn so the later !important wins at equal weight. */
body.apc-article-page .apc-article .apc-btn-ghost{
  background:transparent!important;
  background-color:transparent!important;
  color:var(--art-teal)!important;
  border-color:var(--art-teal)!important;
}
body.apc-article-page .apc-article .apc-btn-ghost:hover,
body.apc-article-page .apc-article .apc-btn-ghost:focus-visible{
  background:var(--art-teal)!important;
  background-color:var(--art-teal)!important;
  border-color:var(--art-teal)!important;
  color:#FFFFFF!important;
}
/* .apc-btn pills inside the post body: the post-content link colour (teal, !important)
   beat the pill's white, teal on clay at 1.53:1 (/pure-o-ocd/, QA 2026-10-17). One step
   heavier, the same fix cost-post.css carries for the couples posts. */
html body.apc-article-page .apc-article .elementor-widget-theme-post-content a.apc-btn:not(.apc-btn-ghost),
html body.apc-article-page .apc-article .elementor-widget-theme-post-content a.apc-btn-ghost:hover,
html body.apc-article-page .apc-article .elementor-widget-theme-post-content a.apc-btn-ghost:focus-visible{color:var(--art-button-ink)!important;text-decoration:none!important}
html body.apc-article-page .apc-article .elementor-widget-theme-post-content a.apc-btn-ghost{text-decoration:none!important}
.apc-article a:focus-visible,
.apc-article [role="button"]:focus-visible{outline:3px solid var(--art-teal)!important;outline-offset:3px}

/* --- article body -------------------------------------------------------- */
.apc-article .elementor-widget-theme-post-content{
  font-family:"Onest",sans-serif!important;
  color:var(--art-ink)!important;
}
/* The post is its own Elementor document nested inside the widget, and its
   containers carry the kit's default 10px inline padding. Measured: that set the
   body text 10px to the right of the H1 above it. The measure is set by this
   column, not by the post, so the inner containers give their gutters up. */
.apc-article .elementor-widget-theme-post-content .e-con,
.apc-article .elementor-widget-theme-post-content .e-con-inner{
  padding-inline:0!important;
  max-width:100%!important;
}
.apc-article .elementor-widget-theme-post-content>.elementor>.e-con:first-child{padding-block-start:0!important}
.apc-article .elementor-widget-theme-post-content p,
.apc-article .elementor-widget-theme-post-content li,
.apc-article .elementor-widget-theme-post-content td,
.apc-article .elementor-widget-theme-post-content th{
  font-family:"Onest",sans-serif!important;
  font-size:17px!important;
  line-height:1.7!important;
  color:var(--art-ink)!important;
}
.apc-article .elementor-widget-theme-post-content p{margin:0 0 1.15rem!important}
.apc-article .elementor-widget-theme-post-content ul,
.apc-article .elementor-widget-theme-post-content ol{margin:0 0 1.15rem!important;padding-left:1.35rem!important}
.apc-article .elementor-widget-theme-post-content li{margin:0 0 .5rem!important}
.apc-article .elementor-widget-theme-post-content li::marker{color:var(--art-clay)}
.apc-article .elementor-widget-theme-post-content h2{
  font-family:"Merriweather",Georgia,serif!important;
  font-weight:400!important;
  font-size:24px!important;
  line-height:1.25!important;
  letter-spacing:-.015em;
  color:var(--art-teal-deep)!important;
  margin:2.5rem 0 .85rem!important;
}
.apc-article .elementor-widget-theme-post-content h2 strong,
.apc-article .elementor-widget-theme-post-content h2 b{font-weight:400!important}
.apc-article .elementor-widget-theme-post-content h3{
  font-family:"Onest",sans-serif!important;
  font-weight:700!important;
  font-size:18px!important;
  line-height:1.35!important;
  color:var(--art-teal-deep)!important;
  margin:1.85rem 0 .5rem!important;
}
.apc-article .elementor-widget-theme-post-content h3 strong,
.apc-article .elementor-widget-theme-post-content h3 b{font-weight:700!important}
@media(min-width:768px){
  .apc-article .elementor-widget-theme-post-content p,
  .apc-article .elementor-widget-theme-post-content li,
  .apc-article .elementor-widget-theme-post-content td,
  .apc-article .elementor-widget-theme-post-content th{font-size:18px!important}
  .apc-article .elementor-widget-theme-post-content h2{font-size:28px!important}
}
.apc-article .elementor-widget-theme-post-content a:not(.elementor-button){
  color:var(--art-teal)!important;
  text-decoration:underline!important;
  text-decoration-color:var(--art-teal)!important;
  text-decoration-thickness:1px!important;
  text-underline-offset:3px;
}
.apc-article .elementor-widget-theme-post-content a:not(.elementor-button):hover{
  color:var(--art-teal-deep)!important;
  text-decoration-color:var(--art-teal-deep)!important;
}
.apc-article .elementor-widget-theme-post-content img{
  width:100%;
  height:auto;
  border-radius:var(--art-radius);
  margin:2rem 0;
}
.apc-article .elementor-widget-theme-post-content figure img{margin:0}
.apc-article .elementor-widget-theme-post-content .elementor-widget-image{margin:2rem 0}

/* The disclaimer block each post carries is a flat grey panel from the legacy
   build. Re-set on parchment it reads as a mistake, so it is quietened to small
   print on a hairline instead. Keyed on the container's own background setting,
   which is the only handle the markup gives. */
.apc-article .elementor-widget-theme-post-content .e-con[data-settings*="background_background"]{
  background:transparent!important;
  border-top:1px solid var(--art-rule);
  border-radius:0!important;   /* the legacy container rounds its corners, which bent the rule */
  padding:1.25rem 0 0!important;
  margin-top:2.5rem!important;
}
.apc-article .elementor-widget-theme-post-content .e-con[data-settings*="background_background"] p{
  font-size:14px!important;
  line-height:1.6!important;
}

/* --- end card ------------------------------------------------------------ */
.apc-article .apc-endcard{
  margin-top:3rem;
  padding:1.6rem 1.4rem 1.75rem;
  background:var(--art-seafoam);
  border-radius:var(--art-radius);
}
.apc-article .apc-endcard h2{
  font-family:"Merriweather",Georgia,serif!important;
  font-weight:400!important;
  font-size:24px!important;
  line-height:1.25!important;
  letter-spacing:-.015em;
  color:var(--art-teal-deep)!important;
  margin:0 0 .85rem!important;
}
.apc-article .apc-endcard p{
  margin:0 0 .85rem!important;
  font:400 17px/1.65 "Onest",sans-serif!important;
  color:var(--art-ink)!important;
}
.apc-article .apc-endcard a:not(.apc-btn){
  color:var(--art-teal)!important;
  text-decoration:underline!important;
  text-decoration-color:var(--art-teal)!important;
  text-underline-offset:3px;
}
.apc-article .apc-endcard-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.25rem}
/* On phones the two buttons sized to their own labels, which read as an accident.
   One column, one width. */
.apc-article .apc-endcard-actions .apc-btn{flex:1 1 100%}
@media(min-width:768px){.apc-article .apc-endcard-actions .apc-btn{flex:0 0 auto}}
@media(min-width:768px){
  .apc-article .apc-endcard{padding:2.1rem 2rem 2.25rem}
  .apc-article .apc-endcard h2{font-size:28px!important}
  .apc-article .apc-endcard p{font-size:18px!important}
}

/* --- related articles ---------------------------------------------------- */
.apc-article .apc-related{margin-top:3.25rem}
.apc-article .apc-related h2{
  font-family:"Merriweather",Georgia,serif!important;
  font-weight:400!important;
  font-size:24px!important;
  line-height:1.25!important;
  color:var(--art-teal-deep)!important;
  margin:0 0 1.1rem!important;
}
.apc-article .apc-related-grid{
  list-style:none!important;
  margin:0!important;
  padding:0!important;
  display:grid;
  grid-template-columns:1fr;
  gap:.5rem;
}
.apc-article .apc-card{margin:0!important}
/* Phones: a reading list, not three stacked posters. Three 3:2 images in a
   column ran nearly a full screen each and read as the same card three times. */
.apc-article .apc-card>a{
  display:grid;
  grid-template-columns:96px 1fr;
  align-items:center;
  gap:.9rem;
  padding:.55rem 0;
  text-decoration:none!important;
  border-bottom:1px solid var(--art-rule);
}
.apc-article .apc-card-thumb{
  display:block;
  overflow:hidden;
  aspect-ratio:3/2;
  border-radius:var(--art-radius-sm);
  background:var(--art-seafoam);
}
.apc-article .apc-card-thumb-empty{background:var(--art-seafoam)}
.apc-article .apc-card-img{width:100%;height:100%;object-fit:cover;display:block;margin:0!important;border-radius:0!important}
.apc-article .apc-card h3{
  font:700 16px/1.4 "Onest",sans-serif!important;
  color:var(--art-teal-deep)!important;
  margin:0!important;
}
.apc-article .apc-card>a:hover h3{color:var(--art-teal)!important;text-decoration:underline!important;text-underline-offset:3px}
@media(min-width:768px){
  .apc-article .apc-related-grid{grid-template-columns:repeat(3,1fr);gap:1.4rem}
  .apc-article .apc-card>a{
    display:block;
    padding:0;
    border-bottom:0;
  }
  .apc-article .apc-card h3{font-size:17px!important;margin:.7rem 0 0!important}
}
.apc-article .apc-related-all{margin:.4rem 0 0!important}
.apc-article .apc-related-all a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  font:700 15px/1 "Onest",sans-serif!important;
  color:var(--art-teal)!important;
  text-decoration:underline!important;
  text-decoration-color:var(--art-aqua)!important;
  text-underline-offset:4px;
}
.apc-article .apc-related-all a:hover{text-decoration-color:var(--art-teal)!important}
@media(min-width:768px){.apc-article .apc-related-all{margin-top:1.4rem!important}}

/* --- suppressed widgets -------------------------------------------------- */
/* The render filter empties the duplicate byline heading and the review-solicitation
   button, and marks each one .apc-suppressed on its wrapper (a `:empty` rule does not
   match: Elementor leaves the renderer's whitespace inside the wrapper). Hide the
   wrapper, and any container left holding nothing but suppressed widgets. */
.apc-article .apc-suppressed{display:none!important}
.apc-article .e-con:not(:has(>:not(.apc-suppressed))){display:none!important}

/* The TOC list is built by Elementor's script; the server sends only a spinner.
   Hide it so a slow or failed script leaves the header, not a spinning ring. */
.apc-article .elementor-toc__spinner-container{display:none!important}

/* End card crisis line: every article, since the card names emergencies. */
.apc-article .apc-endcard .apc-endcard-crisis{font-size:15px!important}
/* Two sentences per paragraph, so the crisis note is two lines; keep them together. */
.apc-article .apc-endcard .apc-endcard-crisis:has(+ .apc-endcard-crisis){margin-bottom:.3rem!important}

/* --- tables, notes and button rows in the post body -------------------------
   Opt-in classes, first used on /interoceptive-exposure/ (2026-10-20). The theme
   stripes and boxes every table, so clear that first. Phones: each row is a card
   and every cell carries its column name (data-label), since a four-column table
   at 375 hides half its columns behind a sideways scroll. 768+: a normal table. */
body.apc-article-page .apc-article .apc-table-wrap{
  margin:1.5rem 0 1.75rem;border:1px solid var(--art-rule);border-radius:var(--art-radius-sm);background:var(--art-white);
}
body.apc-article-page .apc-article table.apc-table{width:100%;margin:0!important;border-collapse:collapse;border:0!important}
body.apc-article-page .apc-article table.apc-table :is(thead,tbody,tr,th,td){background:transparent!important;border:0!important}
body.apc-article-page .apc-article table.apc-table :is(th,td){
  text-align:left;vertical-align:top;
  font:400 15px/1.45 "Onest",sans-serif!important;color:var(--art-ink)!important;
}
body.apc-article-page .apc-article table.apc-table td:first-child{font-weight:700!important;color:var(--art-teal-deep)!important}
/* phones and small tablets: stacked rows */
body.apc-article-page .apc-article table.apc-table thead{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
body.apc-article-page .apc-article table.apc-table :is(tbody,tr,td){display:block}
body.apc-article-page .apc-article table.apc-table tr{padding:.85rem 1rem!important;border-bottom:1px solid var(--art-rule)!important}
body.apc-article-page .apc-article table.apc-table tbody tr:last-child{border-bottom:0!important}
body.apc-article-page .apc-article table.apc-table td{padding:.1rem 0!important}
body.apc-article-page .apc-article table.apc-table td:first-child{font-size:16px!important;padding-bottom:.3rem!important}
body.apc-article-page .apc-article table.apc-table td:not(:first-child)[data-label]::before{
  content:attr(data-label) ": ";font-weight:600;color:var(--art-teal-deep);
}
@media (min-width:768px){
  body.apc-article-page .apc-article table.apc-table thead{position:static!important;width:auto;height:auto;overflow:visible;clip-path:none;white-space:normal}
  body.apc-article-page .apc-article table.apc-table thead{display:table-header-group}
  body.apc-article-page .apc-article table.apc-table tbody{display:table-row-group}
  body.apc-article-page .apc-article table.apc-table tr{display:table-row;padding:0!important;border:0!important}
  body.apc-article-page .apc-article table.apc-table :is(th,td){display:table-cell;padding:.7rem .9rem!important;border-bottom:1px solid var(--art-rule)!important}
  body.apc-article-page .apc-article table.apc-table td:first-child{font-size:15px!important}
  body.apc-article-page .apc-article table.apc-table td:not(:first-child)[data-label]::before{content:none}
  body.apc-article-page .apc-article table.apc-table thead th{background:var(--art-seafoam)!important;font-weight:700!important;color:var(--art-teal-deep)!important}
  body.apc-article-page .apc-article table.apc-table tbody tr:last-child td{border-bottom:0!important}
}
body.apc-article-page .apc-article .apc-note{
  margin:1.5rem 0;padding:1rem 1.25rem;background:var(--art-seafoam);
  border-left:4px solid var(--art-clay);border-radius:0 14px 14px 0;
}
body.apc-article-page .apc-article .elementor-widget-theme-post-content .apc-note p{margin:0!important}
body.apc-article-page .apc-article .elementor-widget-theme-post-content .apc-note p+p{margin-top:.4rem!important}
body.apc-article-page .apc-article .elementor-widget-theme-post-content p.apc-note-label{
  font:700 12px/1.3 "Onest",sans-serif!important;letter-spacing:.1em;text-transform:uppercase;color:var(--art-action-hover)!important;
}
body.apc-article-page .apc-article .elementor-widget-theme-post-content p.apc-cta{display:flex;flex-wrap:wrap;gap:.75rem;margin:1.5rem 0 2.25rem!important}

/* In-page links (#safety, the TOC) land the heading below the sticky header (67px phone, 83px desktop). */
body.apc-article-page .apc-article .elementor-widget-theme-post-content :is(h2,h3,h4)[id]{scroll-margin-top:100px}
/* FlyingPress lazy render puts content-visibility:auto + contain-intrinsic-size:auto Npx inline on tbody.
   One value sets width too, so an unrendered table is N px wide and the phone page scrolls sideways. */
body.apc-article-page .apc-article table.apc-table tbody{content-visibility:visible!important;contain-intrinsic-size:none!important}