/* DiaDeep type scale — single source of truth for headings, labels and lead text.
   Every page stylesheet references these tokens instead of its own clamp(). */
:root{
  --ty-eyebrow:.72rem;
  --ty-eyebrow-weight:700;
  --ty-eyebrow-track:.18em;

  --ty-tag:.68rem;
  --ty-tag-weight:700;
  --ty-tag-track:.14em;

  --ty-h1:clamp(3.2rem,7vw,8rem);
  --ty-h1-lh:.84;
  --ty-h1-ls:-.075em;

  --ty-h2:clamp(2.8rem,5.5vw,6.5rem);
  --ty-h2-lh:.92;
  --ty-h2-ls:-.055em;

  --ty-h3:clamp(1.8rem,3vw,2.9rem);
  --ty-h3-lh:1.02;
  --ty-h3-ls:-.045em;

  --ty-h4:clamp(1.2rem,1.7vw,1.6rem);
  --ty-h4-lh:1.15;
  --ty-h4-ls:-.02em;

  --ty-article:clamp(2rem,3.6vw,3.2rem);
  --ty-article-lh:1.08;
  --ty-article-ls:-.03em;

  --ty-lead:clamp(1.1rem,1.5vw,1.4rem);
  --ty-lead-lh:1.5;
}
@media(max-width:800px){
  :root{
    --ty-h1:clamp(2.8rem,13vw,4.2rem);
    --ty-h2:clamp(2.4rem,10.5vw,3.4rem);
    --ty-h3:clamp(1.7rem,7vw,2.3rem);
  }
}
/* In-page anchors land below the sticky nav (82px desktop, 70px mobile). */
html{scroll-padding-top:96px}
@media(max-width:1060px){html{scroll-padding-top:84px}}
/* Even out multi-line headings so no title ends on a lone word. */
h1,h2,h3,h4{text-wrap:balance}
nw-x,.nw{white-space:nowrap}
/* One vertical rhythm for every page: section padding, and the gap under a section title. */
:root{--section-y:clamp(56px,6.5vw,104px);--head-gap:clamp(28px,3.6vw,56px)}
/* Closing-CTA art (assets/cta-art.js): half-moon grid on the right, content on the left. */
.cta-art-host{position:relative;overflow:hidden}
.cta-art-host>:not(.cta-art){position:relative;z-index:1}
.cta-art{position:absolute;right:0;top:0;height:100%;width:min(42%,560px);display:block;z-index:0}
.cta-art-grid line{stroke:#b9b6f2;stroke-opacity:.16;stroke-width:.8;stroke-dasharray:1;stroke-dashoffset:1}
.cta-art-cell{fill:#b9b6f2;fill-opacity:0;transition:fill-opacity .35s}
.cta-art-piece{transform-box:fill-box;transform-origin:center;transform:rotate(var(--rot));opacity:0;transition:transform .7s cubic-bezier(.2,.75,.25,1)}
.cta-art-line{fill:#b9b6f2;fill-opacity:0;stroke:#b9b6f2;stroke-width:1.6;transition:fill-opacity .35s}
.cta-art-pink{fill:#ed3b82}.cta-art-mint{fill:#9af2c8}
.cta-art.is-in .cta-art-grid line{animation:cta-art-draw 1s cubic-bezier(.2,.75,.25,1) forwards;animation-delay:calc(var(--i)*70ms)}
.cta-art.is-in .cta-art-piece{animation:cta-art-pop .7s cubic-bezier(.2,.75,.25,1) both;animation-delay:calc(.55s + var(--i)*90ms);opacity:1}
@keyframes cta-art-draw{to{stroke-dashoffset:0}}
@keyframes cta-art-pop{from{opacity:0;transform:rotate(calc(var(--rot) - 90deg)) scale(.6)}to{opacity:1;transform:rotate(var(--rot)) scale(1)}}
@media(hover:hover){.cta-art-slot:hover .cta-art-cell{fill-opacity:.07}.cta-art-slot:hover .cta-art-piece{animation:none;transform:rotate(calc(var(--rot) + 90deg))}.cta-art-slot:hover .cta-art-line{fill-opacity:.9}}
/* Content keeps to the left of the art on wide screens; buttons sit under the text. */
@media(min-width:861px){
  .cta-art-host>:not(.cta-art){max-width:52%!important}
  .product-cta.cta-art-host{display:block}
  .product-cta.cta-art-host>a{margin-top:32px}
  .about-closing.cta-art-host>div{justify-content:flex-start}
}
@media(max-width:860px){.cta-art{position:relative;width:calc(100% + 48px);height:auto;margin:36px -24px 0;aspect-ratio:1}.cta-art-host{padding-bottom:0!important}}
@media(prefers-reduced-motion:reduce){.cta-art-grid line{stroke-dashoffset:0;animation:none!important}.cta-art-piece{opacity:1;animation:none!important;transition:none}}

/* Half-moon sign: one circle split in two, used as a small state marker */
.dd-sign{display:block;width:22px;height:22px;flex:0 0 auto;overflow:visible}
.dd-sign path{fill:none;stroke-width:1.5;vector-effect:non-scaling-stroke;transition:fill .3s}
.dd-sign .l{stroke:var(--indigo,#302e82)}.dd-sign .r{stroke:var(--pink,#ed3b82)}

/* Mobile menu: one row per product (name = link, chevron = show its pages) */
.mobile-menu .mobile-panel .mobile-assays>summary{display:flex;align-items:stretch;padding:0;font-size:inherit;font-weight:inherit;letter-spacing:inherit;color:inherit;list-style:none;cursor:pointer;border:0;border-bottom:1px solid rgba(32,32,34,.1)}
.mobile-menu .mobile-panel .mobile-assays>summary>a{flex:1;padding:13px;border-bottom:0;color:inherit;font-weight:inherit}
.mobile-chev{flex:0 0 52px;display:grid;place-items:center;border-left:1px solid rgba(32,32,34,.1)}
.mobile-chev:before{content:"";width:8px;height:8px;border-right:1.5px solid var(--pink,#ed3b82);border-bottom:1.5px solid var(--pink,#ed3b82);transform:translateY(-2px) rotate(45deg);transition:transform .25s}
.mobile-assays[open] .mobile-chev:before{transform:translateY(2px) rotate(225deg)}
.mobile-menu .mobile-panel .mobile-assays .mobile-sub{padding-left:28px;border-bottom:1px solid rgba(32,32,34,.1);font-weight:400}
.mobile-menu .mobile-panel .mobile-assays>summary:focus-visible{outline:2px solid var(--indigo,#302e82);outline-offset:-2px}
@media(prefers-reduced-motion:reduce){.mobile-chev:before{transition:none}}

/* Registered mark: small superscript, like the former ™ glyph */
sup.reg{font-size:max(7px,.32em);line-height:1;vertical-align:text-top;position:relative;top:.72em;margin-left:.04em;letter-spacing:0;font-weight:inherit}
/* in a flex row (link + arrow) the mark is its own item: keep it against the word */
reg-w{display:inline}

.footer-social a svg{display:block;flex:0 0 auto}

/* Home hero zoom: every frame is centred on the same tissue point, placed at 65% / 50%; keep that point fixed on any screen shape */
.wsi-images .wsi-layer{object-position:65% 50%}
.wsi-images .wsi-layer{transform-origin:65% 50%}

faq-q{display:block;min-width:0}

/* No rule between the CE footnote and the footer bar */
.page-footnote + .footer-compact{border-top:0}