:root {
  --ink: #102a2b;
  --deep: #092b2d;
  --teal: #087f75;
  --mint: #d9f5ec;
  --paper: #f7f4ed;
  --card: #fff;
  --line: #d7dfda;
  --muted: #617173;
  --blue: #326da8;
  --blue-bg: #e9f2fb;
  --amber: #a85b19;
  --amber-bg: #fff1df;
  --green: #176b5b;
  --green-bg: #ddf4eb;
  --shadow: 0 18px 55px rgba(16, 42, 43, 0.09);
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font:
    16px/1.55 ui-sans-serif,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}
button,
input,
a {
  font: inherit;
}
a {
  color: inherit;
}
.skip {
  position: fixed;
  top: -80px;
  left: 20px;
  background: #fff;
  padding: 12px 16px;
  z-index: 100;
}
.skip:focus {
  top: 15px;
}
.site-header {
  max-width: 1220px;
  margin: auto;
  padding: 20px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand {
  display: flex;
  gap: 10px;
  align-items: center;
  color: var(--deep);
  text-decoration: none;
  font-size: 18px;
  font-weight: 750;
}
.brand b {
  color: var(--teal);
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--deep);
  color: #fff;
  font:
    800 18px Georgia,
    serif;
}
.site-header nav {
  display: flex;
  align-items: center;
  gap: 22px;
}
.site-header nav > a {
  text-decoration: none;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}
