/*
Theme Name: AdNexus
Theme URI: https://example.com/adnexus
Author: AdNexus
Description: A one-page marketing theme for a quiz, poll, and survey engagement platform built for online publishers. Includes a hero, feature clusters, pricing, and FAQ sections.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: quizmill
*/

:root{
  --ink: #171B24;
  --paper: #EDEFF3;
  --paper-alt: #E3E6ED;
  --coral: #E5573F;
  --coral-deep: #C7412B;
  --indigo: #2B3468;
  --slate: #5A6270;
  --line: #CBD0DA;
  --max: 1120px;
}
*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

/* Every top-level section is a nav/anchor-link target (header nav,
   "Get Started" buttons, "See how it works", etc). The header is
   sticky, so without this the section's own heading lands right
   under — and partly behind — the header after the jump. Any anchor
   jump ends with the page scrolled, so the header has already
   shrunk to its compact (.is-scrolled) height (~58px) by the time
   the section lands — this offsets by that height plus a small gap,
   so the section starts right at the bottom edge of the header. */
section[id]{ scroll-margin-top: 66px; }
body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3{
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  line-height: 1.1;
  margin: 0;
  letter-spacing: -0.01em;
}
p{ margin: 0; }
a{ color: inherit; text-decoration: none; }
ul{ margin: 0; }
.wrap{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 32px;
}
section{ padding: 88px 0; }
.hairline{ border-top: 1px solid var(--line); }

a:focus-visible, summary:focus-visible, button:focus-visible{
  outline: 2px solid var(--indigo);
  outline-offset: 3px;
}

/* ---------- Header ---------- */
.site-header{
  position: sticky;
  /* Sit just below the WP admin toolbar (32px desktop / 46px on
     screens under 783px) when logged in, instead of sticking to the
     very top of the viewport and getting tucked underneath it once
     the header docks on scroll. WordPress exposes the toolbar's
     current height as this custom property; it's 0 when logged out
     or the toolbar is hidden, so this is a no-op for visitors. */
  top: var(--wp-admin--admin-bar--height, 0px);
  z-index: 10;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .2s ease;
}
.site-header.is-scrolled{
  box-shadow: 0 1px 2px rgba(23,27,36,.05), 0 8px 20px -12px rgba(23,27,36,.12);
}
.site-header nav.wrap{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 22px;
  padding-bottom: 22px;
  gap: 24px;
  transition: padding .2s ease;
}
/* Shrinks the header once the page is scrolled, to free up room for
   content, then eases back to full size at the top. */
.site-header.is-scrolled nav.wrap{
  padding-top: 10px;
  padding-bottom: 10px;
}
.logo{
  display: flex;
  align-items: center;
  order: 1;
}
.logo-image{
  height: 28px;
  width: auto;
  display: block;
  transition: height .2s ease;
}
.site-header.is-scrolled .logo-image{ height: 20px; }
.footer-brand .logo-image{ height: 32px; }
.nav-links{
  display: flex;
  gap: 32px;
  font-size: 15px;
  order: 2;
  transition: font-size .2s ease;
}
.site-header.is-scrolled .nav-links{ font-size: 12px; }
.nav-links ul{ list-style: none; display: flex; gap: 32px; padding: 0; margin: 0; }
.nav-links a{ color: var(--slate); }
.nav-links a:hover{ color: var(--ink); }
.nav-cta{ order: 4; }
.site-header.is-scrolled .nav-cta .btn{
  padding: 8px 15px;
  font-size: 12px;
}
.btn.nav-cta-mobile{ display: none; }
.nav-links a.nav-cta-mobile{ color: var(--paper); }

