/* PlotSafe — shared stylesheet
   Ported 1:1 from the Claude Design source (PlotSafe Home.dc.html / PlotSafe NRI.dc.html).
   Layout below is still authored with inline styles on each element, exactly as designed —
   this file only carries what inline styles structurally cannot: responsive overrides and
   :hover states (the design used a `style-hover` build-time attribute; here that becomes
   real CSS via classes + !important, which is the only way to beat an inline style's
   specificity without touching every element's markup). */

body { margin: 0; background: #FDFCF8; -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
a { color: #123B2C; text-decoration-color: #C08D2A; text-underline-offset: 3px; }
a:hover { color: #C08D2A; }

/* ---------- Hover states (design's style-hover, made real) ---------- */
.btn-dark:hover        { background: #0C2A1F !important; }
.btn-gold:hover         { background: #D8A33A !important; }
.btn-outline-dark:hover { background: rgba(18,59,44,0.06) !important; }
.btn-outline-light:hover{ background: rgba(247,244,236,0.08) !important; }
.nav-link:hover         { color: #C08D2A !important; }
.link-underline:hover   { color: #C08D2A !important; }

/* ---------- Image placeholder (stands in for the design's <image-slot>) ---------- */
.img-slot {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  padding: 20px;
  font-family: 'Public Sans', system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: #8A8471;
  background: #EDE7D8;
}
.img-slot span { max-width: 22em; }

/* ---------- Responsive rules, union of both source pages ---------- */
@media (max-width: 1000px) {
  [style*="grid-template-columns: repeat(3"] { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important; }
  [style*="grid-template-columns: repeat(4"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="font-size: 74px"] { font-size: 52px !important; }
  [style*="font-size: 66px"] { font-size: 48px !important; }
  [style*="font-size: 56px"], [style*="font-size: 54px"] { font-size: 40px !important; }
  [style*="font-size: 46px"] { font-size: 36px !important; }
  [style*="font-size: 42px"], [style*="font-size: 40px"] { font-size: 33px !important; }
  [style*="gap: 64px"], [style*="gap: 60px"], [style*="gap: 56px"], [style*="gap: 44px"] { gap: 38px !important; }
  [style*="gap: 8px"][style*="repeat(3"] { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 900px) {
  [style*="grid-template-columns: 0"], [style*="grid-template-columns: 1"], [style*="grid-template-columns: repeat(2"] { grid-template-columns: 1fr !important; }
  table { display: block; overflow-x: auto; white-space: nowrap; }
  [style*="bottom: -22px"] { position: static !important; left: auto !important; margin-top: 14px; max-width: none !important; box-shadow: none !important; }
  header nav { flex-wrap: wrap; justify-content: flex-end; gap: 16px !important; }
  [style*="z-index: 50"] div { flex-wrap: wrap; }
}
@media (max-width: 700px) {
  section, header, footer { padding-left: 18px !important; padding-right: 18px !important; }
  [style*="font-size: 74px"] { font-size: 40px !important; }
  [style*="font-size: 66px"] { font-size: 38px !important; }
  [style*="font-size: 56px"], [style*="font-size: 54px"] { font-size: 31px !important; }
  [style*="font-size: 46px"] { font-size: 29px !important; }
  [style*="font-size: 42px"], [style*="font-size: 40px"] { font-size: 27px !important; }
  [style*="grid-template-columns: repeat(4"] { grid-template-columns: 1fr !important; }
  header nav a:not([href*="wa.me"]) { display: none; }
  [style*="justify-self: end"] { justify-self: stretch !important; justify-content: center; }
  [style*="padding: 40px 44px"] { padding: 28px 22px !important; }
}