/*
 * AQUROV landing pages — the canvas a campaign page stands on.
 *
 * Used by single-landing_page.php only, which renders no header and no footer.
 * The theme's global sheet still loads (body, links, focus ring), so this sheet
 * decides three things and nothing else:
 *
 *   1. the canvas — a white page, one reading column, the site's own type;
 *   2. the typography of pasted content, because the page is written in the
 *      classic editor and arrives as plain HTML (headings, lists, tables,
 *      captioned images);
 *   3. the phone version of the same thing.
 *
 * Every value comes from assets/css/tokens.css, so a landing page and the rest
 * of the site cannot drift apart. The single number worth knowing is the 760px
 * reading column on .aq-landing-inner: it is what a text-led campaign page
 * wants, and a page that needs a full-bleed hero instead would widen it or add
 * a variant here rather than in the template.
 */

.aq-landing {
  min-height: 100vh;
  background: var(--aq-white, #fff);
  color: var(--aq-ink, #17212B);
  font-family: var(--aq-font, Inter, ui-sans-serif, system-ui, sans-serif);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.aq-landing,
.aq-landing *,
.aq-landing *::before,
.aq-landing *::after { box-sizing: border-box; }

.aq-landing-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 64px 24px 96px;
}

/* Content ----------------------------------------------------------------- */

.aq-landing-inner > *:first-child { margin-top: 0; }

.aq-landing-inner h1,
.aq-landing-inner h2,
.aq-landing-inner h3,
.aq-landing-inner h4 {
  color: var(--aq-ink, #17212B);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 36px 0 16px;
}

.aq-landing-inner h1 { font-size: 40px; font-weight: 800; }
.aq-landing-inner h2 { font-size: 28px; font-weight: 800; }
.aq-landing-inner h3 { font-size: 20px; font-weight: 700; }
.aq-landing-inner h4 { font-size: 17px; font-weight: 700; }

.aq-landing-inner p { margin: 0 0 18px; line-height: 1.7; }

.aq-landing-inner a {
  color: var(--aq-blue, #0F5FB8);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.aq-landing-inner a:hover { color: var(--aq-blue-dark, #0A4D95); }

.aq-landing-inner ul,
.aq-landing-inner ol { margin: 0 0 18px; padding-left: 22px; }
.aq-landing-inner li { margin-bottom: 8px; line-height: 1.65; }

.aq-landing-inner img,
.aq-landing-inner iframe { max-width: 100%; height: auto; border-radius: var(--aq-radius, 8px); }

.aq-landing-inner figure { margin: 0 0 22px; max-width: 100%; }
.aq-landing-inner .wp-caption-text { margin: 8px 0 0; font-size: 13px; color: var(--aq-muted, #687684); }

.aq-landing-inner blockquote {
  margin: 0 0 22px;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--aq-cyan, #1697B8);
  color: var(--aq-body, #40505E);
}

.aq-landing-inner table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 22px;
  font-size: 14.5px;
}

.aq-landing-inner th,
.aq-landing-inner td {
  padding: 10px 12px;
  border: 1px solid var(--aq-border, #DBE3EA);
  text-align: left;
  vertical-align: top;
}

.aq-landing-inner th { background: var(--aq-alt, #F5F7FA); font-weight: 700; }

.aq-landing-inner hr { border: 0; border-top: 1px solid var(--aq-border, #DBE3EA); margin: 32px 0; }

/* Images placed with the editor's alignment buttons. */
.aq-landing-inner .alignleft { float: left; margin: 0 24px 16px 0; }
.aq-landing-inner .alignright { float: right; margin: 0 0 16px 24px; }
.aq-landing-inner .aligncenter { display: block; margin-left: auto; margin-right: auto; }

@media (max-width: 620px) {
  .aq-landing-inner { padding: 40px 18px 64px; }
  .aq-landing-inner h1 { font-size: 32px; }
  .aq-landing-inner h2 { font-size: 24px; }
}