.menu-toggle{
  display: none;
  order: 3;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.menu-toggle .bar{
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  margin: 5px 0;
  transition: transform 150ms ease, opacity 150ms ease;
}
.menu-toggle[aria-expanded="true"] .bar:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .bar:nth-child(2){ opacity: 0; }
.menu-toggle[aria-expanded="true"] .bar:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
.btn{
  display: inline-block;
  padding: 12px 22px;
  background: var(--ink);
  color: var(--paper);
  font-size: 14.5px;
  font-weight: 500;
  border: 1px solid var(--ink);
  border-radius: 3px;
  cursor: pointer;
  transition: padding .2s ease, font-size .2s ease, transform .2s ease, box-shadow .2s ease, filter .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover{
  background: var(--indigo);
  border-color: var(--indigo);
  transform: translateY(-3px);
  box-shadow: 0 10px 24px -12px rgba(23,27,36,.35);
}
.btn-accent{
  background: var(--qm-accent, var(--coral));
  border-color: var(--qm-accent, var(--coral));
  color: #fff;
}
.btn-accent:hover{ filter: brightness(0.88); }
.btn-outline{
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn-outline:hover{ background: var(--ink); color: var(--paper); }

/* ---------- Hero ---------- */
.hero{ padding-top: 96px; padding-bottom: 72px; }
.hero-grid{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
}
.hero h1{
  font-size: clamp(34px, 4.4vw, 52px);
  max-width: 22ch;
}
.hero .sub{
  margin-top: 24px;
  font-size: 18px;
  color: var(--slate);
  max-width: 46ch;
}
.hero-actions{
  margin-top: 36px;
  display: flex;
  align-items: center;
  gap: 22px;
}
.hero-actions .link{
  font-size: 14.5px;
  color: var(--slate);
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
}
.hero-actions .link:hover{ color: var(--ink); border-color: var(--ink); }

/* ---------- Stats strip block ---------- */
.qm-stats-section .wrap{
  /* Centers the badge below (an inline-flex element) and gives the
     checks list a starting point to center from too. */
  text-align: center;
}
.qm-stats-section .section-kicker{ display: block; margin-bottom: 16px; }
.qm-stats-badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--coral-deep);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 16px;
  margin-bottom: 20px;
}
.qm-stats-badge::before{
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--coral);
  flex-shrink: 0;
}
.qm-stats-badge-dot{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--coral);
  flex-shrink: 0;
}
.qm-stats-headline{
  /* Same max size as every other block's section heading
     (.section-head h2 tops out at 34px too). The low end scales down
     further than a normal heading would, because this one must never
     wrap onto a 2nd line — a regular heading is free to wrap on a
     narrow phone, this one isn't. */
  font-size: clamp(15px, 4.2vw, 34px);
  white-space: nowrap;
  margin: 0 auto;
}
.qm-stats-headline-accent{
  color: var(--coral);
}
.qm-stats-paragraph{
  margin: 20px auto 28px;
  max-width: 62ch;
  font-size: 17px;
  color: var(--slate);
}
.qm-stats-checks{
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 28px;
}
.qm-stats-checks li{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--slate);
}
.qm-stats-checks svg{
  color: var(--coral);
  flex-shrink: 0;
}
.qm-stats-actions{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  margin: 40px 0 0;
}
.qm-stats-strip{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.qm-stats-card{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px;
  display: flex;
  flex-direction: column;
}
.qm-stats-top{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 10px;
  /* Fixed (not just minimum) height, so this row is always exactly
     the same size on every card — the value/trend below it then
     starts at the same y-position on every card no matter how the
     label text happens to wrap. */
  height: 34px;
}
.qm-stats-label{
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--slate);
  /* Clip to 2 lines instead of growing past the row's fixed height
     above — this is what actually guarantees the alignment. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.qm-stats-icon{
  width: 28px; height: 28px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.qm-stats-value{
  font-family: 'Space Grotesk', sans-serif;
  font-size: 22px;
  font-weight: 700;
}
.qm-stats-trend{
  font-size: 12px;
  color: var(--slate);
  margin-top: 4px;
}

/* mock quiz card in hero */
.quiz-card{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 28px;
  box-shadow: none;
}
.quiz-card .q-label{
  font-size: 13px;
  color: var(--slate);
  margin-bottom: 10px;
}
.quiz-card h3{
  font-size: 19px;
  margin-bottom: 20px;
  font-weight: 600;
}
.quiz-option{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: 7px;
  margin-bottom: 10px;
  font-size: 15px;
}
.quiz-option .dot{
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  flex-shrink: 0;
}
.quiz-option.picked{
  border-color: var(--qm-accent, var(--coral));
  background: #FCF0EE;
  animation: pick 700ms 500ms both;
}
.quiz-option.picked .dot{
  border-color: var(--qm-accent, var(--coral));
  background: var(--qm-accent, var(--coral));
  position: relative;
}
@keyframes pick{
  from{ background: #fff; border-color: var(--line); }
  to{ background: #FCF0EE; border-color: var(--coral); }
}

.hero-image{
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--line);
  display: block;
  object-fit: cover;
}
@media (prefers-reduced-motion: reduce){
  .quiz-option.picked{ animation: none; }
}

/* ---------- Feature clusters ---------- */
.section-head{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  margin: 0 auto 56px;
}
.section-kicker{
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--qm-accent, var(--coral));
}
.section-head h2{ font-size: clamp(26px, 3vw, 34px); max-width: 20ch; margin: 0 auto; }
.section-head .note{ color: var(--slate); max-width: 46ch; font-size: 15px; text-align: center; margin: 0 auto; }

.features-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  column-gap: 56px;
}
.feature-row{
  display: grid;
  grid-template-columns: 40px 1fr;
  grid-template-rows: auto auto 1fr;
  column-gap: 20px;
  row-gap: 6px;
  padding: 30px 0;
  border-top: 1px solid var(--line);
  align-items: start;
}
.feature-row:nth-child(3n){ border-bottom: 1px solid var(--line); }
.feature-row h3{ grid-column: 2; }
.feature-row ul{ grid-column: 2; }
.answer-marker{
  width: 34px; height: 34px;
  border: 1.5px solid var(--qm-accent, var(--indigo));
  color: var(--qm-accent, var(--indigo));
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 15px;
}
.answer-marker--image{
  object-fit: cover;
  border-style: solid;
}
.feature-row h3{ font-size: 20px; font-weight: 600; }
.feature-row ul{
  list-style: none;
  padding: 0;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.feature-row ul li{
  color: var(--slate);
  font-size: 15px;
  padding-left: 16px;
  position: relative;
  max-width: 52ch;
}
.feature-row ul li::before{
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 5px; height: 5px;
  background: var(--coral);
  border-radius: 50%;
}
.monetization-icon{
  width: auto;
  height: 28px;
  display: block;
  margin-bottom: 16px;
  object-fit: contain;
}

.monetization-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.monetization-card{
  background: var(--qm-card-bg, #fff);
  border: 1px solid color-mix(in srgb, var(--qm-card-accent, var(--indigo)) 18%, var(--line));
  border-radius: 14px;
  padding: 32px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.monetization-card:hover{
  transform: translateY(-6px);
  border-color: var(--qm-card-accent, var(--indigo));
  box-shadow: 0 12px 28px -14px rgba(23,27,36,.25), 0 2px 8px rgba(23,27,36,.06);
}
.monetization-card h3{ font-size: 20px; font-weight: 600; margin-bottom: 18px; color: var(--qm-card-accent, var(--ink)); }
.monetization-card ul{
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.monetization-card ul li{
  color: var(--slate);
  font-size: 15px;
  padding-left: 16px;
  position: relative;
  max-width: 46ch;
}
.monetization-card ul li::before{
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 5px; height: 5px;
  background: var(--qm-card-accent, var(--indigo));
  border-radius: 50%;
}

/* ---------- Pricing ---------- */
.price-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--line);
}
.price-col{
  padding: 40px 32px;
  border-left: 1px solid var(--line);
  background: var(--paper);
}
.price-col:first-child{ border-left: none; }
.price-col.featured{ background: var(--ink); color: var(--paper); }
.price-tier{ font-size: 14.5px; color: var(--slate); margin-bottom: 6px; }
.price-col.featured .price-tier{ color: #A6ACC2; }
.price-amount{ font-family: 'Space Grotesk', sans-serif; font-size: 38px; margin: 6px 0 4px; font-weight: 700; }
.price-amount span{ font-family: 'Inter', sans-serif; font-size: 14px; color: var(--slate); font-weight: 400; }
.price-col.featured .price-amount span{ color: #A6ACC2; }
.price-desc{ font-size: 14px; color: var(--slate); margin-bottom: 26px; }
.price-col.featured .price-desc{ color: #C3C7DA; }
.price-list{ list-style: none; margin: 0 0 28px; padding: 0; font-size: 14.5px; }
.price-list li{ padding: 9px 0; border-top: 1px solid var(--line); display: flex; gap: 10px; }
.price-col.featured .price-list li{ border-top-color: #333B57; }
.price-list li:first-child{ border-top: none; }
.check{ color: var(--qm-accent, var(--indigo)); flex-shrink: 0; }
.price-col.featured .check{ color: var(--coral); }
.price-col .btn{ width: 100%; text-align: center; box-sizing: border-box; }
.price-col.featured .btn{ background: var(--coral); border-color: var(--coral); color: #fff; }
.price-col.featured .btn:hover{ background: var(--coral-deep); border-color: var(--coral-deep); }
.price-col:not(.featured) .btn{ background: transparent; color: var(--ink); border-color: var(--ink); }
.price-col:not(.featured) .btn:hover{ background: var(--ink); color: var(--paper); }

/* ---------- FAQ ---------- */
.faq{ max-width: 760px; margin: 0 auto; text-align: center; }
details{ border-top: 1px solid var(--line); padding: 22px 0; }
details:last-of-type{ border-bottom: 1px solid var(--line); }
summary{
  cursor: pointer;
  position: relative;
  font-size: 17px;
  font-weight: 600;
  font-family: 'Space Grotesk', sans-serif;
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  /* Reserves space on both sides so the centered question text never
     collides with the +/- toggle, which stays pinned to the right. */
  padding: 0 36px;
}
summary::-webkit-details-marker{ display: none; }
summary::after{
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 22px;
  color: var(--slate);
  flex-shrink: 0;
}
details[open] summary::after{ content: "\2212"; }
.faq-answer{ margin: 14px auto 0; color: var(--slate); font-size: 15.5px; max-width: 58ch; text-align: center; font-family: 'Inter', sans-serif; font-weight: 400; }

/* ---------- CTA band ---------- */
.cta-band{ color: var(--paper); text-align: center; }
.cta-band .wrap{
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 24px;
}
.cta-band h2{ font-size: clamp(24px, 3vw, 32px); max-width: 20ch; margin: 0 auto; color: var(--paper); }
.cta-band .btn:hover{
  background: #fff;
  border-color: #fff;
  color: var(--ink);
  filter: none;
}

/* ---------- Footer ---------- */
.site-footer{ padding: 64px 0 40px; }
.footer-grid{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 40px;
}
.footer-brand p{ margin-top: 14px; color: var(--slate); font-size: 14.5px; max-width: 32ch; }
.footer-col h4{ font-size: 13.5px; color: var(--slate); font-weight: 500; margin-bottom: 14px; font-family: 'Inter', sans-serif; }
.footer-col ul{ list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; }
.footer-col a:hover{ color: var(--indigo); }
.footer-bottom{
  padding-top: 28px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; font-size: 13.5px; color: var(--slate);
  flex-wrap: wrap; gap: 10px;
}

/* ---------- Revenue Calculator ---------- */
.qm-calculator{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  margin-top: 48px;
}
.qm-calc-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.qm-calc-controls{
  padding: 40px;
  border-right: 1px solid var(--line);
}
.qm-calc-group{ margin-bottom: 30px; }
.qm-calc-group:last-child{ margin-bottom: 0; }
.qm-calc-label-row{
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; margin-bottom: 12px;
}
.qm-calc-label{
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 600;
}
.qm-calc-output{
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--qm-accent, var(--coral));
  background: #FCF0EE;
  border: 1px solid var(--qm-accent, var(--coral));
  padding: 4px 9px;
  border-radius: 8px;
  white-space: nowrap;
}
.qm-calc-range{
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px;
  border-radius: 4px;
  background: var(--paper-alt);
  outline: none;
}
.qm-calc-range::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--qm-accent, var(--coral));
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px var(--qm-accent, var(--coral)), 0 2px 6px rgba(23,27,36,.2);
  cursor: pointer;
}
.qm-calc-range::-moz-range-thumb{
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--qm-accent, var(--coral));
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px var(--qm-accent, var(--coral)), 0 2px 6px rgba(23,27,36,.2);
  cursor: pointer;
}
.qm-calc-range::-moz-range-track{ background: var(--paper-alt); height: 6px; border-radius: 4px; }
.qm-calc-scale{
  display: flex; justify-content: space-between;
  margin-top: 8px;
  font-size: 11px; color: var(--slate);
}
.qm-geo-selector{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin-top: 12px;
}
.qm-geo-btn{
  font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 600; line-height: 1.35;
  color: var(--slate);
  background: var(--paper-alt);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 8px;
  cursor: pointer;
  text-align: center;
}
.qm-geo-btn small{ display: block; font-weight: 400; opacity: .8; margin-top: 2px; }
.qm-geo-btn.active{
  background: #FCF0EE;
  border-color: var(--qm-accent, var(--coral));
  color: var(--qm-accent, var(--coral));
}
.qm-calc-results{
  padding: 40px;
  background: var(--paper);
}
.qm-result-title{ font-family: 'Space Grotesk', sans-serif; font-size: 15px; font-weight: 600; margin-bottom: 2px; }
.qm-result-subtitle{ font-size: 12.5px; color: var(--slate); margin-bottom: 20px; }
.qm-compare-cards{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.qm-res-card{
  border-radius: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  background: #fff;
}
.qm-res-card-label{ font-size: 11.5px; color: var(--slate); margin-bottom: 8px; }
.qm-res-card-value{
  font-family: 'Space Grotesk', sans-serif;
  font-size: 22px; font-weight: 700;
}
.qm-res-card-projected{ background: #FCF0EE; border-color: var(--qm-accent, var(--coral)); }
.qm-res-card-projected .qm-res-card-value{ color: var(--qm-accent, var(--coral)); }
.qm-uplift-badge{
  display: inline-flex; align-items: center;
  margin-top: 8px;
  font-size: 11px; font-weight: 700;
  color: var(--qm-accent, var(--coral));
  background: #fff;
  border: 1px solid var(--qm-accent, var(--coral));
  padding: 4px 8px;
  border-radius: 100px;
}
.qm-annual-box{
  display: flex; justify-content: space-between; align-items: center;
  background: var(--ink);
  color: var(--paper);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 18px;
}
.qm-annual-label{ font-family: 'Space Grotesk', sans-serif; font-size: 12px; font-weight: 600; }
.qm-annual-sub{ font-size: 11px; color: var(--line); margin-top: 2px; }
.qm-annual-value{
  font-family: 'Space Grotesk', sans-serif;
  font-size: 22px; font-weight: 700;
  color: var(--qm-accent, var(--coral));
}
.qm-calc-footnote{
  font-size: 11.5px; color: var(--slate);
  text-align: center; line-height: 1.5;
  margin-top: 12px;
}

/* ---------- Contact form ---------- */
.qm-contact-form{
  max-width: 720px;
  margin: 0 auto;
}
.qm-form-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.qm-field{
  margin-bottom: 20px;
  position: relative;
}
.qm-field label{
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  margin-bottom: 6px;
}
.qm-req{ color: var(--qm-accent, var(--coral)); }
.qm-field input[type="text"],
.qm-field input[type="email"],
.qm-field input[type="url"],
.qm-field textarea{
  width: 100%;
  box-sizing: border-box;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.qm-field textarea{ resize: vertical; min-height: 110px; }
.qm-field input:focus,
.qm-field textarea:focus{
  outline: none;
  border-color: var(--qm-accent, var(--indigo));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--qm-accent, var(--indigo)) 18%, transparent);
}
.qm-field-error{
  display: none;
  color: var(--coral-deep);
  font-size: 12.5px;
  margin-top: 6px;
}
.was-validated .qm-field input:invalid ~ .qm-field-error,
.was-validated .qm-field textarea:invalid ~ .qm-field-error{
  display: block;
}
.was-validated .qm-field input:invalid,
.was-validated .qm-field textarea:invalid{
  border-color: var(--coral-deep);
}
.qm-field-combobox.is-invalid .qm-combobox-input{
  border-color: var(--coral-deep);
}
.qm-field-combobox.is-invalid .qm-field-error{ display: block; }

.qm-combobox{ position: relative; }
.qm-combobox-list{
  list-style: none;
  margin: 6px 0 0;
  padding: 6px;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 5;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 12px 28px -12px rgba(23,27,36,.25);
  max-height: 240px;
  overflow-y: auto;
}
.qm-combobox-option{
  padding: 9px 10px;
  border-radius: 7px;
  font-size: 14.5px;
  cursor: pointer;
}
.qm-combobox-option.is-active,
.qm-combobox-option:hover{
  background: var(--paper);
}
.qm-combobox-empty{
  padding: 9px 10px;
  font-size: 14px;
  color: var(--slate);
}
.qm-form-footer{
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 8px;
}
.qm-form-status{
  font-size: 14px;
  color: var(--slate);
  margin: 0;
}
.qm-form-status.is-success{ color: #1E8A6E; font-weight: 600; }
.qm-form-status.is-error{ color: var(--coral-deep); font-weight: 600; }

/* ---------- Responsive ---------- */
@media (max-width: 860px){
  .hero-grid{ grid-template-columns: 1fr; }
  .features-grid{ grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
  .qm-form-row{ grid-template-columns: 1fr; gap: 0; }
  .feature-row{ grid-template-columns: 40px 1fr; }
  .feature-row:nth-child(3n){ border-bottom: none; }
  .feature-row:last-child{ border-bottom: 1px solid var(--line); }
  .qm-calc-grid{ grid-template-columns: 1fr; }
  .qm-calc-controls{ border-right: none; border-bottom: 1px solid var(--line); }
  .qm-stats-strip{ grid-template-columns: 1fr 1fr; gap: 12px; }
  .feature-row h3{ grid-column: 2; }
  .feature-row ul{ grid-column: 2; }
  .price-grid{ grid-template-columns: 1fr; }
  .price-col{ border-left: none; border-top: 1px solid var(--line); }
  .price-col:first-child{ border-top: none; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }

  .monetization-grid{ grid-template-columns: 1fr; gap: 20px; }

  .menu-toggle{ display: block; }
  .nav-cta{ display: none; }
  .nav-links{
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: 8px 32px 20px;
  }
  .nav-links.is-open{ display: block; }
  .nav-links ul{ flex-direction: column; gap: 0; }
  .nav-links ul li a{ display: block; padding: 12px 0; border-top: 1px solid var(--line); }
  .nav-links ul li:first-child a{ border-top: none; }
  .btn.nav-cta-mobile{
    display: block;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    margin-top: 16px;
  }
}
@media (max-width: 480px){
  .footer-grid{ grid-template-columns: 1fr; }
  section{ padding: 64px 0; }
  .qm-stats-strip{ grid-template-columns: 1fr; }
}

/* Static content pages (About, Terms, Privacy) */
.static-page{ padding: 64px 0 96px; }
.static-page-wrap{ max-width: 760px; }
.static-page-wrap h1{ font-size: clamp(30px, 4vw, 42px); margin: 0 0 8px; }
.static-page-updated{ color: var(--slate); font-size: 14px; margin: 0 0 40px; }
.static-page-body h2{ font-size: 20px; margin: 36px 0 12px; }
.static-page-body h2:first-child{ margin-top: 0; }
.static-page-body p{ color: var(--slate); font-size: 15.5px; line-height: 1.7; margin: 0 0 16px; }
.static-page-body ul{ padding-left: 20px; margin: 0 0 20px; }
.static-page-body li{ color: var(--slate); font-size: 15.5px; line-height: 1.7; margin-bottom: 8px; }
.static-page-body a{ color: var(--indigo); text-decoration: underline; }