/* Quori landing — styles (ported from the Claude Design "Quori Landing" proposal).
   Light/cream theme, green accent. Most component styling is inline in render.mjs;
   this file holds the reset, animations, responsive rules and the CSS-only
   interactions (price toggle + FAQ accordion). */

/* ---------- Reset / base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Manrope', system-ui, sans-serif;
  background: oklch(0.985 0.006 95);
  color: oklch(0.24 0.012 80);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color .55s ease;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
::selection { background: oklch(0.9 0.06 158); }

@keyframes floatIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- Links / buttons hover ---------- */
.navlink:hover { color: oklch(0.58 0.11 158); }
.cta-dark:hover { color: oklch(0.985 0.006 95); filter: brightness(1.14); }
.cta-light:hover { color: oklch(0.24 0.012 80); border-color: oklch(0.72 0.08 158); }
.wa:hover { color: #fff; filter: brightness(1.06); }

/* ---------- Price toggle (pure CSS, radio-driven) ---------- */
.billr { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.billb {
  padding: 11px 20px; border-radius: 11px; cursor: pointer;
  font-family: 'Manrope'; font-weight: 600; font-size: 15px; white-space: nowrap;
  color: oklch(0.45 0.012 80); background: transparent; transition: all .15s;
}
.billb:hover { color: oklch(0.24 0.012 80); }
.billr:checked + .billb { background: oklch(0.24 0.012 80); color: oklch(0.985 0.006 95); }
.billr:focus-visible + .billb { outline: 3px solid oklch(0.85 0.06 158); outline-offset: 2px; }
/* Swap monthly/annual price blocks */
.price-a { display: none; }
#precio:has(#bill-a:checked) .price-m { display: none; }
#precio:has(#bill-a:checked) .price-a { display: block; }

/* ---------- FAQ accordion (<details>) ---------- */
.faq-item summary { list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item[open] .faq-plus { transform: rotate(45deg); }
.faq-item summary:hover { color: oklch(0.5 0.1 158); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero-grid, .split-dark, .faq-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .feat-grid { grid-template-columns: 1fr 1fr !important; }
  .footer-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 600px) {
  .feat-grid, .footer-grid, .pay-grid { grid-template-columns: 1fr !important; }
  .nav-hide { display: none !important; }
  .toggle-wrap { flex-direction: column; width: 100%; }
  .toggle-wrap .billb { width: 100%; text-align: center; }
  h1 { font-size: 36px !important; }
}