/* 2026 FixCaribbean informational-site enhancements (Namecheap static site). */
.hero {position:relative; isolation:isolate; overflow:hidden; min-height:195px; display:flex; align-items:center}
.hero::before {content:"";position:absolute;z-index:-1;inset:0 0 0 25%;background:url("caribbean-map.svg") right center/auto 145% no-repeat;opacity:.35;pointer-events:none}
.hero::after {content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,rgba(22,77,32,.45),transparent 85%);pointer-events:none}
.hero .wrap {width:100%}
.hero h1 {font-weight:600;max-width:780px;font-size:clamp(28px,3.2vw,42px)}
.hero p {max-width:670px}
.hero-features {display:flex;gap:9px;flex-wrap:wrap;margin:16px 0}
.hero-features span {border:1px solid rgba(255,255,255,.55);border-radius:20px;padding:5px 11px;font-size:13px;font-weight:600;background:rgba(0,0,0,.15)}
.hero-actions {display:flex;gap:12px;flex-wrap:wrap;margin-top:12px}
.hero-actions a {padding:10px 15px;border-radius:4px;font-weight:bold;text-decoration:none;border:2px solid white;background:white;color:#18642a}
.hero-actions a.secondary {background:transparent;color:white}
.hero-actions a:hover {background:#e9f6e9;color:#135a25}
.feature-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.feature-card {border:1px solid var(--line);padding:20px;border-radius:5px;background:#fafcf9}
.feature-card h3 {font-weight:600;margin-bottom:8px}
.feature-card p {margin:0;color:#49574e}
.steps.five {grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.tile {border-radius:5px;transition:box-shadow .15s ease}
.tile:hover {box-shadow:0 5px 18px rgba(0,0,0,.075)}
.note {border-left:4px solid var(--green);padding:12px 16px;background:#f1f7f1}
.faq-list details {border-bottom:1px solid var(--line);padding:14px 4px}
.faq-list summary {cursor:pointer;font-weight:600;color:#1c502b}
.faq-list p {margin:10px 0 0;max-width:850px}
.gallery-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.gallery-grid figure {border:1px solid var(--line);padding:12px;margin:0;background:#fff}
.gallery-grid img {display:block;width:100%;max-height:300px;object-fit:contain;background:#f5f7f5}
.gallery-grid figcaption {padding:10px 2px 0;font-size:13px;color:#4a554e}
.cta-row {display:flex;gap:12px;flex-wrap:wrap}
@media(max-width:900px){.steps.five{grid-template-columns:repeat(3,1fr)}}
@media(max-width:650px){.steps.five,.feature-grid,.gallery-grid{grid-template-columns:1fr}.hero::before{inset:0;background-size:auto 100%;background-position:right center;opacity:.2}.hero{min-height:0}.hero-actions a{width:100%;text-align:center}}
@media(prefers-reduced-motion:reduce){.tile{transition:none}}

/* Feature icon and mobile heading refinement — 2026-10-28. */
.hero-features .hero-feature{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;line-height:1.35}
.hero-feature svg{display:block;width:19px;height:19px;flex:0 0 19px;color:#fff}
@media(max-width:650px){
 .hero h1{font-size:clamp(25px,6.65vw,30px);letter-spacing:-.025em;line-height:1.19;max-width:100%;text-wrap:balance}
 .hero-features{gap:9px}
 .hero-features .hero-feature{font-size:13px;padding:8px 11px}
 .hero-feature svg{width:18px;height:18px;flex-basis:18px}
}


/* FixCaribbean mobile polish — 2026-10-28.
   Explicit direct-child selectors prevent a nested badge-label <span> from
   inheriting the generic .hero-features span pill styling. */
.hero-features > .hero-feature {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  gap: 7px;
  width: auto;
  max-width: 100%;
  min-height: 0;
  padding: 7px 11px;
  border: 1px solid rgba(255,255,255,.62);
  border-radius: 999px;
  background: rgba(0,0,0,.12);
  line-height: 1.25;
  font-size: 13px;
  white-space: nowrap;
}
.hero-features > .hero-feature > span {
  display: inline;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  line-height: inherit;
  font-size: inherit;
  font-weight: inherit;
  white-space: inherit;
}
.hero-features > .hero-feature > svg {
  display: block;
  flex: 0 0 19px;
  width: 19px;
  height: 19px;
  max-width: 19px;
  max-height: 19px;
  min-width: 19px;
  min-height: 19px;
  stroke: #fff;
  fill: none;
}
@media (max-width: 650px) {
  .hero h1 {
    font-size: clamp(21px, 5.6vw, 26px);
    line-height: 1.22;
    letter-spacing: -.025em;
    text-wrap: wrap;
    overflow-wrap: normal;
  }
  .hero-features {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 14px 0;
  }
  .hero-features > .hero-feature {
    font-size: 12.5px;
    padding: 7px 10px;
    min-height: 34px;
  }
  .hero-features > .hero-feature > svg {
    flex-basis: 18px;
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    max-width: 18px;
    max-height: 18px;
  }
  /* Keep existing country branding, descriptions, statuses and links. */
  #countries .country-grid { gap: 12px; }
  #countries .tile {
    padding: 14px 16px 16px;
    min-width: 0;
  }
  #countries .tile img {
    display: block;
    width: 100%;
    height: 72px;
    max-height: 72px;
    object-fit: contain;
    object-position: left center;
    margin: 0 0 9px;
  }
  #countries .tile .txtlogo {
    height: 72px;
    margin-bottom: 9px;
  }
  #countries .tile .flag {
    margin: 0 0 7px;
    padding: 3px 7px;
    font-size: 12px;
  }
  #countries .tile h3 {
    margin: 0 0 5px;
    line-height: 1.3;
  }
  #countries .tile p {
    min-height: 0;
    margin: 0 0 9px;
    line-height: 1.45;
  }
  #countries .tile a {
    display: inline-block;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }
}