:root {
  color-scheme: light;
  --paper: #f4f7f5;
  --surface: #ffffff;
  --ink: #0c1814;
  --muted: #5d6b65;
  --pine: #17543f;
  --pine-dark: #0f3c2d;
  --mint: #dcefe7;
  --cobalt: #2457d6;
  --line: #d8e1dc;
  --danger: #b42318;
}

* { box-sizing: border-box; }
html { background: var(--paper); }
body.marketing-page {
  margin: 0;
  min-width: 320px;
  background:
    linear-gradient(rgba(23, 84, 63, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 84, 63, 0.03) 1px, transparent 1px),
    var(--paper);
  background-size: 48px 48px;
  color: var(--ink);
  font-family: Inter, sans-serif;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, .font-display { font-family: Manrope, sans-serif; }
::selection { background: #bfe4d4; color: var(--ink); }
[hidden] { display: none !important; }
a, button, select, summary { cursor: pointer; touch-action: manipulation; }
.page-shell { width: min(100% - 2rem, 88rem); margin-inline: auto; }
.text-balance { text-wrap: balance; }
section[id] { scroll-margin-top: 7rem; }

.skip-link {
  position: fixed;
  z-index: 100;
  top: .75rem;
  left: .75rem;
  transform: translateY(-160%);
  border-radius: .75rem;
  background: var(--ink);
  color: white;
  padding: .75rem 1rem;
  font-weight: 700;
}
.skip-link:focus { transform: translateY(0); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex="-1"]:focus-visible {
  outline: 3px solid rgba(36, 87, 214, .45);
  outline-offset: 3px;
}

.billing-option[aria-pressed="true"] {
  background: var(--ink);
  color: white;
  box-shadow: 0 5px 14px rgba(12, 24, 20, .16);
}
.billing-option[aria-pressed="true"] span { color: #a7f3d0; }

.pricing-card {
  transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}
.pricing-card:hover,
.pricing-card:focus-within {
  border-color: #a9bbb2;
  box-shadow: 0 20px 50px rgba(12, 24, 20, .08);
  transform: translateY(-2px);
}
.pricing-card[data-featured="true"] {
  border-color: var(--pine);
  box-shadow: 0 20px 50px rgba(23, 84, 63, .10);
}
.pricing-select-wrap { position: relative; }
.pricing-select-wrap::after {
  content: '';
  position: absolute;
  right: 1rem;
  top: 50%;
  width: .5rem;
  height: .5rem;
  border-right: 1.5px solid #64748b;
  border-bottom: 1.5px solid #64748b;
  pointer-events: none;
  transform: translateY(-70%) rotate(45deg);
}
.pricing-select { appearance: none; }

.field-control {
  width: 100%;
  min-height: 3rem;
  border: 1px solid var(--line);
  border-radius: .75rem;
  background: #fbfcfb;
  color: var(--ink);
  padding: .75rem .875rem;
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}
.field-control:hover { border-color: #adbbb4; }
.field-control:focus {
  border-color: var(--pine);
  background: white;
  box-shadow: 0 0 0 4px rgba(23, 84, 63, .09);
  outline: none;
}
.field-control[aria-invalid="true"] {
  border-color: var(--danger);
  background: #fffafa;
}
textarea.field-control { min-height: 9rem; resize: vertical; }
.field-error { color: var(--danger); }

[data-whatsapp-link][aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .68;
}

.toast {
  transition: opacity 180ms ease, transform 180ms ease;
}
.toast[data-visible="false"] { opacity: 0; pointer-events: none; transform: translate(-50%, 12px); }
.toast[data-visible="true"] { opacity: 1; transform: translate(-50%, 0); }

details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details[open] .faq-plus { transform: rotate(45deg); }

@media (max-width: 640px) {
  .page-shell { width: min(100% - 1.25rem, 88rem); }
  body.marketing-page { background-size: 32px 32px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}