@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&display=swap");

/*
 * Page-local field-guide treatment. The wrapper keeps the tools page from
 * changing the shared shell or the styles of other live widgets.
 */
.tools-editorial {
  --tools-paper: #f5f4ee;
  --tools-panel: #fbfaf5;
  --tools-ink: #193a32;
  --tools-muted: #667870;
  --tools-line: #d4ddd4;
  --tools-moss: #28594a;
  --tools-rust: #a75336;
  --tools-wheat: #e6c477;
  background: var(--tools-paper);
  color: var(--tools-ink);
  font-family: "DM Sans", sans-serif;
}

.tools-editorial h1,
.tools-editorial h2,
.tools-editorial h3,
.tools-editorial h4,
.tools-editorial .font-serif {
  font-family: "Fraunces", Georgia, serif !important;
  color: var(--tools-ink) !important;
  letter-spacing: -.045em;
}

.tools-editorial > section:first-child {
  background: var(--tools-ink) !important;
  padding-top: clamp(4.5rem, 9vw, 8rem) !important;
  padding-bottom: clamp(4.5rem, 9vw, 8rem) !important;
}
.tools-editorial > section:first-child h1 {
  color: var(--tools-paper) !important;
  font-size: clamp(3rem, 7vw, 6.25rem) !important;
  font-weight: 500 !important;
  line-height: .95 !important;
}
.tools-editorial > section:first-child p {
  color: #c8d7cd !important;
  font-size: clamp(1.05rem, 2vw, 1.35rem) !important;
}
.tools-editorial > section:first-child a:first-child {
  background: var(--tools-wheat) !important;
  color: var(--tools-ink) !important;
}
.tools-editorial > section:first-child a + a {
  border-color: rgba(247,246,239,.75) !important;
}

.tools-editorial .rounded,
.tools-editorial .rounded-lg,
.tools-editorial .rounded-xl,
.tools-editorial .rounded-2xl,
.tools-editorial .rounded-full { border-radius: 0 !important; }
.tools-editorial .shadow-md,
.tools-editorial .shadow-lg,
.tools-editorial .shadow-xl {
  box-shadow: 0 10px 24px rgba(25,58,50,.08) !important;
}
.tools-editorial .bg-white { background: var(--tools-panel) !important; }
.tools-editorial .bg-gray-50,
.tools-editorial .bg-gray-100 { background: #e9eee8 !important; }
.tools-editorial .border-gray-200,
.tools-editorial .border-gray-300 { border-color: var(--tools-line) !important; }
.tools-editorial .text-gray-500,
.tools-editorial .text-gray-600,
.tools-editorial .text-gray-700 { color: var(--tools-muted) !important; }
.tools-editorial .text-golf-navy { color: var(--tools-ink) !important; }
.tools-editorial .text-golf-blue { color: var(--tools-moss) !important; }
.tools-editorial .text-golf-green { color: var(--tools-moss) !important; }
.tools-editorial .bg-golf-blue,
.tools-editorial .bg-golf-green { background: var(--tools-moss) !important; }

.tools-editorial > div.bg-gray-50 { border-color: var(--tools-line) !important; }
.tools-editorial > section:nth-of-type(2) { background: var(--tools-paper) !important; }
.tools-editorial > section:nth-of-type(2) > div > .grid:first-child {
  border-top: 1px solid var(--tools-line);
  border-bottom: 1px solid var(--tools-line);
  gap: 1px;
  background: var(--tools-line);
}
.tools-editorial > section:nth-of-type(2) > div > .grid:first-child > div {
  background: var(--tools-paper);
  border-radius: 0 !important;
}
.tools-editorial > section:nth-of-type(2) > div > .grid:first-child > div > div:first-child {
  font: 500 clamp(1.8rem, 3vw, 2.7rem)/1 "Fraunces", Georgia, serif;
}
.tools-editorial > section:nth-of-type(2) > div > .text-center h2 {
  font-weight: 500 !important;
}

/* The three primary tools are ruled editorial cards with square controls. */
.tools-editorial > section:nth-of-type(2) > div > .grid:nth-of-type(2) > div {
  border: 1px solid var(--tools-line) !important;
  border-width: 1px !important;
  box-shadow: none !important;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.tools-editorial > section:nth-of-type(2) > div > .grid:nth-of-type(2) > div:hover {
  border-color: var(--tools-moss) !important;
  box-shadow: 0 14px 28px rgba(25,58,50,.1) !important;
  transform: translateY(-3px);
}
.tools-editorial > section:nth-of-type(2) > div > .grid:nth-of-type(2) > div > div:first-child {
  background: var(--tools-moss) !important;
  border-radius: 0 !important;
}
.tools-editorial > section:nth-of-type(2) a {
  border-radius: 0 !important;
  font: 700 .68rem "DM Mono", monospace;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.tools-editorial > section:nth-of-type(3) {
  background: var(--tools-ink) !important;
  color: var(--tools-paper) !important;
}
.tools-editorial > section:nth-of-type(3) h2,
.tools-editorial > section:nth-of-type(3) h3 { color: var(--tools-paper) !important; }
.tools-editorial > section:nth-of-type(3) svg { color: var(--tools-wheat) !important; }

.tools-editorial > section:nth-of-type(4) { background: var(--tools-paper) !important; }
.tools-editorial .faq-button { color: var(--tools-ink); }
.tools-editorial .faq-button h3 { color: var(--tools-ink) !important; }
.tools-editorial .faq-button .faq-icon { color: var(--tools-moss) !important; }
.tools-editorial .faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease-out;
}
.tools-editorial .faq-answer.active {
  max-height: 500px;
  transition: max-height .3s ease-in;
}
.tools-editorial .faq-icon.active { transform: rotate(180deg); }
.tools-editorial > section:nth-of-type(4) > div > .space-y-6 > div {
  border-width: 1px !important;
  border-color: var(--tools-line) !important;
  box-shadow: none !important;
}

.tools-editorial a:focus-visible,
.tools-editorial button:focus-visible,
.tools-editorial input:focus-visible,
.tools-editorial select:focus-visible {
  outline: 3px solid var(--tools-rust);
  outline-offset: 2px;
}

@media (max-width: 767px) {
  .tools-editorial > section:first-child h1 {
    font-size: clamp(2.9rem, 14vw, 4.7rem) !important;
  }
  .tools-editorial > section:nth-of-type(2) > div > .grid:first-child {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .tools-editorial > section:nth-of-type(2) > div > .grid:nth-of-type(2) > div:hover {
    transform: none;
  }
  .tools-editorial > section:nth-of-type(2) > div > .grid:nth-of-type(2) > div {
    padding: 1.5rem !important;
  }
}