/* Clipwedge SEO waitlist · B-20261028-01 L1
   Shared utilities + form contract. Layout/tokens live in styles-{a,b,c,d}.css */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Source+Serif+4:wght@300;400&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ok: #34d399;
  --ok-bg: rgba(52, 211, 153, 0.12);
  --err: #f87171;
  --err-bg: rgba(248, 113, 113, 0.12);
  --sticky-h: 3.5rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}
html, body {
  margin: 0; padding: 0; min-height: 100%;
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}
body { padding-bottom: calc(var(--sticky-h) + 1rem); }
body.sticky-hidden { padding-bottom: 0; }
img, svg { max-width: 100%; display: block; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Form contract (app.js) */
.waitlist-form { display: grid; gap: 0.7rem; }
.waitlist-form label { font-size: 0.8rem; font-weight: 500; }
.waitlist-form .field { display: grid; gap: 0.35rem; }
.waitlist-form input,
.waitlist-form textarea {
  width: 100%; font: inherit; padding: 0.75rem 0.9rem; border: 1px solid;
  background: transparent; color: inherit; min-height: 44px;
}
.waitlist-form textarea { min-height: 4.5rem; resize: vertical; }
.waitlist-form input:disabled,
.waitlist-form textarea:disabled,
.waitlist-form button:disabled { opacity: 0.55; cursor: not-allowed; }
.note-toggle {
  background: none; border: 0; padding: 0; font: inherit; text-align: left;
  cursor: pointer; color: inherit; opacity: 0.7; min-height: 44px;
}
.note-toggle:hover { opacity: 1; }
.result-panel { display: none; padding: 1rem 1.1rem; border-radius: inherit; }
.result-panel.is-visible { display: block; }
.result-panel.ok { background: var(--ok-bg); color: var(--ok); border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent); }
.result-panel.err { background: var(--err-bg); color: var(--err); border: 1px solid color-mix(in srgb, var(--err) 35%, transparent); }
.result-panel .result-title { font-weight: 600; font-size: 0.95rem; margin: 0 0 0.25rem; }
.result-panel .result-body { margin: 0; font-size: 0.85rem; line-height: 1.45; opacity: 0.95; }
.form-shell.is-done .waitlist-form { display: none; }
.form-shell.is-done .hero-card-title { display: none; }
.msg { margin: 0; font-size: 0.85rem; }

.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; justify-content: center; padding: 0.65rem 1rem;
  background: color-mix(in srgb, var(--bg, #000) 92%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--border, #333) 80%, transparent);
  backdrop-filter: blur(10px);
  transition: transform 160ms ease, opacity 160ms ease;
}
.sticky-cta.is-hidden { transform: translateY(110%); opacity: 0; pointer-events: none; }
.sticky-cta a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0.65rem 1.25rem; font-weight: 500;
  border-radius: var(--radius-ctl, 0.75rem);
  background: var(--accent, #beff50); color: var(--cta-fg, #14140f);
}
.sticky-cta a:hover { filter: brightness(1.05); text-decoration: none; }
@media (min-width: 768px) {
  .sticky-cta { display: none; }
}

.reveal { opacity: 0; transform: translateY(10px); transition: opacity 180ms ease, transform 180ms ease; }
.reveal.is-in { opacity: 1; transform: none; }

details.faq > summary {
  list-style: none; cursor: pointer; min-height: 44px;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
details.faq > summary::-webkit-details-marker { display: none; }
details.faq > summary::after { content: "+"; font-weight: 500; opacity: 0.6; }
details.faq[open] > summary::after { content: "−"; }