/* --------------------------------------------------------------------------
   ARZN site chrome: header and footer layout.

   The header and footer were Elementor Pro theme parts. They are theme markup
   now, and the element class names are unchanged, so arzn.css and arzn-v2.css
   keep styling them exactly as before. This file supplies only the layout that
   used to come from Elementor's generated container CSS, plus the mobile menu,
   which was previously the Pro nav widget's burger.

   Loaded after both brand stylesheets, so anything here can be overridden by
   them on purpose rather than by accident.
   -------------------------------------------------------------------------- */

:root { --arzn-chrome-max: 1180px; }

/* ---- header ------------------------------------------------------------ */

.arzn-header .arzn-header-row {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  max-width: var(--arzn-chrome-max);
  margin-inline: auto;
  width: 100%;
}

.arzn-header .arzn-logo-col,
.arzn-header .arzn-nav-col,
.arzn-header .arzn-actions-col {
  display: flex;
  align-items: center;
  min-width: 0;
}
.arzn-header .arzn-actions-col { margin-inline-start: auto; }

/* The Pro widget's own stylesheet carried the list reset. */
.arzn-header .arzn-nav .elementor-nav-menu,
.arzn-mobile-nav .elementor-nav-menu {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 2px;
}
.arzn-header .arzn-nav .elementor-nav-menu a,
.arzn-mobile-nav .elementor-nav-menu a {
  display: block;
  text-decoration: none;
}
.arzn-header .arzn-nav .elementor-nav-menu li { position: relative; list-style: none; }

/* Second level, which the Pro widget rendered as a dropdown. */
.arzn-header .arzn-nav .elementor-nav-menu .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  min-width: 230px;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: .4rem;
  margin: 0;
  background: #fff;
  border-radius: var(--arzn-r-md, 14px);
  border: 1px solid var(--arzn-cloud, #e2eaf6);
  box-shadow: var(--arzn-shadow-lift, 0 18px 40px -22px rgba(15,26,51,.45));
  z-index: 120;
}
.arzn-header .arzn-nav .elementor-nav-menu li:hover > .sub-menu,
.arzn-header .arzn-nav .elementor-nav-menu li:focus-within > .sub-menu { display: flex; }
.arzn-header .arzn-nav .elementor-nav-menu .sub-menu a { padding: .55rem .7rem; border-radius: 8px; }

/* ---- burger and mobile panel ------------------------------------------- */

.arzn-burger {
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
}
.arzn-burger span {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .2s ease, opacity .2s ease;
}
.arzn-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.arzn-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.arzn-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.arzn-mobile-nav {
  display: none;
  padding: 1rem clamp(10px, 1.2vw, 20px) 1.25rem;
  border-top: 1px solid var(--arzn-cloud, #e2eaf6);
}
.arzn-mobile-nav[hidden] { display: none; }
.arzn-mobile-nav.is-open { display: block; }
.arzn-mobile-nav .elementor-nav-menu {
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
}
.arzn-mobile-nav .elementor-nav-menu a { padding: .7rem .25rem; font-weight: 600; }
.arzn-mobile-nav .elementor-nav-menu .sub-menu {
  list-style: none;
  margin: 0;
  padding: 0 0 0 .9rem;
}
.arzn-mobile-nav__actions { display: flex; gap: .55rem; margin-top: .9rem; }
.arzn-mobile-nav__actions a { flex: 1; justify-content: center; }

@media (max-width: 1024px) {
  .arzn-header .arzn-nav-col { display: none; }
  .arzn-header .arzn-head-actions { display: none; }
  .arzn-burger { display: inline-flex; }
}

/* ---- footer ------------------------------------------------------------ */

.arzn-footer {
  padding-block: 80px 52px;
  padding-inline: 24px;
}
.arzn-footer .arzn-footer-row,
.arzn-footer .arzn-footer-legal {
  box-sizing: border-box;
  max-width: var(--arzn-chrome-max);
  margin-inline: auto;
}
.arzn-footer .arzn-footer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  column-gap: 36px;
  row-gap: 44px;
}
.arzn-footer .arzn-footer-col { flex: 1 1 200px; min-width: 0; }
.arzn-footer .arzn-footer-col--brand { flex: 1 1 300px; }
.arzn-footer .arzn-footer-col > * { margin-block: 0 0; }
.arzn-footer .arzn-footer-col > * + * { margin-top: .85rem; }