.favorites-nav {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.65);
  border-radius: 999px;
  padding: 9px 14px;
  color: var(--ink);
  font-weight: 750;
  cursor: pointer;
}
.favorites-nav span {
  display: inline-grid;
  place-items: center;
  min-width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--deep);
  color: #fff;
  font-size: 11px;
  margin-left: 5px;
}
.hero {
  max-width: 950px;
  margin: 70px auto 60px;
  padding: 0 24px;
  text-align: center;
}
.eyebrow,
.section-label {
  color: var(--teal);
  letter-spacing: 0.15em;
  font-size: 12px;
  font-weight: 850;
  margin: 0 0 12px;
}
.hero h1,
.guide h1,
.prose-page h1 {
  font:
    700 clamp(44px, 7vw, 78px) / 1.01 Georgia,
    serif;
  letter-spacing: -0.045em;
  margin: 0;
}
.hero h1 em {
  font-weight: 400;
  color: var(--teal);
}
.hero-copy {
  max-width: 720px;
  margin: 25px auto;
  color: var(--muted);
  font-size: 19px;
}
.trust-row {
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 14px;
}
.trust-row span:before {
  content: "✓";
  color: var(--teal);
  font-weight: 900;
  margin-right: 7px;
}
.my-updates,
.directory,
.promise,
.related {
  max-width: 1120px;
  margin: 0 auto 90px;
  padding: 0 24px;
}
.my-updates {
  background: var(--deep);
  color: #fff;
  border-radius: 26px;
  padding: 28px 30px;
  display: grid;
  grid-template-columns: 245px 1fr;
  gap: 26px;
  align-items: center;
  box-shadow: var(--shadow);
}
.my-updates .eyebrow {
  color: #72d5bd;
}
.my-updates h2 {
  font:
    700 27px Georgia,
    serif;
  margin: 0 0 6px;
}
.my-updates p {
  margin: 0;
  color: #b9cece;
  font-size: 14px;
}
.my-updates.empty {
  grid-template-columns: 1fr;
}
.favorite-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.favorite-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
}
.favorite-chip {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 11px;
  align-items: center;
  color: var(--ink);
  text-decoration: none;
  padding: 11px 13px;
  min-width: 0;
}
.favorite-chip span:nth-child(2) {
  min-width: 0;
}
.favorite-chip b,
.favorite-chip small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.favorite-chip small {
  color: var(--muted);
  font-size: 11px;
}
.favorite-chip i {
  font-style: normal;
  color: var(--teal);
  font-weight: 800;
}
.favorite-remove {
  border: 0;
  border-left: 1px solid var(--line);
  background: #f8f4ed;
  color: #8a4038;
  padding: 0 13px;
  min-width: 70px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
}
.favorite-remove:hover,
.favorite-remove:focus-visible {
  background: #f6e2dc;
  outline: 0;
}
.my-updates.empty .favorite-list {
  display: none;
}
.section-heading {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  align-items: end;
}
.section-heading h2,
.promise h2,
.content-section h2,
.resource-panel h2 {
  font:
    700 35px/1.1 Georgia,
    serif;
  margin: 0;
}
.section-heading > p {
  max-width: 420px;
  color: var(--muted);
  margin: 0;
}
.directory-tools {
  display: flex;
  gap: 16px;
  align-items: center;
  margin: 30px 0 12px;
}
.search {
  flex: 1;
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 18px;
}
.search span {
  font-size: 26px;
  color: var(--teal);
}
.search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 13px 11px;
  color: var(--ink);
  font-size: 16px;
}
.filters {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}
.filters button {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.55);
  color: var(--muted);
  border-radius: 999px;
  padding: 9px 13px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
}
.filters button.active {
  background: var(--deep);
  color: #fff;
  border-color: var(--deep);
}
.result-count {
  font-size: 13px;
  color: var(--muted);
  margin: 8px 0 17px;
}
.directory-groups {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}
.guide-group,
.directory-groups .directory-grid {
  display: contents;
}
.group-heading {
  display: none;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 13px;
}
.alerts-section {
  max-width: 1120px;
  margin: 0 auto 58px;
  padding: 0 24px;
}
.alerts-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 28px;
  margin-bottom: 18px;
}
.alerts-heading h2 {
  margin: 0;
  font:
    700 35px/1.1 Georgia,
    serif;
}
.alerts-heading > p {
  max-width: 430px;
  margin: 0;
  color: var(--muted);
}
.alerts-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}
.current-alert {
  min-height: 370px;
  padding: 24px;
  color: #fff;
  background: linear-gradient(120deg, #742f27, #a14b37);
  border-radius: 24px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}
.alert-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 17px;
  color: #ffe5d8;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
}
.alert-status span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ffd05b;
  box-shadow: 0 0 0 5px rgba(255, 208, 91, 0.16);
}
.current-alert .eyebrow {
  color: #ffd5bf;
}
.current-alert h2 {
  max-width: 100%;
  margin: 0;
  font:
    700 29px/1.08 Georgia,
    serif;
}
.current-alert p:not(.eyebrow) {
  max-width: 100%;
  margin: 12px 0 0;
  color: #ffe9df;
}
.current-alert > a {
  align-self: flex-start;
  margin-top: auto;
  transform: translateY(10px);
  padding: 13px 18px;
  border-radius: 999px;
  background: #fff;
  color: #742f27;
  text-decoration: none;
  font-weight: 850;
  white-space: nowrap;
}
.fire-alert {
  background: linear-gradient(120deg, #6b3d17, #a46624);
}
.fire-alert .alert-status {
  color: #fff0c9;
}
.fire-alert .alert-status span {
  background: #ffcf5c;
}
.measles-alert {
  background: linear-gradient(120deg, #294b66, #356f86);
}
.measles-alert .alert-status,
.measles-alert .eyebrow {
  color: #d9f3ff;
}
.measles-alert .alert-status span {
  background: #8de3ff;
  box-shadow: 0 0 0 5px rgba(141, 227, 255, 0.16);
}
.measles-alert > a {
  color: #244e65;
}
.fire-alert > a {
  color: #6b3d17;
}
.alert-meta {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 15px;
  color: #f4cabb;
  font-size: 11px;
  font-weight: 750;
}
.topic-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 9px;
  margin: 28px 0 18px;
}
.topic-strip div {
  display: flex;
  gap: 9px;
  align-items: center;
  padding: 12px 13px;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.topic-strip b {
  color: var(--teal);
  font-size: 18px;
}
.topic-strip span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.group-heading h3 {
  font:
    700 29px/1.1 Georgia,
    serif;
  margin: 0;
}
.group-heading p {
  color: var(--muted);
  font-size: 13px;
  margin: 0;
  max-width: 470px;
}
.directory-grid,
.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}
.directory-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  min-height: 290px;
  box-shadow: 0 4px 18px rgba(16, 42, 43, 0.035);
  transition:
    transform 0.18s,
    box-shadow 0.18s;
}
.directory-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 13px 30px rgba(16, 42, 43, 0.08);
}
.card-top,
.card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.category-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  font-weight: 900;
  font-size: 19px;
}
.category-icon.blue {
  background: var(--blue-bg);
  color: var(--blue);
}
.category-icon.green {
  background: var(--green-bg);
  color: var(--green);
}
.category-icon.amber {
  background: var(--amber-bg);
  color: var(--amber);
}
.save-button {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
  padding: 7px;
}
.save-button span {
  font-size: 19px;
  vertical-align: -1px;
}
.save-button.saved {
  color: var(--teal);
}
.card-category {
  color: var(--teal) !important;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 10px !important;
  font-weight: 850;
  margin: 18px 0 7px !important;
}
.directory-card h3 {
  font:
    700 22px/1.15 Georgia,
    serif;
  margin: 0;
}
.directory-card h3 a {
  text-decoration: none;
}
.directory-card > p {
  color: var(--muted);
  font-size: 14px;
  margin: 12px 0 22px;
}
.card-bottom {
  margin-top: auto;
}
.confidence {
  display: inline-flex;
  width: max-content;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.04em;
}
.confidence.blue {
  background: var(--blue-bg);
  color: var(--blue);
}
.confidence.green {
  background: var(--green-bg);
  color: var(--green);
}
.confidence.amber {
  background: var(--amber-bg);
  color: var(--amber);
}
.details-link {
  font-size: 13px;
  color: var(--teal);
  text-decoration: none;
  font-weight: 800;
}
.no-results {
  text-align: center;
  background: #fff;
  border: 1px dashed var(--line);
  padding: 45px;
  border-radius: 20px;
}
.no-results h3 {
  font:
    700 24px Georgia,
    serif;
  margin: 0;
}
.no-results p {
  color: var(--muted);
}
.promise {
  text-align: center;
  padding-top: 35px;
}
.promise h2 {
  font-size: 42px;
}
.promise-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  text-align: left;
  margin-top: 40px;
}
.promise-grid article {
  border-top: 1px solid var(--line);
  padding: 22px 8px;
}
.promise-grid b {
  color: var(--teal);
}
.promise-grid h3 {
  margin: 8px 0;
}
.promise-grid p {
  color: var(--muted);
  margin: 0;
}
.breadcrumb {
  max-width: 1120px;
  margin: 35px auto 0;
  padding: 0 24px;
  display: flex;
  gap: 10px;
  color: var(--muted);
  font-size: 13px;
}
.breadcrumb a {
  color: var(--teal);
}
.guide {
  max-width: 1120px;
  margin: 35px auto 90px;
  padding: 0 24px;
}
.guide-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 285px;
  gap: 55px;
  align-items: center;
}
.guide h1 {
  font-size: clamp(43px, 6vw, 68px);
}
.guide-hero > div > p:not(.eyebrow) {
  font-size: 19px;
  color: var(--muted);
  max-width: 720px;
}
.guide-actions {
  display: flex;
  gap: 11px;
  align-items: center;
  margin-top: 26px;
  flex-wrap: wrap;
}
.primary-button,
.secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 13px 20px;
  text-decoration: none;
  font-weight: 800;
  border: 0;
  cursor: pointer;
}
.primary-button {
  background: var(--deep);
  color: #fff;
}
.secondary-button {
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink);
}
.source-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 21px;
  box-shadow: var(--shadow);
}
.source-card dl {
  margin: 17px 0 0;
}
.source-card dl div {
  border-top: 1px solid var(--line);
  padding: 11px 0;
}
.source-card dt {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.source-card dd {
  margin: 2px 0 0;
  font-weight: 750;
  font-size: 14px;
}
.warning {
  background: var(--amber-bg);
  border-left: 4px solid var(--amber);
  border-radius: 10px;
  padding: 14px 18px;
  margin: 42px 0;
  display: flex;
  gap: 14px;
}
.warning b {
  color: var(--amber);
}
.warning p {
  margin: 0;
}
.guide-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 54px;
  align-items: start;
}
.content-section {
  padding: 35px 0;
  border-bottom: 1px solid var(--line);
}
.content-section:first-child {
  padding-top: 0;
}
.check-list {
  list-style: none;
  padding: 0;
  margin: 25px 0 0;
  display: grid;
  gap: 13px;
}
.check-list li {
  position: relative;
  padding-left: 29px;
}
.check-list li:before {
  content: "✓";
  position: absolute;
  left: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--mint);
  color: var(--teal);
  font-size: 12px;
  font-weight: 900;
}
.tip-list {
  list-style: none;
  counter-reset: tips;
  padding: 0;
  margin: 25px 0 0;
  display: grid;
  gap: 15px;
}
.tip-list li {
  counter-increment: tips;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
}
.tip-list li:before {
  content: counter(tips);
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--deep);
  color: #fff;
  font-weight: 800;
  font-size: 12px;
}
.faq {
  margin-top: 22px;
}
.faq details {
  border-top: 1px solid var(--line);
}
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 30px 16px 0;
  font-weight: 800;
  position: relative;
}
.faq summary:after {
  content: "+";
  position: absolute;
  right: 4px;
  font-size: 20px;
  color: var(--teal);
}
.faq details[open] summary:after {
  content: "−";
}
.faq p {
  color: var(--muted);
  margin: 0 0 18px;
}
.resource-panel {
  position: sticky;
  top: 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 22px;
}
.resource-panel h2 {
  font-size: 27px;
}
.resource {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 0;
  border-top: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
  font-size: 14px;
}
.resource:first-of-type {
  margin-top: 18px;
}
.resource b {
  color: var(--teal);
}
.resource.primary-resource {
  background: var(--deep);
  color: #fff;
  margin: 18px -8px 8px;
  padding: 14px;
  border-radius: 11px;
  border: 0;
}
.resource.primary-resource b {
  color: #fff;
}
.audit-note {
  font-size: 11px;
  color: var(--muted);
  margin: 18px 0 0;
}
.related {
  border-top: 1px solid var(--line);
  padding-top: 45px;
}
.prose-page {
  max-width: 780px;
  margin: 80px auto 120px;
  padding: 0 24px;
}
.prose-page h1 {
  font-size: 60px;
}
.prose-page .lead {
  font-size: 20px;
  color: var(--muted);
}
.prose-page h2 {
  font:
    700 28px Georgia,
    serif;
  margin: 42px 0 8px;
}
.prose-page p {
  color: var(--muted);
}
.inline-button {
  margin-top: 24px;
}
.toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translate(-50%, 30px);
  background: var(--deep);
  color: #fff;
  padding: 11px 17px;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transition: 0.2s;
  z-index: 99;
  box-shadow: var(--shadow);
}
.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
footer {
  background: var(--deep);
  color: #b9cccc;
  padding: 38px max(24px, calc((100% - 1070px) / 2));
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 22px;
}
footer .footer-brand {
  color: #fff;
}
footer > div:nth-child(2) {
  display: flex;
  gap: 20px;
  align-items: center;
}
footer a {
  text-decoration: none;
}
.fine {
  grid-column: 1/-1;
  border-top: 1px solid #29494a;
  margin: 0;
  padding-top: 18px;
  font-size: 11px;
}
.hidden {
  display: none !important;
}
@media (max-width: 900px) {
  .alerts-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .alerts-grid .current-alert:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    min-height: 300px;
  }
  .directory-groups {
    grid-template-columns: repeat(2, 1fr);
  }
  .topic-strip {
    grid-template-columns: repeat(3, 1fr);
  }
  .directory-grid,
  .related-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .directory-tools {
    align-items: stretch;
    flex-direction: column;
  }
  .guide-hero {
    grid-template-columns: 1fr;
  }
  .source-card {
    max-width: 440px;
  }
  .guide-layout {
    grid-template-columns: 1fr;
  }
  .resource-panel {
    position: static;
  }
  .my-updates {
    grid-template-columns: 1fr;
  }
  .favorite-list {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 650px) {
  .alerts-section {
    padding: 0 12px;
  }
  .alerts-heading {
    align-items: flex-start;
    flex-direction: column;
  }
  .alerts-grid {
    grid-template-columns: 1fr;
  }
  .alerts-grid .current-alert:last-child:nth-child(odd) {
    grid-column: auto;
  }
  .current-alert {
    min-height: 0;
    padding: 23px 20px;
  }
  .current-alert h2 {
    font-size: 29px;
  }
  .current-alert > a {
    text-align: center;
  }
  .topic-strip {
    grid-template-columns: repeat(2, 1fr);
  }
  .directory-groups {
    grid-template-columns: 1fr;
  }
  .group-heading {
    align-items: start;
    flex-direction: column;
    gap: 4px;
  }
  .site-header {
    padding: 15px 16px;
  }
  .site-header nav > a {
    display: none;
  }
  .site-header nav {
    gap: 5px;
  }
  .brand {
    font-size: 16px;
  }
  .hero {
    margin: 45px auto;
  }
  .hero h1 {
    font-size: 44px;
  }
  .hero-copy {
    font-size: 17px;
  }
  .my-updates {
    margin-left: 12px;
    margin-right: 12px;
    padding: 23px 20px;
  }
  .section-heading {
    align-items: start;
    flex-direction: column;
  }
  .section-heading h2 {
    font-size: 31px;
  }
  .directory-grid,
  .related-grid {
    grid-template-columns: 1fr;
  }
  .directory-card {
    min-height: 260px;
  }
  .filters {
    flex-wrap: nowrap;
    overflow: auto;
    padding-bottom: 5px;
  }
  .filters button {
    white-space: nowrap;
  }
  .promise h2 {
    font-size: 35px;
  }
  .promise-grid {
    grid-template-columns: 1fr;
  }
  .guide {
    padding: 0 18px;
  }
  .guide h1,
  .prose-page h1 {
    font-size: 43px;
  }
  .guide-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .guide-actions > * {
    width: 100%;
  }
  .warning {
    align-items: start;
    flex-direction: column;
    gap: 3px;
  }
  .resource-panel {
    margin: 0 -4px;
  }
  .related {
    padding-left: 18px;
    padding-right: 18px;
  }
  footer {
    grid-template-columns: 1fr;
  }
  footer > div:nth-child(2) {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }
  .fine {
    grid-column: 1;
  }
}
.local-clock {
  display: block;
  color: var(--teal);
  font-size: 13px;
  font-weight: 800;
  margin: 3px 0 10px;
}
.local-clock.compact {
  font-size: 11px;
  color: var(--muted);
  margin: -2px 0 10px;
}
.hazard-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 12px 18px;
  text-decoration: none;
  font-weight: 850;
  border: 1px solid #e1a56f;
  background: var(--amber-bg);
  color: #8e4812;
}
.hazard-resource {
  background: var(--amber-bg);
  color: #8e4812;
  margin: 0 -8px 8px;
  padding: 13px 14px;
  border-radius: 11px;
  border-top: 0;
}
.hazard-resource b {
  color: #8e4812;
}
.product-promo {
  margin: 52px 0 0;
  padding: 24px 26px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: linear-gradient(135deg, #ffffff, #edf8f4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  box-shadow: 0 8px 28px rgba(16, 42, 43, 0.06);
}
.product-promo h2 {
  font:
    700 26px/1.15 Georgia,
    serif;
  margin: 0;
}
.product-promo p:not(.eyebrow) {
  color: var(--muted);
  margin: 8px 0 0;
  max-width: 650px;
}
.product-promo a {
  flex: 0 0 auto;
  padding: 11px 17px;
  border: 1px solid var(--teal);
  border-radius: 999px;
  color: var(--teal);
  text-decoration: none;
  font-size: 13px;
  font-weight: 850;
}

/* Flagship visual system */
body {
  background:
    radial-gradient(
      circle at 10% 0%,
      rgba(8, 127, 117, 0.075),
      transparent 28rem
    ),
    var(--paper);
}
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  max-width: none;
  padding: 14px max(24px, calc((100% - 1164px) / 2));
  background: rgba(247, 244, 237, 0.9);
  border-bottom: 1px solid rgba(9, 43, 45, 0.1);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.brand {
  gap: 12px;
  font-size: 17px;
  letter-spacing: -0.015em;
}
.brand-mark {
  position: relative;
  width: 40px;
  height: 40px;
  overflow: visible;
  border-radius: 11px;
  background: var(--deep);
  color: var(--teal);
  font:
    850 18px/1 Georgia,
    serif;
  isolation: isolate;
  box-shadow: 0 6px 16px rgba(9, 43, 45, 0.2);
}
.brand-mark::before {
  content: "";
  position: absolute;
  inset: 8px;
  z-index: -1;
  border-radius: 50%;
  background: var(--paper);
}
.brand-mark::after {
  content: "";
  position: absolute;
  top: -3px;
  right: -3px;
  width: 7px;
  height: 7px;
  border: 2px solid var(--paper);
  border-radius: 50%;
  background: #efa84a;
}
.site-header nav > a {
  color: var(--ink);
  transition: color 0.18s;
}
.site-header nav > a:hover {
  color: var(--teal);
}
.favorites-nav {
  background: #fff;
  box-shadow: 0 4px 14px rgba(16, 42, 43, 0.05);
}
.hero {
  position: relative;
  max-width: 1040px;
  margin: 76px auto 54px;
}
.hero::before {
  content: "1";
  position: absolute;
  z-index: -1;
  top: -95px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(8, 127, 117, 0.045);
  font:
    900 310px/1 Georgia,
    serif;
}
.hero h1 {
  font-size: clamp(48px, 7vw, 82px);
}
.hero h1 em {
  display: inline-block;
  max-width: 920px;
}
.trust-row {
  width: max-content;
  max-width: 100%;
  margin: 26px auto 0;
  padding: 10px 18px;
  border: 1px solid rgba(9, 43, 45, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.58);
}
.my-updates {
  border: 1px solid #23494a;
}
.alerts-heading,
.section-heading {
  padding-bottom: 15px;
  border-bottom: 1px solid var(--line);
}
.current-alert {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.current-alert::after {
  content: "";
  position: absolute;
  right: -60px;
  bottom: -90px;
  width: 210px;
  height: 210px;
  border: 42px solid rgba(255, 255, 255, 0.06);
  border-radius: 50%;
}
.current-alert > * {
  position: relative;
  z-index: 1;
}
.topic-strip div {
  box-shadow: 0 4px 14px rgba(16, 42, 43, 0.035);
}
.directory-card {
  position: relative;
  overflow: hidden;
  border-color: rgba(9, 43, 45, 0.13);
  box-shadow: 0 8px 26px rgba(16, 42, 43, 0.055);
}
.directory-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--teal), #55b99f);
}
.directory-card[data-category="Airport conditions"]::before,
.directory-card[data-category="Airport parking"]::before,
.directory-card[data-category="Ferry status"]::before,
.directory-card[data-category="Cruise port"]::before {
  background: linear-gradient(90deg, #326da8, #79add8);
}
.directory-card[data-category="Power outages"]::before {
  background: linear-gradient(90deg, #a85b19, #efa84a);
}
.primary-button {
  box-shadow: 0 7px 18px rgba(9, 43, 45, 0.18);
}
.source-card,
.resource-panel {
  border-color: rgba(9, 43, 45, 0.13);
}
.product-promo {
  position: relative;
  overflow: hidden;
  padding: 28px 30px;
  border-width: 1px 1px 1px 6px;
  box-shadow: 0 12px 34px rgba(16, 42, 43, 0.09);
}
.product-promo::after {
  content: "";
  position: absolute;
  right: -42px;
  top: -55px;
  width: 160px;
  height: 160px;
  border: 30px solid currentColor;
  border-radius: 50%;
  opacity: 0.045;
}
.promo-copy {
  position: relative;
  z-index: 1;
}
.promo-brand {
  display: inline-flex;
  margin-bottom: 10px;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
}
.product-promo > a {
  position: relative;
  z-index: 1;
  background: #fff;
}
.promo-installablepdf {
  color: #51479b;
  border-color: #6f63bd;
  background: linear-gradient(135deg, #fff, #f0edff);
}
.promo-installablepdf .promo-brand {
  color: #51479b;
  background: #e5e0ff;
}
.promo-installablepdf .eyebrow,
.promo-installablepdf > a {
  color: #51479b;
  border-color: #6f63bd;
}
.promo-offlineready {
  color: #176b5b;
  border-color: #087f75;
  background: linear-gradient(135deg, #fff, #e2f7ef);
}
.promo-offlineready .promo-brand {
  color: #176b5b;
  background: #cfefe4;
}
.promo-offlineready .eyebrow,
.promo-offlineready > a {
  color: #176b5b;
  border-color: #087f75;
}
.promo-tapactions {
  color: #1d5f87;
  border-color: #2d7ba6;
  background: linear-gradient(135deg, #fff, #e7f5fb 72%, #fff0d8);
}
.promo-tapactions .promo-brand {
  color: #1d5f87;
  background: #d8edf7;
}
.promo-tapactions .eyebrow,
.promo-tapactions > a {
  color: #1d5f87;
  border-color: #2d7ba6;
}
footer {
  border-top: 5px solid var(--teal);
  background: #e4ece7;
  color: var(--muted);
}
footer .footer-brand {
  color: var(--deep);
}
footer .fine {
  border-color: #c5d3cd;
}
footer a:hover,
.footer-install:hover {
  color: var(--teal);
}
.install-nav {
  border: 1px solid rgba(8, 127, 117, 0.28);
  background: var(--mint);
  color: var(--teal);
  border-radius: 999px;
  padding: 9px 13px;
  font-size: 13px;
  font-weight: 850;
  cursor: pointer;
}
.install-nav:disabled {
  opacity: 0.68;
  cursor: default;
}
.footer-install {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.modal-open {
  overflow: hidden;
}
.install-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(4, 24, 25, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.install-dialog {
  position: relative;
  width: min(820px, 100%);
  max-height: min(860px, calc(100vh - 44px));
  overflow: auto;
  padding: 30px;
  border-radius: 24px;
  background: var(--paper);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.28);
}
.install-close {
  position: absolute;
  top: 15px;
  right: 16px;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  font-size: 24px;
  cursor: pointer;
}
.install-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 30px;
}
.install-brand > span:last-child b,
.install-brand small {
  display: block;
}
.install-brand small {
  color: var(--muted);
  font-size: 12px;
}
.install-dialog h2 {
  margin: 0;
  max-width: 650px;
  font:
    700 38px/1.08 Georgia,
    serif;
}
.install-lead {
  color: var(--muted);
  max-width: 700px;
}
.install-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 24px;
}
.install-steps article {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}
.install-steps article > span {
  color: var(--teal);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.install-steps h3 {
  margin: 5px 0 10px;
  font:
    700 21px Georgia,
    serif;
}
.install-steps ol {
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
  font-size: 13px;
}
.install-steps li + li {
  margin-top: 7px;
}
.install-note {
  margin: 20px 0 8px;
  padding: 12px 14px;
  border-left: 3px solid #efa84a;
  background: var(--amber-bg);
  color: #754013;
  font-size: 13px;
}
.apple-help {
  color: var(--teal);
  font-size: 13px;
  font-weight: 800;
}
@media (max-width: 650px) {
  .site-header {
    padding: 12px 16px;
  }
  .install-nav {
    padding: 8px 10px;
    font-size: 12px;
  }
  .brand {
    gap: 9px;
    font-size: 15px;
  }
  .brand-mark {
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }
  .hero {
    margin: 48px auto 40px;
  }
  .hero h1 {
    font-size: 42px;
  }
  .hero::before {
    top: -60px;
    font-size: 220px;
  }
  .trust-row {
    width: auto;
    border-radius: 18px;
    gap: 9px 16px;
  }
  .product-promo {
    align-items: flex-start;
    flex-direction: column;
  }
  .product-promo > a {
    width: 100%;
    text-align: center;
  }
  .install-dialog {
    padding: 24px 18px;
    border-radius: 20px;
  }
  .install-dialog h2 {
    font-size: 31px;
  }
  .install-steps {
    grid-template-columns: 1fr;
  }
}
.theme-toggle { display:grid; place-items:center; width:38px; height:38px; border:1px solid var(--line); border-radius:50%; background:var(--card); color:var(--ink); font-size:19px; cursor:pointer; }
.version-panel { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:10px; align-items:center; margin-top:18px; padding:14px; border:1px solid var(--line); border-radius:14px; background:var(--card); }
.version-panel b,.version-panel small { display:block; }.version-panel small{color:var(--muted)}
.version-panel button { border:1px solid var(--teal); border-radius:999px; padding:9px 12px; background:transparent; color:var(--teal); font-size:12px; font-weight:850; cursor:pointer; }
.version-caution { margin:8px 0 12px; color:var(--muted); font-size:11px; }
.trusted-preview { max-width:1120px; margin:0 auto 80px; padding:0 24px; }
.trusted-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:22px; }
.trusted-grid>a { padding:20px; border:1px solid var(--line); border-radius:18px; background:var(--card); text-decoration:none; box-shadow:0 7px 22px rgba(16,42,43,.045); }
.trusted-grid span { color:var(--teal); font-size:9px; font-weight:900; letter-spacing:.09em; }
.trusted-grid h3 { margin:7px 0; font:700 22px Georgia,serif; }
.trusted-grid p { min-height:78px; margin:0 0 14px; color:var(--muted); font-size:13px; }
.trusted-grid b,.trusted-more { color:var(--teal); font-size:12px; }.trusted-more{display:inline-block;margin-top:16px;font-weight:850}
.trusted-page{max-width:850px}.trusted-detail{padding:30px 0;border-bottom:1px solid var(--line)}.trusted-detail h2{margin-top:0}
html[data-theme="dark"] { color-scheme:dark; --ink:#edf5f3; --paper:#0d2021; --card:#142b2c; --line:#3f5b5c; --muted:#c1cfcd; --teal:#70dfd1; --blue:#8bcaff; --amber:#f3b45f; --green:#72ddb9; --mint:#173e39; --blue-bg:#19344d; --amber-bg:#3b2b1a; --green-bg:#183c35; --shadow:0 18px 55px rgba(0,0,0,.25); }
html[data-theme="dark"] body{background:radial-gradient(circle at 10% 0%,rgba(27,157,143,.12),transparent 28rem),var(--paper)}
html[data-theme="dark"] .site-header{background:rgba(13,32,33,.9);border-color:#294142}
html[data-theme="dark"] .search,html[data-theme="dark"] .directory-card,html[data-theme="dark"] .source-card,html[data-theme="dark"] .resource-panel,html[data-theme="dark"] .secondary-button,html[data-theme="dark"] .topic-strip div,html[data-theme="dark"] .favorite-item,html[data-theme="dark"] .install-dialog,html[data-theme="dark"] .install-steps article{background:var(--card)}
html[data-theme="dark"] .favorites-nav{background:#173031;color:var(--ink)}html[data-theme="dark"] .primary-button{background:#0c756d}html[data-theme="dark"] .trust-row{background:rgba(20,43,44,.8)}
html[data-theme="dark"] .filters button{background:#193334;color:#e8f1ee;border-color:#466162}
html[data-theme="dark"] .filters button:hover,html[data-theme="dark"] .filters button:focus-visible{background:#234445;color:#fff;border-color:#6f8d8b}
html[data-theme="dark"] .filters button.active{background:#20a696;color:#061d1d;border-color:#62d6c7}
html[data-theme="dark"] .install-note{background:#3b2b1a;color:#ffe0b2;border-left-color:#f3b45f}
html[data-theme="dark"] .version-panel small,html[data-theme="dark"] .version-caution{color:#c8d5d3}
html[data-theme="dark"] .version-panel button{background:#173e3b;color:#8bf1e4;border-color:#62d6c7}
html[data-theme="dark"] .version-panel button:hover,html[data-theme="dark"] .version-panel button:focus-visible{background:#22534f;color:#fff;border-color:#9af5e9}
html[data-theme="dark"] .apple-help{color:#8bf1e4}
html[data-theme="dark"] .apple-help:hover,html[data-theme="dark"] .apple-help:focus-visible{color:#fff}
html[data-theme="dark"] .site-header .brand{color:#c8d5d3}
html[data-theme="dark"] .site-header .brand b{color:#70dfd1}
html[data-theme="dark"] .site-header .brand-mark{background:#071f20;color:#70dfd1;box-shadow:0 6px 16px rgba(0,0,0,.32)}
html[data-theme="dark"] .site-header .brand-mark::before{background:#173334}
html[data-theme="dark"] .site-header .brand-mark::after{border-color:#0d2021}
html[data-theme="dark"] .hazard-button,html[data-theme="dark"] .hazard-resource,html[data-theme="dark"] .hazard-resource b{color:#ffe0b2}
html[data-theme="dark"] .hazard-button{border-color:#b77836}
html[data-theme="dark"] .primary-button,html[data-theme="dark"] .resource.primary-resource{color:#fff}
html[data-theme="dark"] .promo-installablepdf{color:#d9d2ff;border-color:#8f83d8}
html[data-theme="dark"] .promo-installablepdf .promo-brand{color:#eeeaff;background:#3b3569}
html[data-theme="dark"] .promo-installablepdf .eyebrow,html[data-theme="dark"] .promo-installablepdf>a{color:#e5e0ff;border-color:#9d91e8}
html[data-theme="dark"] .promo-offlineready{color:#b8efdc;border-color:#3fae9d}
html[data-theme="dark"] .promo-offlineready .promo-brand{color:#d9fff1;background:#205247}
html[data-theme="dark"] .promo-offlineready .eyebrow,html[data-theme="dark"] .promo-offlineready>a{color:#b8efdc;border-color:#55c8b5}
html[data-theme="dark"] .promo-tapactions{color:#c7e9ff;border-color:#589ec8}
html[data-theme="dark"] .promo-tapactions .promo-brand{color:#e4f5ff;background:#234b63}
html[data-theme="dark"] .promo-tapactions .eyebrow,html[data-theme="dark"] .promo-tapactions>a{color:#c7e9ff;border-color:#6bb7e3}
html[data-theme="dark"] .product-promo>a{background:#183132}
html[data-theme="dark"] .favorite-remove{background:#263233;color:#f2aaa0}html[data-theme="dark"] .install-close{background:#203839;color:var(--ink)}
html[data-theme="dark"] footer{background:#09191a;color:var(--muted)}html[data-theme="dark"] footer .footer-brand{color:var(--ink)}html[data-theme="dark"] footer .fine{border-color:#294142}
html[data-theme="dark"] .promo-installablepdf{background:linear-gradient(135deg,#1d2237,#28234b)}html[data-theme="dark"] .promo-offlineready{background:linear-gradient(135deg,#122a29,#153f38)}html[data-theme="dark"] .promo-tapactions{background:linear-gradient(135deg,#142a38,#193b4d)}
html[data-theme="dark"] .product-promo p:not(.eyebrow){color:#bdcbca}html[data-theme="dark"] .prose-page p{color:var(--muted)}
@media(max-width:900px){.trusted-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:650px){.theme-toggle{width:34px;height:34px}.version-panel{grid-template-columns:1fr}.trusted-grid{grid-template-columns:1fr}.trusted-grid p{min-height:0}}

/* v29 PlanetWindow companion layer */
.planetwindow-partner,.ecosystem-partner{margin:2rem auto;padding:1.4rem;border:1px solid #b9d8d2;border-radius:18px;background:linear-gradient(135deg,#eef8f5,#fff);display:flex;align-items:center;justify-content:space-between;gap:1.25rem}.planetwindow-partner h2,.ecosystem-partner h2{margin:.2rem 0 .45rem}.planetwindow-partner p,.ecosystem-partner p{margin:.25rem 0;max-width:720px}.ecosystem-partner{max-width:1180px}.ecosystem-partner.compact{margin:2rem}.partner-hero{background:linear-gradient(135deg,#e8f6f3,#fff7e5)}.partner-pair-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.partner-pair{border:1px solid #d6e3df;border-radius:15px;padding:1rem;background:#fff;display:grid;grid-template-columns:1fr 1fr;gap:1rem}.partner-pair span{display:block;font-size:.72rem;font-weight:800;letter-spacing:.08em;color:#52706a;margin-bottom:.35rem}.partner-pair h3{font-size:1rem;margin:0}.partner-pair a{font-weight:750}.category-hubs{display:flex;flex-wrap:wrap;gap:.6rem}.category-hubs a{border:1px solid #cbdad7;border-radius:999px;padding:.55rem .8rem;background:#fff;font-weight:700}@media(max-width:760px){.planetwindow-partner,.ecosystem-partner{align-items:flex-start;flex-direction:column}.partner-pair-grid{grid-template-columns:1fr}.partner-pair{grid-template-columns:1fr}.ecosystem-partner.compact{margin:1rem}}

/* Directory and PlanetWindow companion pages */
.directory-page{padding:44px 24px 72px}
.directory-hero,.directory-section{width:min(100%,1164px);margin-inline:auto}
.directory-hero{padding:46px clamp(24px,5vw,64px);border:1px solid #c9ded9;border-radius:24px;background:linear-gradient(135deg,#e8f6f3,#fff7e5);box-shadow:var(--shadow)}
.directory-hero h1{max-width:850px;margin:.4rem 0 1rem;font:700 clamp(42px,6vw,68px)/1.02 Georgia,serif;letter-spacing:-.035em;color:#092b2d}
.directory-hero>p:not(.eyebrow){max-width:790px;margin:.4rem 0;color:#49635f;font-size:1.05rem;line-height:1.65}
.directory-hero .hero-actions{justify-content:flex-start;margin-top:1.5rem}
.directory-section{padding-top:46px}
.directory-section .section-heading{margin-bottom:22px}
.directory-section .section-heading h2{color:var(--ink);font-size:clamp(30px,4vw,44px)}
.partner-pair-grid{gap:16px}
.partner-pair{min-height:132px;padding:20px;border-color:var(--line);background:var(--card);box-shadow:0 8px 24px rgba(9,43,45,.06)}
.partner-pair>div{display:flex;flex-direction:column;justify-content:center;min-width:0}
.partner-pair>div+div{padding-left:18px;border-left:1px solid var(--line)}
.partner-pair span{color:#52706a}
.partner-pair h3{font-size:1.08rem;line-height:1.45}
.partner-pair a{color:#087f75;line-height:1.45;text-underline-offset:3px}
html[data-theme="dark"] .directory-hero{border-color:#355354;background:linear-gradient(135deg,#163a37,#292b20)}
html[data-theme="dark"] .directory-hero h1{color:#f2f7f5}
html[data-theme="dark"] .directory-hero>p:not(.eyebrow){color:#c5d4d1}
html[data-theme="dark"] .partner-pair{border-color:#3f5b5c;background:var(--card);box-shadow:0 10px 28px rgba(0,0,0,.18)}
html[data-theme="dark"] .partner-pair span{color:#9fbcb7}
html[data-theme="dark"] .partner-pair a{color:#86e7db}
@media(max-width:760px){.directory-page{padding:24px 14px 54px}.directory-hero{padding:30px 22px;border-radius:19px}.directory-hero h1{font-size:clamp(38px,11vw,54px)}.directory-section{padding-top:34px}.partner-pair{min-height:0}.partner-pair>div+div{padding:14px 0 0;border-left:0;border-top:1px solid var(--line)}}

/* v30 complete dark-mode contrast repair */
html[data-theme="dark"] .skip,
html[data-theme="dark"] .no-results,
html[data-theme="dark"] .category-hubs a{
  background:var(--card);
  color:var(--ink);
  border-color:var(--line);
}
html[data-theme="dark"] .planetwindow-partner,
html[data-theme="dark"] .ecosystem-partner{
  background:linear-gradient(135deg,#173b38,#172f31);
  border-color:#41615e;
  color:var(--ink);
}
html[data-theme="dark"] .planetwindow-partner p,
html[data-theme="dark"] .ecosystem-partner p{
  color:#c5d4d1;
}
html[data-theme="dark"] .product-promo:not(.promo-installablepdf):not(.promo-offlineready):not(.promo-tapactions){
  background:linear-gradient(135deg,#142b2c,#173e39);
  border-color:var(--line);
}
html[data-theme="dark"] .search input::placeholder{
  color:#9fb2af;
  opacity:1;
}
html[data-theme="dark"] .favorite-chip,
html[data-theme="dark"] .resource,
html[data-theme="dark"] .secondary-button,
html[data-theme="dark"] .directory-card h3 a{
  color:var(--ink);
}
html[data-theme="dark"] .category-hubs a:hover,
html[data-theme="dark"] .category-hubs a:focus-visible,
html[data-theme="dark"] .secondary-button:hover,
html[data-theme="dark"] .secondary-button:focus-visible{
  background:#214243;
  color:#fff;
  border-color:#6a8b87;
}
html[data-theme="dark"] .no-results p,
html[data-theme="dark"] .source-card dt,
html[data-theme="dark"] .audit-note,
html[data-theme="dark"] .breadcrumb,
html[data-theme="dark"] .faq p{
  color:var(--muted);
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible{
  outline:3px solid var(--teal);
  outline-offset:3px;
}
/* v31 mobile resilience */
.directory-card,.guide-hero>*,.guide-layout>*,.resource-panel{min-width:0}.directory-card h3,.guide h1,.guide h2,.resource span{overflow-wrap:anywhere}@media(max-width:650px){.guide-actions>a,.guide-actions>button{width:100%;text-align:center;justify-content:center}.source-card{width:100%}.resource-panel{position:static}.topic-strip{grid-template-columns:repeat(2,minmax(0,1fr))}}