/* Shared mechanics for the /quote/ landing-page drafts (v1, v2, v3).
   Each version's stylesheet sets the tokens below and skins the components. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.55;
}
.page { overflow-x: clip; }
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus, #5ce1e6); outline-offset: 3px; }
[hidden] { display: none !important; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: #5ce1e6; color: #101113; font-weight: 700; padding: 10px 16px; border-radius: 8px; text-decoration: none;
}
.skip-link:focus { top: 12px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.stars { color: var(--star, #ffc24b); letter-spacing: 0.08em; }

/* ---------- Quote card mechanics ---------- */

.qcard { position: relative; scroll-margin-top: 96px; }
.qf__meta { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.qf__count { flex: none; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; }
.qf__bar { position: relative; flex: 1; height: 4px; border-radius: 4px; overflow: hidden; background: var(--qf-track, rgba(0,0,0,.1)); }
.qf__bar i {
  position: absolute; inset: 0; transform-origin: left;
  transform: scaleX(var(--qf-p, .25));
  background: var(--qf-fill, #5ce1e6);
  transition: transform .45s cubic-bezier(.22,.61,.36,1);
}
.qf__q { font-weight: 700; margin-bottom: 12px; outline: none; }
.qf__opt {
  display: flex; align-items: center; gap: 12px; width: 100%;
  margin-bottom: 8px; padding: 12px 14px; text-align: left; cursor: pointer;
  border: 1px solid var(--opt-line); border-radius: var(--opt-radius, 10px);
  background: var(--opt-bg); color: var(--opt-ink);
  transition: border-color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease;
}
.qf__opt:hover { border-color: var(--opt-hover-line); background: var(--opt-hover-bg, var(--opt-bg)); }
.qf__opt:active { transform: scale(.99); }
.qf__opt[aria-pressed="true"] { border-color: var(--opt-hover-line); box-shadow: inset 0 0 0 1px var(--opt-hover-line); }
.qf__ico {
  flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--ico-radius, 9px);
  background: var(--ico-bg); color: var(--ico-ink); font-weight: 800; font-size: 13px; letter-spacing: -.02em;
}
.qf__txt { flex: 1; font-weight: 600; font-size: 15px; line-height: 1.3; }
.qf__txt small { display: block; margin-top: 2px; font-weight: 400; font-size: 13px; opacity: .72; }
.qf__go { flex: none; opacity: .45; transition: transform .16s ease, opacity .16s ease; }
.qf__opt:hover .qf__go { opacity: 1; transform: translateX(3px); }
.qf__back {
  margin-top: 4px; padding: 6px 0; border: 0; background: none; cursor: pointer;
  font-size: 13px; font-weight: 600; opacity: .7;
}
.qf__back:hover { opacity: 1; }
.qf__field { display: block; margin-bottom: 10px; font-size: 13px; font-weight: 600; }
.qf__field span { display: block; margin-bottom: 5px; }
.qf__field input {
  display: block; width: 100%; height: 48px; padding: 0 14px; font-size: 16px;
  border: 1px solid var(--opt-line); border-radius: var(--opt-radius, 10px);
  background: var(--opt-bg); color: var(--opt-ink);
}
.qf__field input::placeholder { color: var(--opt-ink); opacity: .45; }
.qf__field input:focus { outline: none; border-color: var(--opt-hover-line); box-shadow: 0 0 0 3px var(--ring, rgba(92,225,230,.3)); }
.qf__field input[aria-invalid="true"] { border-color: #e5484d; }
.qf__error { margin: 4px 0 10px; padding: 10px 12px; border-radius: 8px; font-size: 13px; background: #fdecec; color: #a3141c; }
.qf__error a { color: inherit; font-weight: 700; }
.qf__actions { display: flex; gap: 8px; margin-top: 6px; }
.qf__back--sq {
  flex: none; width: 52px; margin: 0; padding: 0; opacity: 1;
  border: 1px solid var(--opt-line); border-radius: var(--opt-radius, 10px); background: var(--opt-bg); color: var(--opt-ink); font-size: 18px;
}
.qf__submit {
  flex: 1; height: 52px; border: 0; cursor: pointer; font-weight: 700; font-size: 16px;
  border-radius: var(--btn-radius, 10px); background: var(--submit-bg); color: var(--submit-ink);
  transition: filter .16s ease, transform .16s ease;
}
.qf__submit:hover { filter: brightness(1.06); }
.qf__submit:disabled { opacity: .7; cursor: progress; }
.qf__consent { margin-top: 12px; font-size: 11px; line-height: 1.5; opacity: .62; }
.qf__consent a { text-decoration: underline; }
.qf-success { padding: 18px 0 6px; text-align: center; outline: none; }
.qf-success__tick { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--qf-fill, #5ce1e6); color: #101113; margin-bottom: 14px; }
.qf-success__title { font-size: 22px; margin-bottom: 8px; }
.qf-success a { font-weight: 700; }
.qcard.is-done .qf__meta, .qcard.is-done .qcard__foot { display: none; }
.qcard__foot { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 12px; font-size: 13px; }
.qcard__foot a { font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

.qf__step.is-entering { animation: qf-in .32s cubic-bezier(.22,.61,.36,1); }
@keyframes qf-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }

.qcard.is-pulse { animation: qcard-pulse 1.2s ease 2; }
@keyframes qcard-pulse {
  0%, 100% { box-shadow: var(--card-shadow, 0 0 0 0 transparent), 0 0 0 0 rgba(92,225,230,0); }
  40% { box-shadow: var(--card-shadow, 0 0 0 0 transparent), 0 0 0 8px rgba(92,225,230,.45); }
}

/* ---------- Ribbon marquee ---------- */

.ribbon { overflow: hidden; white-space: nowrap; }
.ribbon__track { display: inline-flex; align-items: center; animation: ribbon 48s linear infinite; }
.ribbon__track > * { flex: none; }
@keyframes ribbon { to { transform: translateX(-50%); } }

/* ---------- Sticky mobile CTA ---------- */

.sticky {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60;
  display: none; gap: 8px; padding: 8px; border-radius: 16px;
  background: var(--sticky-bg, rgba(16,17,19,.92)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 12px 40px rgba(0,0,0,.3);
  transform: translateY(140%); transition: transform .35s cubic-bezier(.22,.61,.36,1);
}
.sticky.is-on { transform: none; }
.sticky a { display: flex; align-items: center; justify-content: center; gap: 8px; height: 50px; border-radius: 10px; font-weight: 700; text-decoration: none; }
.sticky__quote { flex: 1; background: #5ce1e6; color: #101113; }
.sticky__call { flex: none; padding: 0 18px; background: rgba(255,255,255,.1); color: #fff; }
@media (max-width: 760px) { .sticky { display: flex; } }

/* ---------- Reveal ---------- */

.reveal-ready [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1); }
.reveal-ready [data-reveal].is-in { opacity: 1; transform: none; }

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