.arzn-footer .arzn-footer-list,
.arzn-footer .arzn-footer-contact {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.arzn-footer .arzn-footer-btn { margin-top: 1.1rem; }
/* The brand stylesheet paints .elementor-button but never laid it out, because
   Elementor's own CSS did. */
.arzn-footer .arzn-btn-light .elementor-button,
.arzn-mobile-nav__actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
}

@media (max-width: 767px) {
  .arzn-footer { padding-block: 56px 40px; }
  .arzn-footer .arzn-footer-row { row-gap: 34px; }
}

/* ---- sticky header, scrolled state --------------------------------------
   The v2 design wants the header transparent so it floats over the top of the
   page. That only works while nothing has scrolled underneath it. The header
   is sticky, so once the page moves, text and images used to run straight
   through the navigation. It stays transparent at rest and takes a background
   the moment the page scrolls.
   ------------------------------------------------------------------------- */

.arzn-header {
  transition: background-color .25s ease, box-shadow .25s ease;
}
.arzn-header.is-scrolled {
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);
  box-shadow: 0 1px 0 var(--arzn-cloud, #e2eaf6);
}
@media (prefers-reduced-motion: reduce) {
  .arzn-header { transition: none; }
}

/* The mobile panel sits on the same bar, so it needs the same surface. */
.arzn-header .arzn-mobile-nav.is-open {
  background: rgba(255, 255, 255, .98);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);
}

/* ---- page hero headings -------------------------------------------------
   Every interior page opens with a navy panel. arzn-v2.css already asks for a
   white heading there, but Elementor writes a per-page rule setting every
   heading to the kit's primary navy, and that file loads after the theme at
   the same specificity, so headings on every dark band came out navy on navy
   and were close to unreadable: the page heroes, the navy mission band and the
   closing call to action on all twelve pages. One more class outranks it.
   ------------------------------------------------------------------------- */

.arzn-pagehero .elementor-widget-heading .elementor-heading-title,
.arzn-pagehero .elementor-widget .elementor-heading-title,
.arzn-pagehero :is(h1, h2, h3),
.arzn-sec--ink .elementor-widget-heading .elementor-heading-title,
.arzn-sec--ink :is(h1, h2, h3, h4),
.arzn-band-navy .elementor-widget-heading .elementor-heading-title,
.arzn-band-navy :is(h1, h2, h3, h4),
.arzn-cta2 .elementor-widget-heading .elementor-heading-title,
.arzn-cta2 :is(h1, h2, h3, h4) {
  color: #fff;
}

/* The coral emphasis inside those headings keeps its own colour, because the
   rule above paints the heading and this one paints the span. */
.arzn-sec--ink .arzn-accent,
.arzn-band-navy .arzn-accent,
.arzn-cta2 .arzn-accent,
.arzn-pagehero .arzn-accent {
  color: var(--arzn-coral, #FF7E67);
}

/* ---- footer social links ------------------------------------------------ */

.arzn-footer .arzn-social {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: flex;
  gap: .5rem;
}
.arzn-footer .arzn-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: rgba(255, 255, 255, .85);
  background: rgba(255, 255, 255, .10);
  transition: background-color .2s ease, color .2s ease;
}
.arzn-footer .arzn-social a:hover,
.arzn-footer .arzn-social a:focus-visible {
  background: rgba(255, 255, 255, .22);
  color: #fff;
}
.arzn-footer .arzn-social svg { display: block; }

/* ---- the studio credit -------------------------------------------------- */

.arzn-footer .arzn-footer-credit {
  margin: .9rem 0 0;
  font-size: .8125rem;
  color: rgba(255, 255, 255, .6);
}
.arzn-footer .arzn-footer-credit a {
  color: rgba(255, 255, 255, .78);
  font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .28);
}
.arzn-footer .arzn-footer-credit a:hover { color: #fff; border-bottom-color: #fff; }

/* ---- check lists on dark bands ------------------------------------------
   Elementor writes .elementor-widget-icon-list .elementor-icon-list-text with
   the kit's ink colour, which is near black. On the navy bands that left the
   Village Care check list at 1.59:1, effectively invisible. Three classes beat
   Elementor's two, whichever file loads last.
   ------------------------------------------------------------------------- */

.arzn-sec--ink .elementor-widget-icon-list .elementor-icon-list-text,
.arzn-band-navy .elementor-widget-icon-list .elementor-icon-list-text,
.arzn-cta2 .elementor-widget-icon-list .elementor-icon-list-text,
.arzn-pagehero .elementor-widget-icon-list .elementor-icon-list-text {
  color: rgba(255, 255, 255, .88);
}

/* ---- resource articles ---------------------------------------------------
   Posts had no template and no styling, because Hello Elementor ships neither
   and every page on this site is built in Elementor. These are written to be
   read end to end by a worried parent, so the measure is narrow, the type is
   large, and the extractable blocks (answer, table, summary, FAQ) are visually
   distinct so both a reader and an answer engine can find them.
   ------------------------------------------------------------------------- */

.arzn-article-wrap {
  box-sizing: border-box;
  max-width: 760px;
  margin-inline: auto;
  padding: clamp(2.5rem, 6vw, 4.5rem) 24px clamp(3rem, 7vw, 5rem);
}

.arzn-article__kicker { margin: 0 0 1rem; font-size: .8125rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.arzn-article__kicker a { color: var(--arzn-teal-deep, #006D75); text-decoration: none; }
.arzn-article__head h1,
.arzn-index__head h1 { margin: 0 0 1rem; font-size: clamp(2rem, 4.6vw, 2.9rem); line-height: 1.12; letter-spacing: -.02em; }
.arzn-article__standfirst { font-size: 1.1875rem; line-height: 1.65; color: var(--arzn-ink-soft, #46587D); margin: 0 0 1.5rem; }
.arzn-article__meta {
  display: flex; flex-wrap: wrap; gap: .4rem 1.25rem;
  margin: 0 0 2.5rem; padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--arzn-cloud, #E2EAF6);
  font-size: .875rem; color: var(--arzn-ink-soft, #46587D);
}

.arzn-article__body { font-size: 1.0625rem; line-height: 1.75; }
.arzn-article__body h2 { margin: 2.75rem 0 .85rem; font-size: clamp(1.4rem, 2.6vw, 1.7rem); line-height: 1.25; }
.arzn-article__body p { margin: 0 0 1.15rem; }
.arzn-article__body ul,
.arzn-article__body ol { margin: 0 0 1.35rem; padding-inline-start: 1.3rem; }
.arzn-article__body li { margin-bottom: .55rem; }
.arzn-article__body a { color: var(--arzn-teal-deep, #006D75); }

/* The answer, stated first, because that is the block an answer engine lifts. */
.arzn-article__body .arzn-answer {
  background: var(--arzn-mist, #FFF7F2);
  border-inline-start: 4px solid var(--arzn-coral-deep, #CC4023);
  border-radius: 0 var(--arzn-r-md, 14px) var(--arzn-r-md, 14px) 0;
  padding: 1.15rem 1.35rem;
  font-size: 1.125rem;
  margin-bottom: 1.75rem;
}

.arzn-article__body table { width: 100%; border-collapse: collapse; margin: 0 0 1.75rem; font-size: .9375rem; }
.arzn-article__body th,
.arzn-article__body td { padding: .7rem .85rem; border: 1px solid var(--arzn-cloud, #E2EAF6); text-align: start; vertical-align: top; }
.arzn-article__body thead th { background: var(--arzn-mist, #FFF7F2); font-weight: 700; }
.arzn-article__body tbody th { background: #fbfdff; font-weight: 700; width: 26%; }

.arzn-fig { margin: 2rem 0 2.25rem; }
.arzn-fig svg { width: 100%; height: auto; display: block; border-radius: var(--arzn-r-md, 14px); }
.arzn-fig figcaption { margin-top: .7rem; font-size: .875rem; color: var(--arzn-ink-soft, #46587D); }

.arzn-summary {
  background: var(--arzn-navy, #1E3A8A);
  color: #fff;
  border-radius: var(--arzn-r-lg, 20px);
  padding: 1.5rem 1.75rem;
  margin: 2.25rem 0;
}
.arzn-summary h2 { margin: 0 0 .75rem; color: #fff; font-size: 1.25rem; }
.arzn-summary ul { margin: 0; padding-inline-start: 1.2rem; }
.arzn-summary li { color: rgba(255,255,255,.9); }

.arzn-faq-block { margin: 2.5rem 0; }
.arzn-faq-item {
  border: 1px solid var(--arzn-cloud, #E2EAF6);
  border-radius: var(--arzn-r-md, 14px);
  padding: .9rem 1.1rem;
  margin-bottom: .6rem;
  background: #fff;
}
.arzn-faq-item summary { font-weight: 700; cursor: pointer; color: var(--arzn-navy, #1E3A8A); }
.arzn-faq-item[open] summary { margin-bottom: .6rem; }
.arzn-faq-item p { margin: 0; font-size: .9875rem; }

.arzn-sources { margin-top: 2.75rem; padding-top: 1.75rem; border-top: 1px solid var(--arzn-cloud, #E2EAF6); font-size: .9375rem; }
.arzn-sources h2 { margin-top: 0; font-size: 1.1rem; }
.arzn-sources ol { padding-inline-start: 1.2rem; }
.arzn-res-note { background: var(--arzn-mist, #FFF7F2); border-radius: var(--arzn-r-md, 14px); padding: 1rem 1.15rem; color: var(--arzn-ink-soft, #46587D); }

.arzn-article__cta {
  margin-top: 3rem; padding: 1.75rem;
  background: var(--arzn-mist, #FFF7F2);
  border-radius: var(--arzn-r-lg, 20px);
  text-align: center;
}
.arzn-article__cta h2 { margin: 0 0 .6rem; font-size: 1.35rem; }
.arzn-btn-coral .elementor-button-text,
.arzn-btn-coral { display: inline-flex; align-items: center; justify-content: center; background: var(--arzn-coral-deep, #CC4023); color: #fff; text-decoration: none; }

/* index */
.arzn-index__head { margin-bottom: 2.5rem; }
.arzn-index__list { display: grid; gap: 1.1rem; }
.arzn-index__item {
  border: 1px solid var(--arzn-cloud, #E2EAF6);
  border-radius: var(--arzn-r-lg, 20px);
  padding: 1.5rem 1.6rem;
  background: #fff;
}
.arzn-index__item h2 { margin: 0 0 .5rem; font-size: 1.3rem; line-height: 1.3; }
.arzn-index__item h2 a { color: var(--arzn-navy, #1E3A8A); text-decoration: none; }
.arzn-index__item h2 a:hover { color: var(--arzn-teal-deep, #006D75); }
.arzn-index__item p { margin: 0 0 .75rem; color: var(--arzn-ink-soft, #46587D); }
.arzn-index__more a { font-weight: 700; color: var(--arzn-teal-deep, #006D75); text-decoration: none; }

/* ---- the human sitemap --------------------------------------------------
   A plain page, not an Elementor one, so it needs the same measure and
   rhythm the articles use.
   ------------------------------------------------------------------------- */

.arzn-sitemap { display: grid; gap: 2rem; }
.arzn-sitemap h2 {
  margin: 0 0 .75rem;
  font-size: 1.1rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--arzn-teal-deep, #006D75);
}
.arzn-sitemap ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.arzn-sitemap li a {
  color: var(--arzn-navy, #1E3A8A);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid transparent;
}
.arzn-sitemap li a:hover { border-bottom-color: currentColor; }

/* A list of links is not prose, so it gets columns and more room than the
   article measure allows. The body class comes from the setup plugin. */
body.page-template-default.arzn-has-sitemap .site-main,
body.page-template-default.arzn-has-sitemap .entry-content { max-width: 1080px; }

@media (min-width: 720px) {
  .arzn-sitemap { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; row-gap: 2.75rem; }
}

@media (min-width: 1000px) {
  .arzn-sitemap { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .arzn-sitemap .arzn-sitemap__wide { grid-column: 1 / -1; }
  .arzn-sitemap .arzn-sitemap__wide ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; }
}

body.page-template-default .site-main,
body.page-template-default .entry-content {
  box-sizing: border-box;
  max-width: 760px;
  margin-inline: auto;
  padding-inline: 24px;
}
body.page-template-default .entry-title {
  max-width: 760px;
  margin: clamp(2.5rem, 6vw, 4rem) auto 1.5rem;
  padding-inline: 24px;
  font-size: clamp(2rem, 4.6vw, 2.8rem);
}

/* -------------------------------------------------------------------------
   GAPP hub (/gapp/)
   A long guide rendered by the [arzn_gapp_hub] shortcode inside the Elementor
   page. The prose reuses the article body styles above; this adds the
   contents rail, which sits beside the text on wide screens and above it on
   narrow ones, plus the few blocks only the hub has.
   ------------------------------------------------------------------------- */

.arzn-hub {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  max-width: 1080px;
  margin-inline: auto;
}
@media (min-width: 1024px) {
  .arzn-hub { grid-template-columns: 232px minmax(0, 720px); gap: 64px; justify-content: center; }
}

.arzn-hub__toc { font-size: .9375rem; min-width: 0; }
@media (min-width: 1024px) {
  .arzn-hub__toc {
    position: sticky;
    top: calc(var(--arzn-header-h, 84px) + 24px);
    align-self: start;
    max-height: calc(100vh - var(--arzn-header-h, 84px) - 48px);
    overflow-y: auto;
  }
}
.arzn-hub__toc-title {
  margin: 0 0 .75rem;
  font-size: .8125rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--arzn-teal-deep, #006D75);
}
.arzn-hub__toc ol { list-style: none; margin: 0; padding: 0; border-inline-start: 2px solid var(--arzn-cloud, #E2EAF6); }
.arzn-hub__toc li { margin: 0; }
.arzn-hub__toc a {
  display: block;
  margin-inline-start: -2px;
  padding: .38rem 0 .38rem 1rem;
  border-inline-start: 2px solid transparent;
  color: var(--arzn-ink-soft, #46587D);
  text-decoration: none;
  line-height: 1.4;
}
.arzn-hub__toc a:hover,
.arzn-hub__toc a:focus-visible { color: var(--arzn-navy, #1E3A8A); border-inline-start-color: var(--arzn-navy, #1E3A8A); }
@media (max-width: 1023px) {
  .arzn-hub__toc { background: var(--arzn-mist, #FFF7F2); border-radius: var(--arzn-r-md, 14px); padding: 1.1rem 1.25rem; }
  .arzn-hub__toc ol { columns: 2 220px; column-gap: 1.5rem; border: 0; }
  .arzn-hub__toc a { padding-inline-start: 0; border: 0; }
}

.arzn-hub .arzn-article__body > h2:first-child { margin-top: 0; }
.arzn-hub .arzn-article__body h2 { scroll-margin-top: calc(var(--arzn-header-h, 84px) + 24px); }
.arzn-hub .arzn-article__body h3 { margin: 1.9rem 0 .6rem; font-size: 1.15rem; line-height: 1.3; }

.arzn-hub__reviewed {
  margin: 0 0 1.75rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--arzn-cloud, #E2EAF6);
  font-size: .875rem;
  color: var(--arzn-ink-soft, #46587D);
}

/* A rule a family can trip over, set apart from the running text. */
.arzn-hub .arzn-note {
  margin: 0 0 1.5rem;
  padding: 1rem 1.2rem;
  border-radius: var(--arzn-r-md, 14px);
  background: #EEF4FF;
  border: 1px solid var(--arzn-cloud, #E2EAF6);
  font-size: 1rem;
}
.arzn-hub .arzn-note strong { color: var(--arzn-navy, #1E3A8A); }

.arzn-hub .arzn-steps { counter-reset: arzn-step; list-style: none; padding: 0; margin: 0 0 1.5rem; }
.arzn-hub .arzn-steps > li { counter-increment: arzn-step; position: relative; padding-inline-start: 3rem; margin-bottom: 1.1rem; }
.arzn-hub .arzn-steps > li::before {
  content: counter(arzn-step);
  position: absolute; inset-inline-start: 0; top: .1rem;
  width: 2rem; height: 2rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--arzn-navy, #1E3A8A); color: #fff;
  font-weight: 800; font-size: .9375rem;
}

.arzn-hub .arzn-faq { max-width: none; margin: 0 0 1rem; }
.arzn-hub .arzn-faq__body p { margin: 0 0 .75rem; }
.arzn-hub .arzn-cite { font-size: .8125rem; color: var(--arzn-ink-soft, #46587D); white-space: nowrap; }

/* -------------------------------------------------------------------------
   Village Care (/our-care/village-care/)
   The one-minute screener ([arzn_village_screener]), and the two lists that
   are not ticks: what a parent cannot be paid for, and the other program.
   ------------------------------------------------------------------------- */

.arzn-xlist,
.arzn-dotlist { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.arzn-xlist li,
.arzn-dotlist li { position: relative; padding-inline-start: 2rem; line-height: 1.5; }
.arzn-xlist li::before {
  content: "";
  position: absolute; inset-inline-start: 0; top: .15rem;
  width: 1.3rem; height: 1.3rem; border-radius: 50%;
  background:
    linear-gradient(45deg, transparent 45%, var(--arzn-coral-deep, #CC4023) 45% 55%, transparent 55%) center / .65rem .65rem no-repeat,
    linear-gradient(-45deg, transparent 45%, var(--arzn-coral-deep, #CC4023) 45% 55%, transparent 55%) center / .65rem .65rem no-repeat,
    #FFE9E3;
}
.arzn-dotlist li::before {
  content: "";
  position: absolute; inset-inline-start: .45rem; top: .55rem;
  width: .45rem; height: .45rem; border-radius: 50%;
  background: var(--arzn-ink-soft, #46587D);
}
.arzn-source-note { margin: .5rem 0 0; font-size: .8125rem; color: var(--arzn-ink-soft, #46587D); }

.arzn-screener {
  box-sizing: border-box;
  max-width: 860px;
  margin-inline: auto;
  padding: clamp(1.5rem, 4vw, 2.75rem);
  background: #fff;
  border-radius: var(--arzn-r-lg, 28px);
  box-shadow: var(--arzn-shadow-card, 0 1px 2px rgba(15,26,51,.04), 0 18px 36px -26px rgba(15,26,51,.26));
  scroll-margin-top: calc(var(--arzn-header-h, 84px) + 24px);
}
.arzn-screener__eyebrow { margin: 0 0 .5rem; font-size: .8125rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--arzn-teal-deep, #006D75); }
.arzn-screener__title { margin: 0 0 .5rem; font-size: clamp(1.6rem, 3.2vw, 2.1rem); line-height: 1.15; }
.arzn-screener__intro { margin: 0 0 1.75rem; color: var(--arzn-ink-soft, #46587D); }
.arzn-screener fieldset { border: 0; margin: 0 0 1.5rem; padding: 0; min-width: 0; }
.arzn-screener legend { padding: 0; margin-bottom: .75rem; font-weight: 800; font-size: 1.0625rem; color: var(--arzn-ink, #0F1A33); }
.arzn-screener__opts { display: flex; flex-wrap: wrap; gap: .55rem; }
.arzn-screener__opt { position: relative; cursor: pointer; }
.arzn-screener__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.arzn-screener__opt span {
  display: inline-block;
  padding: .6rem 1rem;
  border: 1.5px solid var(--arzn-cloud, #E2EAF6);
  border-radius: 999px;
  font-size: .9375rem; line-height: 1.35;
  color: var(--arzn-ink, #0F1A33);
  background: #fff;
  transition: background-color .2s, border-color .2s, color .2s;
}
.arzn-screener__opt:hover span { border-color: var(--arzn-navy, #1E3A8A); }
.arzn-screener__opt input:checked + span { background: var(--arzn-navy, #1E3A8A); border-color: var(--arzn-navy, #1E3A8A); color: #fff; }
.arzn-screener__opt input:focus-visible + span { outline: 2px solid var(--arzn-coral-deep, #CC4023); outline-offset: 2px; }
.arzn-screener__result {
  margin-top: .25rem;
  padding: 1.25rem 1.4rem;
  border-radius: var(--arzn-r-md, 18px);
  border-inline-start: 4px solid var(--arzn-teal-deep, #006D75);
  background: #E8F6F7;
}
.arzn-screener__result[data-tone="no"] { border-inline-start-color: var(--arzn-coral-deep, #CC4023); background: #FFF3EF; }
.arzn-screener__result h3 { margin: 0 0 .5rem; font-size: 1.25rem; }
.arzn-screener__result p { margin: 0 0 .6rem; }
.arzn-screener__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1rem; }
.arzn-screener__note { margin: 1.25rem 0 0; font-size: .875rem; color: var(--arzn-ink-soft, #46587D); }
.arzn-screener__reset { margin-inline-start: .5rem; padding: 0; border: 0; background: none; font: inherit; color: var(--arzn-teal-deep, #006D75); text-decoration: underline; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .arzn-screener__opt span { transition: none; } }

/* Printable checklists (the Katie Beckett checklist): an empty box to tick on
   paper in place of a bullet. */
.arzn-article__body ul.arzn-checklist { list-style: none; padding-inline-start: 0; }
.arzn-article__body ul.arzn-checklist li { position: relative; padding-inline-start: 2.1rem; }
.arzn-article__body ul.arzn-checklist li::before {
  content: "";
  position: absolute; inset-inline-start: 0; top: .2rem;
  width: 1.15rem; height: 1.15rem;
  border: 2px solid var(--arzn-navy, #1E3A8A);
  border-radius: 4px;
  background: #fff;
}

/* Printing an article: the text, the checklist and the sources, without the
   site around them. */
@media print {
  .arzn-header, .arzn-footer, header.site-header, footer.site-footer,
  .arzn-callbar, .arzn-article__cta, .arzn-faq-block, nav { display: none !important; }
  .arzn-article-wrap { max-width: none; padding: 0; }
  .arzn-article__body { font-size: 11pt; line-height: 1.5; }
  .arzn-article__body a { color: inherit; text-decoration: none; }
  .arzn-article__body ul.arzn-checklist li { break-inside: avoid; }
}