a { color: var(--teal-900); }
a:hover { color: var(--teal-700); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--teal-900); outline-offset: 3px; border-radius: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .will-reveal { opacity: 0; transform: translateY(18px); }
  .will-reveal.is-in { opacity: 1; transform: none; transition: opacity var(--duration-slower) var(--ease-calm), transform var(--duration-slower) var(--ease-calm); }
}
.ps1:focus { left: 0 !important }
.hdr-in { transition: padding var(--duration-slower) var(--ease-calm) }
.hdr-em { transition: width var(--duration-slower) var(--ease-calm), height var(--duration-slower) var(--ease-calm) }
.hdr-mk { transition: font-size var(--duration-slower) var(--ease-calm) }
html.is-scrolled .hdr-in-d { padding-top: 13px !important; padding-bottom: 13px !important }
html.is-scrolled .hdr-em-d { width: 30px !important; height: 30px !important }
html.is-scrolled .hdr-in-m { padding-top: 8px !important; padding-bottom: 8px !important }
html.is-scrolled .hdr-em-m { width: 20px !important; height: 20px !important }
html.is-scrolled .hdr-mk { font-size: 19px !important }
@media (prefers-reduced-motion: reduce) { .hdr-in, .hdr-em, .hdr-mk { transition: none !important } }
@media (max-width: 600px) {
  footer a[href] { padding-top: 10px !important; padding-bottom: 10px !important }
  input[type="checkbox"] { width: 22px !important; height: 22px !important }
  footer p { font-size: 15px !important }
  .ft-col { flex: 1 1 42% !important; min-width: 0 !important }
  .em-div { padding-bottom: 26px !important }
  .mk-portrait { width: 100% !important }
  .tel-link { display: inline-block !important; padding: 7px 0 !important }
}
html { scroll-padding-top: 104px }
@media (max-width: 900px) { html { scroll-padding-top: 84px } }
@media (max-width: 600px) { #top p, #top li { line-height: 1.56 !important } }
a, button { -webkit-tap-highlight-color: transparent }
.ps2:hover { color: var(--teal-900) !important; opacity: 1 !important; background: rgba(126,163,183,.55) !important; border-bottom-color: #2D5A6F !important }
.ps3:active, .ps3:hover {  gap: 18px !important; color: #3E7A96 !important; border-bottom-color: transparent !important; box-shadow: inset 0 -2px 0 #3E7A96 !important }
.ps4:active, .ps4:hover {  gap: 18px !important; opacity: 1 !important; color: #3E7A96 !important; border-bottom-color: transparent !important; box-shadow: inset 0 -2px 0 #3E7A96 !important }
.ps5:hover { background: rgba(255,253,246,.97) !important; border-color: rgba(22,49,61,.3) !important; transform: translateY(-3px) !important }
.ps6:active, .ps6:hover {  gap: 16px !important; color: #3E7A96 !important; border-bottom-color: transparent !important; box-shadow: inset 0 -2px 0 #3E7A96 !important }
.ps7:hover { color: var(--teal-900) !important; background: rgba(126,163,183,.55) !important; border-bottom-color: #2D5A6F !important }
.ps8:hover { color: #3E7A96 !important; border-bottom-color: #3E7A96 !important }

@media print {
  html, body { background: #fff !important; }
  header, nav, footer, button, [aria-hidden="true"] { display: none !important; }
  main, section, div { background: transparent !important; box-shadow: none !important; color: #000 !important; }
  * { color: #000 !important; opacity: 1 !important; }
  a { color: #000 !important; text-decoration: underline !important; border-bottom: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 11px; }
  section { padding: 12px 0 !important; page-break-inside: avoid; }
  h1, h2, h3 { page-break-after: avoid; }
  img { max-width: 40mm !important; height: auto !important; }
}

/* ── static-export layer ─────────────────────────────────────────
   The nav, the responsive grids and the disclosure states used to be
   decided in JavaScript. They are decided here now, so the markup a
   crawler receives is the markup a visitor sees. */

/* [hidden] must win over the inline display: flex these panels carry */
[hidden] { display: none !important }

/* Page-specific interaction states, merged from the individual pages */
.ps9:hover { opacity: 1 !important }
.ps10:active, .ps10:hover { gap: 18px !important; color: #FBF8EC !important; border-bottom-color: transparent !important; box-shadow: inset 0 -2px 0 #FBF8EC !important }
.ps11:hover { background: rgba(126,163,183,.55) !important }
.ps12:focus { border-bottom-color: var(--teal-700) !important }
.ps13:hover { background: var(--teal-900) !important }
.ps14:hover { color: #2D5A6F !important; border-color: #2D5A6F !important }
.ps15:active, .ps15:hover { gap: 16px !important; color: #3E7A96 !important; border-bottom-color: transparent !important; box-shadow: inset 0 -2px 0 #3E7A96 !important }

/* 404 quick links */
.lk:hover { color: var(--teal-900) !important; background: rgba(126,163,183,.55) !important; border-bottom-color: #2D5A6F !important }

.nav-d { display: block }
.nav-m { display: none }
@media (max-width: 1023px) {
  .nav-d { display: none }
  .nav-m { display: block }
}
nav a[aria-current="page"] { opacity: 1; color: var(--teal-900) }

.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)) }
@media (max-width: 899px) {
  .g3 { grid-template-columns: minmax(0, 1fr) }
}
@media (max-width: 759px) {
  .g2 { grid-template-columns: minmax(0, 1fr) }
}

.gitem { grid-template-columns: 128px 1fr }
@media (max-width: 759px) { .gitem { grid-template-columns: 84px 1fr } }
@media (max-width: 419px) { .gitem { grid-template-columns: 68px 1fr } }

/* Privacy — table of contents rail */
.pv-grid { grid-template-columns: minmax(200px, 240px) 1fr }
.pv-toc { position: sticky; top: 112px; display: flex; flex-direction: column; gap: 2px }
@media (max-width: 899px) {
  .pv-grid { grid-template-columns: 1fr }
  .pv-toc { position: static; top: auto }
}

/* FAQs — category rail */
.faq-grid { grid-template-columns: 1fr }
.faq-rail { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(16px, 2.4vw, 28px) }
@media (max-width: 759px) {
  .faq-rail {
    flex-wrap: nowrap; gap: 8px; overflow-x: auto;
    padding: 0 20px 6px; margin: 0 -20px clamp(8px, 1.5vw, 16px);
    -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-snap-type: x proximity;
  }
  .faq-rail::-webkit-scrollbar { display: none }
}
.faq-cat {
  flex: 0 0 auto; white-space: nowrap; padding: 11px 16px;
  font-family: var(--font-sans); font-size: 14px; font-weight: 500; letter-spacing: .01em;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: none; border: none; cursor: pointer; border-radius: 999px; color: var(--teal-800);
  transition: background var(--duration-base) var(--ease-calm);
}
.faq-cat[aria-selected="true"] { background: var(--glass-cream) }

/* FAQs — answers. Open by default; JavaScript collapses them, so a reader
   without it still gets every answer. */
.faq-p {
  display: grid; grid-template-rows: 1fr;
  transition: grid-template-rows var(--duration-slow, 320ms) var(--ease-calm);
}
html.js .faq-p { grid-template-rows: 0fr }
html.js .faq-t[aria-expanded="true"] + .faq-p { grid-template-rows: 1fr }
.faq-t[aria-expanded="true"] { color: var(--teal-700) !important }
.faq-bar-v { transform: translate(-50%, -50%) rotate(90deg); transition: transform var(--duration-base) var(--ease-calm) }
html:not(.js) .faq-bar-v,
.faq-t[aria-expanded="true"] .faq-bar-v { transform: translate(-50%, -50%) rotate(0deg) }

/* Resources — tabs */
.rs-tab {
  font-family: var(--font-sans); font-size: 12px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; background: none; border: none; padding: 0 0 8px; cursor: pointer;
  color: var(--teal-800); opacity: .6; border-bottom: 2px solid transparent;
  transition: color var(--duration-base) var(--ease-calm), opacity var(--duration-base) var(--ease-calm);
}
.rs-tab:hover { opacity: 1 }
.rs-tab[aria-selected="true"] { color: var(--teal-900); opacity: 1; border-bottom-color: var(--teal-700) }

/* Connect — audience pills */
.cn-pill {
  font-family: var(--font-sans); font-size: 15px; font-weight: 500;
  color: var(--teal-800); background: transparent; border: 1px solid rgba(22,49,61,.24);
  border-radius: 999px; padding: 11px 22px; cursor: pointer;
  transition: all var(--duration-base) var(--ease-calm);
}
.cn-pill[aria-pressed="true"] { color: var(--teal-900); background: rgba(22,49,61,.1); border-color: var(--teal-700) }

/* The design system's Button, variant inverse, size lg — inlined so the
   pages no longer load the component bundle to draw one button. */
.btn-inv {
  display: inline-flex; align-items: center; justify-content: center; width: auto;
  font-family: var(--font-sans); font-weight: 500; letter-spacing: .01em; line-height: 1;
  border-radius: var(--radius-pill); border: 1.5px solid transparent; cursor: pointer;
  padding: 15px 32px; font-size: 15px; gap: 10px; min-height: 54px;
  background: var(--cream-100); color: var(--teal-800);
  transition: background var(--duration-base) var(--ease-calm), transform var(--duration-fast) var(--ease-calm);
}
.btn-inv:hover { background: var(--cream-200) }
a:active .btn-inv { transform: translateY(1px) }

@media print {
  .faq-p { grid-template-rows: 1fr !important }
  [hidden] { display: revert !important }
}