/* Raised, layered homepage CTAs inspired by the supplied button references. */
.feature-card .pill,
.newsletter-form .pill {
  position: relative;
  border-width: 1px;
  border-style: solid;
  border-radius: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78),
    inset 0 -2px 0 rgba(0, 0, 0, 0.08),
    0 4px 0 rgba(0, 0, 0, 0.12),
    0 8px 18px rgba(0, 0, 0, 0.18);
  transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease,
    transform 180ms ease;
}

/* Light raised finish stays readable over the dark homepage feature image. */
.feature-card .pill {
  border-color: #fff;
  background: linear-gradient(180deg, #fff9f4 0%, #f5f3ee 48%, #dedbd3 100%) !important;
  color: #171717 !important;
}

.feature-card .pill:hover,
.feature-card .pill:focus-visible {
  border-color: #fff !important;
  background: linear-gradient(180deg, #faf9f5 0%, #faf9f5 52%, #ebe8e0 100%) !important;
  color: #111 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -2px 0 rgba(0, 0, 0, 0.06),
    0 5px 0 rgba(0, 0, 0, 0.13),
    0 12px 22px rgba(0, 0, 0, 0.24);
  transform: translateY(-2px);
}

/* Dark graphite finish gives the newsletter action the same dimensional style. */
.newsletter-form .pill {
  min-height: 2.75rem;
  padding: 0.55rem 1.1rem;
  border-color: #494949;
  border-radius: 0.65rem;
  font: 600 0.92rem / 1.2 'Open Sans', Arial, sans-serif;
  background: linear-gradient(180deg, #454545 0%, #303030 50%, #222 100%);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -2px 0 rgba(0, 0, 0, 0.24),
    0 4px 0 rgba(0, 0, 0, 0.12),
    0 8px 18px rgba(0, 0, 0, 0.14);
}

.newsletter-form .pill:hover,
.newsletter-form .pill:focus-visible {
  border-color: #626262;
  background: linear-gradient(180deg, #555 0%, #3a3a3a 52%, #292929 100%);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -2px 0 rgba(0, 0, 0, 0.2),
    0 5px 0 rgba(0, 0, 0, 0.13),
    0 12px 22px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}

.feature-card .pill:active,
.newsletter-form .pill:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.14), 0 1px 2px rgba(0, 0, 0, 0.14);
  transform: translateY(1px);
}

@media (prefers-reduced-motion: reduce) {
  .feature-card .pill,
  .newsletter-form .pill {
    transition: none;
  }
}

/* FAQ expanders become clear, raised tap targets without changing their behavior. */
.faq-list {
  display: grid;
  gap: 0.55rem;
  border-top: 0;
}

.faq-item {
  border: 0;
}

.faq-trigger {
  min-height: 4.25rem;
  margin: 0;
  padding: 0.9rem 1.05rem;
  border: 1px solid #d4d0c8;
  border-radius: 0.7rem;
  background: linear-gradient(180deg, #fff9f4 0%, #f2f0ea 55%, #dedbd3 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8),
    inset 0 -2px 0 rgba(0, 0, 0, 0.06),
    0 3px 0 rgba(0, 0, 0, 0.08),
    0 6px 14px rgba(0, 0, 0, 0.08);
  transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease,
    transform 180ms ease;
}

.faq-trigger:hover,
.faq-trigger:focus-visible {
  border-color: #bcb8af;
  background: linear-gradient(180deg, #faf9f5 0%, #f8f6f1 55%, #e8e5dd 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 4px 0 rgba(0, 0, 0, 0.09),
    0 9px 18px rgba(0, 0, 0, 0.12);
  transform: translateY(-1px);
}

.faq-trigger[aria-expanded="true"] {
  border-color: #494949;
  background: linear-gradient(180deg, #454545 0%, #303030 52%, #222 100%);
  color: #fff;
}

.faq-trigger[aria-expanded="true"] .faq-symbol {
  color: #fff;
}

.faq-trigger:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.13), 0 1px 2px rgba(0, 0, 0, 0.1);
  transform: translateY(1px);
}

/* Keep map pins compact, while giving their labels the same raised material. */
.map-section .map-marker .marker-label {
  border: 0;
  background: linear-gradient(180deg, #fff9f4 0%, #f2f0ea 55%, #dedbd3 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 2px 5px rgba(0, 0, 0, 0.12);
}

.map-section .map-marker:hover .marker-label,
.map-section .map-marker:focus-visible .marker-label {
  background: linear-gradient(180deg, #faf9f5 0%, #f8f6f1 55%, #e8e5dd 100%);
}

.map-section .map-marker[aria-pressed="true"] {
  background: linear-gradient(180deg, #454545 0%, #303030 52%, #222 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 4px 12px rgba(0, 0, 0, 0.2);
}

.map-section .map-marker[aria-pressed="true"] .marker-label {
  background: transparent;
  box-shadow: none;
}

.map-section .section-heading > h2,
.newsletter-section .section-heading > h2,
.faq-section .section-heading > h2 {
  font-size: var(--text-h2);
  line-height: 1.12;
}

@media (prefers-reduced-motion: reduce) {
  .faq-trigger {
    transition: none;
  }
}

/* Rebalance headings after removing the small eyebrow labels. */
.map-section .section-heading,
.faq-section .section-heading,
.newsletter-section .section-heading {
  display: grid;
  gap: 0.75rem;
}

.map-section .section-heading > h2,
.map-section .section-heading > p,
.faq-section .section-heading > h2,
.faq-section .section-heading > p,
.newsletter-section .section-heading > h2,
.newsletter-section .section-heading > p {
  margin: 0;
}

.map-section .section-heading,
.faq-section .section-heading {
  margin-bottom: 2rem;
}

/* Anthropic-inspired feature CTA: compact sans-serif label and a standalone arrow icon. */
.feature-card .pill{min-height:2.25rem;padding:.5rem 1rem;gap:.5rem;border-radius:.5rem;font:400 .9375rem/1 'Open Sans',Arial,sans-serif;letter-spacing:-.005em;box-shadow:inset 0 1px 0 rgba(255,255,255,.78),inset 0 -2px 0 rgba(0,0,0,.08),0 3px 0 rgba(0,0,0,.12),0 7px 15px rgba(0,0,0,.17)}
.feature-card .pill .feature-arrow{display:inline-flex;width:1rem;height:1rem;align-items:center;justify-content:center;transition:transform .18s ease}.feature-card .pill .feature-arrow svg{display:block;width:100%;height:100%;fill:currentColor}.feature-card .pill:hover .feature-arrow,.feature-card .pill:focus-visible .feature-arrow{transform:translateX(2px)}


/* Restore a clear hover/focus outline on the map pins and keep the custom cursor target visible. */
.map-section .europe-map .map-marker:focus-visible{outline:1px solid currentColor;outline-offset:3px